refactor: ♻️ `eslint` 代码规范检测修改

src/components/Hamburger/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    @click="toggleClick"
     class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px] dark:hover:bg-[var(--el-fill-color-light)]"
+    @click="toggleClick"
   >
     <svg
       :class="{ 'is-active': isActive }"

src/components/IconSelect/index.vue

@@ -3,6 +3,7 @@ const props = defineProps({
   modelValue: {
     type: String,
     require: false,
+    default: "",
   },
 });
 
@@ -64,12 +65,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="iconselect-container" ref="iconSelectorRef">
+  <div ref="iconSelectorRef" class="iconselect-container">
     <el-input
       v-model="inputValue"
       readonly
-      @click="visible = !visible"
       placeholder="点击选择图标"
+      @click="visible = !visible"
     >
       <template #prepend>
         <svg-icon :icon-class="inputValue" />
@@ -85,8 +86,8 @@ onMounted(() => {
     >
       <template #reference>
         <div
-          @click="visible = !visible"
           class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]"
+          @click="visible = !visible"
         >
           <i-ep-caret-top v-show="visible"></i-ep-caret-top>
           <i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom>
@@ -96,8 +97,8 @@ onMounted(() => {
       <!-- 下拉选择弹窗 -->
       <div ref="iconSelectorDialogRef">
         <el-input
-          class="p-2"
           v-model="filterValue"
+          class="p-2"
           placeholder="搜索图标"
           clearable
           @input="handleFilter"
@@ -107,9 +108,9 @@ onMounted(() => {
         <el-scrollbar height="300px">
           <ul class="icon-list">
             <li
-              class="icon-item"
               v-for="(iconName, index) in filterIconNames"
               :key="index"
+              class="icon-item"
               @click="handleSelect(iconName)"
             >
               <el-tooltip :content="iconName" placement="bottom" effect="light">

src/components/Pagination/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div :class="'pagination ' + { hidden: hidden }">
     <el-pagination
-      :background="background"
       v-model:current-page="currentPage"
       v-model:page-size="pageSize"
+      :background="background"
       :layout="layout"
       :page-sizes="pageSizes"
       :total="total"

src/components/RightPanel/index.vue

@@ -53,7 +53,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div :class="{ show: show }" ref="rightPanel">
+  <div ref="rightPanel" :class="{ show: show }">
     <div class="right-panel-overlay" />
     <div class="right-panel-container">
       <div

src/components/SvgIcon/index.vue

@@ -17,9 +17,11 @@ const props = defineProps({
   iconClass: {
     type: String,
     required: false,
+    default: "",
   },
   color: {
     type: String,
+    default: "",
   },
   size: {
     type: String,

src/components/Upload/SingleUpload.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- 上传组件 -->
   <el-upload
-    class="single-uploader"
     v-model="imgUrl"
+    class="single-uploader"
     :show-file-list="false"
     list-type="picture-card"
     :before-upload="handleBeforeUpload"

src/components/WangEditor/index.vue

@@ -3,18 +3,18 @@
     <!-- 工具栏 -->
     <Toolbar
       :editor="editorRef"
-      :defaultConfig="toolbarConfig"
+      :default-config="toolbarConfig"
       style="border-bottom: 1px solid #ccc"
       :mode="mode"
     />
     <!-- 编辑器 -->
     <Editor
-      :defaultConfig="editorConfig"
       v-model="defaultHtml"
-      @onChange="handleChange"
+      :default-config="editorConfig"
       style="height: 500px; overflow-y: hidden"
       :mode="mode"
-      @onCreated="handleCreated"
+      @on-change="handleChange"
+      @on-created="handleCreated"
     />
   </div>
 </template>

src/layout/components/Navbar.vue

@@ -54,7 +54,7 @@ function logout() {
     <div class="flex">
       <hamburger
         :is-active="appStore.sidebar.opened"
-        @toggleClick="toggleSideBar"
+        @toggle-click="toggleSideBar"
       />
       <breadcrumb />
     </div>
@@ -62,7 +62,7 @@ function logout() {
     <!-- 右侧导航设置 -->
     <div class="flex">
       <!-- 导航栏设置(窄屏隐藏)-->
-      <div class="setting-container" v-if="device !== 'mobile'">
+      <div v-if="device !== 'mobile'" class="setting-container">
         <!--全屏 -->
         <div class="setting-item" @click="toggle">
           <svg-icon

src/layout/components/Settings/index.vue

@@ -50,12 +50,12 @@ onMounted(() => {
     <div class="flex justify-center" @click.stop>
       <el-switch
         v-model="isDark"
-        @change="toggleDark"
         inline-prompt
         :active-icon="IconEpMoon"
         :inactive-icon="IconEpSunny"
         active-color="var(--el-fill-color-dark)"
         inactive-color="var(--el-color-primary)"
+        @change="toggleDark"
       />
     </div>
 
@@ -79,12 +79,12 @@ onMounted(() => {
 
     <ul class="w-full space-x-2 flex justify-center py-2">
       <li
-        class="inline-block w-[30px] h-[30px] cursor-pointer"
         v-for="(color, index) in themeColors"
         :key="index"
+        class="inline-block w-[30px] h-[30px] cursor-pointer"
         :style="{ background: color }"
         @click="changeThemeColor(color)"
-      ></li>
+      />
     </ul>
 
     <el-divider>导航设置</el-divider>

src/layout/components/Sidebar/index.vue

@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router';
+import SidebarItem from "./SidebarItem.vue";
+import Logo from "./Logo.vue";
 
-import SidebarItem from './SidebarItem.vue';
-import Logo from './Logo.vue';
-
-import { useSettingsStore } from '@/store/modules/settings';
-import { usePermissionStore } from '@/store/modules/permission';
-import { useAppStore } from '@/store/modules/app';
-import { storeToRefs } from 'pinia';
-import variables from '@/styles/variables.module.scss';
+import { useSettingsStore } from "@/store/modules/settings";
+import { usePermissionStore } from "@/store/modules/permission";
+import { useAppStore } from "@/store/modules/app";
+import { storeToRefs } from "pinia";
+import variables from "@/styles/variables.module.scss";
 
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
 const appStore = useAppStore();
 
 const { sidebarLogo } = storeToRefs(settingsStore);
-const route = useRoute();
 </script>
 
 <template>
@@ -23,7 +20,6 @@ const route = useRoute();
     <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
     <el-scrollbar>
       <el-menu
-        :default-active="route.path"
         :collapse="!appStore.sidebar.opened"
         :background-color="variables.menuBg"
         :text-color="variables.menuText"
@@ -34,8 +30,8 @@ const route = useRoute();
       >
         <sidebar-item
           v-for="route in permissionStore.routes"
-          :item="route"
           :key="route.path"
+          :item="route"
           :base-path="route.path"
           :is-collapse="!appStore.sidebar.opened"
         />

src/layout/components/TagsView/index.vue

@@ -245,9 +245,9 @@ onMounted(() => {
   <div class="tags-container">
     <scroll-pane ref="scrollPaneRef" @scroll="handleScroll">
       <router-link
-        :class="'tags-item ' + (isActive(tag) ? 'active' : '')"
         v-for="tag in visitedViews"
         :key="tag.path"
+        :class="'tags-item ' + (isActive(tag) ? 'active' : '')"
         :data-path="tag.path"
         :to="{ path: tag.path, query: tag.query }"
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"

src/views/login/index.vue

@@ -16,10 +16,10 @@
           <svg-icon icon-class="user" />
         </div>
         <el-input
-          class="flex-1"
           ref="username"
-          size="large"
           v-model="loginData.username"
+          class="flex-1"
+          size="large"
           :placeholder="$t('login.username')"
           name="username"
         />
@@ -35,8 +35,8 @@
             <svg-icon icon-class="password" />
           </span>
           <el-input
-            class="flex-1"
             v-model="loginData.password"
+            class="flex-1"
             placeholder="密码"
             :type="passwordVisible === false ? 'password' : 'input'"
             size="large"

src/views/system/dept/index.vue

@@ -218,8 +218,8 @@ onMounted(() => {
         >
         <el-button
           type="danger"
-          @click="handleDelete()"
           :disabled="ids.length === 0"
+          @click="handleDelete()"
           ><i-ep-delete />删除
         </el-button>
       </template>
@@ -273,8 +273,8 @@ onMounted(() => {
     </el-card>
 
     <el-dialog
-      :title="dialog.title"
       v-model="dialog.visible"
+      :title="dialog.title"
       width="600px"
       @closed="closeDialog"
     >

src/views/system/dict/DictData.vue

@@ -229,8 +229,8 @@ onMounted(() => {
 
       <!-- 数据表格 -->
       <el-table
-        :data="dictList"
         v-loading="loading"
+        :data="dictList"
         border
         @selection-change="handleSelectionChange"
       >
@@ -269,8 +269,8 @@ onMounted(() => {
 
     <!-- 表单弹窗 -->
     <el-dialog
-      :title="dialog.title"
       v-model="dialog.visible"
+      :title="dialog.title"
       width="500px"
       @close="closeDialog"
     >

src/views/system/dict/index.vue

@@ -226,11 +226,11 @@ onMounted(() => {
         >
       </template>
       <el-table
+        v-loading="loading"
         highlight-current-row
         :data="dictTypeList"
-        v-loading="loading"
-        @selection-change="handleSelectionChange"
         border
+        @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="字典类型名称" prop="name" width="200" />
@@ -279,8 +279,8 @@ onMounted(() => {
     </el-card>
 
     <el-dialog
-      :title="dialog.title"
       v-model="dialog.visible"
+      :title="dialog.title"
       width="500px"
       @close="closeDialog"
     >
@@ -321,8 +321,8 @@ onMounted(() => {
 
     <!--字典数据弹窗-->
     <el-dialog
-      :title="dictDataDialog.title"
       v-model="dictDataDialog.visible"
+      :title="dictDataDialog.title"
       width="1000px"
       @close="closeDictDialog"
     >

src/views/system/menu/index.vue

@@ -238,10 +238,10 @@ onMounted(() => {
         :data="menuList"
         highlight-current-row
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-        @row-click="onRowClick"
         row-key="id"
         default-expand-all
         border
+        @row-click="onRowClick"
       >
         <el-table-column label="菜单名称" min-width="200">
           <template #default="scope">
@@ -293,11 +293,11 @@ onMounted(() => {
         <el-table-column fixed="right" align="center" label="操作" width="220">
           <template #default="scope">
             <el-button
+              v-if="scope.row.type == 'CATALOG' || scope.row.type == 'MENU'"
               type="primary"
               link
               size="small"
               @click.stop="openDialog(scope.row.id)"
-              v-if="scope.row.type == 'CATALOG' || scope.row.type == 'MENU'"
             >
               <i-ep-plus />新增
             </el-button>
@@ -324,12 +324,12 @@ onMounted(() => {
     </el-card>
 
     <el-dialog
-      :title="dialog.title"
       v-model="dialog.visible"
-      @close="closeDialog"
+      :title="dialog.title"
       destroy-on-close
-      appendToBody
+      append-to-body
       width="750px"
+      @close="closeDialog"
     >
       <el-form
         ref="menuFormRef"
@@ -370,9 +370,9 @@ onMounted(() => {
         </el-form-item>
 
         <el-form-item
+          v-if="formData.type == 'CATALOG' || formData.type == 'MENU'"
           label="路由路径"
           prop="path"
-          v-if="formData.type == 'CATALOG' || formData.type == 'MENU'"
         >
           <el-input
             v-if="formData.type == 'CATALOG'"
@@ -410,22 +410,22 @@ onMounted(() => {
         </el-form-item>
 
         <el-form-item
+          v-if="formData.type !== 'BUTTON'"
           label="图标"
           prop="icon"
-          v-if="formData.type !== 'BUTTON'"
         >
           <!-- 图标选择器 -->
           <icon-select v-model="formData.icon" />
         </el-form-item>
 
         <el-form-item
-          label="跳转路由"
           v-if="formData.type == MenuTypeEnum.CATALOG"
+          label="跳转路由"
         >
           <el-input v-model="formData.redirect" placeholder="跳转路由" />
         </el-form-item>
 
-        <el-form-item label="状态" v-if="formData.type !== 'BUTTON'">
+        <el-form-item v-if="formData.type !== 'BUTTON'" label="状态">
           <el-radio-group v-model="formData.visible">
             <el-radio :label="1">显示</el-radio>
             <el-radio :label="0">隐藏</el-radio>

src/views/system/role/index.vue

@@ -280,9 +280,9 @@ onMounted(() => {
         ref="dataTableRef"
         v-loading="loading"
         :data="roleList"
-        @selection-change="handleSelectionChange"
         highlight-current-row
         border
+        @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="角色名称" prop="name" min-width="100" />
@@ -338,8 +338,8 @@ onMounted(() => {
 
     <!-- 角色表单弹窗 -->
     <el-dialog
-      :title="dialog.title"
       v-model="dialog.visible"
+      :title="dialog.title"
       width="500px"
       @close="closeDialog"
     >
@@ -393,11 +393,11 @@ onMounted(() => {
 
     <!-- 分配菜单弹窗  -->
     <el-dialog
-      :title="'【' + checkedRole.name + '】权限分配'"
       v-model="menuDialogVisible"
+      :title="'【' + checkedRole.name + '】权限分配'"
       width="800px"
     >
-      <el-scrollbar max-height="600px" v-loading="loading">
+      <el-scrollbar v-loading="loading" max-height="600px">
         <el-tree
           ref="menuRef"
           node-key="value"

src/views/system/user/index.vue

@@ -399,8 +399,8 @@ onMounted(() => {
           </el-input>
 
           <el-tree
-            class="mt-2"
             ref="deptTreeRef"
+            class="mt-2"
             :data="deptList"
             :props="{ children: 'children', label: 'label', disabled: '' }"
             :expand-on-click-node="false"
@@ -453,16 +453,16 @@ onMounted(() => {
             <div class="flex justify-between">
               <div>
                 <el-button
+                  v-hasPerm="['sys:user:add']"
                   type="success"
                   @click="openDialog()"
-                  v-hasPerm="['sys:user:add']"
                   ><i-ep-plus />新增</el-button
                 >
                 <el-button
+                  v-hasPerm="['sys:user:delete']"
                   type="danger"
                   :disabled="ids.length === 0"
                   @click="handleDelete()"
-                  v-hasPerm="['sys:user:delete']"
                   ><i-ep-delete />删除</el-button
                 >
               </div>
@@ -559,19 +559,19 @@ onMounted(() => {
                   ><i-ep-refresh-left />重置密码</el-button
                 >
                 <el-button
+                  v-hasPerm="['sys:user:edit']"
                   type="primary"
                   link
                   size="small"
                   @click="openDialog(scope.row.id)"
-                  v-hasPerm="['sys:user:edit']"
                   ><i-ep-edit />编辑</el-button
                 >
                 <el-button
+                  v-hasPerm="['sys:user:delete']"
                   type="primary"
                   link
                   size="small"
                   @click="handleDelete(scope.row.id)"
-                  v-hasPerm="['sys:user:delete']"
                   ><i-ep-delete />删除</el-button
                 >
               </template>
@@ -591,8 +591,8 @@ onMounted(() => {
 
     <!-- 表单弹窗 -->
     <el-dialog
-      :title="dialog.title"
       v-model="dialog.visible"
+      :title="dialog.title"
       width="600px"
       append-to-body
       @close="closeDialog"
@@ -605,8 +605,8 @@ onMounted(() => {
       >
         <el-form-item label="用户名" prop="username">
           <el-input
-            :readonly="!!formData.id"
             v-model="formData.username"
+            :readonly="!!formData.id"
             placeholder="请输入用户名"
           />
         </el-form-item>
@@ -678,8 +678,8 @@ onMounted(() => {
 
     <!-- 导入弹窗 -->
     <el-dialog
-      :title="importDialog.title"
       v-model="importDialog.visible"
+      :title="importDialog.title"
       width="600px"
       append-to-body
       @close="closeImportDialog"