在前端工程实践中，脱离后端依赖独立构建完整业务闭环是检验开发者架构能力的核心标准。以下 5 个提示词聚焦于本地数据持久化、复杂算法实现及高性能渲染。选题涵盖数据可视化、文件处理、富文本编辑及复杂状态管理，旨在考察中高级前端工程师在逻辑严密性、性能优化及代码模块化方面的真实水平。
- 本地化财务仪表盘：多级联动与静态数据可视化
难度定位：复杂非3D前端。重点考察 ECharts/Chart.js 深度配置、多级筛选联动逻辑、大数据量本地聚合分析及响应式布局。
技术栈：Vue 3 (Composition API), ECharts, Element Plus, Vanilla JS
Prompt 内容：
请开发一个"本地财务分析仪表盘"单页应用，所有数据硬编码在 JS 数组中，严禁后端交互。
核心功能要求：
-
数据源构造：在代码中生成包含 200+ 条记录的 salesData 数组，字段包括：日期（2024-01 至 2024-12）、大区（华北/华东/华南）、省份、城市、产品线（A/B/C）、销售额、利润。
-
筛选交互区：
-
一级筛选：大区下拉框（含"全部"）。
-
二级筛选：省份下拉框，需根据所选大区动态联动更新选项（含"全部"）。
-
三级筛选：产品线多选框。
-
时间范围：滑块选择起始月份和结束月份。
- 可视化图表区（使用 ECharts）：
-
主图：堆叠柱状图，展示各月份不同产品线的销售额趋势。
-
副图：南丁格尔玫瑰图，展示当前筛选条件下各省份的利润占比。
-
折线图：展示销售额与利润的双轴对比趋势。
-
要求：筛选条件改变时，图表数据实时重绘，禁用入场动画以确保响应速度。
- 数据明细表：
-
展示筛选后的原始数据列表，支持分页（每页 10 条）。
-
支持点击表头按"销售额"或"利润"进行升序/降序排序。
-
高亮显示利润率为负的条目。
- UI/UX 要求：
-
深色科技主题，卡片式布局。
-
移动端适配：小屏幕下图表垂直堆叠，筛选器折叠为抽屉式菜单。
- 代码规范：
-
单文件 HTML（通过 CDN 引入 Vue 3, ECharts, Element Plus）。
-
使用 Composition API 封装 useFilter 和 useChart 逻辑。
-
数据聚合算法（如按月汇总、计算利润率）需添加详细中文注释。
- CSV 数据清洗与转换工具：文件解析与本地处理
难度定位：复杂非3D前端。重点考察大文件流式解析（或分块处理）、数据校验规则引擎、本地文件生成及错误边界处理。
技术栈：React, PapaParse, TailwindCSS, FileSaver.js
Prompt 内容：
请构建一个"CSV 数据清洗工作台"单页应用，用于本地处理用户上传的销售数据。
核心功能要求：
- 文件上传与解析：
-
支持拖拽上传 .csv 文件（最大 50MB）。
-
使用 PapaParse 进行解析，显示解析进度条。
-
自动检测表头，若缺少必要字段（如 ID, Date, Amount），提示错误并拒绝加载。
- 数据预览与清洗规则：
-
表格展示前 50 条数据，支持横向滚动。
-
提供清洗面板：
-
移除空值行：勾选后删除任何字段为空的行。
-
格式标准化：将 Date 字段统一转换为 YYYY-MM-DD 格式。
-
去重：基于 ID 字段移除重复记录。
-
实时显示清洗前后的行数变化及受影响的数据预览。
- 数据转换：
-
新增列功能：允许用户编写简单的 JS 表达式（如 `row.Amount * 0.1`）计算新列（如 Tax）。
-
列映射：允许用户重命名表头。
- 导出功能：
-
支持将清洗后的数据导出为新的 .csv 或 .json 文件。
-
导出时提供文件名自定义输入框。
- UI/UX 要求：
-
简洁的白色背景，蓝色强调色。
-
操作按钮具备加载状态反馈。
- 代码规范：
-
单文件 HTML（通过 CDN 引入 React, Babel, Tailwind, PapaParse）。
-
使用 Function Components + Hooks。
-
文件解析、清洗规则执行及表达式求值逻辑需添加中文注释，注意安全性（避免 eval 直接使用，建议使用 Function 构造器或沙箱）。
- Markdown 实时预览编辑器：语法高亮与本地文件操作
难度定位：中等非3D前端。重点考察文本处理、防抖渲染、File System Access API（或 fallback）及快捷键绑定。
技术栈：Vue 3, marked.js, highlight.js, PrismJS
Prompt 内容：
请开发一个"Markdown 实时预览编辑器"单页应用。
核心功能要求：
- 编辑区：
-
左侧为文本输入区，支持标准 Markdown 语法。
-
支持常用快捷键：Ctrl+B 加粗，Ctrl+I 斜体，Ctrl+K 插入链接。
-
输入时具备防抖（Debounce，300ms）处理，避免频繁渲染导致卡顿。
- 预览区：
-
右侧实时渲染 Markdown 内容为 HTML。
-
代码块需使用 highlight.js 或 PrismJS 进行语法高亮。
-
支持 GitHub 风格的 Markdown 样式（表格、引用、列表等）。
- 文件操作：
-
打开文件：读取本地 .md 文件内容填充到编辑器。
-
保存文件：将当前内容下载为 .md 文件。
-
若浏览器支持 File System Access API，尝试直接保存原文件；否则使用传统下载方式。
- 同步滚动：
- 编辑区与预览区滚动位置保持大致同步（基于行数比例计算）。
- UI/UX 要求：
-
左右分栏布局，中间拖拽条可调整左右宽度比例。
-
深色主题，类似 VS Code 风格。
- 代码规范：
-
单文件 HTML（通过 CDN 引入 Vue 3, marked, highlight.js）。
-
同步滚动算法及文件读写逻辑需添加中文注释。
-
确保在移动端下自动切换为标签页切换模式（编辑/预览二选一）。
- 本地任务看板：拖拽排序与状态持久化
难度定位：复杂非3D前端。重点考察原生 Drag & Drop API 或 SortableJS 集成、复杂状态同步、本地存储及多级筛选。
技术栈：React, SortableJS, localStorage, TailwindCSS
Prompt 内容：
请开发一个"本地项目任务看板"单页应用，类似 Trello 的简化版。
核心功能要求：
- 看板结构：
-
支持创建多个列表（List），如"待办"、"进行中"、"已完成"。
-
每个列表中包含多个任务卡片（Card）。
-
支持拖拽任务卡片在不同列表间移动，或在同一列表内排序（使用 SortableJS CDN）。
- 任务详情：
-
点击卡片弹出模态框，编辑任务标题、描述、优先级（高/中/低）、截止日期。
-
优先级不同显示不同颜色标签。
- 筛选与搜索：
-
顶部提供全局搜索框，实时过滤所有列表中的任务（匹配标题或描述）。
-
提供优先级筛选下拉框（全部/高/中/低）。
-
筛选结果需高亮显示匹配项，未匹配项隐藏。
- 数据持久化：
-
任何操作（新增、删除、拖拽排序、编辑）后，立即同步更新 localStorage。
-
页面刷新后恢复上次状态，包括列表顺序和卡片位置。
- UI/UX 要求：
-
现代简约风格，卡片带有轻微阴影和悬停上浮效果。
-
响应式设计：移动端下列表垂直堆叠，桌面端水平排列。
- 代码规范：
-
单文件 HTML（通过 CDN 引入 React, Babel, SortableJS, Tailwind）。
-
使用 Function Components + Hooks。
-
拖拽事件处理及状态同步逻辑需添加详细中文注释。
- 智能待办事项清单：自然语言解析与优先级排序
难度定位：中等非3D前端。重点考察字符串正则解析、本地数据排序、定时任务模拟及交互反馈。
技术栈：Vanilla JS (ES6+), CSS3, localStorage
Prompt 内容：
请使用原生 JavaScript (ES6+) 开发一个"智能待办事项清单"单页应用。
核心功能要求：
- 智能输入：
-
用户输入待办事项，支持自然语言格式，如"明天下午3点开会 #工作 !高优先级"。
-
系统需解析出：任务内容（"开会"）、截止时间（"明天下午3点"，转换为 Date 对象）、标签（"工作"）、优先级（"高"）。
-
若无法解析时间，默认为"今天"；若未指定优先级，默认为"中"。
- 列表展示：
-
任务按优先级（高>中>低）和截止时间（早>晚）排序。
-
已过期的任务显示红色警告标识，并置顶。
-
支持标记完成（划线显示）、删除任务。
- 筛选视图：
- 提供"全部"、"进行中"、"已完成"、"已过期"四个标签页切换。
- 数据持久化：
- 数据存储在 localStorage 中。
- UI/UX 要求：
-
清新明亮的风格，使用柔和的色彩区分优先级。
-
输入框具备自动补全标签建议（基于历史输入）。
- 代码规范：
-
单文件 HTML，无外部库依赖。
-
自然语言解析函数需添加详细中文注释，解释正则表达式逻辑。
-
代码结构模块化，分为 Parser, Store, Renderer 等模块。
设计说明
每条提示词均明确了数据结构、交互细节、性能要求及代码规范，确保了评测的针对性与落地性，能够有效考察开发者在复杂业务逻辑处理、算法实现及工程化规范方面的综合能力。