♻️ refactor(personal-settings): Break down PersonalSetting.js into modular components

- Split the 1554-line PersonalSetting.js file into smaller, maintainable components
- Created organized folder structure under personal/:
  - components/: UserInfoHeader for shared user info display
  - tabs/: ModelsList, AccountBinding, SecuritySettings, NotificationSettings
  - modals/: EmailBindModal, WeChatBindModal, AccountDeleteModal, ChangePasswordModal
- Refactored main PersonalSetting component to use composition pattern
- Improved code maintainability and separation of concerns
- Added collapsible prop to ModelsList tabs for better UX
- Fixed import path for TwoFASetting component in SecuritySettings
- Preserved all existing functionality and user interactions

This refactoring reduces the main file from 1554 to 484 lines and makes
the codebase more modular, testable, and easier to maintain.

web/src/components/settings/personal/modals/ChangePasswordModal.js

@@ -0,0 +1,115 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Input, Modal, Typography } from '@douyinfe/semi-ui';
+import { IconLock } from '@douyinfe/semi-icons';
+import Turnstile from 'react-turnstile';
+
+const ChangePasswordModal = ({
+  t,
+  showChangePasswordModal,
+  setShowChangePasswordModal,
+  inputs,
+  handleInputChange,
+  changePassword,
+  turnstileEnabled,
+  turnstileSiteKey,
+  setTurnstileToken
+}) => {
+  return (
+    <Modal
+      title={
+        <div className="flex items-center">
+          <IconLock className="mr-2 text-orange-500" />
+          {t('修改密码')}
+        </div>
+      }
+      visible={showChangePasswordModal}
+      onCancel={() => setShowChangePasswordModal(false)}
+      onOk={changePassword}
+      size={'small'}
+      centered={true}
+      className="modern-modal"
+    >
+      <div className="space-y-4 py-4">
+        <div>
+          <Typography.Text strong className="block mb-2">{t('原密码')}</Typography.Text>
+          <Input
+            name='original_password'
+            placeholder={t('请输入原密码')}
+            type='password'
+            value={inputs.original_password}
+            onChange={(value) =>
+              handleInputChange('original_password', value)
+            }
+            size="large"
+            className="!rounded-lg"
+            prefix={<IconLock />}
+          />
+        </div>
+
+        <div>
+          <Typography.Text strong className="block mb-2">{t('新密码')}</Typography.Text>
+          <Input
+            name='set_new_password'
+            placeholder={t('请输入新密码')}
+            type='password'
+            value={inputs.set_new_password}
+            onChange={(value) =>
+              handleInputChange('set_new_password', value)
+            }
+            size="large"
+            className="!rounded-lg"
+            prefix={<IconLock />}
+          />
+        </div>
+
+        <div>
+          <Typography.Text strong className="block mb-2">{t('确认新密码')}</Typography.Text>
+          <Input
+            name='set_new_password_confirmation'
+            placeholder={t('请再次输入新密码')}
+            type='password'
+            value={inputs.set_new_password_confirmation}
+            onChange={(value) =>
+              handleInputChange('set_new_password_confirmation', value)
+            }
+            size="large"
+            className="!rounded-lg"
+            prefix={<IconLock />}
+          />
+        </div>
+
+        {turnstileEnabled && (
+          <div className="flex justify-center">
+            <Turnstile
+              sitekey={turnstileSiteKey}
+              onVerify={(token) => {
+                setTurnstileToken(token);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default ChangePasswordModal;