@ebiz/designer-components 0.1.2 → 0.1.4

package/src/views/TagDemo.vue

@@ -1,102 +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;
-}
+<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

@@ -1,99 +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;
-  }
-}
+<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>