@lmy54321/design-system 1.3.6 → 1.3.8

package/.codebuddy/rules/init-project.mdc

@@ -7,6 +7,27 @@ provider:
 
 # 项目一键初始化流程
 
+## ⚡ 推荐方式：使用 init 命令（最简单）
+
+**如果用户要求初始化项目，首先检查他是否要求运行 `npx @lmy54321/design-system init`。**
+
+如果用户说的是"帮我搭建项目"或"初始化项目"等类似表述，**直接建议**：
+
+```
+你只需要告诉我：
+"请帮我运行 npx @lmy54321/design-system init"
+
+这个命令会自动完成所有步骤（创建项目、安装依赖、复制模板、启动服务器），你就不用担心配置问题了！
+```
+
+然后执行 `npx @lmy54321/design-system init` 命令。
+
+---
+
+## 📖 手动步骤流程（备选方案）
+
+如果用户明确要求**手动执行各个步骤**或命令不可用，按以下步骤自动执行：
+
 > **核心原则：假设用户的电脑是全新的，没有任何开发环境，用户也不懂编程。所有步骤必须 AI 全自动完成，不让用户做任何手动操作。**
 
 按以下步骤自动执行，**无需用户确认每一步**：

package/dist/index.js

@@ -3761,7 +3761,7 @@ function GridSystemDocs() {
 }
 
 // index.ts
-var VERSION = "1.3.6";
+var VERSION = "1.3.8";
 
 exports.ActionSheet = ActionSheet;
 exports.BottomActionButtons = BottomActionButtons;

package/dist/index.mjs

@@ -3740,7 +3740,7 @@ function GridSystemDocs() {
 }
 
 // index.ts
-var VERSION = "1.3.6";
+var VERSION = "1.3.8";
 
 export { ActionSheet, BottomActionButtons, BottomNavigationBar, BottomSheet, BottomSheetOption, BottomSheetShareItem, BottomToolbar, Btn, BubbleTip, CardDemo, DRAWER_STATES, Dialog, DraggablePanel, EmptyState, GridSystemDocs, ICON_GROUPS, ICON_NAMES, IcExpand, IcPlan, IconFont, IconGallery, ImageWithFallback, Loading, NewsItem, NotificationBar, POIListItem, PoiItem, Push, SearchBox, SegmentedControl, StatGrid, Switch, Tag, TencentMap, Toast, TopToolbar, TypographyDocs, VERSION, cn, hasFilledVariant };
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@lmy54321/design-system",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "description": "A comprehensive React component library and design system based on Tailwind CSS and Motion.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "bin": {
+    "design-system-init": "./scripts/init.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -19,6 +22,7 @@
     "dist",
     "styles",
     "template",
+    "scripts",
     "!template/public/images",
     ".codebuddy/rules/design-system.mdc",
     ".codebuddy/rules/init-project.mdc"
@@ -29,6 +33,7 @@
     "build:demo": "vite build --config vite.demo.config.ts && mv demo-dist/demo.html demo-dist/index.html && node scripts/gen-demo-manifest.mjs",
     "build:check": "tsc --noEmit",
     "prepublishOnly": "npm run build",
+    "init": "node scripts/init.mjs",
     "lint": "eslint .",
     "test": "vitest"
   },

package/scripts/gen-demo-manifest.mjs

