stellar-ui-v2 1.40.24 → 1.40.26

package/components/ste-page-container/README.md

@@ -0,0 +1,171 @@
+# PageContainer 页面容器
+
+### 说明
+`ste-page-container` 在不同平台的实现方式：
+
+- `MP-WEIXIN`：使用微信小程序原生 `page-container`
+- 其他平台：基于 `ste-popup` 兼容实现
+- 微信单页限制：原生 `page-container` 同一页面仅允许 1 个实例，因此 `ste-page-container` 在微信小程序环境下也仅支持单实例使用
+
+为保持 API 一致，组件对外暴露 `page-container` 常用属性和事件。
+
+---$
+
+### 代码演示
+
+#### 微信小程序
+```vue
+<template>
+	<ste-page-container
+		:show.sync="show"
+		position="bottom"
+		:overlay="true"
+		:round="true"
+		custom-style="height: 60vh;"
+	>
+		<view class="content">内容区域</view>
+	</ste-page-container>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			show: false,
+		};
+	},
+};
+</script>
+```
+
+#### 其他平台
+```vue
+<template>
+	<ste-page-container
+		:show.sync="show"
+		position="bottom"
+		:overlay="true"
+		:round="true"
+		custom-style="height: 60vh;"
+	>
+		<view class="content">内容区域</view>
+	</ste-page-container>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			show: false,
+		};
+	},
+};
+</script>
+```
+
+#### 方法调用
+```vue
+<template>
+	<ste-page-container ref="pc" :show.sync="show">
+		<view>内容区域</view>
+	</ste-page-container>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			show: false,
+		};
+	},
+	methods: {
+		openBox() {
+			this.$refs.pc.open();
+		},
+		closeBox() {
+			this.$refs.pc.close();
+		},
+	},
+};
+</script>
+```
+
+#### 事件监听
+```vue
+<ste-page-container
+	:show.sync="show"
+	@beforeenter="onEvent('beforeenter')"
+	@afterenter="onEvent('afterenter')"
+	@clickoverlay="onEvent('clickoverlay')"
+>
+	<view>内容区域</view>
+</ste-page-container>
+```
+
+#### 微信专属属性
+```vue
+<ste-page-container
+	:show.sync="show"
+	:closeOnSlideDown="true"
+	overlayStyle="background: rgba(0, 144, 255, 0.45);"
+	customStyle="height: 50vh;"
+>
+	<view>微信小程序下支持下滑关闭和自定义遮罩样式</view>
+</ste-page-container>
+```
+
+---$
+
+### API
+
+#### Props
+
+| 属性名 | 说明 | 类型 | 默认值 | 平台支持 |
+| --- | --- | --- | --- | --- |
+| `show` | 是否显示容器 | `Boolean` | `false` | 全平台 |
+| `duration` | 动画时长，单位 ms | `Number` | `300` | 全平台 |
+| `zIndex` | 层级 | `Number/String` | `100` | 全平台 |
+| `overlay` | 是否显示遮罩 | `Boolean` | `true` | 全平台 |
+| `position` | 弹出位置：`top`/`bottom`/`right`/`center` | `String` | `bottom` | 全平台 |
+| `round` | 是否展示圆角 | `Boolean` | `false` | 全平台 |
+| `customStyle` | 容器样式 | `String` | `''` | 全平台 |
+| `safeAreaInsetBottom` | 是否适配底部安全区 | `Boolean` | `false` | 全平台（非微信为兼容实现） |
+| `closeOnSlideDown` | 是否允许下滑关闭 | `Boolean` | `false` | 仅微信小程序 |
+| `overlayStyle` | 遮罩层样式 | `String` | `''` | 仅微信小程序 |
+
+#### Events
+
+| 事件名 | 说明 | 平台支持 |
+| --- | --- | --- |
+| `beforeenter` | 进入前触发 | 全平台（非微信为兼容模拟） |
+| `enter` | 进入中触发 | 全平台（非微信为兼容模拟） |
+| `afterenter` | 进入结束触发 | 全平台 |
+| `beforeleave` | 离开前触发 | 全平台（非微信为兼容模拟） |
+| `leave` | 离开中触发 | 全平台（非微信为兼容模拟） |
+| `afterleave` | 离开结束触发 | 全平台（非微信为兼容模拟） |
+| `clickoverlay` | 点击遮罩触发 | 全平台 |
+| `update:show` | 显隐双向绑定事件 | 全平台 |
+
+#### Methods
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| `open` | 打开容器 | - |
+| `close` | 关闭容器 | - |
+
+### 非微信平台兼容差异
+
+以下能力在非微信平台基于 `ste-popup` 兼容，无法完全等效原生 `page-container`：
+
+- `closeOnSlideDown`：不支持
+- `overlayStyle`：不支持
+- 原生手势与生命周期细节存在实现差异
+- `position="right"` 默认按侧页语义处理，兼容实现默认宽度为 `80vw`，可通过 `customStyle` 覆盖
+
+微信端使用限制：
+
+- 同一页面只允许存在 1 个 `ste-page-container`
+- 若同时渲染多个实例，可能触发原生组件限制报错
+
+---$
+{{fuyuwei}}

