优化提示

src/components/ApiKeyReminder.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useAppSelector } from '../hooks/redux';
+import { openOptionsPage } from '../utils/chromeUtils';
+
+const ApiKeyReminder: React.FC = () => {
+  const apiKey = useAppSelector(state => state.env.envData.apiKey);
+  const geminiApiKey = useAppSelector(state => state.env.envData.geminiApiKey);
+  const aiType = useAppSelector(state => state.env.envData.aiType);
+
+  if ((aiType === 'gemini' && geminiApiKey) || (aiType !== 'gemini' && apiKey)) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center justify-between p-2 bg-yellow-100 text-yellow-800 text-sm rounded-md">
+      <span>请先设置API密钥以使用总结及翻译功能</span>
+      <button
+        className="px-2 py-1 bg-yellow-200 hover:bg-yellow-300 rounded text-xs font-medium transition-colors"
+        onClick={openOptionsPage}
+      >
+        设置 →
+      </button>
+    </div>
+  );
+};
+
+export default ApiKeyReminder;