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

ui/packages/basic/AiWrapper.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="ai-wrapper">
+    <ai-title class="w100" v-if="title" :title="title"/>
+    <div class="ai-wrapper-content" :class="{border}">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script>
+import AiTitle from "./AiTitle";
+
+export default {
+  name: 'AiWrapper',
+  components: {AiTitle},
+  componentName: 'AiWrapper',
+
+  provide() {
+    return {
+      AiWrapper: this
+    }
+  },
+
+  props: {
+    'label-width': {
+      type: String
+    },
+
+    columnsNumber: {
+      type: Number,
+      default: 2
+    },
+    border: Boolean,
+    title: String
+  },
+
+  computed: {
+    autoWidth() {
+      return ((1 / this.columnsNumber) * 100).toFixed(2) + '%'
+    },
+
+    autoLableWidth() {
+      return this.labelWidth
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.ai-wrapper {
+  .w100 {
+    width: 100%;
+  }
+
+  .ai-wrapper-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    &.border {
+      border-left: 1px solid $borderColor;
+      border-top: 1px solid $borderColor;
+
+      .ai-info-item {
+        border-bottom: 1px solid $borderColor;
+        border-right: 1px solid $borderColor;
+        margin-bottom: 0;
+        line-height: 32px;
+
+        .ai-info-item__left {
+          background: rgba(0, 0, 0, .03);
+          padding-right: 16px;
+          border-right: 1px solid $borderColor;
+          margin-right: 16px;
+        }
+
+        .el-textarea__inner {
+          border: none;
+          padding-left: 0;
+        }
+      }
+    }
+  }
+
+}
+</style>