feat: 优化了远程订阅链接和本地订阅使用说明

sub-store-org · May 13, 2024 · df09365 · df09365
1 parent d7ec1ad
commit df09365
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.231",
+  "version": "2.14.233",
   "private": true,
   "scripts": {
     "dev": "vite --host",

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -239,7 +239,12 @@ export default {
         },
         url: {
           label: 'URL',
-          placeholder: 'Subscription URL (please separate multiple subscriptions with a new line). Supported parameters: cacheKey - Read the last successful cache from here when the request fails,validCheck - error will be reported when expired or there is no remaining traffic, flowUserAgent - the User-Agent for fetching subscription usage info, showRemaining - show remaining traffic instead of usage, noFlow - do not query for flow, hideExpire - hide expiration time, noCache - do not use cache, resetDay - the day when monthly data usage resets, startDate - subscription start date, cycleDays - reset cycle (in days). For example: http://a.com?token=1#cycleDays=31&startDate=2024-06-04 or http://a.com?token=1#resetDay=15',
+          placeholder: 'Multiple lines and parameters are supported, please click the button on the left to see the usage.',
+          tips: {
+            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\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',
+          },
           isEmpty: 'URL cannot be empty',
           isIllegal: 'Invalid URL',
         },
@@ -248,7 +253,11 @@ export default {
         },
         content: {
           label: 'Content',
-          placeholder: 'The content of the subscription: 1. Multiple single-line proxy protocols/JSON/URI 2. Complete Base64/YAML',
+          placeholder: '',
+          tips: {
+            title: 'The content of the subscription',
+            content: 'Subscription content:\n\n1. Multiple single-line proxy protocols/JSON/URI\n\n2. Complete Base64/YAML',
+          },
         },
         icon: {
           label: 'Icon',

diff --git a/src/locales/zh.ts b/src/locales/zh.ts
@@ -239,7 +239,12 @@ export default {
         },
         url: {
           label: '链接',
-          placeholder: '订阅链接(多个订阅请换行) 支持参数: cacheKey 请求失败时从此处读取最近一次成功的缓存, validCheck 过期或无剩余流量时报错, flowUserAgent 查询流量时使用的 User-Agent, noFlow 不查询流量, hideExpire 隐藏到期, showRemaining 显示剩余流量而不是已用流量, noCache 不使用缓存, resetDay 每月流量重置日, startDate 订阅开始日期, cycleDays 订阅重置周期(单位: 天). 例: http://a.com?token=1#cycleDays=31&startDate=2024-06-04 或 http://a.com?token=1#resetDay=15',
+          placeholder: '支持多行和参数, 请点击左侧的使用说明查看用法',
+          tips: {
+            label: '使用说明',
+            title: '订阅链接',
+            content: '支持换行输入多个订阅\n\n支持以下参数\n\ncacheKey: 设置乐观缓存的名称 开启后也可自行在持久化缓存中管理(适合经常拉取失败的订阅)\nvalidCheck: 过期或无剩余流量时报错\nflowUserAgent: 查询流量时使用的 User-Agent\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',
+          },
           isEmpty: '订阅链接不能为空',
           isIllegal: '订阅链接格式非法',
         },
@@ -248,7 +253,11 @@ export default {
         },
         content: {
           label: '内容',
-          placeholder: '填入订阅内容: 1. 多个单行的代理协议/JSON/URI 2. 完整 Base64/YAML',
+          placeholder: '',
+          tips: {
+            title: '本地订阅节点',
+            content: '填入订阅内容:\n\n1. 换行输入多个单行的代理协议/JSON/URI\n\n2. 完整 Base64/YAML',
+          },
         },
         icon: {
           label: '图标链接',

diff --git a/src/views/SubEditor.vue b/src/views/SubEditor.vue
@@ -89,10 +89,11 @@
             </div>
           </nut-form-item>
           <!-- url / content -->
+          <!-- :label="$t(`editorPage.subConfig.basic.url.label`)" -->
           <nut-form-item
             required
+
             v-if="form.source === 'remote'"
-            :label="$t(`editorPage.subConfig.basic.url.label`)"
             prop="url"
             :rules="[
               {
@@ -105,6 +106,15 @@
               },
             ]"
           >
+            <template v-slot:label>
+              <span class="label-tips" @click="urlTips">
+                <p>{{$t(`editorPage.subConfig.basic.url.label`)}}</p>
+                <span class="tips">
+                  <span>{{$t(`editorPage.subConfig.basic.url.tips.label`)}}</span>
+                  <!-- <nut-icon name="tips"></nut-icon> -->
+                </span>
+              </span>
+            </template>
             <nut-textarea
               class="textarea-wrapper"
               @blur="customerBlurValidate('url')"
@@ -134,6 +144,12 @@
               全屏编辑
               <!-- 测试 后续再改效果 -->
             </button>
+            <span class="button-tips" @click="contentTips">
+                <span class="tips">
+                  <span>{{$t(`editorPage.subConfig.basic.url.tips.label`)}}</span>
+                  <!-- <nut-icon name="tips"></nut-icon> -->
+                </span>
+              </span>
             <div style="margin-left: -15px; margin-right: -15px;max-height: 60vh;overflow: auto;">
               <cmView :isReadOnly="false" id="SubEditer"/>
             </div>
@@ -781,6 +797,30 @@ const urlValidator = (val: string): Promise<boolean> => {
         lockScroll: false,
       });
   };
+  const urlTips = () => {
+    Dialog({
+        title: t('editorPage.subConfig.basic.url.tips.title'),
+        content: t('editorPage.subConfig.basic.url.tips.content'),
+        popClass: 'auto-dialog',
+        textAlign: 'left',
+        okText: 'OK',
+        noCancelBtn: true,
+        closeOnPopstate: true,
+        lockScroll: false,
+      });
+  };
+  const contentTips = () => {
+    Dialog({
+        title: t('editorPage.subConfig.basic.content.tips.title'),
+        content: t('editorPage.subConfig.basic.content.tips.content'),
+        popClass: 'auto-dialog',
+        textAlign: 'left',
+        okText: 'OK',
+        noCancelBtn: true,
+        closeOnPopstate: true,
+        lockScroll: false,
+      });
+  };
   const setTag = (current) => {
     tag.value = current;
   };
@@ -892,6 +932,28 @@ const urlValidator = (val: string): Promise<boolean> => {
 
 .form-block-wrapper {
   position: relative;
+  .button-tips {
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: 12px;
+    text-decoration: underline;
+    margin-left: 6px;
+  }
+  .label-tips {
+    display: inline-flex;
+    flex-direction: column;
+    cursor: pointer;
+    .tips {
+      display: inline-flex;
+      align-items: center;
+      span {
+        color: var(--primary-color);
+        text-decoration: underline;
+        font-size: 12px;
+        // color: #fa2c19;
+      }
+    }
+  }
 }
 
 .bottom-btn-wrapper {