update: api加解密demo

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>