From 8b30a7216e72980fd6f3dd573628dfdb340210ff Mon Sep 17 00:00:00 2001
From: yyyclint <1255829396@qq.com>
Date: Fri, 28 Mar 2025 01:31:40 +0800
Subject: [PATCH 1/2] =?UTF-8?q?Textarea=20=E5=A2=9E=E5=8A=A0=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=AD=97=E6=95=B0=E5=92=8C=E8=AE=BE=E7=BD=AE=E5=AD=97?=
 =?UTF-8?q?=E6=95=B0=E4=B8=8A=E9=99=90=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/ui/components/ui/textarea.tsx | 47 +++++++++++++++++++++++-------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/apps/ui/components/ui/textarea.tsx b/apps/ui/components/ui/textarea.tsx
index 57a473f..99a4dc2 100644
--- a/apps/ui/components/ui/textarea.tsx
+++ b/apps/ui/components/ui/textarea.tsx
@@ -8,13 +8,14 @@ import {
   composeRenderProps,
 } from "react-aria-components"
 import { tv } from "tailwind-variants"
+import { useState, useEffect } from "react"
 
 import { Description, FieldError, Label } from "./field"
 import { composeTailwindRenderProps, focusStyles } from "./primitive"
 
 const textareaStyles = tv({
   extend: focusStyles,
-  base: "field-sizing-content max-h-96 min-h-16 w-full min-w-0 rounded-lg border border-input px-2.5 py-2 text-base shadow-xs outline-hidden transition duration-200 disabled:opacity-50 sm:text-sm",
+  base: "field-sizing-content max-h-96 min-h-16 w-full min-w-0 rounded-lg border border-input px-2.5 py-2 pb-6 text-base shadow-xs outline-hidden transition duration-200 disabled:opacity-50 sm:text-sm break-words whitespace-pre-wrap overflow-wrap-anywhere",
 })
 
 interface TextareaProps extends TextFieldPrimitiveProps {
@@ -25,6 +26,8 @@ interface TextareaProps extends TextFieldPrimitiveProps {
   errorMessage?: string | ((validation: ValidationResult) => string)
   className?: string
   ref?: React.Ref<HTMLDivElement>
+  showCharacterCount?: boolean
+  maxLength?: number
 }
 
 const Textarea = ({
@@ -34,8 +37,23 @@ const Textarea = ({
   description,
   errorMessage,
   ref,
+  showCharacterCount,
+  maxLength,
   ...props
 }: TextareaProps) => {
+  const [currentLength, setCurrentLength] = useState(props.value?.toString().length || 0);
+
+  useEffect(() => {
+    setCurrentLength(props.value?.toString().length || 0);
+  }, [props.value]);
+
+  const getCountText = () => {
+    if (maxLength) {
+      return `${currentLength}/${maxLength}`;
+    }
+    return `${currentLength}字`;
+  };
+
   return (
     <TextFieldPrimitive
       ref={ref}
@@ -43,15 +61,24 @@ const Textarea = ({
       className={composeTailwindRenderProps(className, "group flex flex-col gap-y-1.5")}
     >
       {label && <Label isRequired={props.isRequired}>{label}</Label>}
-      <TextAreaPrimitive
-        placeholder={placeholder}
-        className={composeRenderProps(className, (className, renderProps) =>
-          textareaStyles({
-            ...renderProps,
-            className,
-          }),
+      <div className="relative">
+        <TextAreaPrimitive
+          placeholder={placeholder}
+          maxLength={maxLength}
+          className={composeRenderProps(className, (className, renderProps) =>
+            textareaStyles({
+              ...renderProps,
+              className,
+            }),
+          )}
+          style={{ wordWrap: "break-word", overflowWrap: "break-word" }}
+        />
+        {showCharacterCount && currentLength > 0 && (
+          <div className="absolute bottom-1 right-2.5 text-xs text-muted-fg select-none pointer-events-none">
+            {getCountText()}
+          </div>
         )}
-      />
+      </div>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
     </TextFieldPrimitive>
@@ -59,4 +86,4 @@ const Textarea = ({
 }
 
 export type { TextareaProps }
-export { Textarea }
+export { Textarea }
\ No newline at end of file

From c69e41d6ef61d793dfb7b411978da93a5c79faaa Mon Sep 17 00:00:00 2001
From: yyyclint <1255829396@qq.com>
Date: Fri, 28 Mar 2025 01:55:20 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8DSelect=E5=92=8CTextfield?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8ADatepicker=E7=9A=84Label=E9=AB=98=E5=BA=A6?=
 =?UTF-8?q?=E4=B8=8D=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/ui/components/ui/date-picker.tsx | 34 ++++++++++++++++++++++-----
 apps/ui/components/ui/select.tsx      | 31 ++++++++++++++++++++----
 2 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/apps/ui/components/ui/date-picker.tsx b/apps/ui/components/ui/date-picker.tsx
index e2e5d77..453992d 100644
--- a/apps/ui/components/ui/date-picker.tsx
+++ b/apps/ui/components/ui/date-picker.tsx
@@ -19,6 +19,7 @@ import { Description, FieldError, FieldGroup, Label } from "./field"
 import { Popover } from "./popover"
 import { composeTailwindRenderProps } from "./primitive"
 import { RangeCalendar } from "./range-calendar"
+import { Typography } from "./typography"
 
 interface DatePickerOverlayProps
   extends Omit<DialogProps, "children" | "className" | "style">,
@@ -78,6 +79,8 @@ interface DatePickerProps<T extends DateValue> extends DatePickerPrimitiveProps<
   label?: string
   description?: string
   errorMessage?: string | ((validation: ValidationResult) => string)
+  leftDescription?: React.ReactNode
+  rightDescription?: React.ReactNode
 }
 
 const DatePicker = <T extends DateValue>({
@@ -85,23 +88,42 @@ const DatePicker = <T extends DateValue>({
   className,
   description,
   errorMessage,
+  leftDescription,
+  rightDescription,
   ...props
 }: DatePickerProps<T>) => {
   return (
     <DatePickerPrimitive
       {...props}
-      className={composeTailwindRenderProps(className, "group/date-picker flex flex-col gap-y-1")}
+      className={composeTailwindRenderProps(className, "group flex w-full flex-col gap-y-1")}
     >
-      {label && <Label isRequired={props.isRequired}>{label}</Label>}
-      <FieldGroup className="min-w-40">
+      {label && 
+        <Typography as="div">
+          <Label isRequired={props.isRequired}>{label}</Label>
+        </Typography>
+      }
+      <FieldGroup className="min-w-40 h-10">
         <DateInput className="w-full px-2 text-base sm:text-sm" />
         <DatePickerIcon />
       </FieldGroup>
-      {description && <Description>{description}</Description>}
-      <FieldError>{errorMessage}</FieldError>
+      {description && 
+        <Typography as="div">
+          <Description>{description}</Description>
+        </Typography>
+      }
+      
+      {(leftDescription || errorMessage || rightDescription) && (
+        <Typography as="div">
+          <div className="mt-1 flex justify-between text-sm text-muted-fg">
+            <div>{errorMessage ? <FieldError>{errorMessage}</FieldError> : leftDescription}</div>
+            <div>{rightDescription}</div>
+          </div>
+        </Typography>
+      )}
+      
       <DatePickerOverlay />
     </DatePickerPrimitive>
   )
 }
 export type { DatePickerProps, DateValue, ValidationResult }
-export { DatePicker, DatePickerIcon, DatePickerOverlay }
+export { DatePicker, DatePickerIcon, DatePickerOverlay }
\ No newline at end of file
diff --git a/apps/ui/components/ui/select.tsx b/apps/ui/components/ui/select.tsx
index 436857d..661f3e2 100644
--- a/apps/ui/components/ui/select.tsx
+++ b/apps/ui/components/ui/select.tsx
@@ -26,6 +26,7 @@ import { Description, FieldError, Label } from "./field"
 import { ListBox } from "./list-box"
 import { PopoverContent } from "./popover"
 import { composeTailwindRenderProps, focusStyles } from "./primitive"
+import { Typography } from "./typography"
 
 const selectTriggerStyles = tv({
   extend: focusStyles,
@@ -47,6 +48,8 @@ interface SelectProps<T extends object> extends SelectPrimitiveProps<T> {
   errorMessage?: string | ((validation: ValidationResult) => string)
   items?: Iterable<T>
   className?: string
+  leftDescription?: React.ReactNode
+  rightDescription?: React.ReactNode
 }
 
 const Select = <T extends object>({
@@ -54,19 +57,37 @@ const Select = <T extends object>({
   description,
   errorMessage,
   className,
+  leftDescription,
+  rightDescription,
   ...props
 }: SelectProps<T>) => {
   return (
     <SelectPrimitive
       {...props}
-      className={composeTailwindRenderProps(className, "group flex w-full flex-col gap-y-1.5")}
+      className={composeTailwindRenderProps(className, "group flex w-full flex-col gap-y-1")}
     >
       {(values) => (
         <>
-          {label && <Label>{label}</Label>}
+          {label && 
+            <Typography as="div">
+              <Label isRequired={props.isRequired}>{label}</Label>
+            </Typography>
+          }
           {typeof props.children === "function" ? props.children(values) : props.children}
-          {description && <Description>{description}</Description>}
-          <FieldError>{errorMessage}</FieldError>
+          {description && 
+            <Typography as="div">
+              <Description>{description}</Description>
+            </Typography>
+          }
+          
+          {(leftDescription || errorMessage || rightDescription) && (
+            <Typography as="div">
+              <div className="mt-1 flex justify-between text-sm text-muted-fg">
+                <div>{errorMessage ? <FieldError>{errorMessage}</FieldError> : leftDescription}</div>
+                <div>{rightDescription}</div>
+              </div>
+            </Typography>
+          )}
         </>
       )}
     </SelectPrimitive>
@@ -144,4 +165,4 @@ Select.Trigger = SelectTrigger
 Select.List = SelectList
 
 export type { SelectProps, SelectTriggerProps }
-export { Select }
+export { Select }
\ No newline at end of file