📧 EmailWidget 新控件预览

基于邮件兼容性设计的13个新控件建议(含NumericWidget系列抽象设计)

📏 SeparatorWidget 分隔符组件

功能:创建视觉分隔线,支持多种样式(实线、虚线、点线),用于分割邮件内容区块,提升可读性。

🔧 可配置API:
  • set_type(type) - 设置分隔符类型:solid(实线)、dashed(虚线)、dotted(点线)
  • set_color(color) - 设置分隔符颜色
  • set_thickness(thickness) - 设置分隔符粗细
  • set_margin(margin) - 设置上下边距
  • set_width(width) - 设置分隔符宽度百分比
实线分隔符
上方内容
下方内容
虚线分隔符
上方内容
下方内容
点线分隔符
上方内容
下方内容

🔢 NumericWidget 数值组件系列

设计理念:抽象出 NumericWidget 父类,统一实现 MetricWidget(指标)、PricingWidget(价格)、TrendWidget(趋势)三个子类,实现代码复用和一致性。

🏗️ 抽象父类 NumericWidget:
  • set_main_value(value) - 设置主要数值
  • set_label(label) - 设置标签文本
  • set_prefix(prefix) - 设置前缀(如货币符号)
  • set_suffix(suffix) - 设置后缀(如单位)
  • set_theme(theme) - 设置主题色:primary、success、warning、danger、neutral
  • set_size(size) - 设置尺寸:small、medium、large、xlarge
  • set_alignment(alignment) - 设置对齐方式
  • set_background(color) - 设置背景色
MetricWidget - 指标组件
¥125,000
月度收入
↗ +15.2%
专有API:set_change(), set_comparison(), set_target(), set_unit()
PricingWidget - 价格组件
¥199
¥99
限时5折
专有API:set_original_price(), set_discount(), set_period(), set_currency()
TrendWidget - 趋势组件
+15.2%
月环比增长
专有API:set_trend(), set_arrow(), set_change_value(), set_auto_color()

⭐ RatingWidget 评分组件

功能:显示星级评分或数字评分,支持不同评分系统,用于产品评价、服务评分、满意度调查结果。

🔧 可配置API:
  • set_rating(rating) - 设置评分数值
  • set_max_rating(max) - 设置最高分
  • set_type(type) - 设置类型:stars(星级)、number(数字)、percentage(百分比)
  • set_color(color) - 设置颜色
  • set_show_text(show) - 是否显示文字描述
  • set_text(text) - 设置描述文字
星级评分
★★★★☆
4.2/5.0
数字评分
8.5
满分10分
百分比评分
92%
满意度评分

🏷️ TagWidget 标签组件

功能:显示标签集合,支持不同颜色和样式,用于分类标识、技能标签、状态标记。

🔧 可配置API:
  • add_tag(text, color) - 添加标签
  • set_tags(tags) - 批量设置标签
  • set_layout(layout) - 设置布局:horizontal(水平)、vertical(垂直)
  • set_size(size) - 设置标签大小
  • set_spacing(spacing) - 设置标签间距
  • clear_tags() - 清空所有标签
技能标签
Python Django React MySQL
状态标签
已完成 进行中 已延期
分类标签
前端 后端 数据库 运维

📍 ContactWidget 联系信息组件

功能:结构化显示联系方式(电话、邮箱、地址等),用于联系卡片、公司信息、客服信息。

🔧 可配置API:
  • set_name(name) - 设置联系人姓名
  • set_phone(phone) - 设置电话号码
  • set_email(email) - 设置邮箱地址
  • set_address(address) - 设置地址
  • set_website(website) - 设置网站
  • set_layout(layout) - 设置布局方式
个人联系信息
公司信息
🏢
ABC科技有限公司
📍
北京市朝阳区xxx路123号
客服信息
💬
客服热线:400-123-4567
服务时间:9:00-18:00

📱 SocialWidget 社交媒体组件

功能:显示社交媒体链接和图标,用于公司社交媒体推广、个人社交链接。

🔧 可配置API:
  • add_social(platform, url, text) - 添加社交平台
  • set_layout(layout) - 设置布局:horizontal(水平)、vertical(垂直)
  • set_size(size) - 设置按钮大小
  • set_show_text(show) - 是否显示文字
  • set_spacing(spacing) - 设置按钮间距
  • clear_socials() - 清空所有社交链接

🎖️ BadgeWidget 徽章组件

功能:显示徽章标识,支持数字徽章和状态徽章,用于通知数量、会员等级、认证标识。

🔧 可配置API:
  • set_text(text) - 设置徽章文本
  • set_number(number) - 设置数字徽章
  • set_color(color) - 设置徽章颜色
  • set_type(type) - 设置类型:text(文本)、number(数字)、dot(圆点)
  • set_position(position) - 设置位置
  • set_max_count(max) - 设置最大显示数量
