Merge pull request 'add:作业管理样式；' (#36) from yangws_ws into main

Reviewed-on: #36

src/renderer/src/views/job-management/Header/index.vue

@@ -1,27 +0,0 @@
-<template>
-    <div class="mb-4">
-        <div>
-            <el-button type="danger" disabled>批量删除</el-button>
-            <el-button type="primary" disabled>批量推送</el-button>
-        </div>
-        <CustomSelect 
-            :options="options" 
-            placeholder="设计新作业" 
-        />
-    </div>
-</template>
-<script setup>
-import { ref } from 'vue';
-import CustomSelect from '../components/customSelect.vue';
-const options = ref(['自主搜题', '校本题库', '个人题库', '智能推荐', '课堂展示', '常规作业', 'AI作业设计']);
-</script>
-<style lang="scss" scoped>
-.mb-4{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    background-color: #fff;
-    padding: 10px;
-}
-</style>

src/renderer/src/views/job-management/Left/index.vue

@@ -2,10 +2,10 @@
 <div class="list-container">
     <div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
     <div class="item-content">
-        <el-checkbox v-model="item.checked"/>
+        <el-checkbox v-model="item.checked" @click.stop="clickCheckbox(item)"/>
         <div class="item-text">
             <div class="title-header">
-                <div class="item-title">{{ item.title }}</div>
+                <div class="item-title" :title="item.title">{{ item.title }}</div>
                 <CustomButton :item="{ type: item.type, text: item.text, plain: true }" />
             </div>
             <div class="item-description" :title="item.description">{{ item.description }}</div>
@@ -17,21 +17,39 @@
 </template>
   
   <script setup>
-  import { ref,markRaw  } from 'vue';
+  import { ref  } from 'vue';
   import { ArrowRight } from '@element-plus/icons-vue';
   import CustomButton from '../components/button.vue'
+  const emits = defineEmits(['checked']);
   
   const items = ref([
-    { title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
+    { id:1,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
-    { title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'primary',text:'课堂练习' },
+    { id:2,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'primary',text:'课堂练习' },
-    { title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
+    { id:3,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
-    { title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'danger',text:'常规作业' },
+    { id:4,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'danger',text:'常规作业' },
-    { title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
+    { id:5,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
+    { id:6,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
+    { id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
+
   ]);
+  // 获取选中的checkbox的id
+  const selectIds = ref([])
 
   const handleClick = (item) => {
-    console.log('Clicked on:', item.title);
+    console.log(item.title);
   };
+  // 选择多选框
+  const clickCheckbox = (item,e) => {
+    if(item.checked === true){
+      if(selectIds.value.includes(item.id)){
+        const index = selectIds.value.indexOf(item.id)
+        selectIds.value.splice(index,1)
+      }
+    }else{
+      selectIds.value.push(item.id)
+    }
+    emits('checked',selectIds.value)
+  }
   </script>
   
   <style scoped>
@@ -40,7 +58,7 @@
     width: 100%;
     max-width: 400px; /* 可以根据需要调整宽度 */
     margin: 0 auto;
-    padding: 16px;
+    padding: 8px;
     background-color: #f5f5f5;
     border-radius: 8px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@@ -50,7 +68,7 @@
     background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    padding: 16px;
+    padding: 8px;
     margin-bottom: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -80,6 +98,7 @@
     flex-direction: column;
     flex: 1;
     margin-left: 5px;
+   
   }
   .title-header{
     display: flex;
@@ -92,6 +111,12 @@
     font-weight: 500;
     color: #303133;
     text-align: left;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1; /* 设置最大行数 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
   }
   
   .item-description {

src/renderer/src/views/job-management/Right/index.vue

@@ -3,27 +3,34 @@
     <div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
       <div class="item-content">
         <div class="item-text">
-          <div class="item-title">{{ item.title }}</div>
+          <div class="title-header">
+            <div class="item-title">{{ item.title }}</div>
+            <el-icon class="item-icon"><component :is="item.icon" /></el-icon>
+          </div>
           <div class="item-description">{{ item.description }}</div>
+          <div class="item-bottom">
+            <CustomButton :item="{ type: item.type, text: item.text, plain: true }" />
+          </div>
         </div>
-        <el-icon class="item-icon"><component :is="item.icon" /></el-icon>
+        
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { shallowRef } from 'vue';
+import { ref,markRaw } from 'vue';
 import { Plus, ArrowDown, Document, User, Setting } from '@element-plus/icons-vue';
+import CustomButton from '../components/button.vue'
 
-const items = shallowRef([
+const items = ref([
-  { title: '自主搜题', description: '1111111', icon: Document },
+  { title: '自主搜题', description: '1111111', icon: markRaw(Document),type:'default',text:'习题训练' },
-  { title: '校本题库', description: '222222', icon: User },
+  { title: '校本题库', description: '222222', icon: markRaw(Document),type:'default',text:'习题训练' },
-  { title: '个人题库', description: '333333', icon: Setting },
+  { title: '个人题库', description: '333333', icon: markRaw(Document),type:'default',text:'习题训练' },
-  { title: '智能推荐', description: '444444', icon: Plus },
+  { title: '智能推荐', description: '444444', icon: markRaw(Document),type:'',text:'' },
-  { title: '课堂展示', description: '555555', icon: ArrowDown },
+  { title: '课堂展示', description: '555555', icon: markRaw(Document),type:'primary',text:'课堂展示' },
-  { title: '常规作业', description: '555555', icon: ArrowDown },
+  { title: '常规作业', description: '555555', icon: markRaw(Document),type:'danger',text:'常规作业' },
-  { title: 'AI设计作业', description: '555555', icon: ArrowDown },
+  { title: 'AI设计作业', description: '555555', icon: markRaw(Document),type:'danger',text:'常规作业' },
 ]);
 
 const handleClick = (item) => {
@@ -36,7 +43,7 @@ const handleClick = (item) => {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
-  padding: 16px;
+  padding: 8px;
   background-color: #f5f5f5;
 }
 
@@ -44,8 +51,8 @@ const handleClick = (item) => {
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  padding: 16px;
+  padding: 8px;
-  width: calc(33.333% - 32px); /* 3列布局，每列减去gap */
+  width: calc(25% - 16px); 
   cursor: pointer;
   transition: all 0.3s ease;
 }
@@ -75,10 +82,26 @@ const handleClick = (item) => {
   font-weight: 500;
   color: #303133;
   margin-bottom: 4px;
+  font-weight: bold;
 }
 
 .item-description {
   font-size: 14px;
   color: #909399;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; /* 设置最大行数 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+.title-header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.item-bottom{
+  text-align: right;
 }
 </style>

src/renderer/src/views/job-management/components/customSelect.vue

@@ -21,7 +21,8 @@
   
   <script setup>
 import { Plus, ArrowDown } from '@element-plus/icons-vue'
-import { ref, computed, defineProps } from 'vue';
+import { ref, defineEmits, defineProps } from 'vue';
+const emits = defineEmits(['select-click']);
 
 const props = defineProps({
   options: {
@@ -47,6 +48,7 @@ const toggleDropup = () => {
 const selectOption = (option) => {
   selectedOption.value = option;
   isDropdownOpen.value = false;
+  emits('select-click', option)
 };
 </script>
 <style scoped>

src/renderer/src/views/job-management/index.vue

@@ -1,31 +1,93 @@
 <template>
     <div class="page-template flex">
-        <Header/>
+        <!-- // 顶部 -->
-        <el-row :gutter="20" class="tempalte-main">
+        <div class="mb-4">
-        <el-col :span="6">
+          <div>
-            <!--左侧列表-->
+              <el-button type="danger" :disabled="!isChceked">批量删除</el-button>
-            <Left/>
+              <el-button type="primary" :disabled="!isChceked">批量推送</el-button>
-        </el-col>
+          </div>
-        <el-col :span="18">
+          <CustomSelect 
-            <!--右侧-->
+              :options="options" 
-            <Right/>
+              placeholder="设计新作业" 
-        </el-col>
+              @select-click="selectClick"
-        </el-row>
+          />
+        </div>
+        <div :style="{height:viewportHeight - 72}" class="no-horizontal-scroll">
+          <el-row :gutter="20" class="tempalte-main">
+            <el-col :span="6">
+              <!--左侧列表-->
+              <Left @checked="checked"/>
+            </el-col>
+            <el-col :span="18">
+              <!--右侧-->
+              <Right/>
+            </el-col>
+          </el-row>
+        </div>
     </div>
 </template>
   
 <script setup>
-import Header from './Header/index.vue'
+import { ref, onMounted, nextTick } from 'vue';
-import Right from './Right/index.vue'
+import Right from './Right/index.vue';
-import Left from './Left/index.vue'
+import Left from './Left/index.vue';
+import CustomSelect from './components/customSelect.vue';
+
+const options = ref(['自主搜题', '校本题库', '个人题库', '智能推荐', '课堂展示', '常规作业', 'AI作业设计']);
+
+// 判断是否有选中的checkbox框
+const isChceked = ref(false);
+const viewportHeight = ref(0);
+
+// 选中的checkbox框
+const checked = (val) => {
+  console.log(val);
+  val.length > 0 ? isChceked.value = true : isChceked.value = false;
+}
+
+// 选择的作业设计类型
+const selectClick = (val) => {
+  console.log(val);
+}
+
+// 获取视口高度
+const getViewportHeight = () => {
+  return Math.max(
+    document.documentElement.clientHeight,
+    window.innerHeight || 0
+  );
+}
+
+onMounted(() => {
+  nextTick(() => {
+    window.addEventListener('resize', () => {
+      viewportHeight.value = getViewportHeight();
+    });
+  });
+});
 </script>
   
 <style lang="scss" scoped>
+.mb-4 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  background-color: #fff;
+  padding: 10px;
+}
+
 .page-template {
   flex-direction: column;
   height: 100%;
+  overflow-x: hidden; // 防止横向滚动条
+
   .tempalte-main {
     flex: 1;
   }
 }
+.no-horizontal-scroll{
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
 </style>