fix: unocss eslint

2023-09-06 16:59:22 +08:00 · 2023-09-06 16:59:22 +08:00 · c382d63266
parent 5f158ae59d
commit c382d63266
40 changed files with 116 additions and 113 deletions
--- a/src/components/Application/src/AppLocalePicker.vue
+++ b/src/components/Application/src/AppLocalePicker.vue
@ -57,7 +57,7 @@ function handleMenuEvent(menu: DropMenu) {
    overlay-class-name="app-locale-picker-overlay"
    @menu-event="handleMenuEvent"
  >
-    <span class="cursor-pointer flex items-center">
+    <span class="flex cursor-pointer items-center">
      <Icon icon="ion:language" />
      <span v-if="showText" class="ml-1">{{ getLocaleText }}</span>
    </span>
--- a/src/components/Application/src/AppSizePicker.vue
+++ b/src/components/Application/src/AppSizePicker.vue
@ -53,7 +53,7 @@ function handleMenuEvent(menu: DropMenu) {
    overlay-class-name="app-locale-picker-overlay"
    @menu-event="handleMenuEvent"
  >
-    <span class="cursor-pointer flex items-center">
+    <span class="flex cursor-pointer items-center">
      <Icon icon="mdi:format-size" />
      <span v-if="showText" class="ml-1">{{ getSizeText }}</span>
    </span>
--- a/src/components/CardList/src/CardList.vue
+++ b/src/components/CardList/src/CardList.vue
@ -100,7 +100,7 @@ async function handleDelete(id) {

 <template>
  <div class="p-2">
-    <div class="p-4 mb-2">
+    <div class="mb-2 p-4">
      <BasicForm @register="registerForm" />
    </div>
    <div class="p-2">
--- a/src/components/CodeEditor/src/codemirror/CodeMirror.vue
+++ b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
@ -107,5 +107,5 @@ onUnmounted(() => {
 </script>

 <template>
-  <div ref="el" class="relative !h-full w-full overflow-hidden" />
+  <div ref="el" class="relative w-full overflow-hidden !h-full" />
 </template>
--- a/src/components/FormDesign/src/components/VFormDesign/components/LayoutItem.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/components/LayoutItem.vue
@ -76,7 +76,7 @@ export default defineComponent({
                handle: '.drag-move',
              }"
              v-model="colItem.children"
-              class="list-main draggable-box"
+              class="draggable-box list-main"
              :component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"
              item-key="key"
              @start="$emit('dragStart', $event, colItem.children)"
--- a/src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue
@ -60,7 +60,7 @@ export default defineComponent({
 </script>

 <template>
-  <div class="form-panel v-form-container">
+  <div class="v-form-container form-panel">
    <Empty
      v-show="formConfig.schemas.length === 0"
      class="empty-text"
--- a/src/components/Icon/src/Icon.vue
+++ b/src/components/Icon/src/Icon.vue
@ -77,7 +77,7 @@ onMounted(update)

 <template>
  <SvgIcon v-if="isSvgIcon" :size="size" :name="getSvgIcon" class="anticon" :class="[$attrs.class]" :spin="spin" />
-  <span v-else ref="elRef" class="app-iconify anticon" :class="[$attrs.class, spin && 'app-iconify-spin']" :style="getWrapStyle" />
+  <span v-else ref="elRef" class="anticon app-iconify" :class="[$attrs.class, spin && 'app-iconify-spin']" :style="getWrapStyle" />
 </template>

 <style lang="less">
--- a/src/components/Icon/src/IconPicker.vue
+++ b/src/components/Icon/src/IconPicker.vue
@ -113,13 +113,13 @@ function handleSearchChange(e: ChangeEvent) {

        <template #content>
          <div v-if="getPaginationList.length">
-            <ScrollContainer class="border border-solid border-t-0">
+            <ScrollContainer class="border border-t-0 border-solid">
              <ul class="flex flex-wrap px-2">
                <li
                  v-for="icon in getPaginationList"
                  :key="icon"
                  :class="currentSelect === icon ? 'border border-primary' : ''"
-                  class="p-2 w-1/8 cursor-pointer mr-1 mt-1 flex justify-center items-center border border-solid hover:border-primary"
+                  class="mr-1 mt-1 w-1/8 flex cursor-pointer items-center justify-center border border-solid p-2 hover:border-primary"
                  :title="icon"
                  @click="handleClick(icon)"
                >
@ -129,7 +129,7 @@ function handleSearchChange(e: ChangeEvent) {
                </li>
              </ul>
            </ScrollContainer>
-            <div v-if="getTotal >= pageSize" class="flex py-2 items-center justify-center">
+            <div v-if="getTotal >= pageSize" class="flex items-center justify-center py-2">
              <Pagination show-less-items size="small" :page-size="pageSize" :total="getTotal" @change="handlePageChange" />
            </div>
          </div>
@ -140,7 +140,7 @@ function handleSearchChange(e: ChangeEvent) {
          </template>
        </template>

-        <span v-if="isSvgMode && currentSelect" class="cursor-pointer px-2 py-1 flex items-center">
+        <span v-if="isSvgMode && currentSelect" class="flex cursor-pointer items-center px-2 py-1">
          <SvgIcon :name="currentSelect" />
        </span>
        <Icon v-else :icon="currentSelect || 'ion:apps-outline'" class="cursor-pointer px-2 py-1" />
--- a/src/components/SimpleMenu/src/SimpleSubMenu.vue
+++ b/src/components/SimpleMenu/src/SimpleSubMenu.vue
@ -55,7 +55,7 @@ function menuHasChildren(menuTreeItem: Menu): boolean {
 <template>
  <MenuItem v-if="!menuHasChildren(item) && getShowMenu" :name="item.path" v-bind="$props" :class="getLevelClass">
    <Icon v-if="getIcon" :icon="getIcon" :size="16" />
-    <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-1 collapse-title">
+    <div v-if="collapsedShowTitle && getIsCollapseParent" class="collapse-title mt-1">
      {{ getI18nName }}
    </div>
    <template #title>
@ -74,7 +74,7 @@ function menuHasChildren(menuTreeItem: Menu): boolean {
    <template #title>
      <Icon v-if="getIcon" :icon="getIcon" :size="16" />

-      <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-2 collapse-title">
+      <div v-if="collapsedShowTitle && getIsCollapseParent" class="collapse-title mt-2">
        {{ getI18nName }}
      </div>

--- a/src/components/Table/src/components/TableImg.vue
+++ b/src/components/Table/src/components/TableImg.vue
@ -35,7 +35,7 @@ const { prefixCls } = useDesign('basic-table-img')
 </script>

 <template>
-  <div v-if="imgList && imgList.length" :class="prefixCls" class="flex items-center mx-auto" :style="getWrapStyle">
+  <div v-if="imgList && imgList.length" :class="prefixCls" class="mx-auto flex items-center" :style="getWrapStyle">
    <Badge v-if="simpleShow" :count="!showBadge || imgList.length === 1 ? 0 : imgList.length">
      <div class="img-div">
        <ImagePreviewGroup>
--- a/src/components/Tree/src/components/TreeHeader.vue
+++ b/src/components/Tree/src/components/TreeHeader.vue
@ -155,12 +155,12 @@ watch(
 </script>

 <template>
-  <div :class="bem()" class="flex px-2 py-1.5 items-center">
+  <div :class="bem()" class="flex items-center px-2 py-1.5">
    <slot v-if="slots.headerTitle" name="headerTitle" />
    <BasicTitle v-if="!slots.headerTitle && title" :help-message="helpMessage">
      {{ title }}
    </BasicTitle>
-    <div v-if="search || toolbar" class="flex items-center flex-1 cursor-pointer justify-self-stretch">
+    <div v-if="search || toolbar" class="flex flex-1 cursor-pointer items-center justify-self-stretch">
      <div v-if="search" :class="getInputSearchCls">
        <InputSearch v-model:value="searchValue" :placeholder="t('common.searchText')" allow-clear />
      </div>
--- a/src/components/Upload/src/data.tsx
+++ b/src/components/Upload/src/data.tsx
@ -40,7 +40,7 @@ export function createTableColumns(): BasicColumn[] {

        return (
          <span>
-            <p class="truncate mb-1" title={text}>
+            <p class="mb-1 truncate" title={text}>
              {text}
            </p>
            <Progress percent={percent} size="small" status={status} />
--- a/src/components/Verifition/src/Verify.vue
+++ b/src/components/Verifition/src/Verify.vue
@ -121,9 +121,11 @@ export default {
      </div>
      <div class="verifybox-bottom" :style="{ padding: mode === 'pop' ? '10px' : '0' }">
        <!-- 验证码容器 -->
-        <component :is="componentType" v-if="componentType" ref="instance" :captcha-type="captchaType" :type="verifyType"
+        <component
+          :is="componentType" v-if="componentType" ref="instance" :captcha-type="captchaType" :type="verifyType"
          :figure="figure" :arith="arith" :mode="mode" :v-space="vSpace" :explain="explain" :img-size="imgSize"
-          :block-size="blockSize" :bar-size="barSize" />
+          :block-size="blockSize" :bar-size="barSize"
+        />
      </div>
    </div>
  </div>
--- a/src/components/Verifition/src/Verify/VerifySlide.vue
+++ b/src/components/Verifition/src/Verify/VerifySlide.vue
@ -344,7 +344,7 @@ async function getPictrue() {
          @touchstart="start"
          @mousedown="start"
        >
-          <i class="verify-icon iconfont" :class="[iconClass]" :style="{ color: iconColor }" />
+          <i class="iconfont verify-icon" :class="[iconClass]" :style="{ color: iconColor }" />
          <div
            v-if="type === '2'"
            class="verify-sub-block"
--- a/src/views/base/about/index.vue
+++ b/src/views/base/about/index.vue
@ -91,7 +91,7 @@ const [infoRegister] = useDescription({
 <template>
  <PageWrapper title="关于">
    <template #headerContent>
-      <div class="flex justify-between items-center">
+      <div class="flex items-center justify-between">
        <span class="flex-1">
          <a :href="GITHUB_URL" target="_blank">{{ name }}</a>
          基于Vue3.0、Vite、 Ant-Design-Vue 、TypeScript
@ -101,7 +101,7 @@ const [infoRegister] = useDescription({
      </div>
    </template>
    <Description class="enter-y" @register="infoRegister" />
-    <Description class="my-4 enter-y" @register="register" />
+    <Description class="enter-y my-4" @register="register" />
    <Description class="enter-y" @register="registerDev" />
  </PageWrapper>
 </template>
--- a/src/views/base/lock/LockPage.vue
+++ b/src/views/base/lock/LockPage.vue
@ -57,21 +57,21 @@ function handleShowForm(show = false) {
 </script>

 <template>
-  <div :class="prefixCls" class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center" @click="handleShowForm(false)">
+  <div :class="prefixCls" class="fixed inset-0 h-screen w-screen flex items-center justify-center bg-black" @click="handleShowForm(false)">
    <!-- eslint-disable max-len -->
    <div
      v-show="showDate"
      :class="`${prefixCls}__unlock`"
-      class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl flex-col cursor-pointer transform translate-x-1/2"
+      class="sm:text-md absolute left-1/2 top-0 h-16 flex flex-col translate-x-1/2 transform cursor-pointer items-center justify-center pt-5 xl:text-xl"
    >
      <LockOutlined />
      <span>{{ t('sys.lock.unlock') }}</span>
    </div>

-    <div class="flex w-screen h-screen justify-center items-center">
-      <div :class="`${prefixCls}__hour`" class="relative mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5">
+    <div class="h-screen w-screen flex items-center justify-center">
+      <div :class="`${prefixCls}__hour`" class="relative mr-5 h-2/5 w-2/5 md:mr-20 md:h-4/5">
        <span>{{ hour }}</span>
-        <span v-show="showDate" class="meridiem absolute left-5 top-5 text-md xl:text-xl">
+        <span v-show="showDate" class="meridiem text-md absolute left-5 top-5 xl:text-xl">
          {{ meridiem }}
        </span>
      </div>
@ -93,10 +93,10 @@ function handleShowForm(show = false) {
            {{ t('sys.lock.alert') }}
          </span>
          <div :class="`${prefixCls}-entry__footer enter-x`">
-            <a-button type="link" size="small" class="mt-2 mr-2 enter-x" :disabled="loading" @click="handleShowForm(true)">
+            <a-button type="link" size="small" class="enter-x mr-2 mt-2" :disabled="loading" @click="handleShowForm(true)">
              {{ t('common.back') }}
            </a-button>
-            <a-button type="link" size="small" class="mt-2 mr-2 enter-x" :disabled="loading" @click="goLogin">
+            <a-button type="link" size="small" class="enter-x mr-2 mt-2" :disabled="loading" @click="goLogin">
              {{ t('sys.lock.backToLogin') }}
            </a-button>
            <a-button class="mt-2" type="link" size="small" :loading="loading" @click="unLock()">
@ -107,8 +107,8 @@ function handleShowForm(show = false) {
      </div>
    </transition>

-    <div class="absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y">
-      <div v-show="!showDate" class="text-5xl mb-4 enter-x">
+    <div class="enter-y absolute bottom-5 w-full text-center text-gray-300 2xl:text-3xl xl:text-xl">
+      <div v-show="!showDate" class="enter-x mb-4 text-5xl">
        {{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
      </div>
      <div class="text-2xl">
--- a/src/views/base/login/ForgetPasswordForm.vue
+++ b/src/views/base/login/ForgetPasswordForm.vue
@ -33,7 +33,7 @@ async function handleReset() {
 <template>
  <template v-if="getShow">
    <LoginFormTitle class="enter-x" />
-    <Form ref="formRef" class="p-4 enter-x" :model="formData" :rules="getFormRules">
+    <Form ref="formRef" class="enter-x p-4" :model="formData" :rules="getFormRules">
      <FormItem name="account" class="enter-x">
        <Input v-model:value="formData.account" size="large" :placeholder="t('sys.login.userName')" />
      </FormItem>
--- a/src/views/base/login/Login.vue
+++ b/src/views/base/login/Login.vue
@ -26,8 +26,8 @@ const title = computed(() => globSetting?.title ?? '')
 </script>

 <template>
-  <div :class="prefixCls" class="relative w-full h-full px-4">
-    <div class="flex items-center absolute right-4 top-4">
+  <div :class="prefixCls" class="relative h-full w-full px-4">
+    <div class="absolute right-4 top-4 flex items-center">
      <AppDarkModeToggle v-if="!sessionTimeout" class="enter-x mr-2" />
      <AppLocalePicker v-if="!sessionTimeout && showLocale" class="enter-x xl:text-gray-600" :show-text="false" />
    </div>
@ -36,25 +36,25 @@ const title = computed(() => globSetting?.title ?? '')
      <AppLogo :always-show-title="true" />
    </span>

-    <div class="container relative h-full py-2 mx-auto sm:px-10">
-      <div class="flex h-full">
-        <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
+    <div class="relative mx-auto h-full py-2 container sm:px-10">
+      <div class="h-full flex">
+        <div class="mr-4 hidden min-h-full pl-4 xl:w-6/12 xl:flex xl:flex-col">
          <AppLogo class="-enter-x" />
          <div class="my-auto">
-            <img :alt="title" src="@/assets/svg/login-box-bg.svg" class="w-1/2 -mt-16 -enter-x">
-            <div class="mt-10 font-medium text-white -enter-x">
-              <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
+            <img :alt="title" src="@/assets/svg/login-box-bg.svg" class="-enter-x w-1/2 -mt-16">
+            <div class="-enter-x mt-10 font-medium text-white">
+              <span class="mt-4 inline-block text-3xl"> {{ t('sys.login.signInTitle') }}</span>
            </div>
-            <div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x">
+            <div class="-enter-x mt-5 font-normal text-white dark:text-gray-500">
              {{ t('sys.login.signInDesc') }}
            </div>
          </div>
        </div>
-        <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
+        <div class="h-full w-full flex py-5 xl:my-0 xl:h-auto xl:w-6/12 xl:py-0">
          <!-- eslint-disable max-len -->
          <div
            :class="`${prefixCls}-form`"
-            class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
+            class="enter-x relative mx-auto my-auto w-full rounded-md px-5 py-8 shadow-md xl:ml-16 lg:w-2/4 sm:w-3/4 xl:w-auto xl:bg-transparent xl:p-4 sm:px-8 xl:shadow-none"
          >
            <LoginForm />
            <ForgetPasswordForm />
--- a/src/views/base/login/LoginForm.vue
+++ b/src/views/base/login/LoginForm.vue
@ -112,7 +112,7 @@ async function handleLogin(params) {

 <template>
  <LoginFormTitle v-show="getShow" class="enter-x" />
-  <Form v-show="getShow" ref="formRef" class="p-4 enter-x" :model="formData" :rules="getFormRules" @keypress.enter="handleLogin">
+  <Form v-show="getShow" ref="formRef" class="enter-x p-4" :model="formData" :rules="getFormRules" @keypress.enter="handleLogin">
    <FormItem name="tenantName" class="enter-x">
      <Input
        v-if="tenantEnable === 'true'"
@ -184,7 +184,7 @@ async function handleLogin(params) {
      {{ t('sys.login.otherSignIn') }}
    </Divider>

-    <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
+    <div class="enter-x flex justify-evenly" :class="`${prefixCls}-sign-in-way`">
      <GithubFilled />
      <WechatFilled />
      <AlipayCircleFilled />
@ -196,7 +196,7 @@ async function handleLogin(params) {
    <Divider class="enter-x">
      萌新必读
    </Divider>
-    <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
+    <div class="enter-x flex justify-evenly" :class="`${prefixCls}-sign-in-way`">
      <Button href="https://doc.iocoder.cn/" target="_blank">
        📚开发指南
      </Button>
--- a/src/views/base/login/LoginFormTitle.vue
+++ b/src/views/base/login/LoginFormTitle.vue
@ -20,7 +20,7 @@ const getFormTitle = computed(() => {
 </script>

 <template>
-  <h2 class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left">
+  <h2 class="enter-x mb-3 text-center text-2xl font-bold xl:text-left xl:text-3xl">
    {{ getFormTitle }}
  </h2>
 </template>
--- a/src/views/base/login/MobileForm.vue
+++ b/src/views/base/login/MobileForm.vue
@ -117,7 +117,7 @@ async function getSmsCode() {
 <template>
  <div v-if="getShow">
    <LoginFormTitle class="enter-x" />
-    <Form ref="formRef" class="p-4 enter-x" :model="formData" :rules="getFormRules">
+    <Form ref="formRef" class="enter-x p-4" :model="formData" :rules="getFormRules">
      <FormItem name="tenantName" class="enter-x">
        <Input
          v-if="tenantEnable === 'true'"
--- a/src/views/base/login/QrCodeForm.vue
+++ b/src/views/base/login/QrCodeForm.vue
@ -18,7 +18,7 @@ const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
 <template>
  <div v-if="getShow">
    <LoginFormTitle class="enter-x" />
-    <div class="enter-x min-w-64 min-h-64">
+    <div class="enter-x min-h-64 min-w-64">
      <Popover :overlay-inner-style="{ padding: 0 }">
        <template #content>
          <QRCode :value="qrCodeUrl" class="enter-x flex justify-center xl:justify-start" :width="280" :bordered="false" />
@ -28,7 +28,7 @@ const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
      <Divider class="enter-x">
        {{ t('sys.login.scanSign') }}
      </Divider>
-      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
+      <Button size="large" block class="enter-x mt-4" @click="handleBackLogin">
        {{ t('sys.login.backSignIn') }}
      </Button>
    </div>
--- a/src/views/base/login/RegisterForm.vue
+++ b/src/views/base/login/RegisterForm.vue
@ -40,7 +40,7 @@ async function handleRegister() {
 <template>
  <div v-if="getShow">
    <LoginFormTitle class="enter-x" />
-    <Form ref="formRef" class="p-4 enter-x" :model="formData" :rules="getFormRules">
+    <Form ref="formRef" class="enter-x p-4" :model="formData" :rules="getFormRules">
      <FormItem name="account" class="enter-x">
        <Input v-model:value="formData.account" class="fix-auto-fill" size="large" :placeholder="t('sys.login.userName')" />
      </FormItem>
@ -72,7 +72,7 @@ async function handleRegister() {
      <Button type="primary" class="enter-x" size="large" block :loading="loading" @click="handleRegister">
        {{ t('sys.login.registerButton') }}
      </Button>
-      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
+      <Button size="large" block class="enter-x mt-4" @click="handleBackLogin">
        {{ t('sys.login.backSignIn') }}
      </Button>
    </Form>
--- a/src/views/base/login/SSOForm.vue
+++ b/src/views/base/login/SSOForm.vue
@ -167,10 +167,10 @@ onMounted(() => {
 </script>

 <template>
-  <h2 class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left">
+  <h2 class="enter-x mb-3 text-center text-2xl font-bold xl:text-left xl:text-3xl">
    {{ client.name + t('sys.login.ssoSignInFormTitle') }}
  </h2>
-  <Form ref="formRef" class="p-4 enter-x" :model="loginForm" @keypress.enter="handleAuthorize(true)">
+  <Form ref="formRef" class="enter-x p-4" :model="loginForm" @keypress.enter="handleAuthorize(true)">
    此第三方应用请求获取以下权限：
    <Row class="enter-x">
      <Col :span="12">
@ -191,7 +191,7 @@ onMounted(() => {
      <Button type="primary" size="large" block :loading="loading" @click="handleAuthorize(true)">
        {{ t('sys.login.loginButton') }}
      </Button>
-      <Button size="large" class="mt-4 enter-x" block @click="handleBackLogin">
+      <Button size="large" class="enter-x mt-4" block @click="handleBackLogin">
        {{ t('common.cancelText') }}
      </Button>
    </FormItem>
--- a/src/views/base/login/sso.vue
+++ b/src/views/base/login/sso.vue
@ -22,35 +22,35 @@ const title = computed(() => globSetting?.title ?? '')
 </script>

 <template>
-  <div :class="prefixCls" class="relative w-full h-full px-4">
-    <div class="flex items-center absolute right-4 top-4">
+  <div :class="prefixCls" class="relative h-full w-full px-4">
+    <div class="absolute right-4 top-4 flex items-center">
      <AppDarkModeToggle v-if="!sessionTimeout" class="enter-x mr-2" />
-      <AppLocalePicker v-if="!sessionTimeout && showLocale" class="text-white enter-x xl:text-gray-600" :show-text="false" />
+      <AppLocalePicker v-if="!sessionTimeout && showLocale" class="enter-x text-white xl:text-gray-600" :show-text="false" />
    </div>

    <span class="-enter-x xl:hidden">
      <AppLogo :always-show-title="true" />
    </span>

-    <div class="container relative h-full py-2 mx-auto sm:px-10">
-      <div class="flex h-full">
-        <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
+    <div class="relative mx-auto h-full py-2 container sm:px-10">
+      <div class="h-full flex">
+        <div class="mr-4 hidden min-h-full pl-4 xl:w-6/12 xl:flex xl:flex-col">
          <AppLogo class="-enter-x" />
          <div class="my-auto">
-            <img :alt="title" src="@/assets/svg/login-box-bg.svg" class="w-1/2 -mt-16 -enter-x">
-            <div class="mt-10 font-medium text-white -enter-x">
-              <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
+            <img :alt="title" src="@/assets/svg/login-box-bg.svg" class="-enter-x w-1/2 -mt-16">
+            <div class="-enter-x mt-10 font-medium text-white">
+              <span class="mt-4 inline-block text-3xl"> {{ t('sys.login.signInTitle') }}</span>
            </div>
-            <div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x">
+            <div class="-enter-x mt-5 font-normal text-white dark:text-gray-500">
              {{ t('sys.login.signInDesc') }}
            </div>
          </div>
        </div>
-        <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
+        <div class="h-full w-full flex py-5 xl:my-0 xl:h-auto xl:w-6/12 xl:py-0">
          <!-- eslint-disable max-len -->
          <div
            :class="`${prefixCls}-form`"
-            class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
+            class="enter-x relative mx-auto my-auto w-full rounded-md px-5 py-8 shadow-md xl:ml-16 lg:w-2/4 sm:w-3/4 xl:w-auto xl:bg-transparent xl:p-4 sm:px-8 xl:shadow-none"
          >
            <SSOForm />
          </div>
--- a/src/views/bpm/oa/leave/create.vue
+++ b/src/views/bpm/oa/leave/create.vue
@ -37,6 +37,6 @@ onMounted(() => {

 <template>
  <PageWrapper>
-    <BasicForm class="mt-10 w-200 h-120" @register="registerForm" @submit="handleSubmit" />
+    <BasicForm class="mt-10 h-120 w-200" @register="registerForm" @submit="handleSubmit" />
  </PageWrapper>
 </template>
--- a/src/views/dashboard/analysis/components/GrowCard.vue
+++ b/src/views/dashboard/analysis/components/GrowCard.vue
@ -17,7 +17,7 @@ defineProps({
      <Card
        :loading="loading"
        :title="item.title"
-        class="md:w-1/4 w-full !md:mt-0"
+        class="w-full md:w-1/4 !md:mt-0"
        :class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }"
      >
        <template #extra>
@ -26,12 +26,12 @@ defineProps({
          </Tag>
        </template>

-        <div class="py-4 px-4 flex justify-between items-center">
+        <div class="flex items-center justify-between px-4 py-4">
          <CountTo prefix="$" :start-val="1" :end-val="item.value" class="text-2xl" />
          <Icon :icon="item.icon" :size="40" />
        </div>

-        <div class="p-2 px-4 flex justify-between">
+        <div class="flex justify-between p-2 px-4">
          <span>总{{ item.title }}</span>
          <CountTo prefix="$" :start-val="1" :end-val="item.total" />
        </div>
--- a/src/views/dashboard/analysis/index.vue
+++ b/src/views/dashboard/analysis/index.vue
@ -16,11 +16,11 @@ setTimeout(() => {
 <template>
  <div class="p-4">
    <GrowCard :loading="loading" class="enter-y" />
-    <SiteAnalysis class="!my-4 enter-y" :loading="loading" />
-    <div class="md:flex enter-y">
-      <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
-      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
-      <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
+    <SiteAnalysis class="enter-y !my-4" :loading="loading" />
+    <div class="enter-y md:flex">
+      <VisitRadar class="w-full md:w-1/3" :loading="loading" />
+      <VisitSource class="w-full !my-4 md:w-1/3 !md:mx-4 !md:my-0" :loading="loading" />
+      <SalesProductPie class="w-full md:w-1/3" :loading="loading" />
    </div>
  </div>
 </template>
--- a/src/views/dashboard/workbench/components/ProjectCard.vue
+++ b/src/views/dashboard/workbench/components/ProjectCard.vue
@ -12,15 +12,15 @@ import { Icon } from '@/components/Icon'
      </a-button>
    </template>

-    <CardGrid v-for="item in groupItems" :key="item.title" class="!md:w-1/3 !w-full">
+    <CardGrid v-for="item in groupItems" :key="item.title" class="!w-full !md:w-1/3">
      <span class="flex">
        <Icon :icon="item.icon" :color="item.color" size="30" />
-        <span class="text-lg ml-4">{{ item.title }}</span>
+        <span class="ml-4 text-lg">{{ item.title }}</span>
      </span>
-      <div class="flex mt-2 h-10 text-secondary">
+      <div class="text-secondary mt-2 h-10 flex">
        {{ item.desc }}
      </div>
-      <div class="flex justify-between text-secondary">
+      <div class="text-secondary flex justify-between">
        <span>{{ item.group }}</span>
        <span>{{ item.date }}</span>
      </div>
--- a/src/views/dashboard/workbench/components/WorkbenchHeader.vue
+++ b/src/views/dashboard/workbench/components/WorkbenchHeader.vue
@ -11,23 +11,23 @@ const userinfo = computed(() => userStore.getUserInfo)
 <template>
  <div class="lg:flex">
    <Avatar :src="userinfo.user.avatar || headerImg" :size="72" class="!mx-auto !block" />
-    <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
-      <h1 class="md:text-lg text-md">
+    <div class="mt-2 flex flex-col justify-center md:ml-6 md:mt-0">
+      <h1 class="text-md md:text-lg">
        早安, {{ userinfo.user.nickname }}, 开始您一天的工作吧！
      </h1>
      <span class="text-secondary"> 今日晴，20℃ - 32℃！ </span>
    </div>
-    <div class="flex flex-1 justify-end md:mt-0 mt-4">
+    <div class="mt-4 flex flex-1 justify-end md:mt-0">
      <div class="flex flex-col justify-center text-right">
        <span class="text-secondary"> 待办 </span>
        <span class="text-2xl">2/10</span>
      </div>

-      <div class="flex flex-col justify-center text-right md:mx-16 mx-12">
+      <div class="mx-12 flex flex-col justify-center text-right md:mx-16">
        <span class="text-secondary"> 项目 </span>
        <span class="text-2xl">8</span>
      </div>
-      <div class="flex flex-col justify-center text-right md:mr-10 mr-4">
+      <div class="mr-4 flex flex-col justify-center text-right md:mr-10">
        <span class="text-secondary"> 团队 </span>
        <span class="text-2xl">300</span>
      </div>
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@ -21,15 +21,15 @@ setTimeout(() => {
      <WorkbenchHeader />
    </template>
    <div class="lg:flex">
-      <div class="lg:w-7/10 w-full !mr-4 enter-y">
+      <div class="enter-y w-full !mr-4 lg:w-7/10">
        <ProjectCard :loading="loading" class="enter-y" />
-        <DynamicInfo :loading="loading" class="!my-4 enter-y" />
+        <DynamicInfo :loading="loading" class="enter-y !my-4" />
      </div>
-      <div class="lg:w-3/10 w-full enter-y">
+      <div class="enter-y w-full lg:w-3/10">
        <QuickNav :loading="loading" class="enter-y" />

-        <Card class="!my-4 enter-y" :loading="loading">
-          <img class="xl:h-50 h-30 mx-auto" src="@/assets/svg/illustration.svg">
+        <Card class="enter-y !my-4" :loading="loading">
+          <img class="mx-auto h-30 xl:h-50" src="@/assets/svg/illustration.svg">
        </Card>

        <SaleRadar :loading="loading" class="enter-y" />
--- a/src/views/infra/build/index.vue
+++ b/src/views/infra/build/index.vue
@ -4,7 +4,7 @@ import { VFormDesign } from '@/components/FormDesign'
 </script>

 <template>
-  <PageWrapper dense content-full-height fixed-height>
+  <PageWrapper dense fixed-height content-full-height>
    <VFormDesign />
  </PageWrapper>
 </template>
--- a/src/views/infra/codegen/components/FinishForm.vue
+++ b/src/views/infra/codegen/components/FinishForm.vue
@ -36,7 +36,7 @@ function handleGoList() {
 </script>

 <template>
-  <div class="m-5 result-success">
+  <div class="result-success m-5">
    <Result status="success" title="代码生成成功" sub-title="可点击下方按钮预览、下载，或返回列表页。">
      <template #extra>
        <a-button key="console" type="primary" @click="handleGoList">
--- a/src/views/infra/codegen/components/PreviewModal.vue
+++ b/src/views/infra/codegen/components/PreviewModal.vue
@ -119,7 +119,7 @@ async function copy(text: string) {
 <template>
  <BasicModal v-bind="$attrs" :default-fullscreen="true" title="预览代码" @register="registerModal">
    <div class="flex">
-      <Card class="w-1/4 min-w-130">
+      <Card class="min-w-130 w-1/4">
        <BasicTree
          title="文件夹列表" toolbar :default-expand-all="true" tree-wrapper-class-name="h-[800px] overflow-auto"
          :click-row-to-expand="false" :tree-data="fileTree" :field-names="{ key: 'id', title: 'label' }"
--- a/src/views/infra/redis/index.vue
+++ b/src/views/infra/redis/index.vue
@ -38,9 +38,9 @@ onMounted(async () => {
      :data="cacheInfo"
      :schema="baseInfoSchema"
    />
-    <div class="md:flex enter-y mt-4">
-      <CommandStats class="md:w-1/2 w-full" :loading="loading" :command-stats="commandStats" />
-      <Memory class="md:w-1/2 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" :memory-human="memoryHuman" />
+    <div class="enter-y mt-4 md:flex">
+      <CommandStats class="w-full md:w-1/2" :loading="loading" :command-stats="commandStats" />
+      <Memory class="w-full !my-4 md:w-1/2 !md:mx-4 !md:my-0" :loading="loading" :memory-human="memoryHuman" />
    </div>
  </div>
 </template>
--- a/src/views/infra/webSocket/index.vue
+++ b/src/views/infra/webSocket/index.vue
@ -60,7 +60,7 @@ function toggle() {
    <div class="flex">
      <div class="w-1/3 p-4">
        <div class="flex items-center">
-          <span class="text-lg font-medium mr-4"> 连接状态: </span>
+          <span class="mr-4 text-lg font-medium"> 连接状态: </span>
          <Tag :color="getTagColor">
            {{ status }}
          </Tag>
@ -77,7 +77,7 @@ function toggle() {
            {{ getIsOpen ? '关闭连接' : '开启连接' }}
          </a-button>
        </div>
-        <p class="text-lg font-medium mt-4">
+        <p class="mt-4 text-lg font-medium">
          设置
        </p>
        <hr class="my-4">
@ -89,15 +89,15 @@ function toggle() {
        </a-button>
      </div>

-      <div class="w-2/3 ml-4 p-4">
-        <span class="text-lg font-medium mr-4"> 消息记录: </span>
+      <div class="ml-4 w-2/3 p-4">
+        <span class="mr-4 text-lg font-medium"> 消息记录: </span>
        <hr class="my-4">

        <div class="max-h-80 overflow-auto">
          <ul>
            <li v-for="item in getList" :key="item.time" class="mt-2">
              <div class="flex items-center">
-                <span class="mr-2 text-primary font-medium">收到消息:</span>
+                <span class="mr-2 font-medium text-primary">收到消息:</span>
                <span>{{ formatToDateTime(item.time) }}</span>
              </div>
              <div>
--- a/src/views/mp/components/WxNews/index.vue
+++ b/src/views/mp/components/WxNews/index.vue
@ -130,7 +130,7 @@ async function handleDelete(id) {

 <template>
  <div class="p-2">
-    <div class="p-4 mb-2">
+    <div class="mb-2 p-4">
      <BasicForm @register="registerForm" />
    </div>
    <div class="p-2">
--- a/src/views/mp/components/WxVideoPlay/index.vue
+++ b/src/views/mp/components/WxVideoPlay/index.vue
@ -36,8 +36,10 @@ function playVideo() {

    <!-- 弹窗播放 -->
    <Modal v-model:open="openVideo" title="视频播放" append-to-body>
-      <VideoPlayer v-if="openVideo" class="video-player vjs-big-play-centered" :src="props.url" poster=""
-        crossorigin="anonymous" playsinline controls :volume="0.6" :width="800" :playback-rates="[0.7, 1.0, 1.5, 2.0]" />
+      <VideoPlayer
+        v-if="openVideo" class="video-player vjs-big-play-centered" :src="props.url" poster=""
+        crossorigin="anonymous" controls playsinline :volume="0.6" :width="800" :playback-rates="[0.7, 1.0, 1.5, 2.0]"
+      />
      <!--     事件，暫時沒用
      @mounted="handleMounted" -->
      <!--        @ready="handleEvent($event)" -->
--- a/src/views/pay/submit/index.vue
+++ b/src/views/pay/submit/index.vue
@ -81,9 +81,9 @@ onMounted(async () => {
      <List :grid="{ column: 8 }" header="选择支付宝支付" :data-source="aliPayChannels">
        <template #renderItem="{ item }">
          <ListItem>
-            <Card hoverable class="w-30 h-28 mt-3 pb-3" @click="submit(item.code)">
+            <Card hoverable class="mt-3 h-28 w-30 pb-3" @click="submit(item.code)">
              <template #cover>
-                <img class="w-40px h-40px mt-2" :src="icons[item.code]">
+                <img class="mt-2 h-40px w-40px" :src="icons[item.code]">
                <p class="mt-3 text-center">
                  {{ item.name }}
                </p>
@ -95,9 +95,9 @@ onMounted(async () => {
      <List :grid="{ column: 8 }" class="mt-4" header="选择微信支付" :data-source="wxPayChannels">
        <template #renderItem="{ item }">
          <ListItem>
-            <Card hoverable class="w-30 h-28 pt-3 pb-3">
+            <Card hoverable class="h-28 w-30 pb-3 pt-3">
              <template #cover>
-                <img class="w-40px h-40px mt-2" :src="icons[item.code]">
+                <img class="mt-2 h-40px w-40px" :src="icons[item.code]">
                <p class="mt-3 text-center">
                  {{ item.name }}
                </p>
@ -109,9 +109,9 @@ onMounted(async () => {
      <List :grid="{ column: 8 }" class="mt-4" header="选择其它支付" :data-source="otherPayChannels">
        <template #renderItem="{ item }">
          <ListItem>
-            <Card hoverable class="w-30 h-28 pt-3 pb-3">
+            <Card hoverable class="h-28 w-30 pb-3 pt-3">
              <template #cover>
-                <img class="w-40px h-40px mt-2" :src="icons[item.code]">
+                <img class="mt-2 h-40px w-40px" :src="icons[item.code]">
                <p class="mt-3 text-center">
                  {{ item.name }}
                </p>
--- a/src/views/system/role/RoleMenuModal.vue
+++ b/src/views/system/role/RoleMenuModal.vue
@ -108,9 +108,8 @@ function menuCheck(checkedKeys: CheckKeys, event: CheckedEvent) {
          v-model:checkedKeys="model[field]"
          :tree-data="treeData"
          :field-names="{ title: 'name', key: 'id' }"
-          checkable
-          toolbar
-          search
+
+          toolbar checkable search
          :show-strictly-button="false"
          :selectable="false"
          title="菜单分配"