style: 💄 优化样式

xingmolu · xingmolu · commit bd2aaffd87c2 · 2022-03-03T12:34:10.000+08:00
diff --git a/packages/plugin-datasource-pane/package.json b/packages/plugin-datasource-pane/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-plugin-datasource-pane",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0",
   "description": "低代码引擎数据源面板",
   "main": "lib/index.js",
   "files": [
@@ -58,5 +58,5 @@
     "traverse": "^0.6.6",
     "xstate": "^4.26.0"
   },
-  "homepage": "https://unpkg.com/@alilc/lowcode-plugin-datasource-pane@1.0.0-beta.1/build/index.html"
+  "homepage": "https://unpkg.com/@alilc/lowcode-plugin-datasource-pane@1.0.0/build/index.html"
 }
diff --git a/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx b/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx
@@ -132,6 +132,7 @@ const SCHEMA = {
       'x-component-props': {
         defaultPropertyKeys: [],
         addText: '选择添加',
+        autoWidth: false,
       },
       'x-decorator-props': {},
       properties: {
diff --git a/packages/plugin-datasource-pane/src/components/DataSourceListItem/DataSourceListItem.tsx b/packages/plugin-datasource-pane/src/components/DataSourceListItem/DataSourceListItem.tsx
@@ -239,7 +239,7 @@ export class DataSourceListItemOperation extends PureComponent<DataSourceListIte
         key={icon}
         delay={100}
         trigger={
-          <Button size="small" onClick={this.handleOperationClick} text>
+          <Button iconSize="small" className={generateClassName('item-operate')} onClick={this.handleOperationClick} text>
             <Icon type={icon} />
           </Button>
         }
diff --git a/packages/plugin-datasource-pane/src/components/DataSourceListItem/list-item.scss b/packages/plugin-datasource-pane/src/components/DataSourceListItem/list-item.scss
@@ -18,6 +18,7 @@ $cls-prefix: "lowcode-plugin-datasource-pane";
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 12px;
+      font-weight: bold;
       .#{$cls-prefix}-item-typetag {
         font-weight: 700;
         margin-right: 4px;
@@ -36,4 +37,12 @@ $cls-prefix: "lowcode-plugin-datasource-pane";
       overflow: hidden;
     }
   }
-}
+
+  .#{$cls-prefix}-item-operate {
+    color: #8f9bb3 !important;
+
+    &:hover {
+      color: #5584ff !important;
+    }
+  }
+}
diff --git a/packages/plugin-datasource-pane/src/components/DataSourceOperations/DataSourceOperations.tsx b/packages/plugin-datasource-pane/src/components/DataSourceOperations/DataSourceOperations.tsx
@@ -52,13 +52,13 @@ export class DataSourceOperations extends PureComponent<DataSourceOperationsProp
       this.props;
 
     if (mode === 'sorting') {
-return [
-  <Button onClick={this.props.onFinishSort}>完成</Button>,
-  <Button text onClick={this.props.onCancelSort}>
-    取消
-  </Button>,
+      return [
+        <Button onClick={this.props.onFinishSort}>完成</Button>,
+        <Button text onClick={this.props.onCancelSort}>
+          取消
+        </Button>,
       ];
-}
+    }
     if (mode === 'exporting') {
       return [
         <Button
diff --git a/packages/plugin-datasource-pane/src/components/Forms/component-switch-btn.tsx b/packages/plugin-datasource-pane/src/components/Forms/component-switch-btn.tsx
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Button, Icon } from '@alifd/next';
+import { IconVariable } from '../icons/variable';
 import _get from 'lodash/get';
 import { connect, mapProps } from '@formily/react';
 import cn from 'classnames';
@@ -55,7 +56,7 @@ class ComponentSwitchBtnCompComp extends PureComponent<
         text
         onClick={this.handleSwitch}
       >
-        <Icon type="set" />
+        <IconVariable size={20} fill="#8f9bb3" />
       </Button>
     );
   }
