v6ole/qiji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
新增:
- 今日纪要 (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>
This commit is contained in:
v6ole
2026-06-23 11:40:03 +08:00
parent a1886074dd
commit e7af0e15ab
37 changed files with 4561 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/mobile/Home.vue
+503 -64
View File
@@ -17,8 +17,13 @@ const loading = ref(false)
const todayTotal = computed(() => todayVisitCount.value + todayNoteCount.value)
const categoryColors: Record<string, string> = {
'行政事务': '#409EFF', '合同整理': '#67C23A', '发票处理': '#E6A23C',
'内部会议': '#F56C6C', '培训学习': '#909399', '其他': '#B37FEB',
'行政事务': '#1C3738', '合同整理': '#4A6741', '发票处理': '#C4934A',
'内部会议': '#B8472E', '培训学习': '#5B7FA5', '其他': '#7B7568',
}
const categoryGlyphs: Record<string, string> = {
'行政事务': '政', '合同整理': '约', '发票处理': '票',
'内部会议': '议', '培训学习': '学', '其他': '杂',
}
async function loadToday() {
@@ -52,85 +57,519 @@ onMounted(loadToday)
<template>
<div class="mobile-home">
<!-- Today Summary -->
<div class="today-badge">
<el-icon :size="48"><Notebook /></el-icon>
<div class="badge-text">
<div class="badge-count">{{ todayTotal }}</div>
<div class="badge-label">今日已录入（拜访{{ todayVisitCount }} + 纪要{{ todayNoteCount }}）</div>
<!-- ═══ Editorial Stat Banner ═══ -->
<div class="stat-banner">
<div class="stat-masthead">
<span class="stat-label-sm">TODAY</span>
<span class="stat-date">{{ new Date().toLocaleDateString('zh-CN', { month:'long', day:'numeric', weekday:'short' }) }}</span>
</div>
<div class="stat-main">
<span class="stat-number">{{ todayTotal }}</span>
<span class="stat-unit">条记录</span>
<div class="stat-breakdown">
<span class="stat-piece">拜访 <strong>{{ todayVisitCount }}</strong></span>
<span class="stat-sep">·</span>
<span class="stat-piece">纪要 <strong>{{ todayNoteCount }}</strong></span>
</div>
</div>
<!-- Decorative ink-wash corner -->
<div class="stat-ornament"></div>
</div>
<!-- ═══ Primary Quick Actions ═══ -->
<div class="quick-actions">
<el-button type="primary" size="large" @click="router.push('/m/visit/new')" style="flex:1">+ 今日拜访</el-button>
<el-button type="success" size="large" @click="router.push('/m/note/new')" style="flex:1">📝 今日纪要</el-button>
<button class="action-btn action-btn--primary" @click="router.push('/m/visit/new')">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<span class="action-btn__text">今日拜访</span>
</button>
<button class="action-btn action-btn--secondary" @click="router.push('/m/note/new')">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</svg>
<span class="action-btn__text">今日纪要</span>
</button>
</div>
<!-- ═══ Secondary Quick Links ═══ -->
<div class="quick-links">
<el-button @click="router.push('/m/work-plan/new')">📋 工作计划</el-button>
<el-button @click="router.push('/m/mini-biz/new')">💼 商机跟单</el-button>
<el-button @click="router.push('/m/key-visit/new')">⭐ 要客拜访</el-button>
<button class="link-chip" @click="router.push('/m/work-plan/new')">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
工作计划
</button>
<button class="link-chip" @click="router.push('/m/mini-biz/new')">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="1" x2="12" y2="23"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
商机跟单
</button>
<button class="link-chip" @click="router.push('/m/key-visit/new')">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
要客拜访
</button>
</div>
<div v-loading="loading">
<!-- Daily Notes -->
<!-- ═══ Section Divider ═══ -->
<div class="section-head" v-if="dailyNotes.length || visits.length">
<span class="section-title">今日记录</span>
<span class="section-line"></span>
</div>
<div v-loading="loading" class="records-area">
<!-- ═══ Daily Notes ═══ -->
<template v-if="dailyNotes.length">
<h4>📝 今日纪要</h4>
<el-card v-for="n in dailyNotes" :key="n.id" class="note-card" shadow="hover">
<div class="card-header">
<el-tag :color="categoryColors[n.category]" effect="dark" size="small">{{ n.category }}</el-tag>
<span v-if="n.time_range" class="time">{{ n.time_range }}</span>
<article
v-for="(n, i) in dailyNotes"
:key="n.id"
class="record-card record-card--note"
:class="{ 'record-card--offset': i % 2 === 1 }"
@click="router.push(`/m/note/${n.id}/edit`)"
>
<div class="record-accent" :style="{ background: categoryColors[n.category] || '#7B7568' }"></div>
<div class="record-body">
<div class="record-header">
<span class="record-glyph" :style="{ background: categoryColors[n.category] || '#7B7568' }">
{{ categoryGlyphs[n.category] || '记' }}
</span>
<span class="record-category">{{ n.category }}</span>
<span v-if="n.time_range" class="record-time">{{ n.time_range }}</span>
</div>
<p class="record-content">{{ n.content }}</p>
<div class="record-footer" v-if="n.time_range">
<span class="record-time">{{ n.time_range }}</span>
</div>
</div>
<div class="card-body">{{ n.content }}</div>
<div class="card-footer">
<el-button text size="small" @click="router.push(`/m/note/${n.id}/edit`)">编辑</el-button>
</div>
</el-card>
</article>
</template>
<!-- Visits -->
<h4 v-if="visits.length">🏢 今日拜访记录</h4>
<div v-if="visits.length === 0 && dailyNotes.length === 0" class="empty">今日暂无记录，点击上方按钮开始填报</div>
<el-card v-for="v in visits" :key="v.id" class="visit-card" shadow="hover">
<div class="card-header">
<span class="customer-name">{{ v.customer_name || '-' }}</span>
<el-tag size="small">{{ v.visit_method }}</el-tag>
</div>
<div class="card-body">
<div>{{ v.communication_content || '暂无沟通内容' }}</div>
<div v-if="v.customer_demand" class="demand">📌 需求: {{ v.customer_demand }}</div>
</div>
<div class="card-photos" v-if="v.photos?.length">
<img v-for="key in v.photos" :key="key" :src="photoUrls[key] || ''" class="photo-thumb" />
</div>
<div class="card-footer">
<span class="time">{{ v.time_range }}</span>
<el-button text size="small" @click="router.push(`/m/visit/${v.id}/edit`)">编辑</el-button>
</div>
</el-card>
<!-- ═══ Visit Records ═══ -->
<template v-if="visits.length">
<article
v-for="(v, i) in visits"
:key="v.id"
class="record-card record-card--visit"
:class="{ 'record-card--offset': (dailyNotes.length + i) % 2 === 1 }"
@click="router.push(`/m/visit/${v.id}/edit`)"
>
<div class="record-accent record-accent--gold"></div>
<div class="record-body">
<div class="record-header">
<span class="record-glyph record-glyph--visit">访</span>
<strong class="record-customer">{{ v.customer_name || '未知客户' }}</strong>
<span class="record-badge" :class="'badge--' + v.visit_method">{{ v.visit_method }}</span>
</div>
<p class="record-content">{{ v.communication_content || '暂无沟通内容' }}</p>
<p v-if="v.customer_demand" class="record-demand">
<span class="demand-marker">◆</span> {{ v.customer_demand }}
</p>
<div v-if="v.photos?.length" class="record-photos">
<img v-for="key in v.photos" :key="key" :src="photoUrls[key] || ''" class="record-photo" />
</div>
<div class="record-footer" v-if="v.time_range">
<span class="record-time">{{ v.time_range }}</span>
</div>
</div>
</article>
</template>
<!-- Empty State -->
<div v-if="visits.length === 0 && dailyNotes.length === 0 && !loading" class="empty-state">
<div class="empty-glyph">—</div>
<p class="empty-text">今日暂无记录</p>
<p class="empty-hint">点击上方按钮开始填报</p>
</div>
</div>
</div>
</template>
<style scoped>
.mobile-home { padding-bottom: 20px; }
.today-badge {
display: flex; align-items: center; gap: 16px;
background: linear-gradient(135deg, #e8f0fe, #f0f5ff); border-radius: 16px; padding: 20px; margin-bottom: 16px;
/* ═══ Page ═══ */
.mobile-home {
padding-bottom: 24px;
max-width: 100%;
position: relative;
}
/* ═══ Stat Banner — Editorial Masthead ═══ */
.stat-banner {
position: relative;
background: var(--surface);
border: 1px solid var(--warm-border);
padding: 20px 22px;
margin-bottom: 18px;
overflow: hidden;
}
.stat-masthead {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.stat-label-sm {
font-family: 'JetBrains Mono', 'SF Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
color: var(--warm-gray);
}
.stat-date {
font-family: 'Noto Serif SC', STSong, serif;
font-size: 12px;
color: var(--warm-gray);
letter-spacing: 0.04em;
}
.stat-main {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.stat-number {
font-family: 'ZCOOL XiaoWei', STSong, serif;
font-size: 56px;
color: var(--ink);
line-height: 1;
letter-spacing: 0.04em;
}
.stat-unit {
font-family: 'Noto Serif SC', STSong, serif;
font-size: 16px;
color: var(--warm-gray);
letter-spacing: 0.06em;
}
.stat-breakdown {
width: 100%;
display: flex;
gap: 10px;
align-items: center;
margin-top: 6px;
}
.stat-piece {
font-family: 'Noto Serif SC', STSong, serif;
font-size: 13px;
color: var(--warm-gray);
letter-spacing: 0.03em;
}
.stat-piece strong {
font-family: 'JetBrains Mono', 'SF Mono', monospace;
color: var(--ink);
font-size: 15px;
}
.stat-sep {
color: var(--gold);
font-weight: 300;
}
/* Decorative gold slash */
.stat-ornament {
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
background: linear-gradient(135deg, transparent 50%, rgba(196,147,74,0.08) 50%);
pointer-events: none;
}
/* ═══ Quick Actions ═══ */
.quick-actions {
display: flex;
gap: 10px;
margin-bottom: 12px;
}
.action-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 12px;
border: 1px solid var(--warm-border);
cursor: pointer;
font-family: 'Noto Serif SC', STSong, serif;
font-size: 15px;
letter-spacing: 0.04em;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.action-btn:active {
transform: scale(0.97);
}
.action-btn--primary {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.action-btn--primary:hover {
background: var(--ink-light);
}
.action-btn--secondary {
background: var(--surface);
color: var(--ink);
border-color: var(--ink);
}
.action-btn--secondary:hover {
background: var(--c-primary-bg);
}
.action-btn__text {
font-weight: 500;
}
/* ═══ Quick Links (Chips) ═══ */
.quick-links {
display: flex;
gap: 8px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.link-chip {
display: flex;
align-items: center;
gap: 5px;
padding: 9px 15px;
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.2s;
}
.link-chip:hover {
border-color: var(--gold);
color: var(--vermilion);
}
.link-chip:active {
background: var(--paper-dark);
}
/* ═══ Section Head ═══ */
.section-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.section-title {
font-family: 'ZCOOL XiaoWei', STSong, serif;
font-size: 18px;
color: var(--ink);
letter-spacing: 0.06em;
white-space: nowrap;
}
.section-line {
flex: 1;
height: 2px;
background: var(--gold);
}
/* ═══ Record Cards ═══ */
.records-area {
display: flex;
flex-direction: column;
gap: 12px;
}
.record-card {
background: var(--surface);
border: 1px solid var(--warm-border);
display: flex;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.record-card:active { transform: scale(0.99); }
.record-card--offset {
margin-left: 16px;
}
.record-card:hover {
box-shadow: 0 4px 12px rgba(28,55,56,0.06);
}
/* Left accent stripe */
.record-accent {
width: 4px;
flex-shrink: 0;
}
.record-accent--gold {
background: var(--gold);
}
.record-body {
flex: 1;
padding: 14px 16px;
min-width: 0;
}
.record-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
}
/* Category glyph — single Chinese character badge */
.record-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: #fff;
font-family: 'ZCOOL XiaoWei', STSong, serif;
font-size: 13px;
flex-shrink: 0;
}
.record-glyph--visit {
background: var(--gold);
}
.record-category {
font-family: 'ZCOOL XiaoWei', STSong, serif;
font-size: 13px;
color: var(--ink);
letter-spacing: 0.04em;
font-weight: 600;
}
.record-badge {
font-family: 'Noto Serif SC', STSong, serif;
font-size: 11px;
padding: 1px 8px;
letter-spacing: 0.04em;
margin-left: auto;
border: 1px solid;
}
.badge--上门 { color: #4A6741; border-color: #4A6741; }
.badge--电话 { color: #5B7FA5; border-color: #5B7FA5; }
.badge--微信 { color: #22c55e; border-color: #22c55e; }
.badge--出差 { color: #C4934A; border-color: #C4934A; }
.record-customer {
font-family: 'ZCOOL XiaoWei', STSong, serif;
font-size: 15px;
color: var(--ink);
letter-spacing: 0.03em;
flex: 1;
}
.record-time {
font-family: 'JetBrains Mono', 'SF Mono', monospace;
font-size: 11px;
color: var(--warm-gray);
letter-spacing: 0.03em;
margin-left: auto;
}
.record-content {
font-family: 'Noto Serif SC', STSong, serif;
font-size: 14px;
color: var(--c-text);
line-height: 1.7;
margin: 0 0 8px;
word-break: break-all;
}
.record-demand {
font-family: 'Noto Serif SC', STSong, serif;
font-size: 13px;
color: var(--vermilion);
margin: 0 0 8px;
line-height: 1.6;
}
.demand-marker {
color: var(--gold);
font-size: 10px;
}
.record-photos {
display: flex;
gap: 6px;
margin: 8px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
.record-photo {
width: 68px;
height: 68px;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--warm-border);
}
.record-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
/* ═══ Empty State ═══ */
.empty-state {
text-align: center;
padding: 48px 0;
}
.empty-glyph {
font-family: 'ZCOOL XiaoWei', STSong, serif;
font-size: 40px;
color: var(--gold);
opacity: 0.4;
margin-bottom: 8px;
}
.empty-text {
font-family: 'Noto Serif SC', STSong, serif;
font-size: 15px;
color: var(--warm-gray);
margin: 0 0 4px;
}
.empty-hint {
font-family: 'Noto Serif SC', STSong, serif;
font-size: 12px;
color: var(--c-text-muted);
margin: 0;
}
.badge-count { font-size: 36px; font-weight: 700; color: #1a73e8; }
.badge-label { font-size: 13px; color: #606266; }
.quick-actions { display: flex; gap: 12px; margin-bottom: 12px; }
.quick-links { display: flex; gap: 8px; margin-bottom: 20px; }
h4 { margin: 16px 0 12px; color: #303133; }
.empty { text-align: center; color: #c0c4cc; padding: 40px 0; }
.visit-card, .note-card { margin-bottom: 12px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.customer-name { font-weight: 600; font-size: 15px; }
.demand { color: #e6a23c; margin-top: 4px; font-size: 13px; }
.card-photos { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.photo-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: #909399; }
.card-body { font-size: 14px; color: #303133; }
.time { font-size: 12px; color: #909399; }
</style>