feat: weather widget plugin

apps/web/package.json

@@ -60,7 +60,8 @@
         "vite-plugin-imp": "^2.4.0",
         "vite-plugin-node-polyfills": "^0.22.0",
         "vite-plugin-progress": "^0.0.7",
-        "vite-plugin-stylelint": "^5.3.1"
+        "vite-plugin-stylelint": "^5.3.1",
+        "vite-plugin-svg-icons": "^2.0.1"
     },
     "browserslist": {
         "production": [

apps/web/src/components/index.ts

@@ -8,3 +8,4 @@ export { default as Tooltip } from './tooltip';
 export { default as DateRangePicker } from './date-range-picker';
 export { default as RouteLoadingIndicator } from './route-loading-indicator';
 export { default as Empty } from './empty';
+export { default as SvgIcon } from './svg-icon';

apps/web/src/components/svg-icon/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
+    name: string;
+    prefix?: string;
+    color?: string;
+}
+
+const SvgIcon: React.FC<SvgIconProps> = props => {
+    const { name, prefix = 'icon', color = 'currentColor', ...restProps } = props;
+
+    const symbolId = `#${prefix}-${name}`;
+
+    return (
+        <svg {...restProps} aria-hidden="true">
+            <use href={symbolId} fill={color} />
+        </svg>
+    );
+};
+
+export default SvgIcon;

apps/web/src/main.tsx

@@ -4,6 +4,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { i18n, theme } from '@milesight/shared/src/services';
 import routes from '@/routes';
 import '@/styles/index.less';
+import 'virtual:svg-icons-register';
 
 const router = createBrowserRouter(routes, { basename: '/' });
 const root = createRoot(document.getElementById('root')!);

apps/web/src/plugin/config-plugin/style.less

@@ -9,6 +9,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        max-width: calc(100% - 400px);
         padding: @padding-xl;
         background-color: var(--gray-color-2);
         border: @border-base;

apps/web/src/plugin/plugins/weather-widget/config.json

@@ -0,0 +1,49 @@
+{
+    "type": "weatherWidget",
+    "name": "Weather Widget",
+    "class": "operate",
+    "icon": "./icon.png",
+    "defaultRow": 6,
+    "defaultCol": 8,
+    "minRow": 4,
+    "minCol": 4,
+    "configProps": [
+        {
+            "style": "width: 100%",
+            "components": [
+                {
+                    "type": "entitySelect",
+                    "title": "Entity",
+                    "key": "entity",
+                    "style": "width: 100%",
+                    "getDataUrl": "",
+                    "componentProps": {
+                        "size": "small",
+                        "entityType": ["SERVICE"],
+                        "entityExcludeChildren": true
+                    },
+                    "rules": {
+                        "required": true
+                    }
+                }
+            ]
+        },
+        {
+            "components": [
+                {
+                    "type": "input",
+                    "title": "Title",
+                    "key": "title",
+                    "defaultValue": "Title",
+                    "componentProps": {
+                        "size": "small",
+                        "inputProps": {
+                            "maxLength": 35
+                        }
+                    }
+                }
+            ]
+        }
+    ],
+    "view": []
+}

apps/web/src/plugin/plugins/weather-widget/configure/index.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import { RenderConfig } from '../../../render';
+
+interface ConfigPluginProps {
+    config: CustomComponentProps;
+    value: any;
+    onOk: (data: any) => void;
+    onChange: (data: any) => void;
+}
+
+const Plugin = forwardRef((props: ConfigPluginProps, ref: any) => {
+    const { onOk, onChange, value, config } = props;
+
+    const handleSubmit = (data: any) => {
+        onOk(data);
+    };
+
+    return (
+        <RenderConfig
+            config={config}
+            onOk={handleSubmit}
+            ref={ref}
+            onChange={onChange}
+            value={value}
+        />
+    );
+});
+
+export default Plugin;