refactor: 更换 ESLint 配置为 @antfu/eslint-config

src/components/Breadcrumb/index.vue

@@ -13,8 +13,8 @@
 
 <script lang="ts" setup>
 import type { RouteLocationMatched } from 'vue-router'
-import { useRouteStore } from '@/stores'
 import { findTree } from 'xe-utils'
+import { useRouteStore } from '@/stores'
 
 const route = useRoute()
 const router = useRouter()

src/components/GiCell/GiCellAvatar.vue

@@ -11,12 +11,6 @@
 <script lang="ts" setup>
 defineOptions({ name: 'GiCellAvatar' })
 
-interface Props {
-  avatar: string
-  name: string
-  isLink?: boolean
-}
-
 const props = withDefaults(defineProps<Props>(), {
   avatar: '',
   name: '',
@@ -26,6 +20,12 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   (e: 'click'): void
 }>()
+
+interface Props {
+  avatar: string
+  name: string
+  isLink?: boolean
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/GiCell/GiCellGender.vue

@@ -15,13 +15,13 @@
 <script lang="ts" setup>
 defineOptions({ name: 'GiCellGender' })
 
-interface Props {
-  gender: 1 | 2 | 0
-}
-
 const props = withDefaults(defineProps<Props>(), {
   gender: 1
 })
+
+interface Props {
+  gender: 1 | 2 | 0
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/GiCell/GiCellStatus.vue

@@ -12,13 +12,13 @@
 <script lang="ts" setup>
 defineOptions({ name: 'GiCellStatus' })
 
-interface Props {
-  status: 0 | 1
-}
-
 const props = withDefaults(defineProps<Props>(), {
   status: 1
 })
+
+interface Props {
+  status: 0 | 1
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/GiCell/GiCellTags.vue

@@ -21,13 +21,13 @@
 <script lang="ts" setup>
 defineOptions({ name: 'GiCellTags' })
 
-interface Props {
-  data: string[]
-}
-
 withDefaults(defineProps<Props>(), {
   data: () => []
 })
+
+interface Props {
+  data: string[]
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/GiCodeView/index.vue

@@ -17,6 +17,10 @@ import { githubLight } from '@ddietr/codemirror-themes/github-light'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { useAppStore } from '@/stores'
 
+const props = withDefaults(defineProps<Props>(), {
+  type: 'javascript',
+  codeJson: ''
+})
 const appStore = useAppStore()
 const isDark = computed(() => appStore.theme === 'dark')
 
@@ -24,11 +28,6 @@ interface Props {
   type?: 'javascript' | 'vue'
   codeJson: string
 }
-const props = withDefaults(defineProps<Props>(), {
-  type: 'javascript',
-  codeJson: ''
-})
-
 const defaultConfig = {
   tabSize: 2,
   basic: true,

src/components/GiDot/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, type PropType } from 'vue'
+import { type PropType, defineComponent } from 'vue'
 import './dot.scss'
 
 type TPropsType = 'primary' | 'success' | 'warning' | 'danger' | 'info'

src/components/GiFlexibleBox/index.vue

@@ -9,22 +9,22 @@ import type { CSSProperties } from 'vue'
 
 defineOptions({ name: 'GiFlexibleBox' })
 
-interface Props {
-  modelValue: boolean
-  direction: 'left' | 'right'
-}
-
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
   direction: 'right'
 })
 
+interface Props {
+  modelValue: boolean
+  direction: 'left' | 'right'
+}
+
 const BoxRef = ref<HTMLElement | null>()
 
 const style = computed(() => {
   const obj: CSSProperties = {}
-  obj[`margin-${props.direction}`] =
-    !props.modelValue && BoxRef.value && BoxRef.value.clientWidth ? `-${BoxRef.value.clientWidth}px` : 0
+  obj[`margin-${props.direction}`]
+    = !props.modelValue && BoxRef.value && BoxRef.value.clientWidth ? `-${BoxRef.value.clientWidth}px` : 0
   return obj
 })
 </script>

src/components/GiFooter/index.vue

@@ -5,9 +5,9 @@
 <script lang="ts" setup>
 import { useAppStore } from '@/stores'
 
-const appStore = useAppStore()
-
 defineOptions({ name: 'GiFooter' })
+
+const appStore = useAppStore()
 </script>
 
 <style lang="scss" scoped>

src/components/GiForm/src/GiForm.vue

@@ -104,7 +104,7 @@
 
               <template v-if="item.type === 'date-picker'">
                 <a-date-picker
-                  :placeholder="`请选择日期`"
+                  placeholder="请选择日期"
                   v-bind="(item.props as A.DatePickerInstance['$props'])"
                   :model-value="modelValue[item.field as keyof typeof modelValue]"
                   @update:model-value="valueChange($event, item.field)"
@@ -113,7 +113,7 @@
 
               <template v-if="item.type === 'time-picker'">
                 <a-time-picker
-                  :placeholder="`请选择时间`"
+                  placeholder="请选择时间"
                   v-bind="(item.props as A.TimePickerInstance['$props'])"
                   :model-value="modelValue[item.field as keyof typeof modelValue]"
                   @update:model-value="valueChange($event, item.field)"
@@ -171,9 +171,9 @@
 </template>
 
 <script setup lang="ts">
-import type { Options, Columns, ColumnsItemHide, ColumnsItemDisabled, ColumnsItem } from './type'
 import type * as A from '@arco-design/web-vue'
 import { cloneDeep } from 'lodash-es'
+import type { Columns, ColumnsItem, ColumnsItemDisabled, ColumnsItemHide, Options } from './type'
 
 interface Props {
   modelValue: any

src/components/GiForm/src/hooks.ts

@@ -1,7 +1,7 @@
 import { reactive } from 'vue'
 import { cloneDeep } from 'lodash-es'
-import type { Columns, ColumnsItem, ColumnsItemPropsKey } from './type'
 import { Message } from '@arco-design/web-vue'
+import type { Columns, ColumnsItem, ColumnsItemPropsKey } from './type'
 
 export function useGiForm(initValue: Columns) {
   const getInitValue = () => cloneDeep(initValue)

src/components/GiForm/src/type.ts

@@ -36,11 +36,11 @@ export type ColumnsItemRequest<F = any> = (form: F) => Promise<any>
 export type ColumnsItemFormat<T = any> = (
   res: T
 ) =>
-  | A.SelectInstance['$props']['options']
-  | A.RadioGroupInstance['$props']['options']
-  | A.CheckboxGroupInstance['$props']['options']
-  | A.CascaderInstance['$props']['options']
-  | A.TreeSelectInstance['$props']['data']
+| A.SelectInstance['$props']['options']
+| A.RadioGroupInstance['$props']['options']
+| A.CheckboxGroupInstance['$props']['options']
+| A.CascaderInstance['$props']['options']
+| A.TreeSelectInstance['$props']['data']
 
 export type ColumnsItemOptionsOrData =
   | A.SelectInstance['$props']['options']
@@ -91,8 +91,8 @@ export interface Options {
   form: Omit<A.FormInstance['$props'], 'model'>
   row?: Partial<typeof import('@arco-design/web-vue')['Row']['__defaults']>
   col?: A.ColProps
-  btns?: { hide?: boolean; span?: number; col?: A.ColProps; searchBtnText?: string }
-  fold?: { enable?: boolean; index?: number; defaultCollapsed?: boolean }
+  btns?: { hide?: boolean, span?: number, col?: A.ColProps, searchBtnText?: string }
+  fold?: { enable?: boolean, index?: number, defaultCollapsed?: boolean }
 }
 
 export type Columns<F = any> = ColumnsItem<F>[]

src/components/GiIconSelector/index.vue

@@ -55,7 +55,7 @@
         <a-row justify="center" align="center">
           <a-pagination
             size="mini"
-            :pageSize="pageSize"
+            :page-size="pageSize"
             :total="total"
             :show-size-changer="false"
             @change="onPageChange"
@@ -69,22 +69,24 @@
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
 import { Message } from '@arco-design/web-vue'
-// 自定义图标模块
-const SvgIconModules = import.meta.glob('@/assets/icons/*.svg')
 
 defineOptions({ name: 'GiIconSelector' })
-const emit = defineEmits(['select', 'update:modelValue'])
-
-interface Props {
-  modelValue?: string
-  enableCopy?: boolean
-}
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: '',
   enableCopy: false
 })
 
+const emit = defineEmits(['select', 'update:modelValue'])
+
+// 自定义图标模块
+const SvgIconModules = import.meta.glob('@/assets/icons/*.svg')
+
+interface Props {
+  modelValue?: string
+  enableCopy?: boolean
+}
+
 const searchValue = ref('') // 搜索词
 
 // 图标列表

src/components/GiOptionItem/index.vue

@@ -21,13 +21,6 @@
 <script setup lang="ts">
 defineOptions({ name: 'GiOptionItem' })
 
-interface Props {
-  icon?: string
-  label?: string
-  more?: boolean
-  active?: boolean
-}
-
 const props = withDefaults(defineProps<Props>(), {
   icon: '',
   label: '',
@@ -39,6 +32,13 @@ const emit = defineEmits<{
   (e: 'click'): void
 }>()
 
+interface Props {
+  icon?: string
+  label?: string
+  more?: boolean
+  active?: boolean
+}
+
 const handleClick = () => {
   emit('click')
 }

src/components/GiOverFlowTags/index.vue

@@ -21,12 +21,12 @@
 <script lang="ts" setup>
 defineOptions({ name: 'GiOverFlowTags' })
 
-interface Props {
-  data: string[]
-}
 withDefaults(defineProps<Props>(), {
   data: () => []
 })
+interface Props {
+  data: string[]
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/GiSvgIcon/index.vue

@@ -3,7 +3,7 @@
     aria-hidden="true"
     :class="svgClass"
     v-bind="$attrs"
-    :style="{ color: color, fill: color, width: iconSize, height: iconSize }"
+    :style="{ color, fill: color, width: iconSize, height: iconSize }"
   >
     <use :xlink:href="iconName"></use>
   </svg>
@@ -12,21 +12,21 @@
 <script setup lang="ts">
 defineOptions({ name: 'GiSvgIcon' })
 
-interface Props {
-  name: string
-  color?: string
-  size?: string | number
-}
-
 const props = withDefaults(defineProps<Props>(), {
   name: '',
   color: '',
   size: 20
 })
 
+interface Props {
+  name: string
+  color?: string
+  size?: string | number
+}
+
 // 判断传入的值，是否带有单位，如果没有，就默认用px单位
 const getUnitValue = (value: string | number): string | number => {
-  return /(px|em|rem|%)$/.test(value.toString()) ? value : value + 'px'
+  return /(px|em|rem|%)$/.test(value.toString()) ? value : `${value}px`
 }
 
 const iconSize = computed<string | number>(() => {

src/components/GiTable/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="giTableRef" class="gi-table" :class="{ 'gi-table--fullscreen': isFullscreen }">
+  <div class="gi-table" :class="{ 'gi-table--fullscreen': isFullscreen }">
     <a-row justify="space-between" align="center" class="gi-table__toolbar">
       <a-space wrap class="gi-table__toolbar-left" :size="[8, 8]">
         <slot name="custom-left"></slot>
@@ -18,9 +18,11 @@
             </a-button>
           </a-tooltip>
           <template #content>
-            <a-doption v-for="item in sizeList" :key="item.value" :value="item.value" :active="item.value === size">{{
+            <a-doption v-for="item in sizeList" :key="item.value" :value="item.value" :active="item.value === size">
+{{
               item.label
-            }}</a-doption>
+            }}
+</a-doption>
           </template>
         </a-dropdown>
         <a-popover
@@ -38,7 +40,7 @@
           </a-tooltip>
           <template #content>
             <div class="gi-table__draggable">
-              <VueDraggable ref="el" v-model="settingColumnList">
+              <VueDraggable v-model="settingColumnList">
                 <div v-for="item in settingColumnList" :key="item.title" class="drag-item">
                   <div class="drag-item__move"><icon-drag-dot-vertical /></div>
                   <a-checkbox v-model:model-value="item.show" :disabled="item.disabled">{{ item.title }}</a-checkbox>
@@ -73,17 +75,23 @@
         v-bind="{ ...attrs, columns: _columns }"
       >
         <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
-          <slot :key="key" :name="key" v-bind="scoped"></slot> </template
-      ></a-table>
+          <slot :key="key" :name="key" v-bind="scoped"></slot>
+        </template>
+      </a-table>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { TableInstance, TableColumnData, DropdownInstance } from '@arco-design/web-vue'
+import type { DropdownInstance, TableColumnData, TableInstance } from '@arco-design/web-vue'
 import { VueDraggable } from 'vue-draggable-plus'
 
 defineOptions({ name: 'GiTable', inheritAttrs: false })
+const props = withDefaults(defineProps<Props>(), {
+  disabledTools: () => [], // 禁止显示的工具
+  disabledColumnKeys: () => [] // 禁止控制显示隐藏的列
+})
+
 const emit = defineEmits<{
   (e: 'refresh'): void
 }>()
@@ -96,18 +104,13 @@ interface Props {
   disabledColumnKeys?: string[]
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  disabledTools: () => [], // 禁止显示的工具
-  disabledColumnKeys: () => [] // 禁止控制显示隐藏的列
-})
-
 const tableRef = ref<TableInstance | null>(null)
 const stripe = ref(false)
 const size = ref<TableInstance['size']>('medium')
 const isBordered = ref(false)
 const isFullscreen = ref(false)
 
-type SizeItem = { label: string; value: TableInstance['size'] }
+type SizeItem = { label: string, value: TableInstance['size'] }
 const sizeList: SizeItem[] = [
   { label: '紧凑', value: 'small' },
   { label: '默认', value: 'medium' }
@@ -127,7 +130,7 @@ const showFullscreenBtn = computed(() => !props.disabledTools.includes('fullscre
 const showSettingColumnBtn = computed(
   () => !props.disabledTools.includes('setting') && attrs?.columns && (attrs?.columns as TableColumnData[])?.length
 )
-type SettingColumnItem = { title: string; key: string; show: boolean; disabled: boolean }
+type SettingColumnItem = { title: string, key: string, show: boolean, disabled: boolean }
 const settingColumnList = ref<SettingColumnItem[]>([])
 
 // 重置配置列

src/components/GiTag/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, computed, type PropType } from 'vue'
+import { type PropType, computed, defineComponent } from 'vue'
 import './tag.scss'
 
 type TPropsType = 'dark' | 'light' | 'outline' | 'light-outline'

src/components/JsonPretty/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="json_pretty_container">
-    <VueJsonPretty :path="'res'" :data="JSONObject" :show-length="true" />
+    <VueJsonPretty path="res" :data="JSONObject" :show-length="true" />
     <icon-copy class="copy_icon" @click="onCopy(JSONObject)" />
   </div>
 </template>

src/components/TextCopy/index.vue

@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { Message } from '@arco-design/web-vue'
+
 interface Props {
   value: any
 }