@ebiz/designer-components 0.1.2 → 0.1.5

package/src/views/PaginationDemo.vue

@@ -1,97 +1,97 @@
-<template>
-  <div class="pagination-demo">
-    <h1>EbizPagination 分页组件示例</h1>
-    
-    <h2>基础分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="100" />
-    </div>
-    
-    <h2>带数据总量显示的分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="685" />
-    </div>
-    
-    <h2>带页面展示数量选择的分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="645" :pageSizeOptions="[10, 20, 30, 50]" :defaultPageSize="30" />
-    </div>
-    
-    <h2>带快速跳转的分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="101" :pageSize="20" :showJumper="true" />
-    </div>
-    
-    <h2>极简版分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="100" :theme="'simple'" :showJumper="true" />
-    </div>
-    
-    <h2>迷你版分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="100" :size="'small'" />
-    </div>
-    
-    <h2>极简迷你版分页</h2>
-    <div class="demo-section">
-      <EbizPagination :total="100" :theme="'simple'" :size="'small'" :showJumper="true" />
-    </div>
-    
-    <h2>自定义显示内容</h2>
-    <div class="demo-section">
-      <EbizPagination :total="200">
-        <template #totalContent>
-          <span style="color: #0052d9;">共 {{ 200 }} 条数据</span>
-        </template>
-      </EbizPagination>
-    </div>
-    
-    <h2>事件处理</h2>
-    <div class="demo-section">
-      <EbizPagination 
-        :total="500" 
-        :current="currentPage" 
-        :pageSize="pageSize"
-        @change="handlePaginationChange" 
-      />
-      <p>当前页码: {{ currentPage }}, 每页条数: {{ pageSize }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizPagination } from '../index.js';
-
-const currentPage = ref(1);
-const pageSize = ref(10);
-
-const handlePaginationChange = (pageInfo) => {
-  currentPage.value = pageInfo.current;
-  pageSize.value = pageInfo.pageSize;
-  console.log('分页变化', pageInfo);
-};
-</script>
-
-<style scoped>
-.pagination-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-  padding: 16px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
-
-h1 {
-  font-size: 24px;
-  margin-bottom: 20px;
-}
-
-h2 {
-  font-size: 18px;
-  margin: 10px 0;
-}
+<template>
+  <div class="pagination-demo">
+    <h1>EbizPagination 分页组件示例</h1>
+    
+    <h2>基础分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" />
+    </div>
+    
+    <h2>带数据总量显示的分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="685" />
+    </div>
+    
+    <h2>带页面展示数量选择的分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="645" :pageSizeOptions="[10, 20, 30, 50]" :defaultPageSize="30" />
+    </div>
+    
+    <h2>带快速跳转的分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="101" :pageSize="20" :showJumper="true" />
+    </div>
+    
+    <h2>极简版分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" :theme="'simple'" :showJumper="true" />
+    </div>
+    
+    <h2>迷你版分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" :size="'small'" />
+    </div>
+    
+    <h2>极简迷你版分页</h2>
+    <div class="demo-section">
+      <EbizPagination :total="100" :theme="'simple'" :size="'small'" :showJumper="true" />
+    </div>
+    
+    <h2>自定义显示内容</h2>
+    <div class="demo-section">
+      <EbizPagination :total="200">
+        <template #totalContent>
+          <span style="color: #0052d9;">共 {{ 200 }} 条数据</span>
+        </template>
+      </EbizPagination>
+    </div>
+    
+    <h2>事件处理</h2>
+    <div class="demo-section">
+      <EbizPagination 
+        :total="500" 
+        :current="currentPage" 
+        :pageSize="pageSize"
+        @change="handlePaginationChange" 
+      />
+      <p>当前页码: {{ currentPage }}, 每页条数: {{ pageSize }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizPagination } from '../index.js';
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+const handlePaginationChange = (pageInfo) => {
+  currentPage.value = pageInfo.current;
+  pageSize.value = pageInfo.pageSize;
+  console.log('分页变化', pageInfo);
+};
+</script>
+
+<style scoped>
+.pagination-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  padding: 16px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+h2 {
+  font-size: 18px;
+  margin: 10px 0;
+}
 </style> 

