From 3449c02d0c57caae72db00ede278adc2304b124f Mon Sep 17 00:00:00 2001 From: qier222 <68148142+qier222@users.noreply.github.com> Date: Sun, 25 Oct 2020 14:09:13 +0800 Subject: [PATCH 1/6] feat: automatically get daily signin points --- src/utils/common.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/utils/common.js b/src/utils/common.js index cf693f0..4f76fd8 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -1,5 +1,6 @@ import { isAccountLoggedIn } from "./auth"; import { refreshCookie } from "@/api/auth"; +import { dailySignin } from "@/api/user"; import dayjs from "dayjs"; import store from "@/store"; @@ -79,9 +80,10 @@ export function updateHttps(url) { } export function dailyTask() { + let lastDate = store.state.settings.lastRefreshCookieDate; if ( - store.state.settings.lastRefreshCookieDate === undefined || - store.state.settings.lastRefreshCookieDate !== dayjs().date() + isAccountLoggedIn() && + (lastDate === undefined || lastDate !== dayjs().date()) ) { console.log("execute dailyTask"); store.commit("updateSettings", { @@ -89,5 +91,7 @@ export function dailyTask() { value: dayjs().date(), }); refreshCookie(); + dailySignin(0); + dailySignin(1); } } From e9b6a81befa95984a74b4409e17afa2859b65000 Mon Sep 17 00:00:00 2001 From: qier222 <68148142+qier222@users.noreply.github.com> Date: Sun, 25 Oct 2020 14:12:31 +0800 Subject: [PATCH 2/6] fix: some bugs --- src/api/user.js | 25 +++++++++++-------------- src/components/Cover.vue | 1 + src/components/Navbar.vue | 2 +- src/main.js | 1 - 4 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/api/user.js b/src/api/user.js index edabc43..45156e0 100644 --- a/src/api/user.js +++ b/src/api/user.js @@ -1,19 +1,5 @@ import request from "@/utils/request"; -export function login(params) { - // 必选参数 : - // phone: 手机号码 - // password: 密码 - // 可选参数 : - // countrycode: 国家码，用于国外手机号登陆，例如美国传入：1 - // md5_password: md5加密后的密码,传入后 password 将失效 - return request({ - url: "/login/cellphone", - method: "get", - params, - }); -} - export function userDetail(uid) { return request({ url: "/user/detail", @@ -44,3 +30,14 @@ export function userLikedSongsIDs(uid) { }, }); } + +export function dailySignin(type = 0) { + //可选参数 : type: 签到类型 , 默认 0, 其中 0 为安卓端签到 ,1 为 web/PC 签到 + return request({ + url: "/daily_signin", + method: "post", + params: { + type, + }, + }); +} diff --git a/src/components/Cover.vue b/src/components/Cover.vue index c074211..f821543 100644 --- a/src/components/Cover.vue +++ b/src/components/Cover.vue @@ -163,6 +163,7 @@ export default { filter: blur(16px) opacity(0.6); z-index: -1; height: 208px; + transform: scale(0.98); } .play-button { opacity: 0; diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 8f06dfc..fbdfeab 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -27,7 +27,7 @@
diff --git a/src/main.js b/src/main.js index b30c465..1974c5e 100644 --- a/src/main.js +++ b/src/main.js @@ -24,7 +24,6 @@ Vue.config.productionTip = false; initMediaSession(); if (process.env.VUE_APP_ENABLE_SENTRY === "true") { - console.log("VUE_APP_ENABLE_SENTRY"); Sentry.init({ dsn: "https://30aaa25152974f48971912a394ab6bc3@o436528.ingest.sentry.io/5477409", From 4e482941eda74b5ed8245c4a4f45cac72d5ed1a0 Mon Sep 17 00:00:00 2001 From: Hawtim Zhang Date: Sun, 25 Oct 2020 14:15:02 +0800 Subject: [PATCH 3/6] feat: update api comments with jsdoc. (#52) --- src/api/album.js | 1 + src/api/artist.js | 40 +++++++++++++++++------ src/api/auth.js | 43 ++++++++++++++++++------- src/api/mv.js | 26 +++++++++++++-- src/api/others.js | 15 +++++++++ src/api/playlist.js | 78 ++++++++++++++++++++++++++++++++++++--------- src/api/track.js | 2 +- src/api/user.js | 25 +++++++++++++-- src/utils/common.js | 2 +- 9 files changed, 189 insertions(+), 43 deletions(-) diff --git a/src/api/album.js b/src/api/album.js index 28f540b..214128e 100644 --- a/src/api/album.js +++ b/src/api/album.js @@ -18,6 +18,7 @@ export function getAlbum(id) { return data; }); } + /** * 全部新碟 * 说明 : 登录后调用此接口 ,可获取全部新碟 diff --git a/src/api/artist.js b/src/api/artist.js index 259dadf..0a5ed88 100644 --- a/src/api/artist.js +++ b/src/api/artist.js @@ -1,6 +1,11 @@ import request from "@/utils/request"; import { mapTrackPlayableStatus } from "@/utils/common"; +/** + * 获取歌手单曲 + * 说明 : 调用此接口 , 传入歌手 id, 可获得歌手部分信息和热门歌曲 + * @param {number} id - 歌手 id, 可由搜索接口获得 + */ export function getArtist(id) { return request({ url: "/artists", @@ -14,10 +19,18 @@ export function getArtist(id) { }); } +/** + * 获取歌手专辑 + * 说明 : 调用此接口 , 传入歌手 id, 可获得歌手专辑内容 + * - id: 歌手 id + * - limit: 取出数量 , 默认为 50 + * - offset: 偏移数量 , 用于分页 , 如 :( 页数 -1)*50, 其中 50 为 limit 的值 , 默认为 0 + * @param {Object} params + * @param {number} params.id + * @param {number=} params.limit + * @param {number=} params.offset + */ export function getArtistAlbum(params) { - // 必选参数 : id: 歌手 id - // 可选参数 : limit: 取出数量 , 默认为 50 - // offset: 偏移数量 , 用于分页 , 如 :( 页数 -1)*50, 其中 50 为 limit 的值 , 默认 为 0 return request({ url: "/artist/album", method: "get", @@ -25,12 +38,17 @@ export function getArtistAlbum(params) { }); } +/** + * 歌手榜 + * 说明 : 调用此接口 , 可获取排行榜中的歌手榜 + * - type : 地区 + * 1: 华语 + * 2: 欧美 + * 3: 韩国 + * 4: 日本 + * @param {number=} type + */ export function toplistOfArtists(type = null) { - // type : 地区 - // 1: 华语 - // 2: 欧美 - // 3: 韩国 - // 4: 日本 return request({ url: "/toplist/artist", method: "get", @@ -39,7 +57,11 @@ export function toplistOfArtists(type = null) { }, }); } - +/** + * 获取歌手 mv + * 说明 : 调用此接口 , 传入歌手 id, 可获得歌手 mv 信息 , 具体 mv 播放地址可调 用/mv传入此接口获得的 mvid 来拿到 , 如 : /artist/mv?id=6452,/mv?mvid=5461064 + * @param {number} id 歌手 id, 可由搜索接口获得 + */ export function artistMv(id) { return request({ url: "/artist/mv", diff --git a/src/api/auth.js b/src/api/auth.js index bffad39..461ac01 100644 --- a/src/api/auth.js +++ b/src/api/auth.js @@ -1,25 +1,35 @@ import request from "@/utils/request"; +/** + * 手机登录 + * - phone: 手机号码 + * - password: 密码 + * - countrycode: 国家码，用于国外手机号登录，例如美国传入：1 + * - md5_password: md5加密后的密码,传入后 password 将失效 + * @param {Object} params + * @param {string} params.phone + * @param {string} params.password + * @param {string=} params.countrycode + * @param {string=} params.md5_password + */ export function loginWithPhone(params) { - //必选参数 : - // phone: 手机号码 - // password: 密码 - // 可选参数 : - // countrycode: 国家码，用于国外手机号登录，例如美国传入：1 - // md5_password: md5加密后的密码,传入后 password 将失效 return request({ url: "/login/cellphone", method: "post", params, }); } - +/** + * 邮箱登录 + * - email: 163 网易邮箱 + * - password: 密码 + * - md5_password: md5加密后的密码,传入后 password 将失效 + * @param {Object} params + * @param {string} params.email + * @param {string} params.password + * @param {string=} params.md5_password + */ export function loginWithEmail(params) { - // 必选参数 : - // email: 163 网易邮箱 - // password: 密码 - // 可选参数 : - // md5_password: md5加密后的密码,传入后 password 将失效 return request({ url: "/login", method: "post", @@ -27,6 +37,11 @@ export function loginWithEmail(params) { }); } +/** + * 刷新登录 + * 说明 : 调用此接口 , 可刷新登录状态 + * - 调用例子 : /login/refresh + */ export function refreshCookie() { return request({ url: "/login/refresh", @@ -34,6 +49,10 @@ export function refreshCookie() { }); } +/** + * 退出登录 + * 说明 : 调用此接口 , 可退出登录 + */ export function logout() { return request({ url: "/logout", diff --git a/src/api/mv.js b/src/api/mv.js index b114afc..d00b095 100644 --- a/src/api/mv.js +++ b/src/api/mv.js @@ -1,5 +1,12 @@ import request from "@/utils/request"; +/** + * 获取 mv 数据 + * 说明 : 调用此接口 , 传入 mvid ( 在搜索音乐的时候传 type=1004 获得 ) , 可获取对应 MV 数据 , 数据包含 mv 名字 , 歌手 , 发布时间 , mv 视频地址等数据 , + * 其中 mv 视频 网易做了防盗链处理 , 可能不能直接播放 , 需要播放的话需要调用 ' mv 地址' 接口 + * - 调用例子 : /mv/detail?mvid=5436712 + * @param {number} mvid mv 的 id + */ export function mvDetail(mvid) { return request({ url: "/mv/detail", @@ -10,16 +17,29 @@ export function mvDetail(mvid) { }); } +/** + * mv 地址 + * 说明 : 调用此接口 , 传入 mv id,可获取 mv 播放地址 + * - id: mv id + * - r: 分辨率,默认1080,可从 /mv/detail 接口获取分辨率列表 + * - 调用例子 : /mv/url?id=5436712 /mv/url?id=10896407&r=1080 + * @param {Object} params + * @param {number} params.id + * @param {number=} params.r + */ + export function mvUrl(params) { - // 必选参数 : id: mv id - // 可选参数 : r: 分辨率,默认1080,可从 /mv/detail 接口获取分辨率列表 return request({ url: "/mv/url", method: "get", params, }); } - +/** + * 相似 mv + * 说明 : 调用此接口 , 传入 mvid 可获取相似 mv + * @param {number} mvid + */ export function simiMv(mvid) { return request({ url: "/simi/mv", diff --git a/src/api/others.js b/src/api/others.js index 0582e9e..f63423a 100644 --- a/src/api/others.js +++ b/src/api/others.js @@ -1,6 +1,21 @@ import request from "@/utils/request"; import { mapTrackPlayableStatus } from "@/utils/common"; +/** + * 搜索 + * 说明 : 调用此接口 , 传入搜索关键词可以搜索该音乐 / 专辑 / 歌手 / 歌单 / 用户 , 关键词可以多个 , 以空格隔开 , + * 如 " 周杰伦 搁浅 "( 不需要登录 ), 搜索获取的 mp3url 不能直接用 , 可通过 /song/url 接口传入歌曲 id 获取具体的播放链接 + * - keywords : 关键词 + * - limit : 返回数量 , 默认为 30 + * - offset : 偏移数量，用于分页 , 如 : 如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0 + * - type: 搜索类型；默认为 1 即单曲 , 取值意义 : 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合 + * - 调用例子 : /search?keywords=海阔天空 /cloudsearch?keywords=海阔天空(更全) + * @param {Object} params + * @param {string} params.keywords + * @param {number=} params.limit + * @param {number=} params.offset + * @param {number=} params.type + */ export function search(params) { return request({ url: "/search", diff --git a/src/api/playlist.js b/src/api/playlist.js index 584675d..d643b50 100644 --- a/src/api/playlist.js +++ b/src/api/playlist.js @@ -1,23 +1,44 @@ import request from "@/utils/request"; import { mapTrackPlayableStatus } from "@/utils/common"; +/** + * 推荐歌单 + * 说明 : 调用此接口 , 可获取推荐歌单 + * - limit: 取出数量 , 默认为 30 (不支持 offset) + * - 调用例子 : /personalized?limit=1 + * @param {Object} params + * @param {number=} params.limit + */ export function recommendPlaylist(params) { - // limit: 取出数量 , 默认为 30 return request({ url: "/personalized", method: "get", params, }); } +/** + * 获取每日推荐歌单 + * 说明 : 调用此接口 , 可获得每日推荐歌单 ( 需要登录 ) + * @param {Object} params + * @param {number=} params.limit + */ export function dailyRecommendPlaylist(params) { - // limit: 取出数量 , 默认为 30 return request({ url: "/recommend/resource", method: "get", params, }); } - +/** + * 获取歌单详情 + * 说明 : 歌单能看到歌单名字, 但看不到具体歌单内容 , 调用此接口 , 传入歌单 id, 可以获取对应歌单内的所有的音乐(未登录状态只能获取不完整的歌单,登录后是完整的)， + * 但是返回的trackIds是完整的，tracks 则是不完整的，可拿全部 trackIds 请求一次 song/detail 接口 + * 获取所有歌曲的详情 (https://github.com/Binaryify/NeteaseCloudMusicApi/issues/452) + * - id : 歌单 id + * - s : 歌单最近的 s 个收藏者, 默认为8 + * @param {number} id + * @param {boolean=} noCache + */ export function getPlaylistDetail(id, noCache = false) { let params = { id }; if (noCache) params.timestamp = new Date().getTime(); @@ -30,11 +51,18 @@ export function getPlaylistDetail(id, noCache = false) { return data; }); } - +/** + * 获取精品歌单 + * 说明 : 调用此接口 , 可获取精品歌单 + * - cat: tag, 比如 " 华语 "、" 古风 " 、" 欧美 "、" 流行 ", 默认为 "全部", 可从精品歌单标签列表接口获取(/playlist/highquality/tags) + * - limit: 取出歌单数量 , 默认为 20 + * - before: 分页参数,取上一页最后一个歌单的 updateTime 获取下一页数据 + * @param {Object} params + * @param {string} params.cat + * @param {number=} params.limit + * @param {number} params.before + */ export function highQualityPlaylist(params) { - // 可选参数: cat: tag, 比如 " 华语 "、" 古风 " 、" 欧美 "、" 流行 ", 默认为 "全部", 可从精品歌单标签列表接口获取(/playlist/highquality / tags) - // limit: 取出歌单数量 , 默认为 20 - // before: 分页参数,取上一页最后一个歌单的 updateTime 获取下一页数据 return request({ url: "/top/playlist/highquality", method: "get", @@ -42,11 +70,18 @@ export function highQualityPlaylist(params) { }); } +/** + * 歌单 ( 网友精选碟 ) + * 说明 : 调用此接口 , 可获取网友精选碟歌单 + * - order: 可选值为 'new' 和 'hot', 分别对应最新和最热 , 默认为 'hot' + * - cat: tag, 比如 " 华语 "、" 古风 " 、" 欧美 "、" 流行 ", 默认为 "全部",可从歌单分类接口获取(/playlist/catlist) + * - limit: 取出歌单数量 , 默认为 50 + * @param {Object} params + * @param {string} params.order + * @param {string} params.cat + * @param {number=} params.limit + */ export function topPlaylist(params) { - // 可选参数 : order: 可选值为 'new' 和 'hot', 分别对应最新和最热 , 默认为 'hot' - // cat:cat: tag, 比如 " 华语 "、" 古风 " 、" 欧美 "、" 流行 ", 默认为 "全部",可从歌单分类接口获取(/playlist/catlist) - // limit: 取出歌单数量 , 默认为 50 - // offset: 偏移数量 , 用于分页 , 如 :( 评论页数 -1)*50, 其中 50 为 limit 的值 return request({ url: "/top/playlist", method: "get", @@ -54,23 +89,36 @@ export function topPlaylist(params) { }); } +/** + * 歌单分类 + * 说明 : 调用此接口,可获取歌单分类,包含 category 信息 + */ export function playlistCatlist() { return request({ url: "/playlist/catlist", method: "get", }); } - +/** + * 所有榜单 + * 说明 : 调用此接口,可获取所有榜单 接口地址 : /toplist + */ export function toplists() { return request({ url: "/toplist", method: "get", }); } - +/** + * 收藏/取消收藏歌单 + * 说明 : 调用此接口, 传入类型和歌单 id 可收藏歌单或者取消收藏歌单 + * - t : 类型,1:收藏,2:取消收藏 + * - id : 歌单 id + * @param {Object} params + * @param {number} params.t + * @param {number} params.id + */ export function subscribePlaylist(params) { - // 必选参数 : - // t : 类型,1:收藏,2:取消收藏 id : 歌单 id return request({ url: "/playlist/subscribe", method: "get", diff --git a/src/api/track.js b/src/api/track.js index 1b50eea..11876c7 100644 --- a/src/api/track.js +++ b/src/api/track.js @@ -94,7 +94,7 @@ export function likeATrack(params) { * @param {Object} params * @param {number} params.id * @param {number} params.sourceid - * @param {number=} [params.time] + * @param {number=} params.time */ export function scrobble(params) { params.timestamp = new Date().getTime(); diff --git a/src/api/user.js b/src/api/user.js index 45156e0..dbb3a05 100644 --- a/src/api/user.js +++ b/src/api/user.js @@ -1,5 +1,11 @@ import request from "@/utils/request"; +/** + * 获取用户详情 + * 说明 : 登录后调用此接口 , 传入用户 id, 可以获取用户详情 + * - uid : 用户 id + * @param {number} uid + */ export function userDetail(uid) { return request({ url: "/user/detail", @@ -10,9 +16,18 @@ export function userDetail(uid) { }); } +/** + * 获取用户歌单 + * 说明 : 登录后调用此接口 , 传入用户 id, 可以获取用户歌单 + * - uid : 用户 id + * - limit : 返回数量 , 默认为 30 + * - offset : 偏移数量，用于分页 , 如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0 + * @param {Object} params + * @param {number} params.uid + * @param {number} params.limit + * @param {number=} params.offset + */ export function userPlaylist(params) { - // limit : 返回数量 , 默认为 30 - // offset : 偏移数量，用于分页 , 如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0 return request({ url: "/user/playlist", method: "get", @@ -20,6 +35,12 @@ export function userPlaylist(params) { }); } +/** + * 喜欢音乐列表 + * 说明 : 调用此接口 , 传入用户 id, 可获取已喜欢音乐id列表(id数组) + * - uid: 用户 id + * @param {number} uid + */ export function userLikedSongsIDs(uid) { return request({ url: "/likelist", diff --git a/src/utils/common.js b/src/utils/common.js index 4f76fd8..6e75f54 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -64,7 +64,7 @@ export function shuffleAList(list) { export function throttle(fn, time) { let isRun = false; - return function() { + return function () { if (isRun) return; isRun = true; fn.apply(this, arguments); From b655c59761dc44f8d84c328c0cccdc6c08107f1f Mon Sep 17 00:00:00 2001 From: qier222 <68148142+qier222@users.noreply.github.com> Date: Sun, 25 Oct 2020 21:04:33 +0800 Subject: [PATCH 4/6] feat: dark mode support (#53) --- src/App.vue | 28 +++++++++++- src/assets/css/slider.css | 5 ++- src/components/ButtonIcon.vue | 4 +- src/components/ButtonTwoTone.vue | 8 ++-- src/components/CoverRow.vue | 13 +++--- src/components/MvRow.vue | 5 ++- src/components/Navbar.vue | 25 +++++++---- src/components/Player.vue | 11 +++-- src/components/TrackListItem.vue | 48 ++++++++++++--------- src/locale/lang/en.js | 6 +++ src/locale/lang/zh-CN.js | 13 +++--- src/store/index.js | 20 +++++++++ src/store/initState.js | 3 ++ src/store/state.js | 4 +- src/views/album.vue | 27 +++++++----- src/views/artist.vue | 21 +++++---- src/views/explore.vue | 14 +++--- src/views/home.vue | 35 ++------------- src/views/library.vue | 21 ++++----- src/views/loginAccount.vue | 34 ++++++++------- src/views/loginUsername.vue | 22 +++++----- src/views/mv.vue | 8 ++-- src/views/next.vue | 3 +- src/views/playlist.vue | 19 +++++--- src/views/search.vue | 11 +++-- src/views/settings.vue | 74 ++++++++++++++++++++++++++------ 26 files changed, 301 insertions(+), 181 deletions(-) diff --git a/src/App.vue b/src/App.vue index 8d1f41f..f177602 100644 --- a/src/App.vue +++ b/src/App.vue @@ -50,11 +50,36 @@ export default { diff --git a/src/components/Player.vue b/src/components/Player.vue index 53c84fe..5311eda 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -294,7 +294,8 @@ export default { justify-content: space-around; height: 64px; backdrop-filter: saturate(180%) blur(30px); - background-color: rgba(255, 255, 255, 0.86); + // background-color: rgba(255, 255, 255, 0.86); + background-color: var(--color-navbar-bg); z-index: 100; } @@ -334,7 +335,8 @@ export default { .name { font-weight: 600; font-size: 16px; - color: rgba(0, 0, 0, 0.88); + opacity: 0.88; + color: var(--color-text); margin-bottom: 4px; cursor: pointer; display: -webkit-box; @@ -348,7 +350,8 @@ export default { } .artist { font-size: 12px; - color: rgba(0, 0, 0, 0.58); + opacity: 0.58; + color: var(--color-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; @@ -394,7 +397,7 @@ export default { } } .active .svg-icon { - color: #335eea; + color: var(--color-primary); } .volume-control { margin-left: 4px; diff --git a/src/components/TrackListItem.vue b/src/components/TrackListItem.vue index ab44583..1513541 100644 --- a/src/components/TrackListItem.vue +++ b/src/components/TrackListItem.vue @@ -159,7 +159,7 @@ button { .svg-icon { height: 16px; width: 16px; - color: #335eea; + color: var(--color-primary); } &:active { transform: scale(0.92); @@ -180,12 +180,16 @@ button { border-radius: 8px; margin: 0 20px 0 10px; width: 12px; - color: rgba(0, 0, 0, 0.58); + color: var(--color-text); cursor: default; + span { + opacity: 0.58; + } } .explicit-symbol { - color: rgba(0, 0, 0, 0.28); + opacity: 0.28; + color: var(--color-text); .svg-icon { margin-bottom: -3px; } @@ -221,7 +225,7 @@ button { .title { font-size: 18px; font-weight: 600; - color: rgba(0, 0, 0, 0.88); + color: var(--color-text); cursor: default; padding-right: 16px; display: -webkit-box; @@ -233,13 +237,14 @@ button { margin-right: 2px; font-weight: 500; font-size: 14px; - color: rgba(0, 0, 0, 0.72); + opacity: 0.72; } } .artist { margin-top: 2px; font-size: 13px; - color: rgba(0, 0, 0, 0.68); + opacity: 0.68; + color: var(--color-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; @@ -247,7 +252,7 @@ button { a { span { margin-right: 3px; - color: rgba(0, 0, 0, 0.8); + opacity: 0.8; } &:hover { text-decoration: underline; @@ -260,7 +265,8 @@ button { flex: 1; display: flex; font-size: 16px; - color: rgba(0, 0, 0, 0.88); + opacity: 0.88; + color: var(--color-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; @@ -274,10 +280,12 @@ button { justify-content: flex-end; margin-right: 10px; font-variant-numeric: tabular-nums; + opacity: 0.88; + color: var(--color-text); } &:hover { transition: all 0.3s; - background: #f5f5f7; + background: var(--color-secondary-bg); } } .track.disable { @@ -290,7 +298,7 @@ button { .time, .no, .featured { - color: rgba(0, 0, 0, 0.28) !important; + opacity: 0.28 !important; } &:hover { background: none; @@ -325,24 +333,22 @@ button { } .track.playing { - background: #eaeffd; - color: #335eea; + background: var(--color-primary-bg); + color: var(--color-primary); .title, - .album { - color: #335eea; + .album, + .time { + color: var(--color-primary); } .title .featured, - .artist { - color: #335eea; + .artist, + .explicit-symbol { + color: var(--color-primary); opacity: 0.88; } .no span { - color: #335eea; + color: var(--color-primary); opacity: 0.78; } - .explicit-symbol { - color: #335eea; - opacity: 0.88; - } } diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js index 051e7b3..f43b6a1 100644 --- a/src/locale/lang/en.js +++ b/src/locale/lang/en.js @@ -108,5 +108,11 @@ export default { high: "High", lossless: "Lossless", }, + appearance: { + text: "Appearance", + auto: "Auto", + light: "Light", + dark: "Dark", + }, }, }; diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js index d14746d..2dd4dad 100644 --- a/src/locale/lang/zh-CN.js +++ b/src/locale/lang/zh-CN.js @@ -6,9 +6,6 @@ export default { library: "资料库", search: "搜索", }, - footer: { - settings: "设置", - }, home: { recommendPlaylist: "推荐歌单", recommendArtist: "推荐歌手", @@ -34,7 +31,7 @@ export default { albums: "专辑", withAlbums: "张专辑", artist: "歌手", - videos: "个视频", + videos: "个MV", }, album: { released: "发行于", @@ -103,7 +100,7 @@ export default { songs: "首歌", }, settings: { - settings: "选项", + settings: "设置", logout: "登出", language: "语言", musicQuality: { @@ -113,5 +110,11 @@ export default { high: "极高", lossless: "无损", }, + appearance: { + text: "外观", + auto: "自动", + light: "浅色", + dark: "深色", + }, }, }; diff --git a/src/store/index.js b/src/store/index.js index f69ef0a..6b29733 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -45,4 +45,24 @@ if ([undefined, null].includes(store.state.settings.lang)) { localStorage.setItem("settings", JSON.stringify(store.state.settings)); } +if ( + store.state.settings.appearance !== "auto" && + store.state.settings.appearance !== undefined +) { + document.body.setAttribute("data-theme", store.state.settings.appearance); +} else { + document.body.setAttribute( + "data-theme", + window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" + ); +} +window + .matchMedia("(prefers-color-scheme: dark)") + .addEventListener("change", (e) => { + if (store.state.settings.appearance === "auto") { + store.commit("updateTmpAppearance", e.matches ? "dark" : "light"); + document.body.setAttribute("data-theme", e.matches ? "dark" : "light"); + } + }); + export default store; diff --git a/src/store/initState.js b/src/store/initState.js index 1ed6568..9f0c01f 100644 --- a/src/store/initState.js +++ b/src/store/initState.js @@ -1,5 +1,7 @@ const initState = { howler: null, + accountLogin: false, + usernameLogin: false, liked: { songs: [], }, @@ -85,6 +87,7 @@ const initState = { id: 0, }, lang: null, + appearance: "auto", musicQuality: 320000, showGithubIcon: true, showPlaylistsByAppleMusic: true, diff --git a/src/store/state.js b/src/store/state.js index 925e46f..8a5d99e 100644 --- a/src/store/state.js +++ b/src/store/state.js @@ -1,5 +1,7 @@ export default { howler: null, + accountLogin: false, + usernameLogin: false, liked: { songs: [], }, @@ -9,6 +11,4 @@ export default { }, player: JSON.parse(localStorage.getItem("player")), settings: JSON.parse(localStorage.getItem("settings")), - accountLogin: false, - usernameLogin: false, }; diff --git a/src/views/album.vue b/src/views/album.vue index 9cbb66b..5c3f409 100644 --- a/src/views/album.vue +++ b/src/views/album.vue @@ -200,6 +200,7 @@ export default { justify-content: center; flex: 1; margin-left: 56px; + color: var(--color-text); .title { font-size: 56px; font-weight: 700; @@ -208,7 +209,7 @@ export default { } .artist { font-size: 18px; - color: rgba(0, 0, 0, 0.88); + opacity: 0.88; margin-top: 24px; a { font-weight: 600; @@ -216,13 +217,13 @@ export default { } .date-and-count { font-size: 14px; - color: rgba(0, 0, 0, 0.68); + opacity: 0.68; margin-top: 2px; } .description { user-select: none; font-size: 14px; - color: rgba(0, 0, 0, 0.68); + opacity: 0.68; margin-top: 24px; display: -webkit-box; -webkit-box-orient: vertical; @@ -230,8 +231,8 @@ export default { overflow: hidden; cursor: pointer; &:hover { - transition: color 0.3s; - color: rgba(0, 0, 0, 0.88); + transition: opacity 0.3s; + opacity: 0.88; } } } @@ -281,7 +282,8 @@ export default { } .explicit-symbol { - color: rgba(0, 0, 0, 0.28); + opacity: 0.28; + color: var(--color-text); margin-right: 4px; .svg-icon { margin-bottom: -3px; @@ -292,22 +294,25 @@ export default { margin-top: 36px; margin-bottom: 36px; font-size: 12px; - color: rgba(0, 0, 0, 0.48); + opacity: 0.48; + color: var(--color-text); div { - margin-bottom: 8px; + margin-bottom: 4px; } .album-time { - color: rgba(0, 0, 0, 0.68); + opacity: 0.68; } } .more-by { - border-top: 1px solid rgba(0, 0, 0, 0.08); + border-top: 1px solid rgba(128, 128, 128, 0.18); + padding-top: 22px; .section-title { font-size: 22px; font-weight: 600; - color: rgba(0, 0, 0, 0.88); + opacity: 0.88; + color: var(--color-text); margin-bottom: 8px; } } diff --git a/src/views/artist.vue b/src/views/artist.vue index 71e0cdc..481799b 100644 --- a/src/views/artist.vue +++ b/src/views/artist.vue @@ -195,6 +195,7 @@ export default { display: flex; align-items: center; margin-bottom: 72px; + color: var(--color-text); img { height: 192px; width: 192px; @@ -209,13 +210,13 @@ export default { .artist { font-size: 18px; - color: rgba(0, 0, 0, 0.88); + opacity: 0.88; margin-top: 24px; } .statistics { font-size: 14px; - color: rgba(0, 0, 0, 0.68); + opacity: 0.68; margin-top: 2px; } @@ -234,12 +235,14 @@ export default { .section-title { font-weight: 600; font-size: 22px; - color: rgba(0, 0, 0, 0.88); + opacity: 0.88; + color: var(--color-text); margin-bottom: 16px; margin-top: 46px; } .latest-release { + color: var(--color-text); .release { display: flex; } @@ -258,17 +261,16 @@ export default { .name { font-size: 18px; font-weight: 600; - color: rgba(0, 0, 0, 0.88); margin-bottom: 8px; } .date { font-size: 14px; - color: rgba(0, 0, 0, 0.78); + opacity: 0.78; } .type { margin-top: 2px; font-size: 12px; - color: rgba(0, 0, 0, 0.68); + opacity: 0.68; } } @@ -281,11 +283,12 @@ export default { margin-top: 8px; border-radius: 6px; font-size: 12px; - color: rgba(0, 0, 0, 0.78); + opacity: 0.78; + color: var(--color-secondary); font-weight: 600; &:hover { - background: #f5f5f7; - color: rgba(0, 0, 0, 0.96); + opacity: 1; + // background: var(--color-primary-bg); } } } diff --git a/src/views/explore.vue b/src/views/explore.vue index b73b5e5..8ed611c 100644 --- a/src/views/explore.vue +++ b/src/views/explore.vue @@ -161,6 +161,7 @@ export default { diff --git a/src/views/mv.vue b/src/views/mv.vue index 48bdd16..ffd3e55 100644 --- a/src/views/mv.vue +++ b/src/views/mv.vue @@ -127,19 +127,20 @@ export default { .video-info { margin-top: 12px; + color: var(--color-text); .title { font-size: 24px; font-weight: 600; } .artist { font-size: 14px; - color: rgba(0, 0, 0, 0.88); + opacity: 0.88; margin-top: 2px; font-weight: 600; } .info { font-size: 12px; - color: rgba(0, 0, 0, 0.68); + opacity: 0.68; margin-top: 12px; } } @@ -149,7 +150,8 @@ export default { .section-title { font-size: 18px; font-weight: 600; - color: rgba(0, 0, 0, 0.88); + color: var(--color-text); + opacity: 0.88; } } diff --git a/src/views/next.vue b/src/views/next.vue index df5cb2b..bde1b10 100644 --- a/src/views/next.vue +++ b/src/views/next.vue @@ -41,7 +41,7 @@ export default { }, sortedTracks() { function compare(property) { - return function (obj1, obj2) { + return function(obj1, obj2) { var value1 = obj1[property]; var value2 = obj2[property]; return value1 - value2; @@ -106,5 +106,6 @@ h1 { margin-top: 36px; margin-bottom: 18px; cursor: default; + color: var(--color-text); } diff --git a/src/views/playlist.vue b/src/views/playlist.vue index f7a6e59..5f8c02a 100644 --- a/src/views/playlist.vue +++ b/src/views/playlist.vue @@ -27,7 +27,9 @@ > {{ playlist.creator.nickname }} @@ -226,20 +228,24 @@ export default { .title { font-size: 36px; font-weight: 700; + color: var(--color-text); } .artist { font-size: 18px; - color: rgba(0, 0, 0, 0.88); + opacity: 0.88; + color: var(--color-text); margin-top: 24px; } .date-and-count { font-size: 14px; - color: rgba(0, 0, 0, 0.68); + opacity: 0.68; + color: var(--color-text); margin-top: 2px; } .description { font-size: 14px; - color: rgba(0, 0, 0, 0.68); + opacity: 0.68; + color: var(--color-text); margin-top: 24px; display: -webkit-box; -webkit-box-orient: vertical; @@ -247,8 +253,8 @@ export default { overflow: hidden; cursor: pointer; &:hover { - transition: color 0.3s; - color: rgba(0, 0, 0, 0.88); + transition: opacity 0.3s; + opacity: 0.88; } } .buttons { @@ -299,6 +305,7 @@ export default { .user-info { h1 { font-size: 42px; + color: var(--color-text); .avatar { height: 44px; margin-right: 12px; diff --git a/src/views/search.vue b/src/views/search.vue index b08f5cc..ece7683 100644 --- a/src/views/search.vue +++ b/src/views/search.vue @@ -192,15 +192,17 @@ export default { h1 { margin-top: -10px; margin-bottom: 0; + color: var(--color-text); span { - color: rgba(0, 0, 0, 0.58); + opacity: 0.58; } } .section-title { font-weight: 600; font-size: 22px; - color: rgba(0, 0, 0, 0.88); + opacity: 0.88; + color: var(--color-text); margin-bottom: 16px; margin-top: 46px; } @@ -219,6 +221,7 @@ h1 { padding-right: 48px; font-size: 16px; font-weight: 600; + color: var(--color-text); .artist { display: flex; align-items: center; @@ -236,6 +239,7 @@ h1 { .albums-list { display: flex; + color: var(--color-text); .album { img { height: 128px; @@ -249,7 +253,6 @@ h1 { .name { margin-top: 6px; font-weight: 600; - color: rgba(0, 0, 0, 0.88); font-size: 14px; width: 128px; display: -webkit-box; @@ -259,7 +262,7 @@ h1 { } .artist { font-size: 12px; - color: rgba(0, 0, 0, 0.68); + opacity: 0.68; } } } diff --git a/src/views/settings.vue b/src/views/settings.vue index 26efefd..60df284 100644 --- a/src/views/settings.vue +++ b/src/views/settings.vue @@ -11,9 +11,10 @@ >黑胶VIP + /> + 黑胶VIP - {{ settings.user.signature }} + {{ settings.user.signature }}
@@ -36,6 +37,22 @@ +
+
+
{{ $t("settings.appearance.text") }}
+
+
+ +
+
{{ $t("settings.musicQuality.text") }}
@@ -109,8 +126,31 @@ export default { this.$store.commit("changeLang", lang); }, }, + appearance: { + get() { + if (this.settings.appearance === undefined) return "auto"; + return this.settings.appearance; + }, + set(value) { + this.$store.commit("updateSettings", { + key: "appearance", + value, + }); + if (value === "auto") { + document.body.setAttribute( + "data-theme", + window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light" + ); + } else { + document.body.setAttribute("data-theme", value); + } + }, + }, musicQuality: { get() { + if (this.settings.appearance === undefined) return 320000; return this.settings.musicQuality; }, set(value) { @@ -163,13 +203,15 @@ export default { h2 { margin-top: 48px; font-size: 36px; + color: var(--color-text); } .user { display: flex; align-items: center; justify-content: space-between; - background: #f5f5f7; + background: var(--color-secondary-bg); + color: var(--color-text); padding: 16px 20px; border-radius: 16px; img.avatar { @@ -190,12 +232,13 @@ h2 { .nickname { font-size: 20px; font-weight: 600; - color: rgba(0, 0, 0, 0.88); margin-bottom: 2px; } .extra-info { font-size: 13px; - color: rgba(0, 0, 0, 0.68); + .text { + opacity: 0.68; + } .vip { display: flex; align-items: center; @@ -216,17 +259,20 @@ h2 { text-decoration: none; border-radius: 10px; padding: 8px 12px; - color: rgba(0, 0, 0, 0.68); + opacity: 0.68; + color: var(--color-text); transition: 0.2s; margin: { right: 12px; left: 12px; } &:hover { + opacity: 1; background: #eaeffd; color: #335eea; } &:active { + opacity: 1; transform: scale(0.92); transition: 0.2s; } @@ -239,11 +285,12 @@ h2 { display: flex; align-items: center; justify-content: space-between; + color: var(--color-text); .title { font-size: 18px; font-weight: 600; - color: rgba(0, 0, 0, 0.88); + opacity: 0.88; } select { @@ -252,13 +299,13 @@ h2 { border: none; padding: 8px 12px 8px 12px; border-radius: 8px; - color: rgba(0, 0, 0, 0.88); - background: #f5f5f7; + color: var(--color-text); + background: var(--color-secondary-bg); appearance: none; &:focus { outline: none; - color: #335eea; - background: #eaeffd; + color: var(--color-primary); + background: var(--color-primary-bg); } } } @@ -275,7 +322,6 @@ h2 { } .toggle { margin: auto; - background: white; } .toggle input { opacity: 0; @@ -292,7 +338,7 @@ h2 { transition: 0.4s ease; height: 32px; width: 68px; - background: #f5f5f7; + background: var(--color-secondary-bg); border-radius: 8px; } .toggle input + label:before { @@ -323,7 +369,7 @@ h2 { border-radius: 6px; } .toggle input:checked + label:before { - background: #335eea; + background: var(--color-primary); -webkit-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1); transition: width 0.2s cubic-bezier(0, 0, 0, 0.1); } From c448230c141609bd290859e43678502751f58172 Mon Sep 17 00:00:00 2001 From: qier222 <68148142+qier222@users.noreply.github.com> Date: Sun, 25 Oct 2020 21:55:20 +0800 Subject: [PATCH 5/6] feat: dynamic PWA theme color --- src/store/index.js | 18 ++++-------------- src/utils/common.js | 12 ++++++++++++ src/views/settings.vue | 13 +++---------- 3 files changed, 19 insertions(+), 24 deletions(-) diff --git a/src/store/index.js b/src/store/index.js index 6b29733..5b10180 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -5,6 +5,7 @@ import mutations from "./mutations"; import actions from "./actions"; import initState from "./initState"; import { Howl, Howler } from "howler"; +import { changeAppearance } from "@/utils/common"; if (localStorage.getItem("appVersion") === null) { localStorage.setItem("player", JSON.stringify(initState.player)); @@ -45,23 +46,12 @@ if ([undefined, null].includes(store.state.settings.lang)) { localStorage.setItem("settings", JSON.stringify(store.state.settings)); } -if ( - store.state.settings.appearance !== "auto" && - store.state.settings.appearance !== undefined -) { - document.body.setAttribute("data-theme", store.state.settings.appearance); -} else { - document.body.setAttribute( - "data-theme", - window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" - ); -} +changeAppearance(store.state.settings.appearance); window .matchMedia("(prefers-color-scheme: dark)") - .addEventListener("change", (e) => { + .addEventListener("change", () => { if (store.state.settings.appearance === "auto") { - store.commit("updateTmpAppearance", e.matches ? "dark" : "light"); - document.body.setAttribute("data-theme", e.matches ? "dark" : "light"); + changeAppearance(store.state.settings.appearance); } }); diff --git a/src/utils/common.js b/src/utils/common.js index 6e75f54..3663147 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -95,3 +95,15 @@ export function dailyTask() { dailySignin(1); } } + +export function changeAppearance(appearance) { + if (appearance === "auto" || appearance === undefined) { + appearance = window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light"; + } + document.body.setAttribute("data-theme", appearance); + document + .querySelector('meta[name="theme-color"]') + .setAttribute("content", appearance === "dark" ? "#222" : "#fff"); +} diff --git a/src/views/settings.vue b/src/views/settings.vue index 60df284..54517e8 100644 --- a/src/views/settings.vue +++ b/src/views/settings.vue @@ -113,6 +113,8 @@