系统配置

系统主题包括菜单样式、顶栏、设置中心、系统主色等，你可以在这里修改他们快速配置想要的主题。

系统 Logo 配置

系统 Logo 采用图片形式展示，如需更换 Logo，仅需修改图片资源路径，无需改动组件逻辑。

配置文件：src/components/core/base/ArtLogo.vue

<template>
  <div class="art-logo">
    <img :style="logoStyle" src="@imgs/common/logo.png" alt="logo" />
  </div>
</template>

系统名称配置

系统名称统一通过配置文件管理，如需更改，只需修改 systemInfo.name 属性即可实现全局替换。

配置文件：src/config/index.ts

const appConfig: SystemConfig = {
  systemInfo: {
    name: "Art Design Pro", // 系统名称
  },
};

全局配置

配置文件路径：src/config/setting.ts

const appConfig: SystemConfig = {
  // 系统信息
  systemInfo: {
    name: "Art Design Pro", // 系统名称
  },
  // Element Plus 主题
  elementPlusTheme: {
    primary: "#5D87FF",
  },
  // 系统主题
  systemThemeStyles: {
    [SystemThemeEnum.LIGHT]: { className: "" },
    [SystemThemeEnum.DARK]: { className: SystemThemeEnum.DARK },
  },
  // 系统主题列表
  settingThemeList: [
    {
      name: "Light",
      theme: SystemThemeEnum.LIGHT,
      color: ["#fff", "#fff"],
      leftLineColor: "#EDEEF0",
      rightLineColor: "#EDEEF0",
      img: configImages.themeStyles.light,
    },
    {
      name: "Dark",
      theme: SystemThemeEnum.DARK,
      color: ["#22252A"],
      leftLineColor: "#3F4257",
      rightLineColor: "#3F4257",
      img: configImages.themeStyles.dark,
    },
    {
      name: "System",
      theme: SystemThemeEnum.AUTO,
      color: ["#fff", "#22252A"],
      leftLineColor: "#EDEEF0",
      rightLineColor: "#3F4257",
      img: configImages.themeStyles.system,
    },
  ],
  // 菜单布局列表
  menuLayoutList: [
    {
      name: "Left",
      value: MenuTypeEnum.LEFT,
      img: configImages.menuLayouts.vertical,
    },
    {
      name: "Top",
      value: MenuTypeEnum.TOP,
      img: configImages.menuLayouts.horizontal,
    },
    {
      name: "Mixed",
      value: MenuTypeEnum.TOP_LEFT,
      img: configImages.menuLayouts.mixed,
    },
    {
      name: "Dual Column",
      value: MenuTypeEnum.DUAL_MENU,
      img: configImages.menuLayouts.dualColumn,
    },
  ],
  // 菜单主题列表
  themeList: [
    {
      theme: MenuThemeEnum.DESIGN,
      background: "#FFFFFF",
      systemNameColor: "var(--art-text-gray-800)",
      iconColor: "#6B6B6B",
      textColor: "#29343D",
      textActiveColor: "#3F8CFF",
      iconActiveColor: "#333333",
      tabBarBackground: "#FAFBFC",
      systemBackground: "#FAFBFC",
      leftLineColor: "#EDEEF0",
      rightLineColor: "#EDEEF0",
      img: configImages.menuStyles.design,
    },
    {
      theme: MenuThemeEnum.DARK,
      background: "#191A23",
      systemNameColor: "#BABBBD",
      iconColor: "#BABBBD",
      textColor: "#BABBBD",
      textActiveColor: "#FFFFFF",
      iconActiveColor: "#FFFFFF",
      tabBarBackground: "#FFFFFF",
      systemBackground: "#F8F8F8",
      leftLineColor: "#3F4257",
      rightLineColor: "#EDEEF0",
      img: configImages.menuStyles.dark,
    },
    {
      theme: MenuThemeEnum.LIGHT,
      background: "#ffffff",
      systemNameColor: "#68758E",
      iconColor: "#6B6B6B",
      textColor: "#29343D",
      textActiveColor: "#3F8CFF",
      iconActiveColor: "#333333",
      tabBarBackground: "#FFFFFF",
      systemBackground: "#F8F8F8",
      leftLineColor: "#EDEEF0",
      rightLineColor: "#EDEEF0",
      img: configImages.menuStyles.light,
    },
  ],
  // 暗黑主题模式左侧菜单样式
  darkMenuStyles: [
    {
      theme: MenuThemeEnum.DARK,
      background: "#161618",
      systemNameColor: "#DDDDDD",
      iconColor: "#BABBBD",
      textColor: "rgba(#FFFFFF, 0.7)",
      textActiveColor: "",
      iconActiveColor: "#FFFFFF",
      tabBarBackground: "#FFFFFF",
      systemBackground: "#F8F8F8",
      leftLineColor: "#3F4257",
      rightLineColor: "#EDEEF0",
    },
  ],
  // 系统主色
  systemMainColor: [
    "#5D87FF",
    "#B48DF3",
    "#1D84FF",
    "#60C041",
    "#38C0FC",
    "#F9901F",
    "#FF80C8",
  ] as const,
  // 系统其他项默认配置
  systemSetting: {
    defaultMenuWidth: 240, // 菜单宽度
    defaultCustomRadius: "0.75", // 自定义圆角
    defaultTabStyle: "tab-default", // 标签样式
  },
};