pswqm3ot6
/
spring-boot-online-exam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Default Changelist

Browse Source
feature/qzw
秦泽旺 2 months ago
parent 90f47d711d
commit 7061f4db4c
6 changed files with 156 additions and 159 deletions
Show Stats Download Patch File Download Diff File

108
frontend/src/components/DescriptionList/DescriptionList.vue
Unescape View File

@ -1,32 +1,36 @@
<template> <template>
<!-- 模板部分 -->
<div :class="['description-list', size, layout === 'vertical' ? 'vertical': 'horizontal']"> <div :class="['description-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
<!-- 根据size和layout动态设置类名 -->
<div v-if="title" class="title">{{ title }}</div> <div v-if="title" class="title">{{ title }}</div>
<!-- 如果存在title属性，则显示标题 -->
<a-row> <a-row>
<slot></slot> <slot></slot>
<!-- 使用slot来插入内容 -->
</a-row> </a-row>
</div> </div>
</template> </template>
<script> <script>
import { Col } from 'ant-design-vue/es/grid/' import { Col } from 'ant-design-vue/es/grid' // 导入Ant Design Vue的栅格系统组件
const Item = { const Item = {
name: 'DetailListItem', name: 'DetailListItem', // 组件名称
props: { props: {
term: { term: {
type: String, type: String, // 定义term属性，类型为字符串
default: '', default: '', // 默认值为空字符串
required: false required: false // 不是必需属性
} }
}, },
inject: { inject: {
col: { col: {
type: Number type: Number // 注入col属性，类型为数字
} }
}, },
render () { render () {
return ( return (
<Col {...{ props: responsive[this.col] }}> <Col {...{props: responsive[this.col]}}>
<div class="term">{this.$props.term}</div> <div class="term">{this.$props.term}</div>
<div class="content">{this.$slots.default}</div> <div class="content">{this.$slots.default}</div>
</Col> </Col>
@ -34,18 +38,19 @@ const Item = {
} }
} }
// 定义响应式对象，用于栅格系统的响应式布局
const responsive = { const responsive = {
1: { xs: 24 }, 1: {xs: 24},
2: { xs: 24, sm: 12 }, 2: {xs: 24, sm: 12},
3: { xs: 24, sm: 12, md: 8 }, 3: {xs: 24, sm: 12, md: 8},
4: { xs: 24, sm: 12, md: 6 } 4: {xs: 24, sm: 12, md: 6}
} }
export default { export default {
name: 'DetailList', name: 'DetailList', // 组件名称
Item: Item, Item: Item, // 注册子组件
components: { components: {
Col Col // 注册栅格组件
}, },
props: { props: {
title: { title: {
@ -69,88 +74,71 @@ export default {
default: 'horizontal' default: 'horizontal'
} }
}, },
provide () { provide() {
return { return {
col: this.col > 4 ? 4 : this.col col: this.col > 4 ? 4 : this.col // 如果col大于4，则使用4，否则使用col
} }
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/* 样式部分，使用Less编写，并且是作用域样式，只影响当前组件 */
.description-list { .description-list {
.title { .title {
color: rgba(0, 0, 0, .85); color: rgba(0, 0, 0, .85); // 标题颜色为半透明黑色
font-size: 14px; font-size: 14px; // 字体大小为14px
font-weight: 500; font-weight: 500; // 字体加粗
margin-bottom: 16px; margin-bottom: 16px; // 底部外边距为16px
} }
/deep/ .term { /deep/ .term {
color: rgba(0, 0, 0, .85); color: rgba(0, 0, 0, .85); // 项颜色为半透明黑色
display: table-cell; display: table-cell; // 显示为表格单元格
line-height: 20px; line-height: 20px; // 行高20px
margin-right: 8px; margin-right: 8px; // 右边距8px
padding-bottom: 16px; padding-bottom: 16px; // 底部内边距16px
white-space: nowrap; white-space: nowrap; // 不换行显示
&:not(:empty):after {
content: ":";
margin: 0 8px 0 2px;
position: relative;
top: -.5px;
}
} }
/deep/ .content { /deep/ .content {
color: rgba(0, 0, 0, .65); color: rgba(0, 0, 0, .65); // 内容颜色为半透明黑色
display: table-cell; display: table-cell; // 显示为表格单元格
min-height: 22px; min-height: 22px; // 最小高度222px
line-height: 22px; line-height: 22px; // 行高222px
padding-bottom: 16px; padding-bottom: 16px; // 底部内边距16px
width: 100%; width: 100%; // 宽度100%
&:empty {
content: ' ';
height: 38px;
padding-bottom: 16px;
}
} }
&.small { &.small {
.title { .title {
font-size: 14px; font-size: 14px; // 字体大小为14px
color: rgba(0, 0, 0, .65); color: rgba(0, 0, 0, .65); // 颜色为半透明黑色
font-weight: normal; font-weight: normal; // 字体不加粗
margin-bottom: 12px; margin-bottom: 12px; // 底部外边距12px
} }
/deep/ .term, .content { /deep/ .term, .content {
padding-bottom: 8px; padding-bottom: 8px; // 底部内边距8px
} }
} }
&.large { &.large {
/deep/ .term, .content { /deep/ .term, .content {
padding-bottom: 16px; padding-bottom: 16px; // 底部内边距16px
} }
.title { .title {
font-size: 16px; font-size: 16px; // 字体大小为16px
} }
} }
&.vertical { &.vertical {
.term { .term {
padding-bottom: 8px; padding-bottom: 8px; // 底部内边距8px
} }
/deep/ .term, .content { /deep/ .term, .content {
display: block; display: block; // 显示为块级元素
} }
} }
} </style>
</style>

9
frontend/src/components/DescriptionList/index.js
Unescape View File

@ -1,2 +1,7 @@
import DescriptionList from './DescriptionList' // 导入名为 DescriptionList 的Vue组件
export default DescriptionList // 这个组件位于当前目录下的 DescriptionList.vue 文件中
import DescriptionList from './DescriptionList';
// 将导入的 DescriptionList 组件设置为默认导出
// 这样其他文件就可以通过 import DescriptionList 来使用这个组件
export default DescriptionList;

135
frontend/src/components/Exception/ExceptionPage.vue
Unescape View File

@ -1,130 +1,103 @@
<template> <template>
<!-- 模板部分，定义了组件的HTML结构 -->
<div class="exception"> <div class="exception">
<div class="imgBlock"> <div class="imgBlock">
<!-- 图片区域 -->
<div class="imgEle" :style="{backgroundImage: `url(${config[type].img})`}"> <div class="imgEle" :style="{backgroundImage: `url(${config[type].img})`}">
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<h1>{{ config[type].title }}</h1> <!-- 内容区域 -->
<div class="desc">{{ config[type].desc }}</div> <h1>{{ config[type].title }}</h1> <!-- 异常标题 -->
<div class="desc">{{ config[type].desc }}</div> <!-- 异常描述 -->
<div class="actions"> <div class="actions">
<a-button type="primary" @click="handleToHome">返回首页</a-button> <a-button type="primary" @click="handleToHome">返回首页</a-button> <!-- 返回首页按钮 -->
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import types from './type' import types from './type' // 导入类型定义，可能包含不同异常类型的配置
export default { export default {
name: 'Exception', name: 'Exception', // 组件名称
props: { props: {
type: { type: {
type: String, type: String, // prop类型为字符串
default: '404' default: '404' // 默认值为'404'
} }
}, data () {
data () { return {
return { config: types // 返回类型定义，用于渲染异常信息
config: types }
} },
}, methods: {
methods: { handleToHome () { // 返回首页的方法
handleToHome () { this.$router.push({ name: 'dashboard' }) // 使用Vue Router跳转到dashboard路由
this.$router.push({ name: 'dashboard' }) }
} }
}
}
</script> </script>
<style lang="less"> <style lang="less">
@import "~ant-design-vue/lib/style/index"; @import "~ant-design-vue/lib/style/index"; // 导入Ant Design Vue的样式
.exception { .exception {
display: flex; display: flex; // 使用flex布局
align-items: center; align-items: center; // 垂直居中对齐
height: 80%; height: 80%; // 高度为视口的80%
min-height: 500px; min-height: 500px; // 最小高度为500px
.imgBlock { .imgBlock {
flex: 0 0 62.5%; flex: 0 0 62.5%; // 图片区域占据62.5%
width: 62.5%; width: 62.5%; // 宽度为62.5%
padding-right: 152px; padding-right: 152px; // 右边距为152px
zoom: 1; zoom: 1; // 图片放大为1
&::before, &::before,
&::after { &::after {
content: ' '; content: ' '; // 伪元素内容为空
display: table; display: table; // 伪元素显示为表格
} }
&::after { &::after {
clear: both; clear: both; // 清除浮动
height: 0; height: 0; // 高度为0
font-size: 0; font-size: 0; // 字体大小为0
visibility: hidden; visibility: hidden; // 隐藏伪元素
} }
} }
.imgEle { .imgEle {
float: right; float: right; // 图片浮动到右侧
width: 100%; width: 100%; // 宽度为100%
max-width: 430px; max-width: 430px; // 最大宽度为430px
height: 360px; height: 360px; // 高度为360px
background-repeat: no-repeat; background-repeat: no-repeat; // 背景不重复
background-position: 50% 50%; background-position: 50% 50%; // 背景位置在中心
background-size: contain; background-size: contain; // 背景大小包含整个元素
} }
.content { .content {
flex: auto; flex: auto; // 内容区域flex增长
h1 { h1 {
margin-bottom: 24px; margin-bottom: 24px; // 底部外边距为24px
color: #434e59; color: #434e59; // 字体颜色
font-weight: 600; font-weight: 600; // 字体加粗
font-size: 72px; font-size: 72px; // 字体大小为72px
line-height: 72px; line-height: 72px; // 行高为72px
} }
.desc { .desc {
margin-bottom: 16px; margin-bottom: 16px; // 底部外边距为16px
color: @text-color-secondary; color: @text-color-secondary; // 字体颜色为次要文字颜色
font-size: 20px; font-size: 20px; // 字体大小为20px
line-height: 28px; line-height: 28px; // 行高为28px
} }
.actions { .actions {
button:not(:last-child) { button:not(:last-child) {
margin-right: 8px; margin-right: 8px; // 除了最后一个按钮，其他按钮右边距为8px
} }
} }
} }
} </style>
@media screen and (max-width: @screen-xl) {
.exception {
.imgBlock {
padding-right: 88px;
}
}
}
@media screen and (max-width: @screen-sm) {
.exception {
display: block;
text-align: center;
.imgBlock {
margin: 0 auto 24px;
padding-right: 0;
}
}
}
@media screen and (max-width: @screen-xs) {
.exception {
.imgBlock {
margin-bottom: -24px;
overflow: hidden;
}
}
}
</style>

8
frontend/src/components/Exception/index.js
Unescape View File

@ -1,2 +1,6 @@
import ExceptionPage from './ExceptionPage.vue' // 导入名为 ExceptionPage 的Vue组件，该组件位于当前目录下的 ExceptionPage.vue 文件中
export default ExceptionPage import ExceptionPage from './ExceptionPage.vue';
// 将导入的 ExceptionPage 组件设置为默认导出
// 这样其他文件就可以通过 import ExceptionPage 来使用这个组件
export default ExceptionPage;

20
frontend/src/components/Exception/type.js
Unescape View File

@ -1,19 +1,33 @@
// 定义一个对象，用于存储不同HTTP状态码的错误信息
const types = { const types = {
// 定义403状态码的错误信息
403: { 403: {
img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg', // 错误页面的图片URL
img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOYFcZDnb.svg',
// 错误标题
title: '403', title: '403',
// 错误描述
desc: '抱歉，你无权访问该页面' desc: '抱歉，你无权访问该页面'
}, },
// 定义404状态码的错误信息
404: { 404: {
img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg', // 错误页面的图片URL
img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozI.svg',
// 错误标题
title: '404', title: '404',
// 错误描述
desc: '抱歉，你访问的页面不存在或仍在开发中' desc: '抱歉，你访问的页面不存在或仍在开发中'
}, },
// 定义500状态码的错误信息
500: { 500: {
// 错误页面的图片URL
img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg', img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
// 错误标题
title: '500', title: '500',
// 错误描述
desc: '抱歉，服务器出错了' desc: '抱歉，服务器出错了'
} }
} }
export default types // 导出types对象，使其可以在其他模块中使用
export default types;

35
frontend/src/components/_util/util.js
Unescape View File

@ -1,46 +1,59 @@
/** /**
* components util * 工具组件集合
*/ */
/** /**
* 清理空值，对象 * 清理数组中的空值或空对象
* @param children * @param {Array} children - 要处理的数组，默认为空数组
* @returns {*[]} * @returns {Array} - 过滤后的数组
*/ */
export function filterEmpty (children = []) { export function filterEmpty(children = []) {
// 使用Array.prototype.filter方法移除数组中的空值或空对象
return children.filter(c => c.tag || (c.text && c.text.trim() !== '')) return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
} }
/** /**
* 获取字符串长度，英文字符 长度1，中文字符长度2 * 获取字符串的完整长度，英文字符长度为1，中文字符长度为2
* @param {*} str * @param {string} str - 要处理的字符串，默认为空字符串
* @returns {number} - 字符串的完整长度
*/ */
export const getStrFullLength = (str = '') => export const getStrFullLength = (str = '') =>
// 使用Array.prototype.split方法将字符串转换为字符数组
str.split('').reduce((pre, cur) => { str.split('').reduce((pre, cur) => {
// 获取字符的Unicode编码
const charCode = cur.charCodeAt(0) const charCode = cur.charCodeAt(0)
// 如果字符是ASCII字符（英文字符），则长度加1
if (charCode >= 0 && charCode <= 128) { if (charCode >= 0 && charCode <= 128) {
return pre + 1 return pre + 1
} }
// 如果字符是双字节字符（中文字符），则长度加2
return pre + 2 return pre + 2
}, 0) }, 0)
/** /**
* 截取字符串，根据 maxLength 截取后返回 * 根据最大长度截取字符串，保留完整字符
* @param {*} str * @param {string} str - 要截取的字符串，默认为空字符串
* @param {*} maxLength * @param {number} maxLength - 最大长度，默认无限制
* @returns {string} - 截取后的字符串
*/ */
export const cutStrByFullLength = (str = '', maxLength) => { export const cutStrByFullLength = (str = '', maxLength) => {
let showLength = 0 let showLength = 0
// 使用Array.prototype.split方法将字符串转换为字符数组
return str.split('').reduce((pre, cur) => { return str.split('').reduce((pre, cur) => {
// 获取字符的Unicode编码
const charCode = cur.charCodeAt(0) const charCode = cur.charCodeAt(0)
// 如果字符是ASCII字符（英文字符），则长度加1
if (charCode >= 0 && charCode <= 128) { if (charCode >= 0 && charCode <= 128) {
showLength += 1 showLength += 1
} else { } else {
// 如果字符是双字节字符（中文字符），则长度加2
showLength += 2 showLength += 2
} }
// 如果当前长度小于等于最大长度，则继续累加字符
if (showLength <= maxLength) { if (showLength <= maxLength) {
return pre + cur return pre + cur
} }
// 如果超过最大长度，则返回当前累加的字符串
return pre return pre
}, '') }, '')
} }
Write Preview
Loading…
Cancel
Save