fix: layout样式以及提取配置项

config/defaultSetting.ts

@@ -4,9 +4,14 @@
  */
 
 export default {
-  docTitle: 'jjl',
-  docLogo: '',
-  title: '',
-  logo: '',
-  logout: '' // 登出及其403的地址
+  appName: '蛟龙云',
+  documentIco: '', // 文档图标
+  logoExpand: require('@/static/logo-big.png'),
+  logoContract: require('@/static/logo.png'),
+
+  // docTitle: 'jjl',
+  // docLogo: '',
+  // title: '',
+  // logo: '',
+  logout: ''
 }

src/layout/components/Sidebar/index.vue

@@ -37,16 +37,16 @@
         </a-menu>
     </a-layout-sider>
   </a-drawer>
-  <!--     v-model:collapsed="collapsed" -->
-  <!--  collapsible -->
   <a-layout-sider
     v-if="!isMobile"
     :style="{backgroundColor: bgColor, overflow: 'hidden', overflowY: 'scroll', boxShadow: `0 1px 4px rgba(0,21,41,.12)`, paddingTop: '6px'}"
     breakpoint="lg"
+    collapsible
+    v-model:collapsed="collapsed"
   >
-    <!-- <div class="logo" >
+    <div class="logo" >
       <img :src="logoPng" alt="">
-    </div> -->
+    </div>
     <a-menu
       v-model:selectedKeys="selectedKeys"
       :openKeys="openKeys"
@@ -73,8 +73,7 @@ import { useDesignStore } from '@/store'
 import { useDeviceType } from '@/hooks'
 import { RightOutlined } from '@ant-design/icons-vue'
 import { routes } from '@/router/index'
-
-const logoPng = require('@/assets/logo.png')
+import AppConfig from 'AppConfig'
 
 const designStore = useDesignStore()
 
@@ -88,6 +87,8 @@ const router = useRouter()
 
 const collapsed = ref<boolean>(true)
 
+const logoPng = computed(() => collapsed.value ? AppConfig.logoContract : AppConfig.logoExpand)
+
 const sidebarRoute = ref<any>()
 
 const selectedKeys = ref<string[]>()
@@ -123,16 +124,16 @@ const openDrawer = () => drawerVisible.value = true
 
 .logo {
   width: 100%;
-  height: 64px;
-  margin: 20px 0px;
+  height: 53px;
+  margin: 0px 0px;
   margin-top: 0px;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: transparent;
   img {
-    width: 150px;
-    height: 50px;
+    width: 60%;
+    height: 70%;
   }
 }
 

src/layout/layout.vue

@@ -1,14 +1,17 @@
 <template>
     <a-layout class="a-layout" >
-      <Navbar />
       <a-layout >
+
         <SiderBar />
-        <div class="content" id="content"  >
-          <RouterTravel />
-          <div class="router-view" >
-            <RouterView :key="useRouterTravel.keyCount" ></RouterView>
+        <span>
+          <Navbar />
+          <div class="content" id="content"  >
+            <RouterTravel />
+            <div class="router-view" >
+              <RouterView :key="useRouterTravel.keyCount" ></RouterView>
+            </div>
           </div>
-        </div>
+        </span>
       </a-layout>
     </a-layout>
 </template>
@@ -38,8 +41,6 @@ onMounted(() => {
     width: 100%;
     height: 100%;
     border-top-left-radius: 24px;
-    // overflow: hidden;
-    // overflow-y: scroll;
     position: relative;
     .router-view {
       width: 100%;

src/layout/navbar.vue

@@ -4,9 +4,6 @@
         <a-col :span="6" >
           <search />
         </a-col>
-        <a-col :span="6" class="logo" >
-          <img :src="logoPng" alt="">
-        </a-col>
         <a-col :span="6" class="df-center">
           <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
         </a-col>
@@ -16,16 +13,11 @@
       </a-row>
   </a-layout-header>
   <a-layout-header class="header-pc" v-else :style="{backgroundColor: headerBgColor, height: '54px'}">
-      <a-row style="width: 100%;height: 54px;" justify="center" >
-        <a-col :span="2" >
-          <div class="logo" style="height: 54px;" >
-            <img :src="logoPng" alt="">
-          </div>
-        </a-col>
-        <a-col :span="13" style="height: 54px;" >
+      <a-row style="width: 100%;height: 54px;" justify="start" >
+        <a-col :span="15" style="height: 54px;" >
         <a-menu
           mode="horizontal"
-          :style="{ lineHeight: '54px', border: 'none' }"
+          :style="{ lineHeight: '54px', border: 'none' , marginLeft: '-20px'}"
           :selectedKeys="selectedKeys"
         >
           <a-menu-item
@@ -74,8 +66,6 @@ import search from './components/search/index.vue'
 import { DesktopOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 
-const logoPng = require('@/assets/logo/logo-blue.png')
-
 const route = useRoute()
 
 const router = useRouter()
@@ -95,15 +85,7 @@ const isMobile = useDeviceType()
 const changeTheme = () => designStore.changeModeltheme()
 
 const changeRouter = (route: ROUTER.RoutesProps) => {
-  // if (route.link) {
-  //   window.open(route.path)
-  // } else {
-  //   selectedKeys.value = [route.path]
-  //   router.push(route.path)
-  // }
   selectedKeys.value = [route.path]
-  console.log('route:', route, selectedKeys)
-
   appRouter.changeNavbarRoute(route)
 }
 
@@ -122,6 +104,7 @@ const addDeskToApp = () => {
     message.error('浏览器暂不支持此操作')
   }
 }
+
 </script>
 
 <style lang="less" scoped >
@@ -135,9 +118,10 @@ const addDeskToApp = () => {
   position: relative;
   height: 54px;
   z-index: 20;
-  box-shadow: 0 1px 4px rgba(0,21,41,.12);
+  // box-shadow: 0 1px 4px rgba(0,21,41,.12);
+
   overflow: hidden;
-  padding-left: 20px;
+  padding: 0;
 }
 
 .df-center {
@@ -146,14 +130,4 @@ const addDeskToApp = () => {
   align-items: center;
 }
 
-.logo {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  img {
-    width: 115px;
-    height: 50px;
-    display: block;
-  }
-}
 </style>

src/layout/routerTravel.vue

@@ -100,7 +100,7 @@ const horizontalScroll = (event) => {
   overflow: hidden;
   overflow-x: scroll;
   border:  1px solid rgba(5, 5, 5, 0.06);
-  margin-left: -1px;
+  border-left: none;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;

tsconfig.json

@@ -21,7 +21,8 @@
       "@/*": [
         "src/*"
       ],
-      "ThingsUi/*": [""]
+      "ThingsUi/*": [""],
+      "AppConfig": ["./config/defaultSetting"]
     },
     "lib": [
       "esnext",

vue.config.js

@@ -19,7 +19,9 @@ module.exports = defineConfig({
     }
   },
   chainWebpack: config => {
-    config.resolve.alias.set('ThingsUi', resolve(__dirname, '/'))
+    config.resolve.alias
+      .set('ThingsUi', resolve(__dirname, '/'))
+      .set('AppConfig', resolve(__dirname, '/config/defaultSetting'))
   },
   configureWebpack: {
     plugins: [