Merge branch 'ww' into 'main'

perf: 重构新增功能逻辑

See merge request yunteng/thingskit-view!8

 import { defHttp } from '@/utils/external/http/axios'
-import { BaseSaveContentParams, BaseUpdateContentParams } from './model/contentModel'
+import { BaseSaveContentParams, BaseUpdateContentParams, DataViewListRecord } from './model/contentModel'
 
-import type { ErrorMessageMode } from '/#/external/axios'
+import type { ErrorMessageMode, PaginationResult } from '/#/external/axios'
 
 enum Api {
   //大屏设计器
@@ -61,7 +61,7 @@ export function contentDeleteApi(data: [string], mode: ErrorMessageMode = 'modal
  */
 
 export const getDataView = (id: string) => {
-  return defHttp.get({
+  return defHttp.get<BaseUpdateContentParams>({
     url: `${Api.DATA_VIEW}/get_configuration_info/${id}`
   })
 }
@@ -71,7 +71,7 @@ export const getDataView = (id: string) => {
  */
 
 export const getDataViewList = (params: object) => {
-  return defHttp.get({
+  return defHttp.get<PaginationResult<DataViewListRecord>>({
     url: `${Api.DATA_VIEW}`,
     params
   })

@@ -30,5 +30,28 @@ export interface BaseUpdateContentParams {
   dataViewContent: BaseSaveContentParams
   dataViewId?: string
   dataViewName: string
+  organizationId: string
   state?: number
 }
+
+export interface OrganizationDTO {
+  name: string;
+  enabled: boolean;
+  sort: number;
+  children: any[];
+}
+
+export interface DataViewListRecord {
+  id: string;
+  creator: string;
+  createTime: string;
+  updater: string;
+  updateTime: string;
+  name: string;
+  enabled: boolean;
+  tenantId: string;
+  organizationId: string;
+  thumbnail: string;
+  organizationDTO: OrganizationDTO;
+}
+

@@ -2,11 +2,14 @@ import { ChartFrameEnum } from '@/packages/index.d'
 import { ConfigType } from '@/packages/index.d'
 import { EPackagesCategoryEnum } from '@/packages/components/external/types'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('LeftCenterRightHead')
 
 export const LeftCenterRightHeadConfig: ConfigType = {
-    key: 'LeftCenterRightHead',
-    chartKey: 'VLeftCenterRightHead',
-    conKey: 'VCLeftCenterRightHead',
+    key,
+    chartKey,
+    conKey,
     title: '通用头部',
     category: ChatCategoryEnum.HEADCOMBINATION,
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,

 import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
 import { EPackagesCategoryEnum } from '@/packages/components/external/types'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
 
+const { key, chartKey, conKey } = useWidgetKey('LeftCenterRightHeadCommon')
 export const LeftCenterRightHeadCommonConfig: ConfigType = {
-    key: 'LeftCenterRightHeadCommon',
-    chartKey: 'VLeftCenterRightHeadCommon',
-    conKey: 'VCLeftCenterRightHeadCommon',
+    key,
+    chartKey,
+    conKey,
     title: '头部',
     category: ChatCategoryEnum.HEADCOMBINATION,
     categoryName: ChatCategoryEnumName.HEADCOMBINATION,

-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+import { ConfigType, ChartFrameEnum } from '@/packages/index.d'
+import { EPackagesCategoryEnum } from '../../../types'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
+const { key, conKey, chartKey } = useWidgetKey('WordCloud')
 export const WordCloudConfig: ConfigType = {
-  key: 'WordCloud',
-  chartKey: 'VWordCloud',
-  conKey: 'VCWordCloud',
+  key,
+  chartKey,
+  conKey,
   title: '词云',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
-  package: PackagesCategoryEnum.INFORMATIONS,
+  package: EPackagesCategoryEnum.COMPOSES,
   chartFrame: ChartFrameEnum.COMMON,
   image: 'words_cloud.png'
 }

@@ -7,3 +7,7 @@ export enum ChatCategoryEnumName {
   HEADCOMBINATION = '头部组合',
   MORE = '更多'
 }
+
+export enum PackagesCategoryEnum {
+  WORD_CLOUD = 'WordCloud'
+}

@@ -3,7 +3,7 @@ import { ConfigType } from "@/packages/index.d"
 
 // 包分类枚举
 export enum EPackagesCategoryEnum {
-  COMPOSES = 'external/Composes',
+  COMPOSES = 'Composes',
 }
 
 // 图表包类型

@@ -11,7 +11,7 @@ export const CONFIG_COMPONENT_PREFIX = 'VCC'
  * @param scope directory name 目录名
  * @returns 
  */
-export const useWidgetKey = (scope: string, extendPrimitiveCategory = false) => {
+export const useWidgetKey = (scope: string, extendPrimitiveCategory = true) => {
   const prefix = extendPrimitiveCategory ? EXTERNAL_WIDGET_PREFIX : ''
   return {
     key: scope,

@@ -144,8 +144,9 @@ const transform: AxiosTransform = {
     } catch (error: any) {
       throw new Error(error);
     }
+    console.log([error])
     checkStatus(error?.response?.status, msg, errorMessageMode);
-    return Promise.reject(response.data);
+    return Promise.reject(response?.data);
   },
 };
 

@@ -20,9 +20,9 @@ export const readFile = (file: File) => {
 
 /**
  * * 通过 a 标签下载数据
- * @param url
- * @param filename
- * @param fileSuffix
+ * @param url 
+ * @param filename 
+ * @param fileSuffix 
  */
 export const downloadByA = (url: string, filename = new Date().getTime(), fileSuffix?: string) => {
   const ele = document.createElement('a') // 创建下载链接
@@ -43,26 +43,12 @@ export const downloadByA = (url: string, filename = new Date().getTime(), fileSu
  * @param { ?string } filename 文件名称（默认随机字符）
  * @param { ?string } fileSuffix 文件名称（默认随机字符）
  */
-export const downloadTextFile = (content: string, filename = new Date().getTime(), fileSuffix?: string) => {
+export const downloadTextFile = (
+  content: string,
+  filename = new Date().getTime(),
+  fileSuffix?: string
+) => {
   // 字符内容转变成blob地址
   const blob = new Blob([content])
   downloadByA(URL.createObjectURL(blob), filename, fileSuffix)
 }
-// THINGS_KIT
-/**
- * * base64转file
- * @param dataurl
- * @param fileName
- * @returns
- */
-export const base64toFile = (dataurl: string, fileName: string) => {
-  let dataArr = dataurl.split(','),
-    mime = (dataArr as any[])[0].match(/:(.*?);/)[1],
-    bstr = atob(dataArr[1]),
-    n = bstr.length,
-    u8arr = new Uint8Array(n)
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n)
-  }
-  return new File([u8arr], fileName, { type: mime })
-}

@@ -28,7 +28,7 @@ export const exportHandle = () => {
   // 百分百展示页面
   chartEditStore.setScale(1, true)
   // 展示水印
-  // THINGS_KIT
+  // THINGS_KIT 隐藏水印
   watermark.style.display = 'none'
 
   setTimeout(() => {

@@ -59,7 +59,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-// THINGS_KIT 新增同步逻辑
+// THINGS_KIT 修改同步逻辑
 import { useSyncRemote } from '../../hooks/external/useRemote.hook'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'

-import {  fetchRouteParamsLocation, JSONStringify, JSONParse, base64toFile } from '@/utils'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 
-import { ProjectInfoEnum } from '@/store/external/module/projectInfo.d' 
+import { fetchRouteParamsLocation, JSONStringify, JSONParse } from '@/utils'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ProjectInfoEnum } from '@/store/external/module/projectInfo.d'
 import { onUnmounted } from 'vue'
 import { saveInterval } from '@/settings/designSetting'
 import throttle from 'lodash/throttle'
 import html2canvas from 'html2canvas'
 import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'
 // 画布枚举
-import { SyncEnum } from '@/enums/external/editPageEnum' 
+import { SyncEnum } from '@/enums/external/editPageEnum'
 import { useProjectInfoStore } from '@/store/external/module/projectInfo'
 import { useSync } from '../useSync.hook'
 
- 
+/**
+ * * base64转file
+ * @param dataurl
+ * @param fileName
+ * @returns
+ */
+export const base64toFile = (dataurl: string, fileName: string) => {
+
+  const dataArr = dataurl.split(',')
+  const mime = (dataArr as any[])[0].match(/:(.*?);/)[1]
+  const bstr = atob(dataArr[1])
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n)
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n)
+  }
+  return new File([u8arr], fileName, { type: mime })
+}
+
 
 // 请求处理
 export const useSyncRemote = () => {
-  const chartEditStore = useChartEditStore() 
+  const chartEditStore = useChartEditStore()
   const projectInfoStore = useProjectInfoStore()
   const { updateComponent } = useSync()
- 
+
   /**
    * * 赋值全局数据
    * @param projectData 项目数据
@@ -73,7 +91,7 @@ export const useSyncRemote = () => {
 
   // 数据保存
   const dataSyncUpdate = throttle(async (updateImg = true) => {
-    if (!fetchRouteParamsLocation()) return 
+    if (!fetchRouteParamsLocation()) return
     const projectId = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]
     const id = projectInfoStore.getProjectInfo[ProjectInfoEnum.REMARKS]
     const dataViewName = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME]
@@ -152,7 +170,7 @@ export const useSyncRemote = () => {
       clearInterval(syncTiming)
     })
   }
-  return {  
+  return {
     dataSyncFetch,
     dataSyncUpdate,
     intervalDataSyncUpdate

+import { fetchRouteParamsLocation, JSONParse, } from '@/utils'
+import { getDataView } from '@/api/external/contentSave/content'
+import { ChartEditStorageType } from '..'
+
+export const getSessionStorageInfo = async (): Promise<ChartEditStorageType> => {
+  const id = fetchRouteParamsLocation()
+
+  const res = await getDataView(id)
+  if (res) {
+    const { dataViewContent, dataViewName, dataViewId } = res
+    return { ...JSONParse(dataViewContent?.content), id: dataViewId, projectName: dataViewName } as ChartEditStorageType
+  }
+  return {} as unknown as ChartEditStorageType
+}
+

 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 export interface ChartEditStorageType extends ChartEditStorage {
-  // THINGS_KIT
-  id: string,
-  projectName:string,
-  isRelease?: boolean
+  id: string
 }

-<!-- THINGS_KIT -->
-
 <template>
-  <suspense>
-    <suspense-index></suspense-index>
-  </suspense>
+  <div :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`">
+    <template v-if="showEntity">
+      <!-- 实体区域 -->
+      <div ref="entityRef" class="go-preview-entity">
+        <!-- 缩放层 -->
+        <div ref="previewRef" class="go-preview-scale">
+          <!-- 展示层 -->
+          <div :style="previewRefStyle" v-if="show">
+            <!-- 渲染层 -->
+            <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <!-- 缩放层 -->
+      <div ref="previewRef" class="go-preview-scale">
+        <!-- 展示层 -->
+        <div :style="previewRefStyle" v-if="show">
+          <!-- 渲染层 -->
+          <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>
 
-<script setup lang="ts">
-import suspenseIndex from './suspenseIndex.vue'
+<script setup lang="ts" >
+import { computed } from 'vue'
+import { PreviewRenderList } from './components/PreviewRenderList'
+import { getFilterStyle, setTitle } from '@/utils'
+
+// THINGS_KIT 预览逻辑修改
+// import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
+import { getEditCanvasConfigStyle } from './utils'
+import { getSessionStorageInfo } from './external/usePreview'
+
+import { useComInstall } from './hooks/useComInstall.hook'
+import { useScale } from './hooks/useScale.hook'
+import { useStore } from './hooks/useStore.hook'
+import { PreviewScaleEnum } from '@/enums/styleEnum'
+import type { ChartEditStorageType } from './index.d'
+
+const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as ChartEditStorageType
+setTitle(`预览-${localStorageInfo.editCanvasConfig.projectName}`)
+
+const previewRefStyle = computed(() => {
+  return {
+    ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
+    ...getFilterStyle(localStorageInfo.editCanvasConfig)
+  }
+})
+
+const showEntity = computed(() => {
+  const type = localStorageInfo.editCanvasConfig.previewScaleType
+  return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
+})
+
+useStore(localStorageInfo)
+const { entityRef, previewRef } = useScale(localStorageInfo)
+const { show } = useComInstall(localStorageInfo)
 </script>
+
+<style lang="scss" scoped>
+@include go('preview') {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  @include background-image('background-image');
+
+  &.fit,
+  &.full {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    .go-preview-scale {
+      transform-origin: center center;
+    }
+  }
+
+  &.scrollY {
+    overflow-x: hidden;
+
+    .go-preview-scale {
+      transform-origin: left top;
+    }
+  }
+
+  &.scrollX {
+    overflow-y: hidden;
+
+    .go-preview-scale {
+      transform-origin: left top;
+    }
+  }
+
+  .go-preview-entity {
+    overflow: hidden;
+  }
+}
+</style>

-<!-- THINGS_KIT -->
-<template>
-  <div :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`">
-    <template v-if="showEntity">
-      <!-- 实体区域 -->
-      <div ref="entityRef" class="go-preview-entity">
-        <!-- 缩放层 -->
-        <div ref="previewRef" class="go-preview-scale">
-          <!-- 展示层 -->
-          <div :style="previewRefStyle" v-if="show">
-            <!-- 渲染层 -->
-            <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template v-else>
-      <!-- 缩放层 -->
-      <div ref="previewRef" class="go-preview-scale">
-        <!-- 展示层 -->
-        <div :style="previewRefStyle" v-if="show">
-          <!-- 渲染层 -->
-          <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { PreviewRenderList } from './components/PreviewRenderList'
-import { getFilterStyle, routerTurnByName, getSessionStorage, setTitle } from '@/utils'
-import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
-import { PageEnum } from '@/enums/pageEnum'
-import { StorageEnum } from '@/enums/storageEnum'
-import { useScale } from './hooks/useScale.hook'
-import { useStore } from './hooks/useStore.hook'
-import { PreviewScaleEnum } from '@/enums/styleEnum'
-import { useComInstall } from './hooks/useComInstall.hook'
-import type { ChartEditStorageType } from './index.d'
-
-const storageList: ChartEditStorageType[] = getSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST)
-// THINGS_KIT
-const localStorageInfo = (await getSessionStorageInfo()) as unknown as ChartEditStorageType
-setTitle(`预览-${localStorageInfo?.projectName}`)
-// THINGS_KIT
-// @ts-ignore
-// if (localStorageInfo.isRelease === false) {
-//   routerTurnByName(PageEnum.REDIRECT_UN_PUBLISH_NAME, true, false)
-// }
-
-const previewRefStyle = computed(() => {
-  return {
-    ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
-    ...getFilterStyle(localStorageInfo.editCanvasConfig.filterShow ? localStorageInfo.editCanvasConfig : undefined)
-  }
-})
-
-const showEntity = computed(() => {
-  const type = localStorageInfo.editCanvasConfig.previewScaleType
-  return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
-})
-
-useStore(localStorageInfo)
-const { entityRef, previewRef } = useScale(localStorageInfo)
-const { show } = useComInstall(localStorageInfo)
-</script>
-
-<style lang="scss" scoped>
-@include go('preview') {
-  position: relative;
-  height: 100vh;
-  width: 100vw;
-  @include background-image('background-image');
-  &.fit,
-  &.full {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    .go-preview-scale {
-      transform-origin: center center;
-    }
-  }
-  &.scrollY {
-    overflow-x: hidden;
-    .go-preview-scale {
-      transform-origin: left top;
-    }
-  }
-  &.scrollX {
-    overflow-y: hidden;
-    .go-preview-scale {
-      transform-origin: left top;
-    }
-  }
-  .go-preview-entity {
-    overflow: hidden;
-  }
-}
-</style>

-import { getSessionStorage, fetchRouteParamsLocation, JSONParse } from '@/utils'
+import { getSessionStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { getDataView } from '@/api/external/contentSave/content'
 
 export interface ChartEditStorageType extends ChartEditStorage {
   id: string
 }
-// THINGS_KIT
+
 // 根据路由 id 获取存储数据的信息
-export const getSessionStorageInfo = async () => {
-  const id = fetchRouteParamsLocation()
-  const storageList: ChartEditStorageType[] = getSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST)
-  console.log(id)
-  console.log(storageList)
-  // 是否本地预览
-  // if (!storageList || storageList.findIndex(e => e.id === id.toString()) === -1) {
-    // 接口调用
-    const res = await getDataView(id)
-    if (res) {
-      const { dataViewContent, state, dataViewName, dataViewId } = res
-      // if (state === 1) {
-      //   // 跳转未发布页
-      //   return { isRelease: false }
-      // }
-      return { ...JSONParse(dataViewContent?.content), id: dataViewId, projectName: dataViewName }
-    // } else {
-    //   console.log('本地读取')
-    //   // 本地读取
-    //   for (let i = 0; i < storageList.length; i++) {
-    //     if (id.toString() === storageList[i]['id']) {
-    //       return storageList[i]
-    //     }
-    //   }
-    // }
+export const getSessionStorageInfo = () => {
+  const urlHash = document.location.hash
+  const toPathArray = urlHash.split('/')
+  const id = toPathArray && toPathArray[toPathArray.length - 1]
+
+  const storageList: ChartEditStorageType[] = getSessionStorage(
+    StorageEnum.GO_CHART_STORAGE_LIST
+  )
+
+  if(!storageList) return
+
+  for (let i = 0; i < storageList.length; i++) {
+    if (id.toString() === storageList[i]['id']) {
+      return storageList[i]
+    }
   }
 }

 <template>
-  <preview :key="key"></preview>
+  <!-- THINGS_KIT 预览时需要异步请求接口 改为异步加载组件 -->
+  <Suspense>
+    <preview :key="key"></preview>
+  </Suspense>
 </template>
 
 <script setup lang="ts">

+import { getDataViewList } from "@/api/external/contentSave/content"
+import { DataViewListRecord } from "@/api/external/contentSave/model/contentModel"
+import { onMounted, Ref } from "vue"
+import { ChartList } from "../../.."
+
+export function useListData(list: Ref<ChartList>) {
+  onMounted(async () => {
+    try {
+      const { items } = await getDataViewList({ page: 1, pageSize: 10 })
+      list.value = items as unknown as ChartList
+    } catch (error) {
+      console.log(error)
+    }
+  })
+}

 import { ref } from 'vue'
 import { goDialog } from '@/utils'
 import { DialogEnum } from '@/enums/pluginEnum'
-// THINGS_KIT
-// import { ChartList } from '../../../index.d'
-// THINGS_KIT
+import { ChartList } from '../../..'
 // 数据初始化
 export const useDataListInit = () => {
-  // const list = ref<ChartList>([
-  //   {
-  //     id: 'b6fab428-80d3-42aa-992c-bc7da5f52489',
-  //     title: '物料1-假数据不可用',
-  //     release: true,
-  //     label: '官方案例'
-  //   },
-  //   {
-  //     id: '9c5e3ace-dd8f-4334-9c7e-607d9f74755c',
-  //     title: '物料2-假数据不可用',
-  //     release: false,
-  //     label: '官方案例'
-  //   },
-  //   {
-  //     id: '427a06cf-ddd5-4239-bf96-3d97ab5bf814',
-  //     title: '物料3-假数据不可用',
-  //     release: false,
-  //     label: '官方案例'
-  //   },
-  //   {
-  //     id: 4,
-  //     title: '物料4-假数据不可用',
-  //     release: false,
-  //     label: '官方案例'
-  //   },
-  //   {
-  //     id: 5,
-  //     title: '物料5-假数据不可用',
-  //     release: false,
-  //     label: '官方案例'
-  //   }
-  // ])
-// THINGS_KIT
+  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)
-    //   }
-    // })
+    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,
+    list,
     deleteHandle
   }
 }

 <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
+      :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>
+        <project-items-card
+          :cardData="item"
+          @resize="resizeHandle"
+          @delete="deleteHandle($event, index)"
+          @edit="editHandle"
+        ></project-items-card>
       </n-grid-item>
     </n-grid>
     <div class="list-pagination">
-      <n-pagination :item-count="10" :page-sizes="[10, 20, 30, 40]" show-size-picker />
+      <n-pagination
+        :item-count="10"
+        :page-sizes="[10, 20, 30, 40]"
+        show-size-picker
+      />
     </div>
   </div>
-  <project-items-modal-card v-if="modalData" :modalShow="modalShow" :cardData="modalData" @close="closeModal"
-    @edit="editHandle"></project-items-modal-card>
+  <project-items-modal-card
+    v-if="modalData"
+    :modalShow="modalShow"
+    :cardData="modalData"
+    @close="closeModal"
+    @edit="editHandle"
+  ></project-items-modal-card>
 </template>
 
 <script setup lang="ts">
@@ -20,42 +38,27 @@ import { ProjectItemsModalCard } from '../ProjectItemsModalCard/index'
 import { icon } from '@/plugins'
 import { useModalDataInit } from './hooks/useModal.hook'
 import { useDataListInit } from './hooks/useData.hook'
-import { getDataViewList } from "@/api/external/contentSave/content";
-import { onMounted, ref } from "vue";
-// THINGS_KIT
-import { ChartList } from '../../index.d'
+import { useListData } from './external/useListData'
 
 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
-const { deleteHandle } = useDataListInit()
+const { list, deleteHandle } = useDataListInit()
 const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit()
 
-// THINGS_KIT
-const list = ref<ChartList>([])
-onMounted(async () => {
-  try {
-    const { items } = await getDataViewList({ page: 1, pageSize: 10 })
-    list.value = items
-  } catch (error) {
-    console.log(error)
-  }
-})
-
+// THINGS_KIT 创建项目列表
+useListData(list)
 </script>
 
 <style lang="scss" scoped>
 $contentHeight: 250px;
-
 @include go('items-list') {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: calc(100vh - #{$--header-height} * 2 - 2px);
-
   .list-content {
     position: relative;
     height: $contentHeight;
   }
-
   .list-pagination {
     display: flex;
     justify-content: flex-end;

 export type Chartype = {
   id: number | string
-  title?: string // 标题
-  label?: string // 标签
-  release?: boolean // 0未发布 | 1已发布
-  name: string // 0未发布 | 1已发布
-  // THINGS_KIT 
-  state: number // 0未发布 | 1已发布
+  title: string // 标题
+  label: string // 标签
+  release: boolean // 0未发布 | 1已发布
 }
 
 export type ChartList = Chartype[]