docs(projects): 文档更新

README.md

@@ -28,25 +28,22 @@ Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript 的中后台
 
 ## 目录规范
 
-```
+```javascript
 soybean-admin
-├── README.md                  //项目说明文档
 ├── build                      //vite构建相关配置和插件
+│   ├── define                 //定义的全局常量，通过vite构建时注入
 │   ├── env                    //.env环境文件内容加载插件
 │   └── plugins                //构建插件
 │       ├── html.ts            //html插件(注入变量，压缩代码等)
 │       ├── iconify.ts         //iconify图标插件
-│       └── vue.ts             //vue相关vite插件
+│       ├── visualizer.ts      //构建的依赖大小占比分析插件
-├── commitlint.config.js       //commitlint提交规范插件配置
+│       ├── vue.ts             //vue相关vite插件
-├── index.html
+│       └── windicss.ts        //css框架插件
-├── package.json
+├── doc                        //项目相关说明文档
-├── pnpm-lock.yaml             //npm包管理器pnpm依赖锁定文件
 ├── public                     //公共目录
 │   ├── resource               //资源文件夹(不会被打包)
 │   └── favicon.ico
 ├── src
-│   ├── App.vue                //vue文件入口
-│   ├── AppProvider.vue        //配置naive UI的vue文件(国际化,loadingBar、message等组件)
 │   ├── assets                 //静态资源
 │   ├── components             //全局组件
 │   │   ├── business           //业务相关组件
@@ -72,7 +69,6 @@ soybean-admin
 │   ├── layouts                //布局组件
 │   │   ├── BasicLayout        //基本布局组件(包含全局头部、侧边栏、底部等)
 │   │   └── BlankLayout        //空白布局组件
-│   ├── main.ts                //项目入口ts文件
 │   ├── plugins                //插件
 │   │   └── dark-mode.ts       //windicss暗黑模式插件
 │   ├── router                 //vue路由
@@ -96,13 +92,19 @@ soybean-admin
 │   ├── utils                  //全局工具函数
 │   │   ├── auth
 │   │   ├── common
+│   │   ├── package
+│   │   ├── router
 │   │   └── storage
-│   └── views                  //页面
+│   ├── views                  //页面
-│       ├── dashboard
+│   │   ├── about
-│       └── system
+│   │   ├── component
-├── tsconfig.json              //TS配置
+│   │   ├── dashboard
-├── vite.config.ts             //vite配置
+│   │   ├── document
-├── windi.config.ts            //windicss框架配置
+│   │   ├── multi-menu
+│   │   └── system
+│   ├── App.vue                //vue文件入口
+│   ├── AppProvider.vue        //配置naive UI的vue文件(国际化,loadingBar、message等组件)
+│   └── main.ts                //项目入口ts文件
 ├── .cz-config.js              //git cz提交配置
 ├── .editorconfig              //统一编辑器配置
 ├── .env                       //环境文件
@@ -113,5 +115,13 @@ soybean-admin
 ├── .eslintrc.js               //eslint配置文件
 ├── .gitignore                 //忽略git提交的配置文件
 ├── .husky                     //git commit提交钩子，提交前检查代码格式和提交commit内容的格式
