完善 API Key 能力范围可视化和维护

apps/web/src/styles/pages.css

@@ -577,8 +577,8 @@
 }
 
 .apiKeyTable .shTableRow {
-  grid-template-columns: minmax(170px, 1.05fr) minmax(210px, 1.25fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(96px, 0.55fr) minmax(150px, 0.9fr) minmax(74px, 0.4fr);
-  min-width: 1160px;
+  grid-template-columns: minmax(170px, 1.05fr) minmax(210px, 1.2fr) minmax(220px, 1.2fr) minmax(150px, 0.85fr) minmax(150px, 0.85fr) minmax(150px, 0.85fr) minmax(96px, 0.5fr) minmax(150px, 0.85fr) minmax(74px, 0.38fr);
+  min-width: 1360px;
   align-items: center;
 }
 
@@ -620,6 +620,27 @@
   font-size: var(--font-size-xs);
 }
 
+.apiKeyScopeCell {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 30px;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.apiKeyScopeBadges {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.apiKeyScopeCell .shBadge,
+.apiKeyScopeBadges .shBadge {
+  min-height: 20px;
+  padding: 0 7px;
+}
+
 .apiKeyPolicyButton {
   display: inline-flex;
   max-width: 100%;
@@ -645,6 +666,52 @@
   grid-template-columns: 1fr;
 }
 
+.apiKeyScopeDialogBody {
+  grid-template-columns: 1fr;
+}
+
+.apiKeyScopeEditor {
+  display: grid;
+  gap: 16px;
+}
+
+.apiKeyScopeOptionGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.apiKeyScopeOption {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 9px;
+  padding: 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+}
+
+.apiKeyScopeOption span {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+.apiKeyScopeOption strong {
+  color: var(--text-strong);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.apiKeyScopeOption small {
+  overflow: hidden;
+  color: var(--text-soft);
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .apiKeyPolicyDialog {
   width: min(1120px, 100%);
 }
@@ -714,6 +781,10 @@
   font-weight: var(--font-weight-medium);
 }
 
+.formMessage.error {
+  color: #b42318;
+}
+
 .providerCatalogGrid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2216,8 +2287,13 @@
   .runnerActionGrid,
   .accessPermissionGrid,
   .accessTreeToolbar,
-  .apiKeyCreateDialogBody,
-  .apiKeyPolicyDialogBody {
+	  .apiKeyCreateDialogBody,
+	  .apiKeyScopeDialogBody,
+	  .apiKeyPolicyDialogBody {
+	    grid-template-columns: 1fr;
+	  }
+
+  .apiKeyScopeOptionGrid {
     grid-template-columns: 1fr;
   }