# AbstractConsole **Repository Path**: wyatt6/abstract-console ## Basic Information - **Project Name**: AbstractConsole - **Description**: 基于 Vue 3 和 JavaScript 的、支持以配置方式快速构建管理台（或控制台）的前端脚手架。目的是避免“重复造轮子”，可以让前端开发团队节省下创建和初始化工程、安装和配置依赖软件包、开发基础模块（请求、路由、状态管理、Mock 挡板等）和开发基础页面（门户、管理台/控制台主体、错误提示页面等）的时间。 - **Primary Language**: Unknown - **License**: GPL-3.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-06-04 - **Last Updated**: 2025-08-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # AbstractConsole ![](./docs/AbstractConsole副标题.svg) ![](./docs/release_tag_v0.1.svg) ![](./docs/license_tag.svg) AbstractConsole 是基于 Vue 3 和 JavaScript 的、支持以配置方式快速构建管理台（或控制台）的前端脚手架。AbstractConsole 面向前端开发者，目的是避免“重复造轮子”，可以让前端开发团队节省下创建和初始化工程、安装和配置依赖软件包、开发基础模块（请求、路由、状态管理、Mock 挡板等）和开发基础页面（门户、管理台/控制台主体、错误提示页面等）的时间。开发者可以基于 AbstractConsole 脚手架构建自己的项目，通过设置配置参数快速搭建起管理台的前端框架，而后开发与自己业务功能密切相关的模块和页面，使用脚手架提供的挡板功能进行测试，或通过所配置的接口调用自己后端部署的服务。 演示系统地址：[https://gitee.com/wyatt6/abstract-console](https://gitee.com/wyatt6/abstract-console)（待更新） ## 支持特性 - 系统名称、版权声明、标签页图标和标题； - 主题基础颜色； - 门户封面图片和封面标题、使用条款和隐私保护政策、用户和密码格式； - 管理台主体 Logo、标题、菜单和标签页颜色； - 日志打印控制； - 网络请求控制和 Mock 挡板控制； - 自定义图片和本地 SVG 图标； - 自定义页面和组件、自定义路由； - 自定义状态管理。 ## 技术栈 ![](./docs/techstack_vue.svg) ![](./docs/techstack_element-plus.svg) ![](./docs/techstack_vite.svg) ![](./docs/techstack_vue-router.svg) ![](./docs/techstack_pinia.svg) ![](./docs/techstack_sass.svg) ![](./docs/techstack_eslint.svg) ![](./docs/techstack_prettier.svg) ![](./docs/techstack_axios.svg) ![](./docs/techstack_mockjs.svg) ![](./docs/techstack_vite-awesome-svg-loader.svg) ![](./docs/techstack_commander.svg) # 使用指南 ## 快速配置机制 AbstractConsole 提供的快速配置机制主要由`app_settings`和`app_settings_core`两个模块构成。`app_settings`用于保存开发者配置的参数值；`app_settings_core`（以下简称`ASC`）作为快速配置机制的核心，提供了三个参数加载 API，用于在不同的时间点（创建 Vue 应用实例前、挂载实例到`#app`元素前、挂载实例到`#app`元素后）从`app_settings`加载配置的参数值，对其做必要的计算后或直接修改框架的底层参数使之生效，或封装成全局参数对象暴露给应用来调用。 ![图1 快速参数配置机制](./docs/快速参数配置机制.png) ## 主要目录结构 ``` + 工程根目录 | + app_settings/ | | settings.js 配置文件 | + app_settings_core/ | | + modules/ | | | settings_loader_reserved.js 保留配置项主加载程序 | | | settings_loader_custom.js 自定义配置项主加载程序 | | | http.js 网络访问控制相关配置的子加载程序 | | | theme.js 主题颜色相关配置的子加载程序 | | default_settings.js 没有自定义配置时的默认设置 | | index.js app_settings_core 模块主程序 | + src/ | | - reserved/ 脚手架的保留文件 | | + custom/ 自定义的程序文件 | | | - assets/ 自定义的资源文件（ico 图标、svg 图标、图片等） | | | - components/ 自定义的组件 | | | - http/ 自定义的网络请求和 Mock 挡板 | | | - router/ 自定义的路由设置 | | | - stores/ 自定义的状态管理 | | | - utils/ 自定义的工具程序 | | | - views/ 自定义的 Vue 页面 | | App.vue | | index.scss | | main.js | index.html | jsconfig.js | vite.config.js | 其他文件...... ``` 为了开发者在开发过程中更快速地引用文件路径，AbstractConsole 提供了两个目录的别名，分别是`~`代表`/src/reserved`、`@`代表`/src/custom`。 ## 配置文件 AbstractConsole 脚手架的配置文件`app_settings/settings.js`包含两部分配置项，分别是脚手架正常运行所保留的`reserved`配置项和开发者基于脚手架二次开发是自定义的`custom`配置项。 ```javascript { reserved: { name: 'Abstract Console', ...... }, custom: { myCustomConfig: 'This is my custom configuration', ...... } } ``` 对于`reserved`内的配置项，开发者可以注释掉其中的配置项，此时脚手架会使用默认值；可以修改配置项的参数值，修改成自己期望的内容；但不应修改`reserved`内配置项的层次结构和配置项名称，以免造成脚手架加载错误无法正常运行。对于`custom`内的配置项，提供给开发者在二次开发时自由组织和定义自己要用到的配置，在创建 Vue 应用实例前加载这些配置参数到`ASC`中，开发者可以通过`ASC.settings.custom.*`访问自定义的配置参数。 不建议直接导入`app_settings/settings.js`配置文件并访问里面的配置项，建议通过`ASC.settings`访问配置项的参数值，因为有的参数值经过`ASC`计算和封装后组织结构会发生变化： ```javascript import ASC from '/app_settings_core' const name = ASC.settings.name // 脚手架保留配置使用示例（系统名称） const myCustomConfig = ASC.settings.custom.myCustomConfig // 开发者自定义配置使用示例 ``` > 注意!!! > > - 后续讨论的配置项，除非特别说明默认都是`reserved`内的配置项。 > - 尺寸单位 rem 转换：1 rem = 10 px。 ## 修改系统名称 | 配置名 | 说明 | 参数类型 | 默认值 | | ------ | -------- | -------- | ---------------- | | name | 系统名称 | string | Abstract Console | AbstractConsole 提供了配置项`name`用来设置系统名称。目前仅在门户的登录页面的页脚欢迎词中渲染。 ## 修改版权声明 | 配置名 | 说明 | 参数类型 | 默认值 | | ------------- | -------- | -------- | ---------------------------------------------- | | copyrightText | 版权声明 | string | \© 2025-${new Date().getFullYear()} Wyatt | AbstractConsole 提供了配置项`copyrightText`用来设置版权声明提示。目前仅在门户的登录页面的页脚中渲染。 ## 修改标签页图标和标题 | 配置名 | 说明 | 参数类型 | 默认值 | | --------------- | ---------------- | -------- | ---------------- | | faviconFileName | 标签页图标文件名 | string | 无 | | title | 标签页标题 | string | Abstract Console | AbstractConsole 提供了配置项`faviconFileName`用来指定标签页图标的文件名。当该配置项不存在或被注释掉时，会显示默认的标签页图标；当该配置项被设置了参数值时，脚手架会从`/src/custom/assets/favicon/`文件夹中查找该文件名作为标签页图标，开发者需要将自定义图标文件放到该目录内。 修改`title`参数值来设置标签页标题。 ## 设置主题基础颜色 | 配置名 | 说明 | 参数类型 | 默认值 | | --------------------- | ------------ | -------- | --------------------------------------------------------------------------------------------------------- | | basicColor.primary | 主色 | string | \#409eff       | | basicColor.success | 辅助色：成功 | string | \#67c23a       | | basicColor.warning | 辅助色：警告 | string | \#e6a23c       | | basicColor.danger | 辅助色：危险 | string | \#f56c6c       | | basicColor.error | 辅助色：错误 | string | \#f56c6c       | | basicColor.info | 辅助色：提示 | string | \#909399       | | basicColor.background | 页面背景 | string | \#f2f3f5       | AbstractConsole 色彩模型参考了 [ElementPlus 的色彩模型](https://element-plus.org/zh-CN/component/color.html)。可以通过修改`basicColor`配置块内各个颜色的十六进制编码参数值来设置自己系统的基础主题色彩。 ## 修改使用条款和隐私保护政策 | 配置名 | 说明 | 参数类型 | 默认值 | | -------------------- | -------------------------- | -------- | ------ | | termsOfUseSettled | 已编辑好自定义使用条款 | boolean | false | | privacyPolicySettled | 已编辑好自定义隐私保护政策 | boolean | false | AbstractConsole支持使用自定义的使用条款和隐私保护政策。开发者需要先在`/src/custom/components/TermsOfUse/TermsOfUseContent.vue`和`/src/custom/components/PrivacyPolicy/PrivacyPolicyContent.vue`分别编辑自己的使用条款内容和隐私保护政策内容，而后将配置项`termsOfUseSettled`和`privacyPolicySettled`设为 true 以提示脚手架已经设置了好这两个内容。脚手架会自动读取两个文件的内容并显示。目前仅在门户的注册页面小标题中提供使用条款和隐私保护政策的内容阅览。 ## 设置门户 | 配置名 | 说明 | 参数类型 | 默认值 | | ------------------------- | --------------------- | -------- | ---------------------------------------------------------------------------------------------------------- | | portal.coverImageFileName | 封面图片（宽:高=5:6） | string | 无 | | portal.coverTitle | 封面标题内容 | string | Abstract Console | | portal.coverTitleSize | 封面标题字体大小 | string | 5rem | | portal.coverTitleColor | 封面标题字体颜色 | string | \#303133       | | portal.coverSubTitle | 封面副标题内容 | string | 一款开源的支持快速配置的管理台脚手架 | | portal.coverSubTitleSize | 封面副标题字体大小 | string | 2rem | | portal.coverSubTitleColor | 封面副标题字体颜色 | string | \#303133       | | portal.usernameFormat | 用户名格式约束条件 | array | `[5, 30, /^[a-zA-Z][a-zA-Z_0-9]{4,29}$/, '仅限大写、小写字母，数字，下划线(_)，必须以字母开头']` | | portal.passwordFormat | 密码格式约束条件 | array | `[6, 50, /^[a-zA-Z_0-9.~!@#$%^&*?]{6,50}$/, '仅限大写、小写字母，数字，下划线(_)，特殊字符(.~!@#$%^&*?)']` | ![](./docs/门户登录页面.png) AbstractConsole 门户自定义样式可以通过设置`portal`配置块内的各个参数来快速生效。在门户所属的登录页面、注册页面、重置密码页面都同样生效： - 封面图片：开发者需将自己的封面图片文件上传到`/src/custom/assets/images/portal/`目录下，再将`coverImageFileName`参数值设置成该封面图片文件名。 - 封面标题：`coverTitle`、`coverTitleSize`、`coverTitleColor`分别控制封面标题的内容、字体大小、字体颜色。 - 封面副标题：`coverSubTitle`、`coverSubTitleSize`、`coverSubTitleColor`分别控制封面标题的内容、字体大小、字体颜色。 - 用户名和密码格式约束条件：分别由`usernameFormat`和`passwordFormat`配置项控制，接受一个数组类型的参数，遵循范式`[最短长度, 最大长度, 格式正则表达式, 输入格式错误提示语]`。 ## 设置管理台主体 | 配置名 | 说明 | 参数类型 | 默认值 | | --------------------------------- | ---------------------- | -------- | --------------------------------------------------------------------------------------------------------- | | layout.logoImageFileName | Logo 图片 | string | 无 | | layout.logoTitle | Logo 标题 | string | Abstract Console | | layout.logoTitleSize | Logo 标题字体大小 | string | 1.8rem | | layout.logoTitleWeight | Logo 标题字体粗细 | string | 700 | | layout.logoTitleColor | Logo 标题字体颜色 | string | \#ffffff       | | layout.menuBackground | 菜单背景颜色 | string | \#384e6a       | | layout.menuHoverColor | 菜单悬停颜色（暂无效） | string | \#263445       | | layout.menuTextColor | 菜单文字颜色 | string | \#aab9ca       | | layout.menuActiveTextColor | 选中菜单文字颜色 | string | \#409eff       | | layout.menuActiveSubMenuTextColor | 选中子菜单文字颜色 | string | \#ffffff       | | layout.tagbarActiveTagColor | 标签栏选中标签颜色 | string | \#384e6a       | ![](./docs/管理台主体.png) AbstractConsole 管理台主体自定义样式可以通过设置`layout`配置块内的各个参数来快速生效： - 左上角的 Logo：开发者需将自己的 Logo 图片文件上传到`/src/custom/assets/images/layout/`目录下，再将`logoImageFileName`参数值设置成该 Logo 图片文件名。 - Logo 标题：`logoTitle`、`logoTitleSize`、`logoTitleWeight`、`logoTitleColor`分别控制 Logo 标题的内容、字体大小、字体粗细、字体颜色。 - 菜单栏：`menuBackground`、`menuHoverColor`（暂无效）、`menuTextColor`、`menuActiveTextColor`、`menuActiveSubMenuTextColor`分别控制菜单栏的背景颜色、悬停颜色、字体颜色、被选中菜单的字体颜色、被选中子菜单的字体颜色。 - 标签栏：`tagbarActiveTagColor`控制标签栏被选中菜单颜色。 ## 打开/关闭日志打印 AbstractConsole 提供了配置项`openLog`用来打开/关闭浏览器控制台的日志打印功能，true 开启；false 关闭。 | 配置名 | 说明 | 参数类型 | 默认值 | | ------- | ------------ | -------- | ------ | | openLog | 日志打印开关 | boolean | false | 开发者在二次开发时导入脚手架的日志打印程序来打印的日志，也可以被`openLog`配置控制，具体用法是： ```javascript import Logger from '~/utils/logger' Logger.log('日志内容') ``` ## 声明和使用保留 API 和 Mock AbstractConsole 提供了配置项`http`用来对 API 及其 Mock 开关做快速配置。`http`内包含了基础的请求配置项、脚手架保留 API 配置项（`api`）、开发者自定义 API 配置项（`customApi`）。由于脚手架保留 API 与自定义API 的数据结构有差异，本节仅介绍脚手架保留 API 及其 Mock 的声明和使用，自定义 API 的部份放在后续“自定义开发”章节中介绍。 ### 基础参数 | 配置名 | 说明 | 参数类型 | 默认值 | | ----------------- | ---------------------- | -------- | ------ | | http.baseUrl | URL 统一前缀 | boolean | /api | | http.timeoutInMs | 等待超时时长（毫秒） | integer | 30000 | | http.mockAll | 打开所有 Mock | boolean | false | | http.mockOnDemand | 按需开启各 API 的 Mock | boolean | false | - `baseUrl`：会在所有 API 请求 URL 统一加上`baseUrl`前缀，例如`baseUrl`为 /api、API 为 /do/something 时，最终发出的请求 URL 是 /api/do/something。 - `timeoutInMs`：等待超时时长，单位是毫秒。请求发出后超过这个时长后还没有收到后端的响应就报超时错误。 - `mockAll`：此项为 true 时打开所有 Mock，此时不管`mockOnDemand`或者每个 API 中的`mock`取值如何。 - `mockOnDemand`：此项为 true 时按需开启各 API 的 Mock，即当某个 API 中的`mock`取值为 true 开启该 API 的 Mock。 ### 脚手架保留 API 及其 Mock `http`内的`api`配置项用于定义脚手架保留的 API 及其 Mock 开关，与自定义 API `customApi.模块名.接口名.接口元数据`不同，它是`api.接口名.接口元数据`形式的数据结构，需要遵循以下的定义范式： ```javascript http: { api: { apiName: { desc: '接口说明', url: '/path/to/target', method: 'get、post等', mock: true/false } } } ``` - `apiName`：API 的名称； - `desc`：API 说明； - `url`：API 访问的 URL； - `method`：请求方法（get, head, post, put, delete, connect, options, trace, patch），忽略大小写； - `mock`：API 的 Mock 开关，为 true 时在按需开启的情况下（`mockOnDemand` = true）会开启这个 API 的Mock。 > 注意!!! > > 脚手架保留 API 只允许开发者修改`url`来访问自己的后端系统接口、修改`mock`来开关该 API 的 Mock；其他 API 配置不应改动。 示例： ``` http: { api: { getCaptcha: { desc: '获取验证码', url: '/demo/captcha/getCaptcha', mock: true }, login: { desc: '用户登录', url: '/demo/user/login', method: 'post', mock: true } } } ``` 配置好了 API 和 Mock 开关之后，可以通过以下方式调用。规定 API 访问函数的第1个参数是`params`，是一个对象数据类型，用于传递 URL 参数；第2个参数是`data`参数，也是一个对象数据类型，是通过报文体传递的数据，主要用于 post 方法的 API： ```javascript import Apis from '~/http/apis' // Apis.reserved.接口名(params, data) Apis.reserved.login(null, data) .then(result => { // do something here ...... }) .catch(error => { // handle error ...... (建议在 API 模块拦截器里统一处理异常，就可以不用写 catch 子句) }) .finally(() => { // do final things ...... (按需使用 finally 子句) }) ``` Mock 不需要特别地触发，在 API 被调用之后框架会拦截到特定 URL 后就会触发 Mock 挡板响应预设的挡板数据。 ## 自定义开发 以上指南提供了 AbstractConsole 脚手架基础的内置配置，本节内容将说明开发者基于脚手架进行二次开发的基本要求和推荐建议。开发者应遵循这些基本要求和推荐建议以确保脚手架能正确运行、提高自定义页面的开发效率。 ### 自定义图片和 SVG 图标 建议开发者二次开发时将自己的图片存储到`/src/custom/assets/images/`目录再在代码中导入图片。 如果开发者二次开发时需要用到自己的本地 SVG 图标，可以将 SVG 图标文件存储到`/src/custom/assets/icons/`目录，然后在目标位置使用该文件名称或使用脚手架内置本地图标组件`LocalIcon`渲染图标。`LocalIcon`组件基于开源插件[vite-awesome-svg-loader](https://github.com/matafokka/vite-awesome-svg-loader)进行封装，提供了`name`、`size`、`color`、`color-transition`属性进行渲染控制。 - `name`：SVG 图标名称（不需要带 .svg 后缀）； - `size`：SVG 图标大小； - `color`：SVG 图标颜色； - `color-transition`：SVG 图标动画。 示例： ```vue ``` ### 自定义 API 和 Mock `http`内的`customApi`配置项用于定义开发者自定义的 API 及其 Mock 开关，与脚手架 API `api.接口名.接口元数据`不同，它中间多了一层模块层，数据格式形式是`customApi.模块名.接口名.接口元数据`，需要遵循以下的定义范式： ```javascript http: { customApi: { moduleName: { apiName: { desc: '接口说明', url: '/path/to/target', method: 'get、post等', mock: true/false } } } } ``` - `moduleName`：开发者为一组 API 自定义的模块名称； - `apiName`：API 的名称； - `desc`：API 说明； - `url`：API 访问的 URL； - `method`：请求方法（get, head, post, put, delete, connect, options, trace, patch），忽略大小写； - `mock`：API 的 Mock 开关，为 true 时在按需开启的情况下（`mockOnDemand` = true）会开启这个 API 的 Mock。 示例： ```javascript http: { customApi: { iam: { getAllPermissions: { desc: '获取所有权限', url: '/iam/getAllPermission', mock: true }, deletePermission: { desc: '删除权限', url: '/iam/deletePermission', mock: false } }, todo: { getTodoList: { decs: '获取待办列表', url: '/todo/getTodolist', mock: false }, addTodo: { desc: '添加待办', url: '/todo/addTodo', method: 'post', mock: true } } } } ``` 配置好了 API 和 Mock 开关之后，可以通过以下方式调用。规定 API 访问函数的第1个参数是`params`，是一个对象数据类型，用于传递 URL 参数；第2个参数是`data`参数，也是一个对象数据类型，是通过报文体传递的数据，主要用于 post 方法的接口。 ```javascript import Apis from '~/http/apis' // Apis.custom.模块名.接口名(params, data) Apis.custom.todo.addTodo(null, data) .then(result => { // do something here ...... }) .catch(error => { // handle error ...... (建议在 API 模块拦截器里统一处理异常，就可以不用写 catch 子句) }) .finally(() => { // do final things ...... (按需使用 finally 子句) }) ``` 自定义 API 的 Mock 需要开发者自己去设计。以待办模块（todo）为例，在`/src/custom/http/mock/`目录下为模块创建 Mock 文件`todo.js`为每个待办模块下需要 Mock 的 API 添加挡板数据，如下示例： ```javascript export default { getTodoList: { success: true, data: { todoList: [ { name: '待办1', desc: '这是一个待办', deadline: '2025-07-14' }, { name: '待办2', desc: '另外一个待办', deadline: '2025-07-15' } ] }, traceId: 'b38e360890a8' }, addTodo: { success: true, data: null, traceId: 'asdg3sdfas98' } } ``` 编写好模块的 Mock 数据后，需要在`/src/custom/http/mock/index.js`中注册该模块。注意对象的 Key 需要和对应 API 的模块名相同，否则无法正确注册该模块的 Mock。如下示例： ```javascript import todoMockData from './todo.js' export default { todo: todoMockData } ``` Mock 不需要特别地触发，在 API 被调用之后框架会拦截到特定 URL 后就会触发 Mock 挡板响应预设的挡板数据。 ### 自定义页面和组件 开发者二次开发页面和组件与普通的直接使用 Vue 3 的开发没有区别，页面建议存储在`/src/custom/views/`目录，组件建议存储在`/src/custom/components/`目录。 ### 自定义页面路由 #### 自定义路径表 路径表用来快速访问路径 URL。在`/src/custom/router/custom_path_table.js`的`customPathMeta`对象中添加路径表的元数据，例如`SAMPLE: { path: '/sample', needLogin: true, needPermission: true, showTag: true}`，其中`path`是页面路由的路径，`needLogin`为 true 时表示该页面需要登录后才能访问，`needPermission`为 true 时表示该页面用户需要有权限才能访问，`showTag`为 true 时表示该页面会在标签栏上显示标签。自定义的路径表会被脚手架集成到统一的路径表里，可以这样引用路径： ```javascript import pathTable from '~/router/path_table.js' const samplePath = pathTable.SAMPLE ``` #### 自定义公共路由 公共路由表`/src/custom/router/custom_public_routes.js`存储不需要权限就可以访问的路由，每个用户都可以访问这些页面，显示的内容每个用户都一样。路由的定义参考 [Vue Router](https://router.vuejs.org/zh/) 的说明，不同点在于页面路由里面有个`meta`块用来设置页面的一些配置，路由定义好后脚手架会自动加载，自需要。 ```javascript { path: pathTable.SAMPLE, component: SampleView, meta: { isMenu: true/false, // 在菜单栏中显示为菜单项 isBreadcrumb: true/false, // 在导航栏显示面包屑 breadcrumbRedirect: true/false, // 在导航栏显示的面包屑允许点击跳转 title: 'page title', // 页面标题，在菜单栏中显示 icon: 'icon-name' // 图标名称，在菜单栏中显示（ElementPlus 内置图标用法类似 el-icon-user） } } ``` #### 自定义私有路由 私有路由表`/src/custom/router/custom_private_routes.js`存储的是需要有权限才可以访问的路由，没有访问权限的用户无法查看。自定义私有路由的定义和自定义公共路由的定义是一样的，脚手架会自动判断。 ### 自定义状态管理 自定义状态管理参考 [Pinia](https://pinia.vuejs.org/zh/) 定义即可。需要注意的是每个 store 都需要实现一个用于初始化的`$reset`函数，里面定义该 store 需要执行重置的逻辑。然后把每个 store 的`$reset`函数统一注入到`/src/custom/stores/index.js`的`$reset`方法里，脚手架自动执行这些注入后的自定义 store 初始化函数。 ```javascript import { useSampleStore } from '~/stores/sample.js' export const useCustomStore = defineStore('custom', () => { function $reset() { useSampleStore().$reset() } return { $reset } }) ``` ## 运行、构建和部署 - 校验：`npm run lint` - 格式化：`npm run format` - 本地运行：`npm run dev` - 构建：`npm run build` - 部署：将构建出来的`dist`文件夹放在 Nginx 等 Web 容器上部署。 # 附录 ## 配置文件保留配置项汇总 | 配置名 | 说明 | 参数类型 | 默认值 | | --------------------------------- | -------------------------- | -------- | ------------------------------------------------------------ | | name | 系统名称 | string | Abstract Console | | copyrightText | 版权声明 | string | \© 2025-${new Date().getFullYear()} Wyatt | | faviconFileName | 标签页图标文件名 | string | 无 | | title | 标签页标题 | string | Abstract Console | | basicColor | 主题基础颜色 | —— | —— | | basicColor.primary | 主色 | string | \#409eff       | | basicColor.success | 辅助色：成功 | string | \#67c23a       | | basicColor.warning | 辅助色：警告 | string | \#e6a23c       | | basicColor.danger | 辅助色：危险 | string | \#f56c6c       | | basicColor.error | 辅助色：错误 | string | \#f56c6c       | | basicColor.info | 辅助色：提示 | string | \#909399       | | basicColor.background | 页面背景 | string | \#f2f3f5       | | termsOfUseSettled | 已编辑好自定义使用条款 | boolean | false | | privacyPolicySettled | 已编辑好自定义隐私保护政策 | boolean | false | | portal | 门户 | —— | —— | | portal.coverImageFileName | 封面图片（宽:高=5:6） | string | 无 | | portal.coverTitle | 封面标题内容 | string | Abstract Console | | portal.coverTitleSize | 封面标题字体大小 | string | 5rem | | portal.coverTitleColor | 封面标题字体颜色 | string | \#303133       | | portal.coverSubTitle | 封面副标题内容 | string | 一款开源的支持快速配置的管理台脚手架 | | portal.coverSubTitleSize | 封面副标题字体大小 | string | 2rem | | portal.coverSubTitleColor | 封面副标题字体颜色 | string | \#303133       | | portal.usernameFormat | 用户名格式约束条件 | array | `[5, 30, /^[a-zA-Z][a-zA-Z_0-9]{4,29}$/, '仅限大写、小写字母，数字，下划线(_)，必须以字母开头']` | | portal.passwordFormat | 密码格式约束条件 | array | `[6, 50, /^[a-zA-Z_0-9.~!@#$%^&*?]{6,50}$/, '仅限大写、小写字母，数字，下划线(_)，特殊字符(.~!@#$%^&*?)']` | | layout | 管理台主体 | —— | —— | | layout.logoImageFileName | Logo 图片 | string | 无 | | layout.logoTitle | Logo 标题 | string | Abstract Console | | layout.logoTitleSize | Logo 标题字体大小 | string | 1.8rem | | layout.logoTitleWeight | Logo 标题字体粗细 | string | 700 | | layout.logoTitleColor | Logo 标题字体颜色 | string | \#ffffff       | | layout.menuBackground | 菜单背景颜色 | string | \#384e6a       | | layout.menuHoverColor | 菜单悬停颜色（暂无效） | string | \#263445       | | layout.menuTextColor | 菜单文字颜色 | string | \#aab9ca       | | layout.menuActiveTextColor | 选中菜单文字颜色 | string | \#409eff       | | layout.menuActiveSubMenuTextColor | 选中子菜单文字颜色 | string | \#ffffff       | | layout.tagbarActiveTagColor | 标签栏选中标签颜色 | string | \#384e6a       | | openLog | 日志打印开关 | boolean | false | | http | 网络请求 | —— | —— | | http.baseUrl | URL 统一前缀 | boolean | /api | | http.timeoutInMs | 等待超时时长（毫秒） | integer | 30000 | | http.mockAll | 打开所有 Mock | boolean | false | | http.mockOnDemand | 按需开启各 API 的 Mock | boolean | false | | http.api | 脚手架保留 API | object | 略 | | http.customApi | 自定义 API | object | {} |