classroom-instruments/src/views/xiaoku-ai/index.tsx

import {
  TransitionGroup,
  computed,
  defineComponent,
  onMounted,
  reactive,
  ref
} from 'vue';
import styles from './index.module.less';
import TheSearch from '@/components/TheSearch';
import { NButton, NImage, NSpace } from 'naive-ui';
import { useRouter } from 'vue-router';
import mock from './mock.json';
import { api_musicTagTree } from './api';

export default defineComponent({
  name: 'XiaokuAi',
  setup() {
    const router = useRouter();
    const data = reactive({
      tags: [] as any[],
      tagIndex: 0,
      tagActive: {} as any,
      list: mock.list
    });
    const getTags = async () => {
      const res = await api_musicTagTree();
      if (Array.isArray(res?.data)) {
        data.tags = res.data;
        const list = renderTag(res.data);
        console.log(list);
      }
    };

    // 递归渲染标签
    const renderTag = (_data: any[]): any => {
      const item = {
        columnName: _data[0].columnName,
        list: _data.map((item: any) => {
          return {
            name: item.name,
            list: Array.isArray(item.children) ? renderTag(item.children) : []
          };
        })
      };

      return item;
    };
    onMounted(() => {
      getTags();
    });
    return () => (
      <div class={styles.container}>
        <div class={styles.tools}>
          <div class={styles.tagWrap}>
            <div class={styles.tags}>
              <NSpace size={[24, 12]}>
                <NButton quaternary disabled>
                  {data.tags[0]?.columnName}
                </NButton>

                {data.tags.map((item: any, index: number) => {
                  return (
                    <>
                      <NButton round secondary type={'default'}>
                        {item.name}
                      </NButton>
                    </>
                  );
                })}
              </NSpace>
            </div>
          </div>
          <TheSearch round />
        </div>
        {/* <div class={styles.content}>
          <NSpace size={[50, 40]}>
            {data.list.map((item, index) => {
              return (
                <div
                  class={styles.item}
                  key={`item-${index}`}
                  onClick={() => router.push({ path: '/xiaoku-music' })}>
                  <div class={styles.cover}>
                    <div class={styles.itemImg}>
                      <div class={styles.itemBg}></div>
                      <NImage
                        objectFit="cover"
                        src={item.src}
                        lazy
                        previewDisabled={true}
                        onLoad={e => {
                          (e.target as any).dataset.loaded = 'true';
                        }}
                      />
                    </div>
                  </div>
                  <div class={styles.itemName}>{item.name}</div>
                </div>
              );
            })}
          </NSpace>
        </div> */}
      </div>
    );
  }
});