ETC/SAFEKISO
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
DESKTOP-RS140KH\IdeaPad
2026-04-07 14:50:23 +09:00
commit b4e485502b
4778 changed files with 2017091 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
safekiso_admin/pages/admin/lab/chatting.vue Normal file
View File

@@ -0,0 +1,187 @@
<!-- This example requires Tailwind CSS v2.0+ -->
<template>
<div class="">
<div class="container mx-auto">
<div class="min-w-full border rounded lg:grid lg:grid-cols-3">
<div class="hidden lg:col-span-3 lg:block">
<div class="flex flex-col min-h-screen w-full">
<div
class="relative flex items-center p-3 border-b border-gray-300"
>
<img
class="object-cover w-10 h-10 rounded-full"
src="https://cdn.pixabay.com/photo/2018/01/15/07/51/woman-3083383__340.jpg"
alt="username"
/>
<span class="block ml-2 font-bold text-gray-600">
채팅 상황에서의 API 사용 예{{ ' ' }}
<p class="text-xs">
{{
messageList[messageList.length - 1][
'elapsedServer'
] != ''
? messageList[
messageList.length - 1
]['elapsedServer'] +
' / ' +
messageList[
messageList.length - 1
]['elapsed']
: ''
}}
</p>
</span>
<span
class="absolute w-3 h-3 bg-green-600 rounded-full left-10 top-3"
>
</span>
</div>
<div class="flex-grow bg-gray-50 justify-center">
<div
class="relative w-full p-6 overflow-y-auto max-h-fit"
>
<ul class="space-y-2">
<li
v-for="message in messageList"
:key="message['serial']"
class="flex"
:class="
message['left'] == true
? 'justify-start'
: 'justify-end'
"
>
<div
class="relative max-w-xl px-4 py-2 text-gray-700 rounded shadow"
>
<span class="block">{{
message['text']
}}</span>
</div>
</li>
</ul>
</div>
</div>
<div
class="flex items-center justify-between w-full p-3 border-t border-gray-300"
>
<input
v-model="justEnteredText"
type="text"
placeholder="Message"
class="block w-full py-2 pl-4 mx-3 bg-gray-100 rounded-full outline-none focus:text-gray-700"
name="message"
required
@keyup.enter="checkChatInput"
/>
<button type="button" @click="checkChatInput">
<svg
class="w-5 h-5 text-gray-500 origin-center transform rotate-90"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"
/>
</svg>
</button>
</div>
<div
class="flex items-center justify-end w-full p-3 border-t border-gray-300"
></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({
middleware: 'check-auth-user',
});
let tmpIdx = 0;
const messageList = ref([
{
serial: tmpIdx++,
left: true,
text: '안녕하세요?',
elapsedServer: '',
elapsed: '',
},
{
serial: tmpIdx++,
left: false,
text: '테스트 하러 들어 왔습니다.',
elapsedServer: '',
elapsed: '',
},
{
serial: tmpIdx++,
left: true,
text: '테스트 하면 이 문장이죠.',
elapsedServer: '',
elapsed: '',
},
{
serial: tmpIdx++,
left: true,
text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
elapsedServer: '',
elapsed: '',
},
]);
const justEnteredText = ref('');
const inPregressFlag = ref(false);
const elispe = ref(0);
async function checkChatInput() {
console.log('huk');
if (justEnteredText.value == '') {
return;
}
if (inPregressFlag.value == true) {
return;
}
inPregressFlag.value = true;
const startTime = performance.now();
const responseJson = await _crossCtl.doFilter('', {
text: justEnteredText.value,
mode: 'filter',
});
const endTime = performance.now();
inPregressFlag.value = false;
elispe.value = endTime - startTime;
console.log('responseJson=', responseJson);
if (responseJson['Status']['Code'] == 2000) {
messageList.value.push({
serial: tmpIdx++,
left: false,
text: responseJson['Filtered'],
elapsedServer: responseJson['Elapsed'].replace('0 s, ', ''),
elapsed: elispe.value.toFixed(2) + 'ms',
});
justEnteredText.value = '';
} else {
alert(responseJson['Status']['Message']);
}
}
</script>