first commit

src/layouts/admin/components/logo.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="layout-logo">
+        <img v-if="!config.layout.menuCollapse" class="logo-img" src="@/assets/vue.svg" alt="logo" />
+        <div
+            v-if="!config.layout.menuCollapse"
+            :style="{ color: config.getColorVal('menuActiveColor') }"
+            class="website-name"
+        >
+            灿能
+        </div>
+        <Icon
+            v-if="config.layout.layoutMode != 'Streamline'"
+            @click="onMenuCollapse"
+            :name="config.layout.menuCollapse ? 'fa fa-indent' : 'fa fa-dedent'"
+            :class="config.layout.menuCollapse ? 'unfold' : ''"
+            :color="config.getColorVal('menuActiveColor')"
+            size="18"
+            class="fold"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useConfig } from '@/stores/config'
+import { closeShade } from '@/utils/pageShade'
+import { Session } from '@/utils/storage'
+import { setNavTabsWidth } from '@/utils/layout'
+
+const config = useConfig()
+
+const onMenuCollapse = function () {
+    if (config.layout.shrink && !config.layout.menuCollapse) {
+        closeShade()
+    }
+
+    config.setLayout('menuCollapse', !config.layout.menuCollapse)
+
+    // 等待侧边栏动画结束后重新计算导航栏宽度
+    setTimeout(() => {
+        setNavTabsWidth()
+    }, 350)
+}
+</script>
+
+<style scoped lang="scss">
+.layout-logo {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 10px;
+    background: v-bind(
+        'config.layout.layoutMode != "Streamline" ?  config.getColorVal("menuTopBarBackground"):"transparent"'
+    );
+}
+.logo-img {
+    width: 28px;
+}
+.website-name {
+    display: block;
+    width: 180px;
+    padding-left: 4px;
+    font-size: var(--el-font-size-extra-large);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.fold {
+    margin-left: auto;
+}
+.unfold {
+    margin: 0 auto;
+}
+</style>