refactor(quality): 重构质检详情和结果组件以提升代码复用性

将质检详情和质检结果的逻辑提取为独立组件，并在多个视图中复用，减少代码冗余，提高可维护性

src/assets/style.css

@@ -1089,6 +1089,10 @@ video {
   width: 400px;
 }
 
+.w-\[600px\] {
+  width: 600px;
+}
+
 .min-w-0 {
   min-width: 0px;
 }

src/components/quality/detail.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="flex-1 bg-white">
+        <div class="mb-6">
+            <h2 class="text-xl font-medium">质检详情</h2>
+            <div class="mt-4 grid grid-cols-4 gap-4 text-sm text-gray-600">
+                <div>质检ID: {{ inspectionId }}</div>
+                <div>外呼号码: {{ phoneNumber }}</div>
+                <div>外呼时间: {{ callTime }}</div>
+                <div>坐席: {{ agent }}</div>
+            </div>
+        </div>
+        <div class="space-y-6 overflow-y-auto max-h-[calc(100vh-280px)]  px-4">
+            <template v-for="(msg, index) in messages" :key="index">
+                <div :class="['flex', msg.type === 'agent' ? 'justify-end' : '']">
+                    <div
+                        :class="['flex items-start gap-3 max-w-[80%]', msg.type === 'agent' ? 'flex-row-reverse' : '']">
+                        <div class="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0 overflow-hidden">
+                            <el-icon class="w-full h-full p-1.5 text-gray-500">
+                                <User v-if="msg.type === 'customer'" />
+                                <Service v-else />
+                            </el-icon>
+                        </div>
+                        <div :class="['rounded-lg relative group']">
+                            <div :class="['text-sm mb-1', msg.type === 'agent' ? 'text-right' : '']">
+                                {{ msg.type === 'agent' ? '坐席' : '客户' }} ({{ msg.time
+                                }})
+                            </div>
+                            <div
+                                :class="['p-3 rounded-lg relative group', msg.type === 'agent' ? 'bg-blue-500 text-white' : 'bg-gray-100']">
+                                <div>{{ msg.content }}</div>
+
+                            </div>
+                            <div v-if="msg.warning" class="mt-2 text-xs text-red-500">{{ msg.warning }}
+                                <div v-if="msg.type === 'agent' && msg.warning"
+                                    class="hidden group-hover:flex items-center justify-center absolute top-0 -left-[55px] -translate-x-1/2 !p-1 ">
+                                    <el-button @click.stop="handleAppeal">
+                                        <el-icon>
+                                            <CirclePlus />
+                                        </el-icon>
+                                        加入申诉
+                                    </el-button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+        <div class="mt-6 border-t pt-4">
+            <audio-player></audio-player>
+            <div class="mt-4 flex items-center text-sm text-gray-500">
+                <span class="mr-4">准确率: {{ accuracy }}%</span>
+                <span>识别率: {{ recognition }}%</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import audioPlayer from '../audio/audioPlayer.vue';
+import { User, Service, VideoPlay, VideoPause, Close } from '@element-plus/icons-vue';
+const inspectionId = '893821';
+const phoneNumber = '137 8651 5262';
+const callTime = '2024-12-09 15:30';
+const agent = '李世海';
+const messages = ref([
+    {
+        type: 'agent',
+        time: '00:06',
+        content: '你好，欢迎拨打......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    },
+    {
+        type: 'customer',
+        time: '00:16',
+        content: '你好，我想咨询一下......'
+    },
+    {
+        type: 'agent',
+        time: '00:59',
+        content: '好的，很高兴为您解答。请问您想具体了解哪方面的......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    },
+    {
+        type: 'agent',
+        time: '00:59',
+        content: '好的，很高兴为您解答。请问您想具体了解哪方面的......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    },
+    {
+        type: 'agent',
+        time: '00:59',
+        content: '好的，很高兴为您解答。请问您想具体了解哪方面的......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    },
+    {
+        type: 'agent',
+        time: '00:59',
+        content: '好的，很高兴为您解答。请问您想具体了解哪方面的......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    },
+    {
+        type: 'agent',
+        time: '00:59',
+        content: '好的，很高兴为您解答。请问您想具体了解哪方面的......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    }
+]);
+
+const accuracy = ref(95.3);
+const recognition = ref(98.6);
+
+const handleAppeal = () => {
+    // 处理申诉逻辑
+};
+</script>
+<style scoped>
+.el-slider {
+    --el-slider-button-size: 16px;
+    --el-slider-height: 6px;
+}
+
+:deep(.el-table) {
+    --el-table-border-color: #e5e7eb;
+    --el-table-header-bg-color: #f9fafb;
+    --el-table-row-hover-bg-color: #f3f4f6;
+}
+
+:deep(.el-table th) {
+    font-weight: 500;
+    color: #374151;
+}
+
+:deep(.el-table td) {
+    color: #6b7280;
+}
+
+:deep(.el-button) {
+    font-weight: 500;
+}
+</style>

src/components/quality/result.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="bg-white rounded-lg mb-6">
+        <div v-if="showScore" class="flex justify-between items-center mb-6">
+            <h3 class="text-lg font-medium">AI质检</h3>
+            <div class="flex items-center gap-2">
+                <span class="text-green-500">合格</span>
+                <span class="text-blue-500 text-xl font-medium">{{ score }}分</span>
+            </div>
+        </div>
+        <div class="space-y-6 overflow-y-auto max-h-[calc(100vh-280px)]">
+            <div>
+                <h4 class="text-base font-medium mb-4">质检概况</h4>
+                <div class="grid grid-cols-3 gap-4">
+                    <div class="text-center p-3 bg-gray-50 rounded">
+                        <div class="text-sm text-gray-500">平均语速</div>
+                        <div class="mt-1 font-medium">{{ stats.speed }}字/分钟</div>
+                    </div>
+                    <div class="text-center p-3 bg-gray-50 rounded">
+                        <div class="text-sm text-gray-500">平均分值</div>
+                        <div class="mt-1 font-medium">{{ stats.avgScore }}分</div>
+                    </div>
+                    <div class="text-center p-3 bg-gray-50 rounded">
+                        <div class="text-sm text-gray-500">静音时长</div>
+                        <div class="mt-1 font-medium">{{ stats.silenceTime }}s</div>
+                    </div>
+                </div>
+            </div>
+            <div v-if="standardShowType === 'list'">
+                <h4 class="text-base font-medium mb-4">评分标准</h4>
+                <el-table :data="scoreStandards" border stripe>
+                    <el-table-column prop="item" label="命中项" />
+                    <el-table-column prop="status" label="是否致命" />
+                    <el-table-column prop="score" label="分数">
+                        <template #default="scope">
+                            <span :class="scope.row.score < 0 ? 'text-red-500' : ''">{{ scope.row.score
+                                }}</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div v-if="standardShowType === 'text'" class="mb-8">
+                <h3 class="text-gray-900 font-medium mb-4">评分标准</h3>
+                <div class="flex gap-8">
+                    <div class="flex items-center">
+                        <el-tooltip class="box-item" effect="dark" content="语速不能超过150字/分钟"
+                            placement="top-start">
+                            <el-icon class="mr-2 text-gray-400">
+                                <Warning />
+                            </el-icon>
+                        </el-tooltip>
+
+                        <span>语速不规范 (-5分)</span>
+                    </div>
+                    <div class="flex items-center">
+                        <el-tooltip class="box-item" effect="dark" content="语速不能超过150字/分钟"
+                            placement="top-start">
+                            <el-icon class="mr-2 text-gray-400">
+                                <Warning />
+                            </el-icon>
+                        </el-tooltip>
+                        <span>音量不规范 (-5分)</span>
+                    </div>
+                    <div class="flex items-center">
+                        <el-tooltip class="box-item" effect="dark" content="语速不能超过150字/分钟"
+                            placement="top-start">
+                            <el-icon class="mr-2 text-gray-400">
+                                <Warning />
+                            </el-icon>
+                        </el-tooltip>
+                        <span>反问客户 (-5分)</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, defineProps } from 'vue';
+// import audioPlayer from '../../components/audio/audioPlayer.vue';
+import { User, Service, VideoPlay, VideoPause, Close } from '@element-plus/icons-vue';
+
+const props = defineProps({
+    showScore: {
+        type: Boolean,
+        default: false
+    },
+    standardShowType: { // text 文本展示，list 列表展示
+        type: String,
+        default: 'list'
+    },
+});
+
+
+const score = ref(90);
+const stats = ref({
+    speed: 150,
+    avgScore: 60,
+    silenceTime: 20
+});
+const scoreStandards = ref([
+    { item: '语速不规范', status: '不致命', score: -5 },
+    { item: '音量不规范', status: '不致命', score: -5 },
+    { item: '反问客户', status: '不致命', score: -5 }
+]);
+</script>
+<style scoped>
+.el-slider {
+    --el-slider-button-size: 16px;
+    --el-slider-height: 6px;
+}
+
+:deep(.el-table) {
+    --el-table-border-color: #e5e7eb;
+    --el-table-header-bg-color: #f9fafb;
+    --el-table-row-hover-bg-color: #f3f4f6;
+}
+
+:deep(.el-table th) {
+    font-weight: 500;
+    color: #374151;
+}
+
+:deep(.el-table td) {
+    color: #6b7280;
+}
+
+:deep(.el-button) {
+    font-weight: 500;
+}
+</style>

src/views/appeals/audit.vue

@@ -0,0 +1,182 @@
+<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
+<template>
+    <div class="app-container bg-gray-50">
+        <div class="mx-auto">
+            <div class="flex gap-6">
+                <!-- 左侧对话区域 -->
+                <div class="flex-1 bg-white rounded-lg shadow-sm p-6">
+                    <qualityDetail/>
+                </div>
+                <!-- 右侧质检信息 -->
+                <div class="w-[600px] bg-white rounded-lg shadow-sm p-6">
+                    <div class="flex justify-between items-center mb-6">
+                        <h3 class="text-lg font-medium">AI质检</h3>
+                        <div class="flex items-center gap-2">
+                            <span class="text-green-500">合格</span>
+                            <span class="text-blue-500 text-xl font-medium">{{ score }}分</span>
+                        </div>
+                    </div>
+                    <div class="space-y-6 overflow-y-auto max-h-[calc(100vh-280px)]">
+                        <div>
+                            <qualityResult/>
+                        </div>
+                        <div>
+                            <h4 class="text-base font-medium mb-4">申诉列表</h4>
+                            <div class="space-y-3">
+                                <div v-for="(appeal, index) in appeals" :key="index"
+                                    class="p-3 bg-gray-50 rounded relative group">
+                                    <div class="flex justify-between items-center">
+                                        <div class="font-medium">申诉片段 {{ index + 1 }}</div>
+                                        <div class="text-sm text-gray-500">{{ appeal.time }}</div>
+                                    </div>
+                                    <div class="mt-2 text-sm">{{ appeal.content }}</div>
+                                    <div class="mt-1 text-xs text-red-500">{{ appeal.warning }}</div>
+                                    <div
+                                        class="hidden group-hover:block absolute -bottom-1 right-1 !p-1 !rounded-tl-none !rounded-br-none">
+                                        <el-icon class="text-xs " @click.stop="removeAppeal(index)"
+                                            style="color: #ff4d4f;">
+                                            <Delete />
+                                        </el-icon>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 右侧审核信息
+                <div class="w-[600px] bg-white rounded-lg shadow-sm p-6">
+                    <div class="flex justify-between items-center mb-6">
+                        <h3 class="text-lg font-medium">AI质检</h3>
+                        <div class="flex items-center gap-2">
+                            <span class="text-green-500">合格</span>
+                            <span class="text-blue-500 text-xl font-medium">{{ score }}分</span>
+                        </div>
+                    </div>
+                </div> -->
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+// import audioPlayer from '../../components/audio/audioPlayer.vue';
+import qualityDetail from '../../components/quality/detail.vue';
+import qualityResult from '../../components/quality/result.vue';
+import { User, Service, VideoPlay, VideoPause, Close } from '@element-plus/icons-vue';
+const inspectionId = '893821';
+const phoneNumber = '137 8651 5262';
+const callTime = '2024-12-09 15:30';
+const agent = '李世海';
+const messages = ref([
+    {
+        type: 'agent',
+        time: '00:06',
+        content: '你好，欢迎拨打......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    },
+    {
+        type: 'customer',
+        time: '00:16',
+        content: '你好，我想咨询一下......'
+    },
+    {
+        type: 'agent',
+        time: '00:59',
+        content: '好的，很高兴为您解答。请问您想具体了解哪方面的......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    },
+    {
+        type: 'agent',
+        time: '00:59',
+        content: '好的，很高兴为您解答。请问您想具体了解哪方面的......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    },
+    {
+        type: 'agent',
+        time: '00:59',
+        content: '好的，很高兴为您解答。请问您想具体了解哪方面的......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    },
+    {
+        type: 'agent',
+        time: '00:59',
+        content: '好的，很高兴为您解答。请问您想具体了解哪方面的......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    },
+    {
+        type: 'agent',
+        time: '00:59',
+        content: '好的，很高兴为您解答。请问您想具体了解哪方面的......',
+        warning: '语速 160字/分钟 命中规则条件:语速不符合标准'
+    }
+]);
+const isPlaying = ref(false);
+const progress = ref(0);
+const currentTime = ref(0);
+const totalTime = ref(139);
+const accuracy = ref(95.3);
+const recognition = ref(98.6);
+const score = ref(90);
+const stats = ref({
+    speed: 150,
+    avgScore: 60,
+    silenceTime: 20
+});
+const scoreStandards = ref([
+    { item: '语速不规范', status: '不致命', score: -5 },
+    { item: '音量不规范', status: '不致命', score: -5 },
+    { item: '反问客户', status: '不致命', score: -5 }
+]);
+const appeals = ref([
+    {
+        time: '坐席(00:06)',
+        content: '你好，欢迎拨打......',
+        warning: '命中规则条件：语速不符合标准'
+    },
+    {
+        time: '坐席(00:06)',
+        content: '你好，欢迎拨打......',
+        warning: '命中规则条件：语速不符合标准'
+    }
+]);
+const togglePlay = () => {
+    isPlaying.value = !isPlaying.value;
+};
+const formatTime = (seconds: number) => {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
+};
+const handleAppeal = () => {
+    // 处理申诉逻辑
+};
+const removeAppeal = (index: number) => {
+    appeals.value.splice(index, 1);
+};
+</script>
+<style scoped>
+.el-slider {
+    --el-slider-button-size: 16px;
+    --el-slider-height: 6px;
+}
+
+:deep(.el-table) {
+    --el-table-border-color: #e5e7eb;
+    --el-table-header-bg-color: #f9fafb;
+    --el-table-row-hover-bg-color: #f3f4f6;
+}
+
+:deep(.el-table th) {
+    font-weight: 500;
+    color: #374151;
+}
+
+:deep(.el-table td) {
+    color: #6b7280;
+}
+
+:deep(.el-button) {
+    font-weight: 500;
+}
+</style>

src/views/quality/appeal.vue

@@ -5,62 +5,10 @@
             <div class="flex gap-6">
                 <!-- 左侧对话区域 -->
                 <div class="flex-1 bg-white rounded-lg shadow-sm p-6">
-                    <div class="mb-6">
-                        <h2 class="text-xl font-medium">质检详情</h2>
-                        <div class="mt-4 grid grid-cols-4 gap-4 text-sm text-gray-600">
-                            <div>质检ID: {{ inspectionId }}</div>
-                            <div>外呼号码: {{ phoneNumber }}</div>
-                            <div>外呼时间: {{ callTime }}</div>
-                            <div>坐席: {{ agent }}</div>
-                        </div>
-                    </div>
-                    <div class="space-y-6 overflow-y-auto max-h-[calc(100vh-280px)]  px-4">
-                        <template v-for="(msg, index) in messages" :key="index">
-                            <div :class="['flex', msg.type === 'agent' ? 'justify-end' : '']">
-                                <div
-                                    :class="['flex items-start gap-3 max-w-[80%]', msg.type === 'agent' ? 'flex-row-reverse' : '']">
-                                    <div class="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0 overflow-hidden">
-                                        <el-icon class="w-full h-full p-1.5 text-gray-500">
-                                            <User v-if="msg.type === 'customer'" />
-                                            <Service v-else />
-                                        </el-icon>
-                                    </div>
-                                    <div
-                                        :class="['rounded-lg relative group']">
-                                        <div :class="['text-sm mb-1', msg.type === 'agent' ? 'text-right' : '']">
-                                            {{ msg.type === 'agent' ? '坐席' : '客户' }} ({{ msg.time
-                                            }})
-                                        </div>
-                                        <div :class="['p-3 rounded-lg relative group', msg.type === 'agent' ? 'bg-blue-500 text-white' : 'bg-gray-100']">
-                                            <div>{{ msg.content }}</div>
-                                           
-                                            </div>
-                                            <div v-if="msg.warning" class="mt-2 text-xs text-red-500">{{ msg.warning }}
-                                            <div v-if="msg.type === 'agent' && msg.warning"
-                                                class="hidden group-hover:flex items-center justify-center absolute top-0 -left-[55px] -translate-x-1/2 !p-1 ">
-                                                <el-button @click.stop="handleAppeal">
-                                                    <el-icon>
-                                                        <CirclePlus />
-                                                    </el-icon>
-                                                    加入申诉
-                                                </el-button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                    <div class="mt-6 border-t pt-4">
-                        <audio-player></audio-player>
-                        <div class="mt-4 flex items-center text-sm text-gray-500">
-                            <span class="mr-4">准确率: {{ accuracy }}%</span>
-                            <span>识别率: {{ recognition }}%</span>
-                        </div>
-                    </div>
+                    <qualityDetail/>
                 </div>
                 <!-- 右侧质检信息 -->
-                <div class="w-[400px] bg-white rounded-lg shadow-sm p-6">
+                <div class="w-[600px] bg-white rounded-lg shadow-sm p-6">
                     <div class="flex justify-between items-center mb-6">
                         <h3 class="text-lg font-medium">AI质检</h3>
                         <div class="flex items-center gap-2">
@@ -70,34 +18,7 @@
                     </div>
                     <div class="space-y-6 overflow-y-auto max-h-[calc(100vh-280px)]">
                         <div>
-                            <h4 class="text-base font-medium mb-4">质检概况</h4>
-                            <div class="grid grid-cols-3 gap-4">
-                                <div class="text-center p-3 bg-gray-50 rounded">
-                                    <div class="text-sm text-gray-500">平均语速</div>
-                                    <div class="mt-1 font-medium">{{ stats.speed }}字/分钟</div>
-                                </div>
-                                <div class="text-center p-3 bg-gray-50 rounded">
-                                    <div class="text-sm text-gray-500">平均分值</div>
-                                    <div class="mt-1 font-medium">{{ stats.avgScore }}分</div>
-                                </div>
-                                <div class="text-center p-3 bg-gray-50 rounded">
-                                    <div class="text-sm text-gray-500">静音时长</div>
-                                    <div class="mt-1 font-medium">{{ stats.silenceTime }}s</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <h4 class="text-base font-medium mb-4">评分标准</h4>
-                            <el-table :data="scoreStandards" border stripe>
-                                <el-table-column prop="item" label="命中项" />
-                                <el-table-column prop="status" label="是否致命" />
-                                <el-table-column prop="score" label="分数">
-                                    <template #default="scope">
-                                        <span :class="scope.row.score < 0 ? 'text-red-500' : ''">{{ scope.row.score
-                                            }}</span>
-                                    </template>
-                                </el-table-column>
-                            </el-table>
+                            <qualityResult/>
                         </div>
                         <div>
                             <h4 class="text-base font-medium mb-4">申诉列表</h4>
@@ -138,7 +59,9 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import audioPlayer from '../../components/audio/audioPlayer.vue';
+// import audioPlayer from '../../components/audio/audioPlayer.vue';
+import qualityDetail from '../../components/quality/detail.vue';
+import qualityResult from '../../components/quality/result.vue';
 import { User, Service, VideoPlay, VideoPause, Close } from '@element-plus/icons-vue';
 const inspectionId = '893821';
 const phoneNumber = '137 8651 5262';

src/views/quality/detail.vue

@@ -27,84 +27,11 @@
   
         <!-- AI质检结果 -->
         <div class="bg-white rounded-lg p-6 mb-6 shadow-sm">
-          <div class="flex justify-between items-center mb-8">
-            <h2 class="text-xl font-medium">AI质检</h2>
-            <div class="flex items-center">
-              <span class="text-green-600 mr-4">合格</span>
-              <span class="text-blue-600 text-xl font-medium">90分</span>
-            </div>
-          </div>
-  
-          <div class="mb-8">
-            <h3 class="text-gray-900 font-medium mb-4">质检概况</h3>
-            <div class="grid grid-cols-5 gap-6">
-              <div class="text-center p-4 bg-gray-50 rounded-lg">
-                <div class="text-gray-600 mb-2">平均语速</div>
-                <div class="text-gray-900">150字/分钟</div>
-              </div>
-              <div class="text-center p-4 bg-gray-50 rounded-lg">
-                <div class="text-gray-600 mb-2">平均分贝</div>
-                <div class="text-gray-900">60分贝</div>
-              </div>
-              <div class="text-center p-4 bg-gray-50 rounded-lg">
-                <div class="text-gray-600 mb-2">静音时长</div>
-                <div class="text-gray-900">20s</div>
-              </div>
-              <div class="text-center p-4 bg-gray-50 rounded-lg">
-                <div class="text-gray-600 mb-2">客户情绪</div>
-                <div class="text-gray-900">中立</div>
-              </div>
-              <div class="text-center p-4 bg-gray-50 rounded-lg">
-                <div class="text-gray-600 mb-2">客服情绪</div>
-                <div class="text-gray-900">中立</div>
-              </div>
-            </div>
-          </div>
-  
-          <div class="mb-8">
-            <h3 class="text-gray-900 font-medium mb-4">评分标准</h3>
-            <div class="flex gap-8">
-              <div class="flex items-center">
-                <el-icon class="mr-2 text-gray-400"><Warning /></el-icon>
-                <span>语速不规范 (-5分)</span>
-              </div>
-              <div class="flex items-center">
-                <el-icon class="mr-2 text-gray-400"><Warning /></el-icon>
-                <span>音量不规范 (-5分)</span>
-              </div>
-              <div class="flex items-center">
-                <el-icon class="mr-2 text-gray-400"><Warning /></el-icon>
-                <span>反问客户 (-5分)</span>
-              </div>
-            </div>
-          </div>
-  
+          <!-- AI质检结果 -->
+          <qualityResult :showScore="true" :standardShowType="'text'"/>
           <!-- 通话录音 -->
           <audio-player ></audio-player>
-          <!-- <div>
-            <h3 class="text-gray-900 font-medium mb-4">通话录音</h3>
-            <div class="bg-gray-50 p-4 rounded-lg">
-              <div class="flex items-center gap-4">
-                <button class="flex items-center !rounded-button whitespace-nowrap">
-                  <el-icon class="mr-2"><Microphone /></el-icon>
-                  音量
-                </button>
-                <div class="flex-1 h-2 bg-gray-200 rounded-full">
-                  <div class="w-3/4 h-full bg-blue-500 rounded-full"></div>
-                </div>
-                <span class="text-gray-600">02:19</span>
-                <button class="text-blue-600 !rounded-button whitespace-nowrap">
-                  <el-icon><Mute /></el-icon>
-                </button>
-                <button class="text-blue-600 !rounded-button whitespace-nowrap">
-                  <el-icon><VideoPlay /></el-icon>
-                </button>
-                <button class="text-blue-600 !rounded-button whitespace-nowrap">
-                  <el-icon><Refresh /></el-icon>
-                </button>
-              </div>
-            </div>
-          </div> -->
+          
         </div>
   
         <!-- 申诉处理 -->
@@ -147,6 +74,7 @@
   import { ref } from 'vue';
   import { ArrowLeft, Warning, Microphone, Mute, VideoPlay, Refresh, Timer } from '@element-plus/icons-vue';
   import audioPlayer from '../../components/audio/audioPlayer.vue';
+  import qualityResult from '../../components/quality/result.vue';
   </script>
   
   <style scoped>