路由&菜单

admin-views/.umirc.ts

@@ -25,10 +25,18 @@ export default defineConfig({
         '@umijs/plugins/dist/request',
         '@umijs/plugins/dist/initial-state',
         '@umijs/plugins/dist/model',
+        '@umijs/plugins/dist/locale',
     ],
     tailwindcss: {},
     request: {},
     model: {},
     initialState: {},
-    proxy
+    locale: {
+        default: 'en-US',
+        useLocalStorage: true,
+    },
+    proxy,
+    headScripts: [
+        'window.$adminApiPrefix = "/admin-api"'
+    ]
 })

admin-views/package.json

@@ -9,8 +9,15 @@
     "start": "npm run dev"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.2",
     "@iconify/react": "^4.1.1",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-react": "^1.0.6",
     "ahooks": "^3.7.8",
+    "amis": "^3.4.0",
+    "amis-editor": "^5.5.0",
+    "amis-editor-core": "^5.5.0",
+    "amis-ui": "^3.4.0",
     "antd": "^5.8.6",
     "umi": "^4.0.79"
   },

admin-views/src/app.tsx

@@ -1,14 +1,17 @@
 import type {RequestConfig} from 'umi'
 import {fetchUserRoutes} from '@/services'
 import {message} from 'antd'
+import {getToken} from '@/utils/auth'
+import {patch} from '@/utils/dynamicRoute'
+
+let extraRoutes: any
+
 
 export const getInitialState = async () => {
-    console.log('getInitialState')
-    return {}
+    return {extraRoutes}
 }
 
 export const request: RequestConfig = {
-    timeout: 1000,
     baseURL: '/admin-api',
     headers: {'X-Requested-With': 'XMLHttpRequest'},
     errorConfig: {
@@ -22,9 +25,12 @@ export const request: RequestConfig = {
     // 请求拦截器
     requestInterceptors: [
         (config: any) => {
-            console.log('requestInterceptors', config)
-            // 拦截请求配置，进行个性化处理。
-            return {...config}
+            const handleConfig = {...config}
+            const token = getToken()
+
+            handleConfig.headers.Authorization = `Bearer ${token}`
+
+            return handleConfig
         }
     ],
     // 响应拦截器
@@ -38,7 +44,7 @@ export const request: RequestConfig = {
                     if (window.location.hash != '/login') {
                         window.location.hash = '/login'
                     }
-                }else{
+                } else {
                     message.error(data.msg || '请求失败')
                 }
             }
@@ -48,13 +54,8 @@ export const request: RequestConfig = {
     ]
 }
 
-let extraRoutes: any
-
 export const patchClientRoutes = ({routes}: { routes: any }) => {
-
-    // 根据 extraRoutes 对 routes 做一些修改
-    // patch(routes, extraRoutes);
-    console.log('patchClientRoutes', routes, extraRoutes)
+    patch(routes, extraRoutes)
 }
 
 export const render = (oldRender: any) => {

admin-views/src/components/AmisEditor/index.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import {Editor} from "amis-editor"
+import clipboard from "@/utils/clipboard"
+import "amis-editor-core/lib/style.css"
+import "./style/index.less"
+import {message} from 'antd'
+import {useNavigate} from '@@/exports'
+import {useModel} from '@@/plugin-model'
+import {amisRequest} from '@/services'
+
+function AmisEditor({onChange, preview}) {
+    const [schema, setSchema] = React.useState({} as any)
+    const navigate = useNavigate()
+    const {getSetting} = useModel('settingModel')
+
+    const change = (val) => {
+        onChange(val)
+    }
+
+    const env = {
+        enableAMISDebug: getSetting('show_development_tools'),
+        fetcher: ({url, method, data}) => amisRequest(url, method, data),
+        updateLocation: (location, replace) => {
+            replace || navigate(location)
+        },
+        jumpTo: (location: string) => {
+            if (location.startsWith("http") || location.startsWith("https")) {
+                window.open(location)
+            } else {
+                navigate(location.startsWith("/") ? location : `/${location}`)
+            }
+        },
+        copy: async (content) => {
+            await clipboard(content)
+
+            message.success("复制成功")
+        },
+        notify: (type: "error" | "success", msg: string) => {
+            message[type] ? message[type](msg) : console.warn("[Notify]", type, msg)
+        }
+    }
+
+    return (
+        <div className="h-full">
+            <Editor theme="cxd" onChange={change} value={schema} preview={preview} amisEnv={env}/>
+        </div>
+    )
+}
+
+export default AmisEditor

admin-views/src/components/AmisEditor/style/index.less

@@ -0,0 +1,4 @@
+.ae-Editor {
+    border-radius: var(--borderRadius);
+    height: 100%;
+}

admin-views/src/components/AmisRender/CustomComponents/components/SvgIcon/index.tsx

@@ -0,0 +1,6 @@
+import React, {forwardRef} from "react"
+import {Icon} from "@iconify/react"
+
+const SvgIcon = forwardRef((props: any, ref) => <Icon icon={props.icon} className={props.className}/>)
+
+export default SvgIcon

admin-views/src/components/AmisRender/CustomComponents/components/WangEditor/index.tsx

@@ -0,0 +1,134 @@
+import "@wangeditor/editor/dist/css/style.css" // 引入 css
+
+import React, {useState, useEffect, forwardRef} from "react"
+import {useSelector} from "react-redux"
+import {GlobalState} from "@/store"
+import {i18nChangeLanguage} from "@wangeditor/editor"
+import {Editor, Toolbar} from "@wangeditor/editor-for-react"
+import {IDomEditor, IEditorConfig, IToolbarConfig} from "@wangeditor/editor"
+
+interface IProps {
+    className?: string,
+    height?: number,
+    placeholder?: string,
+    value?: string,
+    disabled?: boolean,
+    static?: boolean,
+    autoFocus?: boolean,
+    maxLength?: number,
+    toolbarKeys?: object,
+    insertKeys?: object,
+    excludeKeys?: object,
+    uploadImageServer?: string,
+    uploadImageMaxSize?: number,
+    uploadImageMaxNumber?: number,
+    uploadVideoServer?: string,
+    uploadVideoMaxSize?: number,
+    uploadVideoMaxNumber?: number,
+    onChange?: (html: string) => void,
+}
+
+const WangEditor = forwardRef((props: IProps, ref: any) => {
+    const {appSettings} = useSelector((state: GlobalState) => state)
+    const locale = appSettings.locale == "zh_CN" ? "zh-CN" : "en"
+
+    // editor 实例
+    const [editor, setEditor] = useState<IDomEditor | null>(null)
+
+    // 编辑器内容
+    const [html, setHtml] = useState(props.value || "")
+
+    // 工具栏配置
+    const toolbarConfig: Partial<IToolbarConfig> = {}
+
+    if (props.toolbarKeys) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        toolbarConfig.toolbarKeys = props.toolbarKeys
+    }
+    if (props.insertKeys) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        toolbarConfig.insertKeys = props.insertKeys
+    }
+    if (props.excludeKeys) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        toolbarConfig.excludeKeys = props.excludeKeys
+    }
+
+    // 编辑器配置
+    const editorConfig: Partial<IEditorConfig> = {
+        placeholder: props.placeholder,
+        readOnly: props.disabled || props.static,
+        autoFocus: props.autoFocus,
+        maxLength: props.maxLength,
+        MENU_CONF: {
+            uploadImage: {
+                server: props.uploadImageServer,
+                maxFileSize: props.uploadImageMaxSize || (1024 * 1024 * 2),
+                maxNumberOfFiles: props.uploadImageMaxNumber || 100,
+            },
+            uploadVideo: {
+                server: props.uploadVideoServer,
+                maxFileSize: props.uploadVideoMaxSize || (1024 * 1024 * 10),
+                maxNumberOfFiles: props.uploadVideoMaxNumber || 10,
+            }
+        }
+    }
+
+    const initEditor = () => {
+        // 禁用编辑器
+        if (props.disabled || props.static) {
+            editor?.disable()
+        } else {
+            editor?.enable()
+        }
+    }
+
+    useEffect(() => {
+        if (editor == null) return
+        initEditor()
+        setHtml(props.value || "")
+    }, [props])
+
+    useEffect(() => i18nChangeLanguage(appSettings.locale ? locale : "zh-CN"), [appSettings])
+
+    // 及时销毁 editor ，重要！
+    useEffect(() => {
+        return () => {
+            if (editor == null) return
+            editor.destroy()
+            setEditor(null)
+        }
+    }, [editor])
+
+    return (
+        <div className={props.className} style={{border: "1px solid var(--color-border)", zIndex: 100}}>
+            {props.static || (
+                <Toolbar
+                    editor={editor}
+                    defaultConfig={toolbarConfig}
+                    mode="default"
+                    style={{borderBottom: "1px solid var(--color-border)"}}
+                />
+            )}
+            <Editor
+                defaultConfig={editorConfig}
+                value={html}
+                onCreated={setEditor}
+                onChange={editor => {
+                    setHtml(editor.getHtml())
+                    props.onChange(editor.getHtml())
+                }}
+                mode="default"
+                style={{
+                    overflowY: "hidden",
+                    height: props.height || 400,
+                }}
+            />
+        </div>
+    )
+})
+
+export default WangEditor

