diff --git a/public/functions/api/user/data.js b/public/functions/api/user/data.js index 5f64deb..279e2ea 100644 --- a/public/functions/api/user/data.js +++ b/public/functions/api/user/data.js @@ -40,7 +40,7 @@ export async function onRequest(event) { if (event.request.method === "POST") { const body = await event.request.json(); - const { trips, pins, latest_5 } = body; + const { trips, pins, latest_5, version } = body; // Fetch existing to preserve other fields (like password, bindings) const existingRaw = await DB.get(userKey); @@ -50,7 +50,8 @@ export async function onRequest(event) { ...existing, trips: trips || existing.trips || [], pins: pins || existing.pins || [], - latest_5: latest_5 || existing.latest_5 || null // Store the pre-calculated card data + latest_5: latest_5 || existing.latest_5 || null, // Store the pre-calculated card data + version: version || existing.version || null }; await DB.put(userKey, JSON.stringify(newData)); diff --git a/public/readme/cn.md b/public/readme/cn.md new file mode 100644 index 0000000..e0c5837 --- /dev/null +++ b/public/readme/cn.md @@ -0,0 +1,22 @@ +# 用户指南与协议 + +欢迎使用 RailRound！这是一款为铁路爱好者设计的行程记录与可视化工具。 + +## 1. 服务条款 +使用本服务即表示您同意以下条款： +- 请勿上传违法或侵权内容。 +- 您的数据将安全存储，但建议定期导出备份。 +- 我们尊重您的隐私，不会向第三方出售您的个人数据。 + +## 2. 隐私政策 +我们收集的信息仅用于提供服务： +- 用户名与加密后的密码。 +- 您主动记录的行程数据与图钉信息。 +- 通过 GitHub 登录时的公开资料（头像、昵称）。 + +## 3. 使用指南 +- **记录行程**: 在首页点击“记录新行程”，支持手动输入或自动规划。 +- **地图模式**: 可视化查看您的足迹，支持上传 GeoJSON 地图文件。 +- **GitHub 挂件**: 绑定 GitHub 账号后，可生成动态 SVG 卡片展示在您的个人主页。 + +[了解更多](https://github.com/s3xyseia/railround) diff --git a/src/RailRound.jsx b/src/RailRound.jsx index 7016591..8b93027 100644 --- a/src/RailRound.jsx +++ b/src/RailRound.jsx @@ -16,6 +16,9 @@ import { LoginModal } from './components/LoginModal'; import { api } from './services/api'; import { db } from './utils/db'; +const CURRENT_VERSION = 0.30; +const MIN_SUPPORTED_VERSION = 0.0; + const GithubRegisterModal = ({ isOpen, onClose, regToken, onLoginSuccess }) => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); @@ -1458,7 +1461,7 @@ export default function RailRoundApp() { // Sync back the merged result to cloud immediately if (token) { - api.saveData(token, newTrips, newPins).catch(e => console.error("Merge sync failed", e)); + api.saveData(token, newTrips, newPins, null, CURRENT_VERSION).catch(e => console.error("Merge sync failed", e)); } } } @@ -2020,7 +2023,7 @@ export default function RailRoundApp() { const linesUsed = new Set(); const companiesUsed = new Set(); trips.forEach(t => { (t.segments || []).forEach(s => { if(s.lineKey) { linesUsed.add(s.lineKey); const meta = railwayData[s.lineKey]?.meta; if(meta && meta.company) companiesUsed.add(meta.company); } }); }); - const backupData = { meta: { version: 1, exportedAt: new Date().toISOString(), appName: "RailRound" }, dependencies: { lines: Array.from(linesUsed), companies: Array.from(companiesUsed) }, data: { trips: trips, pins: pins } }; + const backupData = { meta: { version: CURRENT_VERSION, exportedAt: new Date().toISOString(), appName: "RailRound" }, dependencies: { lines: Array.from(linesUsed), companies: Array.from(companiesUsed) }, data: { trips: trips, pins: pins } }; const blob = new Blob([JSON.stringify(backupData, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `railround_backup_${new Date().toISOString().slice(0,10)}.json`; document.body.appendChild(link); link.click(); document.body.removeChild(link); @@ -2157,7 +2160,7 @@ export default function RailRoundApp() { // Sync to Cloud if (user) { const latest5 = calculateLatestStats(finalTrips, segmentGeometries, railwayData, geoData); - api.saveData(user.token, finalTrips, pins, latest5).catch(e => alert('云端保存失败: ' + e.message)); + api.saveData(user.token, finalTrips, pins, latest5, CURRENT_VERSION).catch(e => alert('云端保存失败: ' + e.message)); } setIsTripEditing(false); setEditingTripId(null); @@ -2175,7 +2178,7 @@ export default function RailRoundApp() { setTrips(newTrips); if (user) { const latest5 = calculateLatestStats(newTrips, segmentGeometries, railwayData, geoData); - api.saveData(user.token, newTrips, pins, latest5).catch(e => alert('云端同步失败')); + api.saveData(user.token, newTrips, pins, latest5, CURRENT_VERSION).catch(e => alert('云端同步失败')); } } }; @@ -2210,7 +2213,7 @@ export default function RailRoundApp() { setPins(newPins); if (user) { - api.saveData(user.token, trips, newPins).catch(e => console.error('Pin sync failed', e)); + api.saveData(user.token, trips, newPins, null, CURRENT_VERSION).catch(e => console.error('Pin sync failed', e)); } setEditingPin(null); @@ -2223,7 +2226,7 @@ export default function RailRoundApp() { if (editingPin?.id === id) setEditingPin(null); if (user) { - api.saveData(user.token, trips, newPins).catch(e => console.error('Pin sync failed', e)); + api.saveData(user.token, trips, newPins, null, CURRENT_VERSION).catch(e => console.error('Pin sync failed', e)); } } }; diff --git a/src/components/LoginModal.jsx b/src/components/LoginModal.jsx index cfbc92e..932e7c9 100644 --- a/src/components/LoginModal.jsx +++ b/src/components/LoginModal.jsx @@ -1,13 +1,120 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { X, LogIn, UserPlus, Github, Mail } from 'lucide-react'; import { api } from '../services/api'; +// Custom Markdown Renderer to ensure consistent styling without dependencies +const renderMarkdown = (text) => { + if (!text) return null; + + const lines = text.split('\n'); + const elements = []; + let listBuffer = []; + let currentIndent = 0; // 0 for H1, 1 for H2, 2 for H3... used for indentation + + // Helper to parse inline styles (Bold and Links) + const parseInline = (text) => { + // Pass 1: Links [text](url) + // We use a callback to handle styling logic + let processed = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, txt, url) => { + const isGreen = txt.includes('CR200J') || url.includes('CR200J'); + const classes = isGreen + ? "text-emerald-600 hover:text-emerald-800 hover:underline transition-colors font-medium" + : "text-blue-600 hover:text-blue-800 hover:underline transition-colors font-medium"; + // Ensure we don't break subsequent bold parsing if link text has stars (unlikely but safe to assume standard markdown) + return `${txt}`; + }); + + // Pass 2: Bold (**text**) + // We strictly match **...** and wrap in + // Note: This simple regex might struggle with nested complex HTML but works for standard MD usage here. + processed = processed.replace(/\*\*(.*?)\*\*/g, '$1'); + + return { __html: processed }; + }; + + const flushList = () => { + if (listBuffer.length > 0) { + elements.push( + + ); + listBuffer = []; + } + }; + + lines.forEach((line, index) => { + const trimmed = line.trim(); + if (!trimmed) { + flushList(); + return; + } + + if (trimmed.startsWith('- ')) { + listBuffer.push(trimmed.substring(2)); + } else { + flushList(); + + if (trimmed.startsWith('# ')) { + currentIndent = 0; + elements.push( +

+ {trimmed.substring(2)} +

+ ); + } else if (trimmed.startsWith('## ')) { + currentIndent = 1; + elements.push( +

+ {trimmed.substring(3)} +

+ ); + } else if (trimmed.startsWith('### ')) { + currentIndent = 2; + elements.push( +

+ {trimmed.substring(4)} +

+ ); + } else if (trimmed.startsWith('> ')) { + // Blockquotes inherit indentation + const indentClass = currentIndent === 1 ? 'ml-4' : currentIndent === 2 ? 'ml-8' : ''; + elements.push( +
+ ); + } else { + // Paragraph - inherit indentation + const indentClass = currentIndent === 1 ? 'ml-4' : currentIndent === 2 ? 'ml-8' : ''; + elements.push( +

+ ); + } + } + }); + flushList(); + + return elements; +}; + export const LoginModal = ({ isOpen, onClose, onLoginSuccess }) => { const [isRegistering, setIsRegistering] = useState(false); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); + const [readmeContent, setReadmeContent] = useState(''); + const [lang, setLang] = useState('cn'); // cn, en, jp + + useEffect(() => { + if (isOpen) { + fetch(`/readme/${lang}.md`) + .then(res => res.text()) + .then(text => setReadmeContent(text)) + .catch(err => setReadmeContent('# Error loading guide')); + } + }, [isOpen, lang]); if (!isOpen) return null; @@ -33,100 +140,131 @@ export const LoginModal = ({ isOpen, onClose, onLoginSuccess }) => { }; const handleOAuth = (provider) => { - // api.initiateOAuth(provider) redirects. - // If it returns a URL (mock), we should handle it. - // However, the service currently redirects using window.location.href inside api.js - // We will update api.js to return the URL instead so we can handle it here or just let it be. - // For now, let's just call it. api.initiateOAuth(provider); }; return (

