Add custom entity feature

.env

@@ -5,9 +5,11 @@ WEB_API_ORIGIN=/
 # Websocket Host 地址
 WEB_WS_HOST=/
 # 接口 API 代理地址
-WEB_API_PROXY=https://beaver-iot.milesight.com/api/v1
+# WEB_API_PROXY=https://demo.beaver-iot.com/api/v1
+WEB_API_PROXY=http://192.168.43.48:9200
 # WebSocket 代理地址
-WEB_SOCKET_PROXY=wss://beaver-iot.milesight.com
+# WEB_SOCKET_PROXY=wss://demo.beaver-iot.com
+WEB_SOCKET_PROXY=ws://192.168.43.48:9200
 
 # Oauth client ID
 OAUTH_CLIENT_ID=iab

apps/web/README.md

@@ -1,50 +1,51 @@
 # Beaver IoT Web
 
-This project is the Beaver IoT Web application, built upon the following core technologies:
+本项目是 Beaver IoT Web 应用，基础技术栈包括：
 
-- View Library: React
-- Request Library: Axios
-- Component Library: Ysd-iot
-- State Management: Zustand
-- Internationalization: react-intl-universal
-- General Hooks: Ahooks
+- 视图库：React
+- 请求库：Axios
+- 组件库：Ysd-iot
+- 状态管理：Zustand
+- 国际化：react-intl-universal
+- 通用 Hook：Ahooks
 
-## Directory Structure
+## 目录结构
 
 ```
 @app/web
 ├── public
 ├── src
-│   ├── assets                  # Image assets
-│   ├── components              # Global components
-│   ├── hooks                   # Global hooks
-│   ├── layouts                 # Layout components
-│   ├── pages                   # Route page resources
+│   ├── assets                  # 图片资源
+│   ├── components              # 全局组件
+│   ├── hooks                   # 全局 Hooks
+│   ├── layouts                 # 布局组件
+│   ├── pages                   # 路由页面资源
 │   │     ├── page-a
-│   │     │     ├── components  # Page components
-│   │     │     ├── index.ts    # Page entry
-│   │     │     ├── store.ts    # Page shared state
+│   │     │     ├── components  # 页面组件
+│   │     │     ├── index.ts    # 页面入口
+│   │     │     ├── store.ts    # 页面共享状态
 │   │     │     ├── style.ts
 │   │     │     └── ...
 │   │     │
 │   │     └── page-b
 │   │
-│   ├── routes                  # Route configuration
-│   ├── services                # Common services
-│   ├── stores                  # Global state
-│   ├── styles                  # Global styles
-│   ├── main.ts                 # Application entry
-│   └── typings.d.ts            # Type definitions
+│   ├── routes                  # 路由配置
+│   ├── services                # 通用服务
+│   ├── stores                  # 全局状态
+│   ├── styles                  # 全局样式
+│   ├── main.ts                 # 应用入口
+│   └── typings.d.ts            # 类型约束
 │
-├── index.html                  # Entry HTML
+├── index.html                  # 入口 Html
 ├── package.json
 ├── tsconfig.json
 ├── tsconfig.node.json
-└── vite.config.ts              # Build configuration
+└── vite.config.ts              # 构建配置
 ```
 
-## Development and Maintenance
+## 开发维护
 
-### Alias Support
+### 别名支持
+
+- `'@': './src/*'` src 路径别名
 
-- `'@': './src/*'` src path alias

apps/web/package.json

