feat: 首页架构

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

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

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

@@ -0,0 +1,44 @@
+<template>
+  <div class="go-aside-footer">
+    <n-divider class="go-mt-0" />
+    <n-space justify="space-around" :wrap="false">
+      <n-button secondary @click="handleDoc">
+        <template #icon>
+          <n-icon size="18">
+            <HelpOutlineIcon />
+          </n-icon>
+        </template>
+        <n-text>帮助中心</n-text>
+      </n-button>
+      <n-button secondary @click="handleCode">
+        <template #icon>
+          <n-icon size="18">
+            <CodeSlashIcon />
+          </n-icon>
+        </template>
+        <n-text>仓库地址</n-text>
+      </n-button>
+    </n-space>
+  </div>
+</template>
+<script setup lang="ts">
+import { openDoc, openGiteeSourceCode } from '@/utils/page'
+
+import {
+  HelpCircleOutline as HelpOutlineIcon,
+  CodeSlash as CodeSlashIcon
+} from '@vicons/ionicons5'
+
+const handleDoc = () => {
+  openDoc()
+}
+const handleCode = () => {
+  openGiteeSourceCode()
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('aside-footer') {
+  padding-bottom: 20px;
+}
+</style>

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

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

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

@@ -0,0 +1,25 @@
+<template>
+  <n-button v-if="collapsed" ghost type="primary" size="small">
+    <template #icon>
+      <n-icon>
+        <DuplicateIcon />
+      </n-icon>
+    </template>
+  </n-button>
+  <n-button v-else ghost type="primary" size="large">
+    <template #icon>
+      <n-icon>
+        <DuplicateIcon />
+      </n-icon>
+    </template>
+    <span>
+      新建项目
+    </span>
+  </n-button>
+</template>
+<script setup lang="ts">
+import { Duplicate as DuplicateIcon } from '@vicons/ionicons5'
+const props = defineProps({
+  collapsed: Boolean
+})
+</script>

src/views/project/layout/components/Header/index.ts

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

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

@@ -0,0 +1,13 @@
+<template>
+  <Header>
+    <template #ri-left>
+    </template>
+    <template #ri-right>
+      <UserInfo />
+    </template>
+  </Header>
+</template>
+<script setup lang="ts">
+import { Header } from '@/layout/components/Header'
+import { UserInfo } from '@/components/UserInfo'
+</script>

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

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

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

@@ -0,0 +1,82 @@
+<template>
+  <n-layout-sider
+    class="go-project-layout-sider"
+    bordered
+    inverted
+    collapse-mode="width"
+    :collapsed="collapsed"
+    :native-scrollbar="false"
+    :collapsed-width="asideCollapsedWidth"
+    :width="asideWidth"
+    @collapse="collapsed = true"
+    @expand="collapsed = false"
+  >
+    <div class="go-project-sider-flex">
+      <aside>
+        <n-space vertical class="go-project-sider-top">
+          <Create :collapsed="collapsed" />
+        </n-space>
+        <n-menu
+          :value="menuValue"
+          :options="menuOptions"
+          :collapsed-width="asideCollapsedWidth"
+          :collapsed-icon-size="22"
+          @update:value="handleUpdateValue"
+        />
+      </aside>
+      <!-- 底部提示 -->
+      <div class="sider-bottom">
+        <AsideFooter />
+      </div>
+    </div>
+  </n-layout-sider>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Create } from '../Create/index'
+import { AsideFooter } from '../AsideFooter/index'
+import { asideWidth, asideCollapsedWidth } from '@/settings/designSetting'
+import { menuOptionsInit } from './menu'
+import { useRoute } from 'vue-router'
+
+const collapsed = ref(false)
+
+const route = useRoute()
+const routeRame = computed(() => route.name)
+const menuValue = ref(routeRame)
+
+const menuOptions = menuOptionsInit()
+</script>
+
+<style lang="scss" scoped>
+$siderHeight: 100vh;
+
+@include go(project) {
+  &-sider {
+    &-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-direction: column;
+      margin-top: 30px;
+      margin-bottom: 20px;
+    }
+    &-flex {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: $siderHeight;
+    }
+  }
+  &-layout-sider {
+    height: $siderHeight;
+    @include filter-bg-color('aside-bg');
+    @include filter-border-color('aside-color');
+  }
+  .content-top {
+    top: $--header-height;
+    margin-top: 1px;
+  }
+}
+</style>

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

@@ -0,0 +1,58 @@
+import { reactive, h } from 'vue'
+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'
+
+export const renderMenuLabel = (option: MenuOption | MenuGroupOption) => {
+  return option.label
+}
+
+export const menuOptionsInit = () => {
+  return reactive([
+    {
+      key: 'divider-1',
+      type: 'divider'
+    },
+    {
+      type: 'group',
+      label: '我的',
+      key: 'people',
+      children: [
+        {
+          label: () =>
+            h(
+              RouterLink,
+              {
+                to: {
+                  name: PageEnum.BASE_HOME_NAME
+                }
+              },
+              { default: () => '全部项目' }
+            ),
+          key: PageEnum.BASE_HOME_NAME,
+          icon: renderIcon(FolderOpenIcon)
+        }
+      ]
+    },
+    {
+      key: 'divider-1',
+      type: 'divider'
+    },
+    {
+      label: () =>
+        h(
+          RouterLink,
+          {
+            to: {
+              name: PageEnum.BASE_HOME_NAME
+            }
+          },
+          { default: () => '模板市场' }
+        ),
+      key: 'store',
+      icon: renderIcon(LogoAppleAppstoreIcon)
+    }
+  ])
+}