From 448f3ba494a9ecc1a80d275a29b9a6dfbd3cb217 Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Tue, 4 Jun 2024 20:43:09 +0800
Subject: [PATCH] fix: perfect hooks

---
 service.config.ts                             |  6 +--
 src/hooks/index.ts                            |  1 +
 src/hooks/refForm.ts                          | 15 ++++++
 src/hooks/useEcharts.ts                       | 53 ++++++-------------
 .../dashboard/monitor/components/chart.vue    |  4 +-
 .../dashboard/monitor/components/chart2.vue   |  4 +-
 .../dashboard/monitor/components/chart3.vue   |  3 +-
 .../dashboard/workbench/components/chart.vue  |  3 +-
 src/views/demo/echarts/index.vue              | 13 +++--
 .../setting/account/components/TableModal.vue | 19 +++----
 src/views/setting/account/index.vue           |  2 +-
 .../setting/menu/components/TableModal.vue    | 19 +++----
 12 files changed, 76 insertions(+), 66 deletions(-)
 create mode 100644 src/hooks/refForm.ts

diff --git a/service.config.ts b/service.config.ts
index 86b60a6..037d48e 100644
--- a/service.config.ts
+++ b/service.config.ts
@@ -1,12 +1,12 @@
 /** 不同请求服务的环境配置 */
 export const serviceConfig: Record<ServiceEnvType, Record<string, string>> = {
   dev: {
-    url: 'https://mock.apifox.com/m1/4071143-0-default',
+    url: 'https://mock.apifox.cn/m1/4071143-0-default',
   },
   test: {
-    url: 'https://mock.apifox.com/m1/4071143-0-default',
+    url: 'https://mock.apifox.cn/m1/4071143-0-default',
   },
   prod: {
-    url: 'https://mock.apifox.com/m1/4071143-0-default',
+    url: 'https://mock.apifox.cn/m1/4071143-0-default',
   },
 }
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index c42edf9..e601b77 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './useBoolean'
 export * from './useEcharts'
 export * from './usePermission'
