From 1aa78d515d65774e41c7616c4ddd6af9bcbc99eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B0=8F=E6=9C=AF?= <n551wv1@163.com>
Date: Mon, 29 Nov 2021 19:52:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=93=E6=9E=9C?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/result/__tests__/result.spec.ts     |  8 ++
 packages/devui-vue/devui/result/index.ts      | 17 ++++
 .../devui/result/src/result-types.ts          | 20 +++++
 .../devui-vue/devui/result/src/result.scss    | 43 ++++++++++
 .../devui-vue/devui/result/src/result.tsx     | 28 +++++++
 .../devui-vue/docs/components/result/index.md | 79 +++++++++++++++++++
 6 files changed, 195 insertions(+)
 create mode 100644 packages/devui-vue/devui/result/__tests__/result.spec.ts
 create mode 100644 packages/devui-vue/devui/result/index.ts
 create mode 100644 packages/devui-vue/devui/result/src/result-types.ts
 create mode 100644 packages/devui-vue/devui/result/src/result.scss
 create mode 100644 packages/devui-vue/devui/result/src/result.tsx
 create mode 100644 packages/devui-vue/docs/components/result/index.md

diff --git a/packages/devui-vue/devui/result/__tests__/result.spec.ts b/packages/devui-vue/devui/result/__tests__/result.spec.ts
new file mode 100644
index 00000000..59d95436
--- /dev/null
+++ b/packages/devui-vue/devui/result/__tests__/result.spec.ts
@@ -0,0 +1,8 @@
+import { mount } from '@vue/test-utils';
+import { Result } from '../index';
+
+describe('result test', () => {
+  it('result init render', async () => {
+    // todo
+  })
+})
diff --git a/packages/devui-vue/devui/result/index.ts b/packages/devui-vue/devui/result/index.ts
new file mode 100644
index 00000000..750a3b8d
--- /dev/null
+++ b/packages/devui-vue/devui/result/index.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import Result from './src/result'
+
+Result.install = function(app: App): void {
+  app.component(Result.name, Result)
+}
+
+export { Result }
+
+export default {
+  title: 'Result 结果',
+  category: '反馈',
+  status: '10%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  install(app: App): void {
+        app.use(Result as any)
+  }
+}
diff --git a/packages/devui-vue/devui/result/src/result-types.ts b/packages/devui-vue/devui/result/src/result-types.ts
new file mode 100644
index 00000000..b2588a28
--- /dev/null
+++ b/packages/devui-vue/devui/result/src/result-types.ts
@@ -0,0 +1,20 @@
+import type { ExtractPropTypes } from 'vue'
+
+export type ResultIcon = 'success' | 'danger' | 'warning' | 'info'
+
+export const resultProps = {
+  icon: {
+    type: String as () => ResultIcon,
+    default: 'info'
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  desc: {
+    type: String,
+    default: ''
+  }
+} as const
+
+export type ResultProps = ExtractPropTypes<typeof resultProps>
diff --git a/packages/devui-vue/devui/result/src/result.scss b/packages/devui-vue/devui/result/src/result.scss
new file mode 100644
index 00000000..9a0cec2b
--- /dev/null
+++ b/packages/devui-vue/devui/result/src/result.scss
@@ -0,0 +1,43 @@
+@import '../../style/theme/color';
+@import '../../style/theme/font';
+
+.devui-result {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  box-sizing: border-box;
+  padding: 30px;
+
+  &__icon{
+    &-success::before{
+      color: $devui-success
+    }
+    &-danger::before{
+      color: $devui-danger
+    }
+    &-warning::before{
+      color: $devui-warning
+    }
+    &-info::before{
+      color: $devui-info
+    }
+  }
+
+  &__title {
+    margin-top: 20px;
+    color: $devui-text;
+    font-size: $devui-font-size-lg;
+  }
+
+  &__desc {
+    margin-top: 10px;
+    color: $devui-text-weak;
+    font-size: $devui-font-size-md;
+  }
+
+  &__extra{
+    margin-top: 30px;
+  }
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/result/src/result.tsx b/packages/devui-vue/devui/result/src/result.tsx
new file mode 100644
index 00000000..04a91a19
--- /dev/null
+++ b/packages/devui-vue/devui/result/src/result.tsx
@@ -0,0 +1,28 @@
+import { defineComponent } from 'vue'
+import { resultProps, ResultProps } from './result-types'
+import Icon from '../../icon/src/icon'
+import './result.scss'
+
+export default defineComponent({
+  name: 'DResult',
+  props: resultProps,
+  emits: [],
+  setup(props: ResultProps, ctx) {
+    enum IconEnum {success = 'right-o', danger='error-o', warning='warning-o', info='info-o'}
+    
+    return () => {
+      return (
+        <div class='devui-result'>
+          {
+            ctx.slots.icon ? ctx.slots.icon() :  <Icon name={IconEnum[props.icon]||''} class={`devui-result__icon-${props.icon}`} size="64px"/>
+          }
+          <div class='devui-result__title'>
+            {ctx.slots.title ? ctx.slots?.title() : props.title}
+          </div>
+          <div class='devui-result__desc'>{ctx.slots.title ? ctx.slots?.title() : props.desc}</div>
+          <div class='devui-result__extra'>{ctx.slots.extra ? ctx.slots?.extra() : ''}</div>
+        </div>
+      )
+    }
+  }
+})
diff --git a/packages/devui-vue/docs/components/result/index.md b/packages/devui-vue/docs/components/result/index.md
new file mode 100644
index 00000000..b30efe6a
--- /dev/null
+++ b/packages/devui-vue/docs/components/result/index.md
@@ -0,0 +1,79 @@
+# Result 结果
+
+操作结果反馈。
+
+### 何时使用
+
+用于对用户的操作结果或者异常状态做反馈。
+
+### 基本用法
+
+:::demo
+
+```vue
+<template>
+  <div>
+    <d-row>
+      <d-col :span="6">
+        <d-result icon="success" title="操作成功" desc="操作成功描述"></d-result>
+      </d-col>
+      <d-col :span="6">
+        <d-result icon="danger" title="操作失败" desc="操作失败描述"></d-result>
+      </d-col>
+      <d-col :span="6"><d-result icon="warning" title="操作警告" desc="操作警告描述"></d-result></d-col>
+      <d-col :span="6"><d-result icon="info" title="操作信息" desc="操作信息描述"></d-result></d-col>
+    </d-row>
+  </div>
+</template>
+```
+
+:::
+
+### 自定义
+
+:::demo
+
+```vue
+<template>
+  <div>
+    <d-result desc="操作成功描述">
+      <template #icon>
+        <d-icon name="insert-image" size="64px"></d-icon>
+      </template>
+      <template #title>这是自定义标题</template>
+      <template #extra>
+        <d-button id="primaryBtn" style="margin-right: 8px">回到首页</d-button>
+      </template>
+    </d-result>
+  </div>
+</template>
+```
+
+:::
+
+### d-result
+d-result 参数
+
+| 参数  | 类型                        | 默认 | 说明           | 跳转 Demo             |
+| ----- | --------------------------- | ---- | -------------- | --------------------- |
+| icon  | [`ResultIcon`](#ResultIcon) | info | 指定 icon 类型 | [基本用法](#基本用法) |
+| title | string                      | -    | 结果标题       | [基本用法](#基本用法) |
+| desc  | string                      | -    | 结果描述       | [基本用法](#基本用法) |
+
+### ResultIcon
+
+默认值为'info'
+
+```ts
+export type ResultIcon = 'success' | 'danger' | 'warning' | 'info'
+```
+
+### 插槽
+两种方式使用：`v-slot:icon` 或者具名插槽`#icon`
+
+| 参数  | 说明           |
+| ----- | -------------- |
+| icon  | 自定义图标     |
+| title | 自定义标题     |
+| desc  | 自定义描述内容 |
+| extra | 底部额外区域   |
-- 
Gitee