feat: refine api key permissions and admin routes

apps/web/src/styles/pages.css

@@ -285,6 +285,11 @@
   gap: 14px;
 }
 
+.accessEditorStack {
+  display: grid;
+  gap: 12px;
+}
+
 .accessPermissionPanel .shCardContent {
   display: grid;
   gap: 12px;
@@ -388,6 +393,95 @@
   min-width: 900px;
 }
 
+.apiKeyTable {
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+}
+
+.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;
+  align-items: center;
+}
+
+.apiKeyNameCell,
+.apiKeySecretCell {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+.apiKeyNameCell strong,
+.apiKeyNameCell small,
+.apiKeySecretCell code {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.apiKeyNameCell strong {
+  color: var(--text-strong);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.apiKeyNameCell small {
+  color: var(--text-soft);
+  font-size: var(--font-size-xs);
+}
+
+.apiKeySecretCell {
+  grid-template-columns: minmax(0, 1fr) 30px;
+  align-items: center;
+}
+
+.apiKeySecretCell code {
+  min-width: 0;
+  color: var(--text-normal);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+}
+
+.apiKeyPolicyButton {
+  display: inline-flex;
+  max-width: 100%;
+  min-height: 30px;
+  align-items: center;
+  gap: 6px;
+  padding: 0 9px;
+  border: 1px solid var(--border);
+  border-radius: var(--control-radius);
+  background: var(--surface);
+  color: var(--text-normal);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.apiKeyPolicyButton span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.apiKeyCreateDialogBody {
+  grid-template-columns: 1fr;
+}
+
+.apiKeyPolicyDialog {
+  width: min(1120px, 100%);
+}
+
+.apiKeyPolicyDialogBody {
+  grid-template-columns: 1fr;
+  background: var(--surface-subtle);
+}
+
+.apiKeyPolicyDialog .accessTreeBox {
+  min-height: 360px;
+  max-height: min(480px, calc(100vh - 360px));
+}
+
 .tenantTable .shTableRow {
   grid-template-columns: minmax(210px, 1.35fr) minmax(110px, 0.7fr) minmax(150px, 0.9fr) minmax(110px, 0.7fr) minmax(90px, 0.55fr) minmax(86px, 0.5fr);
   min-width: 880px;
@@ -1314,7 +1408,9 @@
   .runtimePolicyFormBody,
   .runtimePolicyRows,
   .accessPermissionGrid,
-  .accessTreeToolbar {
+  .accessTreeToolbar,
+  .apiKeyCreateDialogBody,
+  .apiKeyPolicyDialogBody {
     grid-template-columns: 1fr;
   }