!495 优化stylelint、优化登录页、等等

YunaiV · gitee-org · commit d3f38c690e4e · 2024-08-14T16:05:44.000Z
Merge pull request !495 from 半栈幼儿员/master
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -83,7 +83,8 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "[vue]": {
     "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
@@ -72,7 +72,7 @@ export default defineComponent({
                 // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
                 <ElTag
                   style={dict?.cssClass ? 'color: #fff' : ''}
-                  type={dict?.colorType}
+                  type={dict?.colorType || null}
                   color={dict?.cssClass && isHexColor(dict?.cssClass) ? dict?.cssClass : ''}
                   disableTransitions={true}
                 >
diff --git a/src/layout/components/TagsView/src/TagsView.vue b/src/layout/components/TagsView/src/TagsView.vue
@@ -358,12 +358,13 @@ watch(
                 >
                   <Icon
                     v-if="
-                      item?.matched &&
-                      item?.matched[1] &&
-                      item?.matched[1]?.meta?.icon &&
-                      tagsViewIcon
+                      tagsViewIcon &&
+                      (item?.meta?.icon ||
+                        (item?.matched &&
+                          item.matched[0] &&
+                          item.matched[item.matched.length - 1].meta?.icon))
                     "
-                    :icon="item?.matched[1]?.meta?.icon"
+                    :icon="item?.meta?.icon || item.matched[item.matched.length - 1].meta.icon"
                     :size="12"
                     class="mr-5px"
                   />
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
@@ -593,6 +593,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
       }
     ]
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/views/Error/404.vue'),
+    name: '',
+    meta: {
+      title: '404',
+      hidden: true,
+      breadcrumb: false
+    }
   }
 ]
 
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
@@ -40,10 +40,12 @@ export const usePermissionStore = defineStore('permission', {
         }
         const routerMap: AppRouteRecordRaw[] = generateRoute(res)
         // 动态路由，404一定要放到最后面
+        // preschooler：vue-router@4以后已支持静态404路由，此处可不再追加
         this.addRouters = routerMap.concat([
           {
             path: '/:path(.*)*',
-            redirect: '/404',
+            // redirect: '/404',
+            component: () => import('@/views/Error/404.vue'),
             name: '404Page',
             meta: {
               hidden: true,
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,5 +1,6 @@
 @import './var.css';
 @import './FormCreate/index.scss';
+@import './theme.scss';
 @import 'element-plus/theme-chalk/dark/css-vars.css';
 
 .reset-margin [class*='el-icon'] + span {
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
@@ -4,3 +4,14 @@
 // .dark .dark\:text-color {
 //   color: rgba(255, 255, 255, var(--dark-text-color));
 // }
+
+// 登录页
+.dark .login-form {
+  .el-divider__text {
+    background-color: var(--login-bg-color);
+  }
+
+  .el-card {
+    background-color: var(--login-bg-color);
+  }
+}
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
@@ -5,7 +5,7 @@
   >
     <div class="relative mx-auto h-full flex">
       <div
-        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
+        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
       >
         <!-- 左上角的 logo + 系统标题 -->
         <div class="relative flex items-center text-white">
@@ -27,7 +27,9 @@
           </TransitionGroup>
         </div>
       </div>
-      <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
+      <div
+        class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
+      >
         <!-- 右上角的主题、语言选择 -->
         <div
           class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
@@ -36,15 +38,15 @@
             <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
             <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
           </div>
-          <div class="flex items-center justify-end space-x-10px">
+          <div class="flex items-center justify-end space-x-10px h-48px">
             <ThemeSwitch />
             <LocaleDropdown class="dark:text-white lt-xl:text-white" />
           </div>
         </div>
         <!-- 右边的登录界面 -->
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
-            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
+            class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
           >
             <!-- 账号登录 -->
             <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
diff --git a/src/views/Login/SocialLogin.vue b/src/views/Login/SocialLogin.vue
@@ -1,11 +1,11 @@
 <template>
   <div
     :class="prefixCls"
-    class="relative h-[100%] lt-xl:bg-[var(--login-bg-color)] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px"
+    class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
   >
     <div class="relative mx-auto h-full flex">
       <div
-        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
+        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
       >
         <!-- 左上角的 logo + 系统标题 -->
         <div class="relative flex items-center text-white">
@@ -27,7 +27,9 @@
           </TransitionGroup>
         </div>
       </div>
-      <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
+      <div
+        class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
+      >
         <!-- 右上角的主题、语言选择 -->
         <div
           class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
@@ -36,15 +38,15 @@
             <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
             <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
           </div>
-          <div class="flex items-center justify-end space-x-10px">
+          <div class="flex items-center justify-end space-x-10px h-48px">
             <ThemeSwitch />
             <LocaleDropdown class="dark:text-white lt-xl:text-white" />
           </div>
         </div>
         <!-- 右边的登录界面 -->
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
-            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
+            class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
           >
             <!-- 账号登录 -->
             <el-form
diff --git a/src/views/Login/components/QrCodeForm.vue b/src/views/Login/components/QrCodeForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-row v-show="getShow" style="margin-right: -10px; margin-left: -10px">
+  <el-row class="login-form" v-show="getShow" style="margin-right: -10px; margin-left: -10px">
     <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
       <LoginFormTitle style="width: 100%" />
     </el-col>
diff --git a/src/views/Login/components/RegisterForm.vue b/src/views/Login/components/RegisterForm.vue
@@ -3,7 +3,7 @@
     v-show="getShow"
     :rules="rules"
     :schema="schema"
-    class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
+    class="w-[100%] dark:(border-1 border-[var(--el-border-color)] border-solid)"
     hide-required-asterisk
     label-position="top"
     size="large"
diff --git a/src/views/ai/write/index/components/Left.vue b/src/views/ai/write/index/components/Left.vue
@@ -104,7 +104,7 @@
 import { createReusableTemplate } from '@vueuse/core'
 import { ref } from 'vue'
 import Tag from './Tag.vue'
-import { WriteVO } from 'src/api/ai/write'
+import { WriteVO } from '@/api/ai/write'
 import { omit } from 'lodash-es'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { AiWriteTypeEnum, WriteExample } from '@/views/ai/utils/constants'
diff --git a/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue b/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
@@ -25,7 +25,7 @@ import OrderBrowsingHistory from './OrderBrowsingHistory.vue'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { isEmpty } from '@/utils/is'
 import { debounce } from 'lodash-es'
-import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar'
+import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar/index'
 
 defineOptions({ name: 'MemberBrowsingHistory' })
 
diff --git a/stylelint.config.js b/stylelint.config.js
@@ -13,19 +13,19 @@ module.exports = {
     'at-rule-no-unknown': [
       true,
       {
-        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin']
+        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin', 'extend']
       }
     ],
     'media-query-no-invalid': null,
     'function-no-unknown': null,
     'no-empty-source': null,
     'named-grid-areas-no-invalid': null,
-    'unicode-bom': 'never',
+    // 'unicode-bom': 'never',
     'no-descending-specificity': null,
     'font-family-no-missing-generic-family-keyword': null,
-    'declaration-colon-space-after': 'always-single-line',
-    'declaration-colon-space-before': 'never',
-    'declaration-block-trailing-semicolon': null,
+    // 'declaration-colon-space-after': 'always-single-line',
+    // 'declaration-colon-space-before': 'never',
+    // 'declaration-block-trailing-semicolon': null,
     'rule-empty-line-before': [
       'always',
       {
diff --git a/tsconfig.json b/tsconfig.json
@@ -24,11 +24,11 @@
       "@/*": ["src/*"]
     },
     "types": [
-      "@intlify/unplugin-vue-i18n/types",
-      "vite/client",
-      "element-plus/global",
-      "@types/qrcode",
-      "vite-plugin-svg-icons/client"
+      // "@intlify/unplugin-vue-i18n/types",
+      "vite/client"
+      // "element-plus/global",
+      // "@types/qrcode",
+      // "vite-plugin-svg-icons/client"
     ],
     "outDir": "target", // 请保留这个属性，防止tsconfig.json文件报错
     "typeRoots": ["./node_modules/@types/", "./types"]

Original file line number	Diff line number	Diff line change
`@@ -72,7 +72,7 @@ export default defineComponent({`
`72`	`72`	`// 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题`
`73`	`73`	`<ElTag`
`74`	`74`	`style={dict?.cssClass ? 'color: #fff' : ''}`
`75`		`- type={dict?.colorType}`
	`75`	`+ type={dict?.colorType \|\| null}`
`76`	`76`	`color={dict?.cssClass && isHexColor(dict?.cssClass) ? dict?.cssClass : ''}`
`77`	`77`	`disableTransitions={true}`
`78`	`78`	`>`
Original file line number	Diff line number	Diff line change
`@@ -593,6 +593,16 @@ const remainingRouter: AppRouteRecordRaw[] = [`
`593`	`593`	`}`
`594`	`594`	`}`
`595`	`595`	`]`
	`596`	`+ },`
	`597`	`+ {`
	`598`	`+ path: '/:pathMatch(.)',`
	`599`	`+ component: () => import('@/views/Error/404.vue'),`
	`600`	`+ name: '',`
	`601`	`+ meta: {`
	`602`	`+ title: '404',`
	`603`	`+ hidden: true,`
	`604`	`+ breadcrumb: false`
	`605`	`+ }`
`596`	`606`	`}`
`597`	`607`	`]`
`598`	`608`
Original file line number	Diff line number	Diff line change
`@@ -40,10 +40,12 @@ export const usePermissionStore = defineStore('permission', {`
`40`	`40`	`}`
`41`	`41`	`const routerMap: AppRouteRecordRaw[] = generateRoute(res)`
`42`	`42`	`// 动态路由，404一定要放到最后面`
	`43`	`+ // preschooler：vue-router@4以后已支持静态404路由，此处可不再追加`
`43`	`44`	`this.addRouters = routerMap.concat([`
`44`	`45`	`{`
`45`	`46`	`path: '/:path(.)',`
`46`		`- redirect: '/404',`
	`47`	`+ // redirect: '/404',`
	`48`	`+ component: () => import('@/views/Error/404.vue'),`
`47`	`49`	`name: '404Page',`
`48`	`50`	`meta: {`
`49`	`51`	`hidden: true,`