Skip to content

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

互动数据、素材数据里面的几个弹窗

parent f02c366d
Show whitespace changes
Inline Side-by-side
Showing with 856 additions and 224 deletions
apps/web-vue/public/styles/common.scss
View file @ 60b2c1d1
...@@ -185,6 +185,7 @@ $spacing-values: (); ...@@ -185,6 +185,7 @@ $spacing-values: ();
.over-auto { overflow: auto; } .over-auto { overflow: auto; }
.over-scroll { overflow: scroll; } .over-scroll { overflow: scroll; }
.over-y-auto { overflow-y: auto;} .over-y-auto { overflow-y: auto;}
.over-x-auto { overflow-x: auto;}
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis-2 { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } .ellipsis-2 { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; }
.ellipsis-3 { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; } .ellipsis-3 { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; }
......
apps/web-vue/src/components/Table/indedx.vue 0 → 100644
View file @ 60b2c1d1
<template>
<div class="common-table-wrapper">
<!-- 1. 表格主体 -->
<el-table :data="tableData" style="width: 100%" :border="border" :size="size" :stripe="stripe" v-loading="loading"
@selection-change="handleSelectionChange">
<!-- 默认插槽：让父组件自定义列 -->
<slot></slot>
<!-- 空数据状态（可选） -->
<template #empty>
<el-empty description="暂无数据" />
</template>
</el-table>
<!-- 2. 分页组件 -->
<div class="pagination-container">
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
:page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
// 1. 定义 Props
const props = defineProps({
// 总条数（由父组件从接口获取后传入）
total: {
type: Number,
default: 0,
},
// 是否正在加载中
loading: {
type: Boolean,
default: false,
},
// 外部传入的数据列表（可选，你也可以在组件内部自己维护）
dataList: {
type: Array,
default: () => [],
},
// 默认每页显示条数
defaultPageSize: {
type: Number,
default: 10,
},
stripe: {
type: Boolean,
default: false,
},
border: {
type: Boolean,
default: false,
},
size: {
type: String,
default: ''
}
});
// 2. 定义 Emits（向父组件传递事件）
const emit = defineEmits<{
(event: 'update:page', page: number, size: number): void;
(event: 'selection-change', selection: any[]): void;
}>();
// 3. 内部状态（分页参数）
const currentPage = ref(1);
const pageSize = ref(props.defaultPageSize);
// 4. 内部表格数据（优先用 props.dataList，如果没传就默认展示空数组）
// 这种设计让你的组件既可以是展示型，也可以是受控型
const tableData = ref(props.dataList);
// 监听父组件传入的 dataList 变化，更新表格
watch(
() => props.dataList,
(newVal) => {
tableData.value = newVal || [];
},
{ immediate: true, deep: true }
);
// 5. 分页事件处理
const handleSizeChange = (val: number) => {
pageSize.value = val;
// 切换页大小时，通常重置到第一页（看业务需求，也可保持当前页）
currentPage.value = 1;
emit('update:page', currentPage.value, pageSize.value);
};
const handleCurrentChange = (val: number) => {
currentPage.value = val;
emit('update:page', currentPage.value, pageSize.value);
};
// 6. 处理多选变化
const handleSelectionChange = (selection: any[]) => {
console.log(3333, selection)
emit('selection-change', selection);
};
// 7. 暴露方法给父组件（比如手动刷新、重置页码等）
defineExpose({
currentPage,
pageSize,
// 重置到第一页
resetPage: () => {
currentPage.value = 1;
emit('update:page', currentPage.value, pageSize.value);
}
});
</script>
<style scoped lang="scss">
.common-table-wrapper {
width: 100%;
background: #fff;
border-radius: 8px;
box-sizing: border-box;
}
.pagination-container {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
</style>
\ No newline at end of file
apps/web-vue/src/main.ts
View file @ 60b2c1d1
...@@ -9,11 +9,14 @@ import App from './App.vue' ...@@ -9,11 +9,14 @@ import App from './App.vue'
import router from './router' import router from './router'
import { setupRouterGuard } from './router/guard' import { setupRouterGuard } from './router/guard'
import SvgIcon from './components/SvgIcon/SvgIcon.vue' import SvgIcon from './components/SvgIcon/SvgIcon.vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App) const app = createApp(App)
app.use(createPinia()) app.use(createPinia())
app.use(router) app.use(router)
setupRouterGuard(router) setupRouterGuard(router)
app.use(ElementPlus) app.use(ElementPlus, {
locale: zhCn,
})
app.component('SvgIcon', SvgIcon) app.component('SvgIcon', SvgIcon)
app.mount('#app') app.mount('#app')
apps/web-vue/src/views/resource/clip/components/MaterialData.vue 0 → 100644
View file @ 60b2c1d1
<template>
<div>
<el-card class="flex-1 round-12 mt-20" shadow="hover">
<div class="flex-items-center justify-between">
<div class="flex-items-center">
<span>👂</span>
<span class="fw-600 mr-10">素材数据</span>
<el-button type="primary" link size="small" class="mt-2"
@click="handleOpen(1, '手动关联素材')">手动关联素材</el-button>
<el-button type="primary" link size="small" class="mt-2"
@click="handleOpen(2, '素材配对监控')">素材配对监控</el-button>
<el-button type="primary" link size="small" class="mt-2"
@click="handleOpen(3, '已关联素材')">已关联广告视频素材(4)</el-button>
<el-button link size="small" class="mt-2">如何同步: 历史已投放视频/抖音号视频数据<span>👂</span></el-button>
</div>
<div class="flex-items-center gap-10">
<div class="bg-ts fs-12 round-4 color-main px-10 py-2 h-30 flex-center">手动刷新近3天的数据</div>
<div class="flex-items-center gap-10 fs-12 round-4 p-2 bordedr">
<el-date-picker type="daterange" range-separator="至" style="width: 240px;"
start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
<div class="flex-items-center gap-4 line">
<div class="px-6 round-4 pointer" :class="dateIndex === 0 ? 'color-fff bg-main' : ''"
@click="handleTabDate(0)">近7天</div>
<div class="px-6 round-4 pointer" :class="dateIndex === 1 ? 'color-fff bg-main' : ''"
@click="handleTabDate(1)">近30天</div>
</div>
</div>
</div>
</div>
<div class="flex gap-10 mt-10 pt-10" style="border-top: 1px solid #eee;">
<div v-for="(tab, index) in tabs" :key="index" class="fw-600 fs-12 px-6 py-2 round-4 pointer"
:class="tabIndex === index ? 'bg-main color-fff' : ''" @click="tabIndex = index">{{ tab.label }}
</div>
</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>
</el-card>
<Dialog v-model="dialog" bg-color="#fff" width="1000">
<div class="fw-500 px-16 py-10" style="border-bottom: 1px solid #eee;">{{ title }}</div>
<div v-if="dialogIndex === 1">
<div class="tishi fs-10 px-16 py-6">
<div>手动关联：关联后，平台将自动同步后续产生的广告数据，并会追溯过去30天的广告数据（如果是抖音首页视频/达人抖音主页视频，支持选择【巨量千川-从抖音号关联】选择抖音首页视频进行关联）
</div>
<div class="zy mt-4">请注意：关联后，数据同步可能需要时间，请隔天再查看数据。</div>
</div>
<div class="flex gap-10 mt-10 pt-10 mx-16" style="border-bottom: 1px solid #eee;">
<div v-for="(tab, index) in tabs" :key="index" class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
:class="tabIndex === index ? 'active color-main' : ''" @click="tabIndex = index">{{ tab.label }}
</div>
</div>
<div class="p-16 flex gap-10">
<div class="round-4 p-10" style="border: 1px solid #eee;">
<div class="flex gap-10">
<div v-for="(tab, index) in zhOptions" :key="index"
class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
:class="tabIndex === index ? 'color-main' : ''" @click="tabIndex = index">{{
tab.label }}
</div>
<el-button type="primary" size="small" link style="margin-top: -4px;">去授权</el-button>
</div>
<el-input placeholder="账户名称/id" size="small" class="w-200" />
</div>
<div class="flex-1 round-4 p-10" style="border: 1px solid #eee;">
<div class="flex gap-10">
<div v-for="(tab, index) in glOptions" :key="index"
class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
:class="tabIndex === index ? 'color-main' : ''" @click="tabIndex = index">{{
tab.label }}
</div>
</div>
<div class="flex justify-between">
<el-input placeholder="账户名称/id" size="small" class="w-200" />
<el-button class="fs-12 fw-400" link>如何同步: 历史已投放视频/抖音号视频数据</el-button>
</div>
<div class="mt-10">
<SeTable :dataList="tableData" size="small" :total="2">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="素材名称" />
<el-table-column prop="id" label="素材ID" />
</SeTable>
</div>
</div>
</div>
</div>
<div v-if="dialogIndex === 2" class="p-16">
<div>
<span>选择要监控的广告账号：</span>
<el-button type="primary" link>查看功能说明</el-button>
</div>
<div class="flex gap-10 mt-10 pt-10" style="border-bottom: 1px solid #eee;">
<div v-for="(tab, index) in tabs" :key="index" class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
:class="tabIndex === index ? 'active color-main' : ''" @click="tabIndex = index">{{ tab.label }}
</div>
</div>
<div class="flex gap-10 mt-10">
<div class="round-4 flex-1" style="border: 1px solid #eee;">
<div class="flex gap-10 px-10 pt-8 bg-eee">
<div v-for="(tab, index) in zhOptions" :key="index"
class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
:class="tabIndex === index ? 'color-main' : ''" @click="tabIndex = index">{{
tab.label }}
</div>
<el-button type="primary" size="small" link style="margin-top: -4px;">去授权</el-button>
</div>
<div class="p-10">
<div class="flex gap-10">
<el-input placeholder="账户名称/id" size="small" />
<el-button type="primary" link size="small">+ 账户分组</el-button>
</div>
<div class="checkbox-wrapper">
<el-checkbox-group v-model="checkedSekects">
<div v-for="(item, index) in checkList" :key="index" class="mt-20">
<el-checkbox class="custom-checkbox" :value="item">
<div>
<div class="fw-500">{{ item.name }}</div>
<div class="fs-12 color-888 fw-500 mt-4">{{ item.id }}</div>
</div>
</el-checkbox>
</div>
</el-checkbox-group>
</div>
</div>
</div>
<div class="round-4 flex-1" style="border: 1px solid #eee;">
<div class="flex gap-10 px-10 pt-8 pb-10 bg-eee">已选账号</div>
<div class="px-10">
<div v-for="(item, index) in checkedSekects" :key="index"
class="mt-10 bg-xz px-10 py-6 round-6 flex-items-center justify-between">
<div>
<div class="">{{ item.name }}</div>
<div class="fs-12 color-888">{{ item.id }}</div>
</div>
<span class="fs-18 pointer del" @click="delzh(item)">×</span>
</div>
</div>
</div>
</div>
</div>
<div v-if="dialogIndex === 3" class="px-16 pb-30">
<div class="flex gap-10 mt-10 pt-10" style="border-bottom: 1px solid #eee;">
<div v-for="(tab, index) in scOptions" :key="index" class="fw-500 fs-12 px-6 py-2 pb-10 pointer"
:class="tabIndex === index ? 'active color-main' : ''" @click="tabIndex = index">{{ tab.label }}
</div>
</div>
<div class="flex justify-between mt-20 mb-20">
<div class="flex gap-10">
<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>
<el-input placeholder="账户名称/id" class="w-140" size="small" />
<el-input placeholder="素材id" class="w-140" size="small" />
</div>
<div>
<el-button type="primary">素材配对监控</el-button>
<el-button type="primary">导出</el-button>
</div>
</div>
<el-table :data="scTableData" style="width: 100%" size="small">
<el-table-column prop="date" label="广告账户" width="180" />
<el-table-column prop="name" label="媒体" width="180" />
<el-table-column prop="address" label="素材ID / 创意ID" width="180"/>
<el-table-column prop="name1" label="点击率" width="180" />
<el-table-column prop="name1" label="点赞数" width="180" />
<el-table-column prop="name1" label="评论量" width="180" />
<el-table-column prop="name1" label="分享量" width="180" />
<el-table-column prop="name1" label="关联方式" width="180" />
<el-table-column prop="name1" label="关联时间" width="180" />
<el-table-column prop="name1" label="更新时间" width="180" />
<el-table-column prop="action" label="操作">
<template #default="scope">
<el-button type="primary" size="small" link>取消关联</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="dialogIndex !== 3" class="flex justify-end gap-10 p-16" style="border-top: 1px solid #eee;">
<el-button plain>取消</el-button>
<div class="flex-center pointer fw-500 h-32 px-14 bg-ts color-main">保存</div>
<el-button type="primary">保存并关闭弹窗</el-button>
</div>
</Dialog>
</div>
</template>
<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) => {
tabIndex.value = index
}
const tabIndex = ref(0)
const tabs = ref([
{ label: '汇总数据', value: 0 },
{ label: '巨量广告', value: 1 },
{ label: '巨量千川', value: 2 },
{ label: '巨量本地推', value: 3 },
{ label: '磁力智投', value: 4 },
{ label: '磁力金牛', value: 5 },
{ label: '腾讯ADQ', value: 6 },
{ label: 'TikTok', value: 7 },
{ label: '百度营销', value: 8 },
{ label: '小红书', value: 9 },
{ label: 'Bilibili三连推广', value: 10 },
])
// 弹窗内容
const dialog = ref(true)
const dialogIndex = ref(3)
const title = ref('手动关联素材')
// 手动关联素材
const zhOptions = [
{ label: '全部账户', value: 0 },
{ label: '分类账户', value: 1 },
{ label: '收藏账户', value: 2 },
{ label: '小组账户', value: 3 },
]
const glOptions = [
{ label: '从视频库关联', value: 0 },
{ label: '从抖音号关联', value: 1 },
]
const tableData = [
{
id: '184552866885',
name: '可能是不能出去玩吧',
},
{
id: '184552866485',
name: '魔道重生之天下无敌（一）',
},
]
const handleOpen = (type: number, str: string) => {
title.value = str
dialogIndex.value = type
}
// 素材配对监控
const checkedSekects = ref<any>([])
const checkList = ref([
{ name: '魔鬼来之天下无敌', id: '1658728122455' },
{ name: '柳如烟是天下最渣的渣女', id: '1658728122854' },
{ name: '三十年喝东西，莫欺少年穷', id: '1658728122009' },
])
const delzh = (record: any) => { // 删除选中的账号
const index = checkedSekects.value.findIndex((item: any) => item.id === record.id);
if (index !== -1) {
checkedSekects.value.splice(index, 1); // 从 index 位置删除 1 个元素
}
}
// 已关联素材
const scOptions = [
{ label: '素材明细数据', value: 0 },
{ label: '素材汇总数据', value: 1 },
{ label: '账户汇总数据', value: 2 },
]
const ptOptions = ref([
{ label: '全部平台', value: 0 },
{ label: '巨量千川', value: 1 },
{ label: '巨量广告', value: 2 },
{ label: '腾讯ADQ', value: 3 },
{ label: '磁力智投', value: 4 },
])
const scTableData = ref([
{
id: '184552866885',
name: '可能是不能出去玩吧',
},
{
id: '184552866485',
name: '魔道重生之天下无敌（一）',
},
])
</script>
<style lang="scss" scoped>
.bordedr {
box-shadow: 0 0 0 1px rgba(var(--main-color), .1);
}
.bg-ts {
background-color: rgba(var(--main-color), .04);
}
.line {
border-left: 1px solid #eee;
padding-left: 20px;
}
.bg-ef {
background-color: #f9fcfd;
}
.bg-xz {
background-color: rgba(var(--main-color), .03);
border: 1px solid rgba(var(--main-color), .1);
}
.del {
&:hover {
color: rgba(var(--main-color), 1);
}
}
.active {
border-bottom: 2px solid rgba(var(--main-color), 1);
}
.tishi {
background-color: rgb(255, 247, 223);
color: #ff9102;
}
// 多选样式
.checkbox-wrapper {
:deep(.el-checkbox) {
align-items: flex-start !important;
}
}
</style>
\ No newline at end of file
apps/web-vue/src/views/resource/clip/components/StackedAreaChart.vue
View file @ 60b2c1d1
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="platform-tabs flex gap-10 p-4 round-8 fs-12"> <div class="platform-tabs flex gap-10 p-4 round-8 fs-12">
<div class="tab-item py-4 px-10 color-666 pointer round-6" v-for="(item, index) in ptOptions" <div class="tab-item py-4 px-10 color-666 pointer round-6" v-for="(item, index) in ptOptions"
:key="index" @click="dataType = item.value" :class="dataType === item.value ? 'active' : ''"> :key="index" @click="dataType = item.value" :class="dataType === item.value ? 'active' : ''">
巨量引擎 {{ item.label }}
</div> </div>
</div> </div>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<el-option label="展示数" value="views" /> <el-option label="展示数" value="views" />
</el-select> </el-select>
</div> </div>
<div class="metric-item"> <div class="flex-items-center gap-6">
<span class="dot green"></span> <span class="dot green"></span>
<el-select v-model="metric2" size="small" class="metric-select"> <el-select v-model="metric2" size="small" class="metric-select">
<el-option label="流失数" value="loss" /> <el-option label="流失数" value="loss" />
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<!-- 3. 底部信息说明 --> <!-- 3. 底部信息说明 -->
<div class="mt-10 pt-10 text-center fs-12 footer-info"> <div class="mt-10 pt-10 text-center fs-12 footer-info">
<div class="color-888"> <div class="color-333">
(数据来源：根据巨星接口实时查询，近一个月视频素材的互动流失数据) (数据来源：根据巨星接口实时查询，近一个月视频素材的互动流失数据)
</div> </div>
<div class="red-text fw-500"> <div class="red-text fw-500">
...@@ -291,7 +291,7 @@ const chartOption = computed(() => ({ ...@@ -291,7 +291,7 @@ const chartOption = computed(() => ({
border-top: 1px solid #f5f5f5; border-top: 1px solid #f5f5f5;
.red-text { .red-text {
color: #ff5744; color: #e92020;
margin-top: 4px; margin-top: 4px;
} }
} }
......
apps/web-vue/src/views/resource/clip/components/Tab1.vue 0 → 100644
View file @ 60b2c1d1
<template>
<div>
<div class="flex flex-col gap-20 mt-20">
<div class="flex-items-center">
<div class="w-100 color-666">成片区</div>
<div class="flex-1 color-000">
<span>女士内衣</span>
<el-button type="primary" text>修改</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">视频标题</div>
<div class="flex-1 color-000">
<span>0730-8835-鲁月园-复古耳环动态奢感视频.mp4</span>
<el-button type="primary" text>修改</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">公共标签</div>
<div class="flex-1 color-000">
<el-tag type="success">仙侠穿越</el-tag>
<el-tag type="success">视频卡</el-tag>
<el-tag type="success">隐式陪叫</el-tag>
<el-button type="primary" text>+ 添加公共标签</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">个人标签</div>
<div class="flex-1 color-000">
<el-tag type="success">仙侠穿越</el-tag>
<el-tag type="success">视频卡</el-tag>
<el-tag type="success">隐式</el-tag>
<el-button type="primary" text>+ 添加个人标签</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">关联脚本</div>
<div class="flex-1 color-000">
<el-button type="primary" text>查看脚本(1)</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">视频状态</div>
<div class="flex-1 color-000">
<el-tag type="warning">待审核</el-tag>
<el-button type="primary" text>修改</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">视频备注</div>
<div class="flex-1 color-000">
<el-input type="textarea" rows="2" />
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">附件</div>
<div class="flex-1 color-000">
<el-button type="primary" text>+ 添加附件</el-button>
</div>
</div>
</div>
<div style="border-top: 1px solid #eee;" class="pt-16 mt-10">
<el-button type="primary" plain>分享</el-button>
<el-button type="primary" plain>操作记录</el-button>
<el-button type="primary" plain>下载源码视频</el-button>
<el-button type="primary" plain>更多</el-button>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss"></style>
\ No newline at end of file
apps/web-vue/src/views/resource/clip/components/Tab2.vue 0 → 100644
View file @ 60b2c1d1
<template>
<div>
<div class="bg-47 p-4 round-6 mt-20 flex-items-center gap-20">
<el-select placeholder="Select" style="width: 100px;" class="myselect">
<el-option v-for="item in pzOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-radio-group>
<el-radio value="1">只看@我的</el-radio>
<el-radio value="2">只看回复我的</el-radio>
</el-radio-group>
</div>
<div class="h-400 over-y-auto">
<div class="round-12 p-12 backitems mt-10" v-for="(item, index) in 10" :key="index">
<div class="fs-12 flex justify-between items-center">
<span class="round-6 color-main px-8 py-2"
style="background: rgba(var(--main-color), .05);box-shadow: 0 0 0 1px rgba(var(--main-color), .1);">0分2秒54
至 0分3秒68</span>
<div class="px-10 h-24 flex-center color-000 fs-10 round-40" style="background: #eee;">
第一版</div>
</div>
<div class="mt-4 fs-12">这里有点模糊，改一下 @dy4 @lan大声道撒活动大胜靠德卡仕达四大斯柯达</div>
<div class="bg-ef round-6 p-10 mt-10 flex flex-col gap-8">
<div v-for="(notice, indexn) in 2" :key="indexn" class="flex-items-center gap-20">
<div class="fs-12 flex-1 ellipsis">
<span class="fw-500">逢场作戏</span>
<span class="color-666 px-6">回复</span>
<span class="fw-500">天上人间%：</span>
<span class="color-333" title="已修改 @天上人间%杀很大撒大声地等哈啊哈是的">已修改
@天上人间%杀很大撒大声地等哈啊哈是的</span>
</div>
<div class="flex-items-center fs-12 gap-6">
<div class="color-blue">回复</div>
<span class="color-888">08-16 20:18</span>
</div>
</div>
</div>
<div class="flex justify-between items-center mt-10">
<div class="flex-items-center gap-8">
<div class="w-24 h-24 round bg-main hidden">
<img src="@/static/image/huaban.png" class="cover" width="100%" height="100%" alt="">
</div>
<span class="fw-600 color-main">逢场作戏</span>
<span class="color-888 fs-12">05-23 14:58</span>
</div>
<div>
<el-button size="small" type="primary" class="color-blue" link>回复</el-button>
<el-button size="small" link type="danger">删除</el-button>
<el-button size="small" link>标记完成</el-button>
</div>
</div>
</div>
</div>
<div class="round-12 p-12 backitems mt-10 bg-ef">
<div class="fs-12 mb-10">
<span class="round-6 color-main px-8 py-2"
style="background: rgba(var(--main-color), .05);box-shadow: 0 0 0 1px rgba(var(--main-color), .1);">0分2秒54
至 0分3秒68</span>
<span class="ml-10 color-888">(片段批注)</span>
</div>
<div class="flex gap-10">
<el-mention v-model="mention" type="textarea" :rows="2" :maxlength="100" :options="ptTabs"
placeholder="请输入批注信息，输入@..." />
</div>
<div class="flex-items-center justify-between gap-10 mt-10">
<div class="flex-items-center gap-10">
<FileUpload :limit="1" :width="30" title="上传截图附件">
<template #trigger>
<span class="fs-18 lh-18 color-888">+</span>
</template>
</FileUpload>
<span class="fs-12 color-888">上传截图附件</span>
</div>
<div class="flex-items-center gap-10">
<el-checkbox label="同时发送通知" value="Value 1" />
<el-button type="primary" size="small" round>发送</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import FileUpload from '@/components/Upload/index.vue'
const mention = ref('')
const pzOptions = ref([
{ label: '全部批注', value: 0 },
{ label: '单帧批注', value: 1 },
{ label: '片段批注', value: 2 },
{ label: '字幕批注', value: 3 },
])
const ptTabs = ref([
{ label: '抖音样式', value: 0 },
{ label: '抖音橱窗', value: 1 },
{ label: '视频号样式', value: 2 },
{ label: '隐藏样式', value: 3 },
])
</script>
<style scoped lang="scss">
.bg-47 {
background-color: #f0f4f7;
}
.bg-ef {
background-color: #f9fcfd;
}
.color-blue {
color: #148cfc;
font-weight: bold;
}
.backitems {
border: 1px solid #eee;
&:hover {
border-color: rgba(var(--main-color), .4);
}
}
:deep(.myselect) {
.el-select__wrapper {
border-radius: 12px;
}
}
</style>
\ No newline at end of file
apps/web-vue/src/views/resource/clip/components/Tab3.vue 0 → 100644
View file @ 60b2c1d1
<template>
<div>
<StackedAreaChart />
<div class="p-12 backitems round-12 mt-10 bg-ef">
<div class="flex-items-center justify-between">
<div>
<div class="pl-12 relative fw-600 title">复盘区</div>
<div class="fs-12 color-888">分析视频在每个帧数的亮点与爆点，支持点击定位跳转播放</div>
</div>
<el-button type="primary" round size="small">+ 添加帧复盘</el-button>
</div>
<div v-for="(item, index) in 3" :key="index" class="bg-fff round-10 p-10 mt-10 flex gap-10">
<div class="w-48 h-48 round-10 bg-000" style="min-width: 48px;"></div>
<div class="flex-1 pt-4">
<div class="flex justify-between">
<div class="flex fs-12 gap-10">
<span class="px-8 py-2 round-4 tag">优质画面</span>
<span class="round-6 color-main px-8 py-2"
style="background: rgba(var(--main-color), .05);box-shadow: 0 0 0 1px rgba(var(--main-color), .1);">0分2秒54</span>
</div>
<span class="fs-12 color-888">2026-06-27 09:40</span>
</div>
<div class="fs-12 mt-4">
纯朴科技：<span class="fw-500 color-000">大萨达撒大花洒等哈还</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import StackedAreaChart from './StackedAreaChart.vue';
</script>
<style scoped lang="scss">
.bg-ef {
background-color: #f9fcfd;
}
.tag {
color: #148cfc;
background-color: #f5faff;
box-shadow: 0 0 0 1px #63b4ff;
}
.title {
&::before {
content: '';
position: absolute;
left: 0;
top: 3px;
border-radius: 20px;
height: 16px;
width: 6px;
background-color: rgba(var(--main-color), 1);
}
}
.backitems {
border: 1px solid #eee;
&:hover {
border-color: rgba(var(--main-color), .4);
}
}
</style>
\ No newline at end of file
apps/web-vue/src/views/resource/clip/components/Tab4.vue 0 → 100644
View file @ 60b2c1d1
<template>
<div>
<div class="flex-items-center justify-between mt-20">
<el-button type="primary" size="small" plain>上传工程文件</el-button>
<el-button size="small" text>常见问题</el-button>
</div>
<div>
<div class="p-12 backitems round-12 mt-10 bg-fff" v-for="(item, index) in 1" :key="index">
<div class="flex gap-10">
<div class="w-100 bg-000 h-80 round-10 hidden"></div>
<div>
<div class="font-bold">纯朴洁面油爆款框架_高转化卡点V2</div>
<div class="fs-12 color-888">上传工程时间：2026-08-17</div>
<div class="flex gap-10 mt-4">
<el-tag size="small">剪映 Draft / PR XML 兼容包</el-tag>
<span class="fs-12 color-888">48.2 MB · 保留 8 轨时间线</span>
</div>
</div>
</div>
<div class="flex-items-center justify-between mt-10 pt-10" style="border-top: 1px solid #f5f5f5;">
<div class="color-main round-6 px-10 py-2 fs-12 bg-xz">下载</div>
<div class="flex-items-center gap-6">
<span class="fs-12 color-888">访问权限</span>
<el-select placeholder="访问权限" style="width: 100px;" class="myselect" size="small">
<el-option v-for="item in qxOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
</div>
</div>
<div class="p-12 backitems round-12 mt-10 bg-ts">
<div class="font-bold color-main">* 爆款视频工程文件拆解与复用价值</div>
<ul class="fs-12">
<li class="mt-6 pl-16 relative dot">
<span class="fw-600">爆款框架微调：</span>
<span>下载爆款视频工程文件并导入剪映后，系统保留所有画轨、音轨、特效与花字时间线。只需替换特定镜头或产品，即可快速批量产出高质素材。</span>
</li>
<li class="mt-6 pl-16 relative dot">
<span class="fw-600">新人迅速上手：</span>
<span>新员工可通过解构优秀剪辑师的工程草稿，学习黄金Hook节奏、转场卡点与音效编排。</span>
</li>
<li class="mt-6 pl-16 relative dot">
<span class="fw-600">内网资产归档：</span>
<span>拍摄与剪辑人员在内网环境下无缝协作与工程同步，保障视频数字资产不丢失。</span>
</li>
</ul>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const qxOptions = ref([
{ label: '公开', value: 0 },
{ label: '仅本部门', value: 1 },
{ label: '私密', value: 2 },
])
</script>
<style scoped lang="scss">
.bg-xz {
background-color: rgba(var(--main-color), .1);
}
.bg-ts {
background-color: rgba(var(--main-color), .04);
}
.dot {
&::before {
content: '';
position: absolute;
top: 8px;
left: 0;
height: 4px;
width: 4px;
border-radius: 10px;
background: #333;
}
}
.backitems {
border: 1px solid #eee;
&:hover {
border-color: rgba(var(--main-color), .4);
}
}
:deep(.myselect) {
.el-select__wrapper {
border-radius: 12px;
}
}
</style>
\ No newline at end of file
apps/web-vue/src/views/resource/clip/detail.vue
View file @ 60b2c1d1
...@@ -60,191 +60,32 @@ ...@@ -60,191 +60,32 @@
</div> </div>
</div> </div>
<section v-if="ptIndex === 0"> <section v-if="ptIndex === 0">
<div class="flex flex-col gap-20 mt-20"> <Tab1 />
<div class="flex-items-center">
<div class="w-100 color-666">成片区</div>
<div class="flex-1 color-000">
<span>女士内衣</span>
<el-button type="primary" text>修改</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">视频标题</div>
<div class="flex-1 color-000">
<span>0730-8835-鲁月园-复古耳环动态奢感视频.mp4</span>
<el-button type="primary" text>修改</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">公共标签</div>
<div class="flex-1 color-000">
<el-tag type="success">仙侠穿越</el-tag>
<el-tag type="success">视频卡</el-tag>
<el-tag type="success">隐式陪叫</el-tag>
<el-button type="primary" text>+ 添加公共标签</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">个人标签</div>
<div class="flex-1 color-000">
<el-tag type="success">仙侠穿越</el-tag>
<el-tag type="success">视频卡</el-tag>
<el-tag type="success">隐式</el-tag>
<el-button type="primary" text>+ 添加个人标签</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">关联脚本</div>
<div class="flex-1 color-000">
<el-button type="primary" text>查看脚本(1)</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">视频状态</div>
<div class="flex-1 color-000">
<el-tag type="warning">待审核</el-tag>
<el-button type="primary" text>修改</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">视频备注</div>
<div class="flex-1 color-000">
<el-input type="textarea" rows="2" />
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">附件</div>
<div class="flex-1 color-000">
<el-button type="primary" text>+ 添加附件</el-button>
</div>
</div>
</div>
<div style="border-top: 1px solid #eee;" class="pt-16 mt-10">
<el-button type="primary" plain>分享</el-button>
<el-button type="primary" plain>操作记录</el-button>
<el-button type="primary" plain>下载源码视频</el-button>
<el-button type="primary" plain>更多</el-button>
</div>
</section> </section>
<section v-if="ptIndex === 1"> <section v-if="ptIndex === 1">
<div class="bg-47 p-4 round-6 mt-20 flex-items-center gap-20"> <Tab2 />
<el-select placeholder="Select" style="width: 100px;" class="myselect">
<el-option v-for="item in pzOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<el-radio-group>
<el-radio value="1">只看@我的</el-radio>
<el-radio value="2">只看回复我的</el-radio>
</el-radio-group>
</div>
<div class="h-400 over-y-auto">
<div class="round-12 p-12 backitems mt-10" v-for="(item, index) in 10" :key="index">
<div class="fs-12 flex justify-between items-center">
<span class="round-6 color-main px-8 py-2"
style="background: rgba(var(--main-color), .05);box-shadow: 0 0 0 1px rgba(var(--main-color), .1);">0分2秒54
至 0分3秒68</span>
<div class="px-10 h-24 flex-center color-000 fs-10 round-40" style="background: #eee;">
第一版</div>
</div>
<div class="mt-4 fs-12">这里有点模糊，改一下 @dy4 @lan大声道撒活动大胜靠德卡仕达四大斯柯达</div>
<div class="bg-ef round-6 p-10 mt-10 flex flex-col gap-8">
<div v-for="(notice, indexn) in 2" :key="indexn" class="flex-items-center gap-20">
<div class="fs-12 flex-1 ellipsis">
<span class="fw-500">逢场作戏</span>
<span class="color-666 px-6">回复</span>
<span class="fw-500">天上人间%：</span>
<span class="color-333" title="已修改 @天上人间%杀很大撒大声地等哈啊哈是的">已修改
@天上人间%杀很大撒大声地等哈啊哈是的</span>
</div>
<div class="flex-items-center fs-12 gap-6">
<div class="color-blue">回复</div>
<span class="color-888">08-16 20:18</span>
</div>
</div>
</div>
<div class="flex justify-between items-center mt-10">
<div class="flex-items-center gap-8">
<div class="w-24 h-24 round bg-main hidden">
<img src="@/static/image/huaban.png" class="cover" width="100%" height="100%"
alt="">
</div>
<span class="fw-600 color-main">逢场作戏</span>
<span class="color-888 fs-12">05-23 14:58</span>
</div>
<div>
<el-button size="small" type="primary" class="color-blue" link>回复</el-button>
<el-button size="small" link type="danger">删除</el-button>
<el-button size="small" link>标记完成</el-button>
</div>
</div>
</div>
</div>
<div class="round-12 p-12 backitems mt-10 bg-ef">
<div class="fs-12 mb-10">
<span class="round-6 color-main px-8 py-2"
style="background: rgba(var(--main-color), .05);box-shadow: 0 0 0 1px rgba(var(--main-color), .1);">0分2秒54
至 0分3秒68</span>
<span class="ml-10 color-888">(片段批注)</span>
</div>
<div class="flex gap-10">
<el-mention v-model="mention" type="textarea" :rows="2" :maxlength="100" :options="ptTabs"
placeholder="请输入批注信息，输入@..." />
</div>
<div class="flex-items-center justify-between gap-10 mt-10">
<div class="flex-items-center gap-10">
<FileUpload :limit="1" :width="30" title="上传截图附件">
<template #trigger>
<span class="fs-18 lh-18 color-888">+</span>
</template>
</FileUpload>
<span class="fs-12 color-888">上传截图附件</span>
</div>
<div class="flex-items-center gap-10">
<el-checkbox label="同时发送通知" value="Value 1" />
<el-button type="primary" size="small" round>发送</el-button>
</div>
</div>
</div>
</section> </section>
<section v-if="ptIndex === 2"> <section v-if="ptIndex === 2">
<StackedAreaChart /> <Tab3 />
<div class="p-12 backitems round-12 mt-10 bg-ef"> </section>
<div class="flex-items-center justify-between"> <section v-if="ptIndex === 3">
<div> <Tab4 />
<div class="pl-12 relative fw-600 title">复盘区</div>
<div class="fs-12 color-888">分析视频在每个帧数的亮点与爆点，支持点击定位跳转播放</div>
</div>
<el-button type="primary" round size="small">+ 添加帧复盘</el-button>
</div>
<div v-for="(item, index) in 3" :key="index" class="bg-fff round-10 p-10 mt-10 flex gap-10">
<div class="w-48 h-48 round-10 bg-000" style="min-width: 48px;"></div>
<div class="flex-1 pt-4">
<div class="flex justify-between">
<div class="flex fs-12 gap-10">
<span class="px-8 py-2 round-4 tag">优质画面</span>
<span class="round-6 color-main px-8 py-2"
style="background: rgba(var(--main-color), .05);box-shadow: 0 0 0 1px rgba(var(--main-color), .1);">0分2秒54</span>
</div>
<span class="fs-12 color-888">2026-06-27 09:40</span>
</div>
<div class="fs-12 mt-4">
纯朴科技：<span class="fw-500 color-000">大萨达撒大花洒等哈还</span>
</div>
</div>
</div>
</div>
</section> </section>
</el-card> </el-card>
</div> </div>
<MaterialData />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import FileUpload from '@/components/Upload/index.vue' import Tab1 from './components/Tab1.vue';
import StackedAreaChart from './components/StackedAreaChart.vue'; import Tab2 from './components/Tab2.vue';
import Tab3 from './components/Tab3.vue';
import Tab4 from './components/Tab4.vue';
import MaterialData from './components/MaterialData.vue';
const ptIndex = ref(2) const ptIndex = ref(3)
const ptTabs = ref([ const ptTabs = ref([
{ label: '抖音样式', value: 0 }, { label: '抖音样式', value: 0 },
{ label: '抖音橱窗', value: 1 }, { label: '抖音橱窗', value: 1 },
...@@ -258,14 +99,6 @@ const jtTabs = ref([ ...@@ -258,14 +99,6 @@ const jtTabs = ref([
{ label: '9~12s 黄金Hook', desc: '直播间买一赠一' }, { label: '9~12s 黄金Hook', desc: '直播间买一赠一' },
{ label: '12~15s 黄金Hook', desc: '点击下方小黄车' }, { label: '12~15s 黄金Hook', desc: '点击下方小黄车' },
]) ])
const pzOptions = ref([
{ label: '全部批注', value: 0 },
{ label: '单帧批注', value: 1 },
{ label: '片段批注', value: 2 },
{ label: '字幕批注', value: 3 },
])
const mention = ref('')
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -284,49 +117,13 @@ const mention = ref('') ...@@ -284,49 +117,13 @@ const mention = ref('')
background-color: #f0f4f7; background-color: #f0f4f7;
} }
.bg-ef {
background-color: #f9fcfd;
}
.color-blue {
color: #148cfc;
font-weight: bold;
}
.phone { .phone {
width: 320px; width: 320px;
} }
.tag { :deep(.el-date-editor){
color: #148cfc; &.el-input__wrapper {
background-color: #f5faff; box-shadow: none;
box-shadow: 0 0 0 1px #63b4ff;
}
.title {
&::before {
content: '';
position: absolute;
left: 0;
top: 3px;
border-radius: 20px;
height: 16px;
width: 6px;
background-color: rgba(var(--main-color), 1);
}
}
.backitems {
border: 1px solid #eee;
&:hover {
border-color: rgba(var(--main-color), .4);
}
}
:deep(.myselect) {
.el-select__wrapper {
border-radius: 12px;
} }
} }
</style> </style>
\ No newline at end of file
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