Skip to content

Commit 67cd4a5

Browse files
lingviewlingview
committed
style(frontend): 优化音乐上传组件ui
优化音乐上传组件ui
1 parent d63eb18 commit 67cd4a5

2 files changed

Lines changed: 84 additions & 96 deletions

File tree

‎frontend/src/components/dashboard/SiteSettingsView.jsx‎

Lines changed: 50 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1137,11 +1137,13 @@ export default function SiteSettingsView() {
11371137

11381138
<div
11391139
onClick={() => audioFileInputRef.current?.click()}
1140-
className="music-upload-zone border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-colors"
1140+
className="music-upload-zone relative flex flex-col items-center justify-center border-2 border-dashed border-gray-200 rounded-xl p-8 text-center cursor-pointer hover:border-gray-300 hover:bg-gray-50/50 transition-colors group"
11411141
>
1142-
<svg className="mx-auto mb-2 w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1143-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" />
1144-
</svg>
1142+
<div className="w-12 h-12 mb-3 rounded-full bg-gray-100 flex items-center justify-center group-hover:bg-gray-200 transition-colors">
1143+
<svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1144+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" />
1145+
</svg>
1146+
</div>
11451147
<p className="text-sm text-gray-600">点击选择音频文件</p>
11461148
<p className="text-xs text-gray-400 mt-1">支持一次选择多个文件 · 自动识别歌手名</p>
11471149
<p className="text-xs text-gray-400">文件名格式：歌手 - 曲名.mp3</p>
@@ -1156,26 +1158,21 @@ export default function SiteSettingsView() {
11561158
</div>
11571159

11581160
{uploadQueue.length > 0 && (
1159-
<div className="mt-4 space-y-3">
1161+
<div className="mt-4 space-y-2">
11601162
{uploadQueue.map(item => (
11611163
<div
11621164
key={item.id}
1163-
className={`music-queue-item flex items-center gap-3 p-3 rounded-lg border ${
1164-
item.status === 'uploading' ? 'border-blue-200 bg-blue-50 music-queue-uploading' :
1165-
item.status === 'done' ? 'border-green-200 bg-green-50 music-queue-done' :
1166-
item.status === 'error' ? 'border-red-200 bg-red-50 music-queue-error' :
1167-
'border-gray-200 bg-white music-queue-pending'
1168-
}`}
1165+
className="music-queue-item flex items-start gap-3 p-4 rounded-lg border border-gray-200 bg-white"
11691166
>
1170-
<div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-2">
1167+
<div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-2 min-w-0">
11711168
<input
11721169
type="text"
11731170
value={item.musicName}
11741171
placeholder="曲名"
11751172
onChange={e => setUploadQueue(prev => prev.map(q =>
11761173
q.id === item.id ? { ...q, musicName: e.target.value } : q
11771174
))}
1178-
className="music-queue-input px-2 py-1.5 text-sm border border-gray-300 bg-white text-gray-900 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
1175+
className="music-queue-input px-2.5 py-1.5 text-sm border border-gray-200 bg-white text-gray-900 rounded-md focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400"
11791176
/>
11801177
<input
11811178
type="text"
@@ -1184,7 +1181,7 @@ export default function SiteSettingsView() {
11841181
onChange={e => setUploadQueue(prev => prev.map(q =>
11851182
q.id === item.id ? { ...q, musicAuthor: e.target.value } : q
11861183
))}
1187-
className="music-queue-input px-2 py-1.5 text-sm border border-gray-300 bg-white text-gray-900 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
1184+
className="music-queue-input px-2.5 py-1.5 text-sm border border-gray-200 bg-white text-gray-900 rounded-md focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400"
11881185
/>
11891186
<input
11901187
type="text"
@@ -1194,52 +1191,59 @@ export default function SiteSettingsView() {
11941191
onChange={e => setUploadQueue(prev => prev.map(q =>
11951192
q.id === item.id ? { ...q, musicUrl: e.target.value } : q
11961193
))}
1197-
className="music-queue-input sm:col-span-2 px-2 py-1.5 text-sm border border-gray-300 bg-white text-gray-900 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:bg-gray-100 disabled:opacity-60"
1194+
className="music-queue-input sm:col-span-2 px-2.5 py-1.5 text-sm border border-gray-200 bg-white text-gray-900 rounded-md focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 disabled:bg-gray-50 disabled:opacity-60"
11981195
/>
11991196
</div>
12001197

1201-
<div className="flex flex-col items-center gap-1 min-w-[52px]">
1198+
<div className="flex flex-col items-center gap-1.5 min-w-[44px] pt-0.5">
12021199
{item.status === 'uploading' && (
1203-
<>
1204-
<div className="music-spinner w-5 h-5 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" />
1205-
<span className="text-xs text-blue-600 music-status-uploading">上传中</span>
1206-
</>
1200+
<div className="flex flex-col items-center gap-1">
1201+
<div className="w-4 h-4 border-[2px] border-gray-200 border-t-gray-500 rounded-full animate-spin" />
1202+
<span className="text-[11px] text-gray-400 whitespace-nowrap">上传中</span>
1203+
</div>
12071204
)}
12081205
{item.status === 'done' && (
1209-
<>
1210-
<svg className="w-5 h-5 text-green-600 music-status-done-icon" fill="currentColor" viewBox="0 0 20 20">
1211-
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"/>
1206+
<div className="flex flex-col items-center gap-1">
1207+
<svg className="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1208+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
12121209
</svg>
1213-
<span className="text-xs text-green-600 music-status-done">完成</span>
1214-
</>
1210+
<span className="text-[11px] text-blue-500 whitespace-nowrap">就绪</span>
1211+
</div>
12151212
)}
12161213
{item.status === 'error' && (
1217-
<>
1218-
<svg className="w-5 h-5 text-red-500 music-status-error-icon" fill="currentColor" viewBox="0 0 20 20">
1219-
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd"/>
1220-
</svg>
1221-
<span className="text-xs text-red-500 music-status-error">失败</span>
1222-
</>
1214+
<div className="flex flex-col items-center gap-1">
1215+
<div className="w-4 h-4 rounded-full bg-red-100 flex items-center justify-center">
1216+
<svg className="w-2.5 h-2.5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1217+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
1218+
</svg>
1219+
</div>
1220+
<span className="text-[11px] text-red-400 whitespace-nowrap">失败</span>
1221+
</div>
12231222
)}
12241223
<button
12251224
type="button"
12261225
onClick={() => setUploadQueue(prev => prev.filter(q => q.id !== item.id))}
1227-
className="music-remove-btn text-xs text-gray-400 hover:text-red-500 mt-1"
1226+
className="text-[11px] text-gray-300 hover:text-red-400 transition-colors mt-0.5"
12281227
>
12291228
移除
12301229
</button>
12311230
</div>
12321231
</div>
12331232
))}
12341233

1235-
<button
1236-
type="button"
1237-
onClick={addAllQueuedMusic}
1238-
disabled={!uploadQueue.some(q => q.status === 'done')}
1239-
className="mt-2 px-5 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed"
1240-
>
1241-
全部加入曲库（{uploadQueue.filter(q => q.status === 'done').length} 首就绪）
1242-
</button>
1234+
<div className="flex items-center justify-end gap-3 pt-2">
1235+
<span className="text-xs text-gray-400">
1236+
{uploadQueue.filter(q => q.status === 'done').length} 首上传就绪
1237+
</span>
1238+
<button
1239+
type="button"
1240+
onClick={addAllQueuedMusic}
1241+
disabled={!uploadQueue.some(q => q.status === 'done')}
1242+
className="px-4 py-1.5 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
1243+
>
1244+
加入曲库
1245+
</button>
1246+
</div>
12431247
</div>
12441248
)}
12451249
</div>
@@ -1300,12 +1304,12 @@ export default function SiteSettingsView() {
13001304
</div>
13011305

13021306
<div className="flex items-center justify-between pt-2 border-t border-gray-100 music-list-card-footer">
1303-
<span className="text-xs text-green-600 font-medium music-status-enabled">启用</span>
1307+
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600 music-status-enabled">已启用</span>
13041308
<div className="flex gap-2">
13051309
{editingMusic && editingMusic.id === music.id ? (
13061310
<>
1307-
<button type="button" onClick={saveEditMusic} className="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700">保存</button>
1308-
<button type="button" onClick={cancelEditMusic} className="px-3 py-1 bg-gray-500 text-white text-sm rounded hover:bg-gray-600">取消</button>
1311+
<button type="button" onClick={saveEditMusic} className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors">保存</button>
1312+
<button type="button" onClick={cancelEditMusic} className="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50 transition-colors">取消</button>
13091313
</>
13101314
) : (
13111315
<>
@@ -1352,13 +1356,13 @@ export default function SiteSettingsView() {
13521356
)}
13531357
</td>
13541358
<td className="px-4 py-3 whitespace-nowrap music-table-cell">
1355-
<span className="font-medium text-green-600 music-status-enabled">启用</span>
1359+
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600 music-status-enabled">已启用</span>
13561360
</td>
13571361
<td className="px-4 py-3 whitespace-nowrap music-table-cell">
13581362
{editingMusic && editingMusic.id === music.id ? (
13591363
<div className="flex gap-2">
1360-
<button type="button" onClick={saveEditMusic} className="text-green-600 hover:text-green-900 music-btn-save-text">保存</button>
1361-
<button type="button" onClick={cancelEditMusic} className="text-gray-600 hover:text-gray-900 music-btn-cancel-text">取消</button>
1364+
<button type="button" onClick={saveEditMusic} className="text-blue-600 hover:text-blue-700 music-btn-save-text text-sm font-medium">保存</button>
1365+
<button type="button" onClick={cancelEditMusic} className="text-gray-400 hover:text-gray-600 music-btn-cancel-text text-sm">取消</button>
13621366
</div>
13631367
) : (
13641368
<div className="flex gap-2">

0 commit comments

Comments
 (0)