update

src/views/ManageLayout.vue

@@ -22,14 +22,23 @@ const menuOptions = [
             name: 'manage-songList',
           },
         },
-        { default: () => '回家' }
+        { default: () => '歌单' }
       ),
     key: 'song-list',
     icon: renderIcon(BookOutline),
   },
   {
-    label: '舞，舞，舞',
-    key: 'dance-dance-dance',
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: 'manage-questionBox',
+          },
+        },
+        { default: () => '棉花糖(提问箱' }
+      ),
+    key: 'song-list',
     icon: renderIcon(BookOutline),
   },
 ]

src/views/ViewerLayout.vue

@@ -3,7 +3,7 @@
 import { NAvatar, NCard, NIcon, NLayout, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText, NButton, NEmpty, NResult, NPageHeader, NSwitch, useOsTheme } from 'naive-ui'
 import { computed, h, onMounted, ref } from 'vue'
 import { BookOutline as BookIcon, PersonOutline as PersonIcon, WineOutline as WineIcon } from '@vicons/ionicons5'
-import { GetInfo, useUser } from '@/api/user'
+import { GetInfo, useUserWithUId } from '@/api/user'
 import { useRoute } from 'vue-router'
 import { UserInfo } from '@/api/api-models'
 import { FETCH_API } from '@/data/constants'
