feat: 完成新开页的设计

src/views/project/index.vue

@@ -5,8 +5,9 @@
         <Sider />
       </n-space>
       <n-layout>
-        <Header />
+        <HeaderPro />
         <n-layout
+          id="go-project-content-top"
           class="content-top"
           position="absolute"
           :native-scrollbar="false"
@@ -24,7 +25,8 @@
 
 <script setup lang="ts">
 import { Sider } from './layout/components/Sider'
-import { Header } from './layout/components/Header/index'
+// import { Header } from './layout/components/Header/index'
+import { HeaderPro } from '@/layout/components/HeaderPro'
 import { TransitionMain } from '@/layout/components/TransitionMain/index'
 </script>
 

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

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

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

@@ -0,0 +1,112 @@
+<template>
+  <n-modal v-model:show="show" class="go-create-modal">
+    <n-space size="large">
+      <n-card class="card-box" hoverable>
+        <template #header>
+          <n-text class="card-box-tite">选择类型</n-text>
+        </template>
+        <template #header-extra>
+          <n-text @click="closeHandle">
+            <n-icon size="20">
+              <component :is="CloseIcon" />
+            </n-icon>
+          </n-text>
+        </template>
+        <n-space class="card-box-content" justify="center">
+          <n-button
+            size="large"
+            :disabled="item.disabled"
+            v-for="item in typeList"
+            :key="item.key"
+            :title="item.title"
+            @click="btnHandle(item.index)"
+          >
+            <template #icon>
+              <n-icon size="18">
+                <component :is="item.icon" />
+              </n-icon>
+            </template>
+            <span>{{ item.title }}</span>
+          </n-button>
+        </n-space>
+        <template #action> </template>
+      </n-card>
+    </n-space>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import { watch, ref } from 'vue'
+import { icon } from '@/plugins'
+import { PageEnum, ChartEnum } from '@/enums/pageEnum'
+import { routerTurnByName } from '@/utils'
+
+const { FishIcon, LaptopOutlineIcon, BeerIcon, CloseIcon } = icon.ionicons5
+const emit = defineEmits(['close'])
+const props = defineProps({
+  show: Boolean
+})
+
+const typeList = ref([
+  {
+    title: '新项目',
+    key: ChartEnum.CHART_HOME_NAME,
+    icon: FishIcon,
+    disabled: false
+  },
+  {
+    title: '我的模板',
+    key: PageEnum.BASE_HOME_TEMPLATE_NAME,
+    icon: LaptopOutlineIcon,
+    disabled: true
+  },
+  {
+    title: '市场模板',
+    key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
+    icon: BeerIcon,
+    disabled: true
+  }
+])
+
+// 解决点击模态层不会触发 @on-after-leave 的问题
+watch(props, newValue => {
+  if (!newValue.show) {
+    closeHandle()
+  }
+})
+
+// 关闭对话框
+const closeHandle = () => {
+  emit('close', false)
+}
+
+// 处理按钮点击
+const btnHandle = (key: string) => {
+  closeHandle()
+  routerTurnByName(ChartEnum.CHART_HOME_NAME, undefined, true)
+}
+</script>
+<style lang="scss" scoped>
+@include go('create-modal') {
+  position: fixed;
+  top: 200px;
+  left: 50%;
+  transform: translateX(-50%);
+  .card-box {
+    width: 500px;
+    cursor: pointer;
+    border: 1px solid rgba(0, 0, 0, 0);
+    @extend .go-transition;
+    &:hover {
+      @include hover-border-color('hover-border-color');
+    }
+    &-tite {
+      font-size: 14px;
+    }
+    &-content {
+      padding: 0px 10px;
+      width: 100%;
+    }
+  }
+}
+</style>

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

@@ -1,35 +1,40 @@
 <template>
-  <n-tooltip v-if="collapsed" placement="right" trigger="hover">
-    <template #trigger>
-      <n-button ghost type="primary" size="small">
-        <template #icon>
-          <n-icon>
-            <DuplicateOutlineIcon v-show="designStore.getDarkTheme" />
-            <DuplicateIcon v-show="!designStore.getDarkTheme" />
-          </n-icon>
-        </template>
-      </n-button>
-    </template>
-    <span>
-      新建
-    </span>
-  </n-tooltip>
-  <n-button v-else ghost type="primary" size="large">
-    <template #icon>
-      <n-icon>
-        <DuplicateOutlineIcon v-show="designStore.getDarkTheme" />
-        <DuplicateIcon v-show="!designStore.getDarkTheme" />
-      </n-icon>
-    </template>
-    <span>
-      新建
-    </span>
-  </n-button>
+  <div @click="clickHandle">
+    <n-tooltip v-if="collapsed" placement="right" trigger="hover">
+      <template #trigger>
+        <n-button ghost type="primary" size="small">
+          <template #icon>
+            <n-icon>
+              <DuplicateOutlineIcon v-show="designStore.getDarkTheme" />
+              <DuplicateIcon v-show="!designStore.getDarkTheme" />
+            </n-icon>
+          </template>
+        </n-button>
+      </template>
+      <span>
+        新建
+      </span>
+    </n-tooltip>
+    <n-button v-else ghost type="primary" size="large">
+      <template #icon>
+        <n-icon>
+          <DuplicateOutlineIcon v-show="designStore.getDarkTheme" />
+          <DuplicateIcon v-show="!designStore.getDarkTheme" />
+        </n-icon>
+      </template>
+      <span>
+        新建
+      </span>
+    </n-button>
+  </div>
+  <CreateModal :show="modalShow" @close="closeHandle" />
 </template>
 <script setup lang="ts">
-import { icon } from '@/plugins'
+import { ref } from 'vue'
 import { computed } from 'node_modules/vue/dist/vue'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { CreateModal } from './components/CreateModal/index'
+import { icon } from '@/plugins'
 
 const { DuplicateIcon, DuplicateOutlineIcon } = icon.ionicons5
 const designStore = useDesignStore()
@@ -37,4 +42,14 @@ const designStore = useDesignStore()
 const props = defineProps({
   collapsed: Boolean
 })
+
+const modalShow = ref<boolean>(false)
+
+const clickHandle = () => {
+  modalShow.value = true
+}
+
+const closeHandle = () => {
+  modalShow.value = false
+}
 </script>