cx-viewer 1.0.2 → 1.0.4

package/src/components/settings/SkillsManagerModal.module.css

@@ -0,0 +1,143 @@
+/* SkillsManagerModal 专属样式（从 AppHeader.module.css 拆出，避免跨文件硬耦合）。
+   toolChipGrid / cacheToolChip 仍住在 AppHeader.module.css，因为 CachePopoverContent 也用——共享语义保留。 */
+
+.skillsList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skillCard {
+  border: 1px solid var(--border-secondary);
+  border-radius: 6px;
+  padding: 10px 12px;
+  background: var(--bg-container);
+}
+
+.skillCardHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.skillCardName {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-word;
+  flex: 1;
+}
+
+.skillCardActions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 永久删除图标按钮：无边框、默认 muted、hover 转危险红。包在 ConfirmRemoveButton 里（二次确认）。 */
+.skillDeleteBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 4px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1;
+  transition: color 0.15s, background 0.15s;
+}
+.skillDeleteBtn:hover {
+  color: #cf1322;
+  background: #fff1f0;
+}
+[data-theme="dark"] .skillDeleteBtn:hover {
+  color: #ff7875;
+  background: #2a1215;
+}
+
+.skillCardDesc {
+  font-size: 13px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-secondary);
+}
+
+.skillsEmpty {
+  padding: 32px 12px;
+  text-align: center;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* 不可切换 skill 区（Plugin / Builtin）：分隔线上方是可切的 card 列表，下方 chip grid 行 */
+.skillsReadonlySection {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-secondary);
+}
+
+.skillsReadonlyLabel {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+/* Skill 管理 Modal 里的卡片 disabled 状态 + 来源徽章 */
+.skillCardDisabled {
+  opacity: 0.55;
+  background: var(--bg-elevated, var(--bg-surface));
+}
+.skillCardDisabled .skillCardName {
+  text-decoration: line-through;
+}
+.skillCardTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+.skillSourceBadge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 3px;
+  letter-spacing: 0.3px;
+  flex-shrink: 0;
+  white-space: nowrap;
+  text-transform: uppercase;
+}
+.skillSource_user    { background: #e6f4ff; color: #0958d9; }
+.skillSource_project { background: #f6ffed; color: #389e0d; }
+.skillSource_plugin  { background: #fff7e6; color: #d46b08; }
+.skillSource_builtin { background: #f9f0ff; color: #531dab; }
+[data-theme="dark"] .skillSource_user    { background: #111d2c; color: #69b1ff; }
+[data-theme="dark"] .skillSource_project { background: #162312; color: #73d13d; }
+[data-theme="dark"] .skillSource_plugin  { background: #2b1d11; color: #ffa940; }
+[data-theme="dark"] .skillSource_builtin { background: #1a1325; color: #b37feb; }
+
+/* 重复警示徽标：同名 skill 在 skills/ 与 skills-skip/ 各有一份（启用+禁用），需手动清理。
+   仿 skillSourceBadge 的尺寸，用警示色；hover 给 Tooltip 说明 + 如何处理。 */
+.skillDuplicateBadge {
+  font-size: 11px;
+  line-height: 1;
+  padding: 2px 5px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  cursor: help;
+  background: #fff1f0;
+  color: #cf1322;
+  border: 1px solid #ffccc7;
+}
+[data-theme="dark"] .skillDuplicateBadge {
+  background: #2a1215;
+  color: #ff7875;
+  border-color: #58181c;
+}

package/src/components/settings/SystemTextModal.jsx

@@ -0,0 +1,312 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Modal, Input, Switch, Spin, Tooltip, message } from 'antd';
+import { t } from '../../i18n';
+import { apiUrl } from '../../utils/apiUrl';
+import { renderMarkdown } from '../../utils/markdown';
+import ModelPromptTabs from './ModelPromptTabs';
+import styles from './SystemTextModal.module.css';
+
+// 「系统提示词修改」模态（偏好设置 → 专家设置）。self-contained：打开时自取、保存时自存。
+// 页签化：
+//   - Default 页签 = 原有行为：写当前工作区 CODEX_SYSTEM.md(覆盖)/CODEX_APPEND_SYSTEM.md(追加)，
+//     两模式互斥、存空即禁用；
+//   - 模型页签 = 按模型定制条目(全局 <LOG_DIR>/system_prompt/ 或工作区 <ws>/system_prompt/)，
+//     启动时按「上次启动所用模型 id」大小写不敏感子串匹配，命中即整体取代 Default；
+//   - 每页签独立草稿(text+mode)，OK 一次保存全部脏页签；模型页签存空 = 删除条目。
+// 均由 cxv 在下次启动 codex 时注入为 --system-prompt-file / --append-system-prompt-file。
+
+const MODEL_NAME_RE = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/; // 与 server/lib/model-system-prompts.js 严格一致
+
+const EMPTY_DRAFT = { text: '', mode: 'append' };
+const tabKeyOf = (scope, name) => `${scope}:${name}`;
+
+export default function SystemTextModal({ open, onClose }) {
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [preview, setPreview] = useState(false);   // markdown 预览开关：开=渲染预览，关=编辑
+  const [dir, setDir] = useState(null);
+  const [active, setActive] = useState(true);
+  const [globalDir, setGlobalDir] = useState(null);
+  const [entries, setEntries] = useState([]);      // [{ name, scope }] 页签顺序
+  const [snapshots, setSnapshots] = useState({});  // { key: {text, mode} } 服务端真值
+  const [drafts, setDrafts] = useState({});        // { key: {text, mode} } 编辑草稿
+  const [persisted, setPersisted] = useState({});  // { key: true } 服务端已存在(区分新建未保存页签)
+  const [activeKey, setActiveKey] = useState('default');
+  const textareaRef = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false; // 关闭/卸载后丢弃在途响应，避免对已卸载组件 setState
+    setPreview(false); // 每次打开默认回到编辑态
+    setActiveKey('default');
+    setLoading(true);
+    // 两个 GET 各自失败互不拖累(allSettled)：任一失败提示 loadError，另一半照常填充。
+    Promise.allSettled([
+      fetch(apiUrl('/api/expert/system-text')).then((r) => r.json()),
+      fetch(apiUrl('/api/expert/model-prompts')).then((r) => r.json()),
+    ]).then(([sysR, mpR]) => {
+      if (cancelled) return;
+      const snaps = {};
+      const pers = {};
+      const list = [];
+      if (sysR.status === 'fulfilled' && sysR.value && !sysR.value.error) {
+        const d = sysR.value;
+        snaps.default = { text: d.text || '', mode: d.mode === 'override' ? 'override' : 'append' };
+        setDir(d.dir || null);
+        setActive(!!d.active);
+        pers.default = true;
+      } else {
+        // Default 状态未知：禁用其编辑，避免盲目覆盖。
+        snaps.default = { ...EMPTY_DRAFT };
+        setDir(null);
+        setActive(false);
+        message.error(t('ui.expert.systemText.loadError'));
+      }
+      if (mpR.status === 'fulfilled' && mpR.value && !mpR.value.error) {
+        const d = mpR.value;
+        setGlobalDir(d.globalDir || null);
+        for (const scope of ['global', 'workspace']) {
+          for (const e of (d[scope] || [])) {
+            const key = tabKeyOf(scope, e.name);
+            list.push({ name: e.name, scope });
+            snaps[key] = { text: e.text || '', mode: e.mode === 'override' ? 'override' : 'append' };
+            pers[key] = true;
+          }
+        }
+      } else {
+        setGlobalDir(null);
+        message.error(t('ui.expert.systemText.loadError'));
+      }
+      setEntries(list);
+      setSnapshots(snaps);
+      setDrafts(JSON.parse(JSON.stringify(snaps)));
+      setPersisted(pers);
+    }).finally(() => {
+      if (cancelled) return;
+      setLoading(false);
+      // Focus the editor on open (focus on a disabled field is a no-op): the focused
+      // border turns theme-primary, matching how UltraPlan looks when it opens.
+      setTimeout(() => textareaRef.current?.focus?.(), 0);
+    });
+    return () => { cancelled = true; };
+  }, [open]);
+
+  const draft = drafts[activeKey] || EMPTY_DRAFT;
+  const isDirty = useCallback((key) => {
+    const d = drafts[key];
+    const s = snapshots[key];
+    if (!d || !s) return false;
+    return d.text !== s.text || d.mode !== s.mode;
+  }, [drafts, snapshots]);
+  const allKeys = ['default', ...entries.map((e) => tabKeyOf(e.scope, e.name))];
+  const dirtyKeys = allKeys.filter(isDirty);
+  // 某页签是否可编辑：全局作用域随时可编；Default 与工作区作用域需有活动工作区。
+  const editable = (key) => (key === 'default' || key.startsWith('workspace:') ? active : true);
+  const saveableDirty = dirtyKeys.filter(editable);
+
+  const setDraft = (patch) => {
+    setDrafts((prev) => ({ ...prev, [activeKey]: { ...(prev[activeKey] || EMPTY_DRAFT), ...patch } }));
+  };
+
+  const selectTab = (key) => {
+    setActiveKey(key);
+    setPreview(false); // 切页签回到编辑态
+  };
+
+  // 「+ 添加模型」：校验(与服务端规则一致)后本地建页签；返回错误文案或 null。
+  const handleAdd = (name, scope) => {
+    if (!MODEL_NAME_RE.test(name) || /_APPEND$/i.test(name)) return t('ui.expert.systemText.invalidName');
+    if (name.toLowerCase() === 'default') return t('ui.expert.systemText.reservedName');
+    const canonical = name.toUpperCase();
+    if (entries.some((e) => e.scope === scope && e.name.toUpperCase() === canonical)) {
+      return t('ui.expert.systemText.duplicateName');
+    }
+    if (scope === 'workspace' && !active) return t('ui.expert.systemText.noWorkspace');
+    const key = tabKeyOf(scope, canonical);
+    setEntries((prev) => [...prev, { name: canonical, scope }]);
+    setSnapshots((prev) => ({ ...prev, [key]: { ...EMPTY_DRAFT } }));
+    setDrafts((prev) => ({ ...prev, [key]: { ...EMPTY_DRAFT } }));
+    setActiveKey(key);
+    setPreview(false);
+    setTimeout(() => textareaRef.current?.focus?.(), 0); // 新页签即刻可输入(添加后的编辑入口)
+    return null;
+  };
+
+  const removeTabLocal = (key) => {
+    setEntries((prev) => prev.filter((e) => tabKeyOf(e.scope, e.name) !== key));
+    setSnapshots((prev) => { const n = { ...prev }; delete n[key]; return n; });
+    setDrafts((prev) => { const n = { ...prev }; delete n[key]; return n; });
+    setPersisted((prev) => { const n = { ...prev }; delete n[key]; return n; });
+    setActiveKey((cur) => (cur === key ? 'default' : cur));
+  };
+
+  // 页签「×」删除：未持久化的页签仅本地移除；已持久化的立即 POST 空文本(=删除条目)。
+  const handleDelete = (name, scope) => {
+    const key = tabKeyOf(scope, name);
+    if (!persisted[key]) { removeTabLocal(key); return; }
+    fetch(apiUrl('/api/expert/model-prompts'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ scope, name, text: '' }),
+    })
+      .then((r) => r.json())
+      .then((d) => {
+        if (d && d.error) { message.error(t('ui.expert.systemText.deleteError')); return; }
+        removeTabLocal(key);
+        message.success(t('ui.expert.systemText.deleted'));
+      })
+      .catch(() => message.error(t('ui.expert.systemText.deleteError')));
+  };
+
+  // OK = 保存全部可保存的脏页签。新建且仍为空的页签跳过(无操作)；模型页签存空 = 删除条目。
+  const handleSave = () => {
+    const ops = saveableDirty
+      .filter((key) => !(key !== 'default' && !persisted[key] && !(drafts[key]?.text || '').trim()))
+      .map((key) => {
+        const d = drafts[key] || EMPTY_DRAFT;
+        const body = key === 'default'
+          ? { mode: d.mode, text: d.text }
+          : { scope: key.slice(0, key.indexOf(':')), name: key.slice(key.indexOf(':') + 1), mode: d.mode, text: d.text };
+        const url = key === 'default' ? '/api/expert/system-text' : '/api/expert/model-prompts';
+        return fetch(apiUrl(url), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+        }).then((r) => r.json()).then((resp) => {
+          if (resp && resp.error) throw new Error(resp.error);
+          return { key, resp };
+        });
+      });
+    if (!ops.length) { onClose && onClose(); return; }
+    setSaving(true);
+    Promise.allSettled(ops).then((results) => {
+      let failed = 0;
+      const okOps = [];
+      for (const r of results) {
+        if (r.status === 'fulfilled') okOps.push(r.value); else failed += 1;
+      }
+      // 成功的先落账(草稿升级为真值/清除的页签移除)，失败的保留脏态待重试。
+      for (const { key, resp } of okOps) {
+        if (key !== 'default' && resp && resp.cleared) {
+          removeTabLocal(key);
+        } else {
+          setSnapshots((prev) => ({ ...prev, [key]: { ...(drafts[key] || EMPTY_DRAFT) } }));
+          setPersisted((prev) => ({ ...prev, [key]: !(key === 'default' && resp && resp.cleared) }));
+        }
+      }
+      if (failed) { message.error(t('ui.expert.systemText.saveError')); return; }
+      // 单一操作且是清除时沿用原有提示语；其余一律「已保存」。
+      if (okOps.length === 1 && okOps[0].resp && okOps[0].resp.cleared) {
+        message.success(t(okOps[0].key === 'default' ? 'ui.expert.systemText.cleared' : 'ui.expert.systemText.deleted'));
+      } else {
+        message.success(t('ui.expert.systemText.saved'));
+      }
+      onClose && onClose();
+    }).finally(() => setSaving(false));
+  };
+
+  const handleCancel = () => {
+    if (saveableDirty.length) {
+      Modal.confirm({
+        title: t('ui.expert.systemText.discardTitle'),
+        okText: t('ui.common.confirmYes'),
+        cancelText: t('ui.common.confirmCancel'),
+        centered: true,
+        zIndex: 1200,
+        onOk: () => { onClose && onClose(); },
+      });
+      return;
+    }
+    onClose && onClose();
+  };
+
+  const curEditable = editable(activeKey);
+  const isGlobalTab = activeKey.startsWith('global:');
+
+  return (
+    <Modal
+      title={(
+        <span className={styles.titleRow}>
+          {t('ui.expert.systemText')}
+          <Tooltip title={t('ui.expert.systemText.modelHelp')} trigger={['hover', 'click']} placement="bottomLeft">
+            <span className={styles.helpBtn} aria-label={t('ui.expert.systemText.modelHelp')}>?</span>
+          </Tooltip>
+        </span>
+      )}
+      open={open}
+      onCancel={handleCancel}
+      onOk={handleSave}
+      okText={t('ui.save')}
+      cancelText={t('ui.cancel')}
+      okButtonProps={{ loading: saving, disabled: loading || saveableDirty.length === 0 }}
+      width="min(900px, 92vw)"
+      zIndex={1100}
+    >
+      <Spin spinning={loading}>
+        <ModelPromptTabs
+          entries={entries}
+          activeKey={activeKey}
+          dirtyKeys={dirtyKeys}
+          workspaceEnabled={active}
+          disabled={loading || saving}
+          onSelect={selectTab}
+          onAdd={handleAdd}
+          onDelete={handleDelete}
+        />
+        {/* The editor card immediately follows the tab strip (sibling, zero gap) —
+            the active tab's -1px overlaps the card's top edge for a seamless join */}
+        <div className={styles.editorBox}>
+          {preview ? (
+            <div className={styles.previewBox}>
+              {draft.text
+                ? <div className="chat-md" dangerouslySetInnerHTML={{ __html: renderMarkdown(draft.text) }} />
+                : <div className={styles.previewEmpty}>{t('ui.expert.systemText.placeholder')}</div>}
+            </div>
+          ) : (
+            <Input.TextArea
+              ref={textareaRef}
+              value={draft.text}
+              onChange={(e) => setDraft({ text: e.target.value })}
+              placeholder={t('ui.expert.systemText.placeholder')}
+              autoSize={{ minRows: 14, maxRows: 28 }}
+              disabled={!curEditable}
+            />
+          )}
+        </div>
+        <div className={styles.modeRow}>
+          <div className={styles.modeLeft}>
+            <Switch
+              checked={draft.mode === 'override'}
+              onChange={(v) => setDraft({ mode: v ? 'override' : 'append' })}
+              checkedChildren={t('ui.expert.systemText.override')}
+              unCheckedChildren={t('ui.expert.systemText.append')}
+              disabled={!curEditable}
+            />
+            {draft.mode === 'override' && (
+              <span className={styles.overrideWarn}>{t('ui.expert.systemText.overrideWarn')}</span>
+            )}
+          </div>
+          <div className={styles.modeRight}>
+            <span className={styles.previewLabel}>{t('ui.expert.systemText.preview')}</span>
+            <Switch checked={preview} onChange={setPreview} disabled={!curEditable} />
+          </div>
+        </div>
+        {curEditable ? (
+          <div className={styles.hint}>
+            <div className={styles.dirLine}>
+              {isGlobalTab
+                ? t('ui.expert.systemText.dirHintGlobal', { dir: globalDir || '' })
+                : t('ui.expert.systemText.dirHint', {
+                    // Default 页签写工作区根;模型页签写工作区的 system_prompt/ 子目录
+                    dir: activeKey === 'default' ? (dir || '') : `${dir || ''}/system_prompt`,
+                  })}
+            </div>
+            <div>{t('ui.expert.systemText.note')}</div>
+          </div>
+        ) : (
+          <div className={styles.warn}>{t('ui.expert.systemText.noWorkspace')}</div>
+        )}
+      </Spin>
+    </Modal>
+  );
+}