Skip to content

Q
qjclaw-dmg
Commit 29bb5e3a authored by AI-甘富林's avatar AI-甘富林
Browse files
Options

UI交互修改 v1.0

parent 3815629f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 371 additions and 91 deletions
apps/desktop/src/main/create-window.ts
View file @ 29bb5e3a
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/App.tsx
View file @ 29bb5e3a
This diff is collapsed.
apps/ui/src/styles.css
View file @ 29bb5e3a
......@@ -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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment