✨ feat: 增加大屏素材

gear-ui3/src/components/GearTable/index.vue

@@ -66,7 +66,7 @@
         :sortable="column.sortable"
       >
           <template v-slot="scope">
-            <ColumnRender v-if="column.render" :column="column" :data="scope.row" :render="column.render"/>
+            <el-columnRender v-if="column.render" :column="column" :data="scope.row" :render="column.render"/>
             <Eclipse v-else-if="column.eclipse" :text="scope.row[column.prop]"></Eclipse>
             <span v-else>{{ scope.row[column.prop] }}</span>
         </template>

gear-ui3/src/utils/img.js

@@ -0,0 +1,7 @@
+export default {
+  center: import('@/assets/images/dashboard/center.gif'),
+  normal_bg: import('@/assets/images/dashboard/normal_bg.png'),
+  normal_title: import('@/assets/images/dashboard/normal_title.png'),
+  sensitive_bg: import('@/assets/images/dashboard/sensitive_bg.png'),
+  sensitive_title: import('@/assets/images/dashboard/sensitive_title.png')
+}

gear-ui3/src/views/dashboard/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div ref="fullscreenTarget" class="dashboard-container">
+    <Layout></Layout>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+import Layout from './layout.vue'
+// 从 vue-router 导入路由钩子，而不是从 vue 导入
+import { onBeforeRouteLeave } from 'vue-router';
+import { useFullscreen } from '@vueuse/core';
+import { debounce } from '@/utils/index';
+
+// 全屏目标元素
+const fullscreenTarget = ref(null);
+
+// 使用 VueUse 的全屏功能
+const {
+  isFullscreen,
+  enter,
+  exit,
+  toggle
+} = useFullscreen(fullscreenTarget, {
+  navigationUI: 'hide', // 隐藏导航UI
+});
+
+// 进入全屏处理（兼容浏览器用户手势限制）
+const handleEnterFullscreen = () => {
+  if (!isFullscreen.value && fullscreenTarget.value) {
+    // 创建隐藏按钮模拟用户交互
+    const trigger = document.createElement('button');
+    trigger.style.position = 'absolute';
+    trigger.style.opacity = '0';
+    trigger.style.pointerEvents = 'none';
+    document.body.appendChild(trigger);
+    
+    // 点击事件触发全屏
+    trigger.addEventListener('click', () => {
+      enter().catch(err => {
+        console.warn('全屏请求失败:', err);
+      });
+    });
+    
+    // 模拟点击
+    trigger.click();
+    document.body.removeChild(trigger);
+  }
+};
+
+// 组件挂载后自动全屏
+onMounted(() => {
+  // 延迟执行以确保DOM已完全渲染
+  const documentWidth = document.body.offsetWidth;
+        const ratio = documentWidth / 1920;
+        if (documentWidth > 1920) {
+            document.body.style.transform = `scale(${ratio}, ${ratio})`
+        }
+        const resizeFn = debounce(function () {
+            const documentWidth = document.body.offsetWidth;
+            const ratio = documentWidth / 1920;
+            if (documentWidth > 1920) {
+                document.body.style.transform = `scale(${ratio}, ${ratio})`
+            }
+        }, 200)
+        window.addEventListener('resize', resizeFn);
+        
+  setTimeout(handleEnterFullscreen, 100);
+});
+
+// 路由离开前退出全屏
+onBeforeRouteLeave((to, from, next) => {
+  if (isFullscreen.value) {
+    exit();
+    window.removeEventListener('resize', resizeFn);
+  }
+  next();
+});
+
+// 组件卸载时退出全屏
+onBeforeUnmount(() => {
+  if (isFullscreen.value) {
+    exit();
+  }
+});
+</script>
+
+<style scoped>
+.dashboard-container {
+  width: 100vw;
+  height: 100vh;
+  /* background: url('@/assets/images/dashboard/normal_bg.png') center center no-repeat; */
+  background-size: 100% 100%;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+}
+</style>

gear-ui3/src/views/dashboard/layout.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="dashboard-layout">
+    <!-- 顶部导航栏 -->
+    <header class="layout-header">
+      <button 
+        class="header-btn back-btn" 
+        @click="handleBack"
+        aria-label="返回"
+      >
+        <el-icon><ArrowLeft /></el-icon>
+        <span>返回</span>
+      </button>
+      
+      <h1 class="layout-title">{{ title }}</h1>
+      
+      <div style="display: flex;align-items: center;gap: 10px;">
+        <button class="header-btn" aria-label="设置">
+          <el-icon><Setting /></el-icon>
+          <span>设置</span>
+        </button>
+        <button 
+        class="header-btn refresh-btn" 
+        @click="handleRefresh"
+        aria-label="刷新"
+      >
+        <el-icon><Refresh /></el-icon>
+        <span>刷新</span>
+      </button>
+      </div>
+    </header>
+    
+    <!-- 图表内容区域 -->
+    <main class="charts-container">
+      <!-- 图表网格布局 -->
+      <div class="charts-grid">
+        <div>图表1</div>
+        <div>图表2</div>
+        <div>图表3</div>
+        <div>图表4</div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { ArrowLeft, Refresh, Setting } from '@element-plus/icons-vue';
+
+// 路由实例
+const router = useRouter();
+
+// 大屏标题
+const title = ref('数据可视化大屏');
+
+// 返回上一页
+const handleBack = () => {
+  router.back();
+};
+
+// 刷新数据
+const handleRefresh = () => {
+  // 这里可以实现数据刷新逻辑
+  // 示例：触发所有图表组件重新加载数据
+  const event = new CustomEvent('refresh-data');
+  window.dispatchEvent(event);
+  
+  // 可选：添加刷新动画效果
+  const refreshBtn = document.querySelector('.refresh-btn i');
+  refreshBtn.classList.add('refreshing');
+  setTimeout(() => {
+    refreshBtn.classList.remove('refreshing');
+  }, 800);
+};
+</script>
+
+<style scoped>
+.dashboard-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 顶部导航样式 */
+.layout-header {
+  height: 60px;
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: url('@/assets/images/dashboard/title_bg.png') center center no-repeat;
+  background-size: 100% 100%;
+  border-bottom: 1px solid #334155;
+  z-index: 10;
+}
+
+.layout-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #f8fafc;
+  margin: 0;
+}
+
+.header-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background-color: #334155;
+  color: #f8fafc;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.header-btn:hover {
+  background-color: #475569;
+}
+
+.header-btn i {
+  font-size: 16px;
+}
+
+/* 图标样式 */
+.icon-arrow-left::before {
+  content: '←';
+}
+
+.icon-refresh::before {
+  content: '↺';
+}
+
+.refreshing {
+  animation: spin 0.8s linear;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 图表容器样式 */
+.charts-container {
+  flex: 1;
+  padding: 20px;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.charts-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 20px;
+  height: 100%;
+}
+
+.chart-item {
+  background-color: #1e293b;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+}
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .charts-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, 1fr);
+  }
+}
+</style>

gear-ui3/src/views/info/report/components/ExportDialog.vue

@@ -36,7 +36,7 @@
     <!-- 导出按钮 -->
     <el-button 
       type="primary" 
-      icon="el-icon-download" 
+      icon="Download" 
       @click="handleExport"
       :loading="exportLoading"
       :disabled="!canExport"

gear-ui3/src/views/monitor/cache/list.vue

@@ -4,7 +4,7 @@
       <el-col :span="8">
         <el-card style="height: calc(100vh - 125px)">
           <template #header>
-            <Collection style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">缓存列表</span>
+            <el-collection style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">缓存列表</span>
             <el-button
               style="float: right; padding: 3px 0"
               link