refactor: 架构升级

2026-09-12 16:40:40 +08:00 · 2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
@@ -0,0 +1,96 @@
+# Custom Theme
+
+## 自定义主题
+
+在 UniApp 项目中自定义 uView UI 主题。
+
+### 修改主题变量
+
+在 `uni.scss` 中修改主题变量：
+
+```scss
+/* uni.scss */
+@import "uview-ui/theme.scss";
+
+/* 自定义主题变量 */
+$u-type-primary: #409EFF;
+$u-type-success: #67C23A;
+$u-type-warning: #E6A23C;
+$u-type-error: #F56C6C;
+$u-type-info: #909399;
+
+/* 自定义其他变量 */
+$u-main-color: #303133;
+$u-content-color: #606266;
+$u-tips-color: #909399;
+$u-light-color: #C0C4CC;
+$u-border-color: #E4E7ED;
+$u-bg-color: #F3F4F6;
+```
+
+### 使用 SCSS 变量
+
+在组件中使用主题变量：
+
+```vue
+<template>
+  <view class="custom-button">自定义按钮</view>
+</template>
+
+<style lang="scss" scoped>
+.custom-button {
+  background-color: $u-type-primary;
+  color: #ffffff;
+  padding: 20rpx 40rpx;
+  border-radius: 8rpx;
+}
+</style>
+```
+
+### 全局样式覆盖
+
+在 `App.vue` 中覆盖全局样式：
+
+```vue
+<style lang="scss">
+@import "uview-ui/index.scss";
+
+/* 覆盖 uView 默认样式 */
+.u-button {
+  border-radius: 8rpx;
+}
+
+.u-input {
+  border-radius: 8rpx;
+}
+</style>
+```
+
+### 条件编译主题
+
+不同平台可以使用不同主题：
+
+```scss
+/* uni.scss */
+@import "uview-ui/theme.scss";
+
+/* #ifdef H5 */
+$u-type-primary: #409EFF;
+/* #endif */
+
+/* #ifdef MP-WEIXIN */
+$u-type-primary: #07c160;
+/* #endif */
+
+/* #ifdef APP-PLUS */
+$u-type-primary: #007AFF;
+/* #endif */
+```
+
+### 注意事项
+
+1. **变量名称**：使用正确的变量名称
+2. **引入顺序**：先引入 uView 主题，再覆盖变量
+3. **作用域**：注意变量的作用域
+4. **平台差异**：使用条件编译处理平台差异
+5. **测试验证**：在不同平台测试主题效果