renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新聊天视图样式和功能，增加首页任务选择API及数据展示

Browse Source
This commit is contained in:
rd
2025-09-12 15:18:46 +08:00
parent 12080f08be 82888584cf
commit 5c640adc57
14 changed files with 252 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/all/chat.ts
View File

@ -30,6 +30,11 @@ export const getConversationList = (params: {}) => {
return Http.get(`/v1/conversation/message/list`, params);
};
// 首页任务选择
export const getHotTask = () => {
return Http.get(`/v1/multi-agent/hot-task`);
};
export const getHeaders = () => {
const store = useEnterpriseStore();
return {

BIN
src/assets/img/agent/icon-fold.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 703 B

BIN
src/assets/img/agent/icon-unfold.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 706 B

4
src/components/xt-chat/chat-view/components/right-view/index.vue
View File

@ -76,7 +76,7 @@ export default {
};
const renderHeader = () => {
return (
<header class="header flex justify-end items-center mb-16px px-32px">
<header class="header flex justify-end items-center mb-16px px-16px">
{hasMediaCenter.value && (
<Button
type="primary"
@ -175,7 +175,7 @@ export default {
return null;
};
return (
<section class="flex-1 overflow-y-auto content flex justify-center px-32px">
<section class="flex-1 overflow-y-auto content flex justify-center px-16px">
<Bubble
ref={bubbleRef}
placement="start"

4
src/components/xt-chat/chat-view/components/sender-input/index.vue
View File

@ -84,7 +84,7 @@ export default {
});
return () => (
<div class="sender-input-wrap full h-120px">
<section class="sender-input-wrap full h-120px">
<Sender
v-model:value={localSearchValue.value}
ref={senderRef}
@ -94,7 +94,7 @@ export default {
placeholder={props.placeholder}
actions={() => renderActions()}
/>
</div>
</section>
);
},
};

13
src/components/xt-chat/chat-view/constants.ts
View File

@ -14,12 +14,12 @@ export interface UseChatHandlerReturn {
senderRef?: Ref<null>
}
export enum EnumTeamRunStatus {
TeamRunStarted = 'TeamRunStarted', // 对话开始
TeamRunStarted = 'TaskRunStarted', // 对话开始
TeamRunResponseContent = 'TeamRunResponseContent', // 对话执行中
TeamRunCompleted = 'TeamRunCompleted', // 对话完成
RunStarted = 'RunStarted', // l2开始运行
RunResponseContent = 'RunResponseContent', // l2执行中
RunCompleted = 'RunCompleted', // l2完成
TeamRunCompleted = 'TaskRunCompleted', // 对话完成
RunStarted = 'L2Started', // l2开始运行
RunResponseContent = 'L2RunContent', // l2执行中
RunCompleted = 'L2Completed', // l2完成
}
export interface UseChatHandlerOptions {
initSse: (inputInfo: CHAT.TInputInfo) => Promise<void>; // 明确 initSse 带参
@ -34,8 +34,7 @@ export const REMOTE_USER_ROLE = 'user'; // 接口返回用户
export const REMOTE_ASSISTANT_ROLE = 'assistant'; // 接口返回智能体
export const ROLE_STYLE = {
width: '600px',
margin: '0 auto',
width: 'var(--max-content-width)',
};
export const ANSWER_STYLE = {

6
src/components/xt-chat/chat-view/index.vue
View File

@ -149,8 +149,8 @@ export default {
});
return () => (
<div class="chat-view-wrap w-full h-full flex">
<section class="flex-1 flex flex-col pt-20px justify-center relative pl-16px pr-2px">
<div class={`chat-view-wrap w-full h-full flex ${showRightView.value ? 'show-right-view' : ''}`}>
<section class="flex-1 flex flex-col pt-20px justify-center relative bubble-wrap">
<div class="flex-1 overflow-hidden pb-20px">
<BubbleList
ref={bubbleListRef}
@ -165,7 +165,7 @@ export default {
<SenderInput
v-model={searchValue.value}
ref={senderRef}
class="w-600px"
style={{ 'width': 'var(--max-content-width)' }}
placeholder="继续追问..."
loading={generateLoading.value}
onSubmit={handleSubmit}

30
src/components/xt-chat/chat-view/style.scss
View File

@ -1,4 +1,8 @@
$bubble-wrap-padding-left: 16px;
$bubble-wrap-padding-right: 2px;
.chat-view-wrap {
--max-content-width: 900px;
--max-question-width: 500px;
.cts {
color: var(--Text-1, #737478);
font-size: 14px;
@ -6,7 +10,14 @@
font-weight: 400;
line-height: 22px;
}
:deep(.xt-bubble) {
.bubble-wrap {
padding-left: $bubble-wrap-padding-left;
padding-right: $bubble-wrap-padding-right;
}
:deep(.xt-bubble-list) {
align-items: center;
padding-right: $bubble-wrap-padding-left - $bubble-wrap-padding-right;
.xt-bubble {
.file-card {
border-radius: 12px;
border: 1px solid var(--Border-2, #e6e6e8);
@ -17,4 +28,21 @@
align-items: center;
}
}
}
&.show-right-view {
--max-content-width: 596px;
--max-question-width: 396px;
}
:deep(.intelligent-thinking-wrap) {
width: var(--max-content-width);
border-radius: 12px;
border: 1px solid var(--Brand-2, #c5b7ff);
background: var(--BG-White, #fff);
overflow: hidden;
.intelligent-thinking-header {
background: linear-gradient(180deg, #f3f2fd 0%, #fff 100%);
padding: 11px 16px;
}
}
}

256
src/components/xt-chat/chat-view/useChatHandler.tsx
View File

@ -18,6 +18,8 @@ import { genRandomId, exactFormatTime } from '@/utils/tools';
import icon1 from '@/assets/img/agent/icon-end.png';
import icon2 from '@/assets/img/agent/icon-loading.png';
import icon3 from '@/assets/img/agent/icon-unfold.png';
import icon4 from '@/assets/img/agent/icon-fold.png';
import { useClipboard } from '@vueuse/core';
import {
@ -64,7 +66,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
[LOADING_ROLE]: {
placement: 'start',
variant: 'borderless',
style: { ...ROLE_STYLE, paddingLeft: '20px' },
style: ROLE_STYLE,
},
[INTELLECTUAL_THINKING_ROLE]: {
placement: 'start',
@ -76,9 +78,6 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
placement: 'start',
variant: 'borderless',
typing: { step: 2, interval: 100 },
// onTypingComplete: () => {
// generateTeamRunTaskId.value = null;
// },
style: ROLE_STYLE,
},
[QUESTION_ROLE]: {
@ -86,9 +85,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
shape: 'round',
style: ROLE_STYLE,
messageRender: (message: string) => {
return <div class="max-w-400px">
{message}
</div>;
return <div style={{ 'max-width': 'var(--max-question-width)' }}>{message}</div>;
},
},
[REMOTE_USER_ROLE]: {
@ -96,9 +93,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
shape: 'round',
style: ROLE_STYLE,
messageRender: (message: string) => {
return <div class="max-w-400px">
{message}
</div>;
return <div style={{ 'max-width': 'var(--max-question-width)' }}>{message}</div>;
},
},
[REMOTE_ASSISTANT_ROLE]: {
@ -106,19 +101,21 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
variant: 'borderless',
style: ROLE_STYLE,
messageRender: (message: string) => {
return <div class="max-w-400px markdown-wrap" v-html={md.render(message)} />;
return (
<div class="markdown-wrap" style={{ 'max-width': 'var(--max-content-width)' }} v-html={md.render(message)} />
);
},
footer: (params) => {
const { content, item } = params as { content: string; item: MESSAGE.Answer };
const isShow = conversationList.value[conversationList.value.length - 1].run_id === item.run_id;
const isLastRunTask = conversationList.value[conversationList.value.length - 1].run_id === item.run_id;
return (
<div class="flex items-center">
<Tooltip title="复制" onClick={() => onCopy(content)} align={{ offset: [0, 4] }} >
<Tooltip title="复制" onClick={() => onCopy(content)} align={{ offset: [0, 4] }}>
<div class="action-box">
<IconCopy size={16} class="color-#737478" />
</div>
</Tooltip>
{isShow && (
{isLastRunTask && (
<Tooltip title="重新生成" onClick={() => handleRemoteRefresh(item)} align={{ offset: [0, 4] }}>
<div class="action-box ml-12px">
<IconRefresh size={16} class="color-#737478 " />
@ -159,145 +156,137 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
initSse({ message });
};
const onRefresh = (run_id: string) => {
const onRefresh = (teamRunTaskId: string) => {
generateLoading.value = true;
const targetIndex = conversationList.value.findIndex((v) => v.teamRunTaskId === run_id);
conversationList.value = conversationList.value.filter((item) => item.teamRunTaskId !== run_id);
const targetIndex = conversationList.value.findIndex((v) => v.teamRunTaskId === teamRunTaskId);
conversationList.value = conversationList.value.filter((item) => item.teamRunTaskId !== teamRunTaskId);
const message = conversationList.value[targetIndex - 1]?.content;
initSse({ message });
};
const getAllRunTask = (teamRunTaskId: string) => {
return conversationList.value.filter(
(item) => item.role === ANSWER_ROLE && item.teamRunTaskId === teamRunTaskId && !item.isTeamRunTask,
);
};
const getRunTask = (run_id: string) => {
return conversationList.value.find((item) => item.run_id === run_id && !item.isTeamRunTask);
const getAllTeamRunTask = (teamRunTaskId: string) => {
return conversationList.value.filter((item) => item.role === ANSWER_ROLE && item.teamRunTaskId === teamRunTaskId);
};
// 设置当前对话所有思考过程任务展开收起状态
const setRunTaskCollapse = (teamRunTaskId: string, isCollapse: boolean) => {
getAllRunTask(teamRunTaskId).forEach((item) => {
item.content.isCollapse = isCollapse;
const setRunTaskCollapse = (teamRunTaskId: string, isExpand: boolean) => {
getAllTeamRunTask(teamRunTaskId).forEach((item) => {
item.content.isExpand = isExpand;
});
};
// 获取同一个对话下的最后一个run_task
const getLastRunTask = (teamRunTaskId: string) => {
const allRunTask = getAllRunTask(teamRunTaskId);
return allRunTask[allRunTask.length - 1] ?? {};
};
const getFirstRunTask = (teamRunTaskId: string) => {
const allRunTask = getAllRunTask(teamRunTaskId);
return allRunTask[0] ?? {};
};
// 判断当前对话是否含有过程任务
const hasRunTask = (teamRunTaskId: string) => {
return conversationList.value.some((item) => item.teamRunTaskId === teamRunTaskId && !item.isTeamRunTask);
};
const getTeamRunTask = (teamRunTaskId: string) => {
return conversationList.value.find((item) => item.teamRunTaskId === teamRunTaskId);
};
const isLastRunTask = (data: MESSAGE.Answer): boolean => {
const { teamRunTaskId, run_id } = data;
return getLastRunTask(teamRunTaskId).run_id === run_id;
};
const isFirstRunTask = (data: MESSAGE.Answer): boolean => {
const { teamRunTaskId, run_id } = data;
return getFirstRunTask(teamRunTaskId).run_id === run_id;
};
// 过程节点开始
const handleRunTaskStart = (data: MESSAGE.Answer) => {
const { run_id } = data;
// generateTeamRunTaskId.value = run_id;
conversationList.value.push({
run_id,
key: run_id,
teamRunTaskId: generateTeamRunTaskId.value,
content: { ...data, runStatus: EnumTeamRunStatus.RunStarted, teamRunTaskId: generateTeamRunTaskId.value },
output: data.output,
role: ANSWER_ROLE,
messageRender: (data: MESSAGE.Answer) => {
const { node, output, runStatus, isCollapse = true, customRender, teamRunTaskId } = data;
const _intelligentThinkingData = getTeamRunTask(generateTeamRunTaskId.value)?.content?.intelligentThinkingData;
const _target = _intelligentThinkingData?.find((item: MESSAGE.Answer) => item.run_id === run_id);
if (!_target) {
_intelligentThinkingData?.push(data);
}
};
// 过程节点更新
const handleRunTaskUpdate = (data: MESSAGE.Answer) => {
const { run_id, output } = data;
const _intelligentThinkingData = getTeamRunTask(generateTeamRunTaskId.value)?.content?.intelligentThinkingData;
const _target = _intelligentThinkingData?.find((item: MESSAGE.Answer) => item.run_id === run_id);
if (_target) {
_target.runStatus = EnumTeamRunStatus.RunResponseContent;
_target.output += output;
}
};
// 过程节点结束
const handleRunTaskEnd = (data: MESSAGE.Answer) => {
const { run_id, output } = data;
const _intelligentThinkingData = getTeamRunTask(generateTeamRunTaskId.value)?.content?.intelligentThinkingData;
const _target = _intelligentThinkingData?.find((item: MESSAGE.Answer) => item.run_id === run_id);
if (_target) {
_target.runStatus = EnumTeamRunStatus.RunCompleted;
_target.output += output;
}
};
const renderThoughtChain = (data: MESSAGE.Answer, index: number, messageData: MESSAGE.Answer) => {
const { node, output, runStatus } = data;
const isRulCompleted = runStatus === EnumTeamRunStatus.RunCompleted;
let outputEleClass: string = `thought-chain-output border-l-#E6E6E8 border-l-1px pl-12px relative left-8px mb-4px markdown-wrap`;
!isLastRunTask(data) && (outputEleClass += ' hasLine pb-12px pt-4px');
index === messageData.intelligentThinkingData.length - 1 && (outputEleClass += ' hasLine pb-12px pt-4px');
return (
<>
{isFirstRunTask(data) && (
<div
class="flex items-center mb-8px cursor-pointer"
onClick={() => setRunTaskCollapse(teamRunTaskId, !isCollapse)}
>
<span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
{isCollapse ? (
<IconCaretUp size={12} class="color-#211F24 " />
) : (
<IconCaretDown size={12} class="color-#211F24" />
)}
</div>
)}
<div class="relative thought-chain-item" style={{ display: isCollapse ? 'block' : 'none' }}>
<div class="relative thought-chain-item">
<div class="flex items-center mb-4px">
<img src={isRulCompleted ? icon1 : icon2} width={16} height={16} class="mr-4px" />
<div class="color-#211F24 !lh-20px">{node}</div>
</div>
<div v-html={md.render(output)} class={outputEleClass} />
</div>
);
};
// 任务开始
const handleTeamRunTaskStart = (data: MESSAGE.Answer) => {
const { run_id: teamRunTaskId, output } = data;
generateTeamRunTaskId.value = teamRunTaskId;
conversationList.value.push({
teamRunTaskId,
key: teamRunTaskId,
output,
role: ANSWER_ROLE,
content: {
...data,
teamRunStatus: EnumTeamRunStatus.TeamRunStarted,
teamRunTaskId,
intelligentThinkingData: [], // 智能思考过程数据
isExpand: true, // 是否展开思考过程
},
messageRender: (messageData: MESSAGE.Answer) => {
const { output, isExpand, teamRunTaskId, intelligentThinkingData, customRender, teamRunStatus } = messageData;
const isEnd = teamRunStatus === EnumTeamRunStatus.TeamRunCompleted;
const hasIntelligentThinking = intelligentThinkingData.length > 0;
return (
<>
<section
class={`intelligent-thinking-wrap mb-8px flex-col ${
hasIntelligentThinking && !isEnd ? 'max-h-160px overflow-hidden' : ''
}`}
style={{ display: hasIntelligentThinking ? 'flex' : 'none' }}
>
<div class="intelligent-thinking-header flex justify-between">
<span class="cts font-family-regular color-#8A70FE">深度思考中</span>
<img
src={isExpand ? icon4 : icon3}
class="cursor-pointer"
width={24}
height={24}
onClick={() => setRunTaskCollapse(teamRunTaskId, !isExpand)}
/>
</div>
<div
class="intelligent-thinking-content px-16px flex-1 overflow-y-auto"
style={{ display: isExpand ? 'block' : 'none' }}
>
{intelligentThinkingData.map((item: MESSAGE.Answer, index: number) =>
renderThoughtChain(item, index, messageData),
)}
</div>
</section>
<div v-html={md.render(output ?? '')} class="markdown-wrap" />
{customRender?.()}
</>
);
},
});
};
// 过程节点更新
const handleRunTaskUpdate = (data: MESSAGE.Answer) => {
const { run_id, output } = data;
const existingItem = conversationList.value.find((item) => item.run_id === run_id);
if (existingItem && output) {
existingItem.content.output += output;
existingItem.content.runStatus = EnumTeamRunStatus.RunResponseContent;
}
};
// 过程节点结束
const handleRunTaskEnd = (data: MESSAGE.Answer) => {
const { output } = data;
const existingItem = getRunTask(data.run_id);
if (existingItem) {
existingItem.content.output += output;
existingItem.content.runStatus = EnumTeamRunStatus.RunCompleted;
}
};
// 任务开始
const handleTeamRunTaskStart = (data: MESSAGE.Answer) => {
const { run_id } = data;
generateTeamRunTaskId.value = run_id;
conversationList.value.push({
run_id,
isTeamRunTask: true,
teamRunTaskId: generateTeamRunTaskId.value,
key: run_id,
content: { ...data, teamRunStatus: EnumTeamRunStatus.TeamRunStarted, teamRunTaskId: run_id },
output: data.output,
role: ANSWER_ROLE,
messageRender: (data: MESSAGE.Answer) => {
return <div v-html={md.render(data.output ?? '')} class="markdown-wrap" />;
},
});
};
// 任务更新
const handleTeamRunTaskUpdate = (data: MESSAGE.Answer) => {
const { run_id, output } = data;
const existingItem = conversationList.value.find((item) => item.run_id === run_id);
if (existingItem && output) {
const { run_id: teamRunTaskId, output } = data;
const existingItem = conversationList.value.find((item) => item.teamRunTaskId === teamRunTaskId);
if (existingItem) {
existingItem.content.output += output;
existingItem.content.teamRunStatus = EnumTeamRunStatus.TeamRunResponseContent;
}
@ -307,28 +296,25 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
resetGenerateStatus();
const { run_id: teamRunTaskId, extra_data, output } = data;
const existingItem = conversationList.value.find((item) => item.teamRunTaskId === teamRunTaskId);
if (existingItem) {
existingItem.content.extra_data = extra_data;
existingItem.content.output += output;
existingItem.content.teamRunStatus = EnumTeamRunStatus.TeamRunCompleted;
const _hasRunTask = hasRunTask(teamRunTaskId);
const _targetTask = _hasRunTask ? getLastRunTask(teamRunTaskId) : getTeamRunTask(teamRunTaskId);
if (isEmpty(_targetTask)) {
return;
}
// 含有思考过程，折叠思考过程，展示结果
const _hasRunTask = existingItem.content.intelligentThinkingData.length > 0;
if (_hasRunTask) {
setRunTaskCollapse(teamRunTaskId, false);
const _targetData = extra_data?.data?.find((item: any) => item.task_type === '任务管理')
const _targetData = extra_data?.data?.find((item: any) => item.task_type === '任务管理');
if (_targetData) {
showRightView.value = true;
rightViewDataSource.value = extra_data.data;
rightPreviewData.value = _targetData;
}
_targetTask.content.customRender = () => {
existingItem.content.customRender = () => {
return (
<>
<div v-html={md.render(output)} class="markdown-wrap" />
{_targetData && (
<div class="file-card mt-10px">
<IconFile class="w-24px h-24px mr-16px color-#6D4CFE" />
@ -345,14 +331,11 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
)}
</>
);
};
}
} else {
_targetTask.content.teamRunStatus = EnumTeamRunStatus.TeamRunCompleted;
}
_targetTask.footer = () => {
const isShow = conversationList.value[conversationList.value.length - 1].teamRunTaskId === teamRunTaskId;
existingItem.footer = () => {
const isLastRunTask = conversationList.value[conversationList.value.length - 1].teamRunTaskId === teamRunTaskId;
return (
<div class="flex items-center">
{!extra_data && (
@ -363,13 +346,13 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
// </div>
// </Tooltip>
// ) :
<Tooltip title="复制" onClick={() => onCopy(_targetTask.content.output)} align={{ offset: [0, 4] }}>
<Tooltip title="复制" onClick={() => onCopy(existingItem.content.output)} align={{ offset: [0, 4] }}>
<div class="action-box">
<IconCopy size={16} class="color-#737478" />
</div>
</Tooltip>
)}
{isShow && (
{isLastRunTask && (
<Tooltip title="重新生成" onClick={() => onRefresh(teamRunTaskId)} align={{ offset: [0, 4] }}>
<div class="action-box ml-12px">
<IconRefresh size={16} class="color-#737478 " />
@ -379,6 +362,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
</div>
);
};
}
};
// 消息处理主函数
@ -418,6 +402,6 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
conversationList,
showRightView,
rightViewDataSource,
rightPreviewData
rightPreviewData,
};
}

22
src/views/home/components/created/index.vue
View File

@ -3,6 +3,7 @@ import { message } from 'ant-design-vue';
import ExpandableTags from '@/components/expandable-tags/index.vue';
import SenderInput from '../sender-input/index.vue';
import { getHotTask } from '@/api/all/chat';
import { useChatStore } from '@/stores/modules/chat';
export default {
@ -10,6 +11,7 @@ export default {
const senderRef = ref(null);
const searchValue = ref('');
const chatStore = useChatStore();
const tagList = ref([]);
const handleSubmit = () => {
handleSearch();
@ -20,21 +22,19 @@ export default {
chatStore.onCreateSession();
};
const tagList = [
'汇总账号昨天的运营情况',
'查账号本月点赞量 Top3 的笔记详情',
'统计投流账户上周的消耗金额 + 点击率',
'把昨天漏采数据的账号重新抓取一次数据',
'规划账号未来 2 周的内容发布排期和选题',
'根据账号的已有选题生成具体内容稿件',
'根据热点生成账号的选题及内容',
];
const handleTagClick = (tag: string) => {
searchValue.value = tag;
senderRef.value?.focus();
};
onMounted(() => {
getHotTask().then((res) => {
const { data, code } = res;
if (code === 200) {
tagList.value = data?.list?.map((v) => v.title) ?? [];
}
});
});
return () => (
<div class="create-conversation-wrap w-full h-full flex justify-center">
@ -47,7 +47,7 @@ export default {
<p class="cts text-center mb-104px">AI 辅助账号托管账号 ｜ 自动生成爆款内容 ｜ 定时任务发布</p>
<SenderInput ref={senderRef} v-model={searchValue.value} onSubmit={handleSubmit} class="mb-24px" />
<p class="cts mb-6px">可以试试这样下发任务：</p>
<ExpandableTags tags={tagList} clickable onTagClick={handleTagClick} />
<ExpandableTags tags={tagList.value} clickable onTagClick={handleTagClick} />
</div>
</div>
);

2
src/views/home/components/history-conversation-drawer/index.vue
View File

@ -94,7 +94,7 @@ export default {
});
return () => (
<Drawer width={240} rootClassName="ct-history-conversation-drawer" v-model:open={open.value} onClose={onClose}>
<Drawer width={320} rootClassName="ct-history-conversation-drawer" v-model:open={open.value} onClose={onClose}>
<header class="header h-40px px-12px flex justify-between items-center">
<span class="text-12px font-400 color-#211F24 font-family-medium">历史对话</span>
<icon-close size={16} class="color-#211F24 cursor-pointer" onClick={onClose} />

4
src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
View File

@ -95,8 +95,8 @@
class="rounded-4px"
/>
</template>
<template v-else-if="field.dataIndex === 'last_synced_at'">
{{ exactFormatTime(detailData.last_synced_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss') }}
<template v-else-if="['last_authorized_at', 'last_synced_at'].includes(field.dataIndex)">
{{ exactFormatTime(detailData[field.dataIndex], 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss') }}
</template>
<!-- 环比字段特殊渲染 -->
<template v-else-if="field.isRateField">

11
src/views/property-marketing/media-account/account-detail/constants.ts
View File

@ -18,7 +18,7 @@ export function groupFieldsWithColSpan<
dataIndex: `${getPropPrefix(dateType)}${item.dataIndex}`,
prop: `${getPropPrefix(dateType)}${item.prop}`,
title: `${labelPrefix}${item.title}`,
tooltip: `${labelPrefix}${item.tooltip}`
tooltip: `${labelPrefix}${item.tooltip}`,
};
}
});
@ -28,6 +28,7 @@ export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
const baseFields = [
{ title: '账号名称', dataIndex: 'name', notDifferentiateDateType: true },
{ title: '数据更新时间', dataIndex: 'last_synced_at', notDifferentiateDateType: true },
{ title: '最后授权时间', dataIndex: 'last_authorized_at', notDifferentiateDateType: true },
{ title: '平台', dataIndex: 'platform', notDifferentiateDateType: true },
{ title: '状态', dataIndex: 'status', type: 'status', notDifferentiateDateType: true },
{ title: '账号ID', dataIndex: 'account_id', notDifferentiateDateType: true },
@ -36,7 +37,6 @@ export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
{ title: '所属项目', dataIndex: 'group.name', notDifferentiateDateType: true },
{ title: '分组', dataIndex: 'group.name', notDifferentiateDateType: true },
{ title: '标签', dataIndex: 'tags', notDifferentiateDateType: true },
{ title: 'AI评价', dataIndex: 'ai_evaluation', notDifferentiateDateType: true },
{ title: '粉丝量', dataIndex: 'fans_number', tooltip: '账号的当前粉丝总数。', notDifferentiateDateType: true },
{
title: '总赞藏数',
@ -45,6 +45,11 @@ export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
tooltip: '账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。',
},
];
const allFields = showMore ? [...baseFields, ...CUSTOM_FIELDS] : baseFields.slice(0,8);
const customFieldsWithAiEvaluation = [
CUSTOM_FIELDS[0],
{ title: 'AI评价', dataIndex: 'ai_evaluation', notDifferentiateDateType: true },
...CUSTOM_FIELDS.slice(1),
];
const allFields = showMore ? [...baseFields, ...customFieldsWithAiEvaluation] : baseFields.slice(0, 8);
return groupFieldsWithColSpan(allFields, dateType);
};

4
src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
View File

@ -27,6 +27,10 @@
<span class="label">数据更新时间</span>
<span class="cts num">{{ getLastSyncedAt(item) }}</span>
</div>
<div class="field-row">
<span class="label">最后授权时间</span>
<span class="cts num">{{ formatTime(item.last_authorized_at) }}</span>
</div>
<div class="field-row">
<span class="label">平台</span>
<img :src="item.platform === 0 ? icon1 : icon2" width="16" height="16" />