wip(Layout): Layout developing

src/components/Menu/src/Menu.vue

@@ -8,8 +8,6 @@ import type { LayoutType } from '@/config/app'
 import { useRenderMenuItem } from './components/useRenderMenuItem'
 import { useRouter } from 'vue-router'
 import { isUrl } from '@/utils/is'
-import { lighten } from '@/utils/color'
-console.log(lighten('#001529', 6))
 
 export default defineComponent({
   name: 'Menu',
@@ -94,8 +92,6 @@ export default defineComponent({
 <style lang="less" scoped>
 @prefix-cls: ~'@{namespace}-menu';
 
-@menuBgColor: var(--left-menu-bg-color);
-
 .@{prefix-cls} {
   :deep(.el-menu) {
     border-right: none;

src/components/TagsView/index.ts

@@ -0,0 +1,3 @@
+import TagsView from './src/TagsView.vue'
+
+export { TagsView }

src/components/TagsView/src/TagsView.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>tagsView</div>
+</template>

src/layout/Layout.vue

@@ -4,6 +4,7 @@ import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useAppStore } from '@/store/modules/app'
 import { Menu } from '@/components/Menu'
 import { useDesign } from '@/hooks/web/useDesign'
+// import { TagsView } from '@/components/TagsView'
 
 const tagsViewStore = useTagsViewStore()
 
@@ -12,7 +13,7 @@ const getCaches = computed((): string[] => {
 })
 
 const appStore = useAppStore()
-console.log(appStore)
+
 const classSuffix = computed(() => appStore.getLayout)
 
 const { getPrefixCls } = useDesign()
@@ -26,18 +27,59 @@ export default defineComponent({
       <section
         class={[perFixCls, `${perFixCls}__${classSuffix.value}`, 'w-[100%] h-[100%] relative']}
       >
-        <Menu></Menu>
-        <router-view class="absolute top-0 right-0 ">
-          {{
-            default: ({ Component, route }) => (
-              <KeepAlive include={getCaches.value}>
-                <Component is={Component} key={route.fullPath}></Component>
-              </KeepAlive>
-            )
-          }}
-        </router-view>
+        <Menu class="absolute top-0 left-0"></Menu>
+        <div
+          class={[
+            `${perFixCls}-right`,
+            'absolute top-0 h-[100%]',
+            appStore.getCollapse
+              ? 'w-[calc(100%-var(--left-menu-min-width))]'
+              : 'w-[calc(100%-var(--left-menu-max-width))]',
+            appStore.getCollapse
+              ? 'left-[var(--left-menu-min-width)]'
+              : 'left-[var(--left-menu-max-width)]'
+          ]}
+        >
+          <div
+            class={[
+              `${perFixCls}-right__tool`,
+              'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center'
+            ]}
+          >
+            ssss
+          </div>
+          <router-view>
+            {{
+              default: ({ Component, route }) => (
+                <KeepAlive include={getCaches.value}>
+                  <Component is={Component} key={route.fullPath}></Component>
+                </KeepAlive>
+              )
+            }}
+          </router-view>
+        </div>
       </section>
     )
   }
 })
 </script>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-app';
+
+.@{prefix-cls} {
+  &-right {
+    &__tool {
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        border-top: 1px solid var(--top-tool-border-color);
+        content: '';
+      }
+    }
+  }
+}
+</style>

src/styles/var.css

@@ -14,4 +14,12 @@
   --left-menu-text-color: #bfcbd9;
 
   --left-menu-text-active-color: #fff;
+
+  --top-tool-height: 40px;
+
+  --top-tool-p-x: 20px;
+
+  --top-tool-border-color: #eee;
+
+  --tags-view-height: 40px;
 }