feat: opt page style
This commit is contained in:
engigu
@@ -144,6 +144,166 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 高级感增强 - 微妙的渐变背景 */
|
||||
body {
|
||||
background: linear-gradient(135deg, var(--background) 0%, oklch(from var(--background) calc(l * 0.98) c h) 100%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.dark body {
|
||||
background: linear-gradient(135deg, var(--background) 0%, oklch(from var(--background) calc(l * 1.05) c h) 100%);
|
||||
}
|
||||
|
||||
/* 卡片增强 - 添加微妙阴影 */
|
||||
[class*="card"] {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
|
||||
}
|
||||
|
||||
[class*="card"]:hover {
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
.dark [class*="card"] {
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
|
||||
}
|
||||
|
||||
.dark [class*="card"]:hover {
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
|
||||
}
|
||||
|
||||
/* 按钮增强 - 更流畅的交互 */
|
||||
button, [role="button"] {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
button:active, [role="button"]:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* 输入框增强 - 聚焦效果 */
|
||||
input:focus, textarea:focus, select:focus {
|
||||
box-shadow: 0 0 0 3px oklch(from var(--ring) l c h / 0.1);
|
||||
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 链接增强 */
|
||||
a {
|
||||
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 表格增强 - 悬停效果 */
|
||||
table tbody tr {
|
||||
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
table tbody tr:hover {
|
||||
background-color: oklch(from var(--muted) l c h / 0.5);
|
||||
}
|
||||
|
||||
/* 模态框和弹出层增强 - 背景模糊 */
|
||||
[role="dialog"]::backdrop, [data-state="open"]::backdrop {
|
||||
backdrop-filter: blur(4px);
|
||||
animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 代码块增强 */
|
||||
code, pre {
|
||||
background: oklch(from var(--muted) l c h / 0.5);
|
||||
border-radius: calc(var(--radius) - 2px);
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 徽章和标签增强 */
|
||||
[class*="badge"], [class*="tag"] {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
}
|
||||
|
||||
[class*="badge"]:hover, [class*="tag"]:hover {
|
||||
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
/* 加载动画增强 */
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
oklch(from var(--muted) l c h / 0.3) 0%,
|
||||
oklch(from var(--muted) l c h / 0.5) 50%,
|
||||
oklch(from var(--muted) l c h / 0.3) 100%
|
||||
);
|
||||
background-size: 1000px 100%;
|
||||
animation: shimmer 2s infinite linear;
|
||||
}
|
||||
|
||||
/* 滚动条美化增强 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: oklch(from var(--muted-foreground) l c h / 0.2);
|
||||
border-radius: 4px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: oklch(from var(--muted-foreground) l c h / 0.3);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background: oklch(from var(--muted-foreground) l c h / 0.3);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb:hover {
|
||||
background: oklch(from var(--muted-foreground) l c h / 0.4);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
/* 选中文本样式 */
|
||||
::selection {
|
||||
background: oklch(from var(--primary) l c h / 0.2);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.dark ::selection {
|
||||
background: oklch(from var(--primary) l c h / 0.3);
|
||||
}
|
||||
|
||||
/* Number input spinner buttons - dark mode */
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
|
||||
@@ -215,13 +215,26 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="terminalRef" class="terminal-container w-full h-full bg-[#1e1e1e]" />
|
||||
<div ref="terminalRef" class="terminal-container w-full h-full !bg-[#1e1e1e]" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.terminal-container {
|
||||
background: #1e1e1e !important;
|
||||
}
|
||||
|
||||
.terminal-container :deep(.xterm) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.terminal-container :deep(.xterm-viewport) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #4a4a4a #1e1e1e;
|
||||
background: #1e1e1e !important;
|
||||
}
|
||||
|
||||
.terminal-container :deep(.xterm-screen) {
|
||||
background: #1e1e1e !important;
|
||||
}
|
||||
|
||||
.terminal-container :deep(.xterm-viewport::-webkit-scrollbar) {
|
||||
|
||||
@@ -426,11 +426,11 @@ onUnmounted(() => {
|
||||
</Card>
|
||||
|
||||
<Card class="lg:col-span-3 h-[400px] sm:h-[400px]">
|
||||
<CardHeader class="pb-0">
|
||||
<CardHeader class="pb-2">
|
||||
<CardTitle class="text-base sm:text-lg">任务占比</CardTitle>
|
||||
<CardDescription class="text-xs sm:text-sm">最近{{ chartDays }}天任务执行分布</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="pt-0 pb-8">
|
||||
<CardContent class="pb-8">
|
||||
<div id="pie-chart" class="w-full h-[300px] sm:h-[300px]">
|
||||
<div v-if="!chartsLoaded" class="h-full flex items-center justify-center text-muted-foreground text-sm">
|
||||
加载中...
|
||||
|
||||
@@ -13,13 +13,13 @@ function reconnect() {
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-[calc(100vh-120px)] sm:h-[calc(100vh-100px)]">
|
||||
<div class="flex items-center justify-between p-2 border rounded-t-md bg-[#252526]">
|
||||
<div class="flex items-center justify-between p-2 border border-[#3c3c3c] rounded-t-md bg-[#252526]">
|
||||
<span class="text-xs font-medium text-gray-300">终端</span>
|
||||
<Button variant="ghost" size="icon" class="h-6 w-6 text-gray-400 hover:text-white" @click="reconnect" title="重新连接">
|
||||
<RefreshCw class="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex-1 border border-t-0 rounded-b-md overflow-hidden">
|
||||
<div class="flex-1 border border-[#3c3c3c] border-t-0 rounded-b-md overflow-hidden bg-[#1e1e1e]">
|
||||
<XTerminal ref="terminalRef" :font-size="13" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user