From 8f2fc2539f37215fd7e42882b5a7f862b7161fe3 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Sat, 23 Aug 2025 13:43:50 +0800
Subject: [PATCH] =?UTF-8?q?update:=20api=E5=8A=A0=E8=A7=A3=E5=AF=86demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/演示使用自行删除/other/encrypt.vue  | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 apps/web-antd/src/views/演示使用自行删除/other/encrypt.vue

diff --git a/apps/web-antd/src/views/演示使用自行删除/other/encrypt.vue b/apps/web-antd/src/views/演示使用自行删除/other/encrypt.vue
new file mode 100644
index 00000000..b4291f12
--- /dev/null
+++ b/apps/web-antd/src/views/演示使用自行删除/other/encrypt.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { JsonPreview, Page } from '@vben/common-ui';
+
+import { Alert, Card } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { requestClient } from '#/api/request';
+
+const requestData = ref<any>({});
+const requestData2 = ref<any>({});
+async function apiRequest(name: string) {
+  const resp = await requestClient.post('/test/api/encrypt/request', name, {
+    encrypt: true,
+    isReturnNativeResponse: true,
+  });
+  console.log(resp);
+  requestData.value = resp.config.data;
+  requestData2.value = resp.data;
+}
+
+const encryptData = ref<any>({});
+const response = ref<any>({});
+async function apiResponse() {
+  const resp = await requestClient.get('/test/api/encrypt/response', {
+    isTransformResponse: false,
+    transformResponse: (data) => {
+      encryptData.value = data;
+      return data;
+    },
+  });
+  response.value = resp;
+}
+</script>
+
+<template>
+  <Page
+    title="API加解密"
+    description="请求加密和响应解密示例, 支持RSA/SM2 AES/SM4算法"
+    content-class="flex flex-col gap-4"
+  >
+    <Card title="请求加密">
+      <a-button @click="apiRequest(dayjs().valueOf().toString())">
+        请求加密
+      </a-button>
+      <div class="flex flex-col gap-4">
+        <Alert class="mt-4" show-icon message="可在开发者工具查看原始响应" />
+        <span class="font-semibold">加密后的请求数据</span>
+        <JsonPreview :data="requestData" />
+        <span class="font-semibold">后端解密</span>
+        <JsonPreview :data="requestData2" />
+      </div>
+    </Card>
+
+    <Card title="响应解密">
+      <a-button @click="apiResponse()">响应解密</a-button>
+      <div class="flex flex-col gap-4">
+        <Alert class="mt-4" show-icon message="可在开发者工具查看原始响应" />
+        <span class="font-semibold">加密的响应(原始data)</span>
+        <JsonPreview :data="encryptData" />
+        <span class="font-semibold">解密后数据</span>
+        <JsonPreview :data="response" />
+      </div>
+    </Card>
+  </Page>
+</template>