update readme

README.md

@@ -1,5 +1,18 @@
 # RuoYi-App-Geek
+
+<div style="display: flex;justify-content: center;align-items: center;">
+	<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png">
+    <span style="font-weight: bolder;font-size: 30px;">+</span>
+    <img alt="logo" src="./doc/image/logo.png">
+</div>
+<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">RuoYi-Geek v3.8.7.3.2</h1>
+<h4 align="center">基于SpringBoot3+Vue3前后端分离的Java快速开发框架</h4>
+<p align="center">
+	<img src="https://img.shields.io/github/license/mashape/apistatus.svg">
+</p>
+
 # 引言
+
 RuoYi-Vue 与 RuoYi-App 是基于 SpringBoot2+Vue2 打造的企业级开发框架，得到了广大开发者的喜爱和积极反馈。随着技术的迭代进步，SpringBoot3 与 Vue3 逐渐进入开发者的视野。为了满足开发者对于新技术的追求，RuoYi 官方文档提供了 SpringBoot2 至 SpringBoot3 的升级方法。与此同时，社区也涌现出了 RuoYi-Vue3、RuoYi-App-Vue3 的版本，展现了开发者社区对于技术升级的热情与努力。
 
 然而，在升级的过程中，官方的方法为了兼顾 Java1.8 的特性与一些老旧的方法，未完全拥抱**SpringBoot3 与 Java17**的全部特性。而社区的 RuoYi-Vue3、RuoYi-App-Vue3 版本由于出自不同的团队之手，**兼容性及整合性**上存在些许**不足**。更为关键的是，尽管这些版本**支持 TypeScript**，但**缺乏与之相匹配的 tsconfig.json 配置文件**，这使得在主流编辑器如 VSCode 中，TypeScript 的语法提示环境并未达到最佳状态。
@@ -11,10 +24,12 @@ RuoYi-Vue与RuoYi-App是基于SpringBoot2+Vue2打造的企业级开发框架，
 本项目为**RuoYi-Geek 生态**的 RuoYi-App 部分。
 **注意：**
 本人的其他两个推荐搭配的项目
