【新春创造营】马年flag工具（重构版）（ui-ux-pro skill）

AI实践艇
,
1

马年Flag工具开发记录

##体验地址：https://horse-year.edgeone.app/

项目概述

马年Flag工具是一个用于创建、管理和追踪个人目标的Web应用。用户可以设置Flag目标、定义开始和截止时间、记录完成进度，并通过直观的UI界面进行管理。

开发历程

第一阶段：基础功能开发

目标：创建一个简单的Flag工具，支持创建、显示和历史记录功能。

实现内容：

  • HTML结构设计
  • 基础CSS样式（渐变背景、卡片布局）
  • JavaScript功能（创建Flag、清空Flag、删除历史记录）
  • localStorage数据持久化

技术选型：

  • 纯HTML/CSS/JavaScript（无框架依赖）
  • Bootstrap CSS框架
  • SVG图标

完成时间：初始版本

第二阶段：UI/UX重构

目标：参考专业UI/UX设计，提升视觉体验和用户交互质量。

参考设计：

设计改进：

  • :artist_palette: 玻璃拟态效果：半透明背景 + 毛玻璃效果（backdrop-filter）
  • :artist_palette: 传统节日配色：红色（#DC2626）+ 金色（#FBBF24）主题
  • :artist_palette: 字体系统：Noto Sans TC + Noto Serif TC 组合
  • :artist_palette: SVG图标：替换所有emoji图标，提升专业度

布局优化：

  • 圆角卡片设计（20-24px）
  • 统一的间距系统
  • 渐变背景带金色光晕效果
  • 柔和的阴影层次

响应式设计：

  • 移动端（375px）：单列布局
  • 平板（768px）：居中布局
  • 桌面（1024px、1440px）：优化大屏体验

无障碍性：

  • 文本对比度符合4.5:1标准
  • 支持键盘导航
  • 尊重prefers-reduced-motion设置

第三阶段：进度管理功能

目标：添加进度追踪能力，让用户可以记录Flag的完成情况。

新增功能：

  • :bar_chart: 进度滑块：0%-100%实时调整
  • :date: 开始时间：日期选择器
  • :date: 截止时间：日期选择器
  • :label: 智能状态标签：
    • 待开始（进度0%）
    • 进行中（进度1-99%）
    • 已完成（进度100%）
    • 已逾期（超过截止时间未完成）
  • :chart_increasing: 进度条显示：可视化进度展示
  • :alarm_clock: 时间信息：显示创建时间、开始时间、截止时间

UI优化：

  • 渐变进度条（普通进度为金色，完成为绿色）
  • 彩色状态标签（不同状态不同颜色）
  • 时间信息图标化
  • 响应式移动端布局

第四阶段：进度调整功能

目标：允许用户对已创建的Flag进行进度更新。

新增功能：

  • :pencil: 编辑模式：点击"编辑"按钮打开模态框
  • :control_knobs: 进度调整滑块：在模态框中调整进度
  • :floppy_disk: 保存/取消：保存进度更新或取消操作
  • :counterclockwise_arrows_button: 自动状态更新：调整进度后状态标签自动更新

模态框设计：

  • 毛玻璃背景遮罩
  • 平滑的进入动画
  • 显示当前Flag内容
  • 实时进度值显示
  • 移动端适配

交互优化：

  • 点击遮罩关闭模态框
  • 按钮hover效果
  • 流畅的动画过渡

技术栈

  • HTML5：语义化标签
  • CSS3：
    • Flexbox布局
    • CSS Grid
    • CSS自定义属性（变量）
    • backdrop-filter（毛玻璃效果）
    • CSS动画
  • JavaScript（ES6+）：
    • localStorage API
    • 事件监听
    • DOM操作
  • 图标：SVG（内联）
  • 字体：Google Fonts（Noto Sans TC、Noto Serif TC）

文件结构

新建文件夹/
└── horse-year-flag.html

单文件应用，所有HTML、CSS、JavaScript都在一个文件中，便于部署和分享。

核心功能

1. 创建Flag

  • 输入目标内容
  • 设置开始时间（可选）
  • 设置截止时间（可选）
  • 设置初始进度（0%-100%）
  • 点击"创建Flag"按钮保存

2. 显示Flag

  • 显示当前Flag内容
  • 状态标签（待开始/进行中/已完成/已逾期）
  • 进度条可视化
  • 时间信息展示

3. 历史记录

  • 显示所有已创建的Flag
  • 每个Flag显示：
    • 目标内容
    • 状态标签
    • 进度条
    • 创建时间
    • 开始时间
    • 截止时间
    • 编辑按钮
    • 删除按钮

4. 编辑Flag进度

  • 点击"编辑"按钮打开模态框
  • 调整进度滑块
  • 保存或取消
  • 自动更新状态

5. 删除Flag

  • 点击"删除"按钮
  • 从历史记录中移除
  • 数据从localStorage删除

数据结构

{
  text: "Flag目标内容",
  date: "创建时间（字符串）",
  startDate: "开始时间（YYYY-MM-DD）",
  endDate: "截止时间（YYYY-MM-DD）",
  progress: 进度百分比（0-100）
}

部署方式

由于是单文件应用，部署非常简单：

  1. 本地使用：直接用浏览器打开 horse-year-flag.html
  2. GitHub Pages：上传到仓库，启用GitHub Pages
  3. 静态网站托管：上传到任何支持静态网站的托管服务（Netlify、Vercel等）

未来改进方向

  • 添加Flag分类/标签功能
  • 支持Flag描述/备注
  • 添加里程碑功能
  • 数据导出功能（JSON/CSV）
  • 主题切换功能（深色模式）
  • 提醒/通知功能
  • 统计图表（完成率分析）
  • 多语言支持

开发总结

通过四个阶段的迭代开发，马年Flag工具从一个简单的Flag创建工具，成长为一个功能完善、设计精美的目标管理应用。

开发亮点：

  • :sparkles: 纯原生开发，无框架依赖，轻量高效
  • :artist_palette: 专业的UI/UX设计，参考业界最佳实践
  • :mobile_phone: 完善的响应式设计，支持多端访问
  • :floppy_disk: 本地数据持久化，无需后端服务
  • :wheelchair_symbol: 良好的无障碍性，符合WCAG标准
1 个赞