fix(styles-import): 解决tree组件选中样式背景色为黑色的问题 (opentiny#102)

gargameljyh · Nov 23, 2023 · 5907402 · 5907402
1 parent 68addea
commit 5907402
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/packages/design-core/vite.config.js b/packages/design-core/vite.config.js
@@ -204,7 +204,9 @@ const importmap = {
     '@opentiny/vue-icon': `https://unpkg.com/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-icon.mjs`,
     '@opentiny/vue-common': `https://unpkg.com/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-common.mjs`,
     '@opentiny/vue-locale': `https://unpkg.com/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-locale.mjs`,
-    '@opentiny/vue-design-smb': `https://unpkg.com/@opentiny/vue-design-smb@${importMapVersions.tinyVue}/index.js`
+    '@opentiny/vue-design-smb': `https://unpkg.com/@opentiny/vue-design-smb@${importMapVersions.tinyVue}/index.js`,
+    '@opentiny/vue-theme/theme-tool': `https://unpkg.com/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme-tool`,
+    '@opentiny/vue-theme/theme': `https://unpkg.com/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme`
   }
 }
 

diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue
@@ -386,12 +386,19 @@ export default {
     color: var(--ti-lowcode-page-manage-tree-color);
 
     .tiny-tree-node {
-      &.is-current {
-        .tiny-tree-node__content {
-          background-color: var(--ti-lowcode-page-manage-page-tree-background-color);
-          &:hover {
-            background-color: var(--ti-lowcode-page-manage-page-tree-background-hover-color);
-          }
+      &:hover {
+        background-color: var(--ti-lowcode-page-manage-page-tree-background-hover-color);
+      }
+      &.is-current,
+      &.is-current .tiny-tree-node__content,
+      &.is-current .tiny-tree-node__content-box {
+        color: var(--ti-lowcode-page-manage-tree-color);
+        background-color: var(--ti-lowcode-page-manage-page-tree-background-active-color);
+        &:hover {
+          background-color: var(--ti-lowcode-page-manage-page-tree-background-hover-color);
+        }
+        & > .tiny-tree-node__content-left {
+          font-weight: 700;
         }
       }
     }
@@ -421,7 +428,6 @@ export default {
         visibility: hidden;
       }
       &:hover {
-        background-color: var(--ti-lowcode-page-manage-page-tree-background-color) !important;
         border-radius: 0;
         .icons {
           .setting {

diff --git a/packages/theme/dark/pageManage.less b/packages/theme/dark/pageManage.less
@@ -13,7 +13,7 @@
   --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-5);
   --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-common-border-color-2);
   --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-page-manage-page-tree-background-color: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-hover-bg);
   --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-primary-hover-color);
   --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-common-primary-color);
   --ti-lowcode-page-manage-text-color: var(--ti-lowcode-common-secondary-text-color);

diff --git a/packages/theme/light/pageManage.less b/packages/theme/light/pageManage.less
@@ -10,8 +10,8 @@
   --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-5);
   --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-base-gray-30);
   --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-text-main-color);
-  --ti-lowcode-page-manage-page-tree-background-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-primary-hover-color);
+  --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-component-hover-bg);
   --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-base-bg-3);
   --ti-lowcode-page-manage-text-color: var(--ti-lowcode-base-text-color-1);
   --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-base-text-color);