🐛 fix: fix sync status

lobehub · Mar 14, 2024 · 95e1434 · 95e1434
1 parent 20f87c6
commit 95e1434
Show file tree

Hide file tree

Showing 10 changed files with 249 additions and 92 deletions.
diff --git a/package.json b/package.json
@@ -146,7 +146,6 @@
     "use-merge-value": "^1",
     "utility-types": "^3",
     "uuid": "^9",
-    "y-indexeddb": "^9.0.12",
     "y-webrtc": "^10.3.0",
     "yaml": "^2",
     "yjs": "^13.6.14",

diff --git a/src/app/api/plugin/store/route.ts b/src/app/api/plugin/store/route.ts
@@ -11,7 +11,7 @@ export const GET = async (req: Request) => {
 
   let res: Response;
 
-  res = await fetch(pluginStore.getPluginIndexUrl(locale as any));
+  res = await fetch(pluginStore.getPluginIndexUrl(locale as any), { next: { revalidate: 3600 } });
 
   if (res.status === 404) {
     res = await fetch(pluginStore.getPluginIndexUrl(DEFAULT_LANG));

diff --git a/src/app/chat/features/SyncStatusTag/index.tsx b/src/app/chat/features/SyncStatusTag/index.tsx
@@ -1,10 +1,10 @@
 import { Avatar, Icon, Tag } from '@lobehub/ui';
-import { Tag as ATag, Badge, Button, Input, Popover, Typography } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
+import { Tag as ATag, Badge, Button, Popover, Typography } from 'antd';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import {
-  LucideCloud,
   LucideCloudCog,
+  LucideCloudy,
   LucideLaptop,
   LucideRefreshCw,
   LucideSmartphone,
@@ -13,46 +13,57 @@ import Link from 'next/link';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useSyncEvent } from '@/hooks/useSyncData';
 import { useGlobalStore } from '@/store/global';
-import { settingsSelectors } from '@/store/global/slices/settings/selectors';
+import { settingsSelectors } from '@/store/global/selectors';
 
-export const useStyles = createStyles(({ css, token }) => ({
-  logo: css`
-    fill: ${token.colorText};
-  `,
-  top: css`
-    position: sticky;
-    top: 0;
-  `,
-}));
+const text = {
+  ready: '已连接',
+  synced: '已同步',
+  syncing: '同步中',
+} as const;
 
 const SyncStatusTag = memo(() => {
-  const [isSyncing, enableSync, channelName, setSettings] = useGlobalStore((s) => [
+  const [syncStatus, isSyncing, enableSync, channelName] = useGlobalStore((s) => [
+    s.syncStatus,
     s.syncStatus === 'syncing',
     s.syncEnabled,
     settingsSelectors.syncConfig(s).channelName,
     s.setSettings,
   ]);
   const users = useGlobalStore((s) => s.syncAwareness, isEqual);
+  const refreshConnection = useGlobalStore((s) => s.refreshConnection);
+  const syncEvent = useSyncEvent();
 
   const theme = useTheme();
+
   return enableSync ? (
     <Popover
       arrow={false}
       content={
-        <Flexbox gap={8}>
-          <Flexbox align={'center'} horizontal style={{ fontSize: 12 }}>
-            <span>频道：</span>
-            <div>
-              <Input
-                onChange={(e) => {
-                  setSettings({ sync: { channelName: e.target.value } });
-                }}
-                size={'small'}
-                value={channelName}
-                variant={'borderless'}
-              />
-            </div>
+        <Flexbox gap={12}>
+          <Flexbox align={'center'} distribution={'space-between'} horizontal>
+            <span>频道：{channelName} </span>
+            <Button
+              icon={<Icon icon={LucideRefreshCw} />}
+              loading={isSyncing}
+              onClick={() => {
+                refreshConnection(syncEvent);
+              }}
+              size={'small'}
+            >
+              同步
+            </Button>
+            {/*<div>*/}
+            {/*  <Input*/}
+            {/*    onChange={(e) => {*/}
+            {/*      setSettings({ sync: { channelName: e.target.value } });*/}
+            {/*    }}*/}
+            {/*    size={'small'}*/}
+            {/*    value={channelName}*/}
+            {/*    variant={'borderless'}*/}
+            {/*  />*/}
+            {/*</div>*/}
           </Flexbox>
           <Flexbox gap={12}>
             {users.map((user) => (
@@ -87,16 +98,16 @@ const SyncStatusTag = memo(() => {
           </Flexbox>
         </Flexbox>
       }
-      open
+      // open
       placement={'bottomLeft'}
     >
-      <Tag
+      <ATag
         bordered={false}
-        color={isSyncing ? 'blue' : 'green'}
-        icon={<Icon icon={isSyncing ? LucideRefreshCw : LucideCloud} spin={isSyncing} />}
+        color={syncStatus !== 'synced' ? 'blue' : 'green'}
+        icon={<Icon icon={isSyncing ? LucideRefreshCw : LucideCloudy} spin={isSyncing} />}
       >
-        {isSyncing ? '同步中' : '已同步'}
-      </Tag>
+        {text[syncStatus]}
+      </ATag>
     </Popover>
   ) : (
     <Popover

diff --git a/src/const/settings.ts b/src/const/settings.ts
@@ -114,7 +114,9 @@ export const DEFAULT_TOOL_CONFIG = {
   },
 };
 
-const DEFAULT_SYNC_CONFIG: GlobalSyncSettings = {};
+const DEFAULT_SYNC_CONFIG: GlobalSyncSettings = {
+  channelName: 'atc',
+};
 
 export const DEFAULT_SETTINGS: GlobalSettings = {
   defaultAgent: DEFAULT_AGENT,