package/src/views/PermissionBoxDemo.vue

@@ -1,86 +1,86 @@
-<template>
-  <div class="permission-box-demo">
-    <h2>权限盒子组件演示</h2>
-    
-    <div class="demo-section">
-      <h3>基础用法</h3>
-      <div class="demo-block">
-        <EbizDiv key="admin">
-          <div class="demo-content">
-            这是只有管理员可见的内容
-          </div>
-        </EbizDiv>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>权限控制演示</h3>
-      <div class="demo-block">
-        <t-space direction="vertical">
-          <t-button @click="setPermission(['admin'])">设置管理员权限</t-button>
-          <t-button @click="setPermission(['user'])">设置普通用户权限</t-button>
-          <t-button @click="setPermission([])">清除所有权限</t-button>
-        </t-space>
-
-        <div class="permission-examples">
-          <EbizDiv key="admin">
-            <t-alert theme="success" message="管理员可见内容" />
-          </EbizDiv>
-
-          <EbizDiv key="user">
-            <t-alert theme="info" message="普通用户可见内容" />
-          </EbizDiv>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { EbizDiv } from '../index.js';
-import { Button as TButton, Space as TSpace, Alert as TAlert } from 'tdesign-vue-next';
-
-const setPermission = (permissions) => {
-  localStorage.setItem('permissionKeys', JSON.stringify(permissions));
-  // 刷新页面以重新加载权限
-  window.location.reload();
-};
-</script>
-
-<style scoped>
-.permission-box-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-}
-
-h2 {
-  margin-bottom: 20px;
-}
-
-h3 {
-  margin-bottom: 15px;
-}
-
-.demo-block {
-  padding: 20px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
-
-.demo-content {
-  padding: 16px;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-}
-
-.permission-examples {
-  margin-top: 20px;
-}
-
-.permission-examples > * {
-  margin-bottom: 10px;
-}
+<template>
+  <div class="permission-box-demo">
+    <h2>权限盒子组件演示</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <div class="demo-block">
+        <EbizDiv key="admin">
+          <div class="demo-content">
+            这是只有管理员可见的内容
+          </div>
+        </EbizDiv>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>权限控制演示</h3>
+      <div class="demo-block">
+        <t-space direction="vertical">
+          <t-button @click="setPermission(['admin'])">设置管理员权限</t-button>
+          <t-button @click="setPermission(['user'])">设置普通用户权限</t-button>
+          <t-button @click="setPermission([])">清除所有权限</t-button>
+        </t-space>
+
+        <div class="permission-examples">
+          <EbizDiv key="admin">
+            <t-alert theme="success" message="管理员可见内容" />
+          </EbizDiv>
+
+          <EbizDiv key="user">
+            <t-alert theme="info" message="普通用户可见内容" />
+          </EbizDiv>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizDiv } from '../index.js';
+import { Button as TButton, Space as TSpace, Alert as TAlert } from 'tdesign-vue-next';
+
+const setPermission = (permissions) => {
+  localStorage.setItem('permissionKeys', JSON.stringify(permissions));
+  // 刷新页面以重新加载权限
+  window.location.reload();
+};
+</script>
+
+<style scoped>
+.permission-box-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+h3 {
+  margin-bottom: 15px;
+}
+
+.demo-block {
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.demo-content {
+  padding: 16px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.permission-examples {
+  margin-top: 20px;
+}
+
+.permission-examples > * {
+  margin-bottom: 10px;
+}
 </style> 

package/src/views/PopconfirmDemo.vue

@@ -1,81 +1,81 @@
-<template>
-  <div class="popconfirm-demo">
-    <h1>气泡确认框示例</h1>
-    
-    <h2>1. 基础用法</h2>
-    <div class="example-item">
-      <ebiz-popconfirm content="确定要删除这条数据吗？">
-        <ebiz-tdesign-button>删除</ebiz-tdesign-button>
-      </ebiz-popconfirm>
-    </div>
-    
-    <h2>2. 事件处理</h2>
-    <div class="example-item">
-      <p>操作结果: <span>{{ operationResult }}</span></p>
-      <ebiz-popconfirm 
-        content="确定要继续吗？" 
-        @confirm="handleConfirm" 
-        @cancel="handleCancel"
-      >
-        <ebiz-tdesign-button>点击触发事件</ebiz-tdesign-button>
-      </ebiz-popconfirm>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizPopconfirm, EbizTdesignButton, EbizMessage } from '../index';
-
-const operationResult = ref('');
-
-// 确认事件处理
-const handleConfirm = () => {
-  operationResult.value = '您点击了确认按钮';
-  EbizMessage.success('操作已确认');
-};
-
-// 取消事件处理
-const handleCancel = () => {
-  operationResult.value = '您点击了取消按钮';
-  EbizMessage.info('操作已取消');
-};
-</script>
-
-<style lang="less" scoped>
-.popconfirm-demo {
-  padding: 20px;
-  
-  h1 {
-    margin-bottom: 30px;
-    font-weight: bold;
-    color: #0052d9;
-  }
-  
-  h2 {
-    margin-top: 30px;
-    margin-bottom: 16px;
-    font-weight: bold;
-    font-size: 18px;
-    border-left: 4px solid #0052d9;
-    padding-left: 12px;
-  }
-  
-  .example-item {
-    margin-bottom: 24px;
-    padding: 20px;
-    border: 1px solid #eee;
-    border-radius: 6px;
-    background-color: #fafafa;
-  }
-  
-  p {
-    margin-bottom: 10px;
-    
-    span {
-      color: #0052d9;
-      font-weight: bold;
-    }
-  }
-}
+<template>
+  <div class="popconfirm-demo">
+    <h1>气泡确认框示例</h1>
+    
+    <h2>1. 基础用法</h2>
+    <div class="example-item">
+      <ebiz-popconfirm content="确定要删除这条数据吗？">
+        <ebiz-tdesign-button>删除</ebiz-tdesign-button>
+      </ebiz-popconfirm>
+    </div>
+    
+    <h2>2. 事件处理</h2>
+    <div class="example-item">
+      <p>操作结果: <span>{{ operationResult }}</span></p>
+      <ebiz-popconfirm 
+        content="确定要继续吗？" 
+        @confirm="handleConfirm" 
+        @cancel="handleCancel"
+      >
+        <ebiz-tdesign-button>点击触发事件</ebiz-tdesign-button>
+      </ebiz-popconfirm>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizPopconfirm, EbizTdesignButton, EbizMessage } from '../index';
+
+const operationResult = ref('');
+
+// 确认事件处理
+const handleConfirm = () => {
+  operationResult.value = '您点击了确认按钮';
+  EbizMessage.success('操作已确认');
+};
+
+// 取消事件处理
+const handleCancel = () => {
+  operationResult.value = '您点击了取消按钮';
+  EbizMessage.info('操作已取消');
+};
+</script>
+
+<style lang="less" scoped>
+.popconfirm-demo {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 30px;
+    font-weight: bold;
+    color: #0052d9;
+  }
+  
+  h2 {
+    margin-top: 30px;
+    margin-bottom: 16px;
+    font-weight: bold;
+    font-size: 18px;
+    border-left: 4px solid #0052d9;
+    padding-left: 12px;
+  }
+  
+  .example-item {
+    margin-bottom: 24px;
+    padding: 20px;
+    border: 1px solid #eee;
+    border-radius: 6px;
+    background-color: #fafafa;
+  }
+  
+  p {
+    margin-bottom: 10px;
+    
+    span {
+      color: #0052d9;
+      font-weight: bold;
+    }
+  }
+}
 </style>