Ant Design Vue Admin

基于 Vue 3、TypeScript、Tailwind CSS、Ant Design Vue 和 VXE Table 构建的现代化后台管理系统。

技术栈

• Vue 3 - 渐进式 JavaScript 框架
• TypeScript - JavaScript 的超集，提供类型安全
• Vite - 下一代前端构建工具
• Ant Design Vue - 企业级 UI 组件库
• VXE Table - 功能强大的表格组件
• Tailwind CSS - 原子化 CSS 框架
• Pinia - Vue 官方状态管理库
• Vue Router - Vue.js 官方路由
• Axios - HTTP 客户端

项目结构

antd-vue-claude/
├── src/
│   ├── api/              # API 接口
│   ├── assets/           # 静态资源
│   ├── components/       # 全局组件
│   ├── composables/      # 组合式函数
│   ├── layouts/          # 布局组件
│   │   └── components/   # 布局子组件
│   ├── router/           # 路由配置
│   ├── stores/           # 状态管理
│   │   └── modules/      # Store 模块
│   ├── types/            # TypeScript 类型定义
│   ├── utils/            # 工具函数
│   ├── views/            # 页面组件
│   ├── App.vue           # 根组件
│   ├── main.ts           # 入口文件
│   └── style.css         # 全局样式
├── .env.development      # 开发环境变量
├── .env.production       # 生产环境变量
├── .eslintrc.cjs         # ESLint 配置
├── .prettierrc           # Prettier 配置
├── .gitignore            # Git 忽略文件
├── index.html            # HTML 模板
├── package.json          # 项目依赖
├── postcss.config.js     # PostCSS 配置
├── tailwind.config.js    # Tailwind CSS 配置
├── tsconfig.json         # TypeScript 配置
└── vite.config.ts        # Vite 配置

功能特性

• 登录系统 - 完整的登录/登出流程
• 布局系统 - 侧边栏菜单、顶部导航、面包屑
• 主题切换 - 支持亮色/暗色主题
• 数据表格 - 基于 VXE Table 的高级表格组件
• 表单处理 - 完整的表单验证和提交
• 权限管理 - 基于角色的权限控制
• 状态持久化 - Pinia 状态自动持久化
• 请求封装 - Axios 统一请求处理
• 路由守卫 - 登录验证和权限校验

快速开始

安装依赖

# 使用 npm
npm install

# 使用 pnpm
pnpm install

# 使用 yarn
yarn install

开发模式

npm run dev

访问 http://localhost:3000

构建生产

npm run build

预览构建

npm run preview

默认账号

• 用户名：admin
• 密码：123456

核心组件

VxeTable 组件

高级表格组件，支持：

• 分页
• 排序
• 自定义列渲染
• 固定列
• 复选框

useTable Hook

通用表格逻辑 Hook，提供：

• 数据加载
• 分页处理
• 选中状态管理

useForm Hook

通用表单逻辑 Hook，提供：

• 表单验证
• 数据提交
• 状态管理

代码规范

ESLint

npm run lint

Prettier

npm run format

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge

License

MIT

地图动态生成

1. 说出地图动态生成的过程
2. 用了什么技术
3. 好处是什么

核心价值：优化了地图动态生成，解决了以往地图只能代码拼接，用户无法自定义地图区域问题。大大提升了实时更新，交互性弱的痛点 技术实现：数据上：将中国地图以切片方式分成了，省、市、区并对应为切片以行政区域编码区分。 当指定完一个或者多个区域后，通过代码逻辑将多个切片合成一份数据，再通过echarts图表工具渲染到页面上。 效能提升：相比旧版方案，动态地图无需研发人员数据合并，用户可以自行选择地图区域，并关联组织架构。

背景与痛点分析： 在原有业务逻辑中，地图模块属于高度耦合的硬编码实现。每次业务区域调整，都需要研发人员手动下载 GeoJSON 文件、进行离线数据拼接并重新发版。

痛点： 数据维护成本高，响应速度慢，无法支持用户根据组织架构灵活自定义区域。

技术实现方案： 为了实现地图的“配置化”与“动态化”，我设计并实施了以下方案：

数据切片化存储：建立基于行政区域编码 (Adcode) 的三级切片索引库（省-市-区），将海量地理矢量数据进行解耦存储。

动态拓扑合成逻辑：在前端维护一套数据合并引擎。当用户在地图配置界面选择特定区域组合时，系统根据 行政区域编码 (Adcode) 递归拉取对应的切片，并在内存中进行 数据集合(FeatureCollection) 的动态合成。

渲染层适配：通过 ECharts 的 registerMap 接口实现异步注册，确保合成后的数据能够实时驱动图表实例的 setOption 更新，完成视图重绘。

最终产出： 由“硬编码”转为“配置驱动”：实现了地图数据与业务代码的解耦。

赋能业务自助化：通过关联组织架构映射表，用户现在可以动态生成任意颗粒度的业务地图，无需研发再次介入数据处理工作。

性能表现：采用按需加载切片的策略，避免了一次性加载全国大 JSON 文件带来的内存压力和首屏阻塞。

核心目标：深化 AI 技术在前端领域的垂直应用，通过标准化协议与技能工程实现研发效能的二次飞跃。

基础 UI 开发自动化程度低，研发能效亟待突破

核心挑战：现有的内网 AI 工具链在视觉理解与代码映射方面存在技术断层。设计方案无法通过 AI 实现快速原型化，导致“所见即所得”的智能化开发目标无法落地。

效率损耗：由于缺乏高能力的视觉大模型支持，大量基础静态页面的开发仍依赖纯手工编码，导致从设计到交付的周期被拉长，无法发挥 AI 时代下应有的交付爆发力。

优化诉求：亟需升级内网 AI 的视觉识别精度与代码生成质量，通过引入或优化多模态模型，将前端从低价值的重复劳动中解放出来。