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

2025-09-08 22:57:11 +08:00 · 2024-05-08 22:47:37 +08:00
parent 8f63576512
commit 5d9fedc354
22 changed files with 37 additions and 27 deletions
--- a/.eslintrc.cjs
+++ b/.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方式
  }
 }
--- a/src/components/GiForm/src/GiForm.vue
+++ b/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')">
--- a/src/components/GiIconSelector/index.vue
+++ b/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>
--- a/src/components/GiTable/index.vue
+++ b/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>
--- a/src/components/JsonPretty/index.vue
+++ b/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>
--- a/src/components/TextCopy/index.vue
+++ b/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;
--- a/src/layout/components/HeaderRightBar/SettingDrawer.vue
+++ b/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>

--- a/src/layout/components/HeaderRightBar/index.vue
+++ b/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-exit :size="18" v-else />
+            <icon-fullscreen v-if="!isFullscreen" :size="18" />
+            <icon-fullscreen-exit v-else :size="18" />
          </template>
        </a-button>
      </a-tooltip>
--- a/src/layout/components/Menu/index.vue
+++ b/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>
--- a/src/layout/components/Tabs/index.vue
+++ b/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
--- a/src/views/default/error/components/ErrorPage.vue
+++ b/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">
--- a/src/views/home/components/NowTime/index.vue
+++ b/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>
--- a/src/views/home/components/ProjectCard.vue
+++ b/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">
--- a/src/views/home/index.vue
+++ b/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>
--- a/src/views/login/index.vue
+++ b/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>
--- a/src/views/monitor/log/login/index.vue
+++ b/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>
--- a/src/views/monitor/log/operation/index.vue
+++ b/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>
--- a/src/views/setting/components/VerifyModel.vue
+++ b/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'
--- a/src/views/setting/profile/LeftBox.vue
+++ b/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"
--- a/src/views/system/file/components/FileAudioModal/ModalContent.vue
+++ b/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>
--- a/src/views/system/file/main/FileMain/index.vue
+++ b/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"
--- a/src/views/system/notice/index.vue
+++ b/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'