src/renderer/src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2794390 */
-  src: url('iconfont.woff2?t=1720774148626') format('woff2'),
+  src: url('iconfont.woff2?t=1720953486579') format('woff2'),
-       url('iconfont.woff?t=1720774148626') format('woff'),
+       url('iconfont.woff?t=1720953486579') format('woff'),
-       url('iconfont.ttf?t=1720774148626') format('truetype'),
+       url('iconfont.ttf?t=1720953486579') format('truetype'),
-       url('iconfont.svg?t=1720774148626#iconfont') format('svg');
+       url('iconfont.svg?t=1720953486579#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shanchu:before {
+  content: "\e852";
+}
+
+.icon-xiazai:before {
+  content: "\e65d";
+}
+
+.icon-bianji:before {
+  content: "\e60a";
+}
+
 .icon-yunwenjian-:before {
   content: "\e629";
 }

src/renderer/src/assets/iconfont/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "8288874",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e852",
+      "unicode_decimal": 59474
+    },
+    {
+      "icon_id": "10194319",
+      "name": "下载",
+      "font_class": "xiazai",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "11833219",
+      "name": "编辑",
+      "font_class": "bianji",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
     {
       "icon_id": "8494654",
       "name": "云文件-",

src/renderer/src/assets/iconfont/iconfont.svg

@@ -14,6 +14,12 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="shanchu" unicode="&#59474;" d="M736.653061-33.959184H287.346939c-45.97551 0-83.591837 37.616327-83.591837 83.591837V540.734694h616.489796v-491.102041c0-45.97551-37.616327-83.591837-83.591837-83.591837zM245.55102 498.938776v-449.306123c0-22.987755 18.808163-41.795918 41.795919-41.795918h449.306122c22.987755 0 41.795918 18.808163 41.795919 41.795918V498.938776H245.55102zM407.510204 101.877551c-11.493878 0-20.897959 9.404082-20.897959 20.897959V384c0 11.493878 9.404082 20.897959 20.897959 20.897959s20.897959-9.404082 20.897959-20.897959v-261.22449c0-11.493878-9.404082-20.897959-20.897959-20.897959zM616.489796 101.877551c-11.493878 0-20.897959 9.404082-20.897959 20.897959V384c0 11.493878 9.404082 20.897959 20.897959 20.897959s20.897959-9.404082 20.897959-20.897959v-261.22449c0-11.493878-9.404082-20.897959-20.897959-20.897959zM846.367347 498.938776H177.632653c-45.97551 0-83.591837 37.616327-83.591837 83.591836v31.346939c0 45.97551 37.616327 83.591837 83.591837 83.591837h668.734694c45.97551 0 83.591837-37.616327 83.591837-83.591837v-31.346939c0-45.97551-37.616327-83.591837-83.591837-83.591836zM177.632653 655.673469c-22.987755 0-41.795918-18.808163-41.795918-41.795918v-31.346939c0-22.987755 18.808163-41.795918 41.795918-41.795918h668.734694c22.987755 0 41.795918 18.808163 41.795918 41.795918v31.346939c0 22.987755-18.808163 41.795918-41.795918 41.795918H177.632653zM650.44898 655.673469h-276.89796c-28.734694 0-52.244898 23.510204-52.244898 52.244898v41.795919c0 28.734694 23.510204 52.244898 52.244898 52.244898h276.89796c28.734694 0 52.244898-23.510204 52.244898-52.244898v-41.795919c0-28.734694-23.510204-52.244898-52.244898-52.244898z m-276.89796 104.489796c-5.746939 0-10.44898-4.702041-10.448979-10.448979v-41.795919c0-5.746939 4.702041-10.44898 10.448979-10.448979h276.89796c5.746939 0 10.44898 4.702041 10.448979 10.448979v41.795919c0 5.746939-4.702041 10.44898-10.448979 10.448979h-276.89796z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="xiazai" unicode="&#58973;" d="M795.694545 500.363636a289.047273 289.047273 0 0 1-567.38909 0 197.585455 197.585455 0 0 1 18.385454-395.636363h30.952727a23.272727 23.272727 0 0 1 0 46.545454H246.690909a151.272727 151.272727 0 1 0-2.327273 302.545455l23.272728-5.352727 3.025454 25.6a242.269091 242.269091 0 0 0 480.814546 0l4.654545-25.134546 23.272727 4.887273a151.272727 151.272727 0 1 0-2.327272-302.545455h-34.909091a23.272727 23.272727 0 0 1 0-46.545454h35.141818a197.585455 197.585455 0 0 1 18.385454 395.636363zM628.363636 206.196364l-91.927272-93.090909v286.254545a23.272727 23.272727 0 0 1-46.545455 0v-285.090909l-91.927273 93.090909A23.272727 23.272727 0 1 1 365.149091 174.545455l131.490909-131.723637a23.272727 23.272727 0 0 1 33.047273 0L661.178182 174.545455A23.272727 23.272727 0 1 1 628.363636 206.196364z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="bianji" unicode="&#58890;" d="M800.8-60.7H232.7c-89.3 0-162 72.7-162 162V669.4c0 89.3 72.7 162 162 162h218.5c17.7 0 32-14.3 32-32s-14.3-32-32-32H232.7c-54 0-98-44-98-98v-568.1c0-54 44-98 98-98h568.1c54 0 98 44 98 98V309.4c0 17.7 14.3 32 32 32s32-14.3 32-32v-208.1c0-89.3-72.7-162-162-162zM525 226.6c-8.2 0-16.4 3.1-22.6 9.4L368 370.4c-12.5 12.5-12.5 32.8 0 45.3L756.2 803.8c8.7 8.7 33 29 69.9 29 26.5 0 51.4-10.3 70-29l39.8-39.8c38.6-38.6 38.6-101.3 0-139.9L547.6 236c-6.2-6.3-14.4-9.4-22.6-9.4zM435.9 393l89.1-89.1 365.6 365.6c13.6 13.6 13.6 35.7 0 49.3l-39.8 39.8-0.1 0.1c-6.5 6.5-15.2 10.1-24.6 10.1-13.4 0-22.3-7.8-24.7-10.2L435.9 393zM350.8 186.8c-8.4 0-16.5 3.3-22.6 9.4-8.1 8.1-11.2 19.9-8.3 30.9L366.2 400c3 11 11.6 19.7 22.6 22.6 11 3 22.8-0.2 30.9-8.3l126.6-126.6c8.1-8.1 11.2-19.9 8.3-30.9-3-11-11.6-19.7-22.6-22.6l-172.9-46.3c-2.8-0.7-5.5-1.1-8.3-1.1z m62.9 143.1L396 264l65.8 17.6-48.1 48.3zM848 580c-8.3 0-16.6 3.2-22.8 9.6L707 709.9c-12.4 12.6-12.2 32.9 0.4 45.3 12.6 12.4 32.9 12.2 45.3-0.4l118.2-120.3c12.4-12.6 12.2-32.9-0.4-45.3-6.3-6.1-14.4-9.2-22.5-9.2z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="yunwenjian-" unicode="&#58921;" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM681.984 429.056c-6.656 40.448-36.352 98.304-78.336 124.416-47.104 29.696-125.952 39.424-130.048 38.912 20.992 43.52 81.408 57.856 130.048 57.856 69.12 0 124.416-60.416 124.416-134.656 0-6.656-1.024-13.312-1.536-18.944 9.216 2.56 18.944 4.608 29.696 4.608 69.12 0 124.416-60.416 124.416-134.656 0-40.96-40.448-69.12-68.096-93.696-6.656 87.04-56.832 144.384-130.56 156.16zM670.72 381.952c-18.944 89.088-100.864 158.208-201.728 158.208-78.848 0-146.944-41.984-179.2-105.984-84.48-10.24-146.944-76.8-146.944-158.208 0-87.04 73.216-158.208 163.328-158.208h353.28c76.288 0 135.68 57.856 135.68 132.096 0.512 68.608-56.32 126.464-124.416 132.096zM415.232 226.816c4.608-4.608 9.216-9.216 18.432-9.216 4.608 0 9.216 0 13.824 4.608l123.392 104.96c9.216 13.824 13.824 27.136 4.608 36.352-9.216 9.216-23.04 9.216-31.744 4.608l-109.568-91.136L373.76 345.088c-9.216 9.216-23.04 9.216-31.744 0-9.216-9.216-9.216-23.04 0-31.744l73.216-86.528z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="avi" unicode="&#58974;" d="M832.2 768.1v-766H192.7v766h639.5m0 64H192.7c-35.3 0-64-28.7-64-64v-766c0-35.3 28.7-64 64-64h639.5c35.3 0 64 28.7 64 64v766c0 35.4-28.7 64-64 64zM287 781.3h32v-813.7h-32zM189.995 668.237v32h97.9v-32zM189.999 568.84v32h97.9v-32zM190.002 469.443v32h97.9v-32zM190.005 370.047v32h97.9v-32zM190.008 270.65v32h97.9v-32zM190.015 71.856v32h97.9v-32zM190.011 171.253v32h97.9v-32zM734.02 668.213v32h97.9v-32zM734.023 568.816v32h97.9v-32zM734.026 469.42v32h97.9v-32zM734.03 370.022v32h97.9v-32zM734.033 270.626v32h97.9v-32zM733.039 71.832v32h97.9v-32zM734.036 171.229v32h97.9v-32zM703.8 789.1h32v-813.7h-32zM581.1 353.2l-86.3-68.1c-23.3-18.3-57.4-1.8-57.4 27.8V465.2c0 29.6 34.2 46.2 57.4 27.8l86.3-68.1c23.2-18.2 23.2-53.4 0-71.7zM896.2-62.3H563.8v176c0 35.3 28.7 64 64 64h268.4c35.3 0 64-28.7 64-64v-112c0-35.4-28.7-64-64-64zM694.9 125l54.6-142.8h-25l-13 35.8h-59.8l-13-35.8h-25L668.3 125h26.6z m9.6-87.8l-22.4 62.6h-0.8l-22.6-62.6h45.8zM751.9 125l39.2-116.4h0.6L830.9 125h25.4l-50.8-142.8h-28.2L726.5 125h25.4zM894.7 125v-142.8h-23.4V125h23.4z"  horiz-adv-x="1024" />

src/renderer/src/components/upload-dialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="dialogValue" width="600" :before-close="beforeClose">
+  <el-dialog v-model="dialogValue" width="630" :before-close="beforeClose">
     <div class="file-dialog">
       <el-form>
         <el-form-item label="文件">
@@ -15,11 +15,14 @@
             <div class="file-list-item flex" v-for="(item, index) in fileList" :key="item.uid">
               <div class="file-name">
                 <span class="name">标题：</span>
-                <span>{{ item.name }}</span>
+                <svg class="icon icon-ppt" aria-hidden="true">
+                  <use :xlink:href="getFileTypeIcon(item.name)"></use>
+                </svg>
+                <span class="text">{{ item.name }}</span>
               </div>
               <div class="flex-type flex">
                 <span class="name">类别：</span>
-                <el-select v-model="fileType" placeholder="Select"  style="width: 100px">
+                <el-select v-model="item.fileType" placeholder="Select" style="width: 100px">
                   <el-option v-for="item in resourceType" :key="item.alue" :label="item.label" :value="item.value" />
                 </el-select>
 
@@ -33,7 +36,7 @@
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="closeDialog">关闭</el-button>
-        <el-button type="primary">
+        <el-button type="primary" @click="submitFile">
           确定
         </el-button>
       </div>
@@ -53,7 +56,7 @@ const props = defineProps({
 })
 const dialogValue = ref(false)
 // 定义要发送的emit事件
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'submitFile'])
 // 文件列表
 const fileList = ref([])
 