package/components/ste-page-container/WORKLOG-2026-03-12.md

@@ -0,0 +1,229 @@
+# ste-page-container 会话记录（2026-03-12）
+
+## 背景
+
+目标组件：`uni_modules/stellar-ui/components/ste-page-container/ste-page-container.vue`
+
+目标语义：
+
+- 微信小程序下对齐原生 `page-container`
+- 其他平台做兼容实现
+- 组件语义来源于微信小程序 `page-container`，不是通用 `popup`
+
+用户核心诉求：
+
+1. 微信小程序环境只支持单实例，不需要“多实例自动降级到 `ste-popup`”
+2. 文档要和代码一致
+3. 非微信平台 `position="right"` 的交互要更贴近微信 `page-container`
+4. 之前 `ste-popup` 在 APP 安卓模拟器上存在右侧弹出结束后“回弹”问题
+
+---
+
+## 本次做过的改动
+
+### 1. 微信小程序单实例逻辑
+
+已改：
+
+- 删除了微信端“首个实例用原生、后续实例降级到 `ste-popup`”的逻辑
+- 微信端现在直接只渲染原生 `page-container`
+
+涉及文件：
+
+- `uni_modules/stellar-ui/components/ste-page-container/ste-page-container.vue`
+- `uni_modules/stellar-ui/components/ste-page-container/README.md`
+
+---
+
+### 2. 文档同步
+
+已改：
+
+- README 中去掉“微信多实例自动降级”描述
+- 改成“微信端同页仅支持 1 个 `ste-page-container`”
+- 示例按平台区分：
+  - 微信小程序单实例示例
+  - 其他平台示例
+
+当前 README 已被继续修改为“非微信平台使用自定义过渡动画兼容实现”
+
+---
+
+### 3. 非微信平台兼容实现路线变更
+
+原始路径：
+
+- 非微信平台继续复用 `ste-popup`
+
+中间尝试：
+
+- 给 `ste-popup` 传 `width` / `height`
+- `position="right"` 默认宽度改为 `80vw`
+
+原因：
+
+- H5 正常
+- APP 安卓模拟器仍然出现右侧弹出结束后“回弹”
+
+判断：
+
+- 问题大概率不只是尺寸
+- 更像 `ste-popup` 在 `APP-PLUS` 下的 transform / animation 状态残留
+- 继续围绕 `ste-popup` 修补收益不高
+
+因此后续改成：
+
+- 非微信平台不再依赖 `ste-popup`
+- 改成 `ste-page-container` 内部自实现遮罩 + 面板 + CSS 过渡
+
+---
+
+## 当前代码状态
+
+当前 `ste-page-container.vue` 非微信分支已经被改成自定义实现，核心思路：
+
+- `renderPopup` 控制节点挂载
+- `popupVisible` 控制进入/离开状态
+- `popupRenderKey` 用于二次打开强制重建节点
+- 面板使用 CSS `translate3d(...)` 做 `top / bottom / right / center` 过渡
+
+当前默认策略：
+
+- `position="right"` 默认宽度 `80vw`
+- 默认高度 `auto`
+- `customStyle` 继续直接挂在 panel 上
+
+---
+
+## 当前存在的问题
+
+这是本次会话结束时的阻塞点。
+
+### 1. 插槽内容显示异常
+
+用户反馈：
+
+- 现在这版改完后，插槽里的内容显示不出来
+
+说明：
+
+- 当前 `ste-page-container.vue` 的非微信自定义实现是有问题的
+- 本轮已停止继续修改，避免越改越乱
+
+---
+
+### 2. APP 安卓模拟器二次打开回弹
+
+现象：
+
+- 第一次打开可能正常
+- 隐藏后再次打开，右侧弹出结束后仍然会出现“往左弹一下再恢复”
+
+说明：
+
+- 即使脱离 `ste-popup`，问题仍未被完全验证解决
+- 当前没有完成最终稳定方案
+
+---
+
+## 用户实际使用示例
+
+本轮排查时用户给出的用法：
+
+```vue
+<ste-page-container
+  :show.sync="show"
+  position="right"
+  custom-style="height:15vh;width: 80vw"
+  @afterleave="afterleave"
+>
+  <view class="page-container-box">
+    <view class="search-box">
+      <view class="search-icon">
+        <icon-font code="&#xe66d;" size="40"></icon-font>
+      </view>
+      <view class="search-input">
+        <ste-input
+          type="text"
+          :fontSize="32"
+          :clearable="false"
+          background="#fff0"
+          @focus="focusStatus = true"
+          @blur="focusStatus = false"
+          :focus="focusStatus"
+          v-model="searchContent"
+          @input="searchText"
+          :placeholder="'搜索您收藏的' + computeText"
+          placeholderStyle="color:#999999"
+          confirmType="search"
+          @confirm="search"
+        ></ste-input>
+      </view>
+    </view>
+    <view class="search-btn" @click="search"><text>搜索</text></view>
+  </view>
+</ste-page-container>
+```
+
+这个示例对应的期望：
+
+- `right` 模式下容器不应默认 `100vh`
+- 高度应以插槽内容高度或 `custom-style` 为准
+- 右侧弹出不应有二次回弹
+
+---
+
+## 当前改动文件
+
+本轮明确改动过：
+
+- `uni_modules/stellar-ui/components/ste-page-container/ste-page-container.vue`
+- `uni_modules/stellar-ui/components/ste-page-container/README.md`
+
+注意：
+
+- 当前仓库还有其他未提交改动，不一定和这次任务相关
+- 本次没有对这些其他文件做处理
+
+---
+
+## 下次继续时的建议
+
+推荐先做这个顺序，不要直接继续在当前代码上叠修。
+
+### 方案建议
+
+1. 先回到一个稳定版本
+- 要么回退到“微信端单实例 + 非微信仍走 `ste-popup`”那版
+- 要么在新分支/临时文件里重写非微信实现
+
+2. 非微信 `right` 模式单独做最小实现
+- 只先支持 `position="right"`
+- 只做遮罩、面板、打开关闭
+- 先验证 H5 / APP 安卓模拟器行为一致
+
+3. 验证通过后再补 `top / bottom / center`
+
+### 技术判断
+
+更推荐：
+
+- 不复用 `ste-popup`
+- 但也不要继续在当前这版未稳定的自定义实现上直接补洞
+- 最好重新做一个最小可验证实现
+
+原因：
+
+- 当前问题集中在 APP 端动画表现
+- 先缩小能力面能更快定位平台差异
+
+---
+
+## 给下次会话的提示词
+
+下次可以直接这样开：
+
+```text
+先读 uni_modules/stellar-ui/components/ste-page-container/WORKLOG-2026-03-12.md，再继续处理 ste-page-container。当前目标是：保留微信小程序单实例原生 page-container，非微信平台重点修 right 模式，优先保证 APP 安卓模拟器无回弹，必要时重写非微信实现，但先恢复插槽内容正常显示。
+```
+

