feat(project): init

.env.example

@@ -0,0 +1,7 @@
+IAM_FRONT_BASE_URL=https://iam.example.com
+CMS_SERVICE_BASE_URL=https://cms-api.example.com
+CMS_CLIENT_ID=cms
+CMS_DEFAULT_TENANT_ID=4d779414-da04-49c3-b342-dabf93b6a119
+
+# oauth_clients.redirect_uris 建议只填到 callback 路径（不要包含 next 参数），示例：
+# http://localhost:5031/auth/callback

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+.next
+.env
+.DS_Store
+
+pnpm-lock.yaml

Dockerfile

@@ -0,0 +1,20 @@
+FROM node:20-alpine AS deps
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=6031
+ENV HOSTNAME=0.0.0.0
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+CMD ["node", "server.js"]
+

README.md

@@ -0,0 +1,29 @@
+# cms-front
+
+CMS 前端（业务系统），用于演示按 `iam-service/docs/SSO_INTEGRATION.md` 接入统一登录（iam-front）。
+
+## 本地启动
+
+```bash
+cp .env.example .env
+pnpm install
+pnpm dev
+```
+
+## 本地联调流程
+
+- 未登录访问页面时，middleware 会跳转到 iam-front 的 `/login`（携带 `clientId/tenantId/callback`）
+- 登录成功后会回跳到业务 callback（通常是 `cms-service /auth/callback`），由后端换 token 并写入 cookie，然后再重定向回 cms-front
+- 换取失败会跳转到 `/auth-error` 显示错误信息
+
+开发环境设置 tenantId（写入 tenantId cookie）：
+
+```
+/api/dev/set-tenant?tenantId=你的租户UUID
+```
+
+也可以在 .env 里设置默认租户（仅开发环境生效）：
+
+```
+CMS_DEFAULT_TENANT_ID=你的租户UUID
+```

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.js

@@ -0,0 +1,40 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "standalone",
+  async headers() {
+    const isDev = process.env.NODE_ENV === "development"
+    const csp = [
+      "default-src 'self'",
+      "base-uri 'self'",
+      "frame-ancestors 'none'",
+      "object-src 'none'",
+      "form-action 'self'",
+      "img-src 'self' data:",
+      isDev
+        ? "script-src 'self' 'unsafe-eval' 'unsafe-inline'"
+        : "script-src 'self'",
+      "style-src 'self' 'unsafe-inline'",
+      "connect-src 'self'",
+    ].join("; ")
+
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          { key: "Content-Security-Policy", value: csp },
+          { key: "X-Frame-Options", value: "DENY" },
+          { key: "X-Content-Type-Options", value: "nosniff" },
+          { key: "Referrer-Policy", value: "no-referrer" },
+          {
+            key: "Strict-Transport-Security",
+            value: "max-age=63072000; includeSubDomains; preload",
+          },
+          { key: "Permissions-Policy", value: "geolocation=(), microphone=(), camera=()" },
+        ],
+      },
+    ]
+  },
+}
+
+module.exports = nextConfig
+

package.json

@@ -0,0 +1,34 @@
+{
+    "name": "cms-front",
+    "private": true,
+    "version": "0.1.0",
+    "scripts": {
+        "dev": "next dev -p 6031",
+        "build": "next build",
+        "start": "next start -p 6031",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@radix-ui/react-checkbox": "^1.3.0",
+        "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-slot": "^1.2.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.468.0",
+        "next": "^14.2.25",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "tailwind-merge": "^2.5.4"
+    },
+    "devDependencies": {
+        "@types/node": "^20.17.16",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
+        "autoprefixer": "^10.4.20",
+        "eslint": "^8.57.1",
+        "eslint-config-next": "^14.2.25",
+        "postcss": "^8.5.1",
+        "tailwindcss": "^3.4.17",
+        "typescript": "^5.7.3"
+    }
+}

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+

src/app/api/dev/set-tenant/route.ts

