feat: 文件支持脚本操作和预览(后端 > 2.14.145)

package.json

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

src/api/subs/index.ts

@@ -63,7 +63,7 @@ export function useSubsApi() {
     },
     compareSub: (
       type: string,
-      data: Sub | Collection
+      data: Sub | Collection | any
     ): AxiosPromise<MyAxiosRes> => {
       return request({
         url: `/api/preview/${type}`,

src/components/FileListItem.vue

@@ -5,9 +5,8 @@
       class="sub-item-wrapper"
       :style="{ padding: isSimpleMode ? '9px' : '16px' }"
     >
-      <a
-      :href="`${host}/api/file/${encodeURIComponent(name)}`"
-          target="_blank"
+      <div
+        @click.stop="previewFile"
         class="sub-img-wrappers"
         :style="{ 'margin-top': isSimpleMode ? '5px' : '0' }"
       >
@@ -34,7 +33,7 @@
             bg-color=""
           />
         </div>
-      </a>
+      </div>
       <div class="sub-item-content">
         <div class="sub-item-title-wrapper">
 
@@ -138,11 +137,11 @@
     </template>
   </nut-swipe>
 
-  <CompareTable
-    v-if="compareTableIsVisible"
+  <FilePreview
+    v-if="filePreviewIsVisible"
     :name="name"
-    :compareData="compareData"
-    @closeCompare="closeCompare"
+    :previewData="previewData"
+    @closePreview="closePreview"
   />
 </template>
 
@@ -157,7 +156,7 @@
   import { useSubsStore } from '@/store/subs';
   import { getString } from '@/utils/flowTransfer';
   import { isMobile } from '@/utils/isMobile';
-  import CompareTable from '@/views/CompareTable.vue';
+  import FilePreview from '@/views/FilePreview.vue';
   import { Dialog, Toast } from '@nutui/nutui';
   import { useClipboard } from '@vueuse/core';
   import dayjs from 'dayjs';
@@ -182,9 +181,9 @@
   }>();
   // console.log('props.disabled')
   // console.log(props.disabled)
-  const compareTableIsVisible = ref(false);
-  usePopupRoute(compareTableIsVisible);
-
+  const filePreviewIsVisible = ref(false);
+  usePopupRoute(filePreviewIsVisible);
+  const previewData = ref();
   const moreAction = ref();
   const swipe = ref();
   const swipeIsOpen = ref(false);
@@ -284,11 +283,25 @@
     }
   });
 
