cx-viewer 1.0.3 → 1.0.4

package/src/components/settings/ProxyModal.jsx

@@ -0,0 +1,286 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Button, Input, Radio, Select, Tag, message } from 'antd';
+import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { t } from '../../i18n';
+import { isMobile } from '../../env';
+import { BLUR_MASK_STYLE } from '../../utils/modalMask';
+import ConceptHelp from '../common/ConceptHelp';
+import styles from './ProxyModal.module.css';
+import appStyles from '../../App.module.css';
+import MobileDrawerCloseButton from '../mobile/MobileDrawerCloseButton';
+
+// 代理热切换 Modal —— PC + mobile 共用。
+// 风格:半受控(proxyProfiles/activeProxyId 是父级跨组件共享数据 → props 注入;
+// editingProxy/editForm 仅本 modal 用 → 内部 state)。受控风格判定原则见 PluginModal.jsx 头注释。
+// 不持有 proxy 数据本身（来自 AppBase state，通过 props 注入）；
+// 只持有交互 state：editingProxy（'__new__' / id / null）+ editForm（name/baseURL/apiKey/activeModel/effort）。
+// open false→true / true→false 双向重置 editingProxy 与 editForm,避免重开残留上次表单。
+//
+// 删除确认改为受控 Modal（deleteConfirmTarget state）替代 Modal.confirm —— 后者 portal 到 body
+// 不受父 modal 关闭联动控制 (defensive review P2-2),且在 mobile zoom:0.6 容器下不缩放。
+const EMPTY_FORM = {
+  name: '', baseURL: '', apiKey: '', effort: 'max',
+  activeModel: '',
+};
+
+// output_config.effort 可选值（对应 CODEX_CODE_EFFORT_LEVEL）；空串 = 不注入，透传原始请求。
+const EFFORT_OPTIONS = ['low', 'medium', 'high', 'xhigh', 'max'];
+
+// profile 行/标签展示的代表模型；兼容早期从 cc-viewer 迁移来的 ANTHROPIC_* 字段。
+export function profileDisplayModel(p) {
+  if (!p) return '';
+  return p.activeModel
+    || p.OPENAI_MODEL
+    || p.ANTHROPIC_MODEL
+    || p.ANTHROPIC_DEFAULT_OPUS_MODEL
+    || p.ANTHROPIC_DEFAULT_SONNET_MODEL
+    || p.ANTHROPIC_DEFAULT_HAIKU_MODEL
+    || '';
+}
+
+export default function ProxyModal({
+  open,
+  onClose,
+  proxyProfiles,
+  activeProxyId,
+  defaultConfig,
+  onProxyProfileChange,
+}) {
+  const [editingProxy, setEditingProxy] = useState(null);
+  const [editForm, setEditForm] = useState(EMPTY_FORM);
+  const [deleteConfirmTarget, setDeleteConfirmTarget] = useState(null);
+
+  // open 变化时 reset 表单状态 + 删除确认。等价于原 AppHeader.jsx:1935 onCancel 里 setState({editingProxy:null})
+  useEffect(() => {
+    if (!open) {
+      setEditingProxy(null);
+      setEditForm(EMPTY_FORM);
+      setDeleteConfirmTarget(null);
+    }
+  }, [open]);
+
+  const profiles = proxyProfiles || [];
+  const activeId = activeProxyId || 'max';
+
+  // setEditForm 必须用 prev callback,否则多字段会被单字段更新覆盖丢字段
+  const updateField = (field, value) => {
+    setEditForm(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleStartEdit = (p) => {
+    setEditingProxy(p.id);
+    setEditForm({
+      name: p.name || '',
+      baseURL: p.baseURL || '',
+      apiKey: p.apiKey || '',
+      effort: p.effort || '',
+      activeModel: profileDisplayModel(p),
+    });
+  };
+
+  const handleStartNew = () => {
+    setEditingProxy('__new__');
+    setEditForm(EMPTY_FORM);
+  };
+
+  const handleCancelEdit = () => {
+    setEditingProxy(null);
+  };
+
+  // 删除确认改受控 Modal:点击删除按钮 → 弹确认 modal,父 modal 关时联动关闭
+  const handleDeleteProxy = (p) => {
+    setDeleteConfirmTarget(p);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (!deleteConfirmTarget) return;
+    const newProfiles = profiles.filter(x => x.id !== deleteConfirmTarget.id);
+    const newActive = activeId === deleteConfirmTarget.id ? 'max' : activeId;
+    onProxyProfileChange({ active: newActive, profiles: newProfiles });
+    setDeleteConfirmTarget(null);
+  };
+
+  const handleDeleteCancel = () => {
+    setDeleteConfirmTarget(null);
+  };
+
+  const handleActivate = (p) => {
+    if (p.id !== activeId) {
+      onProxyProfileChange({ active: p.id, profiles });
+    }
+  };
+
+  const handleSave = () => {
+    if (!editForm.name?.trim() || !editForm.baseURL?.trim() || !editForm.apiKey?.trim()) {
+      message.warning(t('ui.proxy.requiredFields'));
+      return;
+    }
+    const updated = {
+      id: editingProxy === '__new__' ? `proxy_${Date.now()}` : editingProxy,
+      name: editForm.name.trim(),
+      baseURL: editForm.baseURL.trim(),
+      apiKey: editForm.apiKey.trim(),
+      effort: editForm.effort || '',
+      activeModel: (editForm.activeModel || '').trim(),
+    };
+    let newProfiles;
+    if (editingProxy === '__new__') {
+      newProfiles = [...profiles, updated];
+    } else {
+      // 直接以 updated 覆盖，顺带清掉从 cc-viewer 迁移来的旧模型字段。
+      newProfiles = profiles.map(p => p.id === editingProxy ? { ...updated, id: p.id } : p);
+    }
+    onProxyProfileChange({ active: activeId, profiles: newProfiles });
+    setEditingProxy(null);
+  };
+
+  const titleNode = (
+    <span>
+      {t('ui.proxySwitch')}{' '}
+      <ConceptHelp doc="ProxySwitch" zIndex={1100} />
+    </span>
+  );
+
+  const showMaxWarning = false;
+
+  const bodyNode = (
+    <div>
+      {showMaxWarning && <div className={styles.proxyWarning}>⚠️ {t('ui.proxy.maxWarning')}</div>}
+      <div className={styles.proxyList}>
+          {profiles.map(p => (
+            <div key={p.id} className={`${styles.proxyItem} ${p.id === activeId ? styles.proxyItemActive : ''}`}>
+              <div className={styles.proxyItemMain} onClick={() => handleActivate(p)}>
+                <Radio checked={p.id === activeId} style={{ marginRight: 8 }} />
+                <div className={styles.proxyItemInfo}>
+                  <div className={styles.proxyItemNameRow}>
+                    <span className={styles.proxyItemName}>{p.name}</span>
+                    {p.id === 'max' && <Tag className={styles.proxyBuiltinTag}>{t('ui.proxy.builtin')}</Tag>}
+                  </div>
+                  {p.id === 'max' && defaultConfig && (
+                    <div className={styles.proxyItemDetail}>
+                      {(() => { try { return new URL(defaultConfig.origin).host; } catch { return defaultConfig.origin; } })()}
+                      {defaultConfig.authType ? ` · ${defaultConfig.authType}` : ''}
+                      {defaultConfig.apiKey ? ` · ${defaultConfig.apiKey}` : ''}
+                      {defaultConfig.model ? ` · ${defaultConfig.model}` : ''}
+                    </div>
+                  )}
+                  {p.id !== 'max' && p.baseURL && (
+                    <div className={styles.proxyItemDetail}>
+                      {(() => { try { return new URL(p.baseURL).host; } catch { return p.baseURL; } })()}
+                      {profileDisplayModel(p) ? ` · ${profileDisplayModel(p)}` : ''}
+                      {p.effort ? ` · effort: ${p.effort}` : ''}
+                    </div>
+                  )}
+                </div>
+              </div>
+              {p.id !== 'max' && (
+                <div className={styles.proxyItemActions}>
+                  <Button type="text" size="small" icon={<EditOutlined />} onClick={() => handleStartEdit(p)} />
+                  <Button type="text" size="small" danger icon={<DeleteOutlined />} onClick={() => handleDeleteProxy(p)} />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <Button block type="dashed" icon={<PlusOutlined />} style={{ marginTop: 12 }} onClick={handleStartNew}>
+          {t('ui.proxy.addProxy')}
+        </Button>
+      </div>
+  );
+
+  // 编辑/新增表单 —— 二级弹窗(独立 Modal,浮于主弹窗之上),不再内联挤在列表下方。
+  // 受控:open 绑定 editingProxy;父关时由 useEffect 联动重置 editingProxy → 一并关闭。
+  const editModal = (
+    <Modal
+      title={editingProxy === '__new__' ? t('ui.proxy.addProxy') : t('ui.proxy.editProxy')}
+      open={editingProxy !== null}
+      onCancel={handleCancelEdit}
+      onOk={handleSave}
+      okText={t('ui.proxy.save')}
+      cancelText={t('ui.proxy.cancel')}
+      styles={{ body: isMobile ? { zoom: 0.6 } : {} }}
+    >
+      <div className={styles.proxyEditRow}>
+        <label>{t('ui.proxy.name')} <span className={styles.proxyRequired}>*</span></label>
+        <Input size="small" value={editForm.name} onChange={e => updateField('name', e.target.value)} />
+      </div>
+      <div className={styles.proxyEditRow}>
+        <label>{t('ui.proxy.baseURL')} <span className={styles.proxyRequired}>*</span></label>
+        <Input size="small" value={editForm.baseURL} onChange={e => updateField('baseURL', e.target.value)} placeholder="https://api.example.com" />
+      </div>
+      <div className={styles.proxyEditRow}>
+        <label>{t('ui.proxy.apiKey')} <span className={styles.proxyRequired}>*</span></label>
+        <Input.Password size="small" value={editForm.apiKey} onChange={e => updateField('apiKey', e.target.value)} placeholder="sk-..." />
+      </div>
+      <div className={styles.proxyEditDivider} />
+      <div className={styles.proxyEditRow}>
+        <label>{t('ui.proxy.activeModel')}</label>
+        <Input size="small" value={editForm.activeModel} onChange={e => updateField('activeModel', e.target.value)} placeholder="gpt-5.4" />
+      </div>
+      <div className={styles.proxyEditHint}>{t('ui.proxy.modelMapHint')}</div>
+      <div className={styles.proxyEditRow}>
+        <label>{t('ui.proxy.effort')}</label>
+        <Select size="small" className={styles.fullWidthSelect} value={editForm.effort || ''} onChange={v => updateField('effort', v)} allowClear onClear={() => updateField('effort', '')}>
+          <Select.Option value="">{t('ui.proxy.effortDefault')}</Select.Option>
+          {EFFORT_OPTIONS.map(e => (
+            <Select.Option key={e} value={e}>{`effort: ${e}`}</Select.Option>
+          ))}
+        </Select>
+      </div>
+    </Modal>
+  );
+
+  const deleteConfirmModal = (
+    /* 受控 Modal,父关时通过 useEffect 联动关闭,避免孤儿态 */
+    <Modal
+      title={t('ui.proxy.deleteProxy')}
+      open={deleteConfirmTarget !== null}
+      onCancel={handleDeleteCancel}
+      onOk={handleDeleteConfirm}
+      okText={t('ui.common.confirmYes')}
+      cancelText={t('ui.common.confirmCancel')}
+      okType="danger"
+      styles={{ body: isMobile ? { zoom: 0.6 } : {} }}
+    >
+      {deleteConfirmTarget && t('ui.proxy.deleteConfirm', { name: deleteConfirmTarget.name })}
+    </Modal>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        <div className={`${appStyles.mobileDrawerOverlay} ${open ? appStyles.mobileDrawerOverlayVisible : ''}`}>
+          <div className={appStyles.mobileLogMgmtHeader}>
+            <span className={appStyles.mobileLogMgmtTitle}>{titleNode}</span>
+            <MobileDrawerCloseButton onClose={onClose} />
+          </div>
+          <div className={appStyles.mobileDrawerInner}>
+            <div className={styles.proxyModalScroll}>
+              {bodyNode}
+            </div>
+          </div>
+        </div>
+        {editModal}
+        {deleteConfirmModal}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Modal
+        title={titleNode}
+        open={open}
+        onCancel={onClose}
+        footer={null}
+        width={520}
+        styles={{ body: isMobile ? { zoom: 0.6 } : {}, mask: BLUR_MASK_STYLE }}
+      >
+        {bodyNode}
+      </Modal>
+      {editModal}
+      {deleteConfirmModal}
+    </>
+  );
+}

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

@@ -0,0 +1,141 @@
+/* Re-homed from dashboard/AppHeader.module.css — owned by ProxyModal. */
+
+
+.fullWidthSelect {
+  width: 100%;
+}
+
+.proxyWarning {
+  background: var(--color-warning-dark-bg);
+  border: 1px solid var(--color-warning-dark-border);
+  border-radius: 4px;
+  color: var(--color-warning-light);
+  font-size: 12px;
+  padding: 6px 10px;
+  margin-bottom: 10px;
+}
+
+.proxyList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.proxyItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  transition: background 0.15s;
+}
+
+.proxyItem:hover {
+  background: var(--bg-elevated);
+}
+
+.proxyItemActive {
+  background: var(--color-selection-bg);
+  border-color: var(--color-primary);
+}
+
+.proxyItemMain {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+}
+
+.proxyItemInfo {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.proxyItemNameRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.proxyItemName {
+  font-size: 13px;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.proxyItemDetail {
+  font-size: 11px;
+  color: var(--text-gray);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.proxyBuiltinTag {
+  font-size: 10px;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: var(--color-primary-dark-bg);
+  color: var(--color-primary-lighter);
+  line-height: 16px;
+  border: none;
+}
+
+.proxyItemActions {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.proxyEditForm {
+  margin-top: 12px;
+  padding: 12px;
+  border-radius: 6px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-secondary);
+}
+
+.proxyEditRow {
+  margin-bottom: 8px;
+}
+
+.proxyEditRow label {
+  display: block;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-bottom: 4px;
+}
+
+.proxyRequired {
+  color: var(--color-error);
+  margin-left: 2px;
+}
+
+.proxyEditHint {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  line-height: 1.5;
+  margin: -2px 0 8px;
+}
+
+.proxyEditDivider {
+  border-top: 1px dashed var(--border-secondary);
+  margin: 10px 0 8px;
+}
+
+.proxyEditBtns {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.proxyModalScroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px 16px 0;
+}

package/src/components/settings/SkillsManagerModal.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { Modal, Switch, Spin, Tooltip } from 'antd';
+import { DeleteOutlined, LoadingOutlined } from '@ant-design/icons';
+import { t } from '../../i18n';
+import { isMobile } from '../../env';
+import { skillKey, skillOrderKey } from '../../utils/skillsParser';
+import ConfirmRemoveButton from '../common/ConfirmRemoveButton';
+import styles from './SkillsManagerModal.module.css';
+import headerStyles from '../common/sharedChrome.module.css';
+
+// 纯展示 Modal：状态与 toggle 处理在父级（AppHeader / Mobile）。
+// 抽出动机：AppHeader / Mobile 都要在 cache popover 抽屉里挂"管理"入口，
+// 渲染 ~80 行 JSX 不值得复制；toggle/open 状态管理依旧由父级保留（与既有 reloadFsSkills 重复模式一致）。
+//
+// Props 契约：
+//  - open / onClose：Modal 显隐控制
+//  - loading / error / skills / toggling：父级 _skillsModal 切片直接透传
+//  - onToggle(skill)：用户点 Switch 时触发；父级负责乐观 + 回滚 + reloadFsSkills
+// 错误文案映射逻辑内置（reason→可读文本），不再要求父级实现 errorLabelFor。
+
+// 把 reloadFsSkills 的 reason code 映射成可读文案（与之前父级 getSkillsLoadErrorLabel 同实现）。
+function reasonToLabel(reason) {
+  if (!reason || reason === 'stale' || reason === 'local_log') return '';
+  const mHttp = /^http:(\d+)$/.exec(reason);
+  if (mHttp) return t('ui.skillsLoadError.http', { status: mHttp[1] });
+  if (reason === 'network') return t('ui.skillsLoadError.network');
+  return reason;
+}
+
+export default function SkillsManagerModal({
+  open = false,
+  onClose,
+  loading = false,
+  error = null,
+  skills = [],
+  toggling,
+  onToggle,
+  onDelete,
+}) {
+  const togglingSet = toggling instanceof Set ? toggling : new Set();
+  const userOrProject = skills.filter(s => s.source === 'user' || s.source === 'project');
+  const pluginSkills = skills.filter(s => s.source === 'plugin');
+  const builtinSkills = skills.filter(s => s.source === 'builtin');
+
+  return (
+    <Modal
+      title={t('ui.skillManagerTitle')}
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      // 移动端贴边（两侧各 4px），PC 维持 1200/80 cap；移动端 body zoom: 0.6 与抽屉同步避免文字偏大
+      width={isMobile ? 'calc(100vw - 8px)' : 'min(1200px, calc(100vw - 80px))'}
+      zIndex={1100}
+      styles={{ body: { maxHeight: '70vh', overflowY: 'auto', padding: '16px 20px', ...(isMobile ? { zoom: 0.6 } : {}) } }}
+    >
+      {loading ? (
+        <div className={styles.skillsEmpty}><Spin /></div>
+      ) : error ? (
+        <div className={styles.skillsEmpty}>{t('ui.skillsLoadFailed', { reason: reasonToLabel(error) || error })}</div>
+      ) : skills.length === 0 ? (
+        <div className={styles.skillsEmpty}>{t('ui.noSkillsLoaded')}</div>
+      ) : (
+        <>
+          {/* 只把 user / project（可切换）放 card 列表；plugin + builtin 折叠到底部 chip 行 */}
+          {userOrProject.length > 0 && (
+            <div className={styles.skillsList}>
+              {userOrProject.map((s) => {
+                // skillKey 含 path：togglingSet 查找用——同名重复两份 path 不同，点一个不会两个一起转圈。
+                const key = skillKey(s);
+                const isToggling = togglingSet.has(key);
+                // React 渲染 key 用 toggle 稳定的 skillOrderKey（开关后整卡片不 remount/不闪烁，配合 orderMap 原地保位）。
+                // 仅「重复态」两行会撞同名 → enabled 后缀消歧（重复行开关被服务端 DUPLICATE 挡住、状态不变，后缀稳定）。
+                const rowKey = s.duplicate ? `${skillOrderKey(s)}::${s.enabled ? 'on' : 'off'}` : skillOrderKey(s);
+                return (
+                  <div key={rowKey} className={`${styles.skillCard} ${!s.enabled ? styles.skillCardDisabled : ''}`}>
+                    <div className={styles.skillCardHeader}>
+                      <div className={styles.skillCardTitleRow}>
+                        <span className={`${styles.skillSourceBadge} ${styles['skillSource_' + s.source]}`}>
+                          {t('ui.skillSource.' + s.source)}
+                        </span>
+                        <div className={styles.skillCardName}>{s.name}</div>
+                        {s.duplicate && (
+                          <Tooltip title={t('ui.skillDuplicateBadge')}>
+                            <span className={styles.skillDuplicateBadge}>⚠</span>
+                          </Tooltip>
+                        )}
+                      </div>
+                      <div className={styles.skillCardActions}>
+                        <Switch size="small" checked={s.enabled} loading={isToggling} onChange={() => onToggle && onToggle(s)} />
+                        {onDelete && (
+                          <ConfirmRemoveButton
+                            title={t('ui.skillDeleteConfirm', { name: s.name })}
+                            ariaLabel={t('ui.skillDeleteConfirm', { name: s.name })}
+                            onConfirm={() => onDelete(s)}
+                            className={styles.skillDeleteBtn}
+                            disabled={isToggling}
+                          >
+                            {isToggling ? <LoadingOutlined /> : <DeleteOutlined />}
+                          </ConfirmRemoveButton>
+                        )}
+                      </div>
+                    </div>
+                    {s.description && <div className={styles.skillCardDesc}>{s.description}</div>}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          {/* Plugin：不可单独禁用（要走 `codex plugin disable <name>` CLI），折叠成 chip 行；每 chip tooltip 带 plugin 名 */}
+          {pluginSkills.length > 0 && (
+            <div className={styles.skillsReadonlySection}>
+              <div className={styles.skillsReadonlyLabel}>{t('ui.skillsPluginLabel')}</div>
+              <div className={headerStyles.toolChipGrid}>
+                {pluginSkills.map((s, i) => {
+                  // pluginName 现在返 "name@marketplace"（pluginKey），tooltip 显示时剥后缀
+                  const pluginDisplay = (s.pluginName || '').split('@')[0];
+                  return (
+                    <Tooltip key={`plugin-${s.name}-${i}`} title={t('ui.skillCannotDisablePlugin', { plugin: pluginDisplay })}>
+                      <span className={headerStyles.cacheToolChip}>{s.name}</span>
+                    </Tooltip>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+          {/* Builtin：同样折叠为 chip 行，tooltip 解释"硬编码无法禁用" */}
+          {builtinSkills.length > 0 && (
+            <div className={styles.skillsReadonlySection}>
+              <div className={styles.skillsReadonlyLabel}>{t('ui.skillsBuiltinLabel')}</div>
+              <div className={headerStyles.toolChipGrid}>
+                {builtinSkills.map(s => (
+                  <Tooltip key={s.name} title={t('ui.skillCannotDisableBuiltin')}>
+                    <span className={headerStyles.cacheToolChip}>{s.name}</span>
+                  </Tooltip>
+                ))}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </Modal>
+  );
+}