[feature] 身份信息

This commit is contained in:
lichx 2024-12-30 11:06:50 +08:00
parent 45ea6b7f76
commit 4e767dfa95
4 changed files with 43 additions and 14 deletions

View File

@ -3,7 +3,7 @@ import {useUserStore} from "@/store";
import {storeToRefs} from "pinia";
let store = useUserStore();
const {user, theme} = storeToRefs(store);
const {user, theme,isAdministrator} = storeToRefs(store);
function changeTheme(newTheme: string) {
theme.value = newTheme;
@ -25,13 +25,21 @@ function changeTheme(newTheme: string) {
<div id="info">
<p>欢迎回来{{ user }}</p>
</div>
<div id="identities">
<t-tag v-if="!isAdministrator" shape="round" theme="success" variant="light-outline" @click="isAdministrator = !isAdministrator">
<span>&nbsp &nbsp借阅者</span>
</t-tag>
<t-tag v-if="isAdministrator" shape="round" theme="primary" variant="light-outline" @click="isAdministrator = !isAdministrator">
<span>&nbsp &nbsp管理员</span>
</t-tag>
</div>
</div>
<template #operations>
<t-icon class="t-menu__operations-icon" :name="theme==='light'?'sunny':'moon'"
@click="changeTheme(theme==='light'?'dark':'light')"/>
<!-- <a href="/#/base/homepage">-->
<!-- <t-icon class="t-menu__operations-icon" name="home"/>-->
<!-- </a>-->
<!-- <a href="/#/base/homepage">-->
<!-- <t-icon class="t-menu__operations-icon" name="home"/>-->
<!-- </a>-->
<a href="/#/base/settings">
<t-icon class="t-menu__operations-icon" name="setting"/>
</a>
@ -44,12 +52,12 @@ function changeTheme(newTheme: string) {
<t-layout>
<t-aside id="aside">
<t-menu theme="light" default-value="homepage" style="margin-right: 50px">
<!-- <t-menu-item value="homepage" :to="'/base/homepage'">-->
<!-- <template #icon>-->
<!-- <t-icon name="dashboard"/>-->
<!-- </template>-->
<!-- 主页-->
<!-- </t-menu-item>-->
<!-- <t-menu-item value="homepage" :to="'/base/homepage'">-->
<!-- <template #icon>-->
<!-- <t-icon name="dashboard"/>-->
<!-- </template>-->
<!-- 主页-->
<!-- </t-menu-item>-->
<t-menu-item value="list" :to="'/base/list'">
<template #icon>
<t-icon name="search"/>
@ -145,6 +153,7 @@ function changeTheme(newTheme: string) {
width: 100%;
overflow: auto;
}
/* 设置滚动条的宽度和高度 */
::-webkit-scrollbar {
width: 12px;

View File

@ -4,6 +4,8 @@ import SuperTable from "@/components/super-table.vue";
import type {TableProps} from "tdesign-vue-next";
import {ref} from "vue";
import {useRecordStore} from "@/store/modules/record.ts";
import {useUserStore} from "@/store";
import {storeToRefs} from "pinia";
/*
{
@ -14,6 +16,8 @@ import {useRecordStore} from "@/store/modules/record.ts";
},
*/
const data = useRecordStore().infos;
const {isAdministrator} = storeToRefs(useUserStore());
console.log(isAdministrator.value)
const columns = ref<TableProps['columns']>([
{
colKey: "title",
@ -31,6 +35,13 @@ const columns = ref<TableProps['columns']>([
colKey: "status",
title: "状态",
cell: (_, row: any) => GetTypeHtml(row!)
},
{
colKey: "operation",
title: "操作",
fixed: 'right',
width: 150,
cell: () => GetOperationHtml()
}
]);
@ -50,6 +61,13 @@ function GetTypeHtml({row: {status}}: { row: { status: string } }) {
</t-tag>
}
}
function GetOperationHtml() {
if (!isAdministrator.value)
return <t-button>归还</t-button>
return <t-button>取消预订</t-button>
}
const configurableColumns = ref(['title', 'borrow_date', 'due_date', 'status']);
const indexColumns = ref(['title', 'borrow_date', 'due_date', 'status']);
const defaultDisplayColumns = ref([...configurableColumns.value]);
@ -61,7 +79,8 @@ const pagination = ref<TableProps['pagination']>({
</script>
<template>
<super-table :data="data" :columns="columns" :configurable-columns="configurableColumns" :index-columns="indexColumns" />
<super-table :data="data" :columns="columns" :configurable-columns="configurableColumns"
:index-columns="indexColumns"/>
</template>
<style scoped>

View File

@ -47,10 +47,9 @@ const lightTheme = computed(() => theme.value === 'light');
.info {
margin-top: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: @basic-color;
}
.true-info {

View File

@ -1,9 +1,10 @@
import {defineStore} from "pinia";
interface UserState {
user:string;
user: string;
theme: string;
isLogin: boolean;
isAdministrator: boolean;
}
export const useUserStore = defineStore('User', {
@ -11,6 +12,7 @@ export const useUserStore = defineStore('User', {
user: "AlexJR",
theme: 'light',
isLogin: false,
isAdministrator: false
}),
actions: {
async login() {