1统一通用解决方案

1.1主题样式变量色系 root 全局css变量 主题颜色 黑夜白天 或者其他 (pc,app)
1.2图表色系 基础组件 业务组件(pc,app) 大屏后台不同色系
1.3 多入口配置开发 比如 把 大屏 后台混合的 做区分配置(pc,app)
1.4 整体布局 头部菜单 搜索用户 ,菜单导航 ,右边的内容 搜索,表格，表单，弹框组件(pc,app)
1.5 element组件库样式scss支持修改变量编辑主题

2后台管理系统开发

2.1大屏与页面混合 是外链跳转 还是单独部署新项目 可以在多入口和新项目根据业务权衡
2.2接口api的统一，组件的分层，全局的分层，样式的管理，表单业务组件管理
2.3 api 文件夹
是一个接口文件夹 文件内容 包含接口函数 一般建议只使用 export 或者 export default 导出
会使用api.js来读取目录里的所有js文件 注册接口 减少import 代码
2.4 assets 资源图片样式字体文件目录
2.5 components 需要手动引入 组件的目录
2.6 composition-api vue2 使用 vue-demi 引入hooks 写法 setup 参考
2.7 globalComponent 自动注册全局组件目录 根据name属性来生成名称
showform.vue 是一个表单封装
dialog 是弹框
原本还想弄一个table 还没思考好怎么弄合适
然后一般还有头部的搜索部分表单控件与按钮操作
组件有可以在表单里使用 也可以在任意地方使用 都是 支持的 为了统一 头部搜索 表格 弹框 表单 和通用功能
2.8 layout 目录的 style css variables.scss
组件的样式 也提供 全局变量的注入 和 整体的考虑 进行抽离 还没想好怎么抽离 之前的曲阳基础样式比较多
2.9 layout 后台布局模板
import RightPanel from ‘./components/RightPanel/index_new’
import AppMain from ‘./components/AppMain_new’
import Sidebar from ‘./components/Sidebar/index_new’
import Navbar from ‘./components/Navbar’
import Breadcrumb from ‘./components/Breadcrumb/index_new’
import ResizeBar from ‘./components/Sidebar/resizeBar_new’
import TopNav from ‘./components/TopNav/index_new’
export const RightPanelComp = RightPanel // 右边抽屉弹出 目前是关闭的 没实现内容
export const AppMainComp = AppMain // 主体内容 把功能组件 组合的 主页面
export const NavbarComp = Navbar // 顶部导航 包含标题 菜单 用户 通知 等信息
export const SidebarComp = Sidebar // 侧边栏 根据 ruoyi曲阳的逻辑提出 目前的固定取的接口数据写死
export const BreadcrumbComp = Breadcrumb // 传统的面包屑 根据路由生成 未引入之前的 右键菜单和标签形式面包屑
export const ResizeBarComp = ResizeBar // 可拖动的图标 用于调整侧边栏宽度
export const TopNavComp = TopNav // 顶部导航菜单部分

2.10 layout 目录的 style css variables.scss
// style.scss控制 对于主体的颜色 比如 主题切换以及 css变量 和 选择器
// 全局 variables.scss 控制在scss预编译之前注入一些变量函数以及操作布局 减少代码量
// 提供通用的来解决样式复用

2.11pinia 按需引入的数据管理插件
组件管理规范 为了让开发更方便 以及方便统一管理 会读取统一的目录 在控制台提示有哪些功能组件可以使用
项目内置的vuex 管理通用的数据 比较难找 引入按需的数据管理 方便维护修改

3大屏系统开发

3.1统一的布局样式抽离 采用统一标准的变量和布局使用
3.2采用容器组件和内容组件 抽离 容器是布局 内容是业务
3.3图标图片的统一管理，使用统一的文件夹然后映射传内容渲染 可以拓展为一个组件

4app系统开发

4.1样式，资源，接口，通用表单和pc基本一致 保持变量css’统一
4.2尝试使用vite/vue-cli 搭建uniapp开发app
4.3在兼容写法上比如兼容小程序 app h5的处理上提出规范
4.4在app功能的混合开发上面提出公用的做打包 经常更新的做单纯h5嵌入

5地图开发

现有cesium 与mapbox 开源版本 应用于项目
5.1有 mapbox搭建 webpack vue组件库的尝试落地
5.2 需要基于cesium的以前有的二开插件 封装与框架同步的组件落地业务
5.3 可以使用vue-demi开发兼容vue 2 3的版本
6组件单元测试

6.1目前部分组件和一些断言库

