From ac4b8a541e143c9f8a9ac2cf94d3dc8b81c39ae3 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Tue, 14 May 2024 15:34:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(pageStyle):=20=E6=94=AF=E6=8C=81=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=20pageStyle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../get-current-pages.test.js                 |   8 +-
 .../get-current-pages/get-current-pages.uvue  | 198 ++++++++++++------
 pages/API/get-current-pages/page-style.uts    |  99 +++++++++
 3 files changed, 238 insertions(+), 67 deletions(-)
 create mode 100644 pages/API/get-current-pages/page-style.uts

diff --git a/pages/API/get-current-pages/get-current-pages.test.js b/pages/API/get-current-pages/get-current-pages.test.js
index a8cbee3a..f3f812c9 100644
--- a/pages/API/get-current-pages/get-current-pages.test.js
+++ b/pages/API/get-current-pages/get-current-pages.test.js
@@ -33,7 +33,9 @@ describe('getCurrentPages', () => {
     expect(isEnablePullDownRefresh1).toBe(true)
 
     // setPageStyle
-    await page.callMethod('setPageStyle', false)
+    await page.callMethod('setPageStyle', {
+      enablePullDownRefresh: false
+    })
     await page.waitFor(200)
 
     await page.callMethod('getPageStyle')
@@ -50,7 +52,9 @@ describe('getCurrentPages', () => {
     expect(image2).toSaveImageSnapshot();
 
     await page.waitFor(3500)
-    await page.callMethod('setPageStyle', true)
+    await page.callMethod('setPageStyle', {
+      enablePullDownRefresh: true
+    })
     await page.waitFor(200)
     await page.callMethod('startPullDownRefresh')
     await page.waitFor(500)
diff --git a/pages/API/get-current-pages/get-current-pages.uvue b/pages/API/get-current-pages/get-current-pages.uvue
index a0c61895..760aef23 100644
--- a/pages/API/get-current-pages/get-current-pages.uvue
+++ b/pages/API/get-current-pages/get-current-pages.uvue
@@ -1,27 +1,49 @@
-<template>
-  <page-head title="getCurrentPages"></page-head>
-  <view class="uni-padding-wrap">
-    <button @click="_getCurrentPages">getCurrentPages</button>
-    <view v-if="pages.length" style="padding: 15px 0px">
-      <text>当前页面栈中 {{ pages.length }} 个页面，列表如下：</text>
-      <template v-for="(page, index) in pages" :key="page.route">
-        <text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
-      </template>
-    </view>
-    <button class="btn btn-get-page-style" type="default" @click="getPageStyle">getPageStyle</button>
-    <button class="btn btn-set-page-style-1" type="default" @click="setPageStyle(true)">setPageStyle(true)</button>
-    <button class="btn btn-set-page-style-0" type="default" @click="setPageStyle(false)">setPageStyle(false)</button>
-    <text class="page-style">当前 PageStyle</text>
-    <text class="page-style-value">{{pageStyleText}}</text>
-    <text class="status">状态：</text>
-    <view class="status-list">
-      <text>enablePullDownRefresh: {{enablePullDownRefreshStatus}}</text>
-    </view>
-    <text class="tips">当前版本仅支持设置属性 enablePullDownRefresh</text>
-  </view>
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view class="page-scroll-view">
+  <!-- #endif -->
+    <page-head title="getCurrentPages"></page-head>
+    <view class="uni-padding-wrap">
+      <button @click="_getCurrentPages">getCurrentPages</button>
+      <view v-if="pages.length" style="padding: 15px 0px">
+        <text>当前页面栈中 {{ pages.length }} 个页面，列表如下：</text>
+        <template v-for="(page, index) in pages" :key="page.route">
+          <text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
+        </template>
+      </view>
+    </view>
+
+    <page-head title="currentPageStyle"></page-head>
+    <view class="page-style-item" v-for="(value, key) in currentPageStyle" :key="key">
+      <view class="item-text">
+        <text class="item-text-key">{{key}}:</text>
+        <text class="item-text-value">{{value}}</text>
+      </view>
+      <view class="set-value" v-if="typeof value == 'boolean'">
+        <switch :checked="getStyleValue(key).getBoolean('oldValue')"
+          @change="switchChange(key, $event as UniSwitchChangeEvent)">
+        </switch>
+      </view>
+      <view class="set-value" v-if="typeof value == 'number'">
+        <slider :value="getStyleValue(key).getNumber('oldValue')" :show-value="true"
+          @change="sliderChange(key, $event as UniSliderChangeEvent)" />
+      </view>
+      <view class="set-value" v-else-if="typeof value == 'string'">
+        <radio-group class="radio-set-value" @change="radioChange(key, $event as RadioGroupChangeEvent)">
+          <radio :value="getStyleValue(key).getString('oldValue')">{{getStyleValue(key).getString('oldValue')}}</radio>
+          <text class="split-h"></text>
+          <radio :value="getStyleValue(key).getString('newValue')">{{getStyleValue(key).getString('newValue')}}</radio>
+        </radio-group>
+      </view>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
-<script>
+<script>
+  import { PageStyleItem, PageStyleMap } from './page-style.uts';
+
   class Page {
     constructor(public route : string) {
     }
@@ -31,7 +53,8 @@
     data() {
       return {
         checked: false,
-        pages: [] as Page[],
+        pages: [] as Page[],
+        PageStyleMap: PageStyleMap as Map<string, PageStyleItem>,
         currentPageStyle: {} as UTSJSONObject,
         currentPageStyleIsUTSJSONObject: true,
         // TODO
@@ -42,13 +65,19 @@
       pageStyleText() : string {
         return JSON.stringify(this.currentPageStyle)
       }
+    },
+    onLoad() {
+      this.getPageStyle();
     },
     onPullDownRefresh() {
       setTimeout(() => {
         uni.stopPullDownRefresh()
-      }, 3000)
+      }, 2000)
     },
-    methods: {
+    methods: {
+      startPullDownRefresh() {
+        uni.startPullDownRefresh()
+      },
       _getCurrentPages: function () {
         this.pages.length = 0
         const pages = getCurrentPages()
@@ -62,25 +91,57 @@
             this.checked = false
           }
         }
-      },
-      getPageStyle() {
-        const pages = getCurrentPages();
-        const currentPage = pages[pages.length - 1];
-        this.currentPageStyle = currentPage.$getPageStyle();
-        this.currentPageStyleIsUTSJSONObject = this.currentPageStyle instanceof UTSJSONObject
-      },
-      setPageStyle(enable : boolean) {
-        // 目前仅支持 enablePullDownRefresh
-        const pages = getCurrentPages();
-        const currentPage = pages[pages.length - 1];
-        currentPage.$setPageStyle({
-          enablePullDownRefresh: enable
-        });
-        this.enablePullDownRefreshStatus = enable
       },
-      startPullDownRefresh() {
-        uni.startPullDownRefresh()
-      }
+      /// get-set-page-style
+      radioChange(key : string, e : RadioGroupChangeEvent) {
+        this.setStyleValue(key, e.detail.value);
+      },
+      sliderChange(key : string, e : UniSliderChangeEvent) {
+        this.setStyleValue(key, e.detail.value);
+      },
+      switchChange(key : string, e : UniSwitchChangeEvent) {
+        this.setStyleValue(key, e.detail.value);
+      },
+      setStyleValue(key : string, value : any) {
+        const style = {}
+        style[key] = value
+        this.setPageStyle(style)
+        this.getPageStyle()
+      },
+      getStyleValue(key : string) : UTSJSONObject {
+        if (PageStyleMap.has(key))
+          return PageStyleMap.get(key)!.value;
+        else
+          return {}
+      },
+      getPageStyle() : UTSJSONObject {
+        const pages = getCurrentPages();
+        const currentPage = pages[pages.length - 1];
+        this.currentPageStyle = currentPage.$getPageStyle()
+        this.currentPageStyleIsUTSJSONObject = this.currentPageStyle instanceof UTSJSONObject
+        return this.currentPageStyle;
+      },
+      setPageStyle(style : UTSJSONObject) {
+        console.log('setPageStyle:', style);
+        const pages = getCurrentPages();
+        const currentPage = pages[pages.length - 1];
+        currentPage.$setPageStyle(style);
+      },
+      // getPageStyle() {
+      //   const pages = getCurrentPages();
+      //   const currentPage = pages[pages.length - 1];
+      //   this.currentPageStyle = currentPage.$getPageStyle();
+      //   this.currentPageStyleIsUTSJSONObject = this.currentPageStyle instanceof UTSJSONObject
+      // },
+      // setPageStyle(enable : boolean) {
+      //   // 目前仅支持 enablePullDownRefresh
+      //   const pages = getCurrentPages();
+      //   const currentPage = pages[pages.length - 1];
+      //   currentPage.$setPageStyle({
+      //     enablePullDownRefresh: enable
+      //   });
+      //   this.enablePullDownRefreshStatus = enable
+      // },
       // getCurrentPage(): Page {
       //   const pages = getCurrentPages();
       //   const currentPage = pages[pages.length - 1];
@@ -90,37 +151,44 @@
   }
 </script>
 
-
 <style>
-  .btn {
-    margin-top: 10px;
+  .page {
+    flex: 1;
+    padding: 10px;
   }
 
   .page-style {
     margin-top: 15px;
   }
-
-  .page-style-value {
-    margin-top: 5px;
-    padding: 5px;
-    background-color: #fff;
-    width: 100%;
-    /* #ifdef WEB */
-    overflow-wrap: break-word;
-    /* #endif */
+
+  .page-style-item {
+    padding: 10px;
+    margin-top: 10px;
+    background-color: #ffffff;
+    border-radius: 5px;
   }
 
-  .status {
-    margin-top: 20px;
+  .item-text {
+    flex-direction: row;
   }
 
-  .status-list {
-    margin-top: 5px;
-  }
-
-  .tips {
-    font-size: 12px;
-    margin-top: 15px;
-    opacity: .8;
+  .item-text-key {
+    font-weight: bold;
+  }
+
+  .item-text-value {
+    margin-left: 32px;
+  }
+
+  .set-value {
+    margin-top: 10px;
+  }
+
+  .radio-set-value {
+    flex-direction: row;
+  }
+
+  .split-h {
+    width: 15px;
   }
 </style>
diff --git a/pages/API/get-current-pages/page-style.uts b/pages/API/get-current-pages/page-style.uts
new file mode 100644
index 00000000..726f7117
--- /dev/null
+++ b/pages/API/get-current-pages/page-style.uts
@@ -0,0 +1,99 @@
+
+export type PageStyleItem = {
+  type : string
+  value : UTSJSONObject
+}
+
+export const PageStyleMap = new Map<string, PageStyleItem>([
+  ["navigationBarBackgroundColor", {
+    type: "string",
+    value: {
+      oldValue: "#F8F8F8",
+      newValue: "#F0F0F0",
+    }
+  } as PageStyleItem],
+  ["navigationBarTextStyle", {
+    type: "string",
+    value: {
+      oldValue: "white",
+      newValue: "black",
+    }
+  } as PageStyleItem],
+  ["navigationBarTitleText", {
+    type: "string",
+    value: {
+      oldValue: "old title",
+      newValue: "new title",
+    }
+  } as PageStyleItem],
+  ["navigationStyle", {
+    type: "string",
+    value: {
+      oldValue: "default",
+      newValue: "custom",
+    }
+  } as PageStyleItem],
+  ["backgroundColor", {
+    type: "string",
+    value: {
+      oldValue: "#ffffff",
+      newValue: "#000000",
+    }
+  } as PageStyleItem],
+  ["backgroundColorContent", {
+    type: "string",
+    value: {
+      oldValue: "#ffffff",
+      newValue: "#000000",
+    }
+  } as PageStyleItem],
+  ["backgroundTextStyle", {
+    type: "string",
+    value: {
+      oldValue: "dark",
+      newValue: "light",
+    }
+  } as PageStyleItem],
+  ["enablePullDownRefresh", {
+    type: "boolean",
+    value: {
+      oldValue: true,
+      newValue: false,
+    }
+  } as PageStyleItem],
+  ["onReachBottomDistance", {
+    type: "number",
+    value: {
+      oldValue: 50,
+      newValue: 100,
+    }
+  } as PageStyleItem],
+  ["pageOrientation", {
+    type: "string",
+    value: {
+      oldValue: "auto",
+      newValue: "portrait",
+    }
+  } as PageStyleItem],
+  ["backgroundColorTop", {
+    type: "string",
+    value: {
+      oldValue: "#ffffff",
+      newValue: "#000000",
+    }
+  } as PageStyleItem],
+  ["backgroundColorBottom", {
+    type: "string",
+    value: {
+      oldValue: "#ffffff",
+      newValue: "#000000",
+    }
+  } as PageStyleItem],
+  ["navigationBarAutoBackButton", {
+    type: "boolean",
+    value: {
+      oldValue: true,
+      newValue: false,
+    }
+  } as PageStyleItem],
+])
-- 
GitLab