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",
"bracketSpacing": true,
"arrowParens": "always",
"jsxBracketSameLine": false
"jsxBracketSameLine": false,
"plugins": ["prettier-plugin-tailwindcss"]
}

1
package.json
View File

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

142
pnpm-lock.yaml
View File

@ -42,6 +42,9 @@ importers:
fs-extra:
specifier: ^11.2.0
version: 11.2.0
prettier-plugin-tailwindcss:
specifier: ^0.5.12
version: 0.5.12(prettier@3.2.5)
release-it:
specifier: ^17.0.1
version: 17.0.1(typescript@5.2.2)
@ -515,7 +518,7 @@ importers:
version: 3.3.5(ts-node@10.9.1)
ts-node:
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:
specifier: ^4.7.4
version: 4.7.4
@ -6133,7 +6136,7 @@ packages:
peerDependencies:
react: '*'
dependencies:
'@types/react': 18.2.21
'@types/react': 18.2.61
prop-types: 15.8.1
react: 17.0.2
@ -9781,12 +9784,6 @@ packages:
/@types/node@18.17.12:
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:
resolution: {integrity: sha512-Ld2c0frwpGT4VseuoeboCXQ7UJIkK3X7Lx/4YsZEiUHtHsthWAOCYtf6PAiLhMtfwV0cWJRabLBS3+LD8x6Nrw==}
dependencies:
@ -9891,7 +9888,7 @@ packages:
resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
dependencies:
'@types/history': 4.7.11
'@types/react': 18.2.21
'@types/react': 18.2.61
/@types/react-slick@0.23.11:
resolution: {integrity: sha512-52AbNhYN7u0ATqAUvap2MXNG3znUsJslAWgebUHrovvnJ6EG6oic+TZyC82XiwwvijRMyL2V0C2wPJbzsSwllw==}
@ -20048,12 +20045,73 @@ packages:
engines: {node: '>=4'}
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:
resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
engines: {node: '>=10.13.0'}
hasBin: 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:
resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==}
dependencies:
@ -24317,6 +24375,37 @@ packages:
code-block-writer: 12.0.0
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):
resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
hasBin: true
@ -24379,37 +24468,6 @@ packages:
yn: 3.1.1
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:
resolution: {integrity: sha512-pefrkcd4lmIVR0LA49Imjf9DYLK8vtWhqBPA3Ya1ir8xCW0O2yjL9dsCVvI7pCodLC5q7smNpEtDR2yVulQxOg==}
dev: true
@ -24624,10 +24682,6 @@ packages:
resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
dev: true
/undici-types@5.26.5:
resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
dev: true
/unenv@1.7.4:
resolution: {integrity: sha512-fjYsXYi30It0YCQYqLOcT6fHfMXsBr2hw9XC7ycf8rTG7Xxpe3ZssiqUnD0khrjiZEmkBXWLwm42yCSCH46fMw==}
dependencies:

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

