feat(ui): 重构注册审核平台原型界面
This commit is contained in:
@@ -0,0 +1,376 @@
|
||||
# Registration Agent Prototype Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Build a new high-fidelity, demo-ready prototype UI for the registration review agent platform across homepage, knowledge base, document processing, agent workspace, MCP, Skills, and leadership dashboard screens.
|
||||
|
||||
**Architecture:** Keep the existing Django monolith and template routing boundaries, but replace the current visual system with a unified prototype shell and add a dedicated platform app for new governance pages. Use shared presentation data in service/view code so the pages tell one coherent business story without coupling design code to the existing agent execution internals.
|
||||
|
||||
**Tech Stack:** Django templates, Django views/URLs, Python service helpers, shared inline CSS in base template, existing forms/models where useful.
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
- Modify: `F:\PyCharm\DEMO-AGENT\templates\base.html`
|
||||
- Modify: `F:\PyCharm\DEMO-AGENT\templates\scenarios\index.html`
|
||||
- Modify: `F:\PyCharm\DEMO-AGENT\templates\documents\document_list.html`
|
||||
- Modify: `F:\PyCharm\DEMO-AGENT\templates\documents\upload.html`
|
||||
- Modify: `F:\PyCharm\DEMO-AGENT\templates\chat\index.html`
|
||||
- Create: `F:\PyCharm\DEMO-AGENT\apps\platform_ui\__init__.py`
|
||||
- Create: `F:\PyCharm\DEMO-AGENT\apps\platform_ui\apps.py`
|
||||
- Create: `F:\PyCharm\DEMO-AGENT\apps\platform_ui\views.py`
|
||||
- Create: `F:\PyCharm\DEMO-AGENT\apps\platform_ui\urls.py`
|
||||
- Create: `F:\PyCharm\DEMO-AGENT\apps\platform_ui\services.py`
|
||||
- Create: `F:\PyCharm\DEMO-AGENT\templates\platform_ui\knowledge_base.html`
|
||||
- Create: `F:\PyCharm\DEMO-AGENT\templates\platform_ui\mcp_center.html`
|
||||
- Create: `F:\PyCharm\DEMO-AGENT\templates\platform_ui\skill_studio.html`
|
||||
- Create: `F:\PyCharm\DEMO-AGENT\templates\platform_ui\command_center.html`
|
||||
- Modify: `F:\PyCharm\DEMO-AGENT\config\settings.py`
|
||||
- Modify: `F:\PyCharm\DEMO-AGENT\config\urls.py`
|
||||
- Test: `F:\PyCharm\DEMO-AGENT\tests\`
|
||||
|
||||
### Task 1: Register the new platform prototype app
|
||||
|
||||
**Files:**
|
||||
- Create: `apps/platform_ui/__init__.py`
|
||||
- Create: `apps/platform_ui/apps.py`
|
||||
- Create: `apps/platform_ui/views.py`
|
||||
- Create: `apps/platform_ui/urls.py`
|
||||
- Modify: `config/settings.py`
|
||||
- Modify: `config/urls.py`
|
||||
|
||||
- [ ] **Step 1: Add the Django app module skeleton**
|
||||
|
||||
```python
|
||||
from django.apps import AppConfig
|
||||
|
||||
|
||||
class PlatformUiConfig(AppConfig):
|
||||
default_auto_field = "django.db.models.BigAutoField"
|
||||
name = "apps.platform_ui"
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Register the app in settings**
|
||||
|
||||
```python
|
||||
INSTALLED_APPS = [
|
||||
# ...
|
||||
"apps.platform_ui",
|
||||
]
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Add prototype page routes**
|
||||
|
||||
```python
|
||||
urlpatterns = [
|
||||
path("platform/", include("apps.platform_ui.urls")),
|
||||
]
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Define view names for prototype pages**
|
||||
|
||||
```python
|
||||
urlpatterns = [
|
||||
path("knowledge-base/", views.knowledge_base, name="knowledge-base"),
|
||||
path("mcp-center/", views.mcp_center, name="mcp-center"),
|
||||
path("skills/", views.skill_studio, name="skills"),
|
||||
path("command-center/", views.command_center, name="command-center"),
|
||||
]
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Run framework validation**
|
||||
|
||||
Run: `python manage.py check`
|
||||
Expected: PASS with no URL or app import errors
|
||||
|
||||
### Task 2: Create shared presentation data for the new prototype
|
||||
|
||||
**Files:**
|
||||
- Create: `apps/platform_ui/services.py`
|
||||
- Modify: `apps/platform_ui/views.py`
|
||||
|
||||
- [ ] **Step 1: Define one coherent demo dataset**
|
||||
|
||||
```python
|
||||
def get_platform_demo_context():
|
||||
return {
|
||||
"batch": {...},
|
||||
"knowledge_sources": [...],
|
||||
"mcp_connectors": [...],
|
||||
"skills": [...],
|
||||
"workflow_steps": [...],
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Keep each page view thin**
|
||||
|
||||
```python
|
||||
def knowledge_base(request):
|
||||
context = get_platform_demo_context()
|
||||
return render(request, "platform_ui/knowledge_base.html", context)
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Run framework validation**
|
||||
|
||||
Run: `python manage.py check`
|
||||
Expected: PASS with importable views and service helpers
|
||||
|
||||
### Task 3: Replace the global visual system and navigation shell
|
||||
|
||||
**Files:**
|
||||
- Modify: `templates/base.html`
|
||||
|
||||
- [ ] **Step 1: Rewrite the global shell**
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<aside class="sidebar">...</aside>
|
||||
<main class="main-shell">
|
||||
<header class="topbar">...</header>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Define the new design tokens and shared components**
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg: #eef3f7;
|
||||
--surface: #f8fbfd;
|
||||
--panel: #ffffff;
|
||||
--ink: #102033;
|
||||
--accent: #1e5eff;
|
||||
--signal: #d77a2b;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Add global helpers for panels, metric cards, timelines, tables, pills, and section headers**
|
||||
|
||||
```css
|
||||
.panel { ... }
|
||||
.metric-card { ... }
|
||||
.section-heading { ... }
|
||||
.timeline-step { ... }
|
||||
.data-table { ... }
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Render shared navigation links to all prototype surfaces**
|
||||
|
||||
```html
|
||||
<a href="{% url 'scenarios:index' %}">任务总览</a>
|
||||
<a href="{% url 'platform_ui:knowledge-base' %}">知识库配置</a>
|
||||
<a href="{% url 'documents:list' %}">文件中心</a>
|
||||
<a href="{% url 'platform_ui:command-center' %}">工作台大屏</a>
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Open a few pages manually**
|
||||
|
||||
Run: `python manage.py runserver`
|
||||
Expected: the shell renders and every nav item resolves
|
||||
|
||||
### Task 4: Redesign the homepage as the business-closure entry point
|
||||
|
||||
**Files:**
|
||||
- Modify: `templates/scenarios/index.html`
|
||||
- Modify: `apps/scenarios/views.py` if extra presentation fields are needed
|
||||
|
||||
- [ ] **Step 1: Add a structured homepage context if needed**
|
||||
|
||||
```python
|
||||
return render(
|
||||
request,
|
||||
"scenarios/index.html",
|
||||
{
|
||||
"scenarios": list_scenarios(),
|
||||
"scenario_issues": list_scenario_issues(),
|
||||
"hero_metrics": [...],
|
||||
"workflow_overview": [...],
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Replace the page body with hero, metrics, workflow strip, risk board, and quick-entry modules**
|
||||
|
||||
```html
|
||||
<section class="hero-band">...</section>
|
||||
<section class="metrics-grid">...</section>
|
||||
<section class="workflow-strip">...</section>
|
||||
<section class="two-column-board">...</section>
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Verify the homepage**
|
||||
|
||||
Run: `python manage.py runserver`
|
||||
Expected: `/` shows the new dashboard-like homepage
|
||||
|
||||
### Task 5: Redesign the document pages around parsing and slicing workflow
|
||||
|
||||
**Files:**
|
||||
- Modify: `templates/documents/document_list.html`
|
||||
- Modify: `templates/documents/upload.html`
|
||||
- Optionally modify: `apps/documents/views.py`
|
||||
|
||||
- [ ] **Step 1: Add any lightweight display-only summary fields in the view if needed**
|
||||
|
||||
```python
|
||||
return render(
|
||||
request,
|
||||
"documents/document_list.html",
|
||||
{
|
||||
"documents": documents,
|
||||
"processing_summary": {...},
|
||||
"exception_items": [...],
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Rebuild the list page into upload stats, pipeline board, anomaly box, and structured directory table**
|
||||
|
||||
```html
|
||||
<section class="metrics-grid">...</section>
|
||||
<section class="tri-column">...</section>
|
||||
<section class="panel">
|
||||
<table class="data-table">...</table>
|
||||
</section>
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Rebuild the upload page into a guided import experience**
|
||||
|
||||
```html
|
||||
<section class="dropzone-panel">...</section>
|
||||
<section class="checklist-panel">...</section>
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Verify both pages**
|
||||
|
||||
Run: `python manage.py runserver`
|
||||
Expected: `/documents/` and `/documents/upload/` match the new prototype style
|
||||
|
||||
### Task 6: Redesign the chat page as a controlled audit workspace
|
||||
|
||||
**Files:**
|
||||
- Modify: `templates/chat/index.html`
|
||||
- Optionally modify: `apps/chat/views.py`
|
||||
|
||||
- [ ] **Step 1: Add presentation-only helper blocks if the existing context is too sparse**
|
||||
|
||||
```python
|
||||
return render(
|
||||
request,
|
||||
"chat/index.html",
|
||||
{
|
||||
...
|
||||
"task_modes": [...],
|
||||
"result_highlights": [...],
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Replace the template with a three-zone workspace**
|
||||
|
||||
```html
|
||||
<section class="workspace-grid">
|
||||
<div class="left-rail">...</div>
|
||||
<div class="conversation-stage">...</div>
|
||||
<div class="result-rail">...</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Preserve the real form submission path while upgrading the visual output areas**
|
||||
|
||||
```html
|
||||
<form method="post">...</form>
|
||||
{% if result %} ... {% endif %}
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Verify one scenario page**
|
||||
|
||||
Run: `python manage.py runserver`
|
||||
Expected: `/chat/<scenario_id>/` still submits and now renders as a workbench
|
||||
|
||||
### Task 7: Implement the governance and platform pages
|
||||
|
||||
**Files:**
|
||||
- Create: `templates/platform_ui/knowledge_base.html`
|
||||
- Create: `templates/platform_ui/mcp_center.html`
|
||||
- Create: `templates/platform_ui/skill_studio.html`
|
||||
- Create: `templates/platform_ui/command_center.html`
|
||||
- Modify: `apps/platform_ui/views.py`
|
||||
- Modify: `apps/platform_ui/services.py`
|
||||
|
||||
- [ ] **Step 1: Build the knowledge base page**
|
||||
|
||||
```html
|
||||
<section class="three-column-board">...</section>
|
||||
<section class="panel">...</section>
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Build the MCP center page**
|
||||
|
||||
```html
|
||||
<section class="connector-grid">...</section>
|
||||
<section class="import-flow">...</section>
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Build the Skill studio page**
|
||||
|
||||
```html
|
||||
<section class="editor-layout">...</section>
|
||||
<section class="version-board">...</section>
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Build the leadership command center page**
|
||||
|
||||
```html
|
||||
<section class="command-stage">...</section>
|
||||
<section class="risk-heatmap">...</section>
|
||||
<section class="evidence-matrix">...</section>
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Verify page routing**
|
||||
|
||||
Run: `python manage.py check`
|
||||
Expected: PASS and all `/platform/...` routes resolve
|
||||
|
||||
### Task 8: Regression, polish, and documentation sync
|
||||
|
||||
**Files:**
|
||||
- Modify: `README.md` if navigation or page descriptions need updating
|
||||
- Modify: `AGENTS.md` only if current implementation status needs sync
|
||||
|
||||
- [ ] **Step 1: Run core validation**
|
||||
|
||||
Run: `python manage.py check`
|
||||
Expected: PASS
|
||||
|
||||
- [ ] **Step 2: Run targeted tests if template/view assumptions changed**
|
||||
|
||||
Run: `pytest`
|
||||
Expected: PASS or clearly identified existing failures unrelated to the prototype
|
||||
|
||||
- [ ] **Step 3: Review the new screens for consistent terminology**
|
||||
|
||||
Check: page titles, batch name, product name, risk labels, and workflow terms all match the new design spec
|
||||
|
||||
- [ ] **Step 4: Update high-level documentation if needed**
|
||||
|
||||
```markdown
|
||||
## 当前原型页面
|
||||
- 任务总览
|
||||
- 知识库配置
|
||||
- 文件中心
|
||||
- 审核工作台
|
||||
- MCP 中心
|
||||
- Skill Studio
|
||||
- 工作台大屏
|
||||
```
|
||||
|
||||
## Self-Review
|
||||
|
||||
- Spec coverage: the plan covers homepage, knowledge base, document center, chat workspace, MCP, Skill studio, and leadership dashboard.
|
||||
- Placeholder scan: no TODO/TBD markers remain.
|
||||
- Type consistency: route names, app names, and page concepts are consistent across tasks.
|
||||
Reference in New Issue
Block a user