Home Explore Help
Sign In
liuq
/
simple_navigation_page
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

更新

liuq 4 months ago
parent
161f816946
commit
6c4e12c1dc
10 changed files with 844 additions and 53 deletions
Unified View Show Diff Stats
  1. 6 6
      auto-login-config.json
  2. 199 0
      example_page/hr.html
  3. 200 0
      example_page/park.html
  4. 200 0
      example_page/salary.html
  5. 200 0
      example_page/training.html
  6. BIN
      logo.png
  7. BIN
      public/logo.png
  8. 3 0
      server.js
  9. 22 33
      src/components/NavigationTV.vue
  10. 14 14
      src/data/navigation.json

+ 6 - 6
auto-login-config.json
View File 

@@ -18,8 +18,8 @@
 
       "successField": "code"
 
       "successField": "code"
 
     },
 
     },
 
     "credentials": {
 
     "credentials": {
 
-      "username": "admin",
 
-      "password": "admin888",
 
+      "username": "adminyz",
 
+      "password": "adminyz888",
 
       "envUsername": "VIDEO_ANALYSIS_USERNAME",
 
       "envUsername": "VIDEO_ANALYSIS_USERNAME",
 
       "envPassword": "VIDEO_ANALYSIS_PASSWORD"
 
       "envPassword": "VIDEO_ANALYSIS_PASSWORD"
 
     }
 
     }
 
@@ -31,8 +31,8 @@
 
     "targetBaseUrl": "http://222.243.138.146:8123",
 
     "targetBaseUrl": "http://222.243.138.146:8123",
 
     "loginMethod": "home-assistant",
 
     "loginMethod": "home-assistant",
 
     "credentials": {
 
     "credentials": {
 
-      "username": "guest",
 
-      "password": "guest-888",
 
+      "username": "adminyz",
 
+      "password": "adminyz888",
 
       "envUsername": "HOME_ASSISTANT_USERNAME",
 
       "envUsername": "HOME_ASSISTANT_USERNAME",
 
       "envPassword": "HOME_ASSISTANT_PASSWORD"
 
       "envPassword": "HOME_ASSISTANT_PASSWORD"
 
     }
 
     }
 
@@ -54,8 +54,8 @@
 
         "successResponse": "ok"
 
         "successResponse": "ok"
 
       },
 
       },
 
     "credentials": {
 
     "credentials": {
 
-      "username": "huangr",
 
-      "password": "888888",
 
+      "username": "adminyz",
 
+      "password": "adminyz888",
 
       "envUsername": "OA_SYSTEM_USERNAME",
 
       "envUsername": "OA_SYSTEM_USERNAME",
 
       "envPassword": "OA_SYSTEM_PASSWORD"
 
       "envPassword": "OA_SYSTEM_PASSWORD"
 
     }
 
     }

+ 199 - 0
example_page/hr.html
View File 

@@ -0,0 +1,199 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>人力资源管理系统</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+        }
 
+
 
+        body {
 
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
 
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
+            min-height: 100vh;
 
+            padding: 20px;
 
+            color: #333;
 
+        }
 
+
 
+        .container {
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+            background: white;
 
+            border-radius: 20px;
 
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 
+            overflow: hidden;
 
+        }
 
+
 
+        .header {
 
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
+            color: white;
 
+            padding: 60px 40px;
 
+            text-align: center;
 
+        }
 
+
 
+        .header h1 {
 
+            font-size: 48px;
 
+            margin-bottom: 15px;
 
+            font-weight: 700;
 
+        }
 
+
 
+        .header p {
 
+            font-size: 20px;
 
+            opacity: 0.95;
 
+        }
 
+
 
+        .content {
 
+            padding: 50px 40px;
 
+        }
 
+
 
+        .section {
 
+            margin-bottom: 50px;
 
+        }
 
+
 
+        .section h2 {
 
+            font-size: 32px;
 
+            color: #667eea;
 
+            margin-bottom: 25px;
 
+            padding-bottom: 15px;
 
+            border-bottom: 3px solid #667eea;
 
+        }
 
+
 
+        .section p {
 
+            font-size: 18px;
 
+            line-height: 1.8;
 
+            color: #555;
 
+            margin-bottom: 20px;
 
+        }
 
+
 
+        .features {
 
+            display: grid;
 
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 
+            gap: 30px;
 
+            margin-top: 30px;
 
+        }
 
+
 
+        .feature-card {
 
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 
+            padding: 30px;
 
+            border-radius: 15px;
 
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
 
+        }
 
+
 
+        .feature-card:hover {
 
+            transform: translateY(-5px);
 
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
 
+        }
 
+
 
+        .feature-card h3 {
 
+            font-size: 24px;
 
+            color: #667eea;
 
+            margin-bottom: 15px;
 
+        }
 
+
 
+        .feature-card p {
 
+            font-size: 16px;
 
+            color: #666;
 
+            line-height: 1.6;
 
+        }
 
