cx-viewer 1.0.2 → 1.0.4

package/src/components/terminal/CustomUltraplanEditModal.module.css

@@ -0,0 +1,189 @@
+/* 双栏:左文档(滚动) / 右编辑。仅桌面端,宽度由 JSX 的 Modal width 兜底。 */
+.split {
+  display: flex;
+  gap: 20px;
+  align-items: stretch;
+  /* 高度固定 65vh:docPanel 不卸载、靠 .docCollapsed 走 flex-basis→0 过渡折叠,
+     如果用 max-height,折叠态 .split 会按"toggle + editPanel"的子内容塌缩到 ~280px,
+     Modal 在两种状态间高度跳动;固定 height 让 .split 在两种状态下都占同一高度,
+     右栏 textarea 借 flex:1 自然撑满多出来的纵向空间(折叠态获得更大编辑区)。 */
+  height: 65vh;
+}
+
+.docPanel {
+  /* flex-grow:0 让 editPanel(grow:1)独占 docPanel 折叠时让出来的横向空间;
+     可 shrink 兼容窄屏。 */
+  flex: 0 1 50%;
+  min-width: 0;
+  overflow-y: auto;
+  padding-right: 14px;
+  border-right: 1px solid var(--border-primary);
+  color: var(--text-primary);
+  /* 折叠/展开过渡:横向收缩(flex-basis) + 视觉收边(padding/border) + 淡出(opacity),
+     250ms ease 适中——既能感知到位移又不拖沓;把手凭 -20px margin-left 自然跟随。 */
+  transition: flex-basis 0.25s ease, padding-right 0.25s ease, border-right-width 0.25s ease, opacity 0.25s ease;
+}
+
+/* 折叠态:横向归零 + 视觉边线收掉 + 内容淡出 + 截断溢出 + 屏蔽指针事件(配合 JSX aria-hidden) */
+.docCollapsed {
+  flex-basis: 0;
+  padding-right: 0;
+  border-right-width: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.editPanel {
+  flex: 1 1 50%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 折叠把手(借鉴 ChatView 的 .terminalToggle):14×48 竖条,chevron 翻转表达方向。
+   方向语义反转:本面板在左,展开时 `<`(向左收回);折叠时 `>`(向右拉出)。 */
+.docToggle {
+  align-self: center;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 48px;
+  cursor: pointer;
+  color: var(--text-disabled);
+  background: var(--overlay-light-faint);
+  /* 圆角靠 docPanel 一侧为平边:展开时贴 docPanel 右边界,折叠时贴 modal 左边界,均为 tab 形态。 */
+  border-radius: 0 4px 4px 0;
+  transition: background 0.2s, color 0.2s;
+  z-index: 20;
+  position: relative;
+}
+
+.docToggle:hover {
+  background: var(--overlay-light-medium);
+  color: var(--text-tertiary);
+}
+
+/* 把手始终是 .split 的第二个子(docPanel 永不卸载,只是 flex-basis→0 折叠)→ -20px 抵消 split 的 gap,
+   让把手紧贴 docPanel 右边界;折叠态 docPanel 宽度收到 0,把手随之滑到 modal 左边缘,视觉过渡平滑。
+   注意:本 margin 量必须等于 .split 的 gap 才能两态都对齐,改一个时记得同步改另一个。 */
+.docToggle {
+  margin-left: -20px;
+}
+
+/* 每个代码块外包一层相对定位容器,复制按钮锚定其右上角,
+   不随 pre 横向滚动跑掉。 */
+.codeWrap {
+  position: relative;
+}
+
+/* 给代码块顶部留出空间,使常驻的复制按钮不遮挡第一行代码。 */
+.docPanel .codeWrap pre {
+  padding-top: 32px;
+}
+
+.copyBtn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 1;
+  padding: 2px 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  border: 1px solid var(--border-light);
+  border-radius: 4px;
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  cursor: pointer;
+  /* 不透明 + 轻微投影:浅色主题下 bg-elevated 与代码块底色接近,靠描边+投影区分。 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.copyBtn:hover {
+  border-color: var(--color-primary);
+  color: var(--text-primary);
+}
+
+.docLoading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+/* 标题行:输入框 + 右侧「载入模版」按钮并排。align-items:stretch 让按钮纵向撑满,
+   与左侧 input 等高(input 高度由其 padding/font 决定,按钮 height:auto 后随行高拉伸)。 */
+.field {
+  margin-bottom: 12px;
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+}
+
+/* 按钮高度跟随 input:清掉 antd 固定 control-height 改为 auto,交给 .field 的 stretch 拉伸。
+   选择器 .field .presetBtn(双类)特异性高于 antd 的 .ant-btn(单类),无需 !important。 */
+.field .presetBtn {
+  height: auto;
+}
+
+/* 包 textarea 的 field 撑满右栏剩余高度 */
+.fieldGrow {
+  flex: 1;
+  display: flex;
+  margin-bottom: 0;
+}
+
+.titleInput {
+  /* flex 行内:占满剩余宽度,可收缩(min-width:0)给按钮让位。 */
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  background: var(--bg-container);
+  color: var(--text-primary);
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.titleInput:focus {
+  border-color: var(--color-primary);
+}
+
+.contentTextarea {
+  flex: 1;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  background: var(--bg-container);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+  min-height: 220px;
+}
+
+.contentTextarea:focus {
+  border-color: var(--color-primary);
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.footerRight {
+  display: flex;
+  gap: 8px;
+}

package/src/components/terminal/PresetExpertPickerModal.jsx

@@ -0,0 +1,116 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Button, Spin, Empty, message } from 'antd';
+import { t, getLang } from '../../i18n';
+import { apiUrl } from '../../utils/apiUrl';
+import { resolveLocalized } from '../../utils/resolveLocalized';
+import styles from './PresetExpertPickerModal.module.css';
+
+// ultraplan「载入模版」选择弹窗:左列表 + 右只读预览 + 载入按钮。
+// 数据来自 GET /api/ultra-agents(扫包内置 ultraAgents/*.json)。title / description 在 JSON 协议层
+// 内联本地化(纯字符串或 {lang: str} 对象),前端按 getLang() 用 resolveLocalized 解析、区域回退;
+// content 是单语言字符串(无 i18n),原样使用。选中后点「载入」,把 { title:已解析串, content }
+// 抛给父级(编辑器)覆盖填入。
+// zIndex 1300:盖在自定义专家编辑弹窗(1200)之上;父弹窗 destroyOnClose 卸载时本组件随之卸载。
+export default function PresetExpertPickerModal({ open, onLoad, onClose }) {
+  const [agents, setAgents] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedId, setSelectedId] = useState(null);
+  const lang = getLang();
+
+  // 每次打开拉取列表(预设随包静态,失败给 toast)。cancelled 标志与 CustomUltraplanEditModal
+  // 同款:避免请求未回时弹窗已关/卸载导致 setState on unmounted。
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setLoading(true);
+    setSelectedId(null);
+    (async () => {
+      try {
+        const res = await fetch(apiUrl('/api/ultra-agents'));
+        const data = res.ok ? await res.json() : null;
+        if (cancelled) return;
+        const list = Array.isArray(data?.agents) ? data.agents : [];
+        setAgents(list);
+        if (list.length) setSelectedId(list[0].id);
+      } catch (_) {
+        if (!cancelled) {
+          setAgents([]);
+          message.error(t('ui.ultraplan.presetLoadError'));
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [open]);
+
+  const selected = agents.find(a => a.id === selectedId) || null;
+  // content 是单语言字符串,直接用;resolveLocalized 仅作用于 title / description。
+  const previewText = selected ? (selected.content || '') : '';
+
+  const handleLoad = () => {
+    if (!selected) return;
+    onLoad({
+      // 标题截断到 30,匹配编辑器输入框 maxLength,避免存入比 UI 允许更长的标题。
+      title: resolveLocalized(selected.title, lang).slice(0, 30),
+      content: selected.content || '',
+    });
+  };
+
+  const footer = (
+    <div className={styles.footer}>
+      <Button onClick={onClose}>{t('ui.ultraplan.customCancel')}</Button>
+      <Button type="primary" disabled={!selected} onClick={handleLoad}>
+        {t('ui.ultraplan.presetLoad')}
+      </Button>
+    </div>
+  );
+
+  return (
+    <Modal
+      title={t('ui.ultraplan.presetPickerTitle')}
+      open={open}
+      onCancel={onClose}
+      footer={footer}
+      width="min(900px, calc(100vw - 80px))"
+      zIndex={1300}
+      destroyOnHidden
+      styles={{ content: { background: 'var(--bg-elevated)', border: '1px solid var(--border-light)' }, header: { background: 'var(--bg-elevated)', borderBottom: 'none' } }}
+    >
+      {loading ? (
+        <div className={styles.loading}><Spin /></div>
+      ) : agents.length === 0 ? (
+        <div className={styles.loading}>
+          <Empty description={t('ui.ultraplan.presetEmpty')} />
+        </div>
+      ) : (
+        <div className={styles.split}>
+          <div className={styles.list}>
+            {agents.map(a => {
+              const title = resolveLocalized(a.title, lang);
+              const desc = resolveLocalized(a.description, lang);
+              return (
+                <div
+                  key={a.id}
+                  className={`${styles.item} ${a.id === selectedId ? styles.itemActive : ''}`}
+                  onClick={() => setSelectedId(a.id)}
+                >
+                  <div className={styles.itemTitle}>{title}</div>
+                  {desc && <div className={styles.itemDesc}>{desc}</div>}
+                </div>
+              );
+            })}
+          </div>
+          <div className={styles.previewPane}>
+            <textarea
+              className={styles.preview}
+              value={previewText}
+              readOnly
+              placeholder={t('ui.ultraplan.presetPreviewPlaceholder')}
+            />
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}

package/src/components/terminal/PresetExpertPickerModal.module.css

@@ -0,0 +1,90 @@
+/* 预设专家选择弹窗:左列表 / 右只读预览。仅桌面端,宽度由 JSX Modal width 兜底。 */
+.split {
+  display: flex;
+  gap: 16px;
+  align-items: stretch;
+  height: 60vh;
+}
+
+/* 左栏:专家列表,纵向滚动。固定基准宽度,不随预览挤压。 */
+.list {
+  flex: 0 0 240px;
+  min-width: 0;
+  overflow-y: auto;
+  padding-right: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.item {
+  padding: 10px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  background: var(--bg-container);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.item:hover {
+  border-color: var(--color-primary);
+}
+
+/* 选中态:主色描边 + 轻微主色底,与 antd primary 语义一致。 */
+.itemActive {
+  border-color: var(--color-primary);
+  background: var(--overlay-light-faint);
+}
+
+.itemTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-word;
+}
+
+.itemDesc {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-tertiary);
+  word-break: break-word;
+}
+
+/* 右栏:只读预览,撑满剩余宽度。 */
+.previewPane {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+}
+
+.preview {
+  flex: 1;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  background: var(--bg-container);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+/* loading / 空态居中容器 */
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  height: 60vh;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}

package/src/components/terminal/PresetModal.jsx

@@ -0,0 +1,118 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { Modal, Button, Checkbox } from 'antd';
+import { t } from '../../i18n';
+import styles from './TerminalPanel.module.css';
+import { buildPresetShortcutsPayload } from '../../utils/presetShortcuts';
+
+export default function PresetModal({ open, onClose, items, onItemsChange, dismissedBuiltinPresets, onSavePresets }) {
+  const savePresets = useCallback((nextItems, nextDismissed) => {
+    if (typeof onSavePresets === 'function') {
+      onSavePresets(buildPresetShortcutsPayload(nextItems, nextDismissed));
+    }
+  }, [onSavePresets]);
+  const [selected, setSelected] = useState(new Set());
+  const [addVisible, setAddVisible] = useState(false);
+  const [addName, setAddName] = useState('');
+  const [addText, setAddText] = useState('');
+  const [editId, setEditId] = useState(null);
+  const dragIdx = useRef(null);
+  const dragOverIdx = useRef(null);
+  const [, forceRender] = useState(0);
+  const dismissed = useRef(new Set(dismissedBuiltinPresets || []));
+
+  const handleClose = useCallback(() => { setSelected(new Set()); onClose(); }, [onClose]);
+
+  const handleToggle = useCallback((id) => {
+    setSelected(prev => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; });
+  }, []);
+
+  const handleDelete = useCallback(() => {
+    if (selected.size === 0) return;
+    const d = new Set(dismissed.current);
+    for (const item of items) { if (selected.has(item.id) && item.builtinId) d.add(item.builtinId); }
+    dismissed.current = d;
+    const next = items.filter(i => !selected.has(i.id));
+    setSelected(new Set());
+    onItemsChange(next);
+    savePresets(next, d);
+  }, [items, selected, onItemsChange]);
+
+  const handleAdd = useCallback(() => {
+    const description = addText.trim();
+    const teamName = addName.trim();
+    if (!description && !teamName) return;
+    let next;
+    if (editId) {
+      next = items.map(i => {
+        if (i.id !== editId) return i;
+        const updated = { ...i, teamName, description };
+        if (i.builtinId) updated.modified = true;
+        return updated;
+      });
+    } else {
+      next = [...items, { id: Date.now(), teamName, description }];
+    }
+    onItemsChange(next);
+    savePresets(next);
+    setAddVisible(false); setAddName(''); setAddText(''); setEditId(null);
+  }, [items, addName, addText, editId, onItemsChange]);
+
+  const handleDragStart = (idx, e) => { e.stopPropagation(); dragIdx.current = idx; e.dataTransfer.effectAllowed = 'move'; requestAnimationFrame(() => forceRender(n => n + 1)); };
+  const handleDragOver = (idx, e) => { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'move'; if (dragOverIdx.current !== idx) { dragOverIdx.current = idx; forceRender(n => n + 1); } };
+  const handleDragEnd = () => { dragIdx.current = null; dragOverIdx.current = null; forceRender(n => n + 1); };
+  const handleDragLeave = (idx, e) => { e.stopPropagation(); if (dragOverIdx.current === idx) { dragOverIdx.current = null; forceRender(n => n + 1); } };
+  const handleDrop = (idx, e) => {
+    e.preventDefault(); e.stopPropagation();
+    const from = dragIdx.current;
+    if (from === null || from === idx) { handleDragEnd(); return; }
+    const arr = [...items]; const [moved] = arr.splice(from, 1);
+    arr.splice(from < idx ? idx - 1 : idx, 0, moved);
+    onItemsChange(arr); savePresets(arr); handleDragEnd();
+  };
+
+  return (
+    <>
+      <Modal title={t('ui.terminal.presetShortcuts')} open={open} onCancel={handleClose} footer={null} width={800}
+        styles={{ content: { background: 'var(--bg-elevated)', border: '1px solid var(--border-light)' }, header: { background: 'var(--bg-elevated)', borderBottom: 'none' } }}>
+        <div className={styles.presetSectionHeader}><span className={styles.presetSectionTitle}>{t('ui.terminal.agentTeamCustom')}</span></div>
+        <div className={styles.presetList} onDragOver={e => { e.preventDefault(); e.stopPropagation(); }} onDrop={e => { e.preventDefault(); e.stopPropagation(); }}>
+          {items.length === 0 ? <div className={styles.presetListEmptyHint}>—</div> : items.map((item, idx) => {
+            const isBuiltinRaw = item.builtinId && !item.modified;
+            const name = isBuiltinRaw ? t(item.teamName) : item.teamName;
+            const desc = isBuiltinRaw ? t(item.description) : item.description;
+            return (
+              <div key={item.id} className={`${styles.presetRow} ${dragIdx.current === idx ? styles.presetRowDragging : ''} ${dragOverIdx.current === idx && dragIdx.current !== idx ? styles.presetRowDragOver : ''}`}
+                onDragOver={e => handleDragOver(idx, e)} onDragLeave={e => handleDragLeave(idx, e)} onDrop={e => handleDrop(idx, e)} onDragEnd={handleDragEnd}>
+                <span className={styles.dragHandle} draggable onDragStart={e => handleDragStart(idx, e)}>
+                  <svg viewBox="0 0 10 16" width="10" height="16" fill="currentColor"><circle cx="3" cy="3" r="1.2"/><circle cx="7" cy="3" r="1.2"/><circle cx="3" cy="8" r="1.2"/><circle cx="7" cy="8" r="1.2"/><circle cx="3" cy="13" r="1.2"/><circle cx="7" cy="13" r="1.2"/></svg>
+                </span>
+                <Checkbox checked={selected.has(item.id)} onChange={() => handleToggle(item.id)} />
+                <span className={styles.presetName} title={name}>{name || '—'}</span>
+                <span className={styles.presetText} title={desc}>{desc}</span>
+                <Button size="small" type="link" onClick={() => { setAddVisible(true); setAddName(isBuiltinRaw ? t(item.teamName) : item.teamName); setAddText(isBuiltinRaw ? t(item.description) : item.description); setEditId(item.id); }}>{t('ui.terminal.editItem')}</Button>
+              </div>
+            );
+          })}
+        </div>
+        <div className={styles.presetActions}>
+          <Button size="small" danger disabled={selected.size === 0} onClick={handleDelete}>{t('ui.terminal.deleteSelected')}</Button>
+          <Button size="small" onClick={() => { setAddVisible(true); setAddName(''); setAddText(''); setEditId(null); }}>{t('ui.terminal.addItem')}</Button>
+        </div>
+      </Modal>
+      <Modal title={editId ? t('ui.terminal.editItem') : t('ui.terminal.addItem')} open={addVisible}
+        onCancel={() => { setAddVisible(false); setAddName(''); setAddText(''); setEditId(null); }}
+        onOk={handleAdd} okText={editId ? t('ui.ok') : t('ui.terminal.addItem')} cancelText={t('ui.cancel')}
+        okButtonProps={{ disabled: !addText.trim() && !addName.trim() }} width="fit-content"
+        styles={{ content: { background: 'var(--bg-elevated)', border: '1px solid var(--border-light)' }, header: { background: 'var(--bg-elevated)', borderBottom: 'none' } }}>
+        <div className={styles.presetFormField}>
+          <label className={styles.presetFormLabel}>Team {t('ui.terminal.teamName')}</label>
+          <input className={styles.presetInput} placeholder={t('ui.terminal.teamNamePlaceholder')} value={addName} onChange={e => setAddName(e.target.value)} />
+        </div>
+        <div>
+          <label className={styles.presetFormLabel}>Team {t('ui.terminal.teamDesc')}</label>
+          <textarea className={styles.presetTextarea} rows={15} placeholder={t('ui.terminal.presetInputPlaceholder')} value={addText} onChange={e => setAddText(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') e.stopPropagation(); }} />
+        </div>
+      </Modal>
+    </>
+  );
+}