R89 极简化登录与移动入口

client/src/layouts/AppShellLayout.tsx

@@ -1,11 +1,12 @@
 import { useEffect } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
 import { ErrorBoundary } from "../components/common/ErrorBoundary";
 import { MobileBottomNav } from "../components/mobile/MobileBottomNav";
 import { Sidebar } from "../components/navigation/Sidebar";
 import { Topbar } from "../components/navigation/Topbar";
 import { resolvePageMeta } from "../features/navigation/schema";
 import { writeRecentVisit } from "../lib/recentVisits";
+import { shouldPreferMobileWorkplace } from "../lib/runtimeContext";
 
 export function AppShellLayout() {
   const location = useLocation();
@@ -19,6 +20,10 @@ export function AppShellLayout() {
     writeRecentVisit(pathname, resolvePageMeta(pathname).title);
   }, [location.pathname]);
 
+  if (location.pathname === "/portal" && shouldPreferMobileWorkplace()) {
+    return <Navigate to="/mobile" replace />;
+  }
+
   return (
     <div className="relative flex min-h-screen overflow-hidden bg-[var(--color-bg-canvas)]">
       <div className="pointer-events-none fixed inset-0 -z-10 bg-[radial-gradient(circle_at_12%_8%,rgba(0,57,138,0.10),transparent_28rem),radial-gradient(circle_at_90%_12%,rgba(19,168,184,0.12),transparent_32rem)]" />

client/src/layouts/AuthLayout.tsx

@@ -3,33 +3,18 @@ import { AppBrand } from "../components/shell/AppBrand";
 
 export function AuthLayout() {
   return (
-    <div className="min-h-screen bg-[radial-gradient(circle_at_14%_0%,rgba(0,57,138,0.12),transparent_32rem),radial-gradient(circle_at_86%_8%,rgba(19,168,184,0.12),transparent_30rem),linear-gradient(180deg,#ffffff_0%,#f5f7f8_42%,#eef2f6_100%)] px-6 py-10 lg:px-10 lg:py-14">
-      <div className="mx-auto grid min-h-[calc(100vh-5rem)] max-w-6xl items-center gap-8 lg:grid-cols-[minmax(0,1.05fr),minmax(420px,0.95fr)]">
-        <section className="hidden overflow-hidden rounded-[2rem] border border-slate-200 bg-white/82 p-10 shadow-sm backdrop-blur lg:block">
+    <div className="min-h-screen bg-slate-50 px-4 py-8 sm:px-6 lg:px-10">
+      <div className="mx-auto flex min-h-[calc(100vh-4rem)] max-w-5xl items-center justify-center">
+        <section className="hidden w-full max-w-sm lg:block">
           <AppBrand />
-          <div className="mt-8 space-y-6">
-            <div>
-              <div className="text-xs font-bold uppercase tracking-[0.2em] text-primary">统一入口</div>
-              <h1 className="mt-2 text-4xl font-semibold tracking-tight text-slate-900">让员工先找到今天要做什么</h1>
-              <p className="mt-3 max-w-xl text-base leading-7 text-slate-600">
-                企业微信负责进入和提醒，真正的审批、项目、周报与留痕都在 OA 内完成。
-              </p>
-            </div>
-
-            <div className="grid gap-4 md:grid-cols-2">
-              <div className="surface-muted px-5 py-5">
-                <div className="text-sm font-semibold text-slate-900">主路径稳定</div>
-                <div className="mt-2 text-sm leading-6 text-slate-600">Portal、团队、请假、报销、资产、周报、待办、公告、项目保持稳定结构。</div>
-              </div>
-              <div className="surface-muted px-5 py-5">
-                <div className="text-sm font-semibold text-slate-900">入口可回退</div>
-                <div className="mt-2 text-sm leading-6 text-slate-600">企业微信免登失败时仍可使用账号密码，不让员工猜测下一步。</div>
-              </div>
-            </div>
+          <div className="mt-8">
+            <div className="text-xs font-bold uppercase tracking-[0.2em] text-primary">统一入口</div>
+            <h1 className="mt-3 text-4xl font-semibold tracking-tight text-slate-900">海音达 OA</h1>
+            <p className="mt-4 text-base leading-7 text-slate-600">打开后直接处理今天的审批、报销和团队事项。</p>
           </div>
         </section>
 
-        <section className="mx-auto w-full max-w-xl">
+        <section className="w-full max-w-md lg:ml-20">
           <Outlet />
         </section>
       </div>

client/src/lib/runtimeContext.ts

@@ -20,3 +20,19 @@ export function isWecomWebView(userAgent = readUserAgent()) {
 export function isEnterpriseMessengerContainer(userAgent = readUserAgent()) {
   return ENTERPRISE_IM_PATTERN.test(userAgent);
 }
+
+export function isTouchSmallScreen() {
+  if (!canUseWindow()) {
+    return false;
+  }
+
+  return window.navigator.maxTouchPoints > 0 && matchesMedia("(max-width: 768px)");
+}
+
+export function shouldPreferMobileWorkplace() {
+  return isEnterpriseMessengerContainer() || isTouchSmallScreen();
+}
+
+export function resolveDefaultWorkspacePath() {
+  return shouldPreferMobileWorkplace() ? "/mobile" : "/portal";
+}

client/src/pages/LoginPage.tsx

@@ -9,19 +9,18 @@ import { getDeviceFingerprint } from "../auth/deviceFingerprint";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
-import { isWecomWebView } from "../lib/runtimeContext";
+import { isWecomWebView, resolveDefaultWorkspacePath } from "../lib/runtimeContext";
 import {
   buildWecomLoginUrl,
   resolveWecomBindNotice,
-  resolveWecomEntryStatus,
   resolveWecomLoginNotice,
   type WecomNotice,
 } from "../lib/wecomEntry";
 
-function resolveRedirect(searchParams: URLSearchParams) {
+function resolveRedirect(searchParams: URLSearchParams, fallback: string) {
   const redirect = searchParams.get("redirect");
   if (!redirect || !redirect.startsWith("/") || redirect.startsWith("//")) {
-    return "/portal";
+    return fallback;
   }
   return redirect;
 }
@@ -45,9 +44,11 @@ export function LoginPage() {
   const [password, setPassword] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState("");
+  const [passwordFallbackOpen, setPasswordFallbackOpen] = useState(false);
 
-  const redirectTo = resolveRedirect(searchParams);
   const isWecomContext = isWecomWebView();
+  const defaultWorkspacePath = resolveDefaultWorkspacePath();
+  const redirectTo = resolveRedirect(searchParams, defaultWorkspacePath);
 
   const ssoProvidersQuery = useQuery({
     queryKey: ["auth", "sso-providers"],
@@ -63,14 +64,15 @@ export function LoginPage() {
   });
 
   const wecomConfig = wecomConfigQuery.data;
-  const wecomStatus = resolveWecomEntryStatus(wecomConfig);
-  const wecomEntry = wecomConfig?.entryEnabled ? wecomConfig : null;
-  const primaryMode = isWecomContext && wecomEntry?.loginUrl ? "wecom" : "password";
+  const wecomEntry = wecomConfig?.entryEnabled && wecomConfig.loginUrl ? wecomConfig : null;
   const wecomNotice = useMemo(
     () => resolveWecomBindNotice(searchParams.get("wecomBind")) ?? resolveWecomLoginNotice(searchParams.get("wecom")),
     [searchParams],
   );
 
+  const showWecomPrimary = isWecomContext;
+  const showPasswordPanel = !showWecomPrimary || Boolean(wecomNotice) || passwordFallbackOpen || (showWecomPrimary && wecomConfig && !wecomEntry);
+
   async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setSubmitting(true);
@@ -87,7 +89,7 @@ export function LoginPage() {
       if (isApiError(err)) {
         setError(mapApiErrorMessage(err.code, err.details, err.message));
       } else if (err instanceof TypeError) {
-        setError("无法连接后端服务，请确认 server 已启动（http://127.0.0.1:3000）。");
+        setError("无法连接后端服务，请稍后再试或联系管理员。");
       } else {
         setError("登录失败，请稍后重试。");
       }
@@ -103,19 +105,9 @@ export function LoginPage() {
     window.location.assign(buildWecomLoginUrl(wecomEntry.loginUrl, redirectTo, getDeviceFingerprint()));
   }
 
-  function renderPasswordPanel(testId: string, primary: boolean) {
+  function renderPasswordPanel(testId: string) {
     return (
-      <div className="space-y-4 rounded-[1.5rem] border border-slate-200 bg-white p-6 shadow-sm" data-testid={testId}>
-        <div>
-          <div className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">{primary ? "推荐入口" : "回退入口"}</div>
-          <h2 className="mt-2 text-xl font-semibold tracking-tight text-slate-900">使用账号密码登录</h2>
-          <p className="mt-2 text-sm leading-6 text-slate-600">
-            {primary
-              ? "适合桌面浏览器直接登录；若是首次开通，也可使用管理员转交的一次性口令进入。"
-              : "企业微信免登失败、未绑定或超时时，可改用账号密码或一次性口令继续进入。"}
-          </p>
-        </div>
-
+      <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" data-testid={testId}>
         <form className="space-y-4" onSubmit={handleSubmit}>
           <div className="space-y-2">
             <Label htmlFor="login-identifier">账号</Label>
@@ -136,7 +128,7 @@ export function LoginPage() {
               data-testid="login-password"
               id="login-password"
               onChange={(event) => setPassword(event.target.value)}
-              placeholder="请输入密码或一次性口令"
+              placeholder="请输入密码"
               type="password"
               value={password}
             />
@@ -144,8 +136,8 @@ export function LoginPage() {
 
           {error ? <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600">{error}</div> : null}
 
-          <Button data-testid="login-submit" className="w-full" disabled={submitting} type="submit" variant={primary ? "default" : "secondary"}>
-            {submitting ? "登录中..." : "登录并进入工作台"}
+          <Button data-testid="login-submit" className="w-full" disabled={submitting} type="submit">
+            {submitting ? "登录中..." : "登录"}
           </Button>
         </form>
       </div>
@@ -153,21 +145,16 @@ export function LoginPage() {
   }
 
   return (
-    <div className="card-std overflow-hidden border-slate-200 p-0 shadow-md">
-      <div className="border-b border-slate-200 bg-[radial-gradient(circle_at_8%_0%,rgba(0,57,138,0.12),transparent_16rem),linear-gradient(135deg,#ffffff,#e6ecf4)] px-6 py-6 sm:px-8 sm:py-7">
+    <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm sm:p-7">
+      <div className="space-y-2">
         <div className="text-xs font-bold uppercase tracking-[0.2em] text-primary">统一入口</div>
-        <h1 className="mt-2 text-3xl font-semibold tracking-tight text-slate-900">登录海音达工作台</h1>
-        <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-600">
-          企业微信负责进入与提醒，真正的审批、项目、周报和团队留痕都在海音达工作台内完成。
+        <h1 className="text-2xl font-semibold tracking-tight text-slate-900">海音达 OA</h1>
+        <p className="text-sm leading-6 text-slate-600">
+          {showWecomPrimary ? "从企业微信进入，直接打开移动工作台。" : "使用账号密码进入工作台。"}
         </p>
-        <div className="mt-4 rounded-2xl border border-slate-200 bg-white/90 px-4 py-3 text-sm text-slate-600">
-          {isWecomContext
-            ? "当前在企业微信中打开，推荐直接使用企业微信进入工作台；失败时可随时回退到账号密码登录。"
-            : "当前为浏览器场景，推荐直接使用账号密码登录；企业微信入口会作为次级入口提供。"}
-        </div>
       </div>
 
-      <div className="space-y-5 px-6 py-6 sm:px-8 sm:py-7">
+      <div className="mt-6 space-y-4">
         {wecomNotice ? (
           <div className={`rounded-2xl border px-4 py-3 text-sm ${noticeClasses(wecomNotice.tone)}`} data-testid="login-wecom-notice">
             <div className="font-medium">{wecomNotice.title}</div>
@@ -175,63 +162,50 @@ export function LoginPage() {
           </div>
         ) : null}
 
-        <div className="grid gap-4">
-          {primaryMode === "wecom" && wecomEntry?.loginUrl ? (
-            <div className="rounded-[1.5rem] border border-primary/20 bg-primary/5 p-6" data-testid="login-wecom-primary-panel">
-              <div className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">推荐入口</div>
-              <h2 className="mt-2 text-xl font-semibold tracking-tight text-slate-900">使用企业微信进入工作台</h2>
-              <p className="mt-2 text-sm leading-6 text-slate-600">当前是企业微信场景，优先使用免登入口；若未绑定或回调失效，仍可切换为账号密码登录。</p>
-              <Button className="mt-5 w-full" data-testid="wecom-entry-primary" type="button" onClick={handleWecomLogin}>
-                使用企业微信进入工作台
-              </Button>
-            </div>
-          ) : null}
-
-          {renderPasswordPanel(
-            primaryMode === "password" ? "login-password-primary-panel" : "login-password-secondary-panel",
-            primaryMode === "password",
-          )}
-
-          {((primaryMode !== "wecom" && wecomEntry?.loginUrl) || oidcProvider) ? (
-            <div className="rounded-[1.5rem] border border-slate-200 bg-slate-50/70 p-6">
-              <div className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">补充入口</div>
-              <h2 className="mt-2 text-lg font-semibold text-slate-900">其他进入方式</h2>
-              <p className="mt-2 text-sm leading-6 text-slate-600">入口失败时请优先选择可理解、可回退的方式继续进入。</p>
-              <div className="mt-4 grid gap-3">
-                {primaryMode !== "wecom" && wecomEntry?.loginUrl ? (
-                  <Button className="w-full" data-testid="wecom-entry-secondary" type="button" variant="secondary" onClick={handleWecomLogin}>
-                    使用企业微信进入工作台
-                  </Button>
-                ) : null}
-
-                {oidcProvider ? (
-                  <Button
-                    className="w-full"
-                    type="button"
-                    variant="secondary"
-                    onClick={() => {
-                      window.location.assign(`${oidcProvider.loginUrl}?returnTo=${encodeURIComponent(redirectTo)}`);
-                    }}
-                  >
-                    使用{oidcProvider.label}
-                  </Button>
-                ) : null}
+        {showWecomPrimary ? (
+          <div className="rounded-2xl border border-primary/20 bg-primary/5 p-5" data-testid="login-wecom-primary-panel">
+            <Button className="w-full" data-testid="wecom-entry-primary" disabled={!wecomEntry} type="button" onClick={handleWecomLogin}>
+              {wecomConfigQuery.isLoading ? "正在准备入口..." : "进入工作台"}
+            </Button>
+            {wecomConfig && !wecomEntry ? (
+              <div className="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm leading-6 text-amber-700">
+                企业微信入口暂不可用，请使用账号密码登录。
               </div>
-            </div>
-          ) : null}
-        </div>
+            ) : null}
+            {!showPasswordPanel ? (
+              <button
+                type="button"
+                className="mt-4 w-full text-sm font-medium text-primary"
+                onClick={() => setPasswordFallbackOpen(true)}
+              >
+                使用账号密码登录
+              </button>
+            ) : null}
+          </div>
+        ) : null}
 
-        <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
-          <div className="font-medium text-slate-900">企业微信入口状态：{wecomStatus.label}</div>
-          <div className="mt-1 leading-6">{wecomStatus.description}</div>
-          {wecomStatus.reasonLabels.length ? (
-            <ul className="mt-2 list-disc space-y-1 pl-5 text-xs text-slate-500">
-              {wecomStatus.reasonLabels.map((label) => (
-                <li key={label}>{label}</li>
-              ))}
-            </ul>
-          ) : null}
-        </div>
+        {showPasswordPanel
+          ? renderPasswordPanel(showWecomPrimary ? "login-password-secondary-panel" : "login-password-primary-panel")
+          : null}
+
+        {!showWecomPrimary && wecomEntry ? (
+          <Button className="w-full" data-testid="wecom-entry-secondary" type="button" variant="secondary" onClick={handleWecomLogin}>
+            企业微信登录
+          </Button>
+        ) : null}
+
+        {!showWecomPrimary && oidcProvider ? (
+          <Button
+            className="w-full"
+            type="button"
+            variant="secondary"
+            onClick={() => {
+              window.location.assign(`${oidcProvider.loginUrl}?returnTo=${encodeURIComponent(redirectTo)}`);
+            }}
+          >
+            使用{oidcProvider.label}
+          </Button>
+        ) : null}
       </div>
     </div>
   );

client/src/router/guards.tsx

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from "react";
 import { Navigate, useLocation } from "react-router-dom";
 import { useAuth } from "../auth/AuthContext";
 import { hasAnyPermission } from "../auth/permissions";
+import { resolveDefaultWorkspacePath } from "../lib/runtimeContext";
 import { isOfflineSnapshotAllowedPath } from "../pwa";
 
 function FullPageLoading() {
@@ -55,7 +56,7 @@ export function GuestOnly({ children }: PropsWithChildren) {
     if (mustChangePassword) {
       return <Navigate to="/change-password" replace />;
     }
-    return <Navigate to="/dashboard" replace />;
+    return <Navigate to={resolveDefaultWorkspacePath()} replace />;
   }
 
   return <>{children}</>;

client/tests/e2e/visual-shell.spec.ts

@@ -14,7 +14,7 @@ test.describe("visual shell", () => {
     await page.setViewportSize({ width: 1440, height: 1024 });
     await page.goto("/login");
 
-    await expect(page.getByRole("heading", { name: "登录海音达工作台" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "海音达 OA" })).toBeVisible();
     await expect(page.getByText("统一入口").first()).toBeVisible();
     await expect(page.getByTestId("login-password-primary-panel")).toBeVisible();