admin
f21fa5b5e8
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）。 本次为公开发布初始提交：完整开发历史（含部署细节）留存于私有归档，公开仓库自此干净起步。
101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
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";
|