💄refactor: enhance EditUser and AddUser form validation & UX

Changes in `web/src/pages/User/EditUser.js`:
• Added `rules` to
  – `Form.Select group`: now required with error “Please select group”.
  – `Form.InputNumber quota`: now required with error “Please enter quota”.
• Added `step={500000}` to quota `InputNumber` for quicker numeric input.
• Replaced invalid `readonly` with React-correct `readOnly`, and added descriptive placeholders for all binding-info fields (GitHub/OIDC/WeChat/Email/Telegram).
• Removed unused `downloadTextAsFile` import.

These updates tighten form validation, improve data entry ergonomics, and restore clear read-only indicators for third-party bindings.

web/src/pages/User/AddUser.js

@@ -1,15 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { API, isMobile, showError, showSuccess } from '../../helpers';
 import {
   Button,
-  Input,
   SideSheet,
   Space,
   Spin,
   Typography,
   Card,
   Tag,
-  Avatar
+  Avatar,
+  Form,
+  Row,
+  Col,
 } from '@douyinfe/semi-ui';
 import {
   IconSave,
@@ -22,32 +24,23 @@ const { Text, Title } = Typography;
 
 const AddUser = (props) => {
   const { t } = useTranslation();
-  const originInputs = {
+  const formApiRef = useRef(null);
+  const [loading, setLoading] = useState(false);
+
+  const getInitValues = () => ({
     username: '',
     display_name: '',
     password: '',
     remark: '',
-  };
-  const [inputs, setInputs] = useState(originInputs);
-  const [loading, setLoading] = useState(false);
-  const { username, display_name, password, remark } = inputs;
+  });
 
-  const handleInputChange = (name, value) => {
-    setInputs((inputs) => ({ ...inputs, [name]: value }));
-  };
-
-  const submit = async () => {
+  const submit = async (values) => {
     setLoading(true);
-    if (inputs.username === '' || inputs.password === '') {
-      setLoading(false);
-      showError(t('用户名和密码不能为空！'));
-      return;
-    }
-    const res = await API.post(`/api/user/`, inputs);
+    const res = await API.post(`/api/user/`, values);
     const { success, message } = res.data;
     if (success) {
       showSuccess(t('用户账户创建成功！'));
-      setInputs(originInputs);
+      formApiRef.current?.setValues(getInitValues());
       props.refresh();
       props.handleClose();
     } else {
@@ -85,7 +78,7 @@ const AddUser = (props) => {
               <Button
                 theme="solid"
                 className="!rounded-full"
-                onClick={submit}
+                onClick={() => formApiRef.current?.submitForm()}
                 icon={<IconSave />}
                 loading={loading}
               >
@@ -107,71 +100,60 @@ const AddUser = (props) => {
         onCancel={() => handleCancel()}
       >
         <Spin spinning={loading}>
-          <div className="p-6">
-            <Card className="!rounded-2xl shadow-sm border-0">
-              <div className="flex items-center mb-2">
-                <Avatar size="small" color="blue" className="mr-2 shadow-md">
-                  <IconUserAdd size={16} />
-                </Avatar>
-                <div>
-                  <Text className="text-lg font-medium">{t('用户信息')}</Text>
-                  <div className="text-xs text-gray-600">{t('创建新用户账户')}</div>
-                </div>
-              </div>
-
-              <div className="space-y-4">
-                <div>
-                  <Text strong className="block mb-2">{t('用户名')}</Text>
-                  <Input
-                    placeholder={t('请输入用户名')}
-                    onChange={(value) => handleInputChange('username', value)}
-                    value={username}
-                    autoComplete="off"
-                    className="!rounded-lg"
-                    showClear
-                    required
-                  />
+          <Form
+            initValues={getInitValues()}
+            getFormApi={(api) => formApiRef.current = api}
+            onSubmit={submit}
+            onSubmitFail={(errs) => {
+              const first = Object.values(errs)[0];
+              if (first) showError(Array.isArray(first) ? first[0] : first);
+              formApiRef.current?.scrollToError();
+            }}
+          >
+            <div className="p-6 space-y-6">
+              <Card className="!rounded-2xl shadow-sm border-0">
+                <div className="flex items-center mb-2">
+                  <Avatar size="small" color="blue" className="mr-2 shadow-md">
+                    <IconUserAdd size={16} />
+                  </Avatar>
+                  <div>
+                    <Text className="text-lg font-medium">{t('用户信息')}</Text>
+                    <div className="text-xs text-gray-600">{t('创建新用户账户')}</div>
+                  </div>
                 </div>
 
-                <div>
-                  <Text strong className="block mb-2">{t('显示名称')}</Text>
-                  <Input
-                    placeholder={t('请输入显示名称')}
-                    onChange={(value) => handleInputChange('display_name', value)}
-                    value={display_name}
-                    autoComplete="off"
-                    className="!rounded-lg"
-                    showClear
-                  />
-                </div>
-
-                <div>
-                  <Text strong className="block mb-2">{t('密码')}</Text>
-                  <Input
-                    type="password"
-                    placeholder={t('请输入密码')}
-                    onChange={(value) => handleInputChange('password', value)}
-                    value={password}
-                    autoComplete="off"
-                    className="!rounded-lg"
-                    required
-                  />
-                </div>
-
-                <div>
-                  <Text strong className="block mb-2">{t('备注')}</Text>
-                  <Input
-                    placeholder={t('请输入备注（仅管理员可见）')}
-                    onChange={(value) => handleInputChange('remark', value)}
-                    value={remark}
-                    autoComplete="off"
-                    className="!rounded-lg"
-                    showClear
-                  />
-                </div>
-              </div>
-            </Card>
-          </div>
+                <Row gutter={12}>
+                  <Col span={24}>
+                    <Form.Input
+                      field='username'
+                      label={t('用户名')}
+                      placeholder={t('请输入用户名')}
+                      rules={[{ required: true, message: t('请输入用户名') }]} />
+                  </Col>
+                  <Col span={24}>
+                    <Form.Input
+                      field='display_name'
+                      label={t('显示名称')}
+                      placeholder={t('请输入显示名称')} />
+                  </Col>
+                  <Col span={24}>
+                    <Form.Input
+                      field='password'
+                      label={t('密码')}
+                      type='password'
+                      placeholder={t('请输入密码')}
+                      rules={[{ required: true, message: t('请输入密码') }]} />
+                  </Col>
+                  <Col span={24}>
+                    <Form.Input
+                      field='remark'
+                      label={t('备注')}
+                      placeholder={t('请输入备注（仅管理员可见）')} />
+                  </Col>
+                </Row>
+              </Card>
+            </div>
+          </Form>
         </Spin>
       </SideSheet>
     </>