+
 
+        .back-button {
 
+            display: inline-block;
 
+            margin-top: 30px;
 
+            padding: 15px 40px;
 
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
+            color: white;
 
+            text-decoration: none;
 
+            border-radius: 50px;
 
+            font-size: 18px;
 
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
 
+        }
 
+
 
+        .back-button:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
 
+        }
 
+
 
+        .icon {
 
+            font-size: 40px;
 
+            margin-bottom: 15px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <div class="header">
 
+            <h1>👥 人力资源管理系统</h1>
 
+            <p>员工信息、招聘、绩效管理</p>
 
+        </div>
 
+        
+        <div class="content">
 
+            <div class="section">
 
+                <h2>系统简介</h2>
 
+                <p>
 
+                    人力资源管理系统是一套完整的企业人力资源管理解决方案，旨在帮助企业高效管理员工信息、优化招聘流程、提升绩效管理水平。
 
+                    系统采用现代化的技术架构，提供直观易用的操作界面，助力企业实现人力资源管理的数字化转型。
 
+                </p>
 
+            </div>
 
+
 
+            <div class="section">
 
+                <h2>核心功能</h2>
 
+                <div class="features">
 
+                    <div class="feature-card">
 
+                        <div class="icon">📋</div>
 
+                        <h3>员工信息管理</h3>
 
+                        <p>集中管理员工基本信息、合同档案、考勤记录等，支持多维度查询和统计分析，实现员工信息的全生命周期管理。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">🎯</div>
 
+                        <h3>招聘管理</h3>
 
+                        <p>从职位发布、简历筛选、面试安排到录用决策，全程数字化管理招聘流程，提升招聘效率和质量。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">📊</div>
 
+                        <h3>绩效管理</h3>
 
+                        <p>支持多种绩效评估模式，包括KPI考核、360度评估等，提供绩效数据分析，帮助管理者做出科学决策。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">📈</div>
 
+                        <h3>组织架构管理</h3>
 
+                        <p>可视化组织架构图，灵活调整部门设置和岗位配置，支持多层级组织架构管理。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">📅</div>
 
+                        <h3>考勤管理</h3>
 
+                        <p>集成多种考勤方式，自动统计考勤数据，支持请假、加班、调休等各类考勤业务处理。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">📑</div>
 
+                        <h3>档案管理</h3>
 
+                        <p>电子化员工档案管理，支持合同管理、证书管理、培训记录等各类档案的存储和查询。</p>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+            <div class="section">
 
+                <h2>系统优势</h2>
 
+                <p>
 
+                    • <strong>数据安全</strong>：采用多重加密技术，确保员工信息安全，符合数据保护法规要求<br>
 
+                    • <strong>操作便捷</strong>：直观的用户界面设计，降低学习成本，提升工作效率<br>
 
+                    • <strong>灵活配置</strong>：支持自定义流程和表单，适应不同企业的管理需求<br>
 
+                    • <strong>数据分析</strong>：强大的数据统计和分析功能，为管理决策提供数据支持<br>
 
+                    • <strong>移动办公</strong>：支持移动端访问，随时随地处理人力资源相关事务
 
+                </p>
 
+            </div>
 
+
 
+            <a href="javascript:history.back()" class="back-button">← 返回导航</a>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>
 
+

+ 200 - 0
example_page/park.html
View File 

@@ -0,0 +1,200 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>园区管理平台</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+        }
 
+
 
+        body {
 
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
 
+            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
 
+            min-height: 100vh;
 
+            padding: 20px;
 
+            color: #333;
 
+        }
 
+
 
+        .container {
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+            background: white;
 
+            border-radius: 20px;
 
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 
+            overflow: hidden;
 
+        }
 
+
 
+        .header {
 
+            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
 
+            color: white;
 
+            padding: 60px 40px;
 
+            text-align: center;
 
+        }
 
+
 
+        .header h1 {
 
+            font-size: 48px;
 
+            margin-bottom: 15px;
 
+            font-weight: 700;
 
+        }
 
+
 
+        .header p {
 
+            font-size: 20px;
 
+            opacity: 0.95;
 
+        }
 
+
 
+        .content {
 
+            padding: 50px 40px;
 
+        }
 
+
 
+        .section {
 
+            margin-bottom: 50px;
 
+        }
 
+
 
+        .section h2 {
 
+            font-size: 32px;
 
+            color: #43e97b;
 
+            margin-bottom: 25px;
 
+            padding-bottom: 15px;
 
+            border-bottom: 3px solid #43e97b;
 
+        }
 
+
 
+        .section p {
 
+            font-size: 18px;
 
+            line-height: 1.8;
 
+            color: #555;
 
+            margin-bottom: 20px;
 
+        }
 
+
 
+        .features {
 
+            display: grid;
 
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 
+            gap: 30px;
 
+            margin-top: 30px;
 
+        }
 
+
 
