From b6997d4158d6f07a2c5a95cef2a4fb915b724494 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Fri, 5 Sep 2025 16:00:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=E7=BA=BF=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=EF=BC=88=E7=A7=BB=E5=8A=A8=E7=AB=AF=EF=BC=89=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/system.png                     | Bin 0 -> 9940 bytes
 src/assets/img/user.png                       | Bin 0 -> 10781 bytes
 src/router/modules/demo.ts                    |   4 +
 src/store/modules/chat.ts                     |  22 +
 src/views/demo/chat/components/ChatInput.vue  | 133 +++++
 .../demo/chat/components/ChatMessages.vue     | 467 ++++++++++++++++++
 src/views/demo/chat/index.vue                 |  25 +
 7 files changed, 651 insertions(+)
 create mode 100644 src/assets/img/system.png
 create mode 100644 src/assets/img/user.png
 create mode 100644 src/store/modules/chat.ts
 create mode 100644 src/views/demo/chat/components/ChatInput.vue
 create mode 100644 src/views/demo/chat/components/ChatMessages.vue
 create mode 100644 src/views/demo/chat/index.vue

diff --git a/src/assets/img/system.png b/src/assets/img/system.png
new file mode 100644
index 0000000000000000000000000000000000000000..1bfc4cceb66995d27185ed3543cc44f68a09aa1b
GIT binary patch
literal 9940
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
PY5*BYMTsggqu~DmwmAB-

literal 0
HcmV?d00001

