From f31f5d470c30e2be7765986548dd20acbae2b077 Mon Sep 17 00:00:00 2001
From: wuluoting <wuluoting@shiyue.com>
Date: Wed, 17 Jul 2024 23:19:56 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .npmrc                                        |   2 +-
 components.d.ts                               |   9 +-
 package-lock.json                             | 435 +++++++++++++++++-
 package.json                                  |   4 +-
 src/api/common.ts                             |  22 +-
 src/api/preview/index.js                      |  28 --
 src/api/preview/index.ts                      |  21 +
 src/main.ts                                   |  14 +-
 src/router/routes.ts                          | 100 ++--
 src/views/page-show-info/page-info/index,.vue | 330 +++++++++++++
 src/views/page-show-info/page-info/service.ts |  10 +
 11 files changed, 876 insertions(+), 99 deletions(-)
 delete mode 100644 src/api/preview/index.js
 create mode 100644 src/api/preview/index.ts
 create mode 100644 src/views/page-show-info/page-info/index,.vue
 create mode 100644 src/views/page-show-info/page-info/service.ts

diff --git a/.npmrc b/.npmrc
index 434547d..dce03c3 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1 @@
-registry=http://sy-registry.shiyue.com
+# registry=http://sy-registry.shiyue.com
diff --git a/components.d.ts b/components.d.ts
index aeb9fb3..69cc5e2 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,9 +12,10 @@ declare module 'vue' {
     AButton: typeof import('ant-design-vue/es')['Button']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
+    ACol: typeof import('ant-design-vue/es')['Col']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
-    AEmpty: typeof import('ant-design-vue/es')['Empty']
+    AEmpty: typeof import("ant-design-vue/es")["Empty"]
     AFloatButton: typeof import('ant-design-vue/es')['FloatButton']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
@@ -29,14 +30,16 @@ declare module 'vue' {
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
+    ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
-    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASelectOption: typeof import("ant-design-vue/es")["SelectOption"]
     ASpace: typeof import('ant-design-vue/es')['Space']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    Table: typeof import('./src/components/common/table.vue')['default']
+    Table: typeof import("./src/components/common/table.vue")["default"]
     YChart: typeof import('./src/components/common/y-chart.vue')['default']
     YTable: typeof import('./src/components/common/y-table.vue')['default']
   }
diff --git a/package-lock.json b/package-lock.json
index fbd72ab..feb139b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,8 +13,10 @@
         "ant-design-vue": "^4.1.2",
         "axios": "^1.6.7",
         "lodash": "^4.17.21",
+        "p-limit": "^6.1.0",
         "pinia": "^2.1.7",
         "vue": "^3.4.15",
+        "vue-grid-layout": "^3.0.0-beta1",
         "vue-router": "^4.2.5"
       },
       "devDependencies": {
@@ -1352,6 +1354,173 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
+    "node_modules/@interactjs/actions": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/actions/-/actions-1.10.27.tgz",
+      "integrity": "sha512-FCRg5KwB+stkPcAMx/Cn0fgGP6p4LyMX9S/Upcn/W+hpYme31bPi54PCqmOebzz6myTthN6zFf9jMyLOqtI/gg==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.27"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/auto-scroll": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/auto-scroll/-/auto-scroll-1.10.27.tgz",
+      "integrity": "sha512-zPg5TnVsZv+9Hnt4qnbxLvBMf+rIWHkoJVoSETEbLNaj90C8hIyr0pVwukSUySSgDhCgQ7np0f3pg4INLq9beQ==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.27"
+      },
+      "peerDependencies": {
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/auto-start": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/auto-start/-/auto-start-1.10.27.tgz",
+      "integrity": "sha512-ECLBO/nxmaF1knncJKIE5F7la3KKRgEkn0Cu2JTPOYj9xy/LpfYElo3wkRHsodgOqF651nR70GK2/IzPR2lO9A==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.27"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/core": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.10.27.tgz",
+      "integrity": "sha512-SliUr/3ZbLAdED8LokzYzWHWMdCB5Cq+UnpXuRy+BIod1j97m4IUFf/D1iIKUBBjBcucgXbz28z96WnenVCB7Q==",
+      "peerDependencies": {
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/dev-tools": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/dev-tools/-/dev-tools-1.10.27.tgz",
+      "integrity": "sha512-YolmBwRaKH1gWbvyLeV3m5QSwtD38lOZnCBA87PCAlcd9PQAC2gb03fEPeEyD336bE20oLB8f0WZt4Wre+afiw==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.27",
+        "vue": "3"
+      },
+      "peerDependencies": {
+        "@interactjs/modifiers": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/inertia": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/inertia/-/inertia-1.10.27.tgz",
+      "integrity": "sha512-S/SVj/M0D+wWWPVXHcXN/YUWOK51LFJsEA+CTgVnFhlSU04+1FUvNLwilCZcHgECu1RJxZNKDwZysDATg+r8jQ==",
+      "dependencies": {
+        "@interactjs/offset": "1.10.27"
+      },
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.27"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.27",
+        "@interactjs/modifiers": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/interact": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/interact/-/interact-1.10.27.tgz",
+      "integrity": "sha512-XdH3A2UUzjEFGGJgFuJlhiz99tE8jB8xNh/DmnoMuL6uOQPxNA+sWRnzEVjG0+zY2P3/dbhEpi4Cn3FLPzydwA==",
+      "dependencies": {
+        "@interactjs/core": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/interactjs": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/interactjs/-/interactjs-1.10.27.tgz",
+      "integrity": "sha512-UwhfUZMZVXUY72efPABuKSBz1sUY+r+49v8t6Ku9o5Jq76AKg9mwmdGszIlOn3ppnFDDjvtzK/8TL+Sbd0EQEA==",
+      "dependencies": {
+        "@interactjs/actions": "1.10.27",
+        "@interactjs/auto-scroll": "1.10.27",
+        "@interactjs/auto-start": "1.10.27",
+        "@interactjs/core": "1.10.27",
+        "@interactjs/dev-tools": "1.10.27",
+        "@interactjs/inertia": "1.10.27",
+        "@interactjs/interact": "1.10.27",
+        "@interactjs/modifiers": "1.10.27",
+        "@interactjs/offset": "1.10.27",
+        "@interactjs/pointer-events": "1.10.27",
+        "@interactjs/reflow": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/modifiers": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.27.tgz",
+      "integrity": "sha512-ei/qfoQ+9/8k6WzNzdNqHI6cWkIV576N4Ap16r5CoqOWwhA6Xzj3OMHf1g0t1O4eSq2HdJsVJn3eLNfw9HsbeQ==",
+      "dependencies": {
+        "@interactjs/snappers": "1.10.27"
+      },
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.27"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/offset": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/offset/-/offset-1.10.27.tgz",
+      "integrity": "sha512-AezsLiuK+Qv4jXdYuRa65HJ2pMFMZPlqiAep6ZRLwhP9HE7O75c0EAm+gfx+dpPrHNHs6J9LaiKSZl+B+A2qAw==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.27"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/pointer-events": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/pointer-events/-/pointer-events-1.10.27.tgz",
+      "integrity": "sha512-Yo5SS6PhWfC93gHNxnwwW0wvebo5hSYJKGaSnAHO4f9Lh25yibecMnmPBmiEfWVcdMboK/kXrme43mHQaRegVg==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.27"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/reflow": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/reflow/-/reflow-1.10.27.tgz",
+      "integrity": "sha512-Msm0QdYFr40oSsPFxyCR3dHN/pQx34k7QSkdN1uIsUn/drrm+YSFvrvVOu99DFOwr7gTThr5vNe06Sz4vubTSA==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.27"
+      },
+      "peerDependencies": {
+        "@interactjs/core": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/snappers": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/snappers/-/snappers-1.10.27.tgz",
+      "integrity": "sha512-HZLZ0XSi6HI08OmTv/HKG6AltQoaKAALLQ+KDW92utj3XSgw7oren0KsWUKPhaPg3Av7R1jFQd08s+uafqIlLw==",
+      "optionalDependencies": {
+        "@interactjs/interact": "1.10.27"
+      },
+      "peerDependencies": {
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "node_modules/@interactjs/utils": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.27.tgz",
+      "integrity": "sha512-+qfLOio2OxQqg1cXSnRaCl+N8MQDQLDS9w+aOGxH8YLAhIMyt7Asxx/46//sT8orgsi16pmlBPtngPHT9s8zKw=="
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -2568,6 +2737,11 @@
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -3148,6 +3322,14 @@
       "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==",
       "dev": true
     },
+    "node_modules/element-resize-detector": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+      "dependencies": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -4969,6 +5151,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+    },
     "node_modules/mock-property": {
       "version": "1.0.3",
       "resolved": "http://sy-registry.shiyue.com/mock-property/-/mock-property-1.0.3.tgz",
@@ -5192,15 +5379,14 @@
       }
     },
     "node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-6.1.0.tgz",
+      "integrity": "sha512-H0jc0q1vOzlEk0TqAKXKZxdl7kX3OFUzCnNVUnq5Pc3DGo0kpeaMuPqxQn235HibwBEb0/pm9dgKTjXy66fBkg==",
       "dependencies": {
-        "yocto-queue": "^0.1.0"
+        "yocto-queue": "^1.1.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -5221,6 +5407,33 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-locate/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate/node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
@@ -6424,6 +6637,20 @@
         "node": ">=10"
       }
     },
+    "node_modules/vue-grid-layout": {
+      "version": "3.0.0-beta1",
+      "resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-3.0.0-beta1.tgz",
+      "integrity": "sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==",
+      "dependencies": {
+        "@interactjs/actions": "^1.10.2",
+        "@interactjs/auto-start": "^1.10.2",
+        "@interactjs/dev-tools": "^1.10.2",
+        "@interactjs/interactjs": "^1.10.2",
+        "@interactjs/modifiers": "^1.10.2",
+        "element-resize-detector": "^1.2.1",
+        "mitt": "^2.1.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.4.0",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.0.tgz",
@@ -6627,12 +6854,11 @@
       }
     },
     "node_modules/yocto-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true,
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
+      "integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==",
       "engines": {
-        "node": ">=10"
+        "node": ">=12.20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -7601,6 +7827,128 @@
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
+    "@interactjs/actions": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/actions/-/actions-1.10.27.tgz",
+      "integrity": "sha512-FCRg5KwB+stkPcAMx/Cn0fgGP6p4LyMX9S/Upcn/W+hpYme31bPi54PCqmOebzz6myTthN6zFf9jMyLOqtI/gg==",
+      "requires": {
+        "@interactjs/interact": "1.10.27"
+      }
+    },
+    "@interactjs/auto-scroll": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/auto-scroll/-/auto-scroll-1.10.27.tgz",
+      "integrity": "sha512-zPg5TnVsZv+9Hnt4qnbxLvBMf+rIWHkoJVoSETEbLNaj90C8hIyr0pVwukSUySSgDhCgQ7np0f3pg4INLq9beQ==",
+      "requires": {
+        "@interactjs/interact": "1.10.27"
+      }
+    },
+    "@interactjs/auto-start": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/auto-start/-/auto-start-1.10.27.tgz",
+      "integrity": "sha512-ECLBO/nxmaF1knncJKIE5F7la3KKRgEkn0Cu2JTPOYj9xy/LpfYElo3wkRHsodgOqF651nR70GK2/IzPR2lO9A==",
+      "requires": {
+        "@interactjs/interact": "1.10.27"
+      }
+    },
+    "@interactjs/core": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.10.27.tgz",
+      "integrity": "sha512-SliUr/3ZbLAdED8LokzYzWHWMdCB5Cq+UnpXuRy+BIod1j97m4IUFf/D1iIKUBBjBcucgXbz28z96WnenVCB7Q==",
+      "requires": {}
+    },
+    "@interactjs/dev-tools": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/dev-tools/-/dev-tools-1.10.27.tgz",
+      "integrity": "sha512-YolmBwRaKH1gWbvyLeV3m5QSwtD38lOZnCBA87PCAlcd9PQAC2gb03fEPeEyD336bE20oLB8f0WZt4Wre+afiw==",
+      "requires": {
+        "@interactjs/interact": "1.10.27",
+        "vue": "3"
+      }
+    },
+    "@interactjs/inertia": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/inertia/-/inertia-1.10.27.tgz",
+      "integrity": "sha512-S/SVj/M0D+wWWPVXHcXN/YUWOK51LFJsEA+CTgVnFhlSU04+1FUvNLwilCZcHgECu1RJxZNKDwZysDATg+r8jQ==",
+      "requires": {
+        "@interactjs/interact": "1.10.27",
+        "@interactjs/offset": "1.10.27"
+      }
+    },
+    "@interactjs/interact": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/interact/-/interact-1.10.27.tgz",
+      "integrity": "sha512-XdH3A2UUzjEFGGJgFuJlhiz99tE8jB8xNh/DmnoMuL6uOQPxNA+sWRnzEVjG0+zY2P3/dbhEpi4Cn3FLPzydwA==",
+      "requires": {
+        "@interactjs/core": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "@interactjs/interactjs": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/interactjs/-/interactjs-1.10.27.tgz",
+      "integrity": "sha512-UwhfUZMZVXUY72efPABuKSBz1sUY+r+49v8t6Ku9o5Jq76AKg9mwmdGszIlOn3ppnFDDjvtzK/8TL+Sbd0EQEA==",
+      "requires": {
+        "@interactjs/actions": "1.10.27",
+        "@interactjs/auto-scroll": "1.10.27",
+        "@interactjs/auto-start": "1.10.27",
+        "@interactjs/core": "1.10.27",
+        "@interactjs/dev-tools": "1.10.27",
+        "@interactjs/inertia": "1.10.27",
+        "@interactjs/interact": "1.10.27",
+        "@interactjs/modifiers": "1.10.27",
+        "@interactjs/offset": "1.10.27",
+        "@interactjs/pointer-events": "1.10.27",
+        "@interactjs/reflow": "1.10.27",
+        "@interactjs/utils": "1.10.27"
+      }
+    },
+    "@interactjs/modifiers": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.27.tgz",
+      "integrity": "sha512-ei/qfoQ+9/8k6WzNzdNqHI6cWkIV576N4Ap16r5CoqOWwhA6Xzj3OMHf1g0t1O4eSq2HdJsVJn3eLNfw9HsbeQ==",
+      "requires": {
+        "@interactjs/interact": "1.10.27",
+        "@interactjs/snappers": "1.10.27"
+      }
+    },
+    "@interactjs/offset": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/offset/-/offset-1.10.27.tgz",
+      "integrity": "sha512-AezsLiuK+Qv4jXdYuRa65HJ2pMFMZPlqiAep6ZRLwhP9HE7O75c0EAm+gfx+dpPrHNHs6J9LaiKSZl+B+A2qAw==",
+      "requires": {
+        "@interactjs/interact": "1.10.27"
+      }
+    },
+    "@interactjs/pointer-events": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/pointer-events/-/pointer-events-1.10.27.tgz",
+      "integrity": "sha512-Yo5SS6PhWfC93gHNxnwwW0wvebo5hSYJKGaSnAHO4f9Lh25yibecMnmPBmiEfWVcdMboK/kXrme43mHQaRegVg==",
+      "requires": {
+        "@interactjs/interact": "1.10.27"
+      }
+    },
+    "@interactjs/reflow": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/reflow/-/reflow-1.10.27.tgz",
+      "integrity": "sha512-Msm0QdYFr40oSsPFxyCR3dHN/pQx34k7QSkdN1uIsUn/drrm+YSFvrvVOu99DFOwr7gTThr5vNe06Sz4vubTSA==",
+      "requires": {
+        "@interactjs/interact": "1.10.27"
+      }
+    },
+    "@interactjs/snappers": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/snappers/-/snappers-1.10.27.tgz",
+      "integrity": "sha512-HZLZ0XSi6HI08OmTv/HKG6AltQoaKAALLQ+KDW92utj3XSgw7oren0KsWUKPhaPg3Av7R1jFQd08s+uafqIlLw==",
+      "requires": {
+        "@interactjs/interact": "1.10.27"
+      }
+    },
+    "@interactjs/utils": {
+      "version": "1.10.27",
+      "resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.27.tgz",
+      "integrity": "sha512-+qfLOio2OxQqg1cXSnRaCl+N8MQDQLDS9w+aOGxH8YLAhIMyt7Asxx/46//sT8orgsi16pmlBPtngPHT9s8zKw=="
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -8434,6 +8782,11 @@
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+    },
     "binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -8852,6 +9205,14 @@
       "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==",
       "dev": true
     },
