|
|
@@ -0,0 +1,158 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
|
|
|
+ <!-- Header Section -->
|
|
|
+ <header class="bg-white dark:bg-gray-800 shadow">
|
|
|
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <!-- Company Logo -->
|
|
|
+ <svg class="h-8 w-8 mr-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
+ <circle cx="12" cy="12" r="10"></circle>
|
|
|
+ <line x1="12" y1="8" x2="12" y2="12"></line>
|
|
|
+ <line x1="12" y1="16" x2="12" y2="16"></line>
|
|
|
+ </svg>
|
|
|
+ <h1 class="text-2xl font-bold text-gray-900 dark:text-white">公司名称</h1>
|
|
|
+ </div>
|
|
|
+ <div class="flex space-x-4 items-center">
|
|
|
+ <!-- Language Selection Dropdown -->
|
|
|
+ <select v-model="language" class="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
|
|
+ <option value="en">English</option>
|
|
|
+ <option value="es">Español</option>
|
|
|
+ <option value="zh">中文</option>
|
|
|
+ </select>
|
|
|
+ <!-- User Authentication Status -->
|
|
|
+ <span class="text-gray-700 dark:text-gray-300">{{ isAuthenticated ? 'Logged In' : 'Guest' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <!-- Main Chat Interface -->
|
|
|
+ <main class="flex-grow flex relative">
|
|
|
+ <div class="w-full max-w-4xl mx-auto p-4">
|
|
|
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 relative">
|
|
|
+ <div class="chat-window overflow-y-scroll max-h-96 mb-4">
|
|
|
+ <div v-for="(message, index) in messages" :key="index" class="mb-4">
|
|
|
+ <div v-if="message.type === 'user'" class="flex justify-end">
|
|
|
+ <div class="bg-blue-100 dark:bg-gray-700 p-3 rounded-l-lg rounded-tr-lg text-right">
|
|
|
+ {{ message.text }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="flex justify-start">
|
|
|
+ <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-r-lg rounded-tl-lg text-left">
|
|
|
+ {{ message.text }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <input v-model="userInput" @keyup.enter="sendMessage" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white mr-2" placeholder="Type your message...">
|
|
|
+ <button @click="sendMessage" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
|
|
|
+ Send
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="mt-2">
|
|
|
+ <p v-if="suggestions.length" class="text-gray-700 dark:text-gray-300">Suggestions:</p>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(suggestion, index) in suggestions" :key="index" class="cursor-pointer text-blue-600 dark:text-blue-400" @click="sendSuggestion(suggestion)">
|
|
|
+ {{ suggestion }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="mt-4">
|
|
|
+ <button @click="escalateIssue" class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700">
|
|
|
+ Escalate Issue
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <!-- Sidebar Section -->
|
|
|
+ <aside class="hidden lg:block w-64 bg-white dark:bg-gray-800 shadow">
|
|
|
+ <div class="p-4">
|
|
|
+ <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Knowledge Base</h2>
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <li v-for="(category, index) in knowledgeBaseCategories" :key="index" class="text-gray-700 dark:text-gray-300">
|
|
|
+ <strong>{{ category.title }}:</strong>
|
|
|
+ <ul class="ml-4 list-disc">
|
|
|
+ <li v-for="(article, idx) in category.articles" :key="idx" class="cursor-pointer text-blue-600 dark:text-blue-400" @click="openArticle(article)">
|
|
|
+ {{ article.title }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <button @click="toggleLanguage" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
|
|
|
+ Toggle Language
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Footer Section -->
|
|
|
+ <footer class="bg-white dark:bg-gray-800 shadow">
|
|
|
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 text-center">
|
|
|
+ <p class="text-gray-700 dark:text-gray-300">Status: Online</p>
|
|
|
+ <p class="text-gray-700 dark:text-gray-300">Contact IT Support: support@company.com</p>
|
|
|
+ <p class="text-gray-700 dark:text-gray-300">Version 1.0.0 © 2025 Company Name</p>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+
|
|
|
+// State Variables
|
|
|
+const userInput = ref('')
|
|
|
+const messages = ref([])
|
|
|
+const language = ref('en')
|
|
|
+const isAuthenticated = ref(false)
|
|
|
+const suggestions = ref([
|
|
|
+ 'How to reset a password?',
|
|
|
+ 'How to set up VPN access?',
|
|
|
+ 'How to install software?'
|
|
|
+])
|
|
|
+const knowledgeBaseCategories = ref([
|
|
|
+ {
|
|
|
+ title: 'Password Management',
|
|
|
+ articles: [
|
|
|
+ { title: 'Reset Password Guide', link: '#' },
|
|
|
+ { title: 'Change Password Policy', link: '#' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Software Installation',
|
|
|
+ articles: [
|
|
|
+ { title: 'Install Software Guide', link: '#' },
|
|
|
+ { title: 'Troubleshoot Installation Issues', link: '#' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// Methods
|
|
|
+const sendMessage = () => {
|
|
|
+ if (userInput.value.trim()) {
|
|
|
+ messages.value.push({ type: 'user', text: userInput.value })
|
|
|
+ // Simulate bot response
|
|
|
+ setTimeout(() => {
|
|
|
+ messages.value.push({ type: 'bot', text: 'Here is your answer...' })
|
|
|
+ }, 1000)
|
|
|
+ userInput.value = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const sendSuggestion = (suggestion) => {
|
|
|
+ userInput.value = suggestion
|
|
|
+ sendMessage()
|
|
|
+}
|
|
|
+
|
|
|
+const escalateIssue = () => {
|
|
|
+ alert('Escalating issue to IT support team...')
|
|
|
+}
|
|
|
+
|
|
|
+const openArticle = (article) => {
|
|
|
+ alert(`Opening article: ${article.title}`)
|
|
|
+}
|
|
|
+
|
|
|
+const toggleLanguage = () => {
|
|
|
+ language.value = language.value === 'en' ? 'es' : language.value === 'es' ? 'zh' : 'en'
|
|
|
+}
|
|
|
+</script>
|
genlitex