@nextclaw/ui 0.2.4 → 0.2.5

package/src/hooks/useConfig.ts

@@ -1,5 +1,5 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { fetchConfig, fetchConfigMeta, updateModel, updateProvider, updateChannel, updateUiConfig, reloadConfig } from '@/api/config';
+import { fetchConfig, fetchConfigMeta, updateModel, updateProvider, updateChannel } from '@/api/config';
 import { toast } from 'sonner';
 import { t } from '@/lib/i18n';
 
@@ -59,37 +59,10 @@ export function useUpdateChannel() {
       updateChannel(channel, data as Parameters<typeof updateChannel>[1]),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['config'] });
-      toast.success(t('configSaved'));
-    },
-    onError: (error: Error) => {
-      toast.error(t('configSaveFailed') + ': ' + error.message);
-    }
-  });
-}
-
-export function useUpdateUiConfig() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: updateUiConfig,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['config'] });
-      toast.success(t('configSaved'));
+      toast.success(t('configSavedApplied'));
     },
     onError: (error: Error) => {
       toast.error(t('configSaveFailed') + ': ' + error.message);
     }
   });
 }
-
-export function useReloadConfig() {
-  return useMutation({
-    mutationFn: reloadConfig,
-    onSuccess: () => {
-      toast.success(t('configReloaded'));
-    },
-    onError: (error: Error) => {
-      toast.error(t('configReloadFailed') + ': ' + error.message);
-    }
-  });
-}

package/src/index.css

@@ -1,55 +1,67 @@
+/* Import Design System - must be first */
+@import './styles/design-system.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
-    /* HappyCapy-inspired cleaner "Milk/Cream" palette */
-    --background: 40 20% 98%;
-    /* Very light cream #F9F9F7 */
-    --foreground: 30 15% 10%;
-    /* Very dark brown/gray */
+    /* ========================================
+       CORE VARIABLES (Mapped to Design System)
+       ======================================== */
+    --background: 210 20% 98%;
+    --foreground: 221 39% 11%;
+
     --card: 0 0% 100%;
-    /* Pure white cards */
-    --card-foreground: 30 15% 10%;
+    --card-foreground: 221 39% 11%;
+
     --popover: 0 0% 100%;
-    --popover-foreground: 30 15% 10%;
-    --primary: 30 15% 10%;
-    /* Dark active states */
+    --popover-foreground: 221 39% 11%;
+
+    /* Primary: Brand Blue */
+    --primary: 217 80% 55%;
     --primary-foreground: 0 0% 100%;
-    --secondary: 40 10% 94%;
-    /* Neutral light gray */
-    --secondary-foreground: 30 15% 10%;
-    --muted: 40 10% 94%;
-    --muted-foreground: 30 8% 45%;
-    --accent: 40 10% 92%;
-    /* Light pill background */
-    --accent-foreground: 30 15% 10%;
+
+    /* Secondary: Light Gray */
+    --secondary: 220 14% 96%;
+    --secondary-foreground: 215 28% 17%;
+
+    /* Muted */
+    --muted: 220 14% 96%;
+    --muted-foreground: 220 9% 46%;
+
+    /* Accent */
+    --accent: 217 100% 97%;
+    --accent-foreground: 217 70% 40%;
+
+    /* Destructive */
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
-    --border: 40 10% 92%;
-    --input: 40 10% 92%;
-    --ring: 30 15% 10%;
-    --radius: 1.25rem;
-    /* Large rounded corners (20px) */
-
-    /* HappyCapy Neutrals */
-    --milk-50: 40 20% 98%;
-    --milk-100: 40 15% 96%;
-    --milk-200: 40 12% 92%;
-    --milk-300: 40 10% 88%;
-    --milk-400: 40 8% 70%;
-    --milk-500: 30 8% 45%;
-    --milk-600: 30 10% 35%;
-    --milk-700: 30 12% 25%;
-    --milk-800: 30 15% 15%;
-    --milk-900: 30 20% 8%;
+
+    /* UI Elements */
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 217 80% 55%;
+    --radius: 0.75rem;
+
+    /* Legacy compatibility */
+    --milk-50: 210 20% 98%;
+    --milk-100: 220 14% 96%;
+    --milk-200: 220 13% 91%;
+    --milk-300: 216 12% 84%;
+    --milk-400: 218 11% 65%;
+    --milk-500: 220 9% 46%;
+    --milk-600: 215 14% 34%;
+    --milk-700: 217 19% 27%;
+    --milk-800: 215 28% 17%;
+    --milk-900: 221 39% 11%;
   }
 }
 
 @layer base {
   * {
-    @apply border-border outline-none transition-colors duration-200;
+    @apply border-border;
   }
 
   html {
@@ -60,20 +72,21 @@
 
   body {
     @apply bg-background text-foreground;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family: var(--font-sans);
     overflow: hidden;
   }
 
-  /* Smooth scrolling for the whole page if needed */
+  /* Smooth scrolling */
   * {
     scrollbar-width: thin;
-    scrollbar-color: hsl(var(--warm-gray-300)) transparent;
+    scrollbar-color: hsl(var(--gray-300)) transparent;
   }
 }
 
 @layer utilities {
-
-  /* Custom scrollbar */
+  /* ========================================
+     SCROLLBAR
+     ======================================== */
   .custom-scrollbar::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -84,24 +97,42 @@
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb {
-    background: hsl(var(--warm-gray-300));
+    background: hsl(var(--gray-300));
     border-radius: 6px;
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--warm-gray-400));
+    background: hsl(var(--gray-400));
   }
 
