guoswork
/
frp
mirror of https://gitee.com/IrisVega/frp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
fatedier 2023-02-22 14:15:21 +08:00 committed by GitHub
parent 2f59e967a0
commit 31f40aa913
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 224 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/frpc/static/index-26827c97.css
View File

File diff suppressed because one or more lines are too long

32
assets/frpc/static/index-a2ed7ed4.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/frpc/static/index-aa3c7267.css Normal file
View File

File diff suppressed because one or more lines are too long

32
assets/frpc/static/index-fec891f3.js
View File

File diff suppressed because one or more lines are too long

4
assets/frpc/static/index.html
View File

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

74
assets/frps/static/index-2a8cf2f5.js
View File

File diff suppressed because one or more lines are too long

2
assets/frps/static/index-4ce77078.css → assets/frps/static/index-7b4711f8.css
View File

File diff suppressed because one or more lines are too long

74
assets/frps/static/index-b8250b3f.js Normal file
View File

File diff suppressed because one or more lines are too long

6
assets/frps/static/index.html
View File

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

1
web/frpc/components.d.ts vendored
View File

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

51
web/frpc/src/App.vue
View File

@ -1,9 +1,24 @@
<template> <template>
<div id="app"> <div id="app">
<header class="grid-content header-color"> <header class="grid-content header-color">
<el-row> <div class="header-content">
<a class="brand" href="#">frp client</a> <div class="brand">
</el-row> <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> </header>
<section> <section>
<el-row> <el-row>
@ -33,6 +48,13 @@
</template> </template>
<script setup lang="ts"> <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) => { const handleSelect = (key: string) => {
if (key == "") { if (key == "") {
window.open("https://github.com/fatedier/frp"); window.open("https://github.com/fatedier/frp");
@ -42,7 +64,6 @@ const handleSelect = (key: string) => {
<style> <style>
body { body {
background-color: #fafafa;
margin: 0px; margin: 0px;
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif; font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif;
} }
@ -56,20 +77,40 @@ header {
background: #58b7ff; background: #58b7ff;
} }
html.dark .header-color {
background: #395c74;
}
.header-content {
display: flex;
align-items: center;
}
#content { #content {
margin-top: 20px; margin-top: 20px;
padding-right: 40px; padding-right: 40px;
} }
.brand { .brand {
display: flex;
justify-content: flex-start;
}
.brand a {
color: #fff; color: #fff;
background-color: transparent; background-color: transparent;
margin-left: 20px; margin-left: 20px;
float: left;
line-height: 25px; line-height: 25px;
font-size: 25px; font-size: 25px;
padding: 15px 15px; padding: 15px 15px;
height: 30px; height: 30px;
text-decoration: none; text-decoration: none;
} }
.dark-switch {
display: flex;
justify-content: flex-end;
flex-grow: 1;
padding-right: 40px;
}
</style> </style>

5
web/frpc/src/assets/dark.css Normal file
View File

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

3
web/frpc/src/main.ts
View File

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

1
web/frps/components.d.ts vendored
View File

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

2
web/frps/index.html
View File

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

51
web/frps/src/App.vue
View File

@ -1,9 +1,24 @@
<template> <template>
<div id="app"> <div id="app">
<header class="grid-content header-color"> <header class="grid-content header-color">
<el-row> <div class="header-content">
<a class="brand" href="#">frp</a> <div class="brand">
</el-row> <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> </header>
<section> <section>
<el-row> <el-row>
@ -43,6 +58,13 @@
</template> </template>
<script setup lang="ts"> <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) => { const handleSelect = (key: string) => {
if (key == '') { if (key == '') {
window.open('https://github.com/fatedier/frp') window.open('https://github.com/fatedier/frp')
@ -52,7 +74,6 @@ const handleSelect = (key: string) => {
<style> <style>
body { body {
background-color: #fafafa;
margin: 0px; margin: 0px;
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif; font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif;
} }
@ -66,20 +87,40 @@ header {
background: #58b7ff; background: #58b7ff;
} }
html.dark .header-color {
background: #395c74;
}
.header-content {
display: flex;
align-items: center;
}
#content { #content {
margin-top: 20px; margin-top: 20px;
padding-right: 40px; padding-right: 40px;
} }
.brand { .brand {
display: flex;
justify-content: flex-start;
}
.brand a {
color: #fff; color: #fff;
background-color: transparent; background-color: transparent;
margin-left: 20px; margin-left: 20px;
float: left;
line-height: 25px; line-height: 25px;
font-size: 25px; font-size: 25px;
padding: 15px 15px; padding: 15px 15px;
height: 30px; height: 30px;
text-decoration: none; text-decoration: none;
} }
.dark-switch {
display: flex;
justify-content: flex-end;
flex-grow: 1;
padding-right: 40px;
}
</style> </style>

5
web/frps/src/assets/dark.css Normal file
View File

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

4
web/frps/src/components/ServerOverview.vue
View File

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

2
web/frps/src/main.ts
View File

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