✨ feat: 增加控制默认展示网格还是列表的设置选项(show_style)

api/v1/_types.ts

@@ -1,3 +1,4 @@
 export interface Settings {
   SERPAPI_API_KEY?: string;
+  SHOW_STYLE?: string;
 }

api/v1/_utils.ts

@@ -5,6 +5,7 @@ const BASE_URL = 'https://serpapi.com/search';
 
 const fetchResult = async (args: { query: string }, settings: Settings): Promise<Result> => {
   const apiKey = settings.SERPAPI_API_KEY;
+  const showStyle = settings.SHOW_STYLE ?? 'list';
 
   const { default: querystring } = await import('query-string');
 
@@ -27,15 +28,18 @@ const fetchResult = async (args: { query: string }, settings: Settings): Promise
 
   const results = data.organic_results as OrganicResults;
 
-  return results.map((r) => ({
-    content: r.snippet,
-    date: r.date,
-    displayed_link: r.displayed_link,
-    favicon: r.favicon,
-    link: r.link,
-    source: r.source,
-    title: r.title,
-  }));
+  return {
+    search_items: results.map((r) => ({
+      content: r.snippet,
+      date: r.date,
+      displayed_link: r.displayed_link,
+      favicon: r.favicon,
+      link: r.link,
+      source: r.source,
+      title: r.title,
+    })),
+    show_style: showStyle,
+  };
 };
 
 export default fetchResult;

docs/data.ts

@@ -1,93 +1,95 @@
 import { Result } from '@lobehub/chat-plugin-search-engine';
 
