加入dockerfile

Dockerfile

@@ -0,0 +1,16 @@
+FROM nginx:1.25.3-alpine
+
+LABEL "authors"="suguo.yao"
+LABEL "email"="ysg@myschools.me"
+
+ENV TZ=Asia/Shanghai \
+  LANG=C.UTF-8 \
+  APP_DIR=/usr/share/nginx/html 
+
+COPY dist/. ${APP_DIR}
+
+WORKDIR ${APP_DIR}
+
+EXPOSE 80
+
+RUN ln -snf /usr/share/zoneinfo/${TZ} /etc/localtime && echo ${TZ} > /etc/timezone 

src/router/index.js

@@ -10,6 +10,11 @@ const routes = [
     path: '/about',
     name: 'About',
     component: ()=> import("../views/about.vue"),
+  },
+  {
+    path: '/dialog',
+    name: 'Dialog',
+    component: ()=> import("../views/dialog.vue"),
   }
 ];
 

src/views/dialog.vue

@@ -0,0 +1,79 @@
+<template>
+    <div id="app">
+      <el-container>
+        <el-header>
+          <h1>模拟对话框页面</h1>
+        </el-header>
+        <el-main>
+          <el-card>
+            <template #header>
+              <div class="card-header">消息列表</div>
+            </template>
+            <div class="message-list">
+              <div v-for="(message, index) in messages" :key="index" class="message">
+                <span class="sender">{{ message.sender }}</span>
+                <span class="content">{{ message.content }}</span>
+              </div>
+            </div>
+          </el-card>
+        </el-main>
+        <el-footer>
+          <el-input v-model="newMessage" placeholder="输入消息" style="width: 80%; margin-right: 10px;"></el-input>
+          <el-button @click="sendMessage">发送</el-button>
+        </el-footer>
+      </el-container>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref } from 'vue';
+  
+  const messages = ref([
+    { sender: '系统', content: '欢迎来到模拟对话框页面！' }
+  ]);
+  const newMessage = ref('');
+  
+  const sendMessage = () => {
+    if (newMessage.value.trim()) {
+      messages.value.push({ sender: '你', content: newMessage.value });
+      newMessage.value = '';
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .el-header {
+    background-color: #f5f5f5;
+    padding: 20px;
+    text-align: center;
+  }
+  
+  .el-main {
+    padding: 20px;
+  }
+  
+  .card-header {
+    font-weight: bold;
+  }
+  
+  .message-list {
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 10px;
+  }
+  
+  .message {
+    margin-bottom: 10px;
+  }
+  
+  .sender {
+    font-weight: bold;
+    margin-right: 10px;
+  }
+  
+  .el-footer {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+  }
+  </style>