二期：样式修改

2024-08-02 14:18:11 +08:00 · 2024-08-02 14:18:11 +08:00 · ae4f7d3b49
parent f32dd848cc
commit ae4f7d3b49
3 changed files with 137 additions and 78 deletions
--- a/src/renderer/src/views/prepare/container/file-list-item.vue
+++ b/src/renderer/src/views/prepare/container/file-list-item.vue
@ -6,36 +6,53 @@
    </div>
    <div class="prepare-body-main-item-info" @click="openFileWin(item)">
      <div class="prepare-item-info-title" :title="item.fileShowName">
-        {{ item.fileShowName }}
+        <div></div>
+        <div
+          style="
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 200px;
+          "
+        >
+          {{ item.fileShowName }}
+        </div>
      </div>
      <div class="prepare-item-info-message">
        <div style="width: 60px">
          <template v-if="item.uniquekey">
-           {{ item.worktype }}
+            {{ item.worktype }}
          </template>
          <template v-else>
-          <el-icon
-            v-loading="item.async === 'on'"
-            style="background-color: green; border-radius: 20px; color: white; top: 2px"
-          >
-            <Check v-if="item.async === true" />
-            <UploadFilled v-if="!item.async" />
-          </el-icon>
-          {{ item.async === true ? '已同步' : '' }}
-          {{ !item.async ? '待同步' : '' }}
-          {{ item.async === 'on' ? '同步中' : '' }}
-        </template>
+            <el-icon
+              v-loading="item.async === 'on'"
+              style="background-color: green; border-radius: 20px; color: white; top: 2px"
+            >
+              <Check v-if="item.async === true" />
+              <UploadFilled v-if="!item.async" />
+            </el-icon>
+            {{ item.async === true ? '已同步' : '' }}
+            {{ !item.async ? '待同步' : '' }}
+            {{ item.async === 'on' ? '同步中' : '' }}
+          </template>
        </div>
        <template v-if="item.fileSize">|</template>
-        <div style="width: 70px" v-if="item.fileSize">{{ formatFileSize(item.fileSize) }}</div>
+        <div v-if="item.fileSize" style="width: 70px">{{ formatFileSize(item.fileSize) }}</div>
        <template v-if="item.uploadTime">|</template>
-        <div style="width: 70px" v-if="item.uploadTime">{{ toTimeText(item.uploadTime, true) }}</div>
+        <div v-if="item.uploadTime" style="width: 70px">
+          {{ toTimeText(item.uploadTime, true) }}
+        </div>
        <template v-if="item.levelFirstName">|&nbsp;</template>
        <div
-        v-if="item.levelFirstName"
+          v-if="item.levelFirstName"
          style="
            flex: 1;
            text-align: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 200px;
          "
          :title="
            item.levelFirstName +
@ -145,7 +162,7 @@ export default {
  emits: { 'on-move': null, 'on-delete': null, 'on-set': null },
  data() {
    return {
-      listenList: [],
+      listenList: []
    }
  },
  methods: {
@ -229,7 +246,7 @@ export default {
      })
    },
    //布置
-    setHomeWork(item){
+    setHomeWork(item) {
      this.$emit('on-set', item)
    }
  }
