feat: 更新标签支持拖拽排序

package.json

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

src/components/TagPopup.vue

@@ -33,30 +33,43 @@
     </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>
-
+        <draggable
+          :list="allTagsList"
+          :sort="true"
+          item-key="label"
+          animation="300"
+          :scroll-sensitivity="200"
+          :force-fallback="true"
+          :scroll-speed="8"
+          :scroll="true"
+          @start="onStartDrag"
+          @end="onEndDrag"
+        >
+          <template #item="{ element }">
+            <nut-tag
+              :key="element.label"
+              :class="{ 'active': element.isActive }"
+              @click="handleTagItem(element)"
+            >{{ element.label }}</nut-tag>
+          </template>
+        </draggable>
+        <!-- 新建标签 -->
+        <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>
@@ -66,6 +79,8 @@
 import { ref, watch, computed, onMounted, nextTick } from "vue";
 import { storeToRefs } from "pinia";
 import { useSubsStore } from "@/store/subs";
+import draggable from "vuedraggable";
+
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
@@ -86,6 +101,15 @@ const isVisible = ref(props.visible);
 const keyword = ref("");
 const isAddTag = ref(false);
 const addTagValue = ref('');
+//拖拽开始的事件
+const onStartDrag = () => {
+  console.log("开始拖拽");
+};
+
+//拖拽结束的事件
+const onEndDrag = () => {
+  console.log("结束拖拽");
+};
 watch(
   () => props.visible,
   (newValue) => {
@@ -230,6 +254,12 @@ defineExpose({ show, close });
       align-items: center;
       flex-wrap: wrap;
       gap: 10px;
+      >div {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 10px;
+      }
       .nut-tag {
         padding: 4px 10px;
         text-align: center;

src/locales/en.ts

@@ -262,6 +262,7 @@ export default {
           label: 'URL',
           placeholder: 'Multiple lines and parameters are supported, please click the button on the left to see the usage.',
           tips: {
+            fullScreenEdit: 'Full Screen Editing',
             label: 'Usage',
             title: 'Subscription URL(s)',
             content: 'Subscription URL (please separate multiple subscriptions with a new line). \n\nSupported parameters:\n\ncacheKey: Setting the name of the optimistic cache. Its value can be managed in the persistent store(suitable for subscriptions that often fail to fetch).\n\nvalidCheck: error will be reported when expired or there is no remaining traffic\n\nflowUserAgent: the User-Agent for fetching subscription usage info\n\nflowUrl: the URL for fetching subscription usage info(using the content of the response body)\n\nshowRemaining: show remaining traffic instead of usage\n\nnoFlow: do not query for flow\n\nhideExpire: hide expiration time\n\nnoCache: do not use cache\n\nresetDay: the day when monthly data usage resets\n\nstartDate: subscription start date\n\ncycleDays: reset cycle (in days).\n\nFor example: http://a.com?token=1#cycleDays=31&startDate=2024-06-04 \nor http://a.com?token=1#resetDay=15',

src/locales/zh.ts

@@ -262,6 +262,8 @@ export default {
           label: '链接',
           placeholder: '支持多行和参数, 请点击左侧的使用说明查看用法',
           tips: {
+            fullScreenEdit: '全屏编辑',
+            fullScreenEditCancel: '取消全屏',
             label: '使用说明',
             title: '订阅链接',
             content: '支持换行输入多个订阅\n\n支持以下参数\n\ncacheKey: 设置乐观缓存的名称 开启后也可自行在持久化缓存中管理(适合经常拉取失败的订阅)\nvalidCheck: 过期或无剩余流量时报错\nflowUserAgent: 查询流量时使用的 User-Agent\nflowUrl: 自定义查询流量的 URL(将使用响应体的内容)\nnoFlow: 不查询流量\nhideExpire: 隐藏到期\nshowRemaining: 显示剩余流量而不是已用流量\nnoCache: 不使用缓存\nresetDay: 每月流量重置日\nstartDate: 订阅开始日期\ncycleDays: 订阅重置周期(单位: 天)\n\n例: http://a.com?token=1#cycleDays=31&startDate=2024-06-04\n或 http://a.com?token=1#resetDay=15',

src/views/FileEditor.vue

@@ -135,7 +135,7 @@
 
             <button class="cimg-button" @click="isDis = false">
               <img src="" />
-              全屏编辑
+              {{ $t(`editorPage.subConfig.basic.url.tips.fullScreenEdit`) }}
               <!-- 测试 后续再改效果 -->
             </button>
             <div
@@ -269,7 +269,7 @@
   <div v-else style="width: 100%;height: 95vh;">
     <button class="cimg-button" @click="isDis = true">
       <img src="" />
-      取消全屏
+      {{ $t(`editorPage.subConfig.basic.url.tips.fullScreenEditCancel`) }}
     </button>
     <cmView :isReadOnly="false" id="FileEditer" />
   </div>

src/views/SubEditor.vue

@@ -162,7 +162,7 @@
             /> -->
             <button class="cimg-button" @click="isDis = false">
               <img src="" />
-              全屏编辑
+              {{ $t(`editorPage.subConfig.basic.url.tips.fullScreenEdit`) }}
               <!-- 测试 后续再改效果 -->
             </button>
             <span class="button-tips" @click="contentTips">
@@ -376,7 +376,7 @@
 <div v-else style="width: 100%;max-height: 95vh;">
     <button class="cimg-button" @click="isDis = true">
       <img src="" />
-      取消全屏
+      {{ $t(`editorPage.subConfig.basic.url.tips.fullScreenEditCancel`) }}
     </button>
     <cmView :isReadOnly="false" id="SubEditer" />
   </div>