初始提交：实习工作日志系统（设计方案 + Vue3 应用 + Electron 打包）

2026-10-15 23:55:27 +08:00
commit cfb984627d
50 changed files with 9223 additions and 0 deletions
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import Icon from '../components/Icon.vue'
+import { createUser, legacyDataExists, login, type Session } from '../db/auth'
+
+const emit = defineEmits<{ (e: 'login', s: Session): void }>()
+
+const mode = ref<'login' | 'create'>('login')
+const username = ref('')
+const password = ref('')
+const password2 = ref('')
+const migrate = ref(true)
+const legacyExists = ref(false)
+const error = ref('')
+const busy = ref(false)
+
+onMounted(async () => {
+  legacyExists.value = await legacyDataExists()
+})
+
+function switchMode(m: 'login' | 'create') {
+  mode.value = m
+  error.value = ''
+  password2.value = ''
+}
+
+async function submit() {
+  if (busy.value) return
+  error.value = ''
+  busy.value = true
+  try {
+    let s: Session
+    if (mode.value === 'login') {
+      s = await login(username.value, password.value)
+    } else {
+      if (password.value.length < 6) {
+        error.value = '登录密码至少 6 位'
+        busy.value = false
+        return
+      }
+      if (password.value !== password2.value) {
+        error.value = '两次输入的密码不一致'
+        busy.value = false
+        return
+      }
+      s = await createUser(username.value, password.value, migrate.value)
+    }
+    emit('login', s)
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : '操作失败'
+  }
+  busy.value = false
+}
+</script>
+
+<template>
+  <div class="login-page">
+    <div class="card login-card">
+      <div class="login-brand">
+        <div class="brand-icon"><Icon name="calendar" :size="22" /></div>
+        <div class="login-title">实习工作日志</div>
+        <div class="muted login-sub">打卡 · 记录 · 总结 · 备忘录 · 密码库</div>
+        <div class="muted login-sub">每位用户独立数据库，数据彼此隔离并保存在本机</div>
+      </div>
+      <div class="seg">
+        <button class="seg-btn" :class="{ active: mode === 'login' }" @click="switchMode('login')">登录</button>
+        <button class="seg-btn" :class="{ active: mode === 'create' }" @click="switchMode('create')">创建用户</button>
+      </div>
+      <input class="input" v-model="username" placeholder="用户名（2 到 20 个字符）" @keydown.enter="submit" />
+      <input type="password" class="input" v-model="password" :placeholder="mode === 'login' ? '登录密码' : '设置登录密码（至少 6 位）'" @keydown.enter="submit" />
+      <input v-if="mode === 'create'" type="password" class="input" v-model="password2" placeholder="再次输入密码" @keydown.enter="submit" />
+      <label v-if="mode === 'create' && legacyExists" class="mig-row">
+        <input type="checkbox" v-model="migrate" />
+        <span>导入本机原有工作日志数据到此用户（原数据保留不删除）</span>
+      </label>
+      <div v-if="error" class="form-error">{{ error }}</div>
+      <button class="btn btn-primary login-btn" :disabled="busy" @click="submit">
+        {{ mode === 'login' ? '登录' : '创建并进入' }}
+      </button>
+      <div class="muted login-note">
+        登录密码仅在本机用于身份校验，系统只保存密码的 PBKDF2 哈希；忘记密码将无法访问该用户数据
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-page {
+  min-height: 100vh;
+  background: var(--bg-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.login-card {
+  width: 400px;
+  max-width: 100%;
+  padding: 28px 26px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: var(--bg-page);
+}
+.login-brand { text-align: center; margin-bottom: 6px; }
+.brand-icon {
+  width: 46px;
+  height: 46px;
+  margin: 0 auto 10px;
+  border-radius: var(--radius-md);
+  background: var(--accent-bg);
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login-title { font-size: 18px; font-weight: 600; color: var(--text-1); }
+.login-sub { font-size: 12px; margin-top: 4px; line-height: 1.7; }
+
+.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
+.seg-btn {
+  flex: 1;
+  height: 30px;
+  border: none;
+  background: var(--bg-page);
+  color: var(--text-2);
+  cursor: pointer;
+  font-size: 13px;
+}
+.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
+.seg-btn.active { background: var(--accent-bg); color: var(--accent); }
+
+.mig-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-2);
+  cursor: pointer;
+  line-height: 1.6;
+}
+.mig-row input { margin-top: 3px; }
+
+.form-error { color: var(--danger); font-size: 12px; }
+.login-btn { margin-top: 2px; }
+.login-note { font-size: 12px; text-align: center; line-height: 1.7; }
+</style>