stellar-ui-v2 1.40.17 → 1.40.19

package/README.md

@@ -10,9 +10,9 @@
 
 ## ✨ 特性
 
-- 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
-- 🚀 40+ 个高质量组件，覆盖移动端主流场景.
-- 📖 提供丰富的文档和组件示例.
+- 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
+- 🚀 40+ 个高质量组件，覆盖移动端主流场景.
+- 📖 提供丰富的文档和组件示例.
 - 🎨 支持修改 CSS 变量实现主题定制.
 
 ## 📱 预览
@@ -75,11 +75,11 @@ npm i stellar-ui-v2 -S
 
 ## 周边生态
 
-| 项目																							| 描述															|
-| ---																							| ---															|
-|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus)							| 一个基于vue3构建，打造的uni-app组件库								|
-|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader)					|常用于小程序需要全局引入组件的场景的包								|
-|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper)	|旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件	|
+| 项目																							| 描述															|
+| ---																							| ---															|
+|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus)							| 一个基于vue3构建，打造的uni-app组件库								|
+|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader)					|常用于小程序需要全局引入组件的场景的包								|
+|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper)	|旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件	|
 |[ste-cli](https://github.com/wuhanshuzhiyun/ste-cli)											|stellar配套的脚手架												|
 
 ## 核心团队

package/components/ste-app-share/draw.js

@@ -1,3 +1,15 @@
+async function getImage(src) {
+	const image = await uni.getImageInfo({ src: src });
+	if (Array.isArray(image)) {
+		const [e, img] = image;
+		if (e) throw e;
+		return img;
+	} else if (image.path) {
+		return image;
+	}
+	throw new Error('获取图片失败');
+}
+
 /**
  * @param {UniApp.CanvasContext} ctx
  * @param {{background:string;title:string;message:string;qrcode:string}} poster
@@ -21,7 +33,7 @@ export function drawPoster(ctx, poster, data) {
 		// 绘制宽高一致的图片
 		if (data.image) {
 			try {
-				const image = await uni.getImageInfo({ src: data.image });
+				const image = await getImage(data.image);
 				ctx.drawImage(image.path, 0, 40, width, width);
 			} catch (e) {
 				console.error(e);
@@ -54,12 +66,12 @@ export function drawPoster(ctx, poster, data) {
 			ctx.setFontSize(12);
 			ctx.setFillStyle('#666666');
 			ctx.setTextAlign('left');
-			ctx.fillText(poster.message, 10, height - 20);
+			ctx.fillText(poster.message, 10, width + 150);
 		}
 		// 绘制qrcode
 		if (poster.qrcode) {
 			try {
-				const qrcode = await uni.getImageInfo({ src: poster.qrcode });
+				const qrcode = await getImage(poster.qrcode);
 				ctx.drawImage(qrcode.path, width - 80, width + 80, 70, 70);
 			} catch (e) {
 				console.error(e);

package/components/ste-app-share/ste-app-share.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 分享弹窗 -->
 	<view class="ste-share-root" :class="{ open: dataOpen }">
-		<view class="content-box" :style="{ opacity: viewPoster ? 1 : 0 }">
+		<view class="content-box" :style="canvasStyle">
 			<view class="loading" v-if="loading"></view>
 			<canvas id="content-poster" canvas-id="content-poster" />
 		</view>
@@ -25,14 +25,12 @@
 						<image class="footer-icon" src="../../static/shoucang.png" mode="widthFix"></image>
 						<text>微信收藏</text>
 					</view>
+					<view class="footer-item" @click="downloadPoster" v-if="viewPoster">
+						<image class="footer-icon" src="../../static/haibao.png" mode="widthFix"></image>
+						<text>生成海报</text>
+					</view>
 				</view>
 			</scroll-view>
-			<view class="footer-share-list">
-				<view class="footer-item" @click="downloadPoster" v-if="viewPoster">
-					<image class="footer-icon" src="../../static/haibao.png" mode="widthFix"></image>
-					<text>生成海报</text>
-				</view>
-			</view>
 		</view>
 	</view>
 </template>
@@ -40,7 +38,10 @@
 <script>
 import { copyFileToPublicDir, drawPoster } from './draw';
 import { share } from './share';
-
+import utils from '../../utils/utils';
+// #ifndef APP
+const notApp = '该功能仅在APP端有效';
+// #endif
 export default {
 	name: 'ste-app-share',
 	group: '业务组件',
@@ -79,6 +80,15 @@ export default {
 			canvas: null,
 		};
 	},
+	computed: {
+		canvasStyle() {
+			return {
+				width: utils.formatPx(660),
+				height: utils.formatPx(990),
+				opacity: this.viewPoster ? 1 : 0,
+			};
+		},
+	},
 	watch: {
 		open: {
 			handler(val) {
@@ -98,7 +108,8 @@ export default {
 		},
 		handShare(scene) {
 			// #ifndef APP
-			uni.showToast({ title: '暂不支持', icon: 'none', duration: 2000 });
+			console.error(notApp);
+			uni.showToast({ title: notApp, icon: 'none', duration: 2000 });
 			// #endif
 			// #ifdef APP
 			share(scene, this.miniProgram, this.data);
@@ -116,18 +127,19 @@ export default {
 						this.ctx.width = canvas.width;
 						this.ctx.height = canvas.height;
 
-						drawPoster(this.ctx, this.poster, this.data).then(() => {
+						drawPoster(this.ctx, this.poster, this.data).finally(() => {
 							this.loading = false;
 						});
 					})
 					.exec();
 			} else {
-				drawPoster(this.ctx, this.poster, this.data).then(() => {
+				drawPoster(this.ctx, this.poster, this.data).finally(() => {
 					this.loading = false;
 				});
 			}
 		},
 		downloadPoster() {
+			// #ifdef APP
 			uni.canvasToTempFilePath({
 				canvasId: 'content-poster',
 				success: ({ tempFilePath }) => {
@@ -142,6 +154,11 @@ export default {
 					});
 				},
 			});
+			// #endif
+			// #ifndef APP
+			console.error(notApp);
+			uni.showToast({ title: notApp, icon: 'none', duration: 2000 });
+			// #endif
 		},
 	},
 };
@@ -154,7 +171,7 @@ export default {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	z-index: 9999;
+	z-index: 1001;
 	background-color: rgba(0, 0, 0, 0.5);
 	opacity: 0;
 	pointer-events: none;
@@ -165,9 +182,7 @@ export default {
 	}
 	.content-box {
 		position: absolute;
-		width: 660rpx;
-		height: 1020rpx;
-		top: 120rpx;
+		top: 90rpx;
 		left: 50%;
 		transform: translateX(-50%);
 		z-index: 9;

package/components/ste-index-list/README.md

@@ -111,12 +111,12 @@ methods: {
 
 #### IndexList Props
 
-| 属性名			| 说明											|类型				|默认值		|可选值	| 支持版本	|
-| ---				|---											| ---				| ---		| ---	| ---		|
-| `active`			| 当前激活的索引下标，支持sync双向绑定，默认值0		| `Number`			| `0`		| -		| -			|
-| `height`			| 高度，默认值100%								| `String`/`Number`	| `"100%"`	| -		| -			|
-| `sticky`			| `title`是否粘性布局，自定义`title`插槽时不生效	| `Boolean`			| `true`	| -		| -			|
-| `inactiveColor`	| 右边锚点状态非激活时的颜色						| `String`			| `#666666`	| -		| -			|
+| 属性名			| 说明											|类型				|默认值		|可选值	| 支持版本	|
+| ---				|---											| ---				| ---		| ---	| ---		|
+| `active`			| 当前激活的索引下标，支持sync双向绑定，默认值0		| `Number`			| `0`		| -		| -			|
+| `height`			| 高度，默认值100%								| `String`/`Number`	| `"100%"`	| -		| -			|
+| `sticky`			| `title`是否粘性布局，自定义`title`插槽时不生效	| `Boolean`			| `true`	| -		| -			|
+| `inactiveColor`	| 右边锚点状态非激活时的颜色						| `String`			| `#666666`	| -		| -			|
 | `activeColor`		| 右边锚点状态激活时的颜色							| `String`			| `#0090FF`	| -		| -			|
 
 #### IndexList Events

package/components/ste-message-box/ste-message-box.js

@@ -1,72 +1,72 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-
-Vue.use(Vuex);
-const DEFAULT_KEY = '$steMsgBoxKey';
-const DEFAULT_CONFIG = {
-	title: '',
-	content: '',
-	showCancel: true,
-	icon: '',
-	cancelText: '取消',
-	cancelColor: '#333333',
-	confirmText: '确认',
-	confirmColor: '',
-	editable: false,
-	placeholderText: '',
-	success: null,
-	fail: null,
-	complete: null,
-};
-
-const store = new Vuex.Store({
-	state: {},
-	mutations: {
-		initializeState(state, key) {
-			if (!state[key]) {
-				Vue.set(state, key, {
-					selector: key,
-					openBegin: false,
-					...DEFAULT_CONFIG,
-				});
-			}
-		},
-		setState(state, { key, params }) {
-			Object.assign(state[key], params);
-		},
-		resetState(state, key) {
-			Object.assign(state[key], {
-				openBegin: false,
-			});
-		},
-	},
-});
-
-function useSteMsgBox(key) {
-	key = key ?? DEFAULT_KEY;
-	store.commit('initializeState', key);
-
-	return {
-		showMsgBox(params) {
-			store.commit('setState', {
-				key,
-				params: {
-					...DEFAULT_CONFIG,
-					...params,
-					confirm: params.confirm ?? function () {},
-					cancel: params.cancel ?? function () {},
-					complete: params.complete ?? function () {},
-					openBegin: true,
-				},
-			});
-		},
-		hideMsgBox() {
-			store.commit('resetState', key);
-		},
-		$state: store.state[key],
-		$store: store,
-	};
-}
-
-export default useSteMsgBox;
-export { DEFAULT_KEY };
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+const DEFAULT_KEY = '$steMsgBoxKey';
+const DEFAULT_CONFIG = {
+	title: '',
+	content: '',
+	showCancel: true,
+	icon: '',
+	cancelText: '取消',
+	cancelColor: '#333333',
+	confirmText: '确认',
+	confirmColor: '',
+	editable: false,
+	placeholderText: '',
+	success: null,
+	fail: null,
+	complete: null,
+};
+
+const store = new Vuex.Store({
+	state: {},
+	mutations: {
+		initializeState(state, key) {
+			if (!state[key]) {
+				Vue.set(state, key, {
+					selector: key,
+					openBegin: false,
+					...DEFAULT_CONFIG,
+				});
+			}
+		},
+		setState(state, { key, params }) {
+			Object.assign(state[key], params);
+		},
+		resetState(state, key) {
+			Object.assign(state[key], {
+				openBegin: false,
+			});
+		},
+	},
+});
+
+function useSteMsgBox(key) {
+	key = key ?? DEFAULT_KEY;
+	store.commit('initializeState', key);
+
+	return {
+		showMsgBox(params) {
+			store.commit('setState', {
+				key,
+				params: {
+					...DEFAULT_CONFIG,
+					...params,
+					confirm: params.confirm ?? function () {},
+					cancel: params.cancel ?? function () {},
+					complete: params.complete ?? function () {},
+					openBegin: true,
+				},
+			});
+		},
+		hideMsgBox() {
+			store.commit('resetState', key);
+		},
+		$state: store.state[key],
+		$store: store,
+	};
+}
+
+export default useSteMsgBox;
+export { DEFAULT_KEY };