U dark mode

This commit is contained in:
zhenorzz 2022-07-09 15:33:13 +08:00
parent 0b2fe9406f
commit bc93bf151e
22 changed files with 3537 additions and 11985 deletions

11870
web/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -15,7 +15,7 @@
"cronstrue": "^1.113.0",
"diff": "^5.0.0",
"echarts": "^5.2.1",
"element-plus": "^2.1.4",
"element-plus": "^2.2.9",
"js-cookie": "^2.2.1",
"listenercount": "^1.0.1",
"normalize.css": "^8.0.1",
@ -52,7 +52,7 @@
"sass": "^1.32.12",
"typescript": "^4.6.2",
"vconsole": "^3.6.1",
"vite": "^2.9.0",
"vite": "^3.0.0-alpha.14",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-svg-icons": "^0.5.0",
"vue-tsc": "^0.33.2-patch.1"

View File

@ -1,23 +1,25 @@
<template>
<div style="padding: 0 15px" @click="toggleClick">
<svg
:class="{ 'is-active': isActive }"
class="hamburger"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
<el-icon
:size="18"
color="var(--el-text-color-primary)"
style="vertical-align: middle"
>
<Expand v-if="isActive" />
<Fold v-else />
</el-icon>
<!-- <svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64">
<path
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
/>
</svg>
</svg> -->
</div>
</template>
<script lang="ts">
export default { name: 'Hamburger' }
</script>
<script lang="ts" setup>
import { Expand, Fold } from '@element-plus/icons-vue'
defineProps({
isActive: {
type: Boolean,

View File

@ -1,2 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1651288933265" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23118" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M0 0h1024v1024H0z" fill="#FFFFFF" p-id="23119"></path><path d="M785.09056 297.86112l-0.01024-176.40448-253.61408 87.18336 253.62432 89.22112zM499.3024 197.64224L232.58112 102.4v184.1664l266.72128-88.92416zM334.1824 337.37728l44.46208-12.70784v53.97504l95.26272-34.9184v171.4688l-38.11328 12.6976v-25.38496l-63.50848 25.38496 0.27648 95.41632-38.37952 12.55424-0.28672-94.44352-63.21152 24.576 0.01024 19.05664-38.12352 12.6976 0.01024-171.45856 101.60128-31.75424v-57.15968z m101.61152 60.33408l-57.14944 22.2208v63.50848l57.14944-19.05664v-66.67264zM270.68416 521.54368l63.50848-22.23104-0.01024-66.67264-63.49824 22.2208v66.68288z m247.67488-308.40832l-342.9376 117.88288v469.9648l342.9376-114.3296V213.13536z m9.55392 489.41056c-123.38176 41.30816-248.24832 82.5344-371.54816 123.83232l-0.01024-508.0576L804.1472 102.4v202.16832l63.50848 20.10112-0.01024 489.0112-339.73248-111.13472z m266.6496-20.1728c-14.92992-53.98528-29.9008-108.19584-44.9024-162.54976-15.0528-54.49728-30.11584-109.24032-45.2608-164.15744-16.22016-6.28736-32.48128-12.60544-48.81408-18.944-14.85824 43.61216-29.76768 87.36768-44.6976 131.21536l-45.056 132.28032c16.57856 5.96992 33.16736 11.9296 49.68448 17.85856 6.4-20.1728 12.8-40.36608 19.18976-60.54912 30.49472 11.1616 60.9792 22.3232 91.46368 33.47456 6.5024 24.65792 12.99456 49.28512 19.51744 73.8304 16.32256 5.86752 32.63488 11.70432 48.87552 17.54112zM711.30112 535.8592c-10.5472-40.2944-21.10464-80.59904-31.58016-120.90368-10.31168 32.5632-20.60288 65.14688-30.90432 97.73056 20.8384 7.71072 41.65632 15.45216 62.48448 23.17312z m-30.53568 312.10496c-121.21088 75.776-241.60256 85.18656-365.38368 6.51264l-6.62528 10.35264c118.45632 75.264 236.3392 74.07616 357.65248 6.01088 7.10656-4.03456 14.08-8.192 20.992-12.51328L701.44 880.25088l31.87712-58.5728-66.53952 4.42368 13.98784 21.8624z" p-id="23120"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1657339864804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4316" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M783.74 366.41H658.37V239.48c0-97.57-79.38-176.95-176.95-176.95H240.26c-97.57 0-176.95 79.38-176.95 176.95v241.16c0 97.57 79.38 176.95 176.95 176.95h125.37v126.93c0 97.57 79.38 176.95 176.95 176.95h241.16c97.57 0 176.95-79.38 176.95-176.95V543.36c0-97.57-79.38-176.95-176.95-176.95zM138.22 480.64V239.48c0-56.26 45.77-102.04 102.04-102.04h241.16c56.26 0 102.04 45.77 102.04 102.04v241.16c0 56.26-45.77 102.04-102.04 102.04H240.26c-56.27 0-102.04-45.77-102.04-102.04z m747.56 303.88c0 56.26-45.77 102.04-102.04 102.04H542.58c-56.26 0-102.04-45.77-102.04-102.04V657.59h40.88c97.57 0 176.95-79.38 176.95-176.95v-39.32h125.37c56.26 0 102.04 45.77 102.04 102.04v241.16zM724.28 174.93c65.16 18.59 119.1 64.64 148 126.35 6.37 13.6 19.86 21.58 33.95 21.58 5.32 0 10.72-1.14 15.86-3.54 18.74-8.77 26.81-31.07 18.04-49.81-38.09-81.36-109.27-142.09-195.29-166.63-19.9-5.68-40.62 5.85-46.29 25.75-5.69 19.89 5.83 40.62 25.73 46.3zM298.98 865.78c-65.16-18.59-119.1-64.64-147.99-126.35-8.77-18.74-31.07-26.81-49.81-18.04-18.74 8.77-26.81 31.07-18.04 49.8 38.09 81.36 109.27 142.09 195.29 166.63 3.43 0.98 6.89 1.45 10.29 1.45 16.31 0 31.31-10.73 36-27.19 5.68-19.9-5.84-40.62-25.74-46.3z" p-id="4317"></path><path d="M418.59 466.75c47.2 0 85.6-38.4 85.6-85.6v-28.97c0-47.2-38.4-85.6-85.6-85.6H392.4v-23.41c0-20.69-16.77-37.46-37.46-37.46s-37.46 16.77-37.46 37.46v23.41h-19.17c-47.2 0-85.6 38.4-85.6 85.6v28.97c0 47.2 38.4 85.6 85.6 85.6h19.17v11.16c0 20.69 16.77 37.46 37.46 37.46s37.46-16.77 37.46-37.46v-11.16h26.19z m0-125.24c5.79 0 10.68 4.89 10.68 10.68v28.97c0 5.79-4.89 10.68-10.68 10.68H392.4v-50.33h26.19z m-120.27 50.33c-5.79 0-10.68-4.89-10.68-10.68v-28.97c0-5.79 4.89-10.68 10.68-10.68h19.17v50.33h-19.17zM736.99 578.24c-6.25-13.94-20.35-22.69-35.6-22.11-15.26 0.58-28.65 10.37-33.82 24.74L593 787.98c-7.01 19.46 3.09 40.92 22.55 47.93 4.19 1.51 8.47 2.22 12.69 2.22 15.35 0 29.75-9.51 35.24-24.78l4.4-12.22h86.91l6.66 14.85c8.46 18.88 30.62 27.32 49.5 18.86s27.32-30.62 18.86-49.5l-92.82-207.1z m-42.14 147.98l11.74-32.61 14.62 32.61h-26.36z" p-id="4318"></path></svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1651288933265" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23118" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M0 0h1024v1024H0z" fill="#FFFFFF" p-id="23119"></path><path d="M785.09056 297.86112l-0.01024-176.40448-253.61408 87.18336 253.62432 89.22112zM499.3024 197.64224L232.58112 102.4v184.1664l266.72128-88.92416zM334.1824 337.37728l44.46208-12.70784v53.97504l95.26272-34.9184v171.4688l-38.11328 12.6976v-25.38496l-63.50848 25.38496 0.27648 95.41632-38.37952 12.55424-0.28672-94.44352-63.21152 24.576 0.01024 19.05664-38.12352 12.6976 0.01024-171.45856 101.60128-31.75424v-57.15968z m101.61152 60.33408l-57.14944 22.2208v63.50848l57.14944-19.05664v-66.67264zM270.68416 521.54368l63.50848-22.23104-0.01024-66.67264-63.49824 22.2208v66.68288z m247.67488-308.40832l-342.9376 117.88288v469.9648l342.9376-114.3296V213.13536z m9.55392 489.41056c-123.38176 41.30816-248.24832 82.5344-371.54816 123.83232l-0.01024-508.0576L804.1472 102.4v202.16832l63.50848 20.10112-0.01024 489.0112-339.73248-111.13472z m266.6496-20.1728c-14.92992-53.98528-29.9008-108.19584-44.9024-162.54976-15.0528-54.49728-30.11584-109.24032-45.2608-164.15744-16.22016-6.28736-32.48128-12.60544-48.81408-18.944-14.85824 43.61216-29.76768 87.36768-44.6976 131.21536l-45.056 132.28032c16.57856 5.96992 33.16736 11.9296 49.68448 17.85856 6.4-20.1728 12.8-40.36608 19.18976-60.54912 30.49472 11.1616 60.9792 22.3232 91.46368 33.47456 6.5024 24.65792 12.99456 49.28512 19.51744 73.8304 16.32256 5.86752 32.63488 11.70432 48.87552 17.54112zM711.30112 535.8592c-10.5472-40.2944-21.10464-80.59904-31.58016-120.90368-10.31168 32.5632-20.60288 65.14688-30.90432 97.73056 20.8384 7.71072 41.65632 15.45216 62.48448 23.17312z m-30.53568 312.10496c-121.21088 75.776-241.60256 85.18656-365.38368 6.51264l-6.62528 10.35264c118.45632 75.264 236.3392 74.07616 357.65248 6.01088 7.10656-4.03456 14.08-8.192 20.992-12.51328L701.44 880.25088l31.87712-58.5728-66.53952 4.42368 13.98784 21.8624z" p-id="23120"></path></svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -58,6 +58,19 @@
/>
<div class="right">
<div class="international">
<el-switch
v-model="switchDark"
style="
--el-switch-on-color: var(--el-border-color);
--el-switch-off-color: var(--el-border-color);
margin-right: 18px;
height: 48px;
"
inline-prompt
:active-icon="Moon"
:inactive-icon="Sunny"
@change="toggleDark"
/>
<el-dropdown
trigger="click"
placement="bottom"
@ -209,6 +222,11 @@ import { NamespaceUserData, NamespaceOption } from '@/api/namespace'
import { getNamespace, setNamespace, removeNamespace } from '@/utils/namespace'
import { ElLoading, ElMessage } from 'element-plus'
import { ref, reactive, computed } from 'vue'
import { useDark, useToggle } from '@vueuse/core'
import { Sunny, Moon } from '@element-plus/icons-vue'
const isDark = useDark()
const switchDark = ref(isDark.value)
const toggleDark = useToggle(isDark)
const transformVisible = ref(false)
const transformType = ref('')
const qrcode = reactive({
@ -284,7 +302,6 @@ async function logout() {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
&-logo {
width: 25px;

View File

@ -231,8 +231,7 @@ export default defineComponent({
.tags-view-container {
height: 34px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
border-bottom: 1px solid var(--el-border-color-light);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
.tags-view-wrapper {
.tags-view-item {
@ -241,9 +240,8 @@ export default defineComponent({
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
border: 1px solid var(--el-border-color);
color: var(--el-text-color-regular);
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
@ -272,9 +270,9 @@ export default defineComponent({
}
}
&.active {
background-color: #42b983;
background-color: var(--el-color-success);
color: #fff;
border-color: #42b983;
border-color: var(--el-color-success);
&::before {
content: '';
background: #fff;

View File

@ -8,6 +8,7 @@ import i18n from '@/lang' // internationalization
import SvgIcon from '@/components/SvgIcon/index.vue' // svg component
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import 'vite-plugin-svg-icons/register' // register svg sprite map
import App from './App.vue'
const app = createApp(App)

View File

@ -74,9 +74,8 @@ div:focus {
.app-bar {
width: 100%;
border: 1px solid #EBEEF5;
margin-bottom: 5px;
padding: 10px;
background-color: #f2f6fc;
// border: 1px solid var(--el-border-color);
margin-bottom: 15px;
// background-color: var(--el-bg-color);
&-operation {margin-bottom:10px;};
}

View File

@ -9,7 +9,7 @@
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
background-color: $menuBg;
background-color: var(--el-bg-color);
height: calc(100vh - 50px);
position: fixed;
font-size: 0px;
@ -18,7 +18,7 @@
left: 0;
z-index: 1001;
overflow: hidden;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
@ -60,27 +60,22 @@
border: none;
height: 100%;
width: 100% !important;
background-color: $menuBg;
}
// menu hover
.submenu-title-noDropdown,
.el-sub-menu__title {
&:hover {
background-color: $menuHover !important;
}
}
.is-active>.el-sub-menu__title {
color: $subMenuActiveText !important;
}
& .nest-menu .el-sub-menu>.el-sub-menu__title,
& .el-sub-menu .el-menu-item {
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
&:hover {
background-color: $subMenuHover !important;
}
}
}
@ -183,7 +178,6 @@
.el-menu-item {
&:hover {
// you can use $subMenuHover
background-color: $menuHover !important;
}
}

View File

@ -1,23 +1,8 @@
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$sideBarWidth: 210px;
$sideBarWidth: 200px;
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}

View File

@ -69,17 +69,24 @@
>
<el-button
:disabled="!validateFilename(file, index)"
type="text"
type="primary"
link
:icon="Upload"
/>
</el-upload>
<el-button
:disabled="!validateFilename(file, index)"
type="text"
type="primary"
link
:icon="Edit"
@click="getProjectFileContent(file, index)"
/>
<el-button type="text" :icon="Delete" @click="removeFile(index)" />
<el-button
type="primary"
link
:icon="Delete"
@click="removeFile(index)"
/>
</el-row>
</el-form-item>
</template>
@ -92,7 +99,7 @@
<v-ace-editor
v-model:value="formData.content"
lang="sh"
theme="github"
:theme="isDark ? 'one_dark' : 'github'"
style="height: 500px; width: 100%"
/>
</el-form-item>
@ -118,9 +125,9 @@ import {
Edit,
Delete,
Check,
Loading,
Close,
Plus,
Close,
Loading,
} from '@element-plus/icons-vue'
import {
ProjectFileList,
@ -130,16 +137,21 @@ import {
ProjectFileRemove,
} from '@/api/project'
import { VAceEditor } from 'vue3-ace-editor'
import 'ace-builds/src-noconflict/mode-sh'
import 'ace-builds/src-noconflict/mode-python'
import 'ace-builds/src-noconflict/mode-php'
import 'ace-builds/src-noconflict/mode-batchfile'
import 'ace-builds/src-noconflict/theme-github'
import * as ace from 'ace-builds/src-noconflict/ace'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref, computed, watch } from 'vue'
import { NamespaceKey, getNamespaceId } from '@/utils/namespace'
import { HttpResponse, ID } from '@/api/types'
import { useDark } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
ace.config.set(
'basePath',
'https://cdn.jsdelivr.net/npm/ace-builds@' + ace.version + '/src-noconflict/'
)
ace.config.set(
'themePath',
'https://cdn.jsdelivr.net/npm/ace-builds@' + ace.version + '/src-noconflict/'
)
interface FormFileInfo {
id: number
projectId: number
@ -147,6 +159,7 @@ interface FormFileInfo {
content: string
state: string
}
const isDark = useDark()
const { t } = useI18n()
const props = defineProps({
modelValue: {
@ -165,6 +178,7 @@ const dialogVisible = computed({
emit('update:modelValue', val)
},
})
const formData = ref({
files: [] as FormFileInfo[],
content: '',

View File

@ -117,7 +117,7 @@
v-model="processVisible"
:fullscreen="$store.state.app.device === 'mobile'"
>
<template #title>
<template #header>
{{ $t('deployPage.processManager') }}
<el-popover
placement="bottom-start"
@ -140,7 +140,7 @@
</el-row>
</div>
<template #reference>
<el-button type="text">
<el-button type="primary" :text="true">
{{ $t('projectPage.predefinedVar') }}
</el-button>
</template>

View File

@ -52,7 +52,8 @@
>
<template #default="scope">
<Button
type="text"
type="primary"
link
:permissions="[pms.DeployDetail]"
@click="handleDetail(scope.row)"
>
@ -127,7 +128,8 @@
<span style="padding: 5px 0">[goploy ~]#</span>
<el-button
v-if="item.state === 1 && !(item.id in traceDetail)"
type="text"
type="primary"
link
@click="getPublishTraceDetail(item)"
>
{{ $t('deployPage.showDetail') }}
@ -165,7 +167,8 @@
<span style="padding: 5px 0">[goploy ~]#</span>
<el-button
v-if="trace.state === 1 && !(trace.id in traceDetail)"
type="text"
type="primary"
link
@click="getPublishTraceDetail(trace)"
>
{{ $t('deployPage.showDetail') }}
@ -191,7 +194,8 @@
<span style="padding: 5px 0">[goploy ~]#</span>
<el-button
v-if="trace.state === 1 && !(trace.id in traceDetail)"
type="text"
type="primary"
link
@click="getPublishTraceDetail(trace)"
>
{{ $t('deployPage.showDetail') }}
@ -220,7 +224,8 @@
<span>[goploy ~]#</span>
<el-button
v-if="trace.state === 1 && !(trace.id in traceDetail)"
type="text"
type="primary"
link
@click="getPublishTraceDetail(trace)"
>
{{ $t('deployPage.showDetail') }}

View File

@ -51,12 +51,12 @@
<el-table-column
prop="user"
:label="$t('member')"
width="80"
width="90"
align="center"
:fixed="$store.state.app.device === 'mobile' ? false : 'right'"
>
<template #default="scope">
<el-button type="text" @click="handleUser(scope.row)">
<el-button type="primary" link @click="handleUser(scope.row)">
{{ $t('view') }}
</el-button>
</template>

View File

@ -86,7 +86,8 @@
<span v-if="scope.row.autoDeploy === 0">{{ $t('close') }}</span>
<span v-else>{{ $t('open') }}</span>
<Button
type="text"
type="primary"
link
:icon="Edit"
:permissions="[pms.SwitchProjectWebhook]"
@click="handleAutoDeploy(scope.row)"
@ -185,7 +186,7 @@
ftp[s]://[username:password@]host.xz[:port]/path/to/repo<br />
sftp://host.xz[:port]/path/to/repo --user= --keyFile=
</template>
<el-icon style="vertical-align: middle" :size="16">
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
@ -541,7 +542,7 @@
<v-ace-editor
v-model:value="formData.afterPullScript"
:lang="getScriptLang(formData.afterPullScriptMode)"
theme="github"
:theme="isDark ? 'one_dark' : 'github'"
style="height: 400px; width: 100%"
placeholder="Already switched to project directory..."
:options="{ newLineMode: 'unix' }"
@ -627,7 +628,7 @@
<v-ace-editor
v-model:value="formData.afterDeployScript"
:lang="getScriptLang(formData.afterDeployScriptMode)"
theme="github"
:theme="isDark ? 'one_dark' : 'github'"
style="height: 400px; width: 100%"
:options="{ newLineMode: 'unix' }"
/>
@ -738,8 +739,10 @@ import {
import type { ElRadioGroup, ElForm } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref, computed } from 'vue'
import { useDark } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const isDark = useDark()
ace.config.set(
'basePath',
'https://cdn.jsdelivr.net/npm/ace-builds@' + ace.version + '/src-noconflict/'

View File

@ -26,27 +26,29 @@
</el-button>
</el-row>
</el-row>
<el-row class="chart-container" :gutter="10">
<el-col
v-for="(_, name) in chartNameMap"
:key="name"
:xs="24"
:sm="24"
:lg="12"
style="margin-bottom: 10px"
>
<div
:ref="
(el) => {
if (el) {
chartRefs[name] = el
<el-scrollbar class="chart-container">
<el-row style="width: 100%" :gutter="10">
<el-col
v-for="(_, name) in chartNameMap"
:key="name"
:xs="24"
:sm="24"
:lg="12"
style="margin-bottom: 10px"
>
<div
:ref="
(el) => {
if (el) {
chartRefs[name] = el
}
}
}
"
style="height: 288px; border: solid 1px #e6e6e6; padding: 10px 0"
></div>
</el-col>
</el-row>
"
style="height: 288px; border: 1px solid var(--el-border-color)"
></div>
</el-col>
</el-row>
</el-scrollbar>
<el-dialog
v-model="monitorDialogVisible"
:fullscreen="$store.state.app.device === 'mobile'"
@ -333,6 +335,7 @@ import Button from '@/components/Permission/Button.vue'
import { Refresh, Bell, Tickets, Edit, Delete } from '@element-plus/icons-vue'
import * as echarts from 'echarts/core'
import { LineChart } from 'echarts/charts'
import 'echarts/theme/dark-mushroom.js'
import { CanvasRenderer } from 'echarts/renderers'
import {
TitleComponent,
@ -354,9 +357,10 @@ import dayjs, { Dayjs } from 'dayjs'
import { ref, onActivated, ComponentPublicInstance } from 'vue'
import { deepClone, parseTime } from '@/utils'
import { useI18n } from 'vue-i18n'
import { useDark } from '@vueuse/core'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
const isDark = useDark()
const { t } = useI18n()
const store = useStore()
const route = useRoute()
@ -629,7 +633,16 @@ function report(chartName: string, values: Date[]) {
.request()
.then((response) => {
echarts.dispose(<HTMLDivElement>chartRefs.value[chartName])
let chart = echarts.init(<HTMLDivElement>chartRefs.value[chartName])
let chart
if (isDark.value) {
chart = echarts.init(
<HTMLDivElement>chartRefs.value[chartName],
'dark-mushroom'
)
} else {
chart = echarts.init(<HTMLDivElement>chartRefs.value[chartName])
}
let chartOption = deepClone(chartBaseOption)
chartOption.title.text = chartNameMap[chartName].title
chartOption.title.subtext = chartNameMap[chartName].subtitle
@ -668,7 +681,5 @@ function restoreFormData() {
.chart-container {
width: 100%;
max-height: calc(100vh - 180px);
overflow-y: auto;
@include scrollBar();
}
</style>

View File

@ -101,7 +101,7 @@
<template #default="scope">
{{ $t(`stateOption[${scope.row.state || 0}]`) }}
<Switch
:value="scope.row.state === 1"
:model-value="scope.row.state === 1"
active-color="#13ce66"
inactive-color="#ff4949"
:permissions="[pms.SwitchServerState]"
@ -403,7 +403,7 @@ import { HttpResponse } from '@/api/types'
import { NamespaceKey, getNamespaceId } from '@/utils/namespace'
import { ref, computed } from 'vue'
import { copy, humanSize } from '@/utils'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
@ -551,7 +551,6 @@ function getPublicKey() {
formProps.value.copyPubLoading = false
})
}
function handleInstallAgent() {
if (selectedItems.value.length === 0) {
ElMessage.warning('Please, select the item')

View File

@ -5,7 +5,7 @@
<el-row style="margin-right: 10px">
<el-button
:disabled="backwardHistory.length === 0"
type="text"
link
:icon="Back"
style="color: #303133; font-size: 14px"
@click="backward"
@ -13,7 +13,7 @@
</el-button>
<el-button
:disabled="forwardHistory.length === 0"
type="text"
link
:icon="Right"
style="color: #303133; font-size: 14px"
@click="forward"
@ -21,7 +21,7 @@
</el-button>
<el-button
:disabled="!wsConnected"
type="text"
link
:icon="Top"
style="color: #303133; font-size: 14px"
@click="dotdot(dir)"
@ -73,8 +73,8 @@
>
<Button
:disabled="dir === ''"
type="text"
style="color: #606266"
link
style="color: var(--el-text-color-regular)"
:permissions="[permission.SFTPUploadFile]"
>
{{ $t('upload') }}
@ -151,7 +151,7 @@
<el-dropdown-menu>
<el-dropdown-item v-if="selectedFile['isDir'] === true">
<el-button
type="text"
link
@click="dirOpen(`${dir}/${selectedFile['name']}`)"
>
{{ $t('open') }}
@ -179,7 +179,8 @@
</el-dropdown-item>
<el-dropdown-item divided>
<el-button
type="text"
link
type="primary"
@click="fileDetailDialogVisible = true"
>
{{ $t('detail') }}
@ -527,15 +528,15 @@ function getIcon(filename: string) {
}
.sftp-container {
flex-direction: column;
border: 1px solid #d8dce5;
border: 1px solid var(--el-border-color);
height: 100%;
.nav {
padding: 10px;
border-bottom: 1px solid #d8dce5;
border-bottom: 1px solid var(--el-border-color);
}
.operator {
padding: 5px 10px;
border-bottom: 1px solid #d8dce5;
border-bottom: 1px solid var(--el-border-color);
}
.files {
flex: 1;
@ -549,7 +550,7 @@ function getIcon(filename: string) {
width: 100px;
cursor: pointer;
&-selected {
outline: 1px solid #d8dce5;
outline: 1px solid var(--el-border-color);
border-radius: 4px;
}
}
@ -580,6 +581,6 @@ function getIcon(filename: string) {
</style>
<style>
.input-with-select .el-input-group__prepend {
background-color: #fff;
background-color: var(--el-bg-color);
}
</style>

View File

@ -60,7 +60,7 @@
<div class="server-list">
<div v-for="server in serverFilteredOption" :key="server.id">
<el-button
type="text"
link
class="server-item"
@click="selectServer(server)"
>
@ -72,7 +72,7 @@
</div>
<template #reference>
<el-button
type="text"
link
style="
color: #bfcbd9;
height: 45px;
@ -263,7 +263,6 @@ function enterCommand() {
.server-list {
height: 216px;
overflow-x: auto;
margin-left: 10px;
margin-top: 10px;
@include scrollBar();
}

View File

@ -16,6 +16,7 @@
"src/*"
]
},
"useUnknownInCatchVariables": false
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
"include": ["auto-imports.d.ts", "components.d.ts", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

3392
web/yarn.lock Normal file

File diff suppressed because it is too large Load Diff