leisure-core 0.5.60 → 0.5.61

package/le-list-form/src/main.vue

@@ -6,49 +6,62 @@
     :label-width="labelWidth"
     class="le-form-container"
   >
-    <div class="form-grid" :style="gridStyle">
-      <el-form-item
-        v-for="(item, index) in filteredFormColumns"
-        :label="item.label"
-        :prop="item.prop"
-        :key="`form-item-${index}-${item.prop}`"
-        class="leisure-form-item-class"
-      >
-        <div
-          class="comContainerClass"
-          :class="{ 'radio-container': item.type === 'radio' }"
-        >
-          <component
-            :is="componentType(item.type)"
-            v-model="formPop[item.prop]"
-            v-bind="mergeProps(getComponentProps(item), item.attr || {})"
-            v-on="item.event"
-            class="compontClass"
-            :class="{ 'radio-group-class': item.type === 'radio' }"
-            :key="`component-${index}-${item.prop}-${item.type}`"
+    <div class="form-layout" :class="{ 'has-right-content': hasRightContent }">
+      <!-- 主窗体区域 - 保持原有结构 -->
+      <div class="form-main">
+        <div class="form-grid" :style="gridStyle">
+          <el-form-item
+            v-for="(item, index) in filteredFormColumns"
+            :label="item.label"
+            :prop="item.prop"
+            :key="`form-item-${index}-${item.prop}`"
+            class="leisure-form-item-class"
           >
-            <template v-if="item.type === 'radio'">
-              <el-radio
-                v-for="(option, radioIndex) in item.options"
-                :label="option.id"
-                :key="`radio-${index}-${radioIndex}`"
-                >{{ option.lable }}</el-radio
+            <div
+              class="comContainerClass"
+              :class="{ 'radio-container': item.type === 'radio' }"
+            >
+              <component
+                :is="componentType(item.type)"
+                v-model="formPop[item.prop]"
+                v-bind="mergeProps(getComponentProps(item), item.attr || {})"
+                v-on="item.event"
+                class="compontClass"
+                :class="{ 'radio-group-class': item.type === 'radio' }"
+                :key="`component-${index}-${item.prop}-${item.type}`"
               >
-            </template>
-            <template v-else-if="item.type === 'select'">
-              <le-select-option
-                :options="fieldOptions[item.prop]"
-                :label="item.kv.label"
-                :value="item.kv.key"
-                :keyNum="item.keyNum"
-                :key="`select-${index}-${item.prop}`"
-              />
-            </template>
-          </component>
-          <slot :name="item.prop"></slot>
+                <template v-if="item.type === 'radio'">
+                  <el-radio
+                    v-for="(option, radioIndex) in item.options"
+                    :label="option.id"
+                    :key="`radio-${index}-${radioIndex}`"
+                    >{{ option.lable }}</el-radio
+                  >
+                </template>
+                <template v-else-if="item.type === 'select'">
+                  <le-select-option
+                    :options="fieldOptions[item.prop]"
+                    :label="item.kv.label"
+                    :value="item.kv.key"
+                    :keyNum="item.keyNum"
+                    :key="`select-${index}-${item.prop}`"
+                  />
+                </template>
+              </component>
+              <slot :name="item.prop"></slot>
+            </div>
+          </el-form-item>
+        </div>
+      </div>
+
+      <!-- 右侧附件区域 - 新增 -->
+      <div class="form-sidebar" v-if="hasRightContent">
+        <div class="sidebar-content">
+          <slot name="sidebar"></slot>
         </div>
-      </el-form-item>
+      </div>
     </div>
+
     <div class="form-body-footer">
       <slot></slot>
     </div>
@@ -64,6 +77,7 @@
     </el-form-item>
   </el-form>
 </template>
