@ebiz/designer-components 0.0.18 → 0.0.19

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/TagDemo.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="tag-demo">
+    <h1>TDesign Tag 组件示例</h1>
+    
+    <h2>基础标签</h2>
+    <div class="demo-section">
+      <EbizTag content="默认标签" />
+      <EbizTag theme="primary" content="主题标签" />
+      <EbizTag theme="warning" content="警告标签" />
+      <EbizTag theme="danger" content="危险标签" />
+      <EbizTag theme="success" content="成功标签" />
+    </div>
+    
+    <h2>不同尺寸</h2>
+    <div class="demo-section">
+      <EbizTag size="small" content="小尺寸" />
+      <EbizTag size="medium" content="中尺寸" />
+      <EbizTag size="large" content="大尺寸" />
+    </div>
+    
+    <h2>不同变体</h2>
+    <div class="demo-section">
+      <EbizTag variant="dark" content="深色" />
+      <EbizTag variant="light" content="浅色" />
+      <EbizTag variant="outline" content="描边" />
+      <EbizTag variant="light-outline" content="浅色描边" />
+    </div>
+    
+    <h2>可关闭标签</h2>
+    <div class="demo-section">
+      <EbizTag v-for="(tag, index) in closableTags" :key="index" 
+        :content="tag" 
+        closable 
+        @close="handleClose(index)" />
+    </div>
+    
+    <h2>可选中标签</h2>
+    <div class="demo-section">
+      <EbizTag v-for="item in checkableTags" :key="item.name"
+        :content="item.name"
+        checkable
+        :checked="item.checked"
+        @change="(checked) => handleChange(item, checked)" />
+    </div>
+    
+    <h2>带图标的标签</h2>
+    <div class="demo-section">
+      <EbizTag content="星标标签" icon="star" />
+      <EbizTag content="成功标签" theme="success" icon="check-circle" />
+      <EbizTag content="警告标签" theme="warning" icon="error-circle" />
+    </div>
+    
+    <h2>最大宽度</h2>
+    <div class="demo-section">
+      <EbizTag content="这是一个很长很长很长很长很长很长很长很长很长很长的标签" :maxWidth="150" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTag } from '../index.js';
+
+const closableTags = ref(['标签1', '标签2', '标签3', '标签4']);
+
+const checkableTags = ref([
+  { name: '选项1', checked: true },
+  { name: '选项2', checked: false },
+  { name: '选项3', checked: false },
+]);
+
+const handleClose = (index) => {
+  closableTags.value.splice(index, 1);
+};
+
+const handleChange = (item, checked) => {
+  item.checked = checked;
+};
+</script>
+
+<style scoped>
+.tag-demo {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+h1 {
+  margin-bottom: 24px;
+}
+
+h2 {
+  margin: 16px 0 8px;
+}
+</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/TdesignButton.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="tdesign-button-demo">
+    <h2>TDesign 按钮示例</h2>
+    
+    <div class="section">
+      <h3>主题样式</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="默认按钮" />
+        <ebiz-tdesign-button content="主要按钮" theme="primary" />
+        <ebiz-tdesign-button content="成功按钮" theme="success" />
+        <ebiz-tdesign-button content="警告按钮" theme="warning" />
+        <ebiz-tdesign-button content="危险按钮" theme="danger" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>按钮变体</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="基础按钮" theme="primary" variant="base" />
+        <ebiz-tdesign-button content="描边按钮" theme="primary" variant="outline" />
+        <ebiz-tdesign-button content="虚线按钮" theme="primary" variant="dashed" />
+        <ebiz-tdesign-button content="文字按钮" theme="primary" variant="text" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>按钮尺寸</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="大型按钮" theme="primary" size="large" />
+        <ebiz-tdesign-button content="中型按钮" theme="primary" size="medium" />
+        <ebiz-tdesign-button content="小型按钮" theme="primary" size="small" />
+        <ebiz-tdesign-button content="超小按钮" theme="primary" size="extra-small" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>按钮形状</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="长方形" theme="primary" shape="rectangle" />
+        <ebiz-tdesign-button content="圆角长方形" theme="primary" shape="round" />
+        <ebiz-tdesign-button content="正方形" theme="primary" shape="square">
+          <template #icon>
+            <span style="font-size: 16px;">+</span>
+          </template>
+        </ebiz-tdesign-button>
+        <ebiz-tdesign-button theme="primary" shape="circle">
+          <template #icon>
+            <span style="font-size: 16px;">+</span>
+          </template>
+        </ebiz-tdesign-button>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>图标按钮</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="带图标按钮" theme="primary">
+          <template #icon>
+            <span style="font-size: 16px;">★</span>
+          </template>
+        </ebiz-tdesign-button>
+        
+        <ebiz-tdesign-button content="图标在右侧" theme="primary">
+          <template #suffix>
+            <span style="font-size: 16px;">→</span>
+          </template>
+        </ebiz-tdesign-button>
+        
+        <ebiz-tdesign-button theme="primary">
+          <template #icon>
+            <span style="font-size: 16px;">★</span>
+          </template>
+          添加收藏
+        </ebiz-tdesign-button>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>特殊状态</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="加载中按钮" theme="primary" loading />
+        <ebiz-tdesign-button content="加载中自定义" theme="primary" loading>
+          <template #loading>
+            <span>加载中...</span>
+          </template>
+        </ebiz-tdesign-button>
+        <ebiz-tdesign-button content="禁用按钮" theme="primary" disabled />
+        <ebiz-tdesign-button content="幽灵按钮" theme="primary" ghost />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>块级按钮</h3>
+      <div class="button-container">
+        <ebiz-tdesign-button content="块级按钮" theme="primary" block />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>链接按钮</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button content="链接按钮" theme="primary" href="https://www.example.com" />
+        <ebiz-tdesign-button content="新窗口打开" theme="primary" href="https://www.example.com" tag="a" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>自定义内容插槽</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button theme="primary">
+          <template #content>
+            <div style="display: flex; align-items: center; gap: 5px;">
+              <span style="font-size: 16px;">⚙️</span>
+              <span>自定义内容</span>
+            </div>
+          </template>
+        </ebiz-tdesign-button>
+        
+        <ebiz-tdesign-button theme="primary">
+          <span style="color: yellow;">默认插槽内容</span>
+        </ebiz-tdesign-button>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>事件处理</h3>
+      <div class="button-row">
+        <ebiz-tdesign-button 
+          content="点击事件" 
+          theme="primary" 
+          @click="handleButtonClick"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignButton } from '../index.js'
+
+export default {
+  name: 'TdesignButtonDemo',
+  components: {
+    EbizTdesignButton
+  },
+  methods: {
+    handleButtonClick(_e) {
+      alert('按钮被点击了！')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tdesign-button-demo {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #0052d9;
+}
+
+h3 {
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #333;
+}
+
+.button-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.button-container {
+  margin-bottom: 16px;
+  width: 100%;
+}
+</style>