浅念
c56f13059d
用户反馈:微信群统计列表点查看聊天记录进入的页面带「好友列表/群列表」 侧栏不合适——云客该入口是专注的群详情聊天页(截图验证:无会话侧栏, 仅系统菜单+群名+工具栏+消息流)。 - ChatTimeline 增 bare 专注模式(?bare=1 隐藏会话侧栏);员工聊天窗口 入口(不带 bare)侧栏常驻——昨天 WA 侧栏修复的场景不受影响 - GroupList 微信 tab 操作列精简为单按钮「查看详情」(=查看聊天记录, 跳 bare 模式;导出HTML移除——聊天页头部本有导出),WA tab 不动 本地双路径验证:bare 无好友列表/有群聊标题;无 bare 侧栏在;列表点击 跳转 ?bare=1 正常。 Co-Authored-By: Claude Code <noreply@anthropic.com>
604 lines
20 KiB
Vue
604 lines
20 KiB
Vue
<script setup lang="ts">
|
|
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import { ArrowLeft } from '@element-plus/icons-vue'
|
|
import { getAccounts, getCustomers, getGroups, getMessages } from '@/api'
|
|
import { downloadBlob } from '@/api/client'
|
|
import type { Channel, Message } from '@/api/types'
|
|
import MessageBubble from '@/components/MessageBubble.vue'
|
|
import ChatSidebar from '@/components/ChatSidebar.vue'
|
|
import { channelLabel, formatTime, wechatTypeLabel } from '@/utils/format'
|
|
import { buildMessageSections } from '@/utils/messageFields'
|
|
|
|
/**
|
|
* Chat timeline. Reused for two conversation shapes:
|
|
* * 1:1 DM — `talkerId` set; messages filtered by `talker_id`.
|
|
* * Group — `roomId` set; messages filtered by `room_id`. Group messages
|
|
* carry per-member `sender_name` / `sender_head_url`, so each
|
|
* bubble identifies its sender (handled by MessageBubble).
|
|
* Exactly one of `talkerId` / `roomId` is normally present.
|
|
*/
|
|
const props = defineProps<{
|
|
channel: string
|
|
ownerId: string
|
|
talkerId?: string
|
|
roomId?: string
|
|
}>()
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const PAGE_SIZE = 50
|
|
|
|
const messages = ref<Message[]>([])
|
|
const loading = ref(false)
|
|
const loadingOlder = ref(false)
|
|
const errorMsg = ref<string | null>(null)
|
|
|
|
// Desc-keyset 流式加载(2026-09-07 深分页超时修复,与 staffchat/ChatMain 同款):
|
|
// 首屏 order=desc 取最新 PAGE_SIZE 条反转成 ASC 展示,「加载更多」带
|
|
// (before_ts, before_id) 游标向更旧翻——每页恒 O(PAGE_SIZE)。旧方案
|
|
// 「先拉 page1 拿 total 再拉 ASC 末页」在大对话上 OFFSET 数万行逐行回表,
|
|
// 群聊再叠加 filesort,串行撞 axios 15s 超时 → ECONNABORTED。
|
|
const total = ref(0)
|
|
|
|
// 请求序号防竞态:快速切换会话时,旧会话的请求仍在途、响应后到,若不拦截会把
|
|
// 新会话已渲染的 messages/total/标题 覆盖回旧会话数据(自愈但错乱)。
|
|
// 每次 loadInitial/loadTalkerName 自增取号,响应回来时号不对即整体丢弃。
|
|
let loadSeq = 0
|
|
let nameSeq = 0
|
|
|
|
const channelTyped = computed(() => props.channel as Channel)
|
|
|
|
/** True when this timeline is a group chat (drives the query + title). */
|
|
const isGroup = computed(() => !!props.roomId)
|
|
|
|
/**
|
|
* 专注模式(?bare=1):群统计等列表入口的「查看详情」——隐藏会话侧栏,
|
|
* 对齐云客群详情页(无好友/群列表,纯聊天记录窗)。员工聊天窗口入口
|
|
* (不带 bare)侧栏常驻(2026-09-09 修复保持)。
|
|
*/
|
|
const isBare = computed(() => route.query.bare === '1')
|
|
|
|
/** 当前会话类型(高亮 sidebar + 驱动空态)。账号级入口(无 talkerId/roomId)→ null。 */
|
|
const activeType = computed<'friend' | 'group' | null>(() =>
|
|
isGroup.value ? 'group' : props.talkerId ? 'friend' : null,
|
|
)
|
|
/** 当前会话 id(friend→talker_id, group→room_id)。账号级入口→ null。 */
|
|
const activeId = computed<string | null>(() => props.talkerId ?? props.roomId ?? null)
|
|
/** 是否已选定具体会话(决定是否拉消息 / 显示空态)。 */
|
|
const hasActive = computed(() => !!activeId.value)
|
|
|
|
/** 还有更旧历史未加载:已加载数 < 会话总数(总数以首屏响应为准,游标响应的 total 是剩余数)。 */
|
|
const hasMoreOlder = computed(() => messages.value.length < total.value)
|
|
|
|
/**
|
|
* 关键词过滤:仅作用于"当前已加载"的消息(/api/messages 无 q 参数,非全量历史)。
|
|
* keyword 为空 → 直接返回 messages.value。
|
|
*/
|
|
const visibleMessages = computed(() => {
|
|
const k = keyword.value.trim()
|
|
if (!k) return messages.value
|
|
return messages.value.filter((m) => (m.text ?? '').includes(k))
|
|
})
|
|
|
|
/** 当前会话对方的显示名（客户昵称或群名）— fetch 后替换标题中的原始 ID。 */
|
|
const talkerName = ref<string | null>(null)
|
|
|
|
async function loadTalkerName(): Promise<void> {
|
|
const seq = ++nameSeq
|
|
talkerName.value = null
|
|
if (!hasActive.value) return
|
|
try {
|
|
if (isGroup.value && props.roomId) {
|
|
// 群名(room_id 精确单行直查,不再拉整页群列表)
|
|
const res = await getGroups({ channel: channelTyped.value, room_id: props.roomId, page: 1, page_size: 1 })
|
|
if (seq !== nameSeq) return // 竞态:已有更新的请求,丢弃旧会话响应
|
|
talkerName.value = res.items[0]?.room_name || null
|
|
} else if (props.talkerId) {
|
|
// 客户昵称
|
|
const res = await getCustomers({
|
|
channel: channelTyped.value,
|
|
owner_account_id: props.ownerId,
|
|
friend_id: props.talkerId,
|
|
page: 1,
|
|
page_size: 1,
|
|
})
|
|
if (seq !== nameSeq) return // 竞态:已有更新的请求,丢弃旧会话响应
|
|
const c = res.items[0]
|
|
talkerName.value = c?.friend_nickname || c?.friend_remark || null
|
|
}
|
|
} catch {
|
|
// 静默降级：显示原始 ID
|
|
}
|
|
}
|
|
|
|
const conversationTitle = computed(() => {
|
|
const displayName = talkerName.value || (isGroup.value ? props.roomId : props.talkerId)
|
|
if (isGroup.value) {
|
|
return `群聊记录 · ${displayName}`
|
|
}
|
|
if (props.talkerId) {
|
|
return `与 ${displayName} 的聊天记录`
|
|
}
|
|
// 账号级入口(无具体会话):仅展示渠道级标题,避免出现 "与 undefined 的聊天记录"。
|
|
return '聊天记录'
|
|
})
|
|
|
|
function rangeFromQuery(): [Date, Date] | null {
|
|
const s = route.query.start,
|
|
e = route.query.end
|
|
const sv = Array.isArray(s) ? s[0] : s,
|
|
ev = Array.isArray(e) ? e[0] : e
|
|
if (sv && ev && /^\d+$/.test(String(sv)) && /^\d+$/.test(String(ev))) {
|
|
return [new Date(Number(sv)), new Date(Number(ev))]
|
|
}
|
|
return null
|
|
}
|
|
// 本地日期窗 ref:mount 时取 route.query(stat modal 带窗入口)否则**全部时间**——
|
|
// 默认近 2 周会把老对话过滤成空(实测 7-26 的对话在 08-22 打开显示「暂无聊天
|
|
// 记录」,2026-08-22);点「查看聊天记录」就该看到记录,要过滤再手动选时间。
|
|
const dateRange = ref<[Date, Date] | null>(rangeFromQuery())
|
|
const winStart = computed(() => dateRange.value?.[0].getTime())
|
|
const winEnd = computed(() => dateRange.value?.[1].getTime())
|
|
const keyword = ref('')
|
|
|
|
/** 归属账号昵称(账号表查,回退原始 id)。 */
|
|
const ownerNickname = ref<string | null>(null)
|
|
|
|
async function loadOwnerNickname(): Promise<void> {
|
|
ownerNickname.value = null
|
|
try {
|
|
const res = await getAccounts({ channel: channelTyped.value, page: 1, page_size: 100 })
|
|
const acc = res.items.find(a => a.account_id === props.ownerId)
|
|
ownerNickname.value = acc?.nickname || acc?.user_name || null
|
|
} catch {
|
|
ownerNickname.value = null
|
|
}
|
|
}
|
|
|
|
function onDateChange(): void {
|
|
loadInitial()
|
|
}
|
|
|
|
const subtitle = computed(() => {
|
|
const ownerLabel = ownerNickname.value
|
|
? `${ownerNickname.value}(${props.ownerId})`
|
|
: props.ownerId
|
|
let s =
|
|
`渠道：${channelLabel(channelTyped.value)} · 归属账号：${ownerLabel}` +
|
|
(total.value > 0 ? ` · 共 ${total.value} 条` : '')
|
|
s += winStart.value && winEnd.value
|
|
? ` · 时段：${formatTime(winStart.value)} ~ ${formatTime(winEnd.value)}`
|
|
: ' · 时段：全部时间'
|
|
return s
|
|
})
|
|
|
|
const streamRef = ref<HTMLElement | null>(null)
|
|
|
|
function scrollToBottom(): void {
|
|
nextTick(() => {
|
|
const el = streamRef.value
|
|
if (el) el.scrollTop = el.scrollHeight
|
|
})
|
|
}
|
|
|
|
/** Shared query params for both DM and group timelines (without pagination bits). */
|
|
function queryFor() {
|
|
return {
|
|
channel: channelTyped.value,
|
|
// 群聊不带 owner:chat_group 表按 room_id 去重、owner 被最后写入的员工
|
|
// 覆盖,与消息实际归属的 owner 错位会查空(实测 2026-08-22);room 全局
|
|
// 唯一且消息只在单一 owner 名下(多 owner 群=0),按 room 查即正确。
|
|
...(isGroup.value
|
|
? { room_id: props.roomId as string }
|
|
: { owner_account_id: props.ownerId, talker_id: props.talkerId as string }),
|
|
...(winStart.value != null && winEnd.value != null ? { start: winStart.value, end: winEnd.value } : {}),
|
|
page_size: PAGE_SIZE,
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fetch the newest slice on entry: `order=desc` page 1 returns the most recent
|
|
* PAGE_SIZE messages; we reverse it to ASC for display. One request replaces
|
|
* the old two-step dance (page 1 for `total` + deep-offset last page).
|
|
*/
|
|
async function loadInitial(): Promise<void> {
|
|
const seq = ++loadSeq
|
|
// 账号级入口(无具体会话):不拉消息,清空状态,留空态给右侧主区。
|
|
if (!hasActive.value) {
|
|
messages.value = []
|
|
total.value = 0
|
|
// 本分支已取最新序号,在途旧请求的 finally 会被拦下,须自行复位加载态
|
|
loading.value = false
|
|
return
|
|
}
|
|
loading.value = true
|
|
errorMsg.value = null
|
|
try {
|
|
const res = await getMessages({ ...queryFor(), order: 'desc', page: 1 })
|
|
if (seq !== loadSeq) return // 竞态:已有更新的加载,丢弃旧会话响应
|
|
total.value = res.total
|
|
// 后端 desc(新→旧);反转成时间线正序(旧→新)。
|
|
messages.value = [...res.items].reverse()
|
|
scrollToBottom()
|
|
} catch (e) {
|
|
if (seq !== loadSeq) return // 竞态:旧请求的报错不展示(会话已切换)
|
|
errorMsg.value = (e as Error).message
|
|
messages.value = []
|
|
} finally {
|
|
// 只有最新请求才能复位加载态:被取代的旧请求不得清掉新请求的 loading
|
|
if (seq === loadSeq) loading.value = false
|
|
}
|
|
}
|
|
|
|
/** Prepend the next older slice via keyset cursor. No-op when nothing older. */
|
|
async function loadOlder(): Promise<void> {
|
|
if (loadingOlder.value || !hasMoreOlder.value) return
|
|
const oldest = messages.value[0]
|
|
// 游标取最早一条已加载消息的 (timestamp, msg_id);timestamp 缺失无法定位
|
|
// (生产数据 0 行 NULL,防御性早退)。
|
|
if (!oldest || oldest.timestamp == null) return
|
|
loadingOlder.value = true
|
|
const prevHeight = streamRef.value?.scrollHeight ?? 0
|
|
try {
|
|
const res = await getMessages({
|
|
...queryFor(),
|
|
order: 'desc',
|
|
page: 1,
|
|
before_ts: oldest.timestamp,
|
|
before_id: oldest.msg_id,
|
|
})
|
|
// 后端 desc(新→旧);反转后正好衔接在现有列表之前。
|
|
messages.value = [...[...res.items].reverse(), ...messages.value]
|
|
// Keep the user's scroll anchored near where they were.
|
|
nextTick(() => {
|
|
const el = streamRef.value
|
|
if (el) el.scrollTop = el.scrollHeight - prevHeight
|
|
})
|
|
} catch (e) {
|
|
ElMessage.error(`加载更多失败：${(e as Error).message}`)
|
|
} finally {
|
|
loadingOlder.value = false
|
|
}
|
|
}
|
|
|
|
function goBack(): void {
|
|
// Prefer history back when there's somewhere to go; else the customer list.
|
|
if (window.history.length > 1) {
|
|
router.back()
|
|
} else {
|
|
router.push({ name: 'customers' })
|
|
}
|
|
}
|
|
|
|
/** 点击左侧会话 → 推到对应 DM/群路由(带具体会话 id)。 */
|
|
function onSelectSession(s: {
|
|
type: 'friend' | 'group'
|
|
talker_id?: string | null
|
|
room_id?: string | null
|
|
}): void {
|
|
if (s.type === 'group') {
|
|
router.push({
|
|
name: 'group-chat',
|
|
params: { channel: props.channel, ownerId: props.ownerId, roomId: s.room_id! },
|
|
})
|
|
} else {
|
|
router.push({
|
|
name: 'chat',
|
|
params: { channel: props.channel, ownerId: props.ownerId, talkerId: s.talker_id! },
|
|
})
|
|
}
|
|
}
|
|
|
|
/** 导出当前会话/时段聊天记录为自包含 HTML（后端渲染气泡 + 附件内联）。 */
|
|
async function exportCurrent(): Promise<void> {
|
|
if (!hasActive.value) return
|
|
try {
|
|
await downloadBlob('/export/chat-html', {
|
|
channel: channelTyped.value,
|
|
owner_account_id: props.ownerId,
|
|
talker_id: isGroup.value ? undefined : props.talkerId,
|
|
room_id: isGroup.value ? props.roomId : undefined,
|
|
start: winStart.value,
|
|
end: winEnd.value,
|
|
})
|
|
} catch (e) {
|
|
ElMessage.error(`导出失败：${(e as Error).message}`)
|
|
}
|
|
}
|
|
|
|
// All-fields drawer state for the message detail view.
|
|
const drawerOpen = ref(false)
|
|
const drawerMessage = ref<Message | null>(null)
|
|
|
|
function openDetail(m: Message): void {
|
|
drawerMessage.value = m
|
|
drawerOpen.value = true
|
|
}
|
|
|
|
const drawerSections = computed(() =>
|
|
drawerMessage.value ? buildMessageSections(drawerMessage.value) : [],
|
|
)
|
|
|
|
const drawerTitle = computed(() => {
|
|
const m = drawerMessage.value
|
|
if (!m) return '消息详情'
|
|
const when = m.timestamp ? formatTime(m.timestamp) : ''
|
|
return `消息详情${when ? ` · ${when}` : ''}`
|
|
})
|
|
|
|
// Reload when the route params change (navigating between conversations).
|
|
// dateRange 变化走 onDateChange,不在此 watcher 内。
|
|
watch(
|
|
() => [props.channel, props.ownerId, props.talkerId, props.roomId] as const,
|
|
() => {
|
|
loadInitial()
|
|
loadTalkerName()
|
|
loadOwnerNickname()
|
|
},
|
|
)
|
|
|
|
onMounted(() => {
|
|
loadInitial()
|
|
loadTalkerName()
|
|
loadOwnerNickname()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="yk-chat">
|
|
<div class="yk-chat__body">
|
|
<!-- 侧栏常驻(含群聊路由):好友/群列表随时可切,对齐云客聊天窗体验。
|
|
旧版 v-if="!isGroup" 在群路由下藏侧栏,点群后「好友列表/群列表」
|
|
消失(2026-09-09 用户报);onSelectSession 本就双类型导航。
|
|
bare 模式(群统计「查看详情」入口)例外——纯聊天记录窗无侧栏,
|
|
对齐云客群详情页(2026-09-10 用户反馈)。 -->
|
|
<ChatSidebar
|
|
v-if="!isBare"
|
|
:channel="channelTyped"
|
|
:owner-id="props.ownerId"
|
|
:active-type="activeType"
|
|
:active-id="activeId"
|
|
@select="onSelectSession"
|
|
/>
|
|
<div class="yk-chat__main">
|
|
<div class="yk-chat__header">
|
|
<div>
|
|
<div style="display: flex; align-items: center; gap: 8px">
|
|
<el-button text size="small" @click="goBack">
|
|
<el-icon><ArrowLeft /></el-icon>
|
|
返回
|
|
</el-button>
|
|
<h2 class="yk-chat__title">{{ conversationTitle }}</h2>
|
|
</div>
|
|
<div class="yk-chat__sub">{{ subtitle }}</div>
|
|
</div>
|
|
<div class="yk-chat__filters">
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
size="small"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
clearable
|
|
@change="onDateChange"
|
|
/>
|
|
<el-input
|
|
v-model="keyword"
|
|
size="small"
|
|
placeholder="搜索当前已加载消息"
|
|
clearable
|
|
style="width: 200px"
|
|
/>
|
|
<el-button v-if="hasActive" size="small" type="primary" plain @click="exportCurrent">导出</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<el-alert
|
|
v-if="errorMsg"
|
|
:title="`聊天记录加载失败：${errorMsg}`"
|
|
type="error"
|
|
show-icon
|
|
:closable="false"
|
|
style="margin-bottom: 0"
|
|
/>
|
|
|
|
<div v-if="!hasActive" class="yk-empty yk-chat__nopick">选择左侧会话查看消息</div>
|
|
<div v-else v-loading="loading" class="yk-chat__stream" ref="streamRef">
|
|
<div class="yk-chat__load">
|
|
<el-button
|
|
v-if="hasMoreOlder"
|
|
size="small"
|
|
plain
|
|
:loading="loadingOlder"
|
|
@click="loadOlder"
|
|
>
|
|
加载更多 / 上一页
|
|
</el-button>
|
|
<span v-else-if="!loading && messages.length > 0" class="yk-chat__end">
|
|
—— 已加载全部历史 ——
|
|
</span>
|
|
</div>
|
|
|
|
<template v-if="messages.length === 0 && !loading">
|
|
<div class="yk-empty">暂无聊天记录</div>
|
|
</template>
|
|
<template v-else-if="visibleMessages.length === 0 && keyword && !loading">
|
|
<div class="yk-empty">当前已加载消息中无匹配</div>
|
|
</template>
|
|
|
|
<MessageBubble
|
|
v-for="m in visibleMessages"
|
|
:key="m.msg_id"
|
|
:message="m"
|
|
@open-detail="openDetail"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- All-fields drawer for the clicked message -->
|
|
<el-drawer
|
|
v-model="drawerOpen"
|
|
:title="drawerTitle"
|
|
direction="rtl"
|
|
size="560px"
|
|
>
|
|
<template v-if="drawerMessage">
|
|
<div class="yk-drawer__topmeta">
|
|
<el-tag size="small" effect="plain">
|
|
{{ channelLabel(channelTyped) }}
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="drawerMessage.type || drawerMessage.type_raw != null"
|
|
size="small"
|
|
type="info"
|
|
effect="plain"
|
|
>
|
|
{{ drawerMessage.channel === 'wechat' ? wechatTypeLabel(drawerMessage.type_raw) : (drawerMessage.type || '消息') }}
|
|
<template v-if="drawerMessage.type_raw != null">
|
|
({{ drawerMessage.type_raw }})
|
|
</template>
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="drawerMessage.is_send != null"
|
|
size="small"
|
|
:type="drawerMessage.is_send ? 'success' : 'warning'"
|
|
effect="plain"
|
|
>
|
|
{{ drawerMessage.is_send ? '发出' : '接收' }}
|
|
</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-if="f.render === 'object'" class="yk-drawer__pre">
|
|
<pre>{{ f.text }}</pre>
|
|
</dd>
|
|
<dd v-else>{{ f.text }}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 双栏布局:左侧会话列表 + 右侧消息主区。高度预留 app header 之下。 */
|
|
.yk-chat__body {
|
|
display: flex;
|
|
height: calc(100vh - 120px);
|
|
min-height: 400px;
|
|
}
|
|
.yk-chat__main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
.yk-chat__nopick {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.yk-chat__filters {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Make the stream its own scroll region so scrollToBottom + load-older scroll
|
|
* anchoring target the right element. Height reserves space for the app
|
|
* header + chat header + main padding. */
|
|
.yk-chat__stream {
|
|
max-height: calc(100vh - var(--yk-header-height) - 140px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.yk-drawer__pre {
|
|
margin: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.yk-drawer__pre pre {
|
|
margin: 0;
|
|
padding: 8px;
|
|
background: var(--el-fill-color-light, #f5f7fa);
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: #303133;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
max-height: 240px;
|
|
overflow: auto;
|
|
}
|
|
</style>
|