优化提示

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;

src/components/Body.tsx

@@ -38,6 +38,7 @@ import useKeyService from '../hooks/useKeyService'
 import Ask from './Ask'
 import { v4 } from 'uuid'
 import RateExtension from '../components/RateExtension'
+import ApiKeyReminder from './ApiKeyReminder'
 
 const Body = () => {
   const dispatch = useAppDispatch()
@@ -291,6 +292,8 @@ const Body = () => {
         <li>上下方向键来移动当前字幕(可先点击字幕使焦点在字幕列表内)。</li>
       </ul>
 
+      <ApiKeyReminder />
+
       {/* <div className='flex flex-col items-center text-center pt-1 pb-2'> */}
       {/*  <div className='font-semibold text-accent'>💡<span className='underline underline-offset-4'>提示</span>💡</div> */}
       {/*  <div className='text-sm desc px-2'>可以尝试将<span className='text-amber-600 font-semibold'>概览</span>生成的内容粘贴到<span */}

src/utils/chromeUtils.ts

@@ -0,0 +1,7 @@
+export const openOptionsPage = () => {
+  if (chrome.runtime.openOptionsPage) {
+    chrome.runtime.openOptionsPage();
+  } else {
+    window.open(chrome.runtime.getURL('options.html'));
+  }
+};