From d9cc26fa4fb895e7f479d926ed56f114af94ba0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=B0=8F=E6=B0=91?=
 <DesignHhuang@users.noreply.github.com>
Date: Sun, 11 Feb 2024 14:32:44 +0800
Subject: [PATCH] feat: add desc page demo (#328)

* feat: add desc page demo

* types: add description types
---
 .../src/pages/demo/page/desc/basic/data.tsx   | 188 ++++++++++++++++++
 .../src/pages/demo/page/desc/basic/index.vue  |  78 ++++++++
 .../src/pages/demo/page/desc/high/data.tsx    |  61 ++++++
 .../src/pages/demo/page/desc/high/index.vue   | 105 ++++++++++
 packages/components/src/description/typing.ts |  41 +++-
 packages/locale/src/lang/en/routes.ts         |   3 +
 packages/locale/src/lang/zh-CN/routes.ts      |   3 +
 .../router/src/routes/modules/demo/pages.ts   |  32 ++-
 8 files changed, 508 insertions(+), 3 deletions(-)
 create mode 100644 apps/admin/src/pages/demo/page/desc/basic/data.tsx
 create mode 100644 apps/admin/src/pages/demo/page/desc/basic/index.vue
 create mode 100644 apps/admin/src/pages/demo/page/desc/high/data.tsx
 create mode 100644 apps/admin/src/pages/demo/page/desc/high/index.vue

diff --git a/apps/admin/src/pages/demo/page/desc/basic/data.tsx b/apps/admin/src/pages/demo/page/desc/basic/data.tsx
new file mode 100644
index 00000000..541e0902
--- /dev/null
+++ b/apps/admin/src/pages/demo/page/desc/basic/data.tsx
@@ -0,0 +1,188 @@
+import { DescItem } from '@vben/components'
+
+export const refundData = {
+  a1: '1000000000',
+  a2: '已取货',
+  a3: '1234123421',
+  a4: '3214321432',
+}
+
+export const personData = {
+  b1: '付小小',
+  b2: '18100000000',
+  b3: '菜鸟仓储',
+  b4: '浙江省杭州市西湖区万塘路18号',
+  b5: '无',
+}
+export const refundSchema: DescItem[] = [
+  {
+    field: 'a1',
+    label: '取货单号',
+  },
+  {
+    field: 'a2',
+    label: '状态',
+  },
+  {
+    field: 'a3',
+    label: '销售单号',
+  },
+  {
+    field: 'a4',
+    label: '子订单',
+  },
+]
+export const personSchema: DescItem[] = [
+  {
+    field: 'b1',
+    label: '用户姓名',
+  },
+  {
+    field: 'b2',
+    label: '联系电话',
+  },
+  {
+    field: 'b3',
+    label: '常用快递',
+  },
+  {
+    field: 'b4',
+    label: '取货地址',
+  },
+  {
+    field: 'b5',
+    label: '备注',
+  },
+]
+
+export const refundTableSchema = [
+  {
+    title: '商品编号',
+    minWidth: 150,
+    field: 't1',
+    slots: {
+      default: 't1_default',
+    },
+  },
+  {
+    title: '商品名称',
+    minWidth: 150,
+    field: 't2',
+  },
+  {
+    title: '商品条码',
+    minWidth: 150,
+    field: 't3',
+  },
+  {
+    title: '单价	',
+    minWidth: 150,
+    field: 't4',
+  },
+  {
+    title: '数量（件）	',
+    minWidth: 150,
+    field: 't5',
+  },
+  {
+    title: '金额',
+    minWidth: 150,
+    field: 't6',
+  },
+]
+export const refundTimeTableSchema = [
+  {
+    title: '时间',
+    minWidth: 150,
+    field: 't1',
+  },
+  {
+    title: '当前进度',
+    minWidth: 150,
+    field: 't2',
+  },
+  {
+    title: '状态',
+    minWidth: 150,
+    field: 't3',
+    slots: {
+      default: 't3_default',
+    },
+  },
+  {
+    title: '操作员ID',
+    field: 't4',
+    minWidth: 150,
+  },
+  {
+    title: '耗时',
+    field: 't5',
+    minWidth: 150,
+  },
+]
+
+export const refundTableData: any[] = [
+  {
+    t1: 1234561,
+    t2: '矿泉水 550ml',
+    t3: '12421432143214321',
+    t4: '2.00',
+    t5: 1,
+    t6: 2.0,
+  },
+  {
+    t1: 1234562,
+    t2: '矿泉水 550ml',
+    t3: '12421432143214321',
+    t4: '2.00',
+    t5: 2,
+    t6: 2.0,
+  },
+  {
+    t1: 1234562,
+    t2: '矿泉水 550ml',
+    t3: '12421432143214321',
+    t4: '2.00',
+    t5: 2,
+    t6: 2.0,
+  },
+  {
+    t1: 1234562,
+    t2: '矿泉水 550ml',
+    t3: '12421432143214321',
+    t4: '2.00',
+    t5: 2,
+    t6: 2.0,
+  },
+]
+
+export const refundTimeTableData: any[] = [
+  {
+    t1: '2017-10-01 14:10',
+    t2: '联系客户',
+    t3: '进行中',
+    t4: '取货员 ID1234',
+    t5: '5mins',
+  },
+  {
+    t1: '2017-10-01 14:10',
+    t2: '取货员出发',
+    t3: '成功',
+    t4: '取货员 ID1234',
+    t5: '5mins',
+  },
+  {
+    t1: '2017-10-01 14:10',
+    t2: '取货员接单',
+    t3: '成功',
+    t4: '系统',
+    t5: '5mins',
+  },
+  {
+    t1: '2017-10-01 14:10',
+    t2: '申请审批通过',
+    t3: '成功',
+    t4: '用户',
+    t5: '1h',
+  },
+]
diff --git a/apps/admin/src/pages/demo/page/desc/basic/index.vue b/apps/admin/src/pages/demo/page/desc/basic/index.vue
new file mode 100644
index 00000000..030acca9
--- /dev/null
+++ b/apps/admin/src/pages/demo/page/desc/basic/index.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { useTable } from '@vben/vbencomponents'
+import { Description } from '@vben/components'
+
+import {
+  refundSchema,
+  refundData,
+  personSchema,
+  personData,
+  refundTableSchema,
+  refundTimeTableSchema,
+  refundTableData,
+  refundTimeTableData,
+} from './data'
+
+const handleSummary = ({ data }) => {
+  let totalT5 = 0
+  let totalT6 = 0
+  data.forEach((item) => {
+    totalT5 += item.t5
+    totalT6 += item.t6
+  })
+  return [['总计', '', '', '', totalT5, totalT6]]
+}
+
+const [registerRefundTable] = useTable({
+  title: '退货商品',
+  data: refundTableData,
+  columns: refundTableSchema,
+  pagination: false,
+  showFooter: true,
+  footerMethod: handleSummary,
+  align: 'center',
+})
+
+const [registerTimeTable] = useTable({
+  title: '退货进度',
+  columns: refundTimeTableSchema,
+  pagination: false,
+  data: refundTimeTableData,
+  align: 'center',
+})
+</script>
+
+<template>
+  <VbenCard title="基础详情页">
+    <Description
+      size="medium"
+      title="退款申请"
+      :bordered="false"
+      labelPlacement="left"
+      :data="refundData"
+      :schema="refundSchema"
+    />
+    <Description
+      size="medium"
+      title="用户信息"
+      :bordered="false"
+      labelPlacement="left"
+      :data="personData"
+      :schema="personSchema"
+    />
+
+    <VbenTable @register="registerRefundTable">
+      <template #t1_default="{ row }">
+        <VbenButton text tag="a" type="info" size="small">
+          {{ row.t1 }}
+        </VbenButton>
+      </template>
+    </VbenTable>
+    <VbenTable @register="registerTimeTable">
+      <template #t3_default="{ row }">
+        <VbenBadge type="success" dot />
+        <span class="ml-2">{{ row.t3 }}</span>
+      </template>
+    </VbenTable>
+  </VbenCard>
+</template>
diff --git a/apps/admin/src/pages/demo/page/desc/high/data.tsx b/apps/admin/src/pages/demo/page/desc/high/data.tsx
new file mode 100644
index 00000000..f7b77166
--- /dev/null
+++ b/apps/admin/src/pages/demo/page/desc/high/data.tsx
@@ -0,0 +1,61 @@
+export const refundTimeTableSchema = [
+  {
+    title: '时间',
+    minWidth: 150,
+    field: 't1',
+  },
+  {
+    title: '当前进度',
+    minWidth: 150,
+    field: 't2',
+  },
+  {
+    title: '状态',
+    minWidth: 150,
+    field: 't3',
+    slots: {
+      default: 't3_default',
+    },
+  },
+  {
+    title: '操作员ID	',
+    minWidth: 150,
+    field: 't4',
+  },
+  {
+    title: '耗时',
+    minWidth: 150,
+    field: 't5',
+  },
+]
+
+export const refundTimeTableData: any[] = [
+  {
+    t1: '2017-10-01 14:10',
+    t2: '联系客户',
+    t3: '进行中',
+    t4: '取货员 ID1234',
+    t5: '5mins',
+  },
+  {
+    t1: '2017-10-01 14:10',
+    t2: '取货员出发',
+    t3: '成功',
+    t4: '取货员 ID1234',
+    t5: '5mins',
+  },
+  {
+    t1: '2017-10-01 14:10',
+    t2: '取货员接单',
+    t3: '成功',
+    t4: '系统',
+    t5: '5mins',
+  },
+  {
+    t1: '2017-10-01 14:10',
+    t2: '申请审批通过',
+    t3: '成功',
+    t4: '用户',
+    t5: '1h',
+  },
+]
diff --git a/apps/admin/src/pages/demo/page/desc/high/index.vue b/apps/admin/src/pages/demo/page/desc/high/index.vue
new file mode 100644
index 00000000..5608d5c2
--- /dev/null
+++ b/apps/admin/src/pages/demo/page/desc/high/index.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { useTable } from '@vben/vbencomponents'
+import { refundTimeTableSchema, refundTimeTableData } from './data'
+
+const [registerTimeTable] = useTable({
+  title: '退货进度',
+  columns: refundTimeTableSchema,
+  pagination: false,
+  data: refundTimeTableData,
+  align: 'center',
+})
+</script>
+
+<template>
+  <VbenCard title="单号：234231029431">
+    <template #header-extra>
+      <vben-space>
+        <vben-button> 操作一 </vben-button>
+        <vben-button> 操作二 </vben-button>
+        <vben-button type="primary"> 主操作 </vben-button>
+      </vben-space>
+    </template>
+
+    <vben-tabs type="line" animated>
+      <vben-tab-pane name="详情" tab="详情"> </vben-tab-pane>
+      <vben-tab-pane name="规则" tab="规则"> </vben-tab-pane>
+    </vben-tabs>
+
+    <VbenDesc size="small" :column="2" labelPlacement="left">
+      <VbenDescItem label="创建人"> 曲丽丽 </VbenDescItem>
+      <VbenDescItem label="订购产品"> XX 服务 </VbenDescItem>
+      <VbenDescItem label="创建时间"> 2017-01-10 </VbenDescItem>
+      <VbenDescItem label="关联单据">
+        <a>12421</a>
+      </VbenDescItem>
+      <VbenDescItem label="生效日期"> 2017-07-07 ~ 2017-08-08 </VbenDescItem>
+      <VbenDescItem label="备注"> 请于两个工作日内确认 </VbenDescItem>
+    </VbenDesc>
+    <VbenCard title="流程进度" :bordered="false">
+      <VbenSteps :current="2" size="small">
+        <VbenStep
+          title="创建项目"
+          description="Vben agreed at 2016-12-12 12:32"
+        />
+        <VbenStep title="部门初审" description="Chad" />
+        <VbenStep title="财务复核" />
+        <VbenStep title="完成" />
+      </VbenSteps>
+    </VbenCard>
+
+    <VbenCard title="用户信息">
+      <VbenDesc :column="3" labelPlacement="left">
+        <VbenDescItem label="用户姓名"> 付小小 </VbenDescItem>
+        <VbenDescItem label="会员卡号"> XX 32943898021309809423 </VbenDescItem>
+        <VbenDescItem label="身份证"> 3321944288191034921 </VbenDescItem>
+        <VbenDescItem label="联系方式"> 18112345678 </VbenDescItem>
+        <VbenDescItem label="联系地址" :span="2">
+          曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
+        </VbenDescItem>
+      </VbenDesc>
+    </VbenCard>
+    <VbenCard title="信息组">
+      <VbenDesc :column="3" labelPlacement="left">
+        <VbenDescItem label="某某数据"> 111 </VbenDescItem>
+        <VbenDescItem label="该数据更新时间"> 2017-08-08 </VbenDescItem>
+        <VbenDescItem label="某某数据"> 725 </VbenDescItem>
+        <VbenDescItem label="该数据更新时间"> 2017-08-08 </VbenDescItem>
+      </VbenDesc>
+    </VbenCard>
+
+    <VbenCard title="多层级信息组">
+      <VbenDesc title="组名称" :column="3" labelPlacement="left">
+        <VbenDescItem label="负责人"> 林东东 </VbenDescItem>
+        <VbenDescItem label="角色码"> 1234567 </VbenDescItem>
+        <VbenDescItem label="所属部门"> XX公司 - YY部 </VbenDescItem>
+        <VbenDescItem label="过期时间"> 2017-08-08 </VbenDescItem>
+        <VbenDescItem label="描述" :span="2">
+          这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
+        </VbenDescItem>
+      </VbenDesc>
+      <VbenDivider />
+      <VbenDesc title="组名称" :column="1" labelPlacement="left">
+        <VbenDescItem label="学名">
+          Citrullus lanatus (Thunb.) Matsum. et
+          Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
+        </VbenDescItem>
+      </VbenDesc>
+      <VbenDivider />
+      <VbenDesc title="组名称" :column="1" labelPlacement="left">
+        <VbenDescItem label="负责人"> 付小小 </VbenDescItem>
+        <VbenDescItem label="角色码"> 1234568 </VbenDescItem>
+      </VbenDesc>
+    </VbenCard>
+    <VbenCard title="用户近半年来电记录" class="my-5">
+      <VbenEmpty />
+    </VbenCard>
+
+    <VbenTable @register="registerTimeTable">
+      <template #t3_default="{ row }">
+        <VbenBadge type="success" dot />
+        <span class="ml-2">{{ row.t3 }}</span>
+      </template>
+    </VbenTable>
+  </VbenCard>
+</template>
diff --git a/packages/components/src/description/typing.ts b/packages/components/src/description/typing.ts
index 8b28d8ff..1e3ef15c 100644
--- a/packages/components/src/description/typing.ts
+++ b/packages/components/src/description/typing.ts
@@ -1,4 +1,9 @@
-import type { VNode, CSSProperties } from 'vue'
+import type {
+  VNode,
+  CSSProperties,
+  ExtractPublicPropTypes,
+  PropType,
+} from 'vue'
 
 declare type Recordable<T = any> = Record<string, T>
 
@@ -18,7 +23,39 @@ export interface DescItem {
   ) => VNode | undefined | JSX.Element | Element | string | number
 }
 
