fix(frontend): responsive layout for PC / tablet / Android (builds on #1878)

[lyingbug]

Closes Tencent#917.

This branch takes #1878 (the most complete responsive PR that still merges cleanly into main) and fixes the defects that survived it. Tencent#1878 is merged as-is in the first commit; every later commit is the follow-up work.

Why build on Tencent#1878

Eleven PRs target Tencent#917. Of those, seven merge cleanly into current main, and all of them remove the min-width: 600px on .main that caused the original Android clipping. Tencent#1878 was the broadest of the clean-merging set (chat, settings, knowledge base, dialogs, drawers, tables) and is pixel-identical to main at 1440px, so it was the best base to extend.

What this adds on top of Tencent#1878

Composer no longer has a dead zone at 768–1250px. creatChat.vue and KnowledgeBase.vue pinned .t-textarea__inner to hard-coded widths (654px / 500px / 340px / 300px) per breakpoint. Tencent#1878 only overrode those below 767px, so between 768px and 1250px the typing area stopped up to 438px short of the input box border. The hard-coded widths and the matching translateX(...) offsets are removed, and the composer sizes itself from its container.

Composer gets narrow-screen gutters. Tencent#1878 left the input box flush against both screen edges on phones, clipping its rounded border and shadow. The component now applies its own padding-inline at the tablet and phone breakpoints.

Control bar stays on one row on phones. With gutters the wrapped control bar spilled onto a second row at 360–390px, growing the composer and pushing the send action out of thumb reach. The optional controls become a horizontally scrollable strip and the send action no longer shrinks.

Settings rows stack on phones. The setting pages pin the control column to min-width: 280px and write an inline width: 280px on the select. At 360px that crushed the label column to 48px, rendering 语言 / 主题模式 / 界面字体 one character per line. Rows now stack label-above-control, releasing both the column minimum and the inline width.

App-wide img { user-drag: none } restored. Tencent#1878 changed platform/index.vue from a global <style> block to scoped, which silently limited that rule to this one component's template. It moves back into an unscoped block.

Touch-device session actions actually apply. Tencent#1878 added .aside_box :deep(.menu-more-wrap) to theme.css, but :deep() is not valid CSS outside a Vue SFC, so the browser discarded the rule and the row action button stayed invisible on touch devices. The rule moves into menu.vue, where it can outrank the scoped opacity: 0 default.

Breakpoints resolve at module load and prefer matchMedia. platform/index.vue and the UI store read the breakpoint refs before mount, so deferring the first evaluation to App.vue's onMounted made phones render the desktop sidebar for one frame. Reading matchMedia instead of window.innerWidth also keeps the JS form factor in step with the CSS near a boundary, where a classic scrollbar makes the two disagree by up to 15px. The tablet sidebar watcher becomes immediate to match — otherwise opening the app straight into a tablet width never triggered the collapse.

Also removes four unused @/api/chat imports that Tencent#1878 reintroduced in menu.vue, and moves its defineProps / defineEmits out of the middle of the import list.

Tests. Tencent#1878 shipped none. This adds useBreakpoint.test.ts (breakpoint classification, boundary values, matchMedia-vs-innerWidth, SSR fallback) and responsiveChatComposer.test.mjs (layout contracts that guard against the hard-coded widths, the global img rule, the one-row control bar, the stacked setting rows, and the immediate tablet watcher).

Verification

npm test (307 passing), npm run type-check and npm run build all pass.

Measured with Playwright against the production build at 360 / 390 / 640 / 700 / 768 / 820 / 900 / 1000 / 1044 / 1100 / 1250 / 1440px on the new-chat, existing-chat, knowledge-base list, agent list, organization and settings routes. document.scrollWidth equals clientWidth at every width, no element is clipped past the right edge without being reachable, and the composer has zero dead space at every width. The 1440px new-chat render is pixel-identical to main.

Before / after on a 390px phone — main clips the content column, Tencent#1878 fixes the overflow but the input box is flush against both edges, this branch adds gutters and keeps the control row intact:

New chat at 390px on main, PR #1878 and this branch

The composer dead zone at 1000px. Blue outlines the input box, red outlines the actual typing area:

Composer dead zone at 1000px on main, PR #1878 and this branch

Settings at 360px — main is a cramped two-column modal, Tencent#1878 makes it full screen but the label column collapses to one character per line, this branch stacks each row:

Settings modal at 360px on main, PR #1878 and this branch

Walkthrough from 1440px down to 360px, including the drawer sidebar and the full-screen settings modal, then back to desktop:

responsive_walkthrough_desktop_tablet_phone.mp4

_{To show artifacts inline, enable in settings.}