@coze-arch/cli 0.0.1-alpha.307a2b → 0.0.1-alpha.3260db

package/lib/__templates__/taro/README.md

@@ -10,7 +10,7 @@
 - **样式**: TailwindCSS 4.1.18
 - **Tailwind 适配层**: weapp-tailwindcss 4.9.2
 - **状态管理**: Zustand 5.0.9
-- **图标库**: lucide-react 0.511.0
+- **图标库**: lucide-react-taro latest
 - **工程化**: Vite 4.2.0
 - **包管理**: pnpm
 - **运行时**: Node.js >= 18
@@ -28,7 +28,7 @@
 │   ├── dev.ts                # 开发环境配置
 │   └── prod.ts               # 生产环境配置
 ├── server/                   # NestJS 后端服务
-│   └── src/  
+│   └── src/
 │       ├── main.ts           # 服务入口
 │       ├── app.module.ts     # 根模块
 │       ├── app.controller.ts # 应用控制器
@@ -237,8 +237,8 @@ Network 是对 Taro.request、Taro.uploadFile、Taro.downloadFile 的封装，
 import { Network } from '@/network'
 
 // GET 请求
-const data = await Network.request({ 
-  url: '/api/hello' 
+const data = await Network.request({
+  url: '/api/hello'
 })
 
 // POST 请求
@@ -267,8 +267,8 @@ await Network.downloadFile({
 import Taro from '@tarojs/taro'
 
 // ❌ 会导致自动域名拼接无法生效，除非是特殊指定域名
-const data = await Network.request({ 
-  url: 'http://localhost/api/hello' 
+const data = await Network.request({
+  url: 'http://localhost/api/hello'
 })
 
 // ❌ 不要直接使用 Taro.request
@@ -344,23 +344,29 @@ const router = useRouter()
 const { id } = router.params
 ```
 
-### 图标使用 (lucide-react)
+### 图标使用 (lucide-react-taro)
+
+**IMPORTANT: 禁止使用 lucide-react，必须使用 lucide-react-taro 替代。**
 
-项目集成了 [lucide-react](https://lucide.dev/) 图标库，提供丰富的 SVG 图标：
+lucide-react-taro 是 Lucide 图标库的 Taro 适配版本，专为小程序环境优化，API 与 lucide-react 一致：
 
 ```tsx
 import { View } from '@tarojs/components'
-import { Home, Settings, User, Search, Heart, Star } from 'lucide-react'
+import { House, Settings, User, Search, Camera, Zap } from 'lucide-react-taro'
 
 const IconDemo = () => {
   return (
     <View className="flex gap-4">
-      <Home size={24} color="#333" />
-      <Settings size={24} className="text-blue-500" />
-      <User size={20} strokeWidth={1.5} />
-      <Search size={24} />
-      <Heart size={24} fill="red" color="red" />
-      <Star size={24} className="text-yellow-500" />
+      {/* 基本用法 */}
+      <House />
+      {/* 自定义尺寸和颜色 */}
+      <Settings size={32} color="#1890ff" />
+      {/* 自定义描边宽度 */}
+      <User size={24} strokeWidth={1.5} />
+      {/* 绝对描边宽度（描边不随 size 缩放） */}
+      <Camera size={48} strokeWidth={2} absoluteStrokeWidth />
+      {/* 组合使用 */}
+      <Zap size={32} color="#ff6b00" strokeWidth={1.5} className="my-icon" />
     </View>
   )
 }
@@ -368,12 +374,66 @@ const IconDemo = () => {
 
 常用属性：
 - `size` - 图标大小（默认 24）
-- `color` - 图标颜色
+- `color` - 图标颜色（默认 currentColor，小程序中建议显式设置）
 - `strokeWidth` - 线条粗细（默认 2）
-- `className` - 支持 Tailwind 类名
+- `absoluteStrokeWidth` - 绝对描边宽度，启用后描边不随 size 缩放
+- `className` / `style` - 自定义样式
 
 更多图标请访问：https://lucide.dev/icons
 
+### TabBar 图标生成 (CLI 工具)
+
+**IMPORTANT: 微信小程序的 TabBar 不支持 base64 或 SVG 图片，必须使用本地 PNG 文件。**
+
+lucide-react-taro 提供了 CLI 工具来生成 TabBar 所需的 PNG 图标：
+
+```bash
+# 生成带选中状态的图标
+npx taro-lucide-tabbar House Settings User -c "#999999" -a "#1890ff"
+
+# 指定输出目录和尺寸
+npx taro-lucide-tabbar House Settings User -c "#999999" -a "#1890ff" -o ./src/assets/tabbar -s 81
+```
+
+CLI 参数：
+- `--color, -c` (默认 #000000): 图标颜色
+- `--active-color, -a`: 选中状态颜色
+- `--size, -s` (默认 81): 图标尺寸
+- `--output, -o` (默认 ./tabbar-icons): 输出目录
+- `--stroke-width` (默认 2): 描边宽度
+
+在 `app.config.ts` 中使用生成的图标：
+
+```typescript
+export default defineAppConfig({
+  tabBar: {
+    color: '#999999',
+    selectedColor: '#1890ff',
+    backgroundColor: '#ffffff',
+    borderStyle: 'black',
+    list: [
+      {
+        pagePath: 'pages/index/index',
+        text: '首页',
+        iconPath: './assets/tabbar/house.png',
+        selectedIconPath: './assets/tabbar/house-active.png',
+      },
+      {
+        pagePath: 'pages/settings/index',
+        text: '设置',
+        iconPath: './assets/tabbar/settings.png',
+        selectedIconPath: './assets/tabbar/settings-active.png',
+      },
+      {
+        pagePath: 'pages/user/index',
+        text: '用户',
+        iconPath: './assets/tabbar/user.png',
+        selectedIconPath: './assets/tabbar/user-active.png',
+      },
+    ],
+  },
+})
+
 ### Tailwind CSS 样式开发
 
 IMPORTANT：必须使用 tailwindcss 实现样式，只有在必要情况下才能 fallback 到 css / less

package/lib/__templates__/taro/package.json

@@ -19,7 +19,8 @@
     "lint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
     "new": "taro new",
     "preview:weapp": "taro build --type weapp --preview",
-    "tsc": "npx tsc --noEmit --skipLibCheck"
+    "tsc": "npx tsc --noEmit --skipLibCheck",
+    "validate": "pnpm exec concurrently -n lint,tsc -c red,blue \"pnpm lint:build\" \"pnpm tsc\""
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [
@@ -43,7 +44,7 @@
     "@tarojs/shared": "4.1.9",
     "@tarojs/taro": "4.1.9",
     "drizzle-kit": "^0.31.8",
-    "lucide-react": "^0.511.0",
+    "lucide-react-taro": "^1.1.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "zustand": "^5.0.9"
@@ -58,6 +59,7 @@
     "@tarojs/plugin-generator": "4.1.9",
     "@tarojs/plugin-mini-ci": "^4.1.9",
     "@tarojs/vite-runner": "4.1.9",
+    "@types/dotenv": "^8.2.3",
     "@types/minimatch": "^5",
     "@types/react": "^18.0.0",
     "@vitejs/plugin-react": "^4.3.0",