feat(web): add login and customer chat demos

Add a responsive login screen using the shared appearance controls and a browser-only customer-service simulator for the chat workspace. Register both routes and include mock media resolution, message sending, and earlier-history loading for interactive verification.

apps/web/src/components/logo.tsx

@@ -0,0 +1,19 @@
+import type React from "react"
+
+type Props = Omit<React.ComponentProps<"svg">, "role" | "viewBox" | "xmlns">
+
+export function Logo(props: Props) {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#7AB55C"
+      aria-hidden="true"
+      {...props}
+    >
+      <title>Shopify</title>
+      <path d="M15.337 23.979l7.216-1.561s-2.604-17.613-2.625-17.73c-.018-.116-.114-.192-.211-.192s-1.929-.136-1.929-.136-1.275-1.274-1.439-1.411c-.045-.037-.075-.057-.121-.074l-.914 21.104h.023zM11.71 11.305s-.81-.424-1.774-.424c-1.447 0-1.504.906-1.504 1.141 0 1.232 3.24 1.715 3.24 4.629 0 2.295-1.44 3.76-3.406 3.76-2.354 0-3.54-1.465-3.54-1.465l.646-2.086s1.245 1.066 2.28 1.066c.675 0 .975-.545.975-.932 0-1.619-2.654-1.694-2.654-4.359-.034-2.237 1.571-4.416 4.827-4.416 1.257 0 1.875.361 1.875.361l-.945 2.715-.02.01zM11.17.83c.136 0 .271.038.405.135-.984.465-2.064 1.639-2.508 3.992-.656.213-1.293.405-1.889.578C7.697 3.75 8.951.84 11.17.84V.83zm1.235 2.949v.135c-.754.232-1.583.484-2.394.736.466-1.777 1.333-2.645 2.085-2.971.193.501.309 1.176.309 2.1zm.539-2.234c.694.074 1.141.867 1.429 1.755-.349.114-.735.231-1.158.366v-.252c0-.752-.096-1.371-.271-1.871v.002zm2.992 1.289c-.02 0-.06.021-.078.021s-.289.075-.714.21c-.423-1.233-1.176-2.37-2.508-2.37h-.115C12.135.209 11.669 0 11.265 0 8.159 0 6.675 3.877 6.21 5.846c-1.194.365-2.063.636-2.16.674-.675.213-.694.232-.772.87-.075.462-1.83 14.063-1.83 14.063L15.009 24l.927-21.166z" />
+    </svg>
+  )
+}

apps/web/src/pages/chats-demo-page.tsx

