Merge pull request #471 from answerdev/feat/1.1.2/ui

Feat/1.1.2/UI

ui/src/components/Icon/svg.tsx

@@ -3,13 +3,14 @@ import { FC } from 'react';
 import { base64ToSvg } from '@/utils';
 
 interface IProps {
+  svgClassName?: string;
   base64: string | undefined;
 }
-const Icon: FC<IProps> = ({ base64 = '' }) => {
+const Icon: FC<IProps> = ({ base64 = '', svgClassName = '' }) => {
   return base64 ? (
     <span
       dangerouslySetInnerHTML={{
-        __html: base64ToSvg(base64),
+        __html: base64ToSvg(base64, svgClassName),
       }}
     />
   ) : null;

ui/src/components/SchemaForm/index.tsx

@@ -365,7 +365,10 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = (
               {fieldState?.errorMsg}
             </Form.Control.Feedback>
             {description ? (
-              <Form.Text className="text-muted">{description}</Form.Text>
+              <Form.Text
+                className="text-muted"
+                dangerouslySetInnerHTML={{ __html: description }}
+              />
             ) : null}
           </Form.Group>
         );

ui/src/index.scss

@@ -310,3 +310,11 @@ img[src=""] {
   fill: currentColor;
   vertical-align: -0.125em;
 }
+
+.algoliaSvg {
+  display: inline-block;
+  width: 92px;
+  height: 24px;
+  fill: currentColor;
+  vertical-align: -0.125em;
+}

ui/src/pages/Search/components/Head/index.tsx

@@ -7,6 +7,7 @@ import { following } from '@/services';
 import { tryNormalLogged } from '@/utils/guard';
 import { escapeRemove } from '@/utils';
 import { pathFactory } from '@/router/pathFactory';
+import { PluginRender } from '@/components';
 
 interface Props {
   data;
@@ -35,7 +36,10 @@ const Index: FC<Props> = ({ data }) => {
 
   return (
     <div className="mb-5">
-      <h3 className="mb-3">{t('title')}</h3>
+      <div className="mb-3 d-flex align-items-center justify-content-between">
+        <h3 className="mb-0">{t('title')}</h3>
+        <PluginRender slug_name="algolia" />
+      </div>
       <p>
         <span className="text-secondary me-1">{t('keywords')}</span>
         {q?.replace(reg, '')}

ui/src/plugins/builtin/Algolia/i18n/en_US.yaml

@@ -0,0 +1,4 @@
+plugin:
+  algolia:
+    ui:
+      search_by: Search by

ui/src/plugins/builtin/Algolia/i18n/index.ts

@@ -0,0 +1,9 @@
+import pluginKit from '@/utils/pluginKit';
+
+import en_US from './en_US.yaml';
+import zh_CN from './zh_CN.yaml';
+
+pluginKit.initI18nResource({
+  en_US,
+  zh_CN,
+});

ui/src/plugins/builtin/Algolia/i18n/zh_CN.yaml

@@ -0,0 +1,4 @@
+plugin:
+  algolia:
+    ui:
+      search_by: 搜索提供

ui/src/plugins/builtin/Algolia/index.tsx

@@ -0,0 +1,35 @@
+import { memo, FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import pluginKit, { PluginInfo } from '@/utils/pluginKit';
+import { SvgIcon } from '@/components';
+
+import info from './info.yaml';
+import { useGetAlgoliaInfo } from './services';
+import './i18n';
+
+const pluginInfo: PluginInfo = {
+  slug_name: info.slug_name,
+};
+
+const Index: FC = () => {
+  const { t } = useTranslation(pluginKit.getTransNs(), {
+    keyPrefix: pluginKit.getTransKeyPrefix(pluginInfo),
+  });
+
+  const { data } = useGetAlgoliaInfo();
+  console.log(data);
+  if (!data?.icon) return null;
+
+  return (
+    <div className="d-flex align-items-center">
+      <span className="small text-secondary me-2">{t('search_by')}</span>
+      <SvgIcon base64={data?.icon} />
+    </div>
+  );
+};
+
+export default {
+  info: pluginInfo,
+  component: memo(Index),
+};

ui/src/plugins/builtin/Algolia/info.yaml

@@ -0,0 +1,4 @@
+slug_name: algolia
+version: 0.0.1
+link: https://github.com/answerdev/plugins/tree/main/connector/
+author:  Answer.dev

ui/src/plugins/builtin/Algolia/services.ts

@@ -0,0 +1,20 @@
+import useSWR from 'swr';
+
+import request from '@/utils/request';
+
+export interface AlgoliaRes {
+  name: string;
+  icon: string;
+}
+
+export const useGetAlgoliaInfo = () => {
+  const { data, error } = useSWR<AlgoliaRes>(
+    '/answer/api/v1/search/desc',
+    request.instance.get,
+  );
+
+  return {
+    data,
+    error,
+  };
+};

ui/src/plugins/builtin/Connector/index.tsx

@@ -31,7 +31,7 @@ const Index: FC<Props> = ({ className }) => {
       {data?.map((item) => {
         return (
           <Button variant="outline-secondary" href={item.link} key={item.name}>
-            <SvgIcon base64={item.icon} />
+            <SvgIcon base64={item.icon} svgClassName="btnSvg" />
             <span>{t('connect', { auth_name: item.name })}</span>
           </Button>
         );

ui/src/plugins/builtin/UcLogin/index.tsx

@@ -33,7 +33,7 @@ const Index: FC<Props> = ({ className }) => {
         className={classnames('w-100', className)}
         variant="outline-secondary"
         href={ucAgent?.agent_info.login_redirect_url}>
-        <SvgIcon base64={ucAgent?.agent_info.icon} />
+        <SvgIcon base64={ucAgent?.agent_info.icon} svgClassName="btnSvg" />
         <span>
           {t('connect', { auth_name: ucAgent?.agent_info.display_name })}
         </span>

ui/src/plugins/builtin/index.ts

@@ -1,7 +1,9 @@
 import Connector from './Connector';
 import UcLogin from './UcLogin';
+import Algolia from './Algolia';
 
 export default {
   Connector,
   UcLogin,
+  Algolia,
 };

ui/src/utils/common.ts

@@ -184,18 +184,20 @@ function diffText(newText: string, oldText?: string): string {
   return result.join('');
 }
 
-function base64ToSvg(base64: string) {
+function base64ToSvg(base64: string, svgClassName?: string) {
   // base64 to svg xml
   const svgxml = atob(base64);
 
-  // svg add class btnSvg
+  // svg add class
   const parser = new DOMParser();
   const doc = parser.parseFromString(svgxml, 'image/svg+xml');
   const parseError = doc.querySelector('parsererror');
   const svg = doc.querySelector('svg');
   let str = '';
   if (svg && !parseError) {
-    svg.classList.add('btnSvg');
+    if (svgClassName) {
+      svg.classList.add(svgClassName);
+    }
     svg.classList.add('me-2');
 
     // transform svg to string