当前位置： 首页 > news >正文

创新项目实训开发日志3

news 来源：原创 2025/4/22 6:05:46

一、开发简介

核心工作内容：前端部分需求分析、前端部分页面设计、前端部分页面实现

工作时间：第八周

二、前端部分需求分析

  • 用户user

名称类型补充
idid
name默认差异处理
phone
passward
avatorurl

  • 对话dialog

名称类型补充
id
user_Id
name名称、默认从第一个提问中提取

  • 消息message

名称类型补充
id
dialog_id标明该消息属于哪个对话
sequence序号，便于得到对话记录
state标记模型回答还是客户提问
content内容
time提问时间

  • 收藏favority

名称类型补充
id
user_Id
message_id
time
  1. 注册
    1. 手机号
    2. 密码
    3. 密码二次确认
  2. 登录
    1. 手机号
    2. 密码
    3. 头像
  3. 重置密码
    1. 由于未开启验证码服务，且此功能并非该项目的核心业务，为了方便，直接重置为123456
  4. 新建对话记录
    1. 对话时间
    2. 用户提问
    3. 模型回答
    4. 对话记录
  5. 查询对话记录
    1. 记录最后一次对话时间
    2. 对话标题
    3. 对话记录
  6. 工具栏
    1. 打开抽屉
    2. 新建对话
    3. 点赞记录
  7. 重命名对话记录
    1. 对话标题
  8. 删除对话记录
  9. 提问模型
    1. 用户
    2. 时间
    3. 提问内容

  10. 模型

    1. 对话名称

    2. 回答

    3. 应答时间

  11. 复制、重新生成、点赞

三、前端部分页面设计

  • 登录界面

登录界面

  • 注册界面

  • 主页界面

  • 工具栏

  • 智能化问答

四、前端部分页面实现

  • 登录界面的实现

<!--* @FileDescription: 登录* @Author: Nevertheless* @Date: 2025.3.25* @LastEditors: Nevertheless* @LastEditTime: 2025.4.10--><script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue'//头像
const state = reactive({circleUrl:'https://cloud-rise.oss-cn-shanghai.aliyuncs.com/001.jpg',
})
const { circleUrl } = toRefs(state)
//登录数据
const loginData = ref({phone: '',password: ''
})
//手机号
const validatePhone = (rule, value, callback) => {const phoneRegex = /^1[3456789]\d{9}$/;if (!value) {callback(new Error('Please input phone number'));} else if (!phoneRegex.test(value)) {callback(new Error('Phone number must be 11 digits'));} else {callback();}
}
//校验规则
const rules = {phone: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ validator: validatePhone, message: '11位数字', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' }]
}// //调用后台接口，完成登录
// import { loginService } from '../../api/user.js'
// import { ElMessage } from 'element-plus'
// import { useRouter } from 'vue-router'
// import { useTokenStore } from '../../stores/token.js'
// const router = useRouter()
// const tokenStore = useTokenStore();
// const login = async () => {
//     //registerData是一个响应式对象，如果要获取值，需要.value
//     let result = await loginService(loginData.value);
//     ElMessage.success(result.data.message ? result.data.message : '登录成功');
//     //把得到的token存储到pinia中
//     tokenStore.setToken(result.data.data);
//     //跳转到首页 路由完成跳转
//     router.push('/');
// }
</script><template><div id="background"><el-row id="login"><el-col :span="9" id="left"><div id="avatar"><el-avatar :size="150" :src="circleUrl" fit="cover" /></div><el-text id="WELCOME">WELCOME</el-text></el-col><el-col :span="15" id="right"><el-form ref="form" size="large" autocomplete="off" :model="loginData" :rules="rules"><el-form-item prop="phone" id="inputPhone"><!-- <el-input :prefix-icon="User" placeholder="请输入手机号" v-model="registerData.phone" class="rounded-input" input-styles="border-radius: 15px;"></el-input> --><input class="rounded-input" placeholder=" 手机号:" v-model="loginData.phone"></el-form-item><el-form-item prop="password" id="inputPassword"><!-- <el-input name="password" type="password" :prefix-icon="Lock" placeholder="请输入密码"v-model="registerData.password"></el-input> --><input type="password" class="rounded-input" placeholder=" 密  码:" v-model="loginData.password"></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox style="color: #FFFFFF;" class="myCheckBox">记住密码</el-checkbox><el-link :underline="false" style="color: #FFFFFF;">重置密码？</el-link></div></el-form-item><!-- 登录按钮 --><el-form-item id="loginButton"><el-button id="button1" @click="login">立 即 登 录</el-button></el-form-item></el-form></el-col></el-row></div>
</template><style scoped>
#background {height: 100vh;/*视图高度，1vh 是视口高度的 1%。*/width: 100%;background-image: url("@/assets/images/login_background.jpg");background-size: 100% 100%;/*宽，高(无需使用background-repeat: no-repeat;)*/}#login {height: 45%;width: 38%;position: absolute;top: 0;bottom: 10%;left: 45%;right: 0;margin: auto;background-color: rgba(127, 127, 127, 0.25);/*background:rgba(255,0,0,1);*/border-radius: 40px;border-color: #D9D9D9;border-style: solid;border-width: 5px;
}#left {border-right: 5px solid #D9D9D9;border-top-left-radius: 30px;border-bottom-left-radius: 25px;}#avatar {width: 100%;height: auto;margin-top: 25%;display: flex;justify-content: center;/*水平居中*/
}#WELCOME {font-size: 2rem;font-family: Tahoma,serif;color: #FFFFFF;margin-top: 25%;display: flex;justify-content: center;
}#inputPhone {width: 60%;height: 20%;margin-top: 20%;margin-left: 50%;transform: translateX(-50%);
}#inputPassword {width: 60%;margin-top: 10%;margin-left: 50%;transform: translateX(-50%);
}.rounded-input {width: 100%;height: 175%;border: none;border-radius: 40px;background-color: rgba(255, 255, 255, 0.7);color: rgb(127, 127, 127);text-align: center;
}.rounded-input:focus {outline: none;border: none;
}.flex {width: 120%;margin-top: 5%;margin-left: 50%;transform: translateX(-50%);display: flex;justify-content: space-between;
}#loginButton {width: 40%;height: 10%;margin-left: 50%;transform: translateX(-50%);
}#button1 {width: 100%;border: none;border-radius: 35px;background-color: rgba(51, 63, 80, 0.7);color: #FFFFFF;
}
</style>
<style>
.myCheckBox.is-bordered.is-checked {border-color: rgba(51, 63, 80, 0.7);
}.myCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {color: rgba(51, 63, 80, 0.7);
}.myCheckBox .el-checkbox__input.is-checked .el-checkbox__inner,
.myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {border-color: rgba(51, 63, 80, 0.7);background-color: rgba(51, 63, 80, 0.7);
}.myCheckBox .el-checkbox__input.is-focus .el-checkbox__inner {border-color: rgba(51, 63, 80, 0.7);
}
</style>
  • 布局

