@windrun-huaiin/third-ui 5.10.3 → 5.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "5.10.3",
+  "version": "5.11.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -49,6 +49,7 @@
     "fumadocs-mdx": "11.6.3",
     "fumadocs-typescript": "4.0.4",
     "fumadocs-ui": "15.3.3",
+    "class-variance-authority": "^0.7.1",
     "katex": "^0.16.22",
     "mermaid": "^11.6.0",
     "react-medium-image-zoom": "^5.2.14",

package/src/fuma/mdx/banner.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { cva } from 'class-variance-authority';
+import { type HTMLAttributes, useEffect, useState } from 'react';
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+import { cn } from '@lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      color: {
+        primary:
+          'bg-primary text-primary-foreground hover:bg-primary/80',
+        outline: 'border hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'border bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        sm: 'gap-1 px-2 py-1.5 text-xs',
+        icon: 'p-1.5 [&_svg]:size-5',
+        'icon-sm': 'p-1.5 [&_svg]:size-4.5',
+      },
+    },
+  },
+);
+
+export function Banner({
+  id,
+  variant = 'rainbow',
+  changeLayout = true,
+  height = 3,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & {
+  /**
+   * @defaultValue default is 3 rem
+   */
+  height?: number;
+
+  /**
+   * @defaultValue 'normal'
+   */
+  variant?: 'rainbow' | 'normal';
+
+  /**
+   * Change Fumadocs layout styles
+   *
+   * @defaultValue true
+   */
+  changeLayout?: boolean;
+}) {
+  const [open, setOpen] = useState(true);
+  const globalKey = id ? `nd-banner-${id}` : null;
+  const bannerHeight = `${height}rem`;
+  const headerStartHeight = `${height + 5.5}rem`;
+
+  useEffect(() => {
+    if (globalKey) setOpen(localStorage.getItem(globalKey) !== 'true');
+  }, [globalKey]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      id={id}
+      {...props}
+      className={cn(
+        'flex flex-row items-center justify-center px-4 text-center text-sm font-medium',
+        'bg-neutral-100 dark:bg-neutral-900',
+        !open && 'hidden',
+        props.className,
+      )}
+      style={{
+        // 将 fuma.css 中的 .sticky.top-0.z-40 样式完全移到这里
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        zIndex: 1001,
+        height: bannerHeight,
+        minHeight: bannerHeight,
+        maxHeight: bannerHeight,
+        margin: 0,
+        borderRadius: 0,
+      }}
+    >
+      
+      {globalKey ? (
+        <style>{`.${globalKey} #${id} { display: none; }`}</style>
+      ) : null}
+      {globalKey ? (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');`,
+          }}
+        />
+      ) : null}
+
+      {variant === 'rainbow' ? rainbowLayer : null}
+      {props.children}
+      {id ? (
+        <button
+          type="button"
+          aria-label="Close Banner"
+          onClick={() => {
+            setOpen(false);
+            if (globalKey) localStorage.setItem(globalKey, 'true');
+          }}
+          className={cn(
+            buttonVariants({
+              color: 'ghost',
+              className:
+                'absolute end-2 top-1/2 -translate-y-1/2 text-neutral-600 dark:text-neutral-400',
+              size: 'icon',
+            }),
+          )}
+        >
+          <icons.X />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+const maskImage =
+  'linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)';
+
+const rainbowLayer = (
+  <>
+    <div
+      className="absolute inset-0 z-[-1]"
+      style={
+        {
+          maskImage,
+          maskComposite: 'intersect',
+          animation: 'fd-moving-banner 16s linear infinite',
+          '--start': 'rgba(0,87,255,0.5)',
+          '--mid': 'rgba(255,0,166,0.77)',
+          '--end': 'rgba(255,77,0,0.4)',
+          '--via': 'rgba(164,255,68,0.4)',
+          animationDirection: 'reverse',
+          backgroundImage:
+            'repeating-linear-gradient(60deg, var(--end), var(--start) 2%, var(--start) 5%, transparent 8%, transparent 14%, var(--via) 18%, var(--via) 22%, var(--mid) 28%, var(--mid) 30%, var(--via) 34%, var(--via) 36%, transparent, var(--end) calc(50% - 12px))',
+          backgroundSize: '200% 100%',
+          mixBlendMode: 'difference',
+        } as object
+      }
+    />
+    <div
+      className="absolute inset-0 z-[-1]"
+      style={
+        {
+          maskImage,
+          maskComposite: 'intersect',
+          animation: 'fd-moving-banner 20s linear infinite',
+          '--start': 'rgba(255,120,120,0.5)',
+          '--mid': 'rgba(36,188,255,0.4)',
+          '--end': 'rgba(64,0,255,0.51)',
+          '--via': 'rgba(255,89,0,0.56)',
+          backgroundImage:
+            'repeating-linear-gradient(45deg, var(--end), var(--start) 4%, var(--start) 8%, transparent 9%, transparent 14%, var(--mid) 16%, var(--mid) 20%, transparent, var(--via) 36%, var(--via) 40%, transparent 42%, var(--end) 46%, var(--end) calc(50% - 16.8px))',
+          backgroundSize: '200% 100%',
+          mixBlendMode: 'color-dodge',
+        } as object
+      }
+    />
+    <style>
+      {`@keyframes fd-moving-banner {
+            from { background-position: 0% 0;  }
+            to { background-position: 100% 0;  }
+         }`}
+    </style>
+  </>
+);

package/src/fuma/mdx/fuma-banner-suit.tsx

@@ -1,16 +1,31 @@
 'use client'
 
-import { Banner } from 'fumadocs-ui/components/banner';
+import { Banner } from './banner';
 import { useTranslations } from 'next-intl';
+import { cn } from '@lib/utils';
 
-export function FumaBannerSuit({ showText }: { showText: boolean }) {
+export function FumaBannerSuit({ showBanner }: { showBanner: boolean }) {
   const t = useTranslations('home');
+  const heightValue = showBanner ? 3 : 0.5;
+  const height= `${heightValue}rem`;
   return (
-    showText ?
-      (<Banner variant="rainbow" changeLayout={true}>
-        <p className="text-xl">{t('banner')}</p>
-      </Banner>)
-      : (<Banner variant="normal" changeLayout={true} className="bg-white dark:bg-[rgb(10,10,10)]"/>)
+    <>
+      {/* 设置 header 的 top 位置为 Banner 的底部，避免间隙 */}
+      {showBanner ? (
+        <Banner variant="rainbow" changeLayout={true} height={heightValue}>
+          <p className="text-xl">{t('banner')}</p>
+        </Banner>
+      ) : (
+        <div
+          className="fixed top-0 left-0 w-screen z-[1001] m-0 rounded-none bg-neutral-100 dark:bg-neutral-900"
+          style={{
+            height: height,
+            minHeight: height,
+            maxHeight: height,
+          }}
+        />
+      )}
+    </>
   );
 }
 

package/src/main/ai-prompt-textarea.tsx

@@ -0,0 +1,259 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+interface AIPromptTextareaProps {
+  /**
+   * Textarea value reference
+   */
+  value: string
+  /**
+   * Textarea value change handler
+   */
+  onChange: (value: string) => void
+  /**
+   * Word limit value reference
+   */
+  isWordLimit: boolean
+  /**
+   * Word limit value change handler
+   */
+  onWordLimitChange: (isLimit: boolean) => void
+  /**
+   * Placeholder
+   */
+  placeholder?: string
+  /**
+   * Disabled switch condition, default is false
+   */
+  disabled?: boolean
+  /**
+   * Maximum words
+   */
+  maxWords?: number
+  /**
+   * Word count unit title
+   */
+  wordUnitTitle?: string
+  /**
+   * Minimum height, px
+   */
+  minHeight?: number
+  /**
+   * Maximum height, px
+   */
+  maxHeight?: number
+  /**
+   * Word count switch, default is true
+   */
+  showWordCount?: boolean
+  /**
+   * Auto scroll switch, default is true
+   */
+  autoScroll?: boolean
+  /**
+   * Extra scroll space, px
+   */
+  extraScrollSpace?: number
+  /**
+   * Custome tailwindcss style
+   */
+  className?: string
+  /**
+   * Title text, if not provided, no title will be rendered
+   */
+  title?: string
+  /**
+   * Description text
+   */
+  description?: string
+  /**
+   * Embed title inside textarea, default is false
+   */
+  embed?: boolean
+}
+
+export function AIPromptTextarea({
+  value,
+  onChange,
+  placeholder = "Enter your prompt...",
+  disabled = false,
+  maxWords = 400,
+  wordUnitTitle = "words",
+  minHeight = 150,
+  maxHeight = 300,
+  className = "",
+  showWordCount = true,
+  autoScroll = true,
+  extraScrollSpace = 100,
+  isWordLimit,
+  onWordLimitChange,
+  title,
+  description,
+  embed = false
+}: AIPromptTextareaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  // count words
+  const wordArray = value.trim().split(/\s+/).filter(Boolean)
+  const wordCount = wordArray.length
+
+  // auto adjust textarea height
+  const adjustTextareaHeight = () => {
+    if (textareaRef.current) {
+      const textarea = textareaRef.current
+      const oldHeight = textarea.style.height
+      
+      // reset height
+      textarea.style.height = 'auto'
+      
+      // calculate content height
+      const contentHeight = textarea.scrollHeight
+      
+      // auto adjust height between min and max height
+      let newHeight = Math.max(contentHeight, minHeight)
+      newHeight = Math.min(newHeight, maxHeight)
+      
+      textarea.style.height = `${newHeight}px`
+      
+      // if content height is greater than max height, show scrollbar
+      if (contentHeight > maxHeight) {
+        textarea.style.overflowY = 'auto'
+      } else {
+        textarea.style.overflowY = 'hidden'
+      }
+      
+      // if height increased and auto scroll is enabled, scroll to appropriate position
+      if (autoScroll && (newHeight > parseInt(oldHeight) || !oldHeight)) {
+        setTimeout(() => {
+          const rect = textarea.getBoundingClientRect()
+          window.scrollTo({
+            top: window.pageYOffset + rect.bottom + extraScrollSpace - window.innerHeight,
+            behavior: 'smooth'
+          })
+        }, 0)
+      }
+    }
+  }
+
+  // when value changes, adjust height
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      adjustTextareaHeight()
+    }, 0)
+    return () => clearTimeout(timer)
+  }, [value, minHeight, maxHeight, autoScroll, extraScrollSpace])
+
+  // handle input, limit max words
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const inputValue = e.target.value
+    const words = inputValue.trim().split(/\s+/).filter(Boolean)
+    
+    // if already reached max words, and this input will exceed limit, do not update
+    if (wordCount >= maxWords && words.length > maxWords) {
+      onWordLimitChange(true)
+      return
+    }
+    
+    if (words.length > maxWords) {
+      onChange(words.slice(0, maxWords).join(' '))
+      onWordLimitChange(true)
+    } else {
+      onChange(inputValue)
+      onWordLimitChange(false)
+    }
+  }
+
+  // when paste, also check word count
+  const handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    const paste = e.clipboardData.getData('text')
+    const currentWords = value.trim().split(/\s+/).filter(Boolean)
+    const pasteWords = paste.trim().split(/\s+/).filter(Boolean)
+    
+    if (currentWords.length >= maxWords) {
+      e.preventDefault()
+      onWordLimitChange(true)
+      return
+    }
+    
+    // only allow paste remaining words
+    const allowed = maxWords - currentWords.length
+    if (pasteWords.length > allowed) {
+      e.preventDefault()
+      const newWords = currentWords.concat(pasteWords.slice(0, allowed))
+      onChange(newWords.join(' '))
+      onWordLimitChange(true)
+    }
+  }
+
+  // 渲染标题组件
+  const renderTitle = () => {
+    if (title?.trim()) return null
+    
+    return (
+      <div className="space-y-1">
+        {title && <span className="text-xl font-semibold text-foreground">{title}</span>}
+        {description?.trim() && <span className="text-sm text-gray-400 ml-1">{description}</span>}
+      </div>
+    )
+  }
+
+  // 渲染textarea组件
+  const renderTextarea = (isEmbedded = false) => (
+    <textarea
+      ref={textareaRef}
+      value={value}
+      onChange={handleInputChange}
+      onPaste={handlePaste}
+      placeholder={placeholder}
+      disabled={disabled}
+      className={`w-full p-4 bg-transparent ${isEmbedded ? 'border-0' : 'border-2 border-border rounded-lg'} focus:outline-none focus:border-purple-400 hover:border-purple-500 transition-colors text-foreground placeholder-muted-foreground placeholder:text-base disabled:bg-muted disabled:cursor-not-allowed resize-none ${className}`}
+      style={{ minHeight: `${minHeight}px` }}
+    />
+  )
+
+  // 渲染单词计数
+  const renderWordCount = () => {
+    if (!showWordCount) return null
+    
+    return (
+      <div className="flex justify-end">
+        <span
+          className={`text-sm ${
+            wordCount >= maxWords ? 'text-red-500' : wordCount > maxWords * 0.75 ? 'text-orange-500' : 'text-muted-foreground'
+          } ${isWordLimit ? 'animate-bounce' : ''}`}
+          onAnimationEnd={() => onWordLimitChange(false)}
+        >
+          {wordCount}/{maxWords} {wordUnitTitle}
+        </span>
+      </div>
+    )
+  }
+
+  // 如果有标题且需要嵌入，则渲染内部标题布局
+  if (embed && (title)) {
+    return (
+      <div className="space-y-2">
+        <div className="border-2 border-border rounded-lg bg-transparent">
+          <div className="p-4 pb-2">
+            {renderTitle()}
+          </div>
+          <hr className="border-t-1 border-border" />
+          <div className="p-1">
+            {renderTextarea(true)}
+          </div>
+        </div>
+        {renderWordCount()}
+      </div>
+    )
+  }
+
+  // 默认布局：外部标题或无标题
+  return (
+    <div className="space-y-2">
+      {renderTitle()}
+      {renderTextarea()}
+      {renderWordCount()}
+    </div>
+  )
+} 

