v2.2.0

client/README.md

@@ -1,22 +1,135 @@
-# 第三方平台管理工具前端
+# 微管家前端
 
-## 项目技术栈相关文档
-### vite：https://vitejs.cn/guide/
-### React：https://react.docschina.org/
-### TDesign-React：https://tdesign.tencent.com/react/components/overview
+### 项目技术栈相关文档
+vite：https://vitejs.cn/guide/ \
+React：https://react.docschina.org/ \
+TDesign-React：https://tdesign.tencent.com/react/components/overview
+
+## 如何进行二次开发
+只新增页面、逻辑的二次开发务必阅读下面介绍（后续升级微管家版本会相对方便）
+
+最低限度的二次开发不需要去阅读理解大量官方本身的代码，项目结构已分割出自定义代码区并暴露相关能力位于 [src/custom](./src/custom)
+
+用户自己开发的新增页面 建议都在 src/custom 下进行相关开发，这样在升级微管家版本时可无痛merge代码
+
+在 custom 下编写相关的页面文件之后，修改导航栏和路由相关配置即可生效
+
+左侧导航栏和页面配置的相关声明文件位于 [src/commonType.ts](./src/commonType.ts)
+
+其中页面路由的配置在 [custom/config/route.tsx](./src/custom/config/route.tsx) 用法如下：
+```typescript jsx
+export const customRoute: IRoute = {
+ demo: {
+ label: '一个demo',
+ path: '/demo',
+ element: <Demo />
+ },
+ demo1: {
+ label: '一个demo1',
+ path: '/demo1',
+ element: <Demo1 />
+ },
+ demo2: {
+ label: '一个demo2',
+ path: '/demo2',
+ showPath: '/demo1',
+ element: <Demo2 />
+ },
+ demo3: {
+ label: '一个demo',
+ path: '/demo',
+ element: <Demo />,
+ dontNeedMenu: true // 左侧不展示menu，例如登录页，即也不需要登录态
+ },
+}
+```
+其中左侧导航栏的配置在 [custom/config/menu.tsx](./src/custom/config/menu.tsx) 用法如下：
+```typescript jsx
+import { customRoute as routes } from './routes'
+export const customMenuList: IMenuList = [{
+ label: '测试路由',
+ icon: <Icon.AppIcon />,
+ item: [routes.demo, {
+ ...routes.demo1,
+ hideItem: [routes.demo2],// demo1的子级路由，但在导航menu中不显示
+ }]
+}]
+```
+项目中用到的所有接口 [custom/utils/apis.ts](custom/utils/apis.ts)
+
+官方也同样暴露了二开可能用到的相关能力的函数方法，位于 [custom/utils/common.ts](./src/custom/utils/common.ts) 其中有以下方法，用法如下：
+```typescript
+copyMessage('要复制的文本') // 复制文本
+
+checkLogin() // 判断是否登录 true 已登录 false 未登录
+
+logout() // 退出登录
+
+refreshToken() // 刷新登录token
+
+import { apis } from './apis.ts'
+request({
+ request: apis.getTicketRequest,
+ noNeedCheckLogin: true,
+ data: {}
+}) // 发起请求方法
+
+request({
+ request: {
+ method: 'post',
+ url: 'xxxxx',
+ },
+ data: {}
+}) // 发起请求方法
+```
+
+
+## 项目开发
+#### 项目页面路由及对应组件见[route 配置](./src/config/route.tsx)
+#### 项目左侧导航栏配置见[menu 配置](./src/config/menu.tsx)
+#### 安装依赖
+```shell
+ yarn 或 npm install
+```
+#### 修改 proxy 设置：将[vite 配置文件](./vite.config.ts)中的 proxy.target 改为自己的地址
+#### 启动项目
+```shell
+ yarn dev 或 npm run dev
+```
+#### 项目打包
+```shell
+ yarn build 或 npm run build
+```
+#### 项目部署
+见项目根目录 [README.md](../README.md)
 
 ## 目录结构
 ```
 .
 ├── dist // 打包编译产物
+├── scripts // 一些脚本文件
+│ └── checkHost.mjs // 校验push代码是否携带敏感信息
 ├── src // 具体前端资源
-│ ├── components // 项目公共组件
+│ ├── assets // 项目静态资源
+│ │ └── icons // icon类文件存放
+│ │ └── xxxx.png // 具体的icon文件
+│ ├── config // 配置存放
+│ │ ├── menu.tsx // 左侧导航栏配置
+│ │ └── route.tsx // 路由配置
+│ ├── custom // 二开代码放置位置
+│ │ ├── config // 二开配置文件
+│ │ │ ├── menu.tsx // 二开左侧导航栏配置
+│ │ │ └── route.tsx // 二开路由配置
+│ │ └── utils // 二开工具函数
+│ │ ├── apis.ts // 二开接口信息
+│ │ └── common.ts // 二开通用函数
+│ ├── components // 公共组件
 │ │ ├── Console // 控制台组件，各个页面的共用部分
 │ │ │ ├── index.module.less // 组件级样式文件
 │ │ │ └── index.tsx // 组件具体代码逻辑文件
 │ │ └── Menu // 左侧导航栏组件
 │ │ └── .....
-│ ├── pages // 项目具体页面文件
+│ ├── pages // 具体页面文件
 │ │ ├── authorizedAccount // 授权账号管理页面
 │ │ │ ├── index.module.less // 页面级样式文件
 │ │ │ └── index.tsx // 页面具体代码逻辑文件
@@ -39,38 +152,20 @@
 │ ├── utils // 项目一些通用工具类函数
 │ │ ├── apis.ts // 接口请求地址统一管理
 │ │ ├── axios.ts // 封装相关请求函数
+│ │ ├── common.ts // 一些常用的方法函数
 │ │ └── login.ts // 一些登录相关逻辑函数
-│ ├── icon.ico // 项目 icon 文件
+│ ├── commonType.ts // 公共声明文件
+│ ├── icon.ico // 项目 ico 文件
 │ ├── main.less // 一些项目的全局样式
-│ ├── main.tsx // 项目根文件 main.tsx
-│ └── vite-env.d.ts // 项目环境变量配置
+│ ├── main.tsx // 根文件 main.tsx
+│ └── vite-env.d.ts // 环境变量配置
 ├── .editorconfig // 编辑器配置
 ├── .gitignore // git 忽略上传文件
-├── index.html // 项目入口文件 index.html
+├── index.html // 入口文件 index.html
 ├── package.json // 项目依赖
 ├── README.md
 ├── tsconfig.json // ts 配置文件
 ├── vite.config.ts // vite 配置文件
-├── yarn.lock
 └── 接口文档.md
 
 ```
