feat(article): 优化文章列表页面功能
- 将标题列改为可点击链接，支持直接跳转到文章详情页 - 新增操作列，添加查看按钮便于访问文章详情 - 修复事件绑定语法错误，将@pressEnter改为@press-enter - 修复分页组件事件绑定错误，将@showSizeChange改为@show-size-change - 实现路由参数监听，支持通过URL参数keywords自动搜索文章 - 临时禁用开发者中心的产品选择下拉菜单 - 移除已废弃的开发者中心相关页面和百色中学API接口文件
This commit is contained in:
@@ -1,259 +0,0 @@
|
||||
<template>
|
||||
<a-layout class="min-h-screen layout-shell">
|
||||
<a-layout class="w-full px-4 py-4">
|
||||
<ConsoleHeader
|
||||
product-label="开发者中心"
|
||||
default-jump-key="developer"
|
||||
:user="user"
|
||||
:user-display-name="userDisplayName"
|
||||
:user-menu-items="userMenuItems"
|
||||
@user-menu-click="onUserMenuClick"
|
||||
/>
|
||||
|
||||
<a-layout class="body">
|
||||
<a-layout-sider
|
||||
class="sider"
|
||||
:width="240"
|
||||
breakpoint="lg"
|
||||
theme="light"
|
||||
:trigger="null"
|
||||
collapsible
|
||||
v-model:collapsed="collapsed"
|
||||
>
|
||||
<div class="sider-brand" :class="{ collapsed }">
|
||||
<a-avatar shape="square" :size="28" src="https://oss.wsdns.cn/20250214/d455a32a7a2043d899e079b4eb9b27b8.png">
|
||||
<template #icon>
|
||||
<AppstoreOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<div v-if="!collapsed" class="sider-title">
|
||||
开发者中心
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-menu
|
||||
mode="inline"
|
||||
theme="light"
|
||||
:selected-keys="selectedKeys"
|
||||
:inline-collapsed="collapsed"
|
||||
@click="onMenuClick"
|
||||
>
|
||||
<a-menu-item v-for="item in menu" :key="item.to">
|
||||
{{ item.label }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
|
||||
<div
|
||||
class="sider-collapse-trigger"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:aria-label="collapsed ? '展开菜单' : '收起菜单'"
|
||||
@click="toggleCollapsed"
|
||||
@keydown.enter.prevent="toggleCollapsed"
|
||||
@keydown.space.prevent="toggleCollapsed"
|
||||
>
|
||||
<RightOutlined :style="{fontSize: '10px', paddingRight: '4px'}" v-if="collapsed" />
|
||||
<LeftOutlined :style="{fontSize: '10px', paddingRight: '4px'}" v-else />
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
|
||||
<a-layout class="main">
|
||||
<a-layout-content class="content">
|
||||
<a-spin v-if="!ready" size="large" tip="加载中..." class="spin" />
|
||||
<template v-else-if="allowed">
|
||||
<slot />
|
||||
</template>
|
||||
<a-result
|
||||
v-else
|
||||
status="403"
|
||||
title="无权限"
|
||||
sub-title="您还不是开发者"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button @click="navigateTo('/')">返回首页</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
import { AppstoreOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
|
||||
import { developerNav } from '@/config/developer-nav'
|
||||
import { getUserInfo } from '@/api/layout'
|
||||
import { getToken, removeToken } from '@/utils/token-util'
|
||||
import { clearAuthz, hasRole, setAuthzFromUser } from '@/utils/permission'
|
||||
import type { User } from '@/api/system/user/model'
|
||||
|
||||
const route = useRoute()
|
||||
const collapsed = ref(false)
|
||||
|
||||
const menu = computed(() => developerNav)
|
||||
const user = ref<User | null>(null)
|
||||
|
||||
const userDisplayName = computed(() => {
|
||||
const u = user.value
|
||||
const nickname = u?.nickname?.trim()
|
||||
const username = u?.username?.trim()
|
||||
const phone = u?.phone?.trim()
|
||||
const mobile = u?.mobile?.trim()
|
||||
if (nickname) return nickname
|
||||
if (username) return username
|
||||
if (phone) return phone
|
||||
if (mobile) return mobile
|
||||
return '当前用户'
|
||||
})
|
||||
|
||||
const userMenuItems = [
|
||||
{ key: 'home', label: '返回首页' },
|
||||
{ key: 'logout', label: '退出登录' },
|
||||
]
|
||||
|
||||
const selectedKeys = computed(() => {
|
||||
const match = menu.value.find((item) => route.path === item.to)
|
||||
if (match) return [match.to]
|
||||
if (route.path.startsWith('/developer')) return ['/developer']
|
||||
return []
|
||||
})
|
||||
|
||||
function onMenuClick(info: { key: string }) {
|
||||
navigateTo(String(info.key))
|
||||
}
|
||||
|
||||
function toggleCollapsed() {
|
||||
collapsed.value = !collapsed.value
|
||||
}
|
||||
|
||||
function logout() {
|
||||
removeToken()
|
||||
try {
|
||||
localStorage.removeItem('TenantId')
|
||||
localStorage.removeItem('UserId')
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
clearAuthz()
|
||||
navigateTo('/')
|
||||
}
|
||||
|
||||
function onUserMenuClick(key: string) {
|
||||
if (key === 'home') navigateTo('/')
|
||||
if (key === 'logout') logout()
|
||||
}
|
||||
|
||||
const ready = ref(false)
|
||||
const allowed = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
const token = getToken()
|
||||
if (!token) {
|
||||
clearAuthz()
|
||||
message.error('请先登录')
|
||||
await navigateTo('/login')
|
||||
ready.value = true
|
||||
allowed.value = false
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const me = await getUserInfo()
|
||||
user.value = me
|
||||
setAuthzFromUser(me)
|
||||
} catch {
|
||||
user.value = null
|
||||
clearAuthz()
|
||||
}
|
||||
|
||||
allowed.value = hasRole('developer')
|
||||
ready.value = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-shell {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.sider {
|
||||
border-radius: 12px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.sider-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 16px 10px;
|
||||
}
|
||||
|
||||
.sider-brand.collapsed {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sider-title {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-inline) {
|
||||
border-inline-end: 0;
|
||||
}
|
||||
|
||||
.sider-collapse-trigger {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -16px;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-left: 0;
|
||||
border-radius: 0 9999px 9999px 0;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sider-collapse-trigger:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.sider-collapse-trigger:active {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.body {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-left: 16px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 520px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.spin {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 380px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,246 +0,0 @@
|
||||
<template>
|
||||
<a-layout class="min-h-screen layout-shell">
|
||||
<a-layout class="w-full px-4 py-4">
|
||||
<ConsoleHeader
|
||||
product-label="小程序开发"
|
||||
default-jump-key="mp"
|
||||
:user="user"
|
||||
:user-display-name="userDisplayName"
|
||||
:user-menu-items="userMenuItems"
|
||||
@user-menu-click="onUserMenuClick"
|
||||
/>
|
||||
|
||||
<a-layout class="body">
|
||||
<a-layout-sider
|
||||
class="sider"
|
||||
:width="240"
|
||||
breakpoint="lg"
|
||||
theme="light"
|
||||
:trigger="null"
|
||||
collapsible
|
||||
v-model:collapsed="collapsed"
|
||||
>
|
||||
<div class="sider-brand" :class="{ collapsed }">
|
||||
<a-avatar shape="square" :size="28" src="https://oss.wsdns.cn/20250304/e65ea719564e47a1b8da93d6eea8287a.png">
|
||||
<template #icon>
|
||||
<AppstoreOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<div v-if="!collapsed" class="sider-title">
|
||||
小程序开发
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-menu
|
||||
mode="inline"
|
||||
theme="light"
|
||||
:selected-keys="selectedKeys"
|
||||
:inline-collapsed="collapsed"
|
||||
@click="onMenuClick"
|
||||
>
|
||||
<a-menu-item v-for="item in menu" :key="item.to">
|
||||
{{ item.label }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
|
||||
<div
|
||||
class="sider-collapse-trigger"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:aria-label="collapsed ? '展开菜单' : '收起菜单'"
|
||||
@click="toggleCollapsed"
|
||||
@keydown.enter.prevent="toggleCollapsed"
|
||||
@keydown.space.prevent="toggleCollapsed"
|
||||
>
|
||||
<RightOutlined :style="{fontSize: '10px', paddingRight: '4px'}" v-if="collapsed" />
|
||||
<LeftOutlined :style="{fontSize: '10px', paddingRight: '4px'}" v-else />
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
|
||||
<a-layout class="main">
|
||||
<a-layout-content class="content">
|
||||
<a-spin v-if="!ready" size="large" tip="加载中..." class="spin" />
|
||||
<template v-else>
|
||||
<slot />
|
||||
</template>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
import { AppstoreOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
|
||||
import { mpNav } from '@/config/mp-nav'
|
||||
import { getUserInfo } from '@/api/layout'
|
||||
import { getToken, removeToken } from '@/utils/token-util'
|
||||
import { clearAuthz, setAuthzFromUser } from '@/utils/permission'
|
||||
import type { User } from '@/api/system/user/model'
|
||||
|
||||
const route = useRoute()
|
||||
const collapsed = ref(false)
|
||||
|
||||
const menu = computed(() => mpNav)
|
||||
const user = ref<User | null>(null)
|
||||
|
||||
const userDisplayName = computed(() => {
|
||||
const u = user.value
|
||||
const nickname = u?.nickname?.trim()
|
||||
const username = u?.username?.trim()
|
||||
const phone = u?.phone?.trim()
|
||||
const mobile = u?.mobile?.trim()
|
||||
if (nickname) return nickname
|
||||
if (username) return username
|
||||
if (phone) return phone
|
||||
if (mobile) return mobile
|
||||
return '当前用户'
|
||||
})
|
||||
|
||||
const userMenuItems = [
|
||||
{ key: 'home', label: '返回首页' },
|
||||
{ key: 'logout', label: '退出登录' },
|
||||
]
|
||||
|
||||
const selectedKeys = computed(() => {
|
||||
const match = menu.value.find((item) => route.path === item.to)
|
||||
if (match) return [match.to]
|
||||
if (route.path.startsWith('/mp')) return ['/mp']
|
||||
return []
|
||||
})
|
||||
|
||||
function onMenuClick(info: { key: string }) {
|
||||
navigateTo(String(info.key))
|
||||
}
|
||||
|
||||
function toggleCollapsed() {
|
||||
collapsed.value = !collapsed.value
|
||||
}
|
||||
|
||||
function logout() {
|
||||
removeToken()
|
||||
try {
|
||||
localStorage.removeItem('TenantId')
|
||||
localStorage.removeItem('UserId')
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
clearAuthz()
|
||||
navigateTo('/')
|
||||
}
|
||||
|
||||
function onUserMenuClick(key: string) {
|
||||
if (key === 'home') navigateTo('/')
|
||||
if (key === 'logout') logout()
|
||||
}
|
||||
|
||||
const ready = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
const token = getToken()
|
||||
if (!token) {
|
||||
clearAuthz()
|
||||
message.error('请先登录')
|
||||
await navigateTo('/login')
|
||||
ready.value = true
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const me = await getUserInfo()
|
||||
user.value = me
|
||||
setAuthzFromUser(me)
|
||||
} catch {
|
||||
user.value = null
|
||||
clearAuthz()
|
||||
}
|
||||
|
||||
ready.value = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-shell {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.sider {
|
||||
border-radius: 12px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.sider-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 16px 10px;
|
||||
}
|
||||
|
||||
.sider-brand.collapsed {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sider-title {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-inline) {
|
||||
border-inline-end: 0;
|
||||
}
|
||||
|
||||
.sider-collapse-trigger {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -16px;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-left: 0;
|
||||
border-radius: 0 9999px 9999px 0;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sider-collapse-trigger:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.sider-collapse-trigger:active {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.body {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-left: 16px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 520px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.spin {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 380px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,246 +0,0 @@
|
||||
<template>
|
||||
<a-layout class="min-h-screen layout-shell">
|
||||
<a-layout class="w-full px-4 py-4">
|
||||
<ConsoleHeader
|
||||
product-label="办公协同OA"
|
||||
default-jump-key="oa"
|
||||
:user="user"
|
||||
:user-display-name="userDisplayName"
|
||||
:user-menu-items="userMenuItems"
|
||||
@user-menu-click="onUserMenuClick"
|
||||
/>
|
||||
|
||||
<a-layout class="body">
|
||||
<a-layout-sider
|
||||
class="sider"
|
||||
:width="240"
|
||||
breakpoint="lg"
|
||||
theme="light"
|
||||
:trigger="null"
|
||||
collapsible
|
||||
v-model:collapsed="collapsed"
|
||||
>
|
||||
<div class="sider-brand" :class="{ collapsed }">
|
||||
<a-avatar shape="square" :size="28" src="https://oss.wsdns.cn/20250215/457a343dba204d019281d8a23556c4b1.png">
|
||||
<template #icon>
|
||||
<AppstoreOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<div v-if="!collapsed" class="sider-title">
|
||||
办公协同OA
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-menu
|
||||
mode="inline"
|
||||
theme="light"
|
||||
:selected-keys="selectedKeys"
|
||||
:inline-collapsed="collapsed"
|
||||
@click="onMenuClick"
|
||||
>
|
||||
<a-menu-item v-for="item in menu" :key="item.to">
|
||||
{{ item.label }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
|
||||
<div
|
||||
class="sider-collapse-trigger"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:aria-label="collapsed ? '展开菜单' : '收起菜单'"
|
||||
@click="toggleCollapsed"
|
||||
@keydown.enter.prevent="toggleCollapsed"
|
||||
@keydown.space.prevent="toggleCollapsed"
|
||||
>
|
||||
<RightOutlined :style="{fontSize: '10px', paddingRight: '4px'}" v-if="collapsed" />
|
||||
<LeftOutlined :style="{fontSize: '10px', paddingRight: '4px'}" v-else />
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
|
||||
<a-layout class="main">
|
||||
<a-layout-content class="content">
|
||||
<a-spin v-if="!ready" size="large" tip="加载中..." class="spin" />
|
||||
<template v-else>
|
||||
<slot />
|
||||
</template>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
import { AppstoreOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
|
||||
import { oaNav } from '@/config/oa-nav'
|
||||
import { getUserInfo } from '@/api/layout'
|
||||
import { getToken, removeToken } from '@/utils/token-util'
|
||||
import { clearAuthz, setAuthzFromUser } from '@/utils/permission'
|
||||
import type { User } from '@/api/system/user/model'
|
||||
|
||||
const route = useRoute()
|
||||
const collapsed = ref(false)
|
||||
|
||||
const menu = computed(() => oaNav)
|
||||
const user = ref<User | null>(null)
|
||||
|
||||
const userDisplayName = computed(() => {
|
||||
const u = user.value
|
||||
const nickname = u?.nickname?.trim()
|
||||
const username = u?.username?.trim()
|
||||
const phone = u?.phone?.trim()
|
||||
const mobile = u?.mobile?.trim()
|
||||
if (nickname) return nickname
|
||||
if (username) return username
|
||||
if (phone) return phone
|
||||
if (mobile) return mobile
|
||||
return '当前用户'
|
||||
})
|
||||
|
||||
const userMenuItems = [
|
||||
{ key: 'home', label: '返回首页' },
|
||||
{ key: 'logout', label: '退出登录' },
|
||||
]
|
||||
|
||||
const selectedKeys = computed(() => {
|
||||
const match = menu.value.find((item) => route.path === item.to)
|
||||
if (match) return [match.to]
|
||||
if (route.path.startsWith('/oa')) return ['/oa']
|
||||
return []
|
||||
})
|
||||
|
||||
function onMenuClick(info: { key: string }) {
|
||||
navigateTo(String(info.key))
|
||||
}
|
||||
|
||||
function toggleCollapsed() {
|
||||
collapsed.value = !collapsed.value
|
||||
}
|
||||
|
||||
function logout() {
|
||||
removeToken()
|
||||
try {
|
||||
localStorage.removeItem('TenantId')
|
||||
localStorage.removeItem('UserId')
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
clearAuthz()
|
||||
navigateTo('/')
|
||||
}
|
||||
|
||||
function onUserMenuClick(key: string) {
|
||||
if (key === 'home') navigateTo('/')
|
||||
if (key === 'logout') logout()
|
||||
}
|
||||
|
||||
const ready = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
const token = getToken()
|
||||
if (!token) {
|
||||
clearAuthz()
|
||||
message.error('请先登录')
|
||||
await navigateTo('/login')
|
||||
ready.value = true
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const me = await getUserInfo()
|
||||
user.value = me
|
||||
setAuthzFromUser(me)
|
||||
} catch {
|
||||
user.value = null
|
||||
clearAuthz()
|
||||
}
|
||||
|
||||
ready.value = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-shell {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.sider {
|
||||
border-radius: 12px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.sider-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 16px 10px;
|
||||
}
|
||||
|
||||
.sider-brand.collapsed {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sider-title {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-inline) {
|
||||
border-inline-end: 0;
|
||||
}
|
||||
|
||||
.sider-collapse-trigger {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -16px;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-left: 0;
|
||||
border-radius: 0 9999px 9999px 0;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sider-collapse-trigger:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.sider-collapse-trigger:active {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.body {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-left: 16px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 520px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.spin {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 380px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user