feat: 预览界面

Author: xream

package.json

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

src/components/PreviewPanel.vue

@@ -20,7 +20,7 @@
 
         <div class="actions">
           <a
-            :href="getUrl(platform.path)"
+            :href="getUrl(platform.path, true)"
             target="_blank"
           >
             <svg-icon
@@ -70,8 +70,9 @@
   const { copy, isSupported } = useClipboard();
   const { toClipboard: copyFallback } = useV3Clipboard();
   const { showNotify } = useAppNotifyStore();
-  const { name, type, url, general, notify, tipsTitle, tipsContent, desc,tipsCancelText, tipsOkText } = defineProps<{
+  const { name, displayName, type, url, general, notify, tipsTitle, tipsContent, desc,tipsCancelText, tipsOkText } = defineProps<{
     name: string;
+    displayName?: string;
     type: 'sub' | 'collection';
     general: string;
     notify: string;
@@ -102,21 +103,23 @@
     return `${url}${hasQueryParams ? '&' : '?'}${queryString}`;
   };
 
-  const getUrl = (path: string) => {
+  const getUrl = (path: string, preview: boolean = false) => {
     const query = {} as Record<string, string | boolean>;
     if (path !== null) {
       query.target = path;
     }
     if (includeUnsupportedProxy.value) {
       query.includeUnsupportedProxy = true;
     }
+    let previewUrl
     if (url) {
-      return buildUrlWithQuery(url, query);
+      previewUrl = buildUrlWithQuery(url, query);
     } else {
-      return `${host.value}/download/${
+      previewUrl = `${host.value}/download/${
         type === "sub" ? "" : "collection/"
         }${encodeURIComponent(name)}${Object.keys(query).length > 0 ? `?${Object.entries(query).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&')}` : ''}`; 
     }
+    return preview ? `/preview?url=${encodeURIComponent(previewUrl)}&name=${encodeURIComponent(displayName || name)}` : previewUrl
   }
   const targetCopy = async (path: string) => {
     const url = getUrl(path);

src/components/ShareListItem.vue

@@ -356,10 +356,12 @@ const onClickPreviews = () => {
   swipeController();
   const url = getShareUrl();
   console.log('url', url);
+
   Dialog({
     title: t("subPage.previewTitle"),
     content: createVNode(PreviewPanel, {
-      name,
+      name: name.value,
+      displayName: displayName.value,
       type: "share",
       url,
       general: t("subPage.panel.general"),

src/components/SubListItem.vue

@@ -656,6 +656,7 @@ const onClickPreviews = () => {
     title: t("subPage.previewTitle"),
     content: createVNode(PreviewPanel, {
       name,
+      displayName,
       type: props.type,
       general: t("subPage.panel.general"),
       notify: t("subPage.copyNotify.succeed"),

src/locales/en.ts

@@ -35,6 +35,7 @@ export default {
       editScript: "Script Edit",
       subEditor: "Subscription Editor",
       fileEditor: "File Editor",
+      preview: 'Preview',
       shareManage: "Share Manage",
       iconCollection: "Icon Collection",
       themeSetting: "Theme Setting",

src/locales/zh.ts

@@ -63,6 +63,7 @@ export default {
       editScript: '脚本编辑',
       subEditor: '订阅编辑',
       fileEditor: '文件编辑',
+      preview: '预览',
       shareManage: '分享管理',
       iconCollection: '图标仓库',
       themeSetting: '主题设置',

src/router/index.ts

@@ -11,6 +11,7 @@ import NotFound from '@/views/NotFound.vue';
 
 import File from '@/views/File.vue';
 import FileEditor from '@/views/FileEditor.vue';
+import FilePreview from '@/views/FilePreview.vue';
 // import editScript from '@/views/editCode/editScript.vue';
 import IconCollection from '@/views/icon/IconCollection.vue';
 
@@ -134,6 +135,15 @@ const router = createRouter({
         //     needNavBack: true,
         //   },
         // },
+        {
+          path: '/preview',
+          component: FilePreview,
+          meta: {
+            title: 'preview',
+            needTabBar: false,
+            needNavBack: false,
+          },
+        },
         {
           path: '/edit/:editType(files)/:id',
           component: FileEditor,
@@ -247,6 +257,7 @@ router.afterEach(async (to, from) => {
   }
 });
 router.beforeEach((to, from) => {
+  document.title = 'Sub Store';
   // console.log(`beforeEach ${from.path} => ${to.path}`)
   if (!globalStore) {
     globalStore = useGlobalStore();

src/views/FilePreview.vue

@@ -2,24 +2,36 @@
   <Teleport to="#app">
     <div class="compare-page-wrapper">
       <header class="compare-page-header">
-        <h1>
-          <font-awesome-icon icon="fa-solid fa-eye" />
-          <span class="title">{{ $t(`comparePage.title`) }}</span>
-          <span class="displayName">
-            <font-awesome-icon icon="fa-solid fa-angles-right" />
-            {{ displayName }}
-          </span>
-        </h1>
-        <!-- <button class="copy" @click.stop="copyContent">
-          <svg-icon
-            name="copy"
-            class="action-icon"
-            color="var(--comment-text-color)"
-          />
-        </button> -->
-        <button @click="clickClose">
-          <font-awesome-icon icon="fa-solid fa-circle-xmark" />
-        </button>
+        <template v-if="url">
+          <h1>
+            <span class="title">外部资源中使用, 请复制: </span>
+            <span class="displayName">
+              <font-awesome-icon class="copy" icon="fa-solid fa-clone" @click="copyUrl" />
+              <!-- <font-awesome-icon icon="fa-solid fa-angles-right" /> -->
+              <a class="url" :href="url" target="_blank">{{ url }}</a>
+            </span>
+          </h1>
+        </template>
+        <template v-else>
+          <h1>
+            <font-awesome-icon icon="fa-solid fa-eye" />
+            <span class="title">{{ $t(`comparePage.title`) }}</span>
+            <span class="displayName">
+              <font-awesome-icon icon="fa-solid fa-angles-right" />
+              {{ displayName }}
+            </span>
+          </h1>
+          <!-- <button class="copy" @click.stop="copyContent">
+            <svg-icon
+              name="copy"
+              class="action-icon"
+              color="var(--comment-text-color)"
+            />
+          </button> -->
+          <button @click="clickClose">
+            <font-awesome-icon icon="fa-solid fa-circle-xmark" />
+          </button>
+        </template>
       </header>
       <cmView :isReadOnly="false" id="filePreview" />
       <!-- <div class="compare-page-body">
@@ -40,10 +52,11 @@
 </template>
 
 <script lang="ts" setup>
+import axios from 'axios';
 import { useSubsApi } from "@/api/subs";
 import { useSubsStore } from "@/store/subs";
 import { Toast } from "@nutui/nutui";
-import { computed, ref, toRaw } from "vue";
+import { computed, ref, toRaw, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 import { useClipboard } from "@vueuse/core";
 import useV3Clipboard from "vue-clipboard3";
@@ -57,6 +70,28 @@ const { showNotify } = useAppNotifyStore();
 
 const { t } = useI18n();
 const subsStore = useSubsStore();
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const { url } = route.query as { url: string };
+
+const processedData = ref('')
+
+watchEffect(async () => {
+  if (url) {
+    try {
+      const response = await axios.get(url as string)
+      processedData.value = response.data
+      cmStore.setEditCode('filePreview', processedData.value)
+    } catch (error) {
+      console.error('Error fetching URL:', error)
+    }
+  }
+  if (route.query.name) {
+    document.title = `${route.query.name} - Sub Store`
+  }
+})
+
 const { previewData, name } = defineProps<{
   previewData: any;
   name: string;
@@ -68,26 +103,27 @@ const isOriginalVisible = ref(true);
 const isProcessedVisible = ref(true);
 
 const displayName = computed(() => {
+  if(route.query.name) return route.query.name
   const sub = subsStore.getOneFile(name);
   return sub?.displayName || sub?.["display-name"] || name;
 });
 
-const originalData = previewData.original;
-const processedData = previewData.processed;
+const originalData = previewData?.original;
+if(!url) processedData.value = previewData?.processed;
 // cmStore.setCmCode(processedData)
-cmStore.setEditCode('filePreview',processedData)
+cmStore.setEditCode('filePreview',processedData.value )
 
  
 const clickClose = () => {
   emit("closePreview");
 };
-const copyContent = async () => {
+const copyUrl = async () => {
   if (isSupported) {
-    await copy(processedData);
+    await copy(url);
   } else {
-    await copyFallback(processedData);
+    await copyFallback(url);
   }
-  showNotify({ title: "已复制预览内容" });
+  showNotify({ title: `已复制链接: ${url}` });
 };
 </script>
 
@@ -250,6 +286,12 @@ const copyContent = async () => {
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 40vw;
+    .copy {
+      cursor: pointer;
+    }
+    .url {
+      text-decoration: underline;
+    }
   }
   h1 {
     display: flex;