Add skill for gameplay entry type workflows

apps/admin-web/src/pages/AdminInviteCodePage.tsx

@@ -1,7 +1,10 @@
-import {Save} from 'lucide-react';
-import {FormEvent, useState} from 'react';
+import {RefreshCcw, Save} from 'lucide-react';
+import {FormEvent, useEffect, useState} from 'react';
 
-import {upsertProfileInviteCode} from '../api/adminApiClient';
+import {
+  listProfileInviteCodes,
+  upsertProfileInviteCode,
+} from '../api/adminApiClient';
 import type {ProfileInviteCodeAdminResponse} from '../api/adminApiTypes';
 import {handlePageError} from './pageUtils';
 
@@ -21,7 +24,28 @@ export function AdminInviteCodePage({
   const [inviteCode, setInviteCode] = useState('');
   const [metadataText, setMetadataText] = useState('{}');
   const [errorMessage, setErrorMessage] = useState('');
+  const [listErrorMessage, setListErrorMessage] = useState('');
+  const [entries, setEntries] = useState<ProfileInviteCodeAdminResponse[]>([]);
   const [isSaving, setIsSaving] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    void refreshInviteCodes();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  async function refreshInviteCodes() {
+    setIsLoading(true);
+    setListErrorMessage('');
+    try {
+      const response = await listProfileInviteCodes(token);
+      setEntries(response.entries);
+    } catch (error: unknown) {
+      handlePageError(error, onUnauthorized, setListErrorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }
 
   async function handleSave(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -37,6 +61,8 @@ export function AdminInviteCodePage({
         metadata: parseMetadata(metadataText),
       });
       onResultChange(response);
+      upsertEntry(response);
+      fillForm(response);
     } catch (error: unknown) {
       handlePageError(error, onUnauthorized, setErrorMessage);
     } finally {
@@ -44,6 +70,28 @@ export function AdminInviteCodePage({
     }
   }
 
+  function upsertEntry(next: ProfileInviteCodeAdminResponse) {
+    setEntries((current) => {
+      const rest = current.filter((entry) => entry.inviteCode !== next.inviteCode);
+      return [...rest, next].sort((left, right) => {
+        const leftUpdatedAt = Date.parse(left.updatedAt);
+        const rightUpdatedAt = Date.parse(right.updatedAt);
+        if (Number.isFinite(leftUpdatedAt) && Number.isFinite(rightUpdatedAt)) {
+          const updatedCompare = rightUpdatedAt - leftUpdatedAt;
+          if (updatedCompare !== 0) {
+            return updatedCompare;
+          }
+        }
+        return left.inviteCode.localeCompare(right.inviteCode);
+      });
+    });
+  }
+
+  function fillForm(entry: ProfileInviteCodeAdminResponse) {
+    setInviteCode(entry.inviteCode);
+    setMetadataText(JSON.stringify(entry.metadata, null, 2));
+  }
+
   return (
     <section className="admin-page">
       <div className="admin-page-heading">
@@ -51,8 +99,23 @@ export function AdminInviteCodePage({
           <h2>邀请码</h2>
           <p>注册链路预置码</p>
         </div>
+        <button
+          className="admin-secondary-button"
+          disabled={isLoading}
+          type="button"
+          onClick={refreshInviteCodes}
+        >
+          <RefreshCcw size={17} aria-hidden="true" />
+          <span>{isLoading ? '刷新中' : '刷新'}</span>
+        </button>
       </div>
 
+      {listErrorMessage ? (
+        <div className="admin-alert" role="status">
+          {listErrorMessage}
+        </div>
+      ) : null}
+
       <div className="admin-two-column admin-two-column-wide">
         <form className="admin-panel admin-form" onSubmit={handleSave}>
           <label className="admin-field">
@@ -90,42 +153,81 @@ export function AdminInviteCodePage({
           </button>
         </form>
 
-        <section className="admin-panel admin-result-panel">
-          <div className="admin-panel-heading">
-            <h3>记录</h3>
-            <span>{result?.inviteCode ?? '-'}</span>
-          </div>
-          {result ? (
-            <dl className="admin-info-list">
-              <div>
-                <dt>User ID</dt>
-                <dd>{result.userId}</dd>
+        <div className="admin-stack">
+          <section className="admin-panel">
+            <div className="admin-panel-heading">
+              <h3>邀请码列表</h3>
+              <span>{entries.length}</span>
+            </div>
+            {entries.length ? (
+              <div className="admin-table-wrap">
+                <table className="admin-table admin-table-compact">
+                  <thead>
+                    <tr>
+                      <th>邀请码</th>
+                      <th>创建</th>
+                      <th>更新</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {entries.map((entry) => (
+                      <tr key={entry.inviteCode}>
+                        <td>
+                          <button
+                            className="admin-text-button"
+                            type="button"
+                            onClick={() => fillForm(entry)}
+                          >
+                            {entry.inviteCode}
+                          </button>
+                        </td>
+                        <td>{entry.createdAt}</td>
+                        <td>{entry.updatedAt}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
               </div>
-              <div>
-                <dt>邀请码</dt>
-                <dd>{result.inviteCode}</dd>
+            ) : (
+              <div className="admin-empty-state">
+                {isLoading ? '加载中' : '暂无邀请码'}
               </div>
-              <div>
-                <dt>创建</dt>
-                <dd>{result.createdAt}</dd>
-              </div>
-              <div>
-                <dt>更新</dt>
-                <dd>{result.updatedAt}</dd>
-              </div>
-              <div>
-                <dt>Metadata</dt>
-                <dd>
-                  <pre className="admin-code-block">
-                    {JSON.stringify(result.metadata, null, 2)}
-                  </pre>
-                </dd>
-              </div>
-            </dl>
-          ) : (
-            <div className="admin-empty-state">暂无记录</div>
-          )}
-        </section>
+            )}
+          </section>
+
+          <section className="admin-panel admin-result-panel">
+            <div className="admin-panel-heading">
+              <h3>记录</h3>
+              <span>{result?.inviteCode ?? '-'}</span>
+            </div>
+            {result ? (
+              <dl className="admin-info-list">
+                <div>
+                  <dt>邀请码</dt>
+                  <dd>{result.inviteCode}</dd>
+                </div>
+                <div>
+                  <dt>创建</dt>
+                  <dd>{result.createdAt}</dd>
+                </div>
+                <div>
+                  <dt>更新</dt>
+                  <dd>{result.updatedAt}</dd>
+                </div>
+                <div>
+                  <dt>Metadata</dt>
+                  <dd>
+                    <pre className="admin-code-block">
+                      {JSON.stringify(result.metadata, null, 2)}
+                    </pre>
+                  </dd>
+                </div>
+              </dl>
+            ) : (
+              <div className="admin-empty-state">暂无记录</div>
+            )}
+          </section>
+        </div>
       </div>
     </section>
   );

apps/admin-web/src/pages/AdminRedeemCodePage.tsx

@@ -1,8 +1,9 @@
-import {PowerOff, Save} from 'lucide-react';
-import {FormEvent, useState} from 'react';
+import {PowerOff, RefreshCcw, Save} from 'lucide-react';
+import {FormEvent, useEffect, useState} from 'react';
 
 import {
   disableProfileRedeemCode,
+  listProfileRedeemCodes,
   upsertProfileRedeemCode,
 } from '../api/adminApiClient';
 import type {
@@ -40,8 +41,29 @@ export function AdminRedeemCodePage({
   const [disableCode, setDisableCode] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
   const [disableErrorMessage, setDisableErrorMessage] = useState('');
+  const [listErrorMessage, setListErrorMessage] = useState('');
+  const [entries, setEntries] = useState<ProfileRedeemCodeAdminResponse[]>([]);
   const [isSaving, setIsSaving] = useState(false);
   const [isDisabling, setIsDisabling] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    void refreshRedeemCodes();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  async function refreshRedeemCodes() {
+    setIsLoading(true);
+    setListErrorMessage('');
+    try {
+      const response = await listProfileRedeemCodes(token);
+      setEntries(response.entries);
+    } catch (error: unknown) {
+      handlePageError(error, onUnauthorized, setListErrorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }
 
   async function handleSave(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -63,6 +85,8 @@ export function AdminRedeemCodePage({
           mode === 'private' ? splitLines(allowedPublicUserCodes) : [],
       });
       onResultChange(response);
+      upsertEntry(response);
+      fillForm(response);
     } catch (error: unknown) {
       handlePageError(error, onUnauthorized, setErrorMessage);
     } finally {
@@ -83,6 +107,8 @@ export function AdminRedeemCodePage({
         code: disableCode.trim(),
       });
       onResultChange(response);
+      upsertEntry(response);
+      fillForm(response);
     } catch (error: unknown) {
       handlePageError(error, onUnauthorized, setDisableErrorMessage);
     } finally {
@@ -90,6 +116,34 @@ export function AdminRedeemCodePage({
     }
   }
 
+  function upsertEntry(next: ProfileRedeemCodeAdminResponse) {
+    setEntries((current) => {
+      const rest = current.filter((entry) => entry.code !== next.code);
+      return [...rest, next].sort((left, right) => {
+        const leftUpdatedAt = Date.parse(left.updatedAt);
+        const rightUpdatedAt = Date.parse(right.updatedAt);
+        if (Number.isFinite(leftUpdatedAt) && Number.isFinite(rightUpdatedAt)) {
+          const updatedCompare = rightUpdatedAt - leftUpdatedAt;
+          if (updatedCompare !== 0) {
+            return updatedCompare;
+          }
+        }
+        return left.code.localeCompare(right.code);
+      });
+    });
+  }
+
+  function fillForm(entry: ProfileRedeemCodeAdminResponse) {
+    setCode(entry.code);
+    setMode(entry.mode);
+    setRewardPoints(String(entry.rewardPoints));
+    setMaxUses(String(entry.maxUses));
+    setEnabled(entry.enabled);
+    setAllowedUserIds(entry.allowedUserIds.join('\n'));
+    setAllowedPublicUserCodes('');
+    setDisableCode(entry.code);
+  }
+
   return (
     <section className="admin-page">
       <div className="admin-page-heading">
@@ -97,8 +151,23 @@ export function AdminRedeemCodePage({
           <h2>兑换码</h2>
           <p>创建、更新与停用</p>
         </div>
+        <button
+          className="admin-secondary-button"
+          disabled={isLoading}
+          type="button"
+          onClick={refreshRedeemCodes}
+        >
+          <RefreshCcw size={17} aria-hidden="true" />
+          <span>{isLoading ? '刷新中' : '刷新'}</span>
+        </button>
       </div>
 
+      {listErrorMessage ? (
+        <div className="admin-alert" role="status">
+          {listErrorMessage}
+        </div>
+      ) : null}
+
       <div className="admin-two-column admin-two-column-wide">
         <form className="admin-panel admin-form" onSubmit={handleSave}>
           <div className="admin-form-row">
@@ -200,6 +269,48 @@ export function AdminRedeemCodePage({
         </form>
 
         <div className="admin-stack">
+          <section className="admin-panel">
+            <div className="admin-panel-heading">
+              <h3>兑换码列表</h3>
+              <span>{entries.length}</span>
+            </div>
+            {entries.length ? (
+              <div className="admin-table-wrap">
+                <table className="admin-table admin-table-compact">
+                  <thead>
+                    <tr>
+                      <th>Code</th>
+                      <th>奖励</th>
+                      <th>状态</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {entries.map((entry) => (
+                      <tr key={entry.code}>
+                        <td>
+                          <button
+                            className="admin-text-button"
+                            type="button"
+                            onClick={() => fillForm(entry)}
+                          >
+                            {entry.code}
+                          </button>
+                          <small>{redeemModeLabel(entry.mode)}</small>
+                        </td>
+                        <td>{entry.rewardPoints}</td>
+                        <td>{entry.enabled ? '启用' : '停用'}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <div className="admin-empty-state">
+                {isLoading ? '加载中' : '暂无兑换码'}
+              </div>
+            )}
+          </section>
+
           <form className="admin-panel admin-form" onSubmit={handleDisable}>
             <label className="admin-field">
               <span>停用 Code</span>
@@ -273,3 +384,7 @@ function parsePositiveInteger(value: string) {
   const parsed = Number.parseInt(value, 10);
   return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
 }
+
+function redeemModeLabel(value: ProfileRedeemCodeMode) {
+  return redeemModes.find((item) => item.value === value)?.label ?? value;
+}

apps/admin-web/src/pages/AdminTaskConfigPage.tsx

@@ -0,0 +1,545 @@
+import {ChevronDown, PowerOff, RefreshCcw, Save} from 'lucide-react';
+import {FormEvent, useEffect, useMemo, useState} from 'react';
+
+import {
+  disableProfileTaskConfig,
+  listProfileTaskConfigs,
+  upsertProfileTaskConfig,
+} from '../api/adminApiClient';
+import type {
+  ProfileTaskConfigAdminResponse,
+  ProfileTaskCycle,
+  TrackingScopeKind,
+} from '../api/adminApiTypes';
+import {
+  filterAdminTrackingEventDefinitions,
+  findAdminTrackingEventDefinition,
+} from '../config/trackingEventDefinitions';
+import {handlePageError} from './pageUtils';
+
+interface AdminTaskConfigPageProps {
+  token: string;
+  result: ProfileTaskConfigAdminResponse | null;
+  onUnauthorized: (message?: string) => void;
+  onResultChange: (result: ProfileTaskConfigAdminResponse) => void;
+}
+
+const taskCycles: Array<{value: ProfileTaskCycle; label: string}> = [
+  {value: 'daily', label: '每日'},
+];
+
+const scopeKinds: Array<{value: TrackingScopeKind; label: string}> = [
+  {value: 'user', label: '用户'},
+  {value: 'site', label: '整站'},
+  {value: 'work', label: '作品'},
+  {value: 'module', label: '模块'},
+];
+
+export function AdminTaskConfigPage({
+  token,
+  result,
+  onUnauthorized,
+  onResultChange,
+}: AdminTaskConfigPageProps) {
+  const [entries, setEntries] = useState<ProfileTaskConfigAdminResponse[]>([]);
+  const [taskId, setTaskId] = useState('daily_login');
+  const [title, setTitle] = useState('每日登录');
+  const [description, setDescription] = useState('');
+  const [eventKey, setEventKey] = useState('daily_login');
+  const [eventKeySearch, setEventKeySearch] = useState('每日登录');
+  const [isEventKeyPickerOpen, setIsEventKeyPickerOpen] = useState(false);
+  const [cycle, setCycle] = useState<ProfileTaskCycle>('daily');
+  const [scopeKind, setScopeKind] = useState<TrackingScopeKind>('user');
+  const [threshold, setThreshold] = useState('1');
+  const [rewardPoints, setRewardPoints] = useState('10');
+  const [sortOrder, setSortOrder] = useState('10');
+  const [enabled, setEnabled] = useState(true);
+  const [disableTaskId, setDisableTaskId] = useState('daily_login');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [disableErrorMessage, setDisableErrorMessage] = useState('');
+  const [listErrorMessage, setListErrorMessage] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDisabling, setIsDisabling] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    void refreshTaskConfigs();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  const selectedEventDefinition = useMemo(
+    () => findAdminTrackingEventDefinition(eventKey),
+    [eventKey],
+  );
+  const filteredEventDefinitions = useMemo(
+    () => filterAdminTrackingEventDefinitions(eventKeySearch),
+    [eventKeySearch],
+  );
+
+  async function refreshTaskConfigs() {
+    setIsLoading(true);
+    setListErrorMessage('');
+    try {
+      const response = await listProfileTaskConfigs(token);
+      setEntries(response.entries);
+      const dailyLogin = response.entries.find(
+        (entry) => entry.taskId === 'daily_login',
+      );
+      if (dailyLogin) {
+        fillForm(dailyLogin);
+      }
+    } catch (error: unknown) {
+      handlePageError(error, onUnauthorized, setListErrorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function handleSave(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (isSaving) {
+      return;
+    }
+
+    setErrorMessage('');
+    setIsSaving(true);
+    try {
+      const response = await upsertProfileTaskConfig(token, {
+        taskId: taskId.trim(),
+        title: title.trim(),
+        description,
+        eventKey: eventKey.trim(),
+        cycle,
+        scopeKind,
+        threshold: parsePositiveInteger(threshold),
+        rewardPoints: parsePositiveInteger(rewardPoints),
+        enabled,
+        sortOrder: parseInteger(sortOrder),
+      });
+      onResultChange(response);
+      upsertEntry(response);
+    } catch (error: unknown) {
+      handlePageError(error, onUnauthorized, setErrorMessage);
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  async function handleDisable(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (isDisabling) {
+      return;
+    }
+
+    setDisableErrorMessage('');
+    setIsDisabling(true);
+    try {
+      const response = await disableProfileTaskConfig(token, {
+        taskId: disableTaskId.trim(),
+      });
+      onResultChange(response);
+      upsertEntry(response);
+      fillForm(response);
+    } catch (error: unknown) {
+      handlePageError(error, onUnauthorized, setDisableErrorMessage);
+    } finally {
+      setIsDisabling(false);
+    }
+  }
+
+  function upsertEntry(next: ProfileTaskConfigAdminResponse) {
+    setEntries((current) => {
+      const rest = current.filter((entry) => entry.taskId !== next.taskId);
+      return [...rest, next].sort((left, right) => {
+        if (left.sortOrder !== right.sortOrder) {
+          return left.sortOrder - right.sortOrder;
+        }
+        return left.taskId.localeCompare(right.taskId);
+      });
+    });
+  }
+
+  function fillForm(entry: ProfileTaskConfigAdminResponse) {
+    setTaskId(entry.taskId);
+    setTitle(entry.title);
+    setDescription(entry.description);
+    setEventKey(entry.eventKey);
+    setCycle(entry.cycle);
+    setScopeKind(entry.scopeKind);
+    setThreshold(String(entry.threshold));
+    setRewardPoints(String(entry.rewardPoints));
+    setSortOrder(String(entry.sortOrder));
+    setEnabled(entry.enabled);
+    setDisableTaskId(entry.taskId);
+    const nextDefinition = findAdminTrackingEventDefinition(entry.eventKey);
+    setEventKeySearch(nextDefinition?.title ?? entry.eventKey);
+    setIsEventKeyPickerOpen(false);
+  }
+
+  function selectEventKey(nextEventKey: string) {
+    const nextDefinition = findAdminTrackingEventDefinition(nextEventKey);
+    setEventKey(nextEventKey);
+    if (nextDefinition) {
+      setEventKeySearch(nextDefinition.title);
+      setScopeKind(nextDefinition.scopeKind);
+    } else {
+      setEventKeySearch(nextEventKey);
+    }
+    setIsEventKeyPickerOpen(false);
+  }
+
+  return (
+    <section className="admin-page">
+      <div className="admin-page-heading">
+        <div>
+          <h2>任务配置</h2>
+          <p>默认每日登录任务</p>
+        </div>
+        <button
+          className="admin-secondary-button"
+          disabled={isLoading}
+          type="button"
+          onClick={refreshTaskConfigs}
+        >
+          <RefreshCcw size={17} aria-hidden="true" />
+          <span>{isLoading ? '刷新中' : '刷新'}</span>
+        </button>
+      </div>
+
+      {listErrorMessage ? (
+        <div className="admin-alert" role="status">
+          {listErrorMessage}
+        </div>
+      ) : null}
+
+      <div className="admin-two-column admin-two-column-wide">
+        <form className="admin-panel admin-form" onSubmit={handleSave}>
+          <div className="admin-form-row">
+            <label className="admin-field admin-field-fill">
+              <span>Task ID</span>
+              <input
+                value={taskId}
+                onChange={(event) => setTaskId(event.target.value)}
+              />
+            </label>
+            <label className="admin-switch-field">
+              <input
+                checked={enabled}
+                type="checkbox"
+                onChange={(event) => setEnabled(event.target.checked)}
+              />
+              <span>启用</span>
+            </label>
+          </div>
+
+          <div className="admin-form-row">
+            <label className="admin-field">
+              <span>标题</span>
+              <input
+                value={title}
+                onChange={(event) => setTitle(event.target.value)}
+              />
+            </label>
+            <label className="admin-field">
+              <span>Event Key</span>
+              <div
+                className="admin-combobox"
+                onBlur={(event) => {
+                  const nextTarget = event.relatedTarget;
+                  if (
+                    !(nextTarget instanceof Node) ||
+                    !event.currentTarget.contains(nextTarget)
+                  ) {
+                    setIsEventKeyPickerOpen(false);
+                  }
+                }}
+              >
+                <div className="admin-combobox-control">
+                  <input
+                    aria-label="Event Key"
+                    value={eventKeySearch || eventKey}
+                    onChange={(event) => {
+                      const nextValue = event.target.value;
+                      setEventKeySearch(nextValue);
+                      setIsEventKeyPickerOpen(true);
+                    }}
+                    onFocus={() => setIsEventKeyPickerOpen(true)}
+                  />
+                  <button
+                    aria-label="展开 Event Key"
+                    className="admin-combobox-toggle"
+                    type="button"
+                    onClick={() =>
+                      setIsEventKeyPickerOpen((current) => !current)
+                    }
+                  >
+                    <ChevronDown size={16} aria-hidden="true" />
+                  </button>
+                </div>
+                {isEventKeyPickerOpen ? (
+                  <div className="admin-combobox-menu" role="listbox">
+                    {filteredEventDefinitions.length ? (
+                      filteredEventDefinitions.map((definition) => (
+                        <button
+                          key={definition.key}
+                          className="admin-combobox-option"
+                          type="button"
+                          onMouseDown={(event) => event.preventDefault()}
+                          onClick={() => selectEventKey(definition.key)}
+                        >
+                          <strong>{definition.title}</strong>
+                          <span>{definition.key}</span>
+                          <small>{definition.remark}</small>
+                        </button>
+                      ))
+                    ) : (
+                      <div className="admin-combobox-empty">
+                        没有匹配项
+                        {eventKeySearch.trim() ? (
+                          <button
+                            className="admin-text-button"
+                            type="button"
+                            onMouseDown={(event) => event.preventDefault()}
+                            onClick={() =>
+                              selectEventKey(eventKeySearch.trim())
+                            }
+                          >
+                            使用自定义 key
+                          </button>
+                        ) : null}
+                      </div>
+                    )}
+                  </div>
+                ) : null}
+              </div>
+              {selectedEventDefinition ? (
+                <small className="admin-field-note">
+                  {selectedEventDefinition.remark}
+                </small>
+              ) : (
+                <small className="admin-field-note">
+                  自定义埋点 key，保存前请确认后端已有对应埋点写入。
+                </small>
+              )}
+            </label>
+          </div>
+
+          <label className="admin-field">
+            <span>描述</span>
+            <textarea
+              rows={3}
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+            />
+          </label>
+
+          <div className="admin-form-row">
+            <label className="admin-field">
+              <span>周期</span>
+              <select
+                value={cycle}
+                onChange={(event) =>
+                  setCycle(event.target.value as ProfileTaskCycle)
+                }
+              >
+                {taskCycles.map((item) => (
+                  <option key={item.value} value={item.value}>
+                    {item.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="admin-field">
+              <span>埋点范围</span>
+              <select
+                value={scopeKind}
+                onChange={(event) =>
+                  setScopeKind(event.target.value as TrackingScopeKind)
+                }
+              >
+                {scopeKinds.map((item) => (
+                  <option key={item.value} value={item.value}>
+                    {item.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+
+          <div className="admin-form-row">
+            <label className="admin-field">
+              <span>完成阈值</span>
+              <input
+                min={1}
+                step={1}
+                type="number"
+                value={threshold}
+                onChange={(event) => setThreshold(event.target.value)}
+              />
+            </label>
+            <label className="admin-field">
+              <span>奖励光点</span>
+              <input
+                min={1}
+                step={1}
+                type="number"
+                value={rewardPoints}
+                onChange={(event) => setRewardPoints(event.target.value)}
+              />
+            </label>
+          </div>
+
+          <label className="admin-field admin-field-compact">
+            <span>排序</span>
+            <input
+              step={1}
+              type="number"
+              value={sortOrder}
+              onChange={(event) => setSortOrder(event.target.value)}
+            />
+          </label>
+
+          {errorMessage ? (
+            <div className="admin-alert" role="status">
+              {errorMessage}
+            </div>
+          ) : null}
+
+          <button
+            className="admin-primary-button"
+            disabled={
+              isSaving ||
+              !taskId.trim() ||
+              !title.trim() ||
+              !eventKey.trim() ||
+              !parsePositiveInteger(threshold) ||
+              !parsePositiveInteger(rewardPoints)
+            }
+            type="submit"
+          >
+            <Save size={17} aria-hidden="true" />
+            <span>{isSaving ? '保存中' : '保存'}</span>
+          </button>
+        </form>
+
+        <div className="admin-stack">
+          <section className="admin-panel">
+            <div className="admin-panel-heading">
+              <h3>配置列表</h3>
+              <span>{entries.length}</span>
+            </div>
+            {entries.length ? (
+              <div className="admin-table-wrap">
+                <table className="admin-table admin-table-compact">
+                  <thead>
+                    <tr>
+                      <th>任务</th>
+                      <th>奖励</th>
+                      <th>状态</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {entries.map((entry) => (
+                      <tr key={entry.taskId}>
+                        <td>
+                          <button
+                            className="admin-text-button"
+                            type="button"
+                            onClick={() => fillForm(entry)}
+                          >
+                            {entry.title || entry.taskId}
+                          </button>
+                          <small>{entry.taskId}</small>
+                        </td>
+                        <td>{entry.rewardPoints}</td>
+                        <td>{entry.enabled ? '启用' : '停用'}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <div className="admin-empty-state">
+                {isLoading ? '加载中' : '暂无配置'}
+              </div>
+            )}
+          </section>
+
+          <form className="admin-panel admin-form" onSubmit={handleDisable}>
+            <label className="admin-field">
+              <span>停用 Task ID</span>
+              <input
+                value={disableTaskId}
+                onChange={(event) => setDisableTaskId(event.target.value)}
+              />
+            </label>
+            {disableErrorMessage ? (
+              <div className="admin-alert" role="status">
+                {disableErrorMessage}
+              </div>
+            ) : null}
+            <button
+              className="admin-danger-button"
+              disabled={isDisabling || !disableTaskId.trim()}
+              type="submit"
+            >
+              <PowerOff size={17} aria-hidden="true" />
+              <span>{isDisabling ? '停用中' : '停用'}</span>
+            </button>
+          </form>
+
+          <section className="admin-panel admin-result-panel">
+            <div className="admin-panel-heading">
+              <h3>记录</h3>
+              <span>{result?.taskId ?? '-'}</span>
+            </div>
+            {result ? (
+              <dl className="admin-info-list">
+                <div>
+                  <dt>Task ID</dt>
+                  <dd>{result.taskId}</dd>
+                </div>
+                <div>
+                  <dt>Event Key</dt>
+                  <dd>{result.eventKey}</dd>
+                </div>
+                <div>
+                  <dt>奖励</dt>
+                  <dd>{result.rewardPoints}</dd>
+                </div>
+                <div>
+                  <dt>阈值</dt>
+                  <dd>{result.threshold}</dd>
+                </div>
+                <div>
+                  <dt>状态</dt>
+                  <dd>{result.enabled ? '启用' : '停用'}</dd>
+                </div>
+                <div>
+                  <dt>更新人</dt>
+                  <dd>{result.updatedBy}</dd>
+                </div>
+                <div>
+                  <dt>更新</dt>
+                  <dd>{result.updatedAt}</dd>
+                </div>
+              </dl>
+            ) : (
+              <div className="admin-empty-state">暂无记录</div>
+            )}
+          </section>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function parsePositiveInteger(value: string) {
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
+}
+
+function parseInteger(value: string) {
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) ? parsed : 0;
+}