Compare commits
11 Commits
f8bf7a26b3
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d8520da894 | ||
|
|
9baaff77ad | ||
|
|
8b724ab409 | ||
|
|
4a0446dce0 | ||
|
|
58a9d61203 | ||
|
|
46cbbb6bea | ||
|
|
59b03b6fc5 | ||
|
|
06a819354f | ||
|
|
2542d2501d | ||
|
|
8e484ae03e | ||
|
|
943cb1815d |
@@ -1,11 +1,11 @@
|
||||
<p align="center">
|
||||
<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png">
|
||||
</p>
|
||||
<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">RuoYi v3.9.1</h1>
|
||||
<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">RuoYi v3.9.2</h1>
|
||||
<h4 align="center">基于SpringBoot+Vue3前后端分离的Java快速开发框架</h4>
|
||||
<p align="center">
|
||||
<a href="https://gitee.com/y_project/RuoYi-Vue/stargazers"><img src="https://gitee.com/y_project/RuoYi-Vue/badge/star.svg?theme=dark"></a>
|
||||
<a href="https://gitee.com/y_project/RuoYi-Vue"><img src="https://img.shields.io/badge/RuoYi-v3.9.1-brightgreen.svg"></a>
|
||||
<a href="https://gitee.com/y_project/RuoYi-Vue"><img src="https://img.shields.io/badge/RuoYi-v3.9.2-brightgreen.svg"></a>
|
||||
<a href="https://gitee.com/y_project/RuoYi-Vue/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg"></a>
|
||||
</p>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ruoyi",
|
||||
"version": "3.9.1",
|
||||
"version": "3.9.2",
|
||||
"description": "若依管理系统",
|
||||
"author": "若依",
|
||||
"license": "MIT",
|
||||
|
||||
18
src/api/system/info.js
Normal file
18
src/api/system/info.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询设备基本信息列表
|
||||
export function listInfo(query) {
|
||||
return request({
|
||||
url: '/system/info/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询设备基本信息详细
|
||||
export function getInfo(deviceId) {
|
||||
return request({
|
||||
url: '/system/info/' + deviceId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
18
src/api/system/video.js
Normal file
18
src/api/system/video.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询教学视频列表
|
||||
export function listVideo(query) {
|
||||
return request({
|
||||
url: '/system/video/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询教学视频详细
|
||||
export function getVideo(videoId) {
|
||||
return request({
|
||||
url: '/system/video/' + videoId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@@ -74,6 +74,8 @@
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
height: 44px !important;
|
||||
line-height: 44px !important;
|
||||
}
|
||||
|
||||
.el-menu-item .el-menu-tooltip__trigger {
|
||||
@@ -84,7 +86,7 @@
|
||||
.sub-menu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -97,7 +99,7 @@
|
||||
min-width: vars.$base-sidebar-width !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,6 +111,96 @@
|
||||
background-color: vars.$base-sub-menu-hover !important;
|
||||
}
|
||||
}
|
||||
|
||||
// theme-dark 深色主题
|
||||
&.theme-dark {
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
|
||||
border-right: none;
|
||||
|
||||
.el-menu-item.is-active {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
|
||||
border-right: 3px solid var(--current-color, #409eff);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
color: var(--current-color, #409eff) !important;
|
||||
}
|
||||
|
||||
.el-menu-item:not(.is-active),
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme-light 浅色主题
|
||||
&.theme-light {
|
||||
border-right: 1px solid #e8eaf0;
|
||||
box-shadow: none;
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: var(--current-color, #409eff) !important;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: var(--current-color-light, #ecf5ff);
|
||||
border-right: 3px solid var(--current-color, #409eff);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
color: var(--current-color, #409eff) !important;
|
||||
}
|
||||
|
||||
.el-menu-item:not(.is-active):hover,
|
||||
.submenu-title-noDropdown:hover,
|
||||
.el-sub-menu__title:hover {
|
||||
background-color: #f5f7fa;
|
||||
color: rgba(0, 0, 0, 0.85) !important;
|
||||
}
|
||||
|
||||
.nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
.el-sub-menu .el-menu-item {
|
||||
background-color: #fafafa;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f5ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
|
||||
@@ -11,7 +11,7 @@ $panGreen: #30B08F;
|
||||
// 默认主题变量
|
||||
$menuText: #bfcbd9;
|
||||
$menuActiveText: #409eff;
|
||||
$menuBg: #304156;
|
||||
$menuBg: #1a1f2e;
|
||||
$menuHover: #263445;
|
||||
|
||||
// 浅色主题theme-light
|
||||
@@ -25,11 +25,11 @@ $base-sidebar-width: 200px;
|
||||
$sideBarWidth: 200px;
|
||||
|
||||
// 菜单暗色变量
|
||||
$base-menu-color: #bfcbd9;
|
||||
$base-menu-color-active: #f4f4f5;
|
||||
$base-menu-background: #304156;
|
||||
$base-sub-menu-background: #1f2d3d;
|
||||
$base-sub-menu-hover: #001528;
|
||||
$base-menu-color: rgba(255,255,255,.65);
|
||||
$base-menu-color-active: #ffffff;
|
||||
$base-menu-background: #1a1f2e;
|
||||
$base-sub-menu-background: #141824;
|
||||
$base-sub-menu-hover: rgba(255,255,255,.06);
|
||||
|
||||
// 组件变量
|
||||
$--color-primary: #409EFF;
|
||||
@@ -134,9 +134,36 @@ html.dark {
|
||||
.el-menu-item:not(.is-active), .menu-title {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
& .el-menu .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .el-menu .theme-dark .el-sub-menu .el-menu-item,
|
||||
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .theme-dark .el-sub-menu .el-menu-item {
|
||||
background-color: var(--el-bg-color) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--menu-hover) !important;
|
||||
}
|
||||
}
|
||||
&.theme-light {
|
||||
border-right: none !important;
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: var(--sidebar-text) !important;
|
||||
}
|
||||
.el-menu-item:not(.is-active):hover,
|
||||
.submenu-title-noDropdown:hover,
|
||||
.el-sub-menu__title:hover {
|
||||
background-color: var(--menu-hover) !important;
|
||||
}
|
||||
.el-menu .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
.el-menu .el-sub-menu .el-menu-item,
|
||||
.nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
.el-sub-menu .el-menu-item {
|
||||
background-color: var(--el-bg-color) !important;
|
||||
&:hover {
|
||||
background-color: var(--menu-hover) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -63,6 +63,13 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>持久化标签页</span>
|
||||
<span class="comp-style">
|
||||
<el-switch v-model="settingsStore.tagsViewPersist" :disabled="!settingsStore.tagsView" @change="tagsViewPersistChange" class="drawer-switch" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>显示页签图标</span>
|
||||
<span class="comp-style">
|
||||
@@ -120,6 +127,7 @@ const showSettings = ref(false)
|
||||
const navType = ref(settingsStore.navType)
|
||||
const theme = ref(settingsStore.theme)
|
||||
const sideTheme = ref(settingsStore.sideTheme)
|
||||
const tagsViewPersist = ref(settingsStore.tagsViewPersist)
|
||||
const storeSettings = computed(() => settingsStore)
|
||||
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"])
|
||||
|
||||
@@ -128,6 +136,11 @@ function dynamicTitleChange() {
|
||||
useSettingsStore().setTitle(useSettingsStore().title)
|
||||
}
|
||||
|
||||
function tagsViewPersistChange(val) {
|
||||
settingsStore.tagsViewPersist = val
|
||||
tagsViewPersist.value = val
|
||||
}
|
||||
|
||||
function themeChange(val) {
|
||||
settingsStore.theme = val
|
||||
handleThemeStyle(val)
|
||||
@@ -164,10 +177,14 @@ watch(() => navType, val => {
|
||||
|
||||
function saveSetting() {
|
||||
proxy.$modal.loading("正在保存到本地,请稍候...")
|
||||
if (!tagsViewPersist.value) {
|
||||
proxy.$cache.local.remove('tags-view-visited')
|
||||
}
|
||||
let layoutSetting = {
|
||||
"navType": storeSettings.value.navType,
|
||||
"tagsView": storeSettings.value.tagsView,
|
||||
"tagsIcon": storeSettings.value.tagsIcon,
|
||||
"tagsViewPersist": storeSettings.value.tagsViewPersist,
|
||||
"fixedHeader": storeSettings.value.fixedHeader,
|
||||
"sidebarLogo": storeSettings.value.sidebarLogo,
|
||||
"dynamicTitle": storeSettings.value.dynamicTitle,
|
||||
@@ -180,6 +197,7 @@ function saveSetting() {
|
||||
}
|
||||
|
||||
function resetSetting() {
|
||||
proxy.$cache.local.remove('tags-view-visited')
|
||||
proxy.$modal.loading("正在清除设置缓存并刷新,请稍候...")
|
||||
localStorage.removeItem("layout-setting")
|
||||
setTimeout("window.location.reload()", 1000)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="{ 'has-logo': showLogo }" class="sidebar-container">
|
||||
<div :class="['sidebar-theme-wrapper', {'has-logo':showLogo}, sideTheme]" class="sidebar-container">
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
|
||||
@@ -38,56 +38,32 @@
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="tags-dropdown-menu">
|
||||
<el-dropdown-item command="refresh">
|
||||
<refresh-right style="width: 1em; height: 1em;" /> 刷新页面
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!isAffix(selectedDropdownTag)" command="close">
|
||||
<close style="width: 1em; height: 1em;" /> 关闭当前
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="closeOthers">
|
||||
<circle-close style="width: 1em; height: 1em;" /> 关闭其他
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="closeLeft" :disabled="isFirstView()">
|
||||
<back style="width: 1em; height: 1em;" /> 关闭左侧
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="closeRight" :disabled="isLastView()">
|
||||
<right style="width: 1em; height: 1em;" /> 关闭右侧
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="closeAll" divided>
|
||||
<circle-close style="width: 1em; height: 1em;" /> 全部关闭
|
||||
<el-dropdown-item v-if="!isAffix(selectedDropdownTag)" command="close"><close style="width: 1em; height: 1em;" />关闭当前</el-dropdown-item>
|
||||
<el-dropdown-item command="closeOthers"><circle-close style="width: 1em; height: 1em;" />关闭其他</el-dropdown-item>
|
||||
<el-dropdown-item command="closeLeft" :disabled="isFirstView()"><back style="width: 1em; height: 1em;" />关闭左侧</el-dropdown-item>
|
||||
<el-dropdown-item command="closeRight" :disabled="isLastView()"><right style="width: 1em; height: 1em;" />关闭右侧</el-dropdown-item>
|
||||
<el-dropdown-item command="closeAll"><circle-close style="width: 1em; height: 1em;" />全部关闭</el-dropdown-item>
|
||||
<el-dropdown-item command="fullscreen" divided>
|
||||
<template v-if="!isFullscreen"><full-screen style="width: 1em; height: 1em;" />全屏显示</template>
|
||||
<template v-else><close style="width: 1em; height: 1em;" />退出全屏</template>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 全屏按钮 -->
|
||||
<span class="tags-action-btn tags-fullscreen-btn" :title="isFullscreen ? '退出全屏' : '全屏'" @click="toggleFullscreen">
|
||||
<el-icon>
|
||||
<full-screen v-if="!isFullscreen" />
|
||||
<aim v-else />
|
||||
</el-icon>
|
||||
<!-- 刷新按钮 -->
|
||||
<span class="tags-action-btn tags-refresh-btn" title="刷新页面" @click="refreshSelectedTag(selectedDropdownTag)">
|
||||
<el-icon><refresh-right/></el-icon> 刷新
|
||||
</span>
|
||||
|
||||
<!-- 右键上下文菜单 -->
|
||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)">
|
||||
<refresh-right style="width: 1em; height: 1em;" /> 刷新页面
|
||||
</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
|
||||
<close style="width: 1em; height: 1em;" /> 关闭当前
|
||||
</li>
|
||||
<li @click="closeOthersTags">
|
||||
<circle-close style="width: 1em; height: 1em;" /> 关闭其他
|
||||
</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags">
|
||||
<back style="width: 1em; height: 1em;" /> 关闭左侧
|
||||
</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags">
|
||||
<right style="width: 1em; height: 1em;" /> 关闭右侧
|
||||
</li>
|
||||
<li @click="closeAllTags(selectedTag)">
|
||||
<circle-close style="width: 1em; height: 1em;" /> 全部关闭
|
||||
</li>
|
||||
<li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em;" />刷新页面</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em;" />关闭当前</li>
|
||||
<li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em;" />关闭其他</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em;" />关闭左侧</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em;" />关闭右侧</li>
|
||||
<li @click="closeAllTags(selectedTag)"><circle-close style="width: 1em; height: 1em;" />全部关闭</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -108,15 +84,18 @@ const scrollPaneRef = ref(null)
|
||||
const canScrollLeft = ref(false)
|
||||
const canScrollRight = ref(false)
|
||||
const isFullscreen = ref(false)
|
||||
const hiddenElements = ref([])
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const visitedViews = computed(() => useTagsViewStore().visitedViews)
|
||||
const routes = computed(() => usePermissionStore().routes)
|
||||
const theme = computed(() => useSettingsStore().theme)
|
||||
const tagsIcon = computed(() => useSettingsStore().tagsIcon)
|
||||
const tagsViewPersist = computed(() => useSettingsStore().tagsViewPersist)
|
||||
|
||||
// 下拉菜单针对当前激活的 tag
|
||||
const selectedDropdownTag = computed(() => visitedViews.value.find(v => isActive(v)) || {})
|
||||
@@ -142,14 +121,21 @@ onMounted(() => {
|
||||
initTags()
|
||||
addTags()
|
||||
window.addEventListener('resize', updateArrowState)
|
||||
document.addEventListener('fullscreenchange', onFullscreenChange)
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', updateArrowState)
|
||||
document.removeEventListener('fullscreenchange', onFullscreenChange)
|
||||
window.removeEventListener('keydown', handleKeyDown)
|
||||
})
|
||||
|
||||
function handleKeyDown(event) {
|
||||
// 当按下Esc键且处于全屏状态时,退出全屏
|
||||
if (event.key === 'Escape' && isFullscreen.value) {
|
||||
toggleFullscreen()
|
||||
}
|
||||
}
|
||||
|
||||
function isActive(r) {
|
||||
return r.path === route.path
|
||||
}
|
||||
@@ -207,11 +193,14 @@ function filterAffixTags(routes, basePath = '') {
|
||||
}
|
||||
|
||||
function initTags() {
|
||||
if (tagsViewPersist.value) {
|
||||
useTagsViewStore().loadPersistedViews()
|
||||
}
|
||||
const res = filterAffixTags(routes.value)
|
||||
affixTags.value = res
|
||||
for (const tag of res) {
|
||||
if (tag.name) {
|
||||
useTagsViewStore().addVisitedView(tag)
|
||||
useTagsViewStore().addAffixView(tag)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -257,22 +246,34 @@ function updateArrowState() {
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
const appMain = document.querySelector('.app-main')
|
||||
if (appMain) {
|
||||
appMain.requestFullscreen()
|
||||
}
|
||||
} else {
|
||||
document.exitFullscreen()
|
||||
}
|
||||
}
|
||||
const mainContainer = document.querySelector('.main-container')
|
||||
const navbar = document.querySelector('.navbar')
|
||||
const sidebar = document.querySelector('.sidebar-container')
|
||||
if (!mainContainer) return
|
||||
|
||||
function onFullscreenChange() {
|
||||
isFullscreen.value = !!document.fullscreenElement
|
||||
const appMain = document.querySelector('.app-main')
|
||||
if (appMain) {
|
||||
appMain.style.backgroundColor = document.fullscreenElement ? '#fff' : ''
|
||||
appMain.style.overflowY = document.fullscreenElement ? 'auto' : ''
|
||||
if (!isFullscreen.value) {
|
||||
mainContainer.classList.add('fullscreen-mode')
|
||||
document.body.style.overflow = 'hidden'
|
||||
const elementsToHide = [{ el: navbar, originalDisplay: navbar?.style.display || '' }, { el: sidebar, originalDisplay: sidebar?.style.display || '' }]
|
||||
elementsToHide.forEach(item => {
|
||||
if (item.el && item.el.style.display !== 'none') {
|
||||
item.originalDisplay = item.el.style.display
|
||||
item.el.style.display = 'none'
|
||||
hiddenElements.value.push(item)
|
||||
}
|
||||
})
|
||||
isFullscreen.value = true
|
||||
} else {
|
||||
mainContainer.classList.remove('fullscreen-mode')
|
||||
document.body.style.overflow = ''
|
||||
hiddenElements.value.forEach(item => {
|
||||
if (item.el) {
|
||||
item.el.style.display = item.originalDisplay
|
||||
}
|
||||
})
|
||||
hiddenElements.value = []
|
||||
document.querySelector('.tags-action-btn').blur()
|
||||
isFullscreen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -281,6 +282,7 @@ function handleDropdownCommand(command) {
|
||||
selectedTag.value = tag
|
||||
switch (command) {
|
||||
case 'refresh': refreshSelectedTag(tag); break
|
||||
case 'fullscreen': toggleFullscreen(); break
|
||||
case 'close': closeSelectedTag(tag); break
|
||||
case 'closeOthers': closeOthersTags(); break
|
||||
case 'closeLeft': closeLeftTags(); break
|
||||
@@ -427,6 +429,7 @@ function handleScroll() {
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
border-radius: 3px;
|
||||
|
||||
&:first-of-type { margin-left: 6px; }
|
||||
&:last-of-type { margin-right: 15px; }
|
||||
@@ -479,8 +482,8 @@ function handleScroll() {
|
||||
}
|
||||
}
|
||||
|
||||
.tags-fullscreen-btn {
|
||||
border-left: $divider;
|
||||
.tags-refresh-btn {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
@@ -537,4 +540,41 @@ function handleScroll() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页签全屏模式样式 */
|
||||
.main-container.fullscreen-mode {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-container.fullscreen-mode .fixed-header {
|
||||
display: block !important;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100% !important;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.main-container.fullscreen-mode .fixed-header .navbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.main-container.fullscreen-mode .app-main {
|
||||
position: fixed;
|
||||
top: 34px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
height: calc(100vh - 34px) !important;
|
||||
min-height: calc(100vh - 34px) !important;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
||||
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme, '--current-color-light': theme + '1a', '--current-color-dark-bg': theme + '33' }">
|
||||
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
|
||||
|
||||
@@ -5,6 +5,10 @@ export default {
|
||||
// 刷新当前tab页签
|
||||
refreshPage(obj) {
|
||||
const { path, query, matched } = router.currentRoute.value
|
||||
// 防止在重定向过程中重复刷新
|
||||
if (path.startsWith('/redirect/')) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
if (obj === undefined) {
|
||||
matched.forEach((m) => {
|
||||
if (m.components && m.components.default && m.components.default.name) {
|
||||
|
||||
@@ -24,6 +24,11 @@ export default {
|
||||
*/
|
||||
tagsView: true,
|
||||
|
||||
/**
|
||||
* 持久化标签页
|
||||
*/
|
||||
tagsViewPersist: false,
|
||||
|
||||
/**
|
||||
* 显示页签图标
|
||||
*/
|
||||
|
||||
@@ -58,6 +58,14 @@ const usePermissionStore = defineStore(
|
||||
// 遍历后台传来的路由字符串,转换为组件对象
|
||||
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
|
||||
return asyncRouterMap.filter(route => {
|
||||
// 兼容:后端把顶级菜单配置成了具体页面组件(非Layout)时,会导致进入后丢失整体布局(侧边栏/顶部栏)。
|
||||
// 这里将该类顶级叶子路由自动包一层 Layout,子路由使用空 path 以保持原 URL 不变。
|
||||
if (!lastRouter && route.component && !route.children && !['Layout', 'ParentView', 'InnerLink'].includes(route.component) && typeof route.path === 'string' && route.path.startsWith('/')) {
|
||||
const inner = { ...route }
|
||||
route.component = 'Layout'
|
||||
route.name = inner.name ? `${inner.name}Wrapper` : route.name
|
||||
route.children = [Object.assign(inner, { path: '' })]
|
||||
}
|
||||
if (type && route.children) {
|
||||
route.children = filterChildren(route.children)
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ import { useDynamicTitle } from '@/utils/dynamicTitle'
|
||||
const isDark = useDark()
|
||||
const toggleDark = useToggle(isDark)
|
||||
|
||||
const { sideTheme, showSettings, navType, tagsView, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle, footerVisible, footerContent } = defaultSettings
|
||||
const { sideTheme, showSettings, navType, tagsView, tagsViewPersist, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle, footerVisible, footerContent } = defaultSettings
|
||||
|
||||
const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
|
||||
|
||||
@@ -19,6 +19,7 @@ const useSettingsStore = defineStore(
|
||||
showSettings: showSettings,
|
||||
navType: storageSetting.navType === undefined ? navType : storageSetting.navType,
|
||||
tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
|
||||
tagsViewPersist: storageSetting.tagsViewPersist === undefined ? tagsViewPersist : storageSetting.tagsViewPersist,
|
||||
tagsIcon: storageSetting.tagsIcon === undefined ? tagsIcon : storageSetting.tagsIcon,
|
||||
fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
|
||||
sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
|
||||
|
||||
@@ -1,3 +1,26 @@
|
||||
import cache from '@/plugins/cache'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
|
||||
const PERSIST_KEY = 'tags-view-visited'
|
||||
|
||||
function isPersistEnabled() {
|
||||
return useSettingsStore().tagsViewPersist
|
||||
}
|
||||
|
||||
function saveVisitedViews(views) {
|
||||
if (!isPersistEnabled()) return
|
||||
const toSave = views.filter(v => !(v.meta && v.meta.affix)).map(v => ({ path: v.path, fullPath: v.fullPath, name: v.name, title: v.title, query: v.query, meta: v.meta }))
|
||||
cache.local.setJSON(PERSIST_KEY, toSave)
|
||||
}
|
||||
|
||||
function loadVisitedViews() {
|
||||
return cache.local.getJSON(PERSIST_KEY) || []
|
||||
}
|
||||
|
||||
function clearVisitedViews() {
|
||||
cache.local.remove(PERSIST_KEY)
|
||||
}
|
||||
|
||||
const useTagsViewStore = defineStore(
|
||||
'tags-view',
|
||||
{
|
||||
@@ -26,6 +49,15 @@ const useTagsViewStore = defineStore(
|
||||
title: view.meta.title || 'no-name'
|
||||
})
|
||||
)
|
||||
saveVisitedViews(this.visitedViews)
|
||||
},
|
||||
addAffixView(view) {
|
||||
if (this.visitedViews.some(v => v.path === view.path)) return
|
||||
this.visitedViews.unshift(
|
||||
Object.assign({}, view, {
|
||||
title: view.meta.title || 'no-name'
|
||||
})
|
||||
)
|
||||
},
|
||||
addCachedView(view) {
|
||||
if (this.cachedViews.includes(view.name)) return
|
||||
@@ -52,6 +84,7 @@ const useTagsViewStore = defineStore(
|
||||
}
|
||||
}
|
||||
this.iframeViews = this.iframeViews.filter(item => item.path !== view.path)
|
||||
saveVisitedViews(this.visitedViews)
|
||||
resolve([...this.visitedViews])
|
||||
})
|
||||
},
|
||||
@@ -84,6 +117,7 @@ const useTagsViewStore = defineStore(
|
||||
return v.meta.affix || v.path === view.path
|
||||
})
|
||||
this.iframeViews = this.iframeViews.filter(item => item.path === view.path)
|
||||
saveVisitedViews(this.visitedViews)
|
||||
resolve([...this.visitedViews])
|
||||
})
|
||||
},
|
||||
@@ -113,6 +147,7 @@ const useTagsViewStore = defineStore(
|
||||
const affixTags = this.visitedViews.filter(tag => tag.meta.affix)
|
||||
this.visitedViews = affixTags
|
||||
this.iframeViews = []
|
||||
clearVisitedViews()
|
||||
resolve([...this.visitedViews])
|
||||
})
|
||||
},
|
||||
@@ -150,6 +185,7 @@ const useTagsViewStore = defineStore(
|
||||
}
|
||||
return false
|
||||
})
|
||||
saveVisitedViews(this.visitedViews)
|
||||
resolve([...this.visitedViews])
|
||||
})
|
||||
},
|
||||
@@ -173,8 +209,16 @@ const useTagsViewStore = defineStore(
|
||||
}
|
||||
return false
|
||||
})
|
||||
saveVisitedViews(this.visitedViews)
|
||||
resolve([...this.visitedViews])
|
||||
})
|
||||
},
|
||||
// 恢复持久化的 tags
|
||||
loadPersistedViews() {
|
||||
const views = loadVisitedViews()
|
||||
views.forEach(view => {
|
||||
this.addVisitedView(view)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -114,6 +114,41 @@
|
||||
</div>
|
||||
</template>
|
||||
<el-collapse accordion>
|
||||
<el-collapse-item title="v3.9.2 - 2026-03-26">
|
||||
<ol>
|
||||
<li>新增锁定屏幕功能</li>
|
||||
<li>首页新增通知公告消息提醒</li>
|
||||
<li>添加持久化标签页开关功能</li>
|
||||
<li>菜单搜索支持文本高亮&数量提示</li>
|
||||
<li>添加菜单路由地址和名称的校验规则</li>
|
||||
<li>字典类型列表新增抽屉效果详细信息</li>
|
||||
<li>升级axios到最新版本0.30.3</li>
|
||||
<li>使用SpringDoc代替Swagger</li>
|
||||
<li>升级spring-boot到最新版本4.0.3</li>
|
||||
<li>升级yauaa到最新版本8.1.0</li>
|
||||
<li>升级oshi到最新版本6.10.0</li>
|
||||
<li>升级druid到最新版本1.2.28</li>
|
||||
<li>升级fastjson到最新版2.0.61</li>
|
||||
<li>升级pagehelper到最新版2.1.1</li>
|
||||
<li>优化操作日志详细页面</li>
|
||||
<li>更新在线IP地址查询url</li>
|
||||
<li>部门管理支持批量保存排序</li>
|
||||
<li>菜单管理支持批量保存排序</li>
|
||||
<li>菜单管理列表新增类型显示</li>
|
||||
<li>代码生成模板支持TypeScript版本</li>
|
||||
<li>优化菜单主题风格显示</li>
|
||||
<li>优化topbar顶部菜单样式</li>
|
||||
<li>优化点击任务名称查看详细</li>
|
||||
<li>优化字典类型属性提醒说明</li>
|
||||
<li>优化防重提交间隔时间可自定义</li>
|
||||
<li>优化页签功能&支持全屏按钮操作</li>
|
||||
<li>优化RightToolbar搜索栏切换动画</li>
|
||||
<li>修复Excel自定义格式样式污染问题</li>
|
||||
<li>优化isAdmin方法统一到SecurityUtils</li>
|
||||
<li>优化定时任务详情页展示&补充执行时间字段</li>
|
||||
<li>其他细节优化</li>
|
||||
</ol>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="v3.9.1 - 2025-12-18">
|
||||
<ol>
|
||||
<li>支持防盗链功能</li>
|
||||
@@ -1095,7 +1130,7 @@
|
||||
</template>
|
||||
|
||||
<script setup name="Index">
|
||||
const version = ref('3.9.1')
|
||||
const version = ref('3.9.2')
|
||||
|
||||
function goTarget(url) {
|
||||
window.open(url, '__blank')
|
||||
|
||||
545
src/views/system/info/index.vue
Normal file
545
src/views/system/info/index.vue
Normal file
@@ -0,0 +1,545 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="m-page">
|
||||
<div v-if="!detailOpen" class="m-header">
|
||||
<div class="m-title">设备信息</div>
|
||||
<div class="m-subtitle">查看您公司拥有的焊接机器人设备信息</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!detailOpen" class="m-list">
|
||||
<div v-if="loading && infoList.length === 0" class="m-hint">正在加载...</div>
|
||||
<div v-else-if="!loading && infoList.length === 0" class="m-hint">暂无设备</div>
|
||||
<div
|
||||
v-for="item in infoList"
|
||||
:key="item.deviceId"
|
||||
class="m-device-card"
|
||||
@click="handleDetail(item)"
|
||||
>
|
||||
<div class="m-device-row">
|
||||
<div class="m-device-name">{{ item.deviceName }}</div>
|
||||
<div class="m-device-status" :class="statusClass(item.deviceStatus)">
|
||||
<span class="m-dot" />
|
||||
<span>{{ formatDeviceStatus(item.deviceStatus) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-device-meta">
|
||||
<div class="m-meta-item"><span class="m-meta-label">设备ID</span><span class="m-meta-value">{{ item.deviceId }}</span></div>
|
||||
<div class="m-meta-item"><span class="m-meta-label">设备编号</span><span class="m-meta-value">{{ item.deviceCode }}</span></div>
|
||||
</div>
|
||||
<div class="m-device-action">
|
||||
<span class="m-action-text">查看详情</span>
|
||||
<el-icon class="m-arrow"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref="loadMoreRef" class="m-load-more">
|
||||
<span v-if="loadingMore">加载中...</span>
|
||||
<span v-else-if="finished && infoList.length > 0">已到底</span>
|
||||
<span v-else-if="infoList.length > 0">上滑加载更多</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="m-detail" v-loading="detailLoading" element-loading-text="加载详情中...">
|
||||
<div class="m-detail-top">
|
||||
<el-button class="m-back" plain @click="detailOpen = false">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回
|
||||
</el-button>
|
||||
<div class="m-title m-center">设备信息</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card m-hero-card">
|
||||
<div class="m-hero">
|
||||
<img v-if="detail.deviceImage" :src="detail.deviceImage" alt="device" />
|
||||
<div v-else class="m-hero-placeholder"></div>
|
||||
</div>
|
||||
<div class="m-hero-body">
|
||||
<div class="m-hero-title">{{ detail.deviceName || '设备详情' }}</div>
|
||||
<div class="m-hero-sub">设备编号:{{ detail.deviceCode || '-' }}</div>
|
||||
<div class="m-badges">
|
||||
<div class="m-badge" :class="statusClass(detail.deviceStatus)">
|
||||
<span class="m-dot" />
|
||||
<span>{{ formatDeviceStatus(detail.deviceStatus) }}</span>
|
||||
</div>
|
||||
<div class="m-badge" :class="warrantyStatus().cls">
|
||||
<span class="m-dot" />
|
||||
<span>质保{{ warrantyStatus().text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-section">
|
||||
<div class="m-section-title">基础信息</div>
|
||||
<div class="m-kv"><span class="m-kv-key">型号规格</span><span class="m-kv-val">{{ detail.modelSpec || '-' }}</span></div>
|
||||
<div class="m-kv"><span class="m-kv-key">购买日期</span><span class="m-kv-val">{{ detail.purchaseDate || '-' }}</span></div>
|
||||
<div class="m-kv"><span class="m-kv-key">设备序列号</span><span class="m-kv-val">{{ detail.serialNumber || '-' }}</span></div>
|
||||
<div class="m-kv"><span class="m-kv-key">安装地址</span><span class="m-kv-val">{{ detail.installAddress || '-' }}</span></div>
|
||||
<div class="m-kv"><span class="m-kv-key">负责人</span><span class="m-kv-val">{{ detail.responsiblePerson || '-' }}</span></div>
|
||||
</div>
|
||||
|
||||
<div class="m-section">
|
||||
<div class="m-section-title">质保信息</div>
|
||||
<div class="m-kv">
|
||||
<span class="m-kv-key">质保状态</span>
|
||||
<span class="m-kv-val">
|
||||
<span class="m-chip" :class="warrantyStatus().cls"> {{ warrantyStatus().text }} </span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="m-kv"><span class="m-kv-key">质保开始日期</span><span class="m-kv-val">{{ detail.warrantyStartDate || '-' }}</span></div>
|
||||
<div class="m-kv"><span class="m-kv-key">质保结束日期</span><span class="m-kv-val">{{ detail.warrantyEndDate || '-' }}</span></div>
|
||||
<div class="m-kv">
|
||||
<span class="m-kv-key">质保{{ warrantyStatus().leftLabel }}</span>
|
||||
<span class="m-kv-val">{{ leftDaysText(warrantyStatus().leftDays) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Info">
|
||||
import { listInfo, getInfo } from "@/api/system/info"
|
||||
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const infoList = ref([])
|
||||
const detailOpen = ref(false)
|
||||
const detail = ref({})
|
||||
const detailLoading = ref(false)
|
||||
const detailLock = ref(false)
|
||||
const loading = ref(true)
|
||||
const loadingMore = ref(false)
|
||||
const finished = ref(false)
|
||||
const loadMoreRef = ref(null)
|
||||
let observer = null
|
||||
const loadingLock = ref(false)
|
||||
const loadedIds = ref(new Set())
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
})
|
||||
|
||||
const { queryParams } = toRefs(data)
|
||||
|
||||
/** 查询设备基本信息列表 */
|
||||
function getList(reset = false) {
|
||||
if (reset) {
|
||||
queryParams.value.pageNum = 1
|
||||
finished.value = false
|
||||
infoList.value = []
|
||||
loadedIds.value = new Set()
|
||||
}
|
||||
if (finished.value) return
|
||||
if (loadingLock.value) return
|
||||
|
||||
const isFirstPage = queryParams.value.pageNum === 1
|
||||
if (isFirstPage) loading.value = true
|
||||
else loadingMore.value = true
|
||||
loadingLock.value = true
|
||||
|
||||
listInfo(queryParams.value).then(response => {
|
||||
const rows = response.rows || []
|
||||
const next = []
|
||||
for (const r of rows) {
|
||||
const id = r?.deviceId
|
||||
if (id == null) continue
|
||||
if (loadedIds.value.has(id)) continue
|
||||
loadedIds.value.add(id)
|
||||
next.push(r)
|
||||
}
|
||||
infoList.value = infoList.value.concat(next)
|
||||
if (rows.length < queryParams.value.pageSize) {
|
||||
finished.value = true
|
||||
} else {
|
||||
queryParams.value.pageNum += 1
|
||||
}
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
loadingLock.value = false
|
||||
})
|
||||
}
|
||||
|
||||
/** 详情按钮操作 */
|
||||
function handleDetail(row) {
|
||||
if (detailLock.value) return
|
||||
detailLock.value = true
|
||||
detailLoading.value = true
|
||||
detail.value = {}
|
||||
detailOpen.value = true
|
||||
const _deviceId = row.deviceId
|
||||
getInfo(_deviceId).then(response => {
|
||||
detail.value = response.data
|
||||
}).finally(() => {
|
||||
detailLoading.value = false
|
||||
detailLock.value = false
|
||||
})
|
||||
}
|
||||
function formatDeviceStatus(val) {
|
||||
const map = {
|
||||
"0": "运行中",
|
||||
"1": "故障",
|
||||
"2": "停机",
|
||||
"3": "维护"
|
||||
}
|
||||
return map[val] || "-"
|
||||
}
|
||||
function statusClass(val) {
|
||||
const map = {
|
||||
"0": "is-ok",
|
||||
"1": "is-bad",
|
||||
"2": "is-warn",
|
||||
"3": "is-info"
|
||||
}
|
||||
return map[val] || "is-info"
|
||||
}
|
||||
|
||||
function warrantyStatus() {
|
||||
const start = parseYmd(detail.value?.warrantyStartDate)
|
||||
const end = parseYmd(detail.value?.warrantyEndDate)
|
||||
if (!start || !end) return { text: "未知", cls: "is-info", leftDays: null, leftLabel: "质保剩余" }
|
||||
const today = startOfToday()
|
||||
|
||||
if (today.getTime() < start.getTime()) {
|
||||
return { text: "未开始", cls: "is-info", leftDays: diffDays(today, start), leftLabel: "距开始" }
|
||||
}
|
||||
if (today.getTime() <= end.getTime()) {
|
||||
return { text: "在保", cls: "is-ok", leftDays: diffDays(today, end), leftLabel: "剩余" }
|
||||
}
|
||||
return { text: "已过保", cls: "is-bad", leftDays: diffDays(end, today), leftLabel: "已过期" }
|
||||
}
|
||||
|
||||
function startOfToday() {
|
||||
const d = new Date()
|
||||
d.setHours(0, 0, 0, 0)
|
||||
return d
|
||||
}
|
||||
|
||||
function parseYmd(val) {
|
||||
if (!val) return null
|
||||
// 支持 "YYYY-MM-DD" 或 Date 可解析字符串
|
||||
const s = String(val)
|
||||
const m = s.match(/^(\d{4})-(\d{2})-(\d{2})/)
|
||||
if (m) {
|
||||
const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
|
||||
d.setHours(0, 0, 0, 0)
|
||||
return isNaN(d.getTime()) ? null : d
|
||||
}
|
||||
const d = new Date(s)
|
||||
d.setHours(0, 0, 0, 0)
|
||||
return isNaN(d.getTime()) ? null : d
|
||||
}
|
||||
|
||||
function diffDays(a, b) {
|
||||
const ms = b.getTime() - a.getTime()
|
||||
return Math.floor(ms / 86400000)
|
||||
}
|
||||
|
||||
function leftDaysText(days) {
|
||||
if (days === null || days === undefined) return "-"
|
||||
const d = Number(days)
|
||||
if (!Number.isFinite(d)) return "-"
|
||||
return `${Math.max(0, Math.floor(d))} 天`
|
||||
}
|
||||
|
||||
function setupObserver() {
|
||||
if (observer) observer.disconnect()
|
||||
if (!loadMoreRef.value) return
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
if (detailOpen.value) return
|
||||
const entry = entries[0]
|
||||
if (entry && entry.isIntersecting) {
|
||||
getList(false)
|
||||
}
|
||||
}, { root: null, rootMargin: "200px", threshold: 0 })
|
||||
observer.observe(loadMoreRef.value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList(true)
|
||||
nextTick(setupObserver)
|
||||
})
|
||||
|
||||
watch(detailOpen, (v) => {
|
||||
if (!v) nextTick(setupObserver)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.m-page {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
padding: 12px;
|
||||
min-height: calc(100vh - 84px);
|
||||
background: linear-gradient(180deg, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0) 140px);
|
||||
}
|
||||
.m-header {
|
||||
padding: 4px 4px 12px 4px;
|
||||
}
|
||||
.m-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
}
|
||||
.m-subtitle {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
.m-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.m-device-card {
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
|
||||
transition: transform 0.08s ease, box-shadow 0.12s ease;
|
||||
}
|
||||
.m-device-card:active {
|
||||
transform: scale(0.99);
|
||||
box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
.m-device-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.m-device-name {
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.m-device-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 185, 129, 0.10);
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
.m-device-status.is-bad {
|
||||
background: rgba(239, 68, 68, 0.10);
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
.m-device-status.is-warn {
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
color: var(--el-color-warning);
|
||||
}
|
||||
.m-device-status.is-info {
|
||||
background: rgba(100, 116, 139, 0.12);
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.m-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
display: inline-block;
|
||||
}
|
||||
.m-device-meta {
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.m-meta-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.m-meta-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
.m-device-action {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
.m-action-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
.m-arrow {
|
||||
font-size: 14px;
|
||||
}
|
||||
.m-hint {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
.m-load-more {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
.m-detail-top {
|
||||
display: grid;
|
||||
grid-template-columns: 92px 1fr 92px;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.m-center {
|
||||
text-align: center;
|
||||
}
|
||||
.m-back {
|
||||
justify-self: start;
|
||||
border-radius: 999px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
.m-detail-top .m-title {
|
||||
text-align: center;
|
||||
}
|
||||
.m-card {
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
.m-hero-card {
|
||||
padding: 10px;
|
||||
}
|
||||
.m-hero {
|
||||
margin-top: 0;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
background: #0f172a;
|
||||
}
|
||||
.m-hero img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.m-hero-placeholder {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background: linear-gradient(135deg, #0f172a, #334155);
|
||||
}
|
||||
.m-hero-body {
|
||||
padding: 10px 4px 2px 4px;
|
||||
}
|
||||
.m-hero-title {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
line-height: 22px;
|
||||
}
|
||||
.m-hero-sub {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
.m-badges {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.m-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(100, 116, 139, 0.12);
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.m-badge.is-ok {
|
||||
background: rgba(16, 185, 129, 0.10);
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
.m-badge.is-bad {
|
||||
background: rgba(239, 68, 68, 0.10);
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
.m-badge.is-warn {
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
color: var(--el-color-warning);
|
||||
}
|
||||
.m-badge.is-info {
|
||||
background: rgba(100, 116, 139, 0.12);
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.m-kv-key {
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
.m-kv-val {
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.m-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
background: rgba(100, 116, 139, 0.12);
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.m-chip.is-ok {
|
||||
background: rgba(16, 185, 129, 0.10);
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
.m-chip.is-bad {
|
||||
background: rgba(239, 68, 68, 0.10);
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
.m-chip.is-info {
|
||||
background: rgba(100, 116, 139, 0.12);
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.m-device-code {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
.m-section {
|
||||
margin-top: 12px;
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
.m-section-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.m-kv {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid var(--el-border-color-lighter);
|
||||
font-size: 13px;
|
||||
}
|
||||
.m-kv:first-of-type {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
.m-kv span:first-child {
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
</style>
|
||||
@@ -64,10 +64,19 @@
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
|
||||
<el-table-column prop="icon" label="图标" align="center" width="100">
|
||||
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="220">
|
||||
<template #default="scope">
|
||||
<svg-icon :icon-class="scope.row.icon" />
|
||||
<span class="ml5">{{ scope.row.menuName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="menuName" label="类型" :show-overflow-tooltip="true" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.menuType === 'M' && scope.row.isFrame === '0'" type="danger" size="small">外链</el-tag>
|
||||
<el-tag v-else-if="scope.row.menuType === 'M'" type="primary" size="small">目录</el-tag>
|
||||
<el-tag v-else-if="scope.row.menuType === 'C' && scope.row.isFrame === '0'" type="danger" size="small">外链</el-tag>
|
||||
<el-tag v-else-if="scope.row.menuType === 'C'" type="success" size="small">菜单</el-tag>
|
||||
<el-tag v-else-if="scope.row.menuType === 'F'" type="warning" size="small">按钮</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序" width="200">
|
||||
@@ -75,18 +84,13 @@
|
||||
<el-input-number v-model="scope.row.orderNum" controls-position="right" :min="0" style="width: 88px" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="status" label="状态" width="80">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" width="160" prop="createTime">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
|
||||
|
||||
329
src/views/system/video/index.vue
Normal file
329
src/views/system/video/index.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="m-page">
|
||||
<div class="m-header">
|
||||
<div class="m-title">焊接机器人教学视频</div>
|
||||
<div class="m-subtitle">这里提供焊接机器人使用教程与常见问题解决方案</div>
|
||||
</div>
|
||||
|
||||
<div class="m-tabs">
|
||||
<el-segmented v-model="activeTab" :options="tabOptions" size="small" />
|
||||
</div>
|
||||
|
||||
<div class="m-list">
|
||||
<div v-if="loading && videoList.length === 0" class="m-hint">正在加载...</div>
|
||||
<div v-else-if="!loading && videoList.length === 0" class="m-hint">暂无视频</div>
|
||||
<div
|
||||
v-for="item in videoList"
|
||||
:key="item.videoId"
|
||||
class="m-video-card"
|
||||
@click="openVideo(item)"
|
||||
>
|
||||
<div class="m-cover">
|
||||
<img v-if="item.coverUrl" :src="biliCoverProxy(item.coverUrl)" alt="cover" />
|
||||
<div v-else class="m-cover-placeholder" />
|
||||
<div class="m-play">▶</div>
|
||||
<div class="m-duration">{{ formatDuration(item.durationSeconds) }}</div>
|
||||
</div>
|
||||
<div class="m-content">
|
||||
<div class="m-video-title">{{ item.title }}</div>
|
||||
<div class="m-video-desc">{{ item.summary }}</div>
|
||||
<div class="m-meta">
|
||||
<span>{{ formatViews(item.viewCount) }}</span>
|
||||
<span>·</span>
|
||||
<span>{{ item.publishDate || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref="loadMoreRef" class="m-load-more">
|
||||
<span v-if="loadingMore">加载中...</span>
|
||||
<span v-else-if="finished && videoList.length > 0">已到底</span>
|
||||
<span v-else-if="videoList.length > 0">上滑加载更多</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog title="播放视频" v-model="playerOpen" width="720px" append-to-body>
|
||||
<div class="m-player">
|
||||
<iframe
|
||||
v-if="isBiliEmbed(currentVideo)"
|
||||
:src="currentVideo.videoUrl"
|
||||
frameborder="0"
|
||||
allowfullscreen="true"
|
||||
referrerpolicy="no-referrer"
|
||||
style="width: 100%; height: 420px"
|
||||
/>
|
||||
<video v-else-if="currentVideo?.videoUrl" controls playsinline style="width: 100%">
|
||||
<source :src="currentVideo.videoUrl" />
|
||||
</video>
|
||||
<div v-else class="m-empty">
|
||||
暂无视频地址
|
||||
<div v-if="currentVideo?.sourceUrl" style="margin-top: 10px">
|
||||
<el-button type="primary" plain @click="openSourceUrl(currentVideo.sourceUrl)">打开B站</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-player-title">{{ currentVideo?.title }}</div>
|
||||
<div class="m-player-desc">{{ currentVideo?.summary }}</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button v-if="currentVideo?.sourceUrl" plain @click="openSourceUrl(currentVideo.sourceUrl)">打开B站</el-button>
|
||||
<el-button @click="playerOpen = false">关 闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Video">
|
||||
import { listVideo, getVideo } from "@/api/system/video"
|
||||
|
||||
const videoList = ref([])
|
||||
const playerOpen = ref(false)
|
||||
const currentVideo = ref(null)
|
||||
const loading = ref(true)
|
||||
const loadingMore = ref(false)
|
||||
const finished = ref(false)
|
||||
const loadMoreRef = ref(null)
|
||||
let observer = null
|
||||
const activeTab = ref("ALL")
|
||||
const tabOptions = [
|
||||
{ label: "全部视频", value: "ALL" },
|
||||
{ label: "基础教学", value: "BASIC" },
|
||||
{ label: "常见问题", value: "FAQ" },
|
||||
{ label: "故障排除", value: "TROUBLE" }
|
||||
]
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
categoryCode: null,
|
||||
}
|
||||
})
|
||||
|
||||
const { queryParams } = toRefs(data)
|
||||
|
||||
/** 查询教学视频列表 */
|
||||
function getList(reset = false) {
|
||||
if (reset) {
|
||||
queryParams.value.pageNum = 1
|
||||
finished.value = false
|
||||
videoList.value = []
|
||||
}
|
||||
if (finished.value) return
|
||||
|
||||
queryParams.value.categoryCode = activeTab.value === "ALL" ? null : activeTab.value
|
||||
const isFirstPage = queryParams.value.pageNum === 1
|
||||
if (isFirstPage) loading.value = true
|
||||
else loadingMore.value = true
|
||||
|
||||
listVideo(queryParams.value).then(response => {
|
||||
const rows = response.rows || []
|
||||
videoList.value = videoList.value.concat(rows)
|
||||
if (rows.length < queryParams.value.pageSize) {
|
||||
finished.value = true
|
||||
} else {
|
||||
queryParams.value.pageNum += 1
|
||||
}
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
})
|
||||
}
|
||||
|
||||
watch(activeTab, () => {
|
||||
getList(true)
|
||||
})
|
||||
|
||||
function openVideo(row) {
|
||||
getVideo(row.videoId).then(res => {
|
||||
currentVideo.value = res.data
|
||||
playerOpen.value = true
|
||||
})
|
||||
}
|
||||
|
||||
function setupObserver() {
|
||||
if (observer) observer.disconnect()
|
||||
if (!loadMoreRef.value) return
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
const entry = entries[0]
|
||||
if (entry && entry.isIntersecting) {
|
||||
getList(false)
|
||||
}
|
||||
}, { root: null, rootMargin: "200px", threshold: 0 })
|
||||
observer.observe(loadMoreRef.value)
|
||||
}
|
||||
|
||||
function formatDuration(sec) {
|
||||
const s = Number(sec || 0)
|
||||
const m = Math.floor(s / 60)
|
||||
const r = s % 60
|
||||
return `${String(m).padStart(2, "0")}:${String(r).padStart(2, "0")}`
|
||||
}
|
||||
|
||||
function formatViews(v) {
|
||||
const n = Number(v || 0)
|
||||
if (n >= 10000) return `${(n / 10000).toFixed(1)}w 次播放`
|
||||
return `${n} 次播放`
|
||||
}
|
||||
|
||||
function biliCoverProxy(url) {
|
||||
if (!url) return ""
|
||||
const u = String(url).replace(/^http:\/\//i, "https://")
|
||||
return `${import.meta.env.VITE_APP_BASE_API}/system/bili/cover?url=${encodeURIComponent(u)}`
|
||||
}
|
||||
|
||||
function isBiliEmbed(v) {
|
||||
const url = v?.videoUrl || ""
|
||||
return typeof url === "string" && url.includes("player.bilibili.com/player.html")
|
||||
}
|
||||
|
||||
function openSourceUrl(url) {
|
||||
if (!url) return
|
||||
window.open(url, "_blank")
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList(true)
|
||||
nextTick(setupObserver)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.m-page {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
padding: 12px;
|
||||
min-height: calc(100vh - 84px);
|
||||
background: linear-gradient(180deg, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0) 140px);
|
||||
}
|
||||
.m-header {
|
||||
padding: 4px 4px 12px 4px;
|
||||
}
|
||||
.m-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
}
|
||||
.m-subtitle {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
.m-tabs {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.m-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.m-video-card {
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
|
||||
transition: transform 0.08s ease, box-shadow 0.12s ease;
|
||||
}
|
||||
.m-video-card:active {
|
||||
transform: scale(0.99);
|
||||
box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
.m-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background: #0f172a;
|
||||
}
|
||||
.m-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.m-cover-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #0f172a, #334155);
|
||||
}
|
||||
.m-play {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 42px;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.m-duration {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.m-content {
|
||||
padding: 12px;
|
||||
}
|
||||
.m-video-title {
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.m-video-desc {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
line-height: 18px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.m-meta {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.m-hint {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
.m-load-more {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
.m-player {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
background: #000;
|
||||
}
|
||||
.m-empty {
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.m-player-title {
|
||||
margin-top: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.m-player-desc {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user