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

ui/packages/basic/AiFileList.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="ai-filelist">
+    <div class="ai-flie__item" v-for="(item, index) in fileList" :key="index" @click="downFile(item)"
+         :title="item.name">
+      <div class="ai-flie__item--left flex1">
+        <svg aria-hidden="true">
+          <use xlink:href="#iconAppendix_UNdownload"></use>
+        </svg>
+        <span>{{ item[fileProps.name] }}</span>
+      </div>
+      <div class="ai-file__item--right">
+        <span>{{ item[fileProps.size] }}</span>
+        <i class="iconfont iconDownload"></i>
+      </div>
+    </div>
+    <div v-if="!fileList.length" style="width: 120px" class="no-data"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AiFileList',
+
+  props: {
+    fileList: {
+      type: Array,
+      default: () => []
+    },
+
+    fileOps: {
+      type: Object
+    }
+  },
+
+  computed: {
+    fileProps() {
+      const props = {
+        name: 'name',
+        size: 'size'
+      }
+
+      return this.fileOps || props
+    }
+  },
+
+  methods: {
+    downFile(item) {
+      window.open(`${item.url}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ai-filelist {
+  .ai-flie__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 16px;
+    padding: 0 8px;
+    font-size: 14px;
+    color: #333;
+    background: #fff;
+    border-radius: 4px;
+    border: 1px solid #d0d4dc;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #f3f6f9;
+      border-color: transparent;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .ai-flie__item--left {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    svg {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 1;
+    }
+
+    span {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .ai-file__item--right {
+    display: flex;
+    align-items: center;
+    flex-shrink: 1;
+
+    span {
+      padding-right: 5px;
+      color: #999;
+    }
+
+    i {
+      color: #5088FF;
+    }
+  }
+}
+</style>