chore: 优化 ESLint 配置并更正问题代码（eslint src --fix）

.eslintrc.cjs

@@ -26,6 +26,7 @@ module.exports = {
   extends: [
     'eslint:recommended', // 比如: 函数不能重名、对象不能出现重复key
     'plugin:vue/vue3-essential', // vue3语法规则
+    'plugin:vue/vue3-recommended',
     '@vue/eslint-config-typescript/recommended', // ts语法规则
     '@vue/eslint-config-prettier'
   ],
@@ -57,6 +58,11 @@ module.exports = {
     'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
     'vue/no-mutating-props': 'off', // 不允许组件 prop 的改变
     'vue/no-reserved-component-names': 'off', // 不允许在组件定义中使用保留名称
-    'vue/attribute-hyphenation': 'off' // 对模板中的自定义组件强制执行属性命名样式
+    'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
+
+    'vue/padding-line-between-blocks': [2, 'always'], // 模板 template script style 之间空一行
+    'vue/component-name-in-template-casing': [2, 'PascalCase'], // 模板中的自定义组件名采用PascalCase方式
+    'vue/custom-event-name-casing': [2, 'kebab-case'], // emit事件名采用kebab-case方式
+    'vue/v-on-event-hyphenation': [1, 'always', { autofix: true }] // 组件事件名采用@kebab-case方式
   }
 }

src/components/GiForm/src/GiForm.vue

@@ -4,9 +4,9 @@
       <template v-for="(item, index) in columns" :key="item.field">
         <a-col
           v-if="!isHide(item.hide)"
+          v-show="index <= (options.fold?.index || 0) || (index >= (options.fold?.index || 0) && !collapsed)"
           :span="item.span || 12"
           v-bind="item.col || item.span ? item.col : options.col"
-          v-show="index <= (options.fold?.index || 0) || (index >= (options.fold?.index || 0) && !collapsed)"
         >
           <a-form-item
             v-bind="item.item"
@@ -148,7 +148,7 @@
           </a-form-item>
         </a-col>
       </template>
-      <a-col :span="options.btns?.span || 12" v-bind="options.btns?.col" v-if="!options.btns?.hide">
+      <a-col v-if="!options.btns?.hide" :span="options.btns?.span || 12" v-bind="options.btns?.col">
         <a-space wrap>
           <slot name="suffix">
             <a-button type="primary" @click="emit('search')">

src/components/GiIconSelector/index.vue

@@ -43,7 +43,7 @@
 
         <section class="icon-list">
           <a-row wrap :gutter="4">
-            <a-col :span="isGridView ? 4 : 8" v-for="item of currentPageIconList" :key="item">
+            <a-col v-for="item of currentPageIconList" :key="item" :span="isGridView ? 4 : 8">
               <div class="icon-item" :class="{ active: modelValue === item }" @click="handleSelectedIcon(item)">
                 <GiSvgIcon :name="item" :size="20"></GiSvgIcon>
                 <div class="gi_line_1 icon-name">{{ item }}</div>

src/components/GiTable/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="gi-table" :class="{ 'gi-table--fullscreen': isFullscreen }" ref="giTableRef">
+  <div ref="giTableRef" 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>

src/components/JsonPretty/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="json_pretty_container">
-    <vue-json-pretty :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

@@ -3,6 +3,7 @@
     <icon-copy :size="16" @click="copyText" />
   </div>
 </template>
