根据uniapp调整工程结构

components/AiTreePath.vue

@@ -0,0 +1,59 @@
+<template>
+  <section class="AiTreePath">
+    <b v-text="`全部`" @click="$emit('click','all')"/>
+    <div flex v-for="p in parents" :key="p.id">
+      <u-icon name="arrow-right" size="32" color="#ccc"/>
+      <div class="mar-l8" v-text="p[options.label]" @click="$emit('click',p)"/>
+    </div>
+    <u-icon v-if="label" name="arrow-right" size="32" color="#ccc"/>
+    <div class="active" v-text="label" @click="$emit('click',node)"/>
+  </section>
+</template>
+<script>
+export default {
+  name: "AiTreePath",
+  props: {
+    prop: {default: () => ({})},
+    paths: {default: () => ({})},
+    node: {default: null}
+  },
+  computed: {
+    options: v => ({
+      id: 'id',
+      label: 'name',
+      parent: 'parentId',
+      ...v.prop
+    }),
+    label: v => v.node?.[v.options.label] || "",
+    parent: v => v.paths?.[v.node?.[v.options.parent]],
+    parents() {
+      const arr = []
+      const {id: KEY, parent: PARENT} = this.options
+      const find = n => {
+        if (!!n?.[KEY]) {
+          arr.unshift(n)
+          find(this.paths[n?.[PARENT]])
+        }
+      }
+      find(this.parent)
+      return arr
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.AiTreePath {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 36px;
+  line-height: 40px;
+  font-family: PingFang-SC;
+  flex-wrap: wrap;
+
+  .active {
+    font-weight: bold;
+    color: #26f
+  }
+}
+</style>