feat: Conversations封装、首页开发

src/layouts/Basic.vue

@@ -27,13 +27,16 @@ const showSider = computed(() => {
   return !route.meta?.hideSidebar;
 });
 
-const isHomeRoute = computed(() => {
-  return route.name === 'Home';
+const layoutPageClass = computed(() => {
+  if (!showSider.value) {
+    return 'pb-8px pr-8px';
+  }
+  return 'pb-24px pr-24px';
 });
 
-const layoutPageClass = computed(() => {
-  return isHomeRoute.value ? 'pb-8px pr-8px' : 'pb-24px pr-24px'
-})
+const siderWidth = computed(() => {
+  return showSider.value ? sidebarStore.sidebarWidth : 0;
+});
 
 const collapsed = computed(() => {
   return sidebarStore.menuCollapse;
@@ -53,7 +56,6 @@ const checkHasInviteCode = () => {
     joinModalRef.value?.getEnterprise?.();
   }
 };
-
 </script>
 
 <template>
@@ -66,7 +68,7 @@ const checkHasInviteCode = () => {
       <Layout.Sider
         v-if="showSider"
         v-model="collapsed"
-        :width="sidebarStore.sidebarWidth"
+        :width="siderWidth"
         collapsible
         trigger
         @collapse="setCollapsed"
@@ -74,16 +76,16 @@ const checkHasInviteCode = () => {
       >
         <SiderBar />
       </Layout.Sider>
-      <Layout.Content
+      <Layout
         class="layout-content"
         :style="{
-          paddingLeft: sidebarStore.sidebarWidth + 'px',
+          paddingLeft: `${siderWidth}px`,
         }"
       >
-        <div :class="layoutPageClass">
+        <Layout.Content :class="layoutPageClass">
           <layout-page />
-        </div>
-      </Layout.Content>
+        </Layout.Content>
+      </Layout>
     </Layout>
   </Layout>
 </template>
@@ -102,7 +104,7 @@ const checkHasInviteCode = () => {
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 9999;
+    z-index: 999;
     width: 100%;
   }
   .layout-content-wrap {
@@ -118,7 +120,7 @@ const checkHasInviteCode = () => {
       position: fixed;
       top: 0;
       left: 0;
-      z-index: 9999;
+      z-index: 999;
       height: 100%;
       transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
       .ant-layout-sider-trigger {