feat:整合批改

src/views/Home/component/ContentSelector/ContentSelector.vue

@@ -0,0 +1,101 @@
+<!--
+  Description: 批改界面中 用于显示写作过程记录的组件
+  Author: XiaoYu
+  Created Date: 2024-7-27
+-->
+<!-- TODO:还是demo，三个内容还不能用 -->
+<template>  
+  <div class="content-selector">  
+    <!-- 按钮组 -->  
+    <div class="button-group">
+      <el-button color="#597D3B" class="submit-button" @click="selectContent(0)">AI对话</el-button>
+      <el-button color="#597D3B" class="submit-button" @click="selectContent(1)">字典查询</el-button>
+      <el-button color="#597D3B" class="submit-button" @click="selectContent(2)">浏览器搜索</el-button>  
+    </div>  
+  
+    <!-- 内容输入框，带有实线边框 -->  
+    <div class="content-input-box">  
+      <!-- 根据selectedContent的值动态显示内容 -->  
+      <div v-if="selectedContent === 0" class="content-item">  
+        <!-- 这里可以是一个真正的输入框或其他内容显示区域 -->  
+        <textarea disabled placeholder="AI对话的内容将显示在这里..." class="input-area"></textarea>  
+      </div>  
+      <div v-if="selectedContent === 1" class="content-item">  
+        <textarea disabled placeholder="字典查询的结果将显示在这里..." class="input-area"></textarea>  
+      </div>  
+      <div v-if="selectedContent === 2" class="content-item">  
+        <textarea disabled placeholder="浏览器搜索的结果将显示在这里..." class="input-area"></textarea>  
+      </div>  
+    </div>  
+  </div>  
+</template>
+
+<script>  
+export default {  
+  name: 'ContentSelector', // 组件名称  
+  data() {  
+    return {  
+      // selectedContent用于跟踪当前选中的内容索引  
+      selectedContent: 0,  
+    };  
+  },  
+  methods: {  
+    // selectContent方法用于更新selectedContent的值  
+    selectContent(index) {  
+      this.selectedContent = index;  
+    },  
+  },  
+};  
+</script>
+
+
+
+<style scoped>
+
+.content-selector {  
+  display: flex;  
+  align-items: flex-start; /* 确保按钮和内容输入框垂直对齐 */  
+  padding: 10px;  
+}  
+  
+.button-group {  
+  display: flex;  
+  flex-direction: column; /* 设置为竖向排列 */  
+  margin-right: 20px; /* 与内容输入框之间保持一定距离 */  
+}   
+  
+.button-group button {  
+  margin: 5px 0;  
+  padding: 10px 20px;  
+  font-size: 16px;  
+  cursor: pointer;  
+  border-radius: 5px; 
+  
+}  
+  
+/* .button-group button:hover {  
+  background-color: #e0e0e0;  
+}   */
+  
+.content-input-box {  
+  flex-grow: 1; /* 占据剩余空间 */  
+  border: 2px solid #ccc; /* 实线边框 */  
+  padding: 10px;  
+  border-radius: 5px;  
+  position: relative; /* 为内部元素定位做准备（如果需要的话） */  
+}  
+  
+ 
+  
+textarea {  
+  width: 100%; /* 宽度占满内容输入框 */  
+  height: 150px; /* 示例高度，可以根据需要调整 */  
+  border: none; /* 移除默认的textarea边框 */  
+  resize: none; /* 禁止用户调整大小 */  
+  background-color: #f9f9f9; /* 可选的背景色 */  
+  padding: 10px;  
+  box-sizing: border-box; /* 使得padding和border不会增加元素的宽度 */  
+}  
+
+
+</style>

src/views/Home/component/ContentSelector/index.scss

@@ -0,0 +1,46 @@
+
+.content-selector {  
+  display: flex;  
+  align-items: flex-start; /* 确保按钮和内容输入框垂直对齐 */  
+  padding: 20px;  
+}  
+  
+.button-group {  
+  margin-right: 20px;  
+}  
+  
+.button-group button {  
+  margin: 5px 0;  
+  padding: 10px 20px;  
+  font-size: 16px;  
+  cursor: pointer;  
+  background-color: lightgreen;  
+  border: 1px solid lightgray;  
+  border-radius: 5px;  
+}  
+  
+.button-group button:hover {  
+  background-color: #e0e0e0;  
+}  
+  
+.content-input-box {  
+  flex-grow: 1; /* 占据剩余空间 */  
+  border: 2px solid #ccc; /* 实线边框 */  
+  padding: 10px;  
+  border-radius: 5px;  
+  position: relative; /* 为内部元素定位做准备（如果需要的话） */  
+}  
+  
+.content-item {  
+  /* 这里不需要特别的样式，除非你想对每个内容项进行特定的样式设置 */  
+}  
+  
+.input-area {  
+  width: 100%; /* 宽度占满内容输入框 */  
+  height: 100px; /* 示例高度，可以根据需要调整 */  
+  border: none; /* 移除默认的textarea边框 */  
+  resize: none; /* 禁止用户调整大小 */  
+  background-color: #f9f9f9; /* 可选的背景色 */  
+  padding: 10px;  
+  box-sizing: border-box; /* 使得padding和border不会增加元素的宽度 */  
+}  

vite.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
     }
   },
   server: {
-    host: 'localhost',
-    port: 3000
+    host: '127.0.0.1',
+    port: 4000
   }
 })