From a555ac2afdf5c7a32f359f0b278f13b42fec491d Mon Sep 17 00:00:00 2001
From: DebugIsFalse <511418503@qq.com>
Date: Wed, 22 May 2024 14:31:09 +0800
Subject: [PATCH] feature: add mock data

---
 pages/md.vue                 | 13 +++++++++++--
 server/api/mock/[...slug].js |  4 +++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/pages/md.vue b/pages/md.vue
index 97ac743..551fa0d 100644
--- a/pages/md.vue
+++ b/pages/md.vue
@@ -1,6 +1,15 @@
 <template>
-    <IMdMdc :content="code" />
+    <div class="p-12">
+        <IMdMdc :content="code" />
+    </div>
 </template>
 <script setup>
-const code = ref("当然可以，以下是一个使用Java编写的示范代码，展示如何运用Keycloak Java SDK连接到Keycloak服务器，并使用客户端秘密(`clientSecret`)安全创建一个新的realm。请根据你的实际情况，特别是要将`XXXXX`替换为你的有效客户端密钥，并适当调整其他配置：\n\n```java\nimport org.keycloak.admin.client.Keycloak;\nimport org.keycloak.representations.idm.RealmRepresentation;\n\npublic class RealmCreationDemo {\n\n    public static void main(String[] args) {\n        // 配置Keycloak连接，无需包含'/auth'\n        String serverUrl = \"http://localhost:8080\";\n        Keycloak keycloak = KeycloakBuilder.builder()\n                .serverUrl(serverUrl)\n                .realm(\"master\")  // 主realm名称\n                .username(\"admin\")  // 管理员用户名\n                .password(\"your_admin_password\")  // 管理员密码\n                .clientId(\"admin-cli\")  // 用于管理的客户端ID\n                .clientSecret(\"XXXXX\")  // 替换成实际的client secret\n                .resteasyClient(new ResteasyClientBuilderImpl().connectionPoolSize(20).build())\n                .build();\n\n        // 创建新的realm的定义\n        RealmRepresentation realm = new RealmRepresentation();\n        realm.setRealm(\"MyCreatedRealm\");  // 新realm的名称\n        realm.setEnabled(true);  // 启用这个realm\n\n        try {\n            // 创建新的realm\n            keycloak.realms().create(realm);\n            System.out.println(\"Realm '\" + realm.getRealm() + \"' has been created.\");\n        } catch (Exception e) {\n            System.err.println(\"Error in creating realm: \" + e.getMessage());\n            e.printStackTrace();\n        } finally {\n            // 关闭Keycloak连接\n            keycloak.close();\n        }\n    }\n}\n```\n\n请记着，替换`your_admin_password`为你的管理员密码，将`XXXXX`替换为有效的`client secret`。在真实的部署场景中，为了安全起见，不要在源代码中直接硬编码敏感信息，推荐使用环境变量或加密的配置管理方式。")
+const code = ref('')
+async function getMockData () {
+    const data = await $fetch('/api/mock/test', { method: 'get' })
+    code.value = data
+}
+onMounted(() => {
+    getMockData()
+})
 </script>
