@ebiz/designer-components 0.1.90 → 0.1.94

package/src/views/DialogDemo.vue

@@ -1,126 +1,126 @@
-<template>
-  <div class="dialog-demo">
-    <h1>TDesign Dialog 组件示例</h1>
-
-    <h2>基础对话框</h2>
-    <div class="demo-section">
-      <EbizButton theme="primary" @click="showBasicDialog = true">打开基础对话框</EbizButton>
-      <EbizDialog v-model:visible="showBasicDialog" header="基础对话框" :body="'这是一个基础对话框，用于展示简单的信息或进行简单的操作。'"
-        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
-    </div>
-
-    <h2>不同模式的对话框</h2>
-    <div class="demo-section">
-      <EbizButton @click="showModalDialog = true" style="margin-right: 16px;">模态对话框</EbizButton>
-      <EbizButton @click="showModelessDialog = true" style="margin-right: 16px;">非模态对话框</EbizButton>
-      <EbizButton @click="showFullscreenDialog = true">全屏对话框</EbizButton>
-
-      <!-- 模态对话框 -->
-      <EbizDialog v-model:visible="showModalDialog" header="模态对话框" mode="modal" :body="'模态对话框会阻止用户与页面的其他部分交互，直到对话框关闭。'"
-        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
-
-      <!-- 非模态对话框 -->
-      <EbizDialog v-model:visible="showModelessDialog" header="非模态对话框" mode="modeless"
-        :body="'非模态对话框不会阻止用户与页面的其他部分交互，可以同时进行其他操作。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
-        cancel-btn="取消" />
-
-      <!-- 全屏对话框 -->
-      <EbizDialog v-model:visible="showFullscreenDialog" header="全屏对话框" mode="full-screen"
-        :body="'全屏对话框会占据整个屏幕，通常用于需要用户完全专注于某项任务的场景。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
-        cancel-btn="取消" />
-    </div>
-
-    <h2>自定义内容的对话框</h2>
-    <div class="demo-section">
-      <EbizButton @click="showCustomDialog = true">打开自定义内容对话框</EbizButton>
-      <EbizDialog v-model:visible="showCustomDialog" header="自定义内容" :width="500">
-        <template #body>
-          <div style="padding: 20px;">
-            <h3>这是自定义的内容区域</h3>
-            <p>可以在这里放置任何你想要展示的内容，包括表单、图表、列表等。</p>
-            <div style="margin-top: 20px;">
-              <EbizTdesignInput v-model="customInput" placeholder="请输入内容" />
-            </div>
-          </div>
-        </template>
-        <template #footer>
-          <div style="display: flex; justify-content: flex-end;">
-            <EbizButton @click="showCustomDialog = false" style="margin-right: 8px;">取消</EbizButton>
-            <EbizButton theme="primary" @click="handleCustomConfirm">确认</EbizButton>
-          </div>
-        </template>
-      </EbizDialog>
-    </div>
-
-    <h2>可拖拽的对话框</h2>
-    <div class="demo-section">
-      <EbizButton @click="showDraggableDialog = true">打开可拖拽对话框</EbizButton>
-      <EbizDialog v-model:visible="showDraggableDialog" header="可拖拽对话框" :draggable="true" :body="'这个对话框可以通过拖拽标题栏进行移动。'"
-        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
-    </div>
-
-    <h2>不同位置的对话框</h2>
-    <div class="demo-section">
-      <EbizButton @click="showTopDialog = true" style="margin-right: 16px;">顶部对话框</EbizButton>
-      <EbizButton @click="showCenterDialog = true">居中对话框</EbizButton>
-
-      <!-- 顶部对话框 -->
-      <EbizDialog v-model:visible="showTopDialog" header="顶部对话框" placement="top" :body="'这个对话框位于顶部。'"
-        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
-
-      <!-- 居中对话框 -->
-      <EbizDialog v-model:visible="showCenterDialog" header="居中对话框" placement="center" :body="'这个对话框位于页面中央。'"
-        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizDialog, EbizButton, EbizTdesignInput } from '../index.js';
-
-// 基础对话框
-const showBasicDialog = ref(false);
-
-// 不同模式的对话框
-const showModalDialog = ref(false);
-const showModelessDialog = ref(false);
-const showFullscreenDialog = ref(false);
-
-// 自定义内容的对话框
-const showCustomDialog = ref(false);
-const customInput = ref('');
-
-// 可拖拽的对话框
-const showDraggableDialog = ref(false);
-
-// 不同位置的对话框
-const showTopDialog = ref(false);
-const showCenterDialog = ref(false);
-
-// 自定义确认处理函数
-const handleCustomConfirm = () => {
-  // 在实际应用中，这里可以添加表单验证或数据处理逻辑
-  console.log('自定义确认按钮点击，输入内容：', customInput.value);
-  showCustomDialog.value = false;
-};
-</script>
-
-<style lang="less" scoped>
-.dialog-demo {
-  padding: 20px;
-  
-  h1 {
-    margin-bottom: 20px;
-  }
-  
-  h2 {
-    margin-top: 30px;
-    margin-bottom: 16px;
-  }
-  
-  .demo-section {
-    margin-bottom: 24px;
-  }
-}
+<template>
+  <div class="dialog-demo">
+    <h1>TDesign Dialog 组件示例</h1>
+
+    <h2>基础对话框</h2>
+    <div class="demo-section">
+      <EbizButton theme="primary" @click="showBasicDialog = true">打开基础对话框</EbizButton>
+      <EbizDialog v-model:visible="showBasicDialog" header="基础对话框" :body="'这是一个基础对话框，用于展示简单的信息或进行简单的操作。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+
+    <h2>不同模式的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showModalDialog = true" style="margin-right: 16px;">模态对话框</EbizButton>
+      <EbizButton @click="showModelessDialog = true" style="margin-right: 16px;">非模态对话框</EbizButton>
+      <EbizButton @click="showFullscreenDialog = true">全屏对话框</EbizButton>
+
+      <!-- 模态对话框 -->
+      <EbizDialog v-model:visible="showModalDialog" header="模态对话框" mode="modal" :body="'模态对话框会阻止用户与页面的其他部分交互，直到对话框关闭。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+
+      <!-- 非模态对话框 -->
+      <EbizDialog v-model:visible="showModelessDialog" header="非模态对话框" mode="modeless"
+        :body="'非模态对话框不会阻止用户与页面的其他部分交互，可以同时进行其他操作。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
+        cancel-btn="取消" />
+
+      <!-- 全屏对话框 -->
+      <EbizDialog v-model:visible="showFullscreenDialog" header="全屏对话框" mode="full-screen"
+        :body="'全屏对话框会占据整个屏幕，通常用于需要用户完全专注于某项任务的场景。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
+        cancel-btn="取消" />
+    </div>
+
+    <h2>自定义内容的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showCustomDialog = true">打开自定义内容对话框</EbizButton>
+      <EbizDialog v-model:visible="showCustomDialog" header="自定义内容" :width="500">
+        <template #body>
+          <div style="padding: 20px;">
+            <h3>这是自定义的内容区域</h3>
+            <p>可以在这里放置任何你想要展示的内容，包括表单、图表、列表等。</p>
+            <div style="margin-top: 20px;">
+              <EbizTdesignInput v-model="customInput" placeholder="请输入内容" />
+            </div>
+          </div>
+        </template>
+        <template #footer>
+          <div style="display: flex; justify-content: flex-end;">
+            <EbizButton @click="showCustomDialog = false" style="margin-right: 8px;">取消</EbizButton>
+            <EbizButton theme="primary" @click="handleCustomConfirm">确认</EbizButton>
+          </div>
+        </template>
+      </EbizDialog>
+    </div>
+
+    <h2>可拖拽的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showDraggableDialog = true">打开可拖拽对话框</EbizButton>
+      <EbizDialog v-model:visible="showDraggableDialog" header="可拖拽对话框" :draggable="true" :body="'这个对话框可以通过拖拽标题栏进行移动。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+
+    <h2>不同位置的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showTopDialog = true" style="margin-right: 16px;">顶部对话框</EbizButton>
+      <EbizButton @click="showCenterDialog = true">居中对话框</EbizButton>
+
+      <!-- 顶部对话框 -->
+      <EbizDialog v-model:visible="showTopDialog" header="顶部对话框" placement="top" :body="'这个对话框位于顶部。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+
+      <!-- 居中对话框 -->
+      <EbizDialog v-model:visible="showCenterDialog" header="居中对话框" placement="center" :body="'这个对话框位于页面中央。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizDialog, EbizButton, EbizTdesignInput } from '../index.js';
+
+// 基础对话框
+const showBasicDialog = ref(false);
+
+// 不同模式的对话框
+const showModalDialog = ref(false);
+const showModelessDialog = ref(false);
+const showFullscreenDialog = ref(false);
+
+// 自定义内容的对话框
+const showCustomDialog = ref(false);
+const customInput = ref('');
+
+// 可拖拽的对话框
+const showDraggableDialog = ref(false);
+
+// 不同位置的对话框
+const showTopDialog = ref(false);
+const showCenterDialog = ref(false);
+
+// 自定义确认处理函数
+const handleCustomConfirm = () => {
+  // 在实际应用中，这里可以添加表单验证或数据处理逻辑
+  console.log('自定义确认按钮点击，输入内容：', customInput.value);
+  showCustomDialog.value = false;
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-demo {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 20px;
+  }
+  
+  h2 {
+    margin-top: 30px;
+    margin-bottom: 16px;
+  }
+  
+  .demo-section {
+    margin-bottom: 24px;
+  }
+}
 </style> 