@ -117,7 +117,7 @@ interface UseSocketSubscribeListOptions<K, T> {
const defaultFilter = () => true;
export function useSocketSubscribeList<
K extends keyof SubscribeEventMap = keyof SubscribeEventMap,
T = SubscribeEventData<K>
T = SubscribeEventData<K>,
>(name: K, options: UseSocketSubscribeListOptions<K, T> = {}): T[] {
const { filter = defaultFilter } = options;
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}
<DownOutlined
className={clsx(
'transition-transform scale-y-75',
'scale-y-75 transition-transform',
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
className={clsx(
props.className,
'border-0 p-0 outline-0 !shadow-none rounded-none'
'rounded-none border-0 p-0 !shadow-none outline-0'
)}
value={text}
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}
title={beat.title}
className={clsx(
'rounded-full hover:scale-150 transition-transform',
'rounded-full transition-transform hover:scale-150',
{
'w-[5px] h-4': size === 'small',
'w-2 h-8': size === 'large',
'h-4 w-[5px]': size === 'small',
'h-8 w-2': size === 'large',
},
{
'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) => {
return (
<img
className="w-[27px] h-[18px] ml-6"
className="ml-6 h-[18px] w-[27px]"
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 (
<div className="flex flex-col justify-center min-w-[140px] min-h-[90px]">
<div className="flex items-center whitespace-nowrap font-bold text-4xl">
<div className="flex min-h-[90px] min-w-[140px] flex-col justify-center">
<div className="flex items-center whitespace-nowrap text-4xl font-bold">
{format(value)}
</div>
<div className="flex items-center whitespace-nowrap font-bold">
@ -44,8 +44,8 @@ export const MetricCard: React.FC<MetricCardProps> = React.memo((props) => {
</div>
{showPreviousPeriod && (
<div className="mt-2 lg:mt-4 opacity-60">
<div className="flex items-center whitespace-nowrap font-bold text-4xl">
<div className="mt-2 opacity-60 lg:mt-4">
<div className="flex items-center whitespace-nowrap text-4xl font-bold">
{format(prev)}
</div>
<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 (
<Link to={props.to}>
<div
className={clsx('leading-[3.75rem] border-b-2', {
'text-gray-950 dark:text-gray-200 border-blue-500': isCurrent,
'text-gray-900 dark:text-gray-400 border-transparent hover:text-gray-950 hover:border-blue-500':
className={clsx('border-b-2 leading-[3.75rem]', {
'border-blue-500 text-gray-950 dark:text-gray-200': isCurrent,
'border-transparent text-gray-900 hover:border-blue-500 hover:text-gray-950 dark:text-gray-400':
!isCurrent,
})}
>

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

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

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

@ -37,7 +37,7 @@ export const TimeEventChart: React.FC<{
formatter: (text) => formatDateWithUnit(text, props.unit),
},
},
} satisfies ColumnConfig),
}) satisfies ColumnConfig,
[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>
<DownOutlined
className={clsx(
'transition-transform scale-y-75',
'scale-y-75 transition-transform',
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={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'
)}
>

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

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

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

@ -35,15 +35,15 @@ export const MonitorEventList: React.FC<MonitorEventListProps> = React.memo(
navigate(`/monitor/${item.monitorId}`);
}}
>
<div className="flex items-center w-full gap-2">
<div className="flex w-full items-center gap-2">
<div
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'
? 'bg-green-400'
: item.type === 'DOWN'
? 'bg-red-500'
: 'bg-amber-400'
? 'bg-red-500'
: 'bg-amber-400'
)}
>
{item.type}

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

@ -87,21 +87,21 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
});
return (
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<HealthBar size={size} beats={beats} />
{showCurrentStatus && (
<>
{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')}
</div>
) : 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')}
</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')}
</div>
)}

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

@ -165,15 +165,15 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
}
return (
<div className="w-full h-full overflow-auto">
<div className="h-full w-full overflow-auto">
<Spin spinning={isLoading}>
<Space className="w-full" direction="vertical">
<div className="flex justify-between">
<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>
{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')}
</div>
)}
@ -187,7 +187,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
</div>
</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', {
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
className={clsx(
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={onClick}
@ -78,7 +78,7 @@ export const MonitorListItem: React.FC<{
<div>
<span
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'
)}
>

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

@ -9,7 +9,7 @@ export const MonitorStatsBlock: React.FC<MonitorStatsBlockProps> = React.memo(
(props) => {
return (
<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>{props.text}</div>
</div>

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

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

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

@ -29,7 +29,7 @@ export const StatusPageServices: React.FC<StatusPageServicesProps> = React.memo(
}
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.map((item) => (
<MonitorListItem

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

@ -64,9 +64,9 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
);
return (
<div className="w-full h-full flex">
<div className="flex h-full w-full">
{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
isLoading={loading}
initialValues={info ?? {}}
@ -77,12 +77,12 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
)}
<div
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'
)}
>
<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 />
</div>
@ -99,7 +99,7 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
</div>
)}
<div className="text-lg mb-2">{t('Services')}</div>
<div className="mb-2 text-lg">{t('Services')}</div>
{info && (
<StatusPageServices

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

@ -216,7 +216,7 @@ const TelemetryListTable: React.FC<{
width: 240,
render: (_, record) => {
return (
<div className="flex gap-2 justify-end">
<div className="flex justify-end gap-2">
<Button
icon={<CodeOutlined />}
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 (
<div className="flex">
<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
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}%` }}
/>
<span>{percent.toFixed(0)}%</span>

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

@ -85,17 +85,17 @@ export const TelemetryOverview: React.FC<{
return (
<Spin spinning={loading}>
<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>
</div>
<div>{actions}</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 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">
<Switch
checked={showPreviousPeriod}
@ -137,7 +137,7 @@ const MetricsBar: React.FC<{
const { pageviews, uniques } = props.stats || {};
return (
<div className="flex gap-5 flex-wrap w-full">
<div className="flex w-full flex-wrap gap-5">
<MetricCard
label={t('views')}
value={pageviews.value}

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

@ -79,8 +79,8 @@ export const WebsiteInfo: React.FC = React.memo(() => {
return (
<div>
<div className="h-24 flex items-center">
<div className="text-2xl flex-1">{t('Website Info')}</div>
<div className="flex h-24 items-center">
<div className="flex-1 text-2xl">{t('Website Info')}</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>`;
return (
<div className="flex gap-2 justify-end">
<div className="flex justify-end gap-2">
<ModalButton
buttonProps={{
icon: <CodeOutlined />,
@ -147,7 +147,7 @@ const WebsiteListTable: React.FC<{ workspaceId: string }> = React.memo(
format: 'text/plain',
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>
</Typography.Paragraph>

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

@ -59,9 +59,9 @@ export const WebsiteMetricsTable: React.FC<MetricsTableProps> = React.memo(
return (
<div className="flex">
<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
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}%` }}
/>
<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) {
return (
<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>
{count} {t('current visitor')}
</span>

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

@ -85,7 +85,7 @@ export const WebsiteOverview: React.FC<{
return (
<Spin spinning={loading}>
<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 ?? ''}>
{website.name}
</span>
@ -113,10 +113,10 @@ export const WebsiteOverview: React.FC<{
<div>{actions}</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 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">
<Switch
checked={showPreviousPeriod}
@ -160,7 +160,7 @@ const MetricsBar: React.FC<{
const prevBouncesNum = Math.min(uniques.prev, bounces.prev) / uniques.prev;
return (
<div className="flex gap-5 flex-wrap w-full">
<div className="flex w-full flex-wrap gap-5">
<MetricCard
label={t('views')}
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) => {
return (
<MapContainer
className="w-full h-[60vh]"
className="h-[60vh] w-full"
center={mapCenter}
zoom={2}
minZoom={2}

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

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

6
src/client/index.css
View File

@ -19,9 +19,11 @@ a {
text-decoration: none;
}
#root, .App {
#root,
.App {
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 {

2
src/client/index.html
View File

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

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

@ -80,9 +80,9 @@ export const Layout: React.FC = React.memo(() => {
);
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 && (
<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 && (
<>
<Button
@ -96,7 +96,7 @@ export const Layout: React.FC = React.memo(() => {
placement="left"
closeIcon={false}
>
<div className="flex flex-col h-full pt-12">
<div className="flex h-full flex-col pt-12">
<div className="flex-1">
<MobileNavItem
to="/dashboard"
@ -142,8 +142,8 @@ export const Layout: React.FC = React.memo(() => {
</>
)}
<div className="px-2 mr-10 font-bold flex items-center">
<img src="/icon.svg" className="w-10 h-10 mr-2" />
<div className="mr-10 flex items-center px-2 font-bold">
<img src="/icon.svg" className="mr-2 h-10 w-10" />
<span className="text-xl dark:text-gray-200">Tianji</span>
</div>
@ -171,9 +171,9 @@ export const Layout: React.FC = React.memo(() => {
)}
</div>
)}
<div className="flex-1 w-full overflow-hidden">
<div className="h-full px-1 sm:px-4 overflow-auto">
<div className="max-w-7xl m-auto">
<div className="w-full flex-1 overflow-hidden">
<div className="h-full overflow-auto px-1 sm:px-4">
<div className="m-auto max-w-7xl">
<Outlet />
</div>
</div>

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

@ -26,10 +26,10 @@ export const Login: React.FC = React.memo(() => {
const { allowRegister } = useGlobalConfig();
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="text-center">
<img className="w-24 h-24" src="/icon.svg" />
<img className="h-24 w-24" src="/icon.svg" />
</div>
<Typography.Title className="text-center" level={2}>
Tianji

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

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

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

@ -14,7 +14,7 @@ export const MonitorOverview: React.FC = React.memo(() => {
return (
<div className="px-2">
<div className="grid gap-4 grid-cols-2">
<div className="grid grid-cols-2 gap-4">
<Card hoverable={true}>
<div>{t('Monitors')}</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();
return (
<div className="h-full flex flex-col">
<div className="flex h-full flex-col">
<div>
<div className="px-4 pt-4 flex gap-4">
<div className="flex gap-4 px-4 pt-4">
<Button
type="primary"
size="large"
@ -34,7 +34,7 @@ export const MonitorPage: React.FC = React.memo(() => {
</Button>
</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">
<MonitorList />
</div>

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

@ -25,10 +25,10 @@ export const Register: React.FC = React.memo(() => {
});
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="text-center">
<img className="w-24 h-24" src="/icon.svg" />
<img className="h-24 w-24" src="/icon.svg" />
</div>
<Typography.Title className="text-center" level={2}>
{t('Register Account')}

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

@ -56,8 +56,8 @@ export const Servers: React.FC = React.memo(() => {
return (
<div>
<div className="h-24 flex items-center">
<div className="text-2xl flex-1">{t('Servers')}</div>
<div className="flex h-24 items-center">
<div className="flex-1 text-2xl">{t('Servers')}</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-1 text-gray-500">
<Switch
@ -311,7 +311,7 @@ export const InstallScript: React.FC = React.memo(() => {
format: 'text/plain',
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>
</Typography.Paragraph>

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

@ -59,7 +59,7 @@ export const AuditLog: React.FC = React.memo(() => {
<Card>
<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 />}
<div
@ -88,19 +88,19 @@ export const AuditLog: React.FC = React.memo(() => {
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 && (
<ColorTag label={item.relatedType} />
)}
<div
className="opacity-60 mr-2 text-xs w-9"
className="mr-2 w-9 text-xs opacity-60"
title={dayjs(item.createdAt).format(
'YYYY-MM-DD HH:mm:ss'
)}
>
{dayjs(item.createdAt).format('MM-DD HH:mm')}
</div>
<div className="overflow-auto h-full flex-1">
<div className="h-full flex-1 overflow-auto">
{item.content}
</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')} />
<Card>
<div className="text-lg mb-2">
<div className="mb-2 text-lg">
{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')}
</span>
</div>

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

@ -54,7 +54,7 @@ export const SettingsPage: React.FC = React.memo(() => {
return (
<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
className="h-full"
onClick={onClick}
@ -63,7 +63,7 @@ export const SettingsPage: React.FC = React.memo(() => {
items={items}
/>
</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>
<Route path="/" 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 hoverable={false} className="!w-1/3 min-h-[470px]">
<Card.Grid hoverable={false} className="min-h-[470px] !w-1/3">
<TelemetryMetricsTable
telemetryId={telemetryId}
type="source"
@ -42,7 +42,7 @@ export const TelemetryDetailPage: React.FC = React.memo(() => {
/>
</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
telemetryId={telemetryId}
type="event"
@ -52,7 +52,7 @@ export const TelemetryDetailPage: React.FC = React.memo(() => {
/>
</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
telemetryId={telemetryId}
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">
<WebsiteOverview website={website} showDateFilter={true} />
</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
websiteId={websiteId}
type="url"
@ -53,7 +53,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
endAt={endAt}
/>
</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
websiteId={websiteId}
type="referrer"
@ -62,7 +62,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
endAt={endAt}
/>
</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
websiteId={websiteId}
type="browser"
@ -71,7 +71,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
endAt={endAt}
/>
</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
websiteId={websiteId}
type="os"
@ -80,7 +80,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
endAt={endAt}
/>
</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
websiteId={websiteId}
type="device"
@ -89,7 +89,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
endAt={endAt}
/>
</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
websiteId={websiteId}
type="country"
@ -99,7 +99,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
/>
<Button
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 } }}
icon={<RightOutlined className="m-0" />}
onClick={() => navigate(`/website/${websiteId}/map`)}
@ -107,7 +107,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
{t('Visitor Map')}
</Button>
</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
websiteId={websiteId}
type="event"

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

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

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

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