npmapps 1.1.6 → 1.3.1

package/app/wujie-wk/wujie-vue2-child/src/components/Splitter/README.md

@@ -1,144 +0,0 @@
-# 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/wujie-wk/wujie-vue2-child/src/components/Splitter/example.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="example-container">
-    <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'
-
-export default {
-  name: 'SplitterExample',
-  components: {
-    Splitter
-  }
-}
-</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/wujie-wk/wujie-vue2-child/src/components/Splitter/index.vue

@@ -1,203 +0,0 @@
-<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>