openxiangda-cli 2.0.0-alpha.85 → 2.0.0-alpha.86

package/template/apps/web/src/components/platform-fields/RichTextField.tsx

@@ -0,0 +1,196 @@
+import {
+  BoldOutlined,
+  FileImageOutlined,
+  ItalicOutlined,
+  LinkOutlined,
+  OrderedListOutlined,
+  StrikethroughOutlined,
+  UnderlineOutlined,
+  UnorderedListOutlined,
+} from '@ant-design/icons';
+import { Button, Space, Tooltip } from 'antd';
+import type { DataFileRef } from 'openxiangda-contracts/browser';
+import { useEffect, useRef, useState } from 'react';
+import { dataRichTextImageSource } from '../../platform-client';
+import { sanitizeRichText } from './rich-text-value';
+
+const INLINE_IMAGE_ACCEPT = 'image/png,image/jpeg,image/webp,image/gif';
+const INLINE_IMAGE_MAX_BYTES = 10 * 1024 * 1024;
+const INLINE_IMAGE_MAX_COUNT = 20;
+
+const TOOLS = [
+  { command: 'bold', label: '加粗', icon: <BoldOutlined /> },
+  { command: 'italic', label: '斜体', icon: <ItalicOutlined /> },
+  { command: 'underline', label: '下划线', icon: <UnderlineOutlined /> },
+  { command: 'strikeThrough', label: '删除线', icon: <StrikethroughOutlined /> },
+  { command: 'insertOrderedList', label: '有序列表', icon: <OrderedListOutlined /> },
+  { command: 'insertUnorderedList', label: '无序列表', icon: <UnorderedListOutlined /> },
+] as const;
+
+export function RichTextValueDisplay({ value }: { value: string }) {
+  return (
+    <div
+      className="oxa-rich-text-value"
+      dangerouslySetInnerHTML={{ __html: value }}
+    />
+  );
+}
+
+export function RichTextField({
+  value = '',
+  onChange,
+  disabled = false,
+  mobile = false,
+  onUpload,
+  resourceCode,
+}: {
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  mobile?: boolean;
+  onUpload?: (file: File) => Promise<DataFileRef>;
+  resourceCode?: string;
+}) {
+  const editor = useRef<HTMLDivElement | null>(null);
+  const imageInput = useRef<HTMLInputElement | null>(null);
+  const [imageUploading, setImageUploading] = useState(false);
+  const [imageError, setImageError] = useState('');
+
+  useEffect(() => {
+    if (editor.current && editor.current.innerHTML !== value) {
+      editor.current.innerHTML = value;
+    }
+  }, [value]);
+
+  const emit = () => {
+    if (!editor.current) return;
+    const normalized = sanitizeRichText(editor.current.innerHTML);
+    if (editor.current.innerHTML !== normalized) editor.current.innerHTML = normalized;
+    onChange?.(normalized);
+  };
+
+  const command = (name: string, argument?: string) => {
+    editor.current?.focus();
+    document.execCommand(name, false, argument);
+    emit();
+  };
+
+  const insertLink = () => {
+    const url = window.prompt('链接地址');
+    if (url && /^(?:https?:|mailto:|tel:)/i.test(url.trim())) {
+      command('createLink', url.trim());
+    }
+  };
+
+  const insertImage = async (file: File) => {
+    if (!editor.current || !onUpload || !resourceCode) return;
+    const selection = window.getSelection();
+    const selectedRange =
+      selection?.rangeCount && editor.current.contains(selection.anchorNode)
+        ? selection.getRangeAt(0).cloneRange()
+        : null;
+    try {
+      setImageError('');
+      setImageUploading(true);
+      if (!INLINE_IMAGE_ACCEPT.split(',').includes(file.type)) {
+        throw new Error('仅支持 PNG、JPEG、WebP 或 GIF 图片');
+      }
+      if (file.size > INLINE_IMAGE_MAX_BYTES) {
+        throw new Error('单张图片不能超过 10MB');
+      }
+      if (editor.current.querySelectorAll('img').length >= INLINE_IMAGE_MAX_COUNT) {
+        throw new Error('每个富文本最多插入 20 张图片');
+      }
+      const uploaded = await onUpload(file);
+      const image = document.createElement('img');
+      image.src = dataRichTextImageSource(resourceCode, uploaded.id);
+      image.alt = file.name;
+      const range = selectedRange || document.createRange();
+      if (!selectedRange) {
+        range.selectNodeContents(editor.current);
+        range.collapse(false);
+      }
+      range.deleteContents();
+      range.insertNode(image);
+      range.setStartAfter(image);
+      range.collapse(true);
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+      emit();
+    } catch (error) {
+      setImageError(error instanceof Error ? error.message : String(error));
+    } finally {
+      setImageUploading(false);
+    }
+  };
+
+  return (
+    <div className={`oxa-rich-text-field${mobile ? ' oxa-mobile-rich-text-field' : ''}`}>
+      <Space className="oxa-rich-text-toolbar" size={4} wrap>
+        {TOOLS.map(tool => (
+          <Tooltip key={tool.command} title={tool.label}>
+            <Button
+              aria-label={tool.label}
+              disabled={disabled}
+              icon={tool.icon}
+              onMouseDown={event => {
+                event.preventDefault();
+                command(tool.command);
+              }}
+              size="small"
+            />
+          </Tooltip>
+        ))}
+        <Tooltip title="插入链接">
+          <Button
+            aria-label="插入链接"
+            disabled={disabled}
+            icon={<LinkOutlined />}
+            onMouseDown={event => {
+              event.preventDefault();
+              insertLink();
+            }}
+            size="small"
+          />
+        </Tooltip>
+        {onUpload && resourceCode && (
+          <Tooltip title="插入图片">
+            <Button
+              aria-label="插入图片"
+              disabled={disabled}
+              icon={<FileImageOutlined />}
+              loading={imageUploading}
+              onMouseDown={event => {
+                event.preventDefault();
+                imageInput.current?.click();
+              }}
+              size="small"
+            />
+          </Tooltip>
+        )}
+      </Space>
+      <input
+        accept={INLINE_IMAGE_ACCEPT}
+        onChange={event => {
+          const file = event.currentTarget.files?.[0];
+          event.currentTarget.value = '';
+          if (file) void insertImage(file);
+        }}
+        ref={imageInput}
+        style={{ display: 'none' }}
+        type="file"
+      />
+      {imageError && <div className="oxa-rich-text-error" role="alert">{imageError}</div>}
+      <div
+        aria-label="富文本内容"
+        className="oxa-rich-text-editor"
+        contentEditable={!disabled}
+        onBlur={emit}
+        onInput={emit}
+        ref={editor}
+        role="textbox"
+        suppressContentEditableWarning
+      />
+    </div>
+  );
+}

