MyWorkspacev1.0.0

完整提示词：

请创建一个名为 MyWorkspace.html 的单文件 HTML 应用（内联 CSS 和 JS，无外部 JS 依赖），这是一个「个人工作台」工具，具有以下完整规格：

━━━ 一、整体架构 ━━━

1. 单文件 HTML，内联 <style> 和 <script>，无需构建工具
2. 外部资源仅限 Google Fonts：Noto Serif SC（宋体，字重 300/400/500/700/900）、Noto Sans SC（黑体，字重 300/400/500/700）、DM Mono（等宽，字重 300/400/500）
3. 数据存储使用 localStorage，所有 key 以 "ws4_" 为前缀
4. 布局使用 CSS Grid 12 列网格系统，响应式断点 1200px 和 768px
5. 主题使用 CSS 变量 + data-theme 属性切换明暗

━━━ 二、视觉设计 ━━━

1. 配色方案（CSS 变量）：
   - 宣纸底色 --paper: #f3ede1（浅色）/ #1a1a1e（深色）
   - 墨色 --ink: #2a2622（浅色）/ #e8e6e3（深色）
   - 朱砂红 --vermilion: #c44536（浅色）/ #e85d4e（深色）
   - 辅助色：靛蓝 #3d5a80、苔绿 #5a7a5a、姜黄 #d4a843、紫黛 #7b6ca0、茶褐 #8b7355
   - 面板背景：半透明毛玻璃 rgba(255,253,247,0.45) + backdrop-filter:blur(6px)
   
2. 宣纸质感背景：
   - 固定定位的 .paper-tex 层，使用 radial-gradient 模拟暖光晕
   - .grain 噪点层，使用 SVG fractalNoise 滤镜，opacity:0.04，mix-blend-mode:multiply
   
3. 字体规范：
   - 标题/面板标题/诗词：Noto Serif SC（宋体）
   - 正文/UI：Noto Sans SC（黑体），font-weight:300，line-height:1.7
   - 数字/代号/标签：DM Mono（等宽），font-variant-numeric:tabular-nums
   
4. 面板样式：
   - .panel：半透明毛玻璃背景 + 1px 细边框 + 4px 圆角 + 微阴影
   - hover 时上移 2px + 加深阴影 + 增加背景透明度
   - .panel-head：底部细线分隔，标题左对齐 + 副标题右对齐
   - 标题格式：中文名 + DM Mono 英文代号（如 "今日待办 TODO"）

━━━ 三、侧边导航栏 ━━━

固定左侧导航栏，默认宽度 56px，展开后 176px：
1. 品牌标识：朱砂红圆角方块（36px），白色"台"字，Noto Serif SC 900，旋转 -3deg
2. 展开/收起按钮：chevron 图标，展开时旋转 180deg
3. 6 组导航按钮（.sb-group），每组含 SVG 图标 + 文字标签（展开时显示）：
   - 鼠标 hover 时：侧边栏自动展开（mouseenter/mouseleave 事件）
   - 点击锁定展开状态（点击按钮切换 sbExpanded 布尔值并保存到 localStorage）
   - 每组 hover 时弹出子菜单（.sb-popup），显示该组包含的所有模块
   - 子菜单项点击时 scrollIntoView 平滑滚动到对应模块
4. 滚动时自动高亮：使用 IntersectionObserver 监测各 section 可见性，自动高亮对应导航项
5. 底部操作区：帮助与更新 / 导出数据 / 导入数据 / 深色模式切换
   - 所有按钮统一 38px 宽高，展开时变为通栏，图标+文字间距 10px
   - 深色模式按钮文字动态切换："深色模式"↔"浅色模式"

━━━ 四、顶部区域 ━━━

1. 品牌行：
   - 印章（44px 朱砂红方块 + "台"字）+ 品牌名 "MY · WORKSPACE / 我的工作台"（DM Mono）
   - 每日一言（.verse-box）：30 首古诗词每日轮换，朱砂红左边框，宋体显示

