petstore/petstore-admin
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: petstore:main
Branches Tags
petstore:main
petstore:phase2-pilot-rc6
petstore:phase2-pilot-rc5
petstore:phase2-pilot-rc4
petstore:phase2-pilot-rc3
petstore:phase2-pilot-rc2
petstore:phase2-pilot-rc1
petstore:phase-a-rc1
..
compare: petstore:phase-a-rc1
Branches Tags
petstore:main
petstore:phase2-pilot-rc6
petstore:phase2-pilot-rc5
petstore:phase2-pilot-rc4
petstore:phase2-pilot-rc3
petstore:phase2-pilot-rc2
petstore:phase2-pilot-rc1
petstore:phase-a-rc1

No commits in common. "main" and "phase-a-rc1" have entirely different histories.
main ... phase-a-rc

14 changed files with 390 additions and 2363 deletions
Show Stats Expand all files Collapse all files

2
.env.production
View File

@ -1,2 +0,0 @@
# 安全占位符：正式构建必须用 .env.production.local 覆盖，并先运行发布门禁。
VITE_PUBLIC_H5_ORIGIN=https://report.petstore.invalid

11
README.md
View File

@ -19,20 +19,9 @@ npm run dev
## 构建
```bash
npm run preflight:release
npm run build
```
仓库内 `.env.production` 使用 `.invalid` 安全占位符，默认门禁会失败。正式发布必须使用权限受控的域名文件：
```bash
PETSTORE_ADMIN_ENV_FILE=/secure/path/petstore-admin.env npm run preflight:release
cp /secure/path/petstore-admin.env .env.production.local
npm run build
```
`VITE_PUBLIC_H5_ORIGIN` 必须是本项目公开报告页的显式 HTTPS 源，不能是 localhost、`.invalid` 或已归属其他产品的 `www.s-good.com`。真实配置不得提交，发布后删除 `.env.production.local`。
## Owner
- Store Admin FE → `admin/**`

3
package.json
View File

@ -6,8 +6,7 @@
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",
"preview": "vite preview",
"preflight:release": "node scripts/release-preflight.cjs"
"preview": "vite preview"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.2",

56
scripts/release-preflight.cjs
View File

