dvcp_v2_wxcp_app/src/components/AiTreePath.vue

<template>
  <section class="AiTreePath">
    <AiTreePath v-if="parent" v-bind="$props" :node="parent" v-on="$listeners"/>
    <b v-else v-text="`全部`" @click="$emit('click','all')"/>
    <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: {
    current: {default: null},
    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]],
    active: v => v.node?.[v.options.id] == v.current
  }
}
</script>
<style scoped lang="scss">
.AiTreePath {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 36px;
  line-height: 40px;
  font-family: PingFang-SC;

  .active {
    font-weight: bold;
    color: #26f
  }
}
</style>