feat: 完整功能迭代 — 移动端+PC端全面优化

新增: - 今日纪要 (6分类+彩色标签+时间选择器) - 客户经理PC端工作台 (我的数据,5模块CRUD) - 用户管理页 (支局长修改角色) - 客户备注/收支费用(金额+单位)/联系人管理 - 拜访人姓名+电话字段 - 客户导入导出/旧周报导入模板下载 - 序号列+分页(25/50/100) 修复/优化: - Hash路由→HTML5 History, Casdoor回调正常 - 时区统一为Asia/Shanghai (today_cst) - 数据库懒加载→selectinload预加载 - 日期解析兼容ISO datetime字符串 - 文件上传定位修复 (position:relative) - 表单button type='button'防止误提交 - 分管领导权限(只读客户档案,不可编辑) - 侧边栏折叠+SVG图标 - 拜访方式/紧急度统一chip风格 - 时间范围统一为el-time-picker(is-range) - 全局CSS设计变量+box-sizing修复滚动条 Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-23 11:40:03 +08:00
parent a1886074dd
commit e7af0e15ab
37 changed files with 4561 additions and 643 deletions
@@ -12,6 +12,12 @@ const submitLoading = ref(false)

 const categories = ['行政事务', '合同整理', '发票处理', '内部会议', '培训学习', '其他']

