@abtnode/ux 1.16.38 → 1.16.39-beta-20250209-032436-5ceca2cb

package/lib/blocklet/audit-log-cell.js

@@ -0,0 +1,237 @@
+/* eslint-disable react/prop-types */
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import rehypeExternalLinks from 'rehype-external-links';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { Avatar, IconButton, Tooltip } from '@mui/material';
+import { CopyButton } from '@arcblock/ux/lib/ClickToCopy';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { debounce } from 'lodash';
+import RelativeTime from '../relative-time';
+import ShortenLabel from './component/shorten-label';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const blockletServerLogo = `
+<svg style="width:38px;height:38px;" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M50.152 10.6417L31.72 0L13.288 10.6417V24.7942L1 31.8887V53.1722L19.432 63.8139L31.6902 56.7366L31.72 56.7538L31.7498 56.7366L44.008 63.8139L62.44 53.1722V31.8887L50.152 24.7942V10.6417ZM60.52 32.9972L48.232 25.9027V11.7502L31.72 2.21703L15.208 11.7502V25.9028L2.92 32.9972V52.0636L19.432 61.5968L31.6902 54.5196L31.72 54.5368L31.7498 54.5196L44.008 61.5968L60.52 52.0636V32.9972Z" fill="url(#paint0_linear_606_96)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M50.1521 24.8307L31.7201 14.189L13.2881 24.8307V46.1141L31.7201 56.7558L50.1521 46.1141V24.8307ZM15.2081 25.9392L31.7201 16.406L48.2321 25.9392V45.0056L31.7201 54.5388L15.2081 45.0056V25.9392ZM28.5464 23.0464C28.6641 22.6342 29.0408 22.3501 29.4695 22.3501H33.9707C34.3993 22.3501 34.776 22.6342 34.8938 23.0464L35.7504 26.0447L37.8696 27.2681L40.8945 26.5109C41.3103 26.4068 41.7447 26.591 41.959 26.9622L44.2096 30.8604C44.424 31.2316 44.3662 31.6998 44.0682 32.0079L41.8999 34.2489V36.6959L44.0682 38.9369C44.3662 39.245 44.424 39.7133 44.2096 40.0845L41.959 43.9827C41.7447 44.3539 41.3103 44.538 40.8945 44.4339L37.8696 43.6767L35.7504 44.9002L34.8938 47.8984C34.776 48.3106 34.3993 48.5947 33.9707 48.5947H29.4695C29.0408 48.5947 28.6641 48.3106 28.5464 47.8984L27.6897 44.9002L25.5706 43.6767L22.5457 44.4339C22.1299 44.538 21.6955 44.3539 21.4812 43.9827L19.2305 40.0845C19.0162 39.7133 19.0739 39.245 19.372 38.9369L21.5402 36.6959V34.2489L19.372 32.0079C19.0739 31.6998 19.0162 31.2316 19.2305 30.8604L21.4812 26.9622C21.6955 26.591 22.1299 26.4068 22.5457 26.5109L25.5706 27.2681L27.6897 26.0447L28.5464 23.0464ZM28.9861 27.5132C29.2018 27.3887 29.3607 27.1851 29.4292 26.9456L30.1936 24.2701H33.2466L34.011 26.9456C34.0794 27.1851 34.2383 27.3887 34.4541 27.5132L37.2459 29.1251C37.4617 29.2497 37.7174 29.2855 37.9591 29.225L40.6583 28.5493L42.1848 31.1932L40.25 33.193C40.0768 33.372 39.9799 33.6114 39.9799 33.8605V37.0843C39.9799 37.3334 40.0768 37.5728 40.25 37.7518L42.1848 39.7516L40.6583 42.3955L37.9591 41.7198C37.7174 41.6593 37.4617 41.6951 37.2459 41.8197L34.4541 43.4316C34.2383 43.5561 34.0794 43.7597 34.011 43.9992L33.2466 46.6747H30.1936L29.4292 43.9992C29.3607 43.7597 29.2018 43.5561 28.9861 43.4316L26.1942 41.8197C25.9785 41.6951 25.7228 41.6593 25.4811 41.7198L22.7819 42.3955L21.2554 39.7516L23.1902 37.7518C23.3634 37.5728 23.4602 37.3334 23.4602 37.0843V33.8605C23.4602 33.6114 23.3634 33.372 23.1902 33.193L21.2554 31.1932L22.7819 28.5493L25.4811 29.225C25.7228 29.2855 25.9785 29.2497 26.1942 29.1251L28.9861 27.5132ZM31.7201 41.6407C28.3134 41.6407 25.5517 38.8791 25.5517 35.4724C25.5517 32.0657 28.3134 29.3041 31.7201 29.3041C35.1268 29.3041 37.8884 32.0657 37.8884 35.4724C37.8884 38.8791 35.1268 41.6407 31.7201 41.6407ZM35.9684 35.4724C35.9684 37.8187 34.0664 39.7207 31.7201 39.7207C29.3738 39.7207 27.4717 37.8187 27.4717 35.4724C27.4717 33.1261 29.3738 31.2241 31.7201 31.2241C34.0664 31.2241 35.9684 33.1261 35.9684 35.4724Z" fill="url(#paint1_linear_606_96)"/>
+  <defs>
+  <linearGradient id="paint0_linear_606_96" x1="31.72" y1="95.7208" x2="95.488" y2="34.3249" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#0FA4B7"/>
+  <stop offset="0.494757" stop-color="#1DC1C7"/>
+  <stop offset="1" stop-color="#2BE0D7"/>
+  </linearGradient>
+  <linearGradient id="paint1_linear_606_96" x1="28.4374" y1="99.2464" x2="98.7613" y2="44.9372" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#0FA4B7"/>
+  <stop offset="0.494757" stop-color="#1DC1C7"/>
+  <stop offset="1" stop-color="#2BE0D7"/>
+  </linearGradient>
+  </defs>
+</svg>
+`;
+export default function AuditLogCell({
+  title,
+  subTitle,
+  titleInfo,
+  action,
+  createdAt,
+  content,
+  isLast,
+  titleLink,
+  avatarUrl
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const textRef = useRef(null);
+  const checkOverflow = () => {
+    const current = textRef.current?.mdp?.current;
+    if (current) {
+      setIsOverflowing(current.scrollHeight > current.offsetHeight);
+    }
+  };
+  useEffect(() => {
+    const handleResize = debounce(() => {
+      setWindowWidth(window.innerWidth);
+    }, 100);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  useEffect(() => {
+    checkOverflow();
+  }, [windowWidth, content]);
+  const infoList = useMemo(() => {
+    return Object.entries(titleInfo).map(([key, value]) => {
+      return {
+        key,
+        value
+      };
+    }).filter(v => !!v.value);
+  }, [titleInfo]);
+  return /*#__PURE__*/_jsx(Box, {
+    "data-cy": "log-entry",
+    sx: {
+      borderBottom: isLast ? 'none' : '1px solid #ddd',
+      padding: 2
+    },
+    children: /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 2,
+        width: '100%'
+      },
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: {
+          mt: 0.5
+        },
+        className: "log-author",
+        children: avatarUrl ? /*#__PURE__*/_jsx(Avatar, {
+          src: avatarUrl,
+          size: 36,
+          shape: "circle"
+        }) : /*#__PURE__*/_jsx("div", {
+          dangerouslySetInnerHTML: {
+            __html: blockletServerLogo
+          }
+        })
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          width: 240
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          color: "textSecondary",
+          component: "p",
+          display: "flex",
+          children: titleLink ? /*#__PURE__*/_jsx(Link, {
+            to: titleLink,
+            target: "_blank",
+            children: /*#__PURE__*/_jsx(ShortenLabel, {
+              maxLength: 26,
+              children: title
+            })
+          }) : /*#__PURE__*/_jsx(ShortenLabel, {
+            maxLength: 26,
+            children: title
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          "aria-label": "Audit device info",
+          title: /*#__PURE__*/_jsx(Box, {
+            sx: {
+              color: '#fff',
+              display: 'flex',
+              flexDirection: 'column',
+              fontSize: 12
+            },
+            children: infoList?.map(item => {
+              return /*#__PURE__*/_jsx(Typography, {
+                sx: {
+                  color: '#fff'
+                },
+                fontSize: 12,
+                children: `${item.key}: ${item.value}`
+              }, item.key);
+            })
+          }),
+          children: /*#__PURE__*/_jsxs(Typography, {
+            component: "span",
+            color: "textSecondary",
+            fontSize: 13,
+            children: [subTitle, /*#__PURE__*/_jsx(InfoOutlinedIcon, {
+              sx: {
+                ml: 0.5,
+                fontSize: 12,
+                verticalAlign: 'middle'
+              }
+            })]
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          width: 200
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: '16px',
+            color: 'rgb(36, 41, 47)',
+            backgroundColor: '#fff',
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"
+          },
+          children: action
+        }), /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          color: "textSecondary",
+          fontSize: 13,
+          children: /*#__PURE__*/_jsx(RelativeTime, {
+            value: createdAt
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Box, {
+        sx: {
+          flex: 1
+        },
+        children: isOverflowing && isExpanded ? /*#__PURE__*/_jsx(Typography, {
+          className: "log-content",
+          maxWidth: "lg",
+          color: "textPrimary",
+          component: "div",
+          "data-color-mode": "light",
+          gutterBottom: true,
+          children: /*#__PURE__*/_jsx(MarkdownPreview, {
+            source: content,
+            rehypePlugins: [[rehypeExternalLinks, {
+              target: '_blank'
+            }]]
+          })
+        }) : /*#__PURE__*/_jsx(Typography, {
+          className: "log-content",
+          maxWidth: "lg",
+          color: "textPrimary",
+          component: "div",
+          "data-color-mode": "light",
+          gutterBottom: true,
+          sx: {
+            display: isExpanded ? 'block' : '-webkit-box',
+            WebkitLineClamp: isExpanded ? 'none' : 2,
+            WebkitBoxOrient: 'vertical',
+            overflow: isExpanded ? 'visible' : 'hidden',
+            wordBreak: 'break-word'
+          },
+          children: /*#__PURE__*/_jsx(MarkdownPreview, {
+            ref: textRef,
+            source: content,
+            rehypePlugins: [[rehypeExternalLinks, {
+              target: '_blank'
+            }]]
+          })
+        })
+      }), /*#__PURE__*/_jsxs(Box, {
+        children: [isOverflowing && /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: () => setIsExpanded(!isExpanded),
+          children: isExpanded ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {
+            sx: {
+              fontSize: 22
+            }
+          }) : /*#__PURE__*/_jsx(UnfoldMoreIcon, {
+            sx: {
+              fontSize: 22
+            }
+          })
+        }), /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          children: /*#__PURE__*/_jsx(CopyButton, {
+            sx: {
+              fontSize: 22
+            },
+            content: content
+          })
+        })]
+      })]
+    })
+  });
+}

