系统标识
SystemLogo 用于展示系统的品牌形象（图标 + 标题）。它通常出现在侧边栏顶部、登录页页眉或导航栏中。
该组件具有高度的灵活性，既可以展示默认的 TechUI 品牌标识，也可以通过配置轻松替换为您自己的业务 Logo 图片或图标。
默认标识
当未传入自定义图标参数时，组件默认渲染 TechUI Logo。
这是一个特殊的复合图标（TuiIconLogo），由 TuiIcons 库中的 四个独立矢量部分 组成。这种设计允许对 Logo 的每个部分进行独立的颜色控制，从而实现多色或单色的视觉效果。
组装原理： TechUI Logo 使用四个图标元素组装而成：
ti-techui-lt-part（左上）、ti-techui-rt-part（右上）、ti-techui-lb-part（左下）和ti-techui-rb-part（右下），所有部分均采用绝对定位。
基础用法
默认情况下，组件显示多色图标和默认标题。
vue
<template>
<div class="demo-box">
<TuiSystemLogo />
</div>
</template>布局方向
支持两种布局模式：水平 (h) 和 垂直 (v)。
- 水平 (h)：适用于侧边栏顶部或导航栏，图标在左，文字在右。
- 垂直 (v)：适用于登录页面或大屏展示，图标在上，文字在下。
vue
<template>
<div class="row">
<TuiSystemLogo direction="h" />
<TuiSystemLogo direction="v" />
</div>
</template>外观样式
组件将 图标外观 (iconAppearance) 与 文字外观 (textAppearance) 分开，允许您自由组合以适应深色/浅色背景或不同的主题风格。
可选值：
colorful: 原始多色（仅对默认 TechUI Logo 有效）。white/black: 纯白或纯黑。strongest/weakest: 跟随当前全局主题色的强/弱色调。custom: 使用 CSS 变量自定义颜色。
vue
<template>
<TuiSystemLogo
iconAppearance="colorful"
textAppearance="white"
/>
<TuiSystemLogo
iconAppearance="strongest"
textAppearance="fontBase"
/>
</template>尺寸调节
通过 logoSize 和 textSize 精确控制图标和文字的大小。
vue
<template>
<TuiSystemLogo
:logoSize="64"
:textSize="32"
direction="v"
/>
</template>自定义品牌
TuiSystemLogo 专为自定义而设计。您可以轻松地将默认的 TechUI 标识替换为您自己的业务品牌。
修改文本
使用 mainText 和 subText 修改主标题和副标题。
vue
<template>
<TuiSystemLogo
mainText="MyApp"
subText="Pro"
/>
</template>使用图片 Logo
通过 iconSrc 传入图片 URL。
vue
<template>
<TuiSystemLogo
iconSrc="/assets/my-logo.png"
mainText="Secure"
subText="Lite"
/>
</template>使用字体图标
通过 iconLogo 传入图标类名（例如 FontAwesome 或 TuiIcons 中的其他图标）。
vue
<template>
<TuiSystemLogo
iconLogo="tui-icon ti-shield-check"
mainText="Admin"
subText="System"
iconAppearance="strongest"
/>
</template>完全自定义 (插槽)
使用插槽实现 Emoji Logo 或其他复杂的 DOM 结构。
vue
<template>
<TuiSystemLogo mainText="Emoji" subText="Fun">
<template #icon>
<span style="font-size: 40px;">🚀</span>
</template>
</TuiSystemLogo>
</template>API 参考
属性 (Props)
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| direction | 布局方向，可选值：'h' (水平), 'v' (垂直) | String | 'h' |
| logoSize | 图标大小 (px) | Number | — |
| textSize | 文字大小 (px) | Number | — |
| logoPadding | 图标周围的内边距 (px) | Number | — |
| iconAppearance | 图标样式，可选值：'colorful', 'white', 'black', 'strongest', 'weakest', 'custom' | String | 'colorful' |
| textAppearance | 文字样式，可选值：'fontBase', 'white', 'black', 'strongest', 'weakest', 'custom' | String | 'fontBase' |
| mainText | 主标题文本。默认为 'TechUI' | String | — |
| subText | 副标题文本。默认为全局平台配置（如 'Prime'） | String | — |
| iconSrc | 自定义 Logo 图片 URL（优先级高于默认 Logo） | String | — |
| iconLogo | 自定义 Logo 图标类名（优先级高于 iconSrc） | String | — |
| collapse | 是否强制收起文字（常用于侧边栏收起状态） | Boolean | false |
插槽 (Slots)
| 插槽名称 | 描述 |
|---|---|
| icon | 自定义图标区域的内容 |
| text | 自定义文字区域的内容（会覆盖 mainText 和 subText） |