twh_eastasia/pure-admin-thin
1
0
Fork 0
mirror of https://github.com/pure-admin/pure-admin-thin.git synced 2025-12-15 23:00:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 修改登录界面，登录验证使用后端接口，修改侧边栏

Browse Source
This commit is contained in:
cheng
2024-02-16 23:19:49 +08:00
parent ff27074ebd
commit a3887dde7a
23 changed files with 2273 additions and 1973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/views/error/403.vue
View File

@@ -1,70 +0,0 @@
<script setup lang="ts">
import { useRouter } from "vue-router";
import noAccess from "@/assets/status/403.svg?component";
defineOptions({
name: "403"
});
const router = useRouter();
</script>
<template>
<div class="flex justify-center items-center h-[640px]">
<noAccess />
<div class="ml-12">
<p
class="font-medium text-4xl mb-4 dark:text-white"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 100
}
}"
>
403
</p>
<p
class="mb-4 text-gray-500"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 300
}
}"
>
抱歉，你无权访问该页面
</p>
<el-button
type="primary"
@click="router.push('/')"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 500
}
}"
>
返回首页
</el-button>
</div>
</div>
</template>

70
src/views/error/404.vue
View File

@@ -1,70 +0,0 @@
<script setup lang="ts">
import { useRouter } from "vue-router";
import noExist from "@/assets/status/404.svg?component";
defineOptions({
name: "404"
});
const router = useRouter();
</script>
<template>
<div class="flex justify-center items-center h-[640px]">
<noExist />
<div class="ml-12">
<p
class="font-medium text-4xl mb-4 dark:text-white"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 100
}
}"
>
404
</p>
<p
class="mb-4 text-gray-500"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 300
}
}"
>
抱歉，你访问的页面不存在
</p>
<el-button
type="primary"
@click="router.push('/')"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 500
}
}"
>
返回首页
</el-button>
</div>
</div>
</template>

70
src/views/error/500.vue
View File

@@ -1,70 +0,0 @@
<script setup lang="ts">
import { useRouter } from "vue-router";
import noServer from "@/assets/status/500.svg?component";
defineOptions({
name: "500"
});
const router = useRouter();
</script>
<template>
<div class="flex justify-center items-center h-[640px]">
<noServer />
<div class="ml-12">
<p
class="font-medium text-4xl mb-4 dark:text-white"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 100
}
}"
>
500
</p>
<p
class="mb-4 text-gray-500"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 300
}
}"
>
抱歉，服务器出错了
</p>
<el-button
type="primary"
@click="router.push('/')"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 500
}
}"
>
返回首页
</el-button>
</div>
</div>
</template>

22
src/views/login/index.vue
View File

