8a12744/CheckInApp
0
0
Fork 0
mirror of https://github.com/Cccc-owo/CheckInApp.git synced 2026-06-17 14:06:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

frontend: add dark mode support

Browse Source
This commit is contained in:
黄竣淘
2026-01-03 12:48:25 +08:00
parent 827c9198ae
commit f46c2a039b
11 changed files with 710 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/DashboardView.vue
-36
View File
@@ -335,13 +335,6 @@ onMounted(async () => {
margin: 0 auto;
}
.card-header {
display: flex;
align-items: center;
gap: 8px;
font-weight: bold;
}
.loading-container {
padding: 20px;
}
@@ -357,37 +350,8 @@ onMounted(async () => {
padding: 20px;
}
.hint {
margin-bottom: 20px;
color: #909399;
font-size: 14px;
}
.last-check-in {
width: 100%;
margin-top: 20px;
}
.label {
font-weight: bold;
margin-bottom: 10px;
color: #606266;
}
.status-card {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
/* 修复按钮图标对齐 */
:deep(.ant-btn) {
display: inline-flex;
align-items: center;
justify-content: center;
}
:deep(.ant-btn .anticon) {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
</style>
frontend/src/views/SettingsView.vue
+6 -13
View File
@@ -2,11 +2,11 @@
<Layout>
<div class="settings-view">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-gray-800 mb-6">个人设置</h1>
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6">个人设置</h1>
<!-- 基本信息卡片 -->
<div class="md3-card p-6 mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4 flex items-center">
<UserOutlined class="mr-2" />
基本信息
</h2>
@@ -32,7 +32,7 @@
<!-- 修改邮箱 -->
<div class="md3-card p-6 mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4 flex items-center">
<EditOutlined class="mr-2" />
修改个人信息
</h2>
@@ -77,7 +77,7 @@
<!-- 设置/修改密码 -->
<div class="md3-card p-6">
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4 flex items-center">
<KeyOutlined class="mr-2" />
{{ hasPassword ? '修改密码' : '设置密码' }}
</h2>
@@ -296,14 +296,7 @@ onMounted(() => {
</script>
<style scoped>
.md3-card {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.md3-card:hover {
box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.10);
.settings-view {
min-height: 100%;
}
</style>
frontend/src/views/TasksView.vue
+13 -13
View File
@@ -7,7 +7,7 @@
<div class="flex items-center justify-between mb-4">
<div>
<h1 class="text-4xl font-bold text-gradient mb-2">任务管理</h1>
<p class="text-gray-600">管理您的自动打卡任务</p>
<p class="text-gray-600 dark:text-gray-400">管理您的自动打卡任务</p>
</div>
<a-button
type="primary"
@@ -28,11 +28,11 @@
<div class="fluent-card p-6 animate-slide-up">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600 mb-1">总任务数</p>
<p class="text-3xl font-bold text-primary-600">{{ taskStore.taskStats.total }}</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-1">总任务数</p>
<p class="text-3xl font-bold text-primary-600 dark:text-primary-400">{{ taskStore.taskStats.total }}</p>
</div>
<div class="w-12 h-12 bg-primary-100 rounded-md3 flex items-center justify-center">
<FileTextOutlined class="text-2xl text-primary-600" />
<div class="w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-md3 flex items-center justify-center">
<FileTextOutlined class="text-2xl text-primary-600 dark:text-primary-400" />
</div>
</div>
</div>
@@ -42,11 +42,11 @@
<div class="fluent-card p-6 animate-slide-up" style="animation-delay: 0.1s">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600 mb-1">启用中</p>
<p class="text-3xl font-bold text-green-600">{{ taskStore.taskStats.active }}</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-1">启用中</p>
<p class="text-3xl font-bold text-green-600 dark:text-green-400">{{ taskStore.taskStats.active }}</p>
</div>
<div class="w-12 h-12 bg-green-100 rounded-md3 flex items-center justify-center">
<CheckCircleOutlined class="text-2xl text-green-600" />
<div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-md3 flex items-center justify-center">
<CheckCircleOutlined class="text-2xl text-green-600 dark:text-green-400" />
</div>
</div>
</div>
@@ -56,11 +56,11 @@
<div class="fluent-card p-6 animate-slide-up" style="animation-delay: 0.2s">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600 mb-1">已禁用</p>
<p class="text-3xl font-bold text-gray-600">{{ taskStore.taskStats.inactive }}</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-1">已禁用</p>
<p class="text-3xl font-bold text-gray-600 dark:text-gray-300">{{ taskStore.taskStats.inactive }}</p>
</div>
<div class="w-12 h-12 bg-gray-100 rounded-md3 flex items-center justify-center">
<StopOutlined class="text-2xl text-gray-600" />
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-md3 flex items-center justify-center">
<StopOutlined class="text-2xl text-gray-600 dark:text-gray-300" />
</div>
</div>
</div>