tools-template-cli 0.1.0

package/supabase-expo-app/README.md

@@ -0,0 +1,179 @@
+# Supabase Expo User Management Template
+
+一个使用 Expo 和 Supabase 构建的用户管理 React Native 应用模板。
+
+## 功能特性
+
+- ✅ 用户注册/登录
+- ✅ 会话持久化（加密存储）
+- ✅ 个人资料管理
+- ✅ 头像上传
+- ✅ Row Level Security (RLS)
+- ✅ TypeScript
+- ✅ Expo SDK 54
+
+## 技术栈
+
+- **框架**: Expo (React Native)
+- **数据库**: Supabase (PostgreSQL)
+- **认证**: Supabase Auth
+- **存储**: Supabase Storage
+- **本地存储**: expo-secure-store + AsyncStorage (AES-256 加密)
+- **语言**: TypeScript
+
+## 快速开始
+
+### 方法一：使用 Supabase Skills 自动化部署（推荐）
+
+使用 OpenClaw 的 Supabase Skills 可以一键完成所有配置！
+
+```bash
+# 1. 运行自动化部署脚本
+npm run setup-supabase
+
+# 或者直接运行脚本
+./scripts/setup-supabase.sh
+```
+
+这个脚本会自动完成：
+- ✅ 创建 Supabase 项目
+- ✅ 部署数据库 Schema
+- ✅ 配置 RLS 策略
+- ✅ 创建存储桶
+- ✅ 配置认证
+- ✅ 生成环境变量文件
+
+详见 [SUPABASE_SKILLS_GUIDE.md](../SUPABASE_SKILLS_GUIDE.md) 获取完整教程。
+
+---
+
+### 方法二：手动配置
+
+#### 1. 创建 Supabase 项目
+
+访问 [database.new](https://database.new) 或 [Supabase Dashboard](https://supabase.com/dashboard) 创建新项目。
+
+#### 2. 设置数据库
+
+在 SQL Editor 中运行以下脚本：
+
+```sql
+-- 复制 supabase/schema.sql 的内容
+```
+
+这会创建：
+- `profiles` 表
+- RLS 策略
+- 用户触发器
+- `avatars` 存储桶
+
+#### 3. 配置环境变量
+
+```bash
+cp .env.example .env
+```
+
+编辑 `.env`：
+
+```env
+EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
+EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your_supabase_publishable_key
+```
+
+从 [API Keys 设置页面](https://supabase.com/dashboard/project/_/settings/api-keys) 获取密钥。
+
+### 4. 安装依赖
+
+```bash
+npm install
+```
+
+### 5. 启动应用
+
+```bash
+# 启动开发服务器
+npx expo start
+
+# iOS 模拟器
+npm run ios
+
+# Android 模拟器
+npm run android
+```
+
+## 项目结构
+
+```
+supabase-expo-app/
+├── components/
+│   ├── Auth.tsx            # 登录/注册组件
+│   ├── Account.tsx         # 账户管理组件
+│   └── Avatar.tsx          # 头像上传组件
+├── lib/
+│   └── supabase.ts         # Supabase 客户端（加密存储）
+├── supabase/
+│   └── schema.sql          # 数据库 Schema
+├── .env.example            # 环境变量示例
+├── App.tsx                 # 主应用组件
+├── app.json                # Expo 配置
+└── package.json
+```
+
+## 数据库表结构
+
+### profiles 表
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| id | uuid | 主键，关联 auth.users |
+| username | text | 用户名（唯一） |
+| full_name | text | 姓名 |
+| avatar_url | text | 头像 URL |
+| website | text | 网站 |
+| updated_at | timestamp | 更新时间 |
+
+## Row Level Security (RLS)
+
+- **SELECT**: 所有人可见
+- **INSERT**: 只能插入自己的资料
+- **UPDATE**: 只能更新自己的资料
+
+## 会话安全
+
+使用 AES-256 加密存储会话：
+
+1. 生成 256-bit 加密密钥
+2. 密钥存储在 Expo SecureStore
+3. 会话数据加密后存储在 AsyncStorage
+
+## 环境变量说明
+
+Expo 要求环境变量必须以 `EXPO_PUBLIC_` 开头：
+
+- `EXPO_PUBLIC_SUPABASE_URL` - Supabase 项目 URL
+- `EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY` - Supabase 发布密钥
+
+## 邮箱验证
+
+默认情况下，Supabase Auth 需要邮箱验证才能创建会话。
+
+测试时可禁用邮箱验证：
+1. 进入 [Auth Providers 设置](https://supabase.com/dashboard/project/_/auth/providers)
+2. 关闭 "Confirm email"
+
+## 下一步
+
+- 实现 [Deep Linking](https://supabase.com/docs/guides/auth/native-mobile-deep-linking?platform=react-native) 支持邮箱验证
+- 添加社交登录（Google, Apple 等）
+- 启用双因素认证
+
+## 相关资源
+
+- [Supabase 文档](https://supabase.com/docs)
+- [Expo 文档](https://docs.expo.dev)
+- [React Native 文档](https://reactnative.dev)
+- [完整示例](https://github.com/supabase/supabase/tree/master/examples/user-management/expo-user-management)
+
+## License
+
+MIT

package/supabase-expo-app/app.json

@@ -0,0 +1,34 @@
+{
+  "expo": {
+    "name": "supabase-expo-app",
+    "slug": "supabase-expo-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      "expo-sqlite",
+      "expo-secure-store"
+    ]
+  }
+}

package/supabase-expo-app/components/Account.tsx

@@ -0,0 +1,234 @@
+import { useState, useEffect, useCallback } from 'react'
+import { StyleSheet, View, Text, TextInput, TouchableOpacity, Alert, ActivityIndicator, Image } from 'react-native'
+import { supabase } from '../lib/supabase'
+import Avatar from './Avatar'
+
+interface AccountProps {
+  session: any
+}
+
+export default function Account({ session }: AccountProps) {
+  const [loading, setLoading] = useState(true)
+  const [username, setUsername] = useState('')
+  const [fullName, setFullName] = useState('')
+  const [website, setWebsite] = useState('')
+  const [avatarUrl, setAvatarUrl] = useState('')
+
+  useEffect(() => {
+    if (session) {
+      getProfile()
+    }
+  }, [session])
+
+  async function getProfile() {
+    try {
+      setLoading(true)
+      
+      const { data, error, status } = await supabase
+        .from('profiles')
+        .select(`username, full_name, website, avatar_url`)
+        .eq('id', session?.user?.id)
+        .single()
+
+      if (error && status !== 406) {
+        throw error
+      }
+
+      if (data) {
+        setUsername(data.username || '')
+        setFullName(data.full_name || '')
+        setWebsite(data.website || '')
+        setAvatarUrl(data.avatar_url || '')
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        Alert.alert('获取资料失败', error.message)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function updateProfile({
+    username,
+    fullName,
+    website,
+    avatar_url,
+  }: {
+    username: string
+    fullName: string
+    website: string
+    avatar_url: string
+  }) {
+    try {
+      setLoading(true)
+
+      const { error } = await supabase.from('profiles').upsert({
+        id: session?.user?.id,
+        username,
+        full_name: fullName,
+        website,
+        avatar_url: avatar_url,
+        updated_at: new Date().toISOString(),
+      })
+
+      if (error) throw error
+      Alert.alert('成功', '资料已更新!')
+    } catch (error) {
+      if (error instanceof Error) {
+        Alert.alert('更新资料失败', error.message)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSignOut = async () => {
+    await supabase.auth.signOut()
+  }
+
+  if (loading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#10b981" />
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>账户设置</Text>
+        <Text style={styles.subtitle}>{session?.user?.email}</Text>
+      </View>
+
+      <Avatar
+        size={100}
+        url={avatarUrl}
+        onUpload={(url: string) => {
+          setAvatarUrl(url)
+          updateProfile({ username, fullName, website, avatar_url: url })
+        }}
+      />
+
+      <View style={styles.form}>
+        <View style={styles.inputGroup}>
+          <Text style={styles.label}>用户名</Text>
+          <TextInput
+            style={styles.input}
+            value={username}
+            onChangeText={setUsername}
+            placeholder="输入用户名"
+          />
+        </View>
+
+        <View style={styles.inputGroup}>
+          <Text style={styles.label}>姓名</Text>
+          <TextInput
+            style={styles.input}
+            value={fullName}
+            onChangeText={setFullName}
+            placeholder="输入姓名"
+          />
+        </View>
+
+        <View style={styles.inputGroup}>
+          <Text style={styles.label}>网站</Text>
+          <TextInput
+            style={styles.input}
+            value={website}
+            onChangeText={setWebsite}
+            placeholder="https://example.com"
+            keyboardType="url"
+            autoCapitalize="none"
+          />
+        </View>
+
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => updateProfile({ username, fullName, website, avatar_url: avatarUrl })}
+          disabled={loading}
+        >
+          {loading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.buttonText}>更新资料</Text>
+          )}
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.signOutButton}
+          onPress={handleSignOut}
+        >
+          <Text style={styles.signOutText}>退出登录</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#fff',
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: 30,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 4,
+  },
+  form: {
+    gap: 16,
+    marginTop: 20,
+  },
+  inputGroup: {
+    gap: 8,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#333',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    padding: 14,
+    fontSize: 16,
+  },
+  button: {
+    backgroundColor: '#10b981',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  signOutButton: {
+    alignItems: 'center',
+    marginTop: 16,
+    padding: 12,
+  },
+  signOutText: {
+    color: '#ef4444',
+    fontSize: 14,
+  },
+})

package/supabase-expo-app/components/Auth.tsx

@@ -0,0 +1,161 @@
+import { useState } from 'react'
+import { StyleSheet, View, Text, TextInput, TouchableOpacity, Alert, ActivityIndicator } from 'react-native'
+import { supabase } from '../lib/supabase'
+
+interface AuthProps {
+  onAuthSuccess: () => void
+}
+
+export default function Auth({ onAuthSuccess }: AuthProps) {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [isSignUp, setIsSignUp] = useState(false)
+
+  async function signInWithEmail() {
+    setLoading(true)
+    const { error } = await supabase.auth.signInWithPassword({
+      email: email,
+      password: password,
+    })
+
+    if (error) {
+      Alert.alert('登录失败', error.message)
+    } else {
+      onAuthSuccess()
+    }
+    setLoading(false)
+  }
+
+  async function signUpWithEmail() {
+    setLoading(true)
+    const { error } = await supabase.auth.signUp({
+      email: email,
+      password: password,
+    })
+
+    if (error) {
+      Alert.alert('注册失败', error.message)
+    } else {
+      Alert.alert('注册成功', '请检查您的邮箱以验证账户')
+    }
+    setLoading(false)
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>用户管理</Text>
+        <Text style={styles.subtitle}>{isSignUp ? '创建新账户' : '登录您的账户'}</Text>
+      </View>
+
+      <View style={styles.form}>
+        <View style={styles.inputGroup}>
+          <Text style={styles.label}>邮箱</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="your@email.com"
+            value={email}
+            onChangeText={setEmail}
+            autoCapitalize="none"
+            keyboardType="email-address"
+          />
+        </View>
+
+        <View style={styles.inputGroup}>
+          <Text style={styles.label}>密码</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="••••••••"
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+            autoCapitalize="none"
+          />
+        </View>
+
+        <TouchableOpacity
+          style={styles.button}
+          onPress={isSignUp ? signUpWithEmail : signInWithEmail}
+          disabled={loading}
+        >
+          {loading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.buttonText}>{isSignUp ? '注册' : '登录'}</Text>
+          )}
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.switchButton}
+          onPress={() => setIsSignUp(!isSignUp)}
+        >
+          <Text style={styles.switchText}>
+            {isSignUp ? '已有账户？立即登录' : '没有账户？立即注册'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+  },
+  header: {
+    marginBottom: 40,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginTop: 8,
+  },
+  form: {
+    gap: 16,
+  },
+  inputGroup: {
+    gap: 8,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#333',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    padding: 14,
+    fontSize: 16,
+  },
+  button: {
+    backgroundColor: '#10b981',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  switchButton: {
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  switchText: {
+    color: '#10b981',
+    fontSize: 14,
+  },
+})