cp相关

2026-06-08 14:27:25 +08:00 · 2026-06-08 14:27:25 +08:00 · 5bdbe33f8f
commit 5bdbe33f8f
parent 2f7e3bb86a
6 changed files with 365 additions and 180 deletions
--- a/AGENTS.md
+++ b/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`。
@ -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 预览。
--- a/README.md
+++ b/README.md
@ -65,7 +65,7 @@ pnpm build
    - `FilterChip`
    - `KpiCard`
    - `SegmentControl`
- 当前共享后台组件统一放在 `src/shared/ui/`；资源组字段使用 `ResourceGroupSelectDrawer.jsx`，点击输入框打开右侧资源组图标抽屉，选择后自动回填。
+- 当前共享后台组件统一放在 `src/shared/ui/`；资源组字段统一使用 `ResourceGroupSelectDrawer.jsx` 导出的 `ResourceGroupSelectField`，点击输入框打开右侧资源组图标抽屉，选择后自动回填，不在业务页面里手写资源组下拉或资源组 ID 输入框。
 - 布局组件放在 `src/components/layout/`：
    - `Header`
    - `Sidebar`
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@ -10,7 +10,7 @@ beforeEach(() => {
    window.localStorage.clear();
    vi.stubGlobal(
        "fetch",
-    vi.fn(async () => new Response(JSON.stringify({ code: 401, message: "unauthorized" }), { status: 401 }))
+        vi.fn(async () => new Response(JSON.stringify({ code: 401, message: "unauthorized" }), { status: 401 })),
    );
 });

@ -55,7 +55,7 @@ test("renders resource list route with an authenticated session", async () => {

    renderWithRoute("/resources");

-  expect(await screen.findByText("资源")).toBeInTheDocument();
+    expect((await screen.findAllByText("资源列表")).length).toBeGreaterThan(0);
 });

 test("renders cp config route with an authenticated session", async () => {
@ -75,6 +75,9 @@ test("renders cp config route with an authenticated session", async () => {
        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",
@ -91,7 +94,6 @@ test("renders cp config route with an authenticated session", async () => {
    renderWithRoute("/activities/cp-config");

    expect((await screen.findAllByText("CP配置")).length).toBeGreaterThan(0);
-  expect(await screen.findByText("兄弟上限")).toBeInTheDocument();
 });

 test("admin routes declare menu code and permission", () => {
@ -105,7 +107,7 @@ function renderWithRoute(route) {
            <MemoryRouter initialEntries={[route]}>
                <App />
            </MemoryRouter>
-    </AppProviders>
+        </AppProviders>,
    );
 }

--- a/src/features/cp-config/cp-config.module.css
+++ b/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;
+    }
 }
--- a/src/features/cp-config/hooks/useCPConfigPage.js
+++ b/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 [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) {
--- a/src/features/cp-config/pages/CPConfigPage.jsx
+++ b/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,8 +67,15 @@ 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}>
+            <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>
+                </div>
+                <div className={styles.configDrawerBody}>
                    <section className="form-drawer__section">
                        <div className="form-drawer__section-title">关系与等级</div>
                        <div className={styles.relationEditorList}>
@ -70,13 +84,15 @@ function CPConfigDrawer({ page }) {
                                    disabled={disabled}
                                    key={relation.relationType}
                                    relation={relation}
+                                    resourceGroups={page.resourceGroups}
                                    updateLevel={page.updateLevel}
                                    updateRelation={page.updateRelation}
                                />
                            ))}
                        </div>
                    </section>
-                <div className="form-drawer__actions">
+                </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");
 }