From 75160ee07819ffa15649938bb530627e7bd4f060 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Mon, 10 Apr 2023 18:55:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Eresult=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/index.scss |  1 +
 packages/opendesign/src/components/index.ts   |  1 +
 .../src/components/result/OResult.vue         | 43 +++++++++++++++++
 .../result/__demo__/IndexResult.vue           | 13 +++++
 .../result/__demo__/ResultBasic.vue           | 16 +++++++
 .../result/__demo__/ResultSlots.vue           | 30 ++++++++++++
 .../opendesign/src/components/result/index.ts | 13 +++++
 .../src/components/result/style/index.scss    | 48 +++++++++++++++++++
 .../src/components/result/style/index.ts      |  2 +
 .../src/components/result/style/var.scss      | 30 ++++++++++++
 .../opendesign/src/components/result/types.ts | 28 +++++++++++
 packages/portal/src/router.ts                 |  6 +++
 12 files changed, 231 insertions(+)
 create mode 100644 packages/opendesign/src/components/result/OResult.vue
 create mode 100644 packages/opendesign/src/components/result/__demo__/IndexResult.vue
 create mode 100644 packages/opendesign/src/components/result/__demo__/ResultBasic.vue
 create mode 100644 packages/opendesign/src/components/result/__demo__/ResultSlots.vue
 create mode 100644 packages/opendesign/src/components/result/index.ts
 create mode 100644 packages/opendesign/src/components/result/style/index.scss
 create mode 100644 packages/opendesign/src/components/result/style/index.ts
 create mode 100644 packages/opendesign/src/components/result/style/var.scss
 create mode 100644 packages/opendesign/src/components/result/types.ts

diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss
index a9c77e30..75a57b33 100644
--- a/packages/opendesign/src/components/index.scss
+++ b/packages/opendesign/src/components/index.scss
@@ -33,3 +33,4 @@
 @use './message/style/index.scss' as *;
 @use './cascader/style/index.scss' as *;
 @use './grid/style/index.scss' as *;
+@use './result/style/index.scss' as *;
diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index c1e067eb..344a2dd7 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -36,6 +36,7 @@ export * from './message';
 export * from './slides';
 export * from './cascader';
 export * from './grid';
+export * from './result';
 
 // export * from './scrollbar';
 export * from './intersection-observer';
