🚨 增加 prettier

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 }}
@@ -63,18 +63,25 @@
                 <a-tag
                   :key="cmd"
                   v-for="cmd in item.cmds"
-                  @close="removeFeature(cmd)"
-                  @click="
-                    !cmd.label &&
-                      openPlugin({
-                        code: item.code,
-                        cmd
-                      })
-                  "
                   :class="{ executable: !cmd.label }"
                   :color="!cmd.label && '#87d068'"
                 >
-                  {{ cmd.label || 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>
+                    <a-tooltip v-else placement="topLeft" title="点击-号，从超级面板移除关键词">
+                      <MinusCircleOutlined @click="removePluginToSuperPanel(cmd)" />
+                    </a-tooltip>
+                  </template>
                 </a-tag>
               </div>
             </div>
@@ -89,13 +96,15 @@
 </template>
 
 <script setup>
-import { useStore } from "vuex";
-import { computed, ref } from "vue";
+import {useStore} from "vuex";
+import {computed, ref, toRaw} from "vue";
 import path from "path";
 import MarkdownIt from "markdown-it";
-const { ipcRenderer } = window.require("electron");
+import {PlusCircleOutlined, MinusCircleOutlined} from "@ant-design/icons-vue";
 
-const { remote } = window.require("electron");
+const {ipcRenderer} = window.require("electron");
+
+const {remote} = window.require("electron");
 const fs = window.require("fs");
 const md = new MarkdownIt();
 
@@ -117,8 +126,46 @@ const pluginDetail = computed(() => {
   return localPlugins.value[currentSelect.value] || {};
 });
 
-const openPlugin = ({ cmd, code }) => {
-  console.log(pluginDetail.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 plugin = {
+    ...toRaw(pluginDetail.value),
+    cmd,
+    ext: {
+      code,
+      type: "text",
+      payload: null,
+    },
+  };
+  superPanelPlugins.value.data.push(plugin);
+  window.rubick.db.put(toRaw(superPanelPlugins.value));
+};
+
+const removePluginToSuperPanel = (cmd) => {
+  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));
+};
+
+const hasAdded = (cmd) => {
+  let added = false;
+  superPanelPlugins.value.data.some((item) => {
+    if (item.cmd === cmd) {
+      added = true;
+      return true;
+    }
+    return false;
+  });
+  return added;
+};
+
+const openPlugin = ({cmd, code}) => {
   window.rubick.openPlugin(
     JSON.parse(
       JSON.stringify({
@@ -163,6 +210,7 @@ const deletePlugin = async plugin => {
   overflow: hidden;
   background: #f3efef;
   height: calc(~"100vh - 46px");
+  
   .container {
     box-sizing: border-box;
     width: 100%;
@@ -171,6 +219,7 @@ const deletePlugin = async plugin => {
     height: 100%;
     display: flex;
   }
+  
   .installed-list {
     width: 40%;
     background: #fff;
@@ -178,68 +227,84 @@ const deletePlugin = async plugin => {
     padding: 10px 0;
     border-right: 1px solid #eee;
     overflow: auto;
+    
     .item {
       padding: 10px 20px;
       display: flex;
       align-items: center;
+      
       img {
         width: 40px;
         height: 40px;
         margin-right: 20px;
       }
+      
       .desc {
         color: #999;
       }
+      
       &.active {
         background: #eee;
       }
     }
   }
+  
   .plugin-detail {
     padding: 20px 20px 0 20px;
     box-sizing: border-box;
     width: 60%;
     height: 100%;
     background: #fff;
+    
     .plugin-top {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
+      
       .title {
         font-size: 20px;
         display: flex;
         align-items: center;
       }
+      
       .desc {
         font-size: 13px;
         color: #999;
       }
     }
+    
     .detail-container,
     .feature-container {
       height: 380px;
       overflow: auto;
+      
       img {
         width: 100%;
       }
     }
+    
     .desc-item {
       border-bottom: 1px solid #ddd;
       padding: 10px 0;
+      
       .ant-tag {
         margin-top: 6px;
+        
         &.executable {
           cursor: pointer;
+          
           &:hover {
-           transform: translateY(-2px);
+            transform: translateY(-2px);
           }
         }
       }
+      
       .desc-title {
         display: flex;
         align-items: center;
         justify-content: space-between;
       }
+      
       .desc-info {
         color: #999;
       }

feature/src/views/settings/index.vue

@@ -14,6 +14,12 @@
           </template>
           全局快捷键
         </a-menu-item>
+        <a-menu-item key="superpanel">
+          <template #icon>
+            <FileAddOutlined />
+          </template>
+          超级面板设置
+        </a-menu-item>
         <a-menu-item key="localhost">
           <template #icon>
             <DatabaseOutlined />
@@ -131,6 +137,7 @@
         </div>
       </div>
       <Localhost v-if="currentSelect[0] === 'localhost'" />
+      <SuperPanel v-if="currentSelect[0] === 'superpanel'" />
     </div>
   </div>
 </template>
@@ -141,12 +148,14 @@ import {
   LaptopOutlined,
   DatabaseOutlined,
   MinusCircleOutlined,
-  PlusCircleOutlined
+  PlusCircleOutlined,
+  FileAddOutlined,
 } from "@ant-design/icons-vue";
 import debounce from "lodash.debounce";
 import { ref, reactive, watch, toRefs, computed, toRaw } from "vue";
 import keycodes from "./keycode";
 import Localhost from "./localhost.vue";
+import SuperPanel from "./super-panel.vue";
 
 const { remote, ipcRenderer } = window.require("electron");
 

feature/src/views/settings/super-panel.vue

@@ -0,0 +1,77 @@
+<template>
+  请选择需要添加到超级面板中的常用插件
+  <div class="super-list-item panel-item">
+    <a-list :grid="{ gutter: 16, column: 2 }" :data-source="localPlugins.filter(item => !!item)">
+      <template #renderItem="{ item }">
+        <a-list-item v-if="item">
+          <template #actions>
+            <a-button v-if="!hasAdded(item)" @click="addPluginToSuperPanel(item)" style="color: #7ec699" type="text">
+              添加
+            </a-button>
+            <a-button v-else @click="removePluginToSuperPanel(item)" style="color: #ff4ea4;" type="text">
+              移除
+            </a-button>
+          </template>
+          <a-list-item-meta>
+            <template #description>
+              <span class="ellipse">{{ item.description }}</span>
+            </template>
+            <template #title>
+              <span class="ellipse">{{ item.pluginName }}</span>
+            </template>
+            <template #avatar>
+              <a-avatar :src="item.logo"/>
+            </template>
+          </a-list-item-meta>
+        </a-list-item>
+      </template>
+    </a-list>
+  </div>
+</template>
+<script setup>
+import {useStore} from "vuex";
+import {computed, ref, toRaw} from "vue";
+
+const store = useStore();
+const localPlugins = computed(() =>
+  store.state.localPlugins.filter(
+    plugin => plugin.name !== "rubick-system-feature" && plugin.name !== "rubick-system-super-panel"
+  )
+);
+
+const hasAdded = (plugin) => {
+  let added = false;
+  superPanelPlugins.value.data.some((item) => {
+    if (item.name === plugin.name) {
+      added = true;
+      return true;
+    }
+    return false;
+  });
+  return added;
+};
+
+const superPanelPlugins = ref(window.rubick.db.get("super-panel-db") || {
+  data: [],
+  _id: "super-panel-db",
+});
+
+const addPluginToSuperPanel = (plugin) => {
+  superPanelPlugins.value.data.push(toRaw(plugin));
+  window.rubick.db.put(toRaw(superPanelPlugins.value));
+};
+
+const removePluginToSuperPanel = (plugin) => {
+  superPanelPlugins.value.data = toRaw(superPanelPlugins.value).data.filter((item) => {
+    return item.name !== plugin.name;
+  });
+  window.rubick.db.put(toRaw(superPanelPlugins.value));
+};
+</script>
+<style lang="less">
+.super-list-item.panel-item {
+  &:after {
+    display: none;
+  }
+}
+</style>