@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from "next/server"
+
+export const runtime = "nodejs"
+
+export async function GET(req: NextRequest) {
+  const tenantId = req.nextUrl.searchParams.get("tenantId")?.trim() ?? ""
+  if (!tenantId) {
+    return NextResponse.json({ message: "tenantId is required" }, { status: 400 })
+  }
+
+  const res = NextResponse.redirect(new URL("/", req.url), 302)
+  res.cookies.set({
+    name: "tenantId",
+    value: tenantId,
+    httpOnly: false,
+    sameSite: "strict",
+    secure: process.env.NODE_ENV === "production",
+    path: "/",
+    maxAge: 30 * 24 * 60 * 60,
+  })
+  return res
+}
+

src/app/auth-error/page.tsx

@@ -0,0 +1,21 @@
+export default function AuthErrorPage({
+  searchParams,
+}: {
+  searchParams?: { message?: string }
+}) {
+  const message = searchParams?.message ?? "认证失败"
+  return (
+    <main className="min-h-screen flex items-center justify-center p-6">
+      <div className="max-w-md text-sm">
+        <div className="font-medium">无法完成登录</div>
+        <div className="mt-2 break-words text-muted-foreground">{message}</div>
+        <div className="mt-4">
+          <a className="underline underline-offset-4" href="/">
+            返回首页重试
+          </a>
+        </div>
+      </div>
+    </main>
+  )
+}
+

src/app/client-required/page.tsx

@@ -0,0 +1,10 @@
+export default function ClientRequiredPage() {
+  return (
+    <main className="min-h-screen flex items-center justify-center p-6">
+      <div className="max-w-md text-sm">
+        缺少 CMS_CLIENT_ID 环境变量，无法发起 SSO 登录跳转。
+      </div>
+    </main>
+  )
+}
+

src/app/globals.css

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.75rem;
+}
+
+body {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+

src/app/layout.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next"
+import "./globals.css"
+
+export const metadata: Metadata = {
+  title: "CMS",
+  description: "CMS Frontend",
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="zh-CN">
+      <body>{children}</body>
+    </html>
+  )
+}
+

src/app/page.tsx

@@ -0,0 +1,22 @@
+import { cookies } from "next/headers"
+
+export default function Home() {
+  const tenantId = cookies().get("tenantId")?.value ?? ""
+  const userId = cookies().get("userId")?.value ?? ""
+
+  return (
+    <main className="min-h-screen p-6">
+      <div className="mx-auto max-w-3xl space-y-4">
+        <div className="text-2xl font-semibold">CMS</div>
+        <div className="rounded-md border border-border p-4 text-sm">
+          <div>tenantId: {tenantId || "-"}</div>
+          <div>userId: {userId || "-"}</div>
+        </div>
+        <div className="text-sm text-muted-foreground">
+          如果未登录，会被中间件重定向到统一登录页。
+        </div>
+      </div>
+    </main>
+  )
+}
+

src/app/tenant-required/page.tsx

@@ -0,0 +1,12 @@
+export default function TenantRequiredPage() {
+  return (
+    <main className="min-h-screen flex items-center justify-center p-6">
+      <div className="max-w-md text-sm">
+        缺少 tenantId（x-tenant-id header 或 tenantId cookie），无法跳转统一登录页。
+        <div className="mt-2">
+          开发环境可访问：/api/dev/set-tenant?tenantId=你的租户UUID
+        </div>
+      </div>
+    </main>
+  )
+}

src/lib/env.ts

@@ -0,0 +1,6 @@
+export function mustGetEnv(name: string): string {
+  const v = process.env[name]
+  if (!v) throw new Error(`${name} is required`)
+  return v
+}
+

src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+

src/middleware.ts

