diff --git a/src-tauri/mac/front/styles.css b/src-tauri/mac/front/styles.css
index 4f3ac28..026615d 100644
--- a/src-tauri/mac/front/styles.css
+++ b/src-tauri/mac/front/styles.css
@@ -175,28 +175,32 @@ button.pager-pill:hover:not(:disabled) {
}
.profiles-grid {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 14px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
}
.profile-card {
- display: flex;
- flex-direction: column;
- gap: 18px;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) max-content;
+ grid-template-areas:
+ "title title"
+ "quotas actions";
+ align-items: center;
+ row-gap: 10px;
+ column-gap: 18px;
min-width: 0;
- min-height: 188px;
- padding: 18px;
+ padding: 14px 18px;
border: 1px solid var(--border-accent);
- border-radius: var(--radius-profile);
- background:
- radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.52), transparent 16rem),
- linear-gradient(180deg, rgba(250, 248, 244, 0.98), rgba(243, 239, 234, 0.98));
- box-shadow:
- var(--shadow-card),
- inset 0 1px 0 rgba(255, 255, 255, 0.9);
+ border-radius: var(--radius-metric);
+ background: linear-gradient(180deg, rgba(250, 248, 244, 0.98), rgba(243, 239, 234, 0.98));
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
+.profile-title-wrap { grid-area: title; }
+.profile-quota-stack { grid-area: quotas; }
+.profile-card-actions { grid-area: actions; }
+
.profile-card.status-current {
border-color: rgba(199, 227, 238, 0.98);
}
@@ -208,8 +212,10 @@ button.pager-pill:hover:not(:disabled) {
.profile-title-wrap {
display: flex;
- flex-direction: column;
- gap: 8px;
+ flex-direction: row;
+ align-items: baseline;
+ flex-wrap: wrap;
+ gap: 4px 12px;
min-width: 0;
}
@@ -235,14 +241,28 @@ button.pager-pill:hover:not(:disabled) {
color: #727684;
}
-.profile-quota-stack,
+.profile-quota-stack {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ align-items: center;
+ min-width: 0;
+}
+
.current-quota-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
-.profile-quota-metric,
+.profile-quota-metric {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ flex: 1;
+ min-width: 0;
+}
+
.current-quota-metric {
display: flex;
flex-direction: column;
@@ -267,6 +287,14 @@ button.pager-pill:hover:not(:disabled) {
min-width: 0;
}
+.profile-quota-line {
+ gap: 8px;
+}
+
+.profile-quota-stack .quota-track {
+ height: 6px;
+}
+
.current-quota-line {
gap: 8px;
}
@@ -292,7 +320,10 @@ button.pager-pill:hover:not(:disabled) {
.current-quota-title,
.current-quota-value,
-.current-quota-refresh {
+.current-quota-refresh,
+.profile-quota-title,
+.profile-quota-value,
+.profile-quota-refresh {
font-size: 0.78rem;
}
@@ -338,10 +369,18 @@ button.pager-pill:hover:not(:disabled) {
}
.profile-card-actions {
- display: grid;
- grid-template-columns: repeat(4, minmax(0, 1fr));
- gap: 10px;
- margin-top: auto;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ gap: 6px;
+ margin-top: 0;
+}
+
+.profile-card-actions .profile-action-button {
+ height: 28px;
+ padding: 0 10px;
+ font-size: 0.78rem;
+ white-space: nowrap;
}
.profile-action-button,
@@ -684,13 +723,29 @@ button.pager-pill:disabled {
justify-content: flex-start;
}
- .profiles-grid,
.right-rail {
grid-template-columns: 1fr;
}
- .current-actions,
+ .profile-card {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "title"
+ "quotas"
+ "actions";
+ }
+
+ .profile-quota-stack {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 8px;
+ }
+
.profile-card-actions {
+ justify-content: flex-start;
+ }
+
+ .current-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -725,7 +780,6 @@ button.pager-pill:disabled {
}
.current-actions,
- .profile-card-actions,
.dialog-actions {
grid-template-columns: 1fr;
}
diff --git a/src-tauri/shared/front/base.css b/src-tauri/shared/front/base.css
index e80f3e5..ad69c09 100644
--- a/src-tauri/shared/front/base.css
+++ b/src-tauri/shared/front/base.css
@@ -600,7 +600,7 @@ p {
.app-toolbar {
display: flex;
align-items: center;
- justify-content: flex-end;
+ justify-content: center;
gap: 18px;
padding: 2px 2px 0;
}
@@ -981,6 +981,21 @@ p {
gap: 10px;
}
+.settings-cli-inline {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ min-width: 0;
+}
+
+.settings-value--inline {
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
.settings-action-button {
display: inline-flex;
align-items: center;
@@ -1928,28 +1943,32 @@ button.pager-pill:hover:not(:disabled) {
}
.profiles-grid {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 14px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
}
.profile-card {
- display: flex;
- flex-direction: column;
- gap: 18px;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) max-content;
+ grid-template-areas:
+ "title title"
+ "quotas actions";
+ align-items: center;
+ row-gap: 10px;
+ column-gap: 18px;
min-width: 0;
- min-height: 188px;
- padding: 18px;
+ padding: 14px 18px;
border: 1px solid var(--border-accent);
- border-radius: var(--radius-profile);
- background:
- radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.52), transparent 16rem),
- linear-gradient(180deg, rgba(250, 248, 244, 0.98), rgba(243, 239, 234, 0.98));
- box-shadow:
- var(--shadow-card),
- inset 0 1px 0 rgba(255, 255, 255, 0.9);
+ border-radius: var(--radius-metric);
+ background: linear-gradient(180deg, rgba(250, 248, 244, 0.98), rgba(243, 239, 234, 0.98));
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
+.profile-title-wrap { grid-area: title; }
+.profile-quota-stack { grid-area: quotas; }
+.profile-card-actions { grid-area: actions; }
+
.profile-card.status-current {
border-color: rgba(199, 227, 238, 0.98);
}
@@ -1961,8 +1980,10 @@ button.pager-pill:hover:not(:disabled) {
.profile-title-wrap {
display: flex;
- flex-direction: column;
- gap: 8px;
+ flex-direction: row;
+ align-items: baseline;
+ flex-wrap: wrap;
+ gap: 4px 12px;
min-width: 0;
}
@@ -2020,14 +2041,28 @@ button.pager-pill:hover:not(:disabled) {
color: #727684;
}
-.profile-quota-stack,
+.profile-quota-stack {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ align-items: center;
+ min-width: 0;
+}
+
.current-quota-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
-.profile-quota-metric,
+.profile-quota-metric {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ flex: 1;
+ min-width: 0;
+}
+
.current-quota-metric {
display: flex;
flex-direction: column;
@@ -2052,6 +2087,14 @@ button.pager-pill:hover:not(:disabled) {
min-width: 0;
}
+.profile-quota-line {
+ gap: 10px;
+}
+
+.profile-quota-stack .quota-track {
+ height: 6px;
+}
+
.current-quota-line {
gap: 8px;
}
@@ -2075,6 +2118,12 @@ button.pager-pill:hover:not(:disabled) {
justify-self: center;
}
+.profile-quota-title,
+.profile-quota-value,
+.profile-quota-refresh {
+ font-size: 0.78rem;
+}
+
.current-quota-title,
.current-quota-value,
.current-quota-refresh {
@@ -2123,15 +2172,15 @@ button.pager-pill:hover:not(:disabled) {
}
.profile-card-actions {
- display: grid;
- grid-template-columns: repeat(4, minmax(0, 1fr));
- gap: 10px;
- margin-top: auto;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ gap: 6px;
+ margin-top: 0;
}
.profile-card-actions--windows {
- grid-template-columns: repeat(5, minmax(0, 1fr));
- gap: 8px;
+ gap: 6px;
}
.profile-action-button,
@@ -2165,12 +2214,17 @@ button.pager-pill:hover:not(:disabled) {
font-size: 0.82rem;
}
-.profile-card-actions--windows .profile-action-button {
- padding: 0 8px;
+.profile-card-actions .profile-action-button {
+ height: 28px;
+ padding: 0 10px;
font-size: 0.78rem;
white-space: nowrap;
}
+.profile-card-actions--windows .profile-action-button {
+ padding: 0 8px;
+}
+
.ghost-button,
.primary-button {
height: 42px;
@@ -2581,13 +2635,29 @@ button.pager-pill:disabled {
justify-content: flex-start;
}
- .profiles-grid,
.right-rail {
grid-template-columns: 1fr;
}
- .current-actions,
+ .profile-card {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "title"
+ "quotas"
+ "actions";
+ }
+
+ .profile-quota-stack {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 8px;
+ }
+
.profile-card-actions {
+ justify-content: flex-start;
+ }
+
+ .current-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -2622,7 +2692,6 @@ button.pager-pill:disabled {
}
.current-actions,
- .profile-card-actions,
.theme-options,
.dialog-actions {
grid-template-columns: 1fr;
diff --git a/src-tauri/shared/front/render.ts b/src-tauri/shared/front/render.ts
index e6de075..fc9feba 100644
--- a/src-tauri/shared/front/render.ts
+++ b/src-tauri/shared/front/render.ts
@@ -13,7 +13,7 @@ import { state } from "@front-shared/state";
import { getThemeOption, isThemeId } from "@front-shared/theme";
const isWindowsUiTarget = __CODEX_UI_TARGET__ === "windows";
-const shellRoutes: readonly ShellRoute[] = ["dashboard", "profiles", "runtime", "settings", "guide"];
+const shellRoutes: readonly ShellRoute[] = ["dashboard", "profiles", "settings", "guide"];
function isShellRoute(value: string): value is ShellRoute {
return shellRoutes.includes(value as ShellRoute);
diff --git a/src-tauri/shared/front/state.ts b/src-tauri/shared/front/state.ts
index 86a76bb..b8b6e01 100644
--- a/src-tauri/shared/front/state.ts
+++ b/src-tauri/shared/front/state.ts
@@ -13,7 +13,7 @@ export const state = {
route: "dashboard" as ShellRoute,
locale: "en" as Locale,
theme: "classic" as ThemeId,
- pageSize: 4,
+ pageSize: 8,
snapshot: null as ProfilesSnapshotResponse | null,
currentQuota: null as QuotaSummary | null,
};
diff --git a/src-tauri/shared/front/tauri.ts b/src-tauri/shared/front/tauri.ts
index 7efe09b..b0d7c9e 100644
--- a/src-tauri/shared/front/tauri.ts
+++ b/src-tauri/shared/front/tauri.ts
@@ -143,7 +143,7 @@ let previewCurrentCard: CurrentCard = {
let previewCurrentQuota: QuotaSummary = quota(84, "3小时后刷新", 61, "2天4小时后刷新");
let previewSnapshot: ProfilesSnapshotResponse = {
- page_size: 4,
+ page_size: 8,
profiles: clone(previewProfiles),
current_card: clone(previewCurrentCard),
current_quota_card: clone(previewCurrentQuota),
@@ -159,7 +159,7 @@ function mockAction(message: string, path: string | null = null): Promise
PathBuf {
if let Some(path) = env::var_os("USERPROFILE") {
diff --git a/src-tauri/win/front/index.html b/src-tauri/win/front/index.html
index 783888b..c4bfe79 100644
--- a/src-tauri/win/front/index.html
+++ b/src-tauri/win/front/index.html
@@ -31,7 +31,6 @@
@@ -116,7 +115,6 @@ Control D
-
-
-
- Launch at login
-
-
-
+
-
-
Configuration backup
-
-
-
-
-
-
-
No backups yet
-
Exported configs include API keys. Keep them only on trusted devices.
+
diff --git a/src-tauri/win/front/styles.css b/src-tauri/win/front/styles.css
index 383ca4e..7feaeec 100644
--- a/src-tauri/win/front/styles.css
+++ b/src-tauri/win/front/styles.css
@@ -175,28 +175,32 @@ button.pager-pill:hover:not(:disabled) {
}
.profiles-grid {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 14px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
}
.profile-card {
- display: flex;
- flex-direction: column;
- gap: 18px;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) max-content;
+ grid-template-areas:
+ "title title"
+ "quotas actions";
+ align-items: center;
+ row-gap: 10px;
+ column-gap: 18px;
min-width: 0;
- min-height: 188px;
- padding: 18px;
+ padding: 14px 18px;
border: 1px solid var(--border-accent);
- border-radius: var(--radius-profile);
- background:
- radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.52), transparent 16rem),
- linear-gradient(180deg, rgba(250, 248, 244, 0.98), rgba(243, 239, 234, 0.98));
- box-shadow:
- var(--shadow-card),
- inset 0 1px 0 rgba(255, 255, 255, 0.9);
+ border-radius: var(--radius-metric);
+ background: linear-gradient(180deg, rgba(250, 248, 244, 0.98), rgba(243, 239, 234, 0.98));
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
+.profile-title-wrap { grid-area: title; }
+.profile-quota-stack { grid-area: quotas; }
+.profile-card-actions { grid-area: actions; }
+
.profile-card.status-current {
border-color: rgba(199, 227, 238, 0.98);
}
@@ -208,8 +212,10 @@ button.pager-pill:hover:not(:disabled) {
.profile-title-wrap {
display: flex;
- flex-direction: column;
- gap: 8px;
+ flex-direction: row;
+ align-items: baseline;
+ flex-wrap: wrap;
+ gap: 4px 12px;
min-width: 0;
}
@@ -235,14 +241,28 @@ button.pager-pill:hover:not(:disabled) {
color: #727684;
}
-.profile-quota-stack,
+.profile-quota-stack {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ align-items: center;
+ min-width: 0;
+}
+
.current-quota-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
-.profile-quota-metric,
+.profile-quota-metric {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ flex: 1;
+ min-width: 0;
+}
+
.current-quota-metric {
display: flex;
flex-direction: column;
@@ -267,6 +287,14 @@ button.pager-pill:hover:not(:disabled) {
min-width: 0;
}
+.profile-quota-line {
+ gap: 8px;
+}
+
+.profile-quota-stack .quota-track {
+ height: 6px;
+}
+
.current-quota-line {
gap: 8px;
}
@@ -292,7 +320,10 @@ button.pager-pill:hover:not(:disabled) {
.current-quota-title,
.current-quota-value,
-.current-quota-refresh {
+.current-quota-refresh,
+.profile-quota-title,
+.profile-quota-value,
+.profile-quota-refresh {
font-size: 0.78rem;
}
@@ -338,10 +369,18 @@ button.pager-pill:hover:not(:disabled) {
}
.profile-card-actions {
- display: grid;
- grid-template-columns: repeat(4, minmax(0, 1fr));
- gap: 10px;
- margin-top: auto;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ gap: 6px;
+ margin-top: 0;
+}
+
+.profile-card-actions .profile-action-button {
+ height: 28px;
+ padding: 0 10px;
+ font-size: 0.78rem;
+ white-space: nowrap;
}
.profile-action-button,
@@ -684,13 +723,29 @@ button.pager-pill:disabled {
justify-content: flex-start;
}
- .profiles-grid,
.right-rail {
grid-template-columns: 1fr;
}
- .current-actions,
+ .profile-card {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "title"
+ "quotas"
+ "actions";
+ }
+
+ .profile-quota-stack {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 8px;
+ }
+
.profile-card-actions {
+ justify-content: flex-start;
+ }
+
+ .current-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -725,7 +780,6 @@ button.pager-pill:disabled {
}
.current-actions,
- .profile-card-actions,
.dialog-actions {
grid-template-columns: 1fr;
}