完成编辑和新建的跳转

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>