插件UI

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

@@ -1,68 +1,43 @@
 /* ============================================
-   黑果云模板控制器 - 顶部Tab样式
+   黑果云模板控制器 - 原生版本样式
-   设计风格: 现代化标签页 + 卡片式 + Ant Design配色
+   无框架依赖的纯CSS样式
    ============================================ */
 
 :root {
-  /* Ant Design 配色 */
   --primary: #1890ff;
   --primary-hover: #40a9ff;
-  --primary-active: #096dd9;
-  --primary-light: #e6f7ff;
-
-  /* 背景色 */
   --bg-body: #f0f2f5;
   --bg-container: #ffffff;
-  --bg-header: #ffffff;
-
-  /* 文字色 */
   --text-primary: #262626;
   --text-secondary: #595959;
   --text-tertiary: #8c8c8c;
-
-  /* 边框色 */
   --border: #d9d9d9;
-  --border-light: #e8e8f0;
+  --border-light: #e8e8e8;
   --border-lighter: #f0f0f0;
-
-  /* 间距 */
-  --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
-
-  /* 阴影 */
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
-[v-cloak] {
+* {
-  display: none;
+  box-sizing: border-box;
 }
 
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
   font-size: 14px;
   color: var(--text-primary);
   background: var(--bg-body);
 }
 
-/* ============================================
-   主容器
-   ============================================ */
-
 .admin-container {
-  min-height: 100vh;
-  background: var(--bg-body);
-  padding: var(--spacing-lg);
   max-width: 1400px;
   margin: 0 auto;
+  padding: var(--spacing-lg);
 }
 
-/* ============================================
+/* 顶部栏 */
-   顶部工具栏
-   ============================================ */
-
 .admin-header {
   background: var(--bg-container);
   border-radius: 8px 8px 0 0;
@@ -71,7 +46,6 @@ body {
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--border-lighter);
-  margin-bottom: 0;
 }
 
 .admin-logo {
@@ -80,17 +54,13 @@ body {
   gap: 12px;
   font-size: 18px;
   font-weight: 600;
-  color: var(--text-primary);
 }
 
 .admin-logo svg {
   color: var(--primary);
 }
 
-/* ============================================
+/* Tab导航 */
-   Tab导航
-   ============================================ */
-
 .admin-tabs {
   background: var(--bg-container);
   border-bottom: 1px solid var(--border-lighter);
@@ -100,18 +70,16 @@ body {
 }
 
 .tab-item {
-  position: relative;
   padding: 14px 20px;
   color: var(--text-secondary);
   text-decoration: none;
   cursor: pointer;
-  transition: all 0.3s;
   border-bottom: 2px solid transparent;
-  font-size: 14px;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 8px;
+  transition: all 0.3s;
 }
 
 .tab-item svg {
@@ -124,10 +92,6 @@ body {
   color: var(--primary);
 }
 
-.tab-item:hover svg {
-  opacity: 1;
-}
-
 .tab-item.active {
   color: var(--primary);
   border-bottom-color: var(--primary);
@@ -137,15 +101,12 @@ body {
   opacity: 1;
 }
 
-/* ============================================
+/* 主内容 */
-   主内容区
-   ============================================ */
-
 .admin-main {
   background: var(--bg-container);
   border-radius: 0 0 8px 8px;
   padding: var(--spacing-lg);
-  min-height: 600px;
+  min-height: 500px;
 }
 
 .config-section {
@@ -156,12 +117,8 @@ body {
   display: block;
 }
 
-/* ============================================
+/* 卡片 */
-   区块卡片
-   ============================================ */
-
 .section-card {
-  background: var(--bg-container);
   border: 1px solid var(--border-lighter);
   border-radius: 8px;
   margin-bottom: 20px;
@@ -178,11 +135,10 @@ body {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
-  color: var(--text-primary);
 }
 
 .section-desc {
-  margin: 4px 0 0 0;
+  margin: 4px 0 0;
   font-size: 13px;
   color: var(--text-tertiary);
 }
@@ -191,27 +147,47 @@ body {
   padding: var(--spacing-lg);
 }
 
-/* ============================================
+/* 表单 */
-   表单样式
+.form-fields {
-   ============================================ */
-
-.form-fields,
-.form-grid {
   display: grid;
-  grid-template-columns: 1fr;
   gap: var(--spacing-lg);
 }
 
 .form-item {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 .form-item label {
   display: block;
   margin-bottom: 8px;
-  font-size: 14px;
   font-weight: 500;
-  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.form-control {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: all 0.3s;
+}
+
+.form-control:hover {
+  border-color: var(--primary);
+}
+
+.form-control:focus {
+  border-color: var(--primary);
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+}
+
+textarea.form-control {
+  resize: vertical;
+  min-height: 80px;
+  line-height: 1.6;
 }
 
 .form-hint {
@@ -220,24 +196,18 @@ body {
   color: var(--text-tertiary);
 }
 
-/* ============================================
+/* 上传控件 */
-   上传控件
-   ============================================ */
-
 .upload-control {
   display: flex;
-  gap: var(--spacing-sm);
+  gap: 8px;
   align-items: center;
 }
 
-.upload-control .t-input {
+.upload-control .form-control {
   flex: 1;
 }
 
-/* ============================================
+/* 按钮 */
-   按钮样式
-   ============================================ */
-
 .btn {
   display: inline-flex;
   align-items: center;
@@ -248,10 +218,15 @@ body {
   font-size: 14px;
   font-weight: 500;
   border-radius: 4px;
-  border: 1px solid transparent;
+  border: 1px solid;
   cursor: pointer;
   transition: all 0.3s;
   background: transparent;
+  font-family: inherit;
+}
+
+.btn:hover:not(:disabled) {
+  opacity: 0.8;
 }
 
 .btn:disabled {
@@ -265,17 +240,18 @@ body {
 
 .btn-primary {
   background: var(--primary);
-  color: #ffffff;
+  color: white;
   border-color: var(--primary);
 }
 
 .btn-primary:hover:not(:disabled) {
   background: var(--primary-hover);
   border-color: var(--primary-hover);
+  opacity: 1;
 }
 
 .btn-secondary {
-  background: var(--bg-container);
+  background: white;
   color: var(--text-primary);
   border-color: var(--border);
 }
@@ -283,18 +259,7 @@ body {
 .btn-secondary:hover:not(:disabled) {
   color: var(--primary);
   border-color: var(--primary);
-}
+  opacity: 1;
-
-.btn-danger {
-  background: var(--bg-container);
-  color: #ff4d4f;
-  border-color: var(--border);
-}
-
-.btn-danger:hover:not(:disabled) {
-  color: #ffffff;
-  background: #ff4d4f;
-  border-color: #ff4d4f;
 }
 
 .btn-lg {
@@ -303,12 +268,6 @@ body {
   font-size: 15px;
 }
 
-.btn-sm {
-  height: 28px;
-  padding: 0 12px;
-  font-size: 13px;
-}
-
 .btn-icon {
   width: 28px;
   height: 28px;
@@ -316,15 +275,8 @@ body {
   border: none;
   background: transparent;
   color: var(--text-secondary);
-  cursor: pointer;
+  font-size: 20px;
-  border-radius: 4px;
+  line-height: 1;
-  font-size: 16px;
-  transition: all 0.3s;
-}
-
-.btn-icon:hover {
-  background: var(--primary-light);
-  color: var(--primary);
 }
 
 .btn-icon-danger:hover {
@@ -332,202 +284,41 @@ body {
   color: #ff4d4f;
 }
 
-/* ============================================
+/* 配置项 */
-   配置项列表
-   ============================================ */
-
 .config-item {
   border: 1px solid var(--border-light);
   border-radius: 6px;
+  margin-bottom: 16px;
   overflow: hidden;
-  margin-bottom: var(--spacing-md);
 }
 
 .config-item__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px var(--spacing-md);
+  padding: 12px 16px;
   background: #fafafa;
   border-bottom: 1px solid var(--border-light);
 }
 
-.config-item__title,
 .config-item__header h4 {
   margin: 0;
   font-size: 14px;
   font-weight: 500;
-  color: var(--text-primary);
-}
-
-.config-item__actions {
-  display: flex;
-  gap: 4px;
 }
 
 .config-item__body {
-  padding: var(--spacing-md);
+  padding: 16px;
 }
 
-.banner-item {
+/* 响应式 */
-  border: 1px solid var(--border-light);
-  border-radius: 6px;
-  overflow: hidden;
-  margin-bottom: var(--spacing-md);
-}
-
-.banner-item__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px var(--spacing-md);
-  background: #fafafa;
-  border-bottom: 1px solid var(--border-light);
-}
-
-.banner-item__header h4 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-/* ============================================
-   空状态
-   ============================================ */
-
-.empty-state,
-.empty-tip {
-  padding: 40px 20px;
-  border: 2px dashed var(--border);
-  border-radius: 6px;
-  color: var(--text-tertiary);
-  background: #fafafa;
-  text-align: center;
-  font-size: 14px;
-  margin-bottom: var(--spacing-md);
-}
-
-/* ============================================
-   提示框
-   ============================================ */
-
-.alert,
-.alert-info {
-  padding: 12px 16px;
-  border-radius: 4px;
-  margin-bottom: var(--spacing-md);
-  font-size: 13px;
-  line-height: 1.6;
-  background: var(--primary-light);
-  border-left: 3px solid var(--primary);
-  color: var(--text-secondary);
-}
-
-.alert code {
-  padding: 2px 6px;
-  background: rgba(24, 144, 255, 0.1);
-  border-radius: 3px;
-  color: var(--primary);
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 12px;
-}
-
-/* ============================================
-   Switch开关
-   ============================================ */
-
-.form-switch {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px var(--spacing-md);
-  background: #fafafa;
-  border-radius: 6px;
-  border: 1px solid var(--border-light);
-}
-
-.form-switch label {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 400;
-}
-
-/* ============================================
-   JSON编辑器
-   ============================================ */
-
-.json-editor textarea {
-  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
-  font-size: 13px !important;
-  line-height: 1.6 !important;
-  padding: 16px !important;
-  background: #1e1e1e !important;
-  color: #d4d4d4 !important;
-  border: 1px solid #3c3c3c !important;
-  border-radius: 4px !important;
-  min-height: 400px;
-}
-
-/* ============================================
-   标题
-   ============================================ */
-
-.sub-title {
-  margin: 24px 0 16px;
-  padding-left: 12px;
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-primary);
-  border-left: 3px solid var(--primary);
-}
-
-.mt-10,
-.mt-20 {
-  margin-top: 16px;
-}
-
-.ml-10 {
-  margin-left: 12px;
-}
-
-/* ============================================
-   TDesign组件覆盖
-   ============================================ */
-
-.t-input,
-.t-textarea {
-  border-radius: 4px !important;
-}
-
-.t-input:hover,
-.t-textarea:hover {
-  border-color: var(--primary) !important;
-}
-
-.t-input:focus-within,
-.t-textarea:focus-within {
-  border-color: var(--primary) !important;
-  box-shadow: 0 0 0 2px var(--primary-light) !important;
-}
-
-.t-button--primary {
-  background: var(--primary) !important;
-  border-color: var(--primary) !important;
-}
-
-/* ============================================
-   响应式
-   ============================================ */
-
 @media (max-width: 768px) {
   .admin-container {
-    padding: var(--spacing-sm);
+    padding: 12px;
   }
 
   .admin-tabs {
     overflow-x: auto;
-    flex-wrap: nowrap;
   }
 
   .tab-item {