ThinkPHP UI Restoration

Use When

• The user wants a new ThinkPHP .tpl component or page section.
• The user provides a screenshot, DOM, or reference UI to restore in this project.
• The task also needs matching CSS, mock data, or controller View::assign structure.

Rules

1. Reuse existing project structure first: view/@components, view/@pages, public/__base/css/common.css, and current class naming patterns.
2. Follow ThinkPHP template syntax and safe field access, such as {$e.xxx|default=''} and isset(...) checks, to avoid undefined index errors.
3. When adding a component, also add the required CSS, mock fields, and controller/template wiring so it can render directly.
4. Prefer updating existing xqbj- components over creating a new pattern when the UI is only a variation of an existing block.
5. Put shared styles in public/__base/css/common.css; only use page-level CSS when the style is truly page-specific.
6. If the component depends on list data, also update the matching mock data in app/BaseController.php or the relevant controller.

Workflow