Skip to content

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

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

parent 93b4c33f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 182 additions and 6 deletions
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