wx-screen-ui 1.0.16 → 1.0.18

package/README.md

@@ -155,6 +155,64 @@ npm run build
 
 MIT
 
+## 主题配置
+
+Wx Screen UI 支持主题颜色的自定义，默认主题颜色为 `rgba(18, 154, 232, 1)`。
+
+### 主题管理 API
+
+```javascript
+import { setTheme, getTheme, resetTheme, initTheme } from "wx-screen-ui";
+
+// 设置主题颜色
+setTheme({
+  primaryColor: "255, 0, 0" // 红色主题
+});
+
+// 获取当前主题配置
+const currentTheme = getTheme();
+console.log(currentTheme);
+
+// 重置主题到默认值
+resetTheme();
+
+// 初始化主题（从本地存储加载）
+initTheme();
+```
+
+### 参数说明
+
+- **primaryColor**: 主色调，格式为 "r, g, b"，例如 "18, 154, 232"
+
+### 主题变量
+
+以下是可用于自定义的主题变量：
+
+| 变量名 | 描述 | 默认值 |
+| --- | --- | --- |
+| --wx-primary-color | 主色调的 RGB 值 | 18, 154, 232 |
+| --wx-primary | 主色调 | rgba(var(--wx-primary-color), 1) |
+| --wx-primary-light | 主色调的浅色版本 | rgba(var(--wx-primary-color), 0.2) |
+| --wx-primary-hover | 主色调的 hover 版本 | rgba(var(--wx-primary-color), 0.8) |
+| --wx-primary-disabled | 主色调的禁用版本 | rgba(var(--wx-primary-color), 0.4) |
+| --wx-primary-light | 主色调的浅色背景 | rgba(var(--wx-primary-color), 0.2) |
+| --wx-text-primary | 主要文本颜色 | #303133 |
+| --wx-text-secondary | 次要文本颜色 | #606266 |
+| --wx-text-placeholder | 占位文本颜色 | #909399 |
+| --wx-text-disabled | 禁用文本颜色 | #c0c4cc |
+| --wx-bg-color | 背景颜色 | #ffffff |
+| --wx-bg-color-light | 浅色背景颜色 | #f5f7fa |
+| --wx-bg-color-disabled | 禁用背景颜色 | #f5f7fa |
+| --wx-border-color | 边框颜色 | #dcdfe6 |
+| --wx-border-color-light | 浅色边框颜色 | #e4e7ed |
+| --wx-border-color-hover | 边框 hover 颜色 | rgba(var(--wx-primary-color), 0.5) |
+| --wx-shadow | 阴影 | 0 2px 12px 0 rgba(0, 0, 0, 0.1) |
+| --wx-shadow-light | 浅色阴影 | 0 0 0 2px rgba(var(--wx-primary-color), 0.2) |
+
+### 深色主题适配
+
+组件库默认支持系统的深色主题模式，会根据系统的颜色方案自动切换主题变量。
+
 ## 贡献
 
 欢迎提交 Issue 和 Pull Request 来改进这个组件库。

package/dist/example/ExampleIndex.vue

@@ -1,5 +1,19 @@
 <template>
 	<div class="wx-example-index">
+		<div class="theme-switcher">
+			<h3>主题切换</h3>
+			<div class="theme-colors">
+				<div
+					class="theme-color-item"
+					v-for="(theme, index) in themeOptions"
+					:key="index"
+					:style="{ backgroundColor: theme.color }"
+					@click="switchTheme(theme.value)"
+					:class="{ active: currentTheme === theme.value }"></div>
+			</div>
+			<button class="reset-theme-btn" @click="resetTheme">重置主题</button>
+		</div>
+
 		<h2>Wx Screen UI 组件库示例</h2>
 
 		<div class="example-section">
@@ -7,6 +21,11 @@
 			<WxMessageExample />
 		</div>
 
+		<div class="example-section">
+			<h3>弹窗组件</h3>
+			<WxModalExample />
+		</div>
+
 		<div class="example-section">
 			<h3>空状态组件</h3>
 			<WxEmptyExample />
@@ -41,10 +60,22 @@
 			<h3>选择器组件</h3>
 			<WxSelectExample />
 		</div>
+
+		<div class="example-section">
+			<h3>弹窗组件</h3>
+			<WxModalExample />
+		</div>
+
+		<div class="example-section">
+			<h3>开关组件</h3>
+			<WxSwitchExample />
+		</div>
 	</div>
 </template>
 
 <script setup>
