KT Template Online Web

kt-template-online-web 是 KT Template Online 的前台入口，负责展示组件/图表模板列表、按字典分类筛选、搜索、删除、复制分享链接，并跳转到 Playground 进行新增或编辑。

技术栈

Vue 3 + TypeScript
Vite
Vue Router + Pinia
Ant Design Vue
UnoCSS + Sass
Axios
pnpm

功能概览

首页展示组件模板卡片列表。
通过 COMPONENT_TYPE 和二级字典筛选组件。
支持按名称搜索、分页、删除组件。
点击组件进入 Playground 编辑。
新增按钮根据当前分类生成 Playground 新建链接。
分享按钮复制带 query 和 hash 的 Playground 链接。

目录结构

src
  api/                 # axios 封装和业务接口
  components/logo/     # Logo
  hooks/               # 主题、模型等组合逻辑
  modules/chartList/   # 组件列表和分类筛选
  modules/header/      # 顶部栏、搜索、主题切换
  modules/theme/       # 主题组件
  utils/               # 环境检测、转换工具
  views/home.vue       # 首页
  App.vue              # 应用布局
  config.ts            # 前端运行配置
  router.ts            # 路由

环境变量

仓库只提交 .env.example，真实 .env.development 和 .env.production 保留在本地。

NODE_ENV=development
VITE_APP_PLAY_GROUND=http://localhost:48090
VITE_APP_PROXY=http://localhost:48085/
VITE_APP_BASE_API=/api
VITE_APP_OSS_DOMAIN=/chart-assets

关键变量：

变量	说明
`VITE_APP_PLAY_GROUND`	Playground 地址，用于新增、编辑和分享链接
`VITE_APP_PROXY`	后端服务地址，Vite dev server 会把 `/api` 代理到这里
`VITE_APP_BASE_API`	API 前缀，当前代码使用 `/api`
`VITE_APP_OSS_DOMAIN`	静态资源域名预留配置

启动

pnpm install
pnpm dev

开发服务默认端口为 48089。

常用命令：

pnpm dev       # 本地开发
pnpm build     # 类型检查并构建
pnpm preview   # 预览构建产物
pnpm deploy    # 构建并执行部署脚本

接口约定

接口集中在 src/api：

request.ts：axios 实例，baseURL 来自 src/config.ts。
component.ts：组件列表、详情、删除。
dict.ts：一级/二级字典查询。

当前主要接口：

方法	地址	用途
`GET`	`/component/list`	分页查询组件
`GET`	`/component/detail`	查询组件详情和模板内容
`POST`	`/component/remove`	逻辑删除组件
`GET`	`/dict/getDictByKey`	查询一级字典
`GET`	`/dict/getComponentDictByType`	根据一级类型查询二级类型

Playground 跳转

ChartList.vue 负责构造 Playground 链接：

query 保存组件元信息：id、name、type、componentType。
hash 保存组件模板序列化内容。
Playground 编辑器会继续保留 query，并把编辑器状态写回 hash。

示例：

http://localhost:48090/?id=xxx&name=基础折线图&type=1&componentType=1#...

开发约定

新增接口先放到 src/api，页面组件不直接写 axios URL。
Ant Design Vue 组件绑定沿用当前写法，例如 v-model:value。
列表页保持工具型界面：卡片列表区域撑满，分页固定在底部。
删除和分享等操作要保持已有消息反馈。

轻量验证

常规前端改动优先执行：

pnpm exec vue-tsc --noEmit

涉及页面交互时再启动开发服务看明显报错：

pnpm dev

3.5 KiB Raw Blame History Unescape Escape