feat: theme

ui/src/api/admin/system/theme-setting.ts

@@ -0,0 +1,11 @@
+import { get, put } from '../core/request'
+import type { ThemeInfo } from '../auth/types'
+
+/** 保存系统外观主题设置。 */
+const putThemeSetting = (payload: FormData) => {
+  return put<FormData, boolean>('/settings/theme', payload)
+}
+
+export default {
+  putThemeSetting,
+}

ui/src/components/COMPONENT_README.md

@@ -89,6 +89,9 @@ src/components/
 │   └── index.vue                 # 搜索框与剩余空间滚动列表，手动导入
 ├── mk-form-list/
 │   └── index.vue                 # 可动态增删的表单行列表，手动导入
+├── mk-logo/
+│   ├── LogoFull.vue              # 带产品名称的完整 Logo，手动导入
+│   └── LogoIcon.vue              # 不带产品名称的图形 Logo，手动导入
 ├── codemirror-editor/
 │   ├── python.vue                # 内置 pylint 诊断和全屏编辑的 Python 编辑器
 │   └── Json.vue                  # 支持格式化、语法诊断和全屏编辑的 JSON 输入框
@@ -105,6 +108,8 @@ Vue 模板中使用，不需要手动导入。其他共享组件必须从具体
 import MkSearchList from '@/components/mk-search-list/index.vue'
 import MkFormList from '@/components/mk-form-list/index.vue'
 import MkDateRange from '@/components/mk-date-range/index.vue'
+import LogoFull from '@/components/mk-logo/LogoFull.vue'
+import LogoIcon from '@/components/mk-logo/LogoIcon.vue'
 import PythonCodeEditor from '@/components/codemirror-editor/python.vue'
 import JsonInput from '@/components/codemirror-editor/Json.vue'
 import MkSourceCard from '@/components/mk-source-card/index.vue'
@@ -124,7 +129,8 @@ import WorkspaceRelationTags from '@/components/business/workspace-relation-tags
   由使用方手动导入。业务组件不使用 `Mk` 前缀，也不再按 Workspace 等上级领域增加额外目录。
 - 不依赖固定业务的共享组合 UI 组件放在 `components/<component-name>`，由使用方手动导入。
 - 一个公共组件默认使用一个 kebab-case 目录，入口统一为 `index.vue`；`codemirror-editor` 按语言
-  提供 `python.vue` 和 `Json.vue` 两个专用入口。
+  提供 `python.vue` 和 `Json.vue` 两个专用入口，`mk-logo` 按完整 Logo 与图形 Logo 提供
+  `LogoFull.vue` 和 `LogoIcon.vue` 两个专用入口。
 - 组件名使用 PascalCase；目录名使用 kebab-case，例如 `MkIcon` 对应
   `mk-icon/index.vue`。
 - `index.vue` 必须通过 `defineOptions({ name: 'ComponentName' })` 声明多单词组件名，避免
@@ -537,6 +543,27 @@ Dialog、Drawer、Popover、嵌套区域等其他大、小表格均禁止开启
 
 ## 手动导入组件
 
+### LogoFull、LogoIcon
+
+`LogoFull` 展示带产品名称的完整 Logo，`LogoIcon` 展示不带产品名称的图形 Logo，使用时分别从
+`@/components/mk-logo/LogoFull.vue` 和 `@/components/mk-logo/LogoIcon.vue` 显式导入。两个组件在
+默认主题下展示内置蓝紫渐变 Logo，自定义主题下使用 Theme Store 中的当前主题色。`LogoFull`
+还会优先展示 Theme Store 中配置的 `loginLogo`。两个组件都只接收可选的 `height`，其余主题与
+Logo 数据统一从 Theme Store 获取。
+
+```vue
+<script setup lang="ts">
+import LogoFull from '@/components/mk-logo/LogoFull.vue'
+import LogoIcon from '@/components/mk-logo/LogoIcon.vue'
+</script>
+
+<template>
+  <LogoFull />
+  <LogoFull height="36" />
+  <LogoIcon class="h-8" />
+</template>
+```
+
 ### MkDateRange
 
 组合日期预设下拉框和自定义日期区间选择器。默认显示“过去 7 天”，仅在用户修改筛选条件时通过
@@ -875,7 +902,8 @@ import WorkspaceRelationTags from '@/components/business/workspace-relation-tags
 ## 新增公共组件
 
 1. 根据使用范围选择 `global`、`components` 直属目录、`components/business` 或所属功能目录。
