# minnan-zhangzhou-admin

[闽南文化（漳州）生态保护区数字驾驶舱](https://zhangzhou.wenlvti.net/admin)管理端前端项目。

## 技术栈

### 前端核心技术

- **框架**: Vue 3（Composition API + `<script setup>`）
- **核心库**: Vue Router、Pinia
- **类型系统**: TypeScript
- **样式方案**: Tailwind CSS v4（`@tailwindcss/vite` 插件）
- **构建工具**: Vite
- **图表**: ECharts（`vue-echarts` 封装，按需注册）
- **图标**: `@iconify/vue` + Solar 图标集（本地按需打包，见 `src/assets/solar-icons.json`）

## 项目目录组织

```
src/
  assets/           # 全局样式与静态资源
    base.css        # 主题变量（闽南红砖/金漆配色）与动画
    main.css        # 样式入口（引入 Tailwind 与 base.css）
    solar-icons.json# 按需提取的 Solar 图标集合
  components/       # 全局复用组件
    DashboardLayout.vue  # 页面骨架（背景 + 顶栏 + 内容区 + 页脚）
    PageHeader.vue       # 顶部导航（含路由高亮）
    PageFooter.vue       # 页脚（含实时时钟）
    PanelCard.vue        # 通用卡片（标题栏 + 插槽）
    ProgressBar.vue      # 进度条
  plugins/
    echarts.ts      # ECharts 按需注册与 VChart 组件导出
  router/
    index.ts        # 路由配置
  stores/           # Pinia 状态管理
  views/            # 页面（每个页面为独立目录）
    home/                       # 首页
    protection-overview/        # 保护区概况
    culture-resources/          # 文化资源
    heritage-experience/        # 传承体验
    culture-tourism/            # 文旅融合
    public-communication/       # 公众传播
    digital-archives/           # 数字档案
      ├── components/           # 页面级组件
      ├── data.ts               # 静态数据（含后端对接注释）
      └── XxxView.vue           # 页面主视图
```

> 组件划分约定：全局复用的组件放在 `src/components/`；仅当前页面使用的组件放在页面同级的 `components/` 目录下。
> 静态数据集中在各页面的 `data.ts`，以 TypeScript 接口约束结构并标注注释，后续对接后端时直接替换即可。

## 开发与构建

### 项目准备

```bash
npm install
```

### 开发命令

```bash
# 启动开发服务器（热更新）
npm run dev
```

### 构建命令

```bash
# 类型检查 + 构建生产包（含类型检查）
npm run build

# 仅构建（跳过类型检查）
npm run build-only

# 仅类型检查
npm run type-check

# 预览构建结果
npm run preview
```