数字徽章
5
12
99+
状态徽章
VIP会员
认证中
普通用户
功能徽章
NEW
HOT
限时

📋 ChecklistWidget 检查清单组件

功能:显示待办事项或检查项目,支持已完成/未完成状态,用于任务列表、检查清单、功能对比。

🔧 可配置API:
  • add_item(text, completed) - 添加检查项
  • set_items(items) - 批量设置检查项
  • set_style(style) - 设置样式:checkbox(复选框)、bullet(项目符号)
  • set_completed_color(color) - 设置已完成项颜色
  • set_pending_color(color) - 设置待处理项颜色
  • clear_items() - 清空所有项目
任务清单
完成需求分析
设计数据库
开发后端API
前端界面开发
功能对比
用户管理
数据统计
高级分析
API集成
检查项目
代码审查
单元测试
集成测试

📅 TimelineWidget 时间线组件

功能:垂直时间线展示,显示事件序列,用于项目进度、历史记录、发展历程。

🔧 可配置API:
  • add_event(time, content, status) - 添加时间线事件
  • set_events(events) - 批量设置事件
  • set_marker_color(color) - 设置标记点颜色
  • set_line_color(color) - 设置连接线颜色
  • set_time_format(format) - 设置时间格式
  • set_direction(direction) - 设置方向:vertical(垂直)、horizontal(水平)
项目进度
10:00
项目启动会议
14:30
需求评审
16:00
技术方案讨论
发展历程
2020
公司成立
2021
完成A轮融资
2022
产品正式上线
订单状态
09:00
订单已确认
11:30
商品已发货
--:--
等待收货

🔗 LinkPreviewWidget 链接预览组件

功能:显示链接的缩略信息(标题、描述、图片),用于文章分享、产品链接、外部资源。

🔧 可配置API:
  • set_url(url) - 设置链接地址
  • set_title(title) - 设置标题
  • set_description(description) - 设置描述
  • set_image(image) - 设置预览图片
  • set_domain(domain) - 设置域名显示
  • set_layout(layout) - 设置布局方式
文章分享
产品链接
视频内容

📊 StatGridWidget 统计网格组件

功能:2x2或3x3网格显示多个统计数字,用于数据仪表盘、多维度统计、概览信息。

🔧 可配置API:
  • add_stat(label, value, color) - 添加统计项
  • set_stats(stats) - 批量设置统计项
  • set_columns(columns) - 设置列数
  • set_spacing(spacing) - 设置间距
  • set_background(background) - 设置背景色
  • clear_stats() - 清空所有统计项
业务数据
1,234
用户数
89%
满意度
¥56.7K
月收入
24
新订单
系统监控
95%
CPU
78%
内存
45%
磁盘
项目进度
12
已完成
5
进行中
3
待开始

🎨 CalloutWidget 强调框组件

功能:突出显示重要信息,不同于AlertWidget的简单样式,用于重要通知、特别说明、突出内容。

🔧 可配置API:
  • set_title(title) - 设置标题
  • set_content(content) - 设置内容
  • set_type(type) - 设置类型:info(信息)、warning(警告)、error(错误)、success(成功)
  • set_icon(icon) - 设置图标
  • set_color(color) - 设置颜色主题
  • set_border_style(style) - 设置边框样式
信息提示
ℹ️
重要提醒
系统将于今晚21:00-23:00进行维护升级,期间可能影响服务使用。
警告通知
⚠️
注意事项
请确保在操作前备份重要数据,避免数据丢失。
成功提示
操作成功
您的账户已成功升级为高级版,享受更多功能和服务。

📄 CodeWidget 代码块组件

功能:显示格式化的代码片段,保持等宽字体和缩进,用于技术文档、API示例、配置示例。

🔧 可配置API:
  • set_code(code) - 设置代码内容
  • set_language(language) - 设置编程语言
  • set_title(title) - 设置代码块标题
  • set_show_line_numbers(show) - 是否显示行号
  • set_theme(theme) - 设置主题样式
  • set_font_size(size) - 设置字体大小
Python代码
main.py
def hello_world():
    print("Hello, World!")
    return "success"

if __name__ == "__main__":
    hello_world()
JSON配置
config.json
{
  "database": {
    "host": "localhost",
    "port": 3306,
    "name": "myapp"
  },
  "debug": true
}
Shell命令
安装命令
$ pip install email-widget
$ python -m email_widget --version
EmailWidget 1.0.0

📋 总结

以上13个新控件建议(通过抽象父类减少重复)都考虑了邮件环境的限制,避免了JavaScript、CSS动画和输入控件,主要使用:

建议优先实现:MetricWidget、SeparatorWidget、ContactWidget、CalloutWidget,它们在邮件报告中使用频率最高。