💚 修复win 构建问题

✨ add dark mode

.github/workflows/main.yml

@@ -48,7 +48,11 @@ jobs:
           yarn
           yarn global add xvfb-maybe
           yarn global add @vue/cli
-
+      - name: Build feature
+        run: |
+          cd ./feature
+          yarn
+          npm run build
       - name: Build  & release app
         run: |
           npm run release

README.md

@@ -14,7 +14,7 @@ English | [简体中文](./README.zh-CN.md)
     <img alt="release" src="https://img.shields.io/github/package-json/v/rubickCenter/rubick" />
  </a>
  <a href="https://github.com/rubickCenter/rubick/actions">
-   <img alt=building src=https://img.shields.io/github/workflow/status/rubickCenter/rubick/Build>
+   <img alt=building src=https://img.shields.io/github/actions/workflow/status/rubickCenter/rubick/main.yml>
  </a>
  <a href="https://github.com/rubickCenter/rubick/blob/master/LICENSE">
     <img alt="npm" src="https://img.shields.io/github/license/rubickCenter/rubick" />

feature/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vue/cli-service": "~4.5.0",
     "@ant-design/icons-vue": "^6.0.1",
     "ant-design-vue": "3.2.14",
     "axios": "^0.24.0",
@@ -34,6 +35,8 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
+    "less": "^4.1.3",
+    "less-loader": "5.0.0",
     "prettier": "^2.2.1",
     "typescript": "~4.1.5"
   },

feature/src/App.vue

@@ -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>

feature/src/assets/ant-reset.less

@@ -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;
+}

feature/src/assets/common.less

@@ -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;
       }
     }
   }
-}
+}

feature/src/views/account/index.vue

@@ -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>

feature/src/views/dev/index.vue

@@ -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>

feature/src/views/installed/index.vue

@@ -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);
       }
     }
   }

feature/src/views/market/components/plugin-list.vue

@@ -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%;
   }

feature/src/views/market/index.vue

@@ -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;

feature/src/views/settings/index.vue

@@ -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>

feature/src/views/settings/localhost.vue

@@ -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>

feature/yarn.lock

@@ -2967,6 +2967,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
+
 coa@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
@@ -3147,6 +3152,13 @@ cookie@0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+copy-anything@^2.0.1:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
+  integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
+  dependencies:
+    is-what "^3.14.1"
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -3496,7 +3508,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.1, debug@^3.2.7:
+debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
@@ -3897,7 +3909,7 @@ entities@~2.1.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
   integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
 
-errno@^0.1.3, errno@~0.1.7:
+errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
   integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
@@ -5165,6 +5177,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-utils@^4.0.0, icss-utils@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
@@ -5197,6 +5216,11 @@ ignore@^5.1.8, ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -5647,6 +5671,11 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-what@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
+  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -5851,6 +5880,32 @@ launch-editor@^2.2.1, launch-editor@^2.4.0:
     picocolors "^1.0.0"
     shell-quote "^1.6.1"
 
+less-loader@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-5.0.0.tgz#498dde3a6c6c4f887458ee9ed3f086a12ad1b466"
+  integrity sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==
+  dependencies:
+    clone "^2.1.1"
+    loader-utils "^1.1.0"
+    pify "^4.0.1"
+
+less@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/less/-/less-4.1.3.tgz#175be9ddcbf9b250173e0a00b4d6920a5b770246"
+  integrity sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==
+  dependencies:
+    copy-anything "^2.0.1"
+    parse-node-version "^1.0.1"
+    tslib "^2.3.0"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    make-dir "^2.1.0"
+    mime "^1.4.1"
+    needle "^3.1.0"
+    source-map "~0.6.0"
+
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -6030,7 +6085,7 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
-make-dir@^2.0.0:
+make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
   integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
@@ -6199,7 +6254,7 @@ mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24,
   dependencies:
     mime-db "1.52.0"
 
