Merge pull request #256 from rubickCenter/feat/v4.x

Feat/v4.x
rubickCenter · Oct 12, 2023 · 9445cf0 · 9445cf0
2 parents 0d0f745 + c5ddeef
commit 9445cf0
Show file tree

Hide file tree

Showing 99 changed files with 1,456 additions and 13,991 deletions.
diff --git a/detach/src/App.vue b/detach/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[platform, 'detach']">
+  <div :class="[process.platform, 'detach']">
     <div class="info">
       <img :src="plugInfo.logo"/>
       <input

diff --git a/feature/babel.config.js b/feature/babel.config.js
@@ -1,3 +1,22 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+  presets: ['@vue/cli-plugin-babel/preset'],
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'ant-design-vue',
+        style: 'css', // or 'css'
+      },
+      'ant-design-vue',
+    ],
+    [
+      'import',
+      {
+        libraryName: '@ant-design/icons-vue',
+        libraryDirectory: 'lib/icons',
+        camel2DashComponentName: false,
+      },
+      '@ant-design/icons-vue',
+    ],
+  ],
 };
diff --git a/feature/package-lock.json b/feature/package-lock.json
diff --git a/feature/package.json b/feature/package.json
@@ -5,22 +5,27 @@
   "scripts": {
     "serve": "vue-cli-service serve --port 8081",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "report": "vue-cli-service build --report"
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.0.1",
     "@vue/cli-service": "~4.5.0",
     "ant-design-vue": "3.2.14",
     "axios": "^0.24.0",
+    "babel-plugin-import": "^1.13.8",
     "core-js": "^3.6.5",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "markdown-it": "^12.2.0",
     "nanoid": "^4.0.2",
     "vue": "3.2.45",
-    "vue-i18n": "^9.2.2",
+    "vue-i18n": "9.2.2",
     "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "vue3-carousel": "^0.3.1",
+    "vue3-lottie": "^3.1.0",
+    "vuex": "^4.0.0-0",
+    "webpack-bundle-analyzer": "^4.9.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",

diff --git a/feature/public/package.json b/feature/public/package.json
@@ -9,7 +9,7 @@
   "pluginType": "ui",
   "features": [
     {
-      "code": "market",
+      "code": "finder",
       "explain": "插件市场",
       "cmds":[
         "插件市场"

diff --git a/feature/src/App.vue b/feature/src/App.vue
@@ -1,90 +1,227 @@
 <template>
   <div class="main-container">
-    <div class="slider-bar">
+    <div class="left-menu">
       <a-menu
-        v-model:selectedKeys="active"
-        mode="horizontal"
         @select="({ key }) => changeMenu(key)"
+        :selectedKeys="active"
+        mode="vertical"
       >
-        <a-menu-item key="market">
+        <a-menu-item key="finder">
           <template #icon>
-            <AppstoreOutlined />
+            <StarOutlined style="font-size: 18px;" />
           </template>
-          {{ $t('feature.market.title') }}
+          {{ $t('feature.market.explore') }}
         </a-menu-item>
-        <a-menu-item key="installed">
+        <a-menu-item key="worker">
           <template #icon>
-            <HeartOutlined />
+            <SendOutlined style="transform: rotate(-45deg); font-size: 18px;" />
           </template>
-          {{ $t('feature.installed.title') }}
+          {{ $t('feature.market.efficiency') }}
         </a-menu-item>
-        <a-menu-item key="settings">
+        <a-menu-item key="tools">
           <template #icon>
-            <SettingOutlined />
+            <SearchOutlined style="font-size: 18px;" />
           </template>
-          {{ $t('feature.settings.title') }}
+          {{ $t('feature.market.searchTool') }}
         </a-menu-item>
-        <a-menu-item key="dev">
+        <a-menu-item key="image">
           <template #icon>
-            <BugOutlined />
+            <FileImageOutlined style="font-size: 18px;" />
           </template>
-          {{ $t('feature.dev.title') }}
+          {{ $t('feature.market.imageTool') }}
         </a-menu-item>
+        <a-menu-item key="devPlugin">
+          <template #icon>
+            <CodeOutlined style="font-size: 18px;" />
+          </template>
+          {{ $t('feature.market.developTool') }}
+        </a-menu-item>
+        <a-menu-item key="system">
+          <template #icon>
+            <DatabaseOutlined style="font-size: 18px;" />
+          </template>
+          {{ $t('feature.market.systemTool') }}
+        </a-menu-item>
+        <a-sub-menu class="user-info">
+          <template #icon>
+            <a-avatar :size="32">
+              <template #icon>
+                <img :src="perf.custom.logo" />
+              </template>
+            </a-avatar>
+          </template>
+          <template #title>{{ perf.custom.username }}</template>
+          <a-menu-item key="settings">
+            <template #icon>
+              <SettingOutlined />
+            </template>
+            {{ $t('feature.settings.title') }}
+          </a-menu-item>
+          <a-menu-item key="installed">
+            <template #icon>
+              <HeartOutlined />
+            </template>
+            {{ $t('feature.installed.title') }}
+          </a-menu-item>
+          <a-menu-item key="dev">
+            <template #icon>
+              <BugOutlined />
+            </template>
+            {{ $t('feature.dev.title') }}
+          </a-menu-item>
+        </a-sub-menu>
       </a-menu>
     </div>
-    <router-view />
+    <div :class="['finder', 'result', 'devPlugin', 'image', 'tools', 'worker', 'system'].includes(active[0]) ? 'container' : 'more'">
+      <keep-alive>
+        <router-view />
+      </keep-alive>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import {
-  HeartOutlined,
-  AppstoreOutlined,
+  StarOutlined,
+  SendOutlined,
+  SearchOutlined,
+  FileImageOutlined,
+  DatabaseOutlined,
+  CodeOutlined,
   SettingOutlined,
+  HeartOutlined,
   BugOutlined,
 } from '@ant-design/icons-vue';
 import { useStore } from 'vuex';
+import localConfig from '@/confOp';
 
+const store = useStore();
 const router = useRouter();
-const active = ref(['market']);
+const active = computed(() => store.state.active);
+const { perf } = localConfig.getConfig();
+
 const changeMenu = (key: any) => {
+  store.commit('commonUpdate', {active: [key]})
   router.push(key);
 };
 
 window.rubick.onPluginEnter(({ code }: { code: string }) => {
   changeMenu(code);
-  active.value = [code];
+  store.commit('commonUpdate', {active: [code]})
 });
 
-const store = useStore();
+window.rubick.setSubInput((e: any) => {
+  if (
+    [
+      'finder',
+      'result',
+      'devPlugin',
+      'image',
+      'tools',
+      'worker',
+      'system',
+    ].includes(active.value[0])
+  ) {
+    if (e.text) {
+      store.commit('setSearchValue', e.text);
+      router.push('result');
+    } else {
+      store.commit('commonUpdate', {active: ['finder']})
+      router.push('finder');
+    }
+  }
+}, '搜索插件');
+
 const init = () => store.dispatch('init');
 init();
 </script>
+<style lang="less">
+.ant-menu-submenu-popup {
+  .ant-menu {
+    background: var(--color-body-bg2) !important;
+    height: 100%;
+    border-right: none;
+    .ant-menu-item, .ant-menu-submenu, .ant-menu-submenu-arrow {
+      color: var(--color-text-content);
+      &:active {
+        background: none;
+      }
+    }
+    .ant-menu-item-selected, .ant-menu-submenu-selected {
+      background-color: var(--color-list-hover);
+      color: var(--ant-primary-color);
+      .ant-menu-submenu-arrow {
+        color: var(--ant-primary-color);
+      }
+      &:after {
+        display: none;
+      }
+    }
+  }
+}
+</style>
 <style lang="less" scoped>
+@import '~@/assets/common.less';
 * {
   margin: 0;
   padding: 0;
 }
-
 .main-container {
   -webkit-app-region: no-drag;
   display: flex;
-  align-items: flex-start;
   background: var(--color-body-bg);
-  flex-direction: column;
-
-  .slider-bar {
-    width: 100%;
-    .ant-menu {
-      background: var(--color-body-bg);
+  border-top: 1px solid var(--color-border-light);
+  height: 100vh;
+  box-sizing: border-box;
+  align-items: flex-start;
+  width: 100%;
+  overflow: hidden;
+  background: var(--color-menu-bg);
+  .search {
+    :deep(.ant-btn),
+    :deep(.ant-input),
+    :deep(.ant-input-group-addon) {
+      color: var(--ant-primary-color) !important;
+      background: var(--color-input-hover);
       border-color: var(--color-border-light);
-      :deep(.ant-menu-item) {
-        &:not(.ant-menu-item-selected) {
-          color: var(--color-text-primary);
-        }
-      }
+    }
+  }
+  .container,
+  .more {
+    background: var(--color-body-bg);
+    width: calc(~'100% - 183px');
+    height: 100%;
+    box-sizing: border-box;
+    padding: 16px;
+    position: relative;
+    overflow: auto;
+  }
+  .more {
+    background: var(--color-body-bg2);
+  }
+  .left-menu {
+    padding: 24px 16px;
+    position: relative;
+    height: 100vh;
+    :deep(.ant-menu-item) {
+      padding-left: 12px !important;
+      display: flex;
+      align-items: center;
+    }
+    :deep(.ant-menu-item-selected),
+    :deep(.ant-menu-submenu-selected) {
+      background-color: var(--color-list-hover);
+      border-radius: 6px;
+      color: var(--ant-primary-color);
+    }
+    :deep(.user-info) {
+      position: absolute;
+      bottom: 32px;
+    }
+    :deep(.ant-avatar) {
+      background: transparent;
     }
   }
 }

diff --git a/feature/src/assets/ant-reset.less b/feature/src/assets/ant-reset.less
@@ -8,9 +8,10 @@
   --color-text-content: #141414;
   --color-text-desc: rgba(0, 0, 0, 0.45);
   // 背景色
+  --color-body-bg2: #eee;
   --color-body-bg: #fff;
-  --color-menu-bg: #f3efef;
-  --color-list-hover: #e2e2e2;
+  --color-menu-bg: rgba(248, 248, 248, 1);
+  --color-list-hover: rgba(233, 233, 233, 1);
   --color-input-hover: #fff;
   // 边框
   --color-border-light: #f0f0f0;
@@ -22,9 +23,10 @@
   --color-text-desc: #8f8fa6;
   // 背景色
   --color-body-bg: #1c1c28;
+  --color-body-bg2: #2c2f3b;
   --color-menu-bg: #1c1c28;
-  --color-list-hover: #33333d;
-  --color-input-hover: #33333d;
+  --color-list-hover: #2c2f3b;
+  --color-input-hover: #444d;
   // 边框
-  --color-border-light: #33333d;
+  --color-border-light: #444d;
 }
diff --git a/feature/src/assets/common.less b/feature/src/assets/common.less
@@ -1,5 +1,5 @@
 .left-menu {
-  width: 200px;
+  width: 183px;
   // height: 100vh;
   border-right: 1px solid var(--color-border-light);
   .search-container {
@@ -20,15 +20,18 @@
     background: var(--color-menu-bg);
     height: 100%;
     border-right: none;
-    .ant-menu-item {
+    .ant-menu-item, .ant-menu-submenu, .ant-menu-submenu-arrow {
       color: var(--color-text-content);
       &:active {
         background: none;
       }
     }
-    .ant-menu-item-selected {
+    .ant-menu-item-selected, .ant-menu-submenu-selected {
       background-color: var(--color-list-hover);
-      color: var(--color-text-primary);
+      color: var(--ant-primary-color);
+      .ant-menu-submenu-arrow {
+        color: var(--ant-primary-color);
+      }
       &:after {
         display: none;
       }