Complete Story 1-1 and fix TypeScript issues

Add TypeScript strict mode and typecheck tasks to monorepo infrastructure. Fix E2E test @payload-config alias and frontend TypeScript errors. - Add tsconfig.json to backend with strict mode and path aliases - Add typecheck task to Turborepo and all packages - Fix @payload-config alias for E2E tests and dev server - Add setToken method to AuthService for middleware use - Fix implicit any types in Footer.astro and Header.astro - Remove invalid typescript config from astro.config.mjs
2026-01-31 17:12:47 +08:00
parent d0e8c3bcff
commit 0846318d6e
15 changed files with 137 additions and 61 deletions
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -20,17 +20,20 @@
    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
    "test": "pnpm run test:int && pnpm run test:e2e",
    "test:e2e": "cross-env NODE_OPTIONS=\"--no-deprecation --no-experimental-strip-types\" pnpm exec playwright test --config=playwright.config.ts",
-    "test:int": "cross-env NODE_OPTIONS=--no-deprecation vitest run --config ./vitest.config.mts"
+    "test:int": "cross-env NODE_OPTIONS=--no-deprecation vitest run --config ./vitest.config.mts",
+    "test:load": "k6 run tests/k6/public-browsing.js",
+    "test:load:all": "k6 run tests/k6/public-browsing.js && k6 run tests/k6/api-performance.js",
+    "test:load:admin": "k6 run tests/k6/admin-operations.js",
+    "test:load:api": "k6 run tests/k6/api-performance.js",
+    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
-    "@opennextjs/cloudflare": "^1.10.1",
+    "@enchun/shared": "workspace:*",
    "@payloadcms/admin-bar": "3.59.1",
    "@payloadcms/db-mongodb": "3.59.1",
    "@payloadcms/email-resend": "3.59.1",
    "@payloadcms/live-preview-react": "3.59.1",
    "@payloadcms/next": "3.59.1",
-    "@payloadcms/payload-cloud": "3.59.1",
-    "@payloadcms/plugin-form-builder": "3.59.1",
    "@payloadcms/plugin-nested-docs": "3.59.1",
    "@payloadcms/plugin-redirects": "3.59.1",
    "@payloadcms/plugin-search": "3.59.1",
@@ -58,8 +61,7 @@
    "react-hook-form": "7.45.4",
    "sharp": "0.34.2",
    "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7",
-    "@enchun/shared": "workspace:*"
+    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3.2.0",
--- a/apps/backend/src/Footer/hooks/revalidateFooter.ts
+++ b/apps/backend/src/Footer/hooks/revalidateFooter.ts
@@ -1,13 +1,27 @@
 import type { GlobalAfterChangeHook } from 'payload'

 import { revalidateTag } from 'next/cache'
+import { auditLogger } from '@/utilities/auditLogger'

-export const revalidateFooter: GlobalAfterChangeHook = ({ doc, req: { payload, context } }) => {
+export const revalidateFooter: GlobalAfterChangeHook = async ({ doc, req }) => {
+  const { payload, context } = req
  if (!context.disableRevalidate) {
    payload.logger.info(`Revalidating footer`)

    revalidateTag('global_footer')
  }

+  // 記錄 Footer 變更
+  if (req.user) {
+    await auditLogger(req, {
+      action: 'update',
+      collection: 'global_footer',
+      userId: req.user.id,
+      userName: req.user.name as string,
+      userEmail: req.user.email as string,
+      userRole: req.user.role as string,
+    })
+  }
+
  return doc
 }
--- a/apps/backend/src/Header/hooks/revalidateHeader.ts
+++ b/apps/backend/src/Header/hooks/revalidateHeader.ts
@@ -1,13 +1,27 @@
 import type { GlobalAfterChangeHook } from 'payload'

 import { revalidateTag } from 'next/cache'
+import { auditLogger } from '@/utilities/auditLogger'

-export const revalidateHeader: GlobalAfterChangeHook = ({ doc, req: { payload, context } }) => {
+export const revalidateHeader: GlobalAfterChangeHook = async ({ doc, req }) => {
+  const { payload, context } = req
  if (!context.disableRevalidate) {
    payload.logger.info(`Revalidating header`)

    revalidateTag('global_header')
  }

+  // 記錄 Header 變更
+  if (req.user) {
+    await auditLogger(req, {
+      action: 'update',
+      collection: 'global_header',
+      userId: req.user.id,
+      userName: req.user.name as string,
+      userEmail: req.user.email as string,
+      userRole: req.user.role as string,
+    })
+  }
+
  return doc
 }
--- a/apps/backend/tsconfig.json
+++ b/apps/backend/tsconfig.json
@@ -1,51 +1,55 @@
 {
  "compilerOptions": {
-    "strict": true,
-    "baseUrl": ".",
-    "esModuleInterop": true,
    "target": "ES2022",
+    "module": "ESNext",
    "lib": [
-      "DOM",
-      "DOM.Iterable",
      "ES2022"
    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "noEmit": true,
-    "incremental": true,
-    "jsx": "preserve",
-    "module": "esnext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
-    "sourceMap": true,
-    "isolatedModules": true,
+    "allowJs": false,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@payload-config": [
+        "./src/payload.config"
+      ]
+    },
    "plugins": [
      {
        "name": "next"
      }
    ],
-    "paths": {
-      "@payload-config": [
-        "./src/payload.config.ts"
-      ],
-      "react": [
-        "./node_modules/@types/react"
-      ],
-      "@/*": [
-        "./src/*"
-      ],
-    }
+    "noEmit": true,
+    "incremental": true,
+    "isolatedModules": true
  },
  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "redirects.js",
-    "next-env.d.ts",
+    "src/**/*",
    "next.config.js",
-    "next-sitemap.config.cjs"
+    ".next/types/**/*.ts"
  ],
  "exclude": [
-    "node_modules"
-  ],
+    "node_modules",
+    ".next",
+    "dist",
+    "tests/**/*",
+    "**/__tests__/**/*",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "vitest.config.mts",
+    "playwright.config.ts"
+  ]
 }
