perf: improve monitor badge display, add title in copy text

This commit is contained in:
moonrailgun 2024-01-31 01:43:02 +08:00
parent 8ff5db80e2
commit 4a1ea8557a
3 changed files with 9 additions and 6 deletions

View File

@ -6,8 +6,9 @@ import copy from 'copy-to-clipboard';
export const MonitorBadgeView: React.FC<{ export const MonitorBadgeView: React.FC<{
workspaceId: string; workspaceId: string;
monitorId: string; monitorId: string;
monitorName?: string;
}> = React.memo((props) => { }> = React.memo((props) => {
const { workspaceId, monitorId } = props; const { workspaceId, monitorId, monitorName = '' } = props;
const [showDetail, setShowDetail] = useState(false); const [showDetail, setShowDetail] = useState(false);
@ -48,11 +49,13 @@ export const MonitorBadgeView: React.FC<{
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Input <Input
addonBefore="HTML Embed" addonBefore="HTML Embed"
value={`<img src="${url}" />`} value={`<img src="${url}" title="${monitorName}" />`}
addonAfter={ addonAfter={
<div <div
className="cursor-pointer" className="cursor-pointer"
onClick={() => handleCopy(`<img src="${url}" />`)} onClick={() =>
handleCopy(`<img src="${url}" title="${monitorName}" />`)
}
> >
Copy Copy
</div> </div>
@ -61,11 +64,11 @@ export const MonitorBadgeView: React.FC<{
<Input <Input
addonBefore="Markdown" addonBefore="Markdown"
value={`![](${url})`} value={`![${monitorName}](${url})`}
addonAfter={ addonAfter={
<div <div
className="cursor-pointer" className="cursor-pointer"
onClick={() => handleCopy(`![](${url})`)} onClick={() => handleCopy(`![${monitorName}](${url})`)}
> >
Copy Copy
</div> </div>

View File

@ -238,6 +238,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
<MonitorBadgeView <MonitorBadgeView
workspaceId={workspaceId} workspaceId={workspaceId}
monitorId={monitorId} monitorId={monitorId}
monitorName={monitorInfo.name}
/> />
</Modal> </Modal>
</div> </div>

View File

@ -2,7 +2,6 @@ import { MonitorProvider } from './type';
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'; import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
import { logger } from '../../../utils/logger'; import { logger } from '../../../utils/logger';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { prisma } from '../../_client';
import https from 'https'; import https from 'https';
import { saveMonitorStatus } from './_utils'; import { saveMonitorStatus } from './_utils';