Home Explore Help
Sign In
joker
/
frp
mirror of https://github.com/fatedier/frp/
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

web/frpc&frps: support dark mode (#3327)

fatedier 1 year ago
parent
2f59e967a0
commit
31f40aa913
19 changed files with 116 additions and 19 deletions
Split View Show Diff Stats
  1. 0 0
      assets/frpc/static/index-26827c97.css
  2. 0 0
      assets/frpc/static/index-a2ed7ed4.js
  3. 0 0
      assets/frpc/static/index-aa3c7267.css
  4. 0 0
      assets/frpc/static/index-fec891f3.js
  5. 2 2
      assets/frpc/static/index.html
  6. 0 0
      assets/frps/static/index-2a8cf2f5.js
  7. 0 0
      assets/frps/static/index-7b4711f8.css
  8. 0 0
      assets/frps/static/index-b8250b3f.js
  9. 3 3
      assets/frps/static/index.html
  10. 1 0
      web/frpc/components.d.ts
  11. 46 5
      web/frpc/src/App.vue
  12. 5 0
      web/frpc/src/assets/dark.css
  13. 2 1
      web/frpc/src/main.ts
  14. 1 0
      web/frps/components.d.ts
  15. 1 1
      web/frps/index.html
  16. 46 5
      web/frps/src/App.vue
  17. 5 0
      web/frps/src/assets/dark.css
  18. 2 2
      web/frps/src/components/ServerOverview.vue
  19. 2 0
      web/frps/src/main.ts

File diff suppressed because it is too large
+ 0 - 0
assets/frpc/static/index-26827c97.css


File diff suppressed because it is too large
+ 0 - 0
assets/frpc/static/index-a2ed7ed4.js


File diff suppressed because it is too large
+ 0 - 0
assets/frpc/static/index-aa3c7267.css


File diff suppressed because it is too large
+ 0 - 0
assets/frpc/static/index-fec891f3.js


+ 2 - 2
assets/frpc/static/index.html
View File 

@@ -4,8 +4,8 @@
 
 <head>
 
     <meta charset="utf-8">
 
     <title>frp client admin UI</title>
 
-  <script type="module" crossorigin src="./index-fec891f3.js"></script>
 
-  <link rel="stylesheet" href="./index-26827c97.css">
 
+  <script type="module" crossorigin src="./index-a2ed7ed4.js"></script>
 
+  <link rel="stylesheet" href="./index-aa3c7267.css">
 
 </head>
 
 
 <body>

File diff suppressed because it is too large
+ 0 - 0
assets/frps/static/index-2a8cf2f5.js


File diff suppressed because it is too large
+ 0 - 0
assets/frps/static/index-7b4711f8.css


File diff suppressed because it is too large
+ 0 - 0
assets/frps/static/index-b8250b3f.js


+ 3 - 3
assets/frps/static/index.html
View File 

@@ -1,11 +1,11 @@
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html lang="en" class="dark">
 
 
 <head>
 
     <meta charset="utf-8">
 
     <title>frps dashboard</title>
 
-  <script type="module" crossorigin src="./index-2a8cf2f5.js"></script>
 
-  <link rel="stylesheet" href="./index-4ce77078.css">
 
+  <script type="module" crossorigin src="./index-b8250b3f.js"></script>
 
+  <link rel="stylesheet" href="./index-7b4711f8.css">
 
 </head>
 
 
 <body>

+ 1 - 0
web/frpc/components.d.ts
View File 

@@ -16,6 +16,7 @@ declare module '@vue/runtime-core' {
 
     ElMenu: typeof import('element-plus/es')['ElMenu']
 
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
 
     ElRow: typeof import('element-plus/es')['ElRow']
 
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
 
     ElTable: typeof import('element-plus/es')['ElTable']
 
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
 
     Overview: typeof import('./src/components/Overview.vue')['default']

+ 46 - 5
web/frpc/src/App.vue
View File 

@@ -1,9 +1,24 @@
 
 <template>
 
   <div id="app">
 
     <header class="grid-content header-color">
 
-      <el-row>
 
-        <a class="brand" href="#">frp client</a>
 
-      </el-row>
 
+      <div class="header-content">
 
+        <div class="brand">
 
+          <a href="#">frp client</a>
 
+        </div>
 
+        <div class="dark-switch">
 
+          <el-switch
 
+            v-model="darkmodeSwitch"
 
+            inline-prompt
 
+            active-text="Dark"
 
+            inactive-text="Light"
 
+            @change="toggleDark"
 
+            style="
 
+              --el-switch-on-color: #444452;
 
+              --el-switch-off-color: #589ef8;
 
+            "
 
+          />
 
+        </div>
 
+      </div>
 
     </header>
 
     <section>
 
       <el-row>
 
@@ -33,6 +48,13 @@
 
 </template>
 
 
 <script setup lang="ts">
 
+import { ref } from "vue";
 
+import { useDark, useToggle } from "@vueuse/core";
 
+
 
+const isDark = useDark();
 
+const darkmodeSwitch = ref(isDark);
 
+const toggleDark = useToggle(isDark);
 
+
 
 const handleSelect = (key: string) => {
 
   if (key == "") {
 
     window.open("https://github.com/fatedier/frp");
 
@@ -42,7 +64,6 @@ const handleSelect = (key: string) => {
 
 
 <style>
 
 body {
 
-  background-color: #fafafa;
 
   margin: 0px;
 
   font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif;
 
 }
 
@@ -56,20 +77,40 @@ header {
 
   background: #58b7ff;
 
 }
 
 
+html.dark .header-color {
 
+  background: #395c74;
 
+}
 
+
 
+.header-content {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
 #content {
 
   margin-top: 20px;
 
   padding-right: 40px;
 
 }
 
 
 .brand {
 
+  display: flex;
 
+  justify-content: flex-start;
 
+}
 
+
 
+.brand a {
 
   color: #fff;
 
   background-color: transparent;
 
   margin-left: 20px;
 
-  float: left;
 
   line-height: 25px;
 
   font-size: 25px;
 
   padding: 15px 15px;
 
   height: 30px;
 
   text-decoration: none;
 
 }
 
+
 
+.dark-switch {
 
+  display: flex;
 
+  justify-content: flex-end;
 
+  flex-grow: 1;
 
+  padding-right: 40px;
 
+}
 
 </style>

+ 5 - 0
web/frpc/src/assets/dark.css
View File 

@@ -0,0 +1,5 @@
 
+html.dark {
 
+  --el-bg-color: #343432;
 
+  --el-fill-color-blank: #343432;
 
+  background-color: #343432;
 
+}

+ 2 - 1
web/frpc/src/main.ts
View File 

@@ -1,9 +1,10 @@
 
 import { createApp } from "vue";
 
 import "element-plus/dist/index.css";
 
+import "element-plus/theme-chalk/dark/css-vars.css";
 
 import App from "./App.vue";
 
 import router from "./router";
 
 
-// import './assets/custom.css'
 
+import "./assets/dark.css";
 
 
 const app = createApp(App);

+ 1 - 0
web/frps/components.d.ts
View File 

@@ -16,6 +16,7 @@ declare module '@vue/runtime-core' {
 
     ElPopover: typeof import('element-plus/es')['ElPopover']
 
     ElRow: typeof import('element-plus/es')['ElRow']
 
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
 
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
 
     ElTable: typeof import('element-plus/es')['ElTable']
 
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
 
     ElTag: typeof import('element-plus/es')['ElTag']

+ 1 - 1
web/frps/index.html
View File 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html lang="en" class="dark">
 
 
 <head>
 
     <meta charset="utf-8">

+ 46 - 5
web/frps/src/App.vue
View File 

@@ -1,9 +1,24 @@
 
 <template>
 
   <div id="app">
 
     <header class="grid-content header-color">
 
-      <el-row>
 
-        <a class="brand" href="#">frp</a>
 
-      </el-row>
 
+      <div class="header-content">
 
+        <div class="brand">
 
+          <a href="#">frp</a>
 
+        </div>
 
+        <div class="dark-switch">
 
+          <el-switch
 
+            v-model="darkmodeSwitch"
 
+            inline-prompt
 
+            active-text="Dark"
 
+            inactive-text="Light"
 
+            @change="toggleDark"
 
+            style="
 
+              --el-switch-on-color: #444452;
 
+              --el-switch-off-color: #589ef8;
 
+            "
 
+          />
 
+        </div>
 
+      </div>
 
     </header>
 
     <section>
 
       <el-row>
 
@@ -43,6 +58,13 @@
 
 </template>
 
 
 <script setup lang="ts">
 
+import { ref } from 'vue'
 
+import { useDark, useToggle } from '@vueuse/core'
 
+
 
+const isDark = useDark()
 
+const darkmodeSwitch = ref(isDark)
 
+const toggleDark = useToggle(isDark)
 
+
 
 const handleSelect = (key: string) => {
 
   if (key == '') {
 
     window.open('https://github.com/fatedier/frp')
 
@@ -52,7 +74,6 @@ const handleSelect = (key: string) => {
 
 
 <style>
 
 body {
 
-  background-color: #fafafa;
 
   margin: 0px;
 
   font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif;
 
 }
 
@@ -66,20 +87,40 @@ header {
 
   background: #58b7ff;
 
 }
 
 
+html.dark .header-color {
 
+  background: #395c74;
 
+}
 
+
 
+.header-content {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
 #content {
 
   margin-top: 20px;
 
   padding-right: 40px;
 
 }
 
 
 .brand {
 
+  display: flex;
 
+  justify-content: flex-start;
 
+}
 
+
 
+.brand a {
 
   color: #fff;
 
   background-color: transparent;
 
   margin-left: 20px;
 
-  float: left;
 
   line-height: 25px;
 
   font-size: 25px;
 
   padding: 15px 15px;
 
   height: 30px;
 
   text-decoration: none;
 
 }
 
+
 
+.dark-switch {
 
+  display: flex;
 
+  justify-content: flex-end;
 
+  flex-grow: 1;
 
+  padding-right: 40px;
 
+}
 
 </style>

+ 5 - 0
web/frps/src/assets/dark.css
View File 

@@ -0,0 +1,5 @@
 
+html.dark {
 
+  --el-bg-color: #343432;
 
+  --el-fill-color-blank: #343432;
 
+  background-color: #343432;
 
+}

+ 2 - 2
web/frps/src/components/ServerOverview.vue
View File 

@@ -173,10 +173,10 @@ fetchData()
 
 
 <style>
 
 .source {
 
-  border: 1px solid #eaeefb;
 
   border-radius: 4px;
 
   transition: 0.2s;
 
-  padding: 24px;
 
+  padding-left: 24px;
 
+  padding-right: 24px;
 
 }
 
 
 .server_info {

+ 2 - 0
web/frps/src/main.ts
View File 

@@ -1,9 +1,11 @@
 
 import { createApp } from 'vue'
 
 import 'element-plus/dist/index.css'
 
+import 'element-plus/theme-chalk/dark/css-vars.css'
 
 import App from './App.vue'
 
 import router from './router'
 
 
 import './assets/custom.css'
 
+import './assets/dark.css'
 
 
 const app = createApp(App)

Some files were not shown because too many files changed in this diff