ui库和web端产品库合并版本(还需修复细节)

ui/packages/basic/AiTitle.vue

@@ -0,0 +1,163 @@
+<template>
+  <section class="AiTitle" :class="{ 'bottomBorder': isShowBottomBorder, AiTitleSub: isHasSub}">
+    <i class="iconfont iconBack_Large" v-if="isShowBack" @click="onBackBtnClick"/>
+    <div class="fill">
+      <div class="ailist-title">
+        <div class="ailist-title__left">
+          <h2>{{ title }}</h2>
+          <div v-if="isShowIM" class="openIM iconfont iconGroup_IM" @click="openIM"></div>
+        </div>
+        <div class="ailist-title__right">
+          <ai-area
+              v-if="isShowArea"
+              :instance="instance"
+              v-bind="$attrs"
+              :value="value"
+              v-on="$listeners"
+              :areaLevel="areaLevel"
+              :hideLevel="hideLevel"
+              :valueLevel="valueLevel"
+              :disabled="disabled"/>
+          <div class="aititle-right__btns">
+            <slot name="rightBtn"></slot>
+          </div>
+        </div>
+      </div>
+      <div class="subtitle" v-if="$scopedSlots.sub">
+        <slot name="sub"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AiTitle',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    instance: {
+      type: Function
+    },
+    areaLevel: [String, Number],
+    hideLevel: {default: 2},
+    valueLevel: [String, Number],
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String
+    },
+    isShowIM: {
+      type: Boolean,
+      default: false
+    },
+    isShowArea: {
+      type: Boolean,
+      default: false
+    },
+    openIM: {
+      type: Function
+    },
+    isShowBack: {
+      type: Boolean,
+      default: false
+    },
+    isShowBottomBorder: {
+      type: Boolean,
+      default: false
+    },
+    classic: Boolean
+  },
+
+  computed: {
+    isHasSub() {
+      return this.$slots.sub
+    }
+  },
+
+  methods: {
+    onBackBtnClick() {
+      this.$emit('onBackClick')
+      this.$emit('back')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.AiTitle {
+  display: flex;
+
+  .ailist-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 48px;
+
+    .ailist-title__left {
+      display: flex;
+      align-items: center;
+
+      & > i {
+        width: auto;
+        height: auto;
+        margin-right: 8px;
+        font-size: 16px;
+      }
+
+      h2 {
+        color: #222;
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      .openIM {
+        margin-left: 8px;
+      }
+    }
+
+    .ailist-title__right {
+      display: flex;
+      align-items: center;
+    }
+
+    ::v-deep.el-button {
+      margin-left: 8px !important;
+    }
+  }
+
+  &.AiTitleSub {
+    height: auto;
+    padding: 16px 0;
+
+    .ailist-title {
+      height: auto;
+      margin-bottom: 3px;
+    }
+  }
+
+  &.bottomBorder {
+    border-bottom: 1px solid #D8DCE3;
+  }
+
+  .subtitle {
+    width: 100%;
+    color: #888888;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  .iconBack_Large {
+    line-height: 48px;
+    margin-right: 8px;
+  }
+}
+</style>