Upload admin.css

static/css/admin.css

@@ -74,17 +74,98 @@
                 font-size: 13px;
                 border: 1px solid transparent;
                 margin-bottom: 12px;
+                position: relative;
             }
             .alert-icon { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
             .alert-content { flex: 1; }
-            .alert-desc { color: inherit; opacity: 0.9; margin-top: 2px; font-size: 12px; }
-            .alert-link { color: inherit; text-decoration: underline; margin-left: 10px; font-weight: 600; cursor: pointer; }
+            .alert-desc { color: inherit; opacity: 0.75; margin-top: 4px; font-size: 11px; line-height: 1.4; }
+            .alert-link {
+                color: inherit;
+                text-decoration: none;
+                margin-left: 8px;
+                font-weight: 600;
+                cursor: pointer;
+                padding: 0;
+                border-radius: 4px;
+                display: inline;
+                transition: opacity 0.2s;
+                font-size: 13px;
+            }
+            .alert-link:hover {
+                opacity: 0.8;
+                text-decoration: none;
+            }
+            .alert-close {
+                background: none;
+                border: none;
+                color: inherit;
+                font-size: 20px;
+                line-height: 1;
+                cursor: pointer;
+                padding: 0;
+                width: 24px;
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                opacity: 0.6;
+                transition: opacity 0.2s;
+                flex-shrink: 0;
+            }
+            .alert-close:hover { opacity: 1; }
             .alert-info { background: #eef7fe; border-color: #dcebfb; color: #1c5b96; }
             .alert-success { background: #eafbf0; border-color: #d3f3dd; color: #15682e; }
             .alert-warning { background: #fff8e6; border-color: #fcebc2; color: #9c6e03; }
             .alert-error { background: #ffebeb; border-color: #fddddd; color: #c41e1e; }
             .alert-primary { background: #f9fafb; border-color: #e5e7eb; color: #374151; }
 
+            /* API Endpoint Items */
+            .api-endpoint-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 10px 12px;
+                background: rgba(0,0,0,0.02);
+                border-radius: 6px;
+                margin-bottom: 8px;
+                gap: 12px;
+            }
+            .api-endpoint-label {
+                font-size: 11px;
+                color: #86868b;
+                margin-bottom: 4px;
+                font-weight: 500;
+            }
+            .api-endpoint-value {
+                font-size: 11px;
+                background: rgba(0,0,0,0.05);
+                padding: 4px 8px;
+                border-radius: 4px;
+                display: inline-block;
+                word-break: break-all;
+                font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
+            }
+            .btn-copy {
+                background: none;
+                border: 1px solid #d2d2d7;
+                padding: 6px 10px;
+                border-radius: 6px;
+                cursor: pointer;
+                font-size: 14px;
+                transition: all 0.2s;
+                flex-shrink: 0;
+                line-height: 1;
+            }
+            .btn-copy:hover {
+                background: #f0f0f2;
+                border-color: #b8b8bb;
+            }
+            .btn-copy.copied {
+                background: #34c759;
+                border-color: #34c759;
+                color: white;
+            }
+
             /* Sections & Grids */
             .section { margin-bottom: 30px; }
             .section-title {
@@ -520,11 +601,47 @@
                 border: 1px solid #e1effe;
             }
 
+            .api-item {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+            }
+            .api-item-label {
+                font-size: 11px;
+                color: #6b6b6b;
+                min-width: 60px;
+                flex-shrink: 0;
+            }
+            .api-item-code {
+                flex: 1;
+                font-size: 11px;
+                background: rgba(0,0,0,0.04);
+                padding: 4px 8px;
+                border-radius: 4px;
+                font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
+                word-break: break-all;
+            }
+
             @media (max-width: 800px) {
                 .grid-3, .grid-env { grid-template-columns: 1fr; }
                 .header { flex-direction: column; align-items: flex-start; gap: 16px; }
                 .header-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
                 .header-actions .btn { justify-content: center; text-align: center; }
+
+                /* API 接口移动端上下布局 */
+                .api-item {
+                    flex-direction: column;
+                    align-items: stretch;
+                    gap: 4px;
+                }
+                .api-item-label {
+                    margin-bottom: 0;
+                }
+                .api-item-content {
+                    display: flex;
+                    gap: 8px;
+                }
+
                 .ep-table td { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
                 .ep-desc { margin-left: 0; }