2. 问候行（grid 50%/50%）：
   - 左侧：十二时辰问候（根据小时数显示子丑寅卯辰巳午未申酉戌亥 + 对应诗意词组）+ 励志短句
   - 右侧：大字号时钟（54px 宋体，冒号闪烁动画）+ 日期 + 时段标签
   - 搜索栏（占50%宽）：搜索引擎切换器（百度/Google/Bing/知乎/小红书循环切换）+ 输入框 + 搜索按钮
   - 今日概览（.overview-bar）：5 个快捷统计项（待办/番茄/习惯/喝水/消费），点击可跳转到对应模块

3. 十二时辰映射表：
   子(23-1)夜半星沉/深夜、丑(1-3)荒鸡未鸣/深夜、寅(3-5)平旦初露/清晨、卯(5-7)日出有曜/清晨
   辰(7-9)日上花梢/上午、巳(9-11)日盛光炽/上午、午(11-13)日中天阙/中午、未(13-15)日昃斜阳/下午
   申(15-17)日薄西山/下午、酉(17-19)日落余霞/傍晚、戌(19-21)日入而息/晚上、亥(21-23)夜阑人静/深夜

4. 背景色随时间变化：--glow 和 --glow-2 变量根据小时数动态调整（晨/午/暮/夜的暖色调）

━━━ 五、15 个功能模块 ━━━

所有模块数据使用 localStorage 持久化（key 前缀 "ws4_"），通用工具函数：
- $() = document.querySelector
- load(k, default) = JSON.parse(localStorage.getItem('ws4_'+k)) || default
- save(k, v) = localStorage.setItem('ws4_'+k, JSON.stringify(v))
- uid() = Date.now().toString(36) + Math.random().toString(36).slice(2,6)
- tKey(offset) = 返回 YYYY-MM-DD 格式日期键（offset 为天数偏移）
- toast(msg) = 底部浮动提示，2秒自动消失

【第1行 - 快捷入口 PORTAL】s12 整行
- 16 个常用网站快捷链接，8列2行网格布局
- 默认数据：小红书/知乎/飞书/GitHub/Notion/ChatGPT/B站/豆瓣/微博/抖音/YouTube/Twitter/淘宝/京东/百度/微信
- 支持编辑模式：点击"编辑"按钮进入编辑态，可修改名称和网址、删除条目、添加新条目
- 编辑态下 contenteditable 可直接编辑，非编辑态为 <a> 链接（target=_blank）
- 数据：entries = [{name, url}]

【第2行 - 今日待办 TODO + 快捷短语 SNIPPET + 四象限法则 EISENHOWER】s3+s3+s6
- 今日待办：3 条，contenteditable 可编辑，点击序号（01/02/03）标记完成（前缀"✓ "），完成状态显示删除线
  数据：todos = ['内容','内容','内容']，完成项以"✓ "开头
- 快捷短语：标签+内容，点击复制到剪贴板，支持添加和删除
  数据：snippets = [{id, label, content}]
- 四象限法则：2×2 网格，4 个象限（重要紧急/重要不紧急/不重要紧急/不重要不紧急），每象限可添加任务，点击圆点标记完成
  数据：matrix = {1:[{text,done}], 2:[...], 3:[...], 4:[...]}

【第3行 - 速记 NOTES + 记账本 EXPENSE + 月度目标 GOALS + 每日复盘 REVIEW】s3×4
- 速记：4 个标签切换（想法/备忘/灵感/随笔），textarea 输入回车保存，笔记卡片左侧边框颜色按标签区分
  数据：notes = [{id, text, tag, ts}]
- 记账本：今日/本月支出统计，emoji 分类选择器（🍜🚗🛍🎮📦），金额+备注输入
  数据：expenses = [{id, cat, amount, note, date, ts}]
- 月度目标：进度条卡片，点击进度条调整百分比（0-100），contenteditable 编辑目标名
  数据：goals = [{name, pct}]
- 每日复盘：今日收获/有何不足/明日计划 三个 textarea，支持前后日期翻阅
  数据：reflections = {"YYYY-MM-DD": {gain, lack, plan}}

【第4行 - 日历 CAL + 习惯打卡 HABIT + 倒计时 COUNTDOWN】s4×3
- 日历：月历视图，7列网格，今日朱砂红高亮，有备注日期显示圆点，点击日期可添加备注，月份前后切换
  数据：calNotes = {"YYYY-MM-DD": "备注文本"}
