feat: initialize the mobile platform

radishes-music · Jan 4, 2021 · 4cf6b11 · 4cf6b11
1 parent b9ab021
commit 4cf6b11
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -59,20 +59,23 @@ npx lerna bootstrap
 
 | 功能                                                            | browser | electron | mobile |
 | :-------------------------------------------------------------- | :-----: | :------: | :----: |
-| 登录支持，邮箱、手机号                                          |    √    |    √     |        |
-| 歌手搜索、专辑列表                                              |    √    |   √      |        |
-| 排行榜（歌单、歌手）                                            |    √     |    √      |        |
+| 登录和注册（邮箱暂不支持注册）                                    |    √    |    √     |        |
+| 每日推荐歌单和歌曲                                               |    √    |    √     |        |
+| 每日轮播图以及新歌播放、查看歌单详情                               |    √    |    √     |        |
+| 歌单搜索、查看、收藏、下载                                        |    √    |    √     |        |
+| 歌曲排行榜以及排行榜的分类支持                                     |    √    |    √     |        |
+| 支持查看歌手专辑、详情、相似歌手以及歌手按地区等方式过滤             |    √    |    √     |        |
+| 歌曲播放、暂停、歌词(横向、纵向)、音量 MediaSession(windows 10)   |    √    |    √     |        |
+| 浮动歌词支持（在PC上为一个子窗口），歌词进度显示                   |    √    |    √     |        |
+| 支持设置播放源（QQ、酷狗等）、下载品质和下载位置修改                |    √    |    √     |        |
+| 支持搜索歌手、专辑、歌单和单曲                                     |    √    |    √     |        |
+| 本地音乐支持（支持拖放播放歌曲、歌曲标签ID3v2显示）                 |    √    |    √     |        |
+| 缓存本地所有状态（比如当前播放歌曲、进度、主题颜色、大小等）         |    √    |    √     |        |
 | 朋友动态查看、点赞等                                            |         |          |        |
-| 下载管理                                                        |   √      |    √      |        |
 | 音乐云盘                                                        |         |          |        |
 | 视频播放、收藏                                                  |         |          |        |
-| 歌单列表、全部播放、收藏、添加待播放队列                        |     √    |     √     |        |
-| 推荐歌单、推荐歌曲、热搜榜                                      |         |          |        |
 | 通知(已登录)                                                    |    ×    |          |   ×    |
-| 本地音乐                                                        |    ×    |          |   ×    |
 | 音效(待定)                                                      |    ×    |          |   ×    |
-| 搜索 - 支持歌曲播放                                             |    √    |    √     |        |
-| 歌曲播放、暂停、歌词(横向、纵向)、音量 MediaSession(windows 10) |    √    |    √     |        |
 | ...                                                             |         |          |        |
 
 ### Git 提交规范

diff --git a/src/layout/container.tsx b/src/layout/container.tsx
@@ -95,7 +95,8 @@ export const Container = defineComponent({
             'container-' + VUE_APP_PLATFORM + '-' + screenSize.value
           ],
           {
-            'container-draging': draging.value
+            'container-draging': draging.value,
+            'container-mobile': window.isMobile
           }
         )}
       >

diff --git a/src/main.ts b/src/main.ts
@@ -1 +1,7 @@
+import { isMobile } from '@/utils/index'
+
+if (window) {
+  window.isMobile = isMobile()
+}
+
 import './app/index'
diff --git a/src/types.d.ts b/src/types.d.ts
@@ -9,3 +9,9 @@ declare module '@vue/runtime-core' {
 }
 
 declare module '*.png'
+
+declare global {
+  interface Window {
+    isMobile: boolean
+  }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -22,6 +22,13 @@ export const isNumber = (n: unknown) => {
   return Object.prototype.toString.call(n) === '[object Number]'
 }
 
+export const isMobile = () => {
+  const regexp = /Android|webOS|iPhone|iPod|BlackBerry|iPad/i
+  return Boolean(
+    navigator && navigator.userAgent && regexp.test(navigator.userAgent)
+  )
+}
+
 export const formatTime = (time: number, unit: OpUnitType): string => {
   return dayjs
     .utc(new Date(0))