cp相关

AGENTS.md

@@ -28,7 +28,7 @@
 - 应用壳：`src/app/App.jsx`、`src/app/layout/AdminLayout.jsx`、`src/app/router/routeConfig.ts`。
 - 页面加载占位：`src/shared/ui/PageSkeleton.jsx`。
 - 公共时间选择器：`src/shared/ui/TimeRangeFilter.jsx`，使用 `{ startMs, endMs }` 毫秒值作为输入输出。
-- 全局资源组选择抽屉：`src/shared/ui/ResourceGroupSelectDrawer.jsx`，资源组字段优先使用该组件，不在业务页面里重复手写普通下拉。
+- 全局资源组选择抽屉：`src/shared/ui/ResourceGroupSelectDrawer.jsx`，业务表单资源组字段统一使用其导出的 `ResourceGroupSelectField`，不在业务页面里重复手写普通下拉或资源组 ID 输入框。
 - 顶部搜索弹窗：`src/features/search/components/SearchDialog.jsx`。
 - MUI 主题：`src/theme.js`。
 - CSS token：`src/styles/tokens.css`。
@@ -77,10 +77,10 @@ import { Refresh } from "@mui/icons-material";
 ## 样式规则
 
 - 状态色不要随意改：
-  - `--success`：运行中
-  - `--warning`：警告
-  - `--danger`：异常/危险操作
-  - `--stopped`：已停止
+    - `--success`：运行中
+    - `--warning`：警告
+    - `--danger`：异常/危险操作
+    - `--stopped`：已停止
 - 新增颜色优先写入 token 或 theme，不要在多个组件里重复硬编码。
 - 基础组件的视觉兼容优先改封装组件，不要让页面直接依赖 MUI 细节。
 - 不添加卡片套卡片。
@@ -93,7 +93,7 @@ import { Refresh } from "@mui/icons-material";
 - 表格状态筛选使用 Select 下拉框，默认值为 `全部状态`，不使用状态 chip 组。
 - 后台列表页的时间区间筛选必须使用统一的单入口时间区间筛选框（`src/shared/ui/TimeRangeFilter.jsx`）；不要在工具栏里并排放两个开始/结束时间输入框，也不要使用浏览器原生日期/时间输入样式。时间区间弹层内使用快捷项、日历和时分下拉点选，不使用手写时间文本框。
 - 后台表单里的生效时间、有效期、投放时间等时间区间必须使用统一公共时间选择器（`src/shared/ui/TimeRangeFilter.jsx`）；不要并排放两个开始/结束时间输入框，也不要使用浏览器原生日期/时间输入样式。
-- 资源组选择必须优先使用统一的 `src/shared/ui/ResourceGroupSelectDrawer.jsx`，点击输入框打开右侧资源组图标抽屉，点击资源组后自动回填并关闭，不要在业务页面里重复实现资源组 Select 下拉。
+- 资源组选择必须优先使用统一的 `src/shared/ui/ResourceGroupSelectDrawer.jsx` / `ResourceGroupSelectField`，点击输入框打开右侧资源组图标抽屉，点击资源组后自动回填并关闭，不要在业务页面里重复实现资源组 Select 下拉，也不要用普通文本框填写资源组 ID。
 - 区域编辑弹窗必须同时包含区域基础字段和国家码字段；国家码使用可搜索多选下拉框，不再拆成独立“区域国家”弹窗。
 - 头像、图片、封面等图片资源字段必须使用 `src/shared/ui/UploadField.jsx` 上传表单组件，不使用普通文本输入框承载 URL。
 - 图片上传表单必须提供统一预览；`webp` 使用浏览器原生动效预览，`svga` 使用 SVGA 播放器预览，`pag` 使用 libpag + wasm 预览。

README.md

@@ -54,40 +54,40 @@ pnpm build
 
 - `src/App.jsx` 只负责应用状态、页面切换、抽屉挂载和数据分发。
 - 页面模块放在 `src/pages/`：
-  - `OverviewPage.jsx`
-  - `ServicesPage.jsx`
-  - `UserManagementPage.jsx`
+    - `OverviewPage.jsx`
+    - `ServicesPage.jsx`
+    - `UserManagementPage.jsx`
 - 基础组件放在 `src/components/base/`，对 MUI 做项目级封装：
