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

refactor: modularize frontend flows

Browse Source
This commit is contained in:
Lan
2026-06-03 02:01:57 +08:00
parent 9300607f96
commit a11e7900b4
85 changed files with 4654 additions and 4363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/AlertComponent.vue
+3 -9
View File
@@ -53,7 +53,7 @@ const { t } = useI18n()
const alertStore = useAlertStore()
const { alerts } = storeToRefs(alertStore)
const { removeAlert, updateAlertProgress } = alertStore
const { removeAlert, startProgressTimer, stopProgressTimer } = alertStore
const gradientClasses = {
success: 'from-green-500 to-green-600',
@@ -69,18 +69,12 @@ const alertIcons = {
info: Info
}
let intervalId: ReturnType<typeof setInterval>
onMounted(() => {
intervalId = setInterval(() => {
alerts.value.forEach((alert) => {
updateAlertProgress(alert.id)
})
}, 100)
startProgressTimer()
})
onUnmounted(() => {
clearInterval(intervalId)
stopProgressTimer()
})
</script>
src/components/common/BaseButton.vue
+6 -5
View File
@@ -18,7 +18,8 @@
</template>
<script setup lang="ts">
import { computed, inject } from 'vue'
import { computed } from 'vue'
import { useInjectedDarkMode } from '@/composables'
interface Props {
variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'outline'
@@ -40,7 +41,7 @@ defineEmits<{
click: [event: MouseEvent]
}>()
const isDarkMode = inject('isDarkMode')
const isDarkMode = useInjectedDarkMode()
const sizeClasses = computed(() => {
const sizes = {
@@ -59,7 +60,7 @@ const variantClasses = computed(() => {
}
if (props.variant === 'secondary') {
return isDarkMode
return isDarkMode.value
? `${baseClasses} bg-gray-700 text-gray-300 hover:bg-gray-600 focus:ring-gray-500 border border-gray-600`
: `${baseClasses} bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300`
}
@@ -73,11 +74,11 @@ const variantClasses = computed(() => {
}
if (props.variant === 'outline') {
return isDarkMode
return isDarkMode.value
? `${baseClasses} border border-gray-600 text-gray-300 hover:bg-gray-700 focus:ring-gray-500`
: `${baseClasses} border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500`
}
return ''
})
</script>
</script>
src/components/common/ExpirationSelector.vue
+38 -17
View File
@@ -77,23 +77,40 @@
:value="expirationMethod"
@change="updateMethod"
:class="[
'absolute right-0 top-0 h-full px-4 rounded-r-2xl border-l transition-all duration-300',
'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',
'bg-transparent appearance-none cursor-pointer',
expirationMethod === 'forever'
? 'w-full px-5 rounded-2xl'
: 'w-28 pl-4 pr-9 border-l rounded-r-2xl',
isDarkMode
? 'border-gray-700/60 text-gray-300 focus:ring-indigo-500/80'
: 'border-gray-200 text-gray-700 focus:ring-indigo-500/60'
? '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/60 bg-white'
]"
:style="{
color: isDarkMode ? '#f3f4f6' : '#111827',
backgroundColor: isDarkMode ? 'rgba(31, 41, 55, 0.5)' : '#ffffff'
}"
>
<option value="count">{{ t('send.expiration.units.times') }}</option>
<option value="minute">{{ t('send.expiration.units.minutes') }}</option>
<option value="hour">{{ t('send.expiration.units.hours') }}</option>
<option value="day">{{ t('send.expiration.units.days') }}</option>
<option value="forever">{{ t('send.expiration.units.forever') }}</option>
<option
v-for="option in options"
:key="option.value"
:value="option.value"
:class="[isDarkMode ? 'bg-gray-800 text-gray-100' : 'bg-white text-gray-900']"
:style="{
color: isDarkMode ? '#f3f4f6' : '#111827',
backgroundColor: isDarkMode ? '#1f2937' : '#ffffff'
}"
>
{{ option.label }}
</option>
</select>
<div
class="absolute right-4 top-1/2 transform -translate-y-1/2 pointer-events-none"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
class="absolute pointer-events-none"
:class="[
expirationMethod === 'forever' ? 'right-3' : 'right-2',
'top-1/2 -translate-y-1/2',
isDarkMode ? 'text-gray-400' : 'text-gray-500'
]"
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
@@ -117,12 +134,16 @@ const { t } = useI18n()
interface Props {
expirationMethod: string
expirationValue: number
expirationValue: string
options: Array<{
label: string
value: string
}>
}
interface Emits {
'update:expirationMethod': [value: string]
'update:expirationValue': [value: number]
'update:expirationValue': [value: string]
}
const props = defineProps<Props>()
@@ -136,13 +157,13 @@ const updateMethod = (event: Event) => {
const updateValue = (event: Event) => {
const target = event.target as HTMLInputElement
emit('update:expirationValue', parseInt(target.value) || 1)
emit('update:expirationValue', target.value)
}
const incrementValue = (delta: number) => {
const currentValue = props.expirationValue || 1
const currentValue = parseInt(props.expirationValue) || 0
const newValue = Math.max(1, currentValue + delta)
emit('update:expirationValue', newValue)
emit('update:expirationValue', newValue.toString())
}
const getPlaceholder = () => {
@@ -159,4 +180,4 @@ const getPlaceholder = () => {
return t('send.expiration.placeholders.default')
}
}
</script>
</script>
src/components/common/FileDetailModal.vue
+8 -28
View File
@@ -112,20 +112,12 @@ import { inject } from 'vue'
import { useI18n } from 'vue-i18n'
import { FileIcon, CalendarIcon, HardDriveIcon, DownloadIcon } from 'lucide-vue-next'
import QRCode from 'qrcode.vue'
interface FileRecord {
id: number
code: string
filename: string
size: string
downloadUrl: string | null
content: string | null
date: string
}
import type { ReceivedFileRecord } from '@/types'
import { buildDownloadUrl, buildReceivedRecordQrValue } from '@/utils/share-url'
interface Props {
visible: boolean
record: FileRecord | null
record: ReceivedFileRecord | null
}
interface Emits {
@@ -137,25 +129,13 @@ defineProps<Props>()
defineEmits<Emits>()
const { t } = useI18n()
const isDarkMode = inject('isDarkMode')
const baseUrl = window.location.origin
const getDownloadUrl = (record: FileRecord) => {
if (record.downloadUrl) {
if (record.downloadUrl.startsWith('http')) {
return record.downloadUrl
} else {
return `${baseUrl}${record.downloadUrl}`
}
}
return ''
const getDownloadUrl = (record: ReceivedFileRecord) => {
return buildDownloadUrl(record.downloadUrl)
}
const getQRCodeValue = (record: FileRecord) => {
if (record.downloadUrl) {
return `${baseUrl}${record.downloadUrl}`
} else {
return `${baseUrl}?code=${record.code}`
}
const getQRCodeValue = (record: ReceivedFileRecord) => {
return buildReceivedRecordQrValue(record)
}
</script>
@@ -169,4 +149,4 @@ const getQRCodeValue = (record: FileRecord) => {
.fade-leave-to {
opacity: 0;
}
</style>
</style>
src/components/common/FileEditField.vue
+75
View File
@@ -0,0 +1,75 @@
<template>
<div class="space-y-2 group">
<label
class="text-sm font-medium flex items-center space-x-2 transition-colors duration-200"
:class="[
isDarkMode
? 'text-gray-300 group-focus-within:text-indigo-400'
: 'text-gray-700 group-focus-within:text-indigo-600'
]"
>
<span>{{ label }}</span>
<div
class="h-px flex-1 transition-colors duration-200"
:class="[
isDarkMode
? 'bg-gray-700 group-focus-within:bg-indigo-500/50'
: 'bg-gray-200 group-focus-within:bg-indigo-500/30'
]"
></div>
</label>
<div class="relative rounded-lg shadow-sm">
<input
:type="type"
:value="modelValue ?? ''"
class="block w-full rounded-lg border-0 py-2.5 pl-4 pr-10 transition-all duration-200 focus:ring-2 focus:ring-inset sm:text-sm"
:class="[
isDarkMode
? 'bg-gray-700/50 text-white placeholder-gray-400 focus:ring-indigo-500/50'
: 'bg-gray-50 text-gray-900 placeholder-gray-400 focus:ring-indigo-500'
]"
:placeholder="placeholder"
@input="handleInput"
/>
<div
class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none transition-opacity duration-200 opacity-0 group-focus-within:opacity-100"
>
<CheckIcon class="w-5 h-5" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { inject } from 'vue'
import { CheckIcon } from 'lucide-vue-next'
const props = withDefaults(
defineProps<{
label: string
modelValue: string | number | null
placeholder?: string
type?: 'text' | 'number' | 'datetime-local'
}>(),
{
placeholder: '',
type: 'text'
}
)
const emit = defineEmits<{
'update:modelValue': [value: string | number | null]
}>()
const isDarkMode = inject('isDarkMode')
const handleInput = (event: Event) => {
const target = event.target as HTMLInputElement
if (props.type === 'number') {
emit('update:modelValue', target.value === '' ? null : target.valueAsNumber)
return
}
emit('update:modelValue', target.value)
}
</script>
src/components/common/FileRecordList.vue
+5 -14
View File
@@ -68,24 +68,15 @@
<script setup lang="ts">
import { inject } from 'vue'
import { FileIcon, EyeIcon, DownloadIcon, TrashIcon } from 'lucide-vue-next'
interface FileRecord {
id: number
code: string
filename: string
size: string
downloadUrl: string | null
content: string | null
date: string
}
import type { ReceivedFileRecord } from '@/types'
interface Props {
records: FileRecord[]
records: ReceivedFileRecord[]
}
interface Emits {
'view-details': [record: FileRecord]
'download-record': [record: FileRecord]
'view-details': [record: ReceivedFileRecord]
'download-record': [record: ReceivedFileRecord]
'delete-record': [id: number]
}
@@ -109,4 +100,4 @@ const isDarkMode = inject('isDarkMode')
.list-move {
transition: transform 0.3s ease;
}
</style>
</style>
src/components/common/FileUploadArea.vue
+12 -11
View File
@@ -84,10 +84,11 @@
</template>
<script setup lang="ts">
import { ref, inject, computed } from 'vue'
import { ref, computed } from 'vue'
import { UploadCloudIcon, CheckCircleIcon, XCircleIcon, LoaderIcon } from 'lucide-vue-next'
import BorderProgressBar from './BorderProgressBar.vue'
import { useI18n } from 'vue-i18n'
import { useInjectedDarkMode } from '@/composables'
const { t } = useI18n()
@@ -141,7 +142,7 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<Emits>()
const isDarkMode = inject('isDarkMode')
const isDarkMode = useInjectedDarkMode()
// 使用computed属性处理多语言文本
const placeholderText = computed(() => props.placeholder || t('send.uploadArea.placeholder'))
@@ -178,25 +179,25 @@ const statusIcon = computed(() => {
const statusIconClass = computed(() => {
if (isUploading.value) {
return isDarkMode ? 'text-indigo-400 animate-spin' : 'text-indigo-600 animate-spin'
return isDarkMode.value ? 'text-indigo-400 animate-spin' : 'text-indigo-600 animate-spin'
}
if (isSuccess.value) {
return isDarkMode ? 'text-green-400' : 'text-green-600'
return isDarkMode.value ? 'text-green-400' : 'text-green-600'
}
if (hasError.value) {
return isDarkMode ? 'text-red-400' : 'text-red-600'
return isDarkMode.value ? 'text-red-400' : 'text-red-600'
}
return isDarkMode
return isDarkMode.value
? 'text-gray-400 group-hover:text-indigo-400'
: 'text-gray-600 group-hover:text-indigo-600'
})
const statusClass = computed(() => {
if (hasError.value) {
return isDarkMode ? 'border-red-500/50' : 'border-red-300'
return isDarkMode.value ? 'border-red-500/50' : 'border-red-300'
}
if (isSuccess.value) {
return isDarkMode ? 'border-green-500/50' : 'border-green-300'
return isDarkMode.value ? 'border-green-500/50' : 'border-green-300'
}
return ''
})
@@ -222,12 +223,12 @@ const statusDescription = computed(() => {
const statusDescriptionClass = computed(() => {
if (hasError.value) {
return isDarkMode ? 'text-red-400' : 'text-red-500'
return isDarkMode.value ? 'text-red-400' : 'text-red-500'
}
if (isSuccess.value) {
return isDarkMode ? 'text-green-400' : 'text-green-500'
return isDarkMode.value ? 'text-green-400' : 'text-green-500'
}
return isDarkMode ? 'text-gray-500' : 'text-gray-400'
return isDarkMode.value ? 'text-gray-500' : 'text-gray-400'
})
const formatBytes = (bytes: number): string => {
src/components/common/LanguageSwitcher.vue
+5 -4
View File
@@ -1,5 +1,5 @@
<template>
<div class="relative">
<div ref="switcherRef" class="relative">
<button
@click="toggleDropdown"
:class="[
@@ -69,6 +69,7 @@ import { availableLocales, setLocale } from '@/i18n/index'
const { locale } = useI18n()
const isDarkMode = inject('isDarkMode')
const isDropdownOpen = ref(false)
const switcherRef = ref<HTMLElement | null>(null)
const currentLocale = computed(() => locale.value)
const currentLanguage = computed(() => {
@@ -86,8 +87,8 @@ const switchLanguage = (langCode: string) => {
// 点击外部关闭下拉菜单
const handleClickOutside = (event: Event) => {
const target = event.target as HTMLElement
if (!target.closest('.relative')) {
const target = event.target as Node | null
if (target && !switcherRef.value?.contains(target)) {
isDropdownOpen.value = false
}
}
@@ -99,4 +100,4 @@ onMounted(() => {
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside)
})
</script>
</script>
src/components/common/SentRecordDetailModal.vue
+214
View File
@@ -0,0 +1,214 @@
<template>
<transition name="fade">
<div
v-if="record"
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">
<h3
class="text-lg sm:text-xl font-semibold"
:class="[isDarkMode ? 'text-white' : 'text-gray-900']"
>
{{ t('send.fileDetails') }}
</h3>
<button
@click="$emit('close')"
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>
</div>
</div>
<div class="p-4 sm:p-6">
<div
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="p-2 sm:p-3 rounded-lg" :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 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']"
>
{{ record.filename }}
</h4>
<p
class="text-xs sm:text-sm truncate"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
{{ record.size }} · {{ record.date }}
</p>
</div>
</div>
<div class="grid grid-cols-2 gap-3 sm:gap-4">
<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 truncate"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"
>
{{ record.expiration }}
</span>
</div>
<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 truncate"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"
>
安全加密
</span>
</div>
</div>
</div>
<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="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">
<h4 class="font-medium text-sm sm:text-base">取件码</h4>
<button
@click="$emit('copy-code', record)"
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" />
</button>
</div>
<p class="text-2xl sm:text-3xl font-bold tracking-wider text-center break-all">
{{ record.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 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 flex-shrink-0" />
<span class="truncate">wget下载</span>
</h4>
<button
@click="$emit('copy-wget', record)"
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 line-clamp-2"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"
>
点击复制wget命令
</p>
</div>
</div>
<div
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">
<QRCode :value="qrValue" :size="140" level="M" class="sm:w-[160px] sm:h-[160px]" />
</div>
<p
class="text-xs sm:text-sm truncate max-w-full"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
扫描二维码快速取件
</p>
</div>
</div>
</div>
<div
class="px-4 sm:px-6 py-3 sm:py-4 border-t"
:class="[isDarkMode ? 'border-gray-800' : 'border-gray-100']"
>
<button
@click="$emit('copy-link', record)"
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>
</div>
</div>
</div>
</transition>
</template>
<script setup lang="ts">
import { computed, inject } from 'vue'
import {
ClipboardCopyIcon,
ClockIcon,
FileIcon,
ShieldCheckIcon,
TerminalIcon,
XIcon
} from 'lucide-vue-next'
import QRCode from 'qrcode.vue'
import { useI18n } from 'vue-i18n'
import type { SentFileRecord } from '@/types'
const props = defineProps<{
record: SentFileRecord | null
getQRCodeValue: (record: SentFileRecord) => string
}>()
defineEmits<{
close: []
'copy-code': [record: SentFileRecord]
'copy-link': [record: SentFileRecord]
'copy-wget': [record: SentFileRecord]
}>()
const { t } = useI18n()
const isDarkMode = inject('isDarkMode')
const qrValue = computed(() => (props.record ? props.getQRCodeValue(props.record) : ''))
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: translateY(10px);
}
</style>
src/components/common/SentRecordList.vue
+92
View File
@@ -0,0 +1,92 @@
<template>
<div class="flex-grow overflow-y-auto p-6">
<transition-group name="list" tag="div" class="space-y-4">
<div
v-for="record in records"
: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="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
>
<div class="flex-shrink-0 mr-4">
<FileIcon
class="w-10 h-10"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
</div>
<div class="flex-grow min-w-0 mr-4">
<p
class="font-medium text-lg truncate"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
{{ record.filename ? record.filename : 'Text' }}
</p>
<p class="text-sm truncate" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
{{ record.date }} · {{ record.size }}
</p>
</div>
<div class="flex-shrink-0 flex space-x-2">
<button
@click="$emit('copy-link', record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
:class="[
isDarkMode ? 'hover:bg-blue-400 text-blue-400' : 'hover:bg-blue-100 text-blue-600'
]"
>
<ClipboardCopyIcon class="w-5 h-5" />
</button>
<button
@click="$emit('view-details', record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
:class="[
isDarkMode
? 'hover:bg-green-400 text-green-400'
: 'hover:bg-green-100 text-green-600'
]"
>
<EyeIcon class="w-5 h-5" />
</button>
<button
@click="$emit('delete-record', 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'
]"
>
<TrashIcon class="w-5 h-5" />
</button>
</div>
</div>
</transition-group>
</div>
</template>
<script setup lang="ts">
import { inject } from 'vue'
import { ClipboardCopyIcon, EyeIcon, FileIcon, TrashIcon } from 'lucide-vue-next'
import type { SentFileRecord } from '@/types'
defineProps<{
records: SentFileRecord[]
}>()
defineEmits<{
'copy-link': [record: SentFileRecord]
'view-details': [record: SentFileRecord]
'delete-record': [id: number]
}>()
const isDarkMode = inject('isDarkMode')
</script>
<style scoped>
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>
src/components/common/SettingNumberInput.vue
+50
View File
@@ -0,0 +1,50 @@
<template>
<div class="space-y-2">
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
{{ label }}
</label>
<div class="flex items-center space-x-2">
<input
type="number"
:value="modelValue"
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
@input="handleInput"
/>
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">{{ suffix }}</span>
</div>
</div>
</template>
<script setup lang="ts">
import { inject } from 'vue'
defineProps<{
label: string
modelValue: number
suffix: string
}>()
const isDarkMode = inject('isDarkMode')
const emit = defineEmits<{
'update:modelValue': [value: number]
}>()
const handleInput = (event: Event) => {
const input = event.target as HTMLInputElement
if (!input.value) {
emit('update:modelValue', 0)
return
}
const nextValue = input.valueAsNumber
if (!Number.isNaN(nextValue)) {
emit('update:modelValue', nextValue)
}
}
</script>
src/components/common/SettingSwitch.vue
+45
View File
@@ -0,0 +1,45 @@
<template>
<div class="space-y-2">
<label class="block text-sm font-medium mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
{{ label }}
</label>
<div class="flex items-center">
<button
type="button"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
:class="[modelValue === 1 ? 'bg-indigo-600' : 'bg-gray-200']"
role="switch"
:aria-checked="modelValue === 1"
@click="$emit('toggle')"
>
<span
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
:class="[
modelValue === 1 ? 'translate-x-5' : 'translate-x-0',
isDarkMode && modelValue !== 1 ? 'bg-gray-100' : 'bg-white'
]"
/>
</button>
<span class="ml-3 text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
{{ modelValue === 1 ? enabledText : disabledText }}
</span>
</div>
</div>
</template>
<script setup lang="ts">
import { inject } from 'vue'
defineProps<{
label: string
modelValue: number
enabledText: string
disabledText: string
}>()
defineEmits<{
toggle: []
}>()
const isDarkMode = inject('isDarkMode')
</script>
src/components/common/StatCard.vue
+15 -14
View File
@@ -21,8 +21,9 @@
</template>
<script setup lang="ts">
import { inject, computed } from 'vue'
import { computed } from 'vue'
import type { Component } from 'vue'
import { useInjectedDarkMode } from '@/composables'
interface Props {
title: string
@@ -36,34 +37,34 @@ const props = withDefaults(defineProps<Props>(), {
descriptionType: 'neutral'
})
const isDarkMode = inject('isDarkMode')
const isDarkMode = useInjectedDarkMode()
const iconBgClass = computed(() => {
const colorMap = {
indigo: isDarkMode ? 'bg-indigo-900' : 'bg-indigo-100',
purple: isDarkMode ? 'bg-purple-900' : 'bg-purple-100',
green: isDarkMode ? 'bg-green-900' : 'bg-green-100',
blue: isDarkMode ? 'bg-blue-900' : 'bg-blue-100'
indigo: isDarkMode.value ? 'bg-indigo-900' : 'bg-indigo-100',
purple: isDarkMode.value ? 'bg-purple-900' : 'bg-purple-100',
green: isDarkMode.value ? 'bg-green-900' : 'bg-green-100',
blue: isDarkMode.value ? 'bg-blue-900' : 'bg-blue-100'
}
return colorMap[props.iconColor]
})
const iconClass = computed(() => {
const colorMap = {
indigo: isDarkMode ? 'text-indigo-400' : 'text-indigo-600',
purple: isDarkMode ? 'text-purple-400' : 'text-purple-600',
green: isDarkMode ? 'text-green-400' : 'text-green-600',
blue: isDarkMode ? 'text-blue-400' : 'text-blue-600'
indigo: isDarkMode.value ? 'text-indigo-400' : 'text-indigo-600',
purple: isDarkMode.value ? 'text-purple-400' : 'text-purple-600',
green: isDarkMode.value ? 'text-green-400' : 'text-green-600',
blue: isDarkMode.value ? 'text-blue-400' : 'text-blue-600'
}
return colorMap[props.iconColor]
})
const descriptionClass = computed(() => {
const typeMap = {
success: isDarkMode ? 'text-green-400' : 'text-green-600',
error: isDarkMode ? 'text-red-400' : 'text-red-600',
neutral: isDarkMode ? 'text-gray-400' : 'text-gray-600'
success: isDarkMode.value ? 'text-green-400' : 'text-green-600',
error: isDarkMode.value ? 'text-red-400' : 'text-red-600',
neutral: isDarkMode.value ? 'text-gray-400' : 'text-gray-600'
}
return typeMap[props.descriptionType]
})
</script>
</script>