更新

src/components/musicLIstItem/index.module.less

@@ -106,7 +106,7 @@
         line-height: 22px;
         font-size: 16px;
         margin-left: 12px;
-        max-width: 120px;
+        max-width: 150px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;

src/views/albumDetail/index.module.less

@@ -60,6 +60,7 @@
           width: 190px;
           height: 190px;
           margin-right: 22px;
+          flex-shrink: 0;
 
           .albumCover {
             width: 190px;
@@ -93,21 +94,26 @@
             font-weight: 400;
             color: #656565;
             line-height: 28px;
-            // width: 504px;
-            overflow: hidden;
             text-overflow: ellipsis;
             word-wrap: break-word;
             white-space: normal !important;
+            min-height: 95px;
+            max-height: 112px;
+
+            display: -webkit-box;
+            overflow: hidden;
+            text-overflow: ellipsis;
             -webkit-line-clamp: 4;
             -webkit-box-orient: vertical;
-            min-height: 95px;
           }
           .tagWrap {
             display: flex;
             flex-direction: row;
-            margin-top: 26px;
+            margin-top: 16px;
             align-items: center;
+            flex-wrap: wrap;
             .tag {
+              margin-top: 10px;
               background-color: rgba(188, 253, 241, 0.46);
               color: #00886d;
               // padding: 0px 4px;

src/views/albumDetail/index.tsx

@@ -13,7 +13,8 @@ import tagItem from '@/components/tagItem'
 import pagination from '@/components/pagination'
 import albumItem from './modals/albumItem'
 import request from '@/helpers/request'
-import musicLIstItem from './modals/musicLIstItem'
+// import musicLIstItem from './modals/musicLIstItem'
+import musicLIstItem from '@/components/musicLIstItem'
 import ColEmpty from '@/components/col-empty'
 import { useRoute, useRouter } from 'vue-router'
 import oStart from '@/common/images/oStart.png'
@@ -211,7 +212,7 @@ export default defineComponent({
                     <img src={titleDot} alt="" />
                   </div>
                 </div>
-                <div class={classes.musicList}>
+                <div class={classes.musicList} style="padding: 0 20px">
                   {state.musicList.map(item => {
                     return <musicLIstItem item={item}></musicLIstItem>
                   })}

src/views/albumLibrary/index.tsx

@@ -32,6 +32,7 @@ export default defineComponent({
     ColEmpty
   },
   setup() {
+    const route = useRoute()
     let subjectId = 0
     const subjectIds = baseState.user.data?.subjectId || ''
     if (subjectIds) {
@@ -48,14 +49,14 @@ export default defineComponent({
       isshowData: false,
       pageInfo: {
         // 分页规则
-        limit: 40, // 限制显示条数
+        limit: 20, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
         page_size: [5, 10, 20, 40, 50] // 选择限制显示条数
       },
       searchs: {
         albumStatus: 1,
-        albumTagIds: '',
+        albumTagIds: route.query.albumTagIds || '',
         search: '',
         subject: subjectId || '',
         page: 1,
@@ -63,12 +64,14 @@ export default defineComponent({
       }
     })
 
-    const router = useRouter()
     const getAlbumList = async () => {
       try {
+        const { search, subject, ...more } = state.searchs
         const res = await request.post('/api-website/open/music/album/list', {
           data: {
-            ...state.searchs,
+            ...more,
+            idAndName: search,
+            subjectIds: subject,
             page: state.pageInfo.page,
             rows: state.pageInfo.limit
           },
@@ -105,6 +108,15 @@ export default defineComponent({
           },
           ...tree
         ] as any
+
+        if (state.searchs.albumTagIds) {
+          state.tagTree.forEach((tag: any) => {
+            tag.isCheck = false
+            if (tag.id == state.searchs.albumTagIds) {
+              tag.isCheck = true
+            }
+          })
+        }
       } catch (e) {
         console.log(e)
       }
@@ -155,7 +167,6 @@ export default defineComponent({
                 <div
                   class={styles.wrapRight}
                   onClick={() => {
-                    console.log(111)
                     state.hideSearch = !state.hideSearch
                   }}
                 >

src/views/albumLibrary/modals/searchAlbum.tsx

@@ -1,115 +0,0 @@
-// import { PaperClipIcon } from '@heroicons/vue/solid'
-import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
-import arrow from '@/components/musicLIstItem/images/arrow.png'
-import styles from '../index.module.less'
-import albumItem from './albumItem'
-import videoDetailItem from '@/components/videoDetailItem'
-import musicLIstItem from '@/components/musicLIstItem'
-import hotSearch from '@/components/hotSearch'
-import request from '@/helpers/request'
-import silder from '@/components/silder'
-import searchInput from '@/components/searchInput'
-import 'swiper/css'
-import 'swiper/css/navigation'
-import 'swiper/css/pagination'
-import 'swiper/css/scrollbar'
-import { ElTabPane, ElTabs } from 'element-plus'
-import pagination from '@/components/pagination'
-import ColEmpty from '@/components/col-empty'
-import { getUserType } from '@/helpers/utils'
-export default defineComponent({
-  name: 'searchdetail',
-  components: {
-    hotSearch,
-    silder,
-    searchInput,
-    albumItem,
-    pagination,
-    ColEmpty
-  },
-  setup() {
-    const state = reactive({
-      albumList: [],
-      musicList: [],
-      search: {},
-      isshowData: false,
-      pageInfo: {
-        // 分页规则
-        limit: 40, // 限制显示条数
-        page: 1, // 当前页
-        total: 0, // 总条数
-        page_size: [5, 10, 20, 40, 50] // 选择限制显示条数
-      }
-    })
-
-    const getAlbumList = async () => {
-      try {
-        const res = await request.post('/api-website/open/music/album/list', {
-          data: {
-            albumStatus: 1,
-            ...state.search,
-            page: state.pageInfo.page,
-            rows: state.pageInfo.limit,
-          },
-          params:{
-            clientType: getUserType()
-          }
-        })
-
-        state.albumList = res.data.rows
-        state.pageInfo.total = res.data.total
-        if (state.pageInfo.total == 0) {
-          state.isshowData = true
-        } else {
-          state.isshowData = false
-        }
-      } catch (e) {
-        console.log(e)
-      }
-    }
-    const getList = (val: any) => {
-      state.search = {
-        ...val,
-        idAndName: val.search,
-        subjectIds: val.subject,
-        exquisiteFlag: val.exquisiteFlag
-      }
-      state.pageInfo.page = 1
-      getAlbumList()
-    }
-    onMounted(() => {
-      // getAlbumList()
-      // getMusicList()
-    })
-    return {
-      ...toRefs(state),
-      getList,
-      getAlbumList
-    }
-  },
-  render() {
-    return (
-      <div>
-        <div>
-          <div class={styles.w1200}>
-            <div class={styles.section}>
-              <div class={styles.albumList}>
-                {this.albumList.map(item => {
-                  return <albumItem detail={item}></albumItem>
-                })}
-              </div>
-              {this.isshowData && <ColEmpty></ColEmpty>}
-            </div>
-          </div>
-        </div>
-        <pagination
-          total={this.pageInfo.total}
-          v-model:page={this.pageInfo.page}
-          v-model:limit={this.pageInfo.limit}
-          pageSizes={this.pageInfo.page_size}
-          pagination={this.getAlbumList}
-        />
-      </div>
-    )
-  }
-})

src/views/albumLibrary/modals/searchMusic.tsx

@@ -1,134 +0,0 @@
-// import { PaperClipIcon } from '@heroicons/vue/solid'
-import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
-import arrow from '@/components/musicLIstItem/images/arrow.png'
-import styles from '../index.module.less'
-import albumItem from '@/components/albumItem'
-import videoDetailItem from '@/components/videoDetailItem'
-import musicListItem from '@/components/musicLIstItem'
-import hotSearch from '@/components/hotSearch'
-import request from '@/helpers/request'
-import silder from '@/components/silder'
-import searchInput from '@/components/searchInput'
-import pagination from '@/components/pagination'
-import 'swiper/css'
-import 'swiper/css/navigation'
-import 'swiper/css/pagination'
-import 'swiper/css/scrollbar'
-import ColEmpty from '@/components/col-empty'
-import { ElTabPane, ElTabs } from 'element-plus'
-import { getUserType } from '@/helpers/utils'
-export default defineComponent({
-  name: 'searchMusic',
-  components: {
-    hotSearch,
-    silder,
-    searchInput,
-    albumItem,
-    musicListItem,
-    pagination,
-    ColEmpty
-  },
-  setup() {
-    const state = reactive({
-      musicList: [],
-      search: {},
-      isshowData: false,
-      pageInfo: {
-        // 分页规则
-        limit: 10, // 限制显示条数
-        page: 1, // 当前页
-        total: 0, // 总条数
-        page_size: [5, 10, 20, 40, 50] // 选择限制显示条数
-      }
-    })
-
-    // const getAlbumList = async () => {
-    //   try {
-    //     const res = await request.post('/api-website/open/music/album/list', {
-    //       data: {
-    //         albumStatus: 1,
-    //         page: 1,
-    //         rows: 10
-    //       }
-    //     })
-
-    //     state.albumList = res.data.rows
-    //   } catch (e) {
-    //     console.log(e)
-    //   }
-    // }
-    const getMusicList = async () => {
-      try {
-        const res = await request.post('/api-website/open/music/sheet/list', {
-          data: {
-            albumStatus: 'PASS',
-            ...state.search,
-            page: state.pageInfo.page,
-            rows: state.pageInfo.limit,
-            state: 1,
-          },
-          params:{
-            clientType: getUserType()
-          }
-        })
-
-        state.musicList = res.data.rows.map(n => {
-          if (typeof n.paymentType === "string") n.paymentType = n.paymentType.split(',')
-          return n
-        })
-        state.pageInfo.total = res.data.total
-        if (state.pageInfo.total == 0) {
-          state.isshowData = true
-        } else {
-          state.isshowData = false
-        }
-      } catch (e) {
-        console.log(e)
-      }
-    }
-    const getList = (val: any) => {
-      state.search = {
-        subjectIds: val.subject,
-        musicTagIds: val.albumTagIds,
-        exquisiteFlag: val.exquisiteFlag,
-        idAndName: val.search
-      }
-      state.pageInfo.page = 1
-      getMusicList()
-    }
-    onMounted(() => {
-      // getAlbumList()
-      // getList(state.search)
-    })
-    return {
-      ...toRefs(state),
-      getList,
-      getMusicList
-    }
-  },
-  render() {
-    return (
-      <div>
-        <div>
-          <div class={styles.w1200}>
-            <div class={styles.section}>
-              <div class={styles.musicList}>
-                {this.musicList.map(item => {
-                  return <musicListItem item={item}></musicListItem>
-                })}
-              </div>
-            </div>
-          </div>
-          {this.isshowData && <ColEmpty></ColEmpty>}
-        </div>
-        <pagination
-          total={this.pageInfo.total}
-          v-model:page={this.pageInfo.page}
-          v-model:limit={this.pageInfo.limit}
-          pageSizes={this.pageInfo.page_size}
-          pagination={this.getMusicList}
-        />
-      </div>
-    )
-  }
-})

src/views/albumLibrary/searchdetail.tsx

@@ -1,192 +0,0 @@
-// import { PaperClipIcon } from '@heroicons/vue/solid'
-import {
-  defineComponent,
-  toRefs,
-  reactive,
-  onMounted,
-  ref,
-  nextTick,
-  watch
-} from 'vue'
-import arrow from '@/components/musicLIstItem/images/arrow.png'
-import styles from './index.module.less'
-import hotSearch from '@/components/hotSearch'
-import request from '@/helpers/request'
-import silder from '@/components/silder'
-import searchInput from '@/components/searchInput'
-import searchAlbum from './modals/searchAlbum'
-import searchMusic from './modals/searchMusic'
-import 'swiper/css'
-import 'swiper/css/navigation'
-import 'swiper/css/pagination'
-import 'swiper/css/scrollbar'
-import { ElTabPane, ElTabs } from 'element-plus'
-import { useRoute } from 'vue-router'
-import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
-import { useAsyncState, useLocalStorage } from '@vueuse/core'
-export default defineComponent({
-  name: 'searchdetail',
-  components: {
-    hotSearch,
-    silder,
-    searchInput,
-    searchAlbum,
-    searchMusic
-  },
-  setup() {
-    const subjects: any = useSubjectId(SubjectEnum.SEARCH)
-    const state = reactive({
-      albumList: [],
-      musicList: [],
-      chiose: 'album',
-      searchs: {
-        albumTagIds: '',
-        search: '',
-        exquisiteFlag: null as any,
-        subject: subjects.id || ''
-      }
-    })
-    const route = useRoute()
-    const searchAlbumRef = ref()
-    const searchMusicRef = ref()
-    // const getAlbumList = async () => {
-    //   try {
-    //     const res = await request.post('/api-website/open/music/album/list', {
-    //       data: {
-    //         albumStatus: 1,
-    //         page: 1,
-    //         rows: 10
-    //       }
-    //     })
-
-    //     state.albumList = res.data.rows
-    //   } catch (e) {
-    //     console.log(e)
-    //   }
-    // }
-    // const getMusicList = async () => {
-    //   try {
-    //     const res = await request.post('/api-website/open/music/sheet/list', {
-    //       data: {
-    //         albumStatus: 'PASS',
-    //         page: 1,
-    //         rows: 5,
-    //         state: 1
-    //       }
-    //     })
-
-    //     state.musicList = res.data.rows
-    //   } catch (e) {
-    //     console.log(e)
-    //   }
-    // }
-    const searchRust = (val: any) => {
-      console.log(val, 'search')
-      const smallTag = (val || ([] as any)).filter(tag => tag < 0)
-      const maxTag = (val || ([] as any)).filter(tag => tag > 0)
-      state.searchs.albumTagIds = maxTag.join(',') as string
-      state.searchs.exquisiteFlag = null
-      if (smallTag[0] == -2) {
-        state.searchs.exquisiteFlag = 1
-      }
-      startSearch(state.searchs)
-    }
-    const startSearch = (val: any) => {
-      state.searchs = { ...state.searchs, ...val }
-      search()
-    }
-
-    const search = () => {
-      console.log(state.searchs, '1212')
-      if (state.chiose == 'album') {
-        searchAlbumRef.value.getList(state.searchs)
-      }
-      if (state.chiose == 'music') {
-        searchMusicRef.value.getList(state.searchs)
-      }
-    }
-
-    watch(
-      () => state.chiose,
-      chiose => {
-        nextTick(() => {
-          search()
-        })
-      }
-    )
-    onMounted(() => {
-      if (route.params.search) {
-        state.searchs.search = route.params.search as string
-      }
-      if (route.params.subject) {
-        state.searchs.subject = route.params.subject as string
-      }
-      if (route.params.type) {
-        state.chiose = route.params.type as string
-      }
-      nextTick(() => {
-        search()
-      })
-
-      // getAlbumList()
-      // getMusicList()
-    })
-    return {
-      ...toRefs(state),
-      startSearch,
-      searchRust,
-      searchAlbumRef,
-      searchMusicRef,
-      search
-    }
-  },
-  render() {
-    return (
-      <div>
-        <div class="">
-          <div class="wall" style={{ height: '60px' }}></div>
-          <div class={styles.w1200}>
-            <div class={styles.section}>
-              <searchInput
-                isWhile={true}
-                searchVal={{ ...this.searchs }}
-                onUpdate:searchVal={(val: any) => {
-                  console.log(val, '1212')
-                }}
-                type="search"
-                onStartSearch={(val: any) => {
-                  this.startSearch(val)
-                }}
-              ></searchInput>
-              <div class={styles.hotSearch}>
-                <hotSearch
-                  type={'search'}
-                  onSearchRust={(val: any) => this.searchRust(val)}
-                  onHotTag={(val: string) => {
-                    this.searchs.search = val
-                    this.search()
-                  }}
-                  isChiose={true}
-                ></hotSearch>
-              </div>
-              <div class={styles.myTabWrap}>
-                <ElTabs class={styles.myTab} v-model={this.chiose}>
-                  <ElTabPane label="专辑" name="album">
-                    {this.chiose == 'album' ? (
-                      <searchAlbum ref="searchAlbumRef" />
-                    ) : null}
-                  </ElTabPane>
-                  <ElTabPane label="乐谱" name="music">
-                    {this.chiose == 'music' ? (
-                      <searchMusic ref="searchMusicRef" />
-                    ) : null}
-                  </ElTabPane>
-                </ElTabs>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-})

src/views/home/index.tsx

@@ -98,8 +98,8 @@ export default defineComponent({
         console.log(e)
       }
     }
-    const gotoSearch = (val: string, type: any) => {
-      router.push({ name: 'searchdetail', params: { search: val, type } })
+    const gotoSearch = (val: string, type = 'music') => {
+      router.push({ name: 'musicLibrary', query: { search: val } })
     }
     const getTagTree = async (type = 'MUSIC') => {
       try {
@@ -127,15 +127,28 @@ export default defineComponent({
       router.push({ path: '/videoDetailList' })
     }
 
-    const gotoSearchTag = (tag: any) => {
-      router.push({
-        name: 'searchdetail',
-        params: {
-          search: state.search,
-          tag: tag.id,
-          parentTagId: tag.parentTagId
+    const gotoSearchTag = (tag: any, type: string) => {
+      if (type === 'album') {
+        router.push({
+          name: 'albumibrary',
+          query: {
+            albumTagIds: tag.id
+          }
+        })
+      } else if (type === 'music' || type === 'musicHot') {
+        const params = {} as any
+        if (type === 'music') {
+          params.musicTagIds = tag.id
+        } else {
+          params.search = tag.key
         }
-      })
+        router.push({
+          name: 'musicLibrary',
+          query: {
+            ...params
+          }
+        })
+      }
     }
     //
     onMounted(() => {
@@ -183,7 +196,7 @@ export default defineComponent({
                     <img
                       src={searchIcon}
                       class={styles.searchIcon}
-                      onClick={() => gotoSearch(state.search, 'music')}
+                      onClick={() => gotoSearch(state.search)}
                       alt=""
                     />
                     <ElInput
@@ -201,7 +214,7 @@ export default defineComponent({
                               class={styles.tags}
                               title={tag.name}
                               onSearchTag={() => {
-                                gotoSearchTag(tag)
+                                gotoSearchTag(tag, 'album')
                               }}
                             >
                               {/* {} */}
@@ -230,7 +243,7 @@ export default defineComponent({
                         </div>
                         <div
                           class={[styles.titleWrapMore]}
-                          onClick={() => gotoSearch('', 'album')}
+                          onClick={() => gotoSearch('')}
                         >
                           <span>更多</span>
                           <img src={moreArrow} alt="" />
@@ -256,7 +269,7 @@ export default defineComponent({
                                   class={styles.tags}
                                   title={tag.name}
                                   onSearchTag={() => {
-                                    gotoSearchTag(tag)
+                                    gotoSearchTag(tag, 'music')
                                   }}
                                 >
                                   {/* {} */}
@@ -274,7 +287,7 @@ export default defineComponent({
                                   class={styles.tags}
                                   title={tag.key}
                                   onSearchTag={() => {
-                                    gotoSearchTag(tag)
+                                    gotoSearchTag(tag, 'musicHot')
                                   }}
                                 >
                                   {/* {} */}

src/views/musicLibrary/index.module.less

@@ -78,7 +78,7 @@
     .dotImg {
       width: 30px;
       height: 20px;
-      margin-left:6px;
+      margin-left: 6px;
       position: relative;
       top: 2px;
     }
@@ -118,7 +118,6 @@
       font-weight: 600;
       color: #333;
       line-height: 30px;
-
     }
     .wrapRight {
       display: flex;
@@ -144,3 +143,75 @@
 .pb40 {
   padding-bottom: 40px;
 }
+
+.tagList {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-bottom: 20px;
+
+  .tagContainer {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    &.hide {
+      height: 33px;
+      overflow: hidden;
+    }
+
+    .tagItem {
+      // padding-right: 60px;
+      position: relative;
+      margin-left: 4px;
+      margin-right: 46px;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      font-size: 20px;
+      color: #999999;
+
+      &:hover,
+      &.active {
+        position: relative;
+        z-index: 1;
+        cursor: pointer;
+        color: #000;
+        font-weight: bold;
+        &:after {
+          position: absolute;
+          bottom: 2px;
+          left: -4px;
+          content: ' ';
+          height: 10px;
+          width: calc(100% + 8px);
+          background: rgba(45, 199, 170, 0.5);
+          border-radius: 5px;
+          z-index: -1;
+        }
+      }
+    }
+  }
+
+  .wrapRight {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    cursor: pointer;
+    font-size: 16px;
+    padding-top: 10px;
+    align-items: center;
+    span {
+      color: #666;
+    }
+    .arrow {
+      transform: rotate(90deg);
+      width: 16px;
+      height: 16px;
+      margin-left: 8px;
+
+      &.active {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}

src/views/musicLibrary/index.tsx

@@ -17,10 +17,12 @@ import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
 import 'swiper/css/scrollbar'
+import pagination from '@/components/pagination'
 import { useRoute, useRouter } from 'vue-router'
 import { state as baseState } from '@/state'
 import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
 import { getUserType } from '@/helpers/utils'
+import ColEmpty from '@/components/col-empty'
 export default defineComponent({
   name: 'musicLibrary',
   components: {
@@ -30,9 +32,12 @@ export default defineComponent({
     hotSearch,
     silder,
     searchInput,
+    pagination,
+    ColEmpty,
     banner
   },
   setup() {
+    const route = useRoute()
     let subjectId = 0
     const subjectIds = baseState.user.data?.subjectId || ''
     if (subjectIds) {
@@ -43,36 +48,35 @@ export default defineComponent({
     subjectId = subjects.id || subjectId
     const state = reactive({
       albumList: [],
-      musicList: []
+      musicList: [],
+      tagTree: [],
+      hideSearch: true,
+      isshowData: false,
+      pageInfo: {
+        // 分页规则
+        limit: 20, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [5, 10, 20, 40, 50] // 选择限制显示条数
+      },
+      searchs: {
+        musicTagIds: route.query.musicTagIds || '',
+        search: route.query.search || '',
+        subject: subjectId || ''
+      }
     })
-    const router = useRouter()
-    const getAlbumList = async () => {
-      try {
-        const res = await request.post('/api-website/open/music/album/list', {
-          data: {
-            albumStatus: 1,
-            page: 1,
-            subjectIds: subjectId ? subjectId : null,
-            rows: 10
-          },
-          params: {
-            clientType: getUserType()
-          }
-        })
 
-        state.albumList = res.data.rows
-      } catch (e) {
-        console.log(e)
-      }
-    }
     const getMusicList = async () => {
       try {
+        const { search, subject, ...more } = state.searchs
         const res = await request.post('/api-website/open/music/sheet/list', {
           data: {
-            albumStatus: 'PASS',
-            subjectIds: subjectId ? subjectId : null,
-            page: 1,
-            rows: 5,
+            auditStatus: 'PASS',
+            ...more,
+            idAndName: search,
+            subjectIds: subject,
+            page: state.pageInfo.page,
+            rows: state.pageInfo.limit,
             state: 1
           }
         })
@@ -83,25 +87,60 @@ export default defineComponent({
             n.paymentType = n.paymentType.split(',')
           return n
         })
+
+        state.pageInfo.total = res.data.total
+        if (state.pageInfo.total == 0) {
+          state.isshowData = true
+        } else {
+          state.isshowData = false
+        }
       } catch (e) {
         console.log(e)
       }
     }
-    const gotoSearch = (val: string | object) => {
-      if (typeof val == 'string') {
-        router.push({ name: 'searchdetail', params: { search: val } })
-      } else {
-        router.push({ name: 'searchdetail', params: { ...val } })
+    const getTagTree = async () => {
+      try {
+        const res = await request.get('/api-website/open/MusicTag/tree', {
+          params: {
+            type: 'MUSIC'
+          }
+        })
+        const tree = res.data || []
+        state.tagTree = [
+          {
+            name: '全部',
+            id: '',
+            isCheck: true
+          },
+          ...tree
+        ] as any
+
+        if (state.searchs.musicTagIds) {
+          state.tagTree.forEach((tag: any) => {
+            tag.isCheck = false
+            if (tag.id == state.searchs.musicTagIds) {
+              tag.isCheck = true
+            }
+          })
+        }
+      } catch (e) {
+        console.log(e)
       }
     }
-    const gotoMusic = () => {
-      router.push({ name: 'searchdetail', params: { type: 'music' } })
+
+    const searchRust = (val: any) => {
+      // const smallTag = (val || ([] as any)).filter(tag => tag < 0)
+      const maxTag = (val || ([] as any)).filter(tag => tag > 0)
+      state.searchs.musicTagIds = maxTag.join(',') as string
+      startSearch(state.searchs)
     }
-    const gotoAlbum = () => {
-      router.push({ name: 'searchdetail', params: { type: '' } })
+
+    const startSearch = (val: any) => {
+      state.searchs = { ...state.searchs, ...val }
+      getMusicList()
     }
     onMounted(() => {
-      getAlbumList()
+      getTagTree()
       getMusicList()
     })
     return () => (
@@ -109,79 +148,89 @@ export default defineComponent({
         <banner></banner>
         <div class="bg-white">
           <div class={styles.w1200}>
-            <div class={styles.section}>
-              {/* <div class={styles.titleWrap}>
-                <img src={titleDot} class={styles.dotImg} alt="" />
-                <h4>热门专辑</h4>
-                <img src={titleDot} class={styles.dotImg} alt="" />
-              </div> */}
+            <div class={styles.section} style="padding-bottom: 0;">
+              <div class={styles.tagList}>
+                <div
+                  class={[styles.tagContainer, state.hideSearch && styles.hide]}
+                >
+                  {state.tagTree.map((tag: any) => (
+                    <span
+                      class={[styles.tagItem, tag.isCheck && styles.active]}
+                      onClick={() => {
+                        state.tagTree.forEach((item: any) => {
+                          item.isCheck = false
+                        })
+                        tag.isCheck = true
+
+                        startSearch({ musicTagIds: tag.id })
+                      }}
+                    >
+                      {tag.name}
+                    </span>
+                  ))}
+                </div>
+                <div
+                  class={styles.wrapRight}
+                  onClick={() => {
+                    state.hideSearch = !state.hideSearch
+                  }}
+                >
+                  <span>{state.hideSearch ? '更多' : '收起'}</span>
+                  <img
+                    class={[styles.arrow, !state.hideSearch && styles.active]}
+                    src={arrow}
+                    alt=""
+                  />
+                </div>
+              </div>
 
               <searchInput
                 isWhile={false}
                 type="search"
-                onStartSearch={(val: any) => gotoSearch(val)}
+                showSearch
+                placeholder="搜索你想练习的专辑"
+                searchVal={{ ...state.searchs }}
+                onStartSearch={(val: any) => {
+                  state.pageInfo.page = 1
+                  startSearch(val)
+                }}
               ></searchInput>
               <div class={styles.hotSearch}>
                 <hotSearch
+                  onSearchRust={(val: any) => searchRust(val)}
                   onHotTag={(val: string) => {
-                    gotoSearch(val)
+                    state.searchs.search = val
+                    getMusicList()
                   }}
                   type={''}
+                  isChiose={true}
                 ></hotSearch>
               </div>
 
-              {state.albumList && state.albumList.length > 0 && (
+              {state.musicList && state.musicList.length > 0 && (
                 <>
-                  <div class={[styles.videoNav, styles.mt25]}>
-                    <div class={styles.titleWrap}>
-                      <h5 class={styles.hotAlbum}>热门专辑</h5>
-                      <img src={titleDot} class={styles.dotImg} alt="" />
-                    </div>
-
-                    <div class={styles.wrapRight} onClick={() => gotoAlbum()}>
-                      <span>更多</span>
-                      <img class={styles.arrow} src={arrow} alt="" />
+                  <div
+                    class={[styles.section, styles.pb40]}
+                    style="padding-top: 0"
+                  >
+                    <div class={styles.musicList}>
+                      {state.musicList.map(item => {
+                        return <musicLIstItem item={item}></musicLIstItem>
+                      })}
                     </div>
                   </div>
-
-                  <div class={styles.albumList}>
-                    {state.albumList.map(item => {
-                      return <albumItem detail={item}></albumItem>
-                    })}
-                  </div>
                 </>
               )}
-            </div>
-          </div>
-        </div>
-        <div>
-          <div class={styles.w1200}>
-            {state.musicList && state.musicList.length > 0 && (
-              <>
-                <div
-                  class={[styles.section, styles.pb40]}
-                  style="padding-top: 0"
-                >
-                  <div class={styles.videoNav}>
-                    <div class={styles.titleWrap}>
-                      <h5>热门乐谱</h5>
-                      <img src={titleDot} class={styles.dotImg} alt="" />
-                    </div>
-                    <div class={styles.wrapRight} onClick={() => gotoMusic()}>
-                      <span>更多</span>
-                      <img class={styles.arrow} src={arrow} alt="" />
-                    </div>
-                  </div>
-                  <div class={styles.musicList}>
-                    {state.musicList.map(item => {
-                      return <musicLIstItem item={item}></musicLIstItem>
-                    })}
-                  </div>
-                </div>
-              </>
-            )}
+              {state.isshowData && <ColEmpty></ColEmpty>}
 
-            {/* <musicLIstItem></musicLIstItem> */}
+              <pagination
+                total={state.pageInfo.total}
+                v-model:page={state.pageInfo.page}
+                v-model:limit={state.pageInfo.limit}
+                pageSizes={state.pageInfo.page_size}
+                pagination={getMusicList}
+              />
+            </div>
           </div>
         </div>
         <silder></silder>

src/views/user-info/music-operation/index.tsx

@@ -515,34 +515,26 @@ export default defineComponent({
             prop="tags"
             rules={[{ required: true, message: '请选择曲目标签' }]}
           >
-            <div class="w-full relative">
-              <div
+            {/* <div class="w-full relative"> */}
+            {/* <div
                 class=" w-full block h-[42px] absolute top-0 left-0 z-10"
                 onClick={() => {
                   console.log(111)
                   this.tagStatus = true
                 }}
-              ></div>
-              <ElSelect
-                multiple
-                v-model={this.form.tags}
-                placeholder="请选择曲目标签"
-                class="w-full"
-              >
-                {this.tagList.map((group: any) => (
-                  <ElOptionGroup key={group.id} label={group.name}>
-                    {group.children &&
-                      group.children.map((item: any) => (
-                        <ElOption
-                          key={item.id}
-                          value={item.id}
-                          label={item.name}
-                        />
-                      ))}
-                  </ElOptionGroup>
-                ))}
-              </ElSelect>
-            </div>
+              ></div> */}
+            <ElSelect
+              multiple
+              v-model={this.form.tags}
+              placeholder="请选择曲目标签"
+              multipleLimit={3}
+              class="w-full"
+            >
+              {this.tagList.map((item: any) => (
+                <ElOption key={item.id} value={item.id} label={item.name} />
+              ))}
+            </ElSelect>
+            {/* </div> */}
           </ElFormItem>
           {/* <ElFormItem
             label="支持简谱"
@@ -672,7 +664,7 @@ export default defineComponent({
           </ElButton>
         </div>
 
-        <ElDialog
+        {/* <ElDialog
           modelValue={this.tagStatus}
           onUpdate:modelValue={val => (this.tagStatus = val)}
           width="35%"
@@ -717,7 +709,7 @@ export default defineComponent({
               确认
             </ElButton>
           </div>
-        </ElDialog>
+        </ElDialog> */}
       </div>
     )
   }

src/views/user-info/my-fans/index.tsx

@@ -110,7 +110,7 @@ export default defineComponent({
                       />
                     </div>
 
-                    <p class="text-base text-[#333] font-semibold leading-tight pb-5 pt-2 text-center">
+                    <p class="text-base text-[#333] font-semibold leading-tight pb-5 pt-2 text-center max-w-[120px] whitespace-nowrap overflow-hidden text-ellipsis">
                       {item.userName}
                     </p>
                     <p class="h-6">