cdrop — 跨 OS 剪贴板与文件传输服务

Commilitia Drop：自托管的跨设备剪贴板同步与点对点文件传输。 - 后端 Go（chi / SQLite WAL / SSE Hub / WebRTC signaling + 状态机 / Relay ring buffer），编译进单个 distroless 镜像（前端 go:embed）。 - 前端 React + TanStack Router + Zustand，自实现 SSE + WebRTC P2P，NAT 受阻时回退服务端中继；聚珍（Juzhen）CJK 综合排版。 - 桌面端 Wails v2（macOS / Windows），瘦客户端复用 web。 - 鉴权 OIDC PKCE（自建 Casdoor 等），refresh_token 信封加密存系统密钥库；iOS Shortcut 用 HS256 scoped token。架构文档与变更记录见 docs 分支（PROJECT_BRIEF / FRONTEND_DESIGN / CHANGELOG）。本次为公开发布初始提交：完整开发历史（含部署细节）留存于私有归档，公开仓库自此干净起步。
2026-06-15 21:38:28 +08:00
commit f21fa5b5e8
239 changed files with 29010 additions and 0 deletions
@@ -0,0 +1,100 @@
+import {
+    forwardRef,
+    useId,
+    type InputHTMLAttributes,
+    type TextareaHTMLAttributes,
+    type ReactNode,
+} from "react";
+import s from "./Field.module.css";
+
+interface BaseProps
+{
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+}
+
+export interface TextFieldProps
+    extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">,
+            BaseProps
+{}
+
+export interface TextAreaProps
+    extends TextareaHTMLAttributes<HTMLTextAreaElement>,
+            BaseProps
+{}
+
+function Wrap(props: {
+    id: string;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    children: ReactNode;
+})
+{
+    const { id, label, hint, error, required, children } = props;
+    return (
+        <div className={s.field}>
+            {label && (
+                <label
+                    htmlFor={id}
+                    className={[ s.label, required ? s.required : "" ].filter(Boolean).join(" ")}
+                >
+                    {label}
+                </label>
+            )}
+            {children}
+            {error
+                ? <div className={`${s.error} justify`} role="alert" data-jz-level="paragraph">{error}</div>
+                : hint ? <div className={`${s.hint} justify`} data-jz-level="paragraph">{hint}</div> : null}
+        </div>
+    );
+}
+
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) =>
+{
+    const { id, label, hint, error, required, className, ...rest } = props;
+    const auto = useId();
+    const inputId = id ?? auto;
+
+    const cls = [ s.input, error ? s.invalid : "", className ?? "" ]
+        .filter(Boolean).join(" ");
+
+    return (
+        <Wrap id={inputId} label={label} hint={hint} error={error} required={required}>
+            <input
+                ref={ref}
+                id={inputId}
+                className={cls}
+                aria-invalid={error ? true : undefined}
+                {...rest}
+            />
+        </Wrap>
+    );
+});
+TextField.displayName = "TextField";
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) =>
+{
+    const { id, label, hint, error, required, className, ...rest } = props;
+    const auto = useId();
+    const inputId = id ?? auto;
+
+    const cls = [ s.textarea, error ? s.invalid : "", className ?? "" ]
+        .filter(Boolean).join(" ");
+
+    return (
+        <Wrap id={inputId} label={label} hint={hint} error={error} required={required}>
+            <textarea
+                ref={ref}
+                id={inputId}
+                className={cls}
+                aria-invalid={error ? true : undefined}
+                {...rest}
+            />
+        </Wrap>
+    );
+});
+TextArea.displayName = "TextArea";