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

Merge pull request !495 from 半栈幼儿员/master

!495 优化stylelint、优化登录页、等等
Merge pull request !495 from 半栈幼儿员/master
d3f38c69 · 芋道源码 · Gitee · 2dc738a6 · 8c2ecbd7 · d3f38c69
Commit d3f38c69 authored Aug 14, 2024 by 芋道源码 Committed by Gitee Aug 14, 2024
15 changed files
--- 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"

--- 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}
                >

--- 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 &&
+                      tagsViewIcon &&
-                      item?.matched[1] &&
+                      (item?.meta?.icon ||
-                      item?.matched[1]?.meta?.icon &&
+                        (item?.matched &&
-                      tagsViewIcon
+                          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"
                  />

--- 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
+    }
  }
 ]

--- 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,

--- a/src/styles/index.scss
+++ b/src/styles/index.scss
 @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 {

--- 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);
+  }
+}
--- 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,7 +38,7 @@
            <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>
@@ -44,7 +46,7 @@
        <!-- 右边的登录界面 -->
        <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)" />

--- a/src/views/Login/SocialLogin.vue
+++ b/src/views/Login/SocialLogin.vue
 <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,7 +38,7 @@
            <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>
@@ -44,7 +46,7 @@
        <!-- 右边的登录界面 -->
        <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

--- a/src/views/Login/components/QrCodeForm.vue
+++ b/src/views/Login/components/QrCodeForm.vue
 <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>

--- 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"

--- 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'

--- 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' })

--- 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-after': 'always-single-line',
-    'declaration-colon-space-before': 'never',
+    // 'declaration-colon-space-before': 'never',
-    'declaration-block-trailing-semicolon': null,
+    // 'declaration-block-trailing-semicolon': null,
    'rule-empty-line-before': [
      'always',
      {

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,11 +24,11 @@
      "@/*": ["src/*"]
    },
    "types": [
-      "@intlify/unplugin-vue-i18n/types",
+      // "@intlify/unplugin-vue-i18n/types",
-      "vite/client",
+      "vite/client"
-      "element-plus/global",
+      // "element-plus/global",
-      "@types/qrcode",
+      // "@types/qrcode",
-      "vite-plugin-svg-icons/client"
+      // "vite-plugin-svg-icons/client"
    ],
    "outDir": "target", // 请保留这个属性，防止tsconfig.json文件报错
    "typeRoots": ["./node_modules/@types/", "./types"]