ZY-TAKEOVER-SNAPSHOT 20260815: 铸渊接管前现场冻结（Codex 未提交改动全部入册）· 冰朔面谕接管+可回退
This commit is contained in:
parent
ebe2ecf262
commit
ffed065841
22 changed files with 4293 additions and 567 deletions
|
|
@ -1,14 +1,16 @@
|
|||
import { StrictMode, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import DOMPurify from 'dompurify'
|
||||
import { marked } from 'marked'
|
||||
import './design-tokens.css'
|
||||
import './styles.css'
|
||||
|
||||
type ThemeId = 'night' | 'dawn' | 'nebula' | 'candle' | 'clear'
|
||||
type Panel = 'channel' | 'receipts' | 'updates' | 'settings' | null
|
||||
type ViewId = 'overview' | 'knowledge' | 'code' | 'receipts' | 'system'
|
||||
type KnowledgeSource = 'native' | 'legacy'
|
||||
|
||||
interface HomeStatus {
|
||||
schema: string
|
||||
directLocalBrokerState: string
|
||||
directConnectionCount: number
|
||||
resumableSessionCount: number
|
||||
|
|
@ -16,114 +18,73 @@ interface HomeStatus {
|
|||
pnccReceiptCount: number
|
||||
updateState: string
|
||||
releaseRecoveryState: string
|
||||
automaticUpstreamUpdates: boolean
|
||||
mcpRole: string
|
||||
}
|
||||
|
||||
interface DiscoveryTicketReceipt {
|
||||
schema: string
|
||||
interface PersonalChannelIdentity { humanSubjectId: string; displayName: string; channelId: string; createdAtUnixMs: number }
|
||||
interface PersonalChannelEvent { sequence: number; eventId: string; kind: string; summary: string; occurredAtUnixMs: number; receiptId: string; receiptHash: string }
|
||||
interface PersonalChannelSnapshot { state: string; identity?: PersonalChannelIdentity; recentEvents: PersonalChannelEvent[]; integrity: { state: string; eventCount: number; receiptCount: number } }
|
||||
interface KnowledgeDocumentSummary {
|
||||
source: KnowledgeSource
|
||||
path: string
|
||||
title: string
|
||||
updatedAtUnixMs: number
|
||||
sizeBytes: number
|
||||
contentSha256: string
|
||||
duplicateCount: number
|
||||
}
|
||||
interface KnowledgeSnapshot {
|
||||
state: string
|
||||
accountKey: string
|
||||
laneId: string
|
||||
clientInstanceId: string
|
||||
discoveryTicket: string
|
||||
issuedAtUnixMs: number
|
||||
receiptId: string
|
||||
nativeRoot: string
|
||||
legacyAvailable: boolean
|
||||
legacyRoot?: string
|
||||
documents: KnowledgeDocumentSummary[]
|
||||
rawDocumentCount: number
|
||||
uniqueDocumentCount: number
|
||||
duplicateDocumentCount: number
|
||||
truncated: boolean
|
||||
}
|
||||
|
||||
interface ReceiptEvent {
|
||||
sequence: number
|
||||
kind: string
|
||||
observedAtUnixMs: number
|
||||
eventHash: string
|
||||
interface KnowledgeDocument {
|
||||
source: KnowledgeSource
|
||||
path: string
|
||||
title: string
|
||||
body: string
|
||||
updatedAtUnixMs: number
|
||||
contentSha256: string
|
||||
writable: boolean
|
||||
}
|
||||
|
||||
interface ReceiptProjection {
|
||||
events: ReceiptEvent[]
|
||||
returnedEventCount: number
|
||||
lastSequence: number
|
||||
}
|
||||
|
||||
interface RepositoryInspection {
|
||||
personaId: string
|
||||
humanResponsibilitySubject: string
|
||||
repositoryPath: string
|
||||
gitHead: string
|
||||
repositoryClean: boolean
|
||||
currentCheckpoint: { relativePath: string; sha256: string }
|
||||
modelInferenceStarted: boolean
|
||||
realityExecutionAllowed: boolean
|
||||
}
|
||||
|
||||
interface RepositoryCandidate {
|
||||
schema: string
|
||||
interface KnowledgeSearchResult { source: KnowledgeSource; path: string; title: string; snippet: string }
|
||||
interface KnowledgeImportResult {
|
||||
state: string
|
||||
candidateId: string
|
||||
confirmationToken: string
|
||||
expiresAtUnixMs: number
|
||||
inspection: RepositoryInspection
|
||||
}
|
||||
|
||||
interface ReleaseCandidate {
|
||||
candidateId: string
|
||||
confirmationToken: string
|
||||
releaseId: string
|
||||
currentVersion: string
|
||||
version: string
|
||||
notes: string
|
||||
features: string[]
|
||||
fixes: string[]
|
||||
minimumVersion: string
|
||||
dataMigrationRequired: boolean
|
||||
compatibilityNotes?: string
|
||||
restartMessage?: string
|
||||
rollbackSupported: boolean
|
||||
previousVersion?: string
|
||||
expiresAtUnixMs: number
|
||||
}
|
||||
|
||||
interface ReleaseCheckReceipt {
|
||||
state: string
|
||||
candidate?: ReleaseCandidate
|
||||
sourceName: string
|
||||
importedDocuments: number
|
||||
importedAssets: number
|
||||
existingDocuments: number
|
||||
conflicts: number
|
||||
skipped: number
|
||||
firstDocument?: string
|
||||
gitCommit: string
|
||||
snapshot: KnowledgeSnapshot
|
||||
}
|
||||
interface KnowledgeSaveResult { state: string; gitCommit: string; document: KnowledgeDocument }
|
||||
interface CodeChannelEntry { channelId: string; name: string; sourceKind: string; localPath: string; remoteUrl?: string; gitHead: string; branch: string; repositoryClean: boolean; registeredAtUnixMs: number }
|
||||
interface CodeChannelSnapshot { state: string; channels: CodeChannelEntry[]; authority: string }
|
||||
interface CodeTreeEntry { path: string; name: string; kind: 'directory' | 'file'; sizeBytes: number }
|
||||
interface CodeTreeSnapshot { channelId: string; path: string; entries: CodeTreeEntry[]; truncated: boolean }
|
||||
interface CodeFileProjection { channelId: string; path: string; format: string; source: string; humanMarkdown: string; sizeBytes: number }
|
||||
interface ReceiptEvent { sequence: number; kind: string; observedAtUnixMs: number; eventHash: string }
|
||||
interface ReceiptProjection { events: ReceiptEvent[] }
|
||||
interface DiscoveryTicketReceipt { laneId: string; clientInstanceId: string; discoveryTicket: string }
|
||||
interface ReleaseCandidate { candidateId: string; confirmationToken: string; currentVersion: string; version: string; notes: string; features: string[]; fixes: string[]; dataMigrationRequired: boolean }
|
||||
interface ReleaseCheckReceipt { candidate?: ReleaseCandidate }
|
||||
|
||||
const previewStatus: HomeStatus = { directLocalBrokerState: 'UNVERIFIED', directConnectionCount: 0, resumableSessionCount: 0, codeRepositoryMountCount: 0, pnccReceiptCount: 0, updateState: 'UNPROVISIONED_FAIL_CLOSED', releaseRecoveryState: 'NONE', mcpRole: 'DISCOVERY_RECOVERY_COMPATIBILITY_ONLY' }
|
||||
const previewPersonal: PersonalChannelSnapshot = { state: 'UNAVAILABLE', recentEvents: [], integrity: { state: 'UNKNOWN', eventCount: 0, receiptCount: 0 } }
|
||||
const previewKnowledge: KnowledgeSnapshot = { state: 'UNAVAILABLE', nativeRoot: '', legacyAvailable: false, documents: [], rawDocumentCount: 0, uniqueDocumentCount: 0, duplicateDocumentCount: 0, truncated: false }
|
||||
const previewCode: CodeChannelSnapshot = { state: 'UNAVAILABLE', channels: [], authority: 'LOCAL_SOURCE_ACCESS_ONLY_NO_PUSH_OR_DEPLOY_AUTHORITY' }
|
||||
const themes: Array<{ id: ThemeId; name: string }> = [
|
||||
{ id: 'night', name: '夜湖星光' },
|
||||
{ id: 'dawn', name: '晨湖曦光' },
|
||||
{ id: 'nebula', name: '星云紫夜' },
|
||||
{ id: 'candle', name: '烛畔暖湖' },
|
||||
{ id: 'clear', name: '清浅澄湖' },
|
||||
{ id: 'night', name: '夜湖星光' }, { id: 'dawn', name: '晨湖曦光' }, { id: 'nebula', name: '星云紫夜' }, { id: 'candle', name: '烛畔暖湖' }, { id: 'clear', name: '清浅澄湖' },
|
||||
]
|
||||
|
||||
const recoveryPreviewStates = [
|
||||
'NONE',
|
||||
'AWAITING_HUMAN_HEALTH_CONFIRMATION',
|
||||
'ROLLED_BACK_AWAITING_HUMAN_ACKNOWLEDGEMENT',
|
||||
'INSTALL_FAILED_BACKUP_RETAINED',
|
||||
'INSTALL_INTERRUPTED_BACKUP_RETAINED',
|
||||
'INSTALL_REPLACED_AWAITING_MANUAL_RESTART',
|
||||
'ROLLBACK_REPLACED_AWAITING_MANUAL_RESTART',
|
||||
'RECOVERY_STATE_UNREADABLE_ACTION_REQUIRED',
|
||||
]
|
||||
const requestedRecoveryPreview = import.meta.env.DEV
|
||||
? new URLSearchParams(window.location.search).get('releaseRecoveryState')
|
||||
: null
|
||||
const recoveryPreviewState = requestedRecoveryPreview && recoveryPreviewStates.includes(requestedRecoveryPreview)
|
||||
? requestedRecoveryPreview
|
||||
: 'NONE'
|
||||
|
||||
const previewStatus: HomeStatus = {
|
||||
schema: 'hololake.home-status/preview',
|
||||
directLocalBrokerState: 'PREVIEW',
|
||||
directConnectionCount: 0,
|
||||
resumableSessionCount: 0,
|
||||
codeRepositoryMountCount: 0,
|
||||
pnccReceiptCount: 0,
|
||||
updateState: 'UNPROVISIONED_FAIL_CLOSED',
|
||||
releaseRecoveryState: recoveryPreviewState,
|
||||
automaticUpstreamUpdates: false,
|
||||
mcpRole: 'DISCOVERY_RECOVERY_COMPATIBILITY_ONLY',
|
||||
}
|
||||
const viewLabels: Record<ViewId, string> = { overview: '总览', knowledge: '知识工作台', code: '代码频道', receipts: '回执', system: '系统详情' }
|
||||
|
||||
function getOrCreateLocalId(key: string, prefix: string) {
|
||||
const existing = window.localStorage.getItem(key)
|
||||
|
|
@ -133,193 +94,332 @@ function getOrCreateLocalId(key: string, prefix: string) {
|
|||
return generated
|
||||
}
|
||||
|
||||
function Icon({ name }: { name: 'settings' | 'arrow' | 'receipt' | 'close' | 'copy' }) {
|
||||
const paths = {
|
||||
settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-1.9 1.9-.06-.06a1.7 1.7 0 0 0-1.88-.34 1.7 1.7 0 0 0-1.04 1.56V20h-2.7v-.08a1.7 1.7 0 0 0-1.05-1.56 1.7 1.7 0 0 0-1.88.34l-.06.06-1.9-1.9.06-.06A1.7 1.7 0 0 0 7.72 15a1.7 1.7 0 0 0-1.56-1.04H6v-2.7h.08A1.7 1.7 0 0 0 7.64 10a1.7 1.7 0 0 0-.34-1.88l-.06-.06 1.9-1.9.06.06a1.7 1.7 0 0 0 1.88.34A1.7 1.7 0 0 0 12.12 5V5h2.7v.08a1.7 1.7 0 0 0 1.04 1.56 1.7 1.7 0 0 0 1.88-.34l.06-.06 1.9 1.9-.06.06a1.7 1.7 0 0 0-.34 1.88 1.7 1.7 0 0 0 1.56 1.04H21v2.7h-.08A1.7 1.7 0 0 0 19.4 15Z"/></>,
|
||||
arrow: <><path d="M5 12h13"/><path d="m14 7 5 5-5 5"/></>,
|
||||
receipt: <><path d="M7 3h10v18l-2.5-1.5L12 21l-2.5-1.5L7 21Z"/><path d="M10 8h4M10 12h4"/></>,
|
||||
close: <><path d="m7 7 10 10M17 7 7 17"/></>,
|
||||
function humanError(error: unknown, context: 'knowledge' | 'code' | 'identity' | 'system') {
|
||||
const value = String(error)
|
||||
if (value.includes('HOST_NOT_TRUSTED')) return '该地址不属于已登记的光湖代码频道。'
|
||||
if (value.includes('URL_INVALID')) return '频道地址无效，请粘贴完整的 HTTPS 克隆地址。'
|
||||
if (value.includes('DESTINATION_EXISTS')) return '该代码频道已经存在，无需再次克隆。'
|
||||
if (value.includes('CLONE_FAILED')) return '代码频道克隆失败，请核对地址及读取权限。'
|
||||
if (value.includes('NO_SUPPORTED_FILES')) return '文件夹中没有可导入的知识文件。'
|
||||
if (value.includes('SAVE_CONFLICT')) return '页面已在别处更新，请重新打开后再编辑。'
|
||||
if (value.includes('FILE_UNSUPPORTED')) return '该文件不是当前可阅读的文本格式。'
|
||||
if (context === 'identity') return '个人空间未能建立。'
|
||||
if (context === 'knowledge') return '知识操作未完成，原文件未被覆盖。'
|
||||
if (context === 'code') return '代码频道操作未完成。'
|
||||
return '系统操作未完成。'
|
||||
}
|
||||
|
||||
function Icon({ name }: { name: ViewId | 'search' | 'import' | 'folder' | 'copy' | 'arrow' | 'chevron' | 'file' | 'edit' | 'save' | 'back' }) {
|
||||
const paths: Record<string, React.ReactNode> = {
|
||||
overview: <><rect x="4" y="4" width="6" height="6" rx="1.5"/><rect x="14" y="4" width="6" height="6" rx="1.5"/><rect x="4" y="14" width="6" height="6" rx="1.5"/><rect x="14" y="14" width="6" height="6" rx="1.5"/></>,
|
||||
knowledge: <><path d="M5 4.5h10a3 3 0 0 1 3 3V20H8a3 3 0 0 1-3-3Z"/><path d="M8 4.5v12.8A2.7 2.7 0 0 1 10.7 20"/></>,
|
||||
code: <><path d="m8.5 8-4 4 4 4M15.5 8l4 4-4 4M13.5 5l-3 14"/></>,
|
||||
receipts: <><path d="M7 3.5h10v17l-2.5-1.5L12 20.5 9.5 19 7 20.5Z"/><path d="M10 8h4M10 12h4"/></>,
|
||||
system: <><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14.2 3h-4.1l-.3 2.7a7 7 0 0 0-2 1.2l-2.5-1-2 3.4 2.1 1.5a7 7 0 0 0 0 2.4l-2 1.5 2 3.4 2.4-1a7 7 0 0 0 2 1.2l.3 2.7h4.1l.3-2.7a7 7 0 0 0 2-1.2l2.5 1 2-3.4-2.1-1.5A7 7 0 0 0 19 12Z"/></>,
|
||||
search: <><circle cx="11" cy="11" r="6"/><path d="m16 16 4 4"/></>,
|
||||
import: <><path d="M12 4v11M8 11l4 4 4-4"/><path d="M5 19h14"/></>,
|
||||
folder: <path d="M3.5 7.5h6l2-2h9v13h-17Z"/>,
|
||||
file: <><path d="M6 3.5h8l4 4v13H6Z"/><path d="M14 3.5v4h4"/></>,
|
||||
copy: <><rect x="8" y="8" width="10" height="11" rx="2"/><path d="M15 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h2"/></>,
|
||||
arrow: <><path d="M5 12h13M14 7l5 5-5 5"/></>,
|
||||
chevron: <path d="m9 6 6 6-6 6"/>,
|
||||
edit: <><path d="m4 20 4.5-1 10-10-3.5-3.5-10 10Z"/><path d="m13.5 6.5 3.5 3.5"/></>,
|
||||
save: <><path d="M5 4h12l2 2v14H5Z"/><path d="M8 4v6h8V4M8 20v-6h8v6"/></>,
|
||||
back: <path d="m15 6-6 6 6 6"/>,
|
||||
}
|
||||
return <svg viewBox="0 0 24 24" aria-hidden="true">{paths[name]}</svg>
|
||||
}
|
||||
|
||||
function escapeHtml(value: string) {
|
||||
return value.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"')
|
||||
}
|
||||
|
||||
function splitFrontmatter(body: string) {
|
||||
const normalized = body.replace(/\r\n/g, '\n')
|
||||
if (!normalized.startsWith('---\n')) return { content: normalized, metadata: {} as Record<string, string> }
|
||||
const closing = normalized.indexOf('\n---\n', 4)
|
||||
if (closing < 0) return { content: normalized, metadata: {} as Record<string, string> }
|
||||
const metadata: Record<string, string> = {}
|
||||
for (const line of normalized.slice(4, closing).split('\n')) {
|
||||
const match = /^([A-Za-z0-9_-]+):\s*(.*)$/.exec(line)
|
||||
if (match) metadata[match[1]] = match[2].replace(/^['"]|['"]$/g, '')
|
||||
}
|
||||
return { content: normalized.slice(closing + 5), metadata }
|
||||
}
|
||||
|
||||
function markdownHtml(body: string) {
|
||||
const withWikiLinks = body.replace(/\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/g, (_whole, target: string, label?: string) =>
|
||||
`<button class="wiki-link" type="button" data-wiki="${escapeHtml(target.trim())}">${escapeHtml((label || target).trim())}</button>`)
|
||||
const html = marked.parse(withWikiLinks, { async: false, gfm: true, breaks: false }) as string
|
||||
return DOMPurify.sanitize(html, { ADD_ATTR: ['data-wiki'], ADD_TAGS: ['button'] })
|
||||
}
|
||||
|
||||
function documentOutline(body: string) {
|
||||
return splitFrontmatter(body).content.split('\n').flatMap((line, index) => {
|
||||
const match = /^(#{1,4})\s+(.+)$/.exec(line.trim())
|
||||
return match ? [{ id: `outline-${index}`, level: match[1].length, title: match[2].replace(/[*_`]/g, '') }] : []
|
||||
}).slice(0, 24)
|
||||
}
|
||||
|
||||
function MarkdownDocument({ body, onWiki }: { body: string; onWiki?: (target: string) => void }) {
|
||||
const parsed = useMemo(() => splitFrontmatter(body), [body])
|
||||
const html = useMemo(() => markdownHtml(parsed.content), [parsed.content])
|
||||
return <article className="markdown-document" onClick={(event) => {
|
||||
const element = (event.target as HTMLElement).closest<HTMLElement>('[data-wiki]')
|
||||
if (element?.dataset.wiki && onWiki) onWiki(element.dataset.wiki)
|
||||
}} dangerouslySetInnerHTML={{ __html: html }} />
|
||||
}
|
||||
|
||||
interface TreeNode { name: string; key: string; folders: Map<string, TreeNode>; documents: KnowledgeDocumentSummary[] }
|
||||
function knowledgeTree(documents: KnowledgeDocumentSummary[]) {
|
||||
const root: TreeNode = { name: '知识', key: '', folders: new Map(), documents: [] }
|
||||
for (const document of documents) {
|
||||
const segments = document.path.split('/').filter(Boolean)
|
||||
const file = segments.pop()
|
||||
let cursor = root
|
||||
for (const segment of segments) {
|
||||
const key = cursor.key ? `${cursor.key}/${segment}` : segment
|
||||
if (!cursor.folders.has(segment)) cursor.folders.set(segment, { name: segment, key, folders: new Map(), documents: [] })
|
||||
cursor = cursor.folders.get(segment)!
|
||||
}
|
||||
cursor.documents.push({ ...document, title: document.title || file || '未命名页面' })
|
||||
}
|
||||
return root
|
||||
}
|
||||
function countTree(node: TreeNode): number {
|
||||
return node.documents.length + [...node.folders.values()].reduce((sum, child) => sum + countTree(child), 0)
|
||||
}
|
||||
function KnowledgeTree({ node, depth, expanded, active, onToggle, onOpen }: { node: TreeNode; depth: number; expanded: Set<string>; active?: string; onToggle: (key: string) => void; onOpen: (item: KnowledgeDocumentSummary) => void }) {
|
||||
const folders = [...node.folders.values()].sort((a, b) => a.name.localeCompare(b.name, 'zh-CN'))
|
||||
const documents = [...node.documents].sort((a, b) => a.title.localeCompare(b.title, 'zh-CN'))
|
||||
return <>
|
||||
{folders.map((folder) => {
|
||||
const open = depth === 0 || expanded.has(folder.key)
|
||||
return <div key={folder.key} className="tree-branch">
|
||||
<button className="tree-folder" style={{ paddingLeft: 12 + depth * 14 }} type="button" onClick={() => onToggle(folder.key)}>
|
||||
<span className={open ? 'tree-chevron open' : 'tree-chevron'}><Icon name="chevron"/></span><Icon name="folder"/><span>{folder.name}</span><em>{countTree(folder)}</em>
|
||||
</button>
|
||||
{open && <KnowledgeTree node={folder} depth={depth + 1} expanded={expanded} active={active} onToggle={onToggle} onOpen={onOpen}/>}
|
||||
</div>
|
||||
})}
|
||||
{documents.map((document) => <button key={`${document.source}:${document.path}`} className={active === `${document.source}:${document.path}` ? 'tree-document active' : 'tree-document'} style={{ paddingLeft: 31 + depth * 14 }} type="button" onClick={() => onOpen(document)}>
|
||||
<Icon name="file"/><span>{document.title}</span>{document.duplicateCount > 0 && <em title="折叠的相同内容">+{document.duplicateCount}</em>}
|
||||
</button>)}
|
||||
</>
|
||||
}
|
||||
|
||||
function HoloLakeApp() {
|
||||
const [theme, setTheme] = useState<ThemeId>(() => (window.localStorage.getItem('hololake-theme') as ThemeId) || 'night')
|
||||
const [view, setView] = useState<ViewId>('knowledge')
|
||||
const [status, setStatus] = useState<HomeStatus>(previewStatus)
|
||||
const [panel, setPanel] = useState<Panel>(null)
|
||||
const [ticket, setTicket] = useState<DiscoveryTicketReceipt | null>(null)
|
||||
const [personal, setPersonal] = useState<PersonalChannelSnapshot>(previewPersonal)
|
||||
const [knowledge, setKnowledge] = useState<KnowledgeSnapshot>(previewKnowledge)
|
||||
const [codeChannels, setCodeChannels] = useState<CodeChannelSnapshot>(previewCode)
|
||||
const [activeDocument, setActiveDocument] = useState<KnowledgeDocument | null>(null)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [searchResults, setSearchResults] = useState<KnowledgeSearchResult[] | null>(null)
|
||||
const [knowledgeBusy, setKnowledgeBusy] = useState(false)
|
||||
const [knowledgeMessage, setKnowledgeMessage] = useState('')
|
||||
const [expanded, setExpanded] = useState<Set<string>>(() => new Set(['导入']))
|
||||
const [editing, setEditing] = useState(false)
|
||||
const [draft, setDraft] = useState('')
|
||||
const [lastKnowledgeReceipt, setLastKnowledgeReceipt] = useState('')
|
||||
const [cloneUrl, setCloneUrl] = useState('')
|
||||
const [codeBusy, setCodeBusy] = useState(false)
|
||||
const [codeMessage, setCodeMessage] = useState('')
|
||||
const [activeChannel, setActiveChannel] = useState<CodeChannelEntry | null>(null)
|
||||
const [codeTree, setCodeTree] = useState<CodeTreeSnapshot | null>(null)
|
||||
const [activeCodeFile, setActiveCodeFile] = useState<CodeFileProjection | null>(null)
|
||||
const [codeMode, setCodeMode] = useState<'human' | 'source'>('human')
|
||||
const [displayName, setDisplayName] = useState('')
|
||||
const [identityBusy, setIdentityBusy] = useState(false)
|
||||
const [identityMessage, setIdentityMessage] = useState('')
|
||||
const [receipts, setReceipts] = useState<ReceiptEvent[]>([])
|
||||
const [repositoryCandidate, setRepositoryCandidate] = useState<RepositoryCandidate | null>(null)
|
||||
const [repositoryBusy, setRepositoryBusy] = useState(false)
|
||||
const [repositoryMessage, setRepositoryMessage] = useState('')
|
||||
const [ticket, setTicket] = useState<DiscoveryTicketReceipt | null>(null)
|
||||
const [systemMessage, setSystemMessage] = useState('')
|
||||
const [releaseCandidate, setReleaseCandidate] = useState<ReleaseCandidate | null>(null)
|
||||
const [releaseBusy, setReleaseBusy] = useState(false)
|
||||
const [releaseMessage, setReleaseMessage] = useState('')
|
||||
const [message, setMessage] = useState('')
|
||||
const [systemBusy, setSystemBusy] = useState(false)
|
||||
|
||||
const refreshStatus = useCallback(async () => {
|
||||
try {
|
||||
setStatus(await invoke<HomeStatus>('get_hololake_home_status'))
|
||||
} catch {
|
||||
setStatus(previewStatus)
|
||||
}
|
||||
const refreshCore = useCallback(async () => {
|
||||
const [homeResult, personalResult, knowledgeResult, codeResult] = await Promise.allSettled([
|
||||
invoke<HomeStatus>('get_hololake_home_status'),
|
||||
invoke<PersonalChannelSnapshot>('get_personal_channel_snapshot'),
|
||||
invoke<KnowledgeSnapshot>('get_knowledge_snapshot'),
|
||||
invoke<CodeChannelSnapshot>('get_code_channel_snapshot'),
|
||||
])
|
||||
if (homeResult.status === 'fulfilled') setStatus(homeResult.value)
|
||||
if (personalResult.status === 'fulfilled') setPersonal(personalResult.value)
|
||||
if (knowledgeResult.status === 'fulfilled') setKnowledge(knowledgeResult.value)
|
||||
if (codeResult.status === 'fulfilled') setCodeChannels(codeResult.value)
|
||||
}, [])
|
||||
const loadReceipts = useCallback(async () => {
|
||||
try {
|
||||
const projection = await invoke<ReceiptProjection>('query_pncc_receipt_projection', { input: { afterSequence: 0, limit: 25 } })
|
||||
setReceipts(projection.events)
|
||||
} catch { setReceipts([]) }
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
void refreshStatus()
|
||||
const timer = window.setInterval(() => void refreshStatus(), 3000)
|
||||
void refreshCore()
|
||||
const timer = window.setInterval(() => void refreshCore(), 3500)
|
||||
return () => window.clearInterval(timer)
|
||||
}, [refreshStatus])
|
||||
|
||||
}, [refreshCore])
|
||||
useEffect(() => {
|
||||
document.documentElement.dataset.theme = theme
|
||||
window.localStorage.setItem('hololake-theme', theme)
|
||||
}, [theme])
|
||||
useEffect(() => { if (view === 'receipts') void loadReceipts() }, [loadReceipts, view])
|
||||
|
||||
const connectionState = useMemo(() => {
|
||||
if (status.directConnectionCount > 0) return { label: '已连接', detail: `${status.directConnectionCount} 个直连通道在线`, tone: 'ready' }
|
||||
if (status.resumableSessionCount > 0) return { label: '可续接', detail: `${status.resumableSessionCount} 个会话等待续接`, tone: 'waiting' }
|
||||
return { label: '等待连接', detail: '本机直连核心已就绪', tone: 'quiet' }
|
||||
}, [status])
|
||||
const visibleDocuments = useMemo(() => {
|
||||
if (!searchResults) return knowledge.documents
|
||||
return searchResults.map((result) => knowledge.documents.find((item) => item.source === result.source && item.path === result.path)).filter(Boolean) as KnowledgeDocumentSummary[]
|
||||
}, [knowledge.documents, searchResults])
|
||||
const tree = useMemo(() => knowledgeTree(visibleDocuments), [visibleDocuments])
|
||||
const activeSummary = activeDocument
|
||||
? knowledge.documents.find((item) => item.source === activeDocument.source && item.path === activeDocument.path)
|
||||
: undefined
|
||||
const parsedDocument = useMemo(() => activeDocument ? splitFrontmatter(activeDocument.body) : null, [activeDocument])
|
||||
const outline = useMemo(() => activeDocument ? documentOutline(activeDocument.body) : [], [activeDocument])
|
||||
const connectionOnline = status.directConnectionCount > 0
|
||||
const connectionLabel = connectionOnline
|
||||
? '本地原生连接 · 客户端在线'
|
||||
: status.resumableSessionCount > 0
|
||||
? '原生会话可续接 · 当前离线'
|
||||
: '原生接口已驻留 · 尚无客户端'
|
||||
|
||||
const releaseRecoveryIdle = useMemo(() => [
|
||||
'NONE',
|
||||
'HEALTH_CONFIRMED_BACKUP_REMOVED',
|
||||
'ROLLBACK_CONFIRMED_BACKUP_REMOVED',
|
||||
'INSTALL_FAILURE_ACKNOWLEDGED_BACKUP_REMOVED',
|
||||
].includes(status.releaseRecoveryState), [status.releaseRecoveryState])
|
||||
|
||||
const releaseRecoveryNeedsAttention = !releaseRecoveryIdle
|
||||
|
||||
const openReceipts = async () => {
|
||||
setPanel('receipts')
|
||||
await loadReceipts()
|
||||
}
|
||||
|
||||
const loadReceipts = async () => {
|
||||
const openDocument = async (source: KnowledgeSource, path: string) => {
|
||||
setKnowledgeBusy(true)
|
||||
setKnowledgeMessage('')
|
||||
setEditing(false)
|
||||
try {
|
||||
const projection = await invoke<ReceiptProjection>('query_pncc_receipt_projection', { input: { afterSequence: 0, limit: 25 } })
|
||||
setReceipts(projection.events)
|
||||
} catch {
|
||||
setReceipts([])
|
||||
}
|
||||
const document = await invoke<KnowledgeDocument>('read_knowledge_document', { input: { source, path } })
|
||||
setActiveDocument(document)
|
||||
setDraft(document.body)
|
||||
} catch (error) { setKnowledgeMessage(humanError(error, 'knowledge')) }
|
||||
finally { setKnowledgeBusy(false) }
|
||||
}
|
||||
|
||||
const chooseRepository = async () => {
|
||||
setRepositoryBusy(true)
|
||||
setRepositoryMessage('')
|
||||
try {
|
||||
const candidate = await invoke<RepositoryCandidate | null>('select_pncc_repository_candidate')
|
||||
setRepositoryCandidate(candidate)
|
||||
if (!candidate) setRepositoryMessage('已取消选择，没有写入任何绑定。')
|
||||
} catch (error) {
|
||||
setRepositoryCandidate(null)
|
||||
setRepositoryMessage(`这个文件夹不能作为代码通道：${String(error)}`)
|
||||
} finally {
|
||||
setRepositoryBusy(false)
|
||||
}
|
||||
const openWiki = (target: string) => {
|
||||
const normalized = target.replace(/\.md$/i, '').toLowerCase()
|
||||
const match = knowledge.documents.find((item) =>
|
||||
item.title.toLowerCase() === normalized || item.path.replace(/\.md$/i, '').toLowerCase().endsWith(normalized))
|
||||
if (match) void openDocument(match.source, match.path)
|
||||
else setKnowledgeMessage(`未找到链接页面：${target}`)
|
||||
}
|
||||
|
||||
const confirmRepository = async () => {
|
||||
if (!repositoryCandidate) return
|
||||
setRepositoryBusy(true)
|
||||
setRepositoryMessage('')
|
||||
const runSearch = async (event: React.FormEvent) => {
|
||||
event.preventDefault()
|
||||
if (!searchQuery.trim()) { setSearchResults(null); return }
|
||||
setKnowledgeBusy(true)
|
||||
try {
|
||||
await invoke('confirm_pncc_repository_mount', {
|
||||
input: {
|
||||
candidateId: repositoryCandidate.candidateId,
|
||||
confirmationToken: repositoryCandidate.confirmationToken,
|
||||
},
|
||||
setSearchResults(await invoke<KnowledgeSearchResult[]>('search_knowledge', { input: { query: searchQuery } }))
|
||||
setActiveDocument(null)
|
||||
} catch (error) { setKnowledgeMessage(humanError(error, 'knowledge')) }
|
||||
finally { setKnowledgeBusy(false) }
|
||||
}
|
||||
const importKnowledge = async () => {
|
||||
setKnowledgeBusy(true)
|
||||
setKnowledgeMessage('')
|
||||
try {
|
||||
const result = await invoke<KnowledgeImportResult | null>('select_and_import_knowledge_folder')
|
||||
if (!result) return
|
||||
setKnowledge(result.snapshot)
|
||||
setSearchResults(null)
|
||||
setSearchQuery('')
|
||||
setLastKnowledgeReceipt(result.gitCommit)
|
||||
setKnowledgeMessage(`导入完成：新增 ${result.importedDocuments}，已存在 ${result.existingDocuments}，冲突 ${result.conflicts}。`)
|
||||
if (result.firstDocument) await openDocument('native', result.firstDocument)
|
||||
} catch (error) { setKnowledgeMessage(humanError(error, 'knowledge')) }
|
||||
finally { setKnowledgeBusy(false) }
|
||||
}
|
||||
const saveDocument = async () => {
|
||||
if (!activeDocument?.writable) return
|
||||
setKnowledgeBusy(true)
|
||||
try {
|
||||
const result = await invoke<KnowledgeSaveResult>('save_knowledge_document', {
|
||||
input: { path: activeDocument.path, body: draft, expectedContentSha256: activeDocument.contentSha256 },
|
||||
})
|
||||
setRepositoryCandidate(null)
|
||||
setRepositoryMessage('代码仓库已按当前固定提交绑定为只读通道。')
|
||||
await Promise.all([refreshStatus(), loadReceipts()])
|
||||
} catch (error) {
|
||||
setRepositoryMessage(`绑定没有写入：${String(error)}`)
|
||||
} finally {
|
||||
setRepositoryBusy(false)
|
||||
}
|
||||
setActiveDocument(result.document)
|
||||
setDraft(result.document.body)
|
||||
setEditing(false)
|
||||
setLastKnowledgeReceipt(result.gitCommit)
|
||||
setKnowledgeMessage(result.state === 'UNCHANGED' ? '内容没有变化。' : '页面已保存，并写入本机 Git 回执。')
|
||||
await refreshCore()
|
||||
} catch (error) { setKnowledgeMessage(humanError(error, 'knowledge')) }
|
||||
finally { setKnowledgeBusy(false) }
|
||||
}
|
||||
|
||||
const checkUpdate = async () => {
|
||||
setReleaseBusy(true)
|
||||
setReleaseMessage('')
|
||||
const cloneCodeChannel = async (event: React.FormEvent) => {
|
||||
event.preventDefault()
|
||||
if (!cloneUrl.trim()) return
|
||||
setCodeBusy(true)
|
||||
setCodeMessage('')
|
||||
try {
|
||||
const receipt = await invoke<ReleaseCheckReceipt>('check_hololake_update')
|
||||
setReleaseCandidate(receipt.candidate || null)
|
||||
if (!receipt.candidate) setReleaseMessage('当前已经是最新版本。')
|
||||
} catch (error) {
|
||||
const reason = String(error)
|
||||
setReleaseCandidate(null)
|
||||
setReleaseMessage(reason.includes('UNPROVISIONED_NO_NETWORK_REQUEST')
|
||||
? '京东主控的正式发布地址和更新公钥还没有登记。HoloLake 保持离线，不会向任何上游检查更新。'
|
||||
: `更新检查没有完成：${reason}`)
|
||||
} finally {
|
||||
setReleaseBusy(false)
|
||||
}
|
||||
const snapshot = await invoke<CodeChannelSnapshot>('clone_code_channel', { input: { url: cloneUrl } })
|
||||
setCodeChannels(snapshot)
|
||||
setCloneUrl('')
|
||||
setCodeMessage('代码频道已克隆并登记。')
|
||||
} catch (error) { setCodeMessage(humanError(error, 'code')) }
|
||||
finally { setCodeBusy(false) }
|
||||
}
|
||||
|
||||
const confirmUpdateInstall = async () => {
|
||||
if (!releaseCandidate) return
|
||||
setReleaseBusy(true)
|
||||
setReleaseMessage('正在重新核对广播并验证安装包；完成后由你手动重启 HoloLake。')
|
||||
const selectLocalCodeChannel = async () => {
|
||||
setCodeBusy(true)
|
||||
setCodeMessage('')
|
||||
try {
|
||||
await invoke('confirm_hololake_update_install', {
|
||||
input: {
|
||||
candidateId: releaseCandidate.candidateId,
|
||||
confirmationToken: releaseCandidate.confirmationToken,
|
||||
},
|
||||
})
|
||||
setReleaseCandidate(null)
|
||||
setReleaseMessage('签名安装包已验证并安装。请在准备好后手动重启 HoloLake。')
|
||||
await refreshStatus()
|
||||
} catch (error) {
|
||||
setReleaseMessage(`更新没有安装：${String(error)}`)
|
||||
} finally {
|
||||
setReleaseBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const resolveReleaseRecovery = async (action: 'keep' | 'rollback') => {
|
||||
setReleaseBusy(true)
|
||||
setReleaseMessage(action === 'rollback' ? '正在复核上一版签名并恢复；完成后仍由你手动重启。' : '正在确认当前版本健康并清理上一版副本。')
|
||||
try {
|
||||
if (action === 'rollback') {
|
||||
await invoke('rollback_hololake_update')
|
||||
setReleaseMessage('上一版已恢复到应用位置。请手动重启 HoloLake，启动后再确认恢复正常。')
|
||||
} else {
|
||||
await invoke('confirm_hololake_release_health')
|
||||
setReleaseMessage('当前运行版本已由你确认，临时回退副本已经清理。')
|
||||
const snapshot = await invoke<CodeChannelSnapshot | null>('select_local_code_channel')
|
||||
if (snapshot) {
|
||||
setCodeChannels(snapshot)
|
||||
setCodeMessage('本地代码频道已登记，原文件未移动。')
|
||||
}
|
||||
await refreshStatus()
|
||||
} catch (error) {
|
||||
setReleaseMessage(`没有改变当前应用：${String(error)}`)
|
||||
} finally {
|
||||
setReleaseBusy(false)
|
||||
}
|
||||
} catch (error) { setCodeMessage(humanError(error, 'code')) }
|
||||
finally { setCodeBusy(false) }
|
||||
}
|
||||
|
||||
const issueInvitation = async () => {
|
||||
setMessage('')
|
||||
const browseChannel = async (channel: CodeChannelEntry, path = '') => {
|
||||
setCodeBusy(true)
|
||||
setActiveChannel(channel)
|
||||
setActiveCodeFile(null)
|
||||
try {
|
||||
const receipt = await invoke<DiscoveryTicketReceipt>('issue_direct_local_discovery_ticket', {
|
||||
setCodeTree(await invoke<CodeTreeSnapshot>('browse_code_channel', { input: { channelId: channel.channelId, path } }))
|
||||
} catch (error) { setCodeMessage(humanError(error, 'code')) }
|
||||
finally { setCodeBusy(false) }
|
||||
}
|
||||
const openCodeEntry = async (entry: CodeTreeEntry) => {
|
||||
if (!activeChannel) return
|
||||
if (entry.kind === 'directory') { await browseChannel(activeChannel, entry.path); return }
|
||||
setCodeBusy(true)
|
||||
setCodeMode('human')
|
||||
try {
|
||||
setActiveCodeFile(await invoke<CodeFileProjection>('read_code_channel_file', {
|
||||
input: { channelId: activeChannel.channelId, path: entry.path },
|
||||
}))
|
||||
} catch (error) { setCodeMessage(humanError(error, 'code')) }
|
||||
finally { setCodeBusy(false) }
|
||||
}
|
||||
const codeParent = () => codeTree?.path.split('/').filter(Boolean).slice(0, -1).join('/') || ''
|
||||
|
||||
const initializeIdentity = async (event: React.FormEvent) => {
|
||||
event.preventDefault()
|
||||
setIdentityBusy(true)
|
||||
try {
|
||||
setPersonal(await invoke<PersonalChannelSnapshot>('initialize_personal_channel', { input: { displayName } }))
|
||||
setDisplayName('')
|
||||
} catch (error) { setIdentityMessage(humanError(error, 'identity')) }
|
||||
finally { setIdentityBusy(false) }
|
||||
}
|
||||
const issueInvitation = async () => {
|
||||
setSystemBusy(true)
|
||||
setSystemMessage('')
|
||||
try {
|
||||
setTicket(await invoke<DiscoveryTicketReceipt>('issue_direct_local_discovery_ticket', {
|
||||
input: {
|
||||
accountId: getOrCreateLocalId('hololake-local-account', 'human-local'),
|
||||
laneId: 'personal-channel',
|
||||
clientInstanceId: getOrCreateLocalId('hololake-external-ai-client', 'external-ai'),
|
||||
},
|
||||
})
|
||||
setTicket(receipt)
|
||||
setMessage('连接邀请已生成。它只在这台电脑上有效。')
|
||||
} catch (error) {
|
||||
setMessage(`暂时无法生成连接邀请：${String(error)}`)
|
||||
}
|
||||
}))
|
||||
setSystemMessage('一次性发现凭据已生成。连接成功后，状态条会显示真实在线数。')
|
||||
} catch (error) { setSystemMessage(humanError(error, 'system')) }
|
||||
finally { setSystemBusy(false) }
|
||||
}
|
||||
|
||||
const invitationText = ticket ? JSON.stringify({
|
||||
schema: 'hololake.direct-local-invitation/v1',
|
||||
transport: 'INSTALLED_HOLOLAKE_EXECUTABLE_WITH_CONNECTOR_FLAG',
|
||||
connectorArgument: '--connector',
|
||||
openSession: {
|
||||
operation: 'OPEN_SESSION',
|
||||
|
|
@ -330,160 +430,170 @@ function HoloLakeApp() {
|
|||
discoveryTicket: ticket.discoveryTicket,
|
||||
},
|
||||
},
|
||||
mcpRole: 'DISCOVERY_RECOVERY_COMPATIBILITY_ONLY',
|
||||
}, null, 2) : ''
|
||||
|
||||
const copyInvitation = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(invitationText)
|
||||
setMessage('已复制。把它交给桌面上的编程 AI 即可。')
|
||||
} catch {
|
||||
setMessage('复制没有成功，请选中下方邀请内容后复制。')
|
||||
}
|
||||
setSystemMessage('连接凭据已复制。')
|
||||
} catch { setSystemMessage('复制失败，请手动选择凭据。') }
|
||||
}
|
||||
const checkUpdate = async () => {
|
||||
setSystemBusy(true)
|
||||
try {
|
||||
const result = await invoke<ReleaseCheckReceipt>('check_hololake_update')
|
||||
setReleaseCandidate(result.candidate || null)
|
||||
setSystemMessage(result.candidate ? '发现已签名更新。' : '当前没有可安装更新。')
|
||||
} catch (error) { setSystemMessage(humanError(error, 'system')) }
|
||||
finally { setSystemBusy(false) }
|
||||
}
|
||||
const installUpdate = async () => {
|
||||
if (!releaseCandidate) return
|
||||
setSystemBusy(true)
|
||||
try {
|
||||
await invoke('confirm_hololake_update_install', {
|
||||
input: { candidateId: releaseCandidate.candidateId, confirmationToken: releaseCandidate.confirmationToken },
|
||||
})
|
||||
setSystemMessage('更新安装已启动。')
|
||||
} catch (error) { setSystemMessage(humanError(error, 'system')) }
|
||||
finally { setSystemBusy(false) }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="world-shell">
|
||||
<div className="scene-image" aria-hidden="true" />
|
||||
<div className="nebula nebula-one" aria-hidden="true" />
|
||||
<div className="nebula nebula-two" aria-hidden="true" />
|
||||
<div className="mist" aria-hidden="true" />
|
||||
<div className="stars" aria-hidden="true">{Array.from({ length: 18 }, (_, index) => <i key={index} style={{ '--star-index': index } as React.CSSProperties} />)}</div>
|
||||
<div className="glimmers" aria-hidden="true">{Array.from({ length: 11 }, (_, index) => <i key={index} style={{ '--glimmer-index': index } as React.CSSProperties} />)}</div>
|
||||
|
||||
<header className="world-header">
|
||||
<div className="world-mark">
|
||||
<span className="world-name">光湖</span>
|
||||
<span className="world-route">个人频道</span>
|
||||
</div>
|
||||
<button className="icon-button" type="button" aria-label="打开设置" onClick={() => setPanel('settings')}><Icon name="settings" /></button>
|
||||
const renderOverview = () => (
|
||||
<section className="content-page overview-page">
|
||||
<header className="page-title">
|
||||
<div><span className="kicker">PERSONAL HOLOLAKE</span><h1>个人工作空间</h1><p>知识、代码与本机协作的统一入口</p></div>
|
||||
<button className="evidence-pill" type="button" onClick={() => setView('system')}><i className={connectionOnline ? 'online' : ''}/>{connectionLabel}</button>
|
||||
</header>
|
||||
|
||||
<main className="home-content">
|
||||
<section className="hero" aria-labelledby="home-title">
|
||||
<p className="route-kicker">HOLOLAKE · PERSONAL CHANNEL</p>
|
||||
<h1 id="home-title">语言进入这里，<br />成为可见、可续的现实。</h1>
|
||||
<p className="hero-copy">外部编程 AI 从本机进入。HoloLake 保存路线、边界与回执；五个域安静地运行在湖底。</p>
|
||||
<div className="hero-actions">
|
||||
<button className="primary-action" type="button" onClick={() => setPanel('channel')}>
|
||||
{status.directConnectionCount > 0 ? '已连接 · 查看通道' : '连接编程 AI'}
|
||||
<Icon name="arrow" />
|
||||
</button>
|
||||
<button className="secondary-action" type="button" onClick={() => void openReceipts()}><Icon name="receipt" />查看回执</button>
|
||||
</div>
|
||||
<div className="overview-grid">
|
||||
<button className="metric-panel" type="button" onClick={() => setView('knowledge')}><span>唯一知识页</span><strong>{knowledge.uniqueDocumentCount}</strong><small>{knowledge.duplicateDocumentCount} 份相同内容已折叠</small></button>
|
||||
<button className="metric-panel" type="button" onClick={() => setView('code')}><span>代码频道</span><strong>{codeChannels.channels.length}</strong><small>可浏览、可转译、本机只读接入</small></button>
|
||||
<button className="metric-panel" type="button" onClick={() => setView('receipts')}><span>可核验回执</span><strong>{personal.integrity.receiptCount + status.pnccReceiptCount}</strong><small>身份、知识与代码证据</small></button>
|
||||
</div>
|
||||
<div className="overview-columns">
|
||||
<section className="plain-panel recent-panel">
|
||||
<header><div><h2>最近知识</h2><p>从真实页面继续阅读</p></div><button type="button" onClick={() => setView('knowledge')}>打开工作台</button></header>
|
||||
{knowledge.documents.slice().sort((a, b) => b.updatedAtUnixMs - a.updatedAtUnixMs).slice(0, 7).map((item) =>
|
||||
<button className="recent-row" key={`${item.source}:${item.path}`} type="button" onClick={() => { setView('knowledge'); void openDocument(item.source, item.path) }}>
|
||||
<Icon name="file"/><span><b>{item.title}</b><small>{item.path}</small></span><time>{new Date(item.updatedAtUnixMs).toLocaleDateString('zh-CN')}</time>
|
||||
</button>)}
|
||||
</section>
|
||||
|
||||
<section className="status-cluster" aria-label="光湖运行状态">
|
||||
<article className="status-item">
|
||||
<span className={`status-light ${connectionState.tone}`} aria-hidden="true" />
|
||||
<div><h2>本机直连通道</h2><p>{connectionState.detail}</p></div>
|
||||
</article>
|
||||
<article className="status-item">
|
||||
<span className={`status-light ${status.codeRepositoryMountCount > 0 ? 'ready' : 'quiet'}`} aria-hidden="true" />
|
||||
<div><h2>代码通道仓库</h2><p>{status.codeRepositoryMountCount > 0 ? `已验证 · ${status.codeRepositoryMountCount} 个仓库` : '等待人类确认绑定'}</p></div>
|
||||
</article>
|
||||
<button className="status-item status-button" type="button" onClick={() => setPanel('updates')}>
|
||||
<span className={`status-light ${releaseRecoveryNeedsAttention ? 'waiting' : status.updateState.startsWith('READY') ? 'ready' : 'quiet'}`} aria-hidden="true" />
|
||||
<div><h2>更新广播</h2><p>{releaseRecoveryNeedsAttention ? '更新结果等待你的确认' : status.updateState.startsWith('READY') ? '仅接收光湖签名广播' : '信任根未配置 · 已关闭联网'}</p></div>
|
||||
</button>
|
||||
<section className="plain-panel system-proof">
|
||||
<header><div><h2>运行证据</h2><p>状态来自当前进程，不使用演示值</p></div></header>
|
||||
<dl><div><dt>Unix 本地代理</dt><dd>{status.directLocalBrokerState}</dd></div><div><dt>在线客户端</dt><dd>{status.directConnectionCount}</dd></div><div><dt>可续接会话</dt><dd>{status.resumableSessionCount}</dd></div><div><dt>PNCC 投影回执</dt><dd>{status.pnccReceiptCount}</dd></div><div><dt>MCP</dt><dd>备用 / 恢复</dd></div></dl>
|
||||
<button className="secondary-button" type="button" onClick={() => setView('system')}>查看验证入口</button>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="world-footer">
|
||||
<p><b>GH-AIOS</b><span>光湖人工智能操作系统</span></p>
|
||||
<p className="trust-note"><i />你的工作留在本机 · 连接与更新均需确认</p>
|
||||
</footer>
|
||||
|
||||
{panel && <div className="panel-backdrop" role="presentation" onMouseDown={(event) => event.target === event.currentTarget && setPanel(null)}>
|
||||
<section className="detail-panel" role="dialog" aria-modal="true" aria-labelledby="panel-title">
|
||||
<button className="panel-close" type="button" aria-label="关闭" onClick={() => setPanel(null)}><Icon name="close" /></button>
|
||||
{panel === 'channel' && <>
|
||||
<p className="panel-kicker">个人频道</p>
|
||||
<h2 id="panel-title">让编程 AI 从本机进入</h2>
|
||||
<p className="panel-intro">MCP 只负责发现和恢复。进入后，编程 AI 使用 HoloLake 的本机直连通道；电脑不关，驻留核心就一直在。</p>
|
||||
<div className="connection-summary"><span className={`status-light ${connectionState.tone}`} /><div><b>{connectionState.label}</b><span>{connectionState.detail}</span></div></div>
|
||||
{status.directConnectionCount > 0 ? <div className="session-guidance">
|
||||
<b>通道已建立</b>
|
||||
<span>编程 AI 正在使用本机直连通道。一次性邀请已经失效，不会再次显示。</span>
|
||||
</div> : status.resumableSessionCount > 0 ? <div className="session-guidance">
|
||||
<b>等待原会话续接</b>
|
||||
<span>请让原编程 AI 使用它保存的续接凭据重新进入。HoloLake 不会重新展示已经消费的邀请。</span>
|
||||
</div> : ticket ? <>
|
||||
<button className="primary-action panel-action" type="button" onClick={() => void copyInvitation()}><Icon name="copy" />复制给编程 AI</button>
|
||||
<pre className="invitation-preview">{invitationText}</pre>
|
||||
</> : <button className="primary-action panel-action" type="button" onClick={() => void issueInvitation()}>生成一次性连接邀请<Icon name="arrow" /></button>}
|
||||
{message && <p className="panel-message" aria-live="polite">{message}</p>}
|
||||
<p className="boundary-note">连接邀请不赋予服务器权限。写入、发布与更新仍分别确认并留下回执。</p>
|
||||
</>}
|
||||
{panel === 'receipts' && <>
|
||||
<p className="panel-kicker">可核验的发生</p>
|
||||
<h2 id="panel-title">代码通道回执</h2>
|
||||
<p className="panel-intro">这里是只读投影，不是权限来源。没有回执，也不代表服务器离线。</p>
|
||||
{repositoryCandidate ? <div className="candidate-card">
|
||||
<div className="candidate-heading"><span className="status-light waiting" /><div><b>等待你确认</b><span>HoloLake 已只读检查这个 Git 仓库</span></div></div>
|
||||
<dl className="candidate-facts">
|
||||
<div><dt>人格</dt><dd>{repositoryCandidate.inspection.personaId}</dd></div>
|
||||
<div><dt>责任人</dt><dd>{repositoryCandidate.inspection.humanResponsibilitySubject}</dd></div>
|
||||
<div><dt>固定提交</dt><dd>{repositoryCandidate.inspection.gitHead.slice(0, 12)}</dd></div>
|
||||
<div><dt>工作区</dt><dd>{repositoryCandidate.inspection.repositoryClean ? '干净' : '有未提交变化 · 不读取'}</dd></div>
|
||||
<div><dt>检查点</dt><dd>{repositoryCandidate.inspection.currentCheckpoint.relativePath}</dd></div>
|
||||
</dl>
|
||||
<p>确认后只绑定这一份已提交证据；不会启动模型、不会取得人格租约、不会执行现实动作。</p>
|
||||
<div className="candidate-actions"><button className="primary-action" type="button" disabled={repositoryBusy} onClick={() => void confirmRepository()}>确认只读绑定<Icon name="arrow" /></button><button className="text-action" type="button" disabled={repositoryBusy} onClick={() => setRepositoryCandidate(null)}>重新选择</button></div>
|
||||
</div> : <button className="repository-picker" type="button" disabled={repositoryBusy} onClick={() => void chooseRepository()}><span><b>{status.codeRepositoryMountCount > 0 ? '再绑定一个代码仓库' : '绑定代码通道仓库'}</b><small>从 macOS 原生文件夹选择器进入</small></span><Icon name="arrow" /></button>}
|
||||
{repositoryMessage && <p className="panel-message" aria-live="polite">{repositoryMessage}</p>}
|
||||
{receipts.length ? <ol className="receipt-list">{receipts.map((receipt) => <li key={receipt.sequence}><span>{receipt.sequence.toString().padStart(2, '0')}</span><div><b>{receipt.kind === 'REPOSITORY_BINDING_REVALIDATED' ? '仓库绑定已复核' : '远端对象读取已验证'}</b><small>{new Date(Number(receipt.observedAtUnixMs)).toLocaleString('zh-CN')} · {receipt.eventHash.slice(0, 12)}</small></div></li>)}</ol> : <div className="empty-state compact"><i /><b>湖面还没有新回执</b><span>完成代码仓库绑定或读取后，这里会出现可核验记录。</span></div>}
|
||||
</>}
|
||||
{panel === 'updates' && <>
|
||||
<p className="panel-kicker">光湖签名广播</p>
|
||||
<h2 id="panel-title">更新由你决定何时进入</h2>
|
||||
<p className="panel-intro">HoloLake 不接收开源上游自动推送。只有登记到本机的光湖主控地址和公钥可以参与更新，并且检查、安装、重启是三件分开的事。</p>
|
||||
{status.releaseRecoveryState === 'AWAITING_HUMAN_HEALTH_CONFIRMATION' ? <div className="recovery-card">
|
||||
<div className="candidate-heading"><span className="status-light waiting" /><div><b>新版本已启动，等待你的判断</b><span>上一版仍作为已验签副本保留</span></div></div>
|
||||
<p>如果当前湖面、连接和代码通道都正常，确认保留当前版本；如果不正常，恢复上一版。两个动作都不会自动重启。</p>
|
||||
<div className="recovery-actions"><button className="primary-action" type="button" disabled={releaseBusy} onClick={() => void resolveReleaseRecovery('keep')}>当前版本正常</button><button className="secondary-action" type="button" disabled={releaseBusy} onClick={() => void resolveReleaseRecovery('rollback')}>恢复上一版</button></div>
|
||||
</div> : status.releaseRecoveryState === 'ROLLED_BACK_AWAITING_HUMAN_ACKNOWLEDGEMENT' ? <div className="recovery-card">
|
||||
<div className="candidate-heading"><span className="status-light waiting" /><div><b>上一版已经恢复</b><span>请确认湖面与通道运行正常</span></div></div>
|
||||
<p>确认后，HoloLake 会清理这次更新留下的临时回退副本，并重新开放下一次更新检查。</p>
|
||||
<button className="primary-action panel-action" type="button" disabled={releaseBusy} onClick={() => void resolveReleaseRecovery('keep')}>确认恢复正常<Icon name="arrow" /></button>
|
||||
</div> : ['INSTALL_FAILED_BACKUP_RETAINED', 'INSTALL_INTERRUPTED_BACKUP_RETAINED'].includes(status.releaseRecoveryState) ? <div className="recovery-card">
|
||||
<div className="candidate-heading"><span className="status-light waiting" /><div><b>更新没有替换当前版本</b><span>上一版保护副本仍保留</span></div></div>
|
||||
<p>当前 HoloLake 仍在原版本上运行。确认运行正常后，清理保护副本并重新开放更新。</p>
|
||||
<button className="primary-action panel-action" type="button" disabled={releaseBusy} onClick={() => void resolveReleaseRecovery('keep')}>确认当前版本正常<Icon name="arrow" /></button>
|
||||
</div> : ['INSTALL_REPLACED_AWAITING_MANUAL_RESTART', 'ROLLBACK_REPLACED_AWAITING_MANUAL_RESTART', 'LAST_KNOWN_GOOD_VERIFIED_INSTALLING'].includes(status.releaseRecoveryState) ? <div className="recovery-card">
|
||||
<div className="candidate-heading"><span className="status-light waiting" /><div><b>应用已替换，等待手动重启</b><span>HoloLake 不会替你关闭或重启</span></div></div>
|
||||
<p>关闭并重新打开 HoloLake 后，这里会要求你确认新版本健康，或确认上一版已经恢复。</p>
|
||||
</div> : !releaseRecoveryIdle ? <div className="recovery-card">
|
||||
<div className="candidate-heading"><span className="status-light waiting" /><div><b>更新保护状态需要维护</b><span>下一次更新已经锁住，现有湖面仍可使用</span></div></div>
|
||||
<p>HoloLake 没有删除或猜测恢复记录，也不会联网继续更新。由光湖维护人员核对本机回执后再恢复更新通道。</p>
|
||||
</div> : releaseCandidate ? <div className="release-card">
|
||||
<div className="release-version"><span>新版本</span><b>{releaseCandidate.version}</b><small>当前 {releaseCandidate.currentVersion}</small></div>
|
||||
<p>{releaseCandidate.notes}</p>
|
||||
<ul>{releaseCandidate.features.map((feature) => <li key={feature}>{feature}</li>)}{releaseCandidate.fixes.map((fix) => <li key={fix}>{fix}</li>)}</ul>
|
||||
<dl className="candidate-facts">
|
||||
<div><dt>数据迁移</dt><dd>{releaseCandidate.dataMigrationRequired ? '需要' : '不需要'}</dd></div>
|
||||
<div><dt>最低版本</dt><dd>{releaseCandidate.minimumVersion}</dd></div>
|
||||
<div><dt>重启</dt><dd>安装后由你手动完成</dd></div>
|
||||
<div><dt>回滚声明</dt><dd>{releaseCandidate.rollbackSupported ? `支持 · ${releaseCandidate.previousVersion || '上一版本'}` : '不支持'}</dd></div>
|
||||
</dl>
|
||||
<p className="release-warning">安装前会再次读取同一广播，验证下载域名、Tauri 签名、文件大小和 SHA-256；内容变化就停止并要求重新确认。</p>
|
||||
<button className="primary-action panel-action" type="button" disabled={releaseBusy} onClick={() => void confirmUpdateInstall()}>确认下载并安装<Icon name="arrow" /></button>
|
||||
</div> : <div className="update-state-card"><span className={`status-light ${status.updateState.startsWith('READY') ? 'ready' : 'quiet'}`} /><div><b>{status.updateState.startsWith('READY') ? '主控信任根已登记' : '更新网络保持关闭'}</b><span>{status.updateState.startsWith('READY') ? '可以由你手动检查签名广播' : '没有正式地址和公钥时，不发起网络请求'}</span></div></div>}
|
||||
{!releaseCandidate && releaseRecoveryIdle && <button className="primary-action panel-action" type="button" disabled={releaseBusy} onClick={() => void checkUpdate()}>{releaseBusy ? '正在核对…' : '检查光湖更新'}<Icon name="arrow" /></button>}
|
||||
{releaseMessage && <p className="panel-message" aria-live="polite">{releaseMessage}</p>}
|
||||
<p className="boundary-note">持久回退底座已进入本机容器。公共更新仍需京东主控正式地址、公钥、签名发布流水线与苹果公证全部到位后才会启用。</p>
|
||||
</>}
|
||||
{panel === 'settings' && <>
|
||||
<p className="panel-kicker">湖面设置</p>
|
||||
<h2 id="panel-title">选择你看见光湖的方式</h2>
|
||||
<p className="panel-intro">只改变光与色。布局、文案、连接边界和底层路由保持不变。</p>
|
||||
<div className="theme-list">{themes.map((choice) => <button key={choice.id} type="button" className={theme === choice.id ? 'selected' : ''} onClick={() => setTheme(choice.id)}><i className={`theme-swatch ${choice.id}`} /><span><b>{choice.name}</b><small>{choice.id === 'night' ? '当前定版基色' : '五色湖定版主题'}</small></span><em>{theme === choice.id ? '已选择' : ''}</em></button>)}</div>
|
||||
<p className="boundary-note">上游自动更新保持关闭。正式更新只接受 HoloLake 自有信任根的签名广播，并由你确认。</p>
|
||||
</>}
|
||||
</section>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
const renderKnowledge = () => (
|
||||
<section className="full-workbench knowledge-page">
|
||||
<aside className="knowledge-browser">
|
||||
<header><div><span className="kicker">KNOWLEDGE</span><h1>知识工作台</h1></div><button className="icon-button" title="导入文件夹" type="button" disabled={knowledgeBusy} onClick={() => void importKnowledge()}><Icon name="import"/></button></header>
|
||||
<form className="search-box" onSubmit={(event) => void runSearch(event)}>
|
||||
<Icon name="search"/><input aria-label="检索知识" value={searchQuery} placeholder="检索标题与正文" onChange={(event) => setSearchQuery(event.target.value)}/>
|
||||
{searchResults && <button type="button" onClick={() => { setSearchResults(null); setSearchQuery('') }}>清除</button>}
|
||||
</form>
|
||||
<div className="knowledge-counts"><span>{knowledge.uniqueDocumentCount} 篇唯一文档</span><span>{knowledge.duplicateDocumentCount} 份重复已折叠</span></div>
|
||||
<div className="knowledge-tree" aria-busy={knowledgeBusy}>
|
||||
{visibleDocuments.length
|
||||
? <KnowledgeTree node={tree} depth={0} expanded={expanded} active={activeDocument ? `${activeDocument.source}:${activeDocument.path}` : undefined}
|
||||
onToggle={(key) => setExpanded((current) => { const next = new Set(current); if (next.has(key)) next.delete(key); else next.add(key); return next })}
|
||||
onOpen={(item) => void openDocument(item.source, item.path)}/>
|
||||
: <div className="empty-state">没有匹配的知识页</div>}
|
||||
</div>
|
||||
<footer>{knowledgeMessage || (lastKnowledgeReceipt ? `Git ${lastKnowledgeReceipt.slice(0, 10)}` : '导入会自动检查相同内容')}</footer>
|
||||
</aside>
|
||||
<main className="document-workspace">
|
||||
{activeDocument ? <>
|
||||
<header className="document-toolbar">
|
||||
<div className="breadcrumbs"><span>{activeDocument.source === 'legacy' ? 'HoloLake Era · 只读源' : '我的知识库'}</span><b>/</b><span>{activeDocument.path}</span></div>
|
||||
<div>{editing
|
||||
? <><button className="toolbar-button" type="button" onClick={() => { setEditing(false); setDraft(activeDocument.body) }}>取消</button><button className="toolbar-button primary" type="button" disabled={knowledgeBusy} onClick={() => void saveDocument()}><Icon name="save"/>保存</button></>
|
||||
: activeDocument.writable && <button className="toolbar-button" type="button" onClick={() => { setDraft(activeDocument.body); setEditing(true) }}><Icon name="edit"/>编辑</button>}
|
||||
</div>
|
||||
</header>
|
||||
<div className="document-scroll">
|
||||
{editing
|
||||
? <textarea className="document-editor" aria-label="Markdown 编辑器" value={draft} onChange={(event) => setDraft(event.target.value)}/>
|
||||
: <><header className="reader-heading"><h1>{activeDocument.title}</h1><div>{Object.entries(parsedDocument?.metadata || {}).slice(0, 5).map(([key, value]) => <span key={key}>{key} · {value}</span>)}</div></header><MarkdownDocument body={activeDocument.body} onWiki={openWiki}/></>}
|
||||
</div>
|
||||
</> : <div className="workbench-empty"><span>光</span><h2>选择一篇知识页</h2><p>目录、正文与版本证据会在同一个工作台中展开。</p><button className="primary-button" type="button" onClick={() => void importKnowledge()}>导入本地文件夹</button></div>}
|
||||
</main>
|
||||
<aside className="document-inspector">
|
||||
<div className="inspector-tabs"><span className="active">大纲</span><span>来源</span><span>回执</span></div>
|
||||
{activeDocument ? <div className="inspector-scroll">
|
||||
<section><h2>页面大纲</h2>{outline.length ? <nav className="outline-list">{outline.map((item) => <span key={item.id} style={{ paddingLeft: (item.level - 1) * 11 }}>{item.title}</span>)}</nav> : <p>当前页面没有标题层级。</p>}</section>
|
||||
<section><h2>来源</h2><dl><div><dt>知识根</dt><dd>{activeDocument.source === 'native' ? 'HoloLake 本机 Git' : 'HoloLake Era 只读供体'}</dd></div><div><dt>路径</dt><dd>{activeDocument.path}</dd></div><div><dt>内容指纹</dt><dd>{activeDocument.contentSha256.slice(0, 16)}</dd></div><div><dt>相同内容</dt><dd>{activeSummary?.duplicateCount || 0} 份已折叠</dd></div></dl></section>
|
||||
<section><h2>页面状态</h2><p>{activeDocument.writable ? '可编辑；保存时写入本机 Git。' : '供体原件只读；不会被修改。'}</p>{lastKnowledgeReceipt && <code>{lastKnowledgeReceipt}</code>}</section>
|
||||
</div> : <div className="empty-state">选择页面后显示大纲与证据</div>}
|
||||
</aside>
|
||||
</section>
|
||||
)
|
||||
|
||||
const renderCode = () => (
|
||||
<section className="full-workbench code-workbench">
|
||||
<aside className="code-channels">
|
||||
<header><div><span className="kicker">CODE CHANNEL</span><h1>代码频道</h1></div></header>
|
||||
<form className="clone-form" onSubmit={(event) => void cloneCodeChannel(event)}>
|
||||
<label htmlFor="clone-url">克隆频道地址</label><div><input id="clone-url" type="url" value={cloneUrl} placeholder="https://guanghulab.com/code/…" onChange={(event) => setCloneUrl(event.target.value)}/><button disabled={!cloneUrl.trim() || codeBusy}>克隆</button></div>
|
||||
</form>
|
||||
<button className="local-folder-button" type="button" onClick={() => void selectLocalCodeChannel()}><Icon name="folder"/>导入本机 Git 文件夹</button>
|
||||
<div className="channel-selector">{codeChannels.channels.map((channel) => <button className={activeChannel?.channelId === channel.channelId ? 'active' : ''} key={channel.channelId} type="button" onClick={() => void browseChannel(channel)}><Icon name="code"/><span><b>{channel.name}</b><small>{channel.branch} · {channel.gitHead.slice(0, 8)}</small></span></button>)}</div>
|
||||
<footer>{codeMessage || '仅提供本机读取，不授予推送、发布或部署权限。'}</footer>
|
||||
</aside>
|
||||
<aside className="repository-tree">
|
||||
<header><button className="icon-button" disabled={!codeTree?.path} type="button" onClick={() => activeChannel && void browseChannel(activeChannel, codeParent())}><Icon name="back"/></button><div><b>{activeChannel?.name || '尚未选择频道'}</b><small>/{codeTree?.path || ''}</small></div></header>
|
||||
<div className="repository-entries">{codeTree?.entries.map((entry) => <button key={entry.path} type="button" onClick={() => void openCodeEntry(entry)}><Icon name={entry.kind === 'directory' ? 'folder' : 'file'}/><span>{entry.name}</span>{entry.kind === 'directory' && <Icon name="chevron"/>}</button>) || <div className="empty-state">选择频道后浏览仓库</div>}</div>
|
||||
</aside>
|
||||
<main className="code-reader">
|
||||
{activeCodeFile ? <>
|
||||
<header><div><span>{activeCodeFile.path}</span><small>{activeCodeFile.format.toUpperCase()} · {activeCodeFile.sizeBytes.toLocaleString()} bytes</small></div><div className="mode-switch"><button className={codeMode === 'human' ? 'active' : ''} type="button" onClick={() => setCodeMode('human')}>知识视图</button><button className={codeMode === 'source' ? 'active' : ''} type="button" onClick={() => setCodeMode('source')}>源文件</button></div></header>
|
||||
<div className="code-reader-scroll">{codeMode === 'human' ? <MarkdownDocument body={activeCodeFile.humanMarkdown}/> : <pre className="source-code"><code>{activeCodeFile.source}</code></pre>}</div>
|
||||
</> : <div className="workbench-empty"><span></></span><h2>浏览真实仓库内容</h2><p>支持 Markdown、JSON、HDLP、YAML、TOML 与常见代码格式；机器文件可切换为知识视图。</p></div>}
|
||||
</main>
|
||||
</section>
|
||||
)
|
||||
|
||||
const renderReceipts = () => (
|
||||
<section className="content-page">
|
||||
<header className="page-title"><div><span className="kicker">LOCAL RECEIPTS</span><h1>回执</h1><p>本机身份、知识与代码读取的可核验记录</p></div></header>
|
||||
<div className="receipt-grid">
|
||||
<section className="plain-panel"><h2>个人空间</h2>{personal.recentEvents.map((event) => <article className="receipt-row" key={event.eventId}><span>{String(event.sequence).padStart(2, '0')}</span><div><b>{event.summary}</b><small>{new Date(event.occurredAtUnixMs).toLocaleString('zh-CN')} · {event.receiptHash.slice(0, 12)}</small></div></article>)}</section>
|
||||
<section className="plain-panel"><h2>PNCC 读取投影</h2>{receipts.length ? receipts.map((receipt) => <article className="receipt-row" key={receipt.sequence}><span>{String(receipt.sequence).padStart(2, '0')}</span><div><b>{receipt.kind}</b><small>{new Date(Number(receipt.observedAtUnixMs)).toLocaleString('zh-CN')} · {receipt.eventHash.slice(0, 12)}</small></div></article>) : <div className="empty-state">尚无 PNCC 运行投影回执</div>}</section>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
const renderSystem = () => (
|
||||
<section className="content-page">
|
||||
<header className="page-title"><div><span className="kicker">SYSTEM EVIDENCE</span><h1>系统详情</h1><p>这里显示可回读的运行事实，不显示推测状态</p></div></header>
|
||||
<div className="system-grid">
|
||||
<section className="plain-panel connection-panel">
|
||||
<header><div><h2>人格体本地原生连接</h2><p>Unix Stream 长连接为主，MCP 仅作发现与恢复</p></div><span className={connectionOnline ? 'status-chip online' : 'status-chip'}>{connectionOnline ? `${status.directConnectionCount} 个客户端在线` : '当前无客户端'}</span></header>
|
||||
<dl className="evidence-list"><div><dt>代理进程</dt><dd>{status.directLocalBrokerState}</dd></div><div><dt>当前连接</dt><dd>{status.directConnectionCount}</dd></div><div><dt>可续接会话</dt><dd>{status.resumableSessionCount}</dd></div><div><dt>传输</dt><dd>UNIX_STREAM_JSON_LINES</dd></div><div><dt>MCP 角色</dt><dd>备用 / 恢复 / 兼容</dd></div></dl>
|
||||
{ticket ? <><button className="secondary-button" type="button" onClick={() => void copyInvitation()}><Icon name="copy"/>复制一次性连接凭据</button><pre className="invitation-data">{invitationText}</pre></> : <button className="primary-button" type="button" disabled={systemBusy} onClick={() => void issueInvitation()}>生成本机连接凭据</button>}
|
||||
</section>
|
||||
<section className="plain-panel"><header><div><h2>GH-PNCC 投影</h2><p>仓库挂载和读取回执来自同一运行事件流</p></div></header><dl className="evidence-list"><div><dt>已挂载仓库</dt><dd>{status.codeRepositoryMountCount}</dd></div><div><dt>投影回执</dt><dd>{status.pnccReceiptCount}</dd></div><div><dt>当前结论</dt><dd>{status.codeRepositoryMountCount > 0 && status.pnccReceiptCount > 0 ? '已有运行证据' : '架构已接入，尚无完整运行投影'}</dd></div></dl></section>
|
||||
<section className="plain-panel"><header><div><h2>显示主题</h2><p>五湖主题只改变视觉令牌，不改变功能结构</p></div></header><div className="theme-options">{themes.map((choice) => <button className={theme === choice.id ? 'active' : ''} key={choice.id} type="button" onClick={() => setTheme(choice.id)}><i className={choice.id}/><span>{choice.name}</span></button>)}</div></section>
|
||||
<section className="plain-panel"><header><div><h2>软件更新</h2><p>只接受登记到本机的签名发布源</p></div></header>{releaseCandidate ? <div className="release-summary"><b>HoloLake {releaseCandidate.version}</b><p>{releaseCandidate.notes}</p><button className="primary-button" onClick={() => void installUpdate()}>验证并安装</button></div> : <button className="secondary-button" disabled={systemBusy} onClick={() => void checkUpdate()}>检查签名更新</button>}</section>
|
||||
</div>
|
||||
{systemMessage && <p className="global-message">{systemMessage}</p>}
|
||||
</section>
|
||||
)
|
||||
|
||||
return <div className="app-shell">
|
||||
<aside className="sidebar">
|
||||
<div className="brand"><span className="brand-mark">光</span><div><b>HoloLake</b><small>GH-AIOS</small></div></div>
|
||||
<nav>{(Object.keys(viewLabels) as ViewId[]).map((item) => <button className={view === item ? 'active' : ''} key={item} type="button" onClick={() => setView(item)}><Icon name={item}/><span>{viewLabels[item]}</span>{item === 'knowledge' && <em>{knowledge.uniqueDocumentCount}</em>}</button>)}</nav>
|
||||
<div className="sidebar-foot"><span className="identity-dot"/><div><b>{personal.identity?.displayName || '本机空间'}</b><small>{personal.identity ? '个人频道已建立' : '等待首次设置'}</small></div></div>
|
||||
</aside>
|
||||
<section className="app-main">
|
||||
<header className="connection-strip"><button type="button" onClick={() => setView('system')}><i className={connectionOnline ? 'online' : ''}/><span>{connectionLabel}</span></button><span className="mcp-backup">MCP 备用</span><button type="button" onClick={() => setView('system')}>连接验证 <Icon name="arrow"/></button></header>
|
||||
<main className="workspace">{view === 'overview' ? renderOverview() : view === 'knowledge' ? renderKnowledge() : view === 'code' ? renderCode() : view === 'receipts' ? renderReceipts() : renderSystem()}</main>
|
||||
</section>
|
||||
{personal.state !== 'UNAVAILABLE' && !personal.identity && <div className="onboarding-backdrop"><section className="onboarding-card" role="dialog" aria-modal="true"><span className="onboarding-mark">光湖</span><span className="kicker">FIRST LOCAL ENTRY</span><h1>建立个人空间</h1><p>仅需一次。知识、频道与本机记录都归属于这台电脑。</p><form onSubmit={(event) => void initializeIdentity(event)}><label htmlFor="display-name">称呼</label><input id="display-name" autoFocus maxLength={80} value={displayName} placeholder="你的名字" onChange={(event) => setDisplayName(event.target.value)}/><button className="primary-button" disabled={identityBusy || !displayName.trim()}>进入 HoloLake</button></form>{identityMessage && <p>{identityMessage}</p>}</section></div>}
|
||||
</div>
|
||||
}
|
||||
|
||||
createRoot(document.getElementById('root')!).render(<StrictMode><HoloLakeApp /></StrictMode>)
|
||||
createRoot(document.getElementById('root')!).render(<StrictMode><HoloLakeApp/></StrictMode>)
|
||||
|
|
|
|||
|
|
@ -1,180 +1,295 @@
|
|||
* { box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei UI", sans-serif;
|
||||
color: var(--content-primary);
|
||||
background: var(--surface-depth);
|
||||
font-synthesis: none;
|
||||
text-rendering: geometricPrecision;
|
||||
}
|
||||
|
||||
body { margin: 0; min-width: 320px; min-height: 100vh; overflow: hidden; }
|
||||
button { font: inherit; }
|
||||
button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
|
||||
|
||||
.world-shell {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
html, body, #root { width: 100%; height: 100%; margin: 0; }
|
||||
button, input, textarea { font: inherit; }
|
||||
button { color: inherit; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
background: linear-gradient(180deg, var(--surface-sky) 0%, var(--surface-horizon) 40%, var(--surface-lake) 65%, var(--surface-depth) 100%);
|
||||
transition: background 450ms ease, color 300ms ease;
|
||||
color: var(--content-secondary);
|
||||
background: var(--surface-depth);
|
||||
font-family: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 430;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
|
||||
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
|
||||
::-webkit-scrollbar { width: 11px; height: 11px; }
|
||||
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .08); }
|
||||
::-webkit-scrollbar-thumb { min-height: 38px; border: 3px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--content-muted) 54%, transparent); background-clip: padding-box; }
|
||||
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--content-secondary) 68%, transparent); background-clip: padding-box; }
|
||||
|
||||
.scene-image {
|
||||
position: absolute;
|
||||
z-index: -4;
|
||||
inset: 25% 0 0;
|
||||
background-image: linear-gradient(180deg, transparent 0%, var(--surface-depth) 100%), url('./assets/hololake-night-lake.png');
|
||||
background-size: cover;
|
||||
background-position: center 42%;
|
||||
opacity: var(--primitive-scene-opacity);
|
||||
mix-blend-mode: screen;
|
||||
transition: opacity 450ms ease;
|
||||
.app-shell {
|
||||
width: 100%; height: 100%;
|
||||
display: grid; grid-template-columns: 226px minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 82% -12%, var(--primitive-nebula-a), transparent 31%),
|
||||
linear-gradient(145deg, var(--surface-horizon), var(--surface-depth) 76%);
|
||||
}
|
||||
|
||||
.nebula { position: absolute; z-index: -3; border-radius: 50%; filter: blur(42px); pointer-events: none; }
|
||||
.nebula-one { width: 58vw; height: 38vw; left: -12vw; top: -18vw; background: radial-gradient(circle, var(--primitive-nebula-a), transparent 68%); }
|
||||
.nebula-two { width: 48vw; height: 32vw; right: -12vw; top: 4vh; background: radial-gradient(circle, var(--primitive-nebula-b), transparent 70%); }
|
||||
.mist { position: absolute; z-index: -2; left: 0; right: 0; top: 38%; height: 36%; background: radial-gradient(ellipse at 50% 52%, var(--primitive-mist-a), var(--primitive-mist-b) 45%, transparent 72%); filter: blur(24px); pointer-events: none; }
|
||||
|
||||
.stars i, .glimmers i { position: absolute; display: block; border-radius: 50%; pointer-events: none; }
|
||||
.stars i { width: calc(1px + (var(--star-index) % 3) * 1px); height: calc(1px + (var(--star-index) % 3) * 1px); left: calc(4% + (var(--star-index) * 5.2%)); top: calc(5% + (var(--star-index) % 5) * 5.4%); background: var(--accent-light); opacity: calc(.16 + (var(--star-index) % 4) * .09); box-shadow: 0 0 8px var(--primitive-warm-glow); animation: breathe calc(4s + (var(--star-index) % 5) * .7s) ease-in-out infinite; }
|
||||
.glimmers i { width: calc(2px + (var(--glimmer-index) % 3) * 2px); height: 2px; left: calc(9% + (var(--glimmer-index) * 8.1%)); top: calc(52% + (var(--glimmer-index) % 4) * 6.4%); background: var(--accent-light); box-shadow: 0 0 12px var(--primitive-cool-glow); opacity: .18; animation: glimmer calc(5s + (var(--glimmer-index) % 4) * 1.2s) ease-in-out infinite; }
|
||||
@keyframes breathe { 50% { opacity: .75; transform: scale(1.5); } }
|
||||
@keyframes glimmer { 50% { opacity: .7; transform: translateX(16px) scaleX(2.4); } }
|
||||
|
||||
.world-header { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(28px, 5vw, 70px); }
|
||||
.world-mark { display: flex; align-items: baseline; gap: 17px; }
|
||||
.world-name { font-size: 21px; font-weight: 610; letter-spacing: .18em; }
|
||||
.world-route { color: var(--content-muted); font-size: 12px; letter-spacing: .16em; }
|
||||
.icon-button, .panel-close { border: 0; color: var(--content-muted); background: transparent; display: grid; place-items: center; cursor: pointer; border-radius: 50%; transition: color 180ms ease, background 180ms ease; }
|
||||
.icon-button { width: 42px; height: 42px; }
|
||||
.icon-button:hover, .panel-close:hover { color: var(--accent-light); background: var(--primitive-glass-hover); }
|
||||
.icon-button svg, .panel-close svg, .hero-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
|
||||
|
||||
.home-content { min-height: calc(100vh - 156px); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(285px, .45fr); align-items: center; gap: clamp(48px, 7vw, 112px); padding: 0 clamp(54px, 8vw, 126px) 28px; }
|
||||
.hero { max-width: 680px; transform: translateY(-2vh); }
|
||||
.route-kicker, .panel-kicker { margin: 0 0 21px; color: var(--accent-light); font-size: 11px; font-weight: 630; letter-spacing: .22em; }
|
||||
.hero h1 { margin: 0; max-width: 700px; color: var(--content-primary); font-size: clamp(40px, 4.15vw, 58px); font-weight: 430; line-height: 1.22; letter-spacing: -.035em; text-wrap: balance; }
|
||||
.hero-copy { max-width: 540px; margin: 27px 0 0; color: var(--content-muted); font-size: 14px; line-height: 1.9; letter-spacing: .035em; }
|
||||
.hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 37px; }
|
||||
.primary-action, .secondary-action { min-height: 46px; border-radius: 999px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
|
||||
.primary-action:disabled, .secondary-action:disabled, .repository-picker:disabled, .text-action:disabled { opacity: .55; cursor: wait; transform: none; }
|
||||
.primary-action { border: 0; color: var(--button-primary-text); background: var(--button-primary-bg); box-shadow: var(--button-primary-shadow); font-weight: 620; white-space: nowrap; }
|
||||
.secondary-action { color: var(--button-secondary-text); border: 1px solid var(--button-secondary-edge); background: var(--button-secondary-bg); backdrop-filter: blur(18px); }
|
||||
.primary-action:hover, .secondary-action:hover { transform: translateY(-2px); }
|
||||
.secondary-action:hover { background: var(--primitive-glass-hover); }
|
||||
|
||||
.status-cluster { display: grid; gap: 30px; width: min(100%, 330px); justify-self: end; }
|
||||
.status-item { display: grid; grid-template-columns: 10px 1fr; align-items: start; gap: 15px; padding: 5px 0; }
|
||||
.status-button { width: 100%; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
|
||||
.status-button:hover h2 { color: var(--accent-light); }
|
||||
.status-item h2 { margin: 0 0 8px; color: var(--content-secondary); font-size: 13px; font-weight: 590; letter-spacing: .06em; }
|
||||
.status-item p { margin: 0; color: var(--content-muted); opacity: .72; font-size: 11.5px; line-height: 1.5; letter-spacing: .04em; }
|
||||
.status-light { width: 6px; height: 6px; margin-top: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--state-quiet); box-shadow: 0 0 14px currentColor; }
|
||||
.status-light.ready { color: var(--state-ready); background: currentColor; }
|
||||
.status-light.waiting { color: var(--state-waiting); background: currentColor; }
|
||||
.status-light.quiet { color: var(--state-quiet); background: currentColor; }
|
||||
|
||||
.world-footer { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(28px, 5vw, 70px); color: var(--content-faint); font-size: 10.5px; letter-spacing: .09em; }
|
||||
.world-footer p { margin: 0; display: flex; align-items: center; gap: 13px; }
|
||||
.world-footer b { color: var(--accent-light); font-size: 11.5px; letter-spacing: .14em; }
|
||||
.trust-note i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-light); opacity: .65; }
|
||||
|
||||
.panel-backdrop { position: fixed; z-index: 20; inset: 0; display: flex; align-items: stretch; justify-content: flex-end; background: rgba(2, 4, 9, .28); backdrop-filter: blur(5px); }
|
||||
.detail-panel { position: relative; width: min(500px, 92vw); height: 100%; overflow-y: auto; padding: 80px 54px 50px; color: var(--content-primary); background: var(--panel-bg); box-shadow: -26px 0 80px var(--primitive-shadow); backdrop-filter: blur(38px) saturate(115%); animation: panel-in 240ms ease-out; }
|
||||
@keyframes panel-in { from { transform: translateX(24px); opacity: 0; } }
|
||||
.panel-close { position: absolute; right: 34px; top: 30px; width: 38px; height: 38px; }
|
||||
.detail-panel h2 { margin: 0; max-width: 380px; font-size: 31px; font-weight: 480; line-height: 1.28; letter-spacing: -.025em; }
|
||||
.panel-intro { margin: 19px 0 30px; color: var(--content-muted); font-size: 13px; line-height: 1.85; }
|
||||
.connection-summary { display: flex; align-items: flex-start; gap: 15px; margin: 32px 0; padding: 20px 22px; border-radius: 20px; background: var(--primitive-glass); box-shadow: inset 0 1px var(--primitive-glass-top); }
|
||||
.connection-summary div { display: grid; gap: 6px; }
|
||||
.connection-summary b { color: var(--content-secondary); font-size: 13px; }
|
||||
.connection-summary span { color: var(--content-faint); font-size: 11.5px; }
|
||||
.session-guidance { display: grid; gap: 8px; margin: 0 0 20px; padding: 18px 20px; border: 1px solid var(--primitive-line); border-radius: 18px; background: rgba(255, 255, 255, .035); }
|
||||
.session-guidance b { color: var(--content-secondary); font-size: 13px; }
|
||||
.session-guidance span { color: var(--content-muted); font-size: 12px; line-height: 1.7; }
|
||||
.panel-action { min-height: 46px; }
|
||||
.panel-message { color: var(--content-muted); font-size: 11.5px; line-height: 1.6; }
|
||||
.invitation-preview { max-height: 180px; overflow: auto; margin: 18px 0; padding: 17px; border-radius: 16px; color: var(--content-faint); background: rgba(0, 0, 0, .13); font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
|
||||
.boundary-note { margin-top: 34px; color: var(--content-faint); font-size: 10.5px; line-height: 1.75; }
|
||||
|
||||
.receipt-list { list-style: none; display: grid; gap: 14px; margin: 30px 0 0; padding: 0; }
|
||||
.receipt-list li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: 17px; background: var(--primitive-glass); }
|
||||
.receipt-list li > span { color: var(--accent-light); font: 11px ui-monospace, monospace; }
|
||||
.receipt-list li div { display: grid; gap: 7px; }
|
||||
.receipt-list b { color: var(--content-secondary); font-size: 12px; font-weight: 580; }
|
||||
.receipt-list small { color: var(--content-faint); font-size: 10px; }
|
||||
.empty-state { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
|
||||
.empty-state i { width: 7px; height: 7px; margin-bottom: 20px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 32px 12px var(--primitive-warm-glow); }
|
||||
.empty-state b { color: var(--content-secondary); font-size: 13px; font-weight: 570; }
|
||||
.empty-state span { max-width: 260px; margin-top: 10px; color: var(--content-faint); font-size: 11px; line-height: 1.7; }
|
||||
.empty-state.compact { min-height: 170px; }
|
||||
|
||||
.repository-picker { width: 100%; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 19px; border: 0; border-radius: 19px; color: var(--content-secondary); background: var(--primitive-glass); box-shadow: inset 0 1px var(--primitive-glass-top); text-align: left; cursor: pointer; }
|
||||
.repository-picker:hover { background: var(--primitive-glass-hover); }
|
||||
.repository-picker span { display: grid; gap: 6px; }
|
||||
.repository-picker b { font-size: 12.5px; font-weight: 590; }
|
||||
.repository-picker small { color: var(--content-faint); font-size: 10px; }
|
||||
.repository-picker svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.candidate-card { margin-top: 26px; padding: 21px; border-radius: 21px; background: var(--primitive-glass); box-shadow: inset 0 1px var(--primitive-glass-top); }
|
||||
.candidate-heading { display: flex; align-items: flex-start; gap: 14px; }
|
||||
.candidate-heading div { display: grid; gap: 5px; }
|
||||
.candidate-heading b { color: var(--content-secondary); font-size: 12.5px; }
|
||||
.candidate-heading span { color: var(--content-faint); font-size: 10.5px; }
|
||||
.candidate-facts { display: grid; gap: 10px; margin: 20px 0; }
|
||||
.candidate-facts div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
|
||||
.candidate-facts dt { color: var(--content-faint); font-size: 10px; }
|
||||
.candidate-facts dd { margin: 0; overflow: hidden; color: var(--content-secondary); font: 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.candidate-card > p { color: var(--content-faint); font-size: 10.5px; line-height: 1.7; }
|
||||
.candidate-actions { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
|
||||
.candidate-actions .primary-action { min-height: 42px; padding-inline: 18px; font-size: 12px; }
|
||||
.text-action { border: 0; color: var(--content-muted); background: transparent; font-size: 11px; cursor: pointer; }
|
||||
.update-state-card { display: flex; align-items: flex-start; gap: 15px; margin: 30px 0; padding: 20px 22px; border-radius: 20px; background: var(--primitive-glass); box-shadow: inset 0 1px var(--primitive-glass-top); }
|
||||
.update-state-card div { display: grid; gap: 6px; }
|
||||
.update-state-card b { color: var(--content-secondary); font-size: 12.5px; }
|
||||
.update-state-card span { color: var(--content-faint); font-size: 10.5px; line-height: 1.6; }
|
||||
.release-card { margin-top: 27px; }
|
||||
.release-version { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 16px; }
|
||||
.release-version span { color: var(--content-faint); font-size: 10px; letter-spacing: .12em; }
|
||||
.release-version b { grid-row: 1 / 3; grid-column: 2; color: var(--accent-light); font-size: 30px; font-weight: 480; }
|
||||
.release-version small { color: var(--content-muted); font-size: 11px; }
|
||||
.release-card > p { color: var(--content-muted); font-size: 11.5px; line-height: 1.7; }
|
||||
.release-card ul { margin: 18px 0; padding-left: 18px; color: var(--content-secondary); font-size: 11px; line-height: 1.8; }
|
||||
.release-card .release-warning { color: var(--content-faint); font-size: 10px; }
|
||||
.recovery-card { display: grid; gap: 17px; margin-top: 27px; padding: 21px; border: 1px solid var(--primitive-line); border-radius: 21px; background: var(--primitive-glass); box-shadow: inset 0 1px var(--primitive-glass-top); }
|
||||
.recovery-card > p { margin: 0; color: var(--content-muted); font-size: 11.5px; line-height: 1.7; }
|
||||
.recovery-actions { display: flex; flex-wrap: wrap; gap: 11px; }
|
||||
|
||||
.theme-list { display: grid; gap: 9px; margin-top: 30px; }
|
||||
.theme-list button { width: 100%; min-height: 66px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px; border: 0; border-radius: 17px; color: var(--content-secondary); background: transparent; text-align: left; cursor: pointer; }
|
||||
.theme-list button:hover, .theme-list button.selected { background: var(--primitive-glass-hover); }
|
||||
.theme-list span { display: grid; gap: 5px; }
|
||||
.theme-list b { font-size: 12.5px; font-weight: 590; white-space: nowrap; }
|
||||
.theme-list small, .theme-list em { color: var(--content-faint); font-size: 10px; font-style: normal; }
|
||||
.theme-list button.selected em { color: var(--accent-light); }
|
||||
.theme-swatch { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 18px var(--primitive-shadow); }
|
||||
.theme-swatch.night { background: linear-gradient(145deg, #0a1020, #04070d 70%); }
|
||||
.theme-swatch.dawn { background: linear-gradient(145deg, #f5f7fc, #d3e0ef 70%); }
|
||||
.theme-swatch.nebula { background: linear-gradient(145deg, #281b47, #080510 70%); }
|
||||
.theme-swatch.candle { background: linear-gradient(145deg, #4a2d13, #0a0703 70%); }
|
||||
.theme-swatch.clear { background: linear-gradient(145deg, #f1f5f8, #b9ccda 70%); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.home-content { grid-template-columns: 1fr; align-content: center; gap: 50px; padding-inline: 62px; }
|
||||
.hero { transform: none; }
|
||||
.status-cluster { width: 100%; grid-template-columns: repeat(3, 1fr); justify-self: stretch; gap: 26px; }
|
||||
.sidebar {
|
||||
min-height: 0; display: flex; flex-direction: column;
|
||||
padding: 28px 16px 20px;
|
||||
border-right: 1px solid var(--panel-edge);
|
||||
background: color-mix(in srgb, var(--surface-depth) 92%, transparent);
|
||||
}
|
||||
|
||||
@media (max-height: 640px) {
|
||||
.world-header, .world-footer { height: 62px; }
|
||||
.home-content { min-height: calc(100vh - 124px); }
|
||||
.hero h1 { font-size: clamp(36px, 5vw, 56px); }
|
||||
.hero-copy { margin-top: 18px; }
|
||||
.hero-actions { margin-top: 25px; }
|
||||
.brand { display: flex; align-items: center; gap: 13px; min-height: 46px; padding: 0 10px; }
|
||||
.brand-mark {
|
||||
width: 40px; height: 40px; display: grid; place-items: center;
|
||||
border: 1px solid color-mix(in srgb, var(--accent-light) 34%, transparent);
|
||||
border-radius: 13px; color: var(--accent-light); background: color-mix(in srgb, var(--accent-light) 7%, transparent);
|
||||
font-family: "Songti SC", serif; font-size: 19px;
|
||||
}
|
||||
.brand b { display: block; color: var(--content-primary); font-size: 18px; font-weight: 650; letter-spacing: .01em; }
|
||||
.brand small { display: block; margin-top: 4px; color: var(--content-muted); font-size: 11px; font-weight: 520; letter-spacing: .22em; }
|
||||
.sidebar nav { display: grid; gap: 7px; margin-top: 54px; }
|
||||
.sidebar nav button {
|
||||
min-height: 50px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 13px;
|
||||
padding: 0 14px; border: 1px solid transparent; border-radius: 12px;
|
||||
color: var(--content-muted); background: transparent; text-align: left; cursor: pointer;
|
||||
}
|
||||
.sidebar nav button span { font-size: 15px; font-weight: 520; }
|
||||
.sidebar nav button em { min-width: 28px; padding: 3px 7px; border-radius: 8px; background: var(--primitive-glass); font-size: 12px; font-style: normal; text-align: center; }
|
||||
.sidebar nav button:hover { color: var(--content-secondary); background: var(--primitive-glass); }
|
||||
.sidebar nav button.active { border-color: var(--panel-edge); color: var(--content-primary); background: var(--primitive-glass-hover); }
|
||||
.sidebar-foot {
|
||||
min-width: 0; display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 12px;
|
||||
margin-top: auto; padding: 18px 11px 0; border-top: 1px solid var(--panel-edge);
|
||||
}
|
||||
.identity-dot, .connection-strip i, .evidence-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--state-ready); box-shadow: 0 0 16px color-mix(in srgb, var(--state-ready) 48%, transparent); }
|
||||
.sidebar-foot b { display: block; overflow: hidden; color: var(--content-secondary); font-size: 14px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.sidebar-foot small { display: block; margin-top: 3px; color: var(--content-muted); font-size: 12px; }
|
||||
|
||||
.app-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: 45px minmax(0, 1fr); }
|
||||
.connection-strip {
|
||||
position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
padding: 0 22px; border-bottom: 1px solid var(--panel-edge);
|
||||
background: color-mix(in srgb, var(--surface-depth) 87%, transparent);
|
||||
}
|
||||
.connection-strip button { display: inline-flex; align-items: center; gap: 8px; border: 0; color: var(--content-muted); background: transparent; font-size: 13px; font-weight: 520; cursor: pointer; }
|
||||
.connection-strip button:last-child { position: absolute; right: 22px; }
|
||||
.connection-strip button:last-child svg { width: 16px; height: 16px; }
|
||||
.connection-strip i { background: var(--content-faint); box-shadow: none; }
|
||||
.connection-strip i.online { background: var(--state-ready); box-shadow: 0 0 12px color-mix(in srgb, var(--state-ready) 52%, transparent); }
|
||||
.mcp-backup { padding: 4px 8px; border: 1px solid var(--panel-edge); border-radius: 7px; color: var(--content-muted); font-size: 11px; font-weight: 560; }
|
||||
.workspace { min-width: 0; min-height: 0; overflow: hidden; }
|
||||
.content-page { height: 100%; overflow: auto; padding: 48px clamp(28px, 4vw, 64px) 64px; }
|
||||
.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
|
||||
.page-title h1 { margin: 8px 0 0; color: var(--content-primary); font-size: clamp(34px, 4vw, 48px); font-weight: 620; letter-spacing: -.035em; line-height: 1.08; }
|
||||
.page-title p { margin: 10px 0 0; color: var(--content-muted); font-size: 15px; }
|
||||
.kicker { color: var(--accent-light); font-size: 11px; font-weight: 720; letter-spacing: .22em; }
|
||||
.evidence-pill {
|
||||
display: inline-flex; align-items: center; gap: 9px; min-height: 39px; padding: 0 14px;
|
||||
border: 1px solid var(--panel-edge); border-radius: 999px; color: var(--content-secondary); background: var(--primitive-glass); font-size: 13px; cursor: pointer;
|
||||
}
|
||||
.evidence-pill i { background: var(--content-faint); box-shadow: none; }
|
||||
.evidence-pill i.online { background: var(--state-ready); }
|
||||
.plain-panel, .metric-panel {
|
||||
border: 1px solid var(--panel-edge); border-radius: 16px;
|
||||
background: color-mix(in srgb, var(--panel-bg) 91%, transparent);
|
||||
box-shadow: 0 18px 42px color-mix(in srgb, var(--primitive-shadow) 34%, transparent);
|
||||
}
|
||||
.primary-button, .secondary-button, .toolbar-button {
|
||||
min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
padding: 0 17px; border-radius: 10px; font-size: 14px; font-weight: 650; cursor: pointer;
|
||||
}
|
||||
.primary-button, .toolbar-button.primary { border: 1px solid transparent; color: var(--button-primary-text); background: var(--button-primary-bg); box-shadow: var(--button-primary-shadow); }
|
||||
.secondary-button, .toolbar-button { border: 1px solid var(--button-secondary-edge); color: var(--button-secondary-text); background: var(--button-secondary-bg); }
|
||||
.primary-button:disabled, .secondary-button:disabled { opacity: .45; cursor: default; }
|
||||
|
||||
.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
|
||||
.metric-panel { min-height: 155px; display: flex; flex-direction: column; align-items: flex-start; padding: 25px; color: inherit; text-align: left; cursor: pointer; }
|
||||
.metric-panel:hover { border-color: color-mix(in srgb, var(--accent-light) 35%, var(--panel-edge)); background: var(--primitive-glass-hover); }
|
||||
.metric-panel span { color: var(--content-muted); font-size: 14px; font-weight: 590; }
|
||||
.metric-panel strong { margin-top: 10px; color: var(--content-primary); font-size: 38px; font-weight: 570; }
|
||||
.metric-panel small { margin-top: auto; color: var(--content-muted); font-size: 13px; }
|
||||
.overview-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); gap: 18px; margin-top: 18px; }
|
||||
.plain-panel { padding: 24px; }
|
||||
.plain-panel > header, .recent-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
|
||||
.plain-panel h2 { margin: 0; color: var(--content-primary); font-size: 18px; font-weight: 650; }
|
||||
.plain-panel header p { margin: 6px 0 0; color: var(--content-muted); font-size: 13px; }
|
||||
.recent-panel > header > button { border: 0; color: var(--content-muted); background: transparent; font-size: 13px; cursor: pointer; }
|
||||
.recent-row {
|
||||
width: 100%; min-height: 58px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px;
|
||||
padding: 9px 6px; border: 0; border-bottom: 1px solid var(--panel-edge); color: inherit; background: transparent; text-align: left; cursor: pointer;
|
||||
}
|
||||
.recent-row:hover { background: var(--primitive-glass); }
|
||||
.recent-row svg { color: var(--accent-light); }
|
||||
.recent-row span { min-width: 0; }
|
||||
.recent-row b, .recent-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.recent-row b { color: var(--content-secondary); font-size: 14.5px; font-weight: 590; }
|
||||
.recent-row small, .recent-row time { margin-top: 4px; color: var(--content-muted); font-size: 12px; }
|
||||
.system-proof dl, .evidence-list { display: grid; gap: 0; margin: 20px 0; }
|
||||
.system-proof dl div, .evidence-list div, .document-inspector dl div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--panel-edge); }
|
||||
.system-proof dt, .evidence-list dt, .document-inspector dt { color: var(--content-muted); }
|
||||
.system-proof dd, .evidence-list dd, .document-inspector dd { margin: 0; color: var(--content-secondary); font-weight: 580; text-align: right; }
|
||||
|
||||
.full-workbench { height: 100%; min-width: 0; min-height: 0; display: grid; background: color-mix(in srgb, var(--surface-depth) 70%, transparent); }
|
||||
.knowledge-page { grid-template-columns: 310px minmax(430px, 1fr) 278px; }
|
||||
.knowledge-browser, .document-inspector, .code-channels, .repository-tree {
|
||||
min-width: 0; min-height: 0; display: flex; flex-direction: column;
|
||||
border-right: 1px solid var(--panel-edge);
|
||||
background: color-mix(in srgb, var(--surface-depth) 82%, transparent);
|
||||
}
|
||||
.knowledge-browser > header, .code-channels > header {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 18px 14px;
|
||||
}
|
||||
.knowledge-browser h1, .code-channels h1 { margin: 5px 0 0; color: var(--content-primary); font-size: 23px; font-weight: 650; letter-spacing: -.02em; }
|
||||
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--panel-edge); border-radius: 9px; color: var(--content-muted); background: var(--primitive-glass); cursor: pointer; }
|
||||
.icon-button:disabled { opacity: .3; cursor: default; }
|
||||
.search-box { min-height: 42px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 0 14px; padding: 0 12px; border: 1px solid var(--panel-edge); border-radius: 10px; background: color-mix(in srgb, var(--surface-depth) 62%, transparent); }
|
||||
.search-box svg { color: var(--content-muted); }
|
||||
.search-box input { min-width: 0; border: 0; outline: 0; color: var(--content-secondary); background: transparent; font-size: 14px; }
|
||||
.search-box button { border: 0; color: var(--content-muted); background: transparent; font-size: 12px; cursor: pointer; }
|
||||
.knowledge-counts { display: flex; justify-content: space-between; gap: 8px; padding: 13px 16px 10px; color: var(--content-muted); font-size: 11.5px; font-weight: 540; }
|
||||
.knowledge-tree { min-height: 0; overflow: auto; padding: 2px 8px 18px; }
|
||||
.tree-folder, .tree-document {
|
||||
width: 100%; min-height: 38px; display: grid; align-items: center; gap: 7px;
|
||||
border: 0; border-radius: 8px; color: var(--content-muted); background: transparent; text-align: left; cursor: pointer;
|
||||
}
|
||||
.tree-folder { grid-template-columns: 14px 18px minmax(0, 1fr) auto; font-size: 14px; font-weight: 580; }
|
||||
.tree-document { grid-template-columns: 18px minmax(0, 1fr) auto; font-size: 13.5px; font-weight: 480; }
|
||||
.tree-folder > svg, .tree-document > svg { width: 17px; height: 17px; color: var(--accent-light); }
|
||||
.tree-folder span, .tree-document span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.tree-folder em, .tree-document em { padding-right: 8px; color: var(--content-muted); font-size: 11px; font-style: normal; }
|
||||
.tree-folder:hover, .tree-document:hover, .tree-document.active { color: var(--content-primary); background: var(--primitive-glass-hover); }
|
||||
.tree-document.active { box-shadow: inset 2px 0 var(--accent-light); }
|
||||
.tree-chevron { display: grid; place-items: center; transition: transform .14s ease; }
|
||||
.tree-chevron svg { width: 14px; height: 14px; }
|
||||
.tree-chevron.open { transform: rotate(90deg); }
|
||||
.knowledge-browser > footer, .code-channels > footer { min-height: 44px; padding: 12px 16px; border-top: 1px solid var(--panel-edge); color: var(--content-muted); font-size: 12px; line-height: 1.5; }
|
||||
.document-workspace, .code-reader { min-width: 0; min-height: 0; display: grid; grid-template-rows: 49px minmax(0, 1fr); }
|
||||
.document-toolbar, .code-reader > header {
|
||||
min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px;
|
||||
padding: 0 20px; border-bottom: 1px solid var(--panel-edge); background: color-mix(in srgb, var(--surface-depth) 66%, transparent);
|
||||
}
|
||||
.breadcrumbs { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--content-muted); font-size: 12px; }
|
||||
.breadcrumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.document-toolbar > div:last-child { display: flex; gap: 8px; }
|
||||
.toolbar-button { min-height: 33px; padding: 0 12px; font-size: 12.5px; }
|
||||
.toolbar-button svg { width: 16px; height: 16px; }
|
||||
.document-scroll, .code-reader-scroll { min-width: 0; min-height: 0; overflow: auto; scroll-behavior: smooth; }
|
||||
.reader-heading { max-width: 870px; margin: 0 auto; padding: 48px 54px 13px; }
|
||||
.reader-heading h1 { margin: 0; color: var(--content-primary); font-size: clamp(32px, 3vw, 42px); font-weight: 680; letter-spacing: -.035em; line-height: 1.18; }
|
||||
.reader-heading div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
|
||||
.reader-heading span { padding: 5px 8px; border-radius: 6px; color: var(--content-muted); background: var(--primitive-glass); font-size: 12px; }
|
||||
.markdown-document { max-width: 870px; margin: 0 auto; padding: 20px 54px 100px; color: var(--content-secondary); font-size: 17px; font-weight: 430; line-height: 1.78; overflow-wrap: anywhere; }
|
||||
.markdown-document h1, .markdown-document h2, .markdown-document h3, .markdown-document h4 { color: var(--content-primary); font-weight: 680; line-height: 1.34; letter-spacing: -.02em; }
|
||||
.markdown-document h1 { margin: 48px 0 20px; font-size: 34px; }
|
||||
.markdown-document h2 { margin: 42px 0 17px; font-size: 27px; }
|
||||
.markdown-document h3 { margin: 34px 0 14px; font-size: 22px; }
|
||||
.markdown-document h4 { margin: 28px 0 12px; font-size: 18px; }
|
||||
.markdown-document p { margin: 0 0 20px; }
|
||||
.markdown-document ul, .markdown-document ol { margin: 0 0 22px; padding-left: 27px; }
|
||||
.markdown-document li { margin: 6px 0; }
|
||||
.markdown-document a { color: color-mix(in srgb, var(--accent-light) 78%, var(--content-primary)); text-decoration-thickness: 1px; text-underline-offset: 3px; }
|
||||
.markdown-document blockquote { margin: 25px 0; padding: 14px 19px; border-left: 3px solid var(--accent-light); color: var(--content-muted); background: var(--primitive-glass); }
|
||||
.markdown-document pre, .source-code { overflow: auto; padding: 19px; border: 1px solid var(--panel-edge); border-radius: 10px; color: var(--content-secondary); background: rgba(0, 0, 0, .25); font: 13.5px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
|
||||
.markdown-document code:not(pre code) { padding: 2px 5px; border-radius: 5px; background: var(--primitive-glass-hover); font: .88em ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
.markdown-document table { width: 100%; display: table; margin: 25px 0; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
|
||||
.markdown-document th, .markdown-document td { padding: 10px 12px; border: 1px solid var(--panel-edge); text-align: left; vertical-align: top; }
|
||||
.markdown-document th { color: var(--content-primary); background: var(--primitive-glass-hover); font-weight: 650; }
|
||||
.markdown-document img { max-width: 100%; border-radius: 10px; }
|
||||
.markdown-document input[type='checkbox'] { width: 16px; height: 16px; margin: 0 7px 0 0; accent-color: var(--accent-light); }
|
||||
.wiki-link { display: inline-flex; padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--accent-light) 28%, transparent); border-radius: 6px; color: var(--accent-light); background: color-mix(in srgb, var(--accent-light) 7%, transparent); font-size: .94em; cursor: pointer; }
|
||||
.document-editor { width: calc(100% - 70px); max-width: 930px; height: calc(100% - 58px); display: block; margin: 28px auto; padding: 28px; resize: none; border: 1px solid var(--panel-edge); border-radius: 12px; outline: 0; color: var(--content-secondary); background: color-mix(in srgb, var(--surface-depth) 58%, transparent); font: 15px/1.72 ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
.document-inspector { border-right: 0; border-left: 1px solid var(--panel-edge); }
|
||||
.inspector-tabs { height: 49px; display: flex; align-items: center; gap: 18px; padding: 0 17px; border-bottom: 1px solid var(--panel-edge); color: var(--content-muted); font-size: 12.5px; }
|
||||
.inspector-tabs span { height: 49px; display: flex; align-items: center; }
|
||||
.inspector-tabs .active { border-bottom: 2px solid var(--accent-light); color: var(--content-primary); }
|
||||
.inspector-scroll { min-height: 0; overflow: auto; padding: 4px 18px 34px; }
|
||||
.inspector-scroll section { padding: 20px 0; border-bottom: 1px solid var(--panel-edge); }
|
||||
.inspector-scroll h2 { margin: 0 0 14px; color: var(--content-primary); font-size: 14px; font-weight: 650; }
|
||||
.inspector-scroll p, .inspector-scroll dt, .inspector-scroll dd { font-size: 12.5px; line-height: 1.55; }
|
||||
.inspector-scroll dl { margin: 0; }
|
||||
.inspector-scroll dl div { display: block; }
|
||||
.inspector-scroll dd { margin-top: 4px; text-align: left; overflow-wrap: anywhere; }
|
||||
.inspector-scroll code { display: block; overflow-wrap: anywhere; color: var(--content-muted); font-size: 11px; }
|
||||
.outline-list { display: grid; gap: 10px; }
|
||||
.outline-list span { overflow: hidden; color: var(--content-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.workbench-empty, .empty-state { display: grid; place-content: center; justify-items: center; color: var(--content-muted); text-align: center; }
|
||||
.workbench-empty { min-height: 0; padding: 40px; }
|
||||
.workbench-empty > span { color: var(--accent-light); font-family: "Songti SC", serif; font-size: 36px; }
|
||||
.workbench-empty h2 { margin: 18px 0 7px; color: var(--content-primary); font-size: 22px; }
|
||||
.workbench-empty p { max-width: 500px; margin: 0 0 22px; font-size: 14px; line-height: 1.6; }
|
||||
.empty-state { min-height: 160px; padding: 24px; font-size: 13px; }
|
||||
|
||||
.code-workbench { grid-template-columns: 280px 290px minmax(0, 1fr); }
|
||||
.clone-form { padding: 9px 14px 13px; }
|
||||
.clone-form label { display: block; margin-bottom: 8px; color: var(--content-muted); font-size: 12px; }
|
||||
.clone-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
|
||||
.clone-form input { min-width: 0; height: 39px; padding: 0 10px; border: 1px solid var(--panel-edge); border-radius: 9px 0 0 9px; outline: 0; color: var(--content-secondary); background: rgba(0, 0, 0, .12); font-size: 12px; }
|
||||
.clone-form button { border: 0; border-radius: 0 9px 9px 0; color: var(--button-primary-text); background: var(--button-primary-bg); font-size: 12px; font-weight: 650; }
|
||||
.local-folder-button { min-height: 39px; display: flex; align-items: center; gap: 9px; margin: 0 14px 12px; padding: 0 12px; border: 1px solid var(--panel-edge); border-radius: 9px; color: var(--content-secondary); background: var(--primitive-glass); font-size: 13px; cursor: pointer; }
|
||||
.channel-selector { min-height: 0; display: grid; align-content: start; gap: 5px; overflow: auto; padding: 2px 8px 16px; }
|
||||
.channel-selector button { min-height: 58px; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 11px; border: 0; border-radius: 9px; color: var(--content-muted); background: transparent; text-align: left; cursor: pointer; }
|
||||
.channel-selector button:hover, .channel-selector button.active { color: var(--content-primary); background: var(--primitive-glass-hover); }
|
||||
.channel-selector span, .channel-selector b, .channel-selector small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.channel-selector b { font-size: 13.5px; font-weight: 610; }
|
||||
.channel-selector small { margin-top: 4px; color: var(--content-muted); font-size: 11px; }
|
||||
.repository-tree > header { min-height: 59px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--panel-edge); }
|
||||
.repository-tree > header b, .repository-tree > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.repository-tree > header b { color: var(--content-primary); font-size: 13.5px; }
|
||||
.repository-tree > header small { margin-top: 4px; color: var(--content-muted); font-size: 11px; }
|
||||
.repository-entries { min-height: 0; overflow: auto; padding: 7px; }
|
||||
.repository-entries > button { width: 100%; min-height: 39px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 9px; border: 0; border-radius: 7px; color: var(--content-muted); background: transparent; text-align: left; cursor: pointer; }
|
||||
.repository-entries > button:hover { color: var(--content-primary); background: var(--primitive-glass-hover); }
|
||||
.repository-entries > button svg { width: 17px; height: 17px; color: var(--accent-light); }
|
||||
.repository-entries > button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
|
||||
.code-reader > header { min-height: 59px; }
|
||||
.code-reader > header > div:first-child { min-width: 0; }
|
||||
.code-reader > header span, .code-reader > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.code-reader > header span { color: var(--content-primary); font-size: 13.5px; font-weight: 590; }
|
||||
.code-reader > header small { margin-top: 3px; color: var(--content-muted); font-size: 11px; }
|
||||
.mode-switch { display: flex; padding: 3px; border: 1px solid var(--panel-edge); border-radius: 8px; }
|
||||
.mode-switch button { min-height: 29px; padding: 0 10px; border: 0; border-radius: 6px; color: var(--content-muted); background: transparent; font-size: 11.5px; cursor: pointer; }
|
||||
.mode-switch button.active { color: var(--content-primary); background: var(--primitive-glass-hover); }
|
||||
.source-code { min-height: calc(100% - 44px); margin: 22px; white-space: pre; }
|
||||
|
||||
.receipt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
|
||||
.receipt-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--panel-edge); }
|
||||
.receipt-row > span { color: var(--accent-light); font: 12px ui-monospace, monospace; }
|
||||
.receipt-row b, .receipt-row small { display: block; }
|
||||
.receipt-row b { color: var(--content-secondary); font-size: 14px; font-weight: 590; }
|
||||
.receipt-row small { margin-top: 6px; color: var(--content-muted); font-size: 12px; }
|
||||
.system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
|
||||
.connection-panel { grid-row: span 2; }
|
||||
.status-chip { padding: 6px 9px; border: 1px solid var(--panel-edge); border-radius: 999px; color: var(--content-muted); background: var(--primitive-glass); font-size: 12px; }
|
||||
.status-chip.online { color: var(--state-ready); }
|
||||
.invitation-data { max-height: 170px; overflow: auto; margin-top: 14px; padding: 13px; border: 1px solid var(--panel-edge); border-radius: 8px; color: var(--content-muted); background: rgba(0, 0, 0, .18); font: 11px/1.55 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
|
||||
.theme-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
|
||||
.theme-options button { min-height: 72px; display: grid; place-items: center; gap: 6px; padding: 7px 3px; border: 1px solid transparent; border-radius: 9px; color: var(--content-muted); background: transparent; font-size: 10px; cursor: pointer; }
|
||||
.theme-options button.active { border-color: var(--panel-edge); color: var(--content-primary); background: var(--primitive-glass-hover); }
|
||||
.theme-options i { width: 25px; height: 25px; border: 1px solid var(--panel-edge); border-radius: 50%; background: radial-gradient(circle at 65% 30%, var(--accent-light), var(--surface-horizon) 28%, var(--surface-depth) 70%); }
|
||||
.global-message { position: fixed; right: 24px; bottom: 20px; max-width: 420px; margin: 0; padding: 11px 15px; border: 1px solid var(--panel-edge); border-radius: 9px; color: var(--content-secondary); background: var(--panel-bg); box-shadow: 0 12px 32px var(--primitive-shadow); font-size: 13px; }
|
||||
|
||||
.onboarding-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 28px; background: color-mix(in srgb, var(--surface-depth) 86%, transparent); backdrop-filter: blur(18px); }
|
||||
.onboarding-card { width: min(460px, 100%); padding: 40px; border: 1px solid var(--panel-edge); border-radius: 20px; background: var(--panel-bg); box-shadow: 0 28px 90px var(--primitive-shadow); }
|
||||
.onboarding-mark { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 24px; border: 1px solid color-mix(in srgb, var(--accent-light) 38%, transparent); border-radius: 16px; color: var(--accent-light); font-family: "Songti SC", serif; font-size: 18px; }
|
||||
.onboarding-card h1 { margin: 9px 0 11px; color: var(--content-primary); font-size: 34px; font-weight: 650; }
|
||||
.onboarding-card p { color: var(--content-muted); font-size: 14px; line-height: 1.65; }
|
||||
.onboarding-card form { display: grid; gap: 10px; margin-top: 25px; }
|
||||
.onboarding-card label { color: var(--content-muted); font-size: 13px; }
|
||||
.onboarding-card input { height: 46px; padding: 0 13px; border: 1px solid var(--panel-edge); border-radius: 10px; outline: 0; color: var(--content-secondary); background: rgba(0, 0, 0, .13); font-size: 15px; }
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.app-shell { grid-template-columns: 190px minmax(0, 1fr); }
|
||||
.sidebar { padding-left: 10px; padding-right: 10px; }
|
||||
.knowledge-page { grid-template-columns: 270px minmax(400px, 1fr) 230px; }
|
||||
.code-workbench { grid-template-columns: 245px 245px minmax(0, 1fr); }
|
||||
.reader-heading, .markdown-document { padding-left: 38px; padding-right: 38px; }
|
||||
}
|
||||
@media (max-width: 880px) {
|
||||
.app-shell { grid-template-columns: 74px minmax(0, 1fr); }
|
||||
.brand > div, .sidebar nav button span, .sidebar nav button em, .sidebar-foot div { display: none; }
|
||||
.brand { justify-content: center; padding: 0; }
|
||||
.sidebar nav button { grid-template-columns: 1fr; justify-items: center; padding: 0; }
|
||||
.sidebar-foot { grid-template-columns: 1fr; justify-items: center; }
|
||||
.knowledge-page { grid-template-columns: 250px minmax(390px, 1fr); }
|
||||
.document-inspector { display: none; }
|
||||
.code-workbench { grid-template-columns: 220px 230px minmax(0, 1fr); }
|
||||
.overview-grid, .system-grid { grid-template-columns: 1fr; }
|
||||
.overview-columns { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
||||
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue