chore: 样式和文案小调整 (#2944)

* 调整 Transfer 样式 * Transfer 文案调整 * 小调整
2024-11-29 18:48:45 +08:00 · 2021-11-15 13:52:45 +08:00 · 2021-11-15 13:52:45 +08:00 · 6d2b648a18
commit 6d2b648a18
parent af11b93a0a
10 changed files with 51 additions and 27 deletions
--- a/docs/zh-CN/components/form/input-tree.md
+++ b/docs/zh-CN/components/form/input-tree.md
@ -586,7 +586,15 @@ order: 59
      "addControls": [
        {
          "label": "节点名称",
-          "type": "input-text"
+          "type": "input-text",
+          "required": true,
+          "name": "label"
+        },
+        {
+          "label": "节点值",
+          "type": "input-text",
+          "required": true,
+          "name": "value"
        }
      ],
      "options": [
@ -746,7 +754,7 @@ true        false        true       [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
 | delimeter              | `string`                                     | `false`          | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter)                                                           |
 | labelField             | `string`                                     | `"label"`        | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield)                         |
 | valueField             | `string`                                     | `"value"`        | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield)                                    |
-| iconField              | `string`                                     | `"icon"`         | 图标值字段                                                                                                            |
+| iconField              | `string`                                     | `"icon"`         | 图标值字段                                                                                                          |
 | joinValues             | `boolean`                                    | `true`           | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues)                                                          |
 | extractValue           | `boolean`                                    | `false`          | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue)                                      |
 | creatable              | `boolean`                                    | `false`          | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable)                                                |
--- a/scss/components/form/_checks.scss
+++ b/scss/components/form/_checks.scss
@ -598,7 +598,8 @@
  &-right {
    flex-grow: 1;
    width: 0;
-    height: px2rem(175px);
+    min-height: px2rem(200px);
+    max-height: px2rem(400px);
    overflow: auto;
  }

--- a/scss/components/form/_transfer.scss
+++ b/scss/components/form/_transfer.scss
@ -105,6 +105,24 @@
      color: var(--text--muted-color);
    }
  }
+}
+
+.#{$ns}TabsTransfer {
+  .#{$ns}Transfer-title {
+    height: 40px;
+  }
+
+  // .#{$ns}Transfer-result {
+  //   flex-grow: unset;
+  // }
+
+  &-placeholder {
+    @include checkboxes-placeholder();
+  }
+
+  &-tab {
+    padding: 0;
+  }

  &-tabs {
    display: flex;
@ -141,12 +159,13 @@

    > .#{$ns}Tabs-content {
      flex-grow: 1;
+      min-height: 0;
      position: relative;
      padding: 5px 0 0;

      > .#{$ns}Tabs-pane {
        position: relative;
-        min-height: 100%;
+        height: 100%;

        &.is-active {
          display: flex;
@ -163,20 +182,6 @@
  }
 }

-.#{$ns}TabsTransfer {
-  .#{$ns}Transfer-title {
-    height: 40px;
-  }
-
-  // .#{$ns}Transfer-result {
-  //   flex-grow: unset;
-  // }
-
-  &-placeholder {
-    @include checkboxes-placeholder();
-  }
-}
-
 .#{$ns}TransferControl {
  position: relative;

--- a/src/components/ListRadios.tsx
+++ b/src/components/ListRadios.tsx
@ -48,7 +48,7 @@ export class BaseRadios<

    let newValue: Option | null = option;

-    if (clearable) {
+    if (clearable && value) {
      const prevSelected = BaseRadios.resolveSelected(
        value,
        options,
--- a/src/components/TabsTransfer.tsx
+++ b/src/components/TabsTransfer.tsx
@ -121,7 +121,7 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
    return (
      <Tabs
        mode="card"
-        className={cx('Transfer-tabs')}
+        className={cx('TabsTransfer-tabs')}
        activeKey={searchResult !== null ? 0 : undefined}
        toolbar={
          searchable ? (
@ -134,7 +134,12 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
      >
        {searchResult !== null
          ? [
-              <Tab title={__('searchResult')} key={0} eventKey={0}>
+              <Tab
+                className="TabsTransfer-tab"
+                title={__('searchResult')}
+                key={0}
+                eventKey={0}
+              >
                {this.renderSearchResult(searchResult)}
              </Tab>
            ]
@ -143,6 +148,7 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
                eventKey={index}
                key={index}
                title={option.label || option.title}
+                className="TabsTransfer-tab"
              >
                {option.selectMode === 'table' ? (
                  <TableCheckboxes
--- a/src/components/Transfer.tsx
+++ b/src/components/Transfer.tsx
@ -223,7 +223,7 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
          )}
        >
          <span>
-            {__(selectTitle || 'Select.placeholder')}
+            {__(selectTitle || 'Transfer.available')}
            {statistics !== false ? (
              <span>
                （{this.valueArray.length}/{this.availableOptions.length}）
@ -238,7 +238,7 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
                disabled || !options.length ? 'is-disabled' : ''
              )}
            >
-              {__('Select.placeholder')}
+              {__('Select.checkAll')}
            </a>
          ) : null}
        </div>
--- a/src/locale/de-DE.ts
+++ b/src/locale/de-DE.ts
@ -181,6 +181,7 @@ register('de-DE', {
  'Transfer.configError': 'Konfigurationsfehler',
  'Transfer.refreshIcon': 'Zum Aktualisieren klicken',
  'Transfer.searchKeyword': 'Stichwörter eingeben',
+  'Transfer.available': 'Verfügbar',
  'Transfer.selectd': 'Ausgewählt',
  'Transfer.selectFromLeft': 'Von links auswählen',
  'Tree.addChild': 'Untergeordnetes Element hinzufügen',
--- a/src/locale/en-US.ts
+++ b/src/locale/en-US.ts
@ -182,6 +182,7 @@ register('en-US', {
  'Transfer.configError': 'Config error',
  'Transfer.refreshIcon': 'Click to refresh',
  'Transfer.searchKeyword': 'Enter keywords',
+  'Transfer.available': 'Available',
  'Transfer.selectd': 'Selected',
  'Transfer.selectFromLeft': 'Select from the left',
  'Tree.addChild': 'Add child',
--- a/src/locale/zh-CN.ts
+++ b/src/locale/zh-CN.ts
@ -186,8 +186,9 @@ register('zh-CN', {
  'Transfer.configError': '配置错误，选项无法与左侧选项对应',
  'Transfer.refreshIcon': '点击刷新重新加载',
  'Transfer.searchKeyword': '请输入关键字',
-  'Transfer.selectd': '当前选择',
-  'Transfer.selectFromLeft': '请从左侧选择数据',
+  'Transfer.available': '可选项',
+  'Transfer.selectd': '已选项',
+  'Transfer.selectFromLeft': '请选择左侧数据',
  'Tree.addChild': '添加子节点',
  'Tree.addRoot': '添加一级节点',
  'Tree.editNode': '编辑该节点',
--- a/src/renderers/Form/Transfer.tsx
+++ b/src/renderers/Form/Transfer.tsx
@ -207,8 +207,9 @@ export class BaseTransferRenderer<
        (option: Option) => {
          return !!(
            (Array.isArray(option.children) && option.children.length) ||
-            regexp.test(option[(labelField as string) || 'label']) ||
-            regexp.test(option[(valueField as string) || 'value'])
+            (option[(valueField as string) || 'value'] &&
+              (regexp.test(option[(labelField as string) || 'label']) ||
+                regexp.test(option[(valueField as string) || 'value'])))
          );
        },
        0,