mei/goodBaby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善后端并新增 Vue3 WebUI

Browse Source 
后端:
- 修复登录校验、DB 并发(单例+WAL+纯Go sqlite)、会话密钥持久化等核心缺陷
- 新增 Timer CRUD/签到/手动触发、执行日志、仪表盘、驱动元数据等 API
- 统一驱动接口: 带 context 的执行器、真实错误返回、敏感字段掩码、连通性测试
- 补全钉钉执行器; Timer 触发/提醒去重; 配置支持默认值与环境变量覆盖

前端:
- Vite+Vue3+TS+Pinia+Element Plus, 由驱动元数据动态渲染配置表单
- 登录/仪表盘(倒计时环)/定时器/规则/账号/日志/设置页面, 支持暗色模式
- 主题色 #66ccff, 信号波纹 logo, go:embed 单二进制部署

构建: Dockerfile 增加前端构建阶段; 补充各驱动配置文档

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
mei
2026-07-26 22:19:41 +08:00
co-authored by Claude Fable 5
parent 89e8b7fd66
commit 79774070fc
110 changed files with 8936 additions and 849 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/frontend/src/layouts/MainLayout.vue
+313
View File
@@ -0,0 +1,313 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
Odometer,
Timer as TimerIcon,
Operation,
User,
Document,
Setting,
SwitchButton,
Moon,
Sunny,
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import LogoMark from '@/components/LogoMark.vue'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const menus = [
{ path: '/dashboard', title: '仪表盘', icon: Odometer },
{ path: '/timers', title: '定时器', icon: TimerIcon },
{ path: '/rules', title: '规则', icon: Operation },
{ path: '/accounts', title: '账号', icon: User },
{ path: '/logs', title: '执行日志', icon: Document },
{ path: '/settings', title: '设置', icon: Setting },
]
const activePath = computed(() => `/${route.path.split('/')[1] ?? ''}`)
const isDark = ref(document.documentElement.classList.contains('dark'))
function toggleDark() {
isDark.value = !isDark.value
document.documentElement.classList.toggle('dark', isDark.value)
localStorage.setItem('gb-theme', isDark.value ? 'dark' : 'light')
}
// 恢复上次的主题选择
if (localStorage.getItem('gb-theme') === 'dark' && !isDark.value) {
toggleDark()
}
async function handleLogout() {
await userStore.logout()
ElMessage.success('已退出登录')
router.push({ name: 'login' })
}
</script>
<template>
<div class="layout">
<!-- 侧边栏 -->
<aside class="aside">
<div class="logo">
<div class="logo-mark"><LogoMark :size="22" /></div>
<div class="logo-name">
<span class="logo-text">goodBaby</span>
<span class="logo-sub">摇篮系统</span>
</div>
</div>
<nav class="nav">
<RouterLink
v-for="item in menus"
:key="item.path"
:to="item.path"
class="nav-item"
:class="{ active: activePath === item.path }"
>
<el-icon :size="17"><component :is="item.icon" /></el-icon>
<span>{{ item.title }}</span>
</RouterLink>
</nav>
<div class="aside-footer">
<div class="footer-quote">goodBaby v2</div>
</div>
</aside>
<!-- 主区域 -->
<div class="content">
<header class="header">
<div class="header-title">{{ route.meta.title ?? '' }}</div>
<div class="header-actions">
<button class="icon-btn" :title="isDark ? '切换到亮色' : '切换到暗色'" @click="toggleDark">
<el-icon :size="17"><Moon v-if="!isDark" /><Sunny v-else /></el-icon>
</button>
<el-dropdown>
<span class="user-chip">
<span class="user-avatar">{{ userStore.user?.username?.[0]?.toUpperCase() }}</span>
{{ userStore.user?.username }}
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="router.push('/settings')">
<el-icon><Setting /></el-icon>设置
</el-dropdown-item>
<el-dropdown-item divided @click="handleLogout">
<el-icon><SwitchButton /></el-icon>退出登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</header>
<main class="main">
<RouterView v-slot="{ Component }">
<Transition name="page" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>
</main>
</div>
</div>
</template>
<style scoped>
.layout {
height: 100%;
display: flex;
}
/* ---------- 侧边栏：墨色 + 药丸导航 ---------- */
.aside {
width: 224px;
flex-shrink: 0;
background: linear-gradient(180deg, var(--gb-ink) 0%, var(--gb-ink-soft) 100%);
display: flex;
flex-direction: column;
padding: 20px 14px;
box-sizing: border-box;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 8px 22px;
}
.logo-mark {
width: 38px;
height: 38px;
border-radius: 12px;
background: linear-gradient(135deg, var(--gb-primary) 0%, #3fa9e0 100%);
display: flex;
align-items: center;
justify-content: center;
color: #0b2b3d;
box-shadow: 0 4px 12px rgb(102 204 255 / 0.45);
}
.logo-name {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.logo-text {
color: #fff;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
}
.logo-sub {
color: rgb(255 255 255 / 0.45);
font-size: 11px;
letter-spacing: 0.2em;
}
.nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.nav-item {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 13px;
border-radius: 10px;
color: rgb(255 255 255 / 0.62);
text-decoration: none;
font-size: 14px;
transition:
background 0.2s var(--gb-ease),
color 0.2s var(--gb-ease),
transform 0.2s var(--gb-ease);
}
.nav-item:hover {
background: rgb(255 255 255 / 0.07);
color: rgb(255 255 255 / 0.9);
transform: translateX(2px);
}
.nav-item.active {
background: linear-gradient(135deg, var(--gb-primary) 0%, #3fa9e0 100%);
color: #0b2b3d;
font-weight: 600;
box-shadow: 0 4px 14px rgb(102 204 255 / 0.4);
}
.aside-footer {
margin-top: auto;
padding: 12px 8px 4px;
}
.footer-quote {
color: rgb(255 255 255 / 0.28);
font-size: 12px;
line-height: 1.9;
letter-spacing: 0.04em;
}
/* ---------- 主区域 ---------- */
.content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.header {
height: 60px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
background: color-mix(in srgb, var(--gb-card) 82%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--el-border-color-extra-light);
position: sticky;
top: 0;
z-index: 10;
}
.header-title {
font-size: 15px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.header-actions {
display: flex;
align-items: center;
gap: 14px;
}
.icon-btn {
width: 34px;
height: 34px;
border: none;
border-radius: 10px;
background: transparent;
color: var(--el-text-color-regular);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s var(--gb-ease);
}
.icon-btn:hover {
background: var(--el-fill-color);
}
.user-chip {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--el-text-color-primary);
font-size: 14px;
outline: none;
padding: 4px 10px 4px 4px;
border-radius: 999px;
transition: background 0.2s var(--gb-ease);
}
.user-chip:hover {
background: var(--el-fill-color);
}
.user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gb-primary) 0%, #3fa9e0 100%);
color: #0b2b3d;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.main {
flex: 1;
overflow-y: auto;
padding: 24px 28px 40px;
}
</style>