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 52954f1563
commit 4d9202bace
7 changed files with 263 additions and 270 deletions
Show Stats Download Patch File Download Diff File

7
frontend/src/components/PageLoading/index.jsx
Unescape View File

@ -1,10 +1,13 @@
import { Spin } from 'ant-design-vue' // 从 'ant-design-vue' 这个 UI 组件库中导入 Spin 组件。Spin 组件通常用于在页面上展示加载动画效果，告知用户当前页面正在进行数据加载等操作
import { Spin } from 'ant-design-vue';
export default { export default {
name: 'PageLoading', name: 'PageLoading',
render () { render () {
// render 函数用于定义组件的渲染内容，这里返回一个包含了 Spin 组件的虚拟 DOM 结构（在 Vue 中，使用类似 JSX 的语法来描述）
return (<div style={{ paddingTop: 100, textAlign: 'center' }}> return (<div style={{ paddingTop: 100, textAlign: 'center' }}>
// 使用导入的 Spin 组件，设置其 size 属性为 'large'，使加载动画以较大的尺寸展示，增强视觉效果，更醒目地告知用户正在加载
<Spin size="large" /> <Spin size="large" />
</div>) </div>)
} }
} }

132
frontend/src/components/Result/Result.vue
Unescape View File

@ -1,21 +1,32 @@
<template> <template>
<!-- 创建一个带有 result 类名的 div 容器，作为整个结果展示组件的外层包裹元素 -->
<div class="result"> <div class="result">
<!-- 内部的一个 div 容器，用于放置图标相关元素 -->
<div> <div>
<a-icon :class="{ 'icon': true, [`${type}`]: true }" :type="localIsSuccess ? 'check-circle' : 'close-circle'"/> <!-- 使用 a-icon 组件来展示图标，通过动态绑定 class 和 type 属性来根据不同情况显示相应图标 -->
<!-- 根据表达式判断，如果 localIsSuccess 为 true，则显示成功图标（check-circle），否则显示失败图标（close-circle） -->
<!-- 同时，根据 type 属性的值动态添加对应的类名（success 或 error），用于样式控制 -->
<a-icon :class="{ 'icon': true, [`${type}`]: true }" :type="localIsSuccess? 'check-circle' : 'close-circle'"/>
</div> </div>
<!-- 创建一个带有 title 类名的 div 容器，用于展示标题内容 -->
<div class="title"> <div class="title">
<!-- 使用具名插槽（name="title"），如果外部在使用该组件时传入了名为 title 的插槽内容，则优先显示插槽内容，否则显示组件内部绑定的 title 属性值 -->
<slot name="title"> <slot name="title">
{{ title }} {{ title }}
</slot> </slot>
</div> </div>
<!-- 创建一个带有 description 类名的 div 容器，用于展示描述性文字内容 -->
<div class="description"> <div class="description">
<!-- 同样使用具名插槽（name="description"），若外部传入相应插槽内容则展示插槽内容，否则展示组件内部绑定的 description 属性值 -->
<slot name="description"> <slot name="description">
{{ description }} {{ description }}
</slot> </slot>
</div> </div>
<!-- 创建一个带有 extra 类名的 div 容器，通过 v-if 指令判断，如果组件使用时有默认插槽（$slots.default 存在），则展示默认插槽内容 -->
<div class="extra" v-if="$slots.default"> <div class="extra" v-if="$slots.default">
<slot></slot> <slot></slot>
</div> </div>
<!-- 创建一个带有 action 类名的 div 容器，利用 v-if 指令判断，当存在名为 action 的插槽（$slots.action 存在）时，展示 action 插槽内容 -->
<div class="action" v-if="$slots.action"> <div class="action" v-if="$slots.action">
<slot name="action"></slot> <slot name="action"></slot>
</div> </div>
@ -23,33 +34,39 @@
</template> </template>
<script> <script>
// 定义一个名为 resultEnum 的常量数组，包含了两种结果状态对应的字符串值，分别是 'success' 和 'error'，用于后续属性验证等操作
const resultEnum = ['success', 'error'] const resultEnum = ['success', 'error']
export default { export default {
name: 'Result', name: 'Result',
props: { props: {
/** @Deprecated */ /** @Deprecated 表示该属性已被弃用，建议后续不再使用此属性，此处定义的 isSuccess 用于表示结果是否成功 */
isSuccess: { isSuccess: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 定义 type 属性，类型为字符串，默认值取自 resultEnum 数组的第一个元素（即'success'）
type: { type: {
type: String, type: String,
default: resultEnum[0], default: resultEnum[0],
validator (val) { // 定义一个验证器函数，用于验证传入的 type 属性值是否在 resultEnum 数组中，确保传入的值是合法的预期值
validator(val) {
return (val) => resultEnum.includes(val) return (val) => resultEnum.includes(val)
} }
}, },
// 定义 title 属性，类型为字符串，默认值为空字符串，用于展示主要的标题文字内容
title: { title: {
type: String, type: String,
default: '' default: ''
}, },
// 定义 description 属性，类型为字符串，默认值为空字符串，用于展示辅助说明性的文字内容
description: { description: {
type: String, type: String,
default: '' default: ''
} }
}, },
computed: { computed: {
// 定义一个计算属性 localIsSuccess，通过判断 type 属性的值是否等于 resultEnum 数组中的第一个元素（'success'）来确定当前是否处于成功状态
localIsSuccess: function () { localIsSuccess: function () {
return this.type === resultEnum[0] return this.type === resultEnum[0]
} }
@ -58,52 +75,71 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.result { /* 对类名为 result 的元素设置样式 */
text-align: center; .result {
width: 72%; // 设置文本水平对齐方式为居中对齐
margin: 0 auto; text-align: center;
padding: 24px 0 8px; // 设置宽度占父元素的 72%
width: 72%;
// 设置水平方向自动居中（左右外边距自动计算为相等值）
margin: 0 auto;
// 设置上下内边距，上内边距 24px，下内边距 8px
padding: 24px 0 8px;
.icon { .icon {
font-size: 72px; // 设置图标字体大小为 72px，并且行高也为 72px，使图标垂直居中显示，同时设置底部外边距为 24px
line-height: 72px; font-size: 72px;
margin-bottom: 24px; line-height: 72px;
} margin-bottom: 24px;
.success {
color: #52c41a;
}
.error {
color: red;
}
.title {
font-size: 24px;
color: rgba(0, 0, 0, .85);
font-weight: 500;
line-height: 32px;
margin-bottom: 16px;
}
.description {
font-size: 14px;
line-height: 22px;
color: rgba(0, 0, 0, 0.45);
margin-bottom: 24px;
}
.extra {
background: #fafafa;
padding: 24px 40px;
border-radius: 2px;
text-align: left;
}
.action {
margin-top: 32px;
}
} }
.mobile { .success {
.result { // 当元素具有 success 类名时，设置文字颜色为特定的绿色（#52c41a），可能用于表示成功状态的图标或文字颜色
width: 100%; color: #52c41a;
margin: 0 auto; }
padding: unset;
} .error {
// 当元素具有 error 类名时，设置文字颜色为红色，用于表示失败状态的图标或文字颜色
color: red;
}
.title {
// 设置标题文字的字体大小为 24px，颜色为带有一定透明度的黑色（rgba 颜色模式），字体粗细为 500，行高为 32px，底部外边距为 16px
font-size: 24px;
color: rgba(0, 0, 0, .85);
font-weight: 500;
line-height: 32px;
margin-bottom: 16px;
}
.description {
// 设置描述文字的字体大小为 14px，行高为 22px，颜色为带有一定透明度的灰色（rgba 颜色模式），底部外边距为 24px
font-size: 14px;
line-height: 22px;
color: rgba(0, 0, 0, 0.45);
margin-bottom: 24px;
}
.extra {
// 设置背景颜色为浅灰色（#fafafa），设置内边距，左右内边距分别为 40px，设置边框圆角为 2px，文本对齐方式改为左对齐
background: #fafafa;
padding: 24px 40px;
border-radius: 2px;
text-align: left;
}
.action {
// 设置顶部外边距为 32px，可能用于与下方元素隔开一定距离，便于布局和视觉区分
margin-top: 32px;
} }
</style> }
.mobile {
.result {
// 在类名为 mobile 的父元素下，针对类名为 result 的元素设置特定样式，将宽度设置为 100%（可能用于移动端适配，占满屏幕宽度），清除默认的上下内边距（unset）
width: 100%;
margin: 0 auto;
padding: unset;
}
}
</style>

7
frontend/src/components/Result/index.js
Unescape View File

@ -1,2 +1,5 @@
import Result from './Result.vue' // 从当前目录下的 Result.vue 文件中导入名为 Result 的模块（通常在 Vue 项目里，Result.vue 文件会定义一个 Vue 组件）
export default Result import Result from './Result.vue';
// 将导入的 Result 模块（也就是那个 Vue 组件）原样导出，这样在其他模块中就能通过相应的导入语句引入这个 Result 组件，便于在项目的其他地方复用该组件
export default Result;

248
frontend/src/components/SettingDrawer/SettingDrawer.vue
Unescape View File

@ -1,5 +1,7 @@
<template> <template>
<!-- 创建一个带有 setting-drawer 类名的 div 容器，并添加 ref 属性为 settingDrawer，方便后续在 JavaScript 代码中通过 $refs 获取该元素 -->
<div class="setting-drawer" ref="settingDrawer"> <div class="setting-drawer" ref="settingDrawer">
<!-- 使用 a-drawer 组件（可能来自 Ant Design Vue 等相关 UI 组件库）创建一个抽屉式的侧边栏组件，以下是对其属性的配置 -->
<a-drawer <a-drawer
width="300" width="300"
placement="right" placement="right"
@ -9,18 +11,27 @@
:getContainer="() => $refs.settingDrawer" :getContainer="() => $refs.settingDrawer"
:style="{}" :style="{}"
> >
<!-- 创建一个名为 setting-drawer-index-content 的 div 容器，用于放置抽屉内的各种设置内容 -->
<div class="setting-drawer-index-content"> <div class="setting-drawer-index-content">
<!-- 创建一个 div 容器，设置底部外边距为 24px，用于对整体风格设置部分进行整体布局 -->
<div :style="{ marginBottom: '24px' }"> <div :style="{ marginBottom: '24px' }">
<!-- 创建一个 h3 标题元素，展示“整体风格设置”的标题内容 -->
<h3 class="setting-drawer-index-title">整体风格设置</h3> <h3 class="setting-drawer-index-title">整体风格设置</h3>
<!-- 创建一个名为 setting-drawer-index-blockChecbox 的 div 容器，用于放置与整体风格相关的选项元素，设置为弹性布局（display: flex）方便内部元素排列 -->
<div class="setting-drawer-index-blockChecbox"> <div class="setting-drawer-index-blockChecbox">
<!-- 使用 a-tooltip 组件（用于展示提示信息的工具提示组件），当鼠标悬停在对应元素上时显示提示内容 -->
<a-tooltip> <a-tooltip>
<!-- 定义 a-tooltip 组件的提示内容插槽 -->
<template slot="title"> <template slot="title">
暗色菜单风格 暗色菜单风格
</template> </template>
<!-- 创建一个名为 setting-drawer-index-item 的 div 容器，用于单个风格选项的展示，添加点击事件，点击时调用 handleMenuTheme 方法并传入 'dark' 参数 -->
<div class="setting-drawer-index-item" @click="handleMenuTheme('dark')"> <div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
<!-- 展示对应风格的图片，设置图片的源地址 -->
<img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark"> <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
<!-- 创建一个名为 setting-drawer-index-selectIcon 的 div 容器，用于显示选中图标（当 navTheme 为 'dark' 时显示），通过 v-if 指令进行条件渲染 -->
<div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'"> <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
<a-icon type="check"/> <a-icon type="check"/>
</div> </div>
@ -33,7 +44,7 @@
</template> </template>
<div class="setting-drawer-index-item" @click="handleMenuTheme('light')"> <div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light"> <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
<div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'"> <div class="setting-drawer-index-selectIcon" v-if="navTheme!== 'dark'">
<a-icon type="check"/> <a-icon type="check"/>
</div> </div>
</div> </div>
@ -41,26 +52,34 @@
</div> </div>
</div> </div>
<!-- 再创建一个 div 容器，设置底部外边距为 24px，用于对主题色设置部分进行整体布局 -->
<div :style="{ marginBottom: '24px' }"> <div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">主题色</h3> <h3 class="setting-drawer-index-title">主题色</h3>
<!-- 创建一个高度为 20px 的 div 容器，用于放置主题色相关的选项元素 -->
<div style="height: 20px"> <div style="height: 20px">
<!-- 使用 v-for 指令遍历 colorList 数组，为每个颜色选项创建一个 a-tooltip 组件，用于展示颜色名称的提示信息 -->
<a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index"> <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
<template slot="title"> <template slot="title">
{{ item.key }} {{ item.key }}
</template> </template>
<!-- 使用 a-tag 组件展示每个颜色选项，设置颜色属性为当前颜色项的 color 值，添加点击事件，点击时调用 changeColor 方法并传入当前颜色值 -->
<a-tag :color="item.color" @click="changeColor(item.color)"> <a-tag :color="item.color" @click="changeColor(item.color)">
<!-- 如果当前颜色项的 color 值与 primaryColor 相等，则显示一个选中图标（a-icon） -->
<a-icon type="check" v-if="item.color === primaryColor"></a-icon> <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
</a-tag> </a-tag>
</a-tooltip> </a-tooltip>
</div> </div>
</div> </div>
<!-- 使用 a-divider 组件绘制一条分割线，用于区分不同的设置板块 -->
<a-divider /> <a-divider />
<!-- 创建一个 div 容器，设置底部外边距为 24px，用于对导航模式设置部分进行整体布局 -->
<div :style="{ marginBottom: '24px' }"> <div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">导航模式</h3> <h3 class="setting-drawer-index-title">导航模式</h3>
<!-- 创建一个名为 setting-drawer-index-blockChecbox 的 div 容器，用于放置与导航模式相关的选项元素，设置为弹性布局方便内部元素排列 -->
<div class="setting-drawer-index-blockChecbox"> <div class="setting-drawer-index-blockChecbox">
<a-tooltip> <a-tooltip>
<template slot="title"> <template slot="title">
@ -80,29 +99,35 @@
</template> </template>
<div class="setting-drawer-index-item" @click="handleLayout('topmenu')"> <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu"> <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">
<div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'"> <div class="setting-drawer-index-selectIcon" v-if="layoutMode!== 'sidemenu'">
<a-icon type="check"/> <a-icon type="check"/>
</div> </div>
</div> </div>
</a-tooltip> </a-tooltip>
</div> </div>
<!-- 创建一个 div 容器，设置顶部外边距为 24px，用于放置导航模式相关的更多设置选项 -->
<div :style="{ marginTop: '24px' }"> <div :style="{ marginTop: '24px' }">
<!-- 使用 a-list 组件（可能用于展示列表形式的设置项），设置 split 属性为 false，表示列表项之间不显示分割线 -->
<a-list :split="false"> <a-list :split="false">
<a-list-item> <a-list-item>
<!-- 使用 a-tooltip 组件为当前设置项添加提示信息，鼠标悬停时显示 -->
<a-tooltip slot="actions"> <a-tooltip slot="actions">
<template slot="title"> <template slot="title">
该设定仅 [顶部栏导航] 时有效 该设定仅 [顶部栏导航] 时有效
</template> </template>
<!-- 使用 a-select 组件创建一个下拉选择框，设置尺寸为 small，宽度为 80px，默认值为 contentWidth，添加 change 事件，当选项改变时调用 handleContentWidthChange 方法 -->
<a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange"> <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
<a-select-option value="Fixed">固定</a-select-option> <a-select-option value="Fixed">固定</a-select-option>
<a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option> <a-select-option value="Fluid" v-if="layoutMode!== 'sidemenu'">流式</a-select-option>
</a-select> </a-select>
</a-tooltip> </a-tooltip>
<!-- 使用 a-list-item-meta 组件展示列表项的元信息，这里主要是设置标题内容 -->
<a-list-item-meta> <a-list-item-meta>
<div slot="title">内容区域宽度</div> <div slot="title">内容区域宽度</div>
</a-list-item-meta> </a-list-item-meta>
</a-list-item> </a-list-item>
<a-list-item> <a-list-item>
<!-- 使用 a-switch 组件创建一个开关按钮，设置尺寸为 small，默认选中状态为 fixedHeader 的值，添加 change 事件，当开关状态改变时调用 handleFixedHeader 方法 -->
<a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" /> <a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" />
<a-list-item-meta> <a-list-item-meta>
<div slot="title">固定 Header</div> <div slot="title">固定 Header</div>
@ -113,14 +138,14 @@
<a-list-item-meta> <a-list-item-meta>
<a-tooltip slot="title" placement="left"> <a-tooltip slot="title" placement="left">
<template slot="title">固定 Header 时可配置</template> <template slot="title">固定 Header 时可配置</template>
<div :style="{ opacity: !fixedHeader ? '0.5' : '1' }">下滑时隐藏 Header</div> <div :style="{ opacity:!fixedHeader? '0.5' : '1' }">下滑时隐藏 Header</div>
</a-tooltip> </a-tooltip>
</a-list-item-meta> </a-list-item-meta>
</a-list-item> </a-list-item>
<a-list-item > <a-list-item >
<a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :defaultChecked="fixSiderbar" @change="handleFixSiderbar" /> <a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :defaultChecked="fixSiderbar" @change="handleFixSiderbar" />
<a-list-item-meta> <a-list-item-meta>
<div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">固定侧边菜单</div> <div slot="title" :style="{ textDecoration: layoutMode === 'topmenu'? 'line-through' : 'unset' }">固定侧边菜单</div>
</a-list-item-meta> </a-list-item-meta>
</a-list-item> </a-list-item>
</a-list> </a-list>
@ -128,6 +153,7 @@
</div> </div>
<a-divider /> <a-divider />
<!-- 创建一个 div 容器，设置底部外边距为 24px，用于对其他设置部分进行整体布局 -->
<div :style="{ marginBottom: '24px' }"> <div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">其他设置</h3> <h3 class="setting-drawer-index-title">其他设置</h3>
<div> <div>
@ -149,11 +175,13 @@
</div> </div>
<a-divider /> <a-divider />
<div :style="{ marginBottom: '24px' }"> <div :style="{ marginBottom: '24px' }">
<!-- 使用 a-button 组件创建一个按钮，添加点击事件，点击时调用 doCopy 方法，设置显示图标为 'copy'，并设置按钮占满父元素宽度（block 属性），按钮文本为“拷贝设置” -->
<a-button <a-button
@click="doCopy" @click="doCopy"
icon="copy" icon="copy"
block block
>拷贝设置</a-button> >拷贝设置</a-button>
<!-- 使用 a-alert 组件创建一个警告提示框，设置提示类型为 'warning'，设置顶部外边距为 24px -->
<a-alert type="warning" :style="{ marginTop: '24px' }"> <a-alert type="warning" :style="{ marginTop: '24px' }">
<span slot="message"> <span slot="message">
配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件 配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件
@ -162,8 +190,11 @@
</a-alert> </a-alert>
</div> </div>
</div> </div>
<!-- 创建一个名为 setting-drawer-index-handle 的 div 容器，用于控制抽屉的显示和隐藏，添加点击事件，点击时调用 toggle 方法 -->
<div class="setting-drawer-index-handle" @click="toggle"> <div class="setting-drawer-index-handle" @click="toggle">
<!-- 如果抽屉当前不可见（visible 为 false），则显示设置图标（a-icon） -->
<a-icon type="setting" v-if="!visible"/> <a-icon type="setting" v-if="!visible"/>
<!-- 如果抽屉当前可见（visible 为 true），则显示关闭图标（a-icon） -->
<a-icon type="close" v-else/> <a-icon type="close" v-else/>
</div> </div>
</a-drawer> </a-drawer>
@ -171,22 +202,31 @@
</template> </template>
<script> <script>
import { DetailList } from '../../components' // 从项目相对路径 '../../components' 导入 DetailList 模块（具体功能取决于该模块的定义，可能是一个组件或者功能函数集合等）
import SettingItem from './SettingItem' import { DetailList } from '../../components';
import config from '../../config/defaultSettings' // 从当前目录下的 SettingItem 文件（可能是一个 Vue 组件定义文件）导入 SettingItem 模块
import { updateTheme, updateColorWeak, colorList } from './settingConfig' import SettingItem from './SettingItem';
import { mixin, mixinDevice } from '../../utils/mixin' // 从项目相对路径 '../../config/defaultSettings' 导入 config 模块（可能包含了项目的一些默认配置信息）
import config from '../../config/defaultSettings';
// 从当前目录下的 settingConfig 文件中导入 updateTheme、updateColorWeak、colorList 这几个函数或变量（可能与主题设置、颜色设置相关的功能模块）
import { updateTheme, updateColorWeak, colorList } from './settingConfig';
// 从项目相对路径 '../../utils/mixin' 导入 mixin 和 mixinDevice 模块（可能是 Vue 中的混入对象，用于在组件中混入一些通用的方法、数据等）
import { mixin, mixinDevice } from '../../utils/mixin';
export default { export default {
components: { components: {
// 在组件内部注册 DetailList 和 SettingItem 组件，使其可以在模板中使用
DetailList, DetailList,
SettingItem SettingItem
}, },
mixins: [mixin, mixinDevice], mixins: [mixin, mixinDevice],
data () { data () {
return { return {
// 定义 visible 属性，用于控制抽屉组件（a-drawer）的显示与隐藏，初始值为 true
visible: true, visible: true,
// 将导入的 colorList 赋值给组件内的 colorList 属性，用于存储颜色选项列表（可能在模板中用于展示主题色等相关设置选项）
colorList, colorList,
// 通过 Object.assign 创建一个 baseConfig 对象，将导入的 config 对象进行深拷贝（浅拷贝的一种模拟方式，实际不完全等同于深拷贝，但对于简单对象通常能满足需求），用于存储组件内的基础配置信息，后续对配置的修改会基于这个对象进行，避免直接修改原始的 config 对象
baseConfig: Object.assign({}, config) baseConfig: Object.assign({}, config)
} }
}, },
@ -194,177 +234,45 @@ export default {
}, },
mounted () { mounted () {
const vm = this const vm = this;
// 使用 setTimeout 设置一个延迟为 16 毫秒的定时器，在定时器回调函数中将 visible 属性设置为 false，可能用于初始时短暂展示抽屉后自动隐藏，或者是等待某些资源加载完成后再隐藏等操作
setTimeout(() => { setTimeout(() => {
vm.visible = false vm.visible = false;
}, 16) }, 16);
// 当主题色不是默认色时，才进行主题编译 // 当组件内的 primaryColor 属性与导入的 config 中的 primaryColor 不相等时（即主题色不是默认色时），调用 updateTheme 函数更新主题，传入当前的 primaryColor 值来改变主题颜色相关的样式
if (this.primaryColor !== config.primaryColor) { if (this.primaryColor!== config.primaryColor) {
updateTheme(this.primaryColor) updateTheme(this.primaryColor);
} }
if (this.colorWeak !== config.colorWeak) { // 当组件内的 colorWeak 属性与导入的 config 中的 colorWeak 不相等时，调用 updateColorWeak 函数更新色弱模式相关的样式，传入当前的 colorWeak 值来切换色弱模式的应用
updateColorWeak(this.colorWeak) if (this.colorWeak!== config.colorWeak) {
updateColorWeak(this.colorWeak);
} }
}, },
methods: { methods: {
showDrawer () { showDrawer () {
this.visible = true // 用于将抽屉组件设置为显示状态，通过将 visible 属性设置为 true 来实现
this.visible = true;
}, },
onClose () { onClose () {
this.visible = false // 当抽屉关闭时调用的方法，将 visible 属性设置为 false，隐藏抽屉组件
this.visible = false;
}, },
toggle () { toggle () {
this.visible = !this.visible // 用于切换抽屉组件的显示与隐藏状态，通过对 visible 属性取反来实现
this.visible =!this.visible;
}, },
onColorWeak (checked) { onColorWeak (checked) {
this.baseConfig.colorWeak = checked // 当色弱模式开关（可能是一个 a-switch 组件触发的事件）状态改变时调用的方法，接收当前开关的选中状态（checked 参数）
this.$store.dispatch('ToggleWeak', checked) // 将 baseConfig 对象中的 colorWeak 属性更新为当前开关的状态值，用于记录配置信息的变化
updateColorWeak(checked) this.baseConfig.colorWeak = checked;
// 调用 $store.dispatch 方法触发一个名为 'ToggleWeak' 的 Vuex 动作（假设项目使用了 Vuex 进行状态管理），并传入当前的开关状态值，用于在全局状态中更新色弱模式相关的状态
this.$store.dispatch('ToggleWeak', checked);
// 调用 updateColorWeak 函数根据当前开关状态更新页面的色弱模式相关样式
updateColorWeak(checked);
}, },
onMultiTab (checked) { onMultiTab (checked) {
this.baseConfig.multiTab = checked // 当多页签模式开关状态改变时调用的方法，类似 onColorWeak 方法的逻辑
this.$store.dispatch('ToggleMultiTab', checked) // 更新 baseConfig 对象中的 multiTab 属性记录配置变化
}, this.baseConfig.multiTab = checked;
handleMenuTheme (theme) { // 通过 $store.dispatch 触发 'ToggleMultiTab' 动作在全局状态中更新多页签模式相关状态
this.baseConfig.navTheme = theme this.$store.dispatch('ToggleMulti
this.$store.dispatch('ToggleTheme', theme)
},
doCopy () {
const text = `export default {
primaryColor: '${this.baseConfig.primaryColor}', // primary color of ant design
navTheme: '${this.baseConfig.navTheme}', // theme for nav menu
layout: '${this.baseConfig.layout}', // nav menu position: sidemenu or topmenu
contentWidth: '${this.baseConfig.contentWidth}', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: ${this.baseConfig.fixedHeader}, // sticky header
fixSiderbar: ${this.baseConfig.fixSiderbar}, // sticky siderbar
autoHideHeader: ${this.baseConfig.autoHideHeader}, // auto hide header
colorWeak: ${this.baseConfig.colorWeak},
multiTab: ${this.baseConfig.multiTab},
production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
// vue-ls options
storageOptions: {
namespace: 'pro__',
name: 'ls',
storage: 'local',
}
}`
this.$copyText(text).then(message => {
console.log('copy', message)
this.$message.success('复制完毕')
}).catch(err => {
console.log('copy.err', err)
this.$message.error('复制失败')
})
},
handleLayout (mode) {
this.baseConfig.layout = mode
this.$store.dispatch('ToggleLayoutMode', mode)
// 因为顶部菜单不能固定左侧菜单栏，所以强制关闭
//
this.handleFixSiderbar(false)
},
handleContentWidthChange (type) {
this.baseConfig.contentWidth = type
this.$store.dispatch('ToggleContentWidth', type)
},
changeColor (color) {
this.baseConfig.primaryColor = color
if (this.primaryColor !== color) {
this.$store.dispatch('ToggleColor', color)
updateTheme(color)
}
},
handleFixedHeader (fixed) {
this.baseConfig.fixedHeader = fixed
this.$store.dispatch('ToggleFixedHeader', fixed)
},
handleFixedHeaderHidden (autoHidden) {
this.baseConfig.autoHideHeader = autoHidden
this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)
},
handleFixSiderbar (fixed) {
if (this.layoutMode === 'topmenu') {
this.baseConfig.fixSiderbar = false
this.$store.dispatch('ToggleFixSiderbar', false)
return
}
this.baseConfig.fixSiderbar = fixed
this.$store.dispatch('ToggleFixSiderbar', fixed)
}
}
}
</script>
<style lang="less" scoped>
.setting-drawer-index-content {
.setting-drawer-index-blockChecbox {
display: flex;
.setting-drawer-index-item {
margin-right: 16px;
position: relative;
border-radius: 4px;
cursor: pointer;
img {
width: 48px;
}
.setting-drawer-index-selectIcon {
position: absolute;
top: 0;
right: 0;
width: 100%;
padding-top: 15px;
padding-left: 24px;
height: 100%;
color: #1890ff;
font-size: 14px;
font-weight: 700;
}
}
}
.setting-drawer-theme-color-colorBlock {
width: 20px;
height: 20px;
border-radius: 2px;
float: left;
cursor: pointer;
margin-right: 8px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
color: #fff;
font-weight: 700;
i {
font-size: 14px;
}
}
}
.setting-drawer-index-handle {
position: absolute;
top: 240px;
background: #1890ff;
width: 48px;
height: 48px;
right: 300px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
pointer-events: auto;
z-index: 1001;
text-align: center;
font-size: 16px;
border-radius: 4px 0 0 4px;
i {
color: rgb(255, 255, 255);
font-size: 20px;
}
}
</style>

33
frontend/src/components/SettingDrawer/SettingItem.vue
Unescape View File

@ -1,21 +1,29 @@
<template> <template>
<!-- 创建一个带有 setting-drawer-index-item 类名的 div 容器，作为一个可复用的设置项组件的外层包裹元素 -->
<div class="setting-drawer-index-item"> <div class="setting-drawer-index-item">
<!-- 使用双括号插值语法展示 title 属性的值，将其作为标题展示在 h3 元素中，h3 元素添加了 setting-drawer-index-title 类名，用于后续样式控制 -->
<h3 class="setting-drawer-index-title">{{ title }}</h3> <h3 class="setting-drawer-index-title">{{ title }}</h3>
<!-- 使用默认插槽（<slot>），用于让使用该组件的父组件可以向此处插入自定义的内容，增加组件的灵活性和复用性 -->
<slot></slot> <slot></slot>
<!-- 使用 a-divider 组件绘制一条分割线，通过 v-if 指令根据 divider 属性的值来决定是否显示该分割线，若 divider 属性为 true，则显示分割线 -->
<a-divider v-if="divider"/> <a-divider v-if="divider"/>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'SettingItem', name: 'SettingItem',
// 定义组件接收的属性（props），用于外部向组件内部传递数据
props: { props: {
title: { title: {
// title 属性的类型被定义为字符串（String），意味着外部传入的值应该是字符串类型
type: String, type: String,
// 设置 title 属性的默认值为空字符串，如果外部没有传入该属性值，则使用这个默认值
default: '' default: ''
}, },
divider: { divider: {
// divider 属性的类型定义为布尔值（Boolean），表示外部传入的值应该是 true 或者 false
type: Boolean, type: Boolean,
// 设置 divider 属性的默认值为 false，即默认情况下不显示分割线，除非外部传入 true 来改变此默认行为
default: false default: false
} }
} }
@ -23,16 +31,17 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/* 对类名为 setting-drawer-index-item 的元素设置样式 */
.setting-drawer-index-item {
// 设置该元素底部外边距为 24px，用于与下方元素隔开一定距离，方便布局和视觉区分
margin-bottom: 24px;
.setting-drawer-index-item { .setting-drawer-index-title {
margin-bottom: 24px; // 设置标题文字（.setting-drawer-index-title 类名对应的元素）的字体大小为 14px，颜色为带有一定透明度的黑色（rgba 颜色模式），行高为 22px，底部外边距为 12px，使其在外观上有合适的展示效果
font-size: 14px;
.setting-drawer-index-title { color: rgba(0, 0, 0,.85);
font-size: 14px; line-height: 22px;
color: rgba(0, 0, 0, .85); margin-bottom: 12px;
line-height: 22px;
margin-bottom: 12px;
}
} }
</style> }
</style>

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

@ -1,2 +1,6 @@
import SettingDrawer from './SettingDrawer' // 从当前目录下的“SettingDrawer”文件（通常在 Vue 项目等环境中会是一个定义了相关组件、模块的文件，比如.vue 文件或者.js 文件等）中导入名为“SettingDrawer”的模块。
export default SettingDrawer // 具体这个模块代表的是一个组件、函数或者类等，取决于“SettingDrawer”文件内部的定义情况。
import SettingDrawer from './SettingDrawer';
// 将导入的“SettingDrawer”模块原样导出，这样在其他的模块或者文件中，就可以通过相应的导入语句引入这个“SettingDrawer”，方便复用其内部所定义的功能、组件等相关内容。
export default SettingDrawer;

98
frontend/src/components/SettingDrawer/settingConfig.js
Unescape View File

@ -1,8 +1,12 @@
import { message } from 'ant-design-vue/es' // 从 'ant-design-vue/es' 模块中导入名为'message' 的对象（在 Ant Design Vue 框架中，message 通常用于展示各种提示信息，比如成功、失败、加载等提示消息）
import { message } from 'ant-design-vue/es';
// 原本可能用于导入项目中的默认配置信息，此处被注释掉了，可能暂时不需要或者后续再启用这个功能
// import defaultSettings from '../defaultSettings'; // import defaultSettings from '../defaultSettings';
let lessNodesAppended // 定义一个变量 lessNodesAppended，用于标记是否已经向页面中添加了与 Less（一种 CSS 预处理器）相关的节点元素，初始值为 false
let lessNodesAppended;
// 定义一个数组 colorList，数组中的每个元素是一个对象，用于表示不同的颜色选项。每个对象包含一个 key（颜色名称，用于展示给用户识别等）和 color（对应的十六进制颜色值）属性，例如可以用于主题颜色的选择列表等场景
const colorList = [ const colorList = [
{ {
key: '薄暮', color: '#F5222D' key: '薄暮', color: '#F5222D'
@ -28,68 +32,94 @@ const colorList = [
{ {
key: '酱紫', color: '#722ED1' key: '酱紫', color: '#722ED1'
} }
] ];
// 定义一个名为 updateTheme 的函数，用于更新页面主题颜色，接收一个表示主颜色（primaryColor）的参数
const updateTheme = primaryColor => { const updateTheme = primaryColor => {
// 以下代码块被注释掉了，原本的意图可能是在生产环境下不进行 Less 的编译操作，不过目前是处于注释状态，可根据实际需求决定是否启用
// Don't compile less in production! // Don't compile less in production!
/* if (process.env.NODE_ENV === 'production') { /* if (process.env.NODE_ENV === 'production') {
return; return;
} */ } */
// Determine if the component is remounted // 如果传入的主颜色参数为空值，则直接返回，不进行后续主题更新操作
if (!primaryColor) { if (!primaryColor) {
return return;
} }
const hideMessage = message.loading('正在编译主题！', 0) // 调用 message.loading 方法显示一个加载提示信息，提示内容为“正在编译主题！”，并且设置显示时长为 0（可能表示一直显示，直到手动隐藏，常用于长时间操作的提示场景），并将返回的隐藏函数赋值给 hideMessage 变量，方便后续操作完成后隐藏该提示
const hideMessage = message.loading('正在编译主题！', 0);
function buildIt () { function buildIt () {
// 判断 window 对象上是否存在 less 属性（less.js 库加载后会在 window 上添加相关属性和方法，用于操作 Less 样式编译等），如果不存在则直接返回，无法进行后续主题更新相关的 Less 操作
if (!window.less) { if (!window.less) {
return return;
} }
// 使用 setTimeout 设置一个延迟执行的定时器，延迟 200 毫秒后执行以下操作（可能是为了等待一些资源加载等情况）
setTimeout(() => { setTimeout(() => {
// 通过 window.less 的 modifyVars 方法来修改 Less 变量，这里将 '@primary-color' 这个 Less 变量的值修改为传入的 primaryColor 参数值，用于改变主题颜色相关的样式变量定义
window.less window.less
.modifyVars({ .modifyVars({
'@primary-color': primaryColor '@primary-color': primaryColor
}) })
// 如果修改成功，调用 hideMessage 函数隐藏之前显示的加载提示信息
.then(() => { .then(() => {
hideMessage() hideMessage();
}) })
// 如果修改过程出现错误，先调用 message.error 方法显示一个错误提示消息“Failed to update theme”告知用户主题更新失败，然后再调用 hideMessage 函数隐藏加载提示信息
.catch(() => { .catch(() => {
message.error('Failed to update theme') message.error('Failed to update theme');
hideMessage() hideMessage();
}) });
}, 200) }, 200);
} }
// 判断是否已经添加过与 Less 相关的节点元素，如果没有添加过（lessNodesAppended 为 false）
if (!lessNodesAppended) { if (!lessNodesAppended) {
// insert less.js and color.less // 创建一个 link 元素，用于引入 Less 样式文件，这里将用于引入项目中的 'color.less' 文件（可能定义了基于 Less 的各种样式以及主题相关的变量等内容）
const lessStyleNode = document.createElement('link') const lessStyleNode = document.createElement('link');
const lessConfigNode = document.createElement('script') // 创建一个 script 元素，用于配置 Less 的相关运行环境设置，比如设置为异步加载、生产环境模式以及启用 JavaScript 与 Less 的交互等功能
const lessScriptNode = document.createElement('script') const lessConfigNode = document.createElement('script');
lessStyleNode.setAttribute('rel', 'stylesheet/less') // 创建一个 script 元素，用于引入 less.js 库的线上压缩版本（版本号为 3.8.1），less.js 是用于在浏览器端编译 Less 样式的库
lessStyleNode.setAttribute('href', '/color.less') const lessScriptNode = document.createElement('script');
// 设置 link 元素的 rel 属性为'stylesheet/less'，表示这是一个 Less 样式表的引用链接
lessStyleNode.setAttribute('rel', 'stylesheet/less');
// 设置 link 元素的 href 属性为 '/color.less'，指定要引入的 Less 样式文件的路径
lessStyleNode.setAttribute('href', '/color.less');
// 通过 innerHTML 为 script 元素（lessConfigNode）设置内容，定义了 window.less 对象的一些配置属性，比如设置为异步操作、指定环境为生产环境以及启用 JavaScript 功能等，这些配置会影响 less.js 在页面中的运行方式
lessConfigNode.innerHTML = ` lessConfigNode.innerHTML = `
window.less = { window.less = {
async: true, async: true,
env: 'production', env: 'production',
javascriptEnabled: true javascriptEnabled: true
}; };
` `;
lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js' // 设置 script 元素（lessScriptNode）的 src 属性，指定引入 less.js 库的线上地址
lessScriptNode.async = true lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
// 设置 script 元素（lessScriptNode）为异步加载模式，这样不会阻塞页面其他资源的加载
lessScriptNode.async = true;
// 为 lessScriptNode 的 onload 事件绑定一个回调函数，当 less.js 库加载完成后会执行这个回调函数，在回调函数中调用 buildIt 函数来进行主题更新相关的 Less 变量修改操作，并且在执行完成后将 onload 事件的回调函数设置为 null，避免重复执行
lessScriptNode.onload = () => { lessScriptNode.onload = () => {
buildIt() buildIt();
lessScriptNode.onload = null lessScriptNode.onload = null;
} };
document.body.appendChild(lessStyleNode) // 将创建好的 link 元素（lessStyleNode）添加到页面的 body 元素中，使其生效，引入相关的 Less 样式文件
document.body.appendChild(lessConfigNode) document.body.appendChild(lessStyleNode);
document.body.appendChild(lessScriptNode) // 将配置 Less 运行环境的 script 元素（lessConfigNode）添加到页面的 body 元素中，使其配置生效
lessNodesAppended = true document.body.appendChild(lessConfigNode);
// 将引入 less.js 库的 script 元素（lessScriptNode）添加到页面的 body 元素中，开始加载 less.js 库
document.body.appendChild(lessScriptNode);
// 将 lessNodesAppended 标记变量设置为 true，表示已经添加过相关的 Less 节点元素了，后续再次调用 updateTheme 函数时可以直接执行 buildIt 函数进行主题更新操作，无需重复添加节点元素
lessNodesAppended = true;
} else { } else {
buildIt() // 如果已经添加过 Less 相关的节点元素了，直接调用 buildIt 函数进行主题更新操作（即修改 Less 变量来更新主题颜色相关的样式）
buildIt();
} }
} };
// 定义一个名为 updateColorWeak 的函数，用于更新页面是否应用弱色模式（可能是为了满足一些特殊的视觉需求，比如高对比度模式等），接收一个表示是否启用弱色模式（colorWeak）的布尔值参数
const updateColorWeak = colorWeak => { const updateColorWeak = colorWeak => {
// document.body.className = colorWeak ? 'colorWeak' : ''; // 以下这行代码被注释掉了，原本的做法是通过直接设置 document.body 的 className 属性来添加或移除 'colorWeak' 类名，不过现在采用了更推荐的 classList 的方式来操作类名
colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak') // document.body.className = colorWeak? 'colorWeak' : '';
} // 根据传入的 colorWeak 参数值，如果为 true，则给 document.body 元素添加 'colorWeak' 类名，否则移除该类名，以此来切换页面的弱色模式相关的样式应用（通常会在 CSS 中定义了对应 'colorWeak' 类名的样式规则来实现弱色效果）
colorWeak? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak');
};
export { updateTheme, colorList, updateColorWeak } // 将 updateTheme、colorList、updateColorWeak 这三个函数或变量导出，方便在其他模块中引入并使用它们，例如在其他模块中可以调用 updateTheme 函数来更新主题颜色，使用 colorList 数组来展示颜色选择列表等
export { updateTheme, colorList, updateColorWeak };
Write Preview
Loading…
Cancel
Save