💄 style: fix init state of loading (lobehub#7694)

Author: arvinxx

src/app/(backend)/webapi/assistant/[id]/route.ts

@@ -15,18 +15,22 @@ import { TITLE_BAR_HEIGHT } from './const';
 const isMac = isMacOS();
 
 const TitleBar = memo(() => {
-  const initElectronAppState = useElectronStore((s) => s.useInitElectronAppState);
+  const [isAppStateInit, initElectronAppState] = useElectronStore((s) => [
+    s.isAppStateInit,
+    s.useInitElectronAppState,
+  ]);
 
   initElectronAppState();
 
+  const showWinControl = isAppStateInit && !isMac;
   return (
     <Flexbox
       align={'center'}
       className={electronStylish.draggable}
       height={TITLE_BAR_HEIGHT}
       horizontal
       justify={'space-between'}
-      paddingInline={isMac ? 12 : '12px 0'}
+      paddingInline={showWinControl ? '12px 0' : 12}
       style={{ minHeight: TITLE_BAR_HEIGHT }}
       width={'100%'}
     >
@@ -38,7 +42,7 @@ const TitleBar = memo(() => {
           <UpdateNotification />
           <Connection />
         </Flexbox>
-        {!isMac && (
+        {showWinControl && (
           <>
             <Divider type={'vertical'} />
             <WinControl />

src/app/(backend)/webapi/assistant/store/route.ts

@@ -26,7 +26,10 @@ export class AssistantStore {
     return urlJoin(this.baseUrl, `${identifier}.${normalizeLocale(lang)}.json`);
   };
 
-  getAgentIndex = async (locale: Locales = DEFAULT_LANG, revalidate?: number) => {
+  getAgentIndex = async (
+    locale: Locales = DEFAULT_LANG,
+    revalidate?: number,
+  ): Promise<AgentStoreIndex> => {
     try {
       let res: Response;
 
@@ -42,7 +45,7 @@ export class AssistantStore {
 
       if (!res.ok) {
         console.warn('fetch agent index error:', await res.text());
-        return [];
+        return { agents: [], schemaVersion: 1 };
       }
 
       const data: AgentStoreIndex = await res.json();

src/app/(backend)/webapi/plugin/store/route.ts

@@ -5,12 +5,14 @@ import { publicProcedure, router } from '@/libs/trpc/edge';
 
 import { appStatusRouter } from './appStatus';
 import { configRouter } from './config';
+import { marketRouter } from './market';
 import { uploadRouter } from './upload';
 
 export const edgeRouter = router({
   appStatus: appStatusRouter,
   config: configRouter,
   healthcheck: publicProcedure.query(() => "i'm live!"),
+  market: marketRouter,
   upload: uploadRouter,
 });
 

src/features/ElectronTitlebar/index.tsx

@@ -0,0 +1,108 @@
+import { TRPCError } from '@trpc/server';
+import { z } from 'zod';
+
+import { DEFAULT_LANG } from '@/const/locale';
+import { publicProcedure, router } from '@/libs/trpc/edge';
+import { Locales } from '@/locales/resources';
+import { AssistantStore } from '@/server/modules/AssistantStore';
+import { PluginStore } from '@/server/modules/PluginStore';
+import { AgentStoreIndex } from '@/types/discover';
+
+export const marketRouter = router({
+  getAgent: publicProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        locale: z.string().optional(),
+      }),
+    )
+    .query(async ({ input }) => {
+      const { id, locale } = input;
+
+      const market = new AssistantStore();
+
+      // 获取助手 URL
+      const url = market.getAgentUrl(id, locale as Locales);
+
+      // 获取助手数据
+      let res = await fetch(url);
+
+      // 如果找不到对应语言的助手，尝试获取默认语言的助手
+      if (res.status === 404) {
+        res = await fetch(market.getAgentUrl(id, DEFAULT_LANG));
+      }
+
+      if (!res.ok) {
+        throw new Error(`Failed to fetch agent with id ${id}`);
+      }
+
+      return res.json();
+    }),
+
+  getAgentIndex: publicProcedure
+    .input(
+      z
+        .object({
+          locale: z.string().optional(),
+        })
+        .optional(),
+    )
+    .query(async ({ input }): Promise<AgentStoreIndex> => {
+      const locale = input?.locale;
+
+      const market = new AssistantStore();
+      try {
+        return await market.getAgentIndex(locale as Locales);
+      } catch (e) {
+        // it means failed to fetch
+        if ((e as Error).message.includes('fetch failed')) {
+          return { agents: [], schemaVersion: 1 };
+        }
+
+        throw new TRPCError({
+          code: 'INTERNAL_SERVER_ERROR',
+          message: 'failed to fetch agent market index',
+        });
+      }
+    }),
+
+  getPluginIndex: publicProcedure
+    .input(
+      z
+        .object({
+          locale: z.string().optional(),
+        })
+        .optional(),
+    )
+    .query(async ({ input }) => {
+      const locale = input?.locale;
+
+      const pluginStore = new PluginStore();
+
+      try {
+        // 获取插件索引URL
+        let res = await fetch(pluginStore.getPluginIndexUrl(locale as Locales));
+
+        // 如果找不到对应语言的插件索引，尝试获取默认语言的插件索引
+        if (res.status === 404) {
+          res = await fetch(pluginStore.getPluginIndexUrl(DEFAULT_LANG));
+        }
+
+        if (res.ok) {
+          return res.json();
+        }
+
+        throw new Error('Failed to fetch plugin index');
+      } catch (e) {
+        // it means failed to fetch
+        if ((e as Error).message.includes('fetch failed')) {
+          return [];
+        }
+
+        throw new TRPCError({
+          code: 'INTERNAL_SERVER_ERROR',
+          message: 'failed to fetch plugin market index',
+        });
+      }
+    }),
+});

src/server/modules/AssistantStore/index.ts

@@ -1,5 +1,6 @@
 import { Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { edgeClient } from '@/libs/trpc/client';
 import { globalHelpers } from '@/store/global/helpers';
 
 import { assistantService } from '../assistant';
@@ -12,6 +13,19 @@ vi.mock('@/store/global/helpers', () => ({
   },
 }));
 
+vi.mock('@/libs/trpc/client', () => ({
+  edgeClient: {
+    market: {
+      getAgentIndex: {
+        query: vi.fn(),
+      },
+      getAgent: {
+        query: vi.fn(),
+      },
+    },
+  },
+}));
+
 beforeEach(() => {
   vi.resetAllMocks();
 });
@@ -22,56 +36,49 @@ describe('AssistantService', () => {
       // Arrange
       const fakeResponse = { agents: [{ name: 'TestAssisstant' }] };
       (globalHelpers.getCurrentLanguage as Mock).mockReturnValue('tt');
-      global.fetch = vi.fn(() =>
-        Promise.resolve({
-          json: () => Promise.resolve(fakeResponse),
-        }),
-      ) as any;
+      
+      (edgeClient.market.getAgentIndex.query as Mock).mockResolvedValue(fakeResponse);
 
       // Act
       const assistantList = await assistantService.getAssistantList();
 
       // Assert
       expect(globalHelpers.getCurrentLanguage).toHaveBeenCalled();
-      expect(fetch).toHaveBeenCalledWith('/webapi/assistant/store?locale=tt');
       expect(assistantList).toEqual(fakeResponse.agents);
     });
 
     it('should handle fetch error', async () => {
       // Arrange
-      const fakeUrl = 'http://fake-url.com/plugins.json';
       (globalHelpers.getCurrentLanguage as Mock).mockReturnValue('en');
-      global.fetch = vi.fn(() => Promise.reject(new Error('Network error')));
+      (edgeClient.market.getAgentIndex.query as Mock).mockRejectedValue(
+        new Error('Network error'),
+      );
 
       // Act & Assert
       await expect(assistantService.getAssistantList()).rejects.toThrow('Network error');
     });
   });
-  describe('getAssistantList', () => {
-    it('should fetch and return the assistant list', async () => {
+  
+  describe('getAssistantById', () => {
+    it('should fetch and return the assistant by id', async () => {
       // Arrange
       const fakeResponse = { identifier: 'test-assisstant' };
       (globalHelpers.getCurrentLanguage as Mock).mockReturnValue('tt');
-      global.fetch = vi.fn(() =>
-        Promise.resolve({
-          json: () => Promise.resolve(fakeResponse),
-        }),
-      ) as any;
+      
+      (edgeClient.market.getAgent.query as Mock).mockResolvedValue(fakeResponse);
 
       // Act
       const assistant = await assistantService.getAssistantById('test-assisstant');
 
       // Assert
       expect(globalHelpers.getCurrentLanguage).toHaveBeenCalled();
-      expect(fetch).toHaveBeenCalledWith('/webapi/assistant/test-assisstant?locale=tt');
       expect(assistant.identifier).toEqual(fakeResponse.identifier);
     });
 
     it('should handle fetch error', async () => {
       // Arrange
-      const fakeUrl = 'http://fake-url.com/plugins.json';
       (globalHelpers.getCurrentLanguage as Mock).mockReturnValue('en');
-      global.fetch = vi.fn(() => Promise.reject(new Error('Network error')));
+      (edgeClient.market.getAgent.query as Mock).mockRejectedValue(new Error('Network error'));
 
       // Act & Assert
       await expect(assistantService.getAssistantById('test-assisstant')).rejects.toThrow(