feat: 优化文件管理Mihomo配置中订阅名称选取交互

Author: hsingyin

package.json

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

src/locales/en.ts

@@ -533,6 +533,12 @@ export default {
           tipsDes: "Use a JavaScript script to filter nodes",
         },
       },
+      sourceNamePicker: {
+        title: 'Select Subscription Name',
+        cancel: 'Cancel',
+        confirm: 'Confirm',
+        emptyTips: 'Subscription not found? Click to add a subscription',
+      },
     },
   },
   myPage: {

src/locales/zh.ts

@@ -528,6 +528,12 @@ export default {
           tipsDes: '使用一段 JavaScript 脚本来过滤节点',
         },
       },
+      sourceNamePicker: {
+        title: '选择订阅名称',
+        cancel: '取消',
+        confirm: '确定',
+        emptyTips: '未找到订阅？点击去添加订阅',
+      },
     },
   },
   myPage: {

src/views/FileEditor.vue

@@ -90,30 +90,30 @@
               @click-left-icon="showIconPopup"
             />
           </nut-form-item>
-          <nut-form-item
-              required
-              :label="$t(`specificWord.type`)"
-              prop="type"
-            >
-              <div class="radio-wrapper">
-                <nut-radiogroup direction="horizontal" v-model="form.type">
-                  <nut-radio shape="button" label="mihomoProfile">
-                    {{ $t(`filePage.type.mihomoProfile`) }}
-                  </nut-radio>
-                  <nut-radio shape="button" label="file">
-                    {{ $t(`specificWord.file`) }}
-                  </nut-radio>
-                </nut-radiogroup>
-              </div>
-            </nut-form-item>
+          <nut-form-item required :label="$t(`specificWord.type`)" prop="type">
+            <div class="radio-wrapper">
+              <nut-radiogroup v-model="form.type" direction="horizontal">
+                <nut-radio shape="button" label="mihomoProfile">
+                  {{ $t(`filePage.type.mihomoProfile`) }}
+                </nut-radio>
+                <nut-radio shape="button" label="file">
+                  {{ $t(`specificWord.file`) }}
+                </nut-radio>
+              </nut-radiogroup>
+            </div>
+          </nut-form-item>
           <template v-if="form.type === 'mihomoProfile'">
             <nut-form-item
               required
               :label="$t(`editorPage.subConfig.basic.source.label`)"
               prop="source"
             >
               <div class="radio-wrapper">
-                <nut-radiogroup direction="horizontal" v-model="form.sourceType">
+                <nut-radiogroup
+                  v-model="form.sourceType"
+                  direction="horizontal"
+                  @change="handleTypeChange"
+                >
                   <nut-radio shape="button" label="subscription">
                     {{ $t(`specificWord.singleSub`) }}
                   </nut-radio>
@@ -134,13 +134,17 @@
                 },
               ]"
             >
-              <input
+              <nut-input
                 class="nut-input-text"
+                :border="false"
                 data-1p-ignore
                 @blur="customerBlurValidate('name')"
+                input-align="right"
                 v-model.trim="form.sourceName"
                 :placeholder="(form.sourceType === 'subscription' ? $t(`specificWord.singleSub`) : $t(`specificWord.collectionSub`))+$t(`editorPage.subConfig.basic.name.label`)"
                 type="text"
+                right-icon="rect-right"
+                @click-right-icon="showSourceName"
               />
             </nut-form-item>
           </template>
@@ -353,6 +357,21 @@
   />
   <icon-popup v-model:visible="iconPopupVisible" ref="iconPopupRef" @setIcon="setIcon">
   </icon-popup>
+  <!-- 订阅名称 -->
+  <nut-picker
+    :key="sourceNameColumns.length"
+    v-model="selectSourceName"
+    v-model:visible="showSourceNamePicker"
+    :columns="sourceNameColumns"
+    :title="$t(`editorPage.subConfig.sourceNamePicker.title`)"
+    :cancel-text="$t(`editorPage.subConfig.sourceNamePicker.cancel`)"
+    :ok-text="$t(`editorPage.subConfig.sourceNamePicker.confirm`)"
+    @confirm="handleSourceNameConfirm"
+  >
+    <div v-if="!sourceNameColumns.length" class="empty-tips" @click="goAddSub">
+      <p>{{ t(`editorPage.subConfig.sourceNamePicker.emptyTips`) }}</p>
+    </div>
+  </nut-picker>
 </template>
 
 <script lang="ts" setup>
@@ -404,6 +423,7 @@ const { showNotify } = useAppNotifyStore();
 const globalStore = useGlobalStore();
 const settingsStore = useSettingsStore();
 const { bottomSafeArea } = storeToRefs(globalStore);
+const { subs, collections } = storeToRefs(subsStore);
 const { appearanceSetting } = storeToRefs(settingsStore);
 const padding = bottomSafeArea.value + "px";
 
@@ -426,13 +446,44 @@ const form = reactive<any>({
   icon: "",
   source: "local",
   sourceType: "collection",
+  sourceName: "",
   process: [],
   type: configName === 'UNTITLED-mihomoProfile' ? 'mihomoProfile' : 'file',
 });
 provide("form", form);
 // 排除非动作卡片
 const ignoreList = ["Quick Setting Operator"];
-
+// 订阅名称
+const showSourceNamePicker = ref(false);
+const selectSourceName = computed(() => [form.sourceName]);
+const sourceNameColumns = computed(() => {
+  const list =
+    form.sourceType === "collection" ? subsStore.collections : subsStore.subs;
+  if (!list || list.length === 0) {
+    return [];
+  }
+  return list.map((item) => {
+    return {
+      text: item.displayName ? `${item.displayName}` : item.name,
+      value: item.name,
+    };
+  });
+});
+const handleTypeChange = (val) => {
+  form.sourceName = "";
+};
+const showSourceName = () => {
+  showSourceNamePicker.value = true;
+};
+const handleSourceNameConfirm = ({ selectedValue, selectedOptions }) => {
+  if (selectedValue[0]) {
+    form.sourceName = selectedValue[0];
+  }
+  showSourceNamePicker.value = false;
+};
+const goAddSub = () => {
+  router.push("/subs");
+};
 watch(
   () => cmStore.EditCode["FileEditer"],
   (newCode) => {
@@ -499,6 +550,7 @@ watchEffect(() => {
     }
     // 标记 加载完成
     isInit.value = true;
+    console.log('form', form);
     return;
   }
 });
@@ -810,6 +862,16 @@ const handleEditGlobalClick = () => {
       }
     }
   }
+  :deep(.nut-form-item__label) {
+    width: auto;
+  }
+  :deep(.nut-input-text){
+    .nut-input-inner {
+      .nut-input-right-icon {
+        margin-left: 10px;
+      }
+    }
+  }
 }
 .actions-title-wrapper {
   display: flex;
@@ -818,7 +880,6 @@ const handleEditGlobalClick = () => {
   color: var(--comment-text-color);
   .doc {
     margin-left: 4px;
-    
     color: var(--primary-text-color);
   }
 }
@@ -924,4 +985,18 @@ const handleEditGlobalClick = () => {
     }
   }
 }
+
+.empty-tips {
+  padding: 40px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--background-color);
+  p {
+    // color: var(--primary-text-color);
+    color: var(--comment-text-color);
+    font-size: 14px;
+    text-align: center;
+  }
+}
 </style>