diff --git a/src/assets/img/user.png b/src/assets/img/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..8906ceaa567848dd0136aed1f07fc823470f4d59
GIT binary patch
literal 10781
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
KGF8%MLH`Fps)#%Q

literal 0
HcmV?d00001

diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index 40cdff1..89ee2be 100644
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@@ -118,6 +118,10 @@ const titleArr = [
         key: 'scssLiveTranslate',
         title: 'SCSS → CSS 实时翻译器',
     },
+    {
+        key: 'chat',
+        title: '聊天（智能客服）（移动端查看）',
+    },
 ];
 
 // @/views/demo/**/*.vue
diff --git a/src/store/modules/chat.ts b/src/store/modules/chat.ts
new file mode 100644
index 0000000..5281758
--- /dev/null
+++ b/src/store/modules/chat.ts
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+
+export default defineStore('chat', {
+    state: () => ({
+        messages: [
+            {
+                role: 'system',
+                content: '查询中，请稍后！',
+                cmd: 'common',
+                timestamp: new Date().getTime(),
+            },
+        ],
+    }),
+    actions: {
+        addMessage(message: Array<[]>) {
+            this.messages.push({
+                ...message,
+                timestamp: new Date().getTime(),
+            });
+        },
+    },
+});
diff --git a/src/views/demo/chat/components/ChatInput.vue b/src/views/demo/chat/components/ChatInput.vue
new file mode 100644
index 0000000..3b3b334
--- /dev/null
+++ b/src/views/demo/chat/components/ChatInput.vue
@@ -0,0 +1,133 @@
+<template>
+    <div class="chat-input">
+        <!-- 输入框 -->
+        <div class="input-box">
+            <input
+                type="text"
+                class="input"
+                :value="input"
+                readonly
+                placeholder=""
+            />
+        </div>
+
+        <!-- 数字键盘 -->
+        <div class="keyboard-grid">
+            <div
+                v-for="(key, index) in keyboardKeys"
+                :key="index"
+                class="keyboard-key"
+                :class="{ 'keyboard-key-delete': key === 'delete', 'keyboard-key-confirm': key === 'confirm' }"
+                @click="handleInput(key)"
+            >
+                <span v-if="key === 'delete'">
+                    <span>删除</span>
+                </span>
+                <span v-else-if="key === 'confirm'">发送</span>
+                <span v-else>{{ key }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import useChatStore from '@/store/modules/chat';
+
+const $store = useChatStore();
+
+const addMessage = (message) => {
+    $store.addMessage({
+        role: 'user',
+        cmd: 'common',
+        senderName: '匿名',
+        content: message,
+    });
+    input.value = '';
+};
+
+const input = ref('');
+const keyboardKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#', 'delete', 'confirm'];
+
+const handleInput = (char) => {
+    if (char === 'delete') {
+        input.value = input.value.slice(0, -1);
+    } else if (char === 'confirm') {
+        addMessage(input.value);
+    } else {
+        input.value += char;
+    }
+};
+</script>
+
+<style scoped>
+.chat-input {
+    position: relative;
+    height: 320px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    z-index: 9;
+}
+.input-box {
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    height: 70px;
+    padding: 15px;
+}
+.input {
+    box-sizing: border-box;
+    border-radius: 8px;
+    overflow: hidden;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 2px solid transparent;
+    background:
+        linear-gradient(white, white) padding-box,
+        linear-gradient(45deg, #f6855c, #e29cf9, #5cacfe) border-box;
+    padding-left: 5px;
+}
+.keyboard-grid {
+    position: relative;
+    width: 100%;
+    height: 250px;
+    background: #d1d5db;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    grid-gap: 10px 6px;
+    padding: 10px 6px;
+    box-sizing: border-box;
+}
+.keyboard-grid .keyboard-key {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 25px;
+    border-radius: 5px;
+    box-shadow: 0 1px 0 0 #898a8d;
+    background: #fff;
+}
+.keyboard-key-delete,
+.keyboard-key-confirm {
+    grid-column: 4;
+    font-size: 18px !important;
+}
+.keyboard-key-delete {
+    grid-row: 1 / span 2;
+}
+.keyboard-key-confirm {
+    grid-row: 3 / span 2;
+}
+.keyboard-key-delete > span {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-self: center;
+}
+.keyboard-key-delete > span > span {
+    margin-top: 5px;
+}
+</style>
diff --git a/src/views/demo/chat/components/ChatMessages.vue b/src/views/demo/chat/components/ChatMessages.vue
new file mode 100644
index 0000000..df9a59a
--- /dev/null
+++ b/src/views/demo/chat/components/ChatMessages.vue
@@ -0,0 +1,467 @@
+<template>
+    <div class="chat-wrap">
+        <div class="chat-messages">
+            <div
+                v-for="(message, index) in messages"
+                :key="index"
+                :class="['chat-message', message.role]"
+            >
+                <template v-if="message.role === 'user'">
+                    <div
+                        class="chat-user-content"
+                        v-if="message.cmd === 'common'"
+                    >
+                        <div class="chat-user-info">
+                            <span>{{ handleTimestamp(message.timestamp) }}</span>
+                            <span>{{ message.senderName }}</span>
+                        </div>
+                        <div class="chat-content">
+                            <span>{{ message.content }}</span>
+                        </div>
+                    </div>
+                    <img
+                        class="chat-avatar"
+                        src="@/assets/img/user.png"
+                    />
+                </template>
+                <template v-if="message.role === 'system'">
+                    <img
+                        class="chat-avatar"
+                        src="@/assets/img/system.png"
+                    />
+                    <template v-if="message.cmd === 'common'">
+                        <div class="chat-content">
+                            <span>{{ message.content }}</span>
+                        </div>
+                    </template>
+                    <template v-else-if="message.cmd === 'select_case'">
+                        <div class="chat-content">
+                            <span>{{ message.content }}</span>
+                        </div>
+                        <div class="case-container">
+                            <div class="case-item title">
+                                <span>报案号后8位</span>
+                                <span>报案时间</span>
+                            </div>
+                            <div
+                                class="case-item content"
+                                v-for="(item, index) in message.extra.caseList"
+                                :key="index"
+                                @click="chooseCase(item.caseNo)"
+                                :class="{ disabled: currentCase, active: item.caseNo === currentCase }"
+                            >
+                                <span>{{ item.caseNo }}</span>
+                                <span>{{ item.date }}</span>
+                            </div>
+                            <div
+                                class="case-item button"
+                                :class="{ disabled: currentCase }"
+                            >
+                                <div>其他案件</div>
+                            </div>
+                        </div>
+                    </template>
+                    <template
+                        v-else-if="
+                            message.cmd === 'select_loss_type' ||
+                            message.cmd === 'select_repair_type' ||
+                            message.cmd === 'select_localtion' ||
+                            message.cmd === 'confirm_localtion'
+                        "
+                    >
+                        <div class="chat-content">
+                            <span>{{ message.content }}</span>
+                            <div class="base-btn-container">
+                                <div
+                                    v-for="(item, index) in message.extra.list"
+                                    :key="index"
+                                    class="item"
+                                    :class="{
+                                        disabled: getCurrentName(message.cmd),
+                                        choose: item.id === getCurrentName(message.cmd),
+                                        localtion: message.cmd === 'select_localtion',
+                                    }"
+                                    @click="chooseType(item.id, message.cmd)"
+                                >
+                                    <div v-if="message.cmd === 'select_loss_type'">{{ item.id }}-{{ item.text }}</div>
+                                    <div v-else>{{ item.text }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick, onMounted } from 'vue';
+import useChatStore from '@/store/modules/chat';
+
+const $store = useChatStore();
+
+const messages = computed(() => $store.messages);
+const currentCase = ref(null);
+const currentLossType = ref(null);
+const currentRepairType = ref(null);
+const currentLocation = ref(null);
+const confirmLocation = ref(null);
+
+const addMessage = (message) => {
+    $store.addMessage(message);
+};
+
+const getCurrentName = (cmd) => {
+    switch (cmd) {
+        case 'select_loss_type':
+            return currentLossType.value;
+        case 'select_repair_type':
+            return currentRepairType.value;
+        case 'select_localtion':
+            return currentLocation.value;
+        case 'confirm_localtion':
+            return confirmLocation.value;
+    }
+};
+
+const chooseCase = (caseNo) => {
+    currentCase.value = caseNo;
+    addMessage({
+        role: 'system',
+        cmd: 'select_loss_type',
+        content: '请根据页面，选择定损类型，本车定损请按1，对方车定损请按2，物损请按3，人伤请按4',
+        extra: {
+            list: [
+                {
+                    id: '1',
+                    text: '本车定损',
+                },
+                {
+                    id: '2',
+                    text: '对方车定损',
+                },
+                {
+                    id: '3',
+                    text: '物损',
+                },
+                {
+                    id: '4',
+                    text: '人伤',
+                },
+            ],
+        },
+    });
+};
+
+const chooseType = (id, cmd) => {
+    if (cmd === 'select_loss_type') {
+        currentLossType.value = id;
+        addMessage({
+            role: 'user',
+            cmd: 'common',
+            content: id,
+        });
+        addMessage({
+            role: 'system',
+            cmd: 'select_repair_type',
+            content: '请选择您的车辆维修位置，已在修理厂请按1，有意向修理厂请按2，无意向修理厂请按3',
+            extra: {
+                list: [
+                    {
+                        id: '1',
+                        text: '已在修理厂',
+                    },
+                    {
+                        id: '2',
+                        text: '意向修理厂',
+                    },
+                    {
+                        id: '3',
+                        text: '无意向修理厂',
+                    },
+                ],
+            },
+        });
+    } else if (cmd === 'select_repair_type') {
+        currentRepairType.value = id;
+        addMessage({
+            role: 'user',
+            cmd: 'common',
+            content: id,
+        });
+        addMessage({
+            role: 'system',
+            cmd: 'select_localtion',
+            content: '请点击页面上定位功能，确认您的修车位置',
+            extra: {
+                list: [
+                    {
+                        id: '1',
+                        text: '地理位置授权',
+                    },
+                ],
+            },
+        });
+    } else if (cmd === 'select_localtion') {
+        currentLocation.value = id;
+        addMessage({
+            role: 'system',
+            cmd: 'confirm_localtion',
+            content: '修车地址为京城大道100号正确请按1，修改地址请按2',
+            extra: {
+                list: [
+                    {
+                        id: '1',
+                        text: '正确',
+                    },
+                    {
+                        id: '2',
+                        text: '修改地址',
+                    },
+                ],
+            },
+        });
+    } else if (cmd === 'confirm_localtion') {
+        confirmLocation.value = id;
+        addMessage({
+            role: 'user',
+            cmd: 'common',
+            content: id,
+        });
+        addMessage({
+            role: 'system',
+            cmd: 'common',
+            content: '已安排定损员XX为您处理，请保持电话畅通，稍后定损员会联系您。祝您平安，再见',
+        });
+    }
+};
+
+const handleTimestamp = (timestamp) => {
+    const date = new Date(timestamp);
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${hours}:${minutes}`;
+};
+
+watch(
+    messages,
+    (newVal) => {
+        if (newVal.length > 0) {
+            nextTick(() => {
+                const container = document.querySelector('.chat-wrap');
+                if (container) {
+                    container.scrollTop = container.scrollHeight;
+                }
+            });
+        }
+    },
+    {
+        deep: true,
+    }
+);
+
+onMounted(() => {
+    setTimeout(() => {
+        addMessage({
+            role: 'system',
+            cmd: 'select_case',
+            content: '请根据页面展示选择您要定损的按键',
+            extra: {
+                caseList: [
+                    {
+                        caseNo: '09152401',
+                        date: '2025年07月25日12点',
+                    },
+                    {
+                        caseNo: '09152402',
+                        date: '2025年07月25日14点',
+                    },
+                    {
+                        caseNo: '09152403',
+                        date: '2025年07月25日16点',
+                    },
+                    {
+                        caseNo: '09152404',
+                        date: '2025年07月25日18点',
+                    },
+                ],
+            },
+        });
+    }, 500);
+});
+</script>
+
+<style scoped>
+.chat-wrap {
+    flex: 1;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+.chat-messages {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    padding: 10px 0;
+    box-sizing: border-box;
+}
+.chat-message {
+    display: flex;
+    justify-content: flex-start;
+    padding: 8px;
+    flex-wrap: wrap;
+}
+.chat-message.system {
+    justify-content: flex-start;
+}
+.chat-message.user {
+    justify-content: flex-end;
+}
+.chat-avatar {
+    display: block;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+}
+.chat-content {
+    max-width: 70%;
+    display: inline-block;
+    background: #fff;
+    padding: 8px 12px;
+    margin: 16px 10px 0;
+    font-size: 14px;
+    color: #000;
+    line-height: 24px;
+    border-radius: 0px 10px 10px 10px;
+}
+.chat-user-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.chat-user-content .chat-user-info {
+    margin: 0 10px;
+    font-size: 12px;
+    color: #a0a0a0;
+}
+.chat-user-content .chat-user-info > span:first-child {
+    margin-right: 10px;
+}
+.chat-user-content .chat-content {
+    background: #ffe9e0;
+    margin-top: 5px;
+    border-radius: 10px 0px 10px 10px;
+}
+.case-container {
+    box-sizing: border-box;
+    margin: 16px;
+    padding: 10px 10px 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #fff;
+    border-radius: 8px;
+}
+.case-container .case-item {
+    width: 100%;
+    padding: 8px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+}
+.case-container .case-item.title {
+    color: rgba(0, 0, 0, 0.4);
+}
+.case-container .case-item.content > span:first-child {
+    font-size: 18px;
+    font-weight: bold;
+}
+.case-container .case-item.content > span:last-child {
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.6);
+}
+.case-container .case-item.content > span:last-child > .van-icon {
+    margin-left: 5px;
+    color: #f39354;
+}
+.case-container .case-item.content.active span {
+    color: #f39354 !important;
+}
+.case-container .case-item.content.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+}
+.case-container .case-item.content.disabled span {
+    color: rgba(0, 0, 0, 0.2);
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.6;
+}
+.case-container .case-item.button {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+.case-container .case-item.button > div {
+    box-sizing: border-box;
+    width: calc(50% - 5px);
+    height: 34px;
+    border: 1px solid #f39354;
+    border-radius: 8px;
+    font-size: 14px;
+    color: #f39354;
+    line-height: 34px;
+    text-align: center;
+    margin-bottom: 10px;
+}
+.case-container .case-item.button > div:nth-child(2n) {
+    margin-left: 10px;
+}
+.case-container .case-item.button.disabled div {
+    border: 1px solid #e4e4e4;
+    color: rgba(0, 0, 0, 0.2);
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.base-btn-container {
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    padding-top: 10px;
+}
+.base-btn-container .item {
+    box-sizing: border-box;
+    width: calc(50% - 5px);
+    height: 34px;
+    border: 1px solid #f39354;
+    border-radius: 8px;
+    font-size: 14px;
+    color: #f39354;
+    line-height: 34px;
+    text-align: center;
+    margin-bottom: 10px;
+}
+.base-btn-container .item:nth-child(2n) {
+    margin-left: 10px;
+}
+.base-btn-container .item.disabled {
+    border: 1px solid #e4e4e4;
+    color: rgba(0, 0, 0, 0.2);
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.6;
+}
+.base-btn-container .item.choose {
+    background: #f3f3f3;
+}
+.base-btn-container .item.localtion {
+    width: 100%;
+}
+</style>
diff --git a/src/views/demo/chat/index.vue b/src/views/demo/chat/index.vue
new file mode 100644
index 0000000..bb9ea6c
--- /dev/null
+++ b/src/views/demo/chat/index.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import ChatInput from './components/ChatInput.vue';
+import ChatMessages from './components/ChatMessages.vue';
+</script>
+
+<template>
+    <div class="chat-container">
+        <!-- 聊天内容区域 -->
+        <ChatMessages />
+
+        <!-- 底部输入区域 -->
+        <ChatInput />
+    </div>
+</template>
+
+<style scoped>
+.chat-container {
+    width: 100vw;
+    height: calc(100vh - 48px - 33px);
+    display: flex;
+    flex-direction: column;
+    background-color: #f7f8fa;
+}
+</style>