1. 项目概述当AI代码助手遇上积木式报表最近在折腾数据可视化项目时我一直在想有没有一种方式能让我们这些开发者从繁琐的图表配置、数据对接和样式调整中解放出来把更多精力放在业务逻辑和数据分析本身。直到我尝试将 Claude Code 和积木报表JimuReport这两个看似不同赛道的工具组合在一起才真正找到了一个接近“生产级”的解决方案。简单来说这个组合的核心思路是用 Claude Code 作为“智能大脑”来理解和生成复杂的数据处理逻辑与前端配置再用积木报表作为“可视化骨架”来快速搭建和渲染出专业的数据大屏。这不仅仅是两个工具的简单叠加。Claude Code 作为一款深度集成在 IDE 中的 AI 编程助手其优势在于能理解上下文、生成高质量的代码片段、解释复杂逻辑甚至能根据自然语言描述直接写出可运行的函数或组件。而积木报表作为一个开源的低代码报表工具它提供了拖拽式设计、丰富的图表组件库和灵活的数据源配置能力能快速将结构化的数据转化为美观的图表。当 AI 的“创造力”和“理解力”注入到低代码的“高效率”框架中时就产生了一种奇妙的化学反应你只需要用自然语言描述你想要的大屏效果和数据逻辑Claude Code 就能帮你生成对应的 SQL 查询、JavaScript 配置对象甚至是完整的积木报表数据源和图表配置代码你只需将其“填入”积木报表的相应位置即可。这个组合特别适合以下几类场景一是需要快速为内部会议、运营监控或客户演示搭建临时性数据看板的团队时间紧、需求变更多二是那些对前端 ECharts 等可视化库不熟悉但又需要产出专业级可视化效果的后端或数据分析工程师三是希望将数据大屏开发流程标准化、自动化减少重复劳动的项目。我实测下来原本需要一两天才能搞定的复杂大屏现在压缩到了几个小时而且代码质量和可维护性反而更高了。接下来我就把这套从环境准备到最终部署上线的完整流程和核心心法拆解给你。2. 核心工具链解析与选型考量2.1 为什么是 Claude Code 积木报表在开始动手之前我们必须先理解为什么这个组合能发挥“112”的效果而不是随便选一个 AI 工具和一个报表工具。这背后是对两者能力边界和互补性的深度考量。Claude Code 的核心价值在于“语义理解”与“代码生成”的闭环。它不是一个简单的代码补全工具。当你在大屏开发中遇到诸如“我需要一个展示过去30天每日用户活跃度趋势的折线图并且周末要用特殊颜色标出”这类需求时你可以直接向 Claude Code 描述。它能做的不仅仅是给你一段 ECharts 的配置代码。更关键的是它能理解这个需求背后的数据逻辑首先需要从数据库的user_activity表中按天聚合数据过滤出最近30天的记录其次它需要判断每一天是周几并为周六、周日的数据点打上标记。Claude Code 可以一气呵成地为你生成对应的 SQL 查询语句以及将查询结果映射到 EChartsoption对象中的 JavaScript 代码其中包含了对series.data进行条件样式设置的逻辑。这种从需求到数据再到展现层的连贯性理解是普通代码片段库无法比拟的。积木报表的核心价值在于“可视化编排”与“数据绑定”的抽象层。它本质上是一个设计器和渲染引擎。你不需要手动编写 HTML 和 JavaScript 去创建画布、初始化图表实例、处理响应式。积木报表通过拖拽组件如折线图、柱状图、饼图、数字翻牌器、配置数据源支持 SQL、API、静态 JSON 等并在设计器里调整样式颜色、字体、背景最终生成一个可独立运行的报表页面。它的输出通常是一个 JSON 格式的模板文件这个文件描述了大屏的所有元素及其属性。这个 JSON 模板正是 Claude Code 可以完美生成和操作的对象。两者的结合点在于“配置即代码代码可生成”。我们开发大屏的痛点往往不是画不出图表而是写那些繁琐、重复且容易出错的配置代码。现在这个痛点被转化了我们将对 AI 描述业务需求和想要的视觉效果AI 生成标准化的积木报表配置代码或生成所需的数据处理 SQL 和 ECharts 配置片段我们再将其填入积木报表。积木报表负责将这份“高级配置”渲染成最终页面。这样一来开发者的角色从“码农”变成了“需求架构师”和“质量审核员”生产力得到了极大释放。注意这里要避免一个误区即期望 AI 完全替代开发。Claude Code 生成的代码和配置需要经过开发者的审查和调试尤其是在处理复杂的业务逻辑和数据安全时。它的定位是强大的副驾驶而不是自动驾驶。2.2 环境准备与基础配置工欲善其事必先利其器。要让这套组合拳流畅运行需要打好以下基础。我的操作环境以 Windows/VSCode 为例Mac 或 Linux 用户操作逻辑类似。2.2.1 Claude Code 在 VSCode 中的深度配置首先确保你已经在 VSCode 中安装并正确配置了 Claude Code 插件。这不仅仅是点击安装那么简单合理的配置能极大提升后续协作效率。安装与认证在 VSCode 扩展商店搜索 “Claude Code” 并安装。安装后侧边栏会出现 Claude 的图标。点击图标通常需要你用 Anthropic 的账户进行登录认证。确保网络环境通畅能稳定连接其服务。关键配置项优化打开 VSCode 设置Ctrl,搜索Claude。有几个设置我强烈建议调整Claude Code: Auto Trigger Completions可以考虑关闭或设置为特定场景触发。在全屏编写积木报表的 JSON 配置时过于频繁的自动补全可能会干扰思路。我更倾向于在需要时通过快捷键默认为CtrlI手动唤出 Claude Code 的指令输入框。Claude Code: Max Tokens适当调高这个值比如设置为 4000。因为生成一个完整图表的配置代码或一段稍复杂的 SQL可能需要较长的上下文。Token 数限制了 AI 单次响应的长度设置太低可能导致回答被截断。Claude Code: Files to Include如果你有专门的项目目录可以在这里设置路径模式如**/dashboard/*.json让 Claude Code 更专注于理解你的报表配置文件提升相关建议的准确性。上下文管理技巧Claude Code 的强大在于它能读取你当前打开的文件和代码库。在开始让 AI 生成大屏配置前我习惯先打开积木报表官方文档中关于“图表配置 JSON 结构”的页面或者自己项目中的一个已有配置样例文件。然后在指令中明确告诉 Claude Code“请参考当前打开的sample_chart.json文件的结构和风格。” 这样它能生成格式更统一、更符合项目规范的代码。2.2.2 积木报表的本地部署与项目初始化积木报表通常有两种使用方式使用其官方提供的在线设计器或者本地部署开源版本。为了与 Claude Code 深度集成尤其是需要对接自定义数据库、使用内部 API我推荐本地部署。后端服务部署从积木报表的 GitHub 仓库下载最新 release 的 Jar 包或 War 包。如果你有 Java 环境直接使用java -jar命令运行即可。它内嵌了 Tomcat 和数据库默认为 H2启动后访问http://localhost:8080就能进入设计器。对于生产级应用建议将其部署到正式的 Tomcat 或 Spring Boot 项目中并切换为 MySQL 等数据库。前端设计器熟悉登录本地部署的设计器。花些时间熟悉界面左侧的组件库、右侧的属性配置面板、中间的画布。重点理解两个核心概念数据集这是大屏的数据来源。可以是 SQL 查询直连你的业务数据库需谨慎配置数据源安全也可以是 HTTP 接口返回的 JSON 数据。这是我们与 Claude Code 交互的重点之一。组件属性每个图表都有大量的可配置属性如标题、图例、X/Y轴、系列数据、颜色、标签等。这些属性最终都对应一个 JSON 结构。我们的目标就是让 Claude Code 帮我们生成这个结构。创建第一个“模板项目”在 VSCode 中为你的大屏项目创建一个独立的文件夹。在这个文件夹里可以创建如sql/存放 Claude Code 生成的查询语句、config/存放图表 JSON 配置片段、docs/存放需求描述文件等子目录。保持项目结构清晰方便 Claude Code 理解上下文。3. 从需求到配置AI驱动的大屏开发工作流掌握了工具接下来就是核心的工作方法。我将通过一个完整的实例展示如何将一句模糊的业务需求一步步变成可交互的数据大屏。3.1 需求解析与Prompt工程假设产品经理给你这样一个需求“做一个实时监控大屏核心要能看到今天和昨天的销售额对比柱状图还要有当前月的销售额达成进度环状图并且关键指标要用数字突出显示。”直接把这个扔给 AI效果可能不好。我们需要先进行“需求翻译”把它拆解成 AI 能精确理解的指令。我的做法是分两步走第一步结构化需求描述。我会创建一个名为requirement.md的 Markdown 文件并这样编写# 销售监控大屏需求 ## 数据源 - 数据库类型MySQL - 表名sales_order - 相关字段 - order_id (主键) - order_amount (订单金额DECIMAL) - order_time (下单时间DATETIME) - status (状态completed表示已完成) ## 图表需求 1. 对比柱状图 - 标题今日 vs 昨日销售额对比 - 维度两个柱子分别代表“今日”和“昨日”。 - 度量对应时间段内状态为‘completed’的订单总金额。 - 样式今日柱子用蓝色(#1890ff)昨日用灰色(#d9d9d9)。顶部显示具体金额。 2. 进度环状图 - 标题本月销售额目标达成率 - 数据本月至今累计销售额 / 本月总销售目标假设目标为 100,000。 - 样式环形图显示百分比。已完成部分用绿色(#52c41a)剩余部分用浅灰色(#f0f0f0)。 3. 关键指标卡 - 指标1今日实时销售额动态更新 - 指标2本月累计销售额 - 样式大号字体附带上升/下降图标趋势。 ## 其他要求 - 所有图表需要自动刷新每5分钟更新一次数据。 - 大屏整体色调为科技蓝。第二步编写给 Claude Code 的精准 Prompt。在 VSCode 中打开这个需求文件然后唤出 Claude Code 指令框输入如下内容“我正在使用积木报表JimuReport开发数据大屏。请根据当前打开的requirement.md文件中的详细需求帮我完成以下工作为‘对比柱状图’编写 MySQL 查询语句。需要分别计算今日从当天00:00:00至今和昨日昨天00:00:00至23:59:59的已完成订单总额。请考虑order_time字段的索引效率。根据上面的查询结果生成一个符合积木报表格式的‘柱状图组件’的 JSON 配置片段。重点包括dataset数据集的配置假设查询结果字段为date_label和total_amount和option中关于柱状图样式颜色、标签的 ECharts 配置。为‘进度环状图’生成一个计算达成率的 SQL 语句并生成对应的环形图 JSON 配置片段。 请分点输出并给出简要解释。”这样的 Prompt 提供了充足的上下文需求文件、明确的边界使用积木报表、MySQL和具体的输出要求分点、带解释能极大提高 Claude Code 生成代码的准确性和可用性。3.2 AI生成SQL与数据对接Claude Code 对于编写 SQL 查询非常拿手。针对我们的需求它可能会生成如下代码-- 需求1今日vs昨日销售额对比查询 -- 使用CURDATE()和DATE_SUB函数明确时间范围利用索引 SELECT 今日 AS date_label, COALESCE(SUM(order_amount), 0) AS total_amount FROM sales_order WHERE status completed AND order_time CURDATE() -- 今日开始时间 AND order_time NOW() -- 当前时刻 UNION ALL SELECT 昨日 AS date_label, COALESCE(SUM(order_amount), 0) AS total_amount FROM sales_order WHERE status completed AND order_time DATE_SUB(CURDATE(), INTERVAL 1 DAY) -- 昨日开始 AND order_time CURDATE() -- 昨日结束今日0点 ORDER BY date_label DESC; -- 让“今日”显示在前 -- 需求2本月销售额达成率查询 -- 假设本月目标存储在变量或配置表中这里用硬编码示例 SET monthly_target 100000; SELECT ROUND(COALESCE(SUM(order_amount), 0), 2) AS current_amount, monthly_target AS target_amount, ROUND(COALESCE(SUM(order_amount), 0) / monthly_target * 100, 2) AS achievement_rate FROM sales_order WHERE status completed AND order_time DATE_FORMAT(NOW(), %Y-%m-01) -- 本月第一天 AND order_time NOW();实操心得Claude Code 生成的 SQL 通常语法正确但一定要审查其性能和对 NULL 值的处理。比如上面的COALESCE函数用于防止无数据时返回 NULL这是一个很好的实践。另外对于“今日实时”这种动态范围使用NOW()比CURDATE() INTERVAL 1 DAY更精确。你需要根据自己数据库的实际情况确认时间函数和字段类型是否匹配。接下来我们需要将这些 SQL 配置到积木报表的数据集中。在积木报表设计器中找到“数据集管理”创建一个新的“SQL 数据集”。将 Claude Code 生成的 SQL 粘贴进去。这里有一个关键步骤参数化。如果“本月目标”是动态的我们可以将其设置为参数比如:monthly_target然后在数据集配置里绑定一个静态值或来自其他查询的结果。Claude Code 也可以帮助我们生成带参数的 SQL 语句只需在 Prompt 中说明即可。3.3 AI生成图表JSON配置与样式调试这是最体现 AI 价值的一环。我们将 Claude Code 生成的 SQL 查询结果映射到积木报表的图表配置上。继续我们之前的 PromptClaude Code 可能会为柱状图生成如下 JSON 配置片段{ type: echarts, name: sales_comparison_chart, title: 今日 vs 昨日销售额对比, dataset: { source: sql_dataset_1, // 这里指向你在积木报表中创建的SQL数据集名称 dimensions: [date_label, total_amount] }, option: { tooltip: { trigger: axis, formatter: {b}: ¥{c} }, xAxis: { type: category, data: [今日, 昨日] // 通常这里会绑定数据集的第一列date_label }, yAxis: { type: value, axisLabel: { formatter: ¥{value} } }, series: [ { name: 销售额, type: bar, data: [ // 这里会绑定数据集的第二列total_amount { value: 0, // 实际值由数据集动态填充 itemStyle: { color: #1890ff } }, { value: 0, itemStyle: { color: #d9d9d9 } } ], label: { show: true, position: top, formatter: ¥{c} } } ] } }这段代码已经非常接近积木报表可用的配置了。我们需要做的是在积木报表设计器中拖入一个“ECharts 图表”组件。在其属性面板的“数据”选项卡中选择我们之前创建的 SQL 数据集sql_dataset_1。将 Claude Code 生成的option对象整体复制到“图表配置”或“自定义选项”的代码编辑框中具体位置因积木报表版本而异。微调数据绑定。注意Claude Code 生成的xAxis.data和series[0].data是静态的。在积木报表中我们通常会将它们设置为动态绑定数据集的字段。你可能需要将xAxis.data改为dataset.dimensions[0]的映射series[0].data改为dataset.source的映射。这个过程你同样可以求助 Claude Code“在积木报表中如何将数据集的列动态绑定到 ECharts 的 xAxis.data 和 series.data 上”对于环形图仪表盘和数字翻牌器流程是类似的。告诉 Claude Code“生成一个 ECharts 环形图gauge的 option 配置显示百分比已达成部分绿色未达成部分灰色。” 它会给你一个标准的series: [{type: gauge, ...}]的配置。数字翻牌器在积木报表中可能有独立组件你可以让 AI 生成一个简单的 HTML/CSS 片段或者直接使用积木报表提供的“数字”组件并绑定数据。3.4 布局、样式与交互的AI辅助优化基础图表生成后大屏的颜值和用户体验同样重要。这部分工作同样可以借助 Claude Code。整体布局与响应式你可以将初步搭建好的大屏截图或者用文字描述布局例如“顶部是标题和关键指标卡排成一排中间左侧是柱状图右侧是环形图底部是一个滚动表格”然后问 Claude Code“在积木报表中如何实现这种栅格化布局请给出主要的容器 DIV 或布局组件的配置思路。” 它可以为你提供使用栅格系统如果积木报表支持或通过绝对定位、百分比宽度进行布局的 CSS 建议。主题与配色如果你对默认配色不满意可以直接要求“给我一个科技蓝主题的 ECharts 颜色数组包含6个渐变色系。” Claude Code 会生成类似[#3ba0ff, #36cbcb, #4ecb73, #fbd437, #f2637b, #975fe5]的调色板。你只需将这个数组应用到积木报表的图表主题设置或全局样式中。交互与钻取一个高级的大屏往往需要交互。例如点击柱状图的某个柱子可以下钻到对应的明细数据。你可以向 Claude Code 描述交互逻辑“在 ECharts 柱状图中如何配置点击事件当点击柱子时需要获取该柱子对应的数据维度如‘今日’并跳转到另一个报表页面同时传递这个参数。” Claude Code 会生成包含on: { click: ... }事件的 ECharts 配置代码并提示你需要在积木报表或前端框架中如何实现页面跳转和参数传递。4. 生产级部署与性能调优实战当大屏在本地设计器里运行良好后就要考虑将其部署到生产环境并应对真实的数据量和并发访问。这一步的很多工作Claude Code 也能提供宝贵的建议。4.1 性能优化从SQL到渲染的全链路大屏卡顿的罪魁祸首通常是数据查询慢和前端渲染压力大。数据库层优化将 Claude Code 生成的 SQL 交给它自己来评审。Prompt 可以是“请分析下面这条用于大屏的 SQL 查询语句指出可能的性能瓶颈并提供优化建议例如索引策略、查询重构。” 它会提醒你为order_time和status字段创建复合索引建议将UNION ALL改写为条件聚合CASE WHEN以减少查询次数甚至提醒你对于超大规模数据是否考虑使用物化视图或定时汇总表。积木报表配置优化数据缓存在积木报表的数据集配置中务必设置合理的缓存时间。对于非实时性要求极高的数据如昨日对比设置5-10分钟的缓存可以极大减轻数据库压力。你可以问 Claude Code“在积木报表的 JSON 配置中如何为 SQL 数据集设置缓存过期时间” 它会指导你找到对应的配置项。分页与懒加载如果大屏包含数据表格且数据量巨大一定要启用分页。Claude Code 可以帮你生成支持分页查询的 SQL 语句LIMIT ?, ?以及对应的前端配置。图表简化过于复杂的图表如数千个数据点的折线图会拖慢渲染。可以要求 AI 提供数据采样sampling或聚合的方案。例如“我有一个包含 10,000 个时间点数据的序列在前端 ECharts 中如何优化渲染性能请给出配置代码示例。” 它可能会建议开启large: true模式或使用dataZoom进行初始范围缩放。4.2 安全与权限管控生产级大屏必须考虑安全。数据源安全绝对不要让积木报表直接连接生产数据库的主库。应该为其配置一个只读权限的数据库账号并且限制其只能访问特定的视图View或汇总表。这个视图的创建 SQL也可以让 Claude Code 基于你的原始表结构来生成。API 接口安全如果数据来自 HTTP API确保接口有认证机制如 Token。在积木报表配置 HTTP 数据集时如何添加请求头Header携带 Token这个问题可以抛给 Claude Code它会给出具体的配置示例。报表访问权限积木报表企业版通常支持角色和权限管理。你可以梳理权限模型如管理员可编辑运营人员仅可查看然后让 Claude Code 帮你规划对应的用户-角色-报表的关联关系虽然具体配置需要在管理后台操作但 AI 能帮你理清思路。4.3 自动化与持续集成对于需要定期更新或频繁微调的大屏我们可以让流程更自动化。配置版本化积木报表的报表模板JSON 文件应该纳入 Git 版本控制。这样任何修改都有记录可以回滚也便于团队协作。Claude Code 可以帮助你编写.gitignore文件忽略掉一些临时文件。CI/CD 流水线你可以设想一个场景开发者在本地用 Claude Code 生成并修改了报表 JSON 配置提交到 Git。然后通过 CI/CD 工具如 Jenkins、GitLab CI自动将最新的 JSON 文件部署到积木报表的服务器上。这个部署脚本可能是调用积木报表的导入 API 或直接替换文件可以让 Claude Code 来起草。Prompt 如“写一个 Shell 脚本将本地的dashboard.json文件通过 SCP 上传到远程服务器的指定目录并重启积木报表服务假设是 systemd 服务。”监控与告警大屏本身是监控业务的那谁又来监控大屏呢你可以让 Claude Code 帮你写一段简单的 Node.js 或 Python 脚本定时访问大屏的关键数据接口检查返回的数据是否正常如非空、数值在合理范围如果异常则发送告警邮件、钉钉、企业微信。这相当于为你的数据大屏加上了“心跳检测”。5. 常见问题排查与进阶技巧在实际操作中你肯定会遇到各种“坑”。下面是我总结的一些典型问题及其解决方案其中很多排查思路也来自与 Claude Code 的“讨论”。5.1 数据不显示或显示错误这是最常见的问题通常出现在数据链路环节。问题现象图表区域空白或显示“暂无数据”。排查步骤检查数据集在积木报表设计器的“数据集预览”功能中直接运行 SQL 或 HTTP 请求看是否能返回数据。如果没数据问题在查询本身。把 SQL 复制出来让 Claude Code 检查“这段 SQL 在 MySQL 中查询某表但返回空可能的原因有哪些”它会列出常见原因时间条件错误、状态字段值不匹配、连接条件错误等。检查数据绑定确认图表组件的“数据集”属性是否选择了正确的数据集。然后检查 ECharts 配置中的dataset.source引用或series.data的手动绑定是否正确映射到了数据集的列。一个技巧是先让图表绑定一个简单的静态数据看是否能正常渲染以排除配置语法错误。检查浏览器控制台打开浏览器的开发者工具F12查看 Console 和 Network 标签页。是否有 JavaScript 报错请求数据的接口是否返回了 200 状态码返回的数据结构是否符合 ECharts 的预期将错误信息或返回的 JSON 数据复制给 Claude Code它能帮你快速定位是语法错误还是数据格式错误。5.2 图表样式不符合预期问题现象颜色不对、布局错乱、文字重叠。排查与解决样式覆盖问题积木报表可能有全局样式、组件样式多层叠加。使用浏览器检查元素工具查看最终生效的 CSS 样式确认是否是自定义样式被覆盖。可以尝试在 ECharts 的option中提高样式设置的优先级或使用!important谨慎使用。响应式失效大屏在不同分辨率下显示异常。这需要检查图表的grid布局配置、容器的宽度高度是否设置为百分比。可以问 Claude Code“如何配置 ECharts 图表使其容器大小变化时能自动重绘resize” 它会给出监听window.onresize事件并调用chart.resize()的代码示例你需要将其集成到积木报表的自定义 JavaScript 代码块中。字体或图标缺失如果使用了特殊字体或图标库确保相关资源文件被正确引入到积木报表的页面中。5.3 AI生成代码的调试与修正Claude Code 生成的代码并非总是开箱即用需要人工审查和调试。策略采用“分段测试逐步集成”的方法。不要一次性让它生成整个大屏的所有配置。而是按模块一个图表、一个查询来生成和测试。精准反馈当代码出错时将完整的错误信息、你的代码片段以及相关上下文如数据表结构一起提供给 Claude Code。例如“我运行你生成的这段 SQL 时MySQL 报错 ‘Unknown column ‘xxx’ in ‘field list’’。我的表结构是(id, amount, create_time)。请修正 SQL。” 它通常能立刻发现并修正字段名拼写错误或逻辑错误。代码风格统一如果你有团队的编码规范比如 SQL 关键字大写、缩进用空格可以在最初的 Prompt 中就明确提出“请按照以下规范生成代码SQL 关键字使用大写使用 4 个空格缩进。” Claude Code 会遵循这些指令。5.4 进阶技巧让AI理解你的业务逻辑要让 Claude Code 发挥最大效用需要让它“理解”你的业务。创建业务术语表在项目根目录维护一个glossary.md文件定义核心业务概念。例如“GMVGross Merchandise Volume商品交易总额指状态为‘已支付’的订单金额总和。” 然后在与 Claude Code 对话时可以提示它“请参考项目中的glossary.md文件来理解业务术语。”提供数据模型将主要的数据表结构CREATE TABLE 语句保存在schema.sql文件中。让 Claude Code 在生成查询时参考这个文件能极大减少因字段不熟悉导致的错误。积累 Prompt 模板将那些效果好的、可复用的 Prompt 保存下来。比如“生成对比柱状图配置的 Prompt”、“生成环形图进度配置的 Prompt”、“优化慢查询 SQL 的 Prompt”。下次遇到类似需求只需稍作修改即可使用效率倍增。经过这样一套从工具选型、需求分析、代码生成、调试优化到生产部署的完整流程Claude Code 与积木报表的组合已经从一种有趣的尝试变成了我日常开发数据可视化大屏的稳定工作流。它并没有消除开发者的工作而是将我们从重复、机械的编码劳动中解放出来让我们能更专注于业务逻辑的梳理、数据价值的挖掘和用户体验的打磨。这个组合的潜力远不止于生成静态报表未来结合更复杂的交互、实时数据流甚至与其他 AI Agent 联动或许能创造出更智能的数据决策助手。