Default Changelist

frontend/src/plugins/bootstrap-table.js

@@ -1,16 +1,34 @@
-import 'bootstrap/dist/css/bootstrap.min.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-import 'bootstrap-table/dist/bootstrap-table.min.css'
-import '@fortawesome/fontawesome-free/css/all.min.css'
-import Vue from 'vue'
-import 'bootstrap'
-import 'tableexport.jquery.plugin/libs/FileSaver/FileSaver.min.js'
-import 'tableexport.jquery.plugin/tableExport.min.js'
-import 'bootstrap-table/dist/bootstrap-table'
-import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm'
-import 'bootstrap-table/dist/extensions/export/bootstrap-table-export'
-import 'bootstrap-table/dist/extensions/toolbar/bootstrap-table-toolbar.min'
-import jQuery from 'jquery'
-window.jQuery = jQuery
-window.$ = jQuery
-Vue.component('BootstrapTable', BootstrapTable)
+// 导入 Bootstrap 框架的最小化样式文件（CSS），这个文件包含了 Bootstrap 提供的各种基础样式类，用于构建页面的基本布局、排版以及常见的 UI 组件（如按钮、表单、导航栏等）样式，使得页面能够呈现出符合 Bootstrap 风格的外观，后续在项目中可以直接使用这些预定义的样式类来快速搭建页面。
+import 'bootstrap/dist/css/bootstrap.min.css';
+// 导入 Bootstrap-Vue 组件库对应的样式文件（CSS），Bootstrap-Vue 是基于 Vue 和 Bootstrap 进行整合的库，这个样式文件用于确保使用 Bootstrap-Vue 组件时能正确显示相应的样式，使组件的外观符合预期，与 Bootstrap 风格相匹配，为基于 Vue 构建的页面提供了丰富且美观的 UI 组件样式支持。
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+// 导入 Bootstrap-Table 组件对应的最小化样式文件（CSS），Bootstrap-Table 用于在页面中以 Bootstrap 风格展示表格数据，该样式文件定义了表格及其相关元素（表头、单元格、分页等）的样式，方便在项目中创建出美观且功能实用的表格样式，增强数据展示的可读性和交互性。
+import 'bootstrap-table/dist/bootstrap-table.min.css';
+// 导入 Font Awesome 图标库的全部最小化样式文件（CSS），Font Awesome 提供了大量的矢量图标，通过这个文件引入后，就可以在页面中使用相应的图标类（如 `fas fa-user` 表示用户图标等）来展示各种图标，丰富页面的可视化元素，提升用户界面的交互性和美观度。
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+// 导入 Vue 框架的核心库，它是整个 Vue 项目构建的基础，提供了创建组件、管理数据、响应式系统等核心功能，后续所有基于 Vue 的插件、组件及功能拓展都依赖于此基础库来运行和交互。
+import Vue from 'vue';
+// 导入 Bootstrap 框架的 JavaScript 相关代码，这使得项目能够使用 Bootstrap 提供的各种 JavaScript 功能，比如一些组件的交互效果（如模态框的弹出、下拉菜单的展开等），将其整合进整个项目中，实现更丰富的前端交互功能。
+import 'bootstrap';
+// 导入 FileSaver.min.js 文件，它属于 tableexport.jquery.plugin 库的一部分，通常用于在浏览器端实现将数据保存为文件的功能，例如将表格数据导出为 Excel 等文件格式时，会借助这个库来处理文件保存相关的操作，方便用户进行数据的本地保存。
+import 'tableexport.jquery.plugin/libs/FileSaver/FileSaver.min.js';
+// 导入 tableExport.min.js 文件，同样来自 tableexport.jquery.plugin 库，它可能是用于实现表格数据导出功能的核心文件，提供了具体的导出逻辑和接口，与 FileSaver.min.js 等配合，能够将页面中的表格数据按照一定格式（如 CSV、Excel 等）导出到本地，满足用户获取数据副本的需求。
+import 'tableexport.jquery.plugin/tableExport.min.js';
+// 导入 Bootstrap-Table 组件的 JavaScript 相关代码，用于在项目中实例化和使用 Bootstrap-Table 组件，使其能够在页面上展示表格数据，并具备如排序、筛选、分页等丰富的表格交互功能，方便对大量数据进行展示和操作。
+import 'bootstrap-table/dist/bootstrap-table';
+// 导入 Bootstrap-Table 组件的 Vue 版本（以 ESM 模块格式），并将其重命名为 BootstrapTable，这样在 Vue 项目中就可以像使用普通 Vue 组件一样使用它，通过在组件模板中添加对应的标签来展示表格，利用其提供的各种属性、事件和插槽等功能来定制表格的展示和交互行为，方便在 Vue 环境下更便捷地操作和展示表格数据。
+import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm';
+// 导入 Bootstrap-Table 的导出扩展功能相关代码，用于为 Bootstrap-Table 组件添加数据导出的功能，比如可以通过表格上的导出按钮将表格数据导出为指定格式的文件，增强了表格组件的实用性，满足用户对于数据导出的常见需求。
+import 'bootstrap-table/dist/extensions/export/bootstrap-table-export';
+// 导入 Bootstrap-Table 的工具栏扩展功能的最小化代码文件，该扩展可能为表格添加工具栏相关的功能，例如在表格上方或下方显示一些操作按钮（如刷新、添加行、删除行等，具体取决于扩展的实现），方便用户对表格进行更多的操作和管理，提升用户与表格交互的便捷性。
+import 'bootstrap-table/dist/extensions/toolbar/bootstrap-table-toolbar.min';
+// 导入 jQuery 库，jQuery 是一个广泛使用的 JavaScript 库，提供了简洁的 API 用于操作 DOM、处理事件、实现动画效果等，很多前端插件和库（如 Bootstrap 等）都依赖它来实现一些功能，在这里导入后将其挂载到全局的 `window` 对象上，方便在项目中全局使用 jQuery 的功能，并且确保其他依赖 jQuery 的库能够正常工作。
+import jQuery from 'jquery';
+// 将导入的 jQuery 库挂载到全局的 `window` 对象的 `jQuery` 属性上，使得在整个项目的任何地方（包括其他 JavaScript 文件、HTML 页面中的内联脚本等）都可以通过 `window.jQuery` 来访问和使用 jQuery 库，遵循了一些基于 jQuery 的插件和库对 jQuery 引用的常规做法，保证兼容性和正常调用。
+window.jQuery = jQuery;
+// 同时，也将 jQuery 库挂载到全局的 `window` 对象的 `$` 属性上，这是一种常见的用法，因为很多 jQuery 相关的代码习惯使用 `$` 符号来调用 jQuery 的方法和功能（如 `$(document).ready()` 等），这样在项目中可以方便地使用这种简洁的写法来操作 jQuery，提高开发效率。
+window.$ = jQuery;
+
+// 使用 Vue.component 方法将导入的 BootstrapTable（即 Bootstrap-Table 的 Vue 组件版本）注册为全局 Vue 组件，注册后在整个 Vue 项目的任何组件中都可以直接使用 `<BootstrapTable>` 标签来创建表格，无需在每个使用的组件内再次导入，方便复用和统一管理表格组件的使用，提高代码的可维护性和开发效率。
+Vue.component('BootstrapTable', BootstrapTable);

