feat(web): add context pack presets

Author: BlueSkyXN

apps/web/static/app.js

@@ -44,7 +44,10 @@ let activeReportId = '';
 let commandAssetsLoaded = false;
 let contextPackAssetFilterState = {q:'', type:'all'};
 const CONTEXT_PACK_STORAGE_KEY = 'dap_context_pack_v1';
+const CONTEXT_PACK_PRESETS_STORAGE_KEY = 'dap_context_pack_presets_v1';
 let contextPack = loadContextPack();
+let contextPackPresets = loadContextPackPresets();
+let activeContextPackPresetId = '';
 
 async function api(path, opts={}){
   const headers = Object.assign({'Content-Type':'application/json'}, opts.headers || {});
@@ -172,6 +175,32 @@ function loadContextPack(){
     return defaultContextPack();
   }
 }
+function contextPackPresetId(){
+  return `pack_${Date.now().toString(36)}_${Math.random().toString(36).slice(2,7)}`;
+}
+function normalizeContextPackPreset(preset={}){
+  const pack=normalizeContextPack(preset.pack||preset);
+  const name=short(String(preset.name||pack.name||'工作包预设').trim()||'工作包预设',40);
+  pack.name=name;
+  return {
+    id:String(preset.id||contextPackPresetId()).slice(0,80),
+    name,
+    pack,
+    updatedAt:String(preset.updatedAt||pack.updatedAt||new Date().toISOString()).slice(0,40)
+  };
+}
+function loadContextPackPresets(){
+  try{
+    const stored=localStorage.getItem(CONTEXT_PACK_PRESETS_STORAGE_KEY);
+    const list=stored?JSON.parse(stored):[];
+    return Array.isArray(list)?list.map(normalizeContextPackPreset).slice(0,12):[];
+  }catch(e){
+    return [];
+  }
+}
+function persistContextPackPresets(){
+  try{localStorage.setItem(CONTEXT_PACK_PRESETS_STORAGE_KEY,JSON.stringify(contextPackPresets));}catch(e){}
+}
 function contextPackHasContent(pack=contextPack){
   const p=normalizeContextPack(pack);
   return Boolean(p.instructions.trim()||p.agentId||p.datasetIds.length||p.knowledgeBaseIds.length||p.reportIds.length||p.traceIds.length||p.sessionId||(p.includeCanvas&&chatCanvasValue().trim()));
@@ -1752,6 +1781,19 @@ function contextPackPills(){
 function contextPackStatusText(){
   return contextPack.updatedAt?`已更新 ${timeText(contextPack.updatedAt)} · 本地浏览器工作包`:'本地浏览器工作包 · 未写入服务端';
 }
+function renderContextPackPresetBar(){
+  const options=contextPackPresets.map(p=>`<option value="${esc(p.id)}" ${p.id===activeContextPackPresetId?'selected':''}>${esc(p.name)} · ${esc(timeText(p.updatedAt))}</option>`).join('');
+  return `<div class="context-pack-presets" aria-label="工作包预设">
+    <label><span>项目预设</span><select id="contextPackPresetSelect" onchange="activeContextPackPresetId=this.value">
+      <option value="">选择本地预设</option>${options}
+    </select></label>
+    <div>
+      <button type="button" onclick="saveContextPackPreset(this)">保存</button>
+      <button type="button" onclick="loadContextPackPreset()">加载</button>
+      <button type="button" onclick="deleteContextPackPreset(this)">删除</button>
+    </div>
+  </div>`;
+}
 function contextPackAssetItems(){
   const q=(contextPackAssetFilterState.q||'').trim().toLowerCase();
   const type=contextPackAssetFilterState.type||'all';
@@ -1824,6 +1866,7 @@ function renderContextPackPanel(){
   const p=normalizeContextPack(contextPack);
   return `<section id="contextPackPanel" class="context-pack-card ${active?'active':''}" aria-label="工作包">
     <div class="context-pack-head"><div><span>Context Pack</span><b>${esc(contextPack.name||'默认工作包')}</b></div>${active?tag('active','green'):tag('empty')}</div>
+    ${renderContextPackPresetBar()}
     <label class="field-label" for="contextPackInstructions">工作指令</label>
     <textarea id="contextPackInstructions" rows="4" placeholder="写下这组工作要长期遵循的口径、范围或偏好。" oninput="updateContextPackInstructions(this.value)">${esc(contextPack.instructions)}</textarea>
     <div class="context-pack-memory" aria-label="工作包记忆边界">
@@ -1860,6 +1903,54 @@ function persistContextPack(opts={}){
   }
   if(opts.toast) toast(opts.toast);
 }
+function selectedContextPackPreset(){
+  const select=document.getElementById('contextPackPresetSelect');
+  const id=select?.value || activeContextPackPresetId || '';
+  return contextPackPresets.find(p=>p.id===id)||null;
+}
+function saveContextPackPreset(btn){
+  setBusy(btn,true);
+  try{
+    const existing=selectedContextPackPreset();
+    const baseName=existing?.name || contextPack.name || '默认工作包';
+    const name=window.prompt(existing?'更新工作包预设名称':'保存工作包预设',baseName);
+    if(name===null) return;
+    const clean=short(name.trim(),40);
+    if(!clean) return toast('预设名称不能为空');
+    contextPack=normalizeContextPack(Object.assign({},contextPack,{name:clean,updatedAt:new Date().toISOString()}));
+    const preset=normalizeContextPackPreset({id:existing?.id||contextPackPresetId(),name:clean,pack:contextPack,updatedAt:new Date().toISOString()});
+    contextPackPresets=[preset,...contextPackPresets.filter(p=>p.id!==preset.id)].slice(0,12);
+    activeContextPackPresetId=preset.id;
+    persistContextPackPresets();
+    persistContextPack({toast:existing?'工作包预设已更新':'工作包预设已保存'});
+  }finally{
+    setBusy(btn,false);
+  }
+}
+function loadContextPackPreset(id=''){
+  const targetId=id || document.getElementById('contextPackPresetSelect')?.value || activeContextPackPresetId;
+  const preset=contextPackPresets.find(p=>p.id===targetId);
+  if(!preset) return toast('请选择要加载的工作包预设');
+  activeContextPackPresetId=preset.id;
+  contextPack=normalizeContextPack(Object.assign({},preset.pack,{name:preset.name,updatedAt:new Date().toISOString()}));
+  persistContextPack({toast:`已加载工作包预设：${preset.name}`});
+  if(activePage==='chat') applyContextPackToChat();
+}
+function deleteContextPackPreset(btn){
+  const preset=selectedContextPackPreset();
+  if(!preset) return toast('请选择要删除的工作包预设');
+  if(!window.confirm(`删除本地工作包预设“${preset.name}”？`)) return;
+  setBusy(btn,true);
+  try{
+    contextPackPresets=contextPackPresets.filter(p=>p.id!==preset.id);
+    if(activeContextPackPresetId===preset.id) activeContextPackPresetId='';
+    persistContextPackPresets();
+    syncContextPackPanel();
+    toast('工作包预设已删除');
+  }finally{
+    setBusy(btn,false);
+  }
+}
 function updateContextPackInstructions(value){
   contextPack.instructions=String(value||'').slice(0,1200);
   contextPack.updatedAt=new Date().toISOString();

apps/web/static/styles.css

@@ -623,6 +623,13 @@ button.ghost,.prompt-pill{background:#fff;color:#2d2d2a;border-color:#e1ded6}
 .context-pack-head span{display:block;color:#7d786d;font-size:10px;font-weight:900;text-transform:uppercase;margin-bottom:3px}
 .context-pack-head b{display:block;font-size:14px;line-height:1.3}
 .context-pack-card textarea{min-height:86px;border-radius:12px;background:#fff;font-size:12px;line-height:1.5}
+.context-pack-presets{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:end;background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px}
+.context-pack-presets label{display:grid;gap:4px;min-width:0}
+.context-pack-presets span{color:#7d786d;font-size:10px;font-weight:900;text-transform:uppercase}
+.context-pack-presets select{min-height:32px;border-radius:10px;background:#fbfaf7;font-size:12px}
+.context-pack-presets div{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
+.context-pack-presets button{min-height:32px;padding:5px 8px;border-radius:999px;background:#fbfaf7;color:#4b4842;border:1px solid var(--line);box-shadow:none;font-size:11px}
+.context-pack-presets button:hover{background:#171717;color:#fff;border-color:#171717;filter:none;transform:none}
 .context-pack-memory{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px}
 .context-pack-memory span{color:#7d786d;font-size:10px;font-weight:900;text-transform:uppercase;padding-left:4px;min-width:0}
 .context-pack-memory button{min-height:28px;padding:5px 9px;border-radius:999px;background:#fbfaf7;color:#4b4842;border:1px solid var(--line);box-shadow:none;font-size:11px}
@@ -754,6 +761,8 @@ button.ghost,.prompt-pill{background:#fff;color:#2d2d2a;border-color:#e1ded6}
   .composer-tools{grid-template-columns:1fr}
   .context-pack-actions{grid-template-columns:1fr 1fr}
   .context-pack-filter{grid-template-columns:1fr}
+  .context-pack-presets{grid-template-columns:1fr}
+  .context-pack-presets div{justify-content:flex-start}
   .context-pack-memory{grid-template-columns:1fr 1fr}
   .context-pack-memory span{grid-column:1 / -1}
   .context-pack-pill{grid-template-columns:1fr}

docs/ui-function-map.md

@@ -4,7 +4,7 @@
 
 1. **控制塔**：总体状态、Agent/Trace/SQL/Codex 指标、关键链路、快捷分析入口、任务 composer、最近会话/报告继续工作面板和最近任务队列 Trace 下钻。
 2. **Agent Studio**：按能力目录选择 Agent，支持名称/ID/Adapter 搜索、能力类型和风险筛选，右侧 inspector 查看风险、版本、知识绑定，并直接进入问数/研究。
-3. **智能问数**：左侧场景问题、可搜索/重命名/归档的会话库和 Project-style 工作包，中间对话与图表/表格/报告，右侧 Trace 证据链和可编辑工作 Canvas；composer 显示 Agent/数据集/工具/证据/工作包上下文。工作包支持搜索并加入数据集、知识库和报告资产，可逐项打开或移除上下文，可设置项目内/默认记忆边界，可把 Canvas 草稿随 `context_pack.canvas_markdown` 提交给问数请求，可把知识库随 `context_pack.knowledge_base_ids` 一起提交给问数请求，并提供解释指标、生成图表、打开数据资产、转深度研究、创建 Codex 任务、发送中停止生成、用户问题编辑/重问/分支/写入 Canvas/复制、会话 Brief 生成/复制/下载、回答写入/追加 Canvas、提取下一步、回答后续追问建议、捕获上下文、应用工作包、生成分析大纲/SQL 草稿/报告要点、Canvas Markdown 加粗/斜体/标题/项目列表/编号列表格式化、Canvas 选区润色/补证据/压缩/展开/追问、本地版本回退、版本变化对比、保存报告草稿和下载 Markdown 的快捷动作。
+3. **智能问数**：左侧场景问题、可搜索/重命名/归档的会话库和 Project-style 工作包，中间对话与图表/表格/报告，右侧 Trace 证据链和可编辑工作 Canvas；composer 显示 Agent/数据集/工具/证据/工作包上下文。工作包支持搜索并加入数据集、知识库和报告资产，可逐项打开或移除上下文，可保存/加载/删除本地项目预设，可设置项目内/默认记忆边界，可把 Canvas 草稿随 `context_pack.canvas_markdown` 提交给问数请求，可把知识库随 `context_pack.knowledge_base_ids` 一起提交给问数请求，并提供解释指标、生成图表、打开数据资产、转深度研究、创建 Codex 任务、发送中停止生成、用户问题编辑/重问/分支/写入 Canvas/复制、会话 Brief 生成/复制/下载、回答写入/追加 Canvas、提取下一步、回答后续追问建议、捕获上下文、应用工作包、生成分析大纲/SQL 草稿/报告要点、Canvas Markdown 加粗/斜体/标题/项目列表/编号列表格式化、Canvas 选区润色/补证据/压缩/展开/追问、本地版本回退、版本变化对比、保存报告草稿和下载 Markdown 的快捷动作。
 4. **深度研究**：研究 brief、可审批计划、历史研究任务队列、证据 Trace、报告草稿入口和取消/刷新任务。
 5. **分析面板**：物化经营总览面板、创建面板 brief、添加 Widget，并通过 SQL Guard 预校验后刷新面板证据。
 6. **数据能力**：可搜索/筛选的数据资产库、数据集详情、字段/指标、只读 SQL Workbench、数据画像、业务规则运行、质量历史复核，以及从数据集直接进入问数/研究/Codex 治理任务的上下文动作。