660 lines
17 KiB
JavaScript
660 lines
17 KiB
JavaScript
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,
|
||
},
|
||
});
|