feat: 页面布局改版

miniprogram/app.wxss

@@ -8,9 +8,14 @@ page {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  background-image: linear-gradient(to bottom, #f3f4f6, white);
+  @apply text-gray-900 dark:text-white;
 }
 
 @media (prefers-color-scheme: dark) {
+  page {
+    background-image: linear-gradient(to bottom, #111827, black);
+  }
   .invert-icon {
     filter: invert(1);
   }

miniprogram/components/search-bar/search-bar.wxml

@@ -1,5 +1,5 @@
 <view class="flex items-center">
-  <input class="flex-1 h-8 leading-8 px-2 bg-[#f3f3f3] dark:bg-[#2c2c2c] rounded-2xl text-sm" value="{{value}}" placeholder="{{placeholder}}" placeholder-style="font-size: 14px;" bind:focus="handleFocus" bind:blur="handleBlur" bind:confirm="handleConfirm" bind:input="handleInput"></input>
-  <button wx:if="{{focus && value}}" size="mini" class="ml-2" bind:tap="handleSearch">{{btnText}}</button>
+  <input class="flex-1 h-8 leading-8 px-2 bg-white dark:bg-gray-800/20 rounded-lg border border-solid border-gray-200 dark:border-gray-700 text-sm" value="{{value}}" placeholder="{{placeholder}}" placeholder-style="font-size: 14px;" bind:focus="handleFocus" bind:blur="handleBlur" bind:confirm="handleConfirm" bind:input="handleInput"></input>
+  <button wx:if="{{focus && value}}" size="mini" class="ml-2 bg-white dark:bg-gray-800/40" bind:tap="handleSearch">{{btnText}}</button>
   <slot></slot>
 </view>

miniprogram/components/xiao-cell/xiao-cell.ts

@@ -7,9 +7,5 @@ Component({
       type: String,
       value: '',
     },
-    borderless: {
-      type: Boolean,
-      value: false,
-    },
   },
 });

miniprogram/components/xiao-cell/xiao-cell.wxml

@@ -1,3 +1,3 @@
-<view class="flex items-center py-4 {{extClass}} {{borderless ? '' : 'border-0 border-t border-solid border-gray-100 dark:border-neutral-800 border-opacity-80'}}">
+<view class="flex items-center px-2.5 py-3 rounded-md bg-white dark:bg-gray-800/20 mt-2 {{extClass}}">
 	<slot></slot>
 </view>

miniprogram/pages/index/index.ts

@@ -10,15 +10,23 @@ import { ComponentWithStore } from 'mobx-miniprogram-bindings';
 interface Item {
   name: string;
   count: number;
+  icon?: string;
 }
 
 let list: Item[] = [];
 const pageSize = 40;
 
+const playlistIconMap: Record<string, string> = {
+  所有歌曲: 'suoyougequ',
+  最近新增: 'zuijinxinzeng',
+  收藏: 'shoucanggedan',
+};
+
 ComponentWithStore({
   data: {
     connected: true,
     list: [] as Item[],
+    playlists: [] as Item[],
     error: null as null | string,
     filterValue: '',
   },
@@ -57,26 +65,31 @@ ComponentWithStore({
         if (res.statusCode !== 200) {
           return;
         }
+        const playlists: Item[] = [];
         list = Object.entries(res.data)
           .map(([name, items]) => ({
             name,
             count: items.length,
           }))
           .filter(({ name, count }) => {
+            if (['所有歌曲', '收藏', '最近新增'].includes(name)) {
+              if (count) {
+                const icon = playlistIconMap[name] || 'zhuanji';
+                playlists.push({ name, count, icon });
+              }
+              return false;
+            }
             return (
               count && !['全部', '临时搜索列表', '所有电台'].includes(name)
             );
-          })
-          .sort((a, b) => {
-            if (a.name === '所有歌曲') return -1;
-            return a.name === '收藏' && b.name !== '所有歌曲' ? -1 : 1;
           });
         const { filterValue } = this.data;
         const filteredList = filterValue
           ? list.filter((item) => item.name.includes(filterValue))
           : list;
         this.setData({
           connected: true,
+          playlists,
           list: filteredList.slice(0, pageSize),
         });
         store.favorite.setMusics(res.data['收藏']);
@@ -241,5 +254,11 @@ ComponentWithStore({
       store.player.playMusic(e.detail.value, '');
       this.handleFilter({ detail: { value: '' } });
     },
+    handleCreateList() {
+      wx.showToast({
+        title: '即将支持',
+        icon: 'none',
+      });
+    },
   },
 });

miniprogram/pages/index/index.wxml

@@ -12,7 +12,7 @@
   <template is="setting" />
 </navigation-bar>
 
-<scroll-view id="scrollview" class="flex-1 overflow-y-hidden px-4 box-border" scroll-y refresher-enabled
+<scroll-view id="scrollview" class="flex-1 overflow-y-hidden px-3 box-border" scroll-y refresher-enabled
   bind:scrolltolower="handleLoadMore" type="list" show-scrollbar="{{false}}" bind:refresherrefresh="handleRefresh">
   <view class="mt-2">
     <search-bar placeholder="请输入关键词" btnText="播放" bind:change="handleFilter" bind:search="handleSearch">
@@ -38,27 +38,51 @@
           <view class="pl-4">hanxi/xiaomusic</view>
         </view>
       </view>
-      <button class="mt-4" bind:tap="handleSetting">服务配置</button>
+      <button class="mt-4 bg-white dark:bg-gray-800/40" bind:tap="handleSetting">服务配置</button>
     </view>
     <view wx:else>
       <view class="text-center" bind:tap="handleError">
         网络异常，请确认服务地址配置正确
       </view>
-      <button class="mt-4" bind:tap="handleSetting">服务配置</button>
-      <button wx:if="{{serverConfig.privateDomain && serverConfig.publicDomain}}" class="mt-4"
+      <button class="mt-4 bg-white dark:bg-gray-800/40" bind:tap="handleSetting">服务配置</button>
+      <button wx:if="{{serverConfig.privateDomain && serverConfig.publicDomain}}" class="mt-4 bg-white dark:bg-gray-800/40"
         bind:tap="handleSwitchDomain">
         {{serverConfig.domain === serverConfig.privateDomain ? '切换为公网连接' : '切换为内网连接'}}
       </button>
     </view>
   </view>
 
-  <view wx:for="{{list}}" wx:key="name" list-item
-    class="flex items-baseline py-4 border-b border-solid border-gray-100 dark:border-neutral-800 border-opacity-80 last:border-none"
-    data-name="{{item.name}}" bind:tap="handleViewTap">
-    <view class="truncate">
-      {{item.name}}
+  <block wx:if="{{playlists.length}}">
+    <view class="text-base font-bold my-3">歌单</view>
+
+    <view wx:for="{{playlists}}" wx:key="name" list-item class="flex items-center p-2.5 mb-2 rounded-md cursor-pointer transition-all bg-white dark:bg-gray-800/20" data-name="{{item.name}}" bind:tap="handleViewTap">
+      <view class="w-8 h-8 rounded-md flex items-center justify-center bg-gray-100 text-gray-500 dark:bg-gray-700/20 dark:text-gray-400">
+        <image class="w-4 h-4 invert-icon" src="/assets/icon/{{item.icon}}.svg" />
+      </view>
+      <view class="flex-1 min-w-0 ml-3">
+        <view class="font-medium truncate text-sm">{{item.name}}</view>
+        <view class="text-xs truncate text-gray-500 dark:text-gray-400">{{item.count}} 首歌曲</view>
+      </view>
+    </view>
+
+    <view class="flex items-center w-full p-2.5 rounded-md transition-all text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800/20" bind:tap="handleCreateList">
+      <image class="w-4 h-4 invert-icon" src="/assets/icon/tianjia.svg" />
+      <view class="ml-2">新建歌单</view>
+    </view>
+  </block>
+
+  <view wx:if="{{list.length}}" class="text-base font-bold my-3">专辑</view>
+
+  <view wx:for="{{list}}" wx:key="name" list-item class="flex items-center p-2.5 mb-2 rounded-md cursor-pointer transition-all bg-white dark:bg-gray-800/20" data-name="{{item.name}}" bind:tap="handleViewTap">
+    <view class="w-8 h-8 rounded-md flex items-center justify-center bg-gray-100 text-gray-500 dark:bg-gray-700/20 dark:text-gray-400">
+      <image class="w-4 h-4 invert-icon" src="/assets/icon/zhuanji.svg" />
+    </view>
+    <view class="flex-1 min-w-0 ml-3">
+      <view class="font-medium truncate text-sm">{{item.name}}</view>
+      <view class="text-xs truncate text-gray-500 dark:text-gray-400">
+      {{item.count}} 首歌曲
+      </view>
     </view>
-    <view class="text-xs scale-90 opacity-80 flex-shrink-0">(共 {{item.count}} 首)</view>
   </view>
 </scroll-view>
 

miniprogram/pages/list/index.wxml

@@ -1,12 +1,12 @@
 <!--index.wxml-->
 <navigation-bar back title="{{title || name}}"></navigation-bar>
 
-<scroll-view class="flex-1 overflow-y-hidden px-4 box-border" scroll-y type="list"
+<scroll-view class="flex-1 overflow-y-hidden px-3 box-border" scroll-y type="list"
   show-scrollbar="{{false}}" bind:scrolltolower="handleLoadMore">
   <view class="mt-2">
     <search-bar placeholder="请输入关键词" bind:change="handleFilter"></search-bar>
   </view>
-  <view wx:for="{{list}}" wx:key="*this" list-item class="py-4 border-b border-solid border-gray-100 dark:border-neutral-800 border-opacity-80 last:border-none" data-name="{{item}}" bind:tap="handleViewTap">
+  <view wx:for="{{list}}" wx:key="*this" list-item class="px-2.5 py-3 rounded-md bg-white dark:bg-gray-800/20 mt-2" data-name="{{item}}" bind:tap="handleViewTap">
     {{item}}
   </view>
 </scroll-view>

miniprogram/pages/list/playing.wxml

@@ -1,9 +1,9 @@
 <!--index.wxml-->
 <navigation-bar back half title="{{title || '正在播放'}}"></navigation-bar>
 
-<scroll-view wx:if="{{!!list.length}}" class="flex-1 overflow-y-hidden px-4 box-border" scroll-y type="list"
+<scroll-view wx:if="{{!!list.length}}" class="flex-1 overflow-y-hidden px-3 box-border" scroll-y type="list"
   show-scrollbar="{{false}}" bind:scrolltolower="handleLoadMore">
-  <view wx:for="{{list}}" wx:key="*this" list-item class="py-4 border-b border-solid border-gray-100 dark:border-neutral-800 border-opacity-80 last:border-none {{item === musicName ? 'text-blue-600 dark:text-blue-400' : ''}}" data-name="{{item}}" bind:tap="handleViewTap">
+  <view wx:for="{{list}}" wx:key="*this" list-item class="px-2.5 py-3 rounded-md bg-white dark:bg-gray-800/20 mt-2 {{item === musicName ? 'text-blue-600 dark:text-blue-400' : ''}}" data-name="{{item}}" bind:tap="handleViewTap">
     {{item}}
   </view>
 </scroll-view>

miniprogram/pages/player/index.ts

@@ -198,8 +198,10 @@ ComponentWithStore({
           }
           const status = store.status;
           const album = store.musicAlbum;
-          await store.player.pauseMusic();
-          await sleep(300);
+          if (status === 'playing') {
+            await store.player.pauseMusic();
+            await sleep(300);
+          }
           store.setData({
             did: device.did,
           });

miniprogram/pages/setting/index.wxml

@@ -2,7 +2,7 @@
 <navigation-bar back title="设置 {{version ? 'v' + version : ''}}"></navigation-bar>
 
 <scroll-view class="flex-1 overflow-y-hidden px-4 box-border" scroll-y type="list" show-scrollbar="{{false}}">
-  <xiao-cell borderless>
+  <xiao-cell>
 		<view>内网服务地址</view>
 		<input class="flex-1 ml-2 -mb-1" value="{{serverConfig.privateDomain}}" placeholder="请输入" data-name="privateDomain" bind:input="handleFormChange"></input>
 	</xiao-cell>
@@ -25,18 +25,18 @@
 		</xiao-cell>
 	</block>
 	<view class="flex justify-center my-4">
-		<button open-type="share">分享</button>
-		<button style="margin-left: 12px" bind:tap="handleSaveConfig">保存</button>
-		<button style="margin-left: 12px; width: 144rpx;" class="p-0" bind:tap="navigateToMore">
+		<button open-type="share" class="bg-white dark:bg-gray-800/40">分享</button>
+		<button style="margin-left: 12px" class="bg-white dark:bg-gray-800/40" bind:tap="handleSaveConfig">保存</button>
+		<button style="margin-left: 12px; width: 144rpx;" class="flex items-center p-0 bg-white dark:bg-gray-800/40" bind:tap="navigateToMore">
 			<image class="w-4 h-4 brightness-0 dark:brightness-100" src="/assets/icon/gengduoshezhi.svg" />
 		</button>
 	</view>
 	<view wx:if="{{!!devices.length}}" class="mt-2">
 		<view class="flex items-center justify-between">
 			<view>设备列表</view>
-			<view class="text-xs rounded-lg bg-gray-100 dark:bg-neutral-700 py-1 px-2" hover-class="bg-opacity-80" bind:tap="handleStopMusic">一键关闭</view>
+			<view class="text-xs rounded bg-white dark:bg-gray-800/20 py-1 px-2" hover-class="bg-opacity-80" bind:tap="handleStopMusic">一键关闭</view>
 		</view>
-		<view wx:for="{{devices}}" wx:key="did" class="p-2 my-2 border border-solid rounded-lg {{item.did === did ? 'border-neutral-800 dark:border-gray-100' : 'border-gray-100 dark:border-neutral-800'}}" data-did="{{item.did}}" bind:tap="handleSwitchDevice">
+		<view wx:for="{{devices}}" wx:key="did" class="p-2 my-2 border border-solid rounded-md bg-white dark:bg-gray-800/20 {{item.did === did ? 'border-neutral-200 dark:border-gray-600' : 'border-gray-100 dark:border-neutral-800'}}" data-did="{{item.did}}" bind:tap="handleSwitchDevice">
 			<view class="flex items-center justify-between text-sm">
 				<view>{{item.name}}</view>
 				<view class="text-xs">{{status[item.did] === true ? '播放中' : ''}}</view>

miniprogram/pages/setting/more.wxml

@@ -2,7 +2,7 @@
 <navigation-bar back title="服务配置"></navigation-bar>
 
 <scroll-view class="flex-1 overflow-y-hidden px-4 box-border" scroll-y type="list" show-scrollbar="{{false}}">
-	<xiao-cell borderless>
+	<xiao-cell>
 		<view>小米账号</view>
 		<input class="flex-1 ml-2 -mb-1" value="{{formData.account}}"  placeholder="请输入" data-name="account" bind:input="handleFormChange"></input>
 	</xiao-cell>
@@ -58,6 +58,6 @@
 		</xiao-cell>
 	</block>
 	<div class="flex justify-center my-4 pb-12">
-		<button bind:tap="handleSaveConfig">保存</button>
+		<button class="bg-white dark:bg-gray-800/40" bind:tap="handleSaveConfig">保存</button>
 	</div>
 </scroll-view>

miniprogram/stores/modules/host.ts

@@ -83,9 +83,11 @@ export class HostPlayerModule implements MusicPlayer {
     const {
       domain,
       publicDomain = '',
-      privateDomain = '',
+      privateDomain: _privateDomain,
     } = this.store.serverConfig;
-    const protocol = publicDomain.match(/(.*)\:\/\//)?.[1] || 'http';
+    const protocol = publicDomain.match(/(.*):\/\//)?.[1] || 'http';
+    const privateDomain =
+      _privateDomain || url.match(/^https?:\/\/(.*?)\//)?.[1] || '';
     innerAudioContext.src =
       domain === publicDomain && url.includes(removeProtocol(privateDomain))
         ? `${protocol}://${removeProtocol(url).replace(
@@ -187,13 +189,7 @@ export class HostPlayerModule implements MusicPlayer {
     this.store.setData({
       currentTime: time,
     });
-    const index = this.store.lyric.findCurrentIndex(time);
-    this.store.setData({
-      musicLyricCurrent: {
-        index,
-        lrc: this.store.musicLyric[index]?.lrc,
-      },
-    });
+    this.store.lyric.syncLyric(time);
   };
 
   setVolume = (volume: number) => {

miniprogram/stores/modules/lyric.ts

@@ -43,17 +43,10 @@ export class LyricModule {
 
     reaction(
       () => this.store.musicLyric,
-      (val) => {
+      () => {
         this.setOffset(0);
         setTimeout(() => {
-          const index = this.findCurrentIndex(this.store.currentTime);
-          const preIndex = Math.max(0, index - 1);
-          this.store.setData({
-            musicLyricCurrent: {
-              index: preIndex,
-              lrc: val[preIndex]?.lrc,
-            },
-          });
+          this.syncLyric();
           this.ready = true;
         }, 1000);
       },
@@ -62,8 +55,12 @@ export class LyricModule {
       () => this.store.currentTime,
       (val) => {
         if (!this.ready) return;
+        if (val < 1) {
+          this.syncLyric();
+          return;
+        }
+        const currentTime = (val + this.offset) * 1000;
         const { index: currentIndex } = this.store.musicLyricCurrent;
-        const currentTime = val * 1000 + this.offset;
         const nextIndex = currentIndex + 1;
         const nextLyric = this.store.musicLyric[nextIndex];
         const { time: nextTime, lrc } = nextLyric || {};
@@ -79,8 +76,21 @@ export class LyricModule {
     );
   }
 
+  syncLyric(currentTime = this.store.currentTime) {
+    const time = currentTime + this.offset;
+    const index = this.findCurrentIndex(time);
+    const preIndex = Math.max(0, index - 1);
+    this.store.setData({
+      musicLyricCurrent: {
+        index: preIndex,
+        lrc: this.store.musicLyric[preIndex]?.lrc,
+      },
+    });
+  }
+
   setOffset(val: number) {
     this.offset = val;
+    this.syncLyric();
   }
 
   findCurrentIndex = (time: number) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xiaoplayer",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "keywords": [],
   "author": "F-loat <[email protected]>",
   "license": "MIT",