refactor: use new ui

xwenliang
1 parent 0a02df01
Showing 6 changed files with 286 additions and 97 deletions
app.js
app.json
app.wxss
pages/index/index.wxml
pages/index/index.wxss
utils/request.js
-//app.js
+// zooble@2025-12-14
+const { createRequest } = require('./utils/request.js');
+
 App({
-    async onLaunch () {
-        this.login();
-        // 移除 2022-12-05 之前的本地存储，因为可能有敏感词存在
-        const timestamp = new Date('2022-12-05').getTime();
-        const audioList = this.globalData.getAudioList().filter(v => v.time > timestamp);
-        const storageKey = 'audioList';
-        wx.setStorageSync(storageKey, audioList);
-    },
-    // 将登录态封装进去
-    // todo: 多个请求同时发起，且登录态都失效时，ssid 会相互覆盖
-    async request(config){
-        let ssid = wx.getStorageSync('ssid');
-        if(!ssid){
-            ssid = await this.login();
-        }
-        const initialSuccess = config.success;
-        config.data = {
-            ...config.data,
-            ssid
-        };
-        config.success = async resp => {
-            if(resp.data.code === 5001000){
-                wx.setStorageSync('ssid', '');
-                delete config.ssid;
-                this.request(config);
-            }
-            else{
-                initialSuccess(resp);
-            }
-        };
-        config = {
-            header: {
-                'content-type': 'application/json'
-            },
-            dataType: 'json',
-            method: 'POST',
-            ...config
-        };
-        return wx.request(config);
-    },
-    login(){
-        let ssid = wx.getStorageSync('ssid');
-        if(ssid){
-            return ssid;
-        }
-        wx.showLoading({
-            title: '登录中...',
-            mask: true
-        });
-        return new Promise((resolve, reject) => {
-            wx.login({
-                success: res => {
-                    wx.request({
-                        url: `${this.globalData.domain}/open-api/mp/login`,
-                        data: {
-                            code: res.code,
-                            appid: 'wx330e54aa6000516d'
-                        },
-                        header: {
-                            'content-type': 'application/json'
-                        },
-                        dataType: 'json',
-                        method: 'POST',
-                        success: resp => {
-                            const {
-                                ssid,
-                                openid
-                            } = resp.data?.data?.user;
-                            wx.setStorageSync('ssid', ssid);
-                            wx.setStorageSync('openid', openid);
-                            resolve(ssid);
-                        },
-                        fail: resp => {
-                            wx.showModal({
-                                title: '提示',
-                                content: '登录失败，点击确定重试',
-                                showCancel: false,
-                                success: res => {
-                                    this.login();
-                                }
-                            });
-                            reject(resp.errMsg);
-                        },
-                        complete: () => {
-                            wx.hideLoading();
-                        }
-                    });
-                }
-            });
-        });
-    },
     globalData: {
         // domain: 'http://localhost:3003',
         domain: 'https://api.xwenliang.cn',
+        appid: 'wx330e54aa6000516d',
+        cid: '',
+        safeAreaTop: 0,
+        safeAreaBottom: 0,
+        statusBarHeight: 0,
+        navBarHeight: 0,
+        totalNavHeight: 0, // 导航栏总高度（状态栏 + 导航栏）
+        tabBarHeight: 56,
+        totalTabBarHeight: 0, // tab总高度（tab + 底部安全区）
+        contentHeight: 0, // 内容区域高度（全屏高度 - 导航栏总高度 - 底部安全区）
+        contentWithoutTabbarHeight: 0, // 内容区域高度 - tab 高度
         getTypeList(){
             const globalData = this;
             return [
@@ -148,6 +70,29 @@ App({
                 }
             ];
         },
+        onLaunch(option){
+            const { query } = option;
+            // 获取渠道值
+            this.globalData.cid = query.cid || '';
+            // 挂载 request
+            const { domain, appid, cid } = this.globalData;
+            this.request = createRequest({ domain, appid, cid });
+    
+            // 获取系统信息，计算安全区域
+            const windowInfo = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync();
+            const { statusBarHeight, safeArea, windowHeight, screenHeight } = windowInfo;
+            this.globalData.statusBarHeight = statusBarHeight;
+            this.globalData.safeAreaTop = safeArea.top;
+            this.globalData.safeAreaBottom = screenHeight - safeArea.bottom;
+            // 右上角胶囊位置信息
+            const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
+            // 导航栏高度，是胶囊以及胶囊的上下边距所包含的高度，通常是 32+4+4
+            this.globalData.navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
+            this.globalData.totalNavHeight = statusBarHeight + this.globalData.navBarHeight;
+            this.globalData.contentHeight = windowHeight - this.globalData.totalNavHeight;
+            this.globalData.totalTabBarHeight = this.globalData.tabBarHeight + this.globalData.safeAreaBottom;
+            this.globalData.contentWithoutTabbarHeight = this.globalData.contentHeight - this.globalData.totalTabBarHeight;
+        },
         // TTS接口请求方法
         async requestTTS(text, voice) {
             return new Promise((resolve, reject) => {
@@ -201,8 +146,8 @@ App({
             return wx.getStorageSync(storageKey) || [];
         },
         /**
-         * @param {(add|delete)} action - 增或删  
-         * @param {object|number} [param] - 增加时是 audio 描述，删除时是唯一特征 path 值  
+         * @param {(add|delete)} action - 增或删
+         * @param {object|number} [param] - 增加时是 audio 描述，删除时是唯一特征 path 值
          */
         setAudioList(action, param){
             const storageKey = 'audioList';
@@ -7,7 +7,8 @@
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "文字转语音",
-    "navigationBarTextStyle": "black"
+    "navigationBarTextStyle": "black",
+    "navigationStyle": "custom"
   },
   "sitemapLocation": "sitemap.json"
 }
 \ No newline at end of file
 /**app.wxss**/
+page {
+    height: 100%;
+    background: #D7E5FA;
+    background-image: url(https://gallery.xwenliang.cn/miniprogram/2025-11-13-ea3e6a30ac.jpg);
+    background-position: top center;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+.container-custom {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    background-repeat: no-repeat;
+}
+
+.container-default {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+}
+
+.container-default-box {
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 0 8px;
+}
+
+/* 全局安全区域样式类 */
+.safe-area-top {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+}
+
+.safe-area-bottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* 保留原有的 container 类以兼容其他页面 */
 .container {
     width: 100%;
     height: 100%;
 <!--index.wxml-->
-<view class="container">
+<view class="container-custom">
+    <!-- 动态背景 -->
+    <view class="bg">
+        <view class="ball ball-1"></view>
+        <view class="ball ball-2"></view>
+    </view>
     <view class="text-view">
         <textarea
             auto-focus
@@ -7,6 +7,72 @@ page {
     box-sizing: border-box;
 }
+/* 动态背景样式 */
+.bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    filter: blur(120px);
+    z-index: -1;
+}
+
+.ball {
+    position: absolute;
+    border-radius: 50%;
+}
+
+.ball-1 {
+    width: 400rpx;
+    height: 400rpx;
+    background-color: #4472c4;
+    animation: move-1 5s infinite;
+}
+
+.ball-2 {
+    width: 500rpx;
+    height: 500rpx;
+    background-color: #00b050;
+    animation: move-2 5s infinite;
+}
+
+@keyframes move-1 {
+    0% {
+        transform: translate(0, 0);
+    }
+    25% {
+        transform: translate(200rpx, 150rpx);
+    }
+    50% {
+        transform: translate(0, 300rpx);
+    }
+    75% {
+        transform: translate(-100rpx, 150rpx);
+    }
+    100% {
+        transform: translate(0, 0);
+    }
+}
+
+@keyframes move-2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    25% {
+        transform: translate(-200rpx, -180rpx);
+    }
+    50% {
+        transform: translate(0, -320rpx);
+    }
+    75% {
+        transform: translate(100rpx, -180rpx);
+    }
+    100% {
+        transform: translate(0, 0);
+    }
+}
+
 /* 全局移除按钮边框 */
 button {
     border: none !important;
@@ -21,7 +87,8 @@ button::before {
     border: none !important;
 }
-.container {
+.container-custom {
+    position: relative;
     width: 100%;
     max-width: 100vw;
     overflow-x: hidden;
+// zooble@2025-12-14
+
+/**
+ * 创建一个请求函数，该函数闭包了登录和重试逻辑
+ * @param {object} baseConfig 基础配置
+ * @param {string} baseConfig.domain API域名
+ * @param {string} baseConfig.appid 小程序ID
+ * @param {string} base.cid 渠道ID
+ */
+function createRequest(baseConfig) {
+    let loginPromise = null;
+
+    // 登录函数
+    const login = () => {
+        if (loginPromise) {
+            return loginPromise;
+        }
+
+        const ssid = wx.getStorageSync('ssid');
+        if (ssid) {
+            return Promise.resolve(ssid);
+        }
+
+        wx.showLoading({ mask: true });
+
+        loginPromise = new Promise((resolve, reject) => {
+            wx.login({
+                success: res => {
+                    if (!res.code) {
+                        const errorMsg = '登录失败：无法获取code';
+                        wx.showModal({ title: '提示', content: errorMsg, showCancel: false });
+                        return reject(new Error(errorMsg));
+                    }
+
+                    const { domain, appid } = baseConfig;
+                    wx.request({
+                        url: `${domain}/open-api/mp/login`,
+                        data: { code: res.code, appid },
+                        method: 'POST',
+                        header: { 'content-type': 'application/json' },
+                        dataType: 'json',
+                        success: resp => {
+                            const user = resp.data?.data?.user;
+                            if (user && user.ssid) {
+                                wx.setStorageSync('ssid', user.ssid);
+                                wx.setStorageSync('openid', user.openid);
+                                resolve(user.ssid);
+                            } else {
+                                const errorMsg = resp.data.msg || '登录失败：无效的用户信息';
+                                wx.showModal({ title: '提示', content: errorMsg, showCancel: false });
+                                reject(new Error(errorMsg));
+                            }
+                        },
+                        fail: err => {
+                            wx.showModal({ title: '提示', content: '登录请求失败', showCancel: false });
+                            reject(err);
+                        },
+                        complete: () => {
+                            wx.hideLoading();
+                            loginPromise = null;
+                        }
+                    });
+                },
+                fail: err => {
+                    wx.hideLoading();
+                    loginPromise = null;
+                    wx.showModal({ title: '提示', content: '微信登录失败', showCancel: false });
+                    reject(err);
+                }
+            });
+        });
+        return loginPromise;
+    };
+
+    // 返回的请求函数
+    const request = async (config) => {
+        let ssid = wx.getStorageSync('ssid');
+        if (!ssid) {
+            try {
+                ssid = await login();
+            } catch (e) {
+                if (config.fail) config.fail(e);
+                // early return on login failure
+                return;
+            }
+        }
+
+        const finalConfig = {
+            header: { 'content-type': 'application/json' },
+            dataType: 'json',
+            method: 'POST',
+            ...config,
+            data: {
+                ...config.data,
+                ssid,
+                cid: baseConfig.cid,
+            },
+            success: (resp) => {
+                // 登录态失效，自动重试
+                if ([5001000, 5004000].includes(resp.data.code)) {
+                    console.log('ssid expired, retrying request');
+                    wx.setStorageSync('ssid', '');
+                    // 传入原始 config 递归调用，避免 success 被多次包装
+                    request(config);
+                } else {
+                    if (config.success) {
+                        config.success(resp);
+                    }
+                }
+            },
+        };
+
+        return wx.request(finalConfig);
+    };
+
+    return request;
+};
+
+module.exports = {
+  createRequest
+};