fix: 新增侧边栏和首页

src/views/project/index.vue

@@ -12,7 +12,9 @@
           :native-scrollbar="false"
         >
           <n-layout-content>
-            <router-view></router-view>
+            <TransitionMain>
+              <router-view />
+            </TransitionMain>
           </n-layout-content>
         </n-layout>
       </n-layout>
@@ -23,6 +25,7 @@
 <script setup lang="ts">
 import { Sider } from './layout/components/Sider'
 import { Header } from './layout/components/Header/index'
+import { TransitionMain } from '@/layout/components/TransitionMain/index'
 </script>
 
 <style lang="scss" scoped>

src/views/project/items/List/index.ts

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

src/views/project/items/List/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="go-items-list">
+    <n-grid
+      :x-gap="20"
+      :y-gap="20"
+      cols="2 s:2 m:3 l:4 xl:4 xxl:4"
+      responsive="screen"
+    >
+      <n-grid-item v-for="item in list" :key="item.id">
+        <n-card hoverable size="small">
+          <div class="list-content">
+            <n-space>
+              <n-button size="small">
+                <template #icon>
+                  <n-icon>
+                    <EllipsisHorizontalCircleSharpIcon />
+                  </n-icon>
+                </template>
+              </n-button>
+            </n-space>
+            <div class="list-content-top"></div>
+            <n-image
+              object-fit="cover"
+              width="100"
+              src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+              :alt="item.title"
+            />
+          </div>
+          <template #action>
+            <n-skeleton v-if="loading" round size="medium" />
+            <n-space v-else justify="space-between">
+              <n-text>
+                奔跑的模板
+              </n-text>
+              <!-- 工具 -->
+              <n-space>
+                <n-button size="small">
+                  <template #icon>
+                    <n-icon>
+                      <EllipsisHorizontalCircleSharpIcon />
+                    </n-icon>
+                  </template>
+                </n-button>
+                <n-button size="small">
+                  <template #icon>
+                    <n-icon>
+                      <CopyIcon />
+                    </n-icon>
+                  </template>
+                </n-button>
+              </n-space>
+              <!-- end -->
+            </n-space>
+          </template>
+        </n-card>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import {
+  EllipsisHorizontalSharp as EllipsisHorizontalCircleSharpIcon,
+  CopyOutline as CopyIcon
+} from '@vicons/ionicons5'
+const loading = ref<boolean>(true)
+
+setTimeout(() => {
+  loading.value = false
+}, 200)
+
+const list = reactive([
+  {
+    id: 1,
+    title: '物料1'
+  },
+  {
+    id: 2,
+    title: '物料1'
+  },
+  {
+    id: 3,
+    title: '物料1'
+  },
+  {
+    id: 4,
+    title: '物料1'
+  },
+  {
+    id: 5,
+    title: '物料1'
+  }
+])
+</script>
+
+<style lang="scss" scoped>
+$contentHeight: 250px;
+@include go('items-list') {
+  .list-content {
+    position: relative;
+    height: $contentHeight;
+  }
+}
+</style>

src/views/project/items/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="go-project-items">
+    <List />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { List } from './List'
+</script>
+
+<style lang="scss" scoped>
+@include go(project-items) {
+  padding: 30px 20px;
+}
+</style>

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)
     }
   ])

src/views/project/mtTemplate/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="go-project-my-template">
+    <h1>
+      我的模板
+    </h1>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@include go('project-my-template') {
+}
+</style>

src/views/project/templateMarket/components/TopCarousel/index.ts

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

src/views/project/templateMarket/components/TopCarousel/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="go-template-market-top-carousel">
+    <h1>轮播图</h1>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@include go('project-template-market-top-carousel') {
+}
+</style>

src/views/project/templateMarket/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="go-project-template-market">
+    <header class="top-box">
+      <div class="top-box-bg"></div>
+      <div class="top-content">
+        <n-carousel class="top-content-carousel" show-arrow>
+          <n-card title="模板1" hoverable>
+            <img
+              class="carousel-img"
+              src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
+            />
+          </n-card>
+          <n-card title="模板2" hoverable>
+            <img
+              class="carousel-img"
+              src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
+            />
+          </n-card>
+          <n-card title="模板2" hoverable>
+            <img
+              class="carousel-img"
+              src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
+            />
+          </n-card>
+          <n-card title="模板2" hoverable>
+            <img
+              class="carousel-img"
+              src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
+            />
+          </n-card>
+        </n-carousel>
+      </div>
+      <n-divider />
+    </header>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@include go('project-template-market') {
+  .top-box {
+    background: url('@/assets/images/project/project-top-bg.png');
+    background-position: top -185px left -1560px;
+    &-bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      @include background-image('items-top-bg');
+    }
+    .top-content {
+      display: flex;
+      justify-content: center;
+      position: relative;
+      padding-top: 30px;
+      &-carousel {
+        width: 70%;
+      }
+    }
+  }
+}
+</style>