完成面板视图

public/preload.js

@@ -246,15 +246,6 @@ window.pluginInfo = () => {
     return JSON.parse(fs.readFileSync(path.join(__dirname, 'plugin.json')))
 }
 
-
-let GetFilePath = (Path, File) => {
-    if (utools.isDev()) {
-        return path.join(__dirname, Path, File)
-    } else {
-        return path.join(__dirname.replace(/([a-zA-Z0-9\-]+\.asar)/, '$1.unpacked'), Path, File)
-    }
-}
-
 let getSleepCodeByShell = ms => {
     var cmd, tempFilePath
     if (utools.isWindows()) {

src/App.vue

@@ -67,4 +67,14 @@ export default defineComponent({
   --q-dark: #303133;
   --q-dark-page: #303133;
 }
+.commandLogo {
+  cursor: pointer;
+  transition: 0.2s;
+  filter: drop-shadow(2px 1px 1px grey);
+}
+.commandLogo:hover {
+  transition: 0.5s;
+  transform: translateY(-5px);
+  filter: drop-shadow(2px 1px 5px grey);
+}
 </style>

src/components/CommandEditor.vue

@@ -145,10 +145,22 @@
       ref="editor"
       :style="{
         top: languageBarHeight + 'px',
-        left: this.action.type === 'run' ? '0' : sideBarWidth + 'px',
+        left: editorLeft,
         transition: '0.3s',
       }"
     />
+    <div
+      class="absolute-bottom flex justify-center content-center"
+      :style="{
+        top: languageBarHeight + 'px',
+        left: editorLeft,
+        userSelect: 'none',
+      }"
+    >
+      ctrl + s 保存 <br />
+      ctrl + b 运行 <br />
+      alt + z 自动换行
+    </div>
     <!-- 运行结果 -->
     <CommandRunResult :action="action" ref="result"></CommandRunResult>
   </div>
@@ -205,6 +217,9 @@ export default {
         "搜索结果"
       );
     },
+    editorLeft() {
+      return this.action.type === "run" ? "0" : this.sideBarWidth + "px";
+    },
   },
   created() {},
   methods: {

src/components/CommandSideBar.vue

@@ -234,6 +234,7 @@
     </div>
     <iconPicker
       @iconChanged="(dataUrl) => (currentCommand.features.icon = dataUrl)"
+      position="left"
       ref="icon"
     />
   </q-scroll-area>
@@ -395,15 +396,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.commandLogo {
-  cursor: pointer;
-  transition: 10s;
-  filter: drop-shadow(2px 1px 1px grey);
-}
-.commandLogo:hover {
-  transition: 10s;
-  transform: rotate(1080deg);
-}
-</style>

src/components/ConfigurationMenu.vue

@@ -144,7 +144,7 @@
         </q-menu>
       </q-item>
       <!-- 收藏 -->
-      <q-item v-if="isTagStared" clickable>
+      <q-item v-if="isTagStared" clickable @click="unMarkTag">
         <q-item-section side>
           <q-icon name="star_border" />
         </q-item-section>
@@ -176,7 +176,7 @@
     </q-dialog>
     <!-- 面板视图弹窗 -->
     <q-dialog v-model="showPanelConf">
-      <PanelSetting :isTagStared="isTagStared" />
+      <PanelSetting :isTagStared="isTagStared" :currentTag="currentTag" />
     </q-dialog>
   </q-menu>
 </template>
@@ -218,6 +218,7 @@ export default {
   },
   props: {
     isTagStared: Boolean,
+    currentTag: String,
   },
   methods: {
     // 导入命令且定位
@@ -257,6 +258,13 @@ export default {
       this.$profile.backgroundImg = reset ? null : this.selectFile.path;
       this.configurationPage.$forceUpdate();
     },
+    unMarkTag() {
+      this.$utools.whole.removeFeature(
+        `panel_${window.hexEncode(this.currentTag)}`
+      );
+      _.pull(this.$root.$refs.view.activatedQuickPanels, this.currentTag);
+      quickcommand.showMessageBox("取消收藏成功");
+    },
   },
 };
 </script>

src/components/IconPicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-dialog v-model="showIconPicker" class="q-gutter" position="left">
+    <q-dialog v-model="showIconPicker" class="q-gutter" :position="position">
       <q-card>
         <q-card-section class="text-h5 text-center">更改图标</q-card-section>
         <q-card-section>
