mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-23 09:25:35 +08:00
chore: initial commit
This commit is contained in:
kunish
commit
b8c6c2fa7a
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
5
.prettierrc
Normal file
5
.prettierrc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"plugins": ["prettier-plugin-tailwindcss"],
|
||||
"semi": false,
|
||||
"singleQuote": true
|
||||
}
|
||||
34
README.md
Normal file
34
README.md
Normal file
@ -0,0 +1,34 @@
|
||||
## Usage
|
||||
|
||||
Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
|
||||
|
||||
This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
|
||||
|
||||
```bash
|
||||
$ npm install # or pnpm install or yarn install
|
||||
```
|
||||
|
||||
### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm run dev` or `npm start`
|
||||
|
||||
Runs the app in the development mode.<br>
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
|
||||
The page will reload if you make edits.<br>
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `dist` folder.<br>
|
||||
It correctly bundles Solid in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.<br>
|
||||
Your app is ready to be deployed!
|
||||
|
||||
## Deployment
|
||||
|
||||
You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
|
||||
16
index.html
Normal file
16
index.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="shortcut icon" type="image/svg" href="/src/assets/favicon.svg" />
|
||||
<title>Solid App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
<div id="root"></div>
|
||||
<script src="/src/index.tsx" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
46
package.json
Normal file
46
package.json
Normal file
@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "vite-template-solid",
|
||||
"version": "0.0.0",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"dev": "vite",
|
||||
"serve": "vite preview",
|
||||
"start": "vite"
|
||||
},
|
||||
"dependencies": {
|
||||
"@felte/solid": "^1.2.10",
|
||||
"@felte/validator-zod": "^1.0.16",
|
||||
"@solid-primitives/event-listener": "^2.2.14",
|
||||
"@solid-primitives/storage": "^2.1.1",
|
||||
"@solid-primitives/websocket": "^1.1.0",
|
||||
"@solidjs/router": "^0.8.3",
|
||||
"@tabler/icons-solidjs": "^2.32.0",
|
||||
"@tanstack/solid-table": "^8.9.3",
|
||||
"@tanstack/solid-virtual": "3.0.0-beta.6",
|
||||
"@types/byte-size": "^8.1.0",
|
||||
"@types/node": "^20.5.6",
|
||||
"@types/uuid": "^9.0.2",
|
||||
"apexcharts": "^3.42.0",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"byte-size": "^8.1.1",
|
||||
"daisyui": "^3.6.3",
|
||||
"is-ip": "^5.0.1",
|
||||
"ky": "^0.33.3",
|
||||
"prettier": "^3.0.2",
|
||||
"prettier-plugin-tailwindcss": "^0.5.3",
|
||||
"solid-apexcharts": "^0.3.2",
|
||||
"solid-devtools": "^0.27.7",
|
||||
"solid-form-handler": "^1.2.0",
|
||||
"solid-js": "^1.7.11",
|
||||
"tailwind-merge": "^1.14.0",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.2.2",
|
||||
"uuid": "^9.0.0",
|
||||
"vite": "^4.4.9",
|
||||
"vite-plugin-solid": "^2.7.0",
|
||||
"zod": "^3.22.2"
|
||||
}
|
||||
}
|
||||
2131
pnpm-lock.yaml
Normal file
2131
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
71
src/App.tsx
Normal file
71
src/App.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import { Route, Routes, useLocation, useNavigate } from '@solidjs/router'
|
||||
import { For, Show, onMount } from 'solid-js'
|
||||
import { Header } from '~/components/Header'
|
||||
import { themes } from '~/constants'
|
||||
import { Config } from '~/pages/Config'
|
||||
import { Connections } from '~/pages/Connections'
|
||||
import { Logs } from '~/pages/Logs'
|
||||
import { Overview } from '~/pages/Overview'
|
||||
import { Proxies } from '~/pages/Proxies'
|
||||
import { Rules } from '~/pages/Rules'
|
||||
import { Setup } from '~/pages/Setup'
|
||||
import { curTheme, selectedEndpoint, setCurTheme } from '~/signals'
|
||||
|
||||
export const App = () => {
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
|
||||
onMount(() => {
|
||||
if (!selectedEndpoint()) {
|
||||
navigate('/setup')
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="app relative" data-theme={curTheme()}>
|
||||
<div class="sticky inset-x-0 top-0 z-50 flex items-center rounded-md bg-base-200 px-4 py-2">
|
||||
<Show when={location.pathname !== '/setup'}>
|
||||
<Header />
|
||||
</Show>
|
||||
|
||||
<div class="dropdown-end dropdown-hover dropdown ml-auto">
|
||||
<label tabindex="0" class="btn btn-sm m-2 uppercase">
|
||||
Themes
|
||||
</label>
|
||||
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu dropdown-content rounded-box z-[1] gap-2 bg-base-300 p-2 shadow"
|
||||
>
|
||||
<For each={themes}>
|
||||
{(theme) => (
|
||||
<li
|
||||
data-theme={theme}
|
||||
class="btn btn-xs"
|
||||
onClick={() => setCurTheme(theme)}
|
||||
>
|
||||
{theme}
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4">
|
||||
<Routes>
|
||||
<Show when={selectedEndpoint()}>
|
||||
<Route path="/" component={Overview} />
|
||||
<Route path="/proxies" component={Proxies} />
|
||||
<Route path="/rules" component={Rules} />
|
||||
<Route path="/conns" component={Connections} />
|
||||
<Route path="/logs" component={Logs} />
|
||||
<Route path="/config" component={Config} />
|
||||
</Show>
|
||||
|
||||
<Route path="/setup" component={Setup} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
51
src/assets/favicon.svg
Normal file
51
src/assets/favicon.svg
Normal file
@ -0,0 +1,51 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 256 128" style="enable-background:new 0 0 256 128;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#333333;fill-opacity:0;}
|
||||
.st1{opacity:0.8;fill:#E62C5A;enable-background:new;}
|
||||
.st2{opacity:0.8;fill:#0FABF6;enable-background:new;}
|
||||
.st3{opacity:0.5;fill:#501B8D;enable-background:new;}
|
||||
.st4{fill:#333333;}
|
||||
</style>
|
||||
<g transform="translate(81.56239318847656,79.98116683959961)">
|
||||
<g transform="translate(58.43760681152344,0)">
|
||||
<g>
|
||||
<rect x="-51.3" y="-72.1" class="st0" width="78.6" height="85.2"/>
|
||||
<path class="st1" d="M14-24.9l-30.9-30.7l-15.6-15.5c-1.6-0.7-3.2-1-4.9-1c-7.5,0-13.6,6.9-13.8,15.5v37
|
||||
c-0.1,8.8,6.9,16,15.7,16.1c0,0,0,0,0,0H7.7c5.2-2.5,8.5-7.8,8.5-13.6C16.2-19.8,15.4-22.6,14-24.9z"/>
|
||||
<path class="st2" d="M11.6-55.6h-43.3c-5.2,2.5-8.5,7.8-8.5,13.6c0,2.8,0.8,5.5,2.2,7.8L-7.1-3.5L8.6,12.1c1.6,0.7,3.2,1,4.9,1
|
||||
c7.5,0,13.6-6.9,13.8-15.5v-37.1C27.4-48.2,20.4-55.4,11.6-55.6z"/>
|
||||
<path class="st3" d="M-38-34.1L-7.1-3.5H7.7c5.2-2.5,8.5-7.8,8.5-13.6c0-2.8-0.8-5.5-2.2-7.8l-30.9-30.7h-14.8
|
||||
c-5.2,2.5-8.5,7.8-8.5,13.6C-40.2-39.2-39.4-36.5-38-34.1z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(0,72.08086395263672)">
|
||||
<g>
|
||||
<g transform="scale(0.35999999999999927)">
|
||||
<g>
|
||||
<path class="st4" d="M-23.8-110l-12.6-19.6c-1-1.9-3.5-1.3-3.5,0.9V-99c0,2.5,3.8,2.5,3.8,0v-23.4l10.5,16.4
|
||||
c0.8,1.5,2.7,1.5,3.6,0l10.5-16.5V-99c0,2.5,3.8,2.5,3.8,0v-29.7c0-2.2-2.4-2.8-3.6-0.9L-23.8-110z M5.1-112.2h19.4
|
||||
c2.2,0,2.1-3.3,0-3.3H5.1v-11.6h20.4c2.2,0,2.3-3.3,0-3.3H3.7c-1.4,0-2.4,1-2.4,2.2v28.3c0,1.2,0.9,2.3,2.4,2.3h21.7
|
||||
c2.5,0,2.2-3.4,0-3.4H5.1V-112.2z M32.7-130.4c-2.4,0-2.4,3.6,0,3.6h11.4v28c0,1.3,1,1.9,1.9,1.9c0.9,0,2-0.6,2-1.9
|
||||
c0-9.3-0.1-18.7-0.1-28h11.5c2.5,0,2.5-3.6,0-3.6H32.7z M82.5-109.5H66.3l8.1-16.2L82.5-109.5z M84.1-106.2l4,8
|
||||
c1,2,4.8,0.7,3.5-1.5l-15.5-30.5c-0.4-0.7-1-1-1.7-1c-0.7,0-1.4,0.3-1.7,1L57.1-99.6c-0.9,2.1,2.5,3.4,3.4,1.5l4.2-8.1H84.1z
|
||||
M124-103.5c1.3-1.9-1.8-3.8-3-2.1c-1.1,1.4-2.6,2.6-4.2,3.5c-2,1-4.1,1.5-6,1.5c-7.1,0-13.1-6-13.1-13.8
|
||||
c0-7.5,4.5-12,10.8-12.9c4.5-0.5,8.6,0,12.1,3.8c1.4,1.5,4.2-0.6,2.7-2.3c-4.1-4.3-9.3-5.8-15.4-5c-7.9,1.2-14,7.9-14,16.4
|
||||
c0,10.2,7.9,17.4,16.8,17.4c2.5,0,5.3-0.7,7.7-1.9C120.6-99.9,122.6-101.5,124-103.5z M156.7-112.1c0,14.9-22.7,14.9-22.7,0
|
||||
V-129c0-2.3-3.9-2.3-3.9,0v17c0,9.9,7.7,14.9,15.2,14.9c7.5,0,15.2-5,15.2-14.9v-17c0-2.5-3.9-2.5-3.9,0V-112.1z M198.1-107.3
|
||||
c0-4.2-2.6-6.8-6.3-8c2.7-1.1,4-3.5,4-6.1c0-7.3-7.4-8.9-12.2-8.9h-12.2c-1,0-1.9,0.8-1.9,1.9v29.1c0,1,0.9,1.9,1.9,1.9h13.4
|
||||
C191.2-97.6,198.1-99.6,198.1-107.3z M183.5-127c3.2,0,8.5,1.1,8.5,5.6c0,3.8-3.9,5-8.3,5h-10.5V-127H183.5z M173.2-113.1h13.1
|
||||
c4.5,0,8,1.8,8,5.8c0,5.2-5,6.4-9.5,6.4h-11.6V-113.1z M208.5-112.2h19.4c2.2,0,2.1-3.3,0-3.3h-19.4v-11.6h20.4
|
||||
c2.2,0,2.3-3.3,0-3.3h-21.8c-1.4,0-2.4,1-2.4,2.2v28.3c0,1.2,0.9,2.3,2.4,2.3h21.7c2.5,0,2.2-3.4,0-3.4h-20.4V-112.2z
|
||||
M238.4-130.3c-1.5-1.8-4.3,0.5-2.8,2.2l11.9,13.7l-12.3,14c-1.7,2,0.9,4.4,2.8,2.3l11.9-13.7L261.7-98c2,2,4.6-0.1,2.9-2.3
|
||||
l-12.3-14.1l12-13.6c1.6-1.8-1.3-4.1-2.8-2.3l-11.4,13.4L238.4-130.3z M272.6-127.1h9.9c7.7,0,11.6,6.6,11.6,13.1
|
||||
c0,6.5-3.9,13-11.6,13h-9.9V-127.1z M282.5-97.6c10.3,0,15.4-8.2,15.4-16.4c0-8.2-5.1-16.4-15.4-16.4h-11.2
|
||||
c-1.3,0-2.4,1-2.4,2.2v28.4c0,1.2,1.1,2.2,2.4,2.2H282.5z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
69
src/components/Header.tsx
Normal file
69
src/components/Header.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import { A, useNavigate } from '@solidjs/router'
|
||||
import {
|
||||
IconFileStack,
|
||||
IconGlobe,
|
||||
IconHome,
|
||||
IconNetwork,
|
||||
IconNetworkOff,
|
||||
IconRuler,
|
||||
IconSettings,
|
||||
} from '@tabler/icons-solidjs'
|
||||
import { setSelectedEndpoint } from '~/signals'
|
||||
|
||||
export const Header = () => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<ul class="menu rounded-box menu-horizontal">
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/" data-tip="Home">
|
||||
<IconHome />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/proxies" data-tip="Proxies">
|
||||
<IconGlobe />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
|
||||
<IconRuler />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/conns" data-tip="Connections">
|
||||
<IconNetwork />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
|
||||
<IconFileStack />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
|
||||
<IconSettings />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button
|
||||
class="tooltip tooltip-bottom"
|
||||
data-tip="Switch Endpoint"
|
||||
onClick={() => {
|
||||
setSelectedEndpoint('')
|
||||
|
||||
navigate('/setup')
|
||||
}}
|
||||
>
|
||||
<IconNetworkOff />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
31
src/constants.ts
Normal file
31
src/constants.ts
Normal file
@ -0,0 +1,31 @@
|
||||
export const themes = [
|
||||
'light',
|
||||
'dark',
|
||||
'cupcake',
|
||||
'bumblebee',
|
||||
'emerald',
|
||||
'corporate',
|
||||
'synthwave',
|
||||
'retro',
|
||||
'cyberpunk',
|
||||
'valentine',
|
||||
'halloween',
|
||||
'garden',
|
||||
'forest',
|
||||
'aqua',
|
||||
'lofi',
|
||||
'pastel',
|
||||
'fantasy',
|
||||
'wireframe',
|
||||
'black',
|
||||
'luxury',
|
||||
'dracula',
|
||||
'cmyk',
|
||||
'autumn',
|
||||
'business',
|
||||
'acid',
|
||||
'lemonade',
|
||||
'night',
|
||||
'coffee',
|
||||
'winter',
|
||||
]
|
||||
10
src/index.css
Normal file
10
src/index.css
Normal file
@ -0,0 +1,10 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind variants;
|
||||
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
padding: 1rem;
|
||||
@apply subpixel-antialiased;
|
||||
}
|
||||
18
src/index.tsx
Normal file
18
src/index.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
/* @refresh reload */
|
||||
import 'solid-devtools'
|
||||
import { render } from 'solid-js/web'
|
||||
|
||||
import { Router } from '@solidjs/router'
|
||||
import { App } from './App'
|
||||
import './index.css'
|
||||
|
||||
const root = document.getElementById('root')
|
||||
|
||||
render(
|
||||
() => (
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
),
|
||||
root!,
|
||||
)
|
||||
3
src/pages/Config.tsx
Normal file
3
src/pages/Config.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export const Config = () => {
|
||||
return <div>config</div>
|
||||
}
|
||||
162
src/pages/Connections.tsx
Normal file
162
src/pages/Connections.tsx
Normal file
@ -0,0 +1,162 @@
|
||||
import { createEventSignal } from '@solid-primitives/event-listener'
|
||||
import { createReconnectingWS } from '@solid-primitives/websocket'
|
||||
import {
|
||||
ColumnDef,
|
||||
createSolidTable,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
} from '@tanstack/solid-table'
|
||||
import byteSize from 'byte-size'
|
||||
import { isIPv6 } from 'is-ip'
|
||||
import { For, createSignal } from 'solid-js'
|
||||
import { wsEndpointURL } from '~/signals'
|
||||
import type { Connection } from '../types'
|
||||
|
||||
export const Connections = () => {
|
||||
const [search, setSearch] = createSignal('')
|
||||
|
||||
const ws = createReconnectingWS(`${wsEndpointURL()}/connections`)
|
||||
|
||||
const messageEvent = createEventSignal<{
|
||||
message: WebSocketEventMap['message']
|
||||
}>(ws, 'message')
|
||||
|
||||
const connections = () => {
|
||||
const data = messageEvent()?.data
|
||||
|
||||
if (!data) {
|
||||
return []
|
||||
}
|
||||
|
||||
return (
|
||||
JSON.parse(data) as { connections: Connection[] }
|
||||
).connections.slice(-100)
|
||||
}
|
||||
|
||||
const columns: ColumnDef<Connection>[] = [
|
||||
{
|
||||
accessorKey: 'ID',
|
||||
accessorFn: (row) => row.id,
|
||||
},
|
||||
{
|
||||
accessorKey: 'Network',
|
||||
accessorFn: (row) => row.metadata.network,
|
||||
},
|
||||
{
|
||||
accessorKey: 'Download',
|
||||
accessorFn: (row) => byteSize(row.download),
|
||||
},
|
||||
{
|
||||
accessorKey: 'Upload',
|
||||
accessorFn: (row) => byteSize(row.upload),
|
||||
},
|
||||
{
|
||||
accessorKey: 'Rule',
|
||||
accessorFn: (row) => row.rule,
|
||||
},
|
||||
{
|
||||
accessorKey: 'Chains',
|
||||
accessorFn: (row) => row.chains.join(' -> '),
|
||||
},
|
||||
{
|
||||
accessorKey: 'Remote Destination',
|
||||
accessorFn: (row) => row.metadata.remoteDestination,
|
||||
},
|
||||
{
|
||||
accessorKey: 'Host',
|
||||
accessorFn: (row) => row.metadata.host,
|
||||
},
|
||||
{
|
||||
accessorKey: 'DNS Mode',
|
||||
accessorFn: (row) => row.metadata.dnsMode,
|
||||
},
|
||||
{
|
||||
accessorKey: 'Type',
|
||||
accessorFn: (row) => row.metadata.type,
|
||||
},
|
||||
{
|
||||
accessorKey: 'Source',
|
||||
accessorFn: (row) =>
|
||||
isIPv6(row.metadata.sourceIP)
|
||||
? `[${row.metadata.sourceIP}]:${row.metadata.sourcePort}`
|
||||
: `${row.metadata.sourceIP}:${row.metadata.sourcePort}`,
|
||||
},
|
||||
{
|
||||
accessorKey: 'Destination',
|
||||
accessorFn: (row) =>
|
||||
isIPv6(row.metadata.destinationIP)
|
||||
? `[${row.metadata.destinationIP}]:${row.metadata.destinationPort}`
|
||||
: `${row.metadata.destinationIP}:${row.metadata.destinationPort}`,
|
||||
},
|
||||
]
|
||||
|
||||
const table = createSolidTable({
|
||||
get data() {
|
||||
return search()
|
||||
? connections().filter((connection) =>
|
||||
Object.values(connection).some((conn) =>
|
||||
JSON.stringify(conn)
|
||||
.toLowerCase()
|
||||
.includes(search().toLowerCase()),
|
||||
),
|
||||
)
|
||||
: connections()
|
||||
},
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-4">
|
||||
<input
|
||||
class="input input-primary"
|
||||
placeholder="Search"
|
||||
onInput={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
|
||||
<div class="overflow-x-auto whitespace-nowrap">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<For each={table.getHeaderGroups()}>
|
||||
{(headerGroup) => (
|
||||
<tr>
|
||||
<For each={headerGroup.headers}>
|
||||
{(header) => (
|
||||
<th>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</th>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<For each={table.getRowModel().rows}>
|
||||
{(row) => (
|
||||
<tr>
|
||||
<For each={row.getVisibleCells()}>
|
||||
{(cell) => (
|
||||
<td>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
58
src/pages/Logs.tsx
Normal file
58
src/pages/Logs.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import { createEventSignal } from '@solid-primitives/event-listener'
|
||||
import { createReconnectingWS } from '@solid-primitives/websocket'
|
||||
import { For, createEffect, createSignal } from 'solid-js'
|
||||
import { wsEndpointURL } from '~/signals'
|
||||
|
||||
export const Logs = () => {
|
||||
const [search, setSearch] = createSignal('')
|
||||
const [logs, setLogs] = createSignal<string[]>([])
|
||||
|
||||
const ws = createReconnectingWS(`${wsEndpointURL()}/logs`)
|
||||
|
||||
const messageEvent = createEventSignal<{
|
||||
message: WebSocketEventMap['message']
|
||||
}>(ws, 'message')
|
||||
|
||||
createEffect(() => {
|
||||
const data = messageEvent()?.data
|
||||
|
||||
if (!data) {
|
||||
return
|
||||
}
|
||||
|
||||
setLogs((logs) =>
|
||||
[
|
||||
...logs,
|
||||
(JSON.parse(data) as { type: string; payload: string }).payload,
|
||||
].slice(-100),
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-4">
|
||||
<input
|
||||
class="input input-primary"
|
||||
placeholder="Search"
|
||||
onInput={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
|
||||
<div class="overflow-x-auto whitespace-nowrap">
|
||||
<For
|
||||
each={
|
||||
search()
|
||||
? logs().filter((log) =>
|
||||
log.toLowerCase().includes(search().toLowerCase()),
|
||||
)
|
||||
: logs()
|
||||
}
|
||||
>
|
||||
{(log) => (
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0">{log}</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
181
src/pages/Overview.tsx
Normal file
181
src/pages/Overview.tsx
Normal file
@ -0,0 +1,181 @@
|
||||
import { createEventSignal } from '@solid-primitives/event-listener'
|
||||
import { createReconnectingWS } from '@solid-primitives/websocket'
|
||||
import { ApexOptions } from 'apexcharts'
|
||||
import byteSize from 'byte-size'
|
||||
import { SolidApexCharts } from 'solid-apexcharts'
|
||||
import { createEffect, createMemo, createSignal } from 'solid-js'
|
||||
import { wsEndpointURL } from '~/signals'
|
||||
import type { Connection } from '~/types'
|
||||
|
||||
const defaultChartOptions: ApexOptions = {
|
||||
chart: {
|
||||
toolbar: { show: false },
|
||||
zoom: { enabled: false },
|
||||
animations: { easing: 'linear', dynamicAnimation: { speed: 1000 } },
|
||||
},
|
||||
noData: { text: 'Loading...' },
|
||||
legend: {
|
||||
fontSize: '14px',
|
||||
labels: { colors: 'gray' },
|
||||
itemMargin: { horizontal: 64 },
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
grid: { yaxis: { lines: { show: false } } },
|
||||
stroke: { curve: 'smooth' },
|
||||
tooltip: { enabled: false },
|
||||
xaxis: { labels: { show: false }, axisTicks: { show: false } },
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: 'gray' },
|
||||
formatter(val) {
|
||||
return byteSize(val).toString()
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const Overview = () => {
|
||||
const [traffics, setTraffics] = createSignal<{ down: number; up: number }[]>(
|
||||
[],
|
||||
)
|
||||
const [memories, setMemories] = createSignal<number[]>([])
|
||||
|
||||
const trafficWS = createReconnectingWS(`${wsEndpointURL()}/traffic`)
|
||||
|
||||
const trafficWSMessageEvent = createEventSignal<{
|
||||
message: WebSocketEventMap['message']
|
||||
}>(trafficWS, 'message')
|
||||
|
||||
const traffic = () => {
|
||||
const data = trafficWSMessageEvent()?.data
|
||||
|
||||
return data ? (JSON.parse(data) as { down: number; up: number }) : null
|
||||
}
|
||||
|
||||
createEffect(() => {
|
||||
const t = traffic()
|
||||
|
||||
if (t) {
|
||||
setTraffics((traffics) => [...traffics, t].slice(-100))
|
||||
}
|
||||
})
|
||||
|
||||
const trafficChartOptions = createMemo<ApexOptions>(() => ({
|
||||
title: { text: 'Traffic', align: 'center', style: { color: 'gray' } },
|
||||
...defaultChartOptions,
|
||||
}))
|
||||
|
||||
const trafficChartSeries = createMemo(() => [
|
||||
{
|
||||
name: 'Down',
|
||||
data: traffics().map((t) => t.down),
|
||||
},
|
||||
{
|
||||
name: 'Up',
|
||||
data: traffics().map((t) => t.up),
|
||||
},
|
||||
])
|
||||
|
||||
const memoryWS = createReconnectingWS(`${wsEndpointURL()}/memory`)
|
||||
|
||||
const memoryWSMessageEvent = createEventSignal<{
|
||||
message: WebSocketEventMap['message']
|
||||
}>(memoryWS, 'message')
|
||||
|
||||
const memory = () => {
|
||||
const data = memoryWSMessageEvent()?.data
|
||||
|
||||
return data ? (JSON.parse(data) as { inuse: number }).inuse : null
|
||||
}
|
||||
|
||||
createEffect(() => {
|
||||
const m = memory()
|
||||
|
||||
if (m) {
|
||||
setMemories((memories) => [...memories, m].slice(-100))
|
||||
}
|
||||
})
|
||||
|
||||
const memoryChartOptions = createMemo<ApexOptions>(() => ({
|
||||
title: { text: 'Memory', align: 'center', style: { color: 'gray' } },
|
||||
...defaultChartOptions,
|
||||
}))
|
||||
|
||||
const memoryChartSeries = createMemo(() => [
|
||||
{
|
||||
name: 'memory',
|
||||
data: memories(),
|
||||
},
|
||||
])
|
||||
|
||||
const connectionsWS = createReconnectingWS(`${wsEndpointURL()}/connections`)
|
||||
|
||||
const connectionsWSMessageEvent = createEventSignal<{
|
||||
message: WebSocketEventMap['message']
|
||||
}>(connectionsWS, 'message')
|
||||
|
||||
const connection = () => {
|
||||
const data = connectionsWSMessageEvent()?.data
|
||||
|
||||
return data
|
||||
? (JSON.parse(data) as {
|
||||
downloadTotal: number
|
||||
uploadTotal: number
|
||||
connections: Connection[]
|
||||
})
|
||||
: null
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="stats w-full shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Upload</div>
|
||||
<div class="stat-value">
|
||||
{byteSize(traffic()?.up || 0).toString()}/s
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">Download</div>
|
||||
<div class="stat-value">
|
||||
{byteSize(traffic()?.down || 0).toString()}/s
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">Upload Total</div>
|
||||
<div class="stat-value">
|
||||
{byteSize(connection()?.uploadTotal || 0).toString()}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">Download Total</div>
|
||||
<div class="stat-value">
|
||||
{byteSize(connection()?.downloadTotal || 0).toString()}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">Active Connections</div>
|
||||
<div class="stat-value">{connection()?.connections.length || 0}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">Memory Usage</div>
|
||||
<div class="stat-value">{byteSize(memory() || 0).toString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto grid w-full max-w-screen-lg grid-cols-1 gap-4">
|
||||
<SolidApexCharts
|
||||
type="area"
|
||||
options={trafficChartOptions()}
|
||||
series={trafficChartSeries()}
|
||||
/>
|
||||
|
||||
<SolidApexCharts
|
||||
type="line"
|
||||
options={memoryChartOptions()}
|
||||
series={memoryChartSeries()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
55
src/pages/Proxies.tsx
Normal file
55
src/pages/Proxies.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import { For, createSignal, onMount } from 'solid-js'
|
||||
import { useRequest } from '~/signals'
|
||||
import { Proxy, ProxyProvider } from '~/types'
|
||||
|
||||
export const Proxies = () => {
|
||||
const request = useRequest()
|
||||
const [proxies, setProxies] = createSignal<Proxy[]>([])
|
||||
const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
|
||||
|
||||
onMount(async () => {
|
||||
const { proxies } = await request
|
||||
.get('proxies')
|
||||
.json<{ proxies: Record<string, Proxy> }>()
|
||||
|
||||
setProxies(Object.values(proxies))
|
||||
|
||||
const { providers } = await request
|
||||
.get('providers/proxies')
|
||||
.json<{ providers: Record<string, ProxyProvider> }>()
|
||||
|
||||
setProxyProviders(Object.values(providers))
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="flex flex-col">
|
||||
<div>
|
||||
<h1 class="py-4 text-lg font-semibold">Proxies</h1>
|
||||
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<For each={proxies()}>
|
||||
{(proxy) => (
|
||||
<div class="card card-bordered card-compact border-secondary p-4">
|
||||
{proxy.name}
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="py-4 text-lg font-semibold">Proxy Providers</h1>
|
||||
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<For each={proxyProviders()}>
|
||||
{(proxy) => (
|
||||
<div class="card card-bordered card-compact border-secondary p-4">
|
||||
{proxy.name}
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
3
src/pages/Rules.tsx
Normal file
3
src/pages/Rules.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export const Rules = () => {
|
||||
return <div>rules</div>
|
||||
}
|
||||
99
src/pages/Setup.tsx
Normal file
99
src/pages/Setup.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import { createForm } from '@felte/solid'
|
||||
import { validator } from '@felte/validator-zod'
|
||||
import { useNavigate } from '@solidjs/router'
|
||||
import { IconX } from '@tabler/icons-solidjs'
|
||||
import ky from 'ky'
|
||||
import { For } from 'solid-js'
|
||||
import { v4 as uuid } from 'uuid'
|
||||
import { z } from 'zod'
|
||||
import { endpointList, setEndpointList, setSelectedEndpoint } from '~/signals'
|
||||
|
||||
const schema = z.object({
|
||||
url: z.string().url().nonempty(),
|
||||
secret: z.string(),
|
||||
})
|
||||
|
||||
export const Setup = () => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const { form } = createForm<z.infer<typeof schema>>({
|
||||
extend: validator({ schema }),
|
||||
async onSubmit(values) {
|
||||
const { hello } = await ky.get(values.url).json<{ hello: string }>()
|
||||
|
||||
if (!hello) {
|
||||
return
|
||||
}
|
||||
|
||||
setEndpointList([
|
||||
{
|
||||
id: uuid(),
|
||||
url: values.url,
|
||||
secret: '',
|
||||
},
|
||||
...endpointList(),
|
||||
])
|
||||
},
|
||||
})
|
||||
|
||||
const onRemove = (id: string) =>
|
||||
setEndpointList(endpointList().filter((e) => e.id !== id))
|
||||
|
||||
return (
|
||||
<div class="mx-auto flex w-2/3 flex-col items-center gap-4 py-10">
|
||||
<form class="contents" use:form={form}>
|
||||
<div class="join flex w-full">
|
||||
<input
|
||||
name="url"
|
||||
type="url"
|
||||
class="input join-item input-bordered flex-1"
|
||||
placeholder="http://127.0.0.1:9000"
|
||||
list="defaultEndpoints"
|
||||
/>
|
||||
|
||||
<datalist id="defaultEndpoints">
|
||||
<option value="http://127.0.0.1:9000" />
|
||||
</datalist>
|
||||
|
||||
<input
|
||||
name="secret"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="input join-item input-bordered"
|
||||
placeholder="secret"
|
||||
/>
|
||||
|
||||
<button type="submit" class="btn btn-primary join-item uppercase">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex w-full flex-col gap-4">
|
||||
<For each={endpointList()}>
|
||||
{({ id, url }) => (
|
||||
<div
|
||||
class="badge badge-info flex w-full cursor-pointer items-center gap-4 py-4"
|
||||
onClick={() => {
|
||||
setSelectedEndpoint(id)
|
||||
navigate('/')
|
||||
}}
|
||||
>
|
||||
{url}
|
||||
|
||||
<button
|
||||
class="btn btn-circle btn-ghost btn-xs text-white"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onRemove(id)
|
||||
}}
|
||||
>
|
||||
<IconX />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
44
src/signals/index.ts
Normal file
44
src/signals/index.ts
Normal file
@ -0,0 +1,44 @@
|
||||
import { makePersisted } from '@solid-primitives/storage'
|
||||
import ky from 'ky'
|
||||
import { createSignal } from 'solid-js'
|
||||
import { themes } from '~/constants'
|
||||
|
||||
export const [selectedEndpoint, setSelectedEndpoint] = makePersisted(
|
||||
createSignal(''),
|
||||
{
|
||||
name: 'selectedEndpoint',
|
||||
storage: localStorage,
|
||||
},
|
||||
)
|
||||
|
||||
export const [endpointList, setEndpointList] = makePersisted(
|
||||
createSignal<
|
||||
{
|
||||
id: string
|
||||
url: string
|
||||
secret: string
|
||||
}[]
|
||||
>([]),
|
||||
{ name: 'endpointList', storage: localStorage },
|
||||
)
|
||||
|
||||
export const [curTheme, setCurTheme] = makePersisted(
|
||||
createSignal<(typeof themes)[number]>('business'),
|
||||
{ name: 'theme', storage: localStorage },
|
||||
)
|
||||
|
||||
export const endpoint = () =>
|
||||
endpointList().find(({ id }) => id === selectedEndpoint())
|
||||
|
||||
export const wsEndpointURL = () => endpoint()?.url.replace('http', 'ws')
|
||||
|
||||
export const useRequest = () => {
|
||||
const e = endpoint()
|
||||
|
||||
return ky.create({
|
||||
prefixUrl: e?.url,
|
||||
headers: {
|
||||
Authorization: e?.secret ? `Bearer ${e.secret}` : '',
|
||||
},
|
||||
})
|
||||
}
|
||||
124
src/types.d.ts
vendored
Normal file
124
src/types.d.ts
vendored
Normal file
@ -0,0 +1,124 @@
|
||||
declare module 'solid-js' {
|
||||
namespace JSX {
|
||||
interface Directives {
|
||||
form: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export type Proxy = {
|
||||
name: string
|
||||
type: string
|
||||
all?: string[]
|
||||
extra: Record<string, unknown>
|
||||
history: {
|
||||
time: string
|
||||
delay: number
|
||||
}[]
|
||||
udp: boolean
|
||||
xudp: boolean
|
||||
tfo: boolean
|
||||
now: string
|
||||
}
|
||||
|
||||
export type ProxyProvider = {
|
||||
name: string
|
||||
proxies: {
|
||||
alive: boolean
|
||||
type: string
|
||||
name: string
|
||||
tfo: boolean
|
||||
udp: boolean
|
||||
xudp: boolean
|
||||
id: string
|
||||
extra: Record<string, unknown>
|
||||
history: {
|
||||
time: string
|
||||
delay: number
|
||||
}[]
|
||||
}[]
|
||||
testUrl: string
|
||||
updatedAt: string
|
||||
vehicleType: string
|
||||
}
|
||||
|
||||
export type RuleProvider = {
|
||||
behavior: string
|
||||
format: string
|
||||
name: string
|
||||
ruleCount: number
|
||||
type: string
|
||||
updatedAt: string
|
||||
vehicleType: string
|
||||
}
|
||||
|
||||
export type Connection = {
|
||||
id: string
|
||||
download: number
|
||||
upload: number
|
||||
chains: string[]
|
||||
rule: string
|
||||
rulePayload: string
|
||||
start: string
|
||||
metadata: {
|
||||
network: string
|
||||
type: string
|
||||
destinationIP: string
|
||||
destinationPort: string
|
||||
dnsMode: string
|
||||
host: string
|
||||
inboundIP: string
|
||||
inboundName: string
|
||||
inboundPort: string
|
||||
inboundUser: string
|
||||
process: string
|
||||
processPath: string
|
||||
remoteDestination: string
|
||||
sniffHost: string
|
||||
sourceIP: string
|
||||
sourcePort: string
|
||||
specialProxy: string
|
||||
specialRules: string
|
||||
uid: number
|
||||
}
|
||||
}
|
||||
|
||||
export type Config = {
|
||||
port: number
|
||||
'socks-port': number
|
||||
'redir-port': number
|
||||
'tproxy-port': number
|
||||
'mixed-port': number
|
||||
tun: {
|
||||
enable: boolean
|
||||
device: string
|
||||
stack: string
|
||||
'dns-hijack': null
|
||||
'auto-route': boolean
|
||||
'auto-detect-interface': boolean
|
||||
'file-descriptor': number
|
||||
}
|
||||
'tuic-server': {
|
||||
enable: boolean
|
||||
listen: string
|
||||
certificate: string
|
||||
'private-key': string
|
||||
}
|
||||
'ss-config': string
|
||||
'vmess-config': string
|
||||
authentication: null
|
||||
'allow-lan': boolean
|
||||
'bind-address': string
|
||||
'inbound-tfo': boolean
|
||||
mode: 'rule' | 'global'
|
||||
UnifiedDelay: boolean
|
||||
'log-level': string
|
||||
ipv6: boolean
|
||||
'interface-name': string
|
||||
'geodata-mode': boolean
|
||||
'geodata-loader': string
|
||||
'tcp-concurrent': boolean
|
||||
'find-process-mode': string
|
||||
sniffing: boolean
|
||||
'global-client-fingerprint': boolean
|
||||
}
|
||||
37
tailwind.config.ts
Normal file
37
tailwind.config.ts
Normal file
@ -0,0 +1,37 @@
|
||||
export default {
|
||||
content: ['./src/**/*.{css,tsx}'],
|
||||
plugins: [require('daisyui')],
|
||||
daisyui: {
|
||||
themes: [
|
||||
'light',
|
||||
'dark',
|
||||
'cupcake',
|
||||
'bumblebee',
|
||||
'emerald',
|
||||
'corporate',
|
||||
'synthwave',
|
||||
'retro',
|
||||
'cyberpunk',
|
||||
'valentine',
|
||||
'halloween',
|
||||
'garden',
|
||||
'forest',
|
||||
'aqua',
|
||||
'lofi',
|
||||
'pastel',
|
||||
'fantasy',
|
||||
'wireframe',
|
||||
'black',
|
||||
'luxury',
|
||||
'dracula',
|
||||
'cmyk',
|
||||
'autumn',
|
||||
'business',
|
||||
'acid',
|
||||
'lemonade',
|
||||
'night',
|
||||
'coffee',
|
||||
'winter',
|
||||
],
|
||||
},
|
||||
}
|
||||
18
tsconfig.json
Normal file
18
tsconfig.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
"types": ["vite/client"],
|
||||
"noEmit": true,
|
||||
"isolatedModules": true,
|
||||
"paths": {
|
||||
"~/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
12
vite.config.ts
Normal file
12
vite.config.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import devtools from 'solid-devtools/vite'
|
||||
import { defineConfig } from 'vite'
|
||||
import solidPlugin from 'vite-plugin-solid'
|
||||
|
||||
export default defineConfig({
|
||||
resolve: {
|
||||
alias: {
|
||||
'~': '/src',
|
||||
},
|
||||
},
|
||||
plugins: [devtools(), solidPlugin()],
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user