+	import { ref } from "vue";
+	import { setTheme, resetTheme } from "../index.js";
 	import WxMessageExample from "./WxMessageExample.vue";
 	import WxEmptyExample from "./WxEmptyExample.vue";
 	import WxTableExample from "./WxTableExample.vue";
@@ -53,6 +84,24 @@
 	import WxRadioExample from "./WxRadioExample.vue";
 	import WxSelectExample from "./WxSelectExample.vue";
 	import WxDescriptionExample from "./WxDescriptionExample.vue";
+	import WxModalExample from "./WxModalExample.vue";
+	import WxSwitchExample from "./WxSwitchExample.vue";
+
+	const currentTheme = ref("18, 154, 232");
+
+	const themeOptions = [
+		{ value: "18, 154, 232", color: "rgba(18, 154, 232, 1)" }, // 默认主题色
+		{ value: "64, 158, 255", color: "rgba(64, 158, 255, 1)" }, // 蓝色
+		{ value: "103, 194, 58", color: "rgba(103, 194, 58, 1)" }, // 绿色
+		{ value: "230, 162, 60", color: "rgba(230, 162, 60, 1)" }, // 橙色
+		{ value: "245, 108, 108", color: "rgba(245, 108, 108, 1)" }, // 红色
+		{ value: "144, 147, 153", color: "rgba(144, 147, 153, 1)" }, // 灰色
+	];
+
+	const switchTheme = color => {
+		currentTheme.value = color;
+		setTheme({ primaryColor: color });
+	};
 </script>
 
 <style scoped>
@@ -62,25 +111,81 @@
 		margin: 0 auto;
 	}
 
+	.theme-switcher {
+		margin-bottom: 40px;
+		padding: 20px;
+		border: 1px solid var(--wx-border-color);
+		border-radius: 8px;
+		background-color: var(--wx-bg-color);
+		box-shadow: var(--wx-shadow);
+	}
+
+	.theme-switcher h3 {
+		margin-bottom: 20px;
+		padding-bottom: 10px;
+		border-bottom: 1px solid var(--wx-border-color);
+		color: var(--wx-primary);
+	}
+
+	.theme-colors {
+		display: flex;
+		gap: 15px;
+		margin-bottom: 20px;
+	}
+
+	.theme-color-item {
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		cursor: pointer;
+		transition: all 0.3s;
+		border: 3px solid transparent;
+	}
+
+	.theme-color-item:hover {
+		transform: scale(1.1);
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+	}
+
+	.theme-color-item.active {
+		border-color: var(--wx-text-primary);
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+	}
+
+	.reset-theme-btn {
+		padding: 8px 16px;
+		border: 1px solid var(--wx-border-color);
+		background-color: transparent;
+		color: var(--wx-text-secondary);
+		border-radius: 4px;
+		cursor: pointer;
+		transition: all 0.3s;
+	}
+
+	.reset-theme-btn:hover {
+		color: var(--wx-primary);
+		border-color: var(--wx-primary);
+	}
+
 	.example-section {
 		margin-bottom: 50px;
 		padding: 20px;
-		border: 1px solid #e4e7ed;
+		border: 1px solid var(--wx-border-color);
 		border-radius: 8px;
-		background-color: #ffffff;
-		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		background-color: var(--wx-bg-color);
+		box-shadow: var(--wx-shadow);
 	}
 
 	h2 {
 		text-align: center;
 		margin-bottom: 40px;
-		color: #303133;
+		color: var(--wx-text-primary);
 	}
 
 	h3 {
 		margin-bottom: 20px;
 		padding-bottom: 10px;
-		border-bottom: 1px solid #ebeef5;
-		color: #409eff;
+		border-bottom: 1px solid var(--wx-border-color);
+		color: var(--wx-primary);
 	}
 </style>

package/dist/example/WxModalExample.vue

