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

Default Changelist

Browse Source
feature/qzw
秦泽旺 3 months ago
parent d6b3e60e2e
commit 8f2041d14a
6 changed files with 291 additions and 160 deletions
Show Stats Download Patch File Download Diff File

97
frontend/src/layouts/BasicLayout.vue
Unescape View File

@ -1,6 +1,8 @@
<template> <template>
<!-- 使用 `a-layout` 组件构建页面布局，并根据 `device` 变量的值动态添加类名，与下面的样式设置配合来实现不同设备下的布局样式适配，例如可能根据是移动端、桌面端等设备呈现不同的外观和布局形式。 -->
<a-layout :class="['layout', device]"> <a-layout :class="['layout', device]">
<!-- SideMenu --> <!-- SideMenu -->
<!-- 当设备处于移动端（通过 `isMobile()` 方法判断）时，显示侧边栏抽屉组件（`a-drawer`），用于在移动端展示侧边栏菜单，提供更好的交互体验和节省屏幕空间。 -->
<a-drawer <a-drawer
v-if="isMobile()" v-if="isMobile()"
placement="left" placement="left"
@ -9,6 +11,7 @@
:visible="collapsed" :visible="collapsed"
@close="drawerClose" @close="drawerClose"
> >
<!-- 在抽屉内部使用 `side-menu` 组件来展示侧边栏菜单，设置菜单模式为 `inline`（内联模式，可能表示菜单项水平排列等样式特点），传入 `menus` 数据用于生成具体的菜单项，同时传递主题、折叠状态等相关属性，用于控制菜单的外观和交互行为。 -->
<side-menu <side-menu
mode="inline" mode="inline"
:menus="menus" :menus="menus"
@ -19,6 +22,7 @@
></side-menu> ></side-menu>
</a-drawer> </a-drawer>
<!-- 当设备不是移动端且满足 `isSideMenu()` 条件时（推测是桌面端等支持侧边栏显示的情况），显示侧边栏菜单（`side-menu`）组件，同样传入相关属性来配置菜单的展示形式、主题、折叠状态等，这里的折叠状态由 `collapsed` 变量控制。 -->
<side-menu <side-menu
v-else-if="isSideMenu()" v-else-if="isSideMenu()"
mode="inline" mode="inline"
@ -28,8 +32,10 @@
:collapsible="true" :collapsible="true"
></side-menu> ></side-menu>
<!-- 使用另一个 `a-layout` 组件来进一步构建页面主体部分的布局，通过动态绑定类名和内联样式来控制布局样式，例如根据不同的 `layoutMode` 和 `contentWidth` 来呈现不同的页面布局风格，同时设置最小高度为视口高度（`100vh`），确保页面内容区域能占满整个屏幕高度。 -->
<a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }"> <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
<!-- layout header --> <!-- layout header -->
<!-- 使用 `global-header` 组件来展示页面头部，传入如布局模式、菜单数据、主题、折叠状态、设备类型等属性，通过这些属性来控制头部的显示内容和交互行为，例如根据不同的布局模式显示不同的菜单样式，根据折叠状态显示或隐藏某些元素等，同时监听 `toggle` 事件用于处理头部相关的交互操作（如展开/收起侧边栏等）。 -->
<global-header <global-header
:mode="layoutMode" :mode="layoutMode"
:menus="menus" :menus="menus"
@ -40,19 +46,24 @@
/> />
<!-- layout content --> <!-- layout content -->
<!-- 使用 `a-layout-content` 组件来承载页面的主体内容部分，设置内容区域的高度为 `100%`（占满父容器高度），设置外边距以及根据 `fixedHeader` 变量的值来决定顶部的内边距（若头部固定则设置顶部内边距为 `64px`，否则为 `0`），确保内容区域在页面中的布局位置和样式符合设计要求。 -->
<a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader? '64px' : '0' }"> <a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader? '64px' : '0' }">
<!-- 当启用多标签页功能（`multiTab` 为 `true`）时，显示 `multi-tab` 组件，可能用于实现同时展示多个页面标签并可切换查看不同页面内容的功能，方便用户在多个相关页面之间快速切换浏览。 -->
<multi-tab v-if="multiTab"></multi-tab> <multi-tab v-if="multiTab"></multi-tab>
<!-- 使用 Vue 的过渡效果（`transition`）组件包裹 `route-view` 组件，当路由切换时，通过名为 `page-transition` 的过渡效果来实现页面切换的动画效果，比如淡入淡出、缩放等动画表现，提升页面切换的视觉体验。 -->
<transition name="page-transition"> <transition name="page-transition">
<route-view /> <route-view />
</transition> </transition>
</a-layout-content> </a-layout-content>
<!-- layout footer --> <!-- layout footer -->
<!-- 使用 `a-layout-footer` 组件来展示页面底部，内部包含 `global-footer` 组件，用于展示如版权信息、联系方式等页面底部相关的通用内容。 -->
<a-layout-footer> <a-layout-footer>
<global-footer /> <global-footer />
</a-layout-footer> </a-layout-footer>
<!-- Setting Drawer (show in development mode) --> <!-- Setting Drawer (show in development mode) -->
<!-- 当处于非生产环境（`!production`）时，显示 `setting-drawer` 组件，从命名推测可能是用于在开发阶段展示一些设置选项的抽屉式组件，方便开发人员进行调试、配置等操作，在正式上线的生产环境中则不显示该组件。 -->
<setting-drawer v-if="!production"></setting-drawer> <setting-drawer v-if="!production"></setting-drawer>
</a-layout> </a-layout>
</a-layout> </a-layout>
@ -60,20 +71,26 @@
</template> </template>
<script> <script>
import { triggerWindowResizeEvent } from '../utils/util' // 从 '../utils/util' 文件中导入 `triggerWindowResizeEvent` 函数，从命名推测该函数可能用于触发窗口大小改变的事件，也许在页面布局调整等场景下需要手动触发此事件来让相关组件重新计算布局、更新样式等。
import { mapState, mapActions } from 'vuex' import { triggerWindowResizeEvent } from '../utils/util';
import { mixin, mixinDevice } from '../utils/mixin' // 从 'vuex' 中导入 `mapState` 和 `mapActions` 两个辅助函数，`mapState` 用于将 Vuex 中的状态映射到组件的计算属性中，方便在组件内获取和使用全局状态数据；`mapActions` 则用于将 Vuex 中的 actions（用于提交 mutations 来改变状态的函数）映射到组件的方法中，便于在组件内触发相应的状态变更操作。
import config from '../config/defaultSettings' import { mapState, mapActions } from 'vuex';
// 从 '../utils/mixin' 文件中导入 `mixin` 和 `mixinDevice`，Vue 的混入（mixin）机制允许将一些公共的逻辑（如方法、生命周期钩子、计算属性等）提取出来，在多个组件中复用，这里导入的两个混入对象大概率包含了与通用功能、设备相关判断等逻辑，供当前组件使用。
import { mixin, mixinDevice } from '../utils/mixin';
// 导入项目的默认配置对象 `config`，里面包含了如页面布局、生产环境判断等各种项目相关的默认设置参数，在组件中会依据这些默认配置来进行一些属性初始化、条件判断等操作。
import config from '../config/defaultSettings';
import RouteView from './RouteView' // 导入多个自定义组件，这些组件将在当前模板中使用，用于构建页面的不同部分，如路由视图、多标签页、侧边栏菜单、页面头部、页面底部以及设置抽屉等组件，每个组件都有其特定的功能和对应的 UI 展示及交互逻辑。
import MultiTab from '../components/MultiTab' import RouteView from './RouteView';
import SideMenu from '../components/Menu/SideMenu' import MultiTab from '../components/MultiTab';
import GlobalHeader from '../components/GlobalHeader' import SideMenu from '../components/Menu/SideMenu';
import GlobalFooter from '../components/GlobalFooter' import GlobalHeader from '../components/GlobalHeader';
import SettingDrawer from '../components/SettingDrawer' import GlobalFooter from '../components/GlobalFooter';
import SettingDrawer from '../components/SettingDrawer';
export default { export default {
name: 'BasicLayout', name: 'BasicLayout',
// 将导入的 `mixin` 和 `mixinDevice` 混入到当前组件中，使得组件可以继承混入对象中定义的各种属性、方法、生命周期钩子等，实现代码复用，提升开发效率以及保证不同组件间相关逻辑的一致性。
mixins: [mixin, mixinDevice], mixins: [mixin, mixinDevice],
components: { components: {
RouteView, RouteView,
@ -85,75 +102,92 @@ export default {
}, },
data () { data () {
return { return {
// 从配置对象 `config` 中获取 `production` 属性值，用于判断当前是否处于生产环境，后续可以根据这个值来决定是否显示某些仅在开发环境中使用的组件或者执行特定的调试相关逻辑。
production: config.production, production: config.production,
// 初始化 `collapsed` 状态为 `false`，这个变量大概率用于控制侧边栏（如抽屉式侧边栏或者普通侧边栏）是否处于折叠状态，`false` 表示初始状态下侧边栏是展开的。
collapsed: false, collapsed: false,
// 初始化 `menus` 数组为空，这个数组应该是用于存储侧边栏菜单的数据，后续会通过获取路由等相关信息来填充具体的菜单内容，用于在侧边栏中展示具体的菜单项。
menus: [] menus: []
} }
}, },
computed: { computed: {
...mapState({ ...mapState({
// 动态主路由 // 动态主路由
// 使用 `mapState` 函数将 Vuex 中的 `state.permission.addRouters` 状态映射到当前组件的计算属性 `mainMenu` 中，这样在组件内就能方便地获取到动态生成的主路由信息，用于构建侧边栏菜单等相关功能，可能根据不同用户权限动态加载不同的路由和菜单选项。
mainMenu: state => state.permission.addRouters mainMenu: state => state.permission.addRouters
}), }),
contentPaddingLeft () { contentPaddingLeft () {
// 根据侧边栏是否固定（`fixSidebar`）以及是否处于移动端（`isMobile()`）来计算内容区域的左边距（`contentPaddingLeft`），用于控制页面主体内容在水平方向上的布局位置，避免与侧边栏产生布局冲突等情况。
if (!this.fixSidebar || this.isMobile()) { if (!this.fixSidebar || this.isMobile()) {
return '0' return '0';
} }
// 如果侧边栏是展开的（`sidebarOpened` 为 `true`），设置左边距为 `256px`，这个值可能是侧边栏展开时所占据的宽度，确保内容区域能合理避让侧边栏。
if (this.sidebarOpened) { if (this.sidebarOpened) {
return '256px' return '256px';
} }
return '80px' return '80px';
} }
}, },
watch: { watch: {
sidebarOpened (val) { sidebarOpened (val) {
this.collapsed = !val // 监听 `sidebarOpened` 属性的变化，当它的值改变时（可能是用户操作展开或折叠侧边栏等情况），同步更新 `collapsed` 状态，取反操作可能意味着 `sidebarOpened` 为 `true` 时 `collapsed` 为 `false`，反之亦然，以此保持侧边栏状态在不同变量间的一致性。
this.collapsed =!val;
} }
}, },
created () { created () {
this.menus = this.mainMenu.find(item => item.path === '/').children // 在组件创建生命周期钩子中，从 `mainMenu`（通过 Vuex 映射过来的动态主路由信息）中查找路径为 `'/'` 的路由对象，并获取其 `children` 属性值赋给 `menus` 数组，用于初始化侧边栏菜单的数据，也就是将根路由下的子路由作为侧边栏的菜单项数据来源。
this.collapsed = !this.sidebarOpened this.menus = this.mainMenu.find(item => item.path === '/').children;
// 根据侧边栏是否初始打开（`sidebarOpened`）状态来设置 `collapsed` 状态，同样是保持两者状态的一致性，确保侧边栏的初始显示状态符合预期。
this.collapsed =!this.sidebarOpened;
}, },
mounted () { mounted () {
const userAgent = navigator.userAgent const userAgent = navigator.userAgent;
// 判断当前浏览器的用户代理字符串（`userAgent`）中是否包含 `Edge` 字符串，若包含则说明当前是在 Edge 浏览器环境下，执行以下特殊的逻辑处理，可能是为了解决 Edge 浏览器下与侧边栏折叠展开相关的样式或交互问题。
if (userAgent.indexOf('Edge') > -1) { if (userAgent.indexOf('Edge') > -1) {
this.$nextTick(() => { this.$nextTick(() => {
this.collapsed = !this.collapsed // 先将 `collapsed` 状态取反，触发相关的样式更新或其他依赖此状态的逻辑执行，可能用于初次渲染时的一些调整。
this.collapsed =!this.collapsed;
setTimeout(() => { setTimeout(() => {
this.collapsed = !this.collapsed // 经过短暂的延迟（16 毫秒）后，再次将 `collapsed` 状态取反，可能是为了让某些过渡动画、样式调整等能正确完成，解决 Edge 浏览器下特定的显示或交互问题，具体作用取决于相关代码中对 `collapsed` 状态变化的响应逻辑。
}, 16) this.collapsed =!this.collapsed;
}) }, 16);
});
} }
}, },
methods: { methods: {
...mapActions(['setSidebar']), ...mapActions(['setSidebar']),
toggle () { toggle () {
this.collapsed = !this.collapsed // 定义 `toggle` 方法，用于切换侧边栏的折叠/展开状态，先对 `collapsed` 状态取反，然后调用 `setSidebar` 方法（通过 `mapActions` 从 Vuex 映射过来的用于改变侧边栏状态的 action）并传入取反后的 `collapsed` 值，来更新 Vuex 中的侧边栏状态，最后触发窗口大小改变事件（`triggerWindowResizeEvent`），以便页面其他相关部分能根据侧边栏状态变化重新调整布局等。
this.setSidebar(!this.collapsed) this.collapsed =!this.collapsed;
triggerWindowResizeEvent() this.setSidebar(!this.collapsed);
triggerWindowResizeEvent();
}, },
paddingCalc () { paddingCalc () {
let left = '' let left = '';
// 根据侧边栏是否展开（`sidebarOpened`）以及是否处于移动端（`isMobile()`）或者侧边栏是否固定（`fixSidebar`）等条件来计算内容区域左边距的值，用于动态调整内容区域在水平方向上的位置，确保布局的合理性，不同条件下返回不同的宽度值（如 `256px`、`80px` 或 `0`）来适应侧边栏的不同状态。
if (this.sidebarOpened) { if (this.sidebarOpened) {
left = this.isDesktop() ? '256px' : '80px' left = this.isDesktop()? '256px' : '80px';
} else { } else {
left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0') left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0');
} }
return left return left;
}, },
menuSelect () { menuSelect () {
// 定义 `menuSelect` 方法，当菜单项被选中时触发，判断如果当前设备不是桌面端（`!isDesktop()`），则将侧边栏设置为展开状态（`collapsed` 设为 `false`），可能是在移动端等设备上为了方便用户查看菜单内容，选中菜单项后自动展开侧边栏。
if (!this.isDesktop()) { if (!this.isDesktop()) {
this.collapsed = false this.collapsed = false;
} }
}, },
drawerClose () { drawerClose () {
this.collapsed = false // 定义 `drawerClose` 方法，当侧边栏抽屉关闭时触发，将侧边栏设置为展开状态（`collapsed` 设为 `false`），确保侧边栏在抽屉关闭后呈现展开的默认状态，方便用户再次操作和查看菜单内容。
this.collapsed = false;
} }
} }
} }
</script> </script>
<style lang="less"> <style lang="less">
// 导入 '../components/global.less' 文件中的样式，这个文件可能包含了一些全局通用的样式规则，用于定义页面中通用元素的基本样式，如字体、颜色、基础布局等，确保整个页面的风格具有一致性。
@import url('../components/global.less'); @import url('../components/global.less');
/* /*
@ -165,14 +199,17 @@ export default {
* these styles. * these styles.
*/ */
// 当元素应用了名为 `page-transition` 的过渡效果且处于进入（enter）阶段时（也就是页面切换进入时），设置元素的透明度为 `0`，实现淡入的过渡起始效果，用户会看到元素从透明逐渐变为不透明的动画过程。
.page-transition-enter { .page-transition-enter {
opacity: 0; opacity: 0;
} }
// 当元素应用了名为 `page-transition` 的过渡效果且处于离开（leave）且激活（active）阶段时（也就是页面切换离开时），设置元素的透明度为 `0`，实现淡出的过渡结束效果，与 `page-transition-enter` 配合，呈现完整的淡入淡出过渡动画效果。
.page-transition-leave-active { .page-transition-leave-active {
opacity: 0; opacity: 0;
} }
// 当元素应用了名为 `page-transition` 的过渡效果且处于进入（enter）阶段或者处于离开（leave）且激活（active）阶段时，对元素内部的 `.page-transition-container` 类名对应的子元素（从命名推测可能是用于包裹页面内容等的容器元素）进行样式设置，通过 `transform` 属性将其在水平和垂直方向上按比例缩放 `1.1` 倍，实现页面切换时的缩放动画效果，与透明度变化的动画效果结合，丰富了页面切换的视觉体验，开发者可以通过编辑这些样式规则来调整页面过渡动画的具体表现形式，以满足不同的设计需求。
.page-transition-enter.page-transition-container, .page-transition-enter.page-transition-container,
.page-transition-leave-active.page-transition-container { .page-transition-leave-active.page-transition-container {
-webkit-transform: scale(1.1); -webkit-transform: scale(1.1);

6
frontend/src/layouts/BlankLayout.vue
Unescape View File

@ -1,11 +1,13 @@
<template> <template>
<!-- 最外层使用一个 `<div>` 元素作为容器，这是一种常见的做法，用于包裹内部的其他元素，方便对整体内容进行布局和样式控制，同时避免一些样式冲突等问题。 -->
<div> <div>
<!-- 使用 `<router-view>` 组件，这是 Vue Router 中的核心组件，它用于根据当前的路由配置来动态渲染相应的组件内容。例如，当用户访问不同的路由路径时，该组件所在的位置就会显示对应路由所配置的组件，实现页面的动态切换和展示不同的功能页面，这里它占据了整个 `<div>` 容器的空间，用于展示路由对应的页面内容。 -->
<router-view /> <router-view />
</div> </div>
</template> </template>
<script> <script>
// 将当前组件导出为默认导出，这样在其他模块中可以通过导入这个模块来使用该组件，遵循了 ES6 模块的导出规范。
// 组件定义了一个 `name` 属性为 `'BlankLayout'`，这个名称可以用于在 Vue 开发工具中更方便地识别组件，同时在一些需要通过组件名称来进行操作的场景（比如递归组件、动态组件等场景下通过名称来引用组件）也会用到。
export default { export default {
name: 'BlankLayout' name: 'BlankLayout'
} }

70
frontend/src/layouts/PageView.vue
Unescape View File

@ -1,12 +1,20 @@
<template> <template>
<!-- 根据路由元数据（`$route.meta`）中 `hiddenHeaderContent` 属性的值来动态设置外层 `<div>` 的内联样式。
如果 `hiddenHeaderContent` 为 `false`，则设置顶部和左右边距为 `-24px`（可能是为了让内部的 `page-header` 组件能覆盖部分外层容器的默认边距，实现特定的布局效果），若为 `true`，则不设置任何样式（`null`）。 -->
<div :style="!$route.meta.hiddenHeaderContent? 'margin: -24px -24px 0px;' : null"> <div :style="!$route.meta.hiddenHeaderContent? 'margin: -24px -24px 0px;' : null">
<!-- pageHeader, route meta :true on hide --> <!-- pageHeader, route meta :true on hide -->
<!-- 当路由元数据中的 `hiddenHeaderContent` 属性为 `false` 时（即不隐藏头部内容），显示 `page-header` 组件。
该组件接收 `title`（页面标题）、`logo`（可能是页面 logo 图标）、`avatar`（可能是用户头像相关）等属性来展示相应的头部信息，以下是其内部插槽及各部分功能的详细说明。 -->
<page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar"> <page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar">
<!-- 名为 `action` 的插槽，用于在 `page-header` 组件的特定位置插入自定义的操作按钮等元素，具体插入的内容由使用该组件的父组件通过 `<slot>` 传递进来。 -->
<slot slot="action" name="action"></slot> <slot slot="action" name="action"></slot>
<!-- 名为 `content` 的插槽，用于在 `page-header` 组件中插入自定义的头部内容部分，同样具体内容由父组件决定，若父组件没有传递对应内容（通过 `this.$slots.headerContent` 判断）且存在 `description` 数据时，会显示下方默认的内容结构。 -->
<slot slot="content" name="headerContent"></slot> <slot slot="content" name="headerContent"></slot>
<div slot="content" v-if="!this.$slots.headerContent && description"> <div slot="content" v-if="!this.$slots.headerContent && description">
<!-- 显示一段描述信息（`description`），设置字体大小为 `14px`，颜色为半透明黑色，用于在头部提供一些辅助说明文字。 -->
<p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p> <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p>
<div class="link"> <div class="link">
<!-- 使用 `v-for` 指令循环遍历 `linkList` 数组，用于生成一组链接元素，每个链接包含一个图标（通过 `a-icon` 组件展示，图标类型由 `link.icon` 指定）和对应的文字标题（`link.title`），点击链接可跳转到 `link.href` 指定的地址，方便在头部展示相关的导航链接等信息。 -->
<template v-for="(link, index) in linkList"> <template v-for="(link, index) in linkList">
<a :key="index" :href="link.href"> <a :key="index" :href="link.href">
<a-icon :type="link.icon" /> <a-icon :type="link.icon" />
@ -15,12 +23,14 @@
</template> </template>
</div> </div>
</div> </div>
<!-- 名为 `extra` 的插槽，用于在 `page-header` 组件中插入额外的元素，默认情况下包含一个用于展示图片（`extraImage`）的结构，若 `extraImage` 有值，则会显示对应的图片，图片会根据样式设置进行布局展示。 -->
<slot slot="extra" name="extra"> <slot slot="extra" name="extra">
<div class="extra-img"> <div class="extra-img">
<img v-if="typeof extraImage!== 'undefined'" :src="extraImage"/> <img v-if="typeof extraImage!== 'undefined'" :src="extraImage"/>
</div> </div>
</slot> </slot>
<div slot="pageMenu"> <div slot="pageMenu">
<!-- 当 `search` 属性为 `true` 时，显示搜索框组件（`a-input-search`），用于在页面头部提供搜索功能，设置了宽度、占位符、大小以及回车键触发的按钮文本等样式和属性，方便用户输入内容进行搜索操作。 -->
<div class="page-menu-search" v-if="search"> <div class="page-menu-search" v-if="search">
<a-input-search <a-input-search
style="width: 80%; max-width: 522px;" style="width: 80%; max-width: 522px;"
@ -29,6 +39,7 @@
enterButton="搜索" enterButton="搜索"
/> />
</div> </div>
<!-- 当 `tabs` 属性存在且其 `items` 属性有值时，显示选项卡组件（`a-tabs`），用于在页面头部展示多个可切换的选项卡，通过 `v-for` 循环生成每个选项卡面板（`a-tab-pane`），每个面板的标题由 `item.title` 指定，同时绑定了选项卡切换的回调函数（`@change` 事件触发 `tabs.callback`）以及设置活动选项卡的 `activeKey`，方便用户切换不同的页面视图等。 -->
<div class="page-menu-tabs" v-if="tabs && tabs.items"> <div class="page-menu-tabs" v-if="tabs && tabs.items">
<!-- @change="callback" :activeKey="activeKey" --> <!-- @change="callback" :activeKey="activeKey" -->
<a-tabs :tabBarStyle="{margin: 0}" :activeKey="tabs.active()" @change="tabs.callback"> <a-tabs :tabBarStyle="{margin: 0}" :activeKey="tabs.active()" @change="tabs.callback">
@ -39,6 +50,7 @@
</page-header> </page-header>
<div class="content"> <div class="content">
<div class="page-header-index-wide"> <div class="page-header-index-wide">
<!-- 使用插槽（`<slot>`）来插入内容，若启用了多标签页功能（`multiTab` 为 `true`，通过 Vuex 状态获取），则使用 `<keep-alive>` 组件包裹 `<router-view>`，这样在切换路由时对应的页面组件会被缓存，下次访问能更快地展示；若 `multiTab` 为 `false`，则直接使用 `<router-view>`，用于根据路由配置动态展示相应的页面内容，`ref="content"` 用于在组件内部通过 `this.$refs.content` 来获取该元素的引用，方便后续操作。 -->
<slot> <slot>
<!-- keep-alive --> <!-- keep-alive -->
<keep-alive v-if="multiTab"> <keep-alive v-if="multiTab">
@ -50,25 +62,30 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex' // 从 'vuex' 中导入 `mapState` 辅助函数，用于将 Vuex 中的状态映射到组件的计算属性中，方便在组件内获取和使用全局状态数据，比如在这里用于获取多标签页（`multiTab`）相关的状态。
import PageHeader from '../components/PageHeader' import { mapState } from 'vuex';
// 导入自定义的 `PageHeader` 组件，这个组件在模板中被使用，用于构建页面的头部区域，展示标题、图标、各种插槽内容以及相关的操作和导航元素等，其具体功能和样式由该组件自身内部实现定义。
import PageHeader from '../components/PageHeader';
export default { export default {
name: 'PageView', name: 'PageView',
// 在组件的 `components` 属性中注册 `PageHeader` 组件，使得在模板中可以直接使用 `<page-header>` 标签来调用该组件，遵循 Vue 组件注册和使用的规范。
components: { components: {
PageHeader PageHeader
}, },
props: { props: {
// 定义 `avatar` 属性，用于接收父组件传递的用户头像相关信息，类型为字符串，默认值为 `null`，表示如果父组件没有传递该属性值，则 `avatar` 为 `null`，在组件内部可以根据这个值来决定是否展示头像以及展示何种头像内容。
avatar: { avatar: {
type: String, type: String,
default: null default: null
}, },
// 定义 `title` 属性，其类型可以是字符串或者布尔值，默认值为 `true`，在组件内部可以根据该属性的值来确定页面标题的显示内容和方式，比如如果是字符串则直接作为标题显示，若是 `false` 等其他情况可能有不同的处理逻辑。
title: { title: {
type: [String, Boolean], type: [String, Boolean],
default: true default: true
}, },
// 定义 `logo` 属性，用于接收页面 logo 相关的字符串信息，类型为字符串，默认值为 `null`，类似 `avatar` 属性，根据传递的值来决定是否展示 logo 以及展示的具体 logo 内容。
logo: { logo: {
type: String, type: String,
default: null default: null
@ -76,40 +93,52 @@ export default {
}, },
data () { data () {
return { return {
// 初始化 `pageTitle` 为 `null`，后续会根据传入的 `title` 属性以及路由元数据中的标题等情况来赋值，用于在 `page-header` 组件中展示页面的标题内容。
pageTitle: null, pageTitle: null,
// 初始化 `description` 为 `null`，用于存储页面头部的描述信息，若父组件没有传递对应的 `headerContent` 插槽内容且存在该描述信息时，会在头部展示相应的文字说明内容。
description: null, description: null,
// 初始化 `linkList` 为空数组，用于存储一组链接对象，每个对象包含 `href`（链接地址）、`icon`（图标类型）、`title`（链接标题）等属性，通过循环遍历这个数组在头部展示多个导航链接元素。
linkList: [], linkList: [],
// 初始化 `extraImage` 为空字符串，用于存储要在头部 `extra` 插槽中展示的图片地址，若有值则会显示对应的图片，实现页面头部额外图片展示的功能。
extraImage: '', extraImage: '',
// 初始化 `search` 为 `false`，用于控制是否在页面头部显示搜索框组件，若为 `true` 则展示搜索框，提供搜索功能。
search: false, search: false,
// 初始化 `tabs` 为空对象，用于存储与选项卡相关的数据，如选项卡的 `items`（选项卡面板数据）以及控制活动选项卡的相关方法等，根据其属性值来决定是否在头部展示选项卡组件以及选项卡的具体内容和交互行为。
tabs: {} tabs: {}
} }
}, },
computed: { computed: {
...mapState({ ...mapState({
// 使用 `mapState` 函数将 Vuex 中的 `state.app.multiTab` 状态映射到组件的计算属性 `multiTab` 中，这样在组件内就能方便地获取到多标签页功能是否启用的状态信息，用于决定是否对路由视图组件（`<router-view>`）使用 `<keep-alive>` 进行缓存处理。
multiTab: state => state.app.multiTab multiTab: state => state.app.multiTab
}) })
}, },
mounted () { mounted () {
this.getPageMeta() // 在组件挂载完成后调用 `getPageMeta` 方法，该方法可能用于获取页面相关的元数据信息，比如从路由对应的组件或者其他地方获取标题、描述、链接等数据，来更新组件内部的相关属性，确保页面头部展示的内容符合实际需求。
this.getPageMeta();
}, },
updated () { updated () {
this.getPageMeta() // 在组件数据更新后再次调用 `getPageMeta` 方法，确保当组件数据发生变化（比如路由切换等情况导致数据更新）时，页面头部展示的内容能及时同步更新，保持数据的一致性和页面显示的准确性。
this.getPageMeta();
}, },
methods: { methods: {
getPageMeta () { getPageMeta () {
// eslint-disable-next-line // eslint-disable-next-line
this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title // 以下逻辑用于确定页面标题（`pageTitle`）的值，若传入的 `title` 属性是字符串类型或者 `title` 为 `false`（可能表示不使用传入的特定标题，而采用默认方式获取标题），则直接将传入的 `title` 赋值给 `pageTitle`；否则，从路由元数据（`this.$route.meta`）中获取 `title` 属性值作为页面标题，这样可以灵活处理页面标题的来源，既可以由父组件传入，也可以根据路由配置来确定。
this.pageTitle = (typeof(this.title) === 'string' ||!this.title)? this.title : this.$route.meta.title;
const content = this.$refs.content const content = this.$refs.content;
if (content) { if (content) {
if (content.pageMeta) { if (content.pageMeta) {
Object.assign(this, content.pageMeta) // 如果通过 `this.$refs.content` 获取到的元素有 `pageMeta` 属性，则使用 `Object.assign` 方法将其属性值合并到当前组件实例（`this`）上，可能是用于批量更新组件的多个属性，获取更全面的页面元数据信息。
Object.assign(this, content.pageMeta);
} else { } else {
this.description = content.description // 如果没有 `pageMeta` 属性，则分别从 `content` 元素中获取 `description`、`linkList`、`extraImage`、`search`、`tabs` 等相关属性值，并赋值给当前组件对应的属性，用于更新页面头部展示的描述、链接、图片、搜索框以及选项卡等相关内容，确保页面头部显示的信息与页面实际数据一致。
this.linkList = content.linkList this.description = content.description;
this.extraImage = content.extraImage this.linkList = content.linkList;
this.search = content.search === true this.extraImage = content.extraImage;
this.tabs = content.tabs this.search = content.search === true;
this.tabs = content.tabs;
} }
} }
} }
@ -119,23 +148,31 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.content { .content {
// 设置 `content` 类名对应的元素的外边距，顶部和左右边距分别为 `24px`，底部边距为 `0`，用于控制页面主体内容区域在页面中的布局位置，使其与页面其他部分（如头部）有合适的间距，呈现良好的视觉效果。
margin: 24px 24px 0; margin: 24px 24px 0;
.link { .link {
// 设置 `link` 类名对应的元素（在头部用于展示一组链接的部分）的顶部外边距为 `16px`，使其与上方元素有一定间隔。
margin-top: 16px; margin-top: 16px;
&:not(:empty) { &:not(:empty) {
// 如果 `link` 元素内部不为空（即有链接内容），则设置底部外边距为 `16px`，增加与下方元素的间隔，使布局更清晰。
margin-bottom: 16px; margin-bottom: 16px;
} }
a { a {
// 设置链接元素（`<a>`）的右边距为 `32px`，用于在水平方向上隔开各个链接，避免过于紧凑。
margin-right: 32px; margin-right: 32px;
// 设置链接元素的高度为 `24px`，以及行高也为 `24px`，保证链接文字在垂直方向上的居中对齐，呈现整齐的视觉效果。
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
// 将链接元素设置为内联块级元素，使其既可以像内联元素一样在一行排列，又能像块级元素一样设置宽高、内外边距等样式属性，方便布局和样式调整。
display: inline-block; display: inline-block;
i { i {
// 设置链接中图标元素（`<i>`，可能是 `a-icon` 组件渲染出来的图标）的字体大小为 `24px`，使其有合适的显示大小，同时设置右边距为 `8px`，用于与旁边的文字标题隔开一定距离，并且让图标在垂直方向上居中对齐（`vertical-align: middle`）。
font-size: 24px; font-size: 24px;
margin-right: 8px; margin-right: 8px;
vertical-align: middle; vertical-align: middle;
} }
span { span {
// 设置链接中文字标题元素（`<span>`）的高度和行高都为 `24px`，保证文字在垂直方向上的居中对齐，并且同样设置为内联块级元素方便样式调整。
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
display: inline-block; display: inline-block;
@ -145,19 +182,26 @@ export default {
} }
} }
.page-menu-search { .page-menu-search {
// 设置搜索框所在的 `page-menu-search` 类名元素的文本对齐方式为居中对齐，使其在页面头部水平方向上处于中间位置，看起来更美观。
text-align: center; text-align: center;
// 设置底部外边距为 `16px`，与下方元素（如选项卡组件等，如果存在的话）隔开一定距离，优化布局效果。
margin-bottom: 16px; margin-bottom: 16px;
} }
.page-menu-tabs { .page-menu-tabs {
// 设置选项卡组件所在的 `page-menu-tabs` 类名元素的顶部外边距为 `48px`，使其与上方元素（如搜索框等）有一定间隔，合理分布页面头部的各个功能模块。
margin-top: 48px; margin-top: 48px;
} }
.extra-img { .extra-img {
// 设置用于展示额外图片的 `extra-img` 类名元素的顶部外边距为 `-60px`，可能是为了让图片在垂直方向上有特定的位置偏移，实现与页面头部其他元素更好的排版布局效果，不过具体效果取决于整体页面的设计和其他元素的样式设置。
margin-top: -60px; margin-top: -60px;
// 设置文本对齐方式为居中对齐，确保图片在水平方向上处于中间位置（如果图片有文字说明等情况），呈现整齐的视觉效果。
text-align: center; text-align: center;
// 设置宽度为 `195px`，用于限制图片显示的宽度大小，符合页面头部的布局规划，具体宽度值可根据设计需求调整。
width: 195px; width: 195px;
img { img {
// 设置图片元素（`<img>`）的宽度为 `100%`，使其能自适应 `extra-img` 容器的宽度，保证图片完整显示且按比例缩放，避免出现图片变形等问题。
width: 100%; width: 100%;
} }
} }

21
frontend/src/layouts/RouteView.vue
Unescape View File

@ -1,31 +1,46 @@
<script> <script>
// 将当前组件以默认导出的方式暴露出去，使得其他模块可以通过导入该模块来使用这个组件，这是遵循 ES6 模块规范的常见做法。
export default { export default {
name: 'RouteView', name: 'RouteView',
// 定义组件的 `props` 属性，用于接收来自父组件传递的属性值，这里定义了 `keepAlive` 属性。
props: { props: {
// `keepAlive` 属性的类型被定义为布尔值（`Boolean`），意味着父组件传递给该组件的值必须是 `true` 或者 `false`。
// 同时设置了默认值为 `true`，如果父组件没有传递 `keepAlive` 属性，那么在该组件内部使用时，它的值默认为 `true`，这个属性通常用于控制是否对路由对应的页面组件进行缓存操作，以优化页面切换性能等。
keepAlive: { keepAlive: {
type: Boolean, type: Boolean,
default: true default: true
} }
}, },
data () { data () {
// `data` 函数用于返回组件的内部数据对象，这里返回的是空对象，说明目前组件自身没有需要初始化的额外数据，如果后续有需要在组件内部维护的数据，可以在这个函数内进行定义和初始化。
return {} return {}
}, },
render () { render () {
// 通过解构赋值的方式，从组件实例（`this`）中获取 `$route` 对象里的 `meta` 属性以及 `$store` 对象里的 `getters` 属性，方便后续使用路由元数据和 Vuex 状态管理中的 `getters` 数据进行逻辑判断。
// `$route` 包含了当前路由的相关信息，`meta` 是路由的元数据，通常可以在路由配置时自定义添加一些额外信息（比如页面标题、是否需要缓存等相关标识）；`$store` 是 Vuex 中的状态管理仓库，`getters` 用于获取经过计算后的状态数据。
const { $route: { meta }, $store: { getters } } = this const { $route: { meta }, $store: { getters } } = this
// 创建一个 `<keep-alive>` 组件包裹 `<router-view>` 的虚拟 DOM 结构，`<keep-alive>` 组件在 Vue 中用于缓存其内部包裹的组件实例，使得在组件切换时（比如路由切换导致不同页面组件切换时），被缓存的组件不会重新创建和销毁，而是保留之前的状态，下次再次显示时能快速恢复，提升用户体验和性能。
const inKeep = ( const inKeep = (
<keep-alive> <keep-alive>
<router-view /> <router-view />
</keep-alive> </keep-alive>
) )
// 创建一个不包含 `<keep-alive>` 包裹的 `<router-view>` 虚拟 DOM 结构，这意味着对应的路由组件在每次显示时都会重新创建，不会进行缓存，适用于那些不需要缓存或者每次都需要重新加载数据的页面组件情况。
const notKeep = ( const notKeep = (
<router-view /> <router-view />
) )
// 这里增加了 multiTab 的判断，当开启了 multiTab 时
// 应当全部组件皆缓存，否则会导致切换页面后页面还原成原始状态 // 以下是核心的逻辑判断，用于决定最终返回使用带有 `<keep-alive>` 缓存的组件结构（`inKeep`）还是不带有缓存的组件结构（`notKeep`）。
// 若确实不需要，可改为 return meta.keepAlive ? inKeep : notKeep // 这里增加了 `multiTab` 的判断，从 `getters` 中获取 `multiTab` 相关状态，当开启了 `multiTab` 功能（即 `multiTab` 为 `true`）时，按照业务逻辑应当对全部组件皆进行缓存。
// 因为如果不缓存，在切换页面后页面可能会还原成原始状态，影响用户体验以及功能的正常使用，不过如果确实有页面不需要缓存（这种情况可能需要特殊处理），可以按照注释里说的改为 `return meta.keepAlive? inKeep : notKeep`，即只根据路由元数据里的 `keepAlive` 属性来决定是否缓存。
if (!getters.multiTab && meta.keepAlive === false) { if (!getters.multiTab && meta.keepAlive === false) {
return notKeep return notKeep
} }
// 最终返回的逻辑判断，只要满足以下三个条件之一，就返回带有 `<keep-alive>` 缓存的组件结构（`inKeep`），否则返回不带有缓存的组件结构（`notKeep`）：
// 1. 组件自身通过 `props` 接收的 `keepAlive` 属性为 `true`（即父组件明确要求缓存该组件）；
// 2. 通过 `getters` 获取到 `multiTab` 状态为 `true`（即开启了多标签页功能，按要求全部组件都要缓存）；
// 3. 路由元数据（`meta`）中的 `keepAlive` 属性为 `true`（在路由配置时就指定了该页面组件需要缓存）。
return this.keepAlive || getters.multiTab || meta.keepAlive? inKeep : notKeep return this.keepAlive || getters.multiTab || meta.keepAlive? inKeep : notKeep
} }
} }

46
frontend/src/layouts/UserLayout.vue
Unescape View File

@ -1,26 +1,36 @@
<template> <template>
<!-- 使用 `<div>` 元素作为整个布局的根容器，并设置 `id` 为 `userLayout`，同时通过动态绑定类名（`:class`），添加 `user-layout-wrapper` 类以及根据 `device` 变量（其值应该会根据不同设备进行变化，比如区分移动端、桌面端等）来动态添加相应的设备相关类名，用于后续样式的适配，实现不同设备下的特定布局效果。 -->
<div id="userLayout" :class="['user-layout-wrapper', device]"> <div id="userLayout" :class="['user-layout-wrapper', device]">
<!-- 使用 `<div>` 元素创建一个 `container` 类名的容器，用于包裹页面的主要内容部分，包括头部、主体内容（通过 `<route-view>` 展示不同路由对应的页面内容）以及底部等，方便对整体内容进行统一的布局和样式控制。 -->
<div class="container"> <div class="container">
<!-- 创建一个 `top` 类名的 `<div>` 元素，用于放置页面的顶部相关内容，通常可以包含如页面标题、 logo 以及一些简短的描述信息等，使其在视觉上处于页面的上方位置，符合常见的页面布局结构。 -->
<div class="top"> <div class="top">
<!-- 使用 `<div>` 元素创建 `header` 类名的部分，用于展示页面头部的具体元素，例如 logo 和标题等，是整个页面头部区域的核心部分，可呈现出品牌标识和页面主要名称等关键信息。 -->
<div class="header"> <div class="header">
<!-- 使用 `<a>` 标签创建一个链接，指向根路径（`/`），当用户点击时会跳转到对应的页面，内部包含一个 `<img>` 标签用于展示 logo 图片（图片路径为相对路径 `../assets/logo.svg`），并设置 `class` 为 `logo` 和 `alt` 属性用于图片描述（在图片无法正常显示时显示 `logo` 文字提示），以及一个 `<span>` 标签用于展示页面标题文字 `Online Exam`，整体构成了页面头部的主要视觉元素和品牌标识展示。 -->
<a href="/"> <a href="/">
<img src="../assets/logo.svg" class="logo" alt="logo"> <img src="../assets/logo.svg" class="logo" alt="logo">
<span class="title">Online Exam</span> <span class="title">Online Exam</span>
</a> </a>
</div> </div>
<!-- 使用 `<div>` 元素创建 `desc` 类名的部分，用于展示一段描述性文字，这里明确写出了该在线考试系统是基于 `SpringBoot + Vue` 实现的，用于向用户简单介绍系统的技术实现背景等信息，增强页面的可读性和对系统的初步了解。 -->
<div class="desc"> <div class="desc">
基于SpringBoot+Vue实现的在线考试系统 基于SpringBoot+Vue实现的在线考试系统
</div> </div>
</div> </div>
<!-- 使用 `<route-view>` 组件，这是 Vue Router 中的核心组件，它会根据当前的路由配置动态渲染相应的组件内容，在这里它占据了页面主体部分的空间，用于展示与用户相关的不同功能页面（比如登录、注册等页面，具体取决于路由配置），实现页面的动态切换和功能展示。 -->
<route-view></route-view> <route-view></route-view>
<!-- 使用 `<div>` 元素创建 `footer` 类名的部分，用于展示页面底部的相关内容，通常包含如版权信息、友情链接、联系信息等，是整个页面底部区域的核心部分，用于提供一些辅助性、通用性的页面信息展示。 -->
<div class="footer"> <div class="footer">
<!-- 使用 `<div>` 元素创建 `links` 类名的容器，用于放置一组链接元素，这些链接分别指向不同的外部资源，如代码仓库、关于作者的页面以及可以联系作者的邮箱链接等，方便用户获取更多相关信息、查看代码或者与作者进行沟通交流。 -->
<div class="links"> <div class="links">
<a href="https://github.com/19920625lsg/spring-boot-online-exam" target="_blank">代码仓</a> <a href="https://github.com/19920625lsg/spring-boot-online-exam" target="_blank">代码仓</a>
<a href="https://19920625lsg.github.io" target="_blank">关于我</a> <a href="https://19920625lsg.github.io" target="_blank">关于我</a>
<a href="mailto:liangshanguang2@gmail.com">联系我</a> <a href="mailto:liangshanguang2@gmail.com">联系我</a>
</div> </div>
<!-- 使用 `<div>` 元素创建 `copyright` 类名的部分，用于展示版权声明信息，明确指出版权所有者以及版权年份等信息，告知用户该页面内容的版权归属情况，符合法律规范和常规的页面版权展示要求。 -->
<div class="copyright"> <div class="copyright">
Copyright &copy; 2020 Liang Shan Guang Copyright &copy; 2020 Liang Shan Guang
</div> </div>
@ -28,31 +38,39 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import RouteView from './RouteView' // 从相对路径 `./RouteView` 文件中导入 `RouteView` 组件，这个组件大概率用于根据路由配置来展示具体的页面视图内容，在模板中通过 `<route-view>` 标签使用该组件，实现页面的路由驱动的展示逻辑，使得不同路由对应不同的功能页面展示。
import { mixinDevice } from '../utils/mixin' import RouteView from './RouteView';
// 从 `../utils/mixin` 文件中导入 `mixinDevice`，Vue 的混入（`mixin`）机制允许将一些公共的逻辑（如方法、生命周期钩子、计算属性等）提取出来，在多个组件中复用，这里的 `mixinDevice` 混入对象大概率包含了与设备相关判断、适配等逻辑，例如根据不同设备类型（移动端、桌面端等）来调整组件的行为或者样式等，供当前 `UserLayout` 组件使用，实现设备适配功能。
import { mixinDevice } from '../utils/mixin';
export default { export default {
name: 'UserLayout', name: 'UserLayout',
// 在组件的 `components` 属性中注册 `RouteView` 组件，使得在模板中可以直接使用 `<route-view>` 标签来调用该组件，遵循 Vue 组件注册和使用的规范，方便在组件内部展示基于路由配置的不同页面内容。
components: { RouteView }, components: { RouteView },
// 将导入的 `mixinDevice` 混入到当前组件中，使得组件可以继承混入对象中定义的各种属性、方法、生命周期钩子等，实现代码复用，提升开发效率以及保证不同组件间相关逻辑的一致性，在这里主要是借助其中与设备相关的逻辑来实现针对不同设备的布局和功能适配。
mixins: [mixinDevice], mixins: [mixinDevice],
data () { data () {
// `data` 函数用于返回组件的内部数据对象，这里返回的是空对象，说明目前组件自身没有需要初始化的额外数据，如果后续有需要在组件内部维护的数据（比如用户相关的输入信息、状态标识等），可以在这个函数内进行定义和初始化。
return {} return {}
}, },
mounted () { mounted () {
document.body.classList.add('userLayout') // 在组件挂载完成（`mounted` 生命周期钩子）后，通过操作 `document.body` 的类名列表（`classList`），添加 `userLayout` 类名，这样可以针对整个页面主体（`body` 元素）应用一些特定的样式规则（在样式部分应该有对应的 `.userLayout` 相关样式设置），可能用于进一步区分该布局下页面整体的独特样式，比如全局的背景、字体等样式调整，使其与其他布局的页面有所区别。
document.body.classList.add('userLayout');
}, },
beforeDestroy () { beforeDestroy () {
document.body.classList.remove('userLayout') // 在组件即将被销毁（`beforeDestroy` 生命周期钩子）之前，通过操作 `document.body` 的类名列表，移除 `userLayout` 类名，这样做的目的是当组件不再使用时，及时清理之前添加的全局样式类名，避免对其他页面或者后续组件的样式产生不必要的影响，保证页面样式的正确性和独立性。
document.body.classList.remove('userLayout');
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// 针对 `id` 为 `userLayout` 且具有 `user-layout-wrapper` 类名的元素设置样式，这里将其高度设置为 `100%`，使其能够占满父容器的高度，通常可以保证整个页面布局在垂直方向上能够铺满整个可视区域或者父元素的空间，具体取决于父元素的高度设置情况，实现全屏或者自适应高度的布局效果。
#userLayout.user-layout-wrapper { #userLayout.user-layout-wrapper {
height: 100%; height: 100%;
// 当该元素同时具有 `mobile` 类名时（可能通过 JavaScript 根据设备类型动态添加，用于区分移动端设备），应用以下内部样式规则，对其内部的 `.container` 元素的 `.main` 子元素进行样式设置，主要是限制最大宽度为 `368px`，并设置宽度为 `98%`，使得在移动端设备上该部分内容能够自适应屏幕宽度，避免内容过宽导致显示效果不佳，适配移动端较小的屏幕尺寸。
&.mobile { &.mobile {
.container { .container {
.main { .main {
@ -63,25 +81,31 @@ export default {
} }
.container { .container {
// 设置宽度为 `100%`，使其能够占满父容器的宽度，保证页面内容在水平方向上铺满整个可用空间；设置最小高度为 `100%`，结合前面的高度设置，确保容器在垂直方向上也能有足够的空间来展示内容，防止内容溢出等情况。
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
// 设置背景颜色为 `#f0f2f5`，同时设置背景图片（图片路径为 `../assets/background.svg`），使其不重复显示（`no-repeat`）且在水平和垂直方向上都居中（`50%` 表示水平和垂直方向的中心位置），并设置背景图片的尺寸为 `100%`，即铺满整个容器背景，用于营造整个页面的背景视觉效果，提供一个统一的、美观的页面背景样式。
background: #f0f2f5 url(../assets/background.svg) no-repeat 50%; background: #f0f2f5 url(../assets/background.svg) no-repeat 50%;
background-size: 100%; background-size: 100%;
// 设置内边距，顶部内边距为 `110px`，底部内边距为 `144px`，用于在容器内部为页面内容预留出一定的空白空间，使内容不会紧贴容器边缘，呈现出更舒适的视觉布局效果，同时也为头部、底部等元素留出合适的显示位置。
padding: 110px 0 144px; padding: 110px 0 144px;
position: relative; // 设置元素的定位方式为 `relative`，这意味着该容器内的子元素如果设置了 `absolute` 等相对定位方式时，可以相对于该容器进行定位，方便实现一些复杂的布局效果，比如让底部元素固定在容器底部等操作。
a { a {
// 去除链接元素（`<a>`）的默认下划线样式，使链接在页面中看起来更加简洁、美观，符合页面整体的视觉设计风格，避免默认的下划线影响页面的整体美观度。
text-decoration: none; text-decoration: none;
} }
.top { .top {
text-align: center; // 设置文本对齐方式为 `center`，使得 `top` 区域内的所有子元素（如头部的 logo、标题以及描述信息等）在水平方向上都居中对齐，呈现出整齐、对称的视觉效果，增强页面头部的美观性和整体感。
.header { .header {
height: 44px; // 设置高度为 `44px`，以及行高也为 `44px`，这样可以保证 `header` 区域内的文本内容（如标题等）在垂直方向上能够居中对齐，呈现出整齐、规范的视觉效果，同时也有助于确定该区域在页面头部的高度范围，便于与其他元素进行布局搭配。
line-height: 44px;
.badge { .badge {
// 设置元素的定位方式为 `absolute`，使其可以相对于最近的已定位祖先元素（在这里就是 `.header` 元素，因为它的父元素 `.top` 设置了 `relative` 定位）进行定位，方便将该元素精确放置在需要的位置上，比如用于显示一些小图标、提示信息等在特定位置。
// 设置元素显示为内联块级元素（`display: inline-block`），使其既可以像内联元素一样在一行排列，又能像块级元素一样设置宽高、内外边距等样式属性，方便布局和样式调整。
// 设置行高为 `1`，使其在垂直方向上的高度根据内容自适应，同时让其在垂直方向上与其他元素垂直居中对齐（`vertical-align: middle`），并且设置左边距和上边距为负数（`margin-left: -12px`，`margin-top: -10px`），用于对元素位置进行微调，使其能够准确地放置在期望的位置上，最后设置透明度为 `0.8`，使其呈现出稍微透明的效果，可能用于一些辅助性的、不太突出的元素显示，比如小提示图标等。
position: absolute; position: absolute;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
@ -92,6 +116,7 @@ export default {
} }
.logo { .logo {
// 设置 `logo` 图片元素的高度为 `44px`，使其在垂直方向上与 `header` 区域的高度匹配，呈现出合适的大小比例；设置垂直对齐方式为 `top`，表示与同一行内的其他元素顶部对齐，确保 `logo` 图片在垂直方向上的显示位置符合预期；设置右边距为 `16px`，用于与旁边的标题文字隔开一定距离，避免元素之间过于紧凑，影响美观度；同时明确设置边框样式为 `none`，防止出现意外的边框显示影响 `logo` 的整体视觉效果。
height: 44px; height: 44px;
vertical-align: top; vertical-align: top;
margin-right: 16px; margin-right: 16px;
@ -99,6 +124,7 @@ export default {
} }
.title { .title {
// 设置字体大小为 `33px`，使其在页面头部呈现出较大、醒目的标题效果，用于突出显示页面的主要名称；设置颜色为半透明黑色（`rgba(0, 0, 0,.85)`），使其具有一定的视觉层次感和美观度；指定字体族（`font-family`）为一系列常见的字体，按照优先顺序依次尝试使用，确保在不同的浏览器和操作系统环境下都能尽量显示出期望的字体样式；设置字体粗细为 `600`，使其字体看起来更加粗壮、醒目；最后设置在垂直方向上相对其原始位置向上偏移 `2px`（`position: relative`，`top: 2px`），用于对标题文字的垂直位置进行微调，使其在视觉上更加协调、美观。
font-size: 33px; font-size: 33px;
color: rgba(0, 0, 0,.85); color: rgba(0, 0, 0,.85);
font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
@ -109,6 +135,7 @@ export default {
} }
.desc { .desc {
// 设置字体大小为 `14px`，使其描述文字呈现出合适的大小，便于阅读且不会过于突出；设置颜色为较浅的半透明黑色（`rgba(0, 0, 0, 0.45)`），用于与标题等主要元素区分开来，体现出描述性文字的辅助、次要地位；设置顶部外边距为 `12px`，使其与上方的标题元素隔开一定距离，布局更加清晰；设置底部外边距为 `40px`，用于与下方的主体内容区域隔开一定距离，使页面各部分之间有合适的空白间隔，视觉效果更好。
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
margin-top: 12px; margin-top: 12px;
@ -117,6 +144,7 @@ export default {
} }
.main { .main {
// 设置最小宽度为 `260px`，用于保证该部分内容在宽度较小时也能有基本的显示空间，避免内容过于拥挤或者显示不全；设置宽度为 `368px`，确定其在正常情况下的宽度大小；设置元素在水平方向上居中对齐（`margin: 0 auto`），使其能够在父容器（`.container`）内水平居中显示，呈现出整齐、对称的布局效果，通常用于放置页面的核心主体内容，比如登录、注册表单等页面功能模块所在的区域。
min-width: 260px; min-width: 260px;
width: 368px; width: 368px;
margin: 0 auto; margin: 0 auto;

17
frontend/src/layouts/index.js
Unescape View File

@ -1,7 +1,12 @@
import UserLayout from './UserLayout' // 从当前目录下相对路径为 './UserLayout' 的文件中导入 `UserLayout` 组件。从命名推测，`UserLayout` 组件可能是用于构建与用户相关页面（比如登录、注册、个人信息等页面）的布局组件，它有着特定的页面结构和样式呈现方式，方便在这些用户相关功能模块中统一页面布局风格。
import BlankLayout from './BlankLayout' import UserLayout from './UserLayout';
import BasicLayout from './BasicLayout' // 从相对路径 './BlankLayout' 的文件导入 `BlankLayout` 组件。`BlankLayout` 大概率是一种较为简洁、空白的布局组件，可能用于那些不需要过多页面装饰元素，只专注展示核心内容的页面场景，例如一些特定的功能演示页面或者临时占位页面等，提供了一个极简的页面布局框架。
import RouteView from './RouteView' import BlankLayout from './BlankLayout';
import PageView from './PageView' // 从 './BasicLayout' 文件导入 `BasicLayout` 组件。`BasicLayout` 通常作为整个应用的基础布局组件存在，它往往包含了如头部、侧边栏、主体内容区等常见的页面布局结构，为大多数页面提供一个通用的、标准的布局框架，其他页面可以基于这个框架进行具体功能模块的内容填充和样式定制。
import BasicLayout from './BasicLayout';
// 从 './RouteView' 文件导入 `RouteView` 组件。`RouteView` 组件很可能是起到衔接路由与具体页面视图之间关系的作用，它能够根据路由的切换动态地加载并展示相应的子组件内容，是实现页面根据不同路由路径呈现不同视图的关键组件之一，便于构建多页面应用的路由驱动的页面展示逻辑。
import RouteView from './RouteView';
// 从 './PageView' 文件导入 `PageView` 组件。`PageView` 组件或许是针对具体页面内容展示的一种布局包装组件，用于规范页面内容在整体布局中的呈现形式，保证不同页面在内容展示方面具有一致性的布局风格，比如统一的页面边距、内容对齐方式等，同时也方便对页面内容进行整体的样式控制和调整。
export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView } // 使用 `export` 关键字将导入的这些组件（`UserLayout`、`BasicLayout`、`BlankLayout`、`RouteView`、`PageView`）进行导出，使得其他模块可以通过导入这个模块来获取这些组件，进而在整个项目中进行复用，用于构建不同功能需求的页面布局和视图展示，满足多样化的业务场景和页面设计要求。
export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView };
Write Preview
Loading…
Cancel
Save