@ebiz/designer-components 0.0.18-tj.1 → 0.0.19-beta.1

package/src/views/TabsDemo.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="tabs-demo">
+    <h1>TDesign Tabs 组件示例</h1>
+
+    <h2>原生TDesign选项卡</h2>
+    <div class="demo-section">
+      <t-tabs :default-value="1">
+        <t-tab-panel :value="1" label="选项卡1">
+          <p style="margin: 20px">选项卡1内容区</p>
+        </t-tab-panel>
+        <t-tab-panel :value="2" label="选项卡2">
+          <p style="margin: 20px">选项卡2内容区</p>
+        </t-tab-panel>
+        <t-tab-panel :value="3" label="选项卡3">
+          <p style="margin: 20px">选项卡3内容区</p>
+        </t-tab-panel>
+      </t-tabs>
+    </div>
+
+    <h2>基础选项卡</h2>
+    <div class="demo-section">
+      <EbizTabs v-model="activeTab">
+        <EbizTabPanel value="first" label="选项卡1">
+          选项卡1内容区
+        </EbizTabPanel>
+        <EbizTabPanel value="second" label="选项卡2">
+          选项卡2内容区
+        </EbizTabPanel>
+        <EbizTabPanel value="third" label="选项卡3">
+          选项卡3内容区
+        </EbizTabPanel>
+      </EbizTabs>
+    </div>
+
+    <h2>不同位置的选项卡</h2>
+    <div class="demo-section">
+      <div class="placement-demo">
+        <h3>顶部选项卡</h3>
+        <EbizTabs placement="top">
+          <EbizTabPanel value="first" label="选项卡1">
+            顶部选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            顶部选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+
+      <div class="placement-demo">
+        <h3>左侧选项卡</h3>
+        <EbizTabs placement="left">
+          <EbizTabPanel value="first" label="选项卡1">
+            左侧选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            左侧选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+
+      <div class="placement-demo">
+        <h3>右侧选项卡</h3>
+        <EbizTabs placement="right">
+          <EbizTabPanel value="first" label="选项卡1">
+            右侧选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            右侧选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+
+      <div class="placement-demo">
+        <h3>底部选项卡</h3>
+        <EbizTabs placement="bottom">
+          <EbizTabPanel value="first" label="选项卡1">
+            底部选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            底部选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+    </div>
+
+    <h2>卡片风格选项卡</h2>
+    <div class="demo-section">
+      <EbizTabs theme="card">
+        <EbizTabPanel value="first" label="选项卡1">
+          卡片风格选项卡内容
+        </EbizTabPanel>
+        <EbizTabPanel value="second" label="选项卡2">
+          卡片风格选项卡内容
+        </EbizTabPanel>
+        <EbizTabPanel value="third" label="选项卡3">
+          卡片风格选项卡内容
+        </EbizTabPanel>
+      </EbizTabs>
+    </div>
+
+    <h2>尺寸大小</h2>
+    <div class="demo-section">
+      <div class="size-demo">
+        <h3>中尺寸(默认)</h3>
+        <EbizTabs size="medium">
+          <EbizTabPanel value="first" label="选项卡1">
+            中尺寸选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            中尺寸选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+
+      <div class="size-demo">
+        <h3>大尺寸</h3>
+        <EbizTabs size="large">
+          <EbizTabPanel value="first" label="选项卡1">
+            大尺寸选项卡内容
+          </EbizTabPanel>
+          <EbizTabPanel value="second" label="选项卡2">
+            大尺寸选项卡内容
+          </EbizTabPanel>
+        </EbizTabs>
+      </div>
+    </div>
+
+    <h2>可增加的选项卡</h2>
+    <div class="demo-section">
+      <EbizTabs v-model="addableActiveTab" addable @add="onAddTab">
+        <EbizTabPanel 
+          v-for="(item, index) in addableTabs" 
+          :key="item.value" 
+          :value="item.value" 
+          :label="item.label"
+          :removable="index !== 0" 
+          @remove="onRemoveTab(item)"
+        >
+          {{ item.content }}
+        </EbizTabPanel>
+      </EbizTabs>
+    </div>
+
+    <h2>可拖拽排序的选项卡</h2>
+    <div class="demo-section">
+      <EbizTabs v-model="dragSortTab" dragSort @dragSort="onDragSort">
+        <EbizTabPanel 
+          v-for="item in dragSortTabs" 
+          :key="item.value" 
+          :value="item.value" 
+          :label="item.label"
+        >
+          {{ item.content }}
+        </EbizTabPanel>
+      </EbizTabs>
+    </div>
+
+    <h2>禁用状态</h2>
+    <div class="demo-section">
+      <EbizTabs>
+        <EbizTabPanel value="first" label="选项卡1">
+          选项卡1内容
+        </EbizTabPanel>
+        <EbizTabPanel value="second" label="选项卡2" disabled>
+          选项卡2内容（禁用状态）
+        </EbizTabPanel>
+        <EbizTabPanel value="third" label="选项卡3">
+          选项卡3内容
+        </EbizTabPanel>
+      </EbizTabs>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { EbizTabs, EbizTabPanel } from '../index.js';
+import { TabPanel } from 'tdesign-vue-next';
+
+// 基础选项卡
+const activeTab = ref('first');
+
+// 可增加选项卡
+const addableTabIndex = ref(3);
+const addableActiveTab = ref('tab0');
+const addableTabs = ref([
+  {
+    value: 'tab0',
+    label: '首页',
+    content: '首页内容'
+  },
+  {
+    value: 'tab1',
+    label: '选项卡1',
+    content: '选项卡1内容'
+  },
+  {
+    value: 'tab2',
+    label: '选项卡2',
+    content: '选项卡2内容'
+  }
+]);
+
+// 可拖拽排序选项卡
+const dragSortTab = ref('drag0');
+const dragSortTabs = ref([
+  {
+    value: 'drag0',
+    label: '选项1',
+    content: '选项1内容'
+  },
+  {
+    value: 'drag1',
+    label: '选项2',
+    content: '选项2内容'
+  },
+  {
+    value: 'drag2',
+    label: '选项3',
+    content: '选项3内容'
+  }
+]);
+
+// 添加选项卡
+const onAddTab = () => {
+  const value = `tab${addableTabIndex.value}`;
+  addableTabs.value.push({
+    value,
+    label: `选项卡${addableTabIndex.value}`,
+    content: `选项卡${addableTabIndex.value}内容`
+  });
+  addableActiveTab.value = value;
+  addableTabIndex.value += 1;
+};
+
+// 删除选项卡
+const onRemoveTab = (item) => {
+  const index = addableTabs.value.findIndex((tab) => tab.value === item.value);
+  if (index !== -1) {
+    addableTabs.value.splice(index, 1);
+  }
+};
+
+// 处理拖拽排序
+const onDragSort = (context) => {
+  // 根据拖拽结果重新排序
+  dragSortTabs.value = context.currentData;
+};
+
+// 检查tdesign-vue-next依赖是否已正确安装
+onMounted(() => {
+  console.log('TabsDemo mounted');
+});
+</script>
+
+<style lang="less" scoped>
+.tabs-demo {
+  padding: 20px;
+  
+  .demo-section {
+    margin-bottom: 30px;
+  }
+  
+  .placement-demo, .size-demo {
+    margin-bottom: 20px;
+  }
+  
+  h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  
+  h2 {
+    font-size: 20px;
+    margin: 30px 0 15px;
+  }
+  
+  h3 {
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+}
+</style> 

package/src/views/TdesignAlert.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="alert-demo">
+    <h1>TDesign Alert 组件示例</h1>
+    
+    <h2>基础提示</h2>
+    <div class="demo-section">
+      <EbizAlert message="这是一条普通信息提示" />
+      <EbizAlert theme="success" message="这是一条成功提示" />
+      <EbizAlert theme="warning" message="这是一条警告提示" />
+      <EbizAlert theme="error" message="这是一条错误提示" />
+    </div>
+    
+    <h2>带标题的提示</h2>
+    <div class="demo-section">
+      <EbizAlert title="信息提示标题" message="这是一条普通信息提示" />
+      <EbizAlert theme="success" title="成功提示标题" message="这是一条成功提示" />
+      <EbizAlert theme="warning" title="警告提示标题" message="这是一条警告提示" />
+      <EbizAlert theme="error" title="错误提示标题" message="这是一条错误提示" />
+    </div>
+    
+    <h2>带描述的提示</h2>
+    <div class="demo-section">
+      <EbizAlert 
+        title="信息提示" 
+        message="这是一条普通信息提示" 
+        description="这是一段描述文字，用于进一步解释说明提示内容"
+      />
+      <EbizAlert 
+        theme="success" 
+        title="成功提示" 
+        message="这是一条成功提示" 
+        description="这是一段描述文字，用于进一步解释说明提示内容"
+      />
+    </div>
+    
+    <h2>可关闭的提示</h2>
+    <div class="demo-section">
+      <EbizAlert message="可关闭的信息提示" close @close="handleClose" />
+      <EbizAlert 
+        theme="success" 
+        title="可关闭的成功提示" 
+        message="这是一条成功提示" 
+        close 
+        @close="handleClose" 
+      />
+    </div>
+    
+    <h2>带操作的提示</h2>
+    <div class="demo-section">
+      <EbizAlert 
+        message="带操作按钮的提示" 
+        operation="查看详情" 
+      />
+      <EbizAlert 
+        theme="warning" 
+        title="带操作按钮的警告" 
+        message="这是一条警告提示" 
+      >
+        <template #operation>
+          <t-button theme="warning" variant="text" size="small">查看详情</t-button>
+        </template>
+      </EbizAlert>
+    </div>
+    
+    <h2>自定义图标</h2>
+    <div class="demo-section">
+      <EbizAlert message="自定义图标提示" theme="success">
+        <template #icon>
+          <t-icon name="check-circle-filled" />
+        </template>
+      </EbizAlert>
+      <EbizAlert message="无图标提示" :icon="false" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizAlert } from '../index.js';
+import { Button as TButton, Icon as TIcon } from 'tdesign-vue-next';
+import { ref } from 'vue';
+
+const handleClose = (e) => {
+  console.log('Alert closed', e);
+};
+</script>
+
+<style lang="less" scoped>
+.alert-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 24px;
+  
+  .t-alert {
+    margin-bottom: 16px;
+  }
+}
+</style> 

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>