-export const data: Result = [
-  {
-    content:
-      'Empowering your AI dreams with LobeHub. LobeHub has 16 repositories available. Follow their code on GitHub.',
-    displayed_link: 'https://github.com › lobehub',
-    favicon:
-      'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f1bbde9729ef8e1ae8a488d7c74c8ad5.png',
-    link: 'https://github.com/lobehub',
-    source: 'github.com',
-    title: 'LobeHub - GitHub',
-  },
-  {
-    content:
-      'Lobe UI is an open-source UI component library for building AIGC web apps - GitHub - lobehub/lobe-ui: Lobe UI is an open-source UI component library for ...',
-    displayed_link: 'https://github.com › lobehub › lobe-ui',
-    favicon:
-      'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f7d5cfce4fde91906aba32fa8a7f31b2.png',
-    link: 'https://github.com/lobehub/lobe-ui',
-    source: 'github.com',
-    title: 'lobehub/lobe-ui - GitHub',
-  },
-  {
-    content: 'Meet the LobeHub: Empowering your AI dreams with LobeHub.',
-    displayed_link: 'https://lablab.ai › anthropic-ai-hackathon › l...',
-    favicon:
-      'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b39220df8c473af72e6e3eaf6444118e39dcd.png',
-    link: 'https://lablab.ai/event/anthropic-ai-hackathon/lobehub',
-    source: 'lablab.ai',
-    title: 'Team: LobeHub - Lablab.ai',
-  },
-  {
-    content:
-      'dumi-theme-antd-style · 源码. dumi2 theme for antd-style document website. dumi-theme-lobehub · 源码. dumi2 theme for LobeHub document website.',
-    displayed_link: 'https://d.umijs.org › theme › market',
-    link: 'https://d.umijs.org/theme/market',
-    source: 'umijs.org',
-    title: 'Dumi 主题市场',
-  },
-  {
-    content:
-      'Lobe UI is an open-source UI component library for building AIGC web apps. Version: 1.68.0 was published by arvinxx.',
-    date: '2023年8月5日',
-    displayed_link: 'https://socket.dev › npm › @lobehub',
-    favicon:
-      'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922a78893068fa9ff7249d46b96a844cc8f.png',
-    link: 'https://socket.dev/npm/package/@lobehub/ui',
-    source: 'socket.dev',
-    title: '@lobehub/ui - npm Package Overview - Socket',
-  },
-  {
-    content:
-      'Log in · Sign up. See new Tweets. Opens profile photo. Follow. Click to Follow Lovehub07. Lovehub. @Lovehub07. Joined June 2020.',
-    displayed_link: 'https://twitter.com › Lovehub07',
-    favicon:
-      'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b39227335dd288e4903d572cd8aad8641d5b6.png',
-    link: 'https://twitter.com/Lovehub07',
-    source: 'twitter.com',
-    title: 'Lovehub (@Lovehub07) / X - Twitter',
-  },
-  {
-    content:
-      'dumi-theme-lobehub is a documentation site theme package designed for dumi2. It provides a more beautiful and user-friendly development and reading ...',
-    displayed_link: 'https://www.npmjs.com › ~canisminor1990',
-    favicon:
-      'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f5fc8b00bf3ee8f0db2499a79c5f1e36.png',
-    link: 'https://www.npmjs.com/~canisminor1990',
-    source: 'npmjs.com',
-    title: 'canisminor1990 - npm',
-  },
-  {
-    content:
-      'Lobe Chat Plugin SDK, help you to build an amazing chat plugin for Lobe Chat - 1.0.1 - a TypeScript package on npm - Libraries.io.',
-    date: '7天前',
-    displayed_link: 'https://libraries.io › npm › chat-plugin-sdk',
-    favicon:
-      'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922256f22e96143101960e1008fb76a0c04.png',
-    link: 'https://libraries.io/npm/@lobehub%2Fchat-plugin-sdk',
-    source: 'libraries.io',
-    title: '@lobehub/chat-plugin-sdk 1.0.1 on npm - Libraries.io',
-  },
-  {
-    content:
-      '3-lobe hub and shaft for these headlight motors: 87-92 Firebird 87-88 Fiero 87-91 Reatta.',
-    displayed_link: 'http://www.top-downsolutions.com › 87-Fire...',
-    favicon:
-      'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922b551ab2717e44679b0fe989081b1da57.png',
-    link: 'http://www.top-downsolutions.com/87-Firebird-Headlight-motor',
-    source: 'top-downsolutions.com',
-    title: '3-lobe hub and shaft for 87-92 Firebird headlight motor',
-  },
-];
+export const data: Result = {
+  search_items: [
+    {
+      content:
+        'Empowering your AI dreams with LobeHub. LobeHub has 16 repositories available. Follow their code on GitHub.',
+      displayed_link: 'https://github.com › lobehub',
+      favicon:
+        'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f1bbde9729ef8e1ae8a488d7c74c8ad5.png',
+      link: 'https://github.com/lobehub',
+      source: 'github.com',
+      title: 'LobeHub - GitHub',
+    },
+    {
+      content:
+        'Lobe UI is an open-source UI component library for building AIGC web apps - GitHub - lobehub/lobe-ui: Lobe UI is an open-source UI component library for ...',
+      displayed_link: 'https://github.com › lobehub › lobe-ui',
+      favicon:
+        'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f7d5cfce4fde91906aba32fa8a7f31b2.png',
+      link: 'https://github.com/lobehub/lobe-ui',
+      source: 'github.com',
+      title: 'lobehub/lobe-ui - GitHub',
+    },
+    {
+      content: 'Meet the LobeHub: Empowering your AI dreams with LobeHub.',
+      displayed_link: 'https://lablab.ai › anthropic-ai-hackathon › l...',
+      favicon:
+        'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b39220df8c473af72e6e3eaf6444118e39dcd.png',
+      link: 'https://lablab.ai/event/anthropic-ai-hackathon/lobehub',
+      source: 'lablab.ai',
+      title: 'Team: LobeHub - Lablab.ai',
+    },
+    {
+      content:
+        'dumi-theme-antd-style · 源码. dumi2 theme for antd-style document website. dumi-theme-lobehub · 源码. dumi2 theme for LobeHub document website.',
+      displayed_link: 'https://d.umijs.org › theme › market',
+      link: 'https://d.umijs.org/theme/market',
+      source: 'umijs.org',
+      title: 'Dumi 主题市场',
+    },
+    {
+      content:
+        'Lobe UI is an open-source UI component library for building AIGC web apps. Version: 1.68.0 was published by arvinxx.',
+      date: '2023年8月5日',
+      displayed_link: 'https://socket.dev › npm › @lobehub',
+      favicon:
+        'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922a78893068fa9ff7249d46b96a844cc8f.png',
+      link: 'https://socket.dev/npm/package/@lobehub/ui',
+      source: 'socket.dev',
+      title: '@lobehub/ui - npm Package Overview - Socket',
+    },
+    {
+      content:
+        'Log in · Sign up. See new Tweets. Opens profile photo. Follow. Click to Follow Lovehub07. Lovehub. @Lovehub07. Joined June 2020.',
+      displayed_link: 'https://twitter.com › Lovehub07',
+      favicon:
+        'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b39227335dd288e4903d572cd8aad8641d5b6.png',
+      link: 'https://twitter.com/Lovehub07',
+      source: 'twitter.com',
+      title: 'Lovehub (@Lovehub07) / X - Twitter',
+    },
+    {
+      content:
+        'dumi-theme-lobehub is a documentation site theme package designed for dumi2. It provides a more beautiful and user-friendly development and reading ...',
+      displayed_link: 'https://www.npmjs.com › ~canisminor1990',
+      favicon:
+        'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f5fc8b00bf3ee8f0db2499a79c5f1e36.png',
+      link: 'https://www.npmjs.com/~canisminor1990',
+      source: 'npmjs.com',
+      title: 'canisminor1990 - npm',
+    },
+    {
+      content:
+        'Lobe Chat Plugin SDK, help you to build an amazing chat plugin for Lobe Chat - 1.0.1 - a TypeScript package on npm - Libraries.io.',
+      date: '7天前',
+      displayed_link: 'https://libraries.io › npm › chat-plugin-sdk',
+      favicon:
+        'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922256f22e96143101960e1008fb76a0c04.png',
+      link: 'https://libraries.io/npm/@lobehub%2Fchat-plugin-sdk',
+      source: 'libraries.io',
+      title: '@lobehub/chat-plugin-sdk 1.0.1 on npm - Libraries.io',
+    },
+    {
+      content:
+        '3-lobe hub and shaft for these headlight motors: 87-92 Firebird 87-88 Fiero 87-91 Reatta.',
+      displayed_link: 'http://www.top-downsolutions.com › 87-Fire...',
+      favicon:
+        'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922b551ab2717e44679b0fe989081b1da57.png',
+      link: 'http://www.top-downsolutions.com/87-Firebird-Headlight-motor',
+      source: 'top-downsolutions.com',
+      title: '3-lobe hub and shaft for 87-92 Firebird headlight motor',
+    },
+  ],
+};

