feat: add text-align and text-shadow

packages/origine2/src/pages/templateEditor/TemplateGraphicalEditor/WebgalClassEditor/editorTable.ts

@@ -12,6 +12,8 @@ import WGCommonNumberEditor
 import WGCommonEditor from "./propertyEditor/WGCommonEditor";
 import WGCommonLengthEditor4Values
   from "@/pages/templateEditor/TemplateGraphicalEditor/WebgalClassEditor/propertyEditor/WGCommonLengthEditor4Values";
+import WGTextAlignEditor from "./propertyEditor/WGText";
+import WGTextShadowEditor from "./propertyEditor/WGTextShadow";
 
 export interface IPropertyEditorProps {
   prop: IWebgalCssProp,
@@ -49,5 +51,9 @@ export function getEditorTable(): IWebGALStylePropertyEditItem[] {
     {propName: 'z-index', propLable: t`层级顺序`, editor: WGCommonNumberEditor, initialValue: '1'},
     {propName: 'font-family', propLable: t`字体`, editor: WGCommonEditor, initialValue: `"思源宋体", serif`},
     {propName: 'border-radius', propLable: t`圆角`, editor: WGCommonLengthEditor4Values, initialValue: `"10px 10px 10px 10px`},
+    {propName: 'text-align', propLable: t`文本对齐`, editor: WGTextAlignEditor, initialValue: `"10px 10px 10px 10px`},
+    {propName: 'text-shadow', propLable: t`文本阴影`, editor: WGTextShadowEditor, initialValue: `"10px 10px 10px white`},
+    {propName: 'margin', propLable: t`外边距`, editor: WGCommonLengthEditor4Values, initialValue: `"10px 10px 10px 10px`},
+    {propName: 'padding', propLable: t`内边距`, editor: WGCommonLengthEditor4Values, initialValue: `"10px 10px 10px 10px`},
   ];
 }

packages/origine2/src/pages/templateEditor/TemplateGraphicalEditor/WebgalClassEditor/propertyEditor/WGText.tsx

@@ -0,0 +1,29 @@
+import { IPropertyEditorProps } from '@/pages/templateEditor/TemplateGraphicalEditor/WebgalClassEditor/editorTable';
+import { Button, Input, Select, useId } from '@fluentui/react-components';
+import s from '../propertyEditor.module.scss';
+import { t } from '@lingui/macro';
+import { useState } from 'react';
+
+export default function WGTextAlignEditor(props: IPropertyEditorProps) {
+  const initialValue = props.prop.propValue;
+  const [align, setAlign] = useState(initialValue);
+
+  const submit = () => {
+    props.prop.propValue = align;
+    props.onSubmit();
+  };
+
+  return (
+    <div className={s.propertyEditor}>
+      <Select value={align} onChange={(_, data) => setAlign(data.value)}>
+        <option value="left">{t`左对齐`}</option>
+        <option value="center">{t`居中对齐`}</option>
+        <option value="right">{t`右对齐`}</option>
+        <option value="justify">{t`两端对齐`}</option>
+      </Select>
+      <Button style={{ marginLeft: 8 }} onClick={submit}>{t`提交修改`}</Button>
+    </div>
+  );
+}
+
+

packages/origine2/src/pages/templateEditor/TemplateGraphicalEditor/WebgalClassEditor/propertyEditor/WGTextShadow.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { Button, Input, Select } from '@fluentui/react-components';
+import { t } from '@lingui/macro';
+import s from '../propertyEditor.module.scss';
+import { IPropertyEditorProps } from '@/pages/templateEditor/TemplateGraphicalEditor/WebgalClassEditor/editorTable';
+
+export default function WGTextShadowEditor(props: IPropertyEditorProps) {
+  const initialValue = props.prop.propValue || '0px 0px 0px rgba(0,0,0,0)'; // 默认值为无阴影
+  const [hOffset, setHOffset] = useState((initialValue.match(/(-?\d+)px/) || [, '0'])[1]);
+  const [vOffset, setVOffset] = useState((initialValue.match(/-?\d+px\s+(-?\d+)px/) || [, '0'])[1]);
+  const [blurRadius, setBlurRadius] = useState((initialValue.match(/(-?\d+)px\s+rgba/) || [, '0'])[1]);
+  const [color, setColor] = useState((initialValue.match(/rgba\(.+\)/) || ['rgba(0,0,0,0)'])[0]);
+
+  const submit = () => {
+    props.prop.propValue = `${hOffset}px ${vOffset}px ${blurRadius}px ${color}`;
+    props.onSubmit();
+  };
+
+  return (
+    <div className={s.propertyEditor}>
+      <Input type="number" value={hOffset} onChange={(_, data) => setHOffset(data.value)} style={{ marginRight: 10 }} />
+      <Input type="number" value={vOffset} onChange={(_, data) => setVOffset(data.value)} style={{ marginRight: 10 }} />
+      <Input
+        type="number"
+        value={blurRadius}
+        onChange={(_, data) => setBlurRadius(data.value)}
+        style={{ marginRight: 10 }}
+      />
+      <Input value={color} onChange={(_, data) => setColor(data.value)} style={{ marginRight: 10 }} />
+      <Button style={{ marginLeft: 8 }} onClick={submit}>{t`提交修改`}</Button>
+    </div>
+  );
+}