feat: 添加i18n，美化界面

packages/components/src/input/index.tsx

@@ -0,0 +1,47 @@
+import { FormControlLabel, TextField } from '@mui/material';
+import { useForm, Controller } from 'react-hook-form';
+export const InputControl = ({ name, value, onChange }: { name: string; value: string; onChange?: (value: string) => void }) => {
+  return (
+    <TextField
+      variant='outlined'
+      size='small'
+      name={name}
+      value={value || ''}
+      onChange={(e) => onChange?.(e.target.value)}
+      sx={{
+        width: '100%',
+        marginBottom: '16px',
+      }}
+    />
+  );
+};
+type FormProps = {
+  onSubmit?: (data: any) => void;
+  children?: React.ReactNode;
+};
+export const FormDemo = (props: FormProps) => {
+  const { control, handleSubmit } = useForm();
+  const { onSubmit = () => {}, children } = props;
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        name='name'
+        control={control}
+        defaultValue=''
+        rules={{ required: 'Name is required' }}
+        render={({ field, fieldState: { error } }) => (
+          <TextField
+            {...field}
+            label='Name'
+            variant='outlined'
+            margin='normal'
+            fullWidth //
+            error={!!error}
+            helperText={<>{error?.message}</>}
+          />
+        )}
+      />
+    </form>
+  );
+};

packages/components/src/modal/Confirm.tsx

@@ -0,0 +1,91 @@
+import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';
+import { useRef, useState } from 'react';
+
+export const Confirm = ({
+  open,
+  onClose,
+  title,
+  content,
+  onConfirm,
+  confirmText = '确认',
+  cancelText = '取消',
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  content: string;
+  onConfirm?: () => void;
+  confirmText?: string;
+  cancelText?: string;
+}) => {
+  return (
+    <Dialog open={open} onClose={onClose} aria-labelledby='alert-dialog-title' aria-describedby='alert-dialog-description'>
+      <DialogTitle id='alert-dialog-title' className='text-secondary min-w-[300px]'>
+        {title}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id='alert-dialog-description'>{content}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color='primary'>
+          {cancelText || '取消'}
+        </Button>
+        <Button onClick={onConfirm} variant='contained' color='primary' autoFocus>
+          {confirmText || '确认'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+type Fn = () => void;
+export const useConfirm = () => {
+  const [open, setOpen] = useState(false);
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const fns = useRef<{
+    onConfirm: Fn;
+    onCancel: Fn;
+    confirmText: string;
+    cancelText: string;
+  }>({
+    onConfirm: () => {},
+    onCancel: () => {},
+    confirmText: '确认',
+    cancelText: '取消',
+  });
+  return {
+    contextHolder: (
+      <Confirm
+        open={open}
+        confirmText={fns.current.confirmText}
+        cancelText={fns.current.cancelText}
+        onClose={() => {
+          setOpen(false);
+          fns.current.onCancel();
+        }}
+        title={title}
+        content={content}
+        onConfirm={fns.current.onConfirm}
+      />
+    ),
+    confirm: (
+      title: string,
+      content: string,
+      opts?: {
+        onConfirm: () => void;
+        confirmText?: string;
+        cancelText?: string;
+        onCancel?: () => void;
+      },
+    ) => {
+      setOpen(true);
+      setTitle(title);
+      setContent(content);
+      fns.current.onConfirm = opts?.onConfirm || (() => {});
+      fns.current.onCancel = opts?.onCancel || (() => {});
+      fns.current.confirmText = opts?.confirmText || '确认';
+      fns.current.cancelText = opts?.cancelText || '取消';
+    },
+  };
+};

packages/components/src/theme/wind-theme.css

@@ -5,4 +5,67 @@
   --color-secondary: #ffa000;
   --color-success: #28a745;
   --scrollbar-color: #ffc107; /* 滚动条颜色 */
-}
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+}
+/* font-family */
+@utility font-family-mon {
+  font-family: 'Montserrat', sans-serif;
+}
+@utility font-family-rob {
+  font-family: 'Roboto', sans-serif;
+}
+@utility font-family-int {
+  font-family: 'Inter', sans-serif;
+}
+@utility font-family-orb {
+  font-family: 'Orbitron', sans-serif;
+}
+@utility font-family-din {
+  font-family: 'DIN', sans-serif;
+}
+
+@utility flex-row-center {
+  @apply flex flex-row items-center justify-center;
+}
+@utility flex-col-center {
+  @apply flex flex-col items-center justify-center;
+}
+
+@utility scrollbar {
+  overflow: auto;
+  /* 整个滚动条 */
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+
+  /* 滚动条有滑块的轨道部分 */
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+    border-radius: 1px;
+  }
+
+  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background-color: #c1c1c1;
+    border-radius: 5px;
+  }
+
+  /* 滚动条滑块hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #999999;
+  }
+
+  /* 同时有垂直和水平滚动条时交汇的部分 */
+  &::-webkit-scrollbar-corner {
+    display: block; /* 修复交汇时出现的白块 */
+  }
+}