diff --git a/packages/plugin-datasource-pane/src/components/icons/variable.tsx b/packages/plugin-datasource-pane/src/components/icons/variable.tsx
@@ -0,0 +1,11 @@
+import { SVGIcon, IconProps } from '@alilc/lowcode-utils';
+
+export function IconVariable(props: IconProps) {
+  return (
+    <SVGIcon viewBox="0 0 1024 1024" {...props}>
+      <path d="M596.32 263.392c18.048 6.56 27.328 26.496 20.8 44.512l-151.04 414.912a34.72 34.72 0 1 1-65.28-23.744l151.04-414.912a34.72 34.72 0 0 1 44.48-20.768zM220.64 192H273.6v55.488H233.024c-26.112 0-38.464 14.4-38.464 44.544v134.304c0 42.496-19.936 71.264-59.104 85.664 39.168 16.448 59.104 44.544 59.104 85.664v134.976c0 28.8 12.352 43.84 38.464 43.84H273.6V832H220.672c-30.24 0-53.6-10.272-70.08-29.44-15.136-17.856-22.72-42.496-22.72-72.64v-128.832c0-19.872-4.096-34.24-12.352-43.2-9.6-10.944-26.784-16.416-51.52-17.792v-56.192c24.736-1.376 41.92-7.52 51.52-17.824 8.256-9.6 12.384-24 12.384-43.168V294.784c0-30.848 7.552-55.488 22.688-73.312C167.04 201.6 190.4 192 220.672 192z m529.792 0h52.896c30.24 0 53.6 9.6 70.08 29.44 15.136 17.856 22.72 42.496 22.72 73.344v128.128c0 19.2 4.096 34.24 13.024 43.84 8.96 9.6 26.112 15.776 50.848 17.152v56.192c-24.736 1.376-41.92 6.848-51.52 17.824-8.256 8.896-12.384 23.296-12.384 43.168v128.8c0 30.176-7.552 54.816-22.688 72.64-16.48 19.2-39.84 29.472-70.08 29.472h-52.896v-55.488h40.544c25.408 0 38.464-15.104 38.464-43.84v-135.04c0-41.088 19.232-69.184 59.104-85.632-39.872-14.4-59.104-43.168-59.104-85.664V292.032c0-30.144-13.056-44.544-38.464-44.544H750.4V192z" />
+    </SVGIcon>
+  );
+}
+
+IconVariable.displayName = 'Variable';
diff --git a/packages/plugin-datasource-pane/src/index.tsx b/packages/plugin-datasource-pane/src/index.tsx
@@ -16,7 +16,7 @@ export interface Options {
 const plugin = (ctx: ILowCodePluginContext) => {
   return {
     name: 'com.alibaba.lowcode.datasource.pane',
-    width: 600,
+    width: 300,
     // 依赖的插件（插件名数组）
     dep: [],
     // 插件对外暴露的数据和方法
@@ -36,7 +36,7 @@ const plugin = (ctx: ILowCodePluginContext) => {
           description: '数据源',
         },
         panelProps: {
-          width: '600px',
+          width: '300px',
           // title: '源码面板',
         },
         content: (

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@alilc/lowcode-plugin-datasource-pane",`
`3`		`- "version": "1.0.0-beta.2",`
	`3`	`+ "version": "1.0.0",`
`4`	`4`	`"description": "低代码引擎数据源面板",`
`5`	`5`	`"main": "lib/index.js",`
`6`	`6`	`"files": [`
`@@ -58,5 +58,5 @@`
`58`	`58`	`"traverse": "^0.6.6",`
`59`	`59`	`"xstate": "^4.26.0"`
`60`	`60`	`},`
`61`		`- "homepage": "https://unpkg.com/@alilc/lowcode-plugin-datasource-pane@1.0.0-beta.1/build/index.html"`
	`61`	`+ "homepage": "https://unpkg.com/@alilc/lowcode-plugin-datasource-pane@1.0.0/build/index.html"`
`62`	`62`	`}`
Original file line number	Diff line number	Diff line change
`@@ -239,7 +239,7 @@ export class DataSourceListItemOperation extends PureComponent<DataSourceListIte`
`239`	`239`	`key={icon}`
`240`	`240`	`delay={100}`
`241`	`241`	`trigger={`
`242`		`- <Button size="small" onClick={this.handleOperationClick} text>`
	`242`	`+ <Button iconSize="small" className={generateClassName('item-operate')} onClick={this.handleOperationClick} text>`
`243`	`243`	`<Icon type={icon} />`
`244`	`244`	`</Button>`
`245`	`245`	`}`