@ebiz/designer-components 0.1.11 → 0.1.13

package/src/views/EbizTdesignButtonDialogExample.vue

@@ -1,438 +1,438 @@
-<template>
-  <div class="example-container">
-    <h2>弹窗按钮组件示例</h2>
-
-    <div class="example-section">
-      <h3>弹窗类型示例</h3>
-      <p>弹窗按钮组件支持三种类型：普通弹窗、添加数据弹窗和删除数据弹窗</p>
-      
-      <div class="button-group">
-        <EbizTdesignButtonDialog
-          dialog-type="normal"
-          button-text="普通弹窗"
-          title="普通弹窗示例"
-          dialog-width="500px"
-          confirm-text="确认"
-          cancel-text="取消"
-          button-theme="primary"
-        >
-          <template #body>
-            <div class="dialog-content">
-              <p>这是一个普通弹窗示例。</p>
-              <p>普通弹窗主要用于显示信息、提示用户或操作确认。</p>
-              <p>普通弹窗使用配置的主题。</p>
-            </div>
-          </template>
-        </EbizTdesignButtonDialog>
-
-        <EbizTdesignButtonDialog
-          dialog-type="add"
-          button-text="添加数据"
-          title="添加数据"
-          dialog-width="500px"
-          confirm-text="确认添加"
-          cancel-text="取消"
-          button-theme="success"
-          button-icon="add"
-          :api-config="addApiConfig"
-          @api-success="handleAddSuccess"
-          @api-error="handleApiError"
-        >
-          <template #body>
-            <div class="dialog-content">
-              <p>这是一个添加数据弹窗示例。</p>
-              <p>添加数据弹窗主要用于添加新数据，使用绿色主题。</p>
-              <t-form ref="addForm">
-                <t-form-item label="名称">
-                  <t-input v-model="formData.name" placeholder="请输入名称" />
-                </t-form-item>
-                <t-form-item label="描述">
-                  <t-textarea v-model="formData.description" placeholder="请输入描述" />
-                </t-form-item>
-              </t-form>
-            </div>
-          </template>
-        </EbizTdesignButtonDialog>
-
-        <EbizTdesignButtonDialog
-          dialog-type="delete"
-          button-text="删除数据"
-          title="删除确认"
-          confirm-text="确认删除"
-          cancel-text="取消"
-          button-theme="danger"
-          button-icon="delete"
-          :api-config="deleteApiConfig"
-          @api-success="handleDeleteSuccess"
-          @api-error="handleApiError"
-        >
-          <template #body>
-            <div class="delete-confirm-content">
-              <t-icon name="error-circle" size="large" style="color: #e34d59; margin-right: 12px;" />
-              <p style="margin: 0; font-size: 14px;">确定要删除该数据吗？此操作不可逆，请谨慎操作。</p>
-            </div>
-          </template>
-        </EbizTdesignButtonDialog>
-      </div>
-    </div>
-
-    <div class="example-section">
-      <t-switch v-model="visible" label="控制弹窗显示"></t-switch>
-      <h3>基础用法</h3>
-      <EbizTdesignButtonDialog 
-        :visible="visible"
-        button-text="打开基础弹窗"
-        title="基础弹窗"
-        button-theme="primary"
-        dialog-width="500px"
-        confirm-text="确认"
-        cancel-text="取消"
-        @button-click="handleButtonClick"
-        @dialog-close="handleDialogClose"
-        @dialog-confirm="handleDialogConfirm"
-        @dialog-cancel="handleDialogCancel"
-      >
-        <template #body>
-          <div class="dialog-content">
-            这是一个基础的弹窗内容
-          </div>
-        </template>
-      </EbizTdesignButtonDialog>
-    </div>
-
-    <div class="example-section">
-      <h3>自定义按钮内容</h3>
-      <EbizTdesignButtonDialog
-        title="自定义按钮"
-        button-theme="success"
-        button-variant="outline"
-        dialog-width="500px"
-        confirm-text="确认"
-        cancel-text="取消"
-      >
-        <template #buttonContent>
-          <t-icon name="add" />
-          添加内容
-        </template>
-        <template #body>
-          <div class="dialog-content">
-            这是一个带有自定义按钮内容的弹窗
-          </div>
-        </template>
-      </EbizTdesignButtonDialog>
-    </div>
-
-    <div class="example-section">
-      <h3>自定义弹窗内容</h3>
-      <EbizTdesignButtonDialog
-        button-text="打开表单弹窗"
-        title="表单弹窗"
-        button-theme="warning"
-        button-size="large"
-        dialog-width="600px"
-        dialog-mode="modal"
-        dialog-placement="center"
-        confirm-text="提交"
-        cancel-text="取消"
-      >
-        <template #header>
-          <div class="custom-header">
-            <t-icon name="edit" />
-            自定义标题
-          </div>
-        </template>
-        <template #body>
-          <div class="dialog-content">
-            <t-form>
-              <t-form-item label="姓名">
-                <t-input placeholder="请输入姓名" />
-              </t-form-item>
-              <t-form-item label="年龄">
-                <t-input-number placeholder="请输入年龄" />
-              </t-form-item>
-            </t-form>
-          </div>
-        </template>
-        <template #footer>
-          <t-space>
-            <t-button theme="default" @click="handleDialogCancel">取消</t-button>
-            <t-button theme="primary" @click="handleDialogConfirm">提交</t-button>
-          </t-space>
-        </template>
-      </EbizTdesignButtonDialog>
-    </div>
-
-    <div class="example-section">
-      <h3>更多按钮样式</h3>
-      <div class="button-group">
-        <EbizTdesignButtonDialog
-          button-text="圆形按钮"
-          button-shape="circle"
-          button-theme="primary"
-          dialog-width="400px"
-          confirm-text="确认"
-          cancel-text="取消"
-        >
-          <template #body>圆形按钮示例</template>
-        </EbizTdesignButtonDialog>
-
-        <EbizTdesignButtonDialog
-          button-text="方形按钮"
-          button-shape="square"
-          button-theme="success"
-          dialog-width="400px"
-          confirm-text="确认"
-          cancel-text="取消"
-        >
-          <template #body>方形按钮示例</template>
-        </EbizTdesignButtonDialog>
-
-        <EbizTdesignButtonDialog
-          button-text="文字按钮"
-          button-variant="text"
-          button-theme="danger"
-          dialog-width="400px"
-          confirm-text="确认"
-          cancel-text="取消"
-        >
-          <template #body>文字按钮示例</template>
-        </EbizTdesignButtonDialog>
-
-        <EbizTdesignButtonDialog
-          button-icon="add"
-          button-text="带图标按钮"
-          button-theme="default"
-          dialog-width="400px"
-          confirm-text="确认"
-          cancel-text="取消"
-        >
-          <template #body>带图标按钮示例</template>
-        </EbizTdesignButtonDialog>
-      </div>
-    </div>
-
-    <div class="example-section">
-      <h3>API接口调用示例</h3>
-      <p>点击按钮后，弹窗确认时会调用接口，并根据接口结果触发对应事件</p>
-      
-      <div class="button-group">
-        <EbizTdesignButtonDialog
-          button-text="提交数据"
-          button-theme="primary"
-          title="提交数据"
-          dialog-width="500px"
-          confirm-text="确认"
-          cancel-text="取消"
-          :api-config="successApiConfig"
-          @api-success="handleApiSuccess"
-          @api-error="handleApiError"
-        >
-          <template #body>
-            <div class="dialog-content">
-              <p>这个示例配置了一个成功的API调用。</p>
-              <p>点击确认按钮时，将提交以下数据：</p>
-              <t-code-block :code="JSON.stringify(successApiConfig, null, 2)" lang="json" />
-              <p>接口调用成功后会自动关闭弹窗并触发api-success事件。</p>
-            </div>
-          </template>
-        </EbizTdesignButtonDialog>
-
-        <EbizTdesignButtonDialog
-          button-text="错误请求"
-          button-theme="danger"
-          title="错误请求"
-          dialog-width="500px"
-          confirm-text="确认"
-          cancel-text="取消"
-          :api-config="errorApiConfig"
-          @api-success="handleApiSuccess"
-          @api-error="handleApiError"
-        >
-          <template #body>
-            <div class="dialog-content">
-              <p>这个示例配置了一个失败的API调用。</p>
-              <p>点击确认按钮时，将尝试请求：</p>
-              <t-code-block :code="JSON.stringify(errorApiConfig, null, 2)" lang="json" />
-              <p>接口调用失败后会显示错误消息并触发api-error事件。</p>
-            </div>
-          </template>
-        </EbizTdesignButtonDialog>
-
-        <EbizTdesignButtonDialog
-          button-text="自定义配置"
-          button-theme="success"
-          title="自定义API配置"
-          dialog-width="500px"
-          confirm-text="确认"
-          cancel-text="取消"
-          :api-config="successApiConfig"
-          :close-on-success="false"
-          :show-result-message="false"
-          @api-success="handleCustomApiSuccess"
-        >
-          <template #body>
-            <div class="dialog-content">
-              <p>这个示例配置了自定义的API行为。</p>
-              <p>设置了以下选项：</p>
-              <ul>
-                <li>关闭成功后自动关闭弹窗的选项</li>
-                <li>关闭显示结果消息的选项</li>
-                <li>自定义处理成功事件，显示自定义消息</li>
-              </ul>
-              <p v-if="apiResult">
-                <strong>API调用结果：</strong> 
-                <t-tag theme="success">{{ apiResult }}</t-tag>
-              </p>
-            </div>
-          </template>
-        </EbizTdesignButtonDialog>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { EbizTdesignButtonDialog } from '../index.js'
-import { ref, reactive } from 'vue'
-import { 
-  Switch as TSwitch, 
-  Form as TForm, 
-  FormItem as TFormItem, 
-  Input as TInput, 
-  InputNumber as TInputNumber,
-  Space as TSpace,
-  Button as TButton,
-  Icon as TIcon,
-  Tag as TTag,
-  CodeBlock as TCodeBlock,
-  MessagePlugin,
-  Textarea as TTextarea
-} from 'tdesign-vue-next'
-
-const visible = ref(false)
-const apiResult = ref(null)
-
-// 表单数据
-const formData = reactive({
-  name: '',
-  description: ''
-})
-
-// 添加数据API配置
-const addApiConfig = {
-  url: '/api/items',
-  method: 'post',
-  data: formData
-}
-
-// 删除数据API配置
-const deleteApiConfig = {
-  url: '/api/items/123',
-  method: 'delete'
-}
-
-// 模拟成功的API配置
-const successApiConfig = {
-  url: '/api/success',
-  method: 'post',
-  data: {
-    name: '测试数据',
-    value: 100
-  }
-}
-
-// 模拟失败的API配置
-const errorApiConfig = {
-  url: '/api/error',
-  method: 'get'
-}
-
-const handleButtonClick = (e) => {
-  console.log('按钮点击事件', e)
-}
-
-const handleDialogClose = (e) => {
-  console.log('弹窗关闭事件', e)
-}
-
-const handleDialogConfirm = (e) => {
-  console.log('弹窗确认事件', e)
-}
-
-const handleDialogCancel = (e) => {
-  console.log('弹窗取消事件', e)
-}
-
-// API相关事件处理
-const handleApiSuccess = (response) => {
-  console.log('API调用成功:', response)
-}
-
-const handleAddSuccess = (response) => {
-  console.log('添加数据成功:', response)
-  // 添加成功后清空表单
-  formData.name = ''
-  formData.description = ''
-}
-
-const handleDeleteSuccess = (response) => {
-  console.log('删除数据成功:', response)
-}
-
-const handleApiError = (error) => {
-  console.log('API调用失败:', error)
-}
-
-// 自定义API成功处理
-const handleCustomApiSuccess = (response) => {
-  console.log('自定义API成功处理:', response)
-  apiResult.value = '接口调用成功！'
-  MessagePlugin.success({
-    content: '自定义成功消息：接口调用成功',
-    duration: 3000
-  })
-}
-</script>
-
-<style scoped>
-.example-container {
-  padding: 20px;
-}
-
-.example-section {
-  margin-bottom: 30px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 20px;
-}
-
-.example-section h3 {
-  margin-bottom: 16px;
-  font-size: 16px;
-  color: #333;
-}
-
-.dialog-content {
-  padding: 20px;
-}
-
-.custom-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 16px;
-  font-weight: bold;
-}
-
-.button-group {
-  display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-  margin-top: 16px;
-}
-
-.delete-confirm-content {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-}
+<template>
+  <div class="example-container">
+    <h2>弹窗按钮组件示例</h2>
+
+    <div class="example-section">
+      <h3>弹窗类型示例</h3>
+      <p>弹窗按钮组件支持三种类型：普通弹窗、添加数据弹窗和删除数据弹窗</p>
+      
+      <div class="button-group">
+        <EbizTdesignButtonDialog
+          dialog-type="normal"
+          button-text="普通弹窗"
+          title="普通弹窗示例"
+          dialog-width="500px"
+          confirm-text="确认"
+          cancel-text="取消"
+          button-theme="primary"
+        >
+          <template #body>
+            <div class="dialog-content">
+              <p>这是一个普通弹窗示例。</p>
+              <p>普通弹窗主要用于显示信息、提示用户或操作确认。</p>
+              <p>普通弹窗使用配置的主题。</p>
+            </div>
+          </template>
+        </EbizTdesignButtonDialog>
+
+        <EbizTdesignButtonDialog
+          dialog-type="add"
+          button-text="添加数据"
+          title="添加数据"
+          dialog-width="500px"
+          confirm-text="确认添加"
+          cancel-text="取消"
+          button-theme="success"
+          button-icon="add"
+          :api-config="addApiConfig"
+          @api-success="handleAddSuccess"
+          @api-error="handleApiError"
+        >
+          <template #body>
+            <div class="dialog-content">
+              <p>这是一个添加数据弹窗示例。</p>
+              <p>添加数据弹窗主要用于添加新数据，使用绿色主题。</p>
+              <t-form ref="addForm">
+                <t-form-item label="名称">
+                  <t-input v-model="formData.name" placeholder="请输入名称" />
+                </t-form-item>
+                <t-form-item label="描述">
+                  <t-textarea v-model="formData.description" placeholder="请输入描述" />
+                </t-form-item>
+              </t-form>
+            </div>
+          </template>
+        </EbizTdesignButtonDialog>
+
+        <EbizTdesignButtonDialog
+          dialog-type="delete"
+          button-text="删除数据"
+          title="删除确认"
+          confirm-text="确认删除"
+          cancel-text="取消"
+          button-theme="danger"
+          button-icon="delete"
+          :api-config="deleteApiConfig"
+          @api-success="handleDeleteSuccess"
+          @api-error="handleApiError"
+        >
+          <template #body>
+            <div class="delete-confirm-content">
+              <t-icon name="error-circle" size="large" style="color: #e34d59; margin-right: 12px;" />
+              <p style="margin: 0; font-size: 14px;">确定要删除该数据吗？此操作不可逆，请谨慎操作。</p>
+            </div>
+          </template>
+        </EbizTdesignButtonDialog>
+      </div>
+    </div>
+
+    <div class="example-section">
+      <t-switch v-model="visible" label="控制弹窗显示"></t-switch>
+      <h3>基础用法</h3>
+      <EbizTdesignButtonDialog 
+        :visible="visible"
+        button-text="打开基础弹窗"
+        title="基础弹窗"
+        button-theme="primary"
+        dialog-width="500px"
+        confirm-text="确认"
+        cancel-text="取消"
+        @button-click="handleButtonClick"
+        @dialog-close="handleDialogClose"
+        @dialog-confirm="handleDialogConfirm"
+        @dialog-cancel="handleDialogCancel"
+      >
+        <template #body>
+          <div class="dialog-content">
+            这是一个基础的弹窗内容
+          </div>
+        </template>
+      </EbizTdesignButtonDialog>
+    </div>
+
+    <div class="example-section">
+      <h3>自定义按钮内容</h3>
+      <EbizTdesignButtonDialog
+        title="自定义按钮"
+        button-theme="success"
+        button-variant="outline"
+        dialog-width="500px"
+        confirm-text="确认"
+        cancel-text="取消"
+      >
+        <template #buttonContent>
+          <t-icon name="add" />
+          添加内容
+        </template>
+        <template #body>
+          <div class="dialog-content">
+            这是一个带有自定义按钮内容的弹窗
+          </div>
+        </template>
+      </EbizTdesignButtonDialog>
+    </div>
+
+    <div class="example-section">
+      <h3>自定义弹窗内容</h3>
+      <EbizTdesignButtonDialog
+        button-text="打开表单弹窗"
+        title="表单弹窗"
+        button-theme="warning"
+        button-size="large"
+        dialog-width="600px"
+        dialog-mode="modal"
+        dialog-placement="center"
+        confirm-text="提交"
+        cancel-text="取消"
+      >
+        <template #header>
+          <div class="custom-header">
+            <t-icon name="edit" />
+            自定义标题
+          </div>
+        </template>
+        <template #body>
+          <div class="dialog-content">
+            <t-form>
+              <t-form-item label="姓名">
+                <t-input placeholder="请输入姓名" />
+              </t-form-item>
+              <t-form-item label="年龄">
+                <t-input-number placeholder="请输入年龄" />
+              </t-form-item>
+            </t-form>
+          </div>
+        </template>
+        <template #footer>
+          <t-space>
+            <t-button theme="default" @click="handleDialogCancel">取消</t-button>
+            <t-button theme="primary" @click="handleDialogConfirm">提交</t-button>
+          </t-space>
+        </template>
+      </EbizTdesignButtonDialog>
+    </div>
+
+    <div class="example-section">
+      <h3>更多按钮样式</h3>
+      <div class="button-group">
+        <EbizTdesignButtonDialog
+          button-text="圆形按钮"
+          button-shape="circle"
+          button-theme="primary"
+          dialog-width="400px"
+          confirm-text="确认"
+          cancel-text="取消"
+        >
+          <template #body>圆形按钮示例</template>
+        </EbizTdesignButtonDialog>
+
+        <EbizTdesignButtonDialog
+          button-text="方形按钮"
+          button-shape="square"
+          button-theme="success"
+          dialog-width="400px"
+          confirm-text="确认"
+          cancel-text="取消"
+        >
+          <template #body>方形按钮示例</template>
+        </EbizTdesignButtonDialog>
+
+        <EbizTdesignButtonDialog
+          button-text="文字按钮"
+          button-variant="text"
+          button-theme="danger"
+          dialog-width="400px"
+          confirm-text="确认"
+          cancel-text="取消"
+        >
+          <template #body>文字按钮示例</template>
+        </EbizTdesignButtonDialog>
+
+        <EbizTdesignButtonDialog
+          button-icon="add"
+          button-text="带图标按钮"
+          button-theme="default"
+          dialog-width="400px"
+          confirm-text="确认"
+          cancel-text="取消"
+        >
+          <template #body>带图标按钮示例</template>
+        </EbizTdesignButtonDialog>
+      </div>
+    </div>
+
+    <div class="example-section">
+      <h3>API接口调用示例</h3>
+      <p>点击按钮后，弹窗确认时会调用接口，并根据接口结果触发对应事件</p>
+      
+      <div class="button-group">
+        <EbizTdesignButtonDialog
+          button-text="提交数据"
+          button-theme="primary"
+          title="提交数据"
+          dialog-width="500px"
+          confirm-text="确认"
+          cancel-text="取消"
+          :api-config="successApiConfig"
+          @api-success="handleApiSuccess"
+          @api-error="handleApiError"
+        >
+          <template #body>
+            <div class="dialog-content">
+              <p>这个示例配置了一个成功的API调用。</p>
+              <p>点击确认按钮时，将提交以下数据：</p>
+              <t-code-block :code="JSON.stringify(successApiConfig, null, 2)" lang="json" />
+              <p>接口调用成功后会自动关闭弹窗并触发api-success事件。</p>
+            </div>
+          </template>
+        </EbizTdesignButtonDialog>
+
+        <EbizTdesignButtonDialog
+          button-text="错误请求"
+          button-theme="danger"
+          title="错误请求"
+          dialog-width="500px"
+          confirm-text="确认"
+          cancel-text="取消"
+          :api-config="errorApiConfig"
+          @api-success="handleApiSuccess"
+          @api-error="handleApiError"
+        >
+          <template #body>
+            <div class="dialog-content">
+              <p>这个示例配置了一个失败的API调用。</p>
+              <p>点击确认按钮时，将尝试请求：</p>
+              <t-code-block :code="JSON.stringify(errorApiConfig, null, 2)" lang="json" />
+              <p>接口调用失败后会显示错误消息并触发api-error事件。</p>
+            </div>
+          </template>
+        </EbizTdesignButtonDialog>
+
+        <EbizTdesignButtonDialog
+          button-text="自定义配置"
+          button-theme="success"
+          title="自定义API配置"
+          dialog-width="500px"
+          confirm-text="确认"
+          cancel-text="取消"
+          :api-config="successApiConfig"
+          :close-on-success="false"
+          :show-result-message="false"
+          @api-success="handleCustomApiSuccess"
+        >
+          <template #body>
+            <div class="dialog-content">
+              <p>这个示例配置了自定义的API行为。</p>
+              <p>设置了以下选项：</p>
+              <ul>
+                <li>关闭成功后自动关闭弹窗的选项</li>
+                <li>关闭显示结果消息的选项</li>
+                <li>自定义处理成功事件，显示自定义消息</li>
+              </ul>
+              <p v-if="apiResult">
+                <strong>API调用结果：</strong> 
+                <t-tag theme="success">{{ apiResult }}</t-tag>
+              </p>
+            </div>
+          </template>
+        </EbizTdesignButtonDialog>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizTdesignButtonDialog } from '../index.js'
+import { ref, reactive } from 'vue'
+import { 
+  Switch as TSwitch, 
+  Form as TForm, 
+  FormItem as TFormItem, 
+  Input as TInput, 
+  InputNumber as TInputNumber,
+  Space as TSpace,
+  Button as TButton,
+  Icon as TIcon,
+  Tag as TTag,
+  CodeBlock as TCodeBlock,
+  MessagePlugin,
+  Textarea as TTextarea
+} from 'tdesign-vue-next'
+
+const visible = ref(false)
+const apiResult = ref(null)
+
+// 表单数据
+const formData = reactive({
+  name: '',
+  description: ''
+})
+
+// 添加数据API配置
+const addApiConfig = {
+  url: '/api/items',
+  method: 'post',
+  data: formData
+}
+
+// 删除数据API配置
+const deleteApiConfig = {
+  url: '/api/items/123',
+  method: 'delete'
+}
+
+// 模拟成功的API配置
+const successApiConfig = {
+  url: '/api/success',
+  method: 'post',
+  data: {
+    name: '测试数据',
+    value: 100
+  }
+}
+
+// 模拟失败的API配置
+const errorApiConfig = {
+  url: '/api/error',
+  method: 'get'
+}
+
+const handleButtonClick = (e) => {
+  console.log('按钮点击事件', e)
+}
+
+const handleDialogClose = (e) => {
+  console.log('弹窗关闭事件', e)
+}
+
+const handleDialogConfirm = (e) => {
+  console.log('弹窗确认事件', e)
+}
+
+const handleDialogCancel = (e) => {
+  console.log('弹窗取消事件', e)
+}
+
+// API相关事件处理
+const handleApiSuccess = (response) => {
+  console.log('API调用成功:', response)
+}
+
+const handleAddSuccess = (response) => {
+  console.log('添加数据成功:', response)
+  // 添加成功后清空表单
+  formData.name = ''
+  formData.description = ''
+}
+
+const handleDeleteSuccess = (response) => {
+  console.log('删除数据成功:', response)
+}
+
+const handleApiError = (error) => {
+  console.log('API调用失败:', error)
+}
+
+// 自定义API成功处理
+const handleCustomApiSuccess = (response) => {
+  console.log('自定义API成功处理:', response)
+  apiResult.value = '接口调用成功！'
+  MessagePlugin.success({
+    content: '自定义成功消息：接口调用成功',
+    duration: 3000
+  })
+}
+</script>
+
+<style scoped>
+.example-container {
+  padding: 20px;
+}
+
+.example-section {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+.example-section h3 {
+  margin-bottom: 16px;
+  font-size: 16px;
+  color: #333;
+}
+
+.dialog-content {
+  padding: 20px;
+}
+
+.custom-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.button-group {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-top: 16px;
+}
+
+.delete-confirm-content {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+}
 </style>