CalendarToGac

components/ModalComponents.vue

@@ -9,14 +9,14 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from "vue";
+import { defineProps, defineEmits } from 'vue';
 const props = defineProps({
   visible: Boolean,
   default: false,
 });
-const emit = defineEmits(["close"]);
+const emit = defineEmits(['close']);
 function close() {
-  emit("close");
+  emit('close');
 }
 function onScroll(event) {
   const { scrollTop, scrollHeight, clientHeight } = event.target;

components/addDuty.vue

@@ -1,68 +1,67 @@
 <template>
 	<!-- 背景遮罩 -->
-	<view v-if="visible" class="modalOverlay" @click="closeModal()">
+	<view v-if="props.visible" class="modalOverlay" @click="closeModal">
 		<!-- 添加事项 -->
 		<view class="addContainer" @click.stop>
 
-			<!-- 事项标题和发生按钮 -->
-			<view class="flex-center-horizontal pd-10">
-
+			<!-- 事项标题和发送按钮 -->
+			<view class="flex-center-horizontal pd-10 inputContainer">
 				<input v-model="dutyTitle" class="ft-24 fw-600 dutyTitle" placeholder="在这里记下你的日程待办~"></input>
-
-				<button class="sendDuty_btn" @click="addOneDuty()">
+				<button class="sendDuty_btn" @click="addOneDuty">
 					<image src="/static/sendDuty.png" mode="scaleToFill"></image>
 				</button>
 			</view>
+			<hr />
 
-
-			<!-- --------------纯静态待调整------------------ -->
-			<view class="ml-10">
+			<!-- 更改颜色 -->
+			<view class="ml-10 mt-10">
 				<!-- 样式待更改 -->
-				<button class="changeColor_btn" @click="changeColor()" >
-					<view class="color" :style="{backgroundColor: color}"></view>
+				<button class="changeColor_btn" @click="changeColor" >
+					<view class="color" :style="{backgroundColor: props.color}"></view>
 					背景颜色
 				</button>
 			</view>
 
 			<!-- 备忘部分 -->
-
 			<view class="flex-x m-5">
 				<image class="moreInfo_icon" src="/static/moreInfo.png"></image>
 				<textarea v-model="dutyDescription" class="addInfo" placeholder="输入备忘"></textarea>
-
 			</view>
+
 		</view>
 
 	</view>
 </template>
 
 <script setup>
-
-
-	import { defineProps,defineEmits,ref} from "vue";
-	const dutyTitle = ref("");
-	const dutyDescription = ref("");	
+	import { defineProps, defineEmits, ref } from "vue";
+
 	const props =defineProps({
 		visible: {
 			type: Boolean,
 			default: false,
 		},
 		color: {
 		  type: String,
-		  default: '#F7DFB4' // 设置默认颜色
+		  default: '#FABAC8' // 设置默认颜色
 		}
 	})
 
 
-	const emit = defineEmits(['closeModal','showChangeColor','addDuty'])
+	const emit = defineEmits(['closeModal','showChangeColor','resetColor','addDuty'])
+
+	const dutyTitle = ref('');
+	const dutyDescription = ref('');
 
 	// 点击背景遮罩关闭
-	function closeModal() {
-		emit("closeModal");
-		console.log("关闭添加日程界面");
+	function closeModal () {
+		dutyTitle.value = '';
+		dutyDescription.value = '';
+		emit("closeModal")
+		emit("resetColor")
+		// console.log("关闭添加日程界面")
 	}
 
-
 	// 增加一个待办事项
 	function addOneDuty() {
 		if (dutyTitle.value.trim() === '') {
@@ -72,18 +71,19 @@
 
 		const newDuty = {
 			title: dutyTitle.value,
-			description: dutyDescription.value
+			description: dutyDescription.value,
+			color:props.color
 		};
 
 		emit('addDuty', newDuty);
 		dutyTitle.value = '';
 		dutyDescription.value = '';
-		console.log("增加了一个待办");
+
+		emit("resetColor")
 	}
-
-	function changeColor() {
-		console.log("更改颜色");
-
+	function changeColor () {
+		// console.log("更改颜色")
+		emit("showChangeColor")
 	}
 </script>
 
@@ -93,17 +93,21 @@
 	  align-items: flex-end;
 	  justify-content: center;
 	  position: fixed;
+	  top: 0;
 	  width: 100%;
 	  height: 100%;
 	  background-color: rgba(227, 226, 226, 0.5);
 	  z-index: 8000;
 	}
 	.addContainer {
-		height: 50vh;
+		/* height: 55vh; */
 		width: 100vw;
 		border-radius: 15px 15px 0 0;
 		background: linear-gradient(180deg, #E8C8FF 19.64%, #F4E4FF 67.76%, #FFFFFF 100%);
 	}
+	.inputContainer {
+		height: 8vh;
+	}
 	.dutyTitle {
 		width: 85%;
 		margin-left: 10px;
@@ -128,7 +132,6 @@
 		width: 16px;
 		height: 16px;
 		background-color: transparent;
-		border: 1px solid #FFFFFF;
 
 	}
 	.changeColor_btn {
@@ -137,7 +140,6 @@
 		box-shadow: none;
 		font-size: 16px;
 		font-weight: 600;
-
 		border-radius: 15px;
 		height:30px;
 		margin: 0;
@@ -147,7 +149,6 @@
 		display: flex;
 		justify-content: space-around;
 		align-items: center;
-
 	}
 	.changeColor_btn::after {
 		border: none;
@@ -158,9 +159,10 @@
 	}
 	.addInfo {
 		width: 90%;
+		height: 30vh;
 		margin:0 auto;
 		font-size: 16px;
 		font-weight: 600;
-		border:1px black solid
+		/* border:1px black solid */
 	}
 </style>

components/aiCom/talk.vue

@@ -3,9 +3,8 @@
 <view>
     <talkMode></talkMode>
     <button @click="requestAllModels()">查看可用模型</button>
-    <button @click="requestChat3_5Per()">普通请求模型</button>
+    <button @click="requestChat3_5Per()">单次请求3.5模型</button>
     <button @click="requestStreamData()">请求流式数据</button>
-    <button @click="requestAi()">封装的两种请求</button>
     <view>{{ data }}</view>
 
 </view>
@@ -18,40 +17,28 @@ import { useStreamData } from '../../request/api'
 import {useUserStone} from '../../store/userStore'
 import api from '../../request/api'
 import talkMode from './talkMode.vue'
-import { useRequestModeStore } from '../../store/requestModeStore'
-import { func } from 'uview-plus/libs/function/test'
 const userStone = useUserStone()
 const {data,startStreaming} = useStreamData(`http://127.0.0.1:8000/LetUsPlan/AI/${userStone.userid}/StreamData`)
-const requestModeStore = useRequestModeStore()
+
 //查看可用模型
 async function requestAllModels(){
 let res = await api.requestAllModels()
 console.log(res)
 }
 
-//发起请求
-function requestAi(){
-if(requestModeStore.stream==false){
-requestChat3_5Per()
-}
-if(requestModeStore.stream==true){
-requestStreamData()
-}
-}
-
-//普通请求
+//单次请求3.5模型
 async function requestChat3_5Per(){
 	//暂时用静态数据测试,详情查阅api文档
 	let data = {
-    model: requestModeStore.model,
+    model: "gpt-3.5-turbo",
     messages: [
         {
             role: "user",
             content: "早上好！"
         },
     ],
-    temperature: requestModeStore.temperature,
-    max_tokens: requestModeStore.max_tokens,
+    temperature: 0.5,
+    max_tokens: 800,
     stream: false,
 
 }
@@ -63,11 +50,11 @@ console.log(res.choices[0].message)
 //请求流式数据
 async function requestStreamData() {
 let data = {  
-	        model:requestModeStore.model,
+	        model:"gpt-3.5-turbo",
             messages:[{"role": "user", "content": "Hello, OpenAI!please give me a long paragraph"}],
             stream:true,
-            temperature: requestModeStore.temperature,
-            max_tokens: requestModeStore.max_tokens,}
+            temperature:0.5,
+            max_tokens:550,}
 	startStreaming(data)
 }
 </script>

components/aiCom/talkMode.vue

@@ -2,82 +2,38 @@
 <template>
     <view  class="flex-y">
         <button @click="visible=!visible">{{ requestModeStore.model }}</button>
-        <view v-if="visible" class="flex-y ">
+        <view v-if="visible" class="flex-y hover_gray">
 
-       <view class="flex-y ">
-        <view class="m-10"> 模型</view>
-          <view v-for="(item,index) in models" :key="index">
-               <view class="hover_gray m-10" @click="chooseModel(index)">{{ item }}</view>
-          </view>
+       <view>模型:{{ model }}
+
 
        </view>
 
-       <view class="flex-x hover_gray m-10">最大生成token数量 <input type="text" class="ml-20" v-model="max_tokens"  :value=max_tokens> </view>
-       <view class="flex-x hover_gray m-10">生成随机度<input type="text" class="ml-20" v-model="temperature" @input="temperatureInput()" :value=temperature> <u-icon name="question-circle" class="hover-question"></u-icon> </view>
-       <view class="flex-x hover_gray m-10">是否启用流式请求:<switch class="ml-20" @change="streamChange" /></view>
+       <view class="flex-x">最大生成token数量{{ max_tokens }}</view>
+       <view class="flex-x">生成随机度{{ temperature }}</view>
+       <view class="flex-x">是否启用流式请求:{{ stream }}</view>
     </view>
 </view>
     </template>
 
     <script setup>
     import {ref} from 'vue'
     import { useRequestModeStore } from '../../store/requestModeStore'
-
     const props = defineProps({
 
     })
 const visible = ref(false)
 const requestModeStore = useRequestModeStore()
-const max_tokens=requestModeStore.max_tokens
-const temperature = requestModeStore.temperature  //介于 0 和 2 之间。较高的值（如 0.8）将使输出更加随机，而较低的值（如 0.2）将使输出更加集中和确定。
-
 
+    const model = ref("gpt-3.5-turbo")
+const max_tokens=ref(1600)
+const temperature = ref(0.5)  //介于 0 和 2 之间。较高的值（如 0.8）将使输出更加随机，而较低的值（如 0.2）将使输出更加集中和确定。
+const stream = ref(false)   
 const models = ref(["gpt-4o","gpt-3.5-turbo"])
-
-
-//确认提交修改温度
-function temperatureInput(){
-    if(temperature.value>2){
-        temperature.value=2
-    }
-   else if(temperature.value<0){
-  temperature.value=0
-    }
-
-}
-
-//修改是否使用流式请求
-function streamChange(e){
-   requestModeStore.stream = e.detail.value
-}
-
-//修改模型
-function chooseModel(index){
-requestModeStore.model = models.value[index]
-}
-
     </script>
 
     <style scopd>
-    .hover_gray:hover{
-        background-color: rgb(243, 241, 241);
-    }
     .hover_gray{
-        color: black;
+        background-color: ;
     }
-    .hover-question:hover::after {
-            content: "介于 0 和 2 之间。较高的值（如 0.8）将使输出更加随机，而较低的值（如 0.2）将使输出更加集中和确定。";
-            position: absolute;
-
-            width: 200px;
-
-            background-color: #333;
-            color: white;
-            padding: 5px;
-            border-radius: 4px;
-            z-index: 9000;
-
-            pointer-events: none; /* 防止伪元素干扰交互 */
-        }
-
     </style>