添加自动分离功能

src/App.vue

@@ -119,6 +119,12 @@ export default defineComponent({
       this.updateExp();
       this.$q.dark.set(utools.isDarkColors());
       this.enterData = enter;
+      if (this.$root.profile.autoDetachFeatures?.includes(enter.code)) {
+        // win下无效
+        let ctrlKey = utools.isWindows() ? "ctrl" : "command"
+        utools.simulateKeyboardTap("d", ctrlKey)
+        utools.simulateKeyboardTap("n", ctrlKey)
+      }
       this.$router.push(enter.code);
     },
     outPlugin() {
@@ -243,31 +249,39 @@ export default defineComponent({
   --q-dark: #464646;
   --q-dark-page: #303133;
 }
+
 .q-card--dark {
   background: var(--q-dark-page);
 }
+
 .container {
   color: black;
   background: white;
 }
+
 .body--dark .container {
   color: white;
   background: var(--q-dark-page);
 }
+
 .q-tooltip {
   font-size: 11px;
 }
+
 .q-chip {
   background: #e3e3e39a;
 }
+
 .q-chip--dark {
   background: #676666;
 }
+
 .commandLogo {
   cursor: pointer;
   transition: 0.2s;
   filter: drop-shadow(2px 1px 1px grey);
 }
+
 .commandLogo:hover {
   transition: 0.5s;
   transform: translateY(-5px);
@@ -293,9 +307,11 @@ export default defineComponent({
 .fade-enter-from {
   opacity: 0;
 }
+
 .fade-enter-to {
   opacity: 1;
 }
+
 .fade-enter-active {
   transition: opacity 0.3s ease;
 }

src/components/ConfigurationMenu.vue

@@ -1,16 +1,7 @@
 <template>
-  <q-menu
+  <q-menu max-height="480px" max-width="300px" transition-show="jump-up" transition-hide="jump-down">
-    max-height="480px"
-    max-width="300px"
-    transition-show="jump-up"
-    transition-hide="jump-down"
-  >
     <!-- 用户信息 -->
-    <UserInfo
+    <UserInfo ref="user" :allQuickCommandsLength="allQuickCommandsLength" :allFeaturesLength="allFeaturesLength" />
-      ref="user"
-      :allQuickCommandsLength="allQuickCommandsLength"
-      :allFeaturesLength="allFeaturesLength"
-    />
     <!-- 菜单 -->
     <q-list>
       <!-- 命令管理 -->
@@ -54,12 +45,7 @@
               <q-item-section>禁用本页所有命令</q-item-section>
             </q-item>
             <!-- 清空 -->
-            <q-item
+            <q-item style="color: red" clickable v-close-popup @click="clearAllCommands">
-              style="color: red"
-              clickable
-              v-close-popup
-              @click="clearAllCommands"
-            >
               <q-item-section side>
                 <q-icon name="delete" />
               </q-item-section>
@@ -80,35 +66,18 @@
               <q-item-section side>
                 <q-icon name="folder_special" />
               </q-item-section>
-              <q-input
+              <q-input dense prefix="快速收藏文件至" suffix="标签" outlined input-class="text-center" style="width: 280px"
-                dense
+                autofocus v-model="$root.profile.quickFileTag" @blur="
-                prefix="快速收藏文件至"
-                suffix="标签"
-                outlined
-                input-class="text-center"
-                style="width: 280px"
-                autofocus
-                v-model="$root.profile.quickFileTag"
-                @blur="
                   $root.profile.quickFileTag ||
-                    ($root.profile.quickFileTag = '文件')
+                  ($root.profile.quickFileTag = '文件')
-                "
+                  " type="text">
-                type="text"
-              >
                 <template v-slot:append>
-                  <q-toggle
+                  <q-toggle @update:model-value="(val, e) => toggleFeature('favFile', val)
-                    @update:model-value="
+                    " v-model="$root.profile.quickFileEnable" checked-icon="check" color="primary" />
-                      (val, e) => toggleFeature('favFile', val)
-                    "
-                    v-model="$root.profile.quickFileEnable"
-                    checked-icon="check"
-                    color="primary"
-                  />
                 </template>
-                <q-tooltip
+                <q-tooltip>启用后，选中文件可以通过超级面板快速将文件收藏到「{{
-                  >启用后，选中文件可以通过超级面板快速将文件收藏到「{{
+                  $root.profile.quickFileTag
-                    $root.profile.quickFileTag
+                }}」标签
-                  }}」标签
                 </q-tooltip>
               </q-input>
             </q-item>
@@ -116,34 +85,18 @@
               <q-item-section side>
                 <q-icon name="bookmarks" />
               </q-item-section>
-              <q-input
+              <q-input dense prefix="快速收藏网址至" suffix="标签" outlined input-class="text-center" style="width: 280px"
-                dense
+                v-model="$root.profile.quickUrlTag" @blur="
-                prefix="快速收藏网址至"
-                suffix="标签"
-                outlined
-                input-class="text-center"
-                style="width: 280px"
-                v-model="$root.profile.quickUrlTag"
-                @blur="
                   $root.profile.quickUrlTag ||
-                    ($root.profile.quickUrlTag = '网址')
+                  ($root.profile.quickUrlTag = '网址')
-                "
+                  " type="text">
-                type="text"
-              >
                 <template v-slot:append>
-                  <q-toggle
+                  <q-toggle @update:model-value="(val, e) => toggleFeature('favUrl', val)
-                    @update:model-value="
+                    " v-model="$root.profile.quickUrlEnable" checked-icon="check" color="primary" />
-                      (val, e) => toggleFeature('favUrl', val)
-                    "
-                    v-model="$root.profile.quickUrlEnable"
-                    checked-icon="check"
-                    color="primary"
-                  />
                 </template>
-                <q-tooltip
+                <q-tooltip>启用后，在浏览器界面可以通过超级面板快速将网址收藏到「{{
-                  >启用后，在浏览器界面可以通过超级面板快速将网址收藏到「{{
+                  $root.profile.quickUrlTag
-                    $root.profile.quickUrlTag
+                }}」标签
-                  }}」标签
                 </q-tooltip>
               </q-input>
             </q-item>
@@ -151,29 +104,13 @@
               <q-item-section side>
                 <q-icon name="drive_file_rename_outline" />
               </q-item-section>
-              <q-input
+              <q-input dense prefix="新建插件别名至" suffix="标签" outlined input-class="text-center" style="width: 280px"
-                dense
+                autofocus v-model="$root.profile.pluNickNameTag" type="text">
-                prefix="新建插件别名至"
-                suffix="标签"
-                outlined
-                input-class="text-center"
-                style="width: 280px"
-                autofocus
-                v-model="$root.profile.pluNickNameTag"
-                type="text"
-              >
                 <template v-slot:append>
-                  <q-toggle
+                  <q-toggle @update:model-value="(val, e) => toggleFeature('pluNickName', val)
-                    @update:model-value="
+                    " v-model="$root.profile.pluNickNameEnable" checked-icon="check" color="primary" />
-                      (val, e) => toggleFeature('pluNickName', val)
-                    "
-                    v-model="$root.profile.pluNickNameEnable"
-                    checked-icon="check"
-                    color="primary"
-                  />
                 </template>
-                <q-tooltip
+                <q-tooltip>启用后，在主输入框输入「插件别名」可以快速设置插件别名<br />
-                  >启用后，在主输入框输入「插件别名」可以快速设置插件别名<br />
                   并将所有设置的别名保存至「{{
                     $root.profile.pluNickNameTag
                   }}」标签
@@ -191,14 +128,9 @@
                   </div>
                 </template>
                 <template v-slot:append>
-                  <q-btn
+                  <q-btn flat @click="$router.push('server')" icon="open_in_new" />
-                    flat
-                    @click="$router.push('server')"
-                    icon="open_in_new"
-                  />
                 </template>
-                <q-tooltip
+                <q-tooltip>通过本地监听
-                  >通过本地监听
                   {{ $root.nativeProfile.serverPort }}
                   端口的形式，接收用户传送过来的参数，然后根据参数执行不同的操作
                   <br />
@@ -218,14 +150,9 @@
                   </div>
                 </template>
                 <template v-slot:append>
-                  <q-btn
+                  <q-btn flat @click="$router.push('code')" icon="open_in_new" />
-                    flat
-                    @click="$router.push('code')"
-                    icon="open_in_new"
-                  />
                 </template>
-                <q-tooltip
+                <q-tooltip>一个可以直接运行代码的代码编辑器<br />
-                  >一个可以直接运行代码的代码编辑器<br />
                   也可在主输入框输入关键字「RunCode」进入
                 </q-tooltip>
               </q-field>
@@ -246,51 +173,30 @@
                 <q-icon name="manage_accounts" />
               </q-item-section>
               <q-item-section>用户特殊变量</q-item-section>
-              <q-tooltip
+              <q-tooltip>用户设置的变量，类似一个全局配置项<br />
-                >用户设置的变量，类似一个全局配置项<br />
                 配置好后可选择特殊变量中的「usr:」插入<br />
-                也可直接在特殊变量中配置</q-tooltip
+                也可直接在特殊变量中配置</q-tooltip>
-              >
             </q-item>
             <q-item>
               <q-item-section side>
                 <q-icon name="dvr" />
               </q-item-section>
-              <q-input
+              <q-input dense outlined autogrow style="width: 280px" autofocus v-model="$root.nativeProfile.envPath"
-                dense
+                type="text" label="环境变量 PATH">
-                outlined
+                <q-tooltip>修改本插件环境变量中的 PATH，直接覆盖而非追加
-                autogrow
-                style="width: 280px"
-                autofocus
-                v-model="$root.nativeProfile.envPath"
-                type="text"
-                label="环境变量 PATH"
-              >
-                <q-tooltip
-                  >修改本插件环境变量中的 PATH，直接覆盖而非追加
                   <br />将会影响到除 quickcommand、html
-                  以外的所有环境</q-tooltip
+                  以外的所有环境</q-tooltip>
-                >
               </q-input>
             </q-item>
             <q-item v-if="showAlias">
               <q-item-section side>
                 <q-icon name="code" />
               </q-item-section>
-              <q-input
+              <q-input dense outlined autogrow style="width: 280px" v-model="$root.nativeProfile.alias" type="text"
-                dense
+                label="Alias">
-                outlined
+                <q-tooltip>一行一条，配置方法和 shell 的语法一样<br />如 alias
-                autogrow
-                style="width: 280px"
-                v-model="$root.nativeProfile.alias"
-                type="text"
-                label="Alias"
-              >
-                <q-tooltip
-                  >一行一条，配置方法和 shell 的语法一样<br />如 alias
                   python="/home/user/.bin/python"<br />将会影响到除
-                  quickcommand、html 以外的所有环境</q-tooltip
+                  quickcommand、html 以外的所有环境</q-tooltip>
-                >
               </q-input>
             </q-item>
           </q-list>
@@ -310,22 +216,10 @@
               </q-item-section>
               <q-item-section>主颜色</q-item-section>
               <q-tooltip>你可以更改界面的主题色，会员限定</q-tooltip>
-              <q-menu
+              <q-menu v-if="$refs.user.isVIP" nchor="top left" self="bottom end">
-                v-if="$refs.user.isVIP"
-                nchor="top left"
-                self="bottom end"
-              >
                 <q-card>
-                  <q-color
+                  <q-color @change="setPrimaryColor" v-model="$root.profile.primaryColor" />
-                    @change="setPrimaryColor"
+                  <q-btn color="primary" label="重置为默认" class="full-width" @click="resetPrimary" />
-                    v-model="$root.profile.primaryColor"
-                  />
-                  <q-btn
-                    color="primary"
-                    label="重置为默认"
-                    class="full-width"
-                    @click="resetPrimary"
-                  />
                 </q-card>
               </q-menu>
             </q-item>
@@ -334,34 +228,16 @@
                 <q-icon name="image" />
               </q-item-section>
               <q-item-section>面板视图背景图片</q-item-section>
-              <q-tooltip
+              <q-tooltip>为面板视图设置一张背景图片，会员限定<br />请不要选择尺寸太大的图片，将影响插件载入速度</q-tooltip>
-                >为面板视图设置一张背景图片，会员限定<br />请不要选择尺寸太大的图片，将影响插件载入速度</q-tooltip
+              <q-menu v-if="$refs.user.isVIP" nchor="top left" self="bottom end">
-              >
-              <q-menu
-                v-if="$refs.user.isVIP"
-                nchor="top left"
-                self="bottom end"
-              >
                 <q-card>
-                  <q-file
+                  <q-file dense standout="bg-primary text-white" v-model="selectFile" autofocus
-                    dense
+                    @update:model-value="changeBackground()" accept="image/*" label="请选择一张图片">
-                    standout="bg-primary text-white"
-                    v-model="selectFile"
-                    autofocus
-                    @update:model-value="changeBackground()"
-                    accept="image/*"
-                    label="请选择一张图片"
-                  >
                     <template v-slot:prepend>
                       <q-icon name="attach_file" />
                     </template>
                   </q-file>
-                  <q-btn
+                  <q-btn color="negative" label="取消背景" class="full-width" @click="changeBackground(1)" />
-                    color="negative"
-                    label="取消背景"
-                    class="full-width"
-                    @click="changeBackground(1)"
-                  />
                 </q-card>
               </q-menu>
             </q-item>
@@ -371,12 +247,8 @@
               </q-item-section>
               <q-item-section class="flex">紧凑标签栏 </q-item-section>
               <q-tooltip>更为紧凑的标签栏，适用于标签非常多的情形</q-tooltip>
-              <q-item-section side
+              <q-item-section side><q-toggle v-model="$root.profile.denseTagBar" :disable="!$refs.user.isVIP"
-                ><q-toggle
+                  color="primary" /></q-item-section>
-                  v-model="$root.profile.denseTagBar"
-                  :disable="!$refs.user.isVIP"
-                  color="primary"
-              /></q-item-section>
             </q-item>
             <q-item clickable>
               <q-item-section side>
@@ -384,11 +256,14 @@
               </q-item-section>
               <q-item-section class="flex">自动聚焦搜索 </q-item-section>
               <q-tooltip>进入插件时自动聚焦搜索</q-tooltip>
-              <q-item-section side
+              <q-item-section side><q-toggle v-model="$root.profile.autofocusSearch" color="primary" /></q-item-section>
-                ><q-toggle
+            </q-item>
-                  v-model="$root.profile.autofocusSearch"
+            <q-item clickable @click="getActivatedFutures(); showAutoDetachFeatures = true">
-                  color="primary"
+              <q-item-section side>
-              /></q-item-section>
+                <q-icon name="web_stories" />
+              </q-item-section>
+              <q-item-section class="flex">自动分离 </q-item-section>
+              <q-tooltip>utools的自动分离对整个插件生效，配置此选项可以实现只对某些特定的功能进行自动分离</q-tooltip>
             </q-item>
           </q-list>
         </q-menu>
@@ -411,20 +286,17 @@
           <q-icon name="star" />
         </q-item-section>
         <q-item-section>收藏标签</q-item-section>
-        <q-tooltip
+        <q-tooltip>收藏后，会将当前标签名作为全局关键字，可在 uTools 的主输入框进行搜索
-          >收藏后，会将当前标签名作为全局关键字，可在 uTools 的主输入框进行搜索
           <br />
           搜索进入后，默认进入当前标签的面板视图 <br />
-          类似于旧版本的「快捷面板」</q-tooltip
+          类似于旧版本的「快捷面板」</q-tooltip>
-        >
       </q-item>
       <!-- 关于 -->
       <q-item clickable @click="showAbout = true">
         <q-item-section side>
           <q-icon name="info" />
         </q-item-section>
-        <q-item-section>关于和帮助</q-item-section></q-item
+        <q-item-section>关于和帮助</q-item-section></q-item>
-      >
     </q-list>
     <!-- 关于弹窗 -->
     <q-dialog v-model="showAbout">
@@ -437,6 +309,28 @@
     <q-dialog v-model="showUserDara">
       <UserData :showInsertBtn="false" />
     </q-dialog>
+    <q-dialog v-model="showAutoDetachFeatures">
+      <q-card>
+        <q-card-section style="height: 400px; overflow: auto;">
+          <q-option-group v-model="$root.profile.autoDetachFeatures" type="checkbox" :options="activateFeatures">
+            <template v-slot:label="opt">
+              <q-item clickable v-ripple style="width: 300px;">
+                <q-item-section avatar>
+                  <q-img :src="opt.icon" width="30px" />
+                </q-item-section>
+                <q-item-section>
+                  {{ opt.label }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-option-group>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn flat label="取消" @click="showAutoDetachFeatures = false" />
+          <q-btn color="primary" label="确定" @click="changeAutoDetachFeatures" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </q-menu>
 </template>
 
@@ -463,9 +357,11 @@ export default {
       showAbout: false,
       showPanelConf: false,
       showUserDara: false,
+      showAutoDetachFeatures: false,
       features: features,
       redirect: utools.redirect,
       showAlias: this.$q.platform.is.mac || this.$q.platform.is.linux,
+      activateFeatures: [],
     };
   },
   computed: {
@@ -539,6 +435,36 @@ export default {
         ? this.$root.utools.whole.setFeature(_.cloneDeep(this.features[type]))
         : this.$root.utools.whole.removeFeature(this.features[type].code);
     },
-  },
+    // 获取所有启用的功能
+    getActivatedFutures() {
+      let activateFeatures = this.$root.utools.whole.getFeatures().map(fts => {
+        return {
+          value: fts.code,
+          icon: fts.icon,
+          label: fts.explain,
+        }
+      });
+      let defaultFeatures = [{
+        value: "configuration",
+        label: "快捷命令配置",
+        icon: "logo.png"
+      },
+      {
+        value: "code",
+        label: "运行代码",
+        icon: "features/code.png"
+      },
+      {
+        value: "server",
+        label: "快捷命令服务",
+        icon: "features/server.png"
+      }]
+      this.activateFeatures = _.concat(defaultFeatures, _.cloneDeep(activateFeatures));
+    },
+    changeAutoDetachFeatures() {
+      this.showAutoDetachFeatures = false;
+      quickcommand.showMessageBox("设置成功");
+    },
+  }
 };
 </script>

src/js/options/defaultProfile.js

@@ -1,23 +1,24 @@
 export default {
-    common: {
+  common: {
-        commandCardStyle: "dense",
+    commandCardStyle: "dense",
-        primaryColor: "#009688",
+    primaryColor: "#009688",
-        defaultPrimaryColor: "#009688",
+    defaultPrimaryColor: "#009688",
-        backgroundImg: null,
+    backgroundImg: null,
-        autofocusSearch: false,
+    autofocusSearch: false,
-        denseTagBar: false,
+    denseTagBar: false,
-        quickFileEnable: false,
+    quickFileEnable: false,
-        quickFileTag: "文件",
+    quickFileTag: "文件",
-        quickUrlEnable: false,
+    quickUrlEnable: false,
-        quickUrlTag: "网址",
+    quickUrlTag: "网址",
-        pluNickNameEnable: false,
+    pluNickNameEnable: false,
-        pluNickNameTag: "别名",
+    pluNickNameTag: "别名",
-    },
+    autoDetachFeatures: [],
-    native: {
+  },
-        crontabs: {},
+  native: {
-        serverPort: 33442,
+    crontabs: {},
-        serverStatus: false,
+    serverPort: 33442,
-        envPath: '',
+    serverStatus: false,
-        alias: ''
+    envPath: "",
-    }
+    alias: "",
-}
+  },
+};