feat(resources): use color variable

Author: betterdancing

packages/configurator/src/source-select-configurator/SourceSelectConfigurator.vue

@@ -76,7 +76,7 @@
 <script lang="ts">
 import { ref, watch } from 'vue'
 import type { Component } from 'vue'
-import { Popover as TinyPopover, Button as TinyButton, Input, Search, Select, Divider, Radio } from '@opentiny/vue'
+import { Popover as TinyPopover, TinyButton, Input, Search, Select, Divider, Radio } from '@opentiny/vue'
 import { iconClose, iconSearch } from '@opentiny/vue-icon'
 import { SearchEmpty } from '@opentiny/tiny-engine-common'
 import { useNotify } from '@opentiny/tiny-engine-meta-register'
@@ -99,7 +99,7 @@ export default {
     TinyInput: Input,
     TinySearch: Search,
     TinySelect: Select,
-    TinyDivider: Divider,
+    TinyDivider: Divider as Component,
     TinyRadio: Radio,
     SearchEmpty,
     TinyIconClose: iconClose(),

packages/plugins/resource/src/Main.vue

@@ -48,7 +48,6 @@ import ResourceSetting, { openResourceSettingPanel, closeResourceSettingPanel }
 import ResourceList, { openResourceListPanel, closeResourceListPanel } from './ResourceList.vue'
 import { fetchResourceGroupByAppId } from './js/http'
 
-/* metaComponent: engine.plugins.resource */
 export default {
   components: {
     PluginPanel,

packages/plugins/resource/src/ResourceList.vue

@@ -147,7 +147,7 @@ import { ref, reactive, computed, watch } from 'vue'
 import type { Component } from 'vue'
 import useClipboard from 'vue-clipboard3'
 import {
-  Button as TinyButton,
+  TinyButton,
   Divider,
   Grid,
   GridColumn,
@@ -187,7 +187,7 @@ export default {
     PluginSetting,
     SvgButton,
     TinyButton: TinyButton as Component,
-    TinyDivider: Divider,
+    TinyDivider: Divider as Component,
     TinyGrid: Grid,
     TinyGridColumn: GridColumn,
     TinyInput: Input,
@@ -496,7 +496,7 @@ export default {
   align-items: start;
   .resource-description {
     padding: 8px 0;
-    color: #808080;
+    color: var(--te-resource-manage-tip-text-color);
   }
 
   .action-wrap {
@@ -536,7 +536,7 @@ export default {
       .source-image-wrap {
         width: 185px;
         height: 120px;
-        background-color: #f5f5f5;
+        background-color: var(--te-resource-manage-draggable-row-bg-color-hover);
         transition: unset;
         position: relative;
 
@@ -563,7 +563,7 @@ export default {
           text-align: left;
           line-height: 28px;
           width: 185px;
-          color: #fff;
+          color: var(--te-resource-manage-button-text-color);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -589,7 +589,7 @@ export default {
             background-color: rgba(0, 0, 0, 0.2);
 
             svg {
-              fill: #fff;
+              fill: var(--te-resource-manage-button-text-color);
             }
           }
         }

packages/plugins/resource/src/ResourceSetting.vue

@@ -36,7 +36,7 @@
 /* metaService: engine.plugins.resource.ResourceSetting */
 import { ref, reactive, computed } from 'vue'
 import type { Component } from 'vue'
-import { Button as TinyButton, Collapse, CollapseItem, Form, FormItem, Input } from '@opentiny/vue'
+import { TinyButton, Collapse, CollapseItem, Form, FormItem, Input } from '@opentiny/vue'
 import { useLayout, useNotify } from '@opentiny/tiny-engine-meta-register'
 import { PluginSetting, ButtonGroup, SvgButton } from '@opentiny/tiny-engine-common'
 import { createResourceGroup, updateResourceGroup } from './js/http'

packages/plugins/resource/src/styles/vars.less

@@ -1,5 +1,6 @@
 .plugin-resource {
   --te-resource-manage-title-text-color: var(--te-common-text-primary);
+  --te-resource-manage-button-text-color: var(--te-common-text-inverse);
   --te-resource-manage-input-bg-color: var(--te-common-bg-default);
   --te-resource-manage-input-border-color: var(--te-common-border-default);
   --te-resource-manage-tip-color: var(--te-common-text-primary);