@ebiz/designer-components 0.0.18 → 0.0.19

package/src/views/TextareaDemo.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="textarea-demo">
+    <h1>Textarea 多行文本框</h1>
+    
+    <section>
+      <h2>基础多行文本框</h2>
+      <p>用于多行文本的输入。</p>
+      <div class="demo-item">
+        <ebiz-textarea placeholder="请输入多行文本"></ebiz-textarea>
+      </div>
+    </section>
+    
+    <section>
+      <h2>限制最大字符数</h2>
+      <p>限制输入的最大字符数并展示字符数。</p>
+      <div class="demo-item">
+        <ebiz-textarea placeholder="请输入" :max-length="20" :max-character="true"></ebiz-textarea>
+      </div>
+    </section>
+    
+    <section>
+      <h2>自动调整高度</h2>
+      <p>根据内容自动调整输入框的高度。</p>
+      <div class="demo-item">
+        <ebiz-textarea placeholder="请输入" :autosize="true"></ebiz-textarea>
+      </div>
+    </section>
+    
+    <section>
+      <h2>不同状态的多行文本框</h2>
+      <p>支持只读、禁用和不同的状态样式。</p>
+      <div class="demo-item">
+        <p>默认状态：</p>
+        <ebiz-textarea placeholder="默认状态" tips="这是默认提示文本"></ebiz-textarea>
+      </div>
+      <div class="demo-item">
+        <p>成功状态：</p>
+        <ebiz-textarea placeholder="成功状态" status="success" tips="校验通过文本提示"></ebiz-textarea>
+      </div>
+      <div class="demo-item">
+        <p>警告状态：</p>
+        <ebiz-textarea placeholder="警告状态" status="warning" tips="校验存在警告文本提示"></ebiz-textarea>
+      </div>
+      <div class="demo-item">
+        <p>错误状态：</p>
+        <ebiz-textarea placeholder="错误状态" status="error" tips="校验不通过文本提示"></ebiz-textarea>
+      </div>
+      <div class="demo-item">
+        <p>只读状态：</p>
+        <ebiz-textarea placeholder="只读状态" :readonly="true" value="这是只读文本"></ebiz-textarea>
+      </div>
+      <div class="demo-item">
+        <p>禁用状态：</p>
+        <ebiz-textarea placeholder="禁用状态" :disabled="true"></ebiz-textarea>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { EbizTextarea } from '../index.js';
+</script>
+
+<style scoped>
+.textarea-demo {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 28px;
+  margin-bottom: 24px;
+}
+
+h2 {
+  font-size: 20px;
+  margin-top: 32px;
+  margin-bottom: 16px;
+}
+
+section {
+  margin-bottom: 40px;
+}
+
+.demo-item {
+  margin-bottom: 16px;
+  max-width: 400px;
+}
+
+p {
+  margin-bottom: 8px;
+}
+</style> 

