feat: 我的界面功能完善

用户编辑: - 用户头像选择（15种预设头像） - 用户名修改（唯一性检查） - 个性签名 - 个人资料（手机号只读、邮箱、性别、年龄、地区）消息通知: - 通知开关、声音、震动设置 - 免打扰时段设置隐私安全: - 修改密码 - 账号信息查看 - 清除聊天记录 - 清除缓存 - 数据安全状态显示帮助与反馈: - 使用帮助指南 - 问题反馈表单 - 联系方式关于: - 版本信息 - 检查更新 - 隐私政策/用户协议入口
fix: 移除验证码功能（暂时隐藏）
2026-04-27 11:50:16 +08:00 · 2026-04-27 11:31:44 +08:00
3 changed files with 1538 additions and 172 deletions
--- a/www/app.js
+++ b/www/app.js
--- a/www/index.html
+++ b/www/index.html
@@ -8,12 +8,12 @@
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title>AI助手</title>
-  <link rel="stylesheet" href="style.css?v=3.4.0">
+  <link rel="stylesheet" href="style.css?v=3.5.0">
  <link rel="manifest" href="manifest.json">
 </head>
 <body>
  <div id="app"></div>
-  <script src="marked.min.js?v=3.4.0"></script>
-  <script src="app.js?v=3.4.0"></script>
+  <script src="marked.min.js?v=3.5.0"></script>
+  <script src="app.js?v=3.5.0"></script>
 </body>
 </html>
