Skip to content

Commit fe4d867

Browse files
LiuYuYang01LiuYuYang01
committed
refactor: 更新 Assistant 和 Storage 页面样式以支持暗黑模式
- 在 Assistant 页面中调整 Card 组件的样式，增加暗黑模式支持，提升视觉一致性。 - 在 Storage 页面中更新 Card 组件和装饰元素的样式，增强暗黑模式下的可读性和视觉效果。 - 调整按钮和文本颜色，以确保在不同主题下的清晰可见性。
1 parent a02686e commit fe4d867

File tree

2 files changed

+37
-37
lines changed

2 files changed

+37
-37
lines changed

‎src/pages/assistant/index.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export default () => {
128128
{/* 卡片网格骨架屏 */}
129129
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 mt-3">
130130
{[1, 2, 3, 4, 5, 6].map((item) => (
131-
<Card key={item} className="border-stroke">
131+
<Card key={item} className="border-stroke dark:border-strokedark">
132132
<div className="flex items-start justify-between mb-4">
133133
<div className="flex items-center gap-3">
134134
<Skeleton.Avatar active size={48} shape="square" />
@@ -138,10 +138,10 @@ export default () => {
138138
</div>
139139
<Skeleton.Button active size="small" style={{ width: 32, height: 32 }} />
140140
</div>
141-
<div className="bg-gray-100 rounded-md p-3 py-4 mb-4">
141+
<div className="bg-gray-100 dark:bg-boxdark-2 rounded-md p-3 py-4 mb-4">
142142

143143
</div>
144-
<div className="pt-2 border-t border-gray-100">
144+
<div className="pt-2 border-t border-gray-100 dark:border-strokedark">
145145
<Skeleton.Button active size="default" style={{ width: '100%', height: 32 }} />
146146
</div>
147147
</Card>
@@ -211,11 +211,11 @@ export default () => {
211211
return (
212212
<Card
213213
key={item.id}
214-
className={`relative p-5 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden ${item.isDefault
215-
? 'border-2 border-blue-500 bg-gradient-to-br from-blue-50 via-white to-blue-50'
216-
: 'border border-gray-200 bg-gradient-to-br from-gray-50 via-white to-slate-50'
214+
className={`relative p-5 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden ${item.isDefault
215+
? 'border-2 border-blue-500 bg-gradient-to-br from-blue-50 via-white to-blue-50 dark:from-blue-900/30 dark:via-boxdark dark:to-blue-900/30 dark:border-blue-500'
216+
: 'border border-gray-200 bg-gradient-to-br from-gray-50 via-white to-slate-50 dark:from-boxdark/80 dark:via-boxdark dark:to-boxdark-2/80 dark:border-strokedark'
217217
}`}
218-
styles={{ body: { padding: '10px', flex: 1, display: 'flex', flexDirection: 'column' } }}
218+
styles={{ body: { padding: '10px', flex: 1, display: 'flex', flexDirection: 'column', backgroundColor: 'transparent' } }}
219219
>
220220
{/* 卡片头部：图标与名称 */}
221221
<div className="flex items-start justify-between mb-4">
@@ -230,47 +230,47 @@ export default () => {
230230
</Avatar>
231231

232232
<div>
233-
<div className="font-bold text-lg text-gray-800 leading-tight mb-1 truncate max-w-[160px] ml-[5px]">
233+
<div className="font-bold text-lg text-gray-800 dark:text-white leading-tight mb-1 truncate max-w-[160px] ml-[5px]">
234234
{item.name}
235235
</div>
236236

237237
<Space size={4}>
238-
<Tag bordered={false} className="text-xs bg-gray-100 text-gray-500 mr-0">
238+
<Tag bordered={false} className="text-xs bg-gray-100 text-gray-500 dark:bg-boxdark-2 dark:text-gray-300 mr-0">
239239
{info ? info.label : item.model}
240240
</Tag>
241241

242242
{info && (
243243
<Tooltip title={info.desc}>
244-
<InfoCircleOutlined className="text-gray-400 cursor-pointer hover:text-primary" />
244+
<InfoCircleOutlined className="text-gray-400 dark:text-gray-500 cursor-pointer hover:text-primary dark:hover:text-primary" />
245245
</Tooltip>
246246
)}
247247
</Space>
248248
</div>
249249
</div>
250250

251251
{/* 更多操作菜单 */}
252-
<Dropdown menu={{ items: menuItems }} placement="bottomRight" arrow className="bg-gray-50">
253-
<Button type="text" icon={<MoreOutlined className="text-xl text-gray-400" />} />
252+
<Dropdown menu={{ items: menuItems }} placement="bottomRight" arrow className="bg-gray-50 dark:bg-boxdark-2/30 dark:hover:bg-boxdark-2/90">
253+
<Button type="text" icon={<MoreOutlined className="text-xl text-gray-400 dark:text-gray-500" />} />
254254
</Dropdown>
255255
</div>
256256

257257
{/* 卡片内容：URL显示 */}
258-
<div className="bg-gray-50 rounded-md px-3 py-2 mb-2 flex-1 border border-gray-100">
259-
<div className="flex items-center text-gray-400 text-xs uppercase font-bold mb-1">
258+
<div className="bg-gray-50 dark:bg-boxdark-2 rounded-md px-3 py-2 mb-2 flex-1 border border-gray-100 dark:border-strokedark">
259+
<div className="flex items-center text-gray-400 dark:text-gray-500 text-xs uppercase font-bold mb-1">
260260
<ApiOutlined className="mr-1" /> API Endpoint
261261
</div>
262262
<div
263-
className="text-gray-600 font-mono text-sm m-0 break-all"
263+
className="text-gray-600 dark:text-gray-300 font-mono text-sm m-0 break-all"
264264
>
265265
{item.url}
266266
</div>
267267
</div>
268268

269269
{/* 卡片底部：主要操作 */}
270-
<div className="mt-auto pt-2 border-t border-gray-100 flex justify-end">
270+
<div className="mt-auto pt-2 border-t border-gray-100 dark:border-strokedark flex justify-end">
271271
<Button
272272
type={isTesting ? 'default' : 'dashed'}
273-
className={`${isTesting ? '' : 'text-primary border-primary bg-blue-50/50'} w-full`}
273+
className={`${isTesting ? '' : 'text-primary border-primary bg-blue-50/50 dark:bg-blue-900/20 dark:border-primary dark:text-primary'} w-full`}
274274
icon={isTesting ? <ThunderboltFilled spin /> : <ThunderboltFilled />}
275275
loading={isTesting}
276276
onClick={() => testConnection(item)}
@@ -285,7 +285,7 @@ export default () => {
285285
{/* 空状态下的添加按钮（如果没有数据或者作为最后一个Card） */}
286286
<Button
287287
type="dashed"
288-
className="h-auto min-h-[200px] border-2 flex flex-col items-center justify-center gap-2 !bg-white text-gray-400 hover:text-primary hover:border-primary transition-colors rounded-lg bg-transparent"
288+
className="h-auto min-h-[200px] border-2 flex flex-col items-center justify-center gap-2 !bg-white dark:!bg-boxdark text-gray-400 dark:text-gray-500 hover:text-primary dark:hover:text-primary hover:border-primary dark:hover:border-primary rounded-lg bg-transparent dark:border-strokedark"
289289
onClick={() => setIsModalOpen(true)}
290290
>
291291
<PlusOutlined style={{ fontSize: '24px' }} />

‎src/pages/storage/index.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ export default () => {
217217
<Title value="存储管理" />
218218
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-2">
219219
{[1, 2, 3].map((item) => (
220-
<Card key={item} className="shadow-md">
220+
<Card key={item} className="shadow-md dark:bg-boxdark dark:border-strokedark">
221221
<Skeleton active paragraph={{ rows: 4 }} />
222222
</Card>
223223
))}
@@ -236,23 +236,23 @@ export default () => {
236236
<div
237237
key={record.id}
238238
className={`relative p-5 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden ${record.isEnable
239-
? 'border-2 border-blue-500 bg-gradient-to-br from-blue-50 via-white to-blue-50'
240-
: 'border border-gray-200 bg-gradient-to-br from-gray-50 via-white to-slate-50'
239+
? 'border-2 border-blue-500 bg-gradient-to-br from-blue-50 via-white to-blue-50 dark:from-blue-900/30 dark:via-boxdark dark:to-blue-900/30 dark:border-blue-500'
240+
: 'border border-gray-200 bg-gradient-to-br from-gray-50 via-white to-slate-50 dark:from-boxdark/80 dark:via-boxdark dark:to-boxdark-2/80 dark:border-strokedark'
241241
}`}
242242
>
243243
{/* 背景装饰元素 */}
244-
<div className="absolute top-0 right-0 w-32 h-32 opacity-20">
245-
<div className="absolute top-4 right-4 w-16 h-16 rounded-full bg-gradient-to-br from-blue-200 to-purple-200 blur-xl"></div>
246-
<div className="absolute top-8 right-8 w-8 h-8 rounded-full bg-gradient-to-br from-pink-200 to-orange-200 blur-lg"></div>
244+
<div className="absolute top-0 right-0 w-32 h-32 opacity-20 dark:opacity-10">
245+
<div className="absolute top-4 right-4 w-16 h-16 rounded-full bg-gradient-to-br from-blue-200 to-purple-200 dark:from-blue-500/30 dark:to-purple-500/30 blur-xl"></div>
246+
<div className="absolute top-8 right-8 w-8 h-8 rounded-full bg-gradient-to-br from-pink-200 to-orange-200 dark:from-pink-500/30 dark:to-orange-500/30 blur-lg"></div>
247247
</div>
248-
<div className="absolute bottom-0 left-0 w-24 h-24 opacity-15">
249-
<div className="absolute bottom-4 left-4 w-12 h-12 rounded-full bg-gradient-to-br from-cyan-200 to-blue-200 blur-xl"></div>
248+
<div className="absolute bottom-0 left-0 w-24 h-24 opacity-15 dark:opacity-10">
249+
<div className="absolute bottom-4 left-4 w-12 h-12 rounded-full bg-gradient-to-br from-cyan-200 to-blue-200 dark:from-cyan-500/30 dark:to-blue-500/30 blur-xl"></div>
250250
</div>
251251

252252
{/* 小装饰点 */}
253-
<div className="absolute top-6 right-6 w-2 h-2 rounded-full bg-blue-300 opacity-40"></div>
254-
<div className="absolute top-12 right-12 w-1.5 h-1.5 rounded-full bg-purple-300 opacity-40"></div>
255-
<div className="absolute bottom-8 left-8 w-1.5 h-1.5 rounded-full bg-cyan-300 opacity-40"></div>
253+
<div className="absolute top-6 right-6 w-2 h-2 rounded-full bg-blue-300 dark:bg-blue-500/40 opacity-40"></div>
254+
<div className="absolute top-12 right-12 w-1.5 h-1.5 rounded-full bg-purple-300 dark:bg-purple-500/40 opacity-40"></div>
255+
<div className="absolute bottom-8 left-8 w-1.5 h-1.5 rounded-full bg-cyan-300 dark:bg-cyan-500/40 opacity-40"></div>
256256

257257
{/* 内容区域 - 添加相对定位以确保内容在装饰元素之上 */}
258258
<div className="relative z-10">
@@ -261,12 +261,12 @@ export default () => {
261261
<div className="flex items-center gap-3">
262262
{getPlatformIcon(record.platform)}
263263
<div>
264-
<div className="font-semibold text-lg">
264+
<div className="font-semibold text-lg dark:text-white">
265265
{record.platform === 'local'
266266
? '本地存储'
267267
: (record.platformName || record.platform)}
268268
</div>
269-
<div className="text-sm text-gray-500 mt-1">
269+
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
270270
{record.platform === 'local'
271271
? '本地存储'
272272
: (record.platform === 'webdav' ? 'WebDAV' : record.platformName || '云存储')}
@@ -282,13 +282,13 @@ export default () => {
282282
{/* 内容区域 */}
283283
<div className="mb-4 space-y-2">
284284
<div>
285-
<div className="text-xs text-gray-600 mb-2">存储路径</div>
286-
<div className="text-sm font-mono bg-white/60 backdrop-blur-sm p-2 rounded break-all border border-gray-100">{record.basePath || '/uploads'}</div>
285+
<div className="text-xs text-gray-600 dark:text-gray-400 mb-2">存储路径</div>
286+
<div className="text-sm font-mono bg-white/60 dark:bg-boxdark-2/60 backdrop-blur-sm p-2 rounded break-all border border-gray-100 dark:border-strokedark dark:text-gray-300">{record.basePath || '/uploads'}</div>
287287
</div>
288288
</div>
289289

290290
{/* 操作按钮区域 */}
291-
<div className="flex items-center justify-between pt-4 border-t border-gray-200/50">
291+
<div className="flex items-center justify-between pt-4 border-t border-gray-200/50 dark:border-strokedark/50">
292292
<div className="flex items-center gap-2">
293293
<Tooltip title="测试连接">
294294
<Button
@@ -351,11 +351,11 @@ export default () => {
351351

352352
{/* 添加存储配置卡片 */}
353353
<div
354-
className="group flex flex-col justify-center items-center text-gray-400 bg-white p-5 rounded-xl shadow-sm hover:shadow-md transition-shadow border-2 border-dashed border-gray-300 cursor-pointer hover:border-primary"
354+
className="group flex flex-col justify-center items-center text-gray-400 dark:text-gray-500 bg-white dark:bg-boxdark p-5 rounded-xl shadow-sm hover:shadow-md transition-shadow border-2 border-dashed border-gray-300 dark:border-strokedark cursor-pointer hover:border-primary dark:hover:border-primary"
355355
onClick={addOssData}
356356
>
357-
<PlusOutlined className="text-2xl text-gray-400 mb-2 group-hover:text-primary" />
358-
<div className="text-sm font-medium mb-2 group-hover:text-primary">添加新存储</div>
357+
<PlusOutlined className="text-2xl text-gray-400 dark:text-gray-500 mb-2 group-hover:text-primary dark:group-hover:text-primary" />
358+
<div className="text-sm font-medium mb-2 group-hover:text-primary dark:group-hover:text-primary">添加新存储</div>
359359
</div>
360360
</div>
361361

0 commit comments

Comments
 (0)