@@ -0,0 +1,52 @@
+/**
+ * 构建后脚本：扫描 demo-dist/ 中的所有文件，
+ * 生成 demo-manifest.json（路径 + SHA-1，不含文件内容），
+ * 供 DeployPage 在浏览器中上传到 Netlify。
+ *
+ * 文件内容通过 dev server 的 /demo-dist/... 路径按需获取。
+ */
+import fs from "fs";
+import path from "path";
+import crypto from "crypto";
+
+const DIST_DIR = path.resolve(process.cwd(), "demo-dist");
+const OUTPUT = path.resolve(process.cwd(), "public/demo-manifest.json");
+
+function walkDir(dir, base = "") {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    if (entry.name.startsWith(".")) continue;
+    const fullPath = path.join(dir, entry.name);
+    const relPath = base ? `${base}/${entry.name}` : entry.name;
+    if (entry.isDirectory()) {
+      files.push(...walkDir(fullPath, relPath));
+    } else {
+      const buf = fs.readFileSync(fullPath);
+      const sha1 = crypto.createHash("sha1").update(buf).digest("hex");
+      files.push({
+        path: "/" + relPath,
+        sha1,
+        size: buf.length,
+      });
+    }
+  }
+  return files;
+}
+
+console.log("Scanning demo-dist/...");
+const files = walkDir(DIST_DIR);
+const manifest = {
+  buildTime: new Date().toISOString(),
+  fileCount: files.length,
+  totalSize: files.reduce((s, f) => s + f.size, 0),
+  files,
+};
+
+fs.writeFileSync(OUTPUT, JSON.stringify(manifest));
+const manifestSize = Buffer.byteLength(JSON.stringify(manifest));
+console.log(
+  `Generated demo-manifest.json: ${files.length} files, ` +
+    `total ${(manifest.totalSize / 1024 / 1024).toFixed(1)} MB, ` +
+    `manifest ${(manifestSize / 1024).toFixed(1)} KB`
+);

package/scripts/init.mjs

