From 0b9a90771a89a71eed3f4b6a8604910f03b2cb81 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Tue, 15 Jul 2025 13:21:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DCustomSelect=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6null=E5=80=BC=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复ProjectTemplateBindingList中activeFilter为null时传递给select元素的问题
- 更新getActiveFilterOptions函数，将null值改为空字符串
- 改进CustomSelect组件的类型定义和null值处理
- 添加safeValue转换确保select元素接收有效的字符串值
- 解决React警告：'value prop on select should not be null'
---
 apps/desktop/src/components/CustomSelect.tsx              | 8 +++++---
 .../desktop/src/components/ProjectTemplateBindingList.tsx | 8 ++++----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/desktop/src/components/CustomSelect.tsx b/apps/desktop/src/components/CustomSelect.tsx
index fd0d695..2d7ed25 100644
--- a/apps/desktop/src/components/CustomSelect.tsx
+++ b/apps/desktop/src/components/CustomSelect.tsx
@@ -2,17 +2,19 @@ import { ChevronDownIcon } from "lucide-react";
 
 // 自定义下拉选择组件
 export const CustomSelect: React.FC<{
-  value: string | any;
+  value: string | number | null | undefined;
   onChange: (value: string) => void;
-  options: { value: string | any; label: string; description?: string }[];
+  options: { value: string | number; label: string; description?: string }[];
   placeholder?: string;
   className?: string;
   disabled?: boolean;
 }> = ({ value, onChange, options, placeholder, className = '', disabled = false }) => {
+  // 确保 value 是字符串，处理 null 和 undefined
+  const safeValue = value === null || value === undefined ? '' : String(value);
   return (
     <div className={`relative ${className}`}>
       <select
-        value={value}
+        value={safeValue}
         onChange={(e) => onChange(e.target.value)}
         disabled={disabled}
         className={`w-full appearance-none bg-white border border-gray-200 rounded-lg px-3 py-2 pr-8 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 hover:border-gray-300 cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
diff --git a/apps/desktop/src/components/ProjectTemplateBindingList.tsx b/apps/desktop/src/components/ProjectTemplateBindingList.tsx
index f184df8..b849867 100644
--- a/apps/desktop/src/components/ProjectTemplateBindingList.tsx
+++ b/apps/desktop/src/components/ProjectTemplateBindingList.tsx
@@ -150,9 +150,9 @@ export const ProjectTemplateBindingList: React.FC<ProjectTemplateBindingListProp
   ];
 
   const getActiveFilterOptions = () => [
-    { value: null, label: '全部' },
-    { value: true, label: '已激活' },
-    { value: false, label: '已停用' },
+    { value: '', label: '全部' },
+    { value: 'true', label: '已激活' },
+    { value: 'false', label: '已停用' },
   ];
 
   if (loading) {
@@ -207,7 +207,7 @@ export const ProjectTemplateBindingList: React.FC<ProjectTemplateBindingListProp
 
             {onActiveFilterChange && (
               <CustomSelect
-                value={activeFilter}
+                value={activeFilter === null ? '' : activeFilter.toString()}
                 onChange={(value) => onActiveFilterChange(value === 'true' ? true : value === 'false' ? false : null)}
                 options={getActiveFilterOptions()}
                 className="min-w-[100px]"