@@ -75,7 +78,9 @@ const resourceType = ref([
 ])
 
 
-
+watch(() => props.modelValue, (newVal) => {
+  dialogValue.value = newVal
+})
 const hanleFileBefore = (rawFile) => {
 
   // 音频 类型
@@ -100,31 +105,46 @@ const hanleFileBefore = (rawFile) => {
     ElMessage.error('文件大小错误! 请上传小于100M的文件!')
     return false
   }
+  console.log(rawFile)
+  rawFile.fileType = 1
   fileList.value.push(rawFile)
 
   return false
 }
 
+const getFileTypeIcon = (fileName)=>{
+  const name = fileName.substr(fileName.lastIndexOf('.') + 1);
+  console.log(name)
+  const iconObj = {
+    pdf: 'icon-pdf',
+    ppt: 'icon-ppt',
+    doc: 'icon-word',
+    docx: 'icon-word',
+    mp4: 'icon-video'
+  }
+  return '#' + iconObj[name]
+}
+
+// 删除
 const delFile = (index) => {
   fileList.value.splice(index, 1)
 }
 
-
+// 关闭弹窗前
-
-watch(() => props.modelValue, (newVal) => {
-  dialogValue.value = newVal
-})
-
 const beforeClose = (done) => {
   fileList.value = []
   emit('update:modelValue', false)
   done()
 }
