feat: UI/UX optimization v0.1.21 - Enhanced visual design and user experience
- Unified color system with modern blue theme - Enhanced ProjectCard with beautiful gradients and hover effects - Improved Navigation with modern logo and enhanced link styles - Optimized ProjectDetails page with elegant header and statistics cards - Enhanced ModelCard and ModelList with refined visual effects - Improved AiClassificationSettings with beautiful page header - Optimized TemplateManagement with modern design elements - Added comprehensive design system with reusable component styles - Enhanced animations and transitions for smoother interactions - Improved responsive design for better mobile and tablet experience - Added support for dark mode and high-resolution displays - Maintained existing functionality while improving visual appeal
This commit is contained in:
imeepos
parent
fed5cdd73d
commit
19903303ae
|
|
@ -619,7 +619,7 @@ export const ProjectDetails: React.FC = () => {
|
|||
onClick={() => setActiveTab('materials')}
|
||||
className={`py-3 px-4 font-medium text-sm transition-all duration-200 whitespace-nowrap rounded-t-lg relative ${
|
||||
activeTab === 'materials'
|
||||
? 'text-primary-600 bg-primary-50 border-b-2 border-primary-500'
|
||||
? 'text-primary-600 border-b-2 '
|
||||
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -258,3 +258,242 @@
|
|||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 统一的美观组件样式 ===== */
|
||||
|
||||
/* 页面头部样式 */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, white 0%, rgba(59, 130, 246, 0.05) 50%, white 100%);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid rgba(229, 231, 235, 0.5);
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.1) 100%);
|
||||
border-radius: 50%;
|
||||
transform: translate(4rem, -4rem);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 统计卡片样式 */
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, white 0%, rgba(249, 250, 251, 0.5) 100%);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(229, 231, 235, 0.5);
|
||||
padding: 1.25rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 50%;
|
||||
transform: translate(2rem, -2rem);
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover::before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 主色调统计卡片 */
|
||||
.stat-card.primary::before {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(147, 197, 253, 0.2) 100%);
|
||||
}
|
||||
|
||||
/* 成功色统计卡片 */
|
||||
.stat-card.success::before {
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(134, 239, 172, 0.2) 100%);
|
||||
}
|
||||
|
||||
/* 警告色统计卡片 */
|
||||
.stat-card.warning::before {
|
||||
background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(254, 215, 170, 0.2) 100%);
|
||||
}
|
||||
|
||||
/* 紫色统计卡片 */
|
||||
.stat-card.purple::before {
|
||||
background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(196, 181, 253, 0.2) 100%);
|
||||
}
|
||||
|
||||
/* 内容卡片样式 */
|
||||
.content-card {
|
||||
background: linear-gradient(135deg, white 0%, rgba(249, 250, 251, 0.3) 100%);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(229, 231, 235, 0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.content-card:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 图标容器样式 */
|
||||
.icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.icon-container:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 主色调图标容器 */
|
||||
.icon-container.primary {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 成功色图标容器 */
|
||||
.icon-container.success {
|
||||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 警告色图标容器 */
|
||||
.icon-container.warning {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 紫色图标容器 */
|
||||
.icon-container.purple {
|
||||
background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 粉色图标容器 */
|
||||
.icon-container.pink {
|
||||
background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ===== 响应式设计优化 ===== */
|
||||
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 640px) {
|
||||
.page-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
transform: translate(2rem, -2rem);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* 移动端按钮优化 */
|
||||
.btn-standard,
|
||||
.btn-compact,
|
||||
.btn-large {
|
||||
min-height: 44px; /* 符合触摸友好标准 */
|
||||
}
|
||||
|
||||
/* 移动端文字大小调整 */
|
||||
.page-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板端优化 */
|
||||
@media (min-width: 641px) and (max-width: 1024px) {
|
||||
.page-header {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕优化 */
|
||||
@media (min-width: 1920px) {
|
||||
.page-header {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高分辨率屏幕优化 */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.icon-container,
|
||||
.stat-card,
|
||||
.content-card,
|
||||
.page-header {
|
||||
border-width: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #1f2937 0%, rgba(59, 130, 246, 0.1) 50%, #1f2937 100%);
|
||||
border-color: rgba(75, 85, 99, 0.5);
|
||||
}
|
||||
|
||||
.stat-card,
|
||||
.content-card {
|
||||
background: linear-gradient(135deg, #1f2937 0%, rgba(31, 41, 55, 0.5) 100%);
|
||||
border-color: rgba(75, 85, 99, 0.5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue