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

ui/packages/basic/AiInfoItem.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="ai-info-item" :style="contentStyle">
+    <label class="ai-info-item__left" :style="contentLabelStyle">
+      <template v-if="$slots.label">
+        <slot name="label"/>
+      </template>
+      <template v-else>{{ label }}</template>
+    </label>
+    <div class="ai-info-item__right">
+      <slot v-if="$scopedSlots.default"/>
+      <template v-else-if="!!openType">
+        <ai-open-data :type="openType" :openid="value"/>
+      </template>
+      <template v-else>{{ value || '-' }}</template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AiInfoItem',
+
+  inject: ['AiWrapper'],
+
+  props: {
+    label: {
+      type: String
+    },
+
+    value: {
+      type: [String, Number]
+    },
+
+    'label-width': {
+      type: String
+    },
+
+    isLine: {
+      type: Boolean,
+      default: false
+    },
+    openType: {default: ""}
+  },
+
+  computed: {
+    contentStyle() {
+      let width = this.AiWrapper.autoWidth
+
+      if (this.isLine) {
+        width = '100%'
+      }
+
+      return {
+        width
+      }
+    },
+
+    contentLabelStyle() {
+      return {
+        width: this.labelWidth || this.AiWrapper.autoLableWidth
+      }
+    },
+  },
+
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.ai-info-item {
+  display: flex;
+  line-height: 1.4;
+  margin-bottom: 16px;
+
+  label {
+    flex-shrink: 0;
+    width: 96px;
+    margin-right: 40px;
+    text-align: right;
+    color: #888;
+    font-size: 14px;
+  }
+
+  .ai-info-item__right {
+    flex: 1;
+    color: #222;
+    font-size: 14px;
+    word-break: break-all;
+  }
+}
+</style>