Skip to content

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

操作记录、操作记录详情的弹窗布局和交互

parent 93b4c33f
Hide whitespace changes
Inline Side-by-side
Showing with 478 additions and 6 deletions
apps/web-vue/src/views/resource/clip/components/OperationRecordDialog.vue 0 → 100644
View file @ 82d241ef
<template>
<Dialog v-model="visible" bg-color="#fff" width="900">
<div class="bg-fff round-12 hidden">
<div class="h-64 px-24 flex-between dialog-header">
<div class="flex-items-center">
<span class="w-6 h-16 round-10 bg-main mr-10"></span>
<span class="fs-16 font-bold color-000">成片操作记录</span>
<span class="ml-12 px-10 py-4 round-12 color-main fs-12 font-bold record-count">共 {{ total }}
条记录</span>
</div>
</div>
<div class="px-24 py-18 flex-between filter-bar">
<el-input v-model="keyword" class="w-400" placeholder="搜索操作人或关键词..." clearable @input="handleSearch" />
<div class="flex-items-center">
<span class="color-666 mr-10">事项筛选:</span>
<el-select v-model="recordType" class="w-120" @change="handleSearch">
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
<div class="p-24">
<SeTable size="default" :dataList="pageList" :total="filteredList.length" :defaultPageSize="5"
@update:page="handlePageChange">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="time" label="操作时间" width="160" />
<el-table-column prop="operator" label="操作人" width="120">
<template #default="{ row }">
<span class="font-bold color-000">{{ row.operator }}</span>
</template>
</el-table-column>
<el-table-column prop="typeLabel" label="操作事项" width="130">
<template #default="{ row }">
<el-tag class="border-none" :class="row.tagClass">{{ row.typeLabel }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="summary" label="变更摘要" min-width="280" show-overflow-tooltip>
<template #default="{ row }">
<span class="color-888">修改后:</span>
<span class="ml-4 color-000">{{ row.summary }}</span>
</template>
</el-table-column>
<el-table-column prop="operate" label="操作" width="100" fixed="right">
<template #default="{ row }">
<el-button class="color-main detail-btn" size="small" @click="openDetail(row)">
详情
</el-button>
</template>
</el-table-column>
</SeTable>
</div>
<div class="px-24 py-14 flex justify-end dialog-footer">
<el-button @click="visible = false">关闭</el-button>
</div>
</div>
<Dialog v-model="detailVisible" bg-color="#fff" width="670">
<div class="bg-fff round-12 hidden">
<div class="h-64 px-24 flex-items-center dialog-header">
<span class="w-6 h-16 round-10 bg-main mr-10"></span>
<span class="fs-16 font-bold color-000">操作记录详情</span>
</div>
<div class="p-24">
<section class="p-16 round-10 detail-summary">
<div class="flex-between">
<div>
<div class="color-888">操作事项</div>
<div class="mt-4 font-bold color-main">{{ currentDetail?.typeLabel }}</div>
</div>
<div>
<div class="color-888">操作人</div>
<div class="mt-4 font-bold color-000">{{ currentDetail?.operator }}</div>
</div>
<div>
<div class="color-888">操作时间</div>
<div class="mt-4 color-000">{{ currentDetail?.time }}</div>
</div>
</div>
</section>
<div class="mt-22 flex-items-center font-bold color-000">
<span class="w-8 h-8 round bg-main mr-8"></span>
修改前后过程对比
</div>
<section class="mt-14 flex gap-12">
<div class="flex-1 p-14 round-10 compare-before">
<span class="px-10 py-4 round-6 font-bold before-label">修改前 (Before)</span>
<div class="mt-10 p-14 round-6 minh-90 compare-content">
初始脚本初剪版本，画面清晰度达标。
</div>
</div>
<div class="flex-1 p-14 round-10 compare-after">
<span class="px-10 py-4 round-6 font-bold after-label">修改后 (After)</span>
<div class="mt-10 p-14 round-6 minh-90 compare-content">
{{ currentDetail?.summary }}
</div>
</div>
</section>
</div>
<div class="px-24 py-14 flex justify-end dialog-footer">
<el-button @click="detailVisible = false">关闭</el-button>
</div>
</div>
</Dialog>
</Dialog>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
type RecordItem = {
id: number;
time: string;
operator: string;
type: string;
typeLabel: string;
summary: string;
tagClass: string;
};
const visible = defineModel<boolean>('visible', { required: true });
const keyword = ref('');
const recordType = ref('all');
const currentPage = ref(1);
const pageSize = ref(5);
const detailVisible = ref(false);
const currentDetail = ref<RecordItem>();
const typeOptions = [
{ label: '全部事项', value: 'all' },
{ label: '修改标题', value: 'title' },
{ label: '修改公共标签', value: 'publicTag' },
{ label: '修改个人标签', value: 'personalTag' },
{ label: '修改备注', value: 'remark' },
{ label: '修改状态', value: 'status' },
{ label: '系统生成', value: 'system' },
];
const recordList = ref<RecordItem[]>([
{
id: 1,
time: '2026-08-01 01:10:00',
operator: '张三 (编号)',
type: 'remark',
typeLabel: '修改备注',
summary: '该成片已在抖音大号首发，前3秒留存率达68%，建议继续投放...',
tagClass: 'tag-purple',
},
{
id: 2,
time: '2026-07-31 16:40:00',
operator: '王五 (剪辑)',
type: 'status',
typeLabel: '修改状态',
summary: '已上机',
tagClass: 'tag-blue',
},
{
id: 3,
time: '2026-07-31 14:05:30',
operator: '李四 (运营)',
type: 'publicTag',
typeLabel: '修改公共标签',
summary: '纯混剪，对比: 有对比, 白茶: 白茶产品3',
tagClass: 'tag-green',
},
{
id: 4,
time: '2026-07-30 10:20:12',
operator: '张三 (编号)',
type: 'title',
typeLabel: '修改标题',
summary: '0730-8836-水光针去黄测评-爆款对比.mp4',
tagClass: 'tag-orange',
},
{
id: 5,
time: '2026-07-30 09:15:00',
operator: '系统管理员',
type: 'system',
typeLabel: '系统生成',
summary: '成片渲染合成完成（分辨率1080P/60fps，时长00...',
tagClass: 'tag-gray',
},
]);
const total = computed(() => recordList.value.length);
const filteredList = computed(() => {
return recordList.value.filter((item) => {
const matchType = recordType.value === 'all' || item.type === recordType.value;
const searchValue = `${item.operator}${item.typeLabel}${item.summary}`;
const matchKeyword = !keyword.value || searchValue.includes(keyword.value);
return matchType && matchKeyword;
});
});
const pageList = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
return filteredList.value.slice(start, start + pageSize.value);
});
const handleSearch = () => {
currentPage.value = 1;
};
const handlePageChange = (page: number, size: number) => {
currentPage.value = page;
pageSize.value = size;
};
const openDetail = (row: RecordItem) => {
currentDetail.value = row;
detailVisible.value = true;
};
</script>
<style scoped lang="scss">
.dialog-header {
border-bottom: 1px solid #eee;
}
.filter-bar {
border-bottom: 1px solid #edf0f5;
background-color: #fbfcff;
}
.dialog-footer {
border-top: 1px solid #edf0f5;
}
.detail-summary {
border: 1px solid #dfe7f2;
background-color: #f8fbff;
}
.compare-before {
border: 1px solid #ffc8d4;
background-color: #fff8fa;
}
.compare-after {
border: 1px solid #a7f0d1;
background-color: #f6fffb;
}
.before-label {
background-color: #ffe8ee;
color: #f03b65;
}
.after-label {
background-color: #dff9ed;
color: #00a86b;
}
.compare-content {
border: 1px solid #e5eaf2;
background-color: #fff;
color: #2b3750;
}
.record-count,
.tag-purple {
background-color: rgba(var(--main-color), .1);
}
.detail-btn {
border: 1px solid rgba(var(--main-color), .18);
background-color: rgba(var(--main-color), .06);
}
.tag-purple {
color: rgba(var(--main-color), 1);
}
.tag-blue {
background-color: #eaf3ff;
color: #1677ff;
}
.tag-green {
background-color: #eafaf2;
color: #00a86b;
}
.tag-orange {
background-color: #fff6df;
color: #e59a00;
}
.tag-gray {
background-color: #eef2f6;
color: #607086;
}
</style>
apps/web-vue/src/views/resource/clip/components/PermissionCheckDialog.vue 0 → 100644
View file @ 82d241ef
<template>
<Dialog v-model="visible" bg-color="#fff" width="860">
<div class="permission-dialog bg-fff round-12 hidden">
<div class="h-66 px-24 flex-between permission-dialog__header">
<div class="flex-items-center">
<span class="w-6 h-16 round-10 bg-main mr-10"></span>
<span class="fs-16 font-bold color-000">视频权限检测</span>
</div>
</div>
<div class="p-24">
<section class="p-16 round-14 flex-between user-card">
<div class="flex-items-center minw-0">
<div class="w-48 h-48 round bg-main color-fff flex-center fs-24 mr-16">♙</div>
<div class="minw-0">
<div class="flex-items-center flex-wrap gap-10">
<span class="font-bold color-000 fs-16">邓客晨</span>
<el-select v-model="currentUserId" size="small" class="w-240">
<el-option
v-for="item in userOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button class="round-6 color-main border-main" size="small" @click="toggleUserSelect">
选择人员
</el-button>
</div>
<div class="fs-12 color-888 mt-4">xmsmdyc01 / 17199928737</div>
</div>
</div>
</section>
<section class="mt-20 p-12 round-10 flex info-panel">
<div class="flex-1">
<div class="fs-12 color-888">架构归属 (公司/部门/分组)</div>
<div class="font-bold color-000 mt-4">梦畅AIGC &gt; 信息流投放部 &gt; 视频号投流组</div>
</div>
<div class="w-200">
<div class="fs-12 color-888 mb-4">岗位角色</div>
<span class="inline-tag round-4 px-6 py-2 color-main font-bold">部门主管</span>
</div>
<div class="flex-1">
<div class="fs-12 color-888">可查观察分组</div>
<div class="font-bold color-000 mt-4">视频号投流组 + 摄影特组 + 剪辑一组</div>
</div>
</section>
<section class="mt-20 round-12 hidden permission-table">
<div class="permission-row table-head">
<div class="font-bold color-main">权限检测</div>
<div v-for="item in permissions" :key="item" class="text-center font-bold color-000">
{{ item }} <span class="color-green">◎</span>
</div>
</div>
<div v-for="row in rows" :key="row.name" class="permission-row">
<div class="font-bold color-000">
{{ row.name }}
<el-button class="ml-8 px-8 round-8 color-main detail-btn" size="small" @click="activeDetail = row.name">
明细
</el-button>
</div>
<div v-for="item in permissions" :key="item" class="text-center color-green fs-20">✓</div>
</div>
</section>
<div v-if="activeDetail" class="mt-12 px-12 py-8 round-8 fs-12 detail-tip">
当前查看：{{ activeDetail }}，该成员拥有查看、下载、复制到剪映、推送权限。
</div>
</div>
</div>
</Dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const visible = defineModel<boolean>('visible', { required: true });
const currentUserId = ref('u1');
const activeDetail = ref('');
const userOptions = [
{ label: '梦畅AIGC / 信息流投放部 / 视频号投流组', value: 'u1' },
{ label: '梦畅AIGC / 内容中心 / 剪辑一组', value: 'u2' },
];
const permissions = ['查看', '下载', '复制到剪映', '推送'];
const rows = [
{ name: '角色权限' },
{ name: '分类权限' },
{ name: '视频权限' },
];
const toggleUserSelect = () => {
currentUserId.value = currentUserId.value === 'u1' ? 'u2' : 'u1';
};
</script>
<style scoped lang="scss">
.permission-dialog__header {
border-bottom: 1px solid #edf0f5;
}
.user-card {
border: 1px solid rgba(var(--main-color), .12);
background-color: rgba(var(--main-color), .02);
}
.inline-tag {
background-color: rgba(var(--main-color), .08);
}
.border-main {
border: 1px solid rgba(var(--main-color), .4);
}
.info-panel {
border: 1px solid #dfe7f2;
background-color: #f8fbff;
}
.permission-table {
border: 1px solid #dfe7f2;
}
.permission-row {
display: grid;
grid-template-columns: 180px repeat(4, 1fr);
align-items: center;
min-height: 52px;
border-bottom: 1px solid #edf0f5;
> div {
height: 100%;
padding: 14px 16px;
background-color: rgba(0, 184, 122, .03);
}
> div:first-child {
background-color: rgba(var(--main-color), .03);
}
&:last-child {
border-bottom: none;
}
}
.table-head {
min-height: 40px;
> div {
padding-top: 10px;
padding-bottom: 10px;
}
}
.detail-btn {
border: 1px solid rgba(var(--main-color), .35);
background-color: #fff;
}
.color-green {
color: #00b779;
}
.detail-tip {
border: 1px solid rgba(var(--main-color), .12);
background-color: rgba(var(--main-color), .04);
color: #2b3750;
}
</style>
apps/web-vue/src/views/resource/clip/components/Tab1.vue
View file @ 82d241ef
......@@ -61,15 +61,19 @@
</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 @click="visibleOperationRecord = true">操作记录</el-button>
<el-button type="primary" plain>下载源码视频</el-button>
<el-button type="primary" plain>更多</el-button>
</div>
<OperationRecordDialog v-model:visible="visibleOperationRecord" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import OperationRecordDialog from './OperationRecordDialog.vue';
const visibleOperationRecord = ref(false)
</script>
<style scoped lang="scss"></style>
\ No newline at end of file
<style scoped lang="scss"></style>
apps/web-vue/src/views/resource/clip/detail.vue
View file @ 82d241ef
......@@ -51,7 +51,7 @@
</div>
</div>
</div>
<el-button type="primary" round>权限监测</el-button>
<el-button type="primary" round @click="visiblePermission = true">权限监测</el-button>
</div>
<div class="bg-47 flex gap-10 mt-20 round-4 p-4">
<div v-for="(item, index) in ptTabs" :key="index" @click="ptIndex = index"
......@@ -75,6 +75,7 @@
</div>
<MaterialData />
<CorrelationCard />
<PermissionCheckDialog v-model:visible="visiblePermission" />
</div>
</template>
......@@ -86,7 +87,9 @@ import Tab3 from './components/Tab3.vue';
import Tab4 from './components/Tab4.vue';
import MaterialData from './components/MaterialData.vue';
import CorrelationCard from './components/CorrelationCard.vue';
import PermissionCheckDialog from './components/PermissionCheckDialog.vue';
const visiblePermission = ref(false)
const ptIndex = ref(3)
const ptTabs = ref([
{ label: '抖音样式', value: 0 },
......@@ -128,4 +131,4 @@ const jtTabs = ref([
box-shadow: none;
}
}
</style>
\ No newline at end of file
</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