{
  "checkedOn": "2026-10-24",
  "task": "现有 buildless 退休工具的组件与消费分类研究",
  "scope": "仅研究与本地证据保存；未修改产品代码，未部署",
  "recommendation": {
    "strategy": "保留现有原生 JS 架构；借用成熟组件与设计规范，逐块增强现有表单，不迁移整站框架。",
    "month": "出生年月首选年、月分开填写（年可直接输入，月 1–12）；如需要弹出面板，用 flatpickr monthSelect，并保留直接输入年份/年月的通路。",
    "smallChoice": "男/女、个人/共同、缴费策略等 2–3 项选择采用可见的分段单选卡；不要全部做成下拉。",
    "select": "城市选项少时原生 select 即可；未来全国城市可用 Tom Select 本地搜索，不启用远程 load。",
    "numbers": "Bootstrap input-group 样式与原生 input 组合；清晰显示 元/月、元/年、年、月，不让用户自己换算缴费月数；数值滚轮不应悄悄改金额。",
    "advanced": "基础输入始终可见；依据、参数覆盖、养老金明细使用 details 或 Bootstrap accordion，折叠标题显示目前采用的规则摘要。",
    "navigation": "保留现有分步导航，参考 USWDS step indicator 展示当前步与进度，页面入口允许回看，不强制从头填写。",
    "density": "桌面每行 2–3 项，手机单列；标签靠近输入，帮助文字短句，错误就地提示，自动计算状态使用 aria-live polite。"
  },
  "components": [
    {
      "name": "flatpickr",
      "version": "4.6.13",
      "license": "MIT",
      "docs": [
        "https://flatpickr.js.org/plugins/",
        "https://flatpickr.js.org/options/",
        "https://flatpickr.js.org/localization/"
      ],
      "packageUrl": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
      "localRoot": "flatpickr/package",
      "files": [
        "dist/flatpickr.min.js",
        "dist/flatpickr.min.css",
        "dist/plugins/monthSelect/index.js",
        "dist/plugins/monthSelect/style.css",
        "dist/l10n/zh.js",
        "LICENSE.md"
      ],
      "implementation": {
        "dateFormat": "Y-m",
        "altFormat": "Y年m月",
        "allowInput": true,
        "disableMobile": true,
        "locale": "zh",
        "notes": [
          "年月专用面板只出现 12 个月；年份输入直接跳到出生年，不需逐月翻页。",
          "手机也显式测试月份面板及键盘；不要只依赖浏览器 month 原生弹层。",
          "初始化放在外部 app JS 中，重新渲染表单前销毁旧实例，事件只回写标准 YYYY-MM。",
          "建议直接年/月输入是比日历更低摩擦的生日输入；flatpickr 是可选增强。"
        ]
      }
    },
    {
      "name": "tom-select",
      "version": "2.6.2",
      "license": "Apache-2.0",
      "docs": [
        "https://tom-select.js.org/",
        "https://tom-select.js.org/docs/"
      ],
      "packageUrl": "https://registry.npmjs.org/tom-select/-/tom-select-2.6.2.tgz",
      "localRoot": "tom-select/package",
      "files": [
        "dist/js/tom-select.complete.min.js",
        "dist/css/tom-select.default.min.css",
        "LICENSE"
      ],
      "notes": [
        "官方当前示例版本 2.6.2，实际 npm 包 package.json 许可为 Apache-2.0。",
        "仅建议较长选项列表；本地数据、create:false、maxItems:1，中文 no_results 文案。",
        "以原生 select 作为基础输入，保持 label/id 关联及 onChange 自动重算。"
      ]
    },
    {
      "name": "bootstrap",
      "version": "5.3.8",
      "license": "MIT",
      "docs": [
        "https://getbootstrap.com/docs/5.3/forms/overview/",
        "https://getbootstrap.com/docs/5.3/forms/input-group/",
        "https://getbootstrap.com/docs/5.3/forms/checks-radios/",
        "https://getbootstrap.com/docs/5.3/components/accordion/",
        "https://getbootstrap.com/docs/5.3/getting-started/accessibility/"
      ],
      "packageUrl": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
      "localRoot": "bootstrap/package",
      "files": [
        "dist/css/bootstrap.min.css",
        "dist/js/bootstrap.bundle.min.js",
        "LICENSE"
      ],
      "notes": [
        "建议只提取/编译所需 forms、input-group、button、accordion 样式并保留许可，避免整个 reboot/global CSS 改坏现有布局。",
        "switch 保留原生 checkbox 与 role=switch；金额框用真实 label，不用 placeholder 代替。",
        "如果 accordion 用原生 details，则无需 Bootstrap JS。",
        "无独立业务 stepper，进度设计参考 USWDS，不为了步骤指示另加整套 JS 框架。"
      ]
    }
  ],
  "designSources": [
    {
      "url": "https://design-system.service.gov.uk/components/date-input/",
      "takeaway": "生日等已知日期适合直接填写分组字段；不要输入一项后自动跳焦点。"
    },
    {
      "url": "https://design-system.service.gov.uk/components/select/",
      "takeaway": "优先减少选择数，少量选项采用 radios；长列表才考虑 select。"
    },
    {
      "url": "https://designsystem.digital.gov/components/step-indicator/",
      "takeaway": "多步表单的进度指示与当前步骤文字；移动布局要清楚显示当前步。"
    }
  ],
  "csp": {
    "existing": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'none'",
    "decision": "所选发布包应复制到本站 vendor 目录，通过外部 script/link 加载，不从 CDN 在浏览器运行时加载；不要放内联初始化脚本，不启用远程搜索。",
    "staticScanFile": "csp-static-scan.json",
    "result": "已检查 flatpickr 主库、monthSelect、中文 locale、Tom Select complete、Bootstrap bundle，未匹配 eval(...)、new Function(...) 或字符串定时器。",
    "limit": "这只是选定发行文件的静态检查，不等于浏览器兼容认证。父任务仍需在当前 CSP 下实际验证选择、键盘、手机与无控制台 CSP 错误。"
  },
  "consumption": {
    "sources": [
      {
        "id": "nbs-consumption-2013",
        "title": "国家统计局《居民消费支出分类（2013）》",
        "url": "https://www.stats.gov.cn/sj/tjbz/gjtjbz/202302/P020230213402492385324.pdf",
        "mirror": "https://tjj.wuhan.gov.cn/tjyw/ffzd/tjbz/202004/t20200430_1202495.shtml",
        "localFile": "nbs-consumption-classification-2013.pdf",
        "date": "2013-03-07",
        "use": "按用途分类，排除投资增值类支出；本工具用其分类，不套用全国均值。"
      },
      {
        "id": "nbs-consumption-2025",
        "title": "2025年居民收入和消费支出情况",
        "url": "https://www.stats.gov.cn/sj/zxfb/202601/t20260119_1962321.html",
        "date": "2026-01-19",
        "use": "确认居民消费仍按八大类发布；全国统计均值不能直接当深圳个人的建议预算。"
      }
    ],
    "categories": [
      {
        "label": "吃",
        "official": "食品烟酒",
        "examples": [
          "买菜",
          "外卖",
          "下馆子",
          "饮品"
        ]
      },
      {
        "label": "穿",
        "official": "衣着",
        "examples": [
          "衣服鞋帽",
          "衣物清洗修补"
        ]
      },
      {
        "label": "住",
        "official": "居住",
        "examples": [
          "房租",
          "水电燃气",
          "物业",
          "维修"
        ]
      },
      {
        "label": "行与通信",
        "official": "交通通信",
        "examples": [
          "公共交通",
          "打车",
          "车辆运行",
          "手机宽带"
        ]
      },
      {
        "label": "生活用品与服务",
        "official": "生活用品及服务",
        "examples": [
          "日用品",
          "家电",
          "家政"
        ]
      },
      {
        "label": "教育与娱乐",
        "official": "教育文化娱乐",
        "examples": [
          "培训学习",
          "娱乐健身",
          "旅行套餐"
        ]
      },
      {
        "label": "医疗",
        "official": "医疗保健",
        "examples": [
          "自付门诊",
          "药品",
          "自付住院"
        ]
      },
      {
        "label": "其他",
        "official": "其他用品和服务",
        "examples": [
          "个人服务",
          "其他未归类消费"
        ]
      }
    ],
    "cashflowAdjustments": [
      "房贷月供接入负债还款，不同时再次计入居住消费；首付、买车等大额交易另列。",
      "商业保险保费、医保与养老缴费在保障现金流单列，以实际支付金额计。统计分类中的保险是服务费口径，不等于保费全额。",
      "医疗只填自己承担的净额；避免把报销部分和保费混成一项。",
      "赡养款单列实际承担额；不要用父母固定终止年龄假定某年责任归零。若有照护预算可以作为额外场景。",
      "金额按本人真实账单填写；年付允许年/月切换。性别不自动决定衣着或消费金额。"
    ],
    "classificationCaveat": "本产品是家庭/个人现金流工具，分类借鉴官方统计；保险缴费、债务还本等现金流不是居民消费统计的等价口径。"
  },
  "downloads": [
    {
      "file": "flatpickr-4.6.13.tgz",
      "sizeBytes": 149452,
      "sha256": "912da5a92aea3447d39ab83d83706c004c999ee9b013a6267fab3d8710e8a7a8"
    },
    {
      "file": "tom-select-2.6.2.tgz",
      "sizeBytes": 804792,
      "sha256": "91e3a429b42d9163e8ade96f3603109d3b7faa7f9b1a5259fa30f8f4b162415a"
    },
    {
      "file": "bootstrap-5.3.8.tgz",
      "sizeBytes": 1681212,
      "sha256": "8b02d4a7482e0f0a2b1da58f1c9c86830e96cc2f77f094f89e4681b19886bc38"
    },
    {
      "file": "nbs-consumption-classification-2013.pdf",
      "sizeBytes": 1141656,
      "sha256": "ce76c1a0682264128911fd346eb5618084aaee3973fa51478846c660bdc47837"
    }
  ]
}