feat: 完成新开页的设计

src/enums/pageEnum.ts

@@ -1,5 +1,11 @@
 import { ResultEnum } from '@/enums/httpEnum'
 
+export enum ChartEnum {
+  // 图表创建
+  CHART_HOME = '/chart',
+  CHART_HOME_NAME = 'Chart',
+}
+
 export enum PageEnum {
   // 登录
   BASE_LOGIN = '/login',

src/layout/components/HeaderPro/index.ts

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

src/layout/components/HeaderPro/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/plugins/icon.ts

@@ -28,7 +28,8 @@ import {
   HelpCircleOutline as HelpOutlineIcon,
   CodeSlash as CodeSlashIcon,
   Duplicate as DuplicateIcon,
-  DuplicateOutline as DuplicateOutlineIcon
+  DuplicateOutline as DuplicateOutlineIcon,
+  Fish as FishIcon
 } from '@vicons/ionicons5'
 
 // ionicons5 在这里
@@ -92,7 +93,9 @@ const ionicons5 = {
   // 文档
   DocumentTextIcon,
   // 语言
-  LanguageIcon
+  LanguageIcon,
+  // 新项目（鱼）
+  FishIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/plugins/naive.ts

@@ -12,6 +12,7 @@ import {
   NConfigProvider,
   NMessageProvider,
   NDialogProvider,
+  NGradientText,
   NInput,
   NImage,
   NButton,
@@ -93,6 +94,7 @@ const naive = create({
     NMessageProvider,
     NDialogProvider,
     NConfigProvider,
+    NGradientText,
     NInput,
     NButton,
     NForm,

src/router/index.ts

@@ -3,10 +3,11 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import { RedirectRoute } from '@/router/base'
 import { createRouterGuards } from './router-guards'
 import { PageEnum } from '@/enums/pageEnum'
-import modules from '@/router/modules'
 import { HttpErrorPage, LoginRoute } from '@/router/base'
 import { Layout } from '@/router/constant'
 
+import modules from '@/router/modules'
+
 const RootRoute: Array<RouteRecordRaw> = [
   {
     path: '/',
@@ -18,7 +19,8 @@ const RootRoute: Array<RouteRecordRaw> = [
     },
     children: [
       ...HttpErrorPage,
-      modules.projectRoutes
+      modules.projectRoutes,
+      modules.chartRoutes
     ]
   }
 ]

src/router/modules/chart.route.ts

@@ -0,0 +1,20 @@
+import { RouteRecordRaw } from 'vue-router'
+import { ChartEnum } from '@/enums/pageEnum'
+
+// 引入路径
+const importPath = {
+  'ChartEnum.CHART_HOME_NAME': () => import('@/views/chart/index.vue')
+}
+
+const chartRoutes: RouteRecordRaw = {
+  path: ChartEnum.CHART_HOME,
+  name: ChartEnum.CHART_HOME_NAME,
+  component: importPath['ChartEnum.CHART_HOME_NAME'],
+  meta: {
+    title: '图表',
+    isRoot: true
+  }
+}
+
+
+export default chartRoutes

src/router/modules/index.ts

@@ -1,5 +1,7 @@
 import projectRoutes from './project.router'
+import chartRoutes from './chart.route'
 
 export default {
-  projectRoutes
+  projectRoutes,
+  chartRoutes
 }

src/utils/page.ts

@@ -7,7 +7,14 @@ import { docPath, giteeSourceCodePath } from '@/settings/pathConst'
  * * 根据名字跳转路由
  * @param pageName
  */
-export const routerTurnByName = (pageName: string, isReplace?: boolean) => {
+export const routerTurnByName = (pageName: string, isReplace?: boolean, windowOpen?: boolean) => {
+  if (windowOpen) {
+    const path = router.resolve({
+      name: pageName
+    })
+    openNewWindow(path.href)
+    return
+  }
   if (isReplace) {
     router.replace({
       name: pageName
@@ -39,25 +46,26 @@ export const logout = () => {
 }
 
 /**
- * * 打开项目文档
+ * * 新开页面
  * @param url
  */
-export const openDoc = () => {
-  window.open(docPath, 'blank')
+ export const openNewWindow = (url: string) => {
+  window.open(url, 'blank')
 }
 
 /**
- * * 打开码云仓库地址
+ * * 打开项目文档
  * @param url
  */
-export const openGiteeSourceCode = () => {
-  window.open(giteeSourceCodePath, 'blank')
+export const openDoc = () => {
+  openNewWindow(docPath)
 }
 
 /**
- * * 新开页面
+ * * 打开码云仓库地址
  * @param url
  */
-export const openNewWindow = (url: string) => {
-  window.open(url, 'blank')
+export const openGiteeSourceCode = () => {
+  openNewWindow(giteeSourceCodePath)
 }
+

src/views/chart/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="go-chart">
+    <n-layout>
+      <HeaderPro />
+      <n-layout-content>
+        <TransitionMain>
+          <router-view />
+        </TransitionMain>
+      </n-layout-content>
+    </n-layout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { HeaderPro } from '@/layout/components/HeaderPro'
+import { requireFallbackImg } from '@/utils'
+import { TransitionMain } from '@/layout/components/TransitionMain/index'
+</script>
+
+<style lang="scss" scoped>
+$height: 100vh;
+@include go('chart') {
+  height: $height;
+  overflow: hidden;
+  @include background-image('background-image');
+}
+</style>

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>