插件UI

plugins/addon/theme_configurator/template/admin/theme.css

@@ -1,22 +1,26 @@
 .theme-card {
-  margin: 20px;
-}
-
-.theme-card__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   margin-bottom: 20px;
 }
 
-.theme-card__header h3 {
-  margin: 0;
-  font-size: 20px;
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-gap: 16px;
 }
 
-.theme-desc {
-  margin: 4px 0 0;
+.form-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-item--full {
+  grid-column: 1 / -1;
+}
+
+.form-item label {
+  font-size: 13px;
   color: #6b7280;
+  margin-bottom: 6px;
 }
 
 .theme-textarea textarea {
@@ -24,11 +28,51 @@
 }
 
 .theme-tip {
-  margin-top: 12px;
-  color: #9ca3af;
+  margin-top: 0;
+  margin-bottom: 12px;
+  color: #94a3b8;
   font-size: 12px;
 }
 
+.banner-item {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  background: #f9fafb;
+}
+
+.banner-item__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.banner-item__header h4 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.empty-tip {
+  padding: 16px;
+  border: 1px dashed #cbd5f5;
+  border-radius: 6px;
+  color: #6b7280;
+  margin-bottom: 16px;
+  background: #f8fafc;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
 .ml-10 {
   margin-left: 10px;
 }