-export interface DescriptionProps {
+export const descriptionsProps = {
+  title: String,
+  column: {
+    type: Number,
+    default: 3,
+  },
+  columns: Number,
+  labelPlacement: {
+    type: String as PropType<'left' | 'top'>,
+    default: 'top',
+  },
+  labelAlign: {
+    type: String as PropType<'left' | 'right' | 'center'>,
+    default: 'left',
+  },
+  separator: {
+    type: String,
+    default: ':',
+  },
+  size: {
+    type: String as PropType<'small' | 'medium' | 'large'>,
+    default: 'medium',
+  },
+  bordered: Boolean,
+  labelClass: String,
+  labelStyle: [Object, String] as PropType<string | CSSProperties>,
+  contentClass: String,
+  contentStyle: [Object, String] as PropType<string | CSSProperties>,
+} as const
+
+export type DescriptionsProps = ExtractPublicPropTypes<typeof descriptionsProps>
+
+export interface DescriptionProps extends DescriptionsProps {
   useContainer?: boolean
   /**
    * item configuration
diff --git a/packages/locale/src/lang/en/routes.ts b/packages/locale/src/lang/en/routes.ts
index 3962d861..4641ddcf 100644
--- a/packages/locale/src/lang/en/routes.ts
+++ b/packages/locale/src/lang/en/routes.ts
@@ -91,6 +91,9 @@ export default {
       account: 'Account',
       accountCenter: 'Center',
       accountSetting: 'Setting',
+      desc: 'Details',
+      descBasic: 'Basic Details',
+      descHigh: 'Advanced Details',
     },
     transition: 'Transition',
     steps: {
diff --git a/packages/locale/src/lang/zh-CN/routes.ts b/packages/locale/src/lang/zh-CN/routes.ts
index a85492c1..6643c65a 100644
--- a/packages/locale/src/lang/zh-CN/routes.ts
+++ b/packages/locale/src/lang/zh-CN/routes.ts
@@ -92,6 +92,9 @@ export default {
       account: '个人页',
       accountCenter: '个人中心',
       accountSetting: '个人设置',
+      desc: '详情页',
+      descBasic: '基础详情页',
+      descHigh: '高级详情页',
     },
     transition: '过渡动画',
     steps: {
diff --git a/packages/router/src/routes/modules/demo/pages.ts b/packages/router/src/routes/modules/demo/pages.ts
index 143c334e..2ccdf7cc 100644
--- a/packages/router/src/routes/modules/demo/pages.ts
+++ b/packages/router/src/routes/modules/demo/pages.ts
@@ -66,7 +66,8 @@ const pages: RouteRecordItem = {
         {
           path: 'setting',
           name: 'AccountSettingPage',
-          component: () => import('@/pages/demo/page/account/setting/index.vue'),
+          component: () =>
+            import('@/pages/demo/page/account/setting/index.vue'),
           meta: {
             title: 'routes.demo.page.accountSetting',
           },
@@ -143,6 +144,35 @@ const pages: RouteRecordItem = {
       ],
     },
     // =============================exception end=============================
+    // =============================desc start=============================
+    {
+      path: 'desc',
+      name: 'DescPage',
+      component: getParentLayout('DescPage'),
+      redirect: '/pages/desc/basic',
+      meta: {
+        title: 'routes.demo.page.desc',
+      },
+      children: [
+        {
+          path: 'basic',
+          name: 'DescBasicPage',
+          component: () => import('@/pages/demo/page/desc/basic/index.vue'),
+          meta: {
+            title: 'routes.demo.page.descBasic',
+          },
+        },
+        {
+          path: 'high',
+          name: 'DescHighPage',
+          component: () => import('@/pages/demo/page/desc/high/index.vue'),
+          meta: {
+            title: 'routes.demo.page.descHigh',
+          },
+        },
+      ],
+    },
+    // =============================desc end=============================
   ],
 }