@@ -0,0 +1,217 @@
+<template>
+	<div class="wx-modal-example">
+		<h4>基本弹窗</h4>
+		<button class="example-btn" @click="showBasicModal = true">打开基本弹窗</button>
+
+		<h4>自定义标题和内容的弹窗</h4>
+		<button class="example-btn" @click="showCustomModal = true">打开自定义弹窗</button>
+
+		<h4>自定义底部按钮的弹窗</h4>
+		<button class="example-btn" @click="showCustomFooterModal = true">打开自定义底部弹窗</button>
+
+		<h4>不可关闭的弹窗</h4>
+		<button class="example-btn" @click="showUnclosableModal = true">打开不可关闭弹窗</button>
+
+		<h4>点击遮罩层不可关闭的弹窗</h4>
+		<button class="example-btn" @click="showMaskUnclosableModal = true">
+			打开遮罩不可关闭弹窗
+		</button>
+
+		<h4>不同宽度的弹窗</h4>
+		<button class="example-btn" @click="showSmallModal = true">打开小弹窗 (300px)</button>
+		<button class="example-btn" @click="showLargeModal = true">打开大弹窗 (800px)</button>
+
+		<!-- 基本弹窗 -->
+		<modal
+			v-model="showBasicModal"
+			title="基本弹窗"
+			@close="handleClose('基本弹窗')"
+			@cancel="handleCancel('基本弹窗')">
+			<p>这是一个基本的弹窗示例，包含默认的标题、内容和底部按钮。</p>
+		</modal>
+
+		<!-- 自定义标题和内容的弹窗 -->
+		<modal
+			v-model="showCustomModal"
+			@close="handleClose('自定义弹窗')"
+			@cancel="handleCancel('自定义弹窗')">
+			<template #title>
+				<span style="color: var(--wx-primary)">自定义标题</span>
+			</template>
+			<div>
+				<h5>自定义内容</h5>
+				<p>这是一个自定义标题和内容的弹窗示例。</p>
+				<ul>
+					<li>支持自定义标题</li>
+					<li>支持自定义内容</li>
+					<li>支持自定义底部按钮</li>
+				</ul>
+			</div>
+		</modal>
+
+		<!-- 自定义底部按钮的弹窗 -->
+		<modal
+			v-model="showCustomFooterModal"
+			title="自定义底部按钮"
+			@close="handleClose('自定义底部弹窗')">
+			<p>这是一个自定义底部按钮的弹窗示例，您可以根据需要添加不同的按钮。</p>
+			<template #footer>
+				<button class="modal-btn cancel-btn" @click="showCustomFooterModal = false">取消</button>
+				<button
+					class="modal-btn"
+					style="
+						margin-right: 12px;
+						background-color: var(--wx-warning-color, #e6a23c);
+						border-color: var(--wx-warning-color, #e6a23c);
+						color: #fff;
+					">
+					保存
+				</button>
+				<button class="modal-btn confirm-btn" @click="handleConfirm('自定义底部弹窗')">确定</button>
+			</template>
+		</modal>
+
+		<!-- 不可关闭的弹窗 -->
+		<modal
+			v-model="showUnclosableModal"
+			title="不可关闭的弹窗"
+			:closable="false"
+			:maskClosable="false">
+			<p>这是一个不可关闭的弹窗示例，您无法通过点击关闭按钮或遮罩层来关闭它。</p>
+			<p>只能通过点击底部的取消按钮来关闭。</p>
+		</modal>
+
+		<!-- 点击遮罩层不可关闭的弹窗 -->
+		<modal
+			v-model="showMaskUnclosableModal"
+			title="点击遮罩层不可关闭的弹窗"
+			:maskClosable="false"
+			@close="handleClose('遮罩不可关闭弹窗')"
+			@cancel="handleCancel('遮罩不可关闭弹窗')">
+			<p>这是一个点击遮罩层不可关闭的弹窗示例，您只能通过点击关闭按钮或底部的取消按钮来关闭它。</p>
+		</modal>
+
+		<!-- 小弹窗 -->
+		<modal
+			v-model="showSmallModal"
+			title="小弹窗"
+			:width="300"
+			@close="handleClose('小弹窗')"
+			@cancel="handleCancel('小弹窗')">
+			<p>这是一个宽度为 300px 的小弹窗示例。</p>
+		</modal>
+
+		<!-- 大弹窗 -->
+		<modal
+			v-model="showLargeModal"
+			title="大弹窗"
+			:width="800"
+			@close="handleClose('大弹窗')"
+			@cancel="handleCancel('大弹窗')">
+			<p>这是一个宽度为 800px 的大弹窗示例。</p>
+			<p>可以在其中放置更多的内容，例如表单、表格等。</p>
+			<div style="margin-top: 20px">
+				<h5>示例表单</h5>
+				<div class="form-item">
+					<label>姓名：</label>
+					<input type="text" class="form-input" placeholder="请输入姓名" />
+				</div>
+				<div class="form-item">
+					<label>年龄：</label>
+					<input type="number" class="form-input" placeholder="请输入年龄" />
+				</div>
+				<div class="form-item">
+					<label>邮箱：</label>
+					<input type="email" class="form-input" placeholder="请输入邮箱" />
+				</div>
+			</div>
+		</modal>
+	</div>
+</template>
+
+<script setup>
+	import { ref } from "vue";
+	import modal from "../components/modal/index.vue";
+
+	// 弹窗状态
+	const showBasicModal = ref(false);
+	const showCustomModal = ref(false);
+	const showCustomFooterModal = ref(false);
+	const showUnclosableModal = ref(false);
+	const showMaskUnclosableModal = ref(false);
+	const showSmallModal = ref(false);
+	const showLargeModal = ref(false);
+
+	// 事件处理函数
+	const handleClose = modalName => {
+		console.log(`${modalName} 被关闭`);
+	};
+
+	const handleCancel = modalName => {
+		console.log(`${modalName} 取消按钮被点击`);
+	};
+
+	const handleConfirm = modalName => {
+		console.log(`${modalName} 确认按钮被点击`);
+		showCustomFooterModal.value = false;
+	};
+</script>
+
+<style scoped>
+	.wx-modal-example {
+		padding: 20px;
+		background-color: var(--wx-bg-color);
+		border-radius: 8px;
+		box-shadow: var(--wx-shadow);
+	}
+
+	h4 {
+		margin: 0 0 15px 0;
+		color: var(--wx-text-primary);
+		font-size: 16px;
+		font-weight: 500;
+	}
+
+	.example-btn {
+		margin: 0 10px 10px 0;
+		padding: 8px 16px;
+		border: 1px solid var(--wx-border-color);
+		background-color: var(--wx-bg-color);
+		color: var(--wx-text-primary);
+		border-radius: 4px;
+		cursor: pointer;
+		transition: all 0.3s;
+	}
+
+	.example-btn:hover {
+		color: var(--wx-primary);
+		border-color: var(--wx-primary);
+	}
+
+	.form-item {
+		margin-bottom: 15px;
+		display: flex;
+		align-items: center;
+	}
+
+	.form-item label {
+		width: 80px;
+		color: var(--wx-text-primary);
+	}
+
+	.form-input {
+		flex: 1;
+		padding: 8px 12px;
+		border: 1px solid var(--wx-border-color);
+		border-radius: 4px;
+		background-color: var(--wx-bg-color);
+		color: var(--wx-text-primary);
+		transition: all 0.3s;
+	}
+
+	.form-input:focus {
+		outline: none;
+		border-color: var(--wx-primary);
+		box-shadow: var(--wx-shadow-light);
+	}
+</style>

package/dist/example/WxRadioExample.vue

@@ -20,15 +20,15 @@
 	const radioValue = ref("1");
 	const options = ref([
 		{
-			label: "选项1",
+			label: "年",
 			value: "1",
 		},
 		{
-			label: "选项2",
+			label: "月",
 			value: "2",
 		},
 		{
-			label: "选项3",
+			label: "日",
 			value: "3",
 		},
 	]);
@@ -50,6 +50,7 @@
 	}
 
 	.radio-group {
+		width: 100px;
 		display: flex;
 		flex-direction: column;
 		gap: 10px;

package/dist/example/WxSwitchExample.vue

@@ -0,0 +1,176 @@
+<template>
+	<div class="wx-switch-example">
+		<h4>基本开关</h4>
+		<div class="switch-item">
+			<span>基本开关：</span>
+			<WxSwitch v-model="basicSwitch" @change="handleChange('基本开关', $event)" />
+			<span class="switch-status">{{ basicSwitch ? "开启" : "关闭" }}</span>
+		</div>
+
+		<h4>自定义颜色的开关</h4>
+		<div class="switch-item">
+			<span>绿色开关：</span>
+			<WxSwitch
+				v-model="greenSwitch"
+				activeColor="rgba(103, 194, 58, 1)"
+				inactiveColor="#dcdfe6"
+				@change="handleChange('绿色开关', $event)" />
+			<span class="switch-status">{{ greenSwitch ? "开启" : "关闭" }}</span>
+		</div>
+
+		<div class="switch-item">
+			<span>红色开关：</span>
+			<WxSwitch
+				v-model="redSwitch"
+				activeColor="rgba(245, 108, 108, 1)"
+				inactiveColor="#dcdfe6"
+				@change="handleChange('红色开关', $event)" />
+			<span class="switch-status">{{ redSwitch ? "开启" : "关闭" }}</span>
+		</div>
+
+		<div class="switch-item">
+			<span>橙色开关：</span>
+			<WxSwitch
+				v-model="orangeSwitch"
+				activeColor="rgba(230, 162, 60, 1)"
+				inactiveColor="#dcdfe6"
+				@change="handleChange('橙色开关', $event)" />
+			<span class="switch-status">{{ orangeSwitch ? "开启" : "关闭" }}</span>
+		</div>
+
+		<h4>自定义滑块颜色的开关</h4>
+		<div class="switch-item">
+			<span>自定义滑块颜色：</span>
+			<WxSwitch
+				v-model="customThumbSwitch"
+				activeColor="rgba(18, 154, 232, 1)"
+				inactiveColor="#dcdfe6"
+				thumbColor="#7ffffd"
+				@change="handleChange('自定义滑块颜色开关', $event)" />
+			<span class="switch-status">{{ customThumbSwitch ? "开启" : "关闭" }}</span>
+		</div>
+
+		<h4>不同动画 duration 的开关</h4>
+		<div class="switch-item">
+			<span>快速动画 (0.1s)：</span>
+			<WxSwitch
+				v-model="fastSwitch"
+				duration="0.1"
+				@change="handleChange('快速动画开关', $event)" />
+			<span class="switch-status">{{ fastSwitch ? "开启" : "关闭" }}</span>
+		</div>
+
+		<div class="switch-item">
+			<span>慢速动画 (1s)：</span>
+			<WxSwitch v-model="slowSwitch" duration="1" @change="handleChange('慢速动画开关', $event)" />
+			<span class="switch-status">{{ slowSwitch ? "开启" : "关闭" }}</span>
+		</div>
+
+		<h4>开关组示例</h4>
+		<div class="switch-group">
+			<div class="switch-item">
+				<span>选项 1：</span>
+				<WxSwitch v-model="groupSwitches[0]" @change="handleGroupChange(0, $event)" />
+			</div>
+			<div class="switch-item">
+				<span>选项 2：</span>
+				<WxSwitch v-model="groupSwitches[1]" @change="handleGroupChange(1, $event)" />
+			</div>
+			<div class="switch-item">
+				<span>选项 3：</span>
+				<WxSwitch v-model="groupSwitches[2]" @change="handleGroupChange(2, $event)" />
+			</div>
+		</div>
+
+		<h4>禁用状态的开关</h4>
+		<div class="switch-item">
+			<span>禁用的开关：</span>
+			<WxSwitch v-model="disabledSwitch" disabled />
+			<span class="switch-status">{{ disabledSwitch ? "开启" : "关闭" }}</span>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref } from "vue";
+	import WxSwitch from "../components/switch/index.vue";
+
+	// 基本开关
+	const basicSwitch = ref(false);
+
+	// 自定义颜色的开关
+	const greenSwitch = ref(false);
+	const redSwitch = ref(false);
+	const orangeSwitch = ref(false);
+
+	// 自定义滑块颜色的开关
+	const customThumbSwitch = ref(false);
+
+	// 不同动画 duration 的开关
+	const fastSwitch = ref(false);
+	const slowSwitch = ref(false);
+
+	// 开关组
+	const groupSwitches = ref([false, false, false]);
+
+	// 禁用状态的开关
+	const disabledSwitch = ref(false);
+
+	// 事件处理函数
+	const handleChange = (switchName, value) => {
+		console.log(`${switchName} 状态变化：${value}`);
+	};
+
+	const handleGroupChange = (index, value) => {
+		console.log(`开关组 ${index + 1} 状态变化：${value}`);
+	};
+</script>
+
+<style scoped>
+	.wx-switch-example {
+		padding: 20px;
+		background-color: var(--wx-bg-color);
+		border-radius: 8px;
+		box-shadow: var(--wx-shadow);
+	}
+
+	h4 {
+		margin: 0 0 15px 0;
+		color: var(--wx-text-primary);
+		font-size: 16px;
+		font-weight: 500;
+	}
+
+	.switch-item {
+		margin-bottom: 15px;
+		display: flex;
+		align-items: center;
+	}
+
+	.switch-item span {
+		margin-right: 15px;
+		color: var(--wx-text-primary);
+		width: 120px;
+	}
+
+	.switch-status {
+		margin-left: 15px;
+		color: var(--wx-text-secondary);
+		font-size: 14px;
+	}
+
+	.switch-group {
+		padding: 15px;
+		background-color: var(--wx-bg-color-light);
+		border-radius: 4px;
+		margin-bottom: 20px;
+	}
+
+	.switch-group .switch-item {
+		margin-bottom: 10px;
+	}
+
+	.switch-group .switch-item:last-child {
+		margin-bottom: 0;
+	}
+</style>