joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:重构按钮和icon组件

Browse Source
This commit is contained in:
R524809
2026-04-07 17:23:05 +08:00
parent 672d457a35
commit 653737c481
95 changed files with 3261 additions and 1342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/style/theme.less
+66 -27
View File
@@ -1,40 +1,79 @@
// v3.0 品牌色系
@brand: #f7ee47;
@brand-dark: #e6d520;
@brand-light: #fffef0;
/**
* v3.0 主题令牌（Less 变量）
*
* 使用：在页面/组件 less 顶部 @import '../../style/theme.less'，再用 @brand、@page-padding-x、@fs-nav-title 等
*
* 色谱速览：主题 #FFD709 · 页背景 #FEF6E7 · Header #F8F0E0
* · 主标题 #322E25 · 选中/强调字 #6C5A00
*/
// 主题色（保持向后兼容）
@primary-color: #798154;
@select-color: #f7ee47;
// ========== 品牌 / 主题色 ==========
@brand: #ffd709;
@brand-dark: #e5c200; // 按下、加深态
@brand-light: #fff4c4; // 浅底、高亮背景
// 与 theme.less 对齐的别名
@primary-color: @brand;
@select-color: @brand;
// ========== 页面结构背景 ==========
@bg-page: #fef6e7;
@bg-header: #f8f0e0;
@bg-default: @bg-page;
@bg-white: #ffffff;
@bg-gray: #f5edd8;
@bg-muted: #f5f5f5; // 分龄 Tab 未选中等弱对比底（Stitch）
@bg-week-head: #fafafa; // 分龄周卡头部（Stitch stone-50）
// ========== 文本色 ==========
@text-title: #322e25;
@text-primary: @text-title;
@text-default: @text-title;
@text-selected-btn: #6c5a00; // 黄底按钮上的字、强调整示
@text-secondary: #605b50;
@text-light: rgba(50, 46, 37, 0.45);
@text-gray: #8a8478;
@text-white: #ffffff;
@text-disable: rgba(50, 46, 37, 0.35);
// ========== 链接与外链 ==========
@link-color: #2794f4;
@wechat-color: #1fe000;
// 文本颜色
@text-default: #333333;
@text-primary: #333333;
@text-secondary: #999999;
@text-light: #cccccc;
@text-gray: #9da0a3;
@text-white: #fff;
@text-disable: #ccc;
// ========== 边框 ==========
@border: 1rpx solid rgba(50, 46, 37, 0.08);
@border-color: rgba(255, 215, 9, 0.35);
// 边框
@border: 1rpx solid rgba(221, 221, 221, 0.5);
@border-color: #eeeeee;
// ========== 页面水平内边距 ==========
// 主内容区与屏幕左右对齐；卡片内略小，避免双重视觉边距
@page-padding-x: 40rpx;
@page-padding-inner-x: 26rpx;
// 背景色
@bg-default: #f5f5f5;
@bg-white: #ffffff;
@bg-gray: #fef6db;
// ========== 区块纵向间距 ==========
@section-gap: 60rpx; // 主区块之间（按年龄挑选 ↔ 热门推荐 等）
@section-gap-lg: 48rpx; // 主区块之间（按年龄挑选 ↔ 热门推荐 等）
@section-gap-sm: 32rpx; // 区块内：标题与下方列表 / 横向列表顶距
@section-gap-stack: 28rpx; // 同级卡片堆叠（周卡、热门列表卡片等）
@section-gap-xs: 24rpx; // 更小块间（搜索区顶、Tab 区等）
// 圆角
// ========== 圆角 ==========
@radius-sm: 16rpx;
@radius: 24rpx;
@radius-lg: 32rpx;
@radius-xl: 48rpx; // 大卡片（如个人中心主卡，对齐 Stitch 1.5rem）
// 阴影
@shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
@shadow-lg: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
// ========== 阴影 ==========
@shadow: 0 4rpx 16rpx rgba(50, 46, 37, 0.06);
@shadow-lg: 0 8rpx 32rpx rgba(50, 46, 37, 0.1);
// icon
// ========== 字号 ==========
@font-size-icon: 40rpx;
@fs-section-head-title: 36rpx; // 板块主标题（如首页区块头、分龄路径头等）
// ========== 顶栏（Tab 页固定导航标题）==========
@nav-inner-height: 44px;
@fs-nav-title: 34rpx;
@fw-nav-title: 700;
@color-nav-title: @text-title;
@ls-nav-title: -0.02em;
miniprogram/style/theme2.less
+40
View File
@@ -0,0 +1,40 @@
// v3.0 品牌色系
@brand: #f7ee47;
@brand-dark: #e6d520;
@brand-light: #fffef0;
// 主题色（保持向后兼容）
@primary-color: #798154;
@select-color: #f7ee47;
@link-color: #2794f4;
@wechat-color: #1fe000;
// 文本颜色
@text-default: #333333;
@text-primary: #333333;
@text-secondary: #999999;
@text-light: #cccccc;
@text-gray: #9da0a3;
@text-white: #fff;
@text-disable: #ccc;
// 边框
@border: 1rpx solid rgba(221, 221, 221, 0.5);
@border-color: #eeeeee;
// 背景色
@bg-default: #f5f5f5;
@bg-white: #ffffff;
@bg-gray: #fef6db;
// 圆角
@radius-sm: 16rpx;
@radius: 24rpx;
@radius-lg: 32rpx;
// 阴影
@shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
@shadow-lg: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
// icon
@font-size-icon: 40rpx;
miniprogram/style/theme3.less
-79
View File
@@ -1,79 +0,0 @@
/**
* v3.0 主题令牌（Less 变量）
*
* 使用：在页面/组件 less 顶部 @import '../../style/theme3.less'，再用 @brand、@page-padding-x、@fs-nav-title 等
*
* 色谱速览：主题 #FFD709 · 页背景 #FEF6E7 · Header #F8F0E0
* · 主标题 #322E25 · 选中/强调字 #6C5A00
*/
// ========== 品牌 / 主题色 ==========
@brand: #ffd709;
@brand-dark: #e5c200; // 按下、加深态
@brand-light: #fff4c4; // 浅底、高亮背景
// 与 theme.less 对齐的别名
@primary-color: @brand;
@select-color: @brand;
// ========== 页面结构背景 ==========
@bg-page: #fef6e7;
@bg-header: #f8f0e0;
@bg-default: @bg-page;
@bg-white: #ffffff;
@bg-gray: #f5edd8;
@bg-muted: #f5f5f5; // 分龄 Tab 未选中等弱对比底（Stitch）
@bg-week-head: #fafafa; // 分龄周卡头部（Stitch stone-50）
// ========== 文本色 ==========
@text-title: #322e25;
@text-primary: @text-title;
@text-default: @text-title;
@text-selected-btn: #6c5a00; // 黄底按钮上的字、强调整示
@text-secondary: #605b50;
@text-light: rgba(50, 46, 37, 0.45);
@text-gray: #8a8478;
@text-white: #ffffff;
@text-disable: rgba(50, 46, 37, 0.35);
// ========== 链接与外链 ==========
@link-color: #2794f4;
@wechat-color: #1fe000;
// ========== 边框 ==========
@border: 1rpx solid rgba(50, 46, 37, 0.08);
@border-color: rgba(255, 215, 9, 0.35);
// ========== 页面水平内边距 ==========
// 主内容区与屏幕左右对齐；卡片内略小，避免双重视觉边距
@page-padding-x: 40rpx;
@page-padding-inner-x: 26rpx;
// ========== 区块纵向间距 ==========
@section-gap: 60rpx; // 主区块之间（按年龄挑选 ↔ 热门推荐 等）
@section-gap-lg: 48rpx; // 主区块之间（按年龄挑选 ↔ 热门推荐 等）
@section-gap-sm: 32rpx; // 区块内：标题与下方列表 / 横向列表顶距
@section-gap-stack: 28rpx; // 同级卡片堆叠（周卡、热门列表卡片等）
@section-gap-xs: 24rpx; // 更小块间（搜索区顶、Tab 区等）
// ========== 圆角 ==========
@radius-sm: 16rpx;
@radius: 24rpx;
@radius-lg: 32rpx;
@radius-xl: 48rpx; // 大卡片（如个人中心主卡，对齐 Stitch 1.5rem）
// ========== 阴影 ==========
@shadow: 0 4rpx 16rpx rgba(50, 46, 37, 0.06);
@shadow-lg: 0 8rpx 32rpx rgba(50, 46, 37, 0.1);
// ========== 字号 ==========
@font-size-icon: 40rpx;
@fs-section-head-title: 36rpx; // 板块主标题（如首页区块头、分龄路径头等）
// ========== 顶栏（Tab 页固定导航标题）==========
@nav-inner-height: 44px;
@fs-nav-title: 34rpx;
@fw-nav-title: 700;
@color-nav-title: @text-title;
@ls-nav-title: -0.02em;