✨ feat: 优化搜索引擎插件交互展示

src/plugins/Render.ts

@@ -1,8 +1,11 @@
 import { PluginRender } from '@/plugins/type';
 
+import searchEngine from './searchEngine';
+import SearchEngineRender from './searchEngine/Render';
 import getWeather from './weather';
 import WeatherRender from './weather/Render';
 
 export const PluginsRender: Record<string, PluginRender> = {
   [getWeather.name]: WeatherRender,
+  [searchEngine.name]: SearchEngineRender,
 };

src/plugins/searchEngine/Render.tsx

@@ -0,0 +1,85 @@
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { PluginRenderProps } from '@/plugins/type';
+
+import { Result } from './type';
+
+const useStyles = createStyles(({ css, token, cx }) => {
+  const title = css`
+    margin-top: 4px;
+    font-size: 16px;
+  `;
+  return {
+    container: css`
+      :not(:last-child) {
+        border-bottom: 1px solid ${token.colorBorder};
+      }
+    `,
+    desc: css`
+      color: ${token.colorTextTertiary};
+    `,
+    displayLink: css`
+      color: ${token.colorTextQuaternary};
+    `,
+    favicon: css`
+      border-radius: 50%;
+    `,
+    link: css`
+      &:hover {
+        .${cx(title)} {
+          text-decoration: underline;
+        }
+      }
+    `,
+    title,
+  };
+});
+
+const Render = memo<PluginRenderProps<Result>>(({ content }) => {
+  const { styles } = useStyles();
+  return (
+    <Flexbox gap={8}>
+      <Flexbox>
+        {content.map((item) => (
+          <Flexbox
+            className={styles.container}
+            distribution={'space-between'}
+            horizontal
+            key={item.link}
+            padding={12}
+          >
+            <Flexbox>
+              <Link className={styles.link} href={item.link!} target={'_blank'}>
+                <Flexbox>
+                  <Flexbox align={'center'} gap={12} horizontal>
+                    {item.favicon && (
+                      <img
+                        alt={item.title || item.link}
+                        className={styles.favicon}
+                        height={24}
+                        src={item.favicon}
+                        width={24}
+                      />
+                    )}
+                    <Flexbox>
+                      <Flexbox className={styles.desc}>{item.source}</Flexbox>
+                      <Flexbox className={styles.displayLink}>{item.displayed_link}</Flexbox>
+                    </Flexbox>
+                  </Flexbox>
+                  <Flexbox className={styles.title}>{item.title}</Flexbox>
+                </Flexbox>
+              </Link>
+              <Flexbox className={styles.desc}>
+                {item.date ? `${item.date} - ${item.content}` : item.content}
+              </Flexbox>
+            </Flexbox>
+          </Flexbox>
+        ))}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+export default Render;

src/plugins/searchEngine/runner.ts

@@ -30,6 +30,8 @@ const fetchResult: PluginRunner<{ keywords: string }, Result> = async ({ keyword
   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,

src/plugins/searchEngine/type.ts

@@ -1,11 +1,13 @@
 export type OrganicResults = OrganicResult[];
 
 export interface SearchItem {
-  content?: string;
+  content: string;
   date?: string;
-  link?: string;
+  displayed_link?: string;
+  favicon?: string;
+  link: string;
   source?: string;
-  title?: string;
+  title: string;
 }
 export type Result = SearchItem[];