You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
373 lines
14 KiB
373 lines
14 KiB
<template>
|
|
<div class="common-layout">
|
|
<el-container>
|
|
<!-- 顶部菜单 -->
|
|
<el-header class="bg-black flex items-center justify-between" height="50px">
|
|
<el-space class="flex items-center">
|
|
<el-avatar src="https://oss.wsdns.cn/20240331/7f7f7f57e12c45338beb7bfc7ecccfe9.png" class="cursor-pointer" shape="square" :size="32" @click="navigateTo('/manage', { replace: false })" />
|
|
<div class="expand flex items-center justify-center block hover:bg-gray-700 h-[32px] w-[32px] cursor-pointer" @click="visible = !visible"><el-icon color="white" class="block" size="20"><Grid /></el-icon></div>
|
|
</el-space>
|
|
<template v-if="token">
|
|
<el-dropdown @command="handleCommand">
|
|
<el-avatar class="cursor-pointer" :src="userInfo?.avatar" :size="30" />
|
|
<el-button circle :icon="ElIconUserFilled" color="#155FAA"></el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="user">个人中心</el-dropdown-item>
|
|
<el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
</el-header>
|
|
<!-- 主体 -->
|
|
<el-container>
|
|
<!-- 左侧菜单区域 -->
|
|
<el-aside width="200px" class="bg-white" :style="{ minHeight: 'calc(100vh - 50px)' }">
|
|
<div class="flex items-center justify-between py-4 px-5 text-lg font-bold text-center bg-white border-b-1 border-b-gray-100 border-b-solid">
|
|
企业官网 WDS
|
|
<el-icon><Memo /></el-icon>
|
|
</div>
|
|
<el-menu
|
|
default-active="2"
|
|
class="el-menu-vertical-demo"
|
|
style="border: none"
|
|
@open="handleOpen"
|
|
@close="handleClose"
|
|
>
|
|
<el-menu-item v-for="(item,index) in menus" :key="item.menuId" :index="`${item.menuId}`">
|
|
<span>{{ item.title }}</span>
|
|
</el-menu-item>
|
|
<!-- <el-menu-item index="1">-->
|
|
<!-- <span>概况</span>-->
|
|
<!-- </el-menu-item>-->
|
|
<!-- <el-menu-item index="2">-->
|
|
<!-- <span>栏目管理</span>-->
|
|
<!-- </el-menu-item>-->
|
|
<!-- <el-menu-item index="3">-->
|
|
<!-- <span>文章列表</span>-->
|
|
<!-- </el-menu-item>-->
|
|
<!-- <el-menu-item index="4">-->
|
|
<!-- <span>素材管理</span>-->
|
|
<!-- </el-menu-item>-->
|
|
<!-- <el-menu-item index="5">-->
|
|
<!-- <span>广告管理</span>-->
|
|
<!-- </el-menu-item>-->
|
|
<!-- <el-menu-item index="6">-->
|
|
<!-- <span>订单管理</span>-->
|
|
<!-- </el-menu-item>-->
|
|
<!-- <el-menu-item index="7">-->
|
|
<!-- <span>用户管理</span>-->
|
|
<!-- </el-menu-item>-->
|
|
<!-- <el-menu-item index="8">-->
|
|
<!-- <span>系统设置</span>-->
|
|
<!-- </el-menu-item>-->
|
|
</el-menu>
|
|
</el-aside>
|
|
<!-- 左侧内容区域 -->
|
|
<el-container>
|
|
<el-main class="overflow-y-hidden relative">
|
|
<div class="absolute inset-0 bg-black opacity-10 z-1" v-if="visible" @click="visible = false"></div>
|
|
<div v-if="visible" class="drawer w-screen-lg h-full bg-white left-0 top-[50px] fixed z-2 shadow-lg">
|
|
<div class="flex items-center justify-between p-3 border-b border-b-solid border-b-gray-200">
|
|
<div class="text-lg font-bold">产品与服务</div>
|
|
<el-space class="flex items-center">
|
|
<el-input
|
|
class="w-20"
|
|
placeholder="站内搜索"
|
|
:suffix-icon="ElIconSearch"
|
|
v-model="form.comments"
|
|
@keyup.enter.native="handleSearch"
|
|
/>
|
|
<!-- <el-input v-model="search" placeholder="搜索应用" class="w-[200px]" />-->
|
|
<div class="cursor-pointer mt-1 ml-5" @click="visible = false"><el-icon size="24" color="gray"><Close /></el-icon></div>
|
|
</el-space>
|
|
</div>
|
|
<div class="menu-content flex">
|
|
<div class="w-[200px] bg-gray-50">
|
|
<el-menu
|
|
default-active="2"
|
|
class="el-menu-vertical-demo"
|
|
style="border-right: 1px solid #f9fafb"
|
|
@open="handleOpen"
|
|
@close="handleClose"
|
|
>
|
|
<el-menu-item index="2">
|
|
<span>精选</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="3">
|
|
<span>网页</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="4">
|
|
<span>移动</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="5">
|
|
<span>办公</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="6">
|
|
<span>其他</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
<div class="w-full p-3">
|
|
<el-scrollbar class="w-full" height="calc(100vh - 108px)">
|
|
<el-row :gutter="16">
|
|
<template v-for="item in 20" :key="item">
|
|
<el-col :span="8">
|
|
<div class="px-3 py-1 mb-2 text-sm text-gray-700 font-bold flex justify-between items-center">API 与工具</div>
|
|
<p class="scrollbar-demo-item hover:bg-gray-100 px-3 py-1 mb-2 cursor-pointer text-sm text-gray-500 flex justify-between items-center">
|
|
<span class="product-name">{{ item }} 云服务器 ECS</span>
|
|
<span class="icon flex items-center hover:flex">
|
|
<el-icon color="gray"><Star /></el-icon>
|
|
</span>
|
|
</p>
|
|
</el-col>
|
|
</template>
|
|
</el-row>
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="my-3">
|
|
<el-alert type="warning">
|
|
<template #title>
|
|
<text type="text" class="cursor-pointer" @click="openSpmUrl(`/detail`,{},729,true)">关于《小程序技术平台服务协议》更新公告</text>
|
|
</template>
|
|
</el-alert>
|
|
</div>
|
|
<el-card shadow="hover" class="flash mt-4 bg-white hover:shadow rounded-lg">
|
|
<template #header>我的应用</template>
|
|
<el-row :gutter="16">
|
|
<template v-for="(item,index) in list" :key="index">
|
|
<el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)">
|
|
<div class="app-item block border-solid rounded-lg border-gray-300 border-1 bg-white mb-4 p-3 flex flex-row items-center hover:border-blue-4 hover:border-1.5 cursor-pointer">
|
|
<el-avatar :src="item?.logo" shape="square" />
|
|
<div class="info ml-2">
|
|
<div class="app-item-title font-bold flex items-center">{{ item.tenantName }}<el-tag type="warning" class="ml-2" size="small">网页</el-tag></div>
|
|
<div class="app-item-desc text-gray-400">{{ item.comments }}</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</template>
|
|
</el-row>
|
|
</el-card>
|
|
<!-- <el-card shadow="hover" class="mt-4">-->
|
|
<!-- <el-tabs v-model="activeIndex" type="">-->
|
|
<!-- <el-tab-pane label="微信小程序" name="mp-weixin">-->
|
|
<!-- <el-table :data="tableData" stripe style="width: 100%">-->
|
|
<!-- <el-table-column prop="date" label="Date" width="180" />-->
|
|
<!-- <el-table-column prop="name" label="Name" width="180" />-->
|
|
<!-- <el-table-column prop="address" label="Address" />-->
|
|
<!-- </el-table>-->
|
|
<!-- </el-tab-pane>-->
|
|
<!-- <el-tab-pane label="网页/移动应用" name="web">-->
|
|
<!-- </el-tab-pane>-->
|
|
<!-- </el-tabs>-->
|
|
<!-- </el-card>-->
|
|
<el-card shadow="hover" class="flash mt-4 bg-white hover:shadow ">
|
|
<template #header>开发工具推荐</template>
|
|
<el-row :gutter="16">
|
|
<template v-for="(item,index) in list" :key="index">
|
|
<el-col :span="6" @click="openSpmUrl(`https://${item.tenantId}.websoft.top/token-login`,item,item.tenantId)">
|
|
<div class="app-item block border-solid rounded-lg border-gray-300 border-1 mb-4 p-3 flex flex-row items-center hover:border-blue-4 hover:border-1.5 cursor-pointer">
|
|
<div class="info ml-2">
|
|
<div class="app-item-title">{{ item.tenantName }}</div>
|
|
<div class="app-item-desc text-gray-400">{{ item.comments }}</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</template>
|
|
</el-row>
|
|
</el-card>
|
|
</el-main>
|
|
<el-footer class="fixed bottom-0 items-center flex justify-center text-gray-400" :style="{ width: 'calc(100vw - 200px)' }">
|
|
<span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
|
|
</el-footer>
|
|
</el-container>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState";
|
|
import useFormData from '@/utils/use-form-data';
|
|
import type { User } from '@/api/system/user/model';
|
|
import { ref } from 'vue'
|
|
import {useServerRequest} from "~/composables/useServerRequest";
|
|
import type {ApiResult, PageResult} from "~/api";
|
|
import type {Company} from "~/api/system/company/model";
|
|
import type {Tenant} from "~/api/system/tenant/model";
|
|
|
|
// 配置信息
|
|
const runtimeConfig = useRuntimeConfig();
|
|
const route = useRoute();
|
|
const website = useWebsite()
|
|
const config = useConfigInfo();
|
|
const token = useToken();
|
|
const userInfo = ref<User>();
|
|
const visible = ref(false);
|
|
const showIcon = ref(false);
|
|
const activeIndex = ref('mp-weixin');
|
|
const list = ref<Tenant[]>();
|
|
const menus = ref<Menu[]>();
|
|
const avatar = ref(localStorage.getItem('avatar'))
|
|
|
|
|
|
import {
|
|
Document,
|
|
Menu as IconMenu,
|
|
Location,
|
|
Expand,
|
|
MoreFilled,
|
|
Grid,
|
|
Memo,
|
|
Close,
|
|
Star,
|
|
Setting,
|
|
} from '@element-plus/icons-vue'
|
|
import {navigateTo} from "#imports";
|
|
import type {Menu} from "~/api/system/menu/model";
|
|
const handleOpen = (key: string, keyPath: string[]) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
const handleClose = (key: string, keyPath: string[]) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
|
|
const tableData = [
|
|
{
|
|
date: '2016-05-03',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-02',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-04',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-01',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
]
|
|
|
|
// 配置信息
|
|
const { form, assignFields } = useFormData<User>({
|
|
userId: undefined,
|
|
nickname: '',
|
|
username: '',
|
|
phone: '',
|
|
mobile: '',
|
|
sex: '',
|
|
sexName: '',
|
|
email: '',
|
|
password: '',
|
|
code: '',
|
|
smsCode: '',
|
|
comments: '',
|
|
remember: true
|
|
});
|
|
|
|
useHead({
|
|
title: `用户中心 - ${config.value?.siteName}`,
|
|
meta: [{ name: website.value.keywords, content: website.value.comments }]
|
|
});
|
|
|
|
|
|
function handleCommand(command: string) {
|
|
switch (command) {
|
|
case 'logOut':
|
|
logOut();
|
|
break;
|
|
default:
|
|
navigateTo('/user');
|
|
break;
|
|
}
|
|
}
|
|
|
|
function logOut() {
|
|
token.value = ''
|
|
navigateTo('/passport/login')
|
|
}
|
|
|
|
const onDone = (index: string) => {
|
|
activeIndex.value = index;
|
|
}
|
|
|
|
const onSubmit = async () => {
|
|
const {data: modify } = await useServerRequest<ApiResult<User>>('/auth/user',{
|
|
baseURL: runtimeConfig.public.apiServer,
|
|
method: 'put',
|
|
body: form
|
|
})
|
|
if(modify.value?.code == 0){
|
|
ElMessage.success('修改成功')
|
|
}
|
|
}
|
|
|
|
const handleSearch = () => {
|
|
console.log('搜索')
|
|
}
|
|
|
|
|
|
const getUserInfo = async () => {
|
|
const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user',{baseURL: runtimeConfig.public.apiServer})
|
|
if(response.value?.data){
|
|
userInfo.value = response.value?.data;
|
|
}
|
|
}
|
|
|
|
|
|
const reload = async () => {
|
|
const {data: response} = await useServerRequest<ApiResult<PageResult<Tenant>>>('/system/tenant/page',{baseURL: runtimeConfig.public.apiServer, params: {
|
|
userId: localStorage.getItem('UserId')
|
|
}})
|
|
if(response.value?.data){
|
|
console.log(response.value,'tenantList')
|
|
if (response.value?.data.list) {
|
|
list.value = response.value?.data.list;
|
|
}
|
|
}
|
|
const {data: response2} = await useServerRequest<ApiResult<PageResult<Menu>>>('/system/menu',{baseURL: runtimeConfig.public.apiServer, params: {
|
|
parentId: 64688,
|
|
menuType: 0,
|
|
hide: 0
|
|
}})
|
|
if(response2.value?.data){
|
|
if (response2.value?.data) {
|
|
menus.value = response2.value.data
|
|
}
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => route.path,
|
|
() => {
|
|
reload();
|
|
getUserInfo();
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
<style lang="less">
|
|
.el-row {
|
|
margin-bottom: 20px;
|
|
}
|
|
.el-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.el-col {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.grid-content {
|
|
border-radius: 4px;
|
|
min-height: 36px;
|
|
}
|
|
</style>
|