+
+[](LICENSE)
+
+
Vue vben admin
+
+
+## 简介
+
+精简 Vue Vben Admin。
+
+## 特性
+
+- **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发
+- **TypeScript**: 应用程序级 JavaScript 的语言
+- **主题**：可配置的主题
+- **国际化**：内置完善的国际化方案
+- **Mock 数据** 内置 Mock 数据方案
+- **权限** 内置完善的动态路由权限生成方案
+- **组件** 二次封装了多个常用的组件
+
+## 预览
+
+- [vue-vben-admin](https://vvbin.cn/next/) - 完整版中文站点
+- [vue-vben-admin-gh-pages](https://anncwb.github.io/vue-vben-admin/) - 完整版 github 站点
+- [vben-admin-thin-next](https://vvbin.cn/thin/next/) - 简化版中文站点
+- [vben-admin-thin-gh-pages](https://anncwb.github.io/vben-admin-thin-next/) - 简化版 github 站点
+
+## 准备
+
+- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
+- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
+- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
+- [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
+- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
+- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
+- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui 基本使用
+- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
+
+## 安装使用
+
+- 获取项目代码
+
+```bash
+git clone https://github.com/anncwb/vue-vben-admin.git
+```
+
+- 安装依赖
+
+```bash
+cd vue-vben-admin
+git checkout thin
+pnpm install
+
+```
+
+- 运行
+
+```bash
+pnpm serve
+```
+
+- 打包
+
+```bash
+pnpm build
+```
+
+## Git 贡献提交规范
+
+- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
+
+ - `feat` 增加新功能
+ - `fix` 修复问题/BUG
+ - `style` 代码风格相关无影响运行结果的
+ - `perf` 优化/性能提升
+ - `refactor` 重构
+ - `revert` 撤销修改
+ - `test` 测试相关
+ - `docs` 文档/注释
+ - `chore` 依赖更新/脚手架配置修改等
+ - `workflow` 工作流改进
+ - `ci` 持续集成
+ - `types` 类型定义文件更改
+ - `wip` 开发中
+
+## 相关仓库
+
+如果这些插件对你有帮助，可以给一个 star 支持下
+
+- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - 用于本地及开发环境数据 mock
+- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) - 用于 html 模版转换及压缩
+- [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) - 用于组件库样式按需引入
+- [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme) - 用于在线切换主题色等颜色相关配置
+- [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin) - 用于打包压缩图片资源
+- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - 用于打包输出.gz|.brotil 文件
+- [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - 用于快速生成 svg 雪碧图
+
+## License
+
+[MIT © Vben-2020](./LICENSE)
diff --git a/frontend/vben/build/config/themeConfig.ts b/frontend/vben/build/config/themeConfig.ts
new file mode 100644
index 0000000..c816b6d
--- /dev/null
+++ b/frontend/vben/build/config/themeConfig.ts
@@ -0,0 +1,79 @@
+import { generate } from '@ant-design/colors';
+
+export const primaryColor = '#0960bd';
+
+export const darkMode = 'light';
+
+type Fn = (...arg: any) => any;
+
+type GenerateTheme = 'default' | 'dark';
+
+export interface GenerateColorsParams {
+ mixLighten: Fn;
+ mixDarken: Fn;
+ tinycolor: any;
+ color?: string;
+}
+
+export function generateAntColors(color: string, theme: GenerateTheme = 'default') {
+ return generate(color, {
+ theme,
+ });
+}
+
+export function getThemeColors(color?: string) {
+ const tc = color || primaryColor;
+ const lightColors = generateAntColors(tc);
+ const primary = lightColors[5];
+ const modeColors = generateAntColors(primary, 'dark');
+
+ return [...lightColors, ...modeColors];
+}
+
+export function generateColors({
+ color = primaryColor,
+ mixLighten,
+ mixDarken,
+ tinycolor,
+}: GenerateColorsParams) {
+ const arr = new Array(19).fill(0);
+ const lightens = arr.map((_t, i) => {
+ return mixLighten(color, i / 5);
+ });
+
+ const darkens = arr.map((_t, i) => {
+ return mixDarken(color, i / 5);
+ });
+
+ const alphaColors = arr.map((_t, i) => {
+ return tinycolor(color)
+ .setAlpha(i / 20)
+ .toRgbString();
+ });
+
+ const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.'));
+
+ const tinycolorLightens = arr
+ .map((_t, i) => {
+ return tinycolor(color)
+ .lighten(i * 5)
+ .toHexString();
+ })
+ .filter((item) => item !== '#ffffff');
+
+ const tinycolorDarkens = arr
+ .map((_t, i) => {
+ return tinycolor(color)
+ .darken(i * 5)
+ .toHexString();
+ })
+ .filter((item) => item !== '#000000');
+ return [
+ ...lightens,
+ ...darkens,
+ ...alphaColors,
+ ...shortAlphaColors,
+ ...tinycolorDarkens,
+ ...tinycolorLightens,
+ ].filter((item) => !item.includes('-'));
+}
diff --git a/frontend/vben/build/constant.ts b/frontend/vben/build/constant.ts
new file mode 100644
index 0000000..2c6119c
--- /dev/null
+++ b/frontend/vben/build/constant.ts
@@ -0,0 +1,6 @@
+/**
+ * The name of the configuration file entered in the production environment
+ */
+export const GLOB_CONFIG_FILE_NAME = '_app.config.js';
+
+export const OUTPUT_DIR = 'dist';
diff --git a/frontend/vben/build/generate/generateModifyVars.ts b/frontend/vben/build/generate/generateModifyVars.ts
new file mode 100644
index 0000000..44670e2
--- /dev/null
+++ b/frontend/vben/build/generate/generateModifyVars.ts
@@ -0,0 +1,37 @@
+import { generateAntColors, primaryColor } from '../config/themeConfig';
+import { getThemeVariables } from 'ant-design-vue/dist/theme';
+import { resolve } from 'path';
+
+/**
+ * less global variable
+ */
+export function generateModifyVars(dark = false) {
+ const palettes = generateAntColors(primaryColor);
+ const primary = palettes[5];
+
+ const primaryColorObj: Record
+