admin/jdcProject_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 优化文档和注释中的单词大小写和语义

Browse Source
This commit is contained in:
pany 2022-07-01 16:25:51 +08:00
parent 8378cb501f
commit f4dc67c4ec
30 changed files with 74 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore
View File

@ -1,4 +1,4 @@
# eslint 会忽略的文件
# Eslint 会忽略的文件
.DS_Store
node_modules

6
.eslintrc.js
View File

@ -33,7 +33,7 @@ module.exports = {
}
},
rules: {
// ts
// TS
"@typescript-eslint/no-explicit-any": "off",
"no-debugger": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
@ -55,7 +55,7 @@ module.exports = {
varsIgnorePattern: "^_"
}
],
// vue
// Vue
"vue/no-v-html": "off",
"vue/require-default-prop": "off",
"vue/require-explicit-emits": "off",
@ -72,7 +72,7 @@ module.exports = {
math: "always"
}
],
// prettier
// Prettier
"prettier/prettier": [
"error",
{

4
.gitignore vendored
View File

@ -1,11 +1,11 @@
# git 会忽略的文件
# Git 会忽略的文件
.DS_Store
node_modules
dist
dist-ssr
# local env files
# Local env files
*.local
# Logs

2
.prettierignore
View File

@ -1,4 +1,4 @@
# prettier 会忽略的文件
# Prettier 会忽略的文件
.DS_Store
node_modules

4
README.md
View File

@ -2,9 +2,9 @@
一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element-Plus、Pinia 和 Vite 等主流技术.
模板代码是从 [v3-admin](https://github.com/un-pany/v3-admin) 迁移而来，脚手架从 vue-cli 5.x 切换到了 vite 2.9.x，并作了一些繁琐的适配.
模板代码是从 [v3-admin](https://github.com/un-pany/v3-admin) 迁移而来，脚手架从 Vue-Cli 5.x 切换到了 Vite 2.9.x，并作了一些繁琐的适配.
更推荐大家使用该 vite 版本！以后的重心也会从 [v3-admin](https://github.com/un-pany/v3-admin) 偏向本仓库.
更推荐大家使用该 Vite 版本！以后的重心也会从 [v3-admin](https://github.com/un-pany/v3-admin) 偏向本仓库.
- Electron 桌面版: [v3-electron-vite](https://github.com/un-pany/v3-electron-vite)

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "v3-admin-vite",
"version": "3.1.9",
"version": "3.1.10",
"description": "一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element-Plus、Pinia 和 Vite 等主流技术.",
"author": {
"name": "pany",

8
prettier.config.js
View File

@ -2,9 +2,9 @@
module.exports = {
/** 每一行的宽度 */
printWidth: 120,
/** tab 健的空格数 */
/** Tab 键的空格数 */
tabWidth: 2,
/** 在对象中的括号之间用空格来间隔 */
/** 在对象中的括号之间是否用空格来间隔 */
bracketSpacing: true,
/** 箭头函数的参数无论有几个，都要括号包裹 */
arrowParens: "always",
@ -14,8 +14,8 @@ module.exports = {
singleQuote: false,
/** 对象或者数组的最后一个元素后面不要加逗号 */
trailingComma: "none",
/** 不加分号 */
/** 是否加分号 */
semi: false,
/** 不使用 tab 格式化 */
/** 是否使用 Tab 格式化 */
useTabs: false
}

4
src/App.vue
View File

@ -2,8 +2,8 @@
import { useAppStore } from "@/store/modules/app"
import zhCn from "element-plus/lib/locale/lang/zh-cn"
useAppStore().initTheme() // 初始化 theme
const locale = zhCn // element-plus 设置为中文
useAppStore().initTheme() // 初始化主题
const locale = zhCn // 将 Element-Plus 的语言设置为中文
</script>
<template>

12
src/config/layout.ts
View File

@ -1,16 +1,16 @@
/** 布局配置 */
interface ILayoutSettings {
/** 控制 settings panel 显示 */
/** 是否显示 Settings Panel */
showSettings: boolean
/** 控制 tagsview 显示 */
/** 是否显示标签栏 */
showTagsView: boolean
/** 控制 siderbar logo 显示 */
/** 是否显示侧边栏 Logo */
showSidebarLogo: boolean
/** 如果为真，将固定 header */
/** 是否固定 Header */
fixedHeader: boolean
/** 控制 换肤按钮 显示 */
/** 是否显示切换主题按钮 */
showThemeSwitch: boolean
/** 控制 全屏按钮 显示 */
/** 是否显示全屏按钮 */
showScreenfull: boolean
}

2
src/directives/permission/index.ts
View File

@ -15,7 +15,7 @@ export const permission: Directive = {
el.style.display = "none"
}
} else {
throw new Error("need roles! Like v-permission=\"['admin','editor']\"")
throw new Error(`need roles! Like v-permission="['admin','editor']"`)
}
}
}

2
src/icons/index.ts
View File

@ -1,5 +1,5 @@
import { createApp } from "vue"
import SvgIcon from "@/components/SvgIcon/index.vue" // svg component
import SvgIcon from "@/components/SvgIcon/index.vue" // Svg Component
import "virtual:svg-icons-register"
export default (app: ReturnType<typeof createApp>) => {

4
src/layout/components/Settings/index.vue
View File

@ -64,7 +64,7 @@ watch(
<div>
<h3 class="drawer-title">系统布局配置</h3>
<div class="drawer-item">
<span>显示 Tags-View</span>
<span>显示标签栏</span>
<el-switch v-model="state.showTagsView" class="drawer-switch" />
</div>
<div class="drawer-item">
@ -76,7 +76,7 @@ watch(
<el-switch v-model="state.fixedHeader" class="drawer-switch" />
</div>
<div class="drawer-item">
<span>显示换肤按钮</span>
<span>显示切换主题按钮</span>
<el-switch v-model="state.showThemeSwitch" class="drawer-switch" />
</div>
<div class="drawer-item">

2
src/layout/components/Sidebar/index.vue
View File

@ -64,7 +64,7 @@ const isCollapse = computed(() => {
<style lang="scss">
.sidebar-container {
// 重置当前页面的 element-plus css, ，注意，虽然没有加 scoped 标识，但是被该页面的 sidebar-container 类名包裹，所以不会影响其他页面
// 重置当前页面的 Element-Plus CSS, ，注意，虽然没有加 scoped 标识，但是被该页面的 sidebar-container 类名包裹，所以不会影响其他页面
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}

2
src/layout/components/TagsView/index.vue
View File

@ -20,7 +20,7 @@ const toLastView = (visitedViews: ITagView[], view: ITagView) => {
console.warn(err)
})
} else {
// 如果没有 tags-view，请默认重定向到主页，如果你需要，可以自行调整它
// 如果没有 TagsView，请默认重定向到主页，如果你需要，可以自行调整它
if (view.name === "Dashboard") {
// 重新加载主页
router.push({ path: "/redirect" + view.fullPath }).catch((err) => {

2
src/layout/useResize.ts
View File

@ -2,7 +2,7 @@ import { computed, watch } from "vue"
import { useRoute } from "vue-router"
import { useAppStore, DeviceType } from "@/store/modules/app"
/** 参考 Bootstrap 的响应式设计 width = 992 */
/** 参考 Bootstrap 的响应式设计 WIDTH = 992 */
const WIDTH = 992
/** 根据大小变化重新布局 */

4
src/main.ts
View File

@ -14,9 +14,9 @@ import "element-plus/theme-chalk/dark/css-vars.css"
import "@/styles/index.scss"
const app = createApp(App)
/** element-plus 组件完整引入 */
/** Element-Plus 组件完整引入 */
app.use(ElementPlus)
/** 加载全局 svg */
/** 加载全局 SVG */
loadSvg(app)
/** 自定义指令 */
Object.keys(directives).forEach((key) => {

6
src/router/index.ts
View File

@ -135,8 +135,8 @@ export const constantRoutes: Array<RouteRecordRaw> = [
/**
* 动态路由
* 用来放置有权限（roles 属性）的路由
* 必须带有 name 属性
* 用来放置有权限 (Roles 属性) 的路由
* 必须带有 Name 属性
*/
export const asyncRoutes: Array<RouteRecordRaw> = [
{
@ -208,7 +208,7 @@ const router = createRouter({
/** 重置路由 */
export function resetRouter() {
// 注意：所有动态路由路由必须带有 name 属性，否则可能会不能完全重置干净
// 注意：所有动态路由路由必须带有 Name 属性，否则可能会不能完全重置干净
try {
router.getRoutes().forEach((route) => {
const { name, meta } = route

10
src/router/permission.ts
View File

@ -18,7 +18,7 @@ router.beforeEach(async (to: RouteLocationNormalized, _: RouteLocationNormalized
// 判断该用户是否登录
if (getToken()) {
if (to.path === "/login") {
// 如果登录，并准备进入 login 页面，则重定向到主页
// 如果登录，并准备进入 Login 页面，则重定向到主页
next({ path: "/" })
NProgress.done()
} else {
@ -29,14 +29,14 @@ router.beforeEach(async (to: RouteLocationNormalized, _: RouteLocationNormalized
// 注意：角色必须是一个数组！ 例如: ['admin'] 或 ['developer', 'editor']
await userStore.getInfo()
const roles = userStore.roles
// 根据角色生成可访问的 routes（可访问路由 = 常驻路由 + 有访问权限的动态路由）
// 根据角色生成可访问的 Routes（可访问路由 = 常驻路由 + 有访问权限的动态路由）
permissionStore.setRoutes(roles)
} else {
// 没有开启动态路由功能，则启用默认角色
userStore.setRoles(asyncRouteSettings.defaultRoles)
permissionStore.setRoutes(asyncRouteSettings.defaultRoles)
}
// 将'有访问权限的动态路由' 添加到 router 中
// 将'有访问权限的动态路由' 添加到 Router 中
permissionStore.dynamicRoutes.forEach((route) => {
router.addRoute(route)
})
@ -44,7 +44,7 @@ router.beforeEach(async (to: RouteLocationNormalized, _: RouteLocationNormalized
// 设置 replace: true, 因此导航将不会留下历史记录
next({ ...to, replace: true })
} catch (err: any) {
// 过程中发生任何错误，都直接重置 token，并重定向到登录页面
// 过程中发生任何错误，都直接重置 Token，并重定向到登录页面
userStore.resetToken()
ElMessage.error(err.message || "路由守卫过程发生错误")
next("/login")
@ -55,7 +55,7 @@ router.beforeEach(async (to: RouteLocationNormalized, _: RouteLocationNormalized
}
}
} else {
// 如果没有 token
// 如果没有 Token
if (whiteList.indexOf(to.path) !== -1) {
// 如果在免登录的白名单中，则直接进入
next()

2
src/store/modules/app.ts
View File

@ -55,7 +55,7 @@ export const useAppStore = defineStore({
this.activeThemeName = this.themeList.find((theme) => theme.name === activeThemeName)
? activeThemeName
: this.themeList[0].name
// 应用到 dom
// 应用到 Dom
document.documentElement.className = this.activeThemeName
// 持久化
setActiveThemeName(this.activeThemeName)

2
src/store/modules/user.ts
View File

@ -74,7 +74,7 @@ export const useUserStore = defineStore({
this.roles = []
resetRouter()
},
/** 重置 token */
/** 重置 Token */
resetToken() {
removeToken()
this.token = ""

4
src/styles/index.scss
View File

@ -1,6 +1,6 @@
// 全局 css 变量
// 全局 CSS 变量
@import "variables.css";
// transition
// Transition
@import "./transition.scss";
// 注册主题
@import "./theme/register.scss";

8
src/styles/theme/theme.scss
View File

@ -42,7 +42,7 @@
}
}
// tags-view
// TagsView
.tags-view-container {
background-color: $theme-bg-color !important;
border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
@ -73,7 +73,7 @@
}
}
/** app-main 主要写 view 页面的黑暗样式 */
/** AppMain 主要写 View 页面的黑暗样式 */
.app-main {
// 指令权限页面 /permission/directive
@ -82,7 +82,7 @@
}
}
/** login 页面 */
/** Login 页面 */
.login-container {
background-color: $theme-bg-color;
@ -92,7 +92,7 @@
}
}
/** element-plus */
/** Element-Plus */
// 侧边栏的 item 的 popper
.el-popper {

2
src/styles/variables.css
View File

@ -1,4 +1,4 @@
/** 全局 css 变量，这种变量不仅可以在 css 和 scss 中使用，还可以导入到 js 中使用 */
/** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
:root {
/** 全局背景色 */

2
src/utils/cookies.ts
View File

@ -1,4 +1,4 @@
/** cookies 封装 */
/** 统一处理 Cookie */
import Keys from "@/constant/key"
import Cookies from "js-cookie"

2
src/utils/index.ts
View File

@ -9,7 +9,7 @@ export const formatDateTime = (time: any) => {
return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
}
/** 将全局 css 导入 js 中使用 */
/** 将全局 CSS 导入 JS 中使用 */
export const getCssVariableValue = (cssVariableName: string) => {
let cssVariableValue = ""
try {

16
src/utils/service.ts
View File

@ -6,7 +6,7 @@ import { getToken } from "@/utils/cookies"
/** 创建请求实例 */
function createService() {
// 创建一个 axios 实例
// 创建一个 Axios 实例
const service = axios.create()
// 请求拦截
service.interceptors.request.use(
@ -17,11 +17,11 @@ function createService() {
// 响应拦截（可根据具体业务作出相应的调整）
service.interceptors.response.use(
(response) => {
// apiData 是 api 返回的数据
// apiData 是 API 返回的数据
const apiData = response.data as any
// 这个 code 是和后端约定的业务 code
// 这个 Code 是和后端约定的业务 Code
const code = apiData.code
// 如果没有 code, 代表这不是项目后端开发的 api
// 如果没有 Code, 代表这不是项目后端开发的 API
if (code === undefined) {
ElMessage.error("非本系统的接口")
return Promise.reject(new Error("非本系统的接口"))
@ -34,14 +34,14 @@ function createService() {
// code === 20000 代表没有错误
return apiData
default:
// 不是正确的 code
// 不是正确的 Code
ElMessage.error(apiData.msg || "Error")
return Promise.reject(new Error("Error"))
}
}
},
(error) => {
// status 是 HTTP 状态码
// Status 是 HTTP 状态码
const status = get(error, "response.status")
switch (status) {
case 400:
@ -51,7 +51,7 @@ function createService() {
error.message = "未授权，请登录"
break
case 403:
// token 过期时，直接退出登录并强制刷新页面（会重定向到登录页）
// Token 过期时，直接退出登录并强制刷新页面（会重定向到登录页）
useUserStoreHook().logout()
location.reload()
break
@ -94,7 +94,7 @@ function createRequestFunction(service: AxiosInstance) {
return function (config: AxiosRequestConfig) {
const configDefault = {
headers: {
// 携带 token
// 携带 Token
"X-Access-Token": getToken(),
"Content-Type": get(config, "headers.Content-Type", "application/json")
},

2
src/views/login/index.vue
View File

@ -18,7 +18,7 @@ const router = useRouter()
const loginFormDom = ref<any>()
const state = reactive({
/** 登录按钮 loading */
/** 登录按钮 Loading */
loading: false,
/** 验证码图片 URL */
codeUrl: "",

4
src/views/permission/directive.vue
View File

@ -45,7 +45,7 @@ const state = reactive({
</div>
<div :key="'checkPermission' + state.key" style="margin-top: 60px">
<el-tag type="info" size="large">
在某些情况下，不适合使用 v-permission。例如：element-plus 的 el-tab 或 el-table-column 以及其它动态渲染 dom
在某些情况下，不适合使用 v-permission。例如: Element-Plus 的 el-tab 或 el-table-column 以及其它动态渲染 dom
的场景。你只能通过手动设置 v-if 来实现。
</el-tag>
<el-tabs type="border-card" style="width: 550px; margin-top: 60px">
@ -53,12 +53,10 @@ const state = reactive({
admin 可以看见这个
<el-tag class="permission-sourceCode" type="info"> v-if="checkPermission(['admin'])" </el-tag>
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['editor'])" label="editor">
editor 可以看见这个
<el-tag class="permission-sourceCode" type="info"> v-if="checkPermission(['editor'])" </el-tag>
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin', 'editor'])" label="admin 和 editor">
两者 admin 和 editor 都可以看见这个
<el-tag class="permission-sourceCode" type="info"> v-if="checkPermission(['admin', 'editor'])" </el-tag>

4
tsconfig.json
View File

@ -5,7 +5,7 @@
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
/** ts 严格模式 */
/** TS 严格模式 */
"strict": true,
"jsx": "preserve",
"importHelpers": true,
@ -24,7 +24,7 @@
"types": [
"node",
"vite/client",
/** element-plus 的 volar 插件支持 */
/** Element-Plus 的 Volar 插件支持 */
"element-plus/global"
],
/** baseUrl 用来告诉编译器到哪里去查找模块，使用非相对模块时必须配置此项 */

24
vite.config.ts
View File

@ -7,7 +7,7 @@ import Unocss from "unocss/vite"
/** 配置项文档：https://vitejs.dev/config */
export default (): UserConfigExport => {
return {
/** build 打包时根据实际情况修改 base */
/** 打包时根据实际情况修改 base */
base: "./",
resolve: {
alias: {
@ -16,9 +16,9 @@ export default (): UserConfigExport => {
}
},
server: {
/** 是否开启 https */
/** 是否开启 HTTPS */
https: false,
/** host 设置为 true 才可以使用 network 的形式，以 ip 访问项目 */
/** 设置 host: true 才可以使用 Network 的形式，以 IP 访问项目 */
host: true, // host: "0.0.0.0"
/** 端口号 */
port: 3333,
@ -43,9 +43,9 @@ export default (): UserConfigExport => {
brotliSize: false,
/** 消除打包大小超过 500kb 警告 */
chunkSizeWarningLimit: 2000,
/** vite 2.6.x 以上需要配置 minify: terser，terserOptions 才能生效 */
/** Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效 */
minify: "terser",
/** 在 build 代码时移除 console.log、debugger 和 注释 */
/** 在打包代码时移除 console.log、debugger 和 注释 */
terserOptions: {
compress: {
drop_console: false,
@ -60,22 +60,22 @@ export default (): UserConfigExport => {
/** 打包后静态资源目录 */
assetsDir: "static"
},
/** vite 插件 */
/** Vite 插件 */
plugins: [
vue(),
/** svg */
/** SVG */
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), "src/icons/svg")],
symbolId: "icon-[dir]-[name]"
}),
/** unocss */
/** Unocss */
Unocss()
/** 自动按需引入（已更改为完整引入，所以注释了） */
/** 自动按需引入 (已更改为完整引入，所以注释了) */
// AutoImport({
// dts: "./types/auto-imports.d.ts",
// /** 自动按需导入 element-plus 相关函数，比如 ElMessage */
// /** 自动按需导入 Element-Plus 相关函数，比如 ElMessage */
// resolvers: [ElementPlusResolver()],
// /** 根据自动按需导入的相关 api，生成 .eslintrc-auto-import.json 文件供 eslint 识别 */
// /** 根据自动按需导入的相关 API，生成 .eslintrc-auto-import.json 文件供 Eslint 识别 */
// eslintrc: {
// enabled: true, // 默认 false
// filepath: "./types/.eslintrc-auto-import.json", // 默认 "./.eslintrc-auto-import.json"
@ -84,7 +84,7 @@ export default (): UserConfigExport => {
// }),
// Components({
// dts: "./types/components.d.ts",
// /** 自动按需导入 element-plus 组件 */
// /** 自动按需导入 Element-Plus 组件 */
// resolvers: [ElementPlusResolver()]
// })
]