增加列表分组

electron/main.ts

@@ -105,7 +105,7 @@ function createWindow() {
   });
   childView.webContents.on('did-fail-load', (_, errorCode, errorDescription) => {
     loadingView.hide()
-    loadWindowPage(loadingView, '/error?code=' + errorCode + '&message=' + errorDescription);
+    loadViewUrl(childView!, '/error?code=' + errorCode + '&message=' + errorDescription);
   });
 
   function updateChildWindowBounds() {

package.json

@@ -1,8 +1,10 @@
 {
   "name": "minnan-demo-app",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.1",
   "type": "module",
+  "author": "厦门博合文化科技有限公司",
+  "description": "厦门博合文化科技有限公司内部的项目演示",
   "scripts": {
     "dev": "vite",
     "typecheck": "vue-tsc",

public/apps.json

@@ -1,31 +1,39 @@
-[
-  {
-    "id": 1,
-    "title": "闽南文化驾驶舱",
-    "keepScreenSize": true,
-    "aspectRatio": "16/9",
-    "openType": "iframe",
-    "url": "https://mn.wenlvti.net/test/#/",
-    "inputPassword": {
-      "username": "admin",
-      "password": "bh2643"
+{ 
+  "闽南文化": [
+    {
+      "id": 1,
+      "title": "闽南文化驾驶舱",
+      "keepScreenSize": true,
+      "aspectRatio": "16/9",
+      "openType": "iframe",
+      "url": "https://mn.wenlvti.net/test/#/",
+      "inputPassword": {
+        "username": "admin",
+        "password": "bh2643"
+      }
+    },
+    {
+      "id": 2,
+      "title": "闽南文化官网",
+      "openType": "iframe",
+      "url": "https://minnan.wenlvti.net/"
     }
-  },
-  {
-    "id": 2,
-    "title": "闽南文化官网",
-    "openType": "iframe",
-    "url": "https://minnan.wenlvti.net/"
-  },
-  {
-    "id": 3,
-    "title": "文保中心官网",
-    "openType": "iframe",
-    "url": "https://xmswhycbhzx.cn/"
-  },
-  {
-    "id": 4,
-    "title": "文物管家后台",
-    "url": "https://wwgj.wenlvti.net/hTurbPWtgS.php"
-  }
-]
+  ],
+  "文物管家": [
+    {
+      "id": 4,
+      "title": "文物管家后台",
+      "url": "https://wwgj.wenlvti.net/hTurbPWtgS.php",
+      "inputPassword": {
+        "username": "admin",
+        "password": "bh2643"
+      }
+    },
+    {
+      "id": 3,
+      "title": "文保中心官网",
+      "openType": "iframe",
+      "url": "https://www.xmswhycbhzx.cn/"
+    }
+  ]
+}

src/components/AppList.vue

@@ -19,6 +19,12 @@ import { ScrollRect } from '@imengyu/vue-scroll-rect';
     padding: 10px;
   }
 
+  h5 {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
   .app-item {
     padding: 12px 15px;
     margin-bottom: 8px;

src/config/version.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0",
-  "versionCode": 15,
-  "buildDate": "2026-01-21"
+  "version": "1.0.2",
+  "versionCode": 17,
+  "buildDate": "2026-05-13"
 }

src/views/Config.vue

@@ -26,7 +26,7 @@
     >
       <ScrollRect scroll="vertical" :height="260" containerClass="help-content">
         <div class="help-section">
-          <p class="help-text">配置文件使用JSON格式，包含一个应用数组。每个应用对象支持以下字段：</p>
+          <p class="help-text">配置文件使用JSON格式，包含一个对象，对象每个键是分组名称，值是应用数组。每个应用对象支持以下字段：</p>
         </div>    
         <div class="help-section">
           <h4 class="help-field-title">必填字段</h4>
@@ -76,29 +76,31 @@ const MONACO_EDITOR_OPTIONS = {
 }
 const showHelp = ref(false)
 
-const configExample = ref(`[
-  {
-    "id": 1,
-    "title": "Google",
-    "url": "https://www.google.com"
-  },
-  {
-    "id": 2,
-    "title": "百度",
-    "url": "https://www.baidu.com",
-    "keepScreenSize": true,
-    "aspectRatio": "16/9"
-  },
-  {
-    "id": 3,
-    "title": "GitHub",
-    "url": "https://github.com",
-    "inputPassword": {
-      "username": "admin",
-      "password": "123456"
+const configExample = ref(`{
+  "分组1": [
+    {
+      "id": 1,
+      "title": "Google",
+      "url": "https://www.google.com"
+    },
+    {
+      "id": 2,
+      "title": "百度",
+      "url": "https://www.baidu.com",
+      "keepScreenSize": true,
+      "aspectRatio": "16/9"
+    },
+    {
+      "id": 3,
+      "title": "GitHub",
+      "url": "https://github.com",
+      "inputPassword": {
+        "username": "admin",
+        "password": "123456"
+      }
     }
-  }
-]`)
+  ]
+}`)
 
 onMounted(() => {
   window.electronAPI.loadAppsJson().then((data) => {

src/views/Error.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="error-container">
     <img src="../assets/failed.svg" alt="Failed" />
-    <p>当前页面无法正常加载</p>
+    <p>当前页面无法正常加载，请检查网络连接或再点击一次重新加载页面</p>
     <p>{{ message }}</p>
   </div>
 </template>

src/views/Main.vue

@@ -8,7 +8,7 @@ import AppList from '../components/AppList.vue'
 import AppListItem from '../components/AppListItem.vue'
 
 // 状态管理
-const apps = ref<AppItem[]>([])
+const apps = ref<Record<string, AppItem[]>>({})
 const selectedApp = ref<AppItem | null>(null)
 const isFullScreen = ref(false)
 const isLoading = ref(false)
@@ -26,7 +26,13 @@ function toggleLeftPanel() {
 async function loadApps() {
   try {
     const data = await window.electronAPI.loadAppsJson()
-    apps.value = data
+    if (Array.isArray(data)) {
+      apps.value = {
+        "未分组": data as AppItem[]
+      };
+    } else {
+      apps.value = data
+    }
   } catch (error) {
     console.error('Failed to load apps:', error)
   }
@@ -148,13 +154,16 @@ onMounted(() => {
         </button>
       </h2>
       <AppList>
-        <AppListItem 
-          v-for="app in apps" 
-          :key="app.id"
-          :app="app"
-          :activeAppId="selectedApp?.id"
-          @selectApp="selectApp(app)"
-        />
+        <div v-for="(group, title) in apps" :key="title">
+          <h5>{{ title }}</h5>
+          <AppListItem 
+            v-for="app in group" 
+            :key="app.id"
+            :app="app"
+            :activeAppId="selectedApp?.id"
+            @selectApp="selectApp(app)"
+          />
+        </div>
       </AppList>
       <!-- 底部控制按钮 -->
       <div class="bottom-panel">