UI · 成品 差旅与报销
规格

差旅与报销

拍照上传票据，Adis 识别、按制度检查、填好报销单。

待提交2张
审批中1张
本月已报¥6,420
预计到账10-15EX-0928

报销单 EX-0932

Adis 已按票据填好，你核对后提交。

识别出的票据

4 张 · 合计 ¥2,759

  • 高铁 北京南 → 上海虹桥10-08 · 二等座¥553合规
  • 酒店 上海 2 晚10-08 至 10-10¥1,160超标 ¥160
  • 出租车 3 张10-08 至 10-10¥186合规
  • 招待餐 Demo Customer B4 人¥860要写说明
酒店超标 ¥160
制度：上海每晚 ¥500。写一句原因，或者超出的部分自己承担。

我的报销

单号事由金额（元）状态
EX-0932上海客户拜访2,759待提交
EX-09289 月市内交通642审批中
EX-0915展会物料3,018已到账

审批进度：EX-0928

  1. 10-09 18:02
    提交
    王敏
  2. 10-09 18:03
    按制度检查通过
    财务智能体 · AI
  3. 10-10 09:20
    部门经理批准
    刘洋
  4. 进行中
    财务复核
    预计 10-15 到账

提示词

复制给 Adis、Claude Code 或 Codex：它用 aidc 命令行做出同样的页面，再换成你们公司的真数据。页面上的数据都是虚构的 Demo Company。

用 AIDC UI 做一个「差旅与报销」页面。给谁用：员工、财务。这一页只回答一个问题：我的报销交齐了吗，到哪一步了？

1. 拿规格：运行 `aidc ui template expense --json > expense.ui.json`。页面从上到下照规格排：页头（新建报销） → 4 个数字 → 报销单表单 + Adis 识别出的票据 → 我的报销 → 审批进度。
2. 起应用：运行 `aidc app init expense --template semantic --title "差旅与报销"`。入口页引入 /developer/sdk/v1/ui.css；脚本里 `import { ui } from "/developer/sdk/v1/aidc.js"`，调 `ui.render(规格, "#app", { onAction })` 画页面。
3. 换成真数据：运行 `aidc semantic object-types` 找到报销单、票据、差旅申请、报销制度对应的对象，再用 `aidc semantic objects` 和 `aidc semantic aggregate` 取数，替换规格里的示例数。找不到的数不要编：那一块换成 Empty 节点，写清「还没有数据」和下一步。
4. 接动作：在 onAction 里按按钮的 name 处理（例如 expense.create）。改数据只走 Action（`aidc semantic apply`）；要人批的事，先用 Proposal 节点给人看，人点确认后再执行。
5. 守 AIDC UI 的规矩：只用规格节点和 aidc- 开头的类（`aidc ui components`），不自己写颜色、边框、阴影；一页一个主按钮；先结论、后细节；线只留给数据；智能体和人一样显示，智能体标 AI。
6. 检查后发布：`aidc ui validate expense.ui.json`，`aidc app dev` 在本机看效果，`aidc app check` 通过后 `aidc app deploy`。

样子参考：https://www.ai-dc.ai/developer/ui/templates/expense