vue-cli 或者vite创建项目时候是可以选择安装jest mocha 来验证组件的合理性
https://v1.test-utils.vuejs.org/zh/guides/

7图表功能组件

基于常用业务的功能分析，得出常用的图表大概十几种，关系图，折线图，散点图，旭日图，柱状图，漏斗图，热力图，雷达图，表盘，环形图，饼图，以及二维的地图。

type对应左边的json文件，v-moda是根据图表的数据视图映射提供的响应式数据封装，@开头的方法是基于组件提供修改内部的钩子函数，方便我们使用。
json属于echart4 5的配置 通用的配置，基于webpack的vue-cli 规范前后端组件图表数据格式。

8mapbox 开源版-maplibre-gl

通过wellknown 插件来解决geojson数据的格式渲染问题，保持一致；
通过turf来实现计算测量，拖拽功能在业务里
通常我们会使用一个基础的地图功能组件，提供绘制，图层，以及常用的方法。
落地项目会基于这个封装更多的业务组件。
通过webpack 以及vite来处理面向按需模块化的开发。
合并地理编码系统的基础版组件与曲阳部分组件功能

9通用的后台开发思路

1封装一个listpage组件，包含表单，表格，弹框，自定义内容，数据驱动视图，结合接口字段权限生成页面，解决大部分功能。
2表单的设计渲染控件，是字符串type或者tag渲染对应组件，支持内置element-ui组件库，以及自定义封装，
3数据驱动组件比如字符串渲染组件 规范保持是v-modal以及emit on
4表格渲染的字典以及接口，通过通用的封装函数来生成。挂载在当前组件实例上面
5通用的样式其实是全局控制 复用性而言比如非curd的页面，其实也可以支持组件复用。
10大屏适配页面
1通过提供一个基础布局的样式全局配置，一个通用的全局组件配置布局，一个页面的卡片局部组件，一个图片资源组件，一个图表统一组件，一个通用的组件（比如传入scroll-table字符串渲染滚动组件）
2大屏项目组成部分，由一个布局组件整体的，一个卡片组件局部，基础通用组件支持业务的，图表组件支持图表与接口保持一致，字典接口的通过配置来使用获取，基本可以解决style样式不用写太多，import资源也不用导入太多，提供资源图片组件。
3引入两种适配一个是scale缩放的组件，一种是转vw rem的 关于图表的设置也是可以控制的，地图部分的组件由封装二开自定义的组件支持避免iframe嵌入，

11app的页面开发

也是借鉴后台的渲染思路，提供几个全局组件，来完成表单的渲染，表格列表，基础布局的组件，引入字典和接口的挂载以及对应的渲染，数据驱动页面。保持样式和页面的统一

12关于整体项目的代码风格

起初是想安装eslint然后根据项目的配置文件来设置，但有些项目没有这些配置，比如hbx创建的项目，然后多数的项目也忽略的代码验证，结合了git eslint hooks

13项目地址git本地 私有git

私有git部署链接 https://blog.csdn.net/gcf10080353/article/details/130618132
https://bonobogitserver.com/

14图表组件功能说明

echarts 基础组件包含初始化 适配事件功能
componentId 是组件的id 读业务组件 多穿一个 option 读模板组件
echartsTemplate 模板组件传配置option 是基于基础组件封装子组件
业务图表组件 是基于基础组件封装
echartsOptions 文件夹里面的组件 是传type读optionjs内容渲染组件 读echart4 options
echart5Options 文件夹里面的组件 是传type读optionjs内容渲染组件 读echart5 options 新增地图二维echarts 中国地图 世界地图引入脚本来加载 新增折线 柱状 饼图 散点 省区案例 关系，漏斗 热力图
图表有适配加载过渡效果 事件渲染。搭配自适应postcss 字体vuex
大屏使用scale 就不需要postcss exclude 忽略src
rem 转化 就需要 也需要vuex
主题文件渲染， 与加载钩子函数 处理options
提供对于简单图表配置的v-modal比如折线 柱状，饼图，散点
还需要封装统一的前后端数据数据 规范
推荐使用根据type来读取组件，根据类来与实例关联，使用函数来复用图表

15动画实现组件库内置的过渡以及动画插件样式库

https://animate.style/

https://animxyz.com/docs
16maplibre-gl迭代
起初通过mapbox-draw js插件绘制 点线面，然后圆形，通过方法来绘制，然后封装组件，后续根据编码系统的maplibre-gl地图功能，将内置的地图组件，单独拿出来做基础组件，后续把起初封装的方法使用混入，并和一起，加入圆形，与图层切换，以及测量，点线面，圆，以及数据处理的控制，保持一致。