npmapps 1.0.25 → 1.0.27

package/app/src/components/Splitter/README.md

@@ -0,0 +1,144 @@
+# Splitter 分隔面板组件
+
+一个基于Vue2的可拖拽分隔面板组件，支持水平和垂直两种布局方式，可以灵活调整面板大小。
+
+## 特性
+
+- 支持水平和垂直两种布局方式
+- 可拖拽调整面板大小
+- 支持设置最小/最大尺寸限制
+- 支持百分比和像素两种尺寸单位
+- 支持多面板分隔
+- 响应式设计，自动适应容器大小
+
+## 安装
+
+组件位于 `src/components/Splitter` 目录下，直接复制到你的项目中即可使用。
+
+## 基础用法
+
+```vue
+<template>
+  <Splitter>
+    <template #panel-1>
+      <div>左侧面板</div>
+    </template>
+    <template #panel-2>
+      <div>右侧面板</div>
+    </template>
+  </Splitter>
+</template>
+
+<script>
+import Splitter from '@/components/Splitter'
+
+export default {
+  components: {
+    Splitter
+  }
+}
+</script>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| layout | 布局方向，可选值：'horizontal'\|'vertical' | string | 'horizontal' |
+| panels | 面板配置数组 | array | `[{ size: '50%', min: '10%', max: '90%' }, { size: '50%', min: '10%', max: '90%' }]` |
+
+### Panel 配置项
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| size | 面板尺寸，支持百分比或像素值 | string\|number | '50%' |
+| min | 最小尺寸限制 | string\|number | '0%' |
+| max | 最大尺寸限制 | string\|number | '100%' |
+
+### Events
+
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| resize | 拖拽调整大小时触发 | (sizes: string[]) 当前所有面板的尺寸数组 |
+| resizeEnd | 拖拽结束时触发 | (sizes: string[]) 当前所有面板的尺寸数组 |
+
+### Slots
+
+| 插槽名称 | 说明 |
+| --- | --- |
+| panel-{n} | 面板内容插槽，n 从 1 开始，对应面板的顺序 |
+
+## 示例
+
+### 垂直布局
+
+```vue
+<template>
+  <Splitter layout="vertical" :panels="[
+    { size: '30%', min: '20%', max: '50%' },
+    { size: '70%', min: '50%', max: '80%' }
+  ]">
+    <template #panel-1>
+      <div>上部面板</div>
+    </template>
+    <template #panel-2>
+      <div>下部面板</div>
+    </template>
+  </Splitter>
+</template>
+```
+
+### 多面板分隔
+
+```vue
+<template>
+  <Splitter :panels="[
+    { size: '200px', min: '150px', max: '300px' },
+    { size: '50%', min: '30%', max: '60%' },
+    { size: '30%', min: '20%', max: '40%' }
+  ]">
+    <template #panel-1>
+      <div>左侧面板</div>
+    </template>
+    <template #panel-2>
+      <div>中间面板</div>
+    </template>
+    <template #panel-3>
+      <div>右侧面板</div>
+    </template>
+  </Splitter>
+</template>
+```
+
+## 注意事项
+
+1. 容器必须设置高度，组件默认占满容器的宽度和高度
+2. 面板尺寸支持百分比和像素值，建议使用百分比以获得更好的响应式效果
+3. 最小和最大尺寸限制也支持百分比和像素值
+4. 垂直布局时，拖拽条显示在面板底部；水平布局时，拖拽条显示在面板右侧
+
+## 样式定制
+
+组件使用 scoped CSS，主要的样式类名：
+
+- `.splitter`: 容器
+- `.splitter-vertical`: 垂直布局
+- `.splitter-horizontal`: 水平布局
+- `.splitter-panel`: 面板
+- `.splitter-trigger`: 拖拽条
+- `.splitter-trigger-bar`: 拖拽条中间的线条
+
+你可以通过覆盖这些类名来自定义样式：
+
+```css
+/* 自定义样式示例 */
+.splitter-trigger:hover {
+  background-color: #e6e6e6;
+}
+
+.splitter-trigger-bar {
+  background-color: #1890ff;
+}
+```

package/app/src/components/Splitter/example.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="example-container">
+    <PageHeader title="Splitter 分隔面板" description="可拖拽调整大小的分栏布局组件，支持水平/垂直两种布局，可配置多个面板及各面板的最小/最大尺寸限制" usage="&lt;Splitter :layout=&quot;'horizontal'&quot; :panels=&quot;[{ size: '200px', min: '150px' }]&quot;&gt; layout 控制方向（horizontal/vertical），panels 数组定义各面板尺寸限制" />
+
+    <h3>基础分隔面板</h3>
+    <div class="demo-box">
+      <Splitter>
+        <template #panel-1>
+          <div class="panel-content">Panel 1</div>
+        </template>
+        <template #panel-2>
+          <div class="panel-content">Panel 2</div>
+        </template>
+      </Splitter>
+    </div>
+
+    <h3>垂直分隔面板</h3>
+    <div class="demo-box">
+      <Splitter layout="vertical" :panels="[
+        { size: '30%', min: '20%', max: '50%' },
+        { size: '70%', min: '50%', max: '80%' }
+      ]">
+        <template #panel-1>
+          <div class="panel-content">Top Panel</div>
+        </template>
+        <template #panel-2>
+          <div class="panel-content">Bottom Panel</div>
+        </template>
+      </Splitter>
+    </div>
+
+    <h3>多面板分隔</h3>
+    <div class="demo-box">
+      <Splitter :panels="[
+        { size: '200px', min: '150px', max: '300px' },
+        { size: '50%', min: '30%', max: '60%' },
+        { size: '30%', min: '20%', max: '40%' }
+      ]">
+        <template #panel-1>
+          <div class="panel-content">Left</div>
+        </template>
+        <template #panel-2>
+          <div class="panel-content">Center</div>
+        </template>
+        <template #panel-3>
+          <div class="panel-content">Right</div>
+        </template>
+      </Splitter>
+    </div>
+  </div>
+</template>
+
+<script>
+import Splitter from './index.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+
+export default {
+  name: 'SplitterExample',
+  components: {
+    Splitter,
+    PageHeader
+  }
+}
+</script>
+
+<style scoped>
+.example-container {
+  padding: 20px;
+}
+
+.demo-box {
+  margin: 20px 0;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  height: 300px;
+}
+
+.panel-content {
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fafafa;
+  color: #666;
+  font-size: 16px;
+}
+</style>

package/app/src/components/Splitter/index.vue

@@ -0,0 +1,203 @@
+<template>
+  <div
+    class="splitter"
+    :class="{
+      'splitter-vertical': layout === 'vertical',
+      'splitter-horizontal': layout === 'horizontal'
+    }"
+  >
+    <div
+      v-for="(panel, index) in panels"
+      :key="index"
+      class="splitter-panel"
+      :style="getPanelStyle(index)"
+    >
+      <slot :name="`panel-${index + 1}`"></slot>
+      <div
+        v-if="index < panels.length - 1"
+        class="splitter-trigger"
+        :class="{
+          'splitter-trigger-vertical': layout === 'vertical',
+          'splitter-trigger-horizontal': layout === 'horizontal'
+        }"
+        @mousedown="handleMouseDown($event, index)"
+      >
+        <div class="splitter-trigger-bar"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Splitter',
+  props: {
+    layout: {
+      type: String,
+      default: 'horizontal',
+      validator: value => ['horizontal', 'vertical'].includes(value)
+    },
+    panels: {
+      type: Array,
+      default: () => [
+        { size: '50%', min: '10%', max: '90%' },
+        { size: '50%', min: '10%', max: '90%' }
+      ],
+      validator: value => value.length >= 2
+    }
+  },
+  data() {
+    return {
+      sizes: [],
+      isDragging: false,
+      startPosition: 0,
+      currentPanelIndex: -1
+    }
+  },
+  created() {
+    this.initializeSizes()
+  },
+  methods: {
+    initializeSizes() {
+      this.sizes = this.panels.map(panel => {
+        const size = panel.size || '50%'
+        return size.toString().includes('%') ? size : `${size}px`
+      })
+    },
+    getPanelStyle(index) {
+      const size = this.sizes[index]
+      return {
+        [this.layout === 'horizontal' ? 'width' : 'height']: size,
+        [this.layout === 'horizontal' ? 'height' : 'width']: '100%'
+      }
+    },
+    handleMouseDown(event, index) {
+      this.isDragging = true
+      this.currentPanelIndex = index
+      this.startPosition = this.layout === 'horizontal' ? event.clientX : event.clientY
+
+      document.addEventListener('mousemove', this.handleMouseMove)
+      document.addEventListener('mouseup', this.handleMouseUp)
+      
+      // 防止文本选中
+      event.preventDefault()
+    },
+    handleMouseMove(event) {
+      if (!this.isDragging) return
+
+      const currentPosition = this.layout === 'horizontal' ? event.clientX : event.clientY
+      const delta = currentPosition - this.startPosition
+      
+      const containerSize = this.layout === 'horizontal' 
+        ? this.$el.offsetWidth 
+        : this.$el.offsetHeight
+
+      const panel1 = this.panels[this.currentPanelIndex]
+      const panel2 = this.panels[this.currentPanelIndex + 1]
+      
+      let size1 = this.parseSize(this.sizes[this.currentPanelIndex], containerSize)
+      let size2 = this.parseSize(this.sizes[this.currentPanelIndex + 1], containerSize)
+
+      size1 += delta
+      size2 -= delta
+
+      // 检查最小/最大限制
+      const min1 = this.parseSize(panel1.min || '0%', containerSize)
+      const max1 = this.parseSize(panel1.max || '100%', containerSize)
+      const min2 = this.parseSize(panel2.min || '0%', containerSize)
+      const max2 = this.parseSize(panel2.max || '100%', containerSize)
+
+      if (size1 < min1 || size1 > max1 || size2 < min2 || size2 > max2) return
+
+      this.sizes.splice(this.currentPanelIndex, 2, 
+        `${(size1 / containerSize * 100).toFixed(2)}%`,
+        `${(size2 / containerSize * 100).toFixed(2)}%`
+      )
+
+      this.startPosition = currentPosition
+      this.$emit('resize', this.sizes)
+    },
+    handleMouseUp() {
+      this.isDragging = false
+      this.currentPanelIndex = -1
+      
+      document.removeEventListener('mousemove', this.handleMouseMove)
+      document.removeEventListener('mouseup', this.handleMouseUp)
+
+      this.$emit('resizeEnd', this.sizes)
+    },
+    parseSize(size, containerSize) {
+      if (typeof size === 'number') return size
+      if (size.endsWith('%')) {
+        return (parseFloat(size) / 100) * containerSize
+      }
+      return parseFloat(size)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.splitter {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.splitter-vertical {
+  flex-direction: column;
+}
+
+.splitter-horizontal {
+  flex-direction: row;
+}
+
+.splitter-panel {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.splitter-trigger {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+  transition: background-color 0.2s;
+}
+
+.splitter-trigger:hover {
+  background-color: #f0f0f0;
+}
+
+.splitter-trigger-horizontal {
+  top: 0;
+  right: -6px;
+  width: 12px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.splitter-trigger-vertical {
+  left: 0;
+  bottom: -6px;
+  width: 100%;
+  height: 12px;
+  cursor: row-resize;
+}
+
+.splitter-trigger-bar {
+  background-color: #d9d9d9;
+}
+
+.splitter-trigger-horizontal .splitter-trigger-bar {
+  width: 2px;
+  height: 100%;
+}
+
+.splitter-trigger-vertical .splitter-trigger-bar {
+  width: 100%;
+  height: 2px;
+}
+</style>