feat: Detail组件重构完成

src/components/Avatars/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="avatars-wrap">
+    <template v-if="tooltip">
+      <el-tooltip
+        v-for="(item, $index) in avatarsData"
+        :key="$index"
+        :content="item.text"
+        placement="top"
+      >
+        <div
+          :class="
+            showAvatar ? 'avatars-item-img' : ['avatars-item', `avatars-${item.type || 'default'}`]
+          "
+        >
+          <el-avatar v-if="showAvatar" :size="40" :src="item.url">
+            <img :src="defaultImg" />
+          </el-avatar>
+          <span v-else>{{ item.text.substr(0, 1) }}</span>
+        </div>
+      </el-tooltip>
+      <div v-if="max && data.length - max > 0" :class="['avatars-item', 'avatars-item-img']">
+        <span>+{{ data.length - max }}</span>
+      </div>
+    </template>
+    <template v-else>
+      <div
+        v-for="(item, $index) in avatarsData"
+        :key="$index"
+        :class="
+          showAvatar ? 'avatars-item-img' : ['avatars-item', `avatars-${item.type || 'default'}`]
+        "
+      >
+        <el-avatar v-if="showAvatar" :size="40" :src="item.url">
+          <img :src="defaultImg" />
+        </el-avatar>
+        <span v-else>{{ item.text.substr(0, 1) }}</span>
+      </div>
+      <div v-if="max && data.length - max > 0" :class="['avatars-item', 'avatars-item-img']">
+        <span>+{{ data.length - max }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts" name="Avatars">
+import { PropType, computed } from 'vue'
+import { deepClone } from '@/utils'
+import { AvatarConfig } from './types'
+import defaultImg from '@/assets/img/default-avatar.png'
+
+const props = defineProps({
+  // 展示的数据
+  data: {
+    type: Array as PropType<AvatarConfig[]>,
+    default: () => []
+  },
+  // 最大展示数量
+  max: {
+    type: Number as PropType<number>,
+    default: 0
+  },
+  // 是否使用头像
+  showAvatar: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  // 是否显示完整名称
+  tooltip: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  }
+})
+
+const avatarsData = computed(() => {
+  if (props.max) {
+    if (props.data.length <= props.max) {
+      return props.data
+    } else {
+      const data = deepClone(props.data).splice(0, props.max)
+      return data
+    }
+  } else {
+    return props.data
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.avatars-wrap {
+  display: flex;
+
+  .avatars-item {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    color: #fff;
+    text-align: center;
+    background: #2d8cf0;
+    border: 1px solid #fff;
+    border-radius: 50%;
+  }
+
+  .avatars-item-img {
+    display: inline-block;
+    border-radius: 50%;
+
+    .el-avatar--circle {
+      border: 1px solid #fff;
+    }
+  }
+
+  .avatars-item-img + .avatars-item-img {
+    margin-left: -12px;
+  }
+
+  .avatars-item + .avatars-item {
+    margin-left: -12px;
+  }
+
+  .avatars-default {
+    color: #bae7ff;
+    background: #096dd9;
+  }
+
+  .avatars-success {
+    color: #f6ffed;
+    background: #52c41a;
+  }
+
+  .avatars-danger {
+    color: #fff1f0;
+    background: #f5222d;
+  }
+
+  .avatars-warning {
+    color: #fffbe6;
+    background: #faad14;
+  }
+}
+</style>

src/components/Avatars/types.ts

@@ -0,0 +1,5 @@
+export interface AvatarConfig {
+  text: string
+  type?: string
+  url?: string
+}

src/components/Detail/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="detail__wrap">
+    <div v-if="title" class="detail__wrap--header" @click="toggleClick">
+      <div class="detail__wrap--title">
+        <div>
+          {{ title }}
+          <el-tooltip v-if="message" :content="message" placement="right">
+            <i class="el-icon-warning-outline"></i>
+          </el-tooltip>
+        </div>
+      </div>
+      <i
+        v-if="collapsed"
+        :class="['el-icon-arrow-down', { 'el-icon-arrow-down-transform': !show }]"
+      ></i>
+    </div>
+    <el-collapse-transition>
+      <div v-show="show" class="detail__content" :style="contentStyleObj">
+        <el-row>
+          <el-col v-for="(item, $index) in schema" :key="$index" :span="item.span || 12">
+            <div class="detail__content--item" :class="{ 'detail__content--flex': !vertical }">
+              <div class="content__item--label" :style="labelStyleObj">
+                <slot :name="item.field" :row="item">
+                  {{ item.label }}
+                </slot>
+              </div>
+              <div class="content__item--message" :style="messageStyleObj">
+                <slot :name="`${item.field}Content`" :row="data">
+                  {{ data[item.field] }}
+                </slot>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script setup lang="ts" name="Detail">
+import { PropType, ref, computed } from 'vue'
+import { SchemaConfig } from './types'
+
+const props = defineProps({
+  // 详情标题
+  title: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  // 是否可折叠
+  collapsed: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
+  // 辅助提示
+  message: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  // 是否需要边框
+  border: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
+  // 需要展示的数据
+  data: {
+    type: Object as PropType<IObj>,
+    required: true
+  },
+  // 布局展示的数据
+  schema: {
+    type: Array as PropType<SchemaConfig[]>,
+    required: true
+  },
+  // 是否标题和内容各占一行 垂直布局
+  vertical: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  // 标题宽度
+  labelWidth: {
+    type: String as PropType<string>,
+    default: '150px'
+  },
+  // 标题位置
+  labelAlign: {
+    type: String as PropType<string>,
+    default: 'left'
+  },
+  // 边框颜色
+  borderColor: {
+    type: String as PropType<string>,
+    default: '#f0f0f0'
+  },
+  // 标题背景颜色
+  labelBg: {
+    type: String as PropType<string>,
+    default: '#fafafa'
+  },
+  classic: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+})
+
+const show = ref<boolean>(true)
+const contentStyleObj = computed(() => {
+  return {
+    borderTop: props.border ? `1px solid ${props.borderColor}` : '',
+    borderLeft: props.border ? `1px solid ${props.borderColor}` : ''
+  }
+})
+const labelStyleObj = computed((): any => {
+  return {
+    width: props.vertical ? `100%` : props.labelWidth,
+    textAlign: props.labelAlign,
+    backgroundColor: props.border && !props.classic ? props.labelBg : '',
+    borderRight: props.border && !props.classic ? `1px solid ${props.borderColor}` : '',
+    borderBottom: props.border && !props.classic ? `1px solid ${props.borderColor}` : ''
+  }
+})
+const messageStyleObj = computed(() => {
+  return {
+    width: props.vertical ? `100%` : `calc(100% - ${props.labelWidth})`,
+    borderRight: props.border && !props.classic ? `1px solid ${props.borderColor}` : '',
+    borderBottom: props.border && !props.classic ? `1px solid ${props.borderColor}` : ''
+  }
+})
+
+function toggleClick() {
+  if (props.collapsed) {
+    show.value = !show.value
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.detail__wrap {
+  padding: 10px;
+  background: #fff;
+  border-radius: 2px;
+
+  .detail__wrap--header {
+    display: flex;
+    height: 32px;
+    margin-bottom: 10px;
+    justify-content: space-between;
+    align-items: center;
+    // cursor: pointer;
+    .detail__wrap--title {
+      position: relative;
+      display: inline-block;
+      margin-left: 10px;
+      font-family: MicrosoftYaHei-Bold;
+      font-size: 18px;
+      font-weight: 700;
+      color: rgba(0, 0, 0, 0.85);
+
+      &::after {
+        position: absolute;
+        top: 1px;
+        left: -10px;
+        width: 4px;
+        height: 90%;
+        background: var(--main-color);
+        content: '';
+      }
+    }
+
+    .el-icon-arrow-down {
+      transition: all 0.2s;
+    }
+
+    .el-icon-arrow-down-transform {
+      transform: rotate(-180deg);
+    }
+  }
+
+  .detail__content {
+    :deep(.el-row) {
+      flex-wrap: wrap;
+    }
+
+    .detail__content--flex {
+      display: flex;
+      height: 100%;
+    }
+
+    .content__item--label {
+      padding: 8px 16px;
+      font-size: 14px;
+      line-height: 20px;
+      color: #918e8d;
+    }
+
+    .content__item--message {
+      padding: 8px 16px;
+      flex: 1;
+      font-size: 14px;
+      line-height: 20px;
+      color: #606266;
+      overflow-wrap: break-word;
+    }
+  }
+}
+</style>

src/components/Detail/types.ts

@@ -0,0 +1,5 @@
+export interface SchemaConfig {
+  field: string // 字段名
+  label?: string // label名
+  span?: number // 列的数量
+}

src/components/index.ts

@@ -2,9 +2,11 @@ import type { App } from 'vue'
 import SvgIcon from './SvgIcon/index.vue' // svg组件
 import ComSearch from './Search/index.vue' // search组件
 import ComDialog from './Dialog/index.vue' // dialog组件
+import ComDetail from './Detail/index.vue' // detail组件
 
 export function setupGlobCom(app: App<Element>): void {
   app.component('SvgIcon', SvgIcon)
   app.component('ComSearch', ComSearch)
   app.component('ComDialog', ComDialog)
+  app.component('ComDetail', ComDetail)
 }