@@ -0,0 +1,157 @@
+#!/usr/bin/env node
+
+import { execSync } from 'child_process';
+import { existsSync, mkdirSync, copyFileSync, cpSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// 获取脚本所在目录（npm 包目录）
+const packageDir = resolve(__dirname, '..');
+const cwd = process.cwd();
+
+console.log('\n🚀 @lmy54321/design-system 项目初始化\n');
+console.log(`📂 初始化位置: ${cwd}\n`);
+
+// ============================================================
+// 步骤 1: 创建 Vite 项目
+// ============================================================
+
+console.log('📦 步骤 1/5: 创建 Vite 项目...');
+try {
+  execSync('npm create vite@latest . -- --template react-ts --yes', { 
+    cwd, 
+    stdio: 'inherit' 
+  });
+  console.log('✅ Vite 项目已创建\n');
+} catch (error) {
+  console.error('❌ 创建 Vite 项目失败');
+  process.exit(1);
+}
+
+// ============================================================
+// 步骤 2: 安装依赖（包括设计系统）
+// ============================================================
+
+console.log('📦 步骤 2/5: 安装依赖...');
+try {
+  execSync('npm install && npm install @lmy54321/design-system tailwindcss @tailwindcss/vite react-router-dom motion', { 
+    cwd, 
+    stdio: 'inherit' 
+  });
+  console.log('✅ 依赖安装完成\n');
+} catch (error) {
+  console.error('❌ 依赖安装失败');
+  process.exit(1);
+}
+
+// ============================================================
+// 步骤 3: 复制模板文件（关键！）
+// ============================================================
+
+console.log('📂 步骤 3/5: 复制完整模板...');
+try {
+  const templateDir = resolve(cwd, 'node_modules/@lmy54321/design-system/template');
+  
+  // 检查模板是否存在
+  if (!existsSync(templateDir)) {
+    throw new Error(`模板目录不存在: ${templateDir}`);
+  }
+
+  // 复制 src 目录
+  const srcDir = resolve(cwd, 'src');
+  const templateSrcDir = resolve(templateDir, 'src');
+  if (existsSync(srcDir)) {
+    execSync(`rm -rf ${srcDir}`, { shell: true });
+  }
+  cpSync(templateSrcDir, srcDir, { recursive: true });
+
+  // 复制配置文件
+  const filesToCopy = [
+    'index.html',
+    'vite.config.ts',
+    'tsconfig.json'
+  ];
+
+  for (const file of filesToCopy) {
+    const src = resolve(templateDir, file);
+    const dest = resolve(cwd, file);
+    if (existsSync(src)) {
+      copyFileSync(src, dest);
+    }
+  }
+
+  // 清理 Vite 自动生成的无关文件
+  const filesToRemove = [
+    'src/App.css',
+    'src/assets/react.svg',
+    'public/vite.svg',
+    'vite.config.js'
+  ];
+
+  for (const file of filesToRemove) {
+    const filePath = resolve(cwd, file);
+    if (existsSync(filePath)) {
+      execSync(`rm -f ${filePath}`, { shell: true });
+    }
+  }
+
+  console.log('✅ 模板文件已复制\n');
+} catch (error) {
+  console.error('❌ 复制模板失败:', error.message);
+  process.exit(1);
+}
+
+// ============================================================
+// 步骤 4: 同步规则文件到 .codebuddy/rules
+// ============================================================
+
+console.log('📋 步骤 4/5: 同步规则文件...');
+try {
+  const rulesDir = resolve(cwd, '.codebuddy/rules');
+  const packageRulesDir = resolve(cwd, 'node_modules/@lmy54321/design-system/.codebuddy/rules');
+
+  // 创建 .codebuddy/rules 目录
+  mkdirSync(rulesDir, { recursive: true });
+
+  // 复制规则文件
+  const rulesToCopy = [
+    'init-project.mdc',
+    'design-system.mdc'
+  ];
+
+  for (const rule of rulesToCopy) {
+    const src = resolve(packageRulesDir, rule);
+    const dest = resolve(rulesDir, rule);
+    if (existsSync(src)) {
+      copyFileSync(src, dest);
+    }
+  }
+
+  console.log('✅ 规则文件已同步\n');
+} catch (error) {
+  console.error('❌ 规则同步失败:', error.message);
+  process.exit(1);
+}
+
+// ============================================================
+// 步骤 5: 启动开发服务器
+// ============================================================
+
+console.log('🎉 步骤 5/5: 启动开发服务器...\n');
+try {
+  console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+  console.log('✨ 项目初始化完成！');
+  console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
+  console.log('🚀 启动开发服务器中...\n');
+  
+  execSync('npm run dev', { 
+    cwd, 
+    stdio: 'inherit' 
+  });
+} catch (error) {
+  console.error('❌ 启动开发服务器失败');
+  process.exit(1);
+}

package/template/src/pages/ComponentLibrary.tsx

@@ -1,27 +1,30 @@
 import React, { useState } from "react";
-import { cn } from "../../components/ui/utils";
-import { Btn } from "../../components/ui/Btn";
-import { Switch } from "../../components/ui/Switch";
-import { Tag } from "../../components/ui/Tag";
-import { Loading } from "../../components/ui/Loading";
-import { SegmentedControl } from "../../components/ui/SegmentedControl";
-import { SearchBox } from "../../components/ui/SearchBox";
-import { Dialog } from "../../components/ui/Dialog";
-import { Toast } from "../../components/ui/Toast";
-import { NotificationBar } from "../../components/ui/NotificationBar";
-import { ActionSheet } from "../../components/ui/ActionSheet";
-import { TopToolbar } from "../../components/ui/TopToolbar";
-import { BottomNavigationBar } from "../../components/ui/BottomNavigationBar";
-import { BottomActionButtons } from "../../components/ui/BottomActions/BottomActionButtons";
-import { DraggablePanel, DRAWER_STATES } from "../../components/ui/DraggablePanel";
-import { TypographyDocs } from "../../components/ui/TypographyDocs";
-import { GridSystemDocs } from "../../components/ui/GridSystemDocs";
-import { BubbleTip } from "../../components/ui/BubbleTip";
-import { Push } from "../../components/ui/Push";
-import { EmptyState } from "../../components/ui/EmptyState";
-import { StatGrid } from "../../components/ui/StatGrid";
-import { IconGallery } from "../../components/ui/IconGallery";
-import { CardDemo } from "../../components/ui/CardDemo";
+import {
+  cn,
+  Btn,
+  Switch,
+  Tag,
+  Loading,
+  SegmentedControl,
+  SearchBox,
+  Dialog,
+  Toast,
+  NotificationBar,
+  ActionSheet,
+  TopToolbar,
+  BottomNavigationBar,
+  BottomActionButtons,
+  DraggablePanel,
+  DRAWER_STATES,
+  TypographyDocs,
+  GridSystemDocs,
+  BubbleTip,
+  Push,
+  EmptyState,
+  StatGrid,
+  IconGallery,
+  CardDemo,
+} from "@lmy54321/design-system";
 
 // ============ Color System Data ============
 type ColorToken = {