From 08ef28041a7afcf0c4b259bb931b0645342b54f6 Mon Sep 17 00:00:00 2001
From: weinibuliu <weinibuliu@outlook.com>
Date: Fri, 20 Feb 2026 14:25:58 +0800
Subject: [PATCH 1/2] Update OptionEditor.tsx

---
 src/components/OptionEditor.tsx | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/OptionEditor.tsx b/src/components/OptionEditor.tsx
index 9515929..6222dcb 100644
--- a/src/components/OptionEditor.tsx
+++ b/src/components/OptionEditor.tsx
@@ -405,6 +405,7 @@ export function OptionEditor({
           className="flex-1"
           value={selectedCaseName}
           disabled={disabled}
+          basePath={basePath}
           options={optionDef.cases.map((caseItem) => {
             // 对于 MXU 内置选项，使用 t() 翻译；否则使用 resolveI18nText
             const label = isMxuOption
@@ -413,6 +414,7 @@ export function OptionEditor({
             return {
               value: caseItem.name,
               label,
+              icon: caseItem.icon,
             };
           })}
           onChange={(next) => {
@@ -451,9 +453,10 @@ export function OptionEditor({
 
 interface OptionSelectDropdownProps {
   value: string;
-  options: { value: string; label: string }[];
+  options: { value: string; label: string; icon?: string }[];
   disabled?: boolean;
   className?: string;
+  basePath: string;
   onChange: (value: string) => void;
 }
 
@@ -462,6 +465,7 @@ function OptionSelectDropdown({
   options,
   disabled = false,
   className,
+  basePath,
   onChange,
 }: OptionSelectDropdownProps) {
   const triggerId = useId();
@@ -580,7 +584,10 @@ function OptionSelectDropdown({
         aria-expanded={open}
         aria-controls={listboxId}
       >
-        <span className="truncate">{selectedOption?.label}</span>
+        <span className="flex items-center gap-1.5 truncate">
+          <AsyncIcon icon={selectedOption?.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />
+          {selectedOption?.label}
+        </span>
         <ChevronDown
           className={clsx('w-4 h-4 text-text-secondary transition-transform', open && 'rotate-180')}
         />
@@ -620,7 +627,10 @@ function OptionSelectDropdown({
                 role="option"
                 aria-selected={isSelected}
               >
-                <span className="truncate">{opt.label}</span>
+                <span className="flex items-center gap-1.5 truncate">
+                  <AsyncIcon icon={opt.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />
+                  {opt.label}
+                </span>
                 {isSelected && <Check className="w-4 h-4 flex-shrink-0" />}
               </button>
             );
@@ -637,6 +647,7 @@ function OptionSelectComboBox({
   options,
   disabled = false,
   className,
+  basePath,
   onChange,
 }: OptionSelectDropdownProps) {
   const { t } = useTranslation();
@@ -777,7 +788,10 @@ function OptionSelectComboBox({
         aria-expanded={open}
         aria-controls={listboxId}
       >
-        <span className="truncate">{selectedOption?.label}</span>
+        <span className="flex items-center gap-1.5 truncate">
+          <AsyncIcon icon={selectedOption?.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />
+          {selectedOption?.label}
+        </span>
         <ChevronDown
           className={clsx('w-4 h-4 text-text-secondary transition-transform', open && 'rotate-180')}
         />
@@ -842,7 +856,10 @@ function OptionSelectComboBox({
                     role="option"
                     aria-selected={isSelected}
                   >
-                    <span className="truncate">{opt.label}</span>
+                    <span className="flex items-center gap-1.5 truncate">
+                      <AsyncIcon icon={opt.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />
+                      {opt.label}
+                    </span>
                     {isSelected && <Check className="w-4 h-4 flex-shrink-0" />}
                   </button>
                 );

From e3b1f9a71cb7f202ce142216d41112b24c3b31c6 Mon Sep 17 00:00:00 2001
From: weinibuliu <weinibuliu@outlook.com>
Date: Fri, 20 Feb 2026 15:18:33 +0800
Subject: [PATCH 2/2] fix

---
 src/components/OptionEditor.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/OptionEditor.tsx b/src/components/OptionEditor.tsx
index 6222dcb..53463d4 100644
--- a/src/components/OptionEditor.tsx
+++ b/src/components/OptionEditor.tsx
@@ -65,7 +65,7 @@ function OptionLabel({
 }) {
   return (
     <div className="flex items-center gap-1.5 min-w-[80px]">
-      <AsyncIcon icon={icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />
+      {icon && <AsyncIcon icon={icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />}
       <span className="text-sm text-text-secondary">{label}</span>
     </div>
   );
@@ -198,11 +198,13 @@ function InputField({
     <div className="space-y-1">
       <div className="flex items-center gap-3">
         <div className="flex items-center gap-1.5 min-w-[80px]">
-          <AsyncIcon
-            icon={input.icon}
-            basePath={basePath}
-            className="w-4 h-4 object-contain flex-shrink-0"
-          />
+          {input.icon && (
+            <AsyncIcon
+              icon={input.icon}
+              basePath={basePath}
+              className="w-4 h-4 object-contain flex-shrink-0"
+            />
+          )}
           <span className="text-sm text-text-tertiary">{inputLabel}</span>
           {inputDescription && (
             <Tooltip content={inputDescription} side="top" align="start" maxWidth="max-w-[200px]">
@@ -585,7 +587,7 @@ function OptionSelectDropdown({
         aria-controls={listboxId}
       >
         <span className="flex items-center gap-1.5 truncate">
-          <AsyncIcon icon={selectedOption?.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />
+          {selectedOption?.icon && <AsyncIcon icon={selectedOption.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />}
           {selectedOption?.label}
         </span>
         <ChevronDown
@@ -628,7 +630,7 @@ function OptionSelectDropdown({
                 aria-selected={isSelected}
               >
                 <span className="flex items-center gap-1.5 truncate">
-                  <AsyncIcon icon={opt.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />
+                  {opt.icon && <AsyncIcon icon={opt.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />}
                   {opt.label}
                 </span>
                 {isSelected && <Check className="w-4 h-4 flex-shrink-0" />}
@@ -789,7 +791,7 @@ function OptionSelectComboBox({
         aria-controls={listboxId}
       >
         <span className="flex items-center gap-1.5 truncate">
-          <AsyncIcon icon={selectedOption?.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />
+          {selectedOption?.icon && <AsyncIcon icon={selectedOption.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />}
           {selectedOption?.label}
         </span>
         <ChevronDown
@@ -857,7 +859,7 @@ function OptionSelectComboBox({
                     aria-selected={isSelected}
                   >
                     <span className="flex items-center gap-1.5 truncate">
-                      <AsyncIcon icon={opt.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />
+                      {opt.icon && <AsyncIcon icon={opt.icon} basePath={basePath} className="w-4 h-4 object-contain flex-shrink-0" />}
                       {opt.label}
                     </span>
                     {isSelected && <Check className="w-4 h-4 flex-shrink-0" />}