Skip to content

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

引用视频镜头模块的布局和交互

parent 492ada90
Hide whitespace changes
Inline Side-by-side
Showing with 411 additions and 7 deletions
apps/web-vue/public/styles/common.scss
View file @ bddc2bc2
......@@ -220,7 +220,7 @@ $spacing-values: ();
cursor: pointer !important;
/* 隐藏原生复选框框体 */
:deep(.el-checkbox__input) {
.el-checkbox__input {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
......@@ -229,7 +229,7 @@ $spacing-values: ();
cursor: pointer !important;
}
:deep(.el-checkbox__label) {
.el-checkbox__label {
display: none !important;
}
}
\ No newline at end of file
apps/web-vue/src/main.ts
View file @ bddc2bc2
......@@ -9,6 +9,8 @@ import App from './App.vue'
import router from './router'
import { setupRouterGuard } from './router/guard'
import SvgIcon from './components/SvgIcon/SvgIcon.vue'
import Dialog from './components/Dialog/index.vue'
import SeTable from './components/Table/indedx.vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App)
......@@ -19,4 +21,6 @@ app.use(ElementPlus, {
locale: zhCn,
})
app.component('SvgIcon', SvgIcon)
app.component('Dialog', Dialog)
app.component('SeTable', SeTable)
app.mount('#app')
apps/web-vue/src/views/resource/clip/components/CorrelationCard.vue 0 → 100644
View file @ bddc2bc2
<template>
<div>
<el-card class="flex-1 round-12 mt-20" shadow="hover">
<div class="flex-items-center justify-between" style="border-bottom: 1px solid #eee;">
<div class="flex gap-10">
<div v-for="(tab, index) in tabs" :key="index" class="fw-500 pt-2 pb-10 pointer"
:class="tabIndex === index ? 'active color-main' : ''" @click="tabIndex = index">{{
tab.label }}
</div>
</div>
<el-button type="primary" link size="small">编辑关联视频</el-button>
</div>
<div v-if="tabIndex === 0 || tabIndex === 2" class="flex gap-10 mt-20 over-x-auto pb-20">
<CorrelationCardEchart />
<div class="flex-1 flex gap-10">
<div class="pt-36 pb-26 pointer">
<div class="bg-000 h-full w-180 round-16 flex-center flex-col guanl">
<div>⬆️</div>
<div class="fw-600 tt">关联梦畅AIGC视频</div>
<div class="fs-12 color-main">支持成片、素材与第三方</div>
</div>
</div>
<div v-for="(item, index) in 10" :key="index" class="">
<div class="flex-center bg-eee py-4 fs-12 color-main round-4">使用时长 16.5s</div>
<div class="round-10 hidden mt-10 item-li pointer">
<div class="w-180 h-200">
<img src="../../../../static//image/huaban.png" width="100%" height="100%" class="cover"
alt="">
</div>
<div class="p-10">
<div>张玲静 | 口播（实拍素材</div>
<div class="fs-12 color-888 mt-2">张玲静 | 口播（实拍素材）</div>
</div>
<div style="border-top: 1px solid #eee;" class="p-10 flex-items-center justify-between">
<div class="flex-items-center gap-4">
<div class="w-20 h-20 bg-000 round"></div>
<div class="fs-12 gw-500">叶红鱼</div>
</div>
<span class="fs-12 color-888">2026-06-26</span>
</div>
</div>
<div class="flex-center fs-12 color-888 mt-10">2026-06-26 14:25</div>
</div>
</div>
</div>
<div v-if="tabIndex === 1">
<div class="flex justify-between mt-20">
<div class="flex flex-1 gap-10">
<el-select placeholder="排序" style="width: 140px;" class="myselect">
<el-option v-for="item in ascOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<el-select placeholder="请选择（支持输入搜索）" style="width: 240px;" class="myselect" filterable>
<template #prefix>
<span class="pr-4 color-000">作者</span>
</template>
<el-option v-for="item in ascOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<div class="flex-items-center gap-10 fs-12 round-4 p-2 bordedr">
<div class="flex-items-center gap-4 pl-10">上传时间</div>
<el-date-picker type="daterange" range-separator="至" style="width: 240px;"
start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
</div>
<div class="flex-items-center gap-10 fs-12 round-4 p-2 bordedr">
<div class="flex-items-center gap-4 pl-10">消耗时间</div>
<el-date-picker type="daterange" range-separator="至" style="width: 240px;"
start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
</div>
</div>
<el-button type="primary" size="small">导出</el-button>
</div>
<div class="flex gap-10 mt-16 over-x-auto pb-10">
<div v-for="(card, index) in 20" :key="index"
class="round-6 minw-140 h-70 px-10 pt-6 pb-8 bg-eee flex flex-col justify-between fs-12">
<div>58556.26</div>
<div class="flex justify-between">
<span class="fw-600 color-888">消耗</span>
<div class="w-20 h-20 round bg-000 flex-center">👂</div>
</div>
</div>
</div>
<div style="border-top: 1px solid #eee;" class="pt-10 mt-10">
<div class="flex-items-center justify-between">
<div class="flex gap-6">
<span class="color-000 fw-600">引用后所出成片列表</span>
<span class="color-main round-10 py-2 px-6 fs-12"
style="background-color: rgba(var(--main-color), .06);">3条</span>
</div>
<span class="color-888 fs-12">衍生视频数据实时同步中</span>
</div>
<div class="flex flex-wrap gap-20 w-full mt-10">
<div v-for="(item, index) in list" :key="index" class="flex-item w-full p-10">
<div class="flex gap-10">
<div class="bg-000 round-10 minw-70 h-80"></div>
<div class="flex flex-col gap-8 ellipsis">
<div class="fw-600 color-000 ellipsis">
0730-d复古古法金耳环高级质感种草成片_v1复古古法金耳环高级质感种草成片_v1复古古法金耳环高级质感种草成片_v1复古古法金耳环高级质感种草成片_v1.mp4
</div>
<div class="flex-items-center gap-4">
<div class="w-20 h-20 bg-000 round"></div>
<span class="color-000">张玲静</span>
<span class="px-4 color-888">·</span>
<span class="fs-12 color-888">2026-07-19</span>
</div>
<div class="flex justify-between">
<span class="py-2 px-10 round-4 fs-12 tfz">投放中</span>
<el-button type="primary" link size="small">查看成片数据</el-button>
</div>
</div>
</div>
<div class="content bg-xx mt-10 round-10 p-10 flex justify-between">
<div class="flex-center flex-col">
<span class="fs-12 color-888">消耗</span>
<span class="fw-600 color-000">￥2485</span>
</div>
<div class="flex-center flex-col">
<span class="fs-12 color-888">ROI</span>
<span class="fw-600 color-000">6.82</span>
</div>
<div class="flex-center flex-col">
<span class="fs-12 color-888">转化数</span>
<span class="fw-600 color-000">485</span>
</div>
</div>
</div>
</div>
</div>
</div>
</el-card>
<Dialog v-model="visible" bg-color="#fff" width="700">
<div class="fw-500 px-16 py-10" style="border-bottom: 1px solid #eee;">关联梦畅AIGC视频</div>
<div class="p-20">
<div class="flex gap-10">
<div v-for="(tab, index) in tabs2" :key="index" class="fw-500 py-2 px-10 pointer fs-12 round-20"
:class="tabIndex2 === index ? 'bg-main color-fff' : ''" @click="tabIndex2 = index">{{
tab.label }}
</div>
</div>
<div class="flex gap-10 mt-10">
<el-input placeholder="搜索成片名称或编号"></el-input>
<el-button type="primary">搜索</el-button>
</div>
<div class="mt-20">
<SeTable :dataList="tableData" size="small" :total="2">
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="成片ID" />
<el-table-column prop="id" label="成片">
<template #default="scope">
<div class="w-60 bg-000 h-40 round-6"></div>
</template>
</el-table-column>
<el-table-column prop="name" label="成片名称" />
<el-table-column prop="name" label="成片时长" />
</SeTable>
</div>
</div>
<div class="flex justify-end gap-10 p-16" style="border-top: 1px solid #eee;">
<el-button plain size="small">取消</el-button>
<el-button type="primary" size="small">确认关联</el-button>
</div>
</Dialog>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import CorrelationCardEchart from './CorrelationCardEchart.vue';
const tabIndex = ref(1)
const tabs = ref([
{ label: '引用视频镜头', value: 0 },
{ label: '被引用后出片', value: 1 },
{ label: '衍生视频', value: 2 },
])
const ascOptions = [
{ label: '按关联时间排序', value: 0 },
{ label: '按消耗金额排序', value: 1 },
{ label: '按ROI高到底排序', value: 2 },
{ label: '按转化数', value: 3 },
]
const list = ref([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }]);
// 弹窗
const visible = ref(false)
const tabIndex2 = ref(0)
const tabs2 = ref([
{ label: '关联成片', value: 0 },
{ label: '关联素材', value: 1 },
{ label: '关联第三方', value: 2 },
])
const tableData = [
{
id: '184552866885',
name: '可能是不能出去玩吧',
},
{
id: '184552866485',
name: '魔道重生之天下无敌（一）',
},
]
</script>
<style scoped lang="scss">
.item-li {
box-shadow: 0 0 0 1px #eee;
}
.guanl {
border: 2px dashed rgba(var(--main-color), 1);
background-color: rgba(var(--main-color), .08);
.tt {
color: #6200b3;
}
}
.bordedr {
box-shadow: 0 0 0 1px rgba(var(--main-color), .1);
}
.tfz {
color: rgb(5, 133, 54);
background-color: rgb(194, 255, 217);
}
.bg-xx {
background-color: #f2f5f7;
}
.flex-item {
flex: 0 0 calc((100% - 20px * 3) / 4);
min-width: calc((100% - 20px * 3) / 4);
border-radius: 8px;
box-sizing: border-box;
// aspect-ratio: 1 / 1.5;
box-shadow: 0 0 0 1px #eee;
}
/* 1600px 以下：一行 5 个 */
@media (max-width: 1500px) {
.flex-item {
flex: 0 0 calc((100% - 20px * 2) / 3);
}
}
/* 1200px 以下：一行 4 个 */
@media (max-width: 1200px) {
.flex-item {
flex: 0 0 calc((100% - 20px * 1) / 2);
}
}
</style>
\ No newline at end of file
apps/web-vue/src/views/resource/clip/components/CorrelationCardEchart.vue 0 → 100644
View file @ bddc2bc2
<template>
<div class="border-eee round-10 p-10 w-500 flex flex-col" style="min-width: 500px;">
<div class="flex justify-between">
<el-radio-group v-model="radio">
<el-radio-button label="引用视频" value="1" />
<el-radio-button label="引用视频作者" value="2" />
</el-radio-group>
<el-select placeholder="访问权限" style="width: 140px;" class="myselect">
<el-option v-for="item in ptOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="flex-items-center gap-20 mt-30 flex-1">
<div class="w-240 h-240" style="flex-shrink: 0;">
<v-chart class="w-full h-full" :option="chartOption" autoresize />
</div>
<div class="flex-1 flex flex-col gap-8 pr-20">
<div v-for="(item, index) in chartData" :key="index" class="flex flex-col">
<div class="flex-items-center justify-between">
<div class="flex-items-center gap-6">
<div class="w-8 h-8 round-2" :style="{ backgroundColor: item.color }"></div>
<span class="fs-12">{{ item.name }}</span>
</div>
<span class="item-value fs-12" :style="{ color: item.color }">{{ item.value }}</span>
</div>
<div class="progress-track w-full h-6 round-6 hidden">
<div class="progress-fill h-full round-6" :style="{
width: (item.value / maxValue) * 100 + '%',
backgroundColor: item.color
}"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { TooltipComponent, LegendComponent } from 'echarts/components';
const radio = ref('1')
const ptOptions = ref([
{ label: '全部平台', value: 0 },
{ label: '巨量千川', value: 1 },
{ label: '巨量广告', value: 2 },
{ label: '腾讯ADQ', value: 3 },
{ label: '磁力智投', value: 4 },
])
// 1. 注册 ECharts 组件
use([CanvasRenderer, PieChart, TooltipComponent, LegendComponent]);
// 2. 定义数据源
const totalDuration = '41.6s';
const chartData = [
{ name: '公共资源...', value: 16.7, color: '#a855f7' },
{ name: '天翔组 阅...', value: 14.3, color: '#3b82f6' },
{ name: '素颜霜...', value: 6.3, color: '#fbbf24' },
{ name: '奔现上脸...', value: 4.3, color: '#06b6d4' },
];
// 3. 计算进度条的最大基数 (用于计算百分比宽度)
const maxValue = computed(() => {
return Math.max(...chartData.map(item => item.value));
});
// 4. 生成 ECharts 配置
const chartOption = computed(() => {
const seriesData = chartData.map((item) => ({
...item,
itemStyle: { color: item.color },
}));
return {
tooltip: { trigger: 'item', formatter: '{b}: {c}s' },
legend: { show: false },
series: [
{
type: 'pie',
radius: ['45%', '80%'], // 圆环粗细
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#fff',
borderWidth: 2,
},
label: { show: false },
emphasis: { scale: false },
data: seriesData,
},
],
graphic: [
// 灰色小字 "总时长"
{
type: 'text',
left: 'center',
top: 'center',
style: {
text: '总时长\n' + totalDuration,
textAlign: 'center',
lineHeight: 24,
fontSize: 13,
fontWeight: 400,
color: '#64748b',
},
},
// 黑色大字 "41.6s"
{
type: 'text',
left: 'center',
top: 'center',
style: {
text: totalDuration,
textAlign: 'center',
lineHeight: 35, // 向下偏移一点点，让它和上方文字重合位置更好
fontSize: 20,
fontWeight: 'bold',
color: '#0f172a',
},
},
],
};
});
</script>
<style scoped lang="scss">
.item-name {
color: #1e293b;
}
/* ===== 进度条轨道 ===== */
.progress-track {
background-color: #f1f5f9;
}
.progress-fill {
transition: width 0.3s ease;
}
</style>
\ No newline at end of file
apps/web-vue/src/views/resource/clip/components/MaterialData.vue
View file @ bddc2bc2
......@@ -193,8 +193,6 @@
<script setup lang="ts">
import { ref } from 'vue';
import Dialog from '@/components/Dialog/index.vue'
import SeTable from '@/components/Table/indedx.vue'
const dateIndex = ref(0)
const handleTabDate = (index: number) => {
......@@ -216,7 +214,7 @@ const tabs = ref([
{ label: 'Bilibili三连推广', value: 10 },
])
// 弹窗内容
const dialog = ref(true)
const dialog = ref(false)
const dialogIndex = ref(3)
const title = ref('手动关联素材')
// 手动关联素材
......
apps/web-vue/src/views/resource/clip/detail.vue
View file @ bddc2bc2
<template>
<div class="bgmr vh100 p-20">
<div class="bgmr vh100 p-20 over-y-auto">
<div class="flex gap-20">
<el-card class="flex-1 round-12" shadow="hover">
<div class="flex gap-60">
......@@ -74,6 +74,7 @@
</el-card>
</div>
<MaterialData />
<CorrelationCard />
</div>
</template>
......@@ -84,6 +85,7 @@ import Tab2 from './components/Tab2.vue';
import Tab3 from './components/Tab3.vue';
import Tab4 from './components/Tab4.vue';
import MaterialData from './components/MaterialData.vue';
import CorrelationCard from './components/CorrelationCard.vue';
const ptIndex = ref(3)
const ptTabs = ref([
......
apps/web-vue/src/views/resource/clip/index.vue
View file @ bddc2bc2
......@@ -55,6 +55,7 @@ const switchCheck = () => {
checkedList.value = []
}
const goDetail = (item: any) => {
if(isCheck.value) return
router.push(`/resource/clip/detail/${item.id}`)
}
......
apps/web-vue/src/views/vue-flow/components/RoomDialog.vue
View file @ bddc2bc2
......@@ -62,7 +62,7 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import Dialog from '@/components/Dialog/index.vue';
const form = ref({
url: '',
type: 1,
......
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