布局图片管理的详情，音频管理的详情页和交互

apps/web-vue/src/router/index.ts

@@ -69,11 +69,23 @@ const routes = [
         meta: { title: '图片管理', icon: '', affix: true }
       },
       {
+        path: 'image/detail/:id',  // 动态参数 :id
+        name: 'ImageDetail',
+        component: ()=> import('@/views/resource/image/detail.vue'),
+        meta: { title: '图片详情', hidden: true } // hidden: true 表示不在左侧菜单显示
+      },
+      {
         path: 'audio',
         name: 'Audio',
         component: ()=> import('@/views/resource/audio/index.vue'),
         meta: { title: '音频管理', icon: '', affix: true }
       },
+      {
+        path: 'audio/detail/:id',  // 动态参数 :id
+        name: 'AudioDetail',
+        component: ()=> import('@/views/resource/audio/detail.vue'),
+        meta: { title: '音频详情', hidden: true } // hidden: true 表示不在左侧菜单显示
+      },
     ]
   },
 

apps/web-vue/src/views/resource/audio/components/Item.vue

@@ -11,7 +11,7 @@
         <div class="flex-items-center audio-progress-only mt-10">
             <audio ref="audioRef" src="../../../../../public/houlai.mp3" @timeupdate="onTimeUpdate" @ended="onEnded"
                 @loadedmetadata="onLoadedMetadata"></audio>
-            <div @click="togglePlay" class="minw-44 h-44 round flex-center mr-16 play">{{ isPlaying ? '⏸️' : '▶' }}
+            <div @click.stop="togglePlay" class="minw-44 h-44 round flex-center mr-16 play">{{ isPlaying ? '⏸️' : '▶' }}
             </div>
             <el-slider v-model="currentTime" :max="duration" :step="0.1" :show-tooltip="false" @change="onSliderChange"
                 @drag-start="isDragging = true" @drag-end="isDragging = false" size="small" />

apps/web-vue/src/views/resource/audio/index.vue

@@ -19,8 +19,8 @@
             </div>
             <div class="flex flex-wrap gap-20">
                 <el-checkbox-group v-model="checkedList" class="flex flex-wrap gap-20 w-full">
-                    <div v-for="(item, index) in list" :key="index"
-                        class="bg-fff round-12 relative hidden flex-item"
+                    <div v-for="(item, index) in list" :key="index" @click="goDetail(item)"
+                        class="bg-fff round-12 relative hidden pointer flex-item"
                         :class="{ 'is-selected': checkedList.includes(item.id) }">
                         <Item :item="item" :isCheck="isCheck" />
                     </div>
@@ -32,9 +32,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useRouter } from 'vue-router'
 import Classify from '../components/Classify.vue';
 import Item from '@/views/resource/audio/components/Item.vue'
 
+const router = useRouter()
 const checkedList = ref<any>([])
 const btnIndex = ref(0)
 const isCheck = ref(false)
@@ -44,6 +46,11 @@ const switchCheck = () => {
     isCheck.value = !isCheck.value
     checkedList.value = []
 }
+
+const goDetail = (item: any) => {
+    if(isCheck.value) return
+    router.push(`/resource/audio/detail/${item.id}`)
+}
 </script>
 
 <style scoped lang="scss">

apps/web-vue/src/views/resource/image/index.vue

@@ -19,8 +19,8 @@
             </div>
             <div class="flex flex-wrap gap-20">
                 <el-checkbox-group v-model="checkedList" class="flex flex-wrap gap-20 w-full">
-                    <div v-for="(item, index) in list" :key="index"
-                        class="w-200 bg-fff round-12 relative hidden flex-item"
+                    <div v-for="(item, index) in list" :key="index" @click="goDetail(item)"
+                        class="w-200 bg-fff round-12 relative hidden pointer flex-item"
                         :class="{ 'is-selected': checkedList.includes(item.id) }">
                         <Item :item="item" :isCheck="isCheck" />
                     </div>
@@ -33,10 +33,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useRouter } from 'vue-router'
 import Classify from '../components/Classify.vue';
 import Item from '@/views/resource/image/components/Item.vue'
 import UploadDialog from './components/UploadDialog.vue';
 
+const router = useRouter()
 const checkedList = ref<any>([])
 const btnIndex = ref(0)
 const isCheck = ref(false)
@@ -47,6 +49,11 @@ const switchCheck = () => {
     checkedList.value = []
 }
 
+const goDetail = (item: any) => {
+    if(isCheck.value) return
+    router.push(`/resource/image/detail/${item.id}`)
+}
+
 
 
 // 上传视频的弹窗内容

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

@@ -197,6 +197,9 @@ const ascOptions = [
     color: rgba(var(--main-color), 1);
     // flex: 0 0 calc((100% - 10px * 2) / 3);
 }
+.bordedr {
+    box-shadow: 0 0 0 1px rgba(var(--main-color), .1);
+}
 
 .active {
     background-color: rgba(var(--main-color), 1);
@@ -235,12 +238,6 @@ const ascOptions = [
     box-shadow: 0 0 0 1px #eee;
 }
 
-:deep(.myselect) {
-    .el-select__wrapper {
-        border-radius: 12px;
-    }
-}
-
 /* 1600px 以下：一行 5 个 */
 @media (max-width: 1500px) {
     .flex-item1 {