feat: initial commit - GitHub Stars Manager
This commit is contained in:
EchoZenith
380
screens/CategoryManageScreen.js
Normal file
380
screens/CategoryManageScreen.js
Normal file
@@ -0,0 +1,380 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
View, Text, StyleSheet, TouchableOpacity, ScrollView,
|
||||
TextInput, Alert, ActivityIndicator, Platform, BackHandler
|
||||
} from 'react-native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import {
|
||||
getAllCategories, addCategory, updateCategory, deleteCategory,
|
||||
getUncategorizedRepos, batchSetRepoCategories, getRepoCountByCategory
|
||||
} from '../services/database';
|
||||
import { runAutoCategorize } from '../services/categorizer';
|
||||
|
||||
// 可选的颜色列表（给分类标签选择用）
|
||||
const CAT_COLORS = ['#0366d6', '#28a745', '#d73a4a', '#6f42c1', '#e36209', '#19b5a0', '#f0ad4e', '#8b5cf6', '#1abc9c', '#3498db', '#9b59b6', '#e67e22', '#2c3e50'];
|
||||
|
||||
// 分类管理页：查看/新增/编辑/删除分类
|
||||
export default function CategoryManageScreen({ onGoBack }) {
|
||||
const [categories, setCategories] = useState([]);
|
||||
const [stats, setStats] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const goBackRef = useRef(onGoBack);
|
||||
goBackRef.current = onGoBack;
|
||||
|
||||
// 表单状态
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingCat, setEditingCat] = useState(null);
|
||||
const [formName, setFormName] = useState('');
|
||||
const [formColor, setFormColor] = useState(CAT_COLORS[0]);
|
||||
|
||||
// 加载分类列表及各分类的仓库数量
|
||||
const loadData = async () => {
|
||||
const cats = await getAllCategories();
|
||||
setCategories(cats);
|
||||
const counts = await getRepoCountByCategory();
|
||||
const statsMap = {};
|
||||
for (const c of counts) {
|
||||
statsMap[c.id] = c.repo_count;
|
||||
}
|
||||
setStats(statsMap);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
// Android 硬件返回按钮
|
||||
useEffect(() => {
|
||||
const onBackPress = () => {
|
||||
goBackRef.current();
|
||||
return true;
|
||||
};
|
||||
const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
|
||||
return () => subscription.remove();
|
||||
}, []);
|
||||
|
||||
const openAddForm = () => {
|
||||
setEditingCat(null);
|
||||
setFormName('');
|
||||
setFormColor(CAT_COLORS[0]);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const openEditForm = (cat) => {
|
||||
setEditingCat(cat);
|
||||
setFormName(cat.name);
|
||||
setFormColor(cat.color);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
setShowForm(false);
|
||||
setEditingCat(null);
|
||||
setFormName('');
|
||||
};
|
||||
|
||||
// 保存分类：新增时自动触发未分类仓库的自动归类
|
||||
const handleSave = async () => {
|
||||
const trimmed = formName.trim();
|
||||
if (!trimmed) {
|
||||
Alert.alert('提示', '分类名称不能为空');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (editingCat) {
|
||||
await updateCategory(editingCat.id, trimmed, formColor);
|
||||
} else {
|
||||
await addCategory(trimmed, formColor);
|
||||
// 新增分类后自动将未分类仓库匹配到新分类
|
||||
const cats = await getAllCategories();
|
||||
await runAutoCategorize(cats, getUncategorizedRepos, batchSetRepoCategories);
|
||||
}
|
||||
closeForm();
|
||||
await loadData();
|
||||
} catch (e) {
|
||||
Alert.alert('错误', e.message || '保存失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 删除分类（该分类下的仓库变为未分类）
|
||||
const handleDelete = (cat) => {
|
||||
Alert.alert(
|
||||
'删除分类',
|
||||
`确定要删除「${cat.name}」吗？该分类下的仓库将变为未分类状态。`,
|
||||
[
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{
|
||||
text: '删除',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
await deleteCategory(cat.id);
|
||||
await loadData();
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<ActivityIndicator size="large" color="#0366d6" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity style={styles.headerBtn} onPress={onGoBack}>
|
||||
<Ionicons name="arrow-back" size={24} color="#333" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>分类管理</Text>
|
||||
<TouchableOpacity style={styles.headerBtn} onPress={openAddForm}>
|
||||
<Ionicons name="add" size={26} color="#0366d6" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.scroll}>
|
||||
|
||||
{showForm ? (
|
||||
<View style={styles.formCard}>
|
||||
<Text style={styles.formTitle}>
|
||||
{editingCat ? '编辑分类' : '新建分类'}
|
||||
</Text>
|
||||
<Text style={styles.fieldLabel}>名称</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formName}
|
||||
onChangeText={setFormName}
|
||||
placeholder="输入分类名称"
|
||||
placeholderTextColor="#bbb"
|
||||
autoFocus
|
||||
/>
|
||||
<Text style={styles.fieldLabel}>颜色</Text>
|
||||
<View style={styles.colorPicker}>
|
||||
{CAT_COLORS.map((color) => (
|
||||
<TouchableOpacity
|
||||
key={color}
|
||||
onPress={() => setFormColor(color)}
|
||||
style={[
|
||||
styles.colorOption,
|
||||
{ backgroundColor: color },
|
||||
formColor === color && styles.colorOptionSelected,
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<View style={styles.formActions}>
|
||||
<TouchableOpacity style={styles.cancelBtn} onPress={closeForm}>
|
||||
<Text style={styles.cancelBtnText}>取消</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.saveBtn} onPress={handleSave}>
|
||||
<Text style={styles.saveBtnText}>
|
||||
{editingCat ? '更新' : '创建'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{categories.map((cat) => (
|
||||
<View key={cat.id} style={styles.catItem}>
|
||||
<View style={styles.catItemLeft}>
|
||||
<View style={[styles.catDot, { backgroundColor: cat.color }]} />
|
||||
<View style={styles.catItemInfo}>
|
||||
<Text style={styles.catItemName}>{cat.name}</Text>
|
||||
<Text style={styles.catItemCount}>
|
||||
{stats[cat.id] || 0} 个仓库
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.catItemActions}>
|
||||
<TouchableOpacity
|
||||
style={styles.catActionBtn}
|
||||
onPress={() => openEditForm(cat)}
|
||||
>
|
||||
<Ionicons name="pencil" size={18} color="#0366d6" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={styles.catActionBtn}
|
||||
onPress={() => handleDelete(cat)}
|
||||
>
|
||||
<Ionicons name="trash" size={18} color="#d73a4a" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
<View style={{ height: 40 }} />
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
center: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#fff',
|
||||
paddingTop: Platform.OS === 'ios' ? 50 : 40,
|
||||
paddingBottom: 10,
|
||||
paddingHorizontal: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e8e8e8',
|
||||
},
|
||||
headerBtn: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 17,
|
||||
fontWeight: '600',
|
||||
color: '#1a1a1a',
|
||||
},
|
||||
scroll: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 12,
|
||||
},
|
||||
formCard: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
elevation: 2,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 3,
|
||||
},
|
||||
formTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#1a1a1a',
|
||||
marginBottom: 12,
|
||||
},
|
||||
fieldLabel: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
color: '#666',
|
||||
marginBottom: 6,
|
||||
marginTop: 8,
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#ddd',
|
||||
borderRadius: 10,
|
||||
padding: 12,
|
||||
fontSize: 15,
|
||||
color: '#333',
|
||||
backgroundColor: '#fafafa',
|
||||
},
|
||||
colorPicker: {
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
marginBottom: 8,
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
colorOption: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
borderWidth: 3,
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
colorOptionSelected: {
|
||||
borderColor: '#333',
|
||||
},
|
||||
formActions: {
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
marginTop: 12,
|
||||
},
|
||||
cancelBtn: {
|
||||
flex: 1,
|
||||
padding: 14,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: '#ddd',
|
||||
},
|
||||
cancelBtnText: {
|
||||
fontSize: 15,
|
||||
color: '#666',
|
||||
fontWeight: '500',
|
||||
},
|
||||
saveBtn: {
|
||||
flex: 1,
|
||||
padding: 14,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#0366d6',
|
||||
},
|
||||
saveBtnText: {
|
||||
fontSize: 15,
|
||||
color: '#fff',
|
||||
fontWeight: '600',
|
||||
},
|
||||
catItem: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
marginBottom: 8,
|
||||
elevation: 1,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
},
|
||||
catItemLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
catDot: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 7,
|
||||
marginRight: 12,
|
||||
},
|
||||
catItemInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
catItemName: {
|
||||
fontSize: 15,
|
||||
fontWeight: '500',
|
||||
color: '#333',
|
||||
},
|
||||
catItemCount: {
|
||||
fontSize: 12,
|
||||
color: '#999',
|
||||
marginTop: 2,
|
||||
},
|
||||
catItemActions: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
},
|
||||
catActionBtn: {
|
||||
padding: 6,
|
||||
},
|
||||
|
||||
});
|
||||
405
screens/HomeScreen.js
Normal file
405
screens/HomeScreen.js
Normal file
@@ -0,0 +1,405 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
View, Text, FlatList, StyleSheet, TouchableOpacity,
|
||||
Alert, ActivityIndicator, RefreshControl,
|
||||
ScrollView, Platform, BackHandler
|
||||
} from 'react-native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import RepoItem from '../components/RepoItem';
|
||||
import { fetchStarredRepos, TokenExpiredError } from '../services/github';
|
||||
import {
|
||||
initDatabase, getAllCategories, saveRepos, getAllRepos, getReposByCategory,
|
||||
getUncategorizedRepos, getGitHubToken, batchSetRepoCategories
|
||||
} from '../services/database';
|
||||
import { runAutoCategorize } from '../services/categorizer';
|
||||
|
||||
// 首页：仓库列表、分类标签栏、同步入口
|
||||
export default function HomeScreen({ onTokenExpired, onOpenSettings, onOpenRepoDetail, onOpenCategoryManage }) {
|
||||
const [categories, setCategories] = useState([]);
|
||||
// selectedCategory: null=全部, 0=未分类, >0=具体分类 ID
|
||||
const [selectedCategory, setSelectedCategory] = useState(null);
|
||||
const [repos, setRepos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
const [syncInfo, setSyncInfo] = useState('');
|
||||
|
||||
// 按分类加载仓库列表
|
||||
const loadRepos = useCallback(async (catId) => {
|
||||
if (catId === null || catId === undefined) {
|
||||
const allRepos = await getAllRepos();
|
||||
setRepos(allRepos);
|
||||
} else if (catId === 0) {
|
||||
const uncatRepos = await getUncategorizedRepos();
|
||||
setRepos(uncatRepos);
|
||||
} else {
|
||||
const catRepos = await getReposByCategory(catId);
|
||||
setRepos(catRepos);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 加载所有数据：分类 + 仓库列表
|
||||
const loadData = useCallback(async () => {
|
||||
try {
|
||||
await initDatabase();
|
||||
const cats = await getAllCategories();
|
||||
setCategories(cats);
|
||||
await loadRepos(selectedCategory);
|
||||
} catch (e) {
|
||||
console.error('加载数据失败:', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [selectedCategory, loadRepos]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
// Android 硬件返回按钮退出应用
|
||||
useEffect(() => {
|
||||
const onBackPress = () => {
|
||||
Alert.alert('退出应用', '确定要退出吗？', [
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{ text: '退出', style: 'destructive', onPress: () => BackHandler.exitApp() },
|
||||
]);
|
||||
return true;
|
||||
};
|
||||
const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
|
||||
return () => subscription.remove();
|
||||
}, []);
|
||||
|
||||
const onSelectCategory = async (catId) => {
|
||||
setSelectedCategory(catId);
|
||||
await loadRepos(catId);
|
||||
};
|
||||
|
||||
// 从 GitHub 同步星标仓库，保存到本地后执行自动分类
|
||||
const handleSync = async () => {
|
||||
const token = await getGitHubToken();
|
||||
if (!token) {
|
||||
onTokenExpired();
|
||||
return;
|
||||
}
|
||||
setSyncing(true);
|
||||
setSyncInfo('正在从 GitHub 获取星标仓库...');
|
||||
try {
|
||||
const reposData = await fetchStarredRepos(token);
|
||||
const count = await saveRepos(reposData);
|
||||
const cats = await getAllCategories();
|
||||
await runAutoCategorize(cats, getUncategorizedRepos, batchSetRepoCategories);
|
||||
setSyncInfo(`同步完成，新增 ${count} 个仓库（共 ${reposData.length} 个）`);
|
||||
setCategories(cats);
|
||||
await loadRepos(selectedCategory);
|
||||
setTimeout(() => setSyncInfo(''), 3000);
|
||||
} catch (e) {
|
||||
if (e instanceof TokenExpiredError) {
|
||||
onTokenExpired();
|
||||
} else {
|
||||
Alert.alert('同步失败', e.message);
|
||||
}
|
||||
} finally {
|
||||
setSyncing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
await handleSync();
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 长按仓库时提示去分类管理页操作
|
||||
const handleRepoLongPress = () => {
|
||||
Alert.alert('管理分类', '请前往分类管理页面设置仓库分类', [
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{ text: '前往', onPress: onOpenCategoryManage },
|
||||
]);
|
||||
};
|
||||
|
||||
const currentCategoryName = selectedCategory === null
|
||||
? '全部仓库'
|
||||
: selectedCategory === 0
|
||||
? '未分类'
|
||||
: categories.find(c => c.id === selectedCategory)?.name || '全部仓库';
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<ActivityIndicator size="large" color="#0366d6" />
|
||||
<Text style={styles.loadingText}>加载中...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
|
||||
<View style={styles.header}>
|
||||
<View style={styles.headerTop}>
|
||||
<Text style={styles.headerTitle}>GitHub Stars</Text>
|
||||
<View style={styles.headerActions}>
|
||||
<TouchableOpacity
|
||||
style={styles.headerBtn}
|
||||
onPress={handleSync}
|
||||
disabled={syncing}
|
||||
>
|
||||
<Ionicons
|
||||
name={syncing ? 'sync' : 'cloud-download'}
|
||||
size={22}
|
||||
color="#0366d6"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={styles.headerBtn}
|
||||
onPress={onOpenCategoryManage}
|
||||
>
|
||||
<Ionicons name="folder-open" size={22} color="#0366d6" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={styles.headerBtn}
|
||||
onPress={onOpenSettings}
|
||||
>
|
||||
<Ionicons name="settings-outline" size={22} color="#0366d6" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
{syncInfo ? (
|
||||
<Text style={styles.syncInfo}>{syncInfo}</Text>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
<View style={styles.categoryTabs}>
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.categoryTab,
|
||||
selectedCategory === null && styles.categoryTabActive,
|
||||
]}
|
||||
onPress={() => onSelectCategory(null)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.categoryTabText,
|
||||
selectedCategory === null && styles.categoryTabTextActive,
|
||||
]}
|
||||
>
|
||||
全部
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.categoryTab,
|
||||
selectedCategory === 0 && styles.categoryTabActive,
|
||||
]}
|
||||
onPress={() => onSelectCategory(0)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.categoryTabText,
|
||||
selectedCategory === 0 && styles.categoryTabTextActive,
|
||||
]}
|
||||
>
|
||||
未分类
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
{categories.map((cat) => (
|
||||
<TouchableOpacity
|
||||
key={cat.id}
|
||||
style={[
|
||||
styles.categoryTab,
|
||||
selectedCategory === cat.id && styles.categoryTabActive,
|
||||
]}
|
||||
onPress={() => onSelectCategory(cat.id)}
|
||||
>
|
||||
<View
|
||||
style={[styles.categoryDot, { backgroundColor: cat.color }]}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
styles.categoryTabText,
|
||||
selectedCategory === cat.id && styles.categoryTabTextActive,
|
||||
]}
|
||||
>
|
||||
{cat.name}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionTitle}>{currentCategoryName}</Text>
|
||||
<Text style={styles.sectionCount}>{repos.length} 个仓库</Text>
|
||||
</View>
|
||||
|
||||
{syncing ? (
|
||||
<View style={styles.syncingBar}>
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
<Text style={styles.syncingText}>同步中...</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<FlatList
|
||||
data={repos}
|
||||
renderItem={({ item }) => (
|
||||
<RepoItem
|
||||
item={item}
|
||||
showCategory={selectedCategory === null || selectedCategory === 0}
|
||||
onPress={onOpenRepoDetail}
|
||||
onLongPress={handleRepoLongPress}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={(item) => String(item.id)}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
|
||||
}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.empty}>
|
||||
<Ionicons name="star-outline" size={48} color="#ccc" />
|
||||
<Text style={styles.emptyText}>
|
||||
{selectedCategory === 0
|
||||
? '没有未分类的仓库'
|
||||
: '暂无仓库数据\n点击右上角 ☁️ 按钮从 GitHub 同步'}
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
contentContainerStyle={repos.length === 0 ? styles.emptyContainer : styles.listContent}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
center: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: 10,
|
||||
color: '#888',
|
||||
fontSize: 14,
|
||||
},
|
||||
header: {
|
||||
backgroundColor: '#fff',
|
||||
paddingTop: Platform.OS === 'ios' ? 50 : 40,
|
||||
paddingBottom: 8,
|
||||
paddingHorizontal: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e8e8e8',
|
||||
},
|
||||
headerTop: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
color: '#1a1a1a',
|
||||
},
|
||||
headerActions: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
},
|
||||
headerBtn: {
|
||||
padding: 8,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#f0f7ff',
|
||||
},
|
||||
syncInfo: {
|
||||
marginTop: 6,
|
||||
fontSize: 12,
|
||||
color: '#28a745',
|
||||
},
|
||||
categoryTabs: {
|
||||
backgroundColor: '#fff',
|
||||
paddingVertical: 10,
|
||||
paddingLeft: 12,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#eee',
|
||||
},
|
||||
categoryTab: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 7,
|
||||
marginRight: 8,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#f0f0f0',
|
||||
},
|
||||
categoryTabActive: {
|
||||
backgroundColor: '#0366d6',
|
||||
},
|
||||
categoryTabText: {
|
||||
fontSize: 13,
|
||||
color: '#666',
|
||||
fontWeight: '500',
|
||||
},
|
||||
categoryTabTextActive: {
|
||||
color: '#fff',
|
||||
},
|
||||
categoryDot: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
marginRight: 5,
|
||||
},
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
},
|
||||
sectionCount: {
|
||||
fontSize: 13,
|
||||
color: '#999',
|
||||
},
|
||||
syncingBar: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#0366d6',
|
||||
paddingVertical: 6,
|
||||
gap: 8,
|
||||
},
|
||||
syncingText: {
|
||||
color: '#fff',
|
||||
fontSize: 13,
|
||||
},
|
||||
listContent: {
|
||||
paddingBottom: 20,
|
||||
},
|
||||
emptyContainer: {
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
empty: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: 40,
|
||||
},
|
||||
emptyText: {
|
||||
marginTop: 12,
|
||||
fontSize: 14,
|
||||
color: '#999',
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
},
|
||||
});
|
||||
659
screens/RepoDetailScreen.js
Normal file
659
screens/RepoDetailScreen.js
Normal file
@@ -0,0 +1,659 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
View, Text, StyleSheet, TouchableOpacity, ScrollView,
|
||||
ActivityIndicator, Image, Linking, Platform, BackHandler, InteractionManager, Dimensions
|
||||
} from 'react-native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import Markdown from 'react-native-markdown-display';
|
||||
import SyntaxHighlighter from 'react-native-syntax-highlighter';
|
||||
import { vs2015 } from 'react-syntax-highlighter/styles/hljs';
|
||||
import { fetchReadme, TokenExpiredError } from '../services/github';
|
||||
import { getGitHubToken } from '../services/database';
|
||||
|
||||
const SCREEN_WIDTH = Dimensions.get('window').width;
|
||||
|
||||
// 检测是否为 SVG 图片链接（React Native Image 组件不支持 SVG）
|
||||
function isSvgUrl(url) {
|
||||
return /\.svg(\?|#|$)/i.test(url) || /\/svg(\?|#|$)/i.test(url);
|
||||
}
|
||||
|
||||
// SVG 图片占位组件：点击后在系统浏览器中打开原始 SVG 文件
|
||||
function SvgImage({ uri, alt }) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={svgStyles.container}
|
||||
onPress={() => Linking.openURL(uri)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={svgStyles.placeholder}>
|
||||
<Ionicons name="image-outline" size={28} color="#999" />
|
||||
<Text style={svgStyles.placeholderText} numberOfLines={1}>
|
||||
{alt || 'SVG 图片'}
|
||||
</Text>
|
||||
<View style={svgStyles.badge}>
|
||||
<Ionicons name="open-outline" size={12} color="#fff" />
|
||||
<Text style={svgStyles.badgeText}>浏览器查看</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
const svgStyles = StyleSheet.create({
|
||||
container: {
|
||||
width: '100%',
|
||||
marginBottom: 12,
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e4e8',
|
||||
},
|
||||
placeholder: {
|
||||
height: 80,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f6f8fa',
|
||||
gap: 4,
|
||||
},
|
||||
placeholderText: {
|
||||
fontSize: 13,
|
||||
color: '#666',
|
||||
},
|
||||
badge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#0366d6',
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 3,
|
||||
borderRadius: 10,
|
||||
gap: 3,
|
||||
},
|
||||
badgeText: {
|
||||
fontSize: 11,
|
||||
color: '#fff',
|
||||
},
|
||||
});
|
||||
|
||||
// 根据图片设备像素自动计算合适的高度，避免固定宽高比导致 SVG 徽章变形
|
||||
function ReadmeImage({ src, alt }) {
|
||||
const [dimensions, setDimensions] = useState(null);
|
||||
const isSvg = isSvgUrl(src);
|
||||
|
||||
if (isSvg) {
|
||||
return <SvgImage uri={src} alt={alt} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Image
|
||||
source={{ uri: src }}
|
||||
style={[
|
||||
readmeImageStyles.image,
|
||||
dimensions
|
||||
? { width: '100%', height: dimensions.height, aspectRatio: undefined }
|
||||
: { width: '100%', height: 220 },
|
||||
]}
|
||||
resizeMode="contain"
|
||||
onLoad={(e) => {
|
||||
const { width, height } = e.nativeEvent.source;
|
||||
if (width && height) {
|
||||
const maxWidth = SCREEN_WIDTH - 56;
|
||||
const ratio = Math.min(maxWidth / width, 1);
|
||||
setDimensions({ width: maxWidth, height: height * ratio });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const readmeImageStyles = StyleSheet.create({
|
||||
image: {
|
||||
maxWidth: '100%',
|
||||
borderRadius: 6,
|
||||
marginBottom: 12,
|
||||
},
|
||||
});
|
||||
|
||||
function preprocessMarkdown(markdown, repoFullName, defaultBranch) {
|
||||
if (!markdown) return markdown;
|
||||
|
||||
const [owner, repo] = repoFullName.split('/');
|
||||
const branch = defaultBranch || 'main';
|
||||
const rawBaseUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}`;
|
||||
const githubBaseUrl = `https://github.com/${owner}/${repo}/blob/${branch}`;
|
||||
|
||||
let processed = markdown;
|
||||
|
||||
// Remove <picture> and <source> tags, keep their content
|
||||
processed = processed.replace(/<picture[^>]*>/gi, '');
|
||||
processed = processed.replace(/<\/picture>/gi, '');
|
||||
processed = processed.replace(/<source[^>]*\/?>/gi, '');
|
||||
|
||||
// Convert <a><img>...</a> to markdown link-wrapped image first
|
||||
processed = processed.replace(
|
||||
/<a\s+[^>]*href=["']([^"']*)["'][^>]*>\s*(<img[^>]*>)\s*<\/a>/gi,
|
||||
(match, href, imgTag) => {
|
||||
const srcMatch = imgTag.match(/src\s*=\s*["']([^"']*)["']/i);
|
||||
const altMatch = imgTag.match(/alt\s*=\s*["']([^"']*)["']/i);
|
||||
const src = srcMatch ? srcMatch[1] : '';
|
||||
const alt = altMatch ? altMatch[1] : 'image';
|
||||
return `[](${href})`;
|
||||
}
|
||||
);
|
||||
|
||||
// Convert remaining standalone HTML <img> tags to markdown image syntax
|
||||
processed = processed.replace(
|
||||
/<img\s+[^>]*src\s*=\s*["']([^"']*)["'][^>]*\/?>/gi,
|
||||
(match, src) => {
|
||||
const altMatch = match.match(/alt\s*=\s*["']([^"']*)["']/i);
|
||||
const alt = altMatch ? altMatch[1] : 'image';
|
||||
return ``;
|
||||
}
|
||||
);
|
||||
|
||||
// Convert remaining HTML <a> tags to markdown link syntax
|
||||
processed = processed.replace(
|
||||
/<a\s+[^>]*href\s*=\s*["']([^"']*)["'][^>]*>([^<]*)<\/a>/gi,
|
||||
(match, href, text) => `[${text.trim()}](${href})`
|
||||
);
|
||||
|
||||
// Strip remaining HTML tags
|
||||
processed = processed.replace(/<[^>]*>/g, '');
|
||||
|
||||
// Resolve relative URLs in markdown images () and links ([text](url))
|
||||
processed = processed.replace(
|
||||
/(!)?\[([^\]]*)\]\(([^)]+)\)/g,
|
||||
(match, isImage, text, url) => {
|
||||
if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('mailto:')) {
|
||||
return match;
|
||||
}
|
||||
const baseUrl = isImage ? rawBaseUrl : githubBaseUrl;
|
||||
const cleanUrl = url.replace(/^(\.\/|\/)/, '');
|
||||
const resolvedUrl = `${baseUrl}/${cleanUrl}`;
|
||||
return `${isImage || ''}[${text}](${resolvedUrl})`;
|
||||
}
|
||||
);
|
||||
|
||||
return processed;
|
||||
}
|
||||
|
||||
function detectLanguage(content) {
|
||||
const firstLine = content.split('\n')[0].trim();
|
||||
const knownLanguages = {
|
||||
js: 'javascript', jsx: 'javascript', mjs: 'javascript',
|
||||
ts: 'typescript', tsx: 'typescript',
|
||||
py: 'python', rb: 'ruby', rs: 'rust', go: 'go',
|
||||
java: 'java', kt: 'kotlin', swift: 'swift',
|
||||
c: 'c', cpp: 'cpp', cs: 'csharp',
|
||||
html: 'xml', htm: 'xml', xml: 'xml',
|
||||
css: 'css', scss: 'css', less: 'css',
|
||||
sh: 'bash', bash: 'bash', zsh: 'bash', powershell: 'powershell',
|
||||
json: 'json', yml: 'yaml', yaml: 'yaml',
|
||||
sql: 'sql', php: 'php', r: 'r', dart: 'dart',
|
||||
diff: 'diff', dockerfile: 'dockerfile', graphql: 'graphql',
|
||||
};
|
||||
const ext = firstLine.replace('```', '').toLowerCase();
|
||||
return knownLanguages[ext] || ext || 'bash';
|
||||
}
|
||||
|
||||
const markdownStyles = {
|
||||
body: {
|
||||
color: '#24292e',
|
||||
fontSize: 15,
|
||||
lineHeight: 24,
|
||||
padding: 16,
|
||||
},
|
||||
heading1: {
|
||||
fontSize: 22,
|
||||
fontWeight: '700',
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
paddingBottom: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e1e4e8',
|
||||
},
|
||||
heading2: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
marginTop: 18,
|
||||
marginBottom: 8,
|
||||
paddingBottom: 6,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e1e4e8',
|
||||
},
|
||||
heading3: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
marginTop: 16,
|
||||
marginBottom: 6,
|
||||
},
|
||||
heading4: {
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
marginTop: 14,
|
||||
marginBottom: 4,
|
||||
},
|
||||
paragraph: {
|
||||
marginBottom: 12,
|
||||
},
|
||||
list_item: {
|
||||
marginBottom: 4,
|
||||
},
|
||||
bullet_list: {
|
||||
paddingLeft: 24,
|
||||
marginBottom: 12,
|
||||
},
|
||||
ordered_list: {
|
||||
paddingLeft: 24,
|
||||
marginBottom: 12,
|
||||
},
|
||||
code_inline: {
|
||||
backgroundColor: 'rgba(27,31,35,0.05)',
|
||||
paddingHorizontal: 5,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 3,
|
||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
||||
fontSize: 13,
|
||||
color: '#d73a4a',
|
||||
},
|
||||
code_block: {
|
||||
backgroundColor: '#f6f8fa',
|
||||
padding: 12,
|
||||
borderRadius: 6,
|
||||
marginBottom: 12,
|
||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
||||
fontSize: 13,
|
||||
},
|
||||
fence: {
|
||||
backgroundColor: '#f6f8fa',
|
||||
padding: 12,
|
||||
borderRadius: 6,
|
||||
marginBottom: 12,
|
||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
||||
fontSize: 13,
|
||||
},
|
||||
blockquote: {
|
||||
paddingLeft: 12,
|
||||
color: '#6a737d',
|
||||
borderLeftWidth: 4,
|
||||
borderLeftColor: '#dfe2e5',
|
||||
marginBottom: 12,
|
||||
},
|
||||
link: {
|
||||
color: '#0366d6',
|
||||
textDecorationLine: 'underline',
|
||||
},
|
||||
table: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#dfe2e5',
|
||||
borderRadius: 4,
|
||||
marginBottom: 12,
|
||||
},
|
||||
thead: {
|
||||
backgroundColor: '#f6f8fa',
|
||||
},
|
||||
th: {
|
||||
padding: 6,
|
||||
borderWidth: 1,
|
||||
borderColor: '#dfe2e5',
|
||||
fontWeight: '600',
|
||||
},
|
||||
td: {
|
||||
padding: 6,
|
||||
borderWidth: 1,
|
||||
borderColor: '#dfe2e5',
|
||||
},
|
||||
hr: {
|
||||
backgroundColor: '#e1e4e8',
|
||||
height: 1,
|
||||
marginVertical: 20,
|
||||
},
|
||||
image: {
|
||||
maxWidth: '100%',
|
||||
height: undefined,
|
||||
borderRadius: 6,
|
||||
marginBottom: 12,
|
||||
},
|
||||
};
|
||||
|
||||
// 重写 react-native-markdown-display 的默认渲染规则
|
||||
const renderRules = {
|
||||
// 自定义图片渲染：支持 SVG 占位，普通图片自动计算尺寸
|
||||
image: (node, children, parent, styles) => {
|
||||
const { src, alt } = node.attributes;
|
||||
return (
|
||||
<ReadmeImage
|
||||
key={node.key}
|
||||
src={src}
|
||||
alt={alt}
|
||||
/>
|
||||
);
|
||||
},
|
||||
link: (node, children, parent, styles) => {
|
||||
const { href } = node.attributes;
|
||||
const childrenArr = Array.isArray(children) ? children : [children];
|
||||
const hasOnlyText = childrenArr.every(
|
||||
child => typeof child === 'string' || typeof child === 'number' || child === null
|
||||
);
|
||||
if (hasOnlyText) {
|
||||
return (
|
||||
<TouchableOpacity key={node.key} onPress={() => Linking.openURL(href)}>
|
||||
<Text style={styles.link}>{children}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity key={node.key} onPress={() => Linking.openURL(href)}>
|
||||
{children}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
},
|
||||
fence: (node, children, parent, styles) => {
|
||||
const lang = node.sourceInfo ? node.sourceInfo.split(/\s+/)[0] : '';
|
||||
const code = node.content;
|
||||
const language = detectLanguage(lang || code);
|
||||
return (
|
||||
<View key={node.key} style={codeBlockStyles.wrapper}>
|
||||
{lang ? (
|
||||
<View style={codeBlockStyles.langBar}>
|
||||
<Text style={codeBlockStyles.langText}>{lang}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
<SyntaxHighlighter
|
||||
highlighter="highlightjs"
|
||||
style={vs2015}
|
||||
PreTag={ScrollView}
|
||||
CodeTag={ScrollView}
|
||||
fontFamily={Platform.OS === 'ios' ? 'Menlo' : 'monospace'}
|
||||
fontSize={12}
|
||||
customStyle={{
|
||||
padding: 12,
|
||||
margin: 0,
|
||||
borderBottomLeftRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
}}
|
||||
>
|
||||
{code}
|
||||
</SyntaxHighlighter>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
const codeBlockStyles = StyleSheet.create({
|
||||
wrapper: {
|
||||
marginHorizontal: 12,
|
||||
marginBottom: 12,
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
langBar: {
|
||||
backgroundColor: '#2d2d2d',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderTopLeftRadius: 8,
|
||||
borderTopRightRadius: 8,
|
||||
},
|
||||
langText: {
|
||||
color: '#999',
|
||||
fontSize: 11,
|
||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
||||
},
|
||||
});
|
||||
|
||||
export default function RepoDetailScreen({ repo, onGoBack }) {
|
||||
const [readme, setReadme] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const goBackRef = useRef(onGoBack);
|
||||
goBackRef.current = onGoBack;
|
||||
|
||||
useEffect(() => {
|
||||
const onBackPress = () => {
|
||||
goBackRef.current();
|
||||
return true;
|
||||
};
|
||||
const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
|
||||
return () => subscription.remove();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
InteractionManager.runAfterInteractions(() => {
|
||||
loadReadme();
|
||||
});
|
||||
}, []);
|
||||
|
||||
const loadReadme = async () => {
|
||||
try {
|
||||
const token = await getGitHubToken();
|
||||
const markdown = await fetchReadme(token, repo.full_name);
|
||||
const cleaned = markdown ? preprocessMarkdown(markdown, repo.full_name, repo.default_branch) : null;
|
||||
setReadme(cleaned);
|
||||
} catch (e) {
|
||||
if (e instanceof TokenExpiredError) {
|
||||
setError('Token 已过期，请返回设置页面重新输入');
|
||||
} else {
|
||||
setError(e.message || '加载 README 失败');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openInBrowser = () => {
|
||||
if (repo.html_url) {
|
||||
Linking.openURL(repo.html_url);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity style={styles.headerBtn} onPress={onGoBack}>
|
||||
<Ionicons name="arrow-back" size={24} color="#333" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle} numberOfLines={1}>
|
||||
{repo.full_name}
|
||||
</Text>
|
||||
<TouchableOpacity style={styles.headerBtn} onPress={openInBrowser}>
|
||||
<Ionicons name="open-outline" size={22} color="#0366d6" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoCard}>
|
||||
<View style={styles.infoRow}>
|
||||
{repo.owner_avatar_url ? (
|
||||
<Image
|
||||
source={{ uri: repo.owner_avatar_url }}
|
||||
style={styles.ownerAvatar}
|
||||
/>
|
||||
) : null}
|
||||
<View style={styles.infoText}>
|
||||
<Text style={styles.repoName}>{repo.full_name}</Text>
|
||||
<Text style={styles.repoDesc} numberOfLines={3}>
|
||||
{repo.description || '暂无描述'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.statsRow}>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{repo.stargazers_count}</Text>
|
||||
<Text style={styles.statLabel}>Stars</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{repo.forks_count}</Text>
|
||||
<Text style={styles.statLabel}>Forks</Text>
|
||||
</View>
|
||||
{repo.language ? (
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{repo.language}</Text>
|
||||
<Text style={styles.statLabel}>Language</Text>
|
||||
</View>
|
||||
) : null}
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statValue}>{repo.owner_login}</Text>
|
||||
<Text style={styles.statLabel}>Owner</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.readmeHeader}>
|
||||
<Ionicons name="book" size={16} color="#555" />
|
||||
<Text style={styles.readmeTitle}>README.md</Text>
|
||||
</View>
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#0366d6" />
|
||||
<Text style={styles.loadingText}>正在加载 README...</Text>
|
||||
</View>
|
||||
) : error ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<Ionicons name="alert-circle-outline" size={36} color="#d73a4a" />
|
||||
<Text style={styles.errorText}>{error}</Text>
|
||||
</View>
|
||||
) : readme === null ? (
|
||||
<View style={styles.loadingContainer}>
|
||||
<Ionicons name="document-text-outline" size={36} color="#ccc" />
|
||||
<Text style={styles.emptyText}>该仓库没有 README 文件</Text>
|
||||
</View>
|
||||
) : (
|
||||
<ScrollView style={styles.markdownScroll}>
|
||||
<Markdown style={markdownStyles} rules={renderRules}>
|
||||
{readme}
|
||||
</Markdown>
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#fff',
|
||||
paddingTop: Platform.OS === 'ios' ? 50 : 40,
|
||||
paddingBottom: 10,
|
||||
paddingHorizontal: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e8e8e8',
|
||||
},
|
||||
headerBtn: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerTitle: {
|
||||
flex: 1,
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#1a1a1a',
|
||||
textAlign: 'center',
|
||||
},
|
||||
infoCard: {
|
||||
backgroundColor: '#fff',
|
||||
margin: 12,
|
||||
marginBottom: 0,
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
elevation: 2,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 3,
|
||||
},
|
||||
infoRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
ownerAvatar: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
marginRight: 12,
|
||||
},
|
||||
infoText: {
|
||||
flex: 1,
|
||||
},
|
||||
repoName: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#0366d6',
|
||||
marginBottom: 4,
|
||||
},
|
||||
repoDesc: {
|
||||
fontSize: 13,
|
||||
color: '#666',
|
||||
lineHeight: 18,
|
||||
},
|
||||
statsRow: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 14,
|
||||
paddingTop: 12,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#f0f0f0',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
statItem: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
statValue: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 11,
|
||||
color: '#999',
|
||||
marginTop: 2,
|
||||
},
|
||||
readmeHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
gap: 6,
|
||||
},
|
||||
readmeTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#555',
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: 10,
|
||||
color: '#888',
|
||||
fontSize: 14,
|
||||
},
|
||||
errorText: {
|
||||
marginTop: 10,
|
||||
color: '#d73a4a',
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
},
|
||||
emptyText: {
|
||||
marginTop: 10,
|
||||
color: '#999',
|
||||
fontSize: 14,
|
||||
},
|
||||
markdownScroll: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
marginHorizontal: 12,
|
||||
marginBottom: 12,
|
||||
borderRadius: 12,
|
||||
},
|
||||
});
|
||||
455
screens/SettingsScreen.js
Normal file
455
screens/SettingsScreen.js
Normal file
@@ -0,0 +1,455 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
View, Text, StyleSheet, TouchableOpacity,
|
||||
Alert, ActivityIndicator, ScrollView, Platform, Linking, BackHandler
|
||||
} from 'react-native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import {
|
||||
getGitHubToken, clearGitHubToken, getAllCategories,
|
||||
getTotalRepoCount, setGitHubToken
|
||||
} from '../services/database';
|
||||
import { fetchStarredRepos, checkUpdate } from '../services/github';
|
||||
import TokenInput from '../components/TokenInput';
|
||||
|
||||
// 设置页：Token 管理、数据统计、版本更新检查
|
||||
export default function SettingsScreen({ onGoBack, onTokenExpired }) {
|
||||
const [token, setToken] = useState(null);
|
||||
const [stats, setStats] = useState({ repos: 0, categories: 0 });
|
||||
const [showTokenInput, setShowTokenInput] = useState(false);
|
||||
const [verifying, setVerifying] = useState(false);
|
||||
const [checkingUpdate, setCheckingUpdate] = useState(false);
|
||||
const [updateInfo, setUpdateInfo] = useState(null);
|
||||
const goBackRef = useRef(onGoBack);
|
||||
goBackRef.current = onGoBack;
|
||||
|
||||
// 加载已保存的 Token 和数据统计
|
||||
const loadSettings = async () => {
|
||||
const savedToken = await getGitHubToken();
|
||||
setToken(savedToken);
|
||||
const cats = await getAllCategories();
|
||||
const total = await getTotalRepoCount();
|
||||
setStats({ repos: total, categories: cats.length });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadSettings();
|
||||
}, []);
|
||||
|
||||
// Android 硬件返回按钮
|
||||
useEffect(() => {
|
||||
const onBackPress = () => {
|
||||
goBackRef.current();
|
||||
return true;
|
||||
};
|
||||
const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
|
||||
return () => subscription.remove();
|
||||
}, []);
|
||||
|
||||
const handleChangeToken = () => {
|
||||
setShowTokenInput(true);
|
||||
};
|
||||
|
||||
// 验证当前 Token 是否仍然有效
|
||||
const handleVerifyToken = async () => {
|
||||
setVerifying(true);
|
||||
try {
|
||||
await fetchStarredRepos(token);
|
||||
Alert.alert('验证成功', 'Token 有效');
|
||||
} catch (e) {
|
||||
Alert.alert('验证失败', e.message);
|
||||
} finally {
|
||||
setVerifying(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 清除 Token（需用户确认）
|
||||
const handleClearToken = () => {
|
||||
Alert.alert(
|
||||
'清除 Token',
|
||||
'确定要清除 GitHub Token 吗？清除后需要重新输入才能同步数据。',
|
||||
[
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{
|
||||
text: '清除',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
await clearGitHubToken();
|
||||
onTokenExpired();
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const handleTokenSaved = async () => {
|
||||
setShowTokenInput(false);
|
||||
await loadSettings();
|
||||
};
|
||||
|
||||
// 检查 GitHub Releases 是否有新版本
|
||||
const handleCheckUpdate = async () => {
|
||||
setCheckingUpdate(true);
|
||||
setUpdateInfo(null);
|
||||
const savedToken = await getGitHubToken();
|
||||
const result = await checkUpdate(savedToken);
|
||||
setUpdateInfo(result);
|
||||
setCheckingUpdate(false);
|
||||
|
||||
if (result.error) {
|
||||
Alert.alert('检查更新', result.error);
|
||||
} else if (result.hasUpdate) {
|
||||
Alert.alert(
|
||||
'发现新版本',
|
||||
`当前版本：v${result.currentVersion}\n最新版本：v${result.latestVersion}\n\n${result.releaseName || ''}\n\n${result.releaseBody ? result.releaseBody : ''}`,
|
||||
[
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{
|
||||
text: '前往下载',
|
||||
onPress: () => {
|
||||
if (result.releaseUrl) {
|
||||
Linking.openURL(result.releaseUrl);
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
} else {
|
||||
Alert.alert('检查更新', result.message || '已是最新版本');
|
||||
}
|
||||
};
|
||||
|
||||
if (showTokenInput) {
|
||||
return <TokenInput onTokenSaved={handleTokenSaved} onBack={() => setShowTokenInput(false)} />;
|
||||
}
|
||||
|
||||
const maskedToken = token
|
||||
? token.slice(0, 8) + '••••••••' + token.slice(-4)
|
||||
: '';
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity style={styles.backBtn} onPress={onGoBack}>
|
||||
<Ionicons name="arrow-back" size={24} color="#333" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>设置</Text>
|
||||
<View style={styles.backBtn} />
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.scroll}>
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>GitHub 账号</Text>
|
||||
<View style={styles.card}>
|
||||
<View style={styles.row}>
|
||||
<Ionicons name="key" size={20} color="#0366d6" />
|
||||
<Text style={styles.rowLabel}>访问令牌</Text>
|
||||
</View>
|
||||
<Text style={styles.tokenText}>
|
||||
{token ? maskedToken : '未设置'}
|
||||
</Text>
|
||||
<View style={styles.tokenActions}>
|
||||
<TouchableOpacity
|
||||
style={styles.tokenBtn}
|
||||
onPress={handleChangeToken}
|
||||
>
|
||||
<Ionicons name="create" size={16} color="#fff" />
|
||||
<Text style={styles.tokenBtnText}>
|
||||
{token ? '修改' : '设置'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
{token ? (
|
||||
<>
|
||||
<TouchableOpacity
|
||||
style={[styles.tokenBtn, styles.tokenBtnOutline]}
|
||||
onPress={handleVerifyToken}
|
||||
disabled={verifying}
|
||||
>
|
||||
{verifying ? (
|
||||
<ActivityIndicator size="small" color="#0366d6" />
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="checkmark" size={16} color="#0366d6" />
|
||||
<Text style={[styles.tokenBtnText, styles.tokenBtnTextOutline]}>验证</Text>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.tokenBtn, styles.tokenBtnDanger]}
|
||||
onPress={handleClearToken}
|
||||
>
|
||||
<Ionicons name="trash" size={16} color="#fff" />
|
||||
<Text style={styles.tokenBtnText}>清除</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>数据统计</Text>
|
||||
<View style={styles.statsRow}>
|
||||
<View style={styles.statCard}>
|
||||
<Ionicons name="star" size={24} color="#f0ad4e" />
|
||||
<Text style={styles.statNumber}>{stats.repos}</Text>
|
||||
<Text style={styles.statLabel}>星标仓库</Text>
|
||||
</View>
|
||||
<View style={styles.statCard}>
|
||||
<Ionicons name="folder" size={24} color="#0366d6" />
|
||||
<Text style={styles.statNumber}>{stats.categories}</Text>
|
||||
<Text style={styles.statLabel}>分类</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>AI 分析（即将推出）</Text>
|
||||
<TouchableOpacity style={styles.card} activeOpacity={0.7}>
|
||||
<View style={styles.aiPlaceholder}>
|
||||
<View style={styles.aiIconWrap}>
|
||||
<Ionicons name="sparkles" size={32} color="#8b5cf6" />
|
||||
</View>
|
||||
<Text style={styles.aiTitle}>智能分析你的星标仓库</Text>
|
||||
<Text style={styles.aiDesc}>
|
||||
自动分类、代码质量评估、技术趋势分析等强大功能即将上线
|
||||
</Text>
|
||||
<View style={styles.comingBadge}>
|
||||
<Text style={styles.comingBadgeText}>即将推出</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>关于</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.card}
|
||||
onPress={handleCheckUpdate}
|
||||
disabled={checkingUpdate}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.aboutRow}>
|
||||
<View style={styles.aboutLeft}>
|
||||
<Ionicons name="information-circle-outline" size={20} color="#555" />
|
||||
<Text style={styles.aboutLabel}>版本</Text>
|
||||
</View>
|
||||
<View style={styles.aboutRight}>
|
||||
{checkingUpdate ? (
|
||||
<ActivityIndicator size="small" color="#0366d6" />
|
||||
) : updateInfo && updateInfo.hasUpdate ? (
|
||||
<View style={styles.updateBadge}>
|
||||
<Text style={styles.updateBadgeText}>有新版本</Text>
|
||||
</View>
|
||||
) : null}
|
||||
<Text style={styles.aboutValue}>1.0.0</Text>
|
||||
<Ionicons name="chevron-forward" size={18} color="#ccc" />
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={{ height: 40 }} />
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#fff',
|
||||
paddingTop: Platform.OS === 'ios' ? 50 : 40,
|
||||
paddingBottom: 12,
|
||||
paddingHorizontal: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e8e8e8',
|
||||
},
|
||||
backBtn: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#1a1a1a',
|
||||
},
|
||||
scroll: {
|
||||
flex: 1,
|
||||
},
|
||||
section: {
|
||||
marginTop: 20,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
color: '#888',
|
||||
marginBottom: 8,
|
||||
marginLeft: 4,
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
elevation: 1,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginBottom: 8,
|
||||
},
|
||||
rowLabel: {
|
||||
fontSize: 15,
|
||||
fontWeight: '500',
|
||||
color: '#333',
|
||||
},
|
||||
tokenText: {
|
||||
fontSize: 13,
|
||||
color: '#888',
|
||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
||||
marginBottom: 12,
|
||||
},
|
||||
tokenActions: {
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
},
|
||||
tokenBtn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#0366d6',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
gap: 4,
|
||||
},
|
||||
tokenBtnOutline: {
|
||||
backgroundColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
borderColor: '#0366d6',
|
||||
},
|
||||
tokenBtnDanger: {
|
||||
backgroundColor: '#d73a4a',
|
||||
},
|
||||
tokenBtnText: {
|
||||
color: '#fff',
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
},
|
||||
tokenBtnTextOutline: {
|
||||
color: '#0366d6',
|
||||
},
|
||||
statsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
statCard: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
padding: 20,
|
||||
alignItems: 'center',
|
||||
elevation: 1,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
},
|
||||
statNumber: {
|
||||
fontSize: 28,
|
||||
fontWeight: '700',
|
||||
color: '#1a1a1a',
|
||||
marginTop: 8,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 13,
|
||||
color: '#888',
|
||||
marginTop: 4,
|
||||
},
|
||||
aiPlaceholder: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: 10,
|
||||
},
|
||||
aiIconWrap: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: '#f5f0ff',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
aiTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
marginBottom: 6,
|
||||
},
|
||||
aiDesc: {
|
||||
fontSize: 13,
|
||||
color: '#999',
|
||||
textAlign: 'center',
|
||||
lineHeight: 18,
|
||||
marginBottom: 12,
|
||||
},
|
||||
comingBadge: {
|
||||
backgroundColor: '#f5f0ff',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
},
|
||||
comingBadgeText: {
|
||||
fontSize: 12,
|
||||
color: '#8b5cf6',
|
||||
fontWeight: '500',
|
||||
},
|
||||
aboutRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
aboutLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
aboutRight: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
aboutLabel: {
|
||||
fontSize: 15,
|
||||
color: '#333',
|
||||
},
|
||||
aboutValue: {
|
||||
fontSize: 15,
|
||||
color: '#888',
|
||||
},
|
||||
updateBadge: {
|
||||
backgroundColor: '#fff3cd',
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 8,
|
||||
},
|
||||
updateBadgeText: {
|
||||
fontSize: 11,
|
||||
color: '#856404',
|
||||
fontWeight: '500',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user