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

ui/packages/layout/AiTreeMenu.vue

@@ -0,0 +1,134 @@
+<template>
+  <section class="AiTreeMenu">
+    <b>{{ title }}</b>
+    <el-input v-if="!hideInput" size="small" class="searchInput" v-model="searchText" :placeholder="searchPlaceholder"
+              suffix-icon="iconfont iconSearch" @change="handleSearch()" clearable/>
+    <div class="treePanel" v-if="$slots.default">
+      <slot/>
+    </div>
+    <div class="bottomBar" v-if="$slots.bottom">
+      <slot name="bottom"/>
+    </div>
+    <div v-else class="mar-t8"/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiTreeMenu",
+  props: {
+    title: String,
+    search: String,
+    searchPlaceholder: {type: String, default: "请输入..."},
+    hideInput: Boolean
+  },
+  watch: {
+    searchText(v) {
+      this.$emit("update:search", v)
+    }
+  },
+  data() {
+    return {
+      searchText: "",
+      origin: [],
+      root: ""
+    }
+  },
+  methods: {
+    handleSearch() {
+      if (this.$slots.default) {
+        this.$emit('search', this.searchText)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiTreeMenu {
+  background: #FAFAFB;
+  border-radius: 2px 2px 0 0;
+  border: 1px solid #e5e5e5;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 264px;
+  overflow: hidden;
+  font-size: 14px;
+
+  & > b {
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    color: #222;
+    flex-shrink: 0;
+    height: 40px;
+    background: #EEEFF1;
+    border-bottom: 1px solid #E5E5E5;
+  }
+
+  ::v-deep .searchInput {
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+
+    input {
+      border-radius: 0;
+    }
+
+    .el-input__suffix {
+      transform: translateX(-12px);
+      color: #8899BB;
+    }
+  }
+
+  .treePanel {
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+    overflow: auto;
+
+    & > * {
+      margin: 0 8px;
+    }
+
+    ::v-deep.el-tree {
+      height: 100%;
+      background: #FAFAFB;
+
+      .el-tree-node__children {
+        overflow-x: auto;
+      }
+
+      .el-tree-node__label {
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+      }
+
+      .el-tree-node__expand-icon {
+        color: #8899BB;
+
+        &.is-leaf {
+          color: transparent;
+        }
+      }
+
+      .is-current > .el-tree-node__content {
+        min-width: fit-content;
+      }
+    }
+  }
+
+  .bottomBar {
+    flex-shrink: 0;
+    min-height: 0;
+    width: 100%;
+  }
+}
+</style>