prototype_design/src/views/ChatView.vue

<template>
  <div class="chat-container">
    <aside class="sidebar">
      <h2>需求</h2>
      <ul class="demand-list">
        <li v-for="(demand, index) in demands" :key="index">
          <a href="#"><i class="fas fa-eye"></i> {{ demand }}</a>
        </li>
      </ul>
    </aside>
    <main class="chat-area">
      <section class="chat-header">
        <h2>聊天界面</h2>
      </section>
      <section class="chat-body">
        <div class="message user-message">
          <p>请输入您的问题</p>
        </div>
        <div class="message bot-message">
          <p>正在建设中...</p>
        </div>
      </section>
      <footer class="chat-footer">
        <form @submit.prevent="sendMessage">
          <input type="text" v-model="message" placeholder="在这里输入消息...">
          <button type="submit" class="send-button">发送</button>
          <label for="upload-file" class="upload-button">上传文件</label>
          <input id="upload-file" type="file" @change="handleFileUpload">
        </form>
      </footer>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      demands: ['需求1', '需求2', '需求3'],
      message: '',
      selectedFile: null
    };
  },
  methods: {
    sendMessage() {
      if (this.message.trim()) {
        // Send message logic here
        this.message = '';
      }
    },
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
      // Handle file upload logic here
    }
  }
};
</script>

<style scoped>
.chat-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 25%;
  background-color: purple;
  color: white;
  padding: 20px;
}

.demand-list {
  list-style-type: none;
  padding: 0;
}

.demand-list li {
  margin: 10px 0;
}

.demand-list a {
  color: white;
  text-decoration: none;
}

.chat-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.chat-header {
  background-color: lightgray;
  padding: 10px;
}

.chat-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
}

.message {
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-message {
  background-color: green;
  align-self: flex-end;
}

.bot-message {
  background-color: lightblue;
  align-self: flex-start;
}

.chat-footer {
  background-color: lightgray;
  padding: 10px;
  display: flex;
  align-items: center;
}

.chat-footer form {
  display: flex;
  flex-grow: 1;
}

.chat-footer input[type="text"] {
  flex-grow: 1;
  border-radius: 5px;
  padding: 5px;
}

.send-button {
  margin-left: 10px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  padding: 5px 10px;
}

.upload-button {
  margin-left: 10px;
  background-color: gray;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  padding: 5px 10px;
}

.upload-button:hover {
  background-color: darkgray;
}

.send-button:hover {
  background-color: darkblue;
}
</style>