schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add prettier-plugin-tailwindcss

Browse Source
This commit is contained in:
moonrailgun 2024-03-23 00:45:21 +08:00
parent 16e0cb0f11
commit 11fd1a616b
50 changed files with 214 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierignore Normal file
View File

@ -0,0 +1 @@
src/client/routeTree.gen.ts

3
.prettierrc.json
View File

@ -7,5 +7,6 @@
"trailingComma": "es5", "trailingComma": "es5",
"bracketSpacing": true, "bracketSpacing": true,
"arrowParens": "always", "arrowParens": "always",
"jsxBracketSameLine": false "jsxBracketSameLine": false,
"plugins": ["prettier-plugin-tailwindcss"]
} }

1
package.json
View File

@ -30,6 +30,7 @@
"concurrently": "^8.2.2", "concurrently": "^8.2.2",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"fs-extra": "^11.2.0", "fs-extra": "^11.2.0",
"prettier-plugin-tailwindcss": "^0.5.12",
"release-it": "^17.0.1", "release-it": "^17.0.1",
"tar": "^6.1.15", "tar": "^6.1.15",
"ts-node": "^10.9.1", "ts-node": "^10.9.1",

142
pnpm-lock.yaml
View File

@ -42,6 +42,9 @@ importers:
fs-extra: fs-extra:
specifier: ^11.2.0 specifier: ^11.2.0
version: 11.2.0 version: 11.2.0
prettier-plugin-tailwindcss:
specifier: ^0.5.12
version: 0.5.12(prettier@3.2.5)
release-it: release-it:
specifier: ^17.0.1 specifier: ^17.0.1
version: 17.0.1(typescript@5.2.2) version: 17.0.1(typescript@5.2.2)
@ -515,7 +518,7 @@ importers:
version: 3.3.5(ts-node@10.9.1) version: 3.3.5(ts-node@10.9.1)
ts-node: ts-node:
specifier: ^10.9.1 specifier: ^10.9.1
version: 10.9.1(@types/node@20.11.24)(typescript@4.7.4) version: 10.9.1(@types/node@18.17.12)(typescript@4.7.4)
typescript: typescript:
specifier: ^4.7.4 specifier: ^4.7.4
version: 4.7.4 version: 4.7.4
@ -6133,7 +6136,7 @@ packages:
peerDependencies: peerDependencies:
react: '*' react: '*'
dependencies: dependencies:
'@types/react': 18.2.21 '@types/react': 18.2.61
prop-types: 15.8.1 prop-types: 15.8.1
react: 17.0.2 react: 17.0.2
@ -9781,12 +9784,6 @@ packages:
/@types/node@18.17.12: /@types/node@18.17.12:
resolution: {integrity: sha512-d6xjC9fJ/nSnfDeU0AMDsaJyb1iHsqCSOdi84w4u+SlN/UgQdY5tRhpMzaFYsI4mnpvgTivEaQd0yOUhAtOnEQ==} resolution: {integrity: sha512-d6xjC9fJ/nSnfDeU0AMDsaJyb1iHsqCSOdi84w4u+SlN/UgQdY5tRhpMzaFYsI4mnpvgTivEaQd0yOUhAtOnEQ==}
/@types/node@20.11.24:
resolution: {integrity: sha512-Kza43ewS3xoLgCEpQrsT+xRo/EJej1y0kVYGiLFE1NEODXGzTfwiC6tXTLMQskn1X4/Rjlh0MQUvx9W+L9long==}
dependencies:
undici-types: 5.26.5
dev: true
/@types/nodemailer@6.4.11: /@types/nodemailer@6.4.11:
resolution: {integrity: sha512-Ld2c0frwpGT4VseuoeboCXQ7UJIkK3X7Lx/4YsZEiUHtHsthWAOCYtf6PAiLhMtfwV0cWJRabLBS3+LD8x6Nrw==} resolution: {integrity: sha512-Ld2c0frwpGT4VseuoeboCXQ7UJIkK3X7Lx/4YsZEiUHtHsthWAOCYtf6PAiLhMtfwV0cWJRabLBS3+LD8x6Nrw==}
dependencies: dependencies:
@ -9891,7 +9888,7 @@ packages:
resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==} resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
dependencies: dependencies:
'@types/history': 4.7.11 '@types/history': 4.7.11
'@types/react': 18.2.21 '@types/react': 18.2.61
/@types/react-slick@0.23.11: /@types/react-slick@0.23.11:
resolution: {integrity: sha512-52AbNhYN7u0ATqAUvap2MXNG3znUsJslAWgebUHrovvnJ6EG6oic+TZyC82XiwwvijRMyL2V0C2wPJbzsSwllw==} resolution: {integrity: sha512-52AbNhYN7u0ATqAUvap2MXNG3znUsJslAWgebUHrovvnJ6EG6oic+TZyC82XiwwvijRMyL2V0C2wPJbzsSwllw==}
@ -20048,12 +20045,73 @@ packages:
engines: {node: '>=4'} engines: {node: '>=4'}
dev: false dev: false
/prettier-plugin-tailwindcss@0.5.12(prettier@3.2.5):
resolution: {integrity: sha512-o74kiDBVE73oHW+pdkFSluHBL3cYEvru5YgEqNkBMFF7Cjv+w1vI565lTlfoJT4VLWDe0FMtZ7FkE/7a4pMXSQ==}
engines: {node: '>=14.21.3'}
peerDependencies:
'@ianvs/prettier-plugin-sort-imports': '*'
'@prettier/plugin-pug': '*'
'@shopify/prettier-plugin-liquid': '*'
'@trivago/prettier-plugin-sort-imports': '*'
prettier: ^3.0
prettier-plugin-astro: '*'
prettier-plugin-css-order: '*'
prettier-plugin-import-sort: '*'
prettier-plugin-jsdoc: '*'
prettier-plugin-marko: '*'
prettier-plugin-organize-attributes: '*'
prettier-plugin-organize-imports: '*'
prettier-plugin-sort-imports: '*'
prettier-plugin-style-order: '*'
prettier-plugin-svelte: '*'
prettier-plugin-twig-melody: '*'
peerDependenciesMeta:
'@ianvs/prettier-plugin-sort-imports':
optional: true
'@prettier/plugin-pug':
optional: true
'@shopify/prettier-plugin-liquid':
optional: true
'@trivago/prettier-plugin-sort-imports':
optional: true
prettier-plugin-astro:
optional: true
prettier-plugin-css-order:
optional: true
prettier-plugin-import-sort:
optional: true
prettier-plugin-jsdoc:
optional: true
prettier-plugin-marko:
optional: true
prettier-plugin-organize-attributes:
optional: true
prettier-plugin-organize-imports:
optional: true
prettier-plugin-sort-imports:
optional: true
prettier-plugin-style-order:
optional: true
prettier-plugin-svelte:
optional: true
prettier-plugin-twig-melody:
optional: true
dependencies:
prettier: 3.2.5
dev: true
/prettier@2.8.8: /prettier@2.8.8:
resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
engines: {node: '>=10.13.0'} engines: {node: '>=10.13.0'}
hasBin: true hasBin: true
dev: true dev: true
/prettier@3.2.5:
resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
engines: {node: '>=14'}
hasBin: true
dev: true
/pretty-error@4.0.0: /pretty-error@4.0.0:
resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==} resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==}
dependencies: dependencies:
@ -24317,6 +24375,37 @@ packages:
code-block-writer: 12.0.0 code-block-writer: 12.0.0
dev: true dev: true
/ts-node@10.9.1(@types/node@18.17.12)(typescript@4.7.4):
resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
hasBin: true
peerDependencies:
'@swc/core': '>=1.2.50'
'@swc/wasm': '>=1.2.50'
'@types/node': '*'
typescript: '>=2.7'
peerDependenciesMeta:
'@swc/core':
optional: true
'@swc/wasm':
optional: true
dependencies:
'@cspotcode/source-map-support': 0.8.1
'@tsconfig/node10': 1.0.9
'@tsconfig/node12': 1.0.11
'@tsconfig/node14': 1.0.3
'@tsconfig/node16': 1.0.4
'@types/node': 18.17.12
acorn: 8.11.3
acorn-walk: 8.3.2
arg: 4.1.3
create-require: 1.1.1
diff: 4.0.2
make-error: 1.3.6
typescript: 4.7.4
v8-compile-cache-lib: 3.0.1
yn: 3.1.1
dev: true
/ts-node@10.9.1(@types/node@18.17.12)(typescript@5.2.2): /ts-node@10.9.1(@types/node@18.17.12)(typescript@5.2.2):
resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==} resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
hasBin: true hasBin: true
@ -24379,37 +24468,6 @@ packages:
yn: 3.1.1 yn: 3.1.1
dev: false dev: false
/ts-node@10.9.1(@types/node@20.11.24)(typescript@4.7.4):
resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
hasBin: true
peerDependencies:
'@swc/core': '>=1.2.50'
'@swc/wasm': '>=1.2.50'
'@types/node': '*'
typescript: '>=2.7'
peerDependenciesMeta:
'@swc/core':
optional: true
'@swc/wasm':
optional: true
dependencies:
'@cspotcode/source-map-support': 0.8.1
'@tsconfig/node10': 1.0.9
'@tsconfig/node12': 1.0.11
'@tsconfig/node14': 1.0.3
'@tsconfig/node16': 1.0.4
'@types/node': 20.11.24
acorn: 8.11.3
acorn-walk: 8.3.2
arg: 4.1.3
create-require: 1.1.1
diff: 4.0.2
make-error: 1.3.6
typescript: 4.7.4
v8-compile-cache-lib: 3.0.1
yn: 3.1.1
dev: true
/ts-pattern@4.3.0: /ts-pattern@4.3.0:
resolution: {integrity: sha512-pefrkcd4lmIVR0LA49Imjf9DYLK8vtWhqBPA3Ya1ir8xCW0O2yjL9dsCVvI7pCodLC5q7smNpEtDR2yVulQxOg==} resolution: {integrity: sha512-pefrkcd4lmIVR0LA49Imjf9DYLK8vtWhqBPA3Ya1ir8xCW0O2yjL9dsCVvI7pCodLC5q7smNpEtDR2yVulQxOg==}
dev: true dev: true
@ -24624,10 +24682,6 @@ packages:
resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==} resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
dev: true dev: true
/undici-types@5.26.5:
resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
dev: true
/unenv@1.7.4: /unenv@1.7.4:
resolution: {integrity: sha512-fjYsXYi30It0YCQYqLOcT6fHfMXsBr2hw9XC7ycf8rTG7Xxpe3ZssiqUnD0khrjiZEmkBXWLwm42yCSCH46fMw==} resolution: {integrity: sha512-fjYsXYi30It0YCQYqLOcT6fHfMXsBr2hw9XC7ycf8rTG7Xxpe3ZssiqUnD0khrjiZEmkBXWLwm42yCSCH46fMw==}
dependencies: dependencies:

