sparkdesign 0.4.2 → 0.4.4

package/README.md

@@ -2,7 +2,7 @@
 
 现代化 React 设计系统，支持双维度主题（颜色 theme + 布局 scale），5 种内置布局风格，提供 Basic 基础组件与 Chat 对话流组件，可扩展颜色主题。
 
-**当前版本**：`0.3.1`（[变更说明](docs/NPM发布指南.md)）
+**当前版本**：`0.4.4`（[变更说明](docs/NPM发布指南.md)）
 
 > 🌟 **纯新手？** 查看 [快速上手指南-新手版](docs/快速上手指南-新手版.md)，一步步带你跑起来！
 
@@ -24,6 +24,8 @@
 | **npm 安装** | 直接引用、不改源码 | `npm install sparkdesign` |
 | **CLI 按需引入** | 复制源码到项目、可自由修改 | `npx sparkdesign init` → `npx sparkdesign add button` |
 
+**发布模型**：`sparkdesign` 是唯一发布到 npm 的包。CLI 不是第二个独立 npm 包，而是根包中的 `bin` 入口；因此用户侧既可以 `npm install sparkdesign`，也可以直接 `npx sparkdesign@latest add button`。
+
 ---
 
 ## 安装（npm 包）
@@ -34,7 +36,7 @@ npm install sparkdesign
 
 **依赖**：需自行安装 `react`、`react-dom`（>=18）。
 
-### 按需引入（CLI）
+### 按需引入（CLI，推荐）
 
 若希望**将组件源码复制到项目中**并自由修改，可使用 CLI：
 

package/cli/dist/commands/add.js

@@ -8,6 +8,7 @@
 import path from 'node:path';
 import fs from 'fs-extra';
 import chalk from 'chalk';
+import { execa } from 'execa';
 import { readConfig, writeConfig, getComponentsBaseAlias, resolveTargetDir } from '../utils/config.js';
 import { getRegistryRoot, getComponentMeta, getComponentSource } from '../utils/registry.js';
 import { stripL3Header, transformImports } from '../utils/transform.js';
@@ -78,7 +79,15 @@ export async function add(components, options = {}) {
     }
     if (allDeps.size > 0) {
         console.log('');
-        console.log(chalk.cyan('Dependencies (install if needed):'));
-        console.log('  npm install', Array.from(allDeps).join(' '));
+        console.log(chalk.cyan('Installing dependencies...'));
+        const depsArray = Array.from(allDeps);
+        try {
+            await execa('npm', ['install', ...depsArray], { cwd, stdio: 'inherit' });
+            console.log(chalk.green('✓'), 'Installed', depsArray.length, 'dependencies');
+        }
+        catch {
+            console.log(chalk.yellow('○'), 'Auto-install failed. Run manually:');
+            console.log('  npm install', depsArray.join(' '));
+        }
     }
 }

package/cli/registry/chat/markdown.tsx

@@ -134,7 +134,7 @@ export function MarkdownBody({ children, className }: MarkdownBodyProps) {
     <div className={cn('markdown-body text-sm leading-sm text-text', className)}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm, remarkMath]}
-        rehypePlugins={[rehypeKatex]}
+        rehypePlugins={[rehypeKatex as any]}
         components={markdownComponents}
       >
         {children}

package/cli/registry/chat/tool-invocation-card.tsx

@@ -1,7 +1,7 @@
 import { memo, useState } from 'react'
 import { cn } from '@/lib/utils'
 import type { ReactNode } from 'react'
-import { TimeLine, CheckboxCircleLine, CloseCircleLine, ArrowRightLine } from '../basic/icons-inline'
+import { TimeLine, CheckboxCircleLine, CloseCircleLine, ArrowDownSLine } from '../basic/icons-inline'
 import { Scrollbar } from '../basic/scrollbar'
 
 export type ToolInvocationStatus = 'running' | 'success' | 'error'
@@ -17,7 +17,7 @@ export interface ToolInvocationCardProps {
   timeIcon?: ReactNode
   checkboxCircleIcon?: ReactNode
   closeCircleIcon?: ReactNode
-  arrowRightIcon?: ReactNode
+  arrowDownIcon?: ReactNode
   runningText?: string
   ranText?: string
   failedText?: string
@@ -42,7 +42,7 @@ export const ToolInvocationCard = memo(function ToolInvocationCard({
   timeIcon,
   checkboxCircleIcon,
   closeCircleIcon,
-  arrowRightIcon,
+  arrowDownIcon,
   runningText = 'Running',
   ranText = 'Ran',
   failedText = 'Failed',
@@ -62,7 +62,7 @@ export const ToolInvocationCard = memo(function ToolInvocationCard({
   const defaultTime = timeIcon ?? <TimeLine className={timeClass} />
   const defaultCheck = checkboxCircleIcon ?? <CheckboxCircleLine className={checkboxClass} />
   const defaultCloseCircle = closeCircleIcon ?? <CloseCircleLine className={closeCircleClass} />
-  const defaultArrow = arrowRightIcon ?? <ArrowRightLine className={arrowClass} />
+  const defaultArrow = arrowDownIcon ?? <ArrowDownSLine className={arrowClass} />
 
   return (
     <div className={cn('flex flex-col', className)}>
@@ -96,7 +96,7 @@ export const ToolInvocationCard = memo(function ToolInvocationCard({
               'shrink-0 inline-flex items-center justify-center',
               'opacity-0 group-hover:opacity-100',
               isExpanded && '!opacity-100',
-              isExpanded ? 'rotate-90' : 'rotate-0'
+              isExpanded ? 'rotate-180' : 'rotate-0'
             )}
           >
             {defaultArrow}