+const catColors: Record<string, string> = {
+  '行政事务': '#1C3738', '合同整理': '#4A6741', '发票处理': '#C4934A',
+  '内部会议': '#B8472E', '培训学习': '#5B7FA5', '其他': '#7B7568',
+}
+
+const timeRangeValue = ref<any>(null)
 const form = ref({
  note_date: todayStr(),
  category: '其他',
@@ -19,6 +25,15 @@ const form = ref({
  time_range: '',
 })

+function onTimeRangeChange(val: [string, string] | null) {
+  form.value.time_range = val ? val.join('-') : ''
+}
+function parseTimeRange(str: string): [string, string] | null {
+  if (!str || !str.includes('-')) return null
+  const parts = str.split('-')
+  return parts.length >= 2 ? [parts[0], parts[1]] as [string, string] : null
+}
+
 onMounted(async () => {
  if (isEdit.value) {
    try {
@@ -30,6 +45,7 @@ onMounted(async () => {
        content: n.content || '',
        time_range: n.time_range || '',
      }
+      timeRangeValue.value = parseTimeRange(n.time_range)
    } catch (_) {}
  }
 })
@@ -65,42 +81,194 @@ async function handleDelete() {

 <template>
  <div class="form-page">
-    <div class="form-header">
-      <el-button text @click="router.back()">← 返回</el-button>
-      <h3>{{ isEdit ? '编辑纪要' : '今日纪要' }}</h3>
-      <span style="width:60px"></span>
-    </div>
-    <el-form label-position="top">
-      <el-form-item label="日期">
+    <!-- ═══ Editorial Header ═══ -->
+    <header class="form-editorial-header">
+      <button type="button" class="form-back-btn" @click="router.back()">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="19" y1="12" x2="5" y2="12"></line>
+          <polyline points="12 19 5 12 12 5"></polyline>
+        </svg>
+      </button>
+      <div class="form-title-group">
+        <h2 class="form-title">{{ isEdit ? '编辑纪要' : '今日纪要' }}</h2>
+        <span class="form-subtitle">DAILY NOTE</span>
+      </div>
+      <div class="form-rule"></div>
+    </header>
+
+    <el-form label-position="top" class="editorial-form">
+      <el-form-item>
+        <template #label>
+          <span class="form-label">日期</span>
+        </template>
        <el-date-picker v-model="form.note_date" type="date" style="width:100%" />
      </el-form-item>
-      <el-form-item label="分类">
+
+      <el-form-item>
+        <template #label>
+          <span class="form-label">分类</span>
+        </template>
        <div class="category-grid">
-          <el-button
-            v-for="c in categories" :key="c"
-            :type="form.category === c ? 'primary' : ''"
-            size="small"
+          <button
+            v-for="c in categories"
+            :key="c"
+            type="button"
+            class="cat-chip"
+            :class="{ 'cat-chip--active': form.category === c }"
+            :style="form.category === c ? { background: catColors[c], borderColor: catColors[c], color: '#fff' } : {}"
            @click="form.category = c"
-          >{{ c }}</el-button>
+          >
+            {{ c }}
+          </button>
        </div>
      </el-form-item>
-      <el-form-item label="时间范围（可选）">
-        <el-input v-model="form.time_range" placeholder="如 9:00-11:00" />
+
+      <el-form-item>
+        <template #label>
+          <span class="form-label">时间范围 <span class="form-label-hint">可选</span></span>
+        </template>
+        <el-time-picker
+          v-model="timeRangeValue"
+          is-range
+          format="HH:mm"
+          value-format="HH:mm"
+          range-separator="至"
+          start-placeholder="开始"
+          end-placeholder="结束"
+          style="width:100%"
+          @change="onTimeRangeChange"
+        />
      </el-form-item>
-      <el-form-item label="工作内容" required>
+
+      <el-form-item>
+        <template #label>
+          <span class="form-label">工作内容 <span class="form-label-required">*</span></span>
+        </template>
        <el-input v-model="form.content" type="textarea" :rows="5" placeholder="今天做了什么..." />
      </el-form-item>
-      <div style="margin-top:24px; display:flex; gap:12px">
-        <el-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit" style="flex:1">提交</el-button>
-        <el-button v-if="isEdit" type="danger" size="large" @click="handleDelete">删除</el-button>
+
+      <div class="form-actions">
+        <button class="submit-btn" :disabled="submitLoading" @click="handleSubmit">
+          <span v-if="submitLoading" class="btn-loading"></span>
+          {{ isEdit ? '保存修改' : '提交纪要' }}
+        </button>
+        <button v-if="isEdit" type="button" class="delete-btn" @click="handleDelete">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="3 6 5 6 21 6"></polyline>
+            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+          </svg>
+          删除
+        </button>
      </div>
    </el-form>
  </div>
 </template>

 <style scoped>
-.form-page { max-width: 500px; margin: 0 auto; }
-.form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
-.form-header h3 { margin: 0; }
+/* ═══ Page ═══ */
+.form-page { max-width: 100%; margin: 0 auto; padding-bottom: 20px; }
+
+/* ═══ Editorial Header ═══ */
+.form-editorial-header {
+  display: flex; align-items: flex-start; gap: 14px;
+  margin-bottom: 26px; flex-wrap: wrap;
+}
+
+.form-back-btn {
+  background: var(--surface); border: 1px solid var(--warm-border);
+  padding: 8px 10px; cursor: pointer; color: var(--warm-gray);
+  display: flex; align-items: center; transition: all var(--transition);
+  flex-shrink: 0; margin-top: 2px;
+}
+.form-back-btn:hover { color: var(--ink); border-color: var(--ink); }
+
+.form-title-group {
+  display: flex; flex-direction: column; gap: 0; flex: 1;
+}
+
+.form-title {
+  margin: 0; font-family: 'ZCOOL XiaoWei', STSong, serif;
+  font-size: 24px; font-weight: 400; color: var(--ink);
+  letter-spacing: 0.06em; line-height: 1.3;
+}
+
+.form-subtitle {
+  font-family: 'JetBrains Mono', 'SF Mono', monospace;
+  font-size: 9px; color: var(--gold); letter-spacing: 0.2em;
+}
+
+.form-rule {
+  width: 100%; height: 2px; background: var(--warm-border);
+  margin-top: 6px; position: relative;
+}
+.form-rule::after {
+  content: ''; position: absolute; left: 0; top: 0;
+  width: 32px; height: 2px; background: var(--gold);
+}
+
+/* ═══ Form Labels ═══ */
+.form-label {
+  font-family: 'ZCOOL XiaoWei', STSong, serif !important;
+  font-size: 14px !important; color: var(--ink) !important;
+  letter-spacing: 0.04em; font-weight: 500 !important;
+}
+.form-label-hint {
+  font-family: 'Noto Serif SC', STSong, serif;
+  font-size: 11px; color: var(--warm-gray);
+  letter-spacing: 0.03em; font-weight: 400; margin-left: 6px;
+}
+.form-label-required { color: var(--vermilion); margin-left: 2px; }
+
+.editorial-form .el-form-item { margin-bottom: 20px; }
+
+/* ═══ Category Grid ═══ */
 .category-grid { display: flex; flex-wrap: wrap; gap: 8px; }
+
+.cat-chip {
+  padding: 10px 16px;
+  background: var(--surface);
+  border: 1px solid var(--warm-border);
+  color: var(--ink);
+  font-family: 'Noto Serif SC', STSong, serif;
+  font-size: 13px;
+  letter-spacing: 0.03em;
+  cursor: pointer;
+  transition: all 0.25s;
+}
+
+.cat-chip:hover { border-color: var(--gold); }
+.cat-chip--active { font-weight: 600; }
+
+/* ═══ Actions ═══ */
+.form-actions {
+  display: flex; gap: 10px; margin-top: 28px;
+}
+
+.submit-btn {
+  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 16px; background: var(--ink); color: #fff; border: none;
+  font-family: 'ZCOOL XiaoWei', STSong, serif;
+  font-size: 16px; letter-spacing: 0.08em; cursor: pointer; transition: all 0.25s;
+}
+.submit-btn:hover { background: var(--ink-light); }
+.submit-btn:active { transform: scale(0.98); }
+.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+
+.delete-btn {
+  display: flex; align-items: center; gap: 6px;
+  padding: 16px 20px;
+  background: var(--surface); color: var(--vermilion);
+  border: 1px solid var(--vermilion);
+  font-family: 'Noto Serif SC', STSong, serif;
+  font-size: 14px; letter-spacing: 0.04em; cursor: pointer; transition: all 0.25s;
+}
+.delete-btn:hover { background: var(--vermilion); color: #fff; }
+
+.btn-loading {
+  width: 16px; height: 16px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff; border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
 </style>