品牌配置

类型定义

interface BrandConfig {
  /**
   * 应用名称（可以是 i18n key 或纯文本）
   */
  name: string;

  /**
   * Logo 组件
   */
  logo?: ComponentType<{ className?: string }>;

  /**
   * 版本号
   */
  version?: string;
}

基本配置

brand: {
  name: 'My App',
  version: 'v1.0.0',
}

使用 i18n key

如果启用了国际化，可以使用 i18n key 作为应用名称：

brand: {
  name: 'app.name',  // i18n key
  version: `v${__APP_VERSION__}`,
},

i18n: {
  resources: {
    en: {
      app: { name: 'My App' },
    },
    zh: {
      app: { name: '我的应用' },
    },
  },
},

应用名称会根据当前语言自动切换。

动态版本号

使用 Vite 定义的 __APP_VERSION__ 变量自动读取 package.json 中的版本号：

brand: {
  name: 'My App',
  version: `v${__APP_VERSION__}`,
}

vite.config.ts 中的配置：

import { readFileSync } from 'fs';
import { resolve } from 'path';

const pkg = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf-8'));

export default defineConfig({
  define: {
    '__APP_VERSION__': JSON.stringify(pkg.version),
  },
  // ...
});

自定义 Logo

创建一个 Logo 组件并传入配置：

// src/components/Logo.tsx
export function MyLogo({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
      {/* SVG 路径 */}
    </svg>
  );
}

// src/config.ts
import { MyLogo } from './components/Logo';

brand: {
  name: 'My App',
  logo: MyLogo,
  version: `v${__APP_VERSION__}`,
}

Logo 组件接收 className prop，用于控制大小和颜色。

显示位置

品牌信息在以下位置显示：

位置	显示内容
标题栏	Logo + 应用名称
设置页 > 关于	应用名称 + 版本号

完整示例

import { MyLogo } from './components/Logo';

export const config = {
  brand: {
    name: 'app.name',
    logo: MyLogo,
    version: `v${__APP_VERSION__}`,
  },

  i18n: {
    defaultLanguage: 'zh',
    supportedLanguages: ['zh', 'en'],
    resources: {
      en: {
        app: {
          name: 'My Desktop App',
        },
      },
      zh: {
        app: {
          name: '我的桌面应用',
        },
      },
    },
  },
};

类型定义

基本配置

使用 i18n key

动态版本号

自定义 Logo

显示位置

完整示例

目录