From 1a733843813fbda9da4e044176505ac6097d127d Mon Sep 17 00:00:00 2001
From: hsingyin <hsingyin@foxmail.com>
Date: Fri, 1 Nov 2024 11:42:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A1=A5=E5=85=85=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=88=86=E4=BA=AB=E5=92=8C=E7=9B=B8=E5=85=B3=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FileListItem.vue |  21 ++-
 src/components/SubListItem.vue  | 223 ++++++++++++++++++++------------
 src/locales/en.ts               |  14 +-
 src/locales/zh.ts               |  14 +-
 src/views/File.vue              |  17 +++
 src/views/Sub.vue               |   1 +
 src/views/share/SharePopup.vue  | 209 ++++++++++++++++++++++--------
 7 files changed, 353 insertions(+), 146 deletions(-)

diff --git a/src/components/FileListItem.vue b/src/components/FileListItem.vue
index 902025158..e493618a4 100644
--- a/src/components/FileListItem.vue
+++ b/src/components/FileListItem.vue
@@ -48,6 +48,13 @@
             style="position: relative"
             :style="{ top: appearanceSetting.isSimpleMode ? '8px' : '0' }"
           >
+            <button
+              v-if="shareBtnVisible"
+              class="share-sub-link"
+              @click.stop="onClickShareLink"
+            >
+              <font-awesome-icon icon="fa-solid fa-share-nodes" />
+            </button>
             <button class="copy-sub-link" @click.stop="onClickCopyLink">
               <font-awesome-icon icon="fa-solid fa-clone" />
             </button>
@@ -190,11 +197,13 @@
   import { useI18n } from 'vue-i18n';
   import { useRouter, useRoute } from 'vue-router';
   import { useHostAPI } from '@/hooks/useHostAPI';
+  import { useBackend } from "@/hooks/useBackend";
 
   const { copy, isSupported } = useClipboard();
   const { toClipboard: copyFallback } = useV3Clipboard();
 
   const { t } = useI18n();
