fix(comp:empty): style update with icon (#1349)

IDuxFE · Dec 10, 2022 · 69ec9f9 · 69ec9f9
1 parent f448714
commit 69ec9f9
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 8 deletions.
diff --git a/packages/components/empty/demo/Image.md b/packages/components/empty/demo/Image.md
@@ -7,8 +7,8 @@ title:
 
 ## zh
 
-可以通过 `image` 属性或者插槽来自定义图片
+可以通过 `image`, `icon` 属性或者插槽来自定义图片
 
 ## en
 
-You can customize the image through `image` prop or slot.
+You can customize the image through `image`, `icon` prop or slot.
diff --git a/packages/components/empty/demo/Image.vue b/packages/components/empty/demo/Image.vue
@@ -1,3 +1,4 @@
 <template>
   <IxEmpty image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" />
+  <IxEmpty icon="clear" />
 </template>
diff --git a/packages/components/empty/docs/Api.zh.md b/packages/components/empty/docs/Api.zh.md
@@ -6,6 +6,7 @@
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `description` | 自定义描述内容 | `string` | - | - | - |
+| `icon` | 自定义图标 | `string \| VNode` | - | - | 优先级低于 image |
 | `image` | 自定义图片 | `string \| VNode` | - | ✅ | - |
 | `simple` | 简易模式 | `boolean` | - | - | - |
 
@@ -15,4 +16,5 @@
 | --- | --- | --- | --- |
 | `default` | 自定义 `content` 区域内容 | - | - |
 | `description` | 自定义 `description` 区域内容 | - | - |
+| `icon` | 自定义图标 | - | 优先级低于 image |
 | `image` | 自定义图片 | - | - |
diff --git a/packages/components/empty/src/types.ts b/packages/components/empty/src/types.ts
@@ -10,9 +10,6 @@ import type { DefineComponent, HTMLAttributes, PropType, VNode } from 'vue'
 
 export const emptyProps = {
   description: String,
-  /**
-   * @deprecated
-   */
   icon: [String, Object] as PropType<string | VNode>,
   image: [String, Object] as PropType<string | VNode>,
   simple: Boolean,

diff --git a/packages/components/empty/style/index.less b/packages/components/empty/style/index.less
@@ -4,9 +4,11 @@
   .reset-component-new();
   .reset-font-size();
 
+  display: flex;
+  flex-direction: column;
+  text-align: center;
   color: @empty-color;
   margin: var(--ix-spacing-xl) var(--ix-spacing-lg);
-  text-align: center;
 
   &-image {
     height: 100%;
@@ -19,6 +21,11 @@
       height: 100%;
       margin: auto;
     }
+
+    > .@{icon-prefix} {
+      font-size: 48px;
+      padding: 16px 8px;
+    }
   }
 
   &-description {

diff --git a/packages/components/table/style/themes/seer.variable.less b/packages/components/table/style/themes/seer.variable.less
@@ -1,7 +1,7 @@
 @import './default.variable.less';
 
 @table-font-size-md: var(--ix-font-size-sm);
-@table-font-size-lg: var(--ix-font-size-md);
+@table-font-size-lg: var(--ix-font-size-sm);
 
 @table-head-row-height-sm: var(--ix-height-md);
 @table-head-row-height-md: var(--ix-height-md);

diff --git a/packages/pro/table/style/index.less b/packages/pro/table/style/index.less
@@ -80,7 +80,7 @@
 
   &.@{table-prefix} {
     .@{table-prefix}-col-indexable {
-      width: 40px;
+      width: if(@theme = seer, 48px, 40px);
     }
   }