Skip to content

V
vue-kwan-admin

Kwan的解忧杂货铺@新空间代码工作室 / vue-kwan-admin

通知 38
Star 6
Fork 3
V
vue-kwan-admin
提交 4a12722f 编写于 作者: Kwan的解忧杂货铺@新空间代码工作室's avatar Kwan的解忧杂货铺@新空间代码工作室 🐭
浏览文件
操作

项目开发

上级 55c25a6d
展开全部 显示空白变更内容
内联 并排
Showing with 588 addition and 105 deletion
package-lock.json
浏览文件 @ 4a12722f
此差异已折叠。
package.json
浏览文件 @ 4a12722f
......@@ -7,7 +7,11 @@
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^1.4.0",
"clipboard": "^2.0.11",
"core-js": "^3.6.5",
"dayjs": "^1.11.9",
"element-ui": "^2.15.13",
"vue": "^2.6.11",
"vue-router": "^3.5.2"
},
......
src/components/menus/MyChat.vue 0 → 100644
浏览文件 @ 4a12722f
<template>
<div>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<i class="el-icon-refresh header-button-item" @click="refreshPage"></i>
<el-dropdown>
<i class="el-icon-setting header-button-item"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>新增</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span class="header-button-item">kwan</span>
</el-header>
<el-main>
<el-table :data="userlist" v-loading="loading">
<el-table-column prop="id" label="序号" width="50"></el-table-column>
<el-table-column
prop="question"
label="问题"
width="240"
></el-table-column>
<el-table-column prop="response" label="答案"></el-table-column>
<el-table-column label="创建时间" width="170">
<template slot-scope="props">
{{ props.row.createTime | dateFormat }}
</template>
</el-table-column>
<el-table-column prop="详情" label="详情" width="100">
<template slot-scope="props">
<a href="#" @click.prevent="gotoDetail(props.row.id)">详情</a>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
background
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange"
></el-pagination>
</el-main>
</el-container>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "MyChat",
data() {
return {
// 用户列表数据
userlist: [],
loading: false,
currentPage: 1,
pageSize: 5,
total: 0,
};
},
created() {
// 调用请求数据的方法
this.initCartList();
},
methods: {
refreshPage() {
location.reload();
},
gotoDetail(id) {
this.$router.push("/home/chatinfo/" + id);
},
async initCartList() {
this.loading = true;
const { data: res } = await axios.get(
"http://localhost:8888/chatbot/page",
{
params: {
page: this.currentPage,
pageSize: this.pageSize,
},
}
);
if (res.code === 200) {
this.userlist = res.result.records;
this.total = res.result.total;
}
this.loading = false;
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
this.initCartList();
},
},
};
</script>
<style lang="less" scoped>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
.pagination {
margin-top: 16px;
text-align: right;
}
.header-button-item {
margin-right: 15px;
font-size: 20px;
}
</style>
src/components/subcomponents/MyAside.vue
浏览文件 @ 4a12722f
<template>
<div class="layout-aside-container">
<!-- 左侧边栏列表 -->
<ul class="user-select-none menu">
<li class="menu-item">
<router-link to="/home/users">用户管理</router-link>
</li>
<li class="menu-item">
<router-link to="/home/rights">权限管理</router-link>
</li>
<li class="menu-item">
<router-link to="/home/goods">商品管理</router-link>
</li>
<li class="menu-item">
<router-link to="/home/orders">订单管理</router-link>
</li>
<li class="menu-item">
<router-link to="/home/settings">系统设置</router-link>
</li>
</ul>
</div>
<el-menu
default-active="$route.path"
class="layout-aside-container"
background-color="#fff"
text-color="#000"
active-text-color="#42b983"
>
<router-link to="/home/users">
<el-menu-item index="/users">
<i class="el-icon-user"></i>
<span slot="title">用户管理</span>
</el-menu-item>
</router-link>
<router-link to="/home/chat">
<el-menu-item index="/chat">
<i class="el-icon-chat-line-square"></i>
<span slot="title">对话管理</span>
</el-menu-item>
</router-link>
<router-link to="/home/rights">
<el-menu-item index="/rights">
<i class="el-icon-setting"></i>
<span slot="title">权限管理</span>
</el-menu-item>
</router-link>
<router-link to="/home/goods">
<el-menu-item index="/goods">
<i class="el-icon-goods"></i>
<span slot="title">商品管理</span>
</el-menu-item>
</router-link>
<router-link to="/home/orders">
<el-menu-item index="/orders">
<i class="el-icon-s-order"></i>
<span slot="title">订单管理</span>
</el-menu-item>
</router-link>
<router-link to="/home/settings">
<el-menu-item index="/settings">
<i class="el-icon-setting"></i>
<span slot="title">系统设置</span>
</el-menu-item>
</router-link>
</el-menu>
</template>
<script>
export default {
name: 'MyAside'
}
export default { name: "MyAside" };
</script>
<style lang="less" scoped>
.layout-aside-container {
width: 250px;
height: 100%;
border-right: 1px solid #eaeaea;
}
.menu {
list-style-type: none;
padding: 0;
.menu-item {
line-height: 50px;
font-weight: bold;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
&:hover {
background-color: #efefef;
cursor: pointer;
}
a {
display: block;
color: black;
padding-left: 30px;
&:hover {
text-decoration: none;
}
}
}
}
// 设置路由高亮效果
.router-link-active {
background-color: #efefef;
box-sizing: border-box;
position: relative;
// 伪元素实现路由高亮效果
&::before {
content: ' ';
display: block;
width: 4px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #42b983;
}
}
</style>
src/components/subcomponents/MyHeader.vue
浏览文件 @ 4a12722f
<template>
<div class="layout-header-container d-flex justify-content-between align-items-center p-3">
<div
class="layout-header-container d-flex justify-content-between align-items-center p-3"
>
<!-- 左侧 logo 和 标题区域 -->
<div class="layout-header-left d-flex align-items-center user-select-none">
<!-- logo -->
<img class="layout-header-left-img" src="../../assets/heima.png" alt="" />
<img class="layout-header-left-img" src="../../assets/kwan.png" alt="" />
<!-- 标题 -->
<h4 class="layout-header-left-title ml-3">黑马后台管理系统</h4>
<h4 class="layout-header-left-title ml-3">kwan的解忧杂货铺</h4>
</div>
<!-- 右侧按钮区域 -->
<div class="layout-header-right">
<button type="button" class="btn btn-light" @click="logout">退出登录</button>
<button type="button" class="btn btn-light" @click="logout">
退出登录
</button>
</div>
</div>
</template>
<script>
export default {
name: 'MyHeader',
name: "MyHeader",
methods: {
logout() {
// 1. 清空 token
localStorage.removeItem('token')
localStorage.removeItem("token");
// 2. 跳转到登录页面
this.$router.push('/login')
}
}
}
this.$router.push("/login");
},
},
};
</script>
<style lang="less" scoped>
......
src/components/user/MyChatDetail.vue 0 → 100644
浏览文件 @ 4a12722f
<template>
<div>
<el-button @click="$router.back()">后退</el-button>
<h4 class="text-center">ChatGpt问答详情 --- {{ id }}</h4>
<el-container>
<el-main>
<el-table :data="list">
<el-table-column label="序号" width="50">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column label="问题" width="240">
<template slot-scope="scope">
<span>{{ scope.row.question }}</span>
</template>
</el-table-column>
<el-table-column label="回答">
<template slot-scope="scope">
<span id="td-response">{{ scope.row.response }}</span>
</template>
</el-table-column>
<el-table-column label="创建时间" width="170">
<template slot-scope="scope">
<span>{{ scope.row.createTime | dateFormat }}</span>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
<div class="button-container">
<el-button @click="copyCode">复制回答</el-button>
</div>
</div>
</template>
<script>
// 导入 axios 请求库
import axios from "axios";
import ClipboardJS from "clipboard";
export default {
name: "MyChatDetail",
props: ["id"],
data() {
return {
list: [],
};
},
created() {
// 调用请求数据的方法
this.initChatList();
},
methods: {
// // 封装请求列表数据的方法
async initChatList() {
// 调用 axios 的 get 方法，请求列表数据
const { data: res } = await axios.get(
"http://localhost:8888/chatbot/" + this.id
);
// 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
if (res.code === 200) {
this.list = [
{
id: res.result.id,
question: res.result.question,
response: res.result.response,
createTime: res.result.createTime,
},
];
}
},
copyCode() {
const codeBlock = document.getElementById("td-response");
const range = document.createRange();
range.selectNode(codeBlock);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
selection.removeAllRanges();
this.$message.success("代码已复制到剪贴板");
},
},
};
</script>
<style lang="less" scoped>
.button-container {
position: fixed;
bottom: 0;
right: 0;
margin: 16px;
}
</style>
src/main.js
浏览文件 @ 4a12722f
......@@ -2,11 +2,27 @@ import Vue from 'vue'
import App from './App.vue'
// 导入路由模块
import router from '@/router'
// 引入element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 导入样式
import './assets/css/bootstrap.css'
import './index.css'
// 引入 dayjs 时间处理
import dayjs from "dayjs";
Vue.prototype.$dayjs = dayjs;
// 声明格式化时间的全局过滤器
Vue.filter("dateFormat", function (time) {
// 1. 对 time 进行格式化处理，得到 YYYY-MM-DD HH:mm:ss
// 2. 把 格式化的结果，return 出去
// 直接调用 dayjs() 得到的是当前时间
// dayjs(给定的日期时间) 得到指定的日期
const dtStr = dayjs(time).format("YYYY-MM-DD HH:mm:ss");
return dtStr;
});
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
......
src/router/index.js
浏览文件 @ 4a12722f
......@@ -10,8 +10,11 @@ import Users from '@/components/menus/MyUsers.vue'
import Rights from '@/components/menus/MyRights.vue'
import Goods from '@/components/menus/MyGoods.vue'
import Orders from '@/components/menus/MyOrders.vue'
import Chat from '@/components/menus/MyChat.vue'
import Settings from '@/components/menus/MySettings.vue'
import UserDetail from '@/components/user/MyUserDetail.vue'
import MyChatDetail from '@/components/user/MyChatDetail.vue'
Vue.use(VueRouter)
......@@ -30,9 +33,11 @@ const router = new VueRouter({
{ path: 'rights', component: Rights },
{ path: 'goods', component: Goods },
{ path: 'orders', component: Orders },
{ path: 'chat', component: Chat},
{ path: 'settings', component: Settings },
// 用户详情页的路由规则
{ path: 'userinfo/:id', component: UserDetail, props: true }
{ path: 'userinfo/:id', component: UserDetail, props: true },
{ path: 'chatinfo/:id', component: MyChatDetail, props: true }
]
}
]
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或