feat(ui): replace emoji icons with lucide-react icon components
This commit is contained in:
@@ -1,16 +1,6 @@
|
||||
"use client";
|
||||
/**
|
||||
* 认证面板:顶层 switch(Facebook / Email)+ 悬浮返回按钮
|
||||
*
|
||||
* 原始 Dart: lib/ui/auth/widgets/auth_panel.dart
|
||||
*
|
||||
* 行为对齐:
|
||||
* - 状态机:`authPanelMode`("facebook" | "email")由 XState 管理
|
||||
* - 切换派发 `AuthPanelModeChanged`
|
||||
* - 悬浮返回按钮(40×40 白圆,top:20, left:20):
|
||||
* - facebook 模式:`router.back()`
|
||||
* - email 模式:派发 `AuthPanelModeChanged(facebook)`
|
||||
* - Email 面板的弹层 Facebook 按钮同样派发 `AuthPanelModeChanged(facebook)`
|
||||
*/
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
|
||||
@@ -2,15 +2,10 @@
|
||||
/**
|
||||
* ChatHeader 顶部栏
|
||||
*
|
||||
* 原始 Dart: lib/ui/chat/widgets/chat_header.dart(112 行)
|
||||
*
|
||||
* 两种模式:
|
||||
* - 游客模式(isGuest=true):渲染 `GuestBanner` 提示注册(点击 → /auth)
|
||||
* - 登录模式(isGuest=false):渲染 `MenuButton`(点击 → push 到 /sidebar)
|
||||
*
|
||||
* 注意:菜单按钮直接 push 到侧边栏路由,不打开下拉菜单
|
||||
* (Dart 端 `MenuButton(onTap: _goSidebar)` 行为)。
|
||||
* 图标:lucide-react <Lock />(游客 banner)+ <Menu />(菜单按钮)
|
||||
* tree-shakable,currentColor 继承父 color
|
||||
*/
|
||||
import { Lock, Menu } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { ROUTES } from "@/router/routes";
|
||||
@@ -33,9 +28,7 @@ export function ChatHeader({ isGuest }: ChatHeaderProps) {
|
||||
onClick={() => router.push(ROUTES.auth)}
|
||||
aria-label="Sign up to unlock more features"
|
||||
>
|
||||
<span className={styles.guestBannerIcon} aria-hidden="true">
|
||||
🔒
|
||||
</span>
|
||||
<Lock className={styles.guestBannerIcon} size={16} aria-hidden="true" />
|
||||
<span>Sign up to unlock more features</span>
|
||||
</button>
|
||||
</header>
|
||||
@@ -52,9 +45,7 @@ export function ChatHeader({ isGuest }: ChatHeaderProps) {
|
||||
onClick={() => router.push(ROUTES.sidebar)}
|
||||
aria-label="Menu"
|
||||
>
|
||||
<span className={styles.menuIcon} aria-hidden="true">
|
||||
☰
|
||||
</span>
|
||||
<Menu className={styles.menuIcon} size={24} aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -7,7 +7,11 @@
|
||||
* 视觉:
|
||||
* - 默认:粉色背景 + 渐变边缘
|
||||
* - 聚焦 / 激活:完整 primaryGradient(accent → 透明)
|
||||
*
|
||||
* 图标:lucide-react <Send />(tree-shakable,currentColor 继承父 color)
|
||||
*/
|
||||
import { ArrowUp, Send } from "lucide-react";
|
||||
|
||||
import styles from "./chat-send-button.module.css";
|
||||
|
||||
export interface ChatSendButtonProps {
|
||||
@@ -24,9 +28,7 @@ export function ChatSendButton({ disabled, onClick }: ChatSendButtonProps) {
|
||||
onClick={onClick}
|
||||
aria-label="Send message"
|
||||
>
|
||||
<span className={styles.icon} aria-hidden="true">
|
||||
↑
|
||||
</span>
|
||||
<ArrowUp className={styles.icon} size={24} aria-hidden="true" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,6 @@
|
||||
"use client";
|
||||
/**
|
||||
* Splash 底部按钮组
|
||||
*
|
||||
* 本组件是 splash 鉴权流程的纯 UI 入口:
|
||||
* - 消费 `useAuthState` / `useAuthDispatch`(仅用于 isLoading 显示 + 派事件)
|
||||
* - Skip 按钮 = 显式游客登录入口(派发 `AuthGuestLoginSubmitted`)
|
||||
* - 社交登录按钮仅派发 `AuthFacebookLoginSubmitted` 事件,由状态机负责调 NextAuth
|
||||
*
|
||||
* 派事件策略(单事件):
|
||||
* - 派业务事件(`AuthGuestLoginSubmitted` / `AuthFacebookLoginSubmitted`)→ 状态机开始跑
|
||||
* - `pendingRedirect: true` 在登录成功 onDone 里自动置(auth-machine.ts `onLoginSuccess` helper)
|
||||
* - splash-screen 看到 flag=true + loginStatus 非 notLoggedIn → 跳 /chat
|
||||
*/
|
||||
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
|
||||
import { LoadingIndicator } from "@/app/_components/core/loading-indicator";
|
||||
|
||||
Reference in New Issue
Block a user