feat: connection & logs

.github/workflows/deploy.yml

@@ -0,0 +1,28 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@v4
+
+      - name: Install and Build 🔧
+        run: |
+          pnpm i
+          pnpm run build
+ 
+      - name: Deploy 🚀
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

.husky/pre-commit

@@ -0,0 +1,2 @@
+pnpm run lint
+pnpm run format

.prettierrc.json

@@ -1,5 +1,9 @@
 
 {
+  "plugins": [
+    "prettier-plugin-organize-imports",
+    "prettier-plugin-tailwindcss"
+  ],
   "$schema": "https://json.schemastore.org/prettierrc",
   "semi": false,
   "singleAttributePerLine": true,

package.json

@@ -1,7 +1,6 @@
 {
   "name": "sing-box-dashboard",
   "version": "1.0.0",
-  "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,14 +9,18 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --fix",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "prepare": "husky"
   },
   "dependencies": {
+    "@eslint/plugin-kit": "^0.2.3",
     "@heroicons/vue": "^2.1.5",
     "@vueuse/core": "^11.2.0",
     "axios": "^1.7.7",
     "dayjs": "^1.11.13",
     "lodash": "^4.17.21",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "pretty-bytes": "^6.1.1",
     "theme-change": "^2.5.0",
     "uuid": "^11.0.3",
@@ -39,6 +42,7 @@
     "daisyui": "^4.12.14",
     "eslint": "^9.14.0",
     "eslint-plugin-vue": "^9.30.0",
+    "husky": "^9.1.7",
     "npm-run-all2": "^7.0.1",
     "postcss": "^8.4.48",
     "prettier": "^3.3.3",
@@ -48,5 +52,6 @@
     "vite": "^5.4.10",
     "vite-plugin-vue-devtools": "^7.5.4",
     "vue-tsc": "^2.1.10"
-  }
+  },
+  "packageManager": "pnpm@9.12.1"
 }

src/App.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import Home from './views/HomePage.vue';
-import SetupPage from './views/SetupPage.vue';
-import { activeBackend } from './store/setup';
-
+import { theme } from './store/config'
+import { activeBackend } from './store/setup'
+import Home from './views/HomePage.vue'
+import SetupPage from './views/SetupPage.vue'
 </script>
 
 <template>
-  <div class="h-dvh w-screen overflow-x-hidden bg-base-100 flex">
+  <div
+    class="flex h-dvh w-screen overflow-x-hidden bg-base-100 font-twemoji"
+    :data-theme="theme"
+  >
     <SetupPage v-if="!activeBackend"></SetupPage>
     <Home v-else></Home>
   </div>

src/api/index.ts

@@ -5,7 +5,12 @@ import axios from 'axios'
 import { ref, watch } from 'vue'
 
 axios.interceptors.request.use((config) => {
-  config.baseURL = activeBackend.value?.protocol + '://' + activeBackend.value?.host + ':' + activeBackend.value?.port
+  config.baseURL =
+    activeBackend.value?.protocol +
+    '://' +
+    activeBackend.value?.host +
+    ':' +
+    activeBackend.value?.port
   config.headers['Authorization'] = 'Bearer ' + activeBackend.value?.password
   return config
 })
@@ -15,37 +20,41 @@ export const fetchVersionAPI = () => {
   return axios.get<{ version: string }>('/version')
 }
 
-watch(activeBackend, async (val) => {
-  if (val) {
-    const { data } = await fetchVersionAPI()
+watch(
+  activeBackend,
+  async (val) => {
+    if (val) {
+      const { data } = await fetchVersionAPI()
 
-    version.value = data.version
-  }
-}, { immediate: true })
+      version.value = data.version
+    }
+  },
+  { immediate: true },
+)
 
 export const fetchProxiesAPI = () => {
   return axios.get<{ proxies: Record<string, Proxy> }>('/proxies')
 }
 
-export const selectProxyAPI = (proxyGroup: string ,name: string) => {
+export const selectProxyAPI = (proxyGroup: string, name: string) => {
   return axios.put(`/proxies/${encodeURIComponent(proxyGroup)}`, { name })
 }
 
 export const fetchProxyLatencyAPI = (proxyName: string, url: string, timeout: number) => {
   return axios.get<{ delay: number }>(`/proxies/${encodeURIComponent(proxyName)}/delay`, {
     params: {
       url,
-      timeout
-    }
+      timeout,
+    },
   })
 }
 
 export const fetchProxyGroupLatencyAPI = (proxyName: string, url: string, timeout: number) => {
   return axios.get<{ delay: number }>(`/group/${encodeURIComponent(proxyName)}/delay`, {
     params: {
       url,
-      timeout
-    }
+      timeout,
+    },
   })
 }
 
@@ -73,18 +82,30 @@ export const flushFakeIPAPI = () => {
   return axios.post('/cache/fakeip/flush')
 }
 
-const getWsUrl = (url: string) => {
-  return `${activeBackend.value?.protocol === 'https' ? 'wss' : 'ws'}://${activeBackend.value?.host}:${activeBackend.value?.port}/${url}?token=${activeBackend.value?.password}`
+const createWebSocket = <T>(url: string, searchParams?: Record<string, string>) => {
+  const backend = activeBackend.value
+  const resurl = new URL(
+    `${backend?.protocol === 'https' ? 'wss' : 'ws'}://${backend?.host}:${backend?.port}/${url}`,
+  )
+
+  resurl.searchParams.append('token', backend?.password || '')
+
+  if (searchParams) {
+    Object.entries(searchParams).forEach(([key, value]) => {
+      resurl.searchParams.append(key, value)
+    })
+  }
+
+  return useWebSocket<T>(resurl, {
+    autoClose: false,
+    autoReconnect: true,
+  })
 }
 
 export const fetchConnectionsAPI = <T>() => {
-  return useWebSocket<T>(
-    getWsUrl('connections'),
-  )
+  return createWebSocket<T>('connections')
 }
 
-export const fetchLogsAPI = <T>() => {
-  return useWebSocket<T>(
-    getWsUrl('logs'),
-  )
-}
+export const fetchLogsAPI = <T>(params: Record<string, string> = {}) => {
+  return createWebSocket<T>('logs', params)
+}