+export * from './refForm'
diff --git a/src/hooks/refForm.ts b/src/hooks/refForm.ts
new file mode 100644
index 0000000..a7f925c
--- /dev/null
+++ b/src/hooks/refForm.ts
@@ -0,0 +1,15 @@
+export function refForm<T>(initValue: T) {
+  function jsonClone(value: T) {
+    return JSON.parse(JSON.stringify(value))
+  }
+  const target = ref<T>(initValue)
+
+  function setDefault() {
+    target.value = jsonClone(initValue)
+  }
+
+  return {
+    target,
+    setDefault,
+  }
+}
diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts
index 715fb24..04de3ef 100644
--- a/src/hooks/useEcharts.ts
+++ b/src/hooks/useEcharts.ts
@@ -66,73 +66,54 @@ echarts.use([
 
 /**
  * Echarts hooks函数
- * @param options - 图表配置
  * @description 按需引入图表组件，没注册的组件需要先引入
  */
-export function useEcharts(options: Ref<ECOption>) {
+export function useEcharts(el: Ref<HTMLElement | null>, chartOptions: Ref<ECOption>) {
   const appStore = useAppStore()
 
-  const domRef = ref<HTMLElement>()
-
   let chart: echarts.ECharts | null = null
 
-  const initialSize = { width: 0, height: 0 }
-  const { width, height } = useElementSize(domRef, initialSize)
+  const { width, height } = useElementSize(el)
 
-  function canRender() {
-    return initialSize.width > 0 && initialSize.height > 0
-  }
+  const isRendered = computed(() => Boolean(el && chart))
 
-  function isRendered() {
-    return Boolean(domRef.value && chart)
-  }
   async function render() {
     const chartTheme = appStore.colorMode ? 'dark' : 'light'
     await nextTick()
-    if (domRef.value) {
-      chart = echarts.init(domRef.value, chartTheme)
-      update(options.value)
+    if (el) {
+      chart = echarts.init(el.value, chartTheme)
+      update(chartOptions.value)
     }
   }
 
   function update(updateOptions: ECOption) {
-    if (isRendered())
+    if (isRendered.value)
       chart!.setOption({ ...updateOptions, backgroundColor: 'transparent' })
   }
 
-  function resize() {
-    chart?.resize()
-  }
-
   function destroy() {
     chart?.dispose()
     chart = null
   }
-  const sizeWatch = watch([width, height], async ([newWidth, newHeight]) => {
-    initialSize.width = newWidth
-    initialSize.height = newHeight
-    if (newWidth === 0 && newHeight === 0) {
-      // 节点被删除 将chart置为空
-      chart = null
-    }
-    if (!canRender())
-      return
-    if (isRendered())
-      resize()
-    else await render()
+
+  watch([width, height], async ([newWidth, newHeight]) => {
+    if (isRendered.value && newWidth && newHeight)
+      chart?.resize()
   })
 
-  const OptionWatch = watch(options, (newValue) => {
+  watch(chartOptions, (newValue) => {
     update(newValue)
   })
 
+  onMounted(() => {
+    render()
+  })
   onUnmounted(() => {
-    sizeWatch()
-    OptionWatch()
     destroy()
   })
 
   return {
-    domRef,
+    destroy,
+    update,
   }
 }
diff --git a/src/views/dashboard/monitor/components/chart.vue b/src/views/dashboard/monitor/components/chart.vue
index 72911a7..7938410 100644
--- a/src/views/dashboard/monitor/components/chart.vue
+++ b/src/views/dashboard/monitor/components/chart.vue
@@ -113,7 +113,9 @@ const lineOptions = ref<ECOption>({
     data: [20, 71, 8, 50, 57, 32],
   }],
 }) as Ref<ECOption>
-const { domRef: lineRef } = useEcharts(lineOptions)
+
+const lineRef = ref<HTMLElement | null>(null)
+useEcharts(lineRef, lineOptions)
 </script>
 
 <template>
diff --git a/src/views/dashboard/monitor/components/chart2.vue b/src/views/dashboard/monitor/components/chart2.vue
index e16ed50..f194542 100644
--- a/src/views/dashboard/monitor/components/chart2.vue
+++ b/src/views/dashboard/monitor/components/chart2.vue
@@ -90,7 +90,9 @@ const option = ref<ECOption>({
     },
   }],
 }) as Ref<ECOption>
-const { domRef: lineRef } = useEcharts(option)
+
+const lineRef = ref<HTMLElement | null>(null)
+useEcharts(lineRef, option)
 </script>
 
 <template>
diff --git a/src/views/dashboard/monitor/components/chart3.vue b/src/views/dashboard/monitor/components/chart3.vue
index 0bc6bd2..4a16ad6 100644
--- a/src/views/dashboard/monitor/components/chart3.vue
+++ b/src/views/dashboard/monitor/components/chart3.vue
@@ -50,7 +50,8 @@ const option = ref<ECOption>({
   },
   ],
 }) as Ref<ECOption>
-const { domRef: lineRef } = useEcharts(option)
+const lineRef = ref<HTMLElement | null>(null)
+useEcharts(lineRef, option)
 </script>
 
 <template>
diff --git a/src/views/dashboard/workbench/components/chart.vue b/src/views/dashboard/workbench/components/chart.vue
index ddb6f4c..5e41851 100644
--- a/src/views/dashboard/workbench/components/chart.vue
+++ b/src/views/dashboard/workbench/components/chart.vue
@@ -99,7 +99,8 @@ const lineOptions = ref<ECOption>({
     },
   ],
 }) as Ref<ECOption>
-const { domRef: lineRef } = useEcharts(lineOptions)
+const lineRef = ref<HTMLElement | null>(null)
+useEcharts(lineRef, lineOptions)
 </script>
 
 <template>
diff --git a/src/views/demo/echarts/index.vue b/src/views/demo/echarts/index.vue
index d8ebd78..85c4f8d 100644
--- a/src/views/demo/echarts/index.vue
+++ b/src/views/demo/echarts/index.vue
@@ -54,7 +54,8 @@ const pieOptions = ref<ECOption>({
     },
   ],
 }) as Ref<ECOption>
-const { domRef: pieRef } = useEcharts(pieOptions)
+const pieRef = ref<HTMLElement | null>(null)
+useEcharts(pieRef, pieOptions)
 
 // 折线图
 const lineOptions = ref<ECOption>({
@@ -245,7 +246,8 @@ const lineOptions = ref<ECOption>({
     },
   ],
 }) as Ref<ECOption>
-const { domRef: lineRef } = useEcharts(lineOptions)
+const lineRef = ref<HTMLElement | null>(null)
+useEcharts(lineRef, lineOptions)
 
 // 柱状图
 const barOptions = ref<ECOption>({
@@ -385,7 +387,9 @@ const barOptions = ref<ECOption>({
     },
   ],
 }) as Ref<ECOption>
