feat: blinko setting improve

Author: BryceWG

electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trackflow",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "TrackFlow Desktop App",
   "main": "dist/main.js",
   "repository": {

frontend/public/project-icons/blinko-logo.png

@@ -28,6 +28,7 @@ import { WebDAVManager } from './components/WebDAVManager'
 import { ShortcutSettings } from './components/ShortcutSettings'
 import { Search } from './components/Search'
 import { BlinkoConfig } from './components/BlinkoConfig'
+import { IntegrationSettings } from './components/IntegrationSettings'
 
 interface Project {
   id: string;
@@ -148,7 +149,7 @@ function App() {
     domain: '',
     token: ''
   });
-  const [isBlinkoConfigOpen, setIsBlinkoConfigOpen] = useState(false);
+  const [isIntegrationSettingsOpen, setIsIntegrationSettingsOpen] = useState(false);
 
   // 模拟加载效果
   useEffect(() => {
@@ -609,10 +610,10 @@ function App() {
                 快捷键设置
               </button>
               <button
-                onClick={() => setIsBlinkoConfigOpen(true)}
+                onClick={() => setIsIntegrationSettingsOpen(true)}
                 className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 bg-gray-50 rounded-md hover:bg-gray-100"
               >
-                Blinko 设置
+                联动设置
               </button>
               {currentUser?.role === 'admin' && (
                 <button
@@ -1174,20 +1175,20 @@ function App() {
         </div>
       )}
 
-      {/* Blinko 配置弹窗 */}
+      {/* 联动设置弹窗 */}
       <Modal
-        isOpen={isBlinkoConfigOpen}
-        onClose={() => setIsBlinkoConfigOpen(false)}
-        title="Blinko 设置"
+        isOpen={isIntegrationSettingsOpen}
+        onClose={() => setIsIntegrationSettingsOpen(false)}
+        title="联动设置"
       >
-        <BlinkoConfig
-          config={blinkoConfig}
-          onSave={(newConfig) => {
+        <IntegrationSettings
+          blinkoConfig={blinkoConfig}
+          onSaveBlinkoConfig={(newConfig) => {
             setBlinkoConfig(newConfig);
-            setIsBlinkoConfigOpen(false);
+            setIsIntegrationSettingsOpen(false);
             showToast('success', 'Blinko 配置已保存');
           }}
-          onClose={() => setIsBlinkoConfigOpen(false)}
+          onClose={() => setIsIntegrationSettingsOpen(false)}
         />
       </Modal>
     </div>

frontend/src/App.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { BlinkoConfig } from './BlinkoConfig';
+
+interface IntegrationSettingsProps {
+  blinkoConfig: {
+    domain: string;
+    token: string;
+  };
+  onSaveBlinkoConfig: (config: { domain: string; token: string }) => void;
+  onClose: () => void;
+}
+
+export const IntegrationSettings: React.FC<IntegrationSettingsProps> = ({
+  blinkoConfig,
+  onSaveBlinkoConfig,
+  onClose,
+}) => {
+  const [activeTab, setActiveTab] = useState('blinko');
+
+  return (
+    <div className="space-y-4">
+      {/* 集成列表 */}
+      <div className="border-b border-gray-200">
+        <nav className="-mb-px flex space-x-8">
+          <button
+            onClick={() => setActiveTab('blinko')}
+            className={`
+              whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm
+              ${activeTab === 'blinko'
+                ? 'border-blue-500 text-blue-600'
+                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}
+            `}
+          >
+            Blinko
+          </button>
+          {/* 这里可以添加其他集成的标签 */}
+        </nav>
+      </div>
+
+      {/* Blinko 设置 */}
+      {activeTab === 'blinko' && (
+        <div className="space-y-4">
+          <div className="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
+            <img src="./project-icons/blinko-logo.png" alt="Blinko Logo" className="w-12 h-12" />
+            <div>
+              <h3 className="text-lg font-medium text-gray-900">Blinko</h3>
+              <p className="text-sm text-gray-500">
+                开源的个人笔记工具，注重隐私保护
+              </p>
+              <a
+                href="https://github.com/blinko-space/blinko"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-blue-600 hover:text-blue-700 flex items-center mt-1"
+              >
+                访问项目主页
+                <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          
+          <BlinkoConfig
+            config={blinkoConfig}
+            onSave={onSaveBlinkoConfig}
+            onClose={onClose}
+          />
+        </div>
+      )}
+    </div>
+  );
+};