@@ -108,6 +108,9 @@ export default {
       dataUrl: null,
     };
   },
+  props: {
+    position: String,
+  },
   methods: {
     setIcon(dataUrl) {
       this.dataUrl = dataUrl;

src/components/PanelSetting.vue

@@ -1,26 +1,84 @@
 <template>
-  <q-card>
+  <q-card style="width: 400px">
     <q-card-section>
-      <q-input dense label="名称" v-model="panelConf.name" />
+      <div class="row q-gutter-md">
-      <q-input dense label="说明" v-model="panelConf.description" />
+        <div class="col-auto justify-center content-center flex q-pa-md">
+          <q-avatar square class="commandLogo">
+            <q-img
+              :src="features.icon"
+              @click="$refs.icon.showIconPicker = true"
+          /></q-avatar>
+        </div>
+        <div class="col">
+          <q-select
+            hide-dropdown-icon
+            label-color="primary"
+            transition-show="jump-down"
+            transition-hide="jump-up"
+            v-model="features.cmds"
+            max-values="3"
+            type="text"
+            placeholder="键入后回车"
+            use-input
+            use-chips
+            multiple
+            new-value-mode="add-unique"
+            input-debounce="0"
+            label="关键字"
+            @blur="features.cmds.length || features.cmds.push(currentTag)"
+          />
+          <q-input
+            label-color="primary"
+            v-model="features.explain"
+            type="text"
+            placeholder="请输入描述"
+            label="描述"
+            @blur="features.explain || (features.explain = ' ')"
+          />
+        </div>
+      </div>
     </q-card-section>
     <q-card-actions align="right">
       <q-btn flat label="取消" color="grey" v-close-popup />
-      <q-btn flat label="禁用" color="negative" v-close-popup />
+      <q-btn flat label="确定" color="primary" v-close-popup @click="markTag" />
-      <q-btn flat label="启用" color="primary" v-close-popup />
     </q-card-actions>
+    <IconPicker
+      ref="icon"
+      @iconChanged="(dataUrl) => (features.icon = dataUrl)"
+      position="right"
+    />
   </q-card>
 </template>
 
 <script>
+import IconPicker from "components/IconPicker";
+
 export default {
+  components: { IconPicker },
   data() {
     return {
-      panelConf: {
+      features: {
-        name: "",
+        explain: `进入${this.currentTag}的面板视图`,
-        description: "",
+        icon: "/logo.png",
+        cmds: [this.currentTag],
+        platform: ["win32", "darwin", "linux"],
+        code: `panel_${window.hexEncode(this.currentTag)}`,
       },
     };
   },
+  props: {
+    currentTag: String,
+  },
+  methods: {
+    markTag() {
+      this.$utools.whole.setFeature(_.cloneDeep(this.features));
+      this.$root.$refs.view.activatedQuickPanels.push(this.currentTag);
+      quickcommand.showMessageBox(
+        `主输入框输入『${this.features.cmds.join("、")}』即可直接进入『${
+          this.currentTag
+        }』的面板视图`
+      );
+    },
+  },
 };
 </script>

src/pages/ConfigurationPage.vue

@@ -164,6 +164,7 @@
               ><q-spinner-bars color="primary" size="1.5em" />
               <ConfigurationMenu
                 :isTagStared="activatedQuickPanels.includes(currentTag)"
+                :currentTag="currentTag"
               ></ConfigurationMenu>
             </q-btn>
           </q-btn-group>
@@ -313,6 +314,10 @@ export default {
       // 所有的快捷命令
       this.allQuickCommands = this.getAllQuickCommands();
       this.importDefaultCommands();
+      if (this.$route.params.tags) {
+        this.currentTag = window.hexDecode(this.$route.params.tags);
+        this.commandCardStyle = "mini";
+      }
     },
     importDefaultCommands() {
       for (var code of Object.keys(defaultCommands)) {
@@ -327,7 +332,7 @@ export default {
       let quickpanels = [];
       features.forEach((x) =>
         x.code.slice(0, 6) == "panel_"
-          ? quickpanels.push(hexDecode(x.code.slice(6)))
+          ? quickpanels.push(window.hexDecode(x.code.slice(6)))
           : currentFts.push(x)
       );
       return {