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 {

src/layouts/components/navbar/components/middle-side/index.vue

@@ -1,12 +1,14 @@
 <script lang="jsx">
-import { Sender } from 'ant-design-x-vue';
 import { Input } from 'ant-design-vue';
+import { handleUserHome } from '@/utils/user.ts';
 
 export default {
   setup(props, { emit, expose }) {
     const keyWord = ref('');
+
     const handleSearch = () => {
-      console.log('handleSearch', keyWord.value);
+      handleUserHome({ keyWord: keyWord.value });
+      keyWord.value = '';
     };
     return () => (
       <div class="middle-wrap h-100% flex-1 flex items-center justify-center px-24px">

src/layouts/components/navbar/index.vue

@@ -4,7 +4,7 @@
       <img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" />
     </div>
     <div class="flex-1">
-      <MiddleSide />
+      <MiddleSide v-if="!isHomeRoute" />
     </div>
     <RightSide :isAgentRoute="isAgentRoute" v-if="userStore.isLogin" />
   </div>
@@ -24,6 +24,10 @@ const userStore = useUserStore();
 const isAgentRoute = computed(() => {
   return route.meta?.isAgentRoute;
 });
+
+const isHomeRoute = computed(() => {
+  return route.name === 'Home';
+});
 </script>
 <style scoped lang="scss">
 .navbar-wrap {