refactor: use unocss

.vscode/extensions.json

@@ -6,6 +6,7 @@
     "stylelint.vscode-stylelint",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
+    "usernamehw.errorlens",
     "mrmlnc.vscode-less",
     "lokalise.i18n-ally",
     "redhat.vscode-yaml",

.vscode/settings.json

@@ -66,6 +66,12 @@
     "source.fixAll.eslint": true,
     "source.organizeImports": false
   },
+  "eslint.rules.customizations": [
+    {
+      "rule": "@stylistic/*",
+      "severity": "off"
+    }
+  ],
   "eslint.validate": [
     "javascript",
     "javascriptreact",
@@ -82,7 +88,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
@@ -166,6 +172,9 @@
     "*.env": "$(capture).env.*",
     "package.json": ".hintrc,pnpm-lock.yaml,yarn.lock,LICENSE,README*,CHANGELOG*,CNAME,.gitattributes,.gitignore,prettier.config.js,stylelint.config.js,commitlint.config.js,.stylelintignore,.prettierignore,.gitpod.yml,.eslintrc.js,.eslintignore"
   },
+  "eslint.codeAction.showDocumentation": {
+    "enable": true
+  },
   "terminal.integrated.scrollback": 10000,
   "nuxt.isNuxtApp": false
 }

src/components/Application/src/AppDarkModeToggle.vue