frontend/src/plugins/summernote.js

@@ -1,7 +1,18 @@
-// 引入summernote，参考https://blog.csdn.net/qq_24734285/article/details/80246093
-import 'bootstrap/dist/js/bootstrap.bundle.min'
-import 'bootstrap/dist/css/bootstrap.css'
-import 'font-awesome/css/font-awesome.css'
-import 'summernote'
-import 'summernote/dist/lang/summernote-zh-CN'
-import 'summernote/dist/summernote.css'
+// 引入bootstrap的JavaScript压缩包（bundle.min版本），bootstrap.bundle.min文件包含了Bootstrap框架的所有核心JavaScript功能以及其依赖的Popper.js（用于实现一些弹出框、下拉菜单等组件的定位功能），
+// 导入这个文件后，就能在项目中使用Bootstrap提供的各种交互性组件和功能，比如模态框的弹出、导航栏的响应式切换、下拉菜单的展示与交互等，为页面添加丰富的交互效果和动态功能。
+import 'bootstrap/dist/js/bootstrap.bundle.min';
+
+// 引入Bootstrap框架的CSS样式文件，这个文件定义了Bootstrap的各种UI组件（如按钮、表单、网格系统、卡片等）的默认样式，通过引入它，页面中的元素可以应用这些预定义样式类来快速呈现出Bootstrap风格的外观，方便进行页面布局搭建和UI设计，确保组件具有统一且美观的样式表现。
+import 'bootstrap/dist/css/bootstrap.css';
+
+// 引入Font Awesome图标库的CSS样式文件，Font Awesome提供了大量的矢量图标，通过引入该样式文件，就可以在HTML元素上使用相应的图标类（例如<i class="fa fa-user"></i>表示用户图标）来展示各种图标，丰富页面的可视化元素，提升用户界面的交互性和可读性，使页面能更直观地传达信息。
+import 'font-awesome/css/font-awesome.css';
+
+// 引入Summernote编辑器库，Summernote是一个基于JavaScript的富文本编辑器，它可以让用户在网页上像使用Word一样编辑文本内容，支持文本的格式化（如加粗、斜体、下划线等）、插入图片、列表、链接等丰富的功能，通过导入这个库，后续可以在项目中实例化并使用Summernote编辑器，为用户提供便捷的富文本编辑体验。
+import 'summernote';
+
+// 引入Summernote的中文语言包（summernote-zh-CN），这使得Summernote编辑器能够以中文显示各种提示信息、菜单选项等内容，提升用户在使用编辑器时的本地化体验，方便中文用户更直观地理解和操作编辑器的各项功能。
+import 'summernote/dist/lang/summernote-zh-CN';
+
+// 引入Summernote编辑器的CSS样式文件，该样式文件定义了Summernote编辑器在页面中呈现的外观样式，比如文本编辑区域的大小、颜色、按钮的样式等，确保编辑器在页面上能以符合其设计的样式展示出来，并且与页面整体风格相协调，给用户良好的视觉感受和编辑操作界面。
+import 'summernote/dist/summernote.css';

