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

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

@@ -0,0 +1,148 @@
+import { DatePicker, TimePicker, Typography } from 'antd';
+import type { DataFieldSurface } from 'openxiangda-contracts/browser';
+import { fieldValueForData, fieldValueForForm } from './field-form-codec';
+
+export function DateTimeField({
+  field,
+  disabled,
+  mobile = false,
+}: {
+  field: DataFieldSurface;
+  disabled?: boolean;
+  mobile?: boolean;
+}) {
+  const className = mobile ? 'oxa-mobile-date-time-field' : undefined;
+  switch (field.type) {
+    case 'time': {
+      const format = field.timePrecision === 'minute' ? 'HH:mm' : 'HH:mm:ss';
+      return (
+        <TimePicker
+          className={className}
+          disabled={disabled}
+          format={format}
+          needConfirm={false}
+          placeholder={`请选择${field.label}`}
+          showSecond={field.timePrecision !== 'minute'}
+          style={{ width: '100%' }}
+        />
+      );
+    }
+    case 'datetime':
+      return (
+        <DatePicker
+          className={className}
+          disabled={disabled}
+          format="YYYY-MM-DD HH:mm:ss"
+          placeholder={`请选择${field.label}`}
+          showTime={{ format: 'HH:mm:ss' }}
+          style={{ width: '100%' }}
+        />
+      );
+    case 'date-range':
+      return (
+        <DatePicker.RangePicker
+          className={className}
+          disabled={disabled}
+          format="YYYY-MM-DD"
+          placeholder={[`开始${field.label}`, `结束${field.label}`]}
+          style={{ width: '100%' }}
+        />
+      );
+    case 'datetime-range':
+      return (
+        <DatePicker.RangePicker
+          className={className}
+          disabled={disabled}
+          format="YYYY-MM-DD HH:mm:ss"
+          placeholder={[`开始${field.label}`, `结束${field.label}`]}
+          showTime={{ format: 'HH:mm:ss' }}
+          style={{ width: '100%' }}
+        />
+      );
+    case 'date':
+    default:
+      return (
+        <DatePicker
+          className={className}
+          disabled={disabled}
+          format="YYYY-MM-DD"
+          placeholder={`请选择${field.label}`}
+          style={{ width: '100%' }}
+        />
+      );
+  }
+}
+
+export function DateTimeValueDisplay({
+  field,
+  value,
+}: {
+  field: DataFieldSurface;
+  value: unknown;
+}) {
+  if (field.type === 'date-range' || field.type === 'datetime-range') {
+    const range = value as { start?: unknown; end?: unknown };
+    return <>{range?.start && range?.end ? `${range.start} 至 ${range.end}` : '-'}</>;
+  }
+  if (field.type === 'time') {
+    const time = String(value);
+    return <>{field.timePrecision === 'minute' ? time.slice(0, 5) : time}</>;
+  }
+  if (field.type === 'datetime') {
+    const parsed = new Date(String(value));
+    return <>{Number.isNaN(parsed.getTime()) ? String(value) : parsed.toLocaleString('zh-CN', { hour12: false })}</>;
+  }
+  return <Typography.Text>{String(value)}</Typography.Text>;
+}
+
+export function DateTimeFilter({
+  field,
+  value,
+  onChange,
+}: {
+  field: DataFieldSurface;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}) {
+  const formValue = fieldValueForForm(field, value) as never;
+  const emit = (next: unknown) => onChange(
+    next === null ? undefined : fieldValueForData(field, next)
+  );
+  if (field.type === 'time') {
+    const format = field.timePrecision === 'minute' ? 'HH:mm' : 'HH:mm:ss';
+    return (
+      <TimePicker
+        allowClear
+        format={format}
+        onChange={emit}
+        placeholder={`筛选${field.label}`}
+        showSecond={field.timePrecision !== 'minute'}
+        value={formValue}
+      />
+    );
+  }
+  if (field.type === 'date-range' || field.type === 'datetime-range') {
+    const datetime = field.type === 'datetime-range';
+    return (
+      <DatePicker.RangePicker
+        allowClear
+        format={datetime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'}
+        onChange={emit}
+        placeholder={[`开始${field.label}`, `结束${field.label}`]}
+        showTime={datetime ? { format: 'HH:mm:ss' } : false}
+        value={formValue}
+      />
+    );
+  }
+  const datetime = field.type === 'datetime';
+  return (
+    <DatePicker
+      allowClear
+      format={datetime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'}
+      onChange={emit}
+      placeholder={`筛选${field.label}`}
+      showTime={datetime ? { format: 'HH:mm:ss' } : false}
+      value={formValue}
+    />
+  );
+}

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

@@ -0,0 +1,77 @@
+import { CheckCircleOutlined, FormatPainterOutlined } from '@ant-design/icons';
+import { Alert, Button, Input, Space } from 'antd';
+import { useEffect, useState } from 'react';
+
+function stringify(value: unknown) {
+  if (value === undefined) return '';
+  return JSON.stringify(value, null, 2);
+}
+
+export function parseJsonEditorValue(value: string) {
+  const text = value.trim();
+  return text ? JSON.parse(text) : undefined;
+}
+
+export function JsonValueDisplay({ value }: { value: unknown }) {
+  return <pre className="oxa-json-value">{stringify(value)}</pre>;
+}
+
+export function JsonField({
+  value,
+  onChange,
+  disabled = false,
+  mobile = false,
+}: {
+  value?: unknown;
+  onChange?: (value: unknown) => void;
+  disabled?: boolean;
+  mobile?: boolean;
+}) {
+  const [draft, setDraft] = useState(() => stringify(value));
+  const [error, setError] = useState('');
+
+  useEffect(() => setDraft(stringify(value)), [value]);
+
+  const validate = (next: string) => {
+    setDraft(next);
+    try {
+      const parsed = parseJsonEditorValue(next);
+      setError('');
+      onChange?.(parsed);
+      return parsed;
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : 'JSON 格式无效');
+      return undefined;
+    }
+  };
+
+  return (
+    <div className={`oxa-json-field${mobile ? ' oxa-mobile-json-field' : ''}`}>
+      <Input.TextArea
+        autoSize={{ minRows: mobile ? 8 : 6, maxRows: 18 }}
+        disabled={disabled}
+        onChange={event => validate(event.target.value)}
+        placeholder='例如：{"enabled": true}'
+        spellCheck={false}
+        value={draft}
+      />
+      <Space>
+        <Button
+          disabled={disabled || Boolean(error) || !draft.trim()}
+          icon={<FormatPainterOutlined />}
+          onClick={() => {
+            const parsed = validate(draft);
+            if (parsed !== undefined) setDraft(stringify(parsed));
+          }}
+          size="small"
+        >
+          格式化
+        </Button>
+        {!error && draft.trim() && (
+          <span className="oxa-json-valid"><CheckCircleOutlined /> 格式有效</span>
+        )}
+      </Space>
+      {error && <Alert showIcon title={`JSON 格式无效：${error}`} type="error" />}
+    </div>
+  );
+}

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

@@ -0,0 +1,164 @@
+import {
+  AimOutlined,
+  DeleteOutlined,
+  EnvironmentOutlined,
+} from '@ant-design/icons';
+import { Alert, Button, Space, Tooltip, Typography } from 'antd';
+import type { StableLocationValue } from 'openxiangda-contracts/browser';
+import { useState } from 'react';
+import {
+  browserLocationValue,
+  dingTalkLocationValue,
+  type DingTalkCoordinateSnapshot,
+} from './location-value';
+
+interface DingTalkGeolocationApi {
+  get(options: {
+    targetAccuracy: number;
+    coordinate: 0;
+    withReGeocode: true;
+    useCache: false;
+    onSuccess: (result: DingTalkCoordinateSnapshot) => void;
+    onFail: (error: unknown) => void;
+  }): void;
+}
+
+type CaptureSource = StableLocationValue['source'];
+
+export function LocationValueDisplay({ value }: { value: StableLocationValue }) {
+  return (
+    <span className="oxa-location-value oxa-location-value-readonly">
+      <Typography.Text strong>
+        {value.longitude.toFixed(6)}, {value.latitude.toFixed(6)}
+      </Typography.Text>
+      <Typography.Text type="secondary">
+        {value.source === 'dingTalk' ? '钉钉定位' : '浏览器定位'}
+        {value.accuracy === undefined ? '' : ` · 精度 ${Math.round(value.accuracy)} 米`}
+      </Typography.Text>
+      {(value.name || value.address) && (
+        <Typography.Text>{value.name || value.address}</Typography.Text>
+      )}
+    </span>
+  );
+}
+
+function dingTalkGeolocation() {
+  if (typeof window === 'undefined') return undefined;
+  return (
+    window as unknown as {
+      dd?: { device?: { geolocation?: DingTalkGeolocationApi } };
+    }
+  ).dd?.device?.geolocation;
+}
+
+function browserCapture() {
+  return new Promise<StableLocationValue>((resolve, reject) => {
+    if (!navigator.geolocation) {
+      reject(new Error('当前浏览器不支持定位'));
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(
+      position => resolve(browserLocationValue({
+        longitude: position.coords.longitude,
+        latitude: position.coords.latitude,
+        accuracy: position.coords.accuracy,
+        timestamp: position.timestamp,
+      })),
+      error => reject(new Error(error.message || '浏览器定位失败')),
+      { enableHighAccuracy: true, maximumAge: 0, timeout: 15_000 }
+    );
+  });
+}
+
+function dingTalkCapture() {
+  return new Promise<StableLocationValue>((resolve, reject) => {
+    const geolocation = dingTalkGeolocation();
+    if (!geolocation) {
+      reject(new Error('当前环境未提供钉钉定位能力'));
+      return;
+    }
+    geolocation.get({
+      targetAccuracy: 20,
+      coordinate: 0,
+      withReGeocode: true,
+      useCache: false,
+      onSuccess: result => {
+        try {
+          resolve(dingTalkLocationValue(result));
+        } catch (error) {
+          reject(error);
+        }
+      },
+      onFail: error => reject(new Error(
+        typeof error === 'object' && error && 'errorMessage' in error
+          ? String(error.errorMessage)
+          : '钉钉定位失败'
+      )),
+    });
+  });
+}
+
+export function LocationField({
+  value,
+  onChange,
+  disabled,
+  mobile = false,
+}: {
+  value?: StableLocationValue;
+  onChange?: (value: StableLocationValue | undefined) => void;
+  disabled?: boolean;
+  mobile?: boolean;
+}) {
+  const [capturing, setCapturing] = useState<CaptureSource>();
+  const [error, setError] = useState('');
+  const hasDingTalk = Boolean(dingTalkGeolocation());
+
+  const capture = async (source: CaptureSource) => {
+    setCapturing(source);
+    setError('');
+    try {
+      onChange?.(await (source === 'dingTalk' ? dingTalkCapture() : browserCapture()));
+    } catch (captureError) {
+      setError(captureError instanceof Error ? captureError.message : String(captureError));
+    } finally {
+      setCapturing(undefined);
+    }
+  };
+
+  return (
+    <div className={`oxa-location-field${mobile ? ' oxa-mobile-location-field' : ''}`}>
+      <Space wrap>
+        <Tooltip title={hasDingTalk ? '使用钉钉定位' : '仅在钉钉客户端内可用'}>
+          <Button
+            disabled={disabled || !hasDingTalk}
+            icon={<EnvironmentOutlined />}
+            loading={capturing === 'dingTalk'}
+            onClick={() => void capture('dingTalk')}
+          >
+            钉钉定位
+          </Button>
+        </Tooltip>
+        <Button
+          disabled={disabled}
+          icon={<AimOutlined />}
+          loading={capturing === 'browser'}
+          onClick={() => void capture('browser')}
+        >
+          浏览器定位
+        </Button>
+        {value && (
+          <Tooltip title="清除定位">
+            <Button
+              aria-label="清除定位"
+              disabled={disabled || Boolean(capturing)}
+              icon={<DeleteOutlined />}
+              onClick={() => onChange?.(undefined)}
+            />
+          </Tooltip>
+        )}
+      </Space>
+      {error && <Alert showIcon title={error} type="error" />}
+      {value && <LocationValueDisplay value={value} />}
+    </div>
+  );
+}

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

@@ -20,7 +20,9 @@ import {
   Typography,
   type TreeDataNode,
 } from 'antd';
-import type { DirectoryEntry } from 'openxiangda-contracts/browser';
+import type {
+  DirectoryEntry,
+} from 'openxiangda-contracts/browser';
 import {
   useCallback,
   useEffect,
@@ -32,17 +34,18 @@ import {
 import {
   browseDepartmentTree,
   browseDepartmentUsers,
-  resolveDirectory,
   searchDirectory,
   type DirectoryKind,
 } from '../../platform-client';
+import {
+  directoryEntryFromStored,
+  directoryStoredValueFromEntries,
+  directoryStoredValues,
+  type DirectoryStoredValue,
+} from './directory-value';
 
 type DepartmentNode = DirectoryEntry & { children?: DepartmentNode[] };
 
-function selectedValues(value?: string | string[]) {
-  return Array.isArray(value) ? value : value ? [value] : [];
-}
-
 function replaceChildren(
   nodes: DepartmentNode[],
   parentId: string,
@@ -82,8 +85,8 @@ export function PlatformDirectoryPicker({
   id,
 }: {
   kind: DirectoryKind;
-  value?: string | string[];
-  onChange?: (value: string | string[] | undefined) => void;
+  value?: DirectoryStoredValue | DirectoryStoredValue[];
+  onChange?: (value: DirectoryStoredValue | DirectoryStoredValue[] | undefined) => void;
   multiple?: boolean;
   disabled?: boolean;
   placeholder: string;
@@ -91,48 +94,24 @@ export function PlatformDirectoryPicker({
 }) {
   const screens = Grid.useBreakpoint();
   const mobile = !screens.md;
-  const values = useMemo(() => selectedValues(value), [value]);
+  const values = useMemo(() => directoryStoredValues(value), [value]);
   const [open, setOpen] = useState(false);
-  const [selected, setSelected] = useState<DirectoryEntry[]>([]);
-  const [resolving, setResolving] = useState(false);
-  const [resolveFailed, setResolveFailed] = useState(false);
+  const [selected, setSelected] = useState<DirectoryEntry[]>(() =>
+    values.map(item => directoryEntryFromStored(kind, item))
+  );
 
   useEffect(() => {
-    if (!values.length) {
-      setSelected([]);
-      setResolveFailed(false);
-      return;
-    }
-    let active = true;
-    setResolving(true);
-    setResolveFailed(false);
-    void resolveDirectory(kind, values)
-      .then(page => {
-        if (active) setSelected(page.items);
-      })
-      .catch(() => {
-        if (active) setResolveFailed(true);
-      })
-      .finally(() => {
-        if (active) setResolving(false);
-      });
-    return () => {
-      active = false;
-    };
+    setSelected(values.map(item => directoryEntryFromStored(kind, item)));
   }, [kind, values]);
 
   const remove = (entryId: string) => {
     const next = selected.filter(entry => entry.id !== entryId);
     setSelected(next);
-    onChange?.(
-      multiple ? next.map(entry => entry.id) : next[0]?.id || undefined
-    );
+    onChange?.(directoryStoredValueFromEntries(next, multiple));
   };
   const confirm = (items: DirectoryEntry[]) => {
     setSelected(items);
-    onChange?.(
-      multiple ? items.map(entry => entry.id) : items[0]?.id || undefined
-    );
+    onChange?.(directoryStoredValueFromEntries(items, multiple));
     setOpen(false);
   };
   const panel = (
@@ -168,11 +147,7 @@ export function PlatformDirectoryPicker({
           {kind === 'user' ? <UserOutlined /> : <ApartmentOutlined />}
         </span>
         <span className="oxa-directory-trigger-values">
-          {resolving ? (
-            <Typography.Text type="secondary">读取中…</Typography.Text>
-          ) : resolveFailed ? (
-            <Typography.Text type="danger">目录解析失败</Typography.Text>
-          ) : selected.length ? (
+          {selected.length ? (
             selected.map(entry => (
               <Tag
                 closable={!disabled}

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

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