wip: v2 coding

package.json

@@ -66,9 +66,11 @@
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
+    "@unocss/preset-wind": "^0.51.4",
     "@vitejs/plugin-legacy": "^4.0.2",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vue-macros/volar": "^0.9.5",
     "autoprefixer": "^10.4.14",
     "consola": "^3.0.1",
     "eslint": "^8.38.0",
@@ -94,6 +96,7 @@
     "stylelint-order": "^6.0.3",
     "terser": "^5.16.9",
     "typescript": "5.0.4",
+    "unocss": "^0.51.4",
     "unplugin-vue-define-options": "^1.3.3",
     "vite": "4.2.1",
     "vite-plugin-ejs": "^1.6.4",

src/components/Descriptions/src/Descriptions.vue

@@ -68,7 +68,7 @@ const toggleClick = () => {
   <div
     :class="[
       prefixCls,
-      'bg-[var(--el-color-white)] dark:(bg-[var(--el-bg-color)] border-[var(--el-border-color)] border-1px)'
+      'bg-[var(--el-color-white)] dark:bg-[var(--el-bg-color)] dark:border-[var(--el-border-color)] dark:border-1px'
     ]"
   >
     <div

src/layout/components/useRenderLayout.tsx

@@ -83,9 +83,9 @@ export const useRenderLayout = () => {
               class={[
                 {
                   'fixed top-0 left-0 z-10': fixedHeader.value,
-                  'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
+                  'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
                     collapse.value && fixedHeader.value && !mobile.value,
-                  'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
+                  'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
                     !collapse.value && fixedHeader.value && !mobile.value,
                   '!w-full !left-0': mobile.value
                 }

src/main.ts

@@ -1,5 +1,5 @@
 // 引入windi css
-import '@/plugins/windi.css'
+import '@/plugins/unocss'
 
 // 导入全局的svg图标
 import '@/plugins/svgIcon'

src/plugins/unocss/index.ts

@@ -0,0 +1 @@
+import 'virtual:uno.css'

src/plugins/windi.css/index.ts

@@ -1,3 +0,0 @@
-import 'virtual:windi.css'
-
-import 'virtual:windi-devtools'

src/views/Dashboard/Workplace.vue

@@ -133,7 +133,7 @@ const { t } = useI18n()
             </div>
           </ElCol>
           <ElCol :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-            <div class="flex h-70px items-center justify-end <sm:mt-20px">
+            <div class="flex h-70px items-center justify-end lt-sm:mt-20px">
               <div class="px-8px text-right">
                 <div class="text-14px text-gray-400 mb-20px">{{ t('workplace.project') }}</div>
                 <CountTo

src/views/Login/Login.vue

@@ -30,11 +30,11 @@ const toLogin = () => {
 <template>
   <div
     :class="prefixCls"
-    class="h-[100%] relative <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px"
+    class="h-[100%] relative lt-xl:v-dark lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
   >
     <div class="relative h-full flex mx-auto">
       <div
-        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px <xl:hidden`"
+        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
       >
         <div class="flex items-center relative text-white">
           <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
@@ -54,30 +54,32 @@ const toLogin = () => {
           </TransitionGroup>
         </div>
       </div>
-      <div class="flex-1 p-30px <sm:p-10px dark:bg-v-dark relative">
-        <div class="flex justify-between items-center text-white @2xl:justify-end @xl:justify-end">
-          <div class="flex items-center @2xl:hidden @xl:hidden">
+      <div class="flex-1 p-30px lt-sm:p-10px dark:v-dark relative">
+        <div
+          class="flex justify-between items-center text-white at-2xl:justify-end at-xl:justify-end"
+        >
+          <div class="flex items-center at-2xl:hidden at-xl:hidden">
             <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
             <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
           </div>
 
           <div class="flex justify-end items-center space-x-10px">
             <ThemeSwitch />
-            <LocaleDropdown class="<xl:text-white dark:text-white" />
+            <LocaleDropdown class="lt-xl:text-white dark:text-white" />
           </div>
         </div>
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
-            class="h-full flex items-center m-auto w-[100%] @2xl:max-w-500px @xl:max-w-500px @md:max-w-500px @lg:max-w-500px"
+            class="h-full flex items-center m-auto w-[100%] at-2xl:max-w-500px at-xl:max-w-500px at-md:max-w-500px at-lg:max-w-500px"
           >
             <LoginForm
               v-if="isLogin"
-              class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)"
+              class="p-20px h-auto m-auto lt-xl:rounded-3xl lt-xl:light:bg-white"
               @to-register="toRegister"
             />
             <RegisterForm
               v-else
-              class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)"
+              class="p-20px h-auto m-auto lt-xl:rounded-3xl lt-xl:light:bg-white"
               @to-login="toLogin"
             />
           </div>

src/views/Login/components/LoginForm.vue

@@ -191,7 +191,7 @@ const toRegister = () => {
     label-position="top"
     hide-required-asterisk
     size="large"
-    class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
+    class="dark:border-1 dark:border-[var(--el-border-color)] dark:border-solid"
     @register="register"
   >
     <template #title>

src/views/Login/components/RegisterForm.vue

@@ -116,7 +116,7 @@ const loginRegister = async () => {
     label-position="top"
     hide-required-asterisk
     size="large"
-    class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
+    class="dark:border-1 dark:border-[var(--el-border-color)] dark:border-solid"
     @register="register"
   >
     <template #title>

tsconfig.json

@@ -10,7 +10,7 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-    "baseUrl": ".",
+    "baseUrl": "./",
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,
     "allowSyntheticDefaultImports": true,
@@ -31,9 +31,8 @@
       "@types/qrcode",
       "vite-plugin-svg-icons/client",
       "unplugin-vue-define-options/macros-global"
-    ],
-    "typeRoots": ["./node_modules/@types/", "./types"]
+    ]
   },
-  "include": ["src/**/*", "types/**/*.d.ts", "mock/**/*.ts"],
-  "exclude": ["dist", "node_modules"]
+  "include": ["src", "types/**/*.d.ts", "mock/**/*.ts"]
+  // "exclude": ["dist", "node_modules"]
 }

uno.config.ts

@@ -0,0 +1,45 @@
+import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
+
+export default defineConfig({
+  // ...UnoCSS options
+  rules: [
+    [
+      'v-dark',
+      {
+        'background-color': 'var(--dark-bg-color)'
+      }
+    ],
+    [/^border-top-(\d+)$/, (match) => ({ 'border-top-width': `${match[1]}px` })],
+    [/^border-left-(\d+)$/, (match) => ({ 'border-left-width': `${match[1]}px` })],
+    [/^border-right-(\d+)$/, (match) => ({ 'border-right-width': `${match[1]}px` })],
+    [/^border-bottom-(\d+)$/, (match) => ({ 'border-bottom-width': `${match[1]}px` })],
+    [
+      /^hover-trigger(.+)$/,
+      ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
+        console.log(variantHandlers)
+        // if you want, you can disable the variants for this rule
+        if (variantHandlers.length) return
+        const selector = e(rawSelector)
+        // return a string instead of an object
+        return `
+${selector} {
+  display: flex;
+  height: 100%;
+  padding: 1px 10px 0;
+  cursor: pointer;
+  align-items: center;
+  transition: background var(--transition-time-02);
+}
+/* you can have multiple rules */
+${selector}:hover {
+  background-color: var(--top-header-hover-color);
+}
+.dark ${selector} {
+  background-color: var(--el-bg-color-overlay);
+}
+`
+      }
+    ]
+  ],
+  presets: [presetUno({ dark: 'class', attributify: false })]
+})

vite.config.ts

@@ -3,7 +3,7 @@ import { loadEnv } from 'vite'
 import type { UserConfig, ConfigEnv } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import VueJsx from '@vitejs/plugin-vue-jsx'
-import WindiCSS from 'vite-plugin-windicss'
+// import WindiCSS from 'vite-plugin-windicss'
 import progress from 'vite-plugin-progress'
 import EslintPlugin from 'vite-plugin-eslint'
 import { ViteEjsPlugin } from "vite-plugin-ejs"
@@ -11,8 +11,11 @@ import { viteMockServe } from 'vite-plugin-mock'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite"
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+// @ts-expect-error
 import DefineOptions from "unplugin-vue-define-options/vite"
 import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
+import UnoCSS from 'unocss/vite'
+// import { sveltekit } from '@sveltejs/kit/vite'
 
 // https://vitejs.dev/config/
 const root = process.cwd()
@@ -34,7 +37,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     plugins: [
       Vue(),
       VueJsx(),
-      WindiCSS(),
+      // WindiCSS(),
       progress(),
       createStyleImportPlugin({
         resolves: [ElementPlusResolve()],
@@ -75,7 +78,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       DefineOptions(),
       ViteEjsPlugin({
         title: env.VITE_APP_TITLE
-      })
+      }),
+      UnoCSS(),
+      // sveltekit(),
     ],
 
     css: {