public/manifest-dev.json

@@ -18,6 +18,12 @@
   ],
   "gateway": "http://localhost:3400/api/gateway",
   "identifier": "searchEngine-dev",
+  "meta": {
+    "avatar": "🔍",
+    "tags": ["web", "search"],
+    "title": "Search Engine (dev)",
+    "description": "Query search engine to get information"
+  },
   "settings": {
     "type": "object",
     "required": ["SERPAPI_API_KEY"],
@@ -29,6 +35,12 @@
         "minLength": 64,
         "maxLength": 64,
         "format": "password"
+      },
+      "SHOW_STYLE": {
+        "title": "Searched items show style | 搜索结果展示风格",
+        "description": "default: list view | 默认: 列表视图",
+        "type": "string",
+        "enum": ["grid", "list"]
       }
     }
   },

public/manifest.json

@@ -38,6 +38,12 @@
         "minLength": 64,
         "maxLength": 64,
         "format": "password"
+      },
+      "SHOW_STYLE": {
+        "title": "Searched items show style | 搜索结果展示风格",
+        "description": "default: list view | 默认: 列表视图",
+        "type": "string",
+        "enum": ["grid", "list"]
       }
     }
   },

src/Render.tsx

@@ -12,7 +12,8 @@ const listRender = (item: any) => <ListItem {...item} />;
 const gridRender = (item: any) => <GridItem {...item} />;
 
 const Render = memo<PluginRenderProps<Result>>(({ content }) => {
-  const [grid, setGrid] = useState(false);
+  const showStyle = content.show_style;
+  const [grid, setGrid] = useState(showStyle === 'grid');
   return (
     <Flexbox gap={6}>
       <Flexbox horizontal>
@@ -22,7 +23,7 @@ const Render = memo<PluginRenderProps<Result>>(({ content }) => {
       <SpotlightCard
         columns={grid ? '1fr 1fr 1fr' : '1fr'}
         gap={grid ? 8 : 6}
-        items={content}
+        items={content.search_items}
         renderItem={grid ? gridRender : listRender}
       />
     </Flexbox>

src/type.ts

@@ -10,7 +10,10 @@ export interface SearchItem {
   title: string;
 }
 
-export type Result = SearchItem[];
+export interface Result {
+  search_items: SearchItem[];
+  show_style?: string;
+}
 
 interface OrganicResult {
   about_page_link: string;