收口前端平台组件库能力

新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件
迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome
补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录

src/components/auth/BindPhoneScreen.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react';
 
 import type { PlatformTheme } from '../../../packages/shared/src/contracts/runtime';
 import type { AuthCaptchaChallenge, AuthUser } from '../../services/authService';
+import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { CaptchaChallengeField } from './CaptchaChallengeField';
 
 type BindPhoneScreenProps = {
@@ -108,10 +110,11 @@ export function BindPhoneScreen({
                   onChange={(event) => setCode(event.target.value)}
                   placeholder="输入验证码"
                 />
-                <button
-                  type="button"
+                <PlatformActionButton
                   disabled={sendingCode || cooldownSeconds > 0 || !phone.trim()}
-                  className="platform-button platform-button--secondary h-12 shrink-0 px-4 text-sm disabled:cursor-not-allowed disabled:opacity-55"
+                  tone="secondary"
+                  size="lg"
+                  className="shrink-0 text-sm"
                   onClick={() => {
                     void (async () => {
                       try {
@@ -135,14 +138,14 @@ export function BindPhoneScreen({
                     : cooldownSeconds > 0
                       ? `${cooldownSeconds}s`
                       : '获取验证码'}
-                </button>
+                </PlatformActionButton>
               </div>
             </label>
 
             {hint ? (
-              <div className="platform-banner platform-banner--success text-sm">
+              <PlatformStatusMessage tone="success" surface="profile">
                 {hint}
-              </div>
+              </PlatformStatusMessage>
             ) : null}
 
             <CaptchaChallengeField
@@ -152,28 +155,29 @@ export function BindPhoneScreen({
             />
 
             {error ? (
-              <div className="platform-banner platform-banner--danger text-sm">
+              <PlatformStatusMessage tone="error" surface="profile">
                 {error}
-              </div>
+              </PlatformStatusMessage>
             ) : null}
 
-            <button
+            <PlatformActionButton
               type="submit"
               disabled={binding || !phone.trim() || !code.trim()}
-              className="platform-button platform-button--primary h-12 px-4 text-base disabled:cursor-not-allowed disabled:opacity-60"
+              size="lg"
             >
               {binding ? '正在绑定...' : '绑定手机号并进入游戏'}
-            </button>
+            </PlatformActionButton>
 
-            <button
-              type="button"
-              className="platform-button platform-button--ghost h-11 px-4 text-sm"
+            <PlatformActionButton
+              tone="ghost"
+              size="md"
+              className="h-11"
               onClick={() => {
                 void onLogout();
               }}
             >
               返回其他登录方式
-            </button>
+            </PlatformActionButton>
           </form>
         </div>
       </div>