颜色规范
flask-ui:colors
Primary
#3B82F6
Secondary
#64748B
Success
#22C55E
Warning
#F59E0B
Danger
#EF4444
表单
flask-ui:forms
表格 (支持框选，点击状态可编辑，ESC取消选择)
flask-ui:tables
用户列表
共 条 ，已选择 条| ID | 用户 | 邮箱 | 启用 | 状态 | 操作 | |
|---|---|---|---|---|---|---|
|
|
|
共 条记录
确认删除？
确定删除选中的 条记录吗？此操作不可撤销。
卡片
flask-ui:cards
基础卡片
这是一个基础卡片组件，可以用来展示各种内容。
1,234
总用户数
¥ 56,789
本月收入
128
今日订单
95%
完成率
23
待处理
5
异常
提示消息 / Toast 通知
flask-ui:alerts
点击按钮触发通知
内嵌提示样式
操作成功！数据已保存。
操作失败，请稍后重试。
请注意：此操作不可撤销！
提示：您可以点击这里了解更多信息。
提示条 (Notice Bar)
flask-ui:notice-bar
用于显示操作提示、筛选状态等信息
支持鼠标拖动矩形框选多个窗口
|
当前筛选: 手机号[15346393379] 共 19 条
提示：点击表头可以排序，支持多列排序
已成功导入 156 条数据，跳过 3 条重复数据
注意：当前有 5 个账号即将过期，请及时处理
弹窗 (ESC关闭，Enter确认)
flask-ui:modals
弹窗标题
这是一个基础弹窗，用于显示信息或进行简单确认。
确认删除？
此操作不可撤销，删除后数据将无法恢复。
编辑信息
弹窗通知消息 (替代 alert()，只有确认按钮)
flask-ui:alert
调用方式：
Alert.success('消息内容')
Alert.warning('消息内容', '自定义标题')
Alert.error('消息内容', '标题', () => { /* 回调 */ })
徽章和标签
flask-ui:badges
静态徽章样式
成功
待处理
失败
进行中
草稿
标签
Python
Flask
JavaScript
Vue
布局导航
flask-ui:layouts
顶部导航布局（适合官网、展示站）
页面内容区域
侧边栏导航布局（适合后台管理系统）
管
页面内容区域 - 当前菜单:
顶部+侧边组合布局（适合企业级应用）
企业平台
A
当前应用: /
当前菜单:
进度条
flask-ui:progress
基础进度条
项目进度
75%
存储空间
45%
CPU 使用率
90%
动画进度条
当前进度: %
环形进度
75%
50%
90%
选项卡
flask-ui:tabs
基础选项卡
这是概述页面的内容。在这里可以展示项目的基本信息和概要数据。
这是详情页面的内容。包含更详细的信息和数据展示。
这是设置页面的内容。用户可以在这里配置各种选项。
胶囊选项卡
头像
flask-ui:avatars
不同尺寸
A
B
C
D
带状态指示
张
李
王
头像组
A
B
C
D
+5
下拉菜单
flask-ui:dropdowns
分页
flask-ui:pagination
基础分页
...
带页码信息
显示 1-10 条，共 100 条
简洁分页
第 3 / 10 页
空状态
flask-ui:empty
暂无数据
当前列表为空，请添加新的内容
未找到结果
没有找到匹配 "关键词" 的结果
文件上传
flask-ui:upload
拖拽上传
拖拽文件到此处，或 点击上传
支持 JPG, PNG, PDF 格式，单个文件不超过 10MB
已上传文件
项目需求文档.pdf
2.5 MB
产品截图.png
步骤条
flask-ui:steps
水平步骤条
2
身份验证
3
完成注册
简洁步骤条
1
购物车
2
确认订单
3
支付
4
完成
时间线
flask-ui:timeline
项目启动
2024-01-15 09:00项目正式启动，完成团队组建和初步规划。
需求评审完成
2024-01-20 14:30完成所有需求文档的评审，确认开发范围。
开发进行中
2024-02-01 10:00核心功能开发中，预计下周完成第一版。
测试验收
待定等待开发完成后进行测试。
加载动画
flask-ui:loading
圆形 Spinner
基础
大号
双环
渐变
成功
警告
危险
点状动画
弹跳
脉冲
缩放
波浪
条形动画
音频
进度条
滑块
按钮加载状态
全屏加载遮罩
正在加载，请稍候...
内容区加载
加载中...
卡片标题
这里是卡片内容，正在加载覆盖层演示。
| 名称 | 状态 |
|---|---|
| 数据1 | 正常 |
| 数据2 | 正常 |
刷新数据...
特殊效果
旋转方块
脉冲圆
双旋转
❤
心跳
加载中
打字
骨架屏
flask-ui:skeleton
工具提示
flask-ui:tooltip
这是提示内容
这是提示内容
帮助信息
这里是更详细的帮助说明文字，可以包含多行内容。