From 5da6bdcc3162504019b9efb9e1c453ca8a1061bc Mon Sep 17 00:00:00 2001
From: 91zhangliying <1663782157@qq.com>
Date: Sun, 21 Aug 2022 11:48:38 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=8A=9F=E8=83=BD:=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QuickDetail/index.vue        | 113 ++++++++++++++++++++
 src/types/detail.ts                         |  25 +++++
 src/views/components/detail/baseDefault.vue |  51 +++++++++
 src/views/components/detail/index.vue       |  43 ++++++++
 4 files changed, 232 insertions(+)
 create mode 100644 src/components/QuickDetail/index.vue
 create mode 100644 src/types/detail.ts
 create mode 100644 src/views/components/detail/baseDefault.vue
 create mode 100644 src/views/components/detail/index.vue

diff --git a/src/components/QuickDetail/index.vue b/src/components/QuickDetail/index.vue
new file mode 100644
index 0000000..76819db
--- /dev/null
+++ b/src/components/QuickDetail/index.vue
@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { ref, defineProps, toRefs, Ref } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
+import { Detail } from '@/types/detail'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return {}
+    },
+  },
+})
+console.log(`props`, props)
+
+const { data } = toRefs(props) as {
+  data: Ref<Detail>
+}
+console.log(`data`, data.value)
+const dataList = ref([])
+const activeName = ref(data.value.tab.vModel)
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <!--v-model="activeName"   v-model="data.tab.vModel" -->
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="data.tab?.click">
+    <el-tab-pane
+      v-for="(item, index) in data.tab?.tabPanes"
+      :key="index"
+      :label="item.label"
+      :name="item.name"
+    >
+      <el-descriptions :title="item.description.title">
+        <el-descriptions-item
+          v-for="(detacItem, detacIndex) in item.description.items"
+          :key="detacIndex"
+          :label="detacItem.label"
+        >
+          {{ detacItem.value }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-tab-pane>
+  </el-tabs>
+  <!--  <el-tabs v-model="data.vModel" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane
+      v-for="(item, index) in data.tabPanes"
+      :key="index"
+      :label="item.label"
+      :name="item.name"
+    >
+      <el-descriptions :title="item.description"
+        ><el-descriptions-item
+          v-for="(descItem, descIndex) in item.description.items"
+          :key="descIndex"
+          :label="descItem.label"
+          >{{ descItem.value }}</el-descriptions-item
+        >
+      </el-descriptions>
+    </el-tab-pane>
+  </el-tabs> -->
+
+  <!--  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="基础" name="basic">
+      <el-descriptions title="User Info">
+        <el-descriptions-item label="Username"
+          >kooriookami</el-descriptions-item
+        >
+        <el-descriptions-item label="Telephone"
+          >18100000000</el-descriptions-item
+        >
+        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+        <el-descriptions-item label="Remarks">
+          <el-tag size="small">School</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="Address"
+          >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
+          Province</el-descriptions-item
+        >
+      </el-descriptions>
+    </el-tab-pane>
+
+    <el-tab-pane label="高级" name="senior">
+      <el-descriptions title="User Info">
+        <el-descriptions-item label="Username"
+          >kooriookami</el-descriptions-item
+        >
+        <el-descriptions-item label="Telephone"
+          >18100000000</el-descriptions-item
+        >
+        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+        <el-descriptions-item label="Remarks">
+          <el-tag size="small">School</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="Address"
+          >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
+          Province</el-descriptions-item
+        >
+      </el-descriptions></el-tab-pane
+    >
+  </el-tabs> -->
+</template>
+
+<style lang="scss">
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+</style>
diff --git a/src/types/detail.ts b/src/types/detail.ts
new file mode 100644
index 0000000..5cf40f5
--- /dev/null
+++ b/src/types/detail.ts
@@ -0,0 +1,25 @@
+export interface DescriptionItem {
+  label: string
+  value: string
+}
+
+export interface Description {
+  title: string
+  items: Array<DescriptionItem>
+}
+
+export interface TabPane {
+  label: string
+  name: string
+  description: Description
+}
+
+export interface Tab {
+  vModel: string
+  click: any
+  tabPanes: Array<TabPane>
+}
+
+export interface Detail {
+  tab: Tab
+}
diff --git a/src/views/components/detail/baseDefault.vue b/src/views/components/detail/baseDefault.vue
new file mode 100644
index 0000000..d37c05e
--- /dev/null
+++ b/src/views/components/detail/baseDefault.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import { log } from 'console'
+import QuickDetail from '@/components/QuickDetail/index.vue'
+import { Detail } from '@/types/detail'
+
+// const activeName = ref('basic')
+const detail = ref<Detail>({
+  tab: {
+    // vModel: activeName.value,
+    vModel: 'basic',
+    click: () => {
+      console.log(`click`)
+    },
+    tabPanes: [
+      {
+        label: '基础',
+        name: 'basic',
+        description: {
+          title: '用户基本信息',
+          items: [
+            { label: 'UserId', value: '1' },
+            { label: 'Username', value: '张三' },
+            { label: 'age', value: '13' },
+            { label: 'gender', value: '男' },
+            { label: 'phone', value: '88888888888' },
+          ],
+        },
+      },
+      {
+        label: '高级',
+        name: 'senior',
+        description: {
+          title: '用户喜好',
+          items: [
+            { label: 'animal', value: '猫' },
+            { label: 'eat', value: '香蕉' },
+            { label: 'play', value: '旅行' },
+            { label: 'motion', value: '打篮球' },
+            { label: 'work', value: 'IT' },
+          ],
+        },
+      },
+    ],
+  },
+})
+</script>
+
+<template>
+  <quick-detail :data="detail"></quick-detail>
+</template>
diff --git a/src/views/components/detail/index.vue b/src/views/components/detail/index.vue
new file mode 100644
index 0000000..80d71ed
--- /dev/null
+++ b/src/views/components/detail/index.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { reactive, onMounted } from 'vue'
+import QuickCode from '@/components/QuickCode/index.vue'
+import baseDefault from './baseDefault.vue'
+import { getFile } from '@/api/file'
+
+const form = reactive({
+  defaultCode: '',
+})
+onMounted(() => {
+  getFile('/template/upload/baseDefault.vue').then((res: any) => {
+    form.defaultCode = res
+  })
+})
+</script>
+<template>
+  <div class="component-demo">
+    <el-card>
+      <template #header>
+        <div class="card-header card-name">
+          <h2>默认</h2>
+        </div>
+        <div class="card-description">
+          <p>常规详情</p>
+        </div>
+      </template>
+      <base-default></base-default>
+      <quick-code :autodetect="true" :code="form.defaultCode"></quick-code>
+    </el-card>
+  </div>
+</template>
+<style lang="scss" scoped>
+.component-demo {
+  .card-name {
+  }
+  .card-description {
+    margin-top: 10px;
+  }
+  .item {
+    margin-top: 10px;
+  }
+}
+</style>
-- 
Gitee


From b7273eea88015b8d425110407bf5742e53a9eb71 Mon Sep 17 00:00:00 2001
From: 91zhangliying <1663782157@qq.com>
Date: Sun, 21 Aug 2022 17:22:56 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E8=AF=A6=E6=83=85=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/template/detail/baseDefault.vue      |  80 +++++++++++
 public/template/detail/detailType.vue       | 116 ++++++++++++++++
 public/template/detail/paneSlot.vue         |  61 +++++++++
 src/components/QuickDetail/index.vue        | 140 +++++++++-----------
 src/types/detail.ts                         |   8 +-
 src/views/components/detail/baseDefault.vue |  41 +++++-
 src/views/components/detail/detailType.vue  | 116 ++++++++++++++++
 src/views/components/detail/index.vue       |  39 +++++-
 src/views/components/detail/paneSlot.vue    |  61 +++++++++
 9 files changed, 577 insertions(+), 85 deletions(-)
 create mode 100644 public/template/detail/baseDefault.vue
 create mode 100644 public/template/detail/detailType.vue
 create mode 100644 public/template/detail/paneSlot.vue
 create mode 100644 src/views/components/detail/detailType.vue
 create mode 100644 src/views/components/detail/paneSlot.vue

diff --git a/public/template/detail/baseDefault.vue b/public/template/detail/baseDefault.vue
new file mode 100644
index 0000000..cd35f12
--- /dev/null
+++ b/public/template/detail/baseDefault.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import { log } from 'console'
+import QuickDetail from '@/components/QuickDetail/index.vue'
+import { Detail } from '@/types/detail'
+
+// const activeName = ref('basic')
+const detail = ref<Detail>({
+  tab: {
+    // vModel: activeName.value,
+    vModel: 'basic',
+    click: () => {
+      console.log(`click`)
+    },
+    tabPanes: [
+      {
+        label: '基础',
+        name: 'basic',
+        description: {
+          title: '用户基本信息',
+          items: [
+            { label: 'UserId:', value: '1' },
+            { label: 'Username:', value: '张三' },
+            { label: 'age:', value: '13' },
+            { label: 'gender:', value: '男' },
+            { label: 'phone:', value: '88888888888' },
+          ],
+        },
+      },
+      {
+        label: '高级',
+        name: 'senior',
+        description: {
+          title: '用户喜好',
+          items: [
+            { label: 'animal', value: '猫' },
+            { label: 'eat', value: '香蕉' },
+            { label: 'play', value: '旅行' },
+            { label: 'motion', value: '打篮球' },
+            { label: 'work', value: 'IT' },
+          ],
+        },
+      },
+    ],
+  },
+})
+</script>
+
+<template>
+  <h3>常规</h3>
+  <el-row>
+    <el-col :span="24">
+      <quick-detail :data="detail"></quick-detail>
+    </el-col>
+  </el-row>
+  <h3>左侧tab</h3>
+  <el-row>
+    <el-col :span="24">
+      <quick-detail :data="detail" position="left"></quick-detail
+    ></el-col>
+  </el-row>
+  <h3>显示边框</h3>
+  <el-row>
+    <el-col :span="24">
+      <quick-detail :data="detail" :border="true"></quick-detail>
+    </el-col>
+  </el-row>
+  <h3>自定义列数</h3>
+  <el-row>
+    <el-col :span="24">
+      <quick-detail :data="detail" position="left" :column="2"></quick-detail>
+    </el-col>
+  </el-row>
+  <h3>排列方向</h3>
+  <el-row>
+    <el-col :span="24">
+      <quick-detail :data="detail" direction="vertical"></quick-detail>
+    </el-col>
+  </el-row>
+</template>
diff --git a/public/template/detail/detailType.vue b/public/template/detail/detailType.vue
new file mode 100644
index 0000000..7ca4f63
--- /dev/null
+++ b/public/template/detail/detailType.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import { log } from 'console'
+import QuickDetail from '@/components/QuickDetail/index.vue'
+import { Detail } from '@/types/detail'
+
+// const activeName = ref('basic')
+const detail = ref<Detail>({
+  tab: {
+    // vModel: activeName.value,
+    vModel: 'basic',
+    click: () => {
+      console.log(`click`)
+    },
+    tabPanes: [
+      {
+        label: '基础',
+        name: 'basic',
+        description: {
+          title: '用户基本信息',
+          tableColumns: [
+            {
+              label: '用户编号',
+              prop: 'userId',
+              width: '100',
+            },
+            {
+              label: '用户名',
+              prop: 'userName',
+              width: '100',
+            },
+            {
+              label: '姓名',
+              prop: 'fullName',
+              width: '100',
+            },
+            {
+              label: '手机号',
+              prop: 'phone',
+              width: '180',
+            },
+            {
+              label: '邮箱',
+              prop: 'email',
+              width: '200',
+            },
+            {
+              label: '创建时间',
+              prop: 'createTime',
+              width: '200',
+            },
+            {
+              label: '地址',
+              prop: 'address',
+              width: '200',
+            },
+            {
+              label: '备注',
+              prop: 'remark',
+            },
+          ],
+          type: 'table',
+          tableData: [
+            {
+              id: 1,
+              userId: 'YH_1',
+              userName: 'liuyi',
+              avatar: null,
+              fullName: '刘一',
+              phone: 15229380174,
+              email: 'zz15229380174@163.com',
+              address: 'beijin',
+              createTime: '2022-07-14 05:05:57',
+              remark: '测试数据',
+              deleted: 0,
+              enabled: 0,
+            },
+            {
+              id: 2,
+              userId: 'YH_2',
+              userName: 'chener',
+              avatar: null,
+              fullName: '陈二',
+              phone: 15229380174,
+              email: 'zz15229380174@163.com',
+              address: 'beijin',
+              createTime: '2022-07-14 05:05:57',
+              remark: '测试数据',
+              deleted: 0,
+              enabled: 0,
+            },
+          ],
+        },
+      },
+      {
+        label: '高级',
+        name: 'senior',
+        description: {
+          title: '用户喜好',
+          items: [
+            { label: 'animal', value: '猫' },
+            { label: 'eat', value: '香蕉' },
+            { label: 'play', value: '旅行' },
+            { label: 'motion', value: '打篮球' },
+            { label: 'work', value: 'IT' },
+          ],
+        },
+      },
+    ],
+  },
+})
+</script>
+
+<template>
+  <quick-detail :data="detail"> </quick-detail>
+</template>
diff --git a/public/template/detail/paneSlot.vue b/public/template/detail/paneSlot.vue
new file mode 100644
index 0000000..d301928
--- /dev/null
+++ b/public/template/detail/paneSlot.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import { log } from 'console'
+import QuickDetail from '@/components/QuickDetail/index.vue'
+import { Detail } from '@/types/detail'
+
+// const activeName = ref('basic')
+const detail = ref<Detail>({
+  tab: {
+    // vModel: activeName.value,
+    vModel: 'basic',
+    click: () => {
+      console.log(`click`)
+    },
+    paneSlot: true,
+  },
+})
+</script>
+
+<template>
+  <quick-detail :data="detail">
+    <template #default>
+      <el-tab-pane label="基础" name="basic">
+        <el-descriptions title="User Info">
+          <el-descriptions-item label="Username"
+            >kooriookami</el-descriptions-item
+          >
+          <el-descriptions-item label="Telephone"
+            >18100000000</el-descriptions-item
+          >
+          <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+          <el-descriptions-item label="Remarks">
+            <el-tag size="small">School</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="Address"
+            >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
+            Province</el-descriptions-item
+          >
+        </el-descriptions>
+      </el-tab-pane>
+      <el-tab-pane label="高级" name="senior">
+        <el-descriptions title="User Info1">
+          <el-descriptions-item label="Username"
+            >kooriookami</el-descriptions-item
+          >
+          <el-descriptions-item label="Telephone"
+            >18100000000</el-descriptions-item
+          >
+          <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+          <el-descriptions-item label="Remarks">
+            <el-tag size="small">School</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="Address"
+            >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
+            Province</el-descriptions-item
+          >
+        </el-descriptions></el-tab-pane
+      ></template
+    >
+  </quick-detail>
+</template>
diff --git a/src/components/QuickDetail/index.vue b/src/components/QuickDetail/index.vue
index 76819db..5066467 100644
--- a/src/components/QuickDetail/index.vue
+++ b/src/components/QuickDetail/index.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { ref, defineProps, toRefs, Ref } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
+import { number } from 'echarts'
 import { Detail } from '@/types/detail'
+import QuickTable from '../QuickTable/index.vue'
 
 const props = defineProps({
   data: {
@@ -10,11 +12,31 @@ const props = defineProps({
       return {}
     },
   },
+  position: {
+    type: String,
+    default: 'top',
+  },
+  column: {
+    type: Number,
+    default: 3,
+  },
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  direction: {
+    type: String,
+    default: 'horizontal',
+  },
 })
 console.log(`props`, props)
 
-const { data } = toRefs(props) as {
+const { data, position, column, border, direction } = toRefs(props) as {
   data: Ref<Detail>
+  position: Ref<string>
+  column: Ref<number>
+  border: Ref<boolean>
+  direction: Ref<string>
 }
 console.log(`data`, data.value)
 const dataList = ref([])
@@ -25,82 +47,48 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 </script>
 
 <template>
-  <!--v-model="activeName"   v-model="data.tab.vModel" -->
-  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="data.tab?.click">
-    <el-tab-pane
-      v-for="(item, index) in data.tab?.tabPanes"
-      :key="index"
-      :label="item.label"
-      :name="item.name"
-    >
-      <el-descriptions :title="item.description.title">
-        <el-descriptions-item
-          v-for="(detacItem, detacIndex) in item.description.items"
-          :key="detacIndex"
-          :label="detacItem.label"
-        >
-          {{ detacItem.value }}
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-tab-pane>
+  <el-tabs
+    v-model="activeName"
+    class="demo-tabs"
+    :tab-position="position"
+    @tab-click="data.tab?.click"
+  >
+    <template v-if="data.tab?.paneSlot"> <slot></slot> </template>
+    <template v-else>
+      <el-tab-pane
+        v-for="(item, index) in data.tab?.tabPanes"
+        :key="index"
+        :label="item.label"
+        :name="item.name"
+      >
+        <template v-if="item.description.type === 'table'">
+          <quick-table
+            :data="item.description.tableData"
+            :columns="item.description.tableColumns"
+          >
+          </quick-table>
+        </template>
+        <template v-else-if="item.description.type === 'descriptionList'">
+        </template>
+        <template v-else>
+          <el-descriptions
+            :title="item.description.title"
+            :column="column"
+            :border="border"
+            :direction="direction"
+          >
+            <el-descriptions-item
+              v-for="(detacItem, detacIndex) in item.description.items"
+              :key="detacIndex"
+              :label="detacItem.label"
+            >
+              {{ detacItem.value }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </template>
+      </el-tab-pane>
+    </template>
   </el-tabs>
-  <!--  <el-tabs v-model="data.vModel" class="demo-tabs" @tab-click="handleClick">
-    <el-tab-pane
-      v-for="(item, index) in data.tabPanes"
-      :key="index"
-      :label="item.label"
-      :name="item.name"
-    >
-      <el-descriptions :title="item.description"
-        ><el-descriptions-item
-          v-for="(descItem, descIndex) in item.description.items"
-          :key="descIndex"
-          :label="descItem.label"
-          >{{ descItem.value }}</el-descriptions-item
-        >
-      </el-descriptions>
-    </el-tab-pane>
-  </el-tabs> -->
-
-  <!--  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-    <el-tab-pane label="基础" name="basic">
-      <el-descriptions title="User Info">
-        <el-descriptions-item label="Username"
-          >kooriookami</el-descriptions-item
-        >
-        <el-descriptions-item label="Telephone"
-          >18100000000</el-descriptions-item
-        >
-        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
-        <el-descriptions-item label="Remarks">
-          <el-tag size="small">School</el-tag>
-        </el-descriptions-item>
-        <el-descriptions-item label="Address"
-          >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
-          Province</el-descriptions-item
-        >
-      </el-descriptions>
-    </el-tab-pane>
-
-    <el-tab-pane label="高级" name="senior">
-      <el-descriptions title="User Info">
-        <el-descriptions-item label="Username"
-          >kooriookami</el-descriptions-item
-        >
-        <el-descriptions-item label="Telephone"
-          >18100000000</el-descriptions-item
-        >
-        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
-        <el-descriptions-item label="Remarks">
-          <el-tag size="small">School</el-tag>
-        </el-descriptions-item>
-        <el-descriptions-item label="Address"
-          >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
-          Province</el-descriptions-item
-        >
-      </el-descriptions></el-tab-pane
-    >
-  </el-tabs> -->
 </template>
 
 <style lang="scss">
diff --git a/src/types/detail.ts b/src/types/detail.ts
index 5cf40f5..3ad5c0c 100644
--- a/src/types/detail.ts
+++ b/src/types/detail.ts
@@ -5,7 +5,10 @@ export interface DescriptionItem {
 
 export interface Description {
   title: string
-  items: Array<DescriptionItem>
+  items?: Array<DescriptionItem>
+  type?: string
+  tableData?: Array<object>
+  tableColumns?: Array<object>
 }
 
 export interface TabPane {
@@ -17,7 +20,8 @@ export interface TabPane {
 export interface Tab {
   vModel: string
   click: any
-  tabPanes: Array<TabPane>
+  tabPanes?: Array<TabPane>
+  paneSlot?: boolean
 }
 
 export interface Detail {
diff --git a/src/views/components/detail/baseDefault.vue b/src/views/components/detail/baseDefault.vue
index d37c05e..cd35f12 100644
--- a/src/views/components/detail/baseDefault.vue
+++ b/src/views/components/detail/baseDefault.vue
@@ -19,11 +19,11 @@ const detail = ref<Detail>({
         description: {
           title: '用户基本信息',
           items: [
-            { label: 'UserId', value: '1' },
-            { label: 'Username', value: '张三' },
-            { label: 'age', value: '13' },
-            { label: 'gender', value: '男' },
-            { label: 'phone', value: '88888888888' },
+            { label: 'UserId:', value: '1' },
+            { label: 'Username:', value: '张三' },
+            { label: 'age:', value: '13' },
+            { label: 'gender:', value: '男' },
+            { label: 'phone:', value: '88888888888' },
           ],
         },
       },
@@ -47,5 +47,34 @@ const detail = ref<Detail>({
 </script>
 
 <template>
-  <quick-detail :data="detail"></quick-detail>
+  <h3>常规</h3>
+  <el-row>
+    <el-col :span="24">
+      <quick-detail :data="detail"></quick-detail>
+    </el-col>
+  </el-row>
+  <h3>左侧tab</h3>
+  <el-row>
+    <el-col :span="24">
+      <quick-detail :data="detail" position="left"></quick-detail
+    ></el-col>
+  </el-row>
+  <h3>显示边框</h3>
+  <el-row>
+    <el-col :span="24">
+      <quick-detail :data="detail" :border="true"></quick-detail>
+    </el-col>
+  </el-row>
+  <h3>自定义列数</h3>
+  <el-row>
+    <el-col :span="24">
+      <quick-detail :data="detail" position="left" :column="2"></quick-detail>
+    </el-col>
+  </el-row>
+  <h3>排列方向</h3>
+  <el-row>
+    <el-col :span="24">
+      <quick-detail :data="detail" direction="vertical"></quick-detail>
+    </el-col>
+  </el-row>
 </template>
diff --git a/src/views/components/detail/detailType.vue b/src/views/components/detail/detailType.vue
new file mode 100644
index 0000000..7ca4f63
--- /dev/null
+++ b/src/views/components/detail/detailType.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import { log } from 'console'
+import QuickDetail from '@/components/QuickDetail/index.vue'
+import { Detail } from '@/types/detail'
+
+// const activeName = ref('basic')
+const detail = ref<Detail>({
+  tab: {
+    // vModel: activeName.value,
+    vModel: 'basic',
+    click: () => {
+      console.log(`click`)
+    },
+    tabPanes: [
+      {
+        label: '基础',
+        name: 'basic',
+        description: {
+          title: '用户基本信息',
+          tableColumns: [
+            {
+              label: '用户编号',
+              prop: 'userId',
+              width: '100',
+            },
+            {
+              label: '用户名',
+              prop: 'userName',
+              width: '100',
+            },
+            {
+              label: '姓名',
+              prop: 'fullName',
+              width: '100',
+            },
+            {
+              label: '手机号',
+              prop: 'phone',
+              width: '180',
+            },
+            {
+              label: '邮箱',
+              prop: 'email',
+              width: '200',
+            },
+            {
+              label: '创建时间',
+              prop: 'createTime',
+              width: '200',
+            },
+            {
+              label: '地址',
+              prop: 'address',
+              width: '200',
+            },
+            {
+              label: '备注',
+              prop: 'remark',
+            },
+          ],
+          type: 'table',
+          tableData: [
+            {
+              id: 1,
+              userId: 'YH_1',
+              userName: 'liuyi',
+              avatar: null,
+              fullName: '刘一',
+              phone: 15229380174,
+              email: 'zz15229380174@163.com',
+              address: 'beijin',
+              createTime: '2022-07-14 05:05:57',
+              remark: '测试数据',
+              deleted: 0,
+              enabled: 0,
+            },
+            {
+              id: 2,
+              userId: 'YH_2',
+              userName: 'chener',
+              avatar: null,
+              fullName: '陈二',
+              phone: 15229380174,
+              email: 'zz15229380174@163.com',
+              address: 'beijin',
+              createTime: '2022-07-14 05:05:57',
+              remark: '测试数据',
+              deleted: 0,
+              enabled: 0,
+            },
+          ],
+        },
+      },
+      {
+        label: '高级',
+        name: 'senior',
+        description: {
+          title: '用户喜好',
+          items: [
+            { label: 'animal', value: '猫' },
+            { label: 'eat', value: '香蕉' },
+            { label: 'play', value: '旅行' },
+            { label: 'motion', value: '打篮球' },
+            { label: 'work', value: 'IT' },
+          ],
+        },
+      },
+    ],
+  },
+})
+</script>
+
+<template>
+  <quick-detail :data="detail"> </quick-detail>
+</template>
diff --git a/src/views/components/detail/index.vue b/src/views/components/detail/index.vue
index 80d71ed..cd2c8f8 100644
--- a/src/views/components/detail/index.vue
+++ b/src/views/components/detail/index.vue
@@ -2,15 +2,26 @@
 import { reactive, onMounted } from 'vue'
 import QuickCode from '@/components/QuickCode/index.vue'
 import baseDefault from './baseDefault.vue'
+import detailType from './detailType.vue'
+import paneSlot from './paneSlot.vue'
+
 import { getFile } from '@/api/file'
 
 const form = reactive({
   defaultCode: '',
+  detailTypeCode: '',
+  paneSlotCode: '',
 })
 onMounted(() => {
-  getFile('/template/upload/baseDefault.vue').then((res: any) => {
+  getFile('/template/detail/baseDefault.vue').then((res: any) => {
     form.defaultCode = res
   })
+  getFile('/template/detail/detailType.vue').then((res: any) => {
+    form.detailTypeCode = res
+  })
+  getFile('/template/detail/paneSlot.vue').then((res: any) => {
+    form.paneSlotCode = res
+  })
 })
 </script>
 <template>
@@ -25,8 +36,34 @@ onMounted(() => {
         </div>
       </template>
       <base-default></base-default>
+      <!-- <description-slot></description-slot>   -->
       <quick-code :autodetect="true" :code="form.defaultCode"></quick-code>
     </el-card>
+    <el-card class="item" shadow="always">
+      <template #header>
+        <div class="card-header card-name">
+          <h2>类型</h2>
+        </div>
+        <div class="card-description">
+          <p>详情类型</p>
+        </div>
+      </template>
+      <detail-type></detail-type>
+      <quick-code :autodetect="true" :code="form.detailTypeCode"></quick-code>
+    </el-card>
+    <el-card class="item" shadow="always">
+      <template #header>
+        <div class="card-header card-name">
+          <h2>插槽</h2>
+        </div>
+        <div class="card-description">
+          <p>插槽详情</p>
+        </div>
+      </template>
+
+      <pane-slot></pane-slot>
+      <quick-code :autodetect="true" :code="form.paneSlotCode"></quick-code>
+    </el-card>
   </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/views/components/detail/paneSlot.vue b/src/views/components/detail/paneSlot.vue
new file mode 100644
index 0000000..d301928
--- /dev/null
+++ b/src/views/components/detail/paneSlot.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import { log } from 'console'
+import QuickDetail from '@/components/QuickDetail/index.vue'
+import { Detail } from '@/types/detail'
+
+// const activeName = ref('basic')
+const detail = ref<Detail>({
+  tab: {
+    // vModel: activeName.value,
+    vModel: 'basic',
+    click: () => {
+      console.log(`click`)
+    },
+    paneSlot: true,
+  },
+})
+</script>
+
+<template>
+  <quick-detail :data="detail">
+    <template #default>
+      <el-tab-pane label="基础" name="basic">
+        <el-descriptions title="User Info">
+          <el-descriptions-item label="Username"
+            >kooriookami</el-descriptions-item
+          >
+          <el-descriptions-item label="Telephone"
+            >18100000000</el-descriptions-item
+          >
+          <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+          <el-descriptions-item label="Remarks">
+            <el-tag size="small">School</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="Address"
+            >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
+            Province</el-descriptions-item
+          >
+        </el-descriptions>
+      </el-tab-pane>
+      <el-tab-pane label="高级" name="senior">
+        <el-descriptions title="User Info1">
+          <el-descriptions-item label="Username"
+            >kooriookami</el-descriptions-item
+          >
+          <el-descriptions-item label="Telephone"
+            >18100000000</el-descriptions-item
+          >
+          <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+          <el-descriptions-item label="Remarks">
+            <el-tag size="small">School</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="Address"
+            >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
+            Province</el-descriptions-item
+          >
+        </el-descriptions></el-tab-pane
+      ></template
+    >
+  </quick-detail>
+</template>
-- 
Gitee