Explorar o código

fix(mobile): separate history month icon and label

彭峰 hai 4 semanas
pai
achega
c6af0cbde5

+ 4 - 0
projects/xiaoshu-mobile/src/app/core/home-learning-modules.integration.spec.ts

@@ -697,8 +697,12 @@ describe('home learning modules', () => {
     await harness.fixture.whenStable();
     harness.fixture.detectChanges();
     const monthFilter = harness.routeNativeElement?.querySelector('[aria-label="按月份筛选销课记录"]') as HTMLSelectElement;
+    const monthPicker = harness.routeNativeElement?.querySelector('.month-control .xs-dropdown-trigger') as HTMLButtonElement;
     expect(monthFilter.value).toBe('all');
     expect(monthFilter.options.length).toBe(4);
+    expect(monthPicker).not.toBeNull();
+    expect(Number.parseFloat(getComputedStyle(monthPicker).paddingLeft)).toBeGreaterThanOrEqual(40);
+    expect(monthPicker.getBoundingClientRect().height).toBe(46);
     expect(harness.routeNativeElement?.querySelectorAll('.schedule-list article').length).toBe(5);
     monthFilter.value = '2026-03';
     monthFilter.dispatchEvent(new Event('change'));

+ 12 - 0
projects/xiaoshu-mobile/src/styles.scss

@@ -207,6 +207,18 @@ select:focus {
   box-shadow: 0 0 0 3px rgb(47 155 130 / 12%);
 }
 
+/* The course-history month picker has a leading calendar icon outside the
+   shared dropdown trigger. Keep independent space for the icon and arrow. */
+body app-course-center-page .history-filter-control.month-control > button.xs-dropdown-trigger {
+  height: 46px;
+  min-height: 46px;
+  padding-right: 18px;
+  padding-left: 42px;
+  border-radius: 11px;
+  box-shadow: 0 3px 10px rgb(20 53 45 / 4%);
+  font-size: 13px;
+}
+
 .empty-state,
 .center-state {
   display: grid;