-const { domRef: barRef } = useEcharts(barOptions)
+const barRef = ref<HTMLElement | null>(null)
+useEcharts(barRef, barOptions)
+
 // 雷达图
 const radarOptions = ref<ECOption>({
   title: {
@@ -477,7 +481,8 @@ const radarOptions = ref<ECOption>({
     },
   ],
 }) as Ref<ECOption>
-const { domRef: radarRef } = useEcharts(radarOptions)
+const radarRef = ref<HTMLElement | null>(null)
+useEcharts(radarRef, radarOptions)
 </script>
 
 <template>
diff --git a/src/views/setting/account/components/TableModal.vue b/src/views/setting/account/components/TableModal.vue
index be1c442..9caf724 100644
--- a/src/views/setting/account/components/TableModal.vue
+++ b/src/views/setting/account/components/TableModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useBoolean } from '@/hooks'
+import { refForm, useBoolean } from '@/hooks'
 import { fetchRoleList } from '@/service'
 
 interface Props {
@@ -19,15 +19,14 @@ const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoo
 
 const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
 
-const formModel = ref()
-const defaultFormModal: Entity.User = {
+const { target: formModel, setDefault } = refForm<Entity.User>({
   userName: '',
   gender: undefined,
   email: '',
   tel: '',
   role: [],
   status: 1,
-}
+})
 
 type ModalType = 'add' | 'view' | 'edit'
 const modalType = shallowRef<ModalType>('add')
@@ -47,15 +46,17 @@ async function openModal(type: ModalType = 'add', data: any) {
   getRoleList()
   const handlers = {
     async add() {
-      formModel.value = { ...defaultFormModal }
+      setDefault()
     },
     async view() {
-      if (data)
-        formModel.value = { ...data }
+      if (!data)
+        return
+      formModel.value = { ...data }
     },
     async edit() {
-      if (data)
-        formModel.value = { ...data }
+      if (!data)
+        return
+      formModel.value = { ...data }
     },
   }
   await handlers[type]()
diff --git a/src/views/setting/account/index.vue b/src/views/setting/account/index.vue
index d94372f..8026f6d 100644
--- a/src/views/setting/account/index.vue
+++ b/src/views/setting/account/index.vue
@@ -162,7 +162,7 @@ const treeData = ref([
 
 <template>
   <n-flex>
-    <n-card class="w-60">
+    <n-card class="w-70">
       <n-tree
         block-line
         :data="treeData"
diff --git a/src/views/setting/menu/components/TableModal.vue b/src/views/setting/menu/components/TableModal.vue
index 19e9ad0..3f8fd8f 100644
--- a/src/views/setting/menu/components/TableModal.vue
+++ b/src/views/setting/menu/components/TableModal.vue
@@ -3,7 +3,7 @@ import type {
   FormItemRule,
 } from 'naive-ui'
 import HelpInfo from '@/components/common/HelpInfo.vue'
-import { useBoolean } from '@/hooks'
+import { refForm, useBoolean } from '@/hooks'
 import { Regex } from '@/constants'
 import { fetchRoleList } from '@/service'
 
@@ -24,7 +24,7 @@ const emit = defineEmits<{
 const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoolean(false)
 const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
 
-const defaultFormModal: AppRoute.RowRoute = {
+const { target: formModel, setDefault } = refForm<AppRoute.RowRoute>({
   'name': '',
   'path': '',
   'id': -1,
@@ -41,8 +41,7 @@ const defaultFormModal: AppRoute.RowRoute = {
   'meta.withoutTab': true,
   'meta.pinTab': false,
   'meta.menuType': 'page',
-}
-const formModel = ref()
+})
 
 type ModalType = 'add' | 'view' | 'edit'
 const modalType = shallowRef<ModalType>('add')
@@ -62,15 +61,17 @@ async function openModal(type: ModalType = 'add', data: AppRoute.RowRoute) {
   showModal()
   const handlers = {
     async add() {
-      formModel.value = { ...defaultFormModal }
+      setDefault()
     },
     async view() {
-      if (data)
-        formModel.value = { ...data }
+      if (!data)
+        return
+      formModel.value = { ...data }
     },
     async edit() {
-      if (data)
-        formModel.value = { ...data }
+      if (!data)
+        return
+      formModel.value = { ...data }
     },
   }
   await handlers[type]()