\ No newline at end of file
diff --git a/server/api/mock/[...slug].js b/server/api/mock/[...slug].js
index 25ed0f7..861fb5e 100644
--- a/server/api/mock/[...slug].js
+++ b/server/api/mock/[...slug].js
@@ -3,7 +3,9 @@ import { createRouter, defineEventHandler, useBase } from 'h3'
 const router = createRouter()
 
 router.get('/test', defineEventHandler(() => {
-    return 'data:{"message":"success","data":{"id":"c_20240516095719_bfaJkBJyg4KTwL8g","object":"chat.completion","created":1715824958,"model":"chat_qwen110b","choices":[{"index":0,"message":{"role":"assistant","content":"Hello! I\'m here to help you with any questions or tasks related to the Byzer-LLM project or its usage. Whether you need assistance with deployment, querying models, understanding the integration process, or exploring its features, feel free to ask. For instance, if you\'re looking to set up a model like `sparkdesk_chat`, run a simple inference, validate the model, or even understand how to use Python scripts for interacting with Byzer-LLM, just let me know your specific inquiry!"},"finish_reason":"stop"}],"usage":{"prompt_tokens":6653,"completion_tokens":104,"total_tokens":6757},"meta":{"type":"answer"}}}'
+    const code1 =  `在Vue 3中，通过\`setup()\`函数与Composition API的结合，你可以实现更加高效和模块化的组件开发。下面提供一个综合示例，该示例展示了如何使用\`ref\`创建响应式数据、定义方法以及如何在模板中使用这些功能，同时还包括条件渲染和事件处理。\n\n**组件代码示例:**\n\n\`\`\`vue\n<template>\n  <div>\n    <!-- 显示响应式消息 -->\n    <p v-if=\"showMessage\">{{ displayedMessage }}</p>\n    \n    <!-- 按钮控制消息的显示与切换 -->\n    <button @click=\"toggleMessage\">切换消息</button>\n    <button @click=\"hideShowMessage\">隐藏/显示消息</button>\n  </div>\n</template>\n\n<script>\nimport { ref, computed } from 'vue';\n\nexport default {\n  setup() {\n    // 使用ref创建响应式数据\n    const originalMessage = ref('这是原始消息');\n    \n    // 计算属性用于展示的消息，基于原始消息动态变化\n    const displayedMessage = computed(() => {\n      if (showMessage.value) {\n        return originalMessage.value;\n      }\n      return '';\n    });\n    \n    // 控制消息显示与否的响应式数据\n    const showMessage = ref(true);\n    \n    // 切换消息的内容（假设为一种简单切换）\n    function toggleMessage() {\n      originalMessage.value = originalMessage.value === '这是原始消息' ?\n                              '现在消息已改变!' :\n                              '这是原始消息';\n    }\n\n    // 控制消息的显示与隐藏\n    function hideShowMessage() {\n      showMessage.value = !showMessage.value;\n    }\n\n    // 返回给模板的数据和方法\n    return {\n      displayedMessage,\n      toggleMessage,\n      hideShowMessage,\n      showMessage, // 如果需要在模板中直接控制显隐，可以返回\n    };\n  },\n};\n</script>\n\`\`\`\n\n在这个示例中：\n- 使用\`ref\`创建了两个响应式变量\`originalMessage\`和\`showMessage\`，分别用于存储消息内容和控制是否显示消息。\n- 利用\`computed\`创建\`displayedMessage\`来根据\`originalMessage\`和显示标志动态展现消息。\n- 定义了两个方法\`toggleMessage\`和\`hideShowMessage\`，分别用来切换消息内容和控制消息的显示与隐藏。\n- 模板中通过\`v-if\`指令和事件监听来呈现动态效果，实现了用户交互和数据反应性的完美融合，体现了Composition API的优势。`
+    const code2 = `在Vue 3中，两种编写组件的方式是通过\`setup()\`函数和使用\`defineComponent\`。下面分别展示这两种方法的基本用法。\n\n### 使用 \`setup()\` 函数\n\n\`setup()\` 是Vue 3 Composition API的一部分，它提供了一个独立的作用域来设置组件的逻辑，不直接混入到模板或数据属性中。此函数不接受任何选项对象，而是直接访问setupContext的属性（如props和attrs）。\n\n\`\`\`vue\n<script>\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n  setup(props) {\n    // 定义响应式数据\n    const count = ref(0);\n\n    // 方法\n    const increment = () => {\n      count.value++;\n    };\n\n    return { count, increment };\n  },\n  template: \`\n    <button @click=\"increment\">{{ count }}</button>\n  \`,\n});\n</script>\n\`\`\`\n\n### 使用 \`defineComponent\` 结合选项API\n\n虽然\`setup()\`更偏向于Composition API，但如果你想混合使用Options API与一些Composition API特性，可以直接在其选项结构中使用\`setup()\`，或者完全使用\`defineComponent\`包裹传统的Options风格代码。\n\n\`\`\`vue\n<script>\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  data() {\n    return {\n      count: 0,\n    };\n  },\n  methods: {\n    increment() {\n      this.count++;\n    },\n  },\n  template: \`\n    <button @click=\"increment\">{{ count }}</button>\n  \`,\n});\n</script>\n\`\`\`\n\n在这个例子中，我们展示了如何在Vue 3中定义一个简单的组件，其中一个是使用了Composition API的\`setup()\`函数，另一个则是传统风格，通过\`data\`, \`methods\`, 和 \`template\` 属性来定义。`
+    return code1 + code2
 }))
 
 export default useBase('/api/mock', router.handler)
-- 
GitLab