wip(Layout): Layout developing

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>