添加更新提醒

src/js/options/changeLog.js

@@ -0,0 +1,18 @@
+const changeLog = [
+  {
+    version: "4.1.2",
+    log: `一、功能调整、新增
+① 现在会自动对特殊变量里的单、双、反引号、反斜杠、换行符等特殊符号进行转义。这意味用户不再需要手动处理这些特殊情况，比如在js中使用反引号(\`)或者在 python中 使用三引号(''')来解决换行的问题。
+<b style="color: #e60012">【 ! ! ! 】</b>需要注意，如果之前在js中使用了 String.raw 或者在 python 中使用了 r 来对反斜杠进行处理的话，现在需要去掉这些符号，比如之前是 String.raw\`{{input}}\`,现在则需要改回 "{{input}}"
+② 添加 quickcommand.runAppleScript 和 quickcommand.runPowerShell 两个方法
+③ quickcommand.showConfirmBox 现在支持渲染html以及设置宽度
+④ Mac下环境变量顺序调整为 /opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/usr/local/sbin:$PATH
+二、BUG 修复
+① 修复某些情况下调整页面大小报错的 BUG
+② 修复非 quickcommand 环境自动补全重复出现的 BUG
+③ 修复 alt+z 无法换行的 BUG
+④ 更新内置命令-网址二维码中 qrcode 的引用地址`,
+  },
+];
+
+export default changeLog;

src/pages/ConfigurationPage.vue

@@ -2,37 +2,19 @@
   <div class="relative">
     <!-- 标签栏 -->
     <!-- 面板视图不显示标签栏 -->
-    <q-scroll-area
+    <q-scroll-area v-show="commandCardStyle !== 'mini'" class="absolute-left" :thumb-style="{
-      v-show="commandCardStyle !== 'mini'"
-      class="absolute-left"
-      :thumb-style="{
       width: '2px',
-      }"
+    }" :style="{
-      :style="{
   width: tabBarWidth,
   zIndex: 1,
-      }"
+}">
-    >
+      <q-tabs v-model="currentTag" vertical switch-indicator active-class="text-primary text-weight-bolder"
-      <q-tabs
+        content-class="text-blue-grey" :key="$root.profile.denseTagBar" :dense="$root.profile.denseTagBar">
-        v-model="currentTag"
-        vertical
-        switch-indicator
-        active-class="text-primary text-weight-bolder"
-        content-class="text-blue-grey"
-        :key="$root.profile.denseTagBar"
-        :dense="$root.profile.denseTagBar"
-      >
         <!-- 所有标签 -->
-        <q-tab
+        <q-tab v-for="tag in allQuickCommandTags" :key="tag" :name="tag" :content-class="tag === '搜索结果' || activatedQuickPanels.includes(tag)
-          v-for="tag in allQuickCommandTags"
-          :key="tag"
-          :name="tag"
-          :content-class="
-            tag === '搜索结果' || activatedQuickPanels.includes(tag)
           ? 'text-blue-7 text-weight-bolder'
           : ''
-          "
+          ">
-        >
           {{ tag }}
           <q-tooltip v-if="tag === '未分类'">
             所有没有添加标签的命令都会归在未分类 <br />
@@ -42,10 +24,7 @@
       </q-tabs>
     </q-scroll-area>
     <!-- 面板栏 -->
-    <q-tab-panels
+    <q-tab-panels animated class="absolute-right" :style="{
-      animated
-      class="absolute-right"
-      :style="{
       bottom: footerBarHeight,
       left: tabBarWidth,
       background:
@@ -53,67 +32,35 @@
           ? `url('${$root.profile.backgroundImg}')`
           : 'none',
       backgroundSize: 'cover',
-      }"
+    }" v-model="currentTag" transition-prev="fade" transition-next="fade" swipeable>
-      v-model="currentTag"
+      <q-tab-panel style="padding: 0" v-for="tag in allQuickCommandTags" :key="tag" :name="tag">
-      transition-prev="fade"
+        <q-scroll-area style="height: 100%" :thumb-style="{
-      transition-next="fade"
-      swipeable
-    >
-      <q-tab-panel
-        style="padding: 0"
-        v-for="tag in allQuickCommandTags"
-        :key="tag"
-        :name="tag"
-      >
-        <q-scroll-area
-          style="height: 100%"
-          :thumb-style="{
           background: 'grey',
           width: '6px',
           opacity: 0.5,
