mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2026-01-12 05:01:39 +08:00
704aacc38f
Co-authored-by: kiki1373639299<zkai0106@163.com> # message auto-generated for no-merge-commit merge: !11 merge dev into dev feat: 增强布局组件（同步GI-DEMO），支持更多布局选项并优化布局切换功能 Created-by: kiki1373639299 Commit-by: kiki1373639299 Merged-by: Charles_7c Description: <!-- 非常感谢您的 PR！在提交之前，请务必确保您 PR 的代码经过了完整测试，并且通过了代码规范检查。 --> <!-- 在 [] 中输入 x 来勾选) --> ## PR 类型 <!-- 您的 PR 引入了哪种类型的变更？ --> <!-- 只支持选择一种类型，如果有多种类型，可以在更新日志中增加 “类型” 列。 --> - [X] 新 feature - [ ] Bug 修复 - [ ] 功能增强 - [ ] 文档变更 - [ ] 代码样式变更 - [ ] 重构 - [ ] 性能改进 - [ ] 单元测试 - [ ] CI/CD - [ ] 其他 ## PR 目的 同步GI-DEMO系统布局，并自定义样式增强 <!-- 描述一下您的 PR 解决了什么问题。如果可以，请链接到相关 issues。 --> ## 解决方案 <!-- 详细描述您是如何解决的问题 --> ## PR 测试 <!-- 如果可以，请为您的 PR 添加或更新单元测试。 --> <!-- 请描述一下您是如何测试 PR 的。例如：创建/更新单元测试或添加相关的截图。 --> ## Changelog | 模块 | Changelog | Related issues | |-----|-----------| -------------- | | | | | <!-- 如果有多种类型的变更，可以在变更日志表中增加 “类型” 列，该列的值与上方 “PR 类型” 相同。 --> <!-- Related issues 格式为 Closes #<issue号>，或者 Fixes #<issue号>，或者 Resolves #<issue号>。 --> ## 其他信息 <!-- 请描述一下还有哪些注意事项。例如：如果引入了一个不向下兼容的变更，请描述其影响。 --> ## 提交前确认 - [X] PR 代码经过了完整测试，并且通过了代码规范检查 - [ ] 已经完整填写 Changelog，并链接到了相关 issues - [X] PR 代码将要提交到 dev 分支 See merge request: continew/continew-admin-ui!11
83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
<template>
|
|
<section class="system-logo" :class="{ collapsed: props.collapsed }" @click="toHome">
|
|
<img v-if="logo" class="logo" :src="logo" alt="logo" />
|
|
<img v-else class="logo" src="/logo.svg" alt="logo" />
|
|
<span v-if="!props.hideName" class="system-name gi_line_1">{{ title }}</span>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useAppStore } from '@/stores'
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
collapsed: false,
|
|
hideName: false,
|
|
|
|
})
|
|
const appStore = useAppStore()
|
|
const title = computed(() => appStore.getTitle())
|
|
const logo = computed(() => appStore.getLogo())
|
|
|
|
/** Props 类型定义 */
|
|
interface Props {
|
|
/** 是否折叠状态 */
|
|
collapsed?: boolean
|
|
/** 是否隐藏名称 */
|
|
hideName?: boolean
|
|
}
|
|
const router = useRouter()
|
|
// 跳转首页
|
|
const toHome = () => {
|
|
router.push('/')
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.system-logo {
|
|
height: 56px;
|
|
padding: 0 12px;
|
|
color: var(--color-text-1);
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
box-sizing: border-box;
|
|
|
|
&.collapsed {
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.system-name {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
transition: all 0.2s;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.system-name {
|
|
padding-left: 6px;
|
|
white-space: nowrap;
|
|
transition: color 0.3s;
|
|
line-height: 1.5;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
color: $color-theme !important;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
</style>
|