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

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

Browse Source
This commit is contained in:
Lan
2025-03-16 23:03:46 +08:00
parent 9089332a32
commit 5ca36a51d5
1 changed files with 104 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/SendFileView.vue
+104 -40
View File
@@ -94,59 +94,100 @@
过期时间 过期时间
</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="[
isDarkMode 'relative h-11 rounded-xl border transition-all duration-300',
? 'bg-gray-800/50 border-gray-700 group-hover:border-gray-600' isDarkMode
: 'bg-white border-gray-200 group-hover:border-gray-300' ? 'bg-gray-800/50 border-gray-700/50 group-hover:border-gray-600'
]"> : 'bg-white border-gray-200 group-hover:border-gray-300'
]"
>
<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"
'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent', type="number"
'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', :placeholder="getPlaceholder()"
'bg-transparent', min="1"
isDarkMode ? 'text-white' : 'text-gray-900' :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-offset-0',
'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
'bg-transparent',
isDarkMode
? 'text-gray-100 focus:ring-indigo-500/70 placeholder-gray-500'
: 'text-gray-900 focus:ring-indigo-500/50 placeholder-gray-400'
]"
/>
<div class="absolute right-24 top-0 h-full flex flex-col border-l" <div class="absolute right-24 top-0 h-full flex flex-col border-l"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"> :class="[isDarkMode ? 'border-gray-700/50' : 'border-gray-200']">
<button type="button" @click="incrementValue(1)" <button
class="flex-1 px-2 flex items-center justify-center transition-colors duration-200 hover:bg-opacity-50" type="button"
:class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100']"> @click="incrementValue(1)"
<svg class="w-3 h-3" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" fill="none" class="flex-1 px-2 flex items-center justify-center transition-all duration-200"
viewBox="0 0 24 24" stroke="currentColor"> :class="[
isDarkMode
? 'hover:bg-gray-700/50 text-gray-400 hover:text-gray-200'
: '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">
<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-colors duration-200 hover:bg-opacity-50" type="button"
:class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100']"> @click="incrementValue(-1)"
<svg class="w-3 h-3" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" fill="none" class="flex-1 px-2 flex items-center justify-center transition-all duration-200"
viewBox="0 0 24 24" stroke="currentColor"> :class="[
isDarkMode
? 'hover:bg-gray-700/50 text-gray-400 hover:text-gray-200'
: '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">
<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 bg-transparent', v-model="expirationMethod"
'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-0', :class="[
expirationMethod === 'forever' ? 'w-full px-4' : 'w-24 pl-3 pr-8 border-l', 'absolute right-0 top-0 h-full appearance-none cursor-pointer',
isDarkMode 'focus:outline-none focus:ring-2 focus:ring-offset-0',
? 'text-white border-gray-700' expirationMethod === 'forever' ? 'w-full px-4' : 'w-24 pl-3 pr-8 border-l',
: 'text-gray-900 border-gray-200' isDarkMode
]"> ? 'text-gray-100 border-gray-700/50 focus:ring-indigo-500/70 bg-gray-800/50'
<option v-for="item in config.expireStyle" :value="item" :key="item"> : 'text-gray-900 border-gray-200 focus:ring-indigo-500/50 bg-white'
]"
>
<option
v-for="item in config.expireStyle"
:value="item"
:key="item"
:class="[
isDarkMode
? 'bg-gray-800 text-gray-100'
: 'bg-white text-gray-900'
]"
>
{{ getUnit(item) }} {{ getUnit(item) }}
</option> </option>
</select> </select>
<div class="absolute pointer-events-none" :class="[ <div
expirationMethod === 'forever' ? 'right-3' : 'right-2', class="absolute pointer-events-none"
'top-1/2 -translate-y-1/2' :class="[
]"> expirationMethod === 'forever' ? 'right-3' : 'right-2',
<svg class="w-4 h-4 transition-colors duration-300" 'top-1/2 -translate-y-1/2'
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" fill="none" stroke="currentColor" ]"
viewBox="0 0 24 24"> >
<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" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg> </svg>
</div> </div>
@@ -879,4 +920,27 @@ onMounted(() => {
opacity: 0; opacity: 0;
transform: translateX(30px); transform: translateX(30px);
} }
select option {
padding: 8px;
margin: 4px;
border-radius: 6px;
}
select option:checked {
background: linear-gradient(to right, rgb(99 102 241 / 0.5), rgb(168 85 247 / 0.5)) !important;
color: white !important;
}
.dark select option:checked {
background: linear-gradient(to right, rgb(99 102 241 / 0.7), rgb(168 85 247 / 0.7)) !important;
}
select option:hover {
background-color: rgb(99 102 241 / 0.1);
}
.dark select option:hover {
background-color: rgb(99 102 241 / 0.2);
}
</style> </style>