orion/FileCodeBoxFronted
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: https://github.com/vastsa/FileCodeBox/issues/303

Browse Source
This commit is contained in:
Lan
2025-09-04 10:46:27 +08:00
parent a4942e1757
commit 68ce796a55
3 changed files with 495 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/AdminLayout/AdminLayout.vue
+1 -1
View File
@@ -53,7 +53,7 @@
<!-- Main Content --> <!-- Main Content -->
<div class="flex-1 flex flex-col h-full"> <div class="flex-1 flex flex-col h-full">
<!-- Header --> <!-- Header -->
<header class="shadow-md border-b transition-colors duration-300 h-64px" <header class="shadow-md border-b transition-colors duration-300 h-16"
:class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']"> :class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']">
<div class="flex items-center justify-between h-16 px-4"> <div class="flex items-center justify-between h-16 px-4">
<button @click="toggleSidebar" class="lg:hidden"> <button @click="toggleSidebar" class="lg:hidden">
src/utils/clipboard.ts
+28 -28
View File
@@ -75,43 +75,43 @@ export const copyRetrieveCode = async (code: string): Promise<boolean> => {
}) })
} }
const baseUrl = window.location.origin + '/'; const baseUrl = window.location.origin + '/'
export const copyWgetCommand = (retrieveCode: string, fileName: string) => { export const copyWgetCommand = (retrieveCode: string, fileName: string) => {
const command = `wget ${baseUrl}share/select?code=${retrieveCode} -O "${fileName}"`; const command = `wget ${baseUrl}share/select?code=${retrieveCode} -O "${fileName}"`
if (navigator.clipboard && navigator.clipboard.writeText) { if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(command) navigator.clipboard
.writeText(command)
.then(() => { .then(() => {
console.log("命令已复制到剪贴板！"); console.log('命令已复制到剪贴板！')
}) })
.catch((err) => { .catch((err) => {
console.error("复制失败，使用回退方法：", err); console.error('复制失败，使用回退方法：', err)
fallbackCopyTextToClipboard(command); fallbackCopyTextToClipboard(command)
}); })
} else { } else {
console.warn("Clipboard API 不可用，使用回退方法。"); console.warn('Clipboard API 不可用，使用回退方法。')
fallbackCopyTextToClipboard(command); fallbackCopyTextToClipboard(command)
} }
}; }
function fallbackCopyTextToClipboard(text:string) { function fallbackCopyTextToClipboard(command: string) {
const textArea = document.createElement("textarea"); const textArea = document.createElement('textarea')
textArea.value = text; textArea.value = command
textArea.style.position = "fixed"; // 避免滚动 textArea.style.position = 'fixed' // 避免滚动
document.body.appendChild(textArea); document.body.appendChild(textArea)
textArea.focus(); textArea.focus()
textArea.select(); textArea.select()
try { try {
const successful = document.execCommand("copy"); const successful = document.execCommand('copy')
console.log("回退复制操作成功：", successful); console.log('回退复制操作成功：', successful)
} catch (err) { if (document.hasFocus() && navigator.clipboard && navigator.clipboard.writeText) {
console.error("回退复制操作失败：", err); navigator.clipboard.writeText(command)
} else {
fallbackCopyTextToClipboard(command)
} }
document.body.removeChild(textArea); } catch (err) {
} console.error('回退复制操作失败：', err)
}
if (document.hasFocus() && navigator.clipboard && navigator.clipboard.writeText) { document.body.removeChild(textArea)
navigator.clipboard.writeText("要复制的文本");
} else {
fallbackCopyTextToClipboard("要复制的文本");
} }
src/views/SendFileView.vue
+432 -156
View File
@@ -1,32 +1,49 @@
<template> <template>
<div class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300" <div
@paste.prevent="handlePaste"> class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
<div class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300" :class="[ @paste.prevent="handlePaste"
>
<div
class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300"
:class="[
isDarkMode isDarkMode
? 'bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl border-gray-700' ? 'bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl border-gray-700'
: 'bg-white border-gray-200' : 'bg-white border-gray-200'
]"> ]"
>
<div class="p-8"> <div class="p-8">
<h2 class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300" :class="[ <h2
class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300"
:class="[
isDarkMode isDarkMode
? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300' ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
: 'text-indigo-600' : 'text-indigo-600'
]" @click="toRetrieve"> ]"
@click="toRetrieve"
>
{{ config.name }} {{ config.name }}
</h2> </h2>
<form @submit.prevent="handleSubmit" class="space-y-8"> <form @submit.prevent="handleSubmit" class="space-y-8">
<!-- 发送类型选择 --> <!-- 发送类型选择 -->
<div class="flex justify-center space-x-4 mb-6"> <div class="flex justify-center space-x-4 mb-6">
<button type="button" @click="sendType = 'file'" :class="[ <button
type="button"
@click="sendType = 'file'"
:class="[
'px-4 py-2 rounded-lg', 'px-4 py-2 rounded-lg',
sendType === 'file' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300' sendType === 'file' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
]"> ]"
>
发送文件 发送文件
</button> </button>
<button type="button" @click="sendType = 'text'" :class="[ <button
type="button"
@click="sendType = 'text'"
:class="[
'px-4 py-2 rounded-lg', 'px-4 py-2 rounded-lg',
sendType === 'text' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300' sendType === 'text' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
]"> ]"
>
发送文本 发送文本
</button> </button>
<!-- <button <!-- <button
@@ -50,23 +67,37 @@
isDarkMode isDarkMode
? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500' ? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
: 'bg-gray-100 border-gray-300 hover:border-indigo-500' : 'bg-gray-100 border-gray-300 hover:border-indigo-500'
]" @click="triggerFileUpload" @dragover.prevent @drop.prevent="handleFileDrop"> ]"
<input id="file-upload" type="file" class="hidden" @change="handleFileUpload" ref="fileInput" /> @click="triggerFileUpload"
@dragover.prevent
@drop.prevent="handleFileDrop"
>
<input
id="file-upload"
type="file"
class="hidden"
@change="handleFileUpload"
ref="fileInput"
/>
<div class="absolute inset-0 w-full h-full" v-if="uploadProgress > 0"> <div class="absolute inset-0 w-full h-full" v-if="uploadProgress > 0">
<BorderProgressBar :progress="uploadProgress" /> <BorderProgressBar :progress="uploadProgress" />
</div> </div>
<UploadCloudIcon :class="[ <UploadCloudIcon
:class="[
'w-16 h-16 transition-colors duration-300', 'w-16 h-16 transition-colors duration-300',
isDarkMode isDarkMode
? 'text-gray-400 group-hover:text-indigo-400' ? 'text-gray-400 group-hover:text-indigo-400'
: 'text-gray-600 group-hover:text-indigo-600' : 'text-gray-600 group-hover:text-indigo-600'
]" /> ]"
<p :class="[ />
<p
:class="[
'mt-4 text-sm transition-colors duration-300 w-full text-center', 'mt-4 text-sm transition-colors duration-300 w-full text-center',
isDarkMode isDarkMode
? 'text-gray-400 group-hover:text-indigo-400' ? 'text-gray-400 group-hover:text-indigo-400'
: 'text-gray-600 group-hover:text-indigo-600' : 'text-gray-600 group-hover:text-indigo-600'
]"> ]"
>
<span class="block truncate"> <span class="block truncate">
{{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }} {{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }}
</span> </span>
@@ -79,12 +110,18 @@
<div v-else key="text" class="grid grid-cols-1 gap-8"> <div v-else key="text" class="grid grid-cols-1 gap-8">
<!-- 文本输入区域 --> <!-- 文本输入区域 -->
<div v-if="sendType === 'text'" class="flex flex-col"> <div v-if="sendType === 'text'" class="flex flex-col">
<textarea id="text-content" v-model="textContent" rows="7" :class="[ <textarea
'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none', id="text-content"
v-model="textContent"
rows="7"
:class="[
'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none custom-scrollbar',
isDarkMode isDarkMode
? 'bg-gray-800 bg-opacity-50 text-white' ? 'bg-gray-800 bg-opacity-50 text-white'
: 'bg-white text-gray-900 border border-gray-300' : 'bg-white text-gray-900 border border-gray-300'
]" placeholder="在此输入要发送的文本..."></textarea> ]"
placeholder="在此输入要发送的文本..."
></textarea>
</div> </div>
</div> </div>
</transition> </transition>
@@ -94,83 +131,135 @@
过期时间 过期时间
</label> </label>
<div class="relative flex-grow group"> <div class="relative flex-grow group">
<div :class="[ <div
'relative h-11 rounded-xl border transition-all duration-300', :class="[
'relative h-12 rounded-2xl border transition-all duration-300 shadow-sm',
isDarkMode isDarkMode
? 'bg-gray-800/50 border-gray-700/50 group-hover:border-gray-600' ? 'bg-gray-800/60 border-gray-700/60 group-hover:border-gray-600/80 group-hover:shadow-lg group-hover:shadow-gray-900/20'
: 'bg-white border-gray-200 group-hover:border-gray-300' : 'bg-white border-gray-200 group-hover:border-gray-300 group-hover:shadow-md group-hover:shadow-gray-200/50'
]"> ]"
>
<template v-if="expirationMethod !== 'forever'"> <template v-if="expirationMethod !== 'forever'">
<input v-model="expirationValue" type="number" :placeholder="getPlaceholder()" min="1" :class="[ <input
'w-full h-full px-4 pr-32 rounded-xl placeholder-gray-400 transition-all duration-300', v-model="expirationValue"
type="number"
:placeholder="getPlaceholder()"
min="1"
:class="[
'w-full h-full px-5 pr-32 rounded-2xl placeholder-gray-400 transition-all duration-300',
'focus:outline-none focus:ring-2 focus:ring-offset-0', 'focus:outline-none focus:ring-2 focus:ring-offset-0',
'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
'bg-transparent', 'bg-transparent',
isDarkMode isDarkMode
? 'text-gray-100 focus:ring-indigo-500/70 placeholder-gray-500' ? 'text-gray-100 focus:ring-indigo-500/80 placeholder-gray-500'
: 'text-gray-900 focus:ring-indigo-500/50 placeholder-gray-400' : 'text-gray-900 focus:ring-indigo-500/60 placeholder-gray-400'
]" /> ]"
<div class="absolute right-24 top-0 h-full flex flex-col border-l" />
:class="[isDarkMode ? 'border-gray-700/50' : 'border-gray-200']"> <div
<button type="button" @click="incrementValue(1)" class="absolute right-28 top-0 h-full flex flex-col border-l"
class="flex-1 px-2 flex items-center justify-center transition-all duration-200" :class="[ :class="[isDarkMode ? 'border-gray-700/60' : 'border-gray-200']"
>
<button
type="button"
@click="incrementValue(1)"
class="flex-1 px-2 flex items-center justify-center transition-all duration-200"
:class="[
isDarkMode isDarkMode
? 'hover:bg-gray-700/50 text-gray-400 hover:text-gray-200' ? 'hover:bg-gray-700/60 text-gray-400 hover:text-gray-200'
: 'hover:bg-gray-50 text-gray-500 hover:text-gray-700' : 'hover:bg-gray-50 text-gray-500 hover:text-gray-700'
]"> ]"
>
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" /> <path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 15l7-7 7 7"
/>
</svg> </svg>
</button> </button>
<button type="button" @click="incrementValue(-1)" <button
class="flex-1 px-2 flex items-center justify-center transition-all duration-200" :class="[ type="button"
@click="incrementValue(-1)"
class="flex-1 px-2 flex items-center justify-center transition-all duration-200"
:class="[
isDarkMode isDarkMode
? 'hover:bg-gray-700/50 text-gray-400 hover:text-gray-200' ? 'hover:bg-gray-700/60 text-gray-400 hover:text-gray-200'
: 'hover:bg-gray-50 text-gray-500 hover:text-gray-700' : 'hover:bg-gray-50 text-gray-500 hover:text-gray-700'
]"> ]"
>
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> <path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg> </svg>
</button> </button>
</div> </div>
</template> </template>
<select v-model="expirationMethod" :class="[ <select
'absolute right-0 top-0 h-full appearance-none cursor-pointer', v-model="expirationMethod"
:class="[
'absolute right-0 top-0 h-full appearance-none cursor-pointer transition-all duration-300',
'focus:outline-none focus:ring-2 focus:ring-offset-0', 'focus:outline-none focus:ring-2 focus:ring-offset-0',
expirationMethod === 'forever' ? 'w-full px-4' : 'w-24 pl-3 pr-8 border-l', expirationMethod === 'forever' ? 'w-full px-5 rounded-2xl' : 'w-28 pl-4 pr-9 border-l rounded-r-2xl',
isDarkMode isDarkMode
? 'text-gray-100 border-gray-700/50 focus:ring-indigo-500/70 bg-gray-800/50' ? 'text-gray-100 border-gray-700/60 focus:ring-indigo-500/80 bg-gray-800/60'
: 'text-gray-900 border-gray-200 focus:ring-indigo-500/50 bg-white' : 'text-gray-900 border-gray-200 focus:ring-indigo-500/60 bg-white'
]" :style="{ ]"
:style="{
color: isDarkMode ? '#f3f4f6' : '#111827', color: isDarkMode ? '#f3f4f6' : '#111827',
backgroundColor: isDarkMode ? 'rgba(31, 41, 55, 0.5)' : '#ffffff' backgroundColor: isDarkMode ? 'rgba(31, 41, 55, 0.5)' : '#ffffff'
}"> }"
<option v-for="item in config.expireStyle" :value="item" :key="item" >
:class="[isDarkMode ? 'bg-gray-800 text-gray-100' : 'bg-white text-gray-900']" :style="{ <option
v-for="item in config.expireStyle"
:value="item"
:key="item"
:class="[isDarkMode ? 'bg-gray-800 text-gray-100' : 'bg-white text-gray-900']"
:style="{
color: isDarkMode ? '#f3f4f6' : '#111827', color: isDarkMode ? '#f3f4f6' : '#111827',
backgroundColor: isDarkMode ? '#1f2937' : '#ffffff' backgroundColor: isDarkMode ? '#1f2937' : '#ffffff'
}"> }"
>
{{ getUnit(item) }} {{ getUnit(item) }}
</option> </option>
</select> </select>
<div class="absolute pointer-events-none" :class="[ <div
class="absolute pointer-events-none"
:class="[
expirationMethod === 'forever' ? 'right-3' : 'right-2', expirationMethod === 'forever' ? 'right-3' : 'right-2',
'top-1/2 -translate-y-1/2' 'top-1/2 -translate-y-1/2'
]"> ]"
<svg class="w-4 h-4 transition-colors duration-300" >
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" fill="none" stroke="currentColor" <svg
viewBox="0 0 24 24"> class="w-4 h-4 transition-colors duration-300"
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg> </svg>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 提交按钮 --> <!-- 提交按钮 -->
<button type="submit" <button
class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"> type="submit"
class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
>
<span <span
class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span> class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"
></span>
<span class="relative z-10 flex items-center justify-center text-lg"> <span class="relative z-10 flex items-center justify-center text-lg">
<SendIcon class="w-6 h-6 mr-2" /> <SendIcon class="w-6 h-6 mr-2" />
<span>安全寄送</span> <span>安全寄送</span>
@@ -184,14 +273,22 @@
</div> </div>
</div> </div>
<div class="px-8 py-4 bg-opacity-50 flex justify-between items-center" <div
:class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"> class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
<span class="text-sm flex items-center" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"> :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
>
<span
class="text-sm flex items-center"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
>
<ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" /> <ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
安全加密 安全加密
</span> </span>
<button @click="toggleDrawer" class="text-sm hover:text-indigo-300 transition duration-300 flex items-center" <button
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"> @click="toggleDrawer"
class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
>
发件记录 发件记录
<ClipboardListIcon class="w-4 h-4 ml-1" /> <ClipboardListIcon class="w-4 h-4 ml-1" />
</button> </button>
@@ -200,56 +297,84 @@
<!-- 抽屉式发件记录 --> <!-- 抽屉式发件记录 -->
<transition name="drawer"> <transition name="drawer">
<div v-if="showDrawer" <div
v-if="showDrawer"
class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col" class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"> :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
<div class="flex justify-between items-center p-6 border-b" >
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"> <div
class="flex justify-between items-center p-6 border-b"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
>
<h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']"> <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
发件记录 发件记录
</h3> </h3>
<button @click="toggleDrawer" class="hover:text-white transition duration-300" <button
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"> @click="toggleDrawer"
class="hover:text-white transition duration-300"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
>
<XIcon class="w-6 h-6" /> <XIcon class="w-6 h-6" />
</button> </button>
</div> </div>
<div class="flex-grow overflow-y-auto p-6"> <div class="flex-grow overflow-y-auto p-6">
<transition-group name="list" tag="div" class="space-y-4"> <transition-group name="list" tag="div" class="space-y-4">
<div v-for="record in sendRecords" :key="record.id" <div
v-for="record in sendRecords"
:key="record.id"
class="bg-opacity-50 rounded-lg p-4 flex items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102" class="bg-opacity-50 rounded-lg p-4 flex items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102"
:class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"> :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
>
<div class="flex-shrink-0 mr-4"> <div class="flex-shrink-0 mr-4">
<FileIcon class="w-10 h-10" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" /> <FileIcon
class="w-10 h-10"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
</div> </div>
<div class="flex-grow min-w-0 mr-4"> <div class="flex-grow min-w-0 mr-4">
<p class="font-medium text-lg truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-800']"> <p
class="font-medium text-lg truncate"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
{{ record.filename ? record.filename : 'Text' }} {{ record.filename ? record.filename : 'Text' }}
</p> </p>
<p class="text-sm truncate" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"> <p
class="text-sm truncate"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
>
{{ record.date }} · {{ record.size }} {{ record.date }} · {{ record.size }}
</p> </p>
</div> </div>
<div class="flex-shrink-0 flex space-x-2"> <div class="flex-shrink-0 flex space-x-2">
<button @click="copyRetrieveLink(record.retrieveCode)" <button
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[ @click="copyRetrieveLink(record.retrieveCode)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
:class="[
isDarkMode isDarkMode
? 'hover:bg-blue-400 text-blue-400' ? 'hover:bg-blue-400 text-blue-400'
: 'hover:bg-blue-100 text-blue-600' : 'hover:bg-blue-100 text-blue-600'
]"> ]"
>
<ClipboardCopyIcon class="w-5 h-5" /> <ClipboardCopyIcon class="w-5 h-5" />
</button> </button>
<button @click="viewDetails(record)" <button
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[ @click="viewDetails(record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
:class="[
isDarkMode isDarkMode
? 'hover:bg-green-400 text-green-400' ? 'hover:bg-green-400 text-green-400'
: 'hover:bg-green-100 text-green-600' : 'hover:bg-green-100 text-green-600'
]"> ]"
>
<EyeIcon class="w-5 h-5" /> <EyeIcon class="w-5 h-5" />
</button> </button>
<button @click="deleteRecord(record.id)" <button
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[ @click="deleteRecord(record.id)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
:class="[
isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600' isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
]"> ]"
>
<TrashIcon class="w-5 h-5" /> <TrashIcon class="w-5 h-5" />
</button> </button>
</div> </div>
@@ -261,20 +386,34 @@
<!-- 记录详情弹窗 --> <!-- 记录详情弹窗 -->
<transition name="fade"> <transition name="fade">
<div v-if="selectedRecord" <div
class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-3 sm:p-4 overflow-y-auto"> v-if="selectedRecord"
class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-3 sm:p-4 overflow-y-auto"
>
<div <div
class="w-full max-w-2xl rounded-2xl shadow-2xl transform transition-all duration-300 ease-out overflow-hidden" class="w-full max-w-2xl rounded-2xl shadow-2xl transform transition-all duration-300 ease-out overflow-hidden"
:class="[isDarkMode ? 'bg-gray-900 bg-opacity-70' : 'bg-white bg-opacity-95']"> :class="[isDarkMode ? 'bg-gray-900 bg-opacity-70' : 'bg-white bg-opacity-95']"
>
<!-- 顶部标题栏 --> <!-- 顶部标题栏 -->
<div class="px-4 sm:px-6 py-3 sm:py-4 border-b" :class="[isDarkMode ? 'border-gray-800' : 'border-gray-100']"> <div
class="px-4 sm:px-6 py-3 sm:py-4 border-b"
:class="[isDarkMode ? 'border-gray-800' : 'border-gray-100']"
>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h3 class="text-lg sm:text-xl font-semibold" :class="[isDarkMode ? 'text-white' : 'text-gray-900']"> <h3
class="text-lg sm:text-xl font-semibold"
:class="[isDarkMode ? 'text-white' : 'text-gray-900']"
>
文件详情 文件详情
</h3> </h3>
<button @click="selectedRecord = null" <button
class="p-1.5 sm:p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"> @click="selectedRecord = null"
<XIcon class="w-4 h-4 sm:w-5 sm:h-5" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" /> class="p-1.5 sm:p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
>
<XIcon
class="w-4 h-4 sm:w-5 sm:h-5"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
/>
</button> </button>
</div> </div>
</div> </div>
@@ -282,35 +421,57 @@
<!-- 主要内容区域 --> <!-- 主要内容区域 -->
<div class="p-4 sm:p-6"> <div class="p-4 sm:p-6">
<!-- 文件信息卡片 --> <!-- 文件信息卡片 -->
<div class="rounded-xl p-3 sm:p-4 mb-4 sm:mb-6" <div
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-50' : 'bg-gray-50 bg-opacity-95']"> class="rounded-xl p-3 sm:p-4 mb-4 sm:mb-6"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-50' : 'bg-gray-50 bg-opacity-95']"
>
<div class="flex items-center mb-3 sm:mb-4"> <div class="flex items-center mb-3 sm:mb-4">
<div class="p-2 sm:p-3 rounded-lg" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"> <div
<FileIcon class="w-5 h-5 sm:w-6 sm:h-6" class="p-2 sm:p-3 rounded-lg"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" /> :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
>
<FileIcon
class="w-5 h-5 sm:w-6 sm:h-6"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
</div> </div>
<div class="ml-3 sm:ml-4 min-w-0 flex-1"> <div class="ml-3 sm:ml-4 min-w-0 flex-1">
<h4 class="font-medium text-sm sm:text-base truncate" <h4
:class="[isDarkMode ? 'text-white' : 'text-gray-900']"> class="font-medium text-sm sm:text-base truncate"
:class="[isDarkMode ? 'text-white' : 'text-gray-900']"
>
{{ selectedRecord.filename }} {{ selectedRecord.filename }}
</h4> </h4>
<p class="text-xs sm:text-sm truncate" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"> <p
class="text-xs sm:text-sm truncate"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
{{ selectedRecord.size }} · {{ selectedRecord.date }} {{ selectedRecord.size }} · {{ selectedRecord.date }}
</p> </p>
</div> </div>
</div> </div>
<div class="grid grid-cols-2 gap-3 sm:gap-4"> <div class="grid grid-cols-2 gap-3 sm:gap-4">
<div class="flex items-center min-w-0"> <div class="flex items-center min-w-0">
<ClockIcon class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 flex-shrink-0" <ClockIcon
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" /> class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 flex-shrink-0"
<span class="text-xs sm:text-sm truncate" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"> :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
/>
<span
class="text-xs sm:text-sm truncate"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"
>
{{ selectedRecord.expiration }} {{ selectedRecord.expiration }}
</span> </span>
</div> </div>
<div class="flex items-center min-w-0"> <div class="flex items-center min-w-0">
<ShieldCheckIcon class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 flex-shrink-0" <ShieldCheckIcon
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" /> class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 flex-shrink-0"
<span class="text-xs sm:text-sm truncate" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"> :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
/>
<span
class="text-xs sm:text-sm truncate"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"
>
安全加密 安全加密
</span> </span>
</div> </div>
@@ -321,11 +482,15 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
<!-- 左侧取件码 --> <!-- 左侧取件码 -->
<div class="space-y-3 sm:space-y-4"> <div class="space-y-3 sm:space-y-4">
<div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl p-4 sm:p-5 text-white"> <div
class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl p-4 sm:p-5 text-white"
>
<div class="flex items-center justify-between mb-3 sm:mb-4"> <div class="flex items-center justify-between mb-3 sm:mb-4">
<h4 class="font-medium text-sm sm:text-base">取件码</h4> <h4 class="font-medium text-sm sm:text-base">取件码</h4>
<button @click="copyRetrieveCode(selectedRecord.retrieveCode)" <button
class="p-1.5 sm:p-2 rounded-full hover:bg-white/10 transition-colors"> @click="copyRetrieveCode(selectedRecord.retrieveCode)"
class="p-1.5 sm:p-2 rounded-full hover:bg-white/10 transition-colors"
>
<ClipboardCopyIcon class="w-4 h-4 sm:w-5 sm:h-5" /> <ClipboardCopyIcon class="w-4 h-4 sm:w-5 sm:h-5" />
</button> </button>
</div> </div>
@@ -334,36 +499,56 @@
</p> </p>
</div> </div>
<div class="rounded-xl p-3 sm:p-4" <div
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-50' : 'bg-gray-50 bg-opacity-95']"> class="rounded-xl p-3 sm:p-4"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-50' : 'bg-gray-50 bg-opacity-95']"
>
<div class="flex items-center justify-between mb-2 sm:mb-3"> <div class="flex items-center justify-between mb-2 sm:mb-3">
<h4 class="font-medium text-sm sm:text-base flex items-center min-w-0" <h4
:class="[isDarkMode ? 'text-white' : 'text-gray-900']"> class="font-medium text-sm sm:text-base flex items-center min-w-0"
<TerminalIcon class="w-4 h-4 sm:w-5 sm:h-5 mr-1.5 sm:mr-2 text-indigo-500 flex-shrink-0" /> :class="[isDarkMode ? 'text-white' : 'text-gray-900']"
>
<TerminalIcon
class="w-4 h-4 sm:w-5 sm:h-5 mr-1.5 sm:mr-2 text-indigo-500 flex-shrink-0"
/>
<span class="truncate">wget下载</span> <span class="truncate">wget下载</span>
</h4> </h4>
<button @click="copyWgetCommand(selectedRecord.retrieveCode, selectedRecord.filename)" <button
class="p-1.5 sm:p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"> @click="copyWgetCommand(selectedRecord.retrieveCode, selectedRecord.filename)"
<ClipboardCopyIcon class="w-4 h-4 sm:w-5 sm:h-5" class="p-1.5 sm:p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" /> >
<ClipboardCopyIcon
class="w-4 h-4 sm:w-5 sm:h-5"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
/>
</button> </button>
</div> </div>
<p class="text-xs sm:text-sm font-mono break-all line-clamp-2" <p
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"> class="text-xs sm:text-sm font-mono break-all line-clamp-2"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"
>
点击复制wget命令 点击复制wget命令
</p> </p>
</div> </div>
</div> </div>
<!-- 右侧二维码 --> <!-- 右侧二维码 -->
<div class="rounded-xl p-4 sm:p-5 flex flex-col items-center" <div
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-50' : 'bg-gray-50 bg-opacity-95']"> class="rounded-xl p-4 sm:p-5 flex flex-col items-center"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-50' : 'bg-gray-50 bg-opacity-95']"
>
<div class="bg-white p-3 sm:p-4 rounded-lg shadow-sm mb-3 sm:mb-4"> <div class="bg-white p-3 sm:p-4 rounded-lg shadow-sm mb-3 sm:mb-4">
<QRCode :value="getQRCodeValue(selectedRecord)" :size="140" level="M" <QRCode
class="sm:w-[160px] sm:h-[160px]" /> :value="getQRCodeValue(selectedRecord)"
:size="140"
level="M"
class="sm:w-[160px] sm:h-[160px]"
/>
</div> </div>
<p class="text-xs sm:text-sm truncate max-w-full" <p
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"> class="text-xs sm:text-sm truncate max-w-full"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
扫描二维码快速取件 扫描二维码快速取件
</p> </p>
</div> </div>
@@ -371,9 +556,14 @@
</div> </div>
<!-- 底部操作栏 --> <!-- 底部操作栏 -->
<div class="px-4 sm:px-6 py-3 sm:py-4 border-t" :class="[isDarkMode ? 'border-gray-800' : 'border-gray-100']"> <div
<button @click="copyRetrieveLink(selectedRecord.retrieveCode)" class="px-4 sm:px-6 py-3 sm:py-4 border-t"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 sm:px-6 py-2 sm:py-3 rounded-lg text-sm sm:text-base font-medium transition-colors"> :class="[isDarkMode ? 'border-gray-800' : 'border-gray-100']"
>
<button
@click="copyRetrieveLink(selectedRecord.retrieveCode)"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 sm:px-6 py-2 sm:py-3 rounded-lg text-sm sm:text-base font-medium transition-colors"
>
复制取件链接 复制取件链接
</button> </button>
</div> </div>
@@ -402,11 +592,40 @@ import { useRouter } from 'vue-router'
import BorderProgressBar from '@/components/common/BorderProgressBar.vue' import BorderProgressBar from '@/components/common/BorderProgressBar.vue'
import QRCode from 'qrcode.vue' import QRCode from 'qrcode.vue'
import { useFileDataStore } from '@/stores/fileData' import { useFileDataStore } from '@/stores/fileData'
import { useAlertStore } from '@/stores/alertStore'
import api from '@/utils/api' import api from '@/utils/api'
import { copyRetrieveLink, copyRetrieveCode, copyWgetCommand } from '@/utils/clipboard' import { copyRetrieveLink, copyRetrieveCode, copyWgetCommand } from '@/utils/clipboard'
import { getStorageUnit } from '@/utils/convert' import { getStorageUnit } from '@/utils/convert'
const config: any = JSON.parse(localStorage.getItem('config') || '{}') interface Config {
name: string
uploadSize: number
expireStyle: string[]
openUpload: number
max_save_seconds: number
enableChunk: boolean
}
interface ShareRecord {
id: number
filename: string
date: string
size: string
expiration: string
retrieveCode: string
}
interface ApiResponse {
code: number
detail: {
code?: string
name?: string
upload_id?: string
existed?: boolean
}
}
const config: Config = JSON.parse(localStorage.getItem('config') || '{}') as Config
const router = useRouter() const router = useRouter()
const isDarkMode = inject('isDarkMode') const isDarkMode = inject('isDarkMode')
@@ -420,8 +639,7 @@ const expirationMethod = ref('day')
const expirationValue = ref('1') const expirationValue = ref('1')
const uploadProgress = ref(0) const uploadProgress = ref(0)
const showDrawer = ref(false) const showDrawer = ref(false)
const selectedRecord = ref<any>(null) const selectedRecord = ref<ShareRecord | null>(null)
import { useAlertStore } from '@/stores/alertStore'
const alertStore = useAlertStore() const alertStore = useAlertStore()
const sendRecords = computed(() => fileDataStore.shareData) const sendRecords = computed(() => fileDataStore.shareData)
@@ -473,9 +691,9 @@ const handlePaste = async (event: ClipboardEvent) => {
try { try {
fileHash.value = await calculateFileHash(file) fileHash.value = await calculateFileHash(file)
alertStore.showAlert('已从剪贴板添加文件：' + file.name, 'success') alertStore.showAlert('已从剪贴板添加文件：' + file.name, 'success')
} catch (error) { } catch (err) {
alertStore.showAlert('文件处理失败', 'error') alertStore.showAlert('文件处理失败', 'error')
console.error('File hash calculation failed:', error) console.error('File hash calculation failed:', err)
} }
break break
} }
@@ -556,9 +774,10 @@ const calculateFileHash = async (file: File): Promise<string> => {
const fallbackHash = generateFallbackHash(file) const fallbackHash = generateFallbackHash(file)
resolve(fallbackHash) resolve(fallbackHash)
} }
} catch (error) { } catch (err) {
// 如果 crypto.subtle.digest 失败，使用替代方案 // 如果 crypto.subtle.digest 失败，使用替代方案
const fallbackHash = generateFallbackHash(file) const fallbackHash = generateFallbackHash(file)
console.error('File hash calculation failed:', err)
resolve(fallbackHash) resolve(fallbackHash)
} }
} }
@@ -661,7 +880,7 @@ const handleChunkUpload = async (file: File) => {
const chunkSize = 5 * 1024 * 1024 const chunkSize = 5 * 1024 * 1024
const chunks = Math.ceil(file.size / chunkSize) const chunks = Math.ceil(file.size / chunkSize)
// 1. 初始化切片上传 // 1. 初始化切片上传
const initResponse: any = await api.post('chunk/upload/init/', { const initResponse: ApiResponse = await api.post('chunk/upload/init/', {
file_name: file.name, file_name: file.name,
file_size: file.size, file_size: file.size,
chunk_size: chunkSize, chunk_size: chunkSize,
@@ -686,14 +905,14 @@ const handleChunkUpload = async (file: File) => {
chunkFormData.append('chunk', new Blob([chunk], { type: file.type })) // 确保以Blob形式添加 chunkFormData.append('chunk', new Blob([chunk], { type: file.type })) // 确保以Blob形式添加
// 使用 application/x-www-form-urlencoded 格式 // 使用 application/x-www-form-urlencoded 格式
const chunkResponse: any = await api.post( const chunkResponse: ApiResponse = await api.post(
`chunk/upload/chunk/${uploadId}/${i}`, `chunk/upload/chunk/${uploadId}/${i}`,
chunkFormData, chunkFormData,
{ {
headers: { headers: {
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data'
}, },
onUploadProgress: (progressEvent: any) => { onUploadProgress: (progressEvent: { loaded: number; total?: number }) => {
const percentCompleted = Math.round( const percentCompleted = Math.round(
((i * chunkSize + progressEvent.loaded) * 100) / file.size ((i * chunkSize + progressEvent.loaded) * 100) / file.size
) )
@@ -708,7 +927,7 @@ const handleChunkUpload = async (file: File) => {
} }
// 3. 完成上传 // 3. 完成上传
const completeResponse: any = await api.post(`chunk/upload/complete/${uploadId}`, { const completeResponse: ApiResponse = await api.post(`chunk/upload/complete/${uploadId}`, {
expire_value: expirationValue.value ? parseInt(expirationValue.value) : 1, expire_value: expirationValue.value ? parseInt(expirationValue.value) : 1,
expire_style: expirationMethod.value expire_style: expirationMethod.value
}) })
@@ -718,10 +937,13 @@ const handleChunkUpload = async (file: File) => {
} }
return completeResponse return completeResponse
} catch (error: any) { } catch (error: unknown) {
console.error('切片上传失败:', error) console.error('切片上传失败:', error)
if (error.response?.data?.detail) { if (error && typeof error === 'object' && 'response' in error) {
alertStore.showAlert(error.response.data.detail, 'error') const axiosError = error as { response?: { data?: { detail?: string } } }
if (axiosError.response?.data?.detail) {
alertStore.showAlert(axiosError.response.data.detail, 'error')
}
} else { } else {
alertStore.showAlert('上传失败,请稍后重试', 'error') alertStore.showAlert('上传失败,请稍后重试', 'error')
} }
@@ -735,15 +957,15 @@ const handleDefaultFileUpload = async (file: File) => {
headers: { headers: {
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data'
}, },
onUploadProgress: (progressEvent: any) => { onUploadProgress: (progressEvent: { loaded: number; total?: number }) => {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total) const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 1))
uploadProgress.value = percentCompleted uploadProgress.value = percentCompleted
} }
} }
formData.append('file', file) formData.append('file', file)
formData.append('expire_value', expirationValue.value) formData.append('expire_value', expirationValue.value)
formData.append('expire_style', expirationMethod.value) formData.append('expire_style', expirationMethod.value)
const response: any = await api.post('share/file/', formData, config) const response: ApiResponse = await api.post('share/file/', formData, config)
return response return response
} }
const checkOpenUpload = () => { const checkOpenUpload = () => {
@@ -815,7 +1037,7 @@ const handleSubmit = async () => {
} }
try { try {
let response: any let response: ApiResponse
if (sendType.value === 'file') { if (sendType.value === 'file') {
// 使用切片上传替代原来的直接上传 // 使用切片上传替代原来的直接上传
@@ -838,10 +1060,10 @@ const handleSubmit = async () => {
} }
if (response && response.code === 200) { if (response && response.code === 200) {
const retrieveCode = response.detail.code const retrieveCode = response.detail.code || ''
const fileName = response.detail.name const fileName = response.detail.name || ''
// 添加新的发送记录 // 添加新的发送记录
const newRecord = { const newRecord: ShareRecord = {
id: Date.now(), id: Date.now(),
filename: fileName, filename: fileName,
date: new Date().toISOString().split('T')[0], date: new Date().toISOString().split('T')[0],
@@ -870,10 +1092,13 @@ const handleSubmit = async () => {
} else { } else {
throw new Error('服务器响应异常') throw new Error('服务器响应异常')
} }
} catch (error: any) { } catch (error: unknown) {
console.error('发送失败:', error) console.error('发送失败:', error)
if (error.response?.data?.detail) { if (error && typeof error === 'object' && 'response' in error) {
alertStore.showAlert(error.response.data.detail, 'error') const axiosError = error as { response?: { data?: { detail?: string } } }
if (axiosError.response?.data?.detail) {
alertStore.showAlert(axiosError.response.data.detail, 'error')
}
} else { } else {
alertStore.showAlert('发送失败,请稍后重试', 'error') alertStore.showAlert('发送失败,请稍后重试', 'error')
} }
@@ -890,18 +1115,18 @@ const toggleDrawer = () => {
showDrawer.value = !showDrawer.value showDrawer.value = !showDrawer.value
} }
const viewDetails = (record: any) => { const viewDetails = (record: ShareRecord) => {
selectedRecord.value = record selectedRecord.value = record
} }
const deleteRecord = (id: number) => { const deleteRecord = (id: number) => {
const index = fileDataStore.shareData.findIndex((record: any) => record.id === id) const index = fileDataStore.shareData.findIndex((record: ShareRecord) => record.id === id)
if (index !== -1) { if (index !== -1) {
fileDataStore.deleteShareData(index) fileDataStore.deleteShareData(index)
} }
} }
const baseUrl = window.location.origin + '/#/' const baseUrl = window.location.origin + '/#/'
const getQRCodeValue = (record: any) => { const getQRCodeValue = (record: ShareRecord) => {
return `${baseUrl}?code=${record.retrieveCode}` return `${baseUrl}?code=${record.retrieveCode}`
} }
@@ -990,4 +1215,55 @@ select option:hover {
.dark select option:hover { .dark select option:hover {
background-color: rgb(99 102 241 / 0.2); background-color: rgb(99 102 241 / 0.2);
} }
/* 自定义滚动条样式 */
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: rgba(156, 163, 175, 0.4) rgba(243, 244, 246, 0.3);
}
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(243, 244, 246, 0.3);
border-radius: 6px;
margin: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.6), rgba(168, 85, 247, 0.6));
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(168, 85, 247, 0.8));
transform: scale(1.1);
}
.custom-scrollbar::-webkit-scrollbar-corner {
background: transparent;
}
/* 深色模式下的滚动条样式 */
.dark .custom-scrollbar {
scrollbar-color: rgba(75, 85, 99, 0.6) rgba(31, 41, 55, 0.4);
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: rgba(31, 41, 55, 0.4);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.7), rgba(168, 85, 247, 0.7));
border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(168, 85, 247, 0.9));
}
</style> </style>