feat: 新增分享跳转原始数据和分享展示名称

sub-store-org · Nov 8, 2024 · 79b6ace · 79b6ace
1 parent 19d9c5b
commit 79b6ace
Show file tree

Hide file tree

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

diff --git a/src/components/ShareListItem.vue b/src/components/ShareListItem.vue
@@ -32,7 +32,7 @@
         <div class="sub-item-title-wrapper">
           <!-- 分享订阅、文件名 -->
           <h3 v-if="!appearanceSetting.isSimpleMode" class="sub-item-title">
-            {{ name }}
+            {{ displayName || name }}
             <span class="tag">
               <nut-tag>{{ leftTime }}</nut-tag>
             </span>
@@ -42,7 +42,7 @@
             class="sub-item-title"
             style="color: var(--primary-text-color); font-size: 16px"
           >
-            {{ name }}
+            {{ displayName || name }}
             <span class="tag">
               <nut-tag>{{ leftTime }}</nut-tag>
             </span>
@@ -54,9 +54,9 @@
             :style="{ top: appearanceSetting.isSimpleMode ? '8px' : '0' }"
           >
             <!-- 查看 -->
-            <!-- <button class="copy-sub-link" @click.stop="onClickPreview">
-              <font-awesome-icon icon="fa-solid fa-eye" />
-            </button> -->
+            <button class="copy-sub-link" @click.stop="onClickShareLink">
+              <font-awesome-icon icon="fa-solid fa-link" />
+            </button>
             <!-- 编辑 -->
             <button class="refresh-sub-flow" @click.stop="onClickEdit">
               <font-awesome-icon icon="fa-solid fa-pen-nib" />
@@ -116,7 +116,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Dialog } from "@nutui/nutui";
+import { Dialog, Toast } from "@nutui/nutui";
 import dayjs from "dayjs";
 import { storeToRefs } from "pinia";
 import { computed, createVNode, ref } from "vue";
