update

package.json

@@ -11,6 +11,7 @@
     "gen": "openapi-generator-cli generate -i ./api/swagger.yaml -g typescript-axios -o ./src/api"
   },
   "dependencies": {
+    "@kangc/v-md-editor": "^2.3.18",
     "axios": "^1.7.7",
     "highlight.js": "^11.10.0",
     "js-base64": "^3.7.7",

src/components.d.ts

@@ -12,5 +12,6 @@ declare module 'vue' {
     Menu: typeof import('./components/Menu.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Test: typeof import('./components/chat/test.vue')['default']
   }
 }

src/pages/test.vue

@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <p ref="textRef">
+            <span v-for="(part, index) in textParts" :key="index" :style="{ animationDelay: `${index * 0.1}s` }">{{ part }}</span>
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+
+// 生成固定长度的随机文本
+const generateText = (length: number) => {
+    const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    let text = '';
+    for (let i = 0; i < length; i++) {
+        text += characters[Math.floor(Math.random() * characters.length)];
+    }
+    return text;
+};
+
+const textLength = 10; // 每次生成的文本长度
+const text = ref('');
+const textParts = ref<string[]>([]);
+
+// 将文本分割成每 10 个字符的部分
+const updateTextParts = () => {
+    textParts.value = text.value.match(/.{1,10}/g) || [];
+};
+
+// 定时追加新文本
+const updateInterval = 500; // 每 5 秒追加一次
+let intervalId: any;
+
+onMounted(() => {
+    intervalId = setInterval(() => {
+        text.value += generateText(textLength);
+        updateTextParts();
+    }, updateInterval);
+});
+
+onUnmounted(() => {
+    clearInterval(intervalId);
+});
+
+// 初始更新文本部分
+onMounted(() => {
+    updateTextParts();
+});
+</script>
+
+<style lang="css" scoped>
+p {
+    position: relative;
+    overflow: hidden;
+}
+
+span {
+    display: inline-block;
+    transform: translateY(100%);
+    transition: transform 0.5s ease-in-out;
+    animation: fadeIn 0.5s ease-in-out forwards;
+}
+
+@keyframes fadeIn {
+    to {
+        transform: translateY(0);
+    }
+}
+</style>

src/pages/test2.vue

@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <p ref="textRef">
+            <span v-for="(part, index) in textParts" :key="index" :style="{ opacity: `${1 - index * 0.1}` }">{{ part }}</span>
+        </p>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+
+interface Props {
+    text: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    text: ''
+});
+
+const textLength = 10; // 每次生成的文本长度
+const textParts = ref<string[]>([]);
+
+// 将文本分割成每 10 个字符的部分
+const updateTextParts = () => {
+    textParts.value = props.text.match(/.{1,10}/g) || [];
+};
+
+// 监听 text 变化并更新 textParts
+watch(computed(() => props.text), (newText) => {
+    updateTextParts();
+});
+
+onMounted(() => {
+    updateTextParts();
+});
+
+onUnmounted(() => {
+    // 清理资源
+});
+</script>
+
+<style lang="css" scoped>
+p {
+    position: relative;
+    overflow: hidden;
+    white-space: nowrap; /* 保持文本在同一行 */
+}
+
+span {
+    display: inline-block;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+    animation: fadeIn 0.5s ease-in-out forwards;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+</style>

src/pages/test3.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <p ref="textRef">
+      <span
+        v-for="(part, index) in textParts"
+        :key="index"
+        :style="{ opacity: `${1 - index * 0.1}` }"
+        >{{ part }}</span
+      >
+    </p>
+
+    <!-- 包裹 v-md-editor 的 div -->
+    <div class="editor-container">
+      <v-md-preview
+        :text="text"
+        @input="handleInput"
+        height="500px"
+        
+      ></v-md-preview>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
+
+
+import VMdPreview from '@kangc/v-md-editor/lib/preview';
+import '@kangc/v-md-editor/lib/style/preview.css';
+import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
+import '@kangc/v-md-editor/lib/theme/style/github.css';
+
+// highlightjs
+import hljs from 'highlight.js';
+
+VMdPreview.use(githubTheme, {
+  Hljs: hljs,
+});
+
+
+const text = ref("text");
+const textLength = 10; // 每次生成的文本长度
+const textParts = ref<string[]>([]);
+
+// 将文本分割成每 10 个字符的部分
+const updateTextParts = () => {
+  textParts.value = text.value.match(/.{1,10}/g) || [];
+};
+
+// 监听 text 变化并更新 textParts
+watch(
+  () => text.value,
+  (newText) => {
+    updateTextParts();
+  }
+);
+
+onMounted(() => {
+  updateTextParts();
+
+  // 随机生成字符串到 text.value
+//   setInterval(() => {
+//     const randomString = Math.random().toString(36).substring(2, 2 + textLength);
+//     text.value += randomString;
+//   }, 1000);
+});
+
+onUnmounted(() => {
+  // 清理资源
+});
+
+// 处理输入事件
+const handleInput = (value: string) => {
+  text.value = value;
+};
+</script>
+
+<style lang="css" scoped>
+p {
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap; /* 保持文本在同一行 */
+}
+
+span {
+  display: inline-block;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+  animation: fadeIn 0.5s ease-in-out forwards;
+}
+
+.editor-container {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+  animation: fadeIn 0.5s ease-in-out forwards;
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+</style>

src/pages/test4.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Test3 from './test3.vue';
+
+
+const text = ref("some text");
+</script>
+
+<template>
+    <Test3 :text="text"></Test3>
+</template>01

src/typed-router.d.ts

@@ -23,5 +23,9 @@ declare module 'vue-router/auto-routes' {
     '/auth/continue': RouteRecordInfo<'/auth/continue', '/auth/continue', Record<never, never>, Record<never, never>>,
     '/auth/login': RouteRecordInfo<'/auth/login', '/auth/login', Record<never, never>, Record<never, never>>,
     '/guest/': RouteRecordInfo<'/guest/', '/guest', Record<never, never>, Record<never, never>>,
+    '/test': RouteRecordInfo<'/test', '/test', Record<never, never>, Record<never, never>>,
+    '/test2': RouteRecordInfo<'/test2', '/test2', Record<never, never>, Record<never, never>>,
+    '/test3': RouteRecordInfo<'/test3', '/test3', Record<never, never>, Record<never, never>>,
+    '/test4': RouteRecordInfo<'/test4', '/test4', Record<never, never>, Record<never, never>>,
   }
 }