+
 1. [Ruoyi-SpringBoot3-Geek: 这是若依极客生态的后端 Springboot3 版本 (gitee.com)](https://gitee.com/geek-xd/ruoyi-spring-boot3-geek)
 2. [RuoYi-Vue3-Geek: 这是若依极客生态的 Vue3 版本 (gitee.com)](https://gitee.com/geek-xd/ruo-yi-vue3-geek)
 
 **与 Ruoyi-App 相比较**
+
 1. 使用 UniApp+Vue3 的最新框架
 2. 支持 TS、SCSS、LESS 等对 js 和 css 的扩充语言
 3. 使用 Pinia 代替 Vuex，更加轻巧简单
@@ -24,14 +39,16 @@ RuoYi-Vue与RuoYi-App是基于SpringBoot2+Vue2打造的企业级开发框架，
 7. 提供了颜色选择器、二维码等常用组件
 8. 将原有内置工具进行类型标定
 9. 分别提供了 uview-plus 和 ucharts 的模板（可以直接使用或者用于学习）
+
 # 快速开始
+
 **注意：**node 版本需要 16+
 
 ## 安装
 
 一下三种方式均可，感觉速度 pnpm > yarn > cnpm > npm
 
-***Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0***
+**_Vue3/Vite 版要求 node 版本^14.18.0 || >=16.0.0_**
 
 ```shell
 npm install
@@ -44,18 +61,17 @@ pnpm install
 
 1. 将项目下载到本地
 2. 初始化项目---进入项目根路径运行指令初始化项目
-```npm install```
-4. 运行项目---进入项目根路径运行指令（在package.json能找到所有指令）：
-以微信小程序为例：```npm run dev:mp-weixin```
-以H5为例``` npm run dev:h5```
-7. 查看项目	  以微信小程序为例：
+   `npm install`
+3. 运行项目---进入项目根路径运行指令（在 package.json 能找到所有指令）：
+   以微信小程序为例：`npm run dev:mp-weixin`
+   以 H5 为例 ` npm run dev:h5`
+4. 查看项目 以微信小程序为例：
    打开微信开发者工具，导入项目路径 dist\dev\mp-weixin
    以 H5 为例：打开浏览器，输入控制台输出的地址
    注：公众号属于 H5，以微信公众号为例，打开微信开发者工具，输入控制台输出的地址
-9. 打包项目---进入项目根路径运行指令（在package.json能找到所有指令）：
-以微信小程序为例：```npm run build:mp-weixin```
-以H5为例： ```npm run build:h5```
-
+5. 打包项目---进入项目根路径运行指令（在 package.json 能找到所有指令）：
+   以微信小程序为例：`npm run build:mp-weixin`
+   以 H5 为例： `npm run build:h5`
 
 ### 代码压缩
 
@@ -134,7 +150,7 @@ eventName是事件名称，eventFun是事件处理函数，请尽量避免事件
 设置项 enableEvent，是否启用基于事件的消息处理机制，要求当希望被事件处理函数处理的消息需要携带 event 字段。
 
 | 方法      | 作用                                                                                                                    | 参数                                                                                                                                    |
-| --------- | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| --------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
 | connect   | 连接 websocke，当连接成功后触发回调函数                                                                                 | 最简单的用法就是传入{url:"ws://demo"}                                                                                                   |
 | send      | 发送信息，当 uuid 不为空且不为 false 时，当收到携带相同 uuid 的消息时触发回调函数，只触发一次。否则由默认处理函数处理。 | msg 消息内容，会被处理成 json 字符串 uuid 唯一标识符，可以手动传入，也可以设置为 true 当为 true 时会自动生成一个 uuid 并添加到 msg 中。 |
 | close     | 关闭连接，会触发回调函数的内容，不会触发默认关闭事件的处理函数，也不会修改默认关闭事件的处理函数。                      | 无                                                                                                                                      |
@@ -149,20 +165,20 @@ eventName是事件名称，eventFun是事件处理函数，请尽量避免事件
 ### 对于选项式
 
 ```js
-this.$tab // 建议使用this.$tab进行页面跳转，理由：便于在跳转前处理其他事务
-this.$auth // 建议使用this.$auth进行鉴权操作
-this.$modal // 建议使用this.$modal打开弹窗，理由：便于以后想要使用自定义弹窗
+this.$tab; // 建议使用this.$tab进行页面跳转，理由：便于在跳转前处理其他事务
+this.$auth; // 建议使用this.$auth进行鉴权操作
+this.$modal; // 建议使用this.$modal打开弹窗，理由：便于以后想要使用自定义弹窗
 ```
 
 ### 对于组合式
 
 ```js
-import tab from '@/plugins/tab' // 建议使用tab进行页面跳转，理由：便于在跳转前处理其他事务
-import auth from '@/plugins/auth' // 建议使用auth进行鉴权操作
-import modal from '@/plugins/modal' // 建议使用modal打开弹窗，理由：便于以后想要使用自定义弹窗
+import tab from "@/plugins/tab"; // 建议使用tab进行页面跳转，理由：便于在跳转前处理其他事务
+import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
+import modal from "@/plugins/modal"; // 建议使用modal打开弹窗，理由：便于以后想要使用自定义弹窗
 
 // 也可以使用下面的方式
-import { tab, auth, modal} from '@/plugins'
+import { tab, auth, modal } from "@/plugins";
 ```
 
 ### 对于 ucharts
@@ -195,7 +211,7 @@ import { tab, auth, modal} from '@/plugins'
 （占用主包 175kb 左右，不建议删除，以防以后会用）
 
 1. 删除 components/qiun-data-charts 文件夹
-2. 删除pages.json中的easycom下的custom中的"qiun-(.*)"的那一行
+2. 删除 pages.json 中的 easycom 下的 custom 中的"qiun-(.\*)"的那一行
 3. 删除 pages/index 中使用 “qiun-data-charts” 的部分
 
 ### 删除 uview
@@ -205,15 +221,22 @@ import { tab, auth, modal} from '@/plugins'
 1. main.js 或者 main.ts 中删除
 
 ```js
-import uviewPlus from 'uview-plus'
+import uviewPlus from "uview-plus";
 // ......
-app.use(uviewPlus)
+app.use(uviewPlus);
 ```
 
 2. uni.scss 中删除 @import 'uview-plus/theme.scss';
 3. App.vue 中删除 @import '@/static/scss/index.scss';
 4. package.json 中删除 "clipboard": "^2.0.11","dayjs": "^1.11.9","uview-plus": "^3.1.36",
 
+# 功能演示
+
+<image src="./doc/image/template1.png" style="width: 45%; height: 500px;"/>
+<image src="./doc/image/template2.png" style="width: 45%;height: 500px;" />
+<image src="./doc/image/index.png" style="width: 45%;height: 500px;" />
+<image src="./doc/image/mallMenu.png" style="width: 45%;height: 500px;" />
+
 # 附录
 
 [Vue3 官网](https://cn.vuejs.org/)；