feat: improve prefix className method

package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.0-alpha.18",
+  "version": "0.4.0-alpha.19",
   "workspaces": [
     "packages/*"
   ],
@@ -19,7 +19,7 @@
     "upgrade:version": "vite-node ./scripts/upgrade-version.ts && pnpm i"
   },
   "dependencies": {
-    "idraw": "0.4.0-beta.18",
+    "idraw": "0.4.0-beta.19",
     "antd": "5.12.1"
   },
   "devDependencies": {

packages/studio-base/src/css/index.less

@@ -9,3 +9,4 @@
 @import './modules/scale-selector.less';
 @import './modules/element-tree.less';
 @import './modules/element-detail.less';
+@import './modules/layout-detail.less';

packages/studio-base/src/css/modules/layout-detail.less

@@ -0,0 +1,65 @@
+// @import "../variable.less";
+
+@base-layout-detail: ~'@{prefix}-base-layout-detail';
+@base-layout-basic-attribute: ~'@{prefix}-base-layout-basic-attribute';
+
+.common-layout-detail-form-style (@detail-form-name) {
+  box-sizing: border-box;
+  padding: 0px;
+
+  .@{detail-form-name}-row {
+    padding: 2px 0;
+    box-sizing: border-box;
+  }
+
+  .@{detail-form-name}-col {
+    padding: 0 2px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+
+  .@{detail-form-name}-input {
+    // border: none;
+    // border-color: transparent;
+    padding-inline-start: 4px;
+    width: 100%;
+    input {
+      font-size: 12px;
+    }
+  }
+
+  .@{detail-form-name}-form-item {
+    margin: 0;
+    .ant-form-item-control-input {
+      min-height: auto;
+    }
+  }
+
+  .ant-form-item {
+    margin: 0;
+  }
+}
+
+.@{base-layout-detail} {
+  .ant-collapse-item {
+    border-bottom: 1px solid;
+    border-color: ~'var(--@{prefix}-border-color)';
+    border-radius: 0;
+    &:last-child {
+      border-radius: 0;
+    }
+
+    .ant-collapse-content {
+      .ant-collapse-content-box {
+        padding-top: 4px;
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+    }
+  }
+}
+
+.@{base-layout-basic-attribute} {
+  .common-layout-detail-form-style (@detail-form-name: @base-layout-basic-attribute);
+}

packages/studio-base/src/index.ts

@@ -7,6 +7,7 @@ export { LocaleSelector, type LocaleSelectorProps } from './modules/locale-selec
 export { ScaleSelector, type ScaleSelectorProps } from './modules/scale-selector';
 export { ElementTree, type ElementTreeProps } from './modules/element-tree';
 export { ElementDetail, type ElementDetailProps } from './modules/element-detail';
+export { LayoutDetail, type LayoutDetailProps } from './modules/layout-detail';
 
 export { getElementTree } from './tools';
 export { setClassNameTopPrefix, generateClassName } from './css/index';

packages/studio-base/src/locale/languages/en-US.ts

@@ -3,6 +3,27 @@ import type { Locale } from '../types';
 const localeValues: Locale = {
   locale: 'en-US',
   Header: {},
+  LayoutDetail: {
+    layout: 'Layout',
+    groupLayout: 'Group Layout',
+    x: 'X',
+    y: 'Y',
+    w: 'W',
+    h: 'H',
+    background: 'Background',
+    solid: 'Solid',
+    dash: 'Dash',
+    inside: 'Inside',
+    outside: 'Outside',
+    centerLine: 'Center',
+    gradient: 'Gradient',
+    opacity: 'Opacity',
+    mixedBorderWidth: 'Mixed',
+    mixedBorderRadius: 'Mixed',
+    overflow: 'Overflow',
+    hidden: 'Hidden',
+    visible: 'Visible'
+  },
   ElementDetail: {
     basicAttributes: 'Basic',
     borderAttribute: 'Border',

packages/studio-base/src/locale/languages/zh-CN.ts

@@ -3,6 +3,27 @@ import type { Locale } from '../types';
 const localeValues: Locale = {
   locale: 'zh-CN',
   Header: {},
+  LayoutDetail: {
+    layout: '布局',
+    groupLayout: '组布局',
+    x: 'X',
+    y: 'Y',
+    w: '宽',
+    h: '高',
+    background: '背景色',
+    solid: '实线',
+    dash: '虚线',
+    inside: '内线',
+    outside: '外线',
+    centerLine: '中线',
+    gradient: '渐变',
+    opacity: '透明度',
+    mixedBorderWidth: '混合边框',
+    mixedBorderRadius: '混合圆角',
+    overflow: '溢出',
+    hidden: '隐藏',
+    visible: '可视'
+  },
   ElementDetail: {
     basicAttributes: '基础',
     borderAttribute: '边框',

packages/studio-base/src/locale/types.ts

@@ -5,6 +5,27 @@ export type LocaleCode = 'en-US' | 'zh-CN';
 export interface Locale<T = LocaleCode> {
   locale: T;
   Header: Record<string, string>;
+  LayoutDetail: {
+    layout: string;
+    groupLayout: string;
+    x: string;
+    y: string;
+    w: string;
+    h: string;
+    background: string;
+    solid: string;
+    dash: string;
+    inside: string;
+    outside: string;
+    centerLine: string;
+    gradient: string;
+    opacity: string;
+    mixedBorderWidth: string;
+    mixedBorderRadius: string;
+    overflow: string;
+    hidden: string;
+    visible: string;
+  };
   ElementDetail: {
     basicAttributes: string;
     borderAttribute: string;

packages/studio-base/src/modules/_mod/child.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo, useContext } from 'react';
+import React, { useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import classnames from 'classnames';
-import { ConfigContext } from '../config-provider';
+import { generateClassName } from '../../css';
 
 const modName = 'base-xxxxxx';
 
@@ -12,9 +12,7 @@ export interface ChildProps {
 
 export const Child = (props: ChildProps) => {
   const { className, style } = props;
-  const { createPrefixName } = useContext(ConfigContext);
-  const generateClassName = createPrefixName(modName);
-  const rootClassName = generateClassName();
+  const rootClassName = generateClassName(modName);
 
   return useMemo(() => {
     return (

packages/studio-base/src/modules/_mod/index.tsx

@@ -1,7 +1,7 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import classnames from 'classnames';
-import { ConfigContext } from '../config-provider';
+import { generateClassName } from '../../css';
 
 const modName = 'base-xxx';
 
@@ -12,12 +12,10 @@ export interface ModProps {
 
 export const Mod = (props: ModProps) => {
   const { className, style } = props;
-  const { createPrefixName } = useContext(ConfigContext);
-  const generateClassName = createPrefixName(modName);
 
   return useMemo(() => {
     return (
-      <div style={style} className={classnames(generateClassName(), className)}>
+      <div style={style} className={classnames(generateClassName(modName), className)}>
         Mod
       </div>
     );

packages/studio-base/src/modules/element-detail/basic-attribute.tsx

@@ -1,15 +1,15 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import type { CSSProperties } from 'react';
 import classnames from 'classnames';
 import type { Element } from 'idraw';
 import { formatNumber, is, limitAngle } from 'idraw';
 import { InputNumber, Col, Row, Form, Switch } from 'antd';
 import type { FormInstance } from 'antd';
-import { ConfigContext } from '../config-provider';
 import IconConstrain from '../../icons/constrain';
 import IconRotation from '../../icons/rotation';
 import { SwitchButton } from './field-item/switch-button';
 import { useModuleLocale } from './hooks';
+import { generateClassName } from '../../css';
 
 const modName = 'base-element-basic-attribute';
 
@@ -41,13 +41,11 @@ const angleFormatter = (val: any) => {
 export const BasicAttribute = (props: BasicAttributeProps) => {
   const { className, style, element, onChange, disabled } = props;
   const ref = useRef<FormInstance>(null);
-  const { createPrefixName } = useContext(ConfigContext);
-  const generateClassName = createPrefixName(modName);
-  const rootClassName = generateClassName();
-  const rowClassName = generateClassName('row');
-  const colClassName = generateClassName('col');
-  const inputClassName = generateClassName('input');
-  const formItemClassName = generateClassName('form-item');
+  const rootClassName = generateClassName(modName);
+  const rowClassName = generateClassName(modName, 'row');
+  const colClassName = generateClassName(modName, 'col');
+  const inputClassName = generateClassName(modName, 'input');
+  const formItemClassName = generateClassName(modName, 'form-item');
   const moduleLocale = useModuleLocale();
   const onValuesChange = (e: FieldType) => {
     if (element?.operations?.limitRatio === true) {

packages/studio-base/src/modules/element-detail/border-attribute.tsx

@@ -1,13 +1,13 @@
-import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import type { CSSProperties } from 'react';
 import classnames from 'classnames';
 import type { Element, ElementBaseDetail, RecursivePartial } from 'idraw';
 import { getElementSize } from 'idraw';
-import { ConfigContext } from '../config-provider';
 import { Button, Input, Col, Row, Form, InputNumber, Select } from 'antd';
 import type { FormInstance } from 'antd';
 import { MultipleColor } from './field-item/multiple-color';
 import { useModuleLocale } from './hooks';
+import { generateClassName } from '../../css';
 
 import IconCornerRadius from '../../icons/corner-radius';
 import IconFullCornerRadius from '../../icons/full-corner-radius';
@@ -84,13 +84,11 @@ function elementToFormData(element?: Element | null): FieldType {
 export const BorderAttribute = (props: BorderAttributeProps) => {
   const { className, style, element, disabled, onChange } = props;
   const ref = useRef<FormInstance>(null);
-  const { createPrefixName } = useContext(ConfigContext);
-  const generateClassName = createPrefixName(modName);
-  const rootClassName = generateClassName();
-  const rowClassName = generateClassName('row');
-  const colClassName = generateClassName('col');
-  const inputClassName = generateClassName('input');
-  const formItemClassName = generateClassName('form-item');
+  const rootClassName = generateClassName(modName);
+  const rowClassName = generateClassName(modName, 'row');
+  const colClassName = generateClassName(modName, 'col');
+  const inputClassName = generateClassName(modName, 'input');
+  const formItemClassName = generateClassName(modName, 'form-item');
   const [splitBorderRadius, setSplitBorderRadius] = useState<boolean>(Array.isArray(element?.detail?.borderRadius));
   const [splitBorderWidth, setSplitBorderWidth] = useState<boolean>(Array.isArray(element?.detail?.borderWidth));
   const [internalDisableBorderRadius, setInternalDisableBorderRadius] = useState<boolean>(splitBorderWidth);

packages/studio-base/src/modules/element-detail/content-attribute.tsx

@@ -1,12 +1,12 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import type { CSSProperties } from 'react';
 import type { Element, ElementBaseDetail, ElementAssetsItem } from 'idraw';
 import { getElementSize } from 'idraw';
 import { Col, Row, Form, InputNumber } from 'antd';
 import type { FormInstance } from 'antd';
-import { ConfigContext } from '../config-provider';
 import { useModuleLocale } from './hooks';
 import { DetailAttribute } from './detail-attribute';
+import { generateClassName } from '../../css';
 
 import { MultipleColor } from './field-item/multiple-color';
 
@@ -43,12 +43,10 @@ const elementToFormData = (element?: Element | null) => {
 export const ContentAttribute = (props: ContentAttributeProps) => {
   const { style, element, disabled, onChange, getElementAsset, createElementAsset } = props;
   const ref = useRef<FormInstance>(null);
-  const { createPrefixName } = useContext(ConfigContext);
-  const generateClassName = createPrefixName(modName);
-  const rootClassName = generateClassName();
-  const rowClassName = generateClassName('row');
-  const colClassName = generateClassName('col');
-  const formItemClassName = generateClassName('form-item');
+  const rootClassName = generateClassName(modName);
+  const rowClassName = generateClassName(modName, 'row');
+  const colClassName = generateClassName(modName, 'col');
+  const formItemClassName = generateClassName(modName, 'form-item');
   const onValuesChange = (value: FieldType) => {
     const boxDetail = value;
     onChange?.({ detail: boxDetail } as Partial<Element>);

packages/studio-base/src/modules/element-detail/detail-attribute.tsx

@@ -1,15 +1,13 @@
-import React, { useContext, useMemo } from 'react';
-// import classnames from 'classnames';
+import React, { useMemo } from 'react';
 import type { Element, ElementAssetsItem } from 'idraw';
-import { ConfigContext } from '../config-provider';
-// import { Input, Col, Row, Form } from 'antd';
 import { DetailCircle } from './detail-circle';
 import { DetailImage } from './detail-image';
 import { DetailPath } from './detail-path';
 import { DetailRect } from './detail-rect';
 import { DetailSVG } from './detail-svg';
 import { DetailText } from './detail-text';
 import { DetailGroup } from './detail-group';
+import { generateClassName } from '../../css';
 
 const modName = 'base-element-detail-attribute';
 
@@ -26,9 +24,8 @@ export interface DetailAttributeProps {
 
 export const DetailAttribute = (props: DetailAttributeProps) => {
   const { element, onChange, disabled, getElementAsset, createElementAsset } = props;
-  const { createPrefixName } = useContext(ConfigContext);
-  const generateClassName = createPrefixName(modName);
-  const rootClassName = generateClassName();
+
+  const rootClassName = generateClassName(modName);
   return useMemo(() => {
     return (
       <div className={rootClassName}>

packages/studio-base/src/modules/element-detail/detail-circle.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo, useContext } from 'react';
+import React, { useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import classnames from 'classnames';
 import type { Element } from 'idraw';
-import { ConfigContext } from '../config-provider';
+import { generateClassName } from '../../css';
 
 const modName = 'base-element-detail-circle';
 
@@ -16,9 +16,7 @@ export interface DetailCircleProps {
 
 export const DetailCircle = (props: DetailCircleProps) => {
   const { className, style } = props;
-  const { createPrefixName } = useContext(ConfigContext);
-  const generateClassName = createPrefixName(modName);
-  const rootClassName = generateClassName();
+  const rootClassName = generateClassName(modName);
 
   return useMemo(() => {
     return (