--- a/www/style.css
+++ b/www/style.css
@@ -833,88 +833,696 @@ body {

 /* ==================== 我的页面 ==================== */

-.profile-card {
+.profile-user-card {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: white;
+  border-radius: 12px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.profile-user-card:hover {
+  background: rgba(102, 126, 234, 0.05);
+}
+
+.profile-avatar-large {
+  font-size: 48px;
+  margin-right: 12px;
+}
+
+.profile-user-info {
+  flex: 1;
+}
+
+.profile-user-info .profile-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: 4px;
+}
+
+.profile-signature {
+  font-size: 14px;
+  color: var(--text-light);
+}
+
+.profile-arrow {
+  font-size: 20px;
+  color: var(--text-light);
+}
+
+.profile-login-buttons-inline {
+  display: flex;
+  gap: 8px;
+}
+
+.login-btn-small, .register-btn-small {
+  padding: 8px 16px;
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.register-btn-small {
+  background: white;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+}
+
+/* ==================== 功能菜单 ==================== */
+
+.profile-menu-section {
+  background: white;
+  border-radius: 12px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.profile-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.profile-menu-item:last-child {
+  border-bottom: none;
+}
+
+.profile-menu-item:hover {
+  background: rgba(102, 126, 234, 0.05);
+}
+
+.profile-menu-item .menu-icon {
+  font-size: 20px;
+  margin-right: 12px;
+  width: 24px;
+  text-align: center;
+}
+
+.profile-menu-item .menu-text {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.profile-menu-item .menu-desc {
+  font-size: 12px;
+  color: var(--text-light);
+  margin-left: 8px;
+  flex: 1;
+}
+
+.profile-menu-item .menu-arrow {
+  font-size: 18px;
+  color: var(--text-light);
+}
+
+.profile-menu-item.danger .menu-text {
+  color: #e53e3e;
+}
+
+.profile-menu-item.danger:hover {
+  background: rgba(229, 62, 62, 0.05);
+}
+
+/* ==================== 用户编辑页面 ==================== */
+
+.edit-profile-page {
  display: flex;
  flex-direction: column;
+  height: 100vh;
+  height: 100dvh;
+  background: #f5f5f5;
+}
+
+.edit-header {
+  display: flex;
  align-items: center;
-  padding: 24px;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+  color: white;
+}
+
+.edit-header h1 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-left: 12px;
+}
+
+.edit-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.edit-section {
  background: white;
+  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
 }

-.profile-avatar {
-  font-size: 48px;
+.edit-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: 16px;
+}
+
+.edit-avatar-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.edit-avatar-preview {
+  font-size: 64px;
  margin-bottom: 8px;
 }

-.profile-name {
-  font-size: 18px;
-  font-weight: 600;
+.edit-avatar-label {
+  font-size: 12px;
+  color: var(--text-light);
+}
+
+.avatar-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+
+.avatar-option {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  background: white;
+  border: 2px solid var(--border-color);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.avatar-option:hover {
+  border-color: var(--primary);
+  transform: scale(1.05);
+}
+
+.avatar-option.selected {
+  border-color: var(--primary);
+  background: rgba(102, 126, 234, 0.1);
+  box-shadow: 0 0 8px rgba(102, 126, 234, 0.3);
+}
+
+.edit-input-group {
+  margin-bottom: 16px;
+}
+
+.edit-input-group:last-child {
+  margin-bottom: 0;
+}
+
+.edit-input-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 8px;
 }

-.profile-status {
+.edit-input-group input,
+.edit-input-group textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
  font-size: 14px;
-  color: #22c55e;
-  margin-bottom: 16px;
+  outline: none;
+  transition: border-color 0.2s;
 }

-.profile-status.guest {
+.edit-input-group input:focus,
+.edit-input-group textarea:focus {
+  border-color: var(--primary);
+}
+
+.edit-input-group textarea {
+  resize: none;
+  font-family: inherit;
+}
+
+.edit-input-group.readonly input {
+  background: var(--bg-color);
  color: var(--text-light);
 }

-.profile-login-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
+.readonly-tip {
+  font-size: 12px;
+  color: var(--text-light);
+  margin-top: 4px;
 }

-.login-btn, .register-btn, .logout-btn {
+.gender-selector {
+  display: flex;
+  gap: 8px;
+}
+
+.gender-option {
+  padding: 10px 16px;
+  background: white;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.gender-option:hover {
+  border-color: var(--primary);
+}
+
+.gender-option.selected {
+  border-color: var(--primary);
+  background: rgba(102, 126, 234, 0.1);
+  color: var(--primary);
+}
+
+.edit-save-btn {
+  width: 100%;
+  padding: 14px;
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  margin-top: 16px;
+}
+
+.edit-save-btn:hover {
+  opacity: 0.9;
+}
+
+/* ==================== 设置页面 ==================== */
+
+.settings-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  height: 100dvh;
+  background: #f5f5f5;
+}
+
+.settings-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+  color: white;
+}
+
+.settings-header h1 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-left: 12px;
+}
+
+.settings-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.settings-section {
+  background: white;
+  padding: 16px;
+  border-radius: 12px;
+  margin-bottom: 16px;
+}
+
+.settings-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: 16px;
+}
+
+.settings-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.settings-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.settings-info {
+  flex: 1;
+}
+
+.settings-label {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.settings-desc {
+  font-size: 12px;
+  color: var(--text-light);
+  display: block;
+  margin-top: 2px;
+}
+
+.settings-arrow {
+  font-size: 18px;
+  color: var(--text-light);
+}
+
+.settings-toggle {
+  width: 50px;
+  height: 28px;
+  background: var(--border-color);
+  border-radius: 14px;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.settings-toggle.active {
+  background: var(--primary);
+}
+
+.toggle-switch {
+  width: 24px;
+  height: 24px;
+  background: white;
+  border-radius: 12px;
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  transition: left 0.2s;
+}
+
+.settings-toggle.active .toggle-switch {
+  left: 24px;
+}
+
+.settings-time-input {
+  padding: 8px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.settings-tip {
+  font-size: 12px;
+  color: var(--text-light);
+  margin-top: 8px;
+}
+
+.settings-action-btn {
+  padding: 8px 16px;
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.settings-action-btn.danger {
+  background: #e53e3e;
+}
+
+.settings-badge {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.settings-badge.safe {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+}
+
+/* ==================== 帮助页面 ==================== */
+
+.help-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.help-item:last-child {
+  border-bottom: none;
+}
+
+.help-icon {
+  font-size: 24px;
+  margin-right: 12px;
+}
+
+.help-info {
+  flex: 1;
+}
+
+.help-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.help-desc {
+  font-size: 12px;
+  color: var(--text-light);
+  display: block;
+  margin-top: 2px;
+}
+
+.feedback-form {
+  margin-top: 16px;
+}
+
+.feedback-form textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 14px;
+  resize: none;
+  font-family: inherit;
+}
+
+.feedback-submit-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
-  font-size: 16px;
-  font-weight: 500;
+  font-size: 14px;
+  margin-top: 12px;
  cursor: pointer;
-  transition: transform 0.2s;
 }

-.login-btn:hover, .register-btn:hover, .logout-btn:hover {
-  transform: scale(1.02);
+.contact-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
 }

-.register-btn {
-  background: white;
-  border: 2px solid var(--primary);
-  color: var(--primary);
+.contact-icon {
+  font-size: 20px;
+  margin-right: 12px;
 }

-.logout-btn {
-  background: #fee2e2;
-  color: #e53e3e;
-}
-
-.skip-btn {
-  width: 100%;
-  padding: 10px;
-  background: transparent;
-  border: 1px solid var(--border-color);
+.contact-info .contact-label {
+  font-size: 14px;
  color: var(--text-light);
+}
+
+.contact-info .contact-value {
+  font-size: 15px;
+  color: var(--text-color);
+}
+
+/* ==================== 关于页面 ==================== */
+
+.about-content {
+  text-align: center;
+}
+
+.about-logo {
+  font-size: 72px;
+  margin-bottom: 16px;
+}
+
+.about-name {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: 8px;
+}
+
+.about-version {
+  font-size: 14px;
+  color: var(--text-light);
+  margin-bottom: 24px;
+}
+
+.about-info {
+  padding: 16px;
+  background: white;
+  border-radius: 12px;
+  margin-bottom: 16px;
+}
+
+.about-info p {
+  font-size: 14px;
+  color: var(--text-light);
+  margin: 4px 0;
+}
+
+.about-section {
+  background: white;
+  padding: 16px;
+  border-radius: 12px;
+  margin-bottom: 16px;
+}
+
+.about-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+}
+
+.about-label {
+  font-size: 14px;
+  color: var(--text-light);
+}
+
+.about-value {
+  font-size: 14px;
+  color: var(--text-color);
+}
+
+.about-links {
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.about-link-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border-color);
+  cursor: pointer;
+}
+
+.about-link-item:last-child {
+  border-bottom: none;
+}
+
+.about-link-item:hover {
+  background: rgba(102, 126, 234, 0.05);
+}
+
+.about-link-item span:first-child {
+  font-size: 15px;
+  color: var(--text-color);
+}
+
+.about-link-item .about-arrow {
+  font-size: 18px;
+  color: var(--text-light);
+}
+
+/* ==================== 信息对话框 ==================== */
+
+.info-dialog {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.info-dialog-content {
+  background: white;
+  padding: 24px;
+  border-radius: 16px;
+  max-width: 300px;
+  width: 90%;
+}
+
+.info-dialog-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.info-dialog-items {
+  margin-bottom: 16px;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 14px;
+  color: var(--text-light);
+}
+
+.info-value {
+  font-size: 14px;
+  color: var(--text-color);
+}
+
+.info-dialog-close {
+  width: 100%;
+  padding: 12px;
+  background: var(--primary);
+  color: white;
+  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
 }

-.skip-btn:hover {
-  background: rgba(0,0,0,0.05);
-}
-
 /* ==================== 配额显示 ==================== */

 .quota-card {