Browse Source

项目详情:README.md

WanRuixiang 7 months ago
parent
commit
441c6ca4c0
4 changed files with 103 additions and 12 deletions
  1. 95 5
      README.md
  2. 1 0
      src/app/components/ChartsGraph/index.jsx
  3. 5 5
      src/utils/columnsFactory.jsx
  4. 2 2
      src/utils/loadable.jsx

+ 95 - 5
README.md

@@ -1,8 +1,98 @@
-# React + Vite
+# 普瑞数据中台指标系统
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+智能指标管理平台
 
-Currently, two official plugins are available:
+## 目录
+
+- [安装](#安装)
+- [使用](#使用)
+- [项目结构](#项目结构)
+- [技术栈](#技术栈)
+- [贡献](#贡献)
+- [许可证](#许可证)
+
+## 安装
+运行以下命令安装项目所需的依赖:
+```shell
+npm install --legacy-peer-deps
+```
+or
+```shell
+npm run bootstrap
+```
+
+## 使用
+
+### 开发模式 
+`React` + `JavaScripts` + `Vite`
+
+### 打包
+```shell
+ npm run build
+ ```
+
+### 代码检查
+```shell
+npm run lint
+```
+
+### 预览
+> 用于项目打包过后运行dist文件
+```shell
+npm run preview
+```
+
+## 项目结构
+```
++-- public  项目公共资源
+    |   +-- *.svg 图标
+    |   +-- *.png 图片
++-- src 开发中一般只关注这个文件夹
+    |   +-- app 应用代码入口
+            |   +-- assets 公共静态资源
+            |   +-- component 公共组件
+            |   +-- hooks 公共钩子函数
+            |   +-- pages 页面
+                    |   +-- MainPage 首页
+                            |   +-- slice 进入首页后的路由、接口、状态切片
+            |   +-- slice 登录api、主页状态管理
+            +-- AppRouter 路由
+            +-- constants.js 应用常量
+    |   +-- locales i18n国际化配置相关代码
+    |   +-- redux 全局状态管理配置
+    |   +-- styles 全局主题配置
+    |   +-- utils 工具(如:axios)
+    |   +-- app 项目入口
+    +-- entryPointFactory.jsx 全局装配入口
+    +-- global.less 全局样式表
+    +-- globalConstants.js 全局常量
+    +-- main.jsx 路由、antd主题、i18n装配入口
++-- .eslintrc.cjs  eslint规则
++-- index.html  入口页面
++-- readme.md
++-- vite.config.js  构建配置文件
+```
+
+## 技术栈
+
+- **编程语言**:JavaScript
+- **框架/库**:
+    - React.js :用于构建用户界面的渐进式框架
+    - react-redux : 状态管理
+    - react-router-dom : 路由管理
+    - Axios :用于发送 HTTP 请求
+    - antd :Antd组件库
+    - pro-components :Antd重型组件库
+    - i18next:国际化配置
+    - ReactFlow : 工作流组件库
+    - monaco-editor :代码编辑器-微软web
+    - AntdV :图表组件库
+- **样式**:
+    - CSS :基础样式
+    - Less :增强 CSS 的功能
+    - Style-components : CSS in JS 用于统一项目样式,简化项目结构
+- **构建工具**:
+    - Vite :模块打包器
+    - Babel :JavaScript 编译器
+- **版本控制**:Git
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

+ 1 - 0
src/app/components/ChartsGraph/index.jsx

@@ -29,6 +29,7 @@ export const ChartsGraph = memo(({
     const config = {
       data,
       xField: (d)=>dimensionType==="DATE" ? new Date(d.dimension).toLocaleDateString():d.dimension,
+      stack:false,
       yField: 'metric',
       colorField: 'category',
       axis: {y: { labelFormatter: '~s' }},

+ 5 - 5
src/utils/columnsFactory.jsx

@@ -34,16 +34,16 @@ export const columnsFactory = ({
     render: (text, record, _, action) => {
       let creator = []
       // 打开编辑弹窗
-      onEdit && creator.push(<a key="editable" onClick={()=>onEdit(record)}>编辑</a>)
+      onEdit && creator.push(<a key="editable" onClick={()=>onEdit(record)}>编辑</a>);
       // 编辑当前行
-      onEditRow && creator.push(<a key="editable" onClick={()=>action?.startEditable?.(record.id)}>编辑</a>)
+      onEditRow && creator.push(<a key="editable" onClick={()=>action?.startEditable?.(record.id)}>编辑</a>);
       // 打开当前行明细
-      onDetail && creator.push(<a target="_blank" rel="noopener noreferrer" key="view" onClick={()=>onDetail(record)}>查看</a>)
+      onDetail && creator.push(<a target="_blank" rel="noopener noreferrer" key="view" onClick={()=>onDetail(record)}>查看</a>);
       // 下拉菜单中的选项
       if (onDelete || onCopy) {
         let menus = []
-        onDelete && menus.push({key: 'delete', name: '删除'})
-        onCopy && menus.push({key: 'copy', name: '复制'})
+        onDelete && menus.push({key: 'delete', name: '删除'});
+        onCopy && menus.push({key: 'copy', name: '复制'});
         creator.push(
           <TableDropdown
             key="actionGroup"

+ 2 - 2
src/utils/loadable.jsx

@@ -1,5 +1,5 @@
-import { LoadingOutlined } from '@ant-design/icons';
 import { lazy, Suspense } from 'react';
+import {Spin} from "antd";
 
 
 // 定义一个函数 lazyLoad,接受三个参数:importFunc 为一个函数,返回一个 Promise;selectorFunc 为一个可选的函数,接受 Promise 的结果并返回一个值;opts 为一个对象,包含 fallback 属性
@@ -22,6 +22,6 @@ const lazyLoad = (importFunc, selectorFunc, opts) => {
 };
 // 定义一个默认的 lazyLoad 函数,使用默认的 opts
 const defaultLazyLoad = (importFunc, selectorFunc) => lazyLoad(importFunc, selectorFunc, {
-  fallback: <LoadingOutlined />
+  fallback: <Spin size="large" />
 });
 export { lazyLoad, defaultLazyLoad };