whistle.mock-plugins 1.1.1-dev.8 → 1.1.1

package/ui/src/styles/interface-management.css

@@ -17,27 +17,29 @@
 
 .interface-management-container {
   padding: 24px;
-  background: #fff;
-  border-radius: var(--border-radius);
-  box-shadow: var(--card-shadow);
+  background: #f5f7fa;
 }
 
-.page-header {
+/* 顶部功能区域 */
+.interface-header-card {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.interface-management-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 32px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--border-color);
+  padding: 8px 0;
 }
 
-.interface-management-header {
+.feature-selector-container {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 32px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--border-color);
+  flex-wrap: wrap;
+  gap: 12px;
 }
 
 .feature-selector {
@@ -60,14 +62,288 @@
   color: var(--text-secondary);
 }
 
+.interface-actions {
+  display: flex;
+  align-items: center;
+}
+
+.add-interface-button {
+  background: linear-gradient(to right, var(--primary-color), var(--primary-hover));
+  border: none;
+  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.25);
+  transition: all var(--transition-time);
+}
+
+.add-interface-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(24, 144, 255, 0.4);
+}
+
+/* 分组筛选区域 */
+.filter-card {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.filter-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.filter-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.group-tags-container {
+  margin-bottom: 12px;
+  max-height: 120px;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.group-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.group-tag {
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s;
+  padding: 6px 12px;
+  font-size: 13px;
+}
+
+.group-tag:hover {
+  transform: translateY(-2px);
+}
+
+.group-tag.active {
+  font-weight: 600;
+}
+
+.group-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  justify-content: flex-end;
+}
+
+.empty-groups {
+  color: #999;
+  font-style: italic;
+  padding: 8px 0;
+}
+
+/* 接口列表区域 */
+.list-header-card {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.list-header-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.feature-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.feature-info .label {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.feature-info .value {
+  font-weight: 600;
+  color: var(--font-color);
+}
+
+.group-badge {
+  margin-left: 12px;
+}
+
+.interface-stats {
+  font-size: 13px;
+}
+
+.selected-count {
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+.batch-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.list-container-card {
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  margin-bottom: 24px;
+}
+
 .interface-list-container {
-  margin-top: 24px;
+  padding: 0;
+}
+
+/* 表格样式增强 */
+.interface-table th {
+  background-color: #f5f7fa !important;
+  font-weight: 600;
+  padding: 12px 16px !important;
+  color: #333;
+}
+
+.interface-table td {
+  padding: 12px 16px !important;
+}
+
+/* 卡片视图样式 */
+.interface-card-view {
+  padding-bottom: 20px;
+}
+
+.interface-card {
+  border-radius: 8px;
+  transition: all 0.3s;
+  height: 100%;
 }
 
-.action-buttons {
+.interface-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.interface-card.inactive {
+  background-color: #f5f5f5;
+  border: 1px solid #e8e8e8;
+  opacity: 0.8;
+}
+
+.interface-card-header {
   display: flex;
-  justify-content: flex-start;
-  gap: 12px;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+  position: relative;
+}
+
+.interface-card-title {
+  font-weight: 600;
+  font-size: 15px;
+  margin-right: 40px;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.interface-card-switch {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.interface-card-group {
+  cursor: pointer;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  align-self: flex-start;
+}
+
+.url-pattern-container {
+  background: #f5f7fa;
+  padding: 8px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.interface-card .url-pattern {
+  font-family: monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: #333;
+}
+
+.interface-card-info {
+  margin-bottom: 12px;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.info-label {
+  font-size: 12px;
+  color: #666;
+}
+
+.status-badge {
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+}
+
+.status-success {
+  background: #f6ffed;
+  border: 1px solid #b7eb8f;
+  color: #52c41a;
+}
+
+.status-warning {
+  background: #fff7e6;
+  border: 1px solid #ffd591;
+  color: #faad14;
+}
+
+.status-error {
+  background: #fff1f0;
+  border: 1px solid #ffa39e;
+  color: #f5222d;
+}
+
+.interface-card-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 12px;
+  gap: 8px;
+}
+
+.card-pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  padding: 0 16px 16px;
 }
 
 .test-interface-container {