fix(组件): 添加密码显示切换功能并调整标签顺序 (#62)

- 在ModelModal中添加密码显示/隐藏切换功能
- 调整ModelTagFilter中标签的显示顺序
- 增加用户列表下拉菜单的最大高度

Author: jiangwel

ui/ModelModal/src/ModelModal.tsx

@@ -12,7 +12,10 @@ import {
   Checkbox,
   FormControlLabel,
   ListSubheader,
+  InputAdornment,
+  IconButton,
 } from '@mui/material';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { Icon, message, Modal, ThemeProvider } from '@c-x/ui';
 import Card from './components/card';
 import ModelTagsWithLabel from './components/ModelTagsWithLabel';
@@ -100,6 +103,7 @@ export const ModelModal: React.FC<ModelModalProps> = ({
   const [addModelError, setAddModelError] = useState('');
   const [success, setSuccess] = useState(false);
   const [expandAdvanced, setExpandAdvanced] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
 
   const handleReset = () => {
     onClose();
@@ -633,10 +637,23 @@ export const ModelModal: React.FC<ModelModalProps> = ({
                   {...field}
                   fullWidth
                   size='small'
-                  type='password'
+                  type={showPassword ? 'text' : 'password'}
                   placeholder=''
                   error={!!errors.api_key}
                   helperText={errors.api_key?.message}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          aria-label="toggle password visibility"
+                          onClick={() => setShowPassword(!showPassword)}
+                          edge="end"
+                        >
+                          {showPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
                   onChange={(e) => {
                     field.onChange(e.target.value);
                     setModelUserList([]);
@@ -775,7 +792,7 @@ export const ModelModal: React.FC<ModelModalProps> = ({
                         MenuProps: {
                           PaperProps: {
                             sx: {
-                              maxHeight: 300,
+                              maxHeight: 450,
                               '& .MuiList-root': {
                                 paddingTop: 0,
                               }

ui/ModelModal/src/components/ModelTagFilter.tsx

@@ -37,10 +37,10 @@ const ModelTagFilter: React.FC<ModelTagFilterProps> = ({
   // 定义可用的标签类型
   const availableTags = [
     { key: 'all', label: '全部', color: 'default' as const },
+    { key: 'code', label: '代码生成', color: 'warning' as const },
     { key: 'reasoning', label: '深度思考', color: 'primary' as const },
-    { key: 'vision', label: '视觉', color: 'secondary' as const },
     { key: 'function_calling', label: '工具调用', color: 'success' as const },
-    { key: 'code', label: '代码生成', color: 'warning' as const },
+    { key: 'vision', label: '视觉', color: 'secondary' as const },
     { key: 'embedding', label: '向量', color: 'error' as const },
     { key: 'rerank', label: '重排', color: 'default' as const }
   ];