ThingsKit开发指南-前端大屏开发指南(目录结构说明)

根目录

序号路径(按照编辑器顺序)功能
1build执行 pnpm run build 相关
2doc可执行文档
3plop自动化生成相关
4public公共静态数据
5src项目源码目录
23typesTS 全局类型相关
24.env开发环境全局变量
25.env.development开发环境配置变量
26.env.production生产环境配置变量
27index.html单页入口
28Makefile快速执行文件
29tsconfig.jsonTS 配置项
30vite.config.tsTS 配置项

build目录

序号模块名称功能名称
1external扩展目录
2constant.ts常量配置
3getConfigFileName.ts获取配置文件名称

public目录

序号模块名称功能名称
1favicon.ico网站ico文件

src目录

序号模块名称功能名称
1apiapi接口与类型目录
2assets静态文件目录
3components公共组件目录
4directives全局指令目录
5enums全局枚举目录
6hooks全局hooks
7i18n全局国际化目录
8layout全局布局目录
9packages全局包目录
10plugins全局插件目录
11router项目路由目录
12settings全局设置目录
13store项目状态管理目录
14styles全局样式文件目录
15utils全局公共文件目录
16views项目页面目录
17App.vue路由出口
18main.tx入口文件

src/views/chart目录

序号路径(按照编辑器顺序)功能
1src/views/chart/index.vue工作空间入口,右键注册
2src/views/chart/ContentBox封装每一列的布局(顶部,内容,底部,滚动条),包括颜色深浅
3src/views/chart/ContentCharts左侧图表展示区域 ..\components\ChartsItemBox\index.vue 文件里有拖拽起始代码,包括动态注册组件
4src/views/chart/ContentConfigurations目标图表的右侧的配置模块
5———- edit start —–
6src/views/chart/ContentEdit/index.vue画布,标尺,工具栏,底部控制
src/views/chart/ContentEdit/components/EditAlignLine拖动时的对齐线
7src/views/chart/ContentEdit/components/EditBottom底部区域-样式布局
8src/views/chart/ContentEdit/components/EditHistory底部区域-历史记录
9src/views/chart/ContentEdit/components/EditRange注册在 index.vue,包裹所有图表,注册内容: 水印、标尺、辅助线、透明遮罩,包括点击事件等
10src/views/chart/ContentEdit/components/EditRule画布标尺
11src/views/chart/ContentEdit/components/EditShapeBox所有图表拖拽样式:锚点、选中样式、鼠标悬浮样式
12src/views/chart/ContentEdit/components/EditShortcutKey底部区域-快捷键展示
13src/views/chart/ContentEdit/components/EditTools工具栏:dock/侧边模块
14src/views/chart/ContentEdit/hook/useDrag.hook拖拽相关:拖拽到编辑区域、移动图表、鼠标移入/移出事件、移动锚点等
15src/views/chart/ContentEdit/hook/useLayout.hook布局处理(把 dom 发送到了 Pinia)
16src/views/chart/ContentEdit/hook/useStyle.hook样式渲染相关:大小、锚点位置等
17———- edit end —–
18src/views/chart/ContentHeader/*顶部位置相关
19src/views/chart/ContentLayers/*图层相关
20src/views/chart/hooks/useContextMenu.hook右键处理
21src/views/chart/hooks/useKeyboard.hook键盘快捷键

src/packages目录

序号路径功能
1packages/index所有图表导出,图表动态加载方法等
2packages/index.d类型定义
3packages/public公共数据类,方法等
4packages/chartConfiguration图表基础配置
5packages/components/Charts图表模块
6packages/components/Informations信息模块
7packages/components/Tables表格模块
8packages/components/Decorates装饰模块
9packages/components/external扩展文件夹(保留待用)
10packages/components/Icons图标模块
11packages/components/Photo图片模块