+
 <script setup lang="ts">
 import { Message } from '@arco-design/web-vue'
 interface Props {
@@ -19,6 +20,7 @@ const copyText = () => {
   Message.success('复制成功')
 }
 </script>
+
 <style scoped lang="scss">
 .content {
   display: inline-block;

src/layout/components/HeaderRightBar/SettingDrawer.vue

@@ -36,7 +36,7 @@
           :color="appStore.themeColor"
           :sucker-hide="true"
           :colors-default="defaultColorList"
-          @changeColor="changeColor"
+          @change-color="changeColor"
         ></ColorPicker>
       </a-row>
 

src/layout/components/HeaderRightBar/index.vue

@@ -28,8 +28,8 @@
       <a-tooltip v-if="!isMobile()" content="全屏切换" position="bottom">
         <a-button size="mini" class="gi_hover_btn" @click="toggle">
           <template #icon>
-            <icon-fullscreen :size="18" v-if="!isFullscreen" />
+            <icon-fullscreen v-if="!isFullscreen" :size="18" />
-            <icon-fullscreen-exit :size="18" v-else />
+            <icon-fullscreen-exit v-else :size="18" />
           </template>
         </a-button>
       </a-tooltip>

src/layout/components/Menu/index.vue

@@ -7,9 +7,9 @@
     :breakpoint="appStore.layout === 'mix' ? 'xl' : undefined"
     :trigger-props="{ animationName: 'slide-dynamic-origin' }"
     :collapsed="!isDesktop ? false : appStore.menuCollapse"
+    :style="menuStyle"
     @menu-item-click="onMenuItemClick"
     @collapse="onCollapse"
-    :style="menuStyle"
   >
     <MenuItem v-for="(route, index) in sidebarRoutes" :key="route.path + index" :item="route"></MenuItem>
   </a-menu>

src/layout/components/Tabs/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tabs" v-if="appStore.tab">
+  <div v-if="appStore.tab" class="tabs">
     <a-tabs
       editable
       hide-content

src/views/default/error/components/ErrorPage.vue

@@ -2,7 +2,7 @@
   <div class="error-page">
     <section class="error__container">
       <div class="error__img">
-        <component class="error__icon" :is="IconMap[props.code]"></component>
+        <component :is="IconMap[props.code]" class="error__icon"></component>
       </div>
 
       <div class="error__tip">

src/views/home/components/NowTime/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="now-time" v-if="time">
+  <div v-if="time" class="now-time">
     <p class="now-time__time gi_line_1">{{ time }}</p>
   </div>
 </template>

src/views/home/components/ProjectCard.vue

@@ -1,7 +1,7 @@
 <template>
   <a-card title="项目" :bordered="false" size="medium" class="gi_card_title" style="overflow: hidden">
     <a-row align="stretch">
-      <a-col :xs="12" :sm="8" :md="8" v-for="(item, index) in list" :key="item.name">
+      <a-col v-for="(item, index) in list" :key="item.name" :xs="12" :sm="8" :md="8">
         <a-card-grid class="w-full h-full">
           <a-card :bordered="false" hoverable :class="'animated-fade-up-' + index">
             <a :href="item.url" target="_blank">

src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="gi_page home" id="home">
+  <div id="home" class="gi_page home">
     <WorkCard />
 
     <a-alert>

src/views/login/index.vue

@@ -14,13 +14,13 @@
       </a-col>
       <a-col :xs="24" :sm="12" :md="11">
         <div class="login-right">
-          <h3 class="login-right__title" v-if="isEmailLogin">邮箱登录</h3>
+          <h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
           <EmailLogin v-show="isEmailLogin" />
           <a-tabs v-show="!isEmailLogin" class="login-right__form">
-            <a-tab-pane title="账号登录" key="1">
+            <a-tab-pane key="1" title="账号登录">
               <AccountLogin />
             </a-tab-pane>
-            <a-tab-pane title="手机号登录" key="2">
+            <a-tab-pane key="2" title="手机号登录">
               <PhoneLogin />
             </a-tab-pane>
           </a-tabs>
@@ -59,13 +59,13 @@
     <a-row align="stretch" class="login-box">
       <a-col :xs="24" :sm="12" :md="11">
         <div class="login-right">
-          <h3 class="login-right__title" v-if="isEmailLogin">邮箱登录</h3>
+          <h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
           <EmailLogin v-show="isEmailLogin" />
           <a-tabs v-show="!isEmailLogin" class="login-right__form">
-            <a-tab-pane title="账号登录" key="1">
+            <a-tab-pane key="1" title="账号登录">
               <AccountLogin />
             </a-tab-pane>
-            <a-tab-pane title="手机号登录" key="2">
+            <a-tab-pane key="2" title="手机号登录">
               <PhoneLogin />
             </a-tab-pane>
           </a-tabs>

src/views/monitor/log/login/index.vue

@@ -7,7 +7,7 @@
     :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
     :pagination="pagination"
     :disabledTools="['size', 'setting']"
-    @filterChange="filterChange"
+    @filter-change="filterChange"
     @refresh="search"
   >
     <template #custom-left>

src/views/monitor/log/operation/index.vue

@@ -8,7 +8,7 @@
     :pagination="pagination"
     column-resizable
     :disabledTools="['size', 'setting']"
-    @filterChange="filterChange"
+    @filter-change="filterChange"
     @refresh="search"
   >
     <template #custom-left>

src/views/setting/components/VerifyModel.vue

@@ -16,6 +16,7 @@
     </GiForm>
   </a-modal>
 </template>
+
 <script setup lang="ts">
 // import { getSmsCaptcha, getEmailCaptcha, updateUserEmail, updateUserPhone } from '@/apis'
 import { Message } from '@arco-design/web-vue'

src/views/setting/profile/LeftBox.vue

@@ -59,7 +59,7 @@
   <a-modal v-model:visible="visible" title="上传头像" :width="400" :footer="false" @close="reset">
     <a-row>
       <a-col :span="14" style="width: 200px; height: 200px">
-        <vue-cropper
+        <VueCropper
           ref="cropperRef"
           :img="options.img"
           :info="true"

src/views/system/file/components/FileAudioModal/ModalContent.vue

@@ -1,8 +1,8 @@
 <template>
   <transition name="slide-dynamic-origin">
-    <div class="audio-box" ref="audioRef" :style="audioStyle" v-show="visible">
+    <div v-show="visible" ref="audioRef" class="audio-box" :style="audioStyle">
       <section style="padding: 10px 14px 14px 14px">
-        <div class="audio-box__header" ref="audioHeadRef">
+        <div ref="audioHeadRef" class="audio-box__header">
           <div class="audio-name">
             <icon-music :size="16" spin />
             <span>{{ props.data?.name }}.{{ props.data?.extension }}</span>

src/views/system/file/main/FileMain/index.vue

@@ -66,7 +66,7 @@
     </a-row>
 
     <!-- 文件列表-宫格模式 -->
-    <a-spin class="file-main__list" id="fileMain" @scroll="handleScroll" :loading="loading">
+    <a-spin id="fileMain" class="file-main__list" :loading="loading" @scroll="handleScroll">
       <FileGrid
         v-show="fileList.length && mode == 'grid'"
         :data="fileList"

src/views/system/notice/index.vue

@@ -56,6 +56,7 @@
     <NoticeDetailModal ref="NoticeDetailModalRef" />
   </div>
 </template>
+
 <script lang="ts" setup>
 import { listNotice, deleteNotice, type NoticeResp, type NoticeQuery } from '@/apis'
 import NoticeAddModal from './NoticeAddModal.vue'