feat(layout): 为多页面添加侧边栏布局组件
- 在admid页面和class页面包裹el-container，插入Sidebar侧边栏组件 - 在LearningPlan和PlanTTS页面同样新增侧边栏布局 - 重构Header组件样式，采用fluent风格透明卡片和按钮样式 - 增加main.css中panel-shell的样式定义以支持新布局视觉效果 - 优化部分按钮及菜单交互样式，提升整体一致性与视觉体验
This commit is contained in:
@@ -5,90 +5,74 @@
|
||||
<Header></Header>
|
||||
</el-header>
|
||||
|
||||
<el-main class="p-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<div class="text-lg font-semibold mb-4">上传图片</div>
|
||||
<el-upload
|
||||
:show-file-list="false"
|
||||
:http-request="doUpload"
|
||||
accept="image/*"
|
||||
>
|
||||
<el-button type="primary">选择图片并上传</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<div class="text-lg font-semibold mb-4">结果集</div>
|
||||
<el-form :inline="true" class="mb-4">
|
||||
<el-form-item label="班级">
|
||||
<el-select v-model="classId" placeholder="选择班级" clearable filterable @change="onClassChange" style="min-width: 220px">
|
||||
<el-option
|
||||
v-for="item in classOptions"
|
||||
:key="item.id"
|
||||
:label="`${item.title}${item.gradeName ? '（' + item.gradeName + '）' : ''}`"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="年级">
|
||||
<el-select v-model="gradeId" placeholder="选择年级" clearable filterable style="min-width: 220px">
|
||||
<el-option
|
||||
v-for="g in gradeOptions"
|
||||
:key="g.id"
|
||||
:label="g.title"
|
||||
:value="g.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学生姓名">
|
||||
<el-input v-model="studentName" placeholder="学生姓名" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
:data="list"
|
||||
border
|
||||
class="w-full"
|
||||
v-loading="loading"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column prop="studentName" label="学生姓名" min-width="70" />
|
||||
<el-table-column prop="examWordsTitle" label="试题名称" min-width="100" />
|
||||
<el-table-column prop="correctWordCount" label="正确词数" width="110" />
|
||||
<el-table-column prop="wrongWordCount" label="错误词数" width="110" />
|
||||
<el-table-column label="完成状态" width="110">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.isFinished === 1 ? 'success' : 'info'">
|
||||
{{ row.isFinished === 1 ? '已完成' : '未完成' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startDate" label="开始时间" min-width="160">
|
||||
<template #default="{ row }">
|
||||
{{ row.startDate.replace('T', ' ') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="msg" label="判卷结算" min-width="160" />
|
||||
</el-table>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next, sizes, total"
|
||||
:total="totalCount"
|
||||
:page-size="pageSize"
|
||||
:current-page="pageNo"
|
||||
@current-change="handlePageChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
<el-container>
|
||||
<el-aside width="200px" class="pt-4">
|
||||
<Sidebar />
|
||||
</el-aside>
|
||||
<el-main class="p-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<div class="text-lg font-semibold mb-4">上传图片</div>
|
||||
<el-upload :show-file-list="false" :http-request="doUpload" accept="image/*">
|
||||
<el-button type="primary">选择图片并上传</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<div class="text-lg font-semibold mb-4">结果集</div>
|
||||
<el-form :inline="true" class="mb-4">
|
||||
<el-form-item label="班级">
|
||||
<el-select v-model="classId" placeholder="选择班级" clearable filterable
|
||||
@change="onClassChange" style="min-width: 220px">
|
||||
<el-option v-for="item in classOptions" :key="item.id"
|
||||
:label="`${item.title}${item.gradeName ? '（' + item.gradeName + '）' : ''}`"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="年级">
|
||||
<el-select v-model="gradeId" placeholder="选择年级" clearable filterable
|
||||
style="min-width: 220px">
|
||||
<el-option v-for="g in gradeOptions" :key="g.id" :label="g.title"
|
||||
:value="g.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学生姓名">
|
||||
<el-input v-model="studentName" placeholder="学生姓名" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="list" border class="w-full" v-loading="loading"
|
||||
@row-click="handleRowClick">
|
||||
<el-table-column prop="studentName" label="学生姓名" min-width="70" />
|
||||
<el-table-column prop="examWordsTitle" label="试题名称" min-width="100" />
|
||||
<el-table-column prop="correctWordCount" label="正确词数" width="110" />
|
||||
<el-table-column prop="wrongWordCount" label="错误词数" width="110" />
|
||||
<el-table-column label="完成状态" width="110">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.isFinished === 1 ? 'success' : 'info'">
|
||||
{{ row.isFinished === 1 ? '已完成' : '未完成' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startDate" label="开始时间" min-width="160">
|
||||
<template #default="{ row }">
|
||||
{{ row.startDate.replace('T', ' ') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="msg" label="判卷结算" min-width="160" />
|
||||
</el-table>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<el-pagination background layout="prev, pager, next, sizes, total" :total="totalCount"
|
||||
:page-size="pageSize" :current-page="pageNo" @current-change="handlePageChange"
|
||||
@size-change="handleSizeChange" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ExamWordsDetailCard v-model="showDetail" :id="selectedId" />
|
||||
</el-main>
|
||||
|
||||
<ExamWordsDetailCard v-model="showDetail" :id="selectedId" />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
@@ -101,6 +85,7 @@ import { ref, onMounted } from 'vue'
|
||||
import { uploadExamWordsPng, getExamWordsResult } from '@/api/exam'
|
||||
import { getClassList } from '@/api/class'
|
||||
import { getGradeList } from '@/api/grade'
|
||||
import Sidebar from '@/layouts/components/Sidebar.vue'
|
||||
|
||||
const list = ref([])
|
||||
const pageNo = ref(1)
|
||||
@@ -196,5 +181,4 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user