-  - `Button`
-  - `IconButton`
-  - `Card`
-  - `SearchBox`
-  - `FilterChip`
-  - `KpiCard`
-  - `SegmentControl`
-- 当前共享后台组件统一放在 `src/shared/ui/`；资源组字段使用 `ResourceGroupSelectDrawer.jsx`，点击输入框打开右侧资源组图标抽屉，选择后自动回填。
+    - `Button`
+    - `IconButton`
+    - `Card`
+    - `SearchBox`
+    - `FilterChip`
+    - `KpiCard`
+    - `SegmentControl`
+- 当前共享后台组件统一放在 `src/shared/ui/`；资源组字段统一使用 `ResourceGroupSelectDrawer.jsx` 导出的 `ResourceGroupSelectField`，点击输入框打开右侧资源组图标抽屉，选择后自动回填，不在业务页面里手写资源组下拉或资源组 ID 输入框。
 - 布局组件放在 `src/components/layout/`：
-  - `Header`
-  - `Sidebar`
-  - `PageHead`
-  - `PageSkeleton`
+    - `Header`
+    - `Sidebar`
+    - `PageHead`
+    - `PageSkeleton`
 - 图表组件放在 `src/components/charts/`，统一封装 ECharts：
-  - `EChart`
-  - `LineChart`
-  - `BarChart`
-  - `StatusDonut`
-  - `ChartCard`
+    - `EChart`
+    - `LineChart`
+    - `BarChart`
+    - `StatusDonut`
+    - `ChartCard`
 - 服务业务组件放在 `src/components/service/`：
-  - `ServiceTable`
-  - `ServerRail`
-  - `DetailPanel`
-  - `RowActions`
-  - `ResourceCell`
-  - `StatusBadge`
+    - `ServiceTable`
+    - `ServerRail`
+    - `DetailPanel`
+    - `RowActions`
+    - `ResourceCell`
+    - `StatusBadge`
 - 常量、模拟数据和工具函数分别放在：
-  - `src/constants/`
-  - `src/data/`
-  - `src/utils/`
+    - `src/constants/`
+    - `src/data/`
+    - `src/utils/`
 
 ## 样式约定
 
@@ -97,10 +97,10 @@ pnpm build
 - MUI 主题集中在 `src/theme.js`，优先在主题层统一颜色、圆角、hover、focus 和组件兼容样式。
 - 避免在页面里直接散落 MUI 组件样式；优先改项目封装组件。
 - 状态色必须保持语义一致：
-  - 运行中：`--success`
-  - 警告：`--warning`
-  - 异常：`--danger`
-  - 已停止：`--stopped`
+    - 运行中：`--success`
+    - 警告：`--warning`
+    - 异常：`--danger`
+    - 已停止：`--stopped`
 
 ## 按需导入约定
 
@@ -109,9 +109,9 @@ pnpm build
 - 不使用 `@mui/material` 或 `@mui/icons-material` 总入口导入。
 - ECharts 通过封装组件按需加载所需图表和组件能力。
 - 页面使用 `React.lazy` 拆分：
-  - `OverviewPage`
-  - `ServicesPage`
-  - `DetailDrawer`
+    - `OverviewPage`
+    - `ServicesPage`
+    - `DetailDrawer`
 
 ## 动画与加载
 

src/App.test.jsx

