更新v1.1.0

Squashed commit of the following: commit 4443f7c8251b31687ed93114930ab3d769f4ed6c Author: Sun <95302870@qq.com> Date: Tue Nov 28 22:10:49 2023 +0800 美化关于页 commit 95ca46d460eba469ca8ae54f65c7773835061c0f Author: Sun <95302870@qq.com> Date: Tue Nov 28 21:59:48 2023 +0800 更新版本号，更新说明文件增加新版预览截图 commit 052e5f81fe4065e10199d52bc041329fc9c5fe86 Author: Sun <95302870@qq.com> Date: Tue Nov 28 21:06:52 2023 +0800 修复后端mkdirAll权限的问题 commit ace57d5ba69c311e40997d5791cf03a8b28e0c07 Author: Sun <95302870@qq.com> Date: Tue Nov 28 20:59:35 2023 +0800 修改配置文件 commit 099015f2767cedfd6eae91e60131817471eb1f24 Author: Sun <95302870@qq.com> Date: Tue Nov 28 14:10:39 2023 +0800 增加docker-compose文件 commit e229003431ff2476f0ab63a8dffb88504716ba48 Author: Sun <95302870@qq.com> Date: Tue Nov 28 13:53:20 2023 +0800 提交更新日志文件 commit e8736b8b62db6d590c063b42757599381429541e Author: Sun <95302870@qq.com> Date: Tue Nov 28 13:49:38 2023 +0800 增加隐藏小图标 commit 038af3aaa91a023cc10aabff5b0cfd15c64d0b46 Author: Sun <95302870@qq.com> Date: Tue Nov 28 13:49:04 2023 +0800 优化密码限制 commit 4cd15a383923bf3de56e9e4dc6df3bf97236ed18 Author: Sun <95302870@qq.com> Date: Tue Nov 28 12:34:59 2023 +0800 增加反馈入口 commit daf6aea902893f816dca5c0bb09326f2f110ddcc Merge: 3edfadd b057e25 Author: Sun <95302870@qq.com> Date: Mon Nov 27 22:19:59 2023 +0800 Merge branch 'master' into dev commit 3edfaddd173efcbbde867dc9ce9b022920b39061 Author: Sun <95302870@qq.com> Date: Mon Nov 27 22:17:08 2023 +0800 修改docker的编译镜像和运行镜像为alpine，兼容极空间设备 commit 3445f97152c2f6b9f1f9f68b46e4b84f8240c9c2 Author: Sun <95302870@qq.com> Date: Mon Nov 27 13:58:59 2023 +0800 修复前端编译错误 commit 3ef02013ffb595e7805692350389bb623155cfe9 Author: Sun <95302870@qq.com> Date: Mon Nov 27 13:56:12 2023 +0800 更新beta版本号 commit 620f0f1e1523f34e87001e8a2bbe3d4a01cb0b9b Author: Sun <95302870@qq.com> Date: Mon Nov 27 13:53:46 2023 +0800 修复添加图标成功后遗留旧数据的问题 commit 55d877d1ca11e83d9f7325a321aeb5b65ad4ee8b Author: Sun <95302870@qq.com> Date: Mon Nov 27 13:41:55 2023 +0800 增加置顶按钮 commit f28dd63328aeca5d8c3c036c5786304f8a33b1f9 Author: Sun <95302870@qq.com> Date: Mon Nov 27 12:56:14 2023 +0800 优化roundmodal的样式和手机端设置样式 commit c19ce176878ea2ef06b0a5dc75bd6d8239892302 Author: Sun <95302870@qq.com> Date: Mon Nov 27 11:06:44 2023 +0800 优化手机端logo文字显示问题 commit 018dabb2faddc0541fb33ef5a51a126575a59cf5 Author: Sun <95302870@qq.com> Date: Mon Nov 27 10:51:02 2023 +0800 更新说明文件 commit 02239e3686933e4c33e430be8300ec2d0be41887 Author: Sun <95302870@qq.com> Date: Sun Nov 26 22:59:11 2023 +0800 优化登录页面 commit 6aa92e8ba6c4eeb2fa2995ee93aeeac86b54b551 Author: Sun <95302870@qq.com> Date: Sat Nov 25 23:59:40 2023 +0800 增加编译脚本 commit d93df810fa95a7baa28ca5323903b93f286ba741 Author: Sun <95302870@qq.com> Date: Sat Nov 25 15:48:00 2023 +0800 修改相关logo图片 commit 036a56ddc7a555d6227c92dfa2abfe84f9042662 Merge: 7018872 feacc89 Author: Sun <95302870@qq.com> Date: Fri Nov 24 16:00:23 2023 +0800 Merge branch 'master' into dev commit 7018872ce9fd0fa8f1ff4731a16b2ea90fb9153f Author: Sun <95302870@qq.com> Date: Fri Nov 24 15:31:31 2023 +0800 更新版本标签 commit 4fae97dd932ce4638d869a0c7a123c788c3e3e43 Author: Sun <95302870@qq.com> Date: Fri Nov 24 15:07:39 2023 +0800 更新版本1.1.0 测试版 commit 890a3c3dbdccbe4dfd5a6915e87a2649c9141e7b Author: Sun <95302870@qq.com> Date: Fri Nov 24 14:31:26 2023 +0800 右键菜单新增打开局域网或者互联网地址，优化分组管理图标不统一的问题 commit 4f014cf4aa384a2c8a03585ffd6ce41c941b9356 Author: Sun <95302870@qq.com> Date: Fri Nov 24 13:33:43 2023 +0800 增加关联删除，优化添加密码长度限制20 commit 5658e6c379b077d359fff75c5e9b904cbce5f81e Author: Sun <95302870@qq.com> Date: Fri Nov 24 12:09:41 2023 +0800 增加更新日志 commit f142d1b378e0525db157a93cca61ee86bf1eb08d Author: Sun <95302870@qq.com> Date: Fri Nov 24 12:09:30 2023 +0800 添加应用图标验证分组信息必填 commit 2ff2b6b32a4bb70653e3a7312ccb0f4b0b945f07 Author: Sun <95302870@qq.com> Date: Thu Nov 23 23:45:10 2023 +0800 优化关于页面，及更新版本序号为2 commit c9b482b24e2d23d638501dbaa44f826386c420b5 Author: Sun <95302870@qq.com> Date: Thu Nov 23 22:12:13 2023 +0800 优化关于设置版本号 commit ed70059ffbce1ae8a9e2e0378803f7875ada342b Author: Sun <95302870@qq.com> Date: Thu Nov 23 21:41:22 2023 +0800 修复分组管理不能滚动的问题 commit faa4222b1494271878c2c7469c14a4efa49c6761 Author: Sun <95302870@qq.com> Date: Thu Nov 23 21:24:34 2023 +0800 修复分组写死的问题 commit 4f2d0c858e55735b9ba3a8453de9407b76346805 Author: Sun <95302870@qq.com> Date: Thu Nov 23 20:24:39 2023 +0800 初步尝试构建测试版本 commit 596bed19dcf3bceb77e30f9c24218888f8da7e64 Author: Sun <95302870@qq.com> Date: Thu Nov 23 19:24:05 2023 +0800 修复搜索框配置bug，云端没有默认值，前端打不开搜索引擎选择栏 commit 489fbf748a7e35c6b69198b19038c01a548e20f2 Author: Sun <95302870@qq.com> Date: Thu Nov 23 19:22:57 2023 +0800 增加logo和版本打印，修复模块配置的索引报错 commit 263dab607af8a830acee44e37776bda4da814b40 Author: Sun <95302870@qq.com> Date: Wed Nov 22 23:02:37 2023 +0800 调整排序样式 commit c0adf335d3e48e6770d56eb506b471852fbfbc43 Author: Sun <95302870@qq.com> Date: Wed Nov 22 22:58:18 2023 +0800 说明文件增加logo commit 721d22e75b93d3646f5f206d208a9a743840a25b Author: Sun <95302870@qq.com> Date: Wed Nov 22 22:40:40 2023 +0800 更换logo commit 4df58fec7b2054ce97cf2989045affd144aa4f8b Author: Sun <95302870@qq.com> Date: Wed Nov 22 22:38:27 2023 +0800 完善关于页面 commit 63777f0bbac85550fafe1b084bd664c7722ab934 Author: Sun <95302870@qq.com> Date: Wed Nov 22 21:12:14 2023 +0800 字体为纯白色的时候，详情图标会根据背景的明暗度计算字体颜色 commit f328dc73305665a921e030dd4a06d759d0cac3bf Author: Sun <95302870@qq.com> Date: Wed Nov 22 17:21:40 2023 +0800 详情图标居中 commit 663f37bf1a26b7dff24edcfb149222ac780cb90d Author: Sun <95302870@qq.com> Date: Wed Nov 22 16:45:11 2023 +0800 将图标单独拆分为子组件应用图标 commit 30cd5ab460e032f7f6d7c23eb7a9c7af735d0f41 Author: Sun <95302870@qq.com> Date: Wed Nov 22 13:36:32 2023 +0800 增加详情图标隐藏描述信息等设置 commit 945a94e76cae4251953512cc09f348ad38bb9a38 Author: Sun <95302870@qq.com> Date: Wed Nov 22 12:28:46 2023 +0800 优化图标背景色：支持透明图标并更换背景颜色字段 commit 437053fc9d8d9e3c55aac4d259e4b4c4bc11de58 Author: Sun <95302870@qq.com> Date: Wed Nov 22 11:20:56 2023 +0800 完善搜索框 commit a9914f8e8ced23b8c50701a85d522c8f0fcd1c2b Author: Sun <95302870@qq.com> Date: Wed Nov 22 01:27:16 2023 +0800 关闭模块配置相关接口开发模式 commit 2a9e22d4b781f43c0f9b8a867d26c295e756175b Author: Sun <95302870@qq.com> Date: Wed Nov 22 01:24:09 2023 +0800 完成搜索框的样式和模块配置的state等api对接 commit 7f771650ef7272e474f74ed689ab844bf90b946f Author: Sun <95302870@qq.com> Date: Wed Nov 22 00:45:25 2023 +0800 增加搜索引擎图标 commit a0e0039ae89eaa27e4b849baa0168716866682ea Author: Sun <95302870@qq.com> Date: Tue Nov 21 19:54:36 2023 +0800 增加模块配置表 commit 017869794177d7a5d4c12c0eac6fb7c7fe79734e Author: Sun <95302870@qq.com> Date: Tue Nov 21 13:10:39 2023 +0800 图标标题加粗 commit 7a2d896a44262b54d6a1d2d12fe6bbbc31b1ca49 Author: Sun <95302870@qq.com> Date: Tue Nov 21 12:53:39 2023 +0800 增加图标的预设颜色 commit a6c3120c186646b323e57ecce0f85ec9c79a41a5 Author: Sun <95302870@qq.com> Date: Tue Nov 21 12:18:46 2023 +0800 增加遮罩 commit 84d3db81ea2aaa0f67a67690e449d15401e8e511 Author: Sun <95302870@qq.com> Date: Tue Nov 21 11:05:24 2023 +0800 极简小图标增加鼠标悬浮详情 commit 666a6a117bc30c64a78ab0fe2cb7836c602b2741 Author: Sun <95302870@qq.com> Date: Mon Nov 20 23:33:10 2023 +0800 修复 sort字段未修改归0的问题 commit 71afd530d7a740763326a6117f8e7c04ac1f7f69 Author: Sun <95302870@qq.com> Date: Mon Nov 20 23:32:48 2023 +0800 适配纯透明图标，增强图标背景色，增加图标url连接支持 commit 619c5e28e1c51c16e14ed09601709ab751ee2454 Author: Sun <95302870@qq.com> Date: Mon Nov 20 22:37:43 2023 +0800 修复每次修改图标都重置了排序号 commit 8a17f1c0bf2f00c530dee61cd5070a74ca4a53b2 Author: Sun <95302870@qq.com> Date: Mon Nov 20 21:21:20 2023 +0800 分组为空的时候显示添加图标的图标 commit 755cf3dc569e402cb3dfc9915e94de4f2595571b Author: Sun <95302870@qq.com> Date: Mon Nov 20 20:52:45 2023 +0800 首页图标排序完成 commit 5ccf23c68b3284be00dadf94073a665826737a77 Author: Sun <95302870@qq.com> Date: Mon Nov 20 14:30:12 2023 +0800 添加修改图标适配分组 commit 47209d729270bf4704428ecd91606d4721bd9a13 Author: Sun <95302870@qq.com> Date: Mon Nov 20 11:06:32 2023 +0800 保存分组和分组排序已经完成 commit 17403de7ed236a097d70cd5ecbbe261e620ff377 Merge: d0d88eb 980d81a Author: Sun <95302870@qq.com> Date: Sun Nov 19 23:38:00 2023 +0800 Merge branch 'master' into dev commit d0d88eb548bbe9d7f5ad663f383db858843a8d8c Merge: 728dbc8 47b479c Author: Sun <95302870@qq.com> Date: Sun Nov 19 11:13:34 2023 +0800 Merge branch 'docker-build' into dev commit 47b479cf8da7214dd9e0592b461743ab7d3824ed Author: Sun <95302870@qq.com> Date: Sun Nov 19 11:12:54 2023 +0800 修改前端程序名 commit 728dbc80ff7885d0b4cf289b06763cc60ed17d7e Author: Sun <95302870@qq.com> Date: Thu Nov 16 13:44:47 2023 +0800 新增删除应用分组和修改应用分组，以及图标真正的按组读取 commit a3dbd948ca743384a2de3685083695603d674bf1 Author: Sun <95302870@qq.com> Date: Wed Nov 15 22:49:58 2023 +0800 增加图标组api commit de21f3f232c1243917b5c55ba4bedb01437f8564 Author: Sun <95302870@qq.com> Date: Wed Nov 15 22:49:44 2023 +0800 重新划分应用盒子的结构 commit 7c409112ba1f8eefb7df7fffdb78b285e3f5322c Author: Sun <95302870@qq.com> Date: Wed Nov 15 22:27:07 2023 +0800 [后端] 增加应用分组 commit ebf9500529c7db30b1c6e1ed4056013d0f83827a Merge: acedcb3 97d4f83 Author: Sun <95302870@qq.com> Date: Wed Nov 15 20:38:05 2023 +0800 Merge branch 'feature/drag' into dev commit acedcb32a03ed0ee1833143912a9215182da3fb6 Merge: f105e10 c84eae3 Author: Sun <95302870@qq.com> Date: Wed Nov 15 20:37:26 2023 +0800 Merge branch 'master' into dev commit 97d4f8368dffca2a16d729e666068a552feca87d Author: Sun <95302870@qq.com> Date: Wed Nov 15 20:36:19 2023 +0800 更新软件包 commit 5108f65275181b899b8fc100c615cb6065dcca5d Author: Sun <95302870@qq.com> Date: Wed Nov 15 20:30:39 2023 +0800 简单监听了一下拖拽 commit dae9aea41f1540ccb74abea2a31af5d2a1e4dcfd Merge: 396db51 f672034 Author: Sun <95302870@qq.com> Date: Wed Nov 15 10:01:00 2023 +0800 Merge branch 'master' into feature/drag commit 396db51979d513559512b0a9702dd0d616c2872b Author: Sun <95302870@qq.com> Date: Wed Nov 15 00:08:02 2023 +0800 历史性时刻，拖拽图标 commit f105e10fe1ced11d0b32eba37cfbfdb94f6ad07b Author: Sun <95302870@qq.com> Date: Tue Nov 14 11:35:52 2023 +0800 尝试增加一个分组标题 commit 7e2354f4ed509c7d05667604b7eb56e91f911ed0 Author: Sun <95302870@qq.com> Date: Sun Nov 12 23:07:37 2023 +0800 优化枚举引用错误 commit 27e85b7da339706ea97604a785bf013dad5f9534 Author: Sun <95302870@qq.com> Date: Sun Nov 12 23:06:50 2023 +0800 优化路由 commit fef462804c0d445f5b9bc7e38e226b55c26017ee Author: Sun <95302870@qq.com> Date: Sun Nov 12 21:28:57 2023 +0800 更换enums的位置
2023-11-29 10:23:57 +08:00
parent b057e25443
commit 9cf463b04c
83 changed files with 2089 additions and 580 deletions
@@ -1,20 +1,36 @@
 <script setup lang="ts">
