fix(manager): hide unavailable image handling controls

Author: dongyu23

apps/codex-plus-manager/src/App.tsx

@@ -91,6 +91,7 @@ import {
   mergeModelWindowRows,
   modelWindowRowsFromProfile,
   serializeModelWindowRows,
+  shouldShowModelImageHandling,
   type ImageHandling,
   type ModelWindowRow,
 } from "./model-windows";
@@ -6123,8 +6124,10 @@ function RelayProfileEditor({
   setModelWindowRows: (value: ModelWindowRow[]) => void;
 }) {
   const [showAdvanced, setShowAdvanced] = useState(false);
-  // 纯 Responses 模式（非聚合）下 VLM/Strip 不生效，禁用下拉
-  const vlmUnsupportedProtocol = profile.protocol === "responses" && !isAggregateRelayProfile(profile);
+  const showModelImageHandling = shouldShowModelImageHandling(
+    profile.protocol,
+    isAggregateRelayProfile(profile),
+  );
   if (isAggregateRelayProfile(profile)) {
     return (
       <AggregateRelayProfileEditor
@@ -6412,13 +6415,18 @@ function RelayProfileEditor({
               </div>
             </div>
             <div className="relay-model-row-editor">
-              <div className="relay-model-row relay-model-row-head">
+              <div
+                className={`relay-model-row relay-model-row-head${showModelImageHandling ? "" : " relay-model-row--without-image-handling"}`}
+              >
                 <span>{t("模型名称")}</span>
                 <span>{t("上下文窗口")}</span>
-                <span>{t("图片处理方式")}</span>
+                {showModelImageHandling ? <span>{t("图片处理方式")}</span> : null}
               </div>
               {modelWindowRows.map((row, index) => (
-                <div className="relay-model-row" key={index}>
+                <div
+                  className={`relay-model-row${showModelImageHandling ? "" : " relay-model-row--without-image-handling"}`}
+                  key={index}
+                >
                   <Input
                     value={row.model}
                     onChange={(event) => updateModelWindowRow(index, { model: event.currentTarget.value })}
@@ -6429,19 +6437,20 @@ function RelayProfileEditor({
                     onChange={(event) => updateModelWindowRow(index, { window: event.currentTarget.value })}
                     placeholder="1M"
                   />
-                  <AppSelect
-                    className="text-xs"
-                    value={row.imageHandling}
-                    disabled={vlmUnsupportedProtocol}
-                    onChange={(value) => updateModelWindowRow(index, { imageHandling: value })}
-                    options={[
-                      { value: "", label: t("纯文本模型请配置此项"), disabled: true },
-                      { value: "send-as-is", label: "send-as-is", title: t("原样发送图片") },
-                      { value: "strip", label: "strip images", title: t("为纯文本模型移除消息中的图片") },
-                      { value: "vlm", label: "VLM analysis", title: t("为纯文本模型配置图片分析路由") },
-                    ]}
-                    title={vlmUnsupportedProtocol ? t("VLM 仅支持 Chat Completions 协议和聚合模式") : t("多模态模型（支持图片输入的模型）请保持 send-as-is。")}
-                  />
+                  {showModelImageHandling ? (
+                    <AppSelect
+                      className="text-xs"
+                      value={row.imageHandling}
+                      onChange={(value) => updateModelWindowRow(index, { imageHandling: value })}
+                      options={[
+                        { value: "", label: t("纯文本模型请配置此项"), disabled: true },
+                        { value: "send-as-is", label: "send-as-is", title: t("原样发送图片") },
+                        { value: "strip", label: "strip images", title: t("为纯文本模型移除消息中的图片") },
+                        { value: "vlm", label: "VLM analysis", title: t("为纯文本模型配置图片分析路由") },
+                      ]}
+                      title={t("多模态模型（支持图片输入的模型）请保持 send-as-is。")}
+                    />
+                  ) : null}
                   <Button
                     aria-label={t("删除模型")}
                     onClick={() => removeModelWindowRow(index)}

apps/codex-plus-manager/src/i18n-en.ts

@@ -37,7 +37,6 @@ export const EN_PLAIN: Record<string, string> = {
   "VLM API Key": "VLM API Key",
   "VLM Base URL": "VLM Base URL",
   "VLM Model": "VLM Model",
-  "VLM 仅支持 Chat Completions 协议和聚合模式": "VLM only supports Chat Completions protocol and aggregate mode",
   "Vision Analysis Provider": "Vision Analysis Provider",
   "插件与模型": "Plugins and models",
   "管理插件市场、模型列表和服务档位相关增强。": "Manage enhancements for the plugin marketplace, model list and service tier.",

apps/codex-plus-manager/src/model-windows.test.ts

@@ -8,6 +8,7 @@ import {
   modelWindowsTextToMap,
   serializeModelWindowRows,
   mergeModelWindowRows,
+  shouldShowModelImageHandling,
 } from "./model-windows.ts";
 
 // 类型检查：确保 RelayProfile 包含 modelWindows 和 modelVlm 字段
@@ -44,6 +45,12 @@ const _profileTypeCheck: RelayProfile = {
 void _profileTypeCheck;
 
 describe("model-windows helpers", () => {
+  it("纯 Responses 直连隐藏图片处理选项", () => {
+    assert.strictEqual(shouldShowModelImageHandling("responses", false), false);
+    assert.strictEqual(shouldShowModelImageHandling("responses", true), true);
+    assert.strictEqual(shouldShowModelImageHandling("chat_completions", false), true);
+  });
+
   it("modelWindowsMapToText 按 modelList 行顺序输出窗口文本", () => {
     assert.strictEqual(
       modelWindowsMapToText("a\nb\nc", '{"a":"1M","c":"200K"}'),

apps/codex-plus-manager/src/model-windows.ts

@@ -27,6 +27,10 @@ export function modelWindowsTextToMap(modelList: string, modelWindowsText: strin
 /// 图片处理模式。
 export type ImageHandling = "" | "send-as-is" | "strip" | "vlm";
 
+export function shouldShowModelImageHandling(protocol: string, isAggregate: boolean): boolean {
+  return protocol !== "responses" || isAggregate;
+}
+
 export type ModelWindowRow = {
   model: string;
   window: string;

apps/codex-plus-manager/src/styles.css

@@ -3923,6 +3923,10 @@ body {
   min-height: var(--relay-control-height);
 }
 
+.relay-model-row--without-image-handling {
+  grid-template-columns: minmax(220px, 1.6fr) minmax(130px, 0.7fr) 40px;
+}
+
 .relay-model-row-head {
   min-height: 24px;
   padding-inline: 2px;