UI交互修改 v1.0

apps/desktop/src/main/create-window.ts

-import { BrowserWindow, app } from "electron";
+import { BrowserWindow, app } from "electron";
 import path from "node:path";
 
 function resolveRendererEntry(): string {
@@ -14,8 +14,8 @@ export function createMainWindow(smokeEnabled = false): BrowserWindow {
   const window = new BrowserWindow({
     width: 1400,
     height: 920,
-    minWidth: 1080,
-    minHeight: 720,
+    minWidth: 960,
+    minHeight: 640,
     backgroundColor: "#0f172a",
     webPreferences: {
       additionalArguments: smokeEnabled ? ["--qjc-smoke"] : [],
@@ -35,3 +35,4 @@ export function createMainWindow(smokeEnabled = false): BrowserWindow {
 
   return window;
 }
+

apps/ui/src/styles.css

@@ -8,8 +8,14 @@
 }
 
 * { box-sizing: border-box; }
-html, body, #root { margin: 0; min-height: 100%; }
-body { min-height: 100vh; }
+html, body, #root {
+  margin: 0;
+  height: 100%;
+}
+body {
+  min-height: 100vh;
+  overflow: hidden;
+}
 button, input, textarea, select { font: inherit; }
 button {
   border: 0;
@@ -25,7 +31,13 @@ button.secondary {
   color: #2d3955;
   box-shadow: inset 0 0 0 1px #d8e1ef;
 }
-button:disabled { opacity: 0.55; cursor: not-allowed; }
+button:disabled,
+input:disabled,
+textarea:disabled,
+select:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
 input, textarea, select {
   width: 100%;
   border: 1px solid #d9e2ef;
@@ -34,27 +46,52 @@ input, textarea, select {
   background: #fff;
   color: #182236;
 }
-textarea { min-height: 150px; resize: vertical; }
-label { display: grid; gap: 8px; color: #53637f; font-size: 13px; }
+textarea {
+  min-height: 128px;
+  resize: vertical;
+  max-height: 220px;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+label {
+  display: grid;
+  gap: 8px;
+  color: #53637f;
+  font-size: 13px;
+}
 p, h1, h2, h3, strong, span { margin: 0; }
 strong { font-weight: 600; }
 
 .shell {
+  height: 100vh;
   min-height: 100vh;
   display: grid;
   grid-template-columns: 208px minmax(0, 1fr);
+  overflow: hidden;
 }
 
 .sidebar {
+  height: 100vh;
   padding: 22px 16px;
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto auto;
+  align-content: start;
   gap: 14px;
   background: linear-gradient(180deg, #f8fbff, #edf3fa);
   border-right: 1px solid #dee6f1;
 }
 
-.brand-block, .nav-list, .page-stack, .content-area, .message-list, .catalog-list, .form-grid, .skill-picker, .chat-panel, .settings-panel, .bind-block {
+.brand-block,
+.nav-list,
+.page-stack,
+.content-area,
+.catalog-list,
+.form-grid,
+.chat-panel,
+.settings-panel,
+.bind-entry,
+.composer-shell,
+.scroll-panel {
   display: grid;
   gap: 12px;
 }
@@ -71,13 +108,25 @@ strong { font-weight: 600; }
 }
 
 .brand-block h1 { font-size: 28px; }
-.brand-block p, .page-header p, .section-head p, .catalog-item p, .notice, .empty-state, .mini-info span, .inline-hint {
+.brand-block p,
+.page-copy p,
+.catalog-item p,
+.notice,
+.empty-state,
+.mini-info span,
+.inline-hint,
+.bind-entry-copy p,
+.composer-hint {
   color: #667794;
   line-height: 1.6;
   font-size: 13px;
 }
 
-.nav-list { gap: 8px; }
+.nav-list {
+  gap: 8px;
+  align-content: start;
+  align-self: start;
+}
 .nav-item {
   height: 42px;
   padding: 0 12px;
@@ -97,49 +146,102 @@ strong { font-weight: 600; }
 }
 
 .main-shell {
+  height: 100vh;
+  min-height: 0;
   padding: 22px;
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 14px;
+  overflow: hidden;
 }
 
-.panel, .notice, .empty-state, .message-card, .catalog-item {
+.panel,
+.notice,
+.empty-state,
+.message-card,
+.catalog-item {
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid #dfe7f2;
   box-shadow: 0 18px 40px rgba(35, 52, 82, 0.06);
 }
 
-.panel { padding: 20px; }
-.page-header {
-  padding: 16px 20px;
+.panel { padding: 18px; }
+
+.page-topbar,
+.header-actions,
+.section-head,
+.button-row,
+.mini-info,
+.bind-row,
+.composer-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 14px;
+  gap: 12px;
 }
 
-.header-actions, .section-head, .button-row, .mini-info, .bind-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
+.page-topbar {
+  align-items: flex-start;
+  flex: 0 0 auto;
+}
+
+.page-copy {
+  display: grid;
+  gap: 4px;
+}
+
+.hero-line {
+  font-size: 24px;
+  line-height: 1.35;
+  letter-spacing: 0.01em;
+  color: #182236;
 }
 
 .section-head.compact { align-items: flex-start; }
 .notice, .empty-state, .catalog-item { padding: 14px; }
-.notice { background: rgba(15, 123, 255, 0.08); color: #28507f; }
-.notice.error { background: rgba(239, 68, 68, 0.08); color: #972f2f; }
+.notice {
+  background: rgba(15, 123, 255, 0.08);
+  color: #28507f;
+  flex: 0 0 auto;
+}
+.notice.error {
+  background: rgba(239, 68, 68, 0.08);
+  color: #972f2f;
+}
+.toast-notice {
+  animation: notice-fade 2.4s ease forwards;
+}
 .empty-state { background: #f8fbff; border-style: dashed; }
 
-.chat-topbar {
+.content-area {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.chat-panel {
+  height: 100%;
+  min-height: 0;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  overflow: hidden;
+}
+
+.bind-entry {
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px dashed #cfdced;
+  background: #f8fbff;
+}
+
+.bind-entry-copy {
   display: grid;
-  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.9fr);
-  gap: 14px;
-  align-items: start;
+  gap: 6px;
 }
 
 .bind-row input { flex: 1 1 auto; }
-.bind-row button { flex: 0 0 auto; min-width: 88px; }
+.bind-row button { flex: 0 0 auto; min-width: 96px; }
+
 .inline-hint {
   padding: 10px 12px;
   border-radius: 12px;
@@ -153,16 +255,60 @@ strong { font-weight: 600; }
 }
 .field-label { color: #53637f; font-size: 13px; }
 
-.message-list {
-  min-height: 280px;
-  max-height: 480px;
+.message-list,
+.scroll-panel,
+.page-stack {
+  min-height: 0;
   overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.message-list {
   padding-right: 4px;
+  display: grid;
+  align-content: start;
+  gap: 12px;
 }
+
+.scroll-panel {
+  align-content: start;
+}
+
 .message-card { padding: 16px; }
 .message-card.user { background: #eef5ff; }
 .message-card.assistant { background: #eefbf7; }
-.message-card p { white-space: pre-wrap; line-height: 1.7; }
+.message-card p {
+  white-space: pre-wrap;
+  line-height: 1.7;
+  margin-top: 6px;
+}
+
+.composer-shell {
+  gap: 10px;
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid #dbe5f1;
+  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98));
+  flex: 0 0 auto;
+}
+
+.composer-meta {
+  align-items: flex-end;
+}
+
+.skill-select {
+  min-width: 220px;
+  max-width: 300px;
+}
+
+.composer-hint {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.composer-actions {
+  justify-content: flex-end;
+}
 
 .catalog-item {
   text-align: left;
@@ -198,21 +344,58 @@ strong { font-weight: 600; }
 .status-chip.positive { background: rgba(16, 185, 129, 0.12); color: #0f7f59; }
 .status-chip.warning { background: rgba(245, 158, 11, 0.14); color: #b46f0a; }
 
+@keyframes notice-fade {
+  0%, 78% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+@media (max-width: 1100px) {
+  .hero-line { font-size: 21px; }
+  .composer-meta {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .skill-select {
+    min-width: 0;
+    max-width: none;
+    width: 100%;
+  }
+}
+
 @media (max-width: 960px) {
-  .shell { grid-template-columns: 1fr; }
+  .shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
+  }
   .sidebar {
+    height: auto;
     border-right: 0;
     border-bottom: 1px solid #dee6f1;
   }
+  .main-shell {
+    height: 100%;
+  }
   .nav-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-  .chat-topbar { grid-template-columns: 1fr; }
 }
 
 @media (max-width: 720px) {
   .main-shell, .sidebar { padding: 16px; }
-  .page-header, .header-actions, .button-row, .mini-info, .bind-row { align-items: stretch; flex-direction: column; }
+  .page-topbar,
+  .header-actions,
+  .button-row,
+  .mini-info,
+  .bind-row {
+    align-items: stretch;
+    flex-direction: column;
+  }
   .nav-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .nav-item { justify-content: center; }
+  .hero-line { font-size: 18px; }
+  .chat-panel { padding: 16px; }
 }
\ No newline at end of file
-
-