v6ole
a1886074dd
后端: FastAPI + SQLAlchemy 2.0 (async) + Alembic + MinIO + Casdoor + 企微 前端: Vue 3 + Vite + TypeScript + Element Plus + Pinia 功能清单: - 8 张数据表自动建表 / Casdoor OIDC 登录 / 企微静默登录 - 双布局: 移动端(填报) + PC端(汇总管理) - 拜访记录 CRUD + MinIO 照片直传 + 缩略图预览 + 同访人草稿 - 今日纪要 (6 分类) / 工作计划 / 小微商机 / 要客拜访 CRUD - 客户档案: 备注/收支费用/联系人/归属分配/批量转移 - 客户导入导出 + 模板下载 + 搜索/分页/筛选 - 仪表盘: 四卡统计 + 填报进度 (拜访+纪要双维度) - 周报详情: 五 Tab + 按人/客户筛选 + 时间轴 - 用户管理 / 客户经理 PC 端工作台 - 企微: 催办/公告/定时提醒 / 时区修正 - Docker 部署配置 Co-Authored-By: Claude <noreply@anthropic.com>
93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { computed } from 'vue'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const auth = useAuthStore()
|
|
|
|
const tabs = [
|
|
{ path: '/m', label: '首页', icon: 'HomeFilled' },
|
|
{ path: '/m/visit/new', label: '今日拜访', icon: 'Edit' },
|
|
{ path: '/m/note/new', label: '今日纪要', icon: 'Notebook' },
|
|
]
|
|
const activeTab = computed(() => {
|
|
if (route.path === '/m') return '/m'
|
|
if (route.path.includes('/visit')) return '/m/visit/new'
|
|
if (route.path.includes('/note')) return '/m/note/new'
|
|
return route.path
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mobile-layout">
|
|
<header class="mobile-header">
|
|
<span class="header-title">企迹</span>
|
|
<div style="display:flex; align-items:center; gap:8px">
|
|
<el-button text size="small" style="color:white" @click="router.push('/')">💻 PC</el-button>
|
|
<span class="header-user">{{ auth.name }}</span>
|
|
</div>
|
|
</header>
|
|
<main class="mobile-main">
|
|
<router-view />
|
|
</main>
|
|
<nav class="mobile-tabbar">
|
|
<div
|
|
v-for="tab in tabs" :key="tab.path"
|
|
class="tab-item" :class="{ active: activeTab === tab.path }"
|
|
@click="router.push(tab.path)"
|
|
>
|
|
<el-icon><component :is="tab.icon" /></el-icon>
|
|
<span>{{ tab.label }}</span>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.mobile-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background: #f5f7fa;
|
|
}
|
|
.mobile-header {
|
|
background: linear-gradient(135deg, #1a73e8, #4080ff);
|
|
color: white;
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
}
|
|
.mobile-main {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 12px;
|
|
}
|
|
.mobile-tabbar {
|
|
display: flex;
|
|
background: white;
|
|
border-top: 1px solid #e4e7ed;
|
|
padding: 6px 0;
|
|
}
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 6px 0;
|
|
color: #909399;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.tab-item.active {
|
|
color: #1a73e8;
|
|
}
|
|
.tab-item .el-icon {
|
|
font-size: 22px;
|
|
margin-bottom: 2px;
|
|
}
|
|
</style>
|