@ -1,56 +0,0 @@
const fs = require('node:fs')
const path = require('node:path')
const envFile = process.env.PETSTORE_ADMIN_ENV_FILE || '.env.production'
const absoluteEnvFile = path.resolve(process.cwd(), envFile)
function fail(message) {
console.error(`[release-preflight] FAIL: ${message}`)
process.exit(1)
}
if (!fs.existsSync(absoluteEnvFile)) {
fail('environment file does not exist')
}
const values = {}
for (const rawLine of fs.readFileSync(absoluteEnvFile, 'utf8').split(/\r?\n/)) {
const line = rawLine.trim()
if (!line || line.startsWith('#')) continue
const separator = line.indexOf('=')
if (separator < 1) continue
const key = line.slice(0, separator).trim().replace(/^export\s+/, '')
const value = line.slice(separator + 1).trim().replace(/^(['"])(.*)\1$/, '$2')
values[key] = value
}
const name = 'VITE_PUBLIC_H5_ORIGIN'
const value = values[name]
if (!value) fail(`${name} is required`)
let url
try {
url = new URL(value)
} catch {
fail(`${name} must be a valid URL`)
}
const hostname = url.hostname.toLowerCase()
const isLocal = hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1'
const isPlaceholder = hostname.endsWith('.invalid')
|| hostname.endsWith('.test')
|| hostname.endsWith('.example')
|| ['example.com', 'example.net', 'example.org'].some(
(reserved) => hostname === reserved || hostname.endsWith(`.${reserved}`),
)
const hasExtraParts = Boolean(url.username || url.password || url.search || url.hash)
|| (url.pathname !== '' && url.pathname !== '/')
if (url.protocol !== 'https:' || isLocal || isPlaceholder || hasExtraParts) {
fail(`${name} must be an explicit production HTTPS origin`)
}
if (hostname === 'www.s-good.com') {
fail(`${name} uses a domain reserved by another product`)
}
console.log(`[release-preflight] ${name}: PASS`)
console.log('[release-preflight] admin release configuration PASS')

194
src/api/index.ts
View File

@ -24,153 +24,15 @@ export const cancelAppointment = (id: number) =>
export const getReportList = (params: Record<string, unknown> = {}) =>
apiGet('/report/list', params)
/** 员工在真实发送完成后显式确认；复制链接或打开 H5 不会自动确认。 */
export const confirmReportSent = (reportId: number, channel: 'wechat' | 'qr' | 'other') =>
apiPost('/report/confirm-sent', { reportId, channel })
export const startHighlight = (reportId: number) =>
apiPost('/report/highlight/start', { reportId })
export const getLeads = (status = 'pending') =>
apiGet('/report/leads', { status })
export type FollowUpTaskView = {
taskId: string
storeCustomerId: number
sourceLeadId: number
reportId?: number | null
displayName?: string | null
phone?: string | null
phoneMasked?: string | null
petName?: string | null
serviceType?: string | null
status: 'pending' | 'in_progress' | 'completed' | 'canceled'
outcome?: 'rebooked' | 'not_interested' | 'invalid_contact' | 'unsubscribed' | null
dueDate: string
attemptCount: number
lastAttemptOutcome?: 'no_answer' | 'follow_later' | null
assignedUserId?: number | null
assignedUserName?: string | null
assignedToCurrentUser: boolean
lastContactedAt?: string | null
closedAt?: string | null
rebookedAppointmentId?: number | null
overdue: boolean
createTime: string
updateTime: string
}
export type FollowUpTaskPage = {
total: number
page: number
pageSize: number
hasMore: boolean
list: FollowUpTaskView[]
}
export const getFollowUpTasks = (params: Record<string, unknown> = {}) =>
apiGet<FollowUpTaskPage>('/admin/follow-up-tasks', params)
export const startFollowUpTask = (taskId: string) =>
apiPost<FollowUpTaskView>(`/admin/follow-up-tasks/${encodeURIComponent(taskId)}/start`)
export const rescheduleFollowUpTask = (
taskId: string,
dueDate: string,
reason: 'no_answer' | 'follow_later',
) => apiPost<FollowUpTaskView>(
`/admin/follow-up-tasks/${encodeURIComponent(taskId)}/reschedule`,
{ dueDate, reason },
)
export const closeFollowUpTask = (
taskId: string,
outcome: 'not_interested' | 'invalid_contact',
) => apiPost<FollowUpTaskView>(
`/admin/follow-up-tasks/${encodeURIComponent(taskId)}/close`,
{ outcome },
)
export const createAppointment = (data: Record<string, unknown>) =>
apiPost('/appointment/create', data)
export const getAppointmentAvailableSlots = (storeId: number, date: string, serviceType: string) =>
apiGet('/appointment/available-slots', { storeId, date, serviceType })
export const getServiceCustomers = (params: Record<string, unknown> = {}) =>
apiGet('/admin/service-customers', params)
export type CustomerTimelineItem = {
eventId: string
eventType: string
occurredAt?: string | null
title: string
description: string
source?: string
actorRole?: string | null
actorName?: string | null
appointment?: {
id: number
appointmentTime?: string | null
endTime?: string | null
petName?: string | null
petType?: string | null
serviceType?: string | null
durationMinutes?: number
currentStatus?: string | null
}
report?: {
id: number
appointmentId?: number | null
petName?: string | null
serviceType?: string | null
sendStatus?: 'unknown' | 'unsent' | 'sent' | null
sentAt?: string | null
sendChannel?: 'wechat' | 'qr' | 'other' | null
}
lead?: {
id: number
reportId?: number | null
petName?: string | null
serviceType?: string | null
remindDate?: string | null
remindStatus?: string | null
}
followUpTask?: {
taskId: string
status: 'pending' | 'in_progress' | 'completed' | 'canceled'
outcome?: 'rebooked' | 'not_interested' | 'invalid_contact' | 'unsubscribed' | null
dueDate?: string | null
attemptCount?: number
rebookedAppointmentId?: number | null
}
}
export type CustomerTimelineResponse = {
customer: {
storeCustomerId: number
displayName?: string | null
phoneMasked?: string | null
originSource?: string | null
firstContactAt?: string | null
lastContactAt?: string | null
}
total: number
page: number
pageSize: number
hasMore: boolean
list: CustomerTimelineItem[]
}
export const getServiceCustomerTimeline = (storeCustomerId: number, page = 1, pageSize = 20) =>
apiGet<CustomerTimelineResponse>('/admin/service-customers/timeline', { storeCustomerId, page, pageSize })
export const getWorkbenchReportFunnel = (date?: string) =>
apiGet('/admin/workbench/report-funnel', date ? { date } : {})
export const getWorkbenchActions = () =>
apiGet('/admin/workbench/actions')
export const getAdminStore = () => apiGet<Record<string, unknown>>('/admin/store')
export const updateStore = (data: Record<string, unknown>) => apiPut('/store/update', data)
@ -178,7 +40,7 @@ export const updateStore = (data: Record<string, unknown>) => apiPut('/store/upd
export const getScheduleDay = (date: string) =>
apiGet('/schedule/day', { date })
export const createScheduleBlock = (data: { slotStart: string; durationMinutes: number; blockType: string; note?: string }) =>
export const createScheduleBlock = (data: { slotStart: string; blockType: string; note?: string }) =>
apiPost('/schedule/block', data)
export const deleteScheduleBlock = (id: number) =>
@ -188,50 +50,8 @@ export const getStore = (id: number) => apiGet('/store/get', { id })
export const getStaffList = () => apiGet('/user/staff-list')
export type StaffInvitation = {
invitationId: string
storeName: string
invitedName: string
maskedPhone: string
status: 'pending' | 'accepted' | 'revoked' | 'expired'
expiresAt: string
acceptedAt?: string | null
createdAt: string
inviteToken?: string
invitePath?: string
}
export type OnboardingStep = {
id: 'profile' | 'booking' | 'services' | 'team'
title: string
required: boolean
completed: boolean
hint: string
}
export type OnboardingStatus = {
status: 'unknown' | 'in_progress' | 'completed'
completedAt?: string | null
readyToComplete: boolean
missingRequiredSteps: string[]
completedStepCount: number
totalStepCount: number
staffCount: number
steps: OnboardingStep[]
alreadyCompleted?: boolean
}
export const getOnboardingStatus = () => apiGet<OnboardingStatus>('/admin/onboarding')
export const completeOnboarding = () => apiPost<OnboardingStatus>('/admin/onboarding/complete')
export const getStaffInvitations = () => apiGet<StaffInvitation[]>('/admin/staff-invitations')
export const createStaffInvitation = (data: { name: string; phone: string; validDays: number }) =>
apiPost<StaffInvitation>('/admin/staff-invitations', data)
export const revokeStaffInvitation = (invitationId: string) =>
apiDelete<StaffInvitation>('/admin/staff-invitations', { invitationId })
export const createStaff = (data: { name: string; phone: string }) =>
apiPost('/user/create-staff', data)
export const deleteStaff = (staffId: number) =>
apiDelete('/user/staff', { staffId })
@ -239,11 +59,11 @@ export const deleteStaff = (staffId: number) =>
export const getServiceTypeList = (storeId?: number | null) =>
apiGet('/service-type/list', storeId != null ? { storeId } : {})
export const createServiceType = (name: string, durationMinutes: number) =>
apiPost('/service-type/create', { name, durationMinutes })
export const createServiceType = (name: string) =>
apiPost('/service-type/create', { name })
export const updateServiceType = (id: number, name: string, durationMinutes: number) =>
apiPut('/service-type/update', { id, name, durationMinutes })
export const updateServiceType = (id: number, name: string) =>
apiPut('/service-type/update', { id, name })
export const deleteServiceType = (id: number) =>
apiDelete('/service-type/delete', { id })

1
src/utils/session.ts
View File

@ -13,6 +13,7 @@ export type AdminUser = {
export type AdminStore = {
id: number
name?: string
inviteCode?: string
}
export function getToken(): string | null {

41
src/views/AppointmentsView.vue
View File

@ -20,17 +20,13 @@
<el-option v-for="s in staffOptions" :key="s.id" :label="s.name" :value="s.id" />
</el-select>
<el-checkbox v-model="missingReport">待出报告</el-checkbox>
<el-checkbox v-model="overdueOnly">已过预约时间</el-checkbox>
<el-checkbox v-model="completedTodayOnly">今日完成</el-checkbox>
<el-input v-model="keyword" clearable placeholder="宠主/手机/宠物名" style="width: 200px" />
<el-button type="primary" @click="load">查询</el-button>
<el-button @click="reset">重置</el-button>
</div>
<el-table :data="rows" v-loading="loading" stripe>
<el-table-column label="预约时间" min-width="210">
<template #default="{ row }">{{ appointmentRange(row) }}</template>
</el-table-column>
<el-table-column prop="appointmentTime" label="预约时间" min-width="160" />
<el-table-column label="状态" width="100">
<template #default="{ row }">{{ statusLabel(row.status) }}</template>
</el-table-column>
@ -66,7 +62,7 @@
<el-drawer v-model="drawer" title="预约详情" size="420px">
<template v-if="current">
<el-descriptions :column="1" border>
<el-descriptions-item label="时间">{{ appointmentRange(current) }}</el-descriptions-item>
<el-descriptions-item label="时间">{{ current.appointmentTime }}</el-descriptions-item>
<el-descriptions-item label="状态">{{ statusLabel(current.status) }}</el-descriptions-item>
<el-descriptions-item label="宠主">{{ current.customerName }} {{ current.customerPhoneMasked }}</el-descriptions-item>
<el-descriptions-item label="宠物">{{ current.petName }} / {{ current.petType }}</el-descriptions-item>
@ -105,15 +101,10 @@ import {
type Appt = {
id: number
appointmentTime?: string
endTime?: string
durationMinutes?: number
status?: string
petName?: string
petType?: string
serviceType?: string
customerUserId?: number
createdByUserId?: number
assignedStaffId?: number
assignedUserId?: number
staffName?: string
customerName?: string
@ -134,15 +125,6 @@ const dateFilter = ref((route.query.date as string) || '')
const dateRange = ref<[string, string] | ''>('')
const staffId = ref<number | undefined>()
const missingReport = ref(route.query.missingReport === '1')
const overdueOnly = ref(route.query.overdue === '1')
const completedTodayOnly = ref(route.query.completedToday === '1')
function appointmentRange(row: Appt): string {
const start = String(row.appointmentTime || '').replace('T', ' ').slice(0, 16)
const end = String(row.endTime || '').slice(11, 16)
if (!start) return '—'
return end ? `${start}–${end}` : start
}
const staffOptions = ref<Array<{ id: number; name: string }>>([])
const drawer = ref(false)
const current = ref<Appt | null>(null)
@ -194,22 +176,11 @@ async function load() {
let list = Array.isArray(res.data) ? (res.data as Appt[]) : []
list = list.filter((a) => inDateRange(a.appointmentTime))
if (staffId.value != null) {
list = list.filter((a) => (a.assignedStaffId ?? a.assignedUserId) === staffId.value)
list = list.filter((a) => a.assignedUserId === staffId.value)
}
if (missingReport.value) {
list = list.filter((a) => a.status === 'doing' && !a.hasReport)
}
if (overdueOnly.value) {
const now = Date.now()
list = list.filter((a) => {
const appointmentAt = Date.parse(String(a.appointmentTime || ''))
return a.status === 'new' && !Number.isNaN(appointmentAt) && appointmentAt < now
})
}
if (completedTodayOnly.value) {
const today = todayPrefix()
list = list.filter((a) => a.status === 'done' && String(a.updateTime || '').startsWith(today))
}
if (keyword.value.trim()) {
const q = keyword.value.trim()
list = list.filter((a) =>
@ -231,8 +202,6 @@ function reset() {
dateRange.value = ''
staffId.value = undefined
missingReport.value = false
overdueOnly.value = false
completedTodayOnly.value = false
load()
}
@ -282,10 +251,6 @@ onMounted(async () => {
}
await loadStaff()
await load()
const focusId = Number(route.query.id)
if (Number.isFinite(focusId) && focusId > 0) {
await openDetail({ id: focusId })
}
})
</script>

316
src/views/CustomersView.vue
View File

@ -13,7 +13,7 @@
<el-input v-model="q" clearable placeholder="姓名 / 手机 / 宠物名" style="width: 220px" />
<el-button type="primary" @click="load">查询</el-button>
</div>
<el-table :data="rows" v-loading="loading" row-key="storeCustomerId" stripe>
<el-table :data="rows" v-loading="loading" stripe>
<el-table-column prop="displayName" label="客户" width="120" />
<el-table-column prop="phoneMasked" label="手机" width="140" />
<el-table-column label="宠物" min-width="160">
@ -23,9 +23,7 @@
</el-table-column>
<el-table-column prop="lastVisitAt" label="最近到店" min-width="160" />
<el-table-column prop="leadStatus" label="留资状态" width="100" />
<el-table-column label="来源" width="140">
<template #default="{ row }">{{ formatSource(row.source) }}</template>
</el-table-column>
<el-table-column prop="source" label="来源" width="140" />
<el-table-column label="操作" width="200" fixed="right">
<template #default="{ row }">
<el-button link type="primary" @click="openDetail(row)">详情</el-button>
@ -35,23 +33,15 @@
</el-table-column>
</el-table>
<el-drawer v-model="drawer" title="客户详情" size="580px">
<el-drawer v-model="drawer" title="客户详情" size="420px">
<template v-if="current">
<section class="customer-profile">
<div>
<div class="profile-kicker">STORE CUSTOMER</div>
<h3>{{ timelineCustomer?.displayName || current.displayName || '客户' }}</h3>
<p>{{ timelineCustomer?.phoneMasked || current.phoneMasked || '暂无手机号' }}</p>
</div>
<el-tag effect="light" round>{{ formatOriginSource(timelineCustomer?.originSource || current.originSource) }}</el-tag>
</section>
<el-descriptions :column="2" border size="small" class="customer-facts">
<el-descriptions-item label="首次接触">{{ formatDateTime(timelineCustomer?.firstContactAt || current.firstContactAt) }}</el-descriptions-item>
<el-descriptions-item label="最近接触">{{ formatDateTime(timelineCustomer?.lastContactAt || current.lastContactAt) }}</el-descriptions-item>
<el-descriptions-item label="最近到店">{{ formatDateTime(current.lastVisitAt) }}</el-descriptions-item>
<el-descriptions-item label="回访状态">{{ formatLeadStatus(current.leadStatus) }}</el-descriptions-item>
<el-descriptions-item label="宠物" :span="2">
<el-descriptions :column="1" border>
<el-descriptions-item label="姓名">{{ current.displayName }}</el-descriptions-item>
<el-descriptions-item label="手机">{{ current.phoneMasked }}</el-descriptions-item>
<el-descriptions-item label="来源">{{ current.source }}</el-descriptions-item>
<el-descriptions-item label="最近到店">{{ current.lastVisitAt || '—' }}</el-descriptions-item>
<el-descriptions-item label="留资">{{ current.leadStatus || '—' }}</el-descriptions-item>
<el-descriptions-item label="宠物">
<el-tag v-for="p in current.pets || []" :key="p.name" size="small" class="pet-tag">{{ p.name }}</el-tag>
</el-descriptions-item>
</el-descriptions>
@ -59,62 +49,6 @@
<el-button v-if="current.lastReportId" type="primary" @click="goReport(current)">最近报告</el-button>
<el-button v-if="current.hasPendingLead" @click="goLead">去回访</el-button>
</div>
<div class="timeline-head">
<div>
<h3>服务时间线</h3>
<p>按业务事实发生时间倒序，共 {{ timelineTotal }} 条</p>
</div>
</div>
<div v-loading="timelineLoading" class="timeline-shell">
<el-empty v-if="!timelineLoading && timelineItems.length === 0" description="暂无可用业务事实" :image-size="72" />
<el-timeline v-else>
<el-timeline-item
v-for="item in timelineItems"
:key="item.eventId"
:timestamp="formatDateTime(item.occurredAt)"
placement="top"
:type="timelineTone(item.eventType)"
:hollow="item.eventType === 'report_opened' || item.eventType === 'report_reopened'"
>
<article class="timeline-event">
<div class="timeline-title-row">
<strong>{{ item.title }}</strong>
<span v-if="item.actorName || item.actorRole" class="event-actor">
{{ item.actorName || roleLabel(item.actorRole) }}
</span>
</div>
<p>{{ item.description }}</p>
<div class="event-tags">
<el-tag v-if="item.appointment?.currentStatus" size="small" effect="plain">
预约{{ appointmentStatusLabel(item.appointment.currentStatus) }}
</el-tag>
<el-tag v-if="item.report?.sendStatus" size="small" effect="plain">
{{ reportSendLabel(item.report.sendStatus) }}
</el-tag>
<el-tag v-if="item.lead?.remindStatus" size="small" effect="plain">
{{ formatLeadStatus(item.lead.remindStatus) }}
</el-tag>
<el-tag v-if="item.followUpTask?.status" size="small" effect="plain">
{{ followUpStatusLabel(item.followUpTask.status) }}
</el-tag>
</div>
<div v-if="item.appointment || item.report || item.lead || item.followUpTask" class="event-actions">
<el-button v-if="item.appointment" link type="primary" @click="goAppointment(item.appointment.id)">查看预约</el-button>
<el-button v-if="item.report" link type="primary" @click="goReportId(item.report.id)">查看报告</el-button>
<el-button v-if="item.lead" link type="primary" @click="goLead">进入回访池</el-button>
<el-button v-if="item.followUpTask" link type="primary" @click="goLead">查看回访任务</el-button>
</div>
</article>
</el-timeline-item>
</el-timeline>
<el-button
v-if="timelineHasMore"
class="load-more"
:loading="timelineLoadingMore"
@click="loadMoreTimeline"
>加载更早记录</el-button>
</div>
</template>
</el-drawer>
</div>
@ -123,16 +57,9 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
getServiceCustomers,
getServiceCustomerTimeline,
type CustomerTimelineItem,
type CustomerTimelineResponse,
} from '@/api'
import { getServiceCustomers } from '@/api'
type CustomerRow = {
storeCustomerId: number
userId?: number | null
displayName?: string
phoneMasked?: string
@ -142,9 +69,6 @@ type CustomerRow = {
leadStatus?: string
hasPendingLead?: boolean
source?: string
originSource?: string
firstContactAt?: string
lastContactAt?: string
}
const router = useRouter()
@ -156,13 +80,6 @@ const hasPendingLead = ref(false)
const q = ref('')
const drawer = ref(false)
const current = ref<CustomerRow | null>(null)
const timelineCustomer = ref<CustomerTimelineResponse['customer'] | null>(null)
const timelineItems = ref<CustomerTimelineItem[]>([])
const timelineTotal = ref(0)
const timelinePage = ref(1)
const timelineHasMore = ref(false)
const timelineLoading = ref(false)
const timelineLoadingMore = ref(false)
async function load() {
loading.value = true
@ -185,50 +102,9 @@ async function load() {
}
}
async function openDetail(row: CustomerRow) {
function openDetail(row: CustomerRow) {
current.value = row
drawer.value = true
timelineCustomer.value = null
timelineItems.value = []
timelineTotal.value = 0
timelinePage.value = 1
timelineHasMore.value = false
timelineLoading.value = true
try {
await fetchTimeline(row.storeCustomerId, 1, false)
} catch {
ElMessage.error('客户时间线加载失败，请稍后重试')
} finally {
timelineLoading.value = false
}
}
async function fetchTimeline(storeCustomerId: number, page: number, append: boolean) {
const response = await getServiceCustomerTimeline(storeCustomerId, page, 20)
if (current.value?.storeCustomerId !== storeCustomerId) return
if (response.code !== 200 || !response.data) {
ElMessage.error(response.message || '客户时间线加载失败')
return
}
timelineCustomer.value = response.data.customer
timelineItems.value = append
? [...timelineItems.value, ...response.data.list]
: response.data.list
timelineTotal.value = response.data.total
timelinePage.value = response.data.page
timelineHasMore.value = response.data.hasMore
}
async function loadMoreTimeline() {
if (!current.value || !timelineHasMore.value || timelineLoadingMore.value) return
timelineLoadingMore.value = true
try {
await fetchTimeline(current.value.storeCustomerId, timelinePage.value + 1, true)
} catch {
ElMessage.error('更早的客户记录加载失败，请稍后重试')
} finally {
timelineLoadingMore.value = false
}
}
function goReport(row: CustomerRow) {
@ -236,88 +112,10 @@ function goReport(row: CustomerRow) {
router.push({ path: '/reports', query: { q: String(row.lastReportId) } })
}
function goReportId(reportId: number) {
drawer.value = false
router.push({ path: '/reports', query: { q: String(reportId) } })
}
function goAppointment(appointmentId: number) {
drawer.value = false
router.push({ path: '/appointments', query: { id: String(appointmentId) } })
}
function goLead() {
drawer.value = false
router.push({ path: '/leads', query: { due: 'today' } })
}
function formatDateTime(value?: string | null) {
if (!value) return '—'
const normalized = String(value).replace('T', ' ')
return normalized.length >= 16 ? normalized.slice(0, 16) : normalized
}
function formatLeadStatus(value?: string | null) {
if (value === 'pending') return '待回访'
if (value === 'sent') return '已发送提醒'
if (value === 'canceled') return '已取消'
if (value === 'unsubscribed') return '已退订'
return value || '—'
}
function appointmentStatusLabel(value?: string | null) {
if (value === 'new') return '待开始'
if (value === 'doing') return '服务中'
if (value === 'done') return '已完成'
if (value === 'cancel') return '已取消'
return value || '未知'
}
function reportSendLabel(value?: string | null) {
if (value === 'sent') return '报告已发送'
if (value === 'unsent') return '报告待发送'
if (value === 'unknown') return '发送状态未知'
return '报告'
}
function followUpStatusLabel(value?: string | null) {
if (value === 'pending') return '回访待领取'
if (value === 'in_progress') return '回访处理中'
if (value === 'completed') return '回访已完成'
if (value === 'canceled') return '回访已取消'
return '回访任务'
}
function roleLabel(value?: string | null) {
if (value === 'boss') return '老板'
if (value === 'staff') return '员工'
if (value === 'customer') return '宠主'
return '系统'
}
function timelineTone(eventType: string): 'primary' | 'success' | 'warning' | 'info' | 'danger' {
if (eventType === 'service_completed' || eventType === 'report_sent') return 'success'
if (eventType === 'lead_submitted') return 'warning'
if (eventType === 'appointment_status_changed') return 'danger'
if (eventType === 'report_opened' || eventType === 'report_reopened') return 'info'
return 'primary'
}
function formatSource(value?: string) {
if (value === 'appointment+lead') return '预约 + 报告留资'
if (value === 'appointment') return '预约'
if (value === 'lead') return '报告留资'
return '—'
}
function formatOriginSource(value?: string) {
if (value === 'customer_booking') return '宠主自助预约'
if (value === 'assisted_booking') return '门店代客预约'
if (value === 'report_lead') return '报告留资'
if (value === 'appointment') return '历史预约'
return '—'
}
onMounted(load)
</script>
@ -330,94 +128,4 @@ onMounted(load)
display: flex;
gap: 8px;
}
.customer-profile {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px;
background: radial-gradient(circle at 88% 0, rgb(47 111 237 / 12%), transparent 38%), #f7f9fd;
border: 1px solid #e0e8f5;
border-radius: 12px;
}
.profile-kicker {
color: #2f6fed;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
}
.customer-profile h3 {
margin: 6px 0 3px;
color: #24324a;
font-size: 21px;
}
.customer-profile p,
.timeline-head p,
.timeline-event p {
margin: 0;
color: #778398;
font-size: 13px;
}
.customer-facts {
margin-top: 14px;
}
.timeline-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin: 28px 0 18px;
}
.timeline-head h3 {
margin: 0 0 4px;
font-size: 17px;
}
.timeline-shell {
min-height: 160px;
padding-right: 4px;
}
.timeline-event {
padding: 12px 14px;
background: #f8f9fb;
border: 1px solid #e8ebf0;
border-radius: 9px;
}
.timeline-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 5px;
}
.event-actor {
color: #8d97a8;
font-size: 11px;
}
.event-tags,
.event-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 9px;
}
.event-actions {
margin-bottom: -5px;
}
.load-more {
display: block;
margin: 0 auto;
}
</style>

501
src/views/LeadsView.vue
View File

@ -1,497 +1,88 @@
<template>
<div class="page-card follow-up-page">
<header class="page-head">
<div>
<div class="eyebrow">FOLLOW-UP TASKS</div>
<h2 class="page-title">回访任务</h2>
<p>领取后记录结果；“再次预约”只在真实预约创建成功后自动闭环。</p>
</div>
<el-button :loading="loading" @click="load">刷新</el-button>
</header>
<div class="page-card">
<h2 class="page-title">回访线索</h2>
<div class="filter-row">
<el-select v-model="status" style="width: 150px" @change="resetAndLoad">
<el-option label="待处理" value="open" />
<el-option label="待领取" value="pending" />
<el-option label="处理中" value="in_progress" />
<el-option label="已完成" value="completed" />
<el-option label="已取消" value="canceled" />
<el-select v-model="status" style="width: 140px" @change="load">
<el-option label="待回访" value="pending" />
<el-option label="全部" value="all" />
</el-select>
<el-checkbox v-model="dueToday" @change="resetAndLoad">到期≤今天</el-checkbox>
<span class="summary">共 {{ total }} 项</span>
<el-checkbox v-model="dueToday" @change="load">到期≤今天</el-checkbox>
</div>
<el-table :data="rows" v-loading="loading" row-key="taskId" stripe>
<el-table-column label="宠主 / 宠物" min-width="170">
<template #default="{ row }">
<strong>{{ row.displayName || '客户' }}</strong>
<div class="muted">{{ row.petName || '宠物待确认' }} · {{ row.serviceType || '服务待确认' }}</div>
</template>
<el-table :data="rows" v-loading="loading" stripe>
<el-table-column prop="petName" label="宠物" width="120" />
<el-table-column prop="serviceType" label="服务" min-width="120" />
<el-table-column prop="phone" label="手机" width="140" />
<el-table-column prop="remindDate" label="建议日期" width="120" />
<el-table-column prop="remindStatus" label="状态" width="100" />
<el-table-column label="微信" width="80">
<template #default="{ row }">{{ row.wechatBound ? '是' : '否' }}</template>
</el-table-column>
<el-table-column label="联系" width="150">
<template #default="{ row }">
<span>{{ row.phone || row.phoneMasked || '—' }}</span>
<el-button v-if="row.phone" link type="primary" @click="copyPhone(row.phone)">复制</el-button>
</template>
</el-table-column>
<el-table-column label="计划回访" width="130">
<template #default="{ row }">
<span :class="{ overdue: row.overdue }">{{ row.dueDate || '—' }}</span>
</template>
</el-table-column>
<el-table-column label="状态" width="130">
<template #default="{ row }">
<el-tag :type="statusTag(row.status)" effect="light">{{ statusLabel(row.status) }}</el-tag>
<div v-if="row.outcome" class="muted">{{ outcomeLabel(row.outcome) }}</div>
</template>
</el-table-column>
<el-table-column label="处理" width="150">
<template #default="{ row }">
<span>{{ row.assignedUserName || (row.status === 'pending' ? '待领取' : '—') }}</span>
<div class="muted">已联系 {{ row.attemptCount || 0 }} 次</div>
</template>
</el-table-column>
<el-table-column label="操作" min-width="390" fixed="right">
<el-table-column label="操作" width="120">
<template #default="{ row }">
<el-button
v-if="row.status === 'pending'"
v-if="row.reportId"
link
type="primary"
@click="startTask(row)"
>领取</el-button>
<template v-if="row.status === 'in_progress' && row.assignedToCurrentUser">
<el-button link @click="openReschedule(row, 'no_answer')">未接通</el-button>
<el-button link @click="openReschedule(row, 'follow_later')">稍后联系</el-button>
<el-button link type="warning" @click="closeTask(row, 'not_interested')">暂无意向</el-button>
<el-button link type="danger" @click="closeTask(row, 'invalid_contact')">号码无效</el-button>
<el-button link type="success" @click="openRebook(row)">创建预约</el-button>
</template>
<el-button
v-if="row.rebookedAppointmentId"
link
type="success"
@click="goAppointment(row.rebookedAppointmentId)"
>查看预约</el-button>
<span
v-if="row.status === 'in_progress' && !row.assignedToCurrentUser"
class="muted"
>由其他员工处理</span>
@click="openReport(row)"
>打开报告</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="total > pageSize"
class="pagination"
layout="prev, pager, next"
:current-page="page"
:page-size="pageSize"
:total="total"
@current-change="changePage"
/>
<el-dialog v-model="rescheduleVisible" title="记录联系结果并改期" width="430px">
<el-form label-position="top">
<el-form-item label="本次结果">
<el-radio-group v-model="rescheduleReason">
<el-radio value="no_answer">未接通</el-radio>
<el-radio value="follow_later">宠主希望稍后联系</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="下次回访日期">
<el-date-picker
v-model="rescheduleDate"
type="date"
value-format="YYYY-MM-DD"
:disabled-date="disablePastDate"
style="width: 100%"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="rescheduleVisible = false">取消</el-button>
<el-button type="primary" :loading="saving" @click="saveReschedule">确认改期</el-button>
</template>
</el-dialog>
<el-dialog v-model="rebookVisible" title="为回访客户创建真实预约" width="520px">
<el-alert
type="info"
:closable="false"
title="预约成功后任务才会标记为“已再次预约”；容量不足或创建失败不会改变任务状态。"
/>
<el-form label-position="top" class="rebook-form">
<el-form-item label="宠主">
<el-input :model-value="`${rebookTask?.displayName || '客户'} · ${rebookTask?.phone || ''}`" disabled />
</el-form-item>
<div class="form-grid">
<el-form-item label="宠物名">
<el-input v-model="rebookForm.petName" maxlength="64" />
</el-form-item>
<el-form-item label="宠物类型">
<el-select v-model="rebookForm.petType" style="width: 100%">
<el-option label="猫" value="猫" />
<el-option label="狗" value="狗" />
<el-option label="其他" value="其他" />
</el-select>
</el-form-item>
</div>
<el-form-item label="服务项目">
<el-select v-model="rebookForm.serviceType" style="width: 100%" @change="loadSlots">
<el-option
v-for="service in serviceTypes"
:key="String(service.id)"
:label="`${service.name} · ${service.durationMinutes || 60} 分钟`"
:value="String(service.name)"
/>
</el-select>
</el-form-item>
<div class="form-grid">
<el-form-item label="预约日期">
<el-date-picker
v-model="rebookForm.date"
type="date"
value-format="YYYY-MM-DD"
:disabled-date="disablePastDate"
style="width: 100%"
@change="loadSlots"
/>
</el-form-item>
<el-form-item label="可约时段">
<el-select v-model="rebookForm.time" :loading="slotsLoading" style="width: 100%">
<el-option
v-for="slot in availableSlots"
:key="slot.time"
:label="`${slot.time}–${slot.endTime}`"
:value="slot.time"
/>
</el-select>
</el-form-item>
</div>
</el-form>
<template #footer>
<el-button @click="rebookVisible = false">取消</el-button>
<el-button type="success" :loading="saving" @click="submitRebook">创建并归因</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
closeFollowUpTask,
createAppointment,
getAdminStore,
getAppointmentAvailableSlots,
getFollowUpTasks,
getServiceTypeList,
rescheduleFollowUpTask,
startFollowUpTask,
type FollowUpTaskView,
} from '@/api'
import { getLeads, getReportList } from '@/api'
import { reportPublicUrl } from '@/utils/publicLinks'
import { ElMessage } from 'element-plus'
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const saving = ref(false)
const rows = ref<FollowUpTaskView[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = 20
const status = ref((route.query.status as string) || 'open')
const status = ref('pending')
const dueToday = ref(route.query.due === 'today')
const rows = ref<Array<Record<string, unknown>>>([])
const rescheduleVisible = ref(false)
const rescheduleTask = ref<FollowUpTaskView | null>(null)
const rescheduleReason = ref<'no_answer' | 'follow_later'>('no_answer')
const rescheduleDate = ref('')
const rebookVisible = ref(false)
const rebookTask = ref<FollowUpTaskView | null>(null)
const storeId = ref<number | null>(null)
const serviceTypes = ref<Array<Record<string, unknown>>>([])
const slotsLoading = ref(false)
const availableSlots = ref<Array<{ time: string; endTime: string }>>([])
const rebookForm = reactive({ petName: '', petType: '', serviceType: '', date: '', time: '' })
function todayString() {
const now = new Date()
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
function todayStr() {
const d = new Date()
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}
async function load() {
loading.value = true
try {
const response = await getFollowUpTasks({
status: status.value,
dueDateTo: dueToday.value ? todayString() : undefined,
page: page.value,
pageSize,
const res = await getLeads(status.value)
let list = Array.isArray(res.data) ? (res.data as Array<Record<string, unknown>>) : []
if (dueToday.value) {
const t = todayStr()
list = list.filter((l) => {
const d = l.remindDate as string | undefined
return !d || d <= t
})
if (response.code !== 200 || !response.data) {
ElMessage.error(response.message || '回访任务加载失败')
return
}
rows.value = response.data.list
total.value = response.data.total
} catch {
ElMessage.error('回访任务加载失败，请检查网络')
rows.value = list
} finally {
loading.value = false
}
}
function resetAndLoad() {
page.value = 1
load()
}
function changePage(value: number) {
page.value = value
load()
}
async function startTask(task: FollowUpTaskView) {
try {
const response = await startFollowUpTask(task.taskId)
if (response.code !== 200) {
ElMessage.error(response.message || '领取失败')
await load()
async function openReport(row: Record<string, unknown>) {
const reportId = Number(row.reportId)
if (!reportId) return
// 优先用列表里的 token；没有则从报告列表反查
const listRes = await getReportList({ page: 1, pageSize: 200 })
const reports = Array.isArray(listRes.data) ? (listRes.data as Array<Record<string, unknown>>) : []
const hit = reports.find((r) => Number(r.id) === reportId)
const token = hit?.reportToken as string | undefined
if (token) {
window.open(reportPublicUrl(token), '_blank')
return
}
ElMessage.success('任务已领取')
await load()
} catch {
ElMessage.error('领取失败，请检查网络')
}
}
function openReschedule(task: FollowUpTaskView, reason: 'no_answer' | 'follow_later') {
rescheduleTask.value = task
rescheduleReason.value = reason
rescheduleDate.value = task.dueDate >= todayString() ? task.dueDate : todayString()
rescheduleVisible.value = true
}
async function saveReschedule() {
if (!rescheduleTask.value || !rescheduleDate.value) {
ElMessage.warning('请选择下次回访日期')
return
}
saving.value = true
try {
const response = await rescheduleFollowUpTask(
rescheduleTask.value.taskId,
rescheduleDate.value,
rescheduleReason.value,
)
if (response.code !== 200) {
ElMessage.error(response.message || '改期失败')
return
}
ElMessage.success('已记录本次联系并改期')
rescheduleVisible.value = false
await load()
} catch {
ElMessage.error('改期失败，请检查网络')
} finally {
saving.value = false
}
}
async function closeTask(task: FollowUpTaskView, outcome: 'not_interested' | 'invalid_contact') {
const label = outcome === 'not_interested' ? '本轮暂无意向' : '联系方式无效'
try {
await ElMessageBox.confirm(`确认以“${label}”关闭本轮回访？`, '关闭回访任务', { type: 'warning' })
} catch {
return
}
try {
const response = await closeFollowUpTask(task.taskId, outcome)
if (response.code !== 200) {
ElMessage.error(response.message || '关闭失败')
await load()
return
}
ElMessage.success('回访任务已关闭')
await load()
} catch {
ElMessage.error('关闭失败，请检查网络')
}
}
async function openRebook(task: FollowUpTaskView) {
rebookTask.value = task
rebookForm.petName = task.petName || ''
rebookForm.petType = ''
rebookForm.serviceType = task.serviceType || ''
rebookForm.date = ''
rebookForm.time = ''
availableSlots.value = []
rebookVisible.value = true
try {
const storeResponse = await getAdminStore()
if (storeResponse.code !== 200 || !storeResponse.data?.id) {
rebookVisible.value = false
ElMessage.error(storeResponse.message || '门店信息加载失败')
return
}
storeId.value = Number(storeResponse.data.id)
const serviceResponse = await getServiceTypeList(storeId.value)
if (serviceResponse.code !== 200) {
rebookVisible.value = false
ElMessage.error(serviceResponse.message || '服务项目加载失败')
return
}
serviceTypes.value = Array.isArray(serviceResponse.data)
? (serviceResponse.data as Array<Record<string, unknown>>)
: []
} catch {
rebookVisible.value = false
ElMessage.error('预约基础数据加载失败')
}
}
async function loadSlots() {
rebookForm.time = ''
availableSlots.value = []
if (!storeId.value || !rebookForm.date || !rebookForm.serviceType) return
slotsLoading.value = true
try {
const response = await getAppointmentAvailableSlots(
storeId.value,
rebookForm.date,
rebookForm.serviceType,
)
if (response.code !== 200) {
ElMessage.error(response.message || '可约时段加载失败')
return
}
const data = response.data as { slots?: Array<{ time: string; endTime: string; available: boolean }> } | undefined
availableSlots.value = (data?.slots || []).filter((slot) => slot.available)
if (availableSlots.value.length === 0) ElMessage.warning('当天暂无可约时段')
} catch {
ElMessage.error('可约时段加载失败，请检查网络')
} finally {
slotsLoading.value = false
}
}
async function submitRebook() {
const task = rebookTask.value
if (!task?.phone || !rebookForm.petName || !rebookForm.petType
|| !rebookForm.serviceType || !rebookForm.date || !rebookForm.time) {
ElMessage.warning('请补齐宠物、服务和可约时段')
return
}
saving.value = true
try {
const response = await createAppointment({
followUpTaskId: task.taskId,
customerPhone: task.phone,
customerName: task.displayName || '',
petName: rebookForm.petName,
petType: rebookForm.petType,
serviceType: rebookForm.serviceType,
appointmentTime: `${rebookForm.date}T${rebookForm.time}:00`,
})
if (response.code !== 200) {
ElMessage.error(response.message || '预约创建失败，任务状态未改变')
if (response.bizCode === 'CAPACITY_FULL') await loadSlots()
return
}
ElMessage.success('预约已创建并完成回访归因')
rebookVisible.value = false
await load()
} catch {
ElMessage.error('预约创建失败，请检查网络；任务状态未改变')
} finally {
saving.value = false
}
}
async function copyPhone(phone: string) {
try {
await navigator.clipboard.writeText(phone)
ElMessage.success('手机号已复制')
} catch {
ElMessage.warning(`请手动复制：${phone}`)
}
}
function goAppointment(id: number) {
router.push({ path: '/appointments', query: { id: String(id) } })
}
function statusLabel(value: FollowUpTaskView['status']) {
return { pending: '待领取', in_progress: '处理中', completed: '已完成', canceled: '已取消' }[value]
}
function statusTag(value: FollowUpTaskView['status']): 'primary' | 'success' | 'warning' | 'info' {
if (value === 'in_progress') return 'primary'
if (value === 'completed') return 'success'
if (value === 'canceled') return 'info'
return 'warning'
}
function outcomeLabel(value: NonNullable<FollowUpTaskView['outcome']>) {
return {
rebooked: '已再次预约',
not_interested: '本轮暂无意向',
invalid_contact: '联系方式无效',
unsubscribed: '宠主已退订',
}[value]
}
function disablePastDate(date: Date) {
const today = new Date()
today.setHours(0, 0, 0, 0)
return date.getTime() < today.getTime()
ElMessage.warning('未找到公开链接，已跳转报告中心')
await router.push({ path: '/reports', query: { q: String(reportId) } })
}
onMounted(load)
</script>
<style scoped>
.follow-up-page {
min-width: 980px;
}
.page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 20px;
}
.page-head p,
.muted,
.summary {
color: #7a8699;
font-size: 12px;
}
.eyebrow {
color: #2f6fed;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
}
.overdue {
color: #d64545;
font-weight: 700;
}
.pagination {
justify-content: flex-end;
margin-top: 20px;
}
.rebook-form {
margin-top: 18px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
</style>

2
src/views/LoginView.vue
View File

@ -94,7 +94,7 @@ async function onLogin() {
}
const storeRaw = res.data.store
const store: AdminStore | null = storeRaw
? { id: Number(storeRaw.id), name: storeRaw.name as string | undefined }
? { id: Number(storeRaw.id), name: storeRaw.name as string | undefined, inviteCode: storeRaw.inviteCode as string | undefined }
: null
setSession(res.data.sessionToken, user, store)
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/workbench'

132
src/views/ReportsView.vue
View File

@ -8,11 +8,6 @@
<el-option label="失败" value="failed" />
<el-option label="异常(失败+超时)" value="anomaly" />
</el-select>
<el-select v-model="sendStatus" clearable placeholder="发送状态" style="width: 150px">
<el-option label="待发送" value="unsent" />
<el-option label="已发送" value="sent" />
<el-option label="历史未知" value="unknown" />
</el-select>
<el-input v-model="keyword" clearable placeholder="宠物名 / 报告ID" style="width: 180px" />
<el-button type="primary" @click="load">查询</el-button>
</div>
@ -27,34 +22,10 @@
<div v-if="row.highlightFailReasonLabel" class="fail">{{ row.highlightFailReasonLabel }}</div>
</template>
</el-table-column>
<el-table-column label="发送" width="130">
<template #default="{ row }">
<el-tag :type="sendTagType(row.sendStatus)" effect="light">
{{ sendLabel(row.sendStatus) }}
</el-tag>
<div v-if="row.sentAt" class="sent-at">{{ row.sentAt }}</div>
</template>
</el-table-column>
<el-table-column label="操作" width="380" fixed="right">
<el-table-column label="操作" width="280" fixed="right">
<template #default="{ row }">
<el-button link type="primary" @click="openDetail(row)">详情</el-button>
<el-button link type="primary" @click="copyLink(row)">复制链接</el-button>
<el-dropdown
v-if="row.sendStatus !== 'sent'"
:disabled="confirmingId === row.id"
@command="onTableConfirm(row, $event)"
>
<el-button link type="success" :loading="confirmingId === row.id">
确认已发
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="wechat">微信消息</el-dropdown-item>
<el-dropdown-item command="qr">当面扫码</el-dropdown-item>
<el-dropdown-item command="other">其他方式</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button
v-if="row.highlightVideoStatus === 'failed' || isStale(row)"
link
@ -72,9 +43,6 @@
<el-descriptions-item label="服务">{{ current.serviceType }}</el-descriptions-item>
<el-descriptions-item label="预约时间">{{ current.appointmentTime }}</el-descriptions-item>
<el-descriptions-item label="成片">{{ hlLabel(current) }}</el-descriptions-item>
<el-descriptions-item label="发送状态">{{ sendLabel(current.sendStatus) }}</el-descriptions-item>
<el-descriptions-item v-if="current.sentAt" label="首次确认发送">{{ current.sentAt }}</el-descriptions-item>
<el-descriptions-item v-if="current.sendChannel" label="发送方式">{{ channelLabel(current.sendChannel) }}</el-descriptions-item>
<el-descriptions-item v-if="current.highlightFailReasonLabel" label="失败原因">
{{ current.highlightFailReasonLabel }}
</el-descriptions-item>
@ -89,20 +57,6 @@
<div class="drawer-actions">
<el-button type="primary" @click="copyLink(current)">复制公开链接</el-button>
<el-button v-if="current.reportToken" @click="openH5(current)">打开 H5</el-button>
<el-dropdown
v-if="current.sendStatus !== 'sent'"
:disabled="confirmingId === current.id"
@command="onCurrentConfirm"
>
<el-button type="success" :loading="confirmingId === current.id">确认已发给宠主</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="wechat">微信消息</el-dropdown-item>
<el-dropdown-item command="qr">当面扫码</el-dropdown-item>
<el-dropdown-item command="other">其他方式</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button
v-if="current.highlightVideoStatus === 'failed' || isStale(current)"
type="warning"
@ -117,8 +71,8 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { confirmReportSent, getReportList, startHighlight } from '@/api'
import { ElMessage } from 'element-plus'
import { getReportList, startHighlight } from '@/api'
import { isHighlightProcessingStale, reportPublicUrl } from '@/utils/publicLinks'
type ReportRow = {
@ -131,9 +85,6 @@ type ReportRow = {
highlightVideoStatus?: string
highlightFailReasonLabel?: string
reportToken?: string
sendStatus?: 'unknown' | 'unsent' | 'sent'
sentAt?: string
sendChannel?: 'wechat' | 'qr' | 'other'
beforePhotos?: string[]
afterPhotos?: string[]
}
@ -142,9 +93,7 @@ const route = useRoute()
const loading = ref(false)
const rows = ref<ReportRow[]>([])
const highlightStatus = ref((route.query.highlightStatus as string) || '')
const sendStatus = ref((route.query.sendStatus as string) || '')
const keyword = ref((route.query.q as string) || '')
const confirmingId = ref<number | null>(null)
const drawer = ref(false)
const current = ref<ReportRow | null>(null)
@ -165,20 +114,13 @@ function hlLabel(row: ReportRow) {
async function load() {
loading.value = true
try {
const res = await getReportList({
page: 1,
pageSize: 200,
sendStatus: sendStatus.value || undefined,
})
const res = await getReportList({ page: 1, pageSize: 200 })
let list = Array.isArray(res.data) ? (res.data as ReportRow[]) : []
if (highlightStatus.value === 'anomaly' || highlightStatus.value === 'failed') {
list = list.filter((r) => r.highlightVideoStatus === 'failed' || isStale(r))
} else if (highlightStatus.value) {
list = list.filter((r) => r.highlightVideoStatus === highlightStatus.value)
}
if (sendStatus.value) {
list = list.filter((r) => r.sendStatus === sendStatus.value)
}
if (keyword.value.trim()) {
const q = keyword.value.trim()
list = list.filter((r) =>
@ -191,67 +133,6 @@ async function load() {
}
}
function sendLabel(status?: ReportRow['sendStatus']) {
if (status === 'sent') return '已发送'
if (status === 'unsent') return '待发送'
if (status === 'unknown') return '历史未知'
return '—'
}
function sendTagType(status?: ReportRow['sendStatus']) {
if (status === 'sent') return 'success'
if (status === 'unsent') return 'warning'
return 'info'
}
function channelLabel(channel?: ReportRow['sendChannel']) {
if (channel === 'wechat') return '微信消息'
if (channel === 'qr') return '当面扫码'
if (channel === 'other') return '其他方式'
return '—'
}
async function confirmSent(row: ReportRow, rawChannel: unknown) {
const channel = rawChannel as 'wechat' | 'qr' | 'other'
if (!['wechat', 'qr', 'other'].includes(channel) || row.sendStatus === 'sent') return
try {
await ElMessageBox.confirm(
`确认宠主已通过“${channelLabel(channel)}”实际收到报告？复制链接或预览不算发送。`,
'确认已发送',
{ confirmButtonText: '确认已发送', cancelButtonText: '取消', type: 'warning' },
)
} catch {
return
}
confirmingId.value = row.id
try {
const res = await confirmReportSent(row.id, channel)
if (res.code !== 200 || !res.data) {
ElMessage.error(res.message || '确认失败')
return
}
const data = res.data as Record<string, unknown>
row.sendStatus = 'sent'
row.sentAt = String(data.sentAt || '')
row.sendChannel = (data.sendChannel as ReportRow['sendChannel']) || channel
if (current.value?.id === row.id) current.value = row
ElMessage.success(data.alreadyConfirmed ? '此前已确认发送' : '已记录发送')
} catch {
ElMessage.error('确认失败，请检查网络后重试')
} finally {
confirmingId.value = null
}
}
function onTableConfirm(row: ReportRow, channel: unknown) {
void confirmSent(row, channel)
}
function onCurrentConfirm(channel: unknown) {
if (current.value) void confirmSent(current.value, channel)
}
function openDetail(row: ReportRow) {
current.value = row
drawer.value = true
@ -289,11 +170,6 @@ onMounted(load)
color: #c45656;
font-size: 12px;
}
.sent-at {
margin-top: 4px;
color: #909399;
font-size: 11px;
}
.media {
margin-top: 16px;
}

54
src/views/ScheduleView.vue
View File

@ -7,12 +7,11 @@
<el-button @click="openCreate">新增占用</el-button>
</div>
<el-table :data="rows" v-loading="loading" stripe>
<el-table-column prop="time" label="容量档" width="100" />
<el-table-column prop="time" label="时段" width="100" />
<el-table-column label="类型" width="120">
<template #default="{ row }">{{ kindLabel(row.kind, row.blockType) }}</template>
</el-table-column>
<el-table-column prop="title" label="内容" min-width="240" />
<el-table-column prop="capacityText" label="已用/总容量" width="130" />
<el-table-column label="操作" width="120">
<template #default="{ row }">
<el-button
@ -36,25 +35,15 @@
<el-form-item label="时段">
<el-select v-model="createForm.slotStart" filterable style="width: 100%">
<el-option
v-for="opt in candidateSlots"
v-for="opt in emptySlots"
:key="opt.slotStart"
:label="opt.time"
:value="opt.slotStart"
/>
</el-select>
</el-form-item>
<el-form-item label="占用时长">
<el-input-number
v-model="createForm.durationMinutes"
:min="30"
:max="480"
:step="30"
@change="onBlockTypeChange"
/>
<span style="margin-left: 8px">分钟</span>
</el-form-item>
<el-form-item label="类型">
<el-radio-group v-model="createForm.blockType" @change="onBlockTypeChange">
<el-radio-group v-model="createForm.blockType">
<el-radio value="walk_in">到店占用</el-radio>
<el-radio value="blocked">暂停预约</el-radio>
</el-radio-group>
@ -84,10 +73,6 @@ type Row = {
blockId?: number
title: string
past?: boolean
usedCapacity: number
totalCapacity: number
remainingCapacity: number
capacityText: string
}
const loading = ref(false)
@ -98,21 +83,12 @@ const dialogVisible = ref(false)
const createForm = reactive({
slotStart: '',
blockType: 'blocked',
durationMinutes: 30,
note: '',
})
const candidateSlots = computed(() => {
const bucketCount = Math.max(1, Number(createForm.durationMinutes || 30) / 30)
return rows.value.filter((_row, index) => {
const covered = rows.value.slice(index, index + bucketCount)
if (covered.length !== bucketCount || covered.some((r) => r.past)) return false
if (createForm.blockType === 'blocked') {
return covered.every((r) => r.usedCapacity === 0 && r.kind === 'empty')
}
return covered.every((r) => r.remainingCapacity > 0)
})
})
const emptySlots = computed(() =>
rows.value.filter((r) => r.kind === 'empty' && !r.past),
)
function kindLabel(kind: string, blockType?: string) {
if (kind === 'appointment') return '预约'
@ -135,9 +111,6 @@ async function load() {
const kind = String(r.kind || 'empty')
const appt = r.appointment as Record<string, unknown> | null | undefined
const block = r.block as Record<string, unknown> | null | undefined
const usedCapacity = Number(r.usedCapacity || 0)
const totalCapacity = Number(r.totalCapacity || 1)
const remainingCapacity = Number(r.remainingCapacity || 0)
let title = '—'
let blockType: string | undefined
let blockId: number | undefined
@ -158,10 +131,6 @@ async function load() {
blockId,
title,
past: Boolean(r.past),
usedCapacity,
totalCapacity,
remainingCapacity,
capacityText: kind === 'block' && blockType === 'blocked' ? '暂停' : `${usedCapacity}/${totalCapacity}`,
}
})
} finally {
@ -170,23 +139,15 @@ async function load() {
}
function openCreate() {
createForm.slotStart = emptySlots.value[0]?.slotStart || ''
createForm.blockType = 'blocked'
createForm.durationMinutes = 30
createForm.slotStart = candidateSlots.value[0]?.slotStart || ''
createForm.note = ''
dialogVisible.value = true
}
function onBlockTypeChange() {
if (!candidateSlots.value.some((r) => r.slotStart === createForm.slotStart)) {
createForm.slotStart = candidateSlots.value[0]?.slotStart || ''
}
}
function quickBlock(row: Row) {
createForm.slotStart = row.slotStart
createForm.blockType = 'blocked'
createForm.durationMinutes = 30
createForm.note = ''
dialogVisible.value = true
}
@ -200,7 +161,6 @@ async function submitCreate() {
try {
const res = await createScheduleBlock({
slotStart: createForm.slotStart,
durationMinutes: createForm.durationMinutes,
blockType: createForm.blockType,
note: createForm.note || undefined,
})

566
src/views/SettingsView.vue
View File

@ -1,61 +1,9 @@
<template>
<div class="settings-page">
<section class="onboarding-card" v-loading="loadingOnboarding">
<div class="onboarding-head">
<div>
<div class="eyebrow">PILOT READINESS</div>
<div class="title-row">
<h2>门店开通清单</h2>
<el-tag :type="onboardingTagType" effect="light" round>{{ onboardingLabel }}</el-tag>
</div>
<p>完成 3 个必填项即可进入真实试点；单人门店不强制邀请员工。</p>
</div>
<div class="progress-copy">
<strong>{{ onboarding?.completedStepCount || 0 }}/{{ onboarding?.totalStepCount || 4 }}</strong>
<span>步骤完成</span>
</div>
</div>
<el-progress
:percentage="onboardingProgress"
:stroke-width="8"
:show-text="false"
:status="onboarding?.status === 'completed' ? 'success' : undefined"
/>
<div class="step-grid">
<button
v-for="step in onboarding?.steps || []"
:key="step.id"
type="button"
class="step-card"
:class="{ done: step.completed }"
@click="openStep(step.id)"
>
<span class="step-state">{{ step.completed ? '✓' : step.required ? '必填' : '选填' }}</span>
<strong>{{ step.title }}</strong>
<small>{{ step.hint }}</small>
</button>
</div>
<div v-if="isBoss" class="complete-row">
<span v-if="!onboarding?.readyToComplete">
尚缺：{{ onboarding?.missingRequiredSteps.join('、') || '加载中' }}
</span>
<span v-else-if="onboarding?.status === 'completed'">本店已完成开通，可开展真实试点。</span>
<span v-else>必填项已齐，可以显式完成门店开通。</span>
<el-button
v-if="onboarding?.status !== 'completed'"
type="primary"
:disabled="!onboarding?.readyToComplete"
:loading="completingOnboarding"
@click="finishOnboarding"
>完成开通</el-button>
</div>
</section>
<div class="page-card">
<h2 class="page-title">门店设置</h2>
<el-tabs v-model="tab">
<el-tab-pane label="资料" name="store">
<el-form label-width="120px" style="max-width: 620px" v-loading="loadingStore">
<el-form label-width="120px" style="max-width: 560px" v-loading="loadingStore">
<el-form-item label="店名">
<el-input v-model="form.name" :disabled="!isBoss" />
</el-form-item>
@ -86,12 +34,14 @@
:disabled="!isBoss"
/>
</el-form-item>
<el-form-item label="并发接待数">
<el-input-number v-model="form.bookingCapacity" :min="1" :max="10" :disabled="!isBoss" />
<span class="field-hint">同一时段最多同时服务的顾客数</span>
<el-form-item label="邀请码">
<div class="invite-row">
<el-input v-model="form.inviteCode" readonly />
<el-button @click="copyInvite">复制</el-button>
</div>
</el-form-item>
<el-form-item v-if="isBoss">
<el-button type="primary" :loading="savingStore" @click="saveStore">保存并刷新清单</el-button>
<el-button type="primary" :loading="savingStore" @click="saveStore">保存</el-button>
</el-form-item>
<el-alert v-else type="info" :closable="false" title="员工可查看；改资料仅老板" />
</el-form>
@ -100,8 +50,6 @@
<el-tab-pane label="服务类型" name="service">
<div class="filter-row" v-if="isBoss">
<el-input v-model="newServiceName" placeholder="新服务类型名称" style="width: 220px" />
<el-input-number v-model="newServiceDuration" :min="30" :max="480" :step="30" />
<span>分钟</span>
<el-button type="primary" @click="addService">新增</el-button>
</div>
<el-table :data="serviceTypes" v-loading="loadingMeta" stripe>
@ -109,113 +57,64 @@
<el-table-column label="范围" width="120">
<template #default="{ row }">{{ row.storeId == null ? '系统默认' : '本店' }}</template>
</el-table-column>
<el-table-column label="预计时长" width="140">
<template #default="{ row }">{{ row.durationMinutes }} 分钟</template>
</el-table-column>
<el-table-column v-if="isBoss" label="操作" width="160">
<template #default="{ row }">
<el-button v-if="row.storeId != null" link type="primary" @click="editService(row)">编辑</el-button>
<el-button v-if="row.storeId != null" link type="danger" @click="removeService(row)">删除</el-button>
<el-button
v-if="row.storeId != null"
link
type="primary"
@click="renameService(row)"
>改名</el-button>
<el-button
v-if="row.storeId != null"
link
type="danger"
@click="removeService(row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="员工与邀请" name="staff">
<section v-if="isBoss" class="invite-builder">
<div>
<h3>创建一次性员工邀请</h3>
<p>邀请绑定手机号，默认 7 天有效，可撤销且只能使用一次。原始邀请口令仅本次显示。</p>
<el-tab-pane label="员工" name="staff">
<div class="filter-row" v-if="isBoss">
<el-input v-model="newStaffName" placeholder="姓名" style="width: 140px" />
<el-input v-model="newStaffPhone" placeholder="手机号" style="width: 160px" maxlength="11" />
<el-button type="primary" @click="addStaff">创建员工</el-button>
</div>
<div class="filter-row invite-form">
<el-input v-model="newStaffName" placeholder="员工姓名" style="width: 150px" />
<el-input v-model="newStaffPhone" placeholder="本人微信手机号" style="width: 180px" maxlength="11" />
<el-select v-model="inviteValidDays" style="width: 120px">
<el-option label="3 天有效" :value="3" />
<el-option label="7 天有效" :value="7" />
<el-option label="14 天有效" :value="14" />
<el-option label="30 天有效" :value="30" />
</el-select>
<el-button type="primary" :loading="creatingInvite" @click="addInvitation">生成邀请</el-button>
</div>
</section>
<h3 class="table-title">门店成员</h3>
<el-table :data="staff" v-loading="loadingMeta" stripe>
<el-table-column prop="name" label="姓名" />
<el-table-column prop="phone" label="手机" />
<el-table-column label="角色" width="100">
<template #default="{ row }">{{ row.role === 'boss' ? '老板' : '员工' }}</template>
</el-table-column>
<el-table-column prop="role" label="角色" width="100" />
<el-table-column v-if="isBoss" label="操作" width="100">
<template #default="{ row }">
<el-button v-if="row.role === 'staff'" link type="danger" @click="removeStaff(row)">删除</el-button>
<el-button
v-if="row.role === 'staff'"
link
type="danger"
@click="removeStaff(row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<template v-if="isBoss">
<h3 class="table-title invitation-title">邀请记录</h3>
<el-table :data="invitations" v-loading="loadingMeta" stripe empty-text="尚未创建员工邀请">
<el-table-column prop="invitedName" label="受邀人" />
<el-table-column prop="maskedPhone" label="手机号" width="150" />
<el-table-column label="状态" width="110">
<template #default="{ row }">
<el-tag :type="invitationTagType(row.status)" effect="light" round>
{{ invitationStatusLabel(row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="有效期至" min-width="180">
<template #default="{ row }">{{ formatDateTime(row.expiresAt) }}</template>
</el-table-column>
<el-table-column label="操作" width="110">
<template #default="{ row }">
<el-button v-if="row.status === 'pending'" link type="danger" @click="revokeInvitation(row)">撤销</el-button>
<span v-else class="muted">—</span>
</template>
</el-table-column>
</el-table>
</template>
</el-tab-pane>
</el-tabs>
</div>
<el-dialog v-model="inviteDialogVisible" title="邀请已创建" width="560px" :close-on-click-modal="false">
<el-alert
type="warning"
:closable="false"
title="安全提示：系统不会再次显示原始邀请口令，请现在复制并只发给受邀员工。"
show-icon
/>
<el-input v-model="inviteMessage" class="invite-message" type="textarea" :rows="9" readonly />
<template #footer>
<el-button @click="inviteDialogVisible = false">关闭</el-button>
<el-button type="primary" @click="copyInviteMessage">复制邀请消息</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
completeOnboarding,
createServiceType,
createStaffInvitation,
createStaff,
deleteServiceType,
deleteStaff,
getAdminStore,
getOnboardingStatus,
getServiceTypeList,
getStaffInvitations,
getStaffList,
revokeStaffInvitation,
updateServiceType,
updateStore,
type OnboardingStatus,
type StaffInvitation,
} from '@/api'
import { getStore as getCachedStore, getUser, setSession, getToken, type AdminStore } from '@/utils/session'
@ -225,26 +124,6 @@ const isBoss = computed(() => user?.role === 'boss')
const loadingStore = ref(false)
const savingStore = ref(false)
const loadingMeta = ref(false)
const loadingOnboarding = ref(false)
const completingOnboarding = ref(false)
const creatingInvite = ref(false)
const onboarding = ref<OnboardingStatus | null>(null)
const onboardingProgress = computed(() => {
const current = onboarding.value
if (!current || !current.totalStepCount) return 0
return Math.round((current.completedStepCount / current.totalStepCount) * 100)
})
const onboardingLabel = computed(() => {
if (onboarding.value?.status === 'completed') return '已开通'
if (onboarding.value?.status === 'unknown') return '历史门店待确认'
return '开通中'
})
const onboardingTagType = computed<'success' | 'warning' | 'info'>(() => {
if (onboarding.value?.status === 'completed') return 'success'
if (onboarding.value?.status === 'unknown') return 'warning'
return 'info'
})
const form = reactive({
id: 0,
@ -252,84 +131,62 @@ const form = reactive({
phone: '',
address: '',
intro: '',
inviteCode: '',
bookingDayStart: '09:00',
bookingLastSlotStart: '21:30',
bookingCapacity: 1,
})
const serviceTypes = ref<Array<Record<string, unknown>>>([])
const staff = ref<Array<Record<string, unknown>>>([])
const invitations = ref<StaffInvitation[]>([])
const newServiceName = ref('')
const newServiceDuration = ref(60)
const newStaffName = ref('')
const newStaffPhone = ref('')
const inviteValidDays = ref(7)
const inviteDialogVisible = ref(false)
const inviteMessage = ref('')
function normTime(value: unknown): string {
if (value == null) return '09:00'
const normalized = String(value)
return normalized.length >= 5 ? normalized.slice(0, 5) : normalized
function normTime(v: unknown): string {
if (v == null) return '09:00'
const s = String(v)
return s.length >= 5 ? s.slice(0, 5) : s
}
async function loadStore() {
loadingStore.value = true
try {
const response = await getAdminStore()
if (response.code !== 200 || !response.data) {
ElMessage.error(response.message || '加载门店失败')
const res = await getAdminStore()
if (res.code !== 200 || !res.data) {
ElMessage.error(res.message || '加载门店失败')
return
}
const data = response.data
form.id = Number(data.id)
form.name = String(data.name || '')
form.phone = String(data.phone || '')
form.address = String(data.address || '')
form.intro = String(data.intro || '')
form.bookingDayStart = normTime(data.bookingDayStart)
form.bookingLastSlotStart = normTime(data.bookingLastSlotStart)
form.bookingCapacity = Number(data.bookingCapacity || 1)
const d = res.data
form.id = Number(d.id)
form.name = String(d.name || '')
form.phone = String(d.phone || '')
form.address = String(d.address || '')
form.intro = String(d.intro || '')
form.inviteCode = String(d.inviteCode || '')
form.bookingDayStart = normTime(d.bookingDayStart)
form.bookingLastSlotStart = normTime(d.bookingLastSlotStart)
const token = getToken()
const currentUser = getUser()
if (token && currentUser) {
const store: AdminStore = { id: form.id, name: form.name }
setSession(token, currentUser, store)
const u = getUser()
if (token && u) {
const store: AdminStore = {
id: form.id,
name: form.name,
inviteCode: form.inviteCode,
}
setSession(token, u, store)
}
} finally {
loadingStore.value = false
}
}
async function loadOnboarding() {
loadingOnboarding.value = true
try {
const response = await getOnboardingStatus()
onboarding.value = response.code === 200 && response.data ? response.data : null
} finally {
loadingOnboarding.value = false
}
}
async function loadMeta() {
loadingMeta.value = true
try {
const storeId = getUser()?.storeId ?? getCachedStore()?.id
const requests = [getServiceTypeList(storeId), getStaffList()] as const
const [serviceResponse, staffResponse] = await Promise.all(requests)
serviceTypes.value = Array.isArray(serviceResponse.data)
? (serviceResponse.data as Array<Record<string, unknown>>)
: []
staff.value = Array.isArray(staffResponse.data)
? (staffResponse.data as Array<Record<string, unknown>>)
: []
if (isBoss.value) {
const invitationResponse = await getStaffInvitations()
invitations.value = invitationResponse.code === 200 && Array.isArray(invitationResponse.data)
? invitationResponse.data
: []
}
const [st, sf] = await Promise.all([getServiceTypeList(storeId), getStaffList()])
serviceTypes.value = Array.isArray(st.data) ? (st.data as Array<Record<string, unknown>>) : []
staff.value = Array.isArray(sf.data) ? (sf.data as Array<Record<string, unknown>>) : []
} finally {
loadingMeta.value = false
}
@ -339,7 +196,7 @@ async function saveStore() {
if (!form.id) return
savingStore.value = true
try {
const response = await updateStore({
const res = await updateStore({
id: form.id,
name: form.name,
phone: form.phone,
@ -347,66 +204,42 @@ async function saveStore() {
intro: form.intro,
bookingDayStart: form.bookingDayStart,
bookingLastSlotStart: form.bookingLastSlotStart,
bookingCapacity: form.bookingCapacity,
})
if (response.code !== 200) {
ElMessage.error(response.message || '保存失败')
if (res.code !== 200) {
ElMessage.error(res.message || '保存失败')
return
}
ElMessage.success('已保存，开通清单已刷新')
await Promise.all([loadStore(), loadOnboarding()])
ElMessage.success('已保存')
await loadStore()
} finally {
savingStore.value = false
}
}
async function finishOnboarding() {
await ElMessageBox.confirm('确认门店资料、号源容量与服务项目已可用于真实接待？', '完成门店开通', {
type: 'warning',
confirmButtonText: '确认完成',
})
completingOnboarding.value = true
try {
const response = await completeOnboarding()
if (response.code !== 200 || !response.data) {
ElMessage.error(response.message || '暂不能完成开通')
return
}
onboarding.value = response.data
ElMessage.success('门店已完成开通，可进入真实试点')
} finally {
completingOnboarding.value = false
}
}
function openStep(stepId: string) {
tab.value = stepId === 'services' ? 'service' : stepId === 'team' ? 'staff' : 'store'
async function copyInvite() {
if (!form.inviteCode) return
await navigator.clipboard.writeText(form.inviteCode)
ElMessage.success('邀请码已复制')
}
async function addService() {
const name = newServiceName.value.trim()
if (!name) return
const response = await createServiceType(name, Number(newServiceDuration.value))
if (response.code !== 200) {
ElMessage.error(response.message || '新增失败')
const res = await createServiceType(name)
if (res.code !== 200) {
ElMessage.error(res.message || '新增失败')
return
}
newServiceName.value = ''
newServiceDuration.value = 60
ElMessage.success('已新增')
await Promise.all([loadMeta(), loadOnboarding()])
await loadMeta()
}
async function editService(row: Record<string, unknown>) {
const namePrompt = await ElMessageBox.prompt('新名称', '编辑服务项目', { inputValue: String(row.name || '') })
const durationPrompt = await ElMessageBox.prompt('请输入 30～480 分钟，且为 30 的倍数', '预计服务时长', {
inputValue: String(row.durationMinutes || 60),
inputPattern: /^(30|60|90|120|150|180|210|240|270|300|330|360|390|420|450|480)$/,
inputErrorMessage: '请输入 30～480 的 30 分钟倍数',
})
const response = await updateServiceType(Number(row.id), namePrompt.value, Number(durationPrompt.value))
if (response.code !== 200) {
ElMessage.error(response.message || '更新失败')
async function renameService(row: Record<string, unknown>) {
const { value } = await ElMessageBox.prompt('新名称', '改名', { inputValue: String(row.name || '') })
const res = await updateServiceType(Number(row.id), value)
if (res.code !== 200) {
ElMessage.error(res.message || '改名失败')
return
}
ElMessage.success('已更新')
@ -415,254 +248,51 @@ async function editService(row: Record<string, unknown>) {
async function removeService(row: Record<string, unknown>) {
await ElMessageBox.confirm(`删除服务类型「${row.name}」？`, '确认', { type: 'warning' })
const response = await deleteServiceType(Number(row.id))
if (response.code !== 200) {
ElMessage.error(response.message || '删除失败')
const res = await deleteServiceType(Number(row.id))
if (res.code !== 200) {
ElMessage.error(res.message || '删除失败')
return
}
ElMessage.success('已删除')
await Promise.all([loadMeta(), loadOnboarding()])
await loadMeta()
}
async function addInvitation() {
const name = newStaffName.value.trim()
const phone = newStaffPhone.value.trim()
if (!name || !/^1[3-9]\d{9}$/.test(phone)) {
ElMessage.warning('请填写员工姓名与本人微信手机号')
async function addStaff() {
if (!newStaffName.value.trim() || !/^1\d{10}$/.test(newStaffPhone.value)) {
ElMessage.warning('请填写姓名与正确手机号')
return
}
creatingInvite.value = true
try {
const response = await createStaffInvitation({ name, phone, validDays: inviteValidDays.value })
if (response.code !== 200 || !response.data?.inviteToken || !response.data.invitePath) {
ElMessage.error(response.message || '邀请创建失败')
const res = await createStaff({ name: newStaffName.value.trim(), phone: newStaffPhone.value })
if (res.code !== 200) {
ElMessage.error(res.message || '创建失败')
return
}
inviteMessage.value = buildInviteMessage(response.data)
inviteDialogVisible.value = true
newStaffName.value = ''
newStaffPhone.value = ''
await Promise.all([loadMeta(), loadOnboarding()])
} finally {
creatingInvite.value = false
}
}
function buildInviteMessage(invitation: StaffInvitation): string {
return [
'【宠小它员工邀请】',
`${invitation.storeName} 邀请 ${invitation.invitedName} 加入门店。`,
`受邀手机号：${invitation.maskedPhone}`,
`有效期至：${formatDateTime(invitation.expiresAt)}`,
'',
'请在微信中打开“宠小它”小程序，通过员工邀请入口加入。',
`小程序路径：${invitation.invitePath}`,
`邀请口令：${invitation.inviteToken}`,
'',
'口令仅限本人使用；微信手机号不一致时系统会拒绝加入。',
].join('\n')
}
async function copyInviteMessage() {
await navigator.clipboard.writeText(inviteMessage.value)
ElMessage.success('邀请消息已复制')
}
async function revokeInvitation(invitation: StaffInvitation) {
await ElMessageBox.confirm(`撤销发给「${invitation.invitedName}」的邀请？`, '撤销邀请', { type: 'warning' })
const response = await revokeStaffInvitation(invitation.invitationId)
if (response.code !== 200) {
ElMessage.error(response.message || '撤销失败')
return
}
ElMessage.success('邀请已撤销')
ElMessage.success('已创建')
await loadMeta()
}
async function removeStaff(row: Record<string, unknown>) {
await ElMessageBox.confirm(`删除员工「${row.name}」？删除后其现有会话将无法再访问门店。`, '确认', { type: 'warning' })
const response = await deleteStaff(Number(row.id))
if (response.code !== 200) {
ElMessage.error(response.message || '删除失败')
await ElMessageBox.confirm(`删除员工「${row.name}」？`, '确认', { type: 'warning' })
const res = await deleteStaff(Number(row.id))
if (res.code !== 200) {
ElMessage.error(res.message || '删除失败')
return
}
ElMessage.success('已删除')
await Promise.all([loadMeta(), loadOnboarding()])
}
function invitationStatusLabel(status: StaffInvitation['status']): string {
return { pending: '待接受', accepted: '已加入', revoked: '已撤销', expired: '已过期' }[status]
}
function invitationTagType(status: StaffInvitation['status']): 'success' | 'warning' | 'info' | 'danger' {
if (status === 'accepted') return 'success'
if (status === 'pending') return 'warning'
if (status === 'revoked') return 'danger'
return 'info'
}
function formatDateTime(value?: string | null): string {
if (!value) return '—'
const date = new Date(value)
if (Number.isNaN(date.getTime())) return value.replace('T', ' ')
return date.toLocaleString('zh-CN', { hour12: false })
await loadMeta()
}
onMounted(async () => {
await Promise.all([loadStore(), loadMeta(), loadOnboarding()])
await Promise.all([loadStore(), loadMeta()])
})
</script>
<style scoped>
.settings-page {
display: grid;
gap: 16px;
}
.onboarding-card {
padding: 22px 24px;
color: #20314f;
background:
radial-gradient(circle at 90% 0, rgb(47 111 237 / 12%), transparent 32%),
#fff;
border: 1px solid #dfe8f6;
border-radius: 12px;
}
.onboarding-head,
.title-row,
.complete-row {
.invite-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.eyebrow {
color: #2f6fed;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
}
.title-row {
justify-content: flex-start;
gap: 10px;
}
.title-row h2 {
margin: 6px 0 4px;
font-size: 21px;
}
.onboarding-head p,
.invite-builder p {
margin: 0;
color: #68768a;
font-size: 13px;
}
.progress-copy {
display: grid;
text-align: right;
}
.progress-copy strong {
font-size: 24px;
}
.progress-copy span {
color: #7a8798;
font-size: 12px;
}
.onboarding-card :deep(.el-progress) {
margin: 18px 0;
}
.step-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.step-card {
display: grid;
gap: 6px;
min-height: 104px;
padding: 13px;
color: inherit;
text-align: left;
cursor: pointer;
background: #f7f9fc;
border: 1px solid #e6ebf2;
border-radius: 9px;
}
.step-card.done {
background: #f2fbf6;
border-color: #cdebd8;
}
.step-state {
color: #2f6fed;
font-size: 11px;
font-weight: 700;
}
.step-card.done .step-state {
color: #24a35a;
}
.step-card small {
color: #748196;
line-height: 1.45;
}
.complete-row {
gap: 16px;
margin-top: 16px;
color: #68768a;
font-size: 13px;
}
.field-hint {
margin-left: 10px;
color: var(--el-text-color-secondary);
}
.invite-builder {
margin-bottom: 22px;
padding: 18px;
background: #f6f9ff;
border: 1px solid #dce7fb;
border-radius: 10px;
}
.invite-builder h3,
.table-title {
margin: 0 0 6px;
font-size: 16px;
}
.invite-form {
margin: 16px 0 0;
}
.invitation-title {
margin-top: 28px;
}
.muted {
color: #a1a9b6;
}
.invite-message {
margin-top: 16px;
}
@media (max-width: 980px) {
.step-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
gap: 8px;
width: 100%;
}
</style>

736
src/views/WorkbenchView.vue
View File

@ -1,643 +1,189 @@
<template>
<div class="page-card workbench">
<header class="workbench-header">
<div>
<div class="eyebrow">TODAY · {{ dateLabel }}</div>
<h2>今天先做什么</h2>
<p>按影响履约的紧急程度排好顺序，处理完再看经营结果。</p>
<div class="page-card">
<h2 class="page-title">今日工作台</h2>
<el-row :gutter="12" class="metrics">
<el-col :span="6" v-for="card in cards" :key="card.key">
<el-card shadow="hover" class="metric" @click="go(card.to)">
<div class="metric-label">{{ card.label }}</div>
<div class="metric-value">{{ card.value }}</div>
</el-card>
</el-col>
</el-row>
<h3>今日待办</h3>
<div class="todos">
<el-tag
v-for="t in todos"
:key="t.key"
class="todo"
effect="plain"
@click="go(t.to)"
>{{ t.label }} {{ t.value }}</el-tag>
</div>
<el-button :loading="loading" @click="load">刷新</el-button>
</header>
<el-alert
v-if="errorMessage"
class="load-error"
type="error"
:closable="false"
:title="errorMessage"
show-icon
/>
<h3>报告漏斗</h3>
<el-row :gutter="12">
<el-col :span="6" v-for="f in funnel" :key="f.label">
<div class="funnel-item">
<div>{{ f.label }}</div>
<strong>{{ f.value }}</strong>
</div>
</el-col>
</el-row>
<section class="metrics" aria-label="今日概览">
<button
v-for="metric in metricCards"
:key="metric.key"
type="button"
class="metric-card"
@click="go(metric.to)"
<el-dialog
v-model="todoDialog"
title="今日待办"
width="480px"
:close-on-click-modal="false"
>
<span>{{ metric.label }}</span>
<strong>{{ metric.value }}</strong>
<small>{{ metric.hint }}</small>
</button>
</section>
<section class="action-section">
<div class="section-heading">
<div>
<span class="section-kicker">行动队列</span>
<h3>先处理会卡住服务的事</h3>
</div>
<span class="action-total">{{ totalActions }} 项待处理</span>
</div>
<div v-if="loading && !workbenchData" class="skeletons">
<el-skeleton v-for="index in 3" :key="index" :rows="2" animated />
</div>
<el-empty
v-else-if="actionGroups.length === 0"
description="当前没有待处理事项，可以安心接待今天的顾客"
/>
<div v-else class="action-groups">
<article
v-for="group in actionGroups"
:key="group.kind"
class="action-group"
:class="`urgency-${group.urgency}`"
>
<div class="action-group-head">
<div class="action-copy">
<span class="priority-dot" />
<div>
<div class="action-title-line">
<h4>{{ groupMeta(group.kind).title }}</h4>
<el-tag :type="tagType(group.urgency)" effect="light" round>
{{ group.count }} 项
</el-tag>
</div>
<p>{{ groupMeta(group.kind).description }}</p>
</div>
</div>
<el-button type="primary" link @click="go(groupMeta(group.kind).to)">
全部处理
</el-button>
</div>
<div class="action-items">
<button
v-for="item in group.items"
:key="`${item.resourceType}-${item.resourceId}`"
type="button"
class="action-item"
@click="goItem(group.kind, item)"
>
<span class="item-main">
<strong>{{ item.petName || '未命名宠物' }}</strong>
<span>{{ item.serviceType || '服务待确认' }}</span>
</span>
<span class="item-time">{{ formatSchedule(item.scheduledAt) }}</span>
</button>
</div>
<div v-if="group.count > group.items.length" class="remaining">
另有 {{ group.count - group.items.length }} 项，点击“全部处理”查看
</div>
</article>
</div>
</section>
<section class="funnel-section">
<div class="section-heading compact">
<div>
<span class="section-kicker">服务结果</span>
<h3>今天的报告走到哪一步</h3>
</div>
<span class="funnel-note">发送与再次预约均来自真实业务回执</span>
</div>
<div class="funnel-grid">
<div v-for="step in funnelSteps" :key="step.label" class="funnel-step">
<span>{{ step.label }}</span>
<strong>{{ step.value }}</strong>
<small>{{ step.hint }}</small>
</div>
</div>
</section>
<el-table :data="todos" size="small">
<el-table-column prop="label" label="事项" />
<el-table-column prop="value" label="数量" width="80" />
<el-table-column label="" width="90">
<template #default="{ row }">
<el-button link type="primary" @click="goFromDialog(row.to)">去处理</el-button>
</template>
</el-table-column>
</el-table>
<template #footer>
<el-checkbox v-model="suppressToday">今日不再提醒</el-checkbox>
<el-button type="primary" @click="closeTodoDialog">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getWorkbenchActions } from '@/api'
import { getAppointmentList, getLeads, getReportList } from '@/api'
import { isHighlightProcessingStale } from '@/utils/publicLinks'
type RouteTarget = { path: string; query?: Record<string, string | undefined> }
type WorkbenchMetrics = {
todayAppointmentCount: number
todayDoneCount: number
overdueAppointmentCount: number
inServiceCount: number
upcomingTodayCount: number
highlightAnomalyCount: number
unsentReportCount: number
dueFollowUpCount: number
}
type ActionItem = {
resourceType: 'appointment' | 'report' | 'follow_up_task'
resourceId: number
petName?: string | null
serviceType?: string | null
scheduledAt?: string | null
status?: string | null
overdue: boolean
}
type ActionGroup = {
kind: string
urgency: 'critical' | 'high' | 'normal'
count: number
items: ActionItem[]
}
type WorkbenchData = {
date: string
generatedAt: string
metrics: WorkbenchMetrics
actions: ActionGroup[]
reportFunnel: Record<string, unknown>
}
const SUPPRESS_KEY = 'petstore_admin_todo_suppress_date'
const router = useRouter()
const loading = ref(false)
const errorMessage = ref('')
const workbenchData = ref<WorkbenchData | null>(null)
const todayAppt = ref(0)
const todayDone = ref(0)
const pendingLead = ref(0)
const highlightFailed = ref(0)
const pendingReport = ref(0)
const todayReports = ref(0)
const todayLeads = ref(0)
const todoDialog = ref(false)
const suppressToday = ref(false)
const emptyMetrics: WorkbenchMetrics = {
todayAppointmentCount: 0,
todayDoneCount: 0,
overdueAppointmentCount: 0,
inServiceCount: 0,
upcomingTodayCount: 0,
highlightAnomalyCount: 0,
unsentReportCount: 0,
dueFollowUpCount: 0,
const today = new Date()
const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
function isSameDay(iso?: string | null) {
if (!iso) return false
return String(iso).startsWith(todayStr)
}
const metrics = computed(() => workbenchData.value?.metrics || emptyMetrics)
const actionGroups = computed(() => workbenchData.value?.actions || [])
const totalActions = computed(() => actionGroups.value.reduce((sum, group) => sum + Number(group.count || 0), 0))
onMounted(async () => {
const [apptRes, reportRes, leadRes] = await Promise.all([
getAppointmentList({ page: 1, pageSize: 200 }),
getReportList({ page: 1, pageSize: 200 }),
getLeads('pending'),
])
const appts = Array.isArray(apptRes.data) ? apptRes.data as Array<Record<string, unknown>> : []
const reports = Array.isArray(reportRes.data) ? reportRes.data as Array<Record<string, unknown>> : []
const leads = Array.isArray(leadRes.data) ? leadRes.data as Array<Record<string, unknown>> : []
const dateLabel = computed(() => {
const raw = workbenchData.value?.date
if (!raw) return '加载中'
const date = new Date(`${raw}T00:00:00`)
return `${date.getMonth() + 1}月${date.getDate()}日 · 周${'日一二三四五六'[date.getDay()]}`
todayAppt.value = appts.filter((a) => isSameDay(a.appointmentTime as string)).length
todayDone.value = appts.filter((a) => a.status === 'done' && isSameDay((a.updateTime as string) || (a.appointmentTime as string))).length
pendingReport.value = appts.filter((a) => a.status === 'doing' && a.hasReport !== true).length
pendingLead.value = leads.filter((l) => {
const d = l.remindDate as string | undefined
return !d || d <= todayStr
}).length
todayLeads.value = leads.filter((l) => isSameDay(l.createTime as string)).length
todayReports.value = reports.filter((r) => isSameDay(r.createTime as string)).length
highlightFailed.value = reports.filter(
(r) =>
r.highlightVideoStatus === 'failed' ||
isHighlightProcessingStale(r.highlightVideoStatus as string, r.updateTime as string),
).length
const suppressed = localStorage.getItem(SUPPRESS_KEY)
if (suppressed !== todayStr) {
todoDialog.value = true
}
})
const metricCards = computed(() => [
{
key: 'today',
label: '今日预约',
value: metrics.value.todayAppointmentCount,
hint: `还有 ${metrics.value.upcomingTodayCount} 位待到店`,
to: { path: '/appointments', query: { date: 'today' } },
},
{
key: 'overdue',
label: '逾期未开始',
value: metrics.value.overdueAppointmentCount,
hint: '优先确认到店或改约',
to: { path: '/appointments', query: { status: 'new', overdue: '1' } },
},
{
key: 'doing',
label: '服务中',
value: metrics.value.inServiceCount,
hint: '完成报告才能闭环',
to: { path: '/appointments', query: { status: 'doing', missingReport: '1' } },
},
{
key: 'done',
label: '今日完成',
value: metrics.value.todayDoneCount,
hint: '已形成完整服务记录',
to: { path: '/appointments', query: { status: 'done', completedToday: '1' } },
},
] satisfies Array<{ key: string; label: string; value: number; hint: string; to: RouteTarget }>)
const cards = computed(() => [
{ key: 'appt', label: '今日预约', value: todayAppt.value, to: { path: '/appointments', query: { date: 'today' } } },
{ key: 'done', label: '今日完成', value: todayDone.value, to: { path: '/appointments', query: { status: 'done', date: 'today' } } },
{ key: 'lead', label: '待回访', value: pendingLead.value, to: { path: '/leads', query: { due: 'today' } } },
{ key: 'hl', label: '成片失败', value: highlightFailed.value, to: { path: '/reports', query: { highlightStatus: 'failed' } } },
])
const groupDefinitions: Record<string, { title: string; description: string; to: RouteTarget }> = {
overdue_appointment: {
title: '预约已过时间',
description: '先确认顾客是否到店；未到店就改约或取消，别让状态悬着。',
to: { path: '/appointments', query: { status: 'new', overdue: '1' } },
},
in_service: {
title: '服务中，等待收尾',
description: '补齐服务前后照片与报告，提交后预约才会完成。',
to: { path: '/appointments', query: { status: 'doing', missingReport: '1' } },
},
upcoming_today: {
title: '今天接下来要到店',
description: '提前看服务项目和时长，安排好工位与接待。',
to: { path: '/appointments', query: { status: 'new', date: 'today' } },
},
highlight_anomaly: {
title: '服务短片异常',
description: '失败或处理超过 30 分钟，确认素材后再重试。',
to: { path: '/reports', query: { highlightStatus: 'anomaly' } },
},
unsent_report: {
title: '报告尚未发送',
description: '复制链接不等于发送；宠主实际收到后，请在报告列表显式确认。',
to: { path: '/reports', query: { sendStatus: 'unsent' } },
},
follow_up_due: {
title: '回访日期已到',
description: '领取任务、记录联系结果；只有真实创建预约才会计入转化。',
to: { path: '/leads', query: { due: 'today' } },
},
}
const todos = computed(() => [
{ key: 'a', label: '今日预约', value: todayAppt.value, to: { path: '/appointments', query: { date: 'today' } } },
{ key: 'r', label: '待出报告', value: pendingReport.value, to: { path: '/appointments', query: { status: 'doing', missingReport: '1' } } },
{ key: 'h', label: '成片异常', value: highlightFailed.value, to: { path: '/reports', query: { highlightStatus: 'failed' } } },
{ key: 'l', label: '待回访', value: pendingLead.value, to: { path: '/leads', query: { due: 'today' } } },
])
function groupMeta(kind: string) {
return groupDefinitions[kind] || {
title: '其他待办',
description: '进入对应列表继续处理。',
to: { path: '/workbench' },
}
}
const funnel = computed(() => [
{ label: '今日已发报告', value: todayReports.value },
{ label: '已打开', value: '—' },
{ label: '已留资', value: todayLeads.value },
{ label: '报告转预约', value: '—' },
])
const funnelSteps = computed(() => {
const funnel = workbenchData.value?.reportFunnel || {}
const sentReady = funnel.reportSentTrackingReady === true
const rebookReady = funnel.rebookTrackingReady === true
return [
{ label: '报告提交', value: Number(funnel.reportSubmittedCount || 0), hint: '服务已完成' },
{ label: '确认发送', value: sentReady ? Number(funnel.reportSentCount || 0) : '—', hint: sentReady ? '门店已发送' : '状态待接入' },
{ label: '宠主打开', value: Number(funnel.reportOpenedCount || 0), hint: '按报告去重' },
{ label: '留下提醒', value: Number(funnel.leadSubmittedCount || 0), hint: '按线索去重' },
{ label: '再次预约', value: rebookReady ? Number(funnel.rebookCreatedCount || 0) : '—', hint: rebookReady ? '已归因' : '归因待接入' },
]
})
async function load() {
loading.value = true
errorMessage.value = ''
try {
const response = await getWorkbenchActions()
if (response.code !== 200 || !response.data) {
errorMessage.value = response.message || '工作台加载失败，请稍后重试'
return
}
workbenchData.value = response.data as WorkbenchData
} catch {
errorMessage.value = '工作台加载失败，请检查网络后重试'
} finally {
loading.value = false
}
}
function go(to: RouteTarget) {
function go(to: { path: string; query?: Record<string, string | undefined> }) {
const query: Record<string, string> = {}
for (const [key, value] of Object.entries(to.query || {})) {
if (value != null) query[key] = value
if (to.query) {
for (const [k, v] of Object.entries(to.query)) {
if (v != null) query[k] = v
}
}
router.push({ path: to.path, query })
}
function goItem(kind: string, item: ActionItem) {
if (item.resourceType === 'appointment') {
go({ path: '/appointments', query: { id: String(item.resourceId) } })
return
}
if (item.resourceType === 'report') {
go({
path: '/reports',
query: kind === 'unsent_report'
? { q: String(item.resourceId), sendStatus: 'unsent' }
: { q: String(item.resourceId), highlightStatus: 'anomaly' },
})
return
}
go(groupMeta(kind).to)
function goFromDialog(to: { path: string; query?: Record<string, string | undefined> }) {
closeTodoDialog()
go(to)
}
function formatSchedule(value?: string | null) {
if (!value) return '日期待确认'
if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
return `${Number(value.slice(5, 7))}月${Number(value.slice(8, 10))}日`
function closeTodoDialog() {
if (suppressToday.value) {
localStorage.setItem(SUPPRESS_KEY, todayStr)
}
const date = new Date(value)
if (Number.isNaN(date.getTime())) return value
const isToday = workbenchData.value?.date === value.slice(0, 10)
const time = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
return isToday ? `今天 ${time}` : `${date.getMonth() + 1}月${date.getDate()}日 ${time}`
todoDialog.value = false
}
function tagType(urgency: ActionGroup['urgency']) {
if (urgency === 'critical') return 'danger'
if (urgency === 'high') return 'warning'
return 'info'
}
onMounted(load)
</script>
<style scoped>
.workbench {
padding: 0;
overflow: hidden;
background: transparent;
}
.workbench-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 26px 28px 24px;
color: #fff;
background:
radial-gradient(circle at 82% 12%, rgb(255 255 255 / 18%), transparent 28%),
linear-gradient(135deg, #2457b8 0%, var(--admin-accent) 58%, #4f8cff 100%);
}
.eyebrow,
.section-kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
}
.eyebrow {
color: rgb(255 255 255 / 72%);
}
.workbench-header h2 {
margin: 8px 0 6px;
font-size: 28px;
letter-spacing: -0.02em;
}
.workbench-header p {
margin: 0;
color: rgb(255 255 255 / 78%);
}
.workbench-header :deep(.el-button) {
color: #fff;
border-color: rgb(255 255 255 / 42%);
background: rgb(255 255 255 / 12%);
}
.load-error {
margin: 16px 20px 0;
}
.metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
padding: 18px 20px 0;
}
.metric-card {
display: grid;
gap: 7px;
min-height: 120px;
padding: 17px;
text-align: left;
color: #1f2a37;
cursor: pointer;
background: #fff;
border: 1px solid #e5eaf1;
border-radius: 12px;
box-shadow: 0 8px 24px rgb(31 42 55 / 5%);
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.metric-card:hover {
border-color: #b7caef;
box-shadow: 0 12px 30px rgb(47 111 237 / 10%);
transform: translateY(-2px);
}
.metric-card span {
color: #657184;
font-size: 13px;
}
.metric-card strong {
font-size: 30px;
line-height: 1;
}
.metric-card small {
color: #8a94a6;
}
.action-section,
.funnel-section {
margin: 16px 20px 0;
padding: 22px;
background: #fff;
border: 1px solid #e8edf3;
border-radius: 14px;
}
.funnel-section {
margin-bottom: 20px;
}
.section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
.metric {
cursor: pointer;
}
.section-heading.compact {
align-items: center;
}
.section-kicker {
color: var(--admin-accent);
}
.section-heading h3 {
margin: 5px 0 0;
font-size: 18px;
}
.action-total,
.funnel-note {
.metric-label {
color: #7a8494;
font-size: 12px;
}
.action-groups {
display: grid;
gap: 12px;
}
.action-group {
position: relative;
padding: 16px 16px 14px 18px;
overflow: hidden;
background: #fbfcfe;
border: 1px solid #e8edf3;
border-radius: 10px;
}
.action-group::before {
position: absolute;
inset: 0 auto 0 0;
width: 3px;
content: '';
background: #9aa4b2;
}
.action-group.urgency-critical::before { background: #d64545; }
.action-group.urgency-high::before { background: #d38a20; }
.action-group.urgency-normal::before { background: var(--admin-accent); }
.action-group-head,
.action-copy,
.action-title-line,
.item-main {
display: flex;
align-items: center;
}
.action-group-head {
justify-content: space-between;
gap: 16px;
}
.action-copy {
align-items: flex-start;
gap: 11px;
}
.priority-dot {
width: 9px;
height: 9px;
margin-top: 6px;
background: #9aa4b2;
border-radius: 50%;
}
.urgency-critical .priority-dot { background: #d64545; }
.urgency-high .priority-dot { background: #d38a20; }
.urgency-normal .priority-dot { background: var(--admin-accent); }
.action-title-line {
gap: 10px;
}
.action-title-line h4 {
margin: 0;
font-size: 15px;
}
.action-copy p {
margin: 5px 0 0;
color: #6d7888;
font-size: 13px;
}
.action-items {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 13px;
.metric-value {
margin-top: 8px;
font-size: 28px;
font-weight: 700;
}
.action-item {
.todos {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
text-align: left;
color: inherit;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.todo {
cursor: pointer;
background: #fff;
border: 1px solid #e7ebf1;
}
.funnel-item {
background: #f7f9fc;
border-radius: 8px;
}
.action-item:hover {
color: var(--admin-accent);
border-color: #b7caef;
}
.item-main {
align-items: flex-start;
flex-direction: column;
min-width: 0;
}
.item-main strong,
.item-main span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-main span,
.item-time,
.remaining {
color: #7a8494;
font-size: 12px;
}
.item-time {
flex: none;
}
.remaining {
margin: 10px 0 0 20px;
}
.funnel-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
background: #e7ebf1;
border: 1px solid #e7ebf1;
border-radius: 10px;
}
.funnel-step {
display: grid;
gap: 6px;
min-height: 100px;
padding: 14px;
background: #f8fafc;
}
.funnel-step span,
.funnel-step small {
color: #718096;
font-size: 12px;
}
.funnel-step strong {
font-size: 23px;
}
.skeletons {
display: grid;
gap: 14px;
}
@media (max-width: 1080px) {
.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.action-items { grid-template-columns: 1fr; }
.funnel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.workbench-header,
.section-heading,
.action-group-head {
align-items: flex-start;
flex-direction: column;
}
.metrics { grid-template-columns: 1fr; }
.funnel-grid { grid-template-columns: 1fr; }
padding: 12px;
}
</style>