完成编辑和新建的跳转

src/enums/pageEnum.ts

@@ -2,7 +2,7 @@ import { ResultEnum } from '@/enums/httpEnum'
 
 export enum ChartEnum {
   // 图表创建
-  CHART_HOME = '/chart/home/:id',
+  CHART_HOME = '/chart/home/:id(.*)*',
   CHART_HOME_NAME = 'ChartHome',
 }
 

src/utils/page.ts

@@ -1,18 +1,23 @@
 import { ResultEnum } from '@/enums/httpEnum'
 import { ErrorPageNameMap, PageEnum } from '@/enums/pageEnum'
+import { RouteLocation } from 'vue-router'
 import router from '@/router'
 import { docPath, giteeSourceCodePath } from '@/settings/pathConst'
 
 /**
  * * 根据名字跳转路由
  * @param pageName
+ * @param isReplace
+ * @param windowOpen
  */
-export const routerTurnByName = (pageName: string, isReplace?: boolean, windowOpen?: boolean) => {
+export const routerTurnByName = (
+  pageName: string,
+  isReplace?: boolean,
+  windowOpen?: boolean
+) => {
   if (windowOpen) {
-    const path = router.resolve({
-      name: pageName
-    })
-    openNewWindow(path.href)
+    const path = fetchPathByName(pageName, 'href')
+    openNewWindow(path)
     return
   }
   if (isReplace) {
@@ -26,6 +31,49 @@ export const routerTurnByName = (pageName: string, isReplace?: boolean, windowOp
   })
 }
 
+/**
+ * * 根据名称获取路由信息
+ * @param pageName
+ * @param pageName
+ */
+export const fetchPathByName = (pageName: string, p?: string) => {
+  const pathData = router.resolve({
+    name: pageName
+  })
+  return p ? (pathData as any)[p] : pathData
+}
+
+/**
+ * * 根据路径跳转路由
+ * @param { String } path
+ * @param { Array } query
+ * @param isReplace
+ */
+export const routerTurnByPath = (
+  path: string,
+  query?: Array<string | number>,
+  isReplace?: boolean,
+  windowOpen?: boolean
+) => {
+  let fullPath = ''
+  if (query?.length) {
+    fullPath = `${path}/${query.join('/')}`
+  }
+  if (windowOpen) {
+    openNewWindow(fullPath)
+    return
+  }
+  if (isReplace) {
+    router.replace({
+      path: fullPath
+    })
+    return
+  }
+  router.push({
+    path: fullPath
+  })
+}
+
 /**
  * * 错误页重定向
  * @param icon
@@ -49,7 +97,7 @@ export const logout = () => {
  * * 新开页面
  * @param url
  */
- export const openNewWindow = (url: string) => {
+export const openNewWindow = (url: string) => {
   window.open(url, 'blank')
 }
 
@@ -68,4 +116,3 @@ export const openDoc = () => {
 export const openGiteeSourceCode = () => {
   openNewWindow(giteeSourceCodePath)
 }
-

src/views/project/items/components/Card/index.vue

@@ -60,7 +60,7 @@
 
               <n-tooltip v-else placement="bottom" trigger="hover">
                 <template #trigger>
-                  <n-button size="small">
+                  <n-button size="small" @click="handleSelect(item.key)">
                     <template #icon>
                       <component :is="item.icon" />
                     </template>
@@ -98,7 +98,7 @@ const {
 const dialog = useDialog()
 const message = useMessage()
 
-const emit = defineEmits(['delete', 'resize'])
+const emit = defineEmits(['delete', 'resize', 'edit'])
 
 const props = defineProps({
   cardData: Object
@@ -163,6 +163,9 @@ const handleSelect = (key: string) => {
     case 'delete':
       deleteHanlde()
       break
+    case 'edit':
+      editHandle()
+      break
 
     default:
       break
@@ -174,6 +177,11 @@ const deleteHanlde = () => {
   emit('delete', props.cardData)
 }
 
+// 编辑处理
+const editHandle = () => {
+  emit('edit', props.cardData)
+}
+
 // 放大处理
 const resizeHandle = () => {
   emit('resize', props.cardData)

src/views/project/items/components/List/hooks/useModal.hook.ts

@@ -1,27 +1,34 @@
 import { ref, Ref } from 'vue'
-
+import { ChartEnum } from '@/enums/pageEnum'
+import { fetchPathByName, routerTurnByPath } from '@/utils'
 export const useModalDataInit = () => {
   const modalShow = ref<boolean>(false)
+  // TODO 补充 modalData 类型格式
   const modalData = ref<object | unknown>(null)
 
   // 关闭 modal
   const closeModal = () => {
     modalShow.value = false
     modalData.value = null
-    console.log('close')
   }
 
   // 打开 modal
   const resizeHandle = (cardData: Ref<object | unknown>) => {
-    console.log(cardData)
     modalShow.value = true
     modalData.value = cardData
   }
 
+  // 打开 modal
+  const editHandle = (cardData: Ref<object | unknown>) => {
+    const path = fetchPathByName(ChartEnum.CHART_HOME_NAME, 'href')
+    routerTurnByPath(path, [(<any>cardData).id], undefined, true)
+  }
+
   return {
     modalData,
     modalShow,
     closeModal,
-    resizeHandle
+    resizeHandle,
+    editHandle
   }
 }

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

@@ -11,11 +11,16 @@
           :cardData="item"
           @resize="resizeHandle"
           @delete="deleteHandle($event, index)"
+          @edit="editHandle"
         />
       </n-grid-item>
     </n-grid>
   </div>
-  <ModalCard v-model:show="modalShow" :cardData="modalData" @close="closeModal" />
+  <ModalCard
+    v-model:show="modalShow"
+    :cardData="modalData"
+    @close="closeModal"
+  />
 </template>
 
 <script setup lang="ts">
@@ -27,10 +32,14 @@ import { useModalDataInit } from './hooks/useModal.hook'
 import { useDataListInit } from './hooks/useData.hook'
 
 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
-
-const { modalData, modalShow, closeModal, resizeHandle } = useModalDataInit()
-
 const { list, deleteHandle } = useDataListInit()
+const {
+  modalData,
+  modalShow,
+  closeModal,
+  resizeHandle,
+  editHandle
+} = useModalDataInit()
 </script>
 
 <style lang="scss" scoped>

src/views/project/templateMarket/index.vue

@@ -5,28 +5,40 @@
       <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-space>
+              <img
+                class="carousel-img"
+                src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
+              />
+              <n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
+            </n-space>
           </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-space>
+              <img
+                class="carousel-img"
+                src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
+              />
+              <n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
+            </n-space>
           </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-space>
+              <img
+                class="carousel-img"
+                src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
+              />
+              <n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
+            </n-space>
           </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-space>
+              <img
+                class="carousel-img"
+                src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
+              />
+              <n-text>这里是介绍拉巴拉巴拉巴拉</n-text>
+            </n-space>
           </n-card>
         </n-carousel>
       </div>