-
-## 项目开发
-### 项目具体页面路由见[Console 组件 routes](./src/components/Console/index.tsx)
-### 路由对应页面组件见[main.tsx](./src/main.tsx)
-### 安装依赖
-```shell
- yarn
-```
-### 修改 proxy 设置：将[vite 配置文件](./vite.config.ts)中的 proxy.target 改为自己的地址
-### 启动项目
-```shell
- yarn dev
-```
-### 项目打包
-```shell
- yarn build
-```
-### 项目部署
-见项目 [wxcloudrun-wxcomponent](https://github.com/WeixinCloud/wxcloudrun-wxcomponent) README.md

client/package.json

@@ -1,6 +1,6 @@
 {
  "name": "third-platform-manage-tools",
- "version": "2.1.0",
+ "version": "2.2.0",
  "scripts": {
  "dev": "vite",
  "start": "vite",

client/src/commonType.ts

@@ -0,0 +1,25 @@
+import React from "react";
+
+export type IRoute = Record<string, {
+ label: string // 标题
+ path: string // 路径
+ showPath?: string // 实际展示的对应menu的path，在menu中可能是hide的然后展示其他menu active状态
+ element: React.ReactNode // 路由对应的页面组件
+ dontNeedMenu?: boolean // 不需要左侧menu
+}>
+
+export type IMenuItem = {
+ label: string
+ path: string
+ item?: IMenuItem[]
+ showPath?: string
+ hideItem?: IMenuItem[]
+}
+
+export type IMenuList = {
+ label: string
+ icon: JSX.Element
+ path?: string
+ item?: IMenuItem[]
+ hideItem?: IMenuItem[]
+}[]

client/src/components/Console/index.tsx

@@ -4,117 +4,10 @@ import Menu from '../Menu'
 import {Outlet, useNavigate, useLocation} from "react-router-dom";
 import * as Icon from 'tdesign-icons-react'
 import {Dropdown, Dialog} from 'tdesign-react';
-import {checkLogin, initNav, logout} from "../../utils/login";
-
-export const routes = {
- home: {
- label: '首页',
- path: '/home'
- },
- authorizedAccountManage: {
- label: '授权帐号管理',
- path: '/authorizedAccountManage'
- },
- authPageManage: {
- label: '授权链接生成器',
- path: '/authPageManage'
- },
- passwordManage: {
- label: 'Secret与密码管理',
- path: '/passwordManage'
- },
- systemVersion: {
- label: '系统版本',
- path: '/systemVersion'
- },
- login: {
- label: '登录',
- path: '/login'
- },
- authorize: {
- label: '授权页',
- path: '/authorize'
- },
- authorizeH5: {
- label: '授权页H5',
- path: '/authorizeH5'
- },
- developTools: {
- label: '开发调试',
- path: '/developTools'
- },
- thirdToken: {
- label: '第三方 Token',
- path: '/developTools/token',
- showPath: '/developTools'
- },
- thirdMessage: {
- label: '第三方消息查看',
- path: '/developTools/message',
- showPath: '/developTools',
- },
- forwardMessage: {
- label: '消息转发器',
- path: '/forwardMessage'
- },
- proxyConfig: {
- label: 'proxy 配置',
- path: '/proxyConfig'
- },
- redirectPage: {
- label: '授权回调跳转页',
- path: '/redirectPage'
- },
- miniProgramVersion: {
- label: '版本管理',
- path: '/authorizedAccountManage/miniProgramVersion',
- showPath: '/authorizedAccountManage'
- },
- submitAudit: {
- label: '提交审核',
- path: '/authorizedAccountManage/submitAudit',
- showPath: '/authorizedAccountManage'
- },
-}
-
-type IMenuItem = {
- label: string
- path: string
- item?: IMenuItem[]
- showPath?: string
- hideItem?: IMenuItem[]
-}
-
-type IMenuList = {
- label: string
- icon: JSX.Element
- path?: string
- item?: IMenuItem[]
- hideItem?: IMenuItem[]
-}[]
-
-const menuList: IMenuList = [{
- ...routes.home,
- icon: <Icon.HomeIcon />,
-}, {
- label: '管家中心',
- icon: <Icon.AppIcon />,
- item: [routes.authPageManage, {
- ...routes.authorizedAccountManage,
- hideItem: [routes.submitAudit, routes.miniProgramVersion],
- }]
-}, {
- label: '开发辅助',
- icon: <Icon.ViewListIcon />,
- item: [{
- ...routes.developTools,
- hideItem: [routes.thirdToken, routes.thirdMessage],
- }, routes.forwardMessage, routes.proxyConfig]
-}, {
- label: '系统管理',
- icon: <Icon.SettingIcon />,
- item: [routes.passwordManage, routes.systemVersion]
-}]
+import {checkLogin, logout} from "../../utils/login";
+import {menuList} from "../../config/menu";
+import {IMenuItem, IMenuList} from "../../commonType";
+import {routes} from "../../config/route";
 
 const options = [
  {
@@ -141,7 +34,6 @@ export default function Console() {
  const [username] = useState(localStorage.getItem('username') || '')
 
  useEffect(() => {
- initNav(navigate)
  if (checkLogin()) {
  if (location.pathname === '/' || location.pathname === routes.login.path) {
  navigate(routes.home.path)
@@ -187,7 +79,7 @@ export default function Console() {
 
  return (
  <div className={styles.console}>
- <div style={{width: '232px'}} />
+ <div style={{width: '232px', backgroundColor: '#f5f6f7'}} />
  <span className={styles.console_menu}>
  <Menu menuList={menuList} />
  </span>
@@ -222,7 +114,7 @@ export default function Console() {
  </div>
  <Dialog header="通知中心" visible={showNotice} onConfirm={() => setShowNotice(false)}
  onClose={() => setShowNotice(false)}>
- <p>管理工具最新版本为V 2.1.0，详情可前往<a className="a" href={`#${routes.systemVersion.path}`}>系统版本</a>查看</p>
+ <p>管理工具最新版本为V 2.2.0，详情可前往<a className="a" href={`#${routes.systemVersion.path}`}>系统版本</a>查看</p>
  </Dialog>
  </div>
  )