-import { NButton, NButtonGroup, NDropdown, NEllipsis, NGrid, NGridItem, NModal, NSkeleton, NSpin, useDialog, useMessage } from 'naive-ui'
-import { nextTick, onMounted, ref } from 'vue'
-import { EditItem, Setting } from './components'
-import { Clock } from '@/components/deskModule'
-import { ItemIcon, SvgIcon } from '@/components/common'
-import { deletes, getListByGroupId } from '@/api/panel/itemIcon'
+import { VueDraggable } from 'vue-draggable-plus'
+import { NBackTop, NButton, NButtonGroup, NDropdown, NModal, NSkeleton, NSpin, useDialog, useMessage } from 'naive-ui'
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { AppIcon, EditItem, Setting } from './components'
+import { Clock, SearchBox } from '@/components/deskModule'
+import { SvgIcon } from '@/components/common'
+import { deletes, getListByGroupId, saveSort } from '@/api/panel/itemIcon'
+import { getList as getGroupList } from '@/api/panel/itemIconGroup'
+
 import { getInfo } from '@/api/system/user'
 import { usePanelState, useUserStore } from '@/store'
-import { PanelStateNetworkModeEnum } from '@/enum'
+import { PanelPanelConfigStyleEnum, PanelStateNetworkModeEnum } from '@/enums'
 import { setTitle } from '@/utils/cmn'

