feat(web): connect quick share flow

Signed-off-by: JustMe <mr.toing@outlook.com>

web/src/features/channel/Workspace.module.css

@@ -0,0 +1,70 @@
+/* 电脑:左列表 | 内联预览 | 右侧窄栏 */
+.desktop {
+  display: grid;
+  grid-template-columns: 380px minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr);
+  height: 100vh;
+  height: 100dvh;
+}
+
+.desktop > header {
+  grid-column: 1 / 3;
+  border-bottom: 1px solid var(--line);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: 1px solid var(--line);
+}
+
+.scroll {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.batch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-4);
+  border-bottom: 1px solid var(--line);
+  background: linear-gradient(90deg, var(--busy-soft), transparent);
+  font-size: 13px;
+}
+
+/* 手机:整列滚动,顶栏与底部动作栏 sticky,内容从它们下方滑过 */
+.mobile {
+  display: flex;
+  height: 100vh;
+  height: 100dvh;
+  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
+}
+
+.column {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+
+.grow {
+  flex: 1;
+}
+
+.drop {
+  position: fixed;
+  inset: var(--space-4);
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  border: 2px dashed var(--line-strong);
+  border-radius: var(--radius-lg);
+  background: var(--scrim);
+  color: var(--on-accent);
+  font-size: 18px;
+  pointer-events: none;
+}