-  const closeCompare = () => {
-    compareTableIsVisible.value = false;
+  const closePreview = () => {
+    filePreviewIsVisible.value = false;
     router.back();
   };
 
+  const previewFile = async () => {
+    Toast.loading('生成中...', { id: 'compare', cover: true, duration: 1500 });
+    const res = await useSubsApi().compareSub(
+      'file',
+      props.file
+    );
+
+    if (res?.data?.status === 'success') {
+      previewData.value = res.data.data;
+      filePreviewIsVisible.value = true;
+      Toast.hide('compare');
+    }
+  };
+
   const swipeClose = () => {
     swipe.value.close();
   };

src/views/FileEditor.vue

@@ -75,11 +75,21 @@
 
       </nut-form>
     </div>
-
+    <ActionBlock
+      :checked="actionsChecked"
+      :list="actionsList"
+      sourceType="file"
+      @addAction="addAction"
+      @deleteAction="deleteAction"
+    />
   </div>
 
   <div class="bottom-btn-wrapper">
-
+    <nut-button @click="compare" class="compare-btn btn" plain shape="square">
+      <font-awesome-icon icon="fa-solid fa-eye" />{{
+        $t('editorPage.subConfig.btn.compare')
+      }}
+    </nut-button>
     <nut-button
       @click="submit"
       class="submit-btn btn"
@@ -90,15 +100,27 @@
       {{ $t('editorPage.subConfig.btn.save') }}
     </nut-button>
   </div>
+
+  <FilePreview
+    v-if="filePreviewIsVisible"
+    :name="configName"
+    :previewData="previewData"
+    @closePreview="closePreview"
+  />
 </template>
 
 <script lang="ts" setup>
   import { useSubsApi } from '@/api/subs';
   import { useFilesApi } from '@/api/files';
+  import { usePopupRoute } from '@/hooks/usePopupRoute';
   import { useAppNotifyStore } from '@/store/appNotify';
   import { useGlobalStore } from '@/store/global';
   import { useSubsStore } from '@/store/subs';
-
+  import ActionBlock from '@/views/editor/ActionBlock.vue';
+  import { addItem, deleteItem } from '@/utils/actionsOperate';
+  import { actionsToProcess } from '@/utils/actionsToPorcess';
+  import Script from '@/views/editor/components/Script.vue';
+  import FilePreview from '@/views/FilePreview.vue';
   import { initStores } from '@/utils/initApp';
   import { Dialog, Toast } from '@nutui/nutui';
   import { storeToRefs } from 'pinia';
@@ -129,17 +151,23 @@
   const padding = bottomSafeArea.value + 'px';
 
   const file = computed(() => subsStore.getOneFile(configName));
-
+  const filePreviewIsVisible = ref(false);
+  usePopupRoute(filePreviewIsVisible);
+  const previewData = ref();
   const isInit = ref(false);
   const ruleForm = ref<any>(null);
+  const actionsChecked = reactive([]);
+  const actionsList = reactive([]);
   const isget = ref(false);
   const form = reactive<any>({
     name: '',
     displayName: '',
     icon: '',
+    process: [],
   });
   provide('form', form);
-
+  // 排除非动作卡片
+  const ignoreList = ['Quick Setting Operator'];
 
   watchEffect(() => {
     if (isInit.value) return;
@@ -151,18 +179,93 @@
 
     const sourceData: any = toRaw(file.value);
     if (sourceData) {
+      if (!Array.isArray(sourceData.process)) {
+        sourceData.process = []
+      }
       form.name = sourceData.name;
       form.displayName = sourceData.displayName || sourceData['display-name'];
       form.icon = sourceData.icon;
 
       form.content = sourceData.content;
+      const newProcess = JSON.parse(JSON.stringify(sourceData.process));
+      form.process = newProcess;
+      if (sourceData.process.length > 0) {
+        form.process.forEach(item => {
+          const { type, id } = item;
+          actionsChecked.push([id, true]);
+          const action = {
+            type,
+            id,
+            tipsDes: t(`editorPage.subConfig.nodeActions['${type}'].tipsDes`),
+            component: null,
+          };
+          switch (type) {
+            case 'Script Operator':
+              action.component = shallowRef(Script);
+              break;
+            default:
+              break;
+          }
+          actionsList.push(action);
+          
+        });
+      }
       // 标记 加载完成
       isInit.value = true;
       return;
     }
   
   });
 
+  const addAction = val => {
+    addItem(form, actionsList, actionsChecked, val, t);
+  };
+
+  const deleteAction = id => {
+    deleteItem(form, actionsList, actionsChecked, id);
+  };
+  const closePreview = () => {
+    filePreviewIsVisible.value = false;
+    router.back();
+  };
+  const compare = () => {
+    ruleForm.value.validate().then(async ({ valid, errors }: any) => {
+      // 如果验证失败
+      if (!valid) {
+        Dialog({
+          title: t(`editorPage.subConfig.pop.errorTitle`),
+          content: errors[0].message,
+          popClass: 'auto-dialog',
+          noCancelBtn: true,
+          okText: t(`editorPage.subConfig.pop.errorBtn`),
+          // @ts-ignore
+          closeOnClickOverlay: true,
+        });
+        return;
+      }
+
+      Toast.loading('生成中...', { id: 'compare', cover: true, duration: 1500 });
+      const data: any = JSON.parse(JSON.stringify(toRaw(form)));
+      data.process = actionsToProcess(data.process, actionsList, ignoreList);
+
+      // 过滤掉预览开关关闭的操作
+      actionsChecked.forEach(item => {
+        if (!item[1]) {
+          const index = data.process.findIndex(i => i.id === item[0]);
+          if (index > -1) {
+            data.process.splice(index, 1);
+          }
+        }
+      });
+
+      const res = await subsApi.compareSub('file', data);
+      if (res?.data?.status === 'success') {
+        previewData.value = res.data.data;
+        filePreviewIsVisible.value = true;
+        Toast.hide('compare');
+      }
+    });
+  };
 
   const submit = () => {
     if (isget.value){
@@ -192,7 +295,7 @@
       // 如果验证成功，开始保存/修改
       const data: any = JSON.parse(JSON.stringify(toRaw(form)));
       data['display-name'] = data.displayName;
-      
+      data.process = actionsToProcess(data.process, actionsList, ignoreList);
 
       let res = null;
 
@@ -303,7 +406,7 @@
     // }
 
     .submit-btn {
-      width: 100%;
+      width: 67%;
     }
   }