wsk/deerflow-code
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(deep-research): 优化深度研究侧边栏与结构配置弹窗的暗色主题适配

Browse Source 
为深度研究沙箱预览区和工作流配置弹窗补充暗色下背景与边框配色，避免在深色模式出现对比度不足和样式不一致。
This commit is contained in:
董宏凯 committed 2026-09-01 13:47:39 +08:00
1 parent aeb9a55497
commit dbf62e5889
2 files changed
+65 -65
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend-web/src/pages/deep-research/ResearchSandboxPanel.tsx
+2 -2
View File
@@ -155,12 +155,12 @@ export function ResearchSandboxPanel({
/>
<ResizablePanel
className={cn(
"bg-[#fffdfa] transition-all duration-300 ease-in-out",
"bg-[#fffdfa] transition-all duration-300 ease-in-out dark:bg-[#0b1426]",
!open && "opacity-0",
)}
id="artifacts"
>
<div className="relative h-full bg-[#fffdfa] p-4">
<div className="relative h-full bg-[#fffdfa] p-4 dark:bg-[#0b1426]">
{selectedArtifact && previewThreadId && stubMessages.length > 0 ? (
<>
{documentRewriteActive && onCancelDocumentRewrite && (
frontend-web/src/pages/deep-research/WorkflowConfigDialog.tsx
+63 -63
View File
@@ -114,7 +114,7 @@ const outlineMarkdownClassName =
"[&_p]:my-2.5 [&_ul]:my-2.5 [&_ol]:my-2.5 [&_li]:my-1 " +
"[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5 " +
"[&_strong]:font-semibold [&_strong]:text-neutral-900 dark:[&_strong]:text-slate-100 " +
"[&_blockquote]:my-3 [&_blockquote]:border-l-4 [&_blockquote]:border-rose-200 [&_blockquote]:pl-4 [&_blockquote]:text-neutral-500 dark:[&_blockquote]:border-rose-900/50 dark:[&_blockquote]:text-slate-400 " +
"[&_blockquote]:my-3 [&_blockquote]:border-l-4 [&_blockquote]:border-rose-200 [&_blockquote]:pl-4 [&_blockquote]:text-neutral-500 dark:[&_blockquote]:border-[#2b8ffe]/45 dark:[&_blockquote]:text-slate-400 " +
"[&_code]:rounded [&_code]:border [&_code]:bg-neutral-100 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs dark:[&_code]:border-slate-700 dark:[&_code]:bg-slate-800 " +
"[&_pre]:my-4 [&_pre]:max-w-full [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:bg-neutral-50 [&_pre]:p-4 dark:[&_pre]:border-slate-700 dark:[&_pre]:bg-slate-800 " +
"[&_pre_code]:border-0 [&_pre_code]:bg-transparent [&_pre_code]:p-0";
@@ -309,17 +309,17 @@ export function WorkflowConfigDialog({
overlayClassName="bg-slate-900/60 backdrop-blur-xs"
className={
!detail
? "flex h-[85vh] max-h-[85vh] w-[calc(100vw-3rem)] max-w-6xl flex-col gap-0 overflow-hidden rounded-3xl border border-slate-200/80 bg-white p-0 shadow-2xl dark:border-slate-800 dark:bg-slate-900 sm:max-w-6xl"
: "flex h-[85vh] max-h-[85vh] w-[calc(100vw-3rem)] max-w-6xl flex-col gap-0 overflow-hidden rounded-2xl border border-neutral-200/90 bg-white p-0 shadow-2xl shadow-neutral-950/20 dark:border-slate-800 dark:bg-slate-900 sm:max-w-6xl"
? "flex h-[85vh] max-h-[85vh] w-[calc(100vw-3rem)] max-w-6xl flex-col gap-0 overflow-hidden rounded-3xl border border-slate-200/80 bg-white p-0 shadow-2xl dark:border-[#263b5c] dark:bg-[#0f172a] sm:max-w-6xl"
: "flex h-[85vh] max-h-[85vh] w-[calc(100vw-3rem)] max-w-6xl flex-col gap-0 overflow-hidden rounded-2xl border border-neutral-200/90 bg-white p-0 shadow-2xl shadow-neutral-950/20 dark:border-[#263b5c] dark:bg-[#0f172a] sm:max-w-6xl"
}
>
{/* header：列表视图=标题+筛选+新增；详情视图=结构标题 + 返回结构库 */}
{!detail ? (
<>
<div className="flex shrink-0 items-start justify-between gap-4 border-b border-slate-200/80 bg-white px-6 py-5 dark:border-slate-800/80 dark:bg-slate-900">
<div className="flex shrink-0 items-start justify-between gap-4 border-b border-slate-200/80 bg-white px-6 py-5 dark:border-[#263b5c]/80 dark:bg-[#0f172a]">
<div className="min-w-0">
<div className="flex items-center gap-2">
<div className="h-2.5 w-2.5 rounded-full bg-[#F5222D]" aria-hidden />
<div className="h-2.5 w-2.5 rounded-full bg-[#F5222D] dark:bg-[#4096ff]" aria-hidden />
<h2 className="truncate text-xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
工作流配置 · 报告结构
</h2>
@@ -331,7 +331,7 @@ export function WorkflowConfigDialog({
<Button
variant="ghost"
size="icon"
className="h-10 w-10 shrink-0 rounded-xl text-slate-400 hover:bg-slate-100 hover:text-[#CF1322] dark:hover:bg-slate-800 dark:hover:text-slate-200"
className="h-10 w-10 shrink-0 rounded-xl text-slate-400 hover:bg-slate-100 hover:text-[#CF1322] dark:hover:bg-[#1c2d4a] dark:hover:text-[#9bc7ff]"
aria-label="关闭"
onClick={() => onOpenChange(false)}
>
@@ -339,7 +339,7 @@ export function WorkflowConfigDialog({
</Button>
</div>
<div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-slate-200/80 bg-white px-6 py-3.5 dark:border-slate-800/60 dark:bg-slate-900">
<div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-slate-200/80 bg-white px-6 py-3.5 dark:border-[#263b5c]/70 dark:bg-[#0f172a]">
<div className="flex min-w-[280px] flex-1 flex-wrap items-center gap-2.5">
<div className="relative min-w-[200px] max-w-xs flex-1">
<Search className="pointer-events-none absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2 text-slate-400" />
@@ -347,14 +347,14 @@ export function WorkflowConfigDialog({
value={titleFilter}
onChange={(event) => setTitleFilter(event.target.value)}
placeholder="按标题或检索词筛选..."
className="h-10 rounded-xl border-slate-200/90 bg-slate-50/60 pr-8 pl-9 text-xs text-slate-800 shadow-2xs placeholder:text-slate-400 focus-visible:border-[#F5222D] focus-visible:ring-[#F5222D]/20 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 sm:text-sm"
className="h-10 rounded-xl border-slate-200/90 bg-slate-50/60 pr-8 pl-9 text-xs text-slate-800 shadow-2xs placeholder:text-slate-400 focus-visible:border-[#F5222D] focus-visible:ring-[#F5222D]/20 dark:border-[#2a4164] dark:bg-[#17243a] dark:text-slate-100 dark:focus-visible:border-[#2b8ffe] dark:focus-visible:ring-[#2b8ffe]/25 sm:text-sm"
/>
{titleFilter && (
<button
type="button"
aria-label="清空筛选"
onClick={() => setTitleFilter("")}
className="absolute top-1/2 right-2.5 -translate-y-1/2 text-slate-400 hover:text-[#CF1322] dark:hover:text-slate-200"
className="absolute top-1/2 right-2.5 -translate-y-1/2 text-slate-400 hover:text-[#CF1322] dark:hover:text-[#9bc7ff]"
>
<X className="h-3.5 w-3.5" />
</button>
@@ -366,7 +366,7 @@ export function WorkflowConfigDialog({
value={statusFilter}
onChange={(event) => setStatusFilter(event.target.value as ReportStructureStatusFilter)}
aria-label="启用状态筛选"
className="h-10 cursor-pointer appearance-none rounded-xl border border-slate-200/90 bg-slate-50/60 py-2 pr-8 pl-3 text-xs font-medium text-slate-700 shadow-2xs transition-all hover:border-slate-300 focus:border-[#F5222D] focus:ring-2 focus:ring-[#F5222D]/20 focus:outline-hidden dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 sm:text-sm"
className="h-10 cursor-pointer appearance-none rounded-xl border border-slate-200/90 bg-slate-50/60 py-2 pr-8 pl-3 text-xs font-medium text-slate-700 shadow-2xs transition-all hover:border-slate-300 focus:border-[#F5222D] focus:ring-2 focus:ring-[#F5222D]/20 focus:outline-hidden dark:border-[#2a4164] dark:bg-[#17243a] dark:text-slate-200 dark:hover:border-[#2b8ffe]/70 dark:focus:border-[#2b8ffe] dark:focus:ring-[#2b8ffe]/25 sm:text-sm"
>
<option value="all">全部状态</option>
<option value="enabled">已启用</option>
@@ -380,7 +380,7 @@ export function WorkflowConfigDialog({
value={modeFilter}
onChange={(event) => setModeFilter(event.target.value as "all" | ReportStructureMode)}
aria-label="大纲类型筛选"
className="h-10 cursor-pointer appearance-none rounded-xl border border-slate-200/90 bg-slate-50/60 py-2 pr-8 pl-3 text-xs font-medium text-slate-700 shadow-2xs transition-all hover:border-slate-300 focus:border-[#F5222D] focus:ring-2 focus:ring-[#F5222D]/20 focus:outline-hidden dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 sm:text-sm"
className="h-10 cursor-pointer appearance-none rounded-xl border border-slate-200/90 bg-slate-50/60 py-2 pr-8 pl-3 text-xs font-medium text-slate-700 shadow-2xs transition-all hover:border-slate-300 focus:border-[#F5222D] focus:ring-2 focus:ring-[#F5222D]/20 focus:outline-hidden dark:border-[#2a4164] dark:bg-[#17243a] dark:text-slate-200 dark:hover:border-[#2b8ffe]/70 dark:focus:border-[#2b8ffe] dark:focus:ring-[#2b8ffe]/25 sm:text-sm"
>
<option value="all">全部大纲</option>
<option value="adaptive">弹性大纲</option>
@@ -391,11 +391,11 @@ export function WorkflowConfigDialog({
</div>
<div className="flex shrink-0 items-center gap-2.5">
<span className="rounded-lg border border-slate-200/60 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
<span className="rounded-lg border border-slate-200/60 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 dark:border-[#38527a]/70 dark:bg-[#17243a] dark:text-slate-300">
{visible.length} 套
</span>
<Button
className="h-10 gap-1.5 rounded-xl bg-[#F5222D] px-4 text-xs font-semibold text-white shadow-xs transition-all duration-150 hover:bg-[#BC0D1E] hover:shadow active:bg-[#A8071A] sm:text-sm"
className="h-10 gap-1.5 rounded-xl bg-[#F5222D] px-4 text-xs font-semibold text-white shadow-xs transition-all duration-150 hover:bg-[#BC0D1E] hover:shadow active:bg-[#A8071A] dark:bg-[#1677ff] dark:hover:bg-[#4096ff] dark:active:bg-[#0958d9] sm:text-sm"
onClick={() => {
onOpenChange(false);
const base = location.pathname.replace(/\/+$/, "");
@@ -409,9 +409,9 @@ export function WorkflowConfigDialog({
</div>
</>
) : (
<div className="flex shrink-0 items-center justify-between gap-4 border-b border-neutral-100 bg-white px-6 py-4 dark:border-slate-800 dark:bg-slate-900">
<div className="flex shrink-0 items-center justify-between gap-4 border-b border-neutral-100 bg-white px-6 py-4 dark:border-[#263b5c] dark:bg-[#0f172a]">
<div className="flex min-w-0 items-center gap-3.5">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-b from-[#b91c1c] to-[#991b1b] text-white shadow-xs shadow-rose-900/20">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-b from-[#b91c1c] to-[#991b1b] text-white shadow-xs shadow-rose-900/20 dark:from-[#2b8ffe] dark:to-[#0958d9] dark:shadow-blue-950/30">
<FileText className="h-5 w-5 text-white" strokeWidth={1.9} aria-hidden />
</div>
<div className="min-w-0">
@@ -420,8 +420,8 @@ export function WorkflowConfigDialog({
{detail.title}
</h2>
{detail.id === appliedStructureId && (
<span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-rose-200/70 bg-rose-50 px-2.5 py-0.5 text-xs font-medium text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-300">
<span className="h-1.5 w-1.5 rounded-full bg-rose-600" aria-hidden />
<span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-rose-200/70 bg-rose-50 px-2.5 py-0.5 text-xs font-medium text-rose-700 dark:border-[#2b8ffe]/45 dark:bg-[#0b3064]/60 dark:text-[#9bc7ff]">
<span className="h-1.5 w-1.5 rounded-full bg-rose-600 dark:bg-[#69b1ff]" aria-hidden />
当前使用
</span>
)}
@@ -440,7 +440,7 @@ export function WorkflowConfigDialog({
<div className="flex shrink-0 items-center gap-2">
<button
type="button"
className="inline-flex items-center gap-1.5 rounded-lg border border-neutral-200 bg-white px-3.5 py-1.5 text-xs font-medium text-neutral-700 shadow-2xs transition-all duration-150 hover:border-neutral-300 hover:bg-neutral-50 active:bg-neutral-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
className="inline-flex items-center gap-1.5 rounded-lg border border-neutral-200 bg-white px-3.5 py-1.5 text-xs font-medium text-neutral-700 shadow-2xs transition-all duration-150 hover:border-neutral-300 hover:bg-neutral-50 active:bg-neutral-100 dark:border-[#2a4164] dark:bg-[#17243a] dark:text-slate-200 dark:hover:border-[#2b8ffe]/70 dark:hover:bg-[#1c2d4a]"
onClick={handleBackToList}
>
返回结构库
@@ -448,7 +448,7 @@ export function WorkflowConfigDialog({
<button
type="button"
aria-label="关闭弹窗"
className="rounded-lg p-2 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-700 dark:hover:bg-slate-800 dark:hover:text-slate-200"
className="rounded-lg p-2 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-700 dark:hover:bg-[#1c2d4a] dark:hover:text-[#9bc7ff]"
onClick={() => onOpenChange(false)}
>
<X className="h-4 w-4" />
@@ -460,7 +460,7 @@ export function WorkflowConfigDialog({
{/* body */}
{!detail ? (
<>
<div className="min-h-0 flex-1 overflow-y-auto bg-slate-50/60 dark:bg-slate-900/40">
<div className="min-h-0 flex-1 overflow-y-auto bg-slate-50/60 dark:bg-[#0b1426]">
<div className="p-6">
{listQuery.isLoading ? (
<div className="flex items-center justify-center py-16 text-sm text-slate-500 dark:text-slate-400">
@@ -488,7 +488,7 @@ export function WorkflowConfigDialog({
setStatusFilter("all");
setModeFilter("all");
}}
className="inline-flex items-center gap-1.5 rounded-xl bg-slate-100 px-3.5 py-1.5 text-xs font-medium text-[#CF1322] transition-colors hover:bg-slate-200 dark:bg-rose-950/50 dark:text-[#FA9196]"
className="inline-flex items-center gap-1.5 rounded-xl bg-slate-100 px-3.5 py-1.5 text-xs font-medium text-[#CF1322] transition-colors hover:bg-slate-200 dark:bg-[#17345c] dark:text-[#9bc7ff] dark:hover:bg-[#1d467a]"
>
<RotateCcw className="h-3.5 w-3.5" />
重置所有筛选
@@ -528,12 +528,12 @@ export function WorkflowConfigDialog({
</div>
</div>
<div className="flex shrink-0 items-center justify-between gap-3 border-t border-slate-200/80 bg-white px-6 py-3.5 text-xs dark:border-slate-800 dark:bg-slate-900">
<div className="flex shrink-0 items-center justify-between gap-3 border-t border-slate-200/80 bg-white px-6 py-3.5 text-xs dark:border-[#263b5c] dark:bg-[#0f172a]">
<div className="flex min-w-0 items-center gap-2 truncate text-slate-500 dark:text-slate-400">
<span className="shrink-0">当前已选用：</span>
{appliedStructureId ? (
<span className="flex min-w-0 items-center gap-1 font-semibold text-[#CF1322] dark:text-[#FA9196]">
<Check className="h-3.5 w-3.5 shrink-0 text-[#F5222D]" />
<span className="flex min-w-0 items-center gap-1 font-semibold text-[#CF1322] dark:text-[#9bc7ff]">
<Check className="h-3.5 w-3.5 shrink-0 text-[#F5222D] dark:text-[#4096ff]" />
<span className="truncate">
{structures.find((item) => item.id === appliedStructureId)?.title ?? "当前结构"}
（{reportStructureModeLabel(structures.find((item) => item.id === appliedStructureId)?.structureMode ?? "adaptive")}）
@@ -546,7 +546,7 @@ export function WorkflowConfigDialog({
<Button
variant="ghost"
className="h-9 rounded-xl px-4 text-xs font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
className="h-9 rounded-xl px-4 text-xs font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-[#1c2d4a]"
onClick={() => onOpenChange(false)}
>
完成
@@ -554,11 +554,11 @@ export function WorkflowConfigDialog({
</div>
</>
) : (
<div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-white md:flex-row dark:bg-slate-900">
<aside className="report-structure-detail-scrollbar flex w-full shrink-0 flex-col gap-4 overflow-y-auto border-b border-neutral-100 bg-[#fafbfc] p-[22px] md:w-[320px] md:border-r md:border-b-0 lg:w-[340px] dark:border-slate-800 dark:bg-slate-950/40">
<section className="space-y-2.5 rounded-xl border border-neutral-200/75 bg-white p-4 shadow-2xs dark:border-slate-800 dark:bg-slate-900">
<div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-white md:flex-row dark:bg-[#0b1426]">
<aside className="report-structure-detail-scrollbar flex w-full shrink-0 flex-col gap-4 overflow-y-auto border-b border-neutral-100 bg-[#fafbfc] p-[22px] md:w-[320px] md:border-r md:border-b-0 lg:w-[340px] dark:border-[#263b5c] dark:bg-[#0b1426]">
<section className="space-y-2.5 rounded-xl border border-neutral-200/75 bg-white p-4 shadow-2xs dark:border-[#263b5c] dark:bg-[#111c31]">
<div className="flex items-center gap-2">
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-rose-50 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300">
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-rose-50 text-rose-700 dark:bg-[#0b3064]/60 dark:text-[#69b1ff]">
<Info className="h-3.5 w-3.5" strokeWidth={2} aria-hidden />
</div>
<span className="text-xs font-bold tracking-tight text-neutral-900 dark:text-slate-100">
@@ -570,9 +570,9 @@ export function WorkflowConfigDialog({
</p>
</section>
<section className="space-y-2.5 rounded-xl border border-neutral-200/75 bg-white p-4 shadow-2xs dark:border-slate-800 dark:bg-slate-900">
<section className="space-y-2.5 rounded-xl border border-neutral-200/75 bg-white p-4 shadow-2xs dark:border-[#263b5c] dark:bg-[#111c31]">
<div className="flex items-center gap-2">
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-rose-50 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300">
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-rose-50 text-rose-700 dark:bg-[#0b3064]/60 dark:text-[#69b1ff]">
<Compass className="h-3.5 w-3.5" strokeWidth={2} aria-hidden />
</div>
<span className="text-xs font-bold tracking-tight text-neutral-900 dark:text-slate-100">
@@ -584,9 +584,9 @@ export function WorkflowConfigDialog({
{detail.retrievalDirections.map((direction) => (
<div
key={direction}
className="flex items-center gap-1.5 rounded-lg border border-neutral-200/60 bg-neutral-50 px-2.5 py-1.5 text-xs text-neutral-700 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-300"
className="flex items-center gap-1.5 rounded-lg border border-neutral-200/60 bg-neutral-50 px-2.5 py-1.5 text-xs text-neutral-700 dark:border-[#38527a]/70 dark:bg-[#17243a] dark:text-slate-300"
>
<Tag className="h-3 w-3 shrink-0 text-rose-500" strokeWidth={2} aria-hidden />
<Tag className="h-3 w-3 shrink-0 text-rose-500 dark:text-[#69b1ff]" strokeWidth={2} aria-hidden />
<span className="leading-tight">{direction}</span>
</div>
))}
@@ -598,17 +598,17 @@ export function WorkflowConfigDialog({
)}
</section>
<section className="space-y-2.5 rounded-xl border border-neutral-200/75 bg-white p-4 shadow-2xs dark:border-slate-800 dark:bg-slate-900">
<section className="space-y-2.5 rounded-xl border border-neutral-200/75 bg-white p-4 shadow-2xs dark:border-[#263b5c] dark:bg-[#111c31]">
<div className="flex items-center justify-between gap-3">
<div className="flex min-w-0 items-center gap-2">
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-rose-50 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300">
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-rose-50 text-rose-700 dark:bg-[#0b3064]/60 dark:text-[#69b1ff]">
<Database className="h-3.5 w-3.5" strokeWidth={2} aria-hidden />
</div>
<span className="text-xs font-bold tracking-tight text-neutral-900 dark:text-slate-100">
推荐检索来源
</span>
</div>
<span className="shrink-0 rounded-full border border-neutral-200/60 bg-neutral-100 px-2 py-0.5 text-[11px] font-medium text-neutral-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400">
<span className="shrink-0 rounded-full border border-neutral-200/60 bg-neutral-100 px-2 py-0.5 text-[11px] font-medium text-neutral-500 dark:border-[#38527a]/70 dark:bg-[#17243a] dark:text-slate-400">
{detail.retrievalSkills.length} 个渠道
</span>
</div>
@@ -617,7 +617,7 @@ export function WorkflowConfigDialog({
{detail.retrievalSkills.map((skill) => (
<span
key={skill}
className="rounded-lg border border-neutral-200/60 bg-neutral-50 px-2.5 py-1 text-xs leading-tight text-neutral-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
className="rounded-lg border border-neutral-200/60 bg-neutral-50 px-2.5 py-1 text-xs leading-tight text-neutral-600 dark:border-[#38527a]/70 dark:bg-[#17243a] dark:text-slate-300"
>
{skill}
</span>
@@ -631,10 +631,10 @@ export function WorkflowConfigDialog({
</section>
</aside>
<section className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-slate-900">
<div className="flex shrink-0 items-center justify-between gap-3 border-b border-neutral-100 bg-white px-6 py-3.5 dark:border-slate-800 dark:bg-slate-900">
<section className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-[#0f172a]">
<div className="flex shrink-0 items-center justify-between gap-3 border-b border-neutral-100 bg-white px-6 py-3.5 dark:border-[#263b5c] dark:bg-[#0f172a]">
<div className="flex min-w-0 items-center gap-2">
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-rose-50 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300">
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-rose-50 text-rose-700 dark:bg-[#0b3064]/60 dark:text-[#69b1ff]">
<FileText className="h-3.5 w-3.5" strokeWidth={2} aria-hidden />
</div>
<span className="truncate text-sm font-semibold text-neutral-900 dark:text-slate-100">
@@ -646,7 +646,7 @@ export function WorkflowConfigDialog({
<button
type="button"
onClick={() => void handleCopyOutline()}
className="inline-flex items-center gap-1.5 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-600 shadow-2xs transition-all hover:bg-neutral-50 hover:text-neutral-900 active:scale-95 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100"
className="inline-flex items-center gap-1.5 rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-600 shadow-2xs transition-all hover:bg-neutral-50 hover:text-neutral-900 active:scale-95 dark:border-[#2a4164] dark:text-slate-300 dark:hover:border-[#2b8ffe]/70 dark:hover:bg-[#1c2d4a] dark:hover:text-slate-100"
title="复制大纲文本"
>
{copiedOutlineId === detail.id ? (
@@ -661,15 +661,15 @@ export function WorkflowConfigDialog({
</>
)}
</button>
<span className="inline-flex items-center gap-1.5 rounded-lg border border-rose-200/80 bg-rose-50 px-2.5 py-1 text-xs font-medium text-rose-700 shadow-2xs dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-300">
<span className="h-1.5 w-1.5 rounded-full bg-rose-600" aria-hidden />
<span className="inline-flex items-center gap-1.5 rounded-lg border border-rose-200/80 bg-rose-50 px-2.5 py-1 text-xs font-medium text-rose-700 shadow-2xs dark:border-[#2b8ffe]/45 dark:bg-[#0b3064]/60 dark:text-[#9bc7ff]">
<span className="h-1.5 w-1.5 rounded-full bg-rose-600 dark:bg-[#69b1ff]" aria-hidden />
{reportStructureModeLabel(detail.structureMode)}
</span>
</div>
</div>
<div className="report-structure-detail-scrollbar flex-1 space-y-6 overflow-y-auto bg-white p-6 md:p-8 dark:bg-slate-900">
<div className="flex items-center justify-between gap-4 border-b border-neutral-100 pb-3 dark:border-slate-800">
<div className="report-structure-detail-scrollbar flex-1 space-y-6 overflow-y-auto bg-white p-6 md:p-8 dark:bg-[#0f172a]">
<div className="flex items-center justify-between gap-4 border-b border-neutral-100 pb-3 dark:border-[#263b5c]">
<h3 className="min-w-0 truncate text-base font-bold tracking-tight text-neutral-900 dark:text-slate-100">
{detailOutlineTitle}
</h3>
@@ -784,10 +784,10 @@ function StructureCard({
}}
className={`group relative flex cursor-pointer select-none flex-col justify-between rounded-2xl border p-5 text-left transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-[#F5222D]/30 ${
applied
? "border-[#F5222D] bg-gradient-to-b from-[#FEEDED]/90 via-[#FEFAFA] to-white shadow-sm ring-2 ring-[#F5222D]/20 dark:from-[#5C0011]/35 dark:via-slate-900 dark:to-slate-900"
? "border-[#F5222D] bg-gradient-to-b from-[#FEEDED]/90 via-[#FEFAFA] to-white shadow-sm ring-2 ring-[#F5222D]/20 dark:border-[#2b8ffe]/70 dark:from-[#0c3266]/70 dark:via-[#122347] dark:to-[#0e1c33] dark:ring-[#2b8ffe]/25"
: structure.enabled
? "border-slate-200/90 bg-white hover:border-[#FA9196] hover:bg-gradient-to-b hover:from-[#FEFAFA]/80 hover:to-white hover:shadow-md dark:border-slate-800/90 dark:bg-slate-900 dark:hover:border-[#A8071A]/70"
: "border-slate-200/60 bg-slate-50/80 opacity-75 hover:border-slate-300 hover:opacity-100 dark:border-slate-800/50 dark:bg-slate-900/40"
? "border-slate-200/90 bg-white hover:border-[#FA9196] hover:bg-gradient-to-b hover:from-[#FEFAFA]/80 hover:to-white hover:shadow-md dark:border-[#263b5c]/90 dark:bg-[#111c31] dark:hover:border-[#2b8ffe]/70 dark:hover:bg-gradient-to-b dark:hover:from-[#152b4b] dark:hover:to-[#111c31]"
: "border-slate-200/60 bg-slate-50/80 opacity-75 hover:border-slate-300 hover:opacity-100 dark:border-[#263b5c]/50 dark:bg-[#10192b]/70 dark:hover:border-[#38527a]"
}`}
>
<div>
@@ -799,7 +799,7 @@ function StructureCard({
<div className="mt-2 flex flex-wrap items-center gap-1.5">
{applied && (
<span className="inline-flex items-center gap-1 rounded-full bg-[#F5222D] px-2.5 py-0.5 text-xs font-semibold text-white shadow-xs">
<span className="inline-flex items-center gap-1 rounded-full bg-[#F5222D] px-2.5 py-0.5 text-xs font-semibold text-white shadow-xs dark:bg-[#1677ff]">
<Check className="h-3 w-3 stroke-[3]" />
当前使用
</span>
@@ -807,18 +807,18 @@ function StructureCard({
<span
className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium ${
structure.structureMode === "adaptive"
? "border border-[#FDDADC] bg-[#FEEDED] text-[#BC0D1E] dark:border-[#820014] dark:bg-[#5C0011]/40 dark:text-[#FA9196]"
: "border border-rose-200/70 bg-rose-50/80 text-rose-700 dark:border-rose-800/60 dark:bg-rose-950/40 dark:text-rose-300"
? "border border-[#FDDADC] bg-[#FEEDED] text-[#BC0D1E] dark:border-[#2b8ffe]/45 dark:bg-[#0b3064]/60 dark:text-[#9bc7ff]"
: "border border-rose-200/70 bg-rose-50/80 text-rose-700 dark:border-[#38527a] dark:bg-[#15243d] dark:text-[#b8d4ff]"
}`}
>
<Layers className="h-3 w-3 text-[#F74750]" />
<Layers className="h-3 w-3 text-[#F74750] dark:text-[#69b1ff]" />
{reportStructureModeLabel(structure.structureMode)}
</span>
<span
className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium ${
structure.enabled
? "border border-emerald-200/70 bg-emerald-50 text-emerald-700 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-300"
: "border border-slate-200 bg-slate-100 text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400"
? "border border-emerald-200/70 bg-emerald-50 text-emerald-700 dark:border-emerald-700/55 dark:bg-emerald-950/35 dark:text-emerald-300"
: "border border-slate-200 bg-slate-100 text-slate-500 dark:border-[#38527a]/70 dark:bg-[#17243a] dark:text-slate-400"
}`}
>
{structure.enabled ? "已启用" : "已停用"}
@@ -841,7 +841,7 @@ function StructureCard({
type="button"
title="查看大纲结构"
aria-label={`查看 ${structure.title} 的大纲结构`}
className="rounded-lg p-1.5 transition-colors hover:bg-[#FEEDED] hover:text-[#F5222D] dark:hover:bg-slate-800 dark:hover:text-[#FA9196]"
className="rounded-lg p-1.5 transition-colors hover:bg-[#FEEDED] hover:text-[#F5222D] dark:hover:bg-[#1c2d4a] dark:hover:text-[#9bc7ff]"
onClick={onPreview}
>
<Eye className="h-4 w-4" />
@@ -850,7 +850,7 @@ function StructureCard({
type="button"
title="复制为新结构"
aria-label={`复制 ${structure.title}`}
className="rounded-lg p-1.5 transition-colors hover:bg-[#FEEDED] hover:text-[#F5222D] dark:hover:bg-slate-800 dark:hover:text-[#FA9196]"
className="rounded-lg p-1.5 transition-colors hover:bg-[#FEEDED] hover:text-[#F5222D] dark:hover:bg-[#1c2d4a] dark:hover:text-[#9bc7ff]"
onClick={onDuplicate}
disabled={toggling}
>
@@ -860,7 +860,7 @@ function StructureCard({
type="button"
title="编辑结构"
aria-label={`编辑 ${structure.title}`}
className="rounded-lg p-1.5 transition-colors hover:bg-[#FEEDED] hover:text-[#F5222D] dark:hover:bg-slate-800 dark:hover:text-[#FA9196]"
className="rounded-lg p-1.5 transition-colors hover:bg-[#FEEDED] hover:text-[#F5222D] dark:hover:bg-[#1c2d4a] dark:hover:text-[#9bc7ff]"
onClick={onEdit}
>
<Pencil className="h-4 w-4" />
@@ -884,7 +884,7 @@ function StructureCard({
{directions.length > 0 && (
<div className="mb-4">
<div className="mb-1.5 flex items-center gap-1.5 text-[11px] font-medium text-slate-500 dark:text-slate-400">
<Compass className="h-3.5 w-3.5 text-[#F74750]" />
<Compass className="h-3.5 w-3.5 text-[#F74750] dark:text-[#69b1ff]" />
<span>检索方向</span>
</div>
<div className="flex flex-wrap gap-1.5">
@@ -892,13 +892,13 @@ function StructureCard({
<span
key={direction}
title={direction}
className="inline-flex max-w-[200px] truncate rounded-md border border-[#FDDADC] bg-[#FEFAFA] px-2 py-0.5 text-xs text-slate-700 dark:border-slate-700/60 dark:bg-slate-800/90 dark:text-slate-300"
className="inline-flex max-w-[200px] truncate rounded-md border border-[#FDDADC] bg-[#FEFAFA] px-2 py-0.5 text-xs text-slate-700 dark:border-[#38527a]/70 dark:bg-[#17243a] dark:text-slate-300"
>
{direction}
</span>
))}
{directions.length > 3 && (
<span className="inline-flex items-center rounded-md border border-[#FCB5B9] bg-[#FEEDED] px-1.5 py-0.5 text-[11px] font-medium text-[#F86C73] dark:border-slate-700/40 dark:bg-slate-800/70">
<span className="inline-flex items-center rounded-md border border-[#FCB5B9] bg-[#FEEDED] px-1.5 py-0.5 text-[11px] font-medium text-[#F86C73] dark:border-[#38527a]/70 dark:bg-[#17243a] dark:text-[#9bc7ff]">
+{directions.length - 3}
</span>
)}
@@ -908,7 +908,7 @@ function StructureCard({
</div>
<div
className="mt-auto flex items-center justify-between gap-2 border-t border-slate-100 pt-3 dark:border-slate-800/80"
className="mt-auto flex items-center justify-between gap-2 border-t border-slate-100 pt-3 dark:border-[#263b5c]/80"
onClick={(event) => event.stopPropagation()}
role="presentation"
>
@@ -934,8 +934,8 @@ function StructureCard({
disabled={toggling}
aria-label={`${structure.enabled ? "停用" : "启用"} ${structure.title}`}
onClick={() => onToggleEnabled(!structure.enabled)}
className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-60 ${
structure.enabled ? "bg-[#F5222D]" : "bg-slate-300 dark:bg-slate-700"
className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus-visible:ring-2 focus-visible:ring-[#F5222D]/30 dark:focus-visible:ring-[#2b8ffe]/45 disabled:cursor-not-allowed disabled:opacity-60 ${
structure.enabled ? "bg-[#F5222D] dark:bg-[#1677ff]" : "bg-slate-300 dark:bg-[#2a4164]"
}`}
>
<span