@@ -13,13 +13,25 @@
         "ts-check": "tsc --noEmit"
     },
     "dependencies": {
+        "@codemirror/commands": "^6.7.1",
+        "@codemirror/lang-java": "^6.0.1",
+        "@codemirror/lang-javascript": "^6.2.2",
+        "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/lang-markdown": "^6.3.1",
+        "@codemirror/lang-python": "^6.1.6",
+        "@codemirror/lang-yaml": "^6.1.2",
+        "@codemirror/language": "^6.10.6",
+        "@codemirror/legacy-modes": "^6.4.2",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@milesight/locales": "workspace:*",
         "@milesight/shared": "workspace:*",
         "@mui/material": "^6.1.0",
         "@mui/x-data-grid": "^7.16.0",
         "@mui/x-date-pickers": "^7.18.0",
+        "@uiw/codemirror-theme-vscode": "^4.23.7",
+        "@uiw/react-codemirror": "^4.23.6",
+        "@xyflow/react": "^12.3.5",
         "ahooks": "^3.8.1",
         "axios": "^1.7.7",
         "chart.js": "^4.4.4",
@@ -37,6 +49,7 @@
         "react-intl-universal": "^2.11.1",
         "react-router": "^6.26.1",
         "react-router-dom": "^6.26.1",
+        "uuid": "^11.0.3",
         "zustand": "^4.5.5"
     },
     "devDependencies": {

apps/web/src/components/code-editor/README.md

@@ -0,0 +1,144 @@
+## `CodeEditor` Component Usage
+
+### 1. Default Usage
+```jsx
+const App = () => {
+    return (
+        <CodeEditor defaultEditorLang="markdown" />;
+    )
+}
+```
+
+### 2. Controlled Editor Language and Content
+```jsx
+const App = () => {
+    const [editorLang, setEditorLang] = useState('markdown');
+    const [editorContent, setEditorContent] = useState('Hello World');
+
+    return (
+        <CodeEditor
+            editorLang={editorLang}
+            onLangChange={setEditorLang}
+            value={editorContent}
+            onChange={setEditorContent}
+        />
+    )
+}
+```
+
+### 3. Hide Certain Features
+```jsx
+const App = () => {
+    return (
+        <CodeEditor
+            // Hide function fold buttons
+            showFold={false}
+            // Hide line numbers
+            showLineNumber={false}
+            // ...other properties
+        />
+    )
+}
+``` 
+
+### 4. Read-Only/Edit Mode
+
+```jsx
+const App = () => {
+    return (
+        <CodeEditor
+            // Read-only mode: Editing is not allowed, but the cursor position will be shown
+            readOnly
+            // Edit mode: Only selection and copying are allowed, no cursor or editing behavior
+            editable
+        />
+    );
+};
+```
+
+### 5. Custom Header
+
+- Simple adjustments, such as modifying only the title and icon
+```jsx
+import { useCallback } from 'react';
+import { CheckCircleIcon } from '@milesight/shared/src/components';
+import { CodeEditor, CodeEditorToolbar, type EditorToolbarProps } from '@/components';
+
+const App = () => {
+    const renderHeader = useCallback(
+        (props: EditorToolbarProps) => (
+            <CodeEditorToolbar {...props} icon={<CheckCircleIcon />} title="xxxx" />
+        ),
+        [],
+    );
+
+    return <CodeEditor renderHeader={renderHeader} />;
+};
+```
+OR
+```jsx
+import { CheckCircleIcon } from '@milesight/shared/src/components';
+import { CodeEditor } from '@/components';
+
+const App = () => {
+    return <CodeEditor icon={<CheckCircleIcon />} title="xxxx" />;
+};
+```
+
+
+- Custom layout, but using some components like `CodeEditorSelect`
+```jsx
+import { useCallback } from 'react';
+import {
+    CodeEditor,
+    CodeEditorSelect,
+    COMMON_EDITOR_HEADER_CLASS,
+    type EditorToolbarProps,
+} from '@/components';
+
+const App = () => {
+    const renderHeader = useCallback(
+        (props: EditorToolbarProps) => (
+            <div className={COMMON_EDITOR_HEADER_CLASS}>
+                {/* Reuse the select component */}
+                <CodeEditorSelect
+                    {...props}
+                    renderOptions={options =>
+                        options.map(option => <p key={option.value}>{option.label}</p>)
+                    }
+                />
+                <div>Some styles you want</div>
+            </div>
+        ),
+        [],
+    );
+
+    return <CodeEditor renderHeader={renderHeader} />;
+};
+```
+
+- Fully custom header component
+```jsx
+import { useCallback } from 'react';
+import { CodeEditor, COMMON_EDITOR_HEADER_CLASS, type EditorToolbarProps } from '@/components';
+
+const App = () => {
+    const renderHeader = useCallback((props: EditorToolbarProps) => {
+        const { editorHandlers } = props;
+        const { redo, undo, insert } = editorHandlers || {};
+
+        return (
+            <div className={COMMON_EDITOR_HEADER_CLASS}>
+                <div>Content</div>
+                <div>
+                    <div onClick={undo}>undo</div>
+                    <div onClick={redo}>redo</div>
+                    <div onClick={() => insert('Value you want to insert')}>insert</div>
+                </div>
+            </div>
+        );
+    }, []);
+
+    return <CodeEditor renderHeader={renderHeader} />;
+};
+```

apps/web/src/components/code-editor/components/custom-header/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import EditorHeader from '../header';
+import type { EditorProps, EditorToolbarProps } from '../../types';
+
+export default React.memo((props: EditorToolbarProps & Pick<EditorProps, 'renderHeader'>) => {
+    const { renderHeader, ...rest } = props;
+
+    if (renderHeader) return renderHeader(rest);
+    return <EditorHeader {...rest} />;
+});

apps/web/src/components/code-editor/components/editor/index.tsx

@@ -0,0 +1,89 @@
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import cls from 'classnames';
+import CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
+// support language
+import { yaml } from '@codemirror/lang-yaml';
+import { json } from '@codemirror/lang-json';
+import { java } from '@codemirror/lang-java';
+import { python } from '@codemirror/lang-python';
+import { javascript } from '@codemirror/lang-javascript';
+import { markdown } from '@codemirror/lang-markdown';
+// extension language
+import { StreamLanguage } from '@codemirror/language';
+import { groovy } from '@codemirror/legacy-modes/mode/groovy';
+
+import type { EditorContentProps, EditorSupportLang } from '../../types';
+import './style.less';
+
+interface IProps extends EditorContentProps {
+    editorLang?: EditorSupportLang;
+    editorValue: string;
+    setEditorValue: (value: string) => void;
+}
+/**
+ * @docs https://github.com/uiwjs/react-codemirror
+ */
+export const CodeEditorContent = forwardRef<ReactCodeMirrorRef, IProps>((props, ref) => {
+    const {
+        showLineNumber = true,
+        showFold = true,
+        editable = true,
+        readOnly = false,
+        editorLang,
+        editorValue,
+        theme,
+        setEditorValue,
+        ...rest
+    } = props;
+
+    /** editor input change callback */
+    const onInputChange = useCallback(
+        (value: string) => {
+            setEditorValue(value);
+        },
+        [setEditorValue],
+    );
+
+    /** Select the corresponding extension based on the language */
+    const extensions = useMemo(() => {
+        switch (editorLang) {
+            case 'yaml':
+                return [yaml()];
+            case 'json':
+                return [json()];
+            case 'mvel':
+                // The mvel language is similar to java, which is used here for highlighting
+                return [java()];
+            case 'python':
+                return [python()];
+            case 'js':
+                return [javascript()];
+            case 'groovy':
+                return [StreamLanguage.define(groovy)];
+            case 'markdown':
+                return [markdown()];
+            case 'text':
+            default:
+                return [];
+        }
+    }, [editorLang]);
+
+    return (
+        <CodeMirror
+            {...rest}
+            ref={ref}
+            className={cls('ms-code-editor-content', {
+                [`ms-editor__lineNumbers--hide`]: !showLineNumber,
+                [`ms-editor__foldGutter--hide`]: !showFold,
+            })}
+            value={editorValue}
+            extensions={extensions}
+            onChange={onInputChange}
+            theme={theme}
+            readOnly={readOnly}
+            editable={editable}
+        />
+    );
+});
+
+export default React.memo(CodeEditorContent);