fix(frontend): keep browser API on same-origin rewrites in dev

Document that NEXT_PUBLIC_WAVELET_BACKEND_URL must stay unset for local next dev so axios hits /api/* and Next rewrites proxy to the backend.
2026-10-09 09:06:36 +08:00 · 2026-07-24 16:37:24 +08:00
parent a4588b05e0
commit 9f15f42b47
75 changed files with 5971 additions and 2450 deletions
@@ -4,20 +4,19 @@ import { cn } from '@/lib/utils';
 import { motion } from 'motion/react';
 import { Button } from '@/components/ui/button';
 import { Book, Check, Copy, Terminal } from 'lucide-react';
+import { useTranslations } from 'next-intl';

 export interface DeveloperSectionProps {
  className?: string;
 }

-/**
- * Developer Section - 开发者体验展示
- */
 export const DeveloperSection = React.memo(function DeveloperSection({
  className,
 }: DeveloperSectionProps) {
  const [copied, setCopied] = React.useState(false);
+  const t = useTranslations('home.developerSection');

-  const codeContent = `# 注册用户
+  const codeContent = `# ${t('codeComment')}
 curl -X POST https://api.example.com/api/v1/auth/register \\
  -H "Content-Type: application/json" \\
  -d '{
@@ -32,7 +31,6 @@ curl -X POST https://api.example.com/api/v1/auth/register \\
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
-      // Fallback for older browsers
      const textArea = document.createElement('textarea');
      textArea.value = codeContent;
      textArea.style.position = 'fixed';
@@ -97,7 +95,9 @@ curl -X POST https://api.example.com/api/v1/auth/register \\
              </div>
              <pre className='text-xs sm:text-sm font-mono text-neutral-300 leading-relaxed whitespace-pre-wrap break-all sm:whitespace-pre sm:break-normal overflow-x-auto'>
                <code className='block'>
-                  <span className='text-green-400'># 快速开始</span>
+                  <span className='text-green-400'>
+                    # {t('codeQuickStart')}
+                  </span>
                  {'\n'}
                  <span className='text-purple-400'>curl</span> -X{' '}
                  <span className='text-yellow-400'>POST</span>{' '}
@@ -130,22 +130,18 @@ curl -X POST https://api.example.com/api/v1/auth/register \\
            transition={{ duration: 0.8 }}
          >
            <h2 className='text-3xl md:text-5xl font-bold tracking-tight text-foreground leading-[1.1] mb-6'>
-              开发者友好，
-              <br />
-              极速集成上手
+              {t('heading')}
            </h2>
            <p className='text-muted-foreground text-lg leading-relaxed mb-8'>
-              标准化的 RESTful API 接口，完整的 TypeScript
-              类型定义，详细的文档和 Swagger
-              UI。无论使用什么编程语言，只需几行代码，即可快速集成。
+              {t('description')}
            </p>

            <ul className='space-y-4 mb-8'>
              {[
-                'RESTful API，语义清晰，易于理解',
-                'OpenAPI / Swagger 接口文档',
-                'TypeScript 类型定义，开发友好',
-                '丰富的代码示例和集成指南',
+                t('features.restful'),
+                t('features.swagger'),
+                t('features.typescript'),
+                t('features.examples'),
              ].map((item, i) => (
                <li
                  key={i}
@@ -166,7 +162,7 @@ curl -X POST https://api.example.com/api/v1/auth/register \\
                  className='rounded-full text-xs hover:bg-muted-foreground/10'
                >
                  <Book className='w-3 h-3' />
-                  API 文档
+                  {t('apiDocs')}
                </Button>
              </Link>
            </div>
@@ -2,17 +2,17 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 import Link from 'next/link';
 import { Github, LucideIcon, WavesIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';

 export interface FooterSectionProps {
  className?: string;
 }

-/**
- * Footer Section - 页脚
- */
 export const FooterSection = React.memo(function FooterSection({
  className,
 }: FooterSectionProps) {
+  const t = useTranslations('home.footer');
+
  return (
    <footer
      className={cn(
@@ -32,8 +32,7 @@ export const FooterSection = React.memo(function FooterSection({
              </span>
            </Link>
            <p className='text-muted-foreground text-base leading-relaxed max-w-sm'>
-              通用的、现代化的后台管理系统脚手架。基于 Go + React
-              构建，开箱即用、完整基建、极易扩展。
+              {t('description')}
            </p>
            <div className='flex gap-4 pt-2'>
              <SocialLink
@@ -44,36 +43,46 @@ export const FooterSection = React.memo(function FooterSection({
          </div>

          <div className='lg:col-span-1'>
-            <h3 className='font-semibold text-foreground mb-6'>产品</h3>
+            <h3 className='font-semibold text-foreground mb-6'>
+              {t('product')}
+            </h3>
            <ul className='space-y-4 text-sm text-muted-foreground'>
              <li>
-                <FooterLink href='/home'>仪表盘</FooterLink>
+                <FooterLink href='/home'>{t('dashboard')}</FooterLink>
              </li>
              <li>
-                <FooterLink href='/settings'>个人设置</FooterLink>
-              </li>
-            </ul>
-          </div>
-
-          <div className='lg:col-span-1'>
-            <h3 className='font-semibold text-foreground mb-6'>开发</h3>
-            <ul className='space-y-4 text-sm text-muted-foreground'>
-              <li>
-                <FooterLink href='/docs/how-to-use'>快速开始</FooterLink>
-              </li>
-              <li>
-                <FooterLink href='/docs/api'>API 文档</FooterLink>
-              </li>
-              <li>
-                <FooterLink href='https://github.com/Rain-kl/Wavelet'>
-                  源代码
+                <FooterLink href='/settings'>
+                  {t('personalSettings')}
                </FooterLink>
              </li>
            </ul>
          </div>

          <div className='lg:col-span-1'>
-            <h3 className='font-semibold text-foreground mb-6'>社区</h3>
+            <h3 className='font-semibold text-foreground mb-6'>
+              {t('development')}
+            </h3>
+            <ul className='space-y-4 text-sm text-muted-foreground'>
+              <li>
+                <FooterLink href='/docs/how-to-use'>
+                  {t('quickStart')}
+                </FooterLink>
+              </li>
+              <li>
+                <FooterLink href='/docs/api'>{t('apiDocs')}</FooterLink>
+              </li>
+              <li>
+                <FooterLink href='https://github.com/Rain-kl/Wavelet'>
+                  {t('sourceCode')}
+                </FooterLink>
+              </li>
+            </ul>
+          </div>
+
+          <div className='lg:col-span-1'>
+            <h3 className='font-semibold text-foreground mb-6'>
+              {t('community')}
+            </h3>
            <ul className='space-y-4 text-sm text-muted-foreground'>
              <li>
                <FooterLink href='https://github.com/Rain-kl/Wavelet/issues'>
@@ -82,7 +91,7 @@ export const FooterSection = React.memo(function FooterSection({
              </li>
              <li>
                <FooterLink href='https://github.com/Rain-kl/Wavelet/discussions'>
-                  讨论
+                  {t('discussions')}
                </FooterLink>
              </li>
            </ul>
@@ -96,13 +105,13 @@ export const FooterSection = React.memo(function FooterSection({
              href='/docs/privacy-policy'
              className='hover:text-foreground transition-colors'
            >
-              隐私政策
+              {t('privacyPolicy')}
            </Link>
            <Link
              href='/docs/terms-of-service'
              className='hover:text-foreground transition-colors'
            >
-              服务条款
+              {t('termsOfService')}
            </Link>
          </div>
        </div>
@@ -4,17 +4,17 @@ import { motion } from 'motion/react';
 import { ArrowRight, CreditCard, Globe, Shield, Zap } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
+import { useTranslations } from 'next-intl';

 export interface HeroSectionProps {
  className?: string;
 }

-/**
- * Hero Section - 首页 Hero 展示
- */
 export const HeroSection = React.memo(function HeroSection({
  className,
 }: HeroSectionProps) {
+  const t = useTranslations('home.hero');
+
  return (
    <section className={cn('w-full', className)}>
      <motion.div
@@ -57,9 +57,9 @@ export const HeroSection = React.memo(function HeroSection({
              }}
              className='text-sm md:text-base text-muted-foreground max-w-xl leading-relaxed mb-10'
            >
-              通用的、现代化的后台管理系统脚手架
+              {t('subtitle')}
              <br className='hidden md:block' />
-              开箱即用、完整基建、极易扩展，助您快速构建应用。
+              {t('subtitleLine2')}
            </motion.p>

            <motion.div
@@ -78,7 +78,7 @@ export const HeroSection = React.memo(function HeroSection({
                  size='lg'
                  className='w-full rounded-full bg-primary hover:bg-primary/90 font-medium transition-all active:scale-95'
                >
-                  立即开始
+                  {t('getStarted')}
                  <ArrowRight className='size-4' />
                </Button>
              </Link>
@@ -89,7 +89,7 @@ export const HeroSection = React.memo(function HeroSection({
                  size='lg'
                  className='w-full rounded-full font-medium active:scale-95'
                >
-                  了解更多
+                  {t('learnMore')}
                </Button>
              </Link>
            </motion.div>
@@ -103,15 +103,15 @@ export const HeroSection = React.memo(function HeroSection({
            >
              <div className='flex items-center gap-2'>
                <Zap className='w-5 h-5 text-yellow-500' />
-                <span>开箱即用</span>
+                <span>{t('features.readyToUse')}</span>
              </div>
              <div className='flex items-center gap-2'>
                <Globe className='w-5 h-5 text-blue-500' />
-                <span>高度可扩展</span>
+                <span>{t('features.highlyExtensible')}</span>
              </div>
              <div className='flex items-center gap-2'>
                <Shield className='w-5 h-5 text-green-500' />
-                <span>工业级基建</span>
+                <span>{t('features.industrialGrade')}</span>
              </div>
            </motion.div>
          </div>