perf: 完善首页预览功能

src/utils/router.ts

@@ -205,9 +205,9 @@ export const loginCheck = () => {
  * * 预览地址
  * @returns 
  */
- export const previewPath = () => {
+ export const previewPath = (id?: string | number) => {
   const { origin, pathname } = document.location
   const path = fetchPathByName(PreviewEnum.CHART_PREVIEW_NAME, 'href')
-  const previewPath = `${origin}${pathname}${path}/${fetchRouteParamsLocation()}`
+  const previewPath = `${origin}${pathname}${path}/${id || fetchRouteParamsLocation()}`
   return previewPath
 }

src/views/preview/utils/storage.ts

@@ -16,7 +16,7 @@ export const getSessionStorageInfo = async () => {
   )
   
   // 是否本地预览
-  if (!storageList) {
+  if (!storageList || storageList.findIndex(e => e.id === id.toString()) === -1) {
     // 接口调用
     const res = await fetchProjectApi({ projectId: id }) as unknown as MyResponseType
     if (res.code === ResultEnum.SUCCESS) {

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

@@ -7,7 +7,7 @@
           <mac-os-control-btn
             class="top-btn"
             :hidden="['remove']"
-            @close="deleteHanlde"
+            @close="deleteHandle"
             @resize="resizeHandle"
          ></mac-os-control-btn>
         </div>
@@ -98,7 +98,7 @@ const {
   SendIcon
 } = icon.ionicons5
 
-const emit = defineEmits(['delete', 'resize', 'edit', 'release'])
+const emit = defineEmits(['preview', 'delete', 'resize', 'edit', 'release'])
 
 const props = defineProps({
   cardData: Object as PropType<Chartype>
@@ -165,8 +165,11 @@ const selectOptions = ref([
 
 const handleSelect = (key: string) => {
   switch (key) {
+    case 'preview':
+      previewHandle()
+      break
     case 'delete':
-      deleteHanlde()
+      deleteHandle()
       break
     case 'release':
       releaseHandle()
@@ -177,8 +180,13 @@ const handleSelect = (key: string) => {
   }
 }
 
+// 预览处理
+const previewHandle = () => {
+  emit('preview', props.cardData)
+}
+
 // 删除处理
-const deleteHanlde = () => {
+const deleteHandle = () => {
   emit('delete', props.cardData)
 }
 

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

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { ChartEnum } from '@/enums/pageEnum'
-import { fetchPathByName, routerTurnByPath } from '@/utils'
+import { fetchPathByName, routerTurnByPath, openNewWindow, previewPath } from '@/utils'
 import { Chartype } from '../../../index.d'
 export const useModalDataInit = () => {
   const modalShow = ref<boolean>(false)
@@ -12,25 +12,31 @@ export const useModalDataInit = () => {
     modalData.value = null
   }
 
-  // 打开 modal
+  // 缩放处理
   const resizeHandle = (cardData: Chartype) => {
     if (!cardData) return
     modalShow.value = true
     modalData.value = cardData
   }
 
-  // 打开 modal
+  // 编辑处理
   const editHandle = (cardData: Chartype) => {
     if (!cardData) return
     const path = fetchPathByName(ChartEnum.CHART_HOME_NAME, 'href')
     routerTurnByPath(path, [cardData.id], undefined, true)
   }
 
+  // 预览处理
+  const previewHandle = (cardData: Chartype) => {
+    openNewWindow(previewPath(cardData.id))
+  }
+
   return {
     modalData,
     modalShow,
     closeModal,
     resizeHandle,
-    editHandle
+    editHandle,
+    previewHandle
   }
 }

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

@@ -6,15 +6,11 @@
     </div>
     <!-- 列表 -->
     <div v-show="!loading">
-      <n-grid
+      <n-grid :x-gap="20" :y-gap="20" cols="2 s:2 m:3 l:4 xl:4 xxl:4" responsive="screen">
-        :x-gap="20"
-        :y-gap="20"
-        cols="2 s:2 m:3 l:4 xl:4 xxl:4"
-        responsive="screen"
-      >
         <n-grid-item v-for="(item, index) in list" :key="item.id">
           <project-items-card
             :cardData="item"
+            @preview="previewHandle"
             @resize="resizeHandle"
             @delete="deleteHandle(item)"
             @release="releaseHandle(item, index)"
@@ -56,17 +52,8 @@ import { useModalDataInit } from './hooks/useModal.hook'
 import { useDataListInit } from './hooks/useData.hook'
 
 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
-const { modalData, modalShow, closeModal, resizeHandle, editHandle } =
+const { modalData, modalShow, closeModal, previewHandle, resizeHandle, editHandle } = useModalDataInit()
-  useModalDataInit()
+const { loading, paginat, list, changeSize, changePage, releaseHandle, deleteHandle } = useDataListInit()
-const {
-  loading,
-  paginat,
-  list,
-  changeSize,
-  changePage,
-  releaseHandle,
-  deleteHandle,
-} = useDataListInit()
 </script>
 
 <style lang="scss" scoped>