+        .feature-card {
 
+            background: linear-gradient(135deg, #e8f8f0 0%, #d4f5e6 100%);
 
+            padding: 30px;
 
+            border-radius: 15px;
 
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
 
+        }
 
+
 
+        .feature-card:hover {
 
+            transform: translateY(-5px);
 
+            box-shadow: 0 10px 30px rgba(67, 233, 123, 0.3);
 
+        }
 
+
 
+        .feature-card h3 {
 
+            font-size: 24px;
 
+            color: #43e97b;
 
+            margin-bottom: 15px;
 
+        }
 
+
 
+        .feature-card p {
 
+            font-size: 16px;
 
+            color: #666;
 
+            line-height: 1.6;
 
+        }
 
+
 
+        .back-button {
 
+            display: inline-block;
 
+            margin-top: 30px;
 
+            padding: 15px 40px;
 
+            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
 
+            color: white;
 
+            text-decoration: none;
 
+            border-radius: 50px;
 
+            font-size: 18px;
 
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
 
+        }
 
+
 
+        .back-button:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 10px 25px rgba(67, 233, 123, 0.4);
 
+        }
 
+
 
+        .icon {
 
+            font-size: 40px;
 
+            margin-bottom: 15px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <div class="header">
 
+            <h1>🏢 园区管理平台</h1>
 
+            <p>智能安防警戒与园区管理</p>
 
+        </div>
 
+        
+        <div class="content">
 
+            <div class="section">
 
+                <h2>系统简介</h2>
 
+                <p>
 
+                    园区管理平台是一套集智能安防、设备管理、环境监测、访客管理等功能于一体的综合性园区管理解决方案。
 
+                    系统采用物联网、人工智能等先进技术，实现园区的智能化、数字化管理，提升园区安全性和运营效率，
 
+                    为园区内的企业和员工提供安全、舒适、便捷的工作环境。
 
+                </p>
 
+            </div>
 
+
 
+            <div class="section">
 
+                <h2>核心功能</h2>
 
+                <div class="features">
 
+                    <div class="feature-card">
 
+                        <div class="icon">🛡️</div>
 
+                        <h3>智能安防</h3>
 
+                        <p>集成视频监控、门禁系统、周界报警等安防设备，实现24小时实时监控，支持人脸识别、异常行为检测等智能分析功能。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">🚪</div>
 
+                        <h3>访客管理</h3>
 
+                        <p>在线预约、身份验证、访客登记、通行权限管理等全流程访客管理，提升园区安全性和管理效率。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">🚗</div>
 
+                        <h3>车辆管理</h3>
 
+                        <p>车辆进出管理、停车位管理、车辆识别、收费管理等，支持无感支付，提升车辆通行效率。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">🏗️</div>
 
+                        <h3>设备管理</h3>
 
+                        <p>园区内各类设备的统一管理，包括设备台账、维护保养、故障报修、能耗监测等功能，确保设备正常运行。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">🌡️</div>
 
+                        <h3>环境监测</h3>
 
+                        <p>实时监测园区内的空气质量、温湿度、噪音等环境指标，提供环境数据分析和预警功能。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">📱</div>
 
+                        <h3>移动应用</h3>
 
+                        <p>提供移动端应用，支持访客预约、门禁开门、报修申请、信息查询等功能，方便用户随时随地使用。</p>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+            <div class="section">
 
+                <h2>系统优势</h2>
 
+                <p>
 
+                    • <strong>智能识别</strong>：采用AI技术，实现人脸识别、车牌识别等智能识别功能，提升管理效率<br>
 
+                    • <strong>实时监控</strong>：7×24小时实时监控，及时发现和处理安全隐患，保障园区安全<br>
 
+                    • <strong>数据集成</strong>：统一的数据平台，整合各类设备和系统数据，实现数据共享和协同管理<br>
 
+                    • <strong>预警机制</strong>：智能预警系统，及时发现异常情况，快速响应和处理突发事件<br>
 
+                    • <strong>节能环保</strong>：智能能耗管理，优化设备运行，降低能耗成本，实现绿色园区管理
 
+                </p>
 
+            </div>
 
+
 
+            <a href="javascript:history.back()" class="back-button">← 返回导航</a>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>
 
+

+ 200 - 0
example_page/salary.html
View File 

@@ -0,0 +1,200 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>工资发放系统</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+        }
 
+
 
+        body {
 
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
 
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 
+            min-height: 100vh;
 
+            padding: 20px;
 
+            color: #333;
 
+        }
 
+
 
+        .container {
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+            background: white;
 
+            border-radius: 20px;
 
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 
+            overflow: hidden;
 
+        }
 
+
 
+        .header {
 
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 
+            color: white;
 
+            padding: 60px 40px;
 
+            text-align: center;
 
+        }
 
+
 
+        .header h1 {
 
+            font-size: 48px;
 
+            margin-bottom: 15px;
 
+            font-weight: 700;
 
+        }
 
+
 
