@cogito.ai/cli 0.4.3 → 0.4.5

package/dist/templates/web-nextjs/apps/web/messages/zh.json

@@ -108,7 +108,7 @@
     "verificationCodeLabel": "邮箱验证码",
     "verificationCodePlaceholder": "输入 6 位验证码",
     "resendIn": "{seconds} 秒后重新发送",
-    "resendCode": "重新发送验证码",
+    "resendCode": "重新发送",
     "resetPasswordTitle": "设置新密码",
     "resetPasswordSubtitle": "在下方输入您的新密码。",
     "newPasswordLabel": "新密码",
@@ -124,6 +124,8 @@
     "resetPasswordSuccess": "密码已更新，请登录。"
   },
   "settings": {
+    "profileTitle": "个人资料",
+    "subscriptionTitle": "订阅与账单",
     "profile": {
       "title": "个人资料设置",
       "subtitle": "管理您的账号设置和偏好。",
@@ -160,5 +162,73 @@
       "description": "了解更多关于 AgentDock 的信息。",
       "placeholder": "此页面为占位符。在发布前请替换为实际的关于我们信息。"
     }
+  },
+  "pricing": {
+    "title": "定价",
+    "description": "选择适合您的方案",
+    "monthly": "月付",
+    "yearly": "年付",
+    "free": "免费",
+    "perMonth": "月",
+    "perYear": "年",
+    "currentPlan": "当前方案",
+    "popular": "热门",
+    "upgrade": "升级",
+    "getStarted": "开始使用"
+  },
+  "payment": {
+    "checkoutTitle": "结算",
+    "orderSummary": "订单摘要",
+    "plan": "方案",
+    "billingCycle": "计费周期",
+    "total": "总计",
+    "paymentMethod": "支付方式",
+    "alipay": "支付宝",
+    "wechatPay": "微信支付",
+    "coupon": "优惠码",
+    "couponPlaceholder": "输入优惠码",
+    "invalidCoupon": "无效优惠码",
+    "paymentError": "支付失败，请重试",
+    "confirmPayment": "确认支付",
+    "processing": "处理中...",
+    "statusTitle": "支付状态",
+    "paymentStatus": "支付状态",
+    "paid": "已支付",
+    "pending": "待支付",
+    "failed": "失败",
+    "paymentSuccess": "支付成功！",
+    "paymentFailed": "支付失败",
+    "paymentPending": "等待支付...",
+    "paymentPendingDescription": "请完成支付，页面将自动更新",
+    "goToDashboard": "进入控制台",
+    "tryAgain": "重试"
+  },
+  "subscription": {
+    "title": "订阅与账单",
+    "description": "管理您的订阅和支付历史",
+    "currentPlan": "当前方案",
+    "status": "状态",
+    "active": "活跃",
+    "trial": "试用",
+    "expired": "已过期",
+    "cancelled": "已取消",
+    "pending": "待处理",
+    "billingCycle": "计费周期",
+    "monthly": "月付",
+    "yearly": "年付",
+    "expiresOn": "到期时间",
+    "cancelRenewal": "取消自动续费",
+    "cancelledAtPeriodEnd": "已设置为当前周期结束后取消",
+    "noActiveSubscription": "暂无活跃订阅",
+    "upgradeNow": "立即升级",
+    "paymentHistory": "支付历史",
+    "noPayments": "暂无支付记录",
+    "feature": "功能",
+    "free": "免费版",
+    "pro": "专业版",
+    "featureProjects": "项目数量",
+    "featureApiCalls": "API 调用次数",
+    "featureSupport": "优先支持",
+    "featureAnalytics": "高级分析"
   }
 }

package/dist/templates/web-nextjs/apps/web/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/dist/templates/web-nextjs/apps/web/package.json

@@ -33,9 +33,12 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@supabase/ssr": "^0.10.3",
+    "@supabase/supabase-js": "^2.107.0",
     "@tabler/icons-react": "^3.44.0",
     "@tailwindcss/postcss": "^4.3.0",
+    "@tanstack/react-query": "^5.101.0",
     "@tanstack/react-table": "^8.21.3",
+    "alipay-sdk": "^4.14.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -44,6 +47,7 @@
     "next": "16",
     "next-intl": "^4.13.0",
     "next-themes": "^0.4.6",