diff --git a/packages/opendesign/src/components/result/OResult.vue b/packages/opendesign/src/components/result/OResult.vue
new file mode 100644
index 00000000..40daeefa
--- /dev/null
+++ b/packages/opendesign/src/components/result/OResult.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { resultProps } from './types';
+import { IconAlert, IconError, IconPoint, IconSuccess } from '../icons';
+import { computed } from 'vue';
+
+const props = defineProps(resultProps);
+
+// TODO:修改图标命名-->IconInfo、IconSuccess、IconWarning、IconDanger、Icon500...支持全局配置图标
+const iconMap = {
+  info: IconPoint,
+  success: IconSuccess,
+  warning: IconAlert,
+  danger: IconError,
+};
+
+const icon = computed(() => iconMap[props.status]);
+</script>
+
+<template>
+  <div class="o-result" :class="`o-result-${props.status}`">
+    <div v-if="props.status || $slots.icon" class="o-result-icon" :class="{ 'o-result-icon-custom': $slots.icon }">
+      <slot name="icon">
+        <component :is="icon" />
+      </slot>
+    </div>
+    <div v-if="props.title || $slots.title" class="o-result-title">
+      <slot name="title">
+        <p>{{ props.title }}</p>
+      </slot>
+    </div>
+    <div v-if="props.description || $slots.description" class="o-result-description">
+      <slot name="description">
+        <p>{{ props.description }}</p>
+      </slot>
+    </div>
+    <div v-if="$slots.extra" class="o-result-extra">
+      <slot name="extra"></slot>
+    </div>
+    <div v-if="$slots.default" class="o-result-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/result/__demo__/IndexResult.vue b/packages/opendesign/src/components/result/__demo__/IndexResult.vue
new file mode 100644
index 00000000..4fc93881
--- /dev/null
+++ b/packages/opendesign/src/components/result/__demo__/IndexResult.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import '../style';
+
+import ResultBasic from './ResultBasic.vue';
+import ResultSlots from './ResultSlots.vue';
+</script>
+
+<template>
+  <div class="page-demo">
+    <ResultBasic />
+    <ResultSlots />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/result/__demo__/ResultBasic.vue b/packages/opendesign/src/components/result/__demo__/ResultBasic.vue
new file mode 100644
index 00000000..41ef166f
--- /dev/null
+++ b/packages/opendesign/src/components/result/__demo__/ResultBasic.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { OButton } from '../../button';
+import '../../button/style';
+import { OResult } from '../index';
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <OResult title="操作错误" description="请修改配置项" status="danger">
+      <template #extra>
+        <OButton>返回</OButton>
+      </template>
+    </OResult>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/result/__demo__/ResultSlots.vue b/packages/opendesign/src/components/result/__demo__/ResultSlots.vue
new file mode 100644
index 00000000..c2a8ca01
--- /dev/null
+++ b/packages/opendesign/src/components/result/__demo__/ResultSlots.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { OButton } from '../../button';
+import '../../button/style';
+import { OFigure } from '../../figure';
+import '../../figure/style';
+import { OResult } from '../index';
+const img = 'https://www.openeuler.org/assets/404.6b1a0d2f.png';
+</script>
+
+<template>
+  <h4>插槽</h4>
+  <section>
+    <OResult description="请修改配置项" status="danger">
+      <template #icon>
+        <OFigure class="img" :src="img" />
+      </template>
+      <template #title> 404 </template>
+      <template #description> 页面走丢了 </template>
+      <template #extra>
+        <OButton>返回</OButton>
+      </template>
+    </OResult>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.img {
+  width: 50%;
+}
+</style>
diff --git a/packages/opendesign/src/components/result/index.ts b/packages/opendesign/src/components/result/index.ts
new file mode 100644
index 00000000..1af6c728
--- /dev/null
+++ b/packages/opendesign/src/components/result/index.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+
+import _OResult from './OResult.vue';
+
+const OResult = Object.assign(_OResult, {
+  install(app: App) {
+    app.component(_OResult.name, _OResult);
+  },
+});
+
+export * from './types';
+
+export { OResult };
diff --git a/packages/opendesign/src/components/result/style/index.scss b/packages/opendesign/src/components/result/style/index.scss
new file mode 100644
index 00000000..bf37a5ee
--- /dev/null
+++ b/packages/opendesign/src/components/result/style/index.scss
@@ -0,0 +1,48 @@
+@use './var.scss';
+
+.o-result {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: var(--result-padding);
+}
+
+.o-result-icon {
+  width: var(--result-icon-size);
+  height: var(--result-icon-size);
+  font-size: var(--result-icon-size);
+  color: var(--result-icon-color);
+}
+
+.o-result-title {
+  color: var(--result-title-color);
+  font-size: var(--result-title-text-size);
+  line-height: var(--result-title-text-height);
+  font-weight: 600;
+  margin-top: var(--result-title-margin-top);
+
+  p {
+    margin: 0;
+  }
+}
+
+.o-result-description {
+  color: var(--result-desc-color);
+  font-size: var(--result-desc-text-size);
+  line-height: var(--result-desc-text-height);
+  margin-top: var(--result-desc-margin-top);
+  p {
+    margin: 0;
+  }
+}
+
+.o-result-extra {
+  margin-top: var(--result-extra-margin-top);
+}
+
+.o-result-icon-custom {
+  width: auto;
+  height: auto;
+}
diff --git a/packages/opendesign/src/components/result/style/index.ts b/packages/opendesign/src/components/result/style/index.ts
new file mode 100644
index 00000000..591b2fbd
--- /dev/null
+++ b/packages/opendesign/src/components/result/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/result/style/var.scss b/packages/opendesign/src/components/result/style/var.scss
new file mode 100644
index 00000000..de5267de
--- /dev/null
+++ b/packages/opendesign/src/components/result/style/var.scss
@@ -0,0 +1,30 @@
+.o-result {
+  --result-padding: 40px;
+
+  --result-icon-size: 60px;
+  --result-icon-color: var(--o-color-primary1);
+
+  --result-title-color: var(--o-color-info1);
+  --result-title-text-size: var(--o-font_size-h3);
+  --result-title-text-height: var(--o-line_height-h3);
+  --result-title-margin-top: 16px;
+
+  --result-desc-color: var(--o-color-info2);
+  --result-desc-text-size: var(--o-font_size-text1);
+  --result-desc-text-height: var(--o-line_height-text1);
+  --result-desc-margin-top: 8px;
+
+  --result-extra-margin-top: 24px;
+}
+
+.o-result-success {
+  --result-icon-color: var(--o-color-success1);
+}
+
+.o-result-warning {
+  --result-icon-color: var(--o-color-warning1);
+}
+
+.o-result-danger {
+  --result-icon-color: var(--o-color-danger1);
+}
diff --git a/packages/opendesign/src/components/result/types.ts b/packages/opendesign/src/components/result/types.ts
new file mode 100644
index 00000000..f40d843a
--- /dev/null
+++ b/packages/opendesign/src/components/result/types.ts
@@ -0,0 +1,28 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const ResultStatusTypes = ['info', 'success', 'warning', 'danger'] as const;
+export type ResultStatusT = typeof ResultStatusTypes[number];
+
+export const resultProps = {
+  /**
+   * 状态
+   */
+  status: {
+    type: String as PropType<ResultStatusT>,
+    default: 'info',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+  },
+  /**
+   * 描述
+   **/
+  description: {
+    type: String,
+  },
+};
+
+export type ResultPropsT = ExtractPropTypes<typeof resultProps>;
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index cf16f305..dd83d92d 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -194,6 +194,12 @@ export const routes = [
     label: '加载 Loading',
     component: () => import('@components/loading/__demo__/IndexLoading.vue'),
   },
+  {
+    path: '/result',
+    name: 'Result',
+    label: '结果 Result',
+    component: () => import('@components/result/__demo__/IndexResult.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
-- 
Gitee