-          }"
+        }">
-        >
           <div class="row center q-pa-xs">
-            <CommandCard
+            <CommandCard v-for="commandInfo in currentTagQuickCommands" :key="commandInfo.features.code"
-              v-for="commandInfo in currentTagQuickCommands"
+              :commandInfo="commandInfo" :isCommandActivated="activatedQuickCommandFeatureCodes.includes(
-              :key="commandInfo.features.code"
-              :commandInfo="commandInfo"
-              :isCommandActivated="
-                activatedQuickCommandFeatureCodes.includes(
                 commandInfo.features.code
               )
-              "
+                " :cardStyle="commandCardStyleSheet[commandCardStyle]" @commandChanged="commandChanged" :style="{
-              :cardStyle="commandCardStyleSheet[commandCardStyle]"
-              @commandChanged="commandChanged"
-              :style="{
     width: commandCardStyleSheet[commandCardStyle].width,
-              }"
+  }" class="relative-position q-pa-sm"></CommandCard>
-              class="relative-position q-pa-sm"
-            ></CommandCard>
           </div>
         </q-scroll-area>
       </q-tab-panel>
     </q-tab-panels>
     <!-- 底栏 -->
-    <div
+    <div class="absolute-bottom" :style="{
-      class="absolute-bottom"
-      :style="{
       height: footerBarHeight,
       left: tabBarWidth,
-      }"
+    }">
-    >
       <div class="row">
         <!-- 搜索栏 -->
         <div class="col">
-          <q-input
+          <q-input v-model="commandSearchKeyword" debounce="200" filled dense :autofocus="$root.profile.autofocusSearch"
-            v-model="commandSearchKeyword"
+            @update:model-value="updateSearch" placeholder="搜索，支持拼音首字母">
-            debounce="200"
-            filled
-            dense
-            :autofocus="$root.profile.autofocusSearch"
-            @update:model-value="updateSearch"
-            placeholder="搜索，支持拼音首字母"
-          >
             <template v-slot:prepend>
               <q-icon name="search" />
             </template>
@@ -123,88 +70,51 @@
         <div class="col-auto justify-end flex">
           <q-btn-group>
             <!-- 切换视图 -->
-            <q-btn-toggle
+            <q-btn-toggle v-model="commandCardStyle" @click="$root.profile.commandCardStyle = commandCardStyle"
-              v-model="commandCardStyle"
+              toggle-color="primary" flat :options="[
-              @click="$root.profile.commandCardStyle = commandCardStyle"
-              toggle-color="primary"
-              flat
-              :options="[
                 { slot: 'normal', value: 'normal' },
                 { slot: 'dense', value: 'dense' },
                 { slot: 'mini', value: 'mini' },
-              ]"
+              ]">
-            >
               <template v-slot:normal>
                 <q-icon name="dashboard" />普通
                 <q-tooltip>按两列排列的基础视图</q-tooltip>
               </template>
               <template v-slot:dense>
                 <q-icon name="apps" />紧凑
-                <q-tooltip
+                <q-tooltip>按三列排列的紧凑视图，但不会显示适用的操作系统</q-tooltip>
-                  >按三列排列的紧凑视图，但不会显示适用的操作系统</q-tooltip
-                >
               </template>
               <template v-slot:mini>
                 <q-icon name="view_comfy" />面板
-                <q-tooltip
+                <q-tooltip>按四列排列的面板视图<br />
-                  >按四列排列的面板视图<br />
                   老版本的「快捷面板」已被弃用，取而代之的是新版的「面板视图」<br />
                   注意：<br />
                   1.未启用、匹配类型为窗口的命令在此视图下不显示<br />
                   2.只显示图标、描述和匹配类型<br />
-                  3.点击卡片时会直接运行命令而不是编辑命令</q-tooltip
+                  3.点击卡片时会直接运行命令而不是编辑命令</q-tooltip>
-                >
               </template>
             </q-btn-toggle>
             <q-separator vertical />
             <!-- 新建按钮 -->
