style: style

src/components/Application/src/AppLogo.vue

@@ -54,7 +54,7 @@ function goHome() {
   transition: all 0.2s ease;
 
   &.light {
-    border-bottom: 1px solid @border-color-base;
+    border-bottom: 1px solid var(--border-color);
   }
 
   &.collapsed-show-title {

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

@@ -30,9 +30,9 @@ const { t } = useI18n()
   height: 44px;
   padding: 0 16px;
   font-size: 12px;
-  color: #666;
-  background-color: @component-background;
-  border-top: 1px solid @border-color-base;
+  color: var(--text-color);
+  background-color: var(--component-background);
+  border-top: 1px solid var(--border-color);
   border-radius: 0 0 16px 16px;
 
   &-item {

src/components/Application/src/search/AppSearchModal.vue

@@ -163,7 +163,7 @@ function handleClose() {
     flex-direction: column;
     width: 632px;
     margin: 0 auto auto;
-    background-color: @component-background;
+    background-color: var(--component-background);
     border-radius: 16px;
     box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
   }
@@ -223,7 +223,7 @@ function handleClose() {
       font-size: 14px;
       color: @text-color-base;
       cursor: pointer;
-      background-color: @component-background;
+      background-color: var(--component-background);
       border-radius: 4px;
       box-shadow: 0 1px 3px 0 #d4d9e1;
 

src/components/CardList/src/CardList.vue

@@ -103,10 +103,10 @@ async function handleDelete(id) {
 
 <template>
   <div class="p-2">
-    <div class="p-4 mb-2 bg-white">
+    <div class="p-4 mb-2">
       <BasicForm @register="registerForm" />
     </div>
-    <div class="p-2 bg-white">
+    <div class="p-2">
       <List :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: grid }" :data-source="data" :pagination="paginationProp">
         <template #header>
           <div class="flex justify-end space-x-2">

src/components/Container/src/collapse/CollapseContainer.vue

@@ -93,8 +93,8 @@ export default defineComponent({
 @prefix-cls: ~'@{namespace}-collapse-container';
 
 .@{prefix-cls} {
-  // background-color: @component-background;
-  border-radius: 2px;
+  background-color: var(--component-background);
+  border-radius: 6px;
   transition: all 0.3s ease-in-out;
 
   &__header {
@@ -102,11 +102,11 @@ export default defineComponent({
     align-items: center;
     justify-content: space-between;
     height: 32px;
-    border-bottom: 1px solid @border-color-light;
+    border-bottom: 1px solid var(--border-color);
   }
 
   &__footer {
-    border-top: 1px solid @border-color-light;
+    border-top: 1px solid var(--border-color);
   }
 
   &__action {

src/components/ContextMenu/src/ContextMenu.vue

@@ -175,7 +175,7 @@ export default defineComponent({
   margin: 0;
   list-style: none;
   user-select: none;
-  background-color: @component-background;
+  background-color: var(--component-background);
   background-clip: padding-box;
   border: 1px solid rgb(0 0 0 / 8%);
   border-radius: 0.25rem;

src/components/Cropper/src/CopperModal.vue

@@ -226,7 +226,7 @@ async function handleOk() {
     height: 220px;
     margin: 0 auto;
     overflow: hidden;
-    border: 1px solid @border-color-base;
+    border: 1px solid var(--border-color);
     border-radius: 50%;
 
     img {
@@ -241,7 +241,7 @@ async function handleOk() {
     justify-content: space-around;
     padding-top: 8px;
     margin-top: 8px;
-    border-top: 1px solid @border-color-base;
+    border-top: 1px solid var(--border-color);
   }
 }
 </style>

src/components/Cropper/src/CropperAvatar.vue

@@ -85,8 +85,8 @@ defineExpose({ openModal: openModal.bind(null, true), closeModal })
   &-image-wrapper {
     overflow: hidden;
     cursor: pointer;
-    background: @component-background;
-    border: 1px solid @border-color-base;
+    background: var(--component-background);
+    border: 1px solid var(--border-color);
     border-radius: 50%;
 
     img {

src/components/Drawer/src/BasicDrawer.vue

@@ -170,7 +170,7 @@ function handleOk() {
   .ant-drawer-body {
     height: calc(100% - @header-height);
     padding: 0;
-    // background-color: @component-background;
+    background-color: var(--component-background);
 
     .scrollbar__wrap {
       padding: 16px !important;

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

@@ -63,8 +63,8 @@ function handleClose() {
   width: 100%;
   padding: 0 12px 0 20px;
   text-align: right;
-  // background-color: @component-background;
-  border-top: 1px solid @border-color-base;
+  background-color: var(--component-background);
+  border-top: 1px solid var(--border-color);
 
   > * {
     margin-right: 8px;

src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue

@@ -84,7 +84,7 @@ ul {
     margin: 2.7px;
     line-height: 20px;
     cursor: move;
-    border: 1px solid @border-color;
+    border: 1px solid var(--border-color);
     border-radius: 3px;
     transition: all 0.3s;
 

src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue

@@ -113,7 +113,7 @@ export default defineComponent({
   font-size: 16px;
   line-height: @operating-area-height;
   text-align: left;
-  border-bottom: 2px solid @border-color;
+  border-bottom: 2px solid var(--border-color);
 
   a {
     margin: 0 5px;

src/components/Page/src/PageFooter.vue

@@ -33,8 +33,9 @@ const { getCalcContentWidth } = useMenuSetting()
   width: 100%;
   padding: 0 24px;
   line-height: 44px;
-  background-color: @component-background;
-  border-top: 1px solid @border-color-base;
+  color: var(--text-color);
+  background-color: var(--component-background);
+  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%),

src/components/Page/src/PageWrapper.vue

@@ -143,7 +143,7 @@ watch(
   position: relative;
 
   .@{prefix-cls}-content {
-    margin: 16px;
+    margin: 12px;
   }
 
   .ant-page-header {
@@ -152,9 +152,9 @@ watch(
     }
   }
 
-  // &-content-bg {
-  //   background-color: @component-background;
-  // }
+  &-content-bg {
+    background-color: var(--component-background);
+  }
 
   &--dense {
     .@{prefix-cls}-content {

src/components/Table/src/BasicTable.vue

@@ -312,8 +312,6 @@ emit('register', tableAction, formActions)
 </template>
 
 <style lang="less">
-@border-color: #cecece4d;
-
 @prefix-cls: ~'@{namespace}-basic-table';
 
 [data-theme='dark'] {
@@ -327,21 +325,15 @@ emit('register', tableAction, formActions)
   max-width: 100%;
   height: 100%;
 
-  &-row__striped {
-    td {
-      // background-color: @app-content-background;
-    }
-  }
-
   &-form-container {
-    padding: 16px;
+    padding: 12px;
 
     .ant-form {
       width: 100%;
       padding: 12px 10px 6px;
-      margin-bottom: 16px;
-      // background-color: @component-background;
-      border-radius: 2px;
+      margin-bottom: 12px;
+      background-color: var(--component-background);
+      border-radius: 6px;
     }
   }
 
@@ -353,8 +345,8 @@ emit('register', tableAction, formActions)
 
   .ant-table-wrapper {
     padding: 6px;
-    // background-color: @component-background;
-    border-radius: 2px;
+    background-color: var(--component-background);
+    border-radius: 6px;
 
     .ant-table-title {
       min-height: 40px;

src/components/Table/src/components/TableHeader.vue

@@ -56,6 +56,7 @@ function handleColumnChange(data: ColumnChangeParam[]) {
     flex: 1;
     align-items: center;
     justify-content: flex-end;
+    padding-top: 10px;
 
     > * {
       margin-right: 8px;

src/components/Tree/style/index.less

@@ -1,7 +1,8 @@
 @tree-prefix-cls: ~"@{namespace}-tree";
 
 .@{tree-prefix-cls} {
-  // background-color: @component-background;
+  background-color: var(--component-background);
+  border-radius: 6px;
 
   .ant-tree-node-content-wrapper {
     position: relative;
@@ -47,15 +48,6 @@
   }
 
   &-header {
-    border-bottom: 1px solid @border-color-base;
+    border-bottom: 1px solid var(--border-color);
   }
 }
-
-html[data-theme="dark"] {
-  .@{tree-prefix-cls} {
-    &-header {
-      background-color: #1f1f1f;
-    }
-  }
-}
-

src/components/Upload/src/FileList.vue

@@ -98,7 +98,7 @@ export default defineComponent({
   table,
   td,
   th {
-    border: 1px solid @border-color-base;
+    border: 1px solid var(--border-color);
   }
 }
 </style>

src/design/index.less

@@ -24,6 +24,7 @@ body {
   height: 100%;
   overflow: visible;
   overflow-x: hidden;
+  color: var(--text-color);
 
   &.color-weak {
     filter: invert(80%);

src/design/public.less

@@ -29,7 +29,7 @@
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: @border-color-dark;
+  background-color: var(--border-color);
 }
 
 // =================================

src/design/theme.less

@@ -1,8 +1,8 @@
-.bg-white {
-  background-color: @component-background !important;
-}
-
 html[data-theme="light"] {
+  --component-background: #fff;
+  --text-color: rgb(0 0 0 0.85);
+  --border-color: #fff;
+
   .text-secondary {
     color: rgb(0 0 0 / 45%);
   }
@@ -27,7 +27,11 @@ html[data-theme="light"] {
   }
 }
 
-[data-theme="dark"] {
+html[data-theme="dark"] {
+  --component-background: rgb(0 0 0 75%);
+  --text-color: rgb(255 255 255 0.85);
+  --border-color: #b6b7b9;
+
   .text-secondary {
     color: #8b949e;
   }

src/layouts/default/header/index.less

@@ -171,8 +171,8 @@
 
   &--dark {
     background-color: @header-dark-bg-color !important;
-    // border-bottom: 1px solid @border-color-base;
-    border-left: 1px solid @border-color-base;
+    border-bottom: 1px solid var(--border-color);
+    border-left: 1px solid var(--border-color);
     .@{header-prefix-cls}-logo {
       &:hover {
         background-color: @header-dark-bg-hover-color;

src/layouts/default/sider/LayoutSider.vue

@@ -133,7 +133,7 @@ const getTrigger = h(LayoutTrigger)
 
     .ant-layout-sider-trigger {
       color: @text-color-base;
-      border-top: 1px solid @border-color-light;
+      border-top: 1px solid var(--border-color);
     }
   }
 

src/layouts/default/sider/MixSider.vue

@@ -67,18 +67,19 @@ export default defineComponent({
     const getMenuStyle = computed((): CSSProperties => {
       return {
         width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
         left: `${unref(getMixSideWidth)}px`,
       }
     })
 
     const getIsFixed = computed(() => {
-      /* eslint-disable-next-line */
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       mixSideHasChildren.value = unref(childrenMenus).length > 0
       const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren)
-      if (isFixed) {
-        /* eslint-disable-next-line */
+      if (isFixed)
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         openMenu.value = true
-      }
+
       return isFixed
     })
 
@@ -392,25 +393,24 @@ export default defineComponent({
       }
     }
   }
-  @border-color: @sider-dark-lighten-bg-color;
 
   &.dark {
     &.open {
-      // .@{prefix-cls}-logo {
-      //   border-bottom: 1px solid @border-color;
-      // }
+      .@{prefix-cls}-logo {
+        border-bottom: 1px solid var(--sider-dark-lighten-bg-color);
+      }
 
       > .scrollbar {
-        border-right: 1px solid @border-color;
+        border-right: 1px solid var(--sider-dark-lighten-bg-color);
       }
     }
     .@{prefix-cls}-menu-list {
-      background-color: @sider-dark-bg-color;
+      background-color: var(--sider-dark-bg-color);
 
       &__title {
         color: @white;
         border-bottom: none;
-        border-bottom: 1px solid @border-color;
+        border-bottom: 1px solid var(--sider-dark-lighten-bg-color);
       }
     }
   }

src/layouts/default/tabs/index.less

@@ -1,37 +1,5 @@
 @prefix-cls: ~"@{namespace}-multiple-tabs";
 
-html[data-theme="dark"] {
-  // background-color: @component-background-dark;
-  .@{prefix-cls} {
-    .ant-tabs-tab {
-      border-bottom: none !important;
-    }
-  }
-
-  .ant-tabs-tab:not(.ant-tabs-tab-active) {
-    border: none !important;
-
-    &:hover {
-      color: inherit;
-      background-color: rgb(255 255 255/50%) !important;
-    }
-  }
-}
-
-html[data-theme="light"] {
-  background-color: @component-background;
-  .@{prefix-cls} {
-    .ant-tabs-tab:not(.ant-tabs-tab-active) {
-      border: none !important;
-
-      &:hover {
-        color: inherit;
-        background-color: #dee1e6;
-      }
-    }
-  }
-}
-
 .@{prefix-cls} {
   z-index: 10;
   height: @multiple-height;
@@ -47,7 +15,7 @@ html[data-theme="light"] {
       height: @multiple-height;
       padding-left: 10px;
       margin: 0;
-      // background-color: @component-background;
+      background-color: var(--component-background);
       border: 0;
       box-shadow: none;
 
@@ -63,17 +31,17 @@ html[data-theme="light"] {
         padding: 0 16px;
         margin: 0 -14px 0 0 !important;
         line-height: @multiple-height;
-        // color: @text-color-base;
-        // background-color: @component-background;
+        color: var(--text-color);
+        background-color: var(--component-background);
         border-radius: 8px 8px 0 0;
         /* stylelint-disable-next-line function-url-quotes */
         mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
         transition: padding 0.3s;
         mask-size: 100% 100%;
 
-        // .ant-tabs-tab-btn {
-        //   color: @text-color-base;
-        // }
+        .ant-tabs-tab-btn {
+          color: var(--text-color);
+        }
 
         &:hover {
           z-index: 2;
@@ -201,10 +169,10 @@ html[data-theme="light"] {
       width: 36px;
       height: @multiple-height;
       line-height: @multiple-height;
-      // color: @text-color-secondary;
+      color: var(--text-color-secondary);
       text-align: center;
       cursor: pointer;
-      border-left: 1px solid @border-color-base;
+      border-left: 1px solid var(--border-color);
 
       &:hover {
         color: @text-color-base;

src/views/base/iframe/index.vue

@@ -80,7 +80,7 @@ function hideLoading() {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background-color: @component-background;
+    background-color: var(--component-background);
     border: 0;
   }
 }

src/views/base/lock/LockPage.vue

@@ -62,7 +62,7 @@ function handleShowForm(show = false) {
     <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 text-white flex-col cursor-pointer transform translate-x-1/2"
+      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"
       @click="handleShowForm(false)"
     >
       <LockOutlined />

src/views/base/login/Login.vue

@@ -29,7 +29,7 @@ const title = computed(() => globSetting?.title ?? '')
   <div :class="prefixCls" class="relative w-full h-full px-4">
     <div class="flex items-center absolute right-4 top-4">
       <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 xl:text-gray-600" :show-text="false" />
     </div>
 
     <span class="-enter-x xl:hidden">
@@ -203,7 +203,6 @@ html[data-theme='dark'] {
 
   .ant-divider-inner-text {
     font-size: 12px;
-    color: @text-color-secondary;
   }
 }
 </style>

src/views/base/profile/index.vue

@@ -33,7 +33,7 @@ const tabBarStyle = { width: '220px' }
 <style lang="less">
 .account-setting {
   margin: 12px;
-  background-color: @component-background;
+  background-color: var(--component-background);
 
   .base-title {
     padding-left: 0;

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

@@ -57,7 +57,7 @@ function handleGoList() {
 <style lang="less" scoped>
 .result-success {
   padding: 48px 32px;
-  background-color: @component-background;
+  background-color: var(--component-background);
 
   &__content {
     padding: 24px 40px;

src/views/infra/webSocket/index.vue

@@ -58,7 +58,7 @@ function toggle() {
 <template>
   <PageWrapper title="WebSocket 示例">
     <div class="flex">
-      <div class="w-1/3 bg-white p-4">
+      <div class="w-1/3 p-4">
         <div class="flex items-center">
           <span class="text-lg font-medium mr-4"> 连接状态: </span>
           <Tag :color="getTagColor">
@@ -89,7 +89,7 @@ function toggle() {
         </a-button>
       </div>
 
-      <div class="w-2/3 bg-white ml-4 p-4">
+      <div class="w-2/3 ml-4 p-4">
         <span class="text-lg font-medium mr-4"> 消息记录: </span>
         <hr class="my-4">
 

src/views/mp/components/WxNews/index.vue

@@ -130,10 +130,10 @@ async function handleDelete(id) {
 
 <template>
   <div class="p-2">
-    <div class="p-4 mb-2 bg-white">
+    <div class="p-4 mb-2">
       <BasicForm @register="registerForm" />
     </div>
-    <div class="p-2 bg-white">
+    <div class="p-2">
       <List :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: grid }" :data-source="data" :pagination="paginationProp">
         <template #header>
           <div class="flex justify-end space-x-2">

src/views/system/operatelog/LogInfoModal.vue

@@ -1,10 +1,4 @@
-<template>
-  <BasicModal v-bind="$attrs" title="操作日志详情" width="800px" @register="registerModalInner" @ok="closeModal">
-    <Description @register="registerDescription" />
-  </BasicModal>
-</template>
-
-<template setup lang="ts">
+<script lang="ts" setup>
 import { ref } from 'vue'
 import { infoSchema } from './operateLog.data'
 import { BasicModal, useModalInner } from '@/components/Modal'
@@ -22,4 +16,10 @@ const [registerDescription] = useDescription({
   schema: infoSchema,
   data: logData,
 })
+</script>
+
+<template>
+  <BasicModal v-bind="$attrs" title="操作日志详情" width="800px" @register="registerModalInner" @ok="closeModal">
+    <Description @register="registerDescription" />
+  </BasicModal>
 </template>