feat(payment): 集成PingPong支付SDK并实现支付功能

- 添加PingPong支付SDK动态加载逻辑
- 实现支付组件与SDK的初始化配置
- 配置支付容器自适应不同屏幕尺寸
- 添加支付token校验和错误提示
- 集成Element Plus消息组件显示支付状态
- 配置SDK基础样式和按钮样式参数
- 添加支付页面路由和基本布局结构
- 实现支付结果页面跳转逻辑
- 添加订单状态管理和响应码常量定义
- 集成工具函数支持金额格式化和日期处理
- 配置开发环境变量支持沙箱模式切换
- 添加防抖节流等常用工具函数实现
- 实现订单号生成和状态文本映射逻辑
- 添加表单验证函数支持邮箱和手机校验

src/App.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-container>
+    <el-header>
+      <div class="header-content">
+        <h1>MT Pay - PingPong支付系统</h1>
+        <el-menu
+          mode="horizontal"
+          :default-active="activeIndex"
+          router
+        >
+          <el-menu-item index="/">创建订单</el-menu-item>
+          <el-menu-item index="/query">订单查询</el-menu-item>
+        </el-menu>
+      </div>
+    </el-header>
+    <el-main>
+      <router-view />
+    </el-main>
+  </el-container>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const activeIndex = computed(() => route.path)
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+#app {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.el-header {
+  background-color: #409eff;
+  color: white;
+  line-height: 60px;
+  padding: 0 20px;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-content h1 {
+  font-size: 20px;
+  margin: 0;
+}
+
+.el-main {
+  padding: 20px;
+  min-height: calc(100vh - 60px);
+}
+</style>
+