-2. 在 `<component-name>/index.vue` 创建组件，并声明多单词组件名。
+2. 默认在 `<component-name>/index.vue` 创建组件并声明多单词组件名；已有多入口约定的目录按其
+   专用入口文件组织。
 3. 使用类型化 Props、Emits 和 Slots。
 4. `global` 组件在模板中直接使用；其他共享组件由使用方从具体路径导入。
 5. 更新本文档中的目录树和组件说明。

ui/src/components/business/folder-tree/FolderFormDialog.vue

@@ -8,7 +8,7 @@ import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'FolderFormDialog' })
 
-const { user } = useStore()
+const { auth } = useStore()
 
 const props = defineProps<{
   title: string
@@ -44,7 +44,7 @@ function handleSubmit() {
 
     return request
       .then((folder) => {
-        const refreshCurrentUser = isEdit ? Promise.resolve() : user.loadCurrentUser()
+        const refreshCurrentUser = isEdit ? Promise.resolve() : auth.loadAuthBaseProfile()
         return refreshCurrentUser.then(() => {
           MsgSuccess(isEdit ? '保存成功' : '创建成功')
           visible.value = false

ui/src/components/mk-logo/LogoFull.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import { useStore } from '@/stores'
+
+defineOptions({ name: 'LogoFull', inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    height?: number | string
+  }>(),
+  {
+    height: 30,
+  },
+)
+
+const attrs = useAttrs()
+const { theme } = useStore()
+</script>
+
+<template>
+  <img
+    v-if="theme.themeInfo?.loginLogo"
+    v-bind="attrs"
+    alt="MaxKB"
+    :height="height"
+    :src="theme.themeInfo.loginLogo"
+    class="max-w-none object-contain object-left"
+  />
+  <img
+    v-else-if="theme.isDefaultTheme"
+    v-bind="attrs"
+    alt="MaxKB"
+    :height="height"
+    src="@/assets/mk-logo/MaxKB-logo.svg"
+    class="max-w-none"
+  />
+  <svg
+    v-else
+    v-bind="attrs"
+    :height="height"
+    aria-hidden="true"
+    class="max-w-none text-primary"
+    viewBox="0 0 122 36"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M75.3094 19.0805V27.05H71.8274L71.8109 26.2436C70.5933 26.8762 69.4033 27.1925 68.2412 27.1923H67.8972C66.7033 27.1923 65.7546 26.7337 65.051 25.8166C64.5855 25.1007 64.342 24.2631 64.3513 23.4092V23.3143C64.3513 21.7489 64.9008 20.7092 65.9997 20.1953C66.4505 19.8949 67.5929 19.7447 69.4271 19.7447H71.3008V19.3058C71.3008 18.4045 71.1703 17.8867 70.9094 17.7523C70.6249 17.5388 70.1228 17.4321 69.4033 17.4321H65.6678L65.7312 14.2396L70.032 14.1233C72.5857 14.1233 74.1669 14.7558 74.7758 16.0208C75.1315 16.756 75.3094 17.7759 75.3094 19.0805ZM68.6032 22.3901C68.4844 22.5315 68.3597 22.9902 68.3597 23.3143C68.3597 24.0259 68.7234 24.3817 69.4508 24.3817C69.8855 24.3817 70.5022 24.2038 71.3008 23.848V22.1112C71.3008 22.1112 69.0361 21.875 68.6032 22.3901Z"
+      fill="currentColor"
+    />
+    <path
+      d="M56.6308 27.3317L55.4162 15.1815L52.0028 27.3317H48.028L44.6928 15.1815L43.4348 27.3317L37.9399 27.2849L40.6207 9.35034H47.6212L50.0211 17.8845L52.4444 9.35034H59.281L62.0087 27.3317H56.6308Z"
+      fill="currentColor"
+    />
+    <path
+      d="M85.3943 26.9654L83.5118 23.1105L81.6291 26.9654H77.2017L80.831 20.5778L77.3644 14.6084H81.6525L83.5118 18.2543L85.313 14.6084H89.6009L86.1576 20.5778L89.7637 26.9654H85.3943Z"
+      fill="currentColor"
+    />
+    <path
+      d="M101.114 26.9656C101.029 26.8419 96.8966 20.1336 96.8966 20.1336L95.5396 22.2226V26.9656H90.9727V9.11621H95.5396V16.3526L99.7128 9.17639H104.477L99.514 17.1079L105.855 26.9656H101.114Z"
+      fill="currentColor"
+    />
+    <path
+      d="M121.036 22.145C121.036 24.745 119.74 27.1282 115.097 27.1282H107.032V9.02689L113.203 8.90869C113.203 8.90869 116.858 8.74751 118.706 10.153C120.068 11.1885 120.515 13.0021 120.384 14.5197C120.254 16.0373 119.553 17.0129 118.405 17.727C119.979 18.354 121.036 19.5451 121.036 22.145ZM114.228 16.3325C115.766 16.3325 116.62 15.5559 116.62 14.45C116.62 13.2735 115.833 12.5837 114.228 12.5837L111.576 12.5906V16.3325H114.228ZM114.365 23.5374C116.497 23.5374 117.022 22.393 117.022 21.6316C117.022 20.4308 116.17 19.563 114.752 19.563H111.576V23.5374H114.365Z"
+      fill="currentColor"
+    />
+    <path
+      d="M17.4213 26.7354H12.8296L11.1277 28.4372C11.028 28.5369 10.9601 28.6639 10.9326 28.8022C10.9051 28.9405 10.9193 29.0838 10.9732 29.2141C11.0272 29.3443 11.1185 29.4557 11.2358 29.534C11.353 29.6123 11.4908 29.6541 11.6318 29.6541H18.6192C18.7602 29.6541 18.898 29.6123 19.0153 29.534C19.1325 29.4557 19.2239 29.3443 19.2778 29.2141C19.3318 29.0838 19.3459 28.9405 19.3184 28.8022C19.2909 28.6639 19.223 28.5369 19.1233 28.4372L17.4213 26.7354Z"
+      fill="currentColor"
+    />
+    <path
+      d="M30.04 13.3823H29.1348V19.7499H30.04C30.1305 19.7499 30.2201 19.732 30.3037 19.6974C30.3873 19.6628 30.4633 19.612 30.5273 19.548C30.5913 19.484 30.642 19.4081 30.6767 19.3244C30.7113 19.2408 30.7291 19.1512 30.7291 19.0607V14.0715C30.7291 13.8887 30.6565 13.7134 30.5273 13.5842C30.398 13.4549 30.2227 13.3823 30.04 13.3823Z"
+      fill="currentColor"
+    />
+    <path
+      d="M1.92296 13.3823H1.01776C0.834985 13.3823 0.659698 13.4549 0.530458 13.5842C0.401219 13.7134 0.328613 13.8887 0.328613 14.0715V19.0607C0.328611 19.1512 0.346435 19.2408 0.381067 19.3244C0.415699 19.4081 0.466461 19.484 0.530455 19.548C0.594448 19.612 0.670419 19.6628 0.754031 19.6974C0.837643 19.732 0.927258 19.7499 1.01776 19.7499H1.92296V13.3823Z"
+      fill="currentColor"
+    />
+    <path
+      d="M19.0238 14.2251C18.682 14.2251 18.3541 14.3609 18.1124 14.6026C17.8707 14.8443 17.7349 15.1722 17.7349 15.514V16.4382C17.7349 16.7801 17.8707 17.108 18.1124 17.3497C18.3541 17.5914 18.682 17.7272 19.0239 17.7272C19.3657 17.7272 19.6936 17.5914 19.9353 17.3497C20.1771 17.108 20.3129 16.7801 20.3129 16.4382V15.5141C20.3129 15.3448 20.2796 15.1772 20.2148 15.0208C20.15 14.8644 20.055 14.7223 19.9353 14.6026C19.8156 14.4829 19.6735 14.388 19.5171 14.3232C19.3607 14.2584 19.1931 14.2251 19.0238 14.2251Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12.3012 14.2251C11.9593 14.2251 11.6315 14.3609 11.3897 14.6026C11.148 14.8443 11.0122 15.1722 11.0122 15.514V16.4382C11.0122 16.7801 11.148 17.108 11.3897 17.3497C11.6315 17.5914 11.9593 17.7272 12.3012 17.7272C12.6431 17.7272 12.9709 17.5914 13.2127 17.3497C13.4544 17.108 13.5902 16.7801 13.5902 16.4382V15.5141C13.5902 15.3448 13.5569 15.1772 13.4921 15.0208C13.4273 14.8644 13.3324 14.7223 13.2127 14.6026C13.093 14.4829 12.9509 14.388 12.7945 14.3232C12.6381 14.2584 12.4704 14.2251 12.3012 14.2251Z"
+      fill="currentColor"
+    />
+    <path
+      d="M23.3607 6.91333H7.69709C6.3139 6.91489 4.98782 7.46505 4.00976 8.44311C3.0317 9.42117 2.48154 10.7473 2.47998 12.1304V20.9612C2.48154 22.3444 3.03169 23.6705 4.00975 24.6486C4.98781 25.6266 6.3139 26.1768 7.69709 26.1784H23.3607C24.7439 26.1768 26.07 25.6267 27.0481 24.6486C28.0262 23.6705 28.5764 22.3444 28.5779 20.9612V12.1304C28.5763 10.7472 28.0262 9.42115 27.0481 8.44309C26.07 7.46503 24.7439 6.91487 23.3607 6.91333ZM23.7988 20.9085C23.7988 21.1577 23.6998 21.3968 23.5235 21.573C23.3473 21.7492 23.1083 21.8482 22.859 21.8482H15.2189C14.0629 21.8482 12.9263 22.1453 11.9181 22.711L9.355 24.1492V21.8483H8.19882C7.94958 21.8483 7.71055 21.7493 7.53432 21.573C7.35808 21.3968 7.25907 21.1578 7.25906 20.9085V11.547C7.25907 11.2978 7.35808 11.0588 7.53432 10.8825C7.71056 10.7063 7.94958 10.6073 8.19882 10.6073H22.859C23.1082 10.6073 23.3472 10.7063 23.5235 10.8825C23.6997 11.0588 23.7987 11.2978 23.7987 11.5471L23.7988 20.9085Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

ui/src/components/mk-logo/LogoIcon.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import { useStore } from '@/stores'
+
+defineOptions({ name: 'LogoIcon', inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    height?: number | string
+  }>(),
+  {
+    height: 36,
+  },
+)
+
+const attrs = useAttrs()
+const { theme } = useStore()
+</script>
+
+<template>
+  <img
+    v-if="theme.isDefaultTheme"
+    v-bind="attrs"
+    alt="MaxKB"
+    :height="height"
+    src="@/assets/mk-logo/logo.svg"
+    class="max-w-none"
+  />
+  <svg
+    v-else
+    v-bind="attrs"
+    aria-label="MaxKB"
+    :height="height"
+    class="max-w-none text-primary"
+    role="img"
+    viewBox="0 0 232.4409 232.4409"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M128.4532,177H98.7785L87.78,187.9985a4.6069,4.6069,0,0,0,3.2576,7.8644h45.1569a4.6069,4.6069,0,0,0,3.2575-7.8644Z"
+      fill="currentColor"
+    />
+    <path
+      d="M210.0008,90.7042h-5.85v41.1511h5.85a4.4537,4.4537,0,0,0,4.4537-4.4537V95.1579A4.4537,4.4537,0,0,0,210.0008,90.7042Z"
+      fill="currentColor"
+    />
+    <path
+      d="M28.29,90.7042H22.44a4.4538,4.4538,0,0,0-4.4538,4.4537v32.2437a4.4538,4.4538,0,0,0,4.4538,4.4537h5.85Z"
+      fill="currentColor"
+    />
+    <path
+      d="M138.8087,96.1512a8.33,8.33,0,0,0-8.33,8.33v5.9727a8.33,8.33,0,1,0,16.6607,0v-5.9727A8.33,8.33,0,0,0,138.8087,96.1512Z"
+      fill="currentColor"
+    />
+    <path
+      d="M95.3622,96.1512a8.33,8.33,0,0,0-8.33,8.33v5.9727a8.33,8.33,0,1,0,16.6607,0v-5.9727A8.33,8.33,0,0,0,95.3622,96.1512Z"
+      fill="currentColor"
+    />
+    <path
+      d="M166.8344,48.8968H65.6064A33.7544,33.7544,0,0,0,31.89,82.6131v57.07A33.7548,33.7548,0,0,0,65.6064,173.4h101.228a33.7549,33.7549,0,0,0,33.7168-33.7168v-57.07A33.7545,33.7545,0,0,0,166.8344,48.8968Zm2.831,90.4457a6.0733,6.0733,0,0,1-6.0732,6.0733H114.2168a43.5922,43.5922,0,0,0-21.3313,5.5757l-16.5647,9.2946v-14.87h-7.472a6.0733,6.0733,0,0,1-6.0733-6.0733v-60.5a6.0733,6.0733,0,0,1,6.0733-6.0733h94.7434a6.0733,6.0733,0,0,1,6.0732,6.0733Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

ui/src/constants/index.ts

@@ -3,3 +3,4 @@ export * from './auth'
 export * from './model'
 export * from './tool'
 export * from './folder'
+export * from './theme'

ui/src/constants/theme.ts

@@ -0,0 +1,38 @@
+import defaultThemeImage from '@/assets/login-theme/default.png'
+import greenThemeImage from '@/assets/login-theme/green.png'
+import orangeThemeImage from '@/assets/login-theme/orange.png'
+import purpleThemeImage from '@/assets/login-theme/purple.png'
+import redThemeImage from '@/assets/login-theme/red.png'
+
+export const DEFAULT_THEME_COLOR = '#3370ff'
+
+const THEME_IMAGE_MAP: Record<string, string> = {
+  [DEFAULT_THEME_COLOR]: defaultThemeImage,
+  '#00b69d': greenThemeImage,
+  '#7f3bf5': purpleThemeImage,
+  '#f01d94': redThemeImage,
+  '#ff6000': orangeThemeImage,
+}
+
+/** 根据主题色返回内置登录插图，自定义颜色使用默认插图。 */
+export function getThemeImg(themeColor?: string) {
+  return THEME_IMAGE_MAP[themeColor?.trim().toLowerCase() ?? ''] ?? defaultThemeImage
+}
+
+// 默认设置
+export const defaultThemeSetting = {
+  icon: '',
+  loginLogo: '',
+  loginImage: '',
+  title: 'MaxKB',
+  slogan: '强大易用的企业级智能体平台',
+}
+
+export const defaultPlatformSetting = {
+  showUserManual: true,
+  userManualUrl: 'https://maxkb.cn/docs/v2/',
+  showForum: true,
+  forumUrl: 'https://bbs.fit2cloud.com/c/mk/11',
+  showProject: true,
+  projectUrl: 'https://github.com/1Panel-dev/MaxKB',
+}

ui/src/layout/AppLayout.vue

@@ -11,7 +11,7 @@ const mode = computed<LayoutMode>(() => route.meta.scope ?? 'workspace')
 </script>
 
 <template>
-  <div class="mk-layout h-screen overflow-hidden bg-layout-gradient">
+  <div class="mk-layout h-screen overflow-hidden">
     <LayoutHeader :mode="mode"> </LayoutHeader>
     <div class="flex">
       <LayoutSidebar :mode="mode" />
@@ -26,6 +26,8 @@ const mode = computed<LayoutMode>(() => route.meta.scope ?? 'workspace')
 
 <style scoped lang="scss">
 .mk-layout {
+  background: rgb(var(--mk-primary-rgb) / 5%);
+
   &__main {
     box-shadow: 0px 0px 4px 0px rgb(var(--mk-N900-rgb) / 2%);
   }

ui/src/layout/LayoutHeader.vue

@@ -3,6 +3,7 @@ import { useRouter } from 'vue-router'
 
 import AvatarDropdown from './avatar-dropdown/index.vue'
 import HeaderWorkspaceDropdown from './header-workspace-dropdown/index.vue'
+import LogoFull from '@/components/mk-logo/LogoFull.vue'
 import { isWorkspace, isSystem } from '@/router/admin/utils'
 import type { LayoutMode } from './types'
 const router = useRouter()
@@ -26,7 +27,7 @@ function switchMode() {
 <template>
   <header class="flex-between h-header px-6">
     <div class="flex items-center">
-      <img src="@/assets/logo/MaxKB-logo.svg" class="h-9 max-w-none shrink-0" />
+      <LogoFull class="h-9 shrink-0" />
       <div class="flex items-center gap-5 ml-5">
         <el-divider direction="vertical" />
         <!-- 企业版: 工作空间下拉框 -->

ui/src/layout/sidebar/SystemSidebar.vue

@@ -199,7 +199,7 @@ const getSystemMenuIcon = (systemMenuItem: LayoutMenuItem) =>
 
 .el-popper.mk-system-sidebar-menu-popper {
   background-color: var(--mk-N200);
-  background-image: var(--mk-layout-gradient);
+  background-image: rgb(var(--mk-primary-rgb) / 5%);
   border-radius: var(--el-border-radius-base);
   .el-menu {
     padding: calc(var(--spacing) * 2);