add song request from web

src/views/view/songListTemplate/DefaultSongListTemplate.vue

@@ -2,19 +2,71 @@
 import { useAccount } from '@/api/account'
 import { SongsInfo, UserInfo } from '@/api/api-models'
 import SongList from '@/components/SongList.vue'
-import { NDivider } from 'naive-ui'
+import { CloudAdd20Filled } from '@vicons/fluent'
+import { NButton, NDivider, NIcon, NTooltip, useMessage } from 'naive-ui'
+import { h, ref } from 'vue'
+import { Setting_SongRequest, SongRequestInfo } from '@/api/api-models'
 
 const accountInfo = useAccount()
 
-defineProps<{
+const props = defineProps<{
   userInfo: UserInfo | undefined
   biliInfo: any | undefined
+  songRequestSettings: Setting_SongRequest
+  songRequestActive: SongRequestInfo[]
   currentData: SongsInfo[] | undefined
 }>()
+const emits = defineEmits(['requestSong'])
+
+const isLoading = ref('')
+const message = useMessage()
+
+const buttoms = (song: SongsInfo) => [
+  accountInfo.value?.id != props.userInfo?.id
+    ? h(
+        NTooltip,
+        { trigger: 'hover' },
+        {
+          trigger: () =>
+            h(
+              NButton,
+              {
+                type: 'warning',
+                size: 'small',
+                circle: true,
+                loading: isLoading.value == song.key,
+                disabled: !accountInfo,
+                onClick: () => {
+                  if (song.paidSong || !props.songRequestSettings.allowFromWeb) {
+                    navigator.clipboard.writeText(`${props.songRequestSettings.orderPrefix} ${song.name}`)
+                    message.success('复制成功')
+                  } else {
+                    isLoading.value = song.key
+                    emits('requestSong', song)
+                    isLoading.value = ''
+                  }
+                },
+              },
+              {
+                icon: () => h(NIcon, { component: CloudAdd20Filled }),
+              }
+            ),
+          default: () =>
+            !props.songRequestSettings.allowFromWeb
+              ? '点歌 | 用户不允许从网页点歌, 点击后将复制点歌内容到剪切板'
+              : song.paidSong
+              ? '点歌 | 这是付费SC歌曲, 点击后将复制点歌内容到剪切板'
+              : !accountInfo
+              ? '点歌 | 你需要登录后才能点歌'
+              : '点歌',
+        }
+      )
+    : undefined,
+]
 </script>
 
 <template>
   <NDivider style="margin-top: 10px" />
-  <SongList v-if="currentData" :songs="currentData ?? []" :is-self="accountInfo?.id == userInfo?.id" v-bind="$attrs" />
+  <SongList v-if="currentData" :songs="currentData ?? []" :is-self="accountInfo?.id == userInfo?.id" :extra-buttom="buttoms" v-bind="$attrs" />
   <NDivider />
 </template>

src/views/view/songListTemplate/SimpleSongListTemplate.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
+import { Setting_SongRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models';
+import { NGridItem, NGrid } from 'naive-ui'
 
-import { NGridItem,NGrid } from 'naive-ui';
+const props = defineProps<{
+  userInfo: UserInfo | undefined
+  biliInfo: any | undefined
+  songRequestSettings: Setting_SongRequest
+  songRequretActive: SongRequestInfo[]
+  currentData: SongsInfo[] | undefined
+}>()
 </script>
 <template>
   <NGrid>
-    <NGridItem>
-      
-    </NGridItem>
+    <NGridItem> </NGridItem>
   </NGrid>
-</template>
+</template>