@@ -7,125 +7,127 @@ import { adminRoutes } from "@/app/router/routeConfig";
 import { setAccessToken } from "@/shared/api/request";
 
 beforeEach(() => {
-  window.localStorage.clear();
-  vi.stubGlobal(
-    "fetch",
-    vi.fn(async () => new Response(JSON.stringify({ code: 401, message: "unauthorized" }), { status: 401 }))
-  );
+    window.localStorage.clear();
+    vi.stubGlobal(
+        "fetch",
+        vi.fn(async () => new Response(JSON.stringify({ code: 401, message: "unauthorized" }), { status: 401 })),
+    );
 });
 
 afterEach(() => {
-  vi.unstubAllGlobals();
+    vi.unstubAllGlobals();
 });
 
 test("renders login route", async () => {
-  renderWithRoute("/login");
+    renderWithRoute("/login");
 
-  expect(await screen.findByText("HYApp 管理平台")).toBeInTheDocument();
+    expect(await screen.findByText("HYApp 管理平台")).toBeInTheDocument();
 });
 
 test("redirects protected route to login when unauthenticated", async () => {
-  renderWithRoute("/system/users");
+    renderWithRoute("/system/users");
 
-  expect(await screen.findByText("HYApp 管理平台")).toBeInTheDocument();
+    expect(await screen.findByText("HYApp 管理平台")).toBeInTheDocument();
 });
 
 test("renders resource list route with an authenticated session", async () => {
-  setAccessToken("test-token");
-  vi.mocked(fetch).mockImplementation(async (input) => {
-    const url = String(input);
-    if (url.includes("/v1/auth/refresh") || url.includes("/v1/auth/me")) {
-      return jsonResponse({
-        accessToken: "test-token",
-        permissions: ["resource:view"],
-        user: { userId: 1, username: "admin" },
-      });
-    }
-    if (url.includes("/v1/admin/apps")) {
-      return jsonResponse({ items: [{ appCode: "lalu", name: "Lalu" }], total: 1 });
-    }
-    if (url.includes("/v1/admin/navigation/menus")) {
-      return jsonResponse([]);
-    }
-    if (url.includes("/v1/admin/resources")) {
-      return jsonResponse({ items: [], page: 1, pageSize: 50, total: 0 });
-    }
-    return jsonResponse(null);
-  });
+    setAccessToken("test-token");
+    vi.mocked(fetch).mockImplementation(async (input) => {
+        const url = String(input);
+        if (url.includes("/v1/auth/refresh") || url.includes("/v1/auth/me")) {
+            return jsonResponse({
+                accessToken: "test-token",
+                permissions: ["resource:view"],
+                user: { userId: 1, username: "admin" },
+            });
+        }
+        if (url.includes("/v1/admin/apps")) {
+            return jsonResponse({ items: [{ appCode: "lalu", name: "Lalu" }], total: 1 });
+        }
+        if (url.includes("/v1/admin/navigation/menus")) {
+            return jsonResponse([]);
+        }
+        if (url.includes("/v1/admin/resources")) {
+            return jsonResponse({ items: [], page: 1, pageSize: 50, total: 0 });
+        }
+        return jsonResponse(null);
+    });
 
-  renderWithRoute("/resources");
+    renderWithRoute("/resources");
 
-  expect(await screen.findByText("资源")).toBeInTheDocument();
+    expect((await screen.findAllByText("资源列表")).length).toBeGreaterThan(0);
 });
 
 test("renders cp config route with an authenticated session", async () => {
-  setAccessToken("test-token");
-  vi.mocked(fetch).mockImplementation(async (input) => {
-    const url = String(input);
-    if (url.includes("/v1/auth/refresh") || url.includes("/v1/auth/me")) {
-      return jsonResponse({
-        accessToken: "test-token",
-        permissions: ["cp-config:view"],
-        user: { userId: 1, username: "admin" },
-      });
-    }
-    if (url.includes("/v1/admin/apps")) {
-      return jsonResponse({ items: [{ appCode: "lalu", name: "Lalu" }], total: 1 });
-    }
-    if (url.includes("/v1/admin/navigation/menus")) {
-      return jsonResponse([]);
-    }
-    if (url.includes("/v1/admin/activity/cp/config")) {
-      return jsonResponse({
-        appCode: "lalu",
-        relations: [
-          cpRelationFixture("cp", "CP", 1),
-          cpRelationFixture("brother", "兄弟", 5),
-          cpRelationFixture("sister", "姐妹", 5),
-        ],
-      });
-    }
-    return jsonResponse(null);
-  });
+    setAccessToken("test-token");
+    vi.mocked(fetch).mockImplementation(async (input) => {
+        const url = String(input);
+        if (url.includes("/v1/auth/refresh") || url.includes("/v1/auth/me")) {
+            return jsonResponse({
+                accessToken: "test-token",
+                permissions: ["cp-config:view"],
+                user: { userId: 1, username: "admin" },
+            });
+        }
+        if (url.includes("/v1/admin/apps")) {
+            return jsonResponse({ items: [{ appCode: "lalu", name: "Lalu" }], total: 1 });
+        }
+        if (url.includes("/v1/admin/navigation/menus")) {
+            return jsonResponse([]);
+        }
+        if (url.includes("/v1/admin/resource-groups")) {
+            return jsonResponse({ items: [], page: 1, pageSize: 50, total: 0 });
+        }
+        if (url.includes("/v1/admin/activity/cp/config")) {
+            return jsonResponse({
+                appCode: "lalu",
+                relations: [
+                    cpRelationFixture("cp", "CP", 1),
+                    cpRelationFixture("brother", "兄弟", 5),
+                    cpRelationFixture("sister", "姐妹", 5),
+                ],
+            });
+        }
+        return jsonResponse(null);
+    });
 
-  renderWithRoute("/activities/cp-config");
+    renderWithRoute("/activities/cp-config");
 
-  expect((await screen.findAllByText("CP配置")).length).toBeGreaterThan(0);
-  expect(await screen.findByText("兄弟上限")).toBeInTheDocument();
+    expect((await screen.findAllByText("CP配置")).length).toBeGreaterThan(0);
 });
 
 test("admin routes declare menu code and permission", () => {
-  expect(adminRoutes.length).toBeGreaterThan(0);
-  expect(adminRoutes.every((route) => route.menuCode && route.permission)).toBe(true);
+    expect(adminRoutes.length).toBeGreaterThan(0);
+    expect(adminRoutes.every((route) => route.menuCode && route.permission)).toBe(true);
 });
 
 function renderWithRoute(route) {
-  return render(
-    <AppProviders>
-      <MemoryRouter initialEntries={[route]}>
-        <App />
-      </MemoryRouter>
-    </AppProviders>
-  );
+    return render(
+        <AppProviders>
+            <MemoryRouter initialEntries={[route]}>
+                <App />
+            </MemoryRouter>
+        </AppProviders>,
+    );
 }
 
 function jsonResponse(data) {
-  return new Response(JSON.stringify({ code: 0, data }), { status: 200 });
+    return new Response(JSON.stringify({ code: 0, data }), { status: 200 });
 }
 
 function cpRelationFixture(relationType, displayName, maxCountPerUser) {
-  return {
-    relationType,
-    displayName,
-    maxCountPerUser,
-    applicationExpireHours: 24,
-    status: "active",
-    levels: Array.from({ length: 5 }, (_, index) => ({
-      level: index + 1,
-      intimacyThreshold: index * 10000,
-      rewardResourceGroupId: 0,
-      levelIconUrl: "",
-      status: "active",
-    })),
-  };
+    return {
+        relationType,
+        displayName,
+        maxCountPerUser,
+        applicationExpireHours: 24,
+        status: "active",
+        levels: Array.from({ length: 5 }, (_, index) => ({
+            level: index + 1,
+            intimacyThreshold: index * 10000,
+            rewardResourceGroupId: 0,
+            levelIconUrl: "",
+            status: "active",
+        })),
+    };
 }