@@ -0,0 +1,108 @@
+import { NextRequest, NextResponse } from "next/server";
+
+function decodeBase64Url(input: string): string {
+  const normalized = input.replace(/-/g, "+").replace(/_/g, "/");
+  const padLen = (4 - (normalized.length % 4)) % 4;
+  const padded = normalized + "=".repeat(padLen);
+  return atob(padded);
+}
+
+function isExpired(jwt: string): boolean {
+  const parts = jwt.split(".");
+  if (parts.length < 2) return true;
+  try {
+    const payload = JSON.parse(decodeBase64Url(parts[1])) as { exp?: number };
+    if (!payload.exp) return true;
+    return Math.floor(Date.now() / 1000) >= payload.exp;
+  } catch {
+    return true;
+  }
+}
+
+export function middleware(req: NextRequest) {
+  if (process.env.NODE_ENV === "production") {
+    const proto = req.headers.get("x-forwarded-proto");
+    if (proto && proto !== "https") {
+      const url = req.nextUrl.clone();
+      url.protocol = "https";
+      return NextResponse.redirect(url, 308);
+    }
+  }
+
+  const cmsServiceBaseUrl = process.env.CMS_SERVICE_BASE_URL ?? "";
+  const clientId = process.env.CMS_CLIENT_ID ?? "";
+
+  const currentUrl = req.nextUrl.clone();
+  const pathname = currentUrl.pathname;
+  if (
+    pathname === "/auth-error" ||
+    pathname === "/tenant-required" ||
+    pathname === "/client-required"
+  ) {
+    return NextResponse.next();
+  }
+
+  const tenantId =
+    req.headers.get("x-tenant-id") ??
+    req.cookies.get("tenantId")?.value ??
+    (process.env.NODE_ENV !== "production"
+      ? (process.env.CMS_DEFAULT_TENANT_ID ?? "")
+      : "");
+
+  const code = currentUrl.searchParams.get("code")?.trim() ?? "";
+  if (code) {
+    if (!cmsServiceBaseUrl) {
+      const url = req.nextUrl.clone();
+      url.pathname = "/client-required";
+      url.search = "";
+      return NextResponse.redirect(url, 302);
+    }
+    const nextUrl = currentUrl.clone();
+    nextUrl.searchParams.delete("code");
+    const callback = `${cmsServiceBaseUrl}/auth/callback?code=${encodeURIComponent(
+      code,
+    )}&tenant_id=${encodeURIComponent(tenantId)}&next=${encodeURIComponent(nextUrl.toString())}`;
+    return NextResponse.redirect(callback, 302);
+  }
+
+  const accessToken = req.cookies.get("accessToken")?.value ?? "";
+
+  if (!accessToken || isExpired(accessToken)) {
+    if (!tenantId) {
+      const url = req.nextUrl.clone();
+      url.pathname = "/tenant-required";
+      url.search = "";
+      return NextResponse.redirect(url, 302);
+    }
+
+    if (!clientId) {
+      const url = req.nextUrl.clone();
+      url.pathname = "/client-required";
+      url.search = "";
+      return NextResponse.redirect(url, 302);
+    }
+
+    const next = encodeURIComponent(currentUrl.toString());
+    if (!cmsServiceBaseUrl) {
+      const url = req.nextUrl.clone();
+      url.pathname = "/client-required";
+      url.search = "";
+      return NextResponse.redirect(url, 302);
+    }
+    const callback = `${cmsServiceBaseUrl}/auth/callback?tenant_id=${encodeURIComponent(
+      tenantId,
+    )}&next=${next}`;
+    const loginUrl = `${process.env.IAM_FRONT_BASE_URL}/login?clientId=${encodeURIComponent(
+      clientId,
+    )}&tenantId=${encodeURIComponent(
+      tenantId,
+    )}&callback=${encodeURIComponent(callback)}`;
+    return NextResponse.redirect(loginUrl, 302);
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/((?!_next/static|_next/image|favicon.ico|api).*)"],
+};

tailwind.config.ts

@@ -0,0 +1,57 @@
+import type { Config } from "tailwindcss"
+
+const config: Config = {
+  darkMode: ["class"],
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config
+

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "es2022"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+