admin-views/src/components/AmisRender/CustomComponents/index.tsx

@@ -0,0 +1,10 @@
+import {FormItem, Renderer} from "amis"
+import SvgIcon from "./components/SvgIcon"
+import WangEditor from "./components/WangEditor"
+
+export const registerCustomComponents = () => {
+    // svg icon
+    Renderer({type: "custom-svg-icon", autoVar: true})(SvgIcon)
+    // wangEditor
+    FormItem({type: "custom-wang-editor", autoVar: true})(WangEditor as any)
+}

admin-views/src/components/AmisRender/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import 'amis/lib/themes/cxd.css';
+import 'amis/lib/helper.css';
+import 'amis/sdk/iconfont.css';
+import '@fortawesome/fontawesome-free/css/all.css'
+import "./style/index.css"
+import {render as renderAmis, RenderOptions} from 'amis'
+import {ToastComponent} from 'amis-ui'
+import clipboard from '@/utils/clipboard'
+import {message} from 'antd'
+import {history} from 'umi'
+import {useModel} from '@@/plugin-model'
+import {amisRequest} from '@/services'
+
+const AmisRender = ({schema}:{schema: any}) => {
+    const {getSetting} = useModel('settingModel')
+
+    const localeMap:any = {
+        "zh_CN": "zh-CN",
+        "en": "en-US"
+    }
+
+    const props = {
+        locale: localeMap[getSetting('locale') || "zh_CN"] || "zh-CN",
+        location: history.location,
+    } as any
+
+    const options: RenderOptions = {
+        enableAMISDebug: getSetting('show_development_tools'),
+        fetcher: ({url, method, data}) => amisRequest(url, method, data),
+        updateLocation: (location, replace) => {
+            replace || history.push(location)
+        },
+        jumpTo: (location: string) => {
+            if (location.startsWith("http") || location.startsWith("https")) {
+                window.open(location)
+            } else {
+                history.push(location.startsWith("/") ? location : `/${location}`)
+            }
+        },
+        copy: async (content) => {
+            await clipboard(content)
+
+            message.success(props.locale === "zh-CN" ? "复制成功" : "Copy success")
+        },
+        notify: (type: "error" | "success", msg: string) => {
+            message.destroy()
+            message[type] ? message[type](msg) : console.warn("[Notify]", type, msg)
+        }
+    }
+
+    if(JSON.stringify(schema) == '{}'){
+        return null
+    }
+
+    // {renderAmis(schema, props, options)}
+    return (
+        <div>
+            <ToastComponent key="toast"></ToastComponent>
+            {renderAmis(schema, props, options)}
+        </div>
+    )
+}
+
+export default AmisRender