wip: v2 coding

src/components/ContentDetailWrap/src/ContentDetailWrap.vue

@@ -29,7 +29,7 @@ onMounted(() => {
       <div
         :class="[
           `${prefixCls}-header`,
-          'flex border-bottom-1 h-50px items-center text-center bg-white pr-10px'
+          'flex b-b-1 h-50px items-center text-center bg-white pr-10px'
         ]"
       >
         <div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']">

src/components/Descriptions/src/Descriptions.vue

@@ -75,7 +75,7 @@ const toggleClick = () => {
       v-if="title"
       :class="[
         `${prefixCls}-header`,
-        'h-50px flex justify-between items-center border-bottom-1 border-solid border-[var(--tags-view-border-color)] px-10px cursor-pointer dark:border-[var(--el-border-color)]'
+        'h-50px flex justify-between items-center b-b-1 border-solid border-[var(--tags-view-border-color)] px-10px cursor-pointer dark:border-[var(--el-border-color)]'
       ]"
       @click="toggleClick"
     >

src/components/Editor/src/Editor.vue

@@ -121,7 +121,7 @@ defineExpose({
     <Toolbar
       :editor="editorRef"
       :editorId="editorId"
-      class="border-bottom-1 border-solid border-[var(--tags-view-border-color)]"
+      class="b-b-1 border-solid border-[var(--tags-view-border-color)]"
     />
     <!-- 编辑器 -->
     <Editor

src/components/LocaleDropdown/src/LocaleDropdown.vue

@@ -37,7 +37,7 @@ const setLang = (lang: LocaleType) => {
     <Icon
       :size="18"
       icon="ion:language-sharp"
-      class="cursor-pointer"
+      class="cursor-pointer !p-0"
       :class="$attrs.class"
       :color="color"
     />

src/components/TabMenu/src/TabMenu.vue

@@ -197,7 +197,7 @@ export default defineComponent({
         </div>
         <Menu
           class={[
-            '!absolute top-0 border-left-1 border-solid border-[var(--left-menu-bg-light-color)]',
+            '!absolute top-0 b-l-1 border-solid border-[var(--left-menu-bg-light-color)]',
             {
               '!left-[var(--tab-menu-min-width)]': unref(collapse),
               '!left-[var(--tab-menu-max-width)]': !unref(collapse),

src/layout/components/ToolHeader.vue

@@ -48,25 +48,25 @@ export default defineComponent({
         {layout.value !== 'top' ? (
           <div class="h-full flex items-center">
             {hamburger.value && layout.value !== 'cutMenu' ? (
-              <Collapse class="hover-trigger" color="var(--top-header-text-color)"></Collapse>
+              <Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
             ) : undefined}
             {breadcrumb.value ? <Breadcrumb class="<md:hidden"></Breadcrumb> : undefined}
           </div>
         ) : undefined}
         <div class="h-full flex items-center">
           {screenfull.value ? (
-            <Screenfull class="hover-trigger" color="var(--top-header-text-color)"></Screenfull>
+            <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
           ) : undefined}
           {size.value ? (
-            <SizeDropdown class="hover-trigger" color="var(--top-header-text-color)"></SizeDropdown>
+            <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
           ) : undefined}
           {locale.value ? (
             <LocaleDropdown
-              class="hover-trigger"
+              class="custom-hover"
               color="var(--top-header-text-color)"
             ></LocaleDropdown>
           ) : undefined}
-          <UserInfo class="hover-trigger"></UserInfo>
+          <UserInfo class="custom-hover"></UserInfo>
         </div>
       </div>
     )

src/layout/components/useRenderLayout.tsx

@@ -43,7 +43,7 @@ export const useRenderLayout = () => {
           {logo.value ? (
             <Logo
               class={[
-                'bg-[var(--left-menu-bg-color)] border-bottom-1 border-solid border-[var(--logo-border-color)] dark:border-[var(--el-border-color)]',
+                'bg-[var(--left-menu-bg-color)] relative dark:custom-b-b-1',
                 {
                   '!pl-0': mobile.value && collapse.value,
                   'w-[var(--left-menu-min-width)]': appStore.getCollapse,
@@ -92,10 +92,10 @@ export const useRenderLayout = () => {
               ]}
               style="transition: all var(--transition-time-02);"
             >
-              <ToolHeader class="border-bottom-1 border-solid border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)] dark:border-[var(--el-border-color)]"></ToolHeader>
+              <ToolHeader class="border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)] dark:border-[var(--el-border-color)]"></ToolHeader>
 
               {tagsView.value ? (
-                <TagsView class="border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]"></TagsView>
+                <TagsView class="b-b-1 b-t-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]"></TagsView>
               ) : undefined}
             </div>
 
@@ -109,8 +109,8 @@ export const useRenderLayout = () => {
   const renderTopLeft = () => {
     return (
       <>
-        <div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
-          {logo.value ? <Logo class="hover-trigger !pr-15px"></Logo> : undefined}
+        <div class="flex items-center bg-[var(--top-header-bg-color)] b-b-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
+          {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
 
           <ToolHeader class="flex-1"></ToolHeader>
         </div>
@@ -142,7 +142,7 @@ export const useRenderLayout = () => {
               {tagsView.value ? (
                 <TagsView
                   class={[
-                    'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
+                    'b-b-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
                     {
                       '!fixed top-0 left-0 z-10': fixedHeader.value,
                       'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
@@ -166,8 +166,8 @@ export const useRenderLayout = () => {
   const renderTop = () => {
     return (
       <>
-        <div class="flex items-center justify-between bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
-          {logo.value ? <Logo class="hover-trigger"></Logo> : undefined}
+        <div class="flex items-center justify-between bg-[var(--top-header-bg-color)] b-b-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
+          {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
           <Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
           <ToolHeader></ToolHeader>
         </div>
@@ -186,7 +186,7 @@ export const useRenderLayout = () => {
             {tagsView.value ? (
               <TagsView
                 class={[
-                  'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
+                  'b-b-1 b-t-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
                   {
                     '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
                   }
@@ -205,8 +205,8 @@ export const useRenderLayout = () => {
   const renderCutMenu = () => {
     return (
       <>
-        <div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
-          {logo.value ? <Logo class="hover-trigger !pr-15px"></Logo> : undefined}
+        <div class="flex items-center bg-[var(--top-header-bg-color)] b-b-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
+          {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
 
           <ToolHeader class="flex-1"></ToolHeader>
         </div>
@@ -242,7 +242,7 @@ export const useRenderLayout = () => {
               {tagsView.value ? (
                 <TagsView
                   class={[
-                    'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
+                    'b-b-1 b-t-1 border-solid border-[var(--tags-view-border-color)] dark:border-[var(--el-border-color)]',
                     {
                       '!fixed top-0 left-0 z-10': fixedHeader.value,
                       'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':

src/styles/var.css

@@ -40,6 +40,8 @@
 
   --top-tool-p-x: 0;
 
+  --custom-border-color-light: #eee;
+
   --top-tool-border-color: #eee;
 
   --tags-view-height: 35px;

src/views/Login/Login.vue

@@ -30,7 +30,7 @@ const toLogin = () => {
 <template>
   <div
     :class="prefixCls"
-    class="h-[100%] relative lt-xl:v-dark lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
+    class="h-[100%] relative lt-xl:bg-[var(--dark-bg-color)] lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
   >
     <div class="relative h-full flex mx-auto">
       <div
@@ -54,7 +54,7 @@ const toLogin = () => {
           </TransitionGroup>
         </div>
       </div>
-      <div class="flex-1 p-30px lt-sm:p-10px dark:v-dark relative">
+      <div class="flex-1 p-30px lt-sm:p-10px dark:bg-[var(--dark-bg-color)] relative">
         <div
           class="flex justify-between items-center text-white at-2xl:justify-end at-xl:justify-end"
         >

uno.config.ts

@@ -1,26 +1,47 @@
 import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
+// color: ${JSON.stringify(rules)} ${JSON.stringify(variantHandlers)};
+
+const POSITION_MAP = {
+  t: 'top',
+  b: 'bottom',
+  l: 'left',
+  r: 'right',
+  top: 'top',
+  bottom: 'bottom',
+  left: 'left',
+  right: 'right'
+}
 
 export default defineConfig({
   // ...UnoCSS options
   rules: [
     [
-      'v-dark',
-      {
-        'background-color': 'var(--dark-bg-color)'
+      /^custom-b-(.+)-(\d+)$/,
+      ([_, position, count], { rawSelector, rules, variantHandlers }) => {
+        // custom-b-bottom-1 或者 custom-b-b-1
+        const selector = e(rawSelector)
+        const newPosition = POSITION_MAP[position]
+        return `
+${selector}:after {
+  content: '';
+  position: absolute;
+  width: ${newPosition === 'bottom' || newPosition === 'top' ? '100%' : count + 'px'};
+  height: ${newPosition === 'left' || newPosition === 'right' ? '100%' : count + 'px'};
+  ${newPosition === 'bottom' ? 'bottom' : 'top'}: 0px;
+  ${newPosition === 'right' ? 'right' : 'left'}: 0px;
+  background-color: var(--custom-border-color-light);
+}
+
+.dark ${selector}:after {
+  background-color: var(--el-border-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
+      /^custom-hover$/,
+      ([], { rawSelector }) => {
         const selector = e(rawSelector)
-        // return a string instead of an object
         return `
 ${selector} {
   display: flex;
@@ -34,7 +55,7 @@ ${selector} {
 ${selector}:hover {
   background-color: var(--top-header-hover-color);
 }
-.dark ${selector} {
+.dark ${selector}:hover {
   background-color: var(--el-bg-color-overlay);
 }
 `