diff --git a/public/template/detail/baseDefault.vue b/public/template/detail/baseDefault.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd35f1213c11eb99f5a7360075568614c2804dcd
--- /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 0000000000000000000000000000000000000000..7ca4f63cdbe58365508ffd74c70d7c30640578a7
--- /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 0000000000000000000000000000000000000000..d3019281347c17dafa6e19db1b3659eea7d6367c
--- /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
new file mode 100644
index 0000000000000000000000000000000000000000..5066467c9a2939c09df1a6396c23457c18250752
--- /dev/null
+++ b/src/components/QuickDetail/index.vue
@@ -0,0 +1,101 @@
+<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: {
+    type: Object,
+    default: () => {
+      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, 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([])
+const activeName = ref(data.value.tab.vModel)
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <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>
+</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 0000000000000000000000000000000000000000..3ad5c0cc125a7ef44c3347a742db57cec8e69d28
--- /dev/null
+++ b/src/types/detail.ts
@@ -0,0 +1,29 @@
+export interface DescriptionItem {
+  label: string
+  value: string
+}
+
+export interface Description {
+  title: string
+  items?: Array<DescriptionItem>
+  type?: string
+  tableData?: Array<object>
+  tableColumns?: Array<object>
+}
+
+export interface TabPane {
+  label: string
+  name: string
+  description: Description
+}
+
+export interface Tab {
+  vModel: string
+  click: any
+  tabPanes?: Array<TabPane>
+  paneSlot?: boolean
+}
+
+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 0000000000000000000000000000000000000000..cd35f1213c11eb99f5a7360075568614c2804dcd
--- /dev/null
+++ b/src/views/components/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/src/views/components/detail/detailType.vue b/src/views/components/detail/detailType.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ca4f63cdbe58365508ffd74c70d7c30640578a7
--- /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
new file mode 100644
index 0000000000000000000000000000000000000000..cd2c8f8b5ebfb49cf53aa53004802dfc282d8f30
--- /dev/null
+++ b/src/views/components/detail/index.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+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/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>
+  <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>
+      <!-- <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>
+.component-demo {
+  .card-name {
+  }
+  .card-description {
+    margin-top: 10px;
+  }
+  .item {
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/src/views/components/detail/paneSlot.vue b/src/views/components/detail/paneSlot.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d3019281347c17dafa6e19db1b3659eea7d6367c
--- /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>