增加Splitter

Web/Vue/CubeLib/README.md

@@ -22,15 +22,217 @@ yarn add joyd.web.vue.cubelib
 
 ## 使用
 
-```javascript
-import { CubeButton } from 'joyd.web.vue.cubelib'
+### 全局注册
 
-app.use(CubeButton)
+```javascript
+import { createApp } from 'vue'
+import App from './App.vue'
+import CubeLib from 'joyd.web.vue.cubelib'
+
+const app = createApp(App)
+app.use(CubeLib)
+app.mount('#app')
 ```
 
-## 文档
+### 按需导入
 
-查看 [在线文档](https://docs.joyd.com) 获取详细的使用说明和示例。
+```javascript
+import { CubeButton, CubeSplitter } from 'joyd.web.vue.cubelib'
+
+// 在组件中使用
+export default {
+  components: {
+    CubeButton,
+    CubeSplitter
+  }
+}
+```
+
+## 组件文档
+
+### CubeButton
+
+按钮组件，提供基本的按钮样式和交互功能。
+
+#### Props
+
+- `variant`: 按钮变体，可选值：`primary`, `secondary`, `outline`, `ghost`
+- `size`: 按钮尺寸，可选值：`sm`, `md`, `lg`
+- `disabled`: 是否禁用按钮
+
+#### Events
+
+- `click`: 点击按钮时触发
+
+### CubeSplitter
+
+可调整大小的分隔条组件，用于在布局中创建可调整大小的面板。
+
+#### Props
+
+- `direction`: 分隔条方向，可选值：`vertical` (垂直), `horizontal` (水平)
+- `position`: 分隔条位置，可选值：`left`, `right`, `top`, `bottom`
+- `initialSize`: 初始尺寸
+- `minSize`: 最小尺寸
+- `maxSize`: 最大尺寸
+
+#### Events
+
+- `resize`: 调整大小时触发
+- `resizeEnd`: 调整大小结束时触发
+- `collapse`: 折叠面板时触发
+- `expand`: 展开面板时触发
+
+#### 使用示例
+
+```vue
+<template>
+  <div class="container">
+    <div class="left-panel" :style="{ width: leftPanelWidth + 'px' }"></div>
+    <CubeSplitter
+      direction="vertical"
+      position="left"
+      :min-size="50"
+      :max-size="500"
+      :initial-size="200"
+      @resize="onLeftResize"
+      @resize-end="onLeftResizeEnd"
+      @collapse="onLeftCollapse"
+      @expand="onLeftExpand"
+    />
+    <div class="middle-panel"></div>
+    <CubeSplitter
+      direction="vertical"
+      position="right"
+      :min-size="0"
+      :max-size="500"
+      :initial-size="200"
+      @resize="onRightResize"
+      @resize-end="onRightResizeEnd"
+      @collapse="onRightCollapse"
+      @expand="onRightExpand"
+    />
+    <div class="right-panel" :style="{ width: rightPanelWidth + 'px' }"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const leftPanelWidth = ref(200)
+const rightPanelWidth = ref(200)
+
+// 从 localStorage 加载保存的尺寸
+onMounted(() => {
+  const savedLeftWidth = localStorage.getItem('leftPanelWidth')
+  const savedRightWidth = localStorage.getItem('rightPanelWidth')
+  
+  if (savedLeftWidth) {
+    leftPanelWidth.value = parseInt(savedLeftWidth)
+  }
+  
+  if (savedRightWidth) {
+    rightPanelWidth.value = parseInt(savedRightWidth)
+  }
+})
+
+// 左侧分隔条调整
+const onLeftResize = (newWidth) => {
+  leftPanelWidth.value = newWidth
+}
+
+const onLeftResizeEnd = (finalWidth) => {
+  // 只保存正常尺寸，不保存折叠状态
+  if (finalWidth > 50) {
+    localStorage.setItem('leftPanelWidth', finalWidth.toString())
+  }
+}
+
+const onLeftCollapse = (newSize) => {
+  leftPanelWidth.value = newSize
+}
+
+const onLeftExpand = (newSize) => {
+  leftPanelWidth.value = newSize
+}
+
+// 右侧分隔条调整
+const onRightResize = (newWidth) => {
+  rightPanelWidth.value = newWidth
+}
+
+const onRightResizeEnd = (finalWidth) => {
+  // 只保存正常尺寸，不保存折叠状态
+  if (finalWidth > 0) {
+    localStorage.setItem('rightPanelWidth', finalWidth.toString())
+  }
+}
+
+const onRightCollapse = (newSize) => {
+  rightPanelWidth.value = newSize
+}
+
+const onRightExpand = (newSize) => {
+  rightPanelWidth.value = newSize
+}
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-panel {
+  background-color: #f0f0f0;
+  min-width: 50px;
+}
+
+.middle-panel {
+  flex: 1;
+  background-color: #ffffff;
+}
+
+.right-panel {
+  background-color: #f0f0f0;
+  min-width: 0;
+  border-left: 1px solid #e0e0e0;
+}
+</style>
+```
+
+#### CSS 变量
+
+CubeSplitter 组件支持通过 CSS 变量进行定制：
+
+```css
+:root {
+  --cube-splitter-color: #e0e0e0;
+  --cube-splitter-hover-color: #667eea;
+  --cube-splitter-active-color: #5568d3;
+  --cube-splitter-handle-color: #fff;
+  --cube-splitter-handle-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  --cube-splitter-collapsing-color: #667eea;
+  --cube-splitter-collapsing-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
+  --cube-splitter-transition-speed: 0.3s;
+}
+```
+
+## 常见问题解答
+
+### Q: 如何保存分隔条的位置？
+
+A: 可以使用 `@resize-end` 事件来保存最终的尺寸到 localStorage 或其他存储中，然后在组件挂载时从存储中加载。
+
+### Q: 如何在最小尺寸和当前尺寸之间切换？
+
+A: 单击分隔条的句柄即可在最小尺寸和当前尺寸之间切换。
+
+### Q: 为什么右侧分隔条的拖拽方向与左侧不同？
+
+A: CubeSplitter 组件统一了拖拽方向逻辑：向左/上拖动减小尺寸，向右/下拖动增大尺寸，无论分隔条位置是左还是右。
 
 ## 贡献