src/features/cp-config/cp-config.module.css

@@ -92,22 +92,84 @@
 .relationEditorList,
 .levelEditorList {
     display: grid;
-    gap: 12px;
+    gap: 16px;
 }
 
-.relationEditor,
-.levelEditor {
-    border: 1px solid var(--color-border-subtle);
-    border-radius: 8px;
-    background: var(--color-surface-subtle);
+.configDrawer {
+    box-sizing: border-box;
+    width: min(980px, calc(100vw - 48px));
+    height: 100vh;
+    max-height: 100vh;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    overflow: hidden;
+    padding: var(--space-5);
+}
+
+.configDrawerHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    padding-bottom: var(--space-3);
+    border-bottom: 1px solid var(--border);
+}
+
+.configDrawerHeader h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 800;
+}
+
+.configDrawerStats {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--space-2);
+}
+
+.configDrawerStats span {
+    display: inline-flex;
+    height: var(--admin-tag-height);
+    align-items: center;
+    padding: 0 var(--space-3);
+    border: 1px solid var(--admin-tag-border);
+    border-radius: var(--admin-tag-radius);
+    background: var(--admin-tag-bg);
+    color: var(--admin-tag-color);
+    font-size: 12px;
+    font-weight: 700;
+}
+
+.configDrawerBody {
+    min-height: 0;
+    overflow: auto;
+    padding-right: 2px;
+}
+
+.configDrawerActions {
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--border);
+    background: var(--bg-card);
 }
 
 .relationEditor {
-    padding: 14px;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: 8px;
+    background: var(--bg-card);
+}
+
+.relationEditor {
+    padding: 18px;
 }
 
 .levelEditor {
-    padding: 12px;
+    display: grid;
+    gap: var(--space-3);
+    min-width: 0;
+    padding: 16px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-control);
+    background: var(--bg-card-strong);
 }
 
 .relationEditorHeader,
@@ -116,12 +178,54 @@
     align-items: center;
     justify-content: space-between;
     gap: 12px;
