物品规则ui优化

apps/frontend/src/styles/main.css

@@ -2496,89 +2496,120 @@ select {
   width: 100%;
 }
 
-/* 物品规则：左侧编辑表单 + 右侧可滚动列表 */
+/* 物品规则：3:7 比例响应式双栏 (左侧 30% + 右侧 70%) */
 .product-rules-layout {
   display: flex;
   gap: 16px;
   align-items: flex-start;
+  width: 100%;
 }
 
 .product-rules-form-card {
-  width: 560px;
-  flex-shrink: 0;
+  flex: 0 0 calc(30% - 8px);
+  width: calc(30% - 8px);
+  min-width: 360px;
+  border-radius: 8px;
 }
 
-/* 左侧表单一屏展示，不出现滚动条 */
+/* 左侧表单彻底消除滚动条，紧凑舒适排版 */
 .product-rules-form-card .ant-card-body {
+  padding: 12px 14px;
   overflow: visible;
 }
 
-.product-rules-form-card .worker-rule-form .ant-form-item {
-  margin-bottom: 14px;
+.worker-rule-form-30 .rule-form-grid-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 10px;
 }
 
-.product-rules-form-card .worker-rule-form .ant-form-item-label {
-  padding-bottom: 2px;
+.worker-rule-form-30 .rule-form-grid-2col .span-2 {
+  grid-column: span 2;
 }
 
-.product-rules-form-card .worker-rule-form .ant-input-textarea textarea {
-  min-height: 56px !important;
+.worker-rule-form-30 .ant-form-item {
+  margin-bottom: 7px;
+}
+
+.worker-rule-form-30 .ant-form-item-label {
+  padding-bottom: 1px;
+}
+
+.worker-rule-form-30 .ant-form-item-label > label {
+  font-size: 12px;
+  color: #374151;
+  font-weight: 500;
+}
+
+.worker-rule-form-30 .form-switches-strip {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  background: #f9fafb;
+  padding: 5px 10px;
+  border-radius: 6px;
+  margin-top: 3px;
+  margin-bottom: 7px;
+}
+
+.worker-rule-form-30 .form-switches-strip .ant-form-item {
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.worker-rule-form-30 .sharing-box-inline {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  background: #f8fafc;
+  border: 1px dashed #cbd5e1;
+  padding: 6px 8px;
+  border-radius: 6px;
+  margin-bottom: 7px;
+}
+
+.worker-rule-form-30 .sharing-box-inline .ant-form-item {
+  margin-bottom: 0;
 }
 
 .product-rules-list-card {
-  flex: 1;
+  flex: 0 0 calc(70% - 8px);
+  width: calc(70% - 8px);
   min-width: 0;
-}
-
-.product-rules-list-heading {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  min-width: 0;
-}
-
-.product-rules-category-tabs {
-  min-width: 0;
-  transform: translateY(-6px);
-}
-
-.product-rules-category-tabs .ant-tabs-nav {
-  margin: 0;
-}
-
-.product-rules-category-tabs .ant-tabs-content-holder {
-  display: none;
+  border-radius: 8px;
 }
 
 .product-rules-list-card .ant-card-body {
-  max-height: calc(100vh - 150px);
-  overflow-y: auto;
+  padding: 12px 16px;
 }
 
-.product-rules-list-card .ant-table-wrapper {
-  max-height: calc(100vh - 230px);
+.product-rules-category-tabs-bar {
+  margin-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.product-rules-category-tabs-bar .ant-tabs-nav {
+  margin: 0;
 }
 
 .product-rule-row-active > td {
   background: #e6f4ff !important;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 1080px) {
   .product-rules-layout {
     flex-direction: column;
   }
 
-  .product-rules-form-card {
+  .product-rules-form-card,
+  .product-rules-list-card {
+    flex: 1 1 100%;
     width: 100%;
   }
 }
 
-.worker-rule-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 0 14px;
-}
-
 @media (max-width: 720px) {
   .worker-page-head {
     align-items: stretch;