🔖 项目重命名.
This commit is contained in:
lijiahangmax
169
orion-visor-ui/src/views/user/info/components/login-history.vue
Normal file
169
orion-visor-ui/src/views/user/info/components/login-history.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<span class="extra-message">
|
||||
<template v-if="user">
|
||||
只展示用户 <span class="user-info">{{ user.nickname }}({{ user.username }})</span> 最近登录的 30 条历史记录
|
||||
</template>
|
||||
<template v-else>
|
||||
只展示最近登录的 30 条历史记录
|
||||
</template>
|
||||
</span>
|
||||
<!-- 加载中 -->
|
||||
<a-skeleton v-if="loading"
|
||||
style="width: 70%;"
|
||||
:animation="true">
|
||||
<a-skeleton-line :rows="4" />
|
||||
</a-skeleton>
|
||||
<!-- 登录历史时间线 -->
|
||||
<a-timeline v-else-if="list.length">
|
||||
<a-timeline-item v-for="item in list"
|
||||
:key="item.id">
|
||||
<!-- 图标 -->
|
||||
<template #dot>
|
||||
<div class="icon-container">
|
||||
<icon-mobile v-if="isMobile(item.userAgent)" />
|
||||
<icon-desktop v-else />
|
||||
</div>
|
||||
</template>
|
||||
<!-- 日志行 -->
|
||||
<div class="log-line">
|
||||
<!-- 地址行 -->
|
||||
<a-space class="address-line">
|
||||
<span class="mr8">{{ item.address }}</span>
|
||||
<span>{{ item.location }}</span>
|
||||
</a-space>
|
||||
<!-- 错误信息行 -->
|
||||
<span class="error-line" v-if="item.result === ResultStatus.FAILED">
|
||||
登录失败: {{ item.errorMessage }}
|
||||
</span>
|
||||
<!-- 时间行 -->
|
||||
<span class="time-line">
|
||||
{{ dateFormat(new Date(item.createTime)) }}
|
||||
</span>
|
||||
<!-- ua -->
|
||||
<span class="ua-line">
|
||||
{{ item.userAgent }}
|
||||
</span>
|
||||
</div>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
<!-- 空 -->
|
||||
<a-empty v-else />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'loginHistory'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { UserQueryResponse, LoginHistoryQueryResponse } from '@/api/user/user';
|
||||
import { ref, onBeforeMount } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { ResultStatus } from '../types/const';
|
||||
import { getCurrentLoginHistory } from '@/api/user/mine';
|
||||
import { getLoginHistory } from '@/api/user/user';
|
||||
import { dateFormat } from '@/utils';
|
||||
import { isMobile } from '@/utils/is';
|
||||
|
||||
const props = defineProps<{
|
||||
user?: UserQueryResponse;
|
||||
}>();
|
||||
|
||||
const list = ref<LoginHistoryQueryResponse[]>([]);
|
||||
|
||||
const { loading, setLoading } = useLoading();
|
||||
|
||||
// 查询操作日志
|
||||
onBeforeMount(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
if (props.user) {
|
||||
// 查询其他用户
|
||||
const { data } = await getLoginHistory(props.user.username);
|
||||
list.value = data;
|
||||
} else {
|
||||
// 查询当前用户
|
||||
const { data } = await getCurrentLoginHistory();
|
||||
list.value = data;
|
||||
}
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main-container {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
padding-left: 48px;
|
||||
}
|
||||
|
||||
.extra-message {
|
||||
margin-bottom: 42px;
|
||||
margin-left: -24px;
|
||||
display: block;
|
||||
color: var(--color-text-3);
|
||||
user-select: none;
|
||||
|
||||
.user-info {
|
||||
color: rgb(var(--primary-6));
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
border-radius: 50%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
color: var(--color-white);
|
||||
background: var(--color-fill-4);
|
||||
font-size: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.arco-timeline-item-content-wrapper) {
|
||||
position: relative;
|
||||
margin-left: 44px;
|
||||
margin-top: -22px;
|
||||
}
|
||||
|
||||
:deep(.arco-timeline-item) {
|
||||
padding-bottom: 36px;
|
||||
|
||||
.arco-timeline-item-dot-custom {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.log-line {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.address-line {
|
||||
color: var(--color-text-1);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.time-line, .ua-line, .error-line {
|
||||
color: var(--color-text-3);
|
||||
font-size: 14px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.error-line {
|
||||
color: rgb(var(--danger-6));
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
139
orion-visor-ui/src/views/user/info/components/user-base-info.vue
Normal file
139
orion-visor-ui/src/views/user/info/components/user-base-info.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<a-spin :loading="loading" style="width: 520px;">
|
||||
<!-- 头像 -->
|
||||
<div class="avatar-container">
|
||||
<div class="avatar-wrapper">
|
||||
<a-avatar :size="88"
|
||||
:style="{ backgroundColor: 'rgb(var(--primary-6))' }">
|
||||
{{ nickname }}
|
||||
</a-avatar>
|
||||
</div>
|
||||
</div>
|
||||
<a-form :model="formModel"
|
||||
ref="formRef"
|
||||
label-align="right"
|
||||
size="medium"
|
||||
:style="{ width: '100%' }"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
:rules="formRules">
|
||||
<!-- 用户名 -->
|
||||
<a-form-item field="username" label="用户名">
|
||||
<a-input v-model="formModel.username" disabled />
|
||||
</a-form-item>
|
||||
<!-- 花名 -->
|
||||
<a-form-item field="nickname" label="花名">
|
||||
<a-input v-model="formModel.nickname" placeholder="请输入花名" />
|
||||
</a-form-item>
|
||||
<!-- 手机号 -->
|
||||
<a-form-item field="mobile" label="手机号">
|
||||
<a-input v-model="formModel.mobile" placeholder="请输入手机号" />
|
||||
</a-form-item>
|
||||
<!-- 邮箱 -->
|
||||
<a-form-item field="email" label="邮箱">
|
||||
<a-input v-model="formModel.email" placeholder="请输入邮箱" />
|
||||
</a-form-item>
|
||||
<!-- 角色 -->
|
||||
<a-form-item field="roles" label="角色" disabled>
|
||||
<a-input-tag v-model="roles" placeholder="角色" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- 操作 -->
|
||||
<div class="handler-container">
|
||||
<a-button type="primary" @click="save">保存</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'userBaseInfo'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { UserUpdateRequest, UserQueryResponse } from '@/api/user/user';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import formRules from '../../user/types/form.rules';
|
||||
import { useUserStore } from '@/store';
|
||||
import { getCurrentUser, updateCurrentUser } from '@/api/user/mine';
|
||||
import { pick } from 'lodash';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { updateUser } from '@/api/user/user';
|
||||
|
||||
const props = defineProps<{
|
||||
user?: UserQueryResponse;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { loading, setLoading } = useLoading();
|
||||
|
||||
const nickname = ref('');
|
||||
const formRef = ref();
|
||||
const formModel = ref<UserUpdateRequest>({});
|
||||
const roles = ref<Array<string>>([]);
|
||||
|
||||
// 修改用户信息
|
||||
const save = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
if (props.user) {
|
||||
// 更新用户
|
||||
await updateUser(formModel.value);
|
||||
} else {
|
||||
// 更新自己
|
||||
await updateCurrentUser(formModel.value);
|
||||
userStore.nickname = formModel.value.nickname;
|
||||
nickname.value = formModel.value.nickname?.substring(0, 1) as string;
|
||||
}
|
||||
Message.success('保存成功');
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载用户信息
|
||||
onMounted(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
let u: UserQueryResponse;
|
||||
if (props.user) {
|
||||
// 从参数中获取
|
||||
u = props.user;
|
||||
} else {
|
||||
// 查询个人信息
|
||||
const { data } = await getCurrentUser();
|
||||
u = data;
|
||||
}
|
||||
formModel.value = pick(u, 'id', 'username', 'nickname', 'mobile', 'email');
|
||||
roles.value = (u.roles || []).map(s => `${s.name}(${s.code})`);
|
||||
nickname.value = u.nickname?.substring(0, 1);
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.avatar-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 4px 0;
|
||||
|
||||
.avatar-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
width: calc(100% / 24 * 18);
|
||||
}
|
||||
}
|
||||
|
||||
.handler-container {
|
||||
display: flex;
|
||||
margin-left: calc(100% / 24 * 6);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="main-container" v-if="render">
|
||||
<!-- 查询头 -->
|
||||
<a-card class="general-card table-search-card">
|
||||
<!-- 查询头组件 -->
|
||||
<operator-log-query-header :visible-user="false"
|
||||
@submit="(e) => table.fetchTableData(undefined, undefined, e)" />
|
||||
</a-card>
|
||||
<!-- 表格 -->
|
||||
<a-card class="general-card table-card">
|
||||
<template #title>
|
||||
<!-- 左侧操作 -->
|
||||
<div class="table-left-bar-handle">
|
||||
<!-- 标题 -->
|
||||
<div class="table-title">
|
||||
操作日志 <span class="user-info" v-if="user">{{ user.nickname }}({{ user.username }})</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 表格组件 -->
|
||||
<operator-log-simple-table ref="table"
|
||||
:current="!user"
|
||||
:base-params="{ userId: user?.id }" />
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'userOperatorLog'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { UserQueryResponse } from '@/api/user/user';
|
||||
import { ref, onBeforeMount } from 'vue';
|
||||
import { useCacheStore, useDictStore } from '@/store';
|
||||
import { dictKeys } from '@/views/user/operator-log/types/const';
|
||||
import OperatorLogQueryHeader from '@/views/user/operator-log/components/operator-log-query-header.vue';
|
||||
import OperatorLogSimpleTable from '@/views/user/operator-log/components/operator-log-simple-table.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
user?: UserQueryResponse;
|
||||
}>();
|
||||
|
||||
const cacheStore = useCacheStore();
|
||||
|
||||
const render = ref();
|
||||
const table = ref();
|
||||
|
||||
onBeforeMount(async () => {
|
||||
// 加载字典值
|
||||
const dictStore = useDictStore();
|
||||
await dictStore.loadKeys(dictKeys);
|
||||
render.value = true;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main-container {
|
||||
padding-left: 16px;
|
||||
|
||||
.table-search-card {
|
||||
padding-top: 8px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
:deep(.arco-card-body) {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
color: rgb(var(--primary-6));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
201
orion-visor-ui/src/views/user/info/components/user-session.vue
Normal file
201
orion-visor-ui/src/views/user/info/components/user-session.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<span class="extra-message">
|
||||
<template v-if="user">
|
||||
用户 <span class="user-info">{{ user.nickname }}({{ user.username }})</span> 所有登录设备的会话列表
|
||||
</template>
|
||||
<template v-else>
|
||||
所有登录设备的会话列表
|
||||
</template>
|
||||
</span>
|
||||
<!-- 加载中 -->
|
||||
<a-skeleton v-if="loading"
|
||||
style="width: 70%;"
|
||||
:animation="true">
|
||||
<a-skeleton-line :rows="4" />
|
||||
</a-skeleton>
|
||||
<!-- 登录会话时间线 -->
|
||||
<a-timeline v-else-if="list.length">
|
||||
<template v-for="item in list"
|
||||
:key="item.loginTime">
|
||||
<a-timeline-item v-if="item.visible">
|
||||
<!-- 图标 -->
|
||||
<template #dot>
|
||||
<div class="icon-container">
|
||||
<icon-mobile v-if="isMobile(item.userAgent)" />
|
||||
<icon-desktop v-else />
|
||||
</div>
|
||||
</template>
|
||||
<!-- 会话行 -->
|
||||
<div class="session-line">
|
||||
<!-- 地址行 -->
|
||||
<a-space class="address-line">
|
||||
<span>{{ item.address }}</span>
|
||||
<span>{{ item.location }}</span>
|
||||
<a-tag v-if="item.current" color="arcoblue">当前会话</a-tag>
|
||||
<a-button v-else-if="!user || hasPermission('infra:system-user:management:offline-session')"
|
||||
style="font-weight: 600;"
|
||||
type="text"
|
||||
size="mini"
|
||||
status="danger"
|
||||
@click="offline(item)">
|
||||
下线
|
||||
</a-button>
|
||||
</a-space>
|
||||
<!-- 时间行 -->
|
||||
<span class="time-line">
|
||||
{{ dateFormat(new Date(item.loginTime)) }}
|
||||
</span>
|
||||
<!-- ua -->
|
||||
<span class="ua-line">
|
||||
{{ item.userAgent }}
|
||||
</span>
|
||||
</div>
|
||||
</a-timeline-item>
|
||||
</template>
|
||||
</a-timeline>
|
||||
<!-- 空 -->
|
||||
<a-empty v-else />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'userSession'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { UserQueryResponse } from '@/api/user/user';
|
||||
import type { UserSessionQueryResponse } from '@/api/user/user';
|
||||
import { ref, onBeforeMount } from 'vue';
|
||||
import { getUserSessionList, offlineUserSession } from '@/api/user/user';
|
||||
import { getCurrentUserSessionList, offlineCurrentUserSession } from '@/api/user/mine';
|
||||
import { dateFormat } from '@/utils';
|
||||
import { isMobile } from '@/utils/is';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import usePermission from '@/hooks/permission';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
user?: UserQueryResponse;
|
||||
}>();
|
||||
|
||||
const list = ref<UserSessionQueryResponse[]>([]);
|
||||
|
||||
const { loading, setLoading } = useLoading();
|
||||
const { hasPermission } = usePermission();
|
||||
|
||||
// 下线
|
||||
const offline = async (item: UserSessionQueryResponse) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
if (props.user) {
|
||||
// 下线其他用户
|
||||
await offlineUserSession({
|
||||
userId: props.user?.id,
|
||||
timestamp: item.loginTime
|
||||
});
|
||||
} else {
|
||||
// 下线当前用户
|
||||
await offlineCurrentUserSession({
|
||||
timestamp: item.loginTime
|
||||
});
|
||||
}
|
||||
Message.success('操作成功');
|
||||
item.visible = false;
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 查询登录会话
|
||||
onBeforeMount(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
let sessions: UserSessionQueryResponse[];
|
||||
if (props.user) {
|
||||
// 查询其他用户
|
||||
const { data } = await getUserSessionList(props.user.id);
|
||||
sessions = data;
|
||||
} else {
|
||||
// 查询当前用户
|
||||
const { data } = await getCurrentUserSessionList();
|
||||
sessions = data;
|
||||
}
|
||||
sessions.forEach(s => s.visible = true);
|
||||
list.value = sessions;
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main-container {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
padding-left: 48px;
|
||||
}
|
||||
|
||||
.extra-message {
|
||||
margin-bottom: 42px;
|
||||
margin-left: -24px;
|
||||
display: block;
|
||||
color: var(--color-text-3);
|
||||
user-select: none;
|
||||
|
||||
.user-info {
|
||||
color: rgb(var(--primary-6));
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
border-radius: 50%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
color: var(--color-white);
|
||||
background: var(--color-fill-4);
|
||||
font-size: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.arco-timeline-item-content-wrapper) {
|
||||
position: relative;
|
||||
margin-left: 44px;
|
||||
margin-top: -22px;
|
||||
}
|
||||
|
||||
:deep(.arco-timeline-item) {
|
||||
padding-bottom: 36px;
|
||||
|
||||
.arco-timeline-item-dot-custom {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.session-line {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.address-line {
|
||||
color: var(--color-text-1);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.time-line, .ua-line {
|
||||
color: var(--color-text-3);
|
||||
font-size: 14px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
129
orion-visor-ui/src/views/user/info/index.vue
Normal file
129
orion-visor-ui/src/views/user/info/index.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="tabs-container" v-if="render">
|
||||
<a-tabs type="rounded"
|
||||
size="medium"
|
||||
position="left"
|
||||
:lazy-load="true"
|
||||
:destroy-on-hide="true"
|
||||
@tab-click="k => clickTab(k as string)">
|
||||
<!-- 个人信息 -->
|
||||
<a-tab-pane key="mineInfo"
|
||||
v-if="!user || hasPermission('infra:system-user:update')"
|
||||
:title="user ? '用户信息' : '个人信息'">
|
||||
<user-base-info :user="user" />
|
||||
</a-tab-pane>
|
||||
<!-- 登录日志 -->
|
||||
<a-tab-pane key="loginHistory"
|
||||
v-if="!user || hasPermission('infra:system-user:login-history')"
|
||||
title="登录日志">
|
||||
<login-history :user="user" />
|
||||
</a-tab-pane>
|
||||
<!-- 登录设备 -->
|
||||
<a-tab-pane key="userSession"
|
||||
v-if="!user || hasPermission('infra:system-user:query-session')"
|
||||
title="登录设备">
|
||||
<user-session :user="user" />
|
||||
</a-tab-pane>
|
||||
<!-- 操作日志 -->
|
||||
<a-tab-pane key="operatorLog"
|
||||
v-if="!user || hasPermission('infra:operator-log:query')"
|
||||
title="操作日志">
|
||||
<user-operator-log :user="user" />
|
||||
</a-tab-pane>
|
||||
<!-- 返回 -->
|
||||
<a-tab-pane key="back" v-if="userId">
|
||||
<template #title>
|
||||
<icon-left style="font-size: 16px; padding-top: 2px;" />
|
||||
返回
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'userInfo'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { UserQueryResponse } from '@/api/user/user';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import usePermission from '@/hooks/permission';
|
||||
import { onBeforeMount, ref } from 'vue';
|
||||
import { useUserStore } from '@/store';
|
||||
import { getUser } from '@/api/user/user';
|
||||
import UserBaseInfo from './components/user-base-info.vue';
|
||||
import UserSession from './components/user-session.vue';
|
||||
import UserOperatorLog from './components/user-operator-log.vue';
|
||||
import LoginHistory from './components/login-history.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const { hasPermission } = usePermission();
|
||||
|
||||
const render = ref<boolean>(false);
|
||||
const userId = ref<number>();
|
||||
const user = ref<UserQueryResponse>();
|
||||
|
||||
// 点击 tab
|
||||
const clickTab = (key: string) => {
|
||||
if (key === 'back') {
|
||||
router.back();
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化
|
||||
const init = async () => {
|
||||
// 获取 userId
|
||||
const queryUserId = route.query.id as string;
|
||||
if (!queryUserId) {
|
||||
return;
|
||||
}
|
||||
const id = parseInt(queryUserId);
|
||||
userId.value = id;
|
||||
// 当前用户 直接返回
|
||||
if (userStore.id === id) {
|
||||
return;
|
||||
}
|
||||
// 查询用户信息
|
||||
const { data } = await getUser(id);
|
||||
user.value = data;
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
// 初始化
|
||||
await init();
|
||||
render.value = true;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tabs-container {
|
||||
background: var(--color-bg-2);
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-nav-tab-list) {
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-pane) {
|
||||
border-left: 1px var(--color-neutral-3) solid;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-tab) {
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
</style>
|
||||
7
orion-visor-ui/src/views/user/info/types/const.ts
Normal file
7
orion-visor-ui/src/views/user/info/types/const.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
// 结果状态
|
||||
export const ResultStatus = {
|
||||
// 失败
|
||||
FAILED: 0,
|
||||
// 成功
|
||||
SUCCESS: 1,
|
||||
};
|
||||
Reference in New Issue
Block a user