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

apps/web-vue/public/styles/common.scss

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

@@ -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/CorrelationCardEchart.vue

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

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

 <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

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

@@ -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,