f166c04422
- Create Tailwind CSS configuration with design tokens from UIDesignSpec - Create globals.css with CSS variables and component styles - Add React component library: - UI components: Button, Card, Tag, Input, Select, ProgressBar, Modal - Navigation: BottomNav, Sidebar, StatusBar - Layout: MobileLayout, DesktopLayout - Add constants for colors, icons, and layout - Update tasks.md with 31 UI development tasks linked to design node IDs - Configure package.json, tsconfig.json, and postcss.config.js Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
435 lines
8.5 KiB
CSS
435 lines
8.5 KiB
CSS
/* SmartAudit - 全局样式文件 */
|
|
/* 基于 UIDesignSpec.md 设计规范 */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ========================================
|
|
1. CSS Variables (设计令牌)
|
|
======================================== */
|
|
:root {
|
|
/* 背景色 */
|
|
--bg-page: #0B0B0E;
|
|
--bg-card: #16161A;
|
|
--bg-elevated: #1A1A1E;
|
|
|
|
/* 文字色 */
|
|
--text-primary: #FAFAF9;
|
|
--text-secondary: #A1A1AA;
|
|
--text-tertiary: #71717A;
|
|
|
|
/* 强调色 */
|
|
--accent-indigo: #6366F1;
|
|
--accent-green: #32D583;
|
|
--accent-coral: #E85A4F;
|
|
--accent-amber: #F59E0B;
|
|
|
|
/* 边框色 */
|
|
--border-subtle: #27272A;
|
|
|
|
/* 字体 */
|
|
--font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
|
|
/* 圆角 */
|
|
--radius-card: 12px;
|
|
--radius-btn: 8px;
|
|
--radius-tag: 4px;
|
|
|
|
/* 间距 */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 12px;
|
|
--spacing-lg: 16px;
|
|
--spacing-xl: 20px;
|
|
--spacing-2xl: 24px;
|
|
--spacing-3xl: 32px;
|
|
}
|
|
|
|
/* ========================================
|
|
2. Base Styles (基础样式)
|
|
======================================== */
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family);
|
|
background-color: var(--bg-page);
|
|
color: var(--text-primary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ========================================
|
|
3. Typography (字体系统)
|
|
======================================== */
|
|
.text-page-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.text-card-title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.text-section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.text-body {
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.text-caption {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.text-small {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.text-nav {
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ========================================
|
|
4. Component Styles (组件样式)
|
|
======================================== */
|
|
|
|
/* Card 卡片 */
|
|
@layer components {
|
|
.card {
|
|
@apply bg-bg-card rounded-card;
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.card-desktop {
|
|
@apply bg-bg-card rounded-card;
|
|
padding: 16px 20px;
|
|
}
|
|
}
|
|
|
|
/* Button 按钮 */
|
|
@layer components {
|
|
.btn {
|
|
@apply inline-flex items-center justify-center font-semibold transition-all duration-200;
|
|
border-radius: var(--radius-btn);
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply btn bg-accent-indigo text-white;
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
@apply opacity-90;
|
|
}
|
|
|
|
.btn-primary:active {
|
|
@apply opacity-80;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply btn bg-bg-elevated text-text-secondary;
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
@apply bg-opacity-80;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply btn bg-accent-coral text-white;
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
.btn-success {
|
|
@apply btn bg-accent-green text-white;
|
|
padding: 10px 16px;
|
|
}
|
|
}
|
|
|
|
/* Status Tags 状态标签 */
|
|
@layer components {
|
|
.tag {
|
|
@apply inline-flex items-center px-2 py-1 text-xs font-medium;
|
|
border-radius: var(--radius-tag);
|
|
}
|
|
|
|
.tag-success {
|
|
background-color: rgba(50, 213, 131, 0.125);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.tag-pending {
|
|
background-color: rgba(99, 102, 241, 0.125);
|
|
color: var(--accent-indigo);
|
|
}
|
|
|
|
.tag-error {
|
|
background-color: rgba(232, 90, 79, 0.125);
|
|
color: var(--accent-coral);
|
|
}
|
|
|
|
.tag-warning {
|
|
background-color: rgba(245, 158, 11, 0.125);
|
|
color: var(--accent-amber);
|
|
}
|
|
}
|
|
|
|
/* Bottom Navigation 底部导航 (移动端) */
|
|
@layer components {
|
|
.bottom-nav {
|
|
@apply fixed bottom-0 left-0 right-0 flex justify-around items-center;
|
|
height: 83px;
|
|
padding: 12px 21px;
|
|
background: linear-gradient(180deg, transparent 0%, var(--bg-page) 50%);
|
|
}
|
|
|
|
.nav-item {
|
|
@apply flex flex-col items-center gap-1 text-text-secondary;
|
|
}
|
|
|
|
.nav-item.active {
|
|
@apply text-accent-indigo;
|
|
}
|
|
|
|
.nav-item-icon {
|
|
@apply w-6 h-6;
|
|
}
|
|
|
|
.nav-item-label {
|
|
@apply text-nav;
|
|
}
|
|
}
|
|
|
|
/* Sidebar Navigation 侧边栏导航 (桌面端) */
|
|
@layer components {
|
|
.sidebar {
|
|
@apply fixed left-0 top-0 bottom-0 bg-bg-card flex flex-col;
|
|
width: 260px;
|
|
}
|
|
|
|
.sidebar-nav-item {
|
|
@apply flex items-center gap-2.5 px-3 py-2.5 rounded-btn text-text-secondary transition-colors;
|
|
}
|
|
|
|
.sidebar-nav-item:hover {
|
|
@apply bg-bg-elevated;
|
|
}
|
|
|
|
.sidebar-nav-item.active {
|
|
@apply bg-bg-elevated text-accent-indigo font-semibold;
|
|
}
|
|
|
|
.sidebar-nav-icon {
|
|
@apply w-5 h-5;
|
|
}
|
|
}
|
|
|
|
/* Status Bar 状态栏 (移动端) */
|
|
@layer components {
|
|
.status-bar {
|
|
@apply flex items-center justify-between px-6;
|
|
height: 44px;
|
|
background-color: var(--bg-page);
|
|
}
|
|
|
|
.status-bar-time {
|
|
@apply text-body font-semibold;
|
|
}
|
|
|
|
.status-bar-icons {
|
|
@apply flex items-center gap-1;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
5. Layout Utilities (布局工具类)
|
|
======================================== */
|
|
|
|
/* Mobile Layout */
|
|
.mobile-layout {
|
|
@apply min-h-screen flex flex-col;
|
|
padding: 16px 24px;
|
|
padding-bottom: 99px; /* 83px bottom nav + 16px padding */
|
|
}
|
|
|
|
/* Desktop Layout */
|
|
.desktop-layout {
|
|
@apply min-h-screen;
|
|
margin-left: 260px; /* sidebar width */
|
|
padding: 32px;
|
|
}
|
|
|
|
/* Content Area */
|
|
.content-area {
|
|
@apply flex flex-col;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.content-area-desktop {
|
|
@apply flex flex-col;
|
|
gap: var(--spacing-2xl);
|
|
}
|
|
|
|
/* ========================================
|
|
6. Form Elements (表单元素)
|
|
======================================== */
|
|
@layer components {
|
|
.input {
|
|
@apply w-full bg-bg-elevated text-text-primary border border-border-subtle rounded-btn px-4 py-2.5 text-body;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.input:focus {
|
|
@apply outline-none border-accent-indigo;
|
|
}
|
|
|
|
.input::placeholder {
|
|
@apply text-text-tertiary;
|
|
}
|
|
|
|
.select {
|
|
@apply input appearance-none cursor-pointer;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 12px center;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
.textarea {
|
|
@apply input resize-none;
|
|
min-height: 100px;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
7. Animations (动画)
|
|
======================================== */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
/* ========================================
|
|
8. Scrollbar Styles (滚动条样式)
|
|
======================================== */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-subtle);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-tertiary);
|
|
}
|
|
|
|
/* ========================================
|
|
9. Responsive Breakpoints (响应式断点)
|
|
======================================== */
|
|
/* Mobile: < 768px (default) */
|
|
/* Tablet: 768px - 1024px */
|
|
/* Desktop: > 1024px */
|
|
|
|
@media (min-width: 768px) {
|
|
.mobile-only {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.desktop-only {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
10. Utility Classes (工具类)
|
|
======================================== */
|
|
.truncate-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.truncate-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.glass-effect {
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* Safe area for iOS */
|
|
.safe-area-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
}
|
|
|
|
.safe-area-top {
|
|
padding-top: env(safe-area-inset-top, 0);
|
|
}
|