-  /* Glassmorphism */
+  /* ========================================
+     GLASSMORPHISM
+     ======================================== */
   .glass {
-    @apply bg-white/70 backdrop-blur-md border border-white/20;
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
   }
 
   .glass-dark {
-    @apply bg-black/10 backdrop-blur-md border border-white/10;
+    background: rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  /* ========================================
+     SHADOWS
+     ======================================== */
+  .shadow-card {
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
+  }
+
+  .shadow-card-hover {
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
   }
 
-  /* Premium Shadows */
   .shadow-premium {
     box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.04);
   }
@@ -109,15 +140,36 @@
   .shadow-premium-hover {
     box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12), 0 8px 15px -6px rgba(0, 0, 0, 0.06);
   }
+
+  /* ========================================
+     GRADIENTS
+     ======================================== */
+  .bg-gradient-hero {
+    background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--gray-50)) 100%);
+  }
+
+  .bg-gradient-subtle {
+    background: linear-gradient(180deg, hsl(var(--gray-50)) 0%, hsl(var(--background)) 100%);
+  }
+
+  /* ========================================
+     FOCUS STATES
+     ======================================== */
+  .focus-ring {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+    --tw-ring-color: hsl(var(--ring));
+    --tw-ring-offset-color: hsl(var(--ring-offset));
+  }
 }
 
-/* Animation keyframes */
+/* ========================================
+   ANIMATIONS
+   ======================================== */
 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(12px);
   }
-
   to {
     opacity: 1;
     transform: translateY(0);
@@ -129,7 +181,6 @@
     opacity: 0;
     transform: translateX(-12px);
   }
-
   to {
     opacity: 1;
     transform: translateX(0);
@@ -141,7 +192,6 @@
     opacity: 0;
     transform: scale(0.97);
   }
