Jelajahi Sumber

fix(frontend): 按内容宽度响应工作台

wangkangyjy 10 jam lalu
induk
melakukan
e32816c7fc

+ 3 - 2
frontend/src/__tests__/workspace-navigation-contract.test.js

@@ -31,8 +31,9 @@ describe('workspace navigation contracts', () => {
     expect(page).toContain('团队进展')
     expect(page).toContain('查看团队 OKR')
     expect(page).toContain('var(--color-text-secondary)')
-    expect(page).toContain('@media (max-width: 820px)')
-    expect(page).toContain('@media (max-width: 640px)')
+    expect(page).toContain('container-type: inline-size')
+    expect(page).toContain('@container (max-width: 820px)')
+    expect(page).toContain('@container (max-width: 640px)')
     expect(page).not.toContain('card mt-md')
   })
 

+ 3 - 2
frontend/src/views/workspace/WorkspaceView.vue

@@ -130,6 +130,7 @@ const teamOkrTarget = computed(() => ({
   width: 100%;
   max-width: 1120px;
   margin: 0 auto;
+  container-type: inline-size;
 }
 
 .workspace-heading {
@@ -299,7 +300,7 @@ const teamOkrTarget = computed(() => ({
 .workspace-pulse__item strong { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
 .workspace-pulse__item span { color: var(--color-text-secondary); font-size: 12px; }
 
-@media (max-width: 820px) {
+@container (max-width: 820px) {
   .workspace-primary { grid-template-columns: 1fr; }
   .workspace-action { min-height: 320px; }
   .workspace-context { border-top: 1px solid var(--color-border); border-left: 0; }
@@ -308,7 +309,7 @@ const teamOkrTarget = computed(() => ({
   .workspace-pulse__item:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border); }
 }
 
-@media (max-width: 640px) {
+@container (max-width: 640px) {
   .workspace-heading { align-items: flex-start; margin-bottom: 18px; }
   .workspace-heading h1 { font-size: 23px; overflow-wrap: anywhere; }
   .workspace-action { min-height: 300px; padding: 30px 24px; }