feat: 首页架构

2026-04-23 00:00:12 +08:00 · 2021-12-18 16:36:43 +08:00
parent 44667a89f0
commit 90e45f6c23
31 changed files with 548 additions and 62 deletions
@@ -6,7 +6,7 @@
        <transition-group name="list-complete">
          <template v-for="item in bgList" :key="item">
            <div class="bg-img-box-li list-complete-item">
-              <n-collapse-transition :appear="true" :show="show">
+              <n-collapse-transition :appear="true" :show="showBg">
                <img :src="getImageUrl(item, 'chart')" alt="chart" />
              </n-collapse-transition>
            </div>
@@ -141,12 +141,16 @@ const message = useMessage()
 const loading = ref(false)
 const autoLogin = ref(true)
 const show = ref(false)
+const showBg = ref(false)
 const designStore = useDesignStore()
 const { t } = useI18n()

 onMounted(() => {
  setTimeout(() => {
    show.value = true
+  }, 300)
+  setTimeout(() => {
+    showBg.value = true
  }, 100)
 })

@@ -274,7 +278,7 @@ $carousel-image-height: 60vh;

      &-card {
        @extend .go-background-filter;
-        @include filter-color('filter-color');
+        @include filter-bg-color('filter-color');
        box-shadow: 0 0 20px 5px rgba(40, 40, 40, 0.5);
      }

@@ -1,9 +1,35 @@
 <template>
-  <div>
-    <h1>首页</h1>
+  <div class="go-project">
+    <n-layout has-sider position="absolute">
+      <n-space vertical>
+        <Sider />
+      </n-space>
+      <n-layout>
+        <Header />
+        <n-layout
+          class="content-top"
+          position="absolute"
+          :native-scrollbar="false"
+        >
+          <n-layout-content>
+            <router-view></router-view>
+          </n-layout-content>
+        </n-layout>
+      </n-layout>
+    </n-layout>
  </div>
 </template>

-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Sider } from './layout/components/Sider'
+import { Header } from './layout/components/Header/index'
+</script>

-<style scoped></style>
+<style lang="scss" scoped>
+@include go(project) {
+  .content-top {
+    top: $--header-height;
+    margin-top: 1px;
+  }
+}
+</style>
@@ -0,0 +1,3 @@
+import AsideFooter from './index.vue'
+
+export { AsideFooter }
@@ -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>
@@ -0,0 +1,3 @@
+import Create from './index.vue'
+
+export { Create }
@@ -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>
@@ -0,0 +1,3 @@
+import Header from './index.vue'
+
+export { Header }
@@ -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>
@@ -0,0 +1,3 @@
+import Sider from './index.vue'
+
+export { Sider }
@@ -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>
@@ -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)
+    }
+  ])
+}
@@ -13,12 +13,4 @@ const router = useRouter()
 const goHome = () => {
  router.replace({ path: '/' })
 }
-// onBeforeMount(() => {
-//   const { params, query } = route
-//   const { path } = params
-//   router.replace({
-//     path: '/' + (Array.isArray(path) ? path.join('/') : path),
-//     query
-//   })
-// })
 </script>