Initial commit: One Pipe System

完整的管理系统，包含账户管理、卡片管理、套餐管理、财务管理等功能模块。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/business/BatchOperationDialog.vue

@@ -0,0 +1,153 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="title"
+    :width="width"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @closed="handleClosed"
+  >
+    <div class="batch-operation-content">
+      <!-- 选中项提示 -->
+      <el-alert
+        v-if="selectedCount > 0"
+        :title="`已选择 ${selectedCount} 项`"
+        type="info"
+        :closable="false"
+        show-icon
+      />
+
+      <!-- 操作表单 -->
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+        class="operation-form"
+      >
+        <slot name="form" :form-data="formData" />
+      </el-form>
+
+      <!-- 确认提示 -->
+      <el-alert
+        v-if="confirmMessage"
+        :title="confirmMessage"
+        type="warning"
+        :closable="false"
+        show-icon
+        class="confirm-alert"
+      />
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button
+          type="primary"
+          :loading="loading"
+          @click="handleConfirm"
+        >
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+
+interface Props {
+  modelValue: boolean
+  title: string
+  width?: string | number
+  selectedCount?: number
+  confirmMessage?: string
+  formRules?: FormRules
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'confirm', formData: Record<string, any>): void | Promise<void>
+  (e: 'cancel'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: '600px',
+  selectedCount: 0
+})
+
+const emit = defineEmits<Emits>()
+
+const formRef = ref<FormInstance>()
+const formData = ref<Record<string, any>>({})
+const loading = ref(false)
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit('update:modelValue', val)
+  }
+})
+
+const handleConfirm = async () => {
+  if (!formRef.value) return
+
+  try {
+    await formRef.value.validate()
+
+    loading.value = true
+    try {
+      await emit('confirm', formData.value)
+      visible.value = false
+      ElMessage.success('操作成功')
+    } catch (error) {
+      console.error('批量操作失败:', error)
+      ElMessage.error('操作失败')
+    } finally {
+      loading.value = false
+    }
+  } catch {
+    ElMessage.warning('请检查表单填写')
+  }
+}
+
+const handleCancel = () => {
+  visible.value = false
+  emit('cancel')
+}
+
+const handleClosed = () => {
+  formRef.value?.resetFields()
+  formData.value = {}
+}
+
+// 暴露方法供父组件调用
+defineExpose({
+  formData
+})
+</script>
+
+<style scoped lang="scss">
+.batch-operation-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .operation-form {
+    margin-top: 16px;
+  }
+
+  .confirm-alert {
+    margin-top: 8px;
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>