py4fbma29
/
mall-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request '合并' (#11) from branch_cwy into main

Browse Source
main
py4fbma29 3 months ago
parent c5c92c1f3c 670a00aacf
commit 9910f12c6c
13 changed files with 1402 additions and 343 deletions
Show Stats Download Patch File Download Diff File

26
src/components/Breadcrumb/index.vue
Unescape View File

@ -1,8 +1,13 @@
<template> <template>
<!-- el-breadcrumb 组件用于创建面包屑导航，这里给它添加了类名 "app-breadcrumb"，并设置分隔符为 "/"，用于分隔面包屑中的各个节点 -->
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<!-- transition-group 组件用于对一组元素进行过渡动画效果的包裹，这里命名为 "breadcrumb"，它会根据内部元素的添加、删除、移动等操作自动应用过渡动画，常用于展示动态变化的元素列表，此处用于面包屑导航项的过渡效果处理 -->
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<!-- 使用 v-for 指令遍历 levelList 数组，创建多个 el-breadcrumb-item 组件（面包屑导航的每一项），并将数组中的每个元素（item）以及对应的索引（index）传递到循环体内部使用，同时通过 :key 绑定每个项的唯一标识（这里使用 item.path），确保 Vue 能够正确识别每个元素的变化 -->
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title"> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title">
<!-- 根据条件判断来决定面包屑导航项的显示方式，如果该项的 redirect 属性等于 "noredirect" 或者当前项是 levelList 数组中的最后一项（index == levelList.length - 1），则使用 span 标签显示该项的标题（item.meta.title），并且添加类名 "no-redirect"，用于后续样式设置 -->
<span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span> <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span>
<!-- 如果不满足上述条件（即可以进行路由跳转的情况），则使用 router-link 组件创建一个路由链接，通过 :to 属性绑定要跳转的目标路径（优先使用 item.redirect，如果不存在则使用 item.path），并在链接中显示该项的标题（item.meta.title），点击该链接可导航到对应的路由页面 -->
<router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link> <router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>
@ -11,14 +16,17 @@
<script> <script>
export default { export default {
// created 生命周期钩子函数，在组件实例被创建后立即调用，这里调用了 this.getBreadcrumb 方法，用于初始化获取面包屑导航的数据，确保在组件首次渲染时就能展示正确的面包屑信息
created() { created() {
this.getBreadcrumb() this.getBreadcrumb()
}, },
data() { data() {
return { return {
// 定义一个名为 levelList 的数据属性，初始值为 null，它将用于存储面包屑导航对应的路由信息数组，后续会通过 getBreadcrumb 方法来填充这个数组，每个元素代表面包屑中的一项对应的路由相关数据
levelList: null levelList: null
} }
}, },
// watch 选项用于监听组件中的数据变化，这里监听了 $route（Vue 路由对象）的变化，一旦路由发生改变，就会触发 this.getBreadcrumb 方法，重新获取并更新面包屑导航的数据，以保证面包屑能够实时反映当前的路由情况
watch: { watch: {
$route() { $route() {
this.getBreadcrumb() this.getBreadcrumb()
@ -26,11 +34,15 @@ export default {
}, },
methods: { methods: {
getBreadcrumb() { getBreadcrumb() {
// 通过 this.$route.matched 获取当前路由匹配的所有路由记录数组（包含了从根路由到当前路由的所有嵌套路由记录），然后使用 filter 方法筛选出其中有 name 属性的路由记录（通常有 name 属性的路由才方便进行导航等相关操作），将筛选后的结果赋值给 matched 变量
let matched = this.$route.matched.filter(item => item.name) let matched = this.$route.matched.filter(item => item.name)
const first = matched[0] const first = matched[0]
if (first && first.name !== 'home') { // 判断筛选后的第一个路由记录（即最顶层匹配的路由）是否存在，并且其 name 属性不等于 'home'，如果满足这个条件
if (first && first.name!== 'home') {
// 则在 matched 数组的开头插入一个新的路由记录，表示首页路由，它的路径为 '/home'，元数据（meta）中的标题设置为 '首页'，这样做可能是为了确保面包屑导航中始终能显示首页作为根节点（除非当前就在首页路由）
matched = [{ path: '/home', meta: { title: '首页' }}].concat(matched) matched = [{ path: '/home', meta: { title: '首页' }}].concat(matched)
} }
// 将处理后的 matched 数组赋值给 levelList 属性，使得模板中可以根据这个数组来渲染面包屑导航的各项内容
this.levelList = matched this.levelList = matched
} }
} }
@ -38,14 +50,22 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.app-breadcrumb.el-breadcrumb { // 选择器匹配类名为 "app-breadcrumb" 的元素内部的类名为 "el-breadcrumb" 的子元素（也就是前面模板中定义的面包屑导航组件），设置以下样式属性
.app-breadcrumb.el-breadcrumb {
// 将元素显示为行内块级元素，使其既可以在水平方向上与其他元素并排显示，又能设置宽度、高度等块级元素的属性
display: inline-block; display: inline-block;
// 设置字体大小为 14px，用于控制面包屑导航文字的大小显示
font-size: 14px; font-size: 14px;
// 设置行高为 50px，使得面包屑导航中的文字在垂直方向上能够较好地居中对齐，并且影响整个面包屑导航在垂直方向上的布局高度
line-height: 50px; line-height: 50px;
// 设置元素左侧的外边距为 10px，用于与其他相邻元素在水平方向上拉开一定的间距，使布局更美观
margin-left: 10px; margin-left: 10px;
// 针对类名为 "no-redirect" 的子元素（即模板中那些不进行路由跳转，只是展示文本的面包屑导航项）设置样式，以下是具体的样式属性说明
.no-redirect { .no-redirect {
// 设置文字颜色为 #97a8be，一种特定的颜色，用于区分这类特殊的面包屑导航项与可点击跳转的导航项
color: #97a8be; color: #97a8be;
// 将鼠标指针样式设置为文本光标样式（cursor: text），表示该元素不可点击（因为它不进行路由跳转），给用户视觉上的提示
cursor: text; cursor: text;
} }
} }
</style> </style>

842
src/components/Tinymce/zh_CN.js
Unescape View File

@ -1,116 +1,277 @@
// tinymce.addI18n 方法用于向 TinyMCE 编辑器添加国际化（i18n）语言包，这里添加的是中文（简体，'zh_CN'）语言包。
// 其参数是一个对象，对象的属性名对应着 TinyMCE 编辑器中各种功能或提示文本的标识符，属性值则是对应的中文翻译内容。
tinymce.addI18n('zh_CN',{ tinymce.addI18n('zh_CN',{
"Cut": "\u526a\u5207", // "Cut" 对应的中文翻译为 "剪切"，在编辑器中涉及剪切操作相关的功能显示文本时会使用这个翻译。
"Heading 5": "\u6807\u98985", "Cut": "\u526a\u5207",
"Header 2": "\u6807\u98982", // "Heading 5" 翻译为 "标题 5"，可能用于表示文档中不同级别的标题，这里是第 5 级标题相关功能展示时对应的文本。
"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u5bf9\u526a\u8d34\u677f\u7684\u8bbf\u95ee\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u952e\u8fdb\u884c\u590d\u5236\u7c98\u8d34\u3002", "Heading 5": "\u6807\u98985",
"Heading 4": "\u6807\u98984", // "Header 2" 翻译为 "标题 2"，同样与文档标题级别相关，此处是第 2 级标题对应的文本，可能用于菜单、按钮等地方显示。
"Div": "Div\u533a\u5757", "Header 2": "\u6807\u98982",
"Heading 2": "\u6807\u98982", // 这条较长的文本是一个提示信息，当用户浏览器不支持直接访问剪贴板时显示，提示用户使用 Ctrl + X/C/V 键盘快捷键来进行复制、粘贴、剪切操作。
"Paste": "\u7c98\u8d34", "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u5bf9\u526a\u8d34\u677f\u7684\u8bbf\u95ee\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u952e\u8fdb\u884c\u590d\u5236\u7c98\u8d34\u3002",
"Close": "\u5173\u95ed", "Heading 4": "\u6807\u98984",
"Font Family": "\u5b57\u4f53", // "Div" 翻译为 "Div 区块"，可能与 HTML 中的 <div> 标签相关的功能显示文本对应，比如在插入、编辑相关区块操作时使用。
"Pre": "\u9884\u683c\u5f0f\u6587\u672c", "Div": "Div\u533a\u5757",
"Align right": "\u53f3\u5bf9\u9f50", // 重复出现的 "Heading 2"，同样表示 "标题 2"，与前面功能类似，在不同地方用于显示第 2 级标题相关的文本。
"New document": "\u65b0\u6587\u6863", "Heading 2": "\u6807\u98982",
"Blockquote": "\u5f15\u7528", // "Paste" 翻译为 "粘贴"，对应粘贴操作相关功能在界面上显示的文本内容。
"Numbered list": "\u7f16\u53f7\u5217\u8868", "Paste": "\u7c98\u8d34",
"Heading 1": "\u6807\u98981", // "Close" 翻译为 "关闭"，常用于关闭对话框、菜单等操作对应的提示文本。
"Headings": "\u6807\u9898", "Close": "\u5173\u95ed",
"Increase indent": "\u589e\u52a0\u7f29\u8fdb", // "Font Family" 翻译为 "字体"，在涉及选择字体相关的功能菜单、下拉框等地方会显示该文本，用于提示用户操作的内容。
"Formats": "\u683c\u5f0f", "Font Family": "\u5b57\u4f53",
"Headers": "\u6807\u9898", // "Pre" 翻译为 "预格式化文本"，可能与显示代码块、预格式化的文本段落等相关功能的文本显示对应。
"Select all": "\u5168\u9009", "Pre": "\u9884\u683c\u5f0f\u6587\u672c",
"Header 3": "\u6807\u98983", // "Align right" 翻译为 "右对齐"，用于在设置文本、图片等元素对齐方式为靠右对齐时显示的文本提示。
"Blocks": "\u533a\u5757", "Align right": "\u53f3\u5bf9\u9f50",
"Undo": "\u64a4\u6d88", // "New document" 翻译为 "新文档"，比如在创建新的空白文档等相关操作时会显示该文本作为提示。
"Strikethrough": "\u5220\u9664\u7ebf", "New document": "\u65b0\u6587\u6863",
"Bullet list": "\u9879\u76ee\u7b26\u53f7", // "Blockquote" 翻译为 "引用"，可能用于在插入、编辑引用块相关功能显示的文本内容，如引用他人文字等场景。
"Header 1": "\u6807\u98981", "Blockquote": "\u5f15\u7528",
"Superscript": "\u4e0a\u6807", // "Numbered list" 翻译为 "编号列表"，对应创建、编辑有序列表相关操作在界面上显示的文本提示。
"Clear formatting": "\u6e05\u9664\u683c\u5f0f", "Numbered list": "\u7f16\u53f7\u5217\u8868",
"Font Sizes": "\u5b57\u53f7", // "Heading 1" 翻译为 "标题 1"，表示文档中最高级别的标题相关功能对应的文本，比如文章的主标题相关操作显示文本。
"Subscript": "\u4e0b\u6807", "Heading 1": "\u6807\u98981",
"Header 6": "\u6807\u98986", // "Headings" 翻译为 "标题"，是一个比较笼统表示各种标题相关功能的文本，比如标题样式选择等场景会用到。
"Redo": "\u91cd\u590d", "Headings": "\u6807\u9898",
"Paragraph": "\u6bb5\u843d", // "Increase indent" 翻译为 "增加缩进"，用于在调整文本段落缩进量，使其更缩进时显示的操作提示文本。
"Ok": "\u786e\u5b9a", "Increase indent": "\u589e\u52a0\u7f29\u8fdb",
"Bold": "\u7c97\u4f53", // "Formats" 翻译为 "格式"，常用于格式选择、格式转换等相关功能菜单、按钮等地方显示的文本提示。
"Code": "\u4ee3\u7801", "Formats": "\u683c\u5f0f",
"Italic": "\u659c\u4f53", // "Headers" 翻译为 "标题"，与前面类似，也是和文档中各级标题相关功能对应的文本内容。
"Align center": "\u5c45\u4e2d", "Headers": "\u6807\u9898",
"Header 5": "\u6807\u98985", // "Select all" 翻译为 "全选"，在提供选择全部内容功能的地方会显示该文本，方便用户操作。
"Heading 6": "\u6807\u98986", "Select all": "\u5168\u9009",
"Heading 3": "\u6807\u98983", // "Header 3" 翻译为 "标题 3"，对应文档中第 3 级标题相关功能显示的文本内容。
"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb", "Header 3": "\u6807\u98983",
"Header 4": "\u6807\u98984", // "Blocks" 翻译为 "区块"，可能涉及页面中各种块状元素（如不同类型的容器、分区等）相关功能显示的文本。
"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002", "Blocks": "\u533a\u5757",
"Underline": "\u4e0b\u5212\u7ebf", // "Undo" 翻译为 "撤销"，用于撤销上一步操作的功能按钮等地方显示的文本提示。
"Cancel": "\u53d6\u6d88", "Undo": "\u64a4\u6d88",
"Justify": "\u4e24\u7aef\u5bf9\u9f50", // "Strikethrough" 翻译为 "删除线"，在给文本添加或取消删除线相关操作时显示的文本提示。
"Inline": "\u6587\u672c", "Strikethrough": "\u5220\u9664\u7ebf",
"Copy": "\u590d\u5236", // "Bullet list" 翻译为 "项目符号列表"，对应创建、编辑无序列表相关操作在界面上显示的文本提示。
"Align left": "\u5de6\u5bf9\u9f50", "Bullet list": "\u9879\u76ee\u7b26\u53f7",
"Visual aids": "\u7f51\u683c\u7ebf", // 重复的 "Header 1"，表示 "标题 1"，对应相关标题级别功能显示文本。
"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd", "Header 1": "\u6807\u98981",
"Square": "\u65b9\u5757", // "Superscript" 翻译为 "上标"，用于在设置文本为上标形式（如数学公式中的指数等场景）相关操作显示的文本提示。
"Default": "\u9ed8\u8ba4", "Superscript": "\u4e0a\u6807",
"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd", // "Clear formatting" 翻译为 "清除格式"，在去除文本已有的格式，恢复到默认格式等相关操作时显示的文本提示。
"Circle": "\u7a7a\u5fc3\u5706", "Clear formatting": "\u6e05\u9664\u683c\u5f0f",
"Disc": "\u5b9e\u5fc3\u5706", // "Font Sizes" 翻译为 "字号"，在选择字体大小相关的功能菜单、下拉框等地方会显示该文本，提示用户操作内容。
"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd", "Font Sizes": "\u5b57\u53f7",
"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd", // "Subscript" 翻译为 "下标"，用于在设置文本为下标形式（如化学公式中的下标等场景）相关操作显示的文本提示。
"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd", "Subscript": "\u4e0b\u6807",
"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002", // "Header 6" 翻译为 "标题 6"，对应文档中第 6 级标题相关功能显示的文本内容。
"Name": "\u540d\u79f0", "Header 6": "\u6807\u98986",
"Anchor": "\u951a\u70b9", // "Redo" 翻译为 "重做"，用于重新执行上一步被撤销的操作的功能按钮等地方显示的文本提示。
"Id": "\u6807\u8bc6\u7b26", "Redo": "\u91cd\u590d",
"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f", // "Paragraph" 翻译为 "段落"，与文本段落相关的功能（如段落格式设置、新建段落等）显示的文本提示会用到。
"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f", "Paragraph": "\u6bb5\u843d",
"Special character": "\u7279\u6b8a\u7b26\u53f7", // "Ok" 翻译为 "确定"，常用于确认操作、提交设置等对话框中的按钮文本提示。
"Source code": "\u6e90\u4ee3\u7801", "Ok": "\u786e\u5b9a",
"Language": "\u8bed\u8a00", // "Bold" 翻译为 "粗体"，在将文本设置为加粗字体相关操作时显示的文本提示。
"Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b", "Bold": "\u7c97\u4f53",
"B": "B", // "Code" 翻译为 "代码"，可能涉及插入、编辑代码块相关功能显示的文本内容，或者切换到代码编辑模式等场景使用。
"R": "R", "Code": "\u4ee3\u7801",
"G": "G", // "Italic" 翻译为 "斜体"，在将文本设置为斜体字体相关操作时显示的文本提示。
"Color": "\u989c\u8272", "Italic": "\u659c\u4f53",
"Right to left": "\u4ece\u53f3\u5230\u5de6", // "Align center" 翻译为 "居中对齐"，用于在设置文本、图片等元素对齐方式为居中对齐时显示的文本提示。
"Left to right": "\u4ece\u5de6\u5230\u53f3", "Align center": "\u5c45\u4e2d",
"Emoticons": "\u8868\u60c5", // 重复的 "Header 5"，表示 "标题 5"，对应相关标题级别功能显示文本。
"Robots": "\u673a\u5668\u4eba", "Header 5": "\u6807\u98985",
"Document properties": "\u6587\u6863\u5c5e\u6027", // "Heading 6" 翻译为 "标题 6"，对应文档中第 6 级标题相关功能显示的文本内容。
"Title": "\u6807\u9898", "Heading 6": "\u6807\u98986",
"Keywords": "\u5173\u952e\u8bcd", // "Heading 3" 翻译为 "标题 3"，对应文档中第 3 级标题相关功能显示的文本内容。
"Encoding": "\u7f16\u7801", "Heading 3": "\u6807\u98983",
"Description": "\u63cf\u8ff0", // "Decrease indent" 翻译为 "减少缩进"，用于在调整文本段落缩进量，使其减少缩进时显示的操作提示文本。
"Author": "\u4f5c\u8005", "Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
"Fullscreen": "\u5168\u5c4f", // 重复的 "Header 4"，表示 "标题 4"，对应相关标题级别功能显示文本。
"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf", "Header 4": "\u6807\u98984",
"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd", // 这条长文本是一个关于粘贴模式的提示信息，告知用户当前处于纯文本粘贴模式，再次点击相关选项可切换回普通粘贴模式，下次粘贴内容将以纯文本形式粘贴。
"Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247", "Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u5185\u5bb9\u5c06\u73b0\u5728\u4f1a\u7c98\u8d34\u4e3a\u7eaf\u6587\u672c\u6a21\u5f0f\u3002",
"General": "\u666e\u901a", // "Underline" 翻译为 "下划线"，在给文本添加或取消下划线相关操作时显示的文本提示。
"Advanced": "\u9ad8\u7ea7", "Underline": "\u4e0b\u5212\u7ebf",
"Source": "\u5730\u5740", // "Cancel" 翻译为 "取消"，常用于取消操作、关闭对话框等不执行当前操作并返回的场景对应的按钮文本提示。
"Border": "\u8fb9\u6846", "Cancel": "\u53d6\u6d88",
"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4", // "Justify" 翻译为 "两端对齐"，用于在设置文本、段落等元素两端对齐方式时显示的文本提示。
"Vertical space": "\u5782\u76f4\u8fb9\u8ddd", "Justify": "\u4e24\u7aef\u5bf9\u9f50",
"Image description": "\u56fe\u7247\u63cf\u8ff0", // "Inline" 翻译为 "行内"，可能涉及行内元素相关功能（如行内样式、行内编辑等）显示的文本内容。
"Style": "\u6837\u5f0f", "Inline": "\u6587\u672c",
"Dimensions": "\u5927\u5c0f", // "Copy" 翻译为 "复制"，对应复制操作相关功能在界面上显示的文本内容。
"Insert image": "\u63d2\u5165\u56fe\u7247", "Copy": "\u590d\u5236",
"Image": "\u56fe\u7247", // "Align left" 翻译为 "左对齐"，用于在设置文本、图片等元素对齐方式为靠左对齐时显示的文本提示。
"Zoom in": "\u653e\u5927", "Align left": "\u5de6\u5bf9\u9f50",
"Contrast": "\u5bf9\u6bd4\u5ea6", // "Visual aids" 翻译为 "视觉辅助"，可能与编辑器中提供的一些辅助查看、编辑的可视化功能（如显示网格线、边框等帮助排版的元素）相关文本提示。
"Back": "\u540e\u9000", "Visual aids": "\u7f51\u683c\u7ebf",
"Gamma": "\u4f3d\u9a6c\u503c", // "Lower Greek" 翻译为 "小写希腊字母"，可能与插入特殊字符、编号等相关功能涉及到使用小写希腊字母时显示的文本提示。
"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c", "Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
"Resize": "\u8c03\u6574\u5927\u5c0f", // "Square" 翻译为 "方块"，可能用于表示某种形状相关的功能（比如项目符号形状等）显示的文本提示。
"Sharpen": "\u9510\u5316", "Square": "\u65b9\u5757",
"Zoom out": "\u7f29\u5c0f", // "Default" 翻译为 "默认"，常用于表示恢复到默认设置、使用默认选项等相关功能的文本提示。
"Image options": "\u56fe\u7247\u9009\u9879", "Default": "\u9ed8\u8ba4",
"Apply": "\u5e94\u7528", // "Lower Alpha" 翻译为 "小写英文字母"，可能与编号、列表等相关功能使用小写英文字母作为序号时显示的文本提示。
"Brightness": "\u4eae\u5ea6", "Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c", // "Circle" 翻译为 "空心圆"，同样可能与项目符号、形状相关功能显示的文本提示有关，比如选择项目符号形状为空心圆等场景。
"Circle": "\u7a7a\u5fc3\u5706",
// "Disc" 翻译为 "实心圆"，类似上述情况，用于表示实心圆形状相关功能显示的文本提示，比如项目符号形状选择等。
"Disc": "\u5b9e\u5fc3\u5706",
// "Upper Alpha" 翻译为 "大写英文字母"，在相关功能使用大写英文字母作为序号（如编号列表等场景）时显示的文本提示。
"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
// "Upper Roman" 翻译为 "大写罗马数字"，与使用大写罗马数字作为序号相关功能（如列表编号等场景）显示的文本提示有关。
"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
// "Lower Roman" 翻译为 "小写罗马数字"，用于在相关功能使用小写罗马数字作为序号时显示的文本提示，比如列表编号场景。
"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
// 这条长文本是一个关于标识符（Id）格式要求的提示信息，告知用户标识符应以字母开头，后面只能跟字母、数字、破折号、点、冒号或下划线，用于在输入相关标识内容时给用户提示规范要求。
"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
// "Name" 翻译为 "名称"，常用于各种元素（如文件、链接、对象等）命名相关功能显示的文本提示。
"Name": "\u540d\u79f0",
// "Anchor" 翻译为 "锚点"，在网页编辑中与设置锚点（用于页面内快速定位等功能）相关操作显示的文本提示。
// "Anchor" 翻译为 "锚点"，在网页编辑等场景下，通常用于表示页面内的定位标记（锚点）相关功能对应的文本，
// 比如设置锚点、跳转到锚点位置等操作时，界面上显示的提示文字等会使用这个翻译后的文本。
"Anchor": "\u951a\u70b9",
// "Id" 翻译为 "标识符"，常用于标识页面元素、数据记录等具有唯一性的标识符号相关功能显示的文本，
// 例如在 HTML 中元素的 id 属性设置、脚本中通过标识符来获取或操作特定对象等场景会用到该文本提示。
"Id": "\u6807\u8bc6\u7b26",
// 这是一个提示性的文本信息，用于当用户在文档有未保存更改的情况下，尝试离开当前页面（如切换页面、关闭窗口等操作）时弹出提示，
// 询问用户是否确定要离开，提醒用户可能存在数据丢失的风险。
"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
// "Restore last draft" 翻译为 "恢复上次草稿"，常用于文档编辑软件中，当用户想要找回上一次保存或自动保存的草稿内容时，
// 点击对应功能按钮等操作时会显示该文本作为提示，告知用户此操作的作用。
"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
// "Special character" 翻译为 "特殊字符"，在涉及插入、选择特殊符号（如数学符号、版权符号等非常规字母数字字符）相关功能时，
// 界面上对应的菜单、按钮等地方会显示该文本作为操作提示，引导用户进行相应操作。
"Special character": "\u7279\u6b8a\u7b26\u53f7",
// "Source code" 翻译为 "源代码"，多用于代码编辑、网页开发等场景，比如查看或编辑 HTML、JavaScript 等代码时，
// 切换到代码视图或者相关代码编辑区域显示该文本，表明此处展示的是原始的代码内容。
"Source code": "\u6e90\u4ee3\u7801",
// "Language" 翻译为 "语言"，通常用于选择文档语言、编程语言、界面语言等相关功能的文本提示，
// 例如在国际化设置中选择不同语言版本，或者代码编辑器中切换代码语言模式等场景会出现该文本。
"Language": "\u8bed\u8a00",
// "Insert/Edit code sample" 翻译为 "插入/编辑代码示例"，用于在文档编辑、代码展示等场景下，
// 当用户想要添加一段代码示例或者对已有的代码示例进行修改编辑时，对应操作按钮、菜单选项等地方会显示该文本作为提示。
"Insert/Edit code sample": "\u63d2\u5165/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
// "B"、"R"、"G" 这几个单独的字母，可能分别代表颜色中的蓝色（Blue）、红色（Red）、绿色（Green）分量相关含义，
// 在涉及颜色设置（如 RGB 颜色模式下调整各颜色分量数值等场景）时会作为相关标识使用，具体使用场景需结合具体代码逻辑判断。
"B": "B",
"R": "R",
"G": "G",
// "Color" 翻译为 "颜色"，是一个比较通用的表示与颜色相关功能的文本，比如选择字体颜色、背景颜色、元素颜色等操作时，
// 对应的菜单、对话框等地方会显示该文本作为操作提示，引导用户进行颜色相关的设置。
"Color": "\u989c\u8272",
// "Right to left" 翻译为 "从右到左"，常用于文本排版、界面布局等涉及方向设置的功能场景，
// 例如一些支持从右向左书写语言（如阿拉伯语等）的排版，或者切换元素排列方向等操作时会显示该文本提示。
"Right to left": "\u4ece\u53f3\u5230\u5de6",
// "Left to right" 翻译为 "从左到右"，与上面对应，是常规的文本、元素排列方向设置相关功能显示的文本，
// 比如设置文本阅读顺序、界面元素排列顺序等操作时会出现该文本作为提示信息。
"Left to right": "\u4ece\u5de6\u5230\u53f3",
// "Emoticons" 翻译为 "表情符号"，在支持插入表情符号来丰富文档内容的编辑器中，
// 当用户点击插入表情相关功能按钮、打开表情选择菜单等操作时会显示该文本作为提示，引导用户选择表情符号。
"Emoticons": "\u8868\u60c5",
// "Robots" 翻译为 "机器人"，具体含义要根据具体应用场景判断，可能涉及到网页爬虫相关设置（搜索引擎机器人等）、
// 自动化脚本模拟机器人操作等相关功能显示该文本作为相关提示内容。
"Robots": "\u673a\u5668\u4eba",
// "Document properties" 翻译为 "文档属性"，常用于查看或编辑文档的各种元数据信息，如文档标题、作者、创建时间、
// 关键词等相关功能的菜单、对话框等地方会显示该文本作为操作入口提示，引导用户查看或修改这些属性。
"Document properties": "\u6587\u6863\u5c5e\u6027",
// "Title" 翻译为 "标题"，用途广泛，可以表示文档的主标题、页面标题、章节标题等相关功能显示的文本，
// 例如在设置文档标题栏显示内容、文章各级标题编辑等场景都会用到该文本提示。
"Title": "\u6807\u9898",
// "Keywords" 翻译为 "关键词"，在文档属性设置、搜索引擎优化等场景下，用于填写、编辑能代表文档核心内容的关键词语，
// 相关功能区域（如文档元数据编辑框等）会显示该文本作为操作提示，引导用户输入关键词。
"Keywords": "\u5173\u952e\u8bcd",
// "Encoding" 翻译为 "编码"，常用于设置文档、网页等的字符编码格式（如 UTF-8、GBK 等）相关功能，
// 在选择编码类型、查看当前编码等操作对应的菜单、对话框等地方会显示该文本作为提示信息。
"Encoding": "\u7f16\u7801",
// "Description" 翻译为 "描述"，常用来表示对文档、网页等内容的简短说明文字，
// 例如在文档元数据中填写文档简介、网页的描述信息用于搜索引擎展示摘要等场景会用到该文本提示用户输入相关内容。
"Description": "\u63cf\u8ff0",
// "Author" 翻译为 "作者"，用于在文档属性等相关功能中填写、显示文档创作者的信息，
// 对应功能区域（如文档作者编辑框等）会显示该文本作为操作提示，引导用户输入或查看作者名称。
"Author": "\u4f5c\u8005",
// "Fullscreen" 翻译为 "全屏"，在应用程序、网页等提供全屏显示功能的地方，
// 当用户点击全屏按钮、切换到全屏模式等操作时会显示该文本作为提示，告知用户当前进入了全屏状态或可进入全屏状态。
"Fullscreen": "\u5168\u5c4f",
// "Horizontal line" 翻译为 "水平线"，在文档编辑、页面设计等场景下，用于插入、编辑水平分割线相关操作时，
// 对应的菜单、按钮等地方会显示该文本作为操作提示，引导用户进行插入或修改水平线的操作。
"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
// "Horizontal space" 翻译为 "水平间距"，常用于调整页面元素、文本段落等在水平方向上的间隔距离相关功能，
// 例如在排版设置中修改元素之间的水平空白大小等操作时会显示该文本作为操作提示。
"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
// "Insert/edit image" 翻译为 "插入/编辑图片"，在文档编辑、网页内容编辑等场景下，
// 当用户想要添加一张新图片或者对已有的图片进行修改编辑（如调整大小、更换图片等操作）时，
// 对应的操作按钮、菜单选项等地方会显示该文本作为提示，引导用户进行相应操作。
"Insert/edit image": "\u63d2\u5165/\u7f16\u8f91\u56fe\u7247",
// "General" 翻译为 "常规"，常用于表示一组设置选项中的通用、基础设置部分，
// 例如在软件的设置对话框中，会将一些常见的、基本的设置分类到 "常规" 选项卡下，对应的选项卡标题会显示该文本作为提示。
"General": "\u666e\u901a",
// "Advanced" 翻译为 "高级"，与 "常规" 相对，通常用于存放更复杂、专业、进阶的设置选项，
// 只有熟悉相关功能或者有特定需求的用户才会去调整这些设置，在设置界面中对应的选项卡标题等地方会显示该文本作为提示。
"Advanced": "\u9ad8\u7ea7",
// "Source" 翻译为 "来源"，在很多场景下有不同含义，比如图片、视频等媒体资源的原始地址（来源链接），
// 或者代码片段的引用来源等相关功能显示该文本作为提示信息，引导用户填写或查看相应的来源信息。
"Source": "\u5730\u5740",
// "Border" 翻译为 "边框"，常用于设置页面元素（如图片、表格、文本框等）的边框样式、宽度、颜色等相关功能，
// 对应的边框设置菜单、对话框等地方会显示该文本作为操作提示，引导用户进行边框相关的设置。
"Border": "\u8fb9\u6846",
// "Constrain proportions" 翻译为 "保持比例"，在调整图片、图形等元素大小时，
// 如果希望元素的宽高比例保持不变（避免拉伸变形），相关操作按钮、设置选项等地方会显示该文本作为提示，
// 告知用户当前设置可保持元素原有比例进行缩放操作。
"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
// "Vertical space" 翻译为 "垂直间距"，类似于 "Horizontal space"，不过是用于调整页面元素、文本段落等在垂直方向上的间隔距离相关功能，
// 比如在排版中设置行间距、元素上下间隔等操作时会显示该文本作为操作提示。
"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
// "Image description" 翻译为 "图片描述"，常用于为图片添加说明性文字，
// 比如在网页中方便搜索引擎识别图片内容、辅助视障人士理解图片含义等场景下，会有填写图片描述的功能，对应功能区域会显示该文本提示。
"Image description": "\u56fe\u7247\u63cf\u8ff0",
// "Style" 翻译为 "样式"，在文档编辑、网页开发等场景下应用广泛，用于设置文本、元素的各种外观样式（如字体样式、颜色样式、布局样式等），
// 对应的样式设置菜单、选项框等地方会显示该文本作为操作提示，引导用户进行样式相关的选择和设置。
"Style": "\u6837\u5f0f",
// "Dimensions" 翻译为 "尺寸"，常用于查看或修改图片、表格、页面区域等元素的大小（宽度和高度）相关功能，
// 例如在调整元素大小时，对应的尺寸输入框、调整按钮等地方会显示该文本作为操作提示，引导用户操作。
"Dimensions": "\u5927\u5c0f",
// "Insert image" 翻译为 "插入图片"，是一个比较简洁明确的提示文本，用于在文档、网页等内容中添加新图片时，
// 对应的操作按钮、菜单选项等地方会显示该文本，引导用户进行插入图片的操作。
"Insert image": "\u63d2\u5165\u56fe\u7247",
// "Image" 翻译为 "图片"，是一个通用表示图片相关功能的文本，比如在图片管理、选择图片资源等场景下，
// 对应的菜单、列表等地方会显示该文本作为提示，让用户明确当前操作涉及的对象是图片。
"Image": "\u56fe\u7247",
// "Zoom in" 翻译为 "放大"，常用于图片查看、文档页面查看等场景下，当用户想要将显示内容放大以便查看细节时，
// 对应的操作按钮（如放大镜加 + 图标按钮等）会显示该文本作为操作提示，引导用户进行放大操作。
"Zoom in": "\u653e\u5927",
// "Contrast" 翻译为 "对比度"，在图片编辑、显示设置等场景下，用于调整图片或屏幕显示内容的对比度相关操作时，
// 对应的对比度调整滑块、输入框等地方会显示该文本作为操作提示，引导用户进行对比度的调整。
"Contrast": "\u5bf9\u6bd4\u5ea6",
// "Back" 翻译为 "后退"，常用于页面导航、操作历史回退等场景，比如在浏览器中返回上一页、
// 软件中撤销上一步操作回到之前的状态等操作时，对应的按钮等地方会显示该文本作为操作提示。
"Back": "\u540e\u9000",
// "Gamma" 翻译为 "伽马值"，在涉及图像、显示屏等颜色校正、色彩调整相关功能中，伽马值是一个重要参数，
// 当用户调整伽马值来改变显示效果时，对应的设置区域会显示该文本作为操作提示，引导用户进行操作。
"Gamma": "\u4f3d\u9a6c\u503c",
// "Flip horizontally" 翻译为 "水平翻转"，在图片编辑、图形处理等场景下，当用户想要将元素在水平方向上进行镜像翻转时，
// 对应的操作按钮、菜单选项等地方会显示该文本作为操作提示，引导用户进行水平翻转操作。
"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
// "Resize" 翻译为 "调整大小"，常用于图片、表格、窗口等元素改变尺寸大小相关操作的提示文本，
// 对应的大小调整手柄、输入尺寸数值的框等地方会显示该文本作为操作提示，引导用户进行大小调整操作。
"Resize": "\u8c03\u6574\u5927\u5c0f",
// "Sharpen" 翻译为 "锐化"，在图片编辑中，用于提高图片清晰度、使图像边缘更锐利等相关操作时，
// 对应的锐化操作按钮、调整参数滑块等地方会显示该文本作为操作提示，引导用户进行锐化操作。
"Sharpen": "\u9510\u5316",
// "Zoom out" 翻译为 "缩小"，与 "Zoom in" 相对，常用于图片查看、文档页面查看等场景下，当用户想要将显示内容缩小以便查看整体情况时，
// 对应的操作按钮（如放大镜加 - 图标按钮等）会显示该文本作为操作提示，引导用户进行缩小操作。
"Zoom out": "\u7f29\u5c0f",
// "Image options" 翻译为 "图片选项"，在图片相关功能中，用于展开更多关于图片的设置（如样式、格式、链接等各种设置）时，
// 对应的菜单、对话框等地方会显示该文本作为操作入口提示，引导用户查看和调整图片的各项具体设置。
"Image options": "\u56fe\u7247\u9009\u9879",
// "Apply" 翻译为 "应用"，常用于当用户在设置界面调整好各项参数、选项后，点击该按钮来使设置生效，
// 对应的操作按钮上会显示该文本作为提示，告知用户点击此按钮可将当前设置应用到相应对象上。
"Apply": "\u5e94\u7528",
// "Brightness" 翻译为 "亮度"，在图片编辑、显示屏亮度调节等场景下，用于调整图片或屏幕显示内容的明亮程度相关操作时，
// 对应的亮度调整滑块、输入框等地方会显示该文本作为操作提示，引导用户进行亮度的调整。
"Brightness": "\u4eae\u5ea6",
// "Rotate clockwise" 翻译为 "顺时针旋转"，在图片、图形等元素进行旋转操作时，用于提示用户按照顺时针方向旋转元素，
// 对应的旋转操作按钮、菜单选项等地方会显示该文本作为操作提示，引导用户进行顺时针旋转操作。
"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
"Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c", "Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
"Edit image": "\u7f16\u8f91\u56fe\u7247", "Edit image": "\u7f16\u8f91\u56fe\u7247",
"Color levels": "\u989c\u8272\u5c42\u6b21", "Color levels": "\u989c\u8272\u5c42\u6b21",
@ -145,6 +306,463 @@ tinymce.addI18n('zh_CN',{
"Page break": "\u5206\u9875\u7b26", "Page break": "\u5206\u9875\u7b26",
"Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c", "Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
"Preview": "\u9884\u89c8", "Preview": "\u9884\u89c8",
//// "Color" 翻译为 "颜色"，是一个比较通用的表示与颜色相关功能的文本，比如选择字体颜色、背景颜色、元素颜色等操作时，
// // 对应的菜单、对话框等地方会显示该文本作为操作提示，引导用户进行颜色相关的设置。
// "Color": "\u989c\u8272",
// // "Right to left" 翻译为 "从右到左"，常用于文本排版、界面布局等涉及方向设置的功能场景，
// // 例如一些支持从右向左书写语言（如阿拉伯语等）的排版，或者切换元素排列方向等操作时会显示该文本提示。
// "Right to left": "\u4ece\u53f3\u5230\u5de6",
// // "Left to right" 翻译为 "从左到右"，与上面对应，是常规的文本、元素排列方向设置相关功能显示的文本，
// // 比如设置文本阅读顺序、界面元素排列顺序等操作时会出现该文本作为提示信息。
// "Left to right": "\u4ece\u5de6\u5230\u53f3",
// // "Emoticons" 翻译为 "表情符号"，在支持插入表情符号来丰富文档内容的编辑器中，
// // 当用户点击插入表情相关功能按钮、打开表情选择菜单等操作时会显示该文本作为提示，引导用户选择表情符号。
// "Emoticons": "\u8868\u60c5",
// // "Robots" 翻译为 "机器人"，具体含义要根据具体应用场景判断，可能涉及到网页爬虫相关设置（搜索引擎机器人等）、
// // 自动化脚本模拟机器人操作等相关功能显示该文本作为相关提示内容。
// "Robots": "\u673a\u5668\u4eba",
// // "Document properties" 翻译为 "文档属性"，常用于查看或编辑文档的各种元数据信息，如文档标题、作者、创建时间、
// // 关键词等相关功能的菜单、对话框等地方会显示该文本作为操作入口提示，引导用户查看或修改这些属性。
// "Document properties": "\u6587\u6863\u5c5e\u6027",
// // "Title" 翻译为 "标题"，用途广泛，可以表示文档的主标题、页面标题、章节标题等相关功能显示的文本，
// // 例如在设置文档标题栏显示内容、文章各级标题编辑等场景都会用到该文本提示。
// "Title": "\u6807\u9898",
// // "Keywords" 翻译为 "关键词"，在文档属性设置、搜索引擎优化等场景下，用于填写、编辑能代表文档核心内容的关键词语，
// // 相关功能区域（如文档元数据编辑框等）会显示该文本作为操作提示，引导用户输入关键词。
// "Keywords": "\u5173\u952e\u8bcd",
// // "Encoding" 翻译为 "编码"，常用于设置文档、网页等的字符编码格式（如 UTF-8、GBK 等）相关功能，
// // 在选择编码类型、查看当前编码等操作对应的菜单、对话框等地方会显示该文本作为提示信息。
// "Encoding": "\u7f16\u7801",
// // "Description" 翻译为 "描述"，常用来表示对文档、网页等内容的简短说明文字，
// // 例如在文档元数据中填写文档简介、网页的描述信息用于搜索引擎展示摘要等场景会用到该文本提示用户输入相关内容。
// "Description": "\u63cf\u8ff0",
// // "Author" 翻译为 "作者"，用于在文档属性等相关功能中填写、显示文档创作者的信息，
// // 对应功能区域（如文档作者编辑框等）会显示该文本作为操作提示，引导用户输入或查看作者名称。
// "Author": "\u4f5c\u8005",
// // "Fullscreen" 翻译为 "全屏"，在应用程序、网页等提供全屏显示功能的地方，
// // 当用户点击全屏按钮、切换到全屏模式等操作时会显示该文本作为提示，告知用户当前进入了全屏状态或可进入全屏状态。
// "Fullscreen": "\u5168\u5c4f",
// // "Horizontal line" 翻译为 "水平线"，在文档编辑、页面设计等场景下，用于插入、编辑水平分割线相关操作时，
// // 对应的菜单、按钮等地方会显示该文本作为操作提示，引导用户进行插入或修改水平线的操作。
// "Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
// // "Horizontal space" 翻译为 "水平间距"，常用于调整页面元素、文本段落等在水平方向上的间隔距离相关功能，
// // 例如在排版设置中修改元素之间的水平空白大小等操作时会显示该文本作为操作提示。
// "Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
// // "Insert/edit image" 翻译为 "插入/编辑图片"，在文档编辑、网页内容编辑等场景下，
// // 当用户想要添加一张新图片或者对已有的图片进行修改编辑（如调整大小、更换图片等操作）时，
// // 对应的操作按钮、菜单选项等地方会显示该文本作为提示，引导用户进行相应操作。
// "Insert/edit image": "\u63d2\u5165/\u7f16\u8f91\u56fe\u7247",
// // "General" 翻译为 "常规"，常用于表示一组设置选项中的通用、基础设置部分，
// // 例如在软件的设置对话框中，会将一些常见的、基本的设置分类到 "常规" 选项卡下，对应的选项卡标题会显示该文本作为提示。
// "General": "\u666e\u901a",
// // "Advanced" 翻译为 "高级"，与 "常规" 相对，通常用于存放更复杂、专业、进阶的设置选项，
// // 只有熟悉相关功能或者有特定需求的用户才会去调整这些设置，在设置界面中对应的选项卡标题等地方会显示该文本作为提示。
// "Advanced": "\u9ad8\u7ea7",
// // "Source" 翻译为 "来源"，在很多场景下有不同含义，比如图片、视频等媒体资源的原始地址（来源链接），
// // 或者代码片段的引用来源等相关功能显示该文本作为提示信息，引导用户填写或查看相应的来源信息。
// "Source": "\u5730\u5740",
// // "Border" 翻译为 "边框"，常用于设置页面元素（如图片、表格、文本框等）的边框样式、宽度、颜色等相关功能，
// // 对应的边框设置菜单、对话框等地方会显示该文本作为操作提示，引导用户进行边框相关的设置。
// "Border": "\u8fb9\u6846",
// // "Constrain proportions" 翻译为 "保持比例"，在调整图片、图形等元素大小时，
// // 如果希望元素的宽高比例保持不变（避免拉伸变形），相关操作按钮、设置选项等地方会显示该文本作为提示，
// // 告知用户当前设置可保持元素原有比例进行缩放操作。
// "Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
// // "Vertical space" 翻译为 "垂直间距"，类似于 "Horizontal space"，不过是用于调整页面元素、文本段落等在垂直方向上的间隔距离相关功能，
// // 比如在排版中设置行间距、元素上下间隔等操作时会显示该文本作为操作提示。
// "Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
// // "Image description" 翻译为 "图片描述"，常用于为图片添加说明性文字，
// // 比如在网页中方便搜索引擎识别图片内容、辅助视障人士理解图片含义等场景下，会有填写图片描述的功能，对应功能区域会显示该文本提示。
// "Image description": "\u56fe\u7247\u63cf\u8ff0",
// // "Style" 翻译为 "样式"，在文档编辑、网页开发等场景下应用广泛，用于设置文本、元素的各种外观样式（如字体样式、颜色样式、布局样式等），
// // 对应的样式设置菜单、选项框等地方会显示该文本作为操作提示，引导用户进行样式相关的选择和设置。
// "Style": "\u6837\u5f0f",
// // "Dimensions" 翻译为 "尺寸"，常用于查看或修改图片、表格、页面区域等元素的大小（宽度和高度）相关功能，
// // 例如在调整元素大小时，对应的尺寸输入框、调整按钮等地方会显示该文本作为操作提示，引导用户操作。
// "Dimensions": "\u5927\u5c0f",
// // "Insert image" 翻译为 "插入图片"，是一个比较简洁明确的提示文本，用于在文档、网页等内容中添加新图片时，
// // 对应的操作按钮、菜单选项等地方会显示该文本，引导用户进行插入图片的操作。
// "Insert image": "\u63d2\u5165\u56fe\u7247",
// // "Image" 翻译为 "图片"，是一个通用表示图片相关功能的文本，比如在图片管理、选择图片资源等场景下，
// // 对应的菜单、列表等地方会显示该文本作为提示，让用户明确当前操作涉及的对象是图片。
// "Image": "\u56fe\u7247",
// // "Zoom in" 翻译为 "放大"，常用于图片查看、文档页面查看等场景下，当用户想要将显示内容放大以便查看细节时，
// // 对应的操作按钮（如放大镜加 + 图标按钮等）会显示该文本作为操作提示，引导用户进行放大操作。
// "Zoom in": "\u653e\u5927",
// // "Contrast" 翻译为 "对比度"，在图片编辑、显示设置等场景下，用于调整图片或屏幕显示内容的对比度相关操作时，
// // 对应的对比度调整滑块、输入框等地方会显示该文本作为操作提示，引导用户进行对比度的调整。
// "Contrast": "\u5bf9\u6bd4\u5ea6",
// // "Back" 翻译为 "后退"，常用于页面导航、操作历史回退等场景，比如在浏览器中返回上一页、
// // 软件中撤销上一步操作回到之前的状态等操作时，对应的按钮等地方会显示该文本作为操作提示。
// "Back": "\u540e\u9000",
// // "Gamma" 翻译为 "伽马值"，在涉及图像、显示屏等颜色校正、色彩调整相关功能中，伽马值是一个重要参数，
// // 当用户调整伽马值来改变显示效果时，对应的设置区域会显示该文本作为操作提示，引导用户进行操作。
// "Gamma": "\u4f3d\u9a6c\u503c",
// // "Flip horizontally" 翻译为 "水平翻转"，在图片编辑、图形处理等场景下，当用户想要将元素在水平方向上进行镜像翻转时，
// // 对应的操作按钮、菜单选项等地方会显示该文本作为操作提示，引导用户进行水平翻转操作。
// "Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
// // "Resize" 翻译为 "调整大小"，常用于图片、表格、窗口等元素改变尺寸大小相关操作的提示文本，
// // 对应的大小调整手柄、输入尺寸数值的框等地方会显示该文本作为操作提示，引导用户进行大小调整操作。
// "Resize": "\u8c03\u6574\u5927\u5c0f",
// // "Sharpen" 翻译为 "锐化"，在图片编辑中，用于提高图片清晰度、使图像边缘更锐利等相关操作时，
// // 对应的锐化操作按钮、调整参数滑块等地方会显示该文本作为操作提示，引导用户进行锐化操作。
// "Sharpen": "\u9510\u5316",
// // "Zoom out" 翻译为 "缩小"，与 "Zoom in" 相对，常用于图片查看、文档页面查看等场景下，当用户想要将显示内容缩小以便查看整体情况时，
// // 对应的操作按钮（如放大镜加 - 图标按钮等）会显示该文本作为操作提示，引导用户进行缩小操作。
// "Zoom out": "\u7f29\u5c0f",
// // "Image options" 翻译为 "图片选项"，在图片相关功能中，用于展开更多关于图片的设置（如样式、格式、链接等各种设置）时，
// // 对应的菜单、对话框等地方会显示该文本作为操作入口提示，引导用户查看和调整图片的各项具体设置。
// "Image options": "\u56fe\u7247\u9009\u9879",
// // "Apply" 翻译为 "应用"，常用于当用户在设置界面调整好各项参数、选项后，点击该按钮来使设置生效，
// // 对应的操作按钮上会显示该文本作为提示，告知用户点击此按钮可将当前设置应用到相应对象上。
// "Apply": "\u5e94\u7528",
// // "Brightness" 翻译为 "亮度"，在图片编辑、显示屏亮度调节等场景下，用于调整图片或屏幕显示内容的明亮程度相关操作时，
// // 对应的亮度调整滑块、输入框等地方会显示该文本作为操作提示，引导用户进行亮度的调整。
// "Brightness": "\u4eae\u5ea6",
// // "Rotate clockwise" 翻译为 "顺时针旋转"，在图片、图形等元素进行旋转操作时，用于提示用户按照顺时针方向旋转元素，
// // 对应的旋转操作按钮、菜单选项等地方会显示该文本作为操作提示，引导用户进行顺时针旋转操作。// "Color" 翻译为 "颜色"，是一个比较通用的表示与颜色相关功能的文本，比如选择字体颜色、背景颜色、元素颜色等操作时，
// // 对应的菜单、对话框等地方会显示该文本作为操作提示，引导用户进行颜色相关的设置。
// "Color": "\u989c\u8272",
// // "Right to left" 翻译为 "从右到左"，常用于文本排版、界面布局等涉及方向设置的功能场景，
// // 例如一些支持从右向左书写语言（如阿拉伯语等）的排版，或者切换元素排列方向等操作时会显示该文本提示。
// "Right to left": "\u4ece\u53f3\u5230\u5de6",
// // "Left to right" 翻译为 "从左到右"，与上面对应，是常规的文本、元素排列方向设置相关功能显示的文本，
// // 比如设置文本阅读顺序、界面元素排列顺序等操作时会出现该文本作为提示信息。
// "Left to right": "\u4ece\u5de6\u5230\u53f3",
// // "Emoticons" 翻译为 "表情符号"，在支持插入表情符号来丰富文档内容的编辑器中，
// // 当用户点击插入表情相关功能按钮、打开表情选择菜单等操作时会显示该文本作为提示，引导用户选择表情符号。
// "Emoticons": "\u8868\u60c5",
// // "Robots" 翻译为 "机器人"，具体含义要根据具体应用场景判断，可能涉及到网页爬虫相关设置（搜索引擎机器人等）、
// // 自动化脚本模拟机器人操作等相关功能显示该文本作为相关提示内容。
// "Robots": "\u673a\u5668\u4eba",
// // "Document properties" 翻译为 "文档属性"，常用于查看或编辑文档的各种元数据信息，如文档标题、作者、创建时间、
// // 关键词等相关功能的菜单、对话框等地方会显示该文本作为操作入口提示，引导用户查看或修改这些属性。
// "Document properties": "\u6587\u6863\u5c5e\u6027",
// // "Title" 翻译为 "标题"，用途广泛，可以表示文档的主标题、页面标题、章节标题等相关功能显示的文本，
// // 例如在设置文档标题栏显示内容、文章各级标题编辑等场景都会用到该文本提示。
// "Title": "\u6807\u9898",
// // "Keywords" 翻译为 "关键词"，在文档属性设置、搜索引擎优化等场景下，用于填写、编辑能代表文档核心内容的关键词语，
// // 相关功能区域（如文档元数据编辑框等）会显示该文本作为操作提示，引导用户输入关键词。
// "Keywords": "\u5173\u952e\u8bcd",
// // "Encoding" 翻译为 "编码"，常用于设置文档、网页等的字符编码格式（如 UTF-8、GBK 等）相关功能，
// // 在选择编码类型、查看当前编码等操作对应的菜单、对话框等地方会显示该文本作为提示信息。
// "Encoding": "\u7f16\u7801",
// // "Description" 翻译为 "描述"，常用来表示对文档、网页等内容的简短说明文字，
// // 例如在文档元数据中填写文档简介、网页的描述信息用于搜索引擎展示摘要等场景会用到该文本提示用户输入相关内容。
// "Description": "\u63cf\u8ff0",
// // "Author" 翻译为 "作者"，用于在文档属性等相关功能中填写、显示文档创作者的信息，
// // 对应功能区域（如文档作者编辑框等）会显示该文本作为操作提示，引导用户输入或查看作者名称。
// "Author": "\u4f5c\u8005",
// // "Fullscreen" 翻译为 "全屏"，在应用程序、网页等提供全屏显示功能的地方，
// // 当用户点击全屏按钮、切换到全屏模式等操作时会显示该文本作为提示，告知用户当前进入了全屏状态或可进入全屏状态。
// "Fullscreen": "\u5168\u5c4f",
// // "Horizontal line" 翻译为 "水平线"，在文档编辑、页面设计等场景下，用于插入、编辑水平分割线相关操作时，
// // 对应的菜单、按钮等地方会显示该文本作为操作提示，引导用户进行插入或修改水平线的操作。
// "Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
// // "Horizontal space" 翻译为 "水平间距"，常用于调整页面元素、文本段落等在水平方向上的间隔距离相关功能，
// // 例如在排版设置中修改元素之间的水平空白大小等操作时会显示该文本作为操作提示。
// "Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
// // "Insert/edit image" 翻译为 "插入/编辑图片"，在文档编辑、网页内容编辑等场景下，
// // 当用户想要添加一张新图片或者对已有的图片进行修改编辑（如调整大小、更换图片等操作）时，
// // 对应的操作按钮、菜单选项等地方会显示该文本作为提示，引导用户进行相应操作。
// "Insert/edit image": "\u63d2\u5165/\u7f16\u8f91\u56fe\u7247",
// // "General" 翻译为 "常规"，常用于表示一组设置选项中的通用、基础设置部分，
// // 例如在软件的设置对话框中，会将一些常见的、基本的设置分类到 "常规" 选项卡下，对应的选项卡标题会显示该文本作为提示。
// "General": "\u666e\u901a",
// // "Advanced" 翻译为 "高级"，与 "常规" 相对，通常用于存放更复杂、专业、进阶的设置选项，
// // 只有熟悉相关功能或者有特定需求的用户才会去调整这些设置，在设置界面中对应的选项卡标题等地方会显示该文本作为提示。
// "Advanced": "\u9ad8\u7ea7",
// // "Source" 翻译为 "来源"，在很多场景下有不同含义，比如图片、视频等媒体资源的原始地址（来源链接），
// // 或者代码片段的引用来源等相关功能显示该文本作为提示信息，引导用户填写或查看相应的来源信息。
// "Source": "\u5730\u5740",
// // "Border" 翻译为 "边框"，常用于设置页面元素（如图片、表格、文本框等）的边框样式、宽度、颜色等相关功能，
// // 对应的边框设置菜单、对话框等地方会显示该文本作为操作提示，引导用户进行边框相关的设置。
// "Border": "\u8fb9\u6846",
// // "Constrain proportions" 翻译为 "保持比例"，在调整图片、图形等元素大小时，
// // 如果希望元素的宽高比例保持不变（避免拉伸变形），相关操作按钮、设置选项等地方会显示该文本作为提示，
// // 告知用户当前设置可保持元素原有比例进行缩放操作。
// "Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
// // "Vertical space" 翻译为 "垂直间距"，类似于 "Horizontal space"，不过是用于调整页面元素、文本段落等在垂直方向上的间隔距离相关功能，
// // 比如在排版中设置行间距、元素上下间隔等操作时会显示该文本作为操作提示。
// "Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
// // "Image description" 翻译为 "图片描述"，常用于为图片添加说明性文字，
// // 比如在网页中方便搜索引擎识别图片内容、辅助视障人士理解图片含义等场景下，会有填写图片描述的功能，对应功能区域会显示该文本提示。
// "Image description": "\u56fe\u7247\u63cf\u8ff0",
// // "Style" 翻译为 "样式"，在文档编辑、网页开发等场景下应用广泛，用于设置文本、元素的各种外观样式（如字体样式、颜色样式、布局样式等），
// // 对应的样式设置菜单、选项框等地方会显示该文本作为操作提示，引导用户进行样式相关的选择和设置。
// "Style": "\u6837\u5f0f",
// // "Dimensions" 翻译为 "尺寸"，常用于查看或修改图片、表格、页面区域等元素的大小（宽度和高度）相关功能，
// // 例如在调整元素大小时，对应的尺寸输入框、调整按钮等地方会显示该文本作为操作提示，引导用户操作。
// "Dimensions": "\u5927\u5c0f",
// // "Insert image" 翻译为 "插入图片"，是一个比较简洁明确的提示文本，用于在文档、网页等内容中添加新图片时，
// // 对应的操作按钮、菜单选项等地方会显示该文本，引导用户进行插入图片的操作。
// "Insert image": "\u63d2\u5165\u56fe\u7247",
// // "Image" 翻译为 "图片"，是一个通用表示图片相关功能的文本，比如在图片管理、选择图片资源等场景下，
// // 对应的菜单、列表等地方会显示该文本作为提示，让用户明确当前操作涉及的对象是图片。
// "Image": "\u56fe\u7247",
// // "Zoom in" 翻译为 "放大"，常用于图片查看、文档页面查看等场景下，当用户想要将显示内容放大以便查看细节时，
// // 对应的操作按钮（如放大镜加 + 图标按钮等）会显示该文本作为操作提示，引导用户进行放大操作。
// "Zoom in": "\u653e\u5927",
// // "Contrast" 翻译为 "对比度"，在图片编辑、显示设置等场景下，用于调整图片或屏幕显示内容的对比度相关操作时，
// // 对应的对比度调整滑块、输入框等地方会显示该文本作为操作提示，引导用户进行对比度的调整。
// "Contrast": "\u5bf9\u6bd4\u5ea6",
// // "Back" 翻译为 "后退"，常用于页面导航、操作历史回退等场景，比如在浏览器中返回上一页、
// // 软件中撤销上一步操作回到之前的状态等操作时，对应的按钮等地方会显示该文本作为操作提示。
// "Back": "\u540e\u9000",
// // "Gamma" 翻译为 "伽马值"，在涉及图像、显示屏等颜色校正、色彩调整相关功能中，伽马值是一个重要参数，
// // 当用户调整伽马值来改变显示效果时，对应的设置区域会显示该文本作为操作提示，引导用户进行操作。
// "Gamma": "\u4f3d\u9a6c\u503c",
// // "Flip horizontally" 翻译为 "水平翻转"，在图片编辑、图形处理等场景下，当用户想要将元素在水平方向上进行镜像翻转时，
// // 对应的操作按钮、菜单选项等地方会显示该文本作为操作提示，引导用户进行水平翻转操作。
// "Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
// // "Resize" 翻译为 "调整大小"，常用于图片、表格、窗口等元素改变尺寸大小相关操作的提示文本，
// // 对应的大小调整手柄、输入尺寸数值的框等地方会显示该文本作为操作提示，引导用户进行大小调整操作。
// "Resize": "\u8c03\u6574\u5927\u5c0f",
// // "Sharpen" 翻译为 "锐化"，在图片编辑中，用于提高图片清晰度、使图像边缘更锐利等相关操作时，
// // 对应的锐化操作按钮、调整参数滑块等地方会显示该文本作为操作提示，引导用户进行锐化操作。
// "Sharpen": "\u9510\u5316",
// // "Zoom out" 翻译为 "缩小"，与 "Zoom in" 相对，常用于图片查看、文档页面查看等场景下，当用户想要将显示内容缩小以便查看整体情况时，
// // 对应的操作按钮（如放大镜加 - 图标按钮等）会显示该文本作为操作提示，引导用户进行缩小操作。
// "Zoom out": "\u7f29\u5c0f",
// // "Image options" 翻译为 "图片选项"，在图片相关功能中，用于展开更多关于图片的设置（如样式、格式、链接等各种设置）时，
// // 对应的菜单、对话框等地方会显示该文本作为操作入口提示，引导用户查看和调整图片的各项具体设置。
// "Image options": "\u56fe\u7247\u9009\u9879",
// // "Apply" 翻译为 "应用"，常用于当用户在设置界面调整好各项参数、选项后，点击该按钮来使设置生效，
// // 对应的操作按钮上会显示该文本作为提示，告知用户点击此按钮可将当前设置应用到相应对象上。
// "Apply": "\u5e94\u7528",
// // "Brightness" 翻译为 "亮度"，在图片编辑、显示屏亮度调节等场景下，用于调整图片或屏幕显示内容的明亮程度相关操作时，
// // 对应的亮度调整滑块、输入框等地方会显示该文本作为操作提示，引导用户进行亮度的调整。
// "Brightness": "\u4eae\u5ea6",
// // "Rotate clockwise" 翻译为 "顺时针旋转"，在图片、图形等元素进行旋转操作时，用于提示用户按照顺时针方向旋转元素，
// // 对应的旋转操作按钮、菜单选项等地方会显示该文本作为操作提示，引导用户进行顺时针旋转操作。// "Color" 翻译为 "颜色"，是一个比较通用的表示与颜色相关功能的文本，比如选择字体颜色、背景颜色、元素颜色等操作时，
// // 对应的菜单、对话框等地方会显示该文本作为操作提示，引导用户进行颜色相关的设置。
// "Color": "\u989c\u8272",
// // "Right to left" 翻译为 "从右到左"，常用于文本排版、界面布局等涉及方向设置的功能场景，
// // 例如一些支持从右向左书写语言（如阿拉伯语等）的排版，或者切换元素排列方向等操作时会显示该文本提示。
// "Right to left": "\u4ece\u53f3\u5230\u5de6",
// // "Left to right" 翻译为 "从左到右"，与上面对应，是常规的文本、元素排列方向设置相关功能显示的文本，
// // 比如设置文本阅读顺序、界面元素排列顺序等操作时会出现该文本作为提示信息。
// "Left to right": "\u4ece\u5de6\u5230\u53f3",
// // "Emoticons" 翻译为 "表情符号"，在支持插入表情符号来丰富文档内容的编辑器中，
// // 当用户点击插入表情相关功能按钮、打开表情选择菜单等操作时会显示该文本作为提示，引导用户选择表情符号。
// "Emoticons": "\u8868\u60c5",
// // "Robots" 翻译为 "机器人"，具体含义要根据具体应用场景判断，可能涉及到网页爬虫相关设置（搜索引擎机器人等）、
// // 自动化脚本模拟机器人操作等相关功能显示该文本作为相关提示内容。
// "Robots": "\u673a\u5668\u4eba",
// // "Document properties" 翻译为 "文档属性"，常用于查看或编辑文档的各种元数据信息，如文档标题、作者、创建时间、
// // 关键词等相关功能的菜单、对话框等地方会显示该文本作为操作入口提示，引导用户查看或修改这些属性。
// "Document properties": "\u6587\u6863\u5c5e\u6027",
// // "Title" 翻译为 "标题"，用途广泛，可以表示文档的主标题、页面标题、章节标题等相关功能显示的文本，
// // 例如在设置文档标题栏显示内容、文章各级标题编辑等场景都会用到该文本提示。
// "Title": "\u6807\u9898",
// // "Keywords" 翻译为 "关键词"，在文档属性设置、搜索引擎优化等场景下，用于填写、编辑能代表文档核心内容的关键词语，
// // 相关功能区域（如文档元数据编辑框等）会显示该文本作为操作提示，引导用户输入关键词。
// "Keywords": "\u5173\u952e\u8bcd",
// // "Encoding" 翻译为 "编码"，常用于设置文档、网页等的字符编码格式（如 UTF-8、GBK 等）相关功能，
// // 在选择编码类型、查看当前编码等操作对应的菜单、对话框等地方会显示该文本作为提示信息。
// "Encoding": "\u7f16\u7801",
// // "Description" 翻译为 "描述"，常用来表示对文档、网页等内容的简短说明文字，
// // 例如在文档元数据中填写文档简介、网页的描述信息用于搜索引擎展示摘要等场景会用到该文本提示用户输入相关内容。
// "Description": "\u63cf\u8ff0",
// // "Author" 翻译为 "作者"，用于在文档属性等相关功能中填写、显示文档创作者的信息，
// // 对应功能区域（如文档作者编辑框等）会显示该文本作为操作提示，引导用户输入或查看作者名称。
// "Author": "\u4f5c\u8005",
// // "Fullscreen" 翻译为 "全屏"，在应用程序、网页等提供全屏显示功能的地方，
// // 当用户点击全屏按钮、切换到全屏模式等操作时会显示该文本作为提示，告知用户当前进入了全屏状态或可进入全屏状态。
// "Fullscreen": "\u5168\u5c4f",
// // "Horizontal line" 翻译为 "水平线"，在文档编辑、页面设计等场景下，用于插入、编辑水平分割线相关操作时，
// // 对应的菜单、按钮等地方会显示该文本作为操作提示，引导用户进行插入或修改水平线的操作。
// "Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
// // "Horizontal space" 翻译为 "水平间距"，常用于调整页面元素、文本段落等在水平方向上的间隔距离相关功能，
// // 例如在排版设置中修改元素之间的水平空白大小等操作时会显示该文本作为操作提示。
// "Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
// // "Insert/edit image" 翻译为 "插入/编辑图片"，在文档编辑、网页内容编辑等场景下，
// // 当用户想要添加一张新图片或者对已有的图片进行修改编辑（如调整大小、更换图片等操作）时，
// // 对应的操作按钮、菜单选项等地方会显示该文本作为提示，引导用户进行相应操作。
// "Insert/edit image": "\u63d2\u5165/\u7f16\u8f91\u56fe\u7247",
// // "General" 翻译为 "常规"，常用于表示一组设置选项中的通用、基础设置部分，
// // 例如在软件的设置对话框中，会将一些常见的、基本的设置分类到 "常规" 选项卡下，对应的选项卡标题会显示该文本作为提示。
// "General": "\u666e\u901a",
// // "Advanced" 翻译为 "高级"，与 "常规" 相对，通常用于存放更复杂、专业、进阶的设置选项，
// // 只有熟悉相关功能或者有特定需求的用户才会去调整这些设置，在设置界面中对应的选项卡标题等地方会显示该文本作为提示。
// "Advanced": "\u9ad8\u7ea7",
// // "Source" 翻译为 "来源"，在很多场景下有不同含义，比如图片、视频等媒体资源的原始地址（来源链接），
// // 或者代码片段的引用来源等相关功能显示该文本作为提示信息，引导用户填写或查看相应的来源信息。
// "Source": "\u5730\u5740",
// // "Border" 翻译为 "边框"，常用于设置页面元素（如图片、表格、文本框等）的边框样式、宽度、颜色等相关功能，
// // 对应的边框设置菜单、对话框等地方会显示该文本作为操作提示，引导用户进行边框相关的设置。
// "Border": "\u8fb9\u6846",
// // "Constrain proportions" 翻译为 "保持比例"，在调整图片、图形等元素大小时，
// // 如果希望元素的宽高比例保持不变（避免拉伸变形），相关操作按钮、设置选项等地方会显示该文本作为提示，
// // 告知用户当前设置可保持元素原有比例进行缩放操作。
// "Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
// // "Vertical space" 翻译为 "垂直间距"，类似于 "Horizontal space"，不过是用于调整页面元素、文本段落等在垂直方向上的间隔距离相关功能，
// // 比如在排版中设置行间距、元素上下间隔等操作时会显示该文本作为操作提示。
// "Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
// // "Image description" 翻译为 "图片描述"，常用于为图片添加说明性文字，
// // 比如在网页中方便搜索引擎识别图片内容、辅助视障人士理解图片含义等场景下，会有填写图片描述的功能，对应功能区域会显示该文本提示。
// "Image description": "\u56fe\u7247\u63cf\u8ff0",
// // "Style" 翻译为 "样式"，在文档编辑、网页开发等场景下应用广泛，用于设置文本、元素的各种外观样式（如字体样式、颜色样式、布局样式等），
// // 对应的样式设置菜单、选项框等地方会显示该文本作为操作提示，引导用户进行样式相关的选择和设置。
// "Style": "\u6837\u5f0f",
// // "Dimensions" 翻译为 "尺寸"，常用于查看或修改图片、表格、页面区域等元素的大小（宽度和高度）相关功能，
// // 例如在调整元素大小时，对应的尺寸输入框、调整按钮等地方会显示该文本作为操作提示，引导用户操作。
// "Dimensions": "\u5927\u5c0f",
// // "Insert image" 翻译为 "插入图片"，是一个比较简洁明确的提示文本，用于在文档、网页等内容中添加新图片时，
// // 对应的操作按钮、菜单选项等地方会显示该文本，引导用户进行插入图片的操作。
// "Insert image": "\u63d2\u5165\u56fe\u7247",
// // "Image" 翻译为 "图片"，是一个通用表示图片相关功能的文本，比如在图片管理、选择图片资源等场景下，
// // 对应的菜单、列表等地方会显示该文本作为提示，让用户明确当前操作涉及的对象是图片。
// "Image": "\u56fe\u7247",
// // "Zoom in" 翻译为 "放大"，常用于图片查看、文档页面查看等场景下，当用户想要将显示内容放大以便查看细节时，
// // 对应的操作按钮（如放大镜加 + 图标按钮等）会显示该文本作为操作提示，引导用户进行放大操作。
// "Zoom in": "\u653e\u5927",
// // "Contrast" 翻译为 "对比度"，在图片编辑、显示设置等场景下，用于调整图片或屏幕显示内容的对比度相关操作时，
// // 对应的对比度调整滑块、输入框等地方会显示该文本作为操作提示，引导用户进行对比度的调整。
// "Contrast": "\u5bf9\u6bd4\u5ea6",
// // "Back" 翻译为 "后退"，常用于页面导航、操作历史回退等场景，比如在浏览器中返回上一页、
// // 软件中撤销上一步操作回到之前的状态等操作时，对应的按钮等地方会显示该文本作为操作提示。
// "Back": "\u540e\u9000",
// // "Gamma" 翻译为 "伽马值"，在涉及图像、显示屏等颜色校正、色彩调整相关功能中，伽马值是一个重要参数，
// // 当用户调整伽马值来改变显示效果时，对应的设置区域会显示该文本作为操作提示，引导用户进行操作。
// "Gamma": "\u4f3d\u9a6c\u503c",
// // "Flip horizontally" 翻译为 "水平翻转"，在图片编辑、图形处理等场景下，当用户想要将元素在水平方向上进行镜像翻转时，
// // 对应的操作按钮、菜单选项等地方会显示该文本作为操作提示，引导用户进行水平翻转操作。
// "Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
// // "Resize" 翻译为 "调整大小"，常用于图片、表格、窗口等元素改变尺寸大小相关操作的提示文本，
// // 对应的大小调整手柄、输入尺寸数值的框等地方会显示该文本作为操作提示，引导用户进行大小调整操作。
// "Resize": "\u8c03\u6574\u5927\u5c0f",
// // "Sharpen" 翻译为 "锐化"，在图片编辑中，用于提高图片清晰度、使图像边缘更锐利等相关操作时，
// // 对应的锐化操作按钮、调整参数滑块等地方会显示该文本作为操作提示，引导用户进行锐化操作。
// "Sharpen": "\u9510\u5316",
// // "Zoom out" 翻译为 "缩小"，与 "Zoom in" 相对，常用于图片查看、文档页面查看等场景下，当用户想要将显示内容缩小以便查看整体情况时，
// // 对应的操作按钮（如放大镜加 - 图标按钮等）会显示该文本作为操作提示，引导用户进行缩小操作。
// "Zoom out": "\u7f29\u5c0f",
// // "Image options" 翻译为 "图片选项"，在图片相关功能中，用于展开更多关于图片的设置（如样式、格式、链接等各种设置）时，
// // 对应的菜单、对话框等地方会显示该文本作为操作入口提示，引导用户查看和调整图片的各项具体设置。
// "Image options": "\u56fe\u7247\u9009\u9879",
// // "Apply" 翻译为 "应用"，常用于当用户在设置界面调整好各项参数、选项后，点击该按钮来使设置生效，
// // 对应的操作按钮上会显示该文本作为提示，告知用户点击此按钮可将当前设置应用到相应对象上。
// "Apply": "\u5e94\u7528",
// // "Brightness" 翻译为 "亮度"，在图片编辑、显示屏亮度调节等场景下，用于调整图片或屏幕显示内容的明亮程度相关操作时，
// // 对应的亮度调整滑块、输入框等地方会显示该文本作为操作提示，引导用户进行亮度的调整。
// "Brightness": "\u4eae\u5ea6",
// // "Rotate clockwise" 翻译为 "顺时针旋转"，在图片、图形等元素进行旋转操作时，用于提示用户按照顺时针方向旋转元素，
// // 对应的旋转操作按钮、菜单选项等地方会显示该文本作为操作提示，引导用户进行顺时针旋转操作。// "Color" 翻译为 "颜色"，是一个比较通用的表示与颜色相关功能的文本，比如选择字体颜色、背景颜色、元素颜色等操作时，
// // 对应的菜单、对话框等地方会显示该文本作为操作提示，引导用户进行颜色相关的设置。
// "Color": "\u989c\u8272",
// // "Right to left" 翻译为 "从右到左"，常用于文本排版、界面布局等涉及方向设置的功能场景，
// // 例如一些支持从右向左书写语言（如阿拉伯语等）的排版，或者切换元素排列方向等操作时会显示该文本提示。
// "Right to left": "\u4ece\u53f3\u5230\u5de6",
// // "Left to right" 翻译为 "从左到右"，与上面对应，是常规的文本、元素排列方向设置相关功能显示的文本，
// // 比如设置文本阅读顺序、界面元素排列顺序等操作时会出现该文本作为提示信息。
// "Left to right": "\u4ece\u5de6\u5230\u53f3",
// // "Emoticons" 翻译为 "表情符号"，在支持插入表情符号来丰富文档内容的编辑器中，
// // 当用户点击插入表情相关功能按钮、打开表情选择菜单等操作时会显示该文本作为提示，引导用户选择表情符号。
// "Emoticons": "\u8868\u60c5",
// // "Robots" 翻译为 "机器人"，具体含义要根据具体应用场景判断，可能涉及到网页爬虫相关设置（搜索引擎机器人等）、
// // 自动化脚本模拟机器人操作等相关功能显示该文本作为相关提示内容。
// "Robots": "\u673a\u5668\u4eba",
// // "Document properties" 翻译为 "文档属性"，常用于查看或编辑文档的各种元数据信息，如文档标题、作者、创建时间、
// // 关键词等相关功能的菜单、对话框等地方会显示该文本作为操作入口提示，引导用户查看或修改这些属性。
// "Document properties": "\u6587\u6863\u5c5e\u6027",
// // "Title" 翻译为 "标题"，用途广泛，可以表示文档的主标题、页面标题、章节标题等相关功能显示的文本，
// // 例如在设置文档标题栏显示内容、文章各级标题编辑等场景都会用到该文本提示。
// "Title": "\u6807\u9898",
// // "Keywords" 翻译为 "关键词"，在文档属性设置、搜索引擎优化等场景下，用于填写、编辑能代表文档核心内容的关键词语，
// // 相关功能区域（如文档元数据编辑框等）会显示该文本作为操作提示，引导用户输入关键词。
// "Keywords": "\u5173\u952e\u8bcd",
// // "Encoding" 翻译为 "编码"，常用于设置文档、网页等的字符编码格式（如 UTF-8、GBK 等）相关功能，
// // 在选择编码类型、查看当前编码等操作对应的菜单、对话框等地方会显示该文本作为提示信息。
// "Encoding": "\u7f16\u7801",
// // "Description" 翻译为 "描述"，常用来表示对文档、网页等内容的简短说明文字，
// // 例如在文档元数据中填写文档简介、网页的描述信息用于搜索引擎展示摘要等场景会用到该文本提示用户输入相关内容。
// "Description": "\u63cf\u8ff0",
// // "Author" 翻译为 "作者"，用于在文档属性等相关功能中填写、显示文档创作者的信息，
// // 对应功能区域（如文档作者编辑框等）会显示该文本作为操作提示，引导用户输入或查看作者名称。
// "Author": "\u4f5c\u8005",
// // "Fullscreen" 翻译为 "全屏"，在应用程序、网页等提供全屏显示功能的地方，
// // 当用户点击全屏按钮、切换到全屏模式等操作时会显示该文本作为提示，告知用户当前进入了全屏状态或可进入全屏状态。
// "Fullscreen": "\u5168\u5c4f",
// // "Horizontal line" 翻译为 "水平线"，在文档编辑、页面设计等场景下，用于插入、编辑水平分割线相关操作时，
// // 对应的菜单、按钮等地方会显示该文本作为操作提示，引导用户进行插入或修改水平线的操作。
// "Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
// // "Horizontal space" 翻译为 "水平间距"，常用于调整页面元素、文本段落等在水平方向上的间隔距离相关功能，
// // 例如在排版设置中修改元素之间的水平空白大小等操作时会显示该文本作为操作提示。
// "Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
// // "Insert/edit image" 翻译为 "插入/编辑图片"，在文档编辑、网页内容编辑等场景下，
// // 当用户想要添加一张新图片或者对已有的图片进行修改编辑（如调整大小、更换图片等操作）时，
// // 对应的操作按钮、菜单选项等地方会显示该文本作为提示，引导用户进行相应操作。
// "Insert/edit image": "\u63d2\u5165/\u7f16\u8f91\u56fe\u7247",
// // "General" 翻译为 "常规"，常用于表示一组设置选项中的通用、基础设置部分，
// // 例如在软件的设置对话框中，会将一些常见的、基本的设置分类到 "常规" 选项卡下，对应的选项卡标题会显示该文本作为提示。
// "General": "\u666e\u901a",
// // "Advanced" 翻译为 "高级"，与 "常规" 相对，通常用于存放更复杂、专业、进阶的设置选项，
// // 只有熟悉相关功能或者有特定需求的用户才会去调整这些设置，在设置界面中对应的选项卡标题等地方会显示该文本作为提示。
// "Advanced": "\u9ad8\u7ea7",
// // "Source" 翻译为 "来源"，在很多场景下有不同含义，比如图片、视频等媒体资源的原始地址（来源链接），
// // 或者代码片段的引用来源等相关功能显示该文本作为提示信息，引导用户填写或查看相应的来源信息。
// "Source": "\u5730\u5740",
// // "Border" 翻译为 "边框"，常用于设置页面元素（如图片、表格、文本框等）的边框样式、宽度、颜色等相关功能，
// // 对应的边框设置菜单、对话框等地方会显示该文本作为操作提示，引导用户进行边框相关的设置。
// "Border": "\u8fb9\u6846",
// // "Constrain proportions" 翻译为 "保持比例"，在调整图片、图形等元素大小时，
// // 如果希望元素的宽高比例保持不变（避免拉伸变形），相关操作按钮、设置选项等地方会显示该文本作为提示，
// // 告知用户当前设置可保持元素原有比例进行缩放操作。
// "Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
// // "Vertical space" 翻译为 "垂直间距"，类似于 "Horizontal space"，不过是用于调整页面元素、文本段落等在垂直方向上的间隔距离相关功能，
// // 比如在排版中设置行间距、元素上下间隔等操作时会显示该文本作为操作提示。
// "Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
// // "Image description" 翻译为 "图片描述"，常用于为图片添加说明性文字，
// // 比如在网页中方便搜索引擎识别图片内容、辅助视障人士理解图片含义等场景下，会有填写图片描述的功能，对应功能区域会显示该文本提示。
// "Image description": "\u56fe\u7247\u63cf\u8ff0",
// // "Style" 翻译为 "样式"，在文档编辑、网页开发等场景下应用广泛，用于设置文本、元素的各种外观样式（如字体样式、颜色样式、布局样式等），
// // 对应的样式设置菜单、选项框等地方会显示该文本作为操作提示，引导用户进行样式相关的选择和设置。
// "Style": "\u6837\u5f0f",
// // "Dimensions" 翻译为 "尺寸"，常用于查看或修改图片、表格、页面区域等元素的大小（宽度和高度）相关功能，
// // 例如在调整元素大小时，对应的尺寸输入框、调整按钮等地方会显示该文本作为操作提示，引导用户操作。
// "Dimensions": "\u5927\u5c0f",
// // "Insert image" 翻译为 "插入图片"，是一个比较简洁明确的提示文本，用于在文档、网页等内容中添加新图片时，
// // 对应的操作按钮、菜单选项等地方会显示该文本，引导用户进行插入图片的操作。
// "Insert image": "\u63d2\u5165\u56fe\u7247",
// // "Image" 翻译为 "图片"，是一个通用表示图片相关功能的文本，比如在图片管理、选择图片资源等场景下，
// // 对应的菜单、列表等地方会显示该文本作为提示，让用户明确当前操作涉及的对象是图片。
// "Image": "\u56fe\u7247",
// // "Zoom in" 翻译为 "放大"，常用于图片查看、文档页面查看等场景下，当用户想要将显示内容放大以便查看细节时，
// // 对应的操作按钮（如放大镜加 + 图标按钮等）会显示该文本作为操作提示，引导用户进行放大操作。
// "Zoom in": "\u653e\u5927",
// // "Contrast" 翻译为 "对比度"，在图片编辑、显示设置等场景下，用于调整图片或屏幕显示内容的对比度相关操作时，
// // 对应的对比度调整滑块、输入框等地方会显示该文本作为操作提示，引导用户进行对比度的调整。
// "Contrast": "\u5bf9\u6bd4\u5ea6",
// // "Back" 翻译为 "后退"，常用于页面导航、操作历史回退等场景，比如在浏览器中返回上一页、
// // 软件中撤销上一步操作回到之前的状态等操作时，对应的按钮等地方会显示该文本作为操作提示。
// "Back": "\u540e\u9000",
// // "Gamma" 翻译为 "伽马值"，在涉及图像、显示屏等颜色校正、色彩调整相关功能中，伽马值是一个重要参数，
// // 当用户调整伽马值来改变显示效果时，对应的设置区域会显示该文本作为操作提示，引导用户进行操作。
// "Gamma": "\u4f3d\u9a6c\u503c",
// // "Flip horizontally" 翻译为 "水平翻转"，在图片编辑、图形处理等场景下，当用户想要将元素在水平方向上进行镜像翻转时，
// // 对应的操作按钮、菜单选项等地方会显示该文本作为操作提示，引导用户进行水平翻转操作。
// "Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
// // "Resize" 翻译为 "调整大小"，常用于图片、表格、窗口等元素改变尺寸大小相关操作的提示文本，
// // 对应的大小调整手柄、输入尺寸数值的框等地方会显示该文本作为操作提示，引导用户进行大小调整操作。
// "Resize": "\u8c03\u6574\u5927\u5c0f",
// // "Sharpen" 翻译为 "锐化"，在图片编辑中，用于提高图片清晰度、使图像边缘更锐利等相关操作时，
// // 对应的锐化操作按钮、调整参数滑块等地方会显示该文本作为操作提示，引导用户进行锐化操作。
// "Sharpen": "\u9510\u5316",
// // "Zoom out" 翻译为 "缩小"，与 "Zoom in" 相对，常用于图片查看、文档页面查看等场景下，当用户想要将显示内容缩小以便查看整体情况时，
// // 对应的操作按钮（如放大镜加 - 图标按钮等）会显示该文本作为操作提示，引导用户进行缩小操作。
// "Zoom out": "\u7f29\u5c0f",
// // "Image options" 翻译为 "图片选项"，在图片相关功能中，用于展开更多关于图片的设置（如样式、格式、链接等各种设置）时，
// // 对应的菜单、对话框等地方会显示该文本作为操作入口提示，引导用户查看和调整图片的各项具体设置。
// "Image options": "\u56fe\u7247\u9009\u9879",
// // "Apply" 翻译为 "应用"，常用于当用户在设置界面调整好各项参数、选项后，点击该按钮来使设置生效，
// // 对应的操作按钮上会显示该文本作为提示，告知用户点击此按钮可将当前设置应用到相应对象上。
// "Apply": "\u5e94\u7528",
// // "Brightness" 翻译为 "亮度"，在图片编辑、显示屏亮度调节等场景下，用于调整图片或屏幕显示内容的明亮程度相关操作时，
// // 对应的亮度调整滑块、输入框等地方会显示该文本作为操作提示，引导用户进行亮度的调整。
// "Brightness": "\u4eae\u5ea6",
// // "Rotate clockwise" 翻译为 "顺时针旋转"，在图片、图形等元素进行旋转操作时，用于提示用户按照顺时针方向旋转元素，
// // 对应的旋转操作按钮、菜单选项等地方会显示该文本作为操作提示，引导用户进行顺时针旋转操作。//
"Print": "\u6253\u5370", "Print": "\u6253\u5370",
"Save": "\u4fdd\u5b58", "Save": "\u4fdd\u5b58",
"Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.", "Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",

38
src/main.js
Unescape View File

@ -1,30 +1,52 @@
// 导入Vue框架
import Vue from 'vue' import Vue from 'vue'
import 'normalize.css/normalize.css'// A modern alternative to CSS resets // 导入normalize.css，这是一种现代的CSS重置替代方案
import 'normalize.css/normalize.css'
import ElementUI from 'element-ui' // 导入Element UI库
import 'element-ui/lib/theme-chalk/index.css' import ElementUI from 'element - ui'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n // 导入Element UI的样式文件，这里使用的是主题为chalk的样式
import VCharts from 'v-charts' import 'element - ui/lib/theme - chalk/index.css'
// 导入Element UI的中文语言包，用于国际化（i18n）
import locale from 'element - ui/lib/locale/lang/zh - CN'
import '@/styles/index.scss' // global css // 导入V - Charts库，用于图表绘制
import VCharts from 'v - charts'
// 导入项目中自定义的全局样式文件
import '@/styles/index.scss'
// 导入应用的根组件App
import App from './App' import App from './App'
// 导入路由配置文件
import router from './router' import router from './router'
// 导入Vuex的store配置文件
import store from './store' import store from './store'
import '@/icons' // icon // 导入项目中的图标相关配置（可能是注册全局图标组件等操作）
import '@/permission' // permission control import '@/icons'
// 导入权限控制相关的配置（可能是实现路由权限、组件权限等功能）
import '@/permission'
// 使用Element UI，并传入中文语言包配置
Vue.use(ElementUI, { locale }) Vue.use(ElementUI, { locale })
// 使用V - Charts库
Vue.use(VCharts) Vue.use(VCharts)
// 设置在生产环境下不显示Vue的提示信息
Vue.config.productionTip = false Vue.config.productionTip = false
// 创建一个Vue实例
new Vue({ new Vue({
// 挂载点选择id为app的DOM元素
el: '#app', el: '#app',
// 使用导入的路由配置
router, router,
// 使用导入的store配置
store, store,
// 使用App组件作为模板
template: '<App/>', template: '<App/>',
// 注册App组件
components: { App } components: { App }
}) })

61
src/permission.js
Unescape View File

@ -1,46 +1,79 @@
// 导入路由配置文件，这里的路由配置可能定义了应用中的各个页面路径和对应的组件等信息
import router from './router' import router from './router'
// 导入Vuex的store配置文件，store通常用于管理应用中的状态数据
import store from './store' import store from './store'
import NProgress from 'nprogress' // Progress 进度条 // 导入NProgress库，用于在页面跳转时显示进度条
import 'nprogress/nprogress.css'// Progress 进度条样式 import NProgress from 'nprogress'
import { Message } from 'element-ui' // 导入NProgress的样式文件，这样才能正确显示进度条样式
import { getToken } from '@/utils/auth' // 验权 import 'nprogress/nprogress.css'
// 从element - ui中导入Message组件，用于显示提示信息
import { Message } from 'element - ui'
// 从 @/utils/auth文件中导入getToken函数，该函数可能用于获取用户的登录令牌（token），用于验证用户是否已登录
import { getToken } from '@/utils/auth'
const whiteList = ['/login'] // 不重定向白名单 // 定义一个数组，其中包含不需要进行重定向的路径（白名单），这里只有'/login'路径在白名单中
const whiteList = ['/login']
// 注册一个全局的路由前置守卫（beforeEach），在每次路由跳转前都会执行这个函数
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
// 启动NProgress进度条，表示路由跳转开始
NProgress.start() NProgress.start()
// 判断用户是否有登录令牌（token）
if (getToken()) { if (getToken()) {
// 如果用户已登录且要访问的路径是'/login'（登录页）
if (to.path === '/login') { if (to.path === '/login') {
// 则重定向到应用的首页（'/'）
next({ path: '/' }) next({ path: '/' })
NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it // 手动结束NProgress进度条，因为如果当前页是首页，不会触发afterEach钩子函数
NProgress.done()
} else { } else {
// 如果用户已登录且要访问的不是登录页
// 检查store中是否已经获取到用户角色信息（如果没有获取到，说明可能是首次登录或者角色信息丢失）
if (store.getters.roles.length === 0) { if (store.getters.roles.length === 0) {
store.dispatch('GetInfo').then(res => { // 拉取用户信息 // 从store中分发（dispatch）一个名为'GetInfo'的action，这个action可能用于从后端获取用户信息
let menus=res.data.menus; store.dispatch('GetInfo').then(res => {
let username=res.data.username; // 获取从后端返回的用户信息中的菜单（menus）数据和用户名（username）数据
store.dispatch('GenerateRoutes', { menus,username }).then(() => { // 生成可访问的路由表 let menus = res.data.menus;
router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表 let username = res.data.username;
next({ ...to, replace: true }) // 根据获取到的菜单数据和用户名，在store中分发（dispatch）一个名为'GenerateRoutes'的action来生成用户可访问的路由表
store.dispatch('GenerateRoutes', { menus, username }).then(() => {
// 将生成的可访问路由表动态添加到路由实例中
router.addRoutes(store.getters.addRoutes);
// 使用传入的to对象（要访问的路由）进行跳转，并设置replace为true，表示替换当前历史记录，而不是添加新记录
next({...to, replace: true })
}) })
}).catch((err) => { }).catch((err) => {
// 如果在获取用户信息过程中出错
// 先从store中分发（dispatch）一个名为'FedLogOut'的action，这个action可能用于执行用户登出操作
store.dispatch('FedLogOut').then(() => { store.dispatch('FedLogOut').then(() => {
// 显示错误提示信息，提示用户验证失败，需要重新登录
Message.error(err || 'Verification failed, please login again') Message.error(err || 'Verification failed, please login again')
// 重定向到应用的首页（'/'）
next({ path: '/' }) next({ path: '/' })
}) })
}) })
} else { } else {
// 如果store中已经有用户角色信息，直接放行，允许用户访问目标路由
next() next()
} }
} }
} else { } else {
if (whiteList.indexOf(to.path) !== -1) { // 如果用户没有登录令牌（token）
// 检查要访问的路径是否在白名单中
if (whiteList.indexOf(to.path)!== -1) {
// 如果在白名单中，直接放行，允许用户访问目标路由
next() next()
} else { } else {
// 如果不在白名单中，重定向到登录页（'/login'）
next('/login') next('/login')
// 手动结束NProgress进度条
NProgress.done() NProgress.done()
} }
} }
}) })
// 注册一个全局的路由后置守卫（afterEach），在每次路由跳转完成后都会执行这个函数
router.afterEach(() => { router.afterEach(() => {
NProgress.done() // 结束Progress // 结束NProgress进度条，表示路由跳转结束
NProgress.done()
}) })

58
src/router/index.js
Unescape View File

@ -1,71 +1,113 @@
// 导入Vue构造函数，Vue是Vue.js框架的核心，用于创建Vue实例以及进行各种组件化开发相关操作
import Vue from 'vue' import Vue from 'vue'
// 导入Vue Router插件，Vue Router用于在Vue.js应用中实现路由功能，管理不同页面（路由组件）之间的切换和导航
import Router from 'vue-router' import Router from 'vue-router'
// 使用Vue.use方法来安装Vue Router插件，使其能够在Vue应用中被使用，这一步是必要的初始化操作
Vue.use(Router) Vue.use(Router)
/* Layout */ /* Layout */
// 从指定的路径 '../views/layout/Layout' 导入一个名为Layout的组件，通常这个组件可能是整个应用的布局框架组件，包含侧边栏、顶部导航栏等通用布局结构，其他页面组件会在这个布局框架内进行展示
import Layout from '../views/layout/Layout' import Layout from '../views/layout/Layout'
/** /**
* 以下是一段注释，用于对路由配置对象中的一些属性进行说明，方便后续理解和维护路由配置
* hidden: true if `hidden:true` will not show in the sidebar(default is false) * hidden: true if `hidden:true` will not show in the sidebar(default is false)
* 解释：如果路由配置中的 `hidden` 属性设置为 `true`，则对应的路由对应的菜单项将不会显示在侧边栏中（默认值为 `false`，即默认会显示在侧边栏）
*
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length * alwaysShow: true if set true, will always show the root menu, whatever its child routes length
* if not set alwaysShow, only more than one route under the children * if not set alwaysShow, only more than one route under the children
* it will becomes nested mode, otherwise not show the root menu * it will becomes nested mode, otherwise not show the root menu
* 解释：如果 `alwaysShow` 属性设置为 `true`，无论该路由下的子路由数量是多少，都会始终显示根菜单。如果不设置这个属性，只有当子路由数量大于1时，才会呈现嵌套菜单模式（显示根菜单以及子菜单），否则不会显示根菜单。
*
* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb * redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb
* 解释：如果 `redirect` 属性设置为 `noredirect`，在面包屑导航中不会进行重定向操作（通常面包屑导航会根据路由跳转情况进行相应的更新显示，这里可用于特殊情况的控制）
*
* name:'router-name' the name is used by <keep-alive> (must set!!!) * name:'router-name' the name is used by <keep-alive> (must set!!!)
* 解释：`name` 属性用于给路由命名，这个名称会被 `<keep-alive>` 组件使用（必须设置，在进行组件缓存等相关功能时需要通过这个名称来识别路由对应的组件）
*
* meta : { * meta : {
title: 'title' the name show in submenu and breadcrumb (recommend set) title: 'title' the name show in submenu and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar, icon: 'svg-name' the icon show in the sidebar,
} }
* 解释：`meta` 是一个自定义的元数据对象，可以在路由配置中添加额外的信息。其中 `title` 属性用于设置在子菜单和面包屑导航中显示的名称（建议设置，方便用户直观了解当前页面信息），`icon` 属性用于指定在侧边栏中显示的图标（方便通过图标区分不同的菜单功能）
**/ **/
// 定义一个名为constantRouterMap的常量数组，用于存放基础的、固定不变的路由配置信息，这些路由通常是应用中始终存在且不需要动态加载的部分
export const constantRouterMap = [ export const constantRouterMap = [
// 定义一个登录页面的路由配置对象，路径为 '/login'，对应的组件通过动态导入的方式加载（使用 () => import('@/views/login/index') 这种语法，会在实际访问该路由时才加载对应的组件代码，提高初始加载性能），并且设置 `hidden` 属性为 `true`，意味着这个登录页面不会显示在侧边栏中
{path: '/login', component: () => import('@/views/login/index'), hidden: true}, {path: '/login', component: () => import('@/views/login/index'), hidden: true},
// 定义一个404页面的路由配置对象，路径为 '/404'，同样通过动态导入加载对应的组件，也设置 `hidden` 属性为 `true`，该页面不会在侧边栏展示，一般用于处理未匹配到的路由情况
{path: '/404', component: () => import('@/views/404'), hidden: true}, {path: '/404', component: () => import('@/views/404'), hidden: true},
{ {
// 定义一个根路径（空字符串表示应用的根路径）的路由配置，它会作为应用的基础布局框架
path: '', path: '',
// 指定该根路径对应的组件为之前导入的Layout组件，也就是整个页面的布局框架会围绕这个组件展开
component: Layout, component: Layout,
// 设置重定向路径为 '/home'，意味着当访问根路径时，会自动跳转到 '/home' 这个子路径对应的页面
redirect: '/home', redirect: '/home',
// 在路由的元数据（meta）中设置标题为 '首页'，图标为 'home'，这两个信息会分别用于侧边栏菜单的显示和面包屑导航等地方的展示
meta: {title: '首页', icon: 'home'}, meta: {title: '首页', icon: 'home'},
children: [{ // 定义该路由下的子路由数组，每个子路由对应一个具体的页面组件
children: [
{
// 子路由的路径为 'home'，也就是在根路径下访问 'home' 会对应这个路由配置
path: 'home', path: 'home',
// 给这个路由命名为 'home'，用于后续的路由导航、组件缓存等相关操作
name: 'home', name: 'home',
// 通过动态导入加载对应的组件，这里对应的是 '@/views/home/index' 这个页面组件，一般是应用的仪表盘页面之类的主页面
component: () => import('@/views/home/index'), component: () => import('@/views/home/index'),
// 在子路由的元数据中设置标题为 '仪表盘'，图标为 'dashboard'，同样用于展示相关信息
meta: {title: '仪表盘', icon: 'dashboard'} meta: {title: '仪表盘', icon: 'dashboard'}
}, },
{ {
// 给这个路由命名为 'document'，路径是一个外部链接 'https://www.macrozheng.com'，可能用于跳转到外部学习教程网站
name: 'document', name: 'document',
path: 'https://www.macrozheng.com', path: 'https://www.macrozheng.com',
// 在元数据中设置标题为 '学习教程'，图标为 'document'，用于侧边栏等地方显示相关信息
meta: {title: '学习教程', icon: 'document'} meta: {title: '学习教程', icon: 'document'}
}, },
{ {
// 给这个路由命名为 'video'，路径是另一个外部链接 'https://www.macrozheng.com/mall/catalog/mall_video.html'，可能用于跳转到外部视频教程页面
name: 'video', name: 'video',
path: 'https://www.macrozheng.com/mall/catalog/mall_video.html', path: 'https://www.macrozheng.com/mall/catalog/mall_video.html',
// 在元数据中设置标题为 '视频教程'，图标为 'video'，用于展示相关信息
meta: {title: '视频教程', icon: 'video'} meta: {title: '视频教程', icon: 'video'}
}, },
] ]
} }
] ]
// 定义一个名为asyncRouterMap的常量数组，用于存放需要动态加载的路由配置信息，通常这些路由对应的模块可能比较大，或者是根据用户权限等情况动态决定是否加载的部分
export const asyncRouterMap = [ export const asyncRouterMap = [
{ {
// 定义一个商品管理模块（pms）相关的路由配置，路径为 '/pms'，对应的组件是之前导入的Layout组件作为布局框架
path: '/pms', path: '/pms',
component: Layout, component: Layout,
// 设置重定向路径为 '/pms/product'，访问 '/pms' 时会自动跳转到商品列表页面相关的子路由
redirect: '/pms/product', redirect: '/pms/product',
// 给这个路由命名为 'pms'，方便后续操作识别
name: 'pms', name: 'pms',
// 在路由的元数据中设置标题为 '商品'，图标为 'product'，用于侧边栏菜单等地方显示
meta: {title: '商品', icon: 'product'}, meta: {title: '商品', icon: 'product'},
children: [{ // 定义该路由下的子路由数组，包含商品管理相关的各个具体功能页面的路由配置
children: [
{
// 商品列表页面的子路由，路径为 'product'，命名为 'product'，通过动态导入加载对应的组件，用于展示商品列表信息
path: 'product', path: 'product',
name: 'product', name: 'product',
component: () => import('@/views/pms/product/index'), component: () => import('@/views/pms/product/index'),
meta: {title: '商品列表', icon: 'product-list'} meta: {title: '商品列表', icon: 'product-list'}
}, },
{ {
// 添加商品页面的子路由，命名为 'addProduct'，通过动态导入加载对应组件，用于添加商品的操作页面
path: 'addProduct', path: 'addProduct',
name: 'addProduct', name: 'addProduct',
component: () => import('@/views/pms/product/add'), component: () => import('@/views/pms/product/add'),
meta: {title: '添加商品', icon: 'product-add'} meta: {title: '添加商品', icon: 'product-add'}
}, },
{ {
// 修改商品页面的子路由，命名为 'updateProduct'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，意味着这个页面不会显示在侧边栏等常规菜单中，可能是通过其他方式（比如在商品列表页点击编辑按钮进入）访问
path: 'updateProduct', path: 'updateProduct',
name: 'updateProduct', name: 'updateProduct',
component: () => import('@/views/pms/product/update'), component: () => import('@/views/pms/product/update'),
@ -73,12 +115,14 @@ export const asyncRouterMap = [
hidden: true hidden: true
}, },
{ {
// 商品分类页面的子路由，命名为 'productCate'，通过动态导入加载对应组件，用于商品分类管理相关操作
path: 'productCate', path: 'productCate',
name: 'productCate', name: 'productCate',
component: () => import('@/views/pms/productCate/index'), component: () => import('@/views/pms/productCate/index'),
meta: {title: '商品分类', icon: 'product-cate'} meta: {title: '商品分类', icon: 'product-cate'}
}, },
{ {
// 添加商品分类页面的子路由，命名为 'addProductCate'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不会在常规菜单显示，可能是特定操作下进入的页面
path: 'addProductCate', path: 'addProductCate',
name: 'addProductCate', name: 'addProductCate',
component: () => import('@/views/pms/productCate/add'), component: () => import('@/views/pms/productCate/add'),
@ -86,6 +130,7 @@ export const asyncRouterMap = [
hidden: true hidden: true
}, },
{ {
// 修改商品分类页面的子路由，命名为 'updateProductCate'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，同样不在常规菜单展示，用于特定的修改操作入口
path: 'updateProductCate', path: 'updateProductCate',
name: 'updateProductCate', name: 'updateProductCate',
component: () => import('@/views/pms/productCate/update'), component: () => import('@/views/pms/productCate/update'),
@ -93,12 +138,14 @@ export const asyncRouterMap = [
hidden: true hidden: true
}, },
{ {
// 商品类型页面的子路由，命名为 'productAttr'，通过动态导入加载对应组件，用于管理商品类型相关功能
path: 'productAttr', path: 'productAttr',
name: 'productAttr', name: 'productAttr',
component: () => import('@/views/pms/productAttr/index'), component: () => import('@/views/pms/productAttr/index'),
meta: {title: '商品类型', icon: 'product-attr'} meta: {title: '商品类型', icon: 'product-attr'}
}, },
{ {
// 商品属性列表页面的子路由，命名为 'productAttrList'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不常规显示，可能是特定的查看属性列表的入口
path: 'productAttrList', path: 'productAttrList',
name: 'productAttrList', name: 'productAttrList',
component: () => import('@/views/pms/productAttr/productAttrList'), component: () => import('@/views/pms/productAttr/productAttrList'),
@ -106,6 +153,7 @@ export const asyncRouterMap = [
hidden: true hidden: true
}, },
{ {
// 添加商品属性页面的子路由，命名为 'addProductAttr'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不是常规菜单可见的页面，用于添加商品属性操作入口
path: 'addProductAttr', path: 'addProductAttr',
name: 'addProductAttr', name: 'addProductAttr',
component: () => import('@/views/pms/productAttr/addProductAttr'), component: () => import('@/views/pms/productAttr/addProductAttr'),
@ -113,6 +161,7 @@ export const asyncRouterMap = [
hidden: true hidden: true
}, },
{ {
// 修改商品属性页面的子路由，命名为 'updateProductAttr'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不在常规菜单展示，用于修改商品属性的操作入口
path: 'updateProductAttr', path: 'updateProductAttr',
name: 'updateProductAttr', name: 'updateProductAttr',
component: () => import('@/views/pms/productAttr/updateProductAttr'), component: () => import('@/views/pms/productAttr/updateProductAttr'),
@ -120,12 +169,14 @@ export const asyncRouterMap = [
hidden: true hidden: true
}, },
{ {
// 品牌管理页面的子路由，命名为 'brand'，通过动态导入加载对应组件，用于品牌管理相关操作，比如查看、编辑品牌等
path: 'brand', path: 'brand',
name: 'brand', name: 'brand',
component: () => import('@/views/pms/brand/index'), component: () => import('@/views/pms/brand/index'),
meta: {title: '品牌管理', icon: 'product-brand'} meta: {title: '品牌管理', icon: 'product-brand'}
}, },
{ {
// 添加品牌页面的子路由，命名为 'addBrand'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不是常规显示的页面，用于添加品牌的操作入口
path: 'addBrand', path: 'addBrand',
name: 'addBrand', name: 'addBrand',
component: () => import('@/views/pms/brand/add'), component: () => import('@/views/pms/brand/add'),
@ -133,6 +184,7 @@ export const asyncRouterMap = [
hidden: true hidden: true
}, },
{ {
// 编辑品牌页面的子路由，命名为 'updateBrand'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不在常规菜单出现，用于编辑品牌的操作入口
path: 'updateBrand', path: 'updateBrand',
name: 'updateBrand', name: 'updateBrand',
component: () => import('@/views/pms/brand/update'), component: () => import('@/views/pms/brand/update'),
@ -142,6 +194,8 @@ export const asyncRouterMap = [
] ]
}, },
{ {
// 订单管理模块（oms）相关的路由配置，路径为 '/oms'，对应Layout组件作为布局框架，以下类似的结构都是对订单管理各功能页面路由的详细配置
path: '/oms', path: '/oms',
component: Layout, component: Layout,
redirect: '/oms/order', redirect: '/oms/order',

76
src/styles/sidebar.scss
Unescape View File

@ -1,57 +1,84 @@
// 选择器匹配 id 为 "app" 的元素及其内部的样式规则，以下是针对该元素内部不同类名所对应的样式设置
#app { #app {
// 主体区域 // 以下是针对类名为 "main-container" 的元素设置的样式规则，它通常用于页面的主体内容区域
.main-container { .main-container {
// 设置元素的最小高度为 100%，确保在内容较少时也能占满整个可视区域的高度（具体取决于父元素高度情况）
min-height: 100%; min-height: 100%;
transition: margin-left .28s; // 定义一个过渡效果，当元素的 margin-left 属性发生变化时，过渡时间为 0.28 秒，实现平滑的动画效果，常用于侧边栏展开或收缩时主体区域的位置移动动画
transition: margin-left.28s;
// 设置元素初始的左边距为 180px，可能是为侧边栏预留的空间，使得主体内容在侧边栏右侧显示
margin-left: 180px; margin-left: 180px;
} }
// 侧边栏 // 以下是针对类名为 "sidebar-container" 的元素设置的样式规则，一般用于侧边栏的样式设置
.sidebar-container { .sidebar-container {
// 针对类名为 "horizontal-collapse-transition" 的子元素设置样式，它可能用于控制侧边栏在水平方向收缩展开时某些属性的过渡效果
.horizontal-collapse-transition { .horizontal-collapse-transition {
// 这里设置了多个属性的过渡时间为 0 秒，意味着这些属性变化时不会有过渡动画效果，分别是宽度（width）、左内边距（padding-left）和右内边距（padding-right），使用 ease-in-out 缓动函数（不过由于过渡时间为 0，实际不会体现缓动效果）
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
} }
transition: width .28s; // 为侧边栏容器本身设置宽度变化的过渡效果，过渡时间为 0.28 秒，用于侧边栏展开或收缩时宽度变化的动画展示
width: 180px !important; transition: width.28s;
// 强制设置侧边栏的宽度为 180px，确保侧边栏有固定的宽度显示，"!important" 用于提高该样式规则的优先级，使其覆盖可能存在的其他相同属性的冲突样式
width: 180px!important;
// 设置侧边栏的高度为 100%，使其占满整个页面的垂直方向空间（取决于父元素高度）
height: 100%; height: 100%;
// 将侧边栏设置为固定定位（fixed），使其相对于浏览器窗口固定位置，不会随着页面滚动而移动，常用于侧边栏始终保持在页面特定位置的布局
position: fixed; position: fixed;
// 设置字体大小为 0px，可能后续会通过其他方式（比如图标字体等）来设置合适的显示大小，或者只是临时隐藏文本内容的一种方式（不过需要注意兼容性和可访问性问题）
font-size: 0px; font-size: 0px;
// 将侧边栏定位在页面顶部，距离顶部距离为 0
top: 0; top: 0;
// 将侧边栏定位在页面底部，距离底部距离为 0，结合 height: 100% 就能使其占满整个垂直空间
bottom: 0; bottom: 0;
// 将侧边栏定位在页面左侧，距离左侧距离为 0，使其靠页面左边显示
left: 0; left: 0;
// 设置侧边栏的 z-index 为 1001，确保它在页面堆叠顺序中处于较高的层级，能够覆盖一些其他元素显示，防止被其他元素遮挡
z-index: 1001; z-index: 1001;
// 当侧边栏内容超出其自身大小时，设置隐藏超出部分，防止内容溢出显示混乱
overflow: hidden; overflow: hidden;
// 针对侧边栏内部的 <a> 标签设置样式，将其显示为行内块级元素，使其既可以在水平方向上排列，又能设置宽度、高度等块级元素的属性，并且设置宽度为 100%，占满父元素宽度
a { a {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
} }
// 针对类名为 "svg-icon" 的元素（可能是用于展示 SVG 图标的元素）设置样式，设置其右侧外边距为 16px，用于与其他元素的间距调整
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
} }
// 针对类名为 "el-menu" 的元素（可能是使用了 Element UI 等框架中的菜单组件）设置样式，移除其边框显示（border: none），并强制设置宽度为 100%，确保菜单组件占满侧边栏宽度
.el-menu { .el-menu {
border: none; border: none;
width: 100% !important; width: 100%!important;
} }
} }
// 以下是针对类名为 "hideSidebar" 的元素及其内部相关元素设置的样式规则，用于在侧边栏需要隐藏（收缩）时的样式变化
.hideSidebar { .hideSidebar {
// 当 "hideSidebar" 类应用到某个元素时，针对其内部类名为 "sidebar-container" 的子元素设置样式，将侧边栏宽度缩小为 36px，实现隐藏（收缩）侧边栏的视觉效果
.sidebar-container { .sidebar-container {
width: 36px !important; width: 36px!important;
} }
// 同样在 "hideSidebar" 类生效时，针对内部类名为 "main-container" 的子元素设置样式，将其左边距调整为 36px，以适应侧边栏收缩后的空间变化，使主体内容向左移动，占满侧边栏收缩后的空间
.main-container { .main-container {
margin-left: 36px; margin-left: 36px;
} }
// 针对类名为 "submenu-title-noDropdown" 的元素设置样式，设置其左内边距为 10px，用于在侧边栏隐藏状态下调整该元素的显示位置，"!important" 提高样式优先级确保生效，并设置为相对定位（position: relative），方便后续其内部的绝对定位元素基于它进行定位
.submenu-title-noDropdown { .submenu-title-noDropdown {
padding-left: 10px !important; padding-left: 10px!important;
position: relative; position: relative;
// 针对内部类名为 "el-tooltip" 的子元素（可能是用于显示提示信息的工具提示组件）设置样式，设置其内边距为 0 到 10px，调整提示信息的显示区域大小
.el-tooltip { .el-tooltip {
padding: 0 10px !important; padding: 0 10px!important;
} }
} }
// 针对类名为 "el-submenu" 的元素（可能是菜单中的子菜单组件）设置样式，以下是具体的样式规则调整
.el-submenu { .el-submenu {
// 针对 "el-submenu" 元素下的直接子元素 "el-submenu__title"（即子菜单标题部分）设置样式，设置其左内边距为 10px，调整标题的显示位置
&>.el-submenu__title { &>.el-submenu__title {
padding-left: 10px !important; padding-left: 10px!important;
// 针对 "el-submenu__title" 内部的 <span> 元素设置样式，将其高度、宽度设置为 0，隐藏其内容（通过 overflow: hidden 和 visibility: hidden 进一步确保内容不可见），并且设置为行内块级元素，可能是在侧边栏隐藏状态下对这些元素进行特定的显示隐藏处理
&>span { &>span {
height: 0; height: 0;
width: 0; width: 0;
@ -59,6 +86,7 @@
visibility: hidden; visibility: hidden;
display: inline-block; display: inline-block;
} }
// 针对 "el-submenu__title" 内部的 "el-submenu__icon-arrow" 元素（可能是子菜单标题中的箭头图标元素）设置样式，将其隐藏（display: none），在侧边栏隐藏状态下不显示该箭头图标
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
display: none; display: none;
} }
@ -66,28 +94,34 @@
} }
} }
.sidebar-container .nest-menu .el-submenu>.el-submenu__title, // 针对类名为 "sidebar-container" 的元素内部类名为 "nest-menu" 的子元素下的 "el-submenu" 元素的 "el-submenu__title"，以及类名为 "sidebar-container" 的元素内部的 "el-menu-item"（可能是菜单中的菜单项元素）设置样式，强制设置它们的最小宽度为 180px，并设置背景颜色为 $subMenuBg 变量所代表的颜色（这里 $subMenuBg 应该是在其他地方定义的 SCSS 变量），用于统一这些元素的背景颜色显示
.sidebar-container .el-submenu .el-menu-item { .sidebar-container.nest-menu.el-submenu>.el-submenu__title,
min-width: 180px !important; .sidebar-container.el-submenu.el-menu-item {
background-color: $subMenuBg !important; min-width: 180px!important;
background-color: $subMenuBg!important;
// 当鼠标悬停在这些元素上时，改变它们的背景颜色为 $menuHover 变量所代表的颜色（同样是外部定义的 SCSS 变量），实现悬停效果的背景颜色变化
&:hover { &:hover {
background-color: $menuHover !important; background-color: $menuHover!important;
} }
} }
.el-menu--collapse .el-menu .el-submenu { // 针对类名为 "el-menu--collapse" 的元素内部的 "el-menu" 元素下的 "el-submenu" 元素（可能是在菜单处于折叠状态下的子菜单元素）设置样式，强制设置其最小宽度为 180px，确保在特定菜单折叠状态下有合适的宽度显示
min-width: 180px !important; .el-menu--collapse.el-menu.el-submenu {
min-width: 180px!important;
} }
//适配移动端 // 以下是针对类名为 "mobile" 的元素及其内部相关元素设置的样式规则，用于适配移动端设备的页面布局样式调整
.mobile { .mobile {
// 在移动端布局下，针对类名为 "main-container" 的元素设置样式，将其左边距设置为 0px，使主体内容在移动端可以占满整个页面宽度，无需为侧边栏预留空间（可能在移动端侧边栏有不同的显示方式或者隐藏了）
.main-container { .main-container {
margin-left: 0px; margin-left: 0px;
} }
// 在移动端布局下，针对类名为 "sidebar-container" 的元素设置样式，将其定位在距离页面顶部 50px 的位置（可能是为了避开顶部导航栏等占用的空间），设置宽度变化的过渡时间为 0.28 秒，并强制设置宽度为 180px
.sidebar-container { .sidebar-container {
top: 50px; top: 50px;
transition: transform .28s; transition: transform.28s;
width: 180px !important; width: 180px!important;
} }
// 当 "mobile" 类和 "hideSidebar" 类同时应用到某个元素时（可能表示在移动端且侧边栏需要隐藏的情况），针对内部类名为 "sidebar-container" 的子元素设置样式，设置其过渡持续时间为 0.3s，并通过 transform 属性将其在水平方向上向左移动 180px，实现侧边栏隐藏（移出屏幕外）的动画效果，使用 translate3d 函数实现 3D 变换，这里主要是在 X 轴方向上移动
&.hideSidebar { &.hideSidebar {
.sidebar-container { .sidebar-container {
transition-duration: 0.3s; transition-duration: 0.3s;
@ -96,7 +130,9 @@
} }
} }
// 以下是针对类名为 "withoutAnimation" 的元素及其内部相关元素设置的样式规则，用于在不需要动画效果的情况下，取消相关元素的过渡动画设置
.withoutAnimation { .withoutAnimation {
// 当 "withoutAnimation" 类应用到某个元素时，针对其内部类名为 "main-container" 和 "sidebar-container" 的子元素设置样式，将它们的过渡效果设置为 none，即取消所有过渡动画，使元素属性变化时立即生效，没有过渡过程
.main-container, .main-container,
.sidebar-container { .sidebar-container {
transition: none; transition: none;

49
src/utils/date.js
Unescape View File

@ -1,42 +1,69 @@
// date.js // date.js
// 这个函数用于将一个日期对象按照指定的格式进行格式化
export function formatDate(date, fmt) { export function formatDate(date, fmt) {
// 如果格式化字符串中包含'y+'（表示年份）
if (/(y+)/.test(fmt)) { if (/(y+)/.test(fmt)) {
// 使用正则表达式匹配到的'y+'替换为对应的年份值
// 获取当前日期的年份，将其转换为字符串
// 根据'y+'的长度，从年份字符串的末尾截取相应长度的字符进行替换
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
} }
// 创建一个对象，包含了从日期对象中获取各种时间单位的方法
let o = { let o = {
'M+': date.getMonth() + 1, 'M+': date.getMonth() + 1, // 获取月份（月份是从0开始的，所以要加1）
'd+': date.getDate(), 'd+': date.getDate(), // 获取日期
'h+': date.getHours(), 'h+': date.getHours(), // 获取小时
'm+': date.getMinutes(), 'm+': date.getMinutes(), // 获取分钟
's+': date.getSeconds() 's+': date.getSeconds() // 获取秒
}; };
// 遍历对象o中的每个属性（时间单位）
for (let k in o) { for (let k in o) {
// 使用正则表达式检查格式化字符串中是否包含当前时间单位的格式
if (new RegExp(`(${k})`).test(fmt)) { if (new RegExp(`(${k})`).test(fmt)) {
// 将当前时间单位的值转换为字符串
let str = o[k] + ''; let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); // 如果当前时间单位在格式化字符串中的格式长度为1，则直接替换
// 如果长度大于1，则调用padLeftZero函数进行补零操作后再替换
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)? str : padLeftZero(str));
} }
} }
// 返回格式化后的字符串
return fmt; return fmt;
} }
function padLeftZero(str) { // 这个函数用于将字符串格式的日期转换为日期对象
return ('00' + str).substr(str.length); // 如果没有传入分隔符参数，则默认使用'-'作为分隔符
}
export function str2Date(dateStr, separator) { export function str2Date(dateStr, separator) {
if (!separator) { if (!separator) {
separator = "-"; separator = "-";
} }
// 根据分隔符将日期字符串拆分成数组
let dateArr = dateStr.split(separator); let dateArr = dateStr.split(separator);
// 解析年份
let year = parseInt(dateArr[0]); let year = parseInt(dateArr[0]);
// 解析月份
let month; let month;
//处理月份为04这样的情况 // 如果月份字符串以'0'开头（例如'04'），则去掉'0'后再解析为整数
if (dateArr[1].indexOf("0") == 0) { if (dateArr[1].indexOf("0") == 0) {
month = parseInt(dateArr[1].substring(1)); month = parseInt(dateArr[1].substring(1));
} else { } else {
month = parseInt(dateArr[1]); month = parseInt(dateArr[1]);
} }
// 解析日期
let day = parseInt(dateArr[2]); let day = parseInt(dateArr[2]);
// 使用解析后的年、月、日创建一个新的日期对象
// 注意：月份在日期对象中是从0开始计数的，所以要减1
let date = new Date(year, month - 1, day); let date = new Date(year, month - 1, day);
// 返回日期对象
return date; return date;
} }
// 这个函数用于在字符串左边补零
// 例如，如果传入'5'，则返回'05'
function padLeftZero(str) {
// 在字符串前面加上'00'，然后根据原字符串的长度从右边截取
return ('00' + str).substr(str.length);
}

44
src/utils/index.js
Unescape View File

@ -1,54 +1,78 @@
// 这个函数用于将给定的时间数据按照指定的格式进行格式化处理，支持传入不同类型的时间表示形式（如时间戳、Date对象等）并转化为格式化后的字符串
export function parseTime(time, cFormat) { export function parseTime(time, cFormat) {
// 如果没有传入任何参数（arguments.length === 0表示参数个数为0），则直接返回null，表示无法进行时间格式化操作
if (arguments.length === 0) { if (arguments.length === 0) {
return null return null
} }
// 如果没有传入自定义的格式化字符串（cFormat），则使用默认的格式化字符串，这里定义了一个包含年、月、日、时、分、秒占位符的格式模板
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date let date
// 判断传入的时间参数是否已经是一个Date对象，如果是，则直接将其赋值给date变量，后续用于提取时间信息进行格式化
if (typeof time === 'object') { if (typeof time === 'object') {
date = time date = time
} else { } else {
// 如果传入的时间参数不是Date对象，先进行以下处理
// 如果传入的时间字符串长度为10位（通常表示以秒为单位的时间戳，比如从后端获取的时间戳可能是这种形式），则将其转换为以毫秒为单位的时间戳（乘以1000），因为JavaScript中Date对象的构造函数接收的是以毫秒为单位的时间戳
if (('' + time).length === 10) time = parseInt(time) * 1000 if (('' + time).length === 10) time = parseInt(time) * 1000
// 使用转换后的时间戳（或者本身就是以毫秒为单位的时间戳）创建一个Date对象，用于后续获取年、月、日等时间信息
date = new Date(time) date = new Date(time)
} }
// 创建一个对象，用于存储从Date对象中提取出的各个时间单位对应的数值，键名与格式化字符串中的占位符相对应
const formatObj = { const formatObj = {
y: date.getFullYear(), y: date.getFullYear(), // 获取年份，例如2024
m: date.getMonth() + 1, m: date.getMonth() + 1, // 获取月份，JavaScript中月份是从0开始计数的，所以要加1，范围是1 - 12
d: date.getDate(), d: date.getDate(), // 获取日期，即一个月中的第几天，范围是1 - 31
h: date.getHours(), h: date.getHours(), // 获取小时，范围是0 - 23
i: date.getMinutes(), i: date.getMinutes(), // 获取分钟，范围是0 - 59
s: date.getSeconds(), s: date.getSeconds(), // 获取秒，范围是0 - 59
a: date.getDay() a: date.getDay() // 获取星期几，返回值是0（星期日） - 6（星期六）
} }
// 使用正则表达式替换格式化字符串中的占位符，将其替换为实际的时间数值对应的字符串表示形式
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key] let value = formatObj[key]
// 如果占位符是 'a'（表示星期几），则将数字形式的星期几转换为中文汉字形式（例如1转换为“一”，表示星期一）
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1] if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
// 如果占位符对应的时间数值小于10，并且占位符长度大于0（防止出现类似 {0} 这种不需要补0的情况），则在数值前面补0，使其格式更规范（例如1变为01）
if (result.length > 0 && value < 10) { if (result.length > 0 && value < 10) {
value = '0' + value value = '0' + value
} }
// 返回处理后的时间数值对应的字符串，如果数值为0或者不存在（比如没有获取到对应的时间信息），则返回0
return value || 0 return value || 0
}) })
// 返回最终格式化后的时间字符串
return time_str return time_str
} }
// 这个函数用于根据时间与当前时间的时间差，以相对友好的格式来展示时间，例如“刚刚”、“10分钟前”等，如果时间差较大或者传入了格式化选项，则按照指定格式进行格式化展示
export function formatTime(time, option) { export function formatTime(time, option) {
// 将传入的时间参数转换为以毫秒为单位的时间戳（假设传入的是以秒为单位的时间戳，乘以1000进行转换），方便后续进行时间差的计算等操作
time = +time * 1000 time = +time * 1000
// 根据转换后的时间戳创建一个Date对象，用于获取时间信息
const d = new Date(time) const d = new Date(time)
// 获取当前时间的时间戳（以毫秒为单位）
const now = Date.now() const now = Date.now()
// 计算当前时间与给定时间的时间差，单位为秒，通过将时间戳差值除以1000得到
const diff = (now - d) / 1000 const diff = (now - d) / 1000
// 如果时间差小于30秒，直接返回“刚刚”，表示时间很近
if (diff < 30) { if (diff < 30) {
return '刚刚' return '刚刚'
} else if (diff < 3600) { // less 1 hour } else if (diff < 3600) { // 如果时间差小于1小时（1小时等于3600秒）
// 计算时间差对应的分钟数（向上取整），并返回类似“10分钟前”的格式
return Math.ceil(diff / 60) + '分钟前' return Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) { } else if (diff < 3600 * 24) { // 如果时间差小于1天（1天等于3600 * 24秒）
// 计算时间差对应的小时数（向上取整），并返回类似“3小时前”的格式
return Math.ceil(diff / 3600) + '小时前' return Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) { } else if (diff < 3600 * 24 * 2) { // 如果时间差小于2天
// 直接返回“1天前”
return '1天前' return '1天前'
} }
// 如果传入了格式化选项（option），则调用parseTime函数按照传入的选项格式来格式化时间并返回
if (option) { if (option) {
return parseTime(time, option) return parseTime(time, option)
} else { } else {
// 如果没有传入格式化选项，则以“月日时分”的格式返回时间，例如“10月15日12时30分”
return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分' return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
} }
} }

33
src/views/home/index.vue
Unescape View File

@ -1,10 +1,17 @@
<template> <template>
<!-- 整体的应用容器，用于包裹页面内的各个功能模块，通过设置外边距来控制在页面中的位置 -->
<div class="app-container"> <div class="app-container">
<!-- 用于展示一些地址相关链接信息的布局容器 -->
<div class="address-layout"> <div class="address-layout">
<!-- el-row 组件用于创建行布局，通过 :gutter 属性设置列之间的间隔为 20px -->
<el-row :gutter="20"> <el-row :gutter="20">
<!-- el-col 组件用于定义列，这里设置占 6 列的宽度（在使用了 12 列布局系统的情况下） -->
<el-col :span="6"> <el-col :span="6">
<!-- 带有外边框样式的容器 -->
<div class="out-border"> <div class="out-border">
<!-- 标题部分，用于显示该区域的标题 -->
<div class="layout-title">学习教程</div> <div class="layout-title">学习教程</div>
<!-- 主要内容部分，展示具体的链接文本，链接指向外部网站，点击会在新标签页打开 -->
<div class="color-main address-content"> <div class="color-main address-content">
<a href="https://www.macrozheng.com" target="_blank">mall学习教程</a> <a href="https://www.macrozheng.com" target="_blank">mall学习教程</a>
</div> </div>
@ -28,12 +35,17 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<!-- 用于展示一些统计总数相关信息的布局容器 -->
<div class="total-layout"> <div class="total-layout">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"> <el-col :span="6">
<!-- 用于包裹单个统计项的框架容器 -->
<div class="total-frame"> <div class="total-frame">
<!-- 通过绑定属性显示对应的图标，图标样式通过类名控制 -->
<img :src="img_home_order" class="total-icon"> <img :src="img_home_order" class="total-icon">
<!-- 统计项的标题部分 -->
<div class="total-title">今日订单总数</div> <div class="total-title">今日订单总数</div>
<!-- 显示具体统计数值的部分 -->
<div class="total-value">200</div> <div class="total-value">200</div>
</div> </div>
</el-col> </el-col>
@ -51,6 +63,7 @@
<div class="total-value">￥5000.00</div> <div class="total-value">￥5000.00</div>
</div> </div>
</el-col> </el-col>
<!-- 以下是被注释掉的一个统计项，可能原本用于展示近 7 天销售总额相关信息 -->
<!--<el-col :span="6">--> <!--<el-col :span="6">-->
<!--<div class="total-frame">--> <!--<div class="total-frame">-->
<!--<svg-icon icon-class="total-week" class="total-icon">--> <!--<svg-icon icon-class="total-week" class="total-icon">-->
@ -61,20 +74,29 @@
<!--</el-col>--> <!--</el-col>-->
</el-row> </el-row>
</div> </div>
<!-- 用于展示一些特定信息（如二维码、提示文字等）的卡片式布局容器 -->
<el-card class="mine-layout"> <el-card class="mine-layout">
<!-- 将图片在水平方向上居中显示，图片展示的是一个二维码，设置了宽度和高度 -->
<div style="text-align: center"> <div style="text-align: center">
<img width="150px" height="150px" src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg"> <img width="150px" height="150px" src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg">
</div> </div>
<!-- 提示文字，告知用户 mall 全套学习教程正在连载中 -->
<div style="text-align: center">mall全套学习教程连载中！</div> <div style="text-align: center">mall全套学习教程连载中！</div>
<!-- 另一行提示文字，引导用户关注公众号以第一时间获取相关内容 -->
<div style="text-align: center;margin-top: 5px"><span class="color-main">关注公号</span>，第一时间获取。</div> <div style="text-align: center;margin-top: 5px"><span class="color-main">关注公号</span>，第一时间获取。</div>
</el-card> </el-card>
<!-- 用于展示待处理事务相关信息的布局容器 -->
<div class="un-handle-layout"> <div class="un-handle-layout">
<!-- 标题部分，用于标识这是待处理事务区域 -->
<div class="layout-title">待处理事务</div> <div class="layout-title">待处理事务</div>
<!-- 内容部分，包含多个行和列来展示不同类型的待处理事务信息 -->
<div class="un-handle-content"> <div class="un-handle-content">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<div class="un-handle-item"> <div class="un-handle-item">
<!-- 显示事务类型的文字，设置了字体粗细 -->
<span class="font-medium">待付款订单</span> <span class="font-medium">待付款订单</span>
<!-- 显示对应事务数量的文字，通过浮动使其靠右显示，并设置了危险（红色）的颜色样式 -->
<span style="float: right" class="color-danger">(10)</span> <span style="float: right" class="color-danger">(10)</span>
</div> </div>
</el-col> </el-col>
@ -133,6 +155,7 @@
</el-row> </el-row>
</div> </div>
</div> </div>
<!-- 用于展示商品和用户总览信息的布局容器 -->
<div class="overview-layout"> <div class="overview-layout">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
@ -140,12 +163,14 @@
<div class="layout-title">商品总览</div> <div class="layout-title">商品总览</div>
<div style="padding: 40px"> <div style="padding: 40px">
<el-row> <el-row>
<!-- 展示商品相关统计数值的列，设置了危险（红色）的颜色样式 -->
<el-col :span="6" class="color-danger overview-item-value">100</el-col> <el-col :span="6" class="color-danger overview-item-value">100</el-col>
<el-col :span="6" class="color-danger overview-item-value">400</el-col> <el-col :span="6" class="color-danger overview-item-value">400</el-col>
<el-col :span="6" class="color-danger overview-item-value">50</el-col> <el-col :span="6" class="color-danger overview-item-value">50</el-col>
<el-col :span="6" class="color-danger overview-item-value">500</el-col> <el-col :span="6" class="color-danger overview-item-value">500</el-col>
</el-row> </el-row>
<el-row class="font-medium"> <el-row class="font-medium">
<!-- 展示对应统计数值含义的标题列 -->
<el-col :span="6" class="overview-item-title">已下架</el-col> <el-col :span="6" class="overview-item-title">已下架</el-col>
<el-col :span="6" class="overview-item-title">已上架</el-col> <el-col :span="6" class="overview-item-title">已上架</el-col>
<el-col :span="6" class="overview-item-title">库存紧张</el-col> <el-col :span="6" class="overview-item-title">库存紧张</el-col>
@ -175,12 +200,14 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<!-- 用于展示订单统计相关信息的布局容器 -->
<div class="statistics-layout"> <div class="statistics-layout">
<div class="layout-title">订单统计</div> <div class="layout-title">订单统计</div>
<el-row> <el-row>
<el-col :span="4"> <el-col :span="4">
<div style="padding: 20px"> <div style="padding: 20px">
<div> <div>
<!-- 显示本月订单总数相关信息，包括描述文字、具体数值以及同比上月的增长情况 -->
<div style="color: #909399;font-size: 14px">本月订单总数</div> <div style="color: #909399;font-size: 14px">本月订单总数</div>
<div style="color: #606266;font-size: 24px;padding: 10px 0">10000</div> <div style="color: #606266;font-size: 24px;padding: 10px 0">10000</div>
<div> <div>
@ -189,6 +216,7 @@
</div> </div>
</div> </div>
<div style="margin-top: 20px;"> <div style="margin-top: 20px;">
<!-- 显示本周订单总数相关信息，同样包括描述文字、数值和同比上周的变化情况 -->
<div style="color: #909399;font-size: 14px">本周订单总数</div> <div style="color: #909399;font-size: 14px">本周订单总数</div>
<div style="color: #606266;font-size: 24px;padding: 10px 0">1000</div> <div style="color: #606266;font-size: 24px;padding: 10px 0">1000</div>
<div> <div>
@ -197,6 +225,7 @@
</div> </div>
</div> </div>
<div style="margin-top: 20px;"> <div style="margin-top: 20px;">
<!-- 显示本月销售总额相关信息 -->
<div style="color: #909399;font-size: 14px">本月销售总额</div> <div style="color: #909399;font-size: 14px">本月销售总额</div>
<div style="color: #606266;font-size: 24px;padding: 10px 0">100000</div> <div style="color: #606266;font-size: 24px;padding: 10px 0">100000</div>
<div> <div>
@ -205,6 +234,7 @@
</div> </div>
</div> </div>
<div style="margin-top: 20px;"> <div style="margin-top: 20px;">
<!-- 显示本周销售总额相关信息 -->
<div style="color: #909399;font-size: 14px">本周销售总额</div> <div style="color: #909399;font-size: 14px">本周销售总额</div>
<div style="color: #606266;font-size: 24px;padding: 10px 0">50000</div> <div style="color: #606266;font-size: 24px;padding: 10px 0">50000</div>
<div> <div>
@ -216,6 +246,7 @@
</el-col> </el-col>
<el-col :span="20"> <el-col :span="20">
<div style="padding: 10px;border-left:1px solid #DCDFE6"> <div style="padding: 10px;border-left:1px solid #DCDFE6">
<!-- el-date-picker 组件用于选择日期范围，以下是对其各种属性的设置说明 -->
<el-date-picker <el-date-picker
style="float: right;z-index: 1" style="float: right;z-index: 1"
size="small" size="small"
@ -230,6 +261,7 @@
:picker-options="pickerOptions"> :picker-options="pickerOptions">
</el-date-picker> </el-date-picker>
<div> <div>
<!-- ve-line 组件可能用于展示图表（比如折线图等），通过绑定多个属性来设置图表的数据、是否显示图例、加载状态等 -->
<ve-line <ve-line
:data="chartData" :data="chartData"
:legend-visible="false" :legend-visible="false"
@ -243,7 +275,6 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {str2Date} from '@/utils/date'; import {str2Date} from '@/utils/date';
import img_home_order from '@/assets/images/home_order.png'; import img_home_order from '@/assets/images/home_order.png';

67
src/views/layout/Layout.vue
Unescape View File

@ -1,36 +1,53 @@
<template> <template>
<!-- 最外层的 div 作为整个应用布局的包裹容器，通过绑定 :class 属性，动态地根据计算属性 classObj 的值来添加相应的类名 -->
<div class="app-wrapper" :class="classObj"> <div class="app-wrapper" :class="classObj">
<!-- 引入自定义的 Sidebar 组件，用于展示侧边栏内容，给它添加了一个类名 "sidebar-container"，方便后续进行样式设置 -->
<sidebar class="sidebar-container"></sidebar> <sidebar class="sidebar-container"></sidebar>
<!-- 这是主要内容的容器 div，用于放置页面中除侧边栏之外的主体部分 -->
<div class="main-container"> <div class="main-container">
<!-- 引入自定义的 Navbar 组件，用于展示页面顶部的导航栏 -->
<navbar></navbar> <navbar></navbar>
<!-- 引入自定义的 AppMain 组件，用于展示页面主体的核心内容 -->
<app-main></app-main> <app-main></app-main>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// 从当前目录下的 components 模块中导入 Navbar、Sidebar 和 AppMain 这三个自定义组件，以便在当前组件中使用它们来构建页面布局
import { Navbar, Sidebar, AppMain } from './components' import { Navbar, Sidebar, AppMain } from './components'
// 从当前目录下的 mixin 文件夹中的 ResizeHandler 文件导入 ResizeMixin，可能是一个混入（mixin）对象，用于处理页面尺寸变化相关的逻辑
import ResizeMixin from './mixin/ResizeHandler' import ResizeMixin from './mixin/ResizeHandler'
export default { export default {
name: 'layout', name: 'layout',
// 在 components 属性中注册要使用的子组件，将导入的 Navbar、Sidebar 和 AppMain 组件进行注册，这样在模板中就可以直接通过组件标签名来使用它们了
components: { components: {
Navbar, Navbar,
Sidebar, Sidebar,
AppMain AppMain
}, },
// 使用 mixins 属性引入 ResizeMixin，混入（mixin）可以将一些通用的逻辑、属性或方法混入到当前组件中，这里可能会混入处理页面大小调整相关的功能代码到当前的 layout 组件
mixins: [ResizeMixin], mixins: [ResizeMixin],
computed: { computed: {
// 定义一个计算属性 sidebar，它返回 Vuex 存储（store）中 app 模块下的 sidebar 状态数据。
// 通过这种方式，当前组件可以获取并响应式地使用 sidebar 的相关状态，比如判断侧边栏是否打开等情况。
sidebar() { sidebar() {
return this.$store.state.app.sidebar return this.$store.state.app.sidebar
}, },
// 定义一个计算属性 device，同样是从 Vuex 存储的 app 模块中获取 device 状态数据，这个数据可能用于表示当前设备类型（如移动端'mobile' 或者桌面端等）。
device() { device() {
return this.$store.state.app.device return this.$store.state.app.device
}, },
// 定义一个计算属性 classObj，它返回一个对象，对象中的属性会根据前面获取的 sidebar 和 device 等状态来动态决定。
// 以下是对这个对象属性的详细说明：
classObj() { classObj() {
return { return {
hideSidebar: !this.sidebar.opened, // 如果侧边栏不是打开状态（!this.sidebar.opened），则添加 hideSidebar 类名，这个类名可能在样式中用于隐藏侧边栏或者改变其显示样式等相关操作。
hideSidebar:!this.sidebar.opened,
// 如果侧边栏设置了 withoutAnimation 属性为 true（表示不需要动画效果），则添加 withoutAnimation 类名，用于控制侧边栏在显示隐藏等操作时是否应用动画效果的样式相关设置。
withoutAnimation: this.sidebar.withoutAnimation, withoutAnimation: this.sidebar.withoutAnimation,
// 如果当前设备类型是'mobile'（通过 this.device ==='mobile' 判断），则添加 mobile 类名，方便针对移动端进行特定的样式布局调整。
mobile: this.device === 'mobile' mobile: this.device === 'mobile'
} }
} }
@ -38,12 +55,44 @@ export default {
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <script>
@import "src/styles/mixin.scss"; // 从当前目录下的 components 模块中导入 Navbar、Sidebar 和 AppMain 这三个自定义组件，以便在当前组件中使用它们来构建页面布局
.app-wrapper { import { Navbar, Sidebar, AppMain } from './components'
@include clearfix; // 从当前目录下的 mixin 文件夹中的 ResizeHandler 文件导入 ResizeMixin，可能是一个混入（mixin）对象，用于处理页面尺寸变化相关的逻辑
position: relative; import ResizeMixin from './mixin/ResizeHandler'
height: 100%;
width: 100%; export default {
name: 'layout',
// 在 components 属性中注册要使用的子组件，将导入的 Navbar、Sidebar 和 AppMain 组件进行注册，这样在模板中就可以直接通过组件标签名来使用它们了
components: {
Navbar,
Sidebar,
AppMain
},
// 使用 mixins 属性引入 ResizeMixin，混入（mixin）可以将一些通用的逻辑、属性或方法混入到当前组件中，这里可能会混入处理页面大小调整相关的功能代码到当前的 layout 组件
mixins: [ResizeMixin],
computed: {
// 定义一个计算属性 sidebar，它返回 Vuex 存储（store）中 app 模块下的 sidebar 状态数据。
// 通过这种方式，当前组件可以获取并响应式地使用 sidebar 的相关状态，比如判断侧边栏是否打开等情况。
sidebar() {
return this.$store.state.app.sidebar
},
// 定义一个计算属性 device，同样是从 Vuex 存储的 app 模块中获取 device 状态数据，这个数据可能用于表示当前设备类型（如移动端'mobile' 或者桌面端等）。
device() {
return this.$store.state.app.device
},
// 定义一个计算属性 classObj，它返回一个对象，对象中的属性会根据前面获取的 sidebar 和 device 等状态来动态决定。
// 以下是对这个对象属性的详细说明：
classObj() {
return {
// 如果侧边栏不是打开状态（!this.sidebar.opened），则添加 hideSidebar 类名，这个类名可能在样式中用于隐藏侧边栏或者改变其显示样式等相关操作。
hideSidebar:!this.sidebar.opened,
// 如果侧边栏设置了 withoutAnimation 属性为 true（表示不需要动画效果），则添加 withoutAnimation 类名，用于控制侧边栏在显示隐藏等操作时是否应用动画效果的样式相关设置。
withoutAnimation: this.sidebar.withoutAnimation,
// 如果当前设备类型是'mobile'（通过 this.device ==='mobile' 判断），则添加 mobile 类名，方便针对移动端进行特定的样式布局调整。
mobile: this.device === 'mobile'
}
} }
</style> }
}
</script>

57
src/views/layout/components/Navbar.vue
Unescape View File

@ -1,18 +1,28 @@
<template> <template>
<!-- el-menu 组件用于创建一个菜单，这里设置了类名为 "navbar"，模式为水平方向（horizontal），通常用于页面顶部的导航栏布局 -->
<el-menu class="navbar" mode="horizontal"> <el-menu class="navbar" mode="horizontal">
<!-- Hamburger 组件，用于实现类似汉堡包样式的图标按钮，点击可切换侧边栏状态。通过绑定 :toggleClick 事件来触发切换侧边栏的方法，:isActive 根据侧边栏的打开状态来显示相应的样式 -->
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger> <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
<!-- 引入 Breadcrumb 组件，可能用于展示页面的面包屑导航，显示当前页面在整个网站结构中的层级路径，但此处没有传入具体属性 -->
<breadcrumb></breadcrumb> <breadcrumb></breadcrumb>
<!-- el-dropdown 组件用于创建一个下拉菜单，触发方式设置为点击（click），这里用于展示用户相关操作的下拉菜单，比如首页、退出等功能 -->
<el-dropdown class="avatar-container" trigger="click"> <el-dropdown class="avatar-container" trigger="click">
<!-- 内部的 div 作为一个容器，包裹用户头像和下拉箭头图标 -->
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<!-- 通过绑定 :src 属性展示用户头像图片，图片的源地址由变量 "avatar" 决定 -->
<img class="user-avatar" :src="avatar"> <img class="user-avatar" :src="avatar">
<!-- 使用一个向下的图标（el-icon-caret-bottom）作为下拉菜单的指示箭头 -->
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom"></i>
</div> </div>
<!-- el-dropdown-menu 组件用于定义下拉菜单的具体内容，通过 slot="dropdown" 指定它在 el-dropdown 组件中的插槽位置 -->
<el-dropdown-menu class="user-dropdown" slot="dropdown"> <el-dropdown-menu class="user-dropdown" slot="dropdown">
<!-- router-link 组件用于创建路由链接，点击可跳转到对应的路由路径（这里是首页，路径为 "/"），样式设置为行内块元素 -->
<router-link class="inlineBlock" to="/"> <router-link class="inlineBlock" to="/">
<el-dropdown-item> <el-dropdown-item>
首页 首页
</el-dropdown-item> </el-dropdown-item>
</router-link> </router-link>
<!-- 另一个 el-dropdown-item 用于展示 "退出" 操作，添加了分割线样式（divided），通过点击内部的 span 元素触发 logout 方法来执行退出登录操作 -->
<el-dropdown-item divided> <el-dropdown-item divided>
<span @click="logout" style="display:block;">退出</span> <span @click="logout" style="display:block;">退出</span>
</el-dropdown-item> </el-dropdown-item>
@ -20,27 +30,37 @@
</el-dropdown> </el-dropdown>
</el-menu> </el-menu>
</template> </template>
<script> <script>
// 从 vuex 中导入 mapGetters 辅助函数，它用于将 Vuex store 中的 getter 映射到组件的计算属性中
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
// 导入自定义的 Breadcrumb 组件，用于页面面包屑导航展示
import Breadcrumb from '@/components/Breadcrumb' import Breadcrumb from '@/components/Breadcrumb'
// 导入自定义的 Hamburger 组件，用于控制侧边栏的显示隐藏切换按钮
import Hamburger from '@/components/Hamburger' import Hamburger from '@/components/Hamburger'
export default { export default {
// 在组件中注册使用的子组件，这里注册了 Breadcrumb 和 Hamburger 组件，以便在模板中可以直接使用它们
components: { components: {
Breadcrumb, Breadcrumb,
Hamburger Hamburger
}, },
computed: { computed: {
// 使用 mapGetters 辅助函数将 Vuex store 中的'sidebar' 和 'avatar' 这两个 getter 映射到组件的计算属性中。
// 这样，在组件中就可以直接通过 this.sidebar 和 this.avatar 来访问对应的 store 中的数据了。
...mapGetters([ ...mapGetters([
'sidebar', 'sidebar',
'avatar' 'avatar'
]) ])
}, },
methods: { methods: {
// 定义一个名为 toggleSideBar 的方法，用于触发 Vuex store 中的 ToggleSideBar 这个 action。
// 通常这个 action 会在 Vuex 的相关模块中定义，用于切换侧边栏的打开或关闭状态。
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('ToggleSideBar') this.$store.dispatch('ToggleSideBar')
}, },
// 定义 logout 方法，用于执行用户退出登录操作。
// 首先通过 this.$store.dispatch 触发 Vuex store 中的 LogOut 这个 action，一般 LogOut action 会处理诸如清除用户登录状态、清除相关缓存等逻辑。
// 然后在 Promise 成功回调中（.then 部分），调用 location.reload() 方法来重新加载页面，目的是重新实例化 vue-router 对象，避免一些可能出现的路由相关的 bug。
logout() { logout() {
this.$store.dispatch('LogOut').then(() => { this.$store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug location.reload() // 为了重新实例化vue-router对象 避免bug
@ -49,46 +69,75 @@ export default {
} }
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
/* 为类名为 "navbar" 的元素设置样式，以下是具体的样式属性说明 */
.navbar { .navbar {
/* 设置元素的高度为 50px */
height: 50px; height: 50px;
/* 设置行高为 50px，使得内部文本在垂直方向上居中对齐 */
line-height: 50px; line-height: 50px;
border-radius: 0px !important; /* 覆盖默认的边框圆角设置，将其设置为 0px，使其呈现直角样式 */
border-radius: 0px!important;
/* 为类名为 "hamburger-container" 的子元素设置样式，它属于 "navbar" 元素内部的元素 */
.hamburger-container { .hamburger-container {
/* 设置行高为 58px，用于垂直方向上的布局调整 */
line-height: 58px; line-height: 58px;
/* 设置高度与父元素（navbar）保持一致，为 50px */
height: 50px; height: 50px;
/* 将元素向左浮动，使其在水平方向上靠左排列 */
float: left; float: left;
/* 设置左右内边距为 10px，用于控制内部元素与边界的间距 */
padding: 0 10px; padding: 0 10px;
} }
/* 为类名为 "screenfull" 的元素设置样式，它在 "navbar" 元素内部（从样式结构看应该是与全屏相关的功能元素，但代码中未体现其完整使用场景） */
.screenfull { .screenfull {
/* 设置元素的定位为绝对定位，以便可以精确控制其在父元素中的位置 */
position: absolute; position: absolute;
/* 设置元素距离父元素右侧 90px 的位置 */
right: 90px; right: 90px;
/* 设置元素距离父元素顶部 16px 的位置 */
top: 16px; top: 16px;
/* 设置元素的颜色为红色，可能用于特定的提示等功能 */
color: red; color: red;
} }
/* 为类名为 "avatar-container" 的元素设置样式，它同样是 "navbar" 元素内部用于包裹用户头像及下拉菜单相关内容的容器 */
.avatar-container { .avatar-container {
/* 设置高度与父元素（navbar）一致，为 50px */
height: 50px; height: 50px;
/* 将元素设置为行内块级元素，使其可以在水平方向上与其他元素并排显示，同时又能设置宽度、高度等块级元素的属性 */
display: inline-block; display: inline-block;
/* 将元素定位在父元素（navbar）的右侧，距离右侧 35px 的位置 */
position: absolute; position: absolute;
right: 35px; right: 35px;
/* 为类名为 "avatar-wrapper" 的子元素设置样式，它是 "avatar-container" 内部进一步包裹头像和图标的容器 */
.avatar-wrapper { .avatar-wrapper {
/* 设置鼠标指针样式为手型，提示用户此处可点击操作（一般用于有交互功能的元素） */
cursor: pointer; cursor: pointer;
/* 设置元素距离顶部 5px 的外边距，用于垂直方向上的位置微调 */
margin-top: 5px; margin-top: 5px;
/* 设置元素为相对定位，以便内部的绝对定位元素可以基于它来进行定位 */
position: relative; position: relative;
/* 为类名为 "user-avatar" 的子元素（即用户头像图片元素）设置样式 */
.user-avatar { .user-avatar {
/* 设置图片的宽度为 40px */
width: 40px; width: 40px;
/* 设置图片的高度为 40px */
height: 40px; height: 40px;
/* 设置图片的边框圆角为 10px，使其呈现圆角矩形的外观 */
border-radius: 10px; border-radius: 10px;
} }
/* 为类名为 "el-icon-caret-bottom" 的子元素（即下拉箭头图标元素）设置样式 */
.el-icon-caret-bottom { .el-icon-caret-bottom {
/* 设置元素为绝对定位，以便精确控制其在父元素（avatar-wrapper）中的位置 */
position: absolute; position: absolute;
/* 设置元素距离父元素右侧 -20px 的位置（负数表示向左偏移） */
right: -20px; right: -20px;
/* 设置元素距离父元素顶部 25px 的位置，用于垂直方向上的定位 */
top: 25px; top: 25px;
/* 设置图标的字体大小为 12px，调整图标大小 */
font-size: 12px; font-size: 12px;
} }
} }
} }
} }
</style> </style>

21
src/views/layout/mixin/ResizeHandler.js
Unescape View File

@ -1,38 +1,57 @@
// 从项目的 @/store 目录下导入 Vuex 的 store 实例，这个 store 通常用于管理应用中的状态数据以及处理相关的业务逻辑，例如控制侧边栏的显示隐藏、设备类型的切换等操作
import store from '@/store' import store from '@/store'
// 通过解构赋值从 document 对象中获取 body 属性，后续可能会基于这个 body 元素来获取页面相关的尺寸等信息，比如判断页面宽度是否满足移动端的条件
const { body } = document const { body } = document
// 定义一个常量 WIDTH，表示一个宽度的阈值，单位应该是像素，这里设置为 1024px，可能用于区分移动端和桌面端设备（比如页面宽度小于这个值时认为是移动端）
const WIDTH = 1024 const WIDTH = 1024
// 定义一个常量 RATIO，具体含义可能和页面尺寸判断逻辑相关，结合代码来看，可能是在判断页面宽度是否符合移动端条件时需要减去的一个值
const RATIO = 3 const RATIO = 3
export default { export default {
// watch 选项用于监听组件中的数据变化，这里监听了 $route（Vue 路由对象）的变化
watch: { watch: {
$route(route) { $route(route) {
// 判断当前设备是否为移动端（通过 this.device ==='mobile' 判断，这里的 this.device 应该是组件中的某个属性，用于标识设备类型）并且侧边栏是打开状态（this.sidebar.opened）
if (this.device === 'mobile' && this.sidebar.opened) { if (this.device === 'mobile' && this.sidebar.opened) {
// 如果满足上述条件，通过 store.dispatch 方法触发 Vuex store 中的 'CloseSideBar' 这个 action，传入一个配置对象 { withoutAnimation: false }，表示关闭侧边栏，并且关闭时是否有动画效果设置为 false（可能在对应的 action 实现中有相应的处理逻辑来根据这个配置关闭侧边栏并控制动画展示情况）
store.dispatch('CloseSideBar', { withoutAnimation: false }) store.dispatch('CloseSideBar', { withoutAnimation: false })
} }
} }
}, },
// beforeMount 生命周期钩子函数，在组件挂载到 DOM 之前被调用。这里给 window 对象添加了一个'resize' 事件监听器，当窗口大小发生变化时，会触发 this.resizeHandler 方法，用于处理窗口大小变化相关的逻辑
beforeMount() { beforeMount() {
window.addEventListener('resize', this.resizeHandler) window.addEventListener('resize', this.resizeHandler)
}, },
// mounted 生命周期钩子函数，在组件挂载到 DOM 之后被调用。这里首先调用 this.isMobile 方法来判断当前设备是否为移动端
mounted() { mounted() {
const isMobile = this.isMobile() const isMobile = this.isMobile()
if (isMobile) { if (isMobile) {
// 如果是移动端，通过 store.dispatch 方法触发 Vuex store 中的 'ToggleDevice' 这个 action，传入'mobile' 字符串参数，可能用于在 store 中更新设备类型的状态为移动端，以便后续根据这个状态进行相应的布局或功能调整
store.dispatch('ToggleDevice', 'mobile') store.dispatch('ToggleDevice', 'mobile')
// 同时触发 'CloseSideBar' 这个 action，传入 { withoutAnimation: true }，表示关闭侧边栏并且关闭过程不显示动画，用于在移动端初始加载时关闭侧边栏以适应移动端布局等情况
store.dispatch('CloseSideBar', { withoutAnimation: true }) store.dispatch('CloseSideBar', { withoutAnimation: true })
} }
}, },
methods: { methods: {
// 定义一个名为 isMobile 的方法，用于判断当前设备是否为移动端
isMobile() { isMobile() {
// 通过 body.getBoundingClientRect() 方法获取 body 元素的尺寸信息（返回一个包含元素的位置、宽度、高度等信息的 DOMRect 对象）
const rect = body.getBoundingClientRect() const rect = body.getBoundingClientRect()
// 判断页面可视区域的宽度（rect.width）减去常量 RATIO 的值是否小于定义的 WIDTH（1024px），如果小于则认为当前设备是移动端，返回 true，否则返回 false
return rect.width - RATIO < WIDTH return rect.width - RATIO < WIDTH
}, },
// 定义 resizeHandler 方法，用于处理窗口大小变化的逻辑，当窗口触发'resize' 事件时会调用这个方法
resizeHandler() { resizeHandler() {
// 判断当前页面是否处于隐藏状态（比如切换到其他标签页等情况，document.hidden 为 true 表示页面被隐藏），如果页面没有隐藏
if (!document.hidden) { if (!document.hidden) {
// 调用 this.isMobile 方法重新判断当前设备是否变为移动端
const isMobile = this.isMobile() const isMobile = this.isMobile()
store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop') // 通过 store.dispatch 方法触发 Vuex store 中的 'ToggleDevice' 这个 action，根据 isMobile 的结果传入'mobile' 或者 'desktop'，用于更新 store 中设备类型的状态，使其与当前实际设备类型保持一致
store.dispatch('ToggleDevice', isMobile? 'mobile' : 'desktop')
if (isMobile) { if (isMobile) {
// 如果当前设备变为移动端，触发 'CloseSideBar' 这个 action，传入 { withoutAnimation: true }，关闭侧边栏并且不显示动画，以适应移动端布局要求
store.dispatch('CloseSideBar', { withoutAnimation: true }) store.dispatch('CloseSideBar', { withoutAnimation: true })
} }
} }

127
src/views/login/index.vue
Unescape View File

@ -1,26 +1,36 @@
<template> <template>
<!-- 最外层的 div 作为整个登录页面内容的容器 -->
<div> <div>
<!-- 使用 el-card 组件创建一个卡片式的布局容器，用于包裹登录表单相关内容，并设置了特定的类名 -->
<el-card class="login-form-layout"> <el-card class="login-form-layout">
<!-- el-form 组件用于创建表单，以下是对其属性的设置说明 -->
<el-form autoComplete="on" <el-form autoComplete="on"
:model="loginForm" :model="loginForm"
:rules="loginRules" :rules="loginRules"
ref="loginForm" ref="loginForm"
label-position="left"> label-position="left">
<!-- div 元素用于将 SVG 图标在水平方向上居中显示 -->
<div style="text-align: center"> <div style="text-align: center">
<!-- svg-icon 组件用于展示 SVG 图标，这里展示的图标类名为 "login-mall"，并设置了宽度、高度和颜色 -->
<svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon> <svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon>
</div> </div>
<!-- h2 标题元素，展示登录页面的标题 "mall-admin-web"，并设置了类名用于样式控制 -->
<h2 class="login-title color-main">mall-admin-web</h2> <h2 class="login-title color-main">mall-admin-web</h2>
<!-- el-form-item 组件表示表单中的一个项目，这里对应 "用户名" 输入项，通过 prop 属性关联验证规则 -->
<el-form-item prop="username"> <el-form-item prop="username">
<!-- el-input 组件用于创建输入框，以下是对其属性和插槽的详细说明 -->
<el-input name="username" <el-input name="username"
type="text" type="text"
v-model="loginForm.username" v-model="loginForm.username"
autoComplete="on" autoComplete="on"
placeholder="请输入用户名"> placeholder="请输入用户名">
<!-- 使用插槽 "prefix" 在输入框前面添加一个 SVG 图标，图标类名为 "user"，并设置了类名用于样式控制 -->
<span slot="prefix"> <span slot="prefix">
<svg-icon icon-class="user" class="color-main"></svg-icon> <svg-icon icon-class="user" class="color-main"></svg-icon>
</span> </span>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- 另一个 el-form-item 组件，对应 "密码" 输入项，同样通过 prop 属性关联验证规则 -->
<el-form-item prop="password"> <el-form-item prop="password">
<el-input name="password" <el-input name="password"
:type="pwdType" :type="pwdType"
@ -28,15 +38,19 @@
v-model="loginForm.password" v-model="loginForm.password"
autoComplete="on" autoComplete="on"
placeholder="请输入密码"> placeholder="请输入密码">
<!-- 同样使用插槽 "prefix" 在输入框前面添加表示密码的 SVG 图标，图标类名为 "password"，并设置类名用于样式控制 -->
<span slot="prefix"> <span slot="prefix">
<svg-icon icon-class="password" class="color-main"></svg-icon> <svg-icon icon-class="password" class="color-main"></svg-icon>
</span> </span>
<!-- 使用插槽 "suffix" 在输入框后面添加一个可点击的 SVG 图标，点击这个图标可以切换密码的显示隐藏状态，图标类名为 "eye"，并设置类名用于样式控制 -->
<span slot="suffix" @click="showPwd"> <span slot="suffix" @click="showPwd">
<svg-icon icon-class="eye" class="color-main"></svg-icon> <svg-icon icon-class="eye" class="color-main"></svg-icon>
</span> </span>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- 又是一个 el-form-item 组件，用于放置登录和获取体验账号的按钮，并设置了底部外边距和文本居中样式 -->
<el-form-item style="margin-bottom: 60px;text-align: center"> <el-form-item style="margin-bottom: 60px;text-align: center">
<!-- el-button 组件用于创建按钮，以下是按钮的相关属性设置说明 -->
<el-button style="width: 45%" type="primary" :loading="loading" @click.native.prevent="handleLogin"> <el-button style="width: 45%" type="primary" :loading="loading" @click.native.prevent="handleLogin">
登录 登录
</el-button> </el-button>
@ -46,139 +60,202 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-card> </el-card>
<!-- img 标签用于展示一张背景图片，图片的源地址通过绑定的变量 login_center_bg 来动态设置，并设置了类名用于样式控制 -->
<img :src="login_center_bg" class="login-center-layout"> <img :src="login_center_bg" class="login-center-layout">
<!-- el-dialog 组件用于创建一个对话框，以下是对其属性的详细说明 -->
<el-dialog <el-dialog
title="公众号二维码" title="公众号二维码"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
:show-close="false" :show-close="false"
:center="true" :center="true"
width="30%"> width="30%">
<!-- div 元素用于在对话框内放置相关内容，并将文本居中显示 -->
<div style="text-align: center"> <div style="text-align: center">
<!-- span 元素用于展示提示文字，通过设置不同的类名来控制文字的样式，如字体大小、颜色等，提示用户关注公众号获取体验账号的操作流程 -->
<span class="font-title-large"><span class="color-main font-extra-large">关注公众号</span>回复<span class="color-main font-extra-large">体验</span>获取体验账号</span> <span class="font-title-large"><span class="color-main font-extra-large">关注公众号</span>回复<span class="color-main font-extra-large">体验</span>获取体验账号</span>
<br> <br>
<!-- 再次使用 img 标签在对话框内展示公众号的二维码图片，设置了图片的宽度、高度以及顶部外边距 -->
<img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg" width="160" height="160" style="margin-top: 10px"> <img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg" width="160" height="160" style="margin-top: 10px">
</div> </div>
<!-- 使用插槽 "footer" 在对话框底部定义按钮区域，这里只有一个确定按钮 -->
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogConfirm">确定</el-button> <el-button type="primary" @click="dialogConfirm">确定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import {isvalidUsername} from '@/utils/validate'; // 从 @/utils/validate 文件中导入 isvalidUsername 函数，该函数可能用于验证用户名是否符合特定规则
import {setSupport,getSupport,setCookie,getCookie} from '@/utils/support'; import {isvalidUsername} from '@/utils/validate';
import login_center_bg from '@/assets/images/login_center_bg.png' // 从 @/utils/support 文件中导入多个函数，分别用于设置和获取支持相关的状态以及设置和获取 Cookie
import {setSupport, getSupport, setCookie, getCookie} from '@/utils/support';
// 导入登录页面中心背景图片资源，用于在页面中展示
import login_center_bg from '@/assets/images/login_center_bg.png'
export default { export default {
name: 'login', name: 'login',
data() { data() {
// 定义一个名为 validateUsername 的函数，作为用户名输入框的验证规则函数
const validateUsername = (rule, value, callback) => { const validateUsername = (rule, value, callback) => {
// 如果传入的用户名不符合验证规则（通过调用 isvalidUsername 函数判断）
if (!isvalidUsername(value)) { if (!isvalidUsername(value)) {
// 则通过回调函数 callback 返回一个 Error 对象，提示用户输入正确的用户名，这样在表单验证时会显示相应错误提示
callback(new Error('请输入正确的用户名')) callback(new Error('请输入正确的用户名'))
} else { } else {
// 如果用户名验证通过，则直接调用回调函数，不传递错误信息，表示验证成功
callback() callback()
} }
}; };
// 定义一个名为 validatePass 的函数，作为密码输入框的验证规则函数
const validatePass = (rule, value, callback) => { const validatePass = (rule, value, callback) => {
// 如果密码长度小于 3 位
if (value.length < 3) { if (value.length < 3) {
// 通过回调函数 callback 返回一个 Error 对象，提示密码不能小于 3 位，在表单验证时会显示此错误提示
callback(new Error('密码不能小于3位')) callback(new Error('密码不能小于3位'))
} else { } else {
// 如果密码长度符合要求，则调用回调函数，表示验证成功
callback() callback()
} }
}; };
return { return {
// loginForm 对象用于双向绑定表单中的输入数据，包含用户名和密码两个属性，初始值都为空字符串
loginForm: { loginForm: {
username: '', username: '',
password: '', password: '',
}, },
// loginRules 对象用于定义表单中各个输入项的验证规则
loginRules: { loginRules: {
// 用户名输入项的验证规则数组，这里只有一条规则，要求该输入项必填，触发验证的时机是失去焦点（blur），验证函数为 validateUsername
username: [{required: true, trigger: 'blur', validator: validateUsername}], username: [{required: true, trigger: 'blur', validator: validateUsername}],
// 密码输入项的验证规则数组，同样只有一条规则，要求必填，触发验证时机是失去焦点，验证函数为 validatePass
password: [{required: true, trigger: 'blur', validator: validatePass}] password: [{required: true, trigger: 'blur', validator: validatePass}]
}, },
// loading 变量用于控制登录按钮的加载状态（比如显示加载动画等），初始值为 false，表示未处于加载状态
loading: false, loading: false,
// pwdType 变量用于控制密码输入框的类型（显示为密码形式还是明文形式），初始值为 'password'，表示密码隐藏
pwdType: 'password', pwdType: 'password',
// 绑定导入的登录中心背景图片资源，用于在页面中正确显示背景图片
login_center_bg, login_center_bg,
dialogVisible:false, // dialogVisible 变量用于控制公众号二维码对话框的显示与隐藏，初始值为 false，表示对话框默认不显示
supportDialogVisible:false dialogVisible: false,
// supportDialogVisible 变量（在当前代码中未看到使用，但可能用于控制其他相关对话框的显示隐藏），初始值为 false
supportDialogVisible: false
} }
}, },
created() { created() {
// 在组件创建时，尝试从 Cookie 中获取用户名信息，并赋值给 loginForm.username
this.loginForm.username = getCookie("username"); this.loginForm.username = getCookie("username");
// 同样尝试从 Cookie 中获取密码信息，并赋值给 loginForm.password
this.loginForm.password = getCookie("password"); this.loginForm.password = getCookie("password");
if(this.loginForm.username === undefined||this.loginForm.username==null||this.loginForm.username===''){ // 如果获取到的用户名信息是 undefined、null 或者空字符串
if (this.loginForm.username === undefined || this.loginForm.username == null || this.loginForm.username === '') {
// 则将用户名默认设置为 'admin'
this.loginForm.username = 'admin'; this.loginForm.username = 'admin';
} }
if(this.loginForm.password === undefined||this.loginForm.password==null){ // 如果获取到的密码信息是 undefined 或者 null
if (this.loginForm.password === undefined || this.loginForm.password == null) {
// 则将密码默认设置为空字符串
this.loginForm.password = ''; this.loginForm.password = '';
} }
}, },
methods: { methods: {
showPwd() { showPwd() {
// 切换密码输入框的显示类型，如果当前是密码形式（pwdType 为 'password'）
if (this.pwdType === 'password') { if (this.pwdType === 'password') {
// 则将其设置为空字符串，即显示明文
this.pwdType = '' this.pwdType = ''
} else { } else {
// 否则将其设置回 'password'，恢复为密码隐藏形式
this.pwdType = 'password' this.pwdType = 'password'
} }
}, },
handleLogin() { handleLogin() {
// 通过引用 loginForm 调用表单的验证方法，传入一个回调函数，根据验证结果进行后续操作
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate(valid => {
if (valid) { if (valid) {
// let isSupport = getSupport(); // let isSupport = getSupport();
// if(isSupport===undefined||isSupport==null){ // if (isSupport === undefined || isSupport == null) {
// this.dialogVisible =true; // this.dialogVisible = true;
// return; // return;
// } // }
// 如果表单验证通过，将 loading 状态设置为 true，表示登录操作正在进行，可能会显示加载动画等提示
this.loading = true; this.loading = true;
// 通过 $store.dispatch 方法触发名为 'Login' 的 action，并传入 loginForm 数据（包含用户名和密码），处理登录相关逻辑
this.$store.dispatch('Login', this.loginForm).then(() => { this.$store.dispatch('Login', this.loginForm).then(() => {
// 登录成功后，将 loading 状态设置回 false，隐藏加载动画
this.loading = false; this.loading = false;
setCookie("username",this.loginForm.username,15); // 将用户名信息保存到 Cookie 中，设置有效期为 15 天（这里的 15 具体含义可能与业务相关的时间单位对应）
setCookie("password",this.loginForm.password,15); setCookie("username", this.loginForm.username, 15);
// 同样将密码信息保存到 Cookie 中，有效期也是 15 天
setCookie("password", this.loginForm.password, 15);
// 通过 $router.push 方法进行页面跳转，跳转到应用的首页（路径为 '/'）
this.$router.push({path: '/'}) this.$router.push({path: '/'})
}).catch(() => { }).catch(() => {
// 如果登录过程出现错误，将 loading 状态设置回 false，隐藏加载动画
this.loading = false this.loading = false
}) })
} else { } else {
// 如果表单验证不通过，在控制台打印提示信息，并返回 false，阻止后续操作
console.log('参数验证不合法！'); console.log('参数验证不合法！');
return false return false
} }
}) })
}, },
handleTry(){ handleTry() {
this.dialogVisible =true // 点击获取体验账号按钮时，将 dialogVisible 设置为 true，显示公众号二维码对话框
this.dialogVisible = true
}, },
dialogConfirm(){ dialogConfirm() {
this.dialogVisible =false; // 点击对话框中的确定按钮时，将 dialogVisible 设置为 false，隐藏对话框
this.dialogVisible = false;
// 调用 setSupport 函数，传入 true，可能用于设置某种支持相关的状态（具体功能需看 setSupport 函数实现）
setSupport(true); setSupport(true);
}, },
dialogCancel(){ dialogCancel() {
// 点击对话框中的取消按钮（当前代码中未看到调用此方法的地方，但功能应该是隐藏对话框）时，将 dialogVisible 设置为 false，隐藏对话框
this.dialogVisible = false; this.dialogVisible = false;
// 调用 setSupport 函数，传入 false，可能用于设置某种支持相关的状态（具体功能需看 setSupport 函数实现）
setSupport(false); setSupport(false);
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.login-form-layout { /* 为类名为 "login-form-layout" 的元素设置样式，以下是具体样式属性的说明 */
.login-form-layout {
/* 将元素定位设置为绝对定位，使其可以相对于最近的已定位祖先元素进行定位 */
position: absolute; position: absolute;
/* 使其在水平方向上相对于父元素左对齐 */
left: 0; left: 0;
/* 使其在水平方向上相对于父元素右对齐 */
right: 0; right: 0;
/* 设置元素的宽度为 360px */
width: 360px; width: 360px;
/* 设置元素在垂直方向上居中，通过上下外边距 auto 实现 */
margin: 140px auto; margin: 140px auto;
/* 设置元素的上边框样式，宽度为 10px，颜色为 #409EFF */
border-top: 10px solid #409EFF; border-top: 10px solid #409EFF;
} }
.login-title { /* 为类名为 "login-title" 的元素设置样式，这里只是简单地将文本在元素内居中显示 */
.login-title {
text-align: center; text-align: center;
} }
.login-center-layout { /* 为类名为 "login-center-layout" 的元素设置样式，以下是具体样式属性的说明 */
.login-center-layout {
/* 设置元素的背景颜色为 #409EFF */
background: #409EFF; background: #409EFF;
/* 设置元素的宽度自动适应内容，不会超出父元素宽度 */
width: auto; width: auto;
/* 设置元素的高度自动适应内容，不会超出父元素高度 */
height: auto; height: auto;
/* 设置元素的最大宽度为 100%，即不会超过父元素的宽度 */
max-width: 100%; max-width: 100%;
/* 设置元素的最大高度为 100%，即不会超过父元素的高度 */
max-height: 100%; max-height: 100%;
/* 设置元素的顶部外边距为 200px */
margin-top: 200px; margin-top: 200px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save