dudu/design/ui_kits/mobile/MobileShared.jsx

// dudu 移动端 UI kit · 共享：Lucide 图标子集、DuduLogo、手机框

function DuMIcon({ size = 16, sw = 2, children, ...rest }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...rest}>
      {children}
    </svg>
  );
}

const DuMIcons = {
  Mic: (p) => (
    <DuMIcon {...p}>
      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path>
      <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
      <line x1="12" x2="12" y1="19" y2="22"></line>
    </DuMIcon>
  ),
  Globe: (p) => (
    <DuMIcon {...p}>
      <circle cx="12" cy="12" r="10"></circle>
      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
      <path d="M2 12h20"></path>
    </DuMIcon>
  ),
  Backspace: (p) => (
    <DuMIcon {...p}>
      <path d="M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Z"></path>
      <line x1="18" x2="12" y1="9" y2="15"></line>
      <line x1="12" x2="18" y1="9" y2="15"></line>
    </DuMIcon>
  ),
  Enter: (p) => (
    <DuMIcon {...p}>
      <polyline points="9 10 4 15 9 20"></polyline>
      <path d="M20 4v7a4 4 0 0 1-4 4H4"></path>
    </DuMIcon>
  ),
  Check: (p) => <DuMIcon {...p}><path d="M20 6 9 17l-5-5"></path></DuMIcon>,
  ChevronRight: (p) => <DuMIcon {...p}><path d="m9 18 6-6-6-6"></path></DuMIcon>,
  User: (p) => (
    <DuMIcon {...p}>
      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
      <circle cx="12" cy="7" r="4"></circle>
    </DuMIcon>
  ),
  Keyboard: (p) => (
    <DuMIcon {...p}>
      <rect width="20" height="16" x="2" y="4" rx="2"></rect>
      <path d="M6 8h.01"></path><path d="M10 8h.01"></path><path d="M14 8h.01"></path><path d="M18 8h.01"></path>
      <path d="M6 12h.01"></path><path d="M10 12h.01"></path><path d="M14 12h.01"></path><path d="M18 12h.01"></path>
      <path d="M7 16h10"></path>
    </DuMIcon>
  ),
  Shield: (p) => (
    <DuMIcon {...p}>
      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
    </DuMIcon>
  ),
  ArrowUp: (p) => <DuMIcon {...p}><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></DuMIcon>,
  Wechat: (p) => (
    /* 简化对话气泡（代微信图标占位，正式包内用官方资源）*/
    <DuMIcon {...p}>
      <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>
    </DuMIcon>
  ),
};

function DuduMLogo({ size = 20, sw = 3.5 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" stroke="currentColor"
      strokeWidth={sw} strokeLinecap="round" aria-hidden="true">
      <circle cx="24" cy="24" r="18"></circle>
      <path d="M17 20.5v7"></path>
      <path d="M24 16.5v15"></path>
      <path d="M31 20.5v7"></path>
    </svg>
  );
}

// 中性手机框：深色边框 + 打孔/刘海，内容区由调用方填充
function PhoneFrame({ width = 312, height = 596, children }) {
  return (
    <div style={{
      width, height, boxSizing: 'border-box', background: '#0B0C10', borderRadius: 38,
      padding: 9, boxShadow: 'var(--shadow-window)', flex: 'none',
    }}>
      <div style={{
        width: '100%', height: '100%', boxSizing: 'border-box', background: 'var(--bg-app)',
        borderRadius: 30, overflow: 'hidden', display: 'flex', flexDirection: 'column', position: 'relative',
      }}>
        {/* 状态栏 */}
        <div style={{ height: 30, flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: 84, height: 18, background: '#0B0C10', borderRadius: 10 }}></div>
        </div>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { DuMIcon, DuMIcons, DuduMLogo, PhoneFrame });