From 90ecb866039b36b4fdd1bc420bd65ef10222cd23 Mon Sep 17 00:00:00 2001 From: kunish Date: Tue, 5 Sep 2023 20:53:00 +0800 Subject: [PATCH] feat: make some changes in response to community suggestions - allow to change the size of the tables (xs, sm, md, lg) - move switch endpoint button to config page - move proxy group preview options into select component --- README.md | 2 +- docs/docker-compose.yml | 2 +- src/components/Header.tsx | 23 +----- src/constants/index.ts | 7 ++ src/i18n/en.ts | 6 ++ src/i18n/zh.ts | 6 ++ src/pages/Config.tsx | 150 ++++++++++++++++++++++---------------- src/pages/Connections.tsx | 32 +++++++- src/pages/Logs.tsx | 5 +- src/signals/config.ts | 5 ++ 10 files changed, 147 insertions(+), 91 deletions(-) diff --git a/README.md b/README.md index 11e6873..e5db320 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ services: image: ghcr.io/metacubex/metacubexd restart: always ports: - - 80:80 + - '80:80' # optional meta: diff --git a/docs/docker-compose.yml b/docs/docker-compose.yml index bba6634..b5752ab 100644 --- a/docs/docker-compose.yml +++ b/docs/docker-compose.yml @@ -6,7 +6,7 @@ services: image: ghcr.io/metacubex/metacubexd restart: always ports: - - 80:80 + - '80:80' # optional meta: diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 9ea8077..a85840d 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,7 +1,6 @@ import { useI18n } from '@solid-primitives/i18n' -import { A, useLocation, useNavigate } from '@solidjs/router' +import { A, useLocation } from '@solidjs/router' import { - IconArrowsExchange, IconFileStack, IconGlobe, IconGlobeFilled, @@ -17,12 +16,7 @@ import { For, ParentComponent, Show, createMemo, createSignal } from 'solid-js' import { twMerge } from 'tailwind-merge' import { Button } from '~/components' import { LANG, ROUTES, themes } from '~/constants' -import { - renderProxiesInSamePage, - setCurTheme, - setSelectedEndpoint, - useProxies, -} from '~/signals' +import { renderProxiesInSamePage, setCurTheme, useProxies } from '~/signals' const Nav: ParentComponent<{ href: string; tooltip: string }> = ({ href, @@ -118,15 +112,9 @@ export const Header = () => { }) const location = useLocation() - const navigate = useNavigate() const [openedDrawer, setOpenedDrawer] = createSignal(false) - const onSwitchEndpointClick = () => { - setSelectedEndpoint('') - navigate(ROUTES.Setup) - } - return ( diff --git a/src/constants/index.ts b/src/constants/index.ts index aa9ddee..869c1d8 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -135,3 +135,10 @@ export const CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY = { ), [CONNECTIONS_TABLE_ACCESSOR_KEY.ID]: false, } + +export enum TAILWINDCSS_SIZE { + XS = 'xs', + SM = 'sm', + MD = 'md', + LG = 'lg', +} diff --git a/src/i18n/en.ts b/src/i18n/en.ts index f203c35..0b981aa 100644 --- a/src/i18n/en.ts +++ b/src/i18n/en.ts @@ -59,4 +59,10 @@ export default { ms: 'ms', updated: 'Updated', renderProxiesInSamePage: 'Render proxies and proxy provider in same page', + tableSize: 'Table size', + xs: 'Extra small size', + sm: 'Small size', + md: 'Normal size', + lg: 'Large size', + switchEndpoint: 'Switch Endpoint', } diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts index b958a50..24eb0a8 100644 --- a/src/i18n/zh.ts +++ b/src/i18n/zh.ts @@ -59,4 +59,10 @@ export default { ms: '毫秒', updated: '更新于', renderProxiesInSamePage: '将代理和代理提供者显示在同一页', + tableSize: '表格大小', + xs: '超小尺寸', + sm: '小尺寸', + md: '正常尺寸', + lg: '超大尺寸', + switchEndpoint: '切换后端', } diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx index af4d4d4..26dbd60 100644 --- a/src/pages/Config.tsx +++ b/src/pages/Config.tsx @@ -1,12 +1,15 @@ import { createForm } from '@felte/solid' import { validator } from '@felte/validator-zod' import { useI18n } from '@solid-primitives/i18n' +import { useNavigate } from '@solidjs/router' import { For, Show, createSignal, onMount } from 'solid-js' import { z } from 'zod' import { Button } from '~/components' import { PROXIES_ORDERING_TYPE, PROXIES_PREVIEW_TYPE, + ROUTES, + TAILWINDCSS_SIZE, themes, } from '~/constants' import { @@ -27,8 +30,11 @@ import { setProxiesPreviewType, setRenderInTwoColumn, setRenderProxiesInSamePage, + setSelectedEndpoint, + setTableSize, setTwemoji, setUrlForLatencyTest, + tableSize, urlForLatencyTest, useRequest, useTwemoji, @@ -165,7 +171,7 @@ const ConfigForm = () => { } return ( -
+
{(item) => ( @@ -198,12 +204,39 @@ const ConfigForm = () => { {t('restartCore')}
+ +
+
{t('urlForLatencyTest')}
+ + setUrlForLatencyTest(e.target.value)} + /> +
+ +
+
{t('autoCloseConns')}
+ + setAutoCloseConns(e.target.checked)} + /> +
) } const ConfigForXd = () => { const [t] = useI18n() + const navigate = useNavigate() + + const onSwitchEndpointClick = () => { + setSelectedEndpoint('') + navigate(ROUTES.Setup) + } return (
@@ -283,61 +316,6 @@ const ConfigForXd = () => {
-
-
{t('proxiesPreviewType')}
- -
- - {(value) => ( - - )} - -
-
- -
-
{t('proxiesSorting')}
- -
- - {(value) => ( - - )} - -
-
- -
-
{t('autoCloseConns')}
- - setAutoCloseConns(e.target.checked)} - /> -
-
{t('useTwemoji')}
@@ -349,14 +327,58 @@ const ConfigForXd = () => { />
-
-
{t('urlForLatencyTest')}
+
+
{t('proxiesPreviewType')}
- setUrlForLatencyTest(e.target.value)} - /> + +
+ +
+
{t('proxiesSorting')}
+ + +
+ +
+
{t('tableSize')}
+ + +
+ +
+
) @@ -369,7 +391,7 @@ export default () => { - {import.meta.env.version} + {import.meta.env.version} ) } diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx index 8aab586..3a587a7 100644 --- a/src/pages/Connections.tsx +++ b/src/pages/Connections.tsx @@ -28,9 +28,10 @@ import { CONNECTIONS_TABLE_ACCESSOR_KEY, CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER, CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY, + TAILWINDCSS_SIZE, } from '~/constants' import { formatTimeFromNow } from '~/helpers' -import { secret, useRequest, wsEndpointURL } from '~/signals' +import { secret, tableSize, useRequest, wsEndpointURL } from '~/signals' import type { Connection } from '~/types' type ConnectionWithSpeed = Connection & { @@ -234,6 +235,28 @@ export default () => { getCoreRowModel: getCoreRowModel(), }) + const tableSizeClassName = () => { + const size = tableSize() + + if (size === TAILWINDCSS_SIZE.XS) { + return 'table-xs' + } + + if (size === TAILWINDCSS_SIZE.SM) { + return 'table-sm' + } + + if (size === TAILWINDCSS_SIZE.MD) { + return 'table-md' + } + + if (size === TAILWINDCSS_SIZE.LG) { + return 'table-lg' + } + + return '' + } + return (
@@ -267,7 +290,12 @@ export default () => {
- +
{(headerGroup) => ( diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx index 328fd96..62ca70d 100644 --- a/src/pages/Logs.tsx +++ b/src/pages/Logs.tsx @@ -8,7 +8,8 @@ import { getCoreRowModel, } from '@tanstack/solid-table' import { For, createEffect, createSignal } from 'solid-js' -import { secret, wsEndpointURL } from '~/signals' +import { twMerge } from 'tailwind-merge' +import { secret, tableSize, wsEndpointURL } from '~/signals' import { Log } from '~/types' type LogWithSeq = Log & { seq: number } @@ -75,7 +76,7 @@ export default () => { />
-
+
{(headerGroup) => ( diff --git a/src/signals/config.ts b/src/signals/config.ts index d0818d0..07d5941 100644 --- a/src/signals/config.ts +++ b/src/signals/config.ts @@ -5,6 +5,7 @@ import { LATENCY_QUALITY_MAP_HTTPS, PROXIES_ORDERING_TYPE, PROXIES_PREVIEW_TYPE, + TAILWINDCSS_SIZE, } from '~/constants' import { setCurTheme } from '~/signals' @@ -49,6 +50,10 @@ export const [renderProxiesInSamePage, setRenderProxiesInSamePage] = name: 'renderProxiesInSamePage', storage: localStorage, }) +export const [tableSize, setTableSize] = makePersisted( + createSignal(TAILWINDCSS_SIZE.XS), + { name: 'tableSize', storage: localStorage }, +) export const isLatencyTestByHttps = () => urlForLatencyTest().startsWith('https')