mirror of https://gitee.com/IrisVega/frp.git
web/frpc&frps: support dark mode (#3327)
This commit is contained in:
parent
2f59e967a0
commit
31f40aa913
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||||
|
|
|
@ -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']
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
html.dark {
|
||||||
|
--el-bg-color: #343432;
|
||||||
|
--el-fill-color-blank: #343432;
|
||||||
|
background-color: #343432;
|
||||||
|
}
|
|
@ -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);
|
||||||
|
|
||||||
|
|
|
@ -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']
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
html.dark {
|
||||||
|
--el-bg-color: #343432;
|
||||||
|
--el-fill-color-blank: #343432;
|
||||||
|
background-color: #343432;
|
||||||
|
}
|
|
@ -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 {
|
||||||
|
|
|
@ -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)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue