chore(ui): 删除冗余 AccountList 页,/accounts 重定向 /staff(总 spec 收尾)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -1,367 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getAccounts } from '@/api'
|
||||
import type { Account, Channel } from '@/api/types'
|
||||
import { useChannelStore } from '@/stores/channel'
|
||||
import { channelLabel, formatTime } from '@/utils/format'
|
||||
import { buildAccountSections, readField } from '@/utils/accountFields'
|
||||
|
||||
/**
|
||||
* 账号 list — unified WeChat + WhatsApp staff messaging accounts. Mirrors the
|
||||
* 云客 微信号管理 / WhatsApp views: 渠道 / 账号ID / 昵称 / 微信号 / 归属员工 /
|
||||
* 好友数 / 群数 / 收发 / 在职 / 最后更新. Clicking a row opens the all-fields
|
||||
* drawer (every raw_json key, grouped + 中文-labeled).
|
||||
*/
|
||||
const channelStore = useChannelStore()
|
||||
|
||||
const accounts = ref<Account[]>([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const loading = ref(false)
|
||||
const errorMsg = ref<string | null>(null)
|
||||
|
||||
// All-fields drawer state.
|
||||
const drawerOpen = ref(false)
|
||||
const drawerAccount = ref<Account | null>(null)
|
||||
|
||||
const channelOptions = [
|
||||
{ value: 'all' as const, label: '全部渠道' },
|
||||
{ value: 'wechat' as const, label: '微信' },
|
||||
{ value: 'whatsapp' as const, label: 'WhatsApp' },
|
||||
]
|
||||
|
||||
const channelLabelCurrent = computed(() =>
|
||||
channelLabel(channelStore.channel === 'all' ? null : channelStore.channel),
|
||||
)
|
||||
|
||||
function channelTagType(c: string): 'success' | 'warning' {
|
||||
return c === 'wechat' ? 'success' : 'warning'
|
||||
}
|
||||
|
||||
function onChannelChange(value: string | number | boolean | undefined): void {
|
||||
channelStore.setChannel(value as Channel | 'all')
|
||||
}
|
||||
|
||||
/** Read a raw_json camelCase key off an account, preferring the structured
|
||||
* snake_case column when it is populated. */
|
||||
function cell(row: Account, camelKey: string): unknown {
|
||||
return readField(row, camelKey)
|
||||
}
|
||||
|
||||
function cellText(row: Account, camelKey: string): string {
|
||||
const v = cell(row, camelKey)
|
||||
return v === null || v === undefined || v === '' ? '--' : String(v)
|
||||
}
|
||||
|
||||
function timeCell(row: Account, camelKey: string): number | undefined {
|
||||
const v = cell(row, camelKey)
|
||||
return typeof v === 'number' ? v : undefined
|
||||
}
|
||||
|
||||
function onJobTagType(onJob?: boolean | null): 'success' | 'info' | '' {
|
||||
if (onJob === true) return 'success'
|
||||
if (onJob === false) return 'info'
|
||||
return ''
|
||||
}
|
||||
|
||||
function onJobLabel(onJob?: boolean | null): string {
|
||||
if (onJob === true) return '在职'
|
||||
if (onJob === false) return '离职'
|
||||
return '--'
|
||||
}
|
||||
|
||||
async function load(): Promise<void> {
|
||||
loading.value = true
|
||||
errorMsg.value = null
|
||||
try {
|
||||
const res = await getAccounts({
|
||||
channel: channelStore.channel,
|
||||
page: page.value,
|
||||
page_size: pageSize.value,
|
||||
})
|
||||
accounts.value = res.items
|
||||
total.value = res.total
|
||||
} catch (e) {
|
||||
errorMsg.value = (e as Error).message
|
||||
ElMessage.error(`账号列表加载失败：${(e as Error).message}`)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handlePageChange(p: number): void {
|
||||
page.value = p
|
||||
load()
|
||||
}
|
||||
|
||||
function handlePageSizeChange(s: number): void {
|
||||
pageSize.value = s
|
||||
page.value = 1
|
||||
load()
|
||||
}
|
||||
|
||||
// React to the top-bar channel selector.
|
||||
watch(
|
||||
() => channelStore.channel,
|
||||
() => {
|
||||
page.value = 1
|
||||
load()
|
||||
},
|
||||
)
|
||||
|
||||
function openDrawer(row: Account): void {
|
||||
drawerAccount.value = row
|
||||
drawerOpen.value = true
|
||||
}
|
||||
|
||||
const drawerSections = computed(() =>
|
||||
drawerAccount.value ? buildAccountSections(drawerAccount.value) : [],
|
||||
)
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="yk-accounts">
|
||||
<div class="yk-accounts__header">
|
||||
<div>
|
||||
<h2 style="margin: 0 0 4px; font-size: 16px">账号列表</h2>
|
||||
<span class="yk-accounts__sub">
|
||||
共 {{ total }} 条 · 渠道：{{ channelLabelCurrent }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="yk-accounts__filters">
|
||||
<el-radio-group
|
||||
:model-value="channelStore.channel"
|
||||
size="small"
|
||||
@change="onChannelChange"
|
||||
>
|
||||
<el-radio-button
|
||||
v-for="opt in channelOptions"
|
||||
:key="opt.value"
|
||||
:value="opt.value"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-alert
|
||||
v-if="errorMsg"
|
||||
:title="errorMsg"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
style="margin-bottom: 12px"
|
||||
/>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="accounts"
|
||||
stripe
|
||||
border
|
||||
row-key="account_id"
|
||||
style="width: 100%"
|
||||
:row-class-name="() => 'yk-clickable-row'"
|
||||
empty-text="暂无账号数据"
|
||||
@row-click="openDrawer"
|
||||
>
|
||||
<el-table-column label="渠道" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="channelTagType(row.channel)" size="small" effect="plain">
|
||||
{{ channelLabel(row.channel) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="账号ID" min-width="160">
|
||||
<template #default="{ row }">{{ row.account_id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.nickname">{{ row.nickname }}</span>
|
||||
<span v-else style="color: #c0c4cc">--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="微信号" min-width="120">
|
||||
<template #default="{ row }">{{ cellText(row, 'alias') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="归属员工" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<span v-if="cell(row, 'userName') || row.user_name">
|
||||
{{ cellText(row, 'userName') }}
|
||||
</span>
|
||||
<span v-else style="color: #c0c4cc">--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="好友数" prop="contacts_num" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ row.contacts_num ?? 0 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="群数" prop="group_num" width="80" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ row.group_num ?? 0 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="发消息数" width="100" align="right">
|
||||
<template #default="{ row }">{{ cellText(row, 'sendNum') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="收消息数" width="100" align="right">
|
||||
<template #default="{ row }">{{ cellText(row, 'receiveNum') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="在职" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="onJobTagType(row.is_on_job)"
|
||||
size="small"
|
||||
effect="plain"
|
||||
>
|
||||
{{ onJobLabel(row.is_on_job) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最后更新" width="160">
|
||||
<template #default="{ row }">
|
||||
{{ formatTime(timeCell(row, 'lastUpdate')) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="yk-accounts__pager">
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
background
|
||||
@current-change="handlePageChange"
|
||||
@size-change="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<p class="yk-accounts__hint">点击任意一行查看账号全部字段。</p>
|
||||
|
||||
<!-- All-fields drawer -->
|
||||
<el-drawer
|
||||
v-model="drawerOpen"
|
||||
:title="drawerAccount ? `账号详情 · ${drawerAccount.nickname ?? drawerAccount.account_id}` : '账号详情'"
|
||||
direction="rtl"
|
||||
size="560px"
|
||||
>
|
||||
<template v-if="drawerAccount">
|
||||
<div class="yk-drawer__topmeta">
|
||||
<el-tag :type="channelTagType(drawerAccount.channel)" size="small" effect="plain">
|
||||
{{ channelLabel(drawerAccount.channel) }}
|
||||
</el-tag>
|
||||
<el-tag
|
||||
:type="onJobTagType(drawerAccount.is_on_job)"
|
||||
size="small"
|
||||
effect="plain"
|
||||
>
|
||||
{{ onJobLabel(drawerAccount.is_on_job) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div v-for="section in drawerSections" :key="section.title" class="yk-drawer__section">
|
||||
<el-divider content-position="left">{{ section.title }}</el-divider>
|
||||
<dl class="yk-drawer__kv">
|
||||
<div v-for="f in section.fields" :key="f.key" class="yk-drawer__kv-item">
|
||||
<dt>{{ f.label }}</dt>
|
||||
<dd v-if="f.render === 'image'" class="yk-drawer__img">
|
||||
<el-image
|
||||
:src="String(f.value)"
|
||||
:preview-src-list="[String(f.value)]"
|
||||
fit="cover"
|
||||
hide-on-click-modal
|
||||
/>
|
||||
</dd>
|
||||
<dd v-else-if="f.render === 'empty'" class="yk-drawer__empty">—</dd>
|
||||
<dd v-else>{{ f.text }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.yk-accounts__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.yk-accounts__sub {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.yk-accounts__filters {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.yk-accounts__pager {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.yk-accounts__hint {
|
||||
margin: 8px 2px 0;
|
||||
font-size: 12px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.yk-drawer__topmeta {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.yk-drawer__kv {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.yk-drawer__kv-item {
|
||||
display: grid;
|
||||
grid-template-columns: 110px 1fr;
|
||||
gap: 8px 12px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.yk-drawer__kv dt {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.yk-drawer__kv dd {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
word-break: break-all;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.yk-drawer__img :deep(.el-image) {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--el-border-color-light, #e4e7ed);
|
||||
}
|
||||
|
||||
.yk-drawer__empty {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
</style>
|
||||
@@ -24,7 +24,7 @@ import { buildAccountSections, formatBytes, readField } from '@/utils/accountFie
|
||||
* cellTimeText renders strings directly and only falls back to formatTime
|
||||
* for numeric epochs.
|
||||
*
|
||||
* Row click opens the all-fields drawer reused from AccountList.vue.
|
||||
* Row click opens the all-fields drawer (built via accountFields.ts).
|
||||
*/
|
||||
|
||||
type TabKey = Channel
|
||||
@@ -833,7 +833,7 @@ onMounted(() => {
|
||||
|
||||
<p class="yk-staff__hint">点击任意一行查看员工账号全部字段。</p>
|
||||
|
||||
<!-- All-fields drawer (reused from AccountList.vue / accountFields.ts) -->
|
||||
<!-- All-fields drawer (built via accountFields.ts) -->
|
||||
<el-drawer
|
||||
v-model="drawerOpen"
|
||||
:title="drawerAccount ? `员工详情 · ${drawerAccount.user_name ?? drawerAccount.nickname ?? drawerAccount.account_id}` : '员工详情'"
|
||||
|
||||
Reference in New Issue
Block a user