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.

frontend/app/(main)/admin/demo/page.tsx

@@ -4,6 +4,7 @@
 'use client';
 
 import * as React from 'react';
+import { useTranslations } from 'next-intl';
 import { Code } from 'lucide-react';
 
 import {
@@ -21,6 +22,7 @@ import { TableTab } from './tabs/table-tab';
 import { ControlsTab } from './tabs/controls-tab';
 
 export default function HeaderDemoPage() {
+  const t = useTranslations('admin.demo');
   const [activeTab, setActiveTab] = React.useState('dashboard');
 
   return (
@@ -30,7 +32,7 @@ export default function HeaderDemoPage() {
         <Code className='size-5 text-primary' />
         <div>
           <h1 className='text-2xl font-semibold tracking-tight'>
-            开发规范示例
+            {t('pageTitle')}
           </h1>
         </div>
       </div>
@@ -40,28 +42,28 @@ export default function HeaderDemoPage() {
         <CardHeader className='pb-3'>
           <div className='flex items-center gap-2'>
             <Code className='size-4 text-primary' />
-            <CardTitle className='text-base font-semibold'>规范说明</CardTitle>
+            <CardTitle className='text-base font-semibold'>
+              {t('specTitle')}
+            </CardTitle>
           </div>
-          <CardDescription>
-            此页面展示了后台 Sidebar 关联页面的标准标题栏布局，供开发参考。
-          </CardDescription>
+          <CardDescription>{t('specDescription')}</CardDescription>
         </CardHeader>
         <CardContent className='space-y-4'>
           <div className='space-y-2'>
             <h3 className='text-xs font-semibold uppercase tracking-wider text-muted-foreground'>
-              核心规范细节与编写原则：
+              {t('coreSpecTitle')}
             </h3>
             <ul className='list-disc pl-4 text-xs text-muted-foreground space-y-1.5'>
               <li>
-                <strong>结构专注</strong>
-                ：页面标题区必须保持绝对干净。请不要在标题下方放置任何描述段落或小字副标题，让页面在视线进入时保持极简与信息纯粹。
+                <strong>{t('rules.structureFocus.title')}</strong>
+                {t('rules.structureFocus.description')}
               </li>
               <li>
-                <strong>容器与上边距对齐</strong>：使用{' '}
+                <strong>{t('rules.containerAlignment.title')}</strong>：使用{' '}
                 <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                   flex items-center gap-2
                 </code>{' '}
-                作为标题行基础容器（不含下边框），外层统一使用{' '}
+                {t('rules.containerAlignment.description')}{' '}
                 <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                   py-6 px-1
                 </code>{' '}
@@ -69,53 +71,53 @@ export default function HeaderDemoPage() {
                 <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                   py-6
                 </code>
-                ) 进行上边距的视觉对齐，确保切换菜单时顶部高度感一致。
+                ) {t('rules.containerAlignment.description2')}
               </li>
               <li>
-                <strong>图标呈现</strong>：直接将 Lucide
-                图标组件嵌套于标题容器中，应用{' '}
+                <strong>{t('rules.iconPresentation.title')}</strong>：直接将
+                Lucide 图标组件嵌套于标题容器中，应用{' '}
                 <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                   size-5 text-primary
                 </code>{' '}
-                样式。禁止为图标包裹任何背景色小卡片、圆角或装饰性边框。
+                {t('rules.iconPresentation.description')}
               </li>
               <li>
-                <strong>文本样式标准</strong>：文本使用且仅使用{' '}
+                <strong>{t('rules.textStyle.title')}</strong>：文本使用且仅使用{' '}
                 <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                   {'h1 className="text-2xl font-semibold tracking-tight"'}
                 </code>
-                ，禁用字重加粗（如{' '}
+                {t('rules.textStyle.description')}{' '}
                 <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                   font-bold
                 </code>
-                ）或任何渐变色，保证全站字体一致性。
+                {t('rules.textStyle.description2')}
               </li>
               <li>
-                <strong>Tabs 模块化拆分</strong>：凡是带有多个 Tab
-                页切换的页面，**禁止**将所有 Tab
+                <strong>{t('rules.tabsModular.title')}</strong>：凡是带有多个
+                Tab 页切换的页面，**禁止**将所有 Tab
                 的渲染代码堆积在同一个物理页面主文件内。每个 Tab 页对应的
                 Content 必须单独拆分为独立组件文件（如{' '}
                 <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                   tabs/events-tab.tsx
                 </code>{' '}
-                或就近放在{' '}
+                {t('rules.tabsModular.description')}{' '}
                 <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                   components/
                 </code>{' '}
-                下），主页面文件只负责维护当前 Tab 的激活状态及外层骨架布局。
+                {t('rules.tabsModular.description2')}
               </li>
               <li>
-                <strong>复杂度驱动的区块拆分</strong>：不仅是 Tabs
-                切换，当一个页面代码行数超过 600
-                行时，必须将高密度区块拆分为子组件。路由专属、不复用的子组件应放在对应路由的特征目录中（如{' '}
+                <strong>{t('rules.complexityDriven.title')}</strong>：不仅是
+                Tabs 切换，当一个页面代码行数超过 600
+                {t('rules.complexityDriven.description')}{' '}
                 <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                   app/(main)/admin/database/components/
                 </code>
-                ），只有真正跨页面复用的组件才进入全局{' '}
+                {t('rules.complexityDriven.description2')}{' '}
                 <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                   components/common/
                 </code>
-                。典型标杆案例参考“数据管理” (
+                {t('rules.complexityDriven.description3')}{' '}
                 <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                   /admin/database
                 </code>
@@ -145,19 +147,19 @@ export default function HeaderDemoPage() {
             value='dashboard'
             className='px-0 pb-2 text-xs font-semibold'
           >
-            仪表盘与指标卡片
+            {t('tabs.dashboard')}
           </TabsTrigger>
           <TabsTrigger
             value='table'
             className='px-0 pb-2 text-xs font-semibold'
           >
-            数据表格规范
+            {t('tabs.table')}
           </TabsTrigger>
           <TabsTrigger
             value='controls'
             className='px-0 pb-2 text-xs font-semibold'
           >
-            输入控件与表单
+            {t('tabs.controls')}
           </TabsTrigger>
         </TabsList>
 

frontend/app/(main)/admin/demo/tabs/controls-tab.tsx

@@ -4,6 +4,7 @@
 'use client';
 
 import * as React from 'react';
+import { useTranslations } from 'next-intl';
 import { Code } from 'lucide-react';
 import {
   Card,
@@ -25,6 +26,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Button } from '@/components/ui/button';
 
 export function ControlsTab() {
+  const t = useTranslations('admin.demo.controls');
   const [formData, setFormData] = React.useState({
     name: '',
     category: 'database',
@@ -38,11 +40,9 @@ export function ControlsTab() {
       <Card className='border-dashed shadow-none'>
         <CardHeader className='pb-3'>
           <CardTitle className='text-sm font-semibold'>
-            表单与输入框交互演示
+            {t('formDemoTitle')}
           </CardTitle>
-          <CardDescription>
-            包含按钮变体、下拉选择、多选框及基础输入框的标准样式
-          </CardDescription>
+          <CardDescription>{t('formDemoDesc')}</CardDescription>
         </CardHeader>
         <CardContent className='space-y-4'>
           {/* 输入框 */}
@@ -51,7 +51,7 @@ export function ControlsTab() {
               htmlFor='task-name'
               className='text-xs font-medium text-foreground'
             >
-              任务名称
+              {t('taskName')}
             </Label>
             <Input
               id='task-name'
@@ -59,18 +59,18 @@ export function ControlsTab() {
               onChange={(e) =>
                 setFormData((prev) => ({ ...prev, name: e.target.value }))
               }
-              placeholder='输入要创建的任务描述...'
+              placeholder={t('taskNamePlaceholder')}
               className='h-8 text-xs shadow-none bg-background focus-visible:ring-1'
             />
             <p className='text-[10px] text-muted-foreground'>
-              任务名称将用于后台执行记录的可读性显示
+              {t('taskNameHint')}
             </p>
           </div>
 
           {/* 下拉框 */}
           <div className='space-y-1.5'>
             <Label className='text-xs font-medium text-foreground'>
-              任务分类
+              {t('taskCategory')}
             </Label>
             <Select
               value={formData.category}
@@ -82,9 +82,11 @@ export function ControlsTab() {
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value='database'>数据库运维</SelectItem>
-                <SelectItem value='sync'>数据批量同步</SelectItem>
-                <SelectItem value='cleanup'>过期磁盘清理</SelectItem>
+                <SelectItem value='database'>
+                  {t('categoryDatabase')}
+                </SelectItem>
+                <SelectItem value='sync'>{t('categorySync')}</SelectItem>
+                <SelectItem value='cleanup'>{t('categoryCleanup')}</SelectItem>
               </SelectContent>
             </Select>
           </div>
@@ -107,10 +109,10 @@ export function ControlsTab() {
                 htmlFor='allow-notify'
                 className='text-xs font-medium text-foreground cursor-pointer select-none leading-none'
               >
-                允许触发异步通知推送
+                {t('allowNotify')}
               </label>
               <p className='text-[10px] text-muted-foreground leading-normal'>
-                勾选后，在当前后台任务顺利执行结束时，会关联派发多渠道通知推送。
+                {t('allowNotifyDesc')}
               </p>
             </div>
           </div>
@@ -118,32 +120,32 @@ export function ControlsTab() {
           {/* 按钮变体 */}
           <div className='pt-2'>
             <div className='text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2'>
-              按钮样式对齐：
+              {t('buttonStyles')}
             </div>
             <div className='flex flex-wrap items-center gap-2'>
               <Button size='sm' className='h-8 text-xs shadow-none'>
-                主要操作 (Primary)
+                {t('primaryButton')}
               </Button>
               <Button
                 variant='secondary'
                 size='sm'
                 className='h-8 text-xs shadow-none'
               >
-                次要操作 (Secondary)
+                {t('secondaryButton')}
               </Button>
               <Button
                 variant='outline'
                 size='sm'
                 className='h-8 border-dashed text-xs shadow-none'
               >
-                辅助线框 (Outline)
+                {t('outlineButton')}
               </Button>
               <Button
                 variant='ghost'
                 size='sm'
                 className='h-8 text-xs hover:bg-muted'
               >
-                幽灵按钮 (Ghost)
+                {t('ghostButton')}
               </Button>
             </div>
           </div>
@@ -155,13 +157,13 @@ export function ControlsTab() {
         <CardHeader className='pb-3'>
           <CardTitle className='text-sm font-semibold flex items-center gap-1.5'>
             <Code className='size-4 text-primary' />
-            表单设计规范
+            {t('formDesignSpec')}
           </CardTitle>
         </CardHeader>
         <CardContent className='space-y-4 text-xs text-muted-foreground'>
           <div className='space-y-2 leading-relaxed'>
             <p className='font-semibold text-foreground text-[11px]'>
-              1. 统一控件高度与投影：
+              {t('spec.unifiedHeight')}
             </p>
             <p>
               输入框 (
@@ -188,7 +190,7 @@ export function ControlsTab() {
             </p>
 
             <p className='font-semibold text-foreground text-[11px] pt-1'>
-              2. Checkbox 与文本的对齐：
+              {t('spec.checkboxAlignment')}
             </p>
             <p>
               Checkbox 应在左侧垂直偏上对齐，使用容器{' '}
@@ -203,7 +205,7 @@ export function ControlsTab() {
             </p>
 
             <p className='font-semibold text-foreground text-[11px] pt-1'>
-              3. 按钮使用策略：
+              {t('spec.buttonStrategy')}
             </p>
             <p>
               普通主表单及新增/保存按钮，一律使用默认 Primary 按钮或次要{' '}

frontend/app/(main)/admin/demo/tabs/dashboard-tab.tsx

@@ -4,11 +4,13 @@
 'use client';
 
 import * as React from 'react';
+import { useTranslations } from 'next-intl';
 import { Code, Cpu, Database, HardDrive } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 
 export function DashboardTab() {
+  const t = useTranslations('admin.demo.dashboard');
   return (
     <div className='space-y-6'>
       <div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
@@ -16,7 +18,7 @@ export function DashboardTab() {
         <Card className='border-dashed shadow-none'>
           <CardHeader className='flex flex-row items-center justify-between pb-2'>
             <span className='text-xs font-medium text-muted-foreground'>
-              容器 CPU 使用率
+              {t('cpuUsage')}
             </span>
             <Cpu className='size-4 text-primary' />
           </CardHeader>
@@ -25,7 +27,7 @@ export function DashboardTab() {
             <Progress value={42.8} className='h-1.5' />
             <p className='text-[10px] text-muted-foreground flex items-center gap-1'>
               <span className='size-1.5 rounded-full bg-emerald-500 inline-block animate-pulse' />
-              容器运行正常，负载平稳
+              {t('cpuStatus')}
             </p>
           </CardContent>
         </Card>
@@ -34,7 +36,7 @@ export function DashboardTab() {
         <Card className='border-dashed shadow-none'>
           <CardHeader className='flex flex-row items-center justify-between pb-2'>
             <span className='text-xs font-medium text-muted-foreground'>
-              存储已用容量
+              {t('storageUsage')}
             </span>
             <HardDrive className='size-4 text-primary' />
           </CardHeader>
@@ -45,7 +47,7 @@ export function DashboardTab() {
             </div>
             <Progress value={72.4} className='h-1.5' />
             <p className='text-[10px] text-muted-foreground'>
-              数据已同步远端 S3 存储桶，支持自动过期
+              {t('storageStatus')}
             </p>
           </CardContent>
         </Card>
@@ -54,7 +56,7 @@ export function DashboardTab() {
         <Card className='border-dashed shadow-none'>
           <CardHeader className='flex flex-row items-center justify-between pb-2'>
             <span className='text-xs font-medium text-muted-foreground'>
-              物理数据库
+              {t('database')}
             </span>
             <Database className='size-4 text-primary' />
           </CardHeader>
@@ -67,17 +69,15 @@ export function DashboardTab() {
             </div>
             <div className='flex items-center gap-3 text-xs text-muted-foreground'>
               <div>
-                活跃连接:{' '}
+                {t('activeConnections')}{' '}
                 <span className='font-semibold text-foreground'>12</span>
               </div>
               <div>
-                总表数量:{' '}
+                {t('totalTables')}{' '}
                 <span className='font-semibold text-foreground'>34</span>
               </div>
             </div>
-            <p className='text-[10px] text-muted-foreground'>
-              链接池自动维护中，最大连接限制为 100
-            </p>
+            <p className='text-[10px] text-muted-foreground'>{t('dbStatus')}</p>
           </CardContent>
         </Card>
       </div>
@@ -87,45 +87,45 @@ export function DashboardTab() {
         <CardHeader className='pb-3'>
           <CardTitle className='text-sm font-semibold flex items-center gap-1.5'>
             <Code className='size-4 text-primary' />
-            指标卡片 & 仪表盘设计规范
+            {t('dashboardDesignSpec')}
           </CardTitle>
         </CardHeader>
         <CardContent className='space-y-4'>
           <ul className='list-disc pl-4 text-xs text-muted-foreground space-y-1.5'>
             <li>
-              指标卡片统一采用{' '}
+              {t('spec.dashedBorder')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 border-dashed shadow-none
               </code>{' '}
-              作为边框和投影。
+              {t('spec.dashedBorder2')}
             </li>
             <li>
-              头部使用{' '}
+              {t('spec.headerLayout')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 flex flex-row items-center justify-between pb-2
               </code>{' '}
-              布局，左侧为标题小字，右侧为直接呈现的 Lucide 图标。
+              {t('spec.headerLayout2')}
             </li>
             <li>
-              数值强调使用且仅使用{' '}
+              {t('spec.valueStyle')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 text-2xl font-semibold tracking-tight
               </code>{' '}
-              展示。
+              {t('spec.valueStyle2')}
             </li>
             <li>
-              进度条使用{' '}
+              {t('spec.progressBar')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 h-1.5
               </code>{' '}
-              细条高度，不喧宾夺主。
+              {t('spec.progressBar2')}
             </li>
             <li>
-              底部的次要说明信息必须统一使用{' '}
+              {t('spec.secondaryText')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 text-[10px] text-muted-foreground
               </code>{' '}
-              等辅助类。
+              {t('spec.secondaryText2')}
             </li>
           </ul>
           <pre className='text-[11px] font-mono text-muted-foreground overflow-x-auto p-3 bg-background rounded border border-border/40 leading-relaxed'>

frontend/app/(main)/admin/demo/tabs/table-tab.tsx

@@ -4,6 +4,7 @@
 'use client';
 
 import * as React from 'react';
+import { useTranslations } from 'next-intl';
 import { Code, Edit, ListFilter, Plus, Search, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -19,27 +20,28 @@ import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export function TableTab() {
+  const t = useTranslations('admin.demo.table');
   const mockTableData = [
     {
       id: 'TX-1002',
-      name: '用户信息批量同步导出',
-      type: '数据同步',
+      name: t('mockData.syncExport'),
+      type: t('mockType.dataSync'),
       status: 'success',
       duration: '1.2s',
       time: '2026-06-15 14:22',
     },
     {
       id: 'TX-1003',
-      name: '系统数据库每周自动备份归档',
-      type: '数据库运维',
+      name: t('mockData.dbBackup'),
+      type: t('mockType.dbOps'),
       status: 'running',
-      duration: '在执行中',
+      duration: t('mockDuration.running'),
       time: '2026-06-15 15:00',
     },
     {
       id: 'TX-1004',
-      name: '远端S3过期缓存对象自动清理任务',
-      type: '磁盘清理',
+      name: t('mockData.s3Cleanup'),
+      type: t('mockType.diskCleanup'),
       status: 'failed',
       duration: '0.4s',
       time: '2026-06-15 10:05',
@@ -54,7 +56,7 @@ export function TableTab() {
           <div className='relative w-64'>
             <Search className='absolute left-2.5 top-2.5 size-3 text-muted-foreground' />
             <Input
-              placeholder='输入任务名称搜索...'
+              placeholder={t('searchPlaceholder')}
               className='h-8 pl-8 text-xs w-full shadow-none border-dashed bg-background'
             />
           </div>
@@ -64,12 +66,12 @@ export function TableTab() {
             className='h-8 border-dashed text-xs shadow-none'
           >
             <ListFilter className='size-3 mr-1' />
-            过滤
+            {t('filter')}
           </Button>
         </div>
         <Button size='sm' className='h-8 text-xs shadow-none'>
           <Plus className='size-3.5 mr-1' />
-          新建任务
+          {t('newTask')}
         </Button>
       </div>
 
@@ -79,25 +81,25 @@ export function TableTab() {
           <TableHeader className='bg-muted/40'>
             <TableRow className='border-dashed hover:bg-transparent'>
               <TableHead className='w-[100px] text-xs font-semibold'>
-                任务编号
+                {t('columns.taskId')}
               </TableHead>
               <TableHead className='text-xs font-semibold'>
-                执行任务名称
+                {t('columns.taskName')}
               </TableHead>
               <TableHead className='w-[120px] text-xs font-semibold'>
-                任务类型
+                {t('columns.taskType')}
               </TableHead>
               <TableHead className='w-[100px] text-xs font-semibold'>
-                状态
+                {t('columns.status')}
               </TableHead>
               <TableHead className='w-[100px] text-xs font-semibold'>
-                执行耗时
+                {t('columns.duration')}
               </TableHead>
               <TableHead className='w-[150px] text-xs font-semibold'>
-                触发时间
+                {t('columns.triggerTime')}
               </TableHead>
               <TableHead className='w-[80px] text-xs font-semibold text-right'>
-                操作
+                {t('columns.actions')}
               </TableHead>
             </TableRow>
           </TableHeader>
@@ -123,7 +125,7 @@ export function TableTab() {
                       className='text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2 font-medium'
                     >
                       <span className='size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0' />
-                      成功
+                      {t('status.success')}
                     </Badge>
                   )}
                   {row.status === 'running' && (
@@ -132,7 +134,7 @@ export function TableTab() {
                       className='text-[10px] bg-blue-500/10 border-blue-500/20 text-blue-600 rounded-full py-0 px-2 font-medium'
                     >
                       <span className='size-1 bg-blue-500 rounded-full mr-1.5 shrink-0 animate-pulse' />
-                      运行中
+                      {t('status.running')}
                     </Badge>
                   )}
                   {row.status === 'failed' && (
@@ -141,7 +143,7 @@ export function TableTab() {
                       className='text-[10px] bg-destructive/10 border-destructive/20 text-destructive rounded-full py-0 px-2 font-medium'
                     >
                       <span className='size-1 bg-destructive rounded-full mr-1.5 shrink-0' />
-                      失败
+                      {t('status.failed')}
                     </Badge>
                   )}
                 </TableCell>
@@ -180,13 +182,13 @@ export function TableTab() {
         <CardHeader className='pb-3'>
           <CardTitle className='text-sm font-semibold flex items-center gap-1.5'>
             <Code className='size-4 text-primary' />
-            表格设计规范与代码模板
+            {t('tableDesignSpec')}
           </CardTitle>
         </CardHeader>
         <CardContent className='space-y-4'>
           <ul className='list-disc pl-4 text-xs text-muted-foreground space-y-1.5'>
             <li>
-              表格容器必须统一使用带有虚线边框的容器，即类名：
+              {t('spec.container')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 border border-dashed shadow-none rounded-lg overflow-hidden
                 bg-background
@@ -194,40 +196,40 @@ export function TableTab() {
               。
             </li>
             <li>
-              表头背景设为{' '}
+              {t('spec.headerBg')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 bg-muted/40
               </code>
-              。表头表项字号统一为小字粗体{' '}
+              {t('spec.headerStyle')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 text-xs font-semibold
               </code>
               。
             </li>
             <li>
-              单元格行与列之间使用虚线分割（
+              {t('spec.cellDivider')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 border-dashed
               </code>
-              ）。表格行悬浮交互采用温和过渡色{' '}
+              {t('spec.rowHover')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 hover:bg-muted/10 transition-colors
               </code>
               。
             </li>
             <li>
-              编码、主键或唯一 ID 类字段一律采用等宽字体呈现：
+              {t('spec.monoFont')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 font-mono text-xs
               </code>
               。
             </li>
             <li>
-              状态标签（Badge）尽量圆角化（
+              {t('spec.badgeStyle')}
               <code className='bg-muted px-1 py-0.5 rounded font-mono'>
                 rounded-full py-0 px-2
               </code>
-              ），并以浅背景配以各自对应的图标圆点，以实现现代、高对比度的视觉质感。
+              {t('spec.badgeStyle2')}
             </li>
           </ul>
           <pre className='text-[11px] font-mono text-muted-foreground overflow-x-auto p-3 bg-background rounded border border-border/40 leading-relaxed'>