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

1

Browse Source
This commit is contained in:
Lan
2024-10-07 15:54:49 +08:00
parent 1a69c16030
commit a3782d2c1b
2 changed files with 63 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/RetrievewFileView.vue
+26 -16
View File
@@ -146,29 +146,30 @@
<div <div
v-for="record in records" v-for="record in records"
:key="record.id" :key="record.id"
class="bg-opacity-50 rounded-lg p-4 flex justify-between 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 items-center space-x-4"> <div class="flex-shrink-0 mr-4">
<div class="flex-shrink-0">
<FileIcon <FileIcon
class="w-10 h-10" class="w-10 h-10"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/> />
</div> </div>
<div> <div class="flex-grow min-w-0 mr-4">
<p <p
class="font-medium text-lg" class="font-medium text-lg truncate"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']" :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
> >
{{ record.filename }} {{ record.filename }}
</p> </p>
<p class="text-sm" :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> <div class="flex-shrink-0 flex space-x-2">
<div class="flex space-x-2">
<button <button
@click="viewDetails(record)" @click="viewDetails(record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
@@ -213,11 +214,11 @@
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
> >
<div <div
class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70" class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70 overflow-hidden"
:class="[isDarkMode ? 'bg-gray-800' : 'bg-white']" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
> >
<h3 <h3
class="text-2xl font-bold mb-6" class="text-2xl font-bold mb-6 truncate"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']" :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
> >
文件详情 文件详情
@@ -225,28 +226,37 @@
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center"> <div class="flex items-center">
<FileIcon <FileIcon
class="w-6 h-6 mr-3" class="w-6 h-6 mr-3 flex-shrink-0"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/> />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"> <p
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
class="truncate flex-grow"
>
<span class="font-medium">文件名：</span>{{ selectedRecord.filename }} <span class="font-medium">文件名：</span>{{ selectedRecord.filename }}
</p> </p>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<CalendarIcon <CalendarIcon
class="w-6 h-6 mr-3" class="w-6 h-6 mr-3 flex-shrink-0"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/> />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"> <p
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
class="truncate flex-grow"
>
<span class="font-medium">取件日期：</span>{{ selectedRecord.date }} <span class="font-medium">取件日期：</span>{{ selectedRecord.date }}
</p> </p>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<HardDriveIcon <HardDriveIcon
class="w-6 h-6 mr-3" class="w-6 h-6 mr-3 flex-shrink-0"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/> />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"> <p
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
class="truncate flex-grow"
>
<span class="font-medium">文件大小：</span>{{ selectedRecord.size }} <span class="font-medium">文件大小：</span>{{ selectedRecord.size }}
</p> </p>
</div> </div>
src/views/SendFileView.vue
+12 -9
View File
@@ -81,13 +81,15 @@
/> />
<p <p
:class="[ :class="[
'mt-4 text-sm transition-colors duration-300', '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">
{{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }} {{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }}
</span>
</p> </p>
<p :class="['mt-2 text-xs', isDarkMode ? 'text-gray-500' : 'text-gray-400']"> <p :class="['mt-2 text-xs', isDarkMode ? 'text-gray-500' : 'text-gray-400']">
支持各种常见格式，最大20MB 支持各种常见格式，最大20MB
@@ -226,29 +228,30 @@
<div <div
v-for="record in sendRecords" v-for="record in sendRecords"
:key="record.id" :key="record.id"
class="bg-opacity-50 rounded-lg p-4 flex justify-between 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 items-center space-x-4"> <div class="flex-shrink-0 mr-4">
<div class="flex-shrink-0">
<FileIcon <FileIcon
class="w-10 h-10" class="w-10 h-10"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/> />
</div> </div>
<div> <div class="flex-grow min-w-0 mr-4">
<p <p
class="font-medium text-lg" class="font-medium text-lg truncate"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']" :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
> >
{{ record.filename }} {{ record.filename }}
</p> </p>
<p class="text-sm" :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> <div class="flex-shrink-0 flex space-x-2">
<div class="flex space-x-2">
<button <button
@click="copyRetrieveLink(record.retrieveCode)" @click="copyRetrieveLink(record.retrieveCode)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"