使用说明
MCP Shield——专业的React架构
快速开始
npm install
npm run dev
项目结构
mcp-shield/
├── index.html # Vite HTML entry, loads fonts
├── vite.config.js # Vite + React plugin, @ alias
├── package.json
│
└── src/
├── main.jsx # ReactDOM root, imports global CSS
├── App.jsx # Root component — owns role + page state
│
├── constants/ # Pure configuration — no JSX, no side-effects
│ ├── colors.js # Brand palette + semantic color maps
│ └── nav.js # NAV_GROUPS config, ALL_PAGES, groupsForRole()
│
├── data/ # Mock / seed data (swap for API calls later)
│ ├── charts.js # histogramData, blockReasons, blockLegend, repTrend
│ └── tables.js # blkRows, apkRows, userRows, svcRows, repReports, channelCards
│
├── styles/
│ └── global.css # Reset, scrollbar, animations, utility classes
│
├── components/
│ ├── ui/ # Reusable, context-free primitives
│ │ ├── Card.jsx
│ │ ├── SectionTitle.jsx
│ │ ├── Badge.jsx
│ │ ├── StatusDot.jsx
│ │ ├── ChartTooltip.jsx
│ │ └── index.js # Barrel export
│ │
│ └── charts/ # Domain chart components
│ ├── TaperedGauge.jsx # SVG arc gauge
│ ├── TinyDonut.jsx # Recharts mini donut
│ └── index.js # Barrel export
│
├── layout/ # Structural / chrome components
│ ├── TopNav.jsx # Sticky header with tabs + dropdowns
│ ├── FilterSidebar.jsx # Left-hand filter panel
│ └── AppLayout.jsx # Composes TopNav + FilterSidebar + breadcrumb
│
├── pages/ # One file per route
│ ├── Overview.jsx
│ ├── Blocking.jsx
│ ├── APKs.jsx
│ ├── Reporting.jsx
│ ├── Users.jsx
│ ├── Services.jsx
│ └── Stub.jsx # Placeholder for future pages
│
└── routes/
└── index.jsx # ROUTES map + PageRouter component + aliases
架构决策
基于角色的导航
导航是通过数据驱动的 src/constants/nav.js.每个导航项目都声明一个 roles 阵列。
groupsForRole(role) 在渲染时过滤配置——没有条件JSX分散
跨组件。
国家的单一真相来源
App.jsx 拥有 role 和 page.单身 handleNav(page, role?) 处理程序是线程化的
通过 AppLayout → TopNav，因此角色切换器和普通页面链接共享一个代码路径。
关注点分离
| 层 | 责任 |
|---|---|
constants/ |
静态配置——颜色、导航形状 |
data/ |
模拟数据-可与API调用轻松交换 |
styles/ |
全局CSS——重置、动画、实用程序类 |
components/ui |
原子UI原语（无业务逻辑） |
components/charts |
使用领域知识重新编写包装 |
layout/ |
页面chrome——导航、侧边栏、面包屑 |
pages/ |
整版作文 |
routes/ |
路由映射+解析器（无React Router依赖） |
用真正的API替换模拟数据
每个页面都从以下位置导入 src/data/.要连接一个真正的API：
// Before (mock)
import { userRows } from '../data/tables';
// After (API hook)
import { useUsers } from '../hooks/useUsers';
const { data: userRows, loading } = useUsers();
UI层不需要更改。
添加新页面
- 创建
src/pages/MyPage.jsx - 向添加条目
src/routes/index.jsx→ROUTES - 将导航项目添加到
src/constants/nav.js→NAV_GROUPS与适当roles - 已完成，其他任何地方都不需要更改。
