# 视觉设计与响应式规范

> DDS-Section: Frontend DDS - 10-11. 视觉设计规范 + 响应式设计
> DDS-Lines: L882-L980

## 色彩系统

| 用途 | 颜色 | Vuetify 类 |
|:---|:---|:---|
| 主色调 | Deep Purple | `color="primary"` |
| 成功状态 | Green | `color="success"` |
| 警告状态 | Orange | `color="warning"` |
| 错误状态 | Red | `color="error"` |
| 信息状态 | Blue | `color="info"` |
| 页面背景 | Light Grey | `bg-grey-lighten-4` |
| 卡片背景 | White | `bg-white` |

## 卡片设计

```html
<v-card elevation="2" rounded="lg" class="pa-4">
  <!-- 卡片内容 -->
</v-card>
```

设计规范：
- 圆角：`rounded-lg` (8px)
- 阴影：`elevation-2`
- 内边距：`pa-4` (16px)
- Hover 效果：轻微上浮 + 阴影加深

## 排版规范

| 元素 | 字体样式 |
|:---|:---|
| 页面标题 | `text-h4 font-weight-bold` |
| 卡片标题 | `text-h6` |
| 字段标签 | `text-medium-emphasis text-body-2` |
| 字段值 | `text-high-emphasis` |
| 辅助文字 | `text-caption text-grey` |

## 间距规范

遵循 8px 网格系统：

| 间距 | Vuetify 类 | 值 |
|:---|:---|:---|
| 紧凑 | `pa-2` / `ma-2` | 8px |
| 标准 | `pa-4` / `ma-4` | 16px |
| 宽松 | `pa-6` / `ma-6` | 24px |
| 组件间距 | `gap-2` | 8px |
| 卡片间距 | `gap-4` | 16px |

## 动画与过渡

| 场景 | 效果 |
|:---|:---|
| Tab 切换 | `v-window` 默认滑动过渡 |
| 模式切换 | `v-expand-transition` |
| 按钮 Hover | 0.2s 缓动 |
| 卡片 Hover | `transform: translateY(-2px)` |
| 加载状态 | `v-skeleton-loader` 骨架屏 |

## 断点配置

遵循 Vuetify 默认断点：

| 断点 | 宽度范围 |
|:---|:---|
| xs | < 600px |
| sm | 600px - 960px |
| md | 960px - 1280px |
| lg | 1280px - 1920px |
| xl | > 1920px |

## 响应式布局适配

### 中间件卡片网格

```html
<v-row>
  <v-col 
    v-for="mw in middlewares" 
    :key="mw.type"
    cols="12" 
    sm="6" 
    md="4" 
    lg="3"
  >
    <MiddlewareCard :data="mw" />
  </v-col>
</v-row>
```

### 移动端适配要点

1. **Tab 导航**：使用 `show-arrows` 支持左右滑动
2. **操作按钮**：使用 `v-bottom-sheet` 或收起到菜单
3. **表单布局**：单列堆叠
4. **表格**：使用 `mobile-breakpoint` 切换卡片视图

## TypeScript 类型定义

```typescript
// 项目详情
interface ProjectDetail {
  id: number
  project_id: string
  project_name: string
  namespace: string
  province: string
  city: string
  project_nature: string
  industry_group_member: string
  industry_group_phone: string
  description: string
  status: string
  lifecycle_status: string
  project_certification: string
  workflow_id: string
  detail_filler_id: number
  detail_filler_name: string
  deployment_business: DeploymentBusiness | null
  deployment_environment: DeploymentEnvironment | null
  middlewares: Middleware[]
  hosts: Host[]
  draft_data: Record<string, unknown> | null
  created_at: string
  updated_at: string
}

// 表单数据类型
interface BasicFormData {
  project_name: string
  province: string
  city: string
  industry_group_member: string
  industry_group_phone: string
  project_nature: string
  description: string
}

interface BusinessFormData {
  deployer_name: string
  deployer_phone: string
  deploy_system: string
  system_version: string
  business_entry_url: string
  super_admin_user: string
  super_admin_password: string
}

interface EnvironmentFormData {
  network_environment: string
  main_public_ip: string
  domain_url: string
  enable_ssl: boolean
  host_management_method: string
  management_console_url: string
  host_count: number
  total_cpu: number
  total_memory_gb: number
  total_storage_gb: number
}

interface MiddlewareFormItem {
  middleware_type: string
  public_ip: string
  public_port: number
  internal_ip: string
  internal_port: number
  admin_user: string
  admin_password?: string
}

// Diff 项
interface DiffItem {
  field: string
  label: string
  oldValue: string | number | boolean
  newValue: string | number | boolean
}
```
