diff --git a/index.html b/index.html index af994f7..695423e 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,13 @@ Vite App - + + + diff --git a/package-lock.json b/package-lock.json index 548ffcf..12bb256 100644 --- a/package-lock.json +++ b/package-lock.json @@ -465,6 +465,14 @@ "postcss-value-parser": "^4.1.0" } }, + "axios": { + "version": "0.21.1", + "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz", + "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz", @@ -866,6 +874,11 @@ "to-regex-range": "^5.0.1" } }, + "follow-redirects": { + "version": "1.14.1", + "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555300559&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz", + "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=" + }, "fs-extra": { "version": "10.0.0", "resolved": "https://registry.nlark.com/fs-extra/download/fs-extra-10.0.0.tgz", diff --git a/package.json b/package.json index f54ab0e..e7d1b21 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "dependencies": { "@tailwindcss/postcss7-compat": "^2.2.4", "autoprefixer": "^9.8.6", + "axios": "^0.21.1", "postcss": "^7.0.36", "sass": "^1.35.2", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4", diff --git a/src/api/home.ts b/src/api/home.ts new file mode 100644 index 0000000..a45ec61 --- /dev/null +++ b/src/api/home.ts @@ -0,0 +1,34 @@ +import request from "@/utils/request"; +import { IHotSinger } from "@/type/singer"; +import { ISearchKeyword } from "@/type/search"; +import { IPlayListSort } from "@/type/playlist"; +import { IRecommendMusic } from "@/type/music"; + +interface IHotSingerParams { + offset: number; + limit: number; +} + +interface IRecommendMusicParams { + limit: number; +} + +// 获取热门歌手 +export const getHotSinger = (params: IHotSingerParams) => { + return request.get("/top/artists", { params }); +}; + +// 获取搜索推荐词 +export const getSearchKeyword = () => { + return request.get("/search/default"); +}; + +// 获取歌单分类 +export const getPlaylistCategory = () => { + return request.get("/playlist/catlist"); +}; + +// 获取推荐音乐 +export const getRecommendMusic = (params: IRecommendMusicParams) => { + return request.get("/personalized/newsong", { params }); +}; diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue index 0e8a598..c36cf26 100644 --- a/src/layout/AppLayout.vue +++ b/src/layout/AppLayout.vue @@ -2,31 +2,80 @@
- +
+
+
+ + + +
+
+ + + + +
+
+ +
\ No newline at end of file diff --git a/src/layout/components/AppMenu.vue b/src/layout/components/AppMenu.vue index c582c66..9b2cb01 100644 --- a/src/layout/components/AppMenu.vue +++ b/src/layout/components/AppMenu.vue @@ -4,12 +4,12 @@
- + {{ item.text }} @@ -29,15 +29,15 @@ const props = defineProps({ }, size: { type: String, - default: '30px' + default: '26px' }, color: { type: String, - default: '#fff' + default: '#aaa' }, menus: { type: Array, - default: () => [] + default: [] } }) @@ -61,7 +61,13 @@ onMounted(() => { @apply flex items-center justify-center; } -img { - color: #fff; +.app-menu-item-link { + @apply mb-6 mt-6; +} + +.app-menu-item-icon:hover { + color: #fff !important; + transform: scale(1.05); + transition: 0.2s ease-in-out; } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 492f38e..df8ffef 100644 --- a/src/main.ts +++ b/src/main.ts @@ -10,7 +10,10 @@ import "./index.css"; import router from "@/router"; +import store from "@/store"; + const app = createApp(App); app.use(router); +app.use(store); app.use(naive); app.mount("#app"); diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 0000000..36bad90 --- /dev/null +++ b/src/store/index.ts @@ -0,0 +1,30 @@ +import { createStore } from "vuex"; + +let state = { + menus: [ + { + href: "/", + icon: "icon-homefill", + text: "hello", + }, + { + href: "/main", + icon: "icon-peoplefill", + text: "hello", + }, + { + href: "/", + icon: "icon-videofill", + text: "hello", + }, + ], +}; + +let mutations = {}; + +const store = createStore({ + state: state, + mutations: mutations, +}); + +export default store; diff --git a/src/type/home.ts b/src/type/home.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/type/music.ts b/src/type/music.ts new file mode 100644 index 0000000..504dfe3 --- /dev/null +++ b/src/type/music.ts @@ -0,0 +1,156 @@ +export interface IRecommendMusic { + code: number; + category: number; + result: Result[]; +} + +interface Result { + id: number; + type: number; + name: string; + copywriter?: any; + picUrl: string; + canDislike: boolean; + trackNumberUpdateTime?: any; + song: Song; + alg: string; +} + +interface Song { + name: string; + id: number; + position: number; + alias: string[]; + status: number; + fee: number; + copyrightId: number; + disc: string; + no: number; + artists: Artist[]; + album: Album; + starred: boolean; + popularity: number; + score: number; + starredNum: number; + duration: number; + playedNum: number; + dayPlays: number; + hearTime: number; + ringtone: string; + crbt?: any; + audition?: any; + copyFrom: string; + commentThreadId: string; + rtUrl?: any; + ftype: number; + rtUrls: any[]; + copyright: number; + transName?: any; + sign?: any; + mark: number; + originCoverType: number; + originSongSimpleData?: any; + single: number; + noCopyrightRcmd?: any; + rtype: number; + rurl?: any; + mvid: number; + bMusic: BMusic; + mp3Url?: any; + hMusic: BMusic; + mMusic: BMusic; + lMusic: BMusic; + exclusive: boolean; + privilege: Privilege; +} + +interface Privilege { + id: number; + fee: number; + payed: number; + st: number; + pl: number; + dl: number; + sp: number; + cp: number; + subp: number; + cs: boolean; + maxbr: number; + fl: number; + toast: boolean; + flag: number; + preSell: boolean; + playMaxbr: number; + downloadMaxbr: number; + rscl?: any; + freeTrialPrivilege: FreeTrialPrivilege; + chargeInfoList: ChargeInfoList[]; +} + +interface ChargeInfoList { + rate: number; + chargeUrl?: any; + chargeMessage?: any; + chargeType: number; +} + +interface FreeTrialPrivilege { + resConsumable: boolean; + userConsumable: boolean; +} + +interface BMusic { + name?: any; + id: number; + size: number; + extension: string; + sr: number; + dfsId: number; + bitrate: number; + playTime: number; + volumeDelta: number; +} + +interface Album { + name: string; + id: number; + type: string; + size: number; + picId: number; + blurPicUrl: string; + companyId: number; + pic: number; + picUrl: string; + publishTime: number; + description: string; + tags: string; + company: string; + briefDesc: string; + artist: Artist; + songs: any[]; + alias: string[]; + status: number; + copyrightId: number; + commentThreadId: string; + artists: Artist[]; + subType: string; + transName?: any; + onSale: boolean; + mark: number; + picId_str: string; +} + +interface Artist { + name: string; + id: number; + picId: number; + img1v1Id: number; + briefDesc: string; + picUrl: string; + img1v1Url: string; + albumSize: number; + alias: any[]; + trans: string; + musicSize: number; + topicPerson: number; +} diff --git a/src/type/playlist.ts b/src/type/playlist.ts new file mode 100644 index 0000000..2412cc0 --- /dev/null +++ b/src/type/playlist.ts @@ -0,0 +1,26 @@ +export interface IPlayListSort { + code: number; + all: SortAll; + sub: SortAll[]; + categories: SortCategories; +} + +interface SortCategories { + "0": string; + "1": string; + "2": string; + "3": string; + "4": string; +} + +interface SortAll { + name: string; + resourceCount: number; + imgId: number; + imgUrl?: any; + type: number; + category: number; + resourceType: number; + hot: boolean; + activity: boolean; +} diff --git a/src/type/search.ts b/src/type/search.ts new file mode 100644 index 0000000..39559b8 --- /dev/null +++ b/src/type/search.ts @@ -0,0 +1,16 @@ +export interface ISearchKeyword { + code: number; + message?: any; + data: SearchKeywordData; +} + +interface SearchKeywordData { + showKeyword: string; + realkeyword: string; + searchType: number; + action: number; + alg: string; + gap: number; + source?: any; + bizQueryInfo: string; +} diff --git a/src/type/singer.ts b/src/type/singer.ts new file mode 100644 index 0000000..53e480a --- /dev/null +++ b/src/type/singer.ts @@ -0,0 +1,32 @@ +export interface IHotSinger { + code: number; + more: boolean; + artists: Artist[]; +} + +interface Artist { + name: string; + id: number; + picId: number; + img1v1Id: number; + briefDesc: string; + picUrl: string; + img1v1Url: string; + albumSize: number; + alias: string[]; + trans: string; + musicSize: number; + topicPerson: number; + showPrivateMsg?: any; + isSubed?: any; + accountId?: number; + picId_str?: string; + img1v1Id_str: string; + transNames?: string[]; + followed: boolean; + mvSize?: any; + publishTime?: any; + identifyTag?: any; + alg?: any; + fansCount?: any; +} diff --git a/src/utils/request.ts b/src/utils/request.ts new file mode 100644 index 0000000..afcf225 --- /dev/null +++ b/src/utils/request.ts @@ -0,0 +1,8 @@ +import axios from "axios"; + +const request = axios.create({ + baseURL: "http://123.56.226.179:3000", + timeout: 10000, +}); + +export default request; diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 436a354..a2266d5 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -1,22 +1,156 @@ \ No newline at end of file