--- a/apps/backend/vitest.config.mts
+++ b/apps/backend/vitest.config.mts
@@ -1,9 +1,15 @@
 import { defineConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import path from 'node:path'

 export default defineConfig({
  plugins: [tsconfigPaths(), react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
  test: {
    environment: 'jsdom',
    setupFiles: ['./vitest.setup.ts'],
--- a/apps/frontend/astro.config.mjs
+++ b/apps/frontend/astro.config.mjs
@@ -6,7 +6,13 @@ import tailwindcss from "@tailwindcss/vite";
 // https://astro.build/config
 export default defineConfig({
  output: "server",
-  adapter: cloudflare(),
+  adapter: cloudflare({
+    imageService: 'passthrough',
+    platformProxy: {
+      enabled: true,
+      configPath: './wrangler.jsonc',
+    },
+  }),
  vite: {
    plugins: [tailwindcss()],
    server: {
@@ -19,7 +25,4 @@ export default defineConfig({
      },
    },
  },
-  typescript: {
-    strict: true,
-  },
 });
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -9,18 +9,21 @@
    "build": "astro build",
    "preview": "astro preview",
    "check": "astro check",
-    "deploy": "wrangler pages deploy dist"
+    "typecheck": "astro check",
+    "deploy": "wrangler deploy"
  },
  "dependencies": {
-    "@astrojs/cloudflare": "^12.6.9",
+    "@astrojs/cloudflare": "^12.6.12",
    "@tailwindcss/vite": "^4.1.14",
-    "astro": "^5.14.1",
+    "astro": "6.0.0-beta.1",
    "better-auth": "^1.3.13"
  },
  "devDependencies": {
+    "@astrojs/check": "^0.9.6",
    "@tailwindcss/typography": "^0.5.19",
    "autoprefixer": "^10.4.0",
    "tailwindcss": "^4.1.14",
-    "typescript": "^5.4.0"
+    "typescript": "^5.7.3",
+    "wrangler": "^4.59.2"
  }
 }
--- a/apps/frontend/src/components/Footer.astro
+++ b/apps/frontend/src/components/Footer.astro
@@ -51,6 +51,13 @@ import { Image } from 'astro:assets';

 <script>
  // Client-side data fetching for footer
+  interface LinkItem {
+    link?: {
+      url?: string;
+      label?: string;
+    };
+  }
+
  async function loadFooterData() {
    try {
      console.log('Fetching footer data...');
@@ -61,7 +68,7 @@ import { Image } from 'astro:assets';
      // Update marketing solutions
      const marketingUl = document.getElementById('marketing-solutions');
      if (marketingUl && data.navItems?.[0]?.childNavItems) {
-        const links = data.navItems[0].childNavItems.map(item =>
+        const links = data.navItems[0].childNavItems.map((item: LinkItem) =>
          `<li><a href="${item.link?.url || '#'}" class="font-normal text-[var(--color-st-tropaz)] hover:text-[var(--color-dove-gray)] transition-colors">${item.link?.label}</a></li>`
        ).join('');
        marketingUl.innerHTML = links;
@@ -70,7 +77,7 @@ import { Image } from 'astro:assets';
      // Update marketing articles (行銷放大鏡)
      const articlesUl = document.getElementById('marketing-articles');
      if (articlesUl && data.navItems?.[1]?.childNavItems) {
-        const links = data.navItems[1].childNavItems.map(item =>
+        const links = data.navItems[1].childNavItems.map((item: LinkItem) =>
          `<li><a href="${item.link?.url || '#'}" class="font-normal text-[var(--color-st-tropaz)] hover:text-[var(--color-dove-gray)] transition-colors">${item.link?.label}</a></li>`
        ).join('');
        articlesUl.innerHTML = links;
--- a/apps/frontend/src/components/Header.astro
+++ b/apps/frontend/src/components/Header.astro
@@ -135,7 +135,7 @@ import { Image } from "astro:assets";
            mobileNav.innerHTML = "";

            // Populate desktop navigation
-            navItems.forEach((item) => {
+            navItems.forEach((item: NavItem) => {
                const linkHtml = createNavLink(item);
                const li = document.createElement("li");
                li.innerHTML = linkHtml;
@@ -143,7 +143,7 @@ import { Image } from "astro:assets";
            });

            // Populate mobile navigation
-            navItems.forEach((item) => {
+            navItems.forEach((item: NavItem) => {
                const linkHtml = createNavLink(item)
                    .replace("px-3 py-2", "block px-3 py-2")
                    .replace(
--- a/apps/frontend/src/middleware.ts
+++ b/apps/frontend/src/middleware.ts
@@ -15,7 +15,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
    }

    // Validate token
-    authService.token = token;
+    authService.setToken(token);
    const user = await authService.getCurrentUser();

    if (!user) {
--- a/apps/frontend/src/services/auth.ts
+++ b/apps/frontend/src/services/auth.ts
@@ -61,6 +61,7 @@ export class AuthService {
  }

  async logout(): Promise<void> {
+    const tokenForRequest = this.token;
    this.token = null;
    if (typeof window !== 'undefined') {
      localStorage.removeItem('payload-token');
@@ -68,17 +69,25 @@ export class AuthService {

    // Optional: Call logout endpoint
    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+      if (tokenForRequest) {
+        headers['Authorization'] = `Bearer ${tokenForRequest}`;
+      }
      await fetch(`${PAYLOAD_URL}/api/users/logout`, {
        method: 'POST',
-        headers: {
-          ...(this.token && { 'Authorization': `Bearer ${this.token}` }),
-        },
+        headers,
      });
    } catch (error) {
      // Ignore logout errors
    }
  }

+  setToken(token: string): void {
+    this.token = token;
+  }
+
  async getCurrentUser(): Promise<User | null> {
    if (!this.token) return null;

--- a/apps/frontend/tsconfig.json
+++ b/apps/frontend/tsconfig.json
@@ -5,5 +5,6 @@
    "paths": {
      "@shared/*": ["../packages/shared/src/*"]
    }
-  }
+  },
+  "exclude": ["node_modules", "dist", "tests"]
 }
--- a/package.json
+++ b/package.json
@@ -8,11 +8,13 @@
    "build": "turbo run build",
    "lint": "turbo run lint",
    "test": "turbo run test",
+    "typecheck": "turbo run typecheck",
    "bmad:refresh": "bmad-method install -f -i codex",
    "bmad:list": "bmad-method list:agents",
    "bmad:validate": "bmad-method validate"
  },
  "devDependencies": {
+    "eslint-plugin-react-hooks": "^7.0.1",
    "turbo": "^2.0.5"
  },
  "pnpm": {
--- a/packages/shared/tsconfig.json
+++ b/packages/shared/tsconfig.json
@@ -5,10 +5,17 @@
    "declarationDir": "dist",
    "emitDeclarationOnly": true,
    "module": "ES2020",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
    "target": "ES2020",
    "rootDir": "src",
-    "outDir": "dist"
+    "outDir": "dist",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
 }
--- a/turbo.json
+++ b/turbo.json
@@ -18,6 +18,10 @@
    },
    "check": {
      "outputs": []
+    },
+    "typecheck": {
+      "dependsOn": ["^typecheck"],
+      "outputs": []
    }
  }
 }