package/src/views/EbizApprovalDemo.vue

@@ -1,88 +1,88 @@
-<template>
-  <div class="approval-demo">
-    <h2>审批组件示例</h2>
-    
-    <div class="demo-section">
-      <h3>基础用法</h3>
-      <ebiz-approval
-        v-model:approverList="approverList"
-        v-model:ccList="ccList"
-        key="approval-1"
-        type="limited"
-        :limitedMap="[{
-          label: '部门主管',
-          value: 'MANAGER'
-        },{
-          label: '部门经理',
-          value: 'DIRECTOR'
-        },{
-          label: '部门总监',
-          value: 'INSPECTOR_GENERAL'
-        }]"
-        :required="true"
-        @change="handleChange"
-      />
-    </div>
-
-    <div class="demo-section">
-      <h3>不显示抄送人</h3>
-      <ebiz-approval
-        v-model:approverList="approverList2"
-        v-model:ccList="ccList2"
-        key="approval-2"
-        :id="2"
-        :required="true"
-        :showCC="false"
-        @change="handleChange"
-      />
-    </div>
-
-    <div class="demo-section">
-      <h3>非必填</h3>
-      <ebiz-approval
-        v-model:approverList="approverList3"
-        v-model:ccList="ccList3"
-        key="approval-3"
-        :id="3"
-        :required="false"
-        @change="handleChange"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { EbizApproval } from '../index'
-
-const approverList = ref([])
-const ccList = ref([])
-
-const approverList2 = ref(['1'])
-const ccList2 = ref([])
-
-const approverList3 = ref(['1', '2', '3'])
-const ccList3 = ref(['4', '5'])
-
-const handleChange = (data: any) => {
-  console.log('变更数据:', data)
-}
-</script>
-
-<style lang="less" scoped>
-.approval-demo {
-  padding: 20px;
-
-  h2 {
-    margin-bottom: 24px;
-  }
-
-  .demo-section {
-    margin-bottom: 32px;
-
-    h3 {
-      margin-bottom: 16px;
-    }
-  }
-}
+<template>
+  <div class="approval-demo">
+    <h2>审批组件示例</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <ebiz-approval
+        v-model:approverList="approverList"
+        v-model:ccList="ccList"
+        key="approval-1"
+        type="limited"
+        :limitedMap="[{
+          label: '部门主管',
+          value: 'MANAGER'
+        },{
+          label: '部门经理',
+          value: 'DIRECTOR'
+        },{
+          label: '部门总监',
+          value: 'INSPECTOR_GENERAL'
+        }]"
+        :required="true"
+        @change="handleChange"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>不显示抄送人</h3>
+      <ebiz-approval
+        v-model:approverList="approverList2"
+        v-model:ccList="ccList2"
+        key="approval-2"
+        :id="2"
+        :required="true"
+        :showCC="false"
+        @change="handleChange"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>非必填</h3>
+      <ebiz-approval
+        v-model:approverList="approverList3"
+        v-model:ccList="ccList3"
+        key="approval-3"
+        :id="3"
+        :required="false"
+        @change="handleChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EbizApproval } from '../index'
+
+const approverList = ref([])
+const ccList = ref([])
+
+const approverList2 = ref(['1'])
+const ccList2 = ref([])
+
+const approverList3 = ref(['1', '2', '3'])
+const ccList3 = ref(['4', '5'])
+
+const handleChange = (data: any) => {
+  console.log('变更数据:', data)
+}
+</script>
+
+<style lang="less" scoped>
+.approval-demo {
+  padding: 20px;
+
+  h2 {
+    margin-bottom: 24px;
+  }
+
+  .demo-section {
+    margin-bottom: 32px;
+
+    h3 {
+      margin-bottom: 16px;
+    }
+  }
+}
 </style>