-
+// 关闭弹窗
 const closeDialog = () => {
   fileList.value = []
   emit('update:modelValue', false)
 }
+// 确定
+const submitFile = () => {
+  emit('submitFile', fileList.value)
+}
 
 
 
@@ -151,12 +171,16 @@ const closeDialog = () => {
     .file-list-item {
       width: 100%;
       justify-content: space-between;
-
+      margin-bottom: 15px;
       .file-name {
+        width: 50%;
         margin-right: 20px;
         display: flex;
+        align-items: center
+      }
+      .icon{
+        font-size: 30px;
       }
-
       .flex-type {
         align-items: center;
         margin-right: 20px;
@@ -166,9 +190,8 @@ const closeDialog = () => {
 
 
     .name {
-
       position: relative;
-
+      flex-shrink: 0;
       &::after {
         content: '*';
         position: absolute;
@@ -178,6 +201,13 @@ const closeDialog = () => {
         font-size: 18px;
       }
     }
+
+    .text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-left: 5px;
+    }
   }
 }
 </style>

src/renderer/src/views/resource/container/resoure-list.vue

@@ -3,7 +3,12 @@
     <el-scrollbar height="400px">
       <ul>
         <li class="list-item">
+
           <div class="item-left flex">
+            <svg class="icon icon-ppt" aria-hidden="true">
+              <use xlink:href="#icon-ppt"></use>
+            </svg>
+            <div class="flex item-left-content">
               <div class="name flex">第1课《春》课后巩固练习 2022-2023学年部编版语文七年级上册</div>
               <div class="item-tags flex">
                 <el-tag type="info" class="mr-10">教案</el-tag>
@@ -13,15 +18,26 @@
                 <span class="gray-text mr-10">下载3次</span>
               </div>
             </div>
+          </div>
           <div class="item-btns" @click.stop>
-            <el-popover placement="bottom-start" trigger="click" popper-class="customPopper">
+            <el-popover placement="bottom-end" trigger="click" popper-class="custom-popover">
               <template #reference>
                 <el-button link type="primary"> <i class="iconfont icon-shenglvehao"></i></el-button>
               </template>
               <template #default>
                 <div class="item-popover">
-                  <div>预览</div>
+                  <div class="item-popover-item">
-                  <div>编辑</div>
+                    <i class="iconfont icon-bianji"></i>
+                    <span>编辑</span>
+                  </div>
+                  <div class="item-popover-item">
+                    <i class="iconfont icon-shanchu"></i>
+                    <span>删除</span>
+                  </div>
+                  <div class="item-popover-item">
+                    <i class="iconfont icon-xiazai"></i>
+                    <span>下载</span>
+                  </div>
                 </div>
               </template>
             </el-popover>
@@ -34,8 +50,8 @@
       </ul>
       <div class="pagination-box">
         <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
-          :page-sizes="[100, 200, 300, 400]" background size="small" layout="total, sizes, prev, pager, next, jumper"
+          :page-sizes="[100, 200, 300, 400]" background layout="total, sizes, prev, pager, next, jumper" :total="400"
-          :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
       </div>
     </el-scrollbar>
   </div>
@@ -44,7 +60,6 @@
 <script setup>
 import { ref } from 'vue'
 
-const drawer = ref(false)
 const currentPage = ref(1)
 const pageSize = ref(100)
 
@@ -54,7 +69,32 @@ const handleCurrentChange = () => { }
 
 </script>
 
+<style>
+.custom-popover {
+  width: 80px !important;
+  min-width: 80px !important;
+  padding: 5px !important;
+
+  .item-popover-item {
+    padding: 5px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    cursor: pointer;
+    .iconfont {
+      margin-right: 5px;
+      color: #a2a2a2;
+    }
+  }
+}
+</style>
 <style lang="scss">
+::v-deep(.el-popover) {
+  min-width: 50px;
+  width: 50px !important;
+}
+
 .resource-list {
   .list-item {
     padding: 10px 20px;
@@ -65,7 +105,16 @@ const handleCurrentChange = () => { }
     cursor: pointer;
 
     .item-left {
+      align-items: center;
+
+      .icon {
+        font-size: 50px;
+      }
+
+      .item-left-content {
+        margin-left: 10px;
         flex-direction: column;
+      }
 
       .name {
         font-size: 14px;
@@ -123,6 +172,7 @@ const handleCurrentChange = () => { }
         margin-right: 3px;
         font-weight: bold;
       }
+
     }
 
   }
@@ -133,8 +183,4 @@ const handleCurrentChange = () => { }
     justify-content: center;
   }
 }
-
-.customPopper {
-  min-width: 50px !important;
-}
 </style>

src/renderer/src/views/resource/container/resoure-search.vue

@@ -30,14 +30,16 @@
         </div>
       </el-col>
     </el-row>
-    <uploadDialog v-model="isDialogOpen"/>
+    <uploadDialog v-model="isDialogOpen" @submitFile="submitFile"/>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, toRaw } from 'vue'
 import useResoureStore from '../store'
 import uploadDialog from '@/components/upload-dialog/index.vue'
+import uploaderState from '@/store/modules/uploader'
+
 
 const sourceStore = useResoureStore()
 const isDialogOpen = ref(false)
@@ -46,6 +48,10 @@ const openDialog = ()=>{
   isDialogOpen.value = true
 }
 
+const submitFile = (fileList)=>{
+  console.log(toRaw(fileList))
+  uploaderState().pushFile(toRaw(fileList))
+}
 </script>
 <style lang="scss" scoped>
 .resoure-search {