Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 董宏凯
|
bb09c5991b | ||
|
董宏凯
|
760b88d6f1 |
No files matched your search
@@ -1,20 +0,0 @@
|
|||||||
import os
|
|
||||||
|
|
||||||
import paramiko
|
|
||||||
|
|
||||||
|
|
||||||
client = paramiko.SSHClient()
|
|
||||||
client.set_missing_host_key_policy(paramiko.AutoAddPolicy())
|
|
||||||
client.connect(
|
|
||||||
"119.254.86.251",
|
|
||||||
port=22322,
|
|
||||||
username="root",
|
|
||||||
password=os.environ["TARGET_SSH_PASSWORD"],
|
|
||||||
timeout=15,
|
|
||||||
auth_timeout=15,
|
|
||||||
banner_timeout=15,
|
|
||||||
)
|
|
||||||
_, stdout, stderr = client.exec_command(os.environ["TARGET_SSH_COMMAND"], timeout=30)
|
|
||||||
print(stdout.read().decode(errors="replace"), end="")
|
|
||||||
print(stderr.read().decode(errors="replace"), end="")
|
|
||||||
client.close()
|
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
---
|
||||||
|
name: deerflow-ui-guard
|
||||||
|
description: Improve or review UI in the DeerFlow Vite/React frontend while preserving its light, dark-blue, and light-blue themes, Radix/shadcn-style primitives, Chinese enterprise density, embedded routes, and Chrome 109 compatibility. Use for visual refinements, new frontend pages/components, UI reviews, token cleanup, or design-system work under frontend-web/.
|
||||||
|
---
|
||||||
|
|
||||||
|
# DeerFlow UI Guard
|
||||||
|
|
||||||
|
Use this skill only in this repository. Preserve the product's existing visual system; do not replace it with a generic SaaS template or a new component library.
|
||||||
|
|
||||||
|
## Read the relevant sources first
|
||||||
|
|
||||||
|
1. Read `references/project-sources.md`, then the relevant theme specification.
|
||||||
|
2. Inspect the page and the nearest existing components before proposing or changing UI.
|
||||||
|
3. Read `frontend-web/src/styles/globals.css` and the affected primitives under `frontend-web/src/components/ui/` before changing tokens, shared styles, or variants.
|
||||||
|
|
||||||
|
## Design and implementation rules
|
||||||
|
|
||||||
|
- Reuse the existing Radix/shadcn-style primitives, `lucide-react`, Tailwind v4, and established CSS variables. Do not add Ant Design, another component system, or a visual-effects package unless the user explicitly asks.
|
||||||
|
- Keep all three themes correct: light/red, dark/blue, and light-blue. Prefer semantic classes and existing variables over raw color values. When a new token is necessary, define matching values for every theme.
|
||||||
|
- Preserve Chinese enterprise-product density and task completion speed. Make hierarchy, primary action, status, empty states, error recovery, and keyboard focus clearer before adding decoration.
|
||||||
|
- Keep the shell, deep links, authentication, embed/isolation behavior, sidebar menu semantics, and responsive layout unchanged unless the request explicitly targets them.
|
||||||
|
- Avoid unscoped global overrides and `!important`; place page-specific styling beside the feature and make selectors local.
|
||||||
|
- Support the Chrome 109 constraint. Do not introduce unguarded `oklch()`, `oklab()`, `lab()`, `lch()`, or `color-mix()` values.
|
||||||
|
- Preserve accessible names, keyboard interaction, visible `:focus-visible` states, sufficient contrast, and reduced-motion behavior for new or changed controls.
|
||||||
|
|
||||||
|
## Delivery workflow
|
||||||
|
|
||||||
|
1. State which existing theme and UI primitives the work will reuse.
|
||||||
|
2. Make the smallest coherent change; do not perform an unrelated visual sweep.
|
||||||
|
3. Validate with `pnpm typecheck`; when CSS or built UI changes, also run `pnpm build` and `pnpm check:chrome109-css` from `frontend-web/` when practical.
|
||||||
|
4. If a browser is available, inspect screenshots in light, dark, and light-blue modes. Otherwise say that visual verification remains outstanding.
|
||||||
|
5. For a review-only request, use `web-design-guidelines` as an additional quality gate when it is available, then distinguish confirmed issues from visual checks that still need a browser.
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
interface:
|
||||||
|
display_name: "DeerFlow UI Guard"
|
||||||
|
short_description: "Apply DeerFlow themes and UI safety checks."
|
||||||
|
default_prompt: "Use $deerflow-ui-guard to improve this DeerFlow UI without breaking its themes or legacy-browser support."
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
# DeerFlow UI sources
|
||||||
|
|
||||||
|
Read only the files relevant to the requested surface.
|
||||||
|
|
||||||
|
## Canonical themes
|
||||||
|
|
||||||
|
- Light/red: `frontend-web/docs/浅红色UI规范/README.md` and its focused section files.
|
||||||
|
- Dark/blue: `frontend-web/docs/ui规范-深蓝/README.md` and its focused section files.
|
||||||
|
- Light-blue: `frontend-web/docs/ui规范-浅蓝/浅蓝色ui规范.md`.
|
||||||
|
- Runtime tokens and browser fallbacks: `frontend-web/src/styles/globals.css`.
|
||||||
|
|
||||||
|
## Shared implementation
|
||||||
|
|
||||||
|
- UI primitives: `frontend-web/src/components/ui/`.
|
||||||
|
- Theme selection: `frontend-web/src/contexts/ThemeContext.tsx` and `frontend-web/src/App.tsx`.
|
||||||
|
- Application shell and embed behavior: `frontend-web/src/pages/PageRoutes.tsx`.
|
||||||
|
- Dynamic navigation: `frontend-web/src/core/page-layout/use-sidebar-menu.ts`.
|
||||||
|
|
||||||
|
## Required constraints
|
||||||
|
|
||||||
|
- Use `pnpm` in `frontend-web/`.
|
||||||
|
- Retain Chrome 109 compatibility; validate CSS with `pnpm check:chrome109-css` after a build.
|
||||||
|
- Do not move or replace public assets, route behavior, or authentication as part of a visual-only change.
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
# Never send source-control history, local dependencies, runtime state, or
|
|
||||||
# credentials to the Docker daemon. The offline images are built from the
|
|
||||||
# repository root by deploy/1panel-offline/Dockerfile.*.
|
|
||||||
.git
|
|
||||||
.runtime
|
|
||||||
.history
|
|
||||||
tmp
|
|
||||||
dist
|
|
||||||
|
|
||||||
# Credentials and environment-specific configuration are supplied at runtime
|
|
||||||
# through the offline delivery package, never copied into an image layer.
|
|
||||||
**/.env
|
|
||||||
**/.env.*
|
|
||||||
offline-backend-20260512/backend/.deer-flow
|
|
||||||
offline-backend-20260512/backend/logs
|
|
||||||
offline-backend-20260512/backend/docker-data
|
|
||||||
offline-backend-20260512/backend/dist
|
|
||||||
offline-backend-20260512/backend/wheelhouse
|
|
||||||
offline-backend-20260512/backend/offline-wheels
|
|
||||||
offline-backend-20260512/backend/.venv
|
|
||||||
offline-backend-20260512/backend/.pytest_cache
|
|
||||||
offline-backend-20260512/backend/.ruff_cache
|
|
||||||
|
|
||||||
# Reproducibly install frontend dependencies inside the image instead.
|
|
||||||
frontend-web/node_modules
|
|
||||||
frontend-web/dist
|
|
||||||
frontend-web/.vite
|
|
||||||
frontend-web/.offline-pack-build
|
|
||||||
frontend-web/.offline-extract-test
|
|
||||||
frontend-web/node_modules-offline-*.tar.gz
|
|
||||||
|
|
||||||
# Editor and operating-system metadata.
|
|
||||||
**/__pycache__
|
|
||||||
**/*.py[cod]
|
|
||||||
**/.DS_Store
|
|
||||||
+24
-30
@@ -1,9 +1,6 @@
|
|||||||
# Workspace/editor
|
# Workspace/editor
|
||||||
.vscode/*
|
.vscode/
|
||||||
!.vscode/launch.json
|
frontend-web/.vscode/
|
||||||
!.vscode/tasks.json
|
|
||||||
!.vscode/extensions.json
|
|
||||||
frontend-web/.vscode/
|
|
||||||
node_modules/
|
node_modules/
|
||||||
# Claude Code local-only settings (per-user permissions, not shared)
|
# Claude Code local-only settings (per-user permissions, not shared)
|
||||||
.claude/settings.local.json
|
.claude/settings.local.json
|
||||||
@@ -55,9 +52,8 @@ offline-backend-20260505/bundle/start_backend.sh
|
|||||||
offline-backend-20260505/bundle/stop_backend.sh
|
offline-backend-20260505/bundle/stop_backend.sh
|
||||||
|
|
||||||
# offline-backend-20260512 runtime artifacts (large files, local config, data)
|
# offline-backend-20260512 runtime artifacts (large files, local config, data)
|
||||||
offline-backend-20260512/.env.example
|
offline-backend-20260512/.env.example
|
||||||
offline-backend-20260512/.env
|
offline-backend-20260512/DEPLOY_BACKEND_OFFLINE_ZH.md
|
||||||
offline-backend-20260512/DEPLOY_BACKEND_OFFLINE_ZH.md
|
|
||||||
offline-backend-20260512/SHA256SUMS
|
offline-backend-20260512/SHA256SUMS
|
||||||
offline-backend-20260512/config.yaml.example
|
offline-backend-20260512/config.yaml.example
|
||||||
offline-backend-20260512/data/
|
offline-backend-20260512/data/
|
||||||
@@ -65,14 +61,12 @@ offline-backend-20260512/deerflow-backend-offline-image-20260505.tar
|
|||||||
offline-backend-20260512/extensions_config.json
|
offline-backend-20260512/extensions_config.json
|
||||||
offline-backend-20260512/skills/
|
offline-backend-20260512/skills/
|
||||||
offline-backend-20260512/wheelhouse/
|
offline-backend-20260512/wheelhouse/
|
||||||
offline-backend-20260512/backend/.deer-flow/data/*.db
|
offline-backend-20260512/backend/.deer-flow/data/*.db
|
||||||
offline-backend-20260512/backend/.deer-flow/data/*.db-*
|
offline-backend-20260512/backend/.deer-flow/data/*.db-*
|
||||||
offline-backend-20260512/backend/.deer-flow/*
|
offline-backend-20260512/backend/.deer-flow/*
|
||||||
offline-backend-20260512/backend/.env
|
offline-backend-20260512/start_backend.sh
|
||||||
offline-backend-20260512/backend/.env.local
|
offline-backend-20260512/stop_backend.sh
|
||||||
offline-backend-20260512/start_backend.sh
|
offline-backend-20260512/check_backend.sh
|
||||||
offline-backend-20260512/stop_backend.sh
|
|
||||||
offline-backend-20260512/check_backend.sh
|
|
||||||
|
|
||||||
hermes-agent-main/
|
hermes-agent-main/
|
||||||
|
|
||||||
@@ -84,15 +78,16 @@ offline-backend-20260512/backend/.deer-flow/*
|
|||||||
# Per-user skill_evolution overrides — runtime data written by the API
|
# Per-user skill_evolution overrides — runtime data written by the API
|
||||||
offline-backend-20260512/backend/skill_evolution.json
|
offline-backend-20260512/backend/skill_evolution.json
|
||||||
skills/
|
skills/
|
||||||
|
# Keep the project-local Codex UI guard under version control. The broad
|
||||||
|
# skills/ rule above still excludes runtime skill directories elsewhere.
|
||||||
|
!.codex/
|
||||||
|
!.codex/skills/
|
||||||
|
!.codex/skills/deerflow-ui-guard/
|
||||||
|
!.codex/skills/deerflow-ui-guard/**
|
||||||
hermes-agent-main/
|
hermes-agent-main/
|
||||||
.gitignore
|
.gitignore
|
||||||
offline-backend-20260512/backend/tests/*
|
offline-backend-20260512/backend/tests/*
|
||||||
!offline-backend-20260512/backend/tests/test_llmwiki_weknora.py
|
deploy
|
||||||
!offline-backend-20260512/backend/tests/test_health_auth_bypass.py
|
|
||||||
# Keep the model configuration regression coverage versioned even though
|
|
||||||
# this deployment repository otherwise ignores newly added backend tests.
|
|
||||||
!offline-backend-20260512/backend/tests/test_model_management.py
|
|
||||||
deploy
|
|
||||||
.history
|
.history
|
||||||
|
|
||||||
# Cloned third-party repos (local only)
|
# Cloned third-party repos (local only)
|
||||||
@@ -101,13 +96,12 @@ git-clone/
|
|||||||
# Repo-root offline dependency pack (local only)
|
# Repo-root offline dependency pack (local only)
|
||||||
/dist/
|
/dist/
|
||||||
|
|
||||||
# Frontend offline pack working directories
|
# Frontend offline pack working directories
|
||||||
frontend-web/.offline-pack-build/
|
frontend-web/.offline-pack-build/
|
||||||
frontend-web/.offline-extract-test/
|
frontend-web/.offline-extract-test/
|
||||||
frontend-web-node_modules-offline-*.tar.gz
|
|
||||||
|
.codegraph
|
||||||
.codegraph
|
codegraph.mdc
|
||||||
codegraph.mdc
|
|
||||||
|
|
||||||
docs/aidev-docs
|
docs/aidev-docs
|
||||||
docs/backups
|
docs/backups
|
||||||
|
|||||||
Vendored
-6
@@ -1,6 +0,0 @@
|
|||||||
{
|
|
||||||
"recommendations": [
|
|
||||||
"ms-python.python",
|
|
||||||
"ms-python.debugpy"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Vendored
-66
@@ -1,66 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "0.2.0",
|
|
||||||
"configurations": [
|
|
||||||
{
|
|
||||||
"name": "DeerFlow Backend FastAPI (8001)",
|
|
||||||
"type": "debugpy",
|
|
||||||
"request": "launch",
|
|
||||||
"module": "uvicorn",
|
|
||||||
"args": [
|
|
||||||
"app.gateway.app:app",
|
|
||||||
"--host",
|
|
||||||
"0.0.0.0",
|
|
||||||
"--port",
|
|
||||||
"8001",
|
|
||||||
"--reload"
|
|
||||||
],
|
|
||||||
"cwd": "${workspaceFolder}/offline-backend-20260512/backend",
|
|
||||||
"python": "${workspaceFolder}/offline-backend-20260512/backend/.venv/Scripts/python.exe",
|
|
||||||
"envFile": "${workspaceFolder}/offline-backend-20260512/.env",
|
|
||||||
"env": {
|
|
||||||
"PYTHONPATH": "${workspaceFolder}/offline-backend-20260512/backend;${workspaceFolder}/offline-backend-20260512/backend/.deer-flow/python-vendor",
|
|
||||||
"GATEWAY_CORS_ORIGINS": "http://localhost:5174,http://127.0.0.1:5174,http://localhost:8080,http://127.0.0.1:8080"
|
|
||||||
},
|
|
||||||
"console": "integratedTerminal",
|
|
||||||
"justMyCode": false,
|
|
||||||
"subProcess": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "DeerFlow Frontend Vite (5174)",
|
|
||||||
"type": "node",
|
|
||||||
"request": "launch",
|
|
||||||
"runtimeExecutable": "pnpm",
|
|
||||||
"runtimeArgs": [
|
|
||||||
"exec",
|
|
||||||
"vite",
|
|
||||||
"--host",
|
|
||||||
"0.0.0.0",
|
|
||||||
"--port",
|
|
||||||
"5174"
|
|
||||||
],
|
|
||||||
"cwd": "${workspaceFolder}/frontend-web",
|
|
||||||
"env": {
|
|
||||||
"VITE_BACKEND_BASE_URL": "http://127.0.0.1:8001",
|
|
||||||
"VITE_LANGGRAPH_BASE_URL": "http://127.0.0.1:8001/api"
|
|
||||||
},
|
|
||||||
"console": "integratedTerminal",
|
|
||||||
"outputCapture": "std",
|
|
||||||
"serverReadyAction": {
|
|
||||||
"pattern": "Local:\\s+(https?://[^\\s]+)",
|
|
||||||
"uriFormat": "%s",
|
|
||||||
"action": "debugWithChrome",
|
|
||||||
"webRoot": "${workspaceFolder}/frontend-web"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"compounds": [
|
|
||||||
{
|
|
||||||
"name": "DeerFlow Full Stack (Backend + Frontend)",
|
|
||||||
"configurations": [
|
|
||||||
"DeerFlow Backend FastAPI (8001)",
|
|
||||||
"DeerFlow Frontend Vite (5174)"
|
|
||||||
],
|
|
||||||
"stopAll": true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Vendored
-52
@@ -1,52 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "2.0.0",
|
|
||||||
"tasks": [
|
|
||||||
{
|
|
||||||
"label": "DeerFlow：检查本地开发环境",
|
|
||||||
"type": "shell",
|
|
||||||
"command": "$backendPython = '${workspaceFolder}\\offline-backend-20260512\\backend\\.venv\\Scripts\\python.exe'; if (-not (Test-Path -LiteralPath $backendPython)) { throw '后端虚拟环境不存在，请先在 backend 目录执行 uv sync' }; & $backendPython -c \"import uvicorn; print('Backend Python OK')\"; pnpm --dir '${workspaceFolder}\\frontend-web' exec vite --version",
|
|
||||||
"options": {
|
|
||||||
"shell": {
|
|
||||||
"executable": "powershell.exe",
|
|
||||||
"args": [
|
|
||||||
"-NoProfile",
|
|
||||||
"-ExecutionPolicy",
|
|
||||||
"Bypass",
|
|
||||||
"-Command"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"problemMatcher": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "DeerFlow：前端生产构建",
|
|
||||||
"type": "process",
|
|
||||||
"command": "pnpm",
|
|
||||||
"args": [
|
|
||||||
"build"
|
|
||||||
],
|
|
||||||
"options": {
|
|
||||||
"cwd": "${workspaceFolder}/frontend-web"
|
|
||||||
},
|
|
||||||
"problemMatcher": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "DeerFlow：WeKnora 专项测试",
|
|
||||||
"type": "process",
|
|
||||||
"command": "${workspaceFolder}/offline-backend-20260512/backend/.venv/Scripts/python.exe",
|
|
||||||
"args": [
|
|
||||||
"-m",
|
|
||||||
"pytest",
|
|
||||||
"tests/test_llmwiki_weknora.py",
|
|
||||||
"-v"
|
|
||||||
],
|
|
||||||
"options": {
|
|
||||||
"cwd": "${workspaceFolder}/offline-backend-20260512/backend",
|
|
||||||
"env": {
|
|
||||||
"PYTHONPATH": "."
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"problemMatcher": []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
# Design QA — skills card list
|
||||||
|
|
||||||
|
## Scope
|
||||||
|
|
||||||
|
Only the skill-card list presentation was changed. The page header, summary cards, filters, top actions, sidebar, and existing interactions were left intact.
|
||||||
|
|
||||||
|
## Visual evidence
|
||||||
|
|
||||||
|
- Source visual truth: `C:\Users\admin\AppData\Local\Temp\codex-clipboard-8ca03817-ebd4-43e1-9d7c-2119e87d331c.png`
|
||||||
|
- Implementation URL: `http://localhost:5173/#/page/workspace/skills`
|
||||||
|
- Implementation capture: `F:\react01\deeflow-code\deerflow-server\skills-card-list-implementation.png`
|
||||||
|
- Focused source/implementation comparison: `F:\react01\deeflow-code\deerflow-server\skills-card-list-comparison.png`
|
||||||
|
- Viewport and state: Edge, desktop light theme, default list mode. The supplied reference contains three sample skills; the live implementation currently exposes one skill, so the comparison focuses on the first card row rather than fabricated data.
|
||||||
|
|
||||||
|
## Findings
|
||||||
|
|
||||||
|
No actionable P0, P1, or P2 visual issue remains within the requested list-card scope.
|
||||||
|
|
||||||
|
- **Hierarchy and layout:** the card now begins with a large semantic skill icon, then groups name, existing status badges, description, and publisher before the existing tag, use-count, state, activity, and action areas. The five-column grid keeps the important skill identity visible while preserving the original live fields.
|
||||||
|
- **Typography and spacing:** the title, description, metadata, and tags use the existing product type scale with a compact 12px card radius and consistent horizontal rhythm. The row remains responsive and collapses cleanly on narrower widths.
|
||||||
|
- **Color and surfaces:** category icons use restrained solid blue/green/violet/amber surfaces, tags remain subdued, and enabled status uses a quiet green pill. Borders and hover surfaces follow the existing neutral card treatment; no gradients were introduced.
|
||||||
|
- **Image and icon fidelity:** the source uses symbolic skill artwork. The implementation uses the closest existing Lucide workflow, globe, file, and upload icons in colored circular surfaces rather than adding screenshot-derived artwork or a new custom asset.
|
||||||
|
- **Feature fidelity:** all pre-existing action controls, view modes, and list metadata stay visible. The reference's toggle was not copied as a fake interactive control because this page had no enable/disable mutation; its existing `enabled` data is shown as a read-only status pill instead.
|
||||||
|
|
||||||
|
## Comparison history
|
||||||
|
|
||||||
|
1. **[P1, fixed] The original live skill row had little identity or information hierarchy.**
|
||||||
|
- Earlier state: title, description, metadata, and the action cluster were visually detached, with no category icon or clear scanning order.
|
||||||
|
- Fix: rebuilt only the list/card row layout around existing data and handlers, added semantic colored icon surfaces, compact state/use/activity columns, and a unified action cluster.
|
||||||
|
- Evidence: `skills-card-list-comparison.png` contains the reference card row and the live implementation card row in one focused comparison.
|
||||||
|
|
||||||
|
## Interaction and engineering checks
|
||||||
|
|
||||||
|
- Edge interaction check: passed. The live row retains 7 existing action buttons; opening the details action displays its dialog.
|
||||||
|
- View-mode behavior: passed. The existing list/card view control still switches to card mode (`aria-pressed=true`); the card view uses the same restyled visual language.
|
||||||
|
- Browser runtime: two guest-bootstrap resource requests returned `401 Unauthorized` after reload. They are unrelated to the skill-card styling and did not prevent the list, details dialog, or view-mode control from working.
|
||||||
|
- `pnpm build`: passed. The project still emits the pre-existing `/images/deer.svg` runtime-resolution warning.
|
||||||
|
- `git diff --check`: passed; only existing line-ending notices were emitted for unrelated files.
|
||||||
|
|
||||||
|
## Implementation checklist
|
||||||
|
|
||||||
|
- [x] Skill-card list restyled without changing page chrome or filtering controls
|
||||||
|
- [x] Existing skill actions, metadata, and view modes retained
|
||||||
|
- [x] Live `enabled` data displayed without inventing a new mutation control
|
||||||
|
- [x] Source and implementation reviewed in a single focused comparison image
|
||||||
|
- [x] Edge interaction and production build verified
|
||||||
|
|
||||||
|
final result: passed
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
# Codex Test Content
|
|
||||||
|
|
||||||
This file is a small test-only change created to verify branch and commit workflow.
|
|
||||||
@@ -37,10 +37,6 @@
|
|||||||
# 默认真实接口（未设/false）；改成 true 时该接口走本地假数据（consumer 外网不可达时调试用）。
|
# 默认真实接口（未设/false）；改成 true 时该接口走本地假数据（consumer 外网不可达时调试用）。
|
||||||
# 与 VITE_USE_REAL_DATA 独立。改后需重启 dev / 重新打包生效。
|
# 与 VITE_USE_REAL_DATA 独立。改后需重启 dev / 重新打包生效。
|
||||||
# VITE_MOCK_COP_TASK_DETAIL=false
|
# VITE_MOCK_COP_TASK_DETAIL=false
|
||||||
# VITE_POSITION_ROUNDTABLE_DEMO_MODE=false
|
|
||||||
# true=免登录直达岗位分析，完全使用前端 JSON，不请求任何后台接口。
|
|
||||||
# 仅限离线演示环境；生产环境请保持 false。
|
|
||||||
# VITE_POSITION_ROUNDTABLE_STANDALONE_MODE=false
|
|
||||||
|
|
||||||
# MaxKey 鉴权根地址（无界 onlineTicket 换 token）
|
# MaxKey 鉴权根地址（无界 onlineTicket 换 token）
|
||||||
# VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
|
# VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
|
||||||
@@ -54,6 +50,4 @@
|
|||||||
# 可选
|
# 可选
|
||||||
# VITE_CANVAS_LANGGRAPH_BASE_URL=
|
# VITE_CANVAS_LANGGRAPH_BASE_URL=
|
||||||
# VITE_STATIC_WEBSITE_ONLY=
|
# VITE_STATIC_WEBSITE_ONLY=
|
||||||
# 部署级紧凑导航：true 时固定收起工作台左侧栏，并隐藏换肤与全量/简洁模式切换。
|
|
||||||
# VITE_FORCE_COLLAPSED_SIDEBAR=false
|
|
||||||
# VITE_GITHUB_OAUTH_TOKEN=
|
# VITE_GITHUB_OAUTH_TOKEN=
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
**Comparison target**
|
|
||||||
|
|
||||||
- Source visual truth (dark intelligent-agent list): `C:/Users/董宏凯/AppData/Local/Temp/codex-clipboard-75f6ce1c-cd70-4b8c-a80a-a3d100105c69.png`
|
|
||||||
- Additional source references: `C:/Users/董宏凯/AppData/Local/Temp/codex-clipboard-00567484-ba8a-4595-b386-52e1467ae9cf.png` (segmented switch), `C:/Users/董宏凯/AppData/Local/Temp/codex-clipboard-02808803-05ba-4f2c-be50-c72b484a9f06.png` (business-chain node card), `C:/Users/董宏凯/AppData/Local/Temp/codex-clipboard-adf38fec-7baf-4d01-9c73-bdbae94b774e.png` (business-chain selector)
|
|
||||||
- Implementation screenshots: `C:/Users/董宏凯/AppData/Local/Temp/position-roundtable-revised-light.png`, `C:/Users/董宏凯/AppData/Local/Temp/position-roundtable-revised-dark.png`
|
|
||||||
- Full-view comparison evidence: `C:/Users/董宏凯/AppData/Local/Temp/position-roundtable-revised-comparison.png`
|
|
||||||
- Viewport: 1280 × 720. Light route: `#/page/strategy/qa/position-roundtable`; dark embedded route: `#/page/strategy/qa/position-roundtable?embed=1&theme=dark`.
|
|
||||||
- State: local browser has no authenticated API session. The original intent API is invoked and reports `Authentication required`; business-chain and agent endpoints return no usable data.
|
|
||||||
|
|
||||||
**Findings**
|
|
||||||
|
|
||||||
- [P1] Populated agent and business-chain states cannot be compared yet.
|
|
||||||
Location: right agent list and non-planning-role chain diagram.
|
|
||||||
Evidence: reference images show populated cards and nodes; the implementation has `0 个` agents and no available business chain in the unauthenticated preview.
|
|
||||||
Impact: card density, selected-card indicator, chain node flow, and agent-detail transition cannot be truthfully verified against live data.
|
|
||||||
Fix: verify the route in an authenticated session with at least one public chain and tagged agents.
|
|
||||||
|
|
||||||
**Open Questions**
|
|
||||||
|
|
||||||
- The final business-chain stage arrangement is still pending product confirmation. The compact graph maps whatever stage configuration is returned, while intentionally omitting dependency-label text as requested.
|
|
||||||
|
|
||||||
**Implementation Checklist**
|
|
||||||
|
|
||||||
1. Left task panel is now display-only and retains its independent position-roundtable task adapter.
|
|
||||||
2. Business-chain selection uses the original roundtable card/radio/relationship-entry pattern.
|
|
||||||
3. Every position uses the original `useStep1Intent` interface and `Step1Panel` message list/input panel; only the position header changes.
|
|
||||||
4. The right switch now uses the exact `课题研究 / ai写作` segmented-control treatment (light gray track, white active state; dark blue glass equivalent).
|
|
||||||
5. The embedded layout widens the left panel to 360px and applies the deep-blue right-panel tokens used by the reference.
|
|
||||||
6. Other roles render a taller top-to-bottom card-node flow without dependency labels. The canvas supports mouse-drag panning, and each node retains only a name plus a single-line description.
|
|
||||||
|
|
||||||
**Follow-up Polish**
|
|
||||||
|
|
||||||
- [P3] If live content is unusually long, tune the compact flow node width or horizontal scrolling after seeing the production chain data.
|
|
||||||
|
|
||||||
**Comparison history**
|
|
||||||
|
|
||||||
- Iteration 1: task fields were editable and the right TDesign card tabs looked unlike the reference. Replaced the task form with display-only information and replaced the tabs with the existing `课题研究 / ai写作` segmented switch.
|
|
||||||
- Iteration 2: business-chain selection was a dropdown and the flow was vertical avatar chips. Replaced it with original-roundtable selection cards and compact business-chain configuration-style node cards with link lines but no dependency labels.
|
|
||||||
- Iteration 3: dark right-panel background differed from the supplied deep-blue reference. Applied the `#032650` / `#042b59` / `#2b8ffe` token family and captured the revised embedded dark state in the full-view comparison.
|
|
||||||
- Iteration 4: removed the custom disabled input from non-planning positions and reused the original roundtable input panel. Enlarged the left flow viewport, retained its connection lines, and removed node level/seat/status metadata.
|
|
||||||
- Iteration 5: converted the compact flow from left-to-right to top-to-bottom. Added mouse-drag panning and single-line description truncation; populated-chain visual QA remains blocked by the unauthenticated preview.
|
|
||||||
- Iteration 6: constrained the flow canvas to its card viewport, narrowed nodes from 190px to 158px, and realigned branch gaps plus connector anchors to prevent clipping and offset lines.
|
|
||||||
|
|
||||||
**Final result**
|
|
||||||
|
|
||||||
blocked
|
|
||||||
@@ -1,362 +0,0 @@
|
|||||||
# 岗位会商交付闭环与内置智能体实现计划
|
|
||||||
|
|
||||||
> 页面：`/page/strategy/qa/position-roundtable`
|
|
||||||
>
|
|
||||||
> 目标：在现有岗位会商基础上补齐“产物交付、查看、驳回、方案总结、行动规划”的完整闭环，同时继续保持原多智能体会商页面不受影响。
|
|
||||||
|
|
||||||
## 实施核对（2026-07-21）
|
|
||||||
|
|
||||||
本计划已按“岗位会商独立路由、无总控、各席位直接问答”的边界完成第一轮闭环。实际流程调整为：
|
|
||||||
|
|
||||||
```text
|
|
||||||
任务信息 → 情报分析岗识别并确认意图 → 启动校验并冻结业务链
|
|
||||||
→ 分阶段席位直接问答/交付 Markdown → 全部有效交付
|
|
||||||
→ 方案总结智能体（roundtable-summary）→ 行动规划智能体（position-action-planner）
|
|
||||||
→ 可随时返回交付产物驳回 → 后续阶段及内置产物级联失效 → 重做后重新收口
|
|
||||||
```
|
|
||||||
|
|
||||||
- [x] 情报意图、业务链选择、席位岗位归属和席位智能体配置均在启动前校验；启动后保存业务链快照。
|
|
||||||
- [x] 普通席位直接调用各自分配的智能体，并注入任务、意图及已完成上游席位的问答/产物；不经过总控智能体。
|
|
||||||
- [x] 普通席位必须在 `outputs` 中交付 Markdown 才会完成；情报分析岗以确认的结构化意图完成为准。
|
|
||||||
- [x] 节点、交付卡片、流程图和大图弹窗均展示 `locked / ready / running / done / rejected / stale / error` 状态，并可回看节点会话和产物。
|
|
||||||
- [x] 驳回要求标题和理由；当前节点转为 `rejected`，后续阶段按依赖转为 `stale/locked`，总结和行动规划同时失效，历史内容保留可查看。
|
|
||||||
- [x] 被驳回或失效的普通席位必须写入一份**新的或已改写** Markdown 才能再次完成；单纯继续问答且没有新交付不会误使下游产物失效。
|
|
||||||
- [x] 方案总结复用 `roundtable-summary` 的真实流式线程；行动规划新增 `position-action-planner`，强制输出 Markdown 报告和 `action-plan-subtasks.json`。
|
|
||||||
- [x] 两个内置智能体的线程、产物快照和来源节点版本栅栏均持久化；流式期间若上游版本变化，旧运行不能覆盖最新状态。
|
|
||||||
- [x] 右侧“交付产物”可查看内置节点结果、继续同一线程问答/修改交付，并在打开 Markdown 沙箱时自动收起右栏。
|
|
||||||
|
|
||||||
设计收敛：当前版本以节点的 `artifact_manifest`、`latest_answer`、版本、驳回记录及 Session 内置快照作为唯一事实来源，已能覆盖统一产物卡片和级联逻辑，因此不新增重复的 `position_roundtable_deliverables` 表。若后续需要“单个文件独立驳回、跨会话检索或完整版本对比”，再将清单归一化为独立产物表，避免现在的双写一致性风险。
|
|
||||||
|
|
||||||
## 数据持久化与灾难恢复（2026-07-23）
|
|
||||||
|
|
||||||
岗位会商现在使用“两层持久化”，两层职责不同：
|
|
||||||
|
|
||||||
1. LangGraph checkpoint/thread 是智能体继续推理与流式问答的执行源。
|
|
||||||
2. `position_roundtable_sessions` / `position_roundtable_nodes` 是页面历史的数据库恢复源。
|
|
||||||
|
|
||||||
数据库恢复源会保存：
|
|
||||||
|
|
||||||
- 情报分析岗完整消息、步骤时间线和未发送输入草稿；
|
|
||||||
- 每个业务链岗位的完整消息和未发送输入草稿；
|
|
||||||
- 方案总结、行动规划两个收口智能体的完整消息和未发送输入草稿；
|
|
||||||
- 已确认意图、冻结任务与业务链快照、节点状态、版本、驳回记录；
|
|
||||||
- Markdown / JSON 等文本产物正文（单文件最多 400 万字符）和文件元数据。
|
|
||||||
|
|
||||||
因此即使线上重启后 checkpoint 或沙箱 outputs 卷丢失，历史页仍能从数据库展示对话与产物正文，后续收口智能体也能继续读取数据库中的有效上游交付。新任务在意图识别开始前就会创建 Session，用户不必等到“启动业务链”才获得持久化保护。历史下拉支持删除，删除会显式清理 Session 与全部节点恢复快照，不依赖 SQLite 外键开关。
|
|
||||||
|
|
||||||
对应迁移：`20260723_05_position_roundtable_conversations.py`。部署时必须执行到 Alembic head。
|
|
||||||
|
|
||||||
## 0. 核心结论
|
|
||||||
|
|
||||||
- 方案总结智能体建议复用现有会商里的 `roundtable-summary` 能力，但不要直接搬整套 Step 3 页面流程。
|
|
||||||
- 可复用：内置智能体 ID、总结报告 prompt 组织方式、Markdown 报告产物、流式对话、报告续问与文件预览能力。
|
|
||||||
- 需要改造：输入材料从“总控共识 + 各席位交付”改成“任务信息 + 意图结果 + 已通过的岗位产物 + 业务链快照”，并把结果存到岗位会商 Session 下。
|
|
||||||
- 行动规划智能体建议作为新的内置智能体新增。
|
|
||||||
- 输入：方案总结报告、各岗位最终有效产物、业务链阶段信息、任务意图。
|
|
||||||
- 输出：行动规划报告、结构化子任务清单。
|
|
||||||
- 这个模式仍然不需要总控智能体。情报分析岗负责意图识别，业务链节点直接调用各自配置的智能体，最终再由内置总结/规划智能体收口。
|
|
||||||
- 驳回不删除历史内容，只改变“当前有效版本”的状态；被驳回节点和后续节点需要重新交付，既保留可追溯性，也方便后续返回查看。
|
|
||||||
|
|
||||||
## 1. 目标业务流程
|
|
||||||
|
|
||||||
1. 情报分析岗进入页面，查看任务信息并完成意图识别。
|
|
||||||
2. 用户点击“确认意图并启动业务链”。
|
|
||||||
3. 启动前做校验：
|
|
||||||
- 未选择业务链：提示“请先选择业务链”。
|
|
||||||
- 业务链存在未配置岗位的席位：提示并引导去业务链配置页。
|
|
||||||
- 业务链席位缺少智能体：提示具体席位名称。
|
|
||||||
- 意图尚未完成：提示先完成任务意图识别。
|
|
||||||
4. 校验通过后冻结业务链快照，初始化岗位会商节点。
|
|
||||||
5. 各岗位只对分配给本岗位的智能体进行问答。
|
|
||||||
6. 节点问答完成后形成交付产物，右侧产物卡片显示“已完成 / 未完成 / 进行中 / 已驳回 / 已失效”。
|
|
||||||
7. 左侧流程图显示各节点状态，节点可点击查看该节点对话与产物。
|
|
||||||
8. 流程图右上角提供“查看”按钮，打开弹窗展示更完整的业务链流程图。
|
|
||||||
9. 当业务链中所有岗位产物都处于有效已交付状态后，开放“方案总结”。
|
|
||||||
10. 方案总结完成后开放“行动规划”。
|
|
||||||
11. 即使进入方案总结或行动规划，用户仍可返回产物列表执行驳回。
|
|
||||||
12. 若驳回早期阶段产物，后续阶段产物、方案总结、行动规划都一起失效并回到待重新完成状态。
|
|
||||||
|
|
||||||
## 2. 状态设计
|
|
||||||
|
|
||||||
### 2.1 节点状态
|
|
||||||
|
|
||||||
现有节点状态需要扩展或映射为更贴近页面的展示状态：
|
|
||||||
|
|
||||||
| 展示状态 | 建议内部状态 | 含义 |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| 未完成 | `ready` / `locked` / `rejected` | 尚未有效交付，或被驳回后等待重做 |
|
|
||||||
| 进行中 | `running` | 当前智能体正在回答或产物正在生成 |
|
|
||||||
| 已完成 | `done` | 当前节点已有有效交付 |
|
|
||||||
| 已失效 | `stale` | 上游被更新或驳回，当前结果不可作为最终材料 |
|
|
||||||
| 异常 | `error` | 生成或保存失败 |
|
|
||||||
|
|
||||||
建议新增 `rejected` 状态，便于区分“从未完成”和“被驳回后待重做”。如果第一轮想少改后端，也可以先用 `ready + rejection_record` 表示被驳回。
|
|
||||||
|
|
||||||
### 2.2 产物状态
|
|
||||||
|
|
||||||
产物状态建议独立于节点状态保存，因为一个节点可能同时有回答文本和多个文件产物。
|
|
||||||
|
|
||||||
| 状态 | 含义 |
|
|
||||||
| --- | --- |
|
|
||||||
| `pending` | 还没有交付 |
|
|
||||||
| `running` | 正在生成 |
|
|
||||||
| `delivered` | 已交付且当前有效 |
|
|
||||||
| `rejected` | 被用户驳回 |
|
|
||||||
| `stale` | 受上游驳回或重做影响，已经失效 |
|
|
||||||
|
|
||||||
### 2.3 内置收口节点
|
|
||||||
|
|
||||||
在流程图中把两个内置节点追加到业务链末尾：
|
|
||||||
|
|
||||||
1. `builtin:summary`：方案总结智能体。
|
|
||||||
2. `builtin:action-plan`：行动规划智能体。
|
|
||||||
|
|
||||||
这两个节点不属于普通业务链席位，但要和普通节点一样显示状态、支持点击查看结果。
|
|
||||||
|
|
||||||
## 3. 数据模型调整
|
|
||||||
|
|
||||||
### 3.1 Session 扩展
|
|
||||||
|
|
||||||
`position_roundtable_sessions` 已使用下列持久化字段：
|
|
||||||
|
|
||||||
| 字段 | 含义 |
|
|
||||||
| --- | --- |
|
|
||||||
| `status` | `intent_pending / active / completed / archived`；总结/规划运行态由前端瞬时状态与对应快照的 `status` 表示，避免一次运行中断后留下伪运行态 |
|
|
||||||
| `summary_thread_id` | 方案总结智能体线程 |
|
|
||||||
| `summary_snapshot` | 最新有效总结报告快照 |
|
|
||||||
| `action_plan_thread_id` | 行动规划智能体线程 |
|
|
||||||
| `action_plan_snapshot` | 最新有效行动规划快照 |
|
|
||||||
| `invalidated_at` | 记录在 `summary_snapshot` / `action_plan_snapshot` 内，包含 `invalidated_by`，无需重复写 Session 字段 |
|
|
||||||
|
|
||||||
### 3.2 Node 扩展
|
|
||||||
|
|
||||||
`position_roundtable_nodes` 已使用下列字段（展示状态由前端按状态映射）：
|
|
||||||
|
|
||||||
| 字段 | 含义 |
|
|
||||||
| --- | --- |
|
|
||||||
| `status` | `locked / ready / running / done / stale / rejected / error`，前端直接映射为展示状态 |
|
|
||||||
| `rejection_count` | 当前节点累计驳回次数 |
|
|
||||||
| `last_rejection` | 最新驳回标题、理由、操作者、时间 |
|
|
||||||
| `revision` | 当前有效交付版本 |
|
|
||||||
| `invalidated_by` | 导致当前节点失效的上游节点 key |
|
|
||||||
|
|
||||||
### 3.3 Deliverable 新表（后续可选）
|
|
||||||
|
|
||||||
当需要“单个文件独立驳回、跨会话检索或完整版本对比”时，再新增 `position_roundtable_deliverables`，不要只依赖 `artifact_manifest`。
|
|
||||||
|
|
||||||
| 字段 | 含义 |
|
|
||||||
| --- | --- |
|
|
||||||
| `id` | 产物 ID |
|
|
||||||
| `session_id` | 会话 ID |
|
|
||||||
| `node_key` | 来源节点 |
|
|
||||||
| `agent_id` | 来源智能体 |
|
|
||||||
| `position_id` | 来源岗位 |
|
|
||||||
| `title` | 产物名称 |
|
|
||||||
| `kind` | `answer / file / summary / action_plan` |
|
|
||||||
| `content` | 文本产物内容摘要或正文 |
|
|
||||||
| `artifact_path` | 文件产物虚拟路径 |
|
|
||||||
| `thread_id` | 所属线程 |
|
|
||||||
| `status` | `pending / running / delivered / rejected / stale` |
|
|
||||||
| `revision` | 来源节点版本 |
|
|
||||||
| `rejection_title` | 驳回标题 |
|
|
||||||
| `rejection_reason` | 驳回理由 |
|
|
||||||
| `created_at` | 创建时间 |
|
|
||||||
| `updated_at` | 更新时间 |
|
|
||||||
|
|
||||||
当前第一轮不新增这张表：右侧产物卡片、驳回记录、总结输入材料从节点 `artifact_manifest`、节点版本/驳回记录和 Session 快照聚合，避免节点表与产物表双写。后续引入该表时，应把它提升为唯一事实来源，而不是并行维护两套状态。
|
|
||||||
|
|
||||||
## 4. 驳回与级联失效规则
|
|
||||||
|
|
||||||
### 4.1 基本驳回
|
|
||||||
|
|
||||||
用户点击产物卡片的“驳回”后弹窗填写：
|
|
||||||
|
|
||||||
- 驳回标题。
|
|
||||||
- 驳回理由。
|
|
||||||
|
|
||||||
提交后：
|
|
||||||
|
|
||||||
- 当前产物状态改为 `rejected`。
|
|
||||||
- 当前节点状态改为 `rejected` 或 `ready`。
|
|
||||||
- 当前节点的 `latest_answer` 和历史文件不删除，但不再作为有效交付输入。
|
|
||||||
- 记录 `last_rejection`，用于页面展示和后续追踪。
|
|
||||||
|
|
||||||
### 4.2 级联失效
|
|
||||||
|
|
||||||
如果驳回的节点位于第 N 阶段：
|
|
||||||
|
|
||||||
- 同阶段其他节点不自动驳回，除非业务链未来明确配置了依赖关系。
|
|
||||||
- 第 N+1 阶段及之后所有节点的有效产物全部标记为 `stale`。
|
|
||||||
- 后续节点状态回到未完成展示态。
|
|
||||||
- `builtin:summary` 和 `builtin:action-plan` 如果已经生成，也标记为 `stale`。
|
|
||||||
- 页面允许用户继续查看旧报告和旧行动规划，但必须提示“上游产物已变更，需要重新生成”。
|
|
||||||
|
|
||||||
### 4.3 重新交付
|
|
||||||
|
|
||||||
被驳回节点重新问答并完成后：
|
|
||||||
|
|
||||||
- 当前节点产生新的 `revision`。
|
|
||||||
- 当前节点产物状态变为 `delivered`。
|
|
||||||
- 只有当该阶段所有必要节点都重新有效交付后，下一阶段才重新解锁。
|
|
||||||
- 方案总结和行动规划必须基于最新有效产物重新生成。
|
|
||||||
|
|
||||||
## 5. 接口规划
|
|
||||||
|
|
||||||
### 5.1 启动与校验
|
|
||||||
|
|
||||||
| 方法 | 路径 | 用途 |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| `POST` | `/api/position-roundtable/sessions/{id}/validate-activation` | 校验业务链、岗位、智能体、意图状态 |
|
|
||||||
| `POST` | `/api/position-roundtable/sessions/{id}/activate` | 校验通过后冻结链条并初始化节点 |
|
|
||||||
|
|
||||||
第一轮也可以先把校验合并在 `activate` 内，前端根据后端返回的错误码提示。
|
|
||||||
|
|
||||||
### 5.2 产物
|
|
||||||
|
|
||||||
| 方法 | 路径 | 用途 |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| `GET` | `/api/position-roundtable/sessions/{id}/results` | 获取右侧统一产物来源节点（前端聚合文件与内置快照） |
|
|
||||||
| `GET` | `/api/position-roundtable/sessions/{id}/nodes/{node_key}` | 获取节点详情；文件正文由既有线程产物预览接口读取 |
|
|
||||||
| `POST` | `/api/position-roundtable/sessions/{id}/nodes/{node_key}/reject` | 驳回当前节点交付并触发级联失效 |
|
|
||||||
| `POST` | `/api/position-roundtable/sessions/{id}/nodes/{node_key}/complete-turn` | 节点回答结束后同步回答与产物 |
|
|
||||||
|
|
||||||
### 5.3 方案总结与行动规划
|
|
||||||
|
|
||||||
| 方法 | 路径 | 用途 |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| `POST` | `/api/position-roundtable/sessions/{id}/summary/prepare` | 服务端准备版本锁定的总结材料和线程信息 |
|
|
||||||
| `POST` | `/api/position-roundtable/sessions/{id}/summary/ask` | 服务端准备总结的同线程续问材料 |
|
|
||||||
| `POST` | `/api/position-roundtable/sessions/{id}/summary/complete` | 校验 Markdown 交付与来源版本后持久化总结快照 |
|
|
||||||
| `POST` | `/api/position-roundtable/sessions/{id}/action-plan/prepare` | 服务端准备行动规划材料和线程信息 |
|
|
||||||
| `POST` | `/api/position-roundtable/sessions/{id}/action-plan/ask` | 服务端准备行动规划同线程续问材料 |
|
|
||||||
| `POST` | `/api/position-roundtable/sessions/{id}/action-plan/complete` | 校验 Markdown + JSON 交付与来源版本后持久化行动规划快照 |
|
|
||||||
|
|
||||||
可以复用现有 `streamMultiAgent` 流式协议，但建议在岗位会商下包一层 API，由后端负责拼装岗位会商材料，前端不直接拼长 prompt。
|
|
||||||
|
|
||||||
## 6. 前端实施步骤
|
|
||||||
|
|
||||||
### 阶段 1：状态与启动校验（已完成）
|
|
||||||
|
|
||||||
- 扩展 `PositionNodeStatus` 和状态显示映射。
|
|
||||||
- “确认意图并启动业务链”前补齐校验提示。
|
|
||||||
- 后端 `activate` 返回未配置岗位、缺智能体、未选择链条等具体错误。
|
|
||||||
- 左侧流程图节点右上角添加状态小图标。
|
|
||||||
- 节点样式调整为上方智能体名称、下方岗位名称，移除左侧 logo。
|
|
||||||
|
|
||||||
验收标准：未选择业务链、岗位未配齐、意图未完成时都能准确阻止启动；启动后流程图能显示各节点状态。
|
|
||||||
|
|
||||||
### 阶段 2：流程图弹窗（已完成）
|
|
||||||
|
|
||||||
- 左侧保留小型从上到下流程图。
|
|
||||||
- 流程图右上角增加“查看”按钮。
|
|
||||||
- 点击后打开弹窗，展示更大的流程图。
|
|
||||||
- 弹窗内支持点击节点查看对话与产物，保持和主页面选中节点同步。
|
|
||||||
|
|
||||||
验收标准：小图不挤占左侧空间，大图能完整展示业务链和两个内置收口节点。
|
|
||||||
|
|
||||||
### 阶段 3：产物卡片与预览（已完成）
|
|
||||||
|
|
||||||
- 右侧新增或改造“分析结果”Tab 为“交付产物”列表。
|
|
||||||
- 卡片展示智能体名称、产物名称、岗位名称、时间、状态。
|
|
||||||
- 点击卡片打开详情弹窗。
|
|
||||||
- 文本产物直接展示正文，文件产物复用现有 `ArtifactPreviewModal`。
|
|
||||||
- 每个有效产物提供“驳回”入口。
|
|
||||||
|
|
||||||
验收标准：节点回答和文件产物能进入统一产物列表；点击可查看详情。
|
|
||||||
|
|
||||||
### 阶段 4：驳回弹窗与级联失效（已完成）
|
|
||||||
|
|
||||||
- 新增 `RejectDeliverableDialog`。
|
|
||||||
- 驳回表单包含标题和理由，均必填。
|
|
||||||
- 后端事务内完成当前产物驳回、当前节点状态更新、后续阶段级联失效、总结和行动规划失效。
|
|
||||||
- 前端刷新 Session、Node、Deliverable 和流程图状态。
|
|
||||||
- 被驳回节点在对话区显示驳回信息，提示用户重新交付。
|
|
||||||
|
|
||||||
验收标准：驳回第一阶段任意节点后，第二阶段及之后产物都显示未完成或已失效；旧内容可查看但不能作为总结输入。
|
|
||||||
|
|
||||||
### 阶段 5：方案总结智能体（已完成）
|
|
||||||
|
|
||||||
- 封装 `usePositionSummary`，内部复用 `roundtable-summary` 的线程初始化、流式输出和 Markdown 产物预览能力。
|
|
||||||
- 输入材料改为岗位会商材料：
|
|
||||||
- 任务信息。
|
|
||||||
- 情报分析岗意图结果。
|
|
||||||
- 业务链快照。
|
|
||||||
- 所有状态为 `delivered` 的岗位产物。
|
|
||||||
- 已驳回或失效产物只作为历史参考，不进入默认总结材料。
|
|
||||||
- 方案总结节点追加到流程图末尾。
|
|
||||||
- 所有产物有效交付后才允许点击“生成方案总结”。
|
|
||||||
- 总结结果写入 `summary_snapshot`，同时进入产物列表。
|
|
||||||
|
|
||||||
验收标准：总结报告使用现有方案总结能力生成 Markdown；刷新页面后可恢复；上游驳回后总结标记失效。
|
|
||||||
|
|
||||||
### 阶段 6：行动规划智能体（已完成）
|
|
||||||
|
|
||||||
- 新增内置智能体 ID，建议先命名为 `position-action-planner`。
|
|
||||||
- 新增行动规划 prompt：
|
|
||||||
- 读取方案总结报告。
|
|
||||||
- 读取各岗位最终有效产物。
|
|
||||||
- 拆解为若干子任务。
|
|
||||||
- 每个子任务包含名称、目标、输入依据、责任岗位建议、前置依赖、交付物、验收标准。
|
|
||||||
- 输出两类产物：
|
|
||||||
- `行动规划报告.md`。
|
|
||||||
- `action-plan-subtasks.json`。
|
|
||||||
- 行动规划节点追加到方案总结之后。
|
|
||||||
- 方案总结有效完成后才允许启动行动规划。
|
|
||||||
|
|
||||||
验收标准：行动规划能生成可读报告和结构化子任务；刷新可恢复；上游驳回后自动失效。
|
|
||||||
|
|
||||||
### 阶段 7：返回修改与重新生成（已完成）
|
|
||||||
|
|
||||||
- 用户在方案总结或行动规划视图中仍可切回“交付产物”。
|
|
||||||
- 驳回后自动显示需要重做的节点。
|
|
||||||
- 重做节点完成后，允许重新生成方案总结和行动规划。
|
|
||||||
- 旧总结、旧行动规划保留历史查看，但状态显示“已失效”。
|
|
||||||
|
|
||||||
验收标准：不会因为进入总结/规划阶段而锁死前序产物；前序重做后能形成新版本闭环。
|
|
||||||
|
|
||||||
### 阶段 8：测试与回归（已完成）
|
|
||||||
|
|
||||||
- 后端测试：
|
|
||||||
- activate 校验。
|
|
||||||
- 节点完成后产物入库。
|
|
||||||
- 驳回当前节点。
|
|
||||||
- 驳回第一阶段时后续阶段级联失效。
|
|
||||||
- 总结和行动规划失效。
|
|
||||||
- 前端测试：
|
|
||||||
- 启动校验提示。
|
|
||||||
- 状态图标显示。
|
|
||||||
- 产物卡片筛选和预览。
|
|
||||||
- 驳回弹窗必填校验。
|
|
||||||
- 回归验证：
|
|
||||||
- 原多智能体会商页面不受影响。
|
|
||||||
- 业务链普通配置入口不显示岗位配置。
|
|
||||||
- 岗位会商页面刷新恢复正常。
|
|
||||||
- 深色模式和嵌入模式布局不溢出。
|
|
||||||
|
|
||||||
## 7. 推荐提交拆分
|
|
||||||
|
|
||||||
1. `feat(position-roundtable): add delivery status model`
|
|
||||||
2. `feat(position-roundtable): validate chain activation`
|
|
||||||
3. `feat(position-roundtable): add workflow status graph`
|
|
||||||
4. `feat(position-roundtable): add deliverable cards and preview`
|
|
||||||
5. `feat(position-roundtable): support rejection cascade`
|
|
||||||
6. `feat(position-roundtable): add summary builtin node`
|
|
||||||
7. `feat(position-roundtable): add action planning builtin node`
|
|
||||||
8. `test(position-roundtable): cover delivery workflow`
|
|
||||||
|
|
||||||
## 8. 第一轮建议范围
|
|
||||||
|
|
||||||
第一轮优先做最小可闭环：
|
|
||||||
|
|
||||||
```text
|
|
||||||
意图识别
|
|
||||||
→ 启动校验
|
|
||||||
→ 业务链节点状态
|
|
||||||
→ 节点产物列表
|
|
||||||
→ 产物详情查看
|
|
||||||
→ 驳回与级联失效
|
|
||||||
→ 全部交付后生成方案总结
|
|
||||||
→ 基于总结生成行动规划
|
|
||||||
```
|
|
||||||
|
|
||||||
如果时间紧，行动规划可以先生成 Markdown 报告，结构化 `subtasks.json` 放到第二轮；但数据模型和 UI 入口第一轮就要预留，否则后面会返工。
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
# 岗位会商沙箱文档
|
|
||||||
|
|
||||||
本目录存放**岗位会商文件预览沙箱**的对接与排障说明，独立于 `src/position-roundtable/docs/`，避免与模块内其它文档互相覆盖。
|
|
||||||
|
|
||||||
| 文档 | 说明 |
|
|
||||||
| --- | --- |
|
|
||||||
| [沙箱打开关闭与步骤条.md](./沙箱打开关闭与步骤条.md) | **详细版**：打开/关闭完整时序、步骤条关系、对接接口字段说明、必守规则、历史 bug 根因、排障手册、自测清单、接线示例与代码索引 |
|
|
||||||
|
|
||||||
模块总览仍见：`frontend-web/src/position-roundtable/README.md`。
|
|
||||||
|
|
||||||
建议读法：
|
|
||||||
|
|
||||||
- **从零对接新页面**：正文第 3、5、6、7、8、12、15、16 节
|
|
||||||
- **线上排障**：第 13、14 节
|
|
||||||
- **只要一页纸**：文末「附录 A」
|
|
||||||
@@ -1,988 +0,0 @@
|
|||||||
# 岗位会商 · 沙箱打开 / 关闭与步骤条（详细对接与排障指南）
|
|
||||||
|
|
||||||
> **文档位置**：`frontend-web/docs/position-roundtable-sandbox/`
|
|
||||||
> **读者**：下次重做或对接岗位会商页面的同事；线上「沙箱不实时 / 卡死 / 第二次不刷新」时的排障同学。
|
|
||||||
> **最后依据**：当前仓库 `PositionRoundtablePage` + `PositionNodeChat` 实现（含临时名打开、外部 store、前沿节流、按 tool-call 重挂）。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 目录
|
|
||||||
|
|
||||||
1. [文档用途与读法](#1-文档用途与读法)
|
|
||||||
2. [背景：为什么岗位会商要单独做沙箱](#2-背景为什么岗位会商要单独做沙箱)
|
|
||||||
3. [用户可见的正确行为（验收标准）](#3-用户可见的正确行为验收标准)
|
|
||||||
4. [整体架构与数据流](#4-整体架构与数据流)
|
|
||||||
5. [职责划分：谁拥有什么状态](#5-职责划分谁拥有什么状态)
|
|
||||||
6. [对接接口详解](#6-对接接口详解)
|
|
||||||
7. [打开沙箱的完整步骤](#7-打开沙箱的完整步骤)
|
|
||||||
8. [关闭沙箱的完整步骤](#8-关闭沙箱的完整步骤)
|
|
||||||
9. [步骤条与沙箱的关系](#9-步骤条与沙箱的关系)
|
|
||||||
10. [流式内容如何进入沙箱（性能关键）](#10-流式内容如何进入沙箱性能关键)
|
|
||||||
11. [与普通对话页的对照](#11-与普通对话页的对照)
|
|
||||||
12. [重做页面时的必守规则](#12-重做页面时的必守规则)
|
|
||||||
13. [历史问题与根因（务必读）](#13-历史问题与根因务必读)
|
|
||||||
14. [排障手册（按症状）](#14-排障手册按症状)
|
|
||||||
15. [对接自测清单](#15-对接自测清单)
|
|
||||||
16. [最小接线示例](#16-最小接线示例)
|
|
||||||
17. [关键代码索引](#17-关键代码索引)
|
|
||||||
18. [术语表](#18-术语表)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. 文档用途与读法
|
|
||||||
|
|
||||||
### 1.1 这份文档解决什么问题
|
|
||||||
|
|
||||||
岗位会商右侧「文件预览沙箱」看起来像普通对话页的产物预览，但实现路径完全不同。历史上这块反复出过：
|
|
||||||
|
|
||||||
- 沙箱不实时打开，要等全文写完才弹；
|
|
||||||
- 打开了但内容冻住，生成完才一口气灌进去；
|
|
||||||
- 整页卡顿，连消息列表文字都不实时；
|
|
||||||
- 同轮「重新生成」第二次写入时，步骤条变了，沙箱却不动；
|
|
||||||
- 第一次正常，关掉后再问就不实时。
|
|
||||||
|
|
||||||
这些 bug **特别容易在「重做页面 / 换布局 / 自己重写开沙箱逻辑」时复现**。本文把正确对接方式、时序、接口、禁区和排障步骤写全，方便下一位同事直接按文档接线，而不是再靠猜。
|
|
||||||
|
|
||||||
### 1.2 建议读法
|
|
||||||
|
|
||||||
| 你的目标 | 先读哪些章节 |
|
|
||||||
| --- | --- |
|
|
||||||
| 从零接一个新页面壳 | 第 3、5、6、7、8、12、15、16 节 |
|
|
||||||
| 只改对话子组件探测逻辑 | 第 7、9、12、13 节 |
|
|
||||||
| 线上排障 | 第 13、14 节，必要时回看第 10 节 |
|
|
||||||
| 理解为什么不能用页面 state | 第 2、10、13 节 |
|
|
||||||
|
|
||||||
### 1.3 对照代码（以仓库为准）
|
|
||||||
|
|
||||||
| 角色 | 路径 |
|
|
||||||
| --- | --- |
|
|
||||||
| 页面壳（唯一沙箱宿主） | `frontend-web/src/position-roundtable/pages/PositionRoundtablePage.tsx` |
|
|
||||||
| 节点对话（探测 write_file、上报预览） | `frontend-web/src/position-roundtable/components/PositionNodeChat.tsx` |
|
|
||||||
| 收口对话 | `frontend-web/src/position-roundtable/components/PositionBuiltinAgentChat.tsx` |
|
|
||||||
| 预览 UI（共享组件，勿分叉逻辑） | `frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx` |
|
|
||||||
| 流式正文读取 | `frontend-web/src/core/artifacts/loader.ts` → `loadArtifactContentFromToolCall` |
|
|
||||||
| 普通对话页对照（步骤条自动开） | `frontend-web/src/components/workspace/messages/message-group.tsx` |
|
|
||||||
| 模块总览 | `frontend-web/src/position-roundtable/README.md` |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. 背景：为什么岗位会商要单独做沙箱
|
|
||||||
|
|
||||||
### 2.1 普通对话页怎么开沙箱
|
|
||||||
|
|
||||||
普通对话页（`ChatPage`）大致是：
|
|
||||||
|
|
||||||
```text
|
|
||||||
ArtifactsProvider（页面级）
|
|
||||||
└─ ChatBox / MessageList
|
|
||||||
└─ message-group 渲染 write_file 步骤
|
|
||||||
└─ 发现 path 且 autoOpen → artifacts.select + setOpen(true)
|
|
||||||
└─ 右侧 ArtifactFileDetail 读同一套 ThreadContext
|
|
||||||
```
|
|
||||||
|
|
||||||
要点：
|
|
||||||
|
|
||||||
- 对话和预览共享同一套 `ThreadContext`（同一个 `useThreadStream`）。
|
|
||||||
- 步骤条组件自己就能触发打开。
|
|
||||||
- 流式 `content` 本来就在当前 React 树的 thread 里，不需要「把 thread 镜像到别的地方」。
|
|
||||||
|
|
||||||
### 2.2 岗位会商为什么不能照搬
|
|
||||||
|
|
||||||
岗位会商页面同时有：
|
|
||||||
|
|
||||||
- 左侧任务 / 意图 / 流程图；
|
|
||||||
- 中间某个节点的对话（`PositionNodeChat`）；
|
|
||||||
- 右侧配置抽屉；
|
|
||||||
- **以及一个页面级单例沙箱**，它是对话区的**兄弟节点**，不在 `PositionNodeChat` 的 ThreadContext 里面。
|
|
||||||
|
|
||||||
因此：
|
|
||||||
|
|
||||||
1. 沙箱拿不到节点对话内部的 `thread`，除非节点主动上报；
|
|
||||||
2. 若把每次流式 thread 写进**页面级 `useState`**，整页（任务卡、意图、流程图、对话）都会按流式频率重渲染，主线程会被打爆；
|
|
||||||
3. 页面必须自己决定「开 / 关 / 抑制自动再开 / 切节点时清理」，不能让多个子组件各自 `setOpen`。
|
|
||||||
|
|
||||||
所以岗位会商采用：
|
|
||||||
|
|
||||||
```text
|
|
||||||
对话子组件探测 + 上报
|
|
||||||
→ 页面壳统一打开唯一 ArtifactFileDetail
|
|
||||||
→ 流式 thread 走外部 store，只让沙箱子树订阅
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2.3 和「多智能体会商 Step2 沙箱」的区别
|
|
||||||
|
|
||||||
仓库里还有 `frontend-web/docs/roundtable-step2-sandbox-progress.md`，那是另一套圆桌 Step2 沙箱进度文档，**不是**岗位会商这条链路。对接岗位会商时以本文为准。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. 用户可见的正确行为（验收标准）
|
|
||||||
|
|
||||||
重做或对接完成后，下列行为必须全部成立（用户感知对齐普通对话页）：
|
|
||||||
|
|
||||||
| # | 行为 | 说明 |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| A | 步骤条刚出现「写入文件」时，沙箱应已打开 | **不必等**步骤条上出现文件名 |
|
|
||||||
| B | 沙箱源码边写边滚；消息列表也实时出字 | 不能整页卡死、不能「生成完一口气刷」 |
|
|
||||||
| C | content 先于 path 时：先临时名打开，path 到了再改名 | 不闪屏、不重挂 |
|
|
||||||
| D | 同轮第二次同路径 `write_file`（重新生成） | 沙箱清空并重新流式 |
|
|
||||||
| E | 整轮结束后自动切 Markdown 预览 | 「正在生成，完成后自动预览」消失 |
|
|
||||||
| F | 用户手动关闭后，同一次写入不再自动弹 | 下一轮新写入仍可自动开 |
|
|
||||||
| G | 切岗位 / 切节点 / 新会话 / 切历史 | 沙箱关掉且不串内容 |
|
|
||||||
|
|
||||||
**不要误判的正常现象：**
|
|
||||||
|
|
||||||
- 流式期间沙箱停在「源码 / 编辑」视图，结束后才切「预览」——这是 `ArtifactFileDetail` 对 markdown/html 的既定行为，与普通对话页相同，**不是**打开时机 bug。
|
|
||||||
- 步骤条长时间显示「写入文件」、没有路径，但沙箱已经打开并在滚动——content-first 模型下这是**预期**。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. 整体架构与数据流
|
|
||||||
|
|
||||||
```text
|
|
||||||
┌──────────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ PositionRoundtablePage（页面壳） │
|
|
||||||
│ │
|
|
||||||
│ state: sandboxArtifact | null │
|
|
||||||
│ ref: sandboxArtifactRef / closedSandboxKeyRef / latestSnapshotRef │
|
|
||||||
│ store: createSandboxThreadStore() ←── 禁止改成 useState │
|
|
||||||
│ │
|
|
||||||
│ handlePreviewArtifact(artifact) ←──────────────────────────────────┐ │
|
|
||||||
│ handleNodeThreadSnapshot(...) ←───────────────────────────────┐ │ │
|
|
||||||
│ closeSandbox() │ │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ {sandboxOpen && ( │ │ │
|
|
||||||
│ SandboxThreadProvider(store) │ │ │
|
|
||||||
│ └─ ArtifactFileDetail key=sandboxCloseKey(...) │ │ │
|
|
||||||
│ )} │ │ │
|
|
||||||
└───────────────────────────────────────────────────────────────────│──│───┘
|
|
||||||
│ │
|
|
||||||
┌───────────────────────────────────────────────────────────────────│──│───┐
|
|
||||||
│ PositionNodeChat / PositionBuiltinAgentChat │ │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ useThreadStream → thread.messages / thread.isLoading │ │ │
|
|
||||||
│ │ │ │ │
|
|
||||||
│ ├─ MessageList → 步骤条（只展示 tool call） │ │ │
|
|
||||||
│ │ │ │ │
|
|
||||||
│ ├─ latestStreamingWriteFile(messages) │ │ │
|
|
||||||
│ │ → onPreviewArtifact({..., auto:true}) ───────────────────┘ │
|
|
||||||
│ │ │
|
|
||||||
│ └─ useEffect → onThreadSnapshot({threadId, thread}) ───────────────┘
|
|
||||||
└──────────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
一句话：
|
|
||||||
|
|
||||||
- **谁打开**：对话子组件决定「该不该开、开哪次交付」；
|
|
||||||
- **谁真正开面板**：页面壳；
|
|
||||||
- **内容怎么更新**：子组件持续上报 thread 快照 → 页面壳 store → 只有沙箱子树重渲染。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. 职责划分：谁拥有什么状态
|
|
||||||
|
|
||||||
### 5.1 页面壳必须拥有
|
|
||||||
|
|
||||||
| 状态 / 能力 | 为什么必须在页面壳 |
|
|
||||||
| --- | --- |
|
|
||||||
| `sandboxArtifact` | 唯一预览目标；切节点时要清 |
|
|
||||||
| `closedSandboxKeyRef` | 用户关过后的抑制；跨子组件生命周期 |
|
|
||||||
| `sandboxThreadStore` | 流式内容通道；不能进大页面 state |
|
|
||||||
| `closeSandbox()` | 切岗位 / 切节点 / 新会话统一入口 |
|
|
||||||
| 唯一 `ArtifactFileDetail` | 避免双实例、关闭失效、深度异常 |
|
|
||||||
|
|
||||||
### 5.2 对话子组件必须拥有
|
|
||||||
|
|
||||||
| 状态 / 能力 | 作用 |
|
|
||||||
| --- | --- |
|
|
||||||
| `autoPreviewRunArmedRef`（armed） | 只有本轮用户发送后才允许自动开 |
|
|
||||||
| `autoPreviewBaselineCallKeysRef`（baseline） | 忽略发送前已有的历史 write_file |
|
|
||||||
| `activeWriteFilePreviewRef` | 记录当前打开的 previewKey / path / toolCallId |
|
|
||||||
| `autoPreviewedArtifactKeyRef` | 同一次 identity 去重，避免每 chunk 重复上报 |
|
|
||||||
| `latestStreamingWriteFile` | 从 streaming messages 探测可预览的 write |
|
|
||||||
| `onThreadSnapshot` 上报 | 把 thread 喂给页面壳 |
|
|
||||||
|
|
||||||
### 5.3 明确禁止
|
|
||||||
|
|
||||||
1. 在 `PositionNodeChat` 内再挂一套 `ArtifactFileDetail`。
|
|
||||||
2. 让步骤条组件直接 `setOpen(true)` 作为岗位会商主路径（对照普通页可以，岗位会商不行）。
|
|
||||||
3. 把 `onThreadSnapshot` 落到 `PositionRoundtablePage` 的 `useState`。
|
|
||||||
4. 用「整个 threadId」做关闭抑制。
|
|
||||||
5. 用「path 相同」复用 `previewKey`。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. 对接接口详解
|
|
||||||
|
|
||||||
### 6.1 `PositionArtifactPreview`
|
|
||||||
|
|
||||||
```ts
|
|
||||||
type PositionArtifactPreview = {
|
|
||||||
threadId: string; // 必填：LangGraph thread id
|
|
||||||
path: string; // 必填：真实路径，或 write-file: 虚拟 URL，或临时文件名路径
|
|
||||||
name: string; // 展示名（文件名）
|
|
||||||
mimeType: string | null; // 如 text/markdown；帮助预览语言判断
|
|
||||||
previewKey?: string; // 强烈建议：一次交付身份，推荐 `${messageId}:${toolCallId}`
|
|
||||||
auto?: boolean; // true = 流式自动打开；缺省/false = 用户点击打开
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
字段说明：
|
|
||||||
|
|
||||||
| 字段 | 详细含义 |
|
|
||||||
| --- | --- |
|
|
||||||
| `threadId` | 沙箱用来匹配 `onThreadSnapshot` 的线程；也对关闭抑制键有贡献 |
|
|
||||||
| `path` | 传给 `ArtifactFileDetail.filepath`。流式阶段通常是 `write-file:...` 虚拟 URL；落盘后的手动打开可以是真实 artifacts 路径 |
|
|
||||||
| `name` | UI 展示用；临时名阶段可能是 `未命名文件.md` |
|
|
||||||
| `mimeType` | 当 path 还不稳定时，帮助把语言判成 markdown/html，避免落成 TEXT |
|
|
||||||
| `previewKey` | **一次交付的身份**。同一次 tool call 的 path 升级要保持不变；新的 tool call 必须变 |
|
|
||||||
| `auto` | 自动打开才走关闭抑制；手动打开应清抑制 |
|
|
||||||
|
|
||||||
### 6.2 `onPreviewArtifact(artifact)` —— 对话 → 页面
|
|
||||||
|
|
||||||
页面壳 `handlePreviewArtifact` 当前逻辑顺序：
|
|
||||||
|
|
||||||
1. 校验 `threadId`、`path`，缺则 toast 并 return。
|
|
||||||
2. 计算 `artifactKey = sandboxCloseKey(artifact)`。
|
|
||||||
3. 若 `artifact.auto === true` 且 `closedSandboxKeyRef.current === artifactKey` → **抑制，直接 return**。
|
|
||||||
4. 清 `closedSandboxKeyRef`（手动打开或新的自动打开）。
|
|
||||||
5. `ArtifactsContext.select(path, true)` + `setOpen(true)`。
|
|
||||||
6. 判断是否同一预览 / 是否仅 path upgrade：
|
|
||||||
- `isSamePreview`：threadId + path + previewKey 全同 → 不重复 setState。
|
|
||||||
- `isPathUpgrade`：previewKey 相同、path 不同 → 更新 artifact，**不要**再折叠右侧抽屉。
|
|
||||||
7. 若不是 same preview：
|
|
||||||
- `setSandboxArtifact(artifact)`；
|
|
||||||
- **同步** `sandboxArtifactRef.current = artifact`（关键！flush 会立刻读 ref）；
|
|
||||||
- `sandboxSnapshotAppliedAtRef.current = 0`（允许立刻推首帧内容）。
|
|
||||||
8. 若 store 里已有别的 thread 快照，先 `publish(null)`。
|
|
||||||
9. 若 `latestNodeThreadSnapshotRef` 的 threadId 匹配，立刻 `queueSandboxThreadSnapshot`。
|
|
||||||
10. 非 path upgrade 时 `setRightPanelOpen(false)`。
|
|
||||||
|
|
||||||
`sandboxCloseKey`：
|
|
||||||
|
|
||||||
```ts
|
|
||||||
if (artifact.previewKey) {
|
|
||||||
return `${artifact.threadId}:write:${artifact.previewKey}`;
|
|
||||||
}
|
|
||||||
return `${artifact.threadId}:${normalizePreviewArtifactPath(artifact.path)}`;
|
|
||||||
```
|
|
||||||
|
|
||||||
`ArtifactFileDetail` 的 React `key` 必须用这个 key：
|
|
||||||
**新 previewKey → 组件重挂 → 视觉上「清空再生成」。**
|
|
||||||
|
|
||||||
### 6.3 `onThreadSnapshot({ threadId, thread })` —— 对话 → 页面
|
|
||||||
|
|
||||||
每次 `thread` 引用变化（消息 chunk 到达）子组件都会调：
|
|
||||||
|
|
||||||
```ts
|
|
||||||
onThreadSnapshot?.({ threadId: activeThreadId, thread });
|
|
||||||
```
|
|
||||||
|
|
||||||
页面壳应：
|
|
||||||
|
|
||||||
1. 计算 `signature = sandboxThreadSignature(thread)`（用 isLoading、messages 长度、最近 write_file 的 path/content 长度/尾部等拼签名，用于去重）。
|
|
||||||
2. 写入 `latestNodeThreadSnapshotRef`（即使沙箱还没开，打开瞬间也要用）。
|
|
||||||
3. 若当前没有打开的沙箱，或打开的沙箱 threadId 不一致 → **只更新 ref，不 publish**。
|
|
||||||
4. 若一致 → `queueSandboxThreadSnapshot`（前沿节流后 `store.publish`）。
|
|
||||||
|
|
||||||
### 6.4 虚拟 URL 与正文读取
|
|
||||||
|
|
||||||
流式阶段 path 形如：
|
|
||||||
|
|
||||||
```text
|
|
||||||
write-file:${sourcePath}?message_id=${messageId}&tool_call_id=${toolCallId}&language=markdown
|
|
||||||
```
|
|
||||||
|
|
||||||
`loadArtifactContentFromToolCall`：
|
|
||||||
|
|
||||||
1. 解析 URL 的 `message_id`、`tool_call_id`；
|
|
||||||
2. 在 `thread.messages` 里找对应 AI message 的 tool call；
|
|
||||||
3. 返回 `toolCall.args.content`。
|
|
||||||
|
|
||||||
结论：
|
|
||||||
|
|
||||||
- 沙箱跟的是 **tool call 身份**，不是磁盘文件是否已经写完；
|
|
||||||
- 没有真实 path 也能显示正文；
|
|
||||||
- 临时文件名只影响展示名和语言猜测。
|
|
||||||
|
|
||||||
### 6.5 对话子组件 → 页面壳的其它相关回调
|
|
||||||
|
|
||||||
| 回调 | 用途 |
|
|
||||||
| --- | --- |
|
|
||||||
| `onPreviewArtifact` | 打开 / 更新沙箱 |
|
|
||||||
| `onThreadSnapshot` | 推送流式 thread |
|
|
||||||
| 页面壳 `closeSandbox` 传给 `ArtifactFileDetail.onClose` | 用户点关闭 |
|
|
||||||
|
|
||||||
手动从流程图 / 产物列表打开时，也可以直接调 `handlePreviewArtifact`（通常不带 `auto`，或不带 previewKey）。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 7. 打开沙箱的完整步骤
|
|
||||||
|
|
||||||
### 7.1 武装（arm）：只有「本轮用户提交」才允许自动开
|
|
||||||
|
|
||||||
在 `PositionNodeChat.handleSubmit` 真正 `sendMessage` 之前：
|
|
||||||
|
|
||||||
```text
|
|
||||||
activeWriteFilePreviewRef = null
|
|
||||||
autoPreviewBaselineCallKeysRef = writeFileCallKeys(thread.messages) // 历史 write 的 messageId:toolCallId
|
|
||||||
autoPreviewRunArmedRef = true
|
|
||||||
→ sendMessage(...)
|
|
||||||
```
|
|
||||||
|
|
||||||
发送失败要把 `armed` 设回 `false`。
|
|
||||||
|
|
||||||
为什么要 baseline？
|
|
||||||
|
|
||||||
线程里往往已经有上几次问答写过的 `write_file`。如果只看「messages 里有没有 write_file」，一提问就会把旧文件再打开一次。baseline 的含义是：**只有这次提交之后新出现的 tool call 才能自动开沙箱**。
|
|
||||||
|
|
||||||
### 7.2 探测 `write_file`：不要等完整 path
|
|
||||||
|
|
||||||
`write_file` 参数是一整段 JSON 流，**键顺序由模型决定**。
|
|
||||||
|
|
||||||
| 模型吐参顺序 | 步骤条表现 | 错误做法的后果 |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| path / description 先到，再 content | 很快显示描述和文件名 | 普通对话页常见；等 path 也能开 |
|
|
||||||
| **content 先到，最后才 path** | 长时间只有「写入文件」，文件名很晚才出现 | 若硬等完整 path，沙箱会晚几十秒甚至一分钟 |
|
|
||||||
|
|
||||||
岗位会商报告类 agent **经常是第二种**。
|
|
||||||
|
|
||||||
`latestStreamingWriteFile` 规则：
|
|
||||||
|
|
||||||
1. 倒序扫描 AI messages 的 `tool_calls`；
|
|
||||||
2. 工具名是 `write_file` 或 `str_replace`；
|
|
||||||
3. **有完整扩展名的 path**（`hasCompleteArtifactExtension`）→ 用真实路径；
|
|
||||||
4. **尚无可用 path，但 `write_file` 的 content 已有非空字符** → 临时文件名：
|
|
||||||
- 正文头像 HTML → `未命名文件.html`
|
|
||||||
- 否则 → `未命名文件.md`
|
|
||||||
5. `str_replace` 必须等真实 path（它改已有文件）；
|
|
||||||
6. 组装：
|
|
||||||
- `key = messageId:toolCallId`
|
|
||||||
- `path = write-file:虚拟URL`（write_file）或真实 path（str_replace）
|
|
||||||
- `mimeType`：markdown 则 `text/markdown`
|
|
||||||
|
|
||||||
为什么扩展名必须完整？
|
|
||||||
|
|
||||||
流式 path 会经历 `/a/b/report.m` → `/a/b/report.md`。若在 `.m` 时就当真实文件打开，预览语言可能被永久判成 TEXT。
|
|
||||||
|
|
||||||
### 7.3 上报 effect 的四个门闩
|
|
||||||
|
|
||||||
自动上报 `onPreviewArtifact` 前必须同时满足：
|
|
||||||
|
|
||||||
1. `thread.isLoading === true`
|
|
||||||
2. 探测到 streaming artifact，且其 key **不在** baseline
|
|
||||||
3. 已有 `previewThreadId`
|
|
||||||
4. `autoPreviewRunArmedRef === true`
|
|
||||||
|
|
||||||
然后处理 previewKey：
|
|
||||||
|
|
||||||
```text
|
|
||||||
若与 activePreview 是同一次 tool call（含 tool-start 前缀兼容）
|
|
||||||
→ 复用旧 previewKey // 用于临时名 → 真实 path
|
|
||||||
否则
|
|
||||||
→ previewKey = 新的 messageId:toolCallId
|
|
||||||
```
|
|
||||||
|
|
||||||
去重键：
|
|
||||||
|
|
||||||
```text
|
|
||||||
`${previewThreadId}:${previewKey}:${sourcePath}`
|
|
||||||
```
|
|
||||||
|
|
||||||
把 `sourcePath` 算进去，是为了：**同 previewKey 下临时名变成真实 path 时，还要再报一次**（path upgrade），但不会每来一个 content chunk 都报。
|
|
||||||
|
|
||||||
### 7.4 线程绑定竞态（不要误 disarm）
|
|
||||||
|
|
||||||
首轮对话常出现：
|
|
||||||
|
|
||||||
1. 用户发送（本地 draft threadId / 稍后 SDK 创建真实 id）；
|
|
||||||
2. 流已经开始、armed=true；
|
|
||||||
3. 会话 API 把 `node.threadId` 从 `null` 写成真实 id。
|
|
||||||
|
|
||||||
这是「本节点绑定自己的新线程」，**不是**切节点。若绑定 effect 无脑清空 armed / baseline，首轮会永远开不了沙箱。
|
|
||||||
|
|
||||||
正确：识别 `isOwnThreadBinding`（同 nodeKey、旧 threadId 为空、新 threadId 等于当前 boundThreadId）时 **直接 return，不清 armed**。
|
|
||||||
|
|
||||||
### 7.5 path upgrade（改名）≠ 第二次交付
|
|
||||||
|
|
||||||
同一次 tool call：
|
|
||||||
|
|
||||||
```text
|
|
||||||
T1 content 到达 → path=未命名文件.md, previewKey=msg:tc1 → 打开
|
|
||||||
T2 真实 path 到达 → path=/mnt/.../报告.md, previewKey=msg:tc1 → 只改名
|
|
||||||
```
|
|
||||||
|
|
||||||
页面壳看到相同 previewKey、不同 path → `isPathUpgrade`：
|
|
||||||
|
|
||||||
- 更新 `sandboxArtifact`；
|
|
||||||
- **不**重挂（React key 仍基于 previewKey）；
|
|
||||||
- **不**再折叠右侧抽屉。
|
|
||||||
|
|
||||||
### 7.6 同路径二次写入（重新生成）
|
|
||||||
|
|
||||||
同一次问答里模型可能：
|
|
||||||
|
|
||||||
```text
|
|
||||||
1) write_file → 步骤条「写入文件」→ 打开沙箱
|
|
||||||
2) 再 write_file 同 path，description=「重新生成优化版…」
|
|
||||||
```
|
|
||||||
|
|
||||||
这是**两次 tool call**，必须两个 previewKey。
|
|
||||||
若错误地「path 相同就复用 previewKey」：
|
|
||||||
|
|
||||||
- 步骤条出现第二条；
|
|
||||||
- 沙箱 React key 不变；
|
|
||||||
- 用户看到「重新生成了，但沙箱没变化」。
|
|
||||||
|
|
||||||
正确：身份只看 tool call。
|
|
||||||
|
|
||||||
### 7.7 时序总图（content-first）
|
|
||||||
|
|
||||||
```text
|
|
||||||
T0 用户发送 → armed=true，拍 baseline
|
|
||||||
T1 步骤条出现「写入文件」（尚无 path）
|
|
||||||
T1+ args.content 首字符到达 → 临时名打开沙箱，源码开始滚动
|
|
||||||
… store 约每 160ms 推一次 thread 快照 …
|
|
||||||
T2 args.path 拼完整（含 .md）→ path upgrade，标题改真实文件名（不重挂）
|
|
||||||
T3 write 结束 / isLoading=false → 自动切 Markdown 预览
|
|
||||||
```
|
|
||||||
|
|
||||||
### 7.8 时序总图（同轮二次写入）
|
|
||||||
|
|
||||||
```text
|
|
||||||
T1 write_file#1 → previewKey=msg:tc1 → 打开沙箱 A
|
|
||||||
T2 #1 结束（可能短暂切预览）
|
|
||||||
T3 write_file#2（同 path，新 description）→ previewKey=msg:tc2
|
|
||||||
→ key 变 → 组件重挂清空 → 跟 #2 重新流式
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 8. 关闭沙箱的完整步骤
|
|
||||||
|
|
||||||
### 8.1 用户手动关闭
|
|
||||||
|
|
||||||
`closeSandbox()` 应做：
|
|
||||||
|
|
||||||
1. `closedSandboxKeyRef = sandboxCloseKey(current)` —— 抑制**这一次**自动再开；
|
|
||||||
2. 关闭 `ArtifactsContext.open`（若开着）；
|
|
||||||
3. 清节流定时器、pending 快照；
|
|
||||||
4. `sandboxSnapshotAppliedAtRef = 0`；
|
|
||||||
5. `sandboxArtifactRef = null` + `setSandboxArtifact(null)`；
|
|
||||||
6. `sandboxThreadStore.publish(null)`。
|
|
||||||
|
|
||||||
抑制与 path upgrade 的关系：
|
|
||||||
|
|
||||||
- 关掉临时名面板后，同一次 tool call 升级真实 path **仍被抑制**（同一 previewKey）——符合「用户不要看这次」；
|
|
||||||
- 下一次新的 `write_file`（新 previewKey）**可以**再自动开。
|
|
||||||
|
|
||||||
### 8.2 场景切换时强制关闭
|
|
||||||
|
|
||||||
以下操作应先调用 `closeSandbox()`，避免串台：
|
|
||||||
|
|
||||||
- 切岗位；
|
|
||||||
- 切节点；
|
|
||||||
- 切收口阶段；
|
|
||||||
- 新建会话；
|
|
||||||
- 切换历史会话。
|
|
||||||
|
|
||||||
是否写入 `closedSandboxKeyRef` 可按产品决定；至少必须清面板和 store。
|
|
||||||
|
|
||||||
### 8.3 错误的抑制粒度（历史坑）
|
|
||||||
|
|
||||||
若做成「关过一次就整个 thread 不再自动开」：
|
|
||||||
|
|
||||||
- 第一次实时开正常；
|
|
||||||
- 用户关掉；
|
|
||||||
- 再问一次 → 同 thread 被永久抑制 → 看起来像「第二次不实时 / 要等生成完」。
|
|
||||||
|
|
||||||
正确粒度：**单次交付的 `sandboxCloseKey`（含 previewKey）**。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 9. 步骤条与沙箱的关系
|
|
||||||
|
|
||||||
### 9.1 步骤条从哪来
|
|
||||||
|
|
||||||
步骤条由 `MessageList` → `message-group.tsx` 渲染 tool call：
|
|
||||||
|
|
||||||
- 标题：优先 `args.description`；没有则 i18n 兜底「写入文件」；
|
|
||||||
- 子行：有 `args.path` 才显示路径；
|
|
||||||
- 普通对话页还会在「有 path + autoOpen」时自己 `select/setOpen`。
|
|
||||||
|
|
||||||
岗位会商里，步骤条**仍然只负责展示**；打开沙箱走 `onPreviewArtifact`，不要让两套逻辑抢。
|
|
||||||
|
|
||||||
### 9.2 对照表
|
|
||||||
|
|
||||||
| 你看到的步骤条 | 含义 | 沙箱应处于 |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| 仅「写入文件」，无路径 | tool call 已开始；path/description 可能还没流到 | **应已打开**（临时名），源码在滚 |
|
|
||||||
| 「写入文件」+ 路径 | path 已可用 | 已打开；若刚从临时名升级则只改名 |
|
|
||||||
| 带自定义 description 的标题 + 路径 | 模型给了 description | 同上 |
|
|
||||||
| 第二条「重新生成…」+ 同路径 | 新的 write_file（新 toolCallId） | **应重挂**并重新流式 |
|
|
||||||
| 顶部「正在生成，完成后自动预览」 | 仍在 code 视图 | 正常，等 isLoading 结束切预览 |
|
|
||||||
| 生成结束，出现文件卡片 / present_files | 工具结果已落 | 通常已是预览模式；可手动再点开 |
|
|
||||||
|
|
||||||
### 9.3 常见误解
|
|
||||||
|
|
||||||
**误解 1：**「步骤条出现文件名 = 打开沙箱的正确时机」
|
|
||||||
→ 错。那是 path 到达的时机。content-first 时正确打开时机更早：content 首字节 / 工具调用已开始。
|
|
||||||
|
|
||||||
**误解 2：**「步骤条还在写『写入文件』，沙箱却开了，是 bug」
|
|
||||||
→ 通常不是。两边数据源相同，但沙箱允许无 path 打开，步骤条标题可能还没 description。
|
|
||||||
|
|
||||||
**误解 3：**「等生成完从编辑切预览 = 沙箱打开晚了」
|
|
||||||
→ 错。那是 `ArtifactFileDetail` 的 viewMode 策略。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 10. 流式内容如何进入沙箱（性能关键）
|
|
||||||
|
|
||||||
### 10.1 为什么不能用页面 `useState` 存线程快照
|
|
||||||
|
|
||||||
错误写法：
|
|
||||||
|
|
||||||
```ts
|
|
||||||
setSandboxThreadSnapshot(snapshot) // 页面级 useState
|
|
||||||
```
|
|
||||||
|
|
||||||
后果：
|
|
||||||
|
|
||||||
- 消息 chunk 约每 30ms 一次，节流后仍约 6 次/秒；
|
|
||||||
- 每次都重渲染整页：任务卡、意图结果、流程图、节点对话……；
|
|
||||||
- 主线程占满 → 消息列表停绘、沙箱冻住；
|
|
||||||
- 纯尾随 `setTimeout(160)` 会被饿死，十几秒不 flush。
|
|
||||||
|
|
||||||
这同时解释了两个历史现象：
|
|
||||||
|
|
||||||
1. 「沙箱打开了但内容不更新」；
|
|
||||||
2. 「修完节流后整页更卡、消息也不实时」——因为节流终于开始真正 setState 了。
|
|
||||||
|
|
||||||
### 10.2 正确做法：外部 store + 子树订阅
|
|
||||||
|
|
||||||
```ts
|
|
||||||
createSandboxThreadStore()
|
|
||||||
subscribe / getSnapshot / publish
|
|
||||||
|
|
||||||
SandboxThreadProvider
|
|
||||||
useSyncExternalStore(store.subscribe, store.getSnapshot)
|
|
||||||
→ ThreadContext.Provider value={{ thread, isMock:false }}
|
|
||||||
→ ArtifactFileDetail
|
|
||||||
```
|
|
||||||
|
|
||||||
页面壳本身**不**因 snapshot 变化而重渲染；只有 Provider 及其子树重渲染。
|
|
||||||
|
|
||||||
### 10.3 节流必须是前沿（leading-edge）
|
|
||||||
|
|
||||||
`SANDBOX_SNAPSHOT_MIN_INTERVAL_MS = 160`：
|
|
||||||
|
|
||||||
```text
|
|
||||||
queue(snapshot):
|
|
||||||
pending = snapshot
|
|
||||||
if 距上次 publish >= 160ms:
|
|
||||||
立刻 flush（同步 publish）
|
|
||||||
else:
|
|
||||||
若没有在途 timer，则 setTimeout(剩余时间) 做补尾
|
|
||||||
flush:
|
|
||||||
清 timer
|
|
||||||
校验 pending.threadId === sandboxArtifactRef.threadId
|
|
||||||
publish(pending)
|
|
||||||
```
|
|
||||||
|
|
||||||
**不要**改回：
|
|
||||||
|
|
||||||
```ts
|
|
||||||
if (timer != null) return;
|
|
||||||
timer = setTimeout(flush, 160);
|
|
||||||
```
|
|
||||||
|
|
||||||
那是纯尾随；忙主线程下会假死。
|
|
||||||
|
|
||||||
### 10.4 signature 去重
|
|
||||||
|
|
||||||
`sandboxThreadSignature` 用最近 write_file 的 path、content 长度、content 尾 32 字等拼签名。
|
|
||||||
store.publish 时若 threadId+signature 未变，则不通知订阅者，减少无效渲染。
|
|
||||||
|
|
||||||
### 10.5 打开瞬间的首帧
|
|
||||||
|
|
||||||
`handlePreviewArtifact` 里往往会立刻 `queueSandboxThreadSnapshot(latestSnapshot)`。
|
|
||||||
此时 React 的 `setSandboxArtifact` 可能还没提交，若 flush 只读旧的 `sandboxArtifactRef`，会因 threadId 不匹配把首帧丢掉。
|
|
||||||
|
|
||||||
所以打开新预览时必须：
|
|
||||||
|
|
||||||
```ts
|
|
||||||
sandboxArtifactRef.current = artifact; // 同步
|
|
||||||
sandboxSnapshotAppliedAtRef.current = 0;
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 11. 与普通对话页的对照
|
|
||||||
|
|
||||||
| 点 | 普通对话页 | 岗位会商 |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| 谁触发打开 | `message-group` 内 `artifacts.select` | 子组件 `onPreviewArtifact` → 页面壳 |
|
|
||||||
| 是否要求 path | 是（有 path 才自动开） | 否（write_file + content 可临时名开） |
|
|
||||||
| thread 从哪来 | 同树 ThreadContext | `onThreadSnapshot` + 外部 store |
|
|
||||||
| 关闭抑制 | 主要靠 ArtifactsContext / 用户操作 | `closedSandboxKeyRef` 按 previewKey |
|
|
||||||
| 同 path 重写 | 依赖新的 tool call / 选择逻辑 | **必须**新 previewKey 以重挂 |
|
|
||||||
| 结束后切预览 | ArtifactFileDetail 同一套 | 同一套 |
|
|
||||||
|
|
||||||
对齐目标是**用户感知一致**，不是代码路径完全相同。
|
|
||||||
|
|
||||||
普通对话页自动开的核心条件（对照用）：
|
|
||||||
|
|
||||||
```ts
|
|
||||||
artifacts && isLoading && isLast && autoOpen && autoSelect && path && !result
|
|
||||||
```
|
|
||||||
|
|
||||||
它也要求 path，所以 content-first 时普通页同样会偏晚——只是很多主聊天示例 agent 先吐 path，观感更好。岗位会商报告 agent 更常 content-first，所以必须做临时名提前开。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 12. 重做页面时的必守规则
|
|
||||||
|
|
||||||
按优先级：
|
|
||||||
|
|
||||||
1. **流式 thread 快照禁止进页面级 `useState`** → 用 store + `useSyncExternalStore`。
|
|
||||||
2. **节流用前沿 + 补尾**，不要纯尾随 timer。
|
|
||||||
3. **不要等完整 path 才开**；`write_file` + content 即可临时名打开。
|
|
||||||
4. **扩展名完整前不要把 path 当最终 path**。
|
|
||||||
5. **previewKey 按 tool call，不按 path**。
|
|
||||||
6. **打开时同步写 `sandboxArtifactRef`，并重置节流时间戳**。
|
|
||||||
7. **主路径扫描 `thread.messages`，不要只靠 `onToolStart`**。
|
|
||||||
8. **path upgrade 保持 previewKey，不要当第二次交付**。
|
|
||||||
9. **关闭抑制按 sandboxCloseKey，不要按整 thread**。
|
|
||||||
10. **沙箱单例在页面壳；子组件只上报**。
|
|
||||||
11. **本节点 threadId 回写不要 disarm**。
|
|
||||||
12. **「结束后才切预览」不要当打开 bug 去「修」掉共享组件**，除非产品明确要求边生成边渲染 Markdown（需单独评估性能）。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 13. 历史问题与根因（务必读）
|
|
||||||
|
|
||||||
下面每个都在真实联调里出现过。重做时若踩中，优先回来对照。
|
|
||||||
|
|
||||||
### 13.1 沙箱要等文件名出来才开（晚几十秒）
|
|
||||||
|
|
||||||
**现象：** 步骤条早就「写入文件」，沙箱很晚才开；普通对话页对比显得「实时」。
|
|
||||||
|
|
||||||
**根因：** 探测逻辑硬等完整 `path`；而该 agent 先流 `content`、最后才流 `path`。
|
|
||||||
|
|
||||||
**修复：** content 首批字符即可用临时名打开；path 到了再 upgrade。
|
|
||||||
|
|
||||||
### 13.2 沙箱打开了，内容冻住，生成完才灌满
|
|
||||||
|
|
||||||
**现象：** 面板开了，但里面一直是空/旧内容；日志里 queue 很多，flush 很少。
|
|
||||||
|
|
||||||
**根因：** 纯尾随 160ms 定时器在忙主线程下被饿死。
|
|
||||||
|
|
||||||
**修复：** 前沿节流——到期就在流回调里同步 flush。
|
|
||||||
|
|
||||||
### 13.3 修完「内容更新」后，整页卡顿、消息也不实时
|
|
||||||
|
|
||||||
**现象：** 沙箱开始更新了，但页面更卡，消息列表也「攒到最后刷」。
|
|
||||||
|
|
||||||
**根因：** flush 走的是页面 `useState`，每 160ms 整页重渲染。以前 timer 饿死时反而「不卡」。
|
|
||||||
|
|
||||||
**修复：** 快照改外部 store，只让沙箱子树订阅。
|
|
||||||
|
|
||||||
### 13.4 第二次「重新生成」步骤有了，沙箱不变
|
|
||||||
|
|
||||||
**现象：** 同轮第二条二条 write 步骤，沙箱仍显示第一次完整结果。
|
|
||||||
|
|
||||||
**根因：** 用「path 相同」复用了第一次 previewKey，React key 不变，组件不重挂。
|
|
||||||
|
|
||||||
**修复：** previewKey 只按 tool call；同 path 新 call 必须新 key。
|
|
||||||
|
|
||||||
### 13.5 第一次实时，关掉后再问就不实时
|
|
||||||
|
|
||||||
**现象：** 关过沙箱后，下一轮要等生成完才开，或不开。
|
|
||||||
|
|
||||||
**根因：** 抑制绑在整个 threadId，或把 path upgrade / 新 call 误判成同一次。
|
|
||||||
|
|
||||||
**修复：** 抑制键 = `sandboxCloseKey(previewKey)`；仅抑制那一次交付。
|
|
||||||
|
|
||||||
### 13.6 首轮永远不开
|
|
||||||
|
|
||||||
**现象：** 新建节点第一次提问，armed 后很快又不满足条件。
|
|
||||||
|
|
||||||
**根因：** `node.threadId` 从 null 回写真实 id 时，绑定 effect 误 disarm。
|
|
||||||
|
|
||||||
**修复：** `isOwnThreadBinding` 时不清 armed。
|
|
||||||
|
|
||||||
### 13.7 预览变成纯文本
|
|
||||||
|
|
||||||
**现象：** 明明是 md，却按 TEXT 打开。
|
|
||||||
|
|
||||||
**根因：** 在 `.m` 阶段就当完整 path；或临时名没有 `.md` / 没传 language、mimeType；或 path 带空格。
|
|
||||||
|
|
||||||
**修复：** `hasCompleteArtifactExtension`；临时名带扩展名；URL 加 `language=markdown`；path trim。
|
|
||||||
|
|
||||||
### 13.8 依赖 onToolStart，线上偶发不开
|
|
||||||
|
|
||||||
**现象：** 本地偶发正常，联调经常不开。
|
|
||||||
|
|
||||||
**根因：** 后端 StreamBridge / worker 可能过滤 tools/events 类 stream mode。
|
|
||||||
|
|
||||||
**修复：** 主路径必须是 messages 里渐进出现的 `tool_calls`；onToolStart 只能当补充。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 14. 排障手册（按症状）
|
|
||||||
|
|
||||||
排障时建议先看 Chrome Performance / React 重渲染是否整页抖，再看消息里 tool_calls 的 args 是 path-first 还是 content-first。
|
|
||||||
|
|
||||||
### 14.1 沙箱开得很晚
|
|
||||||
|
|
||||||
检查顺序：
|
|
||||||
|
|
||||||
1. `latestStreamingWriteFile` 是否仍要求完整 path？
|
|
||||||
2. armed 是否被 threadId 回写清掉？
|
|
||||||
3. 是否命中 `closedSandboxKey`？
|
|
||||||
4. 新 call 是否被 baseline 当成历史？
|
|
||||||
5. `previewThreadId` 是否为空（线程还没绑上）？
|
|
||||||
|
|
||||||
### 14.2 打开了但内容空白 / 冻住
|
|
||||||
|
|
||||||
1. 快照是否进了页面 useState？
|
|
||||||
2. 节流是否纯尾随？
|
|
||||||
3. `SandboxThreadProvider` 是否拿到带 messages 的 thread？
|
|
||||||
4. 虚拟 URL 的 message_id / tool_call_id 是否对得上？
|
|
||||||
5. 打开时 `sandboxArtifactRef` 是否同步？（首帧是否被 drop）
|
|
||||||
6. signature 是否因实现错误一直不变，导致 publish 被去重？
|
|
||||||
|
|
||||||
### 14.3 整页卡、消息列表也不实时
|
|
||||||
|
|
||||||
1. 搜页面壳是否还有 `setSandboxThreadSnapshot` / 类似大对象 state。
|
|
||||||
2. 是否在每 chunk `console.debug` 打大对象（DevTools 打开时更卡）。
|
|
||||||
3. 是否错误地让页面壳订阅了 store（页面壳不应 `useSyncExternalStore` 这份 store；只有 Provider 订）。
|
|
||||||
|
|
||||||
### 14.4 重新生成不刷新
|
|
||||||
|
|
||||||
1. 第二次 write 的 toolCallId 是否变了？
|
|
||||||
2. previewKey 是否仍用 path 复用？
|
|
||||||
3. `ArtifactFileDetail` 的 `key=` 是否基于 sandboxCloseKey/previewKey？
|
|
||||||
|
|
||||||
### 14.5 关后再问异常
|
|
||||||
|
|
||||||
1. 打印 `closedSandboxKeyRef` 与新 artifact 的 sandboxCloseKey。
|
|
||||||
2. 确认新一轮 send 时 armed/baseline 已重置。
|
|
||||||
3. 确认抑制不是整 thread。
|
|
||||||
|
|
||||||
### 14.6 语言 / 预览模式不对
|
|
||||||
|
|
||||||
1. 看打开时的 path / mimeType / language 查询参数。
|
|
||||||
2. 确认不是在扩展名不完整时打开。
|
|
||||||
3. 确认「源码→预览」发生在 isLoading false 之后（属正常）。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 15. 对接自测清单
|
|
||||||
|
|
||||||
重做页面后至少跑完：
|
|
||||||
|
|
||||||
### 功能
|
|
||||||
|
|
||||||
- [ ] 首轮：步骤条「写入文件」出现时，沙箱是否已开并开始出字？
|
|
||||||
- [ ] content-first agent：无文件名阶段是否也能开？
|
|
||||||
- [ ] path 到达后：是否只改名、不整页闪、不重挂？
|
|
||||||
- [ ] 同轮第二次同路径 write：是否清空并重新流式？
|
|
||||||
- [ ] 结束后是否自动切 Markdown 预览？
|
|
||||||
- [ ] 手动点步骤条路径 / 产物卡片：能否打开正确文件？
|
|
||||||
|
|
||||||
### 关闭与抑制
|
|
||||||
|
|
||||||
- [ ] 流式中手动关闭：本次是否不再自动弹？
|
|
||||||
- [ ] 关闭后再发一轮新问题：是否仍可自动开？
|
|
||||||
- [ ] path upgrade 是否不会绕过「用户刚关闭」的抑制？
|
|
||||||
|
|
||||||
### 场景切换
|
|
||||||
|
|
||||||
- [ ] 切节点：沙箱关闭，旧内容不残留。
|
|
||||||
- [ ] 切岗位：同上。
|
|
||||||
- [ ] 新建会话 / 切历史：同上。
|
|
||||||
|
|
||||||
### 性能
|
|
||||||
|
|
||||||
- [ ] 流式中消息列表是否实时出字？
|
|
||||||
- [ ] 页面是否明显掉帧 / 卡死？
|
|
||||||
- [ ] React DevTools 中，大页面壳是否在每 160ms 整页 update？（不应）
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 16. 最小接线示例
|
|
||||||
|
|
||||||
### 16.1 页面壳（示意）
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
const [sandboxArtifact, setSandboxArtifact] = useState<PositionArtifactPreview | null>(null);
|
|
||||||
const sandboxArtifactRef = useRef<PositionArtifactPreview | null>(null);
|
|
||||||
const closedSandboxKeyRef = useRef<string | null>(null);
|
|
||||||
const latestNodeThreadSnapshotRef = useRef<SandboxThreadSnapshot | null>(null);
|
|
||||||
const store = useMemo(createSandboxThreadStore, []);
|
|
||||||
// pending + timer + appliedAt 用于前沿节流（见 PositionRoundtablePage）
|
|
||||||
|
|
||||||
function handlePreviewArtifact(artifact: PositionArtifactPreview) {
|
|
||||||
if (!artifact.threadId || !artifact.path) return;
|
|
||||||
const key = sandboxCloseKey(artifact);
|
|
||||||
if (artifact.auto && closedSandboxKeyRef.current === key) return;
|
|
||||||
closedSandboxKeyRef.current = null;
|
|
||||||
|
|
||||||
artifactsCtx?.select(artifact.path, true);
|
|
||||||
artifactsCtx?.setOpen(true);
|
|
||||||
|
|
||||||
const prev = sandboxArtifactRef.current;
|
|
||||||
const isSame =
|
|
||||||
prev?.threadId === artifact.threadId &&
|
|
||||||
prev.path === artifact.path &&
|
|
||||||
prev.previewKey === artifact.previewKey;
|
|
||||||
const isPathUpgrade =
|
|
||||||
!isSame &&
|
|
||||||
Boolean(artifact.previewKey) &&
|
|
||||||
prev?.threadId === artifact.threadId &&
|
|
||||||
prev.previewKey === artifact.previewKey;
|
|
||||||
|
|
||||||
if (!isSame) {
|
|
||||||
sandboxArtifactRef.current = artifact; // 必须同步
|
|
||||||
setSandboxArtifact(artifact);
|
|
||||||
sandboxSnapshotAppliedAtRef.current = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (store.getSnapshot()?.threadId !== artifact.threadId) {
|
|
||||||
store.publish(null);
|
|
||||||
}
|
|
||||||
const latest = latestNodeThreadSnapshotRef.current;
|
|
||||||
if (latest?.threadId === artifact.threadId) {
|
|
||||||
queueSandboxThreadSnapshot(latest);
|
|
||||||
}
|
|
||||||
if (!isPathUpgrade) setRightPanelOpen(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleNodeThreadSnapshot(snapshot: { threadId: string; thread: BaseStream<AgentThreadState> }) {
|
|
||||||
const next = { ...snapshot, signature: sandboxThreadSignature(snapshot.thread) };
|
|
||||||
latestNodeThreadSnapshotRef.current = next;
|
|
||||||
if (sandboxArtifactRef.current?.threadId !== snapshot.threadId) return;
|
|
||||||
queueSandboxThreadSnapshot(next);
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeSandbox() {
|
|
||||||
if (sandboxArtifactRef.current) {
|
|
||||||
closedSandboxKeyRef.current = sandboxCloseKey(sandboxArtifactRef.current);
|
|
||||||
}
|
|
||||||
// clear timer / pending / appliedAt
|
|
||||||
sandboxArtifactRef.current = null;
|
|
||||||
setSandboxArtifact(null);
|
|
||||||
store.publish(null);
|
|
||||||
artifactsCtx?.setOpen(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 渲染
|
|
||||||
{sandboxArtifact && (
|
|
||||||
<SandboxThreadProvider
|
|
||||||
store={store}
|
|
||||||
threadId={sandboxArtifact.threadId}
|
|
||||||
fallbackThread={stub}
|
|
||||||
>
|
|
||||||
<ArtifactFileDetail
|
|
||||||
key={sandboxCloseKey(sandboxArtifact)}
|
|
||||||
filepath={sandboxArtifact.path}
|
|
||||||
threadId={sandboxArtifact.threadId}
|
|
||||||
mimeType={sandboxArtifact.mimeType}
|
|
||||||
onClose={closeSandbox}
|
|
||||||
allowVirtualMarkdownEdit
|
|
||||||
/>
|
|
||||||
</SandboxThreadProvider>
|
|
||||||
)}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 16.2 对话子组件（示意）
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// send 前
|
|
||||||
activeWriteFilePreviewRef.current = null;
|
|
||||||
autoPreviewBaselineCallKeysRef.current = writeFileCallKeys(thread.messages);
|
|
||||||
autoPreviewRunArmedRef.current = true;
|
|
||||||
await sendMessage(...);
|
|
||||||
|
|
||||||
// 探测
|
|
||||||
const streaming = thread.isLoading ? latestStreamingWriteFile(thread.messages) : null;
|
|
||||||
const next =
|
|
||||||
streaming && !autoPreviewBaselineCallKeysRef.current.has(streaming.key)
|
|
||||||
? streaming
|
|
||||||
: null;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!thread.isLoading || !next || !previewThreadId || !autoPreviewRunArmedRef.current) return;
|
|
||||||
|
|
||||||
// previewKey：同 tool call 复用，否则用 next.key
|
|
||||||
// artifactKey = threadId:previewKey:sourcePath 去重
|
|
||||||
onPreviewArtifact?.({
|
|
||||||
threadId: previewThreadId,
|
|
||||||
path: next.path,
|
|
||||||
name: next.name,
|
|
||||||
mimeType: next.mimeType,
|
|
||||||
previewKey,
|
|
||||||
auto: true,
|
|
||||||
});
|
|
||||||
}, [next, previewThreadId, thread.isLoading, onPreviewArtifact]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
onThreadSnapshot?.({ threadId: activeThreadId, thread });
|
|
||||||
}, [activeThreadId, thread, onThreadSnapshot]);
|
|
||||||
```
|
|
||||||
|
|
||||||
**强烈建议：** 探测 / armed / baseline / 临时名逻辑直接复用或抽取自 `PositionNodeChat`，不要从零重写。
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 17. 关键代码索引
|
|
||||||
|
|
||||||
| 主题 | 位置 |
|
|
||||||
| --- | --- |
|
|
||||||
| 临时名 / 完整扩展名 / latestStreamingWriteFile | `PositionNodeChat.tsx` 中 `provisionalWriteFilePath`、`hasCompleteArtifactExtension`、`latestStreamingWriteFile` |
|
|
||||||
| armed / baseline / 上报 effect | `PositionNodeChat.tsx` `handleSubmit` + streaming preview `useEffect` |
|
|
||||||
| 同 tool call 判断 / 二次写入重挂 | 同上，`isSameToolCall` / `previewKey` |
|
|
||||||
| 线程绑定保护 | `PositionNodeChat.tsx` node binding `useEffect` 中 `isOwnThreadBinding` |
|
|
||||||
| sandboxCloseKey / store / 前沿节流 | `PositionRoundtablePage.tsx` `sandboxCloseKey`、`createSandboxThreadStore`、`queueSandboxThreadSnapshot` |
|
|
||||||
| 打开 / path upgrade / 抑制 | `PositionRoundtablePage.tsx` `handlePreviewArtifact` |
|
|
||||||
| 关闭 | `PositionRoundtablePage.tsx` `closeSandbox` |
|
|
||||||
| 虚拟 URL 读 content | `core/artifacts/loader.ts` `loadArtifactContentFromToolCall` |
|
|
||||||
| 源码/预览切换 | `artifact-file-detail.tsx` 中 `viewMode` + `thread.isLoading` |
|
|
||||||
| 普通页步骤条自动开 | `message-group.tsx` `write_file` 分支 |
|
|
||||||
|
|
||||||
相关提交（背景）：
|
|
||||||
|
|
||||||
- `fix(frontend): 岗位会商沙箱在 write_file 流式阶段实时打开并刷新`
|
|
||||||
— 临时名打开、外部 store、前沿节流
|
|
||||||
- `fix(frontend): 同路径二次 write_file 时重挂岗位会商沙箱`
|
|
||||||
— previewKey 按 tool call，禁止按 path 复用
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 18. 术语表
|
|
||||||
|
|
||||||
| 术语 | 含义 |
|
|
||||||
| --- | --- |
|
|
||||||
| armed | 本轮用户发送后，允许自动打开沙箱的开关 |
|
|
||||||
| baseline | send 前已有的 write tool call 集合，用于忽略历史产物 |
|
|
||||||
| previewKey | 一次交付的稳定身份，推荐 `messageId:toolCallId` |
|
|
||||||
| sandboxCloseKey | 关闭抑制键，同时用作 `ArtifactFileDetail` 的 React key |
|
|
||||||
| provisional path / 临时名 | 尚无真实 path 时的 `未命名文件.md` / `.html` |
|
|
||||||
| path upgrade | 同 previewKey 下临时名升级为真实 path |
|
|
||||||
| sandboxThreadStore | 流式线程外部 store，避免整页重渲染 |
|
|
||||||
| write-file: URL | 用 message_id + tool_call_id 定位流式 content 的虚拟路径 |
|
|
||||||
| leading-edge throttle / 前沿节流 | 到期立即在回调里 publish，而不是只挂尾随 timer |
|
|
||||||
| content-first / path-first | 模型流式 JSON 参数时 content 与 path 哪个先到 |
|
|
||||||
| isOwnThreadBinding | 本节点把自己的新 threadId 写回 props，不是切节点 |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 附录 A：给对接同学的一页纸摘要
|
|
||||||
|
|
||||||
1. 页面壳只挂一个沙箱；子组件只调用 `onPreviewArtifact` / `onThreadSnapshot`。
|
|
||||||
2. 自动打开时机 ≈ 步骤条出现「写入文件」时，而不是出现文件名时。
|
|
||||||
3. `write_file` 可以没有 path：临时名打开，path 到了再改名。
|
|
||||||
4. 流式 thread 进外部 store，进页面 state 会卡死。
|
|
||||||
5. 节流要前沿；previewKey 看 tool call；关闭抑制看 sandboxCloseKey。
|
|
||||||
6. 同路径重新生成 = 新 previewKey = 沙箱重挂。
|
|
||||||
7. 出问题先对照第 13、14 节，再看代码索引第 17 节。
|
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<title>CM 助手</title>
|
<title>CM 助手</title>
|
||||||
<script src="/runtime-config.js" data-runtime-config></script>
|
<script src="/runtime-config.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
Generated
+144
-96
@@ -70,7 +70,6 @@
|
|||||||
"hast": "^1.0.0",
|
"hast": "^1.0.0",
|
||||||
"katex": "^0.16.28",
|
"katex": "^0.16.28",
|
||||||
"lucide-react": "^0.562.0",
|
"lucide-react": "^0.562.0",
|
||||||
"mermaid": "^11.15.0",
|
|
||||||
"motion": "^12.26.2",
|
"motion": "^12.26.2",
|
||||||
"nanoid": "^5.1.6",
|
"nanoid": "^5.1.6",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
@@ -105,7 +104,6 @@
|
|||||||
"@types/react": "^19.0.0",
|
"@types/react": "^19.0.0",
|
||||||
"@types/react-dom": "^19.0.0",
|
"@types/react-dom": "^19.0.0",
|
||||||
"@vitejs/plugin-react": "^5.0.4",
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
"lightningcss": "^1.30.2",
|
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.3",
|
||||||
"tailwindcss": "^4.0.15",
|
"tailwindcss": "^4.0.15",
|
||||||
"tw-animate-css": "^1.4.0",
|
"tw-animate-css": "^1.4.0",
|
||||||
@@ -462,11 +460,37 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@cfworker/json-schema/-/json-schema-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/@cfworker/json-schema/-/json-schema-4.1.1.tgz",
|
||||||
"integrity": "sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og=="
|
"integrity": "sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@chevrotain/cst-dts-gen": {
|
||||||
|
"version": "12.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-12.0.0.tgz",
|
||||||
|
"integrity": "sha512-fSL4KXjTl7cDgf0B5Rip9Q05BOrYvkJV/RrBTE/bKDN096E4hN/ySpcBK5B24T76dlQ2i32Zc3PAE27jFnFrKg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@chevrotain/gast": "12.0.0",
|
||||||
|
"@chevrotain/types": "12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@chevrotain/gast": {
|
||||||
|
"version": "12.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-12.0.0.tgz",
|
||||||
|
"integrity": "sha512-1ne/m3XsIT8aEdrvT33so0GUC+wkctpUPK6zU9IlOyJLUbR0rg4G7ZiApiJbggpgPir9ERy3FRjT6T7lpgetnQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@chevrotain/types": "12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@chevrotain/regexp-to-ast": {
|
||||||
|
"version": "12.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-12.0.0.tgz",
|
||||||
|
"integrity": "sha512-p+EW9MaJwgaHguhoqwOtx/FwuGr+DnNn857sXWOi/mClXIkPGl3rn7hGNWvo31HA3vyeQxjqe+H36yZJwYU8cA=="
|
||||||
|
},
|
||||||
"node_modules/@chevrotain/types": {
|
"node_modules/@chevrotain/types": {
|
||||||
"version": "11.1.2",
|
"version": "12.0.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@chevrotain/types/-/types-11.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-12.0.0.tgz",
|
||||||
"integrity": "sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==",
|
"integrity": "sha512-S+04vjFQKeuYw0/eW3U52LkAHQsB1ASxsPGsLPUyQgrZ2iNNibQrsidruDzjEX2JYfespXMG0eZmXlhA6z7nWA=="
|
||||||
"license": "Apache-2.0"
|
},
|
||||||
|
"node_modules/@chevrotain/utils": {
|
||||||
|
"version": "12.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-12.0.0.tgz",
|
||||||
|
"integrity": "sha512-lB59uJoaGIfOOL9knQqQRfhl9g7x8/wqFkp13zTdkRu1huG9kg6IJs1O8hqj9rs6h7orGxHJUKb+mX3rPbWGhA=="
|
||||||
},
|
},
|
||||||
"node_modules/@codemirror/autocomplete": {
|
"node_modules/@codemirror/autocomplete": {
|
||||||
"version": "6.20.1",
|
"version": "6.20.1",
|
||||||
@@ -1708,12 +1732,11 @@
|
|||||||
"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
|
"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
|
||||||
},
|
},
|
||||||
"node_modules/@mermaid-js/parser": {
|
"node_modules/@mermaid-js/parser": {
|
||||||
"version": "1.2.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@mermaid-js/parser/-/parser-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-1.1.0.tgz",
|
||||||
"integrity": "sha512-oYPyv8A4As1yH5Bx+04iQEQxXuIQDe0GKCNSRgao6z8AM9jixXIfP0vsppRLvGf+nKIOb9/LdpWA4YuJiVvESA==",
|
"integrity": "sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw==",
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@chevrotain/types": "~11.1.2"
|
"langium": "^4.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@opentelemetry/api": {
|
"node_modules/@opentelemetry/api": {
|
||||||
@@ -4251,66 +4274,6 @@
|
|||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
|
|
||||||
"version": "1.7.1",
|
|
||||||
"dev": true,
|
|
||||||
"inBundle": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@emnapi/wasi-threads": "1.1.0",
|
|
||||||
"tslib": "^2.4.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
|
|
||||||
"version": "1.7.1",
|
|
||||||
"dev": true,
|
|
||||||
"inBundle": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"dependencies": {
|
|
||||||
"tslib": "^2.4.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
|
|
||||||
"version": "1.1.0",
|
|
||||||
"dev": true,
|
|
||||||
"inBundle": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"dependencies": {
|
|
||||||
"tslib": "^2.4.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
|
|
||||||
"version": "1.1.0",
|
|
||||||
"dev": true,
|
|
||||||
"inBundle": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@emnapi/core": "^1.7.1",
|
|
||||||
"@emnapi/runtime": "^1.7.1",
|
|
||||||
"@tybys/wasm-util": "^0.10.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
|
|
||||||
"version": "0.10.1",
|
|
||||||
"dev": true,
|
|
||||||
"inBundle": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"dependencies": {
|
|
||||||
"tslib": "^2.4.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
|
|
||||||
"version": "2.8.1",
|
|
||||||
"dev": true,
|
|
||||||
"inBundle": true,
|
|
||||||
"license": "0BSD",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
|
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
|
||||||
"version": "4.1.18",
|
"version": "4.1.18",
|
||||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
|
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
|
||||||
@@ -5687,6 +5650,32 @@
|
|||||||
"url": "https://github.com/sponsors/wooorm"
|
"url": "https://github.com/sponsors/wooorm"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/chevrotain": {
|
||||||
|
"version": "12.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-12.0.0.tgz",
|
||||||
|
"integrity": "sha512-csJvb+6kEiQaqo1woTdSAuOWdN0WTLIydkKrBnS+V5gZz0oqBrp4kQ35519QgK6TpBThiG3V1vNSHlIkv4AglQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@chevrotain/cst-dts-gen": "12.0.0",
|
||||||
|
"@chevrotain/gast": "12.0.0",
|
||||||
|
"@chevrotain/regexp-to-ast": "12.0.0",
|
||||||
|
"@chevrotain/types": "12.0.0",
|
||||||
|
"@chevrotain/utils": "12.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=22.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/chevrotain-allstar": {
|
||||||
|
"version": "0.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/chevrotain-allstar/-/chevrotain-allstar-0.4.3.tgz",
|
||||||
|
"integrity": "sha512-2X4mkroolSMKqW+H22pyPMUVDqYZzPhephTmg/NODKb1IGYPHfxfhcW0EjS7wcPJNbze2i4vBWT7zT5FKF2lrQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"lodash-es": "^4.18.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"chevrotain": "^12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/class-variance-authority": {
|
"node_modules/class-variance-authority": {
|
||||||
"version": "0.7.1",
|
"version": "0.7.1",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
@@ -6558,16 +6547,6 @@
|
|||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/es-toolkit": {
|
|
||||||
"version": "1.49.0",
|
|
||||||
"resolved": "https://registry.npmmirror.com/es-toolkit/-/es-toolkit-1.49.0.tgz",
|
|
||||||
"integrity": "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==",
|
|
||||||
"license": "MIT",
|
|
||||||
"workspaces": [
|
|
||||||
"docs",
|
|
||||||
"benchmarks"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"node_modules/esbuild": {
|
"node_modules/esbuild": {
|
||||||
"version": "0.25.12",
|
"version": "0.25.12",
|
||||||
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.25.12.tgz",
|
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.25.12.tgz",
|
||||||
@@ -7375,9 +7354,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/katex": {
|
"node_modules/katex": {
|
||||||
"version": "0.16.47",
|
"version": "0.16.28",
|
||||||
"resolved": "https://registry.npmmirror.com/katex/-/katex-0.16.47.tgz",
|
|
||||||
"integrity": "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==",
|
|
||||||
"funding": [
|
"funding": [
|
||||||
"https://opencollective.com/katex",
|
"https://opencollective.com/katex",
|
||||||
"https://github.com/sponsors/katex"
|
"https://github.com/sponsors/katex"
|
||||||
@@ -7395,6 +7372,23 @@
|
|||||||
"resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
|
||||||
"integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="
|
"integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="
|
||||||
},
|
},
|
||||||
|
"node_modules/langium": {
|
||||||
|
"version": "4.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/langium/-/langium-4.2.3.tgz",
|
||||||
|
"integrity": "sha512-sOPIi4hISFnY7twwV97ca1TsxpBtXq0URu/LL1AvxwccPG/RIBBlKS7a/f/EL6w8lTNaS0EFs/F+IdSOaqYpng==",
|
||||||
|
"dependencies": {
|
||||||
|
"@chevrotain/regexp-to-ast": "~12.0.0",
|
||||||
|
"chevrotain": "~12.0.0",
|
||||||
|
"chevrotain-allstar": "~0.4.3",
|
||||||
|
"vscode-languageserver": "~9.0.1",
|
||||||
|
"vscode-languageserver-textdocument": "~1.0.11",
|
||||||
|
"vscode-uri": "~3.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.10.0",
|
||||||
|
"npm": ">=10.2.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/langsmith": {
|
"node_modules/langsmith": {
|
||||||
"version": "0.6.0",
|
"version": "0.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/langsmith/-/langsmith-0.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/langsmith/-/langsmith-0.6.0.tgz",
|
||||||
@@ -8106,32 +8100,43 @@
|
|||||||
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
|
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
|
||||||
},
|
},
|
||||||
"node_modules/mermaid": {
|
"node_modules/mermaid": {
|
||||||
"version": "11.16.0",
|
"version": "11.14.0",
|
||||||
"resolved": "https://registry.npmmirror.com/mermaid/-/mermaid-11.16.0.tgz",
|
"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.14.0.tgz",
|
||||||
"integrity": "sha512-Zvm3kbstgdpvIJPPItlL7fppIZ3kibvc1oZIGxdvk9t6UFz6flv+Jw7FtRGKwfcI8OckmH04LqG6LlS6X4B1pA==",
|
"integrity": "sha512-GSGloRsBs+JINmmhl0JDwjpuezCsHB4WGI4NASHxL3fHo3o/BRXTxhDLKnln8/Q0lRFRyDdEjmk1/d5Sn1Xz8g==",
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@braintree/sanitize-url": "^7.1.2",
|
"@braintree/sanitize-url": "^7.1.1",
|
||||||
"@iconify/utils": "^3.0.2",
|
"@iconify/utils": "^3.0.2",
|
||||||
"@mermaid-js/parser": "^1.2.0",
|
"@mermaid-js/parser": "^1.1.0",
|
||||||
"@types/d3": "^7.4.3",
|
"@types/d3": "^7.4.3",
|
||||||
"@upsetjs/venn.js": "^2.0.0",
|
"@upsetjs/venn.js": "^2.0.0",
|
||||||
"cytoscape": "^3.33.3",
|
"cytoscape": "^3.33.1",
|
||||||
"cytoscape-cose-bilkent": "^4.1.0",
|
"cytoscape-cose-bilkent": "^4.1.0",
|
||||||
"cytoscape-fcose": "^2.2.0",
|
"cytoscape-fcose": "^2.2.0",
|
||||||
"d3": "^7.9.0",
|
"d3": "^7.9.0",
|
||||||
"d3-sankey": "^0.12.3",
|
"d3-sankey": "^0.12.3",
|
||||||
"dagre-d3-es": "7.0.14",
|
"dagre-d3-es": "7.0.14",
|
||||||
"dayjs": "^1.11.20",
|
"dayjs": "^1.11.19",
|
||||||
"dompurify": "^3.3.3",
|
"dompurify": "^3.3.1",
|
||||||
"es-toolkit": "^1.45.1",
|
"katex": "^0.16.25",
|
||||||
"katex": "^0.16.45",
|
|
||||||
"khroma": "^2.1.0",
|
"khroma": "^2.1.0",
|
||||||
|
"lodash-es": "^4.17.23",
|
||||||
"marked": "^16.3.0",
|
"marked": "^16.3.0",
|
||||||
"roughjs": "^4.6.6",
|
"roughjs": "^4.6.6",
|
||||||
"stylis": "^4.3.6",
|
"stylis": "^4.3.6",
|
||||||
"ts-dedent": "^2.2.0",
|
"ts-dedent": "^2.2.0",
|
||||||
"uuid": "^11.1.0 || ^12 || ^13 || ^14.0.0"
|
"uuid": "^11.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/mermaid/node_modules/uuid": {
|
||||||
|
"version": "11.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.1.tgz",
|
||||||
|
"integrity": "sha512-vIYxrBCC/N/K+Js3qSN88go7kIfNPssr/hHCesKCQNAjmgvYS2oqr69kIufEG+O4+PfezOH4EbIeHCfFov8ZgQ==",
|
||||||
|
"funding": [
|
||||||
|
"https://github.com/sponsors/broofa",
|
||||||
|
"https://github.com/sponsors/ctavan"
|
||||||
|
],
|
||||||
|
"bin": {
|
||||||
|
"uuid": "dist/esm/bin/uuid"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/micromark": {
|
"node_modules/micromark": {
|
||||||
@@ -10409,6 +10414,49 @@
|
|||||||
"vite": ">=5.0.0"
|
"vite": ">=5.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/vscode-jsonrpc": {
|
||||||
|
"version": "8.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
|
||||||
|
"integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/vscode-languageserver": {
|
||||||
|
"version": "9.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-9.0.1.tgz",
|
||||||
|
"integrity": "sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==",
|
||||||
|
"dependencies": {
|
||||||
|
"vscode-languageserver-protocol": "3.17.5"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"installServerIntoExtension": "bin/installServerIntoExtension"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/vscode-languageserver-protocol": {
|
||||||
|
"version": "3.17.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz",
|
||||||
|
"integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==",
|
||||||
|
"dependencies": {
|
||||||
|
"vscode-jsonrpc": "8.2.0",
|
||||||
|
"vscode-languageserver-types": "3.17.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/vscode-languageserver-textdocument": {
|
||||||
|
"version": "1.0.12",
|
||||||
|
"resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
|
||||||
|
"integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA=="
|
||||||
|
},
|
||||||
|
"node_modules/vscode-languageserver-types": {
|
||||||
|
"version": "3.17.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
|
||||||
|
"integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg=="
|
||||||
|
},
|
||||||
|
"node_modules/vscode-uri": {
|
||||||
|
"version": "3.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
|
||||||
|
"integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="
|
||||||
|
},
|
||||||
"node_modules/w3c-keyname": {
|
"node_modules/w3c-keyname": {
|
||||||
"version": "2.2.8",
|
"version": "2.2.8",
|
||||||
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
|
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 951 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 967 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1000 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 959 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 543 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 582 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 966 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@@ -0,0 +1,28 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" role="img" aria-labelledby="title">
|
||||||
|
<title id="title">CM 助手</title>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="logoTopLeft" x1="7" y1="7" x2="25" y2="20" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#5DB5FF"/>
|
||||||
|
<stop offset="1" stop-color="#328AF2"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="logoTopRight" x1="24" y1="3" x2="43" y2="19" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#62B2FF"/>
|
||||||
|
<stop offset="1" stop-color="#4B98F4"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="logoLeft" x1="5" y1="14" x2="24" y2="45" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#2C7CF0"/>
|
||||||
|
<stop offset="1" stop-color="#1F5EDA"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="logoBottom" x1="9" y1="31" x2="43" y2="40" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#276DE3"/>
|
||||||
|
<stop offset="1" stop-color="#4E9DF5"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- The mark is drawn as four independent folded faces. Together they form
|
||||||
|
the open C-shaped cube used in the product reference. -->
|
||||||
|
<path d="M5 13.5 24 3v10L14 18.5 5 13.5Z" fill="url(#logoTopLeft)"/>
|
||||||
|
<path d="M24 3 43 13.5 34 18.5 24 13V3Z" fill="url(#logoTopRight)"/>
|
||||||
|
<path d="M5 13.5 14 18.5v11L24 35v10L5 34.5v-21Z" fill="url(#logoLeft)"/>
|
||||||
|
<path d="M14 29.5 24 35l10-5.5 9 5L24 45 5 34.5l9-5Z" fill="url(#logoBottom)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -7,30 +7,6 @@
|
|||||||
// 4. 这里的默认值来自 .env.network；如某个环境不用某项，可以留空字符串。
|
// 4. 这里的默认值来自 .env.network；如某个环境不用某项，可以留空字符串。
|
||||||
// 5. 布尔开关也用字符串形式填写："true" / "false"。
|
// 5. 布尔开关也用字符串形式填写："true" / "false"。
|
||||||
window.__CM_RUNTIME_CONFIG__ = {
|
window.__CM_RUNTIME_CONFIG__ = {
|
||||||
// 品牌图片相对路径会以 runtime-config.js 所在目录为基准解析。
|
|
||||||
// Nginx 以子路径部署时不需要修改前端图片路径。
|
|
||||||
// 打包后可直接替换 dist/brand-assets/ 内的同名 PNG。
|
|
||||||
// 也可以把下方图片地址改为其他 PNG 地址，无需重新打包。
|
|
||||||
// 是否显示整块欢迎页图标区域："true" 显示，"false" 隐藏，默认隐藏。
|
|
||||||
VITE_WELCOME_LOGO_VISIBLE: "false",
|
|
||||||
// 深色主题顶栏 Logo 位置："center" 显示在中间，"left" 显示在左上角，默认中间。
|
|
||||||
VITE_DARK_LOGO_POSITION: "center",
|
|
||||||
// 红白主题的顶栏系统 Logo 图片地址。
|
|
||||||
VITE_BRAND_LOGO_LIGHT_URL: "brand-assets/brand-logo-light.png",
|
|
||||||
// 浅蓝主题的顶栏系统 Logo 图片地址。
|
|
||||||
VITE_BRAND_LOGO_LIGHTBLUE_URL: "brand-assets/brand-logo-lightblue.png",
|
|
||||||
// 绿色主题可单独替换 Logo；默认复用浅色 Logo。
|
|
||||||
VITE_BRAND_LOGO_LIGHTGREEN_URL: "brand-assets/brand-logo-light.png",
|
|
||||||
// 深色主题的顶栏系统 Logo 图片地址。
|
|
||||||
VITE_BRAND_LOGO_DARK_URL: "brand-assets/brand-logo-dark.png",
|
|
||||||
// 红白主题的欢迎页 Logo 图片地址：为空时显示原有 CM 文字和渐变背景。
|
|
||||||
VITE_BRAND_WELCOME_LIGHT_URL: "",
|
|
||||||
// 浅蓝主题的欢迎页 Logo 图片地址：为空时显示原有 CM 文字和渐变背景。
|
|
||||||
VITE_BRAND_WELCOME_LIGHTBLUE_URL: "",
|
|
||||||
VITE_BRAND_WELCOME_LIGHTGREEN_URL: "",
|
|
||||||
// 深色主题的欢迎页 Logo 图片地址：为空时显示原有 CM 文字和渐变背景。
|
|
||||||
VITE_BRAND_WELCOME_DARK_URL: "",
|
|
||||||
|
|
||||||
// DeerFlow Gateway 地址：前端自有后端接口，例如 /api/agents、/api/auth、/api/threads 等。
|
// DeerFlow Gateway 地址：前端自有后端接口，例如 /api/agents、/api/auth、/api/threads 等。
|
||||||
// VITE_BACKEND_BASE_URL: "http://10.19.200.5:2026",
|
// VITE_BACKEND_BASE_URL: "http://10.19.200.5:2026",
|
||||||
|
|
||||||
@@ -40,10 +16,6 @@ window.__CM_RUNTIME_CONFIG__ = {
|
|||||||
// Canvas/AI 写作独立 LangGraph 地址：为空时前端会回退使用 VITE_LANGGRAPH_BASE_URL。
|
// Canvas/AI 写作独立 LangGraph 地址：为空时前端会回退使用 VITE_LANGGRAPH_BASE_URL。
|
||||||
VITE_CANVAS_LANGGRAPH_BASE_URL: "",
|
VITE_CANVAS_LANGGRAPH_BASE_URL: "",
|
||||||
|
|
||||||
// routeKey 短路由的用户名直登口令：例如 #/login/admin?routeKey=a。
|
|
||||||
// 填值时优先使用这里的 password；留空时使用 URL 中的 ?password=。
|
|
||||||
VITE_ROUTE_LOGIN_PASSWORD: "",
|
|
||||||
|
|
||||||
// 轻应用「新建笔记」系列接口地址。
|
// 轻应用「新建笔记」系列接口地址。
|
||||||
VITE_NOTE_API_BASE_URL: "http://47.88.25.99:8000",
|
VITE_NOTE_API_BASE_URL: "http://47.88.25.99:8000",
|
||||||
|
|
||||||
@@ -99,7 +71,7 @@ window.__CM_RUNTIME_CONFIG__ = {
|
|||||||
VITE_AIPI_KNOWES_URL: "http://ch1.b.uat.4.cn/knowes",
|
VITE_AIPI_KNOWES_URL: "http://ch1.b.uat.4.cn/knowes",
|
||||||
|
|
||||||
// MaxKey 鉴权地址：onlineTicket 换 token 使用。
|
// MaxKey 鉴权地址：onlineTicket 换 token 使用。
|
||||||
VITE_AUTH_BASE_URL: "https://auth.y.uat.4.cn",
|
VITE_AUTH_BASE_URL: "https://auth.y.sit.4.cn",
|
||||||
|
|
||||||
// PG 中任务 iframe 地址。
|
// PG 中任务 iframe 地址。
|
||||||
VITE_AIPI_PGLINKTO_URL: "https://pg.b.uat.4.cn",
|
VITE_AIPI_PGLINKTO_URL: "https://pg.b.uat.4.cn",
|
||||||
@@ -113,23 +85,12 @@ window.__CM_RUNTIME_CONFIG__ = {
|
|||||||
// 登录深链任务详情是否使用本地 mock：false=真实接口；true=本地 mock。
|
// 登录深链任务详情是否使用本地 mock：false=真实接口；true=本地 mock。
|
||||||
VITE_MOCK_COP_TASK_DETAIL: "false",
|
VITE_MOCK_COP_TASK_DETAIL: "false",
|
||||||
|
|
||||||
// 岗位会商完整演示数据：true=启动时幂等写入后端；后端不可用时直接使用前端 JSON 兜底。
|
|
||||||
// 默认关闭，避免演示历史记录出现在正常生产账号中。
|
|
||||||
VITE_POSITION_ROUNDTABLE_DEMO_MODE: "false",
|
|
||||||
// 纯前端岗位分析演示：跳过登录，直接进入岗位分析页，并禁止所有后台请求。
|
|
||||||
// 仅用于离线展台/演示环境，生产环境必须保持 false。
|
|
||||||
VITE_POSITION_ROUNDTABLE_STANDALONE_MODE: "false",
|
|
||||||
|
|
||||||
// 大屏绘制 selectSqReport 是否使用本地 mock：不在运行时强制覆盖，
|
// 大屏绘制 selectSqReport 是否使用本地 mock：不在运行时强制覆盖，
|
||||||
// 由各环境的 .env 文件决定（开发环境为 true，生产环境为 false）。
|
// 由各环境的 .env 文件决定（开发环境为 true，生产环境为 false）。
|
||||||
|
|
||||||
// 静态站点模式开关；一般部署业务系统时保持 false。
|
// 静态站点模式开关；一般部署业务系统时保持 false。
|
||||||
VITE_STATIC_WEBSITE_ONLY: "false",
|
VITE_STATIC_WEBSITE_ONLY: "false",
|
||||||
|
|
||||||
// 紧凑导航开关：true 时固定使用简洁布局，工作台左侧栏收起为菜单图标，
|
|
||||||
// 隐藏系统 Logo、换肤按钮以及“全量/简洁模式”切换。修改后刷新页面即可生效。
|
|
||||||
VITE_FORCE_COLLAPSED_SIDEBAR: "false",
|
|
||||||
|
|
||||||
// GitHub OAuth Token；不使用 GitHub 相关能力时留空。
|
// GitHub OAuth Token；不使用 GitHub 相关能力时留空。
|
||||||
VITE_GITHUB_OAUTH_TOKEN: "",
|
VITE_GITHUB_OAUTH_TOKEN: "",
|
||||||
};
|
};
|
||||||
@@ -37,11 +37,6 @@ import PublicRoundtableSharePage from "./pages/PublicRoundtableSharePage";
|
|||||||
import EmbedChatPage from "./pages/EmbedChatPage";
|
import EmbedChatPage from "./pages/EmbedChatPage";
|
||||||
import EmbedRoundtablePage from "./pages/EmbedRoundtablePage";
|
import EmbedRoundtablePage from "./pages/EmbedRoundtablePage";
|
||||||
import DashboardStandalonePage from "@/roundtable-planning/pages/DashboardStandalonePage";
|
import DashboardStandalonePage from "@/roundtable-planning/pages/DashboardStandalonePage";
|
||||||
import PositionRoundtablePage from "@/position-roundtable/pages/PositionRoundtablePage";
|
|
||||||
import {
|
|
||||||
isPositionRoundtableStandaloneMode,
|
|
||||||
POSITION_ROUNDTABLE_ROUTE,
|
|
||||||
} from "@/position-roundtable/demo/position-roundtable-demo-config";
|
|
||||||
import { ChatRuntime } from "./pages/WorkspaceRoutes";
|
import { ChatRuntime } from "./pages/WorkspaceRoutes";
|
||||||
import { NotFoundPage } from "./pages/NotFoundPage";
|
import { NotFoundPage } from "./pages/NotFoundPage";
|
||||||
|
|
||||||
@@ -51,7 +46,6 @@ function AppProviders({ children }: { children: React.ReactNode }) {
|
|||||||
const locale = useMemo(() => detectLocale(), []);
|
const locale = useMemo(() => detectLocale(), []);
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const publicEmbedTheme = usePublicEmbedTheme();
|
const publicEmbedTheme = usePublicEmbedTheme();
|
||||||
const positionStandaloneMode = isPositionRoundtableStandaloneMode();
|
|
||||||
// iframe 嵌入会话（按标签页 sessionStorage）集中在此同步：任何带 `&embed=1` 的入口（深链登录页
|
// iframe 嵌入会话（按标签页 sessionStorage）集中在此同步：任何带 `&embed=1` 的入口（深链登录页
|
||||||
// 或直接深链路由）一进来就启用、`embed=0` 关闭，后续干净路由靠会话维持去 chrome + 强制主题。
|
// 或直接深链路由）一进来就启用、`embed=0` 关闭，后续干净路由靠会话维持去 chrome + 强制主题。
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -60,18 +54,14 @@ function AppProviders({ children }: { children: React.ReactNode }) {
|
|||||||
// 操作日志(Y-Log)：启动早期预热上报配置，使 writeYLog 同步读缓存即可工作
|
// 操作日志(Y-Log)：启动早期预热上报配置，使 writeYLog 同步读缓存即可工作
|
||||||
// （刷新后 module 缓存清空，token 登录用户也能继续上报）。失败静默。
|
// （刷新后 module 缓存清空，token 登录用户也能继续上报）。失败静默。
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (positionStandaloneMode) return;
|
|
||||||
void fetchYLogConfig();
|
void fetchYLogConfig();
|
||||||
}, [positionStandaloneMode]);
|
}, []);
|
||||||
const forcedTheme = useMemo(() => {
|
const forcedTheme = useMemo(() => {
|
||||||
// iframe 嵌入模式（外部系统 `&embed=1`）最高优先：按本标签页的嵌入主题强制明/暗。
|
// iframe 嵌入模式（外部系统 `&embed=1`）最高优先：按本标签页的嵌入主题强制明/暗。
|
||||||
// 走 next-themes forcedTheme（不写 localStorage）→ 同浏览器另开的正常系统页不受影响。
|
// 走 next-themes forcedTheme（不写 localStorage）→ 同浏览器另开的正常系统页不受影响。
|
||||||
const embedTheme = resolveForcedEmbedTheme(location.search);
|
const embedTheme = resolveForcedEmbedTheme(location.search);
|
||||||
if (embedTheme) return embedTheme;
|
if (embedTheme) return embedTheme;
|
||||||
const routeTheme = resolveForcedThemeForPath(
|
const routeTheme = resolveForcedThemeForPath(location.pathname);
|
||||||
location.pathname,
|
|
||||||
location.search,
|
|
||||||
);
|
|
||||||
if (routeTheme) return routeTheme;
|
if (routeTheme) return routeTheme;
|
||||||
if (location.pathname === "/embed/roundtable") {
|
if (location.pathname === "/embed/roundtable") {
|
||||||
const wp = readWujieProps();
|
const wp = readWujieProps();
|
||||||
@@ -96,7 +86,7 @@ function AppProviders({ children }: { children: React.ReactNode }) {
|
|||||||
attribute="class"
|
attribute="class"
|
||||||
storageKey="strategy-theme"
|
storageKey="strategy-theme"
|
||||||
defaultTheme="light"
|
defaultTheme="light"
|
||||||
themes={["light", "dark", "lightblue", "lightgreen", "iceblue", "lightyellow"]}
|
themes={["light", "dark", "lightblue"]}
|
||||||
enableSystem={false}
|
enableSystem={false}
|
||||||
disableTransitionOnChange
|
disableTransitionOnChange
|
||||||
forcedTheme={forcedTheme}
|
forcedTheme={forcedTheme}
|
||||||
@@ -105,8 +95,8 @@ function AppProviders({ children }: { children: React.ReactNode }) {
|
|||||||
<I18nProvider initialLocale={locale}>
|
<I18nProvider initialLocale={locale}>
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
<ChatProvider>
|
<ChatProvider>
|
||||||
{!positionStandaloneMode && <AuthSyncWatcher />}
|
<AuthSyncWatcher />
|
||||||
{!positionStandaloneMode && <DesensitizeWordsLoader />}
|
<DesensitizeWordsLoader />
|
||||||
<FontScaleApplier />
|
<FontScaleApplier />
|
||||||
{children}
|
{children}
|
||||||
</ChatProvider>
|
</ChatProvider>
|
||||||
@@ -124,38 +114,17 @@ function AppProviders({ children }: { children: React.ReactNode }) {
|
|||||||
*/
|
*/
|
||||||
function RootRedirect() {
|
function RootRedirect() {
|
||||||
const { search } = useLocation();
|
const { search } = useLocation();
|
||||||
if (isPositionRoundtableStandaloneMode()) {
|
|
||||||
return <Navigate to={POSITION_ROUNDTABLE_ROUTE} replace />;
|
|
||||||
}
|
|
||||||
return <Navigate to={`/login${search}`} replace />;
|
return <Navigate to={`/login${search}`} replace />;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
const positionStandaloneMode = isPositionRoundtableStandaloneMode();
|
|
||||||
const standaloneLoginRedirect = (
|
|
||||||
<Navigate to={POSITION_ROUNDTABLE_ROUTE} replace />
|
|
||||||
);
|
|
||||||
const pageElement = positionStandaloneMode ? (
|
|
||||||
<ChatRuntime>
|
|
||||||
<PositionRoundtablePage compactChrome />
|
|
||||||
</ChatRuntime>
|
|
||||||
) : (
|
|
||||||
<PageRoutes />
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HashRouter>
|
<HashRouter>
|
||||||
<AppProviders>
|
<AppProviders>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<RootRedirect />} />
|
<Route path="/" element={<RootRedirect />} />
|
||||||
<Route
|
<Route path="/login" element={<LoginPage />} />
|
||||||
path="/login"
|
<Route path="/login/:username" element={<LoginPage />} />
|
||||||
element={positionStandaloneMode ? standaloneLoginRedirect : <LoginPage />}
|
|
||||||
/>
|
|
||||||
<Route
|
|
||||||
path="/login/:username"
|
|
||||||
element={positionStandaloneMode ? standaloneLoginRedirect : <LoginPage />}
|
|
||||||
/>
|
|
||||||
<Route path="/landing" element={<LandingPage />} />
|
<Route path="/landing" element={<LandingPage />} />
|
||||||
<Route path="/share/:shareCode" element={<PublicSharePage />} />
|
<Route path="/share/:shareCode" element={<PublicSharePage />} />
|
||||||
<Route path="/public/leaderboard" element={<PublicLeaderboardPage />} />
|
<Route path="/public/leaderboard" element={<PublicLeaderboardPage />} />
|
||||||
@@ -192,7 +161,7 @@ export function App() {
|
|||||||
path="/roundtable-dashboard"
|
path="/roundtable-dashboard"
|
||||||
element={<DashboardStandalonePage />}
|
element={<DashboardStandalonePage />}
|
||||||
/>
|
/>
|
||||||
<Route path="/page/*" element={pageElement} />
|
<Route path="/page/*" element={<PageRoutes />} />
|
||||||
<Route path="*" element={<NotFoundPage />} />
|
<Route path="*" element={<NotFoundPage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</AppProviders>
|
</AppProviders>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M24.036,10l-.012,9.333" transform="translate(-16.016 -6.667)"/><path class="b" d="M10,24h9.333" transform="translate(-6.667 -16)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 401 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36"><defs><style>.a,.d{fill:#fff;}.a{opacity:0;}.b{fill:#da2331;}.c{fill:#0a54cf;}.e{fill:#1677ff;}.f{fill:#1e2433;}.g{fill:#10d6ff;}.h{fill:#ff8181;}.i{fill:none;stroke:#10d6ff;stroke-linecap:round;stroke-linejoin:round;}.j{filter:url(#d);}.k{filter:url(#a);}</style><filter id="a"><feOffset dx="4" input="SourceAlpha"/><feGaussianBlur stdDeviation="1" result="b"/><feFlood flood-opacity="0.161" result="c"/><feComposite operator="out" in="SourceGraphic" in2="b"/><feComposite operator="in" in="c"/><feComposite operator="in" in2="SourceGraphic"/></filter><filter id="d"><feOffset dx="-4" input="SourceAlpha"/><feGaussianBlur stdDeviation="1" result="e"/><feFlood flood-opacity="0.161" result="f"/><feComposite operator="out" in="SourceGraphic" in2="e"/><feComposite operator="in" in="f"/><feComposite operator="in" in2="SourceGraphic"/></filter></defs><g transform="translate(0 -1)"><rect class="a" width="36" height="36" transform="translate(0 1)"/><path class="b" d="M23.5,14.75a1.5,1.5,0,0,1-1.5-1.5V9.5a1.5,1.5,0,1,1,3,0v3.75A1.5,1.5,0,0,1,23.5,14.75Z" transform="translate(-5.5 -1)"/><g data-type="innerShadowGroup"><path class="c" d="M-2-2H1C3.206-2,5-.532,5,1.273V3.727C5,5.532,3.206,7,1,7H-2Z" transform="translate(28.66 19.541)"/><g class="k" transform="matrix(1, 0, 0, 1, 0, 1)"><path class="d" d="M-2-2H1C3.206-2,5-.532,5,1.273V3.727C5,5.532,3.206,7,1,7H-2Z" transform="translate(28.66 18.54)"/></g></g><g data-type="innerShadowGroup"><path class="c" d="M5-2H2C-.206-2-2-.532-2,1.273V3.727C-2,5.532-.206,7,2,7H5Z" transform="translate(4.34 19.541)"/><g class="j" transform="matrix(1, 0, 0, 1, 0, 1)"><path class="d" d="M5-2H2C-.206-2-2-.532-2,1.273V3.727C-2,5.532-.206,7,2,7H5Z" transform="translate(4.34 18.54)"/></g></g><path class="e" d="M5.5-2H16a7.508,7.508,0,0,1,7.5,7.5V13A7.508,7.508,0,0,1,16,20.5H5.5A7.508,7.508,0,0,1-2,13V5.5A7.508,7.508,0,0,1,5.5-2Z" transform="translate(7.25 13.5)"/><path class="f" d="M5.25,0h9A5.25,5.25,0,0,1,19.5,5.25V7.5a5.25,5.25,0,0,1-5.25,5.25h-9A5.25,5.25,0,0,1,0,7.5V5.25A5.25,5.25,0,0,1,5.25,0Z" transform="translate(8.25 15.25)"/><circle class="g" cx="1.5" cy="1.5" r="1.5" transform="translate(21 19)"/><circle class="g" cx="1.5" cy="1.5" r="1.5" transform="translate(12 19)"/><path class="d" d="M24,10v3.75" transform="translate(-6 -1.5)"/><circle class="h" cx="3" cy="3" r="3" transform="translate(15 4)"/><path class="i" d="M44,28.667a3.367,3.367,0,0,0,1.922.412,2.841,2.841,0,0,0,1.828-.412" transform="translate(-27.875 -5.017)"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><defs><style>.a{fill:#fff;opacity:0;}.b,.c{fill:none;stroke:#006efe;stroke-width:6px;}.b{stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(0 1)"><rect class="a" width="96" height="96" transform="translate(0 -1)"/><path class="b" d="M47,67H38L18,77V67H4V7H84V29" transform="translate(4 8)"/><circle class="c" cx="12" cy="12" r="12" transform="translate(56 45)"/><path class="b" d="M39,32l10,8" transform="translate(39 33)"/><path class="b" d="M12,15H24" transform="translate(12 16)"/><path class="b" d="M12,21H36" transform="translate(12 22)"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 670 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="11" viewBox="0 0 13 11"><defs><style>.a{stroke:rgba(0,0,0,0);stroke-miterlimit:10;fill:url(#a);}</style><linearGradient id="a" x1="0.277" y1="0.03" x2="0.725" y2="1.083" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff"/><stop offset="1" stop-color="#00c7ff"/></linearGradient></defs><path class="a" d="M1,10A1,1,0,1,1,1,8H6a1,1,0,0,1,0,2Zm9.8-.482L7.848,7.361A.445.445,0,0,1,7.661,7a.46.46,0,0,1,.187-.366L10.8,4.481a.45.45,0,0,1,.716.365V9.152a.44.44,0,0,1-.131.317.445.445,0,0,1-.322.136A.454.454,0,0,1,10.8,9.518ZM1,6A1,1,0,1,1,1,4H6A1,1,0,0,1,6,6ZM1,2A1,1,0,1,1,1,0H11a1,1,0,1,1,0,2Z" transform="translate(0.5 0.5)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 753 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="11" viewBox="0 0 13 11"><defs><style>.a{fill:url(#a);}.b{fill:url(#b);}</style><linearGradient id="a" x1="0.023" x2="1" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff" stop-opacity="0.302"/><stop offset="1" stop-color="#00c7ff" stop-opacity="0.302"/></linearGradient><linearGradient id="b" x1="0.023" x2="1" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff"/><stop offset="1" stop-color="#00c7ff"/></linearGradient></defs><path class="a" d="M5.5,0,11,8H0Z" transform="translate(13) rotate(90)"/><path class="b" d="M5.5,0,11,8H0Z" transform="translate(8) rotate(90)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 735 B |
@@ -1,12 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
|
|
||||||
<defs>
|
|
||||||
<style>
|
|
||||||
.hit { fill: rgba(255, 255, 255, 0.8); opacity: 0; }
|
|
||||||
.mark { fill: #fff; }
|
|
||||||
</style>
|
|
||||||
</defs>
|
|
||||||
<g transform="translate(-2434.135 -67.941)">
|
|
||||||
<rect class="hit" width="12" height="12" transform="translate(2434.135 67.941)"/>
|
|
||||||
<path class="mark" d="M.885,0,0,.885,3.692,4.577,4.135,5l.442-.423L8.269.885,7.385,0,4.135,3.25Z" transform="translate(2436 71.942)"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 501 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b,.c{fill:none;stroke:#fff;stroke-linejoin:round;}.b{stroke-linecap:round;}</style></defs><g transform="translate(-1)"><rect class="a" width="16" height="16" transform="translate(1)"/><path class="b" d="M7,42H19" transform="translate(-4 -28)"/><path class="b" d="M0,0H3" transform="translate(9.848 3.848) rotate(45)"/><path class="c" d="M11,12.907v2.427h2.439l6.894-6.9L17.9,6Z" transform="translate(-6.667 -4)"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 545 B |
@@ -1,14 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
|
||||||
<defs>
|
|
||||||
<style>
|
|
||||||
.background { fill: none; }
|
|
||||||
.mark { stroke: rgba(0, 0, 0, 0); stroke-miterlimit: 10; fill: url(#gradient); }
|
|
||||||
</style>
|
|
||||||
<linearGradient id="gradient" x1="0.277" y1="0.03" x2="0.725" y2="1.083" gradientUnits="objectBoundingBox">
|
|
||||||
<stop offset="0" stop-color="#a2e1f9"/>
|
|
||||||
<stop offset="1" stop-color="#45c3f3"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<rect class="background" width="16" height="16"/>
|
|
||||||
<path class="mark" d="M14554.5,10202.5a1,1,0,1,1,0-2h5a1,1,0,0,1,0,2Zm9.8-.482-2.95-2.157a.445.445,0,0,1-.187-.361.46.46,0,0,1,.187-.366l2.95-2.152a.45.45,0,0,1,.716.365v4.307a.44.44,0,0,1-.131.317.445.445,0,0,1-.322.136A.454.454,0,0,1,14564.3,10202.019Zm-9.8-3.521a1,1,0,1,1,0-2h5a1,1,0,1,1,0,2Zm0-4a1,1,0,1,1,0-2h10a1,1,0,1,1,0,2Z" transform="translate(-14551.5 -10189.5)"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 913 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:rgba(255,255,255,0.8);}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M10,1.5A1.5,1.5,0,1,1,11.5,3,1.5,1.5,0,0,1,10,1.5Zm-5,0A1.5,1.5,0,1,1,6.5,3,1.5,1.5,0,0,1,5,1.5Zm-5,0A1.5,1.5,0,1,1,1.5,3,1.5,1.5,0,0,1,0,1.5Z" transform="translate(1.498 6.5)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 410 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:rgba(85,166,254,0.6);}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M12.715,13.421,9.588,10.294a5.841,5.841,0,1,1,.707-.707l3.128,3.128a.5.5,0,0,1-.708.706ZM1,5.833A4.833,4.833,0,1,0,5.834,1,4.838,4.838,0,0,0,1,5.833Z" transform="translate(1.334 1.216)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 418 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M14.488.053.824,4.256a1.167,1.167,0,0,0-.285,2.1L4.576,8.936a1.167,1.167,0,0,0,1.382-.092L11,4.593A.292.292,0,0,1,11.408,5L7.156,10.043a1.167,1.167,0,0,0-.091,1.382l2.58,4.036a1.168,1.168,0,0,0,2.1-.286l4.2-13.663A1.167,1.167,0,0,0,14.488.053Z" transform="translate(0)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 422 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16.131" height="16" viewBox="0 0 16.131 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#97edff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M6,30V34.12H18.361V30" transform="translate(-2.73 -19.994)"/><path class="b" d="M21.181,9.09,18.09,6,15,9.09" transform="translate(-8.64 -4.235)"/><path class="b" d="M23.992,14.241V6" transform="translate(-14.544 -4.235)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 504 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b,.c{fill:none;stroke:#346fb1;stroke-linejoin:round;}.c{stroke-linecap:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M10.667,17.333A6.667,6.667,0,1,0,4,10.667,6.667,6.667,0,0,0,10.667,17.333Z" transform="translate(-2.667 -2.667)"/><path class="c" d="M24.008,12v4l2.826,2.826" transform="translate(-16.005 -8)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 473 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(212,120,0,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 320 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(207,19,34,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 320 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(29,171,123,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 321 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(132,85,230,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 321 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(201,181,0,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 320 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(69,195,243,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 321 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#346fb1;stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(0 -2)"><rect class="a" width="16" height="16" transform="translate(0 2)"/><path class="b" d="M17.333,8H4V18H9l1.667,1.667L12.333,18h5Z" transform="translate(-2.667 -3.667)"/><circle class="b" cx="1.667" cy="1.667" r="1.667" transform="translate(6.333 6.333)"/><path class="b" d="M21,26.667A2.848,2.848,0,0,0,18,24a2.848,2.848,0,0,0-3,2.667" transform="translate(-10 -14.333)"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 618 B |
@@ -8,17 +8,6 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* `?hideHeader=1`: keep the menu rail, but let it occupy the Header's space. */
|
|
||||||
.sidebar-contnet--header-hidden {
|
|
||||||
top: 0;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-contnet--header-hidden .item-nav-content {
|
|
||||||
height: calc(100vh - 20px);
|
|
||||||
min-height: calc(100vh - 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-contents {
|
.sidebar-contents {
|
||||||
width: 98px;
|
width: 98px;
|
||||||
min-height: calc(100% - 20px);
|
min-height: calc(100% - 20px);
|
||||||
@@ -575,59 +564,7 @@
|
|||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ice blue has a deliberately light banner. Keep top-level navigation and
|
|
||||||
its active marker dark enough to remain readable against #9BCEF1. */
|
|
||||||
html.iceblue .light-topnav-item {
|
|
||||||
color: rgba(24, 50, 74, 0.78);
|
|
||||||
}
|
|
||||||
|
|
||||||
html.iceblue .light-topnav-item:hover,
|
|
||||||
html.iceblue .light-topnav-item--active,
|
|
||||||
html.iceblue .light-topnav-item--active:hover {
|
|
||||||
color: #18324a;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.iceblue .light-topnav-item--active::after {
|
|
||||||
background: #3d6e96;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pale yellow has the same light-banner contrast requirement as ice blue. */
|
|
||||||
html.lightyellow .light-topnav-item {
|
|
||||||
color: rgba(48, 61, 35, 0.78);
|
|
||||||
}
|
|
||||||
|
|
||||||
html.lightyellow .light-topnav-item:hover,
|
|
||||||
html.lightyellow .light-topnav-item--active,
|
|
||||||
html.lightyellow .light-topnav-item--active:hover {
|
|
||||||
color: #303d23;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.lightyellow .light-topnav-item--active::after {
|
|
||||||
background: #4c6330;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── 侧边栏：二级图标卡片列（96px）+ 右侧三级列（展开时整体变宽，带过渡）──────── */
|
/* ── 侧边栏：二级图标卡片列（96px）+ 右侧三级列（展开时整体变宽，带过渡）──────── */
|
||||||
/* Runtime themes use their configurable header gradient rather than the
|
|
||||||
red/blue banner artwork. Navigation copy follows an automatically chosen
|
|
||||||
contrasting foreground so both pale and deep brand colours remain legible. */
|
|
||||||
html[data-custom-theme="true"] .light-topnav-item,
|
|
||||||
html[data-custom-theme="true"] .top-submenu-item {
|
|
||||||
color: var(--navigation-foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-custom-theme="true"] .light-topnav-item:hover,
|
|
||||||
html[data-custom-theme="true"] .light-topnav-item--active,
|
|
||||||
html[data-custom-theme="true"] .light-topnav-item--active:hover,
|
|
||||||
html[data-custom-theme="true"] .top-submenu-item:hover,
|
|
||||||
html[data-custom-theme="true"] .top-submenu-item--active {
|
|
||||||
color: var(--navigation-foreground);
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-custom-theme="true"] .light-topnav-item--active::after {
|
|
||||||
background: var(--navigation-foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
.light-sidebar {
|
.light-sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -650,12 +587,6 @@ html[data-custom-theme="true"] .light-topnav-item--active::after {
|
|||||||
width: 236px;
|
width: 236px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* `?hideHeader=1`: preserve the light sidebar while removing only Header. */
|
|
||||||
.light-sidebar--header-hidden {
|
|
||||||
top: 0;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 二级列：固定 96px，竖排图标卡片 + 底部设置 */
|
/* 二级列：固定 96px，竖排图标卡片 + 底部设置 */
|
||||||
.light-sidebar__primary {
|
.light-sidebar__primary {
|
||||||
flex: 0 0 96px;
|
flex: 0 0 96px;
|
||||||
|
|||||||
@@ -17,15 +17,9 @@ type PageSidebarDarkProps = {
|
|||||||
/** 是否收起（true 时只渲染左下角浮动入口，sidebar 主体隐藏） */
|
/** 是否收起（true 时只渲染左下角浮动入口，sidebar 主体隐藏） */
|
||||||
collapsed: boolean;
|
collapsed: boolean;
|
||||||
onToggleCollapsed: () => void;
|
onToggleCollapsed: () => void;
|
||||||
/** 全局 Header 隐藏时，侧边栏从视口顶部开始占满高度。 */
|
|
||||||
headerHidden?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export function PageSidebarDark({
|
export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDarkProps) {
|
||||||
collapsed,
|
|
||||||
onToggleCollapsed,
|
|
||||||
headerHidden = false,
|
|
||||||
}: PageSidebarDarkProps) {
|
|
||||||
const isAdmin = getStoredAuth()?.system_role === "admin";
|
const isAdmin = getStoredAuth()?.system_role === "admin";
|
||||||
const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
|
const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
|
||||||
const inWujieEnv = isWujieEnv();
|
const inWujieEnv = isWujieEnv();
|
||||||
@@ -202,7 +196,7 @@ export function PageSidebarDark({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
// 收起时主侧栏不占宽度，保留左下角入口以便随时恢复。
|
// collapsed 状态：sidebar 主体完全消失（包括占据的宽度），只渲染左下角浮动入口
|
||||||
if (collapsed) {
|
if (collapsed) {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
@@ -213,17 +207,13 @@ export function PageSidebarDark({
|
|||||||
onClick={onToggleCollapsed}
|
onClick={onToggleCollapsed}
|
||||||
>
|
>
|
||||||
<PanelLeftOpen className="sidebar-collapse-btn__icon" aria-hidden="true" />
|
<PanelLeftOpen className="sidebar-collapse-btn__icon" aria-hidden="true" />
|
||||||
<span className="sidebar-collapse-btn__label">展开面板</span>
|
<span className="sidebar-collapse-btn__label">收起面板</span>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside
|
<aside className={`sidebar-contnet ${inWujieEnv ? "" : "sidebar-contnet--top-submenu"}`}>
|
||||||
className={`sidebar-contnet ${inWujieEnv ? "" : "sidebar-contnet--top-submenu"} ${
|
|
||||||
headerHidden ? "sidebar-contnet--header-hidden" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="sidebar-contents">
|
<div className="sidebar-contents">
|
||||||
{sidebarMenuItemsToRender.map((item) => (
|
{sidebarMenuItemsToRender.map((item) => (
|
||||||
<div
|
<div
|
||||||
@@ -254,6 +244,7 @@ export function PageSidebarDark({
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
{/* 底部"收起面板"按钮：独立样式，mt-auto 推到底 */}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
title="收起侧边栏"
|
title="收起侧边栏"
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
|
|||||||
import { useNavigate, useLocation } from "react-router-dom";
|
import { useNavigate, useLocation } from "react-router-dom";
|
||||||
import {
|
import {
|
||||||
Bell,
|
Bell,
|
||||||
Cpu,
|
|
||||||
ChevronLeft,
|
ChevronLeft,
|
||||||
ChevronRight,
|
ChevronRight,
|
||||||
ChevronsUpDown,
|
ChevronsUpDown,
|
||||||
@@ -11,7 +10,6 @@ import {
|
|||||||
Gauge,
|
Gauge,
|
||||||
ListTree,
|
ListTree,
|
||||||
MousePointerClick,
|
MousePointerClick,
|
||||||
BriefcaseBusiness,
|
|
||||||
Settings,
|
Settings,
|
||||||
ShieldAlert,
|
ShieldAlert,
|
||||||
ShieldCheck,
|
ShieldCheck,
|
||||||
@@ -51,8 +49,6 @@ import "@/components/page-sdebar.css";
|
|||||||
type PageSidebarProps = {
|
type PageSidebarProps = {
|
||||||
collapsed: boolean;
|
collapsed: boolean;
|
||||||
onToggleCollapsed: () => void;
|
onToggleCollapsed: () => void;
|
||||||
/** Global Header is hidden but this sidebar remains available. */
|
|
||||||
headerHidden?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type SettingsSection = "account" | "appearance" | "memory" | "tools" | "about";
|
type SettingsSection = "account" | "appearance" | "memory" | "tools" | "about";
|
||||||
@@ -83,28 +79,23 @@ const findFirstRoutePath = (items?: MenuItem[]): string | null => {
|
|||||||
* - wujie 嵌入环境：顶栏被宿主隐藏，一级导航无处安放，故回落到原手风琴整树菜单
|
* - wujie 嵌入环境：顶栏被宿主隐藏，一级导航无处安放，故回落到原手风琴整树菜单
|
||||||
* （保证嵌入模式下所有层级仍可达，零回归）。
|
* （保证嵌入模式下所有层级仍可达，零回归）。
|
||||||
*/
|
*/
|
||||||
export function PageSidebar({
|
export function PageSidebar({ collapsed, onToggleCollapsed }: PageSidebarProps) {
|
||||||
collapsed,
|
|
||||||
onToggleCollapsed,
|
|
||||||
headerHidden = false,
|
|
||||||
}: PageSidebarProps) {
|
|
||||||
if (isWujieEnv()) {
|
if (isWujieEnv()) {
|
||||||
return (
|
return (
|
||||||
<LegacyAccordionSidebar
|
<LegacyAccordionSidebar
|
||||||
collapsed={collapsed}
|
collapsed={collapsed}
|
||||||
onToggleCollapsed={onToggleCollapsed}
|
onToggleCollapsed={onToggleCollapsed}
|
||||||
headerHidden={headerHidden}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return <SecondaryNavSidebar headerHidden={headerHidden} />;
|
return <SecondaryNavSidebar />;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 浅色二级导航侧边栏（图标卡片，红/蓝主题色经 --brand-* 变量自动切换）。
|
* 浅色二级导航侧边栏（图标卡片，红/蓝主题色经 --brand-* 变量自动切换）。
|
||||||
* 浅色模式不支持侧边栏收起，故无收起按钮、不接收 collapsed 相关 props。
|
* 浅色模式不支持侧边栏收起，故无收起按钮、不接收 collapsed 相关 props。
|
||||||
*/
|
*/
|
||||||
function SecondaryNavSidebar({ headerHidden }: { headerHidden: boolean }) {
|
function SecondaryNavSidebar() {
|
||||||
const isAdmin = getStoredAuth()?.system_role === "admin";
|
const isAdmin = getStoredAuth()?.system_role === "admin";
|
||||||
const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
|
const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
@@ -159,11 +150,7 @@ function SecondaryNavSidebar({ headerHidden }: { headerHidden: boolean }) {
|
|||||||
open={notificationOpen}
|
open={notificationOpen}
|
||||||
onOpenChange={setNotificationOpen}
|
onOpenChange={setNotificationOpen}
|
||||||
/>
|
/>
|
||||||
<aside
|
<aside className={`light-sidebar ${expanded ? "light-sidebar--expanded" : ""}`}>
|
||||||
className={`light-sidebar ${expanded ? "light-sidebar--expanded" : ""} ${
|
|
||||||
headerHidden ? "light-sidebar--header-hidden" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{/* 一级列：二级图标卡片 + 底部设置 */}
|
{/* 一级列：二级图标卡片 + 底部设置 */}
|
||||||
<div className="light-sidebar__primary">
|
<div className="light-sidebar__primary">
|
||||||
<nav className="light-sidebar__list" aria-label="二级菜单">
|
<nav className="light-sidebar__list" aria-label="二级菜单">
|
||||||
@@ -237,14 +224,6 @@ function SecondaryNavSidebar({ headerHidden }: { headerHidden: boolean }) {
|
|||||||
按钮管理
|
按钮管理
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
{isAdmin && (
|
|
||||||
<DropdownMenuItem
|
|
||||||
onClick={() => navigate("/page/strategy/admin/position-roles")}
|
|
||||||
>
|
|
||||||
<BriefcaseBusiness className="size-4" />
|
|
||||||
岗位角色配置
|
|
||||||
</DropdownMenuItem>
|
|
||||||
)}
|
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => navigate("/page/strategy/admin/login-whitelist")}
|
onClick={() => navigate("/page/strategy/admin/login-whitelist")}
|
||||||
@@ -253,14 +232,6 @@ function SecondaryNavSidebar({ headerHidden }: { headerHidden: boolean }) {
|
|||||||
白名单管理
|
白名单管理
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
{isAdmin && (
|
|
||||||
<DropdownMenuItem
|
|
||||||
onClick={() => navigate("/page/workspace/admin/models")}
|
|
||||||
>
|
|
||||||
<Cpu className="size-4" />
|
|
||||||
模型配置
|
|
||||||
</DropdownMenuItem>
|
|
||||||
)}
|
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => navigate("/page/strategy/settings/model-concurrency")}
|
onClick={() => navigate("/page/strategy/settings/model-concurrency")}
|
||||||
@@ -316,7 +287,6 @@ function SecondaryNavSidebar({ headerHidden }: { headerHidden: boolean }) {
|
|||||||
function LegacyAccordionSidebar({
|
function LegacyAccordionSidebar({
|
||||||
collapsed,
|
collapsed,
|
||||||
onToggleCollapsed,
|
onToggleCollapsed,
|
||||||
headerHidden,
|
|
||||||
}: PageSidebarProps) {
|
}: PageSidebarProps) {
|
||||||
const { theme } = useTheme();
|
const { theme } = useTheme();
|
||||||
const isDark = theme === "dark";
|
const isDark = theme === "dark";
|
||||||
@@ -468,9 +438,7 @@ function LegacyAccordionSidebar({
|
|||||||
onOpenChange={setNotificationOpen}
|
onOpenChange={setNotificationOpen}
|
||||||
/>
|
/>
|
||||||
<aside
|
<aside
|
||||||
className={`fixed left-0 z-40 flex flex-col overflow-hidden shadow-sm theme-transition transition-all duration-300 ${
|
className={`fixed left-0 top-16 z-40 flex h-[calc(100vh-4rem)] flex-col overflow-hidden shadow-sm theme-transition transition-all duration-300 ${
|
||||||
headerHidden ? "top-0 h-screen" : "top-16 h-[calc(100vh-4rem)]"
|
|
||||||
} ${
|
|
||||||
isDark
|
isDark
|
||||||
? "border-r border-blue-800/30 bg-slate-900"
|
? "border-r border-blue-800/30 bg-slate-900"
|
||||||
: "border-r border-red-100 bg-white"
|
: "border-r border-red-100 bg-white"
|
||||||
@@ -558,18 +526,6 @@ function LegacyAccordionSidebar({
|
|||||||
按钮管理
|
按钮管理
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
{isAdmin && (
|
|
||||||
<DropdownMenuItem onClick={() => navigate("/page/strategy/admin/position-roles")}>
|
|
||||||
<BriefcaseBusiness className="size-4" />
|
|
||||||
岗位角色配置
|
|
||||||
</DropdownMenuItem>
|
|
||||||
)}
|
|
||||||
{isAdmin && (
|
|
||||||
<DropdownMenuItem onClick={() => navigate("/page/workspace/admin/models")}>
|
|
||||||
<Cpu className="size-4" />
|
|
||||||
模型配置
|
|
||||||
</DropdownMenuItem>
|
|
||||||
)}
|
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<DropdownMenuItem onClick={() => navigate("/page/strategy/admin/login-whitelist")}>
|
<DropdownMenuItem onClick={() => navigate("/page/strategy/admin/login-whitelist")}>
|
||||||
<ShieldCheck className="size-4" />
|
<ShieldCheck className="size-4" />
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ const buttonVariants = cva(
|
|||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default:
|
default:
|
||||||
"cursor-pointer bg-primary text-[var(--button-foreground,var(--primary-foreground))] hover:bg-primary/90",
|
"cursor-pointer bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
destructive:
|
destructive:
|
||||||
"cursor-pointer bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
"cursor-pointer bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
outline:
|
outline:
|
||||||
|
|||||||
@@ -71,17 +71,15 @@ const DialogOverlay = React.forwardRef<
|
|||||||
|
|
||||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
const DialogContent = React.forwardRef<
|
const DialogContent = React.forwardRef<
|
||||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
|
||||||
showCloseButton?: boolean;
|
showCloseButton?: boolean;
|
||||||
/** Use when this dialog is opened from a higher-layer surface such as a Drawer. */
|
}
|
||||||
overlayClassName?: string;
|
>(({ className, children, showCloseButton = true, ...props }, ref) => {
|
||||||
}
|
return (
|
||||||
>(({ className, children, showCloseButton = true, overlayClassName, ...props }, ref) => {
|
<DialogPortal data-slot="dialog-portal">
|
||||||
return (
|
<DialogOverlay />
|
||||||
<DialogPortal data-slot="dialog-portal">
|
|
||||||
<DialogOverlay className={overlayClassName} />
|
|
||||||
<DialogPrimitive.Content
|
<DialogPrimitive.Content
|
||||||
ref={ref}
|
ref={ref}
|
||||||
data-slot="dialog-content"
|
data-slot="dialog-content"
|
||||||
|
|||||||
@@ -57,21 +57,18 @@ function useSidebarSafe() {
|
|||||||
return React.useContext(SidebarContext);
|
return React.useContext(SidebarContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarProvider({
|
function SidebarProvider({
|
||||||
defaultOpen = true,
|
defaultOpen = true,
|
||||||
open: openProp,
|
open: openProp,
|
||||||
onOpenChange: setOpenProp,
|
onOpenChange: setOpenProp,
|
||||||
disableToggle = false,
|
className,
|
||||||
className,
|
|
||||||
style,
|
style,
|
||||||
children,
|
children,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<"div"> & {
|
}: React.ComponentProps<"div"> & {
|
||||||
defaultOpen?: boolean;
|
defaultOpen?: boolean;
|
||||||
open?: boolean;
|
open?: boolean;
|
||||||
onOpenChange?: (open: boolean) => void;
|
onOpenChange?: (open: boolean) => void;
|
||||||
/** Keep a controlled deployment-level rail from being reopened by hotkeys. */
|
|
||||||
disableToggle?: boolean;
|
|
||||||
}) {
|
}) {
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
const [openMobile, setOpenMobile] = React.useState(false);
|
const [openMobile, setOpenMobile] = React.useState(false);
|
||||||
@@ -95,11 +92,10 @@ function SidebarProvider({
|
|||||||
[setOpenProp, open],
|
[setOpenProp, open],
|
||||||
);
|
);
|
||||||
|
|
||||||
// Helper to toggle the sidebar.
|
// Helper to toggle the sidebar.
|
||||||
const toggleSidebar = React.useCallback(() => {
|
const toggleSidebar = React.useCallback(() => {
|
||||||
if (disableToggle) return;
|
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
|
||||||
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
|
}, [isMobile, setOpen, setOpenMobile]);
|
||||||
}, [disableToggle, isMobile, setOpen, setOpenMobile]);
|
|
||||||
|
|
||||||
// Adds a keyboard shortcut to toggle the sidebar.
|
// Adds a keyboard shortcut to toggle the sidebar.
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
|
|||||||
@@ -1,189 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { BookOpen, ListTree } from "lucide-react";
|
|
||||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
||||||
|
|
||||||
import { MarkdownContent } from "@/components/workspace/messages/markdown-content";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { reasoningPlugins } from "@/core/streamdown";
|
|
||||||
import { createMarkdownAnchorResolver } from "@/core/utils/markdown";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
import "./wiki.css";
|
|
||||||
|
|
||||||
function stripMarkdownToText(markdown: string): string {
|
|
||||||
return markdown
|
|
||||||
.replace(/```[\s\S]*?```/g, " ")
|
|
||||||
.replace(/~~~[\s\S]*?~~~/g, " ")
|
|
||||||
.replace(/!\[[^\]]*\]\([^)]+\)/g, " ")
|
|
||||||
.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
|
|
||||||
.replace(/^#{1,6}\s+/gm, "")
|
|
||||||
.replace(/^[>\-*+\d.)\s]+/gm, "")
|
|
||||||
.replace(/[`*_~|]/g, "")
|
|
||||||
.replace(/<[^>]+>/g, " ")
|
|
||||||
.replace(/\s+/g, " ")
|
|
||||||
.trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMarkdownExcerpt(markdown: string): string {
|
|
||||||
const text = stripMarkdownToText(markdown);
|
|
||||||
if (!text) return "";
|
|
||||||
return text.length > 150 ? `${text.slice(0, 150)}...` : text;
|
|
||||||
}
|
|
||||||
|
|
||||||
function countReadableWords(markdown: string): number {
|
|
||||||
const text = stripMarkdownToText(markdown);
|
|
||||||
if (!text) return 0;
|
|
||||||
const cjk = text.match(/[\u4e00-\u9fff]/g)?.length ?? 0;
|
|
||||||
const words = text.replace(/[\u4e00-\u9fff]/g, " ").match(/[A-Za-z0-9]+/g)?.length ?? 0;
|
|
||||||
return cjk + words;
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectorForId(id: string): string {
|
|
||||||
const css = window.CSS;
|
|
||||||
if (css?.escape) return `#${css.escape(id)}`;
|
|
||||||
return `[id="${id.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"]`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ReportMarkdownView({
|
|
||||||
content,
|
|
||||||
title,
|
|
||||||
subtitle,
|
|
||||||
badgeLabel = "报告阅读",
|
|
||||||
className,
|
|
||||||
compactHeader = false,
|
|
||||||
}: {
|
|
||||||
content: string;
|
|
||||||
title?: string;
|
|
||||||
subtitle?: string;
|
|
||||||
badgeLabel?: string;
|
|
||||||
className?: string;
|
|
||||||
compactHeader?: boolean;
|
|
||||||
}) {
|
|
||||||
const rootRef = useRef<HTMLDivElement>(null);
|
|
||||||
const anchorResolver = useMemo(() => createMarkdownAnchorResolver(content), [content]);
|
|
||||||
const headings = useMemo(
|
|
||||||
() => anchorResolver.headings.filter((item) => item.level >= 1 && item.level <= 3),
|
|
||||||
[anchorResolver],
|
|
||||||
);
|
|
||||||
const [activeHeadingId, setActiveHeadingId] = useState<string | null>(null);
|
|
||||||
const excerpt = useMemo(() => getMarkdownExcerpt(content), [content]);
|
|
||||||
const sectionCount = headings.length;
|
|
||||||
const wordCount = useMemo(() => countReadableWords(content), [content]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setActiveHeadingId(headings[0]?.id ?? null);
|
|
||||||
}, [headings]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const root = rootRef.current;
|
|
||||||
if (!root || headings.length === 0) return;
|
|
||||||
|
|
||||||
const targets = headings
|
|
||||||
.map((item) => root.querySelector<HTMLElement>(selectorForId(item.id)))
|
|
||||||
.filter((item): item is HTMLElement => !!item);
|
|
||||||
if (targets.length === 0) return;
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
(entries) => {
|
|
||||||
const visible = entries
|
|
||||||
.filter((entry) => entry.isIntersecting)
|
|
||||||
.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
|
|
||||||
if (visible?.target.id) setActiveHeadingId(visible.target.id);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
root: root.closest("[data-radix-scroll-area-viewport]") ?? null,
|
|
||||||
rootMargin: "-96px 0px -65% 0px",
|
|
||||||
threshold: [0, 1],
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
targets.forEach((target) => observer.observe(target));
|
|
||||||
return () => observer.disconnect();
|
|
||||||
}, [headings, content]);
|
|
||||||
|
|
||||||
const scrollToHeading = useCallback((id: string) => {
|
|
||||||
const root = rootRef.current;
|
|
||||||
const target =
|
|
||||||
root?.querySelector<HTMLElement>(selectorForId(id)) ?? document.getElementById(id);
|
|
||||||
setActiveHeadingId(id);
|
|
||||||
target?.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref={rootRef}
|
|
||||||
className={cn("report-markdown-shell grid min-h-0 gap-5 lg:grid-cols-[minmax(0,1fr)_300px]", className)}
|
|
||||||
>
|
|
||||||
<article className="report-markdown-paper min-w-0 overflow-hidden">
|
|
||||||
<header className={cn("report-markdown-header", compactHeader && "report-markdown-header-compact")}>
|
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
|
||||||
<Badge variant="secondary" className="report-markdown-badge">
|
|
||||||
<BookOpen className="size-3.5" />
|
|
||||||
{badgeLabel}
|
|
||||||
</Badge>
|
|
||||||
{subtitle && (
|
|
||||||
<span className="max-w-full truncate text-xs text-slate-500 dark:text-slate-400">
|
|
||||||
{subtitle}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{title && <h1 className="report-markdown-title">{title}</h1>}
|
|
||||||
{!compactHeader && excerpt && <p className="report-markdown-excerpt">{excerpt}</p>}
|
|
||||||
<div className="report-markdown-metrics">
|
|
||||||
<span>{sectionCount || 1} 个章节</span>
|
|
||||||
<span>约 {wordCount} 字</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div className="wiki-markdown report-markdown-body">
|
|
||||||
<MarkdownContent
|
|
||||||
className="max-w-none"
|
|
||||||
content={content}
|
|
||||||
isLoading={false}
|
|
||||||
remarkPlugins={reasoningPlugins.remarkPlugins}
|
|
||||||
rehypePlugins={reasoningPlugins.rehypePlugins}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<aside className="hidden min-w-0 lg:block">
|
|
||||||
<div className="report-markdown-toc">
|
|
||||||
<div className="mb-3 flex items-center justify-between gap-2">
|
|
||||||
<div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-slate-100">
|
|
||||||
<ListTree className="size-4" />
|
|
||||||
内容目录
|
|
||||||
</div>
|
|
||||||
<span className="rounded-md bg-slate-100 px-1.5 py-0.5 text-xs text-slate-500 dark:bg-slate-800 dark:text-slate-400">
|
|
||||||
{sectionCount || 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{headings.length > 0 ? (
|
|
||||||
<nav className="report-markdown-toc-list">
|
|
||||||
{headings.map((item) => (
|
|
||||||
<button
|
|
||||||
key={item.id}
|
|
||||||
type="button"
|
|
||||||
className={cn(
|
|
||||||
"report-markdown-toc-item",
|
|
||||||
activeHeadingId === item.id && "report-markdown-toc-item-active",
|
|
||||||
item.level === 2 && "report-markdown-toc-level-2",
|
|
||||||
item.level === 3 && "report-markdown-toc-level-3",
|
|
||||||
)}
|
|
||||||
title={item.text}
|
|
||||||
onClick={() => scrollToHeading(item.id)}
|
|
||||||
>
|
|
||||||
{item.text}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</nav>
|
|
||||||
) : (
|
|
||||||
<div className="rounded-md border border-dashed p-3 text-xs text-slate-500 dark:border-slate-800 dark:text-slate-400">
|
|
||||||
暂无标题目录
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -8,7 +8,6 @@ import {
|
|||||||
SlidersHorizontal,
|
SlidersHorizontal,
|
||||||
Upload,
|
Upload,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import type { ReactNode } from "react";
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
@@ -19,7 +18,7 @@ function HeaderButton({
|
|||||||
variant = "outline",
|
variant = "outline",
|
||||||
className,
|
className,
|
||||||
}: {
|
}: {
|
||||||
icon: ReactNode;
|
icon: React.ReactNode;
|
||||||
label: string;
|
label: string;
|
||||||
onClick: () => void;
|
onClick: () => void;
|
||||||
variant?: "outline" | "primary";
|
variant?: "outline" | "primary";
|
||||||
@@ -53,7 +52,6 @@ export function WikiHeader({
|
|||||||
onCreate,
|
onCreate,
|
||||||
onManageFolders,
|
onManageFolders,
|
||||||
onManageTemplates,
|
onManageTemplates,
|
||||||
extraActions,
|
|
||||||
}: {
|
}: {
|
||||||
onToggleSidebar: () => void;
|
onToggleSidebar: () => void;
|
||||||
onImportFile: () => void;
|
onImportFile: () => void;
|
||||||
@@ -63,7 +61,6 @@ export function WikiHeader({
|
|||||||
onCreate: () => void;
|
onCreate: () => void;
|
||||||
onManageFolders: () => void;
|
onManageFolders: () => void;
|
||||||
onManageTemplates: () => void;
|
onManageTemplates: () => void;
|
||||||
extraActions?: ReactNode;
|
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<header className="flex h-14 shrink-0 items-center justify-between border-b border-slate-100 bg-white px-4 sm:px-6 dark:border-slate-800 dark:bg-slate-900">
|
<header className="flex h-14 shrink-0 items-center justify-between border-b border-slate-100 bg-white px-4 sm:px-6 dark:border-slate-800 dark:bg-slate-900">
|
||||||
@@ -82,7 +79,6 @@ export function WikiHeader({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{extraActions}
|
|
||||||
<HeaderButton
|
<HeaderButton
|
||||||
icon={<Upload className="size-4" />}
|
icon={<Upload className="size-4" />}
|
||||||
label="导入文件"
|
label="导入文件"
|
||||||
|
|||||||
@@ -111,340 +111,6 @@
|
|||||||
border-color: #eef1f5;
|
border-color: #eef1f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.public-report-markdown {
|
|
||||||
color: #334155;
|
|
||||||
font-feature-settings: "kern";
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown h1 {
|
|
||||||
font-size: 30px;
|
|
||||||
letter-spacing: 0;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown h2 {
|
|
||||||
font-size: 22px;
|
|
||||||
margin-top: 42px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown h3 {
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown p,
|
|
||||||
.public-report-markdown li {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown p {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown ul,
|
|
||||||
.public-report-markdown ol {
|
|
||||||
margin: 14px 0 18px;
|
|
||||||
padding-left: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown ol {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown li {
|
|
||||||
padding-left: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown code {
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #f1f5f9;
|
|
||||||
padding: 2px 6px;
|
|
||||||
color: #be123c;
|
|
||||||
font-size: 0.92em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown pre {
|
|
||||||
margin: 20px 0;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #0f172a;
|
|
||||||
padding: 16px;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown pre code {
|
|
||||||
background: transparent;
|
|
||||||
padding: 0;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown table {
|
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e8ecf1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown th,
|
|
||||||
.public-report-markdown td {
|
|
||||||
min-width: 120px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-report-markdown blockquote {
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .public-report-markdown {
|
|
||||||
color: #cbd5e1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .public-report-markdown code {
|
|
||||||
background: #1e293b;
|
|
||||||
color: #f9a8d4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .public-report-markdown pre {
|
|
||||||
background: #020617;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .public-report-markdown table {
|
|
||||||
border-color: #334155;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-shell {
|
|
||||||
align-items: start;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-paper {
|
|
||||||
border: 1px solid rgba(203, 213, 225, 0.85);
|
|
||||||
border-radius: 8px;
|
|
||||||
background:
|
|
||||||
linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0) 220px),
|
|
||||||
#ffffff;
|
|
||||||
box-shadow:
|
|
||||||
0 1px 2px rgba(15, 23, 42, 0.04),
|
|
||||||
0 18px 44px rgba(15, 23, 42, 0.07);
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-header {
|
|
||||||
border-bottom: 1px solid #e8edf4;
|
|
||||||
padding: 26px 34px 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-header-compact {
|
|
||||||
padding-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-badge {
|
|
||||||
gap: 6px;
|
|
||||||
border: 1px solid #dbe3ef;
|
|
||||||
background: #ffffff;
|
|
||||||
color: #475569;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-title {
|
|
||||||
margin: 14px 0 0;
|
|
||||||
color: #0f172a;
|
|
||||||
font-size: 26px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.35;
|
|
||||||
letter-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-excerpt {
|
|
||||||
margin: 14px 0 0;
|
|
||||||
max-width: 840px;
|
|
||||||
color: #64748b;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-metrics {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 16px;
|
|
||||||
color: #64748b;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-metrics span {
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: rgba(255, 255, 255, 0.78);
|
|
||||||
padding: 4px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-body {
|
|
||||||
max-width: 920px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 32px 42px 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-body h1 {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-body h2 {
|
|
||||||
position: relative;
|
|
||||||
margin-top: 44px;
|
|
||||||
border-bottom-color: #e5edf7;
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-body h2::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: -16px;
|
|
||||||
top: 0.34em;
|
|
||||||
width: 4px;
|
|
||||||
height: 1.05em;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: #2563eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-body h3 {
|
|
||||||
color: #1e293b;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-body p,
|
|
||||||
.report-markdown-body li {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.92;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-body blockquote {
|
|
||||||
border-left-color: #2563eb;
|
|
||||||
background: #f8fbff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-body table {
|
|
||||||
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-toc {
|
|
||||||
position: sticky;
|
|
||||||
top: 16px;
|
|
||||||
max-height: calc(100vh - 32px);
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid rgba(203, 213, 225, 0.82);
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(255, 255, 255, 0.92);
|
|
||||||
padding: 14px;
|
|
||||||
box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-toc-list {
|
|
||||||
max-height: calc(100vh - 128px);
|
|
||||||
overflow: auto;
|
|
||||||
padding-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-toc-item {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
border-left: 2px solid transparent;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 7px 8px;
|
|
||||||
color: #64748b;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.4;
|
|
||||||
text-align: left;
|
|
||||||
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-toc-item:hover {
|
|
||||||
background: #f1f5f9;
|
|
||||||
color: #0f172a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-toc-item-active {
|
|
||||||
border-left-color: #2563eb;
|
|
||||||
background: #eff6ff;
|
|
||||||
color: #1d4ed8;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-toc-level-2 {
|
|
||||||
padding-left: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-markdown-toc-level-3 {
|
|
||||||
padding-left: 30px;
|
|
||||||
color: #94a3b8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .report-markdown-paper {
|
|
||||||
border-color: #1f2937;
|
|
||||||
background:
|
|
||||||
linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0) 220px),
|
|
||||||
#020617;
|
|
||||||
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .report-markdown-header {
|
|
||||||
border-bottom-color: #1e293b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .report-markdown-badge,
|
|
||||||
.dark .report-markdown-metrics span {
|
|
||||||
border-color: #334155;
|
|
||||||
background: #0f172a;
|
|
||||||
color: #cbd5e1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .report-markdown-title {
|
|
||||||
color: #f8fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .report-markdown-excerpt,
|
|
||||||
.dark .report-markdown-metrics {
|
|
||||||
color: #94a3b8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .report-markdown-body h3 {
|
|
||||||
color: #e2e8f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .report-markdown-body h2::before {
|
|
||||||
background: #60a5fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .report-markdown-body blockquote {
|
|
||||||
background: #0f172a;
|
|
||||||
border-left-color: #60a5fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .report-markdown-toc {
|
|
||||||
border-color: #1f2937;
|
|
||||||
background: rgba(2, 6, 23, 0.88);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .report-markdown-toc-item:hover {
|
|
||||||
background: #0f172a;
|
|
||||||
color: #f8fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .report-markdown-toc-item-active {
|
|
||||||
background: rgba(37, 99, 235, 0.16);
|
|
||||||
color: #93c5fd;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Anchor target offset so headings clear the floating "目录" pill. */
|
/* Anchor target offset so headings clear the floating "目录" pill. */
|
||||||
.wiki-markdown h1,
|
.wiki-markdown h1,
|
||||||
.wiki-markdown h2,
|
.wiki-markdown h2,
|
||||||
|
|||||||
@@ -24,60 +24,12 @@ const AGENT_COLORS_DARK = [
|
|||||||
{ from: "#69B1FF", to: "#003EB3" }, // 浅蓝 → 主色按下
|
{ from: "#69B1FF", to: "#003EB3" }, // 浅蓝 → 主色按下
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
/** 按 agent id 稳定散列出一对渐变色，并根据当前主题返回可读的图标前景色。 */
|
/** 按 agent id 稳定散列出一对渐变色（from → to）。`isDark` 切换深蓝/浅色调色板。 */
|
||||||
const AGENT_COLORS_ICEBLUE = [
|
export function agentColor(id: string, isDark: boolean) {
|
||||||
{ from: "#eff8fd", to: "#b7dcf5" },
|
|
||||||
{ from: "#e3f2fb", to: "#9bcef1" },
|
|
||||||
{ from: "#ebf6fb", to: "#add8e9" },
|
|
||||||
{ from: "#edf2fc", to: "#b7cdef" },
|
|
||||||
{ from: "#e9f7f5", to: "#afe0dc" },
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
const AGENT_COLORS_LIGHTYELLOW = [
|
|
||||||
{ from: "#fbfdef", to: "#e4efbf" },
|
|
||||||
{ from: "#f7fae9", to: "#F3FBD9" },
|
|
||||||
{ from: "#f9fbe8", to: "#dcebad" },
|
|
||||||
{ from: "#faf8e9", to: "#e7dfb9" },
|
|
||||||
{ from: "#f1f8e5", to: "#cce0af" },
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
type AgentAvatarTheme =
|
|
||||||
| "dark"
|
|
||||||
| "iceblue"
|
|
||||||
| "lightyellow"
|
|
||||||
| "light"
|
|
||||||
| "lightblue"
|
|
||||||
| "lightgreen"
|
|
||||||
| `custom-theme-${string}`;
|
|
||||||
|
|
||||||
/** Returns a stable avatar gradient and readable icon color for each theme. */
|
|
||||||
export function agentColor(id: string, theme: AgentAvatarTheme) {
|
|
||||||
if (theme.startsWith("custom-theme-")) {
|
|
||||||
return {
|
|
||||||
from: "var(--accent)",
|
|
||||||
to: "var(--brand-200)",
|
|
||||||
foreground: "var(--accent-foreground)",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
let hash = 0;
|
let hash = 0;
|
||||||
for (let i = 0; i < id.length; i++) {
|
for (let i = 0; i < id.length; i++) {
|
||||||
hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
|
hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
|
||||||
}
|
}
|
||||||
const palette =
|
const palette = isDark ? AGENT_COLORS_DARK : AGENT_COLORS_LIGHT;
|
||||||
theme === "dark"
|
return palette[hash % palette.length]!;
|
||||||
? AGENT_COLORS_DARK
|
|
||||||
: theme === "iceblue"
|
|
||||||
? AGENT_COLORS_ICEBLUE
|
|
||||||
: theme === "lightyellow"
|
|
||||||
? AGENT_COLORS_LIGHTYELLOW
|
|
||||||
: AGENT_COLORS_LIGHT;
|
|
||||||
return {
|
|
||||||
...palette[hash % palette.length]!,
|
|
||||||
foreground:
|
|
||||||
theme === "iceblue"
|
|
||||||
? "#2d587a"
|
|
||||||
: theme === "lightyellow"
|
|
||||||
? "#4c6330"
|
|
||||||
: "#ffffff",
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { BotIcon, SparklesIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
type AgentBrandIconProps = {
|
||||||
|
className?: string;
|
||||||
|
size?: "nav" | "sm" | "md" | "lg";
|
||||||
|
};
|
||||||
|
|
||||||
|
const SIZE_STYLES = {
|
||||||
|
nav: {
|
||||||
|
frame: "size-[22px] rounded-md",
|
||||||
|
bot: "size-3.5",
|
||||||
|
badge: "-right-1 -top-1 size-2.5",
|
||||||
|
sparkle: "size-1.5",
|
||||||
|
},
|
||||||
|
sm: {
|
||||||
|
frame: "size-10 rounded-full",
|
||||||
|
bot: "size-[18px]",
|
||||||
|
badge: "-right-1 -top-1 size-3.5",
|
||||||
|
sparkle: "size-2",
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
frame: "size-12 rounded-full",
|
||||||
|
bot: "size-6",
|
||||||
|
badge: "-right-1 -top-1 size-4",
|
||||||
|
sparkle: "size-2.5",
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
frame: "size-16 rounded-full",
|
||||||
|
bot: "size-7",
|
||||||
|
badge: "-right-1 -top-1 size-[18px]",
|
||||||
|
sparkle: "size-3",
|
||||||
|
},
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export function AgentBrandIcon({
|
||||||
|
className,
|
||||||
|
size = "md",
|
||||||
|
}: AgentBrandIconProps) {
|
||||||
|
const styles = SIZE_STYLES[size];
|
||||||
|
const showBadge = size === "nav";
|
||||||
|
|
||||||
|
if (size !== "nav") {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
data-agent-brand-icon={size}
|
||||||
|
className={cn(
|
||||||
|
"relative inline-flex shrink-0 overflow-hidden rounded-full",
|
||||||
|
styles.frame,
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/agent-avatar.png"
|
||||||
|
alt=""
|
||||||
|
className="size-full object-contain"
|
||||||
|
draggable={false}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
data-agent-brand-icon={size}
|
||||||
|
className={cn(
|
||||||
|
"relative inline-flex shrink-0 items-center justify-center border border-blue-100 bg-[radial-gradient(circle_at_35%_30%,#ffffff_0%,#edf4ff_46%,#dce9ff_100%)] text-[#1f5fdb] shadow-[0_8px_22px_rgba(37,99,235,0.13),inset_0_1px_0_rgba(255,255,255,0.9)] dark:border-blue-400/30 dark:bg-blue-500/20 dark:text-blue-300",
|
||||||
|
styles.frame,
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<BotIcon className={styles.bot} strokeWidth={1.9} />
|
||||||
|
{showBadge && (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"absolute flex items-center justify-center rounded-full bg-gradient-to-br from-[#4b91ff] to-[#1858db] text-white shadow-sm ring-2 ring-white dark:ring-slate-950",
|
||||||
|
styles.badge,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<SparklesIcon className={styles.sparkle} strokeWidth={2.4} />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,13 +1,13 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
BotIcon,
|
|
||||||
ClockIcon,
|
ClockIcon,
|
||||||
CopyIcon,
|
CopyIcon,
|
||||||
EyeOffIcon,
|
EyeOffIcon,
|
||||||
GlobeIcon,
|
GlobeIcon,
|
||||||
LockIcon,
|
LockIcon,
|
||||||
MessageSquareIcon,
|
MessageSquareIcon,
|
||||||
|
MoreHorizontalIcon,
|
||||||
PinIcon,
|
PinIcon,
|
||||||
ShieldIcon,
|
ShieldIcon,
|
||||||
SparklesIcon,
|
SparklesIcon,
|
||||||
@@ -28,7 +28,7 @@ import {
|
|||||||
} from "react";
|
} from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
@@ -38,14 +38,21 @@ import {
|
|||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
} from "@/components/ui/card";
|
} from "@/components/ui/card";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
DialogDescription,
|
DialogDescription,
|
||||||
DialogFooter,
|
DialogFooter,
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
@@ -59,7 +66,8 @@ import { Textarea } from "@/components/ui/textarea";
|
|||||||
import { usePublishSquares } from "@/core/system-settings/hooks";
|
import { usePublishSquares } from "@/core/system-settings/hooks";
|
||||||
import { PublishSquarePickerDialog } from "@/components/workspace/publish-square-picker-dialog";
|
import { PublishSquarePickerDialog } from "@/components/workspace/publish-square-picker-dialog";
|
||||||
import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-dialog";
|
import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-dialog";
|
||||||
import { AgentQuestionEditor } from "@/components/workspace/agents/agent-question-editor";
|
import { AgentQuestionEditor } from "@/components/workspace/agents/agent-question-editor";
|
||||||
|
import { AgentBrandIcon } from "@/components/workspace/agents/agent-brand-icon";
|
||||||
import { SkillTransferSelector } from "@/components/workspace/agents/skill-transfer-selector";
|
import { SkillTransferSelector } from "@/components/workspace/agents/skill-transfer-selector";
|
||||||
import { TagChipList } from "@/components/workspace/tags/tag-chip";
|
import { TagChipList } from "@/components/workspace/tags/tag-chip";
|
||||||
import { TagPickerDialog } from "@/components/workspace/tags/tag-picker-dialog";
|
import { TagPickerDialog } from "@/components/workspace/tags/tag-picker-dialog";
|
||||||
@@ -548,10 +556,10 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
内置
|
内置
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
{isOwned && (
|
{isOwned && (
|
||||||
<Badge
|
<Badge
|
||||||
variant="default"
|
variant="default"
|
||||||
className="bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 text-xs"
|
className="border border-emerald-200 bg-emerald-50 text-xs text-emerald-700 hover:bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-300"
|
||||||
>
|
>
|
||||||
我的
|
我的
|
||||||
</Badge>
|
</Badge>
|
||||||
@@ -559,7 +567,7 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
{isFromOthers && (
|
{isFromOthers && (
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="border-blue-500/30 text-blue-700 dark:text-blue-300 text-xs"
|
className="border-blue-200 bg-blue-50/60 text-xs text-blue-700 dark:border-blue-800 dark:bg-blue-500/10 dark:text-blue-300"
|
||||||
title={agent.user_id ? `来自用户 ${agent.user_id}` : "已发布"}
|
title={agent.user_id ? `来自用户 ${agent.user_id}` : "已发布"}
|
||||||
>
|
>
|
||||||
来自他人
|
来自他人
|
||||||
@@ -568,7 +576,7 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
{(isOwned || isAdmin) && !isBuiltin && agent.published && !agent.is_private && (
|
{(isOwned || isAdmin) && !isBuiltin && agent.published && !agent.is_private && (
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="border-sky-500/30 text-sky-700 dark:text-sky-300 text-xs"
|
className="border-sky-200 bg-sky-50/60 text-xs text-sky-700 dark:border-sky-800 dark:bg-sky-500/10 dark:text-sky-300"
|
||||||
title="该智能体已对所有用户可见"
|
title="该智能体已对所有用户可见"
|
||||||
>
|
>
|
||||||
<GlobeIcon className="size-3" />
|
<GlobeIcon className="size-3" />
|
||||||
@@ -663,8 +671,12 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
const skillBadgeItems = [
|
const skillBadgeItems = [
|
||||||
...(agent.tool_groups ?? []).map((group) => ({
|
...(agent.tool_groups ?? []).map((group) => ({
|
||||||
key: `tg:${group}`,
|
key: `tg:${group}`,
|
||||||
node: (
|
node: (
|
||||||
<Badge key={`tg:${group}`} variant="outline" className="text-xs">
|
<Badge
|
||||||
|
key={`tg:${group}`}
|
||||||
|
variant="outline"
|
||||||
|
className="border-0 bg-[#f1f5ff] px-2.5 py-1 text-xs font-normal text-[#2166e8] hover:bg-[#e9f0ff]"
|
||||||
|
>
|
||||||
{desensitize(group)}
|
{desensitize(group)}
|
||||||
</Badge>
|
</Badge>
|
||||||
),
|
),
|
||||||
@@ -674,8 +686,8 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
node: (
|
node: (
|
||||||
<Badge
|
<Badge
|
||||||
key={`sk:${skill}`}
|
key={`sk:${skill}`}
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
className="hover:bg-secondary/70 cursor-pointer text-xs"
|
className="cursor-pointer border-0 bg-[#f1f5ff] px-2.5 py-1 text-xs font-normal text-[#2166e8] hover:bg-[#e9f0ff]"
|
||||||
title={t.settings.skills.viewDetailAction}
|
title={t.settings.skills.viewDetailAction}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@@ -823,80 +835,181 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
const chatButton = (
|
const chatButton = (
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
variant={isList ? "default" : "outline"}
|
||||||
className={cn(isList ? "shrink-0" : "w-full")}
|
size="sm"
|
||||||
onClick={handleChat}
|
className={cn(
|
||||||
|
isList
|
||||||
|
? "shrink-0 rounded-xl bg-[#1f63e9] px-4 font-medium text-white hover:bg-[#1857d4]"
|
||||||
|
: "h-11 w-full rounded-lg border-[#b9d1ff] bg-white font-medium text-[#135ee8] shadow-none hover:border-[#79a8ff] hover:bg-[#f7faff] hover:text-[#135ee8] dark:border-blue-700 dark:bg-slate-900 dark:text-blue-300",
|
||||||
|
)}
|
||||||
|
onClick={handleChat}
|
||||||
>
|
>
|
||||||
<MessageSquareIcon className="mr-1.5 h-3.5 w-3.5" />
|
<MessageSquareIcon className="mr-1.5 h-3.5 w-3.5" />
|
||||||
{t.agents.chat}
|
开始对话
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const cardStatusBadge = agent.is_private ? (
|
||||||
|
<Badge className="border-0 bg-purple-50 px-2.5 py-1 text-xs font-normal text-purple-600 hover:bg-purple-50 dark:bg-purple-500/15 dark:text-purple-300">
|
||||||
|
<span className="mr-1.5 size-1.5 rounded-full bg-purple-500" />
|
||||||
|
私密
|
||||||
|
</Badge>
|
||||||
|
) : agent.published || isBuiltin ? (
|
||||||
|
<Badge className="border-0 bg-blue-50 px-2.5 py-1 text-xs font-normal text-blue-600 hover:bg-blue-50 dark:bg-blue-500/15 dark:text-blue-300">
|
||||||
|
<span className="mr-1.5 size-1.5 rounded-full bg-blue-500" />
|
||||||
|
已发布
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge className="border-0 bg-emerald-50 px-2.5 py-1 text-xs font-normal text-emerald-600 hover:bg-emerald-50 dark:bg-emerald-500/15 dark:text-emerald-300">
|
||||||
|
<span className="mr-1.5 size-1.5 rounded-full bg-emerald-500" />
|
||||||
|
运行中
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
|
||||||
|
const updatedAtText = formatDateTime(agent.updated_at ?? agent.created_at);
|
||||||
|
const cardActionsMenu = (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
size="icon"
|
||||||
|
variant="ghost"
|
||||||
|
className="size-8 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-white"
|
||||||
|
title="更多操作"
|
||||||
|
>
|
||||||
|
<MoreHorizontalIcon className="size-5" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="w-44">
|
||||||
|
{canFavorite && (
|
||||||
|
<DropdownMenuItem onSelect={() => void handleToggleFavorite()}>
|
||||||
|
<StarIcon className={cn("size-4", isFavorite && "fill-current text-amber-500")} />
|
||||||
|
{isFavorite ? "取消收藏" : "收藏到我的"}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
<DropdownMenuItem onSelect={() => void handleTogglePin()}>
|
||||||
|
<PinIcon className={cn("size-4", isPinned && "fill-current text-emerald-600")} />
|
||||||
|
{isPinned ? "取消置顶" : "置顶"}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
{isAdmin && (
|
||||||
|
<DropdownMenuItem onSelect={() => void handleToggleFeatured()}>
|
||||||
|
<SparklesIcon className="size-4" />
|
||||||
|
{agent.featured_order != null ? "取消推荐" : "设为推荐"}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
<DropdownMenuItem onSelect={() => setTagPickerOpen(true)}>
|
||||||
|
<TagsIcon className="size-4" />
|
||||||
|
{t.adminTags.manageTags}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
{isOwned && (
|
||||||
|
<DropdownMenuItem onSelect={() => void handleTogglePublished()}>
|
||||||
|
{agent.published ? <LockIcon className="size-4" /> : <GlobeIcon className="size-4" />}
|
||||||
|
{agent.published ? "取消发布" : "发布"}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{(isOwned || isAdmin) && (
|
||||||
|
<DropdownMenuItem onSelect={() => void handleTogglePrivate()}>
|
||||||
|
<ShieldIcon className="size-4" />
|
||||||
|
{agent.is_private ? "移出私密广场" : "放入私密广场"}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem onSelect={() => void handleDuplicate()}>
|
||||||
|
<CopyIcon className="size-4" />
|
||||||
|
复制智能体
|
||||||
|
</DropdownMenuItem>
|
||||||
|
{canEdit && (
|
||||||
|
<DropdownMenuItem onSelect={() => setEditOpen(true)}>
|
||||||
|
<SquarePenIcon className="size-4" />
|
||||||
|
编辑智能体
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{canDelete && (
|
||||||
|
<>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="text-destructive focus:text-destructive"
|
||||||
|
onSelect={() => setDeleteOpen(true)}
|
||||||
|
>
|
||||||
|
<Trash2Icon className="size-4" />
|
||||||
|
{t.agents.delete}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
|
||||||
const cardLayout = (
|
const cardLayout = (
|
||||||
<Card className="group flex min-w-0 flex-col transition-shadow hover:shadow-md">
|
<Card
|
||||||
<CardHeader className="min-w-0 pb-2">
|
className={cn(
|
||||||
<div className="flex min-w-0 items-start justify-between gap-2">
|
"group flex min-h-[366px] min-w-0 flex-col gap-0 overflow-hidden rounded-2xl border-slate-200/90 bg-white py-0 shadow-[0_5px_18px_rgba(15,23,42,0.035)] transition-[background-color,border-color,box-shadow] duration-200 hover:!border-[#b8d1ff] hover:!bg-[linear-gradient(135deg,rgba(239,246,255,0.92)_0%,rgba(255,255,255,0.98)_48%,#fff_100%)] hover:!ring-1 hover:!ring-[#e2edff] hover:shadow-[0_8px_24px_rgba(37,99,235,0.07)] dark:border-slate-800 dark:bg-slate-900",
|
||||||
<div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
|
agent.featured_order != null && "border-blue-300 ring-1 ring-blue-100 dark:border-blue-700 dark:ring-blue-900/40",
|
||||||
<div className="agent-avatar bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
|
)}
|
||||||
<BotIcon className="h-5 w-5" />
|
>
|
||||||
</div>
|
<CardHeader className="min-w-0 gap-0 px-5 pt-5 pb-2">
|
||||||
<div className="min-w-0 flex-1 overflow-hidden">
|
{agent.featured_order != null ? (
|
||||||
<CardTitle
|
<>
|
||||||
className="block w-full min-w-0 overflow-hidden text-base text-ellipsis whitespace-nowrap"
|
<div className="mb-1 flex h-7 items-center justify-between">
|
||||||
title={desensitize(agent.name)}
|
<Badge className="border border-blue-200 bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-600 hover:bg-blue-50 dark:border-blue-800 dark:bg-blue-500/15 dark:text-blue-300">
|
||||||
>
|
<SparklesIcon className="mr-1 size-3.5 fill-current" />
|
||||||
{desensitize(agent.name)}
|
推荐
|
||||||
</CardTitle>
|
</Badge>
|
||||||
{agent.model && (
|
{cardActionsMenu}
|
||||||
<Badge variant="secondary" className="mt-0.5 text-xs">
|
</div>
|
||||||
{desensitize(agent.model)}
|
<AgentBrandIcon size="lg" />
|
||||||
</Badge>
|
</>
|
||||||
)}
|
) : (
|
||||||
</div>
|
<div className="flex items-start justify-between">
|
||||||
</div>
|
<AgentBrandIcon size="lg" />
|
||||||
<div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
|
{cardActionsMenu}
|
||||||
{statusBadges}
|
</div>
|
||||||
</div>
|
)}
|
||||||
</div>
|
<CardTitle
|
||||||
{agent.description && (
|
className="mt-3 block w-full min-w-0 overflow-hidden text-[18px] leading-6 font-semibold tracking-[-0.015em] text-ellipsis whitespace-nowrap text-slate-950 dark:text-white"
|
||||||
<CardDescription className="mt-2 line-clamp-2 text-sm">
|
title={desensitize(agent.name)}
|
||||||
{desensitize(agent.description)}
|
>
|
||||||
</CardDescription>
|
{desensitize(agent.name)}
|
||||||
)}
|
</CardTitle>
|
||||||
{publisherNode && <div className="mt-2">{publisherNode}</div>}
|
{agent.description && (
|
||||||
{createdAtNode && <div className="mt-1">{createdAtNode}</div>}
|
<CardDescription className="mt-1.5 min-h-11 line-clamp-2 text-[14px] leading-[22px] text-slate-600 dark:text-slate-400">
|
||||||
</CardHeader>
|
{desensitize(agent.description)}
|
||||||
|
</CardDescription>
|
||||||
{(agent.tags?.length ?? 0) > 0 && (
|
)}
|
||||||
<CardContent className="pt-0 pb-2">
|
</CardHeader>
|
||||||
<TagChipList tags={agent.tags!} />
|
|
||||||
|
{(agent.tags?.length ?? 0) > 0 && (
|
||||||
|
<CardContent className="px-5 pt-0 pb-1.5">
|
||||||
|
<TagChipList tags={agent.tags!} />
|
||||||
</CardContent>
|
</CardContent>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{hasSkillsOrTools && (
|
{hasSkillsOrTools && (
|
||||||
<CardContent className="pt-0 pb-2">
|
<CardContent className="px-5 pt-0 pb-2">
|
||||||
<ClampedBadgeRow items={skillBadgeItems} />
|
<ClampedBadgeRow items={skillBadgeItems} />
|
||||||
</CardContent>
|
</CardContent>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<CardFooter className="mt-auto flex flex-col items-stretch gap-2 pt-2">
|
<CardFooter className="mt-auto flex flex-col items-stretch gap-10 px-5 pt-2 pb-4">
|
||||||
{showActionRow && (
|
<div className="flex min-w-0 items-center gap-3">
|
||||||
<div className="flex flex-wrap items-center justify-end gap-1">
|
{cardStatusBadge}
|
||||||
{actionButtons}
|
<span
|
||||||
</div>
|
className="min-w-0 truncate text-xs text-slate-400"
|
||||||
)}
|
title={updatedAtText ? `更新于 ${updatedAtText}` : undefined}
|
||||||
{chatButton}
|
>
|
||||||
</CardFooter>
|
{updatedAtText ? `更新于 ${updatedAtText}` : "最近更新"}
|
||||||
|
{publisherLabel ? ` · 由 ${publisherLabel} 更新` : isBuiltin ? " · 由系统更新" : ""}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{chatButton}
|
||||||
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
|
||||||
const listLayout = (
|
const listLayout = (
|
||||||
<div className="group flex min-w-0 items-center gap-3 rounded-lg border p-2.5 transition-shadow hover:shadow-sm dark:border-[#213D5E] dark:bg-[#02244C]">
|
<div className="group flex min-w-0 items-center gap-4 rounded-2xl border border-slate-200/90 bg-white p-4 shadow-[0_8px_24px_rgba(15,23,42,0.04)] transition-all hover:border-blue-200 hover:shadow-[0_12px_32px_rgba(37,99,235,0.09)] dark:border-slate-800 dark:bg-slate-900">
|
||||||
<div className="agent-avatar bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
|
<AgentBrandIcon className="agent-avatar" size="md" />
|
||||||
<BotIcon className="h-5 w-5" />
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0 flex-1 overflow-hidden">
|
<div className="min-w-0 flex-1 overflow-hidden">
|
||||||
<div className="flex min-w-0 items-center gap-2">
|
<div className="flex min-w-0 items-center gap-2">
|
||||||
<span
|
<span
|
||||||
|
|||||||
@@ -254,7 +254,7 @@ export function AgentChatSidebar({ activeAgentId }: { activeAgentId?: string })
|
|||||||
{agents.map((agent) => {
|
{agents.map((agent) => {
|
||||||
const href = `${routeBase}/agents/${agent.id}/chats/new`;
|
const href = `${routeBase}/agents/${agent.id}/chats/new`;
|
||||||
const isActive = agent.id === activeAgentId;
|
const isActive = agent.id === activeAgentId;
|
||||||
const { from, to, foreground } = agentColor(agent.id, theme);
|
const { from, to } = agentColor(agent.id, isDark);
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
key={agent.id}
|
key={agent.id}
|
||||||
@@ -279,7 +279,6 @@ export function AgentChatSidebar({ activeAgentId }: { activeAgentId?: string })
|
|||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `linear-gradient(135deg, ${from}, ${to})`,
|
backgroundImage: `linear-gradient(135deg, ${from}, ${to})`,
|
||||||
color: foreground,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Bot className="size-[19px]" />
|
<Bot className="size-[19px]" />
|
||||||
|
|||||||
@@ -1,9 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
BotIcon,
|
|
||||||
CheckIcon,
|
CheckIcon,
|
||||||
DatabaseIcon,
|
|
||||||
GlobeIcon,
|
GlobeIcon,
|
||||||
InfoIcon,
|
InfoIcon,
|
||||||
Loader2Icon,
|
Loader2Icon,
|
||||||
@@ -44,7 +42,7 @@ import {
|
|||||||
import { Switch } from "@/components/ui/switch";
|
import { Switch } from "@/components/ui/switch";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
import { AgentQuestionEditor } from "@/components/workspace/agents/agent-question-editor";
|
import { AgentQuestionEditor } from "@/components/workspace/agents/agent-question-editor";
|
||||||
import { LlmWikiKnowledgeSelector } from "@/components/workspace/llmwiki-knowledge-selector";
|
import { AgentBrandIcon } from "@/components/workspace/agents/agent-brand-icon";
|
||||||
import { AgentRecentChats } from "@/components/workspace/agents/agent-recent-chats";
|
import { AgentRecentChats } from "@/components/workspace/agents/agent-recent-chats";
|
||||||
import { useArtifactsOptional } from "@/components/workspace/artifacts";
|
import { useArtifactsOptional } from "@/components/workspace/artifacts";
|
||||||
import { EnabledSkillList } from "@/components/workspace/agents/enabled-skill-list";
|
import { EnabledSkillList } from "@/components/workspace/agents/enabled-skill-list";
|
||||||
@@ -82,7 +80,6 @@ interface AgentDraft {
|
|||||||
templateName: string;
|
templateName: string;
|
||||||
/** 会商席位「技能识别强化」开关。 */
|
/** 会商席位「技能识别强化」开关。 */
|
||||||
seatSkillDirective: boolean;
|
seatSkillDirective: boolean;
|
||||||
knowledgeBaseIds: string[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function draftFromAgent(agent: Agent): AgentDraft {
|
function draftFromAgent(agent: Agent): AgentDraft {
|
||||||
@@ -96,7 +93,6 @@ function draftFromAgent(agent: Agent): AgentDraft {
|
|||||||
featured: agent.featured_order != null,
|
featured: agent.featured_order != null,
|
||||||
templateName: agent.template_name ?? "",
|
templateName: agent.template_name ?? "",
|
||||||
seatSkillDirective: agent.seat_skill_directive ?? false,
|
seatSkillDirective: agent.seat_skill_directive ?? false,
|
||||||
knowledgeBaseIds: agent.llmwiki_knowledge_base_ids ?? [],
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -104,17 +100,15 @@ function Section({
|
|||||||
icon,
|
icon,
|
||||||
title,
|
title,
|
||||||
extra,
|
extra,
|
||||||
className,
|
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
icon?: ReactNode;
|
icon?: ReactNode;
|
||||||
title: string;
|
title: string;
|
||||||
extra?: ReactNode;
|
extra?: ReactNode;
|
||||||
className?: string;
|
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<section className={cn("bg-card/60 rounded-xl border p-4", className)}>
|
<section className="bg-card/60 rounded-xl border p-4">
|
||||||
<div className="mb-3 flex items-center justify-between gap-2">
|
<div className="mb-3 flex items-center justify-between gap-2">
|
||||||
<h4 className="text-foreground flex items-center gap-1.5 text-sm font-semibold">
|
<h4 className="text-foreground flex items-center gap-1.5 text-sm font-semibold">
|
||||||
{icon}
|
{icon}
|
||||||
@@ -145,15 +139,6 @@ export function AgentDetailPanel({
|
|||||||
defaultCollapsed,
|
defaultCollapsed,
|
||||||
showRecentChats,
|
showRecentChats,
|
||||||
compactAppearanceActions,
|
compactAppearanceActions,
|
||||||
avatarSrc,
|
|
||||||
positionName,
|
|
||||||
skillsIcon,
|
|
||||||
skillsTitle,
|
|
||||||
showCommonQuestions = false,
|
|
||||||
panelTitle,
|
|
||||||
embedded,
|
|
||||||
hideStatusBadges = false,
|
|
||||||
editIcon,
|
|
||||||
}: {
|
}: {
|
||||||
agent: Agent | null | undefined;
|
agent: Agent | null | undefined;
|
||||||
agentName: string;
|
agentName: string;
|
||||||
@@ -165,19 +150,6 @@ export function AgentDetailPanel({
|
|||||||
showRecentChats?: boolean;
|
showRecentChats?: boolean;
|
||||||
/** 简洁模式下挂在右上角收起/展开按钮左侧的外观控件。 */
|
/** 简洁模式下挂在右上角收起/展开按钮左侧的外观控件。 */
|
||||||
compactAppearanceActions?: ReactNode;
|
compactAppearanceActions?: ReactNode;
|
||||||
avatarSrc?: string;
|
|
||||||
positionName?: string;
|
|
||||||
skillsIcon?: ReactNode;
|
|
||||||
skillsTitle?: string;
|
|
||||||
showCommonQuestions?: boolean;
|
|
||||||
/** Overrides the standard panel heading for an embedded consumer. */
|
|
||||||
panelTitle?: string;
|
|
||||||
/** Renders one fixed panel instead of the responsive collapsible rail. */
|
|
||||||
embedded?: boolean;
|
|
||||||
/** Keeps deployment/status badges out of an embedded product surface. */
|
|
||||||
hideStatusBadges?: boolean;
|
|
||||||
/** Optional icon used by the compact embedded edit action. */
|
|
||||||
editIcon?: ReactNode;
|
|
||||||
}) {
|
}) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [collapsed, setCollapsed] = useState(defaultCollapsed ?? false);
|
const [collapsed, setCollapsed] = useState(defaultCollapsed ?? false);
|
||||||
@@ -338,11 +310,6 @@ export function AgentDetailPanel({
|
|||||||
request.template_name = draft.templateName.trim();
|
request.template_name = draft.templateName.trim();
|
||||||
if (draft.seatSkillDirective !== (agent.seat_skill_directive ?? false))
|
if (draft.seatSkillDirective !== (agent.seat_skill_directive ?? false))
|
||||||
request.seat_skill_directive = draft.seatSkillDirective;
|
request.seat_skill_directive = draft.seatSkillDirective;
|
||||||
if (
|
|
||||||
JSON.stringify(draft.knowledgeBaseIds) !==
|
|
||||||
JSON.stringify(agent.llmwiki_knowledge_base_ids ?? [])
|
|
||||||
)
|
|
||||||
request.llmwiki_knowledge_base_ids = draft.knowledgeBaseIds;
|
|
||||||
if (nextPublished !== agent.published) request.published = nextPublished;
|
if (nextPublished !== agent.published) request.published = nextPublished;
|
||||||
if (JSON.stringify(draft.skills) !== JSON.stringify(agent.skills ?? []))
|
if (JSON.stringify(draft.skills) !== JSON.stringify(agent.skills ?? []))
|
||||||
request.skills = draft.skills;
|
request.skills = draft.skills;
|
||||||
@@ -505,25 +472,11 @@ export function AgentDetailPanel({
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
{embedded ? (
|
<Button size="sm" variant="outline" onClick={beginEdit}>
|
||||||
<Tooltip content="编辑智能体">
|
<SquarePenIcon className="size-3.5" />
|
||||||
<Button
|
编辑
|
||||||
type="button"
|
</Button>
|
||||||
size="icon-sm"
|
{canTogglePublish && (
|
||||||
variant="ghost"
|
|
||||||
onClick={beginEdit}
|
|
||||||
aria-label="编辑智能体"
|
|
||||||
>
|
|
||||||
{editIcon ?? <SquarePenIcon className="size-3.5" />}
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
<Button size="sm" variant="outline" onClick={beginEdit}>
|
|
||||||
<SquarePenIcon className="size-3.5" />
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{!embedded && canTogglePublish && (
|
|
||||||
<Tooltip content={agent?.published ? "下架" : "发布"}>
|
<Tooltip content={agent?.published ? "下架" : "发布"}>
|
||||||
<Button
|
<Button
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
@@ -540,19 +493,17 @@ export function AgentDetailPanel({
|
|||||||
</Button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
{!embedded && (
|
<Tooltip content="删除智能体">
|
||||||
<Tooltip content="删除智能体">
|
<Button
|
||||||
<Button
|
size="icon-sm"
|
||||||
size="icon-sm"
|
variant="ghost"
|
||||||
variant="ghost"
|
className="text-destructive hover:text-destructive"
|
||||||
className="text-destructive hover:text-destructive"
|
onClick={() => setDeleteOpen(true)}
|
||||||
onClick={() => setDeleteOpen(true)}
|
aria-label="删除智能体"
|
||||||
aria-label="删除智能体"
|
>
|
||||||
>
|
<Trash2Icon className="size-3.5" />
|
||||||
<Trash2Icon className="size-3.5" />
|
</Button>
|
||||||
</Button>
|
</Tooltip>
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
) : null;
|
) : null;
|
||||||
@@ -569,13 +520,7 @@ export function AgentDetailPanel({
|
|||||||
{/* ── Identity / 基础信息 ─────────────────────────────────────────── */}
|
{/* ── Identity / 基础信息 ─────────────────────────────────────────── */}
|
||||||
<section className="bg-card/60 rounded-xl border p-4">
|
<section className="bg-card/60 rounded-xl border p-4">
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<div className="agent-avatar bg-primary/10 ring-primary/15 flex size-12 shrink-0 items-center justify-center rounded-2xl ring-1">
|
<AgentBrandIcon className="agent-avatar" size="lg" />
|
||||||
{avatarSrc ? (
|
|
||||||
<img src={avatarSrc} alt="" aria-hidden="true" className="size-9" />
|
|
||||||
) : (
|
|
||||||
<BotIcon className="text-primary size-6" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0 flex-1 space-y-1.5">
|
<div className="min-w-0 flex-1 space-y-1.5">
|
||||||
{editing && draft ? (
|
{editing && draft ? (
|
||||||
<Input
|
<Input
|
||||||
@@ -594,16 +539,9 @@ export function AgentDetailPanel({
|
|||||||
{displayName}
|
{displayName}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{!editing && positionName && (
|
<div className="flex flex-wrap items-center gap-1">
|
||||||
<div className="position-agent-role text-sm">
|
{statusBadges}
|
||||||
岗位：{desensitize(positionName)}
|
</div>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!hideStatusBadges && (
|
|
||||||
<div className="flex flex-wrap items-center gap-1">
|
|
||||||
{statusBadges}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!editing && agent.owner_username && !agent.builtin && (
|
{!editing && agent.owner_username && !agent.builtin && (
|
||||||
<div className="text-muted-foreground flex items-center gap-1 text-xs">
|
<div className="text-muted-foreground flex items-center gap-1 text-xs">
|
||||||
<UserRoundIcon className="size-3 shrink-0" />
|
<UserRoundIcon className="size-3 shrink-0" />
|
||||||
@@ -639,13 +577,6 @@ export function AgentDetailPanel({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!editing && (agent.llmwiki_knowledge_base_ids?.length ?? 0) > 0 && (
|
|
||||||
<div className="text-muted-foreground mt-2 flex items-center gap-1 text-xs">
|
|
||||||
<DatabaseIcon className="size-3 shrink-0" />
|
|
||||||
LLMWiki 知识库：{agent.llmwiki_knowledge_base_ids?.length ?? 0} 个
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Publish / featured toggles — only meaningful in edit mode. */}
|
{/* Publish / featured toggles — only meaningful in edit mode. */}
|
||||||
{editing && draft && (
|
{editing && draft && (
|
||||||
<div className="mt-3 space-y-2">
|
<div className="mt-3 space-y-2">
|
||||||
@@ -663,14 +594,6 @@ export function AgentDetailPanel({
|
|||||||
配置后，对话生成的 Markdown 文件可一键发布到知识入库接口。
|
配置后，对话生成的 Markdown 文件可一键发布到知识入库接口。
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<LlmWikiKnowledgeSelector
|
|
||||||
source="all"
|
|
||||||
value={draft.knowledgeBaseIds}
|
|
||||||
onChange={(knowledgeBaseIds) =>
|
|
||||||
setDraft({ ...draft, knowledgeBaseIds })
|
|
||||||
}
|
|
||||||
variant="panel"
|
|
||||||
/>
|
|
||||||
<div className="bg-background/60 flex items-center justify-between rounded-lg border px-3 py-2">
|
<div className="bg-background/60 flex items-center justify-between rounded-lg border px-3 py-2">
|
||||||
<div className="pr-3">
|
<div className="pr-3">
|
||||||
<p className="text-sm font-medium">会商技能识别强化</p>
|
<p className="text-sm font-medium">会商技能识别强化</p>
|
||||||
@@ -721,7 +644,7 @@ export function AgentDetailPanel({
|
|||||||
|
|
||||||
|
|
||||||
{/* ── 常用问题 ───────────────────────────────────────────────────── */}
|
{/* ── 常用问题 ───────────────────────────────────────────────────── */}
|
||||||
{(showCommonQuestions || editing || questions.length > 0 || canEdit) && (
|
{(editing || questions.length > 0 || canEdit) && (
|
||||||
<Section
|
<Section
|
||||||
icon={<MessageCircleQuestionIcon className="size-3.5" />}
|
icon={<MessageCircleQuestionIcon className="size-3.5" />}
|
||||||
title="常用问题"
|
title="常用问题"
|
||||||
@@ -862,9 +785,8 @@ export function AgentDetailPanel({
|
|||||||
|
|
||||||
{/* ── 技能管理 ───────────────────────────────────────────────────── */}
|
{/* ── 技能管理 ───────────────────────────────────────────────────── */}
|
||||||
<Section
|
<Section
|
||||||
icon={skillsIcon ?? <SparklesIcon className="size-3.5" />}
|
icon={<SparklesIcon className="size-3.5" />}
|
||||||
title={skillsTitle ?? `已启用技能 ${skillNamesShown.length} 个`}
|
title={`已启用技能 ${skillNamesShown.length} 个`}
|
||||||
className="position-roundtable-skills-section"
|
|
||||||
extra={
|
extra={
|
||||||
editing ? (
|
editing ? (
|
||||||
<Button
|
<Button
|
||||||
@@ -906,9 +828,7 @@ export function AgentDetailPanel({
|
|||||||
const panelChrome = (collapseButton: ReactNode) => (
|
const panelChrome = (collapseButton: ReactNode) => (
|
||||||
<>
|
<>
|
||||||
<div className="flex h-12 shrink-0 items-center justify-between border-b px-4">
|
<div className="flex h-12 shrink-0 items-center justify-between border-b px-4">
|
||||||
<span className="shrink-0 whitespace-nowrap text-sm font-semibold">
|
<span className="shrink-0 whitespace-nowrap text-sm font-semibold">智能体信息</span>
|
||||||
{panelTitle ?? "智能体信息"}
|
|
||||||
</span>
|
|
||||||
<div className="flex min-w-0 items-center gap-1">
|
<div className="flex min-w-0 items-center gap-1">
|
||||||
{headerActions}
|
{headerActions}
|
||||||
{compactAppearanceActions}
|
{compactAppearanceActions}
|
||||||
@@ -922,11 +842,7 @@ export function AgentDetailPanel({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* ── Desktop (lg+): inline aside, collapsible to a rail ───────────── */}
|
{/* ── Desktop (lg+): inline aside, collapsible to a rail ───────────── */}
|
||||||
{embedded ? (
|
{collapsed ? (
|
||||||
<aside className="bg-card/40 flex h-full w-full min-w-0 shrink-0 flex-col border-l">
|
|
||||||
{panelChrome(null)}
|
|
||||||
</aside>
|
|
||||||
) : collapsed ? (
|
|
||||||
<div className="hidden shrink-0 items-start border-l px-2 pt-3 lg:flex">
|
<div className="hidden shrink-0 items-start border-l px-2 pt-3 lg:flex">
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
{compactAppearanceActions}
|
{compactAppearanceActions}
|
||||||
@@ -959,34 +875,30 @@ export function AgentDetailPanel({
|
|||||||
</aside>
|
</aside>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!embedded && (
|
{/* ── Narrow screens (<lg): rail trigger + drawer with the same body ── */}
|
||||||
<>
|
<div className="flex shrink-0 flex-col items-center border-l pt-3 lg:hidden">
|
||||||
{/* ── Narrow screens (<lg): rail trigger + drawer with the same body ── */}
|
<Tooltip content="智能体信息">
|
||||||
<div className="flex shrink-0 flex-col items-center border-l pt-3 lg:hidden">
|
<Button
|
||||||
<Tooltip content="智能体信息">
|
variant="ghost"
|
||||||
<Button
|
size="icon-sm"
|
||||||
variant="ghost"
|
onClick={() => setMobileOpen(true)}
|
||||||
size="icon-sm"
|
aria-label="打开智能体信息"
|
||||||
onClick={() => setMobileOpen(true)}
|
>
|
||||||
aria-label="打开智能体信息"
|
<InfoIcon className="size-4" />
|
||||||
>
|
</Button>
|
||||||
<InfoIcon className="size-4" />
|
</Tooltip>
|
||||||
</Button>
|
</div>
|
||||||
</Tooltip>
|
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
||||||
</div>
|
<SheetContent side="right" className="flex w-full flex-col gap-0 p-0 sm:max-w-md">
|
||||||
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
<SheetHeader className="border-b px-4 pb-3 pt-4">
|
||||||
<SheetContent side="right" className="flex w-full flex-col gap-0 p-0 sm:max-w-md">
|
<SheetTitle className="flex items-center justify-between text-sm">
|
||||||
<SheetHeader className="border-b px-4 pb-3 pt-4">
|
智能体信息
|
||||||
<SheetTitle className="flex items-center justify-between text-sm">
|
<span className="mr-6">{headerActions}</span>
|
||||||
智能体信息
|
</SheetTitle>
|
||||||
<span className="mr-6">{headerActions}</span>
|
</SheetHeader>
|
||||||
</SheetTitle>
|
<div className="min-h-0 flex-1 overflow-y-auto">{body}</div>
|
||||||
</SheetHeader>
|
</SheetContent>
|
||||||
<div className="min-h-0 flex-1 overflow-y-auto">{body}</div>
|
</Sheet>
|
||||||
</SheetContent>
|
|
||||||
</Sheet>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ── Secondary surfaces ───────────────────────────────────────────── */}
|
{/* ── Secondary surfaces ───────────────────────────────────────────── */}
|
||||||
<SkillPickerSheet
|
<SkillPickerSheet
|
||||||
|
|||||||
@@ -1,6 +1,15 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ArrowDownUpIcon, BotIcon, Loader2, LockIcon, PlusIcon, ShieldIcon, XIcon } from "lucide-react";
|
import {
|
||||||
|
ArrowDownUpIcon,
|
||||||
|
BotIcon,
|
||||||
|
Loader2,
|
||||||
|
LockIcon,
|
||||||
|
PlusIcon,
|
||||||
|
SearchIcon,
|
||||||
|
ShieldIcon,
|
||||||
|
XIcon,
|
||||||
|
} from "lucide-react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
@@ -10,17 +19,17 @@ import { Input } from "@/components/ui/input";
|
|||||||
import { Pagination } from "@/components/ui/pagination";
|
import { Pagination } from "@/components/ui/pagination";
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
|
import { AgentBrandIcon } from "@/components/workspace/agents/agent-brand-icon";
|
||||||
import { ViewModeToggle } from "@/components/workspace/view-mode-toggle";
|
|
||||||
import { getStoredAuth } from "@/core/auth";
|
import { getStoredAuth } from "@/core/auth";
|
||||||
import { useAgentsPaginated, usePrivateAgentsPaginated } from "@/core/agents";
|
import { useAgentsPaginated, usePrivateAgentsPaginated } from "@/core/agents";
|
||||||
import type { Agent, AgentSort } from "@/core/agents";
|
import type { Agent, AgentSort } from "@/core/agents";
|
||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
import { usePrivateSquareStatus, usePublishSquares, useViewMode } from "@/core/system-settings/hooks";
|
import { usePrivateSquareStatus, usePublishSquares } from "@/core/system-settings/hooks";
|
||||||
|
|
||||||
import { AgentCard } from "./agent-card";
|
import { AgentCard } from "./agent-card";
|
||||||
|
|
||||||
const PAGE_SIZE = 12;
|
const PAGE_SIZE = 12;
|
||||||
|
type AgentStatusFilter = "all" | "published" | "draft" | "private" | "builtin";
|
||||||
|
|
||||||
// Within a single tab the verified password is kept in sessionStorage so a
|
// Within a single tab the verified password is kept in sessionStorage so a
|
||||||
// refresh / route navigation does not re-prompt. Cleared on tab close, so the
|
// refresh / route navigation does not re-prompt. Cleared on tab close, so the
|
||||||
@@ -32,11 +41,10 @@ export function AgentGallery() {
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
// 「内置智能体」筛选仅管理员可见（后端 scope=builtin 也做了 admin 闸门兜底）。
|
// 「内置智能体」筛选仅管理员可见（后端 scope=builtin 也做了 admin 闸门兜底）。
|
||||||
const isAdmin = getStoredAuth()?.system_role === "admin";
|
const isAdmin = getStoredAuth()?.system_role === "admin";
|
||||||
const [viewMode, setViewMode] = useViewMode("agent");
|
|
||||||
const [activeTab, setActiveTab] = useState<string>("mine");
|
const [activeTab, setActiveTab] = useState<string>("mine");
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
const [tagIds, setTagIds] = useState<string[]>([]);
|
|
||||||
const [sort, setSort] = useState<AgentSort>("time_desc");
|
const [sort, setSort] = useState<AgentSort>("time_desc");
|
||||||
|
const [statusFilter, setStatusFilter] = useState<AgentStatusFilter>("all");
|
||||||
const { data: publishSquares } = usePublishSquares();
|
const { data: publishSquares } = usePublishSquares();
|
||||||
// Each configured publish square (发布广场) becomes its own browse tab; the
|
// Each configured publish square (发布广场) becomes its own browse tab; the
|
||||||
// backend always returns at least one (the built-in default).
|
// backend always returns at least one (the built-in default).
|
||||||
@@ -53,10 +61,9 @@ export function AgentGallery() {
|
|||||||
// frontend's desensitize map, so typing the displayed abbreviation (e.g.
|
// frontend's desensitize map, so typing the displayed abbreviation (e.g.
|
||||||
// "TS") still matches the stored raw name (e.g. "态势分析"). Whenever the
|
// "TS") still matches the stored raw name (e.g. "态势分析"). Whenever the
|
||||||
// filters change, every tab returns to its first page.
|
// filters change, every tab returns to its first page.
|
||||||
const tagKey = tagIds.join(",");
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setPages({});
|
setPages({});
|
||||||
}, [search, tagKey, sort, publisher?.id]);
|
}, [search, sort, publisher?.id, statusFilter]);
|
||||||
|
|
||||||
// If the active square tab disappears (admin removed that square), fall back
|
// If the active square tab disappears (admin removed that square), fall back
|
||||||
// to "我的" so the gallery never points at a dead tab.
|
// to "我的" so the gallery never points at a dead tab.
|
||||||
@@ -108,7 +115,6 @@ export function AgentGallery() {
|
|||||||
} = useAgentsPaginated({
|
} = useAgentsPaginated({
|
||||||
scope: mainScope,
|
scope: mainScope,
|
||||||
search,
|
search,
|
||||||
tagIds,
|
|
||||||
sort,
|
sort,
|
||||||
page: mainPage,
|
page: mainPage,
|
||||||
pageSize: PAGE_SIZE,
|
pageSize: PAGE_SIZE,
|
||||||
@@ -126,7 +132,6 @@ export function AgentGallery() {
|
|||||||
error: privateError,
|
error: privateError,
|
||||||
} = usePrivateAgentsPaginated(privatePassword, {
|
} = usePrivateAgentsPaginated(privatePassword, {
|
||||||
search,
|
search,
|
||||||
tagIds,
|
|
||||||
sort,
|
sort,
|
||||||
page: pages.private ?? 1,
|
page: pages.private ?? 1,
|
||||||
pageSize: PAGE_SIZE,
|
pageSize: PAGE_SIZE,
|
||||||
@@ -177,21 +182,22 @@ export function AgentGallery() {
|
|||||||
const handlePublisherClick = (p: { id: string; label: string }) =>
|
const handlePublisherClick = (p: { id: string; label: string }) =>
|
||||||
setPublisher(p);
|
setPublisher(p);
|
||||||
|
|
||||||
const renderGrid = (list: Agent[]) =>
|
const filterByStatus = (agent: Agent) => {
|
||||||
viewMode === "list" ? (
|
if (statusFilter === "published") return agent.published && !agent.is_private;
|
||||||
<div className="flex flex-col gap-2">
|
if (statusFilter === "draft") return !agent.published && !agent.is_private && !agent.builtin;
|
||||||
{list.map((agent) => (
|
if (statusFilter === "private") return agent.is_private;
|
||||||
<AgentCard
|
if (statusFilter === "builtin") return agent.builtin;
|
||||||
key={agent.id}
|
return true;
|
||||||
agent={agent}
|
};
|
||||||
layout="list"
|
|
||||||
onPublisherClick={handlePublisherClick}
|
const renderGrid = (list: Agent[]) => {
|
||||||
/>
|
const visibleAgents = list.filter(filterByStatus);
|
||||||
))}
|
if (visibleAgents.length === 0 && list.length > 0) {
|
||||||
</div>
|
return renderEmpty("当前状态筛选下没有智能体。");
|
||||||
) : (
|
}
|
||||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
return (
|
||||||
{list.map((agent) => (
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||||
|
{visibleAgents.map((agent) => (
|
||||||
<AgentCard
|
<AgentCard
|
||||||
key={agent.id}
|
key={agent.id}
|
||||||
agent={agent}
|
agent={agent}
|
||||||
@@ -200,6 +206,7 @@ export function AgentGallery() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
|
||||||
/** Loading / empty / (grid + pagination) for one paginated tab. */
|
/** Loading / empty / (grid + pagination) for one paginated tab. */
|
||||||
const renderListBody = (opts: {
|
const renderListBody = (opts: {
|
||||||
@@ -264,10 +271,8 @@ export function AgentGallery() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const renderEmpty = (description: string, showNewButton = false) => (
|
const renderEmpty = (description: string, showNewButton = false) => (
|
||||||
<div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
|
<div className="flex h-72 flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-blue-200 bg-white/70 text-center shadow-[0_12px_36px_rgba(37,99,235,0.05)] dark:border-blue-900 dark:bg-slate-900/70">
|
||||||
<div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full dark:bg-[#022248]">
|
<AgentBrandIcon size="lg" />
|
||||||
<BotIcon className="text-muted-foreground h-7 w-7 dark:text-[#AACEFF]" />
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<p className="font-medium dark:text-[#AACEFF]">{t.agents.emptyTitle}</p>
|
<p className="font-medium dark:text-[#AACEFF]">{t.agents.emptyTitle}</p>
|
||||||
<p className="text-muted-foreground mt-1 text-sm dark:text-[#55A6FE]">
|
<p className="text-muted-foreground mt-1 text-sm dark:text-[#55A6FE]">
|
||||||
@@ -276,8 +281,7 @@ export function AgentGallery() {
|
|||||||
</div>
|
</div>
|
||||||
{showNewButton && (
|
{showNewButton && (
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
className="mt-2 rounded-xl bg-[#1f63e9] px-5 shadow-[0_8px_20px_rgba(31,99,233,0.22)] hover:bg-[#1857d4] dark:border-[#2580FF] dark:bg-[#2580FF] dark:text-white dark:hover:border-[#2580FF] dark:hover:bg-[#2580FF]/90 dark:hover:text-white"
|
||||||
className="mt-2 dark:border-[#2580FF] dark:bg-[#2580FF] dark:text-white dark:hover:border-[#2580FF] dark:hover:bg-[#2580FF]/90 dark:hover:text-white"
|
|
||||||
onClick={handleNewAgent}
|
onClick={handleNewAgent}
|
||||||
>
|
>
|
||||||
<PlusIcon className="mr-1.5 h-4 w-4" />
|
<PlusIcon className="mr-1.5 h-4 w-4" />
|
||||||
@@ -364,17 +368,22 @@ export function AgentGallery() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex size-full min-h-0 flex-col">
|
<div className="flex size-full min-h-0 flex-col overflow-hidden border-y border-r border-slate-200/80 bg-white dark:border-slate-800 dark:bg-slate-950">
|
||||||
{/* Page header */}
|
{/* Page header */}
|
||||||
<div className="flex items-center justify-between border-b px-6 py-4">
|
<div className="flex shrink-0 items-start justify-between px-[38px] pt-[45px] pb-[38px]">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-xl font-semibold">{t.agents.title}</h1>
|
<h1 className="text-[28px] leading-none font-semibold tracking-[-0.03em] text-slate-950 dark:text-white">
|
||||||
<p className="text-muted-foreground mt-0.5 text-sm">
|
{t.agents.title}
|
||||||
{t.agents.description}
|
</h1>
|
||||||
|
<p className="mt-4 text-[15px] text-slate-500 dark:text-slate-400">
|
||||||
|
创建并管理专属的 AI 智能体，助力更高效的工作与决策。
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Button onClick={handleNewAgent}>
|
<Button
|
||||||
<PlusIcon className="mr-1.5 h-4 w-4" />
|
onClick={handleNewAgent}
|
||||||
|
className="h-12 w-[154px] rounded-lg bg-gradient-to-r from-[#2467ea] to-[#0f54ed] px-0 text-[15px] font-medium shadow-[0_9px_22px_rgba(31,99,233,0.22)] hover:brightness-105"
|
||||||
|
>
|
||||||
|
<PlusIcon className="mr-2 h-[18px] w-[18px]" />
|
||||||
{t.agents.newAgent}
|
{t.agents.newAgent}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@@ -384,43 +393,99 @@ export function AgentGallery() {
|
|||||||
value={activeTab}
|
value={activeTab}
|
||||||
onValueChange={(v) => {
|
onValueChange={(v) => {
|
||||||
setActiveTab(v);
|
setActiveTab(v);
|
||||||
// Each tab starts from a clean slate: switching tabs clears the
|
// Each tab starts from a clean slate instead of carrying filters over.
|
||||||
// keyword / tag / sort / publisher filters instead of carrying them
|
|
||||||
// over. The TagSearchBar's own input box is reset via its key below.
|
|
||||||
setSearch("");
|
setSearch("");
|
||||||
setTagIds([]);
|
|
||||||
setSort("time_desc");
|
setSort("time_desc");
|
||||||
|
setStatusFilter("all");
|
||||||
setPublisher(null);
|
setPublisher(null);
|
||||||
}}
|
}}
|
||||||
className="flex min-h-0 flex-1 flex-col overflow-hidden"
|
className="flex min-h-0 flex-1 flex-col overflow-hidden"
|
||||||
>
|
>
|
||||||
<div className="mx-6 mt-4 flex flex-col gap-3">
|
<div className="shrink-0 px-[38px]">
|
||||||
<div className="flex items-center justify-between gap-3">
|
<div className="flex min-h-14 flex-col gap-3 border-b border-slate-200/90 lg:flex-row lg:items-end lg:justify-between dark:border-slate-800">
|
||||||
<TabsList className="w-auto max-w-full flex-wrap justify-start self-start">
|
<TabsList variant="line" className="h-auto w-auto max-w-full flex-wrap justify-start self-start rounded-none border-0 bg-transparent p-0">
|
||||||
<TabsTrigger value="mine">我的</TabsTrigger>
|
<TabsTrigger
|
||||||
|
value="mine"
|
||||||
|
className="h-14 rounded-none border-x-0 border-t-0 border-b-2 border-transparent bg-transparent px-3 text-[15px] shadow-none after:hidden data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:!border-b-[#2166e8] data-[state=active]:bg-transparent data-[state=active]:text-[#2166e8] data-[state=active]:!shadow-none"
|
||||||
|
>
|
||||||
|
我的
|
||||||
|
</TabsTrigger>
|
||||||
{squareTabs.map((sq) => (
|
{squareTabs.map((sq) => (
|
||||||
<TabsTrigger key={sq.id} value={sq.id} title={sq.description || sq.name}>
|
<TabsTrigger
|
||||||
|
key={sq.id}
|
||||||
|
value={sq.id}
|
||||||
|
title={sq.description || sq.name}
|
||||||
|
className="h-14 rounded-none border-x-0 border-t-0 border-b-2 border-transparent bg-transparent px-5 text-[15px] shadow-none after:hidden data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:!border-b-[#2166e8] data-[state=active]:bg-transparent data-[state=active]:text-[#2166e8] data-[state=active]:!shadow-none"
|
||||||
|
>
|
||||||
{sq.name}
|
{sq.name}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
))}
|
))}
|
||||||
{privateFeatureAvailable && (
|
{privateFeatureAvailable && (
|
||||||
<TabsTrigger value="private">
|
<TabsTrigger
|
||||||
|
value="private"
|
||||||
|
className="h-14 rounded-none border-x-0 border-t-0 border-b-2 border-transparent bg-transparent px-5 text-[15px] shadow-none after:hidden data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:!border-b-[#2166e8] data-[state=active]:bg-transparent data-[state=active]:text-[#2166e8] data-[state=active]:!shadow-none"
|
||||||
|
>
|
||||||
<LockIcon className="mr-1 h-3.5 w-3.5" />
|
<LockIcon className="mr-1 h-3.5 w-3.5" />
|
||||||
私密广场
|
私密广场
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
)}
|
)}
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<TabsTrigger value="builtin" title="内置/功能型智能体（仅管理员可见）">
|
<TabsTrigger
|
||||||
|
value="builtin"
|
||||||
|
title="内置/功能型智能体（仅管理员可见）"
|
||||||
|
className="h-14 rounded-none border-x-0 border-t-0 border-b-2 border-transparent bg-transparent px-5 text-[15px] shadow-none after:hidden data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:!border-b-[#2166e8] data-[state=active]:bg-transparent data-[state=active]:text-[#2166e8] data-[state=active]:!shadow-none"
|
||||||
|
>
|
||||||
<BotIcon className="mr-1 h-3.5 w-3.5" />
|
<BotIcon className="mr-1 h-3.5 w-3.5" />
|
||||||
内置智能体
|
内置智能体
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
)}
|
)}
|
||||||
</TabsList>
|
</TabsList>
|
||||||
<div className="flex items-center gap-3">
|
{showSearchBar && (
|
||||||
<span className="text-muted-foreground text-sm whitespace-nowrap">
|
<div className="flex flex-wrap items-center justify-end gap-5 pb-2.5">
|
||||||
共 {activeTotal} 个
|
<div className="relative w-[350px] max-w-full">
|
||||||
</span>
|
<SearchIcon className="pointer-events-none absolute top-1/2 left-3.5 size-[18px] -translate-y-1/2 text-slate-500" />
|
||||||
<ViewModeToggle value={viewMode} onChange={setViewMode} />
|
<Input
|
||||||
|
value={search}
|
||||||
|
onChange={(event) => setSearch(event.target.value)}
|
||||||
|
placeholder="搜索智能体名称或描述"
|
||||||
|
className="h-12 rounded-xl border-slate-200 bg-white pl-11 text-sm shadow-none placeholder:text-slate-400 focus-visible:border-blue-400 focus-visible:ring-blue-100 dark:border-slate-700 dark:bg-slate-900"
|
||||||
|
/>
|
||||||
|
{(activeTab === "private" ? isPrivateFetching : mainFetching) && (
|
||||||
|
<Loader2 className="absolute top-1/2 right-3.5 size-4 -translate-y-1/2 animate-spin text-blue-500" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Select
|
||||||
|
value={statusFilter}
|
||||||
|
onValueChange={(value) => setStatusFilter(value as AgentStatusFilter)}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="h-12 w-[156px] rounded-xl border-slate-200 px-4 text-sm shadow-none dark:border-slate-700">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent position="popper" side="bottom" sideOffset={4}>
|
||||||
|
<SelectItem value="all">全部状态</SelectItem>
|
||||||
|
<SelectItem value="published">已发布</SelectItem>
|
||||||
|
<SelectItem value="draft">未发布</SelectItem>
|
||||||
|
<SelectItem value="private">私密</SelectItem>
|
||||||
|
<SelectItem value="builtin">内置</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select value={sort} onValueChange={(v) => setSort(v as AgentSort)}>
|
||||||
|
<SelectTrigger
|
||||||
|
className="h-12 w-[156px] rounded-xl border-slate-200 px-4 text-sm shadow-none dark:border-slate-700"
|
||||||
|
title="排序"
|
||||||
|
>
|
||||||
|
<ArrowDownUpIcon className="mr-1 size-4 text-slate-500" />
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent position="popper" side="bottom" sideOffset={4}>
|
||||||
|
<SelectItem value="time_desc">更新时间</SelectItem>
|
||||||
|
<SelectItem value="time_asc">最早创建</SelectItem>
|
||||||
|
<SelectItem value="updated_desc">最近更新</SelectItem>
|
||||||
|
<SelectItem value="updated_asc">最早更新</SelectItem>
|
||||||
|
<SelectItem value="name_asc">名称 A-Z</SelectItem>
|
||||||
|
<SelectItem value="name_desc">名称 Z-A</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
{activeTab === "private" && privatePassword && (
|
{activeTab === "private" && privatePassword && (
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
@@ -432,48 +497,16 @@ export function AgentGallery() {
|
|||||||
锁定
|
锁定
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{showSearchBar && (
|
|
||||||
<TagSearchBar
|
|
||||||
// Remount per tab so the internal keyword input / 展开 state also
|
|
||||||
// resets when the parent-owned filters are cleared on tab switch.
|
|
||||||
key={activeTab}
|
|
||||||
targetType="agent"
|
|
||||||
searching={
|
|
||||||
activeTab === "private" ? isPrivateFetching : mainFetching
|
|
||||||
}
|
|
||||||
onSearchChange={setSearch}
|
|
||||||
tagIds={tagIds}
|
|
||||||
onTagIdsChange={setTagIds}
|
|
||||||
actions={
|
|
||||||
<Select value={sort} onValueChange={(v) => setSort(v as AgentSort)}>
|
|
||||||
<SelectTrigger
|
|
||||||
className="h-9 w-full gap-2 px-3 text-xs sm:w-[148px]"
|
|
||||||
title="排序"
|
|
||||||
>
|
|
||||||
<ArrowDownUpIcon className="text-muted-foreground size-3.5" />
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent position="popper" side="bottom" sideOffset={4}>
|
|
||||||
<SelectItem value="time_desc">最新创建</SelectItem>
|
|
||||||
<SelectItem value="time_asc">最早创建</SelectItem>
|
|
||||||
<SelectItem value="updated_desc">最近更新</SelectItem>
|
|
||||||
<SelectItem value="updated_asc">最早更新</SelectItem>
|
|
||||||
<SelectItem value="name_asc">名称 A-Z</SelectItem>
|
|
||||||
<SelectItem value="name_desc">名称 Z-A</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{publisher && (
|
{publisher && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="mt-3 flex items-center gap-2">
|
||||||
<span className="text-muted-foreground text-xs">筛选发布者：</span>
|
<span className="text-muted-foreground text-xs">筛选发布者：</span>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setPublisher(null)}
|
onClick={() => setPublisher(null)}
|
||||||
className="bg-primary/10 text-primary hover:bg-primary/20 inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-colors"
|
className="inline-flex items-center gap-1 rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-100 dark:bg-blue-500/15 dark:text-blue-300"
|
||||||
title="点击清除发布者筛选"
|
title="点击清除发布者筛选"
|
||||||
>
|
>
|
||||||
{publisher.label}
|
{publisher.label}
|
||||||
@@ -481,13 +514,16 @@ export function AgentGallery() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<div className="py-5 text-[15px] text-slate-600 dark:text-slate-300">
|
||||||
|
共 {activeTotal} 个智能体
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{squareTabs.map((sq) => (
|
{squareTabs.map((sq) => (
|
||||||
<TabsContent
|
<TabsContent
|
||||||
key={sq.id}
|
key={sq.id}
|
||||||
value={sq.id}
|
value={sq.id}
|
||||||
className="flex-1 overflow-y-auto p-6 mt-0"
|
className="mt-0 flex-1 overflow-y-auto px-[38px] pb-8"
|
||||||
>
|
>
|
||||||
{renderListBody({
|
{renderListBody({
|
||||||
list: mainAgents,
|
list: mainAgents,
|
||||||
@@ -500,7 +536,7 @@ export function AgentGallery() {
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
<TabsContent value="mine" className="flex-1 overflow-y-auto p-6 mt-0">
|
<TabsContent value="mine" className="mt-0 flex-1 overflow-y-auto px-[38px] pb-8">
|
||||||
{renderListBody({
|
{renderListBody({
|
||||||
list: mainAgents,
|
list: mainAgents,
|
||||||
total: mainTotal,
|
total: mainTotal,
|
||||||
@@ -513,7 +549,7 @@ export function AgentGallery() {
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<TabsContent value="builtin" className="flex-1 overflow-y-auto p-6 mt-0">
|
<TabsContent value="builtin" className="mt-0 flex-1 overflow-y-auto px-[38px] pb-8">
|
||||||
{renderListBody({
|
{renderListBody({
|
||||||
list: mainAgents,
|
list: mainAgents,
|
||||||
total: mainTotal,
|
total: mainTotal,
|
||||||
@@ -528,7 +564,7 @@ export function AgentGallery() {
|
|||||||
{privateFeatureAvailable && (
|
{privateFeatureAvailable && (
|
||||||
<TabsContent
|
<TabsContent
|
||||||
value="private"
|
value="private"
|
||||||
className="flex-1 overflow-y-auto p-6 mt-0"
|
className="mt-0 flex-1 overflow-y-auto px-[38px] pb-8"
|
||||||
>
|
>
|
||||||
{renderPrivateTab()}
|
{renderPrivateTab()}
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|||||||
@@ -206,7 +206,7 @@ export function AgentModuleSidebar({
|
|||||||
const renderAgentCard = (agent: Agent, keyPrefix: string) => {
|
const renderAgentCard = (agent: Agent, keyPrefix: string) => {
|
||||||
const href = `${routeBase}/agents/${agent.id}/chats/new`;
|
const href = `${routeBase}/agents/${agent.id}/chats/new`;
|
||||||
const isActive = agent.id === activeAgentId;
|
const isActive = agent.id === activeAgentId;
|
||||||
const { from, to, foreground } = agentColor(agent.id, theme);
|
const { from, to } = agentColor(agent.id, isDark);
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
key={`${keyPrefix}:${agent.id}`}
|
key={`${keyPrefix}:${agent.id}`}
|
||||||
@@ -236,10 +236,7 @@ export function AgentModuleSidebar({
|
|||||||
isActive &&
|
isActive &&
|
||||||
"ring-2 ring-[#83c1ff]/35 shadow-[0_0_18px_rgba(43,143,254,0.45)]",
|
"ring-2 ring-[#83c1ff]/35 shadow-[0_0_18px_rgba(43,143,254,0.45)]",
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{ backgroundImage: `linear-gradient(135deg, ${from}, ${to})` }}
|
||||||
backgroundImage: `linear-gradient(135deg, ${from}, ${to})`,
|
|
||||||
color: foreground,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Bot className="size-[19px]" />
|
<Bot className="size-[19px]" />
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -93,47 +93,43 @@ export function AgentSelector({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
{iconMode ? (
|
<DialogTrigger asChild>
|
||||||
<Tooltip content={iconTooltipLabel}>
|
{iconMode ? (
|
||||||
<div>
|
<Tooltip content={iconTooltipLabel}>
|
||||||
<DialogTrigger asChild>
|
<Button
|
||||||
<Button
|
type="button"
|
||||||
type="button"
|
variant="ghost"
|
||||||
variant="ghost"
|
size="icon"
|
||||||
size="icon"
|
disabled={disabled}
|
||||||
disabled={disabled}
|
aria-label={selectedAgent ? `已选择智能体：${triggerLabel}` : "选择智能体"}
|
||||||
aria-label={selectedAgent ? `已选择智能体：${triggerLabel}` : "选择智能体"}
|
className={cn(
|
||||||
className={cn(
|
"relative size-9 rounded-full text-muted-foreground shadow-none hover:bg-muted/60 hover:text-foreground",
|
||||||
"relative size-9 rounded-full text-muted-foreground shadow-none hover:bg-muted/60 hover:text-foreground",
|
selectedAgent && "text-amber-600 hover:text-amber-700",
|
||||||
selectedAgent && "text-amber-600 hover:text-amber-700",
|
selectedAgent && iconActiveClassName,
|
||||||
selectedAgent && iconActiveClassName,
|
iconButtonClassName,
|
||||||
iconButtonClassName,
|
)}
|
||||||
)}
|
>
|
||||||
>
|
<BotIcon className="size-4" />
|
||||||
<BotIcon className="size-4" />
|
{selectedAgent && (
|
||||||
{selectedAgent && (
|
<span
|
||||||
<span
|
role="button"
|
||||||
role="button"
|
tabIndex={0}
|
||||||
tabIndex={0}
|
aria-label="清除已选 agent"
|
||||||
aria-label="清除已选 agent"
|
className="absolute -right-1 -top-1 inline-flex size-4 items-center justify-center rounded-full border bg-background text-foreground shadow-sm hover:bg-muted"
|
||||||
className="absolute -right-1 -top-1 inline-flex size-4 items-center justify-center rounded-full border bg-background text-foreground shadow-sm hover:bg-muted"
|
onClick={handleClear}
|
||||||
onClick={handleClear}
|
onKeyDown={(e) => {
|
||||||
onKeyDown={(e) => {
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
if (e.key === "Enter" || e.key === " ") {
|
e.preventDefault();
|
||||||
e.preventDefault();
|
onAgentChange(null);
|
||||||
onAgentChange(null);
|
}
|
||||||
}
|
}}
|
||||||
}}
|
>
|
||||||
>
|
<XIcon className="size-2.5" />
|
||||||
<XIcon className="size-2.5" />
|
</span>
|
||||||
</span>
|
)}
|
||||||
)}
|
</Button>
|
||||||
</Button>
|
</Tooltip>
|
||||||
</DialogTrigger>
|
) : (
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
<DialogTrigger asChild>
|
|
||||||
<PromptInputButton
|
<PromptInputButton
|
||||||
type="button"
|
type="button"
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
@@ -171,8 +167,8 @@ export function AgentSelector({
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</PromptInputButton>
|
</PromptInputButton>
|
||||||
</DialogTrigger>
|
)}
|
||||||
)}
|
</DialogTrigger>
|
||||||
<DialogContent className="overflow-hidden p-0 sm:max-w-md">
|
<DialogContent className="overflow-hidden p-0 sm:max-w-md">
|
||||||
<DialogTitle className="sr-only">选择 Agent</DialogTitle>
|
<DialogTitle className="sr-only">选择 Agent</DialogTitle>
|
||||||
<Command className="**:data-[slot=command-input-wrapper]:h-auto">
|
<Command className="**:data-[slot=command-input-wrapper]:h-auto">
|
||||||
|
|||||||
@@ -45,32 +45,11 @@ function skillLabel(skill: Skill) {
|
|||||||
|
|
||||||
function matchesQuery(skill: Skill, q: string) {
|
function matchesQuery(skill: Skill, q: string) {
|
||||||
if (!q) return true;
|
if (!q) return true;
|
||||||
const haystack = [
|
return (
|
||||||
skill.name,
|
skill.name.toLowerCase().includes(q) ||
|
||||||
skill.name_zh,
|
(skill.name_zh ?? "").toLowerCase().includes(q) ||
|
||||||
skill.description,
|
(skill.description ?? "").toLowerCase().includes(q)
|
||||||
skill.detail,
|
);
|
||||||
skill.category,
|
|
||||||
skill.license,
|
|
||||||
skill.source,
|
|
||||||
skill.state,
|
|
||||||
skill.owner_username,
|
|
||||||
skill.created_at,
|
|
||||||
skill.last_activity_at,
|
|
||||||
skill.use_count != null ? `使用 ${skill.use_count}` : null,
|
|
||||||
skill.view_count != null ? `查看 ${skill.view_count}` : null,
|
|
||||||
skill.patch_count != null ? `变迁 ${skill.patch_count}` : null,
|
|
||||||
...(skill.tags ?? []).flatMap((tag) => [
|
|
||||||
tag.name,
|
|
||||||
tag.description,
|
|
||||||
tag.color,
|
|
||||||
tag.usage_count != null ? `标签使用 ${tag.usage_count}` : null,
|
|
||||||
]),
|
|
||||||
]
|
|
||||||
.filter((value): value is string => typeof value === "string" && value.length > 0)
|
|
||||||
.join(" ")
|
|
||||||
.toLowerCase();
|
|
||||||
return haystack.includes(q);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SkillTransferSelector({
|
export function SkillTransferSelector({
|
||||||
@@ -180,7 +159,7 @@ export function SkillTransferSelector({
|
|||||||
<div className="relative flex-1">
|
<div className="relative flex-1">
|
||||||
<SearchIcon className="text-muted-foreground absolute left-2 top-1/2 size-3.5 -translate-y-1/2" />
|
<SearchIcon className="text-muted-foreground absolute left-2 top-1/2 size-3.5 -translate-y-1/2" />
|
||||||
<Input
|
<Input
|
||||||
placeholder="搜索技能名称、描述、分类、标签、变迁..."
|
placeholder="搜索全部技能(中英文名称、描述)…"
|
||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setSearch(e.currentTarget.value);
|
setSearch(e.currentTarget.value);
|
||||||
@@ -260,7 +239,7 @@ export function SkillTransferSelector({
|
|||||||
{/* Two-column transfer panes */}
|
{/* Two-column transfer panes */}
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
<SkillPane
|
<SkillPane
|
||||||
title="未勾选技能"
|
title="可用技能"
|
||||||
count={availableSkills.length}
|
count={availableSkills.length}
|
||||||
items={availableView}
|
items={availableView}
|
||||||
variant="available"
|
variant="available"
|
||||||
@@ -269,10 +248,10 @@ export function SkillTransferSelector({
|
|||||||
onPageChange={setAvailablePage}
|
onPageChange={setAvailablePage}
|
||||||
onPick={add}
|
onPick={add}
|
||||||
onViewDetail={onViewDetail}
|
onViewDetail={onViewDetail}
|
||||||
emptyHint={query || category !== ALL_CATEGORIES ? "没有匹配的技能" : "已全部勾选"}
|
emptyHint={query || category !== ALL_CATEGORIES ? "没有匹配的技能" : "已全部启用"}
|
||||||
/>
|
/>
|
||||||
<SkillPane
|
<SkillPane
|
||||||
title="已勾选技能"
|
title="已启用技能"
|
||||||
count={selectedSkills.length}
|
count={selectedSkills.length}
|
||||||
items={selectedView}
|
items={selectedView}
|
||||||
variant="selected"
|
variant="selected"
|
||||||
@@ -281,7 +260,7 @@ export function SkillTransferSelector({
|
|||||||
onPageChange={setSelectedPage}
|
onPageChange={setSelectedPage}
|
||||||
onPick={remove}
|
onPick={remove}
|
||||||
onViewDetail={onViewDetail}
|
onViewDetail={onViewDetail}
|
||||||
emptyHint={query ? "没有匹配的已选技能" : "尚未勾选任何技能"}
|
emptyHint={query ? "没有匹配的已选技能" : "尚未启用任何技能"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Check, ExternalLink, LayoutIcon, PanelLeftIcon, Shirt } from "lucide-react";
|
import { Check, ExternalLink, LayoutIcon, PanelLeftIcon, Shirt } from "lucide-react";
|
||||||
import { useEffect, useMemo, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
@@ -15,8 +15,6 @@ import {
|
|||||||
} from "@/components/ui/dropdown-menu";
|
} from "@/components/ui/dropdown-menu";
|
||||||
import { useTheme, type ThemeType } from "@/contexts/ThemeContext";
|
import { useTheme, type ThemeType } from "@/contexts/ThemeContext";
|
||||||
import { useAppearanceSettings, useLayoutMode } from "@/core/system-settings/hooks";
|
import { useAppearanceSettings, useLayoutMode } from "@/core/system-settings/hooks";
|
||||||
import { isHideChromeActive } from "@/core/embed/embed-session";
|
|
||||||
import { env } from "@/env";
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { buildLightAppUrl } from "@/strategy-components/lib/light-app";
|
import { buildLightAppUrl } from "@/strategy-components/lib/light-app";
|
||||||
|
|
||||||
@@ -26,15 +24,12 @@ import { buildLightAppUrl } from "@/strategy-components/lib/light-app";
|
|||||||
* - "banner-dark" / "banner-light"：Header 落在主题 banner 上（白字 / 浅色 hover）。
|
* - "banner-dark" / "banner-light"：Header 落在主题 banner 上（白字 / 浅色 hover）。
|
||||||
* - "content"：简洁模式聊天页浅底顶栏，走 foreground / muted-foreground。
|
* - "content"：简洁模式聊天页浅底顶栏，走 foreground / muted-foreground。
|
||||||
*/
|
*/
|
||||||
export type AppearanceControlTone = "banner-dark" | "banner-light" | "banner-custom" | "content";
|
export type AppearanceControlTone = "banner-dark" | "banner-light" | "content";
|
||||||
|
|
||||||
// 换肤色板：红色=红白主题(light)，蓝色=浅蓝主题(lightblue)，冰川蓝=柔和浅蓝主题(iceblue)，浅黄色=柔和黄主题(lightyellow)，深蓝色=深色主题(dark)
|
// 换肤色板：红色=红白主题(light)，蓝色=浅蓝主题(lightblue)，深蓝色=深色主题(dark)
|
||||||
export const THEME_SWATCHES: { id: ThemeType; label: string; color: string }[] = [
|
export const THEME_SWATCHES: { id: ThemeType; label: string; color: string }[] = [
|
||||||
{ id: "light", label: "红色", color: "#cf1322" },
|
{ id: "light", label: "红色", color: "#cf1322" },
|
||||||
{ id: "lightgreen", label: "绿色", color: "#07c05f" },
|
|
||||||
{ id: "lightblue", label: "蓝色", color: "#0062d9" },
|
{ id: "lightblue", label: "蓝色", color: "#0062d9" },
|
||||||
{ id: "iceblue", label: "冰川蓝", color: "#9BCEF1" },
|
|
||||||
{ id: "lightyellow", label: "浅黄色", color: "#F3FBD9" },
|
|
||||||
{ id: "dark", label: "深蓝色", color: "#002466" },
|
{ id: "dark", label: "深蓝色", color: "#002466" },
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -43,8 +38,6 @@ const triggerToneClass = (tone: AppearanceControlTone) =>
|
|||||||
? "text-slate-400 hover:bg-slate-800/50 hover:text-slate-400"
|
? "text-slate-400 hover:bg-slate-800/50 hover:text-slate-400"
|
||||||
: tone === "banner-light"
|
: tone === "banner-light"
|
||||||
? "text-white hover:bg-[var(--brand-950)] hover:text-white active:bg-[#8a0618]"
|
? "text-white hover:bg-[var(--brand-950)] hover:text-white active:bg-[#8a0618]"
|
||||||
: tone === "banner-custom"
|
|
||||||
? "text-[var(--navigation-foreground)] hover:bg-white/20 hover:text-[var(--navigation-foreground)] active:bg-white/30"
|
|
||||||
: "text-muted-foreground hover:bg-muted hover:text-foreground";
|
: "text-muted-foreground hover:bg-muted hover:text-foreground";
|
||||||
|
|
||||||
export function CompactShortcutButtons({ tone }: { tone: AppearanceControlTone }) {
|
export function CompactShortcutButtons({ tone }: { tone: AppearanceControlTone }) {
|
||||||
@@ -86,23 +79,8 @@ export function CompactShortcutButtons({ tone }: { tone: AppearanceControlTone }
|
|||||||
|
|
||||||
export function ThemeSwitcher({ tone }: { tone: AppearanceControlTone }) {
|
export function ThemeSwitcher({ tone }: { tone: AppearanceControlTone }) {
|
||||||
const { theme, setTheme } = useTheme();
|
const { theme, setTheme } = useTheme();
|
||||||
const { data: appearance } = useAppearanceSettings();
|
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
const swatches = useMemo(
|
|
||||||
() => [
|
|
||||||
...THEME_SWATCHES,
|
|
||||||
...(appearance?.custom_themes ?? [])
|
|
||||||
.filter((preset) => preset.enabled)
|
|
||||||
.sort((a, b) => a.sort_order - b.sort_order)
|
|
||||||
.map((preset) => ({
|
|
||||||
id: preset.id as ThemeType,
|
|
||||||
label: preset.name,
|
|
||||||
color: preset.primary,
|
|
||||||
})),
|
|
||||||
],
|
|
||||||
[appearance?.custom_themes],
|
|
||||||
);
|
|
||||||
|
|
||||||
const cancelClose = () => {
|
const cancelClose = () => {
|
||||||
if (closeTimer.current) {
|
if (closeTimer.current) {
|
||||||
@@ -117,8 +95,6 @@ export function ThemeSwitcher({ tone }: { tone: AppearanceControlTone }) {
|
|||||||
|
|
||||||
useEffect(() => () => cancelClose(), []);
|
useEffect(() => () => cancelClose(), []);
|
||||||
|
|
||||||
if (env.FORCE_COLLAPSED_SIDEBAR || isHideChromeActive()) return null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="relative"
|
className="relative"
|
||||||
@@ -141,9 +117,9 @@ export function ThemeSwitcher({ tone }: { tone: AppearanceControlTone }) {
|
|||||||
</Button>
|
</Button>
|
||||||
{open ? (
|
{open ? (
|
||||||
<div className="absolute top-full left-1/2 z-50 -translate-x-1/2 pt-2">
|
<div className="absolute top-full left-1/2 z-50 -translate-x-1/2 pt-2">
|
||||||
<div className="relative flex max-w-64 flex-wrap items-center justify-center gap-2 rounded-lg border border-border bg-popover px-2.5 py-1.5 shadow-lg">
|
<div className="relative flex items-center gap-2 rounded-lg border border-black/5 bg-white px-2.5 py-1.5 shadow-lg">
|
||||||
<div className="absolute -top-1 left-1/2 size-2 -translate-x-1/2 rotate-45 rounded-[1px] border-t border-l border-border bg-popover" />
|
<div className="absolute -top-1 left-1/2 size-2 -translate-x-1/2 rotate-45 rounded-[1px] border-t border-l border-black/5 bg-white" />
|
||||||
{swatches.map((swatch) => {
|
{THEME_SWATCHES.map((swatch) => {
|
||||||
const active = theme === swatch.id;
|
const active = theme === swatch.id;
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
@@ -209,8 +185,6 @@ export function LayoutModeSwitcher({
|
|||||||
const current = mode ?? fallback;
|
const current = mode ?? fallback;
|
||||||
const TriggerIcon = current === "full" ? PanelLeftIcon : LayoutIcon;
|
const TriggerIcon = current === "full" ? PanelLeftIcon : LayoutIcon;
|
||||||
|
|
||||||
if (env.FORCE_COLLAPSED_SIDEBAR || isHideChromeActive()) return null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
|
|||||||
@@ -121,19 +121,15 @@ function findScrollableArtifactElement(root: HTMLElement | null) {
|
|||||||
|
|
||||||
export function ArtifactFileDetail({
|
export function ArtifactFileDetail({
|
||||||
className,
|
className,
|
||||||
filepath: filepathFromProps,
|
filepath: filepathFromProps,
|
||||||
threadId,
|
threadId,
|
||||||
mimeType = null,
|
onClose,
|
||||||
onClose,
|
allowVirtualMarkdownEdit = false,
|
||||||
allowVirtualMarkdownEdit = false,
|
disableDesensitize = false,
|
||||||
disableDesensitize = false,
|
}: {
|
||||||
hideFileName = false,
|
className?: string;
|
||||||
}: {
|
filepath: string;
|
||||||
className?: string;
|
threadId: string;
|
||||||
filepath: string;
|
|
||||||
threadId: string;
|
|
||||||
/** Server/tool supplied type wins over path guessing when available. */
|
|
||||||
mimeType?: string | null;
|
|
||||||
/** 覆盖默认关闭行为（仅 setOpen(false)）；圆桌 Step3 文件预览用于退出沙箱模式。 */
|
/** 覆盖默认关闭行为（仅 setOpen(false)）；圆桌 Step3 文件预览用于退出沙箱模式。 */
|
||||||
onClose?: () => void;
|
onClose?: () => void;
|
||||||
/**
|
/**
|
||||||
@@ -146,45 +142,22 @@ export function ArtifactFileDetail({
|
|||||||
* 关闭对预览内容的脱敏。多智能体会商页的「消息列表沙箱」按需求**不脱敏**沙箱内的
|
* 关闭对预览内容的脱敏。多智能体会商页的「消息列表沙箱」按需求**不脱敏**沙箱内的
|
||||||
* 产物内容（用户要拿原始文件），故 Step2SandboxLayout 传 true；主聊天等其它调用方
|
* 产物内容（用户要拿原始文件），故 Step2SandboxLayout 传 true；主聊天等其它调用方
|
||||||
* 默认 false，沿用全局脱敏。
|
* 默认 false，沿用全局脱敏。
|
||||||
*/
|
*/
|
||||||
disableDesensitize?: boolean;
|
disableDesensitize?: boolean;
|
||||||
hideFileName?: boolean;
|
}) {
|
||||||
}) {
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { artifacts, setOpen, select } = useArtifacts();
|
const { artifacts, setOpen, select } = useArtifacts();
|
||||||
const { isMock, thread, publicShareCode } = useThread();
|
const { isMock, thread, publicShareCode } = useThread();
|
||||||
const isWriteFileVirtual = useMemo(() => {
|
const isWriteFileVirtual = useMemo(() => {
|
||||||
return filepathFromProps.startsWith("write-file:");
|
return filepathFromProps.startsWith("write-file:");
|
||||||
}, [filepathFromProps]);
|
}, [filepathFromProps]);
|
||||||
// A streamed tool call can be opened before the path has been normalized by
|
const filepath = useMemo(() => {
|
||||||
// the artifacts API. Keep the format supplied by the writer so Markdown is
|
if (isWriteFileVirtual) {
|
||||||
// rendered as Markdown instead of falling back to a TEXT source preview.
|
const url = new URL(filepathFromProps);
|
||||||
const writeFileLanguageHint = useMemo(() => {
|
return decodeURIComponent(url.pathname);
|
||||||
if (!isWriteFileVirtual) return null;
|
}
|
||||||
try {
|
return filepathFromProps;
|
||||||
const language = new URL(filepathFromProps).searchParams.get("language");
|
}, [filepathFromProps, isWriteFileVirtual]);
|
||||||
return language === "markdown" ? language : null;
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}, [filepathFromProps, isWriteFileVirtual]);
|
|
||||||
const mimeLanguageHint = useMemo(() => {
|
|
||||||
const normalized = mimeType?.toLowerCase().trim() ?? "";
|
|
||||||
if (normalized.includes("markdown")) return "markdown";
|
|
||||||
if (normalized.includes("html")) return "html";
|
|
||||||
if (normalized.includes("mermaid")) return "mermaid";
|
|
||||||
if (normalized.startsWith("text/")) return "text";
|
|
||||||
return null;
|
|
||||||
}, [mimeType]);
|
|
||||||
const filepath = useMemo(() => {
|
|
||||||
if (isWriteFileVirtual) {
|
|
||||||
const url = new URL(filepathFromProps);
|
|
||||||
return decodeURIComponent(url.pathname).trim();
|
|
||||||
}
|
|
||||||
// Tool arguments may contain harmless surrounding whitespace. Passing it
|
|
||||||
// into extension detection turns `report.md ` into a generic TEXT file.
|
|
||||||
return filepathFromProps.trim();
|
|
||||||
}, [filepathFromProps, isWriteFileVirtual]);
|
|
||||||
const isSkillFile = useMemo(() => {
|
const isSkillFile = useMemo(() => {
|
||||||
return filepath.endsWith(".skill");
|
return filepath.endsWith(".skill");
|
||||||
}, [filepath]);
|
}, [filepath]);
|
||||||
@@ -211,22 +184,17 @@ export function ArtifactFileDetail({
|
|||||||
const useWriteFileStreaming = useMemo(() => {
|
const useWriteFileStreaming = useMemo(() => {
|
||||||
return isWriteFileVirtual && !isImageFile(filepath) && !editVirtualMarkdown;
|
return isWriteFileVirtual && !isImageFile(filepath) && !editVirtualMarkdown;
|
||||||
}, [filepath, isWriteFileVirtual, editVirtualMarkdown]);
|
}, [filepath, isWriteFileVirtual, editVirtualMarkdown]);
|
||||||
const { isCodeFile, language } = useMemo(() => {
|
const { isCodeFile, language } = useMemo(() => {
|
||||||
if (useWriteFileStreaming) {
|
if (useWriteFileStreaming) {
|
||||||
let nextLanguage =
|
let nextLanguage = checkCodeFile(filepath).language;
|
||||||
mimeLanguageHint ?? writeFileLanguageHint ?? checkCodeFile(filepath).language;
|
nextLanguage ??= "text";
|
||||||
nextLanguage ??= "text";
|
return { isCodeFile: true, language: nextLanguage };
|
||||||
return { isCodeFile: true, language: nextLanguage };
|
|
||||||
}
|
}
|
||||||
if (isSkillFile) {
|
if (isSkillFile) {
|
||||||
return { isCodeFile: true, language: "markdown" };
|
return { isCodeFile: true, language: "markdown" };
|
||||||
}
|
}
|
||||||
const detected = checkCodeFile(filepath);
|
return checkCodeFile(filepath);
|
||||||
if (mimeLanguageHint) {
|
}, [filepath, useWriteFileStreaming, isSkillFile]);
|
||||||
return { isCodeFile: true as const, language: mimeLanguageHint };
|
|
||||||
}
|
|
||||||
return detected;
|
|
||||||
}, [filepath, useWriteFileStreaming, isSkillFile, mimeLanguageHint, writeFileLanguageHint]);
|
|
||||||
const isSupportPreview = useMemo(() => {
|
const isSupportPreview = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
language === "html" ||
|
language === "html" ||
|
||||||
@@ -239,8 +207,7 @@ export function ArtifactFileDetail({
|
|||||||
// editVirtualMarkdown：用解码后的真实路径走 artifacts API（而非 write-file 虚拟
|
// editVirtualMarkdown：用解码后的真实路径走 artifacts API（而非 write-file 虚拟
|
||||||
// URL），这样保存后 useUpdateArtifactContent 写入的查询缓存才能命中，编辑内容
|
// URL），这样保存后 useUpdateArtifactContent 写入的查询缓存才能命中，编辑内容
|
||||||
// 不会被旧的内存 stub 值覆盖回退。
|
// 不会被旧的内存 stub 值覆盖回退。
|
||||||
filepath:
|
filepath: editVirtualMarkdown ? filepath : filepathFromProps,
|
||||||
editVirtualMarkdown || !isWriteFileVirtual ? filepath : filepathFromProps,
|
|
||||||
enabled: isCodeFile && !useWriteFileStreaming,
|
enabled: isCodeFile && !useWriteFileStreaming,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -255,11 +222,10 @@ export function ArtifactFileDetail({
|
|||||||
const canUseAiEditor = canEditArtifact;
|
const canUseAiEditor = canEditArtifact;
|
||||||
const [draftContent, setDraftContent] = useState("");
|
const [draftContent, setDraftContent] = useState("");
|
||||||
const [hasLocalEdits, setHasLocalEdits] = useState(false);
|
const [hasLocalEdits, setHasLocalEdits] = useState(false);
|
||||||
const updateArtifact = useUpdateArtifactContent();
|
const updateArtifact = useUpdateArtifactContent();
|
||||||
const displayContent = canEditArtifact ? draftContent : (content ?? "");
|
const displayContent = canEditArtifact ? draftContent : (content ?? "");
|
||||||
const isAutoPreviewLanguage = language === "html" || language === "markdown";
|
const isHtmlStreaming = language === "html" && thread.isLoading;
|
||||||
const isPreviewStreaming = isAutoPreviewLanguage && thread.isLoading;
|
const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
|
||||||
const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
|
|
||||||
const fileTypeLabel = useMemo(() => {
|
const fileTypeLabel = useMemo(() => {
|
||||||
if (isImageFile(filepath)) return "IMG";
|
if (isImageFile(filepath)) return "IMG";
|
||||||
if (isSpreadsheetFile) return "XLSX";
|
if (isSpreadsheetFile) return "XLSX";
|
||||||
@@ -298,36 +264,29 @@ export function ArtifactFileDetail({
|
|||||||
setDraftContent(content ?? "");
|
setDraftContent(content ?? "");
|
||||||
}, [canEditArtifact, content, hasLocalEdits]);
|
}, [canEditArtifact, content, hasLocalEdits]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setAllowAutoViewSwitch(true);
|
setAllowAutoViewSwitch(true);
|
||||||
setAutoScrollEnabled(true);
|
setAutoScrollEnabled(true);
|
||||||
setShowResumeAutoScroll(false);
|
setShowResumeAutoScroll(false);
|
||||||
setShowPreviewSwitchPulse(false);
|
|
||||||
}, [filepathFromProps]);
|
if (language === "html") {
|
||||||
|
setViewMode(thread.isLoading ? "code" : "preview");
|
||||||
useEffect(() => {
|
return;
|
||||||
if (isPreviewStreaming) {
|
}
|
||||||
setViewMode("code");
|
|
||||||
return;
|
// md/mermaid 默认预览（AI 写作视图作为可选切换项，由用户手动进入）。
|
||||||
}
|
if (isSupportPreview) {
|
||||||
|
setViewMode("preview");
|
||||||
if (language === "html") {
|
return;
|
||||||
setViewMode(thread.isLoading ? "code" : "preview");
|
}
|
||||||
return;
|
|
||||||
}
|
setViewMode("code");
|
||||||
|
}, [filepathFromProps, isSupportPreview, language, thread.isLoading]);
|
||||||
if (isSupportPreview) {
|
|
||||||
setViewMode("preview");
|
useEffect(() => {
|
||||||
return;
|
if (!allowAutoViewSwitch || language !== "html") {
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
setViewMode("code");
|
|
||||||
}, [isPreviewStreaming, isSupportPreview, language, thread.isLoading]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!allowAutoViewSwitch || !isAutoPreviewLanguage) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (thread.isLoading) {
|
if (thread.isLoading) {
|
||||||
setViewMode("code");
|
setViewMode("code");
|
||||||
@@ -339,9 +298,9 @@ export function ArtifactFileDetail({
|
|||||||
const timeoutId = window.setTimeout(() => {
|
const timeoutId = window.setTimeout(() => {
|
||||||
setShowPreviewSwitchPulse(false);
|
setShowPreviewSwitchPulse(false);
|
||||||
}, 1400);
|
}, 1400);
|
||||||
|
|
||||||
return () => window.clearTimeout(timeoutId);
|
return () => window.clearTimeout(timeoutId);
|
||||||
}, [allowAutoViewSwitch, isAutoPreviewLanguage, isSupportPreview, thread.isLoading]);
|
}, [allowAutoViewSwitch, language, thread.isLoading]);
|
||||||
|
|
||||||
const scrollArtifactToBottom = useCallback(
|
const scrollArtifactToBottom = useCallback(
|
||||||
(behavior: ScrollBehavior = "auto") => {
|
(behavior: ScrollBehavior = "auto") => {
|
||||||
@@ -624,8 +583,7 @@ export function ArtifactFileDetail({
|
|||||||
<span className="bg-background text-muted-foreground inline-flex h-7 shrink-0 items-center rounded-full border border-black/6 px-2.5 text-[10px] font-semibold tracking-[0.16em] dark:border-white/8">
|
<span className="bg-background text-muted-foreground inline-flex h-7 shrink-0 items-center rounded-full border border-black/6 px-2.5 text-[10px] font-semibold tracking-[0.16em] dark:border-white/8">
|
||||||
{fileTypeLabel}
|
{fileTypeLabel}
|
||||||
</span>
|
</span>
|
||||||
{!hideFileName && (
|
<ArtifactTitle className="min-w-0">
|
||||||
<ArtifactTitle className="min-w-0">
|
|
||||||
{/* markdown：隐藏文件名（仅留 MD 徽标），把横向空间让给工具栏，避免窄面板下
|
{/* markdown：隐藏文件名（仅留 MD 徽标），把横向空间让给工具栏，避免窄面板下
|
||||||
工具栏换行错位；多文件仍保留切换下拉（靠它切文件）。文件名仍可在下载/另存为时取到。 */}
|
工具栏换行错位；多文件仍保留切换下拉（靠它切文件）。文件名仍可在下载/另存为时取到。 */}
|
||||||
{language === "markdown" && !hasMultipleArtifacts ? null : useWriteFileStreaming ? (
|
{language === "markdown" && !hasMultipleArtifacts ? null : useWriteFileStreaming ? (
|
||||||
@@ -648,8 +606,7 @@ export function ArtifactFileDetail({
|
|||||||
) : (
|
) : (
|
||||||
<div className="truncate px-3">{getFileName(filepath)}</div>
|
<div className="truncate px-3">{getFileName(filepath)}</div>
|
||||||
)}
|
)}
|
||||||
</ArtifactTitle>
|
</ArtifactTitle>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex w-full items-center justify-center md:w-auto md:flex-1">
|
<div className="flex w-full items-center justify-center md:w-auto md:flex-1">
|
||||||
@@ -695,10 +652,10 @@ export function ArtifactFileDetail({
|
|||||||
<EyeIcon />
|
<EyeIcon />
|
||||||
</ToggleGroupItem>
|
</ToggleGroupItem>
|
||||||
</ToggleGroup>
|
</ToggleGroup>
|
||||||
{isPreviewStreaming && (
|
{isHtmlStreaming && (
|
||||||
<div className="animate-[sandbox-preview-badge_1.4s_ease-in-out_infinite] text-muted-foreground bg-muted/80 inline-flex items-center rounded-full border px-2.5 py-1 text-[11px]">
|
<div className="animate-[sandbox-preview-badge_1.4s_ease-in-out_infinite] text-muted-foreground bg-muted/80 inline-flex items-center rounded-full border px-2.5 py-1 text-[11px]">
|
||||||
<span className="bg-primary mr-2 size-1.5 animate-pulse rounded-full" />
|
<span className="bg-primary mr-2 size-1.5 animate-pulse rounded-full" />
|
||||||
正在生成，完成后自动预览
|
正在生成，完成后自动预览
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -23,34 +23,28 @@ import { useThread } from "../messages/context";
|
|||||||
import { useArtifacts } from "./context";
|
import { useArtifacts } from "./context";
|
||||||
import { SkillInstallDialog } from "./skill-install-dialog";
|
import { SkillInstallDialog } from "./skill-install-dialog";
|
||||||
|
|
||||||
export function ArtifactFileList({
|
export function ArtifactFileList({
|
||||||
className,
|
className,
|
||||||
files,
|
files,
|
||||||
threadId,
|
threadId,
|
||||||
onOpenArtifact,
|
}: {
|
||||||
}: {
|
className?: string;
|
||||||
className?: string;
|
files: string[];
|
||||||
files: string[];
|
threadId: string;
|
||||||
threadId: string;
|
}) {
|
||||||
onOpenArtifact?: (filepath: string) => void;
|
|
||||||
}) {
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { isMock, publicShareCode } = useThread();
|
const { isMock, publicShareCode } = useThread();
|
||||||
const { select: selectArtifact, setOpen } = useArtifacts();
|
const { select: selectArtifact, setOpen } = useArtifacts();
|
||||||
const [installFile, setInstallFile] = useState<string | null>(null);
|
const [installFile, setInstallFile] = useState<string | null>(null);
|
||||||
const [downloadingFile, setDownloadingFile] = useState<string | null>(null);
|
const [downloadingFile, setDownloadingFile] = useState<string | null>(null);
|
||||||
|
|
||||||
const handleClick = useCallback(
|
const handleClick = useCallback(
|
||||||
(filepath: string) => {
|
(filepath: string) => {
|
||||||
if (onOpenArtifact) {
|
selectArtifact(filepath);
|
||||||
onOpenArtifact(filepath);
|
setOpen(true);
|
||||||
return;
|
},
|
||||||
}
|
[selectArtifact, setOpen],
|
||||||
selectArtifact(filepath);
|
);
|
||||||
setOpen(true);
|
|
||||||
},
|
|
||||||
[onOpenArtifact, selectArtifact, setOpen],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleInstallSkill = useCallback(
|
const handleInstallSkill = useCallback(
|
||||||
(e: React.MouseEvent, filepath: string) => {
|
(e: React.MouseEvent, filepath: string) => {
|
||||||
|
|||||||
@@ -15,7 +15,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|||||||
import { apiFetch } from "@/core/api";
|
import { apiFetch } from "@/core/api";
|
||||||
import { getBackendBaseURL } from "@/core/config";
|
import { getBackendBaseURL } from "@/core/config";
|
||||||
import { isThreadRagModeLocked, useLocalSettings } from "@/core/settings";
|
import { isThreadRagModeLocked, useLocalSettings } from "@/core/settings";
|
||||||
import { isSingleRoundRagMessage } from "@/core/threads/use-single-round-rag";
|
|
||||||
import { useSkills } from "@/core/skills/hooks";
|
import { useSkills } from "@/core/skills/hooks";
|
||||||
import type { SkillDisplayConfig } from "@/core/skills/type";
|
import type { SkillDisplayConfig } from "@/core/skills/type";
|
||||||
import {
|
import {
|
||||||
@@ -93,13 +92,6 @@ const ChatBox: React.FC<{
|
|||||||
const [settings] = useLocalSettings();
|
const [settings] = useLocalSettings();
|
||||||
const ragModeEnabled =
|
const ragModeEnabled =
|
||||||
settings.display.ragModeEnabled || isThreadRagModeLocked(threadId);
|
settings.display.ragModeEnabled || isThreadRagModeLocked(threadId);
|
||||||
// Frontend single-round RAG writes its own source tool message, so it should
|
|
||||||
// use the same reference panel without changing the user's global RAG mode.
|
|
||||||
const hasSingleRoundRag = useMemo(
|
|
||||||
() => (thread.values.messages ?? []).some(isSingleRoundRagMessage),
|
|
||||||
[thread.values.messages],
|
|
||||||
);
|
|
||||||
const referencesEnabled = ragModeEnabled || hasSingleRoundRag;
|
|
||||||
const { skills } = useSkills();
|
const { skills } = useSkills();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@@ -114,11 +106,11 @@ const ChatBox: React.FC<{
|
|||||||
|
|
||||||
const [autoSelectFirstArtifact, setAutoSelectFirstArtifact] = useState(true);
|
const [autoSelectFirstArtifact, setAutoSelectFirstArtifact] = useState(true);
|
||||||
const skillDisplayMap = useMemo(
|
const skillDisplayMap = useMemo(
|
||||||
() => (referencesEnabled ? buildSkillDisplayMap(skills) : new Map()),
|
() => (ragModeEnabled ? buildSkillDisplayMap(skills) : new Map()),
|
||||||
[referencesEnabled, skills],
|
[ragModeEnabled, skills],
|
||||||
);
|
);
|
||||||
const fallbackReferenceBatches = useMemo(() => {
|
const fallbackReferenceBatches = useMemo(() => {
|
||||||
if (!referencesEnabled) {
|
if (!ragModeEnabled) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
return buildTurnReferenceBatches(
|
return buildTurnReferenceBatches(
|
||||||
@@ -126,9 +118,9 @@ const ChatBox: React.FC<{
|
|||||||
skillDisplayMap,
|
skillDisplayMap,
|
||||||
thread.isLoading,
|
thread.isLoading,
|
||||||
);
|
);
|
||||||
}, [referencesEnabled, skillDisplayMap, thread.isLoading, thread.values.messages]);
|
}, [ragModeEnabled, skillDisplayMap, thread.isLoading, thread.values.messages]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!referencesEnabled) {
|
if (!ragModeEnabled) {
|
||||||
setBackendReferenceBatches([]);
|
setBackendReferenceBatches([]);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -164,7 +156,7 @@ const ChatBox: React.FC<{
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
return () => controller.abort();
|
return () => controller.abort();
|
||||||
}, [referencesEnabled, thread.isLoading, threadId, thread.values.messages]);
|
}, [ragModeEnabled, thread.isLoading, threadId, thread.values.messages]);
|
||||||
const adaptedBackendReferenceBatches = useMemo(
|
const adaptedBackendReferenceBatches = useMemo(
|
||||||
() =>
|
() =>
|
||||||
adaptBackendReferenceBatches(
|
adaptBackendReferenceBatches(
|
||||||
@@ -183,7 +175,7 @@ const ChatBox: React.FC<{
|
|||||||
[adaptedBackendReferenceBatches, fallbackReferenceBatches],
|
[adaptedBackendReferenceBatches, fallbackReferenceBatches],
|
||||||
);
|
);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!referencesEnabled) {
|
if (!ragModeEnabled) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const signature = JSON.stringify({
|
const signature = JSON.stringify({
|
||||||
@@ -210,7 +202,7 @@ const ChatBox: React.FC<{
|
|||||||
fallbackBatches: debugReferenceBatches(fallbackReferenceBatches),
|
fallbackBatches: debugReferenceBatches(fallbackReferenceBatches),
|
||||||
finalBatches: debugReferenceBatches(referenceBatches),
|
finalBatches: debugReferenceBatches(referenceBatches),
|
||||||
});
|
});
|
||||||
}, [adaptedBackendReferenceBatches, backendReferenceBatches, fallbackReferenceBatches, referencesEnabled, referenceBatches, threadId]);
|
}, [adaptedBackendReferenceBatches, backendReferenceBatches, fallbackReferenceBatches, ragModeEnabled, referenceBatches, threadId]);
|
||||||
const latestReferenceBatch =
|
const latestReferenceBatch =
|
||||||
referenceBatches.length > 0
|
referenceBatches.length > 0
|
||||||
? referenceBatches[referenceBatches.length - 1]!
|
? referenceBatches[referenceBatches.length - 1]!
|
||||||
@@ -221,7 +213,7 @@ const ChatBox: React.FC<{
|
|||||||
const referenceSources = activeReferenceBatch?.sources ?? [];
|
const referenceSources = activeReferenceBatch?.sources ?? [];
|
||||||
const hasCitationReferences = referenceSources.length > 0;
|
const hasCitationReferences = referenceSources.length > 0;
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!referencesEnabled || !activeReferenceBatch) {
|
if (!ragModeEnabled || !activeReferenceBatch) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
logReferenceDebug("frontend-active-reference-batch-payload", threadId, {
|
logReferenceDebug("frontend-active-reference-batch-payload", threadId, {
|
||||||
@@ -230,7 +222,7 @@ const ChatBox: React.FC<{
|
|||||||
sourceCount: activeReferenceBatch.sources.length,
|
sourceCount: activeReferenceBatch.sources.length,
|
||||||
sources: activeReferenceBatch.sources.map(debugReferenceSource),
|
sources: activeReferenceBatch.sources.map(debugReferenceSource),
|
||||||
});
|
});
|
||||||
}, [activeReferenceBatch, referencesEnabled, threadId]);
|
}, [activeReferenceBatch, ragModeEnabled, threadId]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (hasCitationReferences) {
|
if (hasCitationReferences) {
|
||||||
setReferencesOpen(true);
|
setReferencesOpen(true);
|
||||||
|
|||||||
@@ -0,0 +1,204 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
BookOpenCheck,
|
||||||
|
Brain,
|
||||||
|
CalendarClock,
|
||||||
|
MessageSquare,
|
||||||
|
MessageSquarePlus,
|
||||||
|
PanelLeftClose,
|
||||||
|
PenLine,
|
||||||
|
Settings,
|
||||||
|
Sparkles,
|
||||||
|
UsersRound,
|
||||||
|
} from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
import type { MouseEvent } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
import { AgentBrandIcon } from "./agents/agent-brand-icon";
|
||||||
|
import { RecentChatList } from "./recent-chat-list";
|
||||||
|
import { WorkspaceNavMenu } from "./workspace-nav-menu";
|
||||||
|
|
||||||
|
const NEW_CHAT_PATH = "/page/workspace/chats/new";
|
||||||
|
|
||||||
|
type NavItem = {
|
||||||
|
label: string;
|
||||||
|
href: string;
|
||||||
|
icon: typeof MessageSquare;
|
||||||
|
match: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const NAV_ITEMS: NavItem[] = [
|
||||||
|
{ label: "新建对话", href: NEW_CHAT_PATH, icon: MessageSquarePlus, match: NEW_CHAT_PATH },
|
||||||
|
{ label: "对话", href: "/page/workspace/chats", icon: MessageSquare, match: "/page/workspace/chats" },
|
||||||
|
{ label: "智能体", href: "/page/workspace/agents", icon: Sparkles, match: "/page/workspace/agents" },
|
||||||
|
{ label: "技能", href: "/page/workspace/skills", icon: Sparkles, match: "/page/workspace/skills" },
|
||||||
|
{ label: "记忆", href: "/page/workspace/memory", icon: Brain, match: "/page/workspace/memory" },
|
||||||
|
{ label: "AI 写作", href: "/page/workspace/ai-writing", icon: PenLine, match: "/page/workspace/ai-writing" },
|
||||||
|
{
|
||||||
|
label: "多智能体规划",
|
||||||
|
href: "/page/workspace/roundtable/planning",
|
||||||
|
icon: UsersRound,
|
||||||
|
match: "/page/workspace/roundtable",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "定时任务",
|
||||||
|
href: "/page/workspace/scheduled/tasks",
|
||||||
|
icon: CalendarClock,
|
||||||
|
match: "/page/workspace/scheduled",
|
||||||
|
},
|
||||||
|
{ label: "问答梳理", href: "/page/workspace/knowledge", icon: BookOpenCheck, match: "/page/workspace/knowledge" },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export function CmChatSidebar({
|
||||||
|
onCollapse,
|
||||||
|
collapsed = false,
|
||||||
|
}: {
|
||||||
|
onCollapse?: () => void;
|
||||||
|
collapsed?: boolean;
|
||||||
|
}) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleNewChat = (event: MouseEvent<HTMLAnchorElement>) => {
|
||||||
|
if (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1) return;
|
||||||
|
event.preventDefault();
|
||||||
|
navigate(NEW_CHAT_PATH, { replace: true, state: { resetAt: Date.now() } });
|
||||||
|
};
|
||||||
|
|
||||||
|
if (collapsed) {
|
||||||
|
return (
|
||||||
|
<aside className="flex h-full min-h-0 w-14 flex-col border-r border-slate-200/80 bg-white text-slate-700 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onCollapse}
|
||||||
|
aria-label="展开侧边栏"
|
||||||
|
title="展开侧边栏"
|
||||||
|
className="mx-auto mt-2 flex size-11 shrink-0 items-center justify-center rounded-xl transition-colors hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-slate-900"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/cm-assistant-logo.png"
|
||||||
|
alt="CM 助手"
|
||||||
|
className="size-10 object-contain"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<div className="mx-2 mt-2 h-px shrink-0 bg-slate-200/80 dark:bg-slate-800" />
|
||||||
|
|
||||||
|
<nav className="flex shrink-0 flex-col items-center gap-1 px-2 py-3" aria-label="工作台导航">
|
||||||
|
{NAV_ITEMS.map((item) => {
|
||||||
|
const active = item.href === NEW_CHAT_PATH
|
||||||
|
? pathname === NEW_CHAT_PATH
|
||||||
|
: item.href === "/page/workspace/chats"
|
||||||
|
? pathname.startsWith(item.match) && pathname !== NEW_CHAT_PATH
|
||||||
|
: pathname.startsWith(item.match);
|
||||||
|
const Icon = item.icon;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
onClick={item.href === NEW_CHAT_PATH ? handleNewChat : undefined}
|
||||||
|
aria-current={active ? "page" : undefined}
|
||||||
|
aria-label={item.label}
|
||||||
|
title={item.label}
|
||||||
|
className={cn(
|
||||||
|
"flex size-10 items-center justify-center rounded-xl transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40",
|
||||||
|
active
|
||||||
|
? "bg-[#edf4ff] text-[#165ee8] dark:bg-blue-500/15 dark:text-blue-300"
|
||||||
|
: "text-slate-600 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-white",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.href === "/page/workspace/agents" ? (
|
||||||
|
<AgentBrandIcon size="nav" />
|
||||||
|
) : (
|
||||||
|
<Icon className="size-[19px]" strokeWidth={1.8} />
|
||||||
|
)}
|
||||||
|
<span className="sr-only">{item.label}</span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="mt-auto flex shrink-0 justify-center border-t border-slate-200/80 py-3 dark:border-slate-800">
|
||||||
|
<Link
|
||||||
|
href="/page/workspace/settings"
|
||||||
|
aria-label="设置和更多"
|
||||||
|
title="设置和更多"
|
||||||
|
className="flex size-10 items-center justify-center rounded-xl text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<Settings className="size-[19px]" strokeWidth={1.8} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-full min-h-0 flex-col overflow-hidden border-r border-slate-200/80 bg-white text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-100">
|
||||||
|
<div className="flex shrink-0 items-center gap-2 px-6 pt-4 pb-3">
|
||||||
|
<Link href={NEW_CHAT_PATH} className="flex min-w-0 flex-1 items-center gap-3.5 outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40">
|
||||||
|
<img
|
||||||
|
src="/cm-assistant-logo.png"
|
||||||
|
alt="CM 助手"
|
||||||
|
className="size-10 shrink-0 object-contain"
|
||||||
|
/>
|
||||||
|
<span className="truncate text-[20px] font-semibold tracking-[-0.025em]">CM 助手</span>
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onCollapse}
|
||||||
|
aria-label="收起侧边栏"
|
||||||
|
title="收起侧边栏"
|
||||||
|
className="flex size-8 shrink-0 items-center justify-center rounded-md text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-slate-900 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<PanelLeftClose className="size-[18px]" strokeWidth={1.8} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="shrink-0 px-4 pt-1" aria-label="工作台导航">
|
||||||
|
<div className="space-y-1">
|
||||||
|
{NAV_ITEMS.map((item) => {
|
||||||
|
const active = item.href === NEW_CHAT_PATH
|
||||||
|
? pathname === NEW_CHAT_PATH
|
||||||
|
: item.href === "/page/workspace/chats"
|
||||||
|
? pathname.startsWith(item.match) && pathname !== NEW_CHAT_PATH
|
||||||
|
: pathname.startsWith(item.match);
|
||||||
|
const Icon = item.icon;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
onClick={item.href === NEW_CHAT_PATH ? handleNewChat : undefined}
|
||||||
|
aria-current={active ? "page" : undefined}
|
||||||
|
className={cn(
|
||||||
|
"flex h-11 items-center gap-3 rounded-xl px-4 text-[14px] font-medium transition-colors",
|
||||||
|
active
|
||||||
|
? "bg-[#edf4ff] text-[#165ee8] dark:bg-blue-500/15 dark:text-blue-300"
|
||||||
|
: "text-slate-600 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-white",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.href === "/page/workspace/agents" ? (
|
||||||
|
<AgentBrandIcon size="nav" />
|
||||||
|
) : (
|
||||||
|
<Icon className="size-[18px] shrink-0" strokeWidth={1.8} />
|
||||||
|
)}
|
||||||
|
<span>{item.label}</span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="min-h-0 flex-1 overflow-y-auto px-1">
|
||||||
|
<RecentChatList compact limit={5} moreHref="/page/workspace/chats" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="shrink-0 border-t border-slate-200/80 px-3 py-3 dark:border-slate-800">
|
||||||
|
<WorkspaceNavMenu />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,12 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
import { useTheme } from "@/contexts/ThemeContext";
|
|
||||||
import { getWelcomeBrandAsset } from "@/core/branding/brand-assets";
|
|
||||||
import { readRuntimeFlag } from "@/env";
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { useDisplayDesensitizer } from "@/core/sensitive-words/use-display-desensitizer";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 紧凑模式（正常 App）新对话落地页的品牌欢迎块 —— 按 CM-assistant 参考图重画。
|
* 紧凑模式（正常 App）新对话落地页的品牌欢迎块 —— 按 CM-assistant 参考图重画。
|
||||||
@@ -14,63 +8,18 @@ import { useDisplayDesensitizer } from "@/core/sensitive-words/use-display-desen
|
|||||||
* 非紧凑模式仍用 <Welcome/>，本组件不参与。
|
* 非紧凑模式仍用 <Welcome/>，本组件不参与。
|
||||||
*/
|
*/
|
||||||
export function CompactWelcome({ className }: { className?: string }) {
|
export function CompactWelcome({ className }: { className?: string }) {
|
||||||
const desensitizeText = useDisplayDesensitizer();
|
|
||||||
const { theme } = useTheme();
|
|
||||||
const brandTheme = theme;
|
|
||||||
const welcomeLogo = getWelcomeBrandAsset(brandTheme);
|
|
||||||
const [failedWelcomeLogo, setFailedWelcomeLogo] = useState<string | null>(null);
|
|
||||||
const shouldShowWelcomeLogo =
|
|
||||||
Boolean(welcomeLogo) && failedWelcomeLogo !== welcomeLogo;
|
|
||||||
const isWelcomeLogoVisible = readRuntimeFlag("VITE_WELCOME_LOGO_VISIBLE");
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"mx-auto flex w-full flex-col items-center justify-center text-center select-none",
|
"mx-auto flex w-full flex-col items-center justify-center text-center",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{/* CM logo：浅底圆环 + 主色渐变圆角方块 */}
|
<h1 className="flex items-center justify-center text-[34px] font-semibold tracking-[-0.035em] text-slate-950 dark:text-slate-50">
|
||||||
{/* Controlled by VITE_WELCOME_LOGO_VISIBLE in runtime-config.js. */}
|
你好，欢迎使用 CM 助手
|
||||||
{isWelcomeLogoVisible && (
|
|
||||||
<div
|
|
||||||
className="mb-3.5 inline-flex items-center justify-center rounded-full p-3"
|
|
||||||
style={{
|
|
||||||
backgroundColor:
|
|
||||||
"rgb(var(--legacy-workspace-brand-rgb) / 5%)",
|
|
||||||
border:
|
|
||||||
"1px solid rgb(var(--legacy-workspace-brand-rgb) / 12%)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{shouldShowWelcomeLogo && welcomeLogo ? (
|
|
||||||
<img
|
|
||||||
src={welcomeLogo}
|
|
||||||
alt=""
|
|
||||||
aria-hidden="true"
|
|
||||||
className="size-16 object-contain"
|
|
||||||
onError={() => setFailedWelcomeLogo(welcomeLogo)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
className="flex size-14 items-center justify-center rounded-2xl shadow-md"
|
|
||||||
style={{
|
|
||||||
backgroundImage:
|
|
||||||
"linear-gradient(to top right, var(--workspace-brand), var(--brand-200))",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className="text-2xl font-black tracking-wide text-white italic">
|
|
||||||
{desensitizeText("CM")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<h1 className="flex items-center justify-center text-2xl font-bold tracking-tight text-foreground/90">
|
|
||||||
{desensitizeText("欢迎使用CM助手")}
|
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-muted-foreground mx-auto mt-2 max-w-sm text-xs leading-relaxed">
|
<p className="mx-auto mt-2.5 max-w-xl text-[15px] leading-6 text-slate-500 dark:text-slate-400">
|
||||||
基于先进深度推理模型，为您提供高效的市场分析、专业报告撰写、调研设计与协同脑暴支持。
|
我可以帮你写作、问答、分析和规划各类内容，让工作更高效
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -46,10 +46,12 @@ export function CustomPromptBar({
|
|||||||
onInsert,
|
onInsert,
|
||||||
className,
|
className,
|
||||||
currentAgentId,
|
currentAgentId,
|
||||||
|
compact = false,
|
||||||
}: {
|
}: {
|
||||||
onInsert: (content: string) => void;
|
onInsert: (content: string) => void;
|
||||||
className?: string;
|
className?: string;
|
||||||
currentAgentId?: string | null;
|
currentAgentId?: string | null;
|
||||||
|
compact?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const allPrompts = useCustomPrompts();
|
const allPrompts = useCustomPrompts();
|
||||||
const prompts = allPrompts.filter(
|
const prompts = allPrompts.filter(
|
||||||
@@ -81,7 +83,13 @@ export function CustomPromptBar({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={cn("flex min-w-0 items-center gap-1", className)}>
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex min-w-0 items-center gap-1",
|
||||||
|
compact && "min-h-9 justify-end",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
{prompts.length > 0 && (
|
{prompts.length > 0 && (
|
||||||
<>
|
<>
|
||||||
{overflowing && (
|
{overflowing && (
|
||||||
@@ -111,6 +119,7 @@ export function CustomPromptBar({
|
|||||||
title={prompt.content}
|
title={prompt.content}
|
||||||
className={cn(
|
className={cn(
|
||||||
"border-border/60 bg-muted/40 text-foreground/80 hover:bg-muted hover:text-foreground hover:border-border max-w-[200px] shrink-0 truncate rounded-full border px-3 py-1 text-xs font-medium shadow-sm transition-colors",
|
"border-border/60 bg-muted/40 text-foreground/80 hover:bg-muted hover:text-foreground hover:border-border max-w-[200px] shrink-0 truncate rounded-full border px-3 py-1 text-xs font-medium shadow-sm transition-colors",
|
||||||
|
compact && "border-slate-200 bg-white px-3.5 py-1.5 text-[12px] text-slate-600 shadow-none hover:border-blue-200 hover:bg-blue-50/60 hover:text-blue-700",
|
||||||
"dark:border-slate-600/70 dark:bg-slate-700/40 dark:text-slate-200 dark:hover:bg-slate-700",
|
"dark:border-slate-600/70 dark:bg-slate-700/40 dark:text-slate-200 dark:hover:bg-slate-700",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -139,7 +148,11 @@ export function CustomPromptBar({
|
|||||||
type="button"
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="text-muted-foreground hover:text-foreground hover:bg-muted/70 h-7 w-7 shrink-0 rounded-full"
|
className={cn(
|
||||||
|
"text-muted-foreground hover:text-foreground hover:bg-muted/70 h-7 w-7 shrink-0 rounded-full",
|
||||||
|
compact &&
|
||||||
|
"h-9 w-9 rounded-xl border border-slate-200 bg-white text-slate-600 shadow-[0_6px_18px_-14px_rgba(15,23,42,0.4)] hover:border-blue-200 hover:bg-blue-50 hover:text-blue-700 dark:border-slate-700 dark:bg-slate-900",
|
||||||
|
)}
|
||||||
title="管理常用提示词"
|
title="管理常用提示词"
|
||||||
aria-label="管理常用提示词"
|
aria-label="管理常用提示词"
|
||||||
onClick={() => setManageOpen(true)}
|
onClick={() => setManageOpen(true)}
|
||||||
|
|||||||
@@ -83,7 +83,6 @@ import {
|
|||||||
sortThreadsPinnedFirst,
|
sortThreadsPinnedFirst,
|
||||||
titleOfThread,
|
titleOfThread,
|
||||||
} from "@/core/threads/utils";
|
} from "@/core/threads/utils";
|
||||||
import { buildFullChatNavigationPath } from "@/core/page-layout/chats-iframe-route";
|
|
||||||
import { env } from "@/env";
|
import { env } from "@/env";
|
||||||
import { desensitize } from "@/lib/desensitize";
|
import { desensitize } from "@/lib/desensitize";
|
||||||
import { isIMEComposing } from "@/lib/ime";
|
import { isIMEComposing } from "@/lib/ime";
|
||||||
@@ -186,24 +185,15 @@ export function GeneralQaSidebar() {
|
|||||||
// 当前嵌入的智能体（URL 上的 ?agent=）：用于高亮对应卡片。
|
// 当前嵌入的智能体（URL 上的 ?agent=）：用于高亮对应卡片。
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const activeAgentId = searchParams.get("agent");
|
const activeAgentId = searchParams.get("agent");
|
||||||
const currentSearch = searchParams.toString();
|
|
||||||
const newChatHref = buildFullChatNavigationPath(NEW_CHAT_PATH, currentSearch);
|
|
||||||
const moreAgentsHref = buildFullChatNavigationPath(MORE_AGENTS_HREF, currentSearch);
|
|
||||||
const moreChatsHref = buildFullChatNavigationPath(MORE_CHATS_HREF, currentSearch);
|
|
||||||
|
|
||||||
// 点击常用智能体 = 在通用问答右侧**原地嵌入**该智能体的对话页：停留在 /chats/new，
|
// 点击常用智能体 = 在通用问答右侧**原地嵌入**该智能体的对话页：停留在 /chats/new，
|
||||||
// 仅给 URL 加 ?agent=<id>，由 NewChatContent 把右侧问答区换成 AgentChatPage。
|
// 仅给 URL 加 ?agent=<id>，由 NewChatContent 把右侧问答区换成 AgentChatPage。
|
||||||
// 不跳转独立页面、左侧栏不变。每次点击都重开一个干净会话（NewChatContent 的 key）。
|
// 不跳转独立页面、左侧栏不变。每次点击都重开一个干净会话（NewChatContent 的 key）。
|
||||||
const handleSelectAgent = useCallback(
|
const handleSelectAgent = useCallback(
|
||||||
(agentId: string) => {
|
(agentId: string) => {
|
||||||
navigate(
|
navigate(`/page/workspace/chats/new?agent=${encodeURIComponent(agentId)}`);
|
||||||
buildFullChatNavigationPath(
|
|
||||||
`${NEW_CHAT_PATH}?agent=${encodeURIComponent(agentId)}`,
|
|
||||||
currentSearch,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
[currentSearch, navigate],
|
[navigate],
|
||||||
);
|
);
|
||||||
|
|
||||||
// ── 最近的对话取数 + 搜索 ──
|
// ── 最近的对话取数 + 搜索 ──
|
||||||
@@ -251,7 +241,7 @@ export function GeneralQaSidebar() {
|
|||||||
const handleNewChatClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
|
const handleNewChatClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
|
||||||
if (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1) return;
|
if (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1) return;
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
navigate(newChatHref, { replace: true, state: { resetAt: Date.now() } });
|
navigate(NEW_CHAT_PATH, { replace: true, state: { resetAt: Date.now() } });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDelete = useCallback(
|
const handleDelete = useCallback(
|
||||||
@@ -267,17 +257,10 @@ export function GeneralQaSidebar() {
|
|||||||
nextThreadPath = listPathOfThread(threads[threadIndex - 1]!);
|
nextThreadPath = listPathOfThread(threads[threadIndex - 1]!);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
void router.push(buildFullChatNavigationPath(nextThreadPath, currentSearch));
|
void router.push(nextThreadPath);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[
|
[agentIdFromPath, deleteThread, router, threadIdFromPath, threads],
|
||||||
agentIdFromPath,
|
|
||||||
currentSearch,
|
|
||||||
deleteThread,
|
|
||||||
router,
|
|
||||||
threadIdFromPath,
|
|
||||||
threads,
|
|
||||||
],
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleRenameClick = useCallback((threadId: string, currentTitle: string) => {
|
const handleRenameClick = useCallback((threadId: string, currentTitle: string) => {
|
||||||
@@ -331,11 +314,11 @@ export function GeneralQaSidebar() {
|
|||||||
底色用「主色混入透明」=主色低透明度叠在当前侧栏底色上，浅/红/蓝/深蓝主题都自适应
|
底色用「主色混入透明」=主色低透明度叠在当前侧栏底色上，浅/红/蓝/深蓝主题都自适应
|
||||||
（不要混 white，否则深蓝主题下会变成浅色块）。 */}
|
（不要混 white，否则深蓝主题下会变成浅色块）。 */}
|
||||||
<Link
|
<Link
|
||||||
href={newChatHref}
|
href={NEW_CHAT_PATH}
|
||||||
onClick={handleNewChatClick}
|
onClick={handleNewChatClick}
|
||||||
style={{ borderColor: "var(--primary)", color: "var(--primary)" }}
|
style={{ borderColor: "var(--primary)", color: "var(--primary)" }}
|
||||||
className={cn(
|
className={cn(
|
||||||
"gq-new-chat-button flex h-10 min-w-0 flex-1 items-center justify-center gap-1.5 rounded-[5px] text-[14px] font-semibold transition-colors",
|
"flex h-10 min-w-0 flex-1 items-center justify-center gap-1.5 rounded-[5px] text-[14px] font-semibold transition-colors",
|
||||||
"border border-solid",
|
"border border-solid",
|
||||||
"bg-[rgb(var(--legacy-primary-rgb)/14%)] hover:bg-[rgb(var(--legacy-primary-rgb)/24%)]",
|
"bg-[rgb(var(--legacy-primary-rgb)/14%)] hover:bg-[rgb(var(--legacy-primary-rgb)/24%)]",
|
||||||
)}
|
)}
|
||||||
@@ -359,7 +342,7 @@ export function GeneralQaSidebar() {
|
|||||||
<div className="mt-1 flex flex-col gap-1">
|
<div className="mt-1 flex flex-col gap-1">
|
||||||
{frequent.map((agent) => {
|
{frequent.map((agent) => {
|
||||||
const isActive = activeAgentId === agent.id;
|
const isActive = activeAgentId === agent.id;
|
||||||
const { from, to, foreground } = agentColor(agent.id, theme);
|
const { from, to } = agentColor(agent.id, isDark);
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
key={agent.id}
|
key={agent.id}
|
||||||
@@ -383,10 +366,7 @@ export function GeneralQaSidebar() {
|
|||||||
isActive &&
|
isActive &&
|
||||||
"ring-2 ring-[#83c1ff]/35 shadow-[0_0_18px_rgba(43,143,254,0.45)]",
|
"ring-2 ring-[#83c1ff]/35 shadow-[0_0_18px_rgba(43,143,254,0.45)]",
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{ backgroundImage: `linear-gradient(135deg, ${from}, ${to})` }}
|
||||||
backgroundImage: `linear-gradient(135deg, ${from}, ${to})`,
|
|
||||||
color: foreground,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Bot className="size-[19px]" />
|
<Bot className="size-[19px]" />
|
||||||
</span>
|
</span>
|
||||||
@@ -432,7 +412,7 @@ export function GeneralQaSidebar() {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<Link
|
<Link
|
||||||
href={moreAgentsHref}
|
href={MORE_AGENTS_HREF}
|
||||||
className="flex items-center justify-between rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground/70 transition-colors hover:bg-accent/50 hover:text-foreground"
|
className="flex items-center justify-between rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground/70 transition-colors hover:bg-accent/50 hover:text-foreground"
|
||||||
>
|
>
|
||||||
<span>{t.common.more}</span>
|
<span>{t.common.more}</span>
|
||||||
@@ -471,10 +451,7 @@ export function GeneralQaSidebar() {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
filteredThreads.map((thread) => {
|
filteredThreads.map((thread) => {
|
||||||
const href = buildFullChatNavigationPath(
|
const href = listPathOfThread(thread);
|
||||||
listPathOfThread(thread),
|
|
||||||
currentSearch,
|
|
||||||
);
|
|
||||||
const isActive = href === pathname;
|
const isActive = href === pathname;
|
||||||
const isBoot = isBootstrapThread(thread);
|
const isBoot = isBootstrapThread(thread);
|
||||||
const pinned = isThreadPinned(thread);
|
const pinned = isThreadPinned(thread);
|
||||||
@@ -487,9 +464,9 @@ export function GeneralQaSidebar() {
|
|||||||
<Link
|
<Link
|
||||||
href={href}
|
href={href}
|
||||||
className={cn(
|
className={cn(
|
||||||
"gq-history-item relative flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg px-2.5 text-[13px] transition-colors",
|
"relative flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg px-2.5 text-[13px] transition-colors",
|
||||||
isActive
|
isActive
|
||||||
? "gq-history-item--active border border-primary/40 bg-primary/5 font-medium text-primary"
|
? "border border-primary/40 bg-primary/5 font-medium text-primary"
|
||||||
: "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
|
: "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -596,7 +573,7 @@ export function GeneralQaSidebar() {
|
|||||||
)}
|
)}
|
||||||
{!query && (
|
{!query && (
|
||||||
<Link
|
<Link
|
||||||
href={moreChatsHref}
|
href={MORE_CHATS_HREF}
|
||||||
className="mt-0.5 flex items-center justify-between rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground/70 transition-colors hover:bg-accent/50 hover:text-foreground"
|
className="mt-0.5 flex items-center justify-between rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground/70 transition-colors hover:bg-accent/50 hover:text-foreground"
|
||||||
>
|
>
|
||||||
<span>更多最近对话</span>
|
<span>更多最近对话</span>
|
||||||
|
|||||||
@@ -1,16 +1,20 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import type { ChatStatus } from "ai";
|
import type { ChatStatus } from "ai";
|
||||||
import {
|
import {
|
||||||
BrainCircuitIcon,
|
BarChart3Icon,
|
||||||
BookMarkedIcon,
|
BrainCircuitIcon,
|
||||||
CheckIcon,
|
BookMarkedIcon,
|
||||||
FileTextIcon,
|
CheckIcon,
|
||||||
GraduationCapIcon,
|
ClipboardCheckIcon,
|
||||||
LightbulbIcon,
|
FileTextIcon,
|
||||||
PaperclipIcon,
|
GraduationCapIcon,
|
||||||
PlusIcon,
|
LightbulbIcon,
|
||||||
ShrinkIcon,
|
MessageCircleQuestionIcon,
|
||||||
|
PaperclipIcon,
|
||||||
|
PlusIcon,
|
||||||
|
RefreshCwIcon,
|
||||||
|
ShrinkIcon,
|
||||||
SparklesIcon,
|
SparklesIcon,
|
||||||
RocketIcon,
|
RocketIcon,
|
||||||
XIcon,
|
XIcon,
|
||||||
@@ -22,10 +26,9 @@ import {
|
|||||||
useEffect,
|
useEffect,
|
||||||
useMemo,
|
useMemo,
|
||||||
useRef,
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
type ComponentProps,
|
type ComponentProps,
|
||||||
type ReactNode,
|
} from "react";
|
||||||
} from "react";
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
PromptInput,
|
PromptInput,
|
||||||
@@ -65,7 +68,6 @@ import { getBackendBaseURL } from "@/core/config";
|
|||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
import { isHiddenFromUIMessage } from "@/core/messages/utils";
|
import { isHiddenFromUIMessage } from "@/core/messages/utils";
|
||||||
import { useModels } from "@/core/models/hooks";
|
import { useModels } from "@/core/models/hooks";
|
||||||
import type { Model } from "@/core/models/types";
|
|
||||||
import type { AgentThreadContext } from "@/core/threads";
|
import type { AgentThreadContext } from "@/core/threads";
|
||||||
import { textOfMessage } from "@/core/threads/utils";
|
import { textOfMessage } from "@/core/threads/utils";
|
||||||
import { desensitize } from "@/lib/desensitize";
|
import { desensitize } from "@/lib/desensitize";
|
||||||
@@ -104,7 +106,58 @@ import { useThread } from "./messages/context";
|
|||||||
import { ModeHoverGuide } from "./mode-hover-guide";
|
import { ModeHoverGuide } from "./mode-hover-guide";
|
||||||
import { Tooltip } from "./tooltip";
|
import { Tooltip } from "./tooltip";
|
||||||
|
|
||||||
type InputMode = "flash" | "thinking" | "pro" | "ultra";
|
type InputMode = "flash" | "thinking" | "pro" | "ultra";
|
||||||
|
|
||||||
|
const COMPACT_QUICK_STARTS = [
|
||||||
|
{
|
||||||
|
id: "report",
|
||||||
|
title: "撰写报告",
|
||||||
|
content: "请帮我撰写一份结构清晰的专业报告，先向我确认主题、受众和篇幅要求。",
|
||||||
|
icon: FileTextIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "knowledge",
|
||||||
|
title: "知识问答",
|
||||||
|
content: "请基于已有资料回答我的问题，并明确区分已知事实、推断和需要补充的信息。",
|
||||||
|
icon: MessageCircleQuestionIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "planning",
|
||||||
|
title: "任务规划",
|
||||||
|
content: "请把我的目标拆解为可执行的任务计划，列出优先级、里程碑和风险。",
|
||||||
|
icon: ClipboardCheckIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "analysis",
|
||||||
|
title: "数据分析",
|
||||||
|
content: "请帮我分析数据中的关键趋势、异常和可能原因，并给出下一步验证建议。",
|
||||||
|
icon: BarChart3Icon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "solution",
|
||||||
|
title: "方案策划",
|
||||||
|
content: "请围绕我的目标设计一套完整方案，包含背景、目标、实施步骤、资源需求和风险预案。",
|
||||||
|
icon: LightbulbIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "summary",
|
||||||
|
title: "内容总结",
|
||||||
|
content: "请提炼我提供内容的核心观点、关键结论和待办事项，并按重要程度整理。",
|
||||||
|
icon: BookMarkedIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "research",
|
||||||
|
title: "调研提纲",
|
||||||
|
content: "请根据我的调研主题生成一份结构完整的调研提纲，覆盖对象、问题、方法和输出形式。",
|
||||||
|
icon: GraduationCapIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "polish",
|
||||||
|
title: "文案润色",
|
||||||
|
content: "请在不改变原意的前提下润色我提供的内容，使表达更清晰、专业、简洁。",
|
||||||
|
icon: SparklesIcon,
|
||||||
|
},
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
|
||||||
function getResolvedMode(
|
function getResolvedMode(
|
||||||
@@ -134,11 +187,9 @@ export function InputBox({
|
|||||||
onFollowupsVisibilityChange,
|
onFollowupsVisibilityChange,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
onStop,
|
onStop,
|
||||||
promptPrefix,
|
promptPrefix,
|
||||||
agentSelector,
|
agentSelector,
|
||||||
knowledgeSelector,
|
assistantId,
|
||||||
extraModels = [],
|
|
||||||
assistantId,
|
|
||||||
hideAdminRecommendedQuestions,
|
hideAdminRecommendedQuestions,
|
||||||
compact,
|
compact,
|
||||||
...props
|
...props
|
||||||
@@ -194,25 +245,16 @@ export function InputBox({
|
|||||||
* homepage (``ChatPage``) passes this; ``AgentChatPage`` omits it because the
|
* homepage (``ChatPage``) passes this; ``AgentChatPage`` omits it because the
|
||||||
* thread is already bound to one agent.
|
* thread is already bound to one agent.
|
||||||
*/
|
*/
|
||||||
agentSelector?: {
|
agentSelector?: {
|
||||||
selectedAgentId: string | null;
|
selectedAgentId: string | null;
|
||||||
onAgentChange: (agentId: string | null) => void;
|
onAgentChange: (agentId: string | null) => void;
|
||||||
};
|
};
|
||||||
/** WeKnora-style knowledge-space picker rendered inside the composer toolbar. */
|
}) {
|
||||||
knowledgeSelector?: ReactNode;
|
|
||||||
/** Page-scoped model choices implemented outside the DeerFlow model API. */
|
|
||||||
extraModels?: Model[];
|
|
||||||
}) {
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const [localSettings, setLocalSettings] = useLocalSettings();
|
const [localSettings, setLocalSettings] = useLocalSettings();
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const [modelDialogOpen, setModelDialogOpen] = useState(false);
|
const [modelDialogOpen, setModelDialogOpen] = useState(false);
|
||||||
const { models } = useModels();
|
const { models } = useModels();
|
||||||
const singleRoundRagActive =
|
|
||||||
context.execution_profile === "single_round_rag";
|
|
||||||
const modelOptions = useMemo(() => {
|
|
||||||
return singleRoundRagActive ? extraModels : models;
|
|
||||||
}, [extraModels, models, singleRoundRagActive]);
|
|
||||||
const { thread, isMock } = useThread();
|
const { thread, isMock } = useThread();
|
||||||
const { textInput } = usePromptInputController();
|
const { textInput } = usePromptInputController();
|
||||||
const promptRootRef = useRef<HTMLDivElement | null>(null);
|
const promptRootRef = useRef<HTMLDivElement | null>(null);
|
||||||
@@ -223,58 +265,77 @@ export function InputBox({
|
|||||||
const lastGeneratedForAiIdRef = useRef<string | null>(null);
|
const lastGeneratedForAiIdRef = useRef<string | null>(null);
|
||||||
const wasStreamingRef = useRef(false);
|
const wasStreamingRef = useRef(false);
|
||||||
|
|
||||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||||
|
const [compactPromptOrder, setCompactPromptOrder] = useState(0);
|
||||||
const [pendingSuggestion, setPendingSuggestion] = useState<string | null>(
|
const [pendingSuggestion, setPendingSuggestion] = useState<string | null>(
|
||||||
null,
|
null,
|
||||||
);
|
);
|
||||||
|
|
||||||
const { questions: recommendedQuestions } = useRecommendedQuestions();
|
const { questions: recommendedQuestions } = useRecommendedQuestions();
|
||||||
const userPreferences = useUserPreferences();
|
const userPreferences = useUserPreferences();
|
||||||
const showAdminRecommendedQuestions =
|
const showAdminRecommendedQuestions =
|
||||||
!hideAdminRecommendedQuestions &&
|
!hideAdminRecommendedQuestions &&
|
||||||
!userPreferences.hide_admin_prompt_prefix &&
|
!userPreferences.hide_admin_prompt_prefix &&
|
||||||
recommendedQuestions.length > 0;
|
recommendedQuestions.length > 0;
|
||||||
|
const compactQuickStarts = useMemo(() => {
|
||||||
|
if (!hideAdminRecommendedQuestions && recommendedQuestions.length > 0) {
|
||||||
|
return recommendedQuestions.map((configured, index) => {
|
||||||
|
const fallback =
|
||||||
|
COMPACT_QUICK_STARTS[index % COMPACT_QUICK_STARTS.length]!;
|
||||||
|
return {
|
||||||
|
...fallback,
|
||||||
|
id: configured.id,
|
||||||
|
title: desensitize(configured.title) || `提示词 ${index + 1}`,
|
||||||
|
content: configured.content || fallback.content,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return [...COMPACT_QUICK_STARTS];
|
||||||
|
}, [hideAdminRecommendedQuestions, recommendedQuestions]);
|
||||||
|
const orderedCompactQuickStarts = useMemo(() => {
|
||||||
|
if (compactQuickStarts.length < 2) return compactQuickStarts;
|
||||||
|
const offset = compactPromptOrder % compactQuickStarts.length;
|
||||||
|
return [
|
||||||
|
...compactQuickStarts.slice(offset),
|
||||||
|
...compactQuickStarts.slice(0, offset),
|
||||||
|
];
|
||||||
|
}, [compactPromptOrder, compactQuickStarts]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (modelOptions.length === 0) {
|
if (models.length === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const currentModel = modelOptions.find((m) => m.name === context.model_name);
|
const currentModel = models.find((m) => m.name === context.model_name);
|
||||||
const fallbackModel = currentModel ?? modelOptions[0]!;
|
const fallbackModel = currentModel ?? models[0]!;
|
||||||
const supportsThinking = fallbackModel.supports_thinking ?? false;
|
const supportsThinking = fallbackModel.supports_thinking ?? false;
|
||||||
const nextModelName = fallbackModel.name;
|
const nextModelName = fallbackModel.name;
|
||||||
const nextMode = getResolvedMode(context.mode, supportsThinking);
|
const nextMode = getResolvedMode(context.mode, supportsThinking);
|
||||||
|
|
||||||
if (
|
if (context.model_name === nextModelName && context.mode === nextMode) {
|
||||||
context.model_name === nextModelName &&
|
return;
|
||||||
context.mode === nextMode &&
|
}
|
||||||
context.execution_profile === fallbackModel.execution_profile
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
onContextChange?.({
|
onContextChange?.({
|
||||||
...context,
|
...context,
|
||||||
model_name: nextModelName,
|
model_name: nextModelName,
|
||||||
mode: nextMode,
|
mode: nextMode,
|
||||||
execution_profile: fallbackModel.execution_profile,
|
});
|
||||||
});
|
}, [context, models, onContextChange]);
|
||||||
}, [context, modelOptions, onContextChange]);
|
|
||||||
|
|
||||||
const selectedModel = useMemo(() => {
|
|
||||||
if (modelOptions.length === 0) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
return modelOptions.find((m) => m.name === context.model_name) ?? modelOptions[0];
|
|
||||||
}, [context.model_name, modelOptions]);
|
|
||||||
|
|
||||||
const resolvedModelName = selectedModel?.name;
|
const selectedModel = useMemo(() => {
|
||||||
const selectedSingleRoundRag = singleRoundRagActive;
|
if (models.length === 0) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return models.find((m) => m.name === context.model_name) ?? models[0];
|
||||||
|
}, [context.model_name, models]);
|
||||||
|
|
||||||
const supportThinking = useMemo(
|
const resolvedModelName = selectedModel?.name;
|
||||||
() => selectedModel?.supports_thinking ?? false,
|
|
||||||
[selectedModel],
|
const supportThinking = useMemo(
|
||||||
);
|
() => selectedModel?.supports_thinking ?? false,
|
||||||
|
[selectedModel],
|
||||||
|
);
|
||||||
|
const effectiveMode = getResolvedMode(context.mode, supportThinking);
|
||||||
|
|
||||||
const supportReasoningEffort = useMemo(
|
const supportReasoningEffort = useMemo(
|
||||||
() => selectedModel?.supports_reasoning_effort ?? false,
|
() => selectedModel?.supports_reasoning_effort ?? false,
|
||||||
@@ -283,65 +344,38 @@ export function InputBox({
|
|||||||
|
|
||||||
const handleModelSelect = useCallback(
|
const handleModelSelect = useCallback(
|
||||||
(model_name: string) => {
|
(model_name: string) => {
|
||||||
const model = modelOptions.find((m) => m.name === model_name);
|
const model = models.find((m) => m.name === model_name);
|
||||||
if (!model) {
|
if (!model) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
onContextChange?.({
|
onContextChange?.({
|
||||||
...context,
|
...context,
|
||||||
model_name,
|
model_name,
|
||||||
mode: getResolvedMode(context.mode, model.supports_thinking ?? false),
|
mode: getResolvedMode(context.mode, model.supports_thinking ?? false),
|
||||||
reasoning_effort: context.reasoning_effort,
|
reasoning_effort: context.reasoning_effort,
|
||||||
execution_profile: model.execution_profile,
|
});
|
||||||
});
|
setModelDialogOpen(false);
|
||||||
setModelDialogOpen(false);
|
},
|
||||||
},
|
[onContextChange, context, models],
|
||||||
[onContextChange, context, modelOptions],
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleModeSelect = useCallback(
|
const handleModeSelect = useCallback(
|
||||||
(mode: InputMode) => {
|
(mode: InputMode) => {
|
||||||
const ordinaryModel =
|
onContextChange?.({
|
||||||
models.find((model) => model.name === context.model_name) ?? models[0];
|
...context,
|
||||||
onContextChange?.({
|
mode: getResolvedMode(mode, supportThinking),
|
||||||
...context,
|
reasoning_effort:
|
||||||
model_name: ordinaryModel?.name ?? context.model_name,
|
mode === "ultra"
|
||||||
mode: getResolvedMode(
|
? "high"
|
||||||
mode,
|
|
||||||
ordinaryModel?.supports_thinking ?? supportThinking,
|
|
||||||
),
|
|
||||||
reasoning_effort:
|
|
||||||
mode === "ultra"
|
|
||||||
? "high"
|
|
||||||
: mode === "pro"
|
: mode === "pro"
|
||||||
? "medium"
|
? "medium"
|
||||||
: mode === "thinking"
|
: mode === "thinking"
|
||||||
? "low"
|
? "low"
|
||||||
: "minimal",
|
: "minimal",
|
||||||
execution_profile: undefined,
|
});
|
||||||
});
|
},
|
||||||
},
|
[onContextChange, context, supportThinking],
|
||||||
[onContextChange, context, models, supportThinking],
|
);
|
||||||
);
|
|
||||||
|
|
||||||
const handleSingleRoundRagSelect = useCallback(() => {
|
|
||||||
const ragModel =
|
|
||||||
extraModels.find((model) => model.name === context.model_name) ??
|
|
||||||
extraModels[0];
|
|
||||||
if (!ragModel) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
onContextChange?.({
|
|
||||||
...context,
|
|
||||||
model_name: ragModel.name,
|
|
||||||
mode: getResolvedMode(
|
|
||||||
context.mode,
|
|
||||||
ragModel.supports_thinking ?? false,
|
|
||||||
),
|
|
||||||
execution_profile: "single_round_rag",
|
|
||||||
});
|
|
||||||
}, [context, extraModels, onContextChange]);
|
|
||||||
|
|
||||||
const handleReasoningEffortSelect = useCallback(
|
const handleReasoningEffortSelect = useCallback(
|
||||||
(effort: "minimal" | "low" | "medium" | "high") => {
|
(effort: "minimal" | "low" | "medium" | "high") => {
|
||||||
@@ -407,11 +441,10 @@ export function InputBox({
|
|||||||
onContextChange?.({
|
onContextChange?.({
|
||||||
...context,
|
...context,
|
||||||
model_name: resolvedModelName,
|
model_name: resolvedModelName,
|
||||||
mode: getResolvedMode(
|
mode: getResolvedMode(
|
||||||
context.mode,
|
context.mode,
|
||||||
selectedModel?.supports_thinking ?? false,
|
selectedModel?.supports_thinking ?? false,
|
||||||
),
|
),
|
||||||
execution_profile: selectedModel?.execution_profile,
|
|
||||||
});
|
});
|
||||||
setTimeout(() => onSubmit?.(message), 0);
|
setTimeout(() => onSubmit?.(message), 0);
|
||||||
return;
|
return;
|
||||||
@@ -426,8 +459,7 @@ export function InputBox({
|
|||||||
onStop,
|
onStop,
|
||||||
resolvedModelName,
|
resolvedModelName,
|
||||||
ragModeEnabled,
|
ragModeEnabled,
|
||||||
selectedModel?.supports_thinking,
|
selectedModel?.supports_thinking,
|
||||||
selectedModel?.execution_profile,
|
|
||||||
status,
|
status,
|
||||||
threadId,
|
threadId,
|
||||||
],
|
],
|
||||||
@@ -485,9 +517,8 @@ export function InputBox({
|
|||||||
}, [pendingSuggestion, requestFormSubmit, textInput]);
|
}, [pendingSuggestion, requestFormSubmit, textInput]);
|
||||||
|
|
||||||
const showFollowups =
|
const showFollowups =
|
||||||
!disabled &&
|
!disabled &&
|
||||||
!isNewThread &&
|
!isNewThread &&
|
||||||
!selectedSingleRoundRag &&
|
|
||||||
!followupsHidden &&
|
!followupsHidden &&
|
||||||
(followupsLoading || followups.length > 0);
|
(followupsLoading || followups.length > 0);
|
||||||
|
|
||||||
@@ -513,7 +544,7 @@ export function InputBox({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (disabled || isMock || selectedSingleRoundRag) {
|
if (disabled || isMock) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -575,17 +606,71 @@ export function InputBox({
|
|||||||
});
|
});
|
||||||
|
|
||||||
return () => controller.abort();
|
return () => controller.abort();
|
||||||
}, [context.model_name, disabled, isMock, selectedSingleRoundRag, status, thread.messages, threadId]);
|
}, [context.model_name, disabled, isMock, status, thread.messages, threadId]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={promptRootRef} className="relative flex flex-col gap-6">
|
<div
|
||||||
|
ref={promptRootRef}
|
||||||
|
className={cn(
|
||||||
|
"relative flex flex-col",
|
||||||
|
compact ? "gap-[clamp(32px,6vh,58px)]" : "gap-6",
|
||||||
|
)}
|
||||||
|
>
|
||||||
{extraHeader && (
|
{extraHeader && (
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center">
|
||||||
{extraHeader}
|
{extraHeader}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{isNewThread && searchParams.get("mode") !== "skill" && showAdminRecommendedQuestions && (
|
{isNewThread && searchParams.get("mode") !== "skill" && compact && (
|
||||||
|
<section className="px-2" aria-labelledby="recommended-prompts-title">
|
||||||
|
<div className="mb-3 flex items-center justify-center gap-1.5">
|
||||||
|
<h2
|
||||||
|
id="recommended-prompts-title"
|
||||||
|
className="text-[14px] font-normal text-slate-400 dark:text-slate-500"
|
||||||
|
>
|
||||||
|
你可以这样问我
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-prompt-order-refresh="true"
|
||||||
|
title="调整提示词顺序"
|
||||||
|
aria-label="调整提示词顺序"
|
||||||
|
onClick={() => setCompactPromptOrder((current) => current + 1)}
|
||||||
|
className="flex size-7 items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-slate-100 hover:text-blue-600 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-500/15 dark:hover:bg-slate-800 dark:hover:text-blue-300"
|
||||||
|
>
|
||||||
|
<RefreshCwIcon className="size-3.5" strokeWidth={1.8} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="mx-auto flex max-w-[900px] flex-wrap justify-center gap-x-3 gap-y-3">
|
||||||
|
{orderedCompactQuickStarts.map((item) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
type="button"
|
||||||
|
data-quick-prompt={item.id}
|
||||||
|
title={item.content}
|
||||||
|
className="inline-flex min-h-11 max-w-full items-center justify-center rounded-xl border border-[#e5e7eb] bg-white px-4 py-2 text-center text-[14px] font-normal leading-5 text-slate-700 shadow-[0_2px_6px_rgba(15,23,42,0.025)] transition-[background-color,border-color,box-shadow] hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 hover:shadow-[0_4px_10px_rgba(15,23,42,0.04)] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-500/15 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-slate-600 dark:hover:bg-slate-800"
|
||||||
|
onClick={() => {
|
||||||
|
textInput.setInput(item.content);
|
||||||
|
requestAnimationFrame(() =>
|
||||||
|
document
|
||||||
|
.querySelector<HTMLTextAreaElement>(
|
||||||
|
"textarea[name='message']",
|
||||||
|
)
|
||||||
|
?.focus(),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="max-w-full whitespace-normal">{item.title}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isNewThread && searchParams.get("mode") !== "skill" && !compact && showAdminRecommendedQuestions && (
|
||||||
<div className="flex flex-wrap justify-center gap-2.5 px-4 mb-[10px]">
|
<div className="flex flex-wrap justify-center gap-2.5 px-4 mb-[10px]">
|
||||||
{recommendedQuestions.map((q) => (
|
{recommendedQuestions.map((q) => (
|
||||||
<button
|
<button
|
||||||
@@ -636,9 +721,10 @@ export function InputBox({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex flex-col gap-1.5">
|
<div className="flex flex-col gap-1.5">
|
||||||
{isNewThread && (
|
{isNewThread && (
|
||||||
<CustomPromptBar
|
<CustomPromptBar
|
||||||
className="px-1"
|
compact={compact}
|
||||||
|
className={cn(compact ? "px-2" : "px-1")}
|
||||||
currentAgentId={agentSelector?.selectedAgentId ?? assistantId ?? null}
|
currentAgentId={agentSelector?.selectedAgentId ?? assistantId ?? null}
|
||||||
onInsert={(content) => {
|
onInsert={(content) => {
|
||||||
const current = textInput.value?.trim() ?? "";
|
const current = textInput.value?.trim() ?? "";
|
||||||
@@ -661,8 +747,8 @@ export function InputBox({
|
|||||||
? "*:data-[slot='input-group']:rounded-2xl *:data-[slot='input-group']:border-0 *:data-[slot='input-group']:bg-transparent *:data-[slot='input-group']:shadow-none"
|
? "*:data-[slot='input-group']:rounded-2xl *:data-[slot='input-group']:border-0 *:data-[slot='input-group']:bg-transparent *:data-[slot='input-group']:shadow-none"
|
||||||
: "*:data-[slot='input-group']:rounded-3xl",
|
: "*:data-[slot='input-group']:rounded-3xl",
|
||||||
// 紧凑落地态（CM 参考图）：白卡 + 细边 + 轻阴影 + 主色聚焦环（无旋转彩边）
|
// 紧凑落地态（CM 参考图）：白卡 + 细边 + 轻阴影 + 主色聚焦环（无旋转彩边）
|
||||||
compact && isNewThread
|
compact && isNewThread
|
||||||
? "rounded-2xl border border-gray-200/70 bg-white overflow-hidden shadow-[0_4.5px_22px_rgba(0,0,0,0.025)] transition-all duration-300 focus-within:border-[rgb(var(--legacy-primary-rgb)/35%)] focus-within:ring-4 focus-within:ring-[rgb(var(--legacy-primary-rgb)/5%)] focus-within:shadow-[0_10px_35px_rgb(var(--legacy-primary-rgb)/4%)] dark:border-slate-700 dark:bg-slate-800"
|
? "overflow-hidden rounded-[24px] border border-slate-200/90 bg-white shadow-[0_18px_50px_-32px_rgba(37,99,235,0.6),0_8px_24px_-20px_rgba(15,23,42,0.35)] transition-all duration-300 focus-within:border-blue-300 focus-within:ring-4 focus-within:ring-blue-500/10 dark:border-slate-700 dark:bg-slate-800"
|
||||||
: // landing 态：透明，让外层 gemini-gradient-border 提供白卡 + 旋转描边
|
: // landing 态：透明，让外层 gemini-gradient-border 提供白卡 + 旋转描边
|
||||||
// 对话态：常规白卡 + 中性边框 + 轻阴影
|
// 对话态：常规白卡 + 中性边框 + 轻阴影
|
||||||
isNewThread
|
isNewThread
|
||||||
@@ -686,7 +772,8 @@ export function InputBox({
|
|||||||
className={cn(
|
className={cn(
|
||||||
"size-full px-2 py-1 text-[15px] leading-7 placeholder:text-muted-foreground/60",
|
"size-full px-2 py-1 text-[15px] leading-7 placeholder:text-muted-foreground/60",
|
||||||
isNewThread && "min-h-[110px]!",
|
isNewThread && "min-h-[110px]!",
|
||||||
compact && "min-h-[84px]! px-3 pt-3 pb-1 text-[14px]",
|
compact &&
|
||||||
|
"min-h-[clamp(150px,18vh,176px)]! px-7 pt-7 pb-2 text-[15px]",
|
||||||
)}
|
)}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
placeholder={t.inputBox.placeholder}
|
placeholder={t.inputBox.placeholder}
|
||||||
@@ -697,7 +784,7 @@ export function InputBox({
|
|||||||
<PromptInputFooter
|
<PromptInputFooter
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex items-center border-t-0 px-2 pt-1 pb-1.5",
|
"flex items-center border-t-0 px-2 pt-1 pb-1.5",
|
||||||
compact && "gap-2 px-3 pt-1.5 pb-3",
|
compact && "gap-2 px-6 pt-2 pb-5",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<PromptInputTools
|
<PromptInputTools
|
||||||
@@ -831,64 +918,49 @@ export function InputBox({
|
|||||||
</PromptInputButton>
|
</PromptInputButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<PromptInputActionMenu>
|
<PromptInputActionMenu>
|
||||||
<ModeHoverGuide
|
<ModeHoverGuide
|
||||||
mode={
|
mode={
|
||||||
context.mode === "flash" ||
|
effectiveMode
|
||||||
context.mode === "thinking" ||
|
|
||||||
context.mode === "pro" ||
|
|
||||||
context.mode === "ultra"
|
|
||||||
? context.mode
|
|
||||||
: "flash"
|
|
||||||
}
|
}
|
||||||
tooltipContent={
|
>
|
||||||
selectedSingleRoundRag
|
|
||||||
? "单轮 RAG 问答：基于知识库检索生成答案，并展示参考资料"
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<PromptInputActionMenuTrigger
|
<PromptInputActionMenuTrigger
|
||||||
className={cn(
|
className={cn(
|
||||||
"gap-1.5! rounded-full border-0 bg-transparent px-3! text-muted-foreground shadow-none hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
"gap-1.5! rounded-full border-0 bg-transparent px-3! text-muted-foreground shadow-none hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
||||||
compact && "rounded-lg border px-2.5! py-1! text-[11px] font-medium",
|
compact && "rounded-lg border px-2.5! py-1! text-[11px] font-medium",
|
||||||
compact &&
|
compact &&
|
||||||
(selectedSingleRoundRag
|
(effectiveMode === "thinking"
|
||||||
? "border-emerald-200 bg-emerald-50/60 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-200"
|
|
||||||
: context.mode === "thinking"
|
|
||||||
? "border-indigo-200 bg-indigo-50/60 text-indigo-700 hover:bg-indigo-100 dark:border-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-200"
|
? "border-indigo-200 bg-indigo-50/60 text-indigo-700 hover:bg-indigo-100 dark:border-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-200"
|
||||||
: context.mode === "pro"
|
: effectiveMode === "pro"
|
||||||
? "border-violet-200 bg-violet-50/60 text-violet-700 hover:bg-violet-100 dark:border-violet-700 dark:bg-violet-950/40 dark:text-violet-200"
|
? "border-violet-200 bg-violet-50/60 text-violet-700 hover:bg-violet-100 dark:border-violet-700 dark:bg-violet-950/40 dark:text-violet-200"
|
||||||
: context.mode === "ultra"
|
: effectiveMode === "ultra"
|
||||||
? "border-amber-200 bg-amber-50/60 text-amber-700 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200"
|
? "border-amber-200 bg-amber-50/60 text-amber-700 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200"
|
||||||
: "border-transparent bg-muted/40 hover:bg-muted hover:text-foreground"),
|
: "border-transparent bg-muted/40 hover:bg-muted hover:text-foreground"),
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
{selectedSingleRoundRag ? (
|
{effectiveMode === "flash" && <ZapIcon className="size-3" />}
|
||||||
<BookMarkedIcon className="size-3" />
|
{effectiveMode === "thinking" && (
|
||||||
) : context.mode === "flash" ? (
|
|
||||||
<ZapIcon className="size-3" />
|
|
||||||
) : context.mode === "thinking" ? (
|
|
||||||
<LightbulbIcon className="size-3" />
|
<LightbulbIcon className="size-3" />
|
||||||
) : context.mode === "pro" ? (
|
)}
|
||||||
|
{effectiveMode === "pro" && (
|
||||||
<GraduationCapIcon className="size-3" />
|
<GraduationCapIcon className="size-3" />
|
||||||
) : context.mode === "ultra" ? (
|
)}
|
||||||
|
{effectiveMode === "ultra" && (
|
||||||
<RocketIcon className="size-3 text-[#dabb5e]" />
|
<RocketIcon className="size-3 text-[#dabb5e]" />
|
||||||
) : null}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"text-xs font-normal",
|
"text-xs font-normal",
|
||||||
context.mode === "ultra" ? "golden-text" : "",
|
effectiveMode === "ultra" ? "golden-text" : "",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{selectedSingleRoundRag
|
{(effectiveMode === "flash" && t.inputBox.flashMode) ||
|
||||||
? "单轮 RAG"
|
(effectiveMode === "thinking" &&
|
||||||
: (context.mode === "flash" && t.inputBox.flashMode) ||
|
|
||||||
(context.mode === "thinking" &&
|
|
||||||
t.inputBox.reasoningMode) ||
|
t.inputBox.reasoningMode) ||
|
||||||
(context.mode === "pro" && t.inputBox.proMode) ||
|
(effectiveMode === "pro" && t.inputBox.proMode) ||
|
||||||
(context.mode === "ultra" && t.inputBox.ultraMode)}
|
(effectiveMode === "ultra" && t.inputBox.ultraMode)}
|
||||||
</div>
|
</div>
|
||||||
</PromptInputActionMenuTrigger>
|
</PromptInputActionMenuTrigger>
|
||||||
</ModeHoverGuide>
|
</ModeHoverGuide>
|
||||||
<PromptInputActionMenuContent className="w-80">
|
<PromptInputActionMenuContent className="w-80">
|
||||||
@@ -897,11 +969,11 @@ export function InputBox({
|
|||||||
{t.inputBox.mode}
|
{t.inputBox.mode}
|
||||||
</DropdownMenuLabel>
|
</DropdownMenuLabel>
|
||||||
<PromptInputActionMenu>
|
<PromptInputActionMenu>
|
||||||
<PromptInputActionMenuItem
|
<PromptInputActionMenuItem
|
||||||
className={cn(
|
className={cn(
|
||||||
!selectedSingleRoundRag && context.mode === "flash"
|
context.mode === "flash"
|
||||||
? "text-accent-foreground"
|
? "text-accent-foreground"
|
||||||
: "text-muted-foreground/65",
|
: "text-muted-foreground/65",
|
||||||
)}
|
)}
|
||||||
onSelect={() => handleModeSelect("flash")}
|
onSelect={() => handleModeSelect("flash")}
|
||||||
>
|
>
|
||||||
@@ -909,9 +981,9 @@ export function InputBox({
|
|||||||
<div className="flex items-center gap-1 font-bold">
|
<div className="flex items-center gap-1 font-bold">
|
||||||
<ZapIcon
|
<ZapIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"mr-2 size-4",
|
"mr-2 size-4",
|
||||||
!selectedSingleRoundRag && context.mode === "flash" &&
|
context.mode === "flash" &&
|
||||||
"text-accent-foreground",
|
"text-accent-foreground",
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
{t.inputBox.flashMode}
|
{t.inputBox.flashMode}
|
||||||
@@ -920,7 +992,7 @@ export function InputBox({
|
|||||||
{t.inputBox.flashModeDescription}
|
{t.inputBox.flashModeDescription}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{!selectedSingleRoundRag && context.mode === "flash" ? (
|
{context.mode === "flash" ? (
|
||||||
<CheckIcon className="ml-auto size-4" />
|
<CheckIcon className="ml-auto size-4" />
|
||||||
) : (
|
) : (
|
||||||
<div className="ml-auto size-4" />
|
<div className="ml-auto size-4" />
|
||||||
@@ -928,9 +1000,9 @@ export function InputBox({
|
|||||||
</PromptInputActionMenuItem>
|
</PromptInputActionMenuItem>
|
||||||
{supportThinking && (
|
{supportThinking && (
|
||||||
<PromptInputActionMenuItem
|
<PromptInputActionMenuItem
|
||||||
className={cn(
|
className={cn(
|
||||||
!selectedSingleRoundRag && context.mode === "thinking"
|
context.mode === "thinking"
|
||||||
? "text-accent-foreground"
|
? "text-accent-foreground"
|
||||||
: "text-muted-foreground/65",
|
: "text-muted-foreground/65",
|
||||||
)}
|
)}
|
||||||
onSelect={() => handleModeSelect("thinking")}
|
onSelect={() => handleModeSelect("thinking")}
|
||||||
@@ -939,9 +1011,9 @@ export function InputBox({
|
|||||||
<div className="flex items-center gap-1 font-bold">
|
<div className="flex items-center gap-1 font-bold">
|
||||||
<LightbulbIcon
|
<LightbulbIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"mr-2 size-4",
|
"mr-2 size-4",
|
||||||
!selectedSingleRoundRag && context.mode === "thinking" &&
|
context.mode === "thinking" &&
|
||||||
"text-accent-foreground",
|
"text-accent-foreground",
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
{t.inputBox.reasoningMode}
|
{t.inputBox.reasoningMode}
|
||||||
@@ -950,7 +1022,7 @@ export function InputBox({
|
|||||||
{t.inputBox.reasoningModeDescription}
|
{t.inputBox.reasoningModeDescription}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{!selectedSingleRoundRag && context.mode === "thinking" ? (
|
{context.mode === "thinking" ? (
|
||||||
<CheckIcon className="ml-auto size-4" />
|
<CheckIcon className="ml-auto size-4" />
|
||||||
) : (
|
) : (
|
||||||
<div className="ml-auto size-4" />
|
<div className="ml-auto size-4" />
|
||||||
@@ -958,8 +1030,8 @@ export function InputBox({
|
|||||||
</PromptInputActionMenuItem>
|
</PromptInputActionMenuItem>
|
||||||
)}
|
)}
|
||||||
<PromptInputActionMenuItem
|
<PromptInputActionMenuItem
|
||||||
className={cn(
|
className={cn(
|
||||||
!selectedSingleRoundRag && context.mode === "pro"
|
context.mode === "pro"
|
||||||
? "text-accent-foreground"
|
? "text-accent-foreground"
|
||||||
: "text-muted-foreground/65",
|
: "text-muted-foreground/65",
|
||||||
)}
|
)}
|
||||||
@@ -969,8 +1041,8 @@ export function InputBox({
|
|||||||
<div className="flex items-center gap-1 font-bold">
|
<div className="flex items-center gap-1 font-bold">
|
||||||
<GraduationCapIcon
|
<GraduationCapIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"mr-2 size-4",
|
"mr-2 size-4",
|
||||||
!selectedSingleRoundRag && context.mode === "pro" &&
|
context.mode === "pro" &&
|
||||||
"text-accent-foreground",
|
"text-accent-foreground",
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
@@ -980,15 +1052,15 @@ export function InputBox({
|
|||||||
{t.inputBox.proModeDescription}
|
{t.inputBox.proModeDescription}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{!selectedSingleRoundRag && context.mode === "pro" ? (
|
{context.mode === "pro" ? (
|
||||||
<CheckIcon className="ml-auto size-4" />
|
<CheckIcon className="ml-auto size-4" />
|
||||||
) : (
|
) : (
|
||||||
<div className="ml-auto size-4" />
|
<div className="ml-auto size-4" />
|
||||||
)}
|
)}
|
||||||
</PromptInputActionMenuItem>
|
</PromptInputActionMenuItem>
|
||||||
<PromptInputActionMenuItem
|
<PromptInputActionMenuItem
|
||||||
className={cn(
|
className={cn(
|
||||||
!selectedSingleRoundRag && context.mode === "ultra"
|
context.mode === "ultra"
|
||||||
? "text-accent-foreground"
|
? "text-accent-foreground"
|
||||||
: "text-muted-foreground/65",
|
: "text-muted-foreground/65",
|
||||||
)}
|
)}
|
||||||
@@ -998,17 +1070,13 @@ export function InputBox({
|
|||||||
<div className="flex items-center gap-1 font-bold">
|
<div className="flex items-center gap-1 font-bold">
|
||||||
<RocketIcon
|
<RocketIcon
|
||||||
className={cn(
|
className={cn(
|
||||||
"mr-2 size-4",
|
"mr-2 size-4",
|
||||||
!selectedSingleRoundRag &&
|
context.mode === "ultra" && "text-[#dabb5e]",
|
||||||
context.mode === "ultra" &&
|
|
||||||
"text-[#dabb5e]",
|
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
!selectedSingleRoundRag &&
|
context.mode === "ultra" && "golden-text",
|
||||||
context.mode === "ultra" &&
|
|
||||||
"golden-text",
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{t.inputBox.ultraMode}
|
{t.inputBox.ultraMode}
|
||||||
@@ -1018,46 +1086,13 @@ export function InputBox({
|
|||||||
{t.inputBox.ultraModeDescription}
|
{t.inputBox.ultraModeDescription}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{!selectedSingleRoundRag && context.mode === "ultra" ? (
|
{context.mode === "ultra" ? (
|
||||||
<CheckIcon className="ml-auto size-4" />
|
<CheckIcon className="ml-auto size-4" />
|
||||||
) : (
|
) : (
|
||||||
<div className="ml-auto size-4" />
|
<div className="ml-auto size-4" />
|
||||||
)}
|
)}
|
||||||
</PromptInputActionMenuItem>
|
</PromptInputActionMenuItem>
|
||||||
{extraModels.length > 0 && (
|
</PromptInputActionMenu>
|
||||||
<>
|
|
||||||
<DropdownMenuSeparator className="my-2" />
|
|
||||||
<PromptInputActionMenuItem
|
|
||||||
className={cn(
|
|
||||||
selectedSingleRoundRag
|
|
||||||
? "bg-emerald-50 text-emerald-800 hover:bg-emerald-100 focus:bg-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-200 dark:hover:bg-emerald-950/60 dark:focus:bg-emerald-950/60"
|
|
||||||
: "text-muted-foreground/65",
|
|
||||||
)}
|
|
||||||
onSelect={handleSingleRoundRagSelect}
|
|
||||||
>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<div className="flex items-center gap-1 font-bold">
|
|
||||||
<BookMarkedIcon
|
|
||||||
className={cn(
|
|
||||||
"mr-2 size-4",
|
|
||||||
selectedSingleRoundRag && "text-emerald-700 dark:text-emerald-200",
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
单轮 RAG 问答
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-xs">
|
|
||||||
基于知识库检索生成答案，并展示思考内容与参考资料
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{selectedSingleRoundRag ? (
|
|
||||||
<CheckIcon className="ml-auto size-4" />
|
|
||||||
) : (
|
|
||||||
<div className="ml-auto size-4" />
|
|
||||||
)}
|
|
||||||
</PromptInputActionMenuItem>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</PromptInputActionMenu>
|
|
||||||
</DropdownMenuGroup>
|
</DropdownMenuGroup>
|
||||||
</PromptInputActionMenuContent>
|
</PromptInputActionMenuContent>
|
||||||
</PromptInputActionMenu>
|
</PromptInputActionMenu>
|
||||||
@@ -1177,10 +1212,9 @@ export function InputBox({
|
|||||||
</PromptInputActionMenuContent>
|
</PromptInputActionMenuContent>
|
||||||
</PromptInputActionMenu>
|
</PromptInputActionMenu>
|
||||||
)}
|
)}
|
||||||
</PromptInputTools>
|
</PromptInputTools>
|
||||||
<PromptInputTools className={cn("gap-1.5", compact && "gap-2")}>
|
<PromptInputTools className={cn("gap-1.5", compact && "gap-2")}>
|
||||||
{knowledgeSelector}
|
{agentSelector && (
|
||||||
{agentSelector && (
|
|
||||||
<AgentSelector
|
<AgentSelector
|
||||||
selectedAgentId={agentSelector.selectedAgentId}
|
selectedAgentId={agentSelector.selectedAgentId}
|
||||||
onAgentChange={agentSelector.onAgentChange}
|
onAgentChange={agentSelector.onAgentChange}
|
||||||
@@ -1221,8 +1255,10 @@ export function InputBox({
|
|||||||
onOpenChange={setModelDialogOpen}
|
onOpenChange={setModelDialogOpen}
|
||||||
>
|
>
|
||||||
<ModelSelectorTrigger asChild>
|
<ModelSelectorTrigger asChild>
|
||||||
<PromptInputButton
|
<PromptInputButton
|
||||||
className={cn(
|
disabled={models.length === 0}
|
||||||
|
aria-label="模型选择"
|
||||||
|
className={cn(
|
||||||
"rounded-full border-0 bg-transparent px-3 shadow-none text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
"rounded-full border-0 bg-transparent px-3 shadow-none text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
||||||
compact &&
|
compact &&
|
||||||
"rounded-lg border border-transparent bg-gray-50/60 px-2.5! py-1! font-mono text-gray-600 hover:bg-gray-100/80 hover:text-gray-800 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700",
|
"rounded-lg border border-transparent bg-gray-50/60 px-2.5! py-1! font-mono text-gray-600 hover:bg-gray-100/80 hover:text-gray-800 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700",
|
||||||
@@ -1235,7 +1271,7 @@ export function InputBox({
|
|||||||
compact && "text-[11px]",
|
compact && "text-[11px]",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{selectedModel?.display_name}
|
{selectedModel?.display_name || "默认模型"}
|
||||||
</ModelSelectorName>
|
</ModelSelectorName>
|
||||||
</div>
|
</div>
|
||||||
</PromptInputButton>
|
</PromptInputButton>
|
||||||
@@ -1243,7 +1279,7 @@ export function InputBox({
|
|||||||
<ModelSelectorContent>
|
<ModelSelectorContent>
|
||||||
<ModelSelectorInput placeholder={t.inputBox.searchModels} />
|
<ModelSelectorInput placeholder={t.inputBox.searchModels} />
|
||||||
<ModelSelectorList>
|
<ModelSelectorList>
|
||||||
{modelOptions.map((m) => (
|
{models.map((m) => (
|
||||||
<ModelSelectorItem
|
<ModelSelectorItem
|
||||||
key={m.name}
|
key={m.name}
|
||||||
value={m.name}
|
value={m.name}
|
||||||
@@ -1251,11 +1287,9 @@ export function InputBox({
|
|||||||
>
|
>
|
||||||
<div className="flex min-w-0 flex-1 flex-col">
|
<div className="flex min-w-0 flex-1 flex-col">
|
||||||
<ModelSelectorName>{m.display_name}</ModelSelectorName>
|
<ModelSelectorName>{m.display_name}</ModelSelectorName>
|
||||||
<span className="text-muted-foreground truncate text-[10px]">
|
<span className="text-muted-foreground truncate text-[10px]">
|
||||||
{selectedSingleRoundRag
|
{m.model}
|
||||||
? `单轮知识库问答 · ${m.name}`
|
</span>
|
||||||
: m.model}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
{m.name === context.model_name ? (
|
{m.name === context.model_name ? (
|
||||||
<CheckIcon className="ml-auto size-4" />
|
<CheckIcon className="ml-auto size-4" />
|
||||||
@@ -1263,15 +1297,15 @@ export function InputBox({
|
|||||||
<div className="ml-auto size-4" />
|
<div className="ml-auto size-4" />
|
||||||
)}
|
)}
|
||||||
</ModelSelectorItem>
|
</ModelSelectorItem>
|
||||||
))}
|
))}
|
||||||
</ModelSelectorList>
|
</ModelSelectorList>
|
||||||
</ModelSelectorContent>
|
</ModelSelectorContent>
|
||||||
</ModelSelector>
|
</ModelSelector>
|
||||||
<PromptInputSubmit
|
<PromptInputSubmit
|
||||||
className={cn(
|
className={cn(
|
||||||
"rounded-full border-border bg-background shadow-sm hover:bg-muted dark:bg-blue-500 dark:border-blue-500 dark:text-white dark:hover:bg-blue-400 dark:shadow-none",
|
"rounded-full border-border bg-background shadow-sm hover:bg-muted dark:bg-blue-500 dark:border-blue-500 dark:text-white dark:hover:bg-blue-400 dark:shadow-none",
|
||||||
compact &&
|
compact &&
|
||||||
"size-7 rounded-lg border-0 bg-[var(--primary)] text-[var(--button-foreground,var(--primary-foreground))] hover:opacity-90 disabled:bg-muted disabled:text-muted-foreground/40 dark:bg-[var(--primary)] dark:border-0 dark:text-[var(--button-foreground,var(--primary-foreground))] dark:hover:opacity-90 dark:disabled:bg-muted",
|
"size-10 rounded-full border-0 bg-blue-600 text-white shadow-[0_8px_18px_-10px_rgba(37,99,235,0.9)] hover:bg-blue-700 disabled:bg-muted disabled:text-muted-foreground/40 dark:border-0 dark:bg-blue-500 dark:text-white dark:hover:bg-blue-400 dark:disabled:bg-muted",
|
||||||
)}
|
)}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|||||||
@@ -1,353 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {
|
|
||||||
Check,
|
|
||||||
Database,
|
|
||||||
Folder,
|
|
||||||
Globe2,
|
|
||||||
Loader2,
|
|
||||||
Search,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { useEffect, useMemo, useRef, useState } from "react";
|
|
||||||
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuCheckboxItem,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuLabel,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/components/ui/dropdown-menu";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import {
|
|
||||||
type LlmWikiKnowledgeBase,
|
|
||||||
useAgentLlmWikiKnowledgeBases,
|
|
||||||
useLlmWikiKnowledgeBases,
|
|
||||||
useLlmWikiRuntime,
|
|
||||||
} from "@/strategy-components/api/llmwiki";
|
|
||||||
|
|
||||||
type SelectorSource = "all" | "agent";
|
|
||||||
type SelectorVariant = "popover" | "panel";
|
|
||||||
|
|
||||||
function groupRows(rows: LlmWikiKnowledgeBase[]) {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
key: "personal",
|
|
||||||
label: "我的知识空间",
|
|
||||||
rows: rows.filter((item) => item.publication_status !== "published" || item.is_owner),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "public",
|
|
||||||
label: "公共知识空间",
|
|
||||||
rows: rows.filter((item) => item.publication_status === "published" && !item.is_owner),
|
|
||||||
},
|
|
||||||
].filter((group) => group.rows.length > 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SpaceIcon({ item }: { item: LlmWikiKnowledgeBase }) {
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
"flex size-7 shrink-0 items-center justify-center rounded-md",
|
|
||||||
item.publication_status === "published"
|
|
||||||
? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
|
|
||||||
: "bg-primary/10 text-primary",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{item.publication_status === "published" ? (
|
|
||||||
<Globe2 className="size-3.5" />
|
|
||||||
) : (
|
|
||||||
<Folder className="size-3.5" />
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SelectionContent({
|
|
||||||
rows,
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
search,
|
|
||||||
onSearchChange,
|
|
||||||
loading,
|
|
||||||
error,
|
|
||||||
source,
|
|
||||||
variant,
|
|
||||||
}: {
|
|
||||||
rows: LlmWikiKnowledgeBase[];
|
|
||||||
value: string[];
|
|
||||||
onChange: (value: string[]) => void;
|
|
||||||
search: string;
|
|
||||||
onSearchChange: (value: string) => void;
|
|
||||||
loading: boolean;
|
|
||||||
error: unknown;
|
|
||||||
source: SelectorSource;
|
|
||||||
variant: SelectorVariant;
|
|
||||||
}) {
|
|
||||||
const selected = useMemo(() => new Set(value), [value]);
|
|
||||||
const filtered = useMemo(() => {
|
|
||||||
const query = search.trim().toLocaleLowerCase();
|
|
||||||
if (!query) return rows;
|
|
||||||
return rows.filter((item) =>
|
|
||||||
`${item.name} ${item.description}`.toLocaleLowerCase().includes(query),
|
|
||||||
);
|
|
||||||
}, [rows, search]);
|
|
||||||
const groups = useMemo(() => groupRows(filtered), [filtered]);
|
|
||||||
const toggle = (id: string) => {
|
|
||||||
onChange(selected.has(id) ? value.filter((item) => item !== id) : [...value, id]);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="border-b p-2.5">
|
|
||||||
<div className="relative">
|
|
||||||
<Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
value={search}
|
|
||||||
onChange={(event) => onSearchChange(event.target.value)}
|
|
||||||
onKeyDown={(event) => event.stopPropagation()}
|
|
||||||
placeholder="搜索知识空间"
|
|
||||||
className="h-8 bg-muted/40 pl-8 text-xs"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={cn("overflow-y-auto p-1.5", variant === "popover" ? "max-h-64" : "max-h-80")}>
|
|
||||||
{loading ? (
|
|
||||||
<div className="flex h-28 items-center justify-center text-xs text-muted-foreground">
|
|
||||||
<Loader2 className="mr-2 size-4 animate-spin" />正在读取知识空间
|
|
||||||
</div>
|
|
||||||
) : error ? (
|
|
||||||
<div className="m-2 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-xs text-destructive">
|
|
||||||
{error instanceof Error ? error.message : "知识空间读取失败"}
|
|
||||||
</div>
|
|
||||||
) : groups.length === 0 ? (
|
|
||||||
<div className="flex h-28 items-center justify-center px-4 text-center text-xs text-muted-foreground">
|
|
||||||
{search
|
|
||||||
? "没有匹配的知识空间"
|
|
||||||
: source === "agent"
|
|
||||||
? "该智能体尚未绑定可用知识空间"
|
|
||||||
: "当前账号暂无可用知识空间"}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
groups.map((group, groupIndex) => (
|
|
||||||
<div key={group.key}>
|
|
||||||
{groupIndex > 0 && (
|
|
||||||
variant === "popover"
|
|
||||||
? <DropdownMenuSeparator className="my-1.5" />
|
|
||||||
: <div className="my-1.5 border-t" />
|
|
||||||
)}
|
|
||||||
{variant === "popover" ? (
|
|
||||||
<DropdownMenuLabel className="flex items-center gap-1.5 px-2 py-1 text-[11px] font-semibold text-muted-foreground">
|
|
||||||
{group.key === "personal" ? <Folder className="size-3" /> : <Globe2 className="size-3" />}{group.label}
|
|
||||||
</DropdownMenuLabel>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center gap-1.5 px-2 py-1 text-[11px] font-semibold text-muted-foreground">
|
|
||||||
{group.key === "personal" ? <Folder className="size-3" /> : <Globe2 className="size-3" />}{group.label}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{group.rows.map((item) => {
|
|
||||||
const rowContent = (
|
|
||||||
<>
|
|
||||||
<SpaceIcon item={item} />
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<div className="truncate text-xs font-medium">{item.name}</div>
|
|
||||||
<div className="mt-0.5 truncate text-[10px] text-muted-foreground">
|
|
||||||
{item.type === "faq" ? "FAQ" : "文档库"} · {item.knowledge_count ?? 0} 项知识
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{item.publication_status === "published" && (
|
|
||||||
<Badge variant="outline" className="h-4 px-1 text-[9px]">公共</Badge>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
return variant === "popover" ? (
|
|
||||||
<DropdownMenuCheckboxItem
|
|
||||||
key={item.id}
|
|
||||||
checked={selected.has(item.id)}
|
|
||||||
onCheckedChange={() => toggle(item.id)}
|
|
||||||
onSelect={(event) => event.preventDefault()}
|
|
||||||
className={cn(
|
|
||||||
"my-0.5 min-h-10 rounded-md py-1.5 pr-2 pl-7",
|
|
||||||
selected.has(item.id) && "bg-primary/8 focus:bg-primary/12",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{rowContent}
|
|
||||||
</DropdownMenuCheckboxItem>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
key={item.id}
|
|
||||||
type="button"
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={selected.has(item.id)}
|
|
||||||
onClick={() => toggle(item.id)}
|
|
||||||
className={cn(
|
|
||||||
"my-0.5 flex min-h-11 w-full items-center gap-2 rounded-md px-2 py-1.5 text-left outline-none transition-colors hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-primary",
|
|
||||||
selected.has(item.id) && "bg-primary/8",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<span className={cn(
|
|
||||||
"flex size-4 shrink-0 items-center justify-center rounded border",
|
|
||||||
selected.has(item.id) && "border-primary bg-primary text-primary-foreground",
|
|
||||||
)}>
|
|
||||||
{selected.has(item.id) && <Check className="size-3" />}
|
|
||||||
</span>
|
|
||||||
{rowContent}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between gap-2 border-t bg-muted/20 px-2.5 py-2">
|
|
||||||
<span className="text-[11px] text-muted-foreground">已选择 {value.length} 个</span>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Button type="button" variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={() => onChange(filtered.map((item) => item.id))}>
|
|
||||||
全选
|
|
||||||
</Button>
|
|
||||||
<Button type="button" variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={() => onChange([])}>
|
|
||||||
清空
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function LlmWikiKnowledgeSelector({
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
source = "all",
|
|
||||||
agentId,
|
|
||||||
autoSelectAll = false,
|
|
||||||
disabled = false,
|
|
||||||
className,
|
|
||||||
label = "知识空间",
|
|
||||||
variant = "popover",
|
|
||||||
}: {
|
|
||||||
value: string[];
|
|
||||||
onChange: (value: string[]) => void;
|
|
||||||
source?: SelectorSource;
|
|
||||||
agentId?: string | null;
|
|
||||||
autoSelectAll?: boolean;
|
|
||||||
disabled?: boolean;
|
|
||||||
className?: string;
|
|
||||||
label?: string;
|
|
||||||
variant?: SelectorVariant;
|
|
||||||
}) {
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const [search, setSearch] = useState("");
|
|
||||||
const runtime = useLlmWikiRuntime();
|
|
||||||
const all = useLlmWikiKnowledgeBases(
|
|
||||||
"all",
|
|
||||||
runtime.data?.provider === "weknora",
|
|
||||||
);
|
|
||||||
const agent = useAgentLlmWikiKnowledgeBases(
|
|
||||||
agentId,
|
|
||||||
runtime.data?.provider === "weknora" && source === "agent" && !!agentId,
|
|
||||||
);
|
|
||||||
const rows = all.data ?? [];
|
|
||||||
const defaultIds = useMemo(() => {
|
|
||||||
if (source !== "agent") {
|
|
||||||
return rows.map((item) => item.id);
|
|
||||||
}
|
|
||||||
return (agent.data ?? []).map((item) => item.id);
|
|
||||||
}, [agent.data, rows, source]);
|
|
||||||
const loading = all.isLoading || (source === "agent" && !!agentId && agent.isLoading);
|
|
||||||
const error = all.error ?? (source === "agent" ? agent.error : null);
|
|
||||||
const availableIds = useMemo(() => new Set(rows.map((item) => item.id)), [rows]);
|
|
||||||
const initializationKey = `${source}:${agentId ?? "all"}:${defaultIds.join(",")}`;
|
|
||||||
const initialized = useRef<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!all.data || (source === "agent" && agentId && !agent.data) || initialized.current === initializationKey) return;
|
|
||||||
initialized.current = initializationKey;
|
|
||||||
const valid = value.filter((id) => availableIds.has(id));
|
|
||||||
const next = autoSelectAll && valid.length === 0 && defaultIds.length > 0
|
|
||||||
? defaultIds.filter((id) => availableIds.has(id))
|
|
||||||
: valid;
|
|
||||||
if (next.length !== value.length || next.some((id, index) => id !== value[index])) {
|
|
||||||
onChange(next);
|
|
||||||
}
|
|
||||||
}, [agent.data, agentId, all.data, autoSelectAll, availableIds, defaultIds, initializationKey, onChange, source, value]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) setSearch("");
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
if (runtime.isError || runtime.data?.provider !== "weknora") return null;
|
|
||||||
|
|
||||||
const content = (
|
|
||||||
<SelectionContent
|
|
||||||
rows={rows}
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
search={search}
|
|
||||||
onSearchChange={setSearch}
|
|
||||||
loading={loading}
|
|
||||||
error={error}
|
|
||||||
source={source}
|
|
||||||
variant={variant}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (variant === "panel") {
|
|
||||||
return (
|
|
||||||
<div className={cn("overflow-hidden rounded-xl border bg-background shadow-sm", className)}>
|
|
||||||
<div className="flex items-start justify-between gap-4 border-b px-4 py-3">
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-2 text-sm font-semibold">
|
|
||||||
<Database className="size-4 text-primary" />绑定知识空间
|
|
||||||
</div>
|
|
||||||
<p className="mt-1 text-xs text-muted-foreground">
|
|
||||||
新建该智能体对话时，只能从已绑定空间中选择本次检索范围。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Badge variant="secondary" className="shrink-0">{value.length} 个</Badge>
|
|
||||||
</div>
|
|
||||||
{content}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const selectedName = value.length === 1
|
|
||||||
? rows.find((item) => item.id === value[0])?.name
|
|
||||||
: null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DropdownMenu open={open} onOpenChange={setOpen}>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className={cn(
|
|
||||||
"h-8 max-w-52 gap-1.5 rounded-full border-0 bg-transparent px-2.5 text-muted-foreground shadow-none hover:bg-muted/70 hover:text-foreground",
|
|
||||||
value.length > 0 && "bg-primary/8 text-primary hover:bg-primary/12 hover:text-primary",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
{loading ? <Loader2 className="size-3.5 animate-spin" /> : <Database className="size-3.5" />}
|
|
||||||
<span className="truncate text-xs font-normal">{selectedName || label}</span>
|
|
||||||
{value.length > 0 && (
|
|
||||||
<span className="flex size-4 items-center justify-center rounded-full bg-primary text-[9px] font-semibold text-primary-foreground">
|
|
||||||
{value.length}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{value.length > 0 && value.length === rows.length && <Check className="size-3" />}
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="start" sideOffset={8} className="w-80 overflow-hidden rounded-xl p-0 shadow-xl">
|
|
||||||
{content}
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LlmWikiKnowledgeSelector;
|
|
||||||
@@ -65,7 +65,10 @@ import { cn } from "@/lib/utils";
|
|||||||
import { useArtifactsOptional } from "../artifacts";
|
import { useArtifactsOptional } from "../artifacts";
|
||||||
import { FlipDisplay } from "../flip-display";
|
import { FlipDisplay } from "../flip-display";
|
||||||
import { Tooltip } from "../tooltip";
|
import { Tooltip } from "../tooltip";
|
||||||
import { SourceCard } from "../skill-display-sources";
|
import {
|
||||||
|
isWeKnoraSourcePreviewUrl,
|
||||||
|
SourceCard,
|
||||||
|
} from "../skill-display-sources";
|
||||||
|
|
||||||
import { MarkdownContent } from "./markdown-content";
|
import { MarkdownContent } from "./markdown-content";
|
||||||
|
|
||||||
@@ -639,19 +642,43 @@ function DisplayResultsList({ results }: { results: RuntimeDisplaySource[] }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SearchResultCard({ item }: { item: SearchResultItem }) {
|
function SearchResultCard({ item }: { item: SearchResultItem }) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const content = item.snippet ?? item.content;
|
const content = item.snippet ?? item.content;
|
||||||
const date = item.published_date ?? item.publishedDate ?? item.date;
|
const date = item.published_date ?? item.publishedDate ?? item.date;
|
||||||
let sourceLabel: string | undefined = item.source;
|
let sourceLabel: string | undefined = item.source;
|
||||||
if (item.url) {
|
if (item.url) {
|
||||||
try {
|
try {
|
||||||
sourceLabel = new URL(item.url).hostname.replace(/^www\./, "");
|
sourceLabel = new URL(item.url).hostname.replace(/^www\./, "");
|
||||||
} catch {
|
} catch {
|
||||||
sourceLabel = sourceLabel ?? item.url;
|
sourceLabel = sourceLabel ?? item.url;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return (
|
|
||||||
|
// MCP retrieval tools without a configured display adapter fall back to this
|
||||||
|
// generic result card. Preserve the normal web-search UI, but route our
|
||||||
|
// credential-free WeKnora pointer through SourceCard so its dialog exposes a
|
||||||
|
// deliberate “查看原文” action rather than rendering the internal route text.
|
||||||
|
if (isWeKnoraSourcePreviewUrl(item.url)) {
|
||||||
|
const weknoraSource: RuntimeDisplaySource = {
|
||||||
|
id: item.id ?? item.uuid ?? item.docId,
|
||||||
|
title: item.title ?? "检索结果",
|
||||||
|
type: item.source ?? "document",
|
||||||
|
snippet: item.snippet ?? item.content ?? "",
|
||||||
|
content,
|
||||||
|
source: item.source,
|
||||||
|
author: item.author,
|
||||||
|
time: date,
|
||||||
|
url: item.url,
|
||||||
|
index: 0,
|
||||||
|
skillName: "weknora-knowledge-search",
|
||||||
|
mode: "list",
|
||||||
|
raw: { ...item },
|
||||||
|
};
|
||||||
|
return <SourceCard source={weknoraSource} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
<>
|
<>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -135,12 +135,11 @@ export function MessageListItem({
|
|||||||
threadId,
|
threadId,
|
||||||
tokenUsageEnabled = false,
|
tokenUsageEnabled = false,
|
||||||
displaySources = [],
|
displaySources = [],
|
||||||
extraRehypePlugins,
|
extraRehypePlugins,
|
||||||
onEditResubmit,
|
onEditResubmit,
|
||||||
onEditSave,
|
onMessageDeleted,
|
||||||
onMessageDeleted,
|
turnTime,
|
||||||
turnTime,
|
}: {
|
||||||
}: {
|
|
||||||
className?: string;
|
className?: string;
|
||||||
fitRowToContent?: boolean;
|
fitRowToContent?: boolean;
|
||||||
/**
|
/**
|
||||||
@@ -152,11 +151,10 @@ export function MessageListItem({
|
|||||||
isLoading?: boolean;
|
isLoading?: boolean;
|
||||||
threadId: string;
|
threadId: string;
|
||||||
tokenUsageEnabled?: boolean;
|
tokenUsageEnabled?: boolean;
|
||||||
displaySources?: RuntimeDisplaySource[];
|
displaySources?: RuntimeDisplaySource[];
|
||||||
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
||||||
onEditResubmit?: (text: string) => void;
|
onEditResubmit?: (text: string) => void;
|
||||||
onEditSave?: (messageId: string, text: string) => void | Promise<void>;
|
onMessageDeleted?: (deletedIds: string[]) => void;
|
||||||
onMessageDeleted?: (deletedIds: string[]) => void;
|
|
||||||
/**
|
/**
|
||||||
* Durable ask time of the turn this message belongs to (the preceding
|
* Durable ask time of the turn this message belongs to (the preceding
|
||||||
* question's `client_ts`). Used to time-stamp the AI answer, which carries no
|
* question's `client_ts`). Used to time-stamp the AI answer, which carries no
|
||||||
@@ -164,102 +162,14 @@ export function MessageListItem({
|
|||||||
* wall clock at render time and appear to "drift" to now on every reload.
|
* wall clock at render time and appear to "drift" to now on every reload.
|
||||||
*/
|
*/
|
||||||
turnTime?: string;
|
turnTime?: string;
|
||||||
}) {
|
}) {
|
||||||
const { t } = useI18n();
|
const isHuman = message.type === 'human';
|
||||||
const isHuman = message.type === 'human';
|
const messageMarkdown =
|
||||||
const messageMarkdown =
|
extractContentFromMessage(message) ??
|
||||||
extractContentFromMessage(message) ??
|
extractReasoningContentFromMessage(message) ??
|
||||||
extractReasoningContentFromMessage(message) ??
|
'';
|
||||||
'';
|
return (
|
||||||
const [assistantEditing, setAssistantEditing] = useState(false);
|
<AIElementMessage
|
||||||
const [assistantDraft, setAssistantDraft] = useState(messageMarkdown);
|
|
||||||
const [assistantSaving, setAssistantSaving] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!assistantEditing) {
|
|
||||||
setAssistantDraft(messageMarkdown);
|
|
||||||
}
|
|
||||||
}, [assistantEditing, messageMarkdown]);
|
|
||||||
|
|
||||||
const canSaveAssistantEdit =
|
|
||||||
!isLoading &&
|
|
||||||
!isHuman &&
|
|
||||||
!!onEditSave &&
|
|
||||||
!!message.id &&
|
|
||||||
!message.id.startsWith('opt-') &&
|
|
||||||
!!messageMarkdown;
|
|
||||||
const confirmAssistantEdit = useCallback(async () => {
|
|
||||||
const value = assistantDraft.trim();
|
|
||||||
if (!value || !message.id || !onEditSave || assistantSaving) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setAssistantSaving(true);
|
|
||||||
try {
|
|
||||||
await onEditSave(message.id, value);
|
|
||||||
setAssistantEditing(false);
|
|
||||||
} catch {
|
|
||||||
// The page-level save callback owns user-facing error toasts. Keep the
|
|
||||||
// editor open so the user can adjust and retry.
|
|
||||||
} finally {
|
|
||||||
setAssistantSaving(false);
|
|
||||||
}
|
|
||||||
}, [assistantDraft, assistantSaving, message.id, onEditSave]);
|
|
||||||
|
|
||||||
if (!isHuman && assistantEditing) {
|
|
||||||
return (
|
|
||||||
<AIElementMessage
|
|
||||||
id={anchorId}
|
|
||||||
className={cn(
|
|
||||||
'group/conversation-message relative',
|
|
||||||
fitRowToContent ? 'max-w-full w-fit' : 'w-full',
|
|
||||||
anchorId && 'scroll-mt-20',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
from="assistant"
|
|
||||||
>
|
|
||||||
<AIElementMessageContent className="w-full">
|
|
||||||
<div className="flex w-full flex-col gap-2 rounded-2xl border border-primary/20 bg-primary/5 p-3">
|
|
||||||
<Textarea
|
|
||||||
value={assistantDraft}
|
|
||||||
autoFocus
|
|
||||||
onChange={(event) => setAssistantDraft(event.currentTarget.value)}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
|
|
||||||
event.preventDefault();
|
|
||||||
void confirmAssistantEdit();
|
|
||||||
}
|
|
||||||
if (event.key === "Escape") {
|
|
||||||
event.preventDefault();
|
|
||||||
setAssistantEditing(false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="min-h-32 resize-y text-[15px] leading-7"
|
|
||||||
/>
|
|
||||||
<div className="flex items-center justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
disabled={assistantSaving}
|
|
||||||
onClick={() => setAssistantEditing(false)}
|
|
||||||
>
|
|
||||||
{t.common.cancel}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
disabled={!assistantDraft.trim() || assistantSaving}
|
|
||||||
onClick={() => void confirmAssistantEdit()}
|
|
||||||
>
|
|
||||||
{assistantSaving ? "保存中..." : t.common.save}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AIElementMessageContent>
|
|
||||||
</AIElementMessage>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AIElementMessage
|
|
||||||
id={anchorId}
|
id={anchorId}
|
||||||
className={cn(
|
className={cn(
|
||||||
'group/conversation-message relative',
|
'group/conversation-message relative',
|
||||||
@@ -277,12 +187,11 @@ export function MessageListItem({
|
|||||||
threadId={threadId}
|
threadId={threadId}
|
||||||
tokenUsageEnabled={tokenUsageEnabled}
|
tokenUsageEnabled={tokenUsageEnabled}
|
||||||
displaySources={displaySources}
|
displaySources={displaySources}
|
||||||
extraRehypePlugins={extraRehypePlugins}
|
extraRehypePlugins={extraRehypePlugins}
|
||||||
onEditResubmit={onEditResubmit}
|
onEditResubmit={onEditResubmit}
|
||||||
onEditSave={isLoading ? undefined : onEditSave}
|
onMessageDeleted={onMessageDeleted}
|
||||||
onMessageDeleted={onMessageDeleted}
|
turnTime={turnTime}
|
||||||
turnTime={turnTime}
|
/>
|
||||||
/>
|
|
||||||
{/*
|
{/*
|
||||||
Human messages carry their own inline copy/edit toolbar inside
|
Human messages carry their own inline copy/edit toolbar inside
|
||||||
MessageContent (above the timestamp). Only assistant answers use the
|
MessageContent (above the timestamp). Only assistant answers use the
|
||||||
@@ -297,28 +206,15 @@ export function MessageListItem({
|
|||||||
>
|
>
|
||||||
<div className="flex gap-1">
|
<div className="flex gap-1">
|
||||||
<CopyButton clipboardData={messageMarkdown} />
|
<CopyButton clipboardData={messageMarkdown} />
|
||||||
{messageMarkdown && (
|
{messageMarkdown && (
|
||||||
<DownloadWordButton
|
<DownloadWordButton
|
||||||
markdown={messageMarkdown}
|
markdown={messageMarkdown}
|
||||||
fileName="message"
|
fileName="message"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{canSaveAssistantEdit && (
|
</div>
|
||||||
<Tooltip content="编辑消息">
|
</MessageToolbar>
|
||||||
<Button
|
)}
|
||||||
size="icon-sm"
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
className="size-6"
|
|
||||||
onClick={() => setAssistantEditing(true)}
|
|
||||||
>
|
|
||||||
<PencilIcon size={11} />
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</MessageToolbar>
|
|
||||||
)}
|
|
||||||
</AIElementMessage>
|
</AIElementMessage>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -332,31 +228,26 @@ export function MessageListItem({
|
|||||||
* the question; confirming sends the edited text as a brand-new turn (the
|
* the question; confirming sends the edited text as a brand-new turn (the
|
||||||
* original question stays in the thread).
|
* original question stays in the thread).
|
||||||
*/
|
*/
|
||||||
function HumanMessageBlock({
|
function HumanMessageBlock({
|
||||||
messageId,
|
text,
|
||||||
text,
|
pageContext,
|
||||||
pageContext,
|
filesList,
|
||||||
filesList,
|
messageTime,
|
||||||
messageTime,
|
components,
|
||||||
components,
|
onEditResubmit,
|
||||||
onEditResubmit,
|
deleteButton,
|
||||||
onEditSave,
|
}: {
|
||||||
deleteButton,
|
text: string;
|
||||||
}: {
|
pageContext?: EmbeddedPageContext | null;
|
||||||
messageId?: string;
|
filesList: React.ReactNode;
|
||||||
text: string;
|
messageTime: { label: string; full: string } | null;
|
||||||
pageContext?: EmbeddedPageContext | null;
|
components: MarkdownContentProps["components"];
|
||||||
filesList: React.ReactNode;
|
onEditResubmit?: (text: string) => void;
|
||||||
messageTime: { label: string; full: string } | null;
|
deleteButton?: React.ReactNode;
|
||||||
components: MarkdownContentProps["components"];
|
}) {
|
||||||
onEditResubmit?: (text: string) => void;
|
const { t } = useI18n();
|
||||||
onEditSave?: (messageId: string, text: string) => void | Promise<void>;
|
const [editing, setEditing] = useState(false);
|
||||||
deleteButton?: React.ReactNode;
|
const [draft, setDraft] = useState(text);
|
||||||
}) {
|
|
||||||
const { t } = useI18n();
|
|
||||||
const [editing, setEditing] = useState(false);
|
|
||||||
const [draft, setDraft] = useState(text);
|
|
||||||
const [saving, setSaving] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!editing) {
|
if (!editing) {
|
||||||
@@ -364,27 +255,14 @@ function HumanMessageBlock({
|
|||||||
}
|
}
|
||||||
}, [text, editing]);
|
}, [text, editing]);
|
||||||
|
|
||||||
const confirmEdit = useCallback(async () => {
|
const confirmEdit = useCallback(() => {
|
||||||
const value = draft.trim();
|
const value = draft.trim();
|
||||||
if (!value || saving) {
|
if (!value) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (onEditSave && messageId && !messageId.startsWith("opt-")) {
|
onEditResubmit?.(value);
|
||||||
setSaving(true);
|
setEditing(false);
|
||||||
try {
|
}, [draft, onEditResubmit]);
|
||||||
await onEditSave(messageId, value);
|
|
||||||
setEditing(false);
|
|
||||||
} catch {
|
|
||||||
// The page-level save callback owns user-facing error toasts. Keep the
|
|
||||||
// editor open so the user can adjust and retry.
|
|
||||||
} finally {
|
|
||||||
setSaving(false);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
onEditResubmit?.(value);
|
|
||||||
setEditing(false);
|
|
||||||
}, [draft, messageId, onEditResubmit, onEditSave, saving]);
|
|
||||||
|
|
||||||
if (editing) {
|
if (editing) {
|
||||||
return (
|
return (
|
||||||
@@ -397,10 +275,10 @@ function HumanMessageBlock({
|
|||||||
onKeyDown={(event) => {
|
onKeyDown={(event) => {
|
||||||
if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
|
if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
void confirmEdit();
|
confirmEdit();
|
||||||
}
|
}
|
||||||
if (event.key === "Escape") {
|
if (event.key === "Escape") {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
setEditing(false);
|
setEditing(false);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
@@ -408,22 +286,17 @@ function HumanMessageBlock({
|
|||||||
/>
|
/>
|
||||||
<div className="flex items-center justify-end gap-2">
|
<div className="flex items-center justify-end gap-2">
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
disabled={saving}
|
onClick={() => setEditing(false)}
|
||||||
onClick={() => setEditing(false)}
|
>
|
||||||
>
|
{t.common.cancel}
|
||||||
{t.common.cancel}
|
</Button>
|
||||||
</Button>
|
<Button size="sm" onClick={confirmEdit} disabled={!draft.trim()}>
|
||||||
<Button
|
{t.common.confirm}
|
||||||
size="sm"
|
</Button>
|
||||||
onClick={() => void confirmEdit()}
|
</div>
|
||||||
disabled={!draft.trim() || saving}
|
</div>
|
||||||
>
|
|
||||||
{saving ? "保存中..." : onEditSave ? t.common.save : t.common.confirm}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -451,11 +324,11 @@ function HumanMessageBlock({
|
|||||||
{(text || deleteButton) && (
|
{(text || deleteButton) && (
|
||||||
<div className="flex items-center gap-0.5 opacity-0 transition-opacity duration-200 group-hover/conversation-message:opacity-100">
|
<div className="flex items-center gap-0.5 opacity-0 transition-opacity duration-200 group-hover/conversation-message:opacity-100">
|
||||||
{text && <CopyButton clipboardData={text} className="size-6" />}
|
{text && <CopyButton clipboardData={text} className="size-6" />}
|
||||||
{text && (onEditResubmit || onEditSave) && (
|
{text && onEditResubmit && (
|
||||||
<Tooltip content={onEditSave ? "编辑消息" : t.inputBox.editQuestion}>
|
<Tooltip content={t.inputBox.editQuestion}>
|
||||||
<Button
|
<Button
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
type="button"
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="size-6"
|
className="size-6"
|
||||||
onClick={() => setEditing(true)}
|
onClick={() => setEditing(true)}
|
||||||
@@ -523,24 +396,22 @@ function MessageContent_({
|
|||||||
threadId,
|
threadId,
|
||||||
tokenUsageEnabled = false,
|
tokenUsageEnabled = false,
|
||||||
displaySources = [],
|
displaySources = [],
|
||||||
extraRehypePlugins,
|
extraRehypePlugins,
|
||||||
onEditResubmit,
|
onEditResubmit,
|
||||||
onEditSave,
|
onMessageDeleted,
|
||||||
onMessageDeleted,
|
turnTime,
|
||||||
turnTime,
|
}: {
|
||||||
}: {
|
|
||||||
className?: string;
|
className?: string;
|
||||||
message: Message;
|
message: Message;
|
||||||
isLoading?: boolean;
|
isLoading?: boolean;
|
||||||
threadId: string;
|
threadId: string;
|
||||||
tokenUsageEnabled?: boolean;
|
tokenUsageEnabled?: boolean;
|
||||||
displaySources?: RuntimeDisplaySource[];
|
displaySources?: RuntimeDisplaySource[];
|
||||||
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
||||||
onEditResubmit?: (text: string) => void;
|
onEditResubmit?: (text: string) => void;
|
||||||
onEditSave?: (messageId: string, text: string) => void | Promise<void>;
|
onMessageDeleted?: (deletedIds: string[]) => void;
|
||||||
onMessageDeleted?: (deletedIds: string[]) => void;
|
turnTime?: string;
|
||||||
turnTime?: string;
|
}) {
|
||||||
}) {
|
|
||||||
const baseRehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
|
const baseRehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
|
||||||
|
|
||||||
// Streamdown splits content into per-block processors; calling the factory
|
// Streamdown splits content into per-block processors; calling the factory
|
||||||
@@ -684,16 +555,14 @@ function MessageContent_({
|
|||||||
const canDelete =
|
const canDelete =
|
||||||
!!onMessageDeleted && !!message.id && !message.id.startsWith('opt-');
|
!!onMessageDeleted && !!message.id && !message.id.startsWith('opt-');
|
||||||
return (
|
return (
|
||||||
<HumanMessageBlock
|
<HumanMessageBlock
|
||||||
messageId={message.id}
|
text={parsedHumanContent.content}
|
||||||
text={parsedHumanContent.content}
|
pageContext={parsedHumanContent.pageContext}
|
||||||
pageContext={parsedHumanContent.pageContext}
|
filesList={filesList}
|
||||||
filesList={filesList}
|
messageTime={messageTime}
|
||||||
messageTime={messageTime}
|
components={components}
|
||||||
components={components}
|
onEditResubmit={onEditResubmit}
|
||||||
onEditResubmit={onEditResubmit}
|
deleteButton={
|
||||||
onEditSave={onEditSave}
|
|
||||||
deleteButton={
|
|
||||||
canDelete ? (
|
canDelete ? (
|
||||||
<DeleteMessageButton
|
<DeleteMessageButton
|
||||||
threadId={threadId}
|
threadId={threadId}
|
||||||
|
|||||||
@@ -33,8 +33,7 @@ import {
|
|||||||
} from "@/core/skill-display/runtime";
|
} from "@/core/skill-display/runtime";
|
||||||
import type { Subtask } from "@/core/tasks";
|
import type { Subtask } from "@/core/tasks";
|
||||||
import { useUpdateSubtask } from "@/core/tasks/context";
|
import { useUpdateSubtask } from "@/core/tasks/context";
|
||||||
import type { AgentThreadState } from "@/core/threads";
|
import type { AgentThreadState } from "@/core/threads";
|
||||||
import { isSingleRoundRagMessage } from "@/core/threads/use-single-round-rag";
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { resolveAllowMultiple } from "@/roundtable-planning/lib/clarification";
|
import { resolveAllowMultiple } from "@/roundtable-planning/lib/clarification";
|
||||||
|
|
||||||
@@ -98,18 +97,14 @@ export function MessageList({
|
|||||||
tokenUsageEnabled = false,
|
tokenUsageEnabled = false,
|
||||||
extraRehypePlugins,
|
extraRehypePlugins,
|
||||||
scrollButtonClassName,
|
scrollButtonClassName,
|
||||||
onClarificationSubmit,
|
onClarificationSubmit,
|
||||||
onEditResubmit,
|
onEditResubmit,
|
||||||
onEditSave,
|
onSetupAgentApprove,
|
||||||
messageContentOverrides,
|
onSetupAgentReject,
|
||||||
externallyHiddenMessageIds,
|
onSetupWritingApprove,
|
||||||
onSetupAgentApprove,
|
onSetupWritingReject,
|
||||||
onSetupAgentReject,
|
onSetupWritingStart,
|
||||||
onSetupWritingApprove,
|
}: {
|
||||||
onSetupWritingReject,
|
|
||||||
onSetupWritingStart,
|
|
||||||
onOpenArtifact,
|
|
||||||
}: {
|
|
||||||
className?: string;
|
className?: string;
|
||||||
contentClassName?: string;
|
contentClassName?: string;
|
||||||
fitMessageRowsToContent?: boolean;
|
fitMessageRowsToContent?: boolean;
|
||||||
@@ -120,19 +115,15 @@ export function MessageList({
|
|||||||
/** 额外定位「回到最新」悬浮按钮——不同页面输入框高度不同，需上移让位。 */
|
/** 额外定位「回到最新」悬浮按钮——不同页面输入框高度不同，需上移让位。 */
|
||||||
scrollButtonClassName?: string;
|
scrollButtonClassName?: string;
|
||||||
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
||||||
onClarificationSubmit?: (answer: string) => void | Promise<void>;
|
onClarificationSubmit?: (answer: string) => void | Promise<void>;
|
||||||
onEditResubmit?: (text: string) => void;
|
onEditResubmit?: (text: string) => void;
|
||||||
onEditSave?: (messageId: string, text: string) => void | Promise<void>;
|
onSetupAgentApprove?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
|
||||||
messageContentOverrides?: Record<string, string>;
|
|
||||||
externallyHiddenMessageIds?: Set<string>;
|
|
||||||
onSetupAgentApprove?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
|
|
||||||
onSetupAgentReject?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
|
onSetupAgentReject?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
|
||||||
onSetupWritingApprove?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
onSetupWritingApprove?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
||||||
onSetupWritingReject?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
onSetupWritingReject?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
||||||
/** 审批卡「直接开始写作」回调：应用配置（含已确认大纲）并立即启动写作流程（仅写作页提供，模板编辑等场景缺省隐藏该按钮）。 */
|
/** 审批卡「直接开始写作」回调：应用配置（含已确认大纲）并立即启动写作流程（仅写作页提供，模板编辑等场景缺省隐藏该按钮）。 */
|
||||||
onSetupWritingStart?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
onSetupWritingStart?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
||||||
onOpenArtifact?: (filepath: string) => void;
|
}) {
|
||||||
}) {
|
|
||||||
const baseRehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
|
const baseRehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
|
||||||
const rehypePlugins = useMemo(
|
const rehypePlugins = useMemo(
|
||||||
() => (extraRehypePlugins?.length ? [...baseRehypePlugins, ...extraRehypePlugins] : baseRehypePlugins),
|
() => (extraRehypePlugins?.length ? [...baseRehypePlugins, ...extraRehypePlugins] : baseRehypePlugins),
|
||||||
@@ -164,33 +155,17 @@ export function MessageList({
|
|||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const allMessages = useMemo(() => {
|
const allMessages = useMemo(
|
||||||
const hasOverrides = messageContentOverrides && Object.keys(messageContentOverrides).length > 0;
|
() => thread.messages.filter((m) => !isHiddenFromUIMessage(m)),
|
||||||
return thread.messages
|
[thread.messages],
|
||||||
.filter((m) => !isHiddenFromUIMessage(m))
|
);
|
||||||
.map((message) => {
|
const messages = useMemo(
|
||||||
const override =
|
() =>
|
||||||
hasOverrides && message.id
|
hiddenMessageIds.size === 0
|
||||||
? messageContentOverrides?.[message.id]
|
? allMessages
|
||||||
: undefined;
|
: allMessages.filter((m) => !m.id || !hiddenMessageIds.has(m.id)),
|
||||||
return override === undefined
|
[allMessages, hiddenMessageIds],
|
||||||
? message
|
);
|
||||||
: ({ ...message, content: override } as Message);
|
|
||||||
});
|
|
||||||
}, [messageContentOverrides, thread.messages]);
|
|
||||||
const messages = useMemo(
|
|
||||||
() => {
|
|
||||||
const externalHidden = externallyHiddenMessageIds ?? new Set<string>();
|
|
||||||
return hiddenMessageIds.size === 0 && externalHidden.size === 0
|
|
||||||
? allMessages
|
|
||||||
: allMessages.filter(
|
|
||||||
(m) =>
|
|
||||||
!m.id ||
|
|
||||||
(!hiddenMessageIds.has(m.id) && !externalHidden.has(m.id)),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
[allMessages, externallyHiddenMessageIds, hiddenMessageIds],
|
|
||||||
);
|
|
||||||
|
|
||||||
const askTimes = useChatAskTimes();
|
const askTimes = useChatAskTimes();
|
||||||
|
|
||||||
@@ -236,17 +211,12 @@ export function MessageList({
|
|||||||
}, [messages, askTimes]);
|
}, [messages, askTimes]);
|
||||||
|
|
||||||
const [settings] = useLocalSettings();
|
const [settings] = useLocalSettings();
|
||||||
const ragModeEnabled =
|
const ragModeEnabled =
|
||||||
settings.display.ragModeEnabled || isThreadRagModeLocked(threadId);
|
settings.display.ragModeEnabled || isThreadRagModeLocked(threadId);
|
||||||
const hasSingleRoundRag = useMemo(
|
const { skills } = useSkills();
|
||||||
() => messages.some(isSingleRoundRagMessage),
|
const skillDisplayMap = useMemo(
|
||||||
[messages],
|
() => (ragModeEnabled ? buildSkillDisplayMap(skills) : new Map()),
|
||||||
);
|
[ragModeEnabled, skills],
|
||||||
const referencesEnabled = ragModeEnabled || hasSingleRoundRag;
|
|
||||||
const { skills } = useSkills();
|
|
||||||
const skillDisplayMap = useMemo(
|
|
||||||
() => (referencesEnabled ? buildSkillDisplayMap(skills) : new Map()),
|
|
||||||
[referencesEnabled, skills],
|
|
||||||
);
|
);
|
||||||
// Same per-turn reference batches the right-side panel renders (backend
|
// Same per-turn reference batches the right-side panel renders (backend
|
||||||
// batches preferred). Inline [n] tokens must resolve against these so badge
|
// batches preferred). Inline [n] tokens must resolve against these so badge
|
||||||
@@ -379,7 +349,7 @@ export function MessageList({
|
|||||||
if (group.type === "human" || group.type === "assistant") {
|
if (group.type === "human" || group.type === "assistant") {
|
||||||
return group.messages.map((msg) => {
|
return group.messages.map((msg) => {
|
||||||
const isAssistantMessage =
|
const isAssistantMessage =
|
||||||
referencesEnabled &&
|
ragModeEnabled &&
|
||||||
group.type === "assistant" &&
|
group.type === "assistant" &&
|
||||||
msg.type === "ai";
|
msg.type === "ai";
|
||||||
const batchSources = isAssistantMessage
|
const batchSources = isAssistantMessage
|
||||||
@@ -410,11 +380,10 @@ export function MessageList({
|
|||||||
threadId={threadId}
|
threadId={threadId}
|
||||||
tokenUsageEnabled={tokenUsageEnabled}
|
tokenUsageEnabled={tokenUsageEnabled}
|
||||||
displaySources={displaySources}
|
displaySources={displaySources}
|
||||||
extraRehypePlugins={extraRehypePlugins}
|
extraRehypePlugins={extraRehypePlugins}
|
||||||
onEditResubmit={onEditResubmit}
|
onEditResubmit={onEditResubmit}
|
||||||
onEditSave={onEditSave}
|
onMessageDeleted={
|
||||||
onMessageDeleted={
|
allowDelete ? handleMessageDeleted : undefined
|
||||||
allowDelete ? handleMessageDeleted : undefined
|
|
||||||
}
|
}
|
||||||
turnTime={msg.id ? turnTimes.get(msg.id) : undefined}
|
turnTime={msg.id ? turnTimes.get(msg.id) : undefined}
|
||||||
/>
|
/>
|
||||||
@@ -519,11 +488,7 @@ export function MessageList({
|
|||||||
className="mb-4"
|
className="mb-4"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<ArtifactFileList
|
<ArtifactFileList files={files} threadId={threadId} />
|
||||||
files={files}
|
|
||||||
threadId={threadId}
|
|
||||||
onOpenArtifact={onOpenArtifact}
|
|
||||||
/>
|
|
||||||
<MessageTokenUsageList
|
<MessageTokenUsageList
|
||||||
enabled={tokenUsageEnabled}
|
enabled={tokenUsageEnabled}
|
||||||
isLoading={thread.isLoading}
|
isLoading={thread.isLoading}
|
||||||
|
|||||||
@@ -46,23 +46,20 @@ function getModeDescriptionKey(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ModeHoverGuide({
|
export function ModeHoverGuide({
|
||||||
mode,
|
mode,
|
||||||
children,
|
children,
|
||||||
showTitle = true,
|
showTitle = true,
|
||||||
tooltipContent,
|
}: {
|
||||||
}: {
|
mode: AgentMode;
|
||||||
mode: AgentMode;
|
children: React.ReactNode;
|
||||||
children: React.ReactNode;
|
/** When true, tooltip shows "ModeName: Description". When false, only description. */
|
||||||
/** When true, tooltip shows "ModeName: Description". When false, only description. */
|
showTitle?: boolean;
|
||||||
showTitle?: boolean;
|
}) {
|
||||||
/** Overrides the standard mode tooltip for page-specific execution modes. */
|
const { t } = useI18n();
|
||||||
tooltipContent?: string;
|
const label = t.inputBox[getModeLabelKey(mode)];
|
||||||
}) {
|
const description = t.inputBox[getModeDescriptionKey(mode)];
|
||||||
const { t } = useI18n();
|
const content = showTitle ? `${label}: ${description}` : description;
|
||||||
const label = t.inputBox[getModeLabelKey(mode)];
|
|
||||||
const description = t.inputBox[getModeDescriptionKey(mode)];
|
|
||||||
const content = tooltipContent ?? (showTitle ? `${label}: ${description}` : description);
|
|
||||||
|
|
||||||
return <Tooltip content={content}>{children}</Tooltip>;
|
return <Tooltip content={content}>{children}</Tooltip>;
|
||||||
}
|
}
|
||||||
@@ -7,13 +7,10 @@ import {
|
|||||||
ExternalLink,
|
ExternalLink,
|
||||||
LayoutGridIcon,
|
LayoutGridIcon,
|
||||||
LayoutIcon,
|
LayoutIcon,
|
||||||
LeafIcon,
|
|
||||||
ListIcon,
|
ListIcon,
|
||||||
MoonIcon,
|
MoonIcon,
|
||||||
PanelLeftIcon,
|
PanelLeftIcon,
|
||||||
PaletteIcon,
|
|
||||||
Plus,
|
Plus,
|
||||||
SnowflakeIcon,
|
|
||||||
SunIcon,
|
SunIcon,
|
||||||
Trash2,
|
Trash2,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
@@ -21,7 +18,7 @@ import { useEffect, useMemo, useState, type ComponentType, type SVGProps } from
|
|||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
|
||||||
import { useTheme, type ThemeType } from "@/contexts/ThemeContext";
|
import { useTheme } from "@/contexts/ThemeContext";
|
||||||
|
|
||||||
import { FONT_SCALE_OPTIONS } from "@/components/font-scale";
|
import { FONT_SCALE_OPTIONS } from "@/components/font-scale";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
@@ -64,17 +61,16 @@ import {
|
|||||||
import PrivateSquareSettingsPage from "@/pages/PrivateSquareSettingsPage";
|
import PrivateSquareSettingsPage from "@/pages/PrivateSquareSettingsPage";
|
||||||
import PublishSquaresSettingsPage from "@/pages/PublishSquaresSettingsPage";
|
import PublishSquaresSettingsPage from "@/pages/PublishSquaresSettingsPage";
|
||||||
import PromptPrefixSettingsPage from "@/pages/PromptPrefixSettingsPage";
|
import PromptPrefixSettingsPage from "@/pages/PromptPrefixSettingsPage";
|
||||||
import SkillCompressionSettingsPage from "@/pages/SkillCompressionSettingsPage";
|
import SkillCompressionSettingsPage from "@/pages/SkillCompressionSettingsPage";
|
||||||
|
|
||||||
import { CustomThemeLibrarySettings } from "./custom-theme-library-settings";
|
import { SettingsSection } from "./settings-section";
|
||||||
import { SettingsSection } from "./settings-section";
|
|
||||||
|
|
||||||
const languageOptions: { value: Locale; label: string }[] = [
|
const languageOptions: { value: Locale; label: string }[] = [
|
||||||
{ value: "en-US", label: enUS.locale.localName },
|
{ value: "en-US", label: enUS.locale.localName },
|
||||||
{ value: "zh-CN", label: zhCN.locale.localName },
|
{ value: "zh-CN", label: zhCN.locale.localName },
|
||||||
];
|
];
|
||||||
|
|
||||||
const DEFAULT_SHORTCUT_THEME_MAP = "red=red;green=green;blue=blue;dark-blue=dark-blue";
|
const DEFAULT_SHORTCUT_THEME_MAP = "red=red;blue=blue;dark-blue=dark-blue";
|
||||||
|
|
||||||
function makeShortcutId() {
|
function makeShortcutId() {
|
||||||
if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
|
if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
|
||||||
@@ -178,21 +174,9 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
|||||||
const { data: citationDisplay } = useCitationDisplaySettings();
|
const { data: citationDisplay } = useCitationDisplaySettings();
|
||||||
const updateCitationDisplay = useUpdateCitationDisplaySettings();
|
const updateCitationDisplay = useUpdateCitationDisplaySettings();
|
||||||
const globalDefault = appearance?.default_theme ?? "light";
|
const globalDefault = appearance?.default_theme ?? "light";
|
||||||
const globalSkillView = appearance?.default_skill_view ?? "list";
|
const globalSkillView = appearance?.default_skill_view ?? "list";
|
||||||
const globalAgentView = appearance?.default_agent_view ?? "card";
|
const globalAgentView = appearance?.default_agent_view ?? "card";
|
||||||
const globalLayoutMode = appearance?.default_layout_mode ?? "full";
|
const globalLayoutMode = appearance?.default_layout_mode ?? "full";
|
||||||
const globalDefaultLabel = useMemo(() => {
|
|
||||||
const customTheme = (appearance?.custom_themes ?? []).find(
|
|
||||||
(preset) => preset.id === globalDefault,
|
|
||||||
);
|
|
||||||
if (customTheme) return customTheme.name;
|
|
||||||
if (globalDefault === "light") return "浅色";
|
|
||||||
if (globalDefault === "dark") return "深色";
|
|
||||||
if (globalDefault === "lightgreen") return "绿色";
|
|
||||||
if (globalDefault === "iceblue") return "冰川蓝";
|
|
||||||
if (globalDefault === "lightyellow") return "浅黄色";
|
|
||||||
return "浅蓝";
|
|
||||||
}, [appearance?.custom_themes, globalDefault]);
|
|
||||||
// 有效界面模式：用户自己选过则以其为准，否则跟随管理员系统默认（再否则会话级回退）。
|
// 有效界面模式：用户自己选过则以其为准，否则跟随管理员系统默认（再否则会话级回退）。
|
||||||
const [effectiveLayoutMode, setLayoutMode] = useLayoutMode();
|
const [effectiveLayoutMode, setLayoutMode] = useLayoutMode();
|
||||||
const cleanupWords =
|
const cleanupWords =
|
||||||
@@ -227,24 +211,14 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSetGlobalDefault = async (
|
const handleSetGlobalDefault = async (
|
||||||
value: "light" | "dark" | "lightblue" | "lightgreen" | "iceblue" | "lightyellow",
|
value: "light" | "dark" | "lightblue",
|
||||||
) => {
|
) => {
|
||||||
if (value === globalDefault) return;
|
if (value === globalDefault) return;
|
||||||
try {
|
try {
|
||||||
await updateAppearance.mutateAsync({ default_theme: value });
|
await updateAppearance.mutateAsync({ default_theme: value });
|
||||||
const label =
|
const label =
|
||||||
value === "light"
|
value === "light" ? "浅色" : value === "dark" ? "深色" : "浅蓝";
|
||||||
? "浅色"
|
|
||||||
: value === "dark"
|
|
||||||
? "深色"
|
|
||||||
: value === "lightgreen"
|
|
||||||
? "绿色"
|
|
||||||
: value === "iceblue"
|
|
||||||
? "冰川蓝"
|
|
||||||
: value === "lightyellow"
|
|
||||||
? "浅黄色"
|
|
||||||
: "浅蓝";
|
|
||||||
toast.success(`已将系统默认主题设置为${label}`);
|
toast.success(`已将系统默认主题设置为${label}`);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast.error(e instanceof Error ? e.message : "保存失败");
|
toast.error(e instanceof Error ? e.message : "保存失败");
|
||||||
@@ -394,44 +368,20 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
|||||||
description: t.settings.appearance.darkDescription,
|
description: t.settings.appearance.darkDescription,
|
||||||
icon: MoonIcon,
|
icon: MoonIcon,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "lightblue",
|
id: "lightblue",
|
||||||
label: t.settings.appearance.lightblue,
|
label: t.settings.appearance.lightblue,
|
||||||
description: t.settings.appearance.lightblueDescription,
|
description: t.settings.appearance.lightblueDescription,
|
||||||
icon: DropletIcon,
|
icon: DropletIcon,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: "lightgreen",
|
|
||||||
label: t.settings.appearance.lightgreen,
|
|
||||||
description: t.settings.appearance.lightgreenDescription,
|
|
||||||
icon: LeafIcon,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "iceblue",
|
|
||||||
label: t.settings.appearance.iceblue,
|
|
||||||
description: t.settings.appearance.iceblueDescription,
|
|
||||||
icon: SnowflakeIcon,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "lightyellow",
|
|
||||||
label: t.settings.appearance.lightyellow,
|
|
||||||
description: t.settings.appearance.lightyellowDescription,
|
|
||||||
icon: SunIcon,
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
t.settings.appearance.dark,
|
t.settings.appearance.dark,
|
||||||
t.settings.appearance.darkDescription,
|
t.settings.appearance.darkDescription,
|
||||||
t.settings.appearance.light,
|
t.settings.appearance.light,
|
||||||
t.settings.appearance.lightDescription,
|
t.settings.appearance.lightDescription,
|
||||||
t.settings.appearance.lightblue,
|
t.settings.appearance.lightblue,
|
||||||
t.settings.appearance.lightblueDescription,
|
t.settings.appearance.lightblueDescription,
|
||||||
t.settings.appearance.lightgreen,
|
|
||||||
t.settings.appearance.lightgreenDescription,
|
|
||||||
t.settings.appearance.iceblue,
|
|
||||||
t.settings.appearance.iceblueDescription,
|
|
||||||
t.settings.appearance.lightyellow,
|
|
||||||
t.settings.appearance.lightyellowDescription,
|
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -442,34 +392,18 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
|||||||
description={t.settings.appearance.themeDescription}
|
description={t.settings.appearance.themeDescription}
|
||||||
>
|
>
|
||||||
<div className="grid gap-3 lg:grid-cols-2">
|
<div className="grid gap-3 lg:grid-cols-2">
|
||||||
{themeOptions.map((option) => (
|
{themeOptions.map((option) => (
|
||||||
<ThemePreviewCard
|
<ThemePreviewCard
|
||||||
key={option.id}
|
key={option.id}
|
||||||
icon={option.icon}
|
icon={option.icon}
|
||||||
label={option.label}
|
label={option.label}
|
||||||
description={option.description}
|
description={option.description}
|
||||||
active={currentTheme === option.id}
|
active={currentTheme === option.id}
|
||||||
mode={option.id as "light" | "dark" | "lightblue" | "lightgreen" | "iceblue" | "lightyellow"}
|
mode={option.id as "light" | "dark" | "lightblue"}
|
||||||
onSelect={(value) => setTheme(value)}
|
onSelect={(value) => setTheme(value)}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
{(appearance?.custom_themes ?? [])
|
</div>
|
||||||
.filter((preset) => preset.enabled)
|
|
||||||
.sort((a, b) => a.sort_order - b.sort_order)
|
|
||||||
.map((preset) => (
|
|
||||||
<ThemePreviewCard
|
|
||||||
key={preset.id}
|
|
||||||
icon={PaletteIcon}
|
|
||||||
label={preset.name}
|
|
||||||
description={`自定义主题 · 主色 ${preset.primary}`}
|
|
||||||
active={currentTheme === preset.id}
|
|
||||||
mode={preset.id}
|
|
||||||
previewDark={preset.mode === "dark"}
|
|
||||||
accentColor={preset.primary}
|
|
||||||
onSelect={(value) => setTheme(value)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
||||||
<Separator />
|
<Separator />
|
||||||
@@ -607,80 +541,30 @@ export function AppearanceSettingsPage({ onClose }: { onClose?: () => void }) {
|
|||||||
<MoonIcon className="mr-1.5 size-4" />
|
<MoonIcon className="mr-1.5 size-4" />
|
||||||
深色
|
深色
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant={globalDefault === "lightblue" ? "default" : "outline"}
|
variant={globalDefault === "lightblue" ? "default" : "outline"}
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => void handleSetGlobalDefault("lightblue")}
|
onClick={() => void handleSetGlobalDefault("lightblue")}
|
||||||
disabled={updateAppearance.isPending}
|
disabled={updateAppearance.isPending}
|
||||||
>
|
>
|
||||||
<DropletIcon className="mr-1.5 size-4" />
|
<DropletIcon className="mr-1.5 size-4" />
|
||||||
浅蓝
|
浅蓝
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<p className="text-muted-foreground ml-2 text-xs">
|
||||||
type="button"
|
当前系统默认：
|
||||||
variant={globalDefault === "lightgreen" ? "default" : "outline"}
|
{globalDefault === "light"
|
||||||
size="sm"
|
? "浅色"
|
||||||
onClick={() => void handleSetGlobalDefault("lightgreen")}
|
: globalDefault === "dark"
|
||||||
disabled={updateAppearance.isPending}
|
? "深色"
|
||||||
>
|
: "浅蓝"}
|
||||||
<LeafIcon className="mr-1.5 size-4" />
|
</p>
|
||||||
绿色
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant={globalDefault === "iceblue" ? "default" : "outline"}
|
|
||||||
size="sm"
|
|
||||||
onClick={() => void handleSetGlobalDefault("iceblue")}
|
|
||||||
disabled={updateAppearance.isPending}
|
|
||||||
>
|
|
||||||
<SnowflakeIcon className="mr-1.5 size-4" />
|
|
||||||
冰川蓝
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant={globalDefault === "lightyellow" ? "default" : "outline"}
|
|
||||||
size="sm"
|
|
||||||
onClick={() => void handleSetGlobalDefault("lightyellow")}
|
|
||||||
disabled={updateAppearance.isPending}
|
|
||||||
>
|
|
||||||
<SunIcon className="mr-1.5 size-4" />
|
|
||||||
浅黄色
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() =>
|
|
||||||
document
|
|
||||||
.getElementById("custom-theme-library")
|
|
||||||
?.scrollIntoView({ behavior: "smooth", block: "start" })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<PaletteIcon className="mr-1.5 size-4" />
|
|
||||||
管理自定义主题
|
|
||||||
</Button>
|
|
||||||
<p className="text-muted-foreground ml-2 text-xs">
|
|
||||||
当前系统默认：{globalDefaultLabel}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<div id="custom-theme-library" className="scroll-mt-4">
|
|
||||||
<Separator />
|
|
||||||
<SettingsSection
|
|
||||||
title="自定义主题库（管理员）"
|
|
||||||
description="管理员可按品牌主色创建主题，并设置为系统默认；用户只会看到已启用的主题并可自行切换。"
|
|
||||||
>
|
|
||||||
<CustomThemeLibrarySettings />
|
|
||||||
</SettingsSection>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isAdmin && (
|
|
||||||
<>
|
<>
|
||||||
<Separator />
|
<Separator />
|
||||||
<SettingsSection
|
<SettingsSection
|
||||||
@@ -1181,24 +1065,19 @@ function CompactShortcutSettings({
|
|||||||
function ThemePreviewCard({
|
function ThemePreviewCard({
|
||||||
icon: Icon,
|
icon: Icon,
|
||||||
label,
|
label,
|
||||||
description,
|
description,
|
||||||
active,
|
active,
|
||||||
mode,
|
mode,
|
||||||
previewDark,
|
onSelect,
|
||||||
accentColor,
|
}: {
|
||||||
onSelect,
|
icon: ComponentType<SVGProps<SVGSVGElement>>;
|
||||||
}: {
|
label: string;
|
||||||
icon: ComponentType<SVGProps<SVGSVGElement>>;
|
description: string;
|
||||||
label: string;
|
active: boolean;
|
||||||
description: string;
|
mode: "light" | "dark" | "lightblue";
|
||||||
active: boolean;
|
onSelect: (mode: "light" | "dark" | "lightblue") => void;
|
||||||
mode: ThemeType;
|
}) {
|
||||||
previewDark?: boolean;
|
const previewMode = mode;
|
||||||
accentColor?: string;
|
|
||||||
onSelect: (mode: ThemeType) => void;
|
|
||||||
}) {
|
|
||||||
const previewMode = mode;
|
|
||||||
const isDarkPreview = previewDark ?? previewMode === "dark";
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -1224,38 +1103,23 @@ function ThemePreviewCard({
|
|||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative overflow-hidden rounded-md border text-xs transition-colors",
|
"relative overflow-hidden rounded-md border text-xs transition-colors",
|
||||||
isDarkPreview
|
previewMode === "dark"
|
||||||
? "border-neutral-800 bg-neutral-900 text-neutral-200"
|
? "border-neutral-800 bg-neutral-900 text-neutral-200"
|
||||||
: previewMode === "lightblue"
|
: previewMode === "lightblue"
|
||||||
? "border-blue-200 bg-white text-slate-900"
|
? "border-blue-200 bg-white text-slate-900"
|
||||||
: previewMode === "lightgreen"
|
: "border-slate-200 bg-white text-slate-900",
|
||||||
? "border-emerald-200 bg-white text-emerald-950"
|
|
||||||
: previewMode === "iceblue"
|
|
||||||
? "border-sky-200 bg-[#F7FBFE] text-[#18324A]"
|
|
||||||
: previewMode === "lightyellow"
|
|
||||||
? "border-lime-200 bg-[#FCFDF5] text-[#303D23]"
|
|
||||||
: "border-slate-200 bg-white text-slate-900",
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="border-border/50 flex items-center gap-2 border-b px-3 py-2">
|
<div className="border-border/50 flex items-center gap-2 border-b px-3 py-2">
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"h-2 w-2 rounded-full",
|
"h-2 w-2 rounded-full",
|
||||||
accentColor
|
previewMode === "dark"
|
||||||
? ""
|
? "bg-emerald-400"
|
||||||
: isDarkPreview
|
: previewMode === "lightblue"
|
||||||
? "bg-emerald-400"
|
? "bg-blue-500"
|
||||||
: previewMode === "lightblue"
|
: "bg-emerald-500",
|
||||||
? "bg-blue-500"
|
)}
|
||||||
: previewMode === "lightgreen"
|
|
||||||
? "bg-[#07c05f]"
|
|
||||||
: previewMode === "iceblue"
|
|
||||||
? "bg-[#9BCEF1]"
|
|
||||||
: previewMode === "lightyellow"
|
|
||||||
? "bg-[#F3FBD9]"
|
|
||||||
: "bg-[#cf1322]",
|
|
||||||
)}
|
|
||||||
style={accentColor ? { backgroundColor: accentColor } : undefined}
|
|
||||||
/>
|
/>
|
||||||
<div className="h-2 w-10 rounded-full bg-current/20" />
|
<div className="h-2 w-10 rounded-full bg-current/20" />
|
||||||
<div className="h-2 w-6 rounded-full bg-current/15" />
|
<div className="h-2 w-6 rounded-full bg-current/15" />
|
||||||
|
|||||||
@@ -1,771 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {
|
|
||||||
ChevronDownIcon,
|
|
||||||
ChevronUpIcon,
|
|
||||||
CheckIcon,
|
|
||||||
MoonIcon,
|
|
||||||
PaletteIcon,
|
|
||||||
PlusIcon,
|
|
||||||
RotateCcwIcon,
|
|
||||||
SaveIcon,
|
|
||||||
SlidersHorizontalIcon,
|
|
||||||
SunIcon,
|
|
||||||
Trash2Icon,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { useEffect, useId, useMemo, useState, type CSSProperties } from "react";
|
|
||||||
import { ColorPickerPanel } from "tdesign-react";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import { Switch } from "@/components/ui/switch";
|
|
||||||
import type {
|
|
||||||
CustomThemeColorOverrides,
|
|
||||||
CustomThemePreset,
|
|
||||||
} from "@/core/system-settings/api";
|
|
||||||
import {
|
|
||||||
useAppearanceSettings,
|
|
||||||
useUpdateAppearanceSettings,
|
|
||||||
} from "@/core/system-settings/hooks";
|
|
||||||
import {
|
|
||||||
CUSTOM_THEME_ADVANCED_KEYS,
|
|
||||||
getCustomThemeAutomaticTokens,
|
|
||||||
getCustomThemeTokens,
|
|
||||||
normalizeHexColor,
|
|
||||||
customThemeTextContrast,
|
|
||||||
type CustomThemeAdvancedKey,
|
|
||||||
} from "@/core/theme/custom-theme";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
const MAX_CUSTOM_THEMES = 12;
|
|
||||||
const SUGGESTED_COLORS = [
|
|
||||||
"#9BCEF1",
|
|
||||||
"#F3FBD9",
|
|
||||||
"#7AB8F5",
|
|
||||||
"#8ED1B2",
|
|
||||||
"#C6B4F6",
|
|
||||||
"#F3C5A6",
|
|
||||||
"#F3B1B7",
|
|
||||||
"#63C4C8",
|
|
||||||
];
|
|
||||||
const TEXT_COLORS = ["#202A3A", "#172033", "#2D587A", "#4C6330", "#F4F7FB", "#FFFFFF"];
|
|
||||||
|
|
||||||
const ADVANCED_COLOR_FIELDS: Array<{
|
|
||||||
key: CustomThemeAdvancedKey;
|
|
||||||
label: string;
|
|
||||||
description: string;
|
|
||||||
token: string;
|
|
||||||
}> = [
|
|
||||||
{
|
|
||||||
key: "button_hover",
|
|
||||||
label: "按钮悬停色",
|
|
||||||
description: "主按钮悬停时的背景色",
|
|
||||||
token: "--theme-button-hover",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "navigation_gradient_start",
|
|
||||||
label: "导航渐变起点",
|
|
||||||
description: "全量模式顶部导航栏左侧的渐变色",
|
|
||||||
token: "--navigation-gradient-start",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "navigation_gradient_end",
|
|
||||||
label: "导航渐变终点",
|
|
||||||
description: "全量模式顶部导航栏右侧的渐变色",
|
|
||||||
token: "--navigation-gradient-end",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "selected_background",
|
|
||||||
label: "选中背景",
|
|
||||||
description: "左侧菜单、卡片选中时的浅背景",
|
|
||||||
token: "--theme-selected-background",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "border",
|
|
||||||
label: "边框色",
|
|
||||||
description: "卡片、输入框和分隔线",
|
|
||||||
token: "--border",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "muted",
|
|
||||||
label: "弱化背景",
|
|
||||||
description: "次级区域与弱化容器",
|
|
||||||
token: "--muted",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "muted_text",
|
|
||||||
label: "辅助文字",
|
|
||||||
description: "说明、占位和次要信息文字",
|
|
||||||
token: "--muted-foreground",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "destructive",
|
|
||||||
label: "删除/危险色",
|
|
||||||
description: "删除按钮、错误与危险操作的颜色",
|
|
||||||
token: "--destructive",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "brand_title",
|
|
||||||
label: "栏目标题文字",
|
|
||||||
description: "业务链、分析记录等带图标栏目标题",
|
|
||||||
token: "--brand-title-foreground",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "primary_foreground",
|
|
||||||
label: "主色块文字（Logo/状态标签）",
|
|
||||||
description: "Logo 的 C、启用状态和默认标签；不影响主按钮文字",
|
|
||||||
token: "--primary-foreground",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
function makeThemeId(): `custom-theme-${string}` {
|
|
||||||
const suffix =
|
|
||||||
typeof crypto !== "undefined" && "randomUUID" in crypto
|
|
||||||
? crypto.randomUUID().replace(/[^a-z0-9-]/gi, "").toLowerCase()
|
|
||||||
: `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`;
|
|
||||||
return `custom-theme-${suffix}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function newCustomTheme(order: number): CustomThemePreset {
|
|
||||||
return {
|
|
||||||
id: makeThemeId(),
|
|
||||||
name: `自定义主题 ${order + 1}`,
|
|
||||||
primary: "#9BCEF1",
|
|
||||||
text_color: null,
|
|
||||||
mode: "light",
|
|
||||||
overrides: {},
|
|
||||||
enabled: true,
|
|
||||||
sort_order: order,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeColorOverrides(
|
|
||||||
overrides: CustomThemeColorOverrides | undefined,
|
|
||||||
): CustomThemeColorOverrides {
|
|
||||||
const normalized: CustomThemeColorOverrides = {};
|
|
||||||
for (const key of CUSTOM_THEME_ADVANCED_KEYS) {
|
|
||||||
const value = overrides?.[key];
|
|
||||||
if (typeof value === "string" && value.trim()) {
|
|
||||||
normalized[key] = normalizeHexColor(value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return normalized;
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeThemeDrafts(
|
|
||||||
themes: CustomThemePreset[] | undefined,
|
|
||||||
): CustomThemePreset[] {
|
|
||||||
return [...(themes ?? [])]
|
|
||||||
.sort((a, b) => a.sort_order - b.sort_order)
|
|
||||||
.map((theme, index) => ({
|
|
||||||
...theme,
|
|
||||||
id: theme.id || makeThemeId(),
|
|
||||||
name: theme.name || `自定义主题 ${index + 1}`,
|
|
||||||
primary: normalizeHexColor(theme.primary),
|
|
||||||
text_color:
|
|
||||||
typeof theme.text_color === "string" && theme.text_color.trim()
|
|
||||||
? normalizeHexColor(theme.text_color)
|
|
||||||
: null,
|
|
||||||
mode: theme.mode === "dark" ? "dark" : "light",
|
|
||||||
overrides: normalizeColorOverrides(theme.overrides),
|
|
||||||
enabled: theme.enabled !== false,
|
|
||||||
sort_order: index,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render the TDesign panel inside the settings dialog instead of its default
|
|
||||||
* body-level popup. The dialog otherwise treats clicks inside that portal as
|
|
||||||
* outside interactions and closes the picker while a colour is being chosen.
|
|
||||||
*/
|
|
||||||
function InlineThemeColorPicker({
|
|
||||||
value,
|
|
||||||
fallback,
|
|
||||||
swatchColors,
|
|
||||||
onCommit,
|
|
||||||
ariaLabel = "选择颜色",
|
|
||||||
}: {
|
|
||||||
value: string;
|
|
||||||
fallback?: string;
|
|
||||||
swatchColors: string[];
|
|
||||||
onCommit: (value: string) => void;
|
|
||||||
ariaLabel?: string;
|
|
||||||
}) {
|
|
||||||
const normalizedValue = normalizeHexColor(value, fallback);
|
|
||||||
const [pendingValue, setPendingValue] = useState(normalizedValue);
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const panelId = useId();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) setPendingValue(normalizedValue);
|
|
||||||
}, [normalizedValue, open]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-fit">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex h-10 min-w-32 items-center gap-2 rounded-md border bg-background px-2 font-mono text-sm shadow-xs transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
||||||
aria-label={ariaLabel}
|
|
||||||
aria-expanded={open}
|
|
||||||
aria-controls={panelId}
|
|
||||||
onClick={() => setOpen((visible) => !visible)}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="size-7 rounded border"
|
|
||||||
style={{ backgroundColor: pendingValue }}
|
|
||||||
aria-hidden
|
|
||||||
/>
|
|
||||||
{pendingValue}
|
|
||||||
</button>
|
|
||||||
{open && (
|
|
||||||
<div
|
|
||||||
id={panelId}
|
|
||||||
className="mt-2 w-fit rounded-lg border bg-background p-2 shadow-lg"
|
|
||||||
onPointerDown={(event) => event.stopPropagation()}
|
|
||||||
onClick={(event) => event.stopPropagation()}
|
|
||||||
>
|
|
||||||
<ColorPickerPanel
|
|
||||||
value={pendingValue}
|
|
||||||
format="HEX"
|
|
||||||
colorModes={["monochrome"]}
|
|
||||||
enableAlpha={false}
|
|
||||||
swatchColors={swatchColors}
|
|
||||||
onChange={(color) => setPendingValue(normalizeHexColor(String(color), fallback))}
|
|
||||||
/>
|
|
||||||
<div className="mt-2 flex justify-end gap-2 border-t pt-2">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
setPendingValue(normalizedValue);
|
|
||||||
setOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
取消
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setOpen(false);
|
|
||||||
onCommit(pendingValue);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
应用颜色
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function CustomThemePreview({ theme }: { theme: CustomThemePreset }) {
|
|
||||||
const tokens = getCustomThemeTokens(theme) as CSSProperties;
|
|
||||||
const buttonContrast = customThemeTextContrast(theme);
|
|
||||||
const isButtonContrastLow = buttonContrast < 4.5;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="overflow-hidden rounded-lg border"
|
|
||||||
style={tokens}
|
|
||||||
aria-label={`${theme.name} 的颜色预览`}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="flex items-center gap-2 border-b border-[var(--border)] px-3 py-2"
|
|
||||||
style={{
|
|
||||||
backgroundImage:
|
|
||||||
"linear-gradient(105deg, var(--navigation-gradient-start) 0%, var(--primary) 52%, var(--navigation-gradient-end) 100%)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="flex size-5 items-center justify-center rounded-md bg-white/25 text-[10px] font-bold text-[var(--navigation-foreground)] ring-2 ring-white/35"
|
|
||||||
aria-hidden
|
|
||||||
>
|
|
||||||
C
|
|
||||||
</span>
|
|
||||||
<span className="text-xs font-semibold text-[var(--navigation-foreground)]">
|
|
||||||
实时预览
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
"ml-auto text-[11px]",
|
|
||||||
isButtonContrastLow
|
|
||||||
? "text-amber-700 dark:text-amber-300"
|
|
||||||
: "text-[var(--muted-foreground)]",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
主按钮对比度 {buttonContrast.toFixed(1)}:1
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2 bg-[var(--background)] p-3 sm:grid-cols-[1fr_auto]">
|
|
||||||
<div className="rounded-md border border-[var(--border)] bg-[var(--card)] p-2.5">
|
|
||||||
<div className="text-xs font-semibold text-[var(--brand-title-foreground)]">
|
|
||||||
{theme.name || "未命名主题"}
|
|
||||||
</div>
|
|
||||||
<div className="mt-1 text-[11px] text-[var(--muted-foreground)]">
|
|
||||||
页面正文自动生成；主按钮文字可单独指定。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="rounded-md bg-[var(--primary)] px-3 py-2 text-xs font-semibold text-[var(--button-foreground,var(--primary-foreground))] shadow-sm"
|
|
||||||
tabIndex={-1}
|
|
||||||
>
|
|
||||||
主按钮
|
|
||||||
</button>
|
|
||||||
{isButtonContrastLow && (
|
|
||||||
<p className="sm:col-span-2 text-[11px] text-amber-700 dark:text-amber-300">
|
|
||||||
当前按钮文字会按您的颜色设置展示，但对比度低于 4.5:1，建议改用更深的主色或恢复自动。
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function AdvancedThemeColorControls({
|
|
||||||
theme,
|
|
||||||
onPatch,
|
|
||||||
}: {
|
|
||||||
theme: CustomThemePreset;
|
|
||||||
onPatch: (patch: Partial<CustomThemePreset>) => void;
|
|
||||||
}) {
|
|
||||||
const automaticTokens = getCustomThemeAutomaticTokens({
|
|
||||||
primary: theme.primary,
|
|
||||||
mode: theme.mode,
|
|
||||||
});
|
|
||||||
|
|
||||||
const setOverride = (key: CustomThemeAdvancedKey, value: string) => {
|
|
||||||
const overrides = { ...(theme.overrides ?? {}) };
|
|
||||||
if (!value.trim()) {
|
|
||||||
delete overrides[key];
|
|
||||||
} else {
|
|
||||||
overrides[key] = value;
|
|
||||||
}
|
|
||||||
onPatch({ overrides });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3 rounded-lg border border-dashed bg-muted/15 p-3">
|
|
||||||
<div className="flex flex-wrap items-start justify-between gap-2">
|
|
||||||
<div>
|
|
||||||
<div className="text-sm font-medium">更多配色</div>
|
|
||||||
<p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
|
|
||||||
默认由主色自动推导。仅在品牌规范有明确要求时，选择单项覆盖；“恢复自动”会重新跟随主色。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
|
|
||||||
已覆盖 {Object.keys(theme.overrides ?? {}).length} 项
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-3 lg:grid-cols-2">
|
|
||||||
{ADVANCED_COLOR_FIELDS.map((field) => {
|
|
||||||
const explicit = theme.overrides?.[field.key];
|
|
||||||
const automatic = automaticTokens[field.token] ?? "#0062D9";
|
|
||||||
const value = explicit ?? automatic;
|
|
||||||
return (
|
|
||||||
<div key={field.key} className="rounded-md border bg-background p-3">
|
|
||||||
<div className="mb-2 flex items-start justify-between gap-2">
|
|
||||||
<div>
|
|
||||||
<div className="text-xs font-semibold">{field.label}</div>
|
|
||||||
<div className="mt-0.5 text-[11px] text-muted-foreground">
|
|
||||||
{field.description}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{explicit ? (
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="h-7 px-2 text-xs"
|
|
||||||
onClick={() => setOverride(field.key, "")}
|
|
||||||
>
|
|
||||||
<RotateCcwIcon className="mr-1 size-3.5" />
|
|
||||||
恢复自动
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<span className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">
|
|
||||||
自动
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap items-end gap-2">
|
|
||||||
<InlineThemeColorPicker
|
|
||||||
value={value}
|
|
||||||
swatchColors={SUGGESTED_COLORS}
|
|
||||||
onCommit={(color) => setOverride(field.key, color)}
|
|
||||||
ariaLabel={`${theme.name || "自定义主题"}${field.label}选色器`}
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
value={value}
|
|
||||||
maxLength={7}
|
|
||||||
className="h-8 w-28 font-mono text-xs uppercase"
|
|
||||||
onChange={(event) => setOverride(field.key, event.target.value)}
|
|
||||||
onBlur={(event) =>
|
|
||||||
setOverride(
|
|
||||||
field.key,
|
|
||||||
event.target.value.trim()
|
|
||||||
? normalizeHexColor(event.target.value)
|
|
||||||
: "",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
aria-label={`${theme.name || "自定义主题"}${field.label}十六进制值`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{!explicit && (
|
|
||||||
<p className="mt-2 text-[11px] text-muted-foreground">
|
|
||||||
当前自动值：{automatic}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CustomThemeLibrarySettings() {
|
|
||||||
const { data: appearance } = useAppearanceSettings();
|
|
||||||
const updateAppearance = useUpdateAppearanceSettings();
|
|
||||||
const [drafts, setDrafts] = useState<CustomThemePreset[]>([]);
|
|
||||||
const [advancedThemeIds, setAdvancedThemeIds] = useState<Set<string>>(
|
|
||||||
() => new Set(),
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setDrafts(normalizeThemeDrafts(appearance?.custom_themes));
|
|
||||||
}, [appearance?.custom_themes]);
|
|
||||||
|
|
||||||
const hasChanges = useMemo(
|
|
||||||
() =>
|
|
||||||
JSON.stringify(normalizeThemeDrafts(appearance?.custom_themes)) !==
|
|
||||||
JSON.stringify(normalizeThemeDrafts(drafts)),
|
|
||||||
[appearance?.custom_themes, drafts],
|
|
||||||
);
|
|
||||||
|
|
||||||
const patchTheme = (id: string, patch: Partial<CustomThemePreset>) => {
|
|
||||||
setDrafts((items) =>
|
|
||||||
items.map((item) => (item.id === id ? { ...item, ...patch } : item)),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleAdvancedTheme = (id: string) => {
|
|
||||||
setAdvancedThemeIds((ids) => {
|
|
||||||
const next = new Set(ids);
|
|
||||||
if (next.has(id)) next.delete(id);
|
|
||||||
else next.add(id);
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
const cleaned = normalizeThemeDrafts(drafts).map((theme) => ({
|
|
||||||
...theme,
|
|
||||||
name: theme.name.trim(),
|
|
||||||
primary: normalizeHexColor(theme.primary),
|
|
||||||
}));
|
|
||||||
if (cleaned.some((theme) => !theme.name)) {
|
|
||||||
toast.error("请为每个主题填写名称");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const names = cleaned.map((theme) => theme.name.toLocaleLowerCase());
|
|
||||||
if (new Set(names).size !== names.length) {
|
|
||||||
toast.error("主题名称不能重复");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
await updateAppearance.mutateAsync({ custom_themes: cleaned });
|
|
||||||
toast.success("自定义主题库已保存，所有用户可在主题切换器中选择已启用主题");
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(error instanceof Error ? error.message : "保存主题库失败");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSetDefault = async (theme: CustomThemePreset) => {
|
|
||||||
if (!theme.enabled || appearance?.default_theme === theme.id) return;
|
|
||||||
if (!(appearance?.custom_themes ?? []).some((preset) => preset.id === theme.id)) {
|
|
||||||
toast.info("请先保存主题库，再将新主题设为系统默认");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
await updateAppearance.mutateAsync({ default_theme: theme.id });
|
|
||||||
toast.success(`已将“${theme.name || "自定义主题"}”设为系统默认主题`);
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(error instanceof Error ? error.message : "设置系统默认主题失败");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
||||||
<p className="max-w-2xl text-xs leading-relaxed text-muted-foreground">
|
|
||||||
默认只需设置主色、主按钮文字与明暗模式；系统会自动生成页面正文、背景、边框、弱化、选中和悬停色。点击“更多”后才按需覆盖个别交互色，停用后不再向用户展示，最多可保存 {MAX_CUSTOM_THEMES} 个。
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() =>
|
|
||||||
setDrafts((items) =>
|
|
||||||
items.length >= MAX_CUSTOM_THEMES
|
|
||||||
? items
|
|
||||||
: [...items, newCustomTheme(items.length)],
|
|
||||||
)
|
|
||||||
}
|
|
||||||
disabled={drafts.length >= MAX_CUSTOM_THEMES || updateAppearance.isPending}
|
|
||||||
>
|
|
||||||
<PlusIcon className="mr-1.5 size-4" />
|
|
||||||
添加主题
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => void handleSave()}
|
|
||||||
disabled={!hasChanges || updateAppearance.isPending}
|
|
||||||
>
|
|
||||||
<SaveIcon className="mr-1.5 size-4" />
|
|
||||||
保存主题库
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{drafts.length === 0 ? (
|
|
||||||
<div className="rounded-lg border border-dashed bg-muted/20 px-5 py-8 text-center">
|
|
||||||
<PaletteIcon className="mx-auto mb-2 size-5 text-muted-foreground" />
|
|
||||||
<div className="text-sm font-medium">还没有自定义主题</div>
|
|
||||||
<p className="mt-1 text-xs text-muted-foreground">
|
|
||||||
添加后，用户可以从右上角主题切换器中自行选择。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-4">
|
|
||||||
{drafts.map((theme, index) => {
|
|
||||||
const isDefault = appearance?.default_theme === theme.id;
|
|
||||||
const advancedOpen = advancedThemeIds.has(theme.id);
|
|
||||||
const automaticTokens = getCustomThemeAutomaticTokens({
|
|
||||||
primary: theme.primary,
|
|
||||||
mode: theme.mode,
|
|
||||||
});
|
|
||||||
const textColor = theme.text_color ?? automaticTokens["--foreground"] ?? "#202A3A";
|
|
||||||
return (
|
|
||||||
<div key={theme.id} className="space-y-4 rounded-xl border bg-card p-4">
|
|
||||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<PaletteIcon className="size-4 text-primary" />
|
|
||||||
<span className="text-sm font-semibold">主题 {index + 1}</span>
|
|
||||||
{isDefault && (
|
|
||||||
<span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
|
|
||||||
<CheckIcon className="size-3" />
|
|
||||||
系统默认
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<label className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
||||||
<Switch
|
|
||||||
checked={theme.enabled}
|
|
||||||
onCheckedChange={(enabled) => patchTheme(theme.id, { enabled })}
|
|
||||||
aria-label={`启用${theme.name || "自定义主题"}`}
|
|
||||||
/>
|
|
||||||
{theme.enabled ? "启用" : "停用"}
|
|
||||||
</label>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
size="sm"
|
|
||||||
variant={isDefault ? "default" : "outline"}
|
|
||||||
onClick={() => void handleSetDefault(theme)}
|
|
||||||
disabled={!theme.enabled || isDefault || hasChanges || updateAppearance.isPending}
|
|
||||||
>
|
|
||||||
设为默认
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => toggleAdvancedTheme(theme.id)}
|
|
||||||
aria-expanded={advancedOpen}
|
|
||||||
aria-controls={`${theme.id}-advanced-colors`}
|
|
||||||
>
|
|
||||||
<SlidersHorizontalIcon className="mr-1.5 size-4" />
|
|
||||||
更多
|
|
||||||
{advancedOpen ? (
|
|
||||||
<ChevronUpIcon className="ml-1 size-3.5" />
|
|
||||||
) : (
|
|
||||||
<ChevronDownIcon className="ml-1 size-3.5" />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
size="icon-sm"
|
|
||||||
variant="ghost"
|
|
||||||
className="text-destructive hover:text-destructive"
|
|
||||||
onClick={() =>
|
|
||||||
setDrafts((items) =>
|
|
||||||
items
|
|
||||||
.filter((item) => item.id !== theme.id)
|
|
||||||
.map((item, order) => ({ ...item, sort_order: order })),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
title="删除主题"
|
|
||||||
aria-label={`删除${theme.name || "自定义主题"}`}
|
|
||||||
>
|
|
||||||
<Trash2Icon className="size-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(180px,0.55fr)_150px_150px]">
|
|
||||||
<label className="space-y-1.5">
|
|
||||||
<span className="text-xs font-medium">主题名称</span>
|
|
||||||
<Input
|
|
||||||
value={theme.name}
|
|
||||||
maxLength={32}
|
|
||||||
onChange={(event) => patchTheme(theme.id, { name: event.target.value })}
|
|
||||||
placeholder="例如：品牌浅蓝"
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="space-y-1.5">
|
|
||||||
<span className="text-xs font-medium">基础模式</span>
|
|
||||||
<Select
|
|
||||||
value={theme.mode}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
patchTheme(theme.id, {
|
|
||||||
mode: value === "dark" ? "dark" : "light",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="light">
|
|
||||||
<span className="inline-flex items-center gap-1.5"><SunIcon className="size-3.5" />浅色</span>
|
|
||||||
</SelectItem>
|
|
||||||
<SelectItem value="dark">
|
|
||||||
<span className="inline-flex items-center gap-1.5"><MoonIcon className="size-3.5" />深色</span>
|
|
||||||
</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</label>
|
|
||||||
<label className="space-y-1.5">
|
|
||||||
<span className="text-xs font-medium">主色值</span>
|
|
||||||
<Input
|
|
||||||
value={theme.primary}
|
|
||||||
maxLength={7}
|
|
||||||
className="font-mono uppercase"
|
|
||||||
onChange={(event) => patchTheme(theme.id, { primary: event.target.value })}
|
|
||||||
onBlur={() =>
|
|
||||||
patchTheme(theme.id, {
|
|
||||||
primary: normalizeHexColor(theme.primary),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
aria-label={`${theme.name || "自定义主题"}主色十六进制值`}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<div className="flex items-center justify-between gap-2">
|
|
||||||
<span className="text-xs font-medium">主按钮文字</span>
|
|
||||||
{theme.text_color ? (
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="h-6 px-1.5 text-[11px]"
|
|
||||||
onClick={() => patchTheme(theme.id, { text_color: null })}
|
|
||||||
>
|
|
||||||
自动
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<span className="text-[11px] text-muted-foreground">自动</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Input
|
|
||||||
value={textColor}
|
|
||||||
maxLength={7}
|
|
||||||
className="font-mono uppercase"
|
|
||||||
onChange={(event) =>
|
|
||||||
patchTheme(theme.id, { text_color: event.target.value })
|
|
||||||
}
|
|
||||||
onBlur={(event) =>
|
|
||||||
patchTheme(theme.id, {
|
|
||||||
text_color: event.target.value.trim()
|
|
||||||
? normalizeHexColor(event.target.value)
|
|
||||||
: null,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
aria-label={`${theme.name || "自定义主题"}主按钮文字十六进制值`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap items-end gap-3 rounded-lg border bg-muted/15 p-3">
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<span className="text-xs font-medium">选择主色</span>
|
|
||||||
<InlineThemeColorPicker
|
|
||||||
value={theme.primary}
|
|
||||||
swatchColors={SUGGESTED_COLORS}
|
|
||||||
onCommit={(primary) => patchTheme(theme.id, { primary })}
|
|
||||||
ariaLabel={`${theme.name || "自定义主题"}主色选色器`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<span className="text-xs font-medium">选择主按钮文字</span>
|
|
||||||
<InlineThemeColorPicker
|
|
||||||
value={textColor}
|
|
||||||
fallback="#202A3A"
|
|
||||||
swatchColors={TEXT_COLORS}
|
|
||||||
onCommit={(text_color) => patchTheme(theme.id, { text_color })}
|
|
||||||
ariaLabel={`${theme.name || "自定义主题"}主按钮文字选色器`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap gap-1.5 pb-0.5">
|
|
||||||
{SUGGESTED_COLORS.map((color) => (
|
|
||||||
<button
|
|
||||||
key={color}
|
|
||||||
type="button"
|
|
||||||
className={cn(
|
|
||||||
"size-7 rounded-md border shadow-sm transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
||||||
normalizeHexColor(theme.primary) === color
|
|
||||||
? "ring-2 ring-primary ring-offset-2"
|
|
||||||
: "border-border",
|
|
||||||
)}
|
|
||||||
style={{ backgroundColor: color }}
|
|
||||||
onClick={() => patchTheme(theme.id, { primary: color })}
|
|
||||||
title={`使用 ${color}`}
|
|
||||||
aria-label={`使用主色 ${color}`}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{advancedOpen && (
|
|
||||||
<div id={`${theme.id}-advanced-colors`}>
|
|
||||||
<AdvancedThemeColorControls
|
|
||||||
theme={theme}
|
|
||||||
onPatch={(patch) => patchTheme(theme.id, patch)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<CustomThemePreview theme={{ ...theme, primary: normalizeHexColor(theme.primary) }} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -23,10 +23,11 @@ import {
|
|||||||
SparklesIcon,
|
SparklesIcon,
|
||||||
TagsIcon,
|
TagsIcon,
|
||||||
Trash2Icon,
|
Trash2Icon,
|
||||||
TrendingUpIcon,
|
TrendingUpIcon,
|
||||||
Upload,
|
Upload,
|
||||||
UserIcon,
|
UserIcon,
|
||||||
XIcon,
|
WorkflowIcon,
|
||||||
|
XIcon,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
@@ -50,13 +51,6 @@ import {
|
|||||||
EmptyTitle,
|
EmptyTitle,
|
||||||
} from "@/components/ui/empty";
|
} from "@/components/ui/empty";
|
||||||
|
|
||||||
import {
|
|
||||||
Item,
|
|
||||||
ItemActions,
|
|
||||||
ItemTitle,
|
|
||||||
ItemContent,
|
|
||||||
ItemDescription,
|
|
||||||
} from "@/components/ui/item";
|
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
@@ -71,9 +65,8 @@ import { useTheme } from "@/contexts/ThemeContext";
|
|||||||
import { getStoredAuth } from "@/core/auth";
|
import { getStoredAuth } from "@/core/auth";
|
||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
import type { ValidateSkillUploadResponse } from "@/core/skills/api";
|
import type { ValidateSkillUploadResponse } from "@/core/skills/api";
|
||||||
import {
|
import {
|
||||||
useDeleteBuiltinSkill,
|
useDeleteCustomSkill,
|
||||||
useDeleteCustomSkill,
|
|
||||||
useDuplicateSkill,
|
useDuplicateSkill,
|
||||||
useGenerateMissingSkillNameZh,
|
useGenerateMissingSkillNameZh,
|
||||||
useGenerateSkillNameZh,
|
useGenerateSkillNameZh,
|
||||||
@@ -471,11 +464,11 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<TagSearchBar
|
<TagSearchBar
|
||||||
targetType="skill"
|
targetType="skill"
|
||||||
onSearchChange={setSearch}
|
onSearchChange={setSearch}
|
||||||
tagIds={tagIds}
|
tagIds={tagIds}
|
||||||
onTagIdsChange={setTagIds}
|
onTagIdsChange={setTagIds}
|
||||||
actions={
|
actions={
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<ViewModeToggle value={viewMode} onChange={setViewMode} />
|
<ViewModeToggle value={viewMode} onChange={setViewMode} />
|
||||||
@@ -498,16 +491,11 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
|
|||||||
<SelectItem value="name_desc">名称 Z-A</SelectItem>
|
<SelectItem value="name_desc">名称 Z-A</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
{!isLoading && !error && (
|
{publisher && (
|
||||||
<div className="text-muted-foreground flex justify-end text-sm tabular-nums">
|
<div className="flex items-center gap-2">
|
||||||
共 {orderedSkills.length} 个技能
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{publisher && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-muted-foreground text-xs">筛选发布者：</span>
|
<span className="text-muted-foreground text-xs">筛选发布者：</span>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -617,10 +605,9 @@ export function SkillRow({
|
|||||||
const { data: cardPublishSquares } = usePublishSquares();
|
const { data: cardPublishSquares } = usePublishSquares();
|
||||||
const setPinned = useSetSkillPinned();
|
const setPinned = useSetSkillPinned();
|
||||||
const setFeatured = useSetSkillFeatured();
|
const setFeatured = useSetSkillFeatured();
|
||||||
const setAlwaysOn = useSetSkillAlwaysOn();
|
const setAlwaysOn = useSetSkillAlwaysOn();
|
||||||
const { data: compression } = useSkillCompressionSettings();
|
const { data: compression } = useSkillCompressionSettings();
|
||||||
const deleteCustom = useDeleteCustomSkill();
|
const deleteSkill = useDeleteCustomSkill();
|
||||||
const deleteBuiltin = useDeleteBuiltinSkill();
|
|
||||||
const duplicateSkillMutation = useDuplicateSkill();
|
const duplicateSkillMutation = useDuplicateSkill();
|
||||||
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
|
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
|
||||||
const [tagPickerOpen, setTagPickerOpen] = useState(false);
|
const [tagPickerOpen, setTagPickerOpen] = useState(false);
|
||||||
@@ -636,9 +623,8 @@ export function SkillRow({
|
|||||||
const isOwned =
|
const isOwned =
|
||||||
isCustom && !isBuiltin && !!skill.owner_user_id && skill.owner_user_id === currentUserId;
|
isCustom && !isBuiltin && !!skill.owner_user_id && skill.owner_user_id === currentUserId;
|
||||||
const isFromOthers = isCustom && !isBuiltin && !isOwned;
|
const isFromOthers = isCustom && !isBuiltin && !isOwned;
|
||||||
// Admin can manage custom skills from any owner; non-admin only their own.
|
// Admin can edit/delete/unpublish anyone's skill; non-admin only their own.
|
||||||
const canManage = isCustom && (isOwned || isAdmin);
|
const canManage = isCustom && (isOwned || isAdmin);
|
||||||
const canDelete = isAdmin || isOwned;
|
|
||||||
const canTogglePublish = canManage && !isBuiltin;
|
const canTogglePublish = canManage && !isBuiltin;
|
||||||
// 常驻(免压缩):内置技能仅管理员可设;自定义技能其所有者或管理员可设(与后端一致)。
|
// 常驻(免压缩):内置技能仅管理员可设;自定义技能其所有者或管理员可设(与后端一致)。
|
||||||
const canSetAlwaysOn = isAdmin || isOwned;
|
const canSetAlwaysOn = isAdmin || isOwned;
|
||||||
@@ -689,15 +675,11 @@ export function SkillRow({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDelete() {
|
async function handleDelete() {
|
||||||
try {
|
try {
|
||||||
if (isBuiltin) {
|
await deleteSkill.mutateAsync(skill.name);
|
||||||
await deleteBuiltin.mutateAsync(skill.name);
|
toast.success(t.settings.skills.deleteSuccess);
|
||||||
} else {
|
setConfirmDeleteOpen(false);
|
||||||
await deleteCustom.mutateAsync(skill.name);
|
|
||||||
}
|
|
||||||
toast.success(t.settings.skills.deleteSuccess);
|
|
||||||
setConfirmDeleteOpen(false);
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err instanceof Error ? err.message : String(err));
|
toast.error(err instanceof Error ? err.message : String(err));
|
||||||
}
|
}
|
||||||
@@ -754,9 +736,9 @@ export function SkillRow({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const badgeGroup = (
|
const badgeGroup = (
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
<span className={cn(isCard && "truncate font-medium")}>
|
<span className="min-w-0 truncate text-[15px] font-semibold tracking-[-0.01em] text-slate-900 dark:text-slate-100">
|
||||||
{skill.name_zh?.trim() ? skill.name_zh : desensitize(skill.name)}
|
{skill.name_zh?.trim() ? skill.name_zh : desensitize(skill.name)}
|
||||||
</span>
|
</span>
|
||||||
{skill.name_zh?.trim() && (
|
{skill.name_zh?.trim() && (
|
||||||
@@ -914,23 +896,23 @@ export function SkillRow({
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
const actionButtons = (
|
const actionButtons = (
|
||||||
<>
|
<>
|
||||||
<Button
|
<Button
|
||||||
size="icon"
|
size="icon"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="h-8 w-8 shrink-0"
|
className="h-8 w-8 shrink-0 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white"
|
||||||
onClick={() => setTagPickerOpen(true)}
|
onClick={() => setTagPickerOpen(true)}
|
||||||
title={t.adminTags.manageTags}
|
title={t.adminTags.manageTags}
|
||||||
>
|
>
|
||||||
<TagsIcon className="size-3.5" />
|
<TagsIcon className="size-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
{canManage && (
|
{canManage && (
|
||||||
<Button
|
<Button
|
||||||
size="icon"
|
size="icon"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className={cn(
|
className={cn(
|
||||||
"h-8 w-8 shrink-0",
|
"h-8 w-8 shrink-0 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white",
|
||||||
skill.featured && "text-amber-600 hover:text-amber-700",
|
skill.featured && "text-amber-600 hover:text-amber-700",
|
||||||
)}
|
)}
|
||||||
disabled={setFeatured.isPending}
|
disabled={setFeatured.isPending}
|
||||||
@@ -946,12 +928,12 @@ export function SkillRow({
|
|||||||
/>
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{canManage && (
|
{canManage && (
|
||||||
<Button
|
<Button
|
||||||
size="icon"
|
size="icon"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className={cn(
|
className={cn(
|
||||||
"h-8 w-8 shrink-0",
|
"h-8 w-8 shrink-0 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white",
|
||||||
skill.pinned && "text-emerald-600 hover:text-emerald-700",
|
skill.pinned && "text-emerald-600 hover:text-emerald-700",
|
||||||
)}
|
)}
|
||||||
disabled={setPinned.isPending}
|
disabled={setPinned.isPending}
|
||||||
@@ -971,8 +953,8 @@ export function SkillRow({
|
|||||||
<Button
|
<Button
|
||||||
size="icon"
|
size="icon"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className={cn(
|
className={cn(
|
||||||
"h-8 w-8 shrink-0",
|
"h-8 w-8 shrink-0 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white",
|
||||||
skill.always_on && "text-amber-600 hover:text-amber-700",
|
skill.always_on && "text-amber-600 hover:text-amber-700",
|
||||||
)}
|
)}
|
||||||
disabled={setAlwaysOn.isPending}
|
disabled={setAlwaysOn.isPending}
|
||||||
@@ -1009,20 +991,20 @@ export function SkillRow({
|
|||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
<Button
|
<Button
|
||||||
size="icon"
|
size="icon"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="h-8 w-8 shrink-0"
|
className="h-8 w-8 shrink-0 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white"
|
||||||
disabled={duplicateSkillMutation.isPending}
|
disabled={duplicateSkillMutation.isPending}
|
||||||
onClick={handleOpenDuplicate}
|
onClick={handleOpenDuplicate}
|
||||||
title="复制为新技能"
|
title="复制为新技能"
|
||||||
>
|
>
|
||||||
<CopyIcon className="size-3.5" />
|
<CopyIcon className="size-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
{canDelete && (
|
{canManage && (
|
||||||
<Button
|
<Button
|
||||||
size="icon"
|
size="icon"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
|
className="text-destructive hover:text-destructive h-8 w-8 shrink-0 rounded-lg hover:bg-red-50 dark:hover:bg-red-950/30"
|
||||||
onClick={() => setConfirmDeleteOpen(true)}
|
onClick={() => setConfirmDeleteOpen(true)}
|
||||||
title={t.settings.skills.deleteAction}
|
title={t.settings.skills.deleteAction}
|
||||||
>
|
>
|
||||||
@@ -1030,41 +1012,124 @@ export function SkillRow({
|
|||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const iconStyle = skill.name.includes("web") || skill.name.includes("search")
|
||||||
|
? {
|
||||||
|
Icon: GlobeIcon,
|
||||||
|
className: "bg-emerald-600 text-white shadow-[0_6px_16px_rgba(22,163,74,0.22)]",
|
||||||
|
}
|
||||||
|
: skill.name.includes("doc") || skill.name.includes("file")
|
||||||
|
? {
|
||||||
|
Icon: FileArchive,
|
||||||
|
className: "bg-violet-600 text-white shadow-[0_6px_16px_rgba(124,58,237,0.22)]",
|
||||||
|
}
|
||||||
|
: skill.source === "agent"
|
||||||
|
? {
|
||||||
|
Icon: WorkflowIcon,
|
||||||
|
className: "bg-[#2166e8] text-white shadow-[0_6px_16px_rgba(37,99,235,0.22)]",
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
Icon: Upload,
|
||||||
|
className: "bg-amber-500 text-white shadow-[0_6px_16px_rgba(245,158,11,0.22)]",
|
||||||
|
};
|
||||||
|
const SkillIcon = iconStyle.Icon;
|
||||||
|
const activityAt = formatDateTime(skill.last_activity_at ?? skill.created_at);
|
||||||
|
const actionArea = (
|
||||||
|
<div className="flex flex-wrap items-center justify-end gap-1" onClick={(event) => event.stopPropagation()}>
|
||||||
|
{actionButtons}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isCard ? (
|
{isCard ? (
|
||||||
<div className="flex h-full min-w-0 flex-col rounded-lg border p-3 transition-shadow hover:shadow-sm dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
|
<div className="flex h-full min-w-0 flex-col rounded-xl border border-slate-200 bg-white p-5 shadow-[0_5px_18px_rgba(15,23,42,0.035)] transition-[border-color,box-shadow] hover:border-blue-200 hover:shadow-[0_10px_28px_rgba(37,99,235,0.07)] dark:border-slate-800 dark:bg-slate-900 dark:text-white">
|
||||||
<div
|
<div
|
||||||
className="min-w-0 flex-1 cursor-pointer"
|
className="min-w-0 flex-1 cursor-pointer"
|
||||||
onClick={() => setDetailOpen(true)}
|
onClick={() => setDetailOpen(true)}
|
||||||
>
|
>
|
||||||
{badgeGroup}
|
<div className="flex items-start gap-3.5">
|
||||||
<p className="text-muted-foreground mt-1 line-clamp-3 text-sm">
|
<div className={cn("flex size-12 shrink-0 items-center justify-center rounded-full", iconStyle.className)}>
|
||||||
{desensitize(skill.description ?? "")}
|
<SkillIcon className="size-6" />
|
||||||
</p>
|
</div>
|
||||||
{metaNodes}
|
<div className="min-w-0 flex-1">
|
||||||
</div>
|
{badgeGroup}
|
||||||
<div className="mt-2 flex flex-wrap items-center justify-end gap-1 border-t pt-2 dark:border-[#213D5E]">
|
<p className="mt-1.5 line-clamp-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
|
||||||
{actionButtons}
|
{desensitize(skill.description ?? "")}
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
</div>
|
||||||
<Item className="w-full dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white" variant="outline">
|
<div className="mt-4 flex flex-wrap items-center gap-2">
|
||||||
<ItemContent
|
<Badge className={cn("border-0 px-2.5 py-1 text-xs font-normal", skill.enabled ? "bg-emerald-50 text-emerald-600 hover:bg-emerald-50 dark:bg-emerald-500/15 dark:text-emerald-300" : "bg-slate-100 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-400")}>
|
||||||
className="cursor-pointer"
|
<span className={cn("mr-1.5 size-1.5 rounded-full", skill.enabled ? "bg-emerald-500" : "bg-slate-400")} />
|
||||||
onClick={() => setDetailOpen(true)}
|
{skill.enabled ? "已启用" : "未启用"}
|
||||||
>
|
</Badge>
|
||||||
<ItemTitle>{badgeGroup}</ItemTitle>
|
<span className="text-xs text-slate-400">{skill.use_count ? `调用 ${skill.use_count} 次` : "暂无调用"}</span>
|
||||||
<ItemDescription className="line-clamp-4">
|
{activityAt && <span className="text-xs text-slate-400">更新于 {activityAt}</span>}
|
||||||
{desensitize(skill.description ?? "")}
|
</div>
|
||||||
</ItemDescription>
|
{(skill.tags?.length ?? 0) > 0 && <TagChipList tags={skill.tags!} className="mt-3" />}
|
||||||
{metaNodes}
|
</div>
|
||||||
</ItemContent>
|
<div className="mt-4 border-t border-slate-100 pt-3 dark:border-slate-800">
|
||||||
<ItemActions>{actionButtons}</ItemActions>
|
{actionArea}
|
||||||
</Item>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="group/skill-card w-full rounded-xl border border-slate-200 bg-white px-5 py-4 shadow-[0_5px_18px_rgba(15,23,42,0.03)] transition-[border-color,box-shadow] hover:border-blue-200 hover:shadow-[0_10px_28px_rgba(37,99,235,0.07)] dark:border-slate-800 dark:bg-slate-900 dark:text-white">
|
||||||
|
<div className="grid min-w-0 grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1.65fr)_minmax(150px,0.72fr)_minmax(100px,0.42fr)_minmax(132px,0.58fr)_auto] xl:items-center xl:gap-x-6">
|
||||||
|
<div className="flex min-w-0 cursor-pointer items-start gap-4" onClick={() => setDetailOpen(true)}>
|
||||||
|
<div className={cn("flex size-[60px] shrink-0 items-center justify-center rounded-full", iconStyle.className)}>
|
||||||
|
<SkillIcon className="size-7" />
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1 pt-0.5">
|
||||||
|
{badgeGroup}
|
||||||
|
<p className="mt-1.5 line-clamp-2 text-sm leading-5 text-slate-600 dark:text-slate-400">
|
||||||
|
{desensitize(skill.description ?? "")}
|
||||||
|
</p>
|
||||||
|
{!isBuiltin && skill.owner_username && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
disabled={!skill.owner_user_id || !onPublisherClick}
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
if (!skill.owner_user_id || !onPublisherClick) return;
|
||||||
|
onPublisherClick({ id: skill.owner_user_id, label: desensitize(skill.owner_username!) });
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
"mt-2 flex max-w-full items-center gap-1 text-xs text-slate-400",
|
||||||
|
skill.owner_user_id && onPublisherClick && "cursor-pointer hover:text-blue-600 hover:underline",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<UserIcon className="size-3.5 shrink-0" />
|
||||||
|
<span className="truncate">发布者：{desensitize(skill.owner_username)}</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 xl:border-l xl:border-slate-100 xl:pl-5 xl:dark:border-slate-800">
|
||||||
|
{(skill.tags?.length ?? 0) > 0 ? (
|
||||||
|
<TagChipList tags={skill.tags!} />
|
||||||
|
) : (
|
||||||
|
<span className="text-xs text-slate-400">未设置标签</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 text-sm text-slate-600 dark:text-slate-300">
|
||||||
|
<span className="block text-xs text-slate-400 xl:hidden">使用次数</span>
|
||||||
|
{skill.use_count ? `${skill.use_count} 次` : "暂无调用"}
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<Badge className={cn("border-0 px-2.5 py-1 text-xs font-normal", skill.enabled ? "bg-emerald-50 text-emerald-600 hover:bg-emerald-50 dark:bg-emerald-500/15 dark:text-emerald-300" : "bg-slate-100 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-400")}>
|
||||||
|
<span className={cn("mr-1.5 size-1.5 rounded-full", skill.enabled ? "bg-emerald-500" : "bg-slate-400")} />
|
||||||
|
{skill.enabled ? "已启用" : "未启用"}
|
||||||
|
</Badge>
|
||||||
|
{activityAt && <p className="mt-2 truncate text-xs text-slate-400" title={activityAt}>更新于 {activityAt}</p>}
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 border-t border-slate-100 pt-3 xl:border-t-0 xl:pt-0 dark:border-slate-800">
|
||||||
|
{actionArea}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<Dialog open={duplicateOpen} onOpenChange={setDuplicateOpen}>
|
<Dialog open={duplicateOpen} onOpenChange={setDuplicateOpen}>
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
@@ -1116,18 +1181,16 @@ export function SkillRow({
|
|||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={() => setConfirmDeleteOpen(false)}
|
onClick={() => setConfirmDeleteOpen(false)}
|
||||||
disabled={deleteCustom.isPending || deleteBuiltin.isPending}
|
disabled={deleteSkill.isPending}
|
||||||
>
|
>
|
||||||
{t.common.cancel}
|
{t.common.cancel}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="destructive"
|
variant="destructive"
|
||||||
onClick={() => void handleDelete()}
|
onClick={() => void handleDelete()}
|
||||||
disabled={deleteCustom.isPending || deleteBuiltin.isPending}
|
disabled={deleteSkill.isPending}
|
||||||
>
|
>
|
||||||
{deleteCustom.isPending || deleteBuiltin.isPending
|
{deleteSkill.isPending ? t.common.loading : t.common.delete}
|
||||||
? t.common.loading
|
|
||||||
: t.common.delete}
|
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|||||||
@@ -53,6 +53,7 @@ export function SourceCard({
|
|||||||
referenceTarget?: boolean;
|
referenceTarget?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
const [showOriginal, setShowOriginal] = useState(false);
|
||||||
const [context, setContext] = useState<WeKnoraSourceContext | null>(null);
|
const [context, setContext] = useState<WeKnoraSourceContext | null>(null);
|
||||||
const [contextLoading, setContextLoading] = useState(false);
|
const [contextLoading, setContextLoading] = useState(false);
|
||||||
const [contextError, setContextError] = useState<string | null>(null);
|
const [contextError, setContextError] = useState<string | null>(null);
|
||||||
@@ -81,7 +82,7 @@ export function SourceCard({
|
|||||||
const previewTarget = parseWeKnoraPreviewUrl(source.url);
|
const previewTarget = parseWeKnoraPreviewUrl(source.url);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!open || !previewTarget) {
|
if (!open || !showOriginal || !previewTarget) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
@@ -92,7 +93,7 @@ export function SourceCard({
|
|||||||
knowledge_base_id: previewTarget.knowledgeBaseId,
|
knowledge_base_id: previewTarget.knowledgeBaseId,
|
||||||
chunk_id: previewTarget.chunkId,
|
chunk_id: previewTarget.chunkId,
|
||||||
});
|
});
|
||||||
void apiFetch(`${getBackendBaseURL()}/api/llmwiki/sources/context?${params}`)
|
void apiFetch(`${getBackendBaseURL()}/api/weknora/source-context?${params}`)
|
||||||
.then(async (response) => {
|
.then(async (response) => {
|
||||||
const payload = (await response.json().catch(() => null)) as unknown;
|
const payload = (await response.json().catch(() => null)) as unknown;
|
||||||
if (!response.ok || !isWeKnoraSourceContextResponse(payload)) {
|
if (!response.ok || !isWeKnoraSourceContextResponse(payload)) {
|
||||||
@@ -115,7 +116,7 @@ export function SourceCard({
|
|||||||
return () => {
|
return () => {
|
||||||
cancelled = true;
|
cancelled = true;
|
||||||
};
|
};
|
||||||
}, [open, previewTarget?.chunkId, previewTarget?.knowledgeBaseId]);
|
}, [open, showOriginal, previewTarget?.chunkId, previewTarget?.knowledgeBaseId]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -128,7 +129,10 @@ export function SourceCard({
|
|||||||
highlighted &&
|
highlighted &&
|
||||||
"border-amber-300 bg-amber-50/80 shadow-[0_0_0_2px_rgba(251,191,36,0.14)]",
|
"border-amber-300 bg-amber-50/80 shadow-[0_0_0_2px_rgba(251,191,36,0.14)]",
|
||||||
)}
|
)}
|
||||||
onClick={() => setOpen(true)}
|
onClick={() => {
|
||||||
|
setShowOriginal(false);
|
||||||
|
setOpen(true);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
{showReferenceNumber && (
|
{showReferenceNumber && (
|
||||||
@@ -168,7 +172,15 @@ export function SourceCard({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<Dialog
|
||||||
|
open={open}
|
||||||
|
onOpenChange={(nextOpen) => {
|
||||||
|
setOpen(nextOpen);
|
||||||
|
if (!nextOpen) {
|
||||||
|
setShowOriginal(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<DialogContent className="max-w-2xl">
|
<DialogContent className="max-w-2xl">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<div className="flex items-start justify-between gap-3 pr-8">
|
<div className="flex items-start justify-between gap-3 pr-8">
|
||||||
@@ -205,7 +217,27 @@ export function SourceCard({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
{previewTarget ? (
|
{previewTarget && (
|
||||||
|
<div className="border-b pb-3">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||||
|
<span className="text-muted-foreground text-xs">
|
||||||
|
{showOriginal
|
||||||
|
? "正在查看命中文段及其前后上下文"
|
||||||
|
: "当前为检索命中的片段，可继续查看原文上下文"}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
variant={showOriginal ? "outline" : "default"}
|
||||||
|
onClick={() => setShowOriginal((current) => !current)}
|
||||||
|
>
|
||||||
|
<FileTextIcon className="size-3.5" />
|
||||||
|
{showOriginal ? "返回检索片段" : "查看原文"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{previewTarget && showOriginal ? (
|
||||||
<WeKnoraSourceContextPanel
|
<WeKnoraSourceContextPanel
|
||||||
context={context}
|
context={context}
|
||||||
loading={contextLoading}
|
loading={contextLoading}
|
||||||
@@ -240,18 +272,7 @@ type WeKnoraSourceContext = {
|
|||||||
knowledge_base_name?: string;
|
knowledge_base_name?: string;
|
||||||
document_title?: string;
|
document_title?: string;
|
||||||
document_file_name?: string;
|
document_file_name?: string;
|
||||||
display_mode?: "wiki" | "chunks";
|
|
||||||
focus_chunk_id: string;
|
focus_chunk_id: string;
|
||||||
wiki_page?: {
|
|
||||||
id?: string;
|
|
||||||
slug?: string;
|
|
||||||
title?: string;
|
|
||||||
page_type?: string;
|
|
||||||
status?: string;
|
|
||||||
summary?: string;
|
|
||||||
content?: string;
|
|
||||||
source_refs?: string[];
|
|
||||||
} | null;
|
|
||||||
chunks: Array<{
|
chunks: Array<{
|
||||||
id: string;
|
id: string;
|
||||||
chunk_index?: number;
|
chunk_index?: number;
|
||||||
@@ -260,12 +281,27 @@ type WeKnoraSourceContext = {
|
|||||||
}>;
|
}>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export function isWeKnoraSourcePreviewUrl(url?: string): boolean {
|
||||||
|
return parseWeKnoraPreviewUrl(url) !== null;
|
||||||
|
}
|
||||||
|
|
||||||
function parseWeKnoraPreviewUrl(url?: string): WeKnoraPreviewTarget | null {
|
function parseWeKnoraPreviewUrl(url?: string): WeKnoraPreviewTarget | null {
|
||||||
if (!url?.startsWith("/weknora-source-preview?")) {
|
const normalizedUrl = url
|
||||||
|
?.trim()
|
||||||
|
.replace(/^[\u200B-\u200D\uFEFF]+/, "");
|
||||||
|
const marker = "/weknora-source-preview?";
|
||||||
|
const start = normalizedUrl?.indexOf(marker) ?? -1;
|
||||||
|
if (start < 0) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const queryIndex = url.indexOf("?");
|
// Some MCP tool results wrap the relative pointer in formatting characters
|
||||||
const params = new URLSearchParams(url.slice(queryIndex + 1));
|
// or append a newline. Keep accepting that safe internal path, but never
|
||||||
|
// treat a normal external URL as an original-document preview.
|
||||||
|
const previewUrl = normalizedUrl!
|
||||||
|
.slice(start)
|
||||||
|
.split(/[\r\n\s]/, 1)[0];
|
||||||
|
const queryIndex = previewUrl.indexOf("?");
|
||||||
|
const params = new URLSearchParams(previewUrl.slice(queryIndex + 1));
|
||||||
const knowledgeBaseId = params.get("knowledge_base_id")?.trim();
|
const knowledgeBaseId = params.get("knowledge_base_id")?.trim();
|
||||||
const chunkId = params.get("chunk_id")?.trim();
|
const chunkId = params.get("chunk_id")?.trim();
|
||||||
return knowledgeBaseId && chunkId ? { knowledgeBaseId, chunkId } : null;
|
return knowledgeBaseId && chunkId ? { knowledgeBaseId, chunkId } : null;
|
||||||
@@ -323,33 +359,6 @@ function WeKnoraSourceContextPanel({
|
|||||||
if (!context) {
|
if (!context) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const wikiPage = context.wiki_page;
|
|
||||||
const wikiContent = cleanReferenceText(
|
|
||||||
[wikiPage?.summary, wikiPage?.content].filter(Boolean).join("\n\n"),
|
|
||||||
[],
|
|
||||||
);
|
|
||||||
if (wikiPage && wikiContent) {
|
|
||||||
return (
|
|
||||||
<div className="max-h-[55vh] space-y-3 overflow-y-auto pr-1">
|
|
||||||
<div className="bg-muted/60 text-muted-foreground rounded-lg px-3 py-2 text-xs">
|
|
||||||
<span>{context.knowledge_base_name || "WeKnora 知识库"}</span>
|
|
||||||
<span> · LLMWiki</span>
|
|
||||||
{wikiPage.page_type && <span> · {wikiPage.page_type}</span>}
|
|
||||||
</div>
|
|
||||||
<section className="border-primary/40 bg-primary/5 rounded-lg border p-3 text-sm leading-relaxed shadow-sm">
|
|
||||||
<div className="mb-2 flex flex-wrap items-center gap-2">
|
|
||||||
<span className="text-foreground text-sm font-medium">
|
|
||||||
{wikiPage.title || wikiPage.slug || "LLMWiki 页面"}
|
|
||||||
</span>
|
|
||||||
<span className="bg-primary text-primary-foreground rounded px-1.5 py-0.5 text-xs font-medium">
|
|
||||||
清洗页
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-3 whitespace-pre-wrap">{wikiContent}</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<div className="max-h-[55vh] space-y-3 overflow-y-auto pr-1">
|
<div className="max-h-[55vh] space-y-3 overflow-y-auto pr-1">
|
||||||
<div className="bg-muted/60 text-muted-foreground rounded-lg px-3 py-2 text-xs">
|
<div className="bg-muted/60 text-muted-foreground rounded-lg px-3 py-2 text-xs">
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import {
|
|||||||
DownloadIcon,
|
DownloadIcon,
|
||||||
Loader2,
|
Loader2,
|
||||||
PencilIcon,
|
PencilIcon,
|
||||||
Trash2Icon,
|
|
||||||
XIcon,
|
XIcon,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
@@ -23,7 +22,6 @@ import { Textarea } from "@/components/ui/textarea";
|
|||||||
import { MarkdownContent } from "@/components/workspace/messages/markdown-content";
|
import { MarkdownContent } from "@/components/workspace/messages/markdown-content";
|
||||||
import { getSkillFileDownloadURL } from "@/core/skills/api";
|
import { getSkillFileDownloadURL } from "@/core/skills/api";
|
||||||
import {
|
import {
|
||||||
useDeleteSkillFile,
|
|
||||||
useSaveSkillFile,
|
useSaveSkillFile,
|
||||||
useSkillFileContent,
|
useSkillFileContent,
|
||||||
} from "@/core/skills/hooks";
|
} from "@/core/skills/hooks";
|
||||||
@@ -68,7 +66,6 @@ export function SkillFilePreviewDialog({
|
|||||||
open ? path : null,
|
open ? path : null,
|
||||||
);
|
);
|
||||||
const save = useSaveSkillFile();
|
const save = useSaveSkillFile();
|
||||||
const remove = useDeleteSkillFile();
|
|
||||||
|
|
||||||
const [editing, setEditing] = useState(false);
|
const [editing, setEditing] = useState(false);
|
||||||
const [draft, setDraft] = useState("");
|
const [draft, setDraft] = useState("");
|
||||||
@@ -80,8 +77,6 @@ export function SkillFilePreviewDialog({
|
|||||||
}, [path, open]);
|
}, [path, open]);
|
||||||
|
|
||||||
const fileEditable = !!data?.editable && treeEditable;
|
const fileEditable = !!data?.editable && treeEditable;
|
||||||
const isRootSkillFile = path?.replace(/\\/g, "/").toLowerCase() === "skill.md";
|
|
||||||
const fileDeletable = !!data && treeEditable && !isRootSkillFile;
|
|
||||||
const isMarkdown = useMemo(() => {
|
const isMarkdown = useMemo(() => {
|
||||||
if (!path) return false;
|
if (!path) return false;
|
||||||
const lower = path.toLowerCase();
|
const lower = path.toLowerCase();
|
||||||
@@ -120,18 +115,6 @@ export function SkillFilePreviewDialog({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDelete() {
|
|
||||||
if (!skillName || !path) return;
|
|
||||||
if (!window.confirm(tx.filesDeleteConfirm.replace("{path}", path))) return;
|
|
||||||
try {
|
|
||||||
await remove.mutateAsync({ skillName, path });
|
|
||||||
toast.success(tx.filesDeleteSuccess);
|
|
||||||
onOpenChange(false);
|
|
||||||
} catch (err) {
|
|
||||||
toast.error(err instanceof Error ? err.message : String(err));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleCopyPath() {
|
async function handleCopyPath() {
|
||||||
if (!path) return;
|
if (!path) return;
|
||||||
await navigator.clipboard.writeText(path);
|
await navigator.clipboard.writeText(path);
|
||||||
@@ -175,18 +158,6 @@ export function SkillFilePreviewDialog({
|
|||||||
{tx.filesEditAction}
|
{tx.filesEditAction}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{fileDeletable && !editing && (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
className="h-7 px-2 text-xs text-destructive hover:text-destructive"
|
|
||||||
onClick={() => void handleDelete()}
|
|
||||||
disabled={remove.isPending}
|
|
||||||
>
|
|
||||||
{remove.isPending ? <Loader2 className="size-3.5 animate-spin" /> : <Trash2Icon className="size-3.5" />}
|
|
||||||
{tx.filesDeleteAction}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{editing && (
|
{editing && (
|
||||||
<>
|
<>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { User } from "lucide-react";
|
import { UserRound } from "lucide-react";
|
||||||
|
|
||||||
import { useLiveAccount } from "@/core/auth/use-live-account";
|
import { useLiveAccount } from "@/core/auth/use-live-account";
|
||||||
import { useMyPosition } from "@/core/positions";
|
import { useMyPosition } from "@/core/positions";
|
||||||
@@ -15,7 +15,13 @@ import { cn } from "@/lib/utils";
|
|||||||
* 配色按当前内容区前景色（foreground / muted-foreground），适配聊天页浅底顶栏，
|
* 配色按当前内容区前景色（foreground / muted-foreground），适配聊天页浅底顶栏，
|
||||||
* 而非 Header 的白字贴 banner 方案。
|
* 而非 Header 的白字贴 banner 方案。
|
||||||
*/
|
*/
|
||||||
export function UserIdentityBadge({ className }: { className?: string }) {
|
export function UserIdentityBadge({
|
||||||
|
className,
|
||||||
|
variant = "plain",
|
||||||
|
}: {
|
||||||
|
className?: string;
|
||||||
|
variant?: "plain" | "topbar";
|
||||||
|
}) {
|
||||||
// userInfo belongs to external-app route parameters and can legitimately
|
// userInfo belongs to external-app route parameters and can legitimately
|
||||||
// outlive a login switch. The visible account name must instead match the
|
// outlive a login switch. The visible account name must instead match the
|
||||||
// settings page's current auth identity.
|
// settings page's current auth identity.
|
||||||
@@ -26,13 +32,33 @@ export function UserIdentityBadge({ className }: { className?: string }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn("flex shrink-0 items-center gap-2", className)}
|
data-workspace-user={variant}
|
||||||
|
className={cn(
|
||||||
|
"flex shrink-0 items-center gap-2",
|
||||||
|
variant === "topbar" &&
|
||||||
|
"h-10 max-w-[240px] rounded-lg px-1.5 py-1 text-slate-700 dark:text-slate-200",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
title={positionName ? `${displayName}·${positionName}` : displayName}
|
title={positionName ? `${displayName}·${positionName}` : displayName}
|
||||||
>
|
>
|
||||||
<div className="bg-muted text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full">
|
<div
|
||||||
<User className="size-3.5" />
|
className={cn(
|
||||||
|
"bg-muted text-muted-foreground relative flex size-7 shrink-0 items-center justify-center rounded-full",
|
||||||
|
variant === "topbar" &&
|
||||||
|
"size-8 bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-[0_4px_12px_-6px_rgba(37,99,235,0.8)] ring-1 ring-blue-500/10 dark:from-blue-400 dark:to-indigo-500",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<UserRound className={cn("size-3.5", variant === "topbar" && "size-4")} />
|
||||||
|
{variant === "topbar" && (
|
||||||
|
<span className="absolute right-0 bottom-0 size-2.5 rounded-full border-2 border-white bg-emerald-500 dark:border-slate-950" />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden min-w-0 text-left sm:block">
|
<div
|
||||||
|
className={cn(
|
||||||
|
"hidden min-w-0 text-left sm:block",
|
||||||
|
variant === "topbar" && "max-w-[165px]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
<p className="text-foreground truncate text-sm font-medium leading-tight">
|
<p className="text-foreground truncate text-sm font-medium leading-tight">
|
||||||
{displayName}
|
{displayName}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -3,8 +3,7 @@
|
|||||||
import { useSearchParams } from "next/navigation";
|
import { useSearchParams } from "next/navigation";
|
||||||
import { useMemo } from "react";
|
import { useMemo } from "react";
|
||||||
|
|
||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
import { useDisplayDesensitizer } from "@/core/sensitive-words/use-display-desensitizer";
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
import { AuroraText } from "../ui/aurora-text";
|
import { AuroraText } from "../ui/aurora-text";
|
||||||
@@ -16,8 +15,7 @@ export function Welcome({
|
|||||||
className?: string;
|
className?: string;
|
||||||
mode?: "ultra" | "pro" | "thinking" | "flash";
|
mode?: "ultra" | "pro" | "thinking" | "flash";
|
||||||
}) {
|
}) {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const desensitizeText = useDisplayDesensitizer();
|
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const isUltra = useMemo(() => mode === "ultra", [mode]);
|
const isUltra = useMemo(() => mode === "ultra", [mode]);
|
||||||
const colors = useMemo(() => {
|
const colors = useMemo(() => {
|
||||||
@@ -38,7 +36,7 @@ export function Welcome({
|
|||||||
t.welcome.createYourOwnSkill
|
t.welcome.createYourOwnSkill
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<AuroraText colors={colors}>{desensitizeText(t.welcome.greeting)}</AuroraText>
|
<AuroraText colors={colors}>{t.welcome.greeting}</AuroraText>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,8 +12,10 @@ import {
|
|||||||
BreadcrumbPage,
|
BreadcrumbPage,
|
||||||
BreadcrumbSeparator,
|
BreadcrumbSeparator,
|
||||||
} from "@/components/ui/breadcrumb";
|
} from "@/components/ui/breadcrumb";
|
||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
import { ThemeSwitcher } from "@/components/workspace/appearance-controls";
|
||||||
|
import { UserIdentityBadge } from "@/components/workspace/user-identity-badge";
|
||||||
|
|
||||||
export function WorkspaceContainer({
|
export function WorkspaceContainer({
|
||||||
className,
|
className,
|
||||||
@@ -93,9 +95,15 @@ export function WorkspaceHeader({
|
|||||||
</BreadcrumbList>
|
</BreadcrumbList>
|
||||||
</Breadcrumb>
|
</Breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
{rightActions ? (
|
<div className="flex items-center gap-2 px-4">
|
||||||
<div className="flex items-center gap-2 px-4">{rightActions}</div>
|
{rightActions}
|
||||||
) : null}
|
<ThemeSwitcher tone="content" />
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
className="mx-1 h-6 w-px bg-slate-200 dark:bg-slate-700"
|
||||||
|
/>
|
||||||
|
<UserIdentityBadge variant="topbar" />
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -123,7 +131,8 @@ function nameOfSegment(
|
|||||||
t: ReturnType<typeof useI18n>["t"],
|
t: ReturnType<typeof useI18n>["t"],
|
||||||
) {
|
) {
|
||||||
if (!segment) return t.common.home;
|
if (!segment) return t.common.home;
|
||||||
if (segment === "workspace") return t.breadcrumb.workspace;
|
if (segment === "workspace") return t.breadcrumb.workspace;
|
||||||
if (segment === "chats") return t.breadcrumb.chats;
|
if (segment === "chats") return t.breadcrumb.chats;
|
||||||
return segment[0]?.toUpperCase() + segment.slice(1);
|
if (segment === "agents") return t.agents.title;
|
||||||
}
|
return segment[0]?.toUpperCase() + segment.slice(1);
|
||||||
|
}
|
||||||
@@ -14,7 +14,7 @@ import {
|
|||||||
} from "@/components/ui/sidebar";
|
} from "@/components/ui/sidebar";
|
||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
// import { BotIcon, BrainIcon, ListChecks, MessageSquarePlus, MessagesSquare, SparklesIcon, UsersIcon } from "lucide-react";
|
// import { BotIcon, BrainIcon, ListChecks, MessageSquarePlus, MessagesSquare, SparklesIcon, UsersIcon } from "lucide-react";
|
||||||
import { BookOpen, BotIcon, BrainIcon, BriefcaseBusiness, ListChecks, MessageSquarePlus, MessagesSquare, PenLine, Plus, SparklesIcon, Users } from "lucide-react";
|
import { BookOpen, BotIcon, BrainIcon, ListChecks, MessageSquarePlus, MessagesSquare, PenLine, Plus, SparklesIcon, Users } from "lucide-react";
|
||||||
|
|
||||||
import { KnowledgeRagToggle } from "./knowledge-rag-toggle";
|
import { KnowledgeRagToggle } from "./knowledge-rag-toggle";
|
||||||
import { SidebarCollapseButton } from "./workspace-header";
|
import { SidebarCollapseButton } from "./workspace-header";
|
||||||
@@ -23,19 +23,19 @@ import { cn } from "@/lib/utils";
|
|||||||
|
|
||||||
// 普通导航项：默认中性色，激活态与「新对话」一致——主色浅底 + 主色文字/图标
|
// 普通导航项：默认中性色，激活态与「新对话」一致——主色浅底 + 主色文字/图标
|
||||||
const NAV_ITEM_CLASS =
|
const NAV_ITEM_CLASS =
|
||||||
"workspace-nav-item text-sidebar-foreground/80 hover:text-primary rounded-xl h-9 px-3 transition-colors hover:bg-primary/10 " +
|
"text-sidebar-foreground/80 hover:text-primary rounded-xl h-9 px-3 transition-colors hover:bg-primary/10 " +
|
||||||
"data-[active=true]:bg-primary/15 data-[active=true]:text-primary data-[active=true]:shadow-none " +
|
"data-[active=true]:bg-primary/15 data-[active=true]:text-primary data-[active=true]:shadow-none " +
|
||||||
"dark:hover:bg-primary/15 dark:data-[active=true]:bg-primary/25 dark:data-[active=true]:text-primary-foreground";
|
"dark:hover:bg-primary/15 dark:data-[active=true]:bg-primary/25 dark:data-[active=true]:text-primary-foreground";
|
||||||
|
|
||||||
// 「新对话」专属：默认仅主色文字/图标（显眼但不是选中态），命中 /chats/new 时才上主色底
|
// 「新对话」专属：默认仅主色文字/图标（显眼但不是选中态），命中 /chats/new 时才上主色底
|
||||||
const NEW_CHAT_CLASS =
|
const NEW_CHAT_CLASS =
|
||||||
"workspace-nav-new-chat rounded-xl h-9 px-3 text-primary transition-colors hover:bg-primary/10 hover:text-primary " +
|
"rounded-xl h-9 px-3 text-primary transition-colors hover:bg-primary/10 hover:text-primary " +
|
||||||
"data-[active=true]:bg-primary/15 data-[active=true]:text-primary data-[active=true]:shadow-none " +
|
"data-[active=true]:bg-primary/15 data-[active=true]:text-primary data-[active=true]:shadow-none " +
|
||||||
"dark:text-primary-foreground dark:hover:bg-primary/15 dark:data-[active=true]:bg-primary/25";
|
"dark:text-primary-foreground dark:hover:bg-primary/15 dark:data-[active=true]:bg-primary/25";
|
||||||
|
|
||||||
// 紧凑模式（CM 参考图）：白卡描边、居中、主色 + 图标
|
// 紧凑模式（CM 参考图）：白卡描边、居中、主色 + 图标
|
||||||
const NEW_CHAT_COMPACT_CLASS =
|
const NEW_CHAT_COMPACT_CLASS =
|
||||||
"workspace-compact-new-chat h-9 justify-center gap-2 rounded-xl bg-card text-[13px] font-semibold text-foreground transition-colors " +
|
"h-9 justify-center gap-2 rounded-xl bg-card text-[13px] font-semibold text-foreground transition-colors " +
|
||||||
"border border-[rgb(var(--legacy-primary-rgb)/18%)] " +
|
"border border-[rgb(var(--legacy-primary-rgb)/18%)] " +
|
||||||
"hover:bg-[rgb(var(--legacy-primary-rgb)/4%)] hover:text-[var(--primary)] hover:border-[rgb(var(--legacy-primary-rgb)/32%)] " +
|
"hover:bg-[rgb(var(--legacy-primary-rgb)/4%)] hover:text-[var(--primary)] hover:border-[rgb(var(--legacy-primary-rgb)/32%)] " +
|
||||||
"data-[active=true]:bg-card data-[active=true]:text-[var(--primary)] data-[active=true]:shadow-none";
|
"data-[active=true]:bg-card data-[active=true]:text-[var(--primary)] data-[active=true]:shadow-none";
|
||||||
@@ -184,18 +184,6 @@ export function WorkspaceNavChatList({
|
|||||||
</Link>
|
</Link>
|
||||||
</SidebarMenuButton>
|
</SidebarMenuButton>
|
||||||
</SidebarMenuItem>
|
</SidebarMenuItem>
|
||||||
{/* <SidebarMenuItem>
|
|
||||||
<SidebarMenuButton
|
|
||||||
isActive={pathname.startsWith("/page/workspace/roundtable/position")}
|
|
||||||
asChild
|
|
||||||
className={NAV_ITEM_CLASS}
|
|
||||||
>
|
|
||||||
<Link href="/page/workspace/roundtable/position">
|
|
||||||
<BriefcaseBusiness />
|
|
||||||
<span>岗位会商</span>
|
|
||||||
</Link>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem> */}
|
|
||||||
<SidebarMenuItem>
|
<SidebarMenuItem>
|
||||||
<SidebarMenuButton
|
<SidebarMenuButton
|
||||||
isActive={pathname === "/page/workspace/scheduled/tasks"}
|
isActive={pathname === "/page/workspace/scheduled/tasks"}
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import {
|
|||||||
GaugeIcon,
|
GaugeIcon,
|
||||||
HistoryIcon,
|
HistoryIcon,
|
||||||
MessageCircleQuestionIcon,
|
MessageCircleQuestionIcon,
|
||||||
|
PlugIcon,
|
||||||
ScrollTextIcon,
|
ScrollTextIcon,
|
||||||
Settings2Icon,
|
Settings2Icon,
|
||||||
SettingsIcon,
|
SettingsIcon,
|
||||||
@@ -218,14 +219,14 @@ export function WorkspaceNavMenu() {
|
|||||||
<TagsIcon />
|
<TagsIcon />
|
||||||
{t.adminTags.title}
|
{t.adminTags.title}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
{/* {isAdmin && (
|
{isAdmin && (
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => navigate("/page/workspace/admin/plugins")}
|
onClick={() => navigate("/page/workspace/admin/plugins")}
|
||||||
>
|
>
|
||||||
<PlugIcon />
|
<PlugIcon />
|
||||||
插件管理
|
插件管理
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
)} */}
|
)}
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => navigate("/page/workspace/admin/positions")}
|
onClick={() => navigate("/page/workspace/admin/positions")}
|
||||||
@@ -234,14 +235,6 @@ export function WorkspaceNavMenu() {
|
|||||||
岗位管理
|
岗位管理
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
{isAdmin && (
|
|
||||||
<DropdownMenuItem
|
|
||||||
onClick={() => navigate("/page/workspace/admin/position-roles")}
|
|
||||||
>
|
|
||||||
<BriefcaseIcon />
|
|
||||||
岗位角色配置
|
|
||||||
</DropdownMenuItem>
|
|
||||||
)}
|
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
|
|||||||
Loaded 100 of 490 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user