nav/Fabric.Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): translate UI to English and refresh layout styles

Browse Source
This commit is contained in:
nav
2026-05-14 13:33:37 +00:00
parent 4724678035
commit cfaa1cb657
5 changed files with 194 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/index.css
View File

@@ -64,6 +64,124 @@
body { body {
margin: 0; margin: 0;
background: linear-gradient(180deg, rgba(170, 59, 255, 0.08), transparent 220px) no-repeat var(--bg);
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.app-shell {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
}
.sidebar {
border-right: 1px solid var(--border);
padding: 20px 16px;
text-align: left;
background: color-mix(in srgb, var(--bg) 94%, var(--accent) 6%);
}
.sidebar-title {
margin: 0 0 14px;
}
.sidebar-nav {
display: grid;
gap: 10px;
}
.sidebar-session {
margin-top: 20px;
font-size: 13px;
}
.page-content {
padding: 18px;
text-align: left;
}
.panel {
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
box-shadow: var(--shadow);
background: var(--bg);
}
.form-grid {
display: grid;
gap: 10px;
}
.row-wrap {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.input {
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px;
min-width: 120px;
background: transparent;
color: var(--text-h);
}
.input:focus {
outline: 2px solid var(--accent-border);
outline-offset: 1px;
}
.btn {
border: 1px solid var(--accent-border);
background: var(--accent);
color: #fff;
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
}
.btn-secondary {
background: transparent;
color: var(--text-h);
}
.btn-danger {
background: #dc2626;
border-color: #dc2626;
}
.muted {
color: var(--text);
}
.error-text {
color: #dc2626;
margin-top: 10px;
}
.list-reset {
list-style: none;
padding: 0;
margin: 0;
}
.card {
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px;
display: grid;
gap: 8px;
background: color-mix(in srgb, var(--bg) 95%, var(--accent) 5%);
} }
h1, h1,

26
src/layouts/AppLayout.tsx
View File

@@ -5,28 +5,28 @@ export default function AppLayout() {
const { isAuthed, session, logout } = useAuth() const { isAuthed, session, logout } = useAuth()
return ( return (
<div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: '100vh' }}> <div className="app-shell">
<aside style={{ borderRight: '1px solid #ddd', padding: 16 }}> <aside className="sidebar">
<h3>Fabric</h3> <h3 className="sidebar-title">Fabric</h3>
<nav style={{ display: 'grid', gap: 8 }}> <nav className="sidebar-nav">
<Link to="/workspace">工作台</Link> <Link to="/workspace">Workspace</Link>
<Link to="/chat">聊天</Link> <Link to="/chat">Chat</Link>
<Link to="/login">登录</Link> <Link to="/login">Login</Link>
</nav> </nav>
<div style={{ marginTop: 16, fontSize: 12 }}> <div className="sidebar-session">
{isAuthed ? ( {isAuthed ? (
<> <>
<div>{session?.user.email}</div> <div className="muted">{session?.user.email}</div>
<button onClick={() => logout()} style={{ marginTop: 6 }}> <button onClick={() => logout()} className="btn btn-secondary" style={{ marginTop: 8 }}>
登出 Sign out
</button> </button>
</> </>
) : ( ) : (
<span>未登录</span> <span className="muted">Not signed in</span>
)} )}
</div> </div>
</aside> </aside>
<main style={{ padding: 16 }}> <main className="page-content">
<Outlet /> <Outlet />
</main> </main>
</div> </div>

65
src/pages/ChatPage.tsx
View File

@@ -127,7 +127,7 @@ export default function ChatPage() {
setMessages(res.data.items ?? []) setMessages(res.data.items ?? [])
setPageInfo(res.data.page ?? null) setPageInfo(res.data.page ?? null)
} catch { } catch {
setError('消息拉取失败') setError('Failed to load messages')
} finally { } finally {
setLoading(false) setLoading(false)
} }
@@ -144,7 +144,7 @@ export default function ChatPage() {
socket?.emit('typing.stop', { channelId }) socket?.emit('typing.stop', { channelId })
setContent('') setContent('')
} catch { } catch {
setError('发送失败') setError('Failed to send message')
} }
} }
@@ -158,7 +158,7 @@ export default function ChatPage() {
setEditingContent('') setEditingContent('')
await pullMessages() await pullMessages()
} catch { } catch {
setError('编辑失败') setError('Failed to edit message')
} }
} }
@@ -169,7 +169,7 @@ export default function ChatPage() {
await guildApi().delete(`/channels/${channelId}/messages/${messageId}`) await guildApi().delete(`/channels/${channelId}/messages/${messageId}`)
await pullMessages() await pullMessages()
} catch { } catch {
setError('删除失败') setError('Failed to delete message')
} }
} }
@@ -201,41 +201,44 @@ export default function ChatPage() {
}, [channelId, socket, socketState]) }, [channelId, socket, socketState])
return ( return (
<section> <section className="panel">
<h2>聊天</h2> <h2>Chat</h2>
<p>Guild: {guildId || '-'}</p> <p className="muted">Guild: {guildId || '-'}</p>
<p>Socket: {socketState}</p> <p className="muted">Socket: {socketState}</p>
<p>在线人数: {onlineCount}</p> <p className="muted">Online users: {onlineCount}</p>
{loading ? <p>加载中...</p> : null} {loading ? <p className="muted">Loading...</p> : null}
{error ? <p style={{ color: 'crimson' }}>{error}</p> : null} {error ? <p className="error-text">{error}</p> : null}
{typingUsers.length ? <p>正在输入: {typingUsers.join(', ')}</p> : null} {typingUsers.length ? <p className="muted">Typing: {typingUsers.join(', ')}</p> : null}
<div style={{ display: 'flex', gap: 8, marginBottom: 8 }}> <div className="row-wrap" style={{ marginBottom: 10 }}>
<input value={channelId} onChange={(e) => onChangeChannel(e.target.value)} placeholder="Channel ID" /> <input className="input" value={channelId} onChange={(e) => onChangeChannel(e.target.value)} placeholder="Channel ID" />
<input value={seqFrom} onChange={(e) => setSeqFrom(e.target.value)} placeholder="seq_from" /> <input className="input" value={seqFrom} onChange={(e) => setSeqFrom(e.target.value)} placeholder="seq_from" />
<input value={seqTo} onChange={(e) => setSeqTo(e.target.value)} placeholder="seq_to" /> <input className="input" value={seqTo} onChange={(e) => setSeqTo(e.target.value)} placeholder="seq_to" />
<input value={limit} onChange={(e) => setLimit(e.target.value)} placeholder="limit" /> <input className="input" value={limit} onChange={(e) => setLimit(e.target.value)} placeholder="limit" />
<button onClick={pullMessages}>拉取</button> <button className="btn btn-secondary" onClick={pullMessages}>Fetch</button>
</div> </div>
<div style={{ display: 'flex', gap: 8, marginBottom: 8 }}> <div className="row-wrap" style={{ marginBottom: 10 }}>
<input value={content} onChange={(e) => onTypingChange(e.target.value)} placeholder="输入消息" /> <input className="input" value={content} onChange={(e) => onTypingChange(e.target.value)} placeholder="Type a message" />
<button onClick={sendMessage}>发送</button> <button className="btn" onClick={sendMessage}>Send</button>
</div> </div>
<div style={{ display: 'flex', gap: 8, marginBottom: 8 }}> <div className="row-wrap" style={{ marginBottom: 10 }}>
<input value={editingMessageId} onChange={(e) => setEditingMessageId(e.target.value)} placeholder="messageId" /> <input className="input" value={editingMessageId} onChange={(e) => setEditingMessageId(e.target.value)} placeholder="messageId" />
<input value={editingContent} onChange={(e) => setEditingContent(e.target.value)} placeholder="新内容" /> <input className="input" value={editingContent} onChange={(e) => setEditingContent(e.target.value)} placeholder="Updated content" />
<button onClick={editMessage}>编辑</button> <button className="btn btn-secondary" onClick={editMessage}>Edit</button>
</div> </div>
<ul> <ul className="list-reset">
{messages.map((m) => ( {messages.map((m) => (
<li key={m.messageId}> <li key={m.messageId} className="card" style={{ marginTop: 8 }}>
#{m.seq} {m.content} ({m.messageId}){' '} <div>
<button type="button" onClick={() => deleteMessage(m.messageId)}> <strong>#{m.seq}</strong> {m.content}
删除 </div>
<div className="muted">{m.messageId}</div>
<button className="btn btn-danger" type="button" onClick={() => deleteMessage(m.messageId)}>
Delete
</button> </button>
</li> </li>
))} ))}
</ul> </ul>
{!loading && !messages.length ? <p>暂无消息</p> : null} {!loading && !messages.length ? <p className="muted">No messages yet</p> : null}
{pageInfo ? ( {pageInfo ? (
<p> <p>
next_expected_seq: {pageInfo.nextExpectedSeq ?? '-'} | highest_committed_seq: {pageInfo.highestCommittedSeq ?? '-'} | next_expected_seq: {pageInfo.nextExpectedSeq ?? '-'} | highest_committed_seq: {pageInfo.highestCommittedSeq ?? '-'} |

19
src/pages/LoginPage.tsx
View File

@@ -19,35 +19,38 @@ export default function LoginPage() {
await login(centerApiBase.trim(), centerApiKey.trim(), email, password) await login(centerApiBase.trim(), centerApiKey.trim(), email, password)
navigate('/workspace') navigate('/workspace')
} catch { } catch {
setError('登录失败，请检查账号密码') setError('Login failed. Please check your email and password.')
} }
} }
return ( return (
<section> <section className="panel">
<h2>登录</h2> <h2>Login</h2>
{isAuthed ? <p>当前用户：{session?.user.email}</p> : null} {isAuthed ? <p className="muted">Current user: {session?.user.email}</p> : null}
<form onSubmit={onSubmit} style={{ display: 'grid', gap: 8, maxWidth: 420 }}> <form onSubmit={onSubmit} className="form-grid" style={{ maxWidth: 460 }}>
<input <input
className="input"
value={centerApiBase} value={centerApiBase}
onChange={(e) => setCenterApiBase(e.target.value)} onChange={(e) => setCenterApiBase(e.target.value)}
placeholder="Center API Base (e.g. http://localhost:7001/api)" placeholder="Center API Base (e.g. http://localhost:7001/api)"
/> />
<input <input
className="input"
value={centerApiKey} value={centerApiKey}
onChange={(e) => setCenterApiKey(e.target.value)} onChange={(e) => setCenterApiKey(e.target.value)}
placeholder="Center API Key" placeholder="Center API Key"
/> />
<input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email" /> <input className="input" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email" />
<input <input
className="input"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Password" placeholder="Password"
type="password" type="password"
/> />
<button type="submit">登录</button> <button className="btn" type="submit">Sign in</button>
</form> </form>
<p>{error}</p> {error ? <p className="error-text">{error}</p> : null}
</section> </section>
) )
} }

33
src/pages/WorkspacePage.tsx
View File

@@ -22,7 +22,7 @@ export default function WorkspacePage() {
const res = await axios.get(`${session.centerApiBase}/healthz`) const res = await axios.get(`${session.centerApiBase}/healthz`)
setHealth(JSON.stringify(res.data)) setHealth(JSON.stringify(res.data))
} catch { } catch {
setHealth('center healthz 访问失败') setHealth('Failed to access center healthz')
} }
} }
@@ -45,26 +45,29 @@ export default function WorkspacePage() {
} }
return ( return (
<section> <section className="panel">
<h2>工作台</h2> <h2>Workspace</h2>
<p>Center: {session?.centerApiBase || '-'}</p> <p className="muted">Center: {session?.centerApiBase || '-'}</p>
<div style={{ marginBottom: 8 }}> <div style={{ marginBottom: 12 }}>
<button type="button" onClick={checkCenterHealth}> <button className="btn" type="button" onClick={checkCenterHealth}>
测试 Center healthz Test Center healthz
</button> </button>
</div> </div>
<p>{health}</p> {health ? <p className="muted">{health}</p> : null}
<ul> <ul className="list-reset">
{(session?.guilds ?? []).map((g) => ( {(session?.guilds ?? []).map((g) => (
<li key={g.nodeId} style={{ marginTop: 8 }}> <li key={g.nodeId} className="card" style={{ marginTop: 12 }}>
<strong>{g.name}</strong> ({g.nodeId}) - {g.endpoint}{' '} <div>
<button type="button" onClick={() => loadChannels(g.nodeId, g.endpoint)}> <strong>{g.name}</strong> <span className="muted">({g.nodeId})</span>
加载频道 </div>
<div className="muted">{g.endpoint}</div>
<button className="btn btn-secondary" type="button" onClick={() => loadChannels(g.nodeId, g.endpoint)}>
Load channels
</button> </button>
<ul> <ul className="list-reset" style={{ marginTop: 10 }}>
{(channelsByGuild[g.nodeId] ?? []).map((c) => ( {(channelsByGuild[g.nodeId] ?? []).map((c) => (
<li key={c.id}> <li key={c.id} style={{ marginTop: 6 }}>
<Link <Link
to={`/chat?guildId=${encodeURIComponent(g.nodeId)}&channelId=${encodeURIComponent(c.id)}`} to={`/chat?guildId=${encodeURIComponent(g.nodeId)}&channelId=${encodeURIComponent(c.id)}`}
> >