-
e.stopPropagation()}> -
-

- {isRegistering ? : } - {isRegistering ? '注册新账号' : '登录'} -

- -
+
e.stopPropagation()}> + + {/* Left: Login Form */} +
+ +
+

+ {isRegistering ? : } + {isRegistering ? '注册新账号' : '登录 RailRound'} +

+

+ {isRegistering ? '开启你的铁道制霸之旅' : '欢迎回来，指挥官'} +

+
- {error && ( -
- {error} -
- )} - -
-
- - setUsername(e.target.value)} - /> -
-
- - setPassword(e.target.value)} - /> -
- - -
- -
-
-
-
+ {error && ( +
+ {error}
-
- 或通过以下方式 + )} + +
+
+ + setUsername(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + />
-
-
+ + +
+
+
+
+
+
+ 第三方登录 +
+
+ +
+ + +
+
+ +
+ {isRegistering ? '已有账号?' : '还没有账号?'} -
+
-
- {isRegistering ? '已有账号?' : '还没有账号?'} - + {/* Right: User Guide / Agreement */} +
+ + +
+
用户指南 / 协议
+
+ {['cn', 'en', 'jp'].map(l => ( + + ))} +
+
+ +
+ {renderMarkdown(readmeContent)} +
+ +
+ 继续使用即代表您同意上述协议内容 +
+
); diff --git a/src/services/api.js b/src/services/api.js index 628bbed..6cf4200 100644 --- a/src/services/api.js +++ b/src/services/api.js @@ -36,14 +36,14 @@ export const api = { return data; }, - async saveData(token, trips, pins, latest_5) { + async saveData(token, trips, pins, latest_5, version = null) { const res = await fetch(`${API_BASE}/user/data`, { method: 'POST', headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, - body: JSON.stringify({ trips, pins, latest_5 }) + body: JSON.stringify({ trips, pins, latest_5, version }) }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed to save data');