@@ -35,7 +35,7 @@ const menuOptions = [
   },
 ]
 async function RequestBiliUserData() {
-  await fetch(FETCH_API + `https://account.bilibili.com/api/member/getCardByMid?mid=${uId.value}`)
+  await fetch(FETCH_API + `https://account.bilibili.com/api/member/getCardByMid?mid=${userInfo.value?.biliId}`)
     .then(async (respone) => {
       let data = await respone.json()
       if (data.code == 0) {
@@ -50,8 +50,9 @@ async function RequestBiliUserData() {
 }
 
 onMounted(async () => {
+  console.log(route.params)
+  userInfo.value = await useUserWithUId(uId.value)
   await RequestBiliUserData()
-  userInfo.value = await useUser(uId.value)
 })
 </script>
 

src/views/manage/QuestionBoxManageView.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { QAInfo } from '@/api/api-models';
+import { onMounted, ref } from 'vue';
+
+const questions = ref([] as QAInfo[]);
+
+function GetQAInfo() {
+  
+}
+
+onMounted(() => {
+
+});
+</script>
+
+<template>
+  1
+</template>

src/views/manage/SettingsManageView.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account'
+import { NButton, NCard, NCheckbox, NCheckboxGroup, NDivider, NForm, NSwitch, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { useRequest } from 'vue-request'
+import { FunctionTypes } from '@/api/api-models'
+import { QueryPostAPI } from '@/api/query'
+import { ACCOUNT_API_URL } from '@/data/constants'
+
+const account = useAccount()
+const message = useMessage()
+
+function UpdateEnableFunction(func: FunctionTypes, enable: boolean) {
+  if (account.value) {
+    if (enable) {
+      //从account.value?.settings.enableFunctions中移除指定的func
+      account.value.settings.enableFunctions = account.value?.settings.enableFunctions.filter((f) => f != func)
+    } else {
+      account.value.settings.enableFunctions.push(func)
+    }
+  }
+}
+async function SaveSetting() {
+  const data = await QueryPostAPI(ACCOUNT_API_URL + 'update-setting', {
+    setting: JSON.stringify(account.value?.settings),
+  })
+  if (data.code == 200) {
+    message.success('保存成功')
+  }
+}
+</script>
+
+<template>
+  <NCard v-if="account">
+    <NDivider> 启用功能 </NDivider>
+    <NCheckboxGroup v-model:value="account.settings.enableFunctions">
+      <NCheckbox :value="FunctionTypes.SongList"> 歌单 </NCheckbox>
+      <NCheckbox :value="FunctionTypes.QuestionBox"> 提问箱(棉花糖 </NCheckbox>
+    </NCheckboxGroup>
+    <NDivider />
+    <NButton @click="SaveSetting"> 保存 </NButton>
+  </NCard>
+</template>

src/views/manage/SongListManageView.vue

@@ -3,9 +3,32 @@ import { useAccount } from '@/api/account'
 import { SongFrom, SongLanguage, SongsInfo } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import SongList from '@/components/SongList.vue'
-import { SONG_API_URL } from '@/data/constants'
+import { FETCH_API, FIVESING_SEARCH_API, SONG_API_URL } from '@/data/constants'
 import { ca } from 'date-fns/locale'
-import { FormInst, FormRules, NButton, NDivider, NForm, NFormItem, NInput, NInputGroup, NInputGroupLabel, NModal, NSelect, NSpace, NSpin, NTabPane, NTabs, NTag, NTransfer, useMessage } from 'naive-ui'
+import {
+  FormInst,
+  FormRules,
+  NButton,
+  NDivider,
+  NForm,
+  NFormItem,
+  NInput,
+  NInputGroup,
+  NInputGroupLabel,
+  NList,
+  NListItem,
+  NModal,
+  NPagination,
+  NSelect,
+  NSpace,
+  NSpin,
+  NTabPane,
+  NTable,
+  NTabs,
+  NTag,
+  NTransfer,
+  useMessage,
+} from 'naive-ui'
 import { Option } from 'naive-ui/es/transfer/src/interface'
 import { computed, onMounted, ref } from 'vue'
 
@@ -14,6 +37,7 @@ const accountInfo = useAccount()
 
 const showModal = ref(false)
 const neteaseIdInput = ref()
+const fivesingSearchInput = ref()
 const isModalLoading = ref(false)
 
 const neteaseSongListId = computed(() => {
@@ -43,6 +67,12 @@ const neteaseSongs = ref<SongsInfo[]>([])
 const neteaseSongsOptions = ref<Option[]>([])
 const selectedNeteaseSongs = ref<string[]>([])
 
+const fivesingResults = ref<SongsInfo[]>([])
+const fivesingTotalPageCount = ref(1)
+const fivesingCurrentPage = ref(1)
+
+const isGettingFivesingSongPlayUrl = ref(0)
+
 const formRef = ref<FormInst | null>(null)
 const addSongModel = ref<SongsInfo>({} as SongsInfo)
 const addSongRules: FormRules = {
@@ -139,6 +169,25 @@ async function addNeteaseSongs() {
       isModalLoading.value = false
     })
 }
+async function addFingsingSongs(song: SongsInfo) {
+  isModalLoading.value = true
+  await addSongs([song], SongFrom.FiveSing)
+    .then((data) => {
+      if (data.code == 200) {
+        message.success(`已添加歌曲`)
+        songs.value.push(...data.data)
+      } else {
+        message.error('添加失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      message.error('添加失败')
+      console.error(err)
+    })
+    .finally(() => {
+      isModalLoading.value = false
+    })
+}
 async function addSongs(songsShoudAdd: SongsInfo[], from: SongFrom) {
   return QueryPostAPI<SongsInfo[]>(
     SONG_API_URL + 'add',
@@ -167,19 +216,88 @@ async function getNeteaseSongList() {
           disabled: songs.value.findIndex((exist) => exist.id == s.id) > -1,
         }))
         message.success(`成功获取歌曲信息, 共 ${data.data.length} 条, 歌单中已存在 ${neteaseSongsOptions.value.filter((s) => s.disabled).length} 首`)
+      } else {
+        message.error('获取歌单失败: ' + data.message)
       }
     })
     .catch((err) => {
       console.error(err)
-      message.error(err)
+      message.error('获取歌单失败: ' + err)
     })
     .finally(() => {
       isModalLoading.value = false
     })
 }
+async function getFivesingSearchList(isRestart = false) {
+  isModalLoading.value = true
+  await fetch(FETCH_API + `http://search.5sing.kugou.com/home/json?keyword=${fivesingSearchInput.value}&sort=1&page=${fivesingCurrentPage.value}&filter=3`)
+    .then(async (data) => {
+      const json = await data.json()
+      if (json.list.length == 0) {
+        message.error('搜索结果为空')
+      }
+      if (isRestart) {
+        fivesingCurrentPage.value = 1
+      }
+      fivesingResults.value = []
+      //fivesingResultsOptions.value = []
+      json.list.forEach((song: any) => {
+        const songInfo = {
+          id: song.songId,
+          name: extractTextFromHtml(song.songName),
+          author: [song.originSinger, song.singer],
+          //url: `http://service.5sing.kugou.com/song/getsongurl?songid=${song.songId}&songtype=bz&from=web&version=6.6.72`,
+        } as SongsInfo
+        fivesingResults.value.push(songInfo)
+      })
+      fivesingTotalPageCount.value = json.pageInfo.totalPages
+      message.success(`成功获取搜索信息, 共 ${json.pageInfo.totalCount} 条, 当前第 ${fivesingCurrentPage.value} 页`)
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('获取歌单失败: ' + err)
+    })
+    .finally(() => {
+      isModalLoading.value = false
+    })
+}
+function extractTextFromHtml(html: string): string {
+  const regex = /<em class="keyword">(.*?)<\/em>/
+  const match = regex.exec(html)
+  if (match) {
+    return match[1]
+  } else {
+    return html
+  }
+}
+async function playFivesingSong(song: SongsInfo) {
+  isGettingFivesingSongPlayUrl.value = song.id
+  await getFivesingSongUrl(song)
+    .then((data) => {
+      song.url = data
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('获取歌曲链接失败: ' + err)
+    })
+    .finally(() => {
+      isGettingFivesingSongPlayUrl.value = 0
+    })
+}
+async function getFivesingSongUrl(song: SongsInfo): Promise<string> {
+  const data = await fetch(FETCH_API + `http://service.5sing.kugou.com/song/getsongurl?songid=${song.id}&songtype=bz&from=web&version=6.6.72`)
+  const result = await data.text()
+  //忽略掉result的第一个字符和最后一个字符, 并反序列化
+  const json = JSON.parse(result.substring(1, result.length - 1))
+  if (json.code == 0) {
+    return json.data.lqurl
+  }
+  return ''
+}
+
 async function getSongs() {
   await QueryGetAPI<any>(SONG_API_URL + 'get', {
-    uId: accountInfo.value?.biliId,
+    id: accountInfo.value?.id,
   }).then((data) => {
     if (data.code == 200) {
       songs.value = data.data
@@ -194,7 +312,7 @@ onMounted(async () => {
 
 <template>
   <NButton @click="showModal = true"> 添加歌曲 </NButton>
-  <NModal v-model:show="showModal" style="max-width: 600px" preset="card">
+  <NModal v-model:show="showModal" style="max-width: 1000px;" preset="card">
     <template #header> 添加歌曲 </template>
     <NSpin :show="isModalLoading">
       <NTabs default-value="custom" animated>
@@ -225,7 +343,7 @@ onMounted(async () => {
             </template>
           </NInput>
           <NDivider style="margin: 10px" />
-          <NButton type="primary" @click="getNeteaseSongList"> 获取 </NButton>
+          <NButton type="primary" @click="getNeteaseSongList" :disabled="!neteaseSongListId"> 获取 </NButton>
           <template v-if="neteaseSongsOptions.length > 0">
             <NDivider style="margin: 10px" />
             <NTransfer style="height: 500px" ref="transfer" v-model:value="selectedNeteaseSongs" :options="neteaseSongsOptions" source-filterable />
@@ -233,7 +351,50 @@ onMounted(async () => {
             <NButton type="primary" @click="addNeteaseSongs"> 添加到歌单 | {{ selectedNeteaseSongs.length }} 首 </NButton>
           </template>
         </NTabPane>
-        <NTabPane name="5sing" tab="从5sing搜索"> </NTabPane>
+        <NTabPane name="5sing" tab="从5sing搜索">
+          <NInput clearable style="width: 100%" autosize v-model:value="fivesingSearchInput" placeholder="输入要搜索的歌名" maxlength="15" />
+          <NDivider style="margin: 10px" />
+          <NButton type="primary" @click="getFivesingSearchList(true)" :disabled="!fivesingSearchInput"> 搜索 </NButton>
+          <template v-if="fivesingResults.length > 0">
+            <NDivider style="margin: 10px" />
+            <div style="overflow-x: auto">
+              <NTable size="small" style="overflow-x: auto">
+                <thead>
+                  <tr>
+                    <th>名称</th>
+                    <th>作者</th>
+                    <th>试听</th>
+                    <th>操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="song in fivesingResults" v-bind:key="song.id">
+                    <td>{{ song.name }}</td>
+                    <td>
+                      <NSpace>
+                        <NTag size="small" v-for="author in song.author" :key="author">
+                          {{ author }}
+                        </NTag>
+                      </NSpace>
+                    </td>
+                    <td style="display: flex; justify-content: flex-end;">
+                      <!-- 在这里播放song.url链接中的音频 -->
+                      <NButton size="small" v-if="!song.url"  @click="playFivesingSong(song)" :loading="isGettingFivesingSongPlayUrl == song.id"> 试听 </NButton>
+                      <audio v-else controls autoplay style="max-height: 30px">
+                        <source :src="song.url" />
+                      </audio>
+                    </td>
+                    <td>
+                      <NButton size="small" color="green" @click="addFingsingSongs(song)" :disabled="songs.findIndex((s) => s.from == SongFrom.FiveSing && s.id == song.id) > -1"> 添加 </NButton>
+                    </td>
+                  </tr>
+                </tbody>
+              </NTable>
+            </div>
+            <br />
+            <NPagination v-model:page="fivesingCurrentPage" :page-count="fivesingTotalPageCount" simple @update-page="getFivesingSearchList(false)" />
+          </template>
+        </NTabPane>
       </NTabs>
     </NSpin>
   </NModal>

src/views/view/IndexView.vue

@@ -1,13 +1,33 @@
 <template>
-  <div style="display: flex;justify-content: center;">
+  <div style="display: flex; justify-content: center">
     <div>
-      <NText strong tag="h1">
-        vtsuru
-      </NText>
+      <NText strong tag="h1"> vtsuru </NText>
+      <component :is="indexType" :user-info="userInfo"/>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useAccount } from '@/api/account'
+import { useUser } from '@/api/user'
+import { IndexTypes } from '@/api/api-models'
 import { NButton, NText } from 'naive-ui'
+import DefaultIndexTemplate from '@/views/view/indexTemplate/DefaultIndexTemplate.vue'
+import { computed } from 'vue'
+
+const indexType = computed(() => {
+  if (userInfo) {
+    switch (userInfo.indexType) {
+      case IndexTypes.Default:
+        return DefaultIndexTemplate
+
+      default:
+        return DefaultIndexTemplate
+    }
+  } else {
+    return DefaultIndexTemplate
+  }
+})
+const accountInfo = useAccount()
+const userInfo = await useUser()
 </script>

src/views/view/indexTemplate/DefaultIndexTemplate.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { UserInfo } from '@/api/api-models';
+
+const props = defineProps<{
+  userInfo: UserInfo
+}>()
+</script>
+
+<template>
+  1
+</template>