feat(web): update Vue components

- App.vue: update app root component
- PersonalWorkbench.vue: update personal workbench component

web/src/App.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { RouterView } from 'vue-router'
 
 import './assets/styles/global.css'
@@ -26,26 +26,57 @@ const viewportWidth = ref(typeof window === 'undefined' ? DESKTOP_BASE_WIDTH : w
 const viewportHeight = ref(typeof window === 'undefined' ? DESKTOP_BASE_HEIGHT : window.innerHeight)
 
 const desktopScaleStyle = computed(() => {
-  const scale = resolveDesktopScale(viewportWidth.value, viewportHeight.value)
-  const inverseScale = Number((1 / scale).toFixed(4))
+  const metrics = resolveDesktopMetrics(viewportWidth.value, viewportHeight.value)
 
   return {
-    '--desktop-ui-scale': scale.toFixed(4),
-    '--desktop-ui-inverse-scale': inverseScale.toFixed(4),
-    '--desktop-stage-width': `${Math.round(viewportWidth.value * inverseScale)}px`,
-    '--desktop-stage-height': `${Math.round(viewportHeight.value * inverseScale)}px`
+    '--desktop-ui-scale': metrics.scale.toFixed(4),
+    '--desktop-ui-inverse-scale': metrics.inverseScale.toFixed(4),
+    '--desktop-stage-width': `${metrics.stageWidth}px`,
+    '--desktop-stage-height': `${metrics.stageHeight}px`
   }
 })
 
-function resolveDesktopScale(width, height) {
+const desktopMetrics = computed(() => resolveDesktopMetrics(viewportWidth.value, viewportHeight.value))
+
+function resolveDesktopMetrics(width, height) {
   if (width < 960) {
-    return 1
+    return {
+      scale: 1,
+      inverseScale: 1,
+      stageWidth: width,
+      stageHeight: height,
+      viewportWidth: width,
+      viewportHeight: height
+    }
   }
 
   const scaleByWidth = width / DESKTOP_BASE_WIDTH
   const scaleByHeight = height / DESKTOP_BASE_HEIGHT
+  const scale = Number(Math.min(1, Math.max(DESKTOP_MIN_SCALE, Math.min(scaleByWidth, scaleByHeight))).toFixed(4))
+  const inverseScale = Number((1 / scale).toFixed(4))
 
-  return Number(Math.min(1, Math.max(DESKTOP_MIN_SCALE, Math.min(scaleByWidth, scaleByHeight))).toFixed(4))
+  return {
+    scale,
+    inverseScale,
+    stageWidth: Math.round(width * inverseScale),
+    stageHeight: Math.round(height * inverseScale),
+    viewportWidth: width,
+    viewportHeight: height
+  }
+}
+
+function syncRootDesktopVars(metrics) {
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  const rootStyle = document.documentElement.style
+  rootStyle.setProperty('--desktop-ui-scale', metrics.scale.toFixed(4))
+  rootStyle.setProperty('--desktop-ui-inverse-scale', metrics.inverseScale.toFixed(4))
+  rootStyle.setProperty('--desktop-stage-width', `${metrics.stageWidth}px`)
+  rootStyle.setProperty('--desktop-stage-height', `${metrics.stageHeight}px`)
+  rootStyle.setProperty('--desktop-viewport-width', String(metrics.viewportWidth))
+  rootStyle.setProperty('--desktop-viewport-height', String(metrics.viewportHeight))
 }
 
 function updateViewport() {
@@ -53,6 +84,14 @@ function updateViewport() {
   viewportHeight.value = window.innerHeight
 }
 
+watch(
+  desktopMetrics,
+  (metrics) => {
+    syncRootDesktopVars(metrics)
+  },
+  { immediate: true }
+)
+
 onMounted(() => {
   updateViewport()
   window.addEventListener('resize', updateViewport, { passive: true })

web/src/components/business/PersonalWorkbench.vue

@@ -409,8 +409,10 @@ const policyItems = [
 
 <style scoped>
 .workbench {
+  min-width: 0;
   display: grid;
   gap: 16px;
+  padding-bottom: 10px;
 }
 
 .assistant-hero {
@@ -1060,6 +1062,43 @@ const policyItems = [
   }
 }
 
+@media (max-width: 1440px) {
+  .workbench {
+    gap: 14px;
+  }
+
+  .assistant-hero {
+    gap: 16px;
+    padding: 18px 20px 18px 16px;
+  }
+
+  .assistant-copy h3 {
+    font-size: 24px;
+  }
+
+  .assistant-visual {
+    min-height: 184px;
+  }
+
+  .assistant-image {
+    width: 172px;
+  }
+
+  .workbench-grid {
+    gap: 16px;
+  }
+
+  .list-panel,
+  .policy-panel {
+    padding: 18px 20px;
+  }
+
+  .policy-row {
+    min-height: 52px;
+    padding: 0 16px;
+  }
+}
+
 @media (max-width: 1080px) {
   .assistant-hero {
     grid-template-columns: 1fr;