+  const { env } = useBackend();
 
   const props = defineProps<{
     type: 'sub' | 'collection' | 'file';
@@ -374,7 +383,17 @@
 
   const { showNotify } = useAppNotifyStore();
   const { currentUrl: host } = useHostAPI();
+  const emit = defineEmits(["share"]);
 
+  const shareBtnVisible = computed(() => {
+    return env.value?.feature?.share;
+  });
+  const onClickShareLink = async () => {
+    console.log('props', props)
+    const type = props.type;
+    const data = props.file;
+    emit("share", data, type);
+  };
   const onClickCopyLink = async () => {
     const path = `/api/file/${encodeURIComponent(name)}`;
     const url = `${host.value}${path}`;
@@ -441,7 +460,7 @@
           font-size: 16px;
           color: var(--primary-text-color);
         }
-
+        .share-sub-link,
         .copy-sub-link,
         .refresh-sub-flow {
           background-color: transparent;
diff --git a/src/components/SubListItem.vue b/src/components/SubListItem.vue
index 6fd9a5d30..7e3420df1 100644
--- a/src/components/SubListItem.vue
+++ b/src/components/SubListItem.vue
@@ -1,23 +1,31 @@
 <template>
   <!-- 滚动内容 -->
   <nut-swipe
-    class="sub-item-swipe"
     ref="swipe"
+    class="sub-item-swipe"
+    :disabled="props.disabled"
     @close="setIsMoveClose()"
     @open="setIsMoveOpen()"
     @click="onClickPreviews()"
-    :disabled="props.disabled"
   >
     <div
       class="sub-item-wrapper"
       :style="{ padding: appearanceSetting.isSimpleMode ? '9px' : '16px' }"
     >
-      <div v-if="appearanceSetting.subProgressStyle === 'background' && typeof flow === 'object' && flow.progress" class="progress" :style="{width: flow.progress*100+'%'}"></div>
+      <div
+        v-if="
+          appearanceSetting.subProgressStyle === 'background' &&
+          typeof flow === 'object' &&
+          flow.progress
+        "
+        class="progress"
+        :style="{ width: `${flow.progress * 100}%` }"
+      ></div>
       <!-- compareSub -->
       <div
-        @click.stop="compareSub"
         class="sub-img-wrappers"
         :style="{ 'margin-top': appearanceSetting.isSimpleMode ? '5px' : '0' }"
+        @click.stop="compareSub"
       >
         <div v-if="appearanceSetting.isIconColor">
           <nut-avatar
@@ -46,11 +54,19 @@
         <div class="sub-item-title-wrapper">
           <h3 v-if="!appearanceSetting.isSimpleMode" class="sub-item-title">
             {{ displayName || name }}
-            <span class="tag" v-for="i in tag" :key="i"><nut-tag>{{ i }}</nut-tag></span>
+            <span v-for="i in tag" :key="i" class="tag">
+              <nut-tag>{{ i }}</nut-tag>
+            </span>
           </h3>
-          <h3 v-else class="sub-item-title" style="color: var(--primary-text-color); font-size: 16px">
+          <h3
+            v-else
+            class="sub-item-title"
+            style="color: var(--primary-text-color); font-size: 16px"
+          >
             {{ displayName || name }}
-            <span class="tag" v-for="i in tag" :key="i"><nut-tag>{{ i }}</nut-tag></span>
+            <span v-for="i in tag" :key="i" class="tag">
+              <nut-tag>{{ i }}</nut-tag>
+            </span>
           </h3>
 
           <!-- onClickCopyLink 拷贝 -->
@@ -58,16 +74,24 @@
             style="position: relative"
             :style="{ top: appearanceSetting.isSimpleMode ? '8px' : '0' }"
           >
-            <button v-if="shareBtnVisible" class="share-sub-link" @click.stop="onClickShareLink">
+            <button
+              v-if="shareBtnVisible"
+              class="share-sub-link"
+              @click.stop="onClickShareLink"
+            >
               <font-awesome-icon icon="fa-solid fa-share-nodes" />
             </button>
             <button class="copy-sub-link" @click.stop="onClickCopyLink">
               <font-awesome-icon icon="fa-solid fa-clone" />
             </button>
             <button
+              v-if="
+                props.type === 'sub' &&
+                (!appearanceSetting.isSimpleMode ||
+                  appearanceSetting.isSimpleReicon)
+              "
               class="refresh-sub-flow"
               @click.stop="onClickRefresh"
-              v-if="props.type === 'sub' && (!appearanceSetting.isSimpleMode || appearanceSetting.isSimpleReicon)"
             >
               <font-awesome-icon icon="fa-solid fa-arrow-rotate-right" />
             </button>
@@ -80,15 +104,15 @@
             >
               <font-awesome-icon icon="fa-solid fa-pen-nib" />
             </button>
-            <button class="refresh-sub-flow" @click.stop="onClickEdit" v-else>
+            <button v-else class="refresh-sub-flow" @click.stop="onClickEdit">
               <font-awesome-icon icon="fa-solid fa-pen-nib" />
             </button>
 
             <button
-              class="copy-sub-link"
-              @click.stop="swipeController"
               v-if="!isMobile()"
               ref="moreAction"
+              class="copy-sub-link"
+              @click.stop="swipeController"
             >
               <font-awesome-icon icon="fa-solid fa-angles-right" />
             </button>
@@ -125,7 +149,7 @@
             </template>
             <template v-else-if="typeof flow === 'object'">
               <span v-if="flow.secondLine" style="font-weight: normal">
-                {{ flow.firstLine + ' | ' + flow.secondLine }}
+                {{ `${flow.firstLine} | ${flow.secondLine}` }}
               </span>
               <span v-else style="font-weight: normal">
                 {{ flow.firstLine }}
@@ -152,9 +176,14 @@
         </nut-button>
       </div>
       <div v-if="type === 'sub'" class="sub-item-swipe-btn-wrapper">
-        <a :href=" `${host}/api/${props.type}/${encodeURIComponent(name)}?raw=1` " target="_blank"><nut-button shape="square" type="success" class="sub-item-swipe-btn">
-          <font-awesome-icon icon="fa-solid fa-file-export" />
-        </nut-button></a>
+        <a
+          :href="`${host}/api/${props.type}/${encodeURIComponent(name)}?raw=1`"
+          target="_blank"
+        >
+          <nut-button shape="square" type="success" class="sub-item-swipe-btn">
+            <font-awesome-icon icon="fa-solid fa-file-export" />
+          </nut-button>
+        </a>
       </div>
       <!-- preview -->
       <!-- <div class="sub-item-swipe-btn-wrapper">
@@ -187,9 +216,14 @@
         </nut-button>
       </div>
       <div v-if="type === 'sub'" class="sub-item-swipe-btn-wrapper">
-        <a :href=" `${host}/api/${props.type}/${encodeURIComponent(name)}?raw=1` " target="_blank"><nut-button shape="square" type="success" class="sub-item-swipe-btn">
-          <font-awesome-icon icon="fa-solid fa-file-export" />
-        </nut-button></a>
+        <a
+          :href="`${host}/api/${props.type}/${encodeURIComponent(name)}?raw=1`"
+          target="_blank"
+        >
+          <nut-button shape="square" type="success" class="sub-item-swipe-btn">
+            <font-awesome-icon icon="fa-solid fa-file-export" />
+          </nut-button>
+        </a>
       </div>
       <div class="sub-item-swipe-btn-wrapper">
         <nut-button
@@ -207,41 +241,35 @@
   <CompareTable
     v-if="compareTableIsVisible"
     :name="name"
-    :compareData="compareData"
+    :compare-data="compareData"
     @closeCompare="closeCompare"
   />
 </template>
 
 <script lang="ts" setup>
+import { Dialog, Toast } from "@nutui/nutui";
+import { useClipboard } from "@vueuse/core";
+import dayjs from "dayjs";
+import { storeToRefs } from "pinia";
+import { computed, createVNode, ref, toRaw } from "vue";
+import useV3Clipboard from "vue-clipboard3";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
+
 import { useSubsApi } from "@/api/subs";
 import logoIcon from "@/assets/icons/logo.png";
 import logoRedIcon from "@/assets/icons/logo-red.png";
 import PreviewPanel from "@/components/PreviewPanel.vue";
+import { useBackend } from "@/hooks/useBackend";
+import { useHostAPI } from "@/hooks/useHostAPI";
 import { usePopupRoute } from "@/hooks/usePopupRoute";
 import { useAppNotifyStore } from "@/store/appNotify";
 import { useGlobalStore } from "@/store/global";
+import { useSettingsStore } from "@/store/settings";
 import { useSubsStore } from "@/store/subs";
-import { useSettingsStore } from '@/store/settings';
 import { getString } from "@/utils/flowTransfer";
 import { isMobile } from "@/utils/isMobile";
 import CompareTable from "@/views/CompareTable.vue";
-import { Dialog, Toast } from "@nutui/nutui";
-import { useClipboard } from "@vueuse/core";
-import dayjs from "dayjs";
-import { storeToRefs } from "pinia";
-import { computed, createVNode, ref, toRaw } from "vue";
-import useV3Clipboard from "vue-clipboard3";
-import { useI18n } from "vue-i18n";
-import { useRouter, useRoute } from "vue-router";
-import { useHostAPI } from "@/hooks/useHostAPI";
-import { useBackend } from "@/hooks/useBackend";
-
-const { copy, isSupported } = useClipboard();
-const { toClipboard: copyFallback } = useV3Clipboard();
-
-const { t } = useI18n();
-
-const { env } = useBackend()
 
 const props = defineProps<{
   type: "sub" | "collection";
@@ -249,6 +277,14 @@ const props = defineProps<{
   collection?: Collection;
   disabled?: boolean;
 }>();
+const emit = defineEmits(["update:visible", "share"]);
+const { copy, isSupported } = useClipboard();
+const { toClipboard: copyFallback } = useV3Clipboard();
+
+const { t } = useI18n();
+
+const { env } = useBackend();
+
 // console.log('props.disabled')
 // console.log(props.disabled)
 let scrollTop = 0;
@@ -292,7 +328,7 @@ const remarkText = computed(() => {
   } else {
     return "";
   }
-})
+});
 const { flows } = storeToRefs(subsStore);
 const icon = computed(() => {
   return appearanceSetting.value.isDefaultIcon ? logoIcon : logoRedIcon;
@@ -307,33 +343,33 @@ const collectionDetail = computed(() => {
       const sub = subsStore.getOneSub(name);
       return sub?.displayName || sub?.["display-name"] || sub.name;
     });
-    if(nameList.length === 0) {
-      return `${t("subPage.collectionItem.containTag")}: ${subTags.join(
-        ", "
-      )}`;
+    if (nameList.length === 0) {
+      return `${t("subPage.collectionItem.containTag")}: ${subTags.join(", ")}`;
     }
-    if(subTags.length === 0) {
+    if (subTags.length === 0) {
       return `${t("subPage.collectionItem.contain")}: ${displayNameList.join(
-        ", "
+        ", ",
       )}`;
     }
     return `${t("subPage.collectionItem.containTag")}: ${subTags.join(
-        ", "
-      )} | ${t("subPage.collectionItem.contain")}: ${displayNameList.join(
-      ", "
-    )}`;
+      ", ",
+    )} | ${t("subPage.collectionItem.contain")}: ${displayNameList.join(", ")}`;
   }
 });
 
 const flow = computed(() => {
   if (props.type === "sub") {
     const urlList = Object.keys(flows.value);
-    const localOnly = props.sub.source === 'local' && !['localFirst', 'remoteFirst'].includes(props.sub.mergeSources)
+    const localOnly =
+      props.sub.source === "local" &&
+      !["localFirst", "remoteFirst"].includes(props.sub.mergeSources);
     if (localOnly && !props.sub.subUserinfo) return t("subPage.subItem.local");
     if (isFlowFetching.value && !urlList.includes(props.sub.url))
       return t("subPage.subItem.loading");
 
-    const target = toRaw(flows.value[props.sub.url] || flows.value[props.sub.name]);
+    const target = toRaw(
+      flows.value[props.sub.url] || flows.value[props.sub.name],
+    );
     if (!target) {
       return {
         firstLine: t("subPage.subItem.noRecord"),
@@ -359,55 +395,72 @@ const flow = computed(() => {
         total,
         usage: { upload, download },
       } = target.data;
-      if(target.hideExpire) expires = undefined;
+      if (target.hideExpire) expires = undefined;
       let progress = 0;
       try {
-        progress = 1 - (upload + download) / total
-        progress = parseFloat(progress.toFixed(2))
-      } catch (e) {
-      }
+        progress = 1 - (upload + download) / total;
+        progress = Number.parseFloat(progress.toFixed(2));
+      } catch (e) {}
       if (!(progress > 0)) {
-        progress = 0
+        progress = 0;
       }
       let secondLine: string;
       if (appearanceSetting.value.isSimpleMode) {
-        secondLine = remainingDays ? `${remainingDays}${t(
-          "subPage.subItem.remainingDaysUnit"
-        )}` : ''
+        secondLine = remainingDays
+          ? `${remainingDays}${t("subPage.subItem.remainingDaysUnit")}`
+          : "";
         const expiresInfo = !expires
           ? ""
           : `${dayjs.unix(expires).format("YYYY-MM-DD")}`;
         if (expiresInfo) {
-          secondLine = secondLine ? `${secondLine} | ${expiresInfo}` : expiresInfo;
+          secondLine = secondLine
+            ? `${secondLine} | ${expiresInfo}`
+            : expiresInfo;
         }
         return {
-          firstLine: `${getString(target.showRemaining ? (total - upload - download) : (upload + download), total, "B")}`,
+          firstLine: `${getString(
+            target.showRemaining
+              ? total - upload - download
+              : upload + download,
+            total,
+            "B",
+          )}`,
           secondLine,
-          progress
+          progress,
         };
       } else {
-        secondLine = remainingDays ? `${t("subPage.subItem.remainingDays")}: ${remainingDays}${t(
-          "subPage.subItem.remainingDaysUnit"
-        )}` : ''
+        secondLine = remainingDays
+          ? `${t("subPage.subItem.remainingDays")}: ${remainingDays}${t(
+              "subPage.subItem.remainingDaysUnit",
+            )}`
+          : "";
         let expiresInfo = !expires
           ? t("subPage.subItem.noExpiresInfo")
           : `${t("subPage.subItem.expires")}: ${dayjs
               .unix(expires)
               .format("YYYY-MM-DD")}`;
         if (target.hideExpire) {
-          expiresInfo = ''
+          expiresInfo = "";
         }
         if (expiresInfo) {
-          secondLine = secondLine ? `${secondLine} | ${expiresInfo}` : expiresInfo;
+          secondLine = secondLine
+            ? `${secondLine} | ${expiresInfo}`
+            : expiresInfo;
         }
         return {
-          firstLine: `${t(target.showRemaining ? "subPage.subItem.showRemainingFlow" : "subPage.subItem.flow")}: ${getString(
-            target.showRemaining ? (total - upload - download) : (upload + download),
+          firstLine: `${t(
+            target.showRemaining
+              ? "subPage.subItem.showRemainingFlow"
+              : "subPage.subItem.flow",
+          )}: ${getString(
+            target.showRemaining
+              ? total - upload - download
+              : upload + download,
             total,
-            "B"
+            "B",
           )}`,
           secondLine,
-          progress
+          progress,
         };
       }
     } else if (target?.status === "failed") {
@@ -452,7 +505,7 @@ const compareSub = async () => {
   });
   const res = await useSubsApi().compareSub(
     props.type,
-    props.sub ?? props.collection
+    props.sub ?? props.collection,
   );
   if (res?.data?.status === "success") {
     compareData.value = res.data.data;
@@ -480,14 +533,14 @@ const swipeController = () => {
   if (swipeIsOpen.value) {
     swipe.value.close();
     swipeIsOpen.value = false;
-    if(moreAction.value) moreAction.value.style.transform = "rotate(0deg)";
+    if (moreAction.value) moreAction.value.style.transform = "rotate(0deg)";
   } else {
     if (appearanceSetting.value.isLeftRight) {
       swipe.value.open("right");
     } else {
       swipe.value.open("left");
       swipeIsOpen.value = true;
-      if(moreAction.value) moreAction.value.style.transform = "rotate(180deg)";
+      if (moreAction.value) moreAction.value.style.transform = "rotate(180deg)";
     }
   }
 };
@@ -518,7 +571,7 @@ const setTimeoutTF = () => {
 
 const onClickPreviews = () => {
   if (ismove.value) return;
-  swipeController()
+  swipeController();
   Dialog({
     title: t("subPage.previewTitle"),
     content: createVNode(PreviewPanel, {
@@ -528,7 +581,7 @@ const onClickPreviews = () => {
       notify: t("subPage.copyNotify.succeed"),
       tipsTitle: t(`subPage.panel.tips.title`),
       tipsContent: `${t("subPage.panel.tips.content")}\n${t(
-        "syncPage.addArtForm.includeUnsupportedProxy.tips.content"
+        "syncPage.addArtForm.includeUnsupportedProxy.tips.content",
       )}`,
       desc: t(`subPage.panel.tips.desc`),
       tipsOkText: t(`subPage.panel.tips.ok`),
@@ -536,7 +589,7 @@ const onClickPreviews = () => {
     }),
     onOpened: () => swipe.value.close(),
     popClass: "auto-dialog",
-    // @ts-ignore-next-line  组件库bug，类型错误但功能正常
+    // @ts-expect-error-next-line  组件库bug，类型错误但功能正常
     closeOnClickOverlay: true,
     noOkBtn: true,
     noCancelBtn: true,
@@ -544,16 +597,16 @@ const onClickPreviews = () => {
     lockScroll: false,
   });
 };
-const emit = defineEmits(["update:visible", "share"]);
-
 const shareBtnVisible = computed(() => {
   return env.value?.feature?.share;
 });
 const onClickShareLink = async () => {
-  emit("share", props.sub, props.type);
+  const type = props.type;
+  const data = props.type === "sub" ? props.sub : props.collection;
+  emit("share", data, type);
 };
 const onClickCopyConfig = async () => {
-  swipeController()
+  swipeController();
   let data: Sub | Collection;
   switch (props.type) {
     case "sub":
@@ -566,7 +619,7 @@ const onClickCopyConfig = async () => {
   data.name += `-copy${~~(Math.random() * 10000)}`;
 
   Toast.loading(t("subPage.copyConfigNotify.loading"), { id: "copyConfig" });
-  await subsApi.createSub(props.type + "s", data);
+  await subsApi.createSub(`${props.type}s`, data);
   await subsStore.fetchSubsData();
   Toast.hide("copyConfig");
   showNotify({ title: t("subPage.copyConfigNotify.succeed") });
@@ -598,13 +651,13 @@ const onClickEdit = () => {
 };
 
 const onClickDelete = () => {
-  swipeController()
+  swipeController();
   Dialog({
     title: t("subPage.deleteSub.title"),
     content: createVNode(
       "span",
       {},
-      t("subPage.deleteSub.desc", { displayName })
+      t("subPage.deleteSub.desc", { displayName }),
     ),
     onCancel: () => {},
     onOk: onDeleteConfirm,
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 1525206a1..225cf8bcd 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -23,12 +23,22 @@ export default {
       expiresValue: 'Valid for',
       expiresValueEmpty: 'Valid for cannot be empty',
       expiresValuePlaceholder: 'Enter valid for',
+      expiresValueRegex: 'Please enter a number within the range of 0.01 to 99999.99.',
       expiresUnit: 'Validity unit',
       token: 'Custom Token',
-      tokenPlaceholder: 'Enter custom token',
+      tokenPlaceholder: 'default random Token',
       remark: 'Remark',
       remarkPlaceholder: 'Enter remark',
-      createShare: 'Create Share Link',
+      shareUrl: 'Share Link',
+      shareUrlPlaceholder: 'Please click the button to create a sharing link',
+      tipsTitle: 'Share Link Tips',
+      shareUrlSaveTips: 'Please note to save the current generated sharing link.',
+      userKnow: 'OK',
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      createShare: 'Create',
+      copyShare: 'Copy',
+      copyShareSuccessTips: 'Copy share link success!',
       createShareSuccessTips: 'Create share link success!',
       unit: {
         day: 'Day',
diff --git a/src/locales/zh.ts b/src/locales/zh.ts
index 9ea3a77a4..3b2059dec 100644
--- a/src/locales/zh.ts
+++ b/src/locales/zh.ts
@@ -23,13 +23,23 @@ export default {
       expiresValue: '有效期时长',
       expiresValueEmpty: '有效期时长不可为空',
       expiresValuePlaceholder: '请输入有效期时长',
+      expiresValueRegex: '请输入0.01-99999.99范围内的数字',
       expiresUnit: '有效期单位',
       token: '自定义Token',
-      tokenPlaceholder: '请输入自定义Token',
+      tokenPlaceholder: '默认后端随机Token',
       remark: '备注',
       remarkPlaceholder: '请输入备注',
+      shareUrl: '分享链接',
+      shareUrlPlaceholder: '请点击按钮创建分享链接',
+      tipsTitle: '温馨提示',
+      shareUrlSaveTips: '请注意保存当前生成的分享链接',
+      userKnow: '我知道了',
+      confirm: '确定',
+      cancel: '返回',
       createShare: '创建分享',
-      createShareSuccessTips: '创建分享成功！\n请导入代理工具使用',
+      copyShare: '复制链接',
+      copyShareSuccessTips: '复制分享链接成功！',
+      createShareSuccessTips: '创建分享成功！',
       unit: {
         day: '天',
         month: '月',
diff --git a/src/views/File.vue b/src/views/File.vue
index 23a538594..cfdbc7310 100644
--- a/src/views/File.vue
+++ b/src/views/File.vue
@@ -79,6 +79,7 @@
                 :file="element"
                 type="file"
                 :disabled="swipeDisabled"
+                @share="handleShare"
               />
             </div>
           </template>
@@ -129,6 +130,11 @@
         <font-awesome-icon icon="fa-solid fa-arrow-up-right-from-square" />
       </a>
     </div>
+    <SharePopup
+      v-model:visible="sharePopupVisible"
+      :data="shareData"
+      :type="shareDataType"
+    />
   </div>
 </template>
 
@@ -136,6 +142,7 @@
 import { storeToRefs } from "pinia";
 import { ref, toRaw } from "vue";
 import draggable from "vuedraggable";
+import SharePopup from "./share/SharePopup.vue";
 
 import { useAppNotifyStore } from "@/store/appNotify";
 // import { Dialog, Toast } from '@nutui/nutui';
@@ -255,6 +262,16 @@ const handleDragEnd = (dataValue: any) => {
   }
   swipeDisabled.value = false;
 };
+
+const shareData = ref(null);
+const shareDataType = ref(null);
+const sharePopupVisible = ref(false);
+const handleShare = (element, type) => {
+  console.log("share", element);
+  shareData.value = element;
+  shareDataType.value = type;
+  sharePopupVisible.value = true;
+};
 </script>
 
 <style lang="scss">
diff --git a/src/views/Sub.vue b/src/views/Sub.vue
index 0e53a97a9..e137c1ba4 100644
--- a/src/views/Sub.vue
+++ b/src/views/Sub.vue
@@ -186,6 +186,7 @@
                 :collection="element"
                 type="collection"
                 :disabled="swipeDisabled"
+                @share="handleShare"
               />
             </div>
           </template>
diff --git a/src/views/share/SharePopup.vue b/src/views/share/SharePopup.vue
index d8b96691c..3ae34de22 100644
--- a/src/views/share/SharePopup.vue
+++ b/src/views/share/SharePopup.vue
@@ -6,14 +6,15 @@
     position="center"
     :style="{
       width: `90%`,
-      height: `50%`,
+      minHeight: `50%`,
       padding: '20px 12px 0 12px',
       backgroundColor: 'var(--background-color)',
     }"
     :lock-scroll="true"
     :safe-area-inset-bottom="true"
     close-icon="close-little"
-    z-index="11000"
+    z-index="1100"
+    :close-on-click-overlay="false"
     closeable
     round
     @close="close"
@@ -26,18 +27,31 @@
             :label="$t(`globalNotify.share.expiresValue`)"
             prop="expiresValue"
             required
-            :rules="[{ required: true, message: $t(`globalNotify.share.expiresValueEmpty`) }]"
+            :rules="[
+              {
+                required: true,
+                message: $t(`globalNotify.share.expiresValueEmpty`),
+              },
+              {
+                validator: validateExpiresValue,
+                message: $t(`globalNotify.share.expiresValueRegex`),
+              },
+            ]"
           >
             <nut-input
               v-model="form.expiresValue"
               :border="false"
-              text-align="right"
               :placeholder="$t(`globalNotify.share.expiresValuePlaceholder`)"
               type="number"
+              max-length="8"
+              format-trigger="onBlur"
               @blur="customerBlurValidate('expiresValue')"
             ></nut-input>
           </nut-form-item>
-          <nut-form-item :label="$t(`globalNotify.share.expiresUnit`)">
+          <nut-form-item
+            :label="$t(`globalNotify.share.expiresUnit`)"
+            prop="expiresUnit"
+          >
             <nut-radiogroup v-model="form.expiresUnit" direction="horizontal">
               <nut-radio
                 v-for="(item, index) in expiresUnitList"
@@ -48,32 +62,68 @@
               </nut-radio>
             </nut-radiogroup>
           </nut-form-item>
-          <nut-form-item :label="$t(`globalNotify.share.token`)">
+          <nut-form-item :label="$t(`globalNotify.share.token`)" prop="token">
             <nut-input
               v-model="form.token"
               :border="false"
-              text-align="right"
               :placeholder="$t(`globalNotify.share.tokenPlaceholder`)"
               type="text"
+              max-length="100"
               clearable
               @clear="clearToken"
             ></nut-input>
           </nut-form-item>
-          <nut-form-item :label="$t(`globalNotify.share.remark`)">
-            <nut-input
+          <nut-form-item :label="$t(`globalNotify.share.remark`)" prop="remark">
+            <nut-textarea
               v-model="form.remark"
+              class="nut-input-text"
               :border="false"
-              text-align="right"
               :placeholder="$t(`globalNotify.share.remarkPlaceholder`)"
               type="text"
-              clearable
-              @clear="clearRemark"
-            ></nut-input>
+              input-align="left"
+              rows="1"
+              :autosize="{ maxHeight: 140 }"
+              max-length="100"
+            />
+          </nut-form-item>
+          <nut-form-item
+            v-if="form.shareUrl"
+            :label="$t(`globalNotify.share.shareUrl`)"
+            prop="shareUrl"
+          >
+            <nut-textarea
+              v-model="form.shareUrl"
+              class="nut-input-text"
+              :border="false"
+              :placeholder="$t(`globalNotify.share.shareUrlPlaceholder`)"
+              type="text"
+              input-align="left"
+              rows="3"
+              :autosize="{ maxHeight: 140 }"
+              max-length="100"
+            />
           </nut-form-item>
-          
           <div class="btn-wrapper">
+            <!-- <nut-button
+              class="btn"
+              type="default"
+              plain
+              shape="round"
+              @click="handleCancel"
+            >
+              {{ $t("globalNotify.share.cancel") }}
+            </nut-button> -->
+            <nut-button
+              class="btn"
+              type="default"
+              shape="round"
+              :disabled="form.shareUrl ? false : true"
+              @click="handleCopyShare"
+            >
+              {{ $t("globalNotify.share.copyShare") }}
+            </nut-button>
             <nut-button
-              class="submit-btn btn"
+              class="btn"
               type="primary"
               shape="round"
               @click="handleCreateShare"
@@ -88,7 +138,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
+import { reactive, ref, watch, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAppNotifyStore } from "@/store/appNotify";
 import { useSubsApi } from "@/api/subs";
@@ -96,7 +146,7 @@ import { useHostAPI } from "@/hooks/useHostAPI";
 import { useGlobalStore } from "@/store/global";
 import { useClipboard } from "@vueuse/core";
 import useV3Clipboard from "vue-clipboard3";
-import { Toast } from "@nutui/nutui";
+import { Dialog, Toast } from "@nutui/nutui";
 const { copy, isSupported } = useClipboard();
 const { toClipboard: copyFallback } = useV3Clipboard();
 
@@ -120,15 +170,16 @@ const { currentUrl: host } = useHostAPI();
 const { showNotify } = useAppNotifyStore();
 
 const { t } = useI18n();
-const globalStore = useGlobalStore();
 const ruleForm = ref<any>(null);
 const form = reactive({
-  expiresValue: "30",
+  expiresValue: "",
   expiresUnit: "day",
   expiresIn: "",
   remark: "",
   token: "",
+  shareUrl: "",
 });
+const isCreateShareLinkSuccess = ref(false);
 const isVisible = ref(props.visible);
 const expiresUnitList = ref([
   {
@@ -148,13 +199,50 @@ const expiresUnitList = ref([
     value: "year",
   },
 ]);
-
-const clearRemark = () => {
+const show = () => {
+  isVisible.value = true;
+  emit("update:visible", true);
+};
+const hide = () => {
+  isVisible.value = false;
+  emit("update:visible", false);
+};
+const resetFormData = () => {
+  form.expiresValue = "";
+  form.expiresUnit = "day";
+  form.expiresIn = "";
   form.remark = "";
-}
+  form.token = "";
+  form.shareUrl = "";
+  isCreateShareLinkSuccess.value = false;
+};
 const clearToken = () => {
   form.token = "";
-}
+};
+const close = () => {
+  resetFormData();
+  hide();
+};
+const changeExpiresUnitOrValue = () => {
+  if (form.shareUrl && isCreateShareLinkSuccess.value) {
+    Dialog({
+      title: t("globalNotify.share.tipsTitle"),
+      content: t("globalNotify.share.shareUrlSaveTips"),
+      popClass: "auto-dialog",
+      okText: t("globalNotify.share.userKnow"),
+      noCancelBtn: true,
+      closeOnPopstate: true,
+      lockScroll: false,
+      onOk: () => {
+        // 标记用户准备重新生成
+        isCreateShareLinkSuccess.value = false;
+      },
+    });
+  }
+};
+const validateExpiresValue = (value: string) => {
+  return /^(?:0\.0[1-9]\d*|[1-9]\d{0,4}(?:\.\d*)?|0\.[1-9]\d*)$/.test(value);
+};
 // 失去焦点触发验证
 const customerBlurValidate = (prop: string) => {
   ruleForm.value.validate(prop);
@@ -166,16 +254,18 @@ const genExpiresIn = (expireValue: string, expireUnit: string) => {
     season: 90,
     year: 365,
   };
-  const value = parseFloat(expireValue).toFixed(2);
-  const unit = 'd';
+  const value = Number.parseFloat(expireValue).toFixed(2);
+  const unit = "d";
   const unitValue = unitMap[expireUnit];
   return `${Number(value) * unitValue}${unit}`;
-}
+};
 const handleCreateShare = async () => {
-  console.log("form", form);
-  console.log("data", props.data);
+  console.log('props.data', props.data)
   if (!form.expiresValue) {
-    return false;
+    return Toast.warn(t("globalNotify.share.expiresValueEmpty"));
+  }
+  if (!validateExpiresValue(form.expiresValue)) {
+    return Toast.warn(t("globalNotify.share.expiresValueRegex"));
   }
   const typeMap = {
     sub: "sub",
@@ -186,17 +276,18 @@ const handleCreateShare = async () => {
     payload: {
       type: typeMap[props.type] as "sub" | "col" | "file",
       name: props.data.name,
-      remark: form.remark || '',
+      remark: form.remark || "",
     },
     options: {
       expiresIn: genExpiresIn(form.expiresValue, form.expiresUnit),
     },
   };
   if (form.token) {
-    params.payload.token = form.token
+    params.payload.token = form.token;
   }
   const res = await subsApi.shareSub(params);
   if (res?.data?.status === "success") {
+    isCreateShareLinkSuccess.value = true;
     const { secret, token } = res.data.data;
     const shareUrl = `${host.value.replace(
       new RegExp(`${secret}$`),
@@ -204,16 +295,23 @@ const handleCreateShare = async () => {
     )}/share/${typeMap[props.type]}/${encodeURIComponent(
       props.data.name,
     )}?token=${encodeURIComponent(token)}`;
-    console.log("shareUrl", shareUrl);
-    if (isSupported) {
-      await copy(shareUrl);
-    } else {
-      await copyFallback(shareUrl);
-    }
-    showNotify({ title: t("subPage.copyNotify.succeed") });
-    close();
+    form.shareUrl = shareUrl;
+    showNotify({ title: t("globalNotify.share.createShareSuccessTips") });
+  } else {
+    isCreateShareLinkSuccess.value = false;
   }
 };
+const handleCopyShare = async () => {
+  if (!form.shareUrl) {
+    return;
+  }
+  if (isSupported) {
+    await copy(form.shareUrl);
+  } else {
+    await copyFallback(form.shareUrl);
+  }
+  showNotify({ title: t("globalNotify.share.copyShareSuccessTips") });
+};
 watch(
   () => props.visible,
   (newValue) => {
@@ -221,17 +319,6 @@ watch(
     console.log("newValue", newValue);
   },
 );
-const show = () => {
-  isVisible.value = true;
-  emit("update:visible", true);
-};
-const hide = () => {
-  isVisible.value = false;
-  emit("update:visible", false);
-};
-const close = () => {
-  hide();
-};
 // 暴露方法给父组件
 defineExpose({ show, hide, close });
 </script>
@@ -253,14 +340,19 @@ defineExpose({ show, hide, close });
     align-items: center;
     .share-info-form {
       width: 100%;
-      .nut-input {
-        background: transparent;
-        padding: 0;
-        color: var(--second-text-color);
-      }
-      .nut-form-item__body__tips {
+      .nut-form {
+        .nut-input {
+          background: transparent;
+          padding: 0;
+          color: var(--second-text-color);
+        }
+        :deep(.nut-form-item__body__tips) {
           text-align: left;
         }
+        :deep(.nut-textarea__textarea) {
+          text-align: left;
+        }
+      }
     }
     .btn-wrapper {
       display: flex;
@@ -268,7 +360,12 @@ defineExpose({ show, hide, close });
       align-items: center;
       padding: 20px;
       .btn {
+        flex: 1;
         border-radius: 8px;
+        margin-right: 20px;
+        &:last-child {
+          margin-right: 0;
+        }
       }
     }
   }