Skip to content

品牌自定义

系统支持完整的品牌信息自定义,包括 Logo、组织名称、版权信息等。

配置方法

1. 复制模板文件

bash
cp src/config/static/info.template.yaml src/config/static/info.local.yaml

2. 编辑品牌信息

src/config/static/info.local.yaml 中配置:

yaml
# 单位信息配置文件
# 用于配置网站的基本信息、品牌信息等

# 组织信息
organization:
  name: "江南语析"           # 完整组织名称
  logo: "/favicon.svg"       # Logo文件路径(放在 web/public 目录下)
  avatar: "/avatar.jpg"      # 头像文件路径(放在 web/public 目录下)
  login_bg: "/login-bg.jpg"  # 登录背景图片路径(放在 web/public 目录下)

# 项目信息
branding:
  name: "Yuxi-Know"
  title: "Yuxi-Know: 更智能的知识库智能体平台"     # 系统标题
  subtitle: "大模型驱动的知识库智能体平台"          # 副标题

features:
  - label: "GitHub Stars"
    value: "4100+"
    description: "开发者社区的认可与支持"
    icon: "stars"
  - label: "已解决 Issues"
    value: "300+"
    description: "持续改进和问题解决能力"
    icon: "issues"
  - label: "累计 Commits"
    value: "1300+"
    description: "活跃的开发迭代和功能更新"
    icon: "commits"
  - label: "开源协议"
    value: "MIT 协议"
    description: "完全免费,支持商业使用"
    icon: "license"

actions:
  - name: "演示视频"
    icon: "video"
    url: "https://www.bilibili.com/video/BV1DF14BTETq"
  - name: "文档中心"
    icon: "docs"
    url: "https://xerrors.github.io/Yuxi-Know/"
  - name: "提交 Issue"
    icon: "issue"
    url: "https://github.com/xerrors/Yuxi-Know/issues/new/choose"
  - name: "开发路线图"
    icon: "roadmap"
    url: "https://xerrors.github.io/Yuxi-Know/latest/changelog/roadmap.html"



# 页脚信息
footer:
  copyright: "© 江南语析 2026 v0.5.0"

上述中提到的 ICON 预设了下面这些,如果需要更多的 ICONS,可以手动从 lucide-vue-next 中引入。

js
const featureIconMap = {
  stars: Star,
  issues: CheckCircle2,
  resolved: CheckCircle2,
  commits: GitCommit,
  license: ShieldCheck,
  default: Star
}

const actionIconMap = {
  doc: BookText,
  docs: BookText,
  document: BookText,
  issue: Bug,
  bug: Bug,
  roadmap: Route,
  plan: Route,
  demo: Video,
  video: Video,
  github: Github,
  default: Github
}

3. 环境变量配置

.env 文件中指定配置文件路径:

bash
YUXI_BRAND_FILE_PATH=src/config/static/info.local.yaml

配置优先级

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 编程可以设计出更好看的首页的)

本项目基于 MIT License 开源,欢迎使用和贡献。