witLogo 系统 Logo 组件

witLogo 是系统的 Logo 组件，用于在应用头部显示系统标题和医院 logo，支持多种布局样式，自动适应不同的主题配置。

用法实例

<template>
  <div class="app-header">
    <!-- 在应用头部使用 -->
    <witLogo />
  </div>
</template>

<script lang="ts" setup>
// 无需额外配置，组件自动从 store 获取配置
</script>

API

属性

属性名	类型	默认值	描述
无额外属性	-	-	组件无需外部配置属性，所有配置从 store 获取

插槽

插槽名	描述
无可用插槽	-

事件

事件名	描述	参数
无自定义事件	-	-

功能说明

1. 多布局支持

• 支持水平布局（horizontal）
• 支持垂直布局（vertical）
• 支持列布局（column）
• 支持综合布局（comprehensive）

2. 动态 Logo 显示

• 优先显示医院 logo（从 userStore.userInfo.user.hospitalInfo?.logo 获取）
• 如果没有医院 logo，则显示默认系统 logo
• logo 图片自动适应容器大小

3. 系统标题显示

• 显示系统标题（从 settingsStore.title 获取）
• 标题样式根据布局类型自动调整

4. 响应式设计

• 根据布局类型自动调整样式
• 在不同屏幕尺寸下保持良好的显示效果

5. 导航功能

• 整个 logo 区域作为首页的导航链接
• 点击后跳转到应用首页

使用提示

TIP

1. 配置来源：

   • 系统标题来自 settingsStore.title
   • 医院 logo 来自 userStore.userInfo.user.hospitalInfo?.logo
   • 布局类型来自 settingsStore.theme.layout

2. 布局样式：

   • 不同布局类型对应不同的 CSS 类名（wit-logo-horizontal、wit-logo-vertical 等）
   • 可通过自定义 CSS 覆盖默认样式

3. 自定义 logo：

   • 可通过修改医院信息中的 logo 地址来更换系统 logo
   • 支持 PNG、JPG 等常见图片格式

4. 样式变量：

   • 使用 CSS 变量定义颜色、尺寸等样式
   • 可通过修改 CSS 变量来自定义外观

5. 性能优化：

   • logo 图片使用 v-if 条件渲染，减少不必要的加载
   • 组件结构简洁，渲染性能优秀