@@ -0,0 +1,256 @@
+import * as React from "react"
+import {
+  ChatWorkspace,
+  type ChatConversation,
+  type ChatMessage,
+} from "@workspace/blocks/chats"
+
+const mockMediaUrls: Record<string, string> = {
+  "campaign-banner":
+    "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=960&q=80",
+  "order-card-thumbnail":
+    "https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&w=320&q=80",
+}
+
+const initialConversations: readonly ChatConversation[] = [
+  {
+    avatarUrl:
+      "https://pub-c5e31b5cdafb419fb247a8ac2e78df7a.r2.dev/public/assets/images/mock/avatar/avatar-1.webp",
+    description: "微信小程序客服会话",
+    id: "customer-service",
+    lastActivityLabel: "刚刚",
+    lastMessage: "我的订单",
+    messages: [
+      {
+        author: { id: "customer-zhang", name: "张晓敏" },
+        createdAt: "2026-07-31T09:30:00+08:00",
+        direction: "incoming",
+        id: "welcome",
+        msgtype: "text",
+        text: { content: "你好，我想了解一下订单的配送进度。" },
+      },
+      {
+        createdAt: "2026-07-31T09:31:00+08:00",
+        direction: "outgoing",
+        id: "campaign-image",
+        image: { media_id: "campaign-banner" },
+        msgtype: "image",
+      },
+      {
+        createdAt: "2026-07-31T09:32:00+08:00",
+        direction: "outgoing",
+        id: "help-link",
+        link: {
+          description: "查看商品、订单与售后服务说明。",
+          thumb_url:
+            "https://images.unsplash.com/photo-1556740758-90de374c12ad?auto=format&fit=crop&w=640&q=80",
+          title: "帮助中心",
+          url: "https://example.com/help",
+        },
+        msgtype: "link",
+      },
+      {
+        createdAt: "2026-07-31T09:33:00+08:00",
+        direction: "outgoing",
+        id: "orders-card",
+        miniprogrampage: {
+          pagepath: "pages/orders/index",
+          thumb_media_id: "order-card-thumbnail",
+          title: "我的订单",
+        },
+        msgtype: "miniprogrampage",
+      },
+    ],
+    title: "张晓敏",
+    unreadCount: 3,
+  },
+  {
+    avatarUrl:
+      "https://pub-c5e31b5cdafb419fb247a8ac2e78df7a.r2.dev/public/assets/images/mock/avatar/avatar-4.webp",
+    description: "微信小程序客服会话",
+    id: "shipping",
+    lastActivityLabel: "昨天",
+    lastMessage: "请问我的包裹什么时候可以送到？",
+    messages: [
+      {
+        author: { id: "customer-li", name: "李雨晴" },
+        createdAt: "2026-07-30T16:20:00+08:00",
+        direction: "incoming",
+        id: "shipping-status",
+        msgtype: "text",
+        text: { content: "请问我的包裹什么时候可以送到？" },
+      },
+    ],
+    title: "李雨晴",
+  },
+]
+
+export function ChatsDemoPage() {
+  const [activeConversationId, setActiveConversationId] = React.useState(
+    initialConversations[0]!.id
+  )
+  const [conversations, setConversations] = React.useState(initialConversations)
+  const [hasMoreHistory, setHasMoreHistory] = React.useState(true)
+  const [mediaUrls, setMediaUrls] = React.useState(mockMediaUrls)
+  const objectUrlsRef = React.useRef(new Set<string>())
+
+  React.useEffect(
+    () => () => {
+      for (const url of objectUrlsRef.current) URL.revokeObjectURL(url)
+    },
+    []
+  )
+
+  const appendMessages = React.useCallback(
+    (conversationId: string, messages: readonly ChatMessage[]) => {
+      if (messages.length === 0) return
+
+      const lastMessage = messages.at(-1)!
+      setConversations((current) =>
+        current.map((conversation) =>
+          conversation.id === conversationId
+            ? {
+                ...conversation,
+                lastActivityLabel: "刚刚",
+                lastMessage: getMessagePreview(lastMessage),
+                messages: [...conversation.messages, ...messages],
+                unreadCount: 0,
+              }
+            : conversation
+        )
+      )
+    },
+    []
+  )
+
+  const handleSend = React.useCallback(
+    async ({
+      conversation,
+      files,
+      text,
+    }: Parameters<
+      NonNullable<React.ComponentProps<typeof ChatWorkspace>["onSend"]>
+    >[0]) => {
+      const createdAt = new Date().toISOString()
+      const prefix = `${Date.now()}`
+      const messages: ChatMessage[] = []
+
+      if (text) {
+        messages.push({
+          createdAt,
+          direction: "outgoing",
+          id: `${prefix}:text`,
+          msgtype: "text",
+          status: "sent",
+          text: { content: text },
+        })
+      }
+
+      const newMediaUrls: Record<string, string> = {}
+      for (const [index, file] of files.entries()) {
+        const url = URL.createObjectURL(file)
+        objectUrlsRef.current.add(url)
+
+        if (file.type.startsWith("image/")) {
+          const mediaId = `${prefix}:image:${index}`
+          newMediaUrls[mediaId] = url
+          messages.push({
+            createdAt,
+            direction: "outgoing",
+            id: mediaId,
+            image: { media_id: mediaId },
+            msgtype: "image",
+            status: "sent",
+          })
+          continue
+        }
+
+        messages.push({
+          createdAt,
+          direction: "outgoing",
+          id: `${prefix}:link:${index}`,
+          link: {
+            description: "本地选择的文件（仅用于模拟）。",
+            thumb_url: "",
+            title: file.name,
+            url,
+          },
+          msgtype: "link",
+          status: "sent",
+        })
+      }
+
+      if (Object.keys(newMediaUrls).length > 0) {
+        setMediaUrls((current) => ({ ...current, ...newMediaUrls }))
+      }
+      appendMessages(conversation.id, messages)
+    },
+    [appendMessages]
+  )
+
+  const handleLoadEarlierMessages = React.useCallback(
+    (conversation: ChatConversation) => {
+      setHasMoreHistory(false)
+      setConversations((current) =>
+        current.map((currentConversation) =>
+          currentConversation.id === conversation.id
+            ? {
+                ...currentConversation,
+                messages: [
+                  {
+                    author: { id: "customer-zhang", name: "张晓敏" },
+                    createdAt: "2026-07-31T09:20:00+08:00",
+                    direction: "incoming",
+                    id: `${conversation.id}:earlier-message`,
+                    msgtype: "text",
+                    text: { content: "我昨天已经联系过客服了。" },
+                  },
+                  ...currentConversation.messages,
+                ],
+              }
+            : currentConversation
+        )
+      )
+    },
+    []
+  )
+
+  return (
+    <div className="flex min-w-0 flex-col gap-6">
+      <div>
+        <h1 className="text-xl font-medium">聊天模拟器</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          所有数据仅保存在浏览器内，可模拟微信小程序客服的文本、图片、图文链接和小程序卡片消息。
+        </p>
+      </div>
+      <ChatWorkspace
+        activeConversationId={activeConversationId}
+        conversations={conversations}
+        hasMoreMessages={
+          hasMoreHistory && activeConversationId === "customer-service"
+        }
+        maxHeight="calc(100svh - 15rem)"
+        minHeight="min(36rem, calc(100svh - 15rem))"
+        onActiveConversationChange={(conversation) =>
+          setActiveConversationId(conversation.id)
+        }
+        onLoadEarlierMessages={handleLoadEarlierMessages}
+        onSend={handleSend}
+        resolveMediaUrl={(mediaId) => mediaUrls[mediaId]}
+      />
+    </div>
+  )
+}
+
+function getMessagePreview(message: ChatMessage) {
+  switch (message.msgtype) {
+    case "text":
+      return message.text.content
+    case "image":
+      return "[图片]"
+    case "link":
+      return message.link.title
+    case "miniprogrampage":
+      return message.miniprogrampage.title
+  }
+}

