perf: billing styles and interaction

apps/nextjs-app/src/features/app/components/SpaceSettingContainer.tsx

@@ -21,7 +21,7 @@ export const SpaceSettingContainer = ({
 }: SpaceSettingContainerProps) => {
   return (
     <div className={cn('h-screen w-full overflow-y-auto overflow-x-hidden', wrapperClassName)}>
-      <div className={cn('w-full px-8 py-6', headerClassName)}>
+      <div className={cn('w-full px-4 py-6 sm:px-8', headerClassName)}>
         <div className={cn('border-b pb-4', titleClassName)}>
           <h1 className="text-3xl font-semibold">{title}</h1>
           {description && <div className="mt-3 text-sm text-slate-500">{description}</div>}

apps/nextjs-app/src/features/app/components/billing/UpgradeWrapper.tsx

@@ -1,9 +1,9 @@
 import { Role } from '@teable/core';
 import { BillingProductLevel } from '@teable/openapi';
+import { UsageLimitModalType, useUsageLimitModalStore } from '@teable/sdk/components/billing/store';
 import { useBase } from '@teable/sdk/hooks';
 import type { Base } from '@teable/sdk/model';
 import { toast } from '@teable/ui-lib/shadcn/ui/sonner';
-import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { useMemo, useCallback, type ReactElement, cloneElement } from 'react';
 import { useBillingLevel } from '../../hooks/useBillingLevel';
@@ -51,12 +51,12 @@ export const UpgradeWrapper: React.FC<IUpgradeWrapperProps> = ({
   targetBillingLevel,
   onUpgradeClick,
 }) => {
-  const router = useRouter();
   const isCloud = useIsCloud();
   const isCommunity = useIsCommunity();
   const isEE = useIsEE();
   const base = useBase() as Base | undefined;
   const { t } = useTranslation('common');
+  const { openModal } = useUsageLimitModalStore();
   spaceId = base?.spaceId ?? spaceId;
   const baseId = base?.id;
   // EE starts from pro level
@@ -95,15 +95,14 @@ export const UpgradeWrapper: React.FC<IUpgradeWrapperProps> = ({
         return;
       }
 
-      router.push(`/space/${spaceId}/setting/plan`);
+      openModal(UsageLimitModalType.Upgrade);
     } else {
       window.open('https://app.teable.ai/public/pricing?host=self-hosted', '_blank');
     }
-  }, [onUpgradeClick, isCloud, spaceId, isSpaceOwner, t, router]);
+  }, [isCloud, spaceId, isSpaceOwner, t, openModal, onUpgradeClick]);
 
   const billingConfig = useBillingLevelConfig(targetBillingLevel);
 