-mime@1.6.0:
+mime@1.6.0, mime@^1.4.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -6380,6 +6435,15 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+needle@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-3.2.0.tgz#07d240ebcabfd65c76c03afae7f6defe6469df44"
+  integrity sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==
+  dependencies:
+    debug "^3.2.6"
+    iconv-lite "^0.6.3"
+    sax "^1.2.4"
+
 negotiator@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
@@ -6802,6 +6866,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-node-version@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
+  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
+
 parse5-htmlparser2-tree-adapter@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
@@ -7876,12 +7945,12 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sax@~1.2.4:
+sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -8731,6 +8800,11 @@ tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.3.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
 tslint@^5.20.1:
   version "5.20.1"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.20.1.tgz#e401e8aeda0152bc44dd07e614034f3f80c67b7d"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rubick",
-  "version": "2.0.9",
+  "version": "2.1.6",
   "author": "muwoo <2424880409@qq.com>",
   "private": true,
   "scripts": {
@@ -21,6 +21,7 @@
   "dependencies": {
     "@better-scroll/core": "^2.4.2",
     "ant-design-vue": "^2.2.8",
+    "axios": "^1.3.4",
     "core-js": "^3.6.5",
     "cross-spawn": "^7.0.3",
     "extract-file-icon": "^0.3.2",

public/feature/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>feature</title><link href="css/app.33ea408c.css" rel="preload" as="style"><link href="js/app.7a04015c.js" rel="preload" as="script"><link href="js/chunk-vendors.53eaec48.js" rel="preload" as="script"><link href="css/app.33ea408c.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but feature doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.53eaec48.js"></script><script src="js/app.7a04015c.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>feature</title><link href="css/app.d7ae2045.css" rel="preload" as="style"><link href="js/app.6a181716.js" rel="preload" as="script"><link href="js/chunk-vendors.7167f2bb.js" rel="preload" as="script"><link href="css/app.d7ae2045.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but feature doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.7167f2bb.js"></script><script src="js/app.6a181716.js"></script></body></html>

src/common/constans/defaultConfig.ts

@@ -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,

src/core/plugin-handler/index.ts

@@ -1,14 +1,15 @@
 import {
   AdapterHandlerOptions,
   AdapterInfo,
-} from "@/core/plugin-handler/types";
-import fs from "fs-extra";
-import path from "path";
-import got from "got";
-import fixPath from "fix-path";
+} from '@/core/plugin-handler/types';
+import fs from 'fs-extra';
+import path from 'path';
+import got from 'got';
+import fixPath from 'fix-path';
 
-import spawn from "cross-spawn";
-import { ipcRenderer } from "electron";
+import spawn from 'cross-spawn';
+import { ipcRenderer } from 'electron';
+import axios from 'axios';
 
 fixPath();
 
@@ -22,6 +23,8 @@ class AdapterHandler {
   // 插件源地址
   readonly registry: string;
 
+  pluginCaches = {};
+
   /**
    * Creates an instance of AdapterHandler.
    * @param {AdapterHandlerOptions} options
@@ -38,20 +41,43 @@ class AdapterHandler {
     }
     this.baseDir = options.baseDir;
 
-    let register = options.registry || "https://registry.npm.taobao.org";
+    let register = options.registry || 'https://registry.npm.taobao.org';
 
     try {
-      const dbdata = ipcRenderer.sendSync("msg-trigger", {
-        type: "dbGet",
-        data: { id: "rubick-localhost-config" },
+      const dbdata = ipcRenderer.sendSync('msg-trigger', {
+        type: 'dbGet',
+        data: { id: 'rubick-localhost-config' },
       });
       register = dbdata.data.register;
     } catch (e) {
       // ignore
     }
-    this.registry = register || "https://registry.npm.taobao.org";
+    this.registry = register || 'https://registry.npm.taobao.org';
   }
 
+  async upgrade(name: string): Promise<void> {
+    // 创建一个npm-registry-client实例
+    const packageJSON = JSON.parse(
+      fs.readFileSync(`${this.baseDir}/package.json`, 'utf-8')
+    );
+    const registryUrl = `https://registry.npm.taobao.org/${name}`;
+
+    // 从npm源中获取依赖包的最新版本
+    try {
+      const installedVersion = packageJSON.dependencies[name].replace('^', '');
+      let latestVersion = this.pluginCaches[name];
+      if (!latestVersion) {
+        const { data } = await axios.get(registryUrl, { timeout: 2000 });
+        latestVersion = data['dist-tags'].latest;
+        this.pluginCaches[name] = latestVersion;
+      }
+      if (latestVersion > installedVersion) {
+        await this.install([name], { isDev: false });
+      }
+    } catch (e) {
+      // ...
+    }
+  }
   /**
    * 获取插件信息
    * @param {string} adapter 插件名称
@@ -65,11 +91,11 @@ class AdapterHandler {
     let adapterInfo: AdapterInfo;
     const infoPath =
       adapterPath ||
-      path.resolve(this.baseDir, "node_modules", adapter, "plugin.json");
+      path.resolve(this.baseDir, 'node_modules', adapter, 'plugin.json');
     // 从本地获取
     if (await fs.pathExists(infoPath)) {
       adapterInfo = JSON.parse(
-        fs.readFileSync(infoPath, "utf-8")
+        fs.readFileSync(infoPath, 'utf-8')
       ) as AdapterInfo;
     } else {
       // 本地没有从远程获取
@@ -84,7 +110,7 @@ class AdapterHandler {
 
   // 安装并启动插件
   async install(adapters: Array<string>, options: { isDev: boolean }) {
-    const installCmd = options.isDev ? "link" : "install";
+    const installCmd = options.isDev ? 'link' : 'install';
     // 安装
     await this.execCommand(installCmd, adapters);
   }
@@ -95,7 +121,7 @@ class AdapterHandler {
    * @memberof AdapterHandler
    */
   async update(...adapters: string[]) {
-    await this.execCommand("update", adapters);
+    await this.execCommand('update', adapters);
   }
 
   /**
@@ -105,7 +131,7 @@ class AdapterHandler {
    * @memberof AdapterHandler
    */
   async uninstall(adapters: string[], options: { isDev: boolean }) {
-    const installCmd = options.isDev ? "unlink" : "uninstall";
+    const installCmd = options.isDev ? 'unlink' : 'uninstall';
     // 卸载插件
     await this.execCommand(installCmd, adapters);
   }
@@ -116,7 +142,7 @@ class AdapterHandler {
    */
   async list() {
     const installInfo = JSON.parse(
-      await fs.readFile(`${this.baseDir}/package.json`, "utf-8")
+      await fs.readFile(`${this.baseDir}/package.json`, 'utf-8')
     );
     const adapters: string[] = [];
     for (const adapter in installInfo.dependencies) {
@@ -124,37 +150,45 @@ class AdapterHandler {
     }
     return adapters;
   }
+  private cleanCache() {
+    spawn('npm', ['cache', 'clean', '-f'], {
+      cwd: this.baseDir,
+    });
+  }
 
   /**
    * 运行包管理器
    * @memberof AdapterHandler
    */
   private async execCommand(cmd: string, modules: string[]): Promise<string> {
+    this.cleanCache();
     return new Promise((resolve: any, reject: any) => {
       let args: string[] = [cmd]
-        .concat(modules)
-        .concat("--color=always")
-        .concat("--save");
-      if (cmd !== "uninstall")
+        .concat(
+          cmd !== 'uninstall' ? modules.map((m) => `${m}@latest`) : modules
+        )
+        .concat('--color=always')
+        .concat('--save');
+      if (cmd !== 'uninstall')
         args = args.concat(`--registry=${this.registry}`);
-      const npm = spawn("npm", args, {
+      const npm = spawn('npm', args, {
         cwd: this.baseDir,
       });
 
-      let output = "";
+      let output = '';
       npm.stdout
-        .on("data", (data: string) => {
+        .on('data', (data: string) => {
           output += data; // 获取输出日志
         })
         .pipe(process.stdout);
 
       npm.stderr
-        .on("data", (data: string) => {
+        .on('data', (data: string) => {
           output += data; // 获取报错日志
         })
         .pipe(process.stderr);
 
-      npm.on("close", (code: number) => {
+      npm.on('close', (code: number) => {
         if (!code) {
           resolve({ code: 0, data: output }); // 如果没有报错就输出正常日志
         } else {

src/main/browsers/runner.ts

@@ -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()`);
     });
     // 修复请求跨域问题

src/main/common/registerHotKey.ts

@@ -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();
     // 注册偏好快捷键

src/renderer/App.vue

@@ -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;
   }

src/renderer/assets/var.less

@@ -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;
+}

src/renderer/components/result.vue

@@ -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);
     }
   }
 }

src/renderer/components/search.vue

@@ -29,11 +29,12 @@
     >
       <template #suffix>
         <div class="suffix-tool">
-          <MoreOutlined @click="showSeparate()" class="icon-more" />
+          <MoreOutlined v-show="!pluginLoading" @click="showSeparate()" class="icon-more" />
           <div
             v-if="currentPlugin && currentPlugin.logo"
             style="position: relative"
           >
+            <div v-show="pluginLoading" class="update-tips">检测更新中...</div>
             <a-spin v-show="pluginLoading" class="loading">
               <template #indicator>
                 <LoadingOutlined style="font-size: 42px" />
@@ -227,7 +228,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 +263,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 +289,7 @@ window.rubick.hooks.onHide = () => {
     }
   }
   .icon-tool {
-    background: #fff;
+    background: var(--color-input-hover);
   }
   .ant-input:focus {
     border: none;
@@ -299,6 +302,7 @@ window.rubick.hooks.onHide = () => {
       font-size: 26px;
       font-weight: bold;
       cursor: pointer;
+      color: var(--color-text-content);
     }
     .loading {
       color: #ff4ea4;
@@ -306,6 +310,14 @@ window.rubick.hooks.onHide = () => {
       top: 0;
       left: 0;
     }
+    .update-tips {
+      position: absolute;
+      right: 46px;
+      top: 50%;
+      font-size: 14px;
+      transform: translateY(-50%);
+      color: #aaa;
+    }
   }
   .clipboard-tag {
     white-space: pre;
@@ -315,7 +327,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 {

src/renderer/plugins-manager/index.ts

@@ -28,17 +28,26 @@ const createPluginManager = (): any => {
     appList.value = await appSearch(nativeImage);
   };
 
-  const loadPlugin = (plugin) => {
+  const loadPlugin = async (plugin) => {
+    setSearchValue('');
+    ipcRenderer.send('msg-trigger', {
+      type: 'setExpendHeight',
+      data: 60,
+    });
     state.pluginLoading = true;
     state.currentPlugin = plugin;
+    // 自带的插件不需要检测更新
+    if (plugin.name === 'rubick-system-feature') return;
+    await pluginInstance.upgrade(plugin.name);
+    state.pluginLoading = false;
   };
 
-  const openPlugin = (plugin) => {
+  const openPlugin = async (plugin) => {
     if (plugin.pluginType === 'ui' || plugin.pluginType === 'system') {
       if (state.currentPlugin && state.currentPlugin.name === plugin.name) {
         return;
       }
-      loadPlugin(plugin);
+      await loadPlugin(plugin);
       ipcRenderer.sendSync('msg-trigger', {
         type: 'openPlugin',
         data: JSON.parse(
@@ -52,7 +61,6 @@ const createPluginManager = (): any => {
           })
         ),
       });
-      setSearchValue('');
     }
     if (plugin.pluginType === 'app') {
       execSync(plugin.action);

yarn.lock

@@ -2621,6 +2621,15 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+axios@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.4.tgz#f5760cefd9cfb51fd2481acf88c05f67c4523024"
+  integrity sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-code-frame@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -5490,6 +5499,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
   integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
 
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -9067,6 +9081,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"