apps/web/src/pages/login-page.tsx

@@ -0,0 +1,257 @@
+import React, { useState } from "react"
+import { useMutation } from "@tanstack/react-query"
+import { Button } from "@workspace/ui/components/button"
+import { Input } from "@workspace/ui/components/input"
+import { EyeIcon, EyeOffIcon } from "lucide-react"
+import { cn } from "@workspace/ui/lib/utils"
+import { ThemeToggleButton } from "@workspace/blocks/blocks/appearance"
+import { Logo } from "@/components/logo"
+
+export function LoginPage() {
+  return (
+    <div className="isolate h-svh min-h-148 w-svw lg:min-h-164.5">
+      <header className="relative z-10 h-0">
+        <div className="flex h-14 items-center justify-between px-6">
+          <div className="size-6 opacity-0 lg:opacity-100">
+            <Logo />
+          </div>
+          <div>
+            <ThemeToggleButton />
+          </div>
+        </div>
+      </header>
+      <main className="relative isolate flex size-full before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:bg-[url(https://pub-c5e31b5cdafb419fb247a8ac2e78df7a.r2.dev/public/assets/background/background-3-blur.webp)] before:bg-cover before:bg-center before:bg-no-repeat before:opacity-20">
+        <div className="pointer-events-none hidden w-120 flex-col justify-center gap-16 bg-linear-to-r from-secondary/10 to-muted/20 p-6 pt-18 select-none lg:flex">
+          <div className="text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-foreground">
+              欢迎回来 👋🏻
+            </h2>
+            <p className="mt-4 text-muted-foreground">
+              让商品、订单与运营管理更简单高效。
+            </p>
+          </div>
+          <img
+            src="https://pub-c5e31b5cdafb419fb247a8ac2e78df7a.r2.dev/public/assets/illustrations/illustration-dashboard.webp"
+            alt=""
+            className="aspect-4/3 w-full object-cover object-center"
+          />
+          <Features />
+        </div>
+        <div className="flex flex-1 flex-col items-start gap-7 bg-sidebar/80 px-6 py-20 lg:justify-center lg:px-8">
+          <div className="mx-auto mb-10 w-full max-w-md lg:hidden">
+            <Logo className="size-12" />
+          </div>
+          <LoginForm />
+          <div className="lg:h-24" />
+        </div>
+      </main>
+    </div>
+  )
+}
+
+const features = [
+  {
+    label: "Jwt",
+    img: "https://pub-c5e31b5cdafb419fb247a8ac2e78df7a.r2.dev/public/assets/icons/platforms/ic-jwt.svg",
+  },
+  {
+    label: "Firebase",
+    img: "https://pub-c5e31b5cdafb419fb247a8ac2e78df7a.r2.dev/public/assets/icons/platforms/ic-firebase.svg",
+  },
+  {
+    label: "Amplify",
+    img: "https://pub-c5e31b5cdafb419fb247a8ac2e78df7a.r2.dev/public/assets/icons/platforms/ic-amplify.svg",
+  },
+  {
+    label: "Auth0",
+    img: "https://pub-c5e31b5cdafb419fb247a8ac2e78df7a.r2.dev/public/assets/icons/platforms/ic-auth0.svg",
+  },
+  {
+    label: "Supabase",
+    img: "https://pub-c5e31b5cdafb419fb247a8ac2e78df7a.r2.dev/public/assets/icons/platforms/ic-supabase.svg",
+  },
+]
+
+function Features() {
+  const [index, setIndex] = React.useState(0)
+
+  React.useEffect(() => {
+    const timerId = setInterval(() => {
+      setIndex((currentIndex) => (currentIndex + 1) % features.length)
+    }, 1000)
+
+    return () => {
+      clearInterval(timerId)
+    }
+  }, [])
+
+  return (
+    <ul className="flex items-center justify-center gap-4">
+      {features.map((f, i) => (
+        <li
+          key={f.label}
+          className={cn(
+            "transition-[filter] duration-1000 ease-linear",
+            i === index ? "grayscale-0" : "grayscale-100"
+          )}
+        >
+          <img className="size-8" alt={f.label} src={f.img} />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function LoginForm() {
+  // const navigate = useNavigate()
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+
+  const mutation = useMutation({
+    // mutationFn: () => {
+    //   return api.post<AdminAuthResponse>("/api/v1/admin/auth/login", {
+    //     username,
+    //     password,
+    //   })
+    // },
+    // onSuccess: () => {
+    //   login()
+    //   Toast("登录成功", "success")
+    //   navigate("/", { replace: true })
+    // },
+    // onError: (err: Error) => toast(err.message || "登录失败", "error"),
+  })
+
+  return (
+    <div className="mx-auto w-full max-w-md">
+      <h5 className="mb-3 text-2xl font-bold tracking-tight text-foreground">
+        账号登录
+      </h5>
+      <p className="lg:text-md text-sm text-muted-foreground">
+        <span className="text-muted-foreground">
+          请输入您的帐户信息以开始管理您的系统
+        </span>
+      </p>
+      <form
+        className="mt-8 space-y-8"
+        onSubmit={(e) => {
+          e.preventDefault()
+          mutation.mutate()
+        }}
+      >
+        <Field
+          label="用户名"
+          inputId="username"
+          Component={UsernameInput}
+          value={username}
+          setValue={setUsername}
+        />
+        <Field
+          label="密码"
+          inputId="password"
+          Component={PasswordInput}
+          value={password}
+          setValue={setPassword}
+        />
+        <Button
+          type="submit"
+          className="mt-2 h-12 w-full rounded-lg"
+          disabled={mutation.isPending}
+        >
+          {mutation.isPending ? "登录中..." : "登录"}
+        </Button>
+      </form>
+    </div>
+  )
+}
+
+type FieldInputProps = {
+  inputId: string
+  className?: string
+  value: string
+  setValue: React.Dispatch<React.SetStateAction<string>>
+}
+
+type FieldInputComponent = React.ComponentType<FieldInputProps>
+
+function Field({
+  label,
+  Component,
+  ...props
+}: Omit<FieldInputProps, "className"> & {
+  label: string
+  Component: FieldInputComponent
+}) {
+  return (
+    <fieldset className="relative flex h-12 items-center rounded-lg border-2 border-border p-0 focus-within:border-primary focus-within:[&_label]:opacity-100">
+      <legend className="ml-2 flex h-0 px-0">
+        <label
+          className="h-fit -translate-y-1/2 px-1 text-sm opacity-50"
+          htmlFor={props.inputId}
+        >
+          {label}
+        </label>
+      </legend>
+      <Component
+        className="h-full rounded-none border-none bg-transparent outline-none autofill:bg-transparent focus-visible:border-none focus-visible:ring-0 [&:-webkit-autofill]:[-webkit-background-clip:text] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--foreground)] [&:-webkit-autofill]:[transition:background-color_9999s_ease-out]"
+        {...props}
+      />
+    </fieldset>
+  )
+}
+
+function UsernameInput({
+  inputId,
+  className,
+  value,
+  setValue,
+}: FieldInputProps) {
+  return (
+    <Input
+      id={inputId}
+      value={value}
+      className={className}
+      onChange={(e) => setValue(e.target.value)}
+      placeholder="请输入用户名"
+      required
+    />
+  )
+}
+
+function PasswordInput({
+  inputId,
+  className,
+  value,
+  setValue,
+}: FieldInputProps) {
+  const [isVisible, setVisile] = React.useState(false)
+
+  return (
+    <>
+      <Input
+        id={inputId}
+        type={isVisible ? "text" : "password"}
+        value={value}
+        className={cn("relative z-1 pe-24", className)}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="请输入登录密码"
+        required
+      />
+      <div className="absolute top-0 right-0 z-2 flex h-11 w-11 items-center justify-center">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            setVisile((v) => !v)
+          }}
+          className="rounded-sm"
+        >
+          {isVisible ? <EyeIcon /> : <EyeOffIcon />}
+        </Button>
+      </div>
+    </>
+  )
+}

apps/web/src/route-tree.gen.ts

@@ -10,13 +10,20 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as AppRouteImport } from './routes/_app'
+import { Route as LoginRouteImport } from './routes/login'
 import { Route as AppIndexRouteImport } from './routes/_app.index'
 import { Route as AppSplatRouteImport } from './routes/_app.$'
+import { Route as AppChatsRouteImport } from './routes/_app.chats'
 
 const AppRoute = AppRouteImport.update({
   id: '/_app',
   getParentRoute: () => rootRouteImport,
 } as any)
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AppIndexRoute = AppIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -27,31 +34,43 @@ const AppSplatRoute = AppSplatRouteImport.update({
   path: '/$',
   getParentRoute: () => AppRoute,
 } as any)
+const AppChatsRoute = AppChatsRouteImport.update({
+  id: '/chats',
+  path: '/chats',
+  getParentRoute: () => AppRoute,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof AppIndexRoute
+  '/login': typeof LoginRoute
   '/$': typeof AppSplatRoute
+  '/chats': typeof AppChatsRoute
 }
 export interface FileRoutesByTo {
+  '/login': typeof LoginRoute
   '/$': typeof AppSplatRoute
+  '/chats': typeof AppChatsRoute
   '/': typeof AppIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/_app': typeof AppRouteWithChildren
+  '/login': typeof LoginRoute
   '/_app/$': typeof AppSplatRoute
+  '/_app/chats': typeof AppChatsRoute
   '/_app/': typeof AppIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/$'
+  fullPaths: '/' | '/login' | '/$' | '/chats'
   fileRoutesByTo: FileRoutesByTo
-  to: '/$' | '/'
+  to: '/login' | '/$' | '/chats' | '/'
-  id: '__root__' | '/_app' | '/_app/$' | '/_app/'
+  id: '__root__' | '/_app' | '/login' | '/_app/$' | '/_app/chats' | '/_app/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   AppRoute: typeof AppRouteWithChildren
+  LoginRoute: typeof LoginRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -63,6 +82,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_app/': {
       id: '/_app/'
       path: '/'
@@ -77,16 +103,25 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppSplatRouteImport
       parentRoute: typeof AppRoute
     }
+    '/_app/chats': {
+      id: '/_app/chats'
+      path: '/chats'
+      fullPath: '/chats'
+      preLoaderRoute: typeof AppChatsRouteImport
+      parentRoute: typeof AppRoute
+    }
   }
 }
 
 interface AppRouteChildren {
   AppSplatRoute: typeof AppSplatRoute
+  AppChatsRoute: typeof AppChatsRoute
   AppIndexRoute: typeof AppIndexRoute
 }
 
 const AppRouteChildren: AppRouteChildren = {
   AppSplatRoute: AppSplatRoute,
+  AppChatsRoute: AppChatsRoute,
   AppIndexRoute: AppIndexRoute,
 }
 
@@ -94,6 +129,7 @@ const AppRouteWithChildren = AppRoute._addFileChildren(AppRouteChildren)
 
 const rootRouteChildren: RootRouteChildren = {
   AppRoute: AppRouteWithChildren,
+  LoginRoute: LoginRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

apps/web/src/routes/_app.chats.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router"
+
+import { ChatsDemoPage } from "@/pages/chats-demo-page"
+
+export const Route = createFileRoute("/_app/chats")({
+  component: ChatsDemoPage,
+})

apps/web/src/routes/login.tsx

@@ -0,0 +1,6 @@
+import { LoginPage } from "@/pages/login-page"
+import { createFileRoute } from "@tanstack/react-router"
+
+export const Route = createFileRoute("/login")({
+  component: LoginPage,
+})