diff --git a/README.md b/README.md index 52101dba7..05ee2035a 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript 的免费中 ## 文档 -[项目相关文档](./doc) +[项目文档](https://docs.soybean.pro) ## 安装使用 @@ -102,9 +102,10 @@ pnpm i -g commitizen 支持现代浏览器, 不支持 IE -| [ Edge](http://godban.github.io/browsers-support-badges/)
IE | [ Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| [IE](http://godban.github.io/browsers-support-badges/)IE | [ Edge](http://godban.github.io/browsers-support-badges/)Edge | [Firefox](http://godban.github.io/browsers-support-badges/)Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)Chrome | [Safari](http://godban.github.io/browsers-support-badges/)Safari | | :-: | :-: | :-: | :-: | :-: | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions | + ## 开源作者 [@Soybean](https://github.com/honghuangdc) @@ -119,7 +120,7 @@ pnpm i -g commitizen - + - 本人微信号：honghuangdc，欢迎来技术交流。 diff --git "a/doc/TS\345\206\231\346\263\225\350\247\204\350\214\203.md" "b/doc/TS\345\206\231\346\263\225\350\247\204\350\214\203.md" deleted file mode 100644 index 6befc6dc7..000000000 --- "a/doc/TS\345\206\231\346\263\225\350\247\204\350\214\203.md" +++ /dev/null @@ -1,47 +0,0 @@ -### 1.interface和type - -##### interface和type使用优先级：能用interface表示的类型就用interface。 - -### 2.请求函数 - -#### api接口： - -统一以 **fetch** 开头，例如： - -```typescript -/** - * 获取用户信息 - * @param id - 用户唯一标识id - */ -function fetchUserInfo(id：string) { - // *** -} -/** - * 删除列表项 - * @param id - 列表id - */ -function fetchDeleteListItem(id：string) { - // *** -} -``` - -#### middleware中间件： - -统一以 **handle** 开头，例如 - -```typescript -/**接口返回的用户信息 */ -interface ResponseUserInfo { - userId: string; - userName: string; - userAge: number; -} -/** - * 获取用户信息 中间件 - @param data - 返回的用户信息 - */ -function handleUserInfo(data: ResponseUserInfo): UserInfo { - // *** -} -``` - diff --git "a/doc/css\344\271\246\345\206\231\350\247\204\350\214\203.md" "b/doc/css\344\271\246\345\206\231\350\247\204\350\214\203.md" deleted file mode 100644 index a9ce78fa0..000000000 --- "a/doc/css\344\271\246\345\206\231\350\247\204\350\214\203.md" +++ /dev/null @@ -1,35 +0,0 @@ -### css书写顺序 - -1. 定位属性： - - `position display float left top right bottom overflow clear z-index` - -2. 自身属性： - - `width height padding border margin background` - -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` - -5. css3中新增属性： - - `content box-shadow border-radius transform` - -#### class类名的顺序： - -1. 自定义的class类名(遵循BEM命名法) -2. css插件提供的类名按照以上的css属性对应的顺序 - -例如：自定义类名结合tailwind css - -
- diff --git "a/doc/iconify\344\275\277\347\224\250\346\226\207\346\241\243.md" "b/doc/iconify\344\275\277\347\224\250\346\226\207\346\241\243.md" deleted file mode 100644 index 37c3dc40b..000000000 --- "a/doc/iconify\344\275\277\347\224\250\346\226\207\346\241\243.md" +++ /dev/null @@ -1,41 +0,0 @@ -### iconify用法 - -#### 一、静态用法：直接用图标的组件名称 - -1. 安装vscode智能提示的插件: Iconify IntelliSense -2. 找图标：网址 https://icones.js.org/ 或者 vscode安装 icones插件 -3. 确定图标名字：找到图标后复制名字 如：**'mdi:emoticon'** 组件为: ``, icon-为设置的前缀 -4. 设置样式：同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小 - -#### 二、多个图标动态渲染 - -1. 确定图标名字，如：'mdi:emoticon' - -2. 引入Icon组件： - - `import { Icon } from '@iconify/vue';` - -3. 动态渲染 - - `` - -*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* - diff --git "a/doc/vue\344\271\246\345\206\231\350\247\204\350\214\203.md" "b/doc/vue\344\271\246\345\206\231\350\247\204\350\214\203.md" deleted file mode 100644 index 7e17ad6e9..000000000 --- "a/doc/vue\344\271\246\345\206\231\350\247\204\350\214\203.md" +++ /dev/null @@ -1,209 +0,0 @@ -### script-setup写法 - -#### 第一部分 - -##### template - -#### 第二部分 - -##### script - -##### 一、import的顺序, 依次按照下面的顺序。 - -1. vue模块 - - ```typescript - import { } from 'vue'; - ``` - -2. vue相关类型 - - ```typescript - import type { } from 'vue'; - ``` - -3. vue-router模块 - - ```typescript - import { } from 'vue-router'; - ``` - -4. vue-router相关类型 - - ```typescript - import type { } from 'vue-router'; - ``` - -5. UI框架模块 - - ```typescript - import { } from 'naive-ui'; - ``` - -6. UI框架相关类型 - - ```typescript - import type { } from 'naive-ui'; - ``` - -7. 第三方依赖 - - ```typescript - import BScroll from 'bscroll'; - ``` - -8. 第三方依赖相关类型 - - ```typescript - import type { } from 'bscroll'; - ``` - -9. @/enum - - ```typescript - import { } from '@/enum'; - ``` - -10. @/setting - - ```typescript - import { } from '@/setting'; - ``` - -11. @/plugins - - ```typescript - import { } from '@/plugins'; - ``` - -12. @/layouts - - ```typescript - import { } from '@/layouts'; - ``` - -13. @/views - - ```typescript - import { } from '@/views'; - ``` - -14. @/components - - ```typescript - import { } from '@/components'; - ``` - -15. @/hooks - - ```typescript - import { } from '@/hooks'; - ``` - -16. @/store - - ```typescript - import { } from '@/store'; - ``` - -17. @/context - - ```typescript - import { } from '@/context'; - ``` - -18. @/router - - ```typescript - import { } from '@/router'; - ``` - -19. @/service - - ```typescript - import { } from '@/service'; - ``` - -20. @/utils - - ```typescript - import { } from '@/utils'; - ``` - -21. @/interface - - ```typescript - import { } from '@/interface'; - ``` - -22. @/assets - - ```typescript - import { } from '@/assets'; - ``` - -23. 相对路径依赖 - - ```typescript - import { } from './components'; - ``` - -##### 二、TS类型声明 - -```typescript -interface Props { - /**姓名 */ - name: string; - /**年龄 */ - age?: number; -} -interface Emits { - /** - * 删除事件 - * @param id - 删除项的id - */ - (e: 'delete', id: number): void; -} -``` - - -##### 三、defineProps、defineEmits、withDefaults - -1. 定义属性，如： - -```typescript -const props = withDefaults(defineProps(), { - age: 24 -}); -``` - -其中name是必须的属性，age是可选属性，通过withDefaults添加默认值 - -2. 定义emit事件 - -```typescript -const emit = defineEmits(); -``` - -##### 四、响应式use函数 - -有些use函数需要传入响应式的变量参数时，则书写在声明的变量下面。 - -```typescript -const router = useRouter(); -const route = useRoute(); -``` - -```typescript -/**dom引用 */ -const domRef = ref(null); -const { height: domRefHeight } = useElementSize(domRef); //获取domRef的响应式高度 -``` - - - -##### 五、变量、函数声明 - -##### 六、vue生命周期函数、nextTick执行 - -##### 七、defineExpose diff --git "a/doc/\345\221\275\345\220\215\350\247\204\350\214\203.md" "b/doc/\345\221\275\345\220\215\350\247\204\350\214\203.md" deleted file mode 100644 index 9261f5d81..000000000 --- "a/doc/\345\221\275\345\220\215\350\247\204\350\214\203.md" +++ /dev/null @@ -1,72 +0,0 @@ -### 命名法： - -#### 1.驼峰命名法(小驼峰) - -**getUser** - -#### 2.帕斯卡命名法(大驼峰) - - **GlobalHeader** - -#### 3.短横线命名法 - -**user-center** - -#### 4.下划线命名法 - - **MAX_LENGTH** - -### 文件、文件夹命名： - -1. 文件夹作为**路由页面**时用小写字母，包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔, 即**短横线命名法**，此时vue文件为**index.vue**。 -2. 文件夹作为**vue组件**时用**大写驼峰命名法**。 -3. 文件作为**vue组件**时用**大写驼峰命名法**。 -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 - -##### 命名方法：大写驼峰 - -```typescript -interface PersonInfo { - /**姓名 */ - name: string; - /**性别 '0':男; '1': 女; '2': 未知 */ - gender: '0' | '1' | '2'; - /**年龄 */ - age: 25; -} -``` diff --git "a/doc/\347\233\256\345\275\225.md" "b/doc/\347\233\256\345\275\225.md" deleted file mode 100644 index 915c952a1..000000000 --- "a/doc/\347\233\256\345\275\225.md" +++ /dev/null @@ -1,101 +0,0 @@ - -## 目录规范 - -```javascript -qitan-pc -├── build //vite构建相关配置和插件 -│ ├── define //定义的全局常量，通过vite构建时注入 -│ ├── env //.env环境文件内容加载插件 -│ └── plugins //构建插件 -│ ├── html.ts //html插件(注入变量，压缩代码等) -│ ├── iconify.ts //iconify图标插件 -│ ├── visualizer.ts //构建的依赖大小占比分析插件 -│ ├── vue.ts //vue相关vite插件 -│ └── windicss.ts //css框架插件 -├── doc //项目相关说明文档 -├── public //公共目录 -│ ├── resource //资源文件夹(不会被打包) -│ └── favicon.ico //网站标签图标 -├── src -│ ├── assets //静态资源 -│ ├── components //全局组件 -│ │ ├── business //业务相关组件 -│ │ ├── common //公共组件 -│ │ └── custom //自定义组件 -│ ├── context //全局上下文(通过provide和inject实现) -│ │ ├── app //从app.vue注入的上下文 -│ │ └── part //局部组件注入的上下文 -│ ├── enum //TS枚举 -│ │ ├── animate.ts //动画枚举 -│ │ ├── business.ts //业务相关枚举 -│ │ ├── common.ts //通用枚举 -│ │ ├── route.ts //路由相关枚举 -│ │ ├── storage.ts //存储相关枚举 -│ │ └── theme.ts //系统主题配置相关枚举 -│ ├── hooks //组合式的钩子函数hooks -│ │ ├── business //业务相关hooks -│ │ └── common //通用hooks -│ ├── interface //TS类型接口 -│ │ ├── business.ts //业务相关类型接口 -│ │ ├── common.ts //通用类型接口 -│ │ └── theme.ts //系统主题配置相关类型接口 -│ ├── layouts //布局组件 -│ │ ├── BasicLayout //基本布局(包含全局头部、侧边栏、底部等公共部分) -│ │ ├── BlankLayout //空白布局组件(单个页面) -│ │ └── RouterViewLayout //路由组件(用于多级路由之间的桥接) -│ ├── plugins //插件 -│ │ └── dark-mode.ts //windicss暗黑模式插件 -│ ├── router //vue路由 -│ │ ├── modules //路由页面(按模块划分) -│ │ ├── permission //路由权限(路由守卫) -│ │ ├── routes //声明的路由 -│ │ └── setup //路由挂载函数 -│ ├── service //网络请求 -│ │ ├── api //接口api -│ │ ├── middleware //请求结果的处理中间件 -│ │ └── request //封装的请求函数 -│ ├── settings //项目初始配置 -│ │ └── theme.ts //项目主题初始配置 -│ ├── store //状态管理 -│ │ └── modules //状态管理划分的模块 -│ ├── styles //样式 -│ │ ├── css //css -│ │ └── scss //scss -│ ├── typings //TS类型声明文件(*.d.ts) -│ ├── utils //全局工具函数 -│ │ ├── auth //用户鉴权 -│ │ ├── common //通用工具函数 -│ │ ├── package //npm依赖 -│ │ ├── router //路由 -│ │ ├── request //请求工具函数 -│ │ └── storage //存储 -│ ├── views //页面 -│ │ ├── about -│ │ ├── component -│ │ ├── dashboard -│ │ ├── document -│ │ ├── multi-menu -│ │ └── system //系统内置页面：登录、异常页等 -│ ├── App.vue //vue文件入口 -│ ├── AppProvider.vue //配置naive UI的vue文件(国际化,loadingBar、message等组件) -│ └── main.ts //项目入口ts文件 -├── .cz-config.js //git cz提交配置 -├── .editorconfig //统一编辑器配置 -├── .env //环境文件 -├── .env.development //环境文件(开发模式) -├── .env.production //环境文件(生产模式) -├── .env.staging //环境文件(自定义staging模式) -├── .eslintignore //忽略eslint检查的配置文件 -├── .eslintrc.js //eslint配置文件 -├── .gitignore //忽略git提交的配置文件 -├── .husky //git commit提交钩子，提交前检查代码格式和提交commit内容的格式 -├── .prettierrc.js //prettier代码格式插件配置 -├── commitlint.config.js //commitlint提交规范插件配置 -├── index.html -├── package.json //npm依赖描述文件 -├── pnpm-lock.yaml //npm包管理器pnpm依赖锁定文件 -├── README.md //项目介绍文档 -├── tsconfig.json //TS配置 -├── vite.config.ts //vite配置 -└── windi.config.ts //windicss框架配置 -``` diff --git a/src/assets/svg/common/logo.svg b/src/assets/svg/common/logo.svg new file mode 100644 index 000000000..8d63827ab --- /dev/null +++ b/src/assets/svg/common/logo.svg @@ -0,0 +1,26 @@ + + + + + + + + + + diff --git a/src/interface/common/index.ts b/src/interface/common/index.ts index 644cc464e..6edd438dc 100644 --- a/src/interface/common/index.ts +++ b/src/interface/common/index.ts @@ -1,3 +1,4 @@ +export * from './theme'; export * from './system'; export * from './route'; export * from './service'; diff --git a/src/interface/theme/index.ts b/src/interface/common/theme.ts similarity index 100% rename from src/interface/theme/index.ts rename to src/interface/common/theme.ts diff --git a/src/interface/index.ts b/src/interface/index.ts index 8bb846f02..5f193c38b 100644 --- a/src/interface/index.ts +++ b/src/interface/index.ts @@ -1,3 +1,2 @@ export * from './common'; export * from './business'; -export * from './theme';