增加代码格式化

.eslintrc.cjs

@@ -1,18 +1,21 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution")
+require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
   extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript/recommended",
-    "@vue/eslint-config-prettier",
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript/recommended',
+    '@vue/eslint-config-prettier'
   ],
   parserOptions: {
-    ecmaVersion: "latest",
+    ecmaVersion: 'latest'
   },
   rules: {
-    semi: [2, "never"],
-  },
+    'no-undef': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    'vue/multi-word-component-names': 'off'
+  }
 }

.prettierrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  printWidth: 120,
+  semi: false,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  requirePragma: false,
+  insertPragma: false,
+  // proseWrap: 'preserve',
+  htmlWhitespaceSensitivity: 'css',
+  endOfLine: 'lf',
+  arrowParens: 'avoid'
+}

src/components/GlobalMenu.vue

@@ -44,7 +44,7 @@ const handleSelect = (index: string) => {
     :class="{ 'menu-normal': !menuStore.collapse }"
     @select="handleSelect"
   >
-    <component :is="item.menuName" :index="item.path" v-for="item in menuRouter">
+    <component :is="item.menuName" :index="item.path" v-for="(item, index) in menuRouter" :key="index">
       <el-icon v-if="item.menuName === 'el-menu-item'"><component :is="item.meta?.icon"></component></el-icon>
       <template #title>
         <el-icon v-if="item.menuName === 'el-sub-menu'"><component :is="item.meta?.icon"></component></el-icon>
@@ -52,7 +52,8 @@ const handleSelect = (index: string) => {
       </template>
       <el-menu-item
         :index="isAbsolutePath(subItem.path) ? subItem.path : item.path + '/' + subItem.path"
-        v-for="subItem in item.children"
+        v-for="(subItem, key) in item.children"
+        :key="key"
       >
         <template #title>
           <el-icon v-if="subItem.meta?.icon"><component :is="subItem.meta?.icon"></component></el-icon>

src/components/GlobalSetting.vue

@@ -47,6 +47,7 @@ const themeColors = [
       <div
         class="flex items-center justify-center w-30px h-30px"
         v-for="item in themeColors"
+        :key="item"
         :style="{ background: item }"
         @click="themeStore.setThemeColor(item)"
       >

src/components/ProTable.vue

@@ -105,18 +105,18 @@ const handleSelectionChange = (columns: any[]) => {
 // ============== 表格部分结束 ===============
 
 // ============== crud部分开始 ===============
-const formRoute = props.formConfig.route
+const formRoute = ref<any>(props.formConfig.route)
 const handleCreate = () => {
-  if (formRoute) {
-    router.push(formRoute)
+  if (formRoute.value) {
+    router.push(formRoute.value)
   } else {
     formData.value = {}
     dialogVisible.value = true
   }
 }
 const handleUpdate = (row: any) => {
-  if (formRoute) {
-    router.push(formRoute)
+  if (formRoute.value) {
+    router.push(formRoute.value)
   } else {
     if (props.crud?.getRecord) {
       props.crud.getRecord({ id: row.id }).then((res: any) => {
@@ -169,8 +169,8 @@ defineExpose({
   <div class="flex flex-col" style="height: calc(100vh - 101px - var(--main-padding) * 2)">
     <el-card class="mb-4" shadow="never">
       <el-form :inline="true">
-        <el-form-item :label="item.label" v-for="item in searchList">
-          <form-comp :item="item" :formData="query"></form-comp>
+        <el-form-item :label="item.label" v-for="(item, index) in searchList" :key="index">
+          <form-comp :item="item" v-model="query[item.name]"></form-comp>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleQuery">查询</el-button>

src/components/form/AdvancedForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import type { BasicForm, BasicFormItem, AdvancedForm, AdvancedFormItem } from '@/types/form'
+import type { AdvancedForm } from '@/types/form'
 
 const props = defineProps({
   formConfig: {
@@ -13,20 +13,34 @@ const props = defineProps({
   }
 })
 
-!props.formData.id &&
-  props.formConfig?.formItems.forEach(item => {
-    item.group.forEach(element => {
-      props.formData[element.name] = element.value
+const formData = computed(() => {
+  if (props.formData.id) {
+    return props.formData
+  } else {
+    const res = props.formData
+    props.formConfig?.formItems.forEach(item => {
+      item.group.forEach(element => {
+        res[element.name] = element.value
+      })
     })
-  })
+    return res
+  }
+})
+
+// !props.formData.id &&
+//   props.formConfig?.formItems.forEach(item => {
+//     item.group.forEach(element => {
+//       props.formData[element.name] = element.value
+//     })
+//   })
 </script>
 
 <template>
-  <el-card v-for="item in formConfig.formItems" :title="item.label">
+  <el-card v-for="(item, index) in formConfig.formItems" :key="index" :title="item.label">
     <el-row :gutter="20">
-      <el-col :span="sub.span || formConfig.span || 12" v-for="sub in item.group">
+      <el-col :span="sub.span || formConfig.span || 12" v-for="(sub, key) in item.group" :key="key">
         <el-form-item :label="sub.label" :rules="sub.rules" :prop="sub.name">
-          <form-comp :item="sub" :formData="formData"></form-comp>
+          <form-comp :item="sub" v-model="formData[sub.name]"></form-comp>
         </el-form-item>
       </el-col>
     </el-row>

src/components/form/BasicForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import type { BasicForm, BasicFormItem, AdvancedForm, AdvancedFormItem } from '@/types/form'
+import type { BasicForm } from '@/types/form'
 
 const props = defineProps({
   formConfig: {
@@ -13,17 +13,29 @@ const props = defineProps({
   }
 })
 
-!props.formData.id &&
-  props.formConfig?.formItems.forEach(item => {
-    props.formData[item.name] = item.value
-  })
+const formData = computed(() => {
+  if (props.formData.id) {
+    return props.formData
+  } else {
+    const res = props.formData
+    props.formConfig?.formItems.forEach(item => {
+      res[item.name] = item.value
+    })
+    return res
+  }
+})
+
+// !props.formData.id &&
+//   props.formConfig?.formItems.forEach(item => {
+//     props.formData[item.name] = item.value
+//   })
 </script>
 
 <template>
   <el-row :gutter="20">
-    <el-col :span="item.span || formConfig.span || 12" v-for="item in formConfig.formItems">
+    <el-col :span="item.span || formConfig.span || 12" v-for="(item, index) in formConfig.formItems" :key="index">
       <el-form-item :label="item.label" :rules="item.rules" :prop="item.name">
-        <form-comp :item="item" :formData="formData"></form-comp>
+        <form-comp :item="item" v-model="formData[item.name]"></form-comp>
       </el-form-item>
     </el-col>
   </el-row>

src/components/form/DialogForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import type { BasicForm, BasicFormItem, AdvancedForm, AdvancedFormItem } from '@/types/form'
+import type { BasicForm, AdvancedForm } from '@/types/form'
 import type { DialogProps } from 'element-plus'
 const props = defineProps({
   modelValue: Boolean,

src/components/form/FormComp.vue

@@ -1,17 +1,23 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import type { BasicForm, BasicFormItem, AdvancedForm, AdvancedFormItem } from '@/types/form'
+import type { BasicFormItem } from '@/types/form'
 
 const props = defineProps({
+  modelValue: {
+    required: true
+  },
   item: {
     required: true,
     type: Object as PropType<BasicFormItem>
-  },
-  formData: {
-    required: true,
-    type: Object
   }
 })
+const emits = defineEmits(['update:modelValue'])
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: value => emits('update:modelValue', value)
+})
 
 const placeholder = (item: BasicFormItem) => {
   if (['select'].includes(item.type)) {
@@ -25,17 +31,17 @@ const placeholder = (item: BasicFormItem) => {
 <template>
   <component
     :is="'el-' + item.type"
-    v-model="formData[item.name]"
+    v-model="modelValue"
     v-bind="item.props"
     :placeholder="item.placeholder || placeholder(item)"
   >
     <template v-if="item.type === 'radio-group'">
-      <el-radio :label="option.label" v-for="option in item.options" v-bind="option.props">
+      <el-radio :label="option.label" v-for="(option, index) in item.options" :key="index" v-bind="option.props">
         {{ option.value }}
       </el-radio>
     </template>
     <template v-if="item.type === 'checkbox-group'">
-      <el-checkbox :label="option.label" v-for="option in item.options" v-bind="option.props">
+      <el-checkbox :label="option.label" v-for="(option, index) in item.options" :key="index" v-bind="option.props">
         {{ option.value }}
       </el-checkbox>
     </template>
@@ -43,7 +49,8 @@ const placeholder = (item: BasicFormItem) => {
       <el-option
         :label="option.label"
         :value="option.value"
-        v-for="option in item.options"
+        v-for="(option, index) in item.options"
+        :key="index"
         v-bind="option.props"
       ></el-option>
     </template>

src/components/form/ProForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import type { BasicForm, BasicFormItem, AdvancedForm, AdvancedFormItem } from '@/types/form'
+import type { BasicForm, AdvancedForm } from '@/types/form'
 import { ElMessage } from 'element-plus'
 
 const props = defineProps({
@@ -37,7 +37,7 @@ const formRef = ref()
 
 const submit = async () => {
   let message
-  return formRef.value.validate().then(async (valid: boolean) => {
+  return formRef.value.validate().then(async () => {
     try {
       if (formInitData.value.id) {
         await props.update(formInitData.value)

src/router/guard.ts

@@ -45,7 +45,7 @@ const createRouterGuard = (router: Router) => {
     }
   })
 
-  router.afterEach(to => {
+  router.afterEach(() => {
     NProgress.done()
   })
 }

src/router/index.ts

@@ -1,15 +1,11 @@
-import type { App } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import BasicLayout from '@/layouts/BasicLayout.vue'
 import constantRouter from './constantRouter'
 import createRouterGuard from './guard'
 export { default as asyncRouter } from './asyncRouter'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    ...constantRouter
-  ]
+  routes: [...constantRouter]
 })
 
 createRouterGuard(router)

src/stores/router.ts

@@ -1,6 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router'
 import { asyncRouter } from '@/router'
 
+// eslint-disable-next-line
 function hasPermission(route: RouteRecordRaw, permission: any[]) {
   if (route.meta && route.meta.permission) {
     let flag = false
@@ -68,7 +69,6 @@ export const useRouterStore = defineStore({
       return new Promise(resolve => {
         this.asyncRouter = role ? filterAsyncRouter(asyncRouter, role) : asyncRouter
         this.menuRouter = filterMenuRouter(this.asyncRouter)
-        console.log(this.menuRouter)
         resolve(this.asyncRouter)
       })
     }

src/utils/color.ts

@@ -5,7 +5,7 @@ export default {
     const hxs = str.match(/../g) || []
     const res = []
 
-    for (var i = 0; i < 3; i++) {
+    for (let i = 0; i < 3; i++) {
       res[i] = parseInt(hxs[i], 16)
     }
 
@@ -14,21 +14,21 @@ export default {
   // rgb颜色转hex颜色
   rgbToHex(rgb: Array<number>) {
     const hexs = rgb.map(item => item.toString(16))
-    for (var i = 0; i < 3; i++) {
+    for (let i = 0; i < 3; i++) {
       if (hexs[i].length == 1) hexs[i] = '0' + hexs[i]
     }
     return '#' + hexs.join('')
   },
   // 加深
   darken(color: string, level: number) {
-    var rgbc = this.hexToRgb(color)
-    for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level))
+    const rgbc = this.hexToRgb(color)
+    for (let i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level))
     return this.rgbToHex(rgbc)
   },
   // 变淡
   lighten(color: string, level: number) {
-    var rgbc = this.hexToRgb(color)
-    for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i])
+    const rgbc = this.hexToRgb(color)
+    for (let i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i])
     return this.rgbToHex(rgbc)
   }
 }

src/utils/request.ts

@@ -41,7 +41,8 @@ request.interceptors.request.use(config => {
   const token = userStore.token
 
   if (token) {
-    config.headers!.Authorization = token
+    config.headers = config.headers || {}
+    config.headers.Authorization = token
   }
 
   return config

src/views/system/user.vue

@@ -2,8 +2,12 @@
 import type { BasicForm } from '@/types/form'
 
 const CRUD = {
-  create() {},
-  update() {},
+  create() {
+    return Promise.resolve()
+  },
+  update() {
+    return Promise.resolve()
+  },
   getList() {
     return new Promise(resolve => {
       return resolve({

vite.config.ts

@@ -7,9 +7,6 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import DefineOptions from 'unplugin-vue-define-options/vite'
-import Icons from 'unplugin-icons/vite'
-import IconsResolver from 'unplugin-icons/resolver'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import Unocss from 'unocss/vite'