1
0
forked from Leaf/amber-ui
This commit is contained in:
ivamp 2024-09-11 12:50:22 +08:00
parent a6bc70b6e7
commit dad993964d
7 changed files with 249 additions and 0 deletions

View File

@ -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",

1
src/components.d.ts vendored
View File

@ -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']
}
}

70
src/pages/test.vue Normal file
View File

@ -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>

60
src/pages/test2.vue Normal file
View File

@ -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>

103
src/pages/test3.vue Normal file
View File

@ -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>

10
src/pages/test4.vue Normal file
View File

@ -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

View File

@ -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>>,
}
}