Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-12-25 07:04:11 +08:00
Code Issues Projects Releases Wiki Activity

feat: display current selected endpoint at the bottom of the overview page

Browse Source
This commit is contained in:
kunish 2023-11-03 01:23:34 +08:00
parent aaf2d0bed2
commit 3e92373166
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 46 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Latency.tsx
View File

@ -7,9 +7,7 @@ export const Latency = (props: { name?: string }) => {
const [t] = useI18n()
const { latencyMap } = useProxies()
const [textClassName, setTextClassName] = createSignal('')
const latency = createMemo(() => {
return latencyMap()[props.name!]
})
const latency = createMemo(() => latencyMap()[props.name!])
createEffect(() => {
setTextClassName('text-success')

85
src/pages/Config.tsx
View File

@ -35,7 +35,6 @@ import { isSingBox } from '~/helpers'
import { locale, setLocale, useI18n } from '~/i18n'
import {
autoSwitchTheme,
endpoint,
favDayTheme,
favNightTheme,
setAutoSwitchTheme,
@ -381,6 +380,36 @@ const ConfigForXd = () => {
return (
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div class="flex flex-col gap-2">
<div class="flex flex-col items-center">
<ConfigTitle>{t('useTwemoji')}</ConfigTitle>
<input
type="checkbox"
class="toggle"
checked={useTwemoji()}
onChange={(e) => setUseTwemoji(e.target.checked)}
/>
</div>
<div class="flex flex-col">
<ConfigTitle>{t('switchLanguage')}</ConfigTitle>
<select
class="select select-bordered"
onChange={(e) => setLocale(e.target.value as LANG)}
>
<For each={languages}>
{(lang) => (
<option selected={locale() === lang.value} value={lang.value}>
{lang.label()}
</option>
)}
</For>
</select>
</div>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-col items-center">
<ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
@ -429,36 +458,6 @@ const ConfigForXd = () => {
</div>
</Show>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-col items-center">
<ConfigTitle>{t('useTwemoji')}</ConfigTitle>
<input
type="checkbox"
class="toggle"
checked={useTwemoji()}
onChange={(e) => setUseTwemoji(e.target.checked)}
/>
</div>
<div class="flex flex-col">
<ConfigTitle>{t('switchLanguage')}</ConfigTitle>
<select
class="select select-bordered"
onChange={(e) => setLocale(e.target.value as LANG)}
>
<For each={languages}>
{(lang) => (
<option selected={locale() === lang.value} value={lang.value}>
{lang.label()}
</option>
)}
</For>
</select>
</div>
</div>
</div>
)
}
@ -477,23 +476,19 @@ const Versions: Component<{ backendVersion: Accessor<string> }> = ({
})
return (
<div class="flex flex-col gap-2">
<div class="grid grid-cols-2 gap-4">
<kbd class="kbd">{import.meta.env.version}</kbd>
<div class="grid grid-cols-2 gap-4">
<kbd class="kbd">{import.meta.env.version}</kbd>
<div class="relative">
<Show when={isUpdateAvailable()}>
<span class="absolute -right-1 -top-1 flex h-3 w-3">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-info opacity-75" />
<span class="inline-flex h-3 w-3 rounded-full bg-info" />
</span>
</Show>
<div class="relative">
<Show when={isUpdateAvailable()}>
<span class="absolute -right-1 -top-1 flex h-3 w-3">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-info opacity-75" />
<span class="inline-flex h-3 w-3 rounded-full bg-info" />
</span>
</Show>
<kbd class="kbd w-full">{backendVersion()}</kbd>
</div>
<kbd class="kbd w-full">{backendVersion()}</kbd>
</div>
<h1 class="text-center text-lg font-bold">{endpoint()?.url}</h1>
</div>
)
}

6
src/pages/Overview.tsx
View File

@ -14,7 +14,7 @@ import {
} from 'solid-js'
import { CHART_MAX_XAXIS, DEFAULT_CHART_OPTIONS } from '~/constants'
import { useI18n } from '~/i18n'
import { latestConnectionMsg, useWsRequest } from '~/signals'
import { endpoint, latestConnectionMsg, useWsRequest } from '~/signals'
const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
<div class="stat flex-1 place-items-center">
@ -130,6 +130,10 @@ export default () => {
/>
</div>
</div>
<footer class="footer rounded-box mx-auto mt-4 block bg-neutral p-4 text-center text-lg font-bold text-neutral-content">
{endpoint()?.url}
</footer>
</div>
)
}