package/lib/blocklet/audit-logs.js

@@ -1,24 +1,20 @@
 /* eslint-disable react/prop-types */
-import styled from '@emotion/styled';
-import { Link } from 'react-router-dom';
-import MarkdownPreview from '@uiw/react-markdown-preview';
-import rehypeExternalLinks from 'rehype-external-links';
-import DidAvatar from '@arcblock/did-connect/lib/Avatar';
 import Spinner from '@mui/material/CircularProgress';
 import Empty from '@arcblock/ux/lib/Empty';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { WELLKNOWN_BLOCKLET_ADMIN_PATH } from '@abtnode/constant';
+import TableSearch from '@arcblock/ux/lib/Datatable/TableSearch';
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Pagination from '@mui/lab/Pagination';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
-import Tag from '@arcblock/ux/lib/Tag';
+import TablePagination from '@mui/material/TablePagination';
+import { parseAvatar } from '../team/members/util';
 import { useAuditLogContext, AuditLogProvider } from '../contexts/audit-log';
+import AuditLogCell from './audit-log-cell';
 import { useNodeContext } from '../contexts/node';
-import RelativeTime from '../relative-time';
+import { useTeamContext } from '../contexts/team';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getUserLink = ({
   log,
@@ -35,12 +31,19 @@ const getUserLink = ({
   return `/blocklets/${log.scope}/members?did=${log.actor.did}`;
 };
 function AuditLog({
-  log
+  log,
+  isLast
 }) {
   const {
     inService,
     info
   } = useNodeContext();
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    teamDid
+  } = useTeamContext();
   const {
     showScope,
     scopeFormatter = x => x
@@ -51,89 +54,32 @@ function AuditLog({
 
   // HACK: blocklet 类型会在存储前被强制置为 `''`，所以需要增加空字符串判断
   const isUser = !['blocklet', ''].includes(log.actor.role);
-  return /*#__PURE__*/_jsxs(Box, {
-    className: "log-entry",
-    "data-cy": "log-entry",
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "log-author",
-      children: isUser ? /*#__PURE__*/_jsx(DidAvatar, {
-        did: log.actor.did,
-        size: 36,
-        shape: "circle"
-      }) : /*#__PURE__*/_jsx(DidAvatar, {
-        did: log.actor.did,
-        size: 36
-      })
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "log-body",
-      children: [/*#__PURE__*/_jsxs(Typography, {
-        className: "log-header",
-        color: "textSecondary",
-        component: "p",
-        gutterBottom: true,
-        display: "flex",
-        alignItems: "center",
-        children: [showScope && /*#__PURE__*/_jsx(Link, {
-          to: log.link,
-          children: /*#__PURE__*/_jsx(Tag, {
-            style: {
-              marginRight: 8
-            },
-            children: scopeFormatter(log.scope)
-          })
-        }), isUser ? /*#__PURE__*/_jsxs(Link, {
-          to: getUserLink({
-            log,
-            inService,
-            info
-          }),
-          target: "_blank",
-          children: [log.actor.fullName, log.actor.role ? `(${log.actor.role})` : '']
-        }) : /*#__PURE__*/_jsxs("span", {
-          children: [log.actor.fullName, log.actor.role ? `(${log.actor.role})` : '']
-        }), ' ', /*#__PURE__*/_jsx("span", {
-          style: {
-            margin: '0 4px'
-          },
-          children: "-"
-        }), " ", log.action]
-      }), /*#__PURE__*/_jsx(Typography, {
-        className: "log-content",
-        maxWidth: "lg",
-        color: "textPrimary",
-        component: "div",
-        "data-color-mode": "light",
-        gutterBottom: true,
-        children: /*#__PURE__*/_jsx(MarkdownPreview, {
-          source: log.content,
-          rehypePlugins: [[rehypeExternalLinks, {
-            target: '_blank'
-          }]]
-        })
-      }), /*#__PURE__*/_jsxs(Box, {
-        className: "log-meta",
-        variant: "body2",
-        children: [!!log.ip && /*#__PURE__*/_jsx(Typography, {
-          component: "span",
-          color: "textSecondary",
-          children: `IP: ${log.ip}`
-        }), !!log.env.os?.name && /*#__PURE__*/_jsxs(Typography, {
-          component: "span",
-          color: "textSecondary",
-          children: [log.env.os.name, "(", log.env.os.version, ")"]
-        }), !!log.env.browser?.name && /*#__PURE__*/_jsxs(Typography, {
-          component: "span",
-          color: "textSecondary",
-          children: [log.env.browser.name, "(", log.env.browser.version, ")"]
-        }), /*#__PURE__*/_jsx(Typography, {
-          component: "span",
-          color: "textSecondary",
-          children: /*#__PURE__*/_jsx(RelativeTime, {
-            value: log.createdAt
-          })
-        })]
-      })]
-    })]
+  let title = log.actor.fullName;
+  if (showScope) {
+    title = log.actor.fullName ? `${title} - ${scopeFormatter(log.scope)}` : scopeFormatter(log.scope);
+  }
+  const titleLink = showScope ? log.link : getUserLink({
+    log,
+    inService,
+    info
+  });
+  const avatarUrl = log.actor.avatar ? parseAvatar(log.actor.avatar, teamDid, inService) : '';
+  return /*#__PURE__*/_jsx(AuditLogCell, {
+    isLast: isLast,
+    isUser: isUser,
+    avatarDid: log.actor.did,
+    avatarUrl: avatarUrl,
+    title: title || t('common.unrecordedUser'),
+    titleLink: titleLink,
+    subTitle: log.actor.role ? log.actor.role : t('common.unrecordedRole'),
+    content: log.content,
+    action: log.action,
+    titleInfo: {
+      IP: log.ip,
+      OS: `${log.env.os?.name}${log.env.os?.version ? ` ${log.env.os?.version}` : ''}`,
+      Client: `${log.env.browser?.name}${log.env.browser?.Version ? ` ${log.env.browser?.Version}` : ''}`
+    },
+    createdAt: log.createdAt
   });
 }
 function AuditLogs() {
@@ -144,11 +90,35 @@ function AuditLogs() {
     data,
     loading,
     paging,
+    setPaging,
     filter,
     categories,
     setCategory,
-    fetch
+    fetch,
+    actionOrContent,
+    setActionOrContent
   } = useAuditLogContext();
+  const handleRowsPerPageChange = e => {
+    const pageSize = Number(e.target.value);
+    setPaging({
+      ...paging,
+      pageSize
+    });
+    fetch({
+      page: 1,
+      pageSize
+    });
+  };
+  const handlePageChange = page => {
+    setPaging({
+      ...paging,
+      page: page + 1
+    });
+    fetch({
+      page: page + 1,
+      pageSize: paging.pageSize
+    });
+  };
   if (loading) {
     return /*#__PURE__*/_jsx("div", {
       style: {
@@ -158,11 +128,16 @@ function AuditLogs() {
       children: /*#__PURE__*/_jsx(Spinner, {})
     });
   }
-  return /*#__PURE__*/_jsxs(Div, {
+  return /*#__PURE__*/_jsxs(Box, {
     "data-cy": "audit-logs",
-    children: [/*#__PURE__*/_jsx(Box, {
-      className: "log-controls",
-      children: /*#__PURE__*/_jsxs(FormControl, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 2,
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsxs(FormControl, {
         style: {
           width: '240px'
         },
@@ -174,6 +149,9 @@ function AuditLogs() {
           value: filter.category,
           onChange: e => setCategory(e.target.value),
           fullWidth: true,
+          sx: {
+            borderRadius: 1
+          },
           label: t('common.category'),
           disabled: loading,
           children: categories.map(x => /*#__PURE__*/_jsx(MenuItem, {
@@ -186,19 +164,54 @@ function AuditLogs() {
             })
           }, x.label))
         })]
-      })
+      }), /*#__PURE__*/_jsx(Box, {
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/_jsx(TableSearch, {
+        options: {
+          searchPlaceholder: t('common.auditLogsSearch'),
+          searchDebounceTime: 600
+        },
+        search: actionOrContent,
+        searchText: actionOrContent,
+        searchTextUpdate: setActionOrContent,
+        searchClose: () => setActionOrContent(''),
+        onSearchOpen: () => {}
+      })]
     }), data.length === 0 && /*#__PURE__*/_jsx(Empty, {
       children: t('common.empty')
-    }), data.length > 0 && data.map(x => /*#__PURE__*/_jsx(AuditLog, {
-      log: x
-    }, x.id)), paging.pageCount > 1 && /*#__PURE__*/_jsx(Pagination, {
-      page: paging.page,
-      count: paging.pageCount,
-      onChange: (e, page) => fetch({
-        page
-      }),
-      showFirstButton: true,
-      showLastButton: true
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        mt: 2,
+        border: data?.length > 0 ? '1px solid #ddd' : 'none',
+        borderRadius: 1
+      },
+      children: data.length > 0 && data.map((x, index) => /*#__PURE__*/_jsx(AuditLog, {
+        log: x,
+        isLast: index === data.length - 1
+      }, x.id))
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        mt: 2
+      },
+      children: /*#__PURE__*/_jsx(TablePagination, {
+        disabled: loading,
+        page: paging.page - 1,
+        count: paging.total,
+        rowsPerPage: paging.pageSize,
+        rowsPerPageOptions: [10, 20, 50, 100],
+        labelRowsPerPage: t('pagination.rowsPerPage'),
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} / ${count !== -1 ? count : `${t()}more than ${to}`}`,
+        onPageChange: (_, page) => handlePageChange(page),
+        onRowsPerPageChange: handleRowsPerPageChange
+      })
     })]
   });
 }
@@ -215,64 +228,4 @@ export default function WrappedAuditLogs({
     scopeFormatter: scopeFormatter,
     children: /*#__PURE__*/_jsx(AuditLogs, {})
   });
-}
-const Div = styled.div`
-  .log-controls {
-    display: flex;
-    justify-content: space-between;
-  }
-  .log-entry {
-    display: flex;
-    margin: 16px 0;
-
-    .log-author {
-      margin-right: 8px;
-    }
-
-    .log-body {
-      flex: 1;
-
-      a {
-        color: ${({
-  theme
-}) => theme.palette.primary.main};
-      }
-
-      .log-header {
-      }
-
-      .log-content {
-        p {
-          margin-bottom: 4px;
-        }
-        ul,
-        ol {
-          padding-left: 2rem;
-        }
-        li {
-          list-style-type: disc;
-        }
-        code.code-highlight {
-          max-height: 300px;
-          overflow: auto;
-        }
-      }
-
-      .log-meta {
-        margin-top: 4px;
-
-        span {
-          font-size: 0.8rem;
-          display: inline-block;
-          margin-right: 8px;
-          padding-right: 8px;
-          border-right: 1px solid #ccc;
-
-          &:last-of-type {
-            border-right: none;
-          }
-        }
-      }
-    }
-  }
-`;
+}

package/lib/blocklet/component/switch-control.js

@@ -31,6 +31,7 @@ function SwitchControl({
   return /*#__PURE__*/_jsx(Root, {
     className: className,
     style: style,
+    labelPlacement: labelProps?.labelPlacement,
     children: /*#__PURE__*/_jsx(IOSSwitch, {
       labelProps: _labelProps,
       ...rest
@@ -40,14 +41,23 @@ function SwitchControl({
 SwitchControl.propTypes = IOSSwitch.propTypes;
 SwitchControl.defaultProps = IOSSwitch.defaultProps;
 const Root = styled.div`
-  max-width: 300px;
+  max-width: ${({
+  labelPlacement
+}) => labelPlacement === 'end' ? '100%' : '300px'};
   > label {
     display: flex;
-    justify-content: space-between;
+    justify-content: ${({
+  labelPlacement
+}) => labelPlacement === 'end' ? 'flex-start' : 'space-between'};
     width: 100%;
     margin-left: 0;
     margin-right: 0;
   }
+  .MuiFormControlLabel-labelPlacementEnd {
+    .MuiSwitch-root {
+      margin-right: 8px;
+    }
+  }
   ${({
   theme
 }) => theme.breakpoints.down('sm')} {