minnan-zhangzhou-admin

minnan-zhangzhou-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 接口约束结构并标注注释，后续对接后端时直接替换即可。

开发与构建

项目准备

npm install

开发命令

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

构建命令

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

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

# 仅类型检查
npm run type-check

# 预览构建结果
npm run preview