frontend/src/router/index.js

@@ -1,12 +1,21 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import { constantRouterMap } from '../config/router.config'
+// 导入Vue框架的核心库，它是整个Vue项目构建的基础，后续很多功能的实现（如创建组件、使用插件、构建页面等）都依赖于Vue提供的各种API和机制，是必不可少的核心依赖项。
+import Vue from 'vue';
+// 导入Vue Router库，Vue Router是Vue.js官方的路由管理器，用于在单页面应用（SPA）中实现页面之间的路由切换，通过定义不同的路由路径以及对应的组件，能够让用户在访问不同的URL时加载相应的页面内容，实现页面导航功能。
+import Router from 'vue-router';
+// 从 '../config/router.config' 文件中导入 'constantRouterMap'，从命名推测它应该是一个包含了常量路由信息的数组或者对象，里面定义了应用的一些基础的、不会动态变化的路由配置，例如首页路由、登录路由等固定的路由规则，每个路由配置通常包含路径（path）、对应的组件（component）以及其他一些如路由元数据（meta）等相关信息。
+import { constantRouterMap } from '../config/router.config';
 
-Vue.use(Router)
+// 使用Vue.use()方法将Vue Router插件注册到Vue实例中，这样在整个Vue项目里就能使用Vue Router提供的路由相关功能了，例如在组件中使用 <router-view> 展示路由对应的组件，使用 <router-link> 来创建路由链接等，这是启用Vue Router功能的必要步骤。
+Vue.use(Router);
 
+// 导出一个新创建的Vue Router实例，作为整个项目的路由配置对象，其他模块可以导入这个路由配置来挂载到Vue根实例上，从而让整个应用具备路由功能。
 export default new Router({
+  // 设置路由的模式为 'history'，这种模式下，URL看起来更像传统的多页面应用的URL（没有 '#' 符号），它使用浏览器的历史记录API来实现路由切换，使得页面的URL更加美观、易读且符合搜索引擎优化（SEO）的要求，但需要服务器端进行相应的配置来支持，避免出现刷新页面找不到资源等问题。
   mode: 'history',
+  // 设置路由的基础路径，它的值通常来自于项目的构建环境配置（process.env.BASE_URL），例如在项目部署到特定的子路径下时，这个基础路径就会发挥作用，确保路由能够正确地匹配到对应的资源和页面，保证路由功能的正常运行。
   base: process.env.BASE_URL,
+  // 定义滚动行为函数，这里返回的是一个对象 { y: 0 }，意味着当路由切换时，页面在垂直方向（y轴）上的滚动位置会被重置为0，也就是每次切换路由后页面都会滚动到顶部，当然可以根据实际需求修改这个函数来实现更复杂的滚动行为控制，比如根据不同路由保存或恢复滚动位置等。
   scrollBehavior: () => ({ y: 0 }),
+  // 将前面导入的 'constantRouterMap' 作为路由配置的 routes 属性值，也就是把预定义好的那些常量路由信息添加到路由配置中，让Vue Router知道有哪些路由路径以及对应的组件等信息，以便在用户访问不同URL时能够正确地匹配并加载相应的页面组件。
   routes: constantRouterMap
-})
+})