+    "element-resize-detector": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+      "requires": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -10150,6 +10511,11 @@
       "resolved": "http://sy-registry.shiyue.com/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
     },
+    "mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+    },
     "mock-property": {
       "version": "1.0.3",
       "resolved": "http://sy-registry.shiyue.com/mock-property/-/mock-property-1.0.3.tgz",
@@ -10305,12 +10671,11 @@
       }
     },
     "p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-6.1.0.tgz",
+      "integrity": "sha512-H0jc0q1vOzlEk0TqAKXKZxdl7kX3OFUzCnNVUnq5Pc3DGo0kpeaMuPqxQn235HibwBEb0/pm9dgKTjXy66fBkg==",
       "requires": {
-        "yocto-queue": "^0.1.0"
+        "yocto-queue": "^1.1.1"
       }
     },
     "p-locate": {
@@ -10320,6 +10685,23 @@
       "dev": true,
       "requires": {
         "p-limit": "^3.0.2"
+      },
+      "dependencies": {
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "yocto-queue": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+          "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+          "dev": true
+        }
       }
     },
     "parent-module": {
@@ -11097,6 +11479,20 @@
         }
       }
     },
+    "vue-grid-layout": {
+      "version": "3.0.0-beta1",
+      "resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-3.0.0-beta1.tgz",
+      "integrity": "sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==",
+      "requires": {
+        "@interactjs/actions": "^1.10.2",
+        "@interactjs/auto-start": "^1.10.2",
+        "@interactjs/dev-tools": "^1.10.2",
+        "@interactjs/interactjs": "^1.10.2",
+        "@interactjs/modifiers": "^1.10.2",
+        "element-resize-detector": "^1.2.1",
+        "mitt": "^2.1.0"
+      }
+    },
     "vue-router": {
       "version": "4.4.0",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.0.tgz",
@@ -11247,10 +11643,9 @@
       }
     },
     "yocto-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
