mirror of
https://github.com/rubickCenter/rubick
synced 2025-06-29 01:02:47 +08:00
Merge pull request #173 from rubickCenter/feature/darkmode
✨ add dark mode
This commit is contained in:
璃白
GitHub
commit
afbe7dc385
@ -68,7 +68,7 @@ const store = useStore();
|
||||
const init = () => store.dispatch("init");
|
||||
init();
|
||||
</script>
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -77,11 +77,20 @@ init();
|
||||
.main-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background: #f2efef;
|
||||
background: var(--color-body-bg);
|
||||
flex-direction: column;
|
||||
|
||||
.slider-bar {
|
||||
width: 100%;
|
||||
.ant-menu {
|
||||
background: var(--color-body-bg);
|
||||
border-color: var(--color-border-light);
|
||||
:deep(.ant-menu-item) {
|
||||
&:not(.ant-menu-item-selected) {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
|
||||
@import "~ant-design-vue/dist/antd.less"; // 引入官方提供的 less 样式入口文件
|
||||
|
||||
@primary-color: #ff4ea4; // 全局主色
|
||||
@link-color: #ff4ea4; // 链接色
|
||||
@error-color: #ff4ea4; // 错误色
|
||||
|
||||
:root {
|
||||
--color-text-primary: rgba(0, 0, 0, 0.85);
|
||||
--color-text-content: #141414;
|
||||
--color-text-desc: rgba(0, 0, 0, 0.45);
|
||||
// 背景色
|
||||
--color-body-bg: #fff;
|
||||
--color-menu-bg: #f3efef;
|
||||
--color-list-hover: #e2e2e2;
|
||||
--color-input-hover: #fff;
|
||||
// 边框
|
||||
--color-border-light: #f0f0f0;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-text-primary: #e8e8f0;
|
||||
--color-text-content: #ccccd8;
|
||||
--color-text-desc: #8f8fa6;
|
||||
// 背景色
|
||||
--color-body-bg: #1c1c28;
|
||||
--color-menu-bg: #1c1c28;
|
||||
--color-list-hover: #33333d;
|
||||
--color-input-hover: #33333d;
|
||||
// 边框
|
||||
--color-border-light: #33333d;
|
||||
}
|
||||
|
||||
@ -1,20 +1,37 @@
|
||||
.left-menu {
|
||||
width: 200px;
|
||||
height: 100vh;
|
||||
border-right: 1px solid var(--color-border-light);
|
||||
.search-container {
|
||||
padding: 10px;
|
||||
}
|
||||
.ant-input-affix-wrapper {
|
||||
border: none;
|
||||
background: var(--color-input-hover);
|
||||
:deep(input) {
|
||||
background: none;
|
||||
color: var(--color-text-desc);
|
||||
}
|
||||
:deep(.anticon) {
|
||||
color: var(--color-text-desc);
|
||||
}
|
||||
}
|
||||
:deep(.ant-menu) {
|
||||
background: #F3EFEF;
|
||||
background: var(--color-menu-bg);
|
||||
height: 100%;
|
||||
border-right: none;
|
||||
.ant-menu-item {
|
||||
color: var(--color-text-content);
|
||||
&:active {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.ant-menu-item-selected {
|
||||
background-color: #E2E2E2;
|
||||
color: #141414;
|
||||
background-color: var(--color-list-hover);
|
||||
color: var(--color-text-primary);
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,12 +10,18 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.account {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
background: #f3efef;
|
||||
background: var(--color-body-bg);
|
||||
height: calc(~"100vh - 46px");
|
||||
:deep(.ant-result-title) {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
:deep(.ant-result-subtitle) {
|
||||
color: var(--color-text-desc);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -64,13 +64,20 @@ const labelCol = { span: 4 };
|
||||
const wrapperCol = { span: 14 };
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.dev {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
background: #fff;
|
||||
background: var(--color-body-bg);
|
||||
height: calc(~"100vh - 46px");
|
||||
padding: 20px;
|
||||
:deep(label) {
|
||||
color: var(--color-text-content);
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
background: var(--color-input-hover);
|
||||
color: var(--color-text-content);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
@click="currentSelect = [index]"
|
||||
v-for="(plugin, index) in localPlugins"
|
||||
>
|
||||
<img :src="plugin.logo"/>
|
||||
<img :src="plugin.logo" />
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
{{ plugin.pluginName }}
|
||||
@ -33,7 +33,7 @@
|
||||
<a-tag>{{ pluginDetail.version }}</a-tag>
|
||||
</div>
|
||||
<div class="desc">
|
||||
开发者：{{ `${pluginDetail.author || "未知"}` }}
|
||||
开发者：{{ `${pluginDetail.author || '未知'}` }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{ pluginDetail.description }}
|
||||
@ -66,20 +66,35 @@
|
||||
:class="{ executable: !cmd.label }"
|
||||
:color="!cmd.label && '#87d068'"
|
||||
>
|
||||
<span @click="!cmd.label &&
|
||||
openPlugin({
|
||||
code: item.code,
|
||||
cmd
|
||||
})"
|
||||
<span
|
||||
@click="
|
||||
!cmd.label &&
|
||||
openPlugin({
|
||||
code: item.code,
|
||||
cmd,
|
||||
})
|
||||
"
|
||||
>
|
||||
{{ cmd.label || cmd }}
|
||||
</span>
|
||||
<template v-if="!cmd.label" #icon>
|
||||
<a-tooltip v-if="!hasAdded(cmd)" placement="topLeft" title="点击+号，固定关键词到超级面板">
|
||||
<PlusCircleOutlined @click="addCmdToSuperPanel({code: item.code, cmd})" />
|
||||
<a-tooltip
|
||||
v-if="!hasAdded(cmd)"
|
||||
placement="topLeft"
|
||||
title="点击+号，固定关键词到超级面板"
|
||||
>
|
||||
<PlusCircleOutlined
|
||||
@click="addCmdToSuperPanel({ code: item.code, cmd })"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<a-tooltip v-else placement="topLeft" title="点击-号，从超级面板移除关键词">
|
||||
<MinusCircleOutlined @click="removePluginToSuperPanel(cmd)" />
|
||||
<a-tooltip
|
||||
v-else
|
||||
placement="topLeft"
|
||||
title="点击-号，从超级面板移除关键词"
|
||||
>
|
||||
<MinusCircleOutlined
|
||||
@click="removePluginToSuperPanel(cmd)"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-tag>
|
||||
@ -96,29 +111,29 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {useStore} from "vuex";
|
||||
import {computed, ref, toRaw} from "vue";
|
||||
import path from "path";
|
||||
import MarkdownIt from "markdown-it";
|
||||
import {PlusCircleOutlined, MinusCircleOutlined} from "@ant-design/icons-vue";
|
||||
import { useStore } from 'vuex';
|
||||
import { computed, ref, toRaw } from 'vue';
|
||||
import path from 'path';
|
||||
import MarkdownIt from 'markdown-it';
|
||||
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const {ipcRenderer} = window.require("electron");
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
|
||||
const {remote} = window.require("electron");
|
||||
const fs = window.require("fs");
|
||||
const { remote } = window.require('electron');
|
||||
const fs = window.require('fs');
|
||||
const md = new MarkdownIt();
|
||||
|
||||
const appPath = remote.app.getPath("cache");
|
||||
const baseDir = path.join(appPath, "./rubick-plugins");
|
||||
const appPath = remote.app.getPath('cache');
|
||||
const baseDir = path.join(appPath, './rubick-plugins');
|
||||
|
||||
const store = useStore();
|
||||
const localPlugins = computed(() =>
|
||||
store.state.localPlugins.filter(
|
||||
plugin => plugin.name !== "rubick-system-feature"
|
||||
(plugin) => plugin.name !== 'rubick-system-feature'
|
||||
)
|
||||
);
|
||||
const updateLocalPlugin = () => store.dispatch("updateLocalPlugin");
|
||||
const startUnDownload = name => store.dispatch("startUnDownload", name);
|
||||
const updateLocalPlugin = () => store.dispatch('updateLocalPlugin');
|
||||
const startUnDownload = (name) => store.dispatch('startUnDownload', name);
|
||||
|
||||
const currentSelect = ref([0]);
|
||||
|
||||
@ -126,18 +141,20 @@ const pluginDetail = computed(() => {
|
||||
return localPlugins.value[currentSelect.value] || {};
|
||||
});
|
||||
|
||||
const superPanelPlugins = ref(window.rubick.db.get("super-panel-plugins") || {
|
||||
data: [],
|
||||
_id: "super-panel-plugins",
|
||||
});
|
||||
console.log(toRaw(superPanelPlugins.value.data))
|
||||
const addCmdToSuperPanel = ({cmd, code}) => {
|
||||
const superPanelPlugins = ref(
|
||||
window.rubick.db.get('super-panel-plugins') || {
|
||||
data: [],
|
||||
_id: 'super-panel-plugins',
|
||||
}
|
||||
);
|
||||
console.log(toRaw(superPanelPlugins.value.data));
|
||||
const addCmdToSuperPanel = ({ cmd, code }) => {
|
||||
const plugin = {
|
||||
...toRaw(pluginDetail.value),
|
||||
cmd,
|
||||
ext: {
|
||||
code,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
payload: null,
|
||||
},
|
||||
};
|
||||
@ -146,10 +163,12 @@ const addCmdToSuperPanel = ({cmd, code}) => {
|
||||
};
|
||||
|
||||
const removePluginToSuperPanel = (cmd) => {
|
||||
superPanelPlugins.value.data = toRaw(superPanelPlugins.value).data.filter((item) => {
|
||||
return item.cmd !== cmd;
|
||||
});
|
||||
console.log(toRaw(superPanelPlugins.value) )
|
||||
superPanelPlugins.value.data = toRaw(superPanelPlugins.value).data.filter(
|
||||
(item) => {
|
||||
return item.cmd !== cmd;
|
||||
}
|
||||
);
|
||||
console.log(toRaw(superPanelPlugins.value));
|
||||
window.rubick.db.put(toRaw(superPanelPlugins.value));
|
||||
};
|
||||
|
||||
@ -165,7 +184,7 @@ const hasAdded = (cmd) => {
|
||||
return added;
|
||||
};
|
||||
|
||||
const openPlugin = ({cmd, code}) => {
|
||||
const openPlugin = ({ cmd, code }) => {
|
||||
window.rubick.openPlugin(
|
||||
JSON.parse(
|
||||
JSON.stringify({
|
||||
@ -173,30 +192,30 @@ const openPlugin = ({cmd, code}) => {
|
||||
cmd,
|
||||
ext: {
|
||||
code,
|
||||
type: "text",
|
||||
payload: null
|
||||
}
|
||||
type: 'text',
|
||||
payload: null,
|
||||
},
|
||||
})
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const readme = computed(() => {
|
||||
if (!pluginDetail.value.name) return "";
|
||||
if (!pluginDetail.value.name) return '';
|
||||
const readmePath = path.resolve(
|
||||
baseDir,
|
||||
"node_modules",
|
||||
'node_modules',
|
||||
pluginDetail.value.name,
|
||||
"readme.md"
|
||||
'readme.md'
|
||||
);
|
||||
if (fs.existsSync(readmePath)) {
|
||||
const str = fs.readFileSync(readmePath, "utf-8");
|
||||
const str = fs.readFileSync(readmePath, 'utf-8');
|
||||
return md.render(str);
|
||||
}
|
||||
return "";
|
||||
return '';
|
||||
});
|
||||
|
||||
const deletePlugin = async plugin => {
|
||||
const deletePlugin = async (plugin) => {
|
||||
startUnDownload(plugin.name);
|
||||
await window.market.deletePlugin(plugin);
|
||||
updateLocalPlugin();
|
||||
@ -208,9 +227,9 @@ const deletePlugin = async plugin => {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: #f3efef;
|
||||
height: calc(~"100vh - 46px");
|
||||
|
||||
background: var(--color-body-bg);
|
||||
height: calc(~'100vh - 46px');
|
||||
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
@ -219,94 +238,106 @@ const deletePlugin = async plugin => {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.installed-list {
|
||||
width: 40%;
|
||||
background: #fff;
|
||||
background: var(--color-body-bg);
|
||||
height: 100%;
|
||||
padding: 10px 0;
|
||||
border-right: 1px solid #eee;
|
||||
border-right: 1px solid var(--color-border-light);
|
||||
overflow: auto;
|
||||
|
||||
|
||||
.item {
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: var(--color-text-content);
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
|
||||
.desc {
|
||||
color: #999;
|
||||
color: var(--color-text-desc);
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
background: #eee;
|
||||
background: var(--color-list-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.plugin-detail {
|
||||
padding: 20px 20px 0 20px;
|
||||
box-sizing: border-box;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
background: var(--color-body-bg);
|
||||
.plugin-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-text-primary);
|
||||
.ant-tag {
|
||||
background: var(--color-input-hover);
|
||||
border: 1px solid var(--color-border-light);
|
||||
color: var(--color-text-content);
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.desc {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
color: var(--color-text-desc);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs {
|
||||
.ant-tabs-bar {
|
||||
color: var(--color-text-content);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
}
|
||||
}
|
||||
|
||||
.detail-container,
|
||||
.feature-container {
|
||||
height: 380px;
|
||||
overflow: auto;
|
||||
|
||||
color: var(--color-text-content);
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.desc-item {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
padding: 10px 0;
|
||||
|
||||
color: var(--color-text-content);
|
||||
.ant-tag {
|
||||
margin-top: 6px;
|
||||
|
||||
|
||||
&.executable {
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.desc-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.desc-info {
|
||||
color: #999;
|
||||
color: var(--color-text-desc);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,11 @@
|
||||
<template #renderItem="{ item, index }">
|
||||
<a-list-item v-if="item" @click="showDetail(item)">
|
||||
<template #actions>
|
||||
<a-button style="color: #ff4ea4;" type="text" :loading="item.isloading">
|
||||
<a-button
|
||||
style="color: #ff4ea4"
|
||||
type="text"
|
||||
:loading="item.isloading"
|
||||
>
|
||||
<CloudDownloadOutlined
|
||||
v-show="!item.isloading && !item.isdownload"
|
||||
@click.stop="downloadPlugin(item, index)"
|
||||
@ -16,7 +20,7 @@
|
||||
</template>
|
||||
<a-list-item-meta>
|
||||
<template #description>
|
||||
<span class="ellipse">{{ item.description }}</span>
|
||||
<span class="ellipse desc">{{ item.description }}</span>
|
||||
</template>
|
||||
<template #title>
|
||||
<span class="ellipse">{{ item.pluginName }}</span>
|
||||
@ -38,18 +42,15 @@
|
||||
:get-container="false"
|
||||
class="plugin-info"
|
||||
:style="{ position: 'absolute' }"
|
||||
@close="visible=false"
|
||||
@close="visible = false"
|
||||
>
|
||||
<template #title>
|
||||
<div class="plugin-title-info">
|
||||
<div class="back-icon" @click="visible=false">
|
||||
<div class="back-icon" @click="visible = false">
|
||||
<ArrowLeftOutlined />
|
||||
</div>
|
||||
<div class="info">
|
||||
<img
|
||||
:src="detail.logo"
|
||||
class="plugin-icon"
|
||||
/>
|
||||
<img :src="detail.logo" class="plugin-icon" />
|
||||
<div class="plugin-desc">
|
||||
<div class="title">
|
||||
{{ detail.pluginName }}
|
||||
@ -57,9 +58,17 @@
|
||||
<div class="desc">
|
||||
{{ detail.description }}
|
||||
</div>
|
||||
<a-button v-if="!detail.isdownload" @click.stop="downloadPlugin(detail)" shape="round" type="primary" :loading="detail.isloading">
|
||||
<a-button
|
||||
v-if="!detail.isdownload"
|
||||
@click.stop="downloadPlugin(detail)"
|
||||
shape="round"
|
||||
type="primary"
|
||||
:loading="detail.isloading"
|
||||
>
|
||||
<template #icon>
|
||||
<CloudDownloadOutlined v-show="!detail.isloading && !detail.isdownload" />
|
||||
<CloudDownloadOutlined
|
||||
v-show="!detail.isloading && !detail.isdownload"
|
||||
/>
|
||||
</template>
|
||||
获取
|
||||
</a-button>
|
||||
@ -74,7 +83,7 @@
|
||||
<script setup>
|
||||
import {
|
||||
CloudDownloadOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowLeftOutlined
|
||||
} from "@ant-design/icons-vue";
|
||||
|
||||
import { defineProps, ref } from "vue";
|
||||
@ -85,18 +94,18 @@ import request from "../../../assets/request/index";
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const startDownload = (name) => store.dispatch("startDownload", name);
|
||||
const successDownload = (name) => store.dispatch("successDownload", name);
|
||||
const startDownload = name => store.dispatch("startDownload", name);
|
||||
const successDownload = name => store.dispatch("successDownload", name);
|
||||
|
||||
defineProps({
|
||||
list: {
|
||||
type: [Array],
|
||||
default: () => [],
|
||||
default: () => []
|
||||
},
|
||||
title: String,
|
||||
title: String
|
||||
});
|
||||
|
||||
const downloadPlugin = async (plugin) => {
|
||||
const downloadPlugin = async plugin => {
|
||||
startDownload(plugin.name);
|
||||
await window.market.downloadPlugin(plugin);
|
||||
message.success(`${plugin.name}安装成功！`);
|
||||
@ -108,7 +117,7 @@ const detail = ref({});
|
||||
const markdown = new MarkdownIt();
|
||||
const content = ref("");
|
||||
|
||||
const showDetail = async (item) => {
|
||||
const showDetail = async item => {
|
||||
visible.value = true;
|
||||
detail.value = item;
|
||||
let mdContent = "暂无内容";
|
||||
@ -127,6 +136,7 @@ const showDetail = async (item) => {
|
||||
margin: 20px 0;
|
||||
.title {
|
||||
margin-bottom: 30px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.ellipse {
|
||||
display: inline-block;
|
||||
@ -134,13 +144,17 @@ const showDetail = async (item) => {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
color: var(--color-text-content);
|
||||
&.desc {
|
||||
color: var(--color-text-desc);
|
||||
}
|
||||
}
|
||||
&:after{
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.ant-list-item {
|
||||
@ -156,6 +170,22 @@ const showDetail = async (item) => {
|
||||
|
||||
.ant-drawer-content-wrapper {
|
||||
box-shadow: none !important;
|
||||
.ant-drawer-content {
|
||||
background: var(--color-body-bg);
|
||||
|
||||
}
|
||||
.ant-drawer-header {
|
||||
background: var(--color-body-bg);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.plugin-title-info {
|
||||
.back-icon {
|
||||
filter: invert(1) brightness(200%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -182,6 +212,7 @@ const showDetail = async (item) => {
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.desc {
|
||||
@ -189,11 +220,15 @@ const showDetail = async (item) => {
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--color-text-desc);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-page-container {
|
||||
* {
|
||||
color: var(--color-text-content);
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -100,10 +100,10 @@ const { searchValue, current } = toRefs(state);
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: #F3EFEF;
|
||||
background: var(--color-menu-bg);
|
||||
height: calc(~"100vh - 46px");
|
||||
.container {
|
||||
background: #fff;
|
||||
background: var(--color-body-bg);
|
||||
width: calc(~'100% - 200px');
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -75,6 +75,17 @@
|
||||
></a-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="title">主题</div>
|
||||
<div class="settings-item-li">
|
||||
<div class="label">暗黑模式</div>
|
||||
<a-switch
|
||||
v-model:checked="common.darkMode"
|
||||
checked-children="开"
|
||||
un-checked-children="关"
|
||||
></a-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentSelect[0] === 'global'">
|
||||
<a-collapse>
|
||||
@ -205,7 +216,7 @@ const setConfig = debounce(() => {
|
||||
)
|
||||
);
|
||||
ipcRenderer.send("re-register");
|
||||
}, 2000);
|
||||
}, 500);
|
||||
|
||||
watch(state, setConfig);
|
||||
|
||||
@ -279,7 +290,7 @@ const { shortCut, common, local, global } = toRefs(state);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
background: #f3efef;
|
||||
background: var(--color-body-bg);
|
||||
height: calc(~"100vh - 46px");
|
||||
display: flex;
|
||||
.settings-detail {
|
||||
@ -288,7 +299,7 @@ const { shortCut, common, local, global } = toRefs(state);
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background: var(--color-body-bg);
|
||||
.setting-item {
|
||||
margin-bottom: 20px;
|
||||
.ant-form-item {
|
||||
@ -307,17 +318,22 @@ const { shortCut, common, local, global } = toRefs(state);
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.label {
|
||||
color: #646464;
|
||||
color: var(--color-text-content);
|
||||
}
|
||||
.value {
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--color-border-light);
|
||||
color: #6c9fe2;
|
||||
font-size: 14px;
|
||||
height: 24px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
:deep(.ant-switch) {
|
||||
&:not(.ant-switch-checked) {
|
||||
background: var(--color-list-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -329,29 +345,37 @@ const { shortCut, common, local, global } = toRefs(state);
|
||||
font-size: 14px;
|
||||
.item {
|
||||
flex: 1;
|
||||
color: var(--color-text-content);
|
||||
}
|
||||
.short-cut {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.value {
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--color-border-light);
|
||||
color: #6c9fe2;
|
||||
font-size: 14px;
|
||||
height: 24px;
|
||||
font-weight: lighter;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
background: var(--color-input-hover);
|
||||
:deep(.ant-input) {
|
||||
color: #6c9fe2;
|
||||
font-weight: lighter;
|
||||
background: none;
|
||||
}
|
||||
:deep(.anticon) {
|
||||
color: var(--color-text-desc);
|
||||
}
|
||||
|
||||
&.ant-input-affix-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
&:hover {
|
||||
.anticon {
|
||||
display: block;
|
||||
color: var(--color-text-content);
|
||||
}
|
||||
}
|
||||
.anticon {
|
||||
@ -370,5 +394,20 @@ const { shortCut, common, local, global } = toRefs(state);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
:deep(.ant-collapse) {
|
||||
background: var(--color-input-hover);
|
||||
.ant-collapse-content {
|
||||
background: var(--color-input-hover);
|
||||
color: var(--color-text-content);
|
||||
}
|
||||
h3,
|
||||
.ant-collapse-header,
|
||||
.ant-list-item-meta-title {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.ant-list-item-meta-description {
|
||||
color: var(--color-text-desc);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -44,7 +44,7 @@ let _rev: any;
|
||||
let defaultConfig = {
|
||||
register: "https://registry.npm.taobao.org",
|
||||
database: "https://gitcode.net/rubickcenter/rubick-database/-/raw/master",
|
||||
access_token: "",
|
||||
access_token: ""
|
||||
};
|
||||
|
||||
try {
|
||||
@ -59,25 +59,25 @@ const formState = ref(JSON.parse(JSON.stringify(defaultConfig)));
|
||||
|
||||
const rules = {
|
||||
register: [{ required: true, trigger: "change" }],
|
||||
database: [{ required: true, trigger: "change" }],
|
||||
database: [{ required: true, trigger: "change" }]
|
||||
};
|
||||
const layout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 18 },
|
||||
wrapperCol: { span: 18 }
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
formState.value = {
|
||||
register: "https://registry.npm.taobao.org",
|
||||
database: "https://gitcode.net/rubickcenter/rubick-database/-/raw/master",
|
||||
access_token: "",
|
||||
access_token: ""
|
||||
};
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
const changeData: any = {
|
||||
_id: "rubick-localhost-config",
|
||||
data: toRaw(formState.value),
|
||||
data: toRaw(formState.value)
|
||||
};
|
||||
|
||||
if (_rev) {
|
||||
@ -88,3 +88,13 @@ const submit = () => {
|
||||
message.success("设置成功！重启插件市场后生效！");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(label) {
|
||||
color: var(--color-text-content);
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
background: var(--color-input-hover);
|
||||
color: var(--color-text-content);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "rubick",
|
||||
"version": "2.0.10",
|
||||
"version": "2.1.0",
|
||||
"author": "muwoo <2424880409@qq.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import commonConst from "@/common/utils/commonConst";
|
||||
|
||||
export default {
|
||||
version: 2,
|
||||
version: 4,
|
||||
perf: {
|
||||
shortCut: {
|
||||
showAndHidden: "Option+R",
|
||||
@ -14,6 +14,7 @@ export default {
|
||||
// 是否失焦隐藏。默认在dev环境不隐藏，在打包后隐藏。
|
||||
hideOnBlur: commonConst.production(),
|
||||
autoPast: false,
|
||||
darkMode: false
|
||||
},
|
||||
local: {
|
||||
search: true,
|
||||
|
||||
@ -41,6 +41,7 @@ export default () => {
|
||||
plugin;
|
||||
let pluginIndexPath = tplPath || indexPath;
|
||||
let preloadPath;
|
||||
let darkMode;
|
||||
// 开发环境
|
||||
if (commonConst.dev() && development) {
|
||||
pluginIndexPath = development;
|
||||
@ -81,8 +82,13 @@ export default () => {
|
||||
window.setSize(800, height || 660);
|
||||
view.setBounds({ x: 0, y: 60, width: 800, height: height || 660 });
|
||||
view.setAutoResize({ width: true });
|
||||
executeHooks('PluginEnter', ext);
|
||||
executeHooks('PluginReady', ext);
|
||||
executeHooks('PluginEnter', plugin.ext);
|
||||
executeHooks('PluginReady', plugin.ext);
|
||||
darkMode = global.OP_CONFIG.get().perf.common.darkMode;
|
||||
darkMode &&
|
||||
view.webContents.executeJavaScript(
|
||||
`document.body.classList.add("dark");window.rubick.theme="dark"`
|
||||
);
|
||||
window.webContents.executeJavaScript(`window.pluginLoaded()`);
|
||||
});
|
||||
// 修复请求跨域问题
|
||||
|
||||
@ -1,4 +1,12 @@
|
||||
import { globalShortcut, BrowserWindow, screen, ipcMain, app } from "electron";
|
||||
import {
|
||||
globalShortcut,
|
||||
nativeTheme,
|
||||
BrowserWindow,
|
||||
BrowserView,
|
||||
screen,
|
||||
ipcMain,
|
||||
app
|
||||
} from "electron";
|
||||
|
||||
const registerHotKey = (mainWindow: BrowserWindow): void => {
|
||||
// 设置开机启动
|
||||
@ -9,9 +17,36 @@ const registerHotKey = (mainWindow: BrowserWindow): void => {
|
||||
openAsHidden: true
|
||||
});
|
||||
};
|
||||
// 设置暗黑模式
|
||||
const setDarkMode = () => {
|
||||
const config = global.OP_CONFIG.get();
|
||||
const isDark = config.perf.common.darkMode;
|
||||
if (isDark) {
|
||||
nativeTheme.themeSource = "dark";
|
||||
mainWindow.webContents.executeJavaScript(
|
||||
`document.body.classList.add("dark");window.rubick.theme="dark"`
|
||||
);
|
||||
mainWindow.getBrowserViews().forEach((view: BrowserView) => {
|
||||
view.webContents.executeJavaScript(
|
||||
`document.body.classList.add("dark");window.rubick.theme="dark"`
|
||||
);
|
||||
});
|
||||
} else {
|
||||
nativeTheme.themeSource = "light";
|
||||
mainWindow.webContents.executeJavaScript(
|
||||
`document.body.classList.remove("dark");window.rubick.theme="light"`
|
||||
);
|
||||
mainWindow.getBrowserViews().forEach((view: BrowserView) => {
|
||||
view.webContents.executeJavaScript(
|
||||
`document.body.classList.remove("dark");window.rubick.theme="light"`
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
setAutoLogin();
|
||||
setDarkMode();
|
||||
const config = global.OP_CONFIG.get();
|
||||
globalShortcut.unregisterAll();
|
||||
// 注册偏好快捷键
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
<script setup lang="ts">
|
||||
import { watch, ref, nextTick, toRaw } from 'vue';
|
||||
import { ipcRenderer, remote } from 'electron';
|
||||
import Result from './components/result.vue';
|
||||
@ -71,7 +71,7 @@ getPluginInfo({
|
||||
pluginName: 'feature',
|
||||
// eslint-disable-next-line no-undef
|
||||
pluginPath: `${__static}/feature/package.json`,
|
||||
}).then(res => {
|
||||
}).then((res) => {
|
||||
menuPluginInfo.value = res;
|
||||
remote.getGlobal('LOCAL_PLUGINS').addPlugin(res);
|
||||
});
|
||||
@ -87,7 +87,7 @@ watch([options], () => {
|
||||
});
|
||||
});
|
||||
|
||||
const changeIndex = index => {
|
||||
const changeIndex = (index) => {
|
||||
if (!options.value.length) return;
|
||||
if (
|
||||
currentSelect.value + index > options.value.length - 1 ||
|
||||
@ -118,7 +118,8 @@ const clearSearchValue = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='less'>
|
||||
<style lang="less">
|
||||
@import './assets/var.less';
|
||||
.drag-bar {
|
||||
-webkit-app-region: drag;
|
||||
width: 100%;
|
||||
@ -132,6 +133,7 @@ const clearSearchValue = () => {
|
||||
#components-layout {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: var(--color-body-bg);
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
25
src/renderer/assets/var.less
Normal file
25
src/renderer/assets/var.less
Normal file
@ -0,0 +1,25 @@
|
||||
:root {
|
||||
--color-text-primary: rgba(0, 0, 0, 0.85);
|
||||
--color-text-content: #141414;
|
||||
--color-text-desc: rgba(0, 0, 0, 0.45);
|
||||
// 背景色
|
||||
--color-body-bg: #fff;
|
||||
--color-menu-bg: #f3efef;
|
||||
--color-list-hover: #e2e2e2;
|
||||
--color-input-hover: #fff;
|
||||
// 边框
|
||||
--color-border-light: #f0f0f0;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-text-primary: #e8e8f0;
|
||||
--color-text-content: #ccccd8;
|
||||
--color-text-desc: #8f8fa6;
|
||||
// 背景色
|
||||
--color-body-bg: #1c1c28;
|
||||
--color-menu-bg: #1c1c28;
|
||||
--color-list-hover: #33333d;
|
||||
--color-input-hover: #33333d;
|
||||
// 边框
|
||||
--color-border-light: #33333d;
|
||||
}
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
<script lang="ts" setup>
|
||||
import BScroll from '@better-scroll/core';
|
||||
import { defineProps, onMounted, ref } from 'vue';
|
||||
|
||||
@ -97,17 +97,26 @@ const sort = (options) => {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
max-height: calc(~"100vh - 64px");
|
||||
max-height: calc(~'100vh - 64px');
|
||||
overflow: auto;
|
||||
background: var(--color-body-bg);
|
||||
.op-item {
|
||||
padding: 0 10px;
|
||||
height: 60px;
|
||||
line-height: 50px;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
background: #fafafa;
|
||||
background: var(--color-body-bg);
|
||||
color: var(--color-text-content);
|
||||
border-color: var(--color-border-light);
|
||||
&.active {
|
||||
background: #dee2e8;
|
||||
background: var(--color-list-hover);
|
||||
}
|
||||
.ant-list-item-meta-title {
|
||||
color: var(--color-text-content);
|
||||
}
|
||||
.ant-list-item-meta-description {
|
||||
color: var(--color-text-desc);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -227,7 +227,7 @@ window.rubick.hooks.onHide = () => {
|
||||
.rubick-select {
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
background: #fff;
|
||||
background: var(--color-body-bg);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -262,13 +262,15 @@ window.rubick.hooks.onHide = () => {
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none !important;
|
||||
|
||||
background: var(--color-body-bg);
|
||||
.ant-select-selection,
|
||||
.ant-input,
|
||||
.ant-select-selection__rendered {
|
||||
height: 100% !important;
|
||||
font-size: 22px;
|
||||
border: none !important;
|
||||
background: var(--color-body-bg);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -286,7 +288,7 @@ window.rubick.hooks.onHide = () => {
|
||||
}
|
||||
}
|
||||
.icon-tool {
|
||||
background: #fff;
|
||||
background: var(--color-input-hover);
|
||||
}
|
||||
.ant-input:focus {
|
||||
border: none;
|
||||
@ -299,6 +301,7 @@ window.rubick.hooks.onHide = () => {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-content);
|
||||
}
|
||||
.loading {
|
||||
color: #ff4ea4;
|
||||
@ -315,7 +318,7 @@ window.rubick.hooks.onHide = () => {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
border: 1px solid #e6e6e6;
|
||||
border: 1px solid var(--color-border-light);
|
||||
padding: 0 8px;
|
||||
margin-right: 12px;
|
||||
img {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user