first commit

src/pages/ai.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const userMessage = ref('')
+const messages = ref([
+  { sender: 'ai', text: 'Welcome! How can I assist you today?' },
+])
+
+function sendMessage() {
+  if (userMessage.value.trim() === '')
+    return
+
+  messages.value.push({ sender: 'user', text: userMessage.value })
+
+  // Simulate AI response (for example purposes)
+  setTimeout(() => {
+    messages.value.push({
+      sender: 'ai',
+      text: `I'm here to assist with your questions: "${userMessage.value}"`,
+    })
+  }, 1000)
+
+  userMessage.value = ''
+}
+</script>
+
+<template>
+  <view class="chat-page mx-4 flex flex-col rounded-xl shadow-lg">
+    <view class="chat-window flex-1 overflow-auto border p-4">
+      <view v-for="(message, index) in messages" :key="index" class="mb-2">
+        <view
+          v-if="message.sender === 'ai'"
+          class="inline-block max-w-max rounded-xl bg-white p-2 text-left text-green-600 font-medium shadow-md"
+        >
+          <span>AI:</span> {{ message.text }}
+        </view>
+        <view
+          v-else
+          class="ml-auto inline-block max-w-max rounded-xl from-purple-400 via-pink-500 to-red-500 bg-gradient-to-r p-2 text-right text-white font-medium shadow-md"
+        >
+          <span>User:</span> {{ message.text }}
+        </view>
+      </view>
+    </view>
+    <view class="input-area mx-2 flex items-center gap-2 p-4">
+      <wd-input v-model="userMessage" placeholder="Type your message..." class="flex-1" size="large" />
+      <wd-button custom-class="shadow" type="primary" @click="sendMessage">
+        发送
+      </wd-button>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.chat-page {
+  // #ifdef H5
+  height: calc(100vh - 144px);
+  // #endif
+
+  // #ifdef APP-PLUS || MP-WEIXIN
+  height: calc(100vh - 188px);
+  // #endif
+
+}
+
+// .chat-window {
+//   flex-grow: 1;
+//   overflow-y: auto;
+//   overflow-x: hidden;
+// }
+
+// .input-area {
+//   flex-shrink: 0;
+// }
+</style>
+
+<route lang="json">
+{
+  "layout": "home",
+  "style": {
+    "navigationStyle": "custom"
+  }
+}
+</route>