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

apps/web-vue/src/views/resource/clip/components/PermissionCheckDialog.vue

+<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

@@ -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>
+<style scoped lang="scss"></style>
\ No newline at end of file

apps/web-vue/src/views/resource/clip/detail.vue

@@ -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>
+</style>
\ No newline at end of file