chore: update css when use @apply

config/config.ts

@@ -22,7 +22,7 @@ export default defineConfig({
   srcTranspiler: 'esbuild',
   fastRefresh: true,
   unocss: {
-    watch: ['src/pages/**/*.{jsx,tsx,less}', 'src/components/**/*.{jsx,tsx,less}'] // 添加其他包含 unocss 的 classname 的文件目录
+    watch: ['src/pages/global.less', 'src/pages/**/*.{jsx,tsx,less}', 'src/components/**/*.{jsx,tsx,less}'] // 添加其他包含 unocss 的 classname 的文件目录
   },
   // Fast Refresh 热更新
   theme: { 'primary-color': '#886ab5' },

package.json

@@ -33,6 +33,8 @@
     "@ant-design/pro-layout": "6.38.8",
     "@ant-design/pro-table": "2.76.3",
     "@icon-park/react": "^1.3.5",
+    "@umijs/max": "4.0.7",
+    "@umijs/plugins": "4.0.7",
     "ahooks": "2.10.9",
     "antd": "^4.19.5",
     "array-move": "^4.0.0",
@@ -45,9 +47,7 @@
     "react-dom": "18.1.0",
     "react-helmet-async": "^1.2.3",
     "react-markdown-editor-lite": "^1.3.2",
-    "react-sortable-hoc": "^2.0.0",
-    "@umijs/max": "4.0.7",
-    "@umijs/plugins": "4.0.7"
+    "react-sortable-hoc": "^2.0.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.181",
@@ -55,9 +55,9 @@
     "@types/react-dom": "^18.0.0",
     "babel-plugin-import": "^1.13.3",
     "cross-env": "^7.0.3",
-    "lint-staged": "^10.5.4",
-    "husky": "^8.0.0",
     "eslint": "^8.17.0",
+    "husky": "^8.0.0",
+    "lint-staged": "^10.5.4",
     "prettier": "^2.6.1",
     "stylelint": "^14.9.0",
     "typescript": "^4.6.3",

src/global.less

@@ -1,3 +1,4 @@
+/* stylelint-disable selector-pseudo-element-colon-notation */
 @import '~antd/es/style/themes/default.less';
 
 html,
@@ -22,7 +23,7 @@ canvas {
 }
 
 body {
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -71,41 +72,28 @@ ol {
   justify-content: space-between;
   padding: 1rem;
   word-wrap: break-word;
-  background-color: #fff;
+  background-color: #ffffff;
   background-clip: border-box;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(0 0 0 / 8%);
   border-radius: 4px;
-  box-shadow: 0 0 13px 0 rgba(74, 53, 107, 0.08);
+  box-shadow: 0 0 13px 0 rgba(74 53 107 / 8%);
   &:not(:last-of-type) {
     margin-bottom: 1rem;
   }
 }
 
 .scale-up-center {
-  @apply text-white bg-primary rounded-4px;
-  // -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
-  // animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+  animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
 }
 
-// @-webkit-keyframes scale-up-center {
-//   0% {
-//     -webkit-transform: scale(0.5);
-//     transform: scale(0.5);
-//   }
-//   100% {
-//     -webkit-transform: scale(1);
-//     transform: scale(1);
-//     @apply text-white bg-primary rounded-4px;
-//   }
-// }
-// @keyframes scale-up-center {
-//   0% {
-//     -webkit-transform: scale(0.5);
-//     transform: scale(0.5);
-//   }
-//   100% {
-//     -webkit-transform: scale(1);
-//     transform: scale(1);
-//     @apply text-white bg-primary rounded-4px;
-//   }
-// }
+@keyframes scale-up-center {
+  0% {
+    transform: scale(0.5);
+  }
+  100% {
+    transform: scale(1);
+    color: white;
+    background-color: rgb(136 106 181);
+    border-radius: 4px;
+  }
+}

src/pages/Role/System/components/RoleMenu/index.tsx

@@ -7,7 +7,7 @@ import { ProFormDependency, ProFormSelect } from '@ant-design/pro-form'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
 import classNames from 'classnames'
 import type { ProFormInstance } from '@ant-design/pro-form'
-import styles from './index.less'
+import './index.less'
 import consts from '@/utils/consts'
 type RoleMenuProps = {
   menuId: string
@@ -116,17 +116,13 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect, itemCount }) => {
           {state.menuRoles.map(item => (
             <li
               key={item.id}
-              className={classNames(
-                'flex justify-between items-center py-2 px-5 cursor-pointer',
-                {
-                  'scale-up-center': item.id === state.activeId
-                },
-                styles.node
-              )}>
-              <div className={styles.title} onClick={() => handleItemClick(item.id)}>
+              className={classNames('flex justify-between items-center py-2 px-5 cursor-pointer node', {
+                'scale-up-center': item.id === state.activeId
+              })}>
+              <div className="title" onClick={() => handleItemClick(item.id)}>
                 {item.name}
               </div>
-              <div className={styles.extra}>
+              <div className="extra">
                 <FormOutlined className="pr-2" onClick={() => handleEditIconClick(item.id, item.name)} />
                 <Popconfirm
                   title="确认删除吗？"

unocss.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, presetWind, transformerDirectives } from 'unocss'
+import { defineConfig, presetWind, transformerDirective } from 'unocss'
 import proSettings from './config/defaultSettings'
 export function createConfig({ dev = true } = {}) {
   return defineConfig({
@@ -19,59 +19,10 @@ export function createConfig({ dev = true } = {}) {
         card: '0 0 13px 0 rgba(74, 53, 107, 0.08)'
       }
     },
-    transformers: [transformerDirectives()]
+    transformers: [transformerDirective()]
     // rules: [createEnterPlugin()]
     // variants: [createEnterPlugin()]
   })
 }
 
 export default createConfig()
-/**
- * Used for animation when the element is displayed
- * @param maxOutput The larger the maxOutput output, the larger the generated css volume
- */
-function createEnterPlugin(maxOutput = 10) {
-  const createCss = (index: number, d = 'x') => {
-    const upd = d.toUpperCase()
-    return {
-      [`*> .enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(50px)`
-      },
-      [`*> .-enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(-50px)`
-      },
-      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
-        'z-index': `${10 - index}`,
-        opacity: '0',
-        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
-        'animation-fill-mode': 'forwards',
-        'animation-delay': `${(index * 1) / 10}s`
-      }
-    }
-  }
-  const handler = () => {
-    const addRawCss = {}
-    for (let index = 1; index < maxOutput; index++) {
-      Object.assign(m, {
-        ...createCss(index, 'x'),
-        ...createCss(index, 'y')
-      })
-    }
-    return {
-      ...addRawCss,
-      [`@keyframes enter-x-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateX(0)'
-        }
-      },
-      [`@keyframes enter-y-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateY(0)'
-        }
-      }
-    }
-  }
-  return [/^enter-(x|y)/, () => handler()]
-}