Skip to content

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

修改绑定直播号，更新记录详情弹窗

parent 71aaa774
Show whitespace changes
Inline Side-by-side
Showing with 301 additions and 62 deletions
apps/web-vue/src/views/home/components/section5.vue
View file @ aa387a20
......@@ -2,10 +2,10 @@
<div class="bg-fff round-12 p-16">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-40 h-40 bg-main round-6 mr-10" style="background-color: rgba(var(--main-color), 0.1);"></div>
<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">
......@@ -21,65 +21,187 @@
<span>全部</span>
</div>
</div>
<section class="mt-20 flex gap-10">
<div v-for="(item, index) in list" :key="index" class="round-6 p-12 pointer"
style="background-color: #88888810; flex: 0 0 calc((100% - 10px * 3) / 4);overflow: hidden;">
<div v-for="item in list" :key="item.version" class="update-card round-6 p-12 pointer"
@click="lookDetail(item)">
<div class="flex-items-center justify-between">
<div class="fs-12 flex gap-6">
<span class="bg-000 round-4 px-6 py-2 color-fff">v1.0.0</span>
<span class="round-4 px-6 py-2 color-main"
style="background-color: rgba(var(--main-color), 0.1);">算法升级</span>
<span class="bg-000 round-4 px-6 py-2 color-fff">{{ item.version }}</span>
<span class="round-4 px-6 py-2 color-main update-type">{{ item.type }}</span>
</div>
<span class="fs-12 px-6 py-2 color-999">2026-10-25</span>
<span class="fs-12 px-6 py-2 color-999">{{ item.date }}</span>
</div>
<div class="mt-10 ellipsis font-bold">视频《冬季风衣短视频_01.mp4》上传成功，可前往创作工作台进行下一步编辑与智能渲染。</div>
<div class="mt-10 ellipsis color-888">
冬季风衣短视频_01.mp4》上传成功，可前往创作工作台进行下一步编辑与智能渲染冬季风衣短视频_01.mp4》上传成功，可前往创作工作台进行下一步编辑与智能渲染</div>
<div class="mt-10 ellipsis font-bold color-000">{{ item.title }}</div>
<div class="mt-10 ellipsis-2 color-888 fs-13 lh-22">{{ item.desc }}</div>
</div>
</section>
<Dialog v-model="detailVisible" bg-color="#fff" width="512">
<div v-if="currentDetail" class="detail-dialog hidden p-26">
<div class="flex-items-center gap-10">
<span class="version-tag color-fff font-bold fs-12 px-10 py-4 round-12">{{ currentDetail.version }}</span>
<span class="new-tag color-main font-bold fs-12 px-8 py-4 round-6">{{ currentDetail.type }}</span>
<span class="fs-12 color-8aa">发布日期： {{ currentDetail.date }}</span>
</div>
<h3 class="mt-12 pb-14 fs-16 color-000 update-title">{{ currentDetail.title }}</h3>
<div class="mt-20 p-16 round-8 desc-box fs-13 lh-24 color-334">
{{ currentDetail.desc }}
</div>
<div class="mt-20 flex-items-center gap-8">
<span class="spark color-main fs-18">✣</span>
<span class="font-bold color-000 fs-14">更新内容明细</span>
</div>
<div class="mt-10 p-16 round-8 detail-list">
<div v-for="content in currentDetail.details" :key="content"
class="flex-items-center gap-10 fs-13 color-334 lh-28">
<span class="detail-dot round bg-main"></span>
<span>{{ content }}</span>
</div>
</div>
<div class="flex justify-end mt-28">
<el-button type="primary" color="#9d19ff" class="px-22 h-32" @click="detailVisible = false">
我知道了
</el-button>
</div>
</div>
</Dialog>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const tabIndex = ref(1)
const buttonList = [
{ label: '创作', value: 1, num: 6 },
{ label: '卡审', value: 2, num: 3 },
{ label: '审核', value: 3, num: 0 },
{ label: '任务', value: 4, num: 2 },
{ label: '账号', value: 5, num: 0 },
{ label: '导出', value: 6, num: 0 },
]
const list = ref([1, 2, 3, 4])
import { ref } from 'vue';
type UpdateRecord = {
version: string;
type: string;
date: string;
title: string;
desc: string;
details: string[];
};
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 lookDetail = (record: UpdateRecord) => {
currentDetail.value = record;
detailVisible.value = true;
};
</script>
<style lang="scss" scoped>
.badge {
background-color: red;
.update-icon,
.update-type {
background-color: rgba(var(--main-color), .1);
}
.active {
background-color: #9022fd;
color: #fff;
.update-card {
flex: 0 0 calc((100% - 10px * 3) / 4);
overflow: hidden;
background-color: #88888810;
transition: border-color .2s, box-shadow .2s, transform .2s;
border: 1px solid transparent;
.badge {
background-color: #fff;
color: #9022fd;
&:hover {
border-color: rgba(var(--main-color), .25);
box-shadow: 0 8px 24px rgba(31, 41, 55, .08);
transform: translateY(-2px);
}
}
.active1 {
background-color: #a865ec;
color: #fff;
.detail-dialog {
box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
}
.badge {
background-color: #fff;
color: #9022fd;
}
.version-tag {
background: #101a33;
}
.new-tag,
.detail-list {
background: #fbf5ff;
}
.update-title {
border-bottom: 1px solid #edf0f5;
}
.desc-box {
background: #f8fbff;
border: 1px solid #dfe7f2;
}
.detail-list {
border: 1px solid #f0d9ff;
}
.detail-dot {
flex-shrink: 0;
width: 6px;
height: 6px;
}
.color-8aa {
color: #8aa0bf;
}
.bg-hh {
background: #f4f6f7;
.color-334 {
color: #334155;
}
</style>
\ No newline at end of file
apps/web-vue/src/views/zhibo/index.vue
View file @ aa387a20
......@@ -5,7 +5,7 @@
<h2 class="fs-16 color-000">直播账号总览</h2>
<p class="mt-4 color-888 fs-12">查看所有已绑定直播号的点赞、消耗与经营表现</p>
</div>
<el-button type="primary" color="#4854ff" class="h-36 px-20" @click="bindVisible = true">
<el-button type="primary" color="#4854ff" class="h-36 px-20" @click="openBindDialog">
<el-icon class="mr-6">
<Link />
</el-icon>
......@@ -96,33 +96,36 @@
</SeTable>
</el-card>
<Dialog v-model="bindVisible" bg-color="#fff" width="520">
<div class="bg-fff round-8 hidden">
<Dialog v-model="bindVisible" bg-color="#fff" width="672">
<div class="bind-dialog bg-fff round-8 hidden">
<div class="dialog-header flex-items-center px-24 py-18">
<span class="w-4 h-16 round-10 bg-main mr-12"></span>
<span class="font-bold color-000">绑定直播号</span>
</div>
<div class="p-24">
<el-form :model="bindForm" label-width="92px">
<el-form-item label="直播号名称">
<el-input v-model="bindForm.name" placeholder="请输入直播号名称" />
</el-form-item>
<el-form-item label="账号ID">
<el-input v-model="bindForm.handle" placeholder="例如 MCBeauty_2026" />
</el-form-item>
<el-form-item label="授权状态">
<el-select v-model="bindForm.status" class="w-full">
<el-option label="已绑定" value="已绑定" />
<el-option label="首次同步中" value="首次同步中" />
<el-option label="授权即将到期" value="授权即将到期" />
</el-select>
</el-form-item>
</el-form>
<div class="flex justify-end gap-12 mt-20">
<el-button @click="bindVisible = false">取消</el-button>
<el-button type="primary" @click="confirmBind">确定绑定</el-button>
<div class="px-24 py-26">
<div class="bind-steps flex gap-12">
<button v-for="item in bindSteps" :key="item.step" type="button"
class="bind-step flex-items-center gap-12 flex-1 px-12 border-none pointer text-left"
:class="{ active: bindStep === item.step }" @click="bindStep = item.step">
<span class="step-index flex-center wh-24 round color-000 fs-12 font-bold">{{ item.step }}</span>
<span class="font-bold color-000 fs-13">{{ item.title }}</span>
</button>
</div>
<div class="bind-auth-panel mt-20 flex-center flex-col round-6">
<div class="signal-icon relative flex-center mb-22" :class="`step-${bindStep}`">
<span class="signal-dot round"></span>
<span class="signal-ring signal-ring-left"></span>
<span class="signal-ring signal-ring-right"></span>
</div>
<div class="font-bold color-000 fs-14">{{ currentBindStep.title }}</div>
<div class="mt-8 fs-13 color-8aa">{{ currentBindStep.desc }}</div>
</div>
</div>
<div class="bind-footer flex justify-end gap-12 px-24 py-16">
<el-button @click="bindVisible = false">取消</el-button>
<el-button type="primary" color="#9d19ff" @click="handleBindConfirm">确认绑定</el-button>
</div>
</div>
</Dialog>
......@@ -226,11 +229,17 @@ type LiveRoom = {
const bindVisible = ref(false);
const detailVisible = ref(false);
const currentAccount = ref<LiveAccount>();
const bindStep = ref(1);
const bindForm = reactive({
name: '',
handle: '',
status: '已绑定' as LiveStatus,
});
const bindSteps = [
{ step: 1, title: '抖音扫码授权', desc: '授权完成后自动同步直播间账号' },
{ step: 2, title: '千川账户授权', desc: '完成千川授权后同步投放消耗数据' },
{ step: 3, title: '同步直播数据', desc: '同步完成后可在列表查看直播账号' },
];
const accounts = ref<LiveAccount[]>([
{
id: 1,
......@@ -328,7 +337,12 @@ const detailItems = computed(() => {
{ label: '投放消耗', value: `¥${item.cost.toLocaleString()}` },
];
});
const currentBindStep = computed(() => bindSteps.find((item) => item.step === bindStep.value) || bindSteps[0]);
const openBindDialog = () => {
bindStep.value = 1;
bindVisible.value = true;
};
const openDetail = (row: LiveAccount) => {
currentAccount.value = row;
detailVisible.value = true;
......@@ -372,6 +386,13 @@ const confirmBind = () => {
bindForm.status = '已绑定';
ElMessage.success('直播号绑定成功');
};
const handleBindConfirm = () => {
if (bindStep.value < 3) {
bindStep.value += 1;
return;
}
confirmBind();
};
const handlePageChange = () => {
// 当前为静态数据，预留分页事件用于后续接接口。
......@@ -476,7 +497,8 @@ const handlePageChange = () => {
}
.dialog-header,
.dialog-footer {
.dialog-footer,
.bind-footer {
border-top: 1px solid #edf0f5;
}
......@@ -484,4 +506,98 @@ const handlePageChange = () => {
border-top: none;
border-bottom: 1px solid #edf0f5;
}
.bind-dialog {
box-shadow: 0 16px 45px rgba(15, 23, 42, .18);
}
.bind-step {
height: 74px;
background: #fff;
border: 1px solid #dfe7f2 !important;
border-radius: 6px;
&.active {
background: #fbf5ff;
border-color: #d58cff !important;
}
&.active .step-index {
color: #fff;
background: #9d19ff;
}
}
.step-index {
flex-shrink: 0;
background: #edf3fb;
color: #71829b;
}
.bind-auth-panel {
height: 212px;
background: #f8fbff;
border: 1px solid #dfe7f2;
}
.signal-icon {
width: 116px;
height: 84px;
color: #0f1b33;
}
.signal-dot {
width: 16px;
height: 16px;
background: currentColor;
box-shadow: 0 0 0 12px rgba(15, 27, 51, .1);
}
.signal-ring {
position: absolute;
top: 4px;
width: 38px;
height: 76px;
border-color: currentColor;
border-style: solid;
}
.signal-ring-left {
left: 0;
border-width: 8px 0 8px 8px;
border-radius: 42px 0 0 42px;
&::after {
right: -14px;
border-width: 7px 0 7px 7px;
border-radius: 30px 0 0 30px;
}
}
.signal-ring-right {
right: 0;
border-width: 8px 8px 8px 0;
border-radius: 0 42px 42px 0;
&::after {
left: -14px;
border-width: 7px 7px 7px 0;
border-radius: 0 30px 30px 0;
}
}
.signal-ring-left::after,
.signal-ring-right::after {
content: '';
position: absolute;
top: 14px;
width: 24px;
height: 48px;
border-color: currentColor;
border-style: solid;
}
.text-left {
text-align: left;
}
</style>
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