fix: 新增侧边栏和首页

src/views/project/layout/components/AsideFooter/index.vue

@@ -1,8 +1,24 @@
 <template>
   <div class="go-aside-footer">
     <n-divider class="go-mt-0" />
-    <n-space justify="space-around" :wrap="false">
-      <n-button secondary @click="handleDoc">
+    <n-space justify="space-around">
+      
+      <n-tooltip v-if="collapsed" placement="right" trigger="hover">
+        <template #trigger>
+          <n-button secondary @click="handleDoc">
+            <template #icon>
+              <n-icon size="18">
+                <HelpOutlineIcon />
+              </n-icon>
+            </template>
+          </n-button>
+        </template>
+        <n-text>
+          帮助中心
+        </n-text>
+      </n-tooltip>
+      
+      <n-button v-else secondary @click="handleDoc">
         <template #icon>
           <n-icon size="18">
             <HelpOutlineIcon />
@@ -10,13 +26,29 @@
         </template>
         <n-text>帮助中心</n-text>
       </n-button>
-      <n-button secondary @click="handleCode">
+
+      <n-tooltip v-if="collapsed" placement="right" trigger="hover">
+        <template #trigger>
+          <n-button secondary @click="handleDoc">
+            <template #icon>
+              <n-icon size="18">
+                <CodeSlashIcon />
+              </n-icon>
+            </template>
+          </n-button>
+        </template>
+        <n-text>
+          仓库地址
+        </n-text>
+      </n-tooltip>
+
+      <n-button v-else secondary @click="handleCode">
         <template #icon>
           <n-icon size="18">
             <CodeSlashIcon />
           </n-icon>
         </template>
-        <n-text>仓库地址</n-text>
+        <n-text v-show="!collapsed">仓库地址</n-text>
       </n-button>
     </n-space>
   </div>
@@ -29,6 +61,10 @@ import {
   CodeSlash as CodeSlashIcon
 } from '@vicons/ionicons5'
 
+const props = defineProps({
+  collapsed: Boolean
+})
+
 const handleDoc = () => {
   openDoc()
 }

src/views/project/layout/components/Create/index.vue

@@ -1,20 +1,27 @@
 <template>
-  <n-button v-if="collapsed" ghost type="primary" size="small">
-    <template #icon>
-      <n-icon>
-        <DuplicateIcon />
-      </n-icon>
+  <n-tooltip v-if="collapsed" placement="right" trigger="hover">
+    <template #trigger>
+      <n-button ghost type="primary" size="small">
+        <template #icon>
+          <n-icon>
+            <DuplicateIcon />
+          </n-icon>
+        </template>
+      </n-button>
     </template>
-  </n-button>
+    <n-text>
+      新建
+    </n-text>
+  </n-tooltip>
   <n-button v-else ghost type="primary" size="large">
     <template #icon>
       <n-icon>
         <DuplicateIcon />
       </n-icon>
     </template>
-    <span>
-      新建项目
-    </span>
+    <n-text>
+      新建
+    </n-text>
   </n-button>
 </template>
 <script setup lang="ts">

src/views/project/layout/components/Sider/index.vue

@@ -2,8 +2,8 @@
   <n-layout-sider
     class="go-project-layout-sider"
     bordered
-    inverted
     collapse-mode="width"
+    show-trigger="bar"
     :collapsed="collapsed"
     :native-scrollbar="false"
     :collapsed-width="asideCollapsedWidth"
@@ -21,32 +21,46 @@
           :options="menuOptions"
           :collapsed-width="asideCollapsedWidth"
           :collapsed-icon-size="22"
+          :default-expanded-keys="defaultExpandedKeys"
           @update:value="handleUpdateValue"
         />
       </aside>
       <!-- 底部提示 -->
       <div class="sider-bottom">
-        <AsideFooter />
+        <AsideFooter :collapsed="collapsed" />
       </div>
     </div>
   </n-layout-sider>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { Create } from '../Create/index'
 import { AsideFooter } from '../AsideFooter/index'
 import { asideWidth, asideCollapsedWidth } from '@/settings/designSetting'
