61 lines
1.5 KiB
Markdown
61 lines
1.5 KiB
Markdown
|
# 品牌自定义
|
|||
|
|
|
|||
|
|
系统支持完整的品牌信息自定义，包括 Logo、组织名称、版权信息等。
|
|||
|
|
|
|||
|
|
## 配置方法
|
|||
|
|
|
|||
|
|
### 1. 复制模板文件
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cp src/config/static/info.template.yaml src/config/static/info.local.yaml
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 编辑品牌信息
|
|||
|
|
|
|||
|
|
在 `src/config/static/info.local.yaml` 中配置：
|
|||
|
|
|
|||
|
|
<<< @/../src/config/static/info.template.yaml
|
|||
|
|
|
|||
|
|
上述中提到的 ICON 预设了下面这些，如果需要更多的 ICONS，可以手动从 `lucide-vue-next` 中引入。
|
|||
|
|
|
|||
|
|
<<< @/../web/src/views/HomeView.vue#icon_mapping{js}
|
|||
|
|
|
|||
|
|
### 3. 环境变量配置
|
|||
|
|
|
|||
|
|
在 `.env` 文件中指定配置文件路径：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
YUXI_BRAND_FILE_PATH=src/config/static/info.local.yaml
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
::: tip 配置优先级
|
|||
|
|
`info.local.yaml` > `info.template.yaml`（默认）
|
|||
|
|
:::
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 样式定制
|
|||
|
|
|
|||
|
|
系统配色主要保存在 `web/src/assets/css/base.css` 中：
|
|||
|
|
|
|||
|
|
- 替换 `--main-*` 相关变量即可改变配色
|
|||
|
|
- 支持主题色、辅助色等完整定制
|
|||
|
|
- 实时预览，无需重启服务
|
|||
|
|
|
|||
|
|
**主要变量**:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
:root {
|
|||
|
|
--main-color: #1890ff; /* 主色调 */
|
|||
|
|
--main-1000: #f0f2f5; /* 色板 */
|
|||
|
|
--main-900: #e6f7ff; /* 色板 */
|
|||
|
|
/* ... 其他色板 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**此外**，`web/src/stores/theme.js` 中也包含了主题相关的配置（需要修改 `colorPrimary`），可根据需要修改。
|
|||
|
|
|
|||
|
|
## 修改首页
|
|||
|
|
|
|||
|
|
首页提供了一个插槽组件 `web/src/components/ProjectOverview.vue`，可以在该组件中自定义项目介绍，当前为空文件。（借助 AI 编程可以设计出更好看的首页的）
|