+interface StateDragAppSort {
+  status: boolean
+}
+interface ItemGroup extends Panel.ItemIconGroup {
+  items?: Panel.ItemInfo[]
+}
+
+const stateDragAppSort = ref<StateDragAppSort>({
+  status: false,
+})
+
 const ms = useMessage()
 const dialog = useDialog()
 const panelState = usePanelState()
 const userStore = useUserStore()

+const scrollContainerRef = ref<HTMLElement | undefined>(undefined)
+
 const editItemInfoShow = ref<boolean>(false)
 const editItemInfoData = ref<Panel.ItemInfo | null>(null)
 const windowShow = ref<boolean>(false)
@@ -31,27 +47,33 @@ const currentRightSelectItem = ref<Panel.ItemInfo | null>(null)

 const settingModalShow = ref(false)

-const dropdownMenuOptions = [
-  {
-    label: '新窗口打开',
-    key: 'newWindows',
-  },
-  {
-    label: '编辑',
-    key: 'edit',
-  },
-  {
-    label: '删除',
-    key: 'delete',
-  },
-]
-const items = ref<Panel.ItemInfo[]>()
+const items = ref<ItemGroup[]>([])

 function handleAddAppClick() {
  editItemInfoData.value = null
  editItemInfoShow.value = true
 }

