openxiangda-cli 2.0.0-alpha.89 → 2.0.0-alpha.90

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

@@ -1,67 +0,0 @@
-import { Form } from 'antd';
-import type {
-  DataFieldSurface,
-  ResourceReferenceValue,
-} from 'openxiangda-contracts/browser';
-import {
-  AuthoritativeSelector,
-  MobileAuthoritativeSelector,
-} from '../../AuthoritativeSelector';
-
-export function ResourceReferenceField({
-  field,
-  fieldCode,
-  resourceCode,
-  operation,
-  disabled,
-  mobile,
-  value,
-  onChange,
-}: {
-  field: DataFieldSurface;
-  fieldCode: string;
-  resourceCode?: string;
-  operation: 'create' | 'update';
-  disabled?: boolean;
-  mobile?: boolean;
-  value?: ResourceReferenceValue | ResourceReferenceValue[];
-  onChange?: (
-    value: ResourceReferenceValue | ResourceReferenceValue[] | undefined
-  ) => void;
-}) {
-  const form = Form.useFormInstance();
-  const formValues = Form.useWatch([], form) as
-    | Record<string, unknown>
-    | undefined;
-  const bindings = Object.fromEntries(
-    (field.source?.filters || []).flatMap(filter =>
-      'binding' in filter
-        ? [[filter.binding.field, formValues?.[filter.binding.field]]]
-        : []
-    )
-  );
-  const Selector = mobile
-    ? MobileAuthoritativeSelector
-    : AuthoritativeSelector;
-  return (
-    <Selector
-      bindings={bindings}
-      disabled={disabled}
-      fieldCode={fieldCode}
-      multiple={field.type === 'resource-ref.multiple'}
-      onChange={next =>
-        onChange?.(
-          next as
-            | ResourceReferenceValue
-            | ResourceReferenceValue[]
-            | undefined
-        )
-      }
-      operation={operation}
-      placeholder={`搜索并选择${field.label}`}
-      resourceCode={resourceCode}
-      source="resource"
-      value={value}
-    />
-  );
-}

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

@@ -1,196 +0,0 @@
-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

@@ -1,315 +0,0 @@
-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>
-  );
-}