-            <q-btn
+            <q-btn split flat @click="addNewCommand" color="primary" label="新建" icon="add" />
-              split
-              flat
-              @click="addNewCommand"
-              color="primary"
-              label="新建"
-              icon="add"
-            />
             <q-separator vertical />
-            <q-btn
+            <q-btn stretch color="primary" flat size="xs" :style="{
-              stretch
-              color="primary"
-              flat
-              size="xs"
-              :style="{
               height: footerBarHeight,
-              }"
+            }"><q-spinner-bars color="primary" size="1.5em" />
-              ><q-spinner-bars color="primary" size="1.5em" />
               <!-- 菜单 -->
-              <ConfigurationMenu
+              <ConfigurationMenu :isTagStared="activatedQuickPanels.includes(currentTag)" :currentTag="currentTag">
-                :isTagStared="activatedQuickPanels.includes(currentTag)"
+              </ConfigurationMenu>
-                :currentTag="currentTag"
-              ></ConfigurationMenu>
             </q-btn>
           </q-btn-group>
         </div>
       </div>
     </div>
     <!-- 命令编辑界面 -->
-    <q-dialog
+    <q-dialog v-model="isCommandEditorShow" persistent maximized :transition-show="newCommandDirect ? '' : 'slide-up'"
-      v-model="isCommandEditorShow"
+      transition-hide="slide-down" style="overflow: hidden">
-      persistent
+      <CommandEditor ref="commandEditor" :action="commandEditorAction" @editorEvent="editorEvent"></CommandEditor>
-      maximized
-      :transition-show="newCommandDirect ? '' : 'slide-up'"
-      transition-hide="slide-down"
-      style="overflow: hidden"
-    >
-      <CommandEditor
-        ref="commandEditor"
-        :action="commandEditorAction"
-        @editorEvent="editorEvent"
-      ></CommandEditor>
     </q-dialog>
-    <CommandRunResult
+    <CommandRunResult :action="{ type: 'config' }" ref="result"></CommandRunResult>
-      :action="{ type: 'config' }"
-      ref="result"
-    ></CommandRunResult>
   </div>
 </template>
 
@@ -212,6 +122,7 @@
 import { defineAsyncComponent } from "vue";
 import quickcommandParser from "../js/common/quickcommandParser.js";
 import importAll from "../js/common/importAll.js";
+import changeLog from "../js/options/changeLog.js"
 import pinyinMatch from "pinyin-match";
 import CommandCard from "components/CommandCard";
 import CommandEditor from "components/CommandEditor";
@@ -326,6 +237,7 @@ export default {
         this.changeCurrentTag(window.hexDecode(this.$route.params.tags));
         this.commandCardStyle = "mini";
       }
+      this.showChangeLog();
       // 异步读取
       setTimeout(this.getActivatedFeatures, 0);
       setTimeout(this.getAllQuickCommands, 0);
@@ -602,6 +514,15 @@ export default {
           return;
       }
     },
+    showChangeLog() {
+      let lastNeedLogEvent = changeLog[changeLog.length - 1];
+      let loggedVersion =
+        this.$root.utools.whole.dbStorage.getItem("cfg_loggedVersion") || '0.0.0';
+      if (loggedVersion < lastNeedLogEvent.version) {
+        quickcommand.showConfirmBox('<pre style="white-space: pre-wrap;word-wrap: break-word;">' + lastNeedLogEvent.log + '</pre>', '更新日志', true, 700)
+        this.$root.utools.whole.dbStorage.setItem("cfg_loggedVersion", lastNeedLogEvent.version)
+      }
+    },
   },
 };
 </script>

src/plugins/monaco/types/quickcommand.api.d.ts

@@ -156,8 +156,13 @@ interface quickcommandApi {
    * ```
    * @param message 提示的内容
    * @param title 提示的标题
+   * @param html 内容是支持html，默认 false
    */
-  showConfirmBox(message?: string, title?: string): Promise<boolean>;
+  showConfirmBox(
+    message?: string,
+    title?: string,
+    isHtml?: boolean
+  ): Promise<boolean>;
 
   /**
    * 显示等待用户操作的按钮，用户点击后执行相关操作