+        .header p {
 
+            font-size: 20px;
 
+            opacity: 0.95;
 
+        }
 
+
 
+        .content {
 
+            padding: 50px 40px;
 
+        }
 
+
 
+        .section {
 
+            margin-bottom: 50px;
 
+        }
 
+
 
+        .section h2 {
 
+            font-size: 32px;
 
+            color: #f5576c;
 
+            margin-bottom: 25px;
 
+            padding-bottom: 15px;
 
+            border-bottom: 3px solid #f5576c;
 
+        }
 
+
 
+        .section p {
 
+            font-size: 18px;
 
+            line-height: 1.8;
 
+            color: #555;
 
+            margin-bottom: 20px;
 
+        }
 
+
 
+        .features {
 
+            display: grid;
 
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 
+            gap: 30px;
 
+            margin-top: 30px;
 
+        }
 
+
 
+        .feature-card {
 
+            background: linear-gradient(135deg, #ffeef1 0%, #ffe0e5 100%);
 
+            padding: 30px;
 
+            border-radius: 15px;
 
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
 
+        }
 
+
 
+        .feature-card:hover {
 
+            transform: translateY(-5px);
 
+            box-shadow: 0 10px 30px rgba(245, 87, 108, 0.3);
 
+        }
 
+
 
+        .feature-card h3 {
 
+            font-size: 24px;
 
+            color: #f5576c;
 
+            margin-bottom: 15px;
 
+        }
 
+
 
+        .feature-card p {
 
+            font-size: 16px;
 
+            color: #666;
 
+            line-height: 1.6;
 
+        }
 
+
 
+        .back-button {
 
+            display: inline-block;
 
+            margin-top: 30px;
 
+            padding: 15px 40px;
 
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 
+            color: white;
 
+            text-decoration: none;
 
+            border-radius: 50px;
 
+            font-size: 18px;
 
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
 
+        }
 
+
 
+        .back-button:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 10px 25px rgba(245, 87, 108, 0.4);
 
+        }
 
+
 
+        .icon {
 
+            font-size: 40px;
 
+            margin-bottom: 15px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <div class="header">
 
+            <h1>💰 工资发放系统</h1>
 
+            <p>薪资计算与发放管理</p>
 
+        </div>
 
+        
+        <div class="content">
 
+            <div class="section">
 
+                <h2>系统简介</h2>
 
+                <p>
 
+                    工资发放系统是一套专业的薪资管理解决方案，为企业提供从薪资计算、审核到发放的全流程管理。
 
+                    系统支持多种薪资结构、自动计算各类津贴补贴、个税计算等功能，确保薪资发放的准确性和及时性，
 
+                    同时提供详细的薪资报表和统计分析，帮助企业优化薪酬管理。
 
+                </p>
 
+            </div>
 
+
 
+            <div class="section">
 
+                <h2>核心功能</h2>
 
+                <div class="features">
 
+                    <div class="feature-card">
 
+                        <div class="icon">🧮</div>
 
+                        <h3>薪资计算</h3>
 
+                        <p>自动计算基本工资、绩效奖金、各类津贴补贴，支持复杂的薪资公式配置，确保计算准确无误。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">📋</div>
 
+                        <h3>个税管理</h3>
 
+                        <p>自动计算个人所得税，支持最新的个税政策，包括专项扣除、专项附加扣除等，确保合规性。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">✅</div>
 
+                        <h3>审核流程</h3>
 
+                        <p>多级审核机制，支持薪资数据的复核和审批，确保薪资发放的准确性和安全性。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">💳</div>
 
+                        <h3>发放管理</h3>
 
+                        <p>支持银行代发、现金发放等多种发放方式，自动生成发放清单，与银行系统对接，实现批量发放。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">📊</div>
 
+                        <h3>薪资报表</h3>
 
+                        <p>提供丰富的薪资报表，包括工资条、薪资汇总表、成本分析表等，支持自定义报表格式。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">🔒</div>
 
+                        <h3>数据安全</h3>
 
+                        <p>严格的权限控制，确保薪资数据的安全性和保密性，支持数据加密和操作日志记录。</p>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+            <div class="section">
 
+                <h2>系统优势</h2>
 
+                <p>
 
+                    • <strong>计算精准</strong>：采用精确的计算引擎，支持复杂的薪资规则，确保计算结果准确无误<br>
 
+                    • <strong>政策同步</strong>：及时更新最新的个税政策和社保政策，确保合规性<br>
 
+                    • <strong>流程规范</strong>：标准化的薪资发放流程，减少人为错误，提高工作效率<br>
 
+                    • <strong>数据透明</strong>：员工可在线查看个人工资条，提高薪资透明度<br>
 
+                    • <strong>成本控制</strong>：提供详细的薪资成本分析，帮助企业优化薪酬结构
 
+                </p>
 
+            </div>
 
+
 
+            <a href="javascript:history.back()" class="back-button">← 返回导航</a>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>
 
+

+ 200 - 0
example_page/training.html
View File 

@@ -0,0 +1,200 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>公司培训系统</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+        }
 
