194 lines
5.0 KiB
Vue
Executable File
194 lines
5.0 KiB
Vue
Executable File
<template>
|
|
<router-view />
|
|
<button class="theme-toggle" @click="toggleTheme" :title="isDark ? '切换亮色' : '切换暗色'">
|
|
{{ isDark ? '☀️' : '🌙' }}
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const isDark = ref(false)
|
|
|
|
function toggleTheme() {
|
|
isDark.value = !isDark.value
|
|
document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : '')
|
|
localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
|
|
}
|
|
|
|
onMounted(() => {
|
|
const saved = localStorage.getItem('theme')
|
|
if (saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
isDark.value = true
|
|
document.documentElement.setAttribute('data-theme', 'dark')
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
/* =============================================
|
|
CloudSearch Design System — Global Tokens
|
|
============================================= */
|
|
:root {
|
|
/* ── Backgrounds ── */
|
|
--bg: #f0f2f5;
|
|
--bg-card: #ffffff;
|
|
--bg-input: #f5f7fa;
|
|
--bg-page: #f0f2f5;
|
|
--bg-card-header: linear-gradient(135deg, #f8f9fc 0%, #eef1f8 100%);
|
|
|
|
/* ── Text ── */
|
|
--text: #1d2129;
|
|
--text-secondary: #4e5969;
|
|
--text-tertiary: #86909c;
|
|
--text-placeholder: #c9cdd4;
|
|
|
|
/* ── Borders ── */
|
|
--border: #e5e6eb;
|
|
--border-light: #f2f3f5;
|
|
|
|
/* ── Primary ── */
|
|
--primary: #409eff;
|
|
--primary-hover: #66b1ff;
|
|
--primary-light: rgba(64, 158, 255, 0.08);
|
|
--primary-soft: #ecf5ff;
|
|
|
|
/* ── Shadows ── */
|
|
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
|
|
|
|
/* ── Radius ── */
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 20px;
|
|
|
|
/* ── Sizing ── */
|
|
--sidebar-w: 240px;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg: #141414;
|
|
--bg-card: #1d1d1d;
|
|
--bg-input: #2a2a2a;
|
|
--bg-page: #0f0f0f;
|
|
--bg-card-header: linear-gradient(135deg, #1d1d1d 0%, #1a1a1a 100%);
|
|
|
|
--text: #e5e5e5;
|
|
--text-secondary: #999999;
|
|
--text-tertiary: #666666;
|
|
--text-placeholder: #555555;
|
|
|
|
--border: #333333;
|
|
--border-light: #2a2a2a;
|
|
|
|
--primary: #409eff;
|
|
--primary-hover: #66b1ff;
|
|
--primary-light: rgba(64, 158, 255, 0.15);
|
|
--primary-soft: rgba(64, 158, 255, 0.1);
|
|
|
|
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.2);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
|
|
[data-theme="dark"] .el-card,
|
|
[data-theme="dark"] .el-dialog,
|
|
[data-theme="dark"] .el-menu,
|
|
[data-theme="dark"] .el-table,
|
|
[data-theme="dark"] .el-select-dropdown,
|
|
[data-theme="dark"] .el-popover {
|
|
--el-bg-color: var(--bg-card) !important;
|
|
--el-border-color: var(--border) !important;
|
|
--el-text-color-primary: var(--text) !important;
|
|
}
|
|
[data-theme="dark"] .el-dialog__body,
|
|
[data-theme="dark"] .el-table__body td {
|
|
background-color: var(--bg-card) !important;
|
|
}
|
|
[data-theme="dark"] .el-table__header th {
|
|
background-color: #262626 !important;
|
|
}
|
|
[data-theme="dark"] .el-input__wrapper,
|
|
[data-theme="dark"] .el-select .el-input__wrapper {
|
|
background-color: var(--bg-input) !important;
|
|
border-color: var(--border) !important;
|
|
box-shadow: 0 0 0 1px var(--border) inset !important;
|
|
}
|
|
[data-theme="dark"] .el-input__inner,
|
|
[data-theme="dark"] .el-textarea__inner {
|
|
background-color: var(--bg-input) !important;
|
|
color: var(--text) !important;
|
|
}
|
|
[data-theme="dark"] .el-button--default {
|
|
background: var(--bg-card);
|
|
border-color: var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.theme-toggle {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
z-index: 99;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-card);
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--shadow-md);
|
|
transition: all 0.3s;
|
|
}
|
|
.theme-toggle:hover { transform: scale(1.1); border-color: var(--primary); }
|
|
|
|
#app { min-height: 100vh; background: var(--bg-page); color: var(--text); }
|
|
|
|
/* ── Global element-plus overrides ── */
|
|
.el-card {
|
|
border-radius: var(--radius-lg) !important;
|
|
border: 1px solid var(--border) !important;
|
|
box-shadow: var(--shadow-sm) !important;
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
.el-card:hover {
|
|
box-shadow: var(--shadow-md) !important;
|
|
}
|
|
.el-card__header {
|
|
padding: 16px 20px !important;
|
|
border-bottom: 1px solid var(--border-light) !important;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
background: var(--bg-card-header);
|
|
}
|
|
.el-card__body {
|
|
padding: 20px !important;
|
|
}
|
|
|
|
/* ── Typography helpers ── */
|
|
.form-tip {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
line-height: 1.6;
|
|
}
|
|
.page-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
.section-divider {
|
|
border-top: 1px solid var(--border-light);
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* ── Fade transition ── */
|
|
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
|
|
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
|
</style>
|