+ {/* Category Name */}
+
+
+
+ setFormData(prev => ({ ...prev, name: e.target.value }))}
+ className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+ placeholder={t('输入分类名称', 'Enter category name')}
+ autoFocus
+ />
+
+
+ {/* Icon Selection */}
+
+
+
+ {/* Custom Icon Input */}
+ {showCustomInput && (
+
+
+ {/* Keywords */}
+
+
+ )}
+
+
+ setCustomIcon(e.target.value)}
+ placeholder={t('输入任意emoji...', 'Enter any emoji...')}
+ className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-center text-lg"
+ maxLength={4}
+ autoFocus
+ />
+
+
+
+ + {t('提示：可以输入任何emoji表情，如 🎯 🎨 🎪 等', 'Tip: You can enter any emoji, like 🎯 🎨 🎪 etc.')} +
+
+ {availableIcons.map((iconItem) => (
+
+ ))}
+
+ + {t('当前选择:', 'Selected:')} {formData.icon} + +
++ {t( + '包含所有常用emoji分类：笑脸、人物、手势、动物、食物、交通、符号等', + 'Includes all common emoji categories: smileys, people, gestures, animals, food, transport, symbols, etc.' + )} +
+
+
+ setFormData(prev => ({ ...prev, keywords: e.target.value }))}
+ className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+ placeholder={t('用逗号分隔关键词', 'Comma-separated keywords')}
+ />
+
+
+ {/* Action Buttons */}
+ + {t('用于自动匹配仓库到此分类', 'Used to automatically match repositories to this category')} +
+
+
+
+
+
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/RepositoryEditModal.tsx b/src/components/RepositoryEditModal.tsx
new file mode 100644
index 0000000..5a78769
--- /dev/null
+++ b/src/components/RepositoryEditModal.tsx
@@ -0,0 +1,273 @@
+import React, { useState, useEffect } from 'react';
+import { Save, X, Plus } from 'lucide-react';
+import { Modal } from './Modal';
+import { Repository } from '../types';
+import { useAppStore, getAllCategories } from '../store/useAppStore';
+
+interface RepositoryEditModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ repository: Repository | null;
+}
+
+export const RepositoryEditModal: React.FC
+
+
+ {/* Header */}
+
+
+
+
+ {/* Content */}
+ + {title} +
+ +
+ {children}
+
+
+ {/* Repository Info */}
+
+
+
+ {/* Description */}
+
+ 
+
+ {repository.description && (
+
+
+ + {repository.name} +
++ {repository.owner.login} +
++ {t('原始描述:', 'Original description:')} {repository.description} +
+ )} +
+
+