+      "integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g=="
     }
   }
 }
diff --git a/package.json b/package.json
index 643fb99..8ee5b5a 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,10 @@
     "ant-design-vue": "^4.1.2",
     "axios": "^1.6.7",
     "lodash": "^4.17.21",
+    "p-limit": "^6.1.0",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
+    "vue-grid-layout": "^3.0.0-beta1",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
@@ -37,4 +39,4 @@
     "vite": "^5.0.11",
     "vue-tsc": "^1.8.27"
   }
-}
\ No newline at end of file
+}
diff --git a/src/api/common.ts b/src/api/common.ts
index fe15e8e..d843e8a 100644
--- a/src/api/common.ts
+++ b/src/api/common.ts
@@ -1,4 +1,4 @@
-import { get } from '@/utils/request';
+import { get } from "@/utils/request";
 
 export interface UserInfoType {
   alias: string;
@@ -15,8 +15,20 @@ export interface UserInfoType {
   username: string;
 }
 
-export const getUserInfo = () => get<UserInfoType>({
-  url: '/api/home/grade',
-});
+interface DropListItem {
+  label: string;
+  value: string | number;
+  mark: string;
+}
 
-export const logout = () => get({ url: '/api/common/logout' });
+export const getUserInfo = () =>
+  get<UserInfoType>({
+    url: "/api/home/grade",
+  });
+
+export const logout = () => get({ url: "/api/common/logout" });
+
+export const getProjectDrop = () =>
+  get<DropListItem[]>({
+    url: "/api/v1/project/get-project-drop",
+  });
diff --git a/src/api/preview/index.js b/src/api/preview/index.js
deleted file mode 100644
index a46c8c6..0000000
--- a/src/api/preview/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { get, post } from "@/utils/request";
-
-// 预览
-export function preview({ modularId, fieldIds, page, perPage, filter }) {
-  return post({
-    url: "api/v1/preview/view",
-    data: {
-      modular_id: modularId,
-      field_ids: fieldIds,
-      page,
-      per_page: perPage,
-      filter,
-    },
-  });
-}
-
-// 查看视图
-export function searchInfo({ previewId, page, perPage, filter }) {
-  return get({
-    url: `/api/v1/preview/info`,
-    params: {
-      preview_id: previewId,
-      page,
-      per_page: perPage,
-      filter,
-    },
-  });
-}
diff --git a/src/api/preview/index.ts b/src/api/preview/index.ts
new file mode 100644
index 0000000..3cf8bfa
--- /dev/null
+++ b/src/api/preview/index.ts
@@ -0,0 +1,21 @@
+import { post } from "@/utils/request";
+
+interface PreviewItemParams {
+  previewId: string | number;
+  filter?: string | [];
+  page?: number;
+  perPage?: number;
+}
+
+// 查看视图
+export function searchInfo(data: PreviewItemParams) {
+  return post({
+    url: `/api/v1/preview/info`,
+    data: {
+      preview_id: data.previewId,
+      filter: data.filter,
+      page: data.page,
+      per_page: data.perPage,
+    },
+  });
+}
diff --git a/src/main.ts b/src/main.ts
index e81259d..a7db608 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,14 @@
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import App from './App.vue';
-import router from './router';
-import './global.less';
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+import router from "./router";
+import "./global.less";
+import VueGridLayout from "vue-grid-layout"; // 引入layout
 
 const app = createApp(App);
 
+app.use(VueGridLayout);
 app.use(createPinia());
 app.use(router);
 
-app.mount('#app');
+app.mount("#app");
diff --git a/src/router/routes.ts b/src/router/routes.ts
index b773584..20311d6 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,7 +1,11 @@
-import Layout from '@/layout/index.vue';
-import { HomeOutlined, BarChartOutlined } from '@ant-design/icons-vue';
-import { h } from 'vue';
-import type { VNode, RendererNode, RendererElement } from 'vue';
+import Layout from "@/layout/index.vue";
+import {
+  HomeOutlined,
+  BarChartOutlined,
+  AppstoreOutlined,
+} from "@ant-design/icons-vue";
+import { h } from "vue";
+import type { VNode, RendererNode, RendererElement } from "vue";
 
 export interface RouteType {
   path: string;
@@ -11,70 +15,96 @@ export interface RouteType {
   isMenu?: boolean;
   redirect?: string;
   children: RouteType[];
-  icon?: () => VNode<RendererNode, RendererElement, {
-    [key: string]: any;
-}>
+  icon?: () => VNode<
+    RendererNode,
+    RendererElement,
+    {
+      [key: string]: any;
+    }
+  >;
 }
 
 const routeList: RouteType[] = [
   {
-    path: '/',
-    name: 'layout',
+    path: "/",
+    name: "layout",
     component: Layout,
-    meta: { title: '首页' },
+    meta: { title: "首页" },
     children: [
       {
-        path: '',
-        name: '-',
+        path: "",
+        name: "-",
         meta: {},
         children: [],
-        redirect: '/config-manage/project-cfg',
+        redirect: "/config-manage/project-cfg",
       },
       {
-        path: '/config-manage',
-        name: 'config-manage',
+        path: "/config-manage",
+        name: "config-manage",
         isMenu: true,
-        meta: { title: '配置管理' },
+        meta: { title: "配置管理" },
         icon: () => h(HomeOutlined),
         children: [
           {
-            path: 'project-cfg',
-            name: 'project-cfg',
-            component: () => import('@/views/config-manage/project-cfg/index.vue'),
-            meta: { title: '项目配置' },
+            path: "project-cfg",
+            name: "project-cfg",
+            component: () =>
+              import("@/views/config-manage/project-cfg/index.vue"),
+            meta: { title: "项目配置" },
             isMenu: true,
             children: [],
           },
           {
-            path: 'module-cfg',
-            name: 'module-cfg',
-            component: () => import('@/views/config-manage/module-cfg/index.vue'),
-            meta: { title: '数据来源配置' },
+            path: "module-cfg",
+            name: "module-cfg",
+            component: () =>
+              import("@/views/config-manage/module-cfg/index.vue"),
+            meta: { title: "数据来源配置" },
             isMenu: true,
             children: [],
           },
         ],
       },
       {
-        path: '/view-all-manage',
-        name: 'view-all-manage',
+        path: "/view-all-manage",
+        name: "view-all-manage",
         isMenu: true,
-        meta: { title: '视图管理' },
+        meta: { title: "视图管理" },
         icon: () => h(BarChartOutlined),
         children: [
           {
-            path: 'view-list',
-            name: 'view-list',
-            component: () => import('@/views/view-all-manage/view-list/index.vue'),
-            meta: { title: '视图列表' },
+            path: "view-list",
+            name: "view-list",
+            component: () =>
+              import("@/views/view-all-manage/view-list/index.vue"),
+            meta: { title: "视图列表" },
             isMenu: true,
             children: [],
           },
           {
-            path: 'create-view',
-            name: 'create-view',
-            component: () => import('@/views/view-all-manage/create-view/index.vue'),
-            meta: { title: '创建视图' },
+            path: "create-view",
+            name: "create-view",
+            component: () =>
+              import("@/views/view-all-manage/create-view/index.vue"),
+            meta: { title: "创建视图" },
+            isMenu: true,
+            children: [],
+          },
+        ],
+      },
+      {
+        path: "/page-show-info",
+        name: "page-show-info",
+        isMenu: true,
+        meta: { title: "视图预览" },
+        icon: () => h(AppstoreOutlined),
+        children: [
+          {
+            path: "page-info",
+            name: "page-info",
+            component: () =>
+              import("@/views/page-show-info/page-info/index,.vue"),
+            meta: { title: "页面展示" },
             isMenu: true,
             children: [],
           },
diff --git a/src/views/page-show-info/page-info/index,.vue b/src/views/page-show-info/page-info/index,.vue
new file mode 100644
index 0000000..d864e1e
--- /dev/null
+++ b/src/views/page-show-info/page-info/index,.vue
@@ -0,0 +1,330 @@
+<template>
+  <div class="page-view-wrapp">
+    <div class="project">
+      <span>项目: </span>
+      <a-select
+        style="min-width: 120px"
+        placeholder="请选择项目"
+        v-model:value="projectVal"
+        :options="projectOptions"
+        @change="handleProjectChange"
+      ></a-select>
+    </div>
+    <div>
+      <grid-layout
+        v-if="isDraggable"
+        :layout.sync="layoutList"
+        :col-num="2"
+        :is-draggable="true"
+        :is-resizable="false"
+        :is-mirrored="false"
+        :vertical-compact="true"
+        :use-css-transforms="true"
+      >
+        <grid-item
+          v-for="(item, index) in layoutList"
+          :x="item.x"
+          :y="item.y"
+          :w="item.w"
+          :h="item.h"
+          :i="item.i"
+          :key="item.i"
+          drag-allow-from=".vue-draggable-handle"
+          drag-ignore-from=".no-drag"
+        >
+          <div class="view-box view-draggable">
+            <div class="vue-draggable-handle"><BarsOutlined /></div>
+            <div class="content no-drag">
+              <a-spin :spinning="ids[index].loading">
+                <div class="card-content">
+                  <y-table
+                    v-if="item.data.type === VIEW_TYPE.TABLE"
+                    :filter-config="item.data.filter"
+                    :data-list="item.data.data"
+                    :column-config="item.data.header"
+                    :total="item.data.count"
+                    :title="item.data.preview_name"
+                    @toFilt="
+                    (params?:object) => {
+                      handleSingle(ids[index], params);
+                      }
+                    "
+                  ></y-table>
+                  <y-chart
+                    v-if="item.data.type === VIEW_TYPE.CHART"
+                    :chartCfg="item.data.config"
+                    :title="item.data.preview_name"
+                    :filter-config="item.data.filter"
+                    @toFilt="
+                    (params?:object) => {
+                      handleSingle(ids[index], params);
+                      }
+                    "
+                  ></y-chart>
+                </div>
+              </a-spin>
+            </div>
+          </div>
+        </grid-item>
+      </grid-layout>
+
+      <a-row v-else :gutter="[16, 16]">
+        <a-col v-for="(item, index) in layoutList" :span="24">
+          <a-spin :spinning="item.loading">
+            <div>
+              <div class="view-box">
+                <div class="content">
+                  <div class="card-content">
+                    <y-table
+                      v-if="item.data.type === VIEW_TYPE.TABLE"
+                      :filter-config="item.data.filter"
+                      :data-list="item.data.data"
+                      :column-config="item.data.header"
+                      :total="item.data.count"
+                      :title="item.data.preview_name"
+                      @toFilt="
+                      (params?:object) => {
+                        console.log('xxxx',params)
+                        handleSingle(ids[index], params,);
+                        }
+                      "
+                    ></y-table>
+                    <y-chart
+                      v-if="item.data.type === VIEW_TYPE.CHART"
+                      :chartCfg="item.data.config"
+                      :title="item.data.preview_name"
+                      :filter-config="item.data.filter"
+                      @toFilt="
+                        (params?:object) => {
+                          handleSingle(ids[index], params);
+                        }
+                      "
+                    ></y-chart>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a-spin>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, shallowRef, computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { BarsOutlined } from "@ant-design/icons-vue";
+// utils
+import PLimit from "p-limit";
+// api
+import { searchInfo } from "@/api/preview/index";
+import { getProjectDrop } from "@/api/common";
+import { getPageInfo } from "./service";
+import type { SelectProps } from "ant-design-vue";
+import { Item } from "ant-design-vue/es/menu";
+
+interface ItemDetail {
+  id: number | string;
+  data: any;
+  loading: boolean;
+}
+
+interface Item {
+  id: number | string;
+  data: any;
+  loading: boolean;
+}
+
+interface Option extends SelectProps {
+  mark: string;
+}
+
+const VIEW_TYPE = {
+  TABLE: "table",
+  CHART: "chart",
+};
+
+const SEARCH_TYPE = {
+  SEARCH: "search",
+  INIT: "init",
+};
+
+// hooks
+const route = useRoute();
+const router = useRouter();
+const projectTag = shallowRef();
+const projectVal = shallowRef();
+const pageId = shallowRef(route.query.pageId);
+const projectOptions = shallowRef<Option[]>();
+const isDraggable = false;
+
+const layoutList = computed(() => {
+  return ids.value.map((item, index) => {
+    // 当前是第几行
+    const row = Math.floor(index / 2);
+    // 当前是第几列ji
+    const col = index % 2;
+    return {
+      i: item?.id,
+      x: col,
+      y: row,
+      w: 1,
+      h: 3,
+      minH: 3,
+      ...item,
+    };
+  });
+});
+const ids = ref<Item[]>([]);
+
+const pLimit = PLimit(2);
+
+onMounted(() => {
+  getProjectList();
+});
+
+const handleSingle = (info: ItemDetail, otherParams?: object) => {
+  getSinglePreview({ info, otherParams, type: SEARCH_TYPE.SEARCH });
+};
+
+const handleProjectChange = (value: string | number, option: Option) => {
+  projectTag.value = option.mark;
+  router.replace({
+    path: route.path,
+    query: {
+      projectTag: projectTag.value,
+      ...route.query,
+    },
+  });
+  getPageInfoData();
+};
+
+// 请求
+
+// 获取项目下拉
+const getProjectList = () => {
+  getProjectDrop()
+    .then((res) => {
+      if (res.code === 200) {
+        projectOptions.value = res.data;
+        projectTag.value = res.data[0].mark;
+        projectVal.value = res.data[0].value;
+        getPageInfoData();
+      }
+    })
+    .catch(() => {
+      projectOptions.value = [];
+    })
+    .finally(() => {});
+};
+
+// 单个视图请求
+const getSinglePreview = (data: {
+  info: ItemDetail;
+  otherParams?: object;
+  type?: string;
+}) => {
+  const { info, otherParams, type } = data;
+  info.loading = true;
+  const params = { previewId: info.id, page: 1, perPage: 20, ...otherParams };
+  searchInfo(params)
+    .then((res) => {
+      if (res.code === 200) {
+        const data = res.data;
+        if (type === SEARCH_TYPE.SEARCH) {
+          // 只更新数据
+          switch (data.type) {
+            case VIEW_TYPE.TABLE:
+              info.data.data = data.data;
+              info.data.count = data.count;
+              break;
+            case VIEW_TYPE:
+              info.data.config = data.config;
+              break;
+            default:
+              break;
+          }
+        } else {
+          info.data = res.data;
+        }
+      }
+    })
+    .finally(() => {
+      info.loading = false;
+    });
+};
+
+// 获取页面信息所有的id
+const getPageInfoData = () => {
+  getPageInfo({ mark: projectTag.value, page_id: pageId.value ?? "-1" })
+    .then((res) => {
+      if (res.code === 200) {
+        ids.value = res.data?.map((item: any) => {
+          return {
+            id: item.preview_id,
+            data: item,
+            loading: false,
+          };
+        });
+        getAllCardsData();
+      }
+    })
+    .finally(() => {});
+};
+
+const fetchFn = (delay: number, info: ItemDetail) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(info);
+      getSinglePreview({ info, type: SEARCH_TYPE.INIT });
+    }, delay);
+  });
+};
+
+const getAllCardsData = async () => {
+  let listDB = [];
+  for (let i in ids.value) {
+    listDB.push(pLimit(() => fetchFn(i === "0" ? 200 : 1000, ids.value[i])));
+  }
+  await Promise.all(listDB);
+  //此处的listDB就是最后整合的数据
+};
+</script>
+<style lang="less" scoped>
+.view-box {
+  height: 100%;
+  width: 100%;
+  min-height: 350px;
+  background-color: #fff;
+  border: 1px solid #fff;
+  border-radius: 4px;
+  transition: all 0.3s;
+  &:hover {
+    box-shadow: 0 0 20px 0 #0a103205, 0 14px 40px 0 #0a103208,
+      0 20px 60px 0 #0a10320d;
+  }
+
+  .content {
+    padding: 10px;
+  }
+}
+
+.project {
+  margin-bottom: 10px;
+}
+
+.view-draggable {
+  height: auto;
+  min-height: 450px;
+}
+
+.vue-draggable-handle {
+  padding: 0 8px 8px 0;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.vue-grid-item {
+  height: auto;
+}
+</style>
diff --git a/src/views/page-show-info/page-info/service.ts b/src/views/page-show-info/page-info/service.ts
new file mode 100644
index 0000000..403acff
--- /dev/null
+++ b/src/views/page-show-info/page-info/service.ts
@@ -0,0 +1,10 @@
+import { get, post } from "@/utils/request";
+interface PageInfoParams {
+  mark: string;
+  page_id: number | string;
+}
+export const getPageInfo = (data: PageInfoParams) =>
+  get({
+    url: "/api/v1/preview/get-preview-info",
+    params: data,
+  });

From ae724d916dc84ae3936e48a65877a3baca64e461 Mon Sep 17 00:00:00 2001
From: sy2084 <yaoxiaoqiong@shiyue.com>
Date: Wed, 17 Jul 2024 23:24:34 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E5=90=88=E5=B9=B6=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 69cc5e2..087f8e1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,36 +10,26 @@ declare module 'vue' {
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
     AButton: typeof import('ant-design-vue/es')['Button']
-    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
-    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
-    AEmpty: typeof import("ant-design-vue/es")["Empty"]
     AFloatButton: typeof import('ant-design-vue/es')['FloatButton']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
-    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
-    AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
-    ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
-    ASelectOption: typeof import("ant-design-vue/es")["SelectOption"]
-    ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
-    ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    Table: typeof import("./src/components/common/table.vue")["default"]
     YChart: typeof import('./src/components/common/y-chart.vue')['default']
     YTable: typeof import('./src/components/common/y-table.vue')['default']
   }

From 0dfdb11c58317a19b70544ede7b52ab5a42eef01 Mon Sep 17 00:00:00 2001
From: sy2084 <yaoxiaoqiong@shiyue.com>
Date: Wed, 17 Jul 2024 23:36:28 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .npmrc | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 .npmrc

diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index dce03c3..0000000
--- a/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-# registry=http://sy-registry.shiyue.com