feat: adapt vue3.5 feat

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',
       },

src/components/common/HelpInfo.vue

@@ -3,14 +3,14 @@ interface Props {
   message: string
 }
 
-const props = defineProps<Props>()
+const { message } = defineProps<Props>()
 </script>
 
 <template>
   <n-tooltip :show-arrow="false" trigger="hover">
     <template #trigger>
       <icon-park-outline-help class="op-50 cursor-help" />
     </template>
-    {{ props.message }}
+    {{ message }}
   </n-tooltip>
 </template>

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>

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) {

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"

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"

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">

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>
 

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)
   },

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

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">

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>

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>

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>

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>

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>