-
   to {
     opacity: 1;
     transform: scale(1);
@@ -149,12 +199,9 @@
 }
 
 @keyframes pulse-soft {
-
-  0%,
-  100% {
+  0%, 100% {
     opacity: 1;
   }
-
   50% {
     opacity: 0.8;
   }
@@ -174,4 +221,4 @@
 
 .animate-pulse-soft {
   animation: pulse-soft 3s ease-in-out infinite;
-}
+}

package/src/lib/i18n.ts

@@ -4,7 +4,6 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   model: { zh: '模型', en: 'Model' },
   providers: { zh: '提供商', en: 'Providers' },
   channels: { zh: '渠道', en: 'Channels' },
-  uiConfig: { zh: '界面', en: 'UI' },
 
   // Common
   enabled: { zh: '启用', en: 'Enabled' },
@@ -41,6 +40,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   appToken: { zh: 'App Token', en: 'App Token' },
   appId: { zh: 'App ID', en: 'App ID' },
   appSecret: { zh: 'App Secret', en: 'App Secret' },
+  markdownSupport: { zh: 'Markdown 支持', en: 'Markdown Support' },
   clientId: { zh: 'Client ID', en: 'Client ID' },
   clientSecret: { zh: 'Client Secret', en: 'Client Secret' },
   encryptKey: { zh: '加密密钥', en: 'Encrypt Key' },
@@ -93,11 +93,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   replyDelayMs: { zh: '回复延迟(ms)', en: 'Reply Delay (ms)' },
   secret: { zh: '密钥', en: 'Secret' },
 
-  // UI Config
-  host: { zh: '主机', en: 'Host' },
-  port: { zh: '端口', en: 'Port' },
-  open: { zh: '自动打开', en: 'Open Automatically' },
-  reloadConfig: { zh: '重载配置', en: 'Reload Config' },
+  // UI
   saveVerifyConnect: { zh: '保存并验证 / 连接', en: 'Save & Verify / Connect' },
 
   // Status
@@ -108,6 +104,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
 
   // Messages
   configSaved: { zh: '配置已保存', en: 'Configuration saved' },
+  configSavedApplied: { zh: '配置已保存并已应用', en: 'Configuration saved and applied' },
   configSaveFailed: { zh: '保存配置失败', en: 'Failed to save configuration' },
   configReloaded: { zh: '配置已重载', en: 'Configuration reloaded' },
   configReloadFailed: { zh: '重载配置失败', en: 'Failed to reload configuration' },

package/src/lib/logos.ts

@@ -0,0 +1,42 @@
+type LogoMap = Record<string, string>;
+
+const PROVIDER_LOGOS: LogoMap = {
+  openrouter: "openrouter.svg",
+  aihubmix: "aihubmix.png",
+  anthropic: "anthropic.svg",
+  openai: "openai.svg",
+  gemini: "gemini.svg",
+  deepseek: "deepseek.png",
+  zhipu: "zhipu.svg",
+  dashscope: "dashscope.png",
+  moonshot: "moonshot.png",
+  minimax: "minimax.svg",
+  vllm: "vllm.svg",
+  groq: "groq.svg"
+};
+
+const CHANNEL_LOGOS: LogoMap = {
+  telegram: "telegram.svg",
+  slack: "slack.svg",
+  discord: "discord.svg",
+  whatsapp: "whatsapp.svg",
+  qq: "qq.svg",
+  feishu: "feishu.svg",
+  dingtalk: "dingtalk.svg",
+  mochat: "mochat.svg",
+  email: "email.svg"
+};
+
+function resolveLogo(map: LogoMap, name: string): string | null {
+  const key = name.toLowerCase();
+  const file = map[key];
+  return file ? `/logos/${file}` : null;
+}
+
+export function getProviderLogo(name: string): string | null {
+  return resolveLogo(PROVIDER_LOGOS, name);
+}
+
+export function getChannelLogo(name: string): string | null {
+  return resolveLogo(CHANNEL_LOGOS, name);
+}

package/src/stores/ui.store.ts

@@ -4,7 +4,7 @@ type ConnectionStatus = 'connected' | 'disconnected' | 'connecting';
 
 interface UiState {
   // Active configuration tab
-  activeTab: 'model' | 'providers' | 'channels' | 'ui';
+  activeTab: 'model' | 'providers' | 'channels';
   setActiveTab: (tab: UiState['activeTab']) => void;
 
   // Connection status

package/src/styles/design-system.css

@@ -0,0 +1,248 @@
+/**
+ * NextClaw Design System
+ * Inspired by modern SaaS landing pages (e.g., 推理时代)
+ * Clean, professional, with blue accent
+ */
+
+@layer base {
+  :root {
+    /* ========================================
+       BRAND COLORS
+       ======================================== */
+    --brand-50: 217 100% 97%;
+    --brand-100: 217 100% 94%;
+    --brand-200: 217 95% 87%;
+    --brand-300: 217 90% 77%;
+    --brand-400: 217 85% 65%;
+    --brand-500: 217 80% 55%;
+    --brand-600: 217 75% 48%;
+    --brand-700: 217 70% 40%;
+    --brand-800: 217 65% 33%;
+    --brand-900: 217 60% 25%;
+
+    /* ========================================
+       NEUTRAL COLORS (Gray Scale)
+       ======================================== */
+    --gray-50: 210 20% 98%;
+    --gray-100: 220 14% 96%;
+    --gray-200: 220 13% 91%;
+    --gray-300: 216 12% 84%;
+    --gray-400: 218 11% 65%;
+    --gray-500: 220 9% 46%;
+    --gray-600: 215 14% 34%;
+    --gray-700: 217 19% 27%;
+    --gray-800: 215 28% 17%;
+    --gray-900: 221 39% 11%;
+
+    /* ========================================
+       SEMANTIC COLORS
+       ======================================== */
+    /* Background */
+    --background: 210 20% 98%;
+    --background-secondary: 220 14% 96%;
+    --background-tertiary: 220 13% 91%;
+
+    /* Foreground (Text) */
+    --foreground: 221 39% 11%;
+    --foreground-secondary: 215 28% 17%;
+    --foreground-tertiary: 220 9% 46%;
+    --foreground-muted: 218 11% 65%;
+
+    /* Primary (Brand Blue) */
+    --primary: 217 80% 55%;
+    --primary-hover: 217 75% 48%;
+    --primary-active: 217 70% 40%;
+    --primary-foreground: 0 0% 100%;
+
+    /* Secondary */
+    --secondary: 220 14% 96%;
+    --secondary-hover: 220 13% 91%;
+    --secondary-foreground: 215 28% 17%;
+
+    /* Accent */
+    --accent: 217 100% 97%;
+    --accent-foreground: 217 70% 40%;
+
+    /* Muted */
+    --muted: 220 14% 96%;
+    --muted-foreground: 220 9% 46%;
+
+    /* Destructive */
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+
+    /* Success */
+    --success: 142 76% 36%;
+    --success-foreground: 0 0% 100%;
+
+    /* Warning */
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+
+    /* ========================================
+       UI ELEMENTS
+       ======================================== */
+    /* Card */
+    --card: 0 0% 100%;
+    --card-foreground: 221 39% 11%;
+    --card-border: 220 13% 91%;
+
+    /* Popover */
+    --popover: 0 0% 100%;
+    --popover-foreground: 221 39% 11%;
+
+    /* Border */
+    --border: 220 13% 91%;
+    --border-hover: 216 12% 84%;
+    --border-active: 217 80% 55%;
+
+    /* Input */
+    --input: 0 0% 100%;
+    --input-border: 220 13% 91%;
+    --input-focus: 217 80% 55%;
+
+    /* Ring (Focus) */
+    --ring: 217 80% 55%;
+    --ring-offset: 0 0% 100%;
+
+    /* ========================================
+       SPACING SYSTEM
+       ======================================== */
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --space-10: 40px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-20: 80px;
+    --space-24: 96px;
+
+    /* ========================================
+       BORDER RADIUS
+       ======================================== */
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-2xl: 20px;
+    --radius-3xl: 24px;
+    --radius-full: 9999px;
+
+    /* ========================================
+       SHADOWS
+       ======================================== */
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+    /* Card Shadow */
+    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
+    --shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
+
+    /* ========================================
+       TYPOGRAPHY
+       ======================================== */
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+
+    /* Font Sizes */
+    --text-xs: 12px;
+    --text-sm: 14px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-xl: 20px;
+    --text-2xl: 24px;
+    --text-3xl: 30px;
+    --text-4xl: 36px;
+    --text-5xl: 48px;
+
+    /* Font Weights */
+    --font-normal: 400;
+    --font-medium: 500;
+    --font-semibold: 600;
+    --font-bold: 700;
+
+    /* Line Heights */
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+
+    /* Letter Spacing */
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0;
+    --tracking-wide: 0.025em;
+
+    /* ========================================
+       TRANSITIONS
+       ======================================== */
+    --transition-fast: 150ms ease;
+    --transition-base: 200ms ease;
+    --transition-slow: 300ms ease;
+
+    /* ========================================
+       Z-INDEX SCALE
+       ======================================== */
+    --z-dropdown: 100;
+    --z-sticky: 200;
+    --z-fixed: 300;
+    --z-modal-backdrop: 400;
+    --z-modal: 500;
+    --z-popover: 600;
+    --z-tooltip: 700;
+  }
+}
+
+@layer utilities {
+  /* ========================================
+     UTILITY CLASSES
+     ======================================== */
+
+  /* Brand Colors */
+  .bg-brand-50 { background-color: hsl(var(--brand-50)); }
+  .bg-brand-100 { background-color: hsl(var(--brand-100)); }
+  .bg-brand-500 { background-color: hsl(var(--brand-500)); }
+  .bg-brand-600 { background-color: hsl(var(--brand-600)); }
+  .text-brand-500 { color: hsl(var(--brand-500)); }
+  .text-brand-600 { color: hsl(var(--brand-600)); }
+  .border-brand-500 { border-color: hsl(var(--brand-500)); }
+
+  /* Gray Colors */
+  .bg-gray-50 { background-color: hsl(var(--gray-50)); }
+  .bg-gray-100 { background-color: hsl(var(--gray-100)); }
+  .bg-gray-900 { background-color: hsl(var(--gray-900)); }
+  .text-gray-500 { color: hsl(var(--gray-500)); }
+  .text-gray-600 { color: hsl(var(--gray-600)); }
+  .text-gray-900 { color: hsl(var(--gray-900)); }
+
+  /* Shadows */
+  .shadow-card { box-shadow: var(--shadow-card); }
+  .shadow-card-hover { box-shadow: var(--shadow-card-hover); }
+
+  /* Gradient Backgrounds */
+  .bg-gradient-hero {
+    background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--gray-50)) 100%);
+  }
+
+  /* Glass Effect */
+  .glass {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+
+  /* Focus Ring */
+  .focus-ring {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+    --tw-ring-color: hsl(var(--ring));
+    --tw-ring-offset-color: hsl(var(--ring-offset));
+  }
+}