package/template/apps/web/src/components/platform-fields/SignatureField.tsx

@@ -0,0 +1,315 @@
+import {
+  ClearOutlined,
+  DeleteOutlined,
+  EditOutlined,
+} from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Drawer,
+  Image,
+  Modal,
+  Space,
+  Spin,
+  Typography,
+} from 'antd';
+import type {
+  DataFileRef,
+  StableSignaturePoint,
+  StableSignatureValue,
+  UserReferenceValue,
+} from 'openxiangda-contracts/browser';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from 'react';
+import { fetchDataFileBlob } from '../../platform-client';
+
+const CANVAS_HEIGHT = 240;
+
+async function sha256(blob: Blob) {
+  const digest = await crypto.subtle.digest('SHA-256', await blob.arrayBuffer());
+  return [...new Uint8Array(digest)]
+    .map(byte => byte.toString(16).padStart(2, '0'))
+    .join('');
+}
+
+function managedFile(file: DataFileRef): StableSignatureValue['file'] {
+  return {
+    id: file.id,
+    name: file.name,
+    size: file.size,
+    contentType: file.contentType,
+  };
+}
+
+function SignatureImage({
+  value,
+  resourceCode,
+}: {
+  value: StableSignatureValue;
+  resourceCode?: string;
+}) {
+  const [source, setSource] = useState('');
+  const [loading, setLoading] = useState(Boolean(resourceCode));
+
+  useEffect(() => {
+    let active = true;
+    let objectUrl = '';
+    if (!resourceCode) return;
+    setLoading(true);
+    fetchDataFileBlob(resourceCode, value.file.id)
+      .then(blob => {
+        objectUrl = URL.createObjectURL(blob);
+        if (active) setSource(objectUrl);
+      })
+      .catch(() => {
+        if (active) setSource('');
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+    return () => {
+      active = false;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [resourceCode, value.file.id]);
+
+  if (loading) return <Spin size="small" />;
+  return source ? (
+    <Image alt="业务签名" className="oxa-signature-image" preview src={source} />
+  ) : (
+    <Typography.Text>{value.file.name}</Typography.Text>
+  );
+}
+
+export function SignatureValueDisplay({
+  value,
+  resourceCode,
+}: {
+  value: StableSignatureValue;
+  resourceCode?: string;
+}) {
+  return (
+    <div className="oxa-signature-value">
+      <SignatureImage resourceCode={resourceCode} value={value} />
+      <Typography.Text type="secondary">
+        {value.signer?.label || '业务签名'} · {new Date(value.signedAt).toLocaleString()}
+      </Typography.Text>
+      <Typography.Text className="oxa-signature-hash" type="secondary">
+        SHA-256 {value.hash.slice(0, 16)}...
+      </Typography.Text>
+    </div>
+  );
+}
+
+export function SignatureField({
+  value,
+  onChange,
+  onUpload,
+  signer,
+  resourceCode,
+  disabled = false,
+  mobile = false,
+}: {
+  value?: StableSignatureValue;
+  onChange?: (value: StableSignatureValue | undefined) => void;
+  onUpload?: (file: File) => Promise<DataFileRef>;
+  signer?: UserReferenceValue;
+  resourceCode?: string;
+  disabled?: boolean;
+  mobile?: boolean;
+}) {
+  const canvas = useRef<HTMLCanvasElement | null>(null);
+  const drawing = useRef(false);
+  const points = useRef<StableSignaturePoint[]>([]);
+  const [open, setOpen] = useState(false);
+  const [drawn, setDrawn] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  const prepare = useCallback(() => {
+    const element = canvas.current;
+    if (!element) return;
+    const width = Math.max(1, element.getBoundingClientRect().width || 640);
+    const ratio = window.devicePixelRatio || 1;
+    element.width = Math.floor(width * ratio);
+    element.height = Math.floor(CANVAS_HEIGHT * ratio);
+    const context = element.getContext('2d');
+    if (!context) return;
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    context.fillStyle = '#fff';
+    context.fillRect(0, 0, width, CANVAS_HEIGHT);
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    context.lineWidth = mobile ? 3 : 2.4;
+    context.strokeStyle = '#111827';
+  }, [mobile]);
+
+  useEffect(() => {
+    if (!open) return;
+    points.current = [];
+    setDrawn(false);
+    setError('');
+    requestAnimationFrame(() => requestAnimationFrame(prepare));
+  }, [open, prepare]);
+
+  const point = (event: ReactPointerEvent<HTMLCanvasElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top,
+      t: Date.now(),
+    };
+  };
+
+  const clear = () => {
+    points.current = [];
+    setDrawn(false);
+    setError('');
+    prepare();
+  };
+
+  const save = async () => {
+    if (!canvas.current || !points.current.length) {
+      setError('请先完成签名');
+      return;
+    }
+    if (!onUpload) {
+      setError('当前签名字段未配置托管文件上传能力');
+      return;
+    }
+    setSaving(true);
+    setError('');
+    try {
+      const blob = await new Promise<Blob | null>(resolve =>
+        canvas.current?.toBlob(resolve, 'image/png')
+      );
+      if (!blob) throw new Error('生成签名 PNG 失败');
+      const hash = await sha256(blob);
+      const file = new File([blob], `signature-${Date.now()}.png`, {
+        type: 'image/png',
+      });
+      const uploaded = await onUpload(file);
+      onChange?.({
+        file: managedFile(uploaded),
+        ...(signer ? { signer } : {}),
+        signedAt: new Date().toISOString(),
+        points: points.current.slice(),
+        hash,
+      });
+      setOpen(false);
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const canvasContent = (
+    <div className="oxa-signature-pad">
+      <canvas
+        aria-label="手写签名画布"
+        className="oxa-signature-canvas"
+        onPointerCancel={() => { drawing.current = false; }}
+        onPointerDown={event => {
+          event.preventDefault();
+          event.currentTarget.setPointerCapture(event.pointerId);
+          drawing.current = true;
+          const next = point(event);
+          points.current.push(next);
+          const context = event.currentTarget.getContext('2d');
+          if (context) {
+            context.beginPath();
+            context.arc(next.x, next.y, 1, 0, Math.PI * 2);
+            context.fillStyle = '#111827';
+            context.fill();
+          }
+          setDrawn(true);
+        }}
+        onPointerMove={event => {
+          event.preventDefault();
+          if (!drawing.current) return;
+          const previous = points.current[points.current.length - 1];
+          const next = point(event);
+          const context = event.currentTarget.getContext('2d');
+          if (context && previous) {
+            context.beginPath();
+            context.moveTo(previous.x, previous.y);
+            context.lineTo(next.x, next.y);
+            context.stroke();
+          }
+          points.current.push(next);
+        }}
+        onPointerUp={event => {
+          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+          }
+          drawing.current = false;
+        }}
+        ref={canvas}
+      />
+      {error && <Alert showIcon title={error} type="error" />}
+      <Button disabled={saving} icon={<ClearOutlined />} onClick={clear}>
+        清空画布
+      </Button>
+    </div>
+  );
+
+  const dialog: ReactNode = mobile ? (
+    <Drawer
+      destroyOnHidden
+      extra={<Button disabled={!drawn} loading={saving} onClick={() => void save()} type="primary">保存签名</Button>}
+      onClose={() => setOpen(false)}
+      open={open}
+      placement="bottom"
+      size="85vh"
+      title="手写签名"
+    >
+      {canvasContent}
+    </Drawer>
+  ) : (
+    <Modal
+      destroyOnHidden
+      okButtonProps={{ disabled: !drawn }}
+      okText="保存签名"
+      onCancel={() => setOpen(false)}
+      onOk={() => void save()}
+      open={open}
+      confirmLoading={saving}
+      title="手写签名"
+      width={720}
+    >
+      {canvasContent}
+    </Modal>
+  );
+
+  return (
+    <div className="oxa-signature-field">
+      {value ? (
+        <SignatureValueDisplay resourceCode={resourceCode} value={value} />
+      ) : (
+        <Typography.Text type="secondary">尚未签名</Typography.Text>
+      )}
+      {!disabled && (
+        <Space>
+          <Button icon={<EditOutlined />} onClick={() => setOpen(true)}>
+            {value ? '重新签名' : '开始签名'}
+          </Button>
+          {value && (
+            <Button
+              aria-label="清除签名"
+              icon={<DeleteOutlined />}
+              onClick={() => onChange?.(undefined)}
+            />
+          )}
+        </Space>
+      )}
+      {dialog}
+    </div>
+  );
+}