From eb9de1b2a11ea6ec884747ec6f717daf6f604446 Mon Sep 17 00:00:00 2001
From: hsingyin <hsingyin@foxmail.com>
Date: Sun, 13 Oct 2024 00:14:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?i18n=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TagPopup.vue  | 270 +++++++++++++++++++++++++++++++++++
 src/locales/en.ts            |  40 +++---
 src/locales/zh.ts            |   8 +-
 src/views/SubEditor.vue      |  24 +++-
 src/views/icon/IconPopup.vue |   9 +-
 5 files changed, 326 insertions(+), 25 deletions(-)
 create mode 100644 src/components/TagPopup.vue

diff --git a/src/components/TagPopup.vue b/src/components/TagPopup.vue
new file mode 100644
index 00000000..86a6ba3b
--- /dev/null
+++ b/src/components/TagPopup.vue
@@ -0,0 +1,270 @@
+<!-- 标签弹窗 -->
+<template>
+  <nut-popup
+    v-model:visible="isVisible"
+    pop-class="tag-popup"
+    position="bottom"
+    :style="{
+      height: `95%`,
+      padding: '20px 12px 0 12px',
+      backgroundColor: 'var(--background-color)',
+    }"
+    :lock-scroll="true"
+    :safe-area-inset-bottom="true"
+    close-icon="close-little"
+    z-index="11000"
+    closeable
+    round
+    @close="close"
+  >
+    <div class="popup-title">{{ t('subPage.tag.addTagTitle') }}</div>
+    <div class="popup-header">
+      <div class="tag-input">
+        <nut-input
+          class="nut-input-text"
+          v-model.trim="keyword"
+          :placeholder="t('subPage.tag.tagPlaceholder')"
+          type="text"
+          input-align="left"
+          clearable
+          @clear="clearSearch"
+        />
+      </div>
+    </div>
+    <div class="popup-main">
+      <div class="tag-list">
+        <nut-tag
+          v-for="(item, index) in allTagsList"
+          :key="index"
+          :class="{ 'active': item.isActive }"
+          @click="handleTagItem(item)"
+          >{{ item.label }}</nut-tag>
+          <!-- 新建标签 -->
+           <div class="add-tag-box">
+            <nut-input
+              v-if="isAddTag"
+              class="add-tag-input"
+              v-model.trim="addTagValue"
+              :placeholder="t('subPage.tag.tagPlaceholder')"
+              :autofocus="true"
+              max-length="30"
+              type="text"
+              input-align="left"
+              :border="false"
+              @blur="saveTag"
+              closeable
+            />
+            <nut-tag v-else class="add-tag" @click="addTag">{{ t('subPage.tag.addTagBtn') }}</nut-tag>
+           </div>
+
+      </div>
+    </div>
+  </nut-popup>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onMounted, nextTick } from "vue";
+import { storeToRefs } from "pinia";
+import { useSubsStore } from "@/store/subs";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+const subsStore = useSubsStore();
+const { hasSubs, hasCollections, subs, collections } = storeToRefs(subsStore);
+const hasUntagged = ref(false);
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  currentTag: {
+    type: String,
+    default: '',
+  },
+});
+const isVisible = ref(props.visible);
+const keyword = ref("");
+const isAddTag = ref(false);
+const addTagValue = ref('');
+watch(
+  () => props.visible,
+  (newValue) => {
+    isVisible.value = newValue;
+    console.log("newValue", newValue);
+    if (newValue) {
+      getTags();
+    }
+  },
+);
+const clearSearch = () => {
+  keyword.value = "";
+}
+const getTag = () => {
+  return localStorage.getItem('sub-tag') || 'all';
+}
+const tag = ref(getTag());
+const allTags = ref([]);
+const allTagsList = computed(() => {
+  if (!keyword.value) {
+    return allTags.value
+  }
+  return allTags.value.filter(i => i.label.indexOf(keyword.value) !== -1)
+})
+const getTags = () => {
+  if(!hasSubs.value && !hasCollections.value) return []
+  // 从 subs 和 collections 中获取所有的 tag, 去重
+  const set = new Set()
+  subs.value.forEach(sub => {
+    if (Array.isArray(sub.tag) && sub.tag.length > 0) {
+      sub.tag.forEach(i => {
+        set.add(i)
+      });
+    } else {
+      hasUntagged.value = true
+    }
+  })
+  collections.value.forEach(col => {
+    if (Array.isArray(col.tag) && col.tag.length > 0) {
+      col.tag.forEach(i => {
+        set.add(i)
+      });
+    } else {
+      hasUntagged.value = true
+    }
+  })
+
+  let tags: any[] = Array.from(set)
+  if(tags.length === 0) return []
+  tags = tags.map(i => ({ label: i, value: i }));
+  
+  let result = [...tags]
+  // if(hasUntagged.value) result.push({ label: t("specificWord.untagged"), value: "untagged" })
+  if (!result.find(i => i.value === tag.value)) {
+    tag.value = 'all'
+  }
+  // 判断是否包含传入的tags，增加isActive样式
+  const currentTagList = props.currentTag.split(',').map(i => i.trim())
+  result.forEach(i => {
+    i.isActive = currentTagList.includes(i.value)
+  })
+  allTags.value = result
+};
+
+const addTag = () => {
+  addTagValue.value = ''
+  isAddTag.value = true
+}
+const saveTag = () => {
+  if(!addTagValue.value) {
+    isAddTag.value = false
+    return
+  }
+  // 如果新增标签和已有标签一样，则不添加，并且选中已有标签
+  if (allTags.value.find(i => i.value === addTagValue.value)) {
+    const index = allTags.value.findIndex(i => i.value === addTagValue.value)
+    allTags.value[index].isActive = true
+    isAddTag.value = false
+    return
+  }
+  allTags.value.push({label: addTagValue.value, value: addTagValue.value, isActive: true})
+  isAddTag.value = false
+}
+const handleTagItem = (item) => {
+  const index = allTags.value.findIndex(i => i.value === item.value)
+  allTags.value[index].isActive = !allTags.value[index].isActive
+}
+
+onMounted(() => {
+  getTags();
+})
+
+const emit = defineEmits(["update:visible", "setTag"]);
+
+const show = () => {
+  isVisible.value = true;
+  emit("update:visible", true);
+};
+
+const close = () => {
+  const selectedTags = allTags.value.filter(i => i.isActive).map(i => i.value).join(',')
+  emit("setTag", selectedTags);
+  isAddTag.value = false
+  hide();
+}
+const hide = () => {
+  isVisible.value = false;
+  emit("update:visible", false);
+};
+// 暴露方法给父组件
+defineExpose({ show, close });
+</script>
+
+<style lang="scss" scoped>
+.tag-popup {
+  background: var(--background-color);
+  .popup-title {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    color: var(--primary-text-color);
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .popup-header {
+    padding: 0 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .tag-input {
+      width: 100%;
+      .nut-input {
+        background: var(--background-color);
+      }
+    }
+  }
+  .popup-main {
+    padding: 0 10px;
+    .tag-list {
+      padding-top: 20px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 10px;
+      .nut-tag {
+        padding: 4px 10px;
+        text-align: center;
+        font-size: 14px;
+
+        color: var(--primary-text-color);
+
+        &.active {
+          color: var(--primary-color);
+          border: 1px solid var(--primary-color);
+          background: var(--background-color);
+
+        }
+      }
+      .add-tag-box {
+        display: flex;
+        align-items: center;
+        height: 31px;
+        .add-tag {
+          border: 1px dashed var(--primary-color);
+          color: var(--primary-color);
+          background: var(--background-color);
+
+        }
+        .add-tag-input {
+          padding: 0;
+          background: var(--background-color);
+          display: flex;
+          align-items: center;
+          .nut-input {
+
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 778ba452..ab13bc16 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -111,7 +111,11 @@ export default {
     },
     addSubTitle: 'Which type you want to create?',
     previewTitle: 'Copy/Preview a subscription',
-
+    tag: {
+      addTagTitle: 'Add Tag',
+      tagPlaceholder: 'Please enter tag name',
+      addTagBtn: '+ New Tag',
+    },
     emptySub: {
       title: 'You have no Subscription yet',
       desc: 'After adding you can enjoy the love of YM Peng',
@@ -208,11 +212,11 @@ export default {
         leaveContent:
           'Unsave changes will be lost without saving.\n\nDo you want to leave editing?',
         clickTag: {
-          title: '编辑确认',
+          title: 'Click Tag To Edit',
           content:
-            '输入框存在未保存的内容，现在编辑其他标签当前未保存的内容将丢失\n\n请确认？',
-          confirm: '确认',
-          cancel: '取消',
+            'There is unsaved content in the input box. Now editing other tags will lose the unsaved content\n\nPlease confirm?',
+          confirm: 'confirm',
+          cancel: 'cancel',
         },
       },
       basic: {
@@ -239,7 +243,7 @@ export default {
         },
         tag: {
           label: 'Tag(s)',
-          placeholder: 'The tag(s) (separated by comma) will be used for grouping.',
+          placeholder: 'Click on the left icon, The tag(s) (separated by comma) will be used for grouping.',
         },
         subscriptionTags: {
           label: 'Subscription Tag(s)',
@@ -357,14 +361,14 @@ export default {
           options: ['Add Flag', 'Remove Flag'],
           twOptions: ['⇒ 🇨🇳', '⇒ 🇼🇸', 'Unchanged'],
           tipsTitle: 'flags Tips',
-          tipsDes: '旗帜操作说明',
+          tipsDes: 'Flag operation instructions',
         },
         'Sort Operator': {
           label: 'Node Sort',
           des: 'Order',
           options: ['Ascending', 'Descending', 'Random'],
           tipsTitle: 'sort Tips',
-          tipsDes: '节点排序操作说明',
+          tipsDes: 'Description of node sorting operation',
         },
         'Resolve Domain Operator': {
           label: 'Resolve Domain',
@@ -374,13 +378,13 @@ export default {
           filters: ['Disabled', 'Remove Failed', 'IP Only', 'IPv4 Only', 'IPv6 Only'],
           cache: ['Enabled', 'Disabled'],
           tipsTitle: 'domain Tips',
-          tipsDes: '节点域名解析操作说明',
+          tipsDes: 'Operation instructions for node domain name resolution',
         },
         'Region Filter': {
           label: 'Region Filter',
           options: ['🇭🇰 HK', '🇨🇳 TW', '🇸🇬 SG', '🇯🇵 JP', '🇬🇧 UK', '🇺🇸 US', '🇩🇪 DE', '🇰🇷 KR'],
           tipsTitle: 'Region Filter Tips',
-          tipsDes: '区域过滤器操作说明',
+          tipsDes: 'Region filter operating instructions',
         },
         'Type Filter': {
           label: 'Node Type Filter',
@@ -402,7 +406,7 @@ export default {
             'External Proxy Program',
           ],
           tipsTitle: 'Node Type Filter Tips',
-          tipsDes: '节点类型过滤器操作说明',
+          tipsDes: 'Node type filter Operation Description',
         },
         'Regex Filter': {
           label: 'Regex Filter',
@@ -410,28 +414,28 @@ export default {
           options: ['Retain', 'Remove'],
           placeholder: ['Regular Expressions'],
           tipsTitle: 'Regex Filter Tips',
-          tipsDes: '正则过滤操作说明',
+          tipsDes: 'Regular filtering operation instructions',
         },
         'Regex Sort Operator': {
           label: 'Regex Sort',
           des: ['Regular Expressions'],
           placeholder: ['Regular Expressions'],
           tipsTitle: 'Regex Sort Tips',
-          tipsDes: '正则排序操作说明',
+          tipsDes: 'Regular sorting operation instructions',
         },
         'Regex Delete Operator': {
           label: 'Regex Delete',
           des: ['Regular Expressions'],
           placeholder: ['Regular Expressions'],
           tipsTitle: 'Regex Delete Tips',
-          tipsDes: '正则删除操作说明',
+          tipsDes: 'Regular deletion operation instructions',
         },
         'Regex Rename Operator': {
           label: 'Regex Rename',
           des: ['Regular Expressions'],
           placeholder: ['Regular Expressions', 'Replace with'],
           tipsTitle: 'Regex Rename Tips',
-          tipsDes: '正则重命名操作说明',
+          tipsDes: 'Regular renaming operation instructions',
         },
         'Handle Duplicate Operator': {
           label: 'Handle Duplicate',
@@ -439,14 +443,14 @@ export default {
           position: { options: ['Prefix', 'Suffix'], des: 'Number Position' },
           template: {
             des: 'Number Format',
-            placeholder: '序号显示格式，用空格分隔',
+            placeholder: 'Serial number display format, separated by spaces',
           },
           link: {
             des: 'Separator',
-            placeholder: '节点名和序号之间的连接符',
+            placeholder: 'The connector between the node name and the sequence number',
           },
           tipsTitle: 'Handle Duplicate Tips',
-          tipsDes: '节点去重操作说明',
+          tipsDes: 'Node deduplication operation instructions',
         },
         'Script Filter': {
           label: 'Script Filter',
diff --git a/src/locales/zh.ts b/src/locales/zh.ts
index 566286e6..bcea463e 100644
--- a/src/locales/zh.ts
+++ b/src/locales/zh.ts
@@ -111,7 +111,11 @@ export default {
     },
     addSubTitle: '选择要创建的订阅类型',
     previewTitle: '预览/拷贝订阅',
-
+    tag: {
+      addTagTitle: '添加标签',
+      tagPlaceholder: '请输入标签名称',
+      addTagBtn: '+ 新建标签',
+    },
     emptySub: {
       title: '你还没有添加订阅',
       desc: '添加后开始使用 Sub-Store',
@@ -239,7 +243,7 @@ export default {
         },
         tag: {
           label: '标签',
-          placeholder: '标签(用 , 分隔) 将用于分组',
+          placeholder: '点击左侧图标选择，标签(用 , 分隔) 将用于分组',
         },
         subscriptionTags: {
           label: '关联订阅标签',
diff --git a/src/views/SubEditor.vue b/src/views/SubEditor.vue
index a6922bd7..b1bd110b 100644
--- a/src/views/SubEditor.vue
+++ b/src/views/SubEditor.vue
@@ -61,12 +61,17 @@
           :label="$t(`editorPage.subConfig.basic.tag.label`)"
           prop="tag"
         >
-          <input
+          <nut-input
             class="nut-input-text"
             v-model.trim="form.tag"
+            :border="false"
             :placeholder="$t(`editorPage.subConfig.basic.tag.placeholder`)"
             type="text"
-          />
+            input-align="right"
+            left-icon="shop"
+            @click-left-icon="showTagPopup"
+          >
+          </nut-input>
         </nut-form-item>
         <!-- icon -->
         <nut-form-item
@@ -386,6 +391,12 @@
     ref="iconPopupRef"
     @setIcon="setIcon">
   </icon-popup>
+  <tag-popup
+    v-model:visible="tagPopupVisible"
+    ref="tagPopupRef"
+    :currentTag="form.tag"
+    @setTag="setTagValue">
+  </tag-popup>
 </template>
 
 <script lang="ts" setup>
@@ -410,6 +421,7 @@ import HandleDuplicate from "@/views/editor/components/HandleDuplicate.vue";
 import Regex from "@/views/editor/components/Regex.vue";
 import Script from "@/views/editor/components/Script.vue";
 import IconPopup from "@/views/icon/IconPopup.vue";
+import TagPopup from "@/components/TagPopup.vue";
 import { Dialog, Toast } from "@nutui/nutui";
 import { storeToRefs } from "pinia";
 import {
@@ -485,6 +497,14 @@ const padding = bottomSafeArea.value + "px";
     return result
   });
   const tag = ref('all');
+  const tagPopupVisible = ref(false);
+  const tagPopupRef = ref(null);
+  const showTagPopup = () => {
+    tagPopupVisible.value = true
+  };
+  const setTagValue = (tag: any) => {
+    form.tag = tag;
+  };
   const selectedSubs = computed(() => {
     if(!Array.isArray(form.subscriptions) || form.subscriptions.length === 0) return ''
     return `: ${form.subscriptions.map((name) => {
diff --git a/src/views/icon/IconPopup.vue b/src/views/icon/IconPopup.vue
index 04aacf34..090d40dd 100644
--- a/src/views/icon/IconPopup.vue
+++ b/src/views/icon/IconPopup.vue
@@ -15,7 +15,7 @@
     z-index="11000"
     closeable
     round
-    @close="hide"
+    @close="close"
   >
     <div class="icon-popup-title">
       {{ $t(`iconCollectionPage.iconCollection`) }}
@@ -348,13 +348,16 @@ const show = () => {
   isVisible.value = true
   emit('update:visible', true)
 }
-
+const close = () => {
+  clearIconName()
+  hide()
+}
 const hide = () => {
   isVisible.value = false
   emit('update:visible', false)
 }
 // 暴露方法给父组件
-defineExpose({ show, hide })
+defineExpose({ show, hide, close })
 </script>
 
 <style lang="scss" scoped>