ICKelin · superGCL · Oct 20, 2023 · Oct 20, 2023
diff --git a/web/.editorconfig b/web/.editorconfig
@@ -0,0 +1,15 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
+
+[*.vue]
+max_line_length = 320 # 最大行长度
diff --git a/web/.gitignore b/web/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/web/.vscode/extensions.json b/web/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/web/README.md b/web/README.md
@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GTUN</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/web/package.json b/web/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "gtun-web",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
+    "@vueuse/core": "^10.5.0",
+    "element-plus": "^2.4.0",
+    "md-editor-v3": "^4.8.1",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@types/node": "^20.8.6",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vue-tsc": "^1.8.5"
+  }
+}
diff --git a/web/postcss.config.js b/web/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/web/public/logo.svg b/web/public/logo.svg
diff --git a/web/src/App.vue b/web/src/App.vue
@@ -0,0 +1,12 @@
+<template>
+  <ElConfigProvider :locale="locale">
+    <RouterView />
+  </ElConfigProvider>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { ElConfigProvider } from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+
+const locale = ref(zhCn);
+</script>
diff --git a/web/src/apis/index.ts b/web/src/apis/index.ts
@@ -0,0 +1,119 @@
+import { MetaDataResult, MetaData, ApiResult, RegionData } from "@/types";
+
+/**
+ * 查询meta信息
+ */
+export function getMeta(): Promise<MetaData> {
+  return new Promise<MetaData>((resolve, reject) => {
+    fetch("/meta").then(async (res) => {
+      if (res.ok) {
+        const json = await res.json();
+        const data = json as MetaDataResult;
+        console.log("load meta", data);
+
+        if (data.code != 0) {
+          reject(data.message);
+        } else {
+          resolve(data.data);
+        }
+      } else {
+        reject(res.statusText);
+      }
+    });
+  });
+}
+
+/**
+ * 添加加速IP
+ * @param ip 需要加速的IP
+ * @param region 区域
+ */
+export function addIp(ip: string, region: string): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    fetch("/ip/add", {
+      method: "post",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ ip: ip, region: region }),
+    })
+      .then(async (res) => {
+        if (res.ok) {
+          const result = await res.json();
+          const { code, message } = result;
+          if (code === 0) {
+            resolve();
+          } else {
+            reject(message);
+          }
+        } else {
+          reject(res.statusText);
+        }
+      })
+      .catch((err) => {
+        reject(err.message || err);
+      });
+  });
+}
+
+/**
+ * 删除加速IP
+ * @param ip 加速IP
+ * @param region 区域
+ */
+export function deleteIp(ip: string, region: string): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    fetch("/ip/delete", {
+      method: "delete",
+      body: JSON.stringify({
+        region: region,
+        ip: ip,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then(async (res) => {
+        if (res.ok) {
+          const result = await res.json();
+          const { code, message } = result;
+          if (code === 0) {
+            resolve();
+          } else {
+            reject(message);
+          }
+        } else {
+          reject(res.statusText);
+        }
+      })
+      .catch((err) => {
+        reject(err.message || err);
+      });
+  });
+}
+
+/**
+ * 查询ip列表
+ * @param region 区域
+ */
+export function listIp(region?: string): Promise<RegionData> {
+  return new Promise<RegionData>((resolve, reject) => {
+    fetch("/ip/list" + (region ? "?region=" + region : "")).then(
+      async (res) => {
+        if (res.ok) {
+          const json = await res.json();
+          const data = json as ApiResult<RegionData>;
+          console.log("load ip list " + region, data);
+
+          if (data.code != 0) {
+            reject(data.message);
+          } else {
+            resolve(data.data);
+          }
+        } else {
+          reject(res.statusText);
+        }
+      }
+    );
+  });
+}
diff --git a/web/src/assets/logo.svg b/web/src/assets/logo.svg
diff --git a/web/src/components/HelloWorld.vue b/web/src/components/HelloWorld.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git a/web/src/layout/MainLayout.vue b/web/src/layout/MainLayout.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="h-full flex flex-col w-full dark:bg-black">
+    <header class="h-14 flex-shrink-0 border dark:border-gray-700 bg-[var(--el-fill-color-light)]">
+      <div class="h-full flex justify-between items-center container mx-auto">
+        <div class="flex space-x-4">
+          <div class="header-brand">GTUN</div>
+          <div class="header-menus flex space-x-4">
+            <div><router-link to="/">加速管理</router-link></div>
+            <div><router-link to="/config">系统配置</router-link></div>
+          </div>
+        </div>
+
+        <div class="flex space-x-4">
+          <div>
+            <el-button :circle="true" :icon="isDark ? Moon : Sunny" @click="toggleDark()"></el-button>
+          </div>
+          <div title="Github">
+            <a href="https://GitHub.com/ICKelin/gtun" target="_blank">
+              <el-icon size="28">
+                <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-6c8d2bba="">
+                  <path
+                    fill="currentColor"
+                    d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
+                  ></path>
+                </svg>
+              </el-icon>
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+    <main class="flex-grow container mx-auto py-4">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElButton, ElIcon } from "element-plus";
+import { useDark, useToggle } from "@vueuse/core";
+import { Moon, Sunny } from "@element-plus/icons-vue";
+
+const isDark = useDark();
+const toggleDark = useToggle(isDark);
+</script>
diff --git a/web/src/main.ts b/web/src/main.ts
@@ -0,0 +1,9 @@
+import { createApp } from "vue";
+import "./styles/index.css";
+import "element-plus/dist/index.css";
+import "element-plus/theme-chalk/dark/css-vars.css";
+import "./styles/dark/css-vars.css";
+import App from "./App.vue";
+import router from "./router";
+
+createApp(App).use(router).mount("#app");