From e450a029ac3a61c2348b1cef0444db4e0c70e593 Mon Sep 17 00:00:00 2001
From: chenxin <chen.dev@foxmail.com>
Date: Thu, 5 Sep 2024 17:05:55 +0800
Subject: [PATCH] feat: adapt vue3.5 feat

---
 eslint.config.js                              |  1 +
 src/components/common/HelpInfo.vue            |  4 +--
 src/components/common/IconSelect.vue          | 10 +++---
 src/components/common/NovaIcon.vue            |  6 ++--
 src/components/common/Pagination.vue          | 16 +++++-----
 src/components/common/Watermark.vue           | 11 +++----
 src/components/custom/CopyText.vue            |  7 ++--
 .../custom/Editor/MarkDownEditor/index.vue    | 14 ++------
 .../custom/Editor/RichTextEditor/index.vue    | 15 +++++----
 src/hooks/useEcharts.ts                       |  6 ++--
 src/layouts/components/common/NoticeList.vue  |  4 +--
 .../dashboard/monitor/components/chart.vue    |  3 +-
 .../dashboard/monitor/components/chart2.vue   |  3 +-
 .../dashboard/monitor/components/chart3.vue   |  3 +-
 .../dashboard/workbench/components/chart.vue  |  3 +-
 src/views/demo/echarts/index.vue              | 12 +++----
 .../list/commonList/components/TableModal.vue | 32 ++++++++++---------
 .../setting/account/components/TableModal.vue |  8 ++---
 .../dictionary/components/DictModal.vue       | 17 +++++-----
 .../setting/menu/components/TableModal.vue    | 11 ++++---
 20 files changed, 87 insertions(+), 99 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 949c548..fe1f81c 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -11,6 +11,7 @@ export default antfu(
     },
     vue: {
       overrides: {
+        'vue/no-unused-refs': 'off', // 暂时关闭，等待vue-lint的分支合并
         'vue/no-reserved-component-names': 'off',
         'vue/component-definition-name-casing': 'off',
       },
diff --git a/src/components/common/HelpInfo.vue b/src/components/common/HelpInfo.vue
index 41bc443..969ae99 100644
--- a/src/components/common/HelpInfo.vue
+++ b/src/components/common/HelpInfo.vue
@@ -3,7 +3,7 @@ interface Props {
   message: string
 }
 
-const props = defineProps<Props>()
+const { message } = defineProps<Props>()
 </script>
 
 <template>
@@ -11,6 +11,6 @@ const props = defineProps<Props>()
     <template #trigger>
       <icon-park-outline-help class="op-50 cursor-help" />
     </template>
-    {{ props.message }}
+    {{ message }}
   </n-tooltip>
 </template>
diff --git a/src/components/common/IconSelect.vue b/src/components/common/IconSelect.vue
index 543e972..ca37302 100644
--- a/src/components/common/IconSelect.vue
+++ b/src/components/common/IconSelect.vue
@@ -5,9 +5,9 @@ interface Props {
   disabled?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-})
