完善相关接口
This commit is contained in:
zhx
parent
d87cc49797
commit
f97aad449a
File diff suppressed because it is too large
Load Diff
@ -42,6 +42,7 @@ const iconMap = {
|
||||
category: CategoryOutlined,
|
||||
dashboard: DashboardOutlined,
|
||||
event_available: EventAvailableOutlined,
|
||||
explore: MapOutlined,
|
||||
gift: CardGiftcardOutlined,
|
||||
inventory: Inventory2Outlined,
|
||||
leaderboard: LeaderboardOutlined,
|
||||
@ -114,6 +115,7 @@ export const fallbackNavigation = [
|
||||
children: [
|
||||
routeNavItem("app-config-h5", { icon: SettingsApplicationsOutlined }),
|
||||
routeNavItem("app-config-banners", { icon: ImageOutlined }),
|
||||
routeNavItem("app-config-explore", { icon: MapOutlined }),
|
||||
routeNavItem("payment-recharge-products", { icon: WalletOutlined }),
|
||||
routeNavItem("app-config-versions", { icon: SettingsApplicationsOutlined }),
|
||||
],
|
||||
|
||||
@ -146,6 +146,7 @@ export const MENU_CODES = {
|
||||
appConfig: "app-config",
|
||||
appConfigH5: "app-config-h5",
|
||||
appConfigBanners: "app-config-banners",
|
||||
appConfigExplore: "app-config-explore",
|
||||
appConfigVersions: "app-config-versions",
|
||||
resources: "resources",
|
||||
resourceList: "resource-list",
|
||||
|
||||
@ -7,7 +7,10 @@ import type {
|
||||
AppVersionDto,
|
||||
AppVersionPayload,
|
||||
EntityId,
|
||||
ExploreTabDto,
|
||||
ExploreTabPayload,
|
||||
H5LinkConfigDto,
|
||||
H5LinkConfigPayload,
|
||||
H5LinkConfigUpdatePayload,
|
||||
PageQuery,
|
||||
} from "@/shared/api/types";
|
||||
@ -27,6 +30,60 @@ export function updateH5Links(payload: H5LinkConfigUpdatePayload): Promise<ApiLi
|
||||
});
|
||||
}
|
||||
|
||||
export function createH5Link(payload: H5LinkConfigPayload): Promise<H5LinkConfigDto> {
|
||||
const endpoint = API_ENDPOINTS.createH5Link;
|
||||
return apiRequest<H5LinkConfigDto, H5LinkConfigPayload>(apiEndpointPath(API_OPERATIONS.createH5Link), {
|
||||
body: payload,
|
||||
method: endpoint.method
|
||||
});
|
||||
}
|
||||
|
||||
export function updateH5Link(key: EntityId, payload: H5LinkConfigPayload): Promise<H5LinkConfigDto> {
|
||||
const endpoint = API_ENDPOINTS.updateH5Link;
|
||||
return apiRequest<H5LinkConfigDto, H5LinkConfigPayload>(apiEndpointPath(API_OPERATIONS.updateH5Link, { key }), {
|
||||
body: payload,
|
||||
method: endpoint.method
|
||||
});
|
||||
}
|
||||
|
||||
export function deleteH5Link(key: EntityId): Promise<{ deleted: boolean }> {
|
||||
const endpoint = API_ENDPOINTS.deleteH5Link;
|
||||
return apiRequest<{ deleted: boolean }>(apiEndpointPath(API_OPERATIONS.deleteH5Link, { key }), {
|
||||
method: endpoint.method
|
||||
});
|
||||
}
|
||||
|
||||
export function listExploreTabs(query: PageQuery = {}): Promise<ApiList<ExploreTabDto>> {
|
||||
const endpoint = API_ENDPOINTS.listExploreTabs;
|
||||
return apiRequest<ApiList<ExploreTabDto>>(apiEndpointPath(API_OPERATIONS.listExploreTabs), {
|
||||
method: endpoint.method,
|
||||
query
|
||||
});
|
||||
}
|
||||
|
||||
export function createExploreTab(payload: ExploreTabPayload): Promise<ExploreTabDto> {
|
||||
const endpoint = API_ENDPOINTS.createExploreTab;
|
||||
return apiRequest<ExploreTabDto, ExploreTabPayload>(apiEndpointPath(API_OPERATIONS.createExploreTab), {
|
||||
body: payload,
|
||||
method: endpoint.method
|
||||
});
|
||||
}
|
||||
|
||||
export function updateExploreTab(tabId: EntityId, payload: ExploreTabPayload): Promise<ExploreTabDto> {
|
||||
const endpoint = API_ENDPOINTS.updateExploreTab;
|
||||
return apiRequest<ExploreTabDto, ExploreTabPayload>(apiEndpointPath(API_OPERATIONS.updateExploreTab, { tab_id: tabId }), {
|
||||
body: payload,
|
||||
method: endpoint.method
|
||||
});
|
||||
}
|
||||
|
||||
export function deleteExploreTab(tabId: EntityId): Promise<{ deleted: boolean }> {
|
||||
const endpoint = API_ENDPOINTS.deleteExploreTab;
|
||||
return apiRequest<{ deleted: boolean }>(apiEndpointPath(API_OPERATIONS.deleteExploreTab, { tab_id: tabId }), {
|
||||
method: endpoint.method
|
||||
});
|
||||
}
|
||||
|
||||
export function listBanners(query: PageQuery = {}): Promise<ApiList<AppBannerDto>> {
|
||||
const endpoint = API_ENDPOINTS.listBanners;
|
||||
return apiRequest<ApiList<AppBannerDto>>(apiEndpointPath(API_OPERATIONS.listBanners), {
|
||||
|
||||
@ -27,3 +27,8 @@
|
||||
.formWideField {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.statusCell {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
171
src/features/app-config/hooks/useExploreConfigPage.js
Normal file
171
src/features/app-config/hooks/useExploreConfigPage.js
Normal file
@ -0,0 +1,171 @@
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { createExploreTab, deleteExploreTab, listExploreTabs, updateExploreTab } from "@/features/app-config/api";
|
||||
import { useAppConfigAbilities } from "@/features/app-config/permissions.js";
|
||||
import { exploreTabSchema } from "@/features/app-config/schema";
|
||||
import { parseForm } from "@/shared/forms/validation";
|
||||
import { useAdminQuery } from "@/shared/hooks/useAdminQuery.js";
|
||||
import { useConfirm } from "@/shared/ui/ConfirmProvider.jsx";
|
||||
import { useToast } from "@/shared/ui/ToastProvider.jsx";
|
||||
|
||||
const emptyData = { items: [], total: 0 };
|
||||
|
||||
const emptyForm = () => ({
|
||||
enabled: true,
|
||||
h5Url: "",
|
||||
sortOrder: "0",
|
||||
tab: "",
|
||||
});
|
||||
|
||||
export function useExploreConfigPage() {
|
||||
const abilities = useAppConfigAbilities();
|
||||
const confirm = useConfirm();
|
||||
const { showToast } = useToast();
|
||||
const [keyword, setKeyword] = useState("");
|
||||
const [enabled, setEnabled] = useState("");
|
||||
const [activeAction, setActiveAction] = useState("");
|
||||
const [editingItem, setEditingItem] = useState(null);
|
||||
const [form, setFormState] = useState(emptyForm);
|
||||
const [loadingAction, setLoadingAction] = useState("");
|
||||
|
||||
const filters = useMemo(() => ({ enabled, keyword }), [enabled, keyword]);
|
||||
const queryFn = useCallback(() => listExploreTabs(filters), [filters]);
|
||||
const {
|
||||
data = emptyData,
|
||||
error,
|
||||
loading,
|
||||
reload,
|
||||
} = useAdminQuery(queryFn, {
|
||||
errorMessage: "加载 Explore 配置失败",
|
||||
initialData: emptyData,
|
||||
queryKey: ["app-config", "explore-tabs", filters],
|
||||
});
|
||||
|
||||
const setForm = (patch) => {
|
||||
setFormState((current) => ({ ...current, ...patch }));
|
||||
};
|
||||
|
||||
const openCreate = () => {
|
||||
setEditingItem(null);
|
||||
setFormState(emptyForm());
|
||||
setActiveAction("create");
|
||||
};
|
||||
|
||||
const openEdit = (item) => {
|
||||
setEditingItem(item);
|
||||
setFormState(formFromExploreTab(item));
|
||||
setActiveAction("edit");
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
setActiveAction("");
|
||||
setEditingItem(null);
|
||||
setFormState(emptyForm());
|
||||
};
|
||||
|
||||
const resetFilters = () => {
|
||||
setKeyword("");
|
||||
setEnabled("");
|
||||
};
|
||||
|
||||
const submitExploreTab = async (event) => {
|
||||
event.preventDefault();
|
||||
const payload = parseForm(exploreTabSchema, normalizeForm(form));
|
||||
const action = editingItem ? "edit" : "create";
|
||||
setLoadingAction(action);
|
||||
try {
|
||||
if (editingItem) {
|
||||
await updateExploreTab(editingItem.id, payload);
|
||||
showToast("Explore 配置已更新", "success");
|
||||
} else {
|
||||
await createExploreTab(payload);
|
||||
showToast("Explore 配置已新增", "success");
|
||||
}
|
||||
closeDialog();
|
||||
await reload();
|
||||
} catch (err) {
|
||||
showToast(err.message || "操作失败", "error");
|
||||
} finally {
|
||||
setLoadingAction("");
|
||||
}
|
||||
};
|
||||
|
||||
const toggleExploreTab = async (item, nextEnabled) => {
|
||||
setLoadingAction(`toggle:${item.id}`);
|
||||
try {
|
||||
await updateExploreTab(item.id, {
|
||||
enabled: nextEnabled,
|
||||
h5Url: item.h5Url || "",
|
||||
sortOrder: item.sortOrder || 0,
|
||||
tab: item.tab || "",
|
||||
});
|
||||
await reload();
|
||||
showToast(nextEnabled ? "Explore tab 已启用" : "Explore tab 已关闭", "success");
|
||||
} catch (err) {
|
||||
showToast(err.message || "操作失败", "error");
|
||||
} finally {
|
||||
setLoadingAction("");
|
||||
}
|
||||
};
|
||||
|
||||
const removeExploreTab = async (item) => {
|
||||
const ok = await confirm({
|
||||
confirmText: "删除",
|
||||
message: item.tab || `Explore ${item.id}`,
|
||||
title: "删除 Explore tab",
|
||||
tone: "danger",
|
||||
});
|
||||
if (!ok) {
|
||||
return;
|
||||
}
|
||||
setLoadingAction(`delete:${item.id}`);
|
||||
try {
|
||||
await deleteExploreTab(item.id);
|
||||
await reload();
|
||||
showToast("Explore 配置已删除", "success");
|
||||
} catch (err) {
|
||||
showToast(err.message || "删除失败", "error");
|
||||
} finally {
|
||||
setLoadingAction("");
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
abilities,
|
||||
activeAction,
|
||||
closeDialog,
|
||||
data,
|
||||
editingItem,
|
||||
enabled,
|
||||
error,
|
||||
form,
|
||||
keyword,
|
||||
loading,
|
||||
loadingAction,
|
||||
openCreate,
|
||||
openEdit,
|
||||
reload,
|
||||
removeExploreTab,
|
||||
resetFilters,
|
||||
setEnabled,
|
||||
setForm,
|
||||
setKeyword,
|
||||
submitExploreTab,
|
||||
toggleExploreTab,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeForm(form) {
|
||||
return {
|
||||
...form,
|
||||
sortOrder: form.sortOrder || 0,
|
||||
};
|
||||
}
|
||||
|
||||
function formFromExploreTab(item) {
|
||||
return {
|
||||
enabled: Boolean(item.enabled),
|
||||
h5Url: item.h5Url || "",
|
||||
sortOrder: String(item.sortOrder || 0),
|
||||
tab: item.tab || "",
|
||||
};
|
||||
}
|
||||
@ -1,17 +1,20 @@
|
||||
import { useCallback, useState } from "react";
|
||||
import { parseForm } from "@/shared/forms/validation";
|
||||
import { useAdminQuery } from "@/shared/hooks/useAdminQuery.js";
|
||||
import { useConfirm } from "@/shared/ui/ConfirmProvider.jsx";
|
||||
import { useToast } from "@/shared/ui/ToastProvider.jsx";
|
||||
import { listH5Links, updateH5Links } from "@/features/app-config/api";
|
||||
import { createH5Link, deleteH5Link, listH5Links, updateH5Link } from "@/features/app-config/api";
|
||||
import { useAppConfigAbilities } from "@/features/app-config/permissions.js";
|
||||
import { h5LinkUpdateSchema } from "@/features/app-config/schema";
|
||||
|
||||
const emptyData = { items: [], total: 0 };
|
||||
const emptyForm = () => ({ url: "" });
|
||||
const emptyForm = () => ({ key: "", label: "", url: "" });
|
||||
|
||||
export function useH5ConfigPage() {
|
||||
const abilities = useAppConfigAbilities();
|
||||
const confirm = useConfirm();
|
||||
const { showToast } = useToast();
|
||||
const [activeAction, setActiveAction] = useState("");
|
||||
const [editingItem, setEditingItem] = useState(null);
|
||||
const [form, setForm] = useState(emptyForm);
|
||||
const [loadingAction, setLoadingAction] = useState("");
|
||||
@ -22,12 +25,20 @@ export function useH5ConfigPage() {
|
||||
queryKey: ["app-config", "h5-links"]
|
||||
});
|
||||
|
||||
const openCreate = () => {
|
||||
setEditingItem(null);
|
||||
setForm(emptyForm());
|
||||
setActiveAction("create");
|
||||
};
|
||||
|
||||
const openEdit = (item) => {
|
||||
setEditingItem(item);
|
||||
setForm({ url: item.url || "" });
|
||||
setForm({ key: item.key || "", label: item.label || "", url: item.url || "" });
|
||||
setActiveAction("edit");
|
||||
};
|
||||
|
||||
const closeEdit = () => {
|
||||
setActiveAction("");
|
||||
setEditingItem(null);
|
||||
setForm(emptyForm());
|
||||
};
|
||||
@ -35,12 +46,24 @@ export function useH5ConfigPage() {
|
||||
const submitEdit = async (event) => {
|
||||
event.preventDefault();
|
||||
if (!editingItem) {
|
||||
const payload = parseForm(h5LinkUpdateSchema, form);
|
||||
setLoadingAction("create");
|
||||
try {
|
||||
await createH5Link(payload);
|
||||
closeEdit();
|
||||
await reload();
|
||||
showToast("H5配置已新增", "success");
|
||||
} catch (err) {
|
||||
showToast(err.message || "操作失败", "error");
|
||||
} finally {
|
||||
setLoadingAction("");
|
||||
}
|
||||
return;
|
||||
}
|
||||
const payload = parseForm(h5LinkUpdateSchema, { key: editingItem.key, url: form.url });
|
||||
const payload = parseForm(h5LinkUpdateSchema, { ...form, key: editingItem.key });
|
||||
setLoadingAction("edit");
|
||||
try {
|
||||
await updateH5Links({ items: [payload] });
|
||||
await updateH5Link(editingItem.key, payload);
|
||||
closeEdit();
|
||||
await reload();
|
||||
showToast("H5配置已更新", "success");
|
||||
@ -51,7 +74,30 @@ export function useH5ConfigPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const removeH5Link = async (item) => {
|
||||
const ok = await confirm({
|
||||
confirmText: "删除",
|
||||
message: item.label || item.key,
|
||||
title: "删除H5配置",
|
||||
tone: "danger"
|
||||
});
|
||||
if (!ok) {
|
||||
return;
|
||||
}
|
||||
setLoadingAction(`delete:${item.key}`);
|
||||
try {
|
||||
await deleteH5Link(item.key);
|
||||
await reload();
|
||||
showToast("H5配置已删除", "success");
|
||||
} catch (err) {
|
||||
showToast(err.message || "删除失败", "error");
|
||||
} finally {
|
||||
setLoadingAction("");
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
activeAction,
|
||||
abilities,
|
||||
closeEdit,
|
||||
data,
|
||||
@ -60,8 +106,10 @@ export function useH5ConfigPage() {
|
||||
form,
|
||||
loading,
|
||||
loadingAction,
|
||||
openCreate,
|
||||
openEdit,
|
||||
reload,
|
||||
removeH5Link,
|
||||
setForm,
|
||||
submitEdit
|
||||
};
|
||||
|
||||
@ -8,7 +8,6 @@ import { useMemo } from "react";
|
||||
import { APP_BANNER_DISPLAY_SCOPE_OPTIONS } from "@/features/app-config/constants";
|
||||
import { useBannerConfigPage } from "@/features/app-config/hooks/useBannerConfigPage.js";
|
||||
import styles from "@/features/app-config/app-config.module.css";
|
||||
import { Button } from "@/shared/ui/Button.jsx";
|
||||
import {
|
||||
AdminFormDialog,
|
||||
AdminFormFieldGrid,
|
||||
@ -59,13 +58,9 @@ export function BannerConfigPage() {
|
||||
<AdminListToolbar
|
||||
actions={
|
||||
page.abilities.canUpdate ? (
|
||||
<Button
|
||||
startIcon={<AddOutlined fontSize="small" />}
|
||||
variant="primary"
|
||||
onClick={page.openCreate}
|
||||
>
|
||||
新增BANNER
|
||||
</Button>
|
||||
<AdminActionIconButton label="新增BANNER" primary onClick={page.openCreate}>
|
||||
<AddOutlined fontSize="small" />
|
||||
</AdminActionIconButton>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
@ -73,14 +68,16 @@ export function BannerConfigPage() {
|
||||
<AdminListBody>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
fixedEdges={false}
|
||||
items={items}
|
||||
minWidth="1480px"
|
||||
pagination={{
|
||||
itemCount: items.length,
|
||||
page: 1,
|
||||
pageSize: items.length || 1,
|
||||
total: page.data.total ?? items.length,
|
||||
}}
|
||||
rowKey={(item) => item.id}
|
||||
/>
|
||||
<div className="pagination-bar">
|
||||
<span>{items.length} 条</span>
|
||||
</div>
|
||||
</AdminListBody>
|
||||
</DataState>
|
||||
|
||||
|
||||
216
src/features/app-config/pages/ExploreConfigPage.jsx
Normal file
216
src/features/app-config/pages/ExploreConfigPage.jsx
Normal file
@ -0,0 +1,216 @@
|
||||
import AddOutlined from "@mui/icons-material/AddOutlined";
|
||||
import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
|
||||
import EditOutlined from "@mui/icons-material/EditOutlined";
|
||||
import LinkOutlined from "@mui/icons-material/LinkOutlined";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import { useMemo } from "react";
|
||||
import { useExploreConfigPage } from "@/features/app-config/hooks/useExploreConfigPage.js";
|
||||
import styles from "@/features/app-config/app-config.module.css";
|
||||
import { Button } from "@/shared/ui/Button.jsx";
|
||||
import {
|
||||
AdminFormDialog,
|
||||
AdminFormFieldGrid,
|
||||
AdminFormSection,
|
||||
AdminFormSwitchField,
|
||||
} from "@/shared/ui/AdminFormDialog.jsx";
|
||||
import {
|
||||
AdminActionIconButton,
|
||||
AdminFilterResetButton,
|
||||
AdminFilterSelect,
|
||||
AdminListBody,
|
||||
AdminListPage,
|
||||
AdminListToolbar,
|
||||
AdminRowActions,
|
||||
AdminSearchBox,
|
||||
} from "@/shared/ui/AdminListLayout.jsx";
|
||||
import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
|
||||
import { DataState } from "@/shared/ui/DataState.jsx";
|
||||
import { DataTable } from "@/shared/ui/DataTable.jsx";
|
||||
import { formatMillis } from "@/shared/utils/time.js";
|
||||
|
||||
const enabledOptions = [
|
||||
["", "全部状态"],
|
||||
["true", "启用"],
|
||||
["false", "关闭"],
|
||||
];
|
||||
|
||||
export function ExploreConfigPage() {
|
||||
const page = useExploreConfigPage();
|
||||
const items = page.data.items || [];
|
||||
const columns = useMemo(() => exploreColumns(page), [page]);
|
||||
const saving = page.loadingAction === "create" || page.loadingAction === "edit";
|
||||
|
||||
return (
|
||||
<AdminListPage>
|
||||
<AdminListToolbar
|
||||
actions={
|
||||
page.abilities.canUpdate ? (
|
||||
<Button startIcon={<AddOutlined fontSize="small" />} variant="primary" onClick={page.openCreate}>
|
||||
新增 Explore tab
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
filters={
|
||||
<>
|
||||
<AdminSearchBox
|
||||
placeholder="搜索 tab / H5 链接"
|
||||
value={page.keyword}
|
||||
onChange={page.setKeyword}
|
||||
/>
|
||||
<AdminFilterSelect
|
||||
label="状态"
|
||||
options={enabledOptions}
|
||||
value={page.enabled}
|
||||
onChange={page.setEnabled}
|
||||
/>
|
||||
<AdminFilterResetButton disabled={!page.keyword && !page.enabled} onClick={page.resetFilters} />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<DataState error={page.error} loading={page.loading} onRetry={page.reload}>
|
||||
<AdminListBody>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
items={items}
|
||||
minWidth="1080px"
|
||||
pagination={{
|
||||
itemCount: items.length,
|
||||
page: 1,
|
||||
pageSize: Math.max(items.length, 1),
|
||||
total: page.data.total ?? items.length,
|
||||
}}
|
||||
rowKey={(item) => item.id}
|
||||
/>
|
||||
</AdminListBody>
|
||||
</DataState>
|
||||
|
||||
<AdminFormDialog
|
||||
loading={saving}
|
||||
open={Boolean(page.activeAction)}
|
||||
submitDisabled={!page.abilities.canUpdate || saving}
|
||||
title={page.editingItem ? "编辑 Explore tab" : "新增 Explore tab"}
|
||||
onClose={page.closeDialog}
|
||||
onSubmit={page.submitExploreTab}
|
||||
>
|
||||
<AdminFormSection title="tab 配置">
|
||||
<AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
|
||||
<TextField
|
||||
autoFocus
|
||||
disabled={!page.abilities.canUpdate}
|
||||
label="tab"
|
||||
required
|
||||
value={page.form.tab}
|
||||
onChange={(event) => page.setForm({ tab: event.target.value })}
|
||||
/>
|
||||
<TextField
|
||||
disabled={!page.abilities.canUpdate}
|
||||
inputProps={{ step: 1 }}
|
||||
label="排序"
|
||||
type="number"
|
||||
value={page.form.sortOrder}
|
||||
onChange={(event) => page.setForm({ sortOrder: event.target.value })}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.formWideField}
|
||||
disabled={!page.abilities.canUpdate}
|
||||
label="H5 链接"
|
||||
required
|
||||
value={page.form.h5Url}
|
||||
onChange={(event) => page.setForm({ h5Url: event.target.value })}
|
||||
/>
|
||||
<AdminFormSwitchField
|
||||
checked={page.form.enabled}
|
||||
checkedLabel="启用"
|
||||
disabled={!page.abilities.canUpdate}
|
||||
label="状态"
|
||||
switchProps={{ inputProps: { "aria-label": "Explore tab 启用状态" } }}
|
||||
uncheckedLabel="关闭"
|
||||
onChange={(checked) => page.setForm({ enabled: checked })}
|
||||
/>
|
||||
</AdminFormFieldGrid>
|
||||
</AdminFormSection>
|
||||
</AdminFormDialog>
|
||||
</AdminListPage>
|
||||
);
|
||||
}
|
||||
|
||||
function exploreColumns(page) {
|
||||
const baseColumns = [
|
||||
{
|
||||
key: "tab",
|
||||
label: "tab",
|
||||
width: "minmax(180px, 0.8fr)",
|
||||
},
|
||||
{
|
||||
key: "h5Url",
|
||||
label: "H5链接",
|
||||
render: (item) => <span className={styles.linkText}>{item.h5Url || "-"}</span>,
|
||||
width: "minmax(360px, 1.6fr)",
|
||||
},
|
||||
{
|
||||
key: "enabled",
|
||||
label: "状态",
|
||||
render: (item) => <ExploreStatusSwitch item={item} page={page} />,
|
||||
width: "minmax(120px, 0.5fr)",
|
||||
},
|
||||
{
|
||||
key: "sortOrder",
|
||||
label: "排序",
|
||||
render: (item) => item.sortOrder ?? 0,
|
||||
width: "minmax(100px, 0.4fr)",
|
||||
},
|
||||
{
|
||||
key: "updatedAtMs",
|
||||
label: "更新时间",
|
||||
render: (item) => formatMillis(item.updatedAtMs),
|
||||
width: "minmax(170px, 0.7fr)",
|
||||
},
|
||||
];
|
||||
|
||||
if (!page.abilities.canUpdate) {
|
||||
return baseColumns;
|
||||
}
|
||||
|
||||
return [
|
||||
...baseColumns,
|
||||
{
|
||||
key: "actions",
|
||||
label: "操作",
|
||||
render: (item) => <ExploreRowActions item={item} page={page} />,
|
||||
width: "minmax(124px, 0.5fr)",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function ExploreStatusSwitch({ item, page }) {
|
||||
const disabled = !page.abilities.canUpdate || page.loadingAction === `toggle:${item.id}`;
|
||||
return (
|
||||
<div className={styles.statusCell}>
|
||||
<AdminSwitch
|
||||
checked={Boolean(item.enabled)}
|
||||
checkedLabel="启用"
|
||||
disabled={disabled}
|
||||
inputProps={{ "aria-label": item.enabled ? "关闭 Explore tab" : "启用 Explore tab" }}
|
||||
uncheckedLabel="关闭"
|
||||
onChange={(event) => page.toggleExploreTab(item, event.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ExploreRowActions({ item, page }) {
|
||||
return (
|
||||
<AdminRowActions>
|
||||
<AdminActionIconButton label="编辑" onClick={() => page.openEdit(item)}>
|
||||
{item.h5Url ? <LinkOutlined fontSize="small" /> : <EditOutlined fontSize="small" />}
|
||||
</AdminActionIconButton>
|
||||
<AdminActionIconButton
|
||||
label="删除"
|
||||
disabled={page.loadingAction === `delete:${item.id}`}
|
||||
onClick={() => page.removeExploreTab(item)}
|
||||
>
|
||||
<DeleteOutlineOutlined fontSize="small" />
|
||||
</AdminActionIconButton>
|
||||
</AdminRowActions>
|
||||
);
|
||||
}
|
||||
@ -1,14 +1,18 @@
|
||||
import AddOutlined from "@mui/icons-material/AddOutlined";
|
||||
import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
|
||||
import EditOutlined from "@mui/icons-material/EditOutlined";
|
||||
import LinkOutlined from "@mui/icons-material/LinkOutlined";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import { formatMillis } from "@/shared/utils/time.js";
|
||||
import { AdminFormDialog, AdminFormSection } from "@/shared/ui/AdminFormDialog.jsx";
|
||||
import { AdminFormDialog, AdminFormFieldGrid, AdminFormSection } from "@/shared/ui/AdminFormDialog.jsx";
|
||||
import { Button } from "@/shared/ui/Button.jsx";
|
||||
import { DataState } from "@/shared/ui/DataState.jsx";
|
||||
import { DataTable } from "@/shared/ui/DataTable.jsx";
|
||||
import {
|
||||
AdminActionIconButton,
|
||||
AdminListBody,
|
||||
AdminListPage,
|
||||
AdminListToolbar,
|
||||
AdminRowActions
|
||||
} from "@/shared/ui/AdminListLayout.jsx";
|
||||
import { useH5ConfigPage } from "@/features/app-config/hooks/useH5ConfigPage.js";
|
||||
@ -42,6 +46,7 @@ const baseColumns = [
|
||||
export function H5ConfigPage() {
|
||||
const page = useH5ConfigPage();
|
||||
const items = page.data.items || [];
|
||||
const saving = page.loadingAction === "create" || page.loadingAction === "edit";
|
||||
const columns = page.abilities.canUpdate
|
||||
? [
|
||||
...baseColumns,
|
||||
@ -49,39 +54,73 @@ export function H5ConfigPage() {
|
||||
key: "actions",
|
||||
label: "操作",
|
||||
render: (item) => <H5LinkActions item={item} page={page} />,
|
||||
width: "minmax(88px, 0.4fr)"
|
||||
width: "minmax(124px, 0.5fr)"
|
||||
}
|
||||
]
|
||||
: baseColumns;
|
||||
|
||||
return (
|
||||
<AdminListPage>
|
||||
<AdminListToolbar
|
||||
actions={
|
||||
page.abilities.canUpdate ? (
|
||||
<Button startIcon={<AddOutlined fontSize="small" />} variant="primary" onClick={page.openCreate}>
|
||||
新增H5配置
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
<DataState error={page.error} loading={page.loading} onRetry={page.reload}>
|
||||
<AdminListBody>
|
||||
<DataTable columns={columns} items={items} minWidth="980px" rowKey={(item) => item.key} />
|
||||
<div className="pagination-bar">
|
||||
<span>{items.length} 条</span>
|
||||
</div>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
items={items}
|
||||
minWidth="980px"
|
||||
pagination={{
|
||||
itemCount: items.length,
|
||||
page: 1,
|
||||
pageSize: Math.max(items.length, 1),
|
||||
total: page.data.total ?? items.length
|
||||
}}
|
||||
rowKey={(item) => item.key}
|
||||
/>
|
||||
</AdminListBody>
|
||||
</DataState>
|
||||
|
||||
<AdminFormDialog
|
||||
loading={page.loadingAction === "edit"}
|
||||
open={Boolean(page.editingItem)}
|
||||
size="compact"
|
||||
submitDisabled={!page.abilities.canUpdate || page.loadingAction === "edit"}
|
||||
title="编辑H5链接"
|
||||
loading={saving}
|
||||
open={Boolean(page.activeAction)}
|
||||
submitDisabled={!page.abilities.canUpdate || saving}
|
||||
title={page.editingItem ? "编辑H5配置" : "新增H5配置"}
|
||||
onClose={page.closeEdit}
|
||||
onSubmit={page.submitEdit}
|
||||
>
|
||||
<AdminFormSection title="链接信息">
|
||||
<TextField
|
||||
autoFocus
|
||||
disabled={!page.abilities.canUpdate}
|
||||
label={page.editingItem?.label || "H5链接"}
|
||||
value={page.form.url}
|
||||
onChange={(event) => page.setForm({ url: event.target.value })}
|
||||
/>
|
||||
<AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
|
||||
<TextField
|
||||
autoFocus
|
||||
disabled={!page.abilities.canUpdate}
|
||||
label="配置项"
|
||||
required
|
||||
value={page.form.label}
|
||||
onChange={(event) => page.setForm({ ...page.form, label: event.target.value })}
|
||||
/>
|
||||
<TextField
|
||||
disabled={!page.abilities.canUpdate || Boolean(page.editingItem)}
|
||||
label="key"
|
||||
required
|
||||
value={page.form.key}
|
||||
onChange={(event) => page.setForm({ ...page.form, key: event.target.value })}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.formWideField}
|
||||
disabled={!page.abilities.canUpdate}
|
||||
label="H5链接"
|
||||
required
|
||||
value={page.form.url}
|
||||
onChange={(event) => page.setForm({ ...page.form, url: event.target.value })}
|
||||
/>
|
||||
</AdminFormFieldGrid>
|
||||
</AdminFormSection>
|
||||
</AdminFormDialog>
|
||||
</AdminListPage>
|
||||
@ -94,6 +133,13 @@ function H5LinkActions({ item, page }) {
|
||||
<AdminActionIconButton label="编辑" onClick={() => page.openEdit(item)}>
|
||||
{item.url ? <LinkOutlined fontSize="small" /> : <EditOutlined fontSize="small" />}
|
||||
</AdminActionIconButton>
|
||||
<AdminActionIconButton
|
||||
label="删除"
|
||||
disabled={page.loadingAction === `delete:${item.key}`}
|
||||
onClick={() => page.removeH5Link(item)}
|
||||
>
|
||||
<DeleteOutlineOutlined fontSize="small" />
|
||||
</AdminActionIconButton>
|
||||
</AdminRowActions>
|
||||
);
|
||||
}
|
||||
|
||||
@ -17,6 +17,14 @@ export const appConfigRoutes = [
|
||||
path: "/app-config/banners",
|
||||
permission: PERMISSIONS.appConfigView
|
||||
},
|
||||
{
|
||||
label: "Explore配置",
|
||||
loader: () => import("./pages/ExploreConfigPage.jsx").then((module) => module.ExploreConfigPage),
|
||||
menuCode: MENU_CODES.appConfigExplore,
|
||||
pageKey: "app-config-explore",
|
||||
path: "/app-config/explore",
|
||||
permission: PERMISSIONS.appConfigView
|
||||
},
|
||||
{
|
||||
label: "内购配置",
|
||||
loader: () =>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { appBannerSchema } from "@/features/app-config/schema";
|
||||
import { appBannerSchema, exploreTabSchema, h5LinkUpdateSchema } from "@/features/app-config/schema";
|
||||
import { FormValidationError, parseForm } from "@/shared/forms/validation";
|
||||
|
||||
const validBannerForm = {
|
||||
@ -19,6 +19,27 @@ const validBannerForm = {
|
||||
};
|
||||
|
||||
describe("app config form schema", () => {
|
||||
test("validates dynamic h5 config item", () => {
|
||||
const payload = parseForm(h5LinkUpdateSchema, {
|
||||
key: "host-center.v2",
|
||||
label: "Host Center",
|
||||
url: "https://h5.example.com/host",
|
||||
});
|
||||
|
||||
expect(payload.key).toBe("host-center.v2");
|
||||
expect(payload.label).toBe("Host Center");
|
||||
});
|
||||
|
||||
test("rejects dynamic h5 config key with spaces", () => {
|
||||
expect(() =>
|
||||
parseForm(h5LinkUpdateSchema, {
|
||||
key: "host center",
|
||||
label: "Host Center",
|
||||
url: "https://h5.example.com/host",
|
||||
}),
|
||||
).toThrow(FormValidationError);
|
||||
});
|
||||
|
||||
test("keeps banner display scope and delivery time fields", () => {
|
||||
const payload = parseForm(appBannerSchema, validBannerForm);
|
||||
|
||||
@ -46,4 +67,27 @@ describe("app config form schema", () => {
|
||||
}),
|
||||
).toThrow(FormValidationError);
|
||||
});
|
||||
|
||||
test("validates explore tab h5 url and sort order", () => {
|
||||
const payload = parseForm(exploreTabSchema, {
|
||||
enabled: true,
|
||||
h5Url: "https://h5.example.com/explore/live",
|
||||
sortOrder: "3",
|
||||
tab: "Live",
|
||||
});
|
||||
|
||||
expect(payload.sortOrder).toBe(3);
|
||||
expect(payload.h5Url).toBe("https://h5.example.com/explore/live");
|
||||
});
|
||||
|
||||
test("rejects explore tab url with whitespace", () => {
|
||||
expect(() =>
|
||||
parseForm(exploreTabSchema, {
|
||||
enabled: true,
|
||||
h5Url: "https://h5.example.com/explore live",
|
||||
sortOrder: "0",
|
||||
tab: "Live",
|
||||
}),
|
||||
).toThrow(FormValidationError);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,20 +1,36 @@
|
||||
import { z } from "zod";
|
||||
import { H5_LINK_KEYS } from "@/features/app-config/constants";
|
||||
|
||||
const h5LinkURLSchema = z
|
||||
const requiredH5LinkURLSchema = z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, "请填写 H5 链接")
|
||||
.max(2048, "H5 链接不能超过 2048 个字符")
|
||||
.refine((value) => !/\s/.test(value), "H5 链接不能包含空白字符")
|
||||
.default("");
|
||||
.refine((value) => !/\s/.test(value), "H5 链接不能包含空白字符");
|
||||
|
||||
const h5LinkKeySchema = z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, "请填写 key")
|
||||
.max(80, "key 不能超过 80 个字符")
|
||||
.regex(/^[A-Za-z0-9_.:-]+$/, "key 只能包含字母、数字、下划线、中横线、点和冒号");
|
||||
|
||||
export const h5LinkUpdateSchema = z.object({
|
||||
key: z.enum(H5_LINK_KEYS),
|
||||
url: h5LinkURLSchema,
|
||||
key: h5LinkKeySchema,
|
||||
label: z.string().trim().min(1, "请填写配置项").max(80, "配置项不能超过 80 个字符"),
|
||||
url: requiredH5LinkURLSchema,
|
||||
});
|
||||
|
||||
export type H5LinkUpdateForm = z.infer<typeof h5LinkUpdateSchema>;
|
||||
|
||||
export const exploreTabSchema = z.object({
|
||||
enabled: z.boolean(),
|
||||
h5Url: requiredH5LinkURLSchema,
|
||||
sortOrder: z.coerce.number().int("排序必须是整数").default(0),
|
||||
tab: z.string().trim().min(1, "请填写 tab").max(40, "tab 不能超过 40 个字符"),
|
||||
});
|
||||
|
||||
export type ExploreTabForm = z.infer<typeof exploreTabSchema>;
|
||||
|
||||
export const appBannerSchema = z
|
||||
.object({
|
||||
bannerType: z.enum(["h5", "app"]),
|
||||
|
||||
@ -46,6 +46,8 @@ export interface GameCatalogPage {
|
||||
nextCursor?: string;
|
||||
pageSize?: number;
|
||||
serverTimeMs?: number;
|
||||
total?: number;
|
||||
totalPages?: number;
|
||||
}
|
||||
|
||||
export interface GamePlatformPage {
|
||||
|
||||
@ -31,8 +31,7 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.meta,
|
||||
.tags {
|
||||
.meta {
|
||||
overflow: hidden;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
@ -40,10 +39,6 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tags {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.secretMeta {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
deleteGameCatalog,
|
||||
listGameCatalog,
|
||||
@ -57,9 +57,12 @@ export function useGamesPage() {
|
||||
const { showToast } = useToast();
|
||||
const [platformCode, setPlatformCode] = useState("");
|
||||
const [status, setStatus] = useState("");
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageCursors, setPageCursors] = useState({ 1: "" });
|
||||
const [pageSize, setPageSize] = useState(defaultPageSize);
|
||||
const [catalogItems, setCatalogItems] = useState([]);
|
||||
const [catalogMeta, setCatalogMeta] = useState(emptyCatalog);
|
||||
const [catalogError, setCatalogError] = useState("");
|
||||
const [catalogLoading, setCatalogLoading] = useState(true);
|
||||
const [catalogLoadingMore, setCatalogLoadingMore] = useState(false);
|
||||
const [activeAction, setActiveAction] = useState("");
|
||||
const [editingGameId, setEditingGameId] = useState("");
|
||||
const [editingPlatformCode, setEditingPlatformCode] = useState("");
|
||||
@ -69,6 +72,7 @@ export function useGamesPage() {
|
||||
const [syncPlatform, setSyncPlatform] = useState(null);
|
||||
const [syncCandidates, setSyncCandidates] = useState([]);
|
||||
const [selectedSyncGameIds, setSelectedSyncGameIds] = useState([]);
|
||||
const catalogRequestRef = useRef(0);
|
||||
|
||||
const platformsQueryFn = useCallback(() => listGamePlatforms(), []);
|
||||
const {
|
||||
@ -82,26 +86,52 @@ export function useGamesPage() {
|
||||
queryKey: ["games", "platforms"],
|
||||
});
|
||||
|
||||
const catalogQueryFn = useCallback(
|
||||
() => listGameCatalog({ cursor: pageCursors[page] || "", platformCode, status, pageSize }),
|
||||
[page, pageCursors, pageSize, platformCode, status],
|
||||
const loadCatalog = useCallback(
|
||||
async (cursor = "", append = false) => {
|
||||
const requestId = catalogRequestRef.current + 1;
|
||||
catalogRequestRef.current = requestId;
|
||||
if (append) {
|
||||
setCatalogLoadingMore(true);
|
||||
} else {
|
||||
setCatalogLoading(true);
|
||||
}
|
||||
setCatalogError("");
|
||||
|
||||
try {
|
||||
const result = await listGameCatalog({ cursor, platformCode, status, pageSize });
|
||||
if (catalogRequestRef.current !== requestId) {
|
||||
return result;
|
||||
}
|
||||
setCatalogMeta(result);
|
||||
setCatalogItems((current) => (append ? mergeCatalogItems(current, result.items || []) : result.items || []));
|
||||
return result;
|
||||
} catch (err) {
|
||||
if (catalogRequestRef.current === requestId) {
|
||||
setCatalogError(err.message || "加载游戏列表失败");
|
||||
}
|
||||
return null;
|
||||
} finally {
|
||||
if (catalogRequestRef.current === requestId) {
|
||||
setCatalogLoading(false);
|
||||
setCatalogLoadingMore(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
[pageSize, platformCode, status],
|
||||
);
|
||||
const {
|
||||
data = emptyCatalog,
|
||||
error,
|
||||
loading,
|
||||
reload,
|
||||
} = useAdminQuery(catalogQueryFn, {
|
||||
errorMessage: "加载游戏列表失败",
|
||||
initialData: emptyCatalog,
|
||||
keepPreviousData: true,
|
||||
queryKey: ["games", "catalog", platformCode, status, pageSize, page, pageCursors[page] || ""],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
loadCatalog("", false);
|
||||
}, [loadCatalog]);
|
||||
|
||||
const platformOptions = useMemo(
|
||||
() => (platformData.items || []).map((platform) => [platform.platformCode, platform.platformName]),
|
||||
[platformData.items],
|
||||
);
|
||||
const resolveGameURL = useCallback(
|
||||
(game) => resolveGameURLFromPlatforms(platformData.items || [], game),
|
||||
[platformData.items],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!gameForm.platformCode && platformOptions.length > 0 && activeAction === "create-game") {
|
||||
@ -110,8 +140,8 @@ export function useGamesPage() {
|
||||
}, [activeAction, gameForm.platformCode, platformOptions]);
|
||||
|
||||
const resetCatalogPage = () => {
|
||||
setPage(1);
|
||||
setPageCursors({ 1: "" });
|
||||
setCatalogItems([]);
|
||||
setCatalogMeta(emptyCatalog);
|
||||
};
|
||||
|
||||
const changePlatformCode = (value) => {
|
||||
@ -129,17 +159,15 @@ export function useGamesPage() {
|
||||
resetCatalogPage();
|
||||
};
|
||||
|
||||
const changePage = (nextPage) => {
|
||||
if (nextPage < 1 || nextPage === page) {
|
||||
return;
|
||||
const loadNextPage = () => {
|
||||
if (!catalogMeta.nextCursor || catalogLoading || catalogLoadingMore) {
|
||||
return null;
|
||||
}
|
||||
if (nextPage === page + 1) {
|
||||
if (!data.nextCursor) {
|
||||
return;
|
||||
}
|
||||
setPageCursors((current) => ({ ...current, [nextPage]: data.nextCursor }));
|
||||
}
|
||||
setPage(nextPage);
|
||||
return loadCatalog(catalogMeta.nextCursor, true);
|
||||
};
|
||||
|
||||
const reloadCatalog = () => {
|
||||
return loadCatalog("", false);
|
||||
};
|
||||
|
||||
const resetFilters = () => {
|
||||
@ -196,7 +224,7 @@ export function useGamesPage() {
|
||||
await upsertGameCatalog(payload, editingGameId);
|
||||
await saveGameUrl(platformData.items || [], payload, gameForm.gameUrl);
|
||||
await reloadPlatforms();
|
||||
await reload();
|
||||
await reloadCatalog();
|
||||
showToast(editingGameId ? "游戏已更新" : "游戏已创建", "success");
|
||||
closeAction();
|
||||
} catch (err) {
|
||||
@ -219,7 +247,7 @@ export function useGamesPage() {
|
||||
try {
|
||||
await upsertGamePlatform(payload, editingPlatformCode);
|
||||
await reloadPlatforms();
|
||||
await reload();
|
||||
await reloadCatalog();
|
||||
showToast(editingPlatformCode ? "平台已更新" : "平台已创建", "success");
|
||||
closeAction();
|
||||
} catch (err) {
|
||||
@ -234,7 +262,7 @@ export function useGamesPage() {
|
||||
setLoadingAction(`status-${game.gameId}`);
|
||||
try {
|
||||
await setGameStatus(game.gameId, nextStatus);
|
||||
await reload();
|
||||
await reloadCatalog();
|
||||
showToast("游戏状态已更新", "success");
|
||||
} catch (err) {
|
||||
showToast(err.message || "状态更新失败", "error");
|
||||
@ -256,7 +284,7 @@ export function useGamesPage() {
|
||||
setLoadingAction(`delete-${game.gameId}`);
|
||||
try {
|
||||
await deleteGameCatalog(game.gameId);
|
||||
await reload();
|
||||
await reloadCatalog();
|
||||
showToast("游戏已删除", "success");
|
||||
} catch (err) {
|
||||
showToast(err.message || "删除游戏失败", "error");
|
||||
@ -315,7 +343,7 @@ export function useGamesPage() {
|
||||
status: "disabled",
|
||||
});
|
||||
await reloadPlatforms();
|
||||
await reload();
|
||||
await reloadCatalog();
|
||||
showToast(`已添加 ${result.synced} 个游戏，默认下架`, "success");
|
||||
closeAction();
|
||||
} catch (err) {
|
||||
@ -336,7 +364,7 @@ export function useGamesPage() {
|
||||
status: "disabled",
|
||||
});
|
||||
await reloadPlatforms();
|
||||
await reload();
|
||||
await reloadCatalog();
|
||||
setSelectedSyncGameIds((current) => current.filter((item) => item !== game.providerGameId));
|
||||
setSyncCandidates((current) => current.filter((item) => item.providerGameId !== game.providerGameId));
|
||||
showToast("游戏已添加，默认下架", "success");
|
||||
@ -354,12 +382,18 @@ export function useGamesPage() {
|
||||
changeGameStatus,
|
||||
deleteGame,
|
||||
closeAction,
|
||||
data,
|
||||
error: error || platformError,
|
||||
data: {
|
||||
...catalogMeta,
|
||||
items: catalogItems,
|
||||
loadedCount: catalogItems.length,
|
||||
loadedPages: Math.max(1, Math.ceil(catalogItems.length / pageSize)),
|
||||
},
|
||||
error: catalogError || platformError,
|
||||
gameForm,
|
||||
loading: loading || platformsLoading,
|
||||
loading: (catalogLoading && catalogItems.length === 0) || platformsLoading,
|
||||
loadingAction,
|
||||
page,
|
||||
loadingMore: catalogLoadingMore || (catalogLoading && catalogItems.length > 0),
|
||||
page: Math.max(1, Math.ceil(catalogItems.length / pageSize)),
|
||||
fetchPlatformGames,
|
||||
importSelectedSyncGames,
|
||||
importSingleSyncGame,
|
||||
@ -373,9 +407,10 @@ export function useGamesPage() {
|
||||
platformData,
|
||||
platformForm,
|
||||
platformOptions,
|
||||
reload,
|
||||
loadNextPage,
|
||||
reload: reloadCatalog,
|
||||
resetFilters,
|
||||
changePage,
|
||||
resolveGameURL,
|
||||
changePageSize,
|
||||
setGameForm,
|
||||
setPlatformCode: changePlatformCode,
|
||||
@ -392,6 +427,18 @@ export function useGamesPage() {
|
||||
};
|
||||
}
|
||||
|
||||
function mergeCatalogItems(current, nextItems) {
|
||||
const seen = new Set();
|
||||
return [...current, ...nextItems].filter((item) => {
|
||||
const key = item.gameId || `${item.platformCode}:${item.providerGameId}`;
|
||||
if (seen.has(key)) {
|
||||
return false;
|
||||
}
|
||||
seen.add(key);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
async function saveGameUrl(platforms, game, gameUrl) {
|
||||
const platform = platforms.find((item) => item.platformCode === game.platformCode);
|
||||
if (!platform) {
|
||||
|
||||
@ -168,16 +168,24 @@ export function GameListPage() {
|
||||
<AdminListBody>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
infiniteScroll={{
|
||||
doneLabel: "",
|
||||
hasMore: Boolean(page.data.nextCursor),
|
||||
loading: page.loadingMore,
|
||||
loadingLabel: "加载中...",
|
||||
onLoadMore: page.loadNextPage,
|
||||
}}
|
||||
items={items}
|
||||
minWidth="1220px"
|
||||
minWidth="1240px"
|
||||
pagination={{
|
||||
hasNextPage: Boolean(page.data.nextCursor),
|
||||
itemCount: items.length,
|
||||
onPageChange: page.changePage,
|
||||
onPageSizeChange: page.changePageSize,
|
||||
page: page.page,
|
||||
pageSize: page.pageSize,
|
||||
pageSizeOptions: [20, 50, 100],
|
||||
total: page.data.total,
|
||||
totalPages: page.data.totalPages,
|
||||
}}
|
||||
rowKey={(game) => game.gameId}
|
||||
/>
|
||||
@ -222,7 +230,6 @@ function GameIdentity({ game }) {
|
||||
<div className={styles.identityText}>
|
||||
<span className={styles.name}>{game.gameName || game.gameId}</span>
|
||||
<span className={styles.meta}>{game.gameId}</span>
|
||||
<span className={styles.tags}>{(game.tags || []).slice(0, 3).join(" / ")}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { apiRequest } from "@/shared/api/request";
|
||||
import { API_ENDPOINTS, API_OPERATIONS, apiEndpointPath } from "@/shared/api/generated/endpoints";
|
||||
import type { ApiPage, PageQuery } from "@/shared/api/types";
|
||||
|
||||
export interface LuckyGiftTierDto {
|
||||
pool: string;
|
||||
@ -99,32 +98,26 @@ export interface LuckyGiftConfigPayload {
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface LuckyGiftDrawDto {
|
||||
drawId: string;
|
||||
commandId?: string;
|
||||
export interface LuckyGiftDrawSummaryDto {
|
||||
poolId: string;
|
||||
giftId: string;
|
||||
ruleVersion: number;
|
||||
experiencePool: string;
|
||||
selectedTierId: string;
|
||||
totalDraws: number;
|
||||
uniqueUsers: number;
|
||||
uniqueRooms: number;
|
||||
totalSpentCoins: number;
|
||||
totalRewardCoins: number;
|
||||
baseRewardCoins: number;
|
||||
roomAtmosphereRewardCoins: number;
|
||||
activitySubsidyCoins: number;
|
||||
effectiveRewardCoins: number;
|
||||
budgetSourcesJson?: string;
|
||||
rewardStatus?: string;
|
||||
rtpWindowIndex: number;
|
||||
giftRTPWindowIndex: number;
|
||||
globalBaseRTPPPM: number;
|
||||
giftBaseRTPPPM: number;
|
||||
stageFeedback: boolean;
|
||||
highMultiplier: boolean;
|
||||
createdAtMs?: number;
|
||||
actualRTPPPM: number;
|
||||
pendingDraws: number;
|
||||
grantedDraws: number;
|
||||
failedDraws: number;
|
||||
}
|
||||
|
||||
type RawConfig = LuckyGiftConfigDto & Record<string, unknown>;
|
||||
type RawTier = LuckyGiftTierDto & Record<string, unknown>;
|
||||
type RawDraw = LuckyGiftDrawDto & Record<string, unknown>;
|
||||
type RawSummary = LuckyGiftDrawSummaryDto & Record<string, unknown>;
|
||||
type LuckyGiftDrawSummaryQuery = Record<string, number | string | undefined>;
|
||||
|
||||
export function getLuckyGiftConfig(poolId: string): Promise<LuckyGiftConfigDto> {
|
||||
const endpoint = API_ENDPOINTS.getLuckyGiftConfig;
|
||||
@ -143,25 +136,19 @@ export function listLuckyGiftConfigs(): Promise<LuckyGiftConfigDto[]> {
|
||||
|
||||
export function updateLuckyGiftConfig(payload: LuckyGiftConfigPayload): Promise<LuckyGiftConfigDto> {
|
||||
const endpoint = API_ENDPOINTS.upsertLuckyGiftConfig;
|
||||
return apiRequest<RawConfig, LuckyGiftConfigPayload>(
|
||||
apiEndpointPath(API_OPERATIONS.upsertLuckyGiftConfig),
|
||||
{
|
||||
body: payload,
|
||||
method: endpoint.method,
|
||||
query: { pool_id: payload.pool_id },
|
||||
},
|
||||
).then(normalizeConfig);
|
||||
return apiRequest<RawConfig, LuckyGiftConfigPayload>(apiEndpointPath(API_OPERATIONS.upsertLuckyGiftConfig), {
|
||||
body: payload,
|
||||
method: endpoint.method,
|
||||
query: { pool_id: payload.pool_id },
|
||||
}).then(normalizeConfig);
|
||||
}
|
||||
|
||||
export function listLuckyGiftDraws(query: PageQuery = {}): Promise<ApiPage<LuckyGiftDrawDto>> {
|
||||
const endpoint = API_ENDPOINTS.listLuckyGiftDraws;
|
||||
return apiRequest<ApiPage<RawDraw>>(apiEndpointPath(API_OPERATIONS.listLuckyGiftDraws), {
|
||||
export function getLuckyGiftDrawSummary(query: LuckyGiftDrawSummaryQuery = {}): Promise<LuckyGiftDrawSummaryDto> {
|
||||
const endpoint = API_ENDPOINTS.getLuckyGiftDrawSummary;
|
||||
return apiRequest<RawSummary>(apiEndpointPath(API_OPERATIONS.getLuckyGiftDrawSummary), {
|
||||
method: endpoint.method,
|
||||
query,
|
||||
}).then((page) => ({
|
||||
...page,
|
||||
items: (page.items || []).map(normalizeDraw),
|
||||
}));
|
||||
}).then(normalizeSummary);
|
||||
}
|
||||
|
||||
function normalizeConfig(item: RawConfig): LuckyGiftConfigDto {
|
||||
@ -221,30 +208,21 @@ function normalizeTier(raw: unknown): LuckyGiftTierDto {
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeDraw(item: RawDraw): LuckyGiftDrawDto {
|
||||
function normalizeSummary(item: RawSummary): LuckyGiftDrawSummaryDto {
|
||||
return {
|
||||
drawId: stringValue(item.drawId ?? item.draw_id),
|
||||
commandId: stringValue(item.commandId ?? item.command_id),
|
||||
poolId: stringValue(item.poolId ?? item.pool_id),
|
||||
giftId: stringValue(item.giftId ?? item.gift_id),
|
||||
ruleVersion: numberValue(item.ruleVersion ?? item.rule_version),
|
||||
experiencePool: stringValue(item.experiencePool ?? item.experience_pool),
|
||||
selectedTierId: stringValue(item.selectedTierId ?? item.selected_tier_id),
|
||||
totalDraws: numberValue(item.totalDraws ?? item.total_draws),
|
||||
uniqueUsers: numberValue(item.uniqueUsers ?? item.unique_users),
|
||||
uniqueRooms: numberValue(item.uniqueRooms ?? item.unique_rooms),
|
||||
totalSpentCoins: numberValue(item.totalSpentCoins ?? item.total_spent_coins),
|
||||
totalRewardCoins: numberValue(item.totalRewardCoins ?? item.total_reward_coins),
|
||||
baseRewardCoins: numberValue(item.baseRewardCoins ?? item.base_reward_coins),
|
||||
roomAtmosphereRewardCoins: numberValue(
|
||||
item.roomAtmosphereRewardCoins ?? item.room_atmosphere_reward_coins,
|
||||
),
|
||||
roomAtmosphereRewardCoins: numberValue(item.roomAtmosphereRewardCoins ?? item.room_atmosphere_reward_coins),
|
||||
activitySubsidyCoins: numberValue(item.activitySubsidyCoins ?? item.activity_subsidy_coins),
|
||||
effectiveRewardCoins: numberValue(item.effectiveRewardCoins ?? item.effective_reward_coins),
|
||||
budgetSourcesJson: stringValue(item.budgetSourcesJson ?? item.budget_sources_json),
|
||||
rewardStatus: stringValue(item.rewardStatus ?? item.reward_status),
|
||||
rtpWindowIndex: numberValue(item.rtpWindowIndex ?? item.rtp_window_index),
|
||||
giftRTPWindowIndex: numberValue(item.giftRTPWindowIndex ?? item.gift_rtp_window_index),
|
||||
globalBaseRTPPPM: numberValue(item.globalBaseRTPPPM ?? item.global_base_rtp_ppm),
|
||||
giftBaseRTPPPM: numberValue(item.giftBaseRTPPPM ?? item.gift_base_rtp_ppm),
|
||||
stageFeedback: booleanValue(item.stageFeedback ?? item.stage_feedback),
|
||||
highMultiplier: booleanValue(item.highMultiplier ?? item.high_multiplier),
|
||||
createdAtMs: numberValue(item.createdAtMs ?? item.created_at_ms),
|
||||
actualRTPPPM: numberValue(item.actualRTPPPM ?? item.actual_rtp_ppm),
|
||||
pendingDraws: numberValue(item.pendingDraws ?? item.pending_draws),
|
||||
grantedDraws: numberValue(item.grantedDraws ?? item.granted_draws),
|
||||
failedDraws: numberValue(item.failedDraws ?? item.failed_draws),
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined";
|
||||
import DownloadOutlined from "@mui/icons-material/DownloadOutlined";
|
||||
import ExpandLessOutlined from "@mui/icons-material/ExpandLessOutlined";
|
||||
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/shared/ui/Button.jsx";
|
||||
@ -26,6 +28,7 @@ const defaultInput = {
|
||||
};
|
||||
|
||||
export function LuckyGiftSimulationPanel({ config }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [input, setInput] = useState(defaultInput);
|
||||
const [result, setResult] = useState(null);
|
||||
const [csvUrl, setCsvUrl] = useState("");
|
||||
@ -59,61 +62,89 @@ export function LuckyGiftSimulationPanel({ config }) {
|
||||
<span className={styles.title}>随机模拟测试</span>
|
||||
</div>
|
||||
<div className={styles.simulationActions}>
|
||||
<Button startIcon={<PlayArrowOutlined fontSize="small" />} type="button" variant="primary" onClick={runSimulation}>
|
||||
测试
|
||||
</Button>
|
||||
{csvUrl ? (
|
||||
<Button component="a" download={csvFileName} href={csvUrl} startIcon={<DownloadOutlined fontSize="small" />}>
|
||||
CSV
|
||||
</Button>
|
||||
{expanded ? (
|
||||
<>
|
||||
<Button
|
||||
startIcon={<PlayArrowOutlined fontSize="small" />}
|
||||
type="button"
|
||||
variant="primary"
|
||||
onClick={runSimulation}
|
||||
>
|
||||
测试
|
||||
</Button>
|
||||
{csvUrl ? (
|
||||
<Button
|
||||
component="a"
|
||||
download={csvFileName}
|
||||
href={csvUrl}
|
||||
startIcon={<DownloadOutlined fontSize="small" />}
|
||||
>
|
||||
CSV
|
||||
</Button>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
<Button
|
||||
aria-expanded={expanded}
|
||||
endIcon={
|
||||
expanded ? <ExpandLessOutlined fontSize="small" /> : <ExpandMoreOutlined fontSize="small" />
|
||||
}
|
||||
type="button"
|
||||
onClick={() => setExpanded((current) => !current)}
|
||||
>
|
||||
{expanded ? "收起" : "展开"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.simulationGrid}>
|
||||
<NumberField
|
||||
help={simulationHelp.users}
|
||||
label="用户数量"
|
||||
min={1}
|
||||
value={input.users}
|
||||
onChange={(value) => updateInput(setInput, "users", value)}
|
||||
/>
|
||||
<NumberField
|
||||
help={simulationHelp.rooms}
|
||||
label="房间数量"
|
||||
min={1}
|
||||
value={input.rooms}
|
||||
onChange={(value) => updateInput(setInput, "rooms", value)}
|
||||
/>
|
||||
<NumberField
|
||||
help={simulationHelp.costMin}
|
||||
label="单抽花费最小值"
|
||||
min={1}
|
||||
value={input.costMin}
|
||||
onChange={(value) => updateInput(setInput, "costMin", value)}
|
||||
/>
|
||||
<NumberField
|
||||
help={simulationHelp.costMax}
|
||||
label="单抽花费最大值"
|
||||
min={1}
|
||||
value={input.costMax}
|
||||
onChange={(value) => updateInput(setInput, "costMax", value)}
|
||||
/>
|
||||
<NumberField
|
||||
help={simulationHelp.drawsMin}
|
||||
label="抽奖次数最小值"
|
||||
min={0}
|
||||
value={input.drawsMin}
|
||||
onChange={(value) => updateInput(setInput, "drawsMin", value)}
|
||||
/>
|
||||
<NumberField
|
||||
help={simulationHelp.drawsMax}
|
||||
label="抽奖次数最大值"
|
||||
min={0}
|
||||
value={input.drawsMax}
|
||||
onChange={(value) => updateInput(setInput, "drawsMax", value)}
|
||||
/>
|
||||
</div>
|
||||
{result ? <SimulationOverview overview={result.overview} /> : null}
|
||||
{expanded ? (
|
||||
<>
|
||||
<div className={styles.simulationGrid}>
|
||||
<NumberField
|
||||
help={simulationHelp.users}
|
||||
label="用户数量"
|
||||
min={1}
|
||||
value={input.users}
|
||||
onChange={(value) => updateInput(setInput, "users", value)}
|
||||
/>
|
||||
<NumberField
|
||||
help={simulationHelp.rooms}
|
||||
label="房间数量"
|
||||
min={1}
|
||||
value={input.rooms}
|
||||
onChange={(value) => updateInput(setInput, "rooms", value)}
|
||||
/>
|
||||
<NumberField
|
||||
help={simulationHelp.costMin}
|
||||
label="单抽花费最小值"
|
||||
min={1}
|
||||
value={input.costMin}
|
||||
onChange={(value) => updateInput(setInput, "costMin", value)}
|
||||
/>
|
||||
<NumberField
|
||||
help={simulationHelp.costMax}
|
||||
label="单抽花费最大值"
|
||||
min={1}
|
||||
value={input.costMax}
|
||||
onChange={(value) => updateInput(setInput, "costMax", value)}
|
||||
/>
|
||||
<NumberField
|
||||
help={simulationHelp.drawsMin}
|
||||
label="抽奖次数最小值"
|
||||
min={0}
|
||||
value={input.drawsMin}
|
||||
onChange={(value) => updateInput(setInput, "drawsMin", value)}
|
||||
/>
|
||||
<NumberField
|
||||
help={simulationHelp.drawsMax}
|
||||
label="抽奖次数最大值"
|
||||
min={0}
|
||||
value={input.drawsMax}
|
||||
onChange={(value) => updateInput(setInput, "drawsMax", value)}
|
||||
/>
|
||||
</div>
|
||||
{result ? <SimulationOverview overview={result.overview} /> : null}
|
||||
</>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,15 +1,32 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { parseForm } from "@/shared/forms/validation";
|
||||
import { usePaginatedQuery } from "@/shared/hooks/usePaginatedQuery.js";
|
||||
import { useToast } from "@/shared/ui/ToastProvider.jsx";
|
||||
import { getLuckyGiftConfig, listLuckyGiftConfigs, listLuckyGiftDraws, updateLuckyGiftConfig } from "@/features/lucky-gift/api";
|
||||
import {
|
||||
getLuckyGiftConfig,
|
||||
getLuckyGiftDrawSummary,
|
||||
listLuckyGiftConfigs,
|
||||
updateLuckyGiftConfig,
|
||||
} from "@/features/lucky-gift/api";
|
||||
import { emptyLuckyGiftForm, formFromConfig, payloadFromLuckyGiftForm } from "@/features/lucky-gift/configModel.js";
|
||||
import { useLuckyGiftAbilities } from "@/features/lucky-gift/permissions.js";
|
||||
import { luckyGiftConfigFormSchema } from "@/features/lucky-gift/schema";
|
||||
|
||||
const pageSize = 10;
|
||||
const emptyDraws = { items: [], page: 1, pageSize, total: 0 };
|
||||
const defaultPoolId = "default";
|
||||
const emptySummary = {
|
||||
actualRTPPPM: 0,
|
||||
activitySubsidyCoins: 0,
|
||||
baseRewardCoins: 0,
|
||||
failedDraws: 0,
|
||||
grantedDraws: 0,
|
||||
pendingDraws: 0,
|
||||
poolId: defaultPoolId,
|
||||
roomAtmosphereRewardCoins: 0,
|
||||
totalDraws: 0,
|
||||
totalRewardCoins: 0,
|
||||
totalSpentCoins: 0,
|
||||
uniqueRooms: 0,
|
||||
uniqueUsers: 0,
|
||||
};
|
||||
|
||||
export function useLuckyGiftPage() {
|
||||
const abilities = useLuckyGiftAbilities();
|
||||
@ -27,25 +44,14 @@ export function useLuckyGiftPage() {
|
||||
const [userId, setUserId] = useState("");
|
||||
const [roomId, setRoomId] = useState("");
|
||||
const [status, setStatus] = useState("");
|
||||
const [page, setPage] = useState(1);
|
||||
const [drawSummary, setDrawSummary] = useState(emptySummary);
|
||||
const [drawSummaryLoading, setDrawSummaryLoading] = useState(false);
|
||||
const [drawSummaryError, setDrawSummaryError] = useState("");
|
||||
|
||||
const drawFilters = useMemo(
|
||||
() => ({ gift_id: giftId, pool_id: poolId, room_id: roomId, status, user_id: userId }),
|
||||
[giftId, poolId, roomId, status, userId],
|
||||
);
|
||||
const {
|
||||
data: draws = emptyDraws,
|
||||
error: drawsError,
|
||||
loading: drawsLoading,
|
||||
reload: reloadDraws,
|
||||
} = usePaginatedQuery({
|
||||
errorMessage: "加载幸运礼物记录失败",
|
||||
fetcher: listLuckyGiftDraws,
|
||||
filters: drawFilters,
|
||||
page,
|
||||
pageSize,
|
||||
queryKey: ["lucky-gift-draws", drawFilters, page],
|
||||
});
|
||||
const poolOptions = useMemo(() => {
|
||||
const ids = new Set([poolId]);
|
||||
for (const item of configs) {
|
||||
@ -56,6 +62,23 @@ export function useLuckyGiftPage() {
|
||||
return Array.from(ids);
|
||||
}, [configs, poolId]);
|
||||
|
||||
const reloadDrawSummary = useCallback(async () => {
|
||||
setDrawSummaryLoading(true);
|
||||
setDrawSummaryError("");
|
||||
try {
|
||||
const summary = await getLuckyGiftDrawSummary(drawFilters);
|
||||
setDrawSummary(summary);
|
||||
} catch (err) {
|
||||
setDrawSummaryError(err.message || "加载幸运礼物抽奖汇总失败");
|
||||
} finally {
|
||||
setDrawSummaryLoading(false);
|
||||
}
|
||||
}, [drawFilters]);
|
||||
|
||||
useEffect(() => {
|
||||
void reloadDrawSummary();
|
||||
}, [reloadDrawSummary]);
|
||||
|
||||
const reloadConfigs = useCallback(async () => {
|
||||
try {
|
||||
const nextConfigs = await listLuckyGiftConfigs();
|
||||
@ -111,7 +134,7 @@ export function useLuckyGiftPage() {
|
||||
setPoolId(saved.poolId || poolId);
|
||||
setConfigDrawerOpen(false);
|
||||
showToast("幸运礼物配置已保存", "success");
|
||||
await reloadDraws();
|
||||
await reloadDrawSummary();
|
||||
} catch (err) {
|
||||
showToast(err.message || "保存幸运礼物配置失败", "error");
|
||||
} finally {
|
||||
@ -121,11 +144,9 @@ export function useLuckyGiftPage() {
|
||||
|
||||
const changeGiftId = (value) => {
|
||||
setGiftId(value);
|
||||
setPage(1);
|
||||
};
|
||||
const changePoolId = (value) => {
|
||||
setPoolId(value.trim() || defaultPoolId);
|
||||
setPage(1);
|
||||
};
|
||||
const openAddPool = () => {
|
||||
setAddPoolId("");
|
||||
@ -148,26 +169,21 @@ export function useLuckyGiftPage() {
|
||||
setAddPoolOpen(false);
|
||||
setAddPoolId("");
|
||||
setConfigDrawerOpen(true);
|
||||
setPage(1);
|
||||
};
|
||||
const changeUserId = (value) => {
|
||||
setUserId(value);
|
||||
setPage(1);
|
||||
};
|
||||
const changeRoomId = (value) => {
|
||||
setRoomId(value);
|
||||
setPage(1);
|
||||
};
|
||||
const changeStatus = (value) => {
|
||||
setStatus(value);
|
||||
setPage(1);
|
||||
};
|
||||
const resetDrawFilters = () => {
|
||||
setGiftId("");
|
||||
setUserId("");
|
||||
setRoomId("");
|
||||
setStatus("");
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
return {
|
||||
@ -185,24 +201,22 @@ export function useLuckyGiftPage() {
|
||||
configDrawerOpen,
|
||||
configLoading,
|
||||
configSaving,
|
||||
draws,
|
||||
drawsError,
|
||||
drawsLoading,
|
||||
drawSummary,
|
||||
drawSummaryError,
|
||||
drawSummaryLoading,
|
||||
form,
|
||||
giftId,
|
||||
openConfigDrawer,
|
||||
openAddPool,
|
||||
page,
|
||||
poolId,
|
||||
poolOptions,
|
||||
reloadConfig,
|
||||
reloadConfigs,
|
||||
reloadDraws,
|
||||
reloadDrawSummary,
|
||||
resetDrawFilters,
|
||||
roomId,
|
||||
setForm,
|
||||
setAddPoolId,
|
||||
setPage,
|
||||
status,
|
||||
submitConfig,
|
||||
submitAddPool,
|
||||
|
||||
@ -237,6 +237,52 @@
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.drawSummaryPanel {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
}
|
||||
|
||||
.drawSummaryHeader {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 760;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.drawSummaryFilters {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.drawSummaryGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.summaryError {
|
||||
display: flex;
|
||||
min-height: 120px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-3);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.metricItem {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
@ -264,6 +310,15 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metricItem small {
|
||||
overflow: hidden;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stack {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
@ -306,8 +361,14 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawSummaryHeader {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.simulationGrid,
|
||||
.simulationOverview,
|
||||
.drawSummaryGrid,
|
||||
.multiplierList {
|
||||
grid-template-columns: repeat(2, minmax(140px, 1fr));
|
||||
}
|
||||
@ -317,7 +378,8 @@
|
||||
.configGrid,
|
||||
.subsidyInputs,
|
||||
.simulationGrid,
|
||||
.simulationOverview {
|
||||
.simulationOverview,
|
||||
.drawSummaryGrid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@ import Dialog from "@mui/material/Dialog";
|
||||
import DialogActions from "@mui/material/DialogActions";
|
||||
import DialogContent from "@mui/material/DialogContent";
|
||||
import DialogTitle from "@mui/material/DialogTitle";
|
||||
import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import { LuckyGiftConfigDrawer } from "@/features/lucky-gift/components/LuckyGiftConfigDrawer.jsx";
|
||||
import { LuckyGiftConfigSummary } from "@/features/lucky-gift/components/LuckyGiftConfigSummary.jsx";
|
||||
@ -9,90 +10,11 @@ import { LuckyGiftSimulationPanel } from "@/features/lucky-gift/components/Lucky
|
||||
import { drawStatusOptions } from "@/features/lucky-gift/constants.js";
|
||||
import { useLuckyGiftPage } from "@/features/lucky-gift/hooks/useLuckyGiftPage.js";
|
||||
import styles from "@/features/lucky-gift/lucky-gift.module.css";
|
||||
import {
|
||||
AdminFilterResetButton,
|
||||
AdminFilterSelect,
|
||||
AdminListBody,
|
||||
AdminListPage,
|
||||
AdminListToolbar,
|
||||
} from "@/shared/ui/AdminListLayout.jsx";
|
||||
import { AdminFilterResetButton, AdminFilterSelect, AdminListPage } from "@/shared/ui/AdminListLayout.jsx";
|
||||
import { Button } from "@/shared/ui/Button.jsx";
|
||||
import { DataState } from "@/shared/ui/DataState.jsx";
|
||||
import { DataTable } from "@/shared/ui/DataTable.jsx";
|
||||
import { formatMillis } from "@/shared/utils/time.js";
|
||||
|
||||
const columnsBase = [
|
||||
{
|
||||
key: "draw",
|
||||
label: "抽奖记录",
|
||||
width: "minmax(260px, 1.2fr)",
|
||||
render: (draw) => (
|
||||
<div className={styles.stack}>
|
||||
<span>{draw.drawId}</span>
|
||||
<span className={styles.meta}>
|
||||
{draw.poolId ? `${draw.poolId} / ` : ""}
|
||||
{draw.giftId || draw.commandId || "-"}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "reward",
|
||||
label: "奖励",
|
||||
width: "minmax(180px, 0.8fr)",
|
||||
render: (draw) => (
|
||||
<div className={styles.stack}>
|
||||
<span>{formatNumber(draw.effectiveRewardCoins)}</span>
|
||||
<span className={styles.meta}>{draw.selectedTierId || "-"}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "pool",
|
||||
label: "体验池",
|
||||
width: "minmax(120px, 0.55fr)",
|
||||
render: (draw) => poolLabel(draw.experiencePool),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "状态",
|
||||
width: "minmax(120px, 0.55fr)",
|
||||
render: (draw) => <DrawStatus status={draw.rewardStatus} />,
|
||||
},
|
||||
{
|
||||
key: "rtp",
|
||||
label: "窗口 RTP",
|
||||
width: "minmax(160px, 0.7fr)",
|
||||
render: (draw) => (
|
||||
<div className={styles.stack}>
|
||||
<span>{formatPPM(draw.globalBaseRTPPPM)}</span>
|
||||
<span className={styles.meta}>整体 {formatPPM(draw.giftBaseRTPPPM)}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "source",
|
||||
label: "预算来源",
|
||||
width: "minmax(180px, 0.8fr)",
|
||||
render: (draw) => budgetSourceLabel(draw),
|
||||
},
|
||||
{
|
||||
key: "flags",
|
||||
label: "标记",
|
||||
width: "minmax(150px, 0.65fr)",
|
||||
render: (draw) => flagLabel(draw),
|
||||
},
|
||||
{
|
||||
key: "createdAtMs",
|
||||
label: "时间",
|
||||
width: "minmax(180px, 0.85fr)",
|
||||
render: (draw) => formatMillis(draw.createdAtMs),
|
||||
},
|
||||
];
|
||||
|
||||
export function LuckyGiftConfigPage() {
|
||||
const page = useLuckyGiftPage();
|
||||
const total = page.draws.total || 0;
|
||||
|
||||
return (
|
||||
<AdminListPage>
|
||||
@ -108,66 +30,7 @@ export function LuckyGiftConfigPage() {
|
||||
onRefresh={page.reloadConfig}
|
||||
/>
|
||||
<LuckyGiftSimulationPanel config={page.config} />
|
||||
<AdminListToolbar
|
||||
filters={
|
||||
<>
|
||||
<TextField
|
||||
className={styles.filterInput}
|
||||
disabled
|
||||
label="当前奖池"
|
||||
value={page.poolId}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.filterInput}
|
||||
label="礼物 ID"
|
||||
value={page.giftId}
|
||||
onChange={(event) => page.changeGiftId(event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.filterInput}
|
||||
label="用户 ID"
|
||||
value={page.userId}
|
||||
onChange={(event) => page.changeUserId(event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.filterInput}
|
||||
label="房间 ID"
|
||||
value={page.roomId}
|
||||
onChange={(event) => page.changeRoomId(event.target.value)}
|
||||
/>
|
||||
<AdminFilterSelect
|
||||
label="发放状态"
|
||||
options={[["", "全部状态"], ...drawStatusOptions]}
|
||||
value={page.status}
|
||||
onChange={page.changeStatus}
|
||||
/>
|
||||
<AdminFilterResetButton
|
||||
disabled={!page.giftId && !page.userId && !page.roomId && !page.status}
|
||||
onClick={page.resetDrawFilters}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<DataState error={page.drawsError} loading={page.drawsLoading} onRetry={page.reloadDraws}>
|
||||
<AdminListBody>
|
||||
<DataTable
|
||||
columns={columnsBase}
|
||||
items={page.draws.items || []}
|
||||
minWidth="1360px"
|
||||
pagination={
|
||||
total > 0
|
||||
? {
|
||||
page: page.page,
|
||||
pageSize: page.draws.pageSize || 10,
|
||||
total,
|
||||
onPageChange: page.setPage,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
rowKey={(draw) => draw.drawId}
|
||||
/>
|
||||
</AdminListBody>
|
||||
</DataState>
|
||||
<LuckyGiftDrawSummaryPanel page={page} />
|
||||
<LuckyGiftConfigDrawer
|
||||
abilities={page.abilities}
|
||||
configLoading={page.configLoading}
|
||||
@ -190,6 +53,112 @@ export function LuckyGiftConfigPage() {
|
||||
);
|
||||
}
|
||||
|
||||
function LuckyGiftDrawSummaryPanel({ page }) {
|
||||
const summary = page.drawSummary || {};
|
||||
const netSpent = Number(summary.totalSpentCoins || 0) - Number(summary.totalRewardCoins || 0);
|
||||
const stats = [
|
||||
{
|
||||
hint: `房间 ${formatNumber(summary.uniqueRooms)}`,
|
||||
label: "参与用户",
|
||||
value: formatNumber(summary.uniqueUsers),
|
||||
},
|
||||
{
|
||||
hint: `成功 ${formatNumber(summary.grantedDraws)} / 待发放 ${formatNumber(summary.pendingDraws)} / 失败 ${formatNumber(summary.failedDraws)}`,
|
||||
label: "抽奖次数",
|
||||
value: formatNumber(summary.totalDraws),
|
||||
},
|
||||
{
|
||||
hint: `目标 ${formatPPM(page.config?.targetRTPPPM)}`,
|
||||
label: "实际 RTP",
|
||||
value: formatPPM(summary.actualRTPPPM),
|
||||
},
|
||||
{
|
||||
hint: `净消耗 ${formatNumber(netSpent)}`,
|
||||
label: "消耗金币",
|
||||
value: formatNumber(summary.totalSpentCoins),
|
||||
},
|
||||
{
|
||||
hint: `基础 ${formatNumber(summary.baseRewardCoins)}`,
|
||||
label: "返还金币",
|
||||
value: formatNumber(summary.totalRewardCoins),
|
||||
},
|
||||
{
|
||||
hint: `房间 ${formatNumber(summary.roomAtmosphereRewardCoins)} / 活动 ${formatNumber(summary.activitySubsidyCoins)}`,
|
||||
label: "额外预算",
|
||||
value: formatNumber(
|
||||
Number(summary.roomAtmosphereRewardCoins || 0) + Number(summary.activitySubsidyCoins || 0),
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className={styles.drawSummaryPanel}>
|
||||
<header className={styles.drawSummaryHeader}>
|
||||
<div className={styles.stack}>
|
||||
<h2 className={styles.sectionTitle}>抽奖数据概览</h2>
|
||||
<span className={styles.meta}>奖池 {summary.poolId || page.poolId}</span>
|
||||
</div>
|
||||
<Button
|
||||
disabled={page.drawSummaryLoading}
|
||||
startIcon={<RefreshOutlined fontSize="small" />}
|
||||
onClick={page.reloadDrawSummary}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</header>
|
||||
<div className={styles.drawSummaryFilters}>
|
||||
<TextField className={styles.filterInput} disabled label="当前奖池" value={page.poolId} />
|
||||
<TextField
|
||||
className={styles.filterInput}
|
||||
label="礼物 ID"
|
||||
value={page.giftId}
|
||||
onChange={(event) => page.changeGiftId(event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.filterInput}
|
||||
label="用户 ID"
|
||||
value={page.userId}
|
||||
onChange={(event) => page.changeUserId(event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.filterInput}
|
||||
label="房间 ID"
|
||||
value={page.roomId}
|
||||
onChange={(event) => page.changeRoomId(event.target.value)}
|
||||
/>
|
||||
<AdminFilterSelect
|
||||
label="发放状态"
|
||||
options={[["", "全部状态"], ...drawStatusOptions]}
|
||||
value={page.status}
|
||||
onChange={page.changeStatus}
|
||||
/>
|
||||
<AdminFilterResetButton
|
||||
disabled={!page.giftId && !page.userId && !page.roomId && !page.status}
|
||||
onClick={page.resetDrawFilters}
|
||||
/>
|
||||
</div>
|
||||
{page.drawSummaryError ? (
|
||||
<div className={styles.summaryError}>
|
||||
<span>{page.drawSummaryError}</span>
|
||||
<Button startIcon={<RefreshOutlined fontSize="small" />} onClick={page.reloadDrawSummary}>
|
||||
重试
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.drawSummaryGrid} aria-busy={page.drawSummaryLoading}>
|
||||
{stats.map((item) => (
|
||||
<div className={styles.metricItem} key={item.label}>
|
||||
<span>{item.label}</span>
|
||||
<strong>{page.drawSummaryLoading ? "-" : item.value}</strong>
|
||||
<small>{page.drawSummaryLoading ? "" : item.hint}</small>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function AddPoolDialog({ disabled, onChange, onClose, onSubmit, open, value }) {
|
||||
return (
|
||||
<Dialog fullWidth maxWidth="xs" open={open} onClose={disabled ? undefined : onClose}>
|
||||
@ -220,53 +189,6 @@ function AddPoolDialog({ disabled, onChange, onClose, onSubmit, open, value }) {
|
||||
);
|
||||
}
|
||||
|
||||
function DrawStatus({ status }) {
|
||||
const tone = status === "granted" ? "running" : status === "failed" ? "danger" : "warning";
|
||||
return (
|
||||
<span className={["status-badge", `status-badge--${tone}`].join(" ")}>
|
||||
<span className="status-point" />
|
||||
{drawStatusOptions.find(([value]) => value === status)?.[1] || status || "-"}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function poolLabel(value) {
|
||||
if (value === "novice") {
|
||||
return "新手池";
|
||||
}
|
||||
if (value === "intermediate") {
|
||||
return "中级池";
|
||||
}
|
||||
if (value === "advanced") {
|
||||
return "高级池";
|
||||
}
|
||||
return value || "-";
|
||||
}
|
||||
|
||||
function flagLabel(draw) {
|
||||
const labels = [];
|
||||
if (draw.highMultiplier) {
|
||||
labels.push("高倍");
|
||||
}
|
||||
if (draw.stageFeedback) {
|
||||
labels.push("阶段反馈");
|
||||
}
|
||||
return labels.length ? labels.join(" / ") : "-";
|
||||
}
|
||||
|
||||
function budgetSourceLabel(draw) {
|
||||
if (draw.activitySubsidyCoins > 0) {
|
||||
return "活动补贴";
|
||||
}
|
||||
if (draw.roomAtmosphereRewardCoins > 0) {
|
||||
return "房间气氛";
|
||||
}
|
||||
if (draw.baseRewardCoins > 0) {
|
||||
return "基础 RTP";
|
||||
}
|
||||
return "-";
|
||||
}
|
||||
|
||||
function formatPPM(value) {
|
||||
return `${(Number(value || 0) / 10_000).toFixed(2).replace(/\.?0+$/, "")}%`;
|
||||
}
|
||||
|
||||
@ -42,24 +42,26 @@ test("resource APIs use generated admin paths", async () => {
|
||||
await createResource({
|
||||
amount: 0,
|
||||
assetUrl: "https://media.haiyihy.com/resource/material.png",
|
||||
badgeForm: "strip",
|
||||
coinPrice: 10,
|
||||
name: "Rose",
|
||||
name: "VIP Badge",
|
||||
previewUrl: "https://media.haiyihy.com/resource/cover.png",
|
||||
priceType: "coin",
|
||||
resourceCode: "gift_rose_test",
|
||||
resourceType: "gift",
|
||||
resourceCode: "badge_vip_test",
|
||||
resourceType: "badge",
|
||||
sortOrder: 0,
|
||||
status: "active",
|
||||
});
|
||||
await updateResource(11, {
|
||||
amount: 0,
|
||||
assetUrl: "https://media.haiyihy.com/resource/material-updated.png",
|
||||
badgeForm: "tile",
|
||||
coinPrice: 20,
|
||||
name: "Rose Updated",
|
||||
name: "VIP Badge Updated",
|
||||
previewUrl: "https://media.haiyihy.com/resource/cover-updated.png",
|
||||
priceType: "coin",
|
||||
resourceCode: "gift_rose_test",
|
||||
resourceType: "gift",
|
||||
resourceCode: "badge_vip_test",
|
||||
resourceType: "badge",
|
||||
sortOrder: 0,
|
||||
status: "active",
|
||||
});
|
||||
@ -177,9 +179,15 @@ test("resource APIs use generated admin paths", async () => {
|
||||
expect(listInit?.method).toBe("GET");
|
||||
expect(String(createUrl)).toContain("/api/v1/admin/resources");
|
||||
expect(createInit?.method).toBe("POST");
|
||||
expect(JSON.parse(String(createInit?.body))).toMatchObject({ resourceCode: "gift_rose_test", status: "active" });
|
||||
expect(JSON.parse(String(createInit?.body))).toMatchObject({
|
||||
badgeForm: "strip",
|
||||
resourceCode: "badge_vip_test",
|
||||
resourceType: "badge",
|
||||
status: "active",
|
||||
});
|
||||
expect(String(updateUrl)).toContain("/api/v1/admin/resources/11");
|
||||
expect(updateInit?.method).toBe("PUT");
|
||||
expect(JSON.parse(String(updateInit?.body))).toMatchObject({ badgeForm: "tile" });
|
||||
expect(String(giftListUrl)).toContain("/api/v1/admin/gifts?");
|
||||
expect(String(giftListUrl)).toContain("region_id=1001");
|
||||
expect(giftListInit?.method).toBe("GET");
|
||||
|
||||
@ -16,6 +16,7 @@ export interface ResourceDto {
|
||||
priceType?: string;
|
||||
coinPrice?: number;
|
||||
giftPointAmount?: number;
|
||||
badgeForm?: string;
|
||||
usageScopes?: string[];
|
||||
assetUrl?: string;
|
||||
previewUrl?: string;
|
||||
@ -30,6 +31,7 @@ export interface ResourcePayload {
|
||||
amount: number;
|
||||
animationUrl?: string;
|
||||
assetUrl: string;
|
||||
badgeForm?: string;
|
||||
coinPrice: number;
|
||||
name: string;
|
||||
previewUrl: string;
|
||||
|
||||
@ -48,6 +48,13 @@ export const resourcePriceTypeOptions = [
|
||||
|
||||
export const resourcePriceTypeLabels = Object.fromEntries(resourcePriceTypeOptions);
|
||||
|
||||
export const badgeFormOptions = [
|
||||
["strip", "长徽章"],
|
||||
["tile", "短徽章"],
|
||||
];
|
||||
|
||||
export const badgeFormLabels = Object.fromEntries(badgeFormOptions);
|
||||
|
||||
export const resourceTypeFilters = [
|
||||
["", "全部类型"],
|
||||
["avatar_frame", "头像框"],
|
||||
|
||||
@ -44,6 +44,7 @@ const dayMillis = 24 * 60 * 60 * 1000;
|
||||
const emptyData = { items: [], page: 1, pageSize, total: 0 };
|
||||
const emptyResourceForm = (resource = {}) => ({
|
||||
animationUrl: resource.animationUrl || resource.assetUrl || "",
|
||||
badgeForm: resource.resourceType === "badge" ? resource.badgeForm || badgeFormFromMetadata(resource.metadataJson) || "tile" : "tile",
|
||||
coinPrice: resource.coinPrice === 0 || resource.coinPrice ? String(resource.coinPrice) : "",
|
||||
enabled: resource.status ? resource.status === "active" : true,
|
||||
name: resource.name || "",
|
||||
@ -1022,6 +1023,7 @@ function buildResourcePayload(form) {
|
||||
amount: isCoin ? Number(form.walletAssetAmount) : 0,
|
||||
animationUrl,
|
||||
assetUrl: animationUrl,
|
||||
badgeForm: resourceType === "badge" ? form.badgeForm : undefined,
|
||||
coinPrice: form.priceType === "coin" ? Number(form.coinPrice) : 0,
|
||||
name: form.name.trim(),
|
||||
previewUrl: form.previewUrl.trim(),
|
||||
@ -1033,6 +1035,22 @@ function buildResourcePayload(form) {
|
||||
};
|
||||
}
|
||||
|
||||
function badgeFormFromMetadata(metadataJson) {
|
||||
if (!metadataJson) {
|
||||
return "";
|
||||
}
|
||||
try {
|
||||
const metadata = JSON.parse(metadataJson);
|
||||
const badgeForm = String(metadata?.badge_form || "").trim().toLowerCase();
|
||||
if (badgeForm === "strip" || badgeForm === "tile") {
|
||||
return badgeForm;
|
||||
}
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function buildEmojiPackPayload(form) {
|
||||
const regionIds = (form.regionIds || [])
|
||||
.map(Number)
|
||||
|
||||
@ -23,6 +23,8 @@ import {
|
||||
import { createOptionsColumnFilter, createTextColumnFilter } from "@/shared/ui/tableFilters.js";
|
||||
import { formatMillis } from "@/shared/utils/time.js";
|
||||
import {
|
||||
badgeFormLabels,
|
||||
badgeFormOptions,
|
||||
resourceStatusFilters,
|
||||
resourcePriceTypeLabels,
|
||||
resourcePriceTypeOptions,
|
||||
@ -53,6 +55,12 @@ const baseColumns = [
|
||||
width: "minmax(120px, 0.65fr)",
|
||||
render: (resource) => resourcePriceLabel(resource),
|
||||
},
|
||||
{
|
||||
key: "badgeForm",
|
||||
label: "徽章属性",
|
||||
width: "minmax(120px, 0.65fr)",
|
||||
render: (resource) => badgeFormLabel(resource),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "状态",
|
||||
@ -131,7 +139,7 @@ export function ResourceListPage() {
|
||||
<DataTable
|
||||
columns={columns}
|
||||
items={items}
|
||||
minWidth="820px"
|
||||
minWidth="940px"
|
||||
pagination={
|
||||
total > 0
|
||||
? {
|
||||
@ -212,9 +220,15 @@ function ResourceFormDialog({ disabled, form, loading, mode, onClose, onSubmit,
|
||||
required
|
||||
select
|
||||
value={form.resourceType}
|
||||
onChange={(event) =>
|
||||
setForm({ ...form, resourceType: event.target.value, walletAssetAmount: "" })
|
||||
}
|
||||
onChange={(event) => {
|
||||
const resourceType = event.target.value;
|
||||
setForm({
|
||||
...form,
|
||||
badgeForm: resourceType === "badge" ? form.badgeForm || "tile" : form.badgeForm,
|
||||
resourceType,
|
||||
walletAssetAmount: "",
|
||||
});
|
||||
}}
|
||||
>
|
||||
{resourceTypeOptions.map(([value, label]) => (
|
||||
<MenuItem key={value} value={value}>
|
||||
@ -232,6 +246,22 @@ function ResourceFormDialog({ disabled, form, loading, mode, onClose, onSubmit,
|
||||
onChange={(event) => setForm({ ...form, walletAssetAmount: event.target.value })}
|
||||
/>
|
||||
) : null}
|
||||
{form.resourceType === "badge" ? (
|
||||
<TextField
|
||||
disabled={disabled}
|
||||
label="徽章属性"
|
||||
required
|
||||
select
|
||||
value={form.badgeForm}
|
||||
onChange={(event) => setForm({ ...form, badgeForm: event.target.value })}
|
||||
>
|
||||
{badgeFormOptions.map(([value, label]) => (
|
||||
<MenuItem key={value} value={value}>
|
||||
{label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
) : null}
|
||||
</AdminFormFieldGrid>
|
||||
</AdminFormSection>
|
||||
<AdminFormSection title="价格">
|
||||
@ -335,6 +365,26 @@ function resourcePriceLabel(resource) {
|
||||
return "未配置";
|
||||
}
|
||||
|
||||
function badgeFormLabel(resource) {
|
||||
if (resource.resourceType !== "badge") {
|
||||
return "-";
|
||||
}
|
||||
return badgeFormLabels[resource.badgeForm || badgeFormFromMetadata(resource.metadataJson)] || "未配置";
|
||||
}
|
||||
|
||||
function badgeFormFromMetadata(metadataJson) {
|
||||
if (!metadataJson) {
|
||||
return "";
|
||||
}
|
||||
try {
|
||||
const metadata = JSON.parse(metadataJson);
|
||||
const badgeForm = String(metadata?.badge_form || "").trim().toLowerCase();
|
||||
return badgeForm === "strip" || badgeForm === "tile" ? badgeForm : "";
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function imageURL(value) {
|
||||
const url = String(value || "").trim();
|
||||
if (!url) {
|
||||
|
||||
@ -15,6 +15,7 @@ const resourceTypes = [
|
||||
];
|
||||
const walletAssetTypes = ["COIN", "DIAMOND"];
|
||||
const resourcePriceTypes = ["coin", "free"];
|
||||
const badgeForms = ["strip", "tile"];
|
||||
const optionalWalletAssetTypeSchema = z
|
||||
.preprocess((value) => {
|
||||
if (typeof value !== "string") {
|
||||
@ -28,6 +29,7 @@ const optionalWalletAssetTypeSchema = z
|
||||
export const resourceCreateFormSchema = z
|
||||
.object({
|
||||
animationUrl: z.string().trim().min(1, "请上传动效素材").max(512, "动效素材不能超过 512 个字符"),
|
||||
badgeForm: z.enum(badgeForms).optional(),
|
||||
enabled: z.boolean(),
|
||||
name: z.string().trim().min(1, "请输入资源名称").max(128, "资源名称不能超过 128 个字符"),
|
||||
coinPrice: z.union([z.string(), z.number()]).optional(),
|
||||
@ -39,15 +41,22 @@ export const resourceCreateFormSchema = z
|
||||
})
|
||||
.superRefine((value, context) => {
|
||||
if (value.resourceType !== "coin") {
|
||||
return;
|
||||
}
|
||||
const amount = Number(value.walletAssetAmount);
|
||||
if (!Number.isInteger(amount) || amount <= 0) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
message: "请输入金币数量",
|
||||
path: ["walletAssetAmount"],
|
||||
});
|
||||
if (value.resourceType === "badge" && !value.badgeForm) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
message: "请选择徽章属性",
|
||||
path: ["badgeForm"],
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const amount = Number(value.walletAssetAmount);
|
||||
if (!Number.isInteger(amount) || amount <= 0) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
message: "请输入金币数量",
|
||||
path: ["walletAssetAmount"],
|
||||
});
|
||||
}
|
||||
}
|
||||
if (value.priceType === "coin") {
|
||||
const coinPrice = Number(value.coinPrice);
|
||||
|
||||
@ -12,6 +12,7 @@ describe("resource form schema", () => {
|
||||
test("allows profile card resources", () => {
|
||||
const payload = parseForm(resourceFormSchema, {
|
||||
animationUrl: "https://media.haiyihy.com/resource/profile-card.pag",
|
||||
badgeForm: "tile",
|
||||
enabled: true,
|
||||
name: "Profile Card",
|
||||
previewUrl: "https://media.haiyihy.com/resource/profile-card-cover.png",
|
||||
@ -24,6 +25,34 @@ describe("resource form schema", () => {
|
||||
expect(payload.resourceType).toBe("profile_card");
|
||||
});
|
||||
|
||||
test("requires badge form for badge resources", () => {
|
||||
const payload = parseForm(resourceFormSchema, {
|
||||
animationUrl: "https://media.haiyihy.com/resource/badge.pag",
|
||||
badgeForm: "strip",
|
||||
enabled: true,
|
||||
name: "VIP Badge",
|
||||
previewUrl: "https://media.haiyihy.com/resource/badge.png",
|
||||
priceType: "free",
|
||||
resourceCode: "badge_vip",
|
||||
resourceType: "badge",
|
||||
walletAssetAmount: "",
|
||||
});
|
||||
|
||||
expect(payload.badgeForm).toBe("strip");
|
||||
expect(() =>
|
||||
parseForm(resourceFormSchema, {
|
||||
animationUrl: "https://media.haiyihy.com/resource/badge.pag",
|
||||
enabled: true,
|
||||
name: "VIP Badge",
|
||||
previewUrl: "https://media.haiyihy.com/resource/badge.png",
|
||||
priceType: "free",
|
||||
resourceCode: "badge_vip",
|
||||
resourceType: "badge",
|
||||
walletAssetAmount: "",
|
||||
}),
|
||||
).toThrow(FormValidationError);
|
||||
});
|
||||
|
||||
test("allows resource group resource items without wallet asset type", () => {
|
||||
const payload = parseForm(resourceGroupCreateFormSchema, {
|
||||
description: "",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
170
src/shared/api/generated/schema.d.ts
vendored
170
src/shared/api/generated/schema.d.ts
vendored
@ -196,6 +196,22 @@ export interface paths {
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/admin/activity/lucky-gifts/draw-summary": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
get: operations["getLuckyGiftDrawSummary"];
|
||||
put?: never;
|
||||
post?: never;
|
||||
delete?: never;
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/admin/activity/first-recharge-reward/claims": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
@ -397,13 +413,61 @@ export interface paths {
|
||||
};
|
||||
get: operations["listH5Links"];
|
||||
put: operations["updateH5Links"];
|
||||
post?: never;
|
||||
post: operations["createH5Link"];
|
||||
delete?: never;
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/admin/app-config/h5-links/{key}": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
get?: never;
|
||||
put: operations["updateH5Link"];
|
||||
post?: never;
|
||||
delete: operations["deleteH5Link"];
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/admin/app-config/explore-tabs": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
get: operations["listExploreTabs"];
|
||||
put?: never;
|
||||
post: operations["createExploreTab"];
|
||||
delete?: never;
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/admin/app-config/explore-tabs/{tab_id}": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
get?: never;
|
||||
put: operations["updateExploreTab"];
|
||||
post?: never;
|
||||
delete: operations["deleteExploreTab"];
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/admin/app-config/versions": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
@ -2654,6 +2718,18 @@ export interface operations {
|
||||
200: components["responses"]["EmptyResponse"];
|
||||
};
|
||||
};
|
||||
getLuckyGiftDrawSummary: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
200: components["responses"]["EmptyResponse"];
|
||||
};
|
||||
};
|
||||
listFirstRechargeRewardClaims: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
@ -2921,6 +2997,98 @@ export interface operations {
|
||||
200: components["responses"]["EmptyResponse"];
|
||||
};
|
||||
};
|
||||
createH5Link: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
200: components["responses"]["EmptyResponse"];
|
||||
};
|
||||
};
|
||||
updateH5Link: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path: {
|
||||
key: string;
|
||||
};
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
200: components["responses"]["EmptyResponse"];
|
||||
};
|
||||
};
|
||||
deleteH5Link: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path: {
|
||||
key: string;
|
||||
};
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
200: components["responses"]["EmptyResponse"];
|
||||
};
|
||||
};
|
||||
listExploreTabs: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
200: components["responses"]["EmptyResponse"];
|
||||
};
|
||||
};
|
||||
createExploreTab: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
200: components["responses"]["EmptyResponse"];
|
||||
};
|
||||
};
|
||||
updateExploreTab: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path: {
|
||||
tab_id: number;
|
||||
};
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
200: components["responses"]["EmptyResponse"];
|
||||
};
|
||||
};
|
||||
deleteExploreTab: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path: {
|
||||
tab_id: number;
|
||||
};
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
200: components["responses"]["EmptyResponse"];
|
||||
};
|
||||
};
|
||||
listAppVersions: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
|
||||
@ -618,13 +618,32 @@ export interface H5LinkConfigDto {
|
||||
|
||||
export interface H5LinkConfigPayload {
|
||||
key: string;
|
||||
url?: string;
|
||||
label: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface H5LinkConfigUpdatePayload {
|
||||
items: H5LinkConfigPayload[];
|
||||
}
|
||||
|
||||
export interface ExploreTabDto {
|
||||
appCode?: string;
|
||||
createdAtMs?: number;
|
||||
enabled: boolean;
|
||||
h5Url: string;
|
||||
id: number;
|
||||
sortOrder?: number;
|
||||
tab: string;
|
||||
updatedAtMs?: number;
|
||||
}
|
||||
|
||||
export interface ExploreTabPayload {
|
||||
enabled: boolean;
|
||||
h5Url: string;
|
||||
sortOrder?: number;
|
||||
tab: string;
|
||||
}
|
||||
|
||||
export interface AppBannerDto {
|
||||
appCode?: string;
|
||||
bannerType: "h5" | "app" | string;
|
||||
|
||||
@ -22,6 +22,7 @@ export function DataTable({
|
||||
emptyLabel = "当前无数据",
|
||||
fixedEdges = true,
|
||||
getRowProps,
|
||||
infiniteScroll,
|
||||
items,
|
||||
minWidth = "980px",
|
||||
onColumnWidthsChange,
|
||||
@ -38,8 +39,11 @@ export function DataTable({
|
||||
const [filterQuery, setFilterQuery] = useState("");
|
||||
const [hasHorizontalOverflow, setHasHorizontalOverflow] = useState(false);
|
||||
const [resizeSession, setResizeSession] = useState(null);
|
||||
const loadMoreRef = useRef(null);
|
||||
const scrollRef = useRef(null);
|
||||
const safeItems = Array.isArray(items) ? items : [];
|
||||
const infiniteLoading = Boolean(infiniteScroll?.loading);
|
||||
const infiniteHasMore = Boolean(infiniteScroll?.hasMore);
|
||||
const renderContext = useMemo(() => (context ? { ...context, timeZone } : { timeZone }), [context, timeZone]);
|
||||
|
||||
const preparedColumns = useMemo(
|
||||
@ -132,6 +136,28 @@ export function DataTable({
|
||||
};
|
||||
}, [onColumnWidthsChange, resizeSession]);
|
||||
|
||||
useEffect(() => {
|
||||
const root = scrollRef.current;
|
||||
const target = loadMoreRef.current;
|
||||
if (!root || !target || !infiniteScroll?.onLoadMore || !infiniteHasMore || infiniteLoading) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries.some((entry) => entry.isIntersecting)) {
|
||||
infiniteScroll.onLoadMore();
|
||||
}
|
||||
},
|
||||
{ root, rootMargin: "0px 0px 96px", threshold: 0.01 }
|
||||
);
|
||||
|
||||
observer.observe(target);
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [infiniteHasMore, infiniteLoading, infiniteScroll, safeItems.length]);
|
||||
|
||||
const startResize = (event, column) => {
|
||||
if (!resizableColumns || column.resizable === false) {
|
||||
return;
|
||||
@ -247,25 +273,48 @@ export function DataTable({
|
||||
})}
|
||||
</div>
|
||||
{safeItems.length ? (
|
||||
safeItems.map((item, index) => {
|
||||
const rowProps = getRowProps ? getRowProps(item, index) : {};
|
||||
const { className: rowClassName = "", ...restRowProps } = rowProps;
|
||||
<>
|
||||
{safeItems.map((item, index) => {
|
||||
const rowProps = getRowProps ? getRowProps(item, index) : {};
|
||||
const { className: rowClassName = "", ...restRowProps } = rowProps;
|
||||
|
||||
return (
|
||||
<div className={["admin-row", rowClassName].filter(Boolean).join(" ")} key={rowKey(item)} {...restRowProps}>
|
||||
{preparedColumns.map((column) => (
|
||||
<div className={cellClassName(column)} key={column.key}>
|
||||
{column.render ? column.render(item, index, renderContext) : displayValue(item[column.key])}
|
||||
</div>
|
||||
))}
|
||||
return (
|
||||
<div className={["admin-row", rowClassName].filter(Boolean).join(" ")} key={rowKey(item)} {...restRowProps}>
|
||||
{preparedColumns.map((column) => (
|
||||
<div className={cellClassName(column)} key={column.key}>
|
||||
{column.render ? column.render(item, index, renderContext) : displayValue(item[column.key])}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{infiniteScroll ? (
|
||||
<div
|
||||
className={["admin-row", "admin-row--load-more", !infiniteHasMore && !infiniteLoading ? "admin-row--load-more-done" : ""]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
ref={loadMoreRef}
|
||||
>
|
||||
<div className="admin-cell admin-cell--load-more">
|
||||
{infiniteLoading ? infiniteScroll.loadingLabel || "加载中..." : infiniteHasMore ? "" : infiniteScroll.doneLabel || ""}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : null}
|
||||
</>
|
||||
) : infiniteLoading ? (
|
||||
<div className="admin-row admin-row--load-more" ref={loadMoreRef}>
|
||||
<div className="admin-cell admin-cell--load-more">
|
||||
{infiniteScroll?.loadingLabel || "加载中..."}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="empty-state empty-state--table">
|
||||
<div className="empty-state__title">{emptyLabel}</div>
|
||||
</div>
|
||||
)}
|
||||
{safeItems.length === 0 && infiniteScroll && !infiniteLoading ? (
|
||||
<div className="admin-row--load-more-sentinel" ref={loadMoreRef} />
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
{pagination ? <PaginationBar {...pagination} /> : null}
|
||||
|
||||
@ -12,46 +12,57 @@ export function PaginationBar({
|
||||
page,
|
||||
pageSize,
|
||||
pageSizeOptions = [],
|
||||
total
|
||||
total,
|
||||
totalPages
|
||||
}) {
|
||||
const hasKnownTotal = Number.isFinite(Number(total));
|
||||
const totalPages = hasKnownTotal ? Math.max(1, Math.ceil(total / pageSize)) : Math.max(1, page + (hasNextPage ? 1 : 0));
|
||||
const resolvedTotalPages = Number.isFinite(Number(totalPages))
|
||||
? Math.max(1, Number(totalPages))
|
||||
: hasKnownTotal
|
||||
? Math.max(1, Math.ceil(total / pageSize))
|
||||
: Math.max(1, page + (hasNextPage ? 1 : 0));
|
||||
const start = hasKnownTotal ? (total === 0 ? 0 : (page - 1) * pageSize + 1) : 0;
|
||||
const end = hasKnownTotal ? Math.min(total, page * pageSize) : Number(itemCount || 0);
|
||||
const nextDisabled = hasKnownTotal ? page >= totalPages : !hasNextPage;
|
||||
const nextDisabled = hasKnownTotal ? page >= resolvedTotalPages : !hasNextPage;
|
||||
const showPageActions = typeof onPageChange === "function";
|
||||
const showPageSize = showPageActions && pageSizeOptions.length && onPageSizeChange;
|
||||
const pageSummary = hasKnownTotal ? `共 ${resolvedTotalPages} 页 · 共 ${total} 条` : `已加载 ${Math.max(1, page)} 页 · ${end} 条`;
|
||||
|
||||
return (
|
||||
<div className="pagination-bar">
|
||||
<div className="pagination-bar__meta">
|
||||
{pageSizeOptions.length && onPageSizeChange ? (
|
||||
<TextField
|
||||
className="pagination-bar__page-size"
|
||||
label="每页"
|
||||
select
|
||||
size="small"
|
||||
value={pageSize}
|
||||
onChange={(event) => onPageSizeChange(Number(event.target.value))}
|
||||
>
|
||||
{pageSizeOptions.map((option) => (
|
||||
<MenuItem key={option} value={option}>
|
||||
{option}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
{showPageSize ? (
|
||||
<span className="pagination-bar__page-size-wrap">
|
||||
<span>每页</span>
|
||||
<TextField
|
||||
className="pagination-bar__page-size"
|
||||
inputProps={{ "aria-label": "每页条数" }}
|
||||
select
|
||||
size="small"
|
||||
value={pageSize}
|
||||
onChange={(event) => onPageSizeChange(Number(event.target.value))}
|
||||
>
|
||||
{pageSizeOptions.map((option) => (
|
||||
<MenuItem key={option} value={option}>
|
||||
{option}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</span>
|
||||
) : null}
|
||||
<span>
|
||||
{hasKnownTotal ? `${start}-${end} / 共 ${total} 条` : `第 ${page} 页 · 本页 ${end} 条`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pagination-bar__actions">
|
||||
<IconButton disabled={page <= 1} label="上一页" onClick={() => onPageChange(page - 1)}>
|
||||
<KeyboardArrowLeft fontSize="small" />
|
||||
</IconButton>
|
||||
<span>{page} / {totalPages}</span>
|
||||
<IconButton disabled={nextDisabled} label="下一页" onClick={() => onPageChange(page + 1)}>
|
||||
<KeyboardArrowRight fontSize="small" />
|
||||
</IconButton>
|
||||
<span>{showPageActions && hasKnownTotal ? `${start}-${end} / ${total}` : pageSummary}</span>
|
||||
</div>
|
||||
{showPageActions ? (
|
||||
<div className="pagination-bar__actions">
|
||||
<IconButton disabled={page <= 1} label="上一页" onClick={() => onPageChange(page - 1)}>
|
||||
<KeyboardArrowLeft fontSize="small" />
|
||||
</IconButton>
|
||||
<span>{page} / {resolvedTotalPages}</span>
|
||||
<IconButton disabled={nextDisabled} label="下一页" onClick={() => onPageChange(page + 1)}>
|
||||
<KeyboardArrowRight fontSize="small" />
|
||||
</IconButton>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,33 +3,38 @@
|
||||
}
|
||||
|
||||
.drawer.drawer {
|
||||
width: min(760px, 100vw);
|
||||
width: min(640px, 100vw);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawerBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.groupGrid {
|
||||
display: grid;
|
||||
min-height: 0;
|
||||
grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
|
||||
gap: var(--space-3);
|
||||
align-content: start;
|
||||
align-items: start;
|
||||
grid-auto-rows: min-content;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: var(--space-2);
|
||||
overflow-y: auto;
|
||||
padding-right: var(--space-1);
|
||||
}
|
||||
|
||||
.groupCard {
|
||||
display: grid;
|
||||
grid-template-columns: 40px minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
min-height: 136px;
|
||||
align-content: start;
|
||||
gap: var(--space-2);
|
||||
min-height: 76px;
|
||||
align-items: start;
|
||||
gap: var(--space-1) var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-card);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
@ -45,8 +50,8 @@
|
||||
.groupCard:hover {
|
||||
border-color: var(--primary-border);
|
||||
background: var(--primary-surface);
|
||||
box-shadow: var(--shadow-soft);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.groupCard:focus-visible {
|
||||
@ -62,18 +67,20 @@
|
||||
}
|
||||
|
||||
.emptyCard {
|
||||
min-height: 104px;
|
||||
min-height: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.groupIcon {
|
||||
display: inline-flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
grid-row: 1 / 4;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--bg-card-strong);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
@ -105,6 +112,7 @@
|
||||
|
||||
.groupItems {
|
||||
display: flex;
|
||||
grid-column: 2;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-1);
|
||||
@ -136,7 +144,7 @@
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.groupGrid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -994,27 +994,45 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
gap: var(--space-2);
|
||||
min-height: 32px;
|
||||
margin-top: var(--space-2);
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--admin-font-size);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-bar__meta {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.pagination-bar__page-size-wrap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.pagination-bar__page-size {
|
||||
width: 96px;
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
.pagination-bar__page-size .MuiInputBase-root {
|
||||
height: 30px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-bar__page-size .MuiSelect-select.MuiInputBase-input {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.pagination-bar__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.data-state {
|
||||
@ -1125,7 +1143,7 @@
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
--admin-table-cell-x: var(--space-4);
|
||||
--admin-table-cell-x: var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: max(100%, var(--admin-table-min-width, 900px));
|
||||
@ -1160,10 +1178,30 @@
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.admin-row--load-more {
|
||||
min-height: 36px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.admin-row--load-more-done {
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.admin-cell--load-more {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-row--load-more-sentinel {
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.admin-cell {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
padding: 0 var(--admin-table-cell-x);
|
||||
overflow: hidden;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@ -1180,11 +1218,11 @@
|
||||
display: flex;
|
||||
min-height: var(--table-head-height);
|
||||
align-items: center;
|
||||
padding-right: calc(var(--admin-table-cell-x) + 12px);
|
||||
padding-right: calc(var(--admin-table-cell-x) + 10px);
|
||||
}
|
||||
|
||||
.admin-cell--head:last-child {
|
||||
padding-right: calc(var(--admin-table-cell-x) + 12px);
|
||||
padding-right: calc(var(--admin-table-cell-x) + 10px);
|
||||
}
|
||||
|
||||
.admin-cell__head-content {
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
--admin-tag-gap: var(--space-1);
|
||||
--admin-tag-font-size: var(--admin-font-size);
|
||||
--admin-tag-font-weight: 650;
|
||||
--table-head-height: 44px;
|
||||
--table-row-height: 58px;
|
||||
--table-head-height: 38px;
|
||||
--table-row-height: 48px;
|
||||
--switch-width: 46px;
|
||||
--switch-height: 26px;
|
||||
--switch-thumb-size: 20px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user