-import { menuOptionsInit } from './menu'
+import { menuOptionsInit, expandedKeys } from './menu'
 import { useRoute } from 'vue-router'
 
-const collapsed = ref(false)
+const collapsed = ref<boolean>(false)
 
 const route = useRoute()
 const routeRame = computed(() => route.name)
 const menuValue = ref(routeRame)
 
 const menuOptions = menuOptionsInit()
+
+const defaultExpandedKeys = expandedKeys()
+
+const watchWidth = () => {
+  const Width = document.body.clientWidth
+  if (Width <= 950) {
+    collapsed.value = true
+  } else collapsed.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('resize', watchWidth)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -71,8 +85,6 @@ $siderHeight: 100vh;
   }
   &-layout-sider {
     height: $siderHeight;
-    @include filter-bg-color('aside-bg');
-    @include filter-border-color('aside-color');
   }
   .content-top {
     top: $--header-height;

src/views/project/layout/components/Sider/menu.ts

@@ -3,12 +3,19 @@ import { renderIcon } from '@/utils'
 import { RouterLink } from 'vue-router'
 import { PageEnum } from '@/enums/pageEnum'
 import { MenuOption, MenuGroupOption } from 'naive-ui'
-import { FolderOpen as FolderOpenIcon, LogoAppleAppstore as LogoAppleAppstoreIcon, } from '@vicons/ionicons5'
+import {
+  Grid as GridIcon,
+  LogoAppleAppstore as LogoAppleAppstoreIcon,
+  TvOutline as DesktopIcon,
+  LaptopOutline as LaptopOutlineIcon,
+} from '@vicons/ionicons5'
 
 export const renderMenuLabel = (option: MenuOption | MenuGroupOption) => {
   return option.label
 }
 
+export const expandedKeys = () => ['all-project']
+
 export const menuOptionsInit = () => {
   return reactive([
     {
@@ -16,28 +23,50 @@ export const menuOptionsInit = () => {
       type: 'divider'
     },
     {
-      type: 'group',
-      label: '我的',
-      key: 'people',
+      label: '项目',
+      key: 'all-project',
+      icon: renderIcon(GridIcon),
       children: [
         {
-          label: () =>
-            h(
-              RouterLink,
-              {
-                to: {
-                  name: PageEnum.BASE_HOME_NAME
-                }
-              },
-              { default: () => '全部项目' }
-            ),
-          key: PageEnum.BASE_HOME_NAME,
-          icon: renderIcon(FolderOpenIcon)
+          type: 'group',
+          label: '我的',
+          key: 'my-project',
+          children: [
+            {
+              label: () =>
+                h(
+                  RouterLink,
+                  {
+                    to: {
+                      name: PageEnum.BASE_HOME_ITEMS_NAME
+                    }
+                  },
+                  { default: () => '全部项目' }
+                ),
+              key: PageEnum.BASE_HOME_ITEMS_NAME,
+              icon: renderIcon(DesktopIcon)
+            },
+            {
+              label: () =>
+                h(
+                  RouterLink,
+                  {
+                    to: {
+                      name: PageEnum.BASE_HOME_TEMPLATE_NAME
+                    }
+                  },
+                  { default: () => '我的物料' }
+                ),
+              key: PageEnum.BASE_HOME_TEMPLATE_NAME,
+              icon: renderIcon(LaptopOutlineIcon)
+            }
+          ]
         }
       ]
     },
+
     {
-      key: 'divider-1',
+      key: 'divider-2',
       type: 'divider'
     },
     {
@@ -46,12 +75,12 @@ export const menuOptionsInit = () => {
           RouterLink,
           {
             to: {
-              name: PageEnum.BASE_HOME_NAME
+              name: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME
             }
           },
-          { default: () => '模板市场' }
+          { default: () => '物料市场' }
         ),
-      key: 'store',
+      key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
       icon: renderIcon(LogoAppleAppstoreIcon)
     }
   ])