feat(发货管理): 优化发货单界面布局并新增功能

重构发货单界面布局，使用可拖拽面板组件提升用户体验。新增订单绑定、逻辑库区显示等功能，并调整页面样式。

- 使用DragResizePanel组件实现可拖拽分割布局
- 新增订单绑定、解绑和切换功能
- 在详情表格中添加逻辑库区、厂家和品质字段
- 优化左侧面板可折叠功能
- 调整页面样式和响应式布局

klp-ui/src/components/DragResizePanel/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="drag-resize-panel" :class="{ 'vertical': direction === 'vertical' }">
+    <div class="panel-a" :style="panelAstyle">
+      <slot name="panelA"></slot>
+    </div>
+    <div class="resizer" :class="{ 'vertical-resizer': direction === 'vertical' }" @mousedown="startResize"></div>
+    <div class="panel-b" :style="panelBstyle">
+      <slot name="panelB"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DragResizePanel',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: function(value) {
+        return ['horizontal', 'vertical'].includes(value);
+      }
+    },
+    // 设置panelA的初始大小，最大值和最小值，默认值为300px，10000px，100px
+    // panelB占据剩余空间
+    initialSize: {
+      type: Number,
+      default: 300
+    },
+    minSize: {
+      type: Number,
+      default: 100
+    },
+    maxSize: {
+      type: Number,
+      default: 10000
+    }
+  },
+  data() {
+    return {
+      currentSize: this.initialSize,
+      isResizing: false,
+      startPosition: 0
+    };
+  },
+  computed: {
+    panelAstyle() {
+      if (this.direction === 'horizontal') {
+        return { width: this.currentSize + 'px' };
+      } else {
+        return { height: this.currentSize + 'px' };
+      }
+    },
+    panelBstyle() {
+      if (this.direction === 'horizontal') {
+        return { flex: 1 };
+      } else {
+        return { flex: 1 };
+      }
+    }
+  },
+  methods: {
+    startResize(e) {
+      e.preventDefault();
+      this.isResizing = true;
+      this.startPosition = this.direction === 'horizontal' ? e.clientX : e.clientY;
+      this.startSize = this.currentSize;
+      
+      document.addEventListener('mousemove', this.handleResize);
+      document.addEventListener('mouseup', this.stopResize);
+    },
+    handleResize(e) {
+      if (!this.isResizing) return;
+      
+      const delta = this.direction === 'horizontal' ? e.clientX - this.startPosition : e.clientY - this.startPosition;
+      const newSize = this.startSize + delta;
+      
+      if (newSize >= this.minSize && newSize <= this.maxSize) {
+        this.currentSize = newSize;
+      }
+    },
+    stopResize() {
+      this.isResizing = false;
+      document.removeEventListener('mousemove', this.handleResize);
+      document.removeEventListener('mouseup', this.stopResize);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.drag-resize-panel {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.drag-resize-panel.vertical {
+  flex-direction: column;
+}
+
+.panel-a {
+  position: relative;
+  overflow: hidden;
+}
+
+.panel-b {
+  position: relative;
+  overflow: auto;
+}
+
+.resizer {
+  width: 4px;
+  cursor: col-resize;
+  position: relative;
+  transition: background-color 0.3s;
+  height: 100%;
+}
+
+.resizer.vertical-resizer {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}
+
+.resizer:hover {
+  background-color: #409eff;
+}
+
+.resizer::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 40px;
+  width: 2px;
+  background-color: #c0c4cc;
+  border-radius: 1px;
+  transition: background-color 0.3s;
+}
+
+.resizer.vertical-resizer::before {
+  width: 40px;
+  height: 2px;
+}
+
+.resizer:hover::before {
+  background-color: #409eff;
+}
+
+.resizer:active {
+  background-color: #409eff;
+}
+
+.resizer:active::before {
+  background-color: #fff;
+}
+</style>