zbytest003-2025-02-18 05:31:45

src/App.vue

@@ -1,26 +1,28 @@
 <template>
-  <router-view/>
+  <div id="app">
+    <Sidebar @requirement-selected="handleRequirementSelected"/>
+    <router-view/>
+  </div>
 </template>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-nav {
-  padding: 30px;
-}
+<script>
+import Sidebar from './views/Sidebar.vue';
 
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
+export default {
+  components: {
+    Sidebar,
+  },
+  methods: {
+    handleRequirementSelected(requirement) {
+      // Handle the selected requirement
+    },
+  },
+};
+</script>
 
-nav a.router-link-exact-active {
-  color: #42b983;
+<style>
+#app {
+  display: flex;
+  height: 100vh;
 }
 </style>

src/router/index.js

@@ -1,29 +1,40 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
+import Vue from 'vue';
+import Router from 'vue-router';
 import HomeView from '../views/HomeView.vue';
-import Login from '../views/Login.vue';
 import Chat from '../views/Chat.vue';
+import Login from '../views/Login.vue';
+import Sidebar from '../views/Sidebar.vue';
+import MainContent from '../views/MainContent.vue';
 
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: HomeView
-  },
-  {
-    path: '/login',
-    name: 'Login',
-    component: () => import('../views/Login.vue')
-  },
-  {
-    path: '/chat',
-    name: 'Chat',
-    component: Chat
-  }
-];
+Vue.use(Router);
 
-const router = createRouter({
-  history: createWebHashHistory(location.pathname),
-  routes
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView,
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: Login,
+    },
+    {
+      path: '/chat',
+      name: 'chat',
+      component: Chat,
+    },
+    {
+      path: '/sidebar',
+      name: 'sidebar',
+      component: Sidebar,
+    },
+    {
+      path: '/main',
+      name: 'main',
+      component: MainContent,
+    },
+  ],
 });
 
-export default router;

src/views/MainContent.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="main-content">
+    <div class="chat-interface">
+      <h2>聊天界面</h2>
+      <p>系统将根据上传的文档和您的输入生成个性化回复。</p>
+      <input type="file" @change="onFileChange">
+      <button @click="submitRequirement">提交需求</button>
+      <ul>
+        <li v-for="message in messages" :key="message.id">
+          {{ message.text }}
+        </li>
+      </ul>
+    </div>
+    <div class="document-list">
+      <h2>上传的文档</h2>
+      <ul>
+        <li v-for="document in documents" :key="document.id">
+          <a :href="document.url" target="_blank"><i class="fas fa-file"></i> {{ document.name }}</a>
+          <button @click="removeDocument(document.id)">删除</button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      messages: [
+        { id: 1, text: '您好！请上传您的文档并说明您的需求。' },
+      ],
+      documents: [],
+    };
+  },
+  methods: {
+    onFileChange(event) {
+      const file = event.target.files[0];
+      if (file) {
+        this.documents.push({ id: this.documents.length + 1, name: file.name, url: URL.createObjectURL(file) });
+      }
+    },
+    submitRequirement() {
+      // Logic for submitting a requirement
+    },
+    removeDocument(id) {
+      this.documents = this.documents.filter(doc => doc.id !== id);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.main-content {
+  flex-grow: 1;
+  padding: 20px;
+}
+
+.chat-interface {
+  border: 1px solid #ddd;
+  padding: 20px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.document-list {
+  border: 1px solid #ddd;
+  padding: 20px;
+  border-radius: 4px;
+}
+
+.document-list a {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.document-list i {
+  margin-right: 10px;
+}
+
+.document-list button {
+  background-color: #6c757d;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.document-list button:hover {
+  background-color: #5a6268;
+}
+</style>

src/views/Sidebar.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="sidebar">
+    <div class="fixed-requirements">固定需求</div>
+    <ul>
+      <li v-for="requirement in requirements" :key="requirement.id" @click="selectRequirement(requirement)">
+        {{ requirement.title }}
+      </li>
+    </ul>
+    <button @click="toggleCollapse">{{ isCollapsed ? '>' : '<' }}</button>
+    <button @click="addNewRequirement">添加新需求</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isCollapsed: false,
+      requirements: [
+        { id: 1, title: '需求1' },
+        { id: 2, title: '需求2' },
+        { id: 3, title: '需求3' },
+      ],
+    };
+  },
+  methods: {
+    selectRequirement(requirement) {
+      this.$emit('requirement-selected', requirement);
+    },
+    toggleCollapse() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+    addNewRequirement() {
+      // Logic for adding a new requirement
+    },
+  },
+};
+</script>
+
+<style scoped>
+.sidebar {
+  width: 250px;
+  height: 100%;
+  background-color: #fff;
+  border-right: 1px solid #ddd;
+  padding: 20px;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease-in-out;
+}
+
+.fixed-requirements {
+  position: sticky;
+  top: 0;
+  background-color: #f9f9f9;
+  padding: 10px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+}
+
+.sidebar ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.sidebar li {
+  cursor: pointer;
+  padding: 8px 0;
+  border-radius: 4px;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.sidebar li:hover {
+  background-color: #f1f1f1;
+}
+
+.sidebar button {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #6c757d;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.sidebar button:hover {
+  background-color: #5a6268;
+}
+</style>