+    "qrcode.react": "^4.2.0",
     "radix-ui": "^1.4.3",
     "react": "19",
     "react-dom": "19",

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(auth)/forgot-password/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useActionState, useEffect, useState, startTransition } from 'react'
+import { useActionState, useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
 import Link from 'next/link'
 import { useTranslations } from 'next-intl'
@@ -78,18 +78,14 @@ export default function ForgotPasswordPage() {
     formData.append('email', data.email)
     setEmail(data.email)
     setValue('email', data.email)
-    startTransition(async () => {
-      await sendAction(formData)
-    })
+    sendAction(formData)
   }
 
   async function onResendOTP() {
     if (countdown > 0) return
     const formData = new FormData()
     formData.append('email', email)
-    startTransition(async () => {
-      await sendAction(formData)
-    })
+    sendAction(formData)
   }
 
   async function onSubmit(data: ResetPasswordWithOTPInput) {
@@ -99,9 +95,7 @@ export default function ForgotPasswordPage() {
     formData.append('password', data.password)
     formData.append('confirmPassword', data.confirmPassword)
     formData.append('locale', locale)
-    startTransition(async () => {
-      await verifyAction(formData)
-    })
+    verifyAction(formData)
   }
 
   if (step === 'send') {

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/payment/[paymentId]/page.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { usePaymentStatus } from '@/features/subscription/hooks'
+import { createBrowserClient } from '@supabase/ssr'
+
+export default function PaymentStatusPage() {
+  const t = useTranslations('payment')
+  const router = useRouter()
+  const params = useParams()
+  const paymentId = params.paymentId as string
+
+  const [paymentMethod, setPaymentMethod] = useState<string>('')
+  const [orderNo, setOrderNo] = useState<string>('')
+
+  useEffect(() => {
+    async function fetchPayment() {
+      const supabase = createBrowserClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL!,
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+      )
+      const { data } = await supabase.from('payments').select('*').eq('id', paymentId).single()
+
+      if (data) {
+        setPaymentMethod(data.payment_method)
+        setOrderNo(data.order_no)
+      }
+    }
+    fetchPayment()
+  }, [paymentId])
+
+  const { data: paymentStatus } = usePaymentStatus(orderNo, paymentMethod, {
+    enabled: !!orderNo && !!paymentMethod,
+  })
+
+  const status = paymentStatus?.status || 'pending'
+
+  return (
+    <div className="container mx-auto max-w-2xl px-4 py-10">
+      <h1 className="text-2xl font-bold mb-6">{t('statusTitle')}</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            {t('paymentStatus')}
+            <Badge
+              variant={
+                status === 'paid' ? 'default' : status === 'failed' ? 'destructive' : 'secondary'
+              }
+            >
+              {t(status)}
+            </Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {status === 'paid' && (
+            <div className="text-center space-y-4">
+              <div className="text-6xl">✓</div>
+              <p className="text-lg font-medium">{t('paymentSuccess')}</p>
+              <Button onClick={() => router.push('/dashboard')}>{t('goToDashboard')}</Button>
+            </div>
+          )}
+
+          {status === 'failed' && (
+            <div className="text-center space-y-4">
+              <div className="text-6xl">✗</div>
+              <p className="text-lg font-medium">{t('paymentFailed')}</p>
+              <Button onClick={() => router.push('/pricing')}>{t('tryAgain')}</Button>
+            </div>
+          )}
+
+          {status === 'pending' && (
+            <div className="text-center space-y-4">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent mx-auto" />
+              <p className="text-lg font-medium">{t('paymentPending')}</p>
+              <p className="text-sm text-muted-foreground">{t('paymentPendingDescription')}</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/payment/checkout/page.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
+import { useSubscriptionPlan } from '@/features/subscription/hooks'
+import { createBrowserClient } from '@supabase/ssr'
+
+export default function CheckoutPage() {
+  const t = useTranslations('payment')
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const planCode = searchParams.get('plan') || ''
+  const cycle = (searchParams.get('cycle') as 'monthly' | 'yearly') || 'monthly'
+
+  const { data: plan, isLoading } = useSubscriptionPlan(planCode)
+  const [paymentMethod, setPaymentMethod] = useState<'alipay' | 'wechat'>('alipay')
+  const [coupon, setCoupon] = useState('')
+  const [couponError, setCouponError] = useState('')
+  const [isProcessing, setIsProcessing] = useState(false)
+
+  if (!planCode) {
+    router.push('/pricing')
+    return null
+  }
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto max-w-2xl px-4 py-10">
+        <div className="flex justify-center py-20">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        </div>
+      </div>
+    )
+  }
+
+  const amount = cycle === 'monthly' ? plan?.price_monthly : plan?.price_yearly
+
+  const handleSubmit = async () => {
+    setIsProcessing(true)
+    try {
+      // Validate coupon (stub)
+      if (coupon && coupon !== 'DISCOUNT10') {
+        setCouponError(t('invalidCoupon'))
+        setIsProcessing(false)
+        return
+      }
+      setCouponError('')
+
+      const supabase = createBrowserClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL!,
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+      )
+      const {
+        data: { user },
+      } = await supabase.auth.getUser()
+      if (!user) {
+        router.push('/login')
+        return
+      }
+
+      // Create payment record
+      const res = await fetch('/api/payments/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userId: user.id,
+          planId: plan?.id,
+          amount,
+          paymentMethod,
+          billingCycle: cycle,
+        }),
+      })
+
+      if (!res.ok) throw new Error('Failed to create payment')
+      const payment = await res.json()
+
+      // Initiate payment
+      if (paymentMethod === 'alipay') {
+        const { initiateAlipayPayment } = await import('@/features/subscription/alipay/client')
+        await initiateAlipayPayment(payment.id, user.id)
+      } else {
+        const { initiateWechatPayment } = await import('@/features/subscription/wechat/client')
+        const result = await initiateWechatPayment(payment.id, user.id)
+        if (result.type === 'qrcode') {
+          router.push(`/payment/${payment.id}`)
+        }
+      }
+    } catch (error) {
+      setCouponError(t('paymentError'))
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  return (
+    <div className="container mx-auto max-w-2xl px-4 py-10">
+      <h1 className="text-2xl font-bold mb-6">{t('checkoutTitle')}</h1>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t('orderSummary')}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex justify-between">
+            <span>{t('plan')}</span>
+            <span className="font-medium">{plan?.plan_name}</span>
+          </div>
+          <div className="flex justify-between">
+            <span>{t('billingCycle')}</span>
+            <span className="font-medium">{cycle === 'monthly' ? t('monthly') : t('yearly')}</span>
+          </div>
+          <div className="flex justify-between text-lg font-bold">
+            <span>{t('total')}</span>
+            <span>¥{((amount || 0) / 100).toFixed(2)}</span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t('paymentMethod')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <RadioGroup
+            value={paymentMethod}
+            onValueChange={(v) => setPaymentMethod(v as 'alipay' | 'wechat')}
+            className="space-y-3"
+          >
+            <div className="flex items-center space-x-2 border rounded-lg p-4">
+              <RadioGroupItem value="alipay" id="alipay" />
+              <Label htmlFor="alipay" className="flex-1 cursor-pointer">
+                {t('alipay')}
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2 border rounded-lg p-4">
+              <RadioGroupItem value="wechat" id="wechat" />
+              <Label htmlFor="wechat" className="flex-1 cursor-pointer">
+                {t('wechatPay')}
+              </Label>
+            </div>
+          </RadioGroup>
+        </CardContent>
+      </Card>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t('coupon')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Input
+            placeholder={t('couponPlaceholder')}
+            value={coupon}
+            onChange={(e) => setCoupon(e.target.value)}
+          />
+          {couponError && <p className="text-sm text-destructive mt-2">{couponError}</p>}
+        </CardContent>
+      </Card>
+
+      <Button className="w-full" size="lg" onClick={handleSubmit} disabled={isProcessing}>
+        {isProcessing ? t('processing') : t('confirmPayment')}
+      </Button>
+    </div>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/pricing/page.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardFooter,
+} from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { useSubscriptionPlans, useUserSubscription } from '@/features/subscription/hooks'
+import { createBrowserClient } from '@supabase/ssr'
+
+export default function PricingPage() {
+  const t = useTranslations('pricing')
+  const router = useRouter()
+  const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly')
+
+  const { data: plans, isLoading: plansLoading } = useSubscriptionPlans()
+  const [user, setUser] = useState<{ id: string } | null>(null)
+
+  // Fetch current user
+  useState(() => {
+    const supabase = createBrowserClient(
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    )
+    supabase.auth.getUser().then(({ data }) => {
+      if (data.user) {
+        setUser({ id: data.user.id })
+      }
+    })
+  })
+
+  const { data: currentSubscription } = useUserSubscription(user?.id || '')
+
+  const handleSelectPlan = (planCode: string) => {
+    router.push(`/payment/checkout?plan=${planCode}&cycle=${billingCycle}`)
+  }
+
+  if (plansLoading) {
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-10">
+        <div className="flex justify-center py-20">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto max-w-6xl px-4 py-10">
+      <div className="text-center mb-10">
+        <h1 className="text-3xl font-bold mb-4">{t('title')}</h1>
+        <p className="text-muted-foreground">{t('description')}</p>
+      </div>
+
+      <Tabs
+        value={billingCycle}
+        onValueChange={(v) => setBillingCycle(v as 'monthly' | 'yearly')}
+        className="w-full max-w-md mx-auto mb-10"
+      >
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="monthly">{t('monthly')}</TabsTrigger>
+          <TabsTrigger value="yearly">{t('yearly')}</TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {plans?.map((plan) => {
+          const price = billingCycle === 'monthly' ? plan.price_monthly : plan.price_yearly
+          const isCurrentPlan = currentSubscription?.plan_id === plan.id
+
+          return (
+            <Card
+              key={plan.id}
+              className={isCurrentPlan ? 'border-primary ring-1 ring-primary' : ''}
+            >
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle>{plan.plan_name}</CardTitle>
+                  {isCurrentPlan && <Badge>{t('currentPlan')}</Badge>}
+                  {plan.is_featured && <Badge variant="secondary">{t('popular')}</Badge>}
+                </div>
+                <CardDescription>{plan.description}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold">
+                  {price === 0 ? t('free') : `¥${(price / 100).toFixed(2)}`}
+                  {price > 0 && (
+                    <span className="text-sm font-normal text-muted-foreground ml-1">
+                      /{billingCycle === 'monthly' ? t('perMonth') : t('perYear')}
+                    </span>
+                  )}
+                </div>
+              </CardContent>
+              <CardFooter>
+                {isCurrentPlan ? (
+                  <Button variant="outline" className="w-full" disabled>
+                    {t('currentPlan')}
+                  </Button>
+                ) : (
+                  <Button className="w-full" onClick={() => handleSelectPlan(plan.plan_code)}>
+                    {price === 0 ? t('getStarted') : t('upgrade')}
+                  </Button>
+                )}
+              </CardFooter>
+            </Card>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/settings/layout.tsx

@@ -1,5 +1,52 @@
+'use client'
+
 import { ReactNode } from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import { User, CreditCard } from 'lucide-react'
+import { cn } from '@/lib/utils'
 
 export default function SettingsLayout({ children }: { children: ReactNode }) {
-  return <div className="container mx-auto max-w-4xl px-4 py-10">{children}</div>
+  const t = useTranslations('settings')
+  const pathname = usePathname()
+
+  const navItems = [
+    { href: '/settings/profile', label: t('profileTitle'), icon: User },
+    { href: '/settings/subscription', label: t('subscriptionTitle'), icon: CreditCard },
+  ]
+
+  return (
+    <div className="container mx-auto max-w-6xl px-4 py-10">
+      <div className="flex flex-col gap-8 md:flex-row">
+        {/* Sidebar Navigation */}
+        <aside className="w-full md:w-64 flex-shrink-0">
+          <nav className="space-y-1">
+            {navItems.map((item) => {
+              const isActive = pathname === item.href || pathname.startsWith(item.href + '/')
+              const Icon = item.icon
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={cn(
+                    'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                    isActive
+                      ? 'bg-primary text-primary-foreground'
+                      : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+                  )}
+                >
+                  <Icon className="h-4 w-4" />
+                  {item.label}
+                </Link>
+              )
+            })}
+          </nav>
+        </aside>
+
+        {/* Content */}
+        <main className="flex-1 min-w-0">{children}</main>
+      </div>
+    </div>
+  )
 }