mirror of https://gitee.com/answerdev/answer.git
commit
5a065705bb
|
@ -3,13 +3,14 @@ import { FC } from 'react';
|
||||||
import { base64ToSvg } from '@/utils';
|
import { base64ToSvg } from '@/utils';
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
|
svgClassName?: string;
|
||||||
base64: string | undefined;
|
base64: string | undefined;
|
||||||
}
|
}
|
||||||
const Icon: FC<IProps> = ({ base64 = '' }) => {
|
const Icon: FC<IProps> = ({ base64 = '', svgClassName = '' }) => {
|
||||||
return base64 ? (
|
return base64 ? (
|
||||||
<span
|
<span
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: base64ToSvg(base64),
|
__html: base64ToSvg(base64, svgClassName),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
|
@ -365,7 +365,10 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = (
|
||||||
{fieldState?.errorMsg}
|
{fieldState?.errorMsg}
|
||||||
</Form.Control.Feedback>
|
</Form.Control.Feedback>
|
||||||
{description ? (
|
{description ? (
|
||||||
<Form.Text className="text-muted">{description}</Form.Text>
|
<Form.Text
|
||||||
|
className="text-muted"
|
||||||
|
dangerouslySetInnerHTML={{ __html: description }}
|
||||||
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
);
|
);
|
||||||
|
|
|
@ -310,3 +310,11 @@ img[src=""] {
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
vertical-align: -0.125em;
|
vertical-align: -0.125em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.algoliaSvg {
|
||||||
|
display: inline-block;
|
||||||
|
width: 92px;
|
||||||
|
height: 24px;
|
||||||
|
fill: currentColor;
|
||||||
|
vertical-align: -0.125em;
|
||||||
|
}
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { following } from '@/services';
|
||||||
import { tryNormalLogged } from '@/utils/guard';
|
import { tryNormalLogged } from '@/utils/guard';
|
||||||
import { escapeRemove } from '@/utils';
|
import { escapeRemove } from '@/utils';
|
||||||
import { pathFactory } from '@/router/pathFactory';
|
import { pathFactory } from '@/router/pathFactory';
|
||||||
|
import { PluginRender } from '@/components';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
data;
|
data;
|
||||||
|
@ -35,7 +36,10 @@ const Index: FC<Props> = ({ data }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mb-5">
|
<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>
|
<p>
|
||||||
<span className="text-secondary me-1">{t('keywords')}</span>
|
<span className="text-secondary me-1">{t('keywords')}</span>
|
||||||
{q?.replace(reg, '')}
|
{q?.replace(reg, '')}
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
plugin:
|
||||||
|
algolia:
|
||||||
|
ui:
|
||||||
|
search_by: Search by
|
|
@ -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,
|
||||||
|
});
|
|
@ -0,0 +1,4 @@
|
||||||
|
plugin:
|
||||||
|
algolia:
|
||||||
|
ui:
|
||||||
|
search_by: 搜索提供
|
|
@ -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),
|
||||||
|
};
|
|
@ -0,0 +1,4 @@
|
||||||
|
slug_name: algolia
|
||||||
|
version: 0.0.1
|
||||||
|
link: https://github.com/answerdev/plugins/tree/main/connector/
|
||||||
|
author: Answer.dev
|
|
@ -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,
|
||||||
|
};
|
||||||
|
};
|
|
@ -31,7 +31,7 @@ const Index: FC<Props> = ({ className }) => {
|
||||||
{data?.map((item) => {
|
{data?.map((item) => {
|
||||||
return (
|
return (
|
||||||
<Button variant="outline-secondary" href={item.link} key={item.name}>
|
<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>
|
<span>{t('connect', { auth_name: item.name })}</span>
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|
|
@ -33,7 +33,7 @@ const Index: FC<Props> = ({ className }) => {
|
||||||
className={classnames('w-100', className)}
|
className={classnames('w-100', className)}
|
||||||
variant="outline-secondary"
|
variant="outline-secondary"
|
||||||
href={ucAgent?.agent_info.login_redirect_url}>
|
href={ucAgent?.agent_info.login_redirect_url}>
|
||||||
<SvgIcon base64={ucAgent?.agent_info.icon} />
|
<SvgIcon base64={ucAgent?.agent_info.icon} svgClassName="btnSvg" />
|
||||||
<span>
|
<span>
|
||||||
{t('connect', { auth_name: ucAgent?.agent_info.display_name })}
|
{t('connect', { auth_name: ucAgent?.agent_info.display_name })}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
import Connector from './Connector';
|
import Connector from './Connector';
|
||||||
import UcLogin from './UcLogin';
|
import UcLogin from './UcLogin';
|
||||||
|
import Algolia from './Algolia';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
Connector,
|
Connector,
|
||||||
UcLogin,
|
UcLogin,
|
||||||
|
Algolia,
|
||||||
};
|
};
|
||||||
|
|
|
@ -184,18 +184,20 @@ function diffText(newText: string, oldText?: string): string {
|
||||||
return result.join('');
|
return result.join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
function base64ToSvg(base64: string) {
|
function base64ToSvg(base64: string, svgClassName?: string) {
|
||||||
// base64 to svg xml
|
// base64 to svg xml
|
||||||
const svgxml = atob(base64);
|
const svgxml = atob(base64);
|
||||||
|
|
||||||
// svg add class btnSvg
|
// svg add class
|
||||||
const parser = new DOMParser();
|
const parser = new DOMParser();
|
||||||
const doc = parser.parseFromString(svgxml, 'image/svg+xml');
|
const doc = parser.parseFromString(svgxml, 'image/svg+xml');
|
||||||
const parseError = doc.querySelector('parsererror');
|
const parseError = doc.querySelector('parsererror');
|
||||||
const svg = doc.querySelector('svg');
|
const svg = doc.querySelector('svg');
|
||||||
let str = '';
|
let str = '';
|
||||||
if (svg && !parseError) {
|
if (svg && !parseError) {
|
||||||
svg.classList.add('btnSvg');
|
if (svgClassName) {
|
||||||
|
svg.classList.add(svgClassName);
|
||||||
|
}
|
||||||
svg.classList.add('me-2');
|
svg.classList.add('me-2');
|
||||||
|
|
||||||
// transform svg to string
|
// transform svg to string
|
||||||
|
|
Loading…
Reference in New Issue