@ -259,9 +276,9 @@ export default {
    display: flex;
    justify-content: center;
    align-items: center;
-    .icon-zuoye{
+    .icon-zuoye {
      font-size: 40px;
-      color: #707070
+      color: #707070;
    }
  }

@ -281,9 +298,7 @@ export default {
    .prepare-item-info-title {
      text-align: left;
      font-size: 16px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      display: flex;
    }

    .prepare-item-info-message {
--- a/src/renderer/src/views/resource/container/resoure-list.vue
+++ b/src/renderer/src/views/resource/container/resoure-list.vue
@ -1,13 +1,31 @@
 <template>
-  <div class="resource-list" v-loading="sourceStore.loading">
-    <el-scrollbar height="400px">
-      <el-empty description="暂无数据" v-if="!sourceStore.result.list.length" />
+  <div v-loading="sourceStore.loading" class="resource-list">
+    <el-scrollbar>
+      <el-empty v-if="!sourceStore.result.list.length" description="暂无数据" />
      <ul>
-        <li class="list-item" v-for="item in sourceStore.result.list" :key="item.id" @click="handleRow">
+        <li
+          v-for="item in sourceStore.result.list"
+          :key="item.id"
+          class="list-item"
+          @click="handleRow"
+        >
          <div class="item-left flex">
-            <FileImage :fileName="item.fileShowName" :size="50" />
+            <FileImage :file-name="item.fileShowName" :size="50" />
            <div class="flex item-left-content">
-              <div class="name flex">{{ item.fileShowName }}</div>
+              <div class="name flex" :title="item.fileShowName">
+                <div></div>
+                <div
+                  style="
+                    flex: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    width: 200px;
+                  "
+                >
+                  {{ item.fileShowName }}
+                </div>
+              </div>
              <div class="item-tags flex">
                <el-tag type="info" class="mr-10">{{ item.fileFlag }}</el-tag>
                <el-tag type="info" class="mr-10">{{ getFileSuffix(item.fileShowName) }}</el-tag>
@ -18,10 +36,16 @@
            </div>
          </div>
          <div class="item-btns" @click.stop>
-            <el-popover placement="bottom-end" trigger="hover" popper-class="custom-popover"
-              :visible="item.showPopover">
+            <el-popover
+              placement="bottom-end"
+              trigger="hover"
+              popper-class="custom-popover"
+              :visible="item.showPopover"
+            >
              <template #reference>
-                <el-button link type="primary"> <i class="iconfont icon-shenglvehao"></i></el-button>
+                <el-button link type="primary">
+                  <i class="iconfont icon-shenglvehao"></i
+                ></el-button>
              </template>
              <template #default>
                <div class="item-popover">
@ -29,7 +53,11 @@
                    <i class="iconfont icon-bianji"></i>
                    <span>编辑</span>
                  </div>
-                  <div class="item-popover-item" v-if="userInfo.userId == item.uploadUserId" @click="delRow(item)">
+                  <div
+                    v-if="userInfo.userId == item.uploadUserId"
+                    class="item-popover-item"
+                    @click="delRow(item)"
+                  >
                    <i class="iconfont icon-shanchu"></i>
                    <span>删除</span>
                  </div>
@ -37,24 +65,29 @@
                    <i class="iconfont icon-xiazai"></i>
                    <span>下载</span>
                  </div>
-
                </div>
              </template>
            </el-popover>
            <el-button size="small" plain round type="primary" @click="addLesson(item)">
              <i class="iconfont icon-jiahao"></i>
-              备课</el-button>
+              备课</el-button
+            >
          </div>
        </li>
      </ul>
-
    </el-scrollbar>
    <div class="pagination-box">
-      <el-pagination v-model:current-page="sourceStore.query.pageNum" v-model:page-size="sourceStore.query.pageSize"
-        :page-sizes="[10, 20, 30, 50]" background layout="total, sizes, prev, pager, next, jumper"
-        :total="sourceStore.result.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      <el-pagination
+        v-model:current-page="sourceStore.query.pageNum"
+        v-model:page-size="sourceStore.query.pageSize"
+        :page-sizes="[10, 20, 30, 50]"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="sourceStore.result.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
    </div>
-
  </div>
 </template>

@ -69,17 +102,17 @@ import useUserStore from '@/store/modules/user'
 import useResoureStore from '../store'

 const { ipcRenderer } = window.electron || {}
-const userstore  = useUserStore()
+const userstore = useUserStore()
 const sourceStore = useResoureStore()

 const userInfo = userstore.user

 // 分页change
-const handleSizeChange = (limit) => { 
+const handleSizeChange = (limit) => {
  sourceStore.query.pageSize = limit
  sourceStore.handleQuery()
 }
-const handleCurrentChange = (page) => { 
+const handleCurrentChange = (page) => {
  sourceStore.query.pageNum = page
  sourceStore.handleQuery()
 }
@ -108,7 +141,7 @@ const editRow = (item) => {
        }
      })
    })
-    .catch(() => { })
+    .catch(() => {})
 }
 // 删除
 const delRow = (item) => {
@ -128,7 +161,7 @@ const addLesson = ({ id }) => {
  let data = {
    id,
    fileRoot: '备课',
-    ...(toRaw(sourceStore.nodeData)),
+    ...toRaw(sourceStore.nodeData)
  }
  // 过滤空值
  for (let key in data) {
@ -136,19 +169,18 @@ const addLesson = ({ id }) => {
      delete data[key]
    }
  }
-  
+
  try {
    sourceStore.loading = true
    addFileToPrepare(data).then(() => {
      ElMessage.success('操作成功')
    })
-  }
-  finally {
+  } finally {
    sourceStore.loading = false
  }
 }
-// 
-const handleRow = () =>{
+//
+const handleRow = () => {
  ElMessage.warning('请先加入备课，在备课里面进行预览！')
 }
 </script>
@ -181,6 +213,10 @@ const handleRow = () =>{
 }

 .resource-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
  .list-item {
    flex: 1;
    padding: 10px 20px;
@ -189,10 +225,13 @@ const handleRow = () =>{
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
-
+    &:hover {
+      background-color: rgba(144, 147, 153, 0.2);
+      cursor: pointer;
+    }
    .item-left {
      align-items: center;
-
+      flex: 1;
      .icon {
        font-size: 50px;
      }
@ -200,12 +239,14 @@ const handleRow = () =>{
      .item-left-content {
        margin-left: 10px;
        flex-direction: column;
+        flex: 1;
+        text-align: left;
      }

      .name {
        font-size: 14px;
        color: #3b3b3b;
-        margin-bottom: 10px
+        margin-bottom: 10px;
      }

      .line {
@ -226,7 +267,6 @@ const handleRow = () =>{
        color: #909399;
        font-size: 13px;
      }
-
    }

    &:last-child {
@ -258,15 +298,13 @@ const handleRow = () =>{
        margin-right: 3px;
        font-weight: bold;
      }
-
    }
-
  }

  .pagination-box {
-    margin-top: 20px;
    display: flex;
    justify-content: center;
+    height: 65px;
  }
 }
-</style>
+</style>
--- a/src/renderer/src/views/resource/index.vue
+++ b/src/renderer/src/views/resource/index.vue
@ -1,21 +1,28 @@
 <template>
  <div class="page-resource flex">
    <!--左侧 教材 目录-->
-    <ChooseTextbook @changeBook="getData" @nodeClick="getData" />
+    <ChooseTextbook @change-book="getData" @node-click="getData" />

    <div class="page-right">
      <!-- 搜索 -->
      <ResoureSearch #add>
-        <el-button v-if="sourceStore.isCreate" type="primary" round @click="openDialog" class="create-btn">
+        <el-button
+          v-if="sourceStore.isCreate"
+          type="primary"
+          round
+          class="create-btn"
+          @click="openDialog"
+        >
          <i class="iconfont icon-jiahao"></i>
-          新建资源</el-button>
+          新建资源</el-button
+        >
      </ResoureSearch>
      <!-- 列表 -->
      <ResoureList />
    </div>
  </div>
  <!-- 上传弹窗 -->
-  <uploadDialog v-model="isDialogOpen" @submitFile="submitFile" />
+  <uploadDialog v-model="isDialogOpen" @submit-file="submitFile" />
  <!-- <el-button @click="testClick">测试</el-button> -->
 </template>

@ -40,7 +47,7 @@ onMounted(async () => {
  // const res = await ipcMsgSend('tool-sphere:create', params)
  // console.log('消息返回：', res)
 })
-const testClick = async() => {
+const testClick = async () => {
  const win = await createWindow('tool-sphere', { url: '/tool/sphere' })
  console.log('消息返回：', win)
 }
@ -48,12 +55,11 @@ const testClick = async() => {
 const getData = (data) => {
  const { textBook, node } = data
  let textbookId = textBook.curBookId
-  let levelSecondId  = node.id
+  let levelSecondId = node.id
  let levelFirstId
-  if(node.parentNode){
-    levelFirstId =  node.parentNode.id
-  }
-  else{
+  if (node.parentNode) {
+    levelFirstId = node.parentNode.id
+  } else {
    levelFirstId = node.id
    levelSecondId = ''
  }
@ -63,7 +69,7 @@ const getData = (data) => {
  sourceStore.nodeData = {
    textbookId,
    levelFirstId,
-    levelSecondId,
+    levelSecondId
  }
  sourceStore.handleQuery()
 }
@ -73,7 +79,7 @@ const submitFile = (data) => {
  let fileList = toRaw(data)
  const { textbookId, levelFirstId, levelSecondId, fileSource, fileRoot } = sourceStore.query
  // 给每个文件添加属性
-  fileList.forEach(item => {
+  fileList.forEach((item) => {
    let fileData = { textbookId, levelFirstId, levelSecondId, fileSource, fileRoot }
    fileData.fileShowName = item.fileData.fileShowName
    fileData.fileFlag = item.fileData.fileFlag
@ -83,17 +89,15 @@ const submitFile = (data) => {
  uploaderState().pushFile(fileList)
 }

-
 const fileCallBack = (res) => {
  if (res.code == 200) {
    sourceStore.handleQuery()
  }
 }

-onMounted(()=>{
+onMounted(() => {
  sourceStore.getCreate()
 })
-
 </script>

 <style lang="scss" scoped>
@ -103,6 +107,8 @@ onMounted(()=>{

  .page-right {
    min-width: 0;
+    display: flex;
+    flex-direction: column;
    flex: 1;
    margin-left: 20px;
    height: 100%;
@ -111,12 +117,12 @@ onMounted(()=>{
    box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
  }
  .icon-jiahao {
-      font-size: 12px;
-      margin-right: 3px;
-      font-weight: bold;
-    }
+    font-size: 12px;
+    margin-right: 3px;
+    font-weight: bold;
+  }
 }
-.create-btn{
+.create-btn {
  font-size: 13px;
  padding: 5px 13px;
 }