添加搜索功能

src/router/routes-tenant.ts

@@ -215,6 +215,14 @@ export default [
             meta: {
               title: '乐谱库'
             }
+          },
+          {
+            path: '/music-songbook/result',
+            name: 'musicSongresult',
+            component: () => import('@/tenant/music/search/search-result'),
+            meta: {
+              title: '搜索结果'
+            }
           }
         ]
       },

src/tenant/music/album/index.tsx

@@ -26,9 +26,19 @@ export default defineComponent({
     defauleParams: {
       type: Object,
       default: () => ({})
+    },
+    showLight: {
+      type: Boolean,
+      default: false
+    },
+    /** 需要高亮的文案 */
+    lightText: {
+      type: String,
+      default: ''
     }
   },
-  setup({ hideSearch, defauleParams }, { expose }) {
+  setup({ hideSearch, defauleParams, showLight, lightText }, { expose }) {
+    const lightTextC = ref(lightText)
     const { isLoading, state } = useAsyncState(
       request(baseState.platformApi + '/MusicTag/tree', {
         params: {
@@ -105,6 +115,7 @@ export default defineComponent({
     const onSearch = (value: string) => {
       params.page = 1
       params.search = value
+      lightTextC.value = value
       data.value = null
       FetchList()
     }
@@ -319,6 +330,8 @@ export default defineComponent({
             {data.value && data.value.rows.length ? (
               <div class={styles.musicGrid}>
                 <MusicGrid
+                  showLight={showLight}
+                  lightText={lightTextC.value}
                   list={data.value.rows}
                   onGoto={(n: any) => {
                     router.push({

src/tenant/music/component/music-grid/index.tsx

@@ -10,6 +10,15 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    showLight: {
+      type: Boolean,
+      default: false
+    },
+    /** 需要高亮的文案 */
+    lightText: {
+      type: String,
+      default: ''
+    },
     list: {
       type: Array as any,
       default: () => []
@@ -20,30 +29,42 @@ export default defineComponent({
     return () => (
       <div class={styles.theMusicGrid}>
         <Grid border={false} columnNum={3}>
-          {props.list.map((n: any) => (
-            <GridItem>
-              <div class={styles.item} onClick={() => emit('goto', n)}>
-                <div class={styles.imgWrap}>
-                  {n.paymentType === 'CHARGE' && !props.isHiddenTag && (
-                    <span class={styles.albumType}>付费</span>
-                  )}
-                  <Image
-                    class={styles.image}
-                    width="100%"
-                    height="100%"
-                    fit="cover"
-                    src={n.albumCoverUrl}
-                  />
-                  <div class={styles.model}>
-                    <Icon name={IconXin} />
-                    <span class={styles.num}>{n.albumFavoriteCount}人</span>
+          {props.list.map((n: any) => {
+            let name = ''
+            console.log(props.lightText, 'props.lightText')
+            if (props.lightText) {
+              name = n.albumName.replace(
+                props.lightText,
+                `<span style="color: #FE2451">${props.lightText}</span>`
+              )
+            } else {
+              name = n.albumName
+            }
+            return (
+              <GridItem>
+                <div class={styles.item} onClick={() => emit('goto', n)}>
+                  <div class={styles.imgWrap}>
+                    {n.paymentType === 'CHARGE' && !props.isHiddenTag && (
+                      <span class={styles.albumType}>付费</span>
+                    )}
+                    <Image
+                      class={styles.image}
+                      width="100%"
+                      height="100%"
+                      fit="cover"
+                      src={n.albumCoverUrl}
+                    />
+                    <div class={styles.model}>
+                      <Icon name={IconXin} />
+                      <span class={styles.num}>{n.albumFavoriteCount}人</span>
+                    </div>
                   </div>
+                  <div class={styles.title} v-html={name}></div>
+                  {/* <div class={styles.des}>共{n.musicSheetCount}首</div> */}
                 </div>
-                <div class={styles.title}>{n.albumName}</div>
-                {/* <div class={styles.des}>共{n.musicSheetCount}首</div> */}
-              </div>
-            </GridItem>
-          ))}
+              </GridItem>
+            )
+          })}
         </Grid>
       </div>
     )

src/tenant/music/component/song/index.tsx

@@ -85,9 +85,8 @@ export default defineComponent({
                 <div class={styles.top}>
                   <span
                     class={[styles.title, props.musicNameClass, 'van-ellipsis']}
-                  >
-                    {n.musicSheetName}
-                  </span>
+                    v-html={n.musicSheetName}
+                  ></span>
                   <span
                     class={[styles.singer, props.authorClass, 'van-ellipsis']}
                   >

src/tenant/music/list/index.tsx

@@ -20,6 +20,7 @@ import iconSearch from './icons/icon_search.png'
 import iconFree from './icons/icon-free.png'
 import { browser } from '@/helpers/utils'
 import TheSticky from '@/components/the-sticky'
+import { tmpdir } from 'os'
 
 const noop = () => {
   //
@@ -47,12 +48,30 @@ export default defineComponent({
     myself: {
       type: Boolean,
       default: false
+    },
+    showLight: {
+      type: Boolean,
+      default: false
+    },
+    /** 需要高亮的文案 */
+    lightText: {
+      type: String,
+      default: ''
     }
   },
   setup(
-    { hideSearch, defauleParams, onItemClick, teacherId, myself },
+    {
+      hideSearch,
+      defauleParams,
+      onItemClick,
+      teacherId,
+      myself,
+      showLight,
+      lightText
+    },
     { expose }
   ) {
+    const lightTextC = ref(lightText)
     const { isLoading, state } = useAsyncState(
       request(baseState.platformApi + '/MusicTag/tree', {
         params: {
@@ -142,6 +161,7 @@ export default defineComponent({
     const onSearch = (value: string) => {
       params.page = 1
       params.search = value
+      lightTextC.value = value
       data.value = null
       FetchList()
     }
@@ -158,6 +178,10 @@ export default defineComponent({
         idAndName: params.search,
         createBy: teacherId
       }
+      if (hideSearch) {
+        tempParams.idAndName = tempParams.search
+        tempParams.search = null
+      }
       if (exquisiteFlag.value) {
         tempParams.chargeType = 'FREE'
       }
@@ -176,6 +200,21 @@ export default defineComponent({
           data.value.rows = result
         }
         data.value = data.value || res.data
+
+        console.log(showLight, 'showLight', lightTextC.value)
+        if (showLight) {
+          const temp = data.value.rows || []
+          temp.forEach((item: any) => {
+            if (lightTextC.value) {
+              item.musicSheetName = item.musicSheetName.replace(
+                lightTextC.value,
+                `<span style="color: #FE2451">${lightTextC.value}</span>`
+              )
+            }
+          })
+          data.value.rows = temp
+          console.log(temp, 'temp')
+        }
         params.page = res.data.pageNo + 1
         finished.value = res.data.pageNo >= res.data.totalPage
       } catch (error) {
@@ -371,7 +410,7 @@ export default defineComponent({
               <img class={styles.bgImg} src={bgImg} />
             </div>
           )}
-          <div class={styles.alumnList}>
+          <div class={[styles.alumnList, 'searchClass']}>
             <List
               loading={loading.value}
               finished={finished.value}

src/tenant/music/search/all-search.module.less

@@ -12,4 +12,36 @@
     line-height: 22px;
     padding-bottom: 24px;
   }
+}
+
+.searchAllTitle {
+  background: #fff;
+
+  .albumTitle {
+    border-bottom: 1px solid #F2F2F2;
+    padding-bottom: 12px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .more {
+    font-size: 12px;
+    color: #AAAAAA;
+    line-height: 17px;
+  }
+
+  &.musicGroup {
+    .albumTitle {
+      margin-bottom: 0;
+    }
+  }
+
+  :global {
+    .searchClass {
+      margin: 0;
+      padding: 0;
+    }
+  }
 }

src/tenant/music/search/header.tsx

@@ -8,7 +8,7 @@ import {
 import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import mitt from 'eventemitter3'
 import Search from '@/components/col-search'
-import { useLocalStorage } from '@vueuse/core'
+import { useLocalStorage, useThrottleFn } from '@vueuse/core'
 import styles from './index.module.less'
 import classNames from 'classnames'
 import { getRandomKey } from '../music'
@@ -17,12 +17,35 @@ import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
 import { state } from '@/state'
 import TheSticky from '@/components/the-sticky'
 import bgImg from '../../images/bg-image-search.png'
+import iconSearch from './icon-search.png'
 import request from '@/helpers/request'
+import { browser } from '@/helpers/utils'
+import ColHeader from '@/components/col-header'
+import ColResult from '@/components/col-result'
+import { postMessage } from '@/helpers/native-message'
 
 export const mitter = new mitt()
 
 const selectTagRef = ref()
 
+export const openWebViewOrWeb = (url: string, callback: any) => {
+  if (browser().isApp) {
+    postMessage({
+      api: 'openWebView',
+      content: {
+        url: url, //`${location.origin}/tenant/#/music-album-detail/${item.id}`,
+        orientation: 1,
+        isHideTitle: false
+      }
+    })
+  } else {
+    // router.push({
+    //   path: '/music-album-detail/' + item.id
+    // })
+    callback && callback()
+  }
+}
+
 export default defineComponent({
   name: 'MusicSearchHeader',
   setup() {
@@ -57,7 +80,13 @@ export default defineComponent({
     const words = useLocalStorage<string[]>('music-search', [])
     const activeTab = ref('all')
 
-    onBeforeRouteUpdate(() => {
+    if (route.path === '/music-songbook/result') {
+      keyword.value = route.query.search as string
+      tagids.value = ''
+      activeTab.value = 'all'
+    }
+
+    onBeforeRouteUpdate((to, form) => {
       const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
       subject.name = getSubject.name || '全部声部'
       subject.id = getSubject.id
@@ -71,6 +100,12 @@ export default defineComponent({
           console.log(error)
         }
       }
+      if (to.path === '/music-songbook/result') {
+        keyword.value = to.query.search as string
+        console.log(keyword.value, 'value', route.query)
+        tagids.value = ''
+        activeTab.value = 'all'
+      }
       return true
     })
 
@@ -78,7 +113,33 @@ export default defineComponent({
       mitter.emit('changeTab', val)
     })
 
+    // 输入时搜索
+    const searchList = ref<any>([])
+    const onInputSearch = useThrottleFn(async (val: any) => {
+      try {
+        const { data } = await request.post('/api-student/music/sheet/search', {
+          hideLoading: true,
+          data: {
+            subjectId: subjects.id,
+            name: val,
+            rows: 10
+          }
+        })
+        const tempMusics = data.musicNames || []
+        tempMusics.forEach((item: any, index: number) => {
+          if (index < 10) {
+            item.name = item.name.replace(val, `<span>${val}</span>`)
+          }
+        })
+        searchList.value = tempMusics
+        searchResultStatus.value = keyword.value ? true : false
+      } catch {
+        //
+      }
+    }, 300)
+
     const onSearch = val => {
+      console.log('object :>> ', val)
       keyword.value = val
       const indexOf = words.value.indexOf(val)
       if (indexOf > -1) {
@@ -88,24 +149,21 @@ export default defineComponent({
         words.value.unshift(val)
         // console.log(words.value.length, 'words.value.length')
         words.value.length = Math.min(words.value.length, 10)
-        defaultClose()
+        if (route.path === '/music-songbook/search') defaultClose()
       }
-      mitter.emit('search', val)
-    }
-
-    // 输入时搜索
-    const onInputSearch = async (val: any) => {
-      console.log('测试', val)
-      try {
-        const { data } = await request.post('/api-student/music/sheet/search', {
-          data: {
-            subjectId: subjects.id,
-            name: val
+      // mitter.emit('search', val)
+      if (route.path !== '/music-songbook/result') {
+        router.replace({
+          path: '/music-songbook/result',
+          query: {
+            search: val
           }
         })
-        console.log(data, 'val')
-      } catch {
-        //
+        searchResultStatus.value = false
+        searchList.value = []
+      } else {
+        searchResultStatus.value = false
+        mitter.emit('search', val)
       }
     }
 
@@ -175,20 +233,33 @@ export default defineComponent({
       })
     }
     // 首先调用默认收起的方法
-    defaultClose()
+    if (route.path === '/music-songbook/search') defaultClose()
 
     return () => {
       return (
         <div class={styles.search}>
           <div class={styles.sticky}>
             <TheSticky position="top">
+              <ColHeader isFixed={false} background="transparent" title=" " />
               <Search
                 modelValue={keyword.value}
                 background="transparent"
                 onInput={(val: any) => {
-                  onInputSearch(val)
+                  keyword.value = val
+                  if (val) {
+                    onInputSearch(val)
+                  } else {
+                    searchList.value = []
+                    searchResultStatus.value = false
+                    if (route.path === '/music-songbook/result') {
+                      router.replace('/music-songbook/search')
+                    }
+                  }
                 }}
                 onSearch={(val: any) => {
+                  if (!val) return
+                  keyword.value = val
+                  console.log(val, 'val')
                   onSearch(val)
                   // searchResultStatus.value = true
                 }}
@@ -210,19 +281,22 @@ export default defineComponent({
                   )
                 }}
               />
-              {/* {route.path === '/music-songbook/search' && (
-              <Tabs
-                color="var(--van-primary)"
-                background="transparent"
-                lineWidth={20}
-                shrink
-                v-model:active={activeTab.value}
-                onChange={val => (activeTab.value = val)}
-              >
-                <Tab title="单曲" name="songe"></Tab>
-                <Tab title="专辑" name="album"></Tab>
-              </Tabs>
-            )} */}
+              {route.path === '/music-songbook/result' &&
+                !searchResultStatus.value && (
+                  <Tabs
+                    color="var(--van-primary)"
+                    background="transparent"
+                    lineWidth={20}
+                    shrink
+                    class={styles.tagTabs}
+                    v-model:active={activeTab.value}
+                    onChange={val => (activeTab.value = val)}
+                  >
+                    <Tab title="综合" name="all"></Tab>
+                    <Tab title="单曲" name="songe"></Tab>
+                    <Tab title="专辑" name="album"></Tab>
+                  </Tabs>
+                )}
             </TheSticky>
             <img class={styles.bgImg} src={bgImg} />
           </div>
@@ -244,7 +318,10 @@ export default defineComponent({
                       round
                       class={[styles.searchKeyword, 'van-ellipsis']}
                       key={item}
-                      onClick={() => onSearch(item)}
+                      onClick={() => {
+                        keyword.value = item
+                        onSearch(item)
+                      }}
                     >
                       {item}
                     </Tag>
@@ -303,15 +380,44 @@ export default defineComponent({
             class={[styles.searchResult]}
             style={{ display: searchResultStatus.value ? 'block' : 'none' }}
           >
-            {/* <Popup
-              v-model:show={searchResultStatus.value}
-              position="top"
-              teleport={document.querySelector('#searchHeader')}
-              zIndex={99}
-              overlay={false}
-            >
-              <>1212121212121212</>
-            </Popup> */}
+            <div class={styles.searchGroups}>
+              {searchList.value.map((item: any) => (
+                <div
+                  class={styles.searchItem}
+                  onClick={() => {
+                    if (item.type === 'ALBUM') {
+                      openWebViewOrWeb(
+                        `${location.origin}/tenant/#/music-album-detail/${item.id}`,
+                        () => {
+                          router.push({
+                            path: '/music-album-detail/' + item.id
+                          })
+                        }
+                      )
+                    } else {
+                      openWebViewOrWeb(
+                        `${location.origin}/tenant/#/music-detail?id=${item.id}`,
+                        () => {
+                          router.push({
+                            path: '/music-detail',
+                            query: {
+                              id: item.id
+                            }
+                          })
+                        }
+                      )
+                    }
+                  }}
+                >
+                  <img src={iconSearch} class={styles.iconSearch} />
+                  <span class={styles.rName} v-html={item.name}></span>
+                </div>
+              ))}
+
+              {searchList.value.length <= 0 && (
+                <ColResult tips="暂无搜索结果" btnStatus={false} />
+              )}
+            </div>
           </div>
         </div>
       )

src/tenant/music/search/index.module.less

@@ -4,6 +4,7 @@
   --van-cell-text-color: #333;
   --van-cell-value-color: #999;
   --van-cell-icon-size: 10px;
+  --van-nav-bar-height: 20px;
 
   --base-bg: #f6f8f9;
 
@@ -275,4 +276,38 @@
   padding-top: var(--header-height);
   background: url('../../images/bg-image-search.png') no-repeat top center #fafafa;
   background-size: 100% 214px;
+
+}
+
+.searchGroups {
+  padding-top: 10px;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 15px;
+  color: #131415;
+  line-height: 21px;
+
+  .searchItem {
+    display: flex;
+    align-items: center;
+    padding: 0 12px 20px;
+
+    .rName {
+      width: 90%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    span span {
+      color: #FE2451;
+    }
+  }
+
+  .iconSearch {
+    width: 16px;
+    height: 16px;
+    margin-right: 10px;
+  }
 }

src/tenant/music/search/index.tsx

@@ -35,7 +35,7 @@ export default defineComponent({
       }
       if (val) {
         words.value.unshift(val)
-        words.value.length = Math.min(words.value.length, 5)
+        words.value.length = Math.min(words.value.length, 10)
       }
       const activeRef = activeTab.value === 'album' ? albumList : musicList
       ;(activeRef.value as any).onSearch?.(val)

src/tenant/music/search/result-all-search.tsx

@@ -0,0 +1,153 @@
+import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue'
+import styles from './all-search.module.less'
+import { useRoute, useRouter } from 'vue-router'
+import MusicGrid from '../component/music-grid'
+import request from '@/helpers/request'
+import MusicList from '../list'
+import { Icon } from 'vant'
+import { mitter, openWebViewOrWeb } from './header'
+import ColResult from '@/components/col-result'
+
+export default defineComponent({
+  name: 'MusicSearch',
+  props: {
+    defauleParams: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['confirm'],
+  setup(props) {
+    const route = useRoute()
+    const router = useRouter()
+    const state = reactive({
+      albumList: [] as any,
+      loading: false,
+      defauleParams: props.defauleParams as any
+    })
+
+    const getAlbumList = async () => {
+      state.loading = true
+      try {
+        const { data } = await request.post('/api-student/music/album/list', {
+          data: {
+            ...state.defauleParams,
+            page: 1,
+            rows: 3
+          }
+        })
+        state.albumList = data.rows || []
+      } catch {
+        //
+      }
+      state.loading = false
+    }
+
+    const musicList = ref(null)
+    const onSearch = (val: any) => {
+      state.defauleParams.idAndName = val
+      getAlbumList()
+      const activeRef = musicList
+      ;(activeRef.value as any).onSearch?.(val)
+    }
+
+    // music-songbook/search
+    onMounted(() => {
+      getAlbumList()
+
+      mitter.on('search', onSearch)
+    })
+
+    onUnmounted(() => {
+      mitter.off('search', onSearch)
+    })
+    return () => (
+      <div class={styles.allSearch}>
+        <div class={[styles.albumSection, styles.searchAllTitle]}>
+          <div class={styles.albumTitle}>
+            <span>热门专辑</span>
+
+            <span
+              class={styles.more}
+              onClick={() => {
+                openWebViewOrWeb(
+                  `${location.origin}/tenant/#/music-album`,
+                  () => {
+                    router.push({
+                      path: '/music-album'
+                    })
+                  }
+                )
+              }}
+            >
+              更多 <Icon name="arrow" />
+            </span>
+          </div>
+          <div class={styles.musicGrid}>
+            <MusicGrid
+              showLight
+              lightText={state.defauleParams.idAndName}
+              list={state.albumList}
+              onGoto={(n: any) => {
+                openWebViewOrWeb(
+                  `${location.origin}/tenant/#/music-album-detail/${n.id}`,
+                  () => {
+                    router.push({
+                      name: 'music-album-detail',
+                      params: {
+                        id: n.id
+                      }
+                    })
+                  }
+                )
+              }}
+            />
+
+            {state.albumList.length <= 0 && !state.loading && (
+              <ColResult
+                tips="暂无专辑"
+                btnStatus={false}
+                classImgSize="SMALL"
+              />
+            )}
+          </div>
+        </div>
+
+        <div
+          class={[
+            styles.albumSection,
+            styles.searchAllTitle,
+            styles.musicGroup
+          ]}
+        >
+          <div class={styles.albumTitle}>单曲</div>
+          {/* <MusicSwiper defauleParams={props.defauleParams} /> */}
+          <MusicList
+            hideSearch
+            ref={musicList}
+            onItemClick={(item: any) => {
+              openWebViewOrWeb(
+                `${location.origin}/tenant/#/music-detail?id=${item.id}`,
+                () => {
+                  router.push({
+                    path: '/music-detail',
+                    query: {
+                      id: item.id
+                    }
+                  })
+                }
+              )
+            }}
+            showLight
+            lightText={state.defauleParams.idAndName}
+            defauleParams={{
+              ...props.defauleParams,
+              idAndName: props.defauleParams.search
+              // search: null
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
+})

src/tenant/music/search/search-result.tsx

@@ -0,0 +1,133 @@
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import AlbumList from '../album'
+import styles from './index.module.less'
+import { useRoute, useRouter } from 'vue-router'
+import { getRandomKey } from '../music'
+import { mitter } from './header'
+import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
+import AllSearch from './result-all-search'
+import MusicList from '../list'
+
+export default defineComponent({
+  name: 'MusicSearch',
+  emits: ['confirm'],
+  setup() {
+    localStorage.setItem('behaviorId', getRandomKey())
+    const route = useRoute()
+    const router = useRouter()
+    const keyword = ref(route.query.search || '')
+    const tagids = ref(route.query.tagids || '')
+    const subject = ref()
+    const tagVisibility = ref(false)
+    const words = useLocalStorage<string[]>('music-search', [])
+    const activeTab = ref('all')
+
+    const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
+    subject.value = getSubject.id
+
+    const onSearch = val => {
+      if (activeTab.value !== 'all') {
+        keyword.value = val
+        const indexOf = words.value.indexOf(val)
+        if (indexOf > -1) {
+          words.value.splice(indexOf, 1)
+        }
+        if (val) {
+          words.value.unshift(val)
+          words.value.length = Math.min(words.value.length, 10)
+        }
+        const activeRef = activeTab.value === 'album' ? albumList : musicList
+        ;(activeRef.value as any)?.onSearch?.(val)
+      }
+    }
+
+    const onComfirm = tags => {
+      const data = Object.values(tags).flat().filter(Boolean).join(',')
+      tagids.value = data
+      const activeRef = activeTab.value === 'album' ? albumList : musicList
+      ;(activeRef.value as any).onComfirm?.(tags)
+      tagVisibility.value = false
+    }
+
+    const onConfirmSubject = (item: any) => {
+      subject.value = item.id
+      const activeRef = activeTab.value === 'album' ? albumList : musicList
+      ;(activeRef.value as any).onComfirmSubject?.(item)
+    }
+
+    const albumList = ref(null)
+    const musicList = ref(null)
+
+    const changeTab = (val: any) => {
+      activeTab.value = val
+    }
+
+    onMounted(() => {
+      mitter.on('changeTab', changeTab)
+      mitter.on('search', onSearch)
+      mitter.on('confirm', onComfirm)
+      mitter.on('confirmSubject', onConfirmSubject)
+    })
+
+    onUnmounted(() => {
+      mitter.off('changeTab', changeTab)
+      mitter.off('search', onSearch)
+      mitter.off('confirm', onComfirm)
+      mitter.off('confirmSubject', onConfirmSubject)
+    })
+
+    return () => {
+      return (
+        <div class={styles.search}>
+          {activeTab.value === 'all' && (
+            <AllSearch
+              defauleParams={{
+                idAndName: keyword.value,
+                albumTagIds: tagids.value,
+                subjectIds: subject.value
+              }}
+            />
+          )}
+          {activeTab.value === 'album' && (
+            <AlbumList
+              hideSearch
+              showLight
+              lightText={keyword.value as any}
+              ref={albumList}
+              defauleParams={{
+                search: keyword.value,
+                albumTagIds: tagids.value,
+                subjectIds: subject.value
+              }}
+            />
+          )}
+          {activeTab.value === 'songe' && (
+            <div class={styles.musicGroup}>
+              <MusicList
+                hideSearch
+                showLight
+                lightText={keyword.value as any}
+                defauleParams={{
+                  idAndName: keyword.value,
+                  albumTagIds: tagids.value,
+                  subjectIds: subject.value
+                }}
+                ref={musicList}
+                onItemClick={(item: any) => {
+                  router.push({
+                    path: '/music-detail',
+                    query: {
+                      id: item.id,
+                      albumId: route.params.id
+                    }
+                  })
+                }}
+              />
+            </div>
+          )}
+        </div>
+      )
+    }
+  }
+})

src/tenant/music/train-list/index.tsx

@@ -45,7 +45,7 @@ export default defineComponent({
       title = '合奏练习'
     }
     const params = reactive({
-      search: (route.query.search as string) || '',
+      keyword: (route.query.search as string) || '',
       subjectType: subjectType,
       page: 1,
       subjectId: null,
@@ -66,7 +66,7 @@ export default defineComponent({
 
     const onSearch = (value: string) => {
       params.page = 1
-      params.search = value
+      params.keyword = value
       data.value = null
       FetchList()
     }

src/views/music/music-detail/index.tsx

@@ -606,14 +606,10 @@ export default defineComponent({
                 ),
                 title: () => (
                   <div class={styles.info}>
-<<<<<<< Updated upstream
-                    <h4 class="van-ellipsis">
-=======
                     <h4
                       class="van-ellipsis"
-                      onClick={() => handleGotoMusicScore(musicDetail.value)}
+                      // onClick={() => handleGotoMusicScore(musicDetail.value)}
                     >
->>>>>>> Stashed changes
                       {musicDetail.value?.musicSheetName}
                     </h4>
                     <p

vite.config.ts

@@ -12,7 +12,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://online.colexiu.com/';
-const proxyUrl = 'https://dev.colexiu.com/'
+const proxyUrl = 'https://test.colexiu.com/'
 // const proxyUrl = 'http://192.168.3.143:8000/'
 export default defineConfig({
   base: './',