优化构建流v0.1.9b6b

2026-02-24 22:25:22 +00:00 · 2025-07-10 19:17:22 +08:00
parent 43c82f2f16
commit 6b1bd573c8
9 changed files with 2229 additions and 1 deletions
--- a/web-front/src/views/ShowFile.vue
+++ b/web-front/src/views/ShowFile.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="show-file-page">
+    <div v-if="loading" style="text-align:center;margin-top:40px;">加载中...</div>
+    <div v-else-if="error" style="color:red;text-align:center;margin-top:40px;">{{ error }}</div>
+    <div v-else>
+      <div v-if="parseResult.code">
+        <div class="file-meta-info-card">
+          <div class="file-meta-row">
+            <span class="file-meta-label">下载链接：</span>
+            <a :href="downloadUrl" target="_blank" class="file-meta-link">{{ downloadUrl }}</a>
+          </div>
+          <div class="file-meta-row">
+            <span class="file-meta-label">文件名：</span>{{ fileTypeUtils.extractFileNameAndExt(downloadUrl).name }}
+          </div>
+          <div class="file-meta-row">
+            <span class="file-meta-label">文件类型：</span>{{ fileTypeUtils.getFileTypeClass({ fileName: fileTypeUtils.extractFileNameAndExt(downloadUrl).name }) }}
+          </div>
+          <div class="file-meta-row" v-if="parseResult.data?.sizeStr">
+            <span class="file-meta-label">文件大小：</span>{{ parseResult.data.sizeStr }}
+          </div>
+          <div class="file-meta-row">
+            <span class="file-meta-label">在线预览：</span>
+            <a :href="previewBaseUrl + encodeURIComponent(downloadUrl)" target="_blank" class="preview-btn">点击在线预览</a>
+          </div>
+        </div>
+      </div>
+      <div v-else style="text-align:center;margin-top:40px;">未获取到有效解析结果</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import fileTypeUtils from '@/utils/fileTypeUtils'
+import { previewBaseUrl } from '@/views/Home.vue'
+
+export default {
+  name: 'ShowFile',
+  data() {
+    return {
+      loading: true,
+      error: '',
+      parseResult: {},
+      downloadUrl: '',
+      fileTypeUtils,
+      previewBaseUrl
+    }
+  },
+  methods: {
+    async fetchFile() {
+      const url = this.$route.query.url
+      if (!url) {
+        this.error = '缺少 url 参数'
+        this.loading = false
+        return
+      }
+      try {
+        const res = await axios.get('/json/parser', { params: { url } })
+        this.parseResult = res.data
+        this.downloadUrl = res.data.data?.directLink
+      } catch (e) {
+        this.error = '解析失败'
+      } finally {
+        this.loading = false
+      }
+    }
+  },
+  mounted() {
+    this.fetchFile()
+  }
+}
+</script>
+
+<style scoped>
+.show-file-page {
+  max-width: 600px;
+  margin: 40px auto;
+}
+.file-meta-info-card {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  padding: 18px 24px 12px 24px;
+  font-size: 1.02rem;
+  color: #333;
+}
+.file-meta-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 1.01em;
+}
+.file-meta-label {
+  min-width: 90px;
+  color: #888;
+  font-weight: 500;
+  margin-right: 8px;
+}
+.file-meta-link {
+  color: #409eff;
+  word-break: break-all;
+  text-decoration: underline;
+}
+.preview-btn {
+  display: inline-block;
+  padding: 4px 16px;
+  background: #409eff;
+  color: #fff;
+  border-radius: 5px;
+  text-decoration: none;
+  font-weight: 500;
+  margin-left: 8px;
+  transition: background 0.2s;
+}
+.preview-btn:hover {
+  background: #1867c0;
+}
+</style>