mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-09-20 14:02:46 +08:00
feat: minor improvements
This commit is contained in:
parent
392f20932d
commit
f4788bb463
@ -11,7 +11,6 @@ import {
|
|||||||
IconSettings,
|
IconSettings,
|
||||||
} from '@tabler/icons-solidjs'
|
} from '@tabler/icons-solidjs'
|
||||||
import { For, ParentComponent, Show, createSignal } from 'solid-js'
|
import { For, ParentComponent, Show, createSignal } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
|
||||||
import { LogoText } from '~/components'
|
import { LogoText } from '~/components'
|
||||||
import { ROUTES, themes } from '~/constants'
|
import { ROUTES, themes } from '~/constants'
|
||||||
import { setCurTheme } from '~/signals'
|
import { setCurTheme } from '~/signals'
|
||||||
@ -44,7 +43,7 @@ const ThemeSwitcher = () => (
|
|||||||
<div class="drawer-side">
|
<div class="drawer-side">
|
||||||
<label for="themes" class="drawer-overlay" />
|
<label for="themes" class="drawer-overlay" />
|
||||||
|
|
||||||
<ul class="menu rounded-l-box gap-2 bg-base-300 p-2 shadow">
|
<ul class="menu rounded-l-box gap-2 bg-base-300 p-2">
|
||||||
<For each={themes}>
|
<For each={themes}>
|
||||||
{(theme) => (
|
{(theme) => (
|
||||||
<li
|
<li
|
||||||
@ -101,9 +100,9 @@ export const Header = () => {
|
|||||||
const [openedDrawer, setOpenedDrawer] = createSignal(false)
|
const [openedDrawer, setOpenedDrawer] = createSignal(false)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul class="navbar sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4">
|
<ul class="navbar sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4 shadow-lg">
|
||||||
<div class="navbar-start gap-4">
|
<div class="navbar-start gap-4">
|
||||||
<div class={twMerge('drawer w-auto lg:hidden', '')}>
|
<div class="drawer w-auto lg:hidden">
|
||||||
<input
|
<input
|
||||||
id="navs"
|
id="navs"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -121,7 +120,7 @@ export const Header = () => {
|
|||||||
<div class="drawer-side">
|
<div class="drawer-side">
|
||||||
<label for="navs" class="drawer-overlay" />
|
<label for="navs" class="drawer-overlay" />
|
||||||
|
|
||||||
<ul class="menu rounded-r-box min-h-full w-2/5 gap-2 bg-base-300 pt-20 shadow">
|
<ul class="menu rounded-r-box min-h-full w-2/5 gap-2 bg-base-300 pt-20">
|
||||||
<For each={navs()}>
|
<For each={navs()}>
|
||||||
{({ href, name }) => (
|
{({ href, name }) => (
|
||||||
<li onClick={() => setOpenedDrawer(false)}>
|
<li onClick={() => setOpenedDrawer(false)}>
|
||||||
|
@ -24,7 +24,7 @@ export const ProxyNodeCard = (props: {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
class={twMerge(
|
class={twMerge(
|
||||||
'card card-bordered tooltip-bottom card-compact flex gap-1 border-neutral-focus bg-neutral p-3 text-neutral-content sm:tooltip',
|
'card card-bordered tooltip-bottom card-compact flex gap-1 border-neutral-focus bg-neutral p-3 text-neutral-content shadow-lg sm:tooltip',
|
||||||
isSelected && 'border-primary bg-primary-content text-primary',
|
isSelected && 'border-primary bg-primary-content text-primary',
|
||||||
onClick && 'cursor-pointer',
|
onClick && 'cursor-pointer',
|
||||||
)}
|
)}
|
||||||
|
@ -12,24 +12,12 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: hsl(var(--p)) transparent;
|
scrollbar-color: transparent transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
display: none;
|
||||||
|
|
||||||
::-webkit-scrollbar:vertical {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar:horizontal {
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width >= 640px) {
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
@apply rounded-box bg-primary;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar:vertical {
|
::-webkit-scrollbar:vertical {
|
||||||
@ -39,4 +27,17 @@
|
|||||||
::-webkit-scrollbar:horizontal {
|
::-webkit-scrollbar:horizontal {
|
||||||
height: 6px;
|
height: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (width >= 640px) {
|
||||||
|
:root {
|
||||||
|
scrollbar-color: hsl(var(--p)) transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
@apply rounded-box bg-primary;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -47,7 +47,7 @@ import {
|
|||||||
useRequest,
|
useRequest,
|
||||||
useTwemoji,
|
useTwemoji,
|
||||||
} from '~/signals'
|
} from '~/signals'
|
||||||
import type { DNSQuery, Config as IConfig } from '~/types'
|
import type { BackendVersion, DNSQuery, Config as IConfig } from '~/types'
|
||||||
|
|
||||||
const dnsQueryFormSchema = z.object({
|
const dnsQueryFormSchema = z.object({
|
||||||
name: z.string(),
|
name: z.string(),
|
||||||
@ -85,7 +85,11 @@ const DNSQueryForm = () => {
|
|||||||
return (
|
return (
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<form use:form={form} class="flex flex-col gap-2 sm:flex-row">
|
<form use:form={form} class="flex flex-col gap-2 sm:flex-row">
|
||||||
<input name="name" class="input input-bordered w-full sm:flex-1" />
|
<input
|
||||||
|
type="search"
|
||||||
|
name="name"
|
||||||
|
class="input input-bordered w-full sm:flex-1"
|
||||||
|
/>
|
||||||
|
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<select name="type" class="select select-bordered">
|
<select name="type" class="select select-bordered">
|
||||||
@ -424,6 +428,25 @@ const ConfigForXd = () => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const Versions = () => {
|
||||||
|
const request = useRequest()
|
||||||
|
|
||||||
|
const [backendVersion, setBackendVersion] = createSignal('')
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
const { version } = await request.get('version').json<BackendVersion>()
|
||||||
|
|
||||||
|
setBackendVersion(version)
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<kbd class="kbd">{import.meta.env.version}</kbd>
|
||||||
|
<kbd class="kbd">{backendVersion()}</kbd>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-4">
|
||||||
@ -431,7 +454,7 @@ export default () => {
|
|||||||
<ConfigForm />
|
<ConfigForm />
|
||||||
<ConfigForXd />
|
<ConfigForXd />
|
||||||
|
|
||||||
<kbd class="kbd">{import.meta.env.version}</kbd>
|
<Versions />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -330,6 +330,7 @@ export default () => {
|
|||||||
|
|
||||||
<div class="flex w-full items-center gap-2 md:flex-1">
|
<div class="flex w-full items-center gap-2 md:flex-1">
|
||||||
<input
|
<input
|
||||||
|
type="search"
|
||||||
class="input input-primary input-sm flex-1 sm:input-md"
|
class="input input-primary input-sm flex-1 sm:input-md"
|
||||||
placeholder={t('search')}
|
placeholder={t('search')}
|
||||||
onInput={(e) => setSearch(e.target.value)}
|
onInput={(e) => setSearch(e.target.value)}
|
||||||
|
@ -80,6 +80,7 @@ export default () => {
|
|||||||
return (
|
return (
|
||||||
<div class="flex h-full flex-col gap-4 p-1">
|
<div class="flex h-full flex-col gap-4 p-1">
|
||||||
<input
|
<input
|
||||||
|
type="search"
|
||||||
class="input input-primary flex-shrink-0"
|
class="input input-primary flex-shrink-0"
|
||||||
placeholder={t('search')}
|
placeholder={t('search')}
|
||||||
onInput={(e) => setSearch(e.target.value)}
|
onInput={(e) => setSearch(e.target.value)}
|
||||||
|
5
src/types/index.d.ts
vendored
5
src/types/index.d.ts
vendored
@ -169,3 +169,8 @@ export type DNSQuery = {
|
|||||||
type: number
|
type: number
|
||||||
}[]
|
}[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type BackendVersion = {
|
||||||
|
meta: boolean
|
||||||
|
version: string
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user