@@ -8,7 +8,7 @@ import type { FormInstance } from "element-plus";
import { useLayout } from "@/layout/hooks/useLayout";
import { useUserStoreHook } from "@/store/modules/user";
import { initRouter, getTopMenu } from "@/router/utils";
import { bg, avatar, illustration } from "./utils/static";
import { bg, illustration } from "./utils/static";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
@@ -33,8 +33,10 @@ dataThemeChange();
const { title } = useNav();
const ruleForm = reactive({
username: "admin",
password: "admin123"
// username: "admin",
// password: "admin123"
username: "",
password: ""
});
const onLogin = async (formEl: FormInstance | undefined) => {
@@ -43,7 +45,10 @@ const onLogin = async (formEl: FormInstance | undefined) => {
await formEl.validate((valid, fields) => {
if (valid) {
useUserStoreHook()
.loginByUsername({ username: ruleForm.username, password: "admin123" })
.loginByUsername({
username: ruleForm.username,
password: ruleForm.password
})
.then(res => {
if (res.success) {
// 获取后端路由
@@ -51,6 +56,12 @@ const onLogin = async (formEl: FormInstance | undefined) => {
router.push(getTopMenu(true).path);
message("登录成功", { type: "success" });
});
} else {
// TODO： 下面这个不能正确运行
// 弹窗显示 "登录失败"，并重新返回到登录界面
alert("登录失败");
loading.value = false;
formEl.resetFields(); // 重置表单字段
}
});
} else {
@@ -95,7 +106,8 @@ onBeforeUnmount(() => {
</div>
<div class="login-box">
<div class="login-form">
<avatar class="avatar" />
<!-- <avatar class="avatar" /> -->
<img src="@/assets/login/logo.jpg" />
<Motion>
<h2 class="outline-none">{{ title }}</h2>
</Motion>

75
src/views/permission/button/index.vue
View File

@@ -1,75 +0,0 @@
<script setup lang="ts">
import { type CSSProperties, computed } from "vue";
import { hasAuth, getAuths } from "@/router/utils";
defineOptions({
name: "PermissionButton"
});
const elStyle = computed((): CSSProperties => {
return {
width: "85vw",
justifyContent: "start"
};
});
</script>
<template>
<el-space direction="vertical" size="large">
<el-tag :style="elStyle" size="large" effect="dark">
当前拥有的code列表：{{ getAuths() }}
</el-tag>
<el-card shadow="never" :style="elStyle">
<template #header>
<div class="card-header">组件方式判断权限</div>
</template>
<Auth value="btn_add">
<el-button type="success"> 拥有code：'btn_add' 权限可见 </el-button>
</Auth>
<Auth :value="['btn_edit']">
<el-button type="primary"> 拥有code：['btn_edit'] 权限可见 </el-button>
</Auth>
<Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
<el-button type="danger">
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
</el-button>
</Auth>
</el-card>
<el-card shadow="never" :style="elStyle">
<template #header>
<div class="card-header">函数方式判断权限</div>
</template>
<el-button type="success" v-if="hasAuth('btn_add')">
拥有code：'btn_add' 权限可见
</el-button>
<el-button type="primary" v-if="hasAuth(['btn_edit'])">
拥有code：['btn_edit'] 权限可见
</el-button>
<el-button
type="danger"
v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
>
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
</el-button>
</el-card>
<el-card shadow="never" :style="elStyle">
<template #header>
<div class="card-header">
指令方式判断权限（该方式不能动态修改权限）
</div>
</template>
<el-button type="success" v-auth="'btn_add'">
拥有code：'btn_add' 权限可见
</el-button>
<el-button type="primary" v-auth="['btn_edit']">
拥有code：['btn_edit'] 权限可见
</el-button>
<el-button type="danger" v-auth="['btn_add', 'btn_edit', 'btn_delete']">
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
</el-button>
</el-card>
</el-space>
</template>

66
src/views/permission/page/index.vue
View File

@@ -1,66 +0,0 @@
<script setup lang="ts">
import { initRouter } from "@/router/utils";
import { storageSession } from "@pureadmin/utils";
import { type CSSProperties, ref, computed } from "vue";
import { useUserStoreHook } from "@/store/modules/user";
import { usePermissionStoreHook } from "@/store/modules/permission";
defineOptions({
name: "PermissionPage"
});
const elStyle = computed((): CSSProperties => {
return {
width: "85vw",
justifyContent: "start"
};
});
const username = ref(useUserStoreHook()?.username);
const options = [
{
value: "admin",
label: "管理员角色"
},
{
value: "common",
label: "普通角色"
}
];
function onChange() {
useUserStoreHook()
.loginByUsername({ username: username.value, password: "admin123" })
.then(res => {
if (res.success) {
storageSession().removeItem("async-routes");
usePermissionStoreHook().clearAllCachePage();
initRouter();
}
});
}
</script>
<template>
<el-space direction="vertical" size="large">
<el-tag :style="elStyle" size="large" effect="dark">
模拟后台根据不同角色返回对应路由（具体参考完整版pure-admin代码）
</el-tag>
<el-card shadow="never" :style="elStyle">
<template #header>
<div class="card-header">
<span>当前角色：{{ username }}</span>
</div>
</template>
<el-select v-model="username" @change="onChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-card>
</el-space>
</template>

9
src/views/qa/chat/index.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
defineOptions({
name: "QAchat"
});
</script>
<template>
<h1>问答系统</h1>
</template>

27
src/views/qa/triad/index.vue Normal file
View File

@@ -0,0 +1,27 @@
<script setup lang="ts">
import { ref } from "vue";
import { getHelloMessage } from "@/api/routes";
defineOptions({
name: "QAtriad"
});
const message = ref(""); // 响应式变量，用于存储返回的消息
const handleClick = async () => {
try {
const response = await getHelloMessage();
message.value = response.message; // 更新消息
} catch (error) {
console.error("Error fetching message:", error);
message.value = "Error fetching message";
}
};
</script>
<template>
<h1>三元组管理</h1>
<button @click="handleClick">获取消息</button>
<p v-if="message">{{ message }}</p>
<!-- 显示消息 -->
</template>

2
src/views/welcome/index.vue
View File

@@ -5,5 +5,5 @@ defineOptions({
</script>
<template>
<h1>Pure-Admin-Thin（非国际化版本）</h1>
<h1>首页</h1>
</template>