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

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

Browse Source
This commit is contained in:
Lan
2025-03-16 22:19:28 +08:00
parent f802e1c406
commit f2608adf3c
1 changed files with 54 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/SendFileView.vue
+54 -85
View File
@@ -94,92 +94,64 @@
过期时间
</label>
<div class="relative flex-grow group">
<div
:class="[
'relative h-11 rounded-xl border transition-all duration-300',
isDarkMode
? 'bg-gray-800/50 border-gray-700 group-hover:border-gray-600'
: 'bg-white border-gray-200 group-hover:border-gray-300'
]"
>
<div :class="[
'relative h-11 rounded-xl border transition-all duration-300',
isDarkMode
? 'bg-gray-800/50 border-gray-700 group-hover:border-gray-600'
: 'bg-white border-gray-200 group-hover:border-gray-300'
]">
<template v-if="expirationMethod !== 'forever'">
<input
v-model="expirationValue"
type="number"
:placeholder="getPlaceholder()"
min="1"
:class="[
'w-full h-full px-4 pr-32 rounded-xl placeholder-gray-400 transition-all duration-300',
'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent',
'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
'bg-transparent',
isDarkMode ? 'text-white' : 'text-gray-900'
]"
/>
<input v-model="expirationValue" type="number" :placeholder="getPlaceholder()" min="1" :class="[
'w-full h-full px-4 pr-32 rounded-xl placeholder-gray-400 transition-all duration-300',
'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent',
'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
'bg-transparent',
isDarkMode ? 'text-white' : 'text-gray-900'
]" />
<div class="absolute right-24 top-0 h-full flex flex-col border-l"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
<button
type="button"
@click="incrementValue(1)"
<button type="button" @click="incrementValue(1)"
class="flex-1 px-2 flex items-center justify-center transition-colors duration-200 hover:bg-opacity-50"
:class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100']"
>
<svg class="w-3 h-3" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
:class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100']">
<svg class="w-3 h-3" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" 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" />
</svg>
</button>
<button
type="button"
@click="incrementValue(-1)"
<button type="button" @click="incrementValue(-1)"
class="flex-1 px-2 flex items-center justify-center transition-colors duration-200 hover:bg-opacity-50"
:class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100']"
>
<svg class="w-3 h-3" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
:class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100']">
<svg class="w-3 h-3" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" 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" />
</svg>
</button>
</div>
</template>
<select
v-model="expirationMethod"
:class="[
'absolute right-0 top-0 h-full appearance-none cursor-pointer bg-transparent',
'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-0',
expirationMethod === 'forever' ? 'w-full px-4' : 'w-24 pl-3 pr-8 border-l',
isDarkMode
? 'text-white border-gray-700'
: 'text-gray-900 border-gray-200'
]"
>
<select v-model="expirationMethod" :class="[
'absolute right-0 top-0 h-full appearance-none cursor-pointer bg-transparent',
'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-0',
expirationMethod === 'forever' ? 'w-full px-4' : 'w-24 pl-3 pr-8 border-l',
isDarkMode
? 'text-white border-gray-700'
: 'text-gray-900 border-gray-200'
]">
<option v-for="item in config.expireStyle" :value="item" :key="item">
{{ getUnit(item) }}
</option>
</select>
<div
class="absolute pointer-events-none"
:class="[
expirationMethod === 'forever' ? 'right-3' : 'right-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"
viewBox="0 0 24 24"
>
<div class="absolute pointer-events-none" :class="[
expirationMethod === 'forever' ? 'right-3' : 'right-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"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
</div>
<p
class="text-xs transition-colors duration-300"
:class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']"
>
选择文件过期的时间，过期后文件将自动删除
</p>
</div>
<!-- 提交按钮 -->
<button type="submit"
@@ -276,11 +248,8 @@
<!-- 记录详情弹窗 -->
<transition name="fade">
<div 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
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']">
<div 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 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']">
<!-- 顶部标题栏 -->
<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">
@@ -304,27 +273,27 @@
<FileIcon class="w-5 h-5 sm:w-6 sm:h-6"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
</div>
<div class="ml-3 sm:ml-4">
<h4 class="font-medium text-sm sm:text-base" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
<div class="ml-3 sm:ml-4 min-w-0 flex-1">
<h4 class="font-medium text-sm sm:text-base truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
{{ selectedRecord.filename }}
</h4>
<p class="text-xs sm:text-sm" :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 }}
</p>
</div>
</div>
<div class="grid grid-cols-2 gap-3 sm:gap-4">
<div class="flex items-center">
<ClockIcon class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 sm:mr-2"
<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"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
<span class="text-xs sm:text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
<span class="text-xs sm:text-sm truncate" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
{{ selectedRecord.expiration }}
</span>
</div>
<div class="flex items-center">
<ShieldCheckIcon class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 sm:mr-2"
<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"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
<span class="text-xs sm:text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
<span class="text-xs sm:text-sm truncate" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
安全加密
</span>
</div>
@@ -343,25 +312,25 @@
<ClipboardCopyIcon class="w-4 h-4 sm:w-5 sm:h-5" />
</button>
</div>
<p class="text-2xl sm:text-3xl font-bold tracking-wider text-center">{{ selectedRecord.retrieveCode }}
<p class="text-2xl sm:text-3xl font-bold tracking-wider text-center break-all">{{ selectedRecord.retrieveCode }}
</p>
</div>
<div 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">
<h4 class="font-medium text-sm sm:text-base flex items-center"
<h4 class="font-medium text-sm sm:text-base flex items-center min-w-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" />
wget下载
<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>
</h4>
<button @click="copyWgetCommand(selectedRecord.retrieveCode)"
class="p-1.5 sm:p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
class="p-1.5 sm:p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0">
<ClipboardCopyIcon class="w-4 h-4 sm:w-5 sm:h-5"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
</button>
</div>
<p class="text-xs sm:text-sm font-mono break-all"
<p class="text-xs sm:text-sm font-mono break-all line-clamp-2"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
点击复制wget命令
</p>
@@ -375,7 +344,7 @@
<QRCode :value="getQRCodeValue(selectedRecord)" :size="140" level="M"
class="sm:w-[160px] sm:h-[160px]" />
</div>
<p class="text-xs sm:text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
<p class="text-xs sm:text-sm truncate max-w-full" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
扫描二维码快速取件
</p>
</div>