Legal-assistant/legal-assistant-app/STYLE_GUIDE.md

🎨 法律助手应用 - 样式指南

设计系统概览

颜色系统

主色调

--primary-color: #007AFF;        // iOS蓝
--primary-light: #4DA3FF;        // 浅蓝
--primary-dark: #0051D5;         // 深蓝
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

功能色

--success-color: #34C759;        // 成功/绿色
--warning-color: #FF9500;        // 警告/橙色
--error-color: #FF3B30;          // 错误/红色
--info-color: #5AC8FA;           // 信息/天蓝

文本色

--text-primary: #1C1C1E;         // 主要文本
--text-secondary: #8E8E93;       // 次要文本
--text-tertiary: #C7C7CC;        // 三级文本
--text-white: #FFFFFF;           // 白色文本

间距系统

--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-2xl: 24px;
--spacing-3xl: 32px;

圆角系统

--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 50%;

阴影系统

--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.16);

---

组件设计规范

1. 卡片组件

.card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  
  &:hover {
    box-shadow: var(--shadow-md);
  }
  
  &:active {
    transform: scale(0.98);
  }
}

2. 按钮组件

.btn-primary {
  background: var(--primary-color);
  color: var(--text-white);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  
  &:hover {
    background: var(--primary-dark);
  }
  
  &:active {
    transform: scale(0.96);
  }
}

3. 输入框组件

.input {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  
  &:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
  }
}

---

动画规范

1. 淡入动画

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease;
}

2. 滑入动画

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.3s ease;
}

3. 缩放动画

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.scale-in {
  animation: scaleIn 0.2s ease;
}

---

响应式布局

断点

// 移动设备
@media (max-width: 768px) {
  // 移动端样式
}

// 平板设备
@media (min-width: 769px) and (max-width: 1024px) {
  // 平板样式
}

// 桌面设备
@media (min-width: 1025px) {
  // 桌面样式
}

Flexbox布局模式

<!-- 居中对齐 -->
<div class="flex items-center justify-center">

<!-- 两端对齐 -->
<div class="flex items-center justify-between">

<!-- 列布局 -->
<div class="flex flex-col gap-md">

<!-- 网格布局 -->
<div class="grid grid-cols-3 gap-lg">

---

常用工具类

文本工具类

.text-primary    // 主要文本色
.text-secondary  // 次要文本色
.text-center     // 居中对齐
.text-left       // 左对齐
.text-right      // 右对齐
.truncate        // 单行截断
.line-clamp-2    // 两行截断
.line-clamp-3    // 三行截断

间距工具类

.p-sm, .p-md, .p-lg, .p-xl    // 内边距
.m-sm, .m-md, .m-lg           // 外边距
.px-md, .py-md                // 水平/垂直内边距
.gap-sm, .gap-md, .gap-lg     // 间隙

样式工具类

.rounded-sm, .rounded-md, .rounded-lg    // 圆角
.shadow-sm, .shadow-md, .shadow-lg       // 阴影
.bg-primary, .bg-secondary, .bg-white    // 背景色

---

页面结构规范

标准页面结构

<div class="page-container">
  <!-- 顶部导航 -->
  <div class="page-header">
    <h2>页面标题</h2>
  </div>
  
  <!-- 主要内容 -->
  <div class="page-content">
    <!-- 内容区域 -->
  </div>
  
  <!-- 底部操作 -->
  <div class="page-footer">
    <!-- 按钮等 -->
  </div>
</div>

---

最佳实践

1. 使用CSS变量

✅ 推荐：color: var(--primary-color); ❌ 避免：color: #007AFF;

2. 使用工具类

✅ 推荐：<div class="flex items-center gap-md"> ❌ 避免：内联样式 style="display: flex;"

3. 保持一致性

• 统一使用 var(--spacing-*) 作为间距
• 统一使用 var(--radius-*) 作为圆角
• 统一使用 var(--shadow-*) 作为阴影

4. 过渡动画

• 快速交互：var(--transition-fast) (0.2s)
• 标准交互：var(--transition-base) (0.3s)
• 慢速交互：var(--transition-slow) (0.5s)

---

无障碍设计

1. 对比度

• 主要文本与背景对比度 ≥ 4.5:1
• 大文本与背景对比度 ≥ 3:1

2. 交互反馈

• 所有可点击元素应有 :hover 和 :active 状态
• 表单元素应有 :focus 状态

3. 字体大小

• 最小字体：13px (--font-sm)
• 正文字体：15px (--font-md)
• 标题字体：17px+ (--font-lg及以上)

---

性能优化

1. 使用硬件加速

.card {
  transform: translateZ(0);
  will-change: transform;
}

2. 避免重绘

// 使用 transform 代替 top/left
.modal {
  transform: translate(-50%, -50%);
}

3. 延迟加载

<!-- 图片懒加载 -->
<img loading="lazy" src="...">

---

主题扩展

深色模式（可选）

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #FFFFFF;
    --text-secondary: #EBEBF5;
    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
  }
}

---

本指南基于iOS设计规范和Material Design原则 最后更新：2024年