feat: 🎸 新增Detail详情组件并给出相应示例

src/components/Detail/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="detail__wrap">
+    <div class="detail__wrap--header" @click="toggleClick">
+      <div class="detail__wrap--title">
+        <div v-if="title">
+          {{ title }}
+          <el-tooltip
+            v-if="message"
+            effect="dark"
+            :content="message"
+            placement="right"
+          >
+            <i class="el-icon-warning-outline" />
+          </el-tooltip>
+        </div>
+      </div>
+      <i v-if="collapsed" :class="['el-icon-arrow-down', { 'el-icon-arrow-down-transform': !show }]" />
+    </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 v-if="item.slots && item.slots.title" :name="item.slots.title" :row="item" />
+                <template v-else>{{ item.label }}</template>
+              </div>
+              <div class="content__item--message" :style="messageStyleObj">
+                <slot v-if="item.slots && item.slots.default" :name="item.slots.default" :row="item" />
+                <template v-else>{{ data[item.field] }}</template>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, PropType, computed } from 'vue'
+export default defineComponent({
+  name: 'Detail',
+  props: {
+    // 详情标题
+    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<object>,
+      required: true
+    },
+    // 布局展示的数据
+    schema: {
+      type: Array as PropType<any[]>,
+      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'
+    }
+  },
+  setup(props) {
+    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(() => {
+      return {
+        width: props.vertical ? `calc(100% - 33px)` : props.labelWidth,
+        textAlign: props.labelAlign,
+        backgroundColor: props.border ? props.labelBg : '',
+        borderRight: props.border ? `1px solid ${props.borderColor}` : '',
+        borderBottom: props.border ? `1px solid ${props.borderColor}` : ''
+      }
+    })
+
+    const messageStyleObj = computed(() => {
+      return {
+        width: props.vertical ? `calc(100% - 33px)` : '100%',
+        borderRight: props.border ? `1px solid ${props.borderColor}` : '',
+        borderBottom: props.border ? `1px solid ${props.borderColor}` : ''
+      }
+    })
+
+    function toggleClick() {
+      if (props.collapsed) {
+        show.value = !show.value
+      }
+    }
+
+    return {
+      show,
+      contentStyleObj, labelStyleObj, messageStyleObj,
+      toggleClick
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.detail__wrap {
+  background: #fff;
+  border-radius: 2px;
+  padding: 10px;
+  .detail__wrap--header {
+    display: flex;
+    height: 32px;
+    margin-bottom: 10px;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    .detail__wrap--title {
+      display: inline-block;
+      font-size: 18px;
+      font-weight: 700;
+      color: rgba(0, 0, 0, .85);
+      position: relative;
+      margin-left: 10px;
+      &:after {
+        content: "";
+        width: 3px;
+        height: 100%;
+        background: #2d8cf0;
+        border-radius: 2px;
+        position: absolute;
+        top: 1px;
+        left: -10px;
+      }
+    }
+    .el-icon-arrow-down {
+      transition: all .2s;
+    }
+    .el-icon-arrow-down-transform {
+      transform: rotate(-180deg);
+    }
+  }
+  .detail__content {
+    .detail__content--flex {
+      display: flex;
+      height: 100%;
+    }
+    .content__item--label {
+      padding: 8px 16px;
+    }
+    .content__item--message {
+      flex: 1;
+      padding: 8px 16px;
+      line-height: 20px;
+    }
+  }
+}
+</style>

src/components/More/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="more__item clearfix">
-    <p class="more__item--text">{{ content }}</p>
+  <div class="more__item clearfix" :style="styleWrapObj">
+    <p class="more__item--text" :style="styleTextObj">{{ content }}</p>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, unref, onMounted, nextTick, ref } from 'vue'
+import { defineComponent, PropType, computed } from 'vue'
 export default defineComponent({
   name: 'More',
   props: {
@@ -17,47 +17,51 @@ export default defineComponent({
     // 默认展示几行
     lineClamp: {
       type: Number as PropType<number>,
-      default: 0
-    },
-    // 宽度
-    width: {
-      type: String as PropType<string>,
-      default: '300px'
+      default: 1
     },
     // style
     style: {
       type: Object as PropType<object>,
-      default: () => {
-        return {
-          width: '300px',
-          float: 'left'
-        }
-      }
+      default: () => null
     }
   },
   setup(props) {
-    const styleObj = computed(() => {
+    const styleWrapObj = computed(() => {
+      return props.style
+    })
 
+    const styleTextObj = computed(() => {
+      if (props.lineClamp === 1) {
+        // 默认展示一行
+        return {
+          'white-space': 'nowrap'
+        }
+      } else {
+        // 展示多少行
+        return {
+          display: '-webkit-box',
+          '-webkit-line-clamp': props.lineClamp,
+          '-webkit-box-orient': 'vertical'
+        }
+      }
     })
+
+    return {
+      styleWrapObj,
+      styleTextObj
+    }
   }
 })
 </script>
 
 <style lang="less" scoped>
 .more__item {
-  width: 528px;
-  height: 122px;
   float: left;
   .more__item--text {
-    width: 476px;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
     font-size: 14px;
     color: #545c63;
-    line-height: 28px;
     transition: all .1s;
     text-align: left;
     &:hover {
@@ -67,10 +71,11 @@ export default defineComponent({
       z-index: 5;
       border-radius: 8px;
       box-shadow: 0 8px 16px 0 rgba(7,17,27,.2);
-      -webkit-line-clamp: inherit;
-       padding: 10px;
+      -webkit-line-clamp: inherit !important;
+      padding: 10px;
       margin-top: -10px;
       margin-left: -10px;
+      white-space: normal !important;
     }
   }
 }

src/components/Setting/index.vue

@@ -77,6 +77,11 @@
         <el-switch v-model="logo" @change="setLogo" />
       </div>
 
+      <div class="setting__item">
+        <span>灰色模式</span>
+        <el-switch v-model="greyMode" @change="setGreyMode" />
+      </div>
+
       <div class="setting__item">
         <span>页面标题</span>
         <el-input v-model="title" size="mini" @change="setTitle" />
@@ -86,6 +91,7 @@
         <span>LOGO标题</span>
         <el-input v-model="logoTitle" size="mini" @change="setLogoTitle" />
       </div>
+
     </div>
   </el-drawer>
 </template>
@@ -158,6 +164,11 @@ export default defineComponent({
       appStore.SetLogoTitle(logoTitle)
     }
 
+    const greyMode = ref<boolean>(appStore.greyMode)
+    function setGreyMode(greyMode: boolean) {
+      appStore.SetGreyMode(greyMode)
+    }
+
     return {
       drawer, toggleClick,
       layout, setLayout,
@@ -170,7 +181,8 @@ export default defineComponent({
       tagsView, setTagsView,
       logo, setLogo,
       title, setTitle,
-      logoTitle, setLogoTitle
+      logoTitle, setLogoTitle,
+      greyMode, setGreyMode
     }
   }
 })
@@ -199,7 +211,7 @@ export default defineComponent({
 // 项目配置
 .setting__content {
   background: @appBg;
-  padding: 0 20px;
+  padding: 0 20px 20px 20px;
   .setting__title {
     text-align: center;
     padding-top: 20px;

src/components/Table/components/TableColumn.vue

@@ -4,16 +4,16 @@
       <!-- 树型数据 -->
       <template v-if="item.children && item.children.length">
         <table-column
-          :key="item[item.key]"
+          :key="item[item.field]"
           :child="item"
         />
       </template>
 
       <template v-else>
         <el-table-column
-          :key="item[item.key]"
+          :key="item[item.field]"
           v-bind="{...getItemBindValue(item)}"
-          :prop="item.key"
+          :prop="item.field"
         >
           <!-- 表头插槽 -->
           <template v-if="item.slots && item.slots.header" #header="scope">
@@ -37,7 +37,7 @@
 
           <!-- 不需要插槽 -->
           <!-- <span v-if="!item.slots || !item.slots.default">
-            {{ scope.row[item.key] }}
+            {{ scope.row[item.field] }}
           </span> -->
         </el-table-column>
       </template>