初始提交：一场soul的创业实验-永平网站与小程序

Made-with: Cursor
2026-03-07 22:58:43 +08:00
commit b7c35a89b0
513 changed files with 89020 additions and 0 deletions
--- a/miniprogram/components/icon/README.md
+++ b/miniprogram/components/icon/README.md
@@ -0,0 +1,175 @@
+# Icon 图标组件
+
+SVG 图标组件，参考 lucide-react 实现，用于在小程序中使用矢量图标。
+
+**技术实现**: 使用 Base64 编码的 SVG + image 组件（小程序不支持直接使用 SVG 标签）
+
+---
+
+## 使用方法
+
+### 1. 在页面 JSON 中引入组件
+
+```json
+{
+  "usingComponents": {
+    "icon": "/components/icon/icon"
+  }
+}
+```
+
+### 2. 在 WXML 中使用
+
+```xml
+<!-- 基础用法 -->
+<icon name="share" size="48" color="#00CED1"></icon>
+
+<!-- 分享图标 -->
+<icon name="share" size="40" color="#ffffff"></icon>
+
+<!-- 箭头图标 -->
+<icon name="arrow-up-right" size="32" color="#00CED1"></icon>
+
+<!-- 搜索图标 -->
+<icon name="search" size="44" color="#ffffff"></icon>
+
+<!-- 返回图标 -->
+<icon name="chevron-left" size="48" color="#ffffff"></icon>
+
+<!-- 心形图标 -->
+<icon name="heart" size="40" color="#E91E63"></icon>
+```
+
+---
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|-----|------|--------|-----|
+| name | String | 'share' | 图标名称 |
+| size | Number | 48 | 图标大小（rpx） |
+| color | String | 'currentColor' | 图标颜色 |
+| customClass | String | '' | 自定义类名 |
+| customStyle | String | '' | 自定义样式 |
+
+---
+
+## 可用图标
+
+| 图标名称 | 说明 | 对应 lucide-react |
+|---------|------|-------------------|
+| `share` | 分享 | `<Share2>` |
+| `arrow-up-right` | 右上箭头 | `<ArrowUpRight>` |
+| `chevron-left` | 左箭头 | `<ChevronLeft>` |
+| `search` | 搜索 | `<Search>` |
+| `heart` | 心形 | `<Heart>` |
+
+---
+
+## 添加新图标
+
+在 `icon.js` 的 `getSvgPath` 方法中添加新图标：
+
+```javascript
+getSvgPath(name) {
+  const svgMap = {
+    'new-icon': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><!-- SVG path 数据 --></svg>',
+    // ... 其他图标
+  }
+  return svgMap[name] || ''
+}
+```
+
+**获取 SVG 代码**: 访问 [lucide.dev](https://lucide.dev) 搜索图标，复制 SVG 内容。
+**注意**: 颜色使用 `COLOR` 占位符，组件会自动替换。
+
+---
+
+## 样式定制
+
+### 1. 使用 customClass
+
+```xml
+<icon name="share" size="48" color="#00CED1" customClass="my-icon-class"></icon>
+```
+
+```css
+.my-icon-class {
+  opacity: 0.8;
+}
+```
+
+### 2. 使用 customStyle
+
+```xml
+<icon name="share" size="48" color="#ffffff" customStyle="opacity: 0.8; margin-right: 10rpx;"></icon>
+```
+
+---
+
+## 技术说明
+
+### 为什么使用 Base64 + image？
+
+1. **矢量图标**：任意缩放不失真
+2. **灵活着色**：通过 `COLOR` 占位符动态改变颜色
+3. **轻量级**：无需加载字体文件或外部图片
+4. **兼容性**：小程序不支持直接使用 SVG 标签，image 组件支持 Base64 SVG
+
+### 为什么不用字体图标？
+
+小程序对字体文件有限制，Base64 编码字体文件会增加包体积，SVG 图标更轻量。
+
+### 与 lucide-react 的对应关系
+
+- **lucide-react**: React 组件库，使用 SVG
+- **本组件**: 小程序自定义组件，也使用 SVG
+- **SVG path 数据**: 完全相同，从 lucide 官网复制
+
+---
+
+## 示例
+
+### 悬浮分享按钮
+
+```xml
+<button class="fab-share" open-type="share">
+  <icon name="share" size="48" color="#ffffff"></icon>
+</button>
+```
+
+```css
+.fab-share {
+  position: fixed;
+  right: 32rpx;
+  bottom: calc(120rpx + env(safe-area-inset-bottom));
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+```
+
+---
+
+## 扩展图标库
+
+可以继续添加更多 lucide-react 图标：
+
+- `star` - 星星
+- `wallet` - 钱包
+- `gift` - 礼物
+- `info` - 信息
+- `settings` - 设置
+- `user` - 用户
+- `book-open` - 打开的书
+- `eye` - 眼睛
+- `clock` - 时钟
+- `users` - 用户组
+
+---
+
+**图标组件创建完成！** 🎉