-  // 创建badge组件
   const badge = useMemo(() => {
     if (!needsUpgrade) {
       return null;

apps/nextjs-app/src/features/app/hooks/useBillingLevelConfig.ts

@@ -11,21 +11,20 @@ export const useBillingLevelConfig = (productLevel?: BillingProductLevel) => {
       [BillingProductLevel.Free]: {
         name: t('level.free'),
         description: t('billing.levelTips', { level: t('level.free') }),
-        tagCls: 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-white',
-        upgradeTagCls:
-          'border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-white',
+        tagCls: 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-white',
+        upgradeTagCls: 'border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-white',
       },
       [BillingProductLevel.Plus]: {
         name: t('level.plus'),
         description: t('billing.levelTips', { level: t('level.plus') }),
-        tagCls: 'bg-violet-200 dark:bg-violet-700 text-violet-600 dark:text-white',
-        upgradeTagCls: 'border border-violet-200 dark:border-violet-700 text-violet-600',
+        tagCls: 'bg-emerald-200 dark:bg-emerald-700 text-emerald-600 dark:text-white',
+        upgradeTagCls: 'border border-emerald-200 dark:border-emerald-700 text-emerald-600',
       },
       [BillingProductLevel.Pro]: {
         name: t('level.pro'),
         description: t('billing.levelTips', { level: t('level.pro') }),
-        tagCls: 'bg-amber-200 dark:bg-amber-700 text-amber-600 dark:text-white',
-        upgradeTagCls: 'border border-amber-200 dark:border-amber-700 text-amber-600',
+        tagCls: 'bg-blue-200 dark:bg-blue-700 text-blue-600 dark:text-white',
+        upgradeTagCls: 'border border-blue-200 dark:border-blue-700 text-blue-600',
       },
       [BillingProductLevel.Enterprise]: {
         name: t('level.enterprise'),

packages/common-i18n/src/locales/de/common.json

@@ -45,7 +45,9 @@
     "more": "Mehr",
     "move": "Verschieben nach",
     "turnOn": "Einschalten",
-    "exit": "Ausloggen"
+    "exit": "Ausloggen",
+    "next": "Nächste",
+    "previous": "Vorherige"
   },
   "quickAction": {
     "title": "Schnelle Aktionen...",

packages/common-i18n/src/locales/en/common.json

@@ -49,7 +49,9 @@
     "deleteTip": "Are you sure you want to delete \"{{name}}\"?",
     "move": "Move to",
     "turnOn": "Turn on",
-    "exit": "Exit"
+    "exit": "Exit",
+    "next": "Next",
+    "previous": "Previous"
   },
   "quickAction": {
     "title": "Quick Actions...",

packages/common-i18n/src/locales/es/common.json

@@ -45,7 +45,9 @@
     "more": "Más",
     "move": "Mover a",
     "turnOn": "Activar",
-    "exit": "Cerrar sesión"
+    "exit": "Cerrar sesión",
+    "next": "Siguiente",
+    "previous": "Anterior"
   },
   "quickAction": {
     "title": "Acciones Rápidas...",

packages/common-i18n/src/locales/fr/common.json

@@ -38,7 +38,9 @@
     "more": "Plus",
     "move": "Déplacer vers",
     "turnOn": "Activer",
-    "exit": "Déconnexion"
+    "exit": "Déconnexion",
+    "next": "Suivant",
+    "previous": "Précédent"
   },
   "quickAction": {
     "title": "Actions rapides...",

packages/common-i18n/src/locales/it/common.json

@@ -45,7 +45,9 @@
     "more": "Altro",
     "move": "Sposta in",
     "turnOn": "Attiva",
-    "exit": "Esci"
+    "exit": "Esci",
+    "next": "Successivo",
+    "previous": "Precedente"
   },
   "quickAction": {
     "title": "Azioni rapide...",

packages/common-i18n/src/locales/ja/common.json

@@ -37,7 +37,9 @@
     "more": "もっと",
     "move": "移動先",
     "turnOn": "有効にする",
-    "exit": "ログアウト"
+    "exit": "ログアウト",
+    "next": "次へ",
+    "previous": "前へ"
   },
   "quickAction": {
     "title": "クイックアクション...",

packages/common-i18n/src/locales/ru/common.json

@@ -38,7 +38,9 @@
     "more": "Больше",
     "move": "Переместить в",
     "turnOn": "Включить",
-    "exit": "Выйти"
+    "exit": "Выйти",
+    "next": "Следующая",
+    "previous": "Предыдущая"
   },
   "quickAction": {
     "title": "Быстрые действия...",

packages/common-i18n/src/locales/tr/common.json

@@ -41,7 +41,9 @@
     "hideNotMatchRow": "Eşleşmeyen satırları gizle",
     "move": "Taşı",
     "turnOn": "Aç",
-    "exit": "Çıkış"
+    "exit": "Çıkış",
+    "next": "Sonraki",
+    "previous": "Önceki"
   },
   "quickAction": {
     "title": "Hızlı İşlemler...",

packages/common-i18n/src/locales/uk/common.json

@@ -38,7 +38,9 @@
     "more": "Більше",
     "move": "Перемістити в",
     "turnOn": "Увімкнути",
-    "exit": "Вийти"
+    "exit": "Вийти",
+    "next": "Наступна",
+    "previous": "Попередня"
   },
   "quickAction": {
     "title": "Швидкі дії...",

packages/common-i18n/src/locales/zh/common.json

@@ -49,7 +49,9 @@
     "deleteTip": "确定要删除 \"{{name}}\" 吗？",
     "move": "移动至",
     "turnOn": "开启",
-    "exit": "退出"
+    "exit": "退出",
+    "next": "下一页",
+    "previous": "上一页"
   },
   "quickAction": {
     "title": "快捷搜索...",