Template
1
0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-20 10:59:21 +08:00

docs: 优化注释

This commit is contained in:
pany 2024-11-19 20:14:23 +08:00
parent f3645cfdca
commit 226cdd3d1f
40 changed files with 112 additions and 118 deletions

View File

@ -1,8 +1,8 @@
{
"recommendations": [
"vue.volar",
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint",
"vue.volar",
"antfu.unocss",
"vitest.explorer",
"wiensss.region-highlighter"

View File

@ -1,4 +1,5 @@
{
// Use workspace TypeScript version
"typescript.tsdk": "node_modules/typescript/lib",
// Disable the default formatter, use eslint instead

View File

@ -4,7 +4,9 @@
"body": [
"<script lang=\"ts\" setup></script>\n",
"<template>",
"\t<div class=\"app-container\"></div>",
"\t<div class=\"app-container\">",
"\t\t...",
"\t</div>",
"</template>\n",
"<style lang=\"scss\" scoped></style>",
"$1"

View File

@ -40,7 +40,7 @@ China repository: [Gitee](https://gitee.com/un-pany/v3-admin-vite)
- **Vite**Really fast
- **Vue Router**router
- **TypeScript**JavaScript With Syntax For Types
- **PNPM**Faster, disk space saving package management tool
- **pnpm**Faster, disk space saving package management tool
- **Scss**Consistent with Element Plus
- **CSS variable**Mainly controls the layout and color of the item
- **ESlint**Code verification, Code formatting

View File

@ -40,7 +40,7 @@ V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案,
- **Vite**:真的很快
- **Vue Router**:路由路由
- **TypeScript**JavaScript 语言的超集
- **PNPM**:更快速的,节省磁盘空间的包管理工具
- **pnpm**:更快速的,节省磁盘空间的包管理工具
- **Scss**:和 Element Plus 保持一致
- **CSS 变量**:主要控制项目的布局和颜色
- **ESlint**:代码校验与格式化

View File

@ -1,4 +1,4 @@
/** 白屏阶段会执行的 CSS 加载动画 */
/* 白屏阶段会执行的 CSS 加载动画 */
#app-loading {
position: relative;

View File

@ -7,12 +7,12 @@ import zhCn from "element-plus/es/locale/lang/zh-cn" // Element Plus 中文包
const { initTheme } = useTheme()
const { initGreyAndColorWeakness } = useGreyAndColorWeakness()
/** 初始化主题 */
//
initTheme()
/** 初始化灰色模式和色弱模式 */
//
initGreyAndColorWeakness()
/** 作者小心思 */
//
ElNotification({
title: "Hello",
type: "success",

View File

@ -12,8 +12,7 @@ export const notifyData: ListItem[] = [
avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
title: "V3 Admin Vite 上线啦",
datetime: "一年前",
description:
"一个免费开源的中后台管理系统基础解决方案,基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术"
description: "一个免费开源的中后台管理系统基础解决方案,基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术"
},
{
avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",

View File

@ -15,9 +15,7 @@ interface DataItem {
}
/** 角标当前值 */
const badgeValue = computed(() => {
return data.value.reduce((sum, item) => sum + item.list.length, 0)
})
const badgeValue = computed(() => data.value.reduce((sum, item) => sum + item.list.length, 0))
/** 角标最大值 */
const badgeMax = 99
/** 面板宽度 */

View File

@ -40,7 +40,8 @@ function getScrollTop(index: number) {
const currentInstance = instance?.proxy?.$refs[`resultItemRef${index}`] as HTMLDivElement[]
if (!currentInstance) return 0
const currentRef = currentInstance[0]
const scrollTop = currentRef.offsetTop + 128 // 128 = result-item 56 + 56 = 112 margin8 + 8 = 16
// 128 = result-item 56 + 56 = 112 margin8 + 8 = 16
const scrollTop = currentRef.offsetTop + 128
return scrollTop > scrollbarHeight.value ? scrollTop - scrollbarHeight.value : 0
}

View File

@ -36,11 +36,7 @@ function handleChangeTheme({ clientX, clientY }: MouseEvent, themeName: ThemeNam
v-for="(theme, index) in themeList"
:key="index"
:disabled="activeThemeName === theme.name"
@click="
(e: MouseEvent) => {
handleChangeTheme(e, theme.name)
}
"
@click="(e: MouseEvent) => handleChangeTheme(e, theme.name)"
>
<span>{{ theme.title }}</span>
</el-dropdown-item>

View File

@ -9,7 +9,6 @@ const props = withDefaults(defineProps<Props>(), {
isActive: false
})
/** Vue 3.3+ defineEmits 语法 */
const emit = defineEmits<{
toggleClick: []
}>()

View File

@ -10,7 +10,7 @@ import SelectLayoutMode from "./SelectLayoutMode.vue"
const { isLeft } = useLayoutMode()
const settingsStore = useSettingsStore()
/** 使用 storeToRefs 将提取的属性保持其响应性 */
// 使 storeToRefs
const {
showTagsView,
showLogo,
@ -42,7 +42,7 @@ const switchSettings = {
"显示色弱模式": showColorWeakness
}
/** 非左侧模式时Header 都是 fixed 布局 */
// Header fixed
watchEffect(() => {
!isLeft.value && (fixedHeader.value = true)
})

View File

@ -43,10 +43,8 @@ const sidebarMenuHoverBgColor = computed(() => {
const tipLineWidth = computed(() => {
return !isTop.value ? "2px" : "0px"
})
//
const hiddenScrollbarVerticalBar = computed(() => {
return isTop.value ? "none" : "block"
})
/** 当为顶部模式时隐藏垂直滚动条 */
const hiddenScrollbarVerticalBar = computed(() => isTop.value ? "none" : "block")
</script>
<template>

View File

@ -154,7 +154,7 @@ watch(visible, (value) => {
initTags()
/** 监听路由变化 */
//
listenerRouteChange((route) => {
addTags(route)
}, true)

View File

@ -12,7 +12,7 @@ import LeftMode from "./LeftMode.vue"
import LeftTopMode from "./LeftTopMode.vue"
import TopMode from "./TopMode.vue"
/** Layout 布局响应式 */
// Layout
useResize()
const { setWatermark, clearWatermark } = useWatermark()
@ -29,7 +29,7 @@ watchEffect(() => {
})
// #endregion
/** 开启或关闭系统水印 */
//
watchEffect(() => {
showWatermark.value ? setWatermark(import.meta.env.VITE_APP_TITLE) : clearWatermark()
})

View File

@ -19,11 +19,11 @@ import "@/styles/index.scss"
const app = createApp(App)
/** 加载插件 */
// 加载插件
loadPlugins(app)
/** 加载全局 SVG */
// 加载全局 SVG
loadSvg(app)
/** 加载自定义指令 */
// 加载自定义指令
loadDirectives(app)
app.use(pinia).use(router)

View File

@ -2,7 +2,7 @@ import type { App } from "vue"
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
export function loadElementPlusIcon(app: App) {
/** 注册所有 Element Plus Icon */
// 注册所有 Element Plus Icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}

View File

@ -2,6 +2,6 @@ import type { App } from "vue"
import ElementPlus from "element-plus"
export function loadElementPlus(app: App) {
/** Element Plus 组件完整引入 */
// Element Plus 组件完整引入
app.use(ElementPlus)
}

View File

@ -6,15 +6,15 @@ import VXETablePluginElement from "vxe-table-plugin-element"
VXETable.use(VXETablePluginElement)
/** 全局默认参数 */
// 全局默认参数
VXETable.setConfig({
/** 全局尺寸 */
// 全局尺寸
size: "medium",
/** 全局 zIndex 起始值,如果项目的的 z-index 样式值过大时就需要跟随设置更大,避免被遮挡 */
// 全局 zIndex 起始值,如果项目的的 z-index 样式值过大时就需要跟随设置更大,避免被遮挡
zIndex: 9999,
/** 版本号,对于某些带数据缓存的功能有用到,上升版本号可以用于重置数据 */
// 版本号,对于某些带数据缓存的功能有用到,上升版本号可以用于重置数据
version: 0,
/** 全局 loading 提示内容,如果为 null 则不显示文本 */
// 全局 loading 提示内容,如果为 null 则不显示文本
loadingText: null,
table: {
showHeader: true,
@ -39,7 +39,7 @@ VXETable.setConfig({
},
pager: {
// size: "medium",
/** 配套的样式 */
// 配套的样式
perfect: false,
pageSize: 10,
pagerCount: 7,
@ -61,6 +61,6 @@ VXETable.setConfig({
})
export function loadVxeTable(app: App) {
/** Vxe Table 组件完整引入 */
// Vxe Table 组件完整引入
app.use(VXETable)
}

View File

@ -266,7 +266,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
title: "权限",
svgIcon: "lock",
roles: ["admin", "editor"], // 可以在根路由中设置角色
alwaysShow: true // 将始终显示根菜单
alwaysShow: true
},
children: [
{

View File

@ -23,7 +23,7 @@ export const useAppStore = defineStore("app", () => {
/** 设备类型 */
const device = ref<DeviceEnum>(DeviceEnum.Desktop)
/** 监听侧边栏 opened 状态 */
// 监听侧边栏 opened 状态
watch(
() => sidebar.opened,
opened => handleSidebarStatus(opened)

View File

@ -12,7 +12,7 @@ export const useTagsViewStore = defineStore("tags-view", () => {
const visitedViews = ref<TagView[]>(cacheTagsView ? getVisitedViews() : [])
const cachedViews = ref<string[]>(cacheTagsView ? getCachedViews() : [])
/** 缓存标签栏数据 */
// 缓存标签栏数据
watchEffect(() => {
setVisitedViews(visitedViews.value)
setCachedViews(cachedViews.value)

View File

@ -4,9 +4,9 @@
* 也可以打开浏览器控制台选择元素查看要覆盖的变量名
*/
/** 基础颜色 */
/* 基础颜色 */
html.dark-blue {
/** color-primary */
/* color-primary */
--el-color-primary: #00bb99;
--el-color-primary-light-3: #00bb99b3;
--el-color-primary-light-5: #00bb9980;
@ -14,7 +14,7 @@ html.dark-blue {
--el-color-primary-light-8: #00bb9933;
--el-color-primary-light-9: #00bb991a;
--el-color-primary-dark-2: #00bb99;
/** color-success */
/* color-success */
--el-color-success: #67c23a;
--el-color-success-light-3: #67c23ab3;
--el-color-success-light-5: #67c23a80;
@ -22,7 +22,7 @@ html.dark-blue {
--el-color-success-light-8: #67c23a33;
--el-color-success-light-9: #67c23a1a;
--el-color-success-dark-2: #67c23a;
/** color-warning */
/* color-warning */
--el-color-warning: #e6a23c;
--el-color-warning-light-3: #e6a23cb3;
--el-color-warning-light-5: #e6a23c80;
@ -30,7 +30,7 @@ html.dark-blue {
--el-color-warning-light-8: #e6a23c33;
--el-color-warning-light-9: #e6a23c1a;
--el-color-warning-dark-2: #e6a23c;
/** color-danger */
/* color-danger */
--el-color-danger: #f56c6c;
--el-color-danger-light-3: #f56c6cb3;
--el-color-danger-light-5: #f56c6c80;
@ -38,7 +38,7 @@ html.dark-blue {
--el-color-danger-light-8: #f56c6c33;
--el-color-danger-light-9: #f56c6c1a;
--el-color-danger-dark-2: #f56c6c;
/** color-error */
/* color-error */
--el-color-error: #f56c6c;
--el-color-error-light-3: #f56c6cb3;
--el-color-error-light-5: #f56c6c80;
@ -46,7 +46,7 @@ html.dark-blue {
--el-color-error-light-8: #f56c6c33;
--el-color-error-light-9: #f56c6c1a;
--el-color-error-dark-2: #f56c6c;
/** color-info */
/* color-info */
--el-color-info: #909399;
--el-color-info-light-3: #909399b3;
--el-color-info-light-5: #90939980;
@ -54,20 +54,20 @@ html.dark-blue {
--el-color-info-light-8: #90939933;
--el-color-info-light-9: #9093991a;
--el-color-info-dark-2: #909399;
/** text-color */
/* text-color */
--el-text-color-primary: #e5eaf3;
--el-text-color-regular: #cfd3dc;
--el-text-color-secondary: #a3a6ad;
--el-text-color-placeholder: #8d9095;
--el-text-color-disabled: #6c6e72;
/** border-color */
/* border-color */
--el-border-color-darker: #003380;
--el-border-color-dark: #003380;
--el-border-color: #003380;
--el-border-color-light: #003380;
--el-border-color-lighter: #003380;
--el-border-color-extra-light: #003380;
/** fill-color */
/* fill-color */
--el-fill-color-darker: #002b6b;
--el-fill-color-dark: #002b6b;
--el-fill-color: #002b6b;
@ -75,16 +75,16 @@ html.dark-blue {
--el-fill-color-lighter: #002359;
--el-fill-color-blank: #001b44;
--el-fill-color-extra-light: #001b44;
/** bg-color */
/* bg-color */
--el-bg-color-page: #001535;
--el-bg-color: #001b44;
--el-bg-color-overlay: #002359;
/** mask-color */
/* mask-color */
--el-mask-color: rgba(0, 0, 0, 0.5);
--el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
}
/** button */
/* button */
html.dark-blue .el-button {
--el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
}

View File

@ -1,4 +1,4 @@
/** 自定义 Element Plus 样式 */
// 自定义 Element Plus 样式
// 卡片
.el-card {

View File

@ -1,4 +1,4 @@
/** 清除浮动 */
// 清除浮动
%clearfix {
&::after {
content: "";
@ -7,7 +7,7 @@
}
}
/** 美化原生滚动条 */
// 美化原生滚动条
%scrollbar {
// 整个滚动条
&::-webkit-scrollbar {
@ -31,7 +31,7 @@
}
}
/** 文本溢出时显示省略号 */
// 文本溢出时显示省略号
%ellipsis {
// 隐藏溢出的文本
overflow: hidden;

View File

@ -1,4 +1,4 @@
/** Element Plus 相关 */
// Element Plus 相关
// 侧边栏的 item popper
.el-popper {

View File

@ -1,4 +1,4 @@
/** Layout 相关 */
// Layout 相关
.app-wrapper {
// 侧边栏

View File

@ -1,4 +1,4 @@
/** dark-blue 主题下的变量 */
// dark-blue 主题下的变量
// 主题名称
$theme-name: "dark-blue";

View File

@ -1,4 +1,4 @@
/** dark 主题下的变量 */
// dark 主题下的变量
// 主题名称
$theme-name: "dark";

View File

@ -1,10 +1,10 @@
/** 全局 CSS 变量,这种变量不仅可以在 CSS 和 SCSS 中使用,还可以导入到 JS 中使用 */
/* 全局 CSS 变量,这种变量不仅可以在 CSS 和 SCSS 中使用,还可以导入到 JS 中使用 */
:root {
/** Body */
/* Body */
--v3-body-text-color: var(--el-text-color-primary);
--v3-body-bg-color: var(--el-bg-color-page);
/** Header 区域 = NavigationBar 组件 + TagsView 组件 */
/* Header 区域 = NavigationBar 组件 + TagsView 组件 */
--v3-header-height: calc(
var(--v3-navigationbar-height) + var(--v3-tagsview-height) + var(--v3-header-border-bottom-width)
);
@ -12,10 +12,10 @@
--v3-header-box-shadow: var(--el-box-shadow-lighter);
--v3-header-border-bottom-width: 1px;
--v3-header-border-bottom: var(--v3-header-border-bottom-width) solid var(--el-fill-color);
/** NavigationBar 组件 */
/* NavigationBar 组件 */
--v3-navigationbar-height: 50px;
--v3-navigationbar-text-color: var(--el-text-color-regular);
/** Sidebar 组件(左侧模式全部生效、顶部模式全部不生效、混合模式非颜色部分生效) */
/* Sidebar 组件(左侧模式全部生效、顶部模式全部不生效、混合模式非颜色部分生效) */
--v3-sidebar-width: 220px;
--v3-sidebar-hide-width: 58px;
--v3-sidebar-border-right: 1px solid var(--el-fill-color);
@ -25,7 +25,7 @@
--v3-sidebar-menu-hover-bg-color: #409eff10;
--v3-sidebar-menu-text-color: #cfd3dc;
--v3-sidebar-menu-active-text-color: #ffffff;
/** TagsView 组件 */
/* TagsView 组件 */
--v3-tagsview-height: 34px;
--v3-tagsview-text-color: var(--el-text-color-regular);
--v3-tagsview-tag-active-text-color: #ffffff;
@ -41,32 +41,32 @@
--v3-tagsview-contextmenu-bg-color: var(--el-bg-color-overlay);
--v3-tagsview-contextmenu-hover-bg-color: var(--el-fill-color);
--v3-tagsview-contextmenu-box-shadow: var(--el-box-shadow);
/** Hamburger 组件 */
/* Hamburger 组件 */
--v3-hamburger-text-color: var(--el-text-color-primary);
/** RightPanel 组件 */
/* RightPanel 组件 */
--v3-rightpanel-button-bg-color: #001428;
}
/** 内容区放大时,将不需要的组件隐藏 */
/* 内容区放大时,将不需要的组件隐藏 */
body.content-large {
/** Header 区域 = TagsView 组件 */
/* Header 区域 = TagsView 组件 */
--v3-header-height: var(--v3-tagsview-height);
/** NavigationBar 组件 */
/* NavigationBar 组件 */
--v3-navigationbar-height: 0px;
/** Sidebar 组件 */
/* Sidebar 组件 */
--v3-sidebar-width: 0px;
--v3-sidebar-hide-width: 0px;
}
/** 内容区全屏时,将不需要的组件隐藏 */
/* 内容区全屏时,将不需要的组件隐藏 */
body.content-full {
/** Header 区域 */
/* Header 区域 */
--v3-header-height: 0px;
/** NavigationBar 组件 */
/* NavigationBar 组件 */
--v3-navigationbar-height: 0px;
/** Sidebar 组件 */
/* Sidebar 组件 */
--v3-sidebar-width: 0px;
--v3-sidebar-hide-width: 0px;
/** TagsView 组件 */
/* TagsView 组件 */
--v3-tagsview-height: 0px;
}

View File

@ -1,4 +1,4 @@
/** 控制切换主题时的动画效果(只在较新的浏览器上生效,例如 Chrome 111+ */
// 控制切换主题时的动画效果只在较新的浏览器上生效例如 Chrome 111+
::view-transition-old(root) {
animation: none;

View File

@ -1,4 +1,4 @@
/** 自定义 Vxe Table 样式 */
// 自定义 Vxe Table 样式
.vxe-grid {
// 表单

View File

@ -1,4 +1,4 @@
/** 统一处理 Cookie */
// 统一处理 Cookie
import CacheKey from "@/constants/cache-key"
import Cookies from "js-cookie"

View File

@ -1,4 +1,4 @@
/** 统一处理 localStorage */
// 统一处理 localStorage
import type { LayoutSettings } from "@/config/layouts"
import type { SidebarClosed, SidebarOpened } from "@/constants/app-key"

View File

@ -68,7 +68,7 @@ function createCode() {
})
}
/** 初始化验证码 */
//
createCode()
</script>

View File

@ -108,7 +108,7 @@ function resetSearch() {
}
// #endregion
/** 监听分页参数的变化 */
//
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

View File

@ -124,7 +124,7 @@ const xGridOpt: VxeGridProps = reactive({
/** 是否代理表单 */
form: true,
/** 是否自动加载,默认为 true */
// autoLoad: false,
autoLoad: true,
props: {
total: "total"
},
@ -155,7 +155,7 @@ const xGridOpt: VxeGridProps = reactive({
size: page.pageSize,
currentPage: page.currentPage
}
/** 调用接口 */
//
getTableDataApi(params).then(callback).catch(callback)
})
}

View File

@ -1,16 +1,16 @@
import { defineConfig, presetAttributify, presetUno } from "unocss"
export default defineConfig({
/** 预设 */
// 预设
presets: [
/** 属性化模式 & 无值的属性模式 */
// 属性化模式 & 无值的属性模式
presetAttributify(),
/** 默认预设 */
// 默认预设
presetUno()
],
/** 自定义规则 */
// 自定义规则
rules: [["uno-padding-20", { padding: "20px" }]],
/** 自定义快捷方式 */
// 自定义快捷方式
shortcuts: {
"uno-wh-full": "w-full h-full",
"uno-flex-center": "flex justify-center items-center",

View File

@ -9,50 +9,50 @@ import { loadEnv } from "vite"
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
import svgLoader from "vite-svg-loader"
/** 配置项文档https://cn.vitejs.dev/config */
// 配置项文档https://cn.vitejs.dev/config
export default ({ mode }: ConfigEnv): UserConfigExport => {
const viteEnv = loadEnv(mode, process.cwd()) as ImportMetaEnv
const { VITE_PUBLIC_PATH } = viteEnv
return {
/** 打包时根据实际情况修改 base */
// 打包时根据实际情况修改 base
base: VITE_PUBLIC_PATH,
resolve: {
alias: {
/** @ 符号指向 src 目录 */
// @ 符号指向 src 目录
"@": resolve(__dirname, "./src")
}
},
server: {
/** 设置 host: true 才可以使用 Network 的形式,以 IP 访问项目 */
// 设置 host: true 才可以使用 Network 的形式,以 IP 访问项目
host: true, // host: "0.0.0.0"
/** 端口号 */
// 端口号
port: 3333,
/** 是否自动打开浏览器 */
// 是否自动打开浏览器
open: false,
/** 跨域设置允许 */
// 跨域设置允许
cors: true,
/** 端口被占用时,是否直接退出 */
// 端口被占用时,是否直接退出
strictPort: false,
/** 接口代理 */
// 接口代理
proxy: {
"/api/v1": {
target: "https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212",
ws: true,
/** 是否允许跨域 */
// 是否允许跨域
changeOrigin: true
}
},
/** 预热常用文件,提高初始页面加载速度 */
// 预热常用文件,提高初始页面加载速度
warmup: {
clientFiles: ["./src/layouts/**/*.vue"]
}
},
build: {
/** 单个 chunk 文件的大小超过 2048KB 时发出警告 */
// 单个 chunk 文件的大小超过 2048KB 时发出警告
chunkSizeWarningLimit: 2048,
/** 禁用 gzip 压缩大小报告 */
// 禁用 gzip 压缩大小报告
reportCompressedSize: false,
/** 打包后静态资源目录 */
// 打包后静态资源目录
assetsDir: "static",
rollupOptions: {
output: {
@ -69,33 +69,33 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
}
}
},
/** 混淆器 */
// 混淆器
esbuild:
mode === "development"
? undefined
: {
/** 打包时移除 console.log */
// 打包时移除 console.log
pure: ["console.log"],
/** 打包时移除 debugger */
// 打包时移除 debugger
drop: ["debugger"],
/** 打包时移除所有注释 */
// 打包时移除所有注释
legalComments: "none"
},
/** Vite 插件 */
// Vite 插件
plugins: [
vue(),
vueJsx(),
/** 将 SVG 静态图转化为 Vue 组件 */
// 将 SVG 静态图转化为 Vue 组件
svgLoader({ defaultImport: "url" }),
/** SVG */
// SVG
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), "src/icons/svg")],
symbolId: "icon-[dir]-[name]"
}),
/** UnoCSS */
// UnoCSS
UnoCSS()
],
/** Vitest 单元测试配置https://cn.vitest.dev/config */
// Vitest 单元测试配置https://cn.vitest.dev/config
test: {
include: ["tests/**/*.test.ts"],
environment: "jsdom"