Compare commits
8 Commits
phase-a-rc
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
c0475362cb | ||
|
|
21cb134a29 | ||
|
|
9199072435 | ||
|
|
3470b124e4 | ||
|
|
7e924fa79d | ||
|
|
1dce8e94d0 | ||
|
|
9d59d72124 | ||
|
|
daa8744db4 |
2
.env.production
Normal file
2
.env.production
Normal file
@ -0,0 +1,2 @@
|
||||
# 安全占位符：正式构建必须用 .env.production.local 覆盖，并先运行发布门禁。
|
||||
VITE_PUBLIC_H5_ORIGIN=https://report.petstore.invalid
|
||||
11
README.md
11
README.md
@ -19,9 +19,20 @@ 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/**`
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"preflight:release": "node scripts/release-preflight.cjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
|
||||
56
scripts/release-preflight.cjs
Normal file
56
scripts/release-preflight.cjs
Normal file
@ -0,0 +1,56 @@
|
||||
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')
|
||||
@ -24,6 +24,10 @@ 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 })
|
||||
|
||||
@ -33,6 +37,12 @@ export const getLeads = (status = 'pending') =>
|
||||
export const getServiceCustomers = (params: Record<string, unknown> = {}) =>
|
||||
apiGet('/admin/service-customers', params)
|
||||
|
||||
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)
|
||||
@ -40,7 +50,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; blockType: string; note?: string }) =>
|
||||
export const createScheduleBlock = (data: { slotStart: string; durationMinutes: number; blockType: string; note?: string }) =>
|
||||
apiPost('/schedule/block', data)
|
||||
|
||||
export const deleteScheduleBlock = (id: number) =>
|
||||
@ -50,8 +60,50 @@ export const getStore = (id: number) => apiGet('/store/get', { id })
|
||||
|
||||
export const getStaffList = () => apiGet('/user/staff-list')
|
||||
|
||||
export const createStaff = (data: { name: string; phone: string }) =>
|
||||
apiPost('/user/create-staff', data)
|
||||
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 deleteStaff = (staffId: number) =>
|
||||
apiDelete('/user/staff', { staffId })
|
||||
@ -59,11 +111,11 @@ export const deleteStaff = (staffId: number) =>
|
||||
export const getServiceTypeList = (storeId?: number | null) =>
|
||||
apiGet('/service-type/list', storeId != null ? { storeId } : {})
|
||||
|
||||
export const createServiceType = (name: string) =>
|
||||
apiPost('/service-type/create', { name })
|
||||
export const createServiceType = (name: string, durationMinutes: number) =>
|
||||
apiPost('/service-type/create', { name, durationMinutes })
|
||||
|
||||
export const updateServiceType = (id: number, name: string) =>
|
||||
apiPut('/service-type/update', { id, name })
|
||||
export const updateServiceType = (id: number, name: string, durationMinutes: number) =>
|
||||
apiPut('/service-type/update', { id, name, durationMinutes })
|
||||
|
||||
export const deleteServiceType = (id: number) =>
|
||||
apiDelete('/service-type/delete', { id })
|
||||
|
||||
@ -13,7 +13,6 @@ export type AdminUser = {
|
||||
export type AdminStore = {
|
||||
id: number
|
||||
name?: string
|
||||
inviteCode?: string
|
||||
}
|
||||
|
||||
export function getToken(): string | null {
|
||||
|
||||
@ -20,13 +20,17 @@
|
||||
<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 prop="appointmentTime" label="预约时间" min-width="160" />
|
||||
<el-table-column label="预约时间" min-width="210">
|
||||
<template #default="{ row }">{{ appointmentRange(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">{{ statusLabel(row.status) }}</template>
|
||||
</el-table-column>
|
||||
@ -62,7 +66,7 @@
|
||||
<el-drawer v-model="drawer" title="预约详情" size="420px">
|
||||
<template v-if="current">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="时间">{{ current.appointmentTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="时间">{{ appointmentRange(current) }}</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>
|
||||
@ -101,10 +105,15 @@ 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
|
||||
@ -125,6 +134,15 @@ 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)
|
||||
@ -176,11 +194,22 @@ 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.assignedUserId === staffId.value)
|
||||
list = list.filter((a) => (a.assignedStaffId ?? 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) =>
|
||||
@ -202,6 +231,8 @@ function reset() {
|
||||
dateRange.value = ''
|
||||
staffId.value = undefined
|
||||
missingReport.value = false
|
||||
overdueOnly.value = false
|
||||
completedTodayOnly.value = false
|
||||
load()
|
||||
}
|
||||
|
||||
@ -251,6 +282,10 @@ onMounted(async () => {
|
||||
}
|
||||
await loadStaff()
|
||||
await load()
|
||||
const focusId = Number(route.query.id)
|
||||
if (Number.isFinite(focusId) && focusId > 0) {
|
||||
await openDetail({ id: focusId })
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@ -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" stripe>
|
||||
<el-table :data="rows" v-loading="loading" row-key="storeCustomerId" 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,7 +23,9 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="lastVisitAt" label="最近到店" min-width="160" />
|
||||
<el-table-column prop="leadStatus" label="留资状态" width="100" />
|
||||
<el-table-column prop="source" label="来源" width="140" />
|
||||
<el-table-column label="来源" width="140">
|
||||
<template #default="{ row }">{{ formatSource(row.source) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="openDetail(row)">详情</el-button>
|
||||
@ -38,7 +40,9 @@
|
||||
<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="首次来源">{{ formatOriginSource(current.originSource) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="首次接触">{{ current.firstContactAt || '—' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="最近接触">{{ current.lastContactAt || '—' }}</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="宠物">
|
||||
@ -60,6 +64,7 @@ import { useRouter } from 'vue-router'
|
||||
import { getServiceCustomers } from '@/api'
|
||||
|
||||
type CustomerRow = {
|
||||
storeCustomerId: number
|
||||
userId?: number | null
|
||||
displayName?: string
|
||||
phoneMasked?: string
|
||||
@ -69,6 +74,9 @@ type CustomerRow = {
|
||||
leadStatus?: string
|
||||
hasPendingLead?: boolean
|
||||
source?: string
|
||||
originSource?: string
|
||||
firstContactAt?: string
|
||||
lastContactAt?: string
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
@ -116,6 +124,21 @@ function goLead() {
|
||||
router.push({ path: '/leads', query: { due: 'today' } })
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
|
||||
@ -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, inviteCode: storeRaw.inviteCode as string | undefined }
|
||||
? { id: Number(storeRaw.id), name: storeRaw.name as string | undefined }
|
||||
: null
|
||||
setSession(res.data.sessionToken, user, store)
|
||||
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/workbench'
|
||||
|
||||
@ -8,6 +8,11 @@
|
||||
<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>
|
||||
@ -22,10 +27,34 @@
|
||||
<div v-if="row.highlightFailReasonLabel" class="fail">{{ row.highlightFailReasonLabel }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="280" fixed="right">
|
||||
<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">
|
||||
<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
|
||||
@ -43,6 +72,9 @@
|
||||
<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>
|
||||
@ -57,6 +89,20 @@
|
||||
<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"
|
||||
@ -71,8 +117,8 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getReportList, startHighlight } from '@/api'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { confirmReportSent, getReportList, startHighlight } from '@/api'
|
||||
import { isHighlightProcessingStale, reportPublicUrl } from '@/utils/publicLinks'
|
||||
|
||||
type ReportRow = {
|
||||
@ -85,6 +131,9 @@ type ReportRow = {
|
||||
highlightVideoStatus?: string
|
||||
highlightFailReasonLabel?: string
|
||||
reportToken?: string
|
||||
sendStatus?: 'unknown' | 'unsent' | 'sent'
|
||||
sentAt?: string
|
||||
sendChannel?: 'wechat' | 'qr' | 'other'
|
||||
beforePhotos?: string[]
|
||||
afterPhotos?: string[]
|
||||
}
|
||||
@ -93,7 +142,9 @@ 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)
|
||||
|
||||
@ -114,13 +165,20 @@ function hlLabel(row: ReportRow) {
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getReportList({ page: 1, pageSize: 200 })
|
||||
const res = await getReportList({
|
||||
page: 1,
|
||||
pageSize: 200,
|
||||
sendStatus: sendStatus.value || undefined,
|
||||
})
|
||||
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) =>
|
||||
@ -133,6 +191,67 @@ 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
|
||||
@ -170,6 +289,11 @@ onMounted(load)
|
||||
color: #c45656;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sent-at {
|
||||
margin-top: 4px;
|
||||
color: #909399;
|
||||
font-size: 11px;
|
||||
}
|
||||
.media {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
@ -7,11 +7,12 @@
|
||||
<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
|
||||
@ -35,15 +36,25 @@
|
||||
<el-form-item label="时段">
|
||||
<el-select v-model="createForm.slotStart" filterable style="width: 100%">
|
||||
<el-option
|
||||
v-for="opt in emptySlots"
|
||||
v-for="opt in candidateSlots"
|
||||
: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">
|
||||
<el-radio-group v-model="createForm.blockType" @change="onBlockTypeChange">
|
||||
<el-radio value="walk_in">到店占用</el-radio>
|
||||
<el-radio value="blocked">暂停预约</el-radio>
|
||||
</el-radio-group>
|
||||
@ -73,6 +84,10 @@ type Row = {
|
||||
blockId?: number
|
||||
title: string
|
||||
past?: boolean
|
||||
usedCapacity: number
|
||||
totalCapacity: number
|
||||
remainingCapacity: number
|
||||
capacityText: string
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
@ -83,12 +98,21 @@ const dialogVisible = ref(false)
|
||||
const createForm = reactive({
|
||||
slotStart: '',
|
||||
blockType: 'blocked',
|
||||
durationMinutes: 30,
|
||||
note: '',
|
||||
})
|
||||
|
||||
const emptySlots = computed(() =>
|
||||
rows.value.filter((r) => r.kind === 'empty' && !r.past),
|
||||
)
|
||||
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)
|
||||
})
|
||||
})
|
||||
|
||||
function kindLabel(kind: string, blockType?: string) {
|
||||
if (kind === 'appointment') return '预约'
|
||||
@ -111,6 +135,9 @@ 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
|
||||
@ -131,6 +158,10 @@ async function load() {
|
||||
blockId,
|
||||
title,
|
||||
past: Boolean(r.past),
|
||||
usedCapacity,
|
||||
totalCapacity,
|
||||
remainingCapacity,
|
||||
capacityText: kind === 'block' && blockType === 'blocked' ? '暂停' : `${usedCapacity}/${totalCapacity}`,
|
||||
}
|
||||
})
|
||||
} finally {
|
||||
@ -139,15 +170,23 @@ 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
|
||||
}
|
||||
@ -161,6 +200,7 @@ async function submitCreate() {
|
||||
try {
|
||||
const res = await createScheduleBlock({
|
||||
slotStart: createForm.slotStart,
|
||||
durationMinutes: createForm.durationMinutes,
|
||||
blockType: createForm.blockType,
|
||||
note: createForm.note || undefined,
|
||||
})
|
||||
|
||||
@ -1,104 +1,199 @@
|
||||
<template>
|
||||
<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: 560px" v-loading="loadingStore">
|
||||
<el-form-item label="店名">
|
||||
<el-input v-model="form.name" :disabled="!isBoss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话">
|
||||
<el-input v-model="form.phone" :disabled="!isBoss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input v-model="form.address" :disabled="!isBoss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="简介">
|
||||
<el-input v-model="form.intro" type="textarea" :rows="3" :disabled="!isBoss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="营业开始">
|
||||
<el-time-select
|
||||
v-model="form.bookingDayStart"
|
||||
start="06:00"
|
||||
step="00:30"
|
||||
end="22:00"
|
||||
:disabled="!isBoss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="末档开始">
|
||||
<el-time-select
|
||||
v-model="form.bookingLastSlotStart"
|
||||
start="06:00"
|
||||
step="00:30"
|
||||
end="23:30"
|
||||
:disabled="!isBoss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邀请码">
|
||||
<div class="invite-row">
|
||||
<el-input v-model="form.inviteCode" readonly />
|
||||
<el-button @click="copyInvite">复制</el-button>
|
||||
<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-item label="店名">
|
||||
<el-input v-model="form.name" :disabled="!isBoss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话">
|
||||
<el-input v-model="form.phone" :disabled="!isBoss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input v-model="form.address" :disabled="!isBoss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="简介">
|
||||
<el-input v-model="form.intro" type="textarea" :rows="3" :disabled="!isBoss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="营业开始">
|
||||
<el-time-select
|
||||
v-model="form.bookingDayStart"
|
||||
start="06:00"
|
||||
step="00:30"
|
||||
end="22:00"
|
||||
:disabled="!isBoss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="末档开始">
|
||||
<el-time-select
|
||||
v-model="form.bookingLastSlotStart"
|
||||
start="06:00"
|
||||
step="00:30"
|
||||
end="23:30"
|
||||
: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>
|
||||
<el-form-item v-if="isBoss">
|
||||
<el-button type="primary" :loading="savingStore" @click="saveStore">保存并刷新清单</el-button>
|
||||
</el-form-item>
|
||||
<el-alert v-else type="info" :closable="false" title="员工可查看；改资料仅老板" />
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<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>
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isBoss">
|
||||
<el-button type="primary" :loading="savingStore" @click="saveStore">保存</el-button>
|
||||
</el-form-item>
|
||||
<el-alert v-else type="info" :closable="false" title="员工可查看；改资料仅老板" />
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<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>
|
||||
|
||||
<el-tab-pane label="服务类型" name="service">
|
||||
<div class="filter-row" v-if="isBoss">
|
||||
<el-input v-model="newServiceName" placeholder="新服务类型名称" style="width: 220px" />
|
||||
<el-button type="primary" @click="addService">新增</el-button>
|
||||
</div>
|
||||
<el-table :data="serviceTypes" v-loading="loadingMeta" stripe>
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column label="范围" width="120">
|
||||
<template #default="{ row }">{{ row.storeId == null ? '系统默认' : '本店' }}</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="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>
|
||||
<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 v-if="isBoss" label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.role === 'staff'" link type="danger" @click="removeStaff(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<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>
|
||||
<el-table :data="staff" v-loading="loadingMeta" stripe>
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column prop="phone" label="手机" />
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<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>
|
||||
|
||||
@ -106,15 +201,21 @@
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
completeOnboarding,
|
||||
createServiceType,
|
||||
createStaff,
|
||||
createStaffInvitation,
|
||||
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'
|
||||
|
||||
@ -124,6 +225,26 @@ 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,
|
||||
@ -131,62 +252,84 @@ 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(v: unknown): string {
|
||||
if (v == null) return '09:00'
|
||||
const s = String(v)
|
||||
return s.length >= 5 ? s.slice(0, 5) : s
|
||||
function normTime(value: unknown): string {
|
||||
if (value == null) return '09:00'
|
||||
const normalized = String(value)
|
||||
return normalized.length >= 5 ? normalized.slice(0, 5) : normalized
|
||||
}
|
||||
|
||||
async function loadStore() {
|
||||
loadingStore.value = true
|
||||
try {
|
||||
const res = await getAdminStore()
|
||||
if (res.code !== 200 || !res.data) {
|
||||
ElMessage.error(res.message || '加载门店失败')
|
||||
const response = await getAdminStore()
|
||||
if (response.code !== 200 || !response.data) {
|
||||
ElMessage.error(response.message || '加载门店失败')
|
||||
return
|
||||
}
|
||||
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 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 token = getToken()
|
||||
const u = getUser()
|
||||
if (token && u) {
|
||||
const store: AdminStore = {
|
||||
id: form.id,
|
||||
name: form.name,
|
||||
inviteCode: form.inviteCode,
|
||||
}
|
||||
setSession(token, u, store)
|
||||
const currentUser = getUser()
|
||||
if (token && currentUser) {
|
||||
const store: AdminStore = { id: form.id, name: form.name }
|
||||
setSession(token, currentUser, 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 [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>>) : []
|
||||
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
|
||||
: []
|
||||
}
|
||||
} finally {
|
||||
loadingMeta.value = false
|
||||
}
|
||||
@ -196,7 +339,7 @@ async function saveStore() {
|
||||
if (!form.id) return
|
||||
savingStore.value = true
|
||||
try {
|
||||
const res = await updateStore({
|
||||
const response = await updateStore({
|
||||
id: form.id,
|
||||
name: form.name,
|
||||
phone: form.phone,
|
||||
@ -204,42 +347,66 @@ async function saveStore() {
|
||||
intro: form.intro,
|
||||
bookingDayStart: form.bookingDayStart,
|
||||
bookingLastSlotStart: form.bookingLastSlotStart,
|
||||
bookingCapacity: form.bookingCapacity,
|
||||
})
|
||||
if (res.code !== 200) {
|
||||
ElMessage.error(res.message || '保存失败')
|
||||
if (response.code !== 200) {
|
||||
ElMessage.error(response.message || '保存失败')
|
||||
return
|
||||
}
|
||||
ElMessage.success('已保存')
|
||||
await loadStore()
|
||||
ElMessage.success('已保存，开通清单已刷新')
|
||||
await Promise.all([loadStore(), loadOnboarding()])
|
||||
} finally {
|
||||
savingStore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function copyInvite() {
|
||||
if (!form.inviteCode) return
|
||||
await navigator.clipboard.writeText(form.inviteCode)
|
||||
ElMessage.success('邀请码已复制')
|
||||
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 addService() {
|
||||
const name = newServiceName.value.trim()
|
||||
if (!name) return
|
||||
const res = await createServiceType(name)
|
||||
if (res.code !== 200) {
|
||||
ElMessage.error(res.message || '新增失败')
|
||||
const response = await createServiceType(name, Number(newServiceDuration.value))
|
||||
if (response.code !== 200) {
|
||||
ElMessage.error(response.message || '新增失败')
|
||||
return
|
||||
}
|
||||
newServiceName.value = ''
|
||||
newServiceDuration.value = 60
|
||||
ElMessage.success('已新增')
|
||||
await loadMeta()
|
||||
await Promise.all([loadMeta(), loadOnboarding()])
|
||||
}
|
||||
|
||||
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 || '改名失败')
|
||||
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 || '更新失败')
|
||||
return
|
||||
}
|
||||
ElMessage.success('已更新')
|
||||
@ -248,51 +415,254 @@ async function renameService(row: Record<string, unknown>) {
|
||||
|
||||
async function removeService(row: Record<string, unknown>) {
|
||||
await ElMessageBox.confirm(`删除服务类型「${row.name}」？`, '确认', { type: 'warning' })
|
||||
const res = await deleteServiceType(Number(row.id))
|
||||
if (res.code !== 200) {
|
||||
ElMessage.error(res.message || '删除失败')
|
||||
const response = await deleteServiceType(Number(row.id))
|
||||
if (response.code !== 200) {
|
||||
ElMessage.error(response.message || '删除失败')
|
||||
return
|
||||
}
|
||||
ElMessage.success('已删除')
|
||||
await loadMeta()
|
||||
await Promise.all([loadMeta(), loadOnboarding()])
|
||||
}
|
||||
|
||||
async function addStaff() {
|
||||
if (!newStaffName.value.trim() || !/^1\d{10}$/.test(newStaffPhone.value)) {
|
||||
ElMessage.warning('请填写姓名与正确手机号')
|
||||
async function addInvitation() {
|
||||
const name = newStaffName.value.trim()
|
||||
const phone = newStaffPhone.value.trim()
|
||||
if (!name || !/^1[3-9]\d{9}$/.test(phone)) {
|
||||
ElMessage.warning('请填写员工姓名与本人微信手机号')
|
||||
return
|
||||
}
|
||||
const res = await createStaff({ name: newStaffName.value.trim(), phone: newStaffPhone.value })
|
||||
if (res.code !== 200) {
|
||||
ElMessage.error(res.message || '创建失败')
|
||||
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 || '邀请创建失败')
|
||||
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
|
||||
}
|
||||
newStaffName.value = ''
|
||||
newStaffPhone.value = ''
|
||||
ElMessage.success('已创建')
|
||||
ElMessage.success('邀请已撤销')
|
||||
await loadMeta()
|
||||
}
|
||||
|
||||
async function removeStaff(row: Record<string, unknown>) {
|
||||
await ElMessageBox.confirm(`删除员工「${row.name}」？`, '确认', { type: 'warning' })
|
||||
const res = await deleteStaff(Number(row.id))
|
||||
if (res.code !== 200) {
|
||||
ElMessage.error(res.message || '删除失败')
|
||||
await ElMessageBox.confirm(`删除员工「${row.name}」？删除后其现有会话将无法再访问门店。`, '确认', { type: 'warning' })
|
||||
const response = await deleteStaff(Number(row.id))
|
||||
if (response.code !== 200) {
|
||||
ElMessage.error(response.message || '删除失败')
|
||||
return
|
||||
}
|
||||
ElMessage.success('已删除')
|
||||
await loadMeta()
|
||||
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 })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadStore(), loadMeta()])
|
||||
await Promise.all([loadStore(), loadMeta(), loadOnboarding()])
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.invite-row {
|
||||
.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 {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
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));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,189 +1,643 @@
|
||||
<template>
|
||||
<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>
|
||||
<div class="page-card workbench">
|
||||
<header class="workbench-header">
|
||||
<div>
|
||||
<div class="eyebrow">TODAY · {{ dateLabel }}</div>
|
||||
<h2>今天先做什么</h2>
|
||||
<p>按影响履约的紧急程度排好顺序，处理完再看经营结果。</p>
|
||||
</div>
|
||||
<el-button :loading="loading" @click="load">刷新</el-button>
|
||||
</header>
|
||||
|
||||
<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-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>
|
||||
<section class="metrics" aria-label="今日概览">
|
||||
<button
|
||||
v-for="metric in metricCards"
|
||||
:key="metric.key"
|
||||
type="button"
|
||||
class="metric-card"
|
||||
@click="go(metric.to)"
|
||||
>
|
||||
<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>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<span class="action-total">{{ totalActions }} 项待处理</span>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="todoDialog"
|
||||
title="今日待办"
|
||||
width="480px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<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 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getAppointmentList, getLeads, getReportList } from '@/api'
|
||||
import { isHighlightProcessingStale } from '@/utils/publicLinks'
|
||||
import { getWorkbenchActions } from '@/api'
|
||||
|
||||
const SUPPRESS_KEY = 'petstore_admin_todo_suppress_date'
|
||||
type RouteTarget = { path: string; query?: Record<string, string | undefined> }
|
||||
|
||||
const router = useRouter()
|
||||
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 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)
|
||||
type WorkbenchMetrics = {
|
||||
todayAppointmentCount: number
|
||||
todayDoneCount: number
|
||||
overdueAppointmentCount: number
|
||||
inServiceCount: number
|
||||
upcomingTodayCount: number
|
||||
highlightAnomalyCount: number
|
||||
unsentReportCount: number
|
||||
dueFollowUpCount: number
|
||||
}
|
||||
|
||||
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>> : []
|
||||
type ActionItem = {
|
||||
resourceType: 'appointment' | 'report' | 'lead'
|
||||
resourceId: number
|
||||
petName?: string | null
|
||||
serviceType?: string | null
|
||||
scheduledAt?: string | null
|
||||
status?: string | null
|
||||
overdue: boolean
|
||||
}
|
||||
|
||||
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
|
||||
type ActionGroup = {
|
||||
kind: string
|
||||
urgency: 'critical' | 'high' | 'normal'
|
||||
count: number
|
||||
items: ActionItem[]
|
||||
}
|
||||
|
||||
const suppressed = localStorage.getItem(SUPPRESS_KEY)
|
||||
if (suppressed !== todayStr) {
|
||||
todoDialog.value = true
|
||||
}
|
||||
type WorkbenchData = {
|
||||
date: string
|
||||
generatedAt: string
|
||||
metrics: WorkbenchMetrics
|
||||
actions: ActionGroup[]
|
||||
reportFunnel: Record<string, unknown>
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const workbenchData = ref<WorkbenchData | null>(null)
|
||||
|
||||
const emptyMetrics: WorkbenchMetrics = {
|
||||
todayAppointmentCount: 0,
|
||||
todayDoneCount: 0,
|
||||
overdueAppointmentCount: 0,
|
||||
inServiceCount: 0,
|
||||
upcomingTodayCount: 0,
|
||||
highlightAnomalyCount: 0,
|
||||
unsentReportCount: 0,
|
||||
dueFollowUpCount: 0,
|
||||
}
|
||||
|
||||
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))
|
||||
|
||||
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()]}`
|
||||
})
|
||||
|
||||
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 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 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' } } },
|
||||
])
|
||||
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 funnel = computed(() => [
|
||||
{ label: '今日已发报告', value: todayReports.value },
|
||||
{ label: '已打开', value: '—' },
|
||||
{ label: '已留资', value: todayLeads.value },
|
||||
{ label: '报告转预约', value: '—' },
|
||||
])
|
||||
function groupMeta(kind: string) {
|
||||
return groupDefinitions[kind] || {
|
||||
title: '其他待办',
|
||||
description: '进入对应列表继续处理。',
|
||||
to: { path: '/workbench' },
|
||||
}
|
||||
}
|
||||
|
||||
function go(to: { path: string; query?: Record<string, string | undefined> }) {
|
||||
const query: Record<string, string> = {}
|
||||
if (to.query) {
|
||||
for (const [k, v] of Object.entries(to.query)) {
|
||||
if (v != null) query[k] = v
|
||||
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) {
|
||||
const query: Record<string, string> = {}
|
||||
for (const [key, value] of Object.entries(to.query || {})) {
|
||||
if (value != null) query[key] = value
|
||||
}
|
||||
router.push({ path: to.path, query })
|
||||
}
|
||||
|
||||
function goFromDialog(to: { path: string; query?: Record<string, string | undefined> }) {
|
||||
closeTodoDialog()
|
||||
go(to)
|
||||
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 closeTodoDialog() {
|
||||
if (suppressToday.value) {
|
||||
localStorage.setItem(SUPPRESS_KEY, todayStr)
|
||||
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))}日`
|
||||
}
|
||||
todoDialog.value = false
|
||||
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}`
|
||||
}
|
||||
|
||||
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 {
|
||||
margin-bottom: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
padding: 18px 20px 0;
|
||||
}
|
||||
.metric {
|
||||
|
||||
.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-label {
|
||||
color: #7a8494;
|
||||
|
||||
.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-value {
|
||||
margin-top: 8px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
|
||||
.metric-card strong {
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
}
|
||||
.todos {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.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;
|
||||
}
|
||||
.todo {
|
||||
cursor: pointer;
|
||||
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.funnel-item {
|
||||
background: #f7f9fc;
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #e7ebf1;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user