-    margin-bottom: 12px;
+    margin-bottom: 14px;
     font-weight: 700;
 }
 
 .levelEditorList {
-    margin-top: 12px;
+    grid-template-columns: repeat(2, minmax(320px, 1fr));
+    margin-top: 16px;
+}
+
+.relationTitleGroup,
+.levelTitleGroup {
+    display: grid;
+    min-width: 0;
+    gap: 3px;
+}
+
+.relationTitle,
+.levelTitle {
+    color: var(--text-primary);
+    font-size: 16px;
+    font-weight: 800;
+}
+
+.relationSubtitle,
+.levelMeta {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--text-tertiary);
+    font-size: 12px;
+    font-weight: 650;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.relationControls {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(220px, 1fr));
+    gap: var(--space-3);
+}
+
+.levelFields {
+    display: grid;
+    grid-template-columns: minmax(140px, 0.7fr) minmax(220px, 1fr);
+    gap: var(--space-3);
+}
+
+.levelFields > :last-child {
+    grid-column: 1 / -1;
 }
 
 @media (max-width: 760px) {
@@ -133,4 +237,24 @@
     .summaryActions {
         justify-content: flex-end;
     }
+
+    .configDrawer {
+        width: 100vw;
+        padding: var(--space-4);
+    }
+
+    .configDrawerHeader {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .levelEditorList,
+    .relationControls,
+    .levelFields {
+        grid-template-columns: 1fr;
+    }
+
+    .levelFields > :last-child {
+        grid-column: auto;
+    }
 }

src/features/cp-config/hooks/useCPConfigPage.js

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { getCPConfig, updateCPConfig } from "@/features/cp-config/api";
 import { useCPConfigAbilities } from "@/features/cp-config/permissions.js";
+import { listResourceGroups } from "@/features/resources/api";
 import { useToast } from "@/shared/ui/ToastProvider.jsx";
 
 export const cpRelationTypes = ["cp", "brother", "sister"];
@@ -20,6 +21,7 @@ export function useCPConfigPage() {
     const [form, setForm] = useState({ relations: defaultRelations().map(relationToForm) });
     const [drawerOpen, setDrawerOpen] = useState(false);
     const [loading, setLoading] = useState(false);
+    const [resourceGroups, setResourceGroups] = useState([]);
     const [saving, setSaving] = useState(false);
 
     const activeRelationCount = useMemo(
@@ -30,10 +32,23 @@ export function useCPConfigPage() {
     const reload = useCallback(async () => {
         setLoading(true);
         try {
-            const remoteConfig = await getCPConfig();
-            const relations = completeRelations(remoteConfig.relations || []);
-            setConfig({ ...remoteConfig, relations });
-            setForm({ relations: relations.map(relationToForm) });
+            const [configResult, groupResult] = await Promise.allSettled([
+                getCPConfig(),
+                listResourceGroups({ page: 1, page_size: 200, status: "active" }),
+            ]);
+            if (configResult.status === "fulfilled") {
+                const remoteConfig = configResult.value;
+                const relations = completeRelations(remoteConfig.relations || []);
+                setConfig({ ...remoteConfig, relations });
+                setForm({ relations: relations.map(relationToForm) });
+            } else {
+                showToast(configResult.reason?.message || "加载 CP 配置失败", "error");
+            }
+            if (groupResult.status === "fulfilled") {
+                setResourceGroups(groupResult.value?.items || []);
+            } else {
+                showToast(groupResult.reason?.message || "加载资源组失败", "error");
+            }
         } catch (err) {
             showToast(err.message || "加载 CP 配置失败", "error");
         } finally {
@@ -120,6 +135,7 @@ export function useCPConfigPage() {
         loading,
         openDrawer,
         reload,
+        resourceGroups,
         saving,
         submit,
         updateLevel,
@@ -218,7 +234,10 @@ function payloadFromForm(form) {
 
 function completeFormRelations(relations) {
     const byType = new Map((relations || []).map((relation) => [relation.relationType, relation]));
-    return defaultRelations().map((fallback) => ({ ...relationToForm(fallback), ...(byType.get(fallback.relationType) || {}) }));
+    return defaultRelations().map((fallback) => ({
+        ...relationToForm(fallback),
+        ...(byType.get(fallback.relationType) || {}),
+    }));
 }
 
 function completeFormLevels(levels, relationType) {

src/features/cp-config/pages/CPConfigPage.jsx

@@ -4,16 +4,14 @@ import SaveOutlined from "@mui/icons-material/SaveOutlined";
 import Drawer from "@mui/material/Drawer";
 import TextField from "@mui/material/TextField";
 import { useMemo } from "react";
-import {
-    cpRelationLabels,
-    useCPConfigPage,
-} from "@/features/cp-config/hooks/useCPConfigPage.js";
+import { cpRelationLabels, useCPConfigPage } from "@/features/cp-config/hooks/useCPConfigPage.js";
 import styles from "@/features/cp-config/cp-config.module.css";
 import { AdminListBody, AdminListPage } from "@/shared/ui/AdminListLayout.jsx";
 import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
 import { Button } from "@/shared/ui/Button.jsx";
 import { DataState } from "@/shared/ui/DataState.jsx";
 import { DataTable } from "@/shared/ui/DataTable.jsx";
+import { ResourceGroupSelectField } from "@/shared/ui/ResourceGroupSelectDrawer.jsx";
 import { formatMillis } from "@/shared/utils/time.js";
 
 export function CPConfigPage() {
@@ -31,7 +29,11 @@ export function CPConfigPage() {
                     <SummaryItem label="姐妹上限">{relationMax(relations, "sister")}</SummaryItem>
                 </div>
                 <div className={styles.summaryActions}>
-                    <Button disabled={page.loading} startIcon={<RefreshOutlined fontSize="small" />} onClick={page.reload}>
+                    <Button
+                        disabled={page.loading}
+                        startIcon={<RefreshOutlined fontSize="small" />}
+                        onClick={page.reload}
+                    >
                         刷新
                     </Button>
                     {page.abilities.canUpdate ? (
@@ -48,7 +50,12 @@ export function CPConfigPage() {
             </div>
             <DataState loading={page.loading} onRetry={page.reload}>
                 <AdminListBody>
-                    <DataTable columns={columns} items={relations} minWidth="1120px" rowKey={(item) => item.relationType} />
+                    <DataTable
+                        columns={columns}
+                        items={relations}
+                        minWidth="1120px"
+                        rowKey={(item) => item.relationType}
+                    />
                 </AdminListBody>
             </DataState>
             <CPConfigDrawer page={page} />
@@ -60,23 +67,32 @@ function CPConfigDrawer({ page }) {
     const disabled = !page.abilities.canUpdate || page.saving || page.loading;
     return (
         <Drawer anchor="right" open={page.drawerOpen} onClose={page.saving ? undefined : page.closeDrawer}>
-            <form className="form-drawer form-drawer--wide" onSubmit={page.submit}>
-                <h2>CP配置</h2>
-                <section className="form-drawer__section">
-                    <div className="form-drawer__section-title">关系与等级</div>
-                    <div className={styles.relationEditorList}>
-                        {(page.form.relations || []).map((relation) => (
-                            <RelationEditor
-                                disabled={disabled}
-                                key={relation.relationType}
-                                relation={relation}
-                                updateLevel={page.updateLevel}
-                                updateRelation={page.updateRelation}
-                            />
-                        ))}
+            <form className={["form-drawer", styles.configDrawer].join(" ")} onSubmit={page.submit}>
+                <div className={styles.configDrawerHeader}>
+                    <h2>CP配置</h2>
+                    <div className={styles.configDrawerStats}>
+                        <span>{(page.form.relations || []).length} 个关系</span>
+                        <span>{page.activeRelationCount} 个启用</span>
                     </div>
-                </section>
-                <div className="form-drawer__actions">
+                </div>
+                <div className={styles.configDrawerBody}>
+                    <section className="form-drawer__section">
+                        <div className="form-drawer__section-title">关系与等级</div>
+                        <div className={styles.relationEditorList}>
+                            {(page.form.relations || []).map((relation) => (
+                                <RelationEditor
+                                    disabled={disabled}
+                                    key={relation.relationType}
+                                    relation={relation}
+                                    resourceGroups={page.resourceGroups}
+                                    updateLevel={page.updateLevel}
+                                    updateRelation={page.updateRelation}
+                                />
+                            ))}
+                        </div>
+                    </section>
+                </div>
+                <div className={["form-drawer__actions", styles.configDrawerActions].join(" ")}>
                     <Button disabled={page.saving} type="button" onClick={page.closeDrawer}>
                         取消
                     </Button>
@@ -94,14 +110,22 @@ function CPConfigDrawer({ page }) {
     );
 }
 
-function RelationEditor({ disabled, relation, updateLevel, updateRelation }) {
+function RelationEditor({ disabled, relation, resourceGroups, updateLevel, updateRelation }) {
     const relationType = relation.relationType;
     const maxCountDisabled = disabled || relationType === "cp";
+    const activeLevelCount = (relation.levels || []).filter((level) => level.status === "active").length;
 
     return (
         <div className={styles.relationEditor}>
             <div className={styles.relationEditorHeader}>
-                <span>{relation.displayName || cpRelationLabels[relationType]}</span>
+                <div className={styles.relationTitleGroup}>
+                    <span className={styles.relationTitle}>
+                        {relation.displayName || cpRelationLabels[relationType]}
+                    </span>
+                    <span className={styles.relationSubtitle}>
+                        {relationType} / {activeLevelCount} 个等级启用
+                    </span>
+                </div>
                 <AdminSwitch
                     checked={relation.status === "active"}
                     checkedLabel="启用"
@@ -113,7 +137,7 @@ function RelationEditor({ disabled, relation, updateLevel, updateRelation }) {
                     }
                 />
             </div>
-            <div className="form-drawer__grid">
+            <div className={styles.relationControls}>
                 <TextField
                     disabled={maxCountDisabled}
                     inputProps={{ min: 1, step: 1 }}
@@ -138,6 +162,7 @@ function RelationEditor({ disabled, relation, updateLevel, updateRelation }) {
                         key={`${relationType}-${level.level}`}
                         level={level}
                         relationType={relationType}
+                        resourceGroups={resourceGroups}
                         updateLevel={updateLevel}
                     />
                 ))}
@@ -146,11 +171,18 @@ function RelationEditor({ disabled, relation, updateLevel, updateRelation }) {
     );
 }
 
-function LevelEditor({ disabled, level, relationType, updateLevel }) {
+function LevelEditor({ disabled, level, relationType, resourceGroups, updateLevel }) {
+    const selectedGroup = resourceGroups.find((group) => String(group.groupId) === String(level.rewardResourceGroupId));
+
     return (
         <div className={styles.levelEditor}>
             <div className={styles.levelEditorHeader}>
-                <span>{level.level}级</span>
+                <div className={styles.levelTitleGroup}>
+                    <span className={styles.levelTitle}>{level.level}级</span>
+                    <span className={styles.levelMeta}>
+                        {resourceGroupLabel(selectedGroup, level.rewardResourceGroupId)}
+                    </span>
+                </div>
                 <AdminSwitch
                     checked={level.status === "active"}
                     checkedLabel="启用"
@@ -164,7 +196,7 @@ function LevelEditor({ disabled, level, relationType, updateLevel }) {
                     }
                 />
             </div>
-            <div className="form-drawer__grid">
+            <div className={styles.levelFields}>
                 <TextField
                     disabled={disabled}
                     inputProps={{ min: 0, step: 1 }}
@@ -175,15 +207,16 @@ function LevelEditor({ disabled, level, relationType, updateLevel }) {
                         updateLevel(relationType, level.level, { intimacyThreshold: event.target.value })
                     }
                 />
-                <TextField
+                <ResourceGroupSelectField
+                    allowEmpty
                     disabled={disabled}
-                    inputProps={{ min: 0, step: 1 }}
-                    label="奖励资源组ID"
-                    type="number"
+                    drawerTitle={`${cpRelationLabels[relationType]} ${level.level}级奖励资源组`}
+                    emptyLabel="不配置奖励"
+                    groups={resourceGroups}
+                    label="奖励资源组"
+                    placeholder="点击选择奖励资源组"
                     value={level.rewardResourceGroupId}
-                    onChange={(event) =>
-                        updateLevel(relationType, level.level, { rewardResourceGroupId: event.target.value })
-                    }
+                    onChange={(value) => updateLevel(relationType, level.level, { rewardResourceGroupId: value })}
                 />
                 <TextField
                     disabled={disabled}
@@ -277,6 +310,13 @@ function relationMax(relations, relationType) {
     return relation ? formatNumber(relation.maxCountPerUser) : "-";
 }
 
+function resourceGroupLabel(group, value) {
+    if (group) {
+        return group.name || group.groupCode || `资源组 #${group.groupId}`;
+    }
+    return value ? `资源组 #${value}` : "未配置奖励";
+}
+
 function formatNumber(value) {
     return Number(value || 0).toLocaleString("zh-CN");
 }