Skip to content

M
mengchangaigc
Commit 9c61bde6 authored by 黄同智's avatar 黄同智
Browse files
Options

消息中心的列表页面，更新记录的列表页面

parent aa387a20
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 644 additions and 66 deletions
apps/web-vue/src/router/index.ts
View file @ 9c61bde6
......@@ -26,6 +26,18 @@ const routes = [
name: 'Home',
component: Home,
meta: { title: '首页', icon: 'House', affix: true }
},
{
path: 'home/update-log',
name: 'HomeUpdateLog',
component: () => import('@/views/home/update-log.vue'),
meta: { title: '更新日志', hidden: true }
},
{
path: 'home/messages',
name: 'HomeMessages',
component: () => import('@/views/home/messages.vue'),
meta: { title: '消息中心', hidden: true }
}
]
},
......
apps/web-vue/src/views/home/components/section3.vue
View file @ 9c61bde6
......@@ -8,7 +8,7 @@
<p class="fs-14 color-666">支持成片、素材、脚本、图片与音频分类检索</p>
</div>
</div>
<div class="flex-items-center color-888 pointer">
<div class="flex-items-center color-888 pointer" @click="gotoMessages">
<svg t="1786427654955" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="6217" width="16" height="16">
<path
......@@ -57,6 +57,9 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const tabIndex = ref(1)
const buttonList = [
{ label: '创作', value: 1, num: 6 },
......@@ -67,6 +70,10 @@ const buttonList = [
{ label: '导出', value: 6, num: 0 },
]
const list = ref([1, 2, 3])
const gotoMessages = ()=>{
router.push('/home/messages')
}
</script>
<style lang="scss" scoped>
......@@ -97,4 +104,4 @@ const list = ref([1, 2, 3])
.bg-hh {
background: #f4f6f7;
}
</style>
\ No newline at end of file
</style>
apps/web-vue/src/views/home/components/section5.vue
View file @ 9c61bde6
......@@ -5,10 +5,10 @@
<div class="w-40 h-40 bg-main round-6 mr-10 update-icon"></div>
<div class="section2-head">
<div class="fs-16 fw-700 color-000">更新记录</div>
<p class="fs-14 color-666">算法迭代与功能发布日志（点击小卡片查看完整详情）</p>
<p class="fs-14 color-666">算法迭代与功能发布日志</p>
</div>
</div>
<div class="flex-items-center color-888 pointer">
<div class="flex-items-center color-888 pointer" @click="goUpdateLog">
<svg t="1786427654955" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="6217" width="16" height="16">
<path
......@@ -76,68 +76,17 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { updateRecords, type UpdateRecord } from '../updateRecords';
type UpdateRecord = {
version: string;
type: string;
date: string;
title: string;
desc: string;
details: string[];
};
const router = useRouter();
const detailVisible = ref(false);
const currentDetail = ref<UpdateRecord>();
const list = ref<UpdateRecord[]>([
{
version: 'v2.8.0',
type: '新功能',
date: '2026-07-18',
title: 'AI 数字人主播情感音色与多方言能力上线',
desc: '数字人分身支持粤语、四川话、东北话等多方言口播，以及带货高亢、情绪安利等多种音色风格切换。',
details: [
'20 位高清超模数字人分身库全量上线',
'口型匹配误差降低至 < 0.1 秒，唇形与语音高度同步',
'支持自定义智能文案脚本与实时语速微调',
],
},
{
version: 'v2.7.4',
type: '算法升级',
date: '2026-06-30',
title: '商品卖点识别与脚本生成能力升级',
desc: '新增商品标题、详情页与评价内容的联合理解，帮助运营更快生成适合直播和短视频的脚本。',
details: [
'支持自动提取核心卖点、使用场景和人群痛点',
'新增口播、测评、剧情三类脚本生成模板',
'脚本结果可直接进入任务发布流程',
],
},
{
version: 'v2.7.0',
type: '体验优化',
date: '2026-06-12',
title: '素材上传与智能渲染流程优化',
desc: '上传成功后可自动进入创作工作台，减少重复选择素材与配置参数的操作。',
details: [
'支持批量上传后自动分组',
'新增渲染进度实时反馈',
'优化失败任务重试与错误提示',
],
},
{
version: 'v2.6.8',
type: '数据更新',
date: '2026-05-28',
title: '投放数据看板新增多平台汇总',
desc: '看板新增多广告平台核心指标统一汇总，便于团队按账号、素材和时间维度对比投放效果。',
details: [
'新增巨量广告、千川、腾讯 ADQ 数据汇总',
'支持按团队、分组、个人维度筛选',
'新增素材消耗与转化趋势对比',
],
},
]);
const list = ref<UpdateRecord[]>(updateRecords.slice(0, 4));
const goUpdateLog = () => {
router.push('/home/update-log');
};
const lookDetail = (record: UpdateRecord) => {
currentDetail.value = record;
......@@ -204,4 +153,4 @@ const lookDetail = (record: UpdateRecord) => {
.color-334 {
color: #334155;
}
</style>
\ No newline at end of file
</style>
apps/web-vue/src/views/home/messageRecords.ts 0 → 100644
View file @ 9c61bde6
export type MessageCategoryCode = 'all' | 'approval' | 'task' | 'content' | 'live' | 'system';
export type MessageIconName = 'Bell' | 'DocumentChecked' | 'List' | 'Upload' | 'VideoCamera' | 'Lock';
export type MessageCategory = {
code: MessageCategoryCode;
name: string;
icon: MessageIconName;
total: number;
unread: number;
color: string;
bgColor: string;
summary: string;
};
export type MessageTag = {
label: string;
tone: 'warning' | 'primary' | 'success' | 'danger' | 'info';
};
export type MessageRecord = {
id: string;
category: Exclude<MessageCategoryCode, 'all'>;
type: string;
title: string;
content: string;
meta: string[];
tags: MessageTag[];
date: string;
time: string;
state: string;
stateTone: 'pending' | 'doing' | 'done' | 'failed' | 'available' | 'expired';
unread: boolean;
};
export const messageCategories: MessageCategory[] = [
{
code: 'all',
name: '全部消息',
icon: 'Bell',
total: 22,
unread: 16,
color: '#8a22ff',
bgColor: '#f6ecff',
summary: '共 22 条',
},
{
code: 'approval',
name: '审批待办',
icon: 'DocumentChecked',
total: 1,
unread: 1,
color: '#e96500',
bgColor: '#fff7df',
summary: '1 条 · 需要你处理的积分...',
},
{
code: 'task',
name: '任务协作',
icon: 'List',
total: 6,
unread: 5,
color: '#236cff',
bgColor: '#edf5ff',
summary: '6 条 · 发布人与执行人的...',
},
{
code: 'content',
name: '内容资源',
icon: 'Upload',
total: 5,
unread: 4,
color: '#00a874',
bgColor: '#eafff6',
summary: '5 条 · 上传、生成、状态...',
},
{
code: 'live',
name: '直播',
icon: 'VideoCamera',
total: 4,
unread: 3,
color: '#f21f67',
bgColor: '#fff0f3',
summary: '4 条 · 直播间场次与排班...',
},
{
code: 'system',
name: '安全与系统',
icon: 'Lock',
total: 6,
unread: 3,
color: '#4b627f',
bgColor: '#f0f4f8',
summary: '6 条 · 账号安全、系统与...',
},
];
export const messageRecords: MessageRecord[] = [
{
id: 'CA-20260819-001',
category: 'approval',
type: '积分申请',
title: '梁靖淇申请 500 积分，等待你的审批',
content: '申请人【梁靖淇】发起【500 积分】算力补给申请，请审批。关联项目：千川服装爆款视频批量生成。',
meta: ['梁靖淇 → 徐振', 'CA-20260819-001'],
tags: [
{ label: '请关注', tone: 'warning' },
{ label: '积分申请', tone: 'info' },
],
date: '2026-08-19',
time: '10:15',
state: '待审批',
stateTone: 'pending',
unread: true,
},
{
id: 'TASK-20260819-018',
category: 'task',
type: '新任务',
title: '王经理向你指派了新任务',
content: '任务《七夕美妆礼盒短视频》需要产出 3 条成片，请在 8 月 22 日前完成。',
meta: ['王经理（发布人） → 徐振（执行人）', 'TASK-20260819-018'],
tags: [
{ label: '通知', tone: 'primary' },
{ label: '新任务', tone: 'info' },
],
date: '2026-08-19',
time: '09:42',
state: '待完成',
stateTone: 'pending',
unread: true,
},
{
id: 'TASK-20260819-018-DATE',
category: 'task',
type: '任务延期',
title: '任务出片日期由 8 月 22 日调整为 8 月 21 日',
content: '王经理修改了《七夕美妆礼盒短视频》的出片日期，请重新安排制作计划。',
meta: ['王经理（发布人） → 徐振（执行人）', 'TASK-20260819-018'],
tags: [
{ label: '请关注', tone: 'warning' },
{ label: '任务延期', tone: 'info' },
],
date: '2026-08-19',
time: '09:18',
state: '制作中',
stateTone: 'doing',
unread: true,
},
{
id: 'TASK-20260819-018-REL',
category: 'task',
type: '关联作品',
title: '徐振为任务关联了 2 条新成片',
content: '任务《七夕美妆礼盒短视频》当前已关联 2/3 条所需作品。',
meta: ['徐振（执行人） → 王经理（发布人）', 'TASK-20260819-018'],
tags: [
{ label: '已完成', tone: 'success' },
{ label: '关联作品', tone: 'info' },
],
date: '2026-08-19',
time: '08:56',
state: '2/3 条已完成',
stateTone: 'doing',
unread: true,
},
{
id: 'TASK-20260819-018-SCRIPT',
category: 'task',
type: '关联脚本',
title: '徐振为任务关联了脚本',
content: '任务《七夕美妆礼盒短视频》已关联脚本《脚本 1 - 口播温和洁面妆感案》。',
meta: ['徐振（执行人） → 王经理（发布人）', 'TASK-20260819-018'],
tags: [
{ label: '通知', tone: 'primary' },
{ label: '关联脚本', tone: 'info' },
],
date: '2026-08-18',
time: '18:24',
state: '制作中',
stateTone: 'doing',
unread: true,
},
{
id: 'TASK-20260816-009',
category: 'task',
type: '任务完成',
title: '任务所需 3 条作品已全部上传',
content: '徐振已完成《夏季防晒运动素材》的全部作品上传，任务自动标记为已达标。',
meta: ['徐振（执行人） → 王经理（发布人）', 'TASK-20260816-009'],
tags: [
{ label: '已完成', tone: 'success' },
{ label: '任务完成', tone: 'info' },
],
date: '2026-08-18',
time: '16:35',
state: '已达标',
stateTone: 'done',
unread: true,
},
{
id: 'TASK-20260815-006',
category: 'task',
type: '任务逾期',
title: '任务已逾期 18 小时',
content: '《家居收纳直播切片》应于 8 月 18 日 18:00 完成，目前仅上传 1/4 条作品。',
meta: ['系统 → 陈主管（发布人）、李剪辑（执行人）', 'TASK-20260815-006'],
tags: [
{ label: '重要', tone: 'danger' },
{ label: '任务逾期', tone: 'info' },
],
date: '2026-08-19',
time: '12:00',
state: '已逾期',
stateTone: 'expired',
unread: true,
},
{
id: '110332278',
category: 'content',
type: '上传成功',
title: '成片《0730-8839-高弹透气提醒内裤走秀实拍.mp4》上传成功',
content: '文件已完成上传与转码，可在成片区查看和继续编辑。',
meta: ['系统 → 徐振（上传人）', '110332278'],
tags: [
{ label: '已完成', tone: 'success' },
{ label: '上传成功', tone: 'info' },
],
date: '2026-08-19',
time: '11:28',
state: '可用',
stateTone: 'available',
unread: true,
},
{
id: 'UPLOAD-20260819-091',
category: 'content',
type: '上传失败',
title: '素材《主播播间全景_4K.mov》上传失败',
content: '网络中断导致文件分片校验失败，原文件未入库，可重新上传。',
meta: ['系统 → 张摄影（上传人）', 'UPLOAD-20260819-091'],
tags: [
{ label: '重要', tone: 'danger' },
{ label: '上传失败', tone: 'info' },
],
date: '2026-08-19',
time: '11:02',
state: '上传失败',
stateTone: 'failed',
unread: true,
},
{
id: 'LIVE-20260818-012',
category: 'live',
type: '直播排班',
title: '8 月 20 日直播间排班已更新',
content: '直播间 A 的脚本讲解时段调整为 19:30 - 21:00，请相关人员确认。',
meta: ['运营中心 → 直播团队', 'LIVE-20260818-012'],
tags: [
{ label: '通知', tone: 'primary' },
{ label: '排班更新', tone: 'info' },
],
date: '2026-08-18',
time: '15:16',
state: '待确认',
stateTone: 'pending',
unread: true,
},
];
apps/web-vue/src/views/home/messages.vue 0 → 100644
View file @ 9c61bde6
This diff is collapsed.
apps/web-vue/src/views/home/update-log.vue 0 → 100644
View file @ 9c61bde6
<template>
<div class="update-log-page">
<div class="update-log-inner">
<header class="update-log-header">
<h1>更新日志</h1>
<p>我们在持续进行功能和体验升级</p>
</header>
<section class="timeline-list">
<article v-for="(item, index) in updateRecords" :key="item.version" class="timeline-item">
<aside class="timeline-side">
<div class="version">{{ item.version }}</div>
<div class="date">{{ formatShortDate(item.date) }}</div>
<span v-if="index === 0" class="latest-tag">最新版</span>
</aside>
<div class="timeline-axis">
<span class="timeline-dot" :class="{ active: index === 0 }"></span>
</div>
<div class="update-panel">
<h2>{{ formatTitleDate(item.date) }}产品特性变更内容</h2>
<p v-if="index === 0" class="summary">{{ item.desc }}</p>
<ol class="detail-list">
<li v-for="detail in item.details" :key="detail">{{ detail }}</li>
</ol>
<p v-if="index === 0" class="contact">
如果你的业务场景比较复杂，需要更多支持，请第一时间联系
<a href="mailto:csm@mcaigc.com">csm@mcaigc.com</a>
</p>
<p class="release-time">升级时间：{{ formatTitleDate(item.date) }}22:00</p>
</div>
</article>
</section>
</div>
</div>
</template>
<script setup lang="ts">
import { updateRecords } from './updateRecords';
const formatShortDate = (date: string) => date.replace(/-/g, '.');
const formatTitleDate = (date: string) => {
const [year, month, day] = date.split('-');
return `${year} 年 ${month} 月 ${day} 日`;
};
</script>
<style lang="scss" scoped>
.update-log-page {
min-height: 100%;
background: #f5f6f8;
color: #202734;
overflow-x: hidden;
}
.update-log-inner {
width: min(1000px, calc(100% - 48px));
margin: 0 auto;
padding: 0 0 72px;
}
.update-log-header {
min-height: 190px;
text-align: center;
padding-top: 26px;
h1 {
margin: 0;
color: #1f2530;
font-size: 44px;
line-height: 1.15;
font-weight: 700;
letter-spacing: 0;
}
p {
margin: 28px 0 0;
color: #5d6a7e;
font-size: 20px;
line-height: 1.4;
}
}
.timeline-list {
padding-top: 14px;
}
.timeline-item {
display: grid;
grid-template-columns: 132px 36px minmax(0, 1fr);
gap: 16px;
align-items: stretch;
}
.timeline-item + .timeline-item {
margin-top: 60px;
}
.timeline-side {
text-align: right;
padding-top: 2px;
}
.version {
color: #202734;
font-size: 26px;
line-height: 1;
font-weight: 700;
}
.date {
margin-top: 7px;
color: #c1c7d1;
font-size: 13px;
}
.latest-tag {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 8px;
min-width: 44px;
height: 24px;
padding: 0 8px;
border-radius: 2px;
background: #dbfff0;
color: #2fd18c;
font-size: 12px;
font-weight: 600;
}
.timeline-axis {
position: relative;
display: flex;
justify-content: center;
}
.timeline-axis::before {
content: '';
position: absolute;
top: 8px;
bottom: -60px;
width: 1px;
background: #e1e5ec;
}
.timeline-item:last-child .timeline-axis::before {
bottom: calc(100% - 8px);
}
.timeline-dot {
position: relative;
z-index: 1;
width: 9px;
height: 9px;
margin-top: 4px;
border-radius: 50%;
border: 1px solid #b8c0cc;
background: #f5f6f8;
}
.timeline-dot.active {
width: 17px;
height: 7px;
margin-top: 8px;
border: 0;
border-radius: 2px;
background: #3157e8;
transform: rotate(24deg);
}
.update-panel {
min-height: 302px;
padding: 26px 24px 24px;
border-radius: 8px;
background: #fff;
box-shadow: 0 10px 30px rgba(36, 45, 64, .03);
}
.update-panel h2 {
margin: 0;
color: #202734;
font-size: 16px;
line-height: 1.5;
font-weight: 700;
letter-spacing: 0;
}
.summary {
margin: 18px 0 0;
color: #8895a7;
font-size: 14px;
line-height: 1.8;
font-weight: 600;
}
.detail-list {
margin: 16px 0 0;
padding-left: 0;
list-style: none;
counter-reset: detail;
}
.detail-list li {
counter-increment: detail;
color: #8a96a8;
font-size: 14px;
line-height: 2.75;
}
.detail-list li::before {
content: counter(detail) '. ';
}
.contact {
margin: 12px 0 0;
color: #202734;
font-size: 16px;
line-height: 1.55;
font-weight: 700;
}
.contact a {
color: #1a00ff;
text-decoration: underline;
}
.release-time {
margin: 2px 0 0;
color: #202734;
font-size: 16px;
line-height: 1.55;
font-weight: 700;
}
@media (max-width: 768px) {
.update-log-inner {
width: min(100% - 28px, 640px);
}
.update-log-header {
min-height: 150px;
padding-top: 24px;
h1 {
font-size: 34px;
}
p {
margin-top: 18px;
font-size: 16px;
}
}
.timeline-item {
grid-template-columns: 88px 22px minmax(0, 1fr);
gap: 10px;
}
.timeline-item + .timeline-item {
margin-top: 28px;
}
.version {
font-size: 20px;
}
.update-panel {
min-height: auto;
padding: 20px 18px;
}
.contact,
.release-time {
font-size: 14px;
}
}
</style>
apps/web-vue/src/views/home/updateRecords.ts 0 → 100644
View file @ 9c61bde6
export type UpdateRecord = {
version: string;
type: string;
date: string;
title: string;
desc: string;
details: string[];
};
export const updateRecords: UpdateRecord[] = [
{
version: 'v2.8.0',
type: '新功能',
date: '2026-07-18',
title: 'AI 数字人主播情感音色与多方言能力上线',
desc: '数字人分身支持粤语、四川话、东北话等多方言口播，以及带货高亢、情绪安利等多种音色风格切换。',
details: [
'20 位高清超模数字人分身库全量上线',
'口型匹配误差降低至 < 0.1 秒，唇形与语音高度同步',
'支持自定义智能文案脚本与实时语速微调',
],
},
{
version: 'v2.7.4',
type: '算法升级',
date: '2026-06-30',
title: '商品卖点识别与脚本生成能力升级',
desc: '新增商品标题、详情页与评价内容的联合理解，帮助运营更快生成适合直播和短视频的脚本。',
details: [
'支持自动提取核心卖点、使用场景和人群痛点',
'新增口播、测评、剧情三类脚本生成模板',
'脚本结果可直接进入任务发布流程',
],
},
{
version: 'v2.7.0',
type: '体验优化',
date: '2026-06-12',
title: '素材上传与智能渲染流程优化',
desc: '上传成功后可自动进入创作工作台，减少重复选择素材与配置参数的操作。',
details: [
'支持批量上传后自动分组',
'新增渲染进度实时反馈',
'优化失败任务重试与错误提示',
],
},
{
version: 'v2.6.8',
type: '数据更新',
date: '2026-05-28',
title: '投放数据看板新增多平台汇总',
desc: '看板新增多广告平台核心指标统一汇总，便于团队按账号、素材和时间维度对比投放效果。',
details: [
'新增巨量广告、千川、腾讯 ADQ 数据汇总',
'支持按团队、分组、个人维度筛选',
'新增素材消耗与转化趋势对比',
],
},
];
apps/web-vue/vite.config.ts
View file @ 9c61bde6
......@@ -12,6 +12,7 @@ export default defineConfig({
},
publicDir: 'public',
server: {
host: '0.0.0.0',
port: 4173,
open: true,
// ffmpeg.wasm 需要 SharedArrayBuffer，必须配置 COOP/COEP 实现跨域隔离
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment