，没有 className、没有 CSS、没用 antd。浏览器默认样式在浅色下勉强能看， + * 混在 v2 界面里就是一块原生灰框（见「云端: 此来源暂不可用」那条全局挂载的提示）。随后有人在外层 + * 用 `.xxx button { … }` 元素选择器去补，又反过来盖掉 antd 的样式。两个问题的根都是： + * **写裸控件没有任何反馈**——tsc、eslint、深色门禁都不管它。 + * + * 两条规则： + * 1. workbench-host-ui（严格，无基线）：src/workbench/** 只能通过 src/workbench/ui 的 Host* 组件 + * 渲染按钮和表单控件；ui/ 目录本身是唯一允许写原生控件的地方。 + * 2. unstyled-native-control（棘轮）：其余 TSX 里不带 className 的原生 。 + * 存量冻结在 native-controls-baseline.json，只能变少；修掉后 `--update` 收紧。 + * + * 逃生舱：同一行或紧邻上一行写 `raw-ok: 原因`（例如自绘图标按钮、隐藏的文件选择 input）。 + * type="hidden" / type="file" 的 input 天然不可见，不计入。 + * + * 用法： + * node scripts/check-native-controls.mjs # 门禁 + * node scripts/check-native-controls.mjs --list # 列出全部（含基线内） + * node scripts/check-native-controls.mjs --update # 以当前实测重写基线 + */ +import { existsSync, readFileSync, readdirSync, writeFileSync } from 'node:fs'; +import { dirname, join, relative, sep } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const scriptDir = dirname(fileURLToPath(import.meta.url)); +const frontendRoot = join(scriptDir, '..'); +const srcRoot = join(frontendRoot, 'src'); +const repoRoot = join(frontendRoot, '..', '..'); +/* CE overlay 会整文件替换同名源文件，一起扫，免得派生出去才发现。 */ +const ceOverlayRoot = join(repoRoot, 'ce', 'overlay', 'src', 'frontend', 'src'); +const baselinePath = join(scriptDir, 'native-controls-baseline.json'); + +const args = process.argv.slice(2); +const UPDATE = args.includes('--update'); +const LIST = args.includes('--list'); + +const WORKBENCH = 'src/workbench/'; +const WORKBENCH_UI = 'src/workbench/ui/'; +const TAG = /<(button|input|select|textarea)\b/g; +const SKIP_DIRS = new Set(['node_modules', 'dist', 'assets', 'i18n']); + +function walk(dir, out = []) { + if (!existsSync(dir)) return out; + for (const entry of readdirSync(dir, { withFileTypes: true })) { + if (entry.isDirectory()) { if (!SKIP_DIRS.has(entry.name)) walk(join(dir, entry.name), out); } + else if (entry.name.endsWith('.tsx')) out.push(join(dir, entry.name)); + } + return out; +} + +/** Attributes of the opening tag that starts at `start`, skipping `{…}` expressions and strings. */ +function openingTag(text, start) { + let depth = 0, quote = ''; + for (let i = start + 1; i < text.length; i++) { + const c = text[i]; + if (quote) { if (c === quote && text[i - 1] !== '\\') quote = ''; continue; } + if (c === '"' || c === "'" || c === '`') { quote = c; continue; } + if (c === '{') depth++; + else if (c === '}') depth--; + else if (c === '>' && depth === 0) return text.slice(start, i + 1); + } + return text.slice(start); +} + +function waived(lines, lineIndex) { + const hasReason = (line) => /raw-ok:\s*\S/.test(line ?? ''); + return hasReason(lines[lineIndex]) || (lineIndex > 0 && hasReason(lines[lineIndex - 1])); +} + +const findings = []; +/** Blank out comments (keeping newlines) so prose that mentions is not a finding. */ +function stripComments(text) { + const blank = value => value.replace(/[^\n]/g, ' '); + return text.replace(/\/\*[\s\S]*?\*\//g, blank).replace(/(^|[^:'"`])\/\/[^\n]*/g, (m, lead) => lead + blank(m.slice(lead.length))); +} + +function scan(file, label) { + const raw = readFileSync(file, 'utf8'); + const lines = raw.split('\n'); + const text = stripComments(raw); + for (const match of text.matchAll(TAG)) { + const line = text.slice(0, match.index).split('\n').length - 1; + if (waived(lines, line)) continue; + const tag = openingTag(text, match.index); + if (/\btype=["'](hidden|file)["']/.test(tag)) continue; + const inWorkbench = label.startsWith(WORKBENCH) && !label.startsWith(WORKBENCH_UI); + if (inWorkbench) findings.push({ rule: 'workbench-host-ui', file: label, line: line + 1, snippet: tag }); + else if (!/\bclassName=/.test(tag)) findings.push({ rule: 'unstyled-native-control', file: label, line: line + 1, snippet: tag }); + } +} + +const toPosix = value => value.split(sep).join('/'); +for (const file of walk(srcRoot)) scan(file, toPosix(relative(frontendRoot, file))); +for (const file of walk(ceOverlayRoot)) scan(file, 'ce-overlay/' + toPosix(relative(ceOverlayRoot, file))); + +const strict = findings.filter(f => f.rule === 'workbench-host-ui'); +const ratchet = findings.filter(f => f.rule === 'unstyled-native-control'); +const counts = {}; +for (const f of ratchet) counts[f.file] = (counts[f.file] || 0) + 1; + +const show = f => ` ${f.file}:${f.line} [${f.rule}] ${f.snippet.replace(/\s+/g, ' ').slice(0, 120)}`; + +if (UPDATE) { + const sorted = Object.fromEntries(Object.entries(counts).sort(([a], [b]) => a.localeCompare(b))); + writeFileSync(baselinePath, JSON.stringify(sorted, null, 2) + '\n'); + console.log(`native-controls 基线已更新：${ratchet.length} 处 / ${Object.keys(sorted).length} 个文件`); + if (strict.length) { console.error(strict.map(show).join('\n')); process.exit(1); } + process.exit(0); +} + +const baseline = existsSync(baselinePath) ? JSON.parse(readFileSync(baselinePath, 'utf8')) : {}; +const regressions = Object.entries(counts).filter(([file, n]) => n > (baseline[file] || 0)); +const shrunk = Object.entries(baseline).filter(([file, n]) => (counts[file] || 0) < n); + +if (LIST) console.log(findings.map(show).join('\n') || ' （无）'); + +let failed = false; +if (strict.length) { + failed = true; + console.error(`\n✗ workbench-host-ui：src/workbench 里有 ${strict.length} 处原生控件。`); + console.error(strict.map(show).join('\n')); + console.error(' 修法：改用 src/workbench/ui 的 HostButton / HostInput / HostSelect / HostCheckbox / HostNotice …'); +} +if (regressions.length) { + failed = true; + console.error('\n✗ unstyled-native-control：以下文件新增了不带 className 的原生控件（超出基线）：'); + for (const [file, n] of regressions) { + console.error(` ${file}: ${n}（基线 ${baseline[file] || 0}）`); + for (const f of ratchet.filter(f => f.file === file)) console.error(' ' + show(f)); + } + console.error(' 修法：用 antd 组件，或给原生控件一个有样式的 className；确属例外写 raw-ok: 原因。'); +} +if (failed) process.exit(1); +console.log(`native-controls OK：workbench 0 处，其余 ${ratchet.length} 处（基线内）` + + (shrunk.length ? `；有 ${shrunk.length} 个文件已低于基线，可跑 --update 收紧` : '')); diff --git a/src/frontend/scripts/native-controls-baseline.json b/src/frontend/scripts/native-controls-baseline.json new file mode 100644 index 00000000..dcf953e2 --- /dev/null +++ b/src/frontend/scripts/native-controls-baseline.json @@ -0,0 +1,20 @@ +{ + "src/components/agent/AgentPanel.tsx": 1, + "src/components/canvas/CanvasLauncher.tsx": 8, + "src/components/canvas/SubagentSidebarPanel.tsx": 1, + "src/components/chat/ChatForkBanner.tsx": 1, + "src/components/chat/EvolutionCard.tsx": 4, + "src/components/common/AppErrorBoundary.tsx": 1, + "src/components/desktop/CapabilitySyncGate.tsx": 1, + "src/components/desktop/DesktopAvailableCapabilities.tsx": 1, + "src/components/docs/AppCenterPanel.tsx": 1, + "src/components/file/ArchiveBrowser.tsx": 6, + "src/components/file/FileAttachmentCard.tsx": 1, + "src/components/loop/LoopPanel.tsx": 3, + "src/components/myspace/AssetTypeSwitch.tsx": 1, + "src/components/settings/SidebarLayoutSetting.tsx": 1, + "src/components/tool/ForkedToolCallRow.tsx": 1, + "src/components/voice/VoiceInput.tsx": 7, + "src/plugin-ui/PluginView.tsx": 3, + "src/plugin-ui/views/container/TreeGraphView.tsx": 4 +} diff --git a/src/frontend/scripts/preview-personal-chat-style.mjs b/src/frontend/scripts/preview-personal-chat-style.mjs index 4da409ce..324ceac5 100644 --- a/src/frontend/scripts/preview-personal-chat-style.mjs +++ b/src/frontend/scripts/preview-personal-chat-style.mjs @@ -6,7 +6,7 @@ import { resolve } from 'node:path'; const out = resolve('node_modules/.tmp/personal-chat-style'); await mkdir(out, { recursive: true }); await build({ entryPoints: ['scripts/personal-chat-style-fixture.tsx'], outfile: resolve(out, 'fixture.js'), - external: ['/loader.gif', '/loader-done.png'], bundle: true, format: 'esm', jsx: 'automatic', define: { 'import.meta.env': '{}' }, + bundle: true, format: 'esm', jsx: 'automatic', define: { 'import.meta.env': '{}' }, loader: { '.woff2': 'file', '.woff': 'file', '.ttf': 'file', '.png': 'file', '.svg': 'file' }, alias: { '@hugagent/workbench-protocol': resolve('../../packages/workbench-protocol/dist/index.js') } }); if (!process.argv.includes('--build-only')) createServer(async (req, res) => { diff --git a/src/frontend/scripts/test-agent-api-browser.mjs b/src/frontend/scripts/test-agent-api-browser.mjs index 7444fc05..101fa909 100644 --- a/src/frontend/scripts/test-agent-api-browser.mjs +++ b/src/frontend/scripts/test-agent-api-browser.mjs @@ -32,7 +32,7 @@ function Fixture() { createRoot(document.getElementById('root')).render(); `, resolveDir: process.cwd(), loader: 'tsx' }, outfile: resolve(output, 'fixture.js'), bundle: true, format: 'esm', jsx: 'automatic', define: { 'import.meta.env': '{"VITE_DEFAULT_LANGUAGE":"zh-CN"}' }, -external: ['/loader.gif', '/loader-done.png'], loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' } }); +loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' } }); let page; const browser = await chromium.launch({ headless: true, executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE }); try { diff --git a/src/frontend/scripts/test-archive-browser.mjs b/src/frontend/scripts/test-archive-browser.mjs index 1373dfd1..14c42a11 100644 --- a/src/frontend/scripts/test-archive-browser.mjs +++ b/src/frontend/scripts/test-archive-browser.mjs @@ -39,7 +39,7 @@ function Fixture() { createRoot(document.getElementById('root')).render(); `, resolveDir: process.cwd(), loader: 'tsx' }, outfile: resolve(output, 'fixture.js'), bundle: true, format: 'esm', jsx: 'automatic', define: { 'import.meta.env': JSON.stringify(apiBase ? {VITE_API_BASE_URL:apiBase} : {}) }, - external: ['/loader.gif', '/loader-done.png'], loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' } }); + loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' } }); } const requests = []; let retryCount = 0; diff --git a/src/frontend/scripts/test-artifact-browser.mjs b/src/frontend/scripts/test-artifact-browser.mjs index 21e720f7..3bf74606 100644 --- a/src/frontend/scripts/test-artifact-browser.mjs +++ b/src/frontend/scripts/test-artifact-browser.mjs @@ -37,7 +37,7 @@ function Fixture() { createRoot(document.getElementById('root')).render(); `, resolveDir: process.cwd(), loader: 'tsx' }, outfile: resolve(output, 'fixture.js'), bundle: true, format: 'esm', jsx: 'automatic', define: { 'import.meta.env': '{}' }, - external: ['/loader.gif','/loader-done.png'], loader: { '.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl' } }); + loader: { '.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl' } }); // Chromium downloads can bypass Playwright routing; serve that transport for real. const downloadRequests = []; const server = createServer((req, res) => { diff --git a/src/frontend/scripts/test-background-command-browser.mjs b/src/frontend/scripts/test-background-command-browser.mjs index 6d21ab6b..8b4bc3eb 100644 --- a/src/frontend/scripts/test-background-command-browser.mjs +++ b/src/frontend/scripts/test-background-command-browser.mjs @@ -85,8 +85,7 @@ await build({ stdin: { contents: fixture, loader: 'tsx', resolveDir: process.cwd outfile: resolve(output, 'fixture.js'), bundle: true, format: 'esm', jsx: 'automatic', define: { 'import.meta.env': '{}', 'process.env.NODE_ENV': '"production"' }, loader: { '.svg': 'dataurl', '.png': 'dataurl', '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl', '.md': 'text' }, - alias: { '@hugagent/workbench-protocol': resolve('../../packages/workbench-protocol/dist/index.js') }, - external: ['/loader.gif', '/loader-done.png'] }); + alias: { '@hugagent/workbench-protocol': resolve('../../packages/workbench-protocol/dist/index.js') } }); const browser = await chromium.launch({ headless: true }); try { const page = await browser.newPage(); diff --git a/src/frontend/scripts/test-cancel-continue-browser.mjs b/src/frontend/scripts/test-cancel-continue-browser.mjs index 27838675..cd9d0ced 100644 --- a/src/frontend/scripts/test-cancel-continue-browser.mjs +++ b/src/frontend/scripts/test-cancel-continue-browser.mjs @@ -69,8 +69,7 @@ createRoot(document.getElementById('root')).render(); window.snapshot=()=>useChatStore.getState().store.chats['chat-1'].messages; `, loader: 'tsx', resolveDir: process.cwd() }, bundle: true, format: 'esm', jsx: 'automatic', outdir: output, define: { 'import.meta.env': JSON.stringify({ VITE_API_BASE_URL: baseUrl }), 'process.env.NODE_ENV': '"production"' }, - loader: { '.svg': 'dataurl', '.png': 'dataurl', '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl', '.md': 'text' }, - external: ['/loader.gif', '/loader-done.png'] }); + loader: { '.svg': 'dataurl', '.png': 'dataurl', '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl', '.md': 'text' } }); const browser = await chromium.launch({ headless: true, executablePath: process.env.CHROMIUM_EXECUTABLE }); try { const page = await browser.newPage(); diff --git a/src/frontend/scripts/test-canvas-file-header-browser.mjs b/src/frontend/scripts/test-canvas-file-header-browser.mjs index 28a13683..19e0ac33 100644 --- a/src/frontend/scripts/test-canvas-file-header-browser.mjs +++ b/src/frontend/scripts/test-canvas-file-header-browser.mjs @@ -8,7 +8,7 @@ import { chromium } from 'playwright'; const output=resolve('node_modules/.tmp/canvas-file-header'); await mkdir(output,{recursive:true}); await build({stdin:{contents:"\nimport React from 'react';\nimport {createRoot} from 'react-dom/client';\nimport {RightSidebarPanel} from './src/components/canvas/RightSidebarPanel';\nimport {useCanvasStore} from './src/stores/canvasStore';\nimport {useDeploymentModeStore} from './src/stores/deploymentModeStore';\nimport './src/styles/variables.css';import './src/styles/canvas.css';\nwindow.canvas=useCanvasStore;\nfunction open(local,space=false,denied=false){\n useCanvasStore.getState().resetSidebar();\n useDeploymentModeStore.setState({isDesktop:local,provisionMode:local?'local_only':'cloud_only',activeLocal:local});\n useCanvasStore.getState().openCanvas({file_id:denied?'denied':local?'native':'cloud',name:'报告.txt',\n url:space?'/v1/myspace/content?space=personal&path=项目/报告.txt':'/files/'+(denied?'denied':local?'native':'cloud'),\n origin:local?'local':'cloud',...(space?{space:{id:'personal',name:'项目资料',kind:'personal',path:'项目/报告.txt',writable:true}}:{})});\n}\nfunction Fixture(){\n return <>open(false)}>Cloudopen(true)}>Native\n open(false,true)}>Spaceopen(false,false,true)}>Denied\n document.documentElement.dataset.theme='dark'}>Dark;\n}\nopen(false);\ncreateRoot(document.getElementById('root')).render();\n",resolveDir:process.cwd(),loader:'tsx'},bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'}, -external:['/loader.gif','/loader-done.png'],loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'},outfile:resolve(output,'fixture.js')}); +loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'},outfile:resolve(output,'fixture.js')}); let server; let page; const browser=await chromium.launch({headless:true}); diff --git a/src/frontend/scripts/test-canvas-layout-browser.mjs b/src/frontend/scripts/test-canvas-layout-browser.mjs index 0638eeac..b5cfb4f8 100644 --- a/src/frontend/scripts/test-canvas-layout-browser.mjs +++ b/src/frontend/scripts/test-canvas-layout-browser.mjs @@ -39,7 +39,7 @@ function Fixture(){ ; } createRoot(document.getElementById('root')).render(); -`, resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},external:['/loader.gif','/loader-done.png'],loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); +`, resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); const browser=await chromium.launch({headless:true}); try { const page=await browser.newPage({viewport:{width:1340,height:900}}); diff --git a/src/frontend/scripts/test-canvas-quote-browser.mjs b/src/frontend/scripts/test-canvas-quote-browser.mjs index f53385bc..baa44deb 100644 --- a/src/frontend/scripts/test-canvas-quote-browser.mjs +++ b/src/frontend/scripts/test-canvas-quote-browser.mjs @@ -43,7 +43,7 @@ window.fixture = { clearQuote: () => readComposer(chatDraftKey('a')).setQuotedFollowUp(null), }; createRoot(document.getElementById('root')).render(); -`, resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},external:['/loader.gif','/loader-done.png'],loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); +`, resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); const MARKDOWN = '# 第一章 总览\n\n## 1.1 背景\n\n这是一段需要被引用的原文内容，用来验证选区工具条。\n'; const browser = await chromium.launch({ headless: true, ...(process.env.PLAYWRIGHT_CHROMIUM ? { executablePath: process.env.PLAYWRIGHT_CHROMIUM } : {}) }); diff --git a/src/frontend/scripts/test-canvas-split-browser.mjs b/src/frontend/scripts/test-canvas-split-browser.mjs index 7b9a9020..c069d4d8 100644 --- a/src/frontend/scripts/test-canvas-split-browser.mjs +++ b/src/frontend/scripts/test-canvas-split-browser.mjs @@ -40,7 +40,7 @@ function Fixture(){ ; } createRoot(document.getElementById('root')).render(); -`, resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},external:['/loader.gif','/loader-done.png'],loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); +`, resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); const browser=await chromium.launch({headless:true}); try { diff --git a/src/frontend/scripts/test-canvas-zoom-browser.mjs b/src/frontend/scripts/test-canvas-zoom-browser.mjs index 041e7f48..fdd5f593 100644 --- a/src/frontend/scripts/test-canvas-zoom-browser.mjs +++ b/src/frontend/scripts/test-canvas-zoom-browser.mjs @@ -55,7 +55,7 @@ createRoot(document.getElementById('root')).render(); `, resolveDir: process.cwd(), loader: 'tsx' }, outfile: resolve(output, 'fixture.js'), bundle: true, format: 'esm', jsx: 'automatic', - define: { 'import.meta.env': '{}' }, external: ['/loader.gif', '/loader-done.png'], - loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' }, + define: { 'import.meta.env': '{}' }, loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' }, }); const browser = await chromium.launch({ headless: true, ...(process.env.CHROMIUM_EXECUTABLE ? { executablePath: process.env.CHROMIUM_EXECUTABLE } : {}) }); diff --git a/src/frontend/scripts/test-chat-component-polish.mjs b/src/frontend/scripts/test-chat-component-polish.mjs index 74d3203c..13a3cbb2 100644 --- a/src/frontend/scripts/test-chat-component-polish.mjs +++ b/src/frontend/scripts/test-chat-component-polish.mjs @@ -16,7 +16,6 @@ import { ThinkingStepRow } from './src/components/tool/ThinkingStepRow'; import { useComposerFiles } from './src/hooks/useComposerFiles'; import { useComposerStore } from './src/stores/composerStore'; import { useChatStore } from './src/stores/chatStore'; -import { useUIStore } from './src/stores/uiStore'; import { processChatStream } from './src/hooks/chatStream'; import { newMessageUid } from './src/utils/messageIdentity'; import './src/styles/variables.css'; @@ -27,7 +26,6 @@ useChatStore.setState({currentChatId:'a',currentUserId:'component-test',store:{o a:{id:'a',title:'test',messages:[],createdAt:1,updatedAt:1}, b:{id:'b',title:'other',messages:[],createdAt:1,updatedAt:1} }}}); -useUIStore.setState({dispatchProcessVisible:false}); useComposerStore.getState().resetForUser('component-test'); useComposerStore.getState().activate('chat:a'); function Fixture() { @@ -66,7 +64,7 @@ function Fixture() { createRoot(document.getElementById('root')).render(); `; const bundle=await build({stdin:{contents:fixture,resolveDir:process.cwd(),loader:'tsx'},bundle:true,write:false, - format:'esm',jsx:'automatic',outfile:'fixture.js',external:['/loader.gif','/loader-done.png'],define:{'import.meta.env':'{}'}, + format:'esm',jsx:'automatic',outfile:'fixture.js',define:{'import.meta.env':'{}'}, loader:{'.css':'css','.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.svg':'dataurl'}}); const js=bundle.outputFiles.find(f=>f.path.endsWith('.js')).text; const css=(bundle.outputFiles.find(f=>f.path.endsWith('.css'))?.text||'')+' html,body{height:auto;overflow:auto;}'; @@ -116,23 +114,23 @@ try { assert.equal(await group.getByRole('radio',{name:'文档'}).getAttribute('aria-checked'),'true'); check('分段筛选方向键、Home、焦点和选中状态'); await page.getByRole('button',{name:'开始流式回复',exact:true}).click(); - const thinking=page.locator('.jx-msg.assistant .jx-inlineFold').first(); - const summary=thinking.getByRole('button'); + const thinking=page.locator('.jx-msg.assistant .jx-trs').first(); + const summary=thinking.locator('.jx-trs-head'); await summary.waitFor(); - await thinking.locator(".jx-inlineSummaryArrow").waitFor(); assert.equal(await summary.getAttribute('aria-expanded'),'false'); - assert.equal(await thinking.locator('.jx-collapse--open').count(),0); + assert.equal(await thinking.locator('.jx-trs-bodyWrap--open').count(),0); await summary.focus();await page.keyboard.press('Enter'); - await thinking.locator('.jx-collapse--open').waitFor(); + await thinking.locator('.jx-trs-bodyWrap--open').waitFor(); + await thinking.locator('.jx-tcr-header').click(); await page.getByText('先检查附件格式。然后核对数据和结论。',{exact:true}).waitFor(); assert.equal(await summary.getAttribute('aria-expanded'),'true'); await page.screenshot({path:resolve(evidence,'01-stream-thinking.png'),fullPage:true}); await page.getByText('流式结束',{exact:true}).waitFor(); assert.equal(await summary.getAttribute('aria-expanded'),'true'); - assert.equal(await summary.innerText(),'思考过程'); + assert.equal(await thinking.locator('.jx-trs-title').innerText(),'思考完成'); await page.getByText('附件内容已核对。',{exact:true}).waitFor(); await summary.focus();await page.keyboard.press('Space'); - assert.equal(await thinking.locator('.jx-collapse--open').count(),0); + assert.equal(await thinking.locator('.jx-trs-bodyWrap--open').count(),0); check('真实 SSE 解析、思考流式更新、展开保持、完成态及键盘折叠'); const step=page.locator('.jx-tcr').last(); await step.getByRole('button').click(); diff --git a/src/frontend/scripts/test-chat-width-browser.mjs b/src/frontend/scripts/test-chat-width-browser.mjs index bf4c1f29..5017e86b 100644 --- a/src/frontend/scripts/test-chat-width-browser.mjs +++ b/src/frontend/scripts/test-chat-width-browser.mjs @@ -73,8 +73,7 @@ createRoot(document.getElementById('root')).render(); jsx: 'automatic', define: { 'import.meta.env': '{}' }, loader: { '.svg': 'dataurl', '.png': 'dataurl', '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' }, - external: ['/loader.gif', '/loader-done.png'], -}); + }); const browser = await chromium.launch({ headless: true, ...(process.env.PLAYWRIGHT_CHROMIUM ? { executablePath: process.env.PLAYWRIGHT_CHROMIUM } : {}), @@ -133,6 +132,8 @@ try { async function check(label) { await page.waitForFunction(() => { const nav = document.querySelector('.jx-conversationNav'); + // Phones drop the jump rail so the message column can use the full width. + if (window.innerWidth <= 960) return !nav || getComputedStyle(nav).display === 'none'; const viewport = document.querySelector('.jx-chatViewport').getBoundingClientRect(); return nav && Math.abs(nav.getBoundingClientRect().right - (viewport.right - 8)) < 2; }); diff --git a/src/frontend/scripts/test-compaction-progress.tsx b/src/frontend/scripts/test-compaction-progress.tsx index 29b3ba92..58967d70 100644 --- a/src/frontend/scripts/test-compaction-progress.tsx +++ b/src/frontend/scripts/test-compaction-progress.tsx @@ -19,8 +19,8 @@ const message: ChatMessage = { }; const [updated] = mergeCompactionProgress([message], 'c1', [running]); assert.deepEqual(updated.segments!.map(s => s.type), ['tool', 'compaction', 'text']); -for (const visible of [true, false]) { - const { runs } = groupExecutionRuns(updated, visible); +{ + const { runs } = groupExecutionRuns(updated); assert.equal(runs.length, 1); assert.equal(runs[0].tools.length, 1); assert.deepEqual(runs[0].steps.map(s => s.kind), ['tool', 'compaction']); @@ -34,7 +34,7 @@ assert.equal(settled.length, updated.segments!.length); assert.equal(upsertCompactionSegment(settled, running)[1].compaction!.status, 'completed'); assert.equal(compactionLabel(completed), '上下文已压缩'); const failed = { ...running, status: 'failed' as const }; -const [{ steps }] = groupExecutionRuns({ ...updated, segments: upsertCompactionSegment(updated.segments!, failed) }, false).runs; +const [{ steps }] = groupExecutionRuns({ ...updated, segments: upsertCompactionSegment(updated.segments!, failed) }).runs; assert.ok(renderToStaticMarkup().includes(t('上下文压缩失败'))); assert.deepEqual(mergeCompactionProgress([message], 'other', [running])[0], message); assert.deepEqual(mergeCompactionProgress([message], 'c1', [{ ...running, message_id: 'other' }])[0], message); diff --git a/src/frontend/scripts/test-composer-caret.mjs b/src/frontend/scripts/test-composer-caret.mjs index b4b1a796..f3bd62d6 100644 --- a/src/frontend/scripts/test-composer-caret.mjs +++ b/src/frontend/scripts/test-composer-caret.mjs @@ -18,8 +18,7 @@ const result = await build({ /> ); `, resolveDir: process.cwd(), loader: 'tsx' }, - jsx: 'automatic', bundle: true, write: false, outdir: 'node_modules/.tmp/composer-browser', format: 'esm', external: ['/loader.gif', '/loader-done.png'], - define: { 'import.meta.env': '{"VITE_DEFAULT_LANGUAGE":"zh-CN"}', 'process.env.NODE_ENV': '"production"' }, + jsx: 'automatic', bundle: true, write: false, outdir: 'node_modules/.tmp/composer-browser', format: 'esm', define: { 'import.meta.env': '{"VITE_DEFAULT_LANGUAGE":"zh-CN"}', 'process.env.NODE_ENV': '"production"' }, loader: { '.woff2': 'dataurl', '.woff': 'dataurl', '.ttf': 'dataurl', '.svg': 'dataurl', '.png': 'dataurl' }, }); const js = result.outputFiles.find(f => f.path.endsWith('.js')).text; diff --git a/src/frontend/scripts/test-container-layout-browser.mjs b/src/frontend/scripts/test-container-layout-browser.mjs index a9abb122..bce0ddf6 100644 --- a/src/frontend/scripts/test-container-layout-browser.mjs +++ b/src/frontend/scripts/test-container-layout-browser.mjs @@ -58,7 +58,7 @@ function Fixture(){ createRoot(document.getElementById('root')).render(); `,resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'), bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'}, -external:['/loader.gif','/loader-done.png'],loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); +loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); const browser=await chromium.launch({headless:true}); try { for(const viewport of [1440,360]) { diff --git a/src/frontend/scripts/test-desktop-chrome-browser.mjs b/src/frontend/scripts/test-desktop-chrome-browser.mjs index 361d860f..987ad240 100644 --- a/src/frontend/scripts/test-desktop-chrome-browser.mjs +++ b/src/frontend/scripts/test-desktop-chrome-browser.mjs @@ -36,7 +36,7 @@ const router=createBrowserRouter([{path:'*',element:}]);bindRouter(r const root=createRoot(document.getElementById('root')); window.__fixture={theme:mode=>useUIStore.getState().setThemeMode(mode),collapse:v=>useUIStore.getState().setSiderCollapsed(v),loading:()=>root.render()}; root.render(); -`,resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,jsx:'automatic',format:'esm',define:{'import.meta.env':'{"VITE_DEFAULT_LANGUAGE":"zh-CN"}'},loader:{'.css':'css','.svg':'dataurl','.woff2':'dataurl','.woff':'dataurl','.ttf':'dataurl'},external:['/loader.gif','/loader-done.png']}); +`,resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,jsx:'automatic',format:'esm',define:{'import.meta.env':'{"VITE_DEFAULT_LANGUAGE":"zh-CN"}'},loader:{'.css':'css','.svg':'dataurl','.woff2':'dataurl','.woff':'dataurl','.ttf':'dataurl'}}); const kits=[]; const browser=await chromium.launch({headless:true,executablePath:process.env.PLAYWRIGHT_CHROMIUM}); try{ diff --git a/src/frontend/scripts/test-excel-save-shortcut-browser.mjs b/src/frontend/scripts/test-excel-save-shortcut-browser.mjs index 0177bb76..b8804a13 100644 --- a/src/frontend/scripts/test-excel-save-shortcut-browser.mjs +++ b/src/frontend/scripts/test-excel-save-shortcut-browser.mjs @@ -22,7 +22,7 @@ import {useCanvasStore} from './src/stores/canvasStore'; window.canvas=useCanvasStore; useCanvasStore.getState().openCanvas({file_id:'sheet',name:'sheet.xlsx',url:'/files/sheet'}); createRoot(document.getElementById('root')).render(); -`,resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},external:['/loader.gif','/loader-done.png'],loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}, +`,resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}, plugins:[{name:'spreadsheet-adapter',setup(builder){builder.onResolve({filter:/^\.\/UniverSpreadsheet$/},()=>({path:adapter}));}}]}); const browser=await chromium.launch({headless:true,executablePath:process.env.CHROMIUM_EXECUTABLE}); try{ diff --git a/src/frontend/scripts/test-file-action-layout-browser.mjs b/src/frontend/scripts/test-file-action-layout-browser.mjs index cafa52e3..45e1b927 100644 --- a/src/frontend/scripts/test-file-action-layout-browser.mjs +++ b/src/frontend/scripts/test-file-action-layout-browser.mjs @@ -33,7 +33,7 @@ createRoot(document.getElementById('root')).render(modal ? ); `, resolveDir: process.cwd(), loader:'tsx' }, outfile: resolve(output,'fixture.js'), bundle:true, format:'esm', jsx:'automatic', define:{'import.meta.env':'{}'}, - external:['/loader.gif','/loader-done.png'], loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'} }); + loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'} }); const browser = await chromium.launch({headless:true, executablePath:process.env.CHROMIUM_EXECUTABLE_PATH}); try { for (const lang of ['zh-CN','en']) { diff --git a/src/frontend/scripts/test-file-open-browser.mjs b/src/frontend/scripts/test-file-open-browser.mjs index 81e92283..970af637 100644 --- a/src/frontend/scripts/test-file-open-browser.mjs +++ b/src/frontend/scripts/test-file-open-browser.mjs @@ -38,8 +38,7 @@ function Fixture() { createRoot(document.getElementById('root')).render(); `, resolveDir: process.cwd(), loader: 'tsx' }, outfile: resolve(output, 'fixture.js'), bundle: true, format: 'esm', jsx: 'automatic', - define: {'import.meta.env': '{}'}, external: ['/loader.gif', '/loader-done.png'], - loader: {'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}, + define: {'import.meta.env': '{}'}, loader: {'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}, }); const apps = Array.from({length: 60}, (_, i) => ({id: 'app-' + i, name: 'Editor ' + i, icon: null})); const browser = await chromium.launch({headless: true}); diff --git a/src/frontend/scripts/test-file-text-browser.mjs b/src/frontend/scripts/test-file-text-browser.mjs index 6baf5823..9c938cb0 100644 --- a/src/frontend/scripts/test-file-text-browser.mjs +++ b/src/frontend/scripts/test-file-text-browser.mjs @@ -18,7 +18,7 @@ useCanvasStore.getState().openCanvas(file); window.canvas=useCanvasStore; function Fixture(){const guard=useCanvasGuard();return <>guard(()=>useCanvasStore.getState().openCanvas(file))}>Reopenguard(()=>useCanvasStore.getState().openCanvas({...file,name:'code.go',mime_type:'application/octet-stream'}))}>Open Goguard(()=>useCanvasStore.getState().openCanvas({...file,name:'note.txt',mime_type:'text/plain'}))}>Open TXTguard(()=>useCanvasStore.getState().openCanvas({...file,name:'page.html',mime_type:'text/html'}))}>Open HTML} createRoot(document.getElementById('root')).render(); -`,resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},external:['/loader.gif','/loader-done.png'],loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); +`,resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); const browser = await chromium.launch({headless:true,executablePath:process.env.CHROMIUM_EXECUTABLE}); try { const page=await browser.newPage(); diff --git a/src/frontend/scripts/test-grapheme-reveal-browser.mjs b/src/frontend/scripts/test-grapheme-reveal-browser.mjs index 7ff65ff1..cbff29c1 100644 --- a/src/frontend/scripts/test-grapheme-reveal-browser.mjs +++ b/src/frontend/scripts/test-grapheme-reveal-browser.mjs @@ -33,8 +33,7 @@ function Fixture(){ createRoot(document.getElementById('root')).render(); `; const result=await build({stdin:{contents:fixture,resolveDir:process.cwd(),loader:'tsx'},bundle:true,write:false, - format:'esm',jsx:'automatic',outfile:'fixture.js',define:{'import.meta.env':'{}'},external:['/loader.gif','/loader-done.png'], - loader:{'.css':'css','.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.svg':'dataurl'}}); + format:'esm',jsx:'automatic',outfile:'fixture.js',define:{'import.meta.env':'{}'},loader:{'.css':'css','.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.svg':'dataurl'}}); const js=result.outputFiles.find(f=>f.path.endsWith('.js')).text; const css=result.outputFiles.find(f=>f.path.endsWith('.css'))?.text||''; let stream; diff --git a/src/frontend/scripts/test-html-preview-browser.mjs b/src/frontend/scripts/test-html-preview-browser.mjs index 6f869ec5..bb9d092e 100644 --- a/src/frontend/scripts/test-html-preview-browser.mjs +++ b/src/frontend/scripts/test-html-preview-browser.mjs @@ -16,7 +16,7 @@ const file={file_id:'page',name:'预览.html',url:'/files/page',origin:'local',m useCanvasStore.getState().openCanvas(file); function Fixture(){return <>useCanvasStore.getState().openCanvas(file)}>ReopenuseCanvasStore.getState().openCanvas({...file,file_id:"external",url:"https://external.test/page.html",origin:"cloud"})}>External} createRoot(document.getElementById('root')).render(); -`, resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},external:['/loader.gif','/loader-done.png'],loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); +`, resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(output,'fixture.js'),bundle:true,format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}}); const browser=await chromium.launch({headless:true}); try { const page=await browser.newPage(); diff --git a/src/frontend/scripts/test-management-lifecycle-browser.mjs b/src/frontend/scripts/test-management-lifecycle-browser.mjs index b048cd9a..1f1d2c43 100644 --- a/src/frontend/scripts/test-management-lifecycle-browser.mjs +++ b/src/frontend/scripts/test-management-lifecycle-browser.mjs @@ -36,8 +36,7 @@ useCatalogStore.getState().fetchCatalog(); createRoot(document.getElementById('root')).render(); `, resolveDir: process.cwd(), loader: 'tsx' }, outfile: resolve(output, 'fixture.js'), bundle: true, format: 'esm', jsx: 'automatic', - define: { 'import.meta.env': '{"VITE_DEFAULT_LANGUAGE":"zh-CN"}' }, external: ['/loader.gif', '/loader-done.png'], - loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' }, + define: { 'import.meta.env': '{"VITE_DEFAULT_LANGUAGE":"zh-CN"}' }, loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' }, }); async function post(path, body) { const response = await fetch(backend + path, { method: 'POST', headers: {'content-type': 'application/json'}, body: JSON.stringify(body) }); diff --git a/src/frontend/scripts/test-module-navigation.mjs b/src/frontend/scripts/test-module-navigation.mjs index bc34bdd6..f66487c3 100644 --- a/src/frontend/scripts/test-module-navigation.mjs +++ b/src/frontend/scripts/test-module-navigation.mjs @@ -45,7 +45,7 @@ function Shell(){useAppBootstrap(isConversationPath());useChatSearch(); const pa const router=createBrowserRouter([{path:'/',element:,children:[{index:true,element:Workspace},{path:'*',element:Module content}]}]);bindRouter(router); window.__navigation={selectTask:()=>useChatStore.getState().setCurrentChatId('task-chat'),unresolvedTask:()=>{useChatStore.getState().adoptChatFromUrl('unresolved-task-chat');navigateTo('/automation/task-one/conversations/unresolved-task-chat');},theme:mode=>useUIStore.getState().setThemeMode(mode),loaded:id=>!!useChatStore.getState().store.chats[id],owner:id=>useChatStore.getState().store.chats[id]?.automationTaskId,plugin:()=>readComposer().activePlugin}; createRoot(document.getElementById('root')).render(); -`,resolveDir:process.cwd(),loader:'tsx'},outdir:output,entryNames:'fixture',splitting:true,bundle:true,jsx:'automatic',format:'esm',define:{'import.meta.env':'{}'},loader:{'.css':'css','.svg':'dataurl','.woff2':'dataurl','.woff':'dataurl','.ttf':'dataurl'},external:['/loader.gif','/loader-done.png']}); +`,resolveDir:process.cwd(),loader:'tsx'},outdir:output,entryNames:'fixture',splitting:true,bundle:true,jsx:'automatic',format:'esm',define:{'import.meta.env':'{}'},loader:{'.css':'css','.svg':'dataurl','.woff2':'dataurl','.woff':'dataurl','.ttf':'dataurl'}}); const origin='http://127.0.0.1:5199'; const browser=await chromium.launch({headless:true,...(process.env.PLAYWRIGHT_CHROMIUM?{executablePath:process.env.PLAYWRIGHT_CHROMIUM}:{})}); try{ diff --git a/src/frontend/scripts/test-module-pages-browser.mjs b/src/frontend/scripts/test-module-pages-browser.mjs index 6d62b592..20eb730b 100644 --- a/src/frontend/scripts/test-module-pages-browser.mjs +++ b/src/frontend/scripts/test-module-pages-browser.mjs @@ -40,8 +40,7 @@ createRoot(document.getElementById('root')).render({ samples.push(performance.now()-start); } return samples; -};`,resolveDir:source,loader:'tsx'},bundle:true,format:'esm',jsx:'automatic',outdir:dir,nodePaths:[resolve('node_modules')],define:{'import.meta.env':'{}','process.env.NODE_ENV':'"production"'},loader:{'.svg':'dataurl','.png':'dataurl','.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.md':'text'},external:['/loader.gif','/loader-done.png']}); +};`,resolveDir:source,loader:'tsx'},bundle:true,format:'esm',jsx:'automatic',outdir:dir,nodePaths:[resolve('node_modules')],define:{'import.meta.env':'{}','process.env.NODE_ENV':'"production"'},loader:{'.svg':'dataurl','.png':'dataurl','.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.md':'text'}}); const page=await browser.newPage({viewport:{width:1280,height:800}}); const errors=[];page.on('pageerror',e=>errors.push(e.message)); await page.route('http://stream.test/**',async route=>{ diff --git a/src/frontend/scripts/test-personal-delivery-browser.mjs b/src/frontend/scripts/test-personal-delivery-browser.mjs index f168274f..ecbaf218 100644 --- a/src/frontend/scripts/test-personal-delivery-browser.mjs +++ b/src/frontend/scripts/test-personal-delivery-browser.mjs @@ -16,7 +16,6 @@ execFileSync(resolve(root, '.venv/bin/python'), ['-m', 'pytest', } }); const fixture = JSON.parse(await readFile(fixturePath, 'utf8')); await build({ entryPoints: ['scripts/personal-delivery-fixture.tsx'], outfile: resolve(output, 'fixture.js'), - external: ['/loader.gif', '/loader-done.png'], loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl', '.svg': 'dataurl', '.png': 'dataurl' }, bundle: true, format: 'esm', jsx: 'automatic', define: { 'import.meta.env': '{}' }, alias: { '@hugagent/workbench-protocol': resolve('../../packages/workbench-protocol/dist/index.js') } }); diff --git a/src/frontend/scripts/test-personal-output-preview-browser.mjs b/src/frontend/scripts/test-personal-output-preview-browser.mjs index de315dd4..86706215 100644 --- a/src/frontend/scripts/test-personal-output-preview-browser.mjs +++ b/src/frontend/scripts/test-personal-output-preview-browser.mjs @@ -25,8 +25,7 @@ createRoot(document.getElementById('root')).render( Array.from({ length: 40 }, (_, c) => `Row ${r} column ${c} long value`)); const workbook = XLSX.utils.book_new(); for (const name of ['First sheet', 'Second sheet']) XLSX.utils.book_append_sheet(workbook, XLSX.utils.aoa_to_sheet(rows), name); diff --git a/src/frontend/scripts/test-project-environment-browser.mjs b/src/frontend/scripts/test-project-environment-browser.mjs index 36f255ad..391225c7 100644 --- a/src/frontend/scripts/test-project-environment-browser.mjs +++ b/src/frontend/scripts/test-project-environment-browser.mjs @@ -38,8 +38,7 @@ createRoot(document.getElementById('root')).render(); `,resolveDir:process.cwd(),loader:'tsx'},outfile:resolve(fixture,'fixture.js'),bundle:true,format:'esm',jsx:'automatic', define:{'import.meta.env':'{"VITE_DEFAULT_LANGUAGE":"zh-CN"}'}, -external:['/loader.gif','/loader-done.png'],loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.png':'dataurl','.svg':'dataurl','.md':'text'}}); +loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.png':'dataurl','.svg':'dataurl','.md':'text'}}); const browser = await chromium.launch({ headless: true, executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE }); const token = 'A'.repeat(43); const shots = resolve('node_modules/.tmp/public-chat-evidence'); diff --git a/src/frontend/scripts/test-reference-motion-browser.mjs b/src/frontend/scripts/test-reference-motion-browser.mjs index 77bbc966..82fc35b7 100644 --- a/src/frontend/scripts/test-reference-motion-browser.mjs +++ b/src/frontend/scripts/test-reference-motion-browser.mjs @@ -12,7 +12,6 @@ import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {MessageBubble} from './src/components/chat/MessageBubble'; import {TurnStatusIndicator} from './src/components/chat/TurnStatusIndicator'; -import {ThinkingInline} from './src/components/chat/ThinkingInline'; import {ToolRunShell} from './src/components/tool/ToolRunShell'; import PanelLoadingSkeleton from './src/components/common/PanelLoadingSkeleton'; import {newMessageUid} from './src/utils/messageIdentity'; @@ -33,7 +32,6 @@ function Fixture(){ setDone(true)}>完成 {messages.map((m,i)=>{}} exportChatRecord={async()=>{}}/>)} {!done&&} - ; @@ -41,15 +39,13 @@ function Fixture(){ createRoot(document.getElementById('root')).render(); `; const result=await build({stdin:{contents:fixture,resolveDir:process.cwd(),loader:'tsx'},bundle:true,write:false, - format:'esm',jsx:'automatic',outfile:'fixture.js',define:{'import.meta.env':'{}'},external:['/loader.gif','/loader-done.png'], - loader:{'.css':'css','.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.svg':'dataurl'}}); + format:'esm',jsx:'automatic',outfile:'fixture.js',define:{'import.meta.env':'{}'},loader:{'.css':'css','.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.svg':'dataurl'}}); const js=result.outputFiles.find(f=>f.path.endsWith('.js')).text; const css=result.outputFiles.find(f=>f.path.endsWith('.css')).text; const server=createServer((req,res)=>{ if(req.url==='/fixture.js'){res.setHeader('Content-Type','text/javascript');res.end(js);return;} if(req.url==='/fixture.css'){res.setHeader('Content-Type','text/css');res.end(css);return;} if(req.url.startsWith('/api/')){res.setHeader('Content-Type','application/json');res.end(JSON.stringify({code:20000,data:[]}));return;} - if(req.url==='/loader.gif'||req.url==='/loader-done.png'){res.statusCode=204;res.end();return;} res.setHeader('Content-Type','text/html');res.end(''); }); await new Promise(r=>server.listen(0,'127.0.0.1',r)); @@ -71,9 +67,9 @@ try{ if(user)assert.equal(user.frames[0].transform,'scale(0.92) translateY(6px)'); if(assistant)assert.equal(assistant.frames[0].transform,'translateY(10px)'); await page.locator('.jx-trs-head').click(); - const labels=page.locator('.jx-rollText-text.is-shimmer,.jx-inlineSummaryText--live,.jx-tcr-prefix--shimmer'); + const labels=page.locator('.jx-rollText-text.is-shimmer,.jx-tcr-prefix--shimmer'); const live=await labels.evaluateAll(els=>els.map(el=>{const s=getComputedStyle(el);return {name:s.animationName,duration:s.animationDuration,size:s.backgroundSize,clip:s.backgroundClip,gradient:s.backgroundImage};})); - assert.ok(live.length>=5,'startup, inline thinking, execution title, tool and thinking step labels participate'); + assert.ok(live.length>=4,'startup, execution title, tool and thinking step labels participate'); assert.ok(live.every(s=>s.name==='jxTurnStatusShine'&&s.duration==='2.8s'&&s.size==='250% 100%'&&s.clip==='text'),'all running labels use the same reference scan'); assert.equal(new Set(live.map(s=>s.gradient)).size,1,'tool.css must not override the shared gradient'); const summary=page.locator('.jx-trs-summary'); diff --git a/src/frontend/scripts/test-sidebar-navigation-browser.mjs b/src/frontend/scripts/test-sidebar-navigation-browser.mjs index 00f87812..625c1655 100644 --- a/src/frontend/scripts/test-sidebar-navigation-browser.mjs +++ b/src/frontend/scripts/test-sidebar-navigation-browser.mjs @@ -38,7 +38,7 @@ onStartRename={noop} onCommitRename={noop} onExportChat={noop} onSelectChat={noo const router=createBrowserRouter([{path:'*',element:}]); bindRouter(router);createRoot(document.getElementById('root')).render(); `, resolveDir: process.cwd(), loader: 'tsx' }, outfile: resolve(output, 'fixture.js'), bundle: true, -external: ['/loader.gif','/loader-done.png'], format: 'esm', jsx: 'automatic', define: { 'import.meta.env': '{}' }, +format: 'esm', jsx: 'automatic', define: { 'import.meta.env': '{}' }, loader: { '.css': 'css', '.svg': 'dataurl', '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' } }); await writeFile(resolve(output, 'index.html'), ''); const applications = Array.from({length: 100}, (_, n) => ({ diff --git a/src/frontend/scripts/test-sites-mcp-browser.mjs b/src/frontend/scripts/test-sites-mcp-browser.mjs index a0bf7bd4..693065e2 100644 --- a/src/frontend/scripts/test-sites-mcp-browser.mjs +++ b/src/frontend/scripts/test-sites-mcp-browser.mjs @@ -20,7 +20,6 @@ function SessionStatus(){ const chat=useChatStore(s=>s.store.chats[s.currentChat createRoot(document.getElementById('root')).render(window.location.pathname === '/unscoped' ? : <>); `, resolveDir: process.cwd(), loader: 'tsx' }, outfile: resolve(output, 'fixture.js'), bundle: true, format: 'esm', jsx: 'automatic', define: { 'import.meta.env': '{}' }, - external: ['/loader.gif', '/loader-done.png'], loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' } }); const origin = 'http://127.0.0.1:18479'; const appId = 'a'.repeat(32); diff --git a/src/frontend/scripts/test-space-import-browser.mjs b/src/frontend/scripts/test-space-import-browser.mjs index 90262848..c8b5d792 100644 --- a/src/frontend/scripts/test-space-import-browser.mjs +++ b/src/frontend/scripts/test-space-import-browser.mjs @@ -15,8 +15,7 @@ import "antd/dist/reset.css"; createRoot(document.getElementById("root")).render( {}} />); `, resolveDir: process.cwd(), loader: "tsx" }, outfile: resolve(output, "fixture.js"), bundle: true, format: "esm", jsx: "automatic", define: { "import.meta.env": "{\"VITE_DEFAULT_LANGUAGE\":\"zh-CN\"}" }, - loader: { ".svg": "dataurl", ".png": "dataurl", ".md": "text", ".woff": "dataurl", ".woff2": "dataurl", ".ttf": "dataurl" }, - external: ["/loader.gif", "/loader-done.png"] }); + loader: { ".svg": "dataurl", ".png": "dataurl", ".md": "text", ".woff": "dataurl", ".woff2": "dataurl", ".ttf": "dataurl" } }); const server = createServer(async (req, res) => { if (req.url === "/fixture.js" || req.url === "/fixture.css") { res.setHeader("Content-Type", req.url.endsWith("js") ? "text/javascript" : "text/css"); diff --git a/src/frontend/scripts/test-space-presentation.mjs b/src/frontend/scripts/test-space-presentation.mjs index 8b3d7bfc..a8924613 100644 --- a/src/frontend/scripts/test-space-presentation.mjs +++ b/src/frontend/scripts/test-space-presentation.mjs @@ -24,7 +24,6 @@ window.canvas=useCanvasStore; createRoot(document.getElementById('root')).render(); `, resolveDir: process.cwd(), loader:'tsx' }, outfile:output+'/fixture.js', bundle:true, format:'esm', jsx:'automatic', define:{'import.meta.env':'{"VITE_DEFAULT_LANGUAGE":"zh-CN","VITE_API_BASE_URL":"/api"}'}, -external:['/loader.gif','/loader-done.png'], loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.svg':'dataurl','.png':'dataurl','.md':'text'} }); const server=createServer(async(req,res)=>{ const path=req.url.split('?')[0]; diff --git a/src/frontend/scripts/test-stream-reconnect-browser.mjs b/src/frontend/scripts/test-stream-reconnect-browser.mjs index 81429f1b..283bfa3f 100644 --- a/src/frontend/scripts/test-stream-reconnect-browser.mjs +++ b/src/frontend/scripts/test-stream-reconnect-browser.mjs @@ -87,8 +87,7 @@ window.finish=()=>{ window.ready=true; `,resolveDir:process.cwd(),loader:'tsx'},bundle:true,format:'esm',jsx:'automatic',outdir:output, define:{'import.meta.env':'{}','process.env.NODE_ENV':'"production"'}, - loader:{'.svg':'dataurl','.png':'dataurl','.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.md':'text'}, - external:['/loader.gif','/loader-done.png']}); + loader:{'.svg':'dataurl','.png':'dataurl','.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.md':'text'}}); const browser=await chromium.launch({headless:true,executablePath:process.env.CHROMIUM_EXECUTABLE}); try{ const page=await browser.newPage(); diff --git a/src/frontend/scripts/test-subagent-canvas-browser.mjs b/src/frontend/scripts/test-subagent-canvas-browser.mjs index b135ea07..2da7134e 100644 --- a/src/frontend/scripts/test-subagent-canvas-browser.mjs +++ b/src/frontend/scripts/test-subagent-canvas-browser.mjs @@ -16,7 +16,6 @@ import { useChatStore } from './src/stores/chatStore'; import { useAgentStore } from './src/stores/agentStore'; import { useCatalogStore } from './src/stores/catalogStore'; import { usePluginStore } from './src/stores/pluginStore'; -import { useUIStore } from './src/stores/uiStore'; import './src/styles/variables.css'; import './src/styles/chat.css'; import './src/styles/tool.css'; @@ -27,7 +26,6 @@ const tool = { id: 'call-a', name: 'call_subagent', subagentName: 'Research agen const msg = { uid: 'message-a', messageId: 'persisted-a', role: 'assistant', content: '', ts: Date.now(), isStreaming: true, toolCalls: [tool, { ...tool, id: 'call-b', status: 'success', output: 'Other invocation', subSteps: [] }] }; useChatStore.setState(s => ({ store: { ...s.store, chats: { ...s.store.chats, 'chat-a': { id: 'chat-a', messages: [msg] } } } })); useAgentStore.setState({ agents: [] }); -useUIStore.setState({ dispatchProcessVisible: true }); useCatalogStore.setState(s => ({ catalog: { ...s.catalog, skills: [{ id: 'writer', name: 'Writing', icon: '/skill.svg' }], mcp: [{ id: 'search', name: 'Search', icon: '/connector.svg', tools: ['search_web'] }], @@ -48,7 +46,7 @@ function Fixture() { } import { MemoryRouter } from 'react-router'; createRoot(document.getElementById('root')).render(); -`, resolveDir: process.cwd(), loader: 'tsx' }, outfile: resolve(output, 'fixture.js'), external: ['/loader.gif', '/loader-done.png'], bundle: true, format: 'esm', jsx: 'automatic', define: { 'import.meta.env': '{}' }, loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' } }); +`, resolveDir: process.cwd(), loader: 'tsx' }, outfile: resolve(output, 'fixture.js'), bundle: true, format: 'esm', jsx: 'automatic', define: { 'import.meta.env': '{}' }, loader: { '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' } }); const browser = await chromium.launch({ headless: true }); try { const page = await browser.newPage({ viewport: { width: 1360, height: 900 } }); diff --git a/src/frontend/scripts/test-subagent-canvas.ts b/src/frontend/scripts/test-subagent-canvas.ts index 05fad976..c2f35a3c 100644 --- a/src/frontend/scripts/test-subagent-canvas.ts +++ b/src/frontend/scripts/test-subagent-canvas.ts @@ -37,13 +37,10 @@ const transcript = { uid: 'test', role: 'assistant' as const, content: '', ts: 0 toolCalls: [{ id: 't1', name: 'bash', status: 'running' as const }], segments: [{ type: 'thinking' as const, content: 'Reasoning' }, { type: 'tool' as const, toolIndex: 0 }, { type: 'text' as const, content: 'Answer' }, { type: 'thinking' as const, content: 'Next phase' }] }; -const visible = groupExecutionRuns(transcript, true); -assert.equal(visible.runs.length, 2, 'Answer text separates execution phases'); -assert.deepEqual(visible.runs[0].steps.map(step => step.kind), ['thinking', 'tool']); -assert.equal(visible.suppressedIdx.has(2), false, 'Answer remains outside tool collapse'); -const hidden = groupExecutionRuns(transcript, false); -assert.equal(hidden.runs[0].anchor, 1, 'Main UI off mode keeps leading thinking separate'); -assert.deepEqual(hidden.runs[0].steps.map(step => step.kind), ['tool']); +const grouped = groupExecutionRuns(transcript); +assert.equal(grouped.runs.length, 2, 'Answer text separates execution phases'); +assert.deepEqual(grouped.runs[0].steps.map(step => step.kind), ['thinking', 'tool']); +assert.equal(grouped.suppressedIdx.has(2), false, 'Answer remains outside tool collapse'); console.log('Shared main/Canvas execution grouping passed'); const { subagentDisplayText } = await import('../src/utils/subagentView'); diff --git a/src/frontend/scripts/test-turn-status-alignment.mjs b/src/frontend/scripts/test-turn-status-alignment.mjs index da6821df..58c031e3 100644 --- a/src/frontend/scripts/test-turn-status-alignment.mjs +++ b/src/frontend/scripts/test-turn-status-alignment.mjs @@ -2,38 +2,33 @@ import assert from 'node:assert/strict'; import { build } from 'esbuild'; import { chromium } from 'playwright'; import { createServer } from 'node:http'; -import { readFile } from 'node:fs/promises'; -// Render the real message state transition, including both process preferences. +// Render the real message state transition from startup to reasoning. const fixture = ` import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {MessageBody} from './src/components/chat/MessageBody'; -import {ThinkingInline} from './src/components/chat/ThinkingInline'; -import {useChatStore,useUIStore} from './src/stores'; +import {useChatStore} from './src/stores'; import './src/styles/variables.css'; import './src/styles/chat.css'; import './src/styles/tool.css'; useChatStore.setState({currentChatId:'alignment',currentUserId:'alignment-test',store:{order:['alignment'],chats:{alignment:{id:'alignment',title:'Alignment',messages:[],createdAt:1,updatedAt:1}}}}); -useUIStore.setState({dispatchProcessVisible:true}); function Fixture(){ const [phase,setPhase]=useState(false); const m={uid:'alignment-message',role:'assistant',content:'',isStreaming:true,lastActivityTs:Date.now(),segments:phase?[{type:'thinking',content:'Checking the report.'}]:[],ts:1}; return setPhase(v=>!v)}>Switch state {}}/> - ; } createRoot(document.getElementById('root')).render(); `; -const bundle = await build({stdin:{contents:fixture,resolveDir:process.cwd(),loader:'tsx'},bundle:true,write:false,format:'esm',jsx:'automatic',outfile:'fixture.js',external:['/loader.gif','/loader-done.png'],define:{'import.meta.env':'{}'},loader:{'.css':'css','.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.svg':'dataurl'}}); +const bundle = await build({stdin:{contents:fixture,resolveDir:process.cwd(),loader:'tsx'},bundle:true,write:false,format:'esm',jsx:'automatic',outfile:'fixture.js',define:{'import.meta.env':'{}'},loader:{'.css':'css','.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl','.svg':'dataurl'}}); const js=bundle.outputFiles.find(f=>f.path.endsWith('.js')).text; const css=bundle.outputFiles.find(f=>f.path.endsWith('.css')).text; const server=createServer(async(req,res)=>{ if(req.url==='/fixture.js'){res.setHeader('Content-Type','text/javascript');res.end(js);} else if(req.url==='/fixture.css'){res.setHeader('Content-Type','text/css');res.end(css);} - else if(req.url==='/loader.gif'||req.url==='/loader-done.png'){res.setHeader('Content-Type',req.url.endsWith('gif')?'image/gif':'image/png');res.end(await readFile('public'+req.url));} else{res.setHeader('Content-Type','text/html');res.end('');} }); await new Promise(resolve=>server.listen(0,'127.0.0.1',resolve)); @@ -45,7 +40,7 @@ try{ await page.goto('http://127.0.0.1:'+server.address().port); await page.waitForSelector('#message .jx-turnStatusText'); const measure=selector=>page.locator(selector).evaluate(el=>{ - const row=el.querySelector('.jx-turnStatusRow'),mark=el.querySelector('.jx-agentSlot,.jx-turnStatusMark'),text=el.querySelector('.jx-turnStatusText'); + const row=el.querySelector('.jx-turnStatusRow'),mark=el.querySelector('.jx-agentSlot'),text=el.querySelector('.jx-turnStatusText'); const r=row.getBoundingClientRect(),m=mark.getBoundingClientRect(),t=text.getBoundingClientRect(),s=getComputedStyle(text); return {rowHeight:r.height,markX:m.x-r.x,markY:m.y-r.y,markWidth:m.width,markHeight:m.height,textX:t.x,textY:t.y,textHeight:t.height,fontSize:s.fontSize,fontWeight:s.fontWeight,lineHeight:s.lineHeight}; }); @@ -62,8 +57,6 @@ try{ else assert.equal(after[key],before[key],key); } } - const inline=await measure('#inline'); - for(const key of ['rowHeight','markX','markY','markWidth','markHeight','textHeight','fontSize','fontWeight','lineHeight'])assert.equal(inline[key],before[key],'inline '+key); const text=await page.locator('#message .jx-trs-title').textContent();assert(text.includes('正在思考')); await page.click('#message .jx-trs-head');await page.waitForTimeout(250); await page.click('#message .jx-tcr-header');await page.waitForTimeout(250); @@ -71,5 +64,5 @@ try{ await page.click('#phase');await page.waitForSelector('#message .jx-turnStatus'); } assert.deepEqual(errors,[]); - console.log('PASS: actual MessageBody startup → reasoning positions/sizes match at 0/80/240ms; inline matches; light/dark; 320/736px; disclosure works.'); + console.log('PASS: actual MessageBody startup → reasoning positions/sizes match at 0/80/240ms; light/dark; 320/736px; disclosure works.'); }finally{await browser?.close();await new Promise(resolve=>server.close(resolve));} diff --git a/src/frontend/scripts/test-typography-browser.mjs b/src/frontend/scripts/test-typography-browser.mjs index 9451e991..ab5b0564 100644 --- a/src/frontend/scripts/test-typography-browser.mjs +++ b/src/frontend/scripts/test-typography-browser.mjs @@ -17,8 +17,7 @@ await build({ `, resolveDir: process.cwd(), loader: 'tsx' }, bundle: true, format: 'esm', jsx: 'automatic', define: {'import.meta.env':'{}'}, outfile: resolve(output, 'fixture.js'), loader: { '.woff2': 'dataurl', '.woff': 'dataurl', '.ttf': 'dataurl', '.svg': 'dataurl' }, - external: ['/loader.gif', '/loader-done.png'], -}); + }); const html = ` 新建对话 diff --git a/src/frontend/scripts/test-voice-input-browser.mjs b/src/frontend/scripts/test-voice-input-browser.mjs index ec10dc5c..a4eb1b9e 100644 --- a/src/frontend/scripts/test-voice-input-browser.mjs +++ b/src/frontend/scripts/test-voice-input-browser.mjs @@ -6,7 +6,7 @@ import {resolve} from 'node:path'; import {chromium} from 'playwright'; const output=resolve('node_modules/.tmp/voice-input-browser'); await mkdir(output,{recursive:true}); -await build({entryPoints:['scripts/voice-browser-fixture.tsx'],outfile:resolve(output,'fixture.js'),bundle:true,alias:{'@hugagent/workbench-protocol':resolve('../../packages/workbench-protocol/dist/index.js')},format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},external:['/loader.gif','/loader-done.png'],loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}, +await build({entryPoints:['scripts/voice-browser-fixture.tsx'],outfile:resolve(output,'fixture.js'),bundle:true,alias:{'@hugagent/workbench-protocol':resolve('../../packages/workbench-protocol/dist/index.js')},format:'esm',jsx:'automatic',define:{'import.meta.env':'{}'},loader:{'.woff':'dataurl','.woff2':'dataurl','.ttf':'dataurl'}, plugins:[{name:'worklet-url',setup(b){b.onResolve({filter:/\?url$/},()=>({path:'worklet',namespace:'voice'}));b.onLoad({filter:/.*/,namespace:'voice'},()=>({contents:'export default "/capture.worklet.js"',loader:'js'}));}}]}); // Chromium synthetic device. This fixture never opens a physical microphone. const server=createServer(async(req,res)=>{ diff --git a/src/frontend/scripts/test-workbench-browser.mjs b/src/frontend/scripts/test-workbench-browser.mjs index 7c39ac21..6530b8ca 100644 --- a/src/frontend/scripts/test-workbench-browser.mjs +++ b/src/frontend/scripts/test-workbench-browser.mjs @@ -32,8 +32,7 @@ createRoot(document.getElementById('root')).render(document.querySelector('input[type=password]').value===''); assert.equal(writes.at(-1).values.TOKEN,'new-provider-secret'); const clear=page.getByRole('checkbox').nth(1); - page.once('dialog',dialog=>dialog.dismiss()); - await clear.click();assert.equal(await clear.isChecked(),false); - page.once('dialog',dialog=>dialog.accept()); - await clear.click();assert.equal(await clear.isChecked(),true); + const confirmClear=page.getByRole('dialog').filter({hasText:'确认清除配置项'}); + await clear.click();await confirmClear.getByRole('button',{name:/^取\s?消$/}).click(); + await confirmClear.waitFor({state:'detached'});assert.equal(await clear.isChecked(),false); + await clear.click();await confirmClear.getByRole('button',{name:/^清\s?除$/}).click(); + await confirmClear.waitFor({state:'detached'});assert.equal(await clear.isChecked(),true); await page.getByRole('button',{name:'保存应用配置',exact:true}).click(); await page.waitForFunction(()=>!document.querySelectorAll('input[type=checkbox]')[1].checked); assert.deepEqual(writes.at(-1).clearKeys,['TOKEN']);assert.equal('TOKEN' in writes.at(-1).values,false); diff --git a/src/frontend/scripts/test-workbench-state-browser.mjs b/src/frontend/scripts/test-workbench-state-browser.mjs index 4cc840c8..d22b6c75 100644 --- a/src/frontend/scripts/test-workbench-state-browser.mjs +++ b/src/frontend/scripts/test-workbench-state-browser.mjs @@ -58,12 +58,14 @@ try{ assert.equal(await page.frameLocator('iframe[title="a"]').getByLabel('Draft').inputValue(),'unsaved draft'); assert.equal(await page.locator('#loads').textContent(),'2','Reopen must reuse instance'); await page.getByRole('button',{name:'dirty a',exact:true}).click(); - page.once('dialog',dialog=>dialog.dismiss()); + const discard=page.getByRole('dialog').filter({hasText:'此页面有未保存内容'}); await page.getByRole('button',{name:'open c',exact:true}).click(); + await discard.getByRole('button',{name:'留在此页',exact:true}).click();await discard.waitFor({state:'detached'}); assert.equal(await page.locator('iframe[title="a"]').isVisible(),true); assert.equal(await page.locator('#loads').textContent(),'2'); - page.once('dialog',dialog=>dialog.accept()); - await open('c');await open('d');await open('e'); + await page.getByRole('button',{name:'open c',exact:true}).click(); + await discard.getByRole('button',{name:'放弃更改',exact:true}).click(); + await page.locator('iframe[title="c"]').waitFor({state:'visible'});await open('d');await open('e'); assert.equal(await page.locator('iframe').count(),3); assert.equal(await page.locator('iframe[title="a"]').count(),0); assert.equal(await page.locator('iframe[title="b"]').count(),0); diff --git a/src/frontend/src/api.ts b/src/frontend/src/api.ts index 98246a16..0c397942 100644 --- a/src/frontend/src/api.ts +++ b/src/frontend/src/api.ts @@ -16,7 +16,7 @@ type SiteUpdateEditionFields, type SiteVisibility, } from './editionSiteVisibility'; import { t } from './i18n'; -import type { AutomationNotification,AutomationRun,AutomationTask,Catalog,ChatItem,ChatMessage,ChunkPreviewResult,DesignPickInfo,EvolutionSummary,FileConfirmDecision,FileConfirmInfo,JobBrief,KBChunk,KBIndexMode,KBWikiStatus,MemoryGraphRelation,MemoryItem,MemoryProfile,OntologyAssetKind,OntologyTagOption,PlanProgressState,ReferencableChat,ResourceItem,UserQuestionAnswer,UserQuestionRequest,WikiConfig } from './types'; +import type { AutomationNotification,AutomationRun,AutomationTask,Catalog,ChatItem,ChatMessage,ChunkPreviewResult,CommandTaskBrief,DesignPickInfo,EvolutionSummary,FileConfirmDecision,FileConfirmInfo,JobBrief,KBChunk,KBIndexMode,KBWikiStatus,MemoryGraphRelation,MemoryItem,MemoryProfile,OntologyAssetKind,OntologyTagOption,PlanProgressState,ReferencableChat,ResourceItem,UserQuestionAnswer,UserQuestionRequest,WikiConfig } from './types'; import { createApiResponseError,readErrorMessage } from './utils/apiError'; import { conversationTitle } from './utils/conversationTitle'; import { newOperationId } from './utils/operationId'; @@ -1488,6 +1488,34 @@ export async function getKBDocuments( } } +/** 手机上的连续列表：一次取前 `count` 条（后端单页上限 100，超出时按 100 一页依次取再拼接）。 + * 返回的 page_size 按调用方的「每批条数」回填，调用方据此算总批数。 */ +export async function getKBDocumentsWindow( + kbId: string, + count: number, + batchSize: number, + keyword?: string, +): Promise { + const chunk = Math.min(100, count); + const first = await getKBDocuments(kbId, 1, chunk, keyword); + const items = [...first.items]; + let page = 1; + let hasMore = first.has_more; + while (items.length < count && hasMore) { + page += 1; + const next = await getKBDocuments(kbId, page, chunk, keyword); + items.push(...next.items); + hasMore = next.has_more; + } + return { + ...first, + items: items.slice(0, count), + page: Math.ceil(count / batchSize), + page_size: batchSize, + has_more: first.total > count, + }; +} + export async function getKBDocumentDetail( kbId: string, _documentId: string, @@ -1852,24 +1880,21 @@ export interface OntologySettings { } export async function getOntologySettings(): Promise { - const wrapped = await apiRequest('/v1/ontologies/settings'); - return unwrapData(wrapped); + return { + allowed: false, + ontology_enabled: false, + ontology_pack_ids: [], + available: false, + plugin_import_build_validation_forced: false, + active_packs: [], + }; } -export async function updateOntologySettings(ontologyEnabled: boolean): Promise { - await apiRequest('/v1/ontologies/settings', { - method: 'PATCH', - body: JSON.stringify({ ontology_enabled: ontologyEnabled }), - }); -} +export async function updateOntologySettings(_ontologyEnabled: boolean): Promise {} /** Tags from active Domain Packs that actually trigger workflows for this asset kind. */ -export async function getOntologyTagOptions(assetKind: OntologyAssetKind): Promise { - const wrapped = await apiRequest( - `/v1/ontologies/tags?asset_kind=${encodeURIComponent(assetKind)}`, - ); - const data = unwrapData<{ items?: OntologyTagOption[] }>(wrapped); - return Array.isArray(data.items) ? data.items : []; +export async function getOntologyTagOptions(_assetKind: OntologyAssetKind): Promise { + return []; } // ── Personal API keys ──────────────────────────────────────────────────── @@ -3039,6 +3064,21 @@ export async function cancelJobApi(jobId: string): Promise { await apiRequest(`/v1/jobs/${encodeURIComponent(jobId)}/cancel`, { method: 'POST' }); } +/** Sandbox command tasks of a chat: live ones first, then the latest finished. */ +export async function listChatCommands(chatId: string): Promise { + const res = await apiRequest( + `/v1/commands?chat_id=${encodeURIComponent(chatId)}`, + { headers: chatTargetHeaders(chatId) }, + ); + return unwrapData(res) ?? []; +} + +export async function cancelCommandApi(taskId: string, chatId?: string): Promise { + await apiRequest(`/v1/commands/${encodeURIComponent(taskId)}/cancel`, { + method: 'POST', headers: chatTargetHeaders(chatId), + }); +} + export async function listPlans(target?: 'local'): Promise { const res = await apiRequest('/v1/plans', undefined, target); return unwrapData(res); @@ -4318,8 +4358,7 @@ export async function getMySystemAccess(): Promise { /** Probe: whether the current CE user may manage the instance-wide Domain Packs from Settings. */ export async function getOntologyGovernanceAccess(): Promise { - const wrapped = await apiRequest('/v1/ontologies/governance/access'); - return unwrapData(wrapped); + return { allowed: false, edition: 'ce' }; } export interface ServiceConfigItem { diff --git a/src/frontend/src/components/AppWorkspace.tsx b/src/frontend/src/components/AppWorkspace.tsx index 7c7c2e52..efea088c 100644 --- a/src/frontend/src/components/AppWorkspace.tsx +++ b/src/frontend/src/components/AppWorkspace.tsx @@ -12,6 +12,7 @@ import { useAuthStore } from '../stores/authStore'; import { usePersonalAgentAvailable } from '../personalAgentEdition'; import { CloseOutlined, + EditOutlined, MenuOutlined, } from '@ant-design/icons'; import { @@ -31,6 +32,7 @@ import { useProjectStore } from '../stores/projectStore'; import { resolvePlanModeActive } from '../utils/chatMode'; import { TOPIC_TAG_COLORS } from '../utils/constants'; import { RightSidebarPanel } from './canvas'; +import { RunMonitorRail } from './monitor'; import { PromptHubPanel } from './chat'; import { builtinPages } from '../applicationComposition'; import { WorkbenchPage } from '../workbench/WorkbenchPage'; @@ -44,7 +46,7 @@ import type { useAppController } from '../hooks/useAppController'; import { SlidePanel } from './common/SlidePanel'; import { usePaneOcclusion } from '../hooks/usePaneOcclusion'; import PanelLoadingSkeleton from './common/PanelLoadingSkeleton'; -import { ProjectsSkeleton } from './projects/ProjectSkeletons'; +import { ProjectHeaderSkeleton, ProjectsSkeleton, ProjectWorkspaceRailSkeleton } from './projects/ProjectSkeletons'; const RunTimelinePanel = lazy(() => import('./automation/RunTimelinePanel').then(m => ({ default: m.RunTimelinePanel }))); const ProjectHeader = lazy(() => import('./projects/ProjectHeader')); const ProjectWorkspaceRail = lazy(() => import('./projects/ProjectWorkspaceRail')); @@ -78,6 +80,7 @@ export function AppWorkspace({ state }: { state: ReturnType + {!(chatSurface && isEmptyChat) && ( + + + + )} )} {chatSurface && !isEmptyChat && !canvasOpen && ( @@ -179,6 +192,14 @@ export function AppWorkspace({ state }: { state: ReturnType{chat.businessTopic} )} + + + )} @@ -203,35 +224,40 @@ export function AppWorkspace({ state }: { state: ReturnType - - {/* Unified panel-switch entrance (fade+rise, enter-only to stay responsive); key=panel: - * switching chats within the chat panel does not replay it. One-way entrance - * needs no motion — CSS primitives suffice. */} - navigateTo('/apps/'+encodeURIComponent(key))}/> - - - {overviewProjectId && ( - - )} - {generic ? : - : } - /> - } - - - + {/* The run monitor floats over this column's right edge, so side panels + * opening beside it (run timeline, tool result, prompt hub) narrow the + * column instead of sliding under the rail. */} + + + {/* Unified panel-switch entrance (fade+rise, enter-only to stay responsive); key=panel: + * switching chats within the chat panel does not replay it. One-way entrance + * needs no motion — CSS primitives suffice. */} + navigateTo('/apps/'+encodeURIComponent(key))}/> + + + {overviewProjectId && ( + }> + )} + {generic ? : + : } + /> + } + + + {showRunMonitor && } + {overviewProjectId && !canvasOpen && ( - + }> )} diff --git a/src/frontend/src/components/agent/AgentFormFields.tsx b/src/frontend/src/components/agent/AgentFormFields.tsx index 95472eba..b28a27f1 100644 --- a/src/frontend/src/components/agent/AgentFormFields.tsx +++ b/src/frontend/src/components/agent/AgentFormFields.tsx @@ -11,7 +11,6 @@ import { useAuthStore } from '../../stores'; import { useAgentStore, type AvailableResources } from '../../stores/agentStore'; import { PluginMarketplaceModal } from '../catalog/PluginMarketplaceModal'; import { SkillMarketplaceModal } from '../catalog/SkillMarketplaceModal'; -import { OntologyTagSelect } from '../common/OntologyTagSelect'; import { t } from '../../i18n'; const { TextArea } = Input; @@ -229,17 +228,6 @@ export function AgentFormFields({ availableResources }: AgentFormFieldsProps) { )} - - - - diff --git a/src/frontend/src/components/agent/AgentMarketplaceModal.tsx b/src/frontend/src/components/agent/AgentMarketplaceModal.tsx index 7b4f9230..380f949f 100644 --- a/src/frontend/src/components/agent/AgentMarketplaceModal.tsx +++ b/src/frontend/src/components/agent/AgentMarketplaceModal.tsx @@ -7,11 +7,12 @@ import { AnimatePresence, motion } from 'motion/react'; import { Modal, Input, Tag, Button, Empty, Spin, Typography, Pagination, Tooltip, Popconfirm, Switch, message } from 'antd'; import { SearchOutlined, FireOutlined, CheckOutlined, LeftOutlined, DeleteOutlined, ApiOutlined, ToolOutlined, AppstoreOutlined, EyeOutlined } from '@ant-design/icons'; import { t } from '../../i18n'; +import { useIsMobileViewport } from '../../hooks/useIsMobileViewport'; import type { MarketplaceAgent, MarketplaceAgentDetail, AgentMarketplaceFetchers, MarketVisibilityValue } from '../../types'; import { mdToHtml } from '../../utils/markdown'; import { SPRING, staggerStyle } from '../../utils/motionTokens'; import { getOntologyBuildFailure, type OntologyBuildFailure } from '../../utils/apiError'; -import { OntologyBuildValidationModal, VisibilityScopeModal } from '../common'; +import { OntologyBuildValidationModal, VisibilityScopeModal, ContinuousLoadSentinel } from '../common'; // Sub-agent marketplace modal: browse preset/community sub-agents, view their prompts and capability bindings, and install (clone) them. // The transport (user / admin) is injected via fetchers, reusing the skill marketplace's jx-mk-* styles. const MARKET_PAGE_SIZE = 12; @@ -239,9 +240,11 @@ export function AgentMarketplaceModal({ return `${it.name} ${it.summary} ${(it.tags || []).join(' ')} ${it.author}`.toLowerCase().includes(q); }); }, [items, category, q]); + // 手机上没有页码条：列表从头连续增长，滚到底部再追加（见 ContinuousLoadSentinel）。 + const isMobile = useIsMobileViewport(); const paged = useMemo( - () => filtered.slice((page - 1) * MARKET_PAGE_SIZE, page * MARKET_PAGE_SIZE), - [filtered, page], + () => filtered.slice(isMobile ? 0 : (page - 1) * MARKET_PAGE_SIZE, page * MARKET_PAGE_SIZE), + [filtered, page, isMobile], ); useEffect(() => { const maxPage = Math.max(1, Math.ceil(filtered.length / MARKET_PAGE_SIZE)); @@ -348,7 +351,7 @@ export function AgentMarketplaceModal({ )} {fetchers.setEnabled && } - + {paged.map((agent, idx) => ( void openDetail(agent.slug)}> @@ -384,7 +387,9 @@ export function AgentMarketplaceModal({ {!loading && filtered.length === 0 && ( )} - {filtered.length > MARKET_PAGE_SIZE && ( + {isMobile ? ( + setPage((current) => current + 1)} /> + ) : filtered.length > MARKET_PAGE_SIZE && ( filtered.slice((agentsPage - 1) * AGENTS_PAGE_SIZE, agentsPage * AGENTS_PAGE_SIZE), - [filtered, agentsPage], + () => filtered.slice(isMobile ? 0 : (agentsPage - 1) * AGENTS_PAGE_SIZE, agentsPage * AGENTS_PAGE_SIZE), + [filtered, agentsPage, isMobile], ); // 搜索或数据变化把页码顶出范围时拉回第一页 @@ -405,7 +409,9 @@ export function AgentPanel() { )} - {filtered.length > AGENTS_PAGE_SIZE && ( + {isMobile ? ( + setAgentsPage((current) => current + 1)} /> + ) : filtered.length > AGENTS_PAGE_SIZE && ( s.activePane); const { - isOpen, activeView, artifact, updateArtifact, openSeq, + activeView, artifact, updateArtifact, openSeq, activeTabId, setTabDirty, panelWidth, setPanelWidth, reloadTab, } = useCanvasPane(); const guardDirty = useCanvasGuard(); @@ -89,7 +89,7 @@ export function CanvasPanel() { // Intercept Ctrl+S to prevent browser "Save Page" and trigger xlsx save instead useEffect(() => { - if (!isOpen || activeView !== 'file' || activePane !== paneId) return; + if (activeView !== 'file' || activePane !== paneId) return; const onKeyDown = (e: KeyboardEvent) => { if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') { e.preventDefault(); @@ -99,7 +99,7 @@ export function CanvasPanel() { }; window.addEventListener('keydown', onKeyDown, true); return () => window.removeEventListener('keydown', onKeyDown, true); - }, [activeView, isOpen, activePane, paneId]); + }, [activeView, activePane, paneId]); const handleDragStart = useCallback((e: React.MouseEvent) => { e.preventDefault(); @@ -127,7 +127,7 @@ export function CanvasPanel() { document.addEventListener('mouseup', onUp); }, [resizeWidth]); - if (!isOpen || activeView !== 'file' || !artifact) return null; + if (activeView !== 'file' || !artifact) return null; const fileUrl = artifactUrl(artifact, { params: { v: String(openSeq) } }); const category = getFilePreviewKind(artifact); diff --git a/src/frontend/src/components/canvas/CanvasTabBar.css b/src/frontend/src/components/canvas/CanvasTabBar.css index 79d1176c..3d58ed1e 100644 --- a/src/frontend/src/components/canvas/CanvasTabBar.css +++ b/src/frontend/src/components/canvas/CanvasTabBar.css @@ -20,3 +20,16 @@ .jx-canvasTabs--strip .jx-canvasTabs-action { border-radius: 6px; } .jx-rightSidebar--moduleHeader { position: relative; } .jx-rightSidebar--moduleHeader > .jx-canvasTabs--controls { position: absolute; top: 4px; right: 0; z-index: 3; width: auto; min-height: 0; background: transparent; border: 0; } + +/* Phones: the canvas is a full-screen layer over the chat. Split view and a new + tab strip have no room there; the remaining controls get touch-size hit areas. + A split opened on a wider window keeps its button so it can still be merged + (through the unsaved-changes guard) after the window narrows. */ +@media (max-width: 960px) { + .jx-canvasTabs-split:not([aria-pressed='true']), + .jx-canvasTabs-add { display: none; } + .jx-canvasTabs--strip .jx-canvasTabs-action, + .jx-canvasTabs--controls .jx-canvasTabs-action { width: 40px; height: 40px; min-width: 40px; } + .jx-canvasTabs--strip .jx-canvasTab-close { flex-basis: 32px; width: 32px; height: 32px; font-size: 12px; } + .jx-canvas-fileHeader .jx-canvas-actionBtn { width: 40px; height: 40px; min-width: 40px; } +} diff --git a/src/frontend/src/components/canvas/CanvasTabBar.tsx b/src/frontend/src/components/canvas/CanvasTabBar.tsx index b1a90d68..3fc9ba64 100644 --- a/src/frontend/src/components/canvas/CanvasTabBar.tsx +++ b/src/frontend/src/components/canvas/CanvasTabBar.tsx @@ -13,6 +13,7 @@ import { useCallback, useEffect, useRef } from 'react'; import './CanvasTabBar.css'; import { useCanvasGuard } from './useCanvasGuard'; import { t } from '../../i18n'; +import { useIsMobileViewport } from '../../hooks/useIsMobileViewport'; import { useAgentStore } from '../../stores/agentStore'; import { AgentIcon } from '../agent/AgentIcon'; @@ -25,6 +26,8 @@ export function CanvasTabBar({ controlsOnly = false, onWidthChange }: { } = {}) { const pane = useCanvasPaneId(); const isSplit = useCanvasPane(s => s.isSplit); + // 手机上画布是盖住对话的全屏层：「收起」实际是回到对话，用关闭图标让人认得出来。 + const isMobile = useIsMobileViewport(); const toggleSplit = useCanvasPane(s => s.toggleSplit); const explicitLauncher = useCanvasLauncherStore(s => s.open && s.pane === pane); const showLauncher = useCanvasLauncherStore(s => s.show); @@ -189,10 +192,10 @@ export function CanvasTabBar({ controlsOnly = false, onWidthChange }: { type="button" className="jx-canvasTabs-action" onClick={handleCollapse} - aria-label={t('收起右侧面板')} - title={t('收起右侧面板')} + aria-label={isMobile ? t('返回对话') : t('收起右侧面板')} + title={isMobile ? t('返回对话') : t('收起右侧面板')} > - + {isMobile ? : } } diff --git a/src/frontend/src/components/canvas/CanvasZoomControl.tsx b/src/frontend/src/components/canvas/CanvasZoomControl.tsx index cf37947a..4a2afcd2 100644 --- a/src/frontend/src/components/canvas/CanvasZoomControl.tsx +++ b/src/frontend/src/components/canvas/CanvasZoomControl.tsx @@ -1,8 +1,7 @@ -import { useContext, useEffect, useRef } from 'react'; +import { useEffect, useRef } from 'react'; import { ColumnWidthOutlined, MinusOutlined, PlusOutlined } from '@ant-design/icons'; import { t } from '../../i18n'; -import { useCanvasStore } from '../../stores/canvasStore'; -import { CanvasPaneContext } from './CanvasPaneContext'; +import { useCanvasPane } from './useCanvasPane'; import { clampZoom, resolveZoom, stepZoom, useCanvasZoom, useCanvasZoomable, useCanvasZoomStore, } from './canvasZoom'; @@ -14,8 +13,8 @@ import { * zoom keeps working everywhere else, including the other pane of a split. */ export function CanvasZoomControl() { - const pane = useContext(CanvasPaneContext); - const tabId = useCanvasStore((s) => s.paneTabs[pane]); + // 经 useCanvasPane 取页签：面板退出动画期间保持关闭前的页签，缩放不会中途跳变 + const tabId = useCanvasPane((s) => s.activeTabId); const zoomable = useCanvasZoomable(tabId); const zoom = useCanvasZoom(tabId); const fitScale = useCanvasZoomStore((s) => (tabId ? s.fitScaleByTab[tabId] : undefined)); diff --git a/src/frontend/src/components/canvas/OntologySidebarPanel.tsx b/src/frontend/src/components/canvas/OntologySidebarPanel.tsx deleted file mode 100644 index 4e407052..00000000 --- a/src/frontend/src/components/canvas/OntologySidebarPanel.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { useCanvasPane } from './useCanvasPane'; -import { SafetyCertificateOutlined } from '@ant-design/icons'; -import { useCallback, useEffect, useRef } from 'react'; - -import { t } from '../../i18n'; -import { useChatStore, useUIStore } from '../../stores'; -import { OntologyRevisionPanel } from '../chat/OntologyRevisionPanel'; -import { CanvasTabBar } from './CanvasTabBar'; - -const AUTO_FOLLOW_THRESHOLD = 72; - -export function OntologySidebarPanel() { - const target = useCanvasPane((state) => state.ontologyTarget); - const dispatchProcessVisible = useUIStore((state) => state.dispatchProcessVisible); - const message = useChatStore((state) => { - if (!target) return undefined; - return state.store.chats[target.chatId]?.messages.find((item) => item.uid === target.messageUid); - }); - const bodyRef = useRef(null); - const userScrolledUpRef = useRef(false); - - const handleScroll = useCallback(() => { - const body = bodyRef.current; - if (!body) return; - const distanceFromBottom = body.scrollHeight - body.scrollTop - body.clientHeight; - userScrolledUpRef.current = distanceFromBottom > AUTO_FOLLOW_THRESHOLD; - }, []); - - const revisionContent = message?.ontologyGovernance?.revision?.content; - const streamFingerprint = [ - message?.lastActivityTs || 0, - typeof revisionContent === 'string' ? revisionContent.length : 0, - message?.ontologyGovernance?.review?.status || '', - ].join(':'); - - useEffect(() => { - userScrolledUpRef.current = false; - }, [target?.chatId, target?.messageUid]); - - useEffect(() => { - const body = bodyRef.current; - if (!body || userScrolledUpRef.current) return; - const frame = requestAnimationFrame(() => { - body.scrollTop = body.scrollHeight; - }); - return () => cancelAnimationFrame(frame); - }, [streamFingerprint]); - - return ( - - ); -} diff --git a/src/frontend/src/components/canvas/RightSidebarPanel.tsx b/src/frontend/src/components/canvas/RightSidebarPanel.tsx index cf7f0340..69257073 100644 --- a/src/frontend/src/components/canvas/RightSidebarPanel.tsx +++ b/src/frontend/src/components/canvas/RightSidebarPanel.tsx @@ -6,7 +6,6 @@ import { useCanvasPaneId } from './useCanvasPane'; import './CanvasSplit.css'; import { CanvasLauncher } from './CanvasLauncher'; import { useCanvasLauncherStore } from './canvasLauncherStore'; -import { InsertRowRightOutlined } from '@ant-design/icons'; import { t } from '../../i18n'; @@ -14,12 +13,12 @@ import { ContentErrorBoundary } from '../common'; import { SubagentSidebarPanel } from './SubagentSidebarPanel'; import { CanvasPanel } from './CanvasPanel'; import { CanvasTabBar } from './CanvasTabBar'; -import { OntologySidebarPanel } from './OntologySidebarPanel'; import { PluginCanvasPanel } from './PluginCanvasPanel'; import { canvasRenderer } from './customCanvasRegistry'; export function RightSidebarPanel() { - const isSplit = useCanvasStore(s => s.isSplit); + // 走 useCanvasPane：退出动画期间保持分屏形态，不在收起时先塌成单栏 + const isSplit = useCanvasPane(s => s.isSplit); const focusPane = useCanvasStore(s => s.focusPane); const root = useRef(null); const cleanup = useRef<(() => void) | null>(null); @@ -99,7 +98,6 @@ function SidebarContent() { const activeView = useCanvasPane((state) => state.activeView); const artifact = useCanvasPane((state) => state.artifact); const activeTabId = useCanvasPane((state) => state.activeTabId); - const ontologyTarget = useCanvasPane((state) => state.ontologyTarget); // key=页签 id：切换页签必须换一份面板实例，否则上一份的预览状态（xlsx 编辑缓冲、 // 画布视口、加载中的 blob）会漏到新页签上。 @@ -123,37 +121,8 @@ function SidebarContent() { if (activeView === 'custom') return ; // No evolution view: what a turn learned is now shown, and edited, inline on // the card itself. A side panel could only restate it one click further away. - if (activeView === 'ontology') { - return ( - - - - {t('本体校验结果暂时无法显示')} - {t('当前会话仍可继续使用，请稍后重新打开结果。')} - - - )} - > - - - ); - } - - return ( - - ); + // 没有页签（activeView === 'empty'）时 CanvasPane 一定盖着启动页，这里无需兜底内容 + return null; } function CustomCanvasPanel() { diff --git a/src/frontend/src/components/canvas/SubagentSidebarPanel.tsx b/src/frontend/src/components/canvas/SubagentSidebarPanel.tsx index f1cd8244..272e129a 100644 --- a/src/frontend/src/components/canvas/SubagentSidebarPanel.tsx +++ b/src/frontend/src/components/canvas/SubagentSidebarPanel.tsx @@ -2,7 +2,7 @@ import { useCanvasPane } from './useCanvasPane'; import { useCallback, useEffect, useRef, useState } from 'react'; import { getToolCallResult } from '../../api'; import { t } from '../../i18n'; -import { useChatStore, useUIStore } from '../../stores'; +import { useChatStore } from '../../stores'; import type { SubagentPanelTarget } from '../../stores/canvasStore'; import type { ChatMessage, ToolCall } from '../../types'; import { subagentDisplayText, subagentStatus } from '../../utils/subagentView'; @@ -11,9 +11,7 @@ import { CitationMarkdownBlock } from '../citation'; import { ElapsedTimer } from '../common'; import { SubagentStatus } from '../tool/SubagentCallRow'; import { useSubagentIdentity } from '../../hooks/useSubagentIdentity'; -import { ThinkingInline } from '../chat/ThinkingInline'; import { ToolRunShell } from '../tool/ToolRunShell'; -import { ToolProgressInline } from '../tool/ToolProgressInline'; import { groupExecutionRuns } from '../../utils/executionRuns'; import { ToolMessageContext } from '../tool/ToolMessageContext'; import { CanvasTabBar } from './CanvasTabBar'; @@ -41,6 +39,7 @@ function SubagentDetail({ target, message, tool }: { target: SubagentPanelTarget const following = useRef(true); const [loading, setLoading] = useState(false); const [failed, setFailed] = useState(false); + const [scrolled, setScrolled] = useState(false); // Text already streamed before the panel opened is shown at once; only later deltas fade in. const [revealSnapshot] = useState(() => Date.now()); const applyOutput = useChatStore((state) => state.applyToolCallOutput); @@ -65,7 +64,6 @@ function SubagentDetail({ target, message, tool }: { target: SubagentPanelTarget return () => cancelAnimationFrame(frame); }, [tool, running]); - const dispatchProcessVisible = useUIStore((state) => state.dispatchProcessVisible); const transcript: ChatMessage = { ...message, uid: `${message.uid}:${tool.id}`, ts: tool.timestamp ?? message.ts, isStreaming: running, toolCalls: [], segments: [], content: '', isMarkdown: true, @@ -87,31 +85,31 @@ function SubagentDetail({ target, message, tool }: { target: SubagentPanelTarget if (last?.type === 'text' && last.content?.trim() && result.includes(last.content.trim())) last.content = result; else transcript.segments!.push({ type: 'text', content: result }); } - const { runs, suppressedIdx } = groupExecutionRuns(transcript, dispatchProcessVisible); + const { runs, suppressedIdx } = groupExecutionRuns(transcript); const runByAnchor = new Map(runs.map((run) => [run.anchor, run])); return ( { const element = body.current; - if (element) following.current = element.scrollHeight - element.scrollTop - element.clientHeight < 72; + if (!element) return; + following.current = element.scrollHeight - element.scrollTop - element.clientHeight < 72; + setScrolled(element.scrollTop > 0); }}> - - + + {agent.name} - - {running && tool.timestamp ? : null} - {!running && tool.durationMs != null ? {t('用时 {sec}秒', { sec: (tool.durationMs / 1000).toFixed(1) })} : null} + + + {running && tool.timestamp ? : null} + {!running && tool.durationMs != null ? {t('用时 {sec}秒', { sec: (tool.durationMs / 1000).toFixed(1) })} : null} + {transcript.segments!.map((segment, index) => { const key = `${transcript.uid}:${index}`; const run = runByAnchor.get(index); - if (run) return dispatchProcessVisible - ? - : ; + if (run) return ; if (suppressedIdx.has(index)) return null; - if (segment.type === 'thinking') return item.type === 'text')} />; if (segment.type !== 'text' || !segment.content) return null; return s.paneTabs[pane]); + // 经 useCanvasPane 取页签：面板退出动画期间保持关闭前的页签，缩放不会中途跳变 + const tabId = useCanvasPane((s) => s.activeTabId); const zoom = useCanvasZoom(tabId); useEffect(() => { if (!enabled || !tabId) return; diff --git a/src/frontend/src/components/canvas/useCanvasPane.ts b/src/frontend/src/components/canvas/useCanvasPane.ts index 24b3ceed..ba96d6e8 100644 --- a/src/frontend/src/components/canvas/useCanvasPane.ts +++ b/src/frontend/src/components/canvas/useCanvasPane.ts @@ -1,5 +1,5 @@ import { useContext, useMemo } from 'react'; -import { derive, useCanvasStore, type CanvasState } from '../../stores/canvasStore'; +import { derive, useCanvasStore, useCanvasViewStore, type CanvasState } from '../../stores/canvasStore'; import { CanvasPaneContext } from './CanvasPaneContext'; export function useCanvasPaneId() { return useContext(CanvasPaneContext); } @@ -7,7 +7,7 @@ export function useCanvasPaneId() { return useContext(CanvasPaneContext); } /** Project the shared tabs into the pane that owns this mounted content. */ export function useCanvasPane(selector?: (state: CanvasState) => T): T { const pane = useCanvasPaneId(); - const state = useCanvasStore(); + const state = useCanvasViewStore(); const tabId = state.paneTabs[pane]; const actions = useMemo(() => ({ activateTab: (id: string) => useCanvasStore.getState().activateTab(id, pane), diff --git a/src/frontend/src/components/catalog/CatalogPanel.tsx b/src/frontend/src/components/catalog/CatalogPanel.tsx index 1828139f..2128cf3d 100644 --- a/src/frontend/src/components/catalog/CatalogPanel.tsx +++ b/src/frontend/src/components/catalog/CatalogPanel.tsx @@ -30,6 +30,7 @@ getKBChunkChildren, getKBChunks, getKBDocumentDetail, getKBDocuments, +getKBDocumentsWindow, getKBWikiStatus, getWikiCapability, getWikiStats, @@ -41,6 +42,7 @@ updateKBSpace, uploadKBDocument, } from '../../api'; import { useChunkChildrenExpander } from '../../hooks/useChunkChildrenExpander'; +import { useIsMobileViewport } from '../../hooks/useIsMobileViewport'; import { useStatusFlash } from '../../hooks/useFlash'; import { t } from '../../i18n'; import { useKbTab } from '../../routing/subPages'; @@ -54,6 +56,7 @@ import { EASE,staggerStyle } from '../../utils/motionTokens'; import { parseSeparators } from '../../utils/separators'; import { KBChunkImages,WikiPanel } from '../kb'; import IndexModePicker from '../kb/IndexModePicker'; +import { ContinuousLoadSentinel } from '../common'; type KBTabKey = 'public' | 'private'; @@ -304,6 +307,15 @@ export function CatalogPanel() { return () => window.clearTimeout(timer); }, [kbDocQuery]); const [kbDocTotal, setKbDocTotal] = useState(0); + // 手机上文档列表不分页：kbDocPage 表示「已加载几批」，每次取前 kbDocPage × 20 条， + // 滚到底再加一批；5 秒轮询也按同一个窗口刷新，状态变化不会丢在已滚过的部分。 + const isMobile = useIsMobileViewport(); + const fetchKbDocuments = useCallback( + (kbId: string, page: number, keyword?: string) => (isMobile + ? getKBDocumentsWindow(kbId, page * KB_DOC_PAGE_SIZE, KB_DOC_PAGE_SIZE, keyword) + : getKBDocuments(kbId, page, KB_DOC_PAGE_SIZE, keyword)), + [isMobile], + ); const [kbDocStatusCounts, setKbDocStatusCounts] = useState(EMPTY_DOC_STATUS_COUNTS); const [docStatusFilter, setDocStatusFilter] = useState('all'); const [kbEditorOpen, setKbEditorOpen] = useState(false); @@ -504,10 +516,12 @@ export function CatalogPanel() { useEffect(() => { if (!selectedId) return; const kbId = selectedId; - setKbDocsLoadingId(kbId); + // 手机上追加下一批时保留已显示的列表，不切回加载态（否则滚动位置会被重置） + const appending = isMobile && kbDocPage > 1; + if (!appending) setKbDocsLoadingId(kbId); void (async () => { try { - const result: KBDocumentsResponse = await getKBDocuments(kbId, kbDocPage, KB_DOC_PAGE_SIZE, kbDocSearch); + const result: KBDocumentsResponse = await fetchKbDocuments(kbId, kbDocPage, kbDocSearch); const totalPages = result.total > 0 ? Math.ceil(result.total / result.page_size) : 0; if (result.total > 0 && totalPages > 0 && kbDocPage > totalPages) { setKbDocPage(totalPages); @@ -517,10 +531,10 @@ export function CatalogPanel() { } catch { applyDocumentsResult(kbId, [], 0, EMPTY_DOC_STATUS_COUNTS); } finally { - setKbDocsLoadingId(null); + if (!appending) setKbDocsLoadingId(null); } })(); - }, [selectedId, kbDocPage, kbDocSearch, applyDocumentsResult, setKbDocsLoadingId]); + }, [selectedId, kbDocPage, kbDocSearch, applyDocumentsResult, setKbDocsLoadingId, isMobile, fetchKbDocuments]); const filteredLibraries = useMemo(() => { const query = manageQuery.trim().toLowerCase(); @@ -564,14 +578,14 @@ export function CatalogPanel() { const currentPage = kbDocPage; const timer = window.setInterval(async () => { try { - const result = await getKBDocuments(kbId, currentPage, KB_DOC_PAGE_SIZE, kbDocSearch); + const result = await fetchKbDocuments(kbId, currentPage, kbDocSearch); applyDocumentsResult(kbId, result.items, result.total, result.status_counts); } catch (err) { console.warn('KB 文档轮询失败', err); } }, 5000); return () => window.clearInterval(timer); - }, [selectedId, kbDocPage, kbDocSearch, hasProcessingDoc, applyDocumentsResult]); + }, [selectedId, kbDocPage, kbDocSearch, hasProcessingDoc, applyDocumentsResult, fetchKbDocuments]); const filteredDocuments = useMemo(() => { const query = kbDocQuery.trim().toLowerCase(); @@ -732,7 +746,7 @@ export function CatalogPanel() { if (!selectedItem || kbDocsLoadingId === selectedItem.id) return; setKbDocsLoadingId(selectedItem.id); try { - const result = await getKBDocuments(selectedItem.id, kbDocPage, KB_DOC_PAGE_SIZE); + const result = await fetchKbDocuments(selectedItem.id, kbDocPage); applyDocumentsResult(selectedItem.id, result.items, result.total, result.status_counts); await refreshCatalog(); } catch (err: any) { @@ -1329,7 +1343,10 @@ export function CatalogPanel() { )} - {!kbDocsLoadingId && currentDocCount > 0 && ( + {isMobile ? ( + = kbDocPage * KB_DOC_PAGE_SIZE} + count={documents.length} onMore={() => setKbDocPage((current) => current + 1)} /> + ) : !kbDocsLoadingId && currentDocCount > 0 && ( filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE), - [filtered, page], + () => filtered.slice(isMobile ? 0 : (page - 1) * PAGE_SIZE, page * PAGE_SIZE), + [filtered, page, isMobile], ); useEffect(() => setPage(1), [query, category]); @@ -342,7 +346,9 @@ export function McpMarketplaceModal({ open, canInstall, onClose, onInstalled }: ))} )} - {filtered.length > PAGE_SIZE && ( + {isMobile ? ( + setPage((current) => current + 1)} /> + ) : filtered.length > PAGE_SIZE && ( filteredItems.slice((page - 1) * MCP_PAGE_SIZE, page * MCP_PAGE_SIZE), - [filteredItems, page], + () => filteredItems.slice(isMobile ? 0 : (page - 1) * MCP_PAGE_SIZE, page * MCP_PAGE_SIZE), + [filteredItems, page, isMobile], ); // Return to the first page when the keyword changes @@ -274,7 +278,7 @@ export function McpPage() { {pagedItems.map((item, idx) => ( )} - {filteredItems.length > MCP_PAGE_SIZE && ( + {isMobile ? ( + setPage((current) => current + 1)} /> + ) : filteredItems.length > MCP_PAGE_SIZE && ( ([]); - const [loading, setLoading] = useState(false); + const [loaded, setLoaded] = useState(false); + const [loadError, setLoadError] = useState(''); const [busySlug, setBusySlug] = useState(null); const [secretPlugin, setSecretPlugin] = useState(null); const [secretForm] = Form.useForm(); const load = useCallback(async () => { - setLoading(true); + setLoadError(''); try { setItems(await listPlugins()); + setLoaded(true); } catch (error) { - message.error((error as Error).message || t('加载插件失败')); - } finally { - setLoading(false); + setLoadError((error as Error).message || t('加载失败')); } }, []); @@ -118,10 +119,25 @@ export function PluginMarketplaceModal({ {scopeLabel} )} - - {availableItems.length === 0 ? ( + {loadError && !loaded ? ( + void load()} /> + ) : !loaded ? ( + + {Array.from({ length: 4 }, (_, index) => ( + + + + + + + + + + ))} + + ) : availableItems.length === 0 ? ( ) : ( @@ -157,7 +173,6 @@ export function PluginMarketplaceModal({ ))} )} - }) { - const { handwriteOpen, setHandwriteOpen, creatingSkill, editingSkillId, setEditingSkillId, loadingSkill, skillIcon, setSkillIcon, skillForm, ontologyTagOptions, ontologyTagsLoading, buildFailure, setBuildFailure, skillMcpOptions, skillFiles, editingFileName, setEditingFileName, editingFileContent, setEditingFileContent, fileLoading, fileSaving, newSkillFileName, setNewSkillFileName, skillFileInputRef, resetSkillFileState, openSkillFile, handleSaveSkillFile, handleDeleteSkillFile, handleUploadSkillFile, handleCreateSkillFile, handleCreateSkill } = editor; + const { handwriteOpen, setHandwriteOpen, creatingSkill, editingSkillId, setEditingSkillId, loadingSkill, skillIcon, setSkillIcon, skillForm, buildFailure, setBuildFailure, skillMcpOptions, skillFiles, editingFileName, setEditingFileName, editingFileContent, setEditingFileContent, fileLoading, fileSaving, newSkillFileName, setNewSkillFileName, skillFileInputRef, resetSkillFileState, openSkillFile, handleSaveSkillFile, handleDeleteSkillFile, handleUploadSkillFile, handleCreateSkillFile, handleCreateSkill } = editor; return <> {/* Hand-write new / edit skill modal */} - - - ; @@ -221,9 +222,11 @@ export function SkillMarketplaceModal({ return `${it.display_name} ${it.summary} ${it.tags.join(' ')} ${it.author}`.toLowerCase().includes(q); }); }, [items, category, q]); + // 手机上没有页码条：列表从头连续增长，滚到底部再追加（见 ContinuousLoadSentinel）。 + const isMobile = useIsMobileViewport(); const paged = useMemo( - () => filtered.slice((page - 1) * MARKET_PAGE_SIZE, page * MARKET_PAGE_SIZE), - [filtered, page], + () => filtered.slice(isMobile ? 0 : (page - 1) * MARKET_PAGE_SIZE, page * MARKET_PAGE_SIZE), + [filtered, page, isMobile], ); // Pull back to the first page when data changes push the page number out of range useEffect(() => { @@ -412,7 +415,7 @@ export function SkillMarketplaceModal({ {paged.map((skill, idx) => ( )} - {filtered.length > MARKET_PAGE_SIZE && ( + {isMobile ? ( + setPage((current) => current + 1)} /> + ) : filtered.length > MARKET_PAGE_SIZE && ( filteredSkills.slice((skillsPage - 1) * SKILLS_PAGE_SIZE, skillsPage * SKILLS_PAGE_SIZE), - [filteredSkills, skillsPage], + () => filteredSkills.slice(isMobile ? 0 : (skillsPage - 1) * SKILLS_PAGE_SIZE, skillsPage * SKILLS_PAGE_SIZE), + [filteredSkills, skillsPage, isMobile], ); const pagedAgents = useMemo( - () => filteredAgents.slice((agentsPage - 1) * SKILLS_PAGE_SIZE, agentsPage * SKILLS_PAGE_SIZE), - [filteredAgents, agentsPage], + () => filteredAgents.slice(isMobile ? 0 : (agentsPage - 1) * SKILLS_PAGE_SIZE, agentsPage * SKILLS_PAGE_SIZE), + [filteredAgents, agentsPage, isMobile], ); // Pull back to the first page when search or data changes push the page number out of range @@ -232,7 +236,7 @@ export function SkillsPage() { {pagedSkills.map((item, idx) => ( )} - {filteredSkills.length > SKILLS_PAGE_SIZE && ( + {isMobile ? ( + setSkillsPage((current) => current + 1)} /> + ) : filteredSkills.length > SKILLS_PAGE_SIZE && ( {pagedAgents.map((item, idx) => ( - {filteredAgents.length > SKILLS_PAGE_SIZE && ( + {isMobile ? ( + setAgentsPage((current) => current + 1)} /> + ) : filteredAgents.length > SKILLS_PAGE_SIZE && ( ('15d'); + // The footer floats over the history viewport so the scroller (and its + // scrollbar) runs to the pane's bottom edge; the list keeps its height clear. + const chatWrapRef = useRef(null); + const [footerEl, setFooterEl] = useState(null); + useEffect(() => { + const wrap = chatWrapRef.current; + if (!footerEl || !wrap || typeof ResizeObserver === 'undefined') return; + const sync = () => wrap.style.setProperty('--jx-chat-footer-h', `${footerEl.offsetHeight}px`); + sync(); + const ro = new ResizeObserver(sync); + ro.observe(footerEl); + return () => ro.disconnect(); + }, [footerEl]); const chat = store.chats[currentChatId]; useChatResultRead(currentChatId, chat?.messages || [], viewportEl, isPaneHidden || !!publicChat); @@ -307,7 +320,7 @@ export function ChatArea({ }; return ( - + - + {!planMode && } {/* 后台作业状态条：工作流模式下作业跑在后台，没有它就完全看不出在不在跑 */} {!publicChat && } diff --git a/src/frontend/src/components/chat/ComposerAttachmentMenu.tsx b/src/frontend/src/components/chat/ComposerAttachmentMenu.tsx index 0ec982eb..21a5d4cb 100644 --- a/src/frontend/src/components/chat/ComposerAttachmentMenu.tsx +++ b/src/frontend/src/components/chat/ComposerAttachmentMenu.tsx @@ -1,4 +1,7 @@ +import { useRef, useState } from 'react'; import { Dropdown } from 'antd'; +import type { MenuProps } from 'antd'; +import { LeftOutlined, RightOutlined } from '@ant-design/icons'; import { FileImageOutlined, FileTextOutlined, CloudDownloadOutlined, AppstoreOutlined, RobotOutlined, OrderedListOutlined, ApiOutlined, SyncOutlined, PartitionOutlined, LinkOutlined } from '@ant-design/icons'; import { MySpaceImportModal } from '../file'; @@ -8,6 +11,7 @@ import { McpIcon } from '../catalog/McpIcon'; import { PluginAvatar } from '../catalog/PluginIconPicker'; import { IconPlus } from '../common/DshIcons'; import { t } from '../../i18n'; +import { useIsMobileViewport } from '../../hooks/useIsMobileViewport'; import type { InputAreaProps, ComposerOptions } from './composerTypes'; import type { ComposerState } from './useComposerState'; import type { ComposerEditor } from './useComposerEditor'; @@ -22,6 +26,10 @@ export function ComposerAttachmentMenu({ state, editor, options, fileInputRef }: setMySpaceImportOpen, setAttachOpen, fetchAgents, attachOpen, mySpaceImportOpen, } = state; const { onPickAgentFromMenu, onPickSkillFromMenu, onPickConnectorFromMenu, onPickPluginFromMenu } = editor; + const isMobile = useIsMobileViewport(); + // 手机上不弹侧向级联子菜单（会飞出屏幕左缘），改为在同一个菜单里逐层进入。 + const [mobileSub, setMobileSub] = useState(null); + const keepOpenRef = useRef(false); const planActive = isModeOn('plan'); const workflowActive = isModeOn('workflow'); const activeSuffix = t('（已开启）'); @@ -42,7 +50,7 @@ export function ComposerAttachmentMenu({ state, editor, options, fileInputRef }: onClick: () => onEnterMode('workflow'), }, ]; - const items = [ + const items: NonNullable = [ { key: 'image', icon: , @@ -145,18 +153,49 @@ export function ComposerAttachmentMenu({ state, editor, options, fileInputRef }: }, ]), ]; + const mobileItems = (): NonNullable => { + const parent = items.find((it) => it && it.key === mobileSub && 'children' in it); + if (parent && 'children' in parent && parent.children) { + return [ + { + key: 'mobile-back', + icon: , + label: parent.label, + className: 'jx-attachMenu-back', + onClick: () => { keepOpenRef.current = true; setMobileSub(null); }, + }, + { type: 'divider' as const }, + ...parent.children, + ]; + } + return items.map((it) => { + if (!it || !('children' in it) || !it.children || it.key == null) return it; + return { + key: it.key, + icon: 'icon' in it ? it.icon : undefined, + label: it.label, + extra: , + onClick: () => { keepOpenRef.current = true; setMobileSub(String(it.key)); }, + }; + }); + }; return ( <> { + overlayClassName={`jx-attachMenu${isMobile ? ' jx-attachMenu--mobile' : ''}`} + open={attachOpen} + onOpenChange={(open, info) => { + if (!open && info?.source === 'menu' && keepOpenRef.current) { + keepOpenRef.current = false; + return; + } setAttachOpen(open); - if (!open) return; + if (!open) { setMobileSub(null); return; } if (!disableMention && agents.length === 0) void fetchAgents(); }} - menu={{ items }} + menu={{ items: isMobile ? mobileItems() : items }} > = 0.85) return 'high'; - if (ratio >= 0.6) return 'warn'; - return 'ok'; -} - -// Category → display label + accent colour (aligned with design tokens). -const CATEGORIES: Array<{ key: keyof ContextBreakdown; label: string; color: string }> = [ - { key: 'messages', label: '对话消息', color: 'var(--color-primary)' }, - { key: 'tools', label: '工具调用', color: 'var(--color-tint-purple)' }, - { key: 'thinking', label: '思考过程', color: 'var(--color-success)' }, - { key: 'files', label: '文件', color: 'var(--color-warning)' }, - { key: 'input', label: '当前输入', color: 'var(--color-tint-green)' }, - { key: 'system', label: '系统提示词与工具定义', color: 'var(--color-text-tertiary)' }, -]; - interface GaugeContentProps { breakdown: ContextBreakdown; window: number; @@ -43,7 +17,7 @@ interface GaugeContentProps { function GaugeContent({ breakdown, window, ratio, modelName, note }: GaugeContentProps) { const pct = Math.round(ratio * 100); - const rows = CATEGORIES + const rows = CONTEXT_CATEGORIES .map((c) => ({ ...c, value: breakdown[c.key] as number })) .filter((r) => r.value > 0); @@ -98,77 +72,9 @@ function GaugeContent({ breakdown, window, ratio, modelName, note }: GaugeConten * upstream total; only unsent input and explicit fallback states are estimated. */ export function ContextGauge({ draftKey }: { draftKey?: string } = {}) { - const currentChatId = useChatStore((s) => s.currentChatId); - const messages = useChatStore((s) => (s.currentChatId ? s.store.chats[s.currentChatId]?.messages : undefined)); - const compaction = useChatStore((s) => ( - s.currentChatId ? s.contextCompactions[s.currentChatId] : undefined - )); - const contextUsage = useChatStore((s) => ( - s.currentChatId ? s.contextUsages[s.currentChatId] : undefined - )); - const { input: draft, uploadedFiles, importedSpaceFiles } = useComposerDraft(draftKey ?? chatDraftKey(currentChatId)); - - const model = useModelCapabilitiesStore((s) => { - const models = s.capabilities.user_selectable_models; - if (!s.capabilities.user_model_switch_enabled || !models.length) return undefined; - return ( - models.find((m) => m.provider_id === s.selectedModelProviderId) - || models.find((m) => m.is_default) - || models[0] - ); - }); - // Backend-provided real main-model window, used when switching is disabled. - const mainContextLength = useModelCapabilitiesStore((s) => s.capabilities.main_context_length || 0); - const attachmentPreviewChars = useModelCapabilitiesStore( - (s) => s.capabilities.attachment_preview_chars || 0, - ); - - const stagedFiles = useMemo( - () => [ - ...uploadedFiles.map((f) => ({ name: f.name, type: f.type, size: f.size })), - ...importedSpaceFiles.map((f) => ({ name: f.name, type: f.mime_type })), - ], - [uploadedFiles, importedSpaceFiles], - ); - - const configuredWindow = model ? model.context_length : mainContextLength; - const snapshotMatchesModel = (!model || !contextUsage?.modelProviderId - || model.provider_id === contextUsage.modelProviderId) - && (!configuredWindow || !contextUsage?.contextWindow || configuredWindow === contextUsage.contextWindow); - const window = snapshotMatchesModel && contextUsage?.contextWindow - ? contextUsage.contextWindow - : getContextWindow(model, model ? 0 : mainContextLength); - - const breakdown = useMemo( - () => contextUsage - ? combineContextUsage(contextUsage, { draft, stagedFiles, attachmentPreviewChars }) - : computeContextBreakdown(messages, { - draft, - stagedFiles, - attachmentPreviewChars, - compaction, - }), - [contextUsage, messages, draft, stagedFiles, attachmentPreviewChars, compaction], - ); - - const hasContent = (messages?.length || 0) > 0 || !!draft.trim() || uploadedFiles.length > 0 || importedSpaceFiles.length > 0; - if (!currentChatId || !hasContent) return null; - - const ratio = breakdown.total / window; - const level = levelOf(ratio); - const pct = Math.round(ratio * 100); - const hasPendingInput = !!draft.trim() || stagedFiles.length > 0; - const note = contextUsage && !snapshotMatchesModel - ? '已切换模型；占用沿用上一模型快照，下一次调用后重新校准' - : contextUsage?.exact - ? hasPendingInput - ? '已发送内容为上游实测；当前输入与待发送文件为预估' - : '总数为上游 usage 实测；分类按后端最终请求清单归一' - : contextUsage?.source === 'compaction_estimate' - ? '压缩后基线由后端估算；下一次模型调用后按上游 usage 校准' - : contextUsage - ? '供应商未返回 usage，当前为后端最终请求估算' - : '暂无上游实测快照，仅估算当前可见内容；下一次模型调用后校准'; + const view = useContextUsageView(draftKey); + if (!view) return null; + const { breakdown, window, ratio, level, pct, note, modelName } = view; return ( )} diff --git a/src/frontend/src/components/chat/DeliveredFiles.css b/src/frontend/src/components/chat/DeliveredFiles.css index 4f918d88..483e623d 100644 --- a/src/frontend/src/components/chat/DeliveredFiles.css +++ b/src/frontend/src/components/chat/DeliveredFiles.css @@ -54,3 +54,9 @@ .hg-delivery-type-pdf { color: var(--delivery-icon-pdf); } .hg-delivery-type-ppt { color: var(--delivery-icon-ppt); } .hg-delivery-type-word { color: var(--delivery-icon-word); } + +/* Touch: the 24px download pill and 10px caption are below the touch/readability floor. */ +@media (max-width: 960px) { + .hg-delivery-download { height: 36px; padding-inline: 12px; font-size: 13px; } + .hg-delivery-description { font-size: 12px; } +} diff --git a/src/frontend/src/components/chat/MessageBody.tsx b/src/frontend/src/components/chat/MessageBody.tsx index fc0ec842..4b88860c 100644 --- a/src/frontend/src/components/chat/MessageBody.tsx +++ b/src/frontend/src/components/chat/MessageBody.tsx @@ -1,13 +1,9 @@ -import React, { useCallback, type ReactNode } from 'react'; +import { useCallback, type ReactNode } from 'react'; import { BulbOutlined, BulbFilled, DownOutlined, CheckCircleFilled } from '@ant-design/icons'; import { useConversationCitations } from '../../hooks/useConversationCitations'; import { groupExecutionRuns } from '../../utils/executionRuns'; import { isForkedHistory } from '../../utils/forkHistory'; import { ToolRunShell } from '../tool/ToolRunShell'; -import { ToolProgressInline } from '../tool/ToolProgressInline'; -import { anyToolRunning } from '../tool/renderers/utils'; -import { ThinkingInline } from './ThinkingInline'; -import { StreamWaitIndicator } from './StreamWaitIndicator'; import { TurnStatusIndicator } from './TurnStatusIndicator'; import { AgentCursor } from './AgentCursor'; import type { AgentMarkState } from '../common/AgentMark'; @@ -16,7 +12,7 @@ import { PlanCard } from './PlanCard'; import { MessageInheritedPlan } from './MessageInheritedPlan'; import { UserMarkdownBlock } from './UserMarkdownBlock'; import { CitationMarkdownBlock } from '../citation'; -import { useChatStore, useUIStore } from '../../stores'; +import { useChatStore } from '../../stores'; import { updatePlanApi } from '../../api'; import { quoteSourceLabel } from '../../utils/quotedFollowUp'; import { markPlanDecision } from '../../hooks/usePlanMode'; @@ -27,18 +23,15 @@ import type { ChatMessage } from '../../types'; import { t } from '../../i18n'; interface MessageBodyProps { m: ChatMessage; - showProcess?: boolean; messageIndex: number; currentChatId: string; send: (text?: string) => void; } -export function MessageBody({ m, messageIndex, currentChatId, send, showProcess }: MessageBodyProps) { +export function MessageBody({ m, messageIndex, currentChatId, send }: MessageBodyProps) { const handleCitationAction = useMessageCitation(m); const expandedThinking = useChatStore((s) => s.expandedThinking); const toggleThinking = useChatStore((s) => s.toggleThinking); const chatMode = useChatStore((s) => s.chatMode); - const processPreference = useUIStore((s) => s.dispatchProcessVisible); - const dispatchProcessVisible = showProcess ?? processPreference; const conversationCitations = useConversationCitations(currentChatId, m, messageIndex); // 视觉桥正在读图（模型还没开口）→ 轮级状态换成「图像理解中」，别让这几秒看起来 // 像模型在发呆。识图结束由 chatStream 清空。 @@ -88,11 +81,11 @@ export function MessageBody({ m, messageIndex, currentChatId, send, showProcess const settledTools = (m.toolCalls || []).filter((tool) => tool.status && tool.status !== 'running').length; const activity = useActivityAge( `${stallSignature}|${settledTools}`, - !!m.isStreaming && dispatchProcessVisible, + !!m.isStreaming, ACTIVITY_THRESHOLDS, ); - /** Render a settled thinking block. Live thinking is rendered by ThinkingInline. */ + /** Render a settled thinking block (legacy, non-segmented messages). */ const renderThinkingBlock = (content: string, thinkKey: string) => { const isExpanded = expandedThinking.has(thinkKey); const toggleThink = () => toggleThinking(thinkKey); @@ -150,25 +143,21 @@ export function MessageBody({ m, messageIndex, currentChatId, send, showProcess // A run is a maximal contiguous sequence of {thinking, tool, // empty-text} segments. Non-empty text breaks the run. Pure // empty-text only chunks are absorbed but never anchor a run. - // - // OFF mode (dispatchProcessVisible=false) keeps the existing - // ToolProgressInline for tool batches; the unified shell takes over in ON mode. const segs = m.segments!; - const { runs, suppressedIdx } = groupExecutionRuns(m, dispatchProcessVisible); + const { runs, suppressedIdx } = groupExecutionRuns(m); - // ON mode gives every moment of a live reply one owner: the tool run + // Every moment of a live reply has one owner: the tool run // still in flight, or a tail row under the text. The reply's single // agent mark parks on that owner, so a pause never reads as a hang — // except a run with tools, whose lit tool icons already say what is // happening; the mark steps away and comes back on the next owner. - const liveTurn = !!m.isStreaming && dispatchProcessVisible; + const liveTurn = !!m.isStreaming; const lastRun = runs[runs.length - 1]; const tailRun = liveTurn && lastRun && !segs.slice(lastRun.endIdx + 1).some(s => !(s.type === 'text' && !(s.content || '').trim())) ? lastRun : null; - // A reasoning block outside a run is already on screen (OFF mode only). const hasVisibleProgress = runs.length > 0 || segs.some( - s => (s.type === 'text' || s.type === 'thinking') && (s.content || '').trim().length > 0, + s => s.type === 'text' && (s.content || '').trim().length > 0, ); const tailSlot = `${m.uid}-tail`; let tail: { label: string; startTs: number; clockAfterMs?: number } | null = null; @@ -207,23 +196,17 @@ export function MessageBody({ m, messageIndex, currentChatId, send, showProcess if (runByAnchor.has(segIdx)) { const run = runByAnchor.get(segIdx)!; - if (dispatchProcessVisible || run.steps.some(step => step.kind === 'compaction')) { - return ( - - ); - } - if (run.tools.length > 0) { - return ; - } - return null; + return ( + + ); } if (suppressedIdx.has(segIdx)) return null; @@ -294,44 +277,24 @@ export function MessageBody({ m, messageIndex, currentChatId, send, showProcess ); } - if (seg.type === 'thinking') { - // OFF mode: thinking that wasn't folded into a tool run still - // renders as its inline summary. - const isActiveThinking = !!(m.isStreaming && !m.segments!.slice(segIdx + 1).some(s => s.type === 'text')); - return ; - } - if (seg.type === 'text') { const textContent = seg.content || ''; if (!textContent && (!m.isStreaming || !isLastSeg)) return null; const effectiveCitations = conversationCitations; - // OFF mode keeps the inline StreamWaitIndicator under the - // text bubble; ON mode handles waits inside the shell so - // we suppress the indicator entirely. - const showInlineWait = !dispatchProcessVisible && m.isStreaming && isLastSeg; return ( - - - {segIdx === 0 && renderUserQuote()} - {segIdx === 0 && renderChipBadges()} - {m.role === 'user' ? : } - - {showInlineWait && ( - - )} - + + {segIdx === 0 && renderUserQuote()} + {segIdx === 0 && renderChipBadges()} + {m.role === 'user' ? : } + ); } return null; @@ -360,7 +323,7 @@ export function MessageBody({ m, messageIndex, currentChatId, send, showProcess ) : ( /* Legacy rendering path */ <> - {m.toolCalls && m.toolCalls.length > 0 && dispatchProcessVisible && ( + {m.toolCalls && m.toolCalls.length > 0 && ( ({ kind: 'tool' as const, tool, key: `${m.uid}-legacy-${idx}` }))} @@ -380,11 +343,9 @@ export function MessageBody({ m, messageIndex, currentChatId, send, showProcess )} {m.isStreaming && !m.content ? ( - dispatchProcessVisible && !m.toolCalls?.length && !m.thinking?.some(block => block.content?.trim()) ? ( + !m.toolCalls?.length && !m.thinking?.some(block => block.content?.trim()) ? ( - ) : dispatchProcessVisible ? null : ( - - ) + ) : null ) : ( {renderUserQuote()} diff --git a/src/frontend/src/components/chat/MessageBubble.tsx b/src/frontend/src/components/chat/MessageBubble.tsx index 91c85f7f..93314a95 100644 --- a/src/frontend/src/components/chat/MessageBubble.tsx +++ b/src/frontend/src/components/chat/MessageBubble.tsx @@ -4,7 +4,6 @@ import { motion } from 'motion/react'; import { FileAttachmentCard } from '../file'; import { ToolMessageContext } from '../tool/ToolMessageContext'; import { EvolutionCard } from './EvolutionCard'; -import { OntologyReviewTrigger } from './OntologyReviewTrigger'; import { MessageBody } from './MessageBody'; import { MessageActions } from './MessageActions'; import { MessageArtifacts } from './MessageArtifacts'; @@ -133,16 +132,6 @@ export const MessageBubble = memo(function MessageBubble({ m, messageIndex, curr /> )} - {m.role === 'assistant' && m.ontologyGovernance && !inherited && ( - - - - )} - {inherited && } {!publicChat && selectionMenu} {!publicChat && {entries.length > 0 && ( @@ -29,11 +27,5 @@ export function MessageInheritedCards({ m }: MessageInheritedCardsProps) { )} - {governance && ( - - {t('历史本体校验（只读）')} - - - )} ; } diff --git a/src/frontend/src/components/chat/ModelEffortChip.tsx b/src/frontend/src/components/chat/ModelEffortChip.tsx index c58fc279..ecb78bec 100644 --- a/src/frontend/src/components/chat/ModelEffortChip.tsx +++ b/src/frontend/src/components/chat/ModelEffortChip.tsx @@ -1,7 +1,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { Dropdown } from 'antd'; import '../../styles/model-effort-popup.css'; -import { RobotOutlined, RightOutlined, ThunderboltOutlined } from '@ant-design/icons'; +import { RightOutlined, ThunderboltOutlined } from '@ant-design/icons'; import { useChatStore, useChatModeStore, useModelCapabilitiesStore } from '../../stores'; import { projectOverviewId, type ThinkingEffort } from '../../stores/chatStore'; import { useModelMenuBounds } from './useModelMenuBounds'; @@ -141,7 +141,14 @@ export default function ModelEffortChip() { aria-label={t('切换模型与思考强度')} aria-description={triggerLabel + (triggerAside ? ' · ' + triggerAside : '')} > - + {/* 收起态的模型位图标：四角星「AI」记号，线性描边与工具条其他图标同一笔画粗细 */} + + + + {triggerLabel} {triggerAside && {triggerAside}} diff --git a/src/frontend/src/components/chat/OntologyGovernanceCard.tsx b/src/frontend/src/components/chat/OntologyGovernanceCard.tsx deleted file mode 100644 index e6142cb5..00000000 --- a/src/frontend/src/components/chat/OntologyGovernanceCard.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { - CheckCircleFilled, - ExclamationCircleFilled, - LoadingOutlined, - SafetyCertificateOutlined, -} from '@ant-design/icons'; - -import { t } from '../../i18n'; -import type { OntologyGovernanceSummary } from '../../types'; - -interface OntologyGovernanceCardProps { - governance: OntologyGovernanceSummary; -} - -const sourceLabel = (source?: string) => { - if (source === 'tool') return t('工具'); - if (source === 'skill') return t('技能'); - if (source === 'subagent') return t('智能体'); - return t('问题文本'); -}; - -export function OntologyGovernanceCard({ governance }: OntologyGovernanceCardProps) { - const { activations = [], gates = [], review = {} } = governance; - const denied = gates.filter((gate) => gate.decision === 'deny').length; - const running = review.status === 'running'; - const completed = review.status === 'completed' || review.status === 'skipped'; - const verdict = review.verdict || ''; - const verdictLabel = review.status === 'skipped' - ? t('校验完成') - : verdict === 'revise' - ? t('已修订答案') - : verdict === 'escalate' - ? t('转人工复核') - : t('评审通过'); - const reviewLabel = review.level === 'committee' - ? t('评审委员会 · {count} 位委员', { count: review.committee_size || 3 }) - : t('领域本体评审'); - - return ( - - - - - {t('领域本体治理')} - - - {running ? : denied || verdict === 'escalate' ? : } - {running ? t('评审中') : completed ? verdictLabel : t('校验中')} - - - - - {t('激活工作流')} {activations.length} - {t('工具门禁')} {gates.length}{denied ? ` · ${t('{count} 次拦截', { count: denied })}` : ''} - {reviewLabel} - {typeof review.latency_ms === 'number' && ( - {t('用时 {sec}秒', { sec: (review.latency_ms / 1000).toFixed(1) })} - )} - - - {activations.length > 0 && ( - - {activations.map((activation, index) => ( - - {activation.workflow_name || activation.workflow_id || t('领域工作流')} - {sourceLabel(activation.source)} - - ))} - - )} - - ); -} diff --git a/src/frontend/src/components/chat/OntologyReviewTrigger.tsx b/src/frontend/src/components/chat/OntologyReviewTrigger.tsx deleted file mode 100644 index 4b8afb65..00000000 --- a/src/frontend/src/components/chat/OntologyReviewTrigger.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { - CheckCircleFilled, - ExclamationCircleFilled, - LoadingOutlined, - RightOutlined, - SafetyCertificateOutlined, -} from '@ant-design/icons'; - -import { t } from '../../i18n'; -import { useCanvasStore } from '../../stores'; -import type { OntologyGovernanceSummary } from '../../types'; - -interface OntologyReviewTriggerProps { - governance: OntologyGovernanceSummary; - chatId: string; - messageUid: string; -} - -export function OntologyReviewTrigger({ - governance, - chatId, - messageUid, -}: OntologyReviewTriggerProps) { - const openOntology = useCanvasStore((state) => state.openOntology); - const review = governance.review && typeof governance.review === 'object' - ? governance.review - : {}; - const isStreaming = review.status === 'running' || governance.revision?.status === 'streaming'; - const needsManualReview = review.status === 'failed' - || review.verdict === 'escalate' - || review.manual_review?.required === true; - const hasRevision = review.revised === true - || Boolean( - (typeof governance.revision?.content === 'string' && governance.revision.content) - || (typeof review.candidate_answer === 'string' && review.candidate_answer), - ); - const passed = review.status === 'completed' && review.verdict === 'pass' && !hasRevision; - const manualReviewItems = Array.isArray(review.manual_review?.items) - ? review.manual_review.items - : []; - const hasManualReview = Boolean(review.manual_review) - && (review.manual_review?.required === true || manualReviewItems.length > 0); - - if (!isStreaming && !hasRevision && !passed && !needsManualReview && !hasManualReview) { - return null; - } - - const title = isStreaming - ? t('本体校验进行中') - : needsManualReview - ? t('本体校验需人工复核') - : hasRevision - ? t('本体校验已生成优化稿') - : passed - ? t('本体校验已通过') - : t('查看本体校验'); - const description = isStreaming - ? t('结果正在右侧实时生成') - : t('在右侧面板查看完整结果'); - const icon = isStreaming - ? - : needsManualReview - ? - : passed - ? - : ; - - return ( - openOntology({ chatId, messageUid })} - aria-label={title} - > - {icon} - - {title} - {description} - - - - ); -} diff --git a/src/frontend/src/components/chat/OntologyRevisionPanel.tsx b/src/frontend/src/components/chat/OntologyRevisionPanel.tsx deleted file mode 100644 index 55382800..00000000 --- a/src/frontend/src/components/chat/OntologyRevisionPanel.tsx +++ /dev/null @@ -1,397 +0,0 @@ -import { - ArrowLeftOutlined, - CheckCircleFilled, - CheckOutlined, - FileSearchOutlined, - LoadingOutlined, - SafetyCertificateOutlined, -} from '@ant-design/icons'; -import { Button, message } from 'antd'; -import { useCallback, useState } from 'react'; - -import { authFetch } from '../../api'; -import { t } from '../../i18n'; -import { useChatStore } from '../../stores'; -import type { - ChatMessage, - MessageSegment, - OntologyActivationSummary, - OntologyGateSummary, - OntologyGovernanceSummary, - OntologyManualReview, - OntologyManualReviewItem, - OntologyReviewSummary, - OntologyRevisionSummary, - ToolCall, -} from '../../types'; -import { CitationMarkdownBlock } from '../citation'; -import { ToolProgressInline, ToolRunShell } from '../tool'; -import type { ShellStep } from '../tool/ToolRunShell'; -import { ThinkingInline } from './ThinkingInline'; - -interface OntologyRevisionPanelProps { - governance: OntologyGovernanceSummary; - message: ChatMessage; - chatId: string; - dispatchProcessVisible: boolean; -} - -const apiBaseUrl = (import.meta.env.VITE_API_BASE_URL as string || '').trim() || '/api'; - -// 只是想知道"有没有够 8 个有效字符"，却用 match(/g) 把命中的每个字符都物化成 -// 一个独立字符串塞进数组 —— 候选答案是模型生成的，可以很长，白白申请一大片内存 -// （与 contextUsage.estimateTokens 同一类毛病）。数够 8 个就收工。 -function hasSubstantiveCandidate(value: string): boolean { - let n = 0; - for (let i = 0; i < value.length; i += 1) { - const c = value.charCodeAt(i); - const substantive = (c >= 0x30 && c <= 0x39) - || (c >= 0x41 && c <= 0x5a) - || (c >= 0x61 && c <= 0x7a) - || (c >= 0x3400 && c <= 0x9fff); - if (substantive && (n += 1) >= 8) return true; - } - return false; -} - -function isRecord(value: unknown): value is Record { - return !!value && typeof value === 'object' && !Array.isArray(value); -} - -export function OntologyRevisionPanel({ - governance, - message: chatMessage, - chatId, - dispatchProcessVisible, -}: OntologyRevisionPanelProps) { - const [accepting, setAccepting] = useState(false); - const safeGovernance = isRecord(governance) - ? governance as unknown as Partial - : {}; - const revision = isRecord(safeGovernance.revision) - ? safeGovernance.revision as OntologyRevisionSummary - : undefined; - // Persisted chats and live SSE frames can contain an older or partial - // governance shape. Treat every collection as untrusted at this rendering - // boundary so an incomplete frame cannot crash the whole conversation. - const review: OntologyReviewSummary = isRecord(safeGovernance.review) - ? safeGovernance.review as OntologyReviewSummary - : {}; - const activations = Array.isArray(safeGovernance.activations) - ? safeGovernance.activations.filter( - (item): item is OntologyActivationSummary => isRecord(item), - ) - : []; - const gates = Array.isArray(safeGovernance.gates) - ? safeGovernance.gates.filter((item): item is OntologyGateSummary => isRecord(item)) - : []; - const revisionToolCalls = Array.isArray(revision?.toolCalls) - ? revision.toolCalls.filter( - (item): item is ToolCall => isRecord(item) && typeof item.name === 'string', - ) - : []; - const revisionThinkingItems = Array.isArray(revision?.thinking) ? revision.thinking : []; - const manualReview = isRecord(review.manual_review) - ? review.manual_review as unknown as OntologyManualReview - : undefined; - const manualReviewItems = Array.isArray(manualReview?.items) - ? manualReview.items.filter( - (item): item is OntologyManualReviewItem => isRecord(item) - && typeof item.quote === 'string' - && typeof item.rule_id === 'string' - && typeof item.risk === 'string' - && typeof item.manual_check === 'string', - ) - : []; - const reviewEvidence = Array.isArray(review.evidence) - ? review.evidence.filter((item): item is string => typeof item === 'string') - : []; - const newTools = Array.isArray(review.new_tools) - ? review.new_tools.filter((item): item is string => typeof item === 'string') - : []; - const manualReviewTitle = typeof manualReview?.title === 'string' - ? manualReview.title - : t('领域本体人工复核'); - const manualReviewSummary = typeof manualReview?.summary === 'string' - ? manualReview.summary - : ''; - const candidate = typeof revision?.content === 'string' - ? revision.content - : typeof review.candidate_answer === 'string' - ? review.candidate_answer - : ''; - const hasCandidateContent = candidate.length > 0; - const hasCandidate = hasSubstantiveCandidate(candidate); - const accepted = review.accepted === true && hasCandidate; - const isRevisionStreaming = revision?.status === 'streaming'; - const isReviewRunning = review.status === 'running'; - const isPassWithoutChanges = review.status === 'completed' - && review.verdict === 'pass' - && review.revised !== true - && !hasCandidate; - const isReviewFailed = review.status === 'failed'; - const canReplaceOriginal = hasCandidate && review.revised === true; - const hasManualReview = !!manualReview - && (manualReview.required || manualReviewItems.length > 0); - const workflowCount = new Set( - activations.map((item) => `${item.pack_id || ''}:${item.workflow_id || ''}`), - ).size; - const gatePassCount = gates.filter((item) => item.decision !== 'deny').length; - const gateDeniedCount = gates.filter((item) => item.decision === 'deny').length; - const reviewMode = review.level === 'committee' - ? t('委员会复核 · {count} 位', { count: review.committee_size || 3 }) - : t('独立核验'); - const latencyLabel = typeof review.latency_ms === 'number' - ? review.latency_ms >= 1000 - ? `${(review.latency_ms / 1000).toFixed(1)}s` - : `${review.latency_ms}ms` - : '—'; - const revisionThinking = revisionThinkingItems - .map((item) => (item && typeof item.content === 'string' ? item.content : '')) - .filter(Boolean) - .join('\n\n'); - const revisionRunSteps: ShellStep[] = []; - if (revisionThinking) { - revisionRunSteps.push({ - kind: 'thinking', - content: revisionThinking, - active: isRevisionStreaming && !hasCandidateContent, - key: `${chatMessage.ts}-ontology-thinking`, - }); - } - revisionToolCalls.forEach((tool, index) => { - revisionRunSteps.push({ kind: 'tool', tool, key: `${chatMessage.ts}-ontology-tool-${tool.id || index}` }); - }); - - const handleAccept = useCallback(async () => { - if (!candidate.trim() || accepting || accepted) return; - setAccepting(true); - try { - if (chatMessage.messageId) { - const response = await authFetch( - `${apiBaseUrl}/v1/chats/messages/${chatMessage.messageId}/ontology-revision/accept`, - { method: 'POST' }, - ); - if (!response.ok) { - const payload = await response.json().catch(() => ({})); - throw new Error(String(payload?.detail || payload?.message || t('替换失败'))); - } - } - useChatStore.getState().updateStore((prev) => { - const chat = prev.chats[chatId]; - if (!chat) return prev; - const messages = chat.messages.map((item) => { - if (item.uid !== chatMessage.uid) return item; - const preservedSegments = (item.segments || []).filter((segment) => segment.type !== 'text'); - const segments: MessageSegment[] = candidate - ? [...preservedSegments, { type: 'text', content: candidate }] - : preservedSegments; - return { - ...item, - content: candidate, - isMarkdown: true, - segments, - ontologyGovernance: item.ontologyGovernance - ? { - ...item.ontologyGovernance, - review: { ...item.ontologyGovernance.review, accepted: true }, - } - : item.ontologyGovernance, - }; - }); - return { - ...prev, - chats: { - ...prev.chats, - [chatId]: { ...chat, messages, updatedAt: Date.now() }, - }, - }; - }); - message.success(t('已用本体优化稿替换原文')); - } catch (error) { - message.error(error instanceof Error ? error.message : t('替换失败')); - } finally { - setAccepting(false); - } - }, [accepted, accepting, candidate, chatId, chatMessage.messageId, chatMessage.ts]); - - if (!hasCandidate && !isRevisionStreaming && !isReviewRunning - && review.status !== 'completed' && !isReviewFailed && !hasManualReview) return null; - - const panelTitle = isReviewRunning - ? t('本体校验') - : hasCandidateContent || isRevisionStreaming - ? t('本体校验结果 · 优化稿') - : t('本体校验结果'); - const stateLabel = isRevisionStreaming - ? t('生成中') - : isReviewRunning - ? t('评审中') - : accepted - ? t('已替换') - : isPassWithoutChanges - ? t('校验通过') - : isReviewFailed || manualReview?.required - ? t('需人工复核') - : canReplaceOriginal - ? t('待确认') - : t('校验完成'); - const stateClass = isRevisionStreaming || isReviewRunning - ? ' is-streaming' - : accepted || isPassWithoutChanges - ? ' is-accepted' - : isReviewFailed || manualReview?.required - ? ' is-warning' - : ''; - - return ( - - ); -} diff --git a/src/frontend/src/components/chat/StreamWaitIndicator.tsx b/src/frontend/src/components/chat/StreamWaitIndicator.tsx deleted file mode 100644 index 99ec8cc1..00000000 --- a/src/frontend/src/components/chat/StreamWaitIndicator.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { AnimatePresence, motion } from 'motion/react'; -import { useStallDetector } from '../../hooks/useStallDetector'; -import { EASE } from '../../utils/motionTokens'; - -interface StreamWaitIndicatorProps { - signature: string | number; - suppressed?: boolean; - stallMs?: number; - anchorTs?: number; -} - -const STATE_MOTION = { - initial: { opacity: 0, y: 4 }, - animate: { opacity: 1, y: 0 }, - exit: { opacity: 0, y: 4 }, - transition: { duration: 0.18, ease: EASE.standard }, -} as const; - -/** Show streaming dots during output; silent waits add no text or timer. */ -export function StreamWaitIndicator({ - signature, - suppressed, - stallMs = 2500, - anchorTs, -}: StreamWaitIndicatorProps) { - const stall = useStallDetector(signature, stallMs, anchorTs, !suppressed); - if (suppressed) return null; - - return ( - - {!stall.waiting ? ( - - - - - - ) : null} - - ); -} diff --git a/src/frontend/src/components/chat/ThinkingInline.tsx b/src/frontend/src/components/chat/ThinkingInline.tsx deleted file mode 100644 index b9170d9b..00000000 --- a/src/frontend/src/components/chat/ThinkingInline.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { useEffect, useState } from 'react'; -import { RightOutlined } from '@ant-design/icons'; -import { useOverflowFade } from '../../hooks'; -import { scrollElementToBottom } from '../../utils/scroll'; -import { BrandLoader } from '../common'; -import { t } from '../../i18n'; -import { useCollapseHeight } from '../../hooks/useCollapseHeight'; - -interface ThinkingInlineProps { - content: string; - isActive: boolean; -} - -/** - * Collapsed thinking block shown when dispatchProcessVisible is off. - * - * Same quiet one-line header as before; clicking unfolds the reasoning in place - * instead of pushing a card into the right-hand Canvas. The body is the shared - * `.jx-thinkingContent` box (bounded height + auto-scroll while streaming), so - * it reads identically to the thinking block elsewhere in the message. - */ -export function ThinkingInline({ content, isActive }: ThinkingInlineProps) { - const [open, setOpen] = useState(false); - const [boxRef, innerRef, overflowing] = useOverflowFade(open); - const collapseRef = useCollapseHeight(open); - - useEffect(() => { - if (open && isActive && boxRef.current) scrollElementToBottom(boxRef.current); - }, [content, open, isActive, boxRef]); - - const hasContent = !!content.trim(); - const toggle = () => { if (hasContent) setOpen(v => !v); }; - - return ( - - { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }}> - - - - - {isActive ? t('正在思考…') : t('思考过程')} - - {hasContent && } - - - {hasContent && ( - - - {content} - - - )} - - ); -} diff --git a/src/frontend/src/components/chat/index.ts b/src/frontend/src/components/chat/index.ts index 0e99271d..8f838245 100644 --- a/src/frontend/src/components/chat/index.ts +++ b/src/frontend/src/components/chat/index.ts @@ -10,7 +10,5 @@ export { PromptHubPanel } from './PromptHubPanel'; export { PlanCard } from './PlanCard'; export { PlanProgressStrip } from './PlanProgressStrip'; export { JobProgressStrip } from './JobProgressStrip'; -export { OntologyRevisionPanel } from './OntologyRevisionPanel'; -export { OntologyReviewTrigger } from './OntologyReviewTrigger'; export { EvolutionCard } from './EvolutionCard'; export { ConversationNavigation } from './ConversationNavigation'; diff --git a/src/frontend/src/components/chat/useChatWelcome.ts b/src/frontend/src/components/chat/useChatWelcome.ts index 9fe6591e..76b13544 100644 --- a/src/frontend/src/components/chat/useChatWelcome.ts +++ b/src/frontend/src/components/chat/useChatWelcome.ts @@ -83,7 +83,7 @@ export function useChatWelcome(chat: ChatItem | undefined) { ? t('描述你想要的网站，例如：一个展示咖啡馆菜单与营业时间的单页网站') : isAgentChat ? t('向{name}提问...', { name: chat.agentName || t('智能体') }) - : isProjectChat ? t('在「{name}」内开始新对话，Enter 发送，Shift+Enter 换行', { name: chat.projectName || t('项目') }) : cfgInputPlaceholder; + : isProjectChat ? t('在「{name}」内开始新对话', { name: chat.projectName || t('项目') }) : cfgInputPlaceholder; if (publicChat) return { overviewProjectId: undefined, isAgentChat: true, isSiteChat: false, isProjectChat: publicChat.kind === 'projects', diff --git a/src/frontend/src/components/chat/useContextUsageView.ts b/src/frontend/src/components/chat/useContextUsageView.ts new file mode 100644 index 00000000..1b50ef6f --- /dev/null +++ b/src/frontend/src/components/chat/useContextUsageView.ts @@ -0,0 +1,104 @@ +import { useMemo } from 'react'; +import { useComposerDraft, chatDraftKey } from '../../stores/composerStore'; +import { useChatStore, useModelCapabilitiesStore } from '../../stores'; +import { + combineContextUsage, + computeContextBreakdown, + getContextWindow, + type ContextBreakdown, +} from '../../utils/contextUsage'; + +export type ContextLevel = 'ok' | 'warn' | 'high'; + +export function levelOf(ratio: number): ContextLevel { + if (ratio >= 0.85) return 'high'; + if (ratio >= 0.6) return 'warn'; + return 'ok'; +} + +// Category → display label + accent colour (aligned with design tokens). +export const CONTEXT_CATEGORIES: Array<{ key: keyof ContextBreakdown; label: string; color: string }> = [ + { key: 'messages', label: '对话消息', color: 'var(--color-primary)' }, + { key: 'tools', label: '工具调用', color: 'var(--color-tint-purple)' }, + { key: 'thinking', label: '思考过程', color: 'var(--color-success)' }, + { key: 'files', label: '文件', color: 'var(--color-warning)' }, + { key: 'input', label: '当前输入', color: 'var(--color-tint-green)' }, + { key: 'system', label: '系统提示词与工具定义', color: 'var(--color-text-tertiary)' }, +]; + +/** Context usage of the current chat, shared by the composer gauge and the run monitor. */ +export function useContextUsageView(draftKey?: string) { + const currentChatId = useChatStore((s) => s.currentChatId); + const messages = useChatStore((s) => (s.currentChatId ? s.store.chats[s.currentChatId]?.messages : undefined)); + const compaction = useChatStore((s) => ( + s.currentChatId ? s.contextCompactions[s.currentChatId] : undefined + )); + const contextUsage = useChatStore((s) => ( + s.currentChatId ? s.contextUsages[s.currentChatId] : undefined + )); + const { input: draft, uploadedFiles, importedSpaceFiles } = useComposerDraft(draftKey ?? chatDraftKey(currentChatId)); + + const model = useModelCapabilitiesStore((s) => { + const models = s.capabilities.user_selectable_models; + if (!s.capabilities.user_model_switch_enabled || !models.length) return undefined; + return ( + models.find((m) => m.provider_id === s.selectedModelProviderId) + || models.find((m) => m.is_default) + || models[0] + ); + }); + // Backend-provided real main-model window, used when switching is disabled. + const mainContextLength = useModelCapabilitiesStore((s) => s.capabilities.main_context_length || 0); + const attachmentPreviewChars = useModelCapabilitiesStore( + (s) => s.capabilities.attachment_preview_chars || 0, + ); + + const stagedFiles = useMemo( + () => [ + ...uploadedFiles.map((f) => ({ name: f.name, type: f.type, size: f.size })), + ...importedSpaceFiles.map((f) => ({ name: f.name, type: f.mime_type })), + ], + [uploadedFiles, importedSpaceFiles], + ); + + const configuredWindow = model ? model.context_length : mainContextLength; + const snapshotMatchesModel = (!model || !contextUsage?.modelProviderId + || model.provider_id === contextUsage.modelProviderId) + && (!configuredWindow || !contextUsage?.contextWindow || configuredWindow === contextUsage.contextWindow); + const window = snapshotMatchesModel && contextUsage?.contextWindow + ? contextUsage.contextWindow + : getContextWindow(model, model ? 0 : mainContextLength); + + const breakdown = useMemo( + () => contextUsage + ? combineContextUsage(contextUsage, { draft, stagedFiles, attachmentPreviewChars }) + : computeContextBreakdown(messages, { + draft, + stagedFiles, + attachmentPreviewChars, + compaction, + }), + [contextUsage, messages, draft, stagedFiles, attachmentPreviewChars, compaction], + ); + + const hasContent = (messages?.length || 0) > 0 || !!draft.trim() || uploadedFiles.length > 0 || importedSpaceFiles.length > 0; + if (!currentChatId || !hasContent) return null; + + const ratio = breakdown.total / window; + const level = levelOf(ratio); + const pct = Math.round(ratio * 100); + const hasPendingInput = !!draft.trim() || stagedFiles.length > 0; + const note = contextUsage && !snapshotMatchesModel + ? '已切换模型；占用沿用上一模型快照，下一次调用后重新校准' + : contextUsage?.exact + ? hasPendingInput + ? '已发送内容为上游实测；当前输入与待发送文件为预估' + : '总数为上游 usage 实测；分类按后端最终请求清单归一' + : contextUsage?.source === 'compaction_estimate' + ? '压缩后基线由后端估算；下一次模型调用后按上游 usage 校准' + : contextUsage + ? '供应商未返回 usage，当前为后端最终请求估算' + : '暂无上游实测快照，仅估算当前可见内容；下一次模型调用后校准'; + + return { breakdown, window, ratio, level, pct, note, modelName: model?.display_name || contextUsage?.modelName }; +} diff --git a/src/frontend/src/components/common/BrandLoader.tsx b/src/frontend/src/components/common/BrandLoader.tsx deleted file mode 100644 index 34a9b0ad..00000000 --- a/src/frontend/src/components/common/BrandLoader.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { t } from '../../i18n'; - -interface BrandLoaderProps { - /** Visual size (px), default 16 */ - size?: number; - /** Accessibility text; when omitted, chosen automatically based on the done state */ - label?: string; - /** true = the frozen brand mark (gray); false = the GIF being drawn (blue) */ - done?: boolean; -} - -/** - * Unified "in-progress / completed" inline indicator. - * - active: `/loader.gif` brand-blue dynamic drawing - * - done: `/loader-done.png` slate-gray frozen final state + a brief fade-in - * - * The active state carries `aria-busy`, which is both the screen-reader truth - * and what keeps its motion alive under reduced-motion (see motion.css). - * - * Used at inline summary positions like ThinkingInline, ToolProgressInline, - * replacing the earlier two scattered visuals breathingOrbs + pulseDot. - */ -export function BrandLoader({ size = 16, label, done = false }: BrandLoaderProps) { - return ( - - ); -} - -export default BrandLoader; diff --git a/src/frontend/src/components/common/ContinuousLoadSentinel.tsx b/src/frontend/src/components/common/ContinuousLoadSentinel.tsx new file mode 100644 index 00000000..7b51f6f4 --- /dev/null +++ b/src/frontend/src/components/common/ContinuousLoadSentinel.tsx @@ -0,0 +1,31 @@ +import { useEffect, useRef } from 'react'; + +interface ContinuousLoadSentinelProps { + /** 还有没显示出来的内容 */ + hasMore: boolean; + /** 当前已显示的条数；每次增长后重新观察，哨兵仍在可视区时会继续加载 */ + count: number; + onMore: () => void; +} + +/** + * 手机上替代页码条：列表末尾的隐形哨兵，滚到离底部一屏以内时追加下一批。 + * iOS 的列表都是一条连续滚动面，不出现「上一页 / 下一页」。 + * IntersectionObserver 以视口为根，会计入祖先滚动容器的裁剪，所以放在弹窗或模块页里都成立。 + */ +export function ContinuousLoadSentinel({ hasMore, count, onMore }: ContinuousLoadSentinelProps) { + const ref = useRef(null); + const onMoreRef = useRef(onMore); + useEffect(() => { onMoreRef.current = onMore; }, [onMore]); + useEffect(() => { + const node = ref.current; + if (!hasMore || !node || typeof IntersectionObserver === 'undefined') return; + const observer = new IntersectionObserver((entries) => { + if (entries.some((entry) => entry.isIntersecting)) onMoreRef.current(); + }, { rootMargin: '0px 0px 600px 0px' }); + observer.observe(node); + return () => observer.disconnect(); + }, [hasMore, count]); + if (!hasMore) return null; + return ; +} diff --git a/src/frontend/src/components/common/LoadState.tsx b/src/frontend/src/components/common/LoadState.tsx new file mode 100644 index 00000000..163973d6 --- /dev/null +++ b/src/frontend/src/components/common/LoadState.tsx @@ -0,0 +1,36 @@ +import { Button } from 'antd'; +import { t } from '../../i18n'; + +interface SkeletonLinesProps { + rows?: number; + className?: string; +} + +/** Placeholder text lines for a section whose own data is loading; the last line is shorter. */ +export function SkeletonLines({ rows = 3, className }: SkeletonLinesProps) { + return ( + + {Array.from({ length: rows }, (_, index) => )} + + ); +} + +interface LoadErrorProps { + /** What failed, e.g. 「项目资料加载失败」; defaults to a generic title. */ + title?: string; + /** The reason from the server or network. */ + reason?: string; + onRetry: () => void; + className?: string; +} + +/** A failed load: what failed, why, and a way to try again. */ +export function LoadError({ title, reason, onRetry, className }: LoadErrorProps) { + return ( + + {title || t('加载失败')} + {reason && {reason}} + {t('重试')} + + ); +} diff --git a/src/frontend/src/components/common/OntologyBuildValidationModal.tsx b/src/frontend/src/components/common/OntologyBuildValidationModal.tsx index c040f7a1..065bade7 100644 --- a/src/frontend/src/components/common/OntologyBuildValidationModal.tsx +++ b/src/frontend/src/components/common/OntologyBuildValidationModal.tsx @@ -1,199 +1,11 @@ -import { - Alert, - Button, - Empty, - Modal, - Space, - Tag, - Tooltip, - Typography, -} from 'antd'; -import { - ApiOutlined, - BulbOutlined, - CheckCircleOutlined, - CloseCircleOutlined, - ForkOutlined, - ToolOutlined, - WarningOutlined, -} from '@ant-design/icons'; -import type { OntologyBuildFailure, OntologyBuildIssue } from '../../utils/apiError'; -import { t } from '../../i18n'; - -const { Paragraph, Text, Title } = Typography; - -const ISSUE_LABELS: Record = { - unknown_ontology_tags: '本体标签不存在', - missing_required_tools: '缺少工作流所需 MCP 能力', - forbidden_tools_bound: '绑定了禁止使用的工具', - missing_output_contract: '缺少结构化输出约定', - missing_tool_input_schema: '缺少工具输入定义', - missing_ontology_parameters: '工具缺少本体要求参数', -}; +import type { OntologyBuildFailure } from '../../utils/apiError'; interface OntologyBuildValidationModalProps { failure: OntologyBuildFailure | null; onClose: () => void; } -function IssueList({ issues, kind }: { issues: OntologyBuildIssue[]; kind: 'error' | 'warning' }) { - if (issues.length === 0) { - return ; - } - - const isError = kind === 'error'; - const Icon = isError ? CloseCircleOutlined : WarningOutlined; - return ( - - {issues.map((issue, index) => ( - - - - - {t(ISSUE_LABELS[issue.code] ?? issue.code)} - {issue.code} - {issue.workflow_id && ( - }> - {t('工作流')} · {issue.workflow_id} - - )} - - - {issue.message} - - {issue.details.recommended_mcp_servers.length > 0 && ( - - {t('建议绑定以下 MCP')} - {issue.details.recommended_mcp_servers.map((server) => ( - - - {server.display_name} - {server.server_id} - - - {server.provided_tools.map((tool) => ( - - {tool.display_name} - - ))} - - - ))} - - )} - - - ))} - - ); -} - -/** 智能体、技能等资产在保存时未通过本体构建校验的可执行说明。 */ -export function OntologyBuildValidationModal({ failure, onClose }: OntologyBuildValidationModalProps) { - const report = failure?.report; - - return ( - - - {t('未通过本体构建校验')} - - )} - open={Boolean(failure)} - onCancel={onClose} - width="min(780px, calc(100vw - 32px))" - className="jx-ontologyValidationModal" - footer={{t('返回修改')}} - destroyOnHidden - > - {failure && report && ( - - - - - - {report.errors.length} - {t('必须修复')} - - - {report.warnings.length} - {t('建议处理')} - - - {report.matched_workflows.length} - {t('命中工作流')} - - - {report.resolved_tools.length} - {t('已识别工具')} - - - - - {t('必须修复的问题')} - - - - {report.suggestions.length > 0 && ( - - <BulbOutlined /> {t('如何通过校验')} - - {report.suggestions.map((suggestion) => {suggestion})} - - - )} - - {report.warnings.length > 0 && ( - - {t('建议一并处理')} - - - )} - - - {t('本次识别结果')} - - - {t('命中的领域工作流')} - - {report.matched_workflows.length > 0 - ? report.matched_workflows.map((item) => {item}) - : {t('未命中')}} - - - - {t('从能力绑定中识别到的工具')} - - {report.resolved_tools.length > 0 - ? (report.resolved_tool_details.length > 0 - ? report.resolved_tool_details - : report.resolved_tools.map((name) => ({ name, display_name: name }))) - .map((item) => ( - - {item.display_name} - - )) - : {t('未识别到工具')}} - - - - - - - - {t('复制完整校验报告')} - - - )} - - ); +/** Community edition never rejects a build on ontology rules, so there is nothing to show. */ +export function OntologyBuildValidationModal(_props: OntologyBuildValidationModalProps) { + return null; } diff --git a/src/frontend/src/components/common/OntologyTagSelect.tsx b/src/frontend/src/components/common/OntologyTagSelect.tsx deleted file mode 100644 index 0d4f4b2b..00000000 --- a/src/frontend/src/components/common/OntologyTagSelect.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import { CheckCircleOutlined, ForkOutlined } from '@ant-design/icons'; -import { Empty, Select, Space, Tag, Tooltip, Typography } from 'antd'; -import { useMemo } from 'react'; -import type { OntologyTagOption } from '../../types'; -import { t } from '../../i18n'; - -const { Text } = Typography; - -interface OntologyTagSelectProps { - options: OntologyTagOption[]; - loading?: boolean; - value?: string[]; - onChange?: (value: string[]) => void; -} - -function reviewColor(level: string): string { - if (level === 'committee') return 'red'; - if (level === 'checkpoint') return 'orange'; - if (level === 'gate') return 'gold'; - return 'blue'; -} - -/** - * Controlled ontology selector. It deliberately uses `multiple` instead of `tags`: - * users can only choose values that an active Domain Pack has wired to a workflow. - */ -export function OntologyTagSelect({ options, loading, value, onChange }: OntologyTagSelectProps) { - const selectedOptions = useMemo(() => { - const selected = new Set(value ?? []); - return options.filter((item) => selected.has(item.value)); - }, [options, value]); - - const workflows = useMemo(() => { - const result = new Map(); - selectedOptions.forEach((item) => { - item.workflows.forEach((workflow) => result.set(workflow.workflow_ref, workflow)); - }); - return Array.from(result.values()); - }, [selectedOptions]); - - const labels = useMemo( - () => new Map(options.map((item) => [item.value, item.concept_name])), - [options], - ); - - return ( - - ({ - value: item.value, - label: `${item.concept_name} ${item.value} ${item.definition}`, - item, - }))} - labelRender={({ value: selectedValue }) => ( - - {labels.get(String(selectedValue)) ?? selectedValue} - - )} - optionRender={(option) => { - const item = option.data.item as OntologyTagOption; - return ( - - - {item.concept_name} - {item.value} - - - {item.definition} - - - {item.packs.map((pack) => ( - - {pack.pack_name} · v{pack.version} - - ))} - {item.workflows.map((workflow) => ( - - {workflow.workflow_name} · {t('{level} 评审', { level: workflow.review_level })} - - ))} - - - ); - }} - notFoundContent={loading ? undefined : ( - - )} - /> - - {workflows.length > 0 && ( - - {t('运行时将触发')} - - {workflows.map((workflow) => ( - } - color={reviewColor(workflow.review_level)} - key={workflow.workflow_ref} - > - {workflow.workflow_name} · {t('{level} 评审', { level: workflow.review_level })} - - ))} - - - )} - - ); -} diff --git a/src/frontend/src/components/common/index.ts b/src/frontend/src/components/common/index.ts index 40b84e54..40c649c2 100644 --- a/src/frontend/src/components/common/index.ts +++ b/src/frontend/src/components/common/index.ts @@ -1,6 +1,5 @@ export { default as ImagePreview } from './ImagePreview'; export { default as AuthExpiredModal } from './AuthExpiredModal'; -export { default as BrandLoader } from './BrandLoader'; export { ElapsedTimer } from './ElapsedTimer'; export { default as AppLoadingSkeleton } from './AppLoadingSkeleton'; export { default as AppErrorBoundary } from './AppErrorBoundary'; @@ -8,8 +7,9 @@ export { default as ContentErrorBoundary } from './ContentErrorBoundary'; export { LangToggleButton } from './LangToggleButton'; export { VisibilityScopeModal } from './VisibilityScopeModal'; export { OntologyBuildValidationModal } from './OntologyBuildValidationModal'; -export { OntologyTagSelect } from './OntologyTagSelect'; export { ChipChevron } from './ChipChevron'; export { CitedTextBody } from './CitedTextBody'; export { WindowedText } from './WindowedText'; export { CardTail } from './CardTail'; +export { SkeletonLines, LoadError } from './LoadState'; +export { ContinuousLoadSentinel } from './ContinuousLoadSentinel'; diff --git a/src/frontend/src/components/monitor/RunMonitorRail.css b/src/frontend/src/components/monitor/RunMonitorRail.css new file mode 100644 index 00000000..d566b91b --- /dev/null +++ b/src/frontend/src/components/monitor/RunMonitorRail.css @@ -0,0 +1,273 @@ +/* ══════════════════════════════════════════════════════ + Run monitor rail — 上下文 / 子智能体 / 产出与输入文件 / 后台任务 + A column of separate cards inside the conversation pane, right of the messages. + ══════════════════════════════════════════════════════ */ + +/* The rail floats over the chat scroller's right side, so the scroller — and + its scrollbar and message navigation — still reach the column's right edge. + The message column and composer shift left by --jx-runMonitor-reserve. + It is anchored to .jx-conversationColumn, not the whole main row, so side + panels beside the column never end up under it. */ +.jx-conversationColumn--runMonitor { + --jx-runMonitor-width: 304px; + /* Room on the right for the message navigation (32px + 8px) and the scrollbar. */ + --jx-runMonitor-edge: 48px; + /* Rail + edge + 16px gap, less the 44px chat gutter the panel already keeps + (--jx-chat-panel-inline-gutter is set on the panel, below this element). */ + --jx-runMonitor-reserve: calc(var(--jx-runMonitor-width) + var(--jx-runMonitor-edge) + 16px - 44px); +} + +.jx-runMonitor { + position: absolute; + z-index: 2; + top: 0; + right: var(--jx-runMonitor-edge); + bottom: 0; + display: flex; + width: var(--jx-runMonitor-width); + min-width: 0; + flex-direction: column; + gap: 12px; + /* Part of the conversation: no divider, the chat surface shows through. */ + padding: 16px 0; + overflow-y: auto; + scrollbar-width: none; + background: transparent; + /* The rail spans the full height; its empty space must not swallow clicks + or wheel scrolling meant for the messages underneath. Cards opt back in. */ + pointer-events: none; +} +.jx-runMonitor > * { pointer-events: auto; } +.jx-runMonitor::-webkit-scrollbar { display: none; } + +@container conversation-column (min-width: 1120px) { + .jx-conversationColumn--runMonitor .jx-content .jx-panel:has(.jx-chatWrap) { + padding-right: calc(var(--jx-chat-panel-inline-gutter) + var(--jx-runMonitor-reserve)); + } + /* The history viewport bleeds to the column edges; re-centre it on the column + after the panel's extra right padding and keep the list out from under the rail. */ + .jx-conversationColumn--runMonitor .jx-chatViewportFrame { + left: calc(var(--jx-runMonitor-reserve) / 2); + } + .jx-conversationColumn--runMonitor .jx-chatViewport { + --jx-chat-wrap-right: var(--jx-runMonitor-reserve); + } +} + +/* The 760px message column keeps its width first; below that the rail drops + out instead of stacking under the chat. Opening the canvas or a side panel + narrows the column, so the same rule applies there. */ +@container conversation-column (max-width: 1119px) { + .jx-runMonitor { display: none; } +} + +/* ── Card: static, bordered, no shadow (v2 L1) ── */ +.jx-runMonitor-card { + flex: none; + padding: 8px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: var(--color-bg-container); +} + +.jx-runMonitor-cardHead { + display: flex; + width: 100%; + height: 36px; + padding: 0 8px; + align-items: center; + gap: 8px; + border: 0; + border-radius: var(--radius-xs); + background: transparent; + color: var(--color-text); + cursor: pointer; + text-align: left; +} +.jx-runMonitor-cardHead:hover { background: var(--state-hover); } + +.jx-runMonitor-cardTitle { + font-size: 14px; + font-weight: 500; + line-height: 20px; +} + +.jx-runMonitor-caret { + flex: none; + color: var(--color-text-secondary); + font-size: 10px; + transform: rotate(-90deg); + transition: transform var(--motion-duration-fast) var(--motion-ease-standard); +} +.jx-runMonitor-card[data-open] > .jx-runMonitor-cardHead .jx-runMonitor-caret { transform: none; } + +.jx-runMonitor-summary { + display: flex; + margin-left: auto; + align-items: center; + gap: 8px; + color: var(--color-text-tertiary); + font-size: 13px; + white-space: nowrap; +} + +.jx-runMonitor-cardBody { + display: flex; + padding-top: 4px; + flex-direction: column; +} + +/* ── Rows: one line each ── */ +.jx-runMonitor-row { + display: flex; + width: 100%; + min-width: 0; + height: 32px; + padding: 0 8px; + align-items: center; + gap: 8px; + border: 0; + border-radius: var(--radius-xs); + background: transparent; + color: var(--color-text); + font-size: 13px; + text-align: left; +} +button.jx-runMonitor-row { cursor: pointer; } +button.jx-runMonitor-row:hover { background: var(--state-hover); } +button.jx-runMonitor-row:active { background: var(--state-press); } +.jx-runMonitor-row[data-active] { background: var(--color-primary-light); } +.jx-runMonitor-cardHead:focus-visible, +.jx-runMonitor-row:focus-visible, +.jx-runMonitor-stop:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: -2px; +} + +.jx-runMonitor-lead { + display: inline-grid; + width: 20px; + height: 20px; + flex: none; + place-items: center; +} +.jx-runMonitor-glyph { + color: var(--color-text-secondary); + font-size: 14px; +} + +.jx-runMonitor-name { + min-width: 0; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.jx-runMonitor-code { + font-family: var(--font-family-number), ui-monospace, monospace; + font-size: 12px; +} + +.jx-runMonitor-meta, +.jx-runMonitor-num { + flex: none; + color: var(--color-text-tertiary); + font-family: var(--font-family-number); + font-size: 12px; + font-variant-numeric: tabular-nums; +} +/* ElapsedTimer brings its own left padding from tool.css when reused there. */ +.jx-runMonitor-row .jx-runMonitor-meta { padding-left: 0; } + +.jx-runMonitor-status { + display: inline-grid; + width: 16px; + flex: none; + place-items: center; + color: var(--color-text-tertiary); + font-size: 13px; +} +.jx-runMonitor-status[data-status='running'] { color: var(--color-primary); } +.jx-runMonitor-status[data-status='success'] { color: var(--color-success); } +.jx-runMonitor-status[data-status='error'] { color: var(--color-error); } + +/* Stop: a filled square, like a media stop key */ +.jx-runMonitor-stop { + display: inline-grid; + width: 24px; + height: 24px; + flex: none; + place-items: center; + border: 0; + border-radius: var(--radius-xs); + background: transparent; + color: var(--color-text); + cursor: pointer; +} +.jx-runMonitor-stop:hover { background: var(--state-hover); } +.jx-runMonitor-stop:disabled { opacity: .4; cursor: default; } +.jx-runMonitor-stopGlyph { + width: 10px; + height: 10px; + border-radius: 2px; + background: currentColor; +} + +/* ── Environment ── */ +.jx-runMonitor-place { + max-width: 96px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +button.jx-runMonitor-row:disabled { cursor: default; } +.jx-runMonitor-gear { color: var(--color-text-secondary); } +.jx-runMonitor-gear:hover { color: var(--color-text); } + +/* ── Context ── */ +.jx-runMonitor-mini { + display: block; + width: 48px; + height: 8px; + overflow: hidden; + border-radius: 999px; + background: var(--color-bg-gray); +} +.jx-runMonitor-mini > span { + display: block; + height: 100%; + border-radius: inherit; + background: var(--color-primary); +} +.jx-runMonitor-mini[data-level='warn'] > span { background: var(--color-warning); } +.jx-runMonitor-mini[data-level='high'] > span { background: var(--color-error); } + +.jx-runMonitor-kv { + display: flex; + padding: 0 8px 4px; + flex-direction: column; + gap: 8px; + font-size: 12px; +} +.jx-runMonitor-kvRow { + display: flex; + align-items: center; + gap: 8px; +} +.jx-runMonitor-kvLabel { + min-width: 0; + flex: 1; + color: var(--color-text-secondary); +} +.jx-runMonitor-kvTotal { + padding-top: 8px; + border-top: 1px solid var(--color-border); +} +.jx-runMonitor-dot { + width: 8px; + height: 8px; + flex: none; + border-radius: 2px; +} + +.jx-runMonitor-failed { color: var(--color-error); } diff --git a/src/frontend/src/components/monitor/RunMonitorRail.tsx b/src/frontend/src/components/monitor/RunMonitorRail.tsx new file mode 100644 index 00000000..fc4d8b34 --- /dev/null +++ b/src/frontend/src/components/monitor/RunMonitorRail.tsx @@ -0,0 +1,329 @@ +import { useMemo, useState, type ReactNode } from 'react'; +import { CaretDownFilled, CloudOutlined, CodeOutlined, FolderOutlined, LaptopOutlined, LoadingOutlined, SettingOutlined, UnorderedListOutlined } from '@ant-design/icons'; +import { message, Tooltip } from 'antd'; +import { t } from '../../i18n'; +import { useChatStore } from '../../stores/chatStore'; +import { fileTabId, subagentTabId, useCanvasStore, type CanvasArtifact } from '../../stores/canvasStore'; +import { useSubagentIdentity } from '../../hooks/useSubagentIdentity'; +import { subagentStatus } from '../../utils/subagentView'; +import { formatClock } from '../../utils/elapsed'; +import { formatTokens } from '../../utils/contextUsage'; +import { parseServerTime } from '../../utils/date'; +import type { CommandTaskBrief, JobBrief } from '../../types'; +import { AgentIcon } from '../agent/AgentIcon'; +import { ElapsedTimer } from '../common'; +import { CONTEXT_CATEGORIES, useContextUsageView } from '../chat/useContextUsageView'; +import { DeliveryFileIcon } from '../chat/DeliveryFileIcon'; +import { SubagentStatus } from '../tool/SubagentCallRow'; +import { openSubagentTab } from '../tool/openSubagentTab'; +import { collectFiles, collectSubagents, countToolCalls, type MonitorSubagent } from './runMonitorData'; +import { isLiveCommand, isLiveJob, useBackgroundTasks } from './useBackgroundTasks'; +import { useChatProject } from './useChatProject'; +import ProjectEnvironmentModal from '../projects/ProjectEnvironmentModal'; +import { projectSpaceLocation } from '../projects/projectFolderLocation'; +import { useMySpaceStore } from '../../stores/mySpaceStore'; +// DeliveryFileIcon takes its per-type colours from the delivery card styles. +import '../chat/DeliveredFiles.css'; +import './RunMonitorRail.css'; + +interface MonitorCardProps { + title: string; + /** Right side of the header: a count, a percentage, a short state. */ + summary?: ReactNode; + defaultOpen?: boolean; + children: ReactNode; +} + +function MonitorCard({ title, summary, defaultOpen = true, children }: MonitorCardProps) { + const [open, setOpen] = useState(defaultOpen); + return ( + + setOpen(!open)}> + {title} + + {summary != null && {summary}} + + {open && {children}} + + ); +} + +function SubagentRow({ item, chatId, active }: { item: MonitorSubagent; chatId: string; active: boolean }) { + const { tool, messageUid, isStreaming } = item; + const agent = useSubagentIdentity(tool); + const status = subagentStatus(tool, isStreaming); + return ( + openSubagentTab(tool, agent, { chatId, messageUid })} + aria-label={t('查看智能体「{name}」的执行过程', { name: agent.name })} + > + + {agent.name} + {status === 'running' && tool.timestamp + ? + : (tool.durationMs ?? 0) >= 1000 && {formatClock(tool.durationMs! / 1000)}} + {/* Finished runs stay quiet: only running, failed or interrupted get a mark. */} + {status !== 'success' && ( + + + + )} + + ); +} + +function FileRow({ file, active }: { file: CanvasArtifact; active: boolean }) { + const openCanvas = useCanvasStore((s) => s.openCanvas); + const extension = file.name.includes('.') ? file.name.split('.').pop()?.toUpperCase() : ''; + return ( + openCanvas(file)} + aria-label={t('预览文件：{name}', { name: file.name })} + > + + {file.name} + {extension && {extension}} + + ); +} + +function StopButton({ label, onStop }: { label: string; onStop: () => Promise }) { + const [stopping, setStopping] = useState(false); + const stop = async () => { + setStopping(true); + try { + await onStop(); + } catch (error) { + message.error(t('停止失败：{reason}', { reason: error instanceof Error ? error.message : String(error) })); + } finally { + setStopping(false); + } + }; + return ( + + void stop()}> + {stopping ? : } + + + ); +} + +function CommandRow({ task, onStop }: { task: CommandTaskBrief; onStop: () => Promise }) { + const started = parseServerTime(task.created_at); + return ( + + + {task.command} + {Number.isFinite(started) && } + + + ); +} + +function JobRow({ job, onStop }: { job: JobBrief; onStop: () => Promise }) { + const { settled, total } = job.stats; + return ( + + + {job.name} + {total > 0 && {settled}/{total}} + + + ); +} + +function BackgroundTasksCard({ chatId }: { chatId: string }) { + const { commands, jobs, cancelCommand, cancelJob } = useBackgroundTasks(chatId); + // Only what is still running: the card leaves once every task has ended. + const liveCommands = commands.filter(isLiveCommand); + const liveJobs = jobs.filter(isLiveJob); + const running = liveCommands.length + liveJobs.length; + if (!running) return null; + return ( + + {liveJobs.map((job) => cancelJob(job.job_id)} />)} + {liveCommands.map((task) => cancelCommand(task.task_id)} />)} + + ); +} + +function ContextCard({ toolCalls, toolFailed }: { toolCalls: number; toolFailed: number }) { + const view = useContextUsageView(); + if (!view) return null; + const { breakdown, window, pct, level } = view; + return ( + + {pct}% + + + + } + > + + {CONTEXT_CATEGORIES.map((c) => { + const value = breakdown[c.key] as number; + if (!(value > 0)) return null; + return ( + + + {t(c.label)} + {formatTokens(value)} + + ); + })} + + {t('合计')} + {formatTokens(breakdown.total)} / {formatTokens(window)} + + + {t('工具调用')} + + {toolCalls} + {toolFailed > 0 && · {t('失败 {n}', { n: toolFailed })}} + + + + + ); +} + +const pathParts = (path: string) => path.split(/[/\\]/).filter(Boolean); + +/** + * The chat's project: its environment binding and its folder. A local project's + * folder opens in Finder / Explorer; a cloud project's folder opens in My Space. + */ +function EnvironmentCard({ projectId }: { projectId: string }) { + const info = useChatProject(projectId); + const [editing, setEditing] = useState(false); + const [opening, setOpening] = useState(false); + if (!info) return null; + const { project, environment, reloadEnvironment } = info; + const local = project.kind === 'local'; + const canConfigure = project.permission === 'admin'; + const localPath = local ? project.local_path || '' : ''; + const localParts = pathParts(localPath); + const folderName = local ? localParts[localParts.length - 1] || project.name : project.folder_name || project.name; + const teamName = 'team_name' in project && typeof project.team_name === 'string' ? project.team_name : ''; + const folderPlace = local ? localParts[localParts.length - 2] || '' : teamName || t('我的空间'); + const environmentLabel = environment === 'custom' ? t('自定义项目环境') : environment === 'all' ? t('全部可用环境') : t('项目环境'); + const EnvironmentIcon = local ? LaptopOutlined : CloudOutlined; + + const openFolder = async () => { + if (local) { + if (localPath) window.location.href = '/__desktop/open-path?path=' + encodeURIComponent(localPath); + return; + } + setOpening(true); + try { + const { space, path } = await projectSpaceLocation(project); + useMySpaceStore.getState().openSpaceFolder(space, path); + } catch (error) { + message.error(t('无法打开项目文件夹：{reason}', { reason: error instanceof Error ? error.message : String(error) })); + } finally { + setOpening(false); + } + }; + + return ( + + {/* Only the gear opens the settings; the row itself just reports the binding. */} + + + {environmentLabel} + {canConfigure && ( + + setEditing(true)}> + + + + )} + + {(!local || localPath) && ( + void openFolder()} + title={local ? t('在访达 / 文件管理器中打开项目文件夹：{path}', { path: localPath }) : t('在我的空间中打开项目文件夹')} + > + {opening ? : } + {folderName} + {folderPlace && {folderPlace}} + + )} + {editing && ( + { setEditing(false); reloadEnvironment(); }} /> + )} + + ); +} + +/** + * Run monitor inside the conversation pane, right of the messages: one card per + * concern (project environment, context, sub-agents, output and input files, + * background tasks). + * Cards with nothing to show stay hidden. Rows open their sub-agent session or + * file in the canvas; the rail hides when the pane is too narrow for both. + */ +export function RunMonitorRail() { + const chatId = useChatStore((s) => s.currentChatId); + const projectId = useChatStore((s) => (s.currentChatId ? s.store.chats[s.currentChatId]?.projectId : undefined)); + const messages = useChatStore((s) => (s.currentChatId ? s.store.chats[s.currentChatId]?.messages : undefined)); + const activeTabId = useCanvasStore((s) => (s.isOpen ? s.activeTabId : null)); + + const subagents = useMemo(() => collectSubagents(messages), [messages]); + const files = useMemo(() => collectFiles(messages, chatId || undefined), [messages, chatId]); + const toolStats = useMemo(() => countToolCalls(messages), [messages]); + + if (!chatId || !messages?.length) return null; + + return ( + + ); +} diff --git a/src/frontend/src/components/monitor/index.ts b/src/frontend/src/components/monitor/index.ts new file mode 100644 index 00000000..bce7bcfa --- /dev/null +++ b/src/frontend/src/components/monitor/index.ts @@ -0,0 +1 @@ +export { RunMonitorRail } from './RunMonitorRail'; diff --git a/src/frontend/src/components/monitor/runMonitorData.ts b/src/frontend/src/components/monitor/runMonitorData.ts new file mode 100644 index 00000000..8aebe8bf --- /dev/null +++ b/src/frontend/src/components/monitor/runMonitorData.ts @@ -0,0 +1,104 @@ +import type { ChatMessage, ToolCall } from '../../types'; +import type { CanvasArtifact } from '../../stores/canvasStore'; +import { artifactOrigin } from '../../utils/artifactAccess'; +import { extractArtifactOutputs } from '../../utils/fileParser'; + +export interface MonitorSubagent { + tool: ToolCall; + messageUid: string; + isStreaming: boolean; +} + +export interface MonitorFiles { + input: CanvasArtifact[]; + output: CanvasArtifact[]; +} + +export interface MonitorToolStats { + calls: number; + failed: number; +} + +/** Every call_subagent in the chat, in the order the agent made them. */ +export function collectSubagents(messages: ChatMessage[] | undefined): MonitorSubagent[] { + const result: MonitorSubagent[] = []; + for (const m of messages || []) { + if (m.role !== 'assistant') continue; + for (const tool of m.toolCalls || []) { + if (tool.name === 'call_subagent' && tool.id) { + result.push({ tool, messageUid: m.uid, isStreaming: !!m.isStreaming }); + } + } + } + return result; +} + +function toArtifact(raw: Record, chatId?: string): CanvasArtifact { + const name = String(raw.name || raw.filename || '').split(/[\\/]/).pop() || String(raw.file_id); + const artifact = { + ...raw, + file_id: String(raw.file_id), + name, + url: typeof raw.url === 'string' ? raw.url : '', + chat_id: typeof raw.chat_id === 'string' ? raw.chat_id : chatId, + } as CanvasArtifact; + return { ...artifact, origin: artifactOrigin(artifact) }; +} + +/** + * Files that went into and came out of the chat. + * + * Input is what the user attached. Output is every file a tool or sub-agent + * wrote, including intermediates the agent did not pin to the conversation: + * the monitor shows the whole run, not only the delivered cards. + */ +export function collectFiles(messages: ChatMessage[] | undefined, chatId?: string): MonitorFiles { + const input = new Map(); + const output = new Map(); + const collect = (value: unknown) => { + for (const raw of extractArtifactOutputs(value)) { + const artifact = toArtifact(raw, chatId); + output.delete(artifact.file_id); + output.set(artifact.file_id, artifact); + } + }; + for (const m of messages || []) { + if (m.role === 'user') { + for (const att of m.attachments || []) { + if (!att.file_id) continue; + input.set(att.file_id, toArtifact({ + file_id: att.file_id, origin: att.origin, name: att.name, + url: att.download_url || `/files/${att.file_id}`, mime_type: att.mime_type, + }, chatId)); + } + continue; + } + for (const tool of m.toolCalls || []) { + if (tool.status != null && tool.status !== 'success') continue; + // pin_to_workspace echoes a file that another tool already produced. + if (tool.name !== 'pin_to_workspace') collect(tool.output); + for (const step of tool.subSteps || []) { + if (step.kind === 'tool' && step.status === 'success') collect(step.output); + } + } + } + return { input: [...input.values()], output: [...output.values()] }; +} + +/** Tool calls made in the chat, sub-agent steps included. */ +export function countToolCalls(messages: ChatMessage[] | undefined): MonitorToolStats { + let calls = 0; + let failed = 0; + for (const m of messages || []) { + for (const tool of m.toolCalls || []) { + calls += 1; + if (tool.status === 'error') failed += 1; + for (const step of tool.subSteps || []) { + if (step.kind !== 'tool') continue; + calls += 1; + if (step.status === 'error') failed += 1; + } + } + } + return { calls, failed }; +} diff --git a/src/frontend/src/components/monitor/useBackgroundTasks.ts b/src/frontend/src/components/monitor/useBackgroundTasks.ts new file mode 100644 index 00000000..d38532ab --- /dev/null +++ b/src/frontend/src/components/monitor/useBackgroundTasks.ts @@ -0,0 +1,74 @@ +import { useCallback, useEffect, useState } from 'react'; +import { cancelCommandApi, cancelJobApi, listChatCommands, listChatJobs } from '../../api'; +import { useChatStore } from '../../stores/chatStore'; +import type { CommandTaskBrief, JobBrief } from '../../types'; + +const LIVE_COMMAND = new Set(['starting', 'running']); +const LIVE_JOB = new Set(['pending', 'running']); +/** Live tasks change by the second; poll only while something can still move. */ +const POLL_MS = 3000; + +export interface BackgroundTasks { + commands: CommandTaskBrief[]; + jobs: JobBrief[]; + cancelCommand: (taskId: string) => Promise; + cancelJob: (jobId: string) => Promise; +} + +export const isLiveCommand = (task: CommandTaskBrief) => LIVE_COMMAND.has(task.status); +export const isLiveJob = (job: JobBrief) => LIVE_JOB.has(job.status); + +/** + * Background commands and batch jobs of a chat. + * + * Polls while a task is live or the chat has a run in flight (a run can hand a + * command to the background at any moment); otherwise it fetches once per chat + * and again when a run ends. + */ +export function useBackgroundTasks(chatId: string | null): BackgroundTasks { + // Keyed by chat so switching chats never shows the previous chat's tasks. + const [state, setState] = useState<{ chatId: string | null; commands: CommandTaskBrief[]; jobs: JobBrief[] }>( + { chatId: null, commands: [], jobs: [] }, + ); + const [refresh, setRefresh] = useState(0); + const runActive = useChatStore((s) => !!chatId && (s.sendingChatIds.has(chatId) || !!s.activeRuns[chatId])); + const commands = state.chatId === chatId ? state.commands : []; + const jobs = state.chatId === chatId ? state.jobs : []; + const live = commands.some(isLiveCommand) || jobs.some(isLiveJob); + + useEffect(() => { + if (!chatId) return; + let active = true; + let timer: ReturnType | undefined; + const load = async () => { + const [nextCommands, nextJobs] = await Promise.all([ + listChatCommands(chatId).catch(() => null), + listChatJobs(chatId, false).catch(() => null), + ]); + if (!active) return; + setState((prev) => { + const base = prev.chatId === chatId ? prev : { chatId, commands: [], jobs: [] }; + return { + chatId, + // Older backends do not send `background`; their live rows are the background ones. + commands: nextCommands ? nextCommands.filter((task) => task.background ?? isLiveCommand(task)) : base.commands, + jobs: nextJobs ?? base.jobs, + }; + }); + if (runActive || live) timer = setTimeout(load, POLL_MS); + }; + void load(); + return () => { active = false; clearTimeout(timer); }; + }, [chatId, runActive, live, refresh]); + + const cancelCommand = useCallback(async (taskId: string) => { + await cancelCommandApi(taskId, chatId || undefined); + setRefresh((n) => n + 1); + }, [chatId]); + const cancelJob = useCallback(async (jobId: string) => { + await cancelJobApi(jobId); + setRefresh((n) => n + 1); + }, []); + + return { commands, jobs, cancelCommand, cancelJob }; +} diff --git a/src/frontend/src/components/monitor/useChatProject.ts b/src/frontend/src/components/monitor/useChatProject.ts new file mode 100644 index 00000000..f2725f5a --- /dev/null +++ b/src/frontend/src/components/monitor/useChatProject.ts @@ -0,0 +1,36 @@ +import { useCallback, useEffect, useState } from 'react'; +import { getProject } from '../../api'; +import { getProjectEnvironment, type ProjectEnvironment } from '../../api/projectEnvironment'; +import type { ProjectDetail } from '../../types'; + +type EnvironmentMode = ProjectEnvironment['mode']; + +export interface ChatProject { + project: ProjectDetail; + /** null when the environment is not readable for this user. */ + environment: EnvironmentMode | null; + reloadEnvironment: () => void; +} + +/** The project a chat belongs to and its environment mode, for the run monitor. */ +export function useChatProject(projectId: string | undefined): ChatProject | null { + // Keyed by project so switching chats never shows the previous project. + const [state, setState] = useState<{ id: string; project: ProjectDetail | null; environment: EnvironmentMode | null } | null>(null); + const [revision, setRevision] = useState(0); + + useEffect(() => { + if (!projectId) return; + let active = true; + void Promise.all([ + getProject(projectId).catch(() => null), + getProjectEnvironment(projectId).then((detail) => detail.config.mode).catch(() => null), + ]).then(([project, environment]) => { + if (active) setState({ id: projectId, project, environment }); + }); + return () => { active = false; }; + }, [projectId, revision]); + + const reloadEnvironment = useCallback(() => setRevision((n) => n + 1), []); + if (!projectId || state?.id !== projectId || !state.project) return null; + return { project: state.project, environment: state.environment, reloadEnvironment }; +} diff --git a/src/frontend/src/components/myspace/MySpacePanel.tsx b/src/frontend/src/components/myspace/MySpacePanel.tsx index d16f104b..0e111bbc 100644 --- a/src/frontend/src/components/myspace/MySpacePanel.tsx +++ b/src/frontend/src/components/myspace/MySpacePanel.tsx @@ -1,8 +1,9 @@ -import { Suspense, useEffect } from 'react'; +import { Suspense, useEffect, useRef } from 'react'; import { useKbTab, useMySpaceTab } from '../../routing/subPages'; import { useMySpaceStore } from '../../stores/mySpaceStore'; import { useEditionStore } from '../../stores'; import { AgentWorkspaceView, usePersonalAgentName } from '../../personalAgentEdition'; +import { AgentWorkspaceSkeleton } from '../personal-agent/workspace/AgentWorkspaceSkeleton'; import { CatalogPanel } from '../catalog'; import { ShareRecordsPage } from '../share'; import { NotificationList } from './NotificationList'; @@ -28,10 +29,21 @@ export function MySpacePanel() { const tabs = TABS.filter(item => (item.scope !== 'team' || teams) && (item.kb !== 'public' || edition !== 'ce') && (!item.requiresPersonalAgent || !!agentName)); const active = tabs.find(item => item.tab === tab && (!item.scope || item.scope === kind) && (!item.kb || item.kb === kb)); + // 窄屏的 Tab 是横向滚动的胶囊条：切到靠后的 Tab（如从别处跳到「消息通知」）时把它滚进可视区。 + const tabsRef = useRef(null); + useEffect(() => { + const strip = tabsRef.current; + const current = strip?.querySelector('.jx-mySpace-tab.active'); + if (!strip || !current || strip.scrollWidth <= strip.clientWidth) return; + const left = current.getBoundingClientRect().left - strip.getBoundingClientRect().left + strip.scrollLeft; + if (left < strip.scrollLeft || left + current.offsetWidth > strip.scrollLeft + strip.clientWidth) { + strip.scrollTo({ left: Math.max(0, left - 16) }); + } + }, [active?.key]); return {tab === 'agent' ? agentName : active?.label} - + {tabs.map(item => { @@ -50,7 +62,7 @@ export function MySpacePanel() { : tab === 'kb' ? : tab === 'shares' ? : tab === 'notifications' ? - : } + : }>} { useChatStore.getState().setCurrentChatId(id); useCatalogStore.getState().setPanel('chat'); }} onPreviewFile={openFile} /> diff --git a/src/frontend/src/components/myspace/SpaceFileBrowser.tsx b/src/frontend/src/components/myspace/SpaceFileBrowser.tsx index 4fa58016..6ddad65f 100644 --- a/src/frontend/src/components/myspace/SpaceFileBrowser.tsx +++ b/src/frontend/src/components/myspace/SpaceFileBrowser.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from 'react'; import { Alert, Button, Dropdown, Empty, Input, Modal } from 'antd'; -import { ArrowLeftOutlined, DownOutlined, FolderAddOutlined, ReloadOutlined, SafetyOutlined, SearchOutlined, UploadOutlined } from '@ant-design/icons'; +import { ArrowLeftOutlined, DownOutlined, FolderAddOutlined, FolderOpenOutlined, PlusOutlined, ReloadOutlined, SafetyOutlined, SearchOutlined, UploadOutlined } from '@ant-design/icons'; import { SidebarToggleIcon } from './SidebarToggleIcon'; import type { PersonalFolderNode, ResourceItem } from '../../types'; import { t } from '../../i18n'; @@ -11,8 +11,10 @@ import { MySpaceSkeleton } from './MySpaceSkeleton'; import { SpacePermissions } from './SpacePermissions'; import { useSpaceCanvas } from './useSpaceCanvas'; import { useDelayedFlag } from '../../hooks'; +import { useIsMobileViewport } from '../../hooks/useIsMobileViewport'; import { SpaceDirectoryTree } from './SpaceDirectoryTree'; import { useSpaceDirectory } from './useSpaceDirectory'; +import { useMySpaceStore } from '../../stores/mySpaceStore'; import { createSpaceDirectory, deleteSpaceEntry, downloadSpaceFile, renameSpaceFile, uploadSpaceFile, type SpaceEntry } from './spaceFilesApi'; const joinPath = (parent: string, name: string) => parent ? parent + '/' + name : name; @@ -21,6 +23,14 @@ const imageName = /\.(png|jpe?g|gif|webp|bmp|svg|avif|ico)$/i; export function SpaceFileBrowser({ kind }: { kind: 'personal' | 'team' }) { const [query, setQuery] = useState(''); const s = useSpaceDirectory(kind, query); + // Another view (the run monitor) asked for a folder: open it once its space is listed. + const pendingFolder = useMySpaceStore((state) => state.pendingFolder); + const { open: openFolder, roots: spaceRoots } = s; + useEffect(() => { + if (!pendingFolder || !spaceRoots.some((item) => item.space_id === pendingFolder.space)) return; + openFolder(pendingFolder.space, pendingFolder.path); + useMySpaceStore.getState().clearPendingFolder(); + }, [pendingFolder, spaceRoots, openFolder]); const { roots, selected, path, setPath, page, loading, initializing, busy, error, root, writable, reload, perform, loadMore, dialog, setDialog, name, setName, permissions, setPermissions } = s; const [filter, setFilter] = useState<'document' | 'image'>('document'); @@ -34,6 +44,8 @@ export function SpaceFileBrowser({ kind }: { kind: 'personal' | 'team' }) { const [drawerOpen, setDrawerOpen] = useState(false); const [pagedAt, setPagedAt] = useState(''); const fileInput = useRef(null); + // 手机上「新建文件夹 / 上传」收进一个圆形「+」菜单，像 iOS 导航栏的添加按钮，不再并排两个大按钮。 + const isMobile = useIsMobileViewport(); useEffect(() => { if (!drawerOpen) return; const close = (event: KeyboardEvent) => { if (event.key === 'Escape') setDrawerOpen(false); }; @@ -154,8 +166,18 @@ export function SpaceFileBrowser({ kind }: { kind: 'personal' | 'team' }) { - {kind === 'personal' && path && } onClick={() => setPath(parts.slice(0, -1).join('/'))}>{t('返回上级')}} - {kind === 'personal' && writable && <> + {kind === 'personal' && path && } onClick={() => setPath(parts.slice(0, -1).join('/'))}>{t('返回上级')}} + {kind === 'personal' && writable && isMobile && , label: t('新建文件夹'), disabled: busy, onClick: () => { setName(''); setDialog('directory'); } }, + { key: 'file', icon: , label: t(filter === 'image' ? '上传图片' : '上传文件'), disabled: busy, onClick: () => fileInput.current?.click() }, + { key: 'folder', icon: , label: t('上传文件夹'), disabled: busy, onClick: () => folderInput.current?.click() }, + ] }}> + }> + {progress ? `${progress.done}/${progress.total}` : null} + + } + {kind === 'personal' && writable && !isMobile && <> } disabled={busy} onClick={() => { setName(''); setDialog('directory'); }}>{t('新建文件夹')} fileInput.current?.click() }, @@ -166,7 +188,7 @@ export function SpaceFileBrowser({ kind }: { kind: 'personal' | 'team' }) { } - {kind === 'personal' && } disabled={busy} onClick={reload} />} + {kind === 'personal' && } disabled={busy} onClick={reload} />} } value={query} allowClear onChange={event => setQuery(event.target.value)} /> diff --git a/src/frontend/src/components/onboarding/FirstRunSetup.tsx b/src/frontend/src/components/onboarding/FirstRunSetup.tsx index 02eadf24..3b78d5bc 100644 --- a/src/frontend/src/components/onboarding/FirstRunSetup.tsx +++ b/src/frontend/src/components/onboarding/FirstRunSetup.tsx @@ -3,7 +3,6 @@ import { CheckCircleFilled, ExclamationCircleFilled, RobotOutlined, - SafetyCertificateOutlined, ThunderboltOutlined, } from '@ant-design/icons'; @@ -29,7 +28,6 @@ import { getMemorySettings, getModelProviderSchemas, getMyServiceConfigs, - getOntologySettings, getUserPreferences, listModelProviders, listModelRoles, @@ -38,7 +36,6 @@ import { updateMemorySettings, updateMemoryWriteSettings, updateMyServiceConfigs, - updateOntologySettings, updateUserPreferences, type AuthUser, type ModelProviderItem, @@ -112,7 +109,7 @@ const STEP_META = [ { title: '模型配置', hint: '连接推理与检索服务' }, { title: '联网搜索', hint: '可选服务' }, { title: '文件解析', hint: '可选服务' }, - { title: '智能增强', hint: '记忆与本体' }, + { title: '智能增强', hint: '记忆与进化' }, { title: '准备就绪', hint: '检查并进入' }, ] as const; @@ -182,9 +179,6 @@ export function FirstRunSetup({ user, onComplete }: FirstRunSetupProps) { // below still decides whether that choice can take effect, so this is a // recommendation rather than a decision made on the user's behalf. const [evolutionEnabled, setEvolutionEnabled] = useState(true); - const [ontologyEnabled, setOntologyEnabled] = useState(false); - const [ontologyAvailable, setOntologyAvailable] = useState(false); - const [activeOntologyCount, setActiveOntologyCount] = useState(0); // Evolution cannot do its job without the embedding model (intent clustering // and the memory scan both fall back to something measurably blind) and it @@ -209,7 +203,7 @@ export function FirstRunSetup({ user, onComplete }: FirstRunSetupProps) { setLoading(true); setLoadError(''); try { - const [prefs, modelProviders, modelRoles, providerSchemas, groups, memory, ontology] = + const [prefs, modelProviders, modelRoles, providerSchemas, groups, memory] = await Promise.all([ getUserPreferences(user.user_id), listModelProviders(), @@ -217,7 +211,6 @@ export function FirstRunSetup({ user, onComplete }: FirstRunSetupProps) { getModelProviderSchemas(), getMyServiceConfigs(), getMemorySettings(), - getOntologySettings(), ]); setPreferences(prefs); @@ -272,9 +265,6 @@ export function FirstRunSetup({ user, onComplete }: FirstRunSetupProps) { setMemoryWriteEnabled(memory.memory_write_enabled); setMemoryAvailable(memory.mem0_available); setEmbeddingAvailable(memory.embedding_available); - setOntologyEnabled(ontology.ontology_enabled); - setOntologyAvailable(ontology.available); - setActiveOntologyCount(ontology.active_packs?.length || 0); } catch (error) { setLoadError((error as Error).message || t('初始化信息加载失败')); } finally { @@ -479,7 +469,6 @@ export function FirstRunSetup({ user, onComplete }: FirstRunSetupProps) { // Written on every pass, including when it resolves to false, so the // wizard is what decides this rather than the stored default. updateEvolutionPrefs({ enabled: evolutionActive }), - updateOntologySettings(ontologyAvailable && ontologyEnabled), ]); } else { await completeFirstRunSetup(); @@ -490,7 +479,6 @@ export function FirstRunSetup({ user, onComplete }: FirstRunSetupProps) { } await Promise.all([ useSettingsStore.getState().loadMemorySettings(), - useSettingsStore.getState().loadOntologySettings(), useModelCapabilitiesStore.getState().fetchCapabilities(), ]); message.success(t('初始化完成，欢迎使用 {name}', { name: brandName })); @@ -938,23 +926,6 @@ export function FirstRunSetup({ user, onComplete }: FirstRunSetupProps) { )} - - - - - {t('本体核验')} - - - {t('工具调用和高风险结果会经过领域规则检查，减少不符合业务约束的输出。')} - {ontologyAvailable - ? {t('已发布 {n} 个领域包', { n: activeOntologyCount })} - : {t('尚无已发布的领域本体包')}} - - ); @@ -970,7 +941,6 @@ export function FirstRunSetup({ user, onComplete }: FirstRunSetupProps) { {t('重排模型')}{selectedAuxProviderIds.reranker ? t('已配置') : t('未配置')} {t('永久记忆')}{memoryReady ? t('开启') : t('关闭')} {t('启动进化')}{evolutionActive ? t('开启') : t('关闭')} - {t('本体核验')}{ontologyAvailable && ontologyEnabled ? t('开启') : t('关闭')} ); @@ -988,7 +958,7 @@ export function FirstRunSetup({ user, onComplete }: FirstRunSetupProps) { ['连接你的 AI 模型', '主对话模型为必填项；索引模型和重排模型可按需配置。'], ['让智能体访问实时信息', '配置搜索服务后，天气、新闻和公开资料查询会更加完整。'], ['决定如何读取复杂文档', '外部解析服务适合 PDF、扫描件和包含公式的文档。'], - ['选择需要的智能增强', '你可以控制是否跨对话记忆、是否让系统从你的用法中自我进化，以及是否执行领域本体核验。'], + ['选择需要的智能增强', '你可以控制是否跨对话记忆，以及是否让系统从你的用法中自我进化。'], ['一切就绪', '完成初始化后，你将进入 HugAgentOS 工作台。'], ]; diff --git a/src/frontend/src/components/ontology/OntologyDetailDrawer.tsx b/src/frontend/src/components/ontology/OntologyDetailDrawer.tsx deleted file mode 100644 index 02a25658..00000000 --- a/src/frontend/src/components/ontology/OntologyDetailDrawer.tsx +++ /dev/null @@ -1,617 +0,0 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; -import { - Alert, - Button, - Card, - Descriptions, - Drawer, - Empty, - Select, - Space, - Spin, - Tabs, - Tag, - Typography, -} from 'antd'; -import { - CheckCircleOutlined, - ClockCircleOutlined, - CloseCircleOutlined, - DeploymentUnitOutlined, - EditOutlined, - SafetyCertificateOutlined, - ShareAltOutlined, - TagsOutlined, -} from '@ant-design/icons'; -import { adminFetch } from '../../utils/adminApi'; -import { formatDateTime } from '../../utils/date'; -import { t } from '../../i18n'; -import { OntologyListPagination } from './OntologyListPagination'; -import { ONTOLOGY_LIST_DEFAULT_PAGE_SIZE, paginateOntologyItems } from './ontologyPagination'; -import { OntologyModuleEditor } from './OntologyModuleEditor'; -import type { - OntologyDocument, - OntologyEditableModule, - OntologyPackSummary, - OntologyPackVersion, - ValidationIssue, -} from './ontologyTypes'; - -const { Paragraph, Text, Title } = Typography; - -interface OntologyDetailDrawerProps { - token: string; - apiPrefix: string; - pack: OntologyPackSummary | null; - initialVersionId?: string; - onClose: () => void; - onChanged: () => Promise | void; -} - -interface EditableModulePanelProps { - module: OntologyEditableModule; - description: string; - onEdit: (module: OntologyEditableModule) => void; - children: React.ReactNode; -} - -type PaginatedOntologyModule = Exclude; - -interface OntologyModulePaginationState { - current: number; - pageSize: number; -} - -interface OntologyPaginationStore { - requestKey: string; - modules: Record; -} - -function createModulePagination(): Record { - return { - concepts: { current: 1, pageSize: ONTOLOGY_LIST_DEFAULT_PAGE_SIZE }, - relations: { current: 1, pageSize: ONTOLOGY_LIST_DEFAULT_PAGE_SIZE }, - constraints: { current: 1, pageSize: ONTOLOGY_LIST_DEFAULT_PAGE_SIZE }, - workflows: { current: 1, pageSize: ONTOLOGY_LIST_DEFAULT_PAGE_SIZE }, - }; -} - -const MODULE_TITLES: Record = { - overview: t('基本信息与运行配置'), - concepts: t('概念词表'), - relations: t('概念关系'), - constraints: t('执行约束'), - workflows: t('领域工作流'), -}; - -function EditableModulePanel({ module, description, onEdit, children }: EditableModulePanelProps) { - return ( - - - - {MODULE_TITLES[module]} - {description} - - } onClick={() => onEdit(module)}> - {t('编辑此模块')} - - - {children} - - ); -} - -function statusColor(status: OntologyPackVersion['status']): string { - if (status === 'active') return 'green'; - if (status === 'retired') return 'default'; - return 'blue'; -} - -function statusLabel(status: OntologyPackVersion['status']): string { - if (status === 'active') return t('已激活'); - if (status === 'retired') return t('已归档'); - return t('工作草稿'); -} - -function riskColor(risk?: string): string { - if (risk === 'high') return 'red'; - if (risk === 'medium') return 'orange'; - return 'green'; -} - -function yesNo(value?: boolean): string { - return value ? t('是') : t('否'); -} - -function ValueTags({ values, color }: { values?: string[]; color?: string }) { - if (!values?.length) return {t('无')}; - return ( - - {values.map((value) => {value})} - - ); -} - -function ValidationList({ items, kind }: { items?: ValidationIssue[]; kind: 'error' | 'warning' }) { - if (!items?.length) { - return ; - } - const Icon = kind === 'error' ? CloseCircleOutlined : ClockCircleOutlined; - return ( - - {items.map((item, index) => ( - - - - {item.path && {item.path}} - {item.message || t('未知校验问题')} - - - ))} - - ); -} - -export function OntologyDetailDrawer({ - token, - apiPrefix, - pack, - initialVersionId, - onClose, - onChanged, -}: OntologyDetailDrawerProps) { - const [selectedVersionId, setSelectedVersionId] = useState(initialVersionId); - const [editingModule, setEditingModule] = useState(null); - const [loadState, setLoadState] = useState<{ - key: string; - document: OntologyDocument | null; - error: string; - }>({ key: '', document: null, error: '' }); - const initialVersion = pack?.versions.find((version) => version.version_id === pack.active_version_id) - ?? pack?.versions[0]; - const effectiveVersionId = pack?.versions.some((version) => version.version_id === selectedVersionId) - ? selectedVersionId - : initialVersion?.version_id; - const packId = pack?.pack_id; - const selectedVersion = pack?.versions.find((version) => version.version_id === effectiveVersionId); - const workingDraft = pack?.versions.find( - (version) => version.version_id === pack.working_draft_version_id, - ) ?? pack?.versions.find((version) => version.status === 'draft'); - const existingVersions = useMemo( - () => pack?.versions.map((version) => version.version) ?? [], - [pack?.versions], - ); - const requestKey = packId && effectiveVersionId - ? `${packId}:${effectiveVersionId}:${selectedVersion?.checksum ?? ''}` - : ''; - const [paginationStore, setPaginationStore] = useState(() => ({ - requestKey: '', - modules: createModulePagination(), - })); - const modulePagination = paginationStore.requestKey === requestKey - ? paginationStore.modules - : createModulePagination(); - - const handleEditModule = (module: OntologyEditableModule) => { - if (workingDraft && effectiveVersionId !== workingDraft.version_id) { - setSelectedVersionId(workingDraft.version_id); - } - setEditingModule(module); - }; - - useEffect(() => { - if (!packId || !effectiveVersionId || !requestKey) return; - let cancelled = false; - void adminFetch( - token, - `${apiPrefix}/${encodeURIComponent(packId)}/versions/${encodeURIComponent(effectiveVersionId)}/export`, - ) - .then((response) => { - if (!cancelled) { - setLoadState({ key: requestKey, document: (response?.data ?? response) as OntologyDocument, error: '' }); - } - }) - .catch((error: unknown) => { - if (!cancelled) { - setLoadState({ - key: requestKey, - document: null, - error: error instanceof Error ? error.message : t('完整本体内容加载失败'), - }); - } - }); - return () => { cancelled = true; }; - }, [apiPrefix, effectiveVersionId, packId, requestKey, token]); - - const handleModulePageChange = useCallback(( - module: PaginatedOntologyModule, - current: number, - pageSize: number, - ) => { - setPaginationStore((previous) => { - const modules = previous.requestKey === requestKey - ? previous.modules - : createModulePagination(); - return { - requestKey, - modules: { - ...modules, - [module]: { current, pageSize }, - }, - }; - }); - }, [requestKey]); - - const isCurrentRequest = Boolean(requestKey) && loadState.key === requestKey; - const loading = Boolean(requestKey) && !isCurrentRequest; - const document = isCurrentRequest ? loadState.document : null; - const loadError = isCurrentRequest ? loadState.error : ''; - const concepts = useMemo(() => document?.concepts ?? [], [document]); - const relations = document?.relations ?? []; - const constraints = document?.constraints ?? []; - const workflows = document?.workflows ?? []; - const pagedConcepts = paginateOntologyItems( - concepts, - modulePagination.concepts.current, - modulePagination.concepts.pageSize, - ); - const pagedRelations = paginateOntologyItems( - relations, - modulePagination.relations.current, - modulePagination.relations.pageSize, - ); - const pagedConstraints = paginateOntologyItems( - constraints, - modulePagination.constraints.current, - modulePagination.constraints.pageSize, - ); - const pagedWorkflows = paginateOntologyItems( - workflows, - modulePagination.workflows.current, - modulePagination.workflows.pageSize, - ); - const conceptNames = useMemo( - () => new Map(concepts.map((concept) => [concept.id, concept.name])), - [concepts], - ); - - const overview = document && selectedVersion ? ( - - - - - {document.pack_id} - {document.domain} - {document.schema_version || '-'} - v{document.version} - {formatDateTime(selectedVersion.created_at)} - {formatDateTime(selectedVersion.activated_at)} - {selectedVersion.checksum} - - - - - - {yesNo(document.config?.injection_enabled)} - {document.config?.max_concepts ?? '-'} - {document.config?.token_budget ?? '-'} - {document.config?.committee_size ?? '-'} - {document.config?.repeated_denial_threshold ?? '-'} - {document.config?.circuit_breaker_threshold ?? '-'} - {yesNo(document.config?.allow_unresolved_tools)} - - - - - ) : null; - - const conceptPanel = concepts.length ? ( - - - {pagedConcepts.map((concept) => ( - - - - {concept.name} - {concept.id} - - {t('{risk} 风险', { risk: concept.risk ?? 'low' })} - - {concept.definition} - {concept.parent_id && ( - - {t('上位概念')} - {conceptNames.get(concept.parent_id) || concept.parent_id} {concept.parent_id} - - )} - - {t('别名')} - - - - {t('标签')} - - - {Boolean(concept.closed_values?.length) && ( - - {t('受控取值')} - - - )} - - ))} - - handleModulePageChange('concepts', current, pageSize)} - /> - - ) : ( - - - - ); - - const relationPanel = relations.length ? ( - - - {pagedRelations.map((relation) => ( - - - {conceptNames.get(relation.subject) || relation.subject}{relation.subject} - {relation.predicate} - {conceptNames.get(relation.object) || relation.object}{relation.object} - - {relation.description && {relation.description}} - - {relation.id} - {t('最少 {n} 个', { n: relation.min_cardinality ?? 0 })} - {relation.max_cardinality == null ? t('数量不设上限') : t('最多 {n} 个', { n: relation.max_cardinality })} - {relation.forbidden && {t('禁止关系')}} - - - ))} - - handleModulePageChange('relations', current, pageSize)} - /> - - ) : ( - - - - ); - - const constraintPanel = constraints.length ? ( - - - {pagedConstraints.map((constraint) => { - const target = constraint.target; - const targetValue = target.kind === 'output' - ? target.output_tag - : [target.tool, target.parameter].filter(Boolean).join(' · '); - return ( - - - - {constraint.name} - {constraint.id} - - - {constraint.mode} - {t('{risk} 风险', { risk: constraint.risk ?? 'low' })} - {constraint.enabled === false ? t('已停用') : t('已启用')} - - - - - {target.kind} {targetValue || '-'} - - {constraint.concept_id || '-'} - {yesNo(constraint.requires_citations)} - - - - - {t('校验 Schema')} - {JSON.stringify(constraint.schema ?? {}, null, 2)} - - - ); - })} - - handleModulePageChange('constraints', current, pageSize)} - /> - - ) : ( - - - - ); - - const workflowPanel = workflows.length ? ( - - - {pagedWorkflows.map((workflow, index) => ( - - - {String((modulePagination.workflows.current - 1) * modulePagination.workflows.pageSize + index + 1).padStart(2, '0')} - - - - {workflow.name}{workflow.id} - - {t('评审：{level}', { level: workflow.review_level ?? 'none' })} - {t('{risk} 风险', { risk: workflow.risk ?? 'low' })} - - - {t('命中词')} - - {t('资产触发')} - [ - ...(trigger.ids || []).map((id) => `${trigger.kind}:${id}`), - ...(trigger.tags_any || []).map((tag) => `${trigger.kind}:#${tag}`), - ])} - color="cyan" - /> - - {t('必需工具')} - {t('禁止工具')} - {t('输出标签')} - - - ))} - - handleModulePageChange('workflows', current, pageSize)} - /> - - ) : ( - - - - ); - - const validationPanel = selectedVersion ? ( - - - - - - ) : null; - - const rawPanel = document ? ( - - - {t('原始 JSON 保留全部字段，可用于核对或迁移。')} - {t('复制完整 JSON')} - - {JSON.stringify(document, null, 2)} - - ) : null; - - return ( - <> - { - setEditingModule(null); - onClose(); - }} - width="min(1120px, calc(100vw - 24px))" - destroyOnHidden - className="jx-ontologyDetailDrawer" - extra={pack && ( - ({ - value: version.version_id, - label: `v${version.version} · ${statusLabel(version.status)}`, - }))} - /> - )} - > - - {loadError && } - {!loading && !loadError && !document && } - {document && pack && selectedVersion && ( - - - - - - {document.domain} - - v{selectedVersion.version} · {statusLabel(selectedVersion.status)} - - {pack.is_default && {t('默认领域包')}} - {pack.is_enabled ? t('已启用') : t('已停用')} - {selectedVersion.validation_report?.valid && } color="success">{t('校验通过')}} - - {document.name} - {document.description || pack.description || t('暂无描述')} - - - - - {concepts.length}{t('概念')} - {relations.length}{t('关系')} - {constraints.length}{t('约束')} - {workflows.length}{t('工作流')} - - - - - )} - - - setEditingModule(null)} - onSaved={async (versionId) => { - setSelectedVersionId(versionId); - await onChanged(); - }} - /> - - ); -} diff --git a/src/frontend/src/components/ontology/OntologyListPagination.tsx b/src/frontend/src/components/ontology/OntologyListPagination.tsx deleted file mode 100644 index 5af1561f..00000000 --- a/src/frontend/src/components/ontology/OntologyListPagination.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Pagination } from 'antd'; -import { t } from '../../i18n'; - -interface OntologyListPaginationProps { - current: number; - pageSize: number; - total: number; - onChange: (page: number, pageSize: number) => void; -} - -export function OntologyListPagination({ - current, - pageSize, - total, - onChange, -}: OntologyListPaginationProps) { - if (total <= 0) return null; - - return ( - - pageSize * 3} - showSizeChanger - showTotal={(count) => t('共 {total} 条', { total: count })} - onChange={onChange} - /> - - ); -} diff --git a/src/frontend/src/components/ontology/OntologyManager.tsx b/src/frontend/src/components/ontology/OntologyManager.tsx deleted file mode 100644 index c83be2da..00000000 --- a/src/frontend/src/components/ontology/OntologyManager.tsx +++ /dev/null @@ -1,525 +0,0 @@ -import { useCallback, useEffect, useState } from 'react'; -import { - Alert, - Button, - Descriptions, - Drawer, - Input, - Modal, - Space, - Switch, - Table, - Tabs, - Tag, - Typography, - message, -} from 'antd'; -import { - CheckCircleOutlined, - EyeOutlined, - HistoryOutlined, - ImportOutlined, - ReloadOutlined, -} from '@ant-design/icons'; -import { adminFetch, ADMIN_TABLE_PAGINATION } from '../../utils/adminApi'; -import { t } from '../../i18n'; -import { OntologyDetailDrawer } from './OntologyDetailDrawer'; -import { OntologyVersionManager } from './OntologyVersionManager'; -import type { OntologyPackSummary, OntologyPackVersion } from './ontologyTypes'; - -const { Paragraph, Text } = Typography; -const { TextArea } = Input; - -type PackVersion = OntologyPackVersion; -type OntologyPack = OntologyPackSummary; - -interface AuditEvent { - event_id: string; - created_at: string; - stage: string; - target?: string; - decision: string; - rule_id?: string; - latency_ms?: number; - details?: Record; -} - -interface ReviewRun { - review_id: string; - created_at: string; - level: string; - verdict: string; - latency_ms?: number; - evidence?: string[]; - feedback?: string; -} - -interface OntologyDraft { - draft_id: string; - pack_id: string; - candidate_type: string; - value_score: number; - review_status: string; - proposal: Record; - evidence: unknown[]; -} - -interface GovernanceMetrics { - events_total: number; - reviews_total: number; - drafts_total: number; - materialized_total: number; - event_decisions: Record; - review_verdicts: Record; - draft_statuses: Record; - source_acceptance: Record; - daily_30d: Array>; -} - -function verdictColor(value: string): string { - if (value === 'pass' || value === 'active' || value === 'approved') return 'green'; - if (value === 'deny' || value === 'escalate' || value === 'rejected') return 'red'; - if (value === 'revise' || value === 'log') return 'orange'; - return 'default'; -} - -interface OntologyManagerProps { - token?: string; - apiPrefix?: string; - onChanged?: () => Promise | void; -} - -export function OntologyManager({ - token = '', - apiPrefix = '/v1/admin/ontologies', - onChanged, -}: OntologyManagerProps) { - const [packs, setPacks] = useState([]); - const [events, setEvents] = useState([]); - const [reviews, setReviews] = useState([]); - const [drafts, setDrafts] = useState([]); - const [metrics, setMetrics] = useState(null); - const [forcePluginImportValidation, setForcePluginImportValidation] = useState(false); - const [policySaving, setPolicySaving] = useState(false); - const [loading, setLoading] = useState(false); - const [importOpen, setImportOpen] = useState(false); - const [importText, setImportText] = useState(''); - const [importActivate, setImportActivate] = useState(false); - const [importing, setImporting] = useState(false); - const [detail, setDetail] = useState<{ title: string; value: unknown } | null>(null); - const [detailPack, setDetailPack] = useState(null); - const [detailVersionId, setDetailVersionId] = useState(); - const [versionPack, setVersionPack] = useState(null); - - const loadAll = useCallback(async () => { - setLoading(true); - try { - const [packResp, eventResp, reviewResp, draftResp, metricsResp, policyResp] = await Promise.all([ - adminFetch(token, apiPrefix), - adminFetch(token, `${apiPrefix}/events?limit=100`), - adminFetch(token, `${apiPrefix}/reviews?limit=100`), - adminFetch(token, `${apiPrefix}/drafts?limit=100`), - adminFetch(token, `${apiPrefix}/metrics`), - adminFetch(token, `${apiPrefix}/policy`), - ]); - const nextPacks = ((packResp?.data ?? packResp)?.items ?? []) as OntologyPack[]; - setPacks(nextPacks); - setDetailPack((current) => ( - current ? nextPacks.find((item) => item.pack_id === current.pack_id) ?? null : null - )); - setVersionPack((current) => ( - current ? nextPacks.find((item) => item.pack_id === current.pack_id) ?? null : null - )); - setEvents((eventResp?.data ?? eventResp)?.items ?? []); - setReviews((reviewResp?.data ?? reviewResp)?.items ?? []); - setDrafts((draftResp?.data ?? draftResp)?.items ?? []); - setMetrics((metricsResp?.data ?? metricsResp) ?? null); - setForcePluginImportValidation(Boolean( - (policyResp?.data ?? policyResp)?.force_plugin_import_build_validation, - )); - await onChanged?.(); - } catch (err) { - message.error(t('加载本体资产失败：{msg}', { msg: (err as Error)?.message || String(err) })); - } finally { - setLoading(false); - } - }, [apiPrefix, onChanged, token]); - - useEffect(() => { void loadAll(); }, [loadAll]); - - const updatePolicy = async (enabled: boolean) => { - setPolicySaving(true); - try { - const resp = await adminFetch(token, `${apiPrefix}/policy`, { - method: 'PATCH', - body: JSON.stringify({ force_plugin_import_build_validation: enabled }), - }); - const data = resp?.data ?? resp; - setForcePluginImportValidation(Boolean(data?.force_plugin_import_build_validation)); - message.success(t(enabled ? '强制本体构建校验已开启' : '强制本体构建校验已关闭')); - await onChanged?.(); - } catch (err) { - message.error((err as Error)?.message || t('更新失败')); - } finally { - setPolicySaving(false); - } - }; - - const updateFlags = async (pack: OntologyPack, patch: { is_enabled?: boolean; is_default?: boolean }) => { - try { - await adminFetch(token, `${apiPrefix}/${encodeURIComponent(pack.pack_id)}`, { - method: 'PATCH', - body: JSON.stringify(patch), - }); - await loadAll(); - } catch (err) { - message.error((err as Error)?.message || t('更新失败')); - } - }; - - const activateVersion = async (pack: OntologyPack, version: PackVersion) => { - try { - await adminFetch( - token, - `${apiPrefix}/${encodeURIComponent(pack.pack_id)}/versions/${encodeURIComponent(version.version_id)}/activate`, - { method: 'POST' }, - ); - message.success(version.status === 'draft' ? t('工作草稿已发布') : t('本体版本已激活')); - await loadAll(); - } catch (err) { - message.error((err as Error)?.message || t('激活失败')); - } - }; - - const exportVersion = async (pack: OntologyPack, version: PackVersion) => { - try { - const resp = await adminFetch( - token, - `${apiPrefix}/${encodeURIComponent(pack.pack_id)}/versions/${encodeURIComponent(version.version_id)}/export`, - ); - const content = resp?.data ?? resp; - const blob = new Blob([JSON.stringify(content, null, 2)], { type: 'application/json' }); - const url = URL.createObjectURL(blob); - const anchor = document.createElement('a'); - anchor.href = url; - anchor.download = `${pack.pack_id}-${version.version}.json`; - document.body.appendChild(anchor); - anchor.click(); - anchor.remove(); - URL.revokeObjectURL(url); - } catch (err) { - message.error((err as Error)?.message || t('导出失败')); - } - }; - - const discardDraft = async (pack: OntologyPack, version: PackVersion) => { - try { - await adminFetch( - token, - `${apiPrefix}/${encodeURIComponent(pack.pack_id)}/draft/${encodeURIComponent(version.version_id)}`, - { method: 'DELETE' }, - ); - message.success(t('工作草稿已放弃')); - await loadAll(); - } catch (err) { - message.error((err as Error)?.message || t('放弃草稿失败')); - } - }; - - const importPack = async () => { - let document: Record; - try { - document = JSON.parse(importText) as Record; - } catch { - message.error(t('请输入合法 JSON')); - return; - } - setImporting(true); - try { - const validation = await adminFetch(token, `${apiPrefix}/validate`, { - method: 'POST', - body: JSON.stringify(document), - }); - const report = validation?.data ?? validation; - if (!report?.valid) { - setDetail({ title: t('Domain Pack 校验报告'), value: report }); - return; - } - await adminFetch(token, `${apiPrefix}/versions`, { - method: 'POST', - body: JSON.stringify({ document, activate: importActivate }), - }); - message.success(t('Domain Pack 已导入')); - setImportOpen(false); - setImportText(''); - setImportActivate(false); - await loadAll(); - } catch (err) { - message.error((err as Error)?.message || t('导入失败')); - } finally { - setImporting(false); - } - }; - - const reviewDraft = async (draft: OntologyDraft, approved: boolean) => { - try { - await adminFetch(token, `${apiPrefix}/drafts/${draft.draft_id}/review`, { - method: 'POST', - body: JSON.stringify({ approved, comment: approved ? '通过人工一致性审查' : '人工审查不通过' }), - }); - await loadAll(); - } catch (err) { - message.error((err as Error)?.message || t('审核失败')); - } - }; - - const generateDrafts = async () => { - try { - const resp = await adminFetch(token, `${apiPrefix}/evolution/generate`, { - method: 'POST', - body: JSON.stringify({ min_occurrences: 3, limit: 500 }), - }); - const data = resp?.data ?? resp; - message.success(t('已生成 {n} 条演进草案', { n: data?.created ?? 0 })); - await loadAll(); - } catch (err) { - message.error((err as Error)?.message || t('生成草案失败')); - } - }; - - const materializeDraft = async (draft: OntologyDraft) => { - try { - await adminFetch(token, `${apiPrefix}/drafts/${draft.draft_id}/materialize`, { - method: 'POST', - }); - message.success(t('已合并到工作草稿')); - await loadAll(); - } catch (err) { - message.error((err as Error)?.message || t('合并草稿失败')); - } - }; - - const packColumns = [ - { - title: t('领域包'), - key: 'name', - render: (_: unknown, row: OntologyPack) => ( - - {row.name} - {row.pack_id} - - ), - }, - { title: t('领域'), dataIndex: 'domain', key: 'domain' }, - { - title: t('当前版本'), - key: 'active', - render: (_: unknown, row: OntologyPack) => { - const active = row.versions.find((item) => item.version_id === row.active_version_id); - return active ? v{active.version} : {t('未激活')}; - }, - }, - { - title: t('启用'), - key: 'enabled', - render: (_: unknown, row: OntologyPack) => ( - void updateFlags(row, { is_enabled: value })} /> - ), - }, - { - title: t('默认'), - key: 'default', - render: (_: unknown, row: OntologyPack) => ( - void updateFlags(row, { is_default: value })} /> - ), - }, - { - title: t('版本治理'), - key: 'versions', - width: 250, - render: (_: unknown, row: OntologyPack) => ( - - } - onClick={() => setVersionPack(row)} - > - {t('版本管理（{n}）', { n: row.versions.length })} - - } - onClick={() => { - setDetailVersionId(undefined); - setDetailPack(row); - }} - > - {t('详情')} - - - ), - }, - ]; - - const eventColumns = [ - { title: t('时间'), dataIndex: 'created_at', key: 'created_at', width: 190 }, - { title: t('阶段'), dataIndex: 'stage', key: 'stage', width: 100 }, - { title: t('目标'), dataIndex: 'target', key: 'target' }, - { title: t('规则'), dataIndex: 'rule_id', key: 'rule_id' }, - { title: t('决策'), dataIndex: 'decision', key: 'decision', render: (v: string) => {v} }, - { title: t('延迟'), dataIndex: 'latency_ms', key: 'latency_ms', render: (v?: number) => v == null ? '-' : `${v} ms` }, - { title: '', key: 'detail', render: (_: unknown, row: AuditEvent) => setDetail({ title: row.event_id, value: row })}>{t('证据')} }, - ]; - - const reviewColumns = [ - { title: t('时间'), dataIndex: 'created_at', key: 'created_at', width: 190 }, - { title: t('级别'), dataIndex: 'level', key: 'level' }, - { title: t('结论'), dataIndex: 'verdict', key: 'verdict', render: (v: string) => {v} }, - { title: t('延迟'), dataIndex: 'latency_ms', key: 'latency_ms', render: (v?: number) => v == null ? '-' : `${v} ms` }, - { title: '', key: 'detail', render: (_: unknown, row: ReviewRun) => setDetail({ title: row.review_id, value: row })}>{t('证据')} }, - ]; - - const draftColumns = [ - { title: t('领域包'), dataIndex: 'pack_id', key: 'pack_id' }, - { title: t('候选类型'), dataIndex: 'candidate_type', key: 'candidate_type' }, - { title: t('价值分'), dataIndex: 'value_score', key: 'value_score' }, - { title: t('状态'), dataIndex: 'review_status', key: 'review_status', render: (v: string) => {v} }, - { - title: t('操作'), key: 'actions', render: (_: unknown, row: OntologyDraft) => ( - - setDetail({ title: row.draft_id, value: row })}>{t('详情')} - {row.review_status === 'pending' && <> - void reviewDraft(row, true)}>{t('通过')} - void reviewDraft(row, false)}>{t('驳回')} - } - {row.review_status === 'approved' - && row.candidate_type !== 'false_positive' - && !row.proposal.materialized_version_id && ( - void materializeDraft(row)}>{t('合并到工作草稿')} - )} - {Boolean(row.proposal.materialized_version_id) && {t('已合并草稿')}} - - ), - }, - ]; - - return ( - - - void updatePolicy(enabled)} - /> - )} - /> - - } loading={loading} onClick={() => void loadAll()}>{t('刷新')} - } onClick={() => setImportOpen(true)}>{t('导入 Domain Pack')} - void generateDrafts()}>{t('从运行证据生成草案')} - - - rowKey="pack_id" - loading={loading} - dataSource={packs} - columns={packColumns} - pagination={ADMIN_TABLE_PAGINATION} - /> - - - {metrics.events_total} - {metrics.reviews_total} - {metrics.drafts_total} - {metrics.materialized_total} - - - {JSON.stringify({ - event_decisions: metrics.event_decisions, - review_verdicts: metrics.review_verdicts, - draft_statuses: metrics.draft_statuses, - source_acceptance: metrics.source_acceptance, - daily_30d: metrics.daily_30d, - }, null, 2)} - - - ) : {t('暂无指标数据')}, - }, - { key: 'events', label: t('门禁审计'), children: }, - { key: 'reviews', label: t('评审记录'), children: }, - { key: 'drafts', label: t('演进草案'), children: }, - ]} /> - - setImportOpen(false)} - onOk={() => void importPack()} - okText={t('校验并导入')} - confirmLoading={importing} - width={760} - > - {t('粘贴完整的 Domain Pack JSON。每个领域包同时只能有一个工作草稿；勾选后可立即发布。')} - setImportText(event.target.value)} placeholder="{ ... }" /> - <Space style={{ marginTop: 12 }}> - <Switch checked={importActivate} onChange={setImportActivate} /> - <Text>{t('导入后立即发布')}</Text> - </Space> - </Modal> - - <OntologyVersionManager - pack={versionPack} - onClose={() => setVersionPack(null)} - onExport={exportVersion} - onActivate={activateVersion} - onDiscard={discardDraft} - onView={(pack, version) => { - setVersionPack(null); - setDetailVersionId(version.version_id); - setDetailPack(pack); - }} - /> - - <OntologyDetailDrawer - key={`${detailPack?.pack_id ?? 'closed'}:${detailVersionId ?? 'default'}`} - token={token} - apiPrefix={apiPrefix} - pack={detailPack} - initialVersionId={detailVersionId} - onClose={() => { - setDetailPack(null); - setDetailVersionId(undefined); - }} - onChanged={loadAll} - /> - - <Drawer title={detail?.title} open={!!detail} onClose={() => setDetail(null)} width={720}> - {detail && <> - <Descriptions size="small" column={1} bordered> - <Descriptions.Item label={t('结构化内容')}> - <CheckCircleOutlined style={{ color: '#52c41a' }} /> JSON - </Descriptions.Item> - </Descriptions> - <pre style={{ marginTop: 16, whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}> - {JSON.stringify(detail.value, null, 2)} - </pre> - </>} - </Drawer> - </Space> - ); -} diff --git a/src/frontend/src/components/ontology/OntologyModuleEditor.tsx b/src/frontend/src/components/ontology/OntologyModuleEditor.tsx deleted file mode 100644 index 520437ea..00000000 --- a/src/frontend/src/components/ontology/OntologyModuleEditor.tsx +++ /dev/null @@ -1,1246 +0,0 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; -import { - Alert, - Button, - Card, - Col, - Divider, - Form, - Input, - InputNumber, - Modal, - Row, - Select, - Space, - Switch, - Typography, - message, -} from 'antd'; -import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'; -import { adminFetch } from '../../utils/adminApi'; -import { t } from '../../i18n'; -import { OntologyListPagination } from './OntologyListPagination'; -import { ONTOLOGY_LIST_DEFAULT_PAGE_SIZE, paginateOntologyItems } from './ontologyPagination'; -import type { - OntologyConcept, - OntologyConstraint, - OntologyDocument, - OntologyEditableModule, - OntologyPackConfig, - OntologyPackVersion, - OntologyRelation, - OntologyWorkflow, - ValidationIssue, -} from './ontologyTypes'; - -const { Paragraph, Text, Title } = Typography; -const { TextArea } = Input; - -type JsonSchemaType = 'object' | 'array' | 'string' | 'number' | 'integer' | 'boolean'; - -interface SchemaPropertyFormValue { - name: string; - type: JsonSchemaType; - description?: string; - required?: boolean; - enum_values?: string[]; - min_length?: number; - max_length?: number; - minimum?: number; - maximum?: number; - pattern?: string; -} - -interface SchemaFormValue { - enabled?: boolean; - type?: JsonSchemaType; - description?: string; - enum_values?: string[]; - min_length?: number; - max_length?: number; - minimum?: number; - maximum?: number; - pattern?: string; - additional_properties?: boolean; - properties?: SchemaPropertyFormValue[]; -} - -interface ConstraintFormValue extends Omit<OntologyConstraint, 'schema'> { - schema_form?: SchemaFormValue; -} - -interface OntologyEditorValues { - next_version: string; - name?: string; - domain?: string; - description?: string; - config?: OntologyPackConfig; - concepts?: OntologyConcept[]; - relations?: OntologyRelation[]; - constraints?: ConstraintFormValue[]; - workflows?: OntologyWorkflow[]; -} - -interface OntologyModuleEditorProps { - token: string; - apiPrefix: string; - open: boolean; - module: OntologyEditableModule | null; - document: OntologyDocument | null; - version: OntologyPackVersion | null; - existingVersions: string[]; - onCancel: () => void; - onSaved: (versionId: string) => Promise<void> | void; -} - -interface FormListField { - key: number; - name: number; -} - -const IDENTIFIER_PATTERN = /^[A-Za-z][A-Za-z0-9_.:-]{0,127}$/; -const VERSION_PATTERN = /^[0-9]+\.[0-9]+\.[0-9]+(?:[-+][A-Za-z0-9.-]+)?$/; - -const RISK_OPTIONS = [ - { value: 'low', label: t('低风险') }, - { value: 'medium', label: t('中风险') }, - { value: 'high', label: t('高风险') }, -]; - -const SCHEMA_TYPE_OPTIONS = [ - { value: 'object', label: t('对象') }, - { value: 'array', label: t('数组') }, - { value: 'string', label: t('文本') }, - { value: 'number', label: t('数字') }, - { value: 'integer', label: t('整数') }, - { value: 'boolean', label: t('布尔值') }, -]; - -const MODULE_LABELS: Record<OntologyEditableModule, string> = { - overview: t('基本信息与运行配置'), - concepts: t('概念'), - relations: t('关系'), - constraints: t('约束'), - workflows: t('工作流'), -}; - -function isRecord(value: unknown): value is Record<string, unknown> { - return typeof value === 'object' && value !== null && !Array.isArray(value); -} - -function stringValue(value: unknown): string | undefined { - return typeof value === 'string' ? value : undefined; -} - -function numberValue(value: unknown): number | undefined { - return typeof value === 'number' && Number.isFinite(value) ? value : undefined; -} - -function nextPatchVersion(version: string, existingVersions: string[]): string { - const parsed = [version, ...existingVersions].flatMap((item) => { - const match = item.match(/^(\d+)\.(\d+)\.(\d+)/); - return match ? [[Number(match[1]), Number(match[2]), Number(match[3])]] : []; - }); - const latest = parsed.sort((left, right) => ( - right[0] - left[0] || right[1] - left[1] || right[2] - left[2] - ))[0]; - if (!latest) return '1.0.0'; - return `${latest[0]}.${latest[1]}.${latest[2] + 1}`; -} - -function schemaToForm(schema?: Record<string, unknown>): SchemaFormValue { - if (!schema || !Object.keys(schema).length) { - return { enabled: false, type: 'object', additional_properties: true, properties: [] }; - } - const properties = isRecord(schema.properties) ? schema.properties : {}; - const required = new Set( - Array.isArray(schema.required) - ? schema.required.filter((item): item is string => typeof item === 'string') - : [], - ); - return { - enabled: true, - type: stringValue(schema.type) as JsonSchemaType | undefined, - description: stringValue(schema.description), - enum_values: Array.isArray(schema.enum) ? schema.enum.map(String) : [], - min_length: numberValue(schema.minLength), - max_length: numberValue(schema.maxLength), - minimum: numberValue(schema.minimum), - maximum: numberValue(schema.maximum), - pattern: stringValue(schema.pattern), - additional_properties: schema.additionalProperties !== false, - properties: Object.entries(properties).flatMap(([name, value]) => { - if (!isRecord(value)) return []; - return [{ - name, - type: (stringValue(value.type) as JsonSchemaType | undefined) ?? 'string', - description: stringValue(value.description), - required: required.has(name), - enum_values: Array.isArray(value.enum) ? value.enum.map(String) : [], - min_length: numberValue(value.minLength), - max_length: numberValue(value.maxLength), - minimum: numberValue(value.minimum), - maximum: numberValue(value.maximum), - pattern: stringValue(value.pattern), - }]; - }), - }; -} - -function coerceEnumValue(value: string, type?: JsonSchemaType): string | number | boolean { - if (type === 'number' || type === 'integer') { - const parsed = Number(value); - return Number.isFinite(parsed) ? parsed : value; - } - if (type === 'boolean') return value === 'true'; - return value; -} - -function assignOptional(target: Record<string, unknown>, key: string, value: unknown): void { - if (value === undefined || value === null || value === '') { - delete target[key]; - } else { - target[key] = value; - } -} - -function schemaFromForm( - formValue: SchemaFormValue | undefined, - originalSchema?: Record<string, unknown>, -): Record<string, unknown> { - if (!formValue?.enabled) return {}; - const next: Record<string, unknown> = { ...(originalSchema ?? {}) }; - const type = formValue.type ?? 'object'; - next.type = type; - assignOptional(next, 'description', formValue.description); - assignOptional( - next, - 'enum', - formValue.enum_values?.length - ? formValue.enum_values.map((value) => coerceEnumValue(value, type)) - : undefined, - ); - assignOptional(next, 'minLength', formValue.min_length); - assignOptional(next, 'maxLength', formValue.max_length); - assignOptional(next, 'minimum', formValue.minimum); - assignOptional(next, 'maximum', formValue.maximum); - assignOptional(next, 'pattern', formValue.pattern); - - if (type === 'object') { - const originalProperties = isRecord(originalSchema?.properties) - ? originalSchema.properties - : {}; - const properties: Record<string, unknown> = {}; - const required: string[] = []; - for (const property of formValue.properties ?? []) { - const name = property.name?.trim(); - if (!name) continue; - const original = isRecord(originalProperties[name]) ? originalProperties[name] : {}; - const propertySchema: Record<string, unknown> = { ...original, type: property.type }; - assignOptional(propertySchema, 'description', property.description); - assignOptional( - propertySchema, - 'enum', - property.enum_values?.length - ? property.enum_values.map((value) => coerceEnumValue(value, property.type)) - : undefined, - ); - assignOptional(propertySchema, 'minLength', property.min_length); - assignOptional(propertySchema, 'maxLength', property.max_length); - assignOptional(propertySchema, 'minimum', property.minimum); - assignOptional(propertySchema, 'maximum', property.maximum); - assignOptional(propertySchema, 'pattern', property.pattern); - properties[name] = propertySchema; - if (property.required) required.push(name); - } - next.properties = properties; - assignOptional(next, 'required', required.length ? required : undefined); - next.additionalProperties = formValue.additional_properties !== false; - } else { - delete next.properties; - delete next.required; - delete next.additionalProperties; - } - return next; -} - -function validationIssues(value: unknown): ValidationIssue[] { - if (!isRecord(value)) return []; - const data = isRecord(value.data) ? value.data : value; - if (!Array.isArray(data.errors)) return []; - return data.errors.flatMap((item) => { - if (!isRecord(item)) return []; - return [{ - severity: stringValue(item.severity), - path: stringValue(item.path), - message: stringValue(item.message) ?? t('未知校验问题'), - }]; - }); -} - -function uniqueIdRule(label: string) { - return { - validator: async (_: unknown, items?: Array<{ id?: string }>) => { - const ids = (items ?? []).map((item) => item?.id?.trim()).filter(Boolean); - if (new Set(ids).size !== ids.length) { - throw new Error(t('{label}标识不能重复', { label })); - } - }, - }; -} - -function ModuleListHeader({ title, description }: { title: string; description: string }) { - return ( - <div className="jx-ontologyEditor-listHead"> - <div> - <Title level={5}>{title}</Title> - <Text type="secondary">{description}</Text> - </div> - </div> - ); -} - -function RemoveButton({ onClick }: { onClick: () => void }) { - return ( - <Button danger type="text" icon={<DeleteOutlined />} onClick={onClick}> - {t('移除')} - </Button> - ); -} - -function SchemaFields({ field }: { field: FormListField }) { - return ( - <Card size="small" className="jx-ontologyEditor-schemaCard"> - <div className="jx-ontologyEditor-schemaHead"> - <div> - <Text strong>{t('结构化校验规则')}</Text> - <Paragraph type="secondary"> - {t('按字段配置类型、必填项和取值范围，无需编写 JSON Schema。')} - </Paragraph> - </div> - <Form.Item name={[field.name, 'schema_form', 'enabled']} valuePropName="checked" noStyle> - <Switch checkedChildren={t('启用')} unCheckedChildren={t('不校验')} /> - </Form.Item> - </div> - <Row gutter={12}> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'schema_form', 'type']} label={t('数据类型')}> - <Select options={SCHEMA_TYPE_OPTIONS} /> - </Form.Item> - </Col> - <Col xs={24} md={16}> - <Form.Item name={[field.name, 'schema_form', 'description']} label={t('校验说明')}> - <Input placeholder={t('说明这条结构校验的用途')} /> - </Form.Item> - </Col> - </Row> - <Row gutter={12}> - <Col xs={12} md={6}> - <Form.Item name={[field.name, 'schema_form', 'min_length']} label={t('最小长度')}> - <InputNumber min={0} style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={12} md={6}> - <Form.Item name={[field.name, 'schema_form', 'max_length']} label={t('最大长度')}> - <InputNumber min={0} style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={12} md={6}> - <Form.Item name={[field.name, 'schema_form', 'minimum']} label={t('最小数值')}> - <InputNumber style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={12} md={6}> - <Form.Item name={[field.name, 'schema_form', 'maximum']} label={t('最大数值')}> - <InputNumber style={{ width: '100%' }} /> - </Form.Item> - </Col> - </Row> - <Row gutter={12}> - <Col xs={24} md={12}> - <Form.Item name={[field.name, 'schema_form', 'enum_values']} label={t('限定取值')}> - <Select mode="tags" tokenSeparators={[',', '，']} placeholder={t('输入后回车，可添加多个值')} /> - </Form.Item> - </Col> - <Col xs={24} md={12}> - <Form.Item name={[field.name, 'schema_form', 'pattern']} label={t('格式规则（正则，可选）')}> - <Input placeholder="^[A-Za-z0-9_-]+$" /> - </Form.Item> - </Col> - </Row> - <Divider titlePlacement="start" plain>{t('对象字段')}</Divider> - <Form.Item - name={[field.name, 'schema_form', 'additional_properties']} - label={t('允许未列出的其他字段')} - valuePropName="checked" - > - <Switch /> - </Form.Item> - <Form.List name={[field.name, 'schema_form', 'properties']}> - {(propertyFields, { add, remove }) => ( - <Space direction="vertical" size="small" style={{ width: '100%' }}> - {propertyFields.map((propertyField) => ( - <div className="jx-ontologyEditor-property" key={propertyField.key}> - <Row gutter={10} align="middle"> - <Col xs={24} md={6}> - <Form.Item - name={[propertyField.name, 'name']} - label={t('字段名')} - rules={[{ required: true, message: t('请输入字段名') }]} - > - <Input placeholder="company_id" /> - </Form.Item> - </Col> - <Col xs={12} md={5}> - <Form.Item name={[propertyField.name, 'type']} label={t('类型')} rules={[{ required: true }]}> - <Select options={SCHEMA_TYPE_OPTIONS} /> - </Form.Item> - </Col> - <Col xs={12} md={4}> - <Form.Item name={[propertyField.name, 'required']} label={t('必填')} valuePropName="checked"> - <Switch /> - </Form.Item> - </Col> - <Col xs={24} md={7}> - <Form.Item name={[propertyField.name, 'description']} label={t('字段说明')}> - <Input /> - </Form.Item> - </Col> - <Col xs={24} md={2} className="jx-ontologyEditor-propertyRemove"> - <Button - danger - type="text" - aria-label={t('移除字段')} - icon={<DeleteOutlined />} - onClick={() => remove(propertyField.name)} - /> - </Col> - </Row> - <Row gutter={10}> - <Col xs={24} md={8}> - <Form.Item name={[propertyField.name, 'enum_values']} label={t('限定取值')}> - <Select mode="tags" tokenSeparators={[',', '，']} /> - </Form.Item> - </Col> - <Col xs={12} md={4}> - <Form.Item name={[propertyField.name, 'min_length']} label={t('最小长度')}> - <InputNumber min={0} style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={12} md={4}> - <Form.Item name={[propertyField.name, 'max_length']} label={t('最大长度')}> - <InputNumber min={0} style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={12} md={4}> - <Form.Item name={[propertyField.name, 'minimum']} label={t('最小数值')}> - <InputNumber style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={12} md={4}> - <Form.Item name={[propertyField.name, 'maximum']} label={t('最大数值')}> - <InputNumber style={{ width: '100%' }} /> - </Form.Item> - </Col> - </Row> - </div> - ))} - <Button - type="dashed" - block - icon={<PlusOutlined />} - onClick={() => add({ type: 'string', required: false })} - > - {t('添加对象字段')} - </Button> - </Space> - )} - </Form.List> - </Card> - ); -} - -export function OntologyModuleEditor({ - token, - apiPrefix, - open, - module, - document, - version, - existingVersions, - onCancel, - onSaved, -}: OntologyModuleEditorProps) { - const [form] = Form.useForm<OntologyEditorValues>(); - const [saving, setSaving] = useState(false); - const [saveIssues, setSaveIssues] = useState<ValidationIssue[]>([]); - const [listPage, setListPage] = useState(1); - const [listPageSize, setListPageSize] = useState(ONTOLOGY_LIST_DEFAULT_PAGE_SIZE); - const isWorkingDraft = version?.status === 'draft'; - const watchedConcepts = Form.useWatch('concepts', form) as OntologyConcept[] | undefined; - const conceptOptions = useMemo( - () => (watchedConcepts ?? document?.concepts ?? []) - .filter((item) => item?.id) - .map((item) => ({ value: item.id, label: `${item.name || item.id} · ${item.id}` })), - [document?.concepts, watchedConcepts], - ); - - useEffect(() => { - if (!open || !module || !document) return; - const constraints = (document.constraints ?? []).map((constraint) => ({ - ...constraint, - schema_form: schemaToForm(constraint.schema), - })); - form.setFieldsValue({ - next_version: isWorkingDraft - ? document.version - : nextPatchVersion(document.version, existingVersions), - name: document.name, - domain: document.domain, - description: document.description, - config: { ...document.config }, - concepts: (document.concepts ?? []).map((item) => ({ ...item })), - relations: (document.relations ?? []).map((item) => ({ ...item })), - constraints, - workflows: (document.workflows ?? []).map((item) => ({ - ...item, - asset_triggers: (item.asset_triggers ?? []).map((trigger) => ({ ...trigger })), - })), - }); - setSaveIssues([]); - setListPage(1); - setListPageSize(ONTOLOGY_LIST_DEFAULT_PAGE_SIZE); - }, [document, existingVersions, form, isWorkingDraft, module, open]); - - const handleListPageChange = useCallback((page: number, pageSize: number) => { - setListPage(page); - setListPageSize(pageSize); - }, []); - - const moveToLastListPage = useCallback((total: number) => { - setListPage(Math.max(1, Math.ceil(total / listPageSize))); - }, [listPageSize]); - - const keepListPageInRange = useCallback((total: number) => { - const lastPage = Math.max(1, Math.ceil(total / listPageSize)); - setListPage((current) => Math.min(current, lastPage)); - }, [listPageSize]); - - const buildNextDocument = (values: OntologyEditorValues): OntologyDocument => { - if (!document || !module) throw new Error(t('缺少可编辑的本体版本')); - const next = JSON.parse(JSON.stringify(document)) as OntologyDocument; - next.version = isWorkingDraft ? document.version : values.next_version.trim(); - if (module === 'overview') { - next.name = values.name?.trim() ?? next.name; - next.domain = values.domain?.trim() ?? next.domain; - next.description = values.description?.trim() ?? ''; - next.config = values.config ?? {}; - } else if (module === 'concepts') { - next.concepts = values.concepts ?? []; - } else if (module === 'relations') { - next.relations = values.relations ?? []; - } else if (module === 'constraints') { - const originalById = new Map((document.constraints ?? []).map((item) => [item.id, item])); - next.constraints = (values.constraints ?? []).map((item) => { - const { schema_form: schemaForm, ...constraint } = item; - const target = { ...constraint.target }; - if (target.kind === 'output') { - delete target.tool; - delete target.parameter; - } else { - delete target.output_tag; - if (target.kind === 'tool') delete target.parameter; - } - return { - ...constraint, - target, - schema: schemaFromForm(schemaForm, originalById.get(item.id)?.schema), - }; - }); - } else if (module === 'workflows') { - next.workflows = values.workflows ?? []; - } - return next; - }; - - const handleSave = async () => { - setSaving(true); - setSaveIssues([]); - try { - const values = await form.validateFields(); - const nextDocument = buildNextDocument(values); - const validationResponse = await adminFetch(token, `${apiPrefix}/validate`, { - method: 'POST', - body: JSON.stringify(nextDocument), - }); - const report = validationResponse?.data ?? validationResponse; - if (!report?.valid) { - setSaveIssues(validationIssues(report)); - return; - } - const response = await adminFetch( - token, - `${apiPrefix}/${encodeURIComponent(nextDocument.pack_id)}/draft`, - { - method: 'PUT', - body: JSON.stringify({ - document: nextDocument, - draft_version_id: isWorkingDraft ? version?.version_id : null, - expected_checksum: isWorkingDraft ? version?.checksum : null, - }), - }, - ); - const savedDraft = response?.data ?? response; - message.success(savedDraft.created ? t('工作草稿已创建') : t('工作草稿已更新')); - await onSaved(String(savedDraft.version_id)); - onCancel(); - } catch (error) { - const issues = isRecord(error) && 'data' in error ? validationIssues(error.data) : []; - if (issues.length) setSaveIssues(issues); - message.error(error instanceof Error ? error.message : t('保存失败')); - } finally { - setSaving(false); - } - }; - - const renderOverview = () => ( - <div className="jx-ontologyEditor-section"> - <Alert - showIcon - type="info" - message={t('包标识与结构版本保持不变')} - description={t('当前包标识为 {packId}，结构版本为 {schemaVersion}。', { - packId: document?.pack_id ?? '-', - schemaVersion: document?.schema_version ?? '1.0', - })} - /> - <Row gutter={16}> - <Col xs={24} md={12}> - <Form.Item name="name" label={t('领域包名称')} rules={[{ required: true, whitespace: true }]}> - <Input maxLength={255} showCount /> - </Form.Item> - </Col> - <Col xs={24} md={12}> - <Form.Item name="domain" label={t('领域')} rules={[{ required: true, whitespace: true }]}> - <Input maxLength={128} /> - </Form.Item> - </Col> - </Row> - <Form.Item name="description" label={t('领域包说明')}> - <TextArea rows={3} maxLength={4000} showCount /> - </Form.Item> - <Divider titlePlacement="start">{t('运行配置')}</Divider> - <Row gutter={16}> - <Col xs={24} md={8}> - <Form.Item name={['config', 'injection_enabled']} label={t('允许运行时注入')} valuePropName="checked"> - <Switch /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={['config', 'max_concepts']} label={t('最多注入概念')} rules={[{ required: true }]}> - <InputNumber min={1} max={50} style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={['config', 'token_budget']} label={t('注入 Token 预算')} rules={[{ required: true }]}> - <InputNumber min={256} max={16000} step={128} style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={['config', 'committee_size']} label={t('评审委员会人数')} rules={[{ required: true }]}> - <InputNumber min={2} max={5} style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={['config', 'repeated_denial_threshold']} label={t('连续拒绝阈值')} rules={[{ required: true }]}> - <InputNumber min={1} max={10} style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={['config', 'circuit_breaker_threshold']} label={t('熔断阈值')} rules={[{ required: true }]}> - <InputNumber min={2} max={50} style={{ width: '100%' }} /> - </Form.Item> - </Col> - </Row> - <Form.Item name={['config', 'allow_unresolved_tools']} label={t('允许未解析工具')} valuePropName="checked"> - <Switch /> - </Form.Item> - </div> - ); - - const renderConcepts = () => ( - <Form.List name="concepts" rules={[uniqueIdRule(t('概念'))]}> - {(fields, { add, remove }, meta) => ( - <div className="jx-ontologyEditor-section"> - <ModuleListHeader - title={t('概念词表')} - description={t('逐项维护领域术语、定义、别名、层级和受控取值。')} - /> - {paginateOntologyItems(fields, listPage, listPageSize).map((field) => ( - <Card - size="small" - title={t('概念 {n}', { n: field.name + 1 })} - extra={<RemoveButton onClick={() => { - remove(field.name); - keepListPageInRange(fields.length - 1); - }} />} - key={field.key} - className="jx-ontologyEditor-itemCard" - > - <Row gutter={12}> - <Col xs={24} md={8}> - <Form.Item - name={[field.name, 'id']} - label={t('概念标识')} - rules={[ - { required: true, whitespace: true }, - { pattern: IDENTIFIER_PATTERN, message: t('需以字母开头，只能包含字母、数字及 _ . : -') }, - ]} - > - <Input placeholder="RiskEvent" /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'name']} label={t('概念名称')} rules={[{ required: true, whitespace: true }]}> - <Input maxLength={255} /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'risk']} label={t('风险等级')} rules={[{ required: true }]}> - <Select options={RISK_OPTIONS} /> - </Form.Item> - </Col> - </Row> - <Form.Item name={[field.name, 'definition']} label={t('概念定义')} rules={[{ required: true, whitespace: true }]}> - <TextArea rows={2} maxLength={4000} showCount /> - </Form.Item> - <Row gutter={12}> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'parent_id']} label={t('上位概念')}> - <Select allowClear showSearch options={conceptOptions} /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'aliases']} label={t('别名')}> - <Select mode="tags" tokenSeparators={[',', '，']} /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'tags']} label={t('标签')}> - <Select mode="tags" tokenSeparators={[',', '，']} /> - </Form.Item> - </Col> - </Row> - <Form.Item name={[field.name, 'closed_values']} label={t('受控取值')}> - <Select mode="tags" tokenSeparators={[',', '，']} placeholder={t('输入后回车，可添加多个值')} /> - </Form.Item> - </Card> - ))} - <OntologyListPagination - current={listPage} - pageSize={listPageSize} - total={fields.length} - onChange={handleListPageChange} - /> - <Form.ErrorList errors={meta.errors} /> - <Button - type="dashed" - block - icon={<PlusOutlined />} - onClick={() => { - add({ aliases: [], closed_values: [], tags: [], risk: 'low' }); - moveToLastListPage(fields.length + 1); - }} - > - {t('添加概念')} - </Button> - </div> - )} - </Form.List> - ); - - const renderRelations = () => ( - <Form.List name="relations" rules={[uniqueIdRule(t('关系'))]}> - {(fields, { add, remove }, meta) => ( - <div className="jx-ontologyEditor-section"> - <ModuleListHeader - title={t('概念关系')} - description={t('从已有概念中选择起点和终点，并设置基数或禁止关系。')} - /> - {paginateOntologyItems(fields, listPage, listPageSize).map((field) => ( - <Card - size="small" - title={t('关系 {n}', { n: field.name + 1 })} - extra={<RemoveButton onClick={() => { - remove(field.name); - keepListPageInRange(fields.length - 1); - }} />} - key={field.key} - className="jx-ontologyEditor-itemCard" - > - <Row gutter={12}> - <Col xs={24} md={8}> - <Form.Item - name={[field.name, 'id']} - label={t('关系标识')} - rules={[ - { required: true, whitespace: true }, - { pattern: IDENTIFIER_PATTERN, message: t('需以字母开头，只能包含字母、数字及 _ . : -') }, - ]} - > - <Input /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'subject']} label={t('起点概念')} rules={[{ required: true }]}> - <Select showSearch options={conceptOptions} /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'object']} label={t('终点概念')} rules={[{ required: true }]}> - <Select showSearch options={conceptOptions} /> - </Form.Item> - </Col> - </Row> - <Row gutter={12}> - <Col xs={24} md={12}> - <Form.Item name={[field.name, 'predicate']} label={t('关系谓词')} rules={[{ required: true, whitespace: true }]}> - <Input placeholder={t('例如：由证据支持')} /> - </Form.Item> - </Col> - <Col xs={12} md={4}> - <Form.Item name={[field.name, 'min_cardinality']} label={t('最少数量')}> - <InputNumber min={0} style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={12} md={4}> - <Form.Item name={[field.name, 'max_cardinality']} label={t('最多数量')}> - <InputNumber min={0} style={{ width: '100%' }} /> - </Form.Item> - </Col> - <Col xs={24} md={4}> - <Form.Item name={[field.name, 'forbidden']} label={t('禁止此关系')} valuePropName="checked"> - <Switch /> - </Form.Item> - </Col> - </Row> - <Form.Item name={[field.name, 'description']} label={t('关系说明')}> - <TextArea rows={2} maxLength={2000} showCount /> - </Form.Item> - </Card> - ))} - <OntologyListPagination - current={listPage} - pageSize={listPageSize} - total={fields.length} - onChange={handleListPageChange} - /> - <Form.ErrorList errors={meta.errors} /> - <Button - type="dashed" - block - icon={<PlusOutlined />} - onClick={() => { - add({ forbidden: false, min_cardinality: 0 }); - moveToLastListPage(fields.length + 1); - }} - > - {t('添加关系')} - </Button> - </div> - )} - </Form.List> - ); - - const renderConstraints = () => ( - <Form.List name="constraints" rules={[uniqueIdRule(t('约束'))]}> - {(fields, { add, remove }, meta) => ( - <div className="jx-ontologyEditor-section"> - <ModuleListHeader - title={t('执行约束')} - description={t('配置工具参数或输出要求；校验规则以表单字段维护。')} - /> - {paginateOntologyItems(fields, listPage, listPageSize).map((field) => ( - <Card - size="small" - title={t('约束 {n}', { n: field.name + 1 })} - extra={<RemoveButton onClick={() => { - remove(field.name); - keepListPageInRange(fields.length - 1); - }} />} - key={field.key} - className="jx-ontologyEditor-itemCard" - > - <Row gutter={12}> - <Col xs={24} md={8}> - <Form.Item - name={[field.name, 'id']} - label={t('约束标识')} - rules={[ - { required: true, whitespace: true }, - { pattern: IDENTIFIER_PATTERN, message: t('需以字母开头，只能包含字母、数字及 _ . : -') }, - ]} - > - <Input /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'name']} label={t('约束名称')} rules={[{ required: true, whitespace: true }]}> - <Input maxLength={255} /> - </Form.Item> - </Col> - <Col xs={12} md={4}> - <Form.Item name={[field.name, 'mode']} label={t('执行模式')} rules={[{ required: true }]}> - <Select options={[ - { value: 'log', label: t('仅记录') }, - { value: 'enforce', label: t('强制执行') }, - ]} /> - </Form.Item> - </Col> - <Col xs={12} md={4}> - <Form.Item name={[field.name, 'risk']} label={t('风险等级')} rules={[{ required: true }]}> - <Select options={RISK_OPTIONS} /> - </Form.Item> - </Col> - </Row> - <Row gutter={12}> - <Col xs={24} md={6}> - <Form.Item name={[field.name, 'target', 'kind']} label={t('约束目标')} rules={[{ required: true }]}> - <Select options={[ - { value: 'tool', label: t('工具调用') }, - { value: 'tool_parameter', label: t('工具参数') }, - { value: 'output', label: t('最终输出') }, - ]} /> - </Form.Item> - </Col> - <Form.Item noStyle shouldUpdate> - {({ getFieldValue }) => { - const kind = getFieldValue(['constraints', field.name, 'target', 'kind']); - if (kind === 'output') { - return ( - <Col xs={24} md={10}> - <Form.Item name={[field.name, 'target', 'output_tag']} label={t('输出标签')} rules={[{ required: true, whitespace: true }]}> - <Input placeholder="quality_review_report" /> - </Form.Item> - </Col> - ); - } - return ( - <> - <Col xs={24} md={kind === 'tool_parameter' ? 6 : 10}> - <Form.Item name={[field.name, 'target', 'tool']} label={t('工具标识')} rules={[{ required: true, whitespace: true }]}> - <Input placeholder="check_record_quality" /> - </Form.Item> - </Col> - {kind === 'tool_parameter' && ( - <Col xs={24} md={6}> - <Form.Item name={[field.name, 'target', 'parameter']} label={t('参数名')} rules={[{ required: true, whitespace: true }]}> - <Input placeholder="company_id" /> - </Form.Item> - </Col> - )} - </> - ); - }} - </Form.Item> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'concept_id']} label={t('关联概念')}> - <Select allowClear showSearch options={conceptOptions} /> - </Form.Item> - </Col> - </Row> - <Row gutter={12}> - <Col xs={24} md={12}> - <Form.Item name={[field.name, 'prerequisite_tools']} label={t('前置工具')}> - <Select mode="tags" tokenSeparators={[',', '，']} /> - </Form.Item> - </Col> - <Col xs={12} md={6}> - <Form.Item name={[field.name, 'requires_citations']} label={t('要求引用证据')} valuePropName="checked"> - <Switch /> - </Form.Item> - </Col> - <Col xs={12} md={6}> - <Form.Item name={[field.name, 'enabled']} label={t('启用约束')} valuePropName="checked"> - <Switch /> - </Form.Item> - </Col> - </Row> - <Form.Item name={[field.name, 'message']} label={t('拦截提示')} rules={[{ required: true, whitespace: true }]}> - <TextArea rows={2} maxLength={2000} showCount /> - </Form.Item> - <Form.Item name={[field.name, 'suggestion']} label={t('修正建议')}> - <TextArea rows={2} maxLength={2000} showCount /> - </Form.Item> - <SchemaFields field={field} /> - </Card> - ))} - <OntologyListPagination - current={listPage} - pageSize={listPageSize} - total={fields.length} - onChange={handleListPageChange} - /> - <Form.ErrorList errors={meta.errors} /> - <Button - type="dashed" - block - icon={<PlusOutlined />} - onClick={() => { - add({ - target: { kind: 'tool' }, - schema_form: { enabled: false, type: 'object', additional_properties: true, properties: [] }, - prerequisite_tools: [], - requires_citations: false, - mode: 'log', - risk: 'low', - enabled: true, - }); - moveToLastListPage(fields.length + 1); - }} - > - {t('添加约束')} - </Button> - </div> - )} - </Form.List> - ); - - const renderWorkflows = () => ( - <Form.List name="workflows" rules={[uniqueIdRule(t('工作流'))]}> - {(fields, { add, remove }, meta) => ( - <div className="jx-ontologyEditor-section"> - <ModuleListHeader - title={t('领域工作流')} - description={t('配置文本或资产触发入口、工具边界和交付前评审级别。')} - /> - {paginateOntologyItems(fields, listPage, listPageSize).map((field) => ( - <Card - size="small" - title={t('工作流 {n}', { n: field.name + 1 })} - extra={<RemoveButton onClick={() => { - remove(field.name); - keepListPageInRange(fields.length - 1); - }} />} - key={field.key} - className="jx-ontologyEditor-itemCard" - > - <Row gutter={12}> - <Col xs={24} md={8}> - <Form.Item - name={[field.name, 'id']} - label={t('工作流标识')} - rules={[ - { required: true, whitespace: true }, - { pattern: IDENTIFIER_PATTERN, message: t('需以字母开头，只能包含字母、数字及 _ . : -') }, - ]} - > - <Input /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'name']} label={t('工作流名称')} rules={[{ required: true, whitespace: true }]}> - <Input maxLength={255} /> - </Form.Item> - </Col> - <Col xs={12} md={4}> - <Form.Item name={[field.name, 'review_level']} label={t('评审级别')} rules={[{ required: true }]}> - <Select options={[ - { value: 'none', label: t('不评审') }, - { value: 'checkpoint', label: 'Checkpoint' }, - { value: 'committee', label: 'Committee' }, - ]} /> - </Form.Item> - </Col> - <Col xs={12} md={4}> - <Form.Item name={[field.name, 'risk']} label={t('风险等级')} rules={[{ required: true }]}> - <Select options={RISK_OPTIONS} /> - </Form.Item> - </Col> - </Row> - <Form.Item name={[field.name, 'triggers']} label={t('文本命中词')}> - <Select mode="tags" tokenSeparators={[',', '，']} placeholder={t('用户问题包含这些词时触发')} /> - </Form.Item> - <Divider titlePlacement="start" plain>{t('资产触发条件')}</Divider> - <Form.List name={[field.name, 'asset_triggers']}> - {(triggerFields, { add: addTrigger, remove: removeTrigger }) => ( - <Space direction="vertical" size="small" style={{ width: '100%' }}> - {triggerFields.map((triggerField) => ( - <div className="jx-ontologyEditor-trigger" key={triggerField.key}> - <Row gutter={10} align="middle"> - <Col xs={24} md={5}> - <Form.Item name={[triggerField.name, 'kind']} label={t('资产类型')} rules={[{ required: true }]}> - <Select options={[ - { value: 'tool', label: t('工具') }, - { value: 'skill', label: t('技能') }, - { value: 'subagent', label: t('智能体') }, - ]} /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={[triggerField.name, 'ids']} label={t('资产标识')}> - <Select mode="tags" tokenSeparators={[',', '，']} /> - </Form.Item> - </Col> - <Col xs={24} md={9}> - <Form.Item name={[triggerField.name, 'tags_any']} label={t('任一治理标签')}> - <Select mode="tags" tokenSeparators={[',', '，']} placeholder="ontology:QualityReport" /> - </Form.Item> - </Col> - <Col xs={24} md={2} className="jx-ontologyEditor-propertyRemove"> - <Button - danger - type="text" - aria-label={t('移除资产触发条件')} - icon={<DeleteOutlined />} - onClick={() => removeTrigger(triggerField.name)} - /> - </Col> - </Row> - </div> - ))} - <Button - type="dashed" - block - icon={<PlusOutlined />} - onClick={() => addTrigger({ kind: 'tool', ids: [], tags_any: [] })} - > - {t('添加资产触发条件')} - </Button> - </Space> - )} - </Form.List> - <Row gutter={12} className="jx-ontologyEditor-workflowLists"> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'required_tools']} label={t('必需工具')}> - <Select mode="tags" tokenSeparators={[',', '，']} /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'forbidden_tools']} label={t('禁止工具')}> - <Select mode="tags" tokenSeparators={[',', '，']} /> - </Form.Item> - </Col> - <Col xs={24} md={8}> - <Form.Item name={[field.name, 'output_tags']} label={t('输出标签')}> - <Select mode="tags" tokenSeparators={[',', '，']} /> - </Form.Item> - </Col> - </Row> - </Card> - ))} - <OntologyListPagination - current={listPage} - pageSize={listPageSize} - total={fields.length} - onChange={handleListPageChange} - /> - <Form.ErrorList errors={meta.errors} /> - <Button - type="dashed" - block - icon={<PlusOutlined />} - onClick={() => { - add({ - triggers: [], - asset_triggers: [], - required_tools: [], - forbidden_tools: [], - output_tags: [], - review_level: 'none', - risk: 'low', - }); - moveToLastListPage(fields.length + 1); - }} - > - {t('添加工作流')} - </Button> - </div> - )} - </Form.List> - ); - - const moduleContent = module === 'overview' - ? renderOverview() - : module === 'concepts' - ? renderConcepts() - : module === 'relations' - ? renderRelations() - : module === 'constraints' - ? renderConstraints() - : module === 'workflows' - ? renderWorkflows() - : null; - - return ( - <Modal - title={module ? t('编辑{module}', { module: MODULE_LABELS[module] }) : t('编辑本体模块')} - open={open} - onCancel={onCancel} - onOk={() => void handleSave()} - okText={t('校验并保存草稿')} - cancelText={t('取消')} - confirmLoading={saving} - okButtonProps={{ disabled: !document || !version }} - width="min(1080px, calc(100vw - 32px))" - destroyOnHidden - className="jx-ontologyEditorModal" - > - <Alert - showIcon - type="info" - message={isWorkingDraft ? t('继续编辑当前工作草稿') : t('首次保存将创建工作草稿')} - description={isWorkingDraft - ? t('本次只更新“{module}”模块，其他草稿内容保持不变；发布后该版本将锁定。', { - module: module ? MODULE_LABELS[module] : '', - }) - : t('本次以当前版本为基础创建一份可反复编辑的草稿；后续模块修改不会继续增加版本。', { - module: module ? MODULE_LABELS[module] : '', - })} - /> - <Form form={form} layout="vertical" requiredMark="optional" className="jx-ontologyEditor-form"> - <Card size="small" className="jx-ontologyEditor-versionCard"> - <Row gutter={16} align="middle"> - <Col xs={24} md={10}> - <Form.Item - name="next_version" - label={isWorkingDraft ? t('工作草稿版本号') : t('新版本号')} - rules={[ - { required: true, whitespace: true }, - { pattern: VERSION_PATTERN, message: t('版本号格式示例：1.2.0') }, - ]} - > - <Input placeholder="1.2.0" disabled={isWorkingDraft} /> - </Form.Item> - </Col> - <Col xs={24} md={14}> - <Alert - showIcon - type={isWorkingDraft ? 'success' : 'info'} - message={isWorkingDraft ? t('保存时更新同一草稿') : t('该版本号只在首次创建草稿时使用')} - description={t('完成全部模块编辑后，到“版本管理”中发布草稿。')} - /> - </Col> - </Row> - </Card> - {saveIssues.length > 0 && ( - <Alert - showIcon - type="error" - message={t('当前修改未通过完整性校验')} - description={( - <ul className="jx-ontologyEditor-errorList"> - {saveIssues.map((issue, index) => ( - <li key={`${issue.path ?? 'issue'}-${index}`}> - {issue.path && <Text code>{issue.path}</Text>} {issue.message} - </li> - ))} - </ul> - )} - /> - )} - {moduleContent} - </Form> - </Modal> - ); -} diff --git a/src/frontend/src/components/ontology/OntologyVersionManager.tsx b/src/frontend/src/components/ontology/OntologyVersionManager.tsx deleted file mode 100644 index 2a82bb37..00000000 --- a/src/frontend/src/components/ontology/OntologyVersionManager.tsx +++ /dev/null @@ -1,273 +0,0 @@ -import { useState } from 'react'; -import { - Alert, - Button, - Modal, - Popconfirm, - Space, - Table, - Tag, - Tooltip, - Typography, -} from 'antd'; -import { - CheckCircleOutlined, - DeleteOutlined, - DownloadOutlined, - EyeOutlined, - HistoryOutlined, - ThunderboltOutlined, - WarningOutlined, -} from '@ant-design/icons'; -import { t } from '../../i18n'; -import { ADMIN_TABLE_PAGINATION } from '../../utils/adminApi'; -import { formatDateTime } from '../../utils/date'; -import type { OntologyPackSummary, OntologyPackVersion } from './ontologyTypes'; - -const { Text, Title } = Typography; - -interface OntologyVersionManagerProps { - pack: OntologyPackSummary | null; - onClose: () => void; - onView: (pack: OntologyPackSummary, version: OntologyPackVersion) => void; - onExport: (pack: OntologyPackSummary, version: OntologyPackVersion) => Promise<void>; - onActivate: (pack: OntologyPackSummary, version: OntologyPackVersion) => Promise<void>; - onDiscard: (pack: OntologyPackSummary, version: OntologyPackVersion) => Promise<void>; -} - -function versionStatus(version: OntologyPackVersion): { color: string; label: string } { - if (version.status === 'active') return { color: 'green', label: t('已激活') }; - if (version.status === 'retired') return { color: 'default', label: t('已归档') }; - return { color: 'blue', label: t('工作草稿') }; -} - -export function OntologyVersionManager({ - pack, - onClose, - onView, - onExport, - onActivate, - onDiscard, -}: OntologyVersionManagerProps) { - const [actionKey, setActionKey] = useState(''); - const activeVersion = pack?.versions.find((version) => version.version_id === pack.active_version_id); - const workingDraft = pack?.versions.find( - (version) => version.version_id === pack.working_draft_version_id, - ) ?? pack?.versions.find((version) => version.status === 'draft'); - const officialVersionCount = pack?.versions.filter((version) => version.status !== 'draft').length ?? 0; - - const runAction = async (key: string, action: () => Promise<void>) => { - setActionKey(key); - try { - await action(); - } finally { - setActionKey(''); - } - }; - - const columns = [ - { - title: t('版本'), - key: 'version', - width: 170, - render: (_: unknown, version: OntologyPackVersion) => ( - <Space direction="vertical" size={2}> - <Space size={6}> - <Text strong>v{version.version}</Text> - {version.version_id === pack?.active_version_id && <Tag color="green">{t('当前运行')}</Tag>} - </Space> - <Text type="secondary" className="jx-ontologyVersionManager-versionId" copyable> - {version.version_id} - </Text> - </Space> - ), - }, - { - title: t('状态'), - key: 'status', - width: 96, - render: (_: unknown, version: OntologyPackVersion) => { - const status = versionStatus(version); - return <Tag color={status.color}>{status.label}</Tag>; - }, - }, - { - title: t('完整性校验'), - key: 'validation', - width: 150, - render: (_: unknown, version: OntologyPackVersion) => { - const report = version.validation_report ?? {}; - const errors = report.errors?.length ?? 0; - const warnings = report.warnings?.length ?? 0; - return ( - <Space direction="vertical" size={3}> - <Tag - color={report.valid ? 'success' : 'error'} - icon={report.valid ? <CheckCircleOutlined /> : <WarningOutlined />} - > - {report.valid ? t('校验通过') : t('校验未通过')} - </Tag> - {(errors > 0 || warnings > 0) && ( - <Text type="secondary" className="jx-ontologyVersionManager-issueCount"> - {t('{errors} 个错误，{warnings} 个警告', { errors, warnings })} - </Text> - )} - </Space> - ); - }, - }, - { - title: t('时间'), - key: 'time', - width: 190, - render: (_: unknown, version: OntologyPackVersion) => ( - <Space direction="vertical" size={2}> - <Text type="secondary"> - {version.status === 'draft' ? t('更新于') : t('创建于')}{' '} - {formatDateTime(version.updated_at || version.created_at)} - </Text> - {version.activated_at && ( - <Text type="secondary">{t('激活于')} {formatDateTime(version.activated_at)}</Text> - )} - </Space> - ), - }, - { - title: t('操作'), - key: 'actions', - width: 330, - fixed: 'right' as const, - render: (_: unknown, version: OntologyPackVersion) => ( - <Space size={4} wrap={false}> - <Button - type="link" - size="small" - icon={<EyeOutlined />} - onClick={() => pack && onView(pack, version)} - > - {t('查看内容')} - </Button> - <Button - type="link" - size="small" - icon={<DownloadOutlined />} - loading={actionKey === `export:${version.version_id}`} - onClick={() => pack && void runAction( - `export:${version.version_id}`, - () => onExport(pack, version), - )} - > - {t('下载')} - </Button> - {version.status !== 'active' && ( - <Tooltip title={!version.validation_report?.valid ? t('未通过校验的版本不能激活') : undefined}> - <span> - <Popconfirm - title={version.status === 'draft' - ? t('发布工作草稿 v{version}？', { version: version.version }) - : t('激活版本 v{version}？', { version: version.version })} - description={version.status === 'draft' - ? t('发布后草稿将锁定为正式版本，并立即替换当前运行版本。') - : t('激活后将立即替换当前运行版本。')} - disabled={!version.validation_report?.valid} - onConfirm={() => pack && runAction( - `activate:${version.version_id}`, - () => onActivate(pack, version), - )} - > - <Button - type="link" - size="small" - icon={<ThunderboltOutlined />} - disabled={!version.validation_report?.valid} - loading={actionKey === `activate:${version.version_id}`} - > - {version.status === 'draft' ? t('发布') : t('激活')} - </Button> - </Popconfirm> - </span> - </Tooltip> - )} - {version.version_id === workingDraft?.version_id && ( - <Popconfirm - title={t('放弃工作草稿 v{version}？', { version: version.version })} - description={t('未发布的草稿内容将被删除，此操作无法撤销。')} - okText={t('放弃草稿')} - okButtonProps={{ danger: true }} - onConfirm={() => pack && runAction( - `discard:${version.version_id}`, - () => onDiscard(pack, version), - )} - > - <Button - type="link" - danger - size="small" - icon={<DeleteOutlined />} - loading={actionKey === `discard:${version.version_id}`} - > - {t('放弃')} - </Button> - </Popconfirm> - )} - </Space> - ), - }, - ]; - - return ( - <Modal - title={pack ? t('版本管理 · {name}', { name: pack.name }) : t('版本管理')} - open={Boolean(pack)} - onCancel={onClose} - footer={<Button onClick={onClose}>{t('关闭')}</Button>} - width="min(980px, calc(100vw - 32px))" - destroyOnHidden - className="jx-ontologyVersionManager" - styles={{ body: { maxHeight: 'calc(100vh - 190px)', overflowY: 'auto' } }} - > - {pack && ( - <div className="jx-ontologyVersionManager-content"> - <div className="jx-ontologyVersionManager-summary"> - <div className="jx-ontologyVersionManager-summaryIcon"><HistoryOutlined /></div> - <div className="jx-ontologyVersionManager-summaryBody"> - <Title level={5}> - {workingDraft - ? t('{official} 个正式版本，1 个工作草稿', { official: officialVersionCount }) - : t('共 {n} 个正式版本', { n: officialVersionCount })} - </Title> - <Text type="secondary"> - {activeVersion - ? t('当前运行 v{version}。可以查看任一历史版本，或激活已通过校验的版本。', { version: activeVersion.version }) - : t('当前没有运行中的版本，请激活一个已通过校验的版本。')} - </Text> - </div> - </div> - {!activeVersion && ( - <Alert - showIcon - type="warning" - message={t('领域包尚未激活版本')} - description={t('未激活版本时，该领域包不会进入运行时。')} - /> - )} - <Table<OntologyPackVersion> - rowKey="version_id" - dataSource={pack.versions} - columns={columns} - pagination={{ - ...ADMIN_TABLE_PAGINATION, - pageSize: 10, - pageSizeOptions: [10, 20, 50], - }} - size="middle" - scroll={{ x: 936 }} - /> - <Text type="secondary" className="jx-ontologyVersionManager-footnote"> - {t('每个领域包只保留一个可反复编辑的工作草稿；发布后版本锁定，历史版本全部保留。')} - </Text> - </div> - )} - </Modal> - ); -} diff --git a/src/frontend/src/components/ontology/index.ts b/src/frontend/src/components/ontology/index.ts deleted file mode 100644 index 1e1d9fcf..00000000 --- a/src/frontend/src/components/ontology/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -export { OntologyManager } from './OntologyManager'; -export { OntologyDetailDrawer } from './OntologyDetailDrawer'; -export { OntologyListPagination } from './OntologyListPagination'; -export { OntologyModuleEditor } from './OntologyModuleEditor'; -export { OntologyVersionManager } from './OntologyVersionManager'; -export type { - OntologyDocument, - OntologyEditableModule, - OntologyPackSummary, - OntologyPackVersion, -} from './ontologyTypes'; diff --git a/src/frontend/src/components/ontology/ontologyPagination.ts b/src/frontend/src/components/ontology/ontologyPagination.ts deleted file mode 100644 index 53a3bec4..00000000 --- a/src/frontend/src/components/ontology/ontologyPagination.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const ONTOLOGY_LIST_DEFAULT_PAGE_SIZE = 5; - -export function paginateOntologyItems<T>(items: T[], current: number, pageSize: number): T[] { - const start = (current - 1) * pageSize; - return items.slice(start, start + pageSize); -} diff --git a/src/frontend/src/components/ontology/ontologyTypes.ts b/src/frontend/src/components/ontology/ontologyTypes.ts deleted file mode 100644 index d7f7e9c8..00000000 --- a/src/frontend/src/components/ontology/ontologyTypes.ts +++ /dev/null @@ -1,125 +0,0 @@ -export interface ValidationIssue { - severity?: string; - path?: string; - message?: string; -} - -export interface OntologyPackVersion { - version_id: string; - version: string; - status: 'draft' | 'active' | 'retired'; - checksum: string; - validation_report: { - valid?: boolean; - errors?: ValidationIssue[]; - warnings?: ValidationIssue[]; - }; - created_at?: string; - updated_at?: string; - activated_at?: string; -} - -export interface OntologyPackSummary { - pack_id: string; - name: string; - domain: string; - description: string; - is_enabled: boolean; - is_default: boolean; - active_version_id?: string | null; - working_draft_version_id?: string | null; - versions: OntologyPackVersion[]; -} - -export interface OntologyConcept { - id: string; - name: string; - aliases?: string[]; - definition: string; - parent_id?: string | null; - closed_values?: string[]; - tags?: string[]; - risk?: string; -} - -export interface OntologyRelation { - id: string; - subject: string; - predicate: string; - object: string; - description?: string; - min_cardinality?: number | null; - max_cardinality?: number | null; - forbidden?: boolean; -} - -export interface OntologyConstraintTarget { - kind: 'tool' | 'tool_parameter' | 'output'; - tool?: string | null; - parameter?: string | null; - output_tag?: string | null; -} - -export interface OntologyConstraint { - id: string; - name: string; - target: OntologyConstraintTarget; - schema?: Record<string, unknown>; - concept_id?: string | null; - requires_citations?: boolean; - prerequisite_tools?: string[]; - mode?: string; - risk?: string; - message: string; - suggestion?: string; - enabled?: boolean; -} - -export interface OntologyAssetTrigger { - kind: 'tool' | 'skill' | 'subagent'; - ids?: string[]; - tags_any?: string[]; -} - -export interface OntologyWorkflow { - id: string; - name: string; - triggers?: string[]; - asset_triggers?: OntologyAssetTrigger[]; - required_tools?: string[]; - forbidden_tools?: string[]; - output_tags?: string[]; - review_level?: string; - risk?: string; -} - -export interface OntologyPackConfig { - injection_enabled?: boolean; - max_concepts?: number; - token_budget?: number; - committee_size?: number; - repeated_denial_threshold?: number; - circuit_breaker_threshold?: number; - allow_unresolved_tools?: boolean; -} - -export interface OntologyDocument { - schema_version?: string; - pack_id: string; - name: string; - version: string; - domain: string; - description?: string; - config?: OntologyPackConfig; - concepts?: OntologyConcept[]; - relations?: OntologyRelation[]; - constraints?: OntologyConstraint[]; - workflows?: OntologyWorkflow[]; -} - -export type OntologyEditableModule = - | 'overview' - | 'concepts' - | 'relations' - | 'constraints' - | 'workflows'; diff --git a/src/frontend/src/components/personal-agent/tasks/PersonalTaskDialog.tsx b/src/frontend/src/components/personal-agent/tasks/PersonalTaskDialog.tsx index f2c3a2e6..25e9d703 100644 --- a/src/frontend/src/components/personal-agent/tasks/PersonalTaskDialog.tsx +++ b/src/frontend/src/components/personal-agent/tasks/PersonalTaskDialog.tsx @@ -49,6 +49,6 @@ export function PersonalTaskDialog({ task, onClose, onChange }: { task: Personal {error && <Alert type="error" message={error} />} <div className="pa-task-dialog-actions"><TaskActions task={task} onDone={onChange} onError={exc => setError(errorText(exc))} /></div> {hasOlder && <Button onClick={() => void history()}>{t('查看更早的消息')}</Button>} - <div ref={setViewport} className="pa-task-conversation" data-testid="task-conversation" data-chat-id={thread?.chat_id}>{rows.map((row, index) => <div className={'jx-msg ' + (row.role === 'user' ? 'user' : 'assistant')} key={row.uid}><div className="jx-msgInner"><div className="jx-msgContent"><ToolMessageContext.Provider value={{ chatId: thread?.chat_id || '', messageId: row.messageId, messageUid: row.uid, readOnly: true }}><MessageBody m={row} showProcess messageIndex={index} currentChatId={thread?.chat_id || ''} send={() => undefined} /></ToolMessageContext.Provider></div></div></div>)}</div> + <div ref={setViewport} className="pa-task-conversation" data-testid="task-conversation" data-chat-id={thread?.chat_id}>{rows.map((row, index) => <div className={'jx-msg ' + (row.role === 'user' ? 'user' : 'assistant')} key={row.uid}><div className="jx-msgInner"><div className="jx-msgContent"><ToolMessageContext.Provider value={{ chatId: thread?.chat_id || '', messageId: row.messageId, messageUid: row.uid, readOnly: true }}><MessageBody m={row} messageIndex={index} currentChatId={thread?.chat_id || ''} send={() => undefined} /></ToolMessageContext.Provider></div></div></div>)}</div> </Modal>; } diff --git a/src/frontend/src/components/personal-agent/workspace/AgentWorkspaceSkeleton.tsx b/src/frontend/src/components/personal-agent/workspace/AgentWorkspaceSkeleton.tsx new file mode 100644 index 00000000..2c9e0351 --- /dev/null +++ b/src/frontend/src/components/personal-agent/workspace/AgentWorkspaceSkeleton.tsx @@ -0,0 +1,25 @@ +import { t } from '../../../i18n'; +import { SkeletonLines } from '../../common/LoadState'; +import './agent-workspace.css'; + +/** Code-loading placeholder with the workspace's toolbar, file tree and viewer geometry. */ +export function AgentWorkspaceSkeleton() { + return ( + <div className="pa-ws" role="status" aria-label={t('加载中…')} aria-busy="true"> + <div className="pa-ws-toolbar" aria-hidden="true"> + <div className="jx-skeletonBlock pa-ws-skHint" /> + <div className="jx-skeletonBlock pa-ws-skButton" /> + </div> + <div className="pa-ws-split" aria-hidden="true"> + <aside className="pa-ws-tree"> + <div className="pa-ws-treeHead">/workspace</div> + <div className="pa-ws-treeBody"><SkeletonLines rows={6} className="pa-ws-skTree" /></div> + </aside> + <section className="pa-ws-viewer"> + <div className="pa-ws-viewerHead"><div className="jx-skeletonBlock pa-ws-skPath" /></div> + <div className="pa-ws-viewerBody"><SkeletonLines rows={8} /></div> + </section> + </div> + </div> + ); +} diff --git a/src/frontend/src/components/personal-agent/workspace/AgentWorkspaceView.tsx b/src/frontend/src/components/personal-agent/workspace/AgentWorkspaceView.tsx index c9688308..e07a5ccc 100644 --- a/src/frontend/src/components/personal-agent/workspace/AgentWorkspaceView.tsx +++ b/src/frontend/src/components/personal-agent/workspace/AgentWorkspaceView.tsx @@ -1,11 +1,12 @@ import { EditOutlined, FileMarkdownOutlined, FileOutlined, FolderOpenOutlined, FolderOutlined, LinkOutlined, ReloadOutlined } from '@ant-design/icons'; -import { Button, Empty, Input, Spin, Tooltip, Tree, message } from 'antd'; +import { Button, Empty, Input, Tooltip, Tree, message } from 'antd'; import type { TreeDataNode } from 'antd'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { t } from '../../../i18n'; import { userMarkdownHtml } from '../../../utils/userMarkdown'; import { useAgentNameStore } from '../shared/agentName'; import { errorText, personalApi } from '../api'; +import { LoadError, SkeletonLines } from '../../common/LoadState'; import type { WorkspaceEntry, WorkspaceFile, WorkspaceTree } from '../api'; import './agent-workspace.css'; @@ -27,7 +28,7 @@ function formatSize(size: number | null): string { function entryIcon(entry: WorkspaceEntry, open: boolean) { if (entry.type === 'dir') return open ? <FolderOpenOutlined /> : <FolderOutlined />; if (entry.type === 'link') return <LinkOutlined />; - return entry.name.endsWith('../.md') ? <FileMarkdownOutlined /> : <FileOutlined />; + return entry.name.endsWith('.md') ? <FileMarkdownOutlined /> : <FileOutlined />; } function buildTree(entries: WorkspaceEntry[], expanded: Set<string>): TreeDataNode[] { @@ -61,6 +62,7 @@ function buildTree(entries: WorkspaceEntry[], expanded: Set<string>): TreeDataNo /** My Space view of the Personal Agent's permanent workspace files. */ export function AgentWorkspaceView() { const [tree, setTree] = useState<WorkspaceTree | null>(null); + const [treeError, setTreeError] = useState(''); const [selected, setSelected] = useState<string>(DEFAULT_FILE); const [file, setFile] = useState<WorkspaceFile | null>(null); const [fileError, setFileError] = useState(''); @@ -69,8 +71,9 @@ export function AgentWorkspaceView() { const [expanded, setExpanded] = useState<string[] | null>(null); const loadTree = useCallback(async () => { + setTreeError(''); try { setTree(await personalApi.workspaceTree()); } - catch (exc) { message.error(errorText(exc)); } + catch (exc) { setTreeError(errorText(exc)); } }, []); const loadFile = useCallback(async (path: string) => { @@ -127,7 +130,9 @@ export function AgentWorkspaceView() { <aside className="pa-ws-tree"> <div className="pa-ws-treeHead">/workspace</div> <div className="pa-ws-treeBody"> - {!tree ? <Spin /> : !tree.exists ? ( + {treeError ? <LoadError title={t('工作区文件列表加载失败')} reason={treeError} onRetry={() => void loadTree()} /> + : !tree ? <SkeletonLines rows={6} className="pa-ws-skTree" /> + : !tree.exists ? ( <Empty description={t('工作区尚未创建')} image={Empty.PRESENTED_IMAGE_SIMPLE} /> ) : ( <> @@ -165,13 +170,14 @@ export function AgentWorkspaceView() { ))} </div> <div className="pa-ws-viewerBody"> - {fileError ? <Empty description={fileError} image={Empty.PRESENTED_IMAGE_SIMPLE} /> - : !file ? <Spin /> + {fileError ? <LoadError title={t('文件加载失败')} reason={fileError} onRetry={() => void loadFile(selected)} /> + : treeError || (tree && !tree.exists) ? null + : !file ? <SkeletonLines rows={8} /> : draft !== null ? ( <Input.TextArea className="pa-ws-editor" value={draft} onChange={(e) => setDraft(e.target.value)} spellCheck={false} /> ) : file.binary ? ( <Empty description={t('二进制文件不支持预览')} image={Empty.PRESENTED_IMAGE_SIMPLE} /> - ) : file.path.endsWith('../.md') ? ( + ) : file.path.endsWith('.md') ? ( <div className="jx-md pa-ws-markdown" dangerouslySetInnerHTML={{ __html: userMarkdownHtml(file.content ?? '') }} /> ) : ( <pre className="pa-ws-text">{file.content}</pre> diff --git a/src/frontend/src/components/personal-agent/workspace/agent-workspace.css b/src/frontend/src/components/personal-agent/workspace/agent-workspace.css index e374648d..582de591 100644 --- a/src/frontend/src/components/personal-agent/workspace/agent-workspace.css +++ b/src/frontend/src/components/personal-agent/workspace/agent-workspace.css @@ -39,3 +39,9 @@ .pa-ws-split{flex-direction:column} .pa-ws-tree{width:auto;max-height:280px} } + +/* Loading placeholders */ +.pa-ws-skHint{flex:1;max-width:480px;height:12px} +.pa-ws-skButton{width:72px;height:24px} +.pa-ws-skPath{width:120px;height:16px} +.pa-ws-skTree{padding:8px} diff --git a/src/frontend/src/components/projects/ProjectAutomationsCard.tsx b/src/frontend/src/components/projects/ProjectAutomationsCard.tsx index fcf903c4..8d3fb32e 100644 --- a/src/frontend/src/components/projects/ProjectAutomationsCard.tsx +++ b/src/frontend/src/components/projects/ProjectAutomationsCard.tsx @@ -1,7 +1,8 @@ import { useCallback, useEffect, useRef, useState } from 'react'; -import { Button, Spin, message } from 'antd'; +import { Button, message } from 'antd'; import { ClockCircleOutlined, ReloadOutlined, SettingOutlined } from '@ant-design/icons'; import { automationAvailabilityWarning, getAutomationRuns, listAutomations } from '../../api'; +import { LoadError, SkeletonLines } from '../common/LoadState'; import { useAuthStore } from '../../stores/authStore'; import { prepareRunChat } from '../../stores/automationChatStore'; import { navigateTo, pathForAutomationChat, pathForPanel } from '../../routing/navigation'; @@ -91,8 +92,8 @@ export default function ProjectAutomationsCard({ project }: { project: ProjectDe <Button size="small" type="text" icon={<ReloadOutlined />} loading={loading} aria-label={t('刷新项目定时任务')} onClick={() => void reload()} /> </div> - {error && <div role="alert">{error}<Button size="small" onClick={() => void reload()}>{t('重试')}</Button></div>} - {loading && entries.length === 0 ? <Spin size="small" /> : entries.length === 0 && !error + {error && <LoadError title={t('项目定时任务加载失败')} reason={error} onRetry={() => void reload()} />} + {loading && entries.length === 0 ? <SkeletonLines rows={2} /> : entries.length === 0 && !error ? <div className="jx-projectRail-cardEmpty">{t('本项目暂无定时任务')}</div> : <div className="jx-projectAutomation-list"> {entries.map(({ task, latest, error: runError }) => <div className="jx-projectAutomation-row" key={task.task_id}> diff --git a/src/frontend/src/components/projects/ProjectConversationHistory.tsx b/src/frontend/src/components/projects/ProjectConversationHistory.tsx index 7ab65e26..50443f3c 100644 --- a/src/frontend/src/components/projects/ProjectConversationHistory.tsx +++ b/src/frontend/src/components/projects/ProjectConversationHistory.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useRef, useState } from 'react'; -import { Button, Empty, Spin } from 'antd'; +import { Button, Empty } from 'antd'; import { MessageOutlined, ReloadOutlined } from '@ant-design/icons'; import { listProjectChats } from '../../api'; import { mergeProjectHistory } from '../../stores/projectHistory'; @@ -10,6 +10,8 @@ import { useAuthStore } from '../../stores/authStore'; import { formatShortDateTime } from '../../utils/date'; import type { ProjectDetail } from '../../types'; import { t } from '../../i18n'; +import { LoadError } from '../common/LoadState'; +import { ProjectConversationHistorySkeleton } from './ProjectSkeletons'; /** Discovery list only; every record opens the shared main conversation. */ export default function ProjectConversationHistory({ project }: { project: ProjectDetail }) { @@ -55,8 +57,8 @@ export default function ProjectConversationHistory({ project }: { project: Proje <Button type="text" size="small" icon={<ReloadOutlined />} loading={loading} aria-label={t('刷新')} onClick={() => void reload()} /> </div> - {error && <div role="alert">{error}<Button size="small" onClick={() => void reload()}>{t('重试')}</Button></div>} - {loading && items.length === 0 ? <Spin size="small" /> : items.length === 0 && !error + {error && <LoadError title={t('项目对话历史加载失败')} reason={error} onRetry={() => void reload()} />} + {loading && items.length === 0 ? <ProjectConversationHistorySkeleton /> : items.length === 0 && !error ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('还没有对话')} /> : <div className="jx-projectConversationHistory-list"> {items.slice(0, limit).map(item => <button type="button" key={item.id} diff --git a/src/frontend/src/components/projects/ProjectEnvironmentModal.tsx b/src/frontend/src/components/projects/ProjectEnvironmentModal.tsx index 9adfddc0..0bca7fe0 100644 --- a/src/frontend/src/components/projects/ProjectEnvironmentModal.tsx +++ b/src/frontend/src/components/projects/ProjectEnvironmentModal.tsx @@ -1,11 +1,12 @@ import { useEffect, useState } from 'react'; -import { Alert, Button, Modal, Spin, message } from 'antd'; +import { Modal, message } from 'antd'; import { defaultProjectEnvironment, getProjectEnvironment, saveProjectEnvironment, type ProjectEnvironment, } from '../../api/projectEnvironment'; import ProjectEnvironmentEditor from './ProjectEnvironmentEditor'; import { t } from '../../i18n'; +import { LoadError } from '../common/LoadState'; export default function ProjectEnvironmentModal({ projectId, open, onClose }: { projectId: string; open: boolean; onClose: () => void; @@ -24,7 +25,7 @@ export default function ProjectEnvironmentModal({ projectId, open, onClose }: { void getProjectEnvironment(projectId).then(detail => { if (active) setConfig(detail.config); }).catch(err => { - if (active) setError(err.message || t('加载项目环境失败')); + if (active) setError(err.message || t('加载失败')); }).finally(() => { if (active) setLoading(false); }); return () => { active = false; }; }, [projectId, open, retry]); @@ -46,9 +47,12 @@ export default function ProjectEnvironmentModal({ projectId, open, onClose }: { <p style={{ color: 'var(--color-text-secondary)' }}> {t('所有项目对话共用此环境。正在执行的对话保持原环境，项目外对话不受影响。')} </p> - {error ? <Alert type="error" message={error} - action={<Button onClick={() => setRetry(v => v + 1)}>{t('重试')}</Button>} /> : - loading ? <Spin /> : <ProjectEnvironmentEditor value={config} onChange={setConfig} + {error ? <LoadError title={t('项目环境加载失败')} reason={error} onRetry={() => setRetry(v => v + 1)} /> : + loading ? ( + <div className="jx-projectEnvironment-modes" role="status" aria-label={t('加载中…')} aria-busy="true"> + {Array.from({ length: 2 }, (_, index) => <div className="jx-skeletonBlock jx-projectEnvironment-skMode" key={index} aria-hidden="true" />)} + </div> + ) : <ProjectEnvironmentEditor value={config} onChange={setConfig} projectId={projectId} onReadyChange={setReady} />} </Modal>; } diff --git a/src/frontend/src/components/projects/ProjectHeader.tsx b/src/frontend/src/components/projects/ProjectHeader.tsx index c808f7a9..c42be8cd 100644 --- a/src/frontend/src/components/projects/ProjectHeader.tsx +++ b/src/frontend/src/components/projects/ProjectHeader.tsx @@ -6,12 +6,14 @@ import { useProjectStore } from '../../stores/projectStore'; import { useCatalogStore } from '../../stores/catalogStore'; import { t } from '../../i18n'; import EditProjectModal from './EditProjectModal'; +import { ProjectHeaderSkeleton } from './ProjectSkeletons'; export default function ProjectHeader({ projectId }: { projectId: string }) { const project = useProjectStore(s => s.currentProject); + const failed = useProjectStore(s => !!s.detailError); const [editOpen, setEditOpen] = useState(false); const [environmentOpen, setEnvironmentOpen] = useState(false); - if (!project || project.project_id !== projectId) return null; + if (!project || project.project_id !== projectId) return failed ? null : <ProjectHeaderSkeleton />; const canAdmin = project.permission === 'admin'; const canEdit = canAdmin || project.permission === 'edit'; const canDelete = !!project.is_owner; @@ -36,7 +38,7 @@ export default function ProjectHeader({ projectId }: { projectId: string }) { </div> <div className="jx-projectHeader-heading"> <h2 className="jx-projectHeader-title">{project.name}</h2> - {(project as { kind?: string }).kind === 'local' && ( + {project.kind === 'local' && ( <Tag color="green">{t('本机')}</Tag> )} <div className="jx-projectHeader-actions"> diff --git a/src/frontend/src/components/projects/ProjectMemoryCard.tsx b/src/frontend/src/components/projects/ProjectMemoryCard.tsx index 72410f1e..9c110de8 100644 --- a/src/frontend/src/components/projects/ProjectMemoryCard.tsx +++ b/src/frontend/src/components/projects/ProjectMemoryCard.tsx @@ -2,6 +2,8 @@ import { useEffect, useState } from 'react'; import { Button, Popover, Switch, Tooltip, message } from 'antd'; import { SettingOutlined } from '@ant-design/icons'; import { useProjectStore } from '../../stores/projectStore'; +import { getMemories } from '../../api'; +import { SkeletonLines } from '../common/LoadState'; import ProjectMemoriesModal from './ProjectMemoriesModal'; import { t } from '../../i18n'; @@ -19,22 +21,11 @@ export default function ProjectMemoryCard({ projectId }: { projectId: string }) const [viewerOpen, setViewerOpen] = useState(false); useEffect(() => { + if (!readEnabled) return; let aborted = false; - void (async () => { - try { - const { getApiUrl } = await import('../../api'); - const resp = await fetch( - `${getApiUrl()}/v1/memories?project_id=${encodeURIComponent(projectId)}`, - { credentials: 'include' }, - ); - const payload = await resp.json(); - if (aborted) return; - const data = payload?.data || {}; - setCount(typeof data.count === 'number' ? data.count : 0); - } catch { - if (!aborted) setCount(0); - } - })(); + getMemories(projectId) + .then(({ count: total }) => { if (!aborted) setCount(total); }) + .catch(() => { if (!aborted) setCount(0); }); return () => { aborted = true; }; }, [projectId, reloadKey, readEnabled]); @@ -108,17 +99,13 @@ export default function ProjectMemoryCard({ projectId }: { projectId: string }) {!readEnabled ? ( <div className="jx-projectRail-cardEmpty">{t('读取已关闭，项目记忆不会注入对话')}</div> ) : count === null ? ( - <div className="jx-projectRail-cardEmpty">{t('加载中…')}</div> + <SkeletonLines rows={1} /> ) : count === 0 ? ( <div className="jx-projectRail-cardEmpty">{t('几轮对话之后，项目记忆会出现在这里。')}</div> ) : ( - <div - className="jx-projectRail-cardEmpty jx-projectRail-memoryCount" - onClick={() => setViewerOpen(true)} - style={{ cursor: 'pointer' }} - title={t('点击查看项目记忆详情')} - > - {t('已积累 {n} 条记忆 · ', { n: count })}<span style={{ color: 'var(--color-primary)' }}>{t('查看')}</span> + <div className="jx-projectRail-cardEmpty"> + {t('已积累 {n} 条记忆 · ', { n: count })} + <Button type="link" size="small" className="jx-projectRail-inlineLink" onClick={() => setViewerOpen(true)}>{t('查看')}</Button> </div> )} diff --git a/src/frontend/src/components/projects/ProjectRightRail.tsx b/src/frontend/src/components/projects/ProjectRightRail.tsx index af3254c2..c4f8dd45 100644 --- a/src/frontend/src/components/projects/ProjectRightRail.tsx +++ b/src/frontend/src/components/projects/ProjectRightRail.tsx @@ -1,6 +1,6 @@ import { prepareProjectFolderDeletion } from './projectFolderDeletion'; import { useCallback, useEffect, useRef, useState } from 'react'; -import { Button, Dropdown, Empty, Input, Modal, Progress, Spin, Tag, message } from 'antd'; +import { Button, Dropdown, Empty, Input, Modal, Progress, Tag, message } from 'antd'; import { EditOutlined, ExportOutlined, @@ -11,13 +11,14 @@ import { } from '@ant-design/icons'; import ProjectFileList from './ProjectFileList'; import { fmtBytes, leafName } from './projectFileDisplay'; -import type { ProjectFileItem } from '../../types'; +import type { ProjectFileItem, ResourceItem } from '../../types'; import { useProjectStore } from '../../stores/projectStore'; import { FilePreviewModal } from '../file/FilePreviewModal'; import { DropOverlay } from '../common/DropOverlay'; import { UploadProgressBar } from '../common/UploadProgressBar'; import ProjectMemoryCard from './ProjectMemoryCard'; import ProjectAutomationsCard from './ProjectAutomationsCard'; +import { LoadError, SkeletonLines } from '../common/LoadState'; import { useFileDropZone } from '../../hooks/useFileDropZone'; import { t } from '../../i18n'; @@ -176,8 +177,8 @@ function FilesCard() { const canEdit = project?.permission === 'admin' || project?.permission === 'edit'; // 本地文件夹项目：文件即本机真实文件，增删在访达/文件管理器里做——隐藏上传、 // 删除与容量条，改为提供「在访达中打开」入口（项目文件卡片头部，+ 号位置旁）。 - const isLocal = (project as { kind?: string } | null)?.kind === 'local'; - const localPath = (project as { local_path?: string } | null)?.local_path || ''; + const isLocal = project?.kind === 'local'; + const localPath = project?.local_path || ''; const canUpload = canEdit && !isLocal; const pct = capacityLimit > 0 ? Math.min(100, Math.round((capacityUsed / capacityLimit) * 100)) : 0; @@ -258,7 +259,7 @@ function FilesCard() { }, [project, canUpload, refreshFiles]); // Adapt ProjectFileItem to the ResourceItem shape that FilePreviewPane accepts - const previewItem = previewFile + const previewItem: ResourceItem | null = previewFile ? { id: previewFile.artifact_id, origin: isLocal ? 'local' : 'cloud', @@ -269,7 +270,7 @@ function FilesCard() { download_url: previewFile.download_url, type: (previewFile.mime_type || '').startsWith('image/') ? 'image' : 'document', created_at: previewFile.created_at || '', - } as unknown as import('../../types').ResourceItem + } : null; const folderTag = project?.folder_name ? ( @@ -326,7 +327,7 @@ function FilesCard() { <div className="jx-projectRail-cardSub" title={localPath}>{localPath}</div> ) : ( <> - <Progress percent={pct} size="small" showInfo={false} strokeColor="#126DFF" /> + <Progress percent={pct} size="small" showInfo={false} /> <div className="jx-projectRail-cardSub"> {t('已用 {used} / {limit}', { used: fmtBytes(capacityUsed), limit: fmtBytes(capacityLimit || 0) })} </div> @@ -337,12 +338,9 @@ function FilesCard() { <UploadProgressBar progress={uploadProgress} /> {filesError && ( - <div role="alert"> - {filesError} - <Button size="small" onClick={() => { void refreshFiles().catch(() => {}); }}>{t('重试')}</Button> - </div> + <LoadError title={t('项目文件加载失败')} reason={filesError} onRetry={() => { void refreshFiles().catch(() => {}); }} /> )} - {filesLoading && files.length === 0 ? <Spin /> : files.length === 0 && !filesError ? ( + {filesLoading && files.length === 0 ? <SkeletonLines rows={4} /> : files.length === 0 && !filesError ? ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('该项目还没有文件')} /> ) : ( <ProjectFileList key={project?.project_id} files={files} canEdit={canUpload} diff --git a/src/frontend/src/components/projects/ProjectSkeletons.tsx b/src/frontend/src/components/projects/ProjectSkeletons.tsx index 9f5c4174..54953310 100644 --- a/src/frontend/src/components/projects/ProjectSkeletons.tsx +++ b/src/frontend/src/components/projects/ProjectSkeletons.tsx @@ -45,3 +45,62 @@ export function ProjectsSkeleton() { </div> ); } + +export function ProjectHeaderSkeleton() { + return ( + <section className="jx-projectHeader jx-projectHeader--skeleton" role="status" aria-label={t('加载中…')} aria-busy="true"> + <div aria-hidden="true"> + <div className="jx-skeletonBlock jx-projectHeader-skBack" /> + <div className="jx-projectHeader-heading"> + <div className="jx-skeletonBlock jx-projectHeader-skTitle" /> + <div className="jx-projectHeader-actions"> + {Array.from({ length: 3 }, (_, index) => <div className="jx-skeletonBlock jx-projectHeader-skAction" key={index} />)} + </div> + </div> + </div> + </section> + ); +} + +const RAIL_CARD_ROWS = [1, 1, 2, 4]; + +export function ProjectRailSkeleton() { + return ( + <div className="jx-projectRail" role="status" aria-label={t('加载中…')} aria-busy="true"> + {RAIL_CARD_ROWS.map((rows, index) => ( + <div className="jx-projectRail-card" key={index} aria-hidden="true"> + <div className="jx-projectRail-cardHeader"> + <div className="jx-skeletonBlock jx-projectRail-skTitle" /> + <div className="jx-skeletonBlock jx-projectRail-skAction" /> + </div> + {Array.from({ length: rows }, (_, row) => <div className="jx-skeletonBlock jx-skeletonLines-line" key={row} />)} + </div> + ))} + </div> + ); +} + +/** Suspense fallback for the lazily loaded rail: same shell, skeleton body. */ +export function ProjectWorkspaceRailSkeleton() { + return ( + <aside className="jx-projectWorkspaceRail" aria-label={t('项目资料')}> + <div className="jx-projectWorkspaceRail-body"><ProjectRailSkeleton /></div> + </aside> + ); +} + +export function ProjectConversationHistorySkeleton() { + return ( + <div className="jx-projectConversationHistory-list" role="status" aria-label={t('加载中…')} aria-busy="true"> + {Array.from({ length: 3 }, (_, index) => ( + <div className="jx-projectConversationHistory-item jx-projectConversationHistory-item--skeleton" key={index} aria-hidden="true"> + <div className="jx-skeletonBlock jx-projectConversationHistory-skIcon" /> + <span className="jx-projectConversationHistory-body"> + <div className="jx-skeletonBlock jx-projectConversationHistory-skTitle" /> + <div className="jx-skeletonBlock jx-projectConversationHistory-skMeta" /> + </span> + </div> + ))} + </div> + ); +} diff --git a/src/frontend/src/components/projects/ProjectWorkspaceRail.tsx b/src/frontend/src/components/projects/ProjectWorkspaceRail.tsx index 3c41fc32..bc624f17 100644 --- a/src/frontend/src/components/projects/ProjectWorkspaceRail.tsx +++ b/src/frontend/src/components/projects/ProjectWorkspaceRail.tsx @@ -4,10 +4,12 @@ import { CloseOutlined, FolderOutlined } from '@ant-design/icons'; import { useProjectStore } from '../../stores/projectStore'; import { t } from '../../i18n'; import ProjectRightRail from './ProjectRightRail'; +import { ProjectRailSkeleton } from './ProjectSkeletons'; +import { LoadError } from '../common/LoadState'; export default function ProjectWorkspaceRail({ projectId }: { projectId: string }) { - const project = useProjectStore(s => s.currentProject); - const loading = useProjectStore(s => s.detailLoading); + const loaded = useProjectStore(s => s.currentProject?.project_id === projectId); + const error = useProjectStore(s => s.detailError); const [expanded, setExpanded] = useState(false); return <aside className={`jx-projectWorkspaceRail${expanded ? ' is-expanded' : ''}`} aria-label={t('项目资料')}> <Button className="jx-projectWorkspaceRail-toggle" icon={expanded ? <CloseOutlined /> : <FolderOutlined />} @@ -15,9 +17,10 @@ export default function ProjectWorkspaceRail({ projectId }: { projectId: string {t('项目资料')} </Button> <div id="project-resources" className="jx-projectWorkspaceRail-body"> - {project?.project_id === projectId ? <ProjectRightRail /> : loading - ? <div role="status">{t('加载中…')}</div> - : <div role="alert">{t('项目不存在或你无权访问')}<Button onClick={() => void useProjectStore.getState().reloadProject(projectId)}>{t('重试')}</Button></div>} + {loaded ? <ProjectRightRail /> : error ? ( + <LoadError className="jx-projectRail-card" title={t('项目资料加载失败')} reason={error} + onRetry={() => void useProjectStore.getState().reloadProject(projectId)} /> + ) : <ProjectRailSkeleton />} </div> </aside>; } diff --git a/src/frontend/src/components/projects/projectFolderLocation.ts b/src/frontend/src/components/projects/projectFolderLocation.ts new file mode 100644 index 00000000..07f217c3 --- /dev/null +++ b/src/frontend/src/components/projects/projectFolderLocation.ts @@ -0,0 +1,33 @@ +import { apiRequest, unwrapData } from '../../api'; +import type { ProjectItem } from '../../types'; +import { t } from '../../i18n'; + +interface FolderNode { + folder_id: string; + name: string; + children?: FolderNode[]; +} + +/** Names from the tree root down to `id`, or null when the folder is not in the tree. */ +function namesTo(nodes: FolderNode[], id: string): string[] | null { + for (const node of nodes) { + if (node.folder_id === id) return [node.name]; + const below = namesTo(node.children || [], id); + if (below) return [node.name, ...below]; + } + return null; +} + +/** + * Where a cloud project's folder lives in My Space: the space id and the path + * inside it, matching the backend's project_location. + */ +export async function projectSpaceLocation(project: ProjectItem): Promise<{ space: string; path: string }> { + const rootId = project.linked_folder_id; + if (!rootId) throw new Error(t('项目未绑定文件目录')); + const treePath = '/v1/myspace/folders'; + const response = await apiRequest<unknown>(treePath + '?as=tree'); + const names = namesTo(unwrapData<{ tree: FolderNode[] }>(response).tree || [], String(rootId)); + if (!names) throw new Error(t('项目文件夹不存在')); + return { space: 'personal', path: names.join('/') }; +} diff --git a/src/frontend/src/components/settings/EvolutionPrefsPanel.tsx b/src/frontend/src/components/settings/EvolutionPrefsPanel.tsx index 72167e9f..24a8794d 100644 --- a/src/frontend/src/components/settings/EvolutionPrefsPanel.tsx +++ b/src/frontend/src/components/settings/EvolutionPrefsPanel.tsx @@ -1,10 +1,11 @@ import { InfoCircleOutlined } from '@ant-design/icons'; -import { InputNumber, Radio, Select, Switch, Tag, Tooltip, message } from 'antd'; +import { InputNumber, Switch, Tooltip, message } from 'antd'; import { useEffect, useState } from 'react'; import { getEvolutionPrefs, updateEvolutionPrefs } from '../../api'; -import type { EvolutionPrefs, OntologyPackOption } from '../../api'; +import type { EvolutionPrefs } from '../../api'; import { t } from '../../i18n'; +import { LoadError } from '../common/LoadState'; const MECHANISMS: Array<{ key: string; label: string; desc: string }> = [ { key: 'memory', label: '记忆生长', desc: '把事实与偏好沉淀为长期记忆' }, @@ -15,26 +16,45 @@ const MECHANISMS: Array<{ key: string; label: string; desc: string }> = [ /** * Fine-grained evolution configuration. * - * The ontology control is the reason this panel exists rather than a single - * switch: deployments run several domain packs, exactly one, or none at all, - * and a design that assumes a pack exists breaks the third case completely. - * "Not bound" is therefore presented as an ordinary choice, not a warning. + * Mechanisms, distillation threshold and related switches beyond the single + * on/off control. */ export function EvolutionPrefsPanel({ onShowDetail }: { onShowDetail?: () => void }) { const [prefs, setPrefs] = useState<EvolutionPrefs | null>(null); - const [packs, setPacks] = useState<OntologyPackOption[]>([]); const [saving, setSaving] = useState(false); + const [loadError, setLoadError] = useState(''); + const [attempt, setAttempt] = useState(0); useEffect(() => { + let disposed = false; getEvolutionPrefs() .then((data) => { + if (disposed) return; setPrefs(data.prefs); - setPacks(data.ontology_packs ?? []); }) - .catch(() => setPrefs(null)); - }, []); - - if (!prefs) return null; + .catch((err) => { if (!disposed) setLoadError((err as Error).message || t('加载失败')); }); + return () => { disposed = true; }; + }, [attempt]); + + const retry = () => { setLoadError(''); setAttempt((n) => n + 1); }; + + if (!prefs) { + return loadError + ? <LoadError title={t('进化设置加载失败')} reason={loadError} onRetry={retry} /> + : ( + <div className="jx-evoPrefs" role="status" aria-label={t('加载中…')} aria-busy="true"> + {Array.from({ length: 5 }, (_, index) => ( + <div className="jx-evoPrefs-row" key={index} aria-hidden="true"> + <div className="jx-evoPrefs-label"> + <div className="jx-skeletonBlock jx-evoPrefs-skLabel" /> + <div className="jx-skeletonBlock jx-evoPrefs-skDesc" /> + </div> + <div className="jx-skeletonBlock jx-evoPrefs-skControl" /> + </div> + ))} + </div> + ); + } const patch = (change: Partial<EvolutionPrefs>) => { const previous = prefs; @@ -64,7 +84,6 @@ export function EvolutionPrefsPanel({ onShowDetail }: { onShowDetail?: () => voi patch({ mechanisms: next }); }; - const activePacks = packs.filter((p) => p.active); return ( <div className="jx-evoPrefs"> @@ -115,46 +134,6 @@ export function EvolutionPrefsPanel({ onShowDetail }: { onShowDetail?: () => voi </div> </div> - <div className="jx-evoPrefs-row"> - <div className="jx-evoPrefs-label"> - <span>{t('领域本体关联')}</span> - <small>{t('沉淀能力时是否按领域规则校验；没有本体包也可正常进化')}</small> - </div> - <div className="jx-evoPrefs-ontology"> - <Radio.Group - value={prefs.ontology_mode} - onChange={(e) => patch({ ontology_mode: e.target.value })} - disabled={saving || !prefs.enabled} - > - <Radio.Button value="none">{t('不关联')}</Radio.Button> - <Radio.Button value="any" disabled={activePacks.length === 0}> - {t('全部本体')} - </Radio.Button> - <Radio.Button value="specific" disabled={activePacks.length === 0}> - {t('指定本体')} - </Radio.Button> - </Radio.Group> - - {prefs.ontology_mode === 'specific' && ( - <Select - className="jx-evoPrefs-packSelect" - size="small" - placeholder={t('选择领域本体包')} - value={prefs.ontology_pack_id || undefined} - disabled={saving || !prefs.enabled} - onChange={(value) => patch({ ontology_pack_id: value })} - options={activePacks.map((p) => ({ value: p.pack_id, label: p.name }))} - /> - )} - - {activePacks.length === 0 && ( - // Stated plainly rather than hiding the control: an absent setting - // reads as a missing feature, which is a different message. - <Tag>{t('当前没有已激活的领域本体包，进化将不做本体校验')}</Tag> - )} - </div> - </div> - <div className="jx-evoPrefs-row"> <div className="jx-evoPrefs-label"> <span>{t('沉淀门槛')}</span> diff --git a/src/frontend/src/components/settings/PageSettingsPanel.tsx b/src/frontend/src/components/settings/PageSettingsPanel.tsx index fe89efef..8745709b 100644 --- a/src/frontend/src/components/settings/PageSettingsPanel.tsx +++ b/src/frontend/src/components/settings/PageSettingsPanel.tsx @@ -1,30 +1,15 @@ -import { Select, Switch } from 'antd'; +import { Select } from 'antd'; import { getLang, setLang, t, type Lang } from '../../i18n'; import { useUIStore } from '../../stores'; import type { ThemeMode } from '../../theme'; import { SidebarLayoutSetting } from './SidebarLayoutSetting'; export function PageSettingsPanel() { - const { dispatchProcessVisible, setDispatchProcessVisible, themeMode, setThemeMode } = useUIStore(); + const { themeMode, setThemeMode } = useUIStore(); return ( <section id="section-session" className="jx-settings-section"> <h3 className="jx-settings-section-title">{t('页面设置')}</h3> <div className="jx-settings-card"> - <div className="jx-settings-row"> - <div className="jx-settings-rowLeft"> - <span className="jx-settings-rowLabel">{t('显示调度过程')}</span> - <span className="jx-settings-rowDesc"> - {t('控制对话中是否显示对话里调度的智能体、连接器、技能等组件')} - </span> - </div> - <Switch - checked={dispatchProcessVisible} - onChange={(checked) => setDispatchProcessVisible(checked)} - /> - </div> - - <div className="jx-settings-divider" /> - <div className="jx-settings-row"> <div className="jx-settings-rowLeft"> <span className="jx-settings-rowLabel">{t('界面语言')}</span> diff --git a/src/frontend/src/components/settings/SettingsModal.tsx b/src/frontend/src/components/settings/SettingsModal.tsx index 9deb8c10..14f8ce69 100644 --- a/src/frontend/src/components/settings/SettingsModal.tsx +++ b/src/frontend/src/components/settings/SettingsModal.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'; import { - Alert, Modal, Switch, Button, Tag, Slider, message, Input, + Modal, Switch, Button, Tag, Slider, message, Input, Spin, Tooltip, } from 'antd'; import { @@ -8,7 +8,6 @@ import { DeploymentUnitOutlined, EditOutlined, ExclamationCircleFilled, FileTextOutlined, KeyOutlined, LinkOutlined, LockOutlined, LogoutOutlined, LayoutOutlined, RobotOutlined, UserOutlined, - SafetyCertificateOutlined, ExperimentOutlined, } from '@ant-design/icons'; import { AnimatePresence, motion } from 'motion/react'; @@ -18,7 +17,6 @@ import { resolveAvatarUrl } from '../../utils/avatar'; import { getMyProfile, getMySystemAccess, - getOntologyGovernanceAccess, setMyAvatarUrl, updateMyProfile, uploadMyAvatar, @@ -39,7 +37,6 @@ import { MyLogsPanel } from './MyLogsPanel'; import { PasswordManagementPanel } from './PasswordManagementPanel'; import { ChatModesPanel } from './ChatModesPanel'; import { MemoryManagerModal } from '../memory/MemoryManagerModal'; -import { OntologyManager } from '../ontology'; import { t } from '../../i18n'; import { PageSettingsPanel } from './PageSettingsPanel'; import { navigateTo, pathForPanel } from '../../routing/navigation'; @@ -55,7 +52,6 @@ const SETTINGS_SECTIONS: SectionDef[] = [ { id: 'profile', label: t('个人信息'), icon: <UserOutlined /> }, { id: 'session', label: t('页面设置'), icon: <LayoutOutlined /> }, { id: 'memory', label: t('进化控制台'), icon: <DatabaseOutlined /> }, - { id: 'ontology', label: t('本体校验'), icon: <SafetyCertificateOutlined /> }, { id: 'enabled', label: t('已启用清单'), icon: <AppstoreOutlined /> }, ]; @@ -109,21 +105,14 @@ export default function SettingsPage() { memoryPanelOpen, memoryProfile, lastToggleError, - ontologyEnabled, - ontologyAvailable, - ontologyImportValidationForced, - ontologyActivePacks, setMemoryPanelOpen, toggleMemory, toggleMemoryWrite, - toggleOntology, - loadOntologySettings, } = useSettingsStore(); const { authUser, doLogout, setAvatarUrl, setAuthUser, loggingOut } = useAuthStore(); const apiKeyEnabled = authUser?.can_use_api_key === true; const channelBotEnabled = authUser?.can_create_channel_bot === true; - const ontologyValidationAllowed = authUser?.can_use_ontology_validation === true; const chatModesAllowed = authUser?.can_manage_chat_modes === true; // Organization management is exposed only when the edition capability is active. const multiTenancy = useEditionStore((s) => (s.loaded ? !!s.features.multi_tenancy : true)); @@ -131,7 +120,6 @@ export default function SettingsPage() { // model service / service config; "My logs" is the user's own data, visible to all logged-in users under CE. const isCE = useEditionStore((s) => (s.loaded ? s.edition === 'ce' : false)); const [sysAccess, setSysAccess] = useState(false); - const [ontologyGovernanceAccess, setOntologyGovernanceAccess] = useState(false); const [logoutConfirmOpen, setLogoutConfirmOpen] = useState(false); // Evolution detail card. The participation toggle it used to sit beside is // gone — the single「启动进化」switch in EvolutionPrefsPanel now governs both @@ -144,25 +132,11 @@ export default function SettingsPage() { .then((info) => setSysAccess(!!info.allowed)) .catch(() => setSysAccess(false)); }, [isCE, authUser?.user_id]); - useEffect(() => { - if (!isCE) { setOntologyGovernanceAccess(false); return; } - getOntologyGovernanceAccess() - .then((info) => setOntologyGovernanceAccess(!!info.allowed)) - .catch(() => setOntologyGovernanceAccess(false)); - }, [isCE, authUser?.user_id]); // Only show a section in the settings center when the admin has enabled the corresponding capability bit const sections = useMemo<SectionDef[]>(() => { let base = (multiTenancy || (isCE && sysAccess)) ? [...SETTINGS_SECTIONS, ...EDITION_SETTINGS_SECTIONS] : SETTINGS_SECTIONS; - if (!ontologyValidationAllowed) { - base = base.filter((section) => section.id !== 'ontology'); - } - if (isCE && ontologyGovernanceAccess) { - base = base.map((section) => ( - section.id === 'ontology' ? { ...section, label: t('本体治理') } : section - )); - } if (isCE) base = [base[0], PASSWORD_SECTION, ...base.slice(1)]; if (apiKeyEnabled) base = [...base, API_KEY_SECTION]; if (channelBotEnabled) base = [...base, CHANNELS_SECTION]; @@ -170,7 +144,7 @@ export default function SettingsPage() { if (isCE && sysAccess) base = [...base, SYS_MODEL_SECTION, SYS_SERVICE_SECTION]; if (isCE) base = [...base, MY_LOGS_SECTION]; return base; - }, [apiKeyEnabled, channelBotEnabled, chatModesAllowed, multiTenancy, isCE, ontologyGovernanceAccess, ontologyValidationAllowed, sysAccess]); + }, [apiKeyEnabled, channelBotEnabled, chatModesAllowed, multiTenancy, isCE, sysAccess]); const [editingNickname, setEditingNickname] = useState(false); const [nicknameDraft, setNicknameDraft] = useState(''); const [savingNickname, setSavingNickname] = useState(false); @@ -450,7 +424,7 @@ export default function SettingsPage() { return ( <> {contextHolder} - <div className={`jx-settings-shell${isCE && ontologyGovernanceAccess && activeSection === 'ontology' ? ' jx-settings-shell--wide' : ''}`}> + <div className="jx-settings-shell"> <nav className="jx-settings-nav" aria-label={t('系统设置')}> <p className="jx-settings-navTitle">{t('系统设置')}</p> {sections.map((s) => ( @@ -733,71 +707,6 @@ export default function SettingsPage() { </section> )} - {/* ── Ontology validation ─────────────────────────────── */} - {ontologyValidationAllowed && activeSection === 'ontology' && ( - <section id="section-ontology" className="jx-settings-section"> - <h3 className="jx-settings-section-title">{isCE && ontologyGovernanceAccess ? t('本体治理') : t('本体校验')}</h3> - <div className="jx-settings-card"> - <div className={`jx-settings-row${shakeRowKey === 'ontology' ? ' jx-anim-shake' : ''}`}> - <div className="jx-settings-rowLeft"> - <span className="jx-settings-rowLabel">{t('使用领域本体校验')}</span> - <span className="jx-settings-rowDesc"> - {ontologyAvailable - ? t('开启后，工具调用会先经过领域规则门禁，高风险答案会在交付前由独立评审委员会校验') - : isCE && ontologyGovernanceAccess - ? t('请先在下方导入并发布可用的领域本体包') - : t('管理员尚未激活可用的领域本体包')} - </span> - </div> - <Tooltip title={!ontologyAvailable ? t('暂无可用本体包') : undefined}> - <span> - <Switch - checked={ontologyEnabled && ontologyAvailable} - disabled={!ontologyAvailable} - onChange={(checked) => toggleOntology(checked)} - /> - </span> - </Tooltip> - </div> - {ontologyImportValidationForced && ( - <Alert - showIcon - type="warning" - style={{ margin: '0 16px 16px' }} - message={t('管理员已强制插件导入执行本体构建校验')} - description={t('此门禁独立于上方个人开关；即使你关闭对话本体校验，导入或安装插件时仍会检查技能和 MCP。')} - /> - )} - {ontologyActivePacks.length > 0 && ( - <> - <div className="jx-settings-divider" /> - <div className="jx-settings-row"> - <div className="jx-settings-rowLeft"> - <span className="jx-settings-rowLabel">{t('当前领域包')}</span> - <span className="jx-settings-rowDesc">{t('仅在任务命中领域工作流时注入相关概念和规则')}</span> - </div> - <div className="jx-settings-tagWrap"> - {ontologyActivePacks.map((pack) => ( - <Tag key={pack.version_id} color="geekblue"> - {pack.pack_id} · v{pack.version} - </Tag> - ))} - </div> - </div> - </> - )} - </div> - {isCE && ontologyGovernanceAccess && ( - <div className="jx-settings-card jx-settings-card--padded jx-settings-ontologyGovernance"> - <OntologyManager - apiPrefix="/v1/ontologies/governance" - onChanged={loadOntologySettings} - /> - </div> - )} - </section> - )} - {/* ── Enabled list ────────────────────────────────── */} {activeSection === 'enabled' && ( <section id="section-enabled" className="jx-settings-section"> diff --git a/src/frontend/src/components/sidebar/ChatSidebarItem.tsx b/src/frontend/src/components/sidebar/ChatSidebarItem.tsx index d51e3dea..692b7212 100644 --- a/src/frontend/src/components/sidebar/ChatSidebarItem.tsx +++ b/src/frontend/src/components/sidebar/ChatSidebarItem.tsx @@ -162,11 +162,13 @@ export function ChatSidebarItem({ item, groupItems, scopeKey, dragScopeRef, acti <Input size="small" value={editingTitle} autoFocus onChange={(e) => setEditingTitle(e.target.value)} onPressEnter={() => void onCommitRename(item.id)} + onFocus={(e) => e.target.select()} onBlur={() => void onCommitRename(item.id)} onClick={(e) => e.stopPropagation()} maxLength={30} className="jx-historyEditInput" /> ) : ( - <div className="jx-historyMain"> + // 双击标题区直接进入重命名，与菜单里的「重命名」同一入口 + <div className="jx-historyMain" onDoubleClick={(e) => { e.stopPropagation(); onStartRename(item); }}> {inProjectGroup && <span className="jx-historyStatusSlot"><TaskStatusDot {...indicator} /></span>} {item.pinned ? ( <Tooltip title={t('已置顶')}> diff --git a/src/frontend/src/components/sidebar/ModuleButton.tsx b/src/frontend/src/components/sidebar/ModuleButton.tsx index b6d85b4f..c5d53236 100644 --- a/src/frontend/src/components/sidebar/ModuleButton.tsx +++ b/src/frontend/src/components/sidebar/ModuleButton.tsx @@ -12,7 +12,7 @@ export function ModuleButton({ entry, active, onSelect, expanded = false, count aria-label={meta.label} aria-current={active ? 'page' : undefined} onClick={() => onSelect(meta.targetPanel)}> <Badge count={count} size="small"><img className={expanded ? 'jx-navItemIcon' : 'jx-miniRailIcon'} src={meta.icon} alt="" /></Badge> - {expanded && <span>{meta.label}</span>} + {expanded ? <span>{meta.label}</span> : <span className="jx-moduleButtonLabel" aria-hidden="true">{meta.label}</span>} </button> </Tooltip>; } diff --git a/src/frontend/src/components/sidebar/MoreModules.tsx b/src/frontend/src/components/sidebar/MoreModules.tsx index 060fa48b..76ad1674 100644 --- a/src/frontend/src/components/sidebar/MoreModules.tsx +++ b/src/frontend/src/components/sidebar/MoreModules.tsx @@ -30,6 +30,6 @@ export function MoreModules({ entries, panel, onSelect, expanded = false, classN if (['Enter', ' ', 'ArrowDown'].includes(event.key)) { event.preventDefault(); event.stopPropagation(); setOpen(true); } - }}><EllipsisOutlined />{expanded && <span>{t('更多')}</span>}</button> + }}><EllipsisOutlined />{expanded ? <span>{t('更多')}</span> : <span className="jx-moduleButtonLabel" aria-hidden="true">{t('更多')}</span>}</button> </Dropdown>; } diff --git a/src/frontend/src/components/sidebar/Sidebar.tsx b/src/frontend/src/components/sidebar/Sidebar.tsx index 62a1e3d9..a8a63570 100644 --- a/src/frontend/src/components/sidebar/Sidebar.tsx +++ b/src/frontend/src/components/sidebar/Sidebar.tsx @@ -53,7 +53,7 @@ function ModernSidebar(actions: SidebarProps) { }; return <Layout.Sider width={344} collapsedWidth={64} collapsed={collapsed || !hasSecondary} theme="light" className="jx-sider jx-moduleShell"> <nav onKeyDown={navigationKeyboard} className="jx-moduleRail" aria-label={t('导航')}> - <Tooltip title={t('对话')} placement="right"><button className={`jx-moduleButton${chatModule ? ' active' : ''}`} aria-label={t('对话')} aria-pressed={chatModule} onClick={() => select('chat')}><img className="jx-moduleLogo" src={logo} alt="" /></button></Tooltip> + <Tooltip title={t('对话')} placement="right"><button className={`jx-moduleButton${chatModule ? ' active' : ''}`} aria-label={t('对话')} aria-pressed={chatModule} onClick={() => select('chat')}><img className="jx-moduleLogo" src={logo} alt="" /><span className="jx-moduleButtonLabel" aria-hidden="true">{t('对话')}</span></button></Tooltip> {primary.map(entry => <ModuleButton key={entry.id} entry={entry} active={panel === entry.meta.targetPanel} className="jx-moduleButton" onSelect={select} count={entry.id === 'my_space' ? count : 0} />)} <MoreModules entries={more} panel={panel} onSelect={select} /> diff --git a/src/frontend/src/components/sites/SitesPanel.tsx b/src/frontend/src/components/sites/SitesPanel.tsx index c99ee704..243f8a99 100644 --- a/src/frontend/src/components/sites/SitesPanel.tsx +++ b/src/frontend/src/components/sites/SitesPanel.tsx @@ -237,7 +237,7 @@ export function SitesPanel() { <div className="jx-agentPage-title">{t('站点')}</div> <div className="jx-agentPage-subtitle">{t('在同一处访问和管理你的站点与 MCP 服务')}</div> </div> - <Button type="primary" onClick={startSiteCreation}>{t('创建')}</Button> + <Button type="primary" onClick={startSiteCreation}>{t('创建新站点')}</Button> </div> <div className="jx-sites-body"> diff --git a/src/frontend/src/components/tool/SubagentCallRow.tsx b/src/frontend/src/components/tool/SubagentCallRow.tsx index 59cd195b..d0350da1 100644 --- a/src/frontend/src/components/tool/SubagentCallRow.tsx +++ b/src/frontend/src/components/tool/SubagentCallRow.tsx @@ -1,11 +1,10 @@ import { ExclamationCircleOutlined, LoadingOutlined, PauseCircleOutlined } from '@ant-design/icons'; -import { Modal } from 'antd'; import { t } from '../../i18n'; import { useSubagentIdentity } from '../../hooks/useSubagentIdentity'; -import { useCanvasStore } from '../../stores/canvasStore'; import type { ToolCall } from '../../types'; import { subagentStatus } from '../../utils/subagentView'; import { AgentIcon } from '../agent/AgentIcon'; +import { openSubagentTab } from './openSubagentTab'; import type { ToolMessageIdentity } from './ToolMessageContext'; export function SubagentStatus({ tool, isStreaming }: { tool: ToolCall; isStreaming?: boolean }) { @@ -23,18 +22,7 @@ export function SubagentCallRow({ tool, isStreaming, identity }: { }) { const agent = useSubagentIdentity(tool); const running = subagentStatus(tool, isStreaming) === 'running'; - const open = () => { - const state = useCanvasStore.getState(); - const action = () => state.openSubagent({ - chatId: identity.chatId, messageUid: identity.messageUid, toolId: tool.id!, - agent: { agent_id: agent.agent_id, name: agent.name, avatar: agent.avatar }, - }); - const active = state.tabs.find((tab) => tab.id === state.activeTabId); - if (active?.kind === 'file' && active.dirty) { - Modal.confirm({ title: t('有未保存的修改'), content: t('离开后编辑内容将丢失，确定继续？'), - okText: t('放弃修改'), cancelText: t('取消'), okButtonProps: { danger: true }, onOk: action }); - } else action(); - }; + const open = () => openSubagentTab(tool, agent, identity); return ( <div className="jx-tcr"> <button type="button" className="jx-tcr-header jx-subagentCall" onClick={open} diff --git a/src/frontend/src/components/tool/ToolMessageContext.tsx b/src/frontend/src/components/tool/ToolMessageContext.tsx index 98689f50..d0df0883 100644 --- a/src/frontend/src/components/tool/ToolMessageContext.tsx +++ b/src/frontend/src/components/tool/ToolMessageContext.tsx @@ -4,8 +4,8 @@ import { createContext, useContext } from 'react'; * 工具卡所属的「哪条消息」。 * * 历史里的工具结果只下发梗概，展开时才回后端取全文（见 `getToolCallResult`）—— - * 取的时候要报出 chat_id + message_id + tool_id。工具卡外面套着 ToolRunShell / - * ToolProgressInline 好几层，逐层透传三个参数会把这几层的签名都搅浑，所以用一个 + * 取的时候要报出 chat_id + message_id + tool_id。工具卡外面套着 ToolRunShell + * 好几层，逐层透传三个参数会把这几层的签名都搅浑，所以用一个 * 只读上下文在 MessageBubble 处一次性挂上。 * * 值为 null（流式过程中、批量面板等没有落库消息的场景）时，工具卡就老老实实只显示 diff --git a/src/frontend/src/components/tool/ToolProgressInline.tsx b/src/frontend/src/components/tool/ToolProgressInline.tsx deleted file mode 100644 index cd3e3940..00000000 --- a/src/frontend/src/components/tool/ToolProgressInline.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { useState } from 'react'; -import { RightOutlined } from '@ant-design/icons'; -import { useChatStore } from '../../stores'; -import { resolveToolDisplayName } from '../../utils/toolMeta'; -import { useCollapseHeight } from '../../hooks/useCollapseHeight'; -import { BrandLoader, ElapsedTimer } from '../common'; -import { ToolCallRow } from './ToolCallRow'; -import { computeEffectiveStatus } from './renderers/utils'; -import type { ChatMessage } from '../../types'; -import { t } from '../../i18n'; - -interface ToolProgressInlineProps { - message: ChatMessage; - /** Segment-level tool calls (subset) — if provided, only these are shown */ - toolCalls?: NonNullable<ChatMessage['toolCalls']>; -} - -/** - * Collapsed tool batch shown when dispatchProcessVisible is off. - * - * The header line is unchanged — brand loader + quiet summary text + timer. - * Clicking it unfolds the step list **in place** instead of pushing a card into - * the right-hand Canvas, so reading one tool call no longer costs the reader - * the whole answer column. The body is ToolRunShell's `.jx-trs-body`, so an - * expanded batch is the same rows at the same density in both modes. - */ -export function ToolProgressInline({ message, toolCalls }: ToolProgressInlineProps) { - const toolDisplayNames = useChatStore((s) => s.toolDisplayNames); - const [open, setOpen] = useState(false); - // Rows carry a JSON.parse of their output; a transcript's worth of never-opened - // folds should not pay for it, so the body only mounts once it is first opened. - const [mounted, setMounted] = useState(false); - const collapseRef = useCollapseHeight(open); - const tools = toolCalls ?? message.toolCalls ?? []; - if (tools.length === 0) return null; - - // Converted via computeEffectiveStatus (when the message isn't streaming, running is treated as success) — - // reading tool.status directly would leave a leftover running state spinning forever after an abort/abnormal interruption. - const isRunning = (tool: (typeof tools)[number]) => - computeEffectiveStatus(tool, message.isStreaming) === 'running'; - const anyRunning = tools.some(isRunning); - const runningTs = tools - .filter(t => isRunning(t) && typeof t.timestamp === 'number') - .map(t => t.timestamp as number); - const startTs = runningTs.length > 0 ? Math.min(...runningTs) : message.ts; - const names = tools - .map(t => resolveToolDisplayName(t, toolDisplayNames)) - .filter((v, i, a) => a.indexOf(v) === i) // dedupe - .slice(0, 3); - const label = names.join('、') + (tools.length > 3 ? t('等{n}项', { n: tools.length }) : ''); - - const toggle = () => { setMounted(true); setOpen(v => !v); }; - - return ( - <div className="jx-inlineFold"> - <div className="jx-inlineSummary" role="button" tabIndex={0} aria-expanded={open} onClick={toggle} - onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }}> - <BrandLoader done={!anyRunning} label={anyRunning ? t('正在调用工具') : t('工具调用完成')} /> - <span className={`jx-inlineSummaryText${anyRunning ? ' jx-inlineSummaryText--live' : ''}`}> - {anyRunning ? t('正在调用 {label}', { label }) : t('已调用 {label}', { label })} - </span> - {/* 长工具（批量作业）的实时进度：这条摘要行在折叠态是用户唯一的信息源 */} - {anyRunning && (() => { - const note = tools.find(tc => isRunning(tc) && tc.progressNote)?.progressNote; - return note ? <span className="jx-trs-note">{note}</span> : null; - })()} - {anyRunning && <ElapsedTimer startTs={startTs} className="jx-inlineSummaryTimer" />} - <RightOutlined className="jx-inlineSummaryArrow" rotate={open ? 90 : 0} /> - </div> - - <div ref={collapseRef} className={`jx-collapse${open ? ' jx-collapse--open' : ''}`}> - <div className="jx-trs-body"> - {mounted && tools.map((tool, idx) => ( - <ToolCallRow - key={tool.id || `${message.ts}-tool-${idx}`} - tool={tool} - isStreaming={message.isStreaming} - /> - ))} - </div> - </div> - </div> - ); -} diff --git a/src/frontend/src/components/tool/index.ts b/src/frontend/src/components/tool/index.ts index 0112a3e7..15a789bb 100644 --- a/src/frontend/src/components/tool/index.ts +++ b/src/frontend/src/components/tool/index.ts @@ -1,6 +1,5 @@ export { renderToolOutputBody, ToolOutputBody } from './ToolOutputRenderer'; export { ToolResultPanel } from './ToolResultPanel'; -export { ToolProgressInline } from './ToolProgressInline'; export { ToolCallRow } from './ToolCallRow'; export { ToolRunShell } from './ToolRunShell'; export type { ShellStep } from './ToolRunShell'; diff --git a/src/frontend/src/components/tool/openSubagentTab.ts b/src/frontend/src/components/tool/openSubagentTab.ts new file mode 100644 index 00000000..a0f35f9e --- /dev/null +++ b/src/frontend/src/components/tool/openSubagentTab.ts @@ -0,0 +1,22 @@ +import { Modal } from 'antd'; +import { t } from '../../i18n'; +import { useCanvasStore } from '../../stores/canvasStore'; +import type { ToolCall } from '../../types'; + +/** Open a sub-agent's session as a canvas tab, guarding an unsaved file tab. */ +export function openSubagentTab( + tool: ToolCall, + agent: { agent_id: string; name: string; avatar: string | null }, + identity: { chatId: string; messageUid: string }, +) { + const state = useCanvasStore.getState(); + const action = () => state.openSubagent({ + chatId: identity.chatId, messageUid: identity.messageUid, toolId: tool.id!, + agent: { agent_id: agent.agent_id, name: agent.name, avatar: agent.avatar }, + }); + const active = state.tabs.find((tab) => tab.id === state.activeTabId); + if (active?.kind === 'file' && active.dirty) { + Modal.confirm({ title: t('有未保存的修改'), content: t('离开后编辑内容将丢失，确定继续？'), + okText: t('放弃修改'), cancelText: t('取消'), okButtonProps: { danger: true }, onOk: action }); + } else action(); +} diff --git a/src/frontend/src/components/tool/renderers/utils.tsx b/src/frontend/src/components/tool/renderers/utils.tsx index e5bab9d5..4654e86f 100644 --- a/src/frontend/src/components/tool/renderers/utils.tsx +++ b/src/frontend/src/components/tool/renderers/utils.tsx @@ -21,11 +21,6 @@ export function coerceOutput(raw: unknown): unknown { try { return unwrapMcpResult(JSON.parse(raw)); } catch { return raw; } } -/** True if any tool in the list is still running. */ -export function anyToolRunning(tools: Pick<ToolCall, 'status'>[]): boolean { - return tools.some((t) => t.status === 'running'); -} - /** Resolve display-time tool status — a still-streaming message treats 'running' as 'success'. * * 中断是它自己的一档，不能并进 success：流收尾时没拿到结果的调用会被标成 diff --git a/src/frontend/src/hooks/chatStream/messageStore.ts b/src/frontend/src/hooks/chatStream/messageStore.ts index 3b9a28b0..bfccaef9 100644 --- a/src/frontend/src/hooks/chatStream/messageStore.ts +++ b/src/frontend/src/hooks/chatStream/messageStore.ts @@ -46,7 +46,7 @@ export function commitUpdate(s: ChatStreamState, streaming: boolean, cits?: Cita isStreaming: streaming, inFlight: streaming && s.runId ? { eventOffset: s.eventOffset, textSnapshotOffset: s.textSnapshotOffset } : undefined, // Persisted activity stamp — anchors the stall clock so it survives - // a session switch / refresh remount (see useStallDetector). + // a session switch / refresh remount (see useActivityAge). // 取服务端下发的时刻而非本地钟：另一台设备接上同一轮时读到的是同一个值。 lastActivityTs: s.lastEventTs, }; diff --git a/src/frontend/src/hooks/index.ts b/src/frontend/src/hooks/index.ts index 27924e2d..84dc690c 100644 --- a/src/frontend/src/hooks/index.ts +++ b/src/frontend/src/hooks/index.ts @@ -2,7 +2,5 @@ export { useChatInit } from './useChatInit'; export { useChatActions } from './useChatActions'; export { useStreaming } from './useStreaming'; export { useDelayedFlag } from './useDelayedFlag'; -export { useStallDetector } from './useStallDetector'; export { usePopupFlip } from './usePopupFlip'; -export { useOverflowFade } from './useOverflowFade'; export { useWeixinBinding } from './useWeixinBinding'; diff --git a/src/frontend/src/hooks/streamSend.ts b/src/frontend/src/hooks/streamSend.ts index 4d4bb6c7..67a92c6e 100644 --- a/src/frontend/src/hooks/streamSend.ts +++ b/src/frontend/src/hooks/streamSend.ts @@ -334,8 +334,8 @@ export function createStreamSend(ctx: Pick<StreamingContext, 'abortControllersRe const last = msgs[msgs.length - 1]; if (last?.role === 'assistant' && last.isStreaming) { // Also move still-running tools to a terminal state (same semantics as - // finalizeRunningTools on the normal completion path) — otherwise ToolProgressInline, - // which only looks at tool.status, would forever show "calling" with the timer ticking + // finalizeRunningTools on the normal completion path) — otherwise a tool row + // that only looks at tool.status would forever show "calling" with the timer ticking // after termination, and it persists across refreshes via localStorage. const finalizedTools = last.toolCalls?.map((tc) => tc.status === 'running' ? { ...tc, status: 'success' as const } : tc, diff --git a/src/frontend/src/hooks/useOverflowFade.ts b/src/frontend/src/hooks/useOverflowFade.ts deleted file mode 100644 index 44050553..00000000 --- a/src/frontend/src/hooks/useOverflowFade.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { useEffect, useRef, useState } from 'react'; - -/** - * Reports whether a bounded scroll box's content actually exceeds its height. - * - * Drives the bottom fade mask on collapsible bodies: a permanently-applied mask - * eats the last line of short content and reads as a rendering defect, so the - * class only goes on once there really is more to scroll to. - * - * Returns `[boxRef, innerRef, overflowing]`. The observer watches the inner - * wrapper, not the box — the box is pinned at its max-height once it overflows - * and would stop reporting growth (streamed text, a row expanding inside). - * - * `active` gates measurement: a collapsed body has clientHeight 0 and would - * otherwise always report as overflowing. - */ -export function useOverflowFade(active: boolean) { - const boxRef = useRef<HTMLDivElement>(null); - const innerRef = useRef<HTMLDivElement>(null); - const [overflowing, setOverflowing] = useState(false); - const lastRef = useRef(false); - - useEffect(() => { - const box = boxRef.current; - // 只在值真的翻转时才 setState：流式展开时观察者每帧都会回调 - const apply = (next: boolean) => { - if (lastRef.current === next) return; - lastRef.current = next; - setOverflowing(next); - }; - if (!active || !box) { - if (!lastRef.current) return; - const off = requestAnimationFrame(() => apply(false)); - return () => cancelAnimationFrame(off); - } - const measure = () => apply(box.scrollHeight - box.clientHeight > 4); - if (typeof ResizeObserver === 'undefined') { - // 无 ResizeObserver 时只能测一次，放到下一帧等展开高度落定 - const first = requestAnimationFrame(measure); - return () => cancelAnimationFrame(first); - } - // observe() 自带一次初始回调，不必再手动首测 - const ro = new ResizeObserver(measure); - ro.observe(box); - if (innerRef.current) ro.observe(innerRef.current); - return () => ro.disconnect(); - }, [active]); - - return [boxRef, innerRef, overflowing] as const; -} diff --git a/src/frontend/src/hooks/useStallDetector.ts b/src/frontend/src/hooks/useStallDetector.ts deleted file mode 100644 index 2e052ad1..00000000 --- a/src/frontend/src/hooks/useStallDetector.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { useEffect, useState } from 'react'; - -/** - * Detects when a streaming source has gone silent for longer than `stallMs`. - * - * `signature` should change whenever the stream emits new content (text token, - * tool call, segment, etc). When it stops changing for `stallMs` we flip to - * `waiting = true` and report the timestamp the stall started, e.g. while the - * LLM buffers a long tool-call payload server-side (MiniMax) before emitting it. - * - * `active` says whether there is a stream to watch at all, and it is not an - * optimisation: hooks cannot be called conditionally, so every caller that - * renders per message — which is what this one does — would otherwise hold a - * 2Hz timer for every finished message in the conversation, forever. A long - * history would then re-render itself twice a second with nothing streaming, - * and each of those renders re-runs everything the message body computes. - */ -export function useStallDetector( - signature: string | number, - stallMs: number = 2500, - anchorTs?: number, - active: boolean = true, -): { waiting: boolean; since: number } { - const [now, setNow] = useState(() => Date.now()); - const [lastChange, setLastChange] = useState(now); - const [prevSig, setPrevSig] = useState(signature); - - if (prevSig !== signature) { - setPrevSig(signature); - setLastChange(now); - } - - useEffect(() => { - if (!active) return; - const id = window.setInterval(() => setNow(Date.now()), 500); - return () => window.clearInterval(id); - }, [active]); - - // `anchorTs` (when provided) is a persisted, remount-stable timestamp of the - // last stream activity — prefer it so the stall clock keeps counting from - // the real start across session switches / page refreshes. Local `lastChange` - // is the fallback for callers without a persisted anchor; it resets on mount. - const since = anchorTs ?? lastChange; - // Without a ticking clock `now` is whatever it was when the stream ended, so - // the comparison below is meaningless once inactive — say so rather than - // report a stall nobody is waiting on. - const waiting = active && now - since >= stallMs; - return { waiting, since }; -} diff --git a/src/frontend/src/i18n/en/canvas.ts b/src/frontend/src/i18n/en/canvas.ts index aa49aad3..f3fcbee0 100644 --- a/src/frontend/src/i18n/en/canvas.ts +++ b/src/frontend/src/i18n/en/canvas.ts @@ -73,4 +73,19 @@ export const CANVAS_EN: Record<string, string> = { '引用选区': 'Quote range', '把选中的单元格引用到对话': 'Quote the selected cells in the chat', '选中的单元格都是空的': 'The selected cells are all empty', + // Run monitor rail + '运行监控': 'Run monitor', + '上下文': 'Context', + '{n} 运行中': '{n} running', + '产出文件': 'Outputs', + '输入文件': 'Inputs', + '停止后台命令': 'Stop background command', + '停止批量作业': 'Stop batch job', + '环境': 'Environment', + '项目环境设置': 'Project environment settings', + '在我的空间中打开项目文件夹': 'Open the project folder in My Space', + '无法打开项目文件夹：{reason}': 'Could not open the project folder: {reason}', + '项目未绑定文件目录': 'This project has no linked folder', + '项目文件夹不存在': 'The project folder no longer exists', + '停止失败：{reason}': 'Could not stop: {reason}', }; diff --git a/src/frontend/src/i18n/en/catalog.ts b/src/frontend/src/i18n/en/catalog.ts index fdff59ed..34efc2f9 100644 --- a/src/frontend/src/i18n/en/catalog.ts +++ b/src/frontend/src/i18n/en/catalog.ts @@ -267,10 +267,10 @@ export const CATALOG_DICT: Record<string, string> = { '这个技能是做什么的、什么时候用': "What this skill does and when to use it", '标签（可选）': 'Tags (optional)', '回车添加标签': 'Press Enter to add a tag', - '选择技能执行时依赖的 MCP。系统会读取 MCP 的实际工具清单，用于本体构建校验。': - 'Select the MCP services this skill depends on. The system reads their discovered tools for ontology build validation.', - '如果本体流程要求特定工具，请在这里绑定对应 MCP；绑定信息和工具清单会写入 SKILL.md。': - 'If an ontology workflow requires specific tools, bind the corresponding MCP here. The binding and tool list are written to SKILL.md.', + '选择技能执行时依赖的 MCP。系统会读取 MCP 的实际工具清单。': + 'Select the MCP services this skill depends on. The system reads their discovered tools.', + '技能需要特定工具时，请在这里绑定对应 MCP；绑定信息和工具清单会写入 SKILL.md。': + 'If the skill needs specific tools, bind the corresponding MCP here. The binding and tool list are written to SKILL.md.', '技能正文（指令）': 'Skill Body (Instructions)', '请输入技能正文': 'Please enter skill instructions', '用 Markdown 写清楚这个技能怎么用、步骤、注意事项……': 'Use Markdown to describe how to use this skill, steps, notes…', @@ -456,6 +456,7 @@ export const CATALOG_DICT: Record<string, string> = { '暂无已安装插件': 'No installed plugins', '插件管理': 'Plugin management', '插件市场': 'Plugin marketplace', + '插件市场加载失败': "Couldn't load the plugin marketplace", '插件市场暂无可安装的插件': 'No installable plugins in the marketplace', '插件市场暂无插件': 'No plugins in the marketplace', '已下架，点击上架': 'Delisted — click to list', diff --git a/src/frontend/src/i18n/en/ceShared.ts b/src/frontend/src/i18n/en/ceShared.ts index 7883e78a..b88791fb 100644 --- a/src/frontend/src/i18n/en/ceShared.ts +++ b/src/frontend/src/i18n/en/ceShared.ts @@ -1,5 +1,6 @@ /** English translations used by CE source but owned by mixed EE/CE dictionaries upstream. */ export const CE_SHARED_DICT: Record<string, string> = { + '后台任务': 'Background tasks', '应用 ID': 'Application ID', '应用名称': 'Application name', '应用简介': 'Application description', diff --git a/src/frontend/src/i18n/en/onboarding.ts b/src/frontend/src/i18n/en/onboarding.ts index a1528737..d28c20e8 100644 --- a/src/frontend/src/i18n/en/onboarding.ts +++ b/src/frontend/src/i18n/en/onboarding.ts @@ -9,7 +9,7 @@ export const ONBOARDING_DICT: Record<string, string> = { '可选服务': 'Optional service', '文件解析': 'Document parsing', '智能增强': 'Intelligence', - '记忆与本体': 'Memory & ontology', + '记忆与进化': 'Memory & evolution', '准备就绪': 'Ready', '检查并进入': 'Review and continue', '先选择你最熟悉的语言': 'Start with your preferred language', @@ -22,7 +22,7 @@ export const ONBOARDING_DICT: Record<string, string> = { '决定如何读取复杂文档': 'Choose how to read complex documents', '外部解析服务适合 PDF、扫描件和包含公式的文档。': 'An external parser handles PDFs, scans, and documents with formulas.', '选择需要的智能增强': 'Choose intelligence enhancements', - '你可以控制是否跨对话记忆、是否让系统从你的用法中自我进化，以及是否执行领域本体核验。': 'Control cross-conversation memory, whether the system evolves from how you work, and domain ontology validation.', + '你可以控制是否跨对话记忆，以及是否让系统从你的用法中自我进化。': 'Control cross-conversation memory and whether the system evolves from how you work.', '一切就绪': 'Everything is ready', '完成初始化后，你将进入 HugAgentOS 工作台。': 'Complete setup to enter the HugAgentOS workspace.', '主对话模型': 'Primary chat model', diff --git a/src/frontend/src/i18n/en/panels.ts b/src/frontend/src/i18n/en/panels.ts index fed1e1cf..40cd370b 100644 --- a/src/frontend/src/i18n/en/panels.ts +++ b/src/frontend/src/i18n/en/panels.ts @@ -112,8 +112,6 @@ export const PANELS_DICT: Record<string, string> = { '右侧面板': 'Right panel', '文件预览与本体校验': 'File previews and ontology validation', '暂无可展示内容': 'Nothing to show yet', - '预览文件或运行本体校验后，内容会显示在这里。': - 'Preview a file or run ontology validation to show content here.', // ── Sidebar / items ────────────────────────────────────────────────── '新建本地项目失败': 'Could not create local project', '下载更新': 'Download update', @@ -338,6 +336,7 @@ export const PANELS_DICT: Record<string, string> = { '查看并管理已生成的分享链接与有效状态，查看浏览量': 'View and manage share links, validity, and view counts', '搜索标题关键词/分享ID': 'Search by title or share ID', '刷新': 'Refresh', + '新建或上传': 'New or upload', '暂无分享记录': 'No share records', '没有匹配的分享记录': 'No matching share records', '未命名分享': 'Untitled share', @@ -461,7 +460,7 @@ export const PANELS_DICT: Record<string, string> = { '暂无长期记忆': 'No long-term memory yet', '清空全部记忆': 'Clear all memories', - // ── BrandLoader ────────────────────────────────────────────────────── + // ── Loading ────────────────────────────────────────────────────────── '加载中': 'Loading', // ── ImagePreview ───────────────────────────────────────────────────── diff --git a/src/frontend/src/i18n/en/personalAgent.ts b/src/frontend/src/i18n/en/personalAgent.ts index 2c67ab84..06c55e25 100644 --- a/src/frontend/src/i18n/en/personalAgent.ts +++ b/src/frontend/src/i18n/en/personalAgent.ts @@ -183,6 +183,8 @@ export const PERSONAL_AGENT_DICT: Record<string, string> = { '提示': 'Notice', '平台规则': 'Platform rules', '工作区尚未创建': 'The workspace has not been created yet', + '工作区文件列表加载失败': "Couldn't load the workspace file list", + '文件加载失败': "Couldn't load the file", '复制完整提示词': 'Copy full prompt', '放弃未保存的修改？': 'Discard unsaved changes?', '二进制文件不支持预览': 'Binary files cannot be previewed', diff --git a/src/frontend/src/i18n/en/projectEnvironment.ts b/src/frontend/src/i18n/en/projectEnvironment.ts index 9f12b234..d33e3730 100644 --- a/src/frontend/src/i18n/en/projectEnvironment.ts +++ b/src/frontend/src/i18n/en/projectEnvironment.ts @@ -11,8 +11,8 @@ export const PROJECT_ENVIRONMENT_DICT: Record<string, string> = { '暂无可绑定资源，可从市场获取': 'No resources available. Get resources from the marketplace.', '部分依赖暂不可用，绑定不会授予额外权限。': 'Some dependencies are unavailable. Binding does not grant additional permissions.', '获取后加入此项目的待绑定资源，保存后生效': 'Add acquired resources to this project. Save to apply the bindings.', - '加载项目环境失败': 'Failed to load the project environment', '项目环境已更新，从下一轮对话生效': 'Project environment updated. Changes apply from the next turn.', + '项目环境加载失败': "Couldn't load the project environment", '保存项目环境失败': 'Failed to save the project environment', '绑定项目环境': 'Bind project environment', '保存环境': 'Save environment', diff --git a/src/frontend/src/i18n/en/settings.ts b/src/frontend/src/i18n/en/settings.ts index 4b0c1575..a7ebe6cd 100644 --- a/src/frontend/src/i18n/en/settings.ts +++ b/src/frontend/src/i18n/en/settings.ts @@ -174,8 +174,6 @@ export const SETTINGS_DICT: Record<string, string> = { '外部登录账号的用户名由身份源管理，请到身份源修改': 'Usernames for SSO accounts are managed by your identity provider. Please update it there.', '请输入用户名': 'Enter username', '未登录': 'Not signed in', - '显示调度过程': 'Show Dispatch Process', - '控制对话中是否显示对话里调度的智能体、连接器、技能等组件': "Control whether the agent's dispatch of agents, connectors, skills, etc. is shown in the conversation.", '写入记忆': 'Write Memory', '开启后智能体会在每次对话结束后自动判断是否写入记忆': 'When enabled, the agent will automatically decide whether to write memories after each conversation.', '永久记忆': 'Persistent Memory', @@ -328,7 +326,6 @@ export const SETTINGS_DICT: Record<string, string> = { '几轮对话之后，项目记忆会出现在这里。': 'Project memories will appear here after a few conversations.', '已积累 {n} 条记忆 · ': '{n} memories accumulated · ', '查看': 'View', - '点击查看项目记忆详情': 'Click to view project memory details', '项目指令': 'Project Instructions', '编辑项目指令': 'Edit Project Instructions', '已保存': 'Saved', @@ -354,7 +351,12 @@ export const SETTINGS_DICT: Record<string, string> = { '任务详情': 'Task Details', '收藏项目': 'Favorite Project', '项目资料': 'Project Resources', + '项目资料加载失败': "Couldn't load project resources", '项目定时任务': 'Project Scheduled Tasks', + '项目文件加载失败': "Couldn't load project files", + '项目定时任务加载失败': "Couldn't load project scheduled tasks", + '项目对话历史加载失败': "Couldn't load project conversations", + '进化设置加载失败': "Couldn't load evolution settings", '刷新项目定时任务': 'Refresh Project Scheduled Tasks', '本项目暂无定时任务': 'No scheduled tasks in this project yet', '所有项目': 'All Projects', @@ -378,7 +380,7 @@ export const SETTINGS_DICT: Record<string, string> = { '{n} 小时前': '{n} hr ago', '{n} 天前': '{n} day(s) ago', '其他成员': 'Other member', - '在「{name}」内开始新对话，Enter 发送，Shift+Enter 换行': 'Start a new conversation in "{name}" — Enter to send, Shift+Enter for newline', + '在「{name}」内开始新对话': 'Start a new conversation in "{name}"', '调用示例：在请求头携带': 'Usage: set the request header', '你的Key': 'your-key', '调用': 'to call', @@ -607,6 +609,8 @@ export const SETTINGS_DICT: Record<string, string> = { '给多个供应商填同一个组名，即在对外网关合并为一个对外别名的多上游，自动负载均衡+故障转移；留空表示独立单上游': 'Give multiple providers the same group name to merge them into one external alias with multiple upstreams (auto load-balancing + failover); leave empty for a standalone single upstream.', '网关权重': 'Gateway weight', + '模型切换权重': 'Model failover weight', + '值越大越优先用于模型故障切换；启用网关时也用于网关组权重，默认 1': 'Higher values take priority during model failover and also set gateway group weights when enabled; default: 1', '值越大越优先使用：对外网关同组内按此加权轮询，主模型不可用时也按此顺序自动切换到下一个供应商；默认 1': 'Higher means preferred: it weights round-robin within an external gateway group, and also orders the automatic switch to the next provider when the main model is unavailable. Default 1.', diff --git a/src/frontend/src/i18n/en/tool.ts b/src/frontend/src/i18n/en/tool.ts index c8861441..66f8e0ca 100644 --- a/src/frontend/src/i18n/en/tool.ts +++ b/src/frontend/src/i18n/en/tool.ts @@ -97,12 +97,10 @@ export const TOOL_DICT: Record<string, string> = { '{n} 个步骤': '{n} steps', '{n}秒': '{n}s', '{m}分{s}秒': '{m}m {s}s', - // ToolProgressInline.tsx + // toolActionLabel.ts '正在调用工具': 'Calling tools…', - '工具调用完成': 'Tools completed', '正在调用 {label}': 'Calling {label}', '已调用 {label}': 'Called {label}', - '等{n}项': ' +{n} more', // ThinkingStepRow.tsx '思考': 'Thinking', // CodeView.tsx (line count — same key as in ToolOutputRenderer.tsx above) diff --git a/src/frontend/src/i18n/en/workbench.ts b/src/frontend/src/i18n/en/workbench.ts index f51763e6..53220cf8 100644 --- a/src/frontend/src/i18n/en/workbench.ts +++ b/src/frontend/src/i18n/en/workbench.ts @@ -141,4 +141,7 @@ export const WORKBENCH_DICT: Record<string, string> = { '选择设备文件并上传到': 'Select a device file and upload it to', '选择设备文件并上传': 'Select and upload a device file', '打开外部链接': 'Open external link', + '清除': 'Clear', + '放弃更改': 'Discard changes', + '留在此页': 'Stay on page', }; diff --git a/src/frontend/src/plugin-ui/PluginView.tsx b/src/frontend/src/plugin-ui/PluginView.tsx index ff8889a2..41fb3eee 100644 --- a/src/frontend/src/plugin-ui/PluginView.tsx +++ b/src/frontend/src/plugin-ui/PluginView.tsx @@ -12,6 +12,7 @@ import { memo, useCallback, useMemo, useRef, useState, type ReactNode } from 're import { callPluginDataSource } from '../api'; import { t } from '../i18n'; +import { LoadError, SkeletonLines } from '../components/common/LoadState'; import { useUIStore } from '../stores'; import { resolveText } from './i18n'; import { resolveParams, unwrap } from './pointer'; @@ -95,17 +96,17 @@ function PluginViewInner({ requestRef.current?.abort(); const controller = new AbortController(); requestRef.current = controller; - setOutcome({ action, status: 'loading', page, filters }); + setOutcome({ action, scopes, status: 'loading', page, filters }); callPluginDataSource(slug, action.data_source, params, controller.signal) .then((result) => { if (controller.signal.aborted) return; - setOutcome({ action, status: 'success', data: result, page, filters }); + setOutcome({ action, scopes, status: 'success', data: result, page, filters }); }) .catch((error: unknown) => { if (controller.signal.aborted) return; const message = error instanceof Error ? error.message : String(error); - setOutcome({ action, status: 'error', error: message, page, filters }); + setOutcome({ action, scopes, status: 'error', error: message, page, filters }); }); }, [data, slug], @@ -204,8 +205,11 @@ function ActionOutcomePanel({ <span>{resolveText(action.label, action.id)}</span> <button type="button" onClick={onClose}>{t('关闭')}</button> </header> - {outcome.status === 'loading' && <div className="jx-pv-loading">{t('加载中…')}</div>} - {outcome.status === 'error' && <div className="jx-pv-error">{outcome.error || t('加载失败')}</div>} + {outcome.status === 'loading' && <SkeletonLines rows={3} className="jx-pv-outcomeState" />} + {outcome.status === 'error' && ( + <LoadError className="jx-pv-outcomeState" reason={outcome.error} + onRetry={() => ctx.runAction?.(action, outcome.scopes, { page: outcome.page, filters: outcome.filters })} /> + )} {outcome.status === 'success' && action.result && ctx.renderChild && ( <> {ctx.renderChild({ view: action.result.view, map: action.result.map }, outcome.data)} diff --git a/src/frontend/src/plugin-ui/ViewProps.ts b/src/frontend/src/plugin-ui/ViewProps.ts index 48d01525..e10089f6 100644 --- a/src/frontend/src/plugin-ui/ViewProps.ts +++ b/src/frontend/src/plugin-ui/ViewProps.ts @@ -14,6 +14,8 @@ import type { ViewAction, ViewKind, ViewMap } from './types'; export interface ActionOutcome { action: ViewAction; status: 'loading' | 'success' | 'error'; + /** The row the action ran against, kept so a failed call can be retried as-is. */ + scopes: { node?: unknown; item?: unknown }; data?: unknown; error?: string; page: number; diff --git a/src/frontend/src/plugin-ui/styles.css b/src/frontend/src/plugin-ui/styles.css index 3ee409ea..551686a9 100644 --- a/src/frontend/src/plugin-ui/styles.css +++ b/src/frontend/src/plugin-ui/styles.css @@ -37,6 +37,7 @@ .jx-pv-empty, .jx-pv-loading { color: var(--jx-pv-fg-soft); padding: 10px 12px; font-size: 12.5px; } .jx-pv-error { color: var(--jx-pv-danger); padding: 10px 12px; font-size: 12.5px; } +.jx-pv-outcomeState { padding: 12px; } .jx-pv-null { color: var(--jx-pv-fg-soft); } .jx-pv-num { font-variant-numeric: tabular-nums; } diff --git a/src/frontend/src/stores/canvasStore.ts b/src/frontend/src/stores/canvasStore.ts index faa79a1b..6ffc9633 100644 --- a/src/frontend/src/stores/canvasStore.ts +++ b/src/frontend/src/stores/canvasStore.ts @@ -127,7 +127,9 @@ export interface CanvasPluginTab { export type CanvasTab = CanvasFileTab | CanvasOntologyTab | CanvasPluginTab | CanvasSubagentTab | CanvasCustomTab; -const fileTabId = (file: CanvasArtifact) => `file:${file.origin || 'cloud'}:${file.file_id}`; +export const fileTabId = (file: Pick<CanvasArtifact, 'origin' | 'file_id'>) => `file:${file.origin || 'cloud'}:${file.file_id}`; +export const subagentTabId = (target: Pick<SubagentPanelTarget, 'chatId' | 'messageUid' | 'toolId'>) => + `subagent:${JSON.stringify([target.chatId, target.messageUid, target.toolId])}`; const ontologyTabId = (chatId: string) => `ontology:${chatId}`; const pluginTabId = (target: PluginPanelTarget) => target.resource @@ -256,7 +258,7 @@ export const useCanvasStore = create<CanvasState>((set) => ({ return selectTab(state, tabs, id); }), openSubagent: (target) => set((state) => { - const id = `subagent:${JSON.stringify([target.chatId, target.messageUid, target.toolId])}`; + const id = subagentTabId(target); const index = state.tabs.findIndex((tab) => tab.id === id); const tab: CanvasSubagentTab = { id, kind: 'subagent', target }; const tabs = index >= 0 ? replaceAt(state.tabs, index, tab) : [...state.tabs, tab]; @@ -415,3 +417,19 @@ export const useCanvasStore = create<CanvasState>((set) => ({ return { tabs, ...derive(tabs, state.activeTabId) }; }), })); + +// 画布收起后 SlidePanel 还要播退出动画，而关掉最后一个页签会同时清空 tabs。 +// 面板内容统一读这份「最后一次打开时的状态」，退出过程中停在关闭前那一帧， +// 不会先闪成空白启动页、缩放控件消失或分屏塌成单栏。 +let lastOpenState = useCanvasStore.getState(); +useCanvasStore.subscribe((state) => { if (state.isOpen) lastOpenState = state; }); + +/** 面板内容专用：打开时是实时状态，收起（退出动画）期间是关闭前的最后状态。 */ +export function useCanvasViewStore(): CanvasState; +export function useCanvasViewStore<T>(selector: (state: CanvasState) => T): T; +export function useCanvasViewStore<T>(selector?: (state: CanvasState) => T) { + return useCanvasStore((state) => { + const view = state.isOpen ? state : lastOpenState; + return selector ? selector(view) : view; + }); +} diff --git a/src/frontend/src/stores/mySpaceStore.ts b/src/frontend/src/stores/mySpaceStore.ts index 5161a9ec..2d275077 100644 --- a/src/frontend/src/stores/mySpaceStore.ts +++ b/src/frontend/src/stores/mySpaceStore.ts @@ -157,6 +157,9 @@ interface MySpaceState { favHasMore: boolean; assetScope: 'personal' | 'team'; selectedScope: PersonalScope; + pendingFolder: { space: string; path: string } | null; + openSpaceFolder: (space: string, path: string) => void; + clearPendingFolder: () => void; personalFolderTree: PersonalFolderNode[]; personalChildFolders: PersonalFolderNode[]; notifications: AutomationNotification[]; @@ -220,6 +223,7 @@ export const useMySpaceStore = create<MySpaceState>((set, get) => ({ favHasMore: false, assetScope: 'personal', selectedScope: { kind: 'personal', folderId: null }, + pendingFolder: null, personalFolderTree: [], personalChildFolders: [], notifications: [], @@ -255,6 +259,14 @@ export const useMySpaceStore = create<MySpaceState>((set, get) => ({ } return { railCollapsed: next }; }), + openSpaceFolder: (space, path) => { + if (space !== 'personal') throw new Error('Personal space is required'); + set({ pendingFolder: { space, path } }); + get().setAssetScope('personal'); + get().setTab('assets'); + }, + clearPendingFolder: () => set({ pendingFolder: null }), + setAssetScope: () => { set({ assetScope: 'personal' }); void get().fetchResources(true); diff --git a/src/frontend/src/stores/projectStore.ts b/src/frontend/src/stores/projectStore.ts index 3a4dc774..e4fa4c14 100644 --- a/src/frontend/src/stores/projectStore.ts +++ b/src/frontend/src/stores/projectStore.ts @@ -48,7 +48,8 @@ interface ProjectStoreState { // Detail state currentProjectId: string | null; currentProject: ProjectDetail | null; - detailLoading: boolean; + /** Why the current project failed to load; while null and currentProject is not loaded yet, it is loading. */ + detailError: string | null; projectFiles: ProjectFileItem[]; filesLoading: boolean; filesError: string | null; @@ -110,7 +111,7 @@ export const useProjectStore = create<ProjectStoreState>((set, get) => ({ currentProjectId: null, currentProject: null, - detailLoading: false, + detailError: null, projectFiles: [], filesLoading: false, filesError: null, @@ -182,7 +183,7 @@ export const useProjectStore = create<ProjectStoreState>((set, get) => ({ const generation = ++projectGeneration; const switched = get().currentProject?.project_id !== projectId; set({ - currentProjectId: projectId, detailLoading: true, + currentProjectId: projectId, detailError: null, ...(switched ? { currentProject: null, projectFiles: [], capacityUsed: 0, capacityLimit: 0, filesLoading: false, filesError: null, @@ -196,19 +197,14 @@ export const useProjectStore = create<ProjectStoreState>((set, get) => ({ currentProject: proj, capacityUsed: proj.capacity_used ?? 0, capacityLimit: proj.capacity_limit ?? 0, - detailLoading: false, }); // A file-list failure should not hide valid project details or instructions. await get().refreshFiles().catch(() => { /* refreshFiles exposes the error in filesError. */ }); } catch (err) { if (generation !== projectGeneration) return; - console.warn('openProject failed', err); - set({ currentProject: null }); + set({ currentProject: null, detailError: (err as Error).message || t('加载失败') }); } finally { - if (generation === projectGeneration) { - set({ detailLoading: false }); - pendingProject = null; - } + if (generation === projectGeneration) pendingProject = null; } })(); pendingProject = { id: projectId, generation, promise }; @@ -221,7 +217,7 @@ export const useProjectStore = create<ProjectStoreState>((set, get) => ({ set({ currentProjectId: null, currentProject: null, - detailLoading: false, + detailError: null, projectFiles: [], filesLoading: false, filesError: null, diff --git a/src/frontend/src/stores/uiStore.ts b/src/frontend/src/stores/uiStore.ts index b8e2473e..f4e3f84d 100644 --- a/src/frontend/src/stores/uiStore.ts +++ b/src/frontend/src/stores/uiStore.ts @@ -2,14 +2,11 @@ import type { ReactNode } from 'react'; import { create } from 'zustand'; import type { UpdateEntry, UpdateCategory, FileConfirmInfo, DesignPickInfo, UserQuestionRequest } from '../types'; import type { SearchResultItem } from '../api'; -import { IS_COMMUNITY_EDITION_BUILD } from '../edition'; import { loadThemeMode, saveThemeMode, type ThemeMode } from '../theme'; -import { writeLocal } from '../storage'; export type HistoryTimeFilter = 'all' | 'today' | '7d' | '30d'; export type UpdateFilter = '全部' | UpdateCategory; -const DISPATCH_PROCESS_STORAGE_KEY = 'hugagent_dispatch_process_visible'; // A resolved SSE can race with an older pending-GET response already in // flight. Keep a small process-local tombstone set so that stale recovery // snapshots cannot resurrect a question the server has already settled. @@ -31,16 +28,6 @@ function wasUserQuestionResolved(chatId: string, requestId: string): boolean { return resolvedUserQuestionKeys.has(userQuestionKey(chatId, requestId)); } -function loadDispatchProcessVisible(): boolean { - if (typeof window === 'undefined') return IS_COMMUNITY_EDITION_BUILD; - try { - const raw = window.localStorage.getItem(DISPATCH_PROCESS_STORAGE_KEY); - return raw == null ? IS_COMMUNITY_EDITION_BUILD : raw !== 'false'; - } catch { - return IS_COMMUNITY_EDITION_BUILD; - } -} - interface UIState { siderCollapsed: boolean; @@ -72,7 +59,6 @@ interface UIState { // ── Prompt Hub ── promptHubOpen: boolean; - dispatchProcessVisible: boolean; // ── 主题（深色模式）── // 只存用户档位（system/light/dark）；实际深浅由 AppThemeProvider 结合系统外观解析， @@ -117,7 +103,6 @@ interface UIState { setFeatureUpdates: (updates: UpdateEntry[]) => void; setPromptHubOpen: (v: boolean) => void; - setDispatchProcessVisible: (v: boolean) => void; setThemeMode: (mode: ThemeMode) => void; @@ -164,7 +149,6 @@ export const useUIStore = create<UIState>((set) => ({ featureUpdates: [], promptHubOpen: false, - dispatchProcessVisible: loadDispatchProcessVisible(), themeMode: loadThemeMode(), @@ -324,17 +308,6 @@ export const useUIStore = create<UIState>((set) => ({ } return changed ? { pendingUserQuestions: next } : s; }), - setDispatchProcessVisible: (v) => { - if (typeof window !== 'undefined') { - try { - writeLocal(DISPATCH_PROCESS_STORAGE_KEY, String(v)); - } catch { - // Keep the in-memory preference usable when browser storage is blocked. - } - } - set({ dispatchProcessVisible: v }); - }, - setThemeMode: (mode) => { saveThemeMode(mode); set({ themeMode: mode }); diff --git a/src/frontend/src/styles/canvas.css b/src/frontend/src/styles/canvas.css index 398dcf6e..51dd56de 100644 --- a/src/frontend/src/styles/canvas.css +++ b/src/frontend/src/styles/canvas.css @@ -844,7 +844,7 @@ button.jx-canvas-actionBtn { width: 30px; } } .jx-subagentCall > img, .jx-subagentCall > span { flex-shrink: 0; } .jx-subagentCall .jx-tcr-label { flex-shrink: 1; } -.jx-subagentDetail { padding: 24px; overflow-wrap: anywhere; } +.jx-subagentDetail { padding: 0 24px 24px; overflow-wrap: anywhere; } /* The message column aligns children to the start; tool batches must not derive their width from whichever nested detail happens to be open. */ .jx-subagentDetail > .jx-msg > .jx-trs { @@ -852,6 +852,49 @@ button.jx-canvas-actionBtn { width: 30px; } min-width: 0; max-width: 100%; } -.jx-subagentDetail-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); } -.jx-subagentDetail-head strong { flex: 1; min-width: 0; } -.jx-subagentDetail-head > span { color: var(--color-text-secondary); font-size: 13px; } +/* Sticky identity bar: no resting divider; a hairline appears only once the + transcript scrolls underneath it. */ +.jx-subagentDetail-head { + position: sticky; + top: 0; + z-index: 2; + display: flex; + align-items: center; + gap: 12px; + margin: 0 -24px 8px; + padding: 16px 24px; + background: var(--bg); + box-shadow: 0 1px 0 transparent; + transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard); +} +.jx-subagentDetail-head--scrolled { box-shadow: 0 1px 0 var(--color-border); } +.jx-subagentDetail-head strong { + flex: 1; + min-width: 0; + overflow: hidden; + font-size: 0.9375rem; + font-weight: 600; + white-space: nowrap; + text-overflow: ellipsis; +} +.jx-subagentDetail-meta { + display: inline-flex; + flex-shrink: 0; + align-items: center; + gap: 6px; + height: 28px; + padding: 0 10px; + border-radius: 999px; + color: var(--color-text-tertiary); + font-size: 0.8125rem; +} +.jx-subagentDetail-meta:empty { display: none; } +.jx-subagentDetail-meta--running { + background: var(--color-fill-hover); + color: var(--color-text-secondary); +} +.jx-subagentDetail-meta .anticon { font-size: 12px; } +.jx-subagentDetail-time { + font-family: var(--font-family-number); + font-variant-numeric: tabular-nums; +} diff --git a/src/frontend/src/styles/chat/agent-activity.css b/src/frontend/src/styles/chat/agent-activity.css index 9fcd1c20..9885ddd3 100644 --- a/src/frontend/src/styles/chat/agent-activity.css +++ b/src/frontend/src/styles/chat/agent-activity.css @@ -9,7 +9,7 @@ ══════════════════════════════════════════════════════════════════════════ */ /* ── Slots and the travelling mark ── */ -/* Box shared with .jx-turnStatusMark (turn-status.css). */ +/* Box size lives in turn-status.css. */ .jx-agentSlot{ position:relative; } diff --git a/src/frontend/src/styles/chat/composer-editor.css b/src/frontend/src/styles/chat/composer-editor.css index 6b567adb..2c2fa599 100644 --- a/src/frontend/src/styles/chat/composer-editor.css +++ b/src/frontend/src/styles/chat/composer-editor.css @@ -204,9 +204,10 @@ padding: 16px 16px 12px; font-size: 16px; line-height: 1.5715; - white-space: pre-wrap; - word-wrap: break-word; + /* 单行显示，窄宽度/缩放时以省略号截断，避免换行后被裁成半行 */ + white-space: nowrap; overflow: hidden; + text-overflow: ellipsis; color: var(--color-text-placeholder); pointer-events: none; } @@ -367,6 +368,27 @@ color: color-mix(in srgb, var(--color-text) 50%, transparent); } +/* 手机：子菜单在同一浮层里逐层进入（ComposerAttachmentMenu），行高对齐触屏 44px， + 长列表（技能 / 连接器）在浮层内滚动而不是顶出屏幕。 */ +.jx-attachMenu--mobile .ant-dropdown-menu { + min-width: min(280px, calc(100vw - 32px)); + max-height: min(60dvh, 480px); + overflow-y: auto; + overscroll-behavior: contain; +} + +.jx-attachMenu--mobile .ant-dropdown-menu-item { + min-height: 44px; +} + +.jx-attachMenu--mobile .jx-attachMenu-back { + font-weight: 600; +} + +.jx-attachMenu .ant-dropdown-menu-item .jx-attachMenu-drill.anticon { + font-size: 12px; +} + /* 「自主循环」菜单项：名称在左、开关贴右 */ /* 子菜单浮层（技能 / 添加到项目）单独挂载，不继承 overlayClassName。 @@ -378,7 +400,9 @@ min-width: 180px; } -/* Capability submenus render in separate portals; share typography across all four lists. */ +/* Capability submenus render in separate portals; share typography across all four lists. + On phones the same lists render inline in the attach menu (.jx-attachMenu--mobile). */ +.jx-attachMenu--mobile .ant-dropdown-menu-item, .jx-capabilityMenu .ant-dropdown-menu-item { font-family: inherit; font-size: 14px; @@ -393,6 +417,7 @@ font-weight: inherit; } +.jx-attachMenu--mobile .jx-capabilityMenuIcon, .jx-capabilityMenu .jx-capabilityMenuIcon { width: 20px; height: 20px; @@ -403,6 +428,7 @@ } /* Match connector glyphs inside the shared 20px avatar frame. */ +.jx-attachMenu--mobile .jx-skillAvatar > svg, .jx-capabilityMenu .jx-skillAvatar > svg { width: 16px; height: 16px; diff --git a/src/frontend/src/styles/chat/composer-layout.css b/src/frontend/src/styles/chat/composer-layout.css index 55f74a45..64c1a196 100644 --- a/src/frontend/src/styles/chat/composer-layout.css +++ b/src/frontend/src/styles/chat/composer-layout.css @@ -71,13 +71,19 @@ color:var(--color-text-secondary, var(--color-text-secondary)); } +/* Floats over the bottom of the full-height history viewport. The solid + background runs to the pane's bottom edge so no message text shows beneath. */ .jx-chatFooter{ - position:relative; - flex-shrink:0; + position:absolute; + left:0; + right:0; + bottom:0; max-width:760px; margin:0 auto; + /* 12px chat-wrap gap + 18px page-panel bottom padding it replaces. */ + padding-bottom:30px; z-index:10; - width:100%; + width:auto; display:flex; flex-direction:column; /* 实色背景防止滚动内容从底部透出；顶部渐变见 ::before */ @@ -170,7 +176,7 @@ .jx-scrollToBottomBtn{ position:absolute; - bottom:12px; + bottom:calc(12px + var(--jx-chat-footer-h, 0px)); left:calc(50% - 18px); z-index:11; width:36px; @@ -313,6 +319,22 @@ color:var(--color-primary); } +/* 触屏点按后 :hover 会一直粘在按钮上，看起来像被选中 */ +@media (hover:none){ + .jx-followUpBtn:hover{ + border-color:var(--color-border); + color:var(--color-text); + background:var(--color-bg-container); + } + .jx-followUpBtn:hover .jx-followUpArrow{ + color:var(--color-text-placeholder); + } + /* 按下时 :hover 与 :active 同时成立，上面的重置不能吞掉按压反馈 */ + .jx-followUpBtn:active{ + background:var(--color-primary-bg); + } +} + /* 移动端延伸问题全宽 */ @media(max-width:768px){ diff --git a/src/frontend/src/styles/chat/message-details.css b/src/frontend/src/styles/chat/message-details.css index b1c91282..a36a8f8d 100644 --- a/src/frontend/src/styles/chat/message-details.css +++ b/src/frontend/src/styles/chat/message-details.css @@ -48,7 +48,7 @@ /* ── legacy 思考块 chevron：单图标 rotate 过渡（替代双图标硬切） ── */ .jx-thinkingBlockHeader .jx-expandIcon{ - /* 与执行卡 / 折叠摘要行的箭头同口径：留位不留形，悬浮或键盘聚焦才淡入 */ + /* 与执行卡的箭头同口径：留位不留形，悬浮或键盘聚焦才淡入 */ opacity:0; transition:transform var(--motion-duration-fast) var(--motion-ease-brand-out), opacity .15s ease; } diff --git a/src/frontend/src/styles/chat/shell.css b/src/frontend/src/styles/chat/shell.css index 9e44f10c..84d5c66d 100644 --- a/src/frontend/src/styles/chat/shell.css +++ b/src/frontend/src/styles/chat/shell.css @@ -157,7 +157,8 @@ max-width:none; margin:0 auto; width:100%; - padding-bottom:12px; + /* Bottom spacing lives inside the floating footer, so nothing shows below it. */ + padding-bottom:0; } /* The content column excludes tool results, prompts and project rails. @@ -174,6 +175,8 @@ max-width:none; height:100%; min-height:0; + /* The scroller runs to the bottom edge; the footer carries this spacing. */ + padding-bottom:0; overflow:hidden; scrollbar-gutter:stable both-edges; } @@ -201,7 +204,7 @@ .jx-content--messageSurface > .jx-panel{scrollbar-gutter:auto;} } -.jx-chatList{min-height:100%; width:100%; max-width:760px; margin:0 auto; padding:4px 0 6px;} +.jx-chatList{min-height:100%; width:100%; max-width:760px; margin:0 auto; padding:4px 0 calc(6px + var(--jx-chat-footer-h, 0px));} .jx-shareSelectionBar{ position:sticky; diff --git a/src/frontend/src/styles/chat/toolbar-layout.css b/src/frontend/src/styles/chat/toolbar-layout.css index 2a44cd04..b5ec6e8f 100644 --- a/src/frontend/src/styles/chat/toolbar-layout.css +++ b/src/frontend/src/styles/chat/toolbar-layout.css @@ -51,6 +51,9 @@ .jx-composerBar[data-compact] .jx-modeArrow, .jx-composerBar[data-compact] .jx-voiceStatus { display:none; } .jx-composerBar[data-compact] .jx-modelEffortCompactIcon { display:inline-flex; } +.jx-composerBar[data-compact] .jx-modelEffortBtn { gap:2px; padding-inline:7px 5px; } +/* 只剩图标时保留小箭头，让它一眼读作「可展开的选择器」而不是一个孤立的按钮 */ +.jx-composerBar[data-compact] .jx-modelEffortBtn .jx-modeArrow { display:inline-flex; width:10px; height:10px; opacity:.7; } .jx-composerBar[data-compact] .jx-composerChip { justify-content:center; padding-inline:6px; } .jx-composerBar[data-compact] { padding-inline:8px; gap:4px; } .jx-composerBar[data-compact] .jx-modeChip { padding:0; gap:0; flex:none; } diff --git a/src/frontend/src/styles/chat/turn-status.css b/src/frontend/src/styles/chat/turn-status.css index de37b7f8..86547fd4 100644 --- a/src/frontend/src/styles/chat/turn-status.css +++ b/src/frontend/src/styles/chat/turn-status.css @@ -1,7 +1,6 @@ -/* One geometry for startup, standalone reasoning, and the execution header. +/* One geometry for startup and the execution header. Keep the mark slot fixed; only the image inside it breathes. */ .jx-turnStatusRow, -.jx-inlineSummary.jx-turnStatusRow, .jx-trs-head.jx-turnStatusRow{ display:flex; align-items:center; @@ -21,10 +20,8 @@ .jx-turnStatus{align-self:flex-start;} .jx-trs.jx-trs--turnStatus{margin:0;animation:none;} -/* One mark box for rows with the vector agent mark (.jx-agentSlot) and rows - still on the brand GIF (.jx-turnStatusMark), so their text shares a column. */ -.jx-agentSlot, -.jx-turnStatusMark{ +/* One mark box for every row with the agent mark, so their text shares a column. */ +.jx-agentSlot{ display:inline-flex; align-items:center; justify-content:center; @@ -33,13 +30,7 @@ height:18px; } -/* motion-keep: Fixed-size status marks breathe while a request is active. */ -.jx-turnStatusMark .jx-brandLoader:not(.jx-brandLoader--done){ - animation:jxTurnStatusBreathe 2.4s ease-in-out infinite; -} - .jx-turnStatusText, -.jx-inlineSummary .jx-inlineSummaryText.jx-turnStatusText, .jx-trs .jx-trs-title.jx-turnStatusText{ font-family:var(--font-family); font-size:14px; @@ -71,8 +62,7 @@ transform animation never competes with the scan for `animation`. */ /* motion-keep: Text scanning is an activity signal while a request is running. */ .jx-rollText-text.is-shimmer, -.jx-tcr .jx-tcr-prefix.jx-tcr-prefix--shimmer, -.jx-inlineFold .jx-inlineSummary .jx-inlineSummaryText--live{ +.jx-tcr .jx-tcr-prefix.jx-tcr-prefix--shimmer{ background-image:linear-gradient(90deg, color-mix(in srgb, var(--color-text-secondary) 80%, var(--color-primary)) 0%, var(--color-text-secondary) 35%, @@ -96,11 +86,6 @@ color:var(--color-text-secondary); } -@keyframes jxTurnStatusBreathe{ - 0%,100%{opacity:.8;transform:scale(.94);} - 50%{opacity:1;transform:scale(1.06);} -} - @keyframes jxTurnStatusShine{ 0%,15%{ background-position:83.333% 0; diff --git a/src/frontend/src/styles/conversationNavigation.css b/src/frontend/src/styles/conversationNavigation.css index 95dd519d..cb13c09c 100644 --- a/src/frontend/src/styles/conversationNavigation.css +++ b/src/frontend/src/styles/conversationNavigation.css @@ -100,3 +100,17 @@ transition: none; } } + +/* Phones: the jump rail has no room beside a full-width column, and the 44px + gutter above (0,3,0) outranks the mobile shell's `padding:0`, which left the + message column at ~70% of a 390px screen. Drop both below the mobile breakpoint. */ +@media (max-width: 960px) { + .jx-content .jx-panel:has(.jx-chatWrap) { + --jx-chat-panel-inline-gutter: 0px; + padding-inline: 0; + } + + .jx-conversationNav { + display: none; + } +} diff --git a/src/frontend/src/styles/evolution.css b/src/frontend/src/styles/evolution.css index e9a4518c..751a7392 100644 --- a/src/frontend/src/styles/evolution.css +++ b/src/frontend/src/styles/evolution.css @@ -402,6 +402,9 @@ .jx-evoPrefs-ontology { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .jx-evoPrefs-packSelect { min-width: 200px; } +.jx-evoPrefs-skLabel { width: 96px; height: 14px; } +.jx-evoPrefs-skDesc { width: 72%; height: 12px; margin-top: 4px; } +.jx-evoPrefs-skControl { width: 40px; height: 22px; border-radius: 999px; } @media (max-width: 640px) { .jx-evoPrefs-row { flex-direction: column; } diff --git a/src/frontend/src/styles/index.ts b/src/frontend/src/styles/index.ts index f8e56caa..b16978e8 100644 --- a/src/frontend/src/styles/index.ts +++ b/src/frontend/src/styles/index.ts @@ -24,7 +24,6 @@ import './plan.css'; import './config.css'; import './projects.css'; import './admin.css'; -import './ontology.css'; import './evolution.css'; import './memory-graph.css'; import './onboarding.css'; diff --git a/src/frontend/src/styles/mcp.css b/src/frontend/src/styles/mcp.css index ccb88093..2932921f 100644 --- a/src/frontend/src/styles/mcp.css +++ b/src/frontend/src/styles/mcp.css @@ -575,3 +575,11 @@ padding-left: 16px; border-left: 2px solid var(--color-border); } + +/* Marketplace card placeholders (PluginMarketplaceModal). */ +.jx-mcp-card--skeleton { cursor: default; pointer-events: none; } +.jx-mcp-skIcon { width: 32px; height: 32px; flex-shrink: 0; } +.jx-mcp-skName { width: 40%; height: 16px; } +.jx-mcp-skButton { width: 72px; height: 24px; margin-left: auto; } +.jx-mcp-skDesc { width: 100%; height: 12px; } +.jx-mcp-skDescShort { width: 60%; height: 12px; } diff --git a/src/frontend/src/styles/mobile.css b/src/frontend/src/styles/mobile.css index 3e13c93b..846706ec 100644 --- a/src/frontend/src/styles/mobile.css +++ b/src/frontend/src/styles/mobile.css @@ -5,3 +5,4 @@ @import './mobile/controls.css'; @import './mobile/touch.css'; @import './mobile/projects.css'; +@import './mobile/scroll.css'; diff --git a/src/frontend/src/styles/mobile/chat.css b/src/frontend/src/styles/mobile/chat.css index be36c88e..093b18f4 100644 --- a/src/frontend/src/styles/mobile/chat.css +++ b/src/frontend/src/styles/mobile/chat.css @@ -19,6 +19,9 @@ .jx-emptyPage--main .jx-heroBg{ order:1; flex:none; + /* 桌面首页是靠左排的（welcome.css 的 align-items:flex-start）；手机上模式选择、 + 输入框、推荐问题都居中，hero 不跟着居中就会整页歪向左边。 */ + align-items:center; padding:0; margin-top:clamp(24px, 8dvh, 68px); overflow:visible; diff --git a/src/frontend/src/styles/mobile/controls.css b/src/frontend/src/styles/mobile/controls.css index 320f11a6..bc2e6a4f 100644 --- a/src/frontend/src/styles/mobile/controls.css +++ b/src/frontend/src/styles/mobile/controls.css @@ -376,3 +376,15 @@ max-width:none; } } + +/* 定时任务排序下拉、站点页主按钮：桌面紧凑尺寸（24 / 32px）在触屏上点不稳 */ +@media (max-width: 960px){ + body .jx-automation-sort.ant-select{ + height:40px; + font-size:14px; + } + + .jx-agentPage-header .ant-btn{ + min-height:40px; + } +} diff --git a/src/frontend/src/styles/mobile/scroll.css b/src/frontend/src/styles/mobile/scroll.css new file mode 100644 index 00000000..ad41160b --- /dev/null +++ b/src/frontend/src/styles/mobile/scroll.css @@ -0,0 +1,44 @@ +/* ══════════════════════════════════════════ + 手机：一屏只有一个滚动面（iOS 的做法） + - 弹窗 / 底部面板里的列表不再自己限高滚动：整张面板随内容一起滚， + 不会出现「面板里还套着一个带滚动条的小窗」 + - 卡片内部的局部滚动（代码块、表格、文档正文框、提问卡片）保持不变 + - 滚动条不画出来：iOS 的滚动指示条是滚动时才浮现的，常驻的灰条在手机上只是噪音 + 页码条已在各列表组件里换成连续加载（ContinuousLoadSentinel）。 + ══════════════════════════════════════════ */ + +@media (max-width: 960px) { + .jx-mk-grid, + .jx-mk-detail, + .jx-kbChunkPreviewList { + max-height: none; + overflow: visible; + } + + .jx-mk-detail { + padding-right: 0; + } + + .pa-settings-modal .ant-modal-body { + max-height: none; + overflow: visible; + margin-right: 0; + padding-right: 0; + } + + .jx-mcp-marketGrid { + grid-template-columns: minmax(0, 1fr); + } + + .jx-continuousLoadSentinel { + height: 1px; + } + + * { + scrollbar-width: none; + } + + *::-webkit-scrollbar { + display: none; + } +} diff --git a/src/frontend/src/styles/mobile/shell.css b/src/frontend/src/styles/mobile/shell.css index b79de880..223a9188 100644 --- a/src/frontend/src/styles/mobile/shell.css +++ b/src/frontend/src/styles/mobile/shell.css @@ -164,6 +164,7 @@ @media (max-width: 768px), (max-width: 960px) and (max-height: 600px){ .jx-mainRow, + .jx-conversationColumn, .jx-content{ min-width:0; max-width:100%; diff --git a/src/frontend/src/styles/mobile/surfaces.css b/src/frontend/src/styles/mobile/surfaces.css index b5ea4310..6f34a127 100644 --- a/src/frontend/src/styles/mobile/surfaces.css +++ b/src/frontend/src/styles/mobile/surfaces.css @@ -75,6 +75,52 @@ transform:scale(.96); } + /* 首页空对话的底色是 --color-bg-chat，顶栏沿用 --color-bg-layout 会在顶部压出一条 + 冷灰色带；对话面上让顶栏跟随它下面的底色。 */ + .jx-primaryPane.is-chatSurface > .jx-mobileHeader{ + background:color-mix(in srgb, var(--color-bg-chat) 86%, transparent); + } + + /* 顶栏右侧「新建对话」：手机上原本只能先开侧栏再找按钮 */ + .jx-mobileNewChatBtn{ + display:grid; + place-items:center; + width:var(--jx-touch-min); + height:var(--jx-touch-min); + flex:0 0 var(--jx-touch-min); + margin-left:auto; + padding:0; + border:0; + border-radius:50%; + background:transparent; + color:var(--color-text); + font-size:19px; + cursor:pointer; + transition:transform var(--motion-duration-instant) var(--motion-ease-standard); + } + + .jx-mobileNewChatBtn:active{ + background:var(--color-fill-hover); + transform:scale(.96); + } + + .jx-mobileNewChatBtn:focus-visible{ + outline:2px solid var(--color-primary); + outline-offset:2px; + } + + .jx-chatTopbar .jx-mobileNewChatBtn{ + margin-left:4px; + } + + .jx-chatTopbarTitle{ + flex:1 1 auto; + min-width:0; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; + } + .jx-chatTopbar{ min-height:calc(64px + var(--jx-safe-t)); padding:calc(10px + var(--jx-safe-t)) max(16px, var(--jx-safe-r)) 10px max(16px, var(--jx-safe-l)); diff --git a/src/frontend/src/styles/mobile/touch.css b/src/frontend/src/styles/mobile/touch.css index 2bcdbdf2..21989a92 100644 --- a/src/frontend/src/styles/mobile/touch.css +++ b/src/frontend/src/styles/mobile/touch.css @@ -49,14 +49,17 @@ /* ── 1. 安全区落地 ───────────────────────────────────────────────────── */ @media (max-width: 960px){ - /* Keep the safe-area inset inside the footer, leaving the sibling message - viewport the remaining height and the footer background under the home bar. */ + /* Keep the safe-area inset inside the floating footer, so its background + reaches under the home bar and no message text shows below it. */ .jx-chatWrap{ padding-bottom:0; } .jx-chatFooter{ padding-bottom:max(10px, var(--jx-safe-b)); + /* Absolute footer: stay inside the chat wrap's side insets. */ + left:var(--jx-chat-wrap-left, 12px); + right:var(--jx-chat-wrap-right, 12px); } /* 横屏时刘海在左/右侧，贴边的正文与输入区都要让开 */ @@ -138,6 +141,9 @@ 38px 宽 + 6px 间距 = 44px 节距，命中层刚好相接不互相蚕食。 */ .jx-msgActions{ gap:6px; + /* 6 个按钮 + 耗时小字在 360px 级屏幕上排不下，耗时被裁成半个字；允许折到第二行 */ + flex-wrap:wrap; + row-gap:2px; } .jx-msgActionBtn{ @@ -152,10 +158,12 @@ min-height:var(--jx-touch-min); } - /* 「思考过程 / 已调用 xxx」这排折叠开关只有 23px 高。它们是竖直堆叠的， - 命中层撑到 44 会互相蚕食，所以给真实高度而不是命中层。 */ - .jx-inlineSummary{ - min-height:34px; + /* 追问在手机上一行只放得下十几个字，省略号会把问题本身吃掉：放开到两行 */ + .jx-followUpText{ + white-space:normal; + display:-webkit-box; + -webkit-box-orient:vertical; + -webkit-line-clamp:2; } /* 侧栏抽屉：导航项与历史项是主要触摸目标，直接给足高度而不是靠命中层—— @@ -211,6 +219,26 @@ 不受影响，iPad 这类宽屏触摸设备也能覆盖到。 */ @media (hover: none){ + /* 悬停才浮现的行内操作在触屏上永远点不到（卡片尾部操作、代码块复制、工具结果里的 + 下载 / 预览、团队目录「更多」等）。这些都是功能入口而非装饰，触屏一律常显。 + 各自的隐藏规则特异性不一（单类到三级后代都有），这里用 !important 统一压住， + 只限 hover:none，不影响鼠标设备。图片悬停遮罩、头像编辑遮罩会盖住内容，不在此列。 */ + .jx-automation-card-actions, + .jx-cardTailActions, + .jx-ce-cardActionBtn, + .jx-ce-codeBarActions, + .jx-ce-fileDlIcon, + .jx-ce-filePreviewBtn, + .jx-chunkQuestionDel, + .jx-mySpace-notifCard-deleteBtn, + .jx-sites-cardActions, + .jx-team-tree-more, + .pa-output-action{ + opacity:1 !important; + pointer-events:auto !important; + visibility:visible !important; + } + /* 系统默认的灰色点击方块与本站自研的 :active 缩放反馈重复，且会在圆角控件外 画出直角色块。关掉它，交互反馈全部交给 :active。 */ a, diff --git a/src/frontend/src/styles/mobile/workspaces.css b/src/frontend/src/styles/mobile/workspaces.css index 1bd1481b..beac5b6c 100644 --- a/src/frontend/src/styles/mobile/workspaces.css +++ b/src/frontend/src/styles/mobile/workspaces.css @@ -20,6 +20,7 @@ .jx-mobileHeader, .jx-mobileMenuBtn, +.jx-mobileNewChatBtn, .jx-mobileSidebarBackdrop, .jx-mobileHeroText{ display:none; diff --git a/src/frontend/src/styles/module-navigation.css b/src/frontend/src/styles/module-navigation.css index dabc200b..e63fa69e 100644 --- a/src/frontend/src/styles/module-navigation.css +++ b/src/frontend/src/styles/module-navigation.css @@ -52,3 +52,12 @@ .jx-moreModulesMenu.ant-dropdown .ant-dropdown-menu{min-width:144px;max-height:calc(100vh - 32px);overflow-y:auto;padding:6px;border-radius:12px;background:var(--color-bg-container);} .jx-moreModulesMenu.ant-dropdown .ant-dropdown-menu-item{gap:8px;padding:6px 10px;border-radius:8px;font-size:14px;line-height:22px;color:var(--color-text);} + +/* 图标栏文字标签：桌面靠悬停提示，手机抽屉里没有悬停，只看图标认不出模块。 */ +.jx-moduleButtonLabel{display:none;} +@media (max-width:960px){ + .jx-moduleShell .jx-moduleRail{padding-inline:4px;} + .jx-moduleShell .jx-moduleRail .jx-moduleButton{flex-direction:column;gap:2px;width:56px;height:56px;padding:0;} + .jx-moduleShell .jx-moduleRail .jx-moduleButtonLabel{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:16px;} + .jx-moduleShell .jx-moduleRail .jx-moduleButton.active::before{top:18px;bottom:18px;} +} diff --git a/src/frontend/src/styles/myspace.css b/src/frontend/src/styles/myspace.css index b35eb8e1..3726ccce 100644 --- a/src/frontend/src/styles/myspace.css +++ b/src/frontend/src/styles/myspace.css @@ -4,3 +4,4 @@ @import './myspace/feedback.css'; @import './myspace/responsive.css'; @import './myspace/navigation.css'; +@import './myspace/mobile.css'; diff --git a/src/frontend/src/styles/myspace/files.css b/src/frontend/src/styles/myspace/files.css index 7eceacd6..3adf693d 100644 --- a/src/frontend/src/styles/myspace/files.css +++ b/src/frontend/src/styles/myspace/files.css @@ -294,3 +294,13 @@ background: var(--color-fill-hover); color: var(--color-text); } + +/* 触屏没有悬停：文件行的「更多操作」（重命名 / 下载 / 删除）要常显，否则手机上无从操作 */ +@media (hover: none) { + .jx-mySpace-docRow .jx-mySpace-moreBtn { + width: 36px; + height: 36px; + opacity: 1; + pointer-events: auto; + } +} diff --git a/src/frontend/src/styles/myspace/mobile.css b/src/frontend/src/styles/myspace/mobile.css new file mode 100644 index 00000000..bbf620c7 --- /dev/null +++ b/src/frontend/src/styles/myspace/mobile.css @@ -0,0 +1,386 @@ +/* ══════════════════════════════════════════ + 手机版「我的空间」：按 iOS 分组列表的逻辑排版 + - 整页灰底（与顶栏同色），内容放在白色圆角卡片里，不再是白底上压一条灰顶栏 + - 大标题 + 横向滚动的胶囊 Tab（不再是 20px 下划线 Tab 被屏幕边缘截断） + - 分段控件与「刷新 / +」同一行；新建与上传收进「+」菜单 + - 搜索框是无边框的填充式搜索栏，字号 16px（iOS 低于 16px 聚焦时会整页放大） + - 文件行：32px 图标 + 名称 + 一行「大小 · 时间」副标题，分隔线从文字处起（inset） + 本文件最后导入，覆盖 responsive.css 里按容器宽度隐藏列的规则。 + ══════════════════════════════════════════ */ + +@media (max-width: 960px) { + .jx-mySpace, + .jx-mySpace-header { + background: var(--color-bg-layout); + } + + .jx-mySpace-shell { + padding: 0 16px; + } + + /* 大标题跟着内容滚走，只留系统顶栏常驻，屏幕高度留给列表 */ + .jx-mySpace-header { + position: static; + padding-top: 4px; + } + + .jx-mySpace-titleBar { + padding-bottom: 12px; + } + + .jx-mySpace-title { + font-size: 28px; + font-weight: 700; + line-height: 34px; + letter-spacing: -0.01em; + } + + /* ── 胶囊 Tab：贴屏幕两边滚动，选中项是深色胶囊（layoutId 让胶囊在 Tab 间滑动） ── */ + .jx-mySpace-tabs { + gap: 8px; + margin: 0 -16px; + padding: 0 16px 4px; + border-bottom: 0; + scroll-padding-inline: 16px; + } + + .jx-mySpace-tab { + height: 32px; + margin-right: 0; + padding: 0 14px; + border-radius: 999px; + background: color-mix(in srgb, var(--color-text) 6%, transparent); + color: var(--color-text-secondary); + font-size: 15px; + font-weight: 500; + isolation: isolate; + } + + .jx-mySpace-tab:hover { + color: var(--color-text-secondary); + } + + .jx-mySpace-tab.active { + background: transparent; + color: var(--color-bg-container); + font-weight: 600; + } + + .jx-mySpace-tab > span:not(.jx-mySpace-tabInk) { + position: relative; + z-index: 1; + } + + .jx-mySpace-tab .jx-mySpace-tabInk { + inset: 0; + z-index: 0; + height: auto; + border-radius: inherit; + background: var(--color-text); + } + + .jx-mySpace-tab:active { + transform: scale(0.97); + } + + /* ── 工具区：[分段控件][刷新][+] 一行，搜索栏一行 ── */ + .jx-mySpace-assetBar { + flex-direction: row; + flex-wrap: wrap; + align-items: center; + gap: 12px 8px; + padding-top: 16px; + } + + .jx-mySpace-assetBar .jx-mySpace-filterTools { + display: contents; + } + + .jx-mySpace .jx-assetTypeSwitch { + flex: 1 1 0; + min-width: 0; + min-height: 36px; + padding: 2px; + border-radius: 10px; + background: color-mix(in srgb, var(--color-text) 7%, transparent); + } + + .jx-mySpace .jx-assetTypeSwitch > button { + flex: 1 1 0; + min-width: 0; + padding: 0 12px; + border-radius: 8px; + font-size: 13px; + font-weight: 500; + } + + .jx-mySpace .jx-assetTypeSwitch-thumb { + border: 0; + border-radius: 8px; + box-shadow: var(--shadow-card); + } + + .jx-mySpace-assetBar .jx-mySpace-backBtn.ant-btn { + order: -1; + flex: 1 1 100%; + justify-content: flex-start; + height: 32px; + min-height: 32px; + margin-bottom: -4px; + padding: 0 4px; + color: var(--color-primary); + font-size: 15px; + } + + .jx-mySpace-assetBar .jx-mySpace-refreshBtn.ant-btn, + .jx-mySpace-assetBar .jx-mySpace-addBtn.ant-btn { + flex: 0 0 auto; + min-width: 40px; + height: 40px; + min-height: 40px; + border-radius: 999px; + font-size: 17px; + } + + .jx-mySpace-assetBar .jx-mySpace-refreshBtn.ant-btn { + order: 1; + width: 40px; + padding: 0; + color: var(--color-text-secondary); + } + + .jx-mySpace-assetBar .jx-mySpace-addBtn.ant-btn, + .jx-mySpace-assetBar .ant-dropdown-trigger:has(> .jx-mySpace-addBtn) { + order: 2; + } + + .jx-mySpace-assetBar .jx-mySpace-addBtn.ant-btn { + padding: 0 12px; + font-size: 13px; + font-variant-numeric: tabular-nums; + } + + .jx-mySpace-assetBar .jx-mySpace-addBtn.ant-btn .anticon { + font-size: 18px; + } + + .jx-mySpace-assetBar .jx-mySpace-search.ant-input-affix-wrapper { + order: 10; + flex: 1 1 100%; + width: 100%; + height: 40px; + padding: 0 12px; + border: 0; + border-radius: 10px; + background: color-mix(in srgb, var(--color-text) 7%, transparent); + box-shadow: none; + } + + .jx-mySpace-assetBar .jx-mySpace-search.ant-input-affix-wrapper-focused { + background: var(--color-bg-container); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 28%, transparent); + } + + .jx-mySpace-search .ant-input { + background: transparent; + font-size: 16px; + } + + .jx-mySpace-search .ant-input-prefix { + margin-inline-end: 6px; + color: var(--color-text-tertiary); + } + + /* ── 列表：白色圆角分组卡片，去掉表头 ── */ + .jx-mySpace-docTable { + margin-top: 16px; + padding-top: 0; + border-radius: var(--radius-md); + background: var(--color-bg-container); + overflow: clip; + } + + .jx-mySpace-docTable .jx-mySpace-docTable-header { + display: none; + } + + .jx-mySpace-docTable .jx-mySpace-docRow { + position: relative; + grid-template-columns: auto minmax(0, 1fr); + align-content: center; + row-gap: 2px; + min-height: 64px; + padding: 10px 48px 10px 60px; + border-bottom: 0; + } + + /* inset 分隔线：从文字起，不穿过图标 */ + .jx-mySpace-docTable .jx-mySpace-docRow::after { + content: ''; + position: absolute; + left: 60px; + right: 0; + bottom: 0; + border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); + pointer-events: none; + } + + .jx-mySpace-docTable > .jx-mySpace-docRow:last-child::after, + .jx-mySpace-docTable > :last-child > .jx-mySpace-docRow::after { + display: none; + } + + .jx-mySpace-docRow .jx-mySpace-docTable-col { + padding: 0; + } + + .jx-mySpace-docRow .jx-mySpace-docTable-col--check, + .jx-mySpace-docRow .jx-mySpace-docTable-col--source { + display: none; + } + + .jx-mySpace-docRow .jx-mySpace-docTable-col--name { + grid-column: 1 / 3; + grid-row: 1; + } + + .jx-mySpace-docRow .jx-mySpace-docRow-icon { + position: absolute; + top: 50%; + left: 16px; + width: 32px; + height: 32px; + margin-top: -16px; + } + + .jx-mySpace-docRow .jx-mySpace-docRow-name { + font-size: 16px; + line-height: 22px; + } + + .jx-mySpace-docRow .jx-mySpace-docTable-col--size, + .jx-mySpace-docRow .jx-mySpace-docTable-col--time { + display: block; + grid-row: 2; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .jx-mySpace-docRow .jx-mySpace-docTable-col--size { + grid-column: 1; + } + + .jx-mySpace-docRow .jx-mySpace-docTable-col--time { + grid-column: 2; + } + + .jx-mySpace-docRow--folder .jx-mySpace-docTable-col--time { + grid-column: 1 / 3; + } + + /* 文件夹没有大小；没有修改时间时连副标题行也不留，名称垂直居中 */ + .jx-mySpace-docRow.jx-mySpace-docRow--folder .jx-mySpace-docTable-col--size, + .jx-mySpace-docRow .jx-mySpace-docTable-col--time:has(.jx-mySpace-docRow-time:empty) { + display: none; + } + + .jx-mySpace-docRow:not(.jx-mySpace-docRow--folder) .jx-mySpace-docTable-col--time::before { + content: '·'; + margin: 0 6px; + color: var(--color-text-tertiary); + } + + .jx-mySpace-docRow .jx-mySpace-docRow-meta, + .jx-mySpace-docRow .jx-mySpace-docRow-time { + font-size: 13px; + line-height: 18px; + color: var(--color-text-tertiary); + font-variant-numeric: tabular-nums; + } + + /* 不参与网格：否则 36px 按钮会把空的副标题行撑高，单行的文件夹名就不再居中 */ + .jx-mySpace-docRow .jx-mySpace-docTable-col--actions { + position: absolute; + top: 50%; + right: 4px; + width: 44px; + transform: translateY(-50%); + } + + /* iOS 的「更多」是横向三点 */ + .jx-mySpace-docRow .jx-mySpace-moreBtn .anticon { + transform: rotate(90deg); + font-size: 17px; + } + + .jx-mySpace-docRow:active { + background: var(--color-fill-hover); + } + + .jx-mySpace-empty { + min-height: 240px; + margin-top: 16px; + border: 0; + border-radius: var(--radius-md); + background: var(--color-bg-container); + } + + /* 团队目录工具条：v2 不用描边按钮，次要操作走浅灰填充；与上面的圆形按钮同一节奏 */ + .jx-team-workspace-actions .ant-btn { + min-width: 36px; + height: 36px; + border-radius: 999px; + } + + .jx-team-workspace-actions .ant-btn.ant-btn-variant-outlined { + --ant-btn-border-color: transparent; + --ant-btn-border-color-hover: transparent; + --ant-btn-border-color-active: transparent; + --ant-btn-bg-color: color-mix(in srgb, var(--color-text) 7%, transparent); + --ant-btn-bg-color-hover: color-mix(in srgb, var(--color-text) 7%, transparent); + --ant-btn-bg-color-active: color-mix(in srgb, var(--color-text) 12%, transparent); + } + + /* 「+」菜单：触屏行高 44px */ + .jx-mySpace-addMenu .ant-dropdown-menu { + min-width: 200px; + } + + .jx-mySpace-addMenu .ant-dropdown-menu-item { + min-height: 44px; + font-size: 15px; + } + + .jx-mySpace-body { + padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); + } +} + +/* 触屏：点按后 :hover 会一直粘着，行底色和蓝色文件名看起来像被选中 */ +@media (max-width: 960px) and (hover: none) { + .jx-mySpace-docRow:hover { + background: transparent; + } + + .jx-mySpace-docRow:active { + background: var(--color-fill-hover); + } + + .jx-mySpace-docRow:hover .jx-mySpace-docRow-name { + color: var(--color-text); + } + + .jx-mySpace-docRow.jx-mySpace-docRow--checked .jx-mySpace-docRow-name { + color: var(--color-primary); + } +} + +/* 深色：分段控件的选中块要比轨道亮（iOS 深色同样是浅一档的滑块），否则看起来像凹陷 */ +@media (max-width: 960px) { + :root[data-theme='dark'] .jx-mySpace .jx-assetTypeSwitch-thumb { + background: color-mix(in srgb, var(--color-text) 16%, var(--color-bg-container)); + box-shadow: none; + } +} diff --git a/src/frontend/src/styles/myspace/responsive.css b/src/frontend/src/styles/myspace/responsive.css index 482ef402..5c76843d 100644 --- a/src/frontend/src/styles/myspace/responsive.css +++ b/src/frontend/src/styles/myspace/responsive.css @@ -131,3 +131,27 @@ display: none; } } + +/* 窄容器下工具区原本一项一行（新建文件夹 / 上传 / 刷新 / 搜索各占整行）， + 第一份文件被推到约 400px 以下。改为两行：操作按钮一行，搜索一行。 */ +@container myspace (max-width: 560px) { + .jx-mySpace-filterTools { + flex-direction: row; + flex-wrap: wrap; + align-items: center; + gap: 8px; + } + + .jx-mySpace-filterTools > .ant-btn, + .jx-mySpace-filterTools > .ant-dropdown-trigger { + min-height: 40px; + } + + .jx-mySpace-filterTools > .ant-dropdown-trigger { + flex: 1 1 auto; + } + + .jx-mySpace-search.ant-input-affix-wrapper { + flex: 1 1 100%; + } +} diff --git a/src/frontend/src/styles/ontology.css b/src/frontend/src/styles/ontology.css deleted file mode 100644 index 6ad455db..00000000 --- a/src/frontend/src/styles/ontology.css +++ /dev/null @@ -1,1312 +0,0 @@ -/* Ontology validation feedback and admin Domain Pack detail. */ - -.jx-ontologyGovernance { - width: min(680px, 100%); - margin: 0 0 10px; - padding: 12px 14px; - border: 1px solid var(--color-primary-bg); - border-radius: 12px; - background: var(--color-primary-light); - color: var(--color-text); -} - -.jx-ontologyGovernance.is-running { - border-color: rgba(38, 116, 255, 0.28); -} - -.jx-ontologyGovernance.has-denial { - border-color: rgba(250, 173, 20, 0.38); - background: var(--color-warning-light); -} - -.jx-ontologyGovernance-head, -.jx-ontologyGovernance-title, -.jx-ontologyGovernance-status, -.jx-ontologyGovernance-summary, -.jx-ontologyGovernance-workflows, -.jx-ontologyGovernance-workflows > span { - display: flex; - align-items: center; -} - -.jx-ontologyGovernance-head { - justify-content: space-between; - gap: 12px; -} - -.jx-ontologyGovernance-title { - gap: 7px; - font-size: 14px; - font-weight: 650; -} - -.jx-ontologyGovernance-title > .anticon { - color: var(--color-primary); - font-size: 16px; -} - -.jx-ontologyGovernance-status { - flex: 0 0 auto; - gap: 5px; - padding: 3px 8px; - border-radius: 999px; - background: var(--color-primary-bg); - color: var(--color-primary-active); - font-size: 11px; - font-weight: 600; -} - -.jx-ontologyGovernance-status.is-running { - background: rgba(38, 116, 255, 0.1); - color: var(--color-primary); -} - -.jx-ontologyGovernance-status.is-warning { - background: rgba(250, 173, 20, 0.12); - color: var(--color-warning-active); -} - -.jx-ontologyGovernance-summary { - flex-wrap: wrap; - gap: 6px 16px; - margin-top: 9px; - color: var(--color-text-secondary); - font-size: 12px; -} - -.jx-ontologyGovernance-summary strong { - color: var(--color-text); - font-family: var(--font-family-number); -} - -.jx-ontologyGovernance-workflows { - flex-wrap: wrap; - gap: 6px; - margin-top: 10px; -} - -.jx-ontologyGovernance-workflows > span { - gap: 6px; - max-width: 100%; - padding: 4px 8px; - overflow: hidden; - border: 1px solid var(--color-border); - border-radius: 7px; - background: color-mix(in srgb, var(--color-bg-container) 78%, transparent); - font-size: 12px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.jx-ontologyGovernance-workflows small { - color: var(--color-text-tertiary); - font-size: 10px; -} - -@media (max-width: 640px) { - .jx-ontologyGovernance-head { - align-items: flex-start; - } - - .jx-ontologyGovernance-summary { - gap: 5px 10px; - } -} - -/* Ontology review follows the assistant answer in the normal conversation flow. */ -.jx-ontologyReviewInline { - width: 100%; - max-width: 100%; - margin: 8px 0 4px; - animation: jx-ontologyInlineEnter .24s cubic-bezier(.2, .8, .2, 1) both; -} - -.jx-ontologyReviewTrigger { - display: flex; - width: 100%; - max-width: 100%; - padding: 10px 12px; - align-items: center; - gap: 10px; - cursor: pointer; - border: 1px solid rgba(18, 109, 255, .16); - border-radius: 12px; - background: var(--color-primary-light); - color: var(--color-text); - text-align: left; - box-shadow: 0 4px 14px rgba(21, 45, 74, .04); - transition: border-color .16s, box-shadow .16s, transform .16s; -} - -.jx-ontologyReviewTrigger:hover { - border-color: rgba(18, 109, 255, .3); - box-shadow: 0 7px 18px rgba(18, 109, 255, .08); - transform: translateY(-1px); -} - -.jx-ontologyReviewTrigger:focus-visible { - outline: 2px solid var(--color-primary-disabled); - outline-offset: 2px; -} - -.jx-ontologyReviewTrigger.is-warning { - border-color: rgba(250, 173, 20, .3); - background: var(--color-warning-light); -} - -.jx-ontologyReviewTrigger-icon { - display: grid; - width: 31px; - height: 31px; - flex: 0 0 31px; - place-items: center; - border-radius: 9px; - background: rgba(18, 109, 255, .09); - color: var(--color-primary); - font-size: 15px; -} - -.jx-ontologyReviewTrigger.is-warning .jx-ontologyReviewTrigger-icon { - background: rgba(250, 173, 20, .12); - color: var(--color-warning-active); -} - -.jx-ontologyReviewTrigger-copy { - display: flex; - min-width: 0; - flex: 1; - flex-direction: column; - gap: 2px; -} - -.jx-ontologyReviewTrigger-copy strong { - overflow: hidden; - font-size: 12.5px; - font-weight: 650; - text-overflow: ellipsis; - white-space: nowrap; -} - -.jx-ontologyReviewTrigger-copy small { - overflow: hidden; - color: var(--color-text-tertiary); - font-size: 10.5px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.jx-ontologyReviewTrigger-arrow { - flex: 0 0 auto; - color: var(--color-text-tertiary); - font-size: 11px; -} - -@keyframes jx-ontologyInlineEnter { - from { opacity: 0; transform: translate3d(0, 6px, 0); } - to { opacity: 1; transform: translate3d(0, 0, 0); } -} -/* motion-stop: 减弱动效下定格在终态（同名关键帧后定义者胜，用到它的规则一起生效） */ -@media (prefers-reduced-motion: reduce) { - @keyframes jx-ontologyInlineEnter { from, to { opacity: 1; transform: translate3d(0, 0, 0) } } -} - - -.jx-ontologyRevision { - position: relative; - box-sizing: border-box; - width: 100%; - max-width: 100%; - min-width: 0; - overflow: hidden; - border: 1px solid rgba(18, 109, 255, .2); - border-radius: 14px; - background: var(--color-bg); - box-shadow: 0 8px 24px rgba(21, 45, 74, .07); - cursor: default; - pointer-events: auto; - scrollbar-color: rgba(100, 116, 139, .22) transparent; - scrollbar-width: thin; - contain: inline-size; -} - -.jx-ontologyRevision, -.jx-ontologyRevision * { - box-sizing: border-box; - min-width: 0; -} - -.jx-ontologyRevision-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 16px; - padding: 16px 17px 14px; - border-bottom: 1px solid var(--color-border); - background: var(--color-primary-light); -} - -.jx-ontologyRevision-kicker { - display: block; - margin-bottom: 3px; - color: var(--color-primary); - font-family: var(--font-family-number); - font-size: 9px; - font-weight: 700; - letter-spacing: .15em; -} - -.jx-ontologyRevision-head h3 { - overflow: hidden; - margin: 0; - color: var(--color-text); - font-size: 16px; - font-weight: 650; - line-height: 1.3; - text-overflow: ellipsis; - white-space: nowrap; -} - -.jx-ontologyRevision-state { - flex: 0 0 auto; - padding: 4px 9px; - border: 1px solid rgba(21, 45, 74, .1); - border-radius: 999px; - background: var(--color-bg-gray); - color: var(--color-text-secondary); - font-size: 11px; - font-weight: 600; - white-space: nowrap; -} - -.jx-ontologyRevision-state.is-streaming { - border-color: rgba(18, 109, 255, .18); - background: rgba(18, 109, 255, .07); - color: var(--color-primary); -} - -.jx-ontologyRevision-state.is-accepted { - border-color: var(--color-primary-bg); - background: var(--color-primary-light); - color: var(--color-primary-active); -} - -.jx-ontologyRevision-state.is-warning { - border-color: rgba(250, 173, 20, .22); - background: rgba(250, 173, 20, .09); - color: var(--color-warning-active); -} - -.jx-ontologyReviewProgress { - display: flex; - align-items: flex-start; - gap: 12px; - margin: 14px; - padding: 15px; - border: 1px solid rgba(18, 109, 255, .14); - border-radius: 12px; - background: var(--color-primary-light); -} - -.jx-ontologyReviewProgress-icon { - display: grid; - flex: 0 0 32px; - width: 32px; - height: 32px; - place-items: center; - border-radius: 10px; - background: rgba(18, 109, 255, .09); - color: var(--color-primary); - font-size: 16px; -} - -.jx-ontologyReviewProgress strong { - color: var(--color-text); - font-size: 13px; -} - -.jx-ontologyReviewProgress p { - margin: 4px 0 0; - color: var(--color-text-secondary); - font-size: 11.5px; - line-height: 1.55; -} - -.jx-ontologyPassResult { - margin: 14px; - padding: 15px; - border: 1px solid var(--color-border); - border-radius: 13px; - background: var(--color-bg-gray); -} - -.jx-ontologyPassResult-title { - display: flex; - align-items: flex-start; - gap: 11px; -} - -.jx-ontologyPassResult-title > .anticon { - margin-top: 2px; - color: var(--color-primary); - font-size: 21px; -} - -.jx-ontologyPassResult-title h4 { - margin: 0; - color: var(--color-text); - font-size: 14px; - font-weight: 680; -} - -.jx-ontologyPassResult-title p { - margin: 4px 0 0; - color: var(--color-text-secondary); - font-size: 11.5px; - line-height: 1.5; -} - -.jx-ontologyPassResult-summary { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 8px; - margin-top: 14px; -} - -.jx-ontologyPassResult-summary > div { - min-width: 0; - padding: 9px 10px; - border: 1px solid var(--color-border); - border-radius: 9px; - background: color-mix(in srgb, var(--color-bg-container) 70%, transparent); -} - -.jx-ontologyPassResult-summary span, -.jx-ontologyPassResult-summary strong { - display: block; -} - -.jx-ontologyPassResult-summary span { - color: var(--color-text-tertiary); - font-size: 10px; -} - -.jx-ontologyPassResult-summary strong { - margin-top: 3px; - overflow: hidden; - color: var(--color-text); - font-family: var(--font-family-number); - font-size: 12px; - font-weight: 650; - text-overflow: ellipsis; - white-space: nowrap; -} - -.jx-ontologyPassResult-evidence { - margin-top: 12px; - padding-top: 11px; - border-top: 1px solid var(--color-border); -} - -.jx-ontologyPassResult-evidence > span { - display: flex; - align-items: center; - gap: 6px; - color: var(--color-text-secondary); - font-size: 11px; - font-weight: 650; -} - -.jx-ontologyPassResult-evidence ul { - margin: 7px 0 0; - padding-left: 17px; - color: var(--color-text-secondary); - font-size: 11px; - line-height: 1.6; -} - -.jx-ontologyRevision > .jx-inlineFold { - margin: 10px 14px 0; -} - -.jx-ontologyRevision-evidence { - display: flex; - align-items: flex-start; - gap: 7px; - margin: 10px 14px 0; - padding: 8px 10px; - border: 1px solid var(--color-primary-bg); - border-radius: 9px; - background: var(--color-primary-light); - color: var(--color-text-secondary); - font-size: 11.5px; - line-height: 1.5; - overflow-wrap: anywhere; -} - -.jx-ontologyRevision-evidence > .anticon { - margin-top: 2px; - color: var(--color-primary); -} - -.jx-ontologyRevision-document { - width: 100%; - max-width: 100%; - margin: 12px 0 0; - padding: 4px 18px 18px; - overflow-x: hidden; - overflow-y: visible; - color: color-mix(in srgb, var(--color-text) 86%, transparent); -} - -.jx-ontologyRevision-documentHead { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - margin-bottom: 12px; - padding-bottom: 9px; - border-bottom: 1px solid var(--color-border); -} - -.jx-ontologyRevision-documentHead strong { - color: var(--color-text); - font-size: 12px; - font-weight: 650; -} - -.jx-ontologyRevision-documentHead span { - overflow: hidden; - color: var(--color-text-tertiary); - font-size: 10px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.jx-ontologyRevision-text { - display: block; - width: 100%; - max-width: 100%; - overflow-wrap: anywhere; - word-break: break-word; - font-size: 13.5px; - line-height: 1.75; -} - -.jx-ontologyRevision-text > div, -.jx-ontologyRevision-text p, -.jx-ontologyRevision-text li, -.jx-ontologyRevision-text blockquote, -.jx-ontologyRevision-text dd, -.jx-ontologyRevision-text a { - max-width: 100%; - overflow-wrap: anywhere; - word-break: break-word; -} - -.jx-ontologyRevision-text pre { - display: block; - max-width: 100%; - overflow-x: auto; - white-space: pre; -} - -.jx-ontologyRevision-text table { - display: block; - width: 100%; - max-width: 100%; - overflow-x: auto; - white-space: nowrap; -} - -.jx-ontologyRevision-text img, -.jx-ontologyRevision-text svg, -.jx-ontologyRevision-text canvas { - max-width: 100%; - height: auto; -} - -.jx-ontologyRevision-text h1, -.jx-ontologyRevision-text h2, -.jx-ontologyRevision-text h3 { - margin: 18px 0 8px; - color: var(--color-text); - line-height: 1.4; -} - -.jx-ontologyRevision-text p { - margin: 0 0 10px; -} - -.jx-ontologyRevision-placeholder { - min-height: 140px; - display: grid; - place-items: center; - color: var(--color-text-tertiary); - font-size: 13px; -} - -.jx-ontologyManualReview { - margin: 0 14px 14px; - padding: 12px; - border: 1px solid color-mix(in srgb, var(--color-warning) 24%, transparent); - border-radius: 12px; - background: var(--color-warning-light); -} - -.jx-ontologyManualReview.is-required { - box-shadow: inset 3px 0 0 #d99918; -} - -.jx-ontologyManualReview-head { - display: flex; - align-items: flex-start; - gap: 9px; -} - -.jx-ontologyManualReview-head > .anticon { - margin-top: 2px; - color: #b87809; -} - -.jx-ontologyManualReview-head strong { - color: var(--color-tint-amber); - font-size: 13px; -} - -.jx-ontologyManualReview-head p { - margin: 3px 0 0; - color: var(--color-tint-amber); - font-size: 11.5px; - line-height: 1.55; -} - -.jx-ontologyManualReview-grid { - display: grid; - gap: 8px; - margin-top: 11px; -} - -.jx-ontologyManualReview-card { - position: relative; - padding: 10px 10px 10px 38px; - border: 1px solid rgba(95, 68, 14, .11); - border-radius: 9px; - background: color-mix(in srgb, var(--color-bg-container) 82%, transparent); -} - -.jx-ontologyManualReview-index { - position: absolute; - top: 10px; - left: 10px; - color: #b38a3d; - font-family: var(--font-family-number); - font-size: 10px; - font-weight: 700; -} - -.jx-ontologyManualReview-card > strong { - display: block; - color: var(--color-tint-amber); - font-size: 12px; - line-height: 1.5; - overflow-wrap: anywhere; - word-break: break-word; -} - -.jx-ontologyManualReview-card dl { - display: grid; - gap: 5px; - margin: 8px 0 0; -} - -.jx-ontologyManualReview-card dl > div { - display: grid; - grid-template-columns: 52px minmax(0, 1fr); - gap: 7px; - font-size: 11px; - line-height: 1.5; -} - -.jx-ontologyManualReview-card dt { - color: #9b7f4c; -} - -.jx-ontologyManualReview-card dd { - margin: 0; - color: var(--color-tint-amber); - word-break: break-word; - overflow-wrap: anywhere; -} - -.jx-ontologyRevision-actions { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 12px 14px; - border-top: 1px solid rgba(21, 45, 74, .09); - background: var(--color-bg-container); -} - -.jx-ontologyRevision-actions > span { - color: var(--color-text-tertiary); - font-size: 11px; - line-height: 1.45; -} - -.jx-ontologyRevision-actions .ant-btn { - flex: 0 0 auto; - border-radius: 9px; - box-shadow: none; -} - -@media (max-width: 640px) { - .jx-ontologyRevision-head, - .jx-ontologyRevision-actions { - align-items: flex-start; - flex-direction: column; - } - - .jx-ontologyRevision-actions .ant-btn { - width: 100%; - } - - .jx-ontologyPassResult-summary { - grid-template-columns: 1fr; - } -} - -.jx-ontologyTagSelect { - display: flex; - flex-direction: column; - gap: 9px; - width: 100%; -} - -.jx-ontologyTagSelect > .ant-select { - width: 100%; -} - -.jx-ontologyTagSelect-option { - display: flex; - flex-direction: column; - gap: 6px; - padding: 4px 2px; - white-space: normal; -} - -.jx-ontologyTagSelect-optionHead { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.jx-ontologyTagSelect-definition { - display: block; - font-size: 12px; - line-height: 1.5; -} - -.jx-ontologyTagSelect-triggered { - display: flex; - align-items: flex-start; - gap: 8px; - padding: 9px 11px; - border: 1px solid var(--color-primary-bg); - border-radius: var(--radius-sm); - background: var(--color-primary-light); -} - -.jx-ontologyTagSelect-triggered > .ant-typography { - flex: 0 0 auto; - line-height: 22px; -} - -.jx-ontologyTagSelect-triggered > .ant-space { - min-width: 0; -} - -.jx-ontologyValidationModal .ant-modal-body { - max-height: calc(100vh - 210px); - overflow-y: auto; - padding-right: 4px; -} - -.jx-ontologyValidation { - display: flex; - flex-direction: column; - gap: 18px; - padding-top: 4px; -} - -.jx-ontologyValidation-summary { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 10px; -} - -.jx-ontologyValidation-count { - min-height: 76px; - padding: 12px 14px; - border: 1px solid var(--color-border); - border-radius: var(--radius-sm); - background: linear-gradient(145deg, var(--color-bg-container), var(--color-bg-gray)); - display: flex; - flex-direction: column; - justify-content: center; -} - -.jx-ontologyValidation-count > span { - color: var(--color-text); - font-family: var(--font-family-number); - font-size: 24px; - font-weight: 700; - line-height: 1.15; -} - -.jx-ontologyValidation-count--error { - border-color: var(--color-error-bg); - background: var(--color-error-light); -} - -.jx-ontologyValidation-count--error > span { color: var(--color-error-active); } - -.jx-ontologyValidation-count--warning { - border-color: var(--color-warning-bg); - background: var(--color-warning-light); -} - -.jx-ontologyValidation-count--warning > span { color: var(--color-warning-active); } - -.jx-ontologyValidation-section > .ant-typography { - margin: 0 0 10px; -} - -.jx-ontologyValidation-issues { - display: flex; - flex-direction: column; - gap: 8px; -} - -.jx-ontologyValidation-issue { - display: flex; - gap: 10px; - padding: 12px 14px; - border: 1px solid var(--color-border); - border-left-width: 3px; - border-radius: var(--radius-sm); - background: var(--color-bg-container); -} - -.jx-ontologyValidation-issue--error { border-left-color: var(--color-error); } -.jx-ontologyValidation-issue--warning { border-left-color: var(--color-warning); } -.jx-ontologyValidation-issue--error .jx-ontologyValidation-issueIcon { color: var(--color-error); } -.jx-ontologyValidation-issue--warning .jx-ontologyValidation-issueIcon { color: var(--color-warning-active); } - -.jx-ontologyValidation-issueIcon { - margin-top: 4px; - font-size: 16px; -} - -.jx-ontologyValidation-issueBody { min-width: 0; flex: 1; } -.jx-ontologyValidation-issueMessage.ant-typography { margin: 7px 0 0; color: var(--color-text-secondary); } - -.jx-ontologyValidation-mcpSuggestions { - display: flex; - flex-direction: column; - gap: 8px; - margin-top: 11px; - padding: 11px 12px; - border: 1px solid var(--color-success-bg); - border-radius: var(--radius-sm); - background: var(--color-success-light); -} - -.jx-ontologyValidation-mcpCard { - display: grid; - grid-template-columns: minmax(190px, .8fr) minmax(0, 1.2fr); - gap: 10px; - align-items: start; - padding-top: 8px; - border-top: 1px solid var(--color-border); -} - -.jx-ontologyValidation-mcpCard > div:first-child { - display: flex; - flex-direction: column; - gap: 3px; - min-width: 0; -} - -.jx-ontologyValidation-mcpCard .ant-typography code { font-size: 11px; } - -.jx-ontologyValidation-suggestions { - padding: 14px 16px; - border: 1px solid var(--color-primary-bg); - border-radius: var(--radius-sm); - background: var(--color-primary-light); -} - -.jx-ontologyValidation-suggestions ol { - margin: 0; - padding-left: 24px; -} - -.jx-ontologyValidation-suggestions li { - padding: 4px 0 4px 4px; - color: var(--color-text-secondary); -} - -.jx-ontologyValidation-detected { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 10px; -} - -.jx-ontologyValidation-detected > div { - display: flex; - flex-direction: column; - gap: 9px; - min-width: 0; - padding: 12px; - border-radius: var(--radius-sm); - background: var(--color-bg-gray); -} - -.jx-ontologyValidation-copy { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 7px; - color: var(--color-success-active); - font-size: 12px; -} - -.jx-ontologyDetailDrawer .ant-drawer-body { - background: var(--color-bg-gray); -} - -.jx-ontologyDetail { - display: flex; - flex-direction: column; - gap: 16px; -} - -.jx-ontologyDetail-hero { - position: relative; - overflow: hidden; - display: flex; - gap: 16px; - padding: 22px 24px; - border: 1px solid rgba(18, 109, 255, .16); - border-radius: var(--radius-md); - background: - radial-gradient(circle at 92% 12%, rgba(118, 85, 250, .12), transparent 30%), - linear-gradient(135deg, var(--color-bg-container) 24%, var(--color-primary-light)); - box-shadow: var(--shadow-card); -} - -.jx-ontologyDetail-heroIcon { - width: 52px; - height: 52px; - border-radius: 16px; - display: grid; - place-items: center; - flex: 0 0 52px; - background: var(--color-primary); - color: var(--color-text-white); - box-shadow: 0 10px 24px rgba(18, 109, 255, .22); - font-size: 24px; -} - -.jx-ontologyDetail-heroBody { min-width: 0; } -.jx-ontologyDetail-heroBody h3.ant-typography { margin: 9px 0 5px; } -.jx-ontologyDetail-heroBody p.ant-typography { margin: 0; color: var(--color-text-secondary); } - -.jx-ontologyDetail-stats { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 10px; -} - -.jx-ontologyDetail-stats > div { - display: grid; - grid-template-columns: 32px auto; - grid-template-rows: auto auto; - column-gap: 10px; - align-items: center; - min-height: 78px; - padding: 12px 16px; - border: 1px solid var(--color-border); - border-radius: var(--radius-sm); - background: var(--color-bg-container); - box-shadow: var(--shadow-card); -} - -.jx-ontologyDetail-stats .anticon { - grid-row: 1 / span 2; - color: var(--color-primary); - font-size: 23px; -} - -.jx-ontologyDetail-stats strong { - align-self: end; - font-family: var(--font-family-number); - font-size: 23px; - line-height: 1.15; -} - -.jx-ontologyDetail-stats span { align-self: start; color: var(--color-text-tertiary); font-size: 12px; } - -.jx-ontologyDetail-tabs { - padding: 0 18px 18px; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: var(--color-bg-container); - box-shadow: var(--shadow-card); -} - -.jx-ontologyDetail-tabs > .ant-tabs-nav { margin-bottom: 18px; } - -.jx-ontologyDetail-overview, -.jx-ontologyDetail-stack, -.jx-ontologyDetail-relationList, -.jx-ontologyDetail-validationList { - display: flex; - flex-direction: column; - gap: 12px; -} - -.jx-ontologyDetail-cardGrid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; -} - -.jx-ontologyDetail-concept, -.jx-ontologyDetail-ruleCard, -.jx-ontologyDetail-workflowCard, -.jx-ontologyDetail-relationList > .ant-card { - border-color: var(--color-border); - box-shadow: 0 2px 8px rgba(15, 23, 42, .035); -} - -.jx-ontologyDetail-cardHead { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 12px; - margin-bottom: 12px; -} - -.jx-ontologyDetail-cardHead h5.ant-typography { margin: 0 0 4px; } -.jx-ontologyDetail-concept .ant-typography { overflow-wrap: anywhere; } - -.jx-ontologyDetail-line { - display: grid; - grid-template-columns: 86px minmax(0, 1fr); - gap: 10px; - align-items: start; - margin-top: 9px; -} - -.jx-ontologyDetail-relationFlow { - display: grid; - grid-template-columns: minmax(140px, 1fr) minmax(130px, auto) minmax(140px, 1fr); - gap: 12px; - align-items: center; - margin-bottom: 12px; -} - -.jx-ontologyDetail-relationFlow > div:not(.jx-ontologyDetail-predicate) { - display: flex; - flex-direction: column; - align-items: center; - gap: 5px; - padding: 12px; - border-radius: var(--radius-sm); - background: var(--color-bg-gray); - text-align: center; -} - -.jx-ontologyDetail-predicate { - position: relative; - color: var(--color-primary); - text-align: center; -} - -.jx-ontologyDetail-predicate::before, -.jx-ontologyDetail-predicate::after { - content: ''; - position: absolute; - top: 50%; - width: 18px; - height: 1px; - background: var(--color-primary-disabled); -} - -.jx-ontologyDetail-predicate::before { left: -5px; transform: translateX(-100%); } -.jx-ontologyDetail-predicate::after { right: -5px; transform: translateX(100%); } - -.jx-ontologyDetail-schema { margin-top: 12px; } -.jx-ontologyDetail-schema pre, -.jx-ontologyDetail-raw pre { - margin: 7px 0 0; - padding: 14px; - border: 1px solid #263247; - border-radius: var(--radius-sm); - background: #172033; - color: #d8e4f8; - font-family:var(--font-family-mono); - font-size: 12px; - line-height: 1.65; - white-space: pre-wrap; - overflow-wrap: anywhere; -} - -.jx-ontologyDetail-workflowCard .ant-card-body { display: flex; gap: 16px; } -.jx-ontologyDetail-workflowIndex { - width: 42px; - flex: 0 0 42px; - color: var(--color-primary-disabled); - font-family: var(--font-family-number); - font-size: 30px; - font-weight: 700; - line-height: 1; -} -.jx-ontologyDetail-workflowBody { min-width: 0; flex: 1; } - -.jx-ontologyDetail-validationItem { - display: flex; - gap: 10px; - padding: 10px 12px; - border-radius: var(--radius-sm); -} - -.jx-ontologyDetail-validationItem--error { background: var(--color-error-light); color: var(--color-error-active); } -.jx-ontologyDetail-validationItem--warning { background: var(--color-warning-light); color: var(--color-warning-active); } -.jx-ontologyDetail-validationItem p.ant-typography { margin: 5px 0 0; color: var(--color-text-secondary); } - -.jx-ontologyDetail-rawHead { - display: flex; - justify-content: space-between; - gap: 16px; - align-items: center; -} - -.jx-ontologyDetail-raw pre { - max-height: calc(100vh - 330px); - overflow: auto; -} - -.jx-ontologyVersionManager-content { - display: flex; - flex-direction: column; - gap: 16px; -} - -.jx-ontologyVersionManager-summary { - display: flex; - align-items: center; - gap: 14px; - padding: 16px; - border: 1px solid var(--color-border); - border-radius: var(--radius-sm); - background: var(--color-bg-gray); -} - -.jx-ontologyVersionManager-summaryIcon { - width: 42px; - height: 42px; - display: grid; - place-items: center; - flex: 0 0 42px; - border-radius: var(--radius-sm); - background: var(--color-primary-light); - color: var(--color-primary); - font-size: 20px; -} - -.jx-ontologyVersionManager-summaryBody { - display: flex; - flex-direction: column; - gap: 3px; - min-width: 0; -} - -.jx-ontologyVersionManager-summaryBody h5.ant-typography { - margin: 0; -} - -.jx-ontologyVersionManager-versionId { - max-width: 150px; - font-size: 11px; -} - -.jx-ontologyVersionManager-issueCount { - font-size: 11px; -} - -.jx-ontologyVersionManager-footnote { - align-self: flex-end; - font-size: 12px; -} - -.jx-ontologyDetail-module { - display: flex; - flex-direction: column; - gap: 14px; -} - -.jx-ontologyDetail-moduleHead { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 16px; - padding: 12px 14px; - border: 1px solid var(--color-primary-bg); - border-radius: var(--radius-sm); - background: var(--color-primary-light); -} - -.jx-ontologyDetail-moduleHead > div { - display: flex; - flex-direction: column; - gap: 3px; - min-width: 0; -} - -.jx-ontologyDetail-moduleHead > .ant-btn { - flex: 0 0 auto; -} - -.jx-ontologyEditorModal .ant-modal-body { - max-height: calc(100vh - 190px); - overflow-y: auto; - padding-right: 6px; -} - -.jx-ontologyEditor-form { - display: flex; - flex-direction: column; - gap: 16px; - margin-top: 16px; -} - -.jx-ontologyEditor-versionCard { - border-color: var(--color-primary-bg); - background: var(--color-primary-light); -} - -.jx-ontologyEditor-versionCard .ant-form-item { - margin-bottom: 0; -} - -.jx-ontologyEditor-section { - display: flex; - flex-direction: column; - gap: 14px; -} - -.jx-ontologyListPagination { - display: flex; - width: 100%; - justify-content: flex-end; - overflow-x: auto; - padding: 4px 0 2px; -} - -.jx-ontologyListPagination > .ant-pagination { - margin-left: auto; -} - -.jx-ontologyEditor-listHead { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 12px; -} - -.jx-ontologyEditor-listHead h5.ant-typography, -.jx-ontologyEditor-schemaHead p.ant-typography { - margin: 0; -} - -.jx-ontologyEditor-listHead > div, -.jx-ontologyEditor-schemaHead > div { - display: flex; - flex-direction: column; - gap: 3px; -} - -.jx-ontologyEditor-itemCard { - border-color: var(--color-border); - box-shadow: 0 3px 12px rgba(15, 23, 42, .04); -} - -.jx-ontologyEditor-itemCard > .ant-card-head { - background: var(--color-bg-gray); -} - -.jx-ontologyEditor-schemaCard { - margin-top: 4px; - border-color: var(--color-primary-bg); - background: rgba(18, 109, 255, .025); -} - -.jx-ontologyEditor-schemaHead { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 16px; - margin-bottom: 14px; -} - -.jx-ontologyEditor-property, -.jx-ontologyEditor-trigger { - padding: 12px 12px 0; - border: 1px solid var(--color-border); - border-radius: var(--radius-sm); - background: var(--color-bg-container); -} - -.jx-ontologyEditor-propertyRemove { - display: flex; - justify-content: flex-end; - padding-top: 23px; -} - -.jx-ontologyEditor-workflowLists { - margin-top: 14px; -} - -.jx-ontologyEditor-errorList { - margin: 8px 0 0; - padding-left: 20px; -} - -.jx-ontologyEditor-errorList li + li { - margin-top: 6px; -} - -@media (max-width: 760px) { - .jx-ontologyValidation-summary, - .jx-ontologyDetail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .jx-ontologyValidation-detected, - .jx-ontologyDetail-cardGrid { grid-template-columns: 1fr; } - .jx-ontologyValidation-mcpCard { grid-template-columns: 1fr; } - .jx-ontologyDetail-hero { padding: 18px; } - .jx-ontologyDetail-relationFlow { grid-template-columns: 1fr; } - .jx-ontologyDetail-predicate::before, - .jx-ontologyDetail-predicate::after { display: none; } - .jx-ontologyDetail-workflowCard .ant-card-body { flex-direction: column; } - .jx-ontologyDetail-line { grid-template-columns: 72px minmax(0, 1fr); } - .jx-ontologyDetail-moduleHead, - .jx-ontologyEditor-schemaHead { flex-direction: column; } - .jx-ontologyDetail-moduleHead > .ant-btn { width: 100%; } - .jx-ontologyListPagination { justify-content: center; } - .jx-ontologyListPagination > .ant-pagination { margin: 0 auto; } - .jx-ontologyEditor-propertyRemove { padding-top: 0; } - .jx-ontologyVersionManager-summary { align-items: flex-start; } -} diff --git a/src/frontend/src/styles/project-rail.css b/src/frontend/src/styles/project-rail.css index 13c93b8e..1db6c11a 100644 --- a/src/frontend/src/styles/project-rail.css +++ b/src/frontend/src/styles/project-rail.css @@ -218,6 +218,7 @@ .jx-projectWorkspaceRail { flex:0 0 clamp(360px, 32%, 440px); min-width:0; padding:16px 16px 16px 0; overflow-y:auto; } .jx-projectWorkspaceRail-toggle.ant-btn { display:none; } .jx-projectWorkspaceRail-body { min-width:0; } +.jx-projectRail-inlineLink.ant-btn { height:auto; padding:0; font-size:inherit; } .jx-projectRail-cardHeader { gap:8px; min-width:0; } .jx-projectRail-cardTitle { min-width:0; overflow-wrap:anywhere; } .jx-projectRail-cardTitle .ant-tag { max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; } diff --git a/src/frontend/src/styles/project-skeleton.css b/src/frontend/src/styles/project-skeleton.css index 62853d8f..71eb02d9 100644 --- a/src/frontend/src/styles/project-skeleton.css +++ b/src/frontend/src/styles/project-skeleton.css @@ -16,3 +16,13 @@ .jx-projects-skHeading { flex-basis: 100%; } .jx-projects-skeletonContent .jx-projects-grid { grid-template-columns: minmax(0, 1fr); } } +.jx-projectHeader-skBack { width: 88px; height: 16px; margin: 8px 0 16px; } +.jx-projectHeader-skTitle { width: 200px; max-width: 60%; height: 28px; } +.jx-projectHeader-skAction { width: 24px; height: 24px; } +.jx-projectRail-skTitle { width: 72px; height: 16px; } +.jx-projectRail-skAction { width: 24px; height: 24px; } +.jx-projectConversationHistory-item--skeleton { cursor: default; pointer-events: none; } +.jx-projectConversationHistory-skIcon { width: 16px; height: 16px; flex-shrink: 0; } +.jx-projectConversationHistory-skTitle { width: 48%; height: 16px; } +.jx-projectConversationHistory-skMeta { width: 32%; height: 12px; } +.jx-projectEnvironment-skMode { width: 100%; height: 64px; border-radius: var(--radius-sm); } diff --git a/src/frontend/src/styles/settings.css b/src/frontend/src/styles/settings.css index 79a87db2..ac6f8bca 100644 --- a/src/frontend/src/styles/settings.css +++ b/src/frontend/src/styles/settings.css @@ -684,11 +684,42 @@ .jx-settings-nav .jx-settings-navTitle { display: none; } + .jx-settings-nav { + scrollbar-width: none; + } + .jx-settings-nav::-webkit-scrollbar { + display: none; + } .jx-settings-navItem { flex-shrink: 0; + min-height: 44px; } .jx-settings-navIndicator { display: none; } + /* v2：不用描边按钮；退出登录是破坏性操作，走浅灰填充 + 红色文字。 + antd 的 :hover / :active 规则是 (0,4,0)，直接写颜色压不住（触屏点按后 :hover 常驻， + 会变回蓝色描边），所以改它读取的按钮变量；变量本身由 + .ant-btn.ant-btn-color-default.ant-btn-variant-outlined (0,3,0) 定义，这里要压过它。 */ + body .jx-settings-logoutBtn.ant-btn.ant-btn-variant-outlined { + --ant-btn-border-color: transparent; + --ant-btn-border-color-hover: transparent; + --ant-btn-border-color-active: transparent; + --ant-btn-bg-color: var(--color-bg-gray); + --ant-btn-bg-color-hover: var(--color-bg-gray); + --ant-btn-bg-color-active: var(--color-fill-hover); + --ant-btn-text-color: var(--color-error-text); + --ant-btn-text-color-hover: var(--color-error-text); + --ant-btn-text-color-active: var(--color-error-text); + border-color: transparent; + background: var(--color-bg-gray); + color: var(--color-error-text); + } + body .jx-settings-logoutBtn.ant-btn:hover { + border-color: transparent; + background: var(--color-bg-gray); + color: var(--color-error-text); + } + .jx-settings-shell .jx-settings-page { width: 100%; } diff --git a/src/frontend/src/styles/sidebar-history.css b/src/frontend/src/styles/sidebar-history.css index e5177a1f..fe8c0f32 100644 --- a/src/frontend/src/styles/sidebar-history.css +++ b/src/frontend/src/styles/sidebar-history.css @@ -295,6 +295,12 @@ .jx-historyItem:hover .jx-historyActions, .jx-historyItem.active .jx-historyActions{ opacity:1; pointer-events:auto; } .jx-historyItem.editing .jx-historyActions{ display:none; } +/* 触屏没有悬停：只在当前对话上显示会让其余对话无法重命名 / 删除，这里常显。 */ +@media (hover: none){ + .jx-historyActions{ opacity:1; pointer-events:auto; } + .jx-historyItem .jx-historyMain{ padding-right:36px; } + .jx-historyActions .jx-historyMoreBtn{ width:32px; height:32px; } +} .jx-historyItem:hover .jx-historyMain, .jx-historyItem.active .jx-historyMain{ padding-right:28px; } .jx-historyMoreBtn{ @@ -320,7 +326,21 @@ transform-origin:left center; animation:jx-kf-renameIn var(--motion-duration-fast) var(--motion-ease-standard) both; } -.jx-historyEditInput.ant-input{ border-radius:8px; border-color:var(--color-border); } +/* 原地编辑：不再套一层白色输入框，整行转为灰底，文字与标题同位同字号 */ +.jx-historyItem.editing, +.jx-historyItem.editing:hover{ background:var(--color-fill); cursor:text; } +.jx-historyEditInput.ant-input, +.jx-historyEditInput.ant-input:hover, +.jx-historyEditInput.ant-input:focus{ + padding:0; border:none; border-radius:0; box-shadow:none; + background:transparent; + font-size:14px; font-weight:500; line-height:20px; + color:var(--color-text); +} +.jx-historyEditInput.ant-input::selection{ + background:color-mix(in srgb, var(--color-primary) 32%, transparent); + color:var(--color-text); +} /* 关键词高亮：被 utils/highlight.ts 用于侧栏 + 搜索弹窗的高亮 span */ .jx-searchHighlight{ color:var(--color-primary); font-weight:600; } diff --git a/src/frontend/src/styles/skeleton.css b/src/frontend/src/styles/skeleton.css index 83c3d155..9eda8e0d 100644 --- a/src/frontend/src/styles/skeleton.css +++ b/src/frontend/src/styles/skeleton.css @@ -27,3 +27,13 @@ from { transform:translateX(-100%); } to { transform:translateX(100%); } } + +/* Stacked text-line placeholders (SkeletonLines). */ +.jx-skeletonLines { display:grid; gap:8px; } +.jx-skeletonLines-line { width:100%; height:14px; } +.jx-skeletonLines-line:last-child:not(:first-child) { width:64%; } + +/* Failed load: title, reason, retry (LoadError). */ +.jx-loadError { display:flex; flex-direction:column; align-items:flex-start; gap:8px; } +.jx-loadError-title { font-size:14px; font-weight:600; color:var(--color-text); } +.jx-loadError-reason { font-size:12px; color:var(--color-text-tertiary); line-height:1.5; overflow-wrap:anywhere; } diff --git a/src/frontend/src/styles/tool.css b/src/frontend/src/styles/tool.css index c3dcb309..0df92282 100644 --- a/src/frontend/src/styles/tool.css +++ b/src/frontend/src/styles/tool.css @@ -94,11 +94,9 @@ color: color-mix(in srgb, var(--color-text) 65%, transparent); flex-shrink: 0; } -/* 运行中工具行的文字流光 — 单色灰阶。 - 隐藏工具调用时那行折叠摘要（--live）共用同一套：运行中它们是唯一在动的字。 */ +/* 运行中工具行的文字流光 — 单色灰阶。 */ /* motion-keep: 工具运行中的文字流光，定格会变成一段忽深忽浅的灰字 */ -.jx-tcr-prefix--shimmer, -.jx-inlineSummaryText--live { +.jx-tcr-prefix--shimmer { background: linear-gradient(90deg, color-mix(in srgb, var(--color-text) 40%, transparent) 0%, color-mix(in srgb, var(--color-text) 88%, transparent) 50%, @@ -231,8 +229,7 @@ /* ── Elapsed timer (running tool card + pending indicator) ── */ .jx-tcr-timer, -.jx-elapsedTimer, -.jx-inlineSummaryTimer { +.jx-elapsedTimer { padding-left: var(--space-sm); font-family: var(--font-family-number); font-size: 12px; @@ -390,10 +387,8 @@ .jx-trs-bodyWrap--open { opacity: 1; } -/* .jx-expandWrap 是隐藏工具调用时那条就地折叠用的通用外壳（variables.css）， - 两种外壳都靠这层 overflow:hidden 做 grid-rows 高度动画 */ -.jx-trs-bodyWrap > .jx-trs-body, -.jx-expandWrap > .jx-trs-body { +/* 靠这层 overflow:hidden 做 grid-rows 高度动画 */ +.jx-trs-bodyWrap > .jx-trs-body { overflow: hidden; } /* No guide line or step dots: each row is icon · action · argument · time. @@ -1347,115 +1342,6 @@ .jx-thinkingContent::-webkit-scrollbar{width:5px} .jx-thinkingContent::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-drag);border-radius:3px} -/* ══════════════════════════════════════════════════════════════════════════ - Inline Summary + Canvas Detail (tool progress & thinking) - ══════════════════════════════════════════════════════════════════════════ */ - -/* ── Brand loader: unified active (animated GIF) + done (slate static) ───── - Replaces the previous jx-pulseDot + jx-breatheOrbs indicators. - Shape continuity: the GIF ends on the same mark we show in done state — - so active→done reads as "drawing → settled", not a hard cut. ── */ -.jx-brandLoader{ - display:inline-block; - flex-shrink:0; - background-image:url('/loader.gif'); - background-size:contain; - background-repeat:no-repeat; - background-position:center; -} -.jx-brandLoader--done{ - background-image:url('/loader-done.png'); - animation:jxBrandSettle .24s ease-out; -} -@keyframes jxBrandSettle{ - from{opacity:0;transform:scale(.85);} - to {opacity:1;transform:scale(1);} -} -/* motion-stop: 减弱动效下定格在终态（同名关键帧后定义者胜，用到它的规则一起生效） */ -@media (prefers-reduced-motion: reduce) { - @keyframes jxBrandSettle { from, to { opacity:1;transform:scale(1) } } -} - -/* 深色下把「已完成」定格标记提亮一档。 - 它是一张单一色值（slate-400 #94A3B8）铺满的 PNG，CSS 改不了图里的颜色，只能上滤镜； - ×1.15 后约 #AABBD4，与旁边的浅色文字同一亮度带，仍明显区别于运行中的品牌蓝动图。 - ⚠️ 只作用于 --done：运行中的动图保持原样，不要给 .jx-brandLoader 本体加滤镜。 */ -:root[data-theme="dark"] .jx-brandLoader--done{ - filter:brightness(1.15); -} - -/* ── Inline summary row ────────────────── */ -.jx-inlineSummary{ - display:inline-flex; - align-items:center; - gap:6px; - padding:2px 0; - cursor:pointer; - user-select:none; - max-width:100%; - margin:2px 0; - background:none; - border:none; -} -.jx-inlineSummary:hover .jx-inlineSummaryText{ - color:color-mix(in srgb, var(--color-text-secondary) 72%, transparent); -} -.jx-inlineSummaryText{ - font-size:12.5px; - color:color-mix(in srgb, var(--color-text-placeholder) 85%, transparent); - font-weight:400; - white-space:nowrap; - overflow:hidden; - text-overflow:ellipsis; - min-width:0; - transition:color .15s; -} -/* 箭头兼折叠指示：折叠 0° / 展开 90°，与本行其它过渡同一档速度 */ -.jx-inlineSummaryArrow{ - font-size:9px; - color:color-mix(in srgb, var(--color-text-placeholder) 60%, transparent); - flex-shrink:0; - /* 与执行卡的箭头同口径：常驻箭头是噪音，留位不留形，悬浮/键盘聚焦才淡入。 */ - opacity:0; - transition:color .15s, opacity .15s ease, transform .2s var(--motion-ease-standard); -} -.jx-inlineSummary:hover .jx-inlineSummaryArrow, -.jx-inlineSummary:focus-visible .jx-inlineSummaryArrow{ - opacity:1; - color:color-mix(in srgb, var(--color-text-tertiary) 75%, transparent); -} -/* 深色下这行「已深度思考 N 秒 / 已调用 N 个工具」的折叠摘要要抬一档。 - 浅色档用 --color-text-placeholder 是对的（安静、不抢正文）；但深色档该令牌是 #5F6B7D， - 本职是输入框占位符，拿来当说明文字压在暗底上只有 2.65 的对比度（箭头 1.94），低于可读下限。 - 换成 --color-text-tertiary 后约 4.9 / 3.5，仍是最安静的一档，但看得清。浅色不动。 */ -:root[data-theme="dark"] .jx-inlineSummaryText{ - color:color-mix(in srgb, var(--color-text-tertiary) 92%, transparent); -} -:root[data-theme="dark"] .jx-inlineSummaryArrow{ - color:color-mix(in srgb, var(--color-text-tertiary) 70%, transparent); -} -/* 运行中的流光（--live 复用 .jx-tcr-prefix--shimmer）要把 color 抢回来：上面这几条 - 摘要行的颜色令牌排得更靠后、深色档特异性还更高，会把流光规则里的 color:transparent - 压掉，只剩带前缀的 -webkit-text-fill-color 单腿撑着——哪天它被当作冗余清理，字就变回 - 纯色、流光静音。 */ -.jx-inlineSummary .jx-inlineSummaryText--live, -:root[data-theme="dark"] .jx-inlineSummaryText--live{ - color:transparent; -} -/* ── 就地折叠（隐藏工具调用时点摘要行不再跳右侧 Canvas）────────────────── - 折叠态的那一行外观一个像素都不改；点开后在原位撑高。展开体本身复用 - .jx-trs-body（导轨 + 嵌套行紧凑化 + 步骤入场都写在那边）——两种模式展开 - 后看到的是同一批 ToolCallRow，密度也必须是同一档。 */ -.jx-inlineFold{ - align-self:stretch; - max-width:100%; -} -/* 内容超出限高才挂遮罩——恒挂会把短内容的最后一行也啃掉一截，看着像渲染缺陷 */ -.jx-inlineFold-fade{ - -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent 100%); - mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent 100%); -} - /* ── Thinking detail（子智能体步骤里的思考正文，见 ThinkingStepRow）── */ .jx-thinkingDetailBody{ font-size:13px; @@ -1482,7 +1368,7 @@ /* ══════════════════════════════════════════════════════════════════════ Code Execution Self-Contained Card (.jx-ce-*) Light theme — matches HugAgentOS blue-accent design system - Renders as its own collapsible card (bypasses ToolProgressInline) + Renders as its own collapsible card ══════════════════════════════════════════════════════════════════════ */ /* ── Card Container ── */ diff --git a/src/frontend/src/styles/variables.css b/src/frontend/src/styles/variables.css index b545a2f1..90e9f66e 100644 --- a/src/frontend/src/styles/variables.css +++ b/src/frontend/src/styles/variables.css @@ -110,6 +110,11 @@ --color-error-bg:#FFDFDF; --color-error-light:#FFF0F0; + /* ── 语义前景（v2）：语义色当文字时用 *-text，保证对比度 ── */ + --color-success-text:#067A5E; + --color-warning-text:#B45309; + --color-error-text:#D92D20; + /* ── Icon 色 ── */ --color-icon-blue:#126DFF; --color-icon-red:#F25149; @@ -303,6 +308,10 @@ --color-error-bg:rgba(255,107,107,.16); --color-error-light:rgba(255,107,107,.10); + --color-success-text:#3DDBB0; + --color-warning-text:#FFC26B; + --color-error-text:#FF8A80; + --color-icon-blue:#3E8BFF; --color-icon-red:#FF6B6B; --color-icon-purple:#9578FF; diff --git a/src/frontend/src/styles/workspace-layout.css b/src/frontend/src/styles/workspace-layout.css index 92a8a788..22a43e93 100644 --- a/src/frontend/src/styles/workspace-layout.css +++ b/src/frontend/src/styles/workspace-layout.css @@ -8,6 +8,17 @@ overflow:hidden; } +/* 对话列：包住 .jx-content 与悬浮其上的运行监控栏，右侧面板（运行时间线、工具结果、 + * 提示词库）作为 .jx-mainRow 的兄弟项挤窄这一列，而不是滑到监控栏底下。 */ +.jx-conversationColumn{ + container:conversation-column / inline-size; + position:relative; + display:flex; + flex:1; + min-width:0; + min-height:0; +} + .jx-content{ flex:1; min-width:0; diff --git a/src/frontend/src/types/execution.ts b/src/frontend/src/types/execution.ts index 4dcdf145..c752e96d 100644 --- a/src/frontend/src/types/execution.ts +++ b/src/frontend/src/types/execution.ts @@ -66,6 +66,17 @@ export interface JobBrief { completed_at?: string | null; } +/** A sandbox command task of a chat (GET /v1/commands). */ +export interface CommandTaskBrief { + task_id: string; + command: string; + status: 'starting' | 'running' | 'completed' | 'failed' | 'cancelled' | 'unknown'; + exit_code?: number | null; + created_at?: string | null; + /** Handed to the background (run_in_background, or still running when the foreground wait ended). */ + background?: boolean; +} + // ── Autonomous Loop (long-running autonomous operation) ───────────────────── export interface LoopGoalSpec { objective: string; diff --git a/src/frontend/src/types/workspace.ts b/src/frontend/src/types/workspace.ts index 3fbbc172..26695adb 100644 --- a/src/frontend/src/types/workspace.ts +++ b/src/frontend/src/types/workspace.ts @@ -7,7 +7,8 @@ export type AbilityTabKey = 'agents' | 'skills' | 'mcp' | 'plugins'; // ─── Projects (Claude-style workspaces) ───────────────────────────────────── -export type ProjectKind = 'personal' | EditionProjectKind; +/** ``local`` projects are desktop folders on this machine. */ +export type ProjectKind = 'personal' | 'local' | EditionProjectKind; export type ProjectPermission = 'admin' | 'edit' | 'view' | 'none'; @@ -23,6 +24,8 @@ export interface ProjectItem extends EditionProjectFields { linked_folder_id: string | null; /** Linked folder name (for frontend display) */ folder_name: string | null; + /** Absolute folder path on this machine; local projects only. */ + local_path?: string | null; instructions: string; instructions_source?: 'AGENTS.md' | 'legacy' | 'missing'; instructions_revision?: string; diff --git a/src/frontend/src/utils/executionRuns.ts b/src/frontend/src/utils/executionRuns.ts index dd23062c..adbeeb77 100644 --- a/src/frontend/src/utils/executionRuns.ts +++ b/src/frontend/src/utils/executionRuns.ts @@ -2,7 +2,7 @@ import type { ChatMessage } from '../types'; import type { ShellStep } from '../components/tool/ToolRunShell'; /** Shared grouping for the main transcript and Canvas subagent transcript. */ -export function groupExecutionRuns(m: ChatMessage, dispatchProcessVisible: boolean) { +export function groupExecutionRuns(m: ChatMessage) { const segs = m.segments || []; const isEmptyText = (i: number): boolean => { const segment = segs[i]; @@ -20,11 +20,7 @@ export function groupExecutionRuns(m: ChatMessage, dispatchProcessVisible: boole const canStartRun = (idx: number): boolean => { const s = segs[idx]; if (!s) return false; - if (s.type === 'tool' || s.type === 'compaction') return true; - // Only ON mode lets a thinking segment anchor a run; OFF mode - // keeps standalone ThinkingInline as before. - if (dispatchProcessVisible && s.type === 'thinking') return true; - return false; + return s.type === 'tool' || s.type === 'compaction' || s.type === 'thinking'; }; let i = 0; @@ -54,12 +50,10 @@ export function groupExecutionRuns(m: ChatMessage, dispatchProcessVisible: boole endIdx = i; i++; } else if (sk.type === 'thinking') { - if (dispatchProcessVisible) { - const content = sk.content || ''; - const active = !!(m.isStreaming && !segs.slice(i + 1).some(seg => seg.type === 'text')); - steps.push({ kind: 'thinking', content, active, key: `${m.uid}-seg-${i}` }); - endIdx = i; - } + const content = sk.content || ''; + const active = !!(m.isStreaming && !segs.slice(i + 1).some(seg => seg.type === 'text')); + steps.push({ kind: 'thinking', content, active, key: `${m.uid}-seg-${i}` }); + endIdx = i; if (i !== anchor) suppressedIdx.add(i); i++; } else if (isEmptyText(i)) { @@ -69,15 +63,6 @@ export function groupExecutionRuns(m: ChatMessage, dispatchProcessVisible: boole break; } } - // OFF mode un-suppresses trailing empty-text so the inline - // StreamWaitIndicator can host there. ON mode keeps them - // suppressed — the shell owns the wait state and an empty - // bubble below it would just add visual noise. - if (endIdx >= 0 && !dispatchProcessVisible) { - for (let j = endIdx + 1; j < i; j++) { - if (isEmptyText(j)) suppressedIdx.delete(j); - } - } if (steps.length > 0) { runs.push({ anchor, endIdx, steps, tools }); } else { @@ -87,13 +72,10 @@ export function groupExecutionRuns(m: ChatMessage, dispatchProcessVisible: boole } } - // ON mode owns the wait state inside the shell, so any stray - // empty-text segments outside a run would just paint an empty - // bubble. Suppress them. - if (dispatchProcessVisible) { - for (let j = 0; j < segs.length; j++) { - if (isEmptyText(j)) suppressedIdx.add(j); - } + // The shell owns the wait state, so any stray empty-text segments + // outside a run would just paint an empty bubble. Suppress them. + for (let j = 0; j < segs.length; j++) { + if (isEmptyText(j)) suppressedIdx.add(j); } return { runs, suppressedIdx }; } diff --git a/src/frontend/src/utils/toolMeta.ts b/src/frontend/src/utils/toolMeta.ts index 3f1be69e..1369ef04 100644 --- a/src/frontend/src/utils/toolMeta.ts +++ b/src/frontend/src/utils/toolMeta.ts @@ -15,8 +15,8 @@ import { usePluginUiStore } from '../stores/pluginUiStore'; import { TOOL_ICONS, TOOL_NAME_OVERRIDES } from './constants'; /** - * 一个工具对外显示的名字：这条链路原先在 ToolCallRow / ToolProgressInline / - * ToolRunShell 里各抄了一遍，收敛到这里，三处口径不会再走偏。 + * 一个工具对外显示的名字：这条链路原先在 ToolCallRow / ToolRunShell 等处 + * 各抄了一遍，收敛到这里，各处口径不会再走偏。 * 后端下发的 displayName → 宿主覆盖表 → 会话内动态名（MCP 连接器）→ 裸工具名。 */ export function resolveToolDisplayName( diff --git a/src/frontend/src/workbench/ActivityControls.tsx b/src/frontend/src/workbench/ActivityControls.tsx index 6fabe307..09ddc869 100644 --- a/src/frontend/src/workbench/ActivityControls.tsx +++ b/src/frontend/src/workbench/ActivityControls.tsx @@ -2,6 +2,8 @@ import { useEffect, useMemo, useState } from 'react'; import { t } from '../i18n'; import { scopedActivityRequest, registerActivity, type ActivityContext } from './activityApi'; import { reloadActivity } from './activityStore'; +import { HostButton, HostCheckbox, HostHint, HostNotice, HostToolbar } from './ui'; +import './workspace.css'; const labels = {badge: '角标', notification: '通知', background: '后台运行'} as const; export function ActivityControls({context, declared, resourceId}: { @@ -50,14 +52,16 @@ export function ActivityControls({context, declared, resourceId}: { } const permissions = Object.keys(labels).filter(key => declared.includes(key)) as (keyof typeof labels)[]; if (!permissions.length) return null; - return <section aria-label={t('应用活动权限')}> - <p>{t('仅允许本应用已声明的能力。后台运行最多十五分钟，停止后释放资源。')}</p> - {permissions.map(permission => <label key={permission}><input type="checkbox" checked={selected.includes(permission)} - disabled={!ready || busy} onChange={event => setSelected(event.target.checked - ? [...selected,permission] : selected.filter(value => value !== permission))} />{t(labels[permission])}</label>)} - <button type="button" disabled={!ready || busy} onClick={() => void consent()}>{t('保存应用活动授权')}</button> - {resourceId && permissions.includes('background') && <button type="button" disabled={!ready || busy} - onClick={() => void start()}>{t('允许此资源后台运行')}</button>} - {error && <p role="alert">{error}</p>} + return <section aria-label={t('应用活动权限')} className="jx-workspaceActivity"> + <HostHint>{t('仅允许本应用已声明的能力。后台运行最多十五分钟，停止后释放资源。')}</HostHint> + <HostToolbar> + {permissions.map(permission => <HostCheckbox key={permission} checked={selected.includes(permission)} + disabled={!ready || busy} onChange={event => setSelected(event.target.checked + ? [...selected,permission] : selected.filter(value => value !== permission))}>{t(labels[permission])}</HostCheckbox>)} + <HostButton size="small" disabled={!ready || busy} onClick={() => void consent()}>{t('保存应用活动授权')}</HostButton> + {resourceId && permissions.includes('background') && <HostButton size="small" tone="text" disabled={!ready || busy} + onClick={() => void start()}>{t('允许此资源后台运行')}</HostButton>} + </HostToolbar> + {error && <HostNotice tone="error">{error}</HostNotice>} </section>; } diff --git a/src/frontend/src/workbench/ActivityPanel.tsx b/src/frontend/src/workbench/ActivityPanel.tsx index 229bae11..3843ab89 100644 --- a/src/frontend/src/workbench/ActivityPanel.tsx +++ b/src/frontend/src/workbench/ActivityPanel.tsx @@ -6,6 +6,7 @@ import { applicationText } from './externalApi'; import { useApplicationDirectory } from './catalog'; import { activityPath, activityRequest } from './activityApi'; import { reloadActivity, useActivity } from './activityStore'; +import { HostButton, HostNotice } from './ui'; /** All notification content is plain text. Open actions are resolved by the host. */ export function ActivityPanel({onOpen}: {onOpen: (applicationKey: string) => void}) { @@ -32,21 +33,21 @@ export function ActivityPanel({onOpen}: {onOpen: (applicationKey: string) => voi if (!value.notifications.length && !value.background.length && !error) return null; return <aside aria-label={t('应用活动')} className="jx-activityPanel"> <div aria-live="polite" aria-atomic="false"> - {value.notifications.map(n => <article key={n.id} aria-label={title(n.applicationKey) + ' · ' + n.title}> - <strong>{title(n.applicationKey)} · {n.title}</strong><p>{n.body}</p> - <button type="button" onClick={() => onOpen(n.applicationKey)}>{t('打开应用')}</button> - <button type="button" disabled={busy === n.id} + {value.notifications.map(n => <article key={n.id} aria-label={title(n.applicationKey) + ' · ' + n.title} className="jx-activityPanel-item"> + <div className="jx-activityPanel-text"><strong>{title(n.applicationKey)} · {n.title}</strong><p>{n.body}</p></div> + <HostButton size="small" onClick={() => onOpen(n.applicationKey)}>{t('打开应用')}</HostButton> + <HostButton size="small" tone="text" disabled={busy === n.id} onClick={() => void remove(n.id, '/v1/workbench/me/activity/notifications/' + encodeURIComponent(n.id), n.source)}> - {t('忽略通知')}</button> + {t('忽略通知')}</HostButton> </article>)} </div> - {value.background.map(row => <div key={row.resourceId}> - <span>{title(row.applicationKey)} · {t('后台运行中')}</span> - <button type="button" disabled={busy === row.resourceId} - onClick={() => void renew(row.applicationKey, row.instanceId, row.resourceId, row.source)}>{t('续期后台租约')}</button> - <button type="button" disabled={busy === row.resourceId} onClick={() => void remove(row.resourceId, - activityPath(row) + '/background/' + encodeURIComponent(row.resourceId), row.source)}>{t('停止后台运行')}</button> + {value.background.map(row => <div key={row.resourceId} className="jx-activityPanel-item"> + <span className="jx-activityPanel-text">{title(row.applicationKey)} · {t('后台运行中')}</span> + <HostButton size="small" disabled={busy === row.resourceId} + onClick={() => void renew(row.applicationKey, row.instanceId, row.resourceId, row.source)}>{t('续期后台租约')}</HostButton> + <HostButton size="small" tone="danger" disabled={busy === row.resourceId} onClick={() => void remove(row.resourceId, + activityPath(row) + '/background/' + encodeURIComponent(row.resourceId), row.source)}>{t('停止后台运行')}</HostButton> </div>)} - {error && <p role="alert">{error}</p>} + {error && <HostNotice tone="error">{error}</HostNotice>} </aside>; } diff --git a/src/frontend/src/workbench/ApplicationAccess.tsx b/src/frontend/src/workbench/ApplicationAccess.tsx index 7db53701..1ab81549 100644 --- a/src/frontend/src/workbench/ApplicationAccess.tsx +++ b/src/frontend/src/workbench/ApplicationAccess.tsx @@ -4,6 +4,7 @@ import { useAuthStore } from '../stores/authStore'; import { useDeploymentModeStore } from '../stores/deploymentModeStore'; import { reloadDirectory, useApplicationDirectory } from './catalog'; import { t } from '../i18n'; +import { HostButton, HostNotice } from './ui'; /** URL navigation is not authorization. Actual backend resource gates remain authoritative. */ export function ApplicationAccess({id, children}: {id: string; children: ReactNode}) { @@ -14,7 +15,7 @@ export function ApplicationAccess({id, children}: {id: string; children: ReactNo // This existing module has its own server-derived capability, not allowed_apps. // It retains its original ChatSidebar entry and is not a new catalog/rail icon. if (id === 'personal_agent') { - return personalAgentAvailable ? children : <p role="alert">{t('应用不存在或你没有访问权限')}</p>; + return personalAgentAvailable ? children : <Denied />; } const item = catalog.items.find(i => i.applicationKey === 'builtin:' + id); const authoritative = catalog.items.length > 0 && !catalog.error; @@ -22,12 +23,15 @@ export function ApplicationAccess({id, children}: {id: string; children: ReactNo || (['lab', 'sites'].includes(id) && auth?.lab_enabled === false) ); if (denied || (authoritative && !item)) { - return <p role="alert">{t('应用不存在或你没有访问权限')}</p>; + return <Denied />; } if ((id === 'my_space' && localOnly) || item?.availability.available === false) { - return <p role="alert">{t('当前环境不支持此应用')}</p>; + return <HostNotice tone="warning" placement="page">{t('当前环境不支持此应用')}</HostNotice>; } - if (catalog.error && id === 'automation') return <p role="alert">{t(catalog.error)} - <button onClick={reloadDirectory}>{t('重试')}</button></p>; + if (catalog.error && id === 'automation') return <HostNotice tone="error" placement="page" + actions={<HostButton tone="primary" onClick={() => void reloadDirectory()}>{t('重试')}</HostButton>}>{t(catalog.error)}</HostNotice>; return children; } +function Denied() { + return <HostNotice tone="error" placement="page">{t('应用不存在或你没有访问权限')}</HostNotice>; +} diff --git a/src/frontend/src/workbench/ApplicationButton.tsx b/src/frontend/src/workbench/ApplicationButton.tsx index cfc4c06d..94c802ef 100644 --- a/src/frontend/src/workbench/ApplicationButton.tsx +++ b/src/frontend/src/workbench/ApplicationButton.tsx @@ -10,6 +10,7 @@ export function ApplicationButton({entry,onOpen,current,className,expanded = fal const activity=useApplicationActivity(entry.key,count); const personalStatus=usePersonalAgentStatusText(); const icon = <ApplicationIcon icon={entry.icon} builtinIcon={entry.builtinIcon} />; + // raw-ok: rail icon button, styled by the sidebar rail (data-rail-application) rather than a form control. const button = <button type="button" data-rail-application={entry.key} className={className + (current ? ' active' : '')} aria-label={[activityAccessibleName(entry.title,activity.count,activity.background),entry.key==='builtin:personal_agent'?personalStatus:''].filter(Boolean).join(' · ')} aria-current={current ? 'page' : undefined} aria-pressed={current} disabled={!entry.item.availability.available} onClick={() => onOpen(entry)}> diff --git a/src/frontend/src/workbench/DiagnosticFailure.tsx b/src/frontend/src/workbench/DiagnosticFailure.tsx index 09406527..864f181c 100644 --- a/src/frontend/src/workbench/DiagnosticFailure.tsx +++ b/src/frontend/src/workbench/DiagnosticFailure.tsx @@ -3,6 +3,7 @@ import {workbenchRequest as apiRequest} from './sourceRequest'; import {ApiResponseError} from '../utils/apiError'; import {getLang} from '../i18n'; import {useApplicationDirectory} from './catalog'; +import {HostButton, HostNotice} from './ui'; function diagnosticId(error: unknown): string | null { if (!(error instanceof ApiResponseError)) return null; @@ -42,11 +43,11 @@ function FailureReceipt({seed,applicationKey,code,message,onRetry}:{ try {await navigator.clipboard.writeText(id);setCopied(true);} catch {setCopied(false);} } - return <div role="alert"> + return <HostNotice tone="error" placement="page" + actions={<HostButton tone="primary" onClick={onRetry}>{english?'Retry':'重试'}</HostButton>}> <p>{message ?? (english?'Application could not load. Retry checks current access.':'应用未能加载。重试会重新检查当前访问权限。')}</p> {id && <p>{english?'Diagnostic ID:':'诊断编号：'} <code tabIndex={0}>{id}</code>{' '} - <button type="button" onClick={()=>void copy()}>{english?'Copy ID':'复制编号'}</button></p>} + <HostButton tone="text" size="small" onClick={()=>void copy()}>{english?'Copy ID':'复制编号'}</HostButton></p>} {copied && <p role="status">{english?'Copied':'已复制'}</p>} - <button type="button" onClick={onRetry}>{english?'Retry':'重试'}</button> - </div>; + </HostNotice>; } diff --git a/src/frontend/src/workbench/DiagnosticsPanel.tsx b/src/frontend/src/workbench/DiagnosticsPanel.tsx index e334ce1d..7cfeb565 100644 --- a/src/frontend/src/workbench/DiagnosticsPanel.tsx +++ b/src/frontend/src/workbench/DiagnosticsPanel.tsx @@ -1,6 +1,8 @@ import {useCallback, useEffect, useRef, useState} from 'react'; import {configFetch} from '../utils/adminApi'; import {getLang} from '../i18n'; +import {HostButton, HostField, HostInput, HostMeta, HostNotice, HostSection, HostTextArea, HostToolbar} from './ui'; +import {SkeletonLines} from '../components/common/LoadState'; interface ApplicationDiagnostic { applicationKey:string; source:string; revision:string|number; enabled:boolean; @@ -20,6 +22,11 @@ interface Report { directoryDurationMs:number[]}; } const base='/v1/workbench/admin/diagnostics'; +const RECENT_PAGE=20; +/** Joins the fields that have a value; a missing field adds no separator. */ +function facts(...values:(string|number|null|undefined|false)[]) { + return values.filter(value=>value!==null&&value!==undefined&&value!==false&&value!=='').join(' · '); +} export function DiagnosticsPanel({token}:{token:string}) { const [report,setReport]=useState<Report|null>(null); const [loading,setLoading]=useState(false); @@ -29,6 +36,7 @@ export function DiagnosticsPanel({token}:{token:string}) { const [notice,setNotice]=useState(''); const [probing,setProbing]=useState(false); const [declaration,setDeclaration]=useState(''); + const [allRecent,setAllRecent]=useState(false); const request=useRef<AbortController|null>(null); const action=useRef<AbortController|null>(null); const english=getLang()==='en'; @@ -70,54 +78,65 @@ export function DiagnosticsPanel({token}:{token:string}) { if(!controller.signal.aborted)setNotice(english?'Invalid configuration or access denied.':'配置无效或没有权限。'); } finally {if(!controller.signal.aborted)setProbing(false);} } - return <section aria-label={english?'Application diagnostics':'应用诊断'} style={{margin:'24px 0'}}> - <h2>{english?'Application diagnostics':'应用诊断'}</h2> - <label>{english?'External declaration preview (JSON)':'外部应用声明预检查（JSON）'} - <textarea value={declaration} maxLength={16000} rows={4} - onChange={event=>setDeclaration(event.target.value)} /></label> - <button type="button" onClick={()=>void preview()} disabled={probing || !declaration}> - {english?'Validate without saving':'校验但不保存'}</button> - <form onSubmit={event=>{event.preventDefault();setContext(user.trim());}}> - <label>{english?'User ID for permission check':'用于权限检查的用户 ID'} - <input value={user} maxLength={200} onChange={event=>setUser(event.target.value)} /></label> - <button type="submit">{english?'Check access':'检查权限'}</button> - </form> - <button type="button" onClick={()=>void load()} disabled={loading}>{english?'Refresh':'刷新'}</button> - {loading && <p role="status">{english?'Loading…':'正在加载…'}</p>} - {error && <p role="alert">{error}</p>} - {notice && <p role="status">{notice}</p>} - {report && <> - {report.applications.length===0 && <p>{english?'No applications':'暂无应用'}</p>} - <ul>{report.applications.map(app=><li key={app.applicationKey}> - <code>{app.applicationKey}</code>{' · '}{app.source}{' · '}{app.scope}{' · '}{String(app.revision)} - {' · '}{app.enabled?(english?'Enabled':'启用'):(english?'Disabled':'停用')} - {' · '}{app.authentication}{' · '}{app.permissionStatus}{' · '}{app.availability.reason} - {app.recentFailure && <span>{' · '}{app.recentFailure.code}{' · '}{app.recentFailure.diagnosticId}</span>} - {app.source==='external' && <button type="button" disabled={probing} - onClick={()=>void probe(app.applicationKey)}>{english?'Probe saved target':'探测已保存目标'}</button>} - </li>)}</ul> - <h3>{english?'Recent events':'最近事件'}</h3> - {report.recent.length===0 && <p>{english?'No diagnostic events':'暂无诊断事件'}</p>} - <ul>{report.recent.map(receipt=><li key={receipt.diagnosticId}> - <code tabIndex={0}>{receipt.diagnosticId}</code>{' · '}{receipt.timestamp}{' · '}{receipt.event} - {' · '}{receipt.code}{' · '}{receipt.appKey}{' · '}{receipt.revision}{' · '}{receipt.scope} - {' · trace '}{receipt.traceId}{' · install '}{receipt.installId}{' · instance '}{receipt.instanceId} - </li>)}</ul> - <h3>{english?'Metrics (retained event window)':'指标（保留事件窗口）'}</h3> - <dl> - <dt>{english?'Launch success rate':'启动成功率'}</dt> - <dd>{report.metrics.launchSuccessRate===null?'—':(report.metrics.launchSuccessRate*100).toFixed(1)+'%'}</dd> - <dt>{english?'Active resource instances':'活跃资源实例'}</dt> - <dd>{report.metrics.activeInstances===null?(english?'Unavailable':'暂不可用'):report.metrics.activeInstances}</dd> - <dt>{english?'Handshake timeouts':'握手超时'}</dt><dd>{report.metrics.handshakeTimeouts}</dd> - <dt>{english?'Permission denials':'权限拒绝'}</dt><dd>{report.metrics.permissionDenials}</dd> - <dt>{english?'Quota denials':'配额拒绝'}</dt><dd>{report.metrics.quotaDenials}</dd> - <dt>{english?'Release failures':'释放失败'}</dt><dd>{report.metrics.releaseFailures}</dd> - <dt>{english?'Directory timing samples (ms)':'目录耗时样本（毫秒）'}</dt> - <dd>{report.metrics.directoryDurationMs.slice(0,10).join(', ') || '—'}</dd> - </dl> - <ul>{report.metrics.events.map(metric=><li key={metric.event+metric.code}> - {metric.event}{' / '}{metric.code}{': '}{metric.count}</li>)}</ul> + const metrics=report?.metrics; + const stats:[string,string|number][]=metrics?[ + [english?'Launch success rate':'启动成功率',metrics.launchSuccessRate===null?'—':(metrics.launchSuccessRate*100).toFixed(1)+'%'], + [english?'Active resource instances':'活跃资源实例',metrics.activeInstances===null?(english?'Unavailable':'暂不可用'):metrics.activeInstances], + [english?'Handshake timeouts':'握手超时',metrics.handshakeTimeouts], + [english?'Permission denials':'权限拒绝',metrics.permissionDenials], + [english?'Quota denials':'配额拒绝',metrics.quotaDenials], + [english?'Release failures':'释放失败',metrics.releaseFailures], + ]:[]; + return <HostSection level={2} title={english?'Application diagnostics':'应用诊断'} + actions={<HostButton tone="text" onClick={()=>void load()} disabled={loading}>{english?'Refresh':'刷新'}</HostButton>}> + <HostField label={english?'External declaration preview (JSON)':'外部应用声明预检查（JSON）'}> + <HostTextArea value={declaration} maxLength={16000} rows={4} + onChange={event=>setDeclaration(event.target.value)} /></HostField> + <HostToolbar> + <HostButton onClick={()=>void preview()} disabled={probing || !declaration}> + {english?'Validate without saving':'校验但不保存'}</HostButton> + </HostToolbar> + <form className="jx-hostInlineForm" onSubmit={event=>{event.preventDefault();setContext(user.trim());}}> + <HostField label={english?'User ID for permission check':'用于权限检查的用户 ID'}> + <HostInput value={user} maxLength={200} onChange={event=>setUser(event.target.value)} /></HostField> + <HostButton submit>{english?'Check access':'检查权限'}</HostButton> + </form> + {loading && <SkeletonLines rows={3}/>} + {error && <HostNotice tone="error">{error}</HostNotice>} + {notice && <HostNotice>{notice}</HostNotice>} + {report && <> + {report.applications.length===0 && <HostNotice>{english?'No applications':'暂无应用'}</HostNotice>} + <ul className="jx-hostList">{report.applications.map(app=><li key={app.applicationKey} className="jx-hostList-row"> + <span className="jx-hostList-title"><code>{app.applicationKey}</code></span> + <HostMeta>{facts(app.source,app.scope,String(app.revision), + app.enabled?(english?'Enabled':'启用'):(english?'Disabled':'停用'), + app.authentication,app.permissionStatus,app.availability.reason, + app.recentFailure?.code,app.recentFailure?.diagnosticId)}</HostMeta> + {app.source==='external' && <HostButton tone="text" size="small" disabled={probing} + onClick={()=>void probe(app.applicationKey)}>{english?'Probe saved target':'探测已保存目标'}</HostButton>} + </li>)}</ul> + </>} + {report && metrics && <> + <HostSection title={english?'Recent events':'最近事件'}> + {report.recent.length===0 && <HostNotice>{english?'No diagnostic events':'暂无诊断事件'}</HostNotice>} + <ul className="jx-hostList">{(allRecent?report.recent:report.recent.slice(0,RECENT_PAGE)).map(receipt=><li key={receipt.diagnosticId} className="jx-hostList-row"> + <span className="jx-hostList-title"><code tabIndex={0}>{receipt.diagnosticId}</code></span> + <HostMeta>{facts(receipt.timestamp,receipt.event,receipt.code,receipt.appKey,receipt.revision,receipt.scope, + receipt.traceId&&'trace '+receipt.traceId,receipt.installId&&'install '+receipt.installId, + receipt.instanceId&&'instance '+receipt.instanceId)}</HostMeta> + </li>)}</ul> + {report.recent.length>RECENT_PAGE && <HostToolbar> + <HostButton tone="text" size="small" onClick={()=>setAllRecent(value=>!value)}> + {allRecent?(english?'Show fewer':'收起'):(english?'Show all '+report.recent.length:'显示全部 '+report.recent.length+' 条')}</HostButton> + </HostToolbar>} + </HostSection> + <HostSection title={english?'Metrics (retained event window)':'指标（保留事件窗口）'}> + <dl className="jx-hostStats">{stats.map(([label,value])=><div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}</dl> + <HostMeta>{english?'Directory timing samples (ms)':'目录耗时样本（毫秒）'}{': '} + {metrics.directoryDurationMs.slice(0,10).join(', ') || '—'}</HostMeta> + <ul className="jx-hostList">{metrics.events.map(metric=><li key={metric.event+metric.code} className="jx-hostList-row"> + <span className="jx-hostList-title">{metric.event}{' / '}{metric.code}</span><HostMeta>{metric.count}</HostMeta></li>)}</ul> + </HostSection> </>} - </section>; + </HostSection>; } diff --git a/src/frontend/src/workbench/EmbedPolicyFields.tsx b/src/frontend/src/workbench/EmbedPolicyFields.tsx index 106b88bb..a1cc3280 100644 --- a/src/frontend/src/workbench/EmbedPolicyFields.tsx +++ b/src/frontend/src/workbench/EmbedPolicyFields.tsx @@ -1,21 +1,21 @@ import {t} from '../i18n'; import type {EmbeddingPolicy} from './externalEmbed'; +import {HostCheckbox, HostField, HostFieldset, HostHint, HostInput, HostSelect} from './ui'; export function EmbedPolicyFields({value, onChange}: { value: EmbeddingPolicy; onChange: (value: EmbeddingPolicy) => void; }) { - return <fieldset> - <legend>{t('嵌入安全配置')}</legend> - <label>{t('精确外部 origin')}<input type="url" required maxLength={2048} - value={value.origin} onChange={e => onChange({...value, origin:e.target.value})}/></label> - <label>{t('就绪确认')}<select aria-label={t('就绪确认')} value={value.ready} onChange={e => onChange({ + return <HostFieldset legend={t('嵌入安全配置')}> + <HostField label={t('精确外部 origin')}><HostInput type="url" required maxLength={2048} + value={value.origin} onChange={e => onChange({...value, origin:e.target.value})}/></HostField> + <HostField label={t('就绪确认')}><HostSelect aria-label={t('就绪确认')} value={value.ready} onChange={e => onChange({ ...value, ready:e.target.value as EmbeddingPolicy['ready'], })}><option value="unconfirmed">{t('普通页面：不声明已就绪')}</option> - <option value="integrated">{t('集成页面：验证 ready 握手')}</option></select></label> - <label><input type="checkbox" checked={value.originStorage} - onChange={e => onChange({...value, originStorage:e.target.checked})}/>{t('信任此独立 origin，允许其自身存储（集成握手必需）')}</label> - <label><input type="checkbox" checked={value.allowForms} - onChange={e => onChange({...value, allowForms:e.target.checked})}/>{t('允许外部页面提交表单')}</label> - <p>{t('弹窗、下载、顶层导航和设备权限保持禁用。不会绕过对方的嵌入限制。')}</p> - </fieldset>; + <option value="integrated">{t('集成页面：验证 ready 握手')}</option></HostSelect></HostField> + <HostCheckbox checked={value.originStorage} + onChange={e => onChange({...value, originStorage:e.target.checked})}>{t('信任此独立 origin，允许其自身存储（集成握手必需）')}</HostCheckbox> + <HostCheckbox checked={value.allowForms} + onChange={e => onChange({...value, allowForms:e.target.checked})}>{t('允许外部页面提交表单')}</HostCheckbox> + <HostHint>{t('弹窗、下载、顶层导航和设备权限保持禁用。不会绕过对方的嵌入限制。')}</HostHint> + </HostFieldset>; } diff --git a/src/frontend/src/workbench/EmbeddedExternalApplication.tsx b/src/frontend/src/workbench/EmbeddedExternalApplication.tsx index 30a546f0..23345ba1 100644 --- a/src/frontend/src/workbench/EmbeddedExternalApplication.tsx +++ b/src/frontend/src/workbench/EmbeddedExternalApplication.tsx @@ -5,6 +5,15 @@ import {externalErrorMessage} from './externalApi'; import {reloadDirectory, useApplicationDirectory} from './catalog'; import {ExternalEmbedFrame} from './ExternalEmbedFrame'; import {validateEmbedLaunch, type ExternalEmbedLaunch} from './externalEmbed'; +import {HostButton, HostNotice} from './ui'; + +function Failure({message, onRetry}: {message:string; onRetry?:() => void}) { + return <HostNotice tone="error" placement="page" + actions={onRetry && <HostButton tone="primary" onClick={onRetry}>{t('重试')}</HostButton>}>{message}</HostNotice>; +} +function Loading({children}: {children:string}) { + return <HostNotice tone="loading" placement="page">{children}</HostNotice>; +} function EmbedLaunchLoader({applicationKey, onRetry}: { applicationKey:string; onRetry:() => void; @@ -24,8 +33,8 @@ function EmbedLaunchLoader({applicationKey, onRetry}: { }).catch(e => {if (!controller.signal.aborted) setError(externalErrorMessage(e));}); return () => controller.abort(); }, [applicationKey]); - if (error) return <p role="alert">{t(error)} <button onClick={onRetry}>{t('重试')}</button></p>; - if (!launch) return <p role="status">{t('正在加载外部页面…')}</p>; + if (error) return <Failure message={t(error)} onRetry={onRetry}/>; + if (!launch) return <Loading>{t('正在加载外部页面…')}</Loading>; return <ExternalEmbedFrame launch={launch} onRetry={onRetry}/>; } @@ -37,9 +46,9 @@ export function EmbeddedExternalApplication({applicationKey}: {applicationKey:st const [retry, setRetry] = useState(0); const item = catalog.items.find(i => i.applicationKey === applicationKey); function again() {reloadDirectory(); setRetry(n => n + 1);} - if (catalog.error) return <p role="alert">{t(catalog.error)} <button onClick={again}>{t('重试')}</button></p>; - if (catalog.loading && !item) return <p role="status">{t('正在加载应用目录…')}</p>; - if (!item?.availability.available) return <p role="alert">{t('应用不存在或你没有访问权限')}</p>; + if (catalog.error) return <Failure message={t(catalog.error)} onRetry={again}/>; + if (catalog.loading && !item) return <Loading>{t('正在加载应用目录…')}</Loading>; + if (!item?.availability.available) return <Failure message={t('应用不存在或你没有访问权限')}/>; return <EmbedLaunchLoader key={JSON.stringify([catalog.userId, applicationKey, item.revision, retry])} applicationKey={applicationKey} onRetry={again}/>; } diff --git a/src/frontend/src/workbench/ExternalApplicationEditor.tsx b/src/frontend/src/workbench/ExternalApplicationEditor.tsx index 25fa91b9..ee189ce5 100644 --- a/src/frontend/src/workbench/ExternalApplicationEditor.tsx +++ b/src/frontend/src/workbench/ExternalApplicationEditor.tsx @@ -7,6 +7,7 @@ import type { EmbeddingPolicy } from './externalEmbed'; import { EmbedPolicyFields } from './EmbedPolicyFields'; import { getLang, t } from '../i18n'; import { ExternalAuthenticationManager } from './ExternalAuthenticationEditor'; +import {HostButton, HostCheckbox, HostField, HostFieldset, HostHint, HostInput, HostMeta, HostNotice, HostSection, HostSelect, HostToolbar} from './ui'; const empty = {id:'', title:'', description:'', url:'https://', enabled:true}; const defaultEmbedding: EmbeddingPolicy = {origin:'https://', ready:'unconfirmed', allowForms:false, originStorage:false}; @@ -79,32 +80,38 @@ export function ExternalApplicationEditor({token}: {token: string}) { setError(externalErrorMessage(e)); } finally {setSaving(false);} } - return <section aria-label={t('普通外部应用')} style={{margin:'24px 0', padding:20, border:'1px solid var(--color-border)', borderRadius:12}}> - <h2>{t('普通外部应用')}</h2> - <p>{t('独立登录，在浏览器新窗口打开。不会传递宿主登录凭据。旧应用配置保留在下方。')}</p> - {loading && <p role="status">{t('正在加载应用目录…')}</p>} - {error && <p role="alert">{error}</p>} - {notice && <p role="status">{t(notice)}</p>} - <button type="button" onClick={() => void load()} disabled={saving}>{t('重新加载')}</button>{' '} - <button type="button" onClick={() => edit(null)} disabled={saving}>{t('新增外部应用')}</button> - <ul>{items.map(item => <li key={item.applicationKey}> - <button type="button" disabled={saving} onClick={() => edit(item)}>{applicationText(item.declaration.title)}</button> - {' · '}{item.enabled ? t('启用') : t('禁用')}{' · revision '}{item.revision} - </li>)}</ul> - <form onSubmit={event => void save(event)}> - <fieldset disabled={saving || loading} style={{display:"grid",gap:12}}> - <legend>{selected ? t('编辑外部应用') : t('新增外部应用')}</legend> - <label>{t('应用 ID')}<input required maxLength={64} pattern="[A-Za-z0-9][A-Za-z0-9_-]{0,63}" disabled={!!selected} value={form.id} onChange={e => setForm({...form,id:e.target.value})}/></label>{' '} - <label>{t('应用名称')}<input required maxLength={400} value={form.title} onChange={e => setForm({...form,title:e.target.value})}/></label>{' '} - <label>{t('应用简介')}<input maxLength={400} value={form.description} onChange={e => setForm({...form,description:e.target.value})}/></label>{' '} - <label>{t('跳转 URL')}<input required type="url" maxLength={2048} value={form.url} onChange={e => setForm({...form,url:e.target.value})}/></label>{' '} - <label>{t('打开方式')}<select aria-label={t('打开方式')} value={mode} onChange={e => setMode(e.target.value as 'browser' | 'embedded')}><option value="browser">{t('浏览器')}</option><option value="embedded">{t('嵌入工作区')}</option></select></label> - {mode === 'embedded' && <EmbedPolicyFields value={embedding} onChange={setEmbedding}/>} - <label><input type="checkbox" checked={form.enabled} onChange={e => setForm({...form,enabled:e.target.checked})}/>{t('启用')}</label>{' '} - <button type="submit">{saving ? t('正在保存…') : t('保存外部应用')}</button> - </fieldset> - </form> - <p>{t('并发更新冲突时，请重新加载并选择最新应用后再编辑。')}</p> + return <div className="jx-hostSections"> + <HostSection level={2} title={t('普通外部应用')} + description={t('独立登录，在浏览器新窗口打开。不会传递宿主登录凭据。旧应用配置保留在下方。')} + actions={<> + <HostButton onClick={() => edit(null)} disabled={saving}>{t('新增外部应用')}</HostButton> + <HostButton tone="text" onClick={() => void load()} disabled={saving}>{t('重新加载')}</HostButton> + </>}> + {loading && <HostNotice tone="loading">{t('正在加载应用目录…')}</HostNotice>} + {error && <HostNotice tone="error">{t(error)}</HostNotice>} + {notice && <HostNotice tone="success">{t(notice)}</HostNotice>} + <ul className="jx-hostList">{items.map(item => <li key={item.applicationKey} className="jx-hostList-row"> + <span className="jx-hostList-title"> + <HostButton tone="text" size="small" disabled={saving} onClick={() => edit(item)}>{applicationText(item.declaration.title)}</HostButton> + </span> + <HostMeta>{item.enabled ? t('启用') : t('禁用')}{' · revision '}{item.revision}</HostMeta> + </li>)}</ul> + <form onSubmit={event => void save(event)}> + <HostFieldset disabled={saving || loading} legend={selected ? t('编辑外部应用') : t('新增外部应用')}> + <HostField label={t('应用 ID')}><HostInput required maxLength={64} pattern="[A-Za-z0-9][A-Za-z0-9_-]{0,63}" disabled={!!selected} value={form.id} onChange={e => setForm({...form,id:e.target.value})}/></HostField> + <HostField label={t('应用名称')}><HostInput required maxLength={400} value={form.title} onChange={e => setForm({...form,title:e.target.value})}/></HostField> + <HostField label={t('应用简介')}><HostInput maxLength={400} value={form.description} onChange={e => setForm({...form,description:e.target.value})}/></HostField> + <HostField label={t('跳转 URL')}><HostInput required type="url" maxLength={2048} value={form.url} onChange={e => setForm({...form,url:e.target.value})}/></HostField> + <HostField label={t('打开方式')}><HostSelect aria-label={t('打开方式')} value={mode} onChange={e => setMode(e.target.value as 'browser' | 'embedded')}><option value="browser">{t('浏览器')}</option><option value="embedded">{t('嵌入工作区')}</option></HostSelect></HostField> + {mode === 'embedded' && <EmbedPolicyFields value={embedding} onChange={setEmbedding}/>} + <HostCheckbox checked={form.enabled} onChange={e => setForm({...form,enabled:e.target.checked})}>{t('启用')}</HostCheckbox> + <HostToolbar> + <HostButton tone="primary" submit>{saving ? t('正在保存…') : t('保存外部应用')}</HostButton> + </HostToolbar> + <HostHint>{t('并发更新冲突时，请重新加载并选择最新应用后再编辑。')}</HostHint> + </HostFieldset> + </form> + </HostSection> <ExternalAuthenticationManager key={token} token={token}/> - </section>; + </div>; } diff --git a/src/frontend/src/workbench/ExternalAuthenticationEditor.tsx b/src/frontend/src/workbench/ExternalAuthenticationEditor.tsx index c861443e..5f149546 100644 --- a/src/frontend/src/workbench/ExternalAuthenticationEditor.tsx +++ b/src/frontend/src/workbench/ExternalAuthenticationEditor.tsx @@ -2,6 +2,8 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { configFetch } from '../utils/adminApi'; import { applicationText, type ExternalApplication } from './externalApi'; import { t } from '../i18n'; +import { HostButton, HostField, HostFieldset, HostHint, HostInput, HostNotice, HostSection, HostSelect, HostToolbar } from './ui'; +import {SkeletonLines} from '../components/common/LoadState'; type Mode = 'independent' | 'shared_identity' | 'exchange'; type AuthConfig = { @@ -62,37 +64,38 @@ function AuthenticationForm({token, applicationKey}: {token:string; applicationK if (!controller.signal.aborted) setSaving(false); } } - return <form onSubmit={event => void save(event)} aria-label={t('外部认证配置')}> - {error && <p role="alert">{t(error)}</p>} - {message && <p role="status">{t(message)}</p>} - {loading && <p role="status">{t('正在加载…')}</p>} - {config.requiresConfiguration && <p role="status">{t('旧应用尚未配置认证；请审核目标后显式选择认证方式')}</p>} - <button type="button" disabled={saving} onClick={() => void load()}>{t('重新加载认证配置')}</button> - <fieldset disabled={loading || saving} style={{display:'grid',gap:12}}> - <legend>{t('认证方式')}</legend> - <label>{t('认证方式')}<select aria-label={t("认证方式")} value={config.mode} onChange={e => { + return <form onSubmit={event => void save(event)} aria-label={t('外部认证配置')} className="jx-hostSection"> + {error && <HostNotice tone="error">{t(error)}</HostNotice>} + {message && <HostNotice tone="success">{t(message)}</HostNotice>} + {loading && <SkeletonLines rows={3}/>} + {config.requiresConfiguration && <HostNotice tone="warning">{t('旧应用尚未配置认证；请审核目标后显式选择认证方式')}</HostNotice>} + <HostFieldset disabled={loading || saving} legend={t('认证方式')}> + <HostField label={t('认证方式')}><HostSelect aria-label={t("认证方式")} value={config.mode} onChange={e => { setConfig({...config, mode:e.target.value as Mode}); setSecret(''); }}> <option value="independent">{t('独立登录')}</option> <option value="shared_identity">{t('共同身份提供方')}</option> <option value="exchange">{t('一次性换票')}</option> - </select></label> + </HostSelect></HostField> {config.mode === 'shared_identity' && <> - <label>{t('身份提供方标识')}<input required maxLength={200} value={config.identityProvider ?? ''} onChange={e => setConfig({...config,identityProvider:e.target.value})}/></label> - <label>{t('目标系统登录 URL')}<input required type="url" value={config.loginUrl ?? ''} onChange={e => setConfig({...config,loginUrl:e.target.value})}/></label> - <p>{t('目标系统自行接入同一身份提供方。宿主不会转发 Cookie 或通用令牌。')}</p> + <HostField label={t('身份提供方标识')}><HostInput required maxLength={200} value={config.identityProvider ?? ''} onChange={e => setConfig({...config,identityProvider:e.target.value})}/></HostField> + <HostField label={t('目标系统登录 URL')} hint={t('目标系统自行接入同一身份提供方。宿主不会转发 Cookie 或通用令牌。')}> + <HostInput required type="url" value={config.loginUrl ?? ''} onChange={e => setConfig({...config,loginUrl:e.target.value})}/></HostField> </>} {config.mode === 'exchange' && <> - <label>{t('目标登录发起 URL')}<input required type="url" value={config.initiationUrl ?? ''} onChange={e => setConfig({...config,initiationUrl:e.target.value})}/></label> - <label>{t('受众标识')}<input required maxLength={200} value={config.audience ?? ''} onChange={e => setConfig({...config,audience:e.target.value})}/></label> - <label>{t('精确回调 URL')}<input required type="url" value={config.callback ?? ''} onChange={e => setConfig({...config,callback:e.target.value})}/></label> - <label>{t('目标服务端密钥')}<input type="password" autoComplete="new-password" minLength={32} maxLength={256} value={secret} onChange={e => setSecret(e.target.value)}/></label> - <p>{t('使用至少 32 字符的随机密钥；留空保留现有密钥。密钥仅保存哈希，不能读取。')}</p> - <label>{t('票据有效秒数')}<input type="number" min={1} max={60} value={config.ttlSeconds ?? 30} onChange={e => setConfig({...config,ttlSeconds:Number(e.target.value)})}/></label> + <HostField label={t('目标登录发起 URL')}><HostInput required type="url" value={config.initiationUrl ?? ''} onChange={e => setConfig({...config,initiationUrl:e.target.value})}/></HostField> + <HostField label={t('受众标识')}><HostInput required maxLength={200} value={config.audience ?? ''} onChange={e => setConfig({...config,audience:e.target.value})}/></HostField> + <HostField label={t('精确回调 URL')}><HostInput required type="url" value={config.callback ?? ''} onChange={e => setConfig({...config,callback:e.target.value})}/></HostField> + <HostField label={t('目标服务端密钥')} hint={t('使用至少 32 字符的随机密钥；留空保留现有密钥。密钥仅保存哈希，不能读取。')}> + <HostInput type="password" autoComplete="new-password" minLength={32} maxLength={256} value={secret} onChange={e => setSecret(e.target.value)}/></HostField> + <HostField label={t('票据有效秒数')}><HostInput type="number" min={1} max={60} value={config.ttlSeconds ?? 30} onChange={e => setConfig({...config,ttlSeconds:Number(e.target.value)})}/></HostField> </>} - <button type="submit">{saving ? t('正在保存…') : t('保存认证配置')}</button> - </fieldset> - <p>{t('宿主退出会使未兑换的会话票据失效。第三方会话退出由目标系统处理。')}</p> + <HostToolbar> + <HostButton tone="primary" submit>{saving ? t('正在保存…') : t('保存认证配置')}</HostButton> + <HostButton tone="text" disabled={saving} onClick={() => void load()}>{t('重新加载认证配置')}</HostButton> + </HostToolbar> + </HostFieldset> + <HostHint>{t('宿主退出会使未兑换的会话票据失效。第三方会话退出由目标系统处理。')}</HostHint> </form>; } @@ -113,18 +116,17 @@ export function ExternalAuthenticationManager({token}: {token:string}) { }).finally(() => {if (!controller.signal.aborted) setLoading(false);}); return () => controller.abort(); }, [token, generation]); - return <section aria-label={t('外部应用认证')}> - <h3>{t('外部应用认证')}</h3> - {error && <p role="alert">{t(error)}</p>} - <button type="button" onClick={() => {setLoading(true); setItems([]); setKey(''); setError(''); setGeneration(value => value + 1);}}>{t('刷新认证应用列表')}</button> - <label>{t('认证应用')}<select disabled={loading} aria-label={t("认证应用")} value={key} onChange={e => setKey(e.target.value)}> + return <HostSection title={t('外部应用认证')} + actions={<HostButton tone="text" onClick={() => {setLoading(true); setItems([]); setKey(''); setError(''); setGeneration(value => value + 1);}}>{t('刷新认证应用列表')}</HostButton>}> + {error && <HostNotice tone="error">{t(error)}</HostNotice>} + <HostField label={t('认证应用')}><HostSelect disabled={loading} aria-label={t("认证应用")} value={key} onChange={e => setKey(e.target.value)}> <option value="">{t('请选择应用')}</option> {items.map(item => <option key={item.applicationKey} value={item.applicationKey}> {applicationText(item.declaration.title)} ({item.applicationKey}) </option>)} - </select></label> - {loading && <p role="status">{t('正在加载…')}</p>} - {!loading && !error && items.length === 0 && <p>{t('没有可配置认证的外部应用')}</p>} + </HostSelect></HostField> + {loading && <SkeletonLines rows={3}/>} + {!loading && !error && items.length === 0 && <HostNotice>{t('没有可配置认证的外部应用')}</HostNotice>} {key && <AuthenticationForm key={token + ':' + key} token={token} applicationKey={key}/>} - </section>; + </HostSection>; } diff --git a/src/frontend/src/workbench/ExternalEmbedFrame.tsx b/src/frontend/src/workbench/ExternalEmbedFrame.tsx index 74a8f8d5..450ce91b 100644 --- a/src/frontend/src/workbench/ExternalEmbedFrame.tsx +++ b/src/frontend/src/workbench/ExternalEmbedFrame.tsx @@ -2,6 +2,15 @@ import {useEffect, useRef, useState} from 'react'; import {t} from '../i18n'; import {openExternalApplication} from './openExternal'; import {externalCarrierDocument, externalPermissionsPolicy, type ExternalEmbedLaunch} from './externalEmbed'; +import {HostButton, HostNotice} from './ui'; +import './workspace.css'; + +const STATUS = { + loading: {tone: 'loading', text: '正在加载外部页面…'}, + ready: {tone: 'success', text: '外部页面已确认就绪'}, + unconfirmed: {tone: 'warning', text: '未确认就绪。页面可能仍在加载，或不允许嵌入。'}, + invalid: {tone: 'error', text: '应用嵌入配置无效'}, +} as const; function ExternalEmbedCarrier({launch, onRetry}: { launch: ExternalEmbedLaunch; onRetry: () => void; @@ -56,20 +65,18 @@ function ExternalEmbedCarrier({launch, onRetry}: { try {await openExternalApplication(launch.applicationKey, controller.signal, true);} catch (e) {if (!controller.signal.aborted) setError(e instanceof Error ? e.message : t('打开应用失败'));} } - return <section aria-label={t('外部嵌入工作区')} style={{width:'100%', minHeight:400}}> - <div role="status"> - {status === 'loading' && t('正在加载外部页面…')} - {status === 'ready' && t('外部页面已确认就绪')} - {status === 'unconfirmed' && t('未确认就绪。页面可能仍在加载，或不允许嵌入。')} - {status === 'invalid' && t('应用嵌入配置无效')} + const current = STATUS[status]; + // The status line is always present (role=status), only its tone changes. + return <section aria-label={t('外部嵌入工作区')} className="jx-workspaceEmbed"> + <div className="jx-workspaceEmbed-bar"> + <span role="status" className={'jx-workspaceEmbed-status jx-workspaceEmbed-status--' + current.tone}>{t(current.text)}</span> + <HostButton size="small" onClick={() => void browser()}>{t('在浏览器中打开')}</HostButton> + <HostButton size="small" tone="text" onClick={onRetry}>{t('重试')}</HostButton> </div> - <button type="button" onClick={() => void browser()}>{t('在浏览器中打开')}</button>{' '} - <button type="button" onClick={onRetry}>{t('重试')}</button> - {error && <p role="alert">{t(error)}</p>} - {document && <iframe ref={frame} srcDoc={document} onLoad={attach} + {error && <HostNotice tone="error">{t(error)}</HostNotice>} + {document && <iframe ref={frame} srcDoc={document} onLoad={attach} className="jx-workspaceEmbed-frame" title={t('外部页面承载器')} sandbox={'allow-scripts allow-same-origin' + (launch.embedding.allowForms ? ' allow-forms' : '')} - allow={externalPermissionsPolicy} referrerPolicy="no-referrer" - style={{border:0, width:'100%', height:'70vh', minHeight:400}} />} + allow={externalPermissionsPolicy} referrerPolicy="no-referrer" />} </section>; } diff --git a/src/frontend/src/workbench/PluginWorkspaceFrame.tsx b/src/frontend/src/workbench/PluginWorkspaceFrame.tsx index 5b84d98a..49ac181a 100644 --- a/src/frontend/src/workbench/PluginWorkspaceFrame.tsx +++ b/src/frontend/src/workbench/PluginWorkspaceFrame.tsx @@ -11,6 +11,8 @@ import {workspaceCapabilities} from './workspaceCapabilities'; import {usePlatformExtension} from './usePlatformExtension'; import {useRevisionLease} from './useRevisionLease'; import {DiagnosticFailure} from './DiagnosticFailure'; +import {HostNotice} from './ui'; +import './workspace.css'; import {applicationText} from './externalApi'; import {packageAssetPath,sourceLabel,type WorkbenchOrigin,type WorkbenchSource} from './sourceIdentity'; export interface WorkspaceLaunch { @@ -85,11 +87,11 @@ export function PluginWorkspaceFrame({launch,theme,locale,onRetry,extension,onRe const prefix=(import.meta.env.VITE_API_BASE_URL||'/api').replace(/\/$/,''); const src=prefix+packageAssetPath(launch.assetPath,launch.applicationKey)+'&instanceId='+encodeURIComponent(instanceId); if(status==='failed')return <DiagnosticFailure applicationKey={launch.applicationKey} code={failureCode} onRetry={onRetry}/>; - return <section aria-label={t('插件工作区')} style={{height:'100%',minHeight:400}}> + return <section aria-label={t('插件工作区')} className="jx-workspacePlugin"> {dialog}{platform.dialog} - {lease.status==='recovering'&&<p role="status">{t('连接中断，正在恢复。应用操作已暂停。')}</p>} - {status==='loading'&&<p role="status">{t('正在加载插件模块…')}</p>} + {lease.status==='recovering'&&<HostNotice tone="warning">{t('连接中断，正在恢复。应用操作已暂停。')}</HostNotice>} + {status==='loading'&&<div className="jx-workspacePlugin-loading"><HostNotice tone="loading" placement="page">{t('正在加载插件模块…')}</HostNotice></div>} {lease.ready&&<iframe ref={frame} src={src} title={applicationText(launch.module.title)+' · '+t(sourceLabel(launch.binding.origin))} - sandbox="allow-scripts" referrerPolicy="no-referrer" style={{border:0,width:'100%',height:'100%',minHeight:400}}/>} + sandbox="allow-scripts" referrerPolicy="no-referrer" className="jx-workspacePlugin-frame"/>} </section>; } diff --git a/src/frontend/src/workbench/PolicyEditor.tsx b/src/frontend/src/workbench/PolicyEditor.tsx index e7a1be24..b63b2e24 100644 --- a/src/frontend/src/workbench/PolicyEditor.tsx +++ b/src/frontend/src/workbench/PolicyEditor.tsx @@ -3,11 +3,15 @@ import { configFetch } from '../utils/adminApi'; import { applicationText, externalErrorMessage } from './externalApi'; import { reloadDirectory, type CatalogItem, type LayoutPolicy } from './catalog'; import { t } from '../i18n'; +import { HostButton, HostCheckbox, HostMeta, HostNotice, HostSection, HostToolbar } from './ui'; + +const LOCKED = ['builtin:chat','builtin:settings','builtin:docs','builtin:plan_mode']; +const FIELDS = {defaultPinned:'默认入口', forced:'强制入口', hidden:'隐藏入口'} as const; export function PolicyEditor({token}: {token: string}) { const [policy, setPolicy] = useState<LayoutPolicy & {hidden: string[]} | null>(null); const [items, setItems] = useState<CatalogItem[]>([]); - const [feedback, setFeedback] = useState(''); + const [feedback, setFeedback] = useState<{tone: 'success' | 'error'; text: string} | null>(null); const [busy, setBusy] = useState(false); const [conflict, setConflict] = useState(false); const request = useRef<AbortController | null>(null); @@ -17,7 +21,7 @@ export function PolicyEditor({token}: {token: string}) { request.current?.abort(); const controller = new AbortController(); request.current = controller; const version = ++generation.current; owner.current = token; - setBusy(true); setPolicy(null); setFeedback(''); + setBusy(true); setPolicy(null); setFeedback(null); try { const [layout, catalog] = await Promise.all([ configFetch(token, '/v1/workbench/admin/policy', {signal:controller.signal}), @@ -26,7 +30,7 @@ export function PolicyEditor({token}: {token: string}) { if (controller.signal.aborted || version !== generation.current) return; setPolicy(layout.data); setItems(catalog.data.items); setConflict(false); } catch (error) { - if (!controller.signal.aborted && version === generation.current) setFeedback(externalErrorMessage(error)); + if (!controller.signal.aborted && version === generation.current) setFeedback({tone: 'error', text: externalErrorMessage(error)}); } finally { if (version === generation.current) setBusy(false); } }, [token]); const cancelRequest = useCallback(() => { @@ -50,46 +54,46 @@ export function PolicyEditor({token}: {token: string}) { request.current?.abort(); const controller = new AbortController(); request.current = controller; const version = ++generation.current; - setBusy(true); setFeedback(''); + setBusy(true); setFeedback(null); try { const result = await configFetch(token, '/v1/workbench/admin/policy', { method: 'PUT', body: JSON.stringify(policy), signal:controller.signal, }); if (controller.signal.aborted || version !== generation.current) return; - setPolicy(result.data); reloadDirectory(); setFeedback(t('工作台策略已保存')); + setPolicy(result.data); reloadDirectory(); setFeedback({tone: 'success', text: t('工作台策略已保存')}); } catch (error) { if (controller.signal.aborted || version !== generation.current) return; - setFeedback(externalErrorMessage(error)); + setFeedback({tone: 'error', text: externalErrorMessage(error)}); // Preserve the draft. A conflict requires an explicit reload before retry. setConflict(true); } finally { if (version === generation.current) setBusy(false); } } - return <section aria-label={t('工作台布局策略')} style={{marginBottom:24}}> - <h3>{t('工作台布局策略')}</h3> - <p>{t('布局不授予应用权限。强制入口仍受用户权限和运行条件限制。')}</p> - <button disabled={busy} onClick={() => void load()}>{t('重新加载策略')}</button> - <p role="status">{feedback}</p> - {!policy && busy && <p>{t('正在加载应用目录…')}</p>} + return <HostSection title={t('工作台布局策略')} + description={t('布局不授予应用权限。强制入口仍受用户权限和运行条件限制。')} + actions={<HostButton tone="text" disabled={busy} onClick={() => void load()}>{t('重新加载策略')}</HostButton>}> + {feedback && <HostNotice tone={feedback.tone}>{feedback.text}</HostNotice>} + {!policy && busy && <HostNotice tone="loading">{t('正在加载应用目录…')}</HostNotice>} {policy && owner.current === token && <> - <p>revision {policy.revision}</p> - <ol>{items.map(item => <li key={item.applicationKey}> - <span>{applicationText(item.declaration.title)} ({item.applicationKey}) </span> - {(['defaultPinned', 'forced', 'hidden'] as const).map(field => <label key={field}> - <input type="checkbox" disabled={busy || conflict || (['builtin:chat','builtin:settings','builtin:docs','builtin:plan_mode'].includes(item.applicationKey))} - aria-label={item.applicationKey + ' ' + field} - checked={policy[field].includes(item.applicationKey)} - onChange={e => toggle(field, item.applicationKey, e.target.checked)} /> - {t({defaultPinned:'默认入口', forced:'强制入口', hidden:'隐藏入口'}[field])} - </label>)} + <HostMeta>revision {policy.revision}</HostMeta> + <ol className="jx-hostList">{items.map(item => <li key={item.applicationKey} className="jx-hostList-row"> + <span className="jx-hostList-title">{applicationText(item.declaration.title)} <HostMeta>{item.applicationKey}</HostMeta></span> + {(Object.keys(FIELDS) as (keyof typeof FIELDS)[]).map(field => <HostCheckbox key={field} + disabled={busy || conflict || LOCKED.includes(item.applicationKey)} + aria-label={item.applicationKey + ' ' + field} + checked={policy[field].includes(item.applicationKey)} + onChange={e => toggle(field, item.applicationKey, e.target.checked)}>{t(FIELDS[field])}</HostCheckbox>)} </li>)}</ol> - <ol aria-label={t('默认入口顺序')}>{policy.defaultPinned.map((key, index) => <li key={key}> - {key} <button disabled={busy || conflict || index === 0} onClick={() => { + <ol aria-label={t('默认入口顺序')} className="jx-hostList">{policy.defaultPinned.map((key, index) => <li key={key} className="jx-hostList-row"> + <span className="jx-hostList-title"><code>{key}</code></span> + <HostButton tone="text" size="small" disabled={busy || conflict || index === 0} onClick={() => { const next = [...policy.defaultPinned]; [next[index - 1], next[index]] = [next[index], next[index - 1]]; setPolicy({...policy, defaultPinned: next}); - }}>{t('上移默认入口')}</button> + }}>{t('上移默认入口')}</HostButton> </li>)}</ol> - <button disabled={busy || conflict} onClick={() => void save()}>{t('保存工作台策略')}</button> + <HostToolbar> + <HostButton tone="primary" disabled={busy || conflict} onClick={() => void save()}>{t('保存工作台策略')}</HostButton> + </HostToolbar> </>} - </section>; + </HostSection>; } diff --git a/src/frontend/src/workbench/SourceStatus.tsx b/src/frontend/src/workbench/SourceStatus.tsx deleted file mode 100644 index af68eb69..00000000 --- a/src/frontend/src/workbench/SourceStatus.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {t} from '../i18n'; -import {sourceLabel,type SourceFailure} from './sourceIdentity'; -import {reloadDirectory} from './catalog'; - -export function SourceStatus({failures}:{failures:SourceFailure[]}) { - if(!failures.length)return null; - return <div role="status">{failures.map(failure=><p key={failure.source}> - {t(sourceLabel({kind:failure.source,id:''}))}: {t(failure.code==='execution_plane_not_ready' - ? '本机执行面尚未就绪' : failure.code==='origin_mismatch' ? '服务身份已改变，请重新加载' : '此来源暂不可用，请检查连接')} - </p>)}<button type="button" onClick={()=>void reloadDirectory()}>{t('重试')}</button></div>; -} diff --git a/src/frontend/src/workbench/WorkbenchApplicationConfigEditor.tsx b/src/frontend/src/workbench/WorkbenchApplicationConfigEditor.tsx index bd006170..0e713b10 100644 --- a/src/frontend/src/workbench/WorkbenchApplicationConfigEditor.tsx +++ b/src/frontend/src/workbench/WorkbenchApplicationConfigEditor.tsx @@ -1,10 +1,13 @@ import { useEffect, useRef, useState } from 'react'; +import { Modal } from 'antd'; import { t, getLang } from '../i18n'; import { ApiResponseError } from '../utils/apiError'; import { applicationConfigPath, applicationConfigRequest, configurableApplications, configurationValues, type ConfigurableApplication, } from './applicationConfigApi'; +import {HostButton, HostCheckbox, HostField, HostFieldset, HostHint, HostInput, HostNotice, HostSection, HostSelect, HostToolbar} from './ui'; +import {SkeletonLines} from '../components/common/LoadState'; function itemTitle(item: ConfigurableApplication) { if (typeof item.title === 'string') return item.title; @@ -63,37 +66,42 @@ function InstalledConfiguration({ token, item }: { token: string; item: Configur if (!controller.signal.aborted) setError(configError(reason, true)); } finally { if (!controller.signal.aborted) setBusy(false); } } - return <form aria-label={t('工作台应用配置表单')} onSubmit={event => void save(event)}> - {loading && <p role="status">{t('正在加载…')}</p>} - {error && <p role="alert">{error}</p>} - {saved && <p role="status">{t('工作台应用配置已保存')}</p>} - <button type="button" disabled={busy} onClick={() => { - setLoading(true); setConfig(null); setError(''); setValues({}); setClearKeys([]); setSaved(false); - setGeneration(value => value + 1); - }}> - {t('重新加载应用配置')}</button> - <fieldset disabled={loading || busy || !config} style={{ display: 'grid', gap: 12, marginTop: 12 }}> - <legend>{itemTitle(item)}</legend> - {config?.fields.map(field => <div key={field.key}> - <label style={{ display: 'grid', gap: 4 }}>{field.label || field.key} - <input aria-label={field.label || field.key} type={field.secret ? 'password' : 'text'} + function toggleClear(key: string, name: string, checked: boolean) { + const apply = () => { + setClearKeys(previous => checked ? [...previous, key] : previous.filter(value => value !== key)); + setSaved(false); + }; + if (!checked) {apply(); return;} + Modal.confirm({ + title: t('确认清除配置项：{name}？保存后生效。', { name }), okText: t('清除'), cancelText: t('取消'), + okButtonProps: { danger: true }, onOk: apply, + }); + } + return <form aria-label={t('工作台应用配置表单')} onSubmit={event => void save(event)} className="jx-hostSection"> + {loading && <SkeletonLines rows={3}/>} + {error && <HostNotice tone="error">{error}</HostNotice>} + {saved && <HostNotice tone="success">{t('工作台应用配置已保存')}</HostNotice>} + <HostFieldset disabled={loading || busy || !config} legend={itemTitle(item)}> + {config?.fields.map(field => <div key={field.key} className="jx-hostFieldGroup"> + <HostField label={field.label || field.key} hint={field.description}> + <HostInput aria-label={field.label || field.key} type={field.secret ? 'password' : 'text'} autoComplete={field.secret ? 'new-password' : 'off'} disabled={clearKeys.includes(field.key)} value={values[field.key] || ''} onChange={event => { setValues(previous => ({ ...previous, [field.key]: event.target.value })); setSaved(false); }} placeholder={field.secret && field.is_set ? t('已配置，留空则保留不变') : ''} /> - </label> - {field.description && <p>{field.description}</p>} - {field.is_set && <label><input type="checkbox" checked={clearKeys.includes(field.key)} - onChange={event => { - const checked = event.target.checked; - if (checked && !window.confirm(t('确认清除配置项：{name}？保存后生效。', { name: field.label || field.key }))) return; - setClearKeys(previous => checked ? [...previous, field.key] : previous.filter(key => key !== field.key)); - setSaved(false); - }} />{t('清除此配置项')}</label>} + </HostField> + {field.is_set && <HostCheckbox checked={clearKeys.includes(field.key)} + onChange={event => toggleClear(field.key, field.label || field.key, event.target.checked)}>{t('清除此配置项')}</HostCheckbox>} </div>)} - <button type="submit">{busy ? t('正在保存…') : t('保存应用配置')}</button> - </fieldset> - <p>{t('凭据仅用于当前安装的应用；密钥留空保留原值。清除操作在保存后生效。')}</p> + <HostToolbar> + <HostButton tone="primary" submit>{busy ? t('正在保存…') : t('保存应用配置')}</HostButton> + <HostButton tone="text" disabled={busy} onClick={() => { + setLoading(true); setConfig(null); setError(''); setValues({}); setClearKeys([]); setSaved(false); + setGeneration(value => value + 1); + }}>{t('重新加载应用配置')}</HostButton> + </HostToolbar> + </HostFieldset> + <HostHint>{t('凭据仅用于当前安装的应用；密钥留空保留原值。清除操作在保存后生效。')}</HostHint> </form>; } function ConfigurationManager({ token }: { token: string }) { @@ -111,27 +119,25 @@ function ConfigurationManager({ token }: { token: string }) { return () => controller.abort(); }, [token, generation]); const item = items.find(value => value.applicationKey === selected); - return <section aria-label={t('工作台应用配置')} style={{ marginTop: 24 }}> - <h3>{t('工作台应用配置')}</h3> - <p>{t('选择已安装的应用，配置此服务器上的连接与凭据。')}</p> - {error && <p role="alert">{error}</p>} - <button type="button" onClick={() => { + return <HostSection title={t('工作台应用配置')} description={t('选择已安装的应用，配置此服务器上的连接与凭据。')} + actions={<HostButton tone="text" onClick={() => { setLoading(true); setItems([]); setSelected(''); setError(''); setGeneration(value => value + 1); - }}>{t('刷新已安装应用')}</button> - <label style={{ display: 'grid', gap: 8, margin: '12px 0' }}>{t('已安装的工作台应用')} - <select aria-label={t('已安装的工作台应用')} disabled={loading} value={selected} + }}>{t('刷新已安装应用')}</HostButton>}> + {error && <HostNotice tone="error">{error}</HostNotice>} + <HostField label={t('已安装的工作台应用')}> + <HostSelect aria-label={t('已安装的工作台应用')} disabled={loading} value={selected} onChange={event => setSelected(event.target.value)}> <option value="">{t('请选择应用')}</option> {items.map(value => <option key={value.applicationKey} value={value.applicationKey}> {itemTitle(value)} · {t(value.origin.kind === 'local' ? '本机' : '云端')} · {t('所有者：{name}', { name: value.ownerUserId || t('全局安装') })} </option>)} - </select> - </label> - {loading && <p role="status">{t('正在加载…')}</p>} - {!loading && !error && !items.length && <p>{t('没有可配置的工作台应用')}</p>} + </HostSelect> + </HostField> + {loading && <SkeletonLines rows={3}/>} + {!loading && !error && !items.length && <HostNotice>{t('没有可配置的工作台应用')}</HostNotice>} {item && <InstalledConfiguration key={token + ':' + item.applicationKey + ':' + item.revision} token={token} item={item} />} - </section>; + </HostSection>; } export function WorkbenchApplicationConfigEditor({ token }: { token: string }) { diff --git a/src/frontend/src/workbench/WorkspaceApplication.tsx b/src/frontend/src/workbench/WorkspaceApplication.tsx index 9da5194b..1d861548 100644 --- a/src/frontend/src/workbench/WorkspaceApplication.tsx +++ b/src/frontend/src/workbench/WorkspaceApplication.tsx @@ -7,6 +7,11 @@ import { t } from '../i18n'; import { reloadDirectory, useApplicationDirectory, type CatalogItem } from './catalog'; import {DiagnosticFailure} from './DiagnosticFailure'; import { applicationRoute } from './workspaceNavigation'; +import { HostNotice } from './ui'; + +function Loading() { + return <HostNotice tone="loading" placement="page">{t('正在加载应用目录…')}</HostNotice>; +} function unavailable(item: CatalogItem) { const reason = item.availability.reason; @@ -22,7 +27,7 @@ export function WorkspaceApplication() { const item = catalog.items.find(value => value.applicationKey === route?.applicationKey); if (!route) return <DiagnosticFailure message={t('应用地址无效')} onRetry={()=>void reloadDirectory()}/>; if (catalog.error) return <DiagnosticFailure applicationKey={route.applicationKey} onRetry={()=>void reloadDirectory()}/>; - if (catalog.loading && !item) return <p role="status">{t('正在加载应用目录…')}</p>; + if (catalog.loading && !item) return <Loading />; if (!item) return <MissingApplication key={JSON.stringify([catalog.identity,route.applicationKey])} applicationKey={route.applicationKey} empty={catalog.items.length === 0} />; if (!item.availability.available) return <DiagnosticFailure message={unavailable(item)} onRetry={()=>void reloadDirectory()}/>; if (item.declaration.target.kind === 'external' && item.declaration.target.mode === 'embedded') @@ -44,12 +49,12 @@ function MissingApplication({applicationKey, empty}:{applicationKey:string; empt }); return ()=>controller.abort(); },[applicationKey,attempt]); - if(!result.done)return <p role="status">{t('正在加载应用目录…')}</p>; + if(!result.done)return <Loading />; const retry=()=>{setResult({done:false});setAttempt(value=>value+1);void reloadDirectory();}; const message=result.failed ? t('应用目录加载失败') : result.item && !result.item.availability.available ? unavailable(result.item) : t('应用不存在或你没有访问权限'); - return <section> - {empty && !result.item && <p role="status">{t('暂无可用应用')}</p>} + return <> + {empty && !result.item && <HostNotice>{t('暂无可用应用')}</HostNotice>} <DiagnosticFailure error={result.error} message={message} onRetry={retry}/> - </section>; + </>; } diff --git a/src/frontend/src/workbench/WorkspaceCapabilityDialog.tsx b/src/frontend/src/workbench/WorkspaceCapabilityDialog.tsx index 4248dad4..e133e9c6 100644 --- a/src/frontend/src/workbench/WorkspaceCapabilityDialog.tsx +++ b/src/frontend/src/workbench/WorkspaceCapabilityDialog.tsx @@ -1,5 +1,6 @@ import {useCallback,useEffect,useRef,useState} from 'react'; import {Modal} from 'antd'; +import {HostButton,HostField,HostSelect} from './ui'; import {t} from '../i18n'; import type {HostConfirm,HostPrompt} from './capabilityHost'; interface Pending {prompt:HostPrompt;resolve:(id:string)=>void;reject:(error:Error)=>void;clear:()=>void} @@ -24,13 +25,17 @@ export function useWorkspaceConfirmation(){ active.current=null;p.clear();setPending(null);p.resolve(selection); }; const dialog=pending?<Modal open title={t(TITLES[pending.prompt.kind])} footer={null} onCancel={cancel}> - <p>{pending.prompt.detail}</p> - {pending.prompt.files && <label>{t('文件')}<select value={selection} onChange={e=>setSelection(e.target.value)}> - <option value="">{t('请选择文件')}</option> - {pending.prompt.files.map(f=><option key={f.fileId} value={f.fileId}>{f.name}</option>)} - </select></label>} - <button type="button" onClick={cancel}>{t('取消')}</button> - <button type="button" onClick={allow} disabled={pending.prompt.kind==='file'&&!selection}>{t('允许')}</button> + <div className="jx-hostDialog"> + <p>{pending.prompt.detail}</p> + {pending.prompt.files && <HostField label={t('文件')}><HostSelect value={selection} onChange={e=>setSelection(e.target.value)}> + <option value="">{t('请选择文件')}</option> + {pending.prompt.files.map(f=><option key={f.fileId} value={f.fileId}>{f.name}</option>)} + </HostSelect></HostField>} + <div className="jx-hostDialog-actions"> + <HostButton onClick={cancel}>{t('取消')}</HostButton> + <HostButton tone="primary" onClick={allow} disabled={pending.prompt.kind==='file'&&!selection}>{t('允许')}</HostButton> + </div> + </div> </Modal>:null; return {confirm,dialog}; } diff --git a/src/frontend/src/workbench/WorkspaceRouteHeader.tsx b/src/frontend/src/workbench/WorkspaceRouteHeader.tsx index 60cbbc1c..8241bf08 100644 --- a/src/frontend/src/workbench/WorkspaceRouteHeader.tsx +++ b/src/frontend/src/workbench/WorkspaceRouteHeader.tsx @@ -1,5 +1,6 @@ import {useEffect,useRef} from 'react'; import {selectedWorkspaceView} from './workspaceView'; +import {HostButton} from './ui'; interface HeaderView {id:string;path:string;title:string} interface Props { active:boolean;hostNavigation:boolean;title:string;path:string;views:readonly HeaderView[]; @@ -36,10 +37,10 @@ export function WorkspaceRouteHeader({active,hostNavigation,title,path,views,lab && !current.closest('button,a,[role="button"]')))return; target.focus({preventScroll:true}); },[active,pathname,hostNavigation]); - return <> - <h1 ref={heading} tabIndex={-1}>{caption}</h1> - {!!views.length&&<nav aria-label={label}>{views.map(value=><button type="button" key={value.id} - aria-current={view?.id===value.id?'page':undefined} - onClick={()=>onNavigate('/'+value.path.replace(/^\/+/,'') )}>{value.title}</button>)}</nav>} - </>; + return <div className="jx-workspaceHeader"> + <h1 ref={heading} tabIndex={-1} className="jx-workspaceHeader-title">{caption}</h1> + {!!views.length&&<nav aria-label={label} className="jx-workspaceHeader-views">{views.map(value=><HostButton key={value.id} + tone="text" size="small" className="jx-workspaceHeader-view" aria-current={view?.id===value.id?'page':undefined} + onClick={()=>onNavigate('/'+value.path.replace(/^\/+/,'') )}>{value.title}</HostButton>)}</nav>} + </div>; } diff --git a/src/frontend/src/workbench/WorkspaceRuntime.tsx b/src/frontend/src/workbench/WorkspaceRuntime.tsx index 44f3eac6..9e31b638 100644 --- a/src/frontend/src/workbench/WorkspaceRuntime.tsx +++ b/src/frontend/src/workbench/WorkspaceRuntime.tsx @@ -16,11 +16,12 @@ import {identityKey,createSessionRegistration} from './invalidation'; import {createWorkspaceResourceExtension} from './resourceApi'; import {ActivityWorkspace} from './ActivityWorkspace'; import {applicationText} from './externalApi'; -import {SourceStatus} from './SourceStatus'; import {sourceLabel} from './sourceIdentity'; import {combineExtensions} from './combineExtensions'; import {WorkspaceRouteHeader} from './WorkspaceRouteHeader'; import {selectedWorkspaceView} from './workspaceView'; +import {HostButton} from './ui'; +import './workspace.css'; interface RuntimeDocument {launch:WorkspaceLaunch;item:CatalogItem} /** Mounted beside the keyed business panel, across all builtin and application routes. */ @@ -49,7 +50,7 @@ export function WorkspaceRuntime(){ if(launch.applicationKey!==identity.applicationKey||launch.context.applicationKey!==identity.applicationKey||launch.binding.installId!==identity.installId||launch.binding.packageRevision!==identity.packageRevision||launch.binding.origin.id!==identity.origin||launch.binding.executionScope!==identity.executionScope||launch.module.id!==moduleId||launch.module.surface!=='workspace')throw new Error('installation_binding_invalid'); return {launch:{...launch,context:{...launch.context,instanceId}},item}; },[catalog.items]); - return <><SourceStatus failures={catalog.sourceErrors}/><WorkspaceInstances active={active} ownerScope={ownerScope} load={load} + return <><WorkspaceInstances active={active} ownerScope={ownerScope} load={load} validate={entry=>catalog.loading||!!catalog.items.find(value=>value.applicationKey===entry.identity.applicationKey&&value.availability.available&&value.binding?.installId===entry.identity.installId&&value.binding.origin.id===entry.identity.origin)} register={register} onDispose={()=>{}} onBlocked={current=>{ if(current)openWorkspaceApplication(current.applicationKey,routes.current.get(current.applicationKey)?.path??'/'); @@ -76,11 +77,13 @@ function RuntimeFrame({entry,state,actions,route,ownerScope,active,hostNavigatio openWorkspaceApplication(item.applicationKey,path,value.replace===true,value.requestId);return {path,requestId:value.requestId}; }}}),[entry,item.applicationKey,route]); const title=applicationText(item.declaration.title)+' · '+t(sourceLabel(launch.binding.origin)); - return <section aria-label={title} style={{height:'100%'}}> - <button type="button" onClick={()=>void actions.close().then(ok=>{if(ok)navigateTo(pathForPanel('app_center'));})}>{t('关闭')}</button> - <WorkspaceRouteHeader active={active} hostNavigation={hostNavigation} title={title} path={route.path} - views={(item.declaration.views??[]).map(view=>({...view,title:applicationText(view.title)}))} - label={t('应用二级导航')} onNavigate={path=>openWorkspaceApplication(item.applicationKey,path)}/> + return <section aria-label={title} className="jx-workspaceFrame"> + <header className="jx-workspaceFrame-header"> + <WorkspaceRouteHeader active={active} hostNavigation={hostNavigation} title={title} path={route.path} + views={(item.declaration.views??[]).map(view=>({...view,title:applicationText(view.title)}))} + label={t('应用二级导航')} onNavigate={path=>openWorkspaceApplication(item.applicationKey,path)}/> + <HostButton tone="text" size="small" onClick={()=>void actions.close().then(ok=>{if(ok)navigateTo(pathForPanel('app_center'));})}>{t('关闭')}</HostButton> + </header> <ActivityWorkspace context={activity} declared={[...(item.declaration.permissions??[])]} resourceId={resourceId} render={activityExtension=><PluginWorkspaceFrame launch={launch} instanceId={entry.instanceId} signal={entry.signal} ownerScope={ownerScope} route={route} onReady={actions.ready} onLoading={actions.loading} onFailed={actions.failed} onRetry={actions.retry} theme={themeMode==='dark'||(themeMode==='system'&&systemPrefersDark())?'dark':'light'} locale={getLang()} diff --git a/src/frontend/src/workbench/activity.css b/src/frontend/src/workbench/activity.css index 76f4a228..47d3383d 100644 --- a/src/frontend/src/workbench/activity.css +++ b/src/frontend/src/workbench/activity.css @@ -7,8 +7,11 @@ background: var(--color-bg-layout); } .jx-activityPanel { - max-height: 180px; overflow: auto; padding: 8px 12px; flex-shrink: 0; + display: grid; gap: 4px; max-height: 180px; overflow: auto; padding: 8px 16px; flex-shrink: 0; + border-bottom: 1px solid var(--color-border); color: var(--color-text); background: var(--color-bg-container); } -.jx-activityPanel article {border-bottom: 1px solid var(--color-border); padding: 4px;} -.jx-activityPanel p {margin: 4px 0;} +.jx-activityPanel-item + .jx-activityPanel-item { border-top: 1px solid var(--color-border); } +.jx-activityPanel-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; } +.jx-activityPanel-text { flex: 1 1 240px; min-width: 0; font-size: .8125rem; overflow-wrap: anywhere; } +.jx-activityPanel-text p { margin: 2px 0 0; color: var(--color-text-secondary); } diff --git a/src/frontend/src/workbench/lifecycle/WorkspaceInstances.tsx b/src/frontend/src/workbench/lifecycle/WorkspaceInstances.tsx index 23d5325c..4d136159 100644 --- a/src/frontend/src/workbench/lifecycle/WorkspaceInstances.tsx +++ b/src/frontend/src/workbench/lifecycle/WorkspaceInstances.tsx @@ -1,7 +1,10 @@ +import {Modal} from 'antd'; import {DiagnosticFailure} from '../DiagnosticFailure'; import {workspaceFailureCode} from '../workspaceFailureCode'; import {Component,useEffect,useMemo,type ReactNode} from 'react'; import {t} from '../../i18n'; +import {HostNotice} from '../ui'; +import '../workspace.css'; import {createStateExtension,type StateExtension} from '../stateExtension'; import {InstancePool,instanceKey,type ApplicationInstance,type InstanceIdentity} from './instancePool'; @@ -22,6 +25,12 @@ interface Props<T> { validate:(instance:ApplicationInstance<T>)=>boolean; register?:(instance:ApplicationInstance<T>,revoke:()=>void)=>()=>void; } +function confirmDiscard(){ + return new Promise<boolean>(resolve=>Modal.confirm({ + title:t('此页面有未保存内容。是否放弃更改并离开？'),okText:t('放弃更改'),cancelText:t('留在此页'), + okButtonProps:{danger:true},onOk:()=>resolve(true),onCancel:()=>resolve(false), + })); +} export function WorkspaceInstances<T>(props:Props<T>){ return <OwnedWorkspaceInstances key={props.ownerScope} {...props}/>; } @@ -32,7 +41,7 @@ class OwnedWorkspaceInstances<T> extends Component<Props<T>,{entries:readonly Ap private mounted=false; private unsubscribe:(()=>void)|undefined; private pool=new InstancePool<T>({ - confirmDiscard:entry=>this.props.confirmDiscard?.(entry)??window.confirm(t('此页面有未保存内容。是否放弃更改并离开？')), + confirmDiscard:entry=>this.props.confirmDiscard?.(entry)??confirmDiscard(), dispose:entry=>this.props.onDispose(entry), }); private beforeUnload=(event:BeforeUnloadEvent)=>{ @@ -87,9 +96,9 @@ function RetainedInstance<T>({entry,pool,schemaVersion,render,register}:{ close:()=>pool.close(entry.id), }; return <section hidden={entry.id!==pool.currentId} aria-label={entry.identity.applicationKey} - data-instance-id={entry.instanceId} data-instance-status={entry.status} style={{height:'100%'}}> + data-instance-id={entry.instanceId} data-instance-status={entry.status} className="jx-workspaceInstance"> {entry.error!==undefined && entry.status!=='closed' && <DiagnosticFailure applicationKey={entry.identity.applicationKey} error={entry.error} code={workspaceFailureCode(entry.error)} onRetry={actions.retry}/>} - {entry.error===undefined && entry.value===undefined && <p role="status">{t('正在加载插件模块…')}</p>} + {entry.error===undefined && entry.value===undefined && <HostNotice tone="loading" placement="page">{t('正在加载插件模块…')}</HostNotice>} {entry.value!==undefined && entry.error===undefined && render(entry,extension,actions)} </section>; } diff --git a/src/frontend/src/workbench/ui/HostUI.tsx b/src/frontend/src/workbench/ui/HostUI.tsx new file mode 100644 index 00000000..53309901 --- /dev/null +++ b/src/frontend/src/workbench/ui/HostUI.tsx @@ -0,0 +1,101 @@ +import type {ComponentProps, ReactNode} from 'react'; +import {Button, Checkbox, Input} from 'antd'; +import './host-ui.css'; + +/** + * The workbench host's only UI layer. Workbench components never render raw + * <button>/<input>/<select>/<textarea>: `npm run check:controls` rejects them + * outside this folder, so every host surface inherits the v2 tokens and the + * antd theme (dark mode included) instead of browser defaults. + * + * Native semantics are kept on purpose: labels wrap their control, <select> + * stays native, and status/alert roles are explicit. Browser tests and screen + * readers address these by role and label. + */ + +type ButtonTone = 'primary' | 'secondary' | 'text' | 'danger'; +interface HostButtonProps extends Omit<ComponentProps<typeof Button>, 'type' | 'htmlType' | 'variant' | 'color' | 'danger'> { + /** One primary per view. Secondary is a filled neutral button; v2 has no outlined buttons. */ + tone?: ButtonTone; + submit?: boolean; +} +export function HostButton({tone = 'secondary', submit, size, className, ...props}: HostButtonProps) { + const look = tone === 'primary' ? {type: 'primary' as const} + : tone === 'text' ? {type: 'text' as const} + : tone === 'danger' ? {type: 'text' as const, danger: true} + : {color: 'default' as const, variant: 'filled' as const}; + // autoInsertSpace off: "重试" must not become "重 试" (visible text and accessible name). + return <Button {...look} {...props} size={size ?? 'middle'} autoInsertSpace={false} + htmlType={submit ? 'submit' : 'button'} className={'jx-hostButton' + (className ? ' ' + className : '')} />; +} + +type NoticeTone = 'info' | 'loading' | 'success' | 'warning' | 'error'; +interface HostNoticeProps { + tone?: NoticeTone; + /** page: the whole surface is this state (loading, denied, failed); inline: a line inside a form or panel. */ + placement?: 'inline' | 'page'; + children: ReactNode; + actions?: ReactNode; +} +/** Errors are alerts; everything else is a polite status. One line of text, no spinner. */ +export function HostNotice({tone = 'info', placement = 'inline', children, actions}: HostNoticeProps) { + return <div role={tone === 'error' ? 'alert' : 'status'} + className={'jx-hostNotice jx-hostNotice--' + tone + ' jx-hostNotice--' + placement}> + <div className="jx-hostNotice-body">{children}</div> + {actions && <HostToolbar>{actions}</HostToolbar>} + </div>; +} + +/** Admin/config block: heading, one-line purpose, toolbar, then content. */ +export function HostSection({title, description, actions, children, level = 3}: { + title: string; description?: ReactNode; actions?: ReactNode; children?: ReactNode; level?: 2 | 3; +}) { + const Heading = level === 2 ? 'h2' : 'h3'; + return <section aria-label={title} className="jx-hostSection"> + <header className="jx-hostSection-header"> + <Heading className="jx-hostSection-title">{title}</Heading> + {description && <p className="jx-hostSection-description">{description}</p>} + </header> + {actions && <HostToolbar>{actions}</HostToolbar>} + {children} + </section>; +} + +export function HostToolbar({children}: {children: ReactNode}) { + return <div className="jx-hostToolbar">{children}</div>; +} + +/** A standalone hint under a group or form; field hints go through HostField. */ +export function HostHint({children}: {children: ReactNode}) { + return <p className="jx-hostHint">{children}</p>; +} + +/** A labelled group of fields. The legend names the group for getByRole('group'). */ +export function HostFieldset({legend, disabled, children}: {legend: ReactNode; disabled?: boolean; children: ReactNode}) { + return <fieldset className="jx-hostFieldset" disabled={disabled}> + <legend className="jx-hostFieldset-legend">{legend}</legend> + {children} + </fieldset>; +} + +/** Visible label wrapping its control; the hint sits outside so it never joins the accessible name. */ +export function HostField({label, hint, children}: {label: ReactNode; hint?: ReactNode; children: ReactNode}) { + return <div className="jx-hostField"> + <label className="jx-hostField-control"><span className="jx-hostField-label">{label}</span>{children}</label> + {hint && <p className="jx-hostField-hint">{hint}</p>} + </div>; +} + +/** Native select: keyboard, form validation and selectOption() behave like the platform. */ +export function HostSelect({className, ...props}: ComponentProps<'select'>) { + return <select {...props} className={'jx-hostSelect' + (className ? ' ' + className : '')} />; +} + +// antd controls already carry the theme; re-exported so workbench imports stay in one place. +export {Checkbox as HostCheckbox, Input as HostInput}; +export const HostTextArea = Input.TextArea; + +/** Secondary text: revision, keys, counts. */ +export function HostMeta({children}: {children: ReactNode}) { + return <span className="jx-hostMeta">{children}</span>; +} diff --git a/src/frontend/src/workbench/ui/host-ui.css b/src/frontend/src/workbench/ui/host-ui.css new file mode 100644 index 00000000..3abe667f --- /dev/null +++ b/src/frontend/src/workbench/ui/host-ui.css @@ -0,0 +1,114 @@ +/* Workbench host UI layer (v2). Components in HostUI.tsx own the control and + notice classes; the list/stats/dialog/layout classes at the end are shared + layout helpers applied by className. Nothing styles bare elements, so a + surface without these classes stays visibly unfinished in review instead of + silently inheriting a parent's rules. */ + +.jx-hostButton { max-width: 100%; } + +/* ── Notice: one line of state, colour + shape ── */ +.jx-hostNotice { + display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; + color: var(--color-text-secondary); font-size: .8125rem; line-height: 1.5; + overflow-wrap: anywhere; +} +.jx-hostNotice-body { min-width: 0; flex: 1 1 240px; } +.jx-hostNotice-body > p { margin: 0; } +.jx-hostNotice-body > p + p { margin-top: 4px; } +.jx-hostNotice--inline { padding: 8px 12px; border-radius: var(--radius-xs); background: var(--color-bg-layout); } +.jx-hostNotice--inline.jx-hostNotice--loading { padding: 0; background: none; color: var(--color-text-tertiary); } +.jx-hostNotice--inline.jx-hostNotice--success { background: var(--color-success-light); color: var(--color-success-text); } +.jx-hostNotice--inline.jx-hostNotice--warning { background: var(--color-warning-light); color: var(--color-warning-text); } +.jx-hostNotice--inline.jx-hostNotice--error { background: var(--color-error-light); color: var(--color-error-text); } +.jx-hostNotice--inline::before { + content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; + background: var(--color-fill-deep); +} +.jx-hostNotice--loading::before { display: none; } +.jx-hostNotice--success::before { background: var(--color-success); } +.jx-hostNotice--warning::before { background: var(--color-warning); } +.jx-hostNotice--error::before { border-radius: 1px; background: var(--color-error); } + +/* page: the surface itself is the state. Centred, readable width, no card. */ +.jx-hostNotice--page { + flex-direction: column; justify-content: center; gap: 16px; + box-sizing: border-box; min-height: 240px; padding: 48px 24px; + text-align: center; font-size: .875rem; +} +.jx-hostNotice--page .jx-hostNotice-body { flex: none; max-width: 480px; } +.jx-hostNotice--page.jx-hostNotice--error .jx-hostNotice-body > p:first-child { color: var(--color-text); font-weight: 500; } +.jx-hostNotice--page.jx-hostNotice--loading { color: var(--color-text-tertiary); } +.jx-hostNotice--page .jx-hostToolbar { justify-content: center; } +.jx-hostNotice code { + padding: 1px 6px; border-radius: var(--radius-xs); background: var(--color-fill-hover); + color: var(--color-text); font-family: var(--font-family-mono); font-size: .75rem; +} + +.jx-hostToolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } + +/* ── Section / form ── */ +.jx-hostSection { display: grid; gap: 16px; min-width: 0; } +.jx-hostSection + .jx-hostSection { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-border); } +.jx-hostSection-header { display: grid; gap: 4px; } +.jx-hostSection-title { margin: 0; color: var(--color-text); font-size: .9375rem; font-weight: 600; line-height: 1.4; } +.jx-hostSection-description { margin: 0; color: var(--color-text-secondary); font-size: .8125rem; line-height: 1.6; } + +.jx-hostFieldset { + display: grid; gap: 16px; min-width: 0; margin: 0; padding: 16px; + border: 1px solid var(--color-border); border-radius: var(--radius-sm); +} +.jx-hostFieldset-legend { padding: 0 4px; color: var(--color-text); font-size: .875rem; font-weight: 500; } +.jx-hostFieldset .jx-hostFieldset { padding: 12px; border-radius: var(--radius-xs); } + +.jx-hostField { display: grid; gap: 4px; min-width: 0; } +.jx-hostField-control { display: grid; gap: 4px; min-width: 0; } +.jx-hostField-label { color: var(--color-text); font-size: .8125rem; font-weight: 500; } +.jx-hostField-hint, .jx-hostHint { margin: 0; color: var(--color-text-tertiary); font-size: .75rem; line-height: 1.5; } + +.jx-hostSelect { + box-sizing: border-box; width: 100%; min-width: 0; height: 32px; padding: 0 32px 0 11px; + border: 1px solid var(--color-border); border-radius: var(--radius-xs); + background-color: var(--color-bg-container); color: var(--color-text); + font: inherit; font-size: .875rem; cursor: pointer; + appearance: none; + /* Chevron drawn from currentColor so it follows the theme. */ + background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); + background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%; + background-size: 4px 4px; background-repeat: no-repeat; + transition: border-color var(--motion-duration-fast) var(--motion-ease-standard); +} +.jx-hostSelect:hover:not(:disabled) { border-color: var(--color-primary-hover); } +.jx-hostSelect:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } +.jx-hostSelect:disabled { opacity: .4; cursor: not-allowed; } + +.jx-hostMeta { color: var(--color-text-tertiary); font-size: .75rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } + +/* ── List rows (admin catalogues, diagnostics) ── */ +.jx-hostList { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } +.jx-hostList:empty { display: none; } +.jx-hostList-row { + display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; + padding: 8px 12px; overflow-wrap: anywhere; +} +.jx-hostList-row + .jx-hostList-row { border-top: 1px solid var(--color-border); } +.jx-hostList-title { flex: 1 1 200px; min-width: 0; color: var(--color-text); font-size: .875rem; } +.jx-hostList-row code { font-family: var(--font-family-mono); font-size: .75rem; } + +/* ── Metrics ── */ +.jx-hostStats { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; margin: 0; } +.jx-hostStats > div { padding: 12px; border-radius: var(--radius-xs); background: var(--color-bg-layout); } +.jx-hostStats dt { color: var(--color-text-tertiary); font-size: .75rem; } +.jx-hostStats dd { + margin: 4px 0 0; color: var(--color-text); font-family: var(--font-family-number); + font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; +} + +/* ── Dialog actions (modal bodies rendered by the host) ── */ +.jx-hostDialog { display: grid; gap: 16px; } +.jx-hostDialog > p { margin: 0; color: var(--color-text-secondary); overflow-wrap: anywhere; } +.jx-hostDialog-actions { display: flex; justify-content: flex-end; gap: 8px; } + +.jx-hostSections { display: grid; min-width: 0; } +.jx-hostFieldGroup { display: grid; gap: 8px; min-width: 0; } +.jx-hostInlineForm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; } +.jx-hostInlineForm > .jx-hostField { flex: 1 1 240px; } diff --git a/src/frontend/src/workbench/ui/index.ts b/src/frontend/src/workbench/ui/index.ts new file mode 100644 index 00000000..5f568191 --- /dev/null +++ b/src/frontend/src/workbench/ui/index.ts @@ -0,0 +1,4 @@ +export { + HostButton, HostCheckbox, HostField, HostFieldset, HostHint, HostInput, HostMeta, HostNotice, HostSection, + HostSelect, HostTextArea, HostToolbar, +} from './HostUI'; diff --git a/src/frontend/src/workbench/usePlatformConfirmation.tsx b/src/frontend/src/workbench/usePlatformConfirmation.tsx index 2b908250..e0533f1b 100644 --- a/src/frontend/src/workbench/usePlatformConfirmation.tsx +++ b/src/frontend/src/workbench/usePlatformConfirmation.tsx @@ -1,6 +1,7 @@ import {t} from '../i18n'; import {useCallback,useEffect,useRef,useState} from 'react'; import {Modal} from 'antd'; +import {HostButton} from './ui'; interface Pending { method:string;detail:string;perform:()=>Promise<unknown>; resolve:(value:unknown)=>void;reject:(error:Error)=>void;clear:()=>void; @@ -29,6 +30,8 @@ export function usePlatformConfirmation(){ try{void item.perform().then(item.resolve,item.reject);}catch(error){item.reject(error instanceof Error?error:new Error('bridge_error'));} }; return {approve,dialog:pending?<Modal open title={t(pending.method==='file.pick'?'选择设备文件并上传':pending.method==='file.save'?'保存文件':'打开外部链接')} footer={null} onCancel={cancel}> - <p>{pending.detail}</p><button type="button" onClick={cancel}>{t('取消')}</button> - <button type="button" onClick={allow}>{t('继续')}</button></Modal>:null}; + <div className="jx-hostDialog"><p>{pending.detail}</p><div className="jx-hostDialog-actions"> + <HostButton onClick={cancel}>{t('取消')}</HostButton> + <HostButton tone="primary" onClick={allow}>{t('继续')}</HostButton> + </div></div></Modal>:null}; } diff --git a/src/frontend/src/workbench/workspace.css b/src/frontend/src/workbench/workspace.css new file mode 100644 index 00000000..bc3bb654 --- /dev/null +++ b/src/frontend/src/workbench/workspace.css @@ -0,0 +1,43 @@ +/* Workbench application surfaces: the frame around a plugin or embedded page. */ + +.jx-workspaceInstance { height: 100%; } +.jx-workspaceInstance[hidden] { display: none; } + +.jx-workspaceFrame { display: flex; flex-direction: column; height: 100%; min-height: 0; } +.jx-workspaceFrame-header { + display: flex; align-items: center; gap: 12px; min-width: 0; + padding: 12px 16px; border-bottom: 1px solid var(--color-border); +} + +.jx-workspaceHeader { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; } +.jx-workspaceHeader-title { + margin: 0; min-width: 0; overflow: hidden; color: var(--color-text); + font-size: .9375rem; font-weight: 600; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; +} +.jx-workspaceHeader-title:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } +.jx-workspaceHeader-views { display: flex; flex-wrap: wrap; gap: 4px; } +.jx-workspaceHeader-view.jx-hostButton[aria-current='page'] { background: var(--color-primary-light); color: var(--color-primary-text); } + +/* Activity permissions sit between the header and the application, as one quiet line. */ +.jx-workspaceActivity { display: grid; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--color-border); } + +.jx-workspacePlugin { position: relative; flex: 1; min-height: 400px; } +.jx-workspacePlugin > .jx-hostNotice--inline { margin: 8px 16px; } +.jx-workspacePlugin-frame { display: block; width: 100%; height: 100%; min-height: 400px; border: 0; } +/* The iframe must keep loading underneath to complete its handshake. */ +.jx-workspacePlugin-loading { position: absolute; inset: 0; z-index: 1; background: var(--color-bg-container); pointer-events: none; } + +.jx-workspaceEmbed { display: flex; flex-direction: column; width: 100%; min-height: 400px; } +.jx-workspaceEmbed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; } +.jx-workspaceEmbed-bar + .jx-hostNotice { margin: 0 16px 8px; } +.jx-workspaceEmbed-status { + display: inline-flex; flex: 1 1 200px; align-items: center; gap: 8px; min-width: 0; + color: var(--color-text-tertiary); font-size: .8125rem; +} +.jx-workspaceEmbed-status::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-fill-deep); } +.jx-workspaceEmbed-status--success::before { background: var(--color-success); } +.jx-workspaceEmbed-status--warning { color: var(--color-warning-text); } +.jx-workspaceEmbed-status--warning::before { background: var(--color-warning); } +.jx-workspaceEmbed-status--error { color: var(--color-error-text); } +.jx-workspaceEmbed-status--error::before { border-radius: 1px; background: var(--color-error); } +.jx-workspaceEmbed-frame { display: block; width: 100%; height: 70vh; min-height: 400px; border: 0; }
Workspace
Module content
{JSON.stringify(constraint.schema ?? {}, null, 2)}
{JSON.stringify(document, null, 2)}
- {JSON.stringify({ - event_decisions: metrics.event_decisions, - review_verdicts: metrics.review_verdicts, - draft_statuses: metrics.draft_statuses, - source_acceptance: metrics.source_acceptance, - daily_30d: metrics.daily_30d, - }, null, 2)} -