<!--* @FileDescription: 布局* @Author: Nevertheless* @Date: 2025.3.25* @LastEditors: Nevertheless* @LastEditTime: 2025.4.10--><script setup>
/**导入组件**/
import {CaretBottom, Crop, EditPen, SwitchButton, User} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus'/**导入函数**/
import {userInfoService} from '@/api/user.js'
import useUserInfoStore from '@/stores/userInfo.js'
import {useTokenStore} from '@/stores/token.js'
import DarkModeSlider from "@/components/DarkModeSlider.vue";/**初始化**/
const router = useRouter();
const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();/**定义函数**///获取用户基本信息
const getUserInfo = async () => {//调用接口let result = await userInfoService();//数据存储到pinia中userInfoStore.setInfo(result.data.data);
}//处理命令
const handleCommand = (command) => {//判断指令if (command === 'logout') {//退出登录ElMessageBox.confirm('您确认要退出吗?','温馨提示',{confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}).then(async () => {//退出登录//1.清空pinia中存储的token以及个人信息tokenStore.removeToken()userInfoStore.removeInfo()//2.跳转到登录页面router.push('/login')ElMessage({type: 'success',message: '退出登录成功',})}).catch(() => {ElMessage({type: 'info',message: '用户取消了退出登录',})})} else {//路由router.push('' + command)}
}/**页面初始化**/
getUserInfo();//进入页面获取用户基本信息
</script><template><!-- element-plus中的容器 --><el-container class="layout-container"><!-- 左侧菜单 --><el-aside width="200px"><div class="aside-first">logo+tool</div><el-menubackground-color="#232323"text-color="#fff"active-text-color="#ffd04b"default-active="1"router><!--用户管理--><el-sub-menu index="1"><template #title><el-icon><UserFilled/></el-icon><span>菜单一</span></template><el-menu-item index="/user/Info"><el-icon><User/></el-icon><span>子菜单一</span></el-menu-item></el-sub-menu><el-sub-menu index="2"><template #title><el-icon><UserFilled/></el-icon><span>菜单二</span></template><el-menu-item index="/user/Info"><el-icon><User/></el-icon><span>子菜单一</span></el-menu-item><el-menu-item index="/user/Info"><el-icon><User/></el-icon><span>子菜单二</span></el-menu-item></el-sub-menu></el-menu></el-aside><!-- 右侧主区域 --><el-container><!-- 头部区域 --><el-header><div>云起的管理员：<strong>{{ userInfoStore.info.username }}</strong></div><!-- 模式切换——浅色/深色 --><dark-mode-slider></dark-mode-slider><!-- 下拉菜单 --><!-- command: 条目被点击后会触发,在事件函数上可以声明一个参数,接收条目对应的指令 --><el-dropdown placement="bottom-end" @command="handleCommand"><span class="el-dropdown__box"><el-avatar :src="userInfoStore.info.avatarUrl?userInfoStore.info.avatarUrl:avatar"/><el-icon><CaretBottom/></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item command="/personal/Info" :icon="User">基本资料</el-dropdown-item><el-dropdown-item command="/personal/ChangeAvatar" :icon="Crop">更换头像</el-dropdown-item><el-dropdown-item command="/personal/ChangePassword" :icon="EditPen">重置密码</el-dropdown-item><el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item></el-dropdown-menu></template></el-dropdown></el-header><!-- 中间区域 --><el-main class="el-main"><router-view></router-view></el-main><!-- 底部区域 --><el-footer>基于Deepseek的408考研小助手</el-footer></el-container></el-container></template><style lang="scss" scoped>
.layout-container {height: 100vh;.el-aside {background-color: $global-background-color-contrast;//&__logo {//  height: 120px;//  background: url('@/images/logo.png') no-repeat center / 120px auto;//}.aside-first {@include hold(100, 10);background-color: #42b983;}.el-menu {border-right: none;//background-color: $global-background-color-contrast;//color: $global-font-color-contrast;////.sub-menu{//  background-color: $global-background-color-contrast;//  color: $global-font-color-contrast;//  .el-menu-item {//    background-color: $global-background-color-contrast;//    color: $global-font-color-contrast;//  }//  .el-menu-item.is-active {//    color: #6681FA;//    background-color: #EAEEFF;//  }//}//.sub-menu:hover{//  background-color: $global-background-color;//}}}.el-header {background-color: $global-background-color;display: flex;align-items: center;justify-content: space-between;.el-dropdown__box {display: flex;align-items: center;.el-icon {color: #999;margin-left: 10px;}&:active,&:focus {outline: none;}}}.el-main {background-color: $global-background-color;}.el-footer {display: flex;align-items: center;justify-content: center;font-size: 14px;color: #666;}
}
</style>
  • 卡片

<!--* @FileDescription: 主页* @Author: Nevertheless* @Date: 2025.4.3* @LastEditors: Nevertheless* @LastEditTime: 2025.4.10--><script setup>
import {testPostmanSever} from "@/api/test";
import DarkModeSlider from "@/components/DarkModeSlider.vue";/*** @description: 测试Postman的后端是否能正常运行* @return void*/
const testPostmanSeverFunction = async () => {let result = await testPostmanSever();console.log(result)
}testPostmanSeverFunction()
</script><template><el-card class="card">这是一个卡片</el-card>
</template><style lang="scss" scoped>
.card {@include content-center-flex;@include hold(99, 99);@include position-center-box("column,row");background-color: $global-background-color;color: $global-font-color;
}
</style>

相关文章：

  • 维度建模工具箱 提纲与总结
  • Spring如何通过XML注册Bean
  • Ldap高效数据同步- Delta-Syncrepl复制模式配置实战手册（上）
  • 第 4 篇：平稳性 - 时间序列分析的基石
  • Github 热点项目 Jumpserver开源堡垒机让服务器管理效率翻倍
  • 前端笔记-Axios
  • 云原生与AI的关系是怎么样的？
  • Unreal Engine中FRotator与FQuat在赛车游戏方向盘控制中的协同应用解析
  • Android Kotlin+Compose首个应用
  • SpringBoot整合JWT Token：构建安全无状态认证体系的最佳实践
  • 把dll模块注入到游戏进程的方法_远线程注入
  • 目标检测篇---R-CNN梳理
  • linux驱动框架——i2c驱动模块的probe过程
  • 重构便携钢琴专业边界丨特伦斯便携钢琴V30Pro定义新一代便携电钢琴
  • 120.在 Vue3 中使用 OpenLayers 实现清空删除所有图层功能
  • AI驱动下的企业学习：人力资源视角下的范式重构与价值觉醒
  • 【数据结构和算法】3. 排序算法
  • java多线程的内存可见性问题，volatile是干什么的？
  • 基于Python（Django）+SQLite实现（Web）校园助手
  • Time to event ：Kaplan-Meier曲线、Log Rank检验与Shiny R
  • 民建吉林省委提案：当前生育政策集中鼓励多孩生育，应该转变思路
  • 上海又现昆虫新物种：体长仅1.5毫米，却是凶猛的捕食者
  • 同济研究生开发AI二维码拿下大奖，新一代00开发者掀起AI创业潮
  • 体坛联播｜皇马补时绝杀毕尔巴鄂，利物浦最快下轮即可夺冠
  • 2025中国互联网企业家座谈会在京召开
  • 春山谷雨前，并手摘芳烟