feat(ui): refine profile workflows and visual system

pages/students/index.ts

@@ -3,10 +3,11 @@ import {
   deleteProfile as deleteProfileRequest,
   getApiErrorMessage,
   getProfileDefaults,
+  listFeedbackRecords,
   listProfiles
 } from '../../utils/api'
 import { addMinutes, formatUpdatedAt } from '../../utils/time'
-import type { StudentDraft, StudentProfile, StudentProfileDefaults, Term } from '../../utils/types'
+import type { FeedbackRecord, StudentDraft, StudentProfile, StudentProfileDefaults, Term } from '../../utils/types'
 
 const grades = ['初一', '初二', '初三']
 const subjects = ['美术', '书法', '音乐', '舞蹈', '语文', '数学', '英语']
@@ -17,9 +18,23 @@ const initialDefaults: StudentProfileDefaults = {
   subject: '数学',
   lessonDurationMinutes: 60
 }
+const termLabels: Record<Term, string> = {
+  春: '春季',
+  暑: '暑期',
+  秋: '秋季',
+  寒: '寒假'
+}
 
 type InputEvent = { detail: { value: string } }
 type PickerEvent = { detail: { value: string | number } }
+type StudentProfileView = StudentProfile & { academicTermLabel: string }
+
+function withAcademicTermLabel(profile: StudentProfile): StudentProfileView {
+  return {
+    ...profile,
+    academicTermLabel: `${profile.academicYear} 年${termLabels[profile.term]}`
+  }
+}
 
 function getCurrentTerm(): Term {
   const month = new Date().getMonth() + 1
@@ -44,11 +59,11 @@ function buildDraft(defaults: StudentProfileDefaults = initialDefaults): Student
 }
 
 function filterProfiles(
-  profiles: StudentProfile[],
+  profiles: StudentProfileView[],
   query: string,
   filterGrade: string,
   filterSubject: string
-): StudentProfile[] {
+): StudentProfileView[] {
   const keyword = query.trim().toLocaleLowerCase()
   return profiles.filter((profile) => {
     const searchable = [profile.name, profile.grade, profile.subject, profile.guardianTitle]
@@ -69,12 +84,17 @@ function getLastUpdatedText(profiles: StudentProfile[]): string {
 
 Page({
   data: {
-    profiles: [] as StudentProfile[],
-    filteredProfiles: [] as StudentProfile[],
+    profiles: [] as StudentProfileView[],
+    filteredProfiles: [] as StudentProfileView[],
     query: '',
     filterVisible: false,
     filterGrade: '',
     filterSubject: '',
+    filterCount: 0,
+    expandedProfileId: '',
+    recentFeedbackByProfile: {} as Record<string, FeedbackRecord[]>,
+    feedbackLoadingByProfile: {} as Record<string, boolean>,
+    feedbackErrorsByProfile: {} as Record<string, string>,
     grades,
     subjects,
     terms,
@@ -101,7 +121,7 @@ Page({
   async refreshProfiles(showSuccess = false) {
     this.setData({ loading: true, errorMessage: '' })
     try {
-      const profiles = await listProfiles()
+      const profiles = (await listProfiles()).map(withAcademicTermLabel)
       const filteredProfiles = filterProfiles(
         profiles,
         this.data.query,
@@ -111,7 +131,11 @@ Page({
       this.setData({
         profiles,
         filteredProfiles,
-        lastUpdatedText: getLastUpdatedText(profiles)
+        lastUpdatedText: getLastUpdatedText(profiles),
+        expandedProfileId: '',
+        recentFeedbackByProfile: {},
+        feedbackLoadingByProfile: {},
+        feedbackErrorsByProfile: {}
       })
       if (showSuccess) wx.showToast({ title: '档案已刷新', icon: 'success' })
     } catch (error) {
@@ -153,6 +177,7 @@ Page({
     this.setData({
       filterGrade,
       filterSubject,
+      filterCount: Number(Boolean(filterGrade)) + Number(Boolean(filterSubject)),
       filteredProfiles: filterProfiles(this.data.profiles, this.data.query, filterGrade, filterSubject)
     })
   },
@@ -162,10 +187,67 @@ Page({
       query: '',
       filterGrade: '',
       filterSubject: '',
+      filterCount: 0,
       filteredProfiles: this.data.profiles
     })
   },
 
+  toggleProfile(event: WechatMiniprogram.TouchEvent) {
+    const { id } = event.currentTarget.dataset as { id: string }
+    if (this.data.expandedProfileId === id) {
+      this.setData({ expandedProfileId: '' })
+      return
+    }
+
+    const hasFeedback = Object.prototype.hasOwnProperty.call(this.data.recentFeedbackByProfile, id)
+    this.setData({
+      expandedProfileId: id,
+      ...(hasFeedback
+        ? {}
+        : {
+            feedbackLoadingByProfile: { ...this.data.feedbackLoadingByProfile, [id]: true },
+            feedbackErrorsByProfile: { ...this.data.feedbackErrorsByProfile, [id]: '' }
+          })
+    })
+    if (!hasFeedback) void this.loadRecentFeedback(id)
+  },
+
+  async loadRecentFeedback(profileId: string) {
+    try {
+      const records = await listFeedbackRecords(profileId)
+      this.setData({
+        recentFeedbackByProfile: {
+          ...this.data.recentFeedbackByProfile,
+          [profileId]: records.slice(0, 3)
+        }
+      })
+    } catch (error) {
+      this.setData({
+        feedbackErrorsByProfile: {
+          ...this.data.feedbackErrorsByProfile,
+          [profileId]: getApiErrorMessage(error)
+        }
+      })
+    } finally {
+      this.setData({
+        feedbackLoadingByProfile: {
+          ...this.data.feedbackLoadingByProfile,
+          [profileId]: false
+        }
+      })
+    }
+  },
+
+  retryRecentFeedback(event: WechatMiniprogram.TouchEvent) {
+    const { id } = event.currentTarget.dataset as { id: string }
+    if (this.data.feedbackLoadingByProfile[id]) return
+    this.setData({
+      feedbackLoadingByProfile: { ...this.data.feedbackLoadingByProfile, [id]: true },
+      feedbackErrorsByProfile: { ...this.data.feedbackErrorsByProfile, [id]: '' }
+    })
+    void this.loadRecentFeedback(id)
+  },
+
   async openCreate() {
     this.setData({
       sheetVisible: true,
@@ -262,11 +344,13 @@ Page({
 
     this.setData({ saving: true })
     try {
-      const profile = await createProfile({
-        ...draft,
-        name: draft.name.trim(),
-        guardianTitle: draft.guardianTitle.trim() || `${draft.name.trim()}妈妈`
-      })
+      const profile = withAcademicTermLabel(
+        await createProfile({
+          ...draft,
+          name: draft.name.trim(),
+          guardianTitle: draft.guardianTitle.trim() || `${draft.name.trim()}妈妈`
+        })
+      )
       const profiles = [profile, ...this.data.profiles]
       this.setData({
         sheetVisible: false,
@@ -284,25 +368,48 @@ Page({
     }
   },
 
-  deleteProfile(event: WechatMiniprogram.TouchEvent) {
+  openProfileActions(event: WechatMiniprogram.TouchEvent) {
     const { id } = event.currentTarget.dataset as { id: string }
     const profile = this.data.profiles.find((item) => item.id === id)
     if (!profile) return
 
+    wx.showActionSheet({
+      itemList: ['删除学生档案'],
+      itemColor: '#D13F3A',
+      success: (result) => {
+        if (result.tapIndex === 0) this.confirmDeleteProfile(id)
+      }
+    })
+  },
+
+  confirmDeleteProfile(id: string) {
+    const profile = this.data.profiles.find((item) => item.id === id)
+    if (!profile) return
+
     wx.showModal({
       title: '删除学生档案',
       content: `确认删除“${profile.name}”吗？`,
-      confirmColor: '#D14343',
+      confirmColor: '#D13F3A',
       success: async (result) => {
         if (!result.confirm) return
         this.setData({ deletingId: id })
         try {
           await deleteProfileRequest(id)
           const profiles = this.data.profiles.filter((item) => item.id !== id)
+          const recentFeedbackByProfile = { ...this.data.recentFeedbackByProfile }
+          const feedbackLoadingByProfile = { ...this.data.feedbackLoadingByProfile }
+          const feedbackErrorsByProfile = { ...this.data.feedbackErrorsByProfile }
+          delete recentFeedbackByProfile[id]
+          delete feedbackLoadingByProfile[id]
+          delete feedbackErrorsByProfile[id]
           this.setData({
             profiles,
             filteredProfiles: filterProfiles(profiles, this.data.query, this.data.filterGrade, this.data.filterSubject),
             lastUpdatedText: getLastUpdatedText(profiles),
+            expandedProfileId: this.data.expandedProfileId === id ? '' : this.data.expandedProfileId,
+            recentFeedbackByProfile,
+            feedbackLoadingByProfile,
+            feedbackErrorsByProfile,
             errorMessage: ''
           })
           wx.showToast({ title: '已删除', icon: 'success' })

pages/students/index.wxml

@@ -1,7 +1,6 @@
 <view class="page-shell">
   <text class="eyebrow">个人档案</text>
   <view class="page-heading">
-    <text class="heading-icon">◎</text>
     <text class="page-title">学生档案</text>
   </view>
   <text class="page-subtitle">管理学生默认信息，用于快速生成课堂反馈</text>
@@ -13,7 +12,7 @@
 
   <view class="search-row">
     <view class="search-box">
-      <text class="search-icon">⌕</text>
+      <icon class="search-icon" type="search" size="18" color="#6E6E73" />
       <input
         class="search-input"
         placeholder="搜索学生姓名、年级、学科或称呼"
@@ -23,8 +22,13 @@
         confirm-type="search"
       />
     </view>
-    <button class="filter-button" bindtap="toggleFilter" aria-label="筛选学生档案">
-      <text>▽</text>
+    <button class="filter-button {{filterVisible || filterCount ? 'filter-button-active' : ''}}" bindtap="toggleFilter" aria-label="筛选学生档案，已启用 {{filterCount}} 项">
+      <view class="filter-icon" aria-hidden="true">
+        <view class="filter-icon-line filter-icon-line-first"></view>
+        <view class="filter-icon-line filter-icon-line-second"></view>
+        <view class="filter-icon-line filter-icon-line-third"></view>
+      </view>
+      <text wx:if="{{filterCount}}" class="filter-count">{{filterCount}}</text>
     </button>
   </view>
 
@@ -45,13 +49,9 @@
     </view>
   </view>
 
-  <view class="archive-toolbar surface">
+  <view class="archive-toolbar">
     <view class="toolbar-copy">
-      <view class="toolbar-title-row">
-        <text class="toolbar-icon">▣</text>
-        <text class="toolbar-title">档案卡片</text>
-      </view>
-      <text class="toolbar-description">点击卡片展开最近三条反馈</text>
+      <text class="toolbar-title">学生列表</text>
       <text class="toolbar-updated">上次更新：{{lastUpdatedText}}</text>
     </view>
     <view class="toolbar-actions">
@@ -78,21 +78,61 @@
 
   <view wx:else class="profile-list">
     <view wx:for="{{filteredProfiles}}" wx:key="id" class="profile-card surface">
-      <view class="profile-card-top">
-        <view>
-          <text class="profile-name">{{item.name}}</text>
-          <text class="profile-guardian">{{item.guardianTitle}}</text>
+      <view
+        class="profile-summary"
+        data-id="{{item.id}}"
+        bindtap="toggleProfile"
+        aria-role="button"
+        aria-label="{{expandedProfileId === item.id ? '收起' : '展开'}}{{item.name}}的最近反馈"
+        aria-expanded="{{expandedProfileId === item.id}}"
+      >
+        <view class="profile-card-top">
+          <view>
+            <text class="profile-name">{{item.name}}</text>
+            <text class="profile-guardian">{{item.guardianTitle}}</text>
+          </view>
+          <view class="profile-card-actions">
+            <button
+              class="profile-menu-button"
+              disabled="{{deletingId === item.id}}"
+              data-id="{{item.id}}"
+              catchtap="openProfileActions"
+              aria-label="{{item.name}}的更多操作"
+            >
+              <text>{{deletingId === item.id ? '…' : '•••'}}</text>
+            </button>
+            <text class="profile-chevron {{expandedProfileId === item.id ? 'profile-chevron-expanded' : ''}}" aria-hidden="true">›</text>
+          </view>
+        </view>
+
+        <view class="profile-tags">
+          <text class="profile-tag">{{item.grade}}</text>
+          <text class="profile-tag">{{item.subject}}</text>
+          <text class="profile-tag">{{item.academicTermLabel}}</text>
+        </view>
+        <view class="profile-time-row">
+          <text class="profile-time-label">上课时间</text>
+          <text class="profile-time-value">{{item.startTime}} - {{item.endTime}}</text>
         </view>
-        <button class="delete-button" loading="{{deletingId === item.id}}" disabled="{{deletingId === item.id}}" data-id="{{item.id}}" catchtap="deleteProfile" aria-label="删除学生档案">删除</button>
       </view>
-      <view class="profile-tags">
-        <text class="profile-tag">{{item.grade}}</text>
-        <text class="profile-tag">{{item.subject}}</text>
-        <text class="profile-tag">{{item.academicYear}}{{item.term}}</text>
-      </view>
-      <view class="profile-time-row">
-        <text class="profile-time-label">上课时间</text>
-        <text class="profile-time-value">{{item.startTime}} - {{item.endTime}}</text>
+
+      <view wx:if="{{expandedProfileId === item.id}}" class="profile-feedback-panel">
+        <view class="profile-feedback-heading">
+          <text class="profile-feedback-title">最近反馈</text>
+          <text wx:if="{{recentFeedbackByProfile[item.id] && recentFeedbackByProfile[item.id].length}}" class="profile-feedback-count">{{recentFeedbackByProfile[item.id].length}} 条</text>
+        </view>
+        <view wx:if="{{feedbackLoadingByProfile[item.id]}}" class="profile-feedback-status">正在读取反馈...</view>
+        <view wx:elif="{{feedbackErrorsByProfile[item.id]}}" class="profile-feedback-status profile-feedback-error">
+          <text>{{feedbackErrorsByProfile[item.id]}}</text>
+          <text class="profile-feedback-retry" data-id="{{item.id}}" catchtap="retryRecentFeedback">重试</text>
+        </view>
+        <view wx:elif="{{!recentFeedbackByProfile[item.id] || recentFeedbackByProfile[item.id].length === 0}}" class="profile-feedback-status">暂无反馈记录</view>
+        <view wx:else class="recent-feedback-list">
+          <view wx:for="{{recentFeedbackByProfile[item.id]}}" wx:for-item="feedback" wx:key="id" class="recent-feedback-item">
+            <text class="recent-feedback-date">{{feedback.feedbackDate}}</text>
+            <text class="recent-feedback-content">{{feedback.content}}</text>
+          </view>
+        </view>
       </view>
     </view>
   </view>
@@ -103,12 +143,14 @@
     <view class="sheet-top">
       <view>
         <view class="sheet-title-row">
-          <text class="sheet-title-icon">▣</text>
           <text class="sheet-title">新增学生档案</text>
         </view>
         <text class="sheet-subtitle">保存后会同步到学生档案列表</text>
       </view>
-      <text class="defaults-link" bindtap="goDefaults">设置预设项 ›</text>
+      <view class="sheet-actions">
+        <text class="defaults-link" bindtap="goDefaults">设置预设项 ›</text>
+        <button class="sheet-close" bindtap="closeCreate" aria-label="关闭新增学生弹窗">×</button>
+      </view>
     </view>
 
     <scroll-view class="sheet-scroll" scroll-y="true">

pages/students/index.wxss

@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) 88rpx;
   gap: 16rpx;
-  margin-top: 42rpx;
+  margin-top: 34rpx;
 }
 
 .search-box {
@@ -12,31 +12,29 @@
   min-width: 0;
   height: 88rpx;
   padding: 0 24rpx;
-  border: 2rpx solid #cbdced;
+  border: 1rpx solid transparent;
   border-radius: 16rpx;
-  background: #ffffff;
-  box-shadow: 0 4rpx 12rpx rgba(45, 78, 120, 0.05);
+  background: #f1f3f6;
 }
 
 .search-icon {
+  flex: none;
   margin-right: 14rpx;
-  color: #2b67e8;
-  font-size: 44rpx;
-  line-height: 1;
 }
 
 .search-input {
   flex: 1;
   min-width: 0;
-  color: #17233a;
+  color: #1c1c1e;
   font-size: 28rpx;
 }
 
 .search-placeholder {
-  color: #9aa8b8;
+  color: #8e8e93;
 }
 
 .filter-button {
+  position: relative;
   display: flex;
   flex: none;
   align-items: center;
@@ -47,12 +45,86 @@
   height: 88rpx;
   margin: 0;
   padding: 0;
-  border: 2rpx solid #cbdced;
+  border: 1rpx solid transparent;
   border-radius: 16rpx;
-  background: #ffffff;
-  color: #2b67e8;
-  font-size: 44rpx;
+  background: #f1f3f6;
+  color: #6e6e73;
   line-height: 1;
+  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.filter-button-active {
+  border-color: #b8d9ff;
+  background: #eaf3ff;
+  color: #007aff;
+}
+
+.filter-button:active {
+  transform: scale(0.96);
+}
+
+.filter-icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 34rpx;
+  height: 30rpx;
+}
+
+.filter-icon-line {
+  position: relative;
+  width: 34rpx;
+  height: 3rpx;
+  border-radius: 2rpx;
+  background: currentColor;
+}
+
+.filter-icon-line::after {
+  position: absolute;
+  top: -4rpx;
+  width: 10rpx;
+  height: 10rpx;
+  border: 3rpx solid currentColor;
+  border-radius: 50%;
+  background: #f1f3f6;
+  content: '';
+}
+
+.filter-button-active .filter-icon-line::after {
+  background: #eaf3ff;
+}
+
+.filter-icon-line-first::after,
+.filter-icon-line-third::after {
+  left: 5rpx;
+}
+
+.filter-icon-line-second::after {
+  right: 5rpx;
+}
+
+.filter-count {
+  position: absolute;
+  top: 8rpx;
+  right: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28rpx;
+  height: 28rpx;
+  padding: 0 5rpx;
+  box-sizing: border-box;
+  border: 3rpx solid #f1f3f6;
+  border-radius: 14rpx;
+  background: #007aff;
+  color: #ffffff;
+  font-size: 18rpx;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.filter-button-active .filter-count {
+  border-color: #eaf3ff;
 }
 
 .filter-panel {
@@ -68,20 +140,20 @@
 }
 
 .filter-title {
-  color: #17233a;
+  color: #1c1c1e;
   font-size: 30rpx;
   font-weight: 700;
 }
 
 .filter-clear {
-  color: #2b67e8;
+  color: #007aff;
   font-size: 26rpx;
 }
 
 .filter-label {
   display: block;
   margin: 16rpx 0 12rpx;
-  color: #718096;
+  color: #6e6e73;
   font-size: 24rpx;
 }
 
@@ -93,17 +165,23 @@
 
 .filter-chip {
   padding: 10rpx 18rpx;
-  border: 1rpx solid #d6e1ed;
-  border-radius: 12rpx;
-  color: #566577;
+  border: 1rpx solid #e5e5ea;
+  border-radius: 10rpx;
+  background: #f1f3f6;
+  color: #3a3a3c;
   font-size: 24rpx;
   line-height: 1.2;
+  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .filter-chip-active {
-  border-color: #2b67e8;
-  background: #eaf1ff;
-  color: #2b67e8;
+  border-color: #b8d9ff;
+  background: #eaf3ff;
+  color: #007aff;
+}
+
+.filter-chip:active {
+  transform: scale(0.97);
 }
 
 .archive-toolbar {
@@ -111,8 +189,8 @@
   grid-template-columns: minmax(0, 1fr) 264rpx;
   align-items: center;
   gap: 20rpx;
-  margin-top: 20rpx;
-  padding: 28rpx;
+  margin-top: 22rpx;
+  padding: 18rpx 0 4rpx;
 }
 
 .toolbar-copy {
@@ -120,36 +198,21 @@
   min-width: 0;
 }
 
-.toolbar-title-row {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-}
-
-.toolbar-icon {
-  color: #2b67e8;
-  font-size: 34rpx;
-}
-
 .toolbar-title {
-  color: #17233a;
-  font-size: 34rpx;
+  display: block;
+  color: #1c1c1e;
+  font-size: 29rpx;
   font-weight: 800;
 }
 
-.toolbar-description,
 .toolbar-updated {
   display: block;
-  margin-top: 8rpx;
-  color: #7b8796;
-  font-size: 24rpx;
+  margin-top: 5rpx;
+  color: #6e6e73;
+  font-size: 22rpx;
   line-height: 1.4;
 }
 
-.toolbar-updated {
-  font-weight: 600;
-}
-
 .toolbar-actions {
   display: grid;
   grid-template-columns: 62rpx 190rpx;
@@ -162,18 +225,27 @@
 
 .refresh-button {
   flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 62rpx;
   min-width: 62rpx;
   max-width: 62rpx;
   height: 62rpx;
   margin: 0;
   padding: 0;
-  border: 2rpx solid #cbdced;
+  border: 0;
   border-radius: 12rpx;
-  background: #ffffff;
-  color: #2b67e8;
+  background: #f1f3f6;
+  color: #007aff;
   font-size: 36rpx;
   line-height: 1;
+  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.refresh-button:active {
+  transform: scale(0.94);
+  background: #e5e5ea;
 }
 
 .new-student-button {
@@ -187,13 +259,19 @@
   height: 62rpx;
   margin: 0;
   padding: 0 18rpx;
-  border: 2rpx solid #cbdced;
+  border: 0;
   border-radius: 12rpx;
-  background: #ffffff;
-  color: #2b67e8;
+  background: #007aff;
+  color: #ffffff;
   font-size: 26rpx;
   font-weight: 700;
   line-height: 1;
+  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.new-student-button:active {
+  transform: scale(0.97);
+  background: #006ee6;
 }
 
 .new-student-icon {
@@ -217,21 +295,21 @@
 }
 
 .empty-icon {
-  color: #2b67e8;
+  color: #007aff;
   font-size: 54rpx;
   line-height: 1;
 }
 
 .empty-title {
   margin-top: 18rpx;
-  color: #17233a;
+  color: #1c1c1e;
   font-size: 36rpx;
   font-weight: 800;
 }
 
 .empty-description {
   margin-top: 14rpx;
-  color: #7b8796;
+  color: #6e6e73;
   font-size: 28rpx;
 }
 
@@ -253,7 +331,17 @@
 }
 
 .profile-card {
+  overflow: hidden;
+  padding: 0;
+}
+
+.profile-summary {
   padding: 24rpx;
+  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.profile-summary:active {
+  opacity: 0.72;
 }
 
 .profile-card-top,
@@ -264,9 +352,16 @@
   gap: 20rpx;
 }
 
+.profile-card-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 4rpx;
+}
+
 .profile-name {
   display: block;
-  color: #17233a;
+  color: #1c1c1e;
   font-size: 34rpx;
   font-weight: 800;
 }
@@ -274,19 +369,46 @@
 .profile-guardian {
   display: block;
   margin-top: 8rpx;
-  color: #718096;
+  color: #6e6e73;
   font-size: 24rpx;
 }
 
-.delete-button {
+.profile-menu-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56rpx;
+  min-width: 56rpx;
+  max-width: 56rpx;
+  height: 56rpx;
   margin: 0;
-  padding: 8rpx 14rpx;
-  border: 1rpx solid #f2c6c6;
-  border-radius: 10rpx;
-  background: #ffffff;
-  color: #c34343;
-  font-size: 22rpx;
-  line-height: 1.3;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: #6e6e73;
+  font-size: 25rpx;
+  line-height: 1;
+  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.profile-menu-button:active {
+  transform: scale(0.94);
+  background: #f1f3f6;
+}
+
+.profile-chevron {
+  width: 24rpx;
+  color: #8e8e93;
+  font-size: 40rpx;
+  line-height: 1;
+  text-align: center;
+  transform: rotate(0deg);
+  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.profile-chevron-expanded {
+  transform: rotate(90deg);
 }
 
 .profile-tags {
@@ -299,8 +421,8 @@
 .profile-tag {
   padding: 8rpx 12rpx;
   border-radius: 8rpx;
-  background: #eef4ff;
-  color: #3563b5;
+  background: #f1f3f6;
+  color: #3a3a3c;
   font-size: 22rpx;
   line-height: 1.2;
 }
@@ -308,20 +430,99 @@
 .profile-time-row {
   margin-top: 20rpx;
   padding-top: 18rpx;
-  border-top: 1rpx solid #e8eef5;
+  border-top: 1rpx solid #e5e5ea;
 }
 
 .profile-time-label {
-  color: #7b8796;
+  color: #6e6e73;
   font-size: 24rpx;
 }
 
 .profile-time-value {
-  color: #17233a;
+  color: #1c1c1e;
   font-size: 26rpx;
   font-weight: 700;
 }
 
+.profile-feedback-panel {
+  padding: 20rpx 24rpx 24rpx;
+  border-top: 1rpx solid #e5e5ea;
+  background: #fbfcfe;
+}
+
+.profile-feedback-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+}
+
+.profile-feedback-title {
+  color: #1c1c1e;
+  font-size: 25rpx;
+  font-weight: 700;
+}
+
+.profile-feedback-count,
+.profile-feedback-status {
+  color: #6e6e73;
+  font-size: 22rpx;
+}
+
+.profile-feedback-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+  min-height: 64rpx;
+  padding-top: 14rpx;
+}
+
+.profile-feedback-error {
+  color: #d13f3a;
+}
+
+.profile-feedback-retry {
+  flex: none;
+  padding: 10rpx 0 10rpx 18rpx;
+  color: #007aff;
+  font-weight: 700;
+}
+
+.recent-feedback-list {
+  margin-top: 10rpx;
+}
+
+.recent-feedback-item {
+  padding: 14rpx 0;
+}
+
+.recent-feedback-item + .recent-feedback-item {
+  border-top: 1rpx solid #e5e5ea;
+}
+
+.recent-feedback-date,
+.recent-feedback-content {
+  display: block;
+}
+
+.recent-feedback-date {
+  color: #6e6e73;
+  font-size: 21rpx;
+}
+
+.recent-feedback-content {
+  display: -webkit-box;
+  margin-top: 6rpx;
+  overflow: hidden;
+  color: #3a3a3c;
+  font-size: 24rpx;
+  line-height: 1.55;
+  word-break: break-all;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
 .sheet-mask {
   position: fixed;
   z-index: 200;
@@ -332,19 +533,22 @@
   display: flex;
   align-items: flex-end;
   padding: 16rpx;
-  background: rgba(17, 27, 50, 0.42);
+  background: rgba(244, 247, 251, 0.82);
+  -webkit-backdrop-filter: blur(10rpx) saturate(110%);
+  backdrop-filter: blur(10rpx) saturate(110%);
 }
 
 .create-sheet {
   width: 100%;
-  height: 90vh;
-  max-height: 90vh;
+  height: auto;
+  max-height: 88vh;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  border: 1rpx solid rgba(255, 255, 255, 0.72);
   border-radius: 16rpx;
   background: #ffffff;
-  box-shadow: 0 24rpx 56rpx rgba(17, 27, 50, 0.22);
+  box-shadow: 0 24rpx 56rpx rgba(28, 28, 30, 0.24);
 }
 
 .sheet-top {
@@ -353,7 +557,9 @@
   align-items: center;
   justify-content: space-between;
   gap: 16rpx;
-  padding: 24rpx 24rpx 16rpx;
+  padding: 24rpx 24rpx 18rpx;
+  border-bottom: 1rpx solid #e5e5ea;
+  background: #ffffff;
 }
 
 .sheet-top > view {
@@ -367,13 +573,8 @@
   gap: 10rpx;
 }
 
-.sheet-title-icon {
-  color: #2b67e8;
-  font-size: 34rpx;
-}
-
 .sheet-title {
-  color: #17233a;
+  color: #1c1c1e;
   font-size: 34rpx;
   font-weight: 800;
 }
@@ -381,25 +582,58 @@
 .sheet-subtitle {
   display: block;
   margin-top: 12rpx;
-  color: #7b8796;
+  color: #6e6e73;
   font-size: 24rpx;
 }
 
+.sheet-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 12rpx;
+}
+
 .defaults-link {
   flex: none;
-  padding: 10rpx 0 10rpx 12rpx;
-  color: #2b67e8;
+  padding: 10rpx 0;
+  color: #007aff;
   font-size: 24rpx;
   font-weight: 700;
   line-height: 1.2;
   white-space: nowrap;
 }
 
+.sheet-close {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 56rpx;
+  min-width: 56rpx;
+  max-width: 56rpx;
+  height: 56rpx;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: #f1f3f6;
+  color: #6e6e73;
+  font-size: 38rpx;
+  font-weight: 400;
+  line-height: 1;
+  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.sheet-close:active {
+  transform: scale(0.94);
+  background: #e5e5ea;
+}
+
 .sheet-scroll {
-  flex: 1;
-  height: 0;
+  flex: none;
+  height: auto;
   min-height: 0;
-  max-height: none;
+  max-height: calc(88vh - 236rpx);
   width: 100%;
   padding: 0;
   box-sizing: border-box;
@@ -407,7 +641,7 @@
 
 .sheet-form {
   width: 100%;
-  padding: 0 24rpx 16rpx;
+  padding: 16rpx 24rpx 16rpx;
   box-sizing: border-box;
 }
 
@@ -431,9 +665,9 @@ picker.form-field {
 .form-field {
   min-height: 108rpx;
   padding: 16rpx;
-  border: 2rpx solid #d8e5f2;
+  border: 1rpx solid #e5e5ea;
   border-radius: 14rpx;
-  background: #fbfdff;
+  background: #f1f3f6;
 }
 
 .full-field {
@@ -442,7 +676,7 @@ picker.form-field {
 
 .form-label {
   display: block;
-  color: #2b67e8;
+  color: #6e6e73;
   font-size: 24rpx;
   font-weight: 700;
 }
@@ -450,7 +684,7 @@ picker.form-field {
 .form-value {
   display: block;
   margin-top: 14rpx;
-  color: #17233a;
+  color: #1c1c1e;
   font-size: 28rpx;
   font-weight: 700;
 }
@@ -459,7 +693,7 @@ picker.form-field {
   width: 100%;
   height: 48rpx;
   margin-top: 10rpx;
-  color: #17233a;
+  color: #1c1c1e;
   font-size: 28rpx;
   font-weight: 600;
 }
@@ -477,10 +711,45 @@ picker.form-field {
   display: flex;
   gap: 16rpx;
   padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));
-  border-top: 1rpx solid #e7eef6;
+  border-top: 1rpx solid #e5e5ea;
+  background: #ffffff;
 }
 
 .sheet-cancel,
 .sheet-save {
   flex: 1;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .filter-button,
+  .filter-chip,
+  .refresh-button,
+  .new-student-button,
+  .profile-summary,
+  .profile-menu-button,
+  .profile-chevron,
+  .sheet-close {
+    transition: none;
+  }
+
+  .filter-button:active,
+  .filter-chip:active,
+  .refresh-button:active,
+  .new-student-button:active,
+  .profile-menu-button:active,
+  .sheet-close:active {
+    transform: none;
+  }
+
+  .profile-summary:active {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .sheet-mask {
+    background: rgba(244, 247, 251, 0.96);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}