7 | 
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/src/styles/theme.less:
--------------------------------------------------------------------------------
1 | :root {
2 | --dark-bg-color: #fff;
3 | --dark-color: #000;
4 | --dark-home-bg-color: #f0f2f5;
5 | --dark-logo-color: #001529;
6 | }
7 |
8 | .dark {
9 | --dark-bg-color: #141414;
10 | --dark-color: #fff;
11 | --dark-home-bg-color: #000;
12 | --dark-logo-color: #141414;
13 | }
14 |
--------------------------------------------------------------------------------
/src/utils/loading/loading.tsx:
--------------------------------------------------------------------------------
1 | import { Spin } from 'antd'
2 | import './loading.less'
3 |
4 | export default function Loading({ tip = 'Loading' }: { tip?: string }) {
5 | return (
6 |
6 |
13 |
14 | )
15 | }
16 |
17 | export default NavFooter
18 |
--------------------------------------------------------------------------------
/src/components/LowCodeComponents/LowCodeParagraph/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @description 问卷 - 段落
3 | *
4 | */
5 |
6 | import Component from './Component'
7 | import PropComponent from './PropComponent'
8 | import { LowCodeParagraphDefaultProps } from './interface'
9 |
10 | export * from './interface'
11 |
12 | // Paragraph 组件的配置
13 | export default {
14 | title: '段落',
15 | type: 'LowCodeParagraph', // 要和后端统一好
16 | Component,
17 | PropComponent,
18 | defaultProps: LowCodeParagraphDefaultProps
19 | }
20 |
--------------------------------------------------------------------------------
/src/views/editor/components/EditHeader.module.less:
--------------------------------------------------------------------------------
1 | .header-wrapper {
2 | background-color: #fff;
3 | border-bottom: 1px solid #e8e8e8;
4 | padding: 12px 0;
5 | }
6 |
7 | .header {
8 | display: flex;
9 | margin: 0 24px;
10 |
11 | h1 {
12 | font-size: 18px;
13 | margin-bottom: 0;
14 | line-height: 1;
15 | }
16 |
17 | .left {
18 | flex: 1;
19 | }
20 |
21 | .main {
22 | flex: 1;
23 | text-align: center;
24 | }
25 |
26 | .right {
27 | flex: 1;
28 | text-align: right;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/LowCodeComponents/LowCodeTextarea/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @description 问卷 多行输入
3 | *
4 | */
5 |
6 | import Component from './Component'
7 | import PropComponent from './PropComponent'
8 | import { LowCodeTextareaDefaultProps } from './interface'
9 |
10 | export * from './interface'
11 |
12 | // Textarea 组件的配置
13 | export default {
14 | title: '多行输入',
15 | type: 'LowCodeTextarea', // 要和后端统一好
16 | Component, // 画布显示的组件
17 | PropComponent, // 修改属性
18 | defaultProps: LowCodeTextareaDefaultProps
19 | }
20 |
--------------------------------------------------------------------------------
/src/router/AuthLoader.ts:
--------------------------------------------------------------------------------
1 | import api from '@/api'
2 | import { Menu } from '@/types/api'
3 | import { getMenuPath } from '@/utils'
4 | export interface IAuthLoader {
5 | buttonList: string[]
6 | menuList: Menu.MenuItem[]
7 | menuPathList: string[]
8 | }
9 | export default async function AuthLoader() {
10 | const data = await api.getPermissionList()
11 |
12 | const menuPathList = getMenuPath(data.menuList)
13 | return {
14 | buttonList: data.buttonList,
15 | menuList: data.menuList,
16 | menuPathList
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/utils/loading/index.tsx:
--------------------------------------------------------------------------------
1 | import './loading.less'
2 |
3 | let count = 0
4 |
5 | export const showLoading = () => {
6 | if (count === 0) {
7 | const loading = document.getElementById('loading') as HTMLDivElement
8 | loading.style.setProperty('display', 'flex')
9 | }
10 | count++
11 | }
12 |
13 | export const hideLoading = () => {
14 | count--
15 |
16 | if (count === 0) {
17 | const loading = document.getElementById('loading') as HTMLDivElement
18 | loading.style.setProperty('display', 'none')
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/hook/useCharts.ts:
--------------------------------------------------------------------------------
1 | import * as echarts from 'echarts'
2 | import { useEffect, useRef, useState, RefObject } from 'react'
3 |
4 | export const useCharts = (): [RefObject
12 | {title}
13 |
17 | )
18 | }
19 |
20 | export default LowCodeInput
21 |
--------------------------------------------------------------------------------
/src/views/lowcode/components/ListSearch.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState } from 'react'
2 | import type { ChangeEvent } from 'react'
3 | import { Input } from 'antd'
4 |
5 | const { Search } = Input
6 |
7 | const ListSearch: FC = () => {
8 | const [value, setValue] = useState('')
9 |
10 | function handleChange(event: ChangeEvent
14 |
15 |
16 |
20 | {children}
21 |
22 | )
23 | }
24 |
25 | export default SortableItem
26 |
--------------------------------------------------------------------------------
/src/components/LowCodeComponents/LowCodeTextarea/Component.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react'
2 |
3 | import Component from './Component'
4 |
5 | test('默认属性', () => {
6 | render(
13 | {title}
14 |
18 | )
19 | }
20 |
21 | export default LowCodeTextarea
22 |
--------------------------------------------------------------------------------
/src/api/lowCodeApi.ts:
--------------------------------------------------------------------------------
1 | import request from '@/utils/request'
2 | import { ResultData, LowCode } from '@/types/api'
3 | import '@/_mock/lowCode'
4 |
5 | export default {
6 | // 获取单个表单信息
7 | getLowCodeService(id: string) {
8 | return request.get
15 |
16 |
17 |
14 | {title}
15 |
16 | {descTextList.map((t, index) => (
17 |
18 | {index > 0 &&
} 19 | {t} 20 | 21 | ))} 22 |
23 |
24 | )
25 | }
26 |
27 | export default Component
28 |
--------------------------------------------------------------------------------
/src/utils/storage.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * localStorage模块封装
3 | */
4 |
5 | export default {
6 | /**
7 | * storage存储
8 | * @param key {string} 参数名称
9 | * @param value {any} 写入值
10 | */
11 | set(key: string, value: any) {
12 | localStorage.setItem(key, JSON.stringify(value))
13 | },
14 | /**
15 | * storage读取
16 | * @param key {string} 参数名称
17 | * @returns storage值
18 | */
19 | get(key: string) {
20 | const value = localStorage.getItem(key)
21 | if (!value) return ''
22 | try {
23 | return JSON.parse(value)
24 | } catch (error) {
25 | return value
26 | }
27 | },
28 | /**
29 | * 删除localStorage值
30 | * @param key {string} 参数名称
31 | */
32 | remove(key: string) {
33 | localStorage.removeItem(key)
34 | },
35 | /**
36 | * 清空localStorage值
37 | */
38 | clear() {
39 | localStorage.clear()
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": [
6 | "ES2020",
7 | "DOM",
8 | "DOM.Iterable"
9 | ],
10 | "module": "ESNext",
11 | "skipLibCheck": true,
12 | /* Bundler mode */
13 | "moduleResolution": "node",
14 | "allowSyntheticDefaultImports": true,
15 | // "allowImportingTsExtensions": true,
16 | "resolveJsonModule": true,
17 | "isolatedModules": true,
18 | "noEmit": true,
19 | "jsx": "react-jsx",
20 | /* Linting */
21 | "strict": true,
22 | "noUnusedLocals": true,
23 | "noUnusedParameters": true,
24 | "noFallthroughCasesInSwitch": true,
25 | "baseUrl": "./",
26 | "paths": {
27 | "@/*": [
28 | "src/*"
29 | ]
30 | }
31 | },
32 | "include": [
33 | "src",
34 | "typings.d.ts"
35 | ],
36 | "references": [
37 | {
38 | "path": "./tsconfig.node.json"
39 | }
40 | ]
41 | }
42 |
--------------------------------------------------------------------------------
/src/api/roleApi.ts:
--------------------------------------------------------------------------------
1 | import request from '@/utils/request'
2 | import { ResultData, Role } from '@/types/api'
3 | import '@/_mock/role'
4 |
5 | export default {
6 | // 获取角色列表
7 | getRoleList(params: Role.Params) {
8 | return request.get} 19 | {t} 20 | 21 | ))} 22 |
} 22 | {t} 23 | 24 | ))} 25 |
12 | {title}
13 |
14 | {list.map(opt => {
15 | const { value, text, checked } = opt
16 | return (
17 |
18 | {text}
19 |
20 | )
21 | })}
22 |
23 |
24 | )
25 | }
26 |
27 | export default Component
28 |
--------------------------------------------------------------------------------
/src/views/editor/index.module.less:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | flex-direction: column;
4 | height: 100vh;
5 | background-color: #f0f2f5;
6 | overflow: hidden;
7 | }
8 |
9 | .content-wrapper {
10 | flex: auto;
11 | padding: 12px 0;
12 | }
13 |
14 | .content {
15 | padding: 12px 0;
16 | margin: 0 24px;
17 | display: flex;
18 | justify-content: space-between;
19 | height: 100%;
20 |
21 | .left {
22 | width: 295px;
23 | background-color: #fff;
24 | padding: 0 12px;
25 | }
26 |
27 | .main {
28 | // flex: 1;
29 |
30 | .canvas-wrapper {
31 | // position: absolute;
32 | width: 400px;
33 | // height: 712px;
34 | // top: 50%;
35 | // left: 50%;
36 | // transform: translateX(-50%) translateY(-50%);
37 |
38 | box-shadow: 0 2px 10px #0000001f;
39 | }
40 | }
41 |
42 | .right {
43 | width: 300px;
44 | background-color: #fff;
45 | padding: 0 12px;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/views/proComponents/index.tsx:
--------------------------------------------------------------------------------
1 | // import { useState } from 'react'
2 | import { Card, Space } from 'antd'
3 | // import CitySelect from '@/components/CitySelect'
4 | import styles from './index.module.less'
5 |
6 | export default function ProComponents() {
7 | // const [cityData, setCityData] = useState({})
8 | // const initValue = {
9 | // area: ['130104', '120105', '120116'],
10 | // city: ['130100', '120100'],
11 | // province: ['120000', '130000']
12 | // }
13 | // const onSelectChange = (val: any) => {
14 | // setCityData(val)
15 | // }
16 |
17 | return (
18 |
19 |
20 |
21 | {/* onSelectChange(val)} /> */}
22 |
23 | {/*
25 |
26 |
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/LowCodeComponents/LowCodeRadio/Component.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react'
2 | import { Typography, Radio, Space } from 'antd'
3 | import { LowCodeRadioPropsType, LowCodeRadioDefaultProps } from './interface'
4 |
5 | const { Paragraph } = Typography
6 |
7 | const Component: FC{JSON.stringify(cityData)}
*/}
24 | 待更新。。。
27 |
12 | {title}
13 |
14 |
15 | {options.map(opt => {
16 | const { value, text } = opt
17 | return (
18 |
19 | {text}
20 |
21 | )
22 | })}
23 |
24 |
25 |
26 | )
27 | }
28 |
29 | export default Component
30 |
--------------------------------------------------------------------------------
/src/components/LowCodeComponents/LowCodeTitle/Component.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react'
2 | import { Typography } from 'antd'
3 | import { LowCodeTitlePropsType, LowCodeTitleDefaultProps } from './interface'
4 |
5 | const { Title } = Typography
6 |
7 | const LowCodeTitle: FC
19 |
27 | {text}
28 |
29 |
30 | )
31 | }
32 |
33 | export default LowCodeTitle
34 |
--------------------------------------------------------------------------------
/src/store/utils.ts:
--------------------------------------------------------------------------------
1 | // import { ComponentInfoType, lowCodeStateType } from './useLowCodeStore'
2 | import { LowCode } from '@/types/api'
3 | /**
4 | * 获取下一个 selectedId
5 | * @param fe_id 当前的 id
6 | * @param componentList 组件列表
7 | */
8 | export function getNextSelectedId(fe_id: string, componentList: Array未选中组件
7 | }
8 |
9 | const ComponentProp: FC = () => {
10 | const { selectedComponent, changeComponentProps } = useLowCodeStore()
11 |
12 | if (selectedComponent == null) return
23 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/src/store/useUserStore.ts:
--------------------------------------------------------------------------------
1 | import { create } from 'zustand'
2 | import { User } from '@/types/api'
3 | import storage from '@/utils/storage'
4 |
5 | export const useUserStore = create<{
6 | token: string
7 | userInfo: User.UserItem
8 | collapsed: boolean
9 | isDark: boolean
10 | language: string
11 | updateToken: (token: string) => void
12 | updateLanguage: (lang: string) => void
13 | updateUserInfo: (userInfo: User.UserItem) => void
14 | updateCollapsed: () => void
15 | updateTheme: (isDark: boolean) => void
16 | }>(set => ({
17 | token: '',
18 | userInfo: {
19 | _id: '',
20 | userId: 0,
21 | userName: '',
22 | userEmail: '',
23 | deptId: '',
24 | state: 0,
25 | mobile: '',
26 | job: '',
27 | role: 0,
28 | roleList: '',
29 | createId: 0,
30 | deptName: '',
31 | userImg: ''
32 | },
33 | language: 'zh',
34 | collapsed: false,
35 | isDark: storage.get('isDark') || false,
36 | updateToken: token => set({ token }),
37 | updateTheme: isDark => set({ isDark }),
38 | updateUserInfo: (userInfo: User.UserItem) => set({ userInfo }),
39 | updateCollapsed: () =>
40 | set(state => {
41 | return {
42 | collapsed: !state.collapsed
43 | }
44 | }),
45 | updateLanguage: language => set({ language })
46 | }))
47 |
--------------------------------------------------------------------------------
/src/components/LowCodeComponents/LowCodeRadio/Component.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react'
2 |
3 | import Component from './Component'
4 |
5 | test('默认属性', () => {
6 | render( clearSelectedId(e)}>
25 |
37 |
26 |
28 |
29 |
33 |
30 |
32 |
34 |
36 |
35 |
44 |
45 |
36 | } onClick={handleCreateClick}>
37 | 新建
38 |
39 |
40 |
41 |
43 |
46 | {/* 列表 */}
47 | {list.length > 0 &&
48 | list.map((q: any) => {
49 | const { _id } = q
50 | return
53 |
54 | )
55 | }
56 |
--------------------------------------------------------------------------------
/src/views/editor/components/ComponentLib.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useCallback } from 'react'
2 | import { nanoid } from 'nanoid'
3 | import { componentConfGroup, ComponentConfType } from '@/components/LowCodeComponents'
4 | import { Typography } from 'antd'
5 | import { useLowCodeStore } from '@/store/useLowCodeStore'
6 | import styles from './ComponentLib.module.less'
7 |
8 | const { Title } = Typography
9 |
10 | function GenComponent(c: ComponentConfType) {
11 | const { title, type, Component, defaultProps } = c
12 | const { addComponent } = useLowCodeStore()
13 |
14 | const handleClick = useCallback(() => {
15 | addComponent({
16 | fe_id: nanoid(), // 前端生成的 id
17 | title,
18 | type,
19 | isHidden: false,
20 | isLocked: false,
21 | props: defaultProps
22 | })
23 | }, [])
24 |
25 | return (
26 |
27 |
31 | )
32 | }
33 |
34 | const Lib: FC = () => {
35 | return (
36 |
28 |
30 |
37 | {componentConfGroup.map((group, index) => {
38 | const { groupId, groupName, components } = group
39 | return (
40 |
49 | )
50 | }
51 |
52 | export default Lib
53 |
--------------------------------------------------------------------------------
/src/views/login/index.module.less:
--------------------------------------------------------------------------------
1 | .loginContainer {
2 | position: relative;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | min-width: 550px;
7 | height: 100vh;
8 | min-height: 500px;
9 | background-image: url('@/assets/images/login_bg.svg');
10 | background-position: 50%;
11 | background-size: 100% 100%;
12 | background-size: cover;
13 | background-color: #eeeeee;
14 | }
15 |
16 | .loginBox {
17 | box-sizing: border-box;
18 | display: flex;
19 | align-items: center;
20 | justify-content: space-around;
21 | width: 96%;
22 | height: 94%;
23 | padding: 0 4% 0 20px;
24 | overflow: hidden;
25 | border-radius: 10px;
26 | background-color: hsla(0, 0%, 100%, 0.8);
27 | }
28 |
29 | .loginLeft {
30 | width: 750px;
31 | img {
32 | width: 100%;
33 | height: 100%;
34 | }
35 | }
36 |
37 | .loginForm {
38 | padding: 40px 45px 25px;
39 | border-radius: 10px;
40 | background-color: hsl(0deg 0% 100% / 80%);
41 | box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.2);
42 | display: flex;
43 | flex-direction: column;
44 | align-items: center;
45 | justify-content: center;
46 | }
47 |
48 | .loginLogo {
49 | width: 100%;
50 | display: flex;
51 | align-items: center;
52 | justify-content: space-around;
53 | margin-bottom: 40px;
54 | }
55 |
56 | .loginIcon {
57 | width: 70px;
58 | }
59 |
60 | .loginText {
61 | font-size: 48px;
62 | font-weight: bold;
63 | white-space: nowrap;
64 | color: #475768;
65 | }
66 |
67 | .loginWrapper {
68 | // position: absolute;
69 | // top: 50%;
70 | // right: 10%;
71 | width: 400px;
72 | // transform: translateY(-50%);
73 | }
74 |
--------------------------------------------------------------------------------
/src/views/lowcode/components/Card.module.less:
--------------------------------------------------------------------------------
1 | // .container {
2 | // margin-bottom: 20px;
3 | // padding: 12px;
4 | // border-radius: 3px;
5 | // background-color: var(--dark-bg-color);
6 |
7 | // &:hover {
8 | // box-shadow: 0 4px 10px #e8e8e8;
9 | // }
10 | // }
11 |
12 | // .title {
13 | // display: flex;
14 |
15 | // .left {
16 | // flex: 1;
17 | // }
18 |
19 | // .right {
20 | // flex: 1;
21 | // text-align: right;
22 | // font-size: 12px;
23 | // }
24 | // }
25 |
26 | // .button-container {
27 | // display: flex;
28 |
29 | // .left {
30 | // flex: 1;
31 | // }
32 |
33 | // .right {
34 | // flex: 1;
35 | // text-align: right;
36 |
37 | // button {
38 | // color: #999;
39 | // }
40 | // }
41 | // }
42 |
43 | .card {
44 | margin-top: 20px;
45 | width: 350px;
46 | background-color: var(--dark-bg-color);
47 | border-radius: 6px;
48 | overflow: hidden;
49 | box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.12);
50 | cursor: pointer;
51 | &:hover {
52 | box-shadow: 0 4px 10px #e8e8e8;
53 | }
54 | }
55 |
56 | .image {
57 | height: 200px;
58 | }
59 |
60 | .image img {
61 | display: block;
62 | width: 100%;
63 | height: inherit;
64 | object-fit: cover;
65 | }
66 |
67 | .content {
68 | padding: 10px;
69 | }
70 |
71 | .title {
72 | display: flex;
73 | align-items: self-start;
74 | justify-content: space-between;
75 | }
76 |
77 | h4 {
78 | margin: 0 0 1rem;
79 | font-size: 1.5rem;
80 | line-height: 1.5rem;
81 | }
82 |
83 | .description {
84 | font-size: 1rem;
85 | line-height: 1.4rem;
86 | }
87 |
88 | .bottom {
89 | padding: 10px;
90 | display: flex;
91 | align-items: center;
92 | justify-content: space-between;
93 | }
94 |
95 | .btn {
96 | display: flex;
97 | justify-content: space-around;
98 | }
99 |
--------------------------------------------------------------------------------
/src/styles/reset.less:
--------------------------------------------------------------------------------
1 | /* Reset style sheet */
2 | html,
3 | body,
4 | div,
5 | span,
6 | applet,
7 | object,
8 | iframe,
9 | h1,
10 | h2,
11 | h3,
12 | h4,
13 | h5,
14 | h6,
15 | p,
16 | blockquote,
17 | pre,
18 | a,
19 | abbr,
20 | acronym,
21 | address,
22 | big,
23 | cite,
24 | code,
25 | del,
26 | dfn,
27 | em,
28 | img,
29 | ins,
30 | kbd,
31 | q,
32 | s,
33 | samp,
34 | small,
35 | strike,
36 | strong,
37 | sub,
38 | sup,
39 | tt,
40 | var,
41 | b,
42 | u,
43 | i,
44 | center,
45 | dl,
46 | dt,
47 | dd,
48 | ol,
49 | ul,
50 | li,
51 | fieldset,
52 | form,
53 | label,
54 | legend,
55 | table,
56 | caption,
57 | tbody,
58 | tfoot,
59 | thead,
60 | tr,
61 | th,
62 | td,
63 | article,
64 | aside,
65 | canvas,
66 | details,
67 | embed,
68 | figure,
69 | figcaption,
70 | footer,
71 | header,
72 | hgroup,
73 | menu,
74 | nav,
75 | output,
76 | ruby,
77 | section,
78 | summary,
79 | time,
80 | mark,
81 | audio,
82 | video {
83 | padding: 0;
84 | margin: 0;
85 | font: inherit;
86 | font-size: 100%;
87 | vertical-align: baseline;
88 | border: 0;
89 | }
90 |
91 | /* HTML5 display-role reset for older browsers */
92 | article,
93 | aside,
94 | details,
95 | figcaption,
96 | figure,
97 | footer,
98 | header,
99 | hgroup,
100 | menu,
101 | nav,
102 | section {
103 | display: block;
104 | }
105 | body {
106 | padding: 0;
107 | margin: 0;
108 | }
109 | ol,
110 | ul {
111 | list-style: none;
112 | }
113 | blockquote,
114 | q {
115 | quotes: none;
116 | }
117 | blockquote::before,
118 | blockquote::after,
119 | q::before,
120 | q::after {
121 | content: "";
122 | content: none;
123 | }
124 | table {
125 | border-spacing: 0;
126 | border-collapse: collapse;
127 | }
128 | html,
129 | body,
130 | #root {
131 | width: 100%;
132 | height: 100%;
133 | }
134 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
41 | 0 ? '20px' : '0' }}>
42 | {groupName}
43 |
44 |
46 | )
47 | })}
48 | {components.map(c => GenComponent(c))}
45 |
49 |
56 |
57 |
58 | )
59 | }
60 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-manager",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "build:dev": "tsc && vite build --mode development",
10 | "build:test": "tsc && vite build --mode test",
11 | "build:pro": "tsc && vite build --mode production",
12 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
13 | "preview": "vite preview"
14 | },
15 | "dependencies": {
16 | "@dnd-kit/core": "^6.0.8",
17 | "@dnd-kit/sortable": "^7.0.2",
18 | "@dnd-kit/utilities": "^3.2.1",
19 | "@reduxjs/toolkit": "^1.9.5",
20 | "@testing-library/jest-dom": "^5.16.5",
21 | "@testing-library/react": "^13.4.0",
22 | "@testing-library/user-event": "^13.5.0",
23 | "@types/jest": "^27.5.2",
24 | "ahooks": "^3.7.8",
25 | "antd": "^5.11.1",
26 | "axios": "^1.6.2",
27 | "classnames": "^2.5.0",
28 | "echarts": "^5.4.3",
29 | "form-render": "^2.3.7",
30 | "i18next": "^23.8.3",
31 | "less": "^4.2.0",
32 | "lodash.clonedeep": "^4.5.0",
33 | "mockjs": "^1.1.0",
34 | "nanoid": "^4.0.2",
35 | "qrcode.react": "^3.1.0",
36 | "react": "^18.2.0",
37 | "react-dom": "^18.2.0",
38 | "react-i18next": "^14.0.5",
39 | "react-router-dom": "^6.18.0",
40 | "redux-undo": "^1.0.1",
41 | "vite-plugin-html": "^3.2.1",
42 | "zustand": "^4.4.6"
43 | },
44 | "devDependencies": {
45 | "@types/lodash.clonedeep": "^4.5.9",
46 | "@types/mockjs": "^1.0.10",
47 | "@types/node": "^20.9.0",
48 | "@types/react": "^18.2.15",
49 | "@types/react-dom": "^18.2.7",
50 | "@typescript-eslint/eslint-plugin": "^6.0.0",
51 | "@typescript-eslint/parser": "^6.0.0",
52 | "@vitejs/plugin-react": "^4.0.3",
53 | "eslint": "^8.45.0",
54 | "eslint-plugin-react-hooks": "^4.6.0",
55 | "eslint-plugin-react-refresh": "^0.4.3",
56 | "prettier": "^3.1.0",
57 | "typescript": "^5.0.2",
58 | "vite": "^4.4.5"
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/styles/common.less:
--------------------------------------------------------------------------------
1 | /* 常用 flex */
2 | .flx-center {
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | }
7 | .flx-justify-between {
8 | display: flex;
9 | align-items: center;
10 | justify-content: space-between;
11 | }
12 | .flx-align-center {
13 | display: flex;
14 | align-items: center;
15 | }
16 |
17 | /* 清除浮动 */
18 | .clearfix::after {
19 | display: block;
20 | height: 0;
21 | overflow: hidden;
22 | clear: both;
23 | content: "";
24 | }
25 |
26 | /* 文字单行省略号 */
27 | .sle {
28 | overflow: hidden;
29 | text-overflow: ellipsis;
30 | white-space: nowrap;
31 | }
32 |
33 | /* 文字多行省略号 */
34 | .mle {
35 | display: -webkit-box;
36 | overflow: hidden;
37 | -webkit-box-orient: vertical;
38 | -webkit-line-clamp: 2;
39 | }
40 |
41 | /* 文字多了自動換行 */
42 | .break-word {
43 | word-break: break-all;
44 | word-wrap: break-word;
45 | }
46 |
47 | /* page switch animation */
48 | .fade-enter {
49 | opacity: 0;
50 | transform: translateX(-30px);
51 | }
52 | .fade-enter-active,
53 | .fade-exit-active {
54 | opacity: 1;
55 | transition: all 0.2s ease-out;
56 | transform: translateX(0);
57 | }
58 | .fade-exit {
59 | opacity: 0;
60 | transform: translateX(30px);
61 | }
62 |
63 | /* scroll bar */
64 | ::-webkit-scrollbar {
65 | width: 8px;
66 | height: 8px;
67 | background-color: #ffffff;
68 | }
69 | ::-webkit-scrollbar-thumb {
70 | background-color: #dddee0;
71 | border-radius: 20px;
72 | box-shadow: inset 0 0 0 #ffffff;
73 | }
74 |
75 | /* card 卡片样式 */
76 | .card {
77 | box-sizing: border-box;
78 | padding: 20px;
79 | overflow-x: hidden;
80 | border: 1px solid #e4e7ed;
81 | border-radius: 4px;
82 | }
83 |
84 | /* content-box */
85 | .content-box {
86 | display: flex;
87 | flex-direction: column;
88 | width: 100%;
89 | height: 100%;
90 | .text {
91 | margin: 30px 0;
92 | font-size: 23px;
93 | font-weight: 700;
94 | text-align: center;
95 | a {
96 | text-decoration: underline !important;
97 | }
98 | }
99 | }
100 |
--------------------------------------------------------------------------------
/src/hook/useBindCanvasKeyPress.ts:
--------------------------------------------------------------------------------
1 | import { useKeyPress } from 'ahooks'
2 | import { ActionCreators as UndoActionCreators } from 'redux-undo'
3 | import { useLowCodeStore } from '@/store/useLowCodeStore'
4 |
5 | /**
6 | * 判断 activeElem 是否合法
7 | */
8 | function isActiveElementValid() {
9 | const activeElem = document.activeElement
10 |
11 | // // 没有增加 dnd-kit 之前
12 | // if (activeElem === document.body) return true // 光标没有 focus 到 input
13 |
14 | // 增加了 dnd-kit 以后
15 | if (activeElem === document.body) return true
16 | if (activeElem?.matches('div[role="button"]')) return true
17 |
18 | return false
19 | }
20 |
21 | function useBindCanvasKeyPress() {
22 | const {
23 | removeSelectedComponent,
24 | copySelectedComponent,
25 | pasteCopiedComponent,
26 | selectPrevComponent,
27 | selectNextComponent
28 | } = useLowCodeStore()
29 |
30 | // 删除组件
31 | useKeyPress(['backspace', 'delete'], () => {
32 | if (!isActiveElementValid()) return
33 | removeSelectedComponent()
34 | })
35 |
36 | // 复制
37 | useKeyPress(['ctrl.c', 'meta.c'], () => {
38 | if (!isActiveElementValid()) return
39 | copySelectedComponent()
40 | })
41 |
42 | // 粘贴
43 | useKeyPress(['ctrl.v', 'meta.v'], () => {
44 | if (!isActiveElementValid()) return
45 | pasteCopiedComponent()
46 | })
47 |
48 | // 选中上一个
49 | useKeyPress('uparrow', () => {
50 | if (!isActiveElementValid()) return
51 | selectPrevComponent()
52 | })
53 |
54 | // 选中下一个
55 | useKeyPress('downarrow', () => {
56 | if (!isActiveElementValid()) return
57 | selectNextComponent()
58 | })
59 |
60 | // 撤销
61 | useKeyPress(
62 | ['ctrl.z', 'meta.z'],
63 | () => {
64 | if (!isActiveElementValid()) return
65 | UndoActionCreators.undo()
66 | },
67 | {
68 | exactMatch: true // 严格匹配
69 | }
70 | )
71 |
72 | // 重做
73 | useKeyPress(['ctrl.shift.z', 'meta.shift.z'], () => {
74 | if (!isActiveElementValid()) return
75 | UndoActionCreators.redo()
76 | })
77 | }
78 |
79 | export default useBindCanvasKeyPress
80 |
--------------------------------------------------------------------------------
/src/layout/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import { Layout, Watermark } from 'antd'
3 | import { Navigate, Outlet, useLocation, useRouteLoaderData } from 'react-router-dom'
4 | import NavHeader from '@/components/NavHeader'
5 | import NavFooter from '@/components/NavFooter'
6 | import Menu from '@/components/Menu'
7 | import api from '@/api'
8 | import { useUserStore } from '@/store/useUserStore'
9 | import { IAuthLoader } from '@/router/AuthLoader'
10 | import { searchRoute } from '@/utils'
11 | import { routers } from '@/router'
12 | import TabsFC from '@/components/Tabs'
13 | import styles from './index.module.less'
14 |
15 | const { Sider } = Layout
16 |
17 | const App: React.FC = () => {
18 | const { collapsed, userInfo, updateUserInfo } = useUserStore()
19 | const { pathname } = useLocation()
20 |
21 | const getUserInfo = async () => {
22 | const data = await api.getUserInfo()
23 |
24 | updateUserInfo(data)
25 | }
26 |
27 | // 权限判断
28 | const data = useRouteLoaderData('layout') as IAuthLoader
29 | const route = searchRoute(pathname, routers)
30 | if (route && route.meta?.auth === false) {
31 | // 继续执行
32 | } else {
33 | const staticPath = ['/welcome', '/403', '/404']
34 | if (!data.menuPathList.includes(pathname) && !staticPath.includes(pathname)) {
35 | return
54 |
59 |
55 |
57 |
22 |
59 | )
60 | }
61 |
--------------------------------------------------------------------------------
/src/views/order/OrderList/components/OrderRoute.tsx:
--------------------------------------------------------------------------------
1 | import { IDetailProp } from '@/types/modal'
2 | import { Modal } from 'antd'
3 | import { useImperativeHandle, useState } from 'react'
4 | import api from '@/api/orderApi'
5 | import { message } from '@/utils/AntdGlobal'
6 | import { Order } from '@/types/api'
7 |
8 | export default function OrderRoute(props: IDetailProp) {
9 | const [visible, setVisible] = useState(false)
10 | const [trackAni, setTrackAni] = useState<{
11 | cancel: () => void
12 | }>()
13 | useImperativeHandle(props.mRef, () => {
14 | return {
15 | open
16 | }
17 | })
18 |
19 | const open = async (orderId: string) => {
20 | const detail = await api.getOrderDetail(orderId)
21 | if (detail.route.length > 0) {
22 | setVisible(true)
23 | setTimeout(() => {
24 | renderMap(detail)
25 | })
26 | } else {
27 | message.info('请先完成打点上报')
28 | }
29 | }
30 |
31 | const renderMap = (detail: Order.OrderItem) => {
32 | const map = new window.BMapGL.Map('orderRouteMap')
33 | map.enableScrollWheelZoom()
34 | map.centerAndZoom(detail.cityName, 17)
35 |
36 | const path = detail.route || []
37 | var point = []
38 | for (var i = 0; i < path.length; i++) {
39 | point.push(new window.BMapGL.Point(path[i].lng, path[i].lat))
40 | }
41 |
42 | const polyline = new window.BMapGL.Polyline(point, {
43 | strokeWeight: '8', //折线宽度，以像素为单位
44 | strokeOpacity: 0.8, // 折线透明度，取值范围0-1
45 | strokeColor: '#ed6c00' // 折线颜色
46 | })
47 |
48 | setTimeout(start, 1000)
49 | function start() {
50 | const trackAni = new window.BMapGLLib.TrackAnimation(map, polyline, {
51 | overallView: true,
52 | tilt: 30,
53 | duration: 20000,
54 | delay: 300
55 | })
56 | trackAni.start()
57 | setTrackAni(trackAni)
58 | }
59 | }
60 |
61 | const handleCancel = () => {
62 | setVisible(false)
63 | trackAni?.cancel()
64 | }
65 | return (
66 |
23 |
36 |
24 |
25 | {title}
26 |
27 |
28 |
29 |
30 | {isPublished ? 已发布 : 未发布 }
31 | 访问: {answerCount}
32 | {createdAt}
33 |
34 |
35 |
38 |
58 |
39 |
40 | } type='text' size='small' onClick={() => nav(`/editor/${_id}`)}>
41 | 编辑
42 |
43 |
44 |
45 |
46 |
47 |
48 | } size='small'>
49 | 复制
50 |
51 |
52 | } size='small' onClick={del}>
53 | 删除
54 |
55 |
56 |
57 |
45 | {contextHolder}
46 |
71 | )
72 | }
73 |
--------------------------------------------------------------------------------
/src/router/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { createHashRouter, Navigate } from 'react-router-dom'
3 | import Login from '@/views/login/Login'
4 | import Welcome from '@/views/welcome'
5 | import Error403 from '@/views/403'
6 | import Error404 from '@/views/404'
7 | import Layout from '@/layout'
8 | import AuthLoader from './AuthLoader'
9 | import { lazyLoad } from './LazyLoad'
10 |
11 | export const routers = [
12 | {
13 | path: '/',
14 | element:
47 | 
48 |
49 |
50 |
57 |
51 | 已发布 : 未发布 }
53 |
54 |
55 | {title}
52 | {isPublished ?{desc}
56 |
58 |
70 | {createdAt}
59 |
60 | } onClick={e => start(e)}>
61 | } style={{ marginLeft: '10px' }} onClick={e => copy(e)}>
62 | }
65 | style={{ marginLeft: '10px' }}
66 | onClick={e => del(e)}
67 | >
68 |
69 |
74 |
90 | )
91 | }
92 |
93 | export default SideMenu
94 |
--------------------------------------------------------------------------------
/src/views/login/Login.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { useUserStore } from '@/store/useUserStore'
3 | import { Button, Form, Input, message } from 'antd'
4 | import { UserOutlined, LockOutlined } from '@ant-design/icons'
5 | import loginLeft from '@/assets/images/login_left.png'
6 | import { useNavigate } from 'react-router-dom'
7 | import api from '@/api'
8 | import logo from '@/assets/images/logo.png'
9 | import { Login } from '@/types/api'
10 | import storage from '@/utils/storage'
11 | import { useTranslation } from 'react-i18next'
12 | import styles from './index.module.less'
13 |
14 | export default function LoginFC() {
15 | const [loading, setLoading] = useState(false)
16 | const navigate = useNavigate()
17 |
18 | const { t } = useTranslation()
19 |
20 | const updateToken = useUserStore(state => state.updateToken)
21 |
22 | const onFinish = async (values: Login.params) => {
23 | try {
24 | setLoading(true)
25 | const data = await api.login(values)
26 |
27 | setLoading(false)
28 | storage.set('token', data)
29 | updateToken(data)
30 | message.success(t('login.success'))
31 | // const params = new URLSearchParams(location.search)
32 | setTimeout(() => {
33 | // location.href = params.get('callback') || '/welcome'
34 | navigate('/welcome')
35 | })
36 | } catch (error) {
37 | setLoading(false)
38 | }
39 | }
40 |
41 | return (
42 |
75 | 
76 | {collapsed ? '' : React-Manager}
77 |
78 |
89 |
43 |
82 | )
83 | }
84 |
--------------------------------------------------------------------------------
/src/views/system/role/SetPermission.tsx:
--------------------------------------------------------------------------------
1 | import { Menu, Role } from '@/types/api'
2 | import { IAction, IModalProp } from '@/types/modal'
3 | import { Modal, Form, Tree } from 'antd'
4 | import { useEffect, useImperativeHandle, useState } from 'react'
5 | import api from '@/api/index'
6 | import roleAPi from '@/api/roleApi'
7 | import { message } from '@/utils/AntdGlobal'
8 | export default function SetPermission(props: IModalProp
44 |
81 |
45 | 
46 |
47 |
48 |
80 |
49 |
50 | React-Manager
51 |
52 |
53 |
54 |
78 |
79 |
41 |
43 | )
44 | }
45 |
46 | // SortableContainer 组件的 items 属性，需要每个 item 都有 id
47 | const componentListWithId = componentList.map(c => {
48 | return { ...c, id: c.fe_id }
49 | })
50 |
51 | // 拖拽排序结束
52 | function handleDragEnd(oldIndex: number, newIndex: number) {
53 | moveComponent({ oldIndex, newIndex })
54 | }
55 |
56 | return (
57 |
59 | {componentList
60 | .filter(c => !c.isHidden)
61 | .map(c => {
62 | const { fe_id, isLocked } = c
63 |
64 | // 拼接class name
65 | const wrapperDefaultClassName = styles['component-wrapper']
66 | const selectedClassName = styles.selected
67 | const lockedClassName = styles.locked
68 | const wrapperClassName = classNames({
69 | [wrapperDefaultClassName]: true,
70 | [selectedClassName]: fe_id === selectedId,
71 | [lockedClassName]: isLocked
72 | })
73 |
74 | return (
75 |
76 |
80 | )
81 | })}
82 |
83 | {/*
94 | handleClick(e, fe_id)}>
77 |
79 | {genComponent(c)}
78 |
84 |
88 |
85 |
87 |
89 |
*/}
93 |
90 |
92 |