DeXun/GEAR-OA
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: 默认改为暗色模式

Browse Source
This commit is contained in:
砂糖
2025-09-06 14:36:26 +08:00
parent 934105f644
commit 384e1a87c3
8 changed files with 743 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gear-ui3/src/App.vue
View File

@@ -13,10 +13,8 @@ const isDark = useDark()
onMounted(() => {
nextTick(() => {
// 初始化主题样式
console.log(isDark.value)
if (isDark.value) {
if (!isDark.value) {
useSettingsStore().toggleTheme()
}
handleThemeStyle(useSettingsStore().theme)

BIN
gear-ui3/src/assets/images/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
gear-ui3/src/assets/images/right.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 978 KiB

579
gear-ui3/src/components/AllApplications.vue
View File

@@ -1,70 +1,151 @@
<template>
<div class="all-applications-container">
<h3 class="title">全部应用</h3>
<el-tabs v-model="activeTabName" class="app-tabs">
<el-tab-pane
v-for="menu in filteredMenus"
:key="menu.path"
:label="menu.meta?.title"
:name="menu.path"
>
<div class="app-grid">
<div
v-for="child in menu.children"
:key="child.path"
class="app-item"
@click="handleAppClick(menu, child)"
>
<!-- 图标区域 -->
<div class="app-icon-wrapper">
<svg-icon :icon-class="child.meta.icon || 'documentation'" class="app-icon" />
</div>
<!-- 文字区域 -->
<span class="app-name">{{ child.meta?.title }}</span>
<!-- 三点菜单区域 -->
<div class="app-actions">
<el-dropdown
trigger="hover"
@click.native.stop
@command="(command) => handleCommand(command, menu, child)"
>
<span class="actions-icon">
<More />
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="addFavorites">
添加到常用
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<div class="applications-wrapper">
<!-- 一、业务功能区：常用应用 -->
<div class="business-area">
<!-- 常用应用标题栏 -->
<div class="business-area-header">
<h2 class="business-area-title">常用应用</h2>
<button class="edit-btn" @click="showSettingDialog = true">
<svg-icon icon-class="edit" /> 编辑常用
</button>
</div>
<!-- 常用应用列表 -->
<div class="business-modules">
<div
v-for="(module, index) in businessModules"
:key="index"
class="business-module"
@click="handleLink(module.link)"
>
<div class="business-module-icon">
<svg-icon :icon-class="module.icon" />
</div>
<h3 class="business-module-title">{{ module.title }}</h3>
</div>
</div>
</div>
<!-- 二、全部应用区域（原功能保留） -->
<div class="all-applications-container">
<h3 class="title">全部应用</h3>
<el-tabs v-model="activeTabName" class="app-tabs">
<el-tab-pane
v-for="menu in filteredMenus"
:key="menu.path"
:label="menu.meta?.title"
:name="menu.path"
>
<div class="app-grid">
<div
v-for="child in menu.children"
:key="child.path"
class="app-item"
@click="handleAppClick(menu, child)"
>
<!-- 图标区域 -->
<div class="app-icon-wrapper">
<svg-icon :icon-class="child.meta.icon || 'documentation'" class="app-icon" />
</div>
<!-- 文字区域 -->
<span class="app-name">{{ child.meta?.title }}</span>
<!-- 三点菜单区域 -->
<div class="app-actions">
<el-dropdown
trigger="hover"
@click.native.stop
@command="(command) => handleCommand(command, menu, child)"
>
<span class="actions-icon">
<More />
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="addFavorites">
添加到常用
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<!-- 三、设置弹窗：编辑常用应用 -->
<div class="dialog-mask" v-if="showSettingDialog">
<div class="setting-dialog">
<div class="dialog-header">
<h3>编辑常用应用</h3>
<button class="close-btn" @click="showSettingDialog = false">
<svg-icon icon-class="close" />
</button>
</div>
</el-tab-pane>
</el-tabs>
<div class="dialog-content">
<div class="empty-tip" v-if="businessModules.length === 0">
暂无常用应用，可从下方"全部应用"中添加
</div>
<ul class="module-list" v-else>
<li v-for="(module, index) in businessModules" :key="index" class="module-item">
<div class="module-info">
<span class="module-index">{{ index + 1 }}</span>
<span class="module-name">{{ module.title }}</span>
</div>
<div class="module-actions">
<el-button
@click="moveModule(index, 'up')"
:disabled="index === 0"
icon="ArrowUp"
type="primary"
/>
<el-button
@click="moveModule(index, 'down')"
:disabled="index === businessModules.length - 1"
icon="ArrowDown"
type="primary"
/>
<el-button
@click="deleteModule(index)"
icon="Delete"
danger
/>
</div>
</li>
</ul>
</div>
<div class="dialog-footer">
<button class="cancel-btn" @click="showSettingDialog = false">取消</button>
<button class="confirm-btn" @click="showSettingDialog = false">完成</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { getRouters } from '@/api/menu'
import { More } from '@element-plus/icons-vue'
import { useStorage } from '@vueuse/core'
export default {
name: 'AllApplications',
data() {
return {
allMenus: [],
activeTabName: ''
activeTabName: '',
showSettingDialog: false, // 控制弹窗显示
businessModules: [] // 常用应用列表（从localStorage同步）
}
},
computed: {
// 过滤隐藏菜单和无children的菜单
filteredMenus() {
const filterHidden = (menus) => {
return menus
.filter(menu => menu.hidden !== true && menu?.meta?.title != '综合大屏')
.filter(menu => menu.hidden !== true && menu?.meta?.title !== '综合大屏')
.map(menu => {
if (menu.children) {
menu.children = filterHidden(menu.children)
@@ -72,95 +153,244 @@ export default {
return menu
})
}
const topLevelMenus = filterHidden(this.allMenus).filter(
// 只保留有子菜单的顶层菜单
return filterHidden(this.allMenus).filter(
menu => menu.children && menu.children.length > 0
)
return topLevelMenus
}
},
created() {
// 1. 初始化菜单数据
this.fetchMenus()
// 2. 初始化常用应用（持久化到localStorage）
this.$businessModulesRef = useStorage('businessModules', [
{ title: '考勤日历', icon: 'code', link: '/people/calendar' },
{ title: '系统设置', icon: 'system', link: '/system/menu' }
])
// 同步ref值到data（确保Options API正常操作）
this.businessModules = this.$businessModulesRef.value
// 监听常用应用变化，同步到localStorage
this.$watch('businessModules', (newVal) => {
this.$businessModulesRef.value = newVal
}, { deep: true })
},
methods: {
// 1. 获取菜单数据
fetchMenus() {
getRouters().then(response => {
this.allMenus = response.data
// 默认激活第一个tab
if (this.filteredMenus.length > 0) {
this.activeTabName = this.filteredMenus[0].path
}
})
},
handleAppClick(parentMenu, childMenu) {
const basePath = parentMenu.path
const fullPath = `${basePath}/${childMenu.path}`
this.$router.push(fullPath)
},
// 处理添加到常用功能
handleAddToFavorites(parentMenu, childMenu) {
// 构建完整的应用信息
const appInfo = {
parent: parentMenu,
child: childMenu,
fullPath: `${parentMenu.path}/${childMenu.path}`,
timestamp: new Date().getTime()
// 2. 应用跳转（常用应用/全部应用通用）
handleLink(link) {
if (link.startsWith('http') || link.endsWith('.html')) {
window.open(link, '_blank')
} else {
this.$router.push(link)
}
console.log(appInfo)
// 向父组件发送事件
this.$emit('addFavorites', appInfo)
},
// 3. 全部应用卡片点击跳转
handleAppClick(parentMenu, childMenu) {
const fullPath = `${parentMenu.path}/${childMenu.path}`
this.handleLink(fullPath)
},
// 4. 处理三点菜单命令（添加到常用）
handleCommand(command, parentMenu, childMenu) {
if (command === 'addFavorites') {
this.handleAddToFavorites(parentMenu, childMenu)
}
},
// 5. 添加/移除常用应用
handleAddToFavorites(parentMenu, childMenu) {
const fullPath = `${parentMenu.path}/${childMenu.path}`
const existIndex = this.businessModules.findIndex(
module => module.link === fullPath
)
// 已存在则移除，不存在则添加
if (existIndex !== -1) {
this.businessModules.splice(existIndex, 1)
} else {
this.businessModules.push({
title: childMenu.meta.title,
icon: childMenu.meta.icon,
link: fullPath
})
}
},
// 6. 调整常用应用排序
moveModule(index, direction) {
const newModules = [...this.businessModules]
// 上移：与前一个交换
if (direction === 'up' && index > 0) {
[newModules[index], newModules[index - 1]] = [newModules[index - 1], newModules[index]]
}
// 下移：与后一个交换
if (direction === 'down' && index < newModules.length - 1) {
[newModules[index], newModules[index + 1]] = [newModules[index + 1], newModules[index]]
}
// 触发watch同步到localStorage
this.businessModules = newModules
},
// 7. 删除常用应用
deleteModule(index) {
if (confirm('确定要移除该常用应用吗？')) {
this.businessModules.splice(index, 1)
}
}
}
}
</script>
<style lang="scss" scoped>
/* 外层容器统一样式：深色背景 */
.applications-wrapper {
padding: 20px;
}
/* 一、常用应用区域样式 */
.business-area {
margin-bottom: 32px;
}
/* 常用应用标题栏 */
.business-area-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.business-area-title {
font-size: 18px;
font-weight: 600;
color: #E5E7EB;
margin: 0;
}
.edit-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #2C2C3C;
border: none;
border-radius: 6px;
color: #E5E7EB;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
&:hover {
background: #3A3A4A;
color: #F9FAFB;
}
}
/* 常用应用列表 */
.business-modules {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
}
.business-module {
display: flex;
align-items: center;
padding: 16px;
border-radius: 12px;
background: #2C2C3C;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
transition: all 0.2s;
cursor: pointer;
&:hover {
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
background: #3A3A4A;
}
}
.business-module-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 12px;
background: #374151; /* 可根据图标色调整背景 */
:deep(svg) {
font-size: 20px;
color: #FFFFFF;
}
}
.business-module-title {
font-size: 16px;
font-weight: 500;
color: #E5E7EB;
margin: 0;
}
/* 二、全部应用区域样式 */
.all-applications-container {
padding: 20px;
border-radius: 8px;
margin-top: 20px;
background: #1E1E2E;
}
.title {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
color: #303133;
color: #E5E7EB;
}
/* 应用列表容器改为 flex 横向布局 */
/* 应用列表网格 */
.app-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
gap: 16px;
padding-top: 10px;
margin: 10px 0;
}
/* 每个应用 item 样式 */
/* 应用卡片 */
.app-item {
display: flex;
flex-direction: row; /* 横向排列 */
flex-direction: row;
align-items: center;
cursor: pointer;
border-radius: 8px;
padding: 20px;
width: 160px;
transition: all 0.3s ease;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* 初始阴影更浅 */
position: relative; /* 为三点菜单定位做准备 */
background-color: #2C2C3C;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
position: relative;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* 悬停加深阴影 */
transform: translateY(-2px); /* 轻微上浮增强交互感 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
background-color: #3A3A4A;
}
}
/* 图标区域 */
/* 应用图标容器 */
.app-icon-wrapper {
width: 40px;
height: 40px;
@@ -168,39 +398,36 @@ export default {
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px; /* 与文字保持间距 */
background-color: #f5f7fa; /* 浅背景突出图标 */
margin-right: 12px;
background-color: #374151;
transition: background-color 0.3s ease;
/* hover 时图标区域背景变化 */
.app-item:hover & {
background-color: #e6f0ff;
background-color: #4B5563;
}
}
/* 图标样式 */
.app-icon {
font-size: 24px;
color: #409eff;
font-size: 24px;
color: #F3F4F6;
}
/* 应用名称样式 */
/* 应用名称 */
.app-name {
font-size: 14px;
color: #606266;
flex: 1; /* 占满剩余空间，让三点菜单靠右 */
color: #E5E7EB;
flex: 1;
}
/* 三点菜单样式 */
/* 三点菜单 */
.app-actions {
position: absolute;
top: 8px;
right: 8px;
opacity: 0; /* 默认隐藏 */
opacity: 0;
transition: opacity 0.3s ease;
}
/* 鼠标悬停在卡片上时显示三点菜单 */
.app-item:hover .app-actions {
opacity: 1;
}
@@ -213,29 +440,201 @@ export default {
display: flex;
align-items: center;
justify-content: center;
color: #E5E7EB;
}
/* 三、设置弹窗样式 */
.dialog-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.setting-dialog {
width: 500px;
background: #2C2C3C;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.dialog-header {
padding: 16px 24px;
border-bottom: 1px solid #3A3A4A;
display: flex;
justify-content: space-between;
align-items: center;
}
.dialog-header h3 {
margin: 0;
font-size: 18px;
color: #E5E7EB;
}
.close-btn {
background: none;
border: none;
cursor: pointer;
color: #9CA3AF;
font-size: 18px;
&:hover {
color: #F9FAFB;
}
}
.dialog-content {
padding: 24px;
max-height: 400px;
overflow-y: auto;
background: #2C2C3C;
}
/* 空状态提示 */
.empty-tip {
text-align: center;
padding: 40px 0;
color: #9CA3AF;
font-size: 14px;
background: #374151;
border-radius: 8px;
}
/* 常用应用编辑列表 */
.module-list {
list-style: none;
padding: 0;
margin: 0;
}
.module-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #3A3A4A;
&:last-child {
border-bottom: none;
}
}
.module-info {
display: flex;
align-items: center;
gap: 12px;
}
.module-index {
width: 24px;
height: 24px;
border-radius: 50%;
background: #374151;
color: #E5E7EB;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.module-name {
font-size: 16px;
color: #E5E7EB;
}
.module-actions {
display: flex;
gap: 8px;
}
/* 弹窗底部按钮 */
.dialog-footer {
padding: 16px 24px;
border-top: 1px solid #3A3A4A;
display: flex;
justify-content: flex-end;
gap: 12px;
background: #2C2C3C;
}
.cancel-btn, .confirm-btn {
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
border: none;
}
/* Tabs 样式优化 */
.cancel-btn {
background: #374151;
color: #E5E7EB;
&:hover {
background: #4B5563;
color: #F9FAFB;
}
}
.confirm-btn {
background: #3B82F6;
color: #fff;
&:hover {
background: #2563eb;
}
}
/* 四、Element组件样式穿透调整 */
:deep(.el-tabs__header) {
margin-bottom: 12px;
}
:deep(.el-tabs__nav-wrap::after) {
height: 1px;
background-color: #3A3A4A;
}
:deep(.el-tabs__item) {
font-size: 15px;
color: #9CA3AF;
}
:deep(.el-tabs__item.is-active) {
color: #E5E7EB;
}
/* 下拉菜单样式调整 */
:deep(.el-dropdown-menu) {
min-width: 120px;
background-color: #2C2C3C;
border: 1px solid #3A3A4A;
}
:deep(.el-dropdown-item) {
padding: 6px 16px;
font-size: 14px;
color: #E5E7EB;
&:hover {
background-color: #3A3A4A;
}
}
:deep(.el-button) {
padding: 6px 12px;
color: #E5E7EB;
background-color: #374151;
border: none;
&:hover {
background-color: #4B5563;
}
}
</style>

299
gear-ui3/src/views/dashboard/grid/setting.vue
View File

@@ -16,22 +16,21 @@
<!-- 配置内容区 -->
<div class="settings-content">
<!-- 原有图表配置表格 -->
<div class="charts-config">
<h3 class="section-title">
<el-icon><Grid /></el-icon>
图表配置
</h3>
<!-- 直接保留表格，移除draggable包裹 -->
<el-table
border
size="small"
:height="tableHeight"
row-key="id"
:data="tempChartConfigs">
<!-- 表格列内容保持不变 -->
<el-table-column prop="title" label="图表名称" min-width="120" />
<el-table-column prop="id" label="标识" min-width="100" />
<!-- 图表高度配置列 -->
<el-table-column label="图表高度" min-width="120">
<template #default="scope">
<el-input
@@ -48,8 +47,6 @@
</div>
</template>
</el-table-column>
<!-- 布局配置列 -->
<el-table-column label="超小屏 (≤768px)" min-width="120">
<template #default="scope">
<el-select
@@ -57,14 +54,13 @@
size="small"
append-to="#full-dashboard-container"
:disabled="saving">
<el-option :value="24">独占一行</el-option>
<el-option :value="12">半行宽度</el-option>
<el-option :value="8">三分之一</el-option>
<el-option :value="6">四分之一</el-option>
<el-option value="24">独占一行</el-option>
<el-option value="12">半行宽度</el-option>
<el-option value="8">三分之一</el-option>
<el-option value="6">四分之一</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="小屏 (≥768px)" min-width="120">
<template #default="scope">
<el-select
@@ -72,14 +68,13 @@
size="small"
append-to="#full-dashboard-container"
:disabled="saving">
<el-option :value="24">独占一行</el-option>
<el-option :value="12">半行宽度</el-option>
<el-option :value="8">三分之一</el-option>
<el-option :value="6">四分之一</el-option>
<el-option value="24">独占一行</el-option>
<el-option value="12">半行宽度</el-option>
<el-option value="8">三分之一</el-option>
<el-option value="6">四分之一</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="中屏 (≥992px)" min-width="120">
<template #default="scope">
<el-select
@@ -87,14 +82,13 @@
size="small"
append-to="#full-dashboard-container"
:disabled="saving">
<el-option :value="24">独占一行</el-option>
<el-option :value="12">半行宽度</el-option>
<el-option :value="8">三分之一</el-option>
<el-option :value="6">四分之一</el-option>
<el-option value="24">独占一行</el-option>
<el-option value="12">半行宽度</el-option>
<el-option value="8">三分之一</el-option>
<el-option value="6">四分之一</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="大屏 (≥1200px)" min-width="120">
<template #default="scope">
<el-select
@@ -109,7 +103,6 @@
</el-select>
</template>
</el-table-column>
<el-table-column label="超大屏 (≥1920px)" min-width="120">
<template #default="scope">
<el-select
@@ -124,7 +117,6 @@
</el-select>
</template>
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template #default="scope">
<el-button
@@ -147,6 +139,61 @@
</el-table-column>
</el-table>
</div>
<!-- 新增：布局预览区域 -->
<div class="layout-preview">
<h3 class="section-title">
<el-icon><Eye /></el-icon>
布局预览（实时同步配置）
</h3>
<!-- 预览容器：模拟仪表盘布局 -->
<div class="preview-container">
<!-- 无配置时显示提示 -->
<div v-if="tempChartConfigs.length === 0" class="empty-preview">
<el-empty description="暂无图表配置，无法预览" />
</div>
<!-- 有配置时，用el-row+el-col渲染预览 -->
<el-row
v-else
:gutter="16"
class="preview-row"
:style="{ marginBottom: '16px' }">
<el-col
v-for="(chart, index) in tempChartConfigs"
:key="chart.id || index"
:xs="chart.layout.xs"
:sm="chart.layout.sm"
:md="chart.layout.md"
:lg="chart.layout.lg"
:xl="chart.layout.xl"
class="preview-col">
<!-- 用Card模拟图表容器，高度同步配置 -->
<el-card
class="preview-card"
:style="{
height: `${chart.height}px`,
display: 'flex',
flexDirection: 'column',
transition: 'all 0.3s ease'
}">
<div class="card-header">
<span class="chart-title">{{ chart.title }}</span>
<span class="chart-id">[{{ chart.id }}]</span>
</div>
<!-- 模拟图表内容区域 -->
<div class="chart-placeholder" :style="{ flex: 1, marginTop: '8px' }">
<div class="placeholder-bg"></div>
<div class="placeholder-info">
<p>高度：{{ chart.height }}px</p>
<p>布局：xs={{ chart.layout.xs }} / sm={{ chart.layout.sm }} / md={{ chart.layout.md }}</p>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</div>
<!-- 提示信息 -->
@@ -164,11 +211,11 @@
import { ref, onMounted, reactive } from 'vue';
import { useStorage } from '@vueuse/core';
import { useEventListener } from '@vueuse/core';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Loading, ArrowUp, ArrowDown, Grid } from '@element-plus/icons-vue';
// 移除draggable组件导入
import { ElMessage, ElMessageBox, ElEmpty, ElRow, ElCol, ElCard } from 'element-plus';
// 新增导入预览用图标
import { Loading, Grid, Eye } from '@element-plus/icons-vue';
// 接收存储键名props
// 原有逻辑保持不变，仅新增预览相关变量（如有需要）
const props = defineProps({
storageKey: {
type: String,
@@ -177,7 +224,6 @@ const props = defineProps({
}
});
// 从storage读取配置
const persistedChartConfigs = useStorage(
props.storageKey,
[],
@@ -186,12 +232,8 @@ const persistedChartConfigs = useStorage(
serializer: {
read: (v) => {
try {
if (typeof v === 'string') {
return JSON.parse(v);
}
if (Array.isArray(v)) {
return v;
}
if (typeof v === 'string') return JSON.parse(v);
if (Array.isArray(v)) return v;
return [];
} catch (e) {
console.error('解析存储的图表配置失败，使用空配置:', e);
@@ -204,41 +246,25 @@ const persistedChartConfigs = useStorage(
}
);
// 临时配置
const tempChartConfigs = ref([]);
// 初始配置快照
const initialChartConfigs = ref([]);
// 保存状态
const saving = ref(false);
// 移除拖拽状态变量：isDragging
// 窗口尺寸响应
const windowWidth = ref(window.innerWidth);
const tableHeight = ref(300);
// 高度输入错误标记
const heightErrorIndex = ref(-1);
// 批量设置弹窗
const showBatchSettings = ref(false);
// 批量设置数据
const batchSettings = reactive({
applyRange: 'all', // 'all' 或 'visible'
applyRange: 'all',
height: null,
layout: {
xs: null,
sm: null,
md: null,
lg: null,
xl: null
}
layout: { xs: null, sm: null, md: null, lg: null, xl: null }
});
// 监听窗口尺寸变化
// 原有方法（onMounted、calculateTableHeight、resetToSession等）保持不变
useEventListener('resize', () => {
windowWidth.value = window.innerWidth;
calculateTableHeight();
});
// 初始化：补充height默认值
onMounted(() => {
if (!Array.isArray(persistedChartConfigs.value)) {
persistedChartConfigs.value = [];
@@ -247,21 +273,14 @@ onMounted(() => {
calculateTableHeight();
});
// 计算表格高度
const calculateTableHeight = () => {
// 根据屏幕高度动态计算表格高度，确保整体布局合理
const panelHeight = window.innerHeight - 220;
tableHeight.value = Math.max(300, Math.min(600, panelHeight));
const panelHeight = window.innerHeight - 400; // 预留预览区域高度
tableHeight.value = Math.max(300, Math.min(500, panelHeight));
};
// 重置临时配置：补充height默认值
const resetToSession = () => {
try {
const source = Array.isArray(persistedChartConfigs.value)
? persistedChartConfigs.value
: [];
// 深拷贝 + 补充height默认值和visible属性
const source = Array.isArray(persistedChartConfigs.value) ? persistedChartConfigs.value : [];
const configCopy = JSON.parse(JSON.stringify(source)).map(config => ({
...config,
height: config.height || 400,
@@ -274,7 +293,6 @@ const resetToSession = () => {
xl: config.layout?.xl || 6
}
}));
tempChartConfigs.value = configCopy;
initialChartConfigs.value = JSON.parse(JSON.stringify(configCopy));
ElMessage.info('已恢复到打开设置时的状态');
@@ -284,7 +302,6 @@ const resetToSession = () => {
}
};
// 高度输入验证
const validateHeight = (row, index) => {
heightErrorIndex.value = -1;
if (isNaN(row.height) || row.height < 100 || row.height > 1000) {
@@ -294,48 +311,34 @@ const validateHeight = (row, index) => {
return true;
};
// 移动图表位置（按钮控制）- 保留按钮功能，移除拖拽相关逻辑
const moveChart = (index, direction) => {
let newIndex;
if (direction === 'up' && index > 0) {
newIndex = index - 1;
// 交换位置
[tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] =
[tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
// 触发重绘
[tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] = [tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
tempChartConfigs.value = [...tempChartConfigs.value];
// 添加动画效果
highlightRow(index);
highlightRow(newIndex);
} else if (direction === 'down' && index < tempChartConfigs.value.length - 1) {
newIndex = index + 1;
// 交换位置
[tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] =
[tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
// 触发重绘
[tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] = [tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
tempChartConfigs.value = [...tempChartConfigs.value];
// 添加动画效果
highlightRow(index);
highlightRow(newIndex);
}
};
// 高亮行（动画效果）- 保留按钮移动后的高亮效果
const highlightRow = (index) => {
const rowEl = document.querySelector(`.el-table__row:nth-child(${index + 1})`);
if (rowEl) {
rowEl.classList.add('row-highlight');
setTimeout(() => {
rowEl.classList.remove('row-highlight');
}, 600);
setTimeout(() => rowEl.classList.remove('row-highlight'), 600);
}
};
// 应用批量设置
const applyBatchSettings = () => {
// 过滤需要应用设置的图表
const targetCharts = batchSettings.applyRange === 'visible'
? tempChartConfigs.value.filter(chart => chart.visible)
const targetCharts = batchSettings.applyRange === 'visible'
? tempChartConfigs.value.filter(chart => chart.visible)
: tempChartConfigs.value;
if (targetCharts.length === 0) {
@@ -343,15 +346,10 @@ const applyBatchSettings = () => {
return;
}
// 应用设置
targetCharts.forEach(chart => {
// 应用高度设置
if (batchSettings.height !== null && !isNaN(batchSettings.height) &&
batchSettings.height >= 100 && batchSettings.height <= 1000) {
if (batchSettings.height !== null && !isNaN(batchSettings.height) && batchSettings.height >= 100 && batchSettings.height <= 1000) {
chart.height = batchSettings.height;
}
// 应用布局设置
Object.keys(batchSettings.layout).forEach(key => {
if (batchSettings.layout[key] !== null) {
chart.layout[key] = batchSettings.layout[key];
@@ -359,35 +357,25 @@ const applyBatchSettings = () => {
});
});
// 刷新表格
tempChartConfigs.value = [...tempChartConfigs.value];
showBatchSettings.value = false;
ElMessage.success(`已对 ${targetCharts.length} 个图表应用批量设置`);
};
// 应用设置
const applySettings = async () => {
try {
// 验证所有高度输入
const hasInvalidHeight = tempChartConfigs.value.some((row, index) =>
!validateHeight(row, index)
);
const hasInvalidHeight = tempChartConfigs.value.some((row, index) => !validateHeight(row, index));
if (hasInvalidHeight) {
ElMessage.error('存在无效的高度配置，请修正后重试');
return;
}
// 检查是否有可见图表
const visibleCharts = tempChartConfigs.value.filter(chart => chart.visible);
if (visibleCharts.length === 0) {
await ElMessageBox.confirm(
'所有图表都处于隐藏状态，确定要应用设置吗？',
'确认提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
);
}
@@ -401,7 +389,7 @@ const applySettings = async () => {
throw new Error('配置数据格式错误，必须为数组');
}
} catch (error) {
if (error !== 'cancel') { // 忽略取消操作的错误
if (error !== 'cancel') {
console.error('保存配置失败:', error);
ElMessage.error('保存配置失败，请重试');
}
@@ -410,18 +398,12 @@ const applySettings = async () => {
}
};
// 定义事件
const emits = defineEmits(['config-updated', 'close']);
// 暴露方法给父组件
defineExpose({
resetToSession,
applySettings
});
defineExpose({ resetToSession, applySettings });
</script>
<style scoped>
/* 基础样式 */
/* 原有样式保持不变，新增预览区域样式 */
.chart-settings-panel {
display: flex;
flex-direction: column;
@@ -430,14 +412,11 @@ defineExpose({
padding: 10px;
}
/* 移除所有拖拽相关样式 */
/* 表格行动画效果 */
.el-table__body .el-table-row {
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}
/* 行高亮动画 - 保留按钮移动后的高亮效果 */
.row-highlight {
animation: rowHighlight 0.6s ease;
}
@@ -447,7 +426,6 @@ defineExpose({
100% { background-color: transparent; }
}
/* 高度错误提示 */
.height-error {
font-size: 12px;
color: #ef4444;
@@ -461,7 +439,6 @@ defineExpose({
20%, 40%, 60%, 80% { transform: translateX(2px); }
}
/* 其他样式 */
.panel-header {
display: flex;
justify-content: space-between;
@@ -512,6 +489,92 @@ defineExpose({
border-top: 1px solid #eee;
}
/* 新增：预览区域样式 */
.layout-preview {
flex: 1;
display: flex;
flex-direction: column;
padding: 12px;
border: 1px solid #eee;
border-radius: 8px;
background-color: #fafafa;
}
.preview-container {
flex: 1;
overflow: auto;
padding: 8px;
border-radius: 4px;
background-color: #fff;
}
.empty-preview {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.preview-row {
margin: 0 !important; /* 清除el-row默认margin */
}
.preview-col {
margin-bottom: 16px;
}
.preview-card {
overflow: hidden;
border: 1px solid #e5e7eb !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background-color: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.chart-title {
font-size: 14px;
font-weight: 500;
color: #333;
}
.chart-id {
font-size: 12px;
color: #666;
}
.chart-placeholder {
position: relative;
overflow: hidden;
}
.placeholder-bg {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f0f2f5 0%, #e5e6eb 100%);
}
.placeholder-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 6px 12px;
background-color: rgba(255, 255, 255, 0.8);
font-size: 12px;
color: #666;
}
.placeholder-info p {
margin: 2px 0;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.chart-settings-panel {
@@ -544,5 +607,9 @@ defineExpose({
.section-title {
font-size: 14px;
}
.layout-preview {
padding: 8px;
}
}
</style>

2
gear-ui3/src/views/dashboard/layout/index.vue
View File

@@ -36,7 +36,7 @@
<slot></slot>
</main>
<el-dialog v-model="settingVisible" title="图表设置" width="70%">
<el-dialog v-model="settingVisible" title="图表设置" width="80%">
<ChartSetting />
</el-dialog>
</div>

129
gear-ui3/src/views/index.vue
View File

@@ -2,144 +2,15 @@
<div class="dashboard-root">
<!-- 第一行：头像+欢迎语 -->
<UserGreeting />
<!-- 业务功能区 -->
<div class="business-area-header">
<h2 class="business-area-title">常用应用</h2>
<button class="edit-btn" @click="showSettingDialog = true">
<svg-icon icon-class="edit" /> 编辑常用
</button>
</div>
<div class="business-modules">
<div v-for="(module, index) in businessModules" :key="index"
class="business-module" @click="handleLink(module.link)">
<div class="business-module-icon">
<svg-icon :icon-class="module.icon" />
</div>
<h3 class="business-module-title">{{ module.title }}</h3>
</div>
</div>
<!-- 全部应用 -->
<AllApplications @addFavorites="handleAddFavorites" />
<!-- 设置弹窗 -->
<div class="dialog-mask" v-if="showSettingDialog">
<div class="setting-dialog">
<div class="dialog-header">
<h3>编辑常用应用</h3>
<button class="close-btn" @click="showSettingDialog = false">
<svg-icon icon-class="close" />
</button>
</div>
<div class="dialog-content">
<div class="empty-tip" v-if="businessModules.length === 0">
暂无常用应用，可从下方"全部应用"中添加
</div>
<ul class="module-list" v-else>
<li v-for="(module, index) in businessModules" :key="index" class="module-item">
<div class="module-info">
<span class="module-index">{{ index + 1 }}</span>
<span class="module-name">{{ module.title }}</span>
</div>
<div class="module-actions">
<el-button
@click="moveModule(index, 'up')"
:disabled="index === 0"
icon="ArrowUp" type="primary"
>
</el-button>
<el-button
@click="moveModule(index, 'down')"
:disabled="index === businessModules.length - 1"
icon="ArrowDown" type="primary"
>
</el-button>
<el-button @click="deleteModule(index)" icon="Delete" danger>
</el-button>
</div>
</li>
</ul>
</div>
<div class="dialog-footer">
<button class="cancel-btn" @click="showSettingDialog = false">取消</button>
<button class="confirm-btn" @click="showSettingDialog = false">完成</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import AllApplications from '@/components/AllApplications.vue';
import UserGreeting from '@/views/components/Hello.vue';
import { useRouter } from 'vue-router';
import { useStorage } from '@vueuse/core'
// 响应式数据
const businessModules = useStorage('businessModules', [
{
title: '考勤日历',
icon: 'code',
link: '/people/calendar'
},
{
title: '系统设置',
icon: 'system',
link: '/system/menu'
},
]);
const showSettingDialog = ref(false); // 控制弹窗显示
// 路由实例
const router = useRouter();
// 方法定义
const handleLink = (link) => {
if (link.startsWith('http') || link.endsWith('.html')) {
window.open(link, '_blank');
} else {
router.push(link);
}
};
const handleAddFavorites = (appInfo) => {
// 检查是否已经存在，如果已经存在就移除，否则添加
const index = businessModules.value.findIndex(module => module.link === appInfo.fullPath)
if (index !== -1) {
businessModules.value.splice(index, 1)
} else {
businessModules.value.push({
title: appInfo.child.meta.title,
icon: appInfo.child.meta.icon,
link: appInfo.fullPath
})
}
};
// 移动模块位置（排序功能）
const moveModule = (index, direction) => {
// 创建副本避免直接修改源数组导致的响应式问题
const newModules = [...businessModules.value];
// 上移：与前一个元素交换位置
if (direction === 'up' && index > 0) {
[newModules[index], newModules[index - 1]] = [newModules[index - 1], newModules[index]];
}
// 下移：与后一个元素交换位置
if (direction === 'down' && index < newModules.length - 1) {
[newModules[index], newModules[index + 1]] = [newModules[index + 1], newModules[index]];
}
// 更新响应式数据
businessModules.value = newModules;
};
// 删除模块
const deleteModule = (index) => {
if (confirm('确定要移除该常用应用吗？')) {
businessModules.value.splice(index, 1);
}
};
</script>
<style scoped>

142
gear-ui3/src/views/login.vue
View File

@@ -1,72 +1,46 @@
<template>
<div class="login">
<div class="login-container">
<div class="login-right">
<img :src="RightImage" alt="" class="right-img" />
</div>
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">
<img :src="LogoImage" alt="公司 Logo" class="logo-img"/>
{{ title }}
</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
size="large"
auto-complete="off"
placeholder="账号"
>
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
size="large"
auto-complete="off"
placeholder="密码"
@keyup.enter="handleLogin"
>
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
size="large"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter="handleLogin"
>
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="large"
type="primary"
style="width:100%;"
@click.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<h3 class="title">
{{ title }}
</h3>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
@keyup.enter="handleLogin">
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%"
@keyup.enter="handleLogin">
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
</div>
<div class="login-right">
<img :src="RightImage" alt="公司 Logo" class="right-img"/>
</div>
</div>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
@@ -80,8 +54,8 @@ import Cookies from "js-cookie"
import { encrypt, decrypt } from "@/utils/jsencrypt"
import useUserStore from '@/store/modules/user'
import useProductStore from '@/store/modules/product'
import RightImage from '@/assets/images/right.jpg'
import LogoImage from '@/assets/logo/logo-full.jpg'
import RightImage from '@/assets/images/right.png'
import LogoImage from '@/assets/logo/logo.png'
const title = import.meta.env.VITE_APP_TITLE
const userStore = useUserStore()
@@ -112,7 +86,7 @@ const register = ref(false)
const redirect = ref(undefined)
watch(route, (newRoute) => {
redirect.value = newRoute.query && newRoute.query.redirect
redirect.value = newRoute.query && newRoute.query.redirect
}, { immediate: true })
function handleLogin() {
@@ -183,13 +157,14 @@ getCookie()
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/back.jpg");
background-color: #1a1a1a;
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
color: #ebebeb;
display: flex;
align-items: center;
justify-content: center;
@@ -201,8 +176,8 @@ getCookie()
}
.logo-img {
width: 100px;
height: 100px;
width: 50px;
height: 50px;
}
.login-container {
@@ -211,21 +186,35 @@ getCookie()
align-items: center;
box-sizing: border-box;
// height: 60%;
border-radius: 6px;
background: #ffffff;
width: 60%;
padding: 25px 25px 5px 25px;
}
:deep(.el-input__wrapper) {
background: #333333;
border-radius: 6px;
border: 1px solid #444444;
}
.el-input {
color: #ebebeb;
}
.login-form {
z-index: 1;
flex: 3;
border-radius: 6px;
background: #292929;
padding: 25px;
.el-input {
height: 40px;
input {
height: 40px;
}
}
.input-icon {
height: 39px;
width: 14px;
@@ -234,6 +223,9 @@ getCookie()
}
.login-right {
display: flex;
padding: 30px;
flex: 4;
}
@@ -242,15 +234,18 @@ getCookie()
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 40px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
@@ -263,6 +258,7 @@ getCookie()
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 40px;
padding-left: 12px;