Refactor/result (#543)

* feat(Result): update api * chore: result * chore: update theme * chore: update snap --------- Co-authored-by: anlyyao <[email protected]> Co-authored-by: lem <[email protected]>
Tencent · Apr 7, 2023 · 27311df · 27311df
1 parent b21ae41
commit 27311df
Show file tree

Hide file tree

Showing 9 changed files with 379 additions and 290 deletions.
diff --git a/src/result/__test__/__snapshots__/demo.test.jsx.snap b/src/result/__test__/__snapshots__/demo.test.jsx.snap
diff --git a/src/result/demos/mobile.vue b/src/result/demos/mobile.vue
@@ -4,8 +4,8 @@
     <p class="summary">结果反馈</p>
     <tdesign-demo-block title="01 类型" />
 
-    <tdesign-demo-block v-for="(item, index) in resultList" :key="index" :summary="item.title">
-      <ThemeDemo :theme="item.theme" :title="item.title" :description="item.description" />
+    <tdesign-demo-block summary="不同结果状态">
+      <ThemeDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="" summary="自定义结果">
       <CustomDemo />
@@ -36,28 +36,6 @@ import { ref } from 'vue';
 import ThemeDemo from './theme.vue';
 import CustomDemo from './custom.vue';
 
-const resultList = [
-  {
-    title: '成功状态',
-    theme: 'success',
-    description: '描述文字',
-  },
-  {
-    title: '失败状态',
-    theme: 'error',
-    description: '描述文字',
-  },
-  {
-    title: '警示状态',
-    theme: 'warning',
-    description: '描述文字',
-  },
-  {
-    title: '默认状态',
-    theme: 'default',
-    description: '描述文字',
-  },
-];
 const showResult = ref(false);
 
 const handleClick = () => {

diff --git a/src/result/demos/theme.vue b/src/result/demos/theme.vue
@@ -1,15 +1,38 @@
 <template>
-  <t-result :theme="theme" :title="title" :description="description" />
+  <div v-for="(item, index) in resultList" :key="index">
+    <t-result :theme="item.theme" :title="item.title" :description="item.description" />
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { toRefs, defineProps } from 'vue';
 
+const resultList = [
+  {
+    title: '成功状态',
+    theme: 'success',
+    description: '描述文字',
+  },
+  {
+    title: '失败状态',
+    theme: 'error',
+    description: '描述文字',
+  },
+  {
+    title: '警示状态',
+    theme: 'warning',
+    description: '描述文字',
+  },
+  {
+    title: '默认状态',
+    theme: 'default',
+    description: '描述文字',
+  },
+];
+
 const props = defineProps({
   theme: String,
   title: String,
   description: String,
 });
-
-const { theme, title, description } = toRefs(props);
 </script>
diff --git a/src/result/props.ts b/src/result/props.ts
@@ -1,5 +1,11 @@
-import { PropType } from 'vue';
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
 import { TdResultProps } from './type';
+import { PropType } from 'vue';
 
 export default {
   /** 描述文字 */
@@ -8,17 +14,13 @@ export default {
   },
   /** 图标名称 */
   icon: {
-    type: [String, Function] as PropType<TdResultProps['icon']>,
+    type: Function as PropType<TdResultProps['icon']>,
   },
   /** 图片地址 */
   image: {
     type: [String, Function] as PropType<TdResultProps['image']>,
   },
-  /** 标题 */
-  title: {
-    type: [String, Function] as PropType<TdResultProps['title']>,
-  },
-  /** 内置主题 */
+  /** 内置主题。 */
   theme: {
     type: String as PropType<TdResultProps['theme']>,
     default: 'default' as TdResultProps['theme'],
@@ -27,8 +29,9 @@ export default {
       return ['default', 'success', 'warning', 'error'].includes(val);
     },
   },
-  /** 透传 Image 组件全部属性 */
-  imageProps: {
-    type: Object as PropType<TdResultProps['imageProps']>,
+  /** 标题 */
+  title: {
+    type: [String, Function] as PropType<TdResultProps['title']>,
+    default: '',
   },
 };
diff --git a/src/result/result.en-US.md b/src/result/result.en-US.md
@@ -0,0 +1,12 @@
+:: BASE_DOC ::
+
+## API
+### Result Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+description | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+image | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+theme | String | default | options：default/success/warning/error | N
+title | String / Slot / Function | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
diff --git a/src/result/result.md b/src/result/result.md
@@ -3,11 +3,10 @@
 ## API
 ### Result Props
 
-| 名称             | 类型          | 默认值 | 说明      | 必传 |
-| ---------------- | ------------- | ------ | ------ | ---- |
-| title            | String / Slot | -      | 标题     | N    |
-| description      | String / Slot | -      | 描述文字       | N    |
-| icon             | String        | -      | 图标名称      | N    |
-| image            | String / Slot | -      | 图片地址  | N    |
-| theme            | String         | default| 内置主题。可选项：default/success/warning/error | N  |
-| imageProps       | Object | - | 透传 Image 组件全部属性。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。 | N
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+description | String / Slot / Function | - | 描述文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | Slot / Function | - | 图标名称。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+image | String / Slot / Function | - | 图片地址。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+theme | String | default | 内置主题。。可选项：default/success/warning/error | N
+title | String / Slot / Function | '' | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
diff --git a/src/result/result.vue b/src/result/result.vue
@@ -23,8 +23,7 @@ import { h, computed, toRefs, getCurrentInstance, defineComponent } from 'vue';
 import { InfoCircleIcon, CheckCircleIcon, CloseCircleIcon } from 'tdesign-icons-vue-next';
 import resultProps from './props';
 import config from '../config';
-import { TdResultProps } from './type';
-import { useEmitEvent, renderContent, renderTNode, TNode } from '../shared';
+import { renderTNode, TNode } from '../shared';
 
 const { prefix } = config;
 const name = `${prefix}-result`;
@@ -51,20 +50,19 @@ export default defineComponent({
     const classes = computed(() => [`${name}`, `${name}--theme-${props.theme}`]);
 
     let iconContent: any;
-    if (props.icon !== '') {
+    if (props?.theme) {
       if (Object.keys(iconDefault).includes(props?.theme as string)) {
         const key = props.theme as string;
         iconContent = computed(() => iconDefault?.[key]);
       }
-      iconContent = props.icon ? computed(() => renderTNode(internalInstance, 'icon')) : iconContent;
     }
+    iconContent = props.icon ? computed(() => renderTNode(internalInstance, 'icon')) : iconContent;
 
     const baseImageProps = {
       src: props.image,
     };
 
     const customImageProps = computed(() => ({
-      ...props.imageProps,
       ...baseImageProps,
     }));
 

diff --git a/src/result/style/index.js b/src/result/style/index.js
@@ -1 +1 @@
-import '../../_common/style/mobile/components/result/_index.less';
+import '../../_common/style/mobile/components/result/v2/_index.less';
diff --git a/src/result/type.ts b/src/result/type.ts
@@ -1,33 +1,32 @@
-import { ImageProps } from '../image';
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
 import { TNode } from '../common';
 
 export interface TdResultProps {
   /**
    * 描述文字
    */
   description?: string | TNode;
-
   /**
    * 图标名称
-   * @default ''
    */
-  icon?: string | TNode;
+  icon?: TNode;
   /**
    * 图片地址
    */
   image?: string | TNode;
   /**
-   * 标题
-   * @default ''
-   */
-  title?: string | TNode;
-  /**
-   * 内置主题
+   * 内置主题。
    * @default default
    */
   theme?: 'default' | 'success' | 'warning' | 'error';
   /**
-   * 透传 Image 组件全部属性
+   * 标题
+   * @default ''
    */
-  imageProps?: ImageProps;
+  title?: string | TNode;
 }