+
 <script>
 import { EventBus } from "../../le-libs/js/event.js";
 export default {
@@ -85,7 +99,6 @@ export default {
       type: String,
       default: "100px",
     },
-
     fieldOptions: {
       type: Object,
       default: () => {},
@@ -97,14 +110,12 @@ export default {
     columnsPerRow: {
       type: Number,
       default: 1,
-      validator: (value) => value > 0 && value <= 4, // 限制最大4列，避免太拥挤
+      validator: (value) => value > 0 && value <= 4,
     },
-    // 新增属性：列间距
     columnGap: {
       type: String,
       default: "20px",
     },
-    // 新增属性：行间距
     rowGap: {
       type: String,
       default: "16px",
@@ -113,6 +124,11 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    // 新增属性：是否显示右侧边栏
+    showSidebar: {
+      type: Boolean,
+      default: false,
+    },
   },
   watch: {
     formData: {
@@ -136,13 +152,19 @@ export default {
   data() {
     return {
       formPop: {},
-      options: {}, //{field1:[{value:1,label:'选项1'},{value:2,label:'选项2'}]}
+      options: {},
     };
   },
   computed: {
     filteredFormColumns() {
       return this.formColumns.filter((item) => !item.hidden);
     },
+
+    // 判断是否有右侧内容
+    hasRightContent() {
+      return this.showSidebar || this.$slots["sidebar"];
+    },
+
     dynamicComponentMap() {
       const baseMap = {
         input: {
@@ -176,6 +198,7 @@ export default {
       };
       return { ...baseMap, ...this.externalComponentMap };
     },
+
     gridStyle() {
       return {
         "grid-template-columns": `repeat(${this.columnsPerRow}, 1fr)`,
@@ -203,7 +226,6 @@ export default {
     getComponentProps(item) {
       let type = item.type;
 
-      // 如果组件类型未定义，返回空对象
       if (!this.dynamicComponentMap[type]) {
         return {};
       }
@@ -251,25 +273,70 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
-le-form-container {
+.le-form-container {
   width: 100%;
 }
 
+.form-layout {
+  display: flex;
+  gap: 20px;
+  transition: all 0.3s ease;
+
+  // 有右侧内容时的布局
+  &.has-right-content {
+    .form-main {
+      width: 80%;
+    }
+    .form-sidebar {
+      width: 20%;
+    }
+  }
+
+  // 无右侧内容时的布局
+  &:not(.has-right-content) {
+    .form-main {
+      width: 100%;
+    }
+  }
+}
+
+.form-main {
+  transition: width 0.3s ease;
+}
+
+.form-sidebar {
+  transition: width 0.3s ease;
+
+  .sidebar-content {
+    background: #f8f9fa;
+    border-radius: 6px;
+    padding: 16px;
+    border: 1px solid #e9ecef;
+    min-height: 200px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+    // 可以在这里添加右侧内容的统一样式
+    h4 {
+      margin: 0 0 12px 0;
+      color: #2c3e50;
+      font-size: 14px;
+      font-weight: 600;
+    }
+  }
+}
+
 .form-grid {
   display: grid;
 
-  // 响应式处理：在小屏幕上自动调整为1列
   @media (max-width: 768px) {
     grid-template-columns: 1fr !important;
   }
 }
 
 .leisure-form-item-class {
-  margin-bottom: 0; // 使用grid的gap控制间距，不需要margin-bottom
-}
-
-.leisure-form-item-class {
+  margin-bottom: 0;
 }
 
 .form-body-footer {
@@ -280,11 +347,11 @@ le-form-container {
   display: flex;
   display: -webkit-flex;
   line-height: inherit;
-  justify-content: center; /* 水平居中 */
+  justify-content: center;
 
   &.radio-container {
     align-items: center;
-    min-height: 40px; /* 确保有足够的高度 */
+    min-height: 40px;
   }
 
   .compontClass {
@@ -295,7 +362,6 @@ le-form-container {
       align-items: center;
       flex-wrap: wrap;
       line-height: normal;
-      // background-color: rebeccapurple;
     }
   }
 }
@@ -304,4 +370,29 @@ le-form-container {
   margin-top: 20px;
   text-align: right;
 }
+
+// 响应式处理
+@media (max-width: 1200px) {
+  .form-layout.has-right-content {
+    flex-direction: column;
+
+    .form-main,
+    .form-sidebar {
+      width: 100%;
+    }
+
+    .form-sidebar {
+      margin-top: 20px;
+      order: 2; // 在移动端让侧边栏显示在下方
+    }
+  }
+}
+
+// 小屏幕优化
+@media (max-width: 768px) {
+  .form-sidebar .sidebar-content {
+    padding: 12px;
+    min-height: 150px;
+  }
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-core",
-  "version": "0.5.60",
+  "version": "0.5.61",
   "description": "leisure-core是京心数据基于vue2.x开发的一套后台管理系统桌面端组件库，封装了大量实用的UI控件模板,非常方便开发者快速搭建前端应用",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",