@@ -29,8 +29,14 @@ function toggleDarkMode() {
 </script>
 
 <template>
-  <div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
+  <div
-    <div :class="`${prefixCls}-inner`" />
+    v-if="getShowDarkModeToggle" :class="getClass"
+    class="relative mr-auto h-6.5 w-12.5 flex cursor-pointer items-center justify-between rounded-4.5 bg-black px-1.5"
+    @click="toggleDarkMode"
+  >
+    <div
+      class="dark:(transform translateX(calc(100% + 2px))) absolute z-1 h-4.5 w-4.5 rounded-1/2 bg-white will-change-transform"
+    />
     <SvgIcon size="14" name="sun" />
     <SvgIcon size="14" name="moon" />
   </div>
@@ -46,29 +52,11 @@ html[data-theme='dark'] {
 }
 
 .@{prefix-cls} {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 50px;
-  height: 26px;
-  padding: 0 6px;
-  margin-left: auto;
-  cursor: pointer;
-  background-color: #151515;
-  border-radius: 30px;
 
   &-inner {
-    position: absolute;
-    z-index: 1;
-    width: 18px;
-    height: 18px;
-    background-color: #fff;
-    border-radius: 50%;
     transition:
       transform 0.5s,
       background-color 0.5s;
-    will-change: transform;
   }
 
   &--dark {

src/components/Application/src/search/AppSearchFooter.vue

@@ -8,7 +8,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div :class="`${prefixCls}`">
+  <div class="relative h-10 flex flex-shrink-0 items-center border-t-1 rounded-bl-2xl px-4 py-0 dark:border-light-100">
     <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ant-design:enter-outlined" />
     <span>{{ t('component.app.toSearch') }}</span>
     <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-up-outline" />
@@ -23,18 +23,6 @@ const { t } = useI18n()
 @prefix-cls: ~'@{namespace}-app-search-footer';
 
 .@{prefix-cls} {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  height: 44px;
-  padding: 0 16px;
-  font-size: 12px;
-  // color: var(--text-color);
-  // background-color: var(--component-background);
-  border-top: 1px solid var(--border-color);
-  border-radius: 0 0 16px 16px;
-
   &-item {
     display: flex;
     align-items: center;

src/components/Basic/src/BasicHelp.vue

@@ -6,7 +6,6 @@ import { InfoCircleOutlined } from '@ant-design/icons-vue'
 import { getPopupContainer } from '@/utils'
 import { isArray, isString } from '@/utils/is'
 import { getSlot } from '@/utils/helper/tsxHelper'
-import { useDesign } from '@/hooks/web/useDesign'
 
 const props = {
   /**
@@ -44,7 +43,6 @@ export default defineComponent({
   components: { Tooltip },
   props,
   setup(props, { slots }) {
-    const { prefixCls } = useDesign('basic-help')
 
     const getTooltipStyle = computed((): CSSProperties => ({ color: props.color, fontSize: props.fontSize }))
 
@@ -74,14 +72,14 @@ export default defineComponent({
     return () => {
       return (
         <Tooltip
-          overlayClassName={`${prefixCls}__wrap`}
+          overlayClassName="overlay-class"
           title={<div style={unref(getTooltipStyle)}>{renderTitle()}</div>}
           autoAdjustOverflow={true}
           overlayStyle={unref(getOverlayStyle)}
           placement={props.placement as 'right'}
           getPopupContainer={() => getPopupContainer()}
         >
-          <span class={prefixCls}>{getSlot(slots) || <InfoCircleOutlined />}</span>
+          <span class="ml-1.5 inline-block cursor-pointer text-sm">{getSlot(slots) || <InfoCircleOutlined />}</span>
         </Tooltip>
       )
     }
@@ -89,19 +87,10 @@ export default defineComponent({
 })
 </script>
 
-<style lang="less">
+<style>
-@prefix-cls: ~'@{namespace}-basic-help';
+.overlay-class {
-
-.@{prefix-cls} {
-  display: inline-block;
-  margin-left: 6px;
-  font-size: 14px;
-  cursor: pointer;
-
-  &__wrap {
   p {
     margin-bottom: 0;
   }
 }
-}
 </style>

src/components/ContextMenu/src/ContextMenu.vue

@@ -31,7 +31,7 @@ const props = {
 const ItemContent: FunctionalComponent<ItemContentProps> = (props) => {
   const { item } = props
   return (
-    <span style="display: inline-block; width: 100%; " class="px-4" onClick={props.handler.bind(null, item)}>
+    <span class="inline-block w-full px-4" onClick={props.handler.bind(null, item)}>
       {props.showIcon && item.icon && <Icon class="mr-2" icon={item.icon} />}
       <span>{item.label}</span>
     </span>

src/components/CronTab/src/CronTabInput.vue

@@ -3,7 +3,6 @@ import { ref, watch } from 'vue'
 import { Input } from 'ant-design-vue'
 import CronTabModal from './CronTabModal.vue'
 import { cronEmits, cronProps } from './cron.data'
-import { useDesign } from '@/hooks/web/useDesign'
 import { useModal } from '@/components/Modal'
 import { propTypes } from '@/utils/propTypes'
 import { Icon } from '@/components/Icon'
@@ -14,7 +13,6 @@ const props = defineProps({
   exeStartTime: propTypes.oneOfType([propTypes.number, propTypes.string, propTypes.object]).def(0),
 })
 const emit = defineEmits([...cronEmits])
-const { prefixCls } = useDesign('cron-input')
 const [registerModal, { openModal }] = useModal()
 const editCronValue = ref(props.value)
 
@@ -37,11 +35,11 @@ function showConfigModal() {
 </script>
 
 <template>
-  <div :class="`${prefixCls}`">
+  <div>
     <Input v-model:value="editCronValue" :placeholder="placeholder" :disabled="disabled">
       <template #addonAfter>
-        <a class="open-btn" :disabled="disabled ? 'disabled' : null" @click="showConfigModal">
+        <a class="cursor-pointer" :disabled="disabled ? 'disabled' : null" @click="showConfigModal">
-          <Icon icon="ant-design:setting-outlined" />
+          <Icon class="relative right-0.5 top-0.25" icon="ant-design:setting-outlined" />
           <span>选择</span>
         </a>
       </template>
@@ -56,19 +54,3 @@ function showConfigModal() {
     />
   </div>
 </template>
-
-<style lang="less">
-@prefix-cls: ~'@{namespace}-cron-input';
-
-.@{prefix-cls} {
-  a.open-btn {
-    cursor: pointer;
-
-    .app-iconify {
-      position: relative;
-      top: 1px;
-      right: 2px;
-    }
-  }
-}
-</style>

src/components/Cropper/src/CropperAvatar.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
 import { computed, ref, unref, watch, watchEffect } from 'vue'
+import { Avatar } from 'ant-design-vue'
 import CopperModal from './CopperModal.vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useModal } from '@/components/Modal'
@@ -65,9 +66,9 @@ defineExpose({ openModal: openModal.bind(null, true), closeModal })
       <div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
         <Icon icon="ant-design:cloud-upload-outlined" :size="getIconWidth" :style="getImageWrapperStyle" color="#d6d6d6" />
       </div>
-      <img v-if="sourceValue" :src="sourceValue" alt="avatar">
+      <Avatar v-if="sourceValue" :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }" :src="sourceValue" alt="avatar" />
     </div>
-    <a-button v-if="showBtn" :class="`${prefixCls}-upload-btn`" v-bind="btnProps" @click="openModal">
+    <a-button v-if="showBtn" class="mx-auto my-2.5" v-bind="btnProps" @click="openModal">
       {{ btnText ? btnText : t('component.cropper.selectImage') }}
     </a-button>
 
@@ -113,9 +114,5 @@ defineExpose({ openModal: openModal.bind(null, true), closeModal })
   &-image-mask:hover {
     opacity: 40;
   }
-
-  &-upload-btn {
-    margin: 10px auto;
-  }
 }
 </style>

src/components/Drawer/src/components/DrawerFooter.vue

@@ -2,7 +2,6 @@
 import type { CSSProperties } from 'vue'
 import { computed } from 'vue'
 import { footerProps } from '../props'
-import { useDesign } from '@/hooks/web/useDesign'
 
 defineOptions({ name: 'BasicDrawerFooter' })
 
@@ -15,8 +14,6 @@ const props = defineProps({
 })
 const emit = defineEmits(['ok', 'close'])
 
-const { prefixCls } = useDesign('basic-drawer-footer')
-
 const getStyle = computed((): CSSProperties => {
   const heightStr = `${props.height}`
   return {
@@ -35,14 +32,21 @@ function handleClose() {
 </script>
 
 <template>
-  <div v-if="showFooter || $slots.footer" :class="prefixCls" :style="getStyle">
+  <div
+    v-if="showFooter || $slots.footer"
+    class="absolute bottom-0 w-full border-t-1 border-light-200 bg-white pl-5 pr-3 dark:bg-dark"
+    :style="getStyle"
+  >
     <template v-if="!$slots.footer">
       <slot name="insertFooter" />
       <a-button v-if="showCancelBtn" v-bind="cancelButtonProps" class="mr-2" @click="handleClose">
         {{ cancelText }}
       </a-button>
       <slot name="centerFooter" />
-      <a-button v-if="showOkBtn" :type="okType" v-bind="okButtonProps" class="mr-2" :loading="confirmLoading" @click="handleOk">
+      <a-button
+        v-if="showOkBtn" :type="okType" v-bind="okButtonProps" class="mr-2" :loading="confirmLoading"
+        @click="handleOk"
+      >
         {{ okText }}
       </a-button>
       <slot name="appendFooter" />
@@ -53,21 +57,3 @@ function handleClose() {
     </template>
   </div>
 </template>
-
-<style lang="less">
-@prefix-cls: ~'@{namespace}-basic-drawer-footer';
-@footer-height: 60px;
-.@{prefix-cls} {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  padding: 0 12px 0 20px;
-  text-align: right;
-  background-color: var(--component-background);
-  border-top: 1px solid var(--border-color);
-
-  > * {
-    margin-right: 8px;
-  }
-}
-</style>

src/components/Drawer/src/components/DrawerHeader.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { ArrowLeftOutlined } from '@ant-design/icons-vue'
 import { BasicTitle } from '@/components/Basic'
-import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 
 defineOptions({ name: 'BasicDrawerHeader' })
@@ -13,52 +12,27 @@ defineProps({
 })
 const emit = defineEmits(['close'])
 
-const { prefixCls } = useDesign('basic-drawer-header')
-
 function handleClose() {
   emit('close')
 }
 </script>
 
 <template>
-  <BasicTitle v-if="!isDetail" :class="prefixCls">
+  <BasicTitle v-if="!isDetail" class="h-full flex items-center">
     <slot name="title" />
     {{ !$slots.title ? title : '' }}
   </BasicTitle>
 
-  <div v-else :class="[prefixCls, `${prefixCls}--detail`]">
+  <div v-else>
-    <span :class="`${prefixCls}__twrap`">
+    <span class="flex-1">
       <span v-if="showDetailBack" @click="handleClose">
-        <ArrowLeftOutlined :class="`${prefixCls}__back`" />
+        <ArrowLeftOutlined class="cursor-pointer px-3" />
       </span>
       <span v-if="title">{{ title }}</span>
     </span>
 
-    <span :class="`${prefixCls}__toolbar`">
+    <span class="pr-12.5">
       <slot name="titleToolbar" />
     </span>
   </div>
 </template>
-
-<style lang="less">
-@prefix-cls: ~'@{namespace}-basic-drawer-header';
-@footer-height: 60px;
-.@{prefix-cls} {
-  display: flex;
-  align-items: center;
-  height: 100%;
-
-  &__back {
-    padding: 0 12px;
-    cursor: pointer;
-  }
-
-  &__twrap {
-    flex: 1;
-  }
-
-  &__toolbar {
-    padding-right: 50px;
-  }
-}
-</style>

src/components/Form/src/components/FileUpload.vue

@@ -280,11 +280,11 @@ function getFileName(path) {
     <Upload
       :headers="headers"
       :multiple="multiple"
-      :action="uploadUrl as any"
+      :action="uploadUrl"
       :file-list="fileList"
       :disabled="disabled"
       v-bind="bindProps"
-      @remove="onRemove as any"
+      @remove="onRemove"
       @change="onFileChange"
       @preview="onFilePreview"
     >
@@ -305,7 +305,6 @@ function getFileName(path) {
 </template>
 
 <style lang="less">
-//noinspection LessUnresolvedVariable
 @prefix-cls: ~'@{namespace}-upload';
 
 .@{prefix-cls} {
@@ -323,12 +322,9 @@ function getFileName(path) {
         }
       }
 
-      /* update-begin-author:taoyan date:2022-5-24 for:VUEN-1093详情界面 图片下载按钮显示不全 */
       .upload-download-handler {
         right: 6px !important;
       }
-
-      /* update-end-author:taoyan date:2022-5-24 for:VUEN-1093详情界面 图片下载按钮显示不全 */
     }
 
     .ant-upload-list-item {

src/components/FormDesign/src/components/VFormCreate/index.vue

@@ -119,7 +119,7 @@ export default defineComponent({
 
 <template>
   <div class="v-form-container">
-    <Form ref="eFormModel" class="v-form-model" :model="formModel" v-bind="formModelProps">
+    <Form ref="eFormModel" class="overflow-hidden" :model="formModel" v-bind="formModelProps">
       <Row>
         <FormRender
           v-for="(schema, index) of noHiddenList"
@@ -143,9 +143,3 @@ export default defineComponent({
     </Form>
   </div>
 </template>
-
-<style lang="less" scoped>
-.v-form-model {
-  overflow: hidden;
-}
-</style>

src/components/FormDesign/src/components/VFormDesign/components/FormOptions.vue

@@ -52,10 +52,10 @@ function deleteGridOptions(index: number) {
     </div>
     <div v-else>
       <div v-for="(item, index) of formConfig.currentItem!.componentProps![key]" :key="index">
-        <div class="options-box">
+        <div class="mb-1.5 flex items-center">
           <Input v-model:value="item.label" />
-          <Input v-model:value="item.value" class="options-value" />
+          <Input v-model:value="item.value" class="mx-2" />
-          <a class="options-delete" @click="deleteOptions(index)">
+          <a class="h-7.5 w-7.5 rounded-full bg-light-50 text-center text-gray-500 hover:bg-red-500" @click="deleteOptions(index)">
             <Icon icon="ant-design:delete-outlined" />
           </a>
         </div>
@@ -67,30 +67,3 @@ function deleteGridOptions(index: number) {
     </div>
   </div>
 </template>
-
-<style lang="less" scoped>
-.options-box {
-  display: flex;
-  align-items: center;
-  margin-bottom: 5px;
-
-  .options-value {
-    margin: 0 8px;
-  }
-
-  .options-delete {
-    flex-shrink: 0;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    color: #666;
-    text-align: center;
-    background: #f5f5f5;
-    border-radius: 50%;
-
-    &:hover {
-      background: #ff4d4f;
-    }
-  }
-}
-</style>

src/components/FormDesign/src/components/VFormDesign/components/ImportJsonModal.vue

@@ -109,7 +109,7 @@ defineExpose({ showModal })
         取消
       </a-button>
       <Upload
-        class="upload-button"
+        class="mx-2.5"
         :before-upload="beforeUpload"
         :show-upload-list="false"
         accept="application/json"
@@ -124,9 +124,3 @@ defineExpose({ showModal })
     </template>
   </Modal>
 </template>
-
-<style lang="less" scoped>
-.upload-button {
-  margin: 0 10px;
-}
-</style>

src/components/FormDesign/src/components/VFormDesign/components/PreviewCode.vue

@@ -72,10 +72,10 @@ export default defineComponent({
     <div class="v-json-box">
       <CodeEditor ref="myEditor" :value="editorJson" :mode="MODE.JSON" />
     </div>
-    <div class="copy-btn-box">
+    <div class="pt-2 text-center">
       <a-button
         type="primary"
-        class="copy-btn"
+        class="mr-2"
         data-clipboard-action="copy"
         :data-clipboard-text="editorJson"
         @click="handleCopyJson"
@@ -88,15 +88,3 @@ export default defineComponent({
     </div>
   </div>
 </template>
-
-<style lang="less" scoped>
-// modal复制按钮样式
-.copy-btn-box {
-  padding-top: 8px;
-  text-align: center;
-
-  .copy-btn {
-    margin-right: 8px;
-  }
-}
-</style>

src/components/FormDesign/src/components/VFormDesign/index.vue

@@ -19,7 +19,6 @@ import PropsPanel from './modules/PropsPanel.vue'
 import ImportJsonModal from './components/ImportJsonModal.vue'
 import CodeModal from './components/CodeModal.vue'
 import { globalConfigState } from './config/formItemPropsConfig'
-import { useDesign } from '@/hooks/web/useDesign'
 import { CollapseContainer } from '@/components/Container/index'
 import 'codemirror/mode/javascript/javascript'
 
@@ -29,7 +28,6 @@ defineProps({
     default: 'v-form-antd表单设计器',
   },
 })
-const { prefixCls } = useDesign('form-design')
 // 子组件实例
 const propsPanel = ref<null | IPropsPanel>(null)
 const jsonModal = ref<null | IToolbarMethods>(null)
@@ -251,7 +249,7 @@ provide<IFormDesignMethods>('formDesignMethods', {
 <template>
   <Layout>
     <LayoutSider
-      :class="`left ${prefixCls}-sider`"
+      class="bg-white dark:bg-black"
       collapsible
       collapsed-width="0"
       width="270"
@@ -302,7 +300,7 @@ provide<IFormDesignMethods>('formDesignMethods', {
       />
     </LayoutContent>
     <LayoutSider
-      :class="`right ${prefixCls}-sider`"
+      class="bg-white dark:bg-black"
       collapsible
       :reverse-arrow="true"
       collapsed-width="0"
@@ -327,19 +325,3 @@ provide<IFormDesignMethods>('formDesignMethods', {
   <VFormPreview ref="eFormPreview" :form-config="formConfig" />
   <VFormPreview2 ref="eFormPreview2" :form-config="formConfig" />
 </template>
-
-<style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-form-design';
-
-[data-theme='dark'] {
-  .@{prefix-cls}-sider {
-    background-color: #1f1f1f;
-  }
-}
-
-[data-theme='light'] {
-  .@{prefix-cls}-sider {
-    background-color: #fff;
-  }
-}
-</style>

src/components/Page/src/PageFooter.vue

@@ -9,8 +9,8 @@ const { getCalcContentWidth } = useMenuSetting()
 </script>
 
 <template>
-  <div :class="prefixCls" :style="{ width: getCalcContentWidth }">
+  <div class="fixed bottom-0 right-0 z-99 w-full flex items-center border-t-1 px-6 text-base/44" :style="{ width: getCalcContentWidth }">
-    <div :class="`${prefixCls}__left`">
+    <div class="flex-1-1">
       <slot name="left" />
     </div>
     <slot />
@@ -24,24 +24,10 @@ const { getCalcContentWidth } = useMenuSetting()
 @prefix-cls: ~'@{namespace}-page-footer';
 
 .@{prefix-cls} {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  z-index: @page-footer-z-index;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 0 24px;
-  line-height: 44px;
-  border-top: 1px solid var(--border-color);
   box-shadow:
     0 -6px 16px -8px rgb(0 0 0 / 8%),
     0 -9px 28px 0 rgb(0 0 0 / 5%),
     0 -12px 48px 16px rgb(0 0 0 / 3%);
   transition: width 0.2s;
-
-  &__left {
-    flex: 1 1;
-  }
 }
 </style>

src/components/Table/src/BasicTable.vue

@@ -316,7 +316,7 @@ emit('register', tableAction, formActions)
 <style lang="less">
 @prefix-cls: ~'@{namespace}-basic-table';
 
-[data-theme='dark'] {
+html[data-theme='dark'] {
   .ant-table-tbody > tr:hover.ant-table-row-selected > td,
   .ant-table-tbody > tr.ant-table-row-selected td {
     background-color: #262626;

src/design/index.less

@@ -1,7 +1,6 @@
 @import "transition/index.less";
 @import "var/index.less";
 @import "public.less";
-// @import "ant/index.less";
 @import "./theme.less";
 @import "./entry.css";
 

src/layouts/default/footer/index.vue

@@ -11,7 +11,6 @@ import { openWindow } from '@/utils'
 
 import { useI18n } from '@/hooks/web/useI18n'
 import { useRootSetting } from '@/hooks/setting/useRootSetting'
-import { useDesign } from '@/hooks/web/useDesign'
 
 defineOptions({ name: 'LayoutFooter' })
 
@@ -22,7 +21,6 @@ const Footer = Layout.Footer
 const { t } = useI18n()
 const { getShowFooter } = useRootSetting()
 const { currentRoute } = useRouter()
-const { prefixCls } = useDesign('layout-footer')
 
 const footerRef = ref<ComponentRef>(null)
 const { setFooterHeight } = useLayoutHeight()
@@ -40,43 +38,15 @@ const getShowLayoutFooter = computed(() => {
 </script>
 
 <template>
-  <Footer v-if="getShowLayoutFooter" ref="footerRef" :class="prefixCls">
+  <Footer v-if="getShowLayoutFooter" ref="footerRef" class="text-center text-[var(--normal-text)]">
-    <div :class="`${prefixCls}__links`">
+    <div class="mb-2">
-      <a @click="openWindow(SITE_URL)">外包咨询</a>
+      <a class="text-[var(--normal-text)] hover:text-[var(--hover-text)]" @click="openWindow(SITE_URL)">外包咨询</a>
 
-      <GithubFilled :class="`${prefixCls}__github`" @click="openWindow(GITHUB_URL)" />
+      <GithubFilled class="mx-7.5 hover:text-[var(--hover-text)]" @click="openWindow(GITHUB_URL)" />
 
-      <a @click="openWindow(DOC_URL)">{{ t('layout.footer.onlineDocument') }}</a>
+      <a class="text-[var(--normal-text)] hover:text-[var(--hover-text)]" @click="openWindow(DOC_URL)">{{
+        t('layout.footer.onlineDocument') }}</a>
     </div>
     <div>Copyright &copy;2023 {{ SITE_TITLE }}</div>
   </Footer>
 </template>
-
-<style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-layout-footer';
-
-.@{prefix-cls} {
-  color: var(--normal-text);
-  text-align: center;
-
-  &__links {
-    margin-bottom: 8px;
-
-    a {
-      color: var(--normal-text);
-
-      &:hover {
-        color: var(--hover-text);
-      }
-    }
-  }
-
-  &__github {
-    margin: 0 30px;
-
-    &:hover {
-      color: var(--hover-text);
-    }
-  }
-}
-</style>

src/layouts/default/header/components/notify/NoticeList.vue

@@ -2,7 +2,6 @@
 import { computed, ref, unref, watch } from 'vue'
 import { Avatar, List, Tag, Typography } from 'ant-design-vue'
 import type { ListItem } from './data'
-import { useDesign } from '@/hooks/web/useDesign'
 import { isNumber } from '@/utils/is'
 
 const props = defineProps({
@@ -31,7 +30,6 @@ const props = defineProps({
   },
 })
 const emit = defineEmits(['update:currentPage'])
-const { prefixCls } = useDesign('header-notify-list')
 const current = ref(props.currentPage || 1)
 const getData = computed(() => {
   const { pageSize, list } = props
@@ -72,12 +70,12 @@ function handleTitleClick(item: ListItem) {
 </script>
 
 <template>
-  <List :class="prefixCls" bordered :pagination="getPagination">
+  <List class="display-none" bordered :pagination="getPagination">
     <template v-for="item in getData" :key="item.id">
-      <List.Item class="list-item">
+      <List.Item class="cursor-pointer overflow-hidden p-1.5 transition-all delay-300">
         <List.Item.Meta>
           <template #title>
-            <div class="title">
+            <div class="mb-2 font-normal">
               <Typography.Paragraph
                 style="width: 100%; margin-bottom: 0 !important"
                 :style="{ cursor: isTitleClickable ? 'pointer' : '' }"
@@ -86,8 +84,8 @@ function handleTitleClick(item: ListItem) {
                 :content="item.title"
                 @click="handleTitleClick(item)"
               />
-              <div v-if="item.extra" class="extra">
+              <div v-if="item.extra" class="float-right mr-0 font-normal -mt-0.375">
-                <Tag class="tag" :color="item.color">
+                <Tag class="mr-0" :color="item.color">
                   {{ item.extra }}
                 </Tag>
               </div>
@@ -95,20 +93,20 @@ function handleTitleClick(item: ListItem) {
           </template>
 
           <template #avatar>
-            <Avatar v-if="item.avatar" class="avatar" :src="item.avatar" />
+            <Avatar v-if="item.avatar" class="mt-1" :src="item.avatar" />
             <span v-else> {{ item.avatar }}</span>
           </template>
 
           <template #description>
             <div>
-              <div v-if="item.description" class="description">
+              <div v-if="item.description" class="text-xs/18">
                 <Typography.Paragraph
                   style="width: 100%; margin-bottom: 0 !important"
                   :ellipsis="$props.descRows && $props.descRows > 0 ? { rows: $props.descRows, tooltip: !!item.description } : false"
                   :content="item.description"
                 />
               </div>
-              <div class="datetime">
+              <div class="mt-1 text-xs/18">
                 {{ item.datetime }}
               </div>
             </div>
@@ -118,55 +116,3 @@ function handleTitleClick(item: ListItem) {
     </template>
   </List>
 </template>
-
-<style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-header-notify-list';
-
-.@{prefix-cls} {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  ::v-deep(.ant-pagination-disabled) {
-    display: inline-block !important;
-  }
-
-  &-item {
-    padding: 6px;
-    overflow: hidden;
-    cursor: pointer;
-    transition: all 0.3s;
-
-    .title {
-      margin-bottom: 8px;
-      font-weight: normal;
-
-      .extra {
-        float: right;
-        margin-top: -1.5px;
-        margin-right: 0;
-        font-weight: normal;
-
-        .tag {
-          margin-right: 0;
-        }
-      }
-
-      .avatar {
-        margin-top: 4px;
-      }
-
-      .description {
-        font-size: 12px;
-        line-height: 18px;
-      }
-
-      .datetime {
-        margin-top: 4px;
-        font-size: 12px;
-        line-height: 18px;
-      }
-    }
-  }
-}
-</style>

src/layouts/default/header/components/notify/index.vue

@@ -33,5 +33,3 @@ onMounted(async () => {
     </Tooltip>
   </div>
 </template>
-
-<style lang="less"></style>

src/layouts/default/index.vue

@@ -9,7 +9,6 @@ import LayoutSideBar from './sider/index.vue'
 import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
 import { useAppInject } from '@/hooks/web/useAppInject'
-import { useDesign } from '@/hooks/web/useDesign'
 import { useLockPage } from '@/hooks/web/useLockPage'
 import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
 
@@ -18,7 +17,6 @@ defineOptions({ name: 'DefaultLayout' })
 const LayoutFeatures = createAsyncComponent(() => import('@/layouts/default/feature/index.vue'))
 const LayoutFooter = createAsyncComponent(() => import('@/layouts/default/footer/index.vue'))
 
-const { prefixCls } = useDesign('default-layout')
 const { getIsMobile } = useAppInject()
 const { getShowFullHeaderRef } = useHeaderSetting()
 const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting()
@@ -36,12 +34,12 @@ const layoutClass = computed(() => {
 </script>
 
 <template>
-  <Layout :class="prefixCls" v-bind="lockEvents">
+  <Layout class="min-h-full w-full flex flex-col" v-bind="lockEvents">
     <LayoutFeatures />
     <LayoutHeader v-if="getShowFullHeaderRef" fixed />
     <Layout :class="[layoutClass]">
       <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
-      <Layout :class="`${prefixCls}-main`">
+      <Layout class="ml-0.25 w-full">
         <LayoutMultipleHeader />
         <LayoutContent />
         <LayoutFooter />
@@ -49,19 +47,3 @@ const layoutClass = computed(() => {
     </Layout>
   </Layout>
 </template>
-
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-default-layout';
-
-  .@{prefix-cls} {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    min-height: 100%;
-
-    &-main {
-      width: 100%;
-      margin-left: 1px;
-    }
-  }
-</style>

src/layouts/default/setting/components/InputNumberItem.vue

@@ -2,7 +2,6 @@
 import { InputNumber } from 'ant-design-vue'
 import { baseHandler } from '../handler'
 import type { HandlerEnum } from '../enum'
-import { useDesign } from '@/hooks/web/useDesign'
 
 defineOptions({ name: 'InputNumberItem' })
 
@@ -14,7 +13,6 @@ const props = defineProps({
     type: String,
   },
 })
-const { prefixCls } = useDesign('setting-input-number-item')
 
 function handleChange(e) {
   props.event && baseHandler(props.event, e)
@@ -22,22 +20,8 @@ function handleChange(e) {
 </script>
 
 <template>
-  <div :class="prefixCls">
+  <div class="my-4 flex justify-between">
     <span> {{ title }}</span>
-    <InputNumber v-bind="$attrs" :class="`${prefixCls}-input-number`" @change="handleChange" />
+    <InputNumber v-bind="$attrs" class="max-w-32 w-30" @change="handleChange" />
   </div>
 </template>
-
-<style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-setting-input-number-item';
-
-.@{prefix-cls} {
-  display: flex;
-  justify-content: space-between;
-  margin: 16px 0;
-
-  &-input-number {
-    width: 126px !important;
-  }
-}
-</style>

src/layouts/default/setting/components/SelectItem.vue

@@ -4,7 +4,6 @@ import { computed } from 'vue'
 import { Select } from 'ant-design-vue'
 import { baseHandler } from '../handler'
 import type { HandlerEnum } from '../enum'
-import { useDesign } from '@/hooks/web/useDesign'
 
 defineOptions({ name: 'SelectItem' })
 
@@ -29,33 +28,19 @@ const props = defineProps({
     default: () => [],
   },
 })
-const { prefixCls } = useDesign('setting-select-item')
 const getBindValue = computed(() => {
   return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {}
 })
 
-function handleChange(e: ChangeEvent) {
+function handleChange(e) {
   props.event && baseHandler(props.event, e)
 }
 </script>
 
 <template>
-  <div :class="prefixCls">
+  <div class="my-4 flex justify-between">
     <span> {{ title }}</span>
-    <Select v-bind="getBindValue" :class="`${prefixCls}-select`" :disabled="disabled" :options="options" @change="handleChange as any" />
+    <Select v-bind="getBindValue" class="max-w-32 w-30" :disabled="disabled" :options="options" @change="handleChange" />
   </div>
 </template>
 
-<style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-setting-select-item';
-
-.@{prefix-cls} {
-  display: flex;
-  justify-content: space-between;
-  margin: 16px 0;
-
-  &-select {
-    width: 126px;
-  }
-}
-</style>

src/layouts/default/setting/components/SettingFooter.vue

@@ -8,7 +8,6 @@ import { usePermissionStore } from '@/store/modules/permission'
 import { useMultipleTabStore } from '@/store/modules/multipleTab'
 import { useUserStore } from '@/store/modules/user'
 
-import { useDesign } from '@/hooks/web/useDesign'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useCopyToClipboard } from '@/hooks/web/useCopyToClipboard'
@@ -22,7 +21,6 @@ import { updateSidebarBgColor } from '@/logics/theme/updateBackground'
 defineOptions({ name: 'SettingFooter' })
 
 const permissionStore = usePermissionStore()
-const { prefixCls } = useDesign('setting-footer')
 const { t } = useI18n()
 const { createSuccessModal, createMessage } = useMessage()
 const tabStore = useMultipleTabStore()
@@ -63,7 +61,7 @@ function handleClearAndRedo() {
 </script>
 
 <template>
-  <div :class="prefixCls">
+  <div class="flex flex-col items-center">
     <a-button type="primary" block @click="handleCopy">
       <CopyOutlined class="mr-2" />
       {{ t('layout.setting.copyBtn') }}
@@ -80,13 +78,3 @@ function handleClearAndRedo() {
     </a-button>
   </div>
 </template>
-
-<style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-setting-footer';
-
-.@{prefix-cls} {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-</style>

src/layouts/default/setting/components/SwitchItem.vue

@@ -4,7 +4,6 @@ import { computed } from 'vue'
 import { Switch } from 'ant-design-vue'
 import { baseHandler } from '../handler'
 import type { HandlerEnum } from '../enum'
-import { useDesign } from '@/hooks/web/useDesign'
 import { useI18n } from '@/hooks/web/useI18n'
 
 defineOptions({ name: 'SwitchItem' })
@@ -23,7 +22,6 @@ const props = defineProps({
     type: Boolean,
   },
 })
-const { prefixCls } = useDesign('setting-switch-item')
 const { t } = useI18n()
 
 const getBindValue = computed(() => {
@@ -35,7 +33,7 @@ function handleChange(e) {
 </script>
 
 <template>
-  <div :class="prefixCls">
+  <div class="my-4 flex justify-between">
     <span> {{ title }}</span>
     <Switch
       v-bind="getBindValue"
@@ -46,13 +44,3 @@ function handleChange(e) {
     />
   </div>
 </template>
-
-<style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-setting-switch-item';
-
-.@{prefix-cls} {
-  display: flex;
-  justify-content: space-between;
-  margin: 16px 0;
-}
-</style>

src/views/base/login/Login.vue

@@ -26,7 +26,7 @@ const title = computed(() => globSetting?.title ?? '')
 </script>
 
 <template>
-  <div :class="prefixCls" class="relative h-full w-full px-4">
+  <div :class="prefixCls" class="relative h-full min-h-full w-full overflow-hidden 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" />
@@ -108,9 +108,6 @@ html[data-theme='dark'] {
 }
 
 .@{prefix-cls} {
-  min-height: 100%;
-  overflow: hidden;
-
   @media (max-width: @screen-xl) {
     background-color: #293146;
 

src/views/base/login/SessionTimeoutLogin.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import Login from './Login.vue'
-import { useDesign } from '@/hooks/web/useDesign'
 import { useUserStore } from '@/store/modules/user'
 import { usePermissionStore } from '@/store/modules/permission'
 import { useAppStore } from '@/store/modules/app'
 import { PermissionModeEnum } from '@/enums/appEnum'
 
-const { prefixCls } = useDesign('st-login')
 const userStore = useUserStore()
 const permissionStore = usePermissionStore()
 const appStore = useAppStore()
@@ -36,20 +34,8 @@ onBeforeUnmount(() => {
 
 <template>
   <transition>
-    <div :class="prefixCls">
+    <div class="fixed z-9999999 h-full w-full bg-[var(--component-background)]">
       <Login session-timeout />
     </div>
   </transition>
 </template>
-
-<style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-st-login';
-
-.@{prefix-cls} {
-  position: fixed;
-  z-index: 9999999;
-  width: 100%;
-  height: 100%;
-  background: var(--component-background);
-}
-</style>

src/views/base/profile/AccountBind.vue

@@ -32,11 +32,11 @@ onMounted(async () => {
         <List.Item>
           <List.Item.Meta>
             <template #avatar>
-              <Icon v-if="item.avatar" class="avatar" :icon="item.avatar" :color="item.color" />
+              <Icon v-if="item.avatar" class="text-4xl" :icon="item.avatar" :color="item.color" />
             </template>
             <template #title>
               {{ item.title }}
-              <a-button v-if="item.extra" type="link" size="small" class="extra">
+              <a-button v-if="item.extra" type="link" size="small" class="float-right mr-7.5 mt-2.5 cursor-pointer">
                 {{ item.extra }}
               </a-button>
             </template>
@@ -49,16 +49,3 @@ onMounted(async () => {
     </List>
   </CollapseContainer>
 </template>
-
-<style lang="less" scoped>
-.avatar {
-  font-size: 40px !important;
-}
-
-.extra {
-  float: right;
-  margin-top: 10px;
-  margin-right: 30px;
-  cursor: pointer;
-}
-</style>

src/views/base/profile/BaseSetting.vue

@@ -54,7 +54,7 @@ async function handleSubmit() {
         <BasicForm @register="register" />
       </Col>
       <Col :span="10">
-        <div class="change-avatar">
+        <div>
           <div class="mb-2">
             头像
           </div>
@@ -63,6 +63,7 @@ async function handleSubmit() {
             btn-text="更换头像"
             :btn-props="{ preIcon: 'ant-design:cloud-upload-outlined' }"
             width="150"
+            class="mb-4 block rounded-full"
             @change="updateAvatar"
           />
         </div>
@@ -73,13 +74,3 @@ async function handleSubmit() {
     </Button>
   </CollapseContainer>
 </template>
-
-<style lang="less" scoped>
-.change-avatar {
-  img {
-    display: block;
-    margin-bottom: 15px;
-    border-radius: 50%;
-  }
-}
-</style>

src/views/base/profile/MsgNotify.vue

@@ -15,7 +15,7 @@ const ListItemMeta = List.Item.Meta
           <ListItemMeta>
             <template #title>
               {{ item.title }}
-              <Switch class="extra" checked-children="开" un-checked-children="关" default-checked />
+              <Switch class="float-right mr-7.5 mt-0" checked-children="开" un-checked-children="关" default-checked />
             </template>
             <template #description>
               <div>{{ item.description }}</div>
@@ -26,11 +26,3 @@ const ListItemMeta = List.Item.Meta
     </List>
   </CollapseContainer>
 </template>
-
-<style lang="less" scoped>
-.extra {
-  float: right;
-  margin-top: 10px;
-  margin-right: 30px;
-}
-</style>

src/views/base/profile/SecureSetting.vue

@@ -29,7 +29,7 @@ function handleSuccess() {
           <ListItemMeta>
             <template #title>
               {{ item.title }}
-              <div v-if="item.extra" class="extra">
+              <div v-if="item.extra" class="float-right mr-7.5 mt-2.5 cursor-pointer font-normal text-blue-500">
                 <a-button type="link" @click="handleEdit(item.title)">
                   {{ item.extra }}
                 </a-button>
@@ -45,14 +45,3 @@ function handleSuccess() {
   </CollapseContainer>
   <PasswordModal @register="registerModal" @success="handleSuccess" />
 </template>
-
-<style lang="less" scoped>
-.extra {
-  float: right;
-  margin-top: 10px;
-  margin-right: 30px;
-  font-weight: normal;
-  color: #1890ff;
-  cursor: pointer;
-}
-</style>

src/views/base/profile/index.vue

@@ -15,7 +15,7 @@ const tabBarStyle = { width: '220px' }
 
 <template>
   <ScrollContainer>
-    <div ref="wrapperRef" class="account-setting">
+    <div ref="wrapperRef" class="m-3 rounded-1.5 bg-[var(--component-background)]">
       <Tabs tab-position="left" :tab-bar-style="tabBarStyle">
         <template v-for="item in settingList" :key="item.key">
           <TabPane :tab="item.name">
@@ -29,19 +29,3 @@ const tabBarStyle = { width: '220px' }
     </div>
   </ScrollContainer>
 </template>
-
-<style lang="less">
-.account-setting {
-  margin: 12px;
-  background-color: var(--component-background);
-  border-radius: 6px;
-
-  .base-title {
-    padding-left: 0;
-  }
-
-  // .ant-tabs-tab-active {
-  //   background-color: @item-active-bg;
-  // }
-}
-</style>

src/views/bpm/processInstance/create/index.vue

@@ -78,7 +78,7 @@ async function submitForm(formData) {
 
 <template>
   <PageWrapper>
-    <div class="step-form-form">
+    <div class="mx-auto my-0 mt-2.5 w-200">
       <Steps :current="current">
         <Steps.Step title="选择流程" />
         <Steps.Step title="流程提交" />
@@ -113,11 +113,3 @@ async function submitForm(formData) {
     </div>
   </PageWrapper>
 </template>
-
-<style lang="less" scoped>
-.step-form-form {
-  width: 750px;
-  margin: 0 auto;
-  margin-top: 10px;
-}
-</style>

src/views/infra/codegen/EditTable.vue

@@ -73,7 +73,7 @@ onMounted(async () => {
 
 <template>
   <PageWrapper>
-    <div class="step-form-form">
+    <div class="mx-auto my-0 mt-2.5 w-200">
       <Steps :current="current">
         <Step title="生成信息" />
         <Step title="字段信息" />
@@ -94,11 +94,3 @@ onMounted(async () => {
     </div>
   </PageWrapper>
 </template>
-
-<style lang="less" scoped>
-.step-form-form {
-  width: 750px;
-  margin: 0 auto;
-  margin-top: 10px;
-}
-</style>

src/views/infra/codegen/components/BasicInfoForm.vue

@@ -51,46 +51,20 @@ watch(
 </script>
 
 <template>
-  <div class="step1">
+  <div>
-    <div class="step1-form">
+    <div class="mx-auto my-0 w-80%">
       <BasicForm @register="register" />
     </div>
     <Divider />
-    <h3>说明</h3>
+    <h3 class="mb-3 text-base">
-    <h4>基本信息</h4>
+      说明
+    </h3>
+    <h4 class="mb-1 text-sm">
+      基本信息
+    </h4>
     <p> 配置生成的基本信息 </p>
 
     <h4>生成信息</h4>
     <p> 配置生成生成的详细信息。 </p>
   </div>
 </template>
-
-<style lang="less" scoped>
-.step1 {
-  &-form {
-    width: 80%;
-    margin: 0 auto;
-  }
-
-  h3 {
-    margin: 0 0 12px;
-    font-size: 16px;
-    line-height: 32px;
-  }
-
-  h4 {
-    margin: 0 0 4px;
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-}
-
-.pay-select {
-  width: 20%;
-}
-
-.pay-input {
-  width: 70%;
-}
-</style>

src/views/infra/codegen/components/CloumInfoForm.vue

@@ -39,11 +39,11 @@ function handleEdit(record: EditRecordRow) {
 
 <template>
   <div class="step2">
-    <div class="step2-table">
+    <div class="mx-auto my-0 w-full">
       <BasicTable :data-source="columnsInfo" @register="registerTable" @row-click="handleEdit" />
     </div>
     <Divider />
-    <div class="step2-button">
+    <div class="flex justify-center">
       <a-button @click="customResetFunc">
         上一步
       </a-button>
@@ -51,35 +51,12 @@ function handleEdit(record: EditRecordRow) {
         提交
       </a-button>
     </div>
-    <h3>说明</h3>
+    <h3 class="mb-3 text-base">
-    <h4>配置字段</h4>
+      说明
+    </h3>
+    <h4 class="mb-1 text-sm">
+      配置字段
+    </h4>
     <p> 配置表的字段类型，增删改查，字典等 </p>
   </div>
 </template>
-
-<style lang="less" scoped>
-.step2 {
-  &-table {
-    width: 100%;
-    margin: 0 auto;
-  }
-
-  &-button {
-    display: flex;
-    justify-content: center;
-  }
-
-  h3 {
-    margin: 0 0 12px;
-    font-size: 16px;
-    line-height: 32px;
-  }
-
-  h4 {
-    margin: 0 0 4px;
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-}
-</style>

src/views/infra/codegen/components/FinishForm.vue

@@ -36,7 +36,7 @@ function handleGoList() {
 </script>
 
 <template>
-  <div class="result-success m-5">
+  <div class="m-5 bg-white px-8 py-12 dark:bg-dark">
     <Result status="success" title="代码生成成功" sub-title="可点击下方按钮预览、下载，或返回列表页。">
       <template #extra>
         <a-button key="console" type="primary" @click="handleGoList">
@@ -53,15 +53,3 @@ function handleGoList() {
     <PreviewModal @register="registerPreviewModal" />
   </div>
 </template>
-
-<style lang="less" scoped>
-.result-success {
-  padding: 48px 32px;
-  background-color: var(--component-background);
-
-  &__content {
-    padding: 24px 40px;
-    background-color: @background-color-light;
-  }
-}
-</style>