slibra-module-web/src/components/Chat/ChatTree.vue

<script setup name="ChatTree">
import { ref } from 'vue';
import { NScrollbar, NTooltip } from 'naive-ui';

const porps = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})

const isOpen = ref(true);

const handleOpen = () => {
  isOpen.value = !isOpen.value;
}

const getHrefValue = (val) => {
  return val ? '#' + encodeURIComponent(String(val).trim().toLowerCase().replace(/\s+/g, '-')) : '';
}
</script>

<template>
  <div class="chat-tree-wrapper" :style="{ width: isOpen ? '200px' : '0px' }">
    <n-tooltip trigger="hover">
      <template #trigger>
        <i :class="['icon', isOpen ? '' : 'arrow-left']" @click="handleOpen">
          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M5.64645 3.14645C5.45118 3.34171 5.45118 3.65829 5.64645 3.85355L9.79289 8L5.64645 12.1464C5.45118 12.3417 5.45118 12.6583 5.64645 12.8536C5.84171 13.0488 6.15829 13.0488 6.35355 12.8536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645Z"
              fill="currentColor"></path>
          </svg>
        </i>
      </template>
      目录
    </n-tooltip>
    <NScrollbar style="height: 100%;" class="markdown-body chat-scroll">
      <ol class="chat-tree-inner" style="list-style: none;">
        <template v-for="item in data">
          <li class="">
            <NTooltip>
              <template #trigger>
                <a :href="getHrefValue(item.n)">{{ item.n }}</a>
              </template>
              {{ item.n }}
            </NTooltip>
            <ChatTree v-if="item.c.length" :data="item.c" />
          </li>
        </template>
      </ol>
    </NScrollbar>
  </div>
</template>

<style lang="scss" scoped>
.chat-tree-wrapper {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 102px;
    right: 30px;
    width: 200px;
    height: 300px;
    z-index: 100;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0px rgba(0, 0, 0, .06);
  transition: all 0.3s;

  .icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #efeff5;
    fill: currentColor;
    z-index: 10;
    background: #fff;
    cursor: pointer;
  }

  .arrow-left {
    transform: rotate(180deg);
  }

  .chat-scroll {
    border-radius: 5px;
    border: 1px solid red;
  }

  .chat-tree-inner {
    padding-top: 10px;
    list-style: none;
    font-size: 12px;
    border-radius: 5px;

    li {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
  }
}
</style>