-└── .prettierrc.js             //prettier代码格式插件配置
+├── .prettierrc.js             //prettier代码格式插件配置
+├── commitlint.config.js       //commitlint提交规范插件配置
+├── index.html
+├── package.json
+├── pnpm-lock.yaml             //npm包管理器pnpm依赖锁定文件
+├── README.md                  //项目介绍文档
+├── tsconfig.json              //TS配置
+├── vite.config.ts             //vite配置
+└── windi.config.ts            //windicss框架配置
 ```

doc/css书写规范.md

@@ -1,14 +1,15 @@
-css书写顺序
+### css书写顺序
 
-1.定位属性：position display float left top right bottom overflow clear z-index
+`1.定位属性：position display float left top right bottom overflow clear z-index`
-2.自身属性：width height padding border margin background
+`2.自身属性：width height padding border margin background`
-3.文字样式：font-family font-size font-style font-weight font-varient color
+`3.文字样式：font-family font-size font-style font-weight font-varient color`
-4.文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
+`4.文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow`
-5.css3中新增属性：content box-shadow border-radius transform……
+`5.css3中新增属性：content box-shadow border-radius transform`
 
-class类名的顺序：
+#### class类名的顺序：
-1.自定义的class类名(遵循BEM命名法)
+
-2.css插件提供的类名按照以上的css属性对应的顺序
+1. 自定义的class类名(遵循BEM命名法)
+2. css插件提供的类名按照以上的css属性对应的顺序
 
 例如：自定义类名结合tailwind css
 

doc/iconify使用文档.md

@@ -1,24 +1,38 @@
-iconify用法
+### iconify用法
 
-一、静态用法：直接用图标的组件名称
+#### 一、静态用法：直接用图标的组件名称
-1.安装vscode智能提示的插件: Iconify IntelliSense
+
-2.找图标：网址 https://icones.js.org/ 或者 vscode安装 icones插件
+1. 安装vscode智能提示的插件: Iconify IntelliSense
-3.确定图标名字：找到图标后复制名字 如：'mdi:emoticon' 组件为: <icon-mdi:emoticon />
+2. 找图标：网址 https://icones.js.org/ 或者 vscode安装 icones插件
-4.设置样式：同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小
+3. 确定图标名字：找到图标后复制名字 如：**'mdi:emoticon'** 组件为: `<icon-mdi:emoticon />`, icon-为设置的前缀
+4. 设置样式：同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小
+
+#### 二、多个图标动态渲染
 
-二、多个图标动态渲染
 1.确定图标名字，如：'mdi:emoticon'
 2.引入Icon组件：
-import { Icon } from '@iconify/vue';
+`import { Icon } from '@iconify/vue';`
-3.动态渲染 <Icon icon="mdi:emoticon" />
+3.动态渲染 
-ps：Icon组件属性 https://docs.iconify.design/icon-components/vue/
+
+`<Icon icon="mdi:emoticon" />`
+
+*ps：Icon组件属性 https://docs.iconify.design/icon-components/vue/*
+
+#### 三、结合naiveUI组件动态渲染
+
+1. 确定图标名字，如：**'mdi:emoticon'**
+
+2. 引入vue的h函数：
+
+   `import { h } from 'vue';`
+
+3. 引入Icon组件
+
+   `import { Icon } from '@iconify/vue';`
+
+4. 动态渲染
+
+`() => h(Icon, { icon: 'mdi:emoticon', style: { color: '#f00', fontSize: '16px' } })`
+
+*ps：@/uitls已封装好了函数：iconifyRender*
 
-三、结合naiveUI组件动态渲染
-1.确定图标名字，如：'mdi:emoticon'
-2.引入vue的h函数：
-import { h } from 'vue';
-3.引入Icon组件
-import { Icon } from '@iconify/vue';
-4.动态渲染
-() => h(Icon, { icon: 'mdi:emoticon', style: { color: '#f00', fontSize: '16px' } })
-ps：@/uitls已封装好了函数：iconifyRender

doc/vue+TS书写规范.md

@@ -1,43 +1,73 @@
-推荐script-setup写法
+### script-setup写法
+
+#### 第一部分书写
 
-第一部分书写
 template
 
-第二部分
+#### 第二部分
+
 script
 
-一、import的顺序
+##### 一、import的顺序
 
-1.vue模块
+1. vue模块
-2.vue相关类型
+2. vue相关类型
-3.vue-router模块
+3. vue-router模块
-4.vue-router相关类型
+4. vue-router相关类型
-5.UI框架模块
+5. UI框架模块
-6.UI框架相关类型
+6. UI框架相关类型
-7.第三方依赖
+7. 第三方依赖
-8.第三方依赖相关类型
+8. 第三方依赖相关类型
-9.@/enum
+9. @/enum
-10.@/setting
+10. @/setting
-11.@/plugins
+11. @/plugins
-12.@/layouts
+12. @/layouts
-13.@/views
+13. @/views
-14.@/components
+14. @/components
-15.@/hooks
+15. @/hooks
-16.@/store
+16. @/store
-17.@/context
+17. @/context
-18.@/router
+18. @/router
-19.@/service
+19. @/service
-20.@/utils
+20. @/utils
-21.@/interface
+21. @/interface
-22.@/assets
+22. @/assets
-23.相对路径依赖
+23. 相对路径依赖
 
-二、TS类型声明
+##### 二、TS类型声明
 
-三、defineProps、defineEmits、defineExpose、withDefaults
+##### 三、defineProps、defineEmits、defineExpose、withDefaults
 
-四、响应式use函数
+1. 定义属性，如：
 
-五、变量、函数声明
+`interface Props {`
 
-六、vue生命周期函数、nextTick执行
+​	`name: string;`
+
+​	`age?: number;`
+
+`}`
+
+`const props = withDefaults(defineProps<Props>(), {`
+
+​	`age: 24`
+
+`})`
+
+其中name是必须的属性，age是可选属性，通过withDefaults添加默认值
+
+2. 定义emit事件
+
+`const emit = defineEmits<{`
+
+​	`(e: 'event-name', param: number): void;`
+
+`}>()`
+
+##### 四、响应式use函数
+
+有些use函数需要传入响应式的变量参数时，则书写在声明的变量下面。
+
+##### 五、变量、函数声明
+
+##### 六、vue生命周期函数、nextTick执行

doc/命名规范.md

@@ -0,0 +1,55 @@
+### 驼峰式命名法：
+**Pascal Case大驼峰式命名法：**
+首字母大写。eg：StudentInfo、UserInfo、ProductInfo
+**Camel Case 小驼峰式命名法：**
+首字母小写。eg：studentInfo、userInfo、productInfo
+
+### 文件、文件夹命名：
+1. 文件夹作为**页面**时用小写字母，包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
+2. 文件夹作为**组件**时用大写驼峰命名。
+3. 文件作为**组件**时用大写驼峰命名。
+4. 文件作为**use函数**时用小驼峰命名。
+5. 其余文件用小写字母，包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
+
+### 变量命名：
+#### 命名方式 : 小驼峰式命名方法
+**命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词**
+
+动词 | 含义 | 返回值
+---|---|---
+can | 判断是否可执行某个动作 | 函数返回一个布尔值。true：可执行；false：不可执行。
+has | 判断是否含有某个值 | 函数返回一个布尔值。true：含有此值；false：不含有此值。
+is | 判断是否为某个值 | 函数返回一个布尔值。true：为某个值；false：不为某个值。
+get | 获取某个值 | 函数返回一个非布尔值。
+set | 设置某个值 | 无返回值、返回是否设置成功或者返回链式对象。
+
+- 推荐：
+
+```javascript
+//是否可读
+function canRead(){
+	return true;
+}
+
+//获取姓名
+function getName(){
+  return this.name;
+}
+```
+
+
+### 常量
+#### 命名方法 : 全部大写
+**命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。**
+- 推荐：
+
+```javascript
+const MAX_COUNT = 10;
+const URL = 'http://www.baidu.com';
+```
+
+### TS类型
+
+命名统一使用大写驼峰
+
+interface和type使用优先级：能用interface表示的类型就用interface。

src/router/modules/index.ts

@@ -3,7 +3,7 @@ import DASHBOARD from './dashboard';
 import DOCUMENT from './document';
 import COMPONENT from './component';
 import EXCEPTION from './exception';
-import MULTI_MENU from './multiMenu';
+import MULTI_MENU from './multi-menu';
 import ABOUT from './about';
 
 export default [ROOT, DASHBOARD, DOCUMENT, COMPONENT, EXCEPTION, MULTI_MENU, ABOUT];