From 5d9fedc35406e00d88d8921ffe04b99a7c49cb8e Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Wed, 8 May 2024 22:47:37 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=20ESLint=20?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=B9=B6=E6=9B=B4=E6=AD=A3=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=EF=BC=88eslint=20src=20--fix=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.cjs                                        |  8 +++++++-
 src/components/GiForm/src/GiForm.vue                 |  4 ++--
 src/components/GiIconSelector/index.vue              |  2 +-
 src/components/GiTable/index.vue                     |  2 +-
 src/components/JsonPretty/index.vue                  |  2 +-
 src/components/TextCopy/index.vue                    |  2 ++
 .../components/HeaderRightBar/SettingDrawer.vue      |  2 +-
 src/layout/components/HeaderRightBar/index.vue       |  4 ++--
 src/layout/components/Menu/index.vue                 |  2 +-
 src/layout/components/Tabs/index.vue                 |  2 +-
 src/views/default/error/components/ErrorPage.vue     |  2 +-
 src/views/home/components/NowTime/index.vue          |  2 +-
 src/views/home/components/ProjectCard.vue            |  2 +-
 src/views/home/index.vue                             |  2 +-
 src/views/login/index.vue                            | 12 ++++++------
 src/views/monitor/log/login/index.vue                |  2 +-
 src/views/monitor/log/operation/index.vue            |  2 +-
 src/views/setting/components/VerifyModel.vue         |  1 +
 src/views/setting/profile/LeftBox.vue                |  2 +-
 .../file/components/FileAudioModal/ModalContent.vue  |  4 ++--
 src/views/system/file/main/FileMain/index.vue        |  2 +-
 src/views/system/notice/index.vue                    |  1 +
 22 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index c83e8e7..62ad396 100644
--- 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方式
   }
 }
diff --git a/src/components/GiForm/src/GiForm.vue b/src/components/GiForm/src/GiForm.vue
index ddb11f6..1757caa 100644
--- 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')">
diff --git a/src/components/GiIconSelector/index.vue b/src/components/GiIconSelector/index.vue
index c4c9d6b..3329e35 100644
--- 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>
diff --git a/src/components/GiTable/index.vue b/src/components/GiTable/index.vue
index 09e26cc..bd9f1b4 100644
--- 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>
diff --git a/src/components/JsonPretty/index.vue b/src/components/JsonPretty/index.vue
index a114247..b8ffc47 100644
--- 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>
diff --git a/src/components/TextCopy/index.vue b/src/components/TextCopy/index.vue
index 727705d..5631af1 100644
--- 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;
diff --git a/src/layout/components/HeaderRightBar/SettingDrawer.vue b/src/layout/components/HeaderRightBar/SettingDrawer.vue
index faf9124..7dfebad 100644
--- 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>
 
diff --git a/src/layout/components/HeaderRightBar/index.vue b/src/layout/components/HeaderRightBar/index.vue
index f9e9f9e..62da638 100644
--- 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>
diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 098a703..02ec9c2 100644
--- 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>
diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index cb95cfd..6de56fe 100644
--- 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
diff --git a/src/views/default/error/components/ErrorPage.vue b/src/views/default/error/components/ErrorPage.vue
index 0b2a149..0d13c3d 100644
--- 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">
diff --git a/src/views/home/components/NowTime/index.vue b/src/views/home/components/NowTime/index.vue
index 4a44ead..b60f698 100644
--- 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>
diff --git a/src/views/home/components/ProjectCard.vue b/src/views/home/components/ProjectCard.vue
index 9cbdcfb..6af12ba 100644
--- 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">
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e580f43..b5d3b50 100644
--- 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>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 772368f..0a85dfd 100644
--- 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>
diff --git a/src/views/monitor/log/login/index.vue b/src/views/monitor/log/login/index.vue
index bb93e38..35013bb 100644
--- 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>
diff --git a/src/views/monitor/log/operation/index.vue b/src/views/monitor/log/operation/index.vue
index 57c5a0e..087067f 100644
--- 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>
diff --git a/src/views/setting/components/VerifyModel.vue b/src/views/setting/components/VerifyModel.vue
index 7496ed7..b64ca57 100644
--- 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'
diff --git a/src/views/setting/profile/LeftBox.vue b/src/views/setting/profile/LeftBox.vue
index 6eab2b3..c860868 100644
--- 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"
diff --git a/src/views/system/file/components/FileAudioModal/ModalContent.vue b/src/views/system/file/components/FileAudioModal/ModalContent.vue
index ff0c30f..ec6354b 100644
--- 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>
diff --git a/src/views/system/file/main/FileMain/index.vue b/src/views/system/file/main/FileMain/index.vue
index 3ea90e2..fb1407d 100644
--- 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"
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index 5460b21..a0d43db 100644
--- 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'