2
src/client/api/socketio.ts
View File

@ -117,7 +117,7 @@ interface UseSocketSubscribeListOptions<K, T> {
const defaultFilter = () => true; const defaultFilter = () => true;
export function useSocketSubscribeList< export function useSocketSubscribeList<
K extends keyof SubscribeEventMap = keyof SubscribeEventMap, K extends keyof SubscribeEventMap = keyof SubscribeEventMap,
T = SubscribeEventData<K> T = SubscribeEventData<K>,
>(name: K, options: UseSocketSubscribeListOptions<K, T> = {}): T[] { >(name: K, options: UseSocketSubscribeListOptions<K, T> = {}): T[] {
const { filter = defaultFilter } = options; const { filter = defaultFilter } = options;
const { subscribe } = useSocket(); const { subscribe } = useSocket();

2
src/client/components/DateFilter.tsx
View File

@ -115,7 +115,7 @@ export const DateFilter: React.FC<DateFilterProps> = React.memo((props) => {
{label} {label}
<DownOutlined <DownOutlined
className={clsx( className={clsx(
'transition-transform scale-y-75', 'scale-y-75 transition-transform',
showDropdown ? 'rotate-180' : 'rotate-0' showDropdown ? 'rotate-180' : 'rotate-0'
)} )}
/> />

2
src/client/components/EditableText.tsx
View File

@ -23,7 +23,7 @@ export const EditableText: React.FC<EditableTextProps> = React.memo((props) => {
<Input <Input
className={clsx( className={clsx(
props.className, props.className,
'border-0 p-0 outline-0 !shadow-none rounded-none' 'rounded-none border-0 p-0 !shadow-none outline-0'
)} )}
value={text} value={text}
onChange={(e) => setText(e.target.value)} onChange={(e) => setText(e.target.value)}

6
src/client/components/HealthBar.tsx
View File

@ -27,10 +27,10 @@ export const HealthBar: React.FC<HealthBarProps> = React.memo((props) => {
key={i} key={i}
title={beat.title} title={beat.title}
className={clsx( className={clsx(
'rounded-full hover:scale-150 transition-transform', 'rounded-full transition-transform hover:scale-150',
{ {
'w-[5px] h-4': size === 'small', 'h-4 w-[5px]': size === 'small',
'w-2 h-8': size === 'large', 'h-8 w-2': size === 'large',
}, },
{ {
'bg-green-500': beat.status === 'health', 'bg-green-500': beat.status === 'health',

2
src/client/components/LanguageSelector.tsx
View File

@ -65,7 +65,7 @@ LanguageSelector.displayName = 'LanguageSelector';
export const CountryFlag: React.FC<{ code: string }> = React.memo((props) => { export const CountryFlag: React.FC<{ code: string }> = React.memo((props) => {
return ( return (
<img <img
className="w-[27px] h-[18px] ml-6" className="ml-6 h-[18px] w-[27px]"
src={`/locales/${props.code}/flag.png`} src={`/locales/${props.code}/flag.png`}
/> />
); );

8
src/client/components/MetricCard.tsx
View File

@ -29,8 +29,8 @@ export const MetricCard: React.FC<MetricCardProps> = React.memo((props) => {
); );
return ( return (
<div className="flex flex-col justify-center min-w-[140px] min-h-[90px]"> <div className="flex min-h-[90px] min-w-[140px] flex-col justify-center">
<div className="flex items-center whitespace-nowrap font-bold text-4xl"> <div className="flex items-center whitespace-nowrap text-4xl font-bold">
{format(value)} {format(value)}
</div> </div>
<div className="flex items-center whitespace-nowrap font-bold"> <div className="flex items-center whitespace-nowrap font-bold">
@ -44,8 +44,8 @@ export const MetricCard: React.FC<MetricCardProps> = React.memo((props) => {
</div> </div>
{showPreviousPeriod && ( {showPreviousPeriod && (
<div className="mt-2 lg:mt-4 opacity-60"> <div className="mt-2 opacity-60 lg:mt-4">
<div className="flex items-center whitespace-nowrap font-bold text-4xl"> <div className="flex items-center whitespace-nowrap text-4xl font-bold">
{format(prev)} {format(prev)}
</div> </div>
<div className="flex items-center whitespace-nowrap font-bold"> <div className="flex items-center whitespace-nowrap font-bold">

6
src/client/components/NavItem.tsx
View File

@ -13,9 +13,9 @@ export const NavItem: React.FC<{
return ( return (
<Link to={props.to}> <Link to={props.to}>
<div <div
className={clsx('leading-[3.75rem] border-b-2', { className={clsx('border-b-2 leading-[3.75rem]', {
'text-gray-950 dark:text-gray-200 border-blue-500': isCurrent, 'border-blue-500 text-gray-950 dark:text-gray-200': isCurrent,
'text-gray-900 dark:text-gray-400 border-transparent hover:text-gray-950 hover:border-blue-500': 'border-transparent text-gray-900 hover:border-blue-500 hover:text-gray-950 dark:text-gray-400':
!isCurrent, !isCurrent,
})} })}
> >

6
src/client/components/PageHeader.tsx
View File

@ -8,12 +8,12 @@ export const PageHeader: React.FC<{
action?: React.ReactNode; action?: React.ReactNode;
}> = React.memo((props) => { }> = React.memo((props) => {
return ( return (
<div className="h-24 flex items-center"> <div className="flex h-24 items-center">
<div className="text-2xl flex-1"> <div className="flex-1 text-2xl">
{props.title} {props.title}
{props.desc && ( {props.desc && (
<Tooltip title={props.desc}> <Tooltip title={props.desc}>
<QuestionCircleOutlined className="text-sm ml-2 cursor-help" /> <QuestionCircleOutlined className="ml-2 cursor-help text-sm" />
</Tooltip> </Tooltip>
)} )}
</div> </div>

2
src/client/components/TimeEventChart.tsx
View File

@ -37,7 +37,7 @@ export const TimeEventChart: React.FC<{
formatter: (text) => formatDateWithUnit(text, props.unit), formatter: (text) => formatDateWithUnit(text, props.unit),
}, },
}, },
} satisfies ColumnConfig), }) satisfies ColumnConfig,
[props.data, props.unit] [props.data, props.unit]
); );

2
src/client/components/dashboard/AddButton.tsx
View File

@ -154,7 +154,7 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
<span>{t('Add')}</span> <span>{t('Add')}</span>
<DownOutlined <DownOutlined
className={clsx( className={clsx(
'transition-transform scale-y-75', 'scale-y-75 transition-transform',
open && 'rotate-180' open && 'rotate-180'
)} )}
/> />

2
src/client/components/dashboard/Dashboard.tsx
View File

@ -51,7 +51,7 @@ export const Dashboard: React.FC = React.memo(() => {
<div className="py-4"> <div className="py-4">
<div <div
className={clsx( className={clsx(
'flex gap-2 justify-end bg-white dark:bg-gray-900 py-2', 'flex justify-end gap-2 bg-white py-2 dark:bg-gray-900',
isEditMode && 'sticky top-0 z-10' isEditMode && 'sticky top-0 z-10'
)} )}
> >

2
src/client/components/modals/NotificationInfo/index.tsx
View File

@ -104,7 +104,7 @@ export const NotificationInfoModal: React.FC<NotificationInfoModalProps> =
</div> </div>
} }
> >
<div className="overflow-y-auto max-h-[80vh]"> <div className="max-h-[80vh] overflow-y-auto">
<Form <Form
preserve={false} preserve={false}
form={form} form={form}

4
src/client/components/monitor/MonitorEventList.tsx
View File

@ -35,10 +35,10 @@ export const MonitorEventList: React.FC<MonitorEventListProps> = React.memo(
navigate(`/monitor/${item.monitorId}`); navigate(`/monitor/${item.monitorId}`);
}} }}
> >
<div className="flex items-center w-full gap-2"> <div className="flex w-full items-center gap-2">
<div <div
className={clsx( className={clsx(
'min-w-[62px] py-1 px-2 rounded-full text-white inline-block text-center', 'inline-block min-w-[62px] rounded-full px-2 py-1 text-center text-white',
item.type === 'UP' item.type === 'UP'
? 'bg-green-400' ? 'bg-green-400'
: item.type === 'DOWN' : item.type === 'DOWN'

8
src/client/components/monitor/MonitorHealthBar.tsx
View File

@ -87,21 +87,21 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
}); });
return ( return (
<div className="flex justify-between items-center"> <div className="flex items-center justify-between">
<HealthBar size={size} beats={beats} /> <HealthBar size={size} beats={beats} />
{showCurrentStatus && ( {showCurrentStatus && (
<> <>
{last(beats)?.status === 'health' ? ( {last(beats)?.status === 'health' ? (
<div className="bg-green-500 text-white px-4 py-1 rounded-full text-lg font-bold"> <div className="rounded-full bg-green-500 px-4 py-1 text-lg font-bold text-white">
{t('UP')} {t('UP')}
</div> </div>
) : last(beats)?.status === 'error' ? ( ) : last(beats)?.status === 'error' ? (
<div className="bg-red-600 text-white px-4 py-1 rounded-full text-lg font-bold"> <div className="rounded-full bg-red-600 px-4 py-1 text-lg font-bold text-white">
{t('DOWN')} {t('DOWN')}
</div> </div>
) : ( ) : (
<div className="bg-gray-400 text-white px-4 py-1 rounded-full text-lg font-bold"> <div className="rounded-full bg-gray-400 px-4 py-1 text-lg font-bold text-white">
{t('NONE')} {t('NONE')}
</div> </div>
)} )}

8
src/client/components/monitor/MonitorInfo.tsx
View File

@ -165,15 +165,15 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
} }
return ( return (
<div className="w-full h-full overflow-auto"> <div className="h-full w-full overflow-auto">
<Spin spinning={isLoading}> <Spin spinning={isLoading}>
<Space className="w-full" direction="vertical"> <Space className="w-full" direction="vertical">
<div className="flex justify-between"> <div className="flex justify-between">
<Space direction="vertical"> <Space direction="vertical">
<div className="text-2xl flex items-center gap-2"> <div className="flex items-center gap-2 text-2xl">
<span>{monitorInfo.name}</span> <span>{monitorInfo.name}</span>
{monitorInfo.active === false && ( {monitorInfo.active === false && (
<div className="bg-red-500 rounded-full px-2 py-0.5 text-white text-xs"> <div className="rounded-full bg-red-500 px-2 py-0.5 text-xs text-white">
{t('Stopped')} {t('Stopped')}
</div> </div>
)} )}
@ -187,7 +187,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
</div> </div>
</Space> </Space>
<div className="text-black dark:text-gray-200 text-opacity-75"> <div className="text-black text-opacity-75 dark:text-gray-200">
{t('Monitored for {{dayNum}} days', { {t('Monitored for {{dayNum}} days', {
dayNum: dayjs().diff(dayjs(monitorInfo.createdAt), 'days'), dayNum: dayjs().diff(dayjs(monitorInfo.createdAt), 'days'),
})} })}

4
src/client/components/monitor/MonitorListItem.tsx
View File

@ -70,7 +70,7 @@ export const MonitorListItem: React.FC<{
<div <div
className={clsx( className={clsx(
className, className,
'flex rounded-lg py-3 px-4 mb-1 bg-green-500 bg-opacity-0 hover:bg-opacity-10 items-center', 'mb-1 flex items-center rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10',
onClick && 'cursor-pointer' onClick && 'cursor-pointer'
)} )}
onClick={onClick} onClick={onClick}
@ -78,7 +78,7 @@ export const MonitorListItem: React.FC<{
<div> <div>
<span <span
className={clsx( className={clsx(
'min-w-[62px] p-0.5 rounded-full text-white inline-block text-center', 'inline-block min-w-[62px] rounded-full p-0.5 text-center text-white',
upPercent === 100 ? 'bg-green-400' : 'bg-amber-400' upPercent === 100 ? 'bg-green-400' : 'bg-amber-400'
)} )}
> >

2
src/client/components/monitor/MonitorStatsBlock.tsx
View File

@ -9,7 +9,7 @@ export const MonitorStatsBlock: React.FC<MonitorStatsBlockProps> = React.memo(
(props) => { (props) => {
return ( return (
<div> <div>
<div className="font-bold mb-0.5">{props.title}</div> <div className="mb-0.5 font-bold">{props.title}</div>
<div className="text-gray-500">{props.desc}</div> <div className="text-gray-500">{props.desc}</div>
<div>{props.text}</div> <div>{props.text}</div>
</div> </div>

8
src/client/components/monitor/StatusPage/EditForm.tsx
View File

@ -75,7 +75,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
return ( return (
<> <>
<Form.Item label={t('Monitors')}> <Form.Item label={t('Monitors')}>
<div className="flex flex-col gap-2 mb-2"> <div className="mb-2 flex flex-col gap-2">
{fields.map((field, index) => ( {fields.map((field, index) => (
// monitor item // monitor item
<> <>
@ -95,7 +95,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
<MonitorPicker /> <MonitorPicker />
</Form.Item> </Form.Item>
<div className="flex item-center"> <div className="item-center flex">
<div className="flex-1"> <div className="flex-1">
<Form.Item <Form.Item
name={[field.name, 'showCurrent']} name={[field.name, 'showCurrent']}
@ -105,13 +105,13 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
<Switch size="small" /> <Switch size="small" />
</Form.Item> </Form.Item>
<span className="text-sm align-middle ml-1"> <span className="ml-1 align-middle text-sm">
{t('Show Current Response')} {t('Show Current Response')}
</span> </span>
</div> </div>
<MinusCircleOutlined <MinusCircleOutlined
className="text-lg mt-1.5" className="mt-1.5 text-lg"
onClick={() => remove(field.name)} onClick={() => remove(field.name)}
/> />
</div> </div>

2
src/client/components/monitor/StatusPage/Services.tsx
View File

@ -29,7 +29,7 @@ export const StatusPageServices: React.FC<StatusPageServicesProps> = React.memo(
} }
return ( return (
<div className="p-2.5 flex flex-col gap-4 rounded-md border border-gray-200 dark:border-gray-700"> <div className="flex flex-col gap-4 rounded-md border border-gray-200 p-2.5 dark:border-gray-700">
{list.length > 0 ? ( {list.length > 0 ? (
list.map((item) => ( list.map((item) => (
<MonitorListItem <MonitorListItem

10
src/client/components/monitor/StatusPage/index.tsx
View File

@ -64,9 +64,9 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
); );
return ( return (
<div className="w-full h-full flex"> <div className="flex h-full w-full">
{editMode && ( {editMode && (
<div className="w-1/3 overflow-auto py-8 px-4 border-r border-gray-300 dark:border-gray-600"> <div className="w-1/3 overflow-auto border-r border-gray-300 px-4 py-8 dark:border-gray-600">
<MonitorStatusPageEditForm <MonitorStatusPageEditForm
isLoading={loading} isLoading={loading}
initialValues={info ?? {}} initialValues={info ?? {}}
@ -77,12 +77,12 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
)} )}
<div <div
className={clsx( className={clsx(
'mx-auto py-8 px-4 overflow-auto', 'mx-auto overflow-auto px-4 py-8',
!editMode ? 'w-4/5' : 'w-2/3' !editMode ? 'w-4/5' : 'w-2/3'
)} )}
> >
<div className="flex"> <div className="flex">
<div className="text-2xl mb-4 flex-1">{info?.title}</div> <div className="mb-4 flex-1 text-2xl">{info?.title}</div>
<ColorSchemeSwitcher /> <ColorSchemeSwitcher />
</div> </div>
@ -99,7 +99,7 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
</div> </div>
)} )}
<div className="text-lg mb-2">{t('Services')}</div> <div className="mb-2 text-lg">{t('Services')}</div>
{info && ( {info && (
<StatusPageServices <StatusPageServices

2
src/client/components/telemetry/TelemetryList.tsx
View File

@ -216,7 +216,7 @@ const TelemetryListTable: React.FC<{
width: 240, width: 240,
render: (_, record) => { render: (_, record) => {
return ( return (
<div className="flex gap-2 justify-end"> <div className="flex justify-end gap-2">
<Button <Button
icon={<CodeOutlined />} icon={<CodeOutlined />}
onClick={() => props.onShowUsage(record)} onClick={() => props.onShowUsage(record)}

4
src/client/components/telemetry/TelemetryMetricsTable.tsx
View File

@ -51,9 +51,9 @@ export const TelemetryMetricsTable: React.FC<MetricsTableProps> = React.memo(
return ( return (
<div className="flex"> <div className="flex">
<div className="w-12 text-right">{formatNumber(val)}</div> <div className="w-12 text-right">{formatNumber(val)}</div>
<div className="inline-block w-12 relative border-l ml-1 px-1"> <div className="relative ml-1 inline-block w-12 border-l px-1">
<div <div
className="bg-blue-300 absolute h-full bg-opacity-25 left-0 top-0 pointer-events-none" className="pointer-events-none absolute left-0 top-0 h-full bg-blue-300 bg-opacity-25"
style={{ width: `${percent}%` }} style={{ width: `${percent}%` }}
/> />
<span>{percent.toFixed(0)}%</span> <span>{percent.toFixed(0)}%</span>

8
src/client/components/telemetry/TelemetryOverview.tsx
View File

@ -85,17 +85,17 @@ export const TelemetryOverview: React.FC<{
return ( return (
<Spin spinning={loading}> <Spin spinning={loading}>
<div className="flex"> <div className="flex">
<div className="flex flex-1 text-2xl font-bold items-center"> <div className="flex flex-1 items-center text-2xl font-bold">
<span className="mr-2">{info?.name}</span> <span className="mr-2">{info?.name}</span>
</div> </div>
<div>{actions}</div> <div>{actions}</div>
</div> </div>
<div className="flex mb-10 flex-wrap justify-between"> <div className="mb-10 flex flex-wrap justify-between">
<div className="flex-1">{stats && <MetricsBar stats={stats} />}</div> <div className="flex-1">{stats && <MetricsBar stats={stats} />}</div>
<div className="flex items-center gap-2 justify-end flex-wrap w-full lg:w-1/3"> <div className="flex w-full flex-wrap items-center justify-end gap-2 lg:w-1/3">
<div className="mr-2"> <div className="mr-2">
<Switch <Switch
checked={showPreviousPeriod} checked={showPreviousPeriod}
@ -137,7 +137,7 @@ const MetricsBar: React.FC<{
const { pageviews, uniques } = props.stats || {}; const { pageviews, uniques } = props.stats || {};
return ( return (
<div className="flex gap-5 flex-wrap w-full"> <div className="flex w-full flex-wrap gap-5">
<MetricCard <MetricCard
label={t('views')} label={t('views')}
value={pageviews.value} value={pageviews.value}

4
src/client/components/website/WebsiteInfo.tsx
View File

@ -79,8 +79,8 @@ export const WebsiteInfo: React.FC = React.memo(() => {
return ( return (
<div> <div>
<div className="h-24 flex items-center"> <div className="flex h-24 items-center">
<div className="text-2xl flex-1">{t('Website Info')}</div> <div className="flex-1 text-2xl">{t('Website Info')}</div>
</div> </div>
<div> <div>

4
src/client/components/website/WebsiteList.tsx
View File

@ -129,7 +129,7 @@ const WebsiteListTable: React.FC<{ workspaceId: string }> = React.memo(
const trackScript = `<script async defer src="${location.origin}/tracker.js" data-website-id="${record.id}"></script>`; const trackScript = `<script async defer src="${location.origin}/tracker.js" data-website-id="${record.id}"></script>`;
return ( return (
<div className="flex gap-2 justify-end"> <div className="flex justify-end gap-2">
<ModalButton <ModalButton
buttonProps={{ buttonProps={{
icon: <CodeOutlined />, icon: <CodeOutlined />,
@ -147,7 +147,7 @@ const WebsiteListTable: React.FC<{ workspaceId: string }> = React.memo(
format: 'text/plain', format: 'text/plain',
text: trackScript, text: trackScript,
}} }}
className="h-[96px] flex p-2 rounded bg-black bg-opacity-5 border border-black border-opacity-10 overflow-auto" className="flex h-[96px] overflow-auto rounded border border-black border-opacity-10 bg-black bg-opacity-5 p-2"
> >
<span>{trackScript}</span> <span>{trackScript}</span>
</Typography.Paragraph> </Typography.Paragraph>

4
src/client/components/website/WebsiteMetricsTable.tsx
View File

@ -59,9 +59,9 @@ export const WebsiteMetricsTable: React.FC<MetricsTableProps> = React.memo(
return ( return (
<div className="flex"> <div className="flex">
<div className="w-12 text-right">{formatNumber(val)}</div> <div className="w-12 text-right">{formatNumber(val)}</div>
<div className="inline-block w-12 relative border-l ml-1 px-1"> <div className="relative ml-1 inline-block w-12 border-l px-1">
<div <div
className="bg-blue-300 absolute h-full bg-opacity-25 left-0 top-0 pointer-events-none" className="pointer-events-none absolute left-0 top-0 h-full bg-blue-300 bg-opacity-25"
style={{ width: `${percent}%` }} style={{ width: `${percent}%` }}
/> />
<span>{percent.toFixed(0)}%</span> <span>{percent.toFixed(0)}%</span>

2
src/client/components/website/WebsiteOnlineCount.tsx
View File

@ -17,7 +17,7 @@ export const WebsiteOnlineCount: React.FC<{
if (typeof count === 'number' && count > 0) { if (typeof count === 'number' && count > 0) {
return ( return (
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="w-2.5 h-2.5 rounded-full bg-green-500" /> <div className="h-2.5 w-2.5 rounded-full bg-green-500" />
<span> <span>
{count} {t('current visitor')} {count} {t('current visitor')}
</span> </span>

8
src/client/components/website/WebsiteOverview.tsx
View File

@ -85,7 +85,7 @@ export const WebsiteOverview: React.FC<{
return ( return (
<Spin spinning={loading}> <Spin spinning={loading}>
<div className="flex"> <div className="flex">
<div className="flex flex-1 text-2xl font-bold items-center"> <div className="flex flex-1 items-center text-2xl font-bold">
<span className="mr-2" title={website.domain ?? ''}> <span className="mr-2" title={website.domain ?? ''}>
{website.name} {website.name}
</span> </span>
@ -113,10 +113,10 @@ export const WebsiteOverview: React.FC<{
<div>{actions}</div> <div>{actions}</div>
</div> </div>
<div className="flex mb-10 flex-wrap justify-between"> <div className="mb-10 flex flex-wrap justify-between">
<div className="flex-1">{stats && <MetricsBar stats={stats} />}</div> <div className="flex-1">{stats && <MetricsBar stats={stats} />}</div>
<div className="flex items-center gap-2 justify-end flex-wrap w-full lg:w-1/3"> <div className="flex w-full flex-wrap items-center justify-end gap-2 lg:w-1/3">
<div className="mr-2"> <div className="mr-2">
<Switch <Switch
checked={showPreviousPeriod} checked={showPreviousPeriod}
@ -160,7 +160,7 @@ const MetricsBar: React.FC<{
const prevBouncesNum = Math.min(uniques.prev, bounces.prev) / uniques.prev; const prevBouncesNum = Math.min(uniques.prev, bounces.prev) / uniques.prev;
return ( return (
<div className="flex gap-5 flex-wrap w-full"> <div className="flex w-full flex-wrap gap-5">
<MetricCard <MetricCard
label={t('views')} label={t('views')}
value={pageviews.value} value={pageviews.value}

2
src/client/components/website/WebsiteVisitorMap/VisitorLeafletMap.tsx
View File

@ -40,7 +40,7 @@ export const VisitorLeafletMap: React.FC<{
}> = React.memo((props) => { }> = React.memo((props) => {
return ( return (
<MapContainer <MapContainer
className="w-full h-[60vh]" className="h-[60vh] w-full"
center={mapCenter} center={mapCenter}
zoom={2} zoom={2}
minZoom={2} minZoom={2}

2
src/client/hooks/useGlobalRangeDate.tsx
View File

@ -30,7 +30,7 @@ export function useGlobalRangeDate(): {
return { return {
label: ( label: (
<div className="flex gap-2 items-center flex-nowrap"> <div className="flex flex-nowrap items-center gap-2">
<CalendarOutlined /> <CalendarOutlined />
<span> <span>
{`${dayjs(_startDate).format('YYYY-MM-DD HH:mm')} - ${dayjs( {`${dayjs(_startDate).format('YYYY-MM-DD HH:mm')} - ${dayjs(

6
src/client/index.css
View File

@ -19,9 +19,11 @@ a {
text-decoration: none; text-decoration: none;
} }
#root, .App { #root,
.App {
height: 100%; height: 100%;
font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial,
sans-serif;
} }
.App.dark { .App.dark {

2
src/client/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

16
src/client/pages/Layout.tsx
View File

@ -80,9 +80,9 @@ export const Layout: React.FC = React.memo(() => {
); );
return ( return (
<div className="flex flex-col h-full dark:bg-gray-900 dark:text-gray-300"> <div className="flex h-full flex-col dark:bg-gray-900 dark:text-gray-300">
{showHeader && ( {showHeader && (
<div className="flex items-center bg-gray-100 dark:bg-gray-800 px-4 sticky top-0 z-20 h-[62px]"> <div className="sticky top-0 z-20 flex h-[62px] items-center bg-gray-100 px-4 dark:bg-gray-800">
{isMobile && ( {isMobile && (
<> <>
<Button <Button
@ -96,7 +96,7 @@ export const Layout: React.FC = React.memo(() => {
placement="left" placement="left"
closeIcon={false} closeIcon={false}
> >
<div className="flex flex-col h-full pt-12"> <div className="flex h-full flex-col pt-12">
<div className="flex-1"> <div className="flex-1">
<MobileNavItem <MobileNavItem
to="/dashboard" to="/dashboard"
@ -142,8 +142,8 @@ export const Layout: React.FC = React.memo(() => {
</> </>
)} )}
<div className="px-2 mr-10 font-bold flex items-center"> <div className="mr-10 flex items-center px-2 font-bold">
<img src="/icon.svg" className="w-10 h-10 mr-2" /> <img src="/icon.svg" className="mr-2 h-10 w-10" />
<span className="text-xl dark:text-gray-200">Tianji</span> <span className="text-xl dark:text-gray-200">Tianji</span>
</div> </div>
@ -171,9 +171,9 @@ export const Layout: React.FC = React.memo(() => {
)} )}
</div> </div>
)} )}
<div className="flex-1 w-full overflow-hidden"> <div className="w-full flex-1 overflow-hidden">
<div className="h-full px-1 sm:px-4 overflow-auto"> <div className="h-full overflow-auto px-1 sm:px-4">
<div className="max-w-7xl m-auto"> <div className="m-auto max-w-7xl">
<Outlet /> <Outlet />
</div> </div>
</div> </div>

4
src/client/pages/Login.tsx
View File

@ -26,10 +26,10 @@ export const Login: React.FC = React.memo(() => {
const { allowRegister } = useGlobalConfig(); const { allowRegister } = useGlobalConfig();
return ( return (
<div className="w-full h-full flex justify-center items-center dark:bg-gray-900"> <div className="flex h-full w-full items-center justify-center dark:bg-gray-900">
<div className="w-80 -translate-y-1/4"> <div className="w-80 -translate-y-1/4">
<div className="text-center"> <div className="text-center">
<img className="w-24 h-24" src="/icon.svg" /> <img className="h-24 w-24" src="/icon.svg" />
</div> </div>
<Typography.Title className="text-center" level={2}> <Typography.Title className="text-center" level={2}>
Tianji Tianji

2
src/client/pages/Monitor/Detail.tsx
View File

@ -11,7 +11,7 @@ export const MonitorDetail: React.FC = React.memo(() => {
} }
return ( return (
<div className="px-2 h-full"> <div className="h-full px-2">
<MonitorInfo monitorId={monitorId} /> <MonitorInfo monitorId={monitorId} />
</div> </div>
); );

2
src/client/pages/Monitor/Overview.tsx
View File

@ -14,7 +14,7 @@ export const MonitorOverview: React.FC = React.memo(() => {
return ( return (
<div className="px-2"> <div className="px-2">
<div className="grid gap-4 grid-cols-2"> <div className="grid grid-cols-2 gap-4">
<Card hoverable={true}> <Card hoverable={true}>
<div>{t('Monitors')}</div> <div>{t('Monitors')}</div>
<div className="text-2xl font-semibold">{monitors.length}</div> <div className="text-2xl font-semibold">{monitors.length}</div>

6
src/client/pages/Monitor/index.tsx
View File

@ -15,9 +15,9 @@ export const MonitorPage: React.FC = React.memo(() => {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<div className="h-full flex flex-col"> <div className="flex h-full flex-col">
<div> <div>
<div className="px-4 pt-4 flex gap-4"> <div className="flex gap-4 px-4 pt-4">
<Button <Button
type="primary" type="primary"
size="large" size="large"
@ -34,7 +34,7 @@ export const MonitorPage: React.FC = React.memo(() => {
</Button> </Button>
</div> </div>
</div> </div>
<div className="py-5 flex flex-1 overflow-hidden"> <div className="flex flex-1 overflow-hidden py-5">
<div className="w-5/12 rounded bg-gray-50 dark:bg-gray-800"> <div className="w-5/12 rounded bg-gray-50 dark:bg-gray-800">
<MonitorList /> <MonitorList />
</div> </div>

4
src/client/pages/Register.tsx
View File

@ -25,10 +25,10 @@ export const Register: React.FC = React.memo(() => {
}); });
return ( return (
<div className="w-full h-full flex justify-center items-center"> <div className="flex h-full w-full items-center justify-center">
<div className="w-80 -translate-y-1/4"> <div className="w-80 -translate-y-1/4">
<div className="text-center"> <div className="text-center">
<img className="w-24 h-24" src="/icon.svg" /> <img className="h-24 w-24" src="/icon.svg" />
</div> </div>
<Typography.Title className="text-center" level={2}> <Typography.Title className="text-center" level={2}>
{t('Register Account')} {t('Register Account')}

6
src/client/pages/Servers.tsx
View File

@ -56,8 +56,8 @@ export const Servers: React.FC = React.memo(() => {
return ( return (
<div> <div>
<div className="h-24 flex items-center"> <div className="flex h-24 items-center">
<div className="text-2xl flex-1">{t('Servers')}</div> <div className="flex-1 text-2xl">{t('Servers')}</div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex items-center gap-1 text-gray-500"> <div className="flex items-center gap-1 text-gray-500">
<Switch <Switch
@ -311,7 +311,7 @@ export const InstallScript: React.FC = React.memo(() => {
format: 'text/plain', format: 'text/plain',
text: command, text: command,
}} }}
className="h-[96px] flex p-2 rounded bg-black bg-opacity-5 border border-black border-opacity-10 overflow-auto" className="flex h-[96px] overflow-auto rounded border border-black border-opacity-10 bg-black bg-opacity-5 p-2"
> >
<span>{command}</span> <span>{command}</span>
</Typography.Paragraph> </Typography.Paragraph>

8
src/client/pages/Settings/AuditLog.tsx
View File

@ -59,7 +59,7 @@ export const AuditLog: React.FC = React.memo(() => {
<Card> <Card>
<List> <List>
<div ref={parentRef} className="h-[560px] overflow-auto w-full"> <div ref={parentRef} className="h-[560px] w-full overflow-auto">
{virtualItems.length === 0 && <Empty />} {virtualItems.length === 0 && <Empty />}
<div <div
@ -88,19 +88,19 @@ export const AuditLog: React.FC = React.memo(() => {
t('Nothing more to load') t('Nothing more to load')
) )
) : ( ) : (
<div className="flex items-center overflow-hidden h-7"> <div className="flex h-7 items-center overflow-hidden">
{item.relatedType && ( {item.relatedType && (
<ColorTag label={item.relatedType} /> <ColorTag label={item.relatedType} />
)} )}
<div <div
className="opacity-60 mr-2 text-xs w-9" className="mr-2 w-9 text-xs opacity-60"
title={dayjs(item.createdAt).format( title={dayjs(item.createdAt).format(
'YYYY-MM-DD HH:mm:ss' 'YYYY-MM-DD HH:mm:ss'
)} )}
> >
{dayjs(item.createdAt).format('MM-DD HH:mm')} {dayjs(item.createdAt).format('MM-DD HH:mm')}
</div> </div>
<div className="overflow-auto h-full flex-1"> <div className="h-full flex-1 overflow-auto">
{item.content} {item.content}
</div> </div>
</div> </div>

4
src/client/pages/Settings/Usage.tsx
View File

@ -26,9 +26,9 @@ export const Usage: React.FC = React.memo(() => {
<PageHeader title={t('Usage')} /> <PageHeader title={t('Usage')} />
<Card> <Card>
<div className="text-lg mb-2"> <div className="mb-2 text-lg">
{t('Statistic Date')}: {t('Statistic Date')}:
<span className="font-bold ml-2"> <span className="ml-2 font-bold">
{startDate.format('YYYY/MM/DD')} - {endDate.format('YYYY/MM/DD')} {startDate.format('YYYY/MM/DD')} - {endDate.format('YYYY/MM/DD')}
</span> </span>
</div> </div>

4
src/client/pages/Settings/index.tsx
View File

@ -54,7 +54,7 @@ export const SettingsPage: React.FC = React.memo(() => {
return ( return (
<div className="flex h-full"> <div className="flex h-full">
<div className="w-full md:w-1/6 pt-10"> <div className="w-full pt-10 md:w-1/6">
<Menu <Menu
className="h-full" className="h-full"
onClick={onClick} onClick={onClick}
@ -63,7 +63,7 @@ export const SettingsPage: React.FC = React.memo(() => {
items={items} items={items}
/> />
</div> </div>
<div className="w-full md:w-5/6 py-2 px-4"> <div className="w-full px-4 py-2 md:w-5/6">
<Routes> <Routes>
<Route path="/" element={<WebsiteList />} /> <Route path="/" element={<WebsiteList />} />
<Route path="/websites" element={<WebsiteList />} /> <Route path="/websites" element={<WebsiteList />} />

6
src/client/pages/Telemetry/Detail.tsx
View File

@ -32,7 +32,7 @@ export const TelemetryDetailPage: React.FC = React.memo(() => {
/> />
</Card.Grid> </Card.Grid>
<Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]"> <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
<TelemetryMetricsTable <TelemetryMetricsTable
telemetryId={telemetryId} telemetryId={telemetryId}
type="source" type="source"
@ -42,7 +42,7 @@ export const TelemetryDetailPage: React.FC = React.memo(() => {
/> />
</Card.Grid> </Card.Grid>
<Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]"> <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
<TelemetryMetricsTable <TelemetryMetricsTable
telemetryId={telemetryId} telemetryId={telemetryId}
type="event" type="event"
@ -52,7 +52,7 @@ export const TelemetryDetailPage: React.FC = React.memo(() => {
/> />
</Card.Grid> </Card.Grid>
<Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]"> <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
<TelemetryMetricsTable <TelemetryMetricsTable
telemetryId={telemetryId} telemetryId={telemetryId}
type="country" type="country"

16
src/client/pages/Website/Detail.tsx
View File

@ -44,7 +44,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
<Card.Grid hoverable={false} className="!w-full"> <Card.Grid hoverable={false} className="!w-full">
<WebsiteOverview website={website} showDateFilter={true} /> <WebsiteOverview website={website} showDateFilter={true} />
</Card.Grid> </Card.Grid>
<Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]"> <Card.Grid hoverable={false} className="min-h-[470px] !w-1/2">
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
type="url" type="url"
@ -53,7 +53,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
endAt={endAt} endAt={endAt}
/> />
</Card.Grid> </Card.Grid>
<Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]"> <Card.Grid hoverable={false} className="min-h-[470px] !w-1/2">
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
type="referrer" type="referrer"
@ -62,7 +62,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
endAt={endAt} endAt={endAt}
/> />
</Card.Grid> </Card.Grid>
<Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]"> <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
type="browser" type="browser"
@ -71,7 +71,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
endAt={endAt} endAt={endAt}
/> />
</Card.Grid> </Card.Grid>
<Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]"> <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
type="os" type="os"
@ -80,7 +80,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
endAt={endAt} endAt={endAt}
/> />
</Card.Grid> </Card.Grid>
<Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]"> <Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
type="device" type="device"
@ -89,7 +89,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
endAt={endAt} endAt={endAt}
/> />
</Card.Grid> </Card.Grid>
<Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]"> <Card.Grid hoverable={false} className="min-h-[470px] !w-1/2">
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
type="country" type="country"
@ -99,7 +99,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
/> />
<Button <Button
size="small" size="small"
className="m-auto flex flex-row-reverse items-center mt-1" className="m-auto mt-1 flex flex-row-reverse items-center"
styles={{ icon: { marginRight: 0, marginLeft: 8 } }} styles={{ icon: { marginRight: 0, marginLeft: 8 } }}
icon={<RightOutlined className="m-0" />} icon={<RightOutlined className="m-0" />}
onClick={() => navigate(`/website/${websiteId}/map`)} onClick={() => navigate(`/website/${websiteId}/map`)}
@ -107,7 +107,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
{t('Visitor Map')} {t('Visitor Map')}
</Button> </Button>
</Card.Grid> </Card.Grid>
<Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]"> <Card.Grid hoverable={false} className="min-h-[470px] !w-1/2">
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
type="event" type="event"

2
src/client/pages/Website/Map.tsx
View File

@ -35,7 +35,7 @@ export const WebsiteVisitorMapPage: React.FC = React.memo(() => {
return ( return (
<div className="py-6"> <div className="py-6">
<div className="pb-2 flex items-center justify-between"> <div className="flex items-center justify-between pb-2">
<Button <Button
size="large" size="large"
icon={<LeftOutlined />} icon={<LeftOutlined />}

2
src/client/store/settings.ts
View File

@ -10,7 +10,7 @@ export const useSettingsStore = create<SettingsState>()(
() => () =>
({ ({
colorScheme: 'light' as const, colorScheme: 'light' as const,
} as SettingsState), }) as SettingsState,
{ {
name: 'settings', name: 'settings',
} }