+const {
+  disabled = false,
+} = defineProps<Props>()
 
 interface IconList {
   prefix: string
@@ -125,13 +125,13 @@ function clearIcon() {
 
 <template>
   <n-input-group disabled>
-    <n-button v-if="value" :disabled="props.disabled" type="primary">
+    <n-button v-if="value" :disabled="disabled" type="primary">
       <template #icon>
         <nova-icon :icon="value" />
       </template>
     </n-button>
     <n-input :value="value" readonly :placeholder="$t('components.iconSelector.inputPlaceholder')" />
-    <n-button type="primary" ghost :disabled="props.disabled" @click="showModal = true">
+    <n-button type="primary" ghost :disabled="disabled" @click="showModal = true">
       {{ $t('common.choose') }}
     </n-button>
   </n-input-group>
diff --git a/src/components/common/NovaIcon.vue b/src/components/common/NovaIcon.vue
index d0af924..a19f28a 100644
--- a/src/components/common/NovaIcon.vue
+++ b/src/components/common/NovaIcon.vue
@@ -11,12 +11,10 @@ interface iconPorps {
   /* 图标深度 */
   depth?: 1 | 2 | 3 | 4 | 5
 }
-const props = withDefaults(defineProps<iconPorps>(), {
-  size: 18,
-})
+const { size = 18, icon } = defineProps<iconPorps>()
 
 const isLocal = computed(() => {
-  return props.icon && props.icon.startsWith('local:')
+  return icon && icon.startsWith('local:')
 })
 
 function getLocalIcon(icon: string) {
diff --git a/src/components/common/Pagination.vue b/src/components/common/Pagination.vue
index 768e14e..dc09836 100644
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const props = defineProps({
-  count: {
-    type: Number,
-    default: 0,
-  },
-})
+interface Props {
+  count?: number
+}
+const {
+  count = 0,
+} = defineProps<Props>()
 
 const emit = defineEmits<{
   change: [page: number, pageSize: number] // 具名元组语法
@@ -21,11 +21,11 @@ function changePage() {
 
 <template>
   <n-pagination
-    v-if="props.count > 0"
+    v-if="count > 0"
     v-model:page="page"
     v-model:page-size="pageSize"
     :page-sizes="[10, 20, 30, 50]"
-    :item-count="props.count"
+    :item-count="count"
     :display-order="displayOrder"
     show-size-picker
     @update-page="changePage"
diff --git a/src/components/common/Watermark.vue b/src/components/common/Watermark.vue
index 229ed83..677b757 100644
--- a/src/components/common/Watermark.vue
+++ b/src/components/common/Watermark.vue
@@ -3,16 +3,15 @@ interface Props {
   showWatermark: boolean
   text?: string
 }
-const props = withDefaults(defineProps<Props>(), {
-  showWatermark: false,
-  text: 'Watermark',
-})
+const {
+  text = 'Watermark',
+} = defineProps<Props>()
 </script>
 
 <template>
   <n-watermark
-    v-if="props.showWatermark"
-    :content="props.text"
+    v-if="showWatermark"
+    :content="text"
     cross
     fullscreen
     :font-size="16"
diff --git a/src/components/custom/CopyText.vue b/src/components/custom/CopyText.vue
index cb43076..4ed6ed8 100644
--- a/src/components/custom/CopyText.vue
+++ b/src/components/custom/CopyText.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
+interface Props {
   maxLength?: string
-}>()
+}
+const { maxLength } = defineProps<Props>()
 const modelValue = defineModel<string>('value')
 </script>
 
 <template>
   <div v-if="modelValue" class="inline-flex items-center gap-0.5em">
-    <n-ellipsis :style="{ 'max-width': props.maxLength || '12em' }">
+    <n-ellipsis :style="{ 'max-width': maxLength || '12em' }">
       {{ modelValue }}
     </n-ellipsis>
     <n-tooltip trigger="hover">
diff --git a/src/components/custom/Editor/MarkDownEditor/index.vue b/src/components/custom/Editor/MarkDownEditor/index.vue
index 245f958..65c88c1 100644
--- a/src/components/custom/Editor/MarkDownEditor/index.vue
+++ b/src/components/custom/Editor/MarkDownEditor/index.vue
@@ -7,20 +7,10 @@ import { MdEditor } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 import { useAppStore } from '@/store'
 
-const props = defineProps<{
-  modelValue: string
-}>()
-
-const emit = defineEmits(['update:modelValue'])
+const model = defineModel<string>()
 
 const appStore = useAppStore()
 
-const data = useVModel(props, 'modelValue', emit)
-
-const theme = computed(() => {
-  return appStore.colorMode ? 'dark' : 'light'
-})
-
 const toolbarsExclude: ToolbarNames[] = [
   'mermaid',
   'katex',
@@ -32,7 +22,7 @@ const toolbarsExclude: ToolbarNames[] = [
 
 <template>
   <MdEditor
-    v-model="data" :theme="theme" :toolbars-exclude="toolbarsExclude"
+    v-model="model" :theme="appStore.colorMode" :toolbars-exclude="toolbarsExclude"
   />
 </template>
 
diff --git a/src/components/custom/Editor/RichTextEditor/index.vue b/src/components/custom/Editor/RichTextEditor/index.vue
index 115e554..c46c687 100644
--- a/src/components/custom/Editor/RichTextEditor/index.vue
+++ b/src/components/custom/Editor/RichTextEditor/index.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import Quill from 'quill'
 import 'quill/dist/quill.snow.css'
+import { useTemplateRef } from 'vue'
 
 defineOptions({
   name: 'RichTextEditor',
 })
 
-const props = defineProps<{
+const { disabled } = defineProps<Props>()
+interface Props {
   disabled?: boolean
-}>()
-
+}
 const model = defineModel<string>()
 
 let editorInst = null
@@ -20,7 +21,7 @@ onMounted(() => {
   initEditor()
 })
 
-const editorRef = ref()
+const editorRef = useTemplateRef<HTMLInputElement>('editorRef')
 function initEditor() {
   const options = {
     modules: {
@@ -52,13 +53,13 @@ function initEditor() {
     placeholder: 'Insert text here ...',
     theme: 'snow',
   }
-  const quill = new Quill(editorRef.value, options)
+  const quill = new Quill(editorRef.value!, options)
 
   quill.on('text-change', (_delta, _oldDelta, _source) => {
     editorModel.value = quill.getSemanticHTML()
   })
 
-  if (props.disabled)
+  if (disabled)
     quill.enable(false)
 
   editorInst = quill
@@ -92,7 +93,7 @@ watch(editorModel, (newValue, oldValue) => {
 })
 
 watch(
-  () => props.disabled,
+  () => disabled,
   (newValue, _oldValue) => {
     editorInst!.enable(!newValue)
   },
diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts
index abc54cc..a0661d6 100644
--- a/src/hooks/useEcharts.ts
+++ b/src/hooks/useEcharts.ts
@@ -1,6 +1,6 @@
 import * as echarts from 'echarts/core'
 import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
-
+import { useTemplateRef } from 'vue'
 // 系列类型的定义后缀都为 SeriesOption
 import type {
   BarSeriesOption,
@@ -68,7 +68,9 @@ echarts.use([
  * Echarts hooks函数
  * @description 按需引入图表组件，没注册的组件需要先引入
  */
-export function useEcharts(el: Ref<HTMLElement | null>, chartOptions: Ref<ECOption>) {
+export function useEcharts(ref: string, chartOptions: Ref<ECOption>) {
+  const el = useTemplateRef<HTMLLIElement>(ref)
+
   const appStore = useAppStore()
 
   let chart: echarts.ECharts | null = null
diff --git a/src/layouts/components/common/NoticeList.vue b/src/layouts/components/common/NoticeList.vue
index 026bc1f..1be17d2 100644
--- a/src/layouts/components/common/NoticeList.vue
+++ b/src/layouts/components/common/NoticeList.vue
@@ -2,7 +2,7 @@
 interface Props {
   list?: Entity.Message[]
 }
-const props = defineProps<Props>()
+const { list } = defineProps<Props>()
 
 const emit = defineEmits<Emits>()
 interface Emits {
@@ -13,7 +13,7 @@ interface Emits {
 <template>
   <n-scrollbar style="height: 400px">
     <n-list hoverable clickable>
-      <n-list-item v-for="(item) in props.list" :key="item.id" @click="emit('read', item.id)">
+      <n-list-item v-for="(item) in list" :key="item.id" @click="emit('read', item.id)">
         <n-thing content-indented :class="{ 'opacity-30': item.isRead }">
           <template #header>
             <n-ellipsis :line-clamp="1">
diff --git a/src/views/dashboard/monitor/components/chart.vue b/src/views/dashboard/monitor/components/chart.vue
index 7938410..4a3228b 100644
--- a/src/views/dashboard/monitor/components/chart.vue
+++ b/src/views/dashboard/monitor/components/chart.vue
@@ -114,8 +114,7 @@ const lineOptions = ref<ECOption>({
   }],
 }) as Ref<ECOption>
 
-const lineRef = ref<HTMLElement | null>(null)
-useEcharts(lineRef, lineOptions)
+useEcharts('lineRef', lineOptions)
 </script>
 
 <template>
diff --git a/src/views/dashboard/monitor/components/chart2.vue b/src/views/dashboard/monitor/components/chart2.vue
index f194542..49ce2cc 100644
--- a/src/views/dashboard/monitor/components/chart2.vue
+++ b/src/views/dashboard/monitor/components/chart2.vue
@@ -91,8 +91,7 @@ const option = ref<ECOption>({
   }],
 }) as Ref<ECOption>
 
-const lineRef = ref<HTMLElement | null>(null)
-useEcharts(lineRef, option)
+useEcharts('lineRef', option)
 </script>
 
 <template>
diff --git a/src/views/dashboard/monitor/components/chart3.vue b/src/views/dashboard/monitor/components/chart3.vue
index 4a16ad6..e88c7a7 100644
--- a/src/views/dashboard/monitor/components/chart3.vue
+++ b/src/views/dashboard/monitor/components/chart3.vue
@@ -50,8 +50,7 @@ const option = ref<ECOption>({
   },
   ],
 }) as Ref<ECOption>
-const lineRef = ref<HTMLElement | null>(null)
-useEcharts(lineRef, option)
+useEcharts('lineRef', option)
 </script>
 
 <template>
diff --git a/src/views/dashboard/workbench/components/chart.vue b/src/views/dashboard/workbench/components/chart.vue
index 5e41851..cad75e8 100644
--- a/src/views/dashboard/workbench/components/chart.vue
+++ b/src/views/dashboard/workbench/components/chart.vue
@@ -99,8 +99,7 @@ const lineOptions = ref<ECOption>({
     },
   ],
 }) as Ref<ECOption>
-const lineRef = ref<HTMLElement | null>(null)
-useEcharts(lineRef, lineOptions)
+useEcharts('lineRef', lineOptions)
 </script>
 
 <template>
diff --git a/src/views/demo/echarts/index.vue b/src/views/demo/echarts/index.vue
index d3fbf85..3746456 100644
--- a/src/views/demo/echarts/index.vue
+++ b/src/views/demo/echarts/index.vue
@@ -54,8 +54,7 @@ const pieOptions = ref<ECOption>({
     },
   ],
 })
-const pieRef = ref<HTMLElement | null>(null)
-const { update } = useEcharts(pieRef, pieOptions)
+const { update } = useEcharts('pieRef', pieOptions)
 
 const randomValue = () => Math.round(Math.random() * 100)
 function updatePieChart() {
@@ -266,8 +265,7 @@ const lineOptions = ref<ECOption>({
     },
   ],
 })
-const lineRef = ref<HTMLElement | null>(null)
-useEcharts(lineRef, lineOptions)
+useEcharts('lineRef', lineOptions)
 
 // 柱状图
 const barOptions = ref<ECOption>({
@@ -407,8 +405,7 @@ const barOptions = ref<ECOption>({
     },
   ],
 })
-const barRef = ref<HTMLElement | null>(null)
-useEcharts(barRef, barOptions)
+useEcharts('barRef', barOptions)
 
 // 雷达图
 const radarOptions = ref<ECOption>({
@@ -501,8 +498,7 @@ const radarOptions = ref<ECOption>({
     },
   ],
 })
-const radarRef = ref<HTMLElement | null>(null)
-useEcharts(radarRef, radarOptions)
+useEcharts('radarRef', radarOptions)
 </script>
 
 <template>
diff --git a/src/views/demo/list/commonList/components/TableModal.vue b/src/views/demo/list/commonList/components/TableModal.vue
index 2ac14a4..96d6130 100644
--- a/src/views/demo/list/commonList/components/TableModal.vue
+++ b/src/views/demo/list/commonList/components/TableModal.vue
@@ -1,8 +1,15 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<Props>(), {
-  type: 'add',
-  modalData: null,
-})
+interface Props {
+  visible: boolean
+  type?: ModalType
+  modalData?: any
+}
+const {
+  visible,
+  type = 'add',
+  modalData = null,
+} = defineProps<Props>()
+
 const emit = defineEmits<Emits>()
 const defaultFormModal: Entity.User = {
   userName: '',
@@ -12,18 +19,13 @@ const defaultFormModal: Entity.User = {
 }
 const formModel = ref({ ...defaultFormModal })
 
-interface Props {
-  visible: boolean
-  type?: ModalType
-  modalData?: any
-}
 interface Emits {
   (e: 'update:visible', visible: boolean): void
 }
 
 const modalVisible = computed({
   get() {
-    return props.visible
+    return visible
   },
   set(visible) {
     closeModal(visible)
@@ -38,7 +40,7 @@ const title = computed(() => {
     add: '添加用户',
     edit: '编辑用户',
   }
-  return titles[props.type]
+  return titles[type]
 })
 
 function UpdateFormModelByModalType() {
@@ -47,14 +49,14 @@ function UpdateFormModelByModalType() {
       formModel.value = { ...defaultFormModal }
     },
     edit: () => {
-      if (props.modalData)
-        formModel.value = { ...props.modalData }
+      if (modalData)
+        formModel.value = { ...modalData }
     },
   }
-  handlers[props.type]()
+  handlers[type]()
 }
 watch(
-  () => props.visible,
+  () => visible,
   (newValue) => {
     if (newValue)
       UpdateFormModelByModalType()
diff --git a/src/views/setting/account/components/TableModal.vue b/src/views/setting/account/components/TableModal.vue
index e15c0fc..75944ba 100644
--- a/src/views/setting/account/components/TableModal.vue
+++ b/src/views/setting/account/components/TableModal.vue
@@ -6,9 +6,9 @@ interface Props {
   modalName?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  modalName: '',
-})
+const {
+  modalName = '',
+} = defineProps<Props>()
 
 const emit = defineEmits<{
   open: []
@@ -36,7 +36,7 @@ const modalTitle = computed(() => {
     view: '查看',
     edit: '编辑',
   }
-  return `${titleMap[modalType.value]}${props.modalName}`
+  return `${titleMap[modalType.value]}${modalName}`
 })
 
 async function openModal(type: ModalType = 'add', data: any) {
diff --git a/src/views/setting/dictionary/components/DictModal.vue b/src/views/setting/dictionary/components/DictModal.vue
index 0518ddf..2b545f3 100644
--- a/src/views/setting/dictionary/components/DictModal.vue
+++ b/src/views/setting/dictionary/components/DictModal.vue
@@ -8,10 +8,11 @@ interface Props {
   isRoot?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  modalName: '',
-  isRoot: false,
-})
+const {
+  modalName = '',
+  dictCode,
+  isRoot = false,
+} = defineProps<Props>()
 
 const emit = defineEmits<{
   open: []
@@ -36,7 +37,7 @@ const modalTitle = computed(() => {
     view: '查看',
     edit: '编辑',
   }
-  return `${titleMap[modalType.value]}${props.modalName}`
+  return `${titleMap[modalType.value]}${modalName}`
 })
 
 async function openModal(type: ModalType = 'add', data?: any) {
@@ -47,9 +48,9 @@ async function openModal(type: ModalType = 'add', data?: any) {
     async add() {
       formModel.value = { ...formDefault }
 
-      formModel.value.isRoot = props.isRoot ? 1 : 0
-      if (props.dictCode) {
-        formModel.value.code = props.dictCode
+      formModel.value.isRoot = isRoot ? 1 : 0
+      if (dictCode) {
+        formModel.value.code = dictCode
       }
     },
     async view() {
diff --git a/src/views/setting/menu/components/TableModal.vue b/src/views/setting/menu/components/TableModal.vue
index afc0c61..c0d2bf7 100644
--- a/src/views/setting/menu/components/TableModal.vue
+++ b/src/views/setting/menu/components/TableModal.vue
@@ -12,9 +12,10 @@ interface Props {
   allRoutes: AppRoute.RowRoute[]
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  modalName: '',
-})
+const {
+  modalName = '',
+  allRoutes,
+} = defineProps<Props>()
 
 const emit = defineEmits<{
   open: []
@@ -47,7 +48,7 @@ const modalTitle = computed(() => {
     view: '查看',
     edit: '编辑',
   }
-  return `${titleMap[modalType.value]}${props.modalName}`
+  return `${titleMap[modalType.value]}${modalName}`
 })
 
 async function openModal(type: ModalType = 'add', data: AppRoute.RowRoute) {
@@ -112,7 +113,7 @@ async function submitModal() {
 }
 
 const dirTreeOptions = computed(() => {
-  return filterDirectory(JSON.parse(JSON.stringify(props.allRoutes)))
+  return filterDirectory(JSON.parse(JSON.stringify(allRoutes)))
 })
 
 function filterDirectory(node: any[]) {