package/components/ste-page-container/config.json

@@ -0,0 +1,5 @@
+{
+	"group": "基础组件",
+	"title": "PageContainer 页面容器",
+	"icon": "https://image.whzb.com/chain/StellarUI/组件图标/popup.png"
+}

package/components/ste-page-container/ste-page-container.vue

@@ -0,0 +1,190 @@
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-container
+		:show="show"
+		:duration="duration"
+		:z-index="zIndex"
+		:overlay="overlay"
+		:position="position"
+		:round="round"
+		:close-on-slide-down="closeOnSlideDown"
+		:overlay-style="overlayStyle"
+		:custom-style="customStyle"
+		:safe-area-inset-bottom="safeAreaInsetBottom"
+		@beforeenter="emitEvent('beforeenter', $event)"
+		@enter="emitEvent('enter', $event)"
+		@afterenter="emitEvent('afterenter', $event)"
+		@beforeleave="emitEvent('beforeleave', $event)"
+		@leave="emitEvent('leave', $event)"
+		@afterleave="emitEvent('afterleave', $event)"
+		@clickoverlay="onClickOverlay"
+	>
+		<slot></slot>
+	</page-container>
+	<!-- #endif -->
+
+	<!-- #ifndef MP-WEIXIN -->
+	<ste-popup
+		:show.sync="innerShow"
+		:duration="duration"
+		:zIndex="zIndex"
+		:showMask="overlay"
+		:position="popupPosition"
+		:width="popupWidth"
+		:height="popupHeight"
+		:round="round"
+		:isMaskClick="overlay"
+		:showClose="false"
+		@clickMask="onClickOverlay"
+		@open-after="onPopupOpenAfter"
+	>
+		<view class="ste-page-container-content" :class="{ 'safe-area-bottom': safeAreaInsetBottom && position === 'bottom' }" :style="customStyle">
+			<slot></slot>
+		</view>
+	</ste-popup>
+	<!-- #endif -->
+</template>
+
+<script>
+/**
+ * ste-page-container 页面容器
+ * @description 微信小程序下使用原生 page-container，其他平台使用 ste-popup 兼容实现
+ * @property {Boolean} show 是否显示容器
+ * @property {Number} duration 动画时长，单位 ms
+ * @property {Number} zIndex 层级
+ * @property {Boolean} overlay 是否显示遮罩
+ * @property {String} position 弹出位置，top/bottom/right/center
+ * @property {Boolean} round 是否展示圆角
+ * @property {Boolean} closeOnSlideDown 是否允许下滑关闭（仅微信小程序）
+ * @property {String} overlayStyle 遮罩层样式（仅微信小程序）
+ * @property {String} customStyle 容器样式
+ * @property {Boolean} safeAreaInsetBottom 是否适配底部安全区
+ */
+export default {
+	group: '基础组件',
+	title: 'PageContainer 页面容器',
+	name: 'ste-page-container',
+	props: {
+		show: { type: Boolean, default: false },
+		duration: { type: Number, default: 300 },
+		zIndex: { type: [Number, String], default: 100 },
+		overlay: { type: Boolean, default: true },
+		position: {
+			type: String,
+			default: 'bottom',
+			validator(value) {
+				return ['top', 'bottom', 'right', 'center'].includes(value);
+			},
+		},
+		round: { type: Boolean, default: false },
+		closeOnSlideDown: { type: Boolean, default: false },
+		overlayStyle: { type: String, default: '' },
+		customStyle: { type: String, default: '' },
+		safeAreaInsetBottom: { type: Boolean, default: false },
+	},
+	data() {
+		return {
+			innerShow: this.show,
+			leaveTimer: null,
+		};
+	},
+	computed: {
+		popupPosition() {
+			if (['top', 'bottom', 'right', 'center'].includes(this.position)) {
+				return this.position;
+			}
+			return 'bottom';
+		},
+		popupWidth() {
+			const customWidth = this.getCustomStyleValue('width');
+			if (customWidth) return customWidth;
+			if (this.popupPosition === 'right') return '80vw';
+			return '100vw';
+		},
+		popupHeight() {
+			const customHeight = this.getCustomStyleValue('height');
+			if (customHeight) return customHeight;
+			return 'auto';
+		},
+	},
+	watch: {
+		show(newVal) {
+			// #ifndef MP-WEIXIN
+			if (this.innerShow !== newVal) {
+				this.innerShow = newVal;
+			}
+			this.triggerTransition(newVal);
+			// #endif
+		},
+		innerShow(newVal) {
+			// #ifndef MP-WEIXIN
+			if (newVal !== this.show) this.$emit('update:show', newVal);
+			// #endif
+		},
+	},
+	beforeDestroy() {
+		this.clearTimers();
+	},
+	created() {
+		// #ifndef MP-WEIXIN
+		if (this.show) this.triggerTransition(true);
+		// #endif
+	},
+	methods: {
+		getCustomStyleValue(property) {
+			if (!this.customStyle) return '';
+			const regexp = new RegExp(`(?:^|;)\\s*${property}\\s*:\\s*([^;]+)`, 'i');
+			const match = this.customStyle.match(regexp);
+			return match ? match[1].trim() : '';
+		},
+		emitEvent(eventName, e) {
+			this.$emit(eventName, e);
+		},
+		onClickOverlay(e) {
+			this.$emit('clickoverlay', e);
+		},
+		onPopupOpenAfter(e) {
+			this.$emit('afterenter', e);
+		},
+		open() {
+			this.$emit('update:show', true);
+		},
+		close() {
+			this.$emit('update:show', false);
+		},
+		clearTimers() {
+			if (this.leaveTimer) {
+				clearTimeout(this.leaveTimer);
+				this.leaveTimer = null;
+			}
+		},
+		triggerTransition(show) {
+			this.clearTimers();
+			if (show) {
+				this.$emit('beforeenter');
+				this.$emit('enter');
+				return;
+			}
+			this.$emit('beforeleave');
+			this.$emit('leave');
+			this.leaveTimer = setTimeout(() => {
+				this.$emit('afterleave');
+				this.leaveTimer = null;
+			}, this.duration);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-page-container-content {
+	width: 100%;
+	height: 100%;
+}
+
+.safe-area-bottom {
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+	box-sizing: border-box;
+}
+</style>

package/components/ste-sticky/ste-sticky.vue

@@ -53,6 +53,7 @@ export default {
 	data() {
 		return {
 			elId: utils.guid(),
+			contentObserver: null,
 		};
 	},
 	computed: {
@@ -115,7 +116,7 @@ export default {
 		},
 	},
 	destroyed() {
-		this.disconnectObserver();
+		this.disconnectObserver('contentObserver');
 	},
 };
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stellar-ui-v2",
-	"version": "1.40.24",
+	"version": "1.40.26",
 	"description": "StellarUI组件库",
 	"main": "stellar-ui/index.js",
 	"private": false,