Merge pull request #113 from hsingyin/master

fix: 更新标签弹窗触发逻辑和样式

package.json

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

src/locales/en.ts

@@ -243,11 +243,11 @@ export default {
         },
         tag: {
           label: 'Tag(s)',
-          placeholder: 'Click on the left icon, The tag(s) (separated by comma) will be used for grouping.',
+          placeholder: 'Click on the right icon, The tag(s) (separated by comma) will be used for grouping.',
         },
         subscriptionTags: {
           label: 'Subscription Tag(s)',
-          placeholder: 'Include all subscriptions that contain one of these tag(s) (separated by comma)',
+          placeholder: 'Click on the right icon, Include all subscriptions that contain one of these tag(s) (separated by comma)',
         },
         source: {
           label: 'Source',

src/locales/zh.ts

@@ -243,11 +243,11 @@ export default {
         },
         tag: {
           label: '标签',
-          placeholder: '点击左侧图标选择，标签(用 , 分隔) 将用于分组',
+          placeholder: '点击右侧图标选择，标签(用 , 分隔) 将用于分组',
         },
         subscriptionTags: {
           label: '关联订阅标签',
-          placeholder: '使用标签关联单条订阅(用 , 分隔)',
+          placeholder: '点击右侧图标选择，使用标签关联单条订阅(用 , 分隔)',
         },
         source: {
           label: '来源',

src/views/SubEditor.vue

@@ -68,8 +68,8 @@
             :placeholder="$t(`editorPage.subConfig.basic.tag.placeholder`)"
             type="text"
             input-align="right"
-            left-icon="shop"
-            @click-left-icon="showTagPopup"
+            right-icon="rect-right"
+            @click-right-icon="showTagPopup('tag')"
           >
           </nut-input>
         </nut-form-item>
@@ -257,14 +257,16 @@
             prop="subscriptionTags"
           >
             <nut-input
-                :border="false"
-                class="nut-input-text"
-                v-model.trim="form.subscriptionTags"
-                :placeholder="$t(`editorPage.subConfig.basic.subscriptionTags.placeholder`)"
-                type="text"
-                input-align="right"
-                left-icon="tips"
-                @click-left-icon="subscriptionTagsTips"
+              :border="false"
+              class="nut-input-text"
+              v-model.trim="form.subscriptionTags"
+              :placeholder="$t(`editorPage.subConfig.basic.subscriptionTags.placeholder`)"
+              type="text"
+              input-align="right"
+              left-icon="tips"
+              right-icon="rect-right"
+              @click-left-icon="subscriptionTagsTips"
+              @click-right-icon="showTagPopup('linkTag')"
             />
           </nut-form-item>
           <nut-form-item
@@ -394,7 +396,7 @@
   <tag-popup
     v-model:visible="tagPopupVisible"
     ref="tagPopupRef"
-    :currentTag="form.tag"
+    :currentTag="currentTag"
     @setTag="setTagValue">
   </tag-popup>
 </template>
@@ -498,12 +500,25 @@ const padding = bottomSafeArea.value + "px";
   });
   const tag = ref('all');
   const tagPopupVisible = ref(false);
+  const tagType = ref('tag'); // 标签tag | 关联订阅标签linkTag
   const tagPopupRef = ref(null);
-  const showTagPopup = () => {
+  const currentTag = computed(() => {
+    if (tagType.value === 'linkTag') {
+      return form.subscriptionTags
+    } else {
+      return form.tag
+    }
+  })
+  const showTagPopup = (type:string) => {
+    tagType.value = type || 'tag'
     tagPopupVisible.value = true
   };
   const setTagValue = (tag: any) => {
-    form.tag = tag;
+    if (tagType.value === 'linkTag') {
+      form.subscriptionTags = tag;
+    } else {
+      form.tag = tag;      
+    }
   };
   const selectedSubs = computed(() => {
     if(!Array.isArray(form.subscriptions) || form.subscriptions.length === 0) return ''
@@ -1122,6 +1137,13 @@ const handleEditGlobalClick = () => {
       }
     }
   }
+  :deep(.nut-input-text){
+    .nut-input-inner {
+      .nut-input-right-icon {
+        margin-left: 8px;
+      }
+    }
+  }
 }
 
 .bottom-btn-wrapper {