imeepos/mixvideo-v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: UI 样式优化

Browse Source
This commit is contained in:
imeepos
2025-07-15 19:42:39 +08:00
parent 888675dbf1
commit fed5cdd73d
10 changed files with 318 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
apps/desktop/src/pages/AiClassificationSettings.tsx
View File

@@ -1,13 +1,14 @@
import React, { useState, useEffect, useCallback } from 'react';
import {
PlusIcon,
PencilIcon,
TrashIcon,
import {
PlusIcon,
PencilIcon,
TrashIcon,
EyeIcon,
ArrowUpIcon,
ArrowDownIcon,
CheckIcon,
XMarkIcon
XMarkIcon,
CpuChipIcon
} from '@heroicons/react/24/outline';
import { AiClassificationService } from '../services/aiClassificationService';
import {
@@ -282,28 +283,38 @@ const AiClassificationSettings: React.FC = () => {
return (
<div className="min-h-screen bg-gray-50/30">
<div className="max-w-6xl mx-auto px-4 py-6">
{/* 页面标题和操作栏 - 优化布局和视觉层次 */}
<div className="mb-8">
<div className="flex items-center justify-between">
<div className="space-y-1">
<h1 className="text-xl font-semibold text-gray-900 tracking-tight">AI分类设置</h1>
<p className="text-sm text-gray-500">管理视频AI分类规则和提示词</p>
</div>
<div className="flex items-center gap-2">
<button
onClick={openPreviewDialog}
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-300 transition-all duration-200"
>
<EyeIcon className="h-3.5 w-3.5" />
预览提示词
</button>
<button
onClick={openCreateDialog}
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 border border-blue-600 rounded-lg hover:bg-blue-700 hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-300 transition-all duration-200 shadow-sm"
>
<PlusIcon className="h-3.5 w-3.5" />
添加分类
</button>
{/* 美观的页面头部 */}
<div className="mb-6">
<div className="bg-gradient-to-r from-white via-purple-50/30 to-white rounded-xl shadow-sm border border-gray-200/50 p-6 relative overflow-hidden">
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-100/30 to-pink-100/30 rounded-full -translate-y-16 translate-x-16 opacity-50"></div>
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 relative z-10">
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center shadow-sm">
<CpuChipIcon className="h-6 w-6 text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900 mb-1">AI分类设置</h1>
<p className="text-sm text-gray-600">管理视频AI分类规则和提示词</p>
</div>
</div>
<div className="flex items-center gap-3">
<button
onClick={openPreviewDialog}
className="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 hover:scale-105"
>
<EyeIcon className="h-4 w-4" />
预览提示词
</button>
<button
onClick={openCreateDialog}
className="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 rounded-lg transition-all duration-200 hover:scale-105 shadow-sm hover:shadow-md"
>
<PlusIcon className="h-4 w-4" />
添加分类
</button>
</div>
</div>
</div>
</div>
@@ -325,28 +336,30 @@ const AiClassificationSettings: React.FC = () => {
</h2>
</div>
{/* 分类卡片网格 */}
<div className="grid gap-3">
{/* 美观的分类卡片网格 */}
<div className="grid gap-4">
{classifications.map((classification, index) => (
<div
key={classification.id}
className="group relative bg-white border border-gray-200 rounded-xl p-4 hover:border-gray-300 hover:shadow-sm transition-all duration-200"
className="group relative bg-gradient-to-br from-white to-gray-50/30 border border-gray-200/50 rounded-xl p-5 hover:border-purple-200 hover:shadow-md hover:-translate-y-1 transition-all duration-300 overflow-hidden"
>
{/* 卡片头部 */}
<div className="flex items-start justify-between mb-3">
{/* 装饰性背景 */}
<div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-purple-100/20 to-pink-100/20 rounded-full -translate-y-10 translate-x-10 opacity-0 group-hover:opacity-100 transition-all duration-300"></div>
{/* 美观的卡片头部 */}
<div className="flex items-start justify-between mb-4 relative z-10">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<h3 className="text-sm font-medium text-gray-900 truncate">
<div className="flex items-center gap-2 mb-2">
<h3 className="text-base font-semibold text-gray-900 truncate">
{classification.name}
</h3>
<span className={`inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium ${
<span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${
classification.is_active
? 'bg-emerald-50 text-emerald-700 border border-emerald-200'
: 'bg-gray-50 text-gray-600 border border-gray-200'
? 'bg-gradient-to-r from-emerald-50 to-emerald-100 text-emerald-700 border border-emerald-200'
: 'bg-gradient-to-r from-gray-50 to-gray-100 text-gray-600 border border-gray-200'
}`}>
{classification.is_active ? '激活' : '禁用'}
</span>
<span className="text-xs text-gray-400 bg-gray-50 px-1.5 py-0.5 rounded">
<span className="text-xs text-purple-600 bg-purple-50 px-2 py-1 rounded-full border border-purple-200">
#{classification.sort_order}
</span>
</div>