feat(quality): 新增质检模块相关配置和组件

新增质检模块的配置文件（modal.config.js、search.config.js、content.config.js）和组件（audioPlayer.vue、index.vue、detail.vue、appeal.vue），并更新样式文件以支持新功能。这些更改为质检模块提供了基础配置和交互组件，支持质检列表、详情查看、申诉处理等功能。

src/assets/style.css

@@ -676,6 +676,94 @@ video {
   bottom: 0.25rem;
 }
 
+.-right-0 {
+  right: -0px;
+}
+
+.-right-1 {
+  right: -0.25rem;
+}
+
+.-right-3 {
+  right: -0.75rem;
+}
+
+.-top-0 {
+  top: -0px;
+}
+
+.-top-1 {
+  top: -0.25rem;
+}
+
+.-top-3 {
+  top: -0.75rem;
+}
+
+.bottom-8 {
+  bottom: 2rem;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.-left-3 {
+  left: -0.75rem;
+}
+
+.-top-6 {
+  top: -1.5rem;
+}
+
+.-top-10 {
+  top: -2.5rem;
+}
+
+.-left-8 {
+  left: -2rem;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.-left-10 {
+  left: -2.5rem;
+}
+
+.-left-12 {
+  left: -3rem;
+}
+
+.-left-\[200px\] {
+  left: -200px;
+}
+
+.-left-\[0px\] {
+  left: -0px;
+}
+
+.-left-\[15px\] {
+  left: -15px;
+}
+
+.-left-\[30px\] {
+  left: -30px;
+}
+
+.-left-\[40px\] {
+  left: -40px;
+}
+
+.-left-\[50px\] {
+  left: -50px;
+}
+
+.-left-\[55px\] {
+  left: -55px;
+}
+
 .-z-0 {
   z-index: 0;
 }
@@ -873,6 +961,22 @@ video {
   height: 100%;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.max-h-\[calc\(100vh-280px\)\] {
+  max-height: calc(100vh - 280px);
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -957,10 +1061,34 @@ video {
   width: 15rem;
 }
 
+.w-3\/4 {
+  width: 75%;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-\[400px\] {
+  width: 400px;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
 
+.max-w-7xl {
+  max-width: 80rem;
+}
+
+.max-w-\[80\%\] {
+  max-width: 80%;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -982,6 +1110,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1023,6 +1156,10 @@ video {
   grid-template-columns: repeat(8, minmax(0, 1fr));
 }
 
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1031,6 +1168,10 @@ video {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1079,6 +1220,10 @@ video {
   gap: 15px;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1164,6 +1309,14 @@ video {
   border-top-right-radius: 0.5rem;
 }
 
+.\!rounded-br-none {
+  border-bottom-right-radius: 0px !important;
+}
+
+.\!rounded-tl-none {
+  border-top-left-radius: 0px !important;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1245,6 +1398,16 @@ video {
   background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
 }
 
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -1311,6 +1474,14 @@ video {
   padding: 0.25rem;
 }
 
+.\!p-1 {
+  padding: 0.25rem !important;
+}
+
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1371,6 +1542,14 @@ video {
   padding-top: 1.75rem;
 }
 
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1541,6 +1720,16 @@ video {
   color: rgb(245 158 11 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -1681,6 +1870,11 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-blue-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+}
+
 .hover\:shadow-xl:hover {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -1697,6 +1891,14 @@ video {
   outline-offset: 2px;
 }
 
+.group:hover .group-hover\:block {
+  display: block;
+}
+
+.group:hover .group-hover\:flex {
+  display: flex;
+}
+
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }

src/components/audio/audioPlayer.vue

@@ -0,0 +1,30 @@
+<template>
+    <!-- 通话录音 -->
+    <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>
+</template>
+<script setup lang="ts">
+import { Microphone, Mute, VideoPlay, Refresh } from '@element-plus/icons-vue'
+</script>

src/views/quality/appeal.vue

@@ -0,0 +1,259 @@
+<!-- 代码已包含 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">
+                    <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="['p-3 rounded-lg relative group', msg.type === 'agent' ? 'bg-blue-500 text-white' : 'bg-gray-100']">
+                                        <div class="text-sm mb-1">{{ msg.type === 'agent' ? '坐席' : '客户' }} ({{ msg.time
+                                            }})</div>
+                                        <div>{{ msg.content }}</div>
+                                        <div v-if="msg.warning" class="mt-2 text-xs text-red-500">{{ msg.warning }}
+                                        </div>
+                                        <el-button v-show="false"
+                                            class="group-hover:block absolute -top-3 -right-3 !p-1 !rounded-full bg-red-500 text-white shadow-md"
+                                            @click.stop="handleAppeal">
+                                            <el-icon class="text-xs">
+                                                <Close />
+                                            </el-icon>
+                                        </el-button>
+                                        <div v-if="msg.type === 'agent'" 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>
+                        </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>
+                <!-- 右侧质检信息 -->
+                <div class="w-[400px] 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>
+                            <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>
+                        </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>
+                                    <el-button
+                                        class="hidden group-hover:block absolute -top-0 -right-0 !p-1 !rounded-tl-none !rounded-br-none bg-red-500 text-white shadow-md"
+                                        @click.stop="removeAppeal(index)">
+                                        <el-icon class="text-xs">
+                                            <Close />
+                                        </el-icon>
+                                    </el-button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="fixed bottom-8 right-8">
+                        <el-button type="primary" class="!rounded-button" size="large" @click="handleAppeal">
+                            申诉
+                            <div
+                                class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-xs text-white flex items-center justify-center">
+                                2
+                            </div>
+                        </el-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import audioPlayer from '../../components/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 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/config/content.config.js

@@ -0,0 +1,19 @@
+export const contentTableConfig = {
+    title: '质检列表',
+    contentTableHeader: true,
+    propList: [
+        { prop: 'mobile', label: '质检 ID', width: '100', align: 'center', fixed: 'left' },
+        { prop: 'name', label: '外呼号码', width: '150' },
+        { prop: 'notes', label: '外呼日期', width: '170' },
+        { prop: 'notes', label: '致命项', width: '200' },
+        { prop: 'notes', label: '质检得分', width: '150' },
+        { prop: 'notes', label: '坐席名称', width: '150' },
+        { prop: 'notes', label: '录音', width: '150' },
+        { prop: 'notes', label: 'AI 质检结果', width: '300' },
+        { prop: 'notes', label: 'AI 人工复检时间', width: '170' },
+        { prop: 'notes', label: '复检备注', width: '300' },
+        { label: '操作', minWidth: '100', slotName: 'handler', fixed: 'right' }
+    ],
+    showIndexColumn: false,
+    showSelectColumn: false,
+}

src/views/quality/config/modal.config.js

@@ -0,0 +1,29 @@
+export const modalConfig = {
+  formItems: [
+    {
+      field: 'mobile',
+      type: 'input',
+      label: '电话',
+      required : true ,
+      placeholder: '请输入电话',
+    },
+    {
+      field: 'name',
+      type: 'input',
+      label: '名称',
+      required : true ,
+      placeholder: '请输入名称',
+
+    },
+    {
+      field: 'notes',
+      type: 'input',
+      label: '备注',
+      placeholder: '请输入备注',
+
+    },
+    
+  ],
+  colLayout: { span: 24 },
+  itemStyle: {}
+}

src/views/quality/config/search.config.js

@@ -0,0 +1,31 @@
+export const searchFormConfig = {
+  labelWidth: '120px',
+  itemStyle: {
+    padding: '0px'
+  },
+  colLayout: {
+    span: 6
+  },
+  formItems: [
+    {
+      field: 'mobile',
+      type: 'input',
+      label: '电话',
+      placeholder: '请输入电话',
+    },
+    {
+      field: 'name',
+      type: 'input',
+      label: '名称',
+      placeholder: '请输入名称',
+
+    },
+    {
+      field: 'notes',
+      type: 'input',
+      label: '备注',
+      placeholder: '请输入备注',
+
+    },
+  ]
+}

src/views/quality/detail.vue

@@ -0,0 +1,158 @@
+<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
+
+<template>
+    <div class="app-container bg-gray-50">
+      <div class="mx-auto">
+        <!-- 基础信息 -->
+        <div class="bg-white rounded-lg p-6 mb-6 shadow-sm">
+          <div class="grid grid-cols-4 gap-6 text-gray-600">
+            <div>
+              <span class="mr-2">质检ID：</span>
+              <span class="text-gray-900">892821</span>
+            </div>
+            <div>
+              <span class="mr-2">外呼号码：</span>
+              <span class="text-gray-900">137 8651 5262</span>
+            </div>
+            <div>
+              <span class="mr-2">外呼时间：</span>
+              <span class="text-gray-900">2024-12-09 15:30</span>
+            </div>
+            <div>
+              <span class="mr-2">坐席：</span>
+              <span class="text-gray-900">李世海</span>
+            </div>
+          </div>
+        </div>
+  
+        <!-- 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>
+  
+          <!-- 通话录音 -->
+          <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>
+  
+        <!-- 申诉处理 -->
+        <div class="bg-white rounded-lg p-6 shadow-sm">
+          <h2 class="text-xl font-medium mb-6">申诉处理（一）</h2>
+          <div class="border-b pb-6 mb-6">
+            <div class="flex justify-between mb-4">
+              <h3 class="text-gray-900 font-medium">申诉理由</h3>
+              <span class="text-green-600">已审核</span>
+            </div>
+            <p class="text-gray-600 mb-4">关于未按标准流程进行开场白的扣分，实际上我已经按照最新的服务指南进行了标准开场白。另外，所谓的口语化表达是在与客户建立亲和关系的必要交流方式，建议重新审核。</p>
+            <div class="text-gray-500">
+              <el-icon class="mr-2"><Timer /></el-icon>
+              提交时间：2025-01-20 15:45:30
+            </div>
+          </div>
+  
+          <div>
+            <div class="flex items-start gap-4 mb-4">
+              <el-avatar :size="40" src="https://ai-public.mastergo.com/ai/img_res/2712597425b269c796db47f887c21853.jpg" />
+              <div class="flex-1">
+                <div class="flex justify-between mb-2">
+                  <span class="font-medium">马文青</span>
+                  <span class="text-gray-500">质检员</span>
+                </div>
+                <p class="text-gray-600 mb-2">经过重新审核，同意调整"未按标准流程进行开场白"的扣分，但关于口语化表达的问题仍需改进。最终评分调整为95分。</p>
+                <div class="text-gray-500">
+                  <el-icon class="mr-2"><Timer /></el-icon>
+                  提交时间：2025-01-20 15:45:30
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup name="RuleDetail">
+  import { ref } from 'vue';
+  import { ArrowLeft, Warning, Microphone, Mute, VideoPlay, Refresh, Timer } from '@element-plus/icons-vue';
+  import audioPlayer from '../../components/audio/audioPlayer.vue';
+  </script>
+  
+  <style scoped>
+  .el-avatar {
+    background-color: #f4f4f4;
+  }
+  </style>
+  
+  

src/views/quality/index.vue

@@ -0,0 +1,100 @@
+<template>
+    <div class="app-container">
+        <page-search :searchFormConfig="searchFormConfig" @resetBtnClick="handleResetClick"
+            @queryBtnClick="handleQueryClick" />
+
+        <page-content ref="pageContentRef" :contentTableConfig="contentTableConfig" pageName="/system/addressbook" rowKey="id"
+            :isExport="false" @newBtnClick="addClick"
+            @editBtnClick="edit"></page-content>
+        <page-modal :defaultInfo="defaultInfo" :title="'编辑'" ref="pageModalRef" :mainKey="'id'" pageName="/system/addressbook"
+            :modalConfig="newModelConfig"></page-modal>
+    </div>
+</template>
+  
+<script>
+import { defineComponent, ref, computed, watch, getCurrentInstance } from 'vue'
+
+import PageSearch from '@/components/page-search'
+import PageContent from '@/components/page-content'
+import PageModal from '@/components/page-modal'
+
+import { searchFormConfig } from './config/search.config'
+import { contentTableConfig } from './config/content.config'
+import { usePageSearch } from '@/hooks/use-page-search'
+import { usePageModal } from '@/hooks/use-page-modal'
+import { modalConfig } from './config/modal.config'
+
+export default defineComponent({
+    name: 'AddressBook',
+    components: {
+        PageSearch,
+        PageContent,
+        PageModal,
+    },
+    setup () {
+
+        let newModelConfig = modalConfig;
+        
+        // 1.处理逻辑
+        const newCallback = () => { }
+        const editCallback = () => { }
+
+        const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
+        const { proxy } = getCurrentInstance()
+
+        const recordData = ref({})
+        const open = ref(false)
+
+        const clRowData = ref({})
+
+        // 3.调用hook获取公共变量和函数
+        const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
+            usePageModal(newCallback, editCallback)
+
+        function edit(item) {
+            console.log(modalConfig, 'formItems')
+            newModelConfig = modalConfig.formItems.map((o) => {
+                if (o.field === 'extension') {
+                    o.otherOptions = {
+                        ...o.otherOptions,
+                        disabled: true,
+                    }
+                }
+            });
+
+
+            return handleEditData(item);
+        }
+
+        function addClick(item) {
+            newModelConfig = modalConfig.formItems.map((o) => {
+                if (o.field === 'extension') {
+                     
+                    o.otherOptions = {
+                        ...o.otherOptions,
+                        disabled: false,
+                    }
+                }
+            });
+            handleNewData(item);
+        }
+
+        return {
+            newModelConfig,
+            defaultInfo,
+            addClick,
+            edit,
+            pageModalRef,
+            clRowData,
+            searchFormConfig,
+            contentTableConfig,
+            pageContentRef,
+            handleResetClick,
+            handleQueryClick,
+            recordData,
+            open,
+        }
+    }
+})
+</script>
+