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>
   );