package/src/styles/fuma.css

@@ -1,47 +1,14 @@
+
 /* Has Banner */
-.has-banner .sticky.top-0.z-40 {
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100vw !important;
-  z-index: 1001 !important;
-  height: 3rem !important;
-  min-height: 3rem !important;
-  max-height: 3rem !important;
-  margin: 0 !important;
-  border-radius: 0 !important;
-}
 .has-banner header#nd-nav {
   top: 2.5rem !important;
 }
 
 /* No Banner */
-.no-banner .sticky.top-0.z-40 {
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100vw !important;
-  z-index: 1001 !important;
-  height: 0.5rem !important;
-  min-height: 0.5rem !important;
-  max-height: 0.5rem !important;
-  margin: 0 !important;
-  border-radius: 0 !important;
-}
 .no-banner header#nd-nav {
   top: 0rem !important;
 }
 
-/* Banner */
-.has-banner main,
-.has-banner .main-content {
-  padding-top: 3rem; 
-}
-.no-banner main,
-.no-banner .main-content {
-  padding-top: 0.5rem; 
-}
-
 /* Custome Fuma Steps */
 .fd-step::before {
   @apply size-5 -start-2.5 rounded-full;
@@ -136,4 +103,4 @@
 div[role="dialog"].rounded-lg.border.bg-fd-popover {
   min-width: 150px !important;
   /* max-width: 150px !important; */
-}
+}