[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"; import {storeToRefs} from "pinia";
let store = useUserStore(); let store = useUserStore();
const {user, theme} = storeToRefs(store); const {user, theme,isAdministrator} = storeToRefs(store);
function changeTheme(newTheme: string) { function changeTheme(newTheme: string) {
theme.value = newTheme; theme.value = newTheme;
@ -25,6 +25,14 @@ function changeTheme(newTheme: string) {
<div id="info"> <div id="info">
<p>欢迎回来{{ user }}</p> <p>欢迎回来{{ user }}</p>
</div> </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> </div>
<template #operations> <template #operations>
<t-icon class="t-menu__operations-icon" :name="theme==='light'?'sunny':'moon'" <t-icon class="t-menu__operations-icon" :name="theme==='light'?'sunny':'moon'"
@ -145,6 +153,7 @@ function changeTheme(newTheme: string) {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
} }
/* 设置滚动条的宽度和高度 */ /* 设置滚动条的宽度和高度 */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 12px; width: 12px;

View File

@ -4,6 +4,8 @@ import SuperTable from "@/components/super-table.vue";
import type {TableProps} from "tdesign-vue-next"; import type {TableProps} from "tdesign-vue-next";
import {ref} from "vue"; import {ref} from "vue";
import {useRecordStore} from "@/store/modules/record.ts"; 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 data = useRecordStore().infos;
const {isAdministrator} = storeToRefs(useUserStore());
console.log(isAdministrator.value)
const columns = ref<TableProps['columns']>([ const columns = ref<TableProps['columns']>([
{ {
colKey: "title", colKey: "title",
@ -31,6 +35,13 @@ const columns = ref<TableProps['columns']>([
colKey: "status", colKey: "status",
title: "状态", title: "状态",
cell: (_, row: any) => GetTypeHtml(row!) 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> </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 configurableColumns = ref(['title', 'borrow_date', 'due_date', 'status']);
const indexColumns = ref(['title', 'borrow_date', 'due_date', 'status']); const indexColumns = ref(['title', 'borrow_date', 'due_date', 'status']);
const defaultDisplayColumns = ref([...configurableColumns.value]); const defaultDisplayColumns = ref([...configurableColumns.value]);
@ -61,7 +79,8 @@ const pagination = ref<TableProps['pagination']>({
</script> </script>
<template> <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> </template>
<style scoped> <style scoped>

View File

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

View File

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