@@ -129,7 +129,9 @@ import { usePopupRoute } from "@/hooks/usePopupRoute";
 import { useSettingsStore } from "@/store/settings";
 import { useSubsStore } from "@/store/subs";
 import { isMobile } from "@/utils/isMobile";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const props = defineProps<{
   data: Share;
   disabled?: boolean;
@@ -152,6 +154,10 @@ const { currentUrl: host } = useHostAPI();
 const name = computed(() => {
   return props?.data?.name;
 });
+
+const displayName = computed(() => {
+  return props?.data?.displayName;
+})
 const remark = computed(() => {
   return props?.data?.remark;
 });
@@ -173,8 +179,8 @@ const createTime = computed(() =>{
 const leftTime = computed(() => {
   return props?.data?.exp
     ? dayjs(props?.data?.exp).diff(dayjs(), "second") > 0
-      ? `剩余 ${dayjs(props?.data?.exp).diff(dayjs(), "day", true).toFixed(0)} 天`
-      : "已过期"
+      ? `${t("sharePage.leftTime")} ${dayjs(props?.data?.exp).diff(dayjs(), "day", true).toFixed(0)} ${t("sharePage.createShare.unit.day")}`
+      : t("sharePage.expired")
     : 0;
 });
 
@@ -221,6 +227,35 @@ const onClickEdit = () => {
   emit("detail", props.data);
 };
 
+const getOneShareOrigin = async (keyName: string) => {
+  switch (type.value) {
+    case "col":
+      return subsStore.getOneCollection(keyName);
+    case "sub":
+      return subsStore.getOneSub(keyName);
+    case "file":
+      return subsStore.getOneFile(keyName);
+  }
+}
+const onClickShareLink = async () => {
+  console.log("props", props);
+  const keyName = encodeURIComponent(name.value);
+  const item = await getOneShareOrigin(keyName);
+  console.log('item', item)
+  if (!item) {
+    return Toast.text(t("sharePage.noOriginalTips"));
+  }
+  if (type.value === 'file') {
+    router.push(`/edit/files/${keyName}`);
+  }
+  if (type.value === 'sub') {
+    router.push(`/edit/subs/${keyName}`);
+  }
+  if (type.value === 'col') {
+    router.push(`/edit/collections/${keyName}`);
+  }
+};
+
 const onClickDelete = () => {
   swipeController();
   Dialog({

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -707,6 +707,9 @@ export default {
   },
   sharePage: {
     title: "Share",
+    noOriginalTips: "Failed to jump, check if the source data has been deleted.",
+    leftTime: "Remaining time",
+    expired: "Expired",
     createShare: {
       expiresValue: {
         label: "Valid for",
@@ -725,6 +728,10 @@ export default {
         label: "Remarks",
         placeholder: "The remarks",
       },
+      displayName: {
+        label: "显示名称",
+        placeholder: "输入展示的名称",
+      },
       shareUrl: {
         label: "Share Link",
         placeholder: "Share Link",

diff --git a/src/locales/zh.ts b/src/locales/zh.ts
@@ -697,6 +697,9 @@ export default {
   },
   sharePage: {
     title: "分享编辑",
+    noOriginalTips: "跳转失败, 检查源数据是否已删除",
+    leftTime: "剩余",
+    expired: "已过期",
     createShare: {
       expiresValue: {
         label: "有效期时长",
@@ -715,6 +718,10 @@ export default {
         label: "备注",
         placeholder: "请输入备注",
       },
+      displayName: {
+        label: "显示名称",
+        placeholder: "输入展示的名称",
+      },
       shareUrl: {
         label: "分享链接",
         placeholder: "请点击按钮创建分享链接"

diff --git a/src/plugin/awesomeIcon.ts b/src/plugin/awesomeIcon.ts
@@ -30,7 +30,8 @@ import {
   faICursor,
   faFileImport,
   faFileExport,
-  faShareNodes
+  faShareNodes,
+  faLink
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(faFileImport);
@@ -63,3 +64,4 @@ library.add(faEraser);
 library.add(faT);
 library.add(faICursor);
 library.add(faShareNodes);
+library.add(faLink);
diff --git a/src/types/store/subsStore.d.ts b/src/types/store/subsStore.d.ts
@@ -84,6 +84,7 @@ interface Flow {
 interface Share {
   type?: 'sub' | 'col'| 'file',
   name?: string;
+  displayName?: string | null;
   remark?: string | null;
   token?: string | null;
   expiresIn?: string | null;

diff --git a/src/views/File.vue b/src/views/File.vue
@@ -268,6 +268,7 @@ const sharePopupVisible = ref(false);
 const handleShare = (element, type) => {
   console.log("share", element);
   shareData.value = {
+    displayName: element.displayName || "",
     name: element.name,
     type: type as "file",
   };

diff --git a/src/views/Sub.vue b/src/views/Sub.vue
@@ -345,6 +345,7 @@ const sharePopupVisible = ref(false);
 const handleShare = (element, type) => {
   console.log("share", element);
   shareData.value = {
+    displayName: element.displayName || "",
     name: element.name,
     type: type as "col" | "sub",
   };

diff --git a/src/views/share/SharePopup.vue b/src/views/share/SharePopup.vue
@@ -74,6 +74,15 @@
                 @clear="clearToken"
               ></nut-input>
             </nut-form-item>
+            <nut-form-item :label="$t(`sharePage.createShare.displayName.label`)" prop="displayName">
+              <nut-input
+                v-model="form.displayName"
+                :border="false"
+                :placeholder="$t(`sharePage.createShare.displayName.placeholder`)"
+                type="text"
+                max-length="100"
+              ></nut-input>
+            </nut-form-item>
             <nut-form-item
               :label="$t(`sharePage.createShare.remark.label`)"
               prop="remark"
@@ -199,6 +208,15 @@
                   @clear="clearToken"
                 ></nut-input>
               </nut-form-item>
+              <nut-form-item :label="$t(`sharePage.createShare.displayName.label`)" prop="displayName">
+                <nut-input
+                  v-model="form.displayName"
+                  :border="false"
+                  :placeholder="$t(`sharePage.createShare.displayName.placeholder`)"
+                  type="text"
+                  max-length="100"
+                ></nut-input>
+              </nut-form-item>
             </template>
             <nut-form-item
               :label="$t(`sharePage.createShare.shareUrl.label`)"
@@ -322,6 +340,7 @@ const form = reactive({
   remark: "",
   token: "",
   name: "",
+  displayName: "",
   type: "",
   shareUrl: "",
 });
@@ -373,6 +392,7 @@ watchEffect(() => {
     form.remark = props.data?.remark;
     form.shareUrl = props.data?.shareUrl;
     form.name = props.data?.name;
+    form.displayName = props.data?.displayName;
     form.type = props.data?.type;
   } else {
     form.expiresValue = "";
@@ -382,17 +402,13 @@ watchEffect(() => {
     form.token = "";
     form.shareUrl = "";
     form.name = props.data?.name;
+    form.displayName = props.data?.displayName;
     form.type = props.data?.type;
   }
 });
 const isCreateShareLinkSuccess = ref(false);
 const isVisible = ref(props.visible);
 const sharePopupTitle = computed(() => {
-  if (props.action === "edit") {
-    return form.name
-      ? `${t("sharePage.title")}-${form.name}`
-      : `${t("sharePage.title")}`;
-  }
   return `${t("sharePage.title")}`;
 });
 const expiresUnitList = computed(() => [
@@ -523,6 +539,7 @@ const handleCreateShare = async () => {
     payload: {
       type: typeMap[form.type] as "sub" | "col" | "file",
       name: form.name,
+      displayName: form.displayName || "",
       remark: form.remark || "",
     },
     options: {