fix: https://github.com/vastsa/FileCodeBox/issues/376 https://github.com/vastsa/FileCodeBox/issues/351

src/views/RetrievewFileView.vue

@@ -257,8 +257,35 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, inject, onMounted, watch, computed } from 'vue'
+
+// 定义数据接口
+interface FileRecord {
+  id: number
+  code: string
+  filename: string
+  size: string
+  downloadUrl: string | null
+  content: string | null
+  date: string
+}
+
+interface InputStatus {
+  readonly: boolean
+  loading: boolean
+}
+
+interface ApiResponse {
+  code: number
+  message?: string
+  detail?: {
+    code: string
+    name: string
+    text: string
+    size: number
+  }
+}
 import {
   BoxIcon,
   EyeIcon,
@@ -280,6 +307,7 @@ import { storeToRefs } from 'pinia'
 import api from '@/utils/api'
 import { saveAs } from 'file-saver'
 import { marked } from 'marked'
+import DOMPurify from 'dompurify'
 import { useAlertStore } from '@/stores/alertStore'
 import { copyToClipboard } from '@/utils/clipboard'
 
@@ -291,25 +319,27 @@ const isDarkMode = inject('isDarkMode')
 const fileStore = useFileDataStore()
 const { receiveData } = storeToRefs(fileStore)
 const code = ref('')
-const inputStatus = ref({
+const inputStatus = ref<InputStatus>({
   readonly: false,
   loading: false
 })
 const isInputFocused = ref(false)
 const error = ref('')
-const selectedRecord = ref(null)
+const selectedRecord = ref<FileRecord | null>(null)
 const showDrawer = ref(false)
 const route = useRoute()
 
 // 使用 receiveData 替代原来的 records
 const records = receiveData
 const config = JSON.parse(localStorage.getItem('config') || '{}')
-const codeInput = ref(null)
+const codeInput = ref<HTMLInputElement | null>(null)
 
 onMounted(() => {
-  codeInput.value && codeInput.value.focus()
+  if (codeInput.value) {
+    codeInput.value.focus()
+  }
   const query_code = route.query.code
-  if (query_code) {
+  if (query_code && typeof query_code === 'string') {
     code.value = query_code
   }
 })
@@ -319,12 +349,15 @@ watch(code, (newVal) => {
   }
 })
 
-const getDownloadUrl = (record) => {
-  if (record.downloadUrl.startsWith('http')) {
-    return record.downloadUrl
-  } else {
-    return `${baseUrl}${record.downloadUrl}`
+const getDownloadUrl = (record: FileRecord) => {
+  if (record.downloadUrl) {
+    if (record.downloadUrl.startsWith('http')) {
+      return record.downloadUrl
+    } else {
+      return `${baseUrl}${record.downloadUrl}`
+    }
   }
+  return ''
 }
 // 在其他代码后添加复制功能
 const copyContent = async () => {
@@ -345,11 +378,12 @@ const handleSubmit = async () => {
   inputStatus.value.loading = true
 
   try {
-    const res = await api.post('/share/select/', {
+    const response = await api.post('/share/select/', {
       code: code.value
     })
+    const res = (response.data || response) as ApiResponse
 
-    if (res.code === 200) {
+    if (res && res.code === 200) {
       if (res.detail) {
         const isFile = res.detail.text.startsWith('/share/download') || res.detail.name !== 'Text'
         const newFileData = {
@@ -362,7 +396,7 @@ const handleSubmit = async () => {
           date: new Date().toLocaleString()
         }
         let flag = true
-        fileStore.receiveData.forEach((file) => {
+        fileStore.receiveData.forEach((file: FileRecord) => {
           if (file.code === newFileData.code) {
             flag = false
           }
@@ -381,7 +415,8 @@ const handleSubmit = async () => {
         alertStore.showAlert('无效的取件码', 'error')
       }
     } else {
-      alertStore.showAlert(res.detail || '获取文件失败', 'error')
+      alertStore.showAlert('获取文件失败', 'error')
+      console.log(res)
     }
   } catch (err) {
     console.error('取件失败:', err)
@@ -393,7 +428,7 @@ const handleSubmit = async () => {
   }
 }
 
-const formatFileSize = (bytes) => {
+const formatFileSize = (bytes: number) => {
   if (bytes === 0) return '0 Bytes'
   const k = 1024
   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
@@ -401,12 +436,12 @@ const formatFileSize = (bytes) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
 
-const viewDetails = (record) => {
+const viewDetails = (record: FileRecord) => {
   selectedRecord.value = record
 }
 
-const deleteRecord = (id) => {
-  const index = records.value.findIndex((record) => record.id === id)
+const deleteRecord = (id: number) => {
+  const index = records.value.findIndex((record: FileRecord) => record.id === id)
   if (index !== -1) {
     fileStore.deleteReceiveData(index)
   }
@@ -420,7 +455,7 @@ const toSend = () => {
   router.push('/send')
 }
 
-const getQRCodeValue = (record) => {
+const getQRCodeValue = (record: FileRecord) => {
   if (record.downloadUrl) {
     return `${baseUrl}${record.downloadUrl}`
   } else {
@@ -428,7 +463,7 @@ const getQRCodeValue = (record) => {
   }
 }
 
-const downloadRecord = (record) => {
+const downloadRecord = (record: FileRecord) => {
   console.log(record)
 
   if (record.downloadUrl) {
@@ -445,12 +480,33 @@ const downloadRecord = (record) => {
 }
 
 const showPreview = ref(false)
-const renderedContent = computed(() => {
-  if (selectedRecord.value && selectedRecord.value.content) {
-    return marked(selectedRecord.value.content)
-  }
-  return ''
-})
+const renderedContent = ref('')
+
+// 监听selectedRecord变化，异步渲染内容
+watch(
+  () => selectedRecord.value?.content,
+  async (content) => {
+    if (content) {
+      try {
+        // 使用 marked 解析 Markdown，然后用 DOMPurify 清理 HTML 防止 XSS
+        const rawHtml = await marked(content)
+        renderedContent.value = DOMPurify.sanitize(rawHtml, {
+          // 允许的标签和属性
+          ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'code', 'pre', 'a', 'img'],
+          ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class'],
+          // 禁用危险的协议
+          ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp|xxx):|[^a-z]|[a-z+.-]+(?:[^a-z+.-:]|$))/i
+        })
+      } catch (error) {
+        console.error('Markdown 渲染失败:', error)
+        renderedContent.value = content // fallback 到原始内容
+      }
+    } else {
+      renderedContent.value = ''
+    }
+  },
+  { immediate: true }
+)
 
 const showContentPreview = () => {
   showPreview.value = true