fix: 修改名称规范问题

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

@@ -0,0 +1,58 @@
+import { ref } from 'vue'
+import { goDialog } from '@/utils'
+import { DialogEnum } from '@/enums/pluginEnum'
+import { ChartList } from '../../..'
+// 数据初始化
+export const useDataListInit = () => {
+  const list = ref<ChartList>([
+    {
+      id: 1,
+      title: '物料1',
+      release: true,
+      label: '官方案例'
+    },
+    {
+      id: 2,
+      title: '物料2',
+      release: false,
+      label: '官方案例'
+    },
+    {
+      id: 3,
+      title: '物料3',
+      release: false,
+      label: '官方案例'
+    },
+    {
+      id: 4,
+      title: '物料4',
+      release: false,
+      label: '官方案例'
+    },
+    {
+      id: 5,
+      title: '物料5',
+      release: false,
+      label: '官方案例'
+    }
+  ])
+
+  // 删除
+  const deleteHandle = (cardData: object, index: number) => {
+    goDialog({
+      type: DialogEnum.delete,
+      promise: true,
+      onPositiveCallback: () =>
+        new Promise(res => setTimeout(() => res(1), 1000)),
+      promiseResCallback: (e: any) => {
+        window.$message.success('删除成功')
+        list.value.splice(index, 1)
+      }
+    })
+  }
+
+  return {
+    list,
+    deleteHandle
+  }
+}

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

@@ -0,0 +1,36 @@
+import { ref, Ref } from 'vue'
+import { ChartEnum } from '@/enums/pageEnum'
+import { fetchPathByName, routerTurnByPath } from '@/utils'
+import { Chartype } from '../../..'
+export const useModalDataInit = () => {
+  const modalShow = ref<boolean>(false)
+  const modalData = ref<Chartype | null>(null)
+
+  // 关闭 modal
+  const closeModal = () => {
+    modalShow.value = false
+    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)
+  }
+
+  return {
+    modalData,
+    modalShow,
+    closeModal,
+    resizeHandle,
+    editHandle
+  }
+}

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

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

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

@@ -0,0 +1,54 @@
+<template>
+  <div class="go-items-list">
+    <n-grid
+      :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"
+          @resize="resizeHandle"
+          @delete="deleteHandle($event, index)"
+          @edit="editHandle"
+       ></project-items-card>
+      </n-grid-item>
+    </n-grid>
+  </div>
+  <project-items-modal-card
+    v-if="modalData"
+    v-model:modalShow="modalShow"
+    :cardData="modalData"
+    @close="closeModal"
+    @edit="editHandle"
+ ></project-items-modal-card>
+</template>
+
+<script setup lang="ts">
+import { ProjectItemsCard } from '../ProjectItemsCard/index'
+import { ProjectItemsModalCard } from '../ProjectItemsModalCard/index'
+import { icon } from '@/plugins'
+import { useModalDataInit } from './hooks/useModal.hook'
+import { useDataListInit } from './hooks/useData.hook'
+
+const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
+const { list, deleteHandle } = useDataListInit()
+const {
+  modalData,
+  modalShow,
+  closeModal,
+  resizeHandle,
+  editHandle
+} = useModalDataInit()
+</script>
+
+<style lang="scss" scoped>
+$contentHeight: 250px;
+@include go('items-list') {
+  .list-content {
+    position: relative;
+    height: $contentHeight;
+  }
+}
+</style>