feat: enhance login modal and avatar selection process

- Updated the login modal to include a user agreement section with clickable links to the user agreement and privacy policy.
- Improved button styling and layout for better user experience.
- Refactored avatar selection process to utilize local image paths, enhancing compatibility and reliability across different environments.
- Added utility functions for resolving avatar file paths and selecting images from the gallery or camera.

This update aims to streamline user interactions during login and avatar selection, ensuring a smoother experience.

reactH5/scripts/sync_styles_from_miniprogram.py

@@ -78,39 +78,156 @@ TABBAR_CSS_H5_TAIL = """
 
 CHAPTERS_CSS_H5_TAIL = """
 
-/* ----- H5：目录页 scoped 兜底，避免与首页/匹配页同名类互相覆盖导致样式错乱 ----- */
+/* ----- H5：目录页 scoped 兜底（与 chapters.wxss 一致），避免首页 Index 同名 .part-* 覆盖宽高 ----- */
 .chapters-page.page {
   padding-left: env(safe-area-inset-left, 0px);
   padding-right: env(safe-area-inset-right, 0px);
   box-sizing: border-box;
 }
 .chapters-page .chapters-content {
-  padding: 16rpx 24rpx;
+  /* 与导航栏 nav-content 左右 32rpx 对齐，卡片区略收窄（参考小程序视觉边距） */
+  padding: 16rpx 32rpx;
   width: 100%;
   box-sizing: border-box;
 }
+.chapters-page .book-card-meta {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+}
 .chapters-page .book-card-title {
   font-size: 30rpx;
   font-weight: 700;
   color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: 1rpx;
+}
+.chapters-page .book-card-subtitle {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.35);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chapters-page .part-item {
+  /* 盖住全局 IndexPage.css .part-item（padding/背景/边框），只保留外层容器与小程序一致 */
+  display: block;
+  width: 100%;
+  margin-bottom: 12rpx;
+  padding: 0;
+  gap: 0;
+  align-items: unset;
+  justify-content: unset;
+  flex-wrap: unset;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-sizing: border-box;
+}
+.chapters-page .part-item:active {
+  transform: none;
+  background: transparent;
+}
+.chapters-page .part-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 22rpx 24rpx;
+  background: rgba(28, 28, 30, 0.7);
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.04);
+  width: 100%;
+  box-sizing: border-box;
+}
+.chapters-page .part-left {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  flex: 1;
+  min-width: 0;
+}
+.chapters-page .part-right {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.chapters-page .part-icon {
+  width: 56rpx;
+  height: 56rpx;
+  min-width: 56rpx;
+  min-height: 56rpx;
+  border-radius: 14rpx;
+  background: linear-gradient(135deg, #1a2e3e 0%, #0d1b2a 100%);
+  border: 1rpx solid rgba(0, 206, 209, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #ffffff;
+  flex-shrink: 0;
+}
+.chapters-page .part-icon-emoji {
+  font-size: 28rpx;
+  font-weight: 400;
+  line-height: 1;
+  background: linear-gradient(135deg, #1a2e3e 0%, #0d1b2a 100%);
+  border: 1rpx solid rgba(0, 206, 209, 0.25);
+}
+.chapters-page .part-icon-img {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 14rpx;
+  flex-shrink: 0;
+}
+.chapters-page .part-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
 }
 .chapters-page .part-title {
   font-size: 27rpx;
   font-weight: 600;
   color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  margin-bottom: 0;
+}
+.chapters-page .part-subtitle {
+  font-size: 20rpx;
+  color: rgba(255, 255, 255, 0.35);
+  margin-top: 4rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.chapters-page .part-count {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.35);
+}
+.chapters-page .part-arrow {
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.4);
 }
 .chapters-page .section-title {
   font-size: 25rpx;
   color: #ffffff;
-  white-space: normal;
-  word-break: break-word;
-  overflow-wrap: anywhere;
-  line-height: 1.35;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
   flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.3;
 }
 .chapters-page .tag {
   display: inline-flex;
@@ -122,6 +239,7 @@ CHAPTERS_CSS_H5_TAIL = """
   border-radius: 8rpx;
   box-sizing: border-box;
   text-align: center;
+  flex-shrink: 0;
 }
 .chapters-page .tag-free {
   background: rgba(0, 206, 209, 0.1);
@@ -131,39 +249,16 @@ CHAPTERS_CSS_H5_TAIL = """
   display: flex;
   width: 100%;
   box-sizing: border-box;
-  align-items: flex-start;
+  align-items: center;
 }
 .chapters-page .chapters-list {
   margin-top: 12rpx;
   margin-left: 12rpx;
 }
-.chapters-page .part-item {
-  display: block;
-  width: 100%;
-  margin-bottom: 12rpx;
-}
 .chapters-page .part-item > .chapters-list {
   display: block;
   width: 100%;
 }
-.chapters-page .part-header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  column-gap: 12rpx;
-  width: 100%;
-  box-sizing: border-box;
-}
-.chapters-page .part-left {
-  min-width: 0;
-}
-.chapters-page .part-right {
-  justify-self: end;
-  white-space: nowrap;
-  display: inline-flex;
-  align-items: center;
-  gap: 12rpx;
-}
 .chapters-page .section-list {
   display: block;
   width: 100%;
@@ -180,7 +275,7 @@ CHAPTERS_CSS_H5_TAIL = """
 .chapters-page .section-left {
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   gap: 14rpx;
   flex: 1;
   min-width: 0;
@@ -191,7 +286,6 @@ CHAPTERS_CSS_H5_TAIL = """
   gap: 12rpx;
   flex-shrink: 0;
   margin-left: 12rpx;
-  padding-top: 2rpx;
 }
 .chapters-page .card {
   background: rgba(28, 28, 30, 0.7);