feat: 新增节点操作启用禁用切换按钮

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.307",
+  "version": "2.14.308",
   "private": true,
   "scripts": {
     "dev": "vite --host",

src/locales/en.ts

@@ -372,6 +372,8 @@ export default {
           placeholder:
             "Failed to read the clipboard automatically, please paste the data manually in this text box.",
         },
+        enable: 'Enable',
+        disable: 'Disable',
       },
       nodeActions: {
         "Flag Operator": {

src/locales/zh.ts

@@ -389,6 +389,8 @@ export default {
           label: '从剪贴板导入',
           placeholder: '自动读取剪贴板失败, 请在此文本框内手动粘贴数据'
         },
+        enable: '启用',
+        disable: '禁用',
       },
       nodeActions: {
         'Script Operator': {

src/types/pages/home.d.ts

@@ -4,4 +4,6 @@ type ActionModuleProps = {
   type: string;
   component: any;
   tipsDes: string;
+  disabled?: boolean;
+  enabled?: boolean;
 };

src/types/store/subsStore.d.ts

@@ -27,6 +27,7 @@ interface Process {
   id?: string;
   customName?: string;
   args?: ProcessArg;
+  disabled?: boolean;
 }
 
 interface Sub {

src/utils/actionsOperate.ts

@@ -15,16 +15,17 @@ export const addItem = (
   const id = Math.random() * 100000000 + '';
   const type = selectedOptions[0].value;
   const args = selectedOptions[0].args;
+  const enabled = true;
   const obj = {
     id,
     customName: "",
     type,
     tipsDes: t(`editorPage.subConfig.nodeActions['${type}'].tipsDes`),
     component: null,
+    enabled,
   };
 
   actionsChecked.push([id, true]);
-
   switch (type) {
     case 'Flag Operator':
     case 'Sort Operator':
@@ -110,3 +111,8 @@ export const deleteItem = (form, actionsList, actionsChecked, id) => {
   actionsList.splice(actionsIndex, 1);
   actionsChecked.splice(checkedIndex, 1);
 };
+
+export const toggleItem = (actionsList, id) => {
+  const index = actionsList.findIndex((item) => item.id === id);
+  actionsList[index].enabled = !actionsList[index].enabled;
+};

src/utils/actionsToPorcess.ts

@@ -1,7 +1,7 @@
 export const actionsToProcess = (
   process: Process[],
   actionsList: ActionModuleProps[],
-  ignoreList: string[]
+  ignoreList: string[],
 ): Process[] => {
   const findProcess = (id: string) => process.find((item) => item.id === id);
   const newProcess = process.filter((item) => {
@@ -14,6 +14,7 @@ export const actionsToProcess = (
       args: findProcess(item.id).args,
       customName: findProcess(item.id).customName,
       id: item.id,
+      disabled: !item.enabled,
     });
   });
   return newProcess;

src/views/FileEditor.vue

@@ -269,6 +269,7 @@
         @updateCustomNameModeFlag="updateCustomNameModeFlag"
         @addAction="addAction"
         @deleteAction="deleteAction"
+        @toggleAction="toggleAction"
       />
     </div>
 
@@ -320,7 +321,7 @@ import { useGlobalStore } from "@/store/global";
 import { useSettingsStore } from '@/store/settings';
 import { useSubsStore } from "@/store/subs";
 import ActionBlock from "@/views/editor/ActionBlock.vue";
-import { addItem, deleteItem } from "@/utils/actionsOperate";
+import { addItem, deleteItem, toggleItem } from "@/utils/actionsOperate";
 import { actionsToProcess } from "@/utils/actionsToPorcess";
 import Script from "@/views/editor/components/Script.vue";
 import IconPopup from "@/views/icon/IconPopup.vue";
@@ -424,14 +425,15 @@ watchEffect(() => {
     form.process = newProcess;
     if (sourceData.process.length > 0) {
       form.process.forEach((item) => {
-        const { type, id, customName } = item;
+        const { type, id, customName, disabled } = item;
         actionsChecked.push([id, true]);
         const action = {
           type,
           id,
           customName,
           tipsDes: t(`editorPage.subConfig.nodeActions['${type}'].tipsDes`),
           component: null,
+          enabled: !disabled,
         };
         switch (type) {
           case "Script Operator":
@@ -456,6 +458,11 @@ const addAction = (val) => {
 const deleteAction = (id) => {
   deleteItem(form, actionsList, actionsChecked, id);
 };
+
+const toggleAction = (id) => {
+  toggleItem(actionsList, id);
+}
+
 const closePreview = () => {
   document.querySelector("html").style["overflow-y"] = "";
   document.querySelector("html").style.height = "";

src/views/SubEditor.vue

@@ -379,6 +379,7 @@
       @updateCustomNameModeFlag="updateCustomNameModeFlag"
       @addAction="addAction"
       @deleteAction="deleteAction"
+      @toggleAction="toggleAction"
     />
   </div>
 
@@ -434,7 +435,7 @@ import { useAppNotifyStore } from "@/store/appNotify";
 import { useGlobalStore } from "@/store/global";
 import { useSettingsStore } from '@/store/settings';
 import { useSubsStore } from "@/store/subs";
-import { addItem, deleteItem } from "@/utils/actionsOperate";
+import { addItem, deleteItem, toggleItem } from "@/utils/actionsOperate";
 import { actionsToProcess } from "@/utils/actionsToPorcess";
 import { initStores } from "@/utils/initApp";
 import CompareTable from "@/views/CompareTable.vue";
@@ -641,7 +642,7 @@ watchEffect(() => {
 
   if (sourceData.process.length > 0) {
     form.process.forEach((item) => {
-      const { type, id, customName } = item;
+      const { type, id, customName, disabled } = item;
 
       if (!ignoreList.includes(type)) {
         actionsChecked.push([id, true]);
@@ -651,6 +652,7 @@ watchEffect(() => {
           customName,
           tipsDes: t(`editorPage.subConfig.nodeActions['${type}'].tipsDes`),
           component: null,
+          enabled: !disabled,
         };
         switch (type) {
           case "Flag Operator":
@@ -695,6 +697,10 @@ const deleteAction = (id) => {
   deleteItem(form, actionsList, actionsChecked, id);
 };
 
+const toggleAction = (id) => {
+  toggleItem(actionsList, id);
+};
+
 const closeCompare = () => {
   document.querySelector("html").style["overflow-y"] = "";
   document.querySelector("html").style.height = "";

src/views/editor/ActionBlock.vue

@@ -67,9 +67,25 @@
               </div>
             </div>
             <div class="right">
+              <div class="action-switch">
+                <!-- <nut-switch
+                  v-model="element.enabled"
+                  class="my-switch"
+                  :active-text="t(`editorPage.subConfig.actions.enable`)"
+                  :inactive-text="t(`editorPage.subConfig.actions.disable`)"
+                /> -->
+                <nut-checkbox
+                  v-model="element.enabled"
+                  class="my-switch"
+                ></nut-checkbox>
+                <span @click="toggleActionSwitch(element.id)">{{ $t(`editorPage.subConfig.actions.enable`) }}</span>
+              </div>
               <div class="preview-switch">
-                <!-- <nut-switch class="my-switch" v-model="getItem(element.id)[1]" /> -->
-                <nut-checkbox class="my-switch" v-model="getItem(element.id)[1]"></nut-checkbox>
+                <nut-checkbox
+                  v-model="getItem(element.id)[1]"
+                  class="my-switch"
+                  :disabled="!element.enabled"
+                ></nut-checkbox>
                 <span @click="togglePreviewSwitch(element.id)">
                   {{ $t(`editorPage.subConfig.basic.previewSwitch`) }}
                 </span>
@@ -174,6 +190,7 @@ const { checked, list, sourceType } = defineProps<{
   sourceType?: string;
 }>();
 
+
 // 通过 i18n 构造 picker 选项
 // const showAddPicker = ref(false);
 // const showAddPicker = ref(true);
@@ -281,7 +298,7 @@ const paste = async () => {
     Toast.text(`导入失败 ${e.message ?? e}`);
   }
 };
-const emit = defineEmits(['addAction', 'deleteAction', 'updateCustomNameModeFlag']);
+const emit = defineEmits(['addAction', 'deleteAction', 'updateCustomNameModeFlag', 'toggleAction']);
 // 示例数据
 // const checked = reactive([
 //   ['12839211', true],
@@ -295,7 +312,9 @@ const emit = defineEmits(['addAction', 'deleteAction', 'updateCustomNameModeFlag
 //     tipsDes: '我是第一条提示',
 //   },
 // ]
-
+const toggleActionSwitch = (id: string) => {
+  emit('toggleAction', id);
+};
 // 获取绑定的对应预览开关
 const getItem = (id: string) => {
   return checked.find(item => item[0] === id);
@@ -564,43 +583,61 @@ defineExpose({ exitAllEditName });
     .right {
       display: flex;
       align-items: center;
+      .action-switch {
+        display: flex;
+        align-items: center;
+        padding: 0 5px;
+        .toggle {
+          color: var(--unimportant-icon-color);
+        }
+        span {
+          font-weight: normal;
+          font-size: 12px;
+          flex-shrink: 0;
+        }
+        .my-switch {
+          width: 18px;
+          :deep(.nut-icon) {
+            font-size: 16px;
+          }
+        }
+      }
       .preview-switch {
         -webkit-user-select: none;
         user-select: none;
         cursor: pointer;
         display: flex;
         align-items: center;
         // margin-right: 12px;
+        padding: 0 8px;
 
         span {
-          margin-right: 8px;
+          // margin-right: 8px;
+          flex-shrink: 0;
           font-weight: normal;
           font-size: 12px;
         }
 
         .my-switch {
           width: 18px;
-          // width: 45px;
-          // min-width: 40px;
-
           :deep(.nut-icon) {
             font-size: 16px;
           }
         }
       }
 
       .copy {
-        padding: 0 12px;
+        padding: 0 8px;
         cursor: pointer;
       }
       .delete {
-        padding: 0 12px;
+        padding: 0 8px;
         color: var(--danger-color);
         cursor: pointer;
       }
 
       .drag-handler {
-        padding-left: 16px;
+        padding-left: 10px;
         color: var(--lowest-text-color);
         cursor: move;
         cursor: grab;