package/src/views/TimePickerDemo.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="time-picker-demo">
+    <h2>时间选择器 EbizTimePicker</h2>
+    
+    <h3>基本用法</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value1" placeholder="请选择时间" />
+      <div class="demo-value">选中值: {{ value1 }}</div>
+    </div>
+    
+    <h3>时间格式</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value2" format="HH:mm" placeholder="时分格式 HH:mm" />
+      <div class="demo-value">选中值: {{ value2 }}</div>
+    </div>
+    
+    <h3>禁用状态</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value3" disabled placeholder="禁用状态" />
+    </div>
+    
+    <h3>时间范围选择</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value4" range placeholder="请选择时间范围" />
+      <div class="demo-value">选中值: {{ value4 }}</div>
+    </div>
+    
+    <h3>步长设置</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value5" :steps="[2, 10, 15]" placeholder="步长：时(2) 分(10) 秒(15)" />
+      <div class="demo-value">选中值: {{ value5 }}</div>
+    </div>
+    
+    <h3>禁用时间</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value6" :disable-time="disableTime" placeholder="上午禁用" />
+      <div class="demo-value">选中值: {{ value6 }}</div>
+    </div>
+    
+    <h3>不同尺寸</h3>
+    <div class="demo-section">
+      <div class="size-row">
+        <EbizTimePicker v-model="value7" size="small" placeholder="小尺寸" />
+        <EbizTimePicker v-model="value7" size="medium" placeholder="中尺寸(默认)" />
+        <EbizTimePicker v-model="value7" size="large" placeholder="大尺寸" />
+      </div>
+    </div>
+    
+    <h3>提示信息</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value8" tips="这是一个提示文本" placeholder="带提示信息" />
+    </div>
+    
+    <h3>前置/后置插槽</h3>
+    <div class="demo-section">
+      <EbizTimePicker v-model="value9" placeholder="带前置内容">
+        <template #prepend>
+          <span class="prepend-content">时间:</span>
+        </template>
+      </EbizTimePicker>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTimePicker } from '../index.js';
+
+// 基本用法
+const value1 = ref('');
+
+// 时间格式
+const value2 = ref('');
+
+// 禁用状态
+const value3 = ref('12:30:00');
+
+// 时间范围选择
+const value4 = ref(['09:00:00', '18:00:00']);
+
+// 步长设置
+const value5 = ref('');
+
+// 禁用时间
+const value6 = ref('');
+const disableTime = (h) => {
+  // 禁用上午时间段 (0-12点)
+  return h < 12;
+};
+
+// 不同尺寸
+const value7 = ref('');
+
+// 提示信息
+const value8 = ref('');
+
+// 前置/后置插槽
+const value9 = ref('');
+</script>
+
+<style scoped>
+.time-picker-demo {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 30px;
+  font-weight: 500;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+h3 {
+  margin-top: 30px;
+  margin-bottom: 15px;
+  font-weight: 400;
+  font-size: 18px;
+  color: #333;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
+
+.demo-value {
+  margin-top: 10px;
+  color: #606060;
+  font-size: 14px;
+  padding: 5px 0;
+}
+
+.size-row {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.prepend-content {
+  padding: 0 10px;
+  color: #0052D9;
+}
+</style> 

package/src/views/TimelineDemo.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="timeline-demo">
+    <h1>TDesign Timeline 组件示例</h1>
+    
+    <h2>基础时间轴</h2>
+    <div class="demo-section">
+      <EbizTimeline>
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>时间轴方向</h2>
+    <div class="demo-section">
+      <h3>水平方向</h3>
+      <EbizTimeline layout="horizontal">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>时间轴主题</h2>
+    <div class="demo-section">
+      <h3>点状主题</h3>
+      <EbizTimeline theme="dot">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>不同的展示方式</h2>
+    <div class="demo-section">
+      <h3>左侧展示</h3>
+      <EbizTimeline mode="left">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+      
+      <h3>右侧展示</h3>
+      <EbizTimeline mode="right">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+      
+      <h3>同侧展示</h3>
+      <EbizTimeline mode="same">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>标签位置</h2>
+    <div class="demo-section">
+      <h3>标签在左侧</h3>
+      <EbizTimeline labelAlign="left">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+      
+      <h3>标签在顶部</h3>
+      <EbizTimeline labelAlign="top">
+        <EbizTimelineItem label="2022-01-01" content="事件一" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>自定义节点颜色</h2>
+    <div class="demo-section">
+      <EbizTimeline>
+        <EbizTimelineItem label="2022-01-01" content="事件一" dotColor="primary" />
+        <EbizTimelineItem label="2022-02-01" content="事件二" dotColor="warning" />
+        <EbizTimelineItem label="2022-03-01" content="事件三" dotColor="error" />
+        <EbizTimelineItem label="2022-04-01" content="事件四" dotColor="success" />
+      </EbizTimeline>
+    </div>
+    
+    <h2>使用插槽自定义内容</h2>
+    <div class="demo-section">
+      <EbizTimeline>
+        <EbizTimelineItem label="2022-01-01">
+          <div class="custom-content">
+            <h4>自定义内容一</h4>
+            <p>这是一个自定义内容示例</p>
+          </div>
+        </EbizTimelineItem>
+        <EbizTimelineItem label="2022-02-01">
+          <div class="custom-content">
+            <h4>自定义内容二</h4>
+            <p>这是一个自定义内容示例</p>
+          </div>
+        </EbizTimelineItem>
+      </EbizTimeline>
+    </div>
+    
+    <h2>加载状态</h2>
+    <div class="demo-section">
+      <EbizTimeline>
+        <EbizTimelineItem label="2022-01-01" content="已完成" />
+        <EbizTimelineItem label="2022-02-01" content="进行中" loading />
+        <EbizTimelineItem label="2022-03-01" content="未开始" />
+        <EbizTimelineItem label="2022-04-01" content="未开始" />
+      </EbizTimeline>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizTimeline, EbizTimelineItem } from '../index.js';
+</script>
+
+<style scoped>
+.timeline-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+h1 {
+  margin-bottom: 30px;
+}
+
+h2 {
+  margin: 20px 0;
+}
+
+h3 {
+  margin: 15px 0;
+}
+
+.custom-content {
+  padding: 10px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.custom-content h4 {
+  margin: 0 0 10px 0;
+}
+
+.custom-content p {
+  margin: 0;
+}
+</style> 

package/src/views/TreeDemo.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="tree-demo">
+    <h1>树组件示例</h1>
+
+    <h2>基础树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" />
+    </div>
+
+    <h2>可选择的树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" checkable v-model="checkedValue" @change="handleChange" />
+      <div class="result-panel">
+        <p>当前选中值: {{ checkedValue.join(', ') }}</p>
+      </div>
+    </div>
+
+    <h2>带禁用节点的树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" checkable :disable-check="disableTreeNode" />
+      <div class="description">
+        <p>通过 disableCheck 函数自定义禁用节点，所有值为"1.1"的节点无法被勾选</p>
+      </div>
+    </div>
+
+    <h2>带连接线的树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" line v-model:expanded="expandedNodes" />
+    </div>
+
+    <h2>启用动画效果的树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" line :transition="true" />
+      <div class="description">
+        <p>启用节点展开/收起的过渡动画效果</p>
+      </div>
+    </div>
+
+    <h2>可拖拽的树</h2>
+    <div class="demo-section">
+      <EbizTree 
+        :items="treeData" 
+        draggable
+        @drag-drop="handleDragDrop"
+      />
+    </div>
+    
+    <h2>自定义图标的树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" line>
+        <template #icon="{ node }">
+          <span v-if="node.children && node.children.length">📁</span>
+          <span v-else>📄</span>
+        </template>
+      </EbizTree>
+    </div>
+
+    <h2>节点操作</h2>
+    <div class="demo-section">
+      <EbizTree :items="operableTreeData" line>
+        <template #operations="{ node }">
+          <div class="node-operations">
+            <button @click.stop="addChildNode(node)">添加</button>
+            <button @click.stop="removeNode(node)">删除</button>
+          </div>
+        </template>
+      </EbizTree>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTree } from '../index.js';
+
+// 树的数据
+const treeData = ref([
+  {
+    label: '节点1',
+    value: '1',
+    children: [
+      {
+        label: '节点1.1',
+        value: '1.1',
+        children: [
+          {
+            label: '节点1.1.1',
+            value: '1.1.1'
+          },
+          {
+            label: '节点1.1.2',
+            value: '1.1.2'
+          }
+        ]
+      },
+      {
+        label: '节点1.2',
+        value: '1.2'
+      }
+    ]
+  },
+  {
+    label: '节点2',
+    value: '2',
+    children: [
+      {
+        label: '节点2.1',
+        value: '2.1'
+      },
+      {
+        label: '节点2.2',
+        value: '2.2'
+      }
+    ]
+  }
+]);
+
+// 禁用特定节点选择的函数
+const disableTreeNode = (node) => {
+  return node.value === '1.1';
+};
+
+// 可操作的树数据
+const operableTreeData = ref([
+  {
+    label: '节点1',
+    value: '1',
+    children: [
+      {
+        label: '节点1.1',
+        value: '1.1'
+      }
+    ]
+  },
+  {
+    label: '节点2',
+    value: '2',
+    children: []
+  }
+]);
+
+// 选中的值
+const checkedValue = ref([]);
+
+// 展开的节点
+const expandedNodes = ref(['1', '1.1']);
+
+// 选中值变化处理
+const handleChange = (values, context) => {
+  console.log('选中值变化：', values);
+  console.log('选中上下文：', context);
+};
+
+// 拖拽处理
+const handleDragDrop = (context) => {
+  console.log('拖拽结束：', context);
+};
+
+// 添加子节点
+const addChildNode = (node) => {
+  const newNodeId = `${node.value}-${Date.now()}`;
+  const newNode = {
+    label: `节点${newNodeId}`,
+    value: newNodeId,
+    children: []
+  };
+  
+  if (!node.children) {
+    node.children = [];
+  }
+  
+  node.children.push(newNode);
+};
+
+// 删除节点
+const removeNode = (node) => {
+  // 找到父节点，从父节点的children中删除当前节点
+  operableTreeData.value = removeNodeByValue(operableTreeData.value, node.value);
+};
+
+// 根据值递归删除节点
+const removeNodeByValue = (nodes, value) => {
+  return nodes.filter(node => {
+    if (node.value === value) {
+      return false;
+    }
+    
+    if (node.children && node.children.length) {
+      node.children = removeNodeByValue(node.children, value);
+    }
+    
+    return true;
+  });
+};
+</script>
+
+<style scoped>
+.tree-demo {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 20px;
+    font-size: 24px;
+  }
+  
+  h2 {
+    margin-top: 30px;
+    margin-bottom: 15px;
+    font-size: 20px;
+  }
+  
+  .demo-section {
+    margin-bottom: 30px;
+    padding: 20px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+  }
+  
+  .result-panel {
+    margin-top: 16px;
+    padding: 10px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    
+    p {
+      margin: 0;
+    }
+  }
+  
+  .node-operations {
+    display: inline-flex;
+    margin-left: 8px;
+    
+    button {
+      margin-left: 4px;
+      padding: 2px 6px;
+      font-size: 12px;
+      background-color: #f0f0f0;
+      border: 1px solid #ddd;
+      border-radius: 3px;
+      cursor: pointer;
+      
+      &:hover {
+        background-color: #e0e0e0;
+      }
+    }
+  }
+  
+  .description {
+    margin-top: 10px;
+    color: #666;
+    font-size: 14px;
+  }
+}
+</style>