- 习惯打卡：4 项习惯（早起/阅读/运动/复盘），圆形 toggle 按钮打卡，15 日热力图（15列5级颜色）
  数据：habits = {"YYYY-MM-DD": {"习惯名": true/false}}，habitDefs = [{zh, en}]
- 倒计时：自定义事项+日期，按日期排序显示剩余天数，默认含"周末"倒计时
  数据：cds = [{id, name, date, imp}]

【第5行 - 喝水记录 WATER + 密码生成器 PASSWORD + 专注白噪音 AMBIENT】s4×3
- 喝水记录：8 个杯子图标，点击切换填充状态，每日重置
  数据：water = {date, count}
- 密码生成器：长度滑块(4-32)，4 种字符类型（大写/小写/数字/符号），crypto.getRandomValues 安全随机，强度评估条
  字符集排除易混淆字符（无 0/O/1/l/I），Fisher-Yates 洗牌
- 专注白噪音：Web Audio API 生成 4 种音效（雨声/海浪/白噪/森林）
  雨声=低通滤波2500Hz、海浪=低通800Hz+LFO调制、白噪=全通、森林=带通1200Hz
  音量滑块控制 gain节点，播放/暂停按钮切换

【第6行 - 本周轨迹 TRACK】s12 整行
- 7 日柱状图（CSS Grid 7列），每列高度按完成数比例，今日列使用墨色高亮
- 统计数据：今日完成（待办+习惯）、本周累计、连续天数、速记条数、本周番茄
- 周数显示：WEEK + 当前年份第几周

━━━ 六、其他功能 ━━━

1. 数据导出：导出所有 ws4_ 前缀的 localStorage 数据为 JSON 文件
   文件名格式：MyWorkspace个人工作台_v1.0.0_备份_YYYY-MM-DD.json
   
2. 数据导入：选择 JSON 文件导入，导入前弹出 confirm 确认框（"导入备份将覆盖当前工作台中的同名数据，是否继续？"）

3. 帮助弹窗（modal）：
   - 点击帮助按钮打开，显示产品名/版本号
   - 数据说明：数据保存在浏览器中，需定期导出备份
   - 可选链接：检查更新/使用教程/提交建议（链接地址由使用者自行配置）
   - 关闭方式：✕按钮 / 点击遮罩 / ESC键

4. Footer 三段式布局：
   - 左：MyWorkspace 个人工作台 · v1.0.0
   - 中：可选的导航链接（检查更新 ｜ 使用教程 ｜ 提交建议），由使用者自行配置
   - 右：数据保存在当前浏览器 · 建议定期导出备份

5. 应用元信息（APP_META），使用者可自行修改其中的链接和发布方信息：
   const APP_META = Object.freeze({
     name: 'MyWorkspace 个人工作台',
     version: '1.0.0',
     releaseDate: '2026-08-06',
     publisher: '',           // 使用者自行填写
     productPage: '',          // 使用者自行填写
     brandHome: ''             // 使用者自行填写
   });

6. 深色模式：
   - [data-theme="dark"] 切换所有 CSS 变量为深色版本
   - 主题按钮图标在太阳/月亮 SVG 之间切换
   - 主题状态保存到 localStorage

7. 动画效果：
   - 面板淡入：fadeUp 动画 + 延迟类 d1-d10（0.05s 递增）
   - 面板 hover：translateY(-2px) + shadow 加深
   - 进度条/柱状图：cubic-bezier 缓动过渡
   - 时钟冒号：blink 1.1s steps(2) 无限闪烁

8. 初始化顺序（script 末尾）：
   renderTodos(); renderPomo(); renderHabits(); renderHeat(); renderNotes();
   renderCal(); renderCD(); renderReflection(); renderWater(); renderExpense();
   renderSnippets(); renderGoals(); renderEntries(); renderTrack(); renderVerse(); renderMatrix();

请生成完整的 HTML 文件，确保所有功能完整可用，所有 CSS 变量定义齐全，所有 JavaScript 函数实现完整，不要省略任何模块的代码。