+function openPage(openMethod: number, url: string, title?: string) {
+  switch (openMethod) {
+    case 1:
+      window.location.href = url
+      break
+    case 2:
+      window.open(url)
+      break
+    case 3:
+      windowShow.value = true
+      windowSrc.value = url
+      windowTitle.value = title || url
+      windowIframeIsLoad.value = true
+      break
+
+    default:
+      break
+  }
+}
+
 function handleItemClick(item: Panel.ItemInfo) {
  let jumpUrl = ''

@@ -60,23 +82,7 @@ function handleItemClick(item: Panel.ItemInfo) {
  if (item.lanUrl === '')
    jumpUrl = item.url

-  switch (item.openMethod) {
-    case 1:
-      window.location.href = jumpUrl
-      break
-    case 2:
-      window.open(jumpUrl)
-      break
-    case 3:
-      windowShow.value = true
-      windowSrc.value = jumpUrl
-      windowTitle.value = item.title
-      windowIframeIsLoad.value = true
-      break
-
-    default:
-      break
-  }
+  openPage(item.openMethod, jumpUrl, item.title)
 }

 function handWindowIframeIdLoad(payload: Event) {
@@ -84,9 +90,18 @@ function handWindowIframeIdLoad(payload: Event) {
 }

 function getList() {
-  getListByGroupId<Common.ListResponse<Panel.ItemInfo[]>>().then((res) => {
-    if (res.code === 0)
-      items.value = res.data.list
+  // 获取组数据
+  getGroupList<Common.ListResponse<ItemGroup[]>>().then(({ code, data, msg }) => {
+    if (code === 0)
+      items.value = data.list
+    for (let i = 0; i < data.list.length; i++) {
+      const element = data.list[i]
+      getListByGroupId<Common.ListResponse<Panel.ItemInfo[]>>(element.id).then((res) => {
+        if (res.code === 0)
+          items.value[i].items = res.data.list
+      })
+    }
+    // console.log(items)
  })
 }

@@ -100,6 +115,14 @@ function handleSelect(key: string | number) {
    case 'newWindows':
      window.open(jumpUrl)
      break
+    case 'openWanUrl':
+      if (currentRightSelectItem.value)
+        openPage(currentRightSelectItem.value?.openMethod, currentRightSelectItem.value?.url, currentRightSelectItem.value?.title)
+      break
+    case 'openLanUrl':
+      if (currentRightSelectItem.value && currentRightSelectItem.value.lanUrl)
+        openPage(currentRightSelectItem.value?.openMethod, currentRightSelectItem.value.lanUrl, currentRightSelectItem.value?.title)
+      break
    case 'edit':
      // 这里有个奇怪的问题，如果不使用{...}的方式 父组件的值会同步修改 标记一下
      editItemInfoData.value = { ...currentRightSelectItem.value } as Panel.ItemInfo
@@ -153,12 +176,83 @@ function handleEditSuccess(item: Panel.ItemInfo) {
 function handleChangeNetwork(mode: PanelStateNetworkModeEnum) {
  panelState.setNetworkMode(mode)
  if (mode === PanelStateNetworkModeEnum.lan)
-    ms.success('已经切换成局域网模式，此时再点击已填写局域网地址的图标将跳转至局域网地址(此配置仅保存在本地)')
+    ms.success('已经切换成局域网模式(此配置仅保存在本地)')

  else
    ms.success('已经切换成互联网模式(此配置仅保存在本地)')
 }

+// 结束拖拽
+function handleEndDrag(event: any, itemIconGroup: Panel.ItemIconGroup) {
+  // console.log(event)
+  // console.log(items.value)
+}
+
+function handleSaveSort(itemGroup: ItemGroup) {
+  const saveItems: Common.SortItemRequest[] = []
+  if (itemGroup.items) {
+    for (let i = 0; i < itemGroup.items.length; i++) {
+      const element = itemGroup.items[i]
+      saveItems.push({
+        id: element.id as number,
+        sort: i + 1,
+      })
+    }
+
+    saveSort({ itemIconGroupId: itemGroup.id as number, sortItems: saveItems }).then(({ code, msg }) => {
+      if (code === 0) {
+        //
+        ms.success('保存成功')
+        // sortStatus.value = false
+      }
+      else {
+        ms.error(`保存失败:${msg}`)
+      }
+    })
+  }
+}
+
+function getDropdownMenuOptions() {
+  const dropdownMenuOptions = [
+    {
+      label: '新窗口打开',
+      key: 'newWindows',
+    },
+
+  ]
+
+  if (currentRightSelectItem.value?.lanUrl && panelState.networkMode === PanelStateNetworkModeEnum.wan) {
+    dropdownMenuOptions.push({
+      label: '打开局域网地址',
+      key: 'openLanUrl',
+    })
+  }
+
+  if (currentRightSelectItem.value?.lanUrl && panelState.networkMode === PanelStateNetworkModeEnum.lan) {
+    dropdownMenuOptions.push({
+      label: '打开互联网地址',
+      key: 'openWanUrl',
+    })
+  }
+
+  dropdownMenuOptions.push({
+    label: '编辑',
+    key: 'edit',
+  }, {
+    label: '删除',
+    key: 'delete',
+  })
+
+  return dropdownMenuOptions
+}
+
+watch(() => stateDragAppSort.value.status, (newvalue: boolean) => {
+  if (newvalue === false)
+    getList()
+  else
+    ms.warning('进入排序模式，记得点击保存再退出')
+})
+
 onMounted(() => {
  getList()

@@ -180,120 +274,137 @@ onMounted(() => {
 <template>
  <div class="w-full h-full sun-main ">
    <div
-      class="cover"
-      :style="{
+      class="cover" :style="{
        filter: `blur(${panelState.panelConfig.backgroundBlur}px)`,
        background: `url(${panelState.panelConfig.backgroundImageSrc}) no-repeat`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }"
    />
-    <div class="absolute w-full h-full overflow-auto">
+    <div class="mask" :style="{ backgroundColor: `rgba(0,0,0,${panelState.panelConfig.backgroundMaskNumber})` }" />
+    <div ref="scrollContainerRef" class="absolute w-full h-full overflow-auto">
      <div class="p-2.5 max-w-[1200px] mx-auto mt-[10%]">
        <!-- 头 -->
        <div class="mx-[auto] w-[80%]">
          <div class="flex mx-[auto] items-center justify-center text-white">
            <div>
-              <span class="text-5xl font-bold text-shadow">
+              <span class="text-2xl md:text-5xl font-bold text-shadow">
                {{ panelState.panelConfig.logoText }}
              </span>
            </div>
-            <div class="text-2xl mx-[10px]">
+            <div class="text-base lg:text-2xl mx-[10px]">
              |
            </div>
            <div class="text-shadow">
              <Clock :hide-second="!panelState.panelConfig.clockShowSecond" />
            </div>
          </div>
-        <!-- <div class="flex mt-[20px] mx-auto w-[80%]">
-          <SearchBox />
-        </div> -->
+          <div v-if="panelState.panelConfig.searchBoxShow" class="flex mt-[20px] mx-auto sm:w-full lg:w-[80%]">
+            <SearchBox />
+          </div>
        </div>

-        <!-- 图标 -->
+        <!-- 应用盒子 -->
        <div class="mt-[50px]">
-          <!-- 详情图标 -->
-          <div v-if="panelState.panelConfig.iconStyle === 0">
-            <NGrid :x-gap="15" :y-gap="15" item-responsive cols="1 200:1 400:2 600:3 800:4 1000:5 1200:6">
-              <NGridItem v-for="(item, index) in items" :key="index">
-                <div @contextmenu="(e) => handleContextMenu(e, item)">
-                  <div
-                    class="w-full rounded-2xl cursor-pointer transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] bg-[#2a2a2a6b] flex"
-                    @click="handleItemClick(item)"
-                  >
-                    <div class="w-[70px]">
-                      <ItemIcon :item-icon="item.icon" />
-                    </div>
-                    <div class="text-white m-[8px_8px_0_8px]" :style="{ color: panelState.panelConfig.iconTextColor }">
-                      <div>
-                        <NEllipsis>
-                          {{ item.title }}
-                        </NEllipsis>
-                      </div>
-                      <div>
-                        <NEllipsis :line-clamp="2" class="text-xs">
-                          {{ item.description }}
-                        </NEllipsis>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </NGridItem>
+          <!-- 组纵向排列 -->
+          <div
+            v-for="(itemGroup, itemGroupIndex) in items"
+            :key="itemGroupIndex"
+            class="mt-[50px]"
+            :class="stateDragAppSort.status ? 'shadow-2xl border shadow-[0_0_30px_10px_rgba(0,0,0,0.8)]  p-[10px] rounded-2xl' : ''"
+          >
+            <!-- 分组标题 -->
+            <div class="text-white text-xl font-extrabold mb-[20px] ml-[10px]">
+              {{ itemGroup.title }}
+            </div>

-              <NGridItem>
-                <div>
-                  <div
-                    class="w-full rounded-2xl cursor-pointer transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] bg-[#2a2a2a6b] flex"
-                    @click="handleAddAppClick"
-                  >
-                    <ItemIcon :item-icon="{ itemType: 3, text: 'subway:add', bgColor: '#00000000' }" />
-                    <div class="text-white m-[8px]" :style="{ color: panelState.panelConfig.iconTextColor }">
-                      <div>
-                        <NEllipsis>
-                          添加图标
-                        </NEllipsis>
-                      </div>
+            <!-- 详情图标 -->
+            <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
+              <div v-if="itemGroup.items">
+                <VueDraggable
+                  v-model="itemGroup.items" item-key="sort" :animation="300"
+                  class="mx-auto mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:12 gap-5"
+                  filter=".not-drag"
+                  :disabled="!stateDragAppSort.status"
+                  @end="(event) => handleEndDrag(event, itemGroup)"
+                >
+                  <div v-for="item, index in itemGroup.items" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, item)">
+                    <AppIcon
+                      :class="stateDragAppSort.status ? 'cursor-move' : 'cursor-pointer'"
+                      :item-info="item"
+                      :icon-text-color="panelState.panelConfig.iconTextColor"
+                      :icon-text-info-hide-description="panelState.panelConfig.iconTextInfoHideDescription || false"
+                      :icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false"
+                      :style="0"
+                      @click="handleItemClick(item)"
+                    />
+                  </div>

-                      <div class="text text-xs">
-                        <NEllipsis>
-                          新增一个新的图标
-                        </NEllipsis>
-                      </div>
-                    </div>
+                  <div v-if="itemGroup.items.length === 0" class="not-drag">
+                    <AppIcon
+                      :class="stateDragAppSort.status ? 'cursor-move' : 'cursor-pointer'"
+                      :item-info="{ icon: { itemType: 3, text: 'subway:add' }, title: '添加图标', url: '', openMethod: 0 }"
+                      :icon-text-color="panelState.panelConfig.iconTextColor"
+                      :icon-text-info-hide-description="panelState.panelConfig.iconTextInfoHideDescription || false"
+                      :icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false"
+                      :style="0"
+                      @click="handleAddAppClick"
+                    />
                  </div>
-                </div>
-              </NGridItem>
-            </NGrid>
-          </div>
+                </VueDraggable>
+              </div>
+            </div>

-          <!-- APP图标宫型盒子 -->
-          <div v-if="panelState.panelConfig.iconStyle === 1">
-            <NGrid :x-gap="12" :y-gap="8" item-responsive cols="3 300:4 600:6 900:8">
-              <NGridItem v-for="(item, index) in items" :key="index">
-                <div @contextmenu="(e) => handleContextMenu(e, item)">
-                  <div
-                    class="w-[70px] h-[70px] mx-auto rounded-2xl cursor-pointer transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] bg-[#2a2a2a6b]"
-                    @click="handleItemClick(item)"
-                  >
-                    <ItemIcon :item-icon="item.icon" />
-                  </div>
-                  <div class="text-center app-icon-text-shadow cursor-pointer mt-[2px]" :style="{ color: panelState.panelConfig.iconTextColor }" @click="handleItemClick(item)">
-                    <span>{{ item.title }}</span>
-                  </div>
-                </div>
-              </NGridItem>
+            <!-- APP图标宫型盒子 -->
+            <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
+              <div v-if="itemGroup.items">
+                <VueDraggable
+                  v-model="itemGroup.items" item-key="id" :animation="300"
+                  class="mx-auto mt-4 grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:12 gap-5"

-              <NGridItem>
-                <div>
-                  <div class="w-[70px] h-[70px] mx-auto rounded-2xl cursor-pointer transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]" @click="handleAddAppClick">
-                    <ItemIcon :item-icon="{ itemType: 3, text: 'subway:add', bgColor: '#343434' }" />
+                  filter=".not-drag"
+                  :disabled="!stateDragAppSort.status"
+                >
+                  <div v-for="item, index in itemGroup.items" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, item)">
+                    <AppIcon
+                      :class="stateDragAppSort.status ? 'cursor-move' : 'cursor-pointer'"
+                      :item-info="item"
+                      :icon-text-color="panelState.panelConfig.iconTextColor"
+                      :icon-text-info-hide-description="!panelState.panelConfig.iconTextInfoHideDescription"
+                      :icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false"
+                      :style="1"
+                      @click="handleItemClick(item)"
+                    />
                  </div>
-                  <div class="text-center app-icon-text-shadow cursor-pointer mt-[2px]" :style="{ color: panelState.panelConfig.iconTextColor }" @click="handleAddAppClick">
-                    添加图标
+
+                  <div v-if="itemGroup.items.length === 0" class="not-drag">
+                    <AppIcon
+                      :class="stateDragAppSort.status ? 'cursor-move' : 'cursor-pointer'"
+                      :item-info="{ icon: { itemType: 3, text: 'subway:add' }, title: '添加图标', url: '', openMethod: 0 }"
+                      :icon-text-color="panelState.panelConfig.iconTextColor"
+                      :icon-text-info-hide-description="!panelState.panelConfig.iconTextInfoHideDescription"
+                      :icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false"
+                      :style="1"
+                      @click="handleAddAppClick"
+                    />
                  </div>
-                </div>
-              </NGridItem>
-            </NGrid>
+                </vuedraggable>
+              </div>
+            </div>
+
+            <!-- 编辑栏 -->
+            <div v-if="stateDragAppSort.status" class="flex mt-[10px]">
+              <div>
+                <NButton color="#2a2a2a6b" @click="handleSaveSort(itemGroup)">
+                  <template #icon>
+                    <SvgIcon class="text-white font-xl" icon="material-symbols:save" />
+                  </template>
+                  <div>
+                    保存排序
+                  </div>
+                </NButton>
+              </div>
+            </div>
          </div>
        </div>
      </div>
@@ -301,29 +412,48 @@ onMounted(() => {

    <!-- 右键菜单 -->
    <NDropdown
-      placement="bottom-start"
-      trigger="manual"
-      :x="dropdownMenuX"
-      :y="dropdownMenuY"
-      :options="dropdownMenuOptions"
-      :show="dropdownShow"
-      :on-clickoutside="onClickoutside"
-      @select="handleSelect"
+      placement="bottom-start" trigger="manual" :x="dropdownMenuX" :y="dropdownMenuY"
+      :options="getDropdownMenuOptions()" :show="dropdownShow" :on-clickoutside="onClickoutside" @select="handleSelect"
    />

    <!-- 悬浮按钮 -->
    <div class="fixed-element  shadow-[0_0_10px_2px_rgba(0,0,0,0.2)]">
-      <NButtonGroup vertical>
-        <NButton v-if="panelState.networkMode === PanelStateNetworkModeEnum.lan" color="#2a2a2a6b" title="当前:局域网模式，点击切换成互联网模式" @click="handleChangeNetwork(PanelStateNetworkModeEnum.wan)">
+      <NButton v-if="stateDragAppSort.status" color="#2a2a2a6b" @click="stateDragAppSort.status = !stateDragAppSort.status">
+        <template #icon>
+          <SvgIcon class="text-white font-xl" icon="ri:drag-drop-line" />
+        </template>
+      </NButton>
+      <NButtonGroup v-if="!stateDragAppSort.status" vertical>
+        <NButton color="#2a2a2a6b" @click="handleAddAppClick">
+          <template #icon>
+            <SvgIcon class="text-white font-xl" icon="typcn:plus" />
+          </template>
+        </NButton>
+
+        <NButton
+          v-if="panelState.networkMode === PanelStateNetworkModeEnum.lan" color="#2a2a2a6b"
+          title="当前:局域网模式，点击切换成互联网模式" @click="handleChangeNetwork(PanelStateNetworkModeEnum.wan)"
+        >
          <template #icon>
            <SvgIcon class="text-white font-xl" icon="material-symbols:lan-outline" />
          </template>
        </NButton>
-        <NButton v-if="panelState.networkMode === PanelStateNetworkModeEnum.wan" color="#2a2a2a6b" title="当前:互联网模式，点击切换成局域网模式" @click="handleChangeNetwork(PanelStateNetworkModeEnum.lan)">
+
+        <NButton
+          v-if="panelState.networkMode === PanelStateNetworkModeEnum.wan" color="#2a2a2a6b"
+          title="当前:互联网模式，点击切换成局域网模式" @click="handleChangeNetwork(PanelStateNetworkModeEnum.lan)"
+        >
          <template #icon>
            <SvgIcon class="text-white font-xl" icon="mdi:wan" />
          </template>
        </NButton>
+
+        <NButton color="#2a2a2a6b" title="排序模式" @click="stateDragAppSort.status = !stateDragAppSort.status">
+          <template #icon>
+            <SvgIcon class="text-white font-xl" icon="ri:drag-drop-line" />
+          </template>
+        </NButton>
+
        <NButton color="#2a2a2a6b" @click="settingModalShow = !settingModalShow">
          <template #icon>
            <SvgIcon class="text-white font-xl" icon="ep:setting" />
@@ -331,20 +461,30 @@ onMounted(() => {
        </NButton>
      </NButtonGroup>

+      <NBackTop
+        :listen-to="() => scrollContainerRef"
+        :right="10"
+        :bottom="10"
+        style="background-color:transparent;border: none;box-shadow: none;"
+      >
+        <div class="shadow-[0_0_10px_2px_rgba(0,0,0,0.2)]">
+          <NButton color="#2a2a2a6b">
+            <template #icon>
+              <SvgIcon class="text-white font-xl" icon="icon-park-outline:to-top" />
+            </template>
+          </NButton>
+        </div>
+      </NBackTop>
+
      <Setting v-model:visible="settingModalShow" />
    </div>

    <EditItem v-model:visible="editItemInfoShow" :item-info="editItemInfoData" @done="handleEditSuccess" />

-    <!-- 新窗口 -->
+    <!-- 弹窗 -->
    <NModal
-      v-model:show="windowShow"
-      :mask-closable="false"
-      preset="card"
-      style="max-width: 1000px;height: 600px;border-radius: 1rem;"
-      :bordered="false"
-      size="small"
-      role="dialog"
+      v-model:show="windowShow" :mask-closable="false" preset="card"
+      style="max-width: 1000px;height: 600px;border-radius: 1rem;" :bordered="false" size="small" role="dialog"
      aria-modal="true"
    >
      <template #header>
@@ -358,45 +498,60 @@ onMounted(() => {
      </template>
      <div class="w-full h-full rounded-2xl overflow-hidden border">
        <NSkeleton v-if="windowIframeIsLoad" height="100%" width="100%" />
-        <iframe v-show="!windowIframeIsLoad" id="windowIframeId" ref="windowIframeRef" :src="windowSrc" class="w-full h-full" frameborder="0" @load="handWindowIframeIdLoad" />
+        <iframe
+          v-show="!windowIframeIsLoad" id="windowIframeId" ref="windowIframeRef" :src="windowSrc"
+          class="w-full h-full" frameborder="0" @load="handWindowIframeIdLoad"
+        />
      </div>
    </NModal>
  </div>
 </template>

 <style>
-body,html{
+body,
+html {
  overflow: hidden;
  background-color: rgb(54, 54, 54);
 }
 </style>

 <style scoped>
-.sun-main{
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.sun-main {
  user-select: none;
 }

-.cover{
-  position:absolute;
-  width:100%;
-  height:100%;
+.cover {
+  position: absolute;
+  width: 100%;
+  height: 100%;
  overflow: hidden;
  /* background: url(@/assets/start_sky.jpg) no-repeat; */

  transform: scale(1.05);
 }

-.text-shadow{
+.text-shadow {
  text-shadow: 2px 2px 50px rgb(0, 0, 0);
 }

-.app-icon-text-shadow{
+.app-icon-text-shadow {
  text-shadow: 2px 2px 5px rgb(0, 0, 0);
 }

 .fixed-element {
-  position: fixed; /* 将元素固定在屏幕上 */
-  right: 30px; /* 距离屏幕顶部的距离 */
-  bottom: 50px; /* 距离屏幕左侧的距离 */
+  position: fixed;
+  /* 将元素固定在屏幕上 */
+  right: 10px;
+  /* 距离屏幕顶部的距离 */
+  bottom: 50px;
+  /* 距离屏幕左侧的距离 */
 }
 </style>