yingzios-platform-frontend-devtools 1.0.1

package/src/components/DevUserMenu/index.tsx

@@ -0,0 +1,372 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { devUserMenuStyles, modalStyles, formGroupStyles } from './styles';
+import { JwtGeneratorModal } from './JwtGeneratorModal';
+
+const STORAGE_KEYS = {
+  accessToken: 'accessToken',
+  refreshToken: 'refreshToken',
+  lastPhone: 'devtools:lastPhone',
+  userInfo: 'devtools:userInfo',
+} as const;
+
+interface UserInfo {
+  userId: string;
+  nickname: string;
+  avatar?: string;
+  phone: string;
+}
+
+export interface DevUserMenuProps {
+  /**
+   * API 基础路径，默认 '/portal/api'
+   */
+  apiBasePath?: string;
+  /**
+   * 是否显示切换组织按钮
+   * @default true
+   */
+  showOrgSwitch?: boolean;
+  /**
+   * 组织切换页面路径
+   * @default '/org-select'
+   */
+  orgSwitchPath?: string;
+}
+
+/**
+ * 开发环境用户菜单组件
+ *
+ * 提供简化的登录功能，方便本地独立开发调试。
+ * - 手机号 + 验证码登录
+ * - 自动记录上次登录的手机号
+ * - 验证码默认填写 1024
+ */
+export function DevUserMenu({
+  apiBasePath = '/portal/api',
+  showOrgSwitch = true,
+  orgSwitchPath = '/org-select',
+}: DevUserMenuProps) {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [showJwtGenerator, setShowJwtGenerator] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // 初始化时检查登录状态
+  useEffect(() => {
+    const token = localStorage.getItem(STORAGE_KEYS.accessToken);
+    const savedUserInfo = localStorage.getItem(STORAGE_KEYS.userInfo);
+
+    if (token && savedUserInfo) {
+      try {
+        setUserInfo(JSON.parse(savedUserInfo));
+        setIsLoggedIn(true);
+      } catch {
+        // 解析失败，清除无效数据
+        clearAuth();
+      }
+    }
+  }, []);
+
+  // 点击外部关闭下拉菜单
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setShowDropdown(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const clearAuth = useCallback(() => {
+    localStorage.removeItem(STORAGE_KEYS.accessToken);
+    localStorage.removeItem(STORAGE_KEYS.refreshToken);
+    localStorage.removeItem(STORAGE_KEYS.userInfo);
+    setIsLoggedIn(false);
+    setUserInfo(null);
+  }, []);
+
+  const handleLogout = useCallback(() => {
+    clearAuth();
+    setShowDropdown(false);
+  }, [clearAuth]);
+
+  const handleJwtGeneratorSuccess = useCallback(() => {
+    // 重新加载用户信息
+    const token = localStorage.getItem(STORAGE_KEYS.accessToken);
+    const savedUserInfo = localStorage.getItem(STORAGE_KEYS.userInfo);
+
+    if (token && savedUserInfo) {
+      try {
+        setUserInfo(JSON.parse(savedUserInfo));
+        setIsLoggedIn(true);
+        setShowJwtGenerator(false);
+      } catch {
+        clearAuth();
+      }
+    }
+  }, [clearAuth]);
+
+  const getAvatarContent = () => {
+    if (userInfo?.avatar) {
+      return (
+        <img
+          src={userInfo.avatar}
+          alt="avatar"
+          style={devUserMenuStyles.avatarImage as React.CSSProperties}
+        />
+      );
+    }
+
+    if (userInfo?.nickname) {
+      return userInfo.nickname.charAt(0).toUpperCase();
+    }
+
+    return '?';
+  };
+
+  const handleSwitchOrganization = useCallback(() => {
+    window.location.href = orgSwitchPath;
+  }, [orgSwitchPath]);
+
+  return (
+    <div style={devUserMenuStyles.container as React.CSSProperties} ref={dropdownRef}>
+      {isLoggedIn ? (
+        <>
+          <button
+            style={devUserMenuStyles.avatar}
+            onClick={() => setShowDropdown(!showDropdown)}
+            title={userInfo?.nickname || '用户'}
+          >
+            {getAvatarContent()}
+          </button>
+          {showDropdown && (
+            <div style={devUserMenuStyles.dropdown as React.CSSProperties}>
+              <div style={devUserMenuStyles.dropdownHeader as React.CSSProperties}>
+                <span style={devUserMenuStyles.dropdownNickname}>
+                  {userInfo?.nickname || '未知用户'}
+                </span>
+                <span style={devUserMenuStyles.dropdownPhone}>
+                  {userInfo?.phone}
+                </span>
+              </div>
+              <div style={devUserMenuStyles.dropdownDivider} />
+              <button
+                style={devUserMenuStyles.dropdownItem as React.CSSProperties}
+                onClick={handleLogout}
+              >
+                退出登录
+              </button>
+            </div>
+          )}
+        </>
+      ) : (
+        <button
+          style={devUserMenuStyles.loginButton}
+          onClick={() => setShowJwtGenerator(true)}
+        >
+          本地签发 JWT
+        </button>
+      )}
+
+      {showJwtGenerator && (
+        <JwtGeneratorModal
+          onClose={() => setShowJwtGenerator(false)}
+          onSuccess={handleJwtGeneratorSuccess}
+        />
+      )}
+    </div>
+  );
+}
+
+interface LoginModalProps {
+  apiBasePath: string;
+  onClose: () => void;
+  onSuccess: (userInfo: UserInfo) => void;
+}
+
+function LoginModal({ apiBasePath, onClose, onSuccess }: LoginModalProps) {
+  const [phone, setPhone] = useState(() => {
+    return localStorage.getItem(STORAGE_KEYS.lastPhone) || '';
+  });
+  const [code, setCode] = useState('1024');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [codeSent, setCodeSent] = useState(false);
+  const [countdown, setCountdown] = useState(0);
+
+  // 验证码倒计时
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [countdown]);
+
+  const sendCode = async () => {
+    if (!phone || phone.length !== 11) {
+      setError('请输入有效的手机号');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`${apiBasePath}/base/sms/send-code`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ phone, action: 'login' }),
+      });
+
+      const data = await response.json();
+
+      if (data.code === '000000') {
+        setCodeSent(true);
+        setCountdown(60);
+        // 保存手机号
+        localStorage.setItem(STORAGE_KEYS.lastPhone, phone);
+      } else {
+        setError(data.message || '发送验证码失败');
+      }
+    } catch (err) {
+      setError('网络错误，请稍后重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!phone || !code) {
+      setError('请填写手机号和验证码');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`${apiBasePath}/base/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          method: 'phone_sms',
+          phone,
+          code,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (data.code === '000000' && data.data) {
+        const loginData = data.data;
+
+        // 保存 token
+        localStorage.setItem(STORAGE_KEYS.accessToken, loginData.accessToken);
+        localStorage.setItem(STORAGE_KEYS.refreshToken, loginData.refreshToken);
+        localStorage.setItem(STORAGE_KEYS.lastPhone, phone);
+
+        // 构建用户信息
+        const userInfo: UserInfo = {
+          userId: loginData.userId,
+          nickname: loginData.nickname || phone,
+          avatar: loginData.avatar,
+          phone,
+        };
+        localStorage.setItem(STORAGE_KEYS.userInfo, JSON.stringify(userInfo));
+
+        onSuccess(userInfo);
+      } else {
+        setError(data.message || '登录失败');
+      }
+    } catch (err) {
+      setError('网络错误，请稍后重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={modalStyles.overlay as React.CSSProperties} onClick={onClose}>
+      <div
+        style={modalStyles.modal}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div style={modalStyles.header}>
+          <h3 style={modalStyles.title}>开发登录</h3>
+          <button style={modalStyles.closeButton} onClick={onClose}>
+            ×
+          </button>
+        </div>
+
+        <form style={modalStyles.form} onSubmit={handleLogin}>
+          <div style={formGroupStyles.group}>
+            <label style={formGroupStyles.label}>手机号</label>
+            <input
+              type="tel"
+              style={formGroupStyles.input}
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              placeholder="请输入手机号"
+              maxLength={11}
+              autoComplete="tel"
+            />
+          </div>
+
+          <div style={formGroupStyles.group}>
+            <label style={formGroupStyles.label}>验证码</label>
+            <div style={formGroupStyles.inputRow}>
+              <input
+                type="text"
+                style={{ ...formGroupStyles.input, flex: 1 }}
+                value={code}
+                onChange={(e) => setCode(e.target.value)}
+                placeholder="验证码"
+                maxLength={6}
+              />
+              <button
+                type="button"
+                style={{
+                  ...formGroupStyles.sendButton,
+                  ...(loading || countdown > 0 ? formGroupStyles.sendButtonDisabled : {}),
+                }}
+                onClick={sendCode}
+                disabled={loading || countdown > 0}
+              >
+                {countdown > 0 ? `${countdown}s` : codeSent ? '重新发送' : '发送验证码'}
+              </button>
+            </div>
+          </div>
+
+          {error && <div style={modalStyles.error}>{error}</div>}
+
+          <div style={modalStyles.tip}>
+            💡 开发环境验证码默认为 <code style={modalStyles.tipCode}>1024</code>
+          </div>
+
+          <button
+            type="submit"
+            style={{
+              ...modalStyles.submitButton,
+              ...(loading ? modalStyles.submitButtonDisabled : {}),
+            }}
+            disabled={loading}
+          >
+            {loading ? '登录中...' : '登录'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+DevUserMenu.displayName = 'DevUserMenu';
+
+export default DevUserMenu;

package/src/components/DevUserMenu/jwt-utils.ts

@@ -0,0 +1,121 @@
+/**
+ * JWT 生成工具（浏览器端实现）
+ * 使用 Web Crypto API 实现 HS256 签名
+ *
+ * JWT Payload 字段说明（与 portal-backend auth.service.ts 保持一致）：
+ * - id: 用户ID（JwtStrategy 优先从此字段提取 userId）
+ * - sub: 用户ID（标准 JWT 字段，作为 id 的备选）
+ * - aud: 受众，固定为 'internal'
+ * - nickname: 用户昵称
+ * - avatar: 用户头像 URL
+ * - phone: 手机号
+ * - orgId: 当前组织 ID（可选）
+ */
+
+interface JwtPayload {
+  id: string;
+  sub: string;
+  aud: string;
+  nickname: string;
+  avatar?: string;
+  phone: string;
+  orgId?: string;
+  [key: string]: any;
+}
+
+/**
+ * Base64Url 编码（支持 Unicode 字符）
+ */
+function base64UrlEncode(str: string): string {
+  // 使用 TextEncoder 将字符串转换为 UTF-8 字节数组
+  const encoder = new TextEncoder();
+  const bytes = encoder.encode(str);
+  
+  // 将字节数组转换为二进制字符串
+  const binary = String.fromCharCode(...bytes);
+  
+  // Base64 编码
+  const base64 = btoa(binary);
+  
+  // 转换为 Base64Url 格式
+  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+/**
+ * ArrayBuffer 转 Base64Url
+ * 注意：不能调用 base64UrlEncode，因为那个函数会用 TextEncoder 重新编码
+ */
+function arrayBufferToBase64Url(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  const binary = String.fromCharCode(...bytes);
+  
+  // 直接进行 Base64 编码，不使用 TextEncoder
+  const base64 = btoa(binary);
+  
+  // 转换为 Base64Url 格式
+  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+/**
+ * 使用 HS256 算法签名 JWT
+ */
+export async function signJwtHS256(
+  payload: JwtPayload,
+  secret: string,
+  expiresIn: number = 86400, // 默认 1 天（秒）
+): Promise<string> {
+  // 1. JWT Header
+  const header = {
+    alg: 'HS256',
+    typ: 'JWT',
+  };
+
+  // 2. 添加过期时间到 payload
+  const now = Math.floor(Date.now() / 1000);
+  const fullPayload = {
+    ...payload,
+    iat: now,
+    exp: now + expiresIn,
+  };
+
+  // 3. 编码 header 和 payload
+  const encodedHeader = base64UrlEncode(JSON.stringify(header));
+  const encodedPayload = base64UrlEncode(JSON.stringify(fullPayload));
+  const message = `${encodedHeader}.${encodedPayload}`;
+
+  // 4. 使用 Web Crypto API 进行 HMAC-SHA256 签名
+  const encoder = new TextEncoder();
+  const keyData = encoder.encode(secret);
+  const messageData = encoder.encode(message);
+
+  const cryptoKey = await crypto.subtle.importKey(
+    'raw',
+    keyData,
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign'],
+  );
+
+  const signature = await crypto.subtle.sign('HMAC', cryptoKey, messageData);
+
+  // 5. 组装完整的 JWT
+  const encodedSignature = arrayBufferToBase64Url(signature);
+  return `${message}.${encodedSignature}`;
+}
+
+/**
+ * 获取默认的 JWT Payload
+ * 格式与 portal-backend auth.service.ts 中签发的内部 JWT 保持一致
+ */
+export function getDefaultJwtPayload(): JwtPayload {
+  const userId = '1000000001';
+  return {
+    id: userId,
+    sub: userId,
+    aud: 'internal',
+    nickname: '开发用户',
+    avatar: '',
+    phone: '13800138000',
+    orgId: '',
+  };
+}

package/src/components/DevUserMenu/styles.ts

@@ -0,0 +1,229 @@
+import type { CSSProperties } from 'react';
+
+export const devUserMenuStyles: Record<string, CSSProperties> = {
+  container: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 10,
+  },
+  switchOrgButton: {
+    height: 32,
+    padding: '0 14px',
+    border: '1px solid #d8e0eb',
+    borderRadius: 16,
+    background: '#ffffff',
+    color: '#10233d',
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: 'pointer',
+    transition: 'border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease',
+  },
+  avatar: {
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
+    background: '#1890ff',
+    color: '#fff',
+    border: 'none',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 14,
+    fontWeight: 500,
+    transition: 'opacity 0.2s',
+  },
+  avatarImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '50%',
+    objectFit: 'cover',
+  },
+  loginButton: {
+    padding: '6px 16px',
+    background: '#1890ff',
+    color: '#fff',
+    border: 'none',
+    borderRadius: 4,
+    cursor: 'pointer',
+    fontSize: 14,
+    transition: 'background 0.2s',
+  },
+  dropdown: {
+    position: 'absolute',
+    top: '100%',
+    right: 0,
+    marginTop: 8,
+    minWidth: 180,
+    background: '#fff',
+    borderRadius: 6,
+    boxShadow: '0 3px 12px rgba(0, 0, 0, 0.15)',
+    zIndex: 1000,
+    overflow: 'hidden',
+  },
+  dropdownHeader: {
+    padding: '12px 16px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+  },
+  dropdownNickname: {
+    fontSize: 14,
+    fontWeight: 500,
+    color: '#333',
+  },
+  dropdownPhone: {
+    fontSize: 12,
+    color: '#999',
+  },
+  dropdownDivider: {
+    height: 1,
+    background: '#f0f0f0',
+    margin: '0 8px',
+  },
+  dropdownItem: {
+    display: 'block',
+    width: '100%',
+    padding: '10px 16px',
+    textAlign: 'left',
+    background: 'none',
+    border: 'none',
+    fontSize: 14,
+    color: '#333',
+    cursor: 'pointer',
+    transition: 'background 0.2s',
+  },
+};
+
+export const modalStyles: Record<string, CSSProperties> = {
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: 'rgba(0, 0, 0, 0.45)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 10000,
+  },
+  modal: {
+    width: 360,
+    background: '#fff',
+    borderRadius: 8,
+    boxShadow: '0 6px 24px rgba(0, 0, 0, 0.2)',
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '16px 20px',
+    borderBottom: '1px solid #f0f0f0',
+  },
+  title: {
+    margin: 0,
+    fontSize: 16,
+    fontWeight: 500,
+    color: '#333',
+  },
+  closeButton: {
+    width: 24,
+    height: 24,
+    background: 'none',
+    border: 'none',
+    fontSize: 20,
+    color: '#999',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 4,
+    transition: 'background 0.2s',
+  },
+  form: {
+    padding: 20,
+  },
+  tip: {
+    margin: '12px 0',
+    padding: '8px 12px',
+    background: '#fffbe6',
+    border: '1px solid #ffe58f',
+    borderRadius: 4,
+    fontSize: 12,
+    color: '#8c6d1f',
+  },
+  tipCode: {
+    padding: '2px 6px',
+    background: 'rgba(0, 0, 0, 0.06)',
+    borderRadius: 3,
+    fontFamily: 'monospace',
+  },
+  submitButton: {
+    width: '100%',
+    padding: 10,
+    background: '#1890ff',
+    color: '#fff',
+    border: 'none',
+    borderRadius: 4,
+    fontSize: 14,
+    cursor: 'pointer',
+    transition: 'background 0.2s',
+  },
+  submitButtonDisabled: {
+    opacity: 0.65,
+    cursor: 'not-allowed',
+  },
+  error: {
+    marginBottom: 12,
+    padding: '8px 12px',
+    background: '#fff2f0',
+    border: '1px solid #ffccc7',
+    borderRadius: 4,
+    fontSize: 13,
+    color: '#cf1322',
+  },
+};
+
+export const formGroupStyles: Record<string, CSSProperties> = {
+  group: {
+    marginBottom: 16,
+  },
+  label: {
+    display: 'block',
+    marginBottom: 6,
+    fontSize: 14,
+    color: '#333',
+  },
+  input: {
+    width: '100%',
+    padding: '8px 12px',
+    border: '1px solid #d9d9d9',
+    borderRadius: 4,
+    fontSize: 14,
+    outline: 'none',
+    transition: 'border-color 0.2s',
+    boxSizing: 'border-box',
+  },
+  inputRow: {
+    display: 'flex',
+    gap: 8,
+  },
+  sendButton: {
+    flexShrink: 0,
+    padding: '8px 12px',
+    background: '#fff',
+    border: '1px solid #d9d9d9',
+    borderRadius: 4,
+    fontSize: 14,
+    color: '#333',
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    transition: 'border-color 0.2s, color 0.2s',
+  },
+  sendButtonDisabled: {
+    color: '#bfbfbf',
+    cursor: 'not-allowed',
+  },
+};