feat: 页面布局改版

Author: F-loat

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/assets/icon/shoucanggedan.svg

@@ -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/assets/icon/suoyougequ.svg

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

miniprogram/assets/icon/tianjia.svg

@@ -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/assets/icon/zhuanji.svg

@@ -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',
+      });
+    },
   },
 });