diff --git a/README.md b/README.md index a8fa474..2d6782a 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,8 @@ - 🖥️ 支持 PWA，可在 Chrome/Edge 里点击地址栏右边的 ➕ 安装到电脑 - 🙉 支持显示歌曲和专辑的 Explicit 标志 - 📺 MV 播放 +- ✔️ 每日自动签到（手机端和电脑端同时签到） +- 🌚 Light/Dark Mode 自动切换 - 🚫🤝 无任何社交功能 - 🛠 更多特性开发中 @@ -60,14 +62,9 @@ npm run build ## ☑️ Todo -- 中文支持 -- Dark Mode -- 歌词 -- 私人 FM -- 播放记录 -- 无限播放模式（播放完列表后自动播放相似歌曲） +查看 Todo 请访问本项目的 [Projects](https://github.com/qier222/YesPlayMusic/projects/1) -欢迎提 issue 和 pull request。 +欢迎提 Issue 和 Pull request。 ## 📜 开源许可 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/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", diff --git a/src/store/index.js b/src/store/index.js index f69ef0a..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,4 +46,13 @@ if ([undefined, null].includes(store.state.settings.lang)) { localStorage.setItem("settings", JSON.stringify(store.state.settings)); } +changeAppearance(store.state.settings.appearance); +window + .matchMedia("(prefers-color-scheme: dark)") + .addEventListener("change", () => { + if (store.state.settings.appearance === "auto") { + changeAppearance(store.state.settings.appearance); + } + }); + 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/utils/common.js b/src/utils/common.js index 3ce005b..3663147 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,19 @@ export function dailyTask() { value: dayjs().date(), }); refreshCookie(); + dailySignin(0); + 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/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..54517e8 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") }}
@@ -96,6 +113,8 @@