+
 
+        body {
 
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
 
+            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 
+            min-height: 100vh;
 
+            padding: 20px;
 
+            color: #333;
 
+        }
 
+
 
+        .container {
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+            background: white;
 
+            border-radius: 20px;
 
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 
+            overflow: hidden;
 
+        }
 
+
 
+        .header {
 
+            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 
+            color: white;
 
+            padding: 60px 40px;
 
+            text-align: center;
 
+        }
 
+
 
+        .header h1 {
 
+            font-size: 48px;
 
+            margin-bottom: 15px;
 
+            font-weight: 700;
 
+        }
 
+
 
+        .header p {
 
+            font-size: 20px;
 
+            opacity: 0.95;
 
+        }
 
+
 
+        .content {
 
+            padding: 50px 40px;
 
+        }
 
+
 
+        .section {
 
+            margin-bottom: 50px;
 
+        }
 
+
 
+        .section h2 {
 
+            font-size: 32px;
 
+            color: #4facfe;
 
+            margin-bottom: 25px;
 
+            padding-bottom: 15px;
 
+            border-bottom: 3px solid #4facfe;
 
+        }
 
+
 
+        .section p {
 
+            font-size: 18px;
 
+            line-height: 1.8;
 
+            color: #555;
 
+            margin-bottom: 20px;
 
+        }
 
+
 
+        .features {
 
+            display: grid;
 
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 
+            gap: 30px;
 
+            margin-top: 30px;
 
+        }
 
+
 
+        .feature-card {
 
+            background: linear-gradient(135deg, #e6f4ff 0%, #d0e8ff 100%);
 
+            padding: 30px;
 
+            border-radius: 15px;
 
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
 
+        }
 
+
 
+        .feature-card:hover {
 
+            transform: translateY(-5px);
 
+            box-shadow: 0 10px 30px rgba(79, 172, 254, 0.3);
 
+        }
 
+
 
+        .feature-card h3 {
 
+            font-size: 24px;
 
+            color: #4facfe;
 
+            margin-bottom: 15px;
 
+        }
 
+
 
+        .feature-card p {
 
+            font-size: 16px;
 
+            color: #666;
 
+            line-height: 1.6;
 
+        }
 
+
 
+        .back-button {
 
+            display: inline-block;
 
+            margin-top: 30px;
 
+            padding: 15px 40px;
 
+            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 
+            color: white;
 
+            text-decoration: none;
 
+            border-radius: 50px;
 
+            font-size: 18px;
 
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
 
+        }
 
+
 
+        .back-button:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 10px 25px rgba(79, 172, 254, 0.4);
 
+        }
 
+
 
