Admin Ui Prototype

Generate a page prototype

1. Parse the request into:
   • page type
   • business entity
   • fields to show or edit
   • filters and table actions
   • special interactions such as batch actions, tabs, charts, or nested forms
2. If missing details would materially change the layout or data model, ask a short clarifying question. Otherwise make reasonable assumptions.
3. Read knowledge/ui-conventions.md.
4. Read knowledge/page-templates.md.
5. Read only the component docs required for the page type:

Initialize or update the preview project

• If webui/admin-ui/package.json does not exist:
  • follow knowledge/scaffold.md
  • create the scaffold files under webui/admin-ui
  • replace {{pageTitle}}, {{viewImportPath}}, and {{ViewComponent}}
  • run pnpm install in webui/admin-ui
• If the preview project already exists:
  • update webui/admin-ui/src/App.vue
  • update webui/admin-ui/index.html

Output requirements

• Create the main page at webui/admin-ui/src/views/{kebab-case-module}/index.vue.
• Create child components under webui/admin-ui/src/views/{kebab-case-module}/components/ when the page benefits from splitting dialogs or sections.
• Provide the route snippet from knowledge/page-templates.md.
• Keep the output runnable with mock data unless the user explicitly asks for API wiring only.

Generation rules

1. Use <script setup lang="ts">.
2. Include runnable mock data with at least 5 records when the page type needs a dataset.
3. Wrap mock loading in mockFetch with a 300 ms timeout for list-like data flows.
4. Add // TODO: 替换为真实 API 调用 at each mock or placeholder API call.
5. Use Arco Design Vue components for interaction controls.
6. Use CSS variables such as var(--color-*) instead of hard-coded colors.
7. Use scoped LESS styles.
8. Use snake_case in DTO fields to stay aligned with backend APIs, and camelCase for frontend variables.
9. Keep UI copy in Chinese unless the user asks for another language.
10. Default the page file to src/views/{kebab-case-module}/index.vue.

Final response

• List the generated files.
• Mention whether the scaffold was created or reused.
• Include the route registration snippet.
• Call out the remaining // TODO placeholders.
• Start pnpm dev and share the local URL only when the user asks for a preview or when local validation is required.