+        .icon {
 
+            font-size: 40px;
 
+            margin-bottom: 15px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <div class="header">
 
+            <h1>📚 公司培训系统</h1>
 
+            <p>员工培训课程与学习管理</p>
 
+        </div>
 
+        
+        <div class="content">
 
+            <div class="section">
 
+                <h2>系统简介</h2>
 
+                <p>
 
+                    公司培训系统是一套完整的在线学习管理平台，为企业提供培训课程管理、学习进度跟踪、考核评估等功能。
 
+                    系统支持多种学习形式，包括在线视频、直播课程、文档学习等，帮助员工提升专业技能和综合素质，
 
+                    同时为企业建立完善的人才培养体系，提升组织竞争力。
 
+                </p>
 
+            </div>
 
+
 
+            <div class="section">
 
+                <h2>核心功能</h2>
 
+                <div class="features">
 
+                    <div class="feature-card">
 
+                        <div class="icon">🎓</div>
 
+                        <h3>课程管理</h3>
 
+                        <p>支持创建和管理各类培训课程，包括课程分类、课程内容、学习资料上传等，支持视频、文档、PPT等多种格式。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">📺</div>
 
+                        <h3>在线学习</h3>
 
+                        <p>提供流畅的在线学习体验，支持视频播放、进度记录、笔记功能，员工可随时随地学习，灵活安排学习时间。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">📝</div>
 
+                        <h3>学习跟踪</h3>
 
+                        <p>实时跟踪员工学习进度，记录学习时长、完成情况等数据，帮助管理者了解培训效果和员工学习状态。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">✅</div>
 
+                        <h3>考核评估</h3>
 
+                        <p>支持在线考试、作业提交、学习评估等功能，自动生成成绩单和培训证书，确保培训质量。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">👥</div>
 
+                        <h3>培训计划</h3>
 
+                        <p>制定和管理培训计划，支持按部门、岗位、个人制定培训方案，实现精准化培训管理。</p>
 
+                    </div>
 
+                    
+                    <div class="feature-card">
 
+                        <div class="icon">📊</div>
 
+                        <h3>数据分析</h3>
 
+                        <p>提供培训数据统计分析，包括学习完成率、考核通过率、培训效果评估等，为培训决策提供数据支持。</p>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+            <div class="section">
 
+                <h2>系统优势</h2>
 
+                <p>
 
+                    • <strong>内容丰富</strong>：支持多种学习资源格式，满足不同岗位和层级的培训需求<br>
 
+                    • <strong>灵活学习</strong>：支持移动端学习，员工可随时随地参与培训，提高学习便利性<br>
 
+                    • <strong>个性化推荐</strong>：根据员工岗位和技能水平，智能推荐相关课程，提升学习效率<br>
 
+                    • <strong>互动性强</strong>：支持在线讨论、问答、直播互动等功能，增强学习体验<br>
 
+                    • <strong>效果可测</strong>：完善的考核评估体系，量化培训效果，确保培训质量
 
+                </p>
 
+            </div>
 
+
 
+            <a href="javascript:history.back()" class="back-button">← 返回导航</a>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>
 
+

BIN
logo.png
View File


BIN
public/logo.png
View File


+ 3 - 0
server.js
View File 

@@ -27,6 +27,9 @@ app.use(express.json());
 
 app.use(express.urlencoded({ extended: true }));
 
 app.use(express.urlencoded({ extended: true }));
 
 app.use(cookieParser());
 
 app.use(cookieParser());
 
 
 
+// 静态文件服务 - 提供 example_page 文件夹访问
 
+app.use('/example_page', express.static(join(__dirname, 'example_page')));
 
+
 
 // 请求日志中间件（用于调试）
 
 // 请求日志中间件（用于调试）
 
 app.use((req, res, next) => {
 
 app.use((req, res, next) => {
 
   console.log(`[请求] ${req.method} ${req.path} - ${new Date().toISOString()}`);
 
   console.log(`[请求] ${req.method} ${req.path} - ${new Date().toISOString()}`);

+ 22 - 33
src/components/NavigationTV.vue
View File 

@@ -25,13 +25,12 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
 
 
-    <!-- 底部导航栏 -->
 
+    <!-- 顶部导航栏 -->
 
     <div class="bottom-nav-bar">
 
     <div class="bottom-nav-bar">
 
       <div class="nav-title">
 
       <div class="nav-title">
 
-        <div class="logo-circle"></div>
 
+        <img src="/logo.png" alt="Logo" class="logo-image" />
 
         <div class="title-group">
 
         <div class="title-group">
 
-          <h1 class="title">韫珠科技</h1>
 
-          <p class="subtitle">内部导航系统</p>
 
+          <h1 class="title">湖南韫珠环保科技有限公司</h1>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
       <div class="nav-tabs">
 
       <div class="nav-tabs">
 
@@ -246,7 +245,7 @@ onMounted(() => {
 
 
 
 .apps-grid {
 
 .apps-grid {
 
   flex: 1;
 
   flex: 1;
 
-  padding: 60px 40px 120px;
 
+  padding: 120px 40px 60px;
 
   display: grid;
 
   display: grid;
 
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 
   gap: 20px;
 
   gap: 20px;
 
@@ -256,19 +255,19 @@ onMounted(() => {
 
 
 
 .bottom-nav-bar {
 
 .bottom-nav-bar {
 
   position: fixed;
 
   position: fixed;
 
-  bottom: 0;
 
+  top: 0;
 
   left: 0;
 
   left: 0;
 
   right: 0;
 
   right: 0;
 
   background: rgba(26, 31, 53, 0.95);
 
   background: rgba(26, 31, 53, 0.95);
 
   backdrop-filter: blur(20px);
 
   backdrop-filter: blur(20px);
 
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
 
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
   padding: 20px 40px;
 
   padding: 20px 40px;
 
   display: flex;
 
   display: flex;
 
   justify-content: space-between;
 
   justify-content: space-between;
 
   align-items: center;
 
   align-items: center;
 
   gap: 30px;
 
   gap: 30px;
 
   z-index: 100;
 
   z-index: 100;
 
-  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
 
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 
 }
 
 }
 
 
 
 .nav-title {
 
 .nav-title {
 
@@ -278,37 +277,30 @@ onMounted(() => {
 
   flex-shrink: 0;
 
   flex-shrink: 0;
 
 }
 
 }
 
 
 
-.logo-circle {
 
+.logo-image {
 
   width: 60px;
 
   width: 60px;
 
   height: 60px;
 
   height: 60px;
 
-  border-radius: 50%;
 
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
 
-  backdrop-filter: blur(10px);
 
-  border: 2px solid rgba(255, 255, 255, 0.5);
 
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 
+  object-fit: contain;
 
+  flex-shrink: 0;
 
+  background: rgba(255, 255, 255, 0.95);
 
+  padding: 8px;
 
+  border-radius: 8px;
 
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 
 }
 
 }
 
 
 
 .title-group {
 
 .title-group {
 
   display: flex;
 
   display: flex;
 
   flex-direction: column;
 
   flex-direction: column;
 
-  gap: 4px;
 
 }
 
 }
 
 
 
 .title {
 
 .title {
 
-  font-size: 28px;
 
+  font-size: 24px;
 
   font-weight: 700;
 
   font-weight: 700;
 
   color: #ffffff;
 
   color: #ffffff;
 
   margin: 0;
 
   margin: 0;
 
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 
   letter-spacing: 1px;
 
   letter-spacing: 1px;
 
-}
 
-
 
-.subtitle {
 
-  font-size: 16px;
 
-  font-weight: 400;
 
-  color: rgba(255, 255, 255, 0.8);
 
-  margin: 0;
 
-  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
 
+  white-space: nowrap;
 
 }
 
 }
 
 
 
 .nav-tabs {
 
 .nav-tabs {
 
@@ -343,7 +335,7 @@ onMounted(() => {
 
 .nav-tab.active::after {
 
 .nav-tab.active::after {
 
   content: '';
 
   content: '';
 
   position: absolute;
 
   position: absolute;
 
-  bottom: -22px;
 
+  top: -22px;
 
   left: 0;
 
   left: 0;
 
   right: 0;
 
   right: 0;
 
   height: 3px;
 
   height: 3px;
 
@@ -450,7 +442,7 @@ onMounted(() => {
 
 /* 响应式设计 */
 
 /* 响应式设计 */
 
 @media (max-width: 768px) {
 
 @media (max-width: 768px) {
 
   .apps-grid {
 
   .apps-grid {
 
-    padding: 40px 20px 140px;
 
+    padding: 140px 20px 40px;
 
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 
     gap: 15px;
 
     gap: 15px;
 
   }
 
   }
 
@@ -480,7 +472,7 @@ onMounted(() => {
 
   }
 
   }
 
 
 
   .nav-tab.active::after {
 
   .nav-tab.active::after {
 
-    bottom: -15px;
 
+    top: -15px;
 
   }
 
   }
 
 
 
   .nav-info {
 
   .nav-info {
 
@@ -489,16 +481,13 @@ onMounted(() => {
 
   }
 
   }
 
 
 
   .title {
 
   .title {
 
-    font-size: 24px;
 
-  }
 
-
 
-  .subtitle {
 
-    font-size: 14px;
 
+    font-size: 20px;
 
   }
 
   }
 
 
 
-  .logo-circle {
 
+  .logo-image {
 
     width: 50px;
 
     width: 50px;
 
     height: 50px;
 
     height: 50px;
 
+    padding: 6px;
 
   }
 
   }
 
 
 
 }
 
 }

+ 14 - 14
src/data/navigation.json
View File 

@@ -2,7 +2,7 @@
 
   "style": "tv",
 
   "style": "tv",
 
   "groups": [
 
   "groups": [
 
     {
 
     {
 
-      "name": "系统导航",
 
+      "name": "系统导航中心",
 
       "sort": 1,
 
       "sort": 1,
 
       "icon": "",
 
       "icon": "",
 
       "description": "企业管理系统",
 
       "description": "企业管理系统",
 
@@ -12,7 +12,7 @@
 
           "url": "222.243.138.146:9001",
 
           "url": "222.243.138.146:9001",
 
           "sort": 8,
 
           "sort": 8,
 
           "icon": "",
 
           "icon": "",
 
-          "background": "",
 
+          "background": "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=800&h=600&fit=crop",
 
           "description": "人脸识别、安全帽识别、抽烟识别、烟火检测",
 
           "description": "人脸识别、安全帽识别、抽烟识别、烟火检测",
 
           "autoLogin": true,
 
           "autoLogin": true,
 
           "autoLoginEndpoint": "/api/auto-login/video-analysis"
 
           "autoLoginEndpoint": "/api/auto-login/video-analysis"
 
@@ -22,7 +22,7 @@
 
           "url": "222.243.138.146:8123",
 
           "url": "222.243.138.146:8123",
 
           "sort": 9,
 
           "sort": 9,
 
           "icon": "",
 
           "icon": "",
 
-          "background": "",
 
+          "background": "https://images.unsplash.com/photo-1518770660439-4636190af475?w=800&h=600&fit=crop",
 
           "description": "智能自动化平台"
 
           "description": "智能自动化平台"
 
         },
 
         },
 
         {
 
         {
 
@@ -30,7 +30,7 @@
 
           "url": "https://api.hnyunzhu.com:2443/ynet/",
 
           "url": "https://api.hnyunzhu.com:2443/ynet/",
 
           "sort": 3,
 
           "sort": 3,
 
           "icon": "",
 
           "icon": "",
 
-          "background": "",
 
+          "background": "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=800&h=600&fit=crop",
 
           "description": "企业OA办公系统"
 
           "description": "企业OA办公系统"
 
         },
 
         },
 
         {
 
         {
 
@@ -38,7 +38,7 @@
 
           "url": "http://222.243.138.146:8157/",
 
           "url": "http://222.243.138.146:8157/",
 
           "sort": 4,
 
           "sort": 4,
 
           "icon": "",
 
           "icon": "",
 
-          "background": "https://images.unsplash.com/photo-1532619675605-1d6c53d25d81?w=800&h=600&fit=crop",
 
+          "background": "https://images.unsplash.com/photo-1582719471384-894fbb16e074?w=800&h=600&fit=crop",
 
           "description": "实验室设备与实验管理"
 
           "description": "实验室设备与实验管理"
 
         },
 
         },
 
         {
 
         {
 
@@ -54,7 +54,7 @@
 
           "url": "http://222.243.138.146:811/#/chart/preview/1813458926651408386",
 
           "url": "http://222.243.138.146:811/#/chart/preview/1813458926651408386",
 
           "sort": 6,
 
           "sort": 6,
 
           "icon": "",
 
           "icon": "",
 
-          "background": "",
 
+          "background": "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
 
           "description": "MES数据大屏"
 
           "description": "MES数据大屏"
 
         },
 
         },
 
         {
 
         {
 
@@ -62,7 +62,7 @@
 
           "url": "http://222.243.138.146:30081/",
 
           "url": "http://222.243.138.146:30081/",
 
           "sort": 7,
 
           "sort": 7,
 
           "icon": "",
 
           "icon": "",
 
-          "background": "",
 
+          "background": "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop",
 
           "description": "DCS后台管理系统"
 
           "description": "DCS后台管理系统"
 
         },
 
         },
 
         {
 
         {
 
@@ -70,7 +70,7 @@
 
           "url": "http://222.243.138.146:8154/",
 
           "url": "http://222.243.138.146:8154/",
 
           "sort": 1,
 
           "sort": 1,
 
           "icon": "",
 
           "icon": "",
 
-          "background": "",
 
+          "background": "https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&h=600&fit=crop",
 
           "description": "智汇工作台"
 
           "description": "智汇工作台"
 
         },
 
         },
 
         {
 
         {
 
@@ -78,7 +78,7 @@
 
           "url": "http://222.243.138.146:8150/",
 
           "url": "http://222.243.138.146:8150/",
 
           "sort": 2,
 
           "sort": 2,
 
           "icon": "",
 
           "icon": "",
 
-          "background": "",
 
+          "background": "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&h=600&fit=crop",
 
           "description": "EMCS协同制造系统"
 
           "description": "EMCS协同制造系统"
 
         },
 
         },
 
         {
 
         {
 
@@ -86,12 +86,12 @@
 
           "url": "http://222.243.138.146:2888/",
 
           "url": "http://222.243.138.146:2888/",
 
           "sort": 10,
 
           "sort": 10,
 
           "icon": "",
 
           "icon": "",
 
-          "background": "",
 
+          "background": "https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=800&h=600&fit=crop",
 
           "description": "机修业管理信息系统"
 
           "description": "机修业管理信息系统"
 
         },
 
         },
 
         {
 
         {
 
           "name": "人力资源管理系统",
 
           "name": "人力资源管理系统",
 
-          "url": "https://hr.example.com",
 
+          "url": "http://localhost:8889/example_page/hr.html",
 
           "sort": 11,
 
           "sort": 11,
 
           "icon": "",
 
           "icon": "",
 
           "background": "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=800&h=600&fit=crop",
 
           "background": "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=800&h=600&fit=crop",
 
@@ -99,7 +99,7 @@
 
         },
 
         },
 
         {
 
         {
 
           "name": "工资发放系统",
 
           "name": "工资发放系统",
 
-          "url": "https://salary.example.com",
 
+          "url": "http://localhost:8889/example_page/salary.html",
 
           "sort": 12,
 
           "sort": 12,
 
           "icon": "",
 
           "icon": "",
 
           "background": "https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=800&h=600&fit=crop",
 
           "background": "https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=800&h=600&fit=crop",
 
@@ -107,7 +107,7 @@
 
         },
 
         },
 
         {
 
         {
 
           "name": "公司培训系统",
 
           "name": "公司培训系统",
 
-          "url": "https://training.example.com",
 
+          "url": "http://localhost:8889/example_page/training.html",
 
           "sort": 13,
 
           "sort": 13,
 
           "icon": "",
 
           "icon": "",
 
           "background": "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&h=600&fit=crop",
 
           "background": "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&h=600&fit=crop",
 
@@ -115,7 +115,7 @@
 
         },
 
         },
 
         {
 
         {
 
           "name": "园区管理平台",
 
           "name": "园区管理平台",
 
-          "url": "https://park.example.com",
 
+          "url": "http://localhost:8889/example_page/park.html",
 
           "sort": 14,
 
           "sort": 14,
 
           "icon": "",
 
           "icon": "",
 
           "background": "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&h=600&fit=crop",
 
           "background": "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&h=600&fit=crop",