diff --git a/apps/web-test/package.json b/apps/web-test/package.json
index 14584c33..866f9270 100644
--- a/apps/web-test/package.json
+++ b/apps/web-test/package.json
@@ -39,6 +39,13 @@
     "@vben/stores": "workspace:*",
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
+    "@vben-core/form-ui": "workspace:*",
+    "@vben-core/layout-ui": "workspace:*",
+    "@vben-core/menu-ui": "workspace:*",
+    "@vben-core/popup-ui": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
+    "@vben-core/tabs-ui": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "^11.0.3",
     "ant-design-vue": "^4.2.3",
diff --git a/apps/web-test/public/logo1.png b/apps/web-test/public/logo1.png
new file mode 100644
index 00000000..9c186e20
Binary files /dev/null and b/apps/web-test/public/logo1.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612155980933.png b/apps/web-test/public/xbyt/AUTO_1612155980933.png
new file mode 100644
index 00000000..12a51e5d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612155980933.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612155980933_C会议管理.png b/apps/web-test/public/xbyt/AUTO_1612155980933_C会议管理.png
new file mode 100644
index 00000000..be8dc363
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612155980933_C会议管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612158921536.png b/apps/web-test/public/xbyt/AUTO_1612158921536.png
new file mode 100644
index 00000000..53a4ccc6
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612158921536.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612158921536_C电子考勤.png b/apps/web-test/public/xbyt/AUTO_1612158921536_C电子考勤.png
new file mode 100644
index 00000000..a52aefb6
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612158921536_C电子考勤.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612159241967.png b/apps/web-test/public/xbyt/AUTO_1612159241967.png
new file mode 100644
index 00000000..82b74d74
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612159241967.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612159241967_C车辆调度.png b/apps/web-test/public/xbyt/AUTO_1612159241967_C车辆调度.png
new file mode 100644
index 00000000..87bfdaf6
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612159241967_C车辆调度.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612159773503.png b/apps/web-test/public/xbyt/AUTO_1612159773503.png
new file mode 100644
index 00000000..865df1ca
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612159773503.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612159773503_C网络学院.png b/apps/web-test/public/xbyt/AUTO_1612159773503_C网络学院.png
new file mode 100644
index 00000000..4f0cabe8
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612159773503_C网络学院.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612160044533.png b/apps/web-test/public/xbyt/AUTO_1612160044533.png
new file mode 100644
index 00000000..4507e18d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612160044533.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612160044533_C市场管理.png b/apps/web-test/public/xbyt/AUTO_1612160044533_C市场管理.png
new file mode 100644
index 00000000..d68ddd9b
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612160044533_C市场管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612171928867.png b/apps/web-test/public/xbyt/AUTO_1612171928867.png
new file mode 100644
index 00000000..20ba72d6
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612171928867.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612171928867_C员工培训.png b/apps/web-test/public/xbyt/AUTO_1612171928867_C员工培训.png
new file mode 100644
index 00000000..83ea4072
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612171928867_C员工培训.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612174485058.png b/apps/web-test/public/xbyt/AUTO_1612174485058.png
new file mode 100644
index 00000000..d1299f68
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612174485058.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612174485058_C投资共享.png b/apps/web-test/public/xbyt/AUTO_1612174485058_C投资共享.png
new file mode 100644
index 00000000..5cc4dcfb
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612174485058_C投资共享.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612174582883.png b/apps/web-test/public/xbyt/AUTO_1612174582883.png
new file mode 100644
index 00000000..01d223db
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612174582883.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612174582883_C即完即结.png b/apps/web-test/public/xbyt/AUTO_1612174582883_C即完即结.png
new file mode 100644
index 00000000..65c2b954
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612174582883_C即完即结.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612175576303.png b/apps/web-test/public/xbyt/AUTO_1612175576303.png
new file mode 100644
index 00000000..1d080263
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612175576303.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612175576303_C费用报销.png b/apps/web-test/public/xbyt/AUTO_1612175576303_C费用报销.png
new file mode 100644
index 00000000..dc602dae
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612175576303_C费用报销.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612175720787.png b/apps/web-test/public/xbyt/AUTO_1612175720787.png
new file mode 100644
index 00000000..72d744a8
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612175720787.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612175720787_C统一身份.png b/apps/web-test/public/xbyt/AUTO_1612175720787_C统一身份.png
new file mode 100644
index 00000000..524d6a95
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612175720787_C统一身份.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612175837663.png b/apps/web-test/public/xbyt/AUTO_1612175837663.png
new file mode 100644
index 00000000..d486a807
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612175837663.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612175837663_C设备管理.png b/apps/web-test/public/xbyt/AUTO_1612175837663_C设备管理.png
new file mode 100644
index 00000000..8dafd9db
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612175837663_C设备管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612176086934.png b/apps/web-test/public/xbyt/AUTO_1612176086934.png
new file mode 100644
index 00000000..ea1c6dca
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612176086934.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612176086934_C物资管理.png b/apps/web-test/public/xbyt/AUTO_1612176086934_C物资管理.png
new file mode 100644
index 00000000..65c9d067
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612176086934_C物资管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612176568856.png b/apps/web-test/public/xbyt/AUTO_1612176568856.png
new file mode 100644
index 00000000..a915ca1c
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612176568856.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612176568856_C财务管理.png b/apps/web-test/public/xbyt/AUTO_1612176568856_C财务管理.png
new file mode 100644
index 00000000..b79db7e1
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612176568856_C财务管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612176783322.png b/apps/web-test/public/xbyt/AUTO_1612176783322.png
new file mode 100644
index 00000000..8c472360
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612176783322.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612176783322_C内部审计.png b/apps/web-test/public/xbyt/AUTO_1612176783322_C内部审计.png
new file mode 100644
index 00000000..f72734b9
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612176783322_C内部审计.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612176967032.png b/apps/web-test/public/xbyt/AUTO_1612176967032.png
new file mode 100644
index 00000000..a275ba8c
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612176967032.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612176967032_C土地信息.png b/apps/web-test/public/xbyt/AUTO_1612176967032_C土地信息.png
new file mode 100644
index 00000000..2814b1ab
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612176967032_C土地信息.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612178344190.png b/apps/web-test/public/xbyt/AUTO_1612178344190.png
new file mode 100644
index 00000000..fa023383
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612178344190.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612178344190_CHSSE.png b/apps/web-test/public/xbyt/AUTO_1612178344190_CHSSE.png
new file mode 100644
index 00000000..644272a4
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612178344190_CHSSE.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612236164722.png b/apps/web-test/public/xbyt/AUTO_1612236164722.png
new file mode 100644
index 00000000..df5637ce
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612236164722.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612236164722_C门户网站.png b/apps/web-test/public/xbyt/AUTO_1612236164722_C门户网站.png
new file mode 100644
index 00000000..cc32ad8f
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612236164722_C门户网站.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612250582407.png b/apps/web-test/public/xbyt/AUTO_1612250582407.png
new file mode 100644
index 00000000..d8741fb9
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612250582407.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612250582407_C生产运行.png b/apps/web-test/public/xbyt/AUTO_1612250582407_C生产运行.png
new file mode 100644
index 00000000..4d64df78
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612250582407_C生产运行.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612251274093.png b/apps/web-test/public/xbyt/AUTO_1612251274093.png
new file mode 100644
index 00000000..ae9f9e50
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612251274093.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612251274093_C集输防腐.png b/apps/web-test/public/xbyt/AUTO_1612251274093_C集输防腐.png
new file mode 100644
index 00000000..13d45940
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612251274093_C集输防腐.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612251718987.png b/apps/web-test/public/xbyt/AUTO_1612251718987.png
new file mode 100644
index 00000000..96cdde62
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612251718987.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612251718987_C地面工程GIS.png b/apps/web-test/public/xbyt/AUTO_1612251718987_C地面工程GIS.png
new file mode 100644
index 00000000..4692b0ad
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612251718987_C地面工程GIS.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612253226393.jpg b/apps/web-test/public/xbyt/AUTO_1612253226393.jpg
new file mode 100644
index 00000000..05062e71
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612253226393.jpg differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612253226393_C单井日报.jpg b/apps/web-test/public/xbyt/AUTO_1612253226393_C单井日报.jpg
new file mode 100644
index 00000000..45367b94
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612253226393_C单井日报.jpg differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254108987.png b/apps/web-test/public/xbyt/AUTO_1612254108987.png
new file mode 100644
index 00000000..51c0a8dd
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254108987.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254108987_C新井日报.png b/apps/web-test/public/xbyt/AUTO_1612254108987_C新井日报.png
new file mode 100644
index 00000000..33e09524
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254108987_C新井日报.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254641675.png b/apps/web-test/public/xbyt/AUTO_1612254641675.png
new file mode 100644
index 00000000..6ac09fd6
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254641675.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254641675_C单元日报.png b/apps/web-test/public/xbyt/AUTO_1612254641675_C单元日报.png
new file mode 100644
index 00000000..1027c66b
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254641675_C单元日报.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254711440.png b/apps/web-test/public/xbyt/AUTO_1612254711440.png
new file mode 100644
index 00000000..89681935
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254711440.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254711440_C单井曲线.png b/apps/web-test/public/xbyt/AUTO_1612254711440_C单井曲线.png
new file mode 100644
index 00000000..134138f4
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254711440_C单井曲线.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254770604.png b/apps/web-test/public/xbyt/AUTO_1612254770604.png
new file mode 100644
index 00000000..4f7e8199
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254770604.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254770604_C单元曲线.png b/apps/web-test/public/xbyt/AUTO_1612254770604_C单元曲线.png
new file mode 100644
index 00000000..ec44cd97
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254770604_C单元曲线.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254834191.png b/apps/web-test/public/xbyt/AUTO_1612254834191.png
new file mode 100644
index 00000000..f501a174
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254834191.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254834191_C缝洞单元查询.png b/apps/web-test/public/xbyt/AUTO_1612254834191_C缝洞单元查询.png
new file mode 100644
index 00000000..251540eb
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254834191_C缝洞单元查询.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254982651.png b/apps/web-test/public/xbyt/AUTO_1612254982651.png
new file mode 100644
index 00000000..f07d7562
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254982651.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612254982651_C单位日度生产曲线.png b/apps/web-test/public/xbyt/AUTO_1612254982651_C单位日度生产曲线.png
new file mode 100644
index 00000000..10632971
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612254982651_C单位日度生产曲线.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612255706920.png b/apps/web-test/public/xbyt/AUTO_1612255706920.png
new file mode 100644
index 00000000..788d1f6a
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612255706920.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1612255706920_C待办管理.png b/apps/web-test/public/xbyt/AUTO_1612255706920_C待办管理.png
new file mode 100644
index 00000000..78b12716
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1612255706920_C待办管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1615449162971.png b/apps/web-test/public/xbyt/AUTO_1615449162971.png
new file mode 100644
index 00000000..1f9a7e1e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1615449162971.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1615449162971_C日志服务.png b/apps/web-test/public/xbyt/AUTO_1615449162971_C日志服务.png
new file mode 100644
index 00000000..03501597
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1615449162971_C日志服务.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1619690316967.png b/apps/web-test/public/xbyt/AUTO_1619690316967.png
new file mode 100644
index 00000000..58f800bf
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1619690316967.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1619690316967_C领导请销假.png b/apps/web-test/public/xbyt/AUTO_1619690316967_C领导请销假.png
new file mode 100644
index 00000000..06700a56
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1619690316967_C领导请销假.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1619690579620.png b/apps/web-test/public/xbyt/AUTO_1619690579620.png
new file mode 100644
index 00000000..e23e67ca
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1619690579620.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1619690579620_C政务信息.png b/apps/web-test/public/xbyt/AUTO_1619690579620_C政务信息.png
new file mode 100644
index 00000000..effe8a5d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1619690579620_C政务信息.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1619692785109.png b/apps/web-test/public/xbyt/AUTO_1619692785109.png
new file mode 100644
index 00000000..181c8311
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1619692785109.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1619692785109_C诉求建议.png b/apps/web-test/public/xbyt/AUTO_1619692785109_C诉求建议.png
new file mode 100644
index 00000000..1cf434ae
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1619692785109_C诉求建议.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1619693932246.png b/apps/web-test/public/xbyt/AUTO_1619693932246.png
new file mode 100644
index 00000000..94cf9a41
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1619693932246.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1619693932246_CEPBP.png b/apps/web-test/public/xbyt/AUTO_1619693932246_CEPBP.png
new file mode 100644
index 00000000..184f0570
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1619693932246_CEPBP.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1620294589450.png b/apps/web-test/public/xbyt/AUTO_1620294589450.png
new file mode 100644
index 00000000..49bc4cf8
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1620294589450.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1620294688040.png b/apps/web-test/public/xbyt/AUTO_1620294688040.png
new file mode 100644
index 00000000..3856c280
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1620294688040.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1620295916974.png b/apps/web-test/public/xbyt/AUTO_1620295916974.png
new file mode 100644
index 00000000..f535f3ec
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1620295916974.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1620296071109.png b/apps/web-test/public/xbyt/AUTO_1620296071109.png
new file mode 100644
index 00000000..b5d6897e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1620296071109.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1621594591994.png b/apps/web-test/public/xbyt/AUTO_1621594591994.png
new file mode 100644
index 00000000..14afb111
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1621594591994.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1626147030794.png b/apps/web-test/public/xbyt/AUTO_1626147030794.png
new file mode 100644
index 00000000..33d6aecf
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1626147030794.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1626147030794_C短信发送系统列表.png b/apps/web-test/public/xbyt/AUTO_1626147030794_C短信发送系统列表.png
new file mode 100644
index 00000000..388882a2
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1626147030794_C短信发送系统列表.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1626147560487.png b/apps/web-test/public/xbyt/AUTO_1626147560487.png
new file mode 100644
index 00000000..42b114b4
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1626147560487.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1626147560487_C短信统计.png b/apps/web-test/public/xbyt/AUTO_1626147560487_C短信统计.png
new file mode 100644
index 00000000..aed336a4
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1626147560487_C短信统计.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1627447527085.png b/apps/web-test/public/xbyt/AUTO_1627447527085.png
new file mode 100644
index 00000000..d041f087
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1627447527085.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1627447527085_C单井数据服务.png b/apps/web-test/public/xbyt/AUTO_1627447527085_C单井数据服务.png
new file mode 100644
index 00000000..c00f1a38
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1627447527085_C单井数据服务.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1627617227980.png b/apps/web-test/public/xbyt/AUTO_1627617227980.png
new file mode 100644
index 00000000..c82fa21d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1627617227980.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1627617227980_C文档资料共享.png b/apps/web-test/public/xbyt/AUTO_1627617227980_C文档资料共享.png
new file mode 100644
index 00000000..2ed15c60
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1627617227980_C文档资料共享.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1627617829154.png b/apps/web-test/public/xbyt/AUTO_1627617829154.png
new file mode 100644
index 00000000..eb58db40
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1627617829154.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1627617829154_C数据管理平台.png b/apps/web-test/public/xbyt/AUTO_1627617829154_C数据管理平台.png
new file mode 100644
index 00000000..32d2e8fd
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1627617829154_C数据管理平台.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1629707506710.png b/apps/web-test/public/xbyt/AUTO_1629707506710.png
new file mode 100644
index 00000000..0482e9ef
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1629707506710.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1629707506710_C电子邮件.png b/apps/web-test/public/xbyt/AUTO_1629707506710_C电子邮件.png
new file mode 100644
index 00000000..998b624e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1629707506710_C电子邮件.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1629712380535.png b/apps/web-test/public/xbyt/AUTO_1629712380535.png
new file mode 100644
index 00000000..c1436c4f
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1629712380535.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1629712380535_C督办管理.png b/apps/web-test/public/xbyt/AUTO_1629712380535_C督办管理.png
new file mode 100644
index 00000000..18bda88e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1629712380535_C督办管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1630380946904.png b/apps/web-test/public/xbyt/AUTO_1630380946904.png
new file mode 100644
index 00000000..eeeb7ba8
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1630380946904.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1630380946904_C操作手册.png b/apps/web-test/public/xbyt/AUTO_1630380946904_C操作手册.png
new file mode 100644
index 00000000..4f2b9ffe
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1630380946904_C操作手册.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1630399009307.png b/apps/web-test/public/xbyt/AUTO_1630399009307.png
new file mode 100644
index 00000000..cf93d6cb
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1630399009307.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1630399009307_C志审计服.png b/apps/web-test/public/xbyt/AUTO_1630399009307_C志审计服.png
new file mode 100644
index 00000000..9499405e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1630399009307_C志审计服.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1631003052258.png b/apps/web-test/public/xbyt/AUTO_1631003052258.png
new file mode 100644
index 00000000..931e3ab9
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1631003052258.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1631003052258_C工程造价.png b/apps/web-test/public/xbyt/AUTO_1631003052258_C工程造价.png
new file mode 100644
index 00000000..65c2b954
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1631003052258_C工程造价.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1631269202083.png b/apps/web-test/public/xbyt/AUTO_1631269202083.png
new file mode 100644
index 00000000..8eb9bb77
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1631269202083.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1631269202083_C信息化标准管理系统.png b/apps/web-test/public/xbyt/AUTO_1631269202083_C信息化标准管理系统.png
new file mode 100644
index 00000000..b930293d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1631269202083_C信息化标准管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1634034734031.png b/apps/web-test/public/xbyt/AUTO_1634034734031.png
new file mode 100644
index 00000000..6fda9295
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1634034734031.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1634034734031_C区块目标.png b/apps/web-test/public/xbyt/AUTO_1634034734031_C区块目标.png
new file mode 100644
index 00000000..fc1cce37
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1634034734031_C区块目标.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1634092797607.png b/apps/web-test/public/xbyt/AUTO_1634092797607.png
new file mode 100644
index 00000000..2f935ae5
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1634092797607.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1634092797607_C开发业务平台.png b/apps/web-test/public/xbyt/AUTO_1634092797607_C开发业务平台.png
new file mode 100644
index 00000000..65329f67
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1634092797607_C开发业务平台.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1634205034896.png b/apps/web-test/public/xbyt/AUTO_1634205034896.png
new file mode 100644
index 00000000..a0488cc5
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1634205034896.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1634205034896_C工程决策.png b/apps/web-test/public/xbyt/AUTO_1634205034896_C工程决策.png
new file mode 100644
index 00000000..c323aba9
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1634205034896_C工程决策.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1636014526817.png b/apps/web-test/public/xbyt/AUTO_1636014526817.png
new file mode 100644
index 00000000..79111cdf
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1636014526817.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1636014526817_Csec储量管理.png b/apps/web-test/public/xbyt/AUTO_1636014526817_Csec储量管理.png
new file mode 100644
index 00000000..619b3a03
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1636014526817_Csec储量管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1639123306823.png b/apps/web-test/public/xbyt/AUTO_1639123306823.png
new file mode 100644
index 00000000..342f6503
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1639123306823.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1639123306823_C投资优选.png b/apps/web-test/public/xbyt/AUTO_1639123306823_C投资优选.png
new file mode 100644
index 00000000..d4eb338d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1639123306823_C投资优选.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1639555021078.png b/apps/web-test/public/xbyt/AUTO_1639555021078.png
new file mode 100644
index 00000000..1b4fc528
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1639555021078.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1639555021078_C油藏经营决策支撑系统.png b/apps/web-test/public/xbyt/AUTO_1639555021078_C油藏经营决策支撑系统.png
new file mode 100644
index 00000000..625188b6
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1639555021078_C油藏经营决策支撑系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1640597761259.png b/apps/web-test/public/xbyt/AUTO_1640597761259.png
new file mode 100644
index 00000000..476a579a
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1640597761259.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1640597761259_C两册管理.png b/apps/web-test/public/xbyt/AUTO_1640597761259_C两册管理.png
new file mode 100644
index 00000000..6a40b9d8
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1640597761259_C两册管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645438375823_C b/apps/web-test/public/xbyt/AUTO_1645438375823_C
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/web-test/public/xbyt/AUTO_1645597539550.png b/apps/web-test/public/xbyt/AUTO_1645597539550.png
new file mode 100644
index 00000000..0f24ab1d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645597539550.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645597539550_C开发数据.png b/apps/web-test/public/xbyt/AUTO_1645597539550_C开发数据.png
new file mode 100644
index 00000000..3e569dc8
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645597539550_C开发数据.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598155236.png b/apps/web-test/public/xbyt/AUTO_1645598155236.png
new file mode 100644
index 00000000..1049f2fc
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598155236.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598155236_C新公文.png b/apps/web-test/public/xbyt/AUTO_1645598155236_C新公文.png
new file mode 100644
index 00000000..e910e8b5
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598155236_C新公文.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598261641.png b/apps/web-test/public/xbyt/AUTO_1645598261641.png
new file mode 100644
index 00000000..ae318adf
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598261641.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598261641_C原油生产.png b/apps/web-test/public/xbyt/AUTO_1645598261641_C原油生产.png
new file mode 100644
index 00000000..495a6a96
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598261641_C原油生产.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598347761.png b/apps/web-test/public/xbyt/AUTO_1645598347761.png
new file mode 100644
index 00000000..482b2b05
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598347761.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598347761_C天然气量.png b/apps/web-test/public/xbyt/AUTO_1645598347761_C天然气量.png
new file mode 100644
index 00000000..97d84166
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598347761_C天然气量.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598429026.png b/apps/web-test/public/xbyt/AUTO_1645598429026.png
new file mode 100644
index 00000000..ec682245
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598429026.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598429026_C移动平台.png b/apps/web-test/public/xbyt/AUTO_1645598429026_C移动平台.png
new file mode 100644
index 00000000..6a492630
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598429026_C移动平台.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598631260.png b/apps/web-test/public/xbyt/AUTO_1645598631260.png
new file mode 100644
index 00000000..2101bc03
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598631260.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598631260_C合同管理.png b/apps/web-test/public/xbyt/AUTO_1645598631260_C合同管理.png
new file mode 100644
index 00000000..41905147
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598631260_C合同管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598899300.png b/apps/web-test/public/xbyt/AUTO_1645598899300.png
new file mode 100644
index 00000000..6fea5460
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598899300.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645598899300_C开发曲线.png b/apps/web-test/public/xbyt/AUTO_1645598899300_C开发曲线.png
new file mode 100644
index 00000000..0531c8f7
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645598899300_C开发曲线.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599156154.png b/apps/web-test/public/xbyt/AUTO_1645599156154.png
new file mode 100644
index 00000000..5728a5b5
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599156154.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599156154_C党群管理.png b/apps/web-test/public/xbyt/AUTO_1645599156154_C党群管理.png
new file mode 100644
index 00000000..5cd95ec8
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599156154_C党群管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599366859.png b/apps/web-test/public/xbyt/AUTO_1645599366859.png
new file mode 100644
index 00000000..b3e7f9d6
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599366859.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599366859_C法律管理.png b/apps/web-test/public/xbyt/AUTO_1645599366859_C法律管理.png
new file mode 100644
index 00000000..1dded182
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599366859_C法律管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599467554.png b/apps/web-test/public/xbyt/AUTO_1645599467554.png
new file mode 100644
index 00000000..23d7b601
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599467554.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599467554_C安全管理.png b/apps/web-test/public/xbyt/AUTO_1645599467554_C安全管理.png
new file mode 100644
index 00000000..05a56c90
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599467554_C安全管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599603920.png b/apps/web-test/public/xbyt/AUTO_1645599603920.png
new file mode 100644
index 00000000..336977e7
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599603920.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599603920_C法治合规管理系统.png b/apps/web-test/public/xbyt/AUTO_1645599603920_C法治合规管理系统.png
new file mode 100644
index 00000000..94eba83b
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599603920_C法治合规管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599712492.png b/apps/web-test/public/xbyt/AUTO_1645599712492.png
new file mode 100644
index 00000000..41c9afa8
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599712492.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599712492_C制度管理.png b/apps/web-test/public/xbyt/AUTO_1645599712492_C制度管理.png
new file mode 100644
index 00000000..e1fed9dc
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599712492_C制度管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599804473.png b/apps/web-test/public/xbyt/AUTO_1645599804473.png
new file mode 100644
index 00000000..6dd55e70
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599804473.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599804473_C标准系统.png b/apps/web-test/public/xbyt/AUTO_1645599804473_C标准系统.png
new file mode 100644
index 00000000..d75a4312
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599804473_C标准系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599941581.png b/apps/web-test/public/xbyt/AUTO_1645599941581.png
new file mode 100644
index 00000000..aadbf161
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599941581.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645599941581_C网络学院.png b/apps/web-test/public/xbyt/AUTO_1645599941581_C网络学院.png
new file mode 100644
index 00000000..01767ba3
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645599941581_C网络学院.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645600400416.png b/apps/web-test/public/xbyt/AUTO_1645600400416.png
new file mode 100644
index 00000000..0ffd066d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645600400416.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645600400416_C石化商旅.png b/apps/web-test/public/xbyt/AUTO_1645600400416_C石化商旅.png
new file mode 100644
index 00000000..c773e087
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645600400416_C石化商旅.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645600945423.png b/apps/web-test/public/xbyt/AUTO_1645600945423.png
new file mode 100644
index 00000000..f7b72658
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645600945423.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645600945423_C新井跟踪.png b/apps/web-test/public/xbyt/AUTO_1645600945423_C新井跟踪.png
new file mode 100644
index 00000000..4af6bb9b
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645600945423_C新井跟踪.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645688629273.png b/apps/web-test/public/xbyt/AUTO_1645688629273.png
new file mode 100644
index 00000000..3c9a748e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645688629273.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645688629273_C生产重点.png b/apps/web-test/public/xbyt/AUTO_1645688629273_C生产重点.png
new file mode 100644
index 00000000..81d45624
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645688629273_C生产重点.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645756565135.png b/apps/web-test/public/xbyt/AUTO_1645756565135.png
new file mode 100644
index 00000000..68bf337e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645756565135.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1645756565135_C财务经营.png b/apps/web-test/public/xbyt/AUTO_1645756565135_C财务经营.png
new file mode 100644
index 00000000..aafcd662
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1645756565135_C财务经营.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1647509677160.png b/apps/web-test/public/xbyt/AUTO_1647509677160.png
new file mode 100644
index 00000000..150c6702
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1647509677160.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1647509677160_C科技管理平台.png b/apps/web-test/public/xbyt/AUTO_1647509677160_C科技管理平台.png
new file mode 100644
index 00000000..beb1661f
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1647509677160_C科技管理平台.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1647510707318.png b/apps/web-test/public/xbyt/AUTO_1647510707318.png
new file mode 100644
index 00000000..e1eb34fd
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1647510707318.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1647510707318_C钻井监督日报.png b/apps/web-test/public/xbyt/AUTO_1647510707318_C钻井监督日报.png
new file mode 100644
index 00000000..df4f3c09
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1647510707318_C钻井监督日报.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1647511070885.png b/apps/web-test/public/xbyt/AUTO_1647511070885.png
new file mode 100644
index 00000000..acf08c01
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1647511070885.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1647511070885_C测试生产日报.png b/apps/web-test/public/xbyt/AUTO_1647511070885_C测试生产日报.png
new file mode 100644
index 00000000..474255ac
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1647511070885_C测试生产日报.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1648454882130.png b/apps/web-test/public/xbyt/AUTO_1648454882130.png
new file mode 100644
index 00000000..887ff124
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1648454882130.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1648454882130_C实验分析.png b/apps/web-test/public/xbyt/AUTO_1648454882130_C实验分析.png
new file mode 100644
index 00000000..659d0281
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1648454882130_C实验分析.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1649408616960.png b/apps/web-test/public/xbyt/AUTO_1649408616960.png
new file mode 100644
index 00000000..576a5ede
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1649408616960.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1649408616960_C物装BW系统.png b/apps/web-test/public/xbyt/AUTO_1649408616960_C物装BW系统.png
new file mode 100644
index 00000000..7e991d10
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1649408616960_C物装BW系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1649411112471.png b/apps/web-test/public/xbyt/AUTO_1649411112471.png
new file mode 100644
index 00000000..1db581d9
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1649411112471.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1649411112471_C物资电子商务.png b/apps/web-test/public/xbyt/AUTO_1649411112471_C物资电子商务.png
new file mode 100644
index 00000000..3a894b69
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1649411112471_C物资电子商务.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1649411513969.png b/apps/web-test/public/xbyt/AUTO_1649411513969.png
new file mode 100644
index 00000000..f4d9e628
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1649411513969.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1649411513969_C易派客.png b/apps/web-test/public/xbyt/AUTO_1649411513969_C易派客.png
new file mode 100644
index 00000000..00c17c70
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1649411513969_C易派客.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1649411560473.png b/apps/web-test/public/xbyt/AUTO_1649411560473.png
new file mode 100644
index 00000000..a98cc96d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1649411560473.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1649411560473_C物资供应协同.png b/apps/web-test/public/xbyt/AUTO_1649411560473_C物资供应协同.png
new file mode 100644
index 00000000..0eef3080
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1649411560473_C物资供应协同.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1649411776285.png b/apps/web-test/public/xbyt/AUTO_1649411776285.png
new file mode 100644
index 00000000..501cf96a
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1649411776285.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1649411776285_C智能化管线.png b/apps/web-test/public/xbyt/AUTO_1649411776285_C智能化管线.png
new file mode 100644
index 00000000..03a2332c
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1649411776285_C智能化管线.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1662610017418.png b/apps/web-test/public/xbyt/AUTO_1662610017418.png
new file mode 100644
index 00000000..7a89bf2f
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1662610017418.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1662610017418_C完井快报.png b/apps/web-test/public/xbyt/AUTO_1662610017418_C完井快报.png
new file mode 100644
index 00000000..5d9d73ef
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1662610017418_C完井快报.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1662610117349.png b/apps/web-test/public/xbyt/AUTO_1662610117349.png
new file mode 100644
index 00000000..be867d0e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1662610117349.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1662610117349_C完井测试.png b/apps/web-test/public/xbyt/AUTO_1662610117349_C完井测试.png
new file mode 100644
index 00000000..5d9d73ef
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1662610117349_C完井测试.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666581710706.png b/apps/web-test/public/xbyt/AUTO_1666581710706.png
new file mode 100644
index 00000000..b91ba7b3
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666581710706.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666581710706_C注气三次采油系统.png b/apps/web-test/public/xbyt/AUTO_1666581710706_C注气三次采油系统.png
new file mode 100644
index 00000000..4720f422
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666581710706_C注气三次采油系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666581786818.png b/apps/web-test/public/xbyt/AUTO_1666581786818.png
new file mode 100644
index 00000000..0ccb215b
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666581786818.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666581786818_C二厂数据决策系统.png b/apps/web-test/public/xbyt/AUTO_1666581786818_C二厂数据决策系统.png
new file mode 100644
index 00000000..00b33692
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666581786818_C二厂数据决策系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666581893053.png b/apps/web-test/public/xbyt/AUTO_1666581893053.png
new file mode 100644
index 00000000..bf089dc8
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666581893053.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666581893053_C石油工程方案管理系统.png b/apps/web-test/public/xbyt/AUTO_1666581893053_C石油工程方案管理系统.png
new file mode 100644
index 00000000..26ede3df
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666581893053_C石油工程方案管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582018742.png b/apps/web-test/public/xbyt/AUTO_1666582018742.png
new file mode 100644
index 00000000..45237719
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582018742.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582018742_C井控装备图库系统.png b/apps/web-test/public/xbyt/AUTO_1666582018742_C井控装备图库系统.png
new file mode 100644
index 00000000..7a4a06b5
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582018742_C井控装备图库系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582152494.png b/apps/web-test/public/xbyt/AUTO_1666582152494.png
new file mode 100644
index 00000000..07e66431
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582152494.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582152494_C监督生产经营平台.png b/apps/web-test/public/xbyt/AUTO_1666582152494_C监督生产经营平台.png
new file mode 100644
index 00000000..aad0a71e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582152494_C监督生产经营平台.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582214091.png b/apps/web-test/public/xbyt/AUTO_1666582214091.png
new file mode 100644
index 00000000..0eb12cb5
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582214091.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582214091_C地面工程.png b/apps/web-test/public/xbyt/AUTO_1666582214091_C地面工程.png
new file mode 100644
index 00000000..f5d4b737
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582214091_C地面工程.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582329658.png b/apps/web-test/public/xbyt/AUTO_1666582329658.png
new file mode 100644
index 00000000..4bae61de
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582329658.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582329658_C科技研发管理系统.png b/apps/web-test/public/xbyt/AUTO_1666582329658_C科技研发管理系统.png
new file mode 100644
index 00000000..8bd6a1ad
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582329658_C科技研发管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582540377.png b/apps/web-test/public/xbyt/AUTO_1666582540377.png
new file mode 100644
index 00000000..e574ee3c
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582540377.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582540377_C油气运销智能管理系统.png b/apps/web-test/public/xbyt/AUTO_1666582540377_C油气运销智能管理系统.png
new file mode 100644
index 00000000..3fab6642
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582540377_C油气运销智能管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582779648.png b/apps/web-test/public/xbyt/AUTO_1666582779648.png
new file mode 100644
index 00000000..7aa172c4
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582779648.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582779648_C倒液运输管理系统.png b/apps/web-test/public/xbyt/AUTO_1666582779648_C倒液运输管理系统.png
new file mode 100644
index 00000000..78b5eaa0
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582779648_C倒液运输管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582846531.png b/apps/web-test/public/xbyt/AUTO_1666582846531.png
new file mode 100644
index 00000000..88e10adb
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582846531.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582846531_C供水系统.png b/apps/web-test/public/xbyt/AUTO_1666582846531_C供水系统.png
new file mode 100644
index 00000000..5809ec2a
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582846531_C供水系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582926626.png b/apps/web-test/public/xbyt/AUTO_1666582926626.png
new file mode 100644
index 00000000..7a482c7e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582926626.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666582926626_C能源管控一体化系统.png b/apps/web-test/public/xbyt/AUTO_1666582926626_C能源管控一体化系统.png
new file mode 100644
index 00000000..a118fb5e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666582926626_C能源管控一体化系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583039406.png b/apps/web-test/public/xbyt/AUTO_1666583039406.png
new file mode 100644
index 00000000..b12ec91f
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583039406.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583039406_C智能应急指挥系统.png b/apps/web-test/public/xbyt/AUTO_1666583039406_C智能应急指挥系统.png
new file mode 100644
index 00000000..2f5ea9ff
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583039406_C智能应急指挥系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583226002.png b/apps/web-test/public/xbyt/AUTO_1666583226002.png
new file mode 100644
index 00000000..cebe322f
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583226002.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583226002_C-六精-管理共享平台.png b/apps/web-test/public/xbyt/AUTO_1666583226002_C-六精-管理共享平台.png
new file mode 100644
index 00000000..8f10df32
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583226002_C-六精-管理共享平台.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583364982.png b/apps/web-test/public/xbyt/AUTO_1666583364982.png
new file mode 100644
index 00000000..fc607a19
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583364982.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583364982_C取证培训系统.png b/apps/web-test/public/xbyt/AUTO_1666583364982_C取证培训系统.png
new file mode 100644
index 00000000..16d7692a
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583364982_C取证培训系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583498511.png b/apps/web-test/public/xbyt/AUTO_1666583498511.png
new file mode 100644
index 00000000..bed09956
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583498511.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583498511_C一厂考勤管理系统.png b/apps/web-test/public/xbyt/AUTO_1666583498511_C一厂考勤管理系统.png
new file mode 100644
index 00000000..ebb0868c
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583498511_C一厂考勤管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583740187.png b/apps/web-test/public/xbyt/AUTO_1666583740187.png
new file mode 100644
index 00000000..3d700477
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583740187.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583740187_C离退休职工信息管理系统.png b/apps/web-test/public/xbyt/AUTO_1666583740187_C离退休职工信息管理系统.png
new file mode 100644
index 00000000..1e4de3bb
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583740187_C离退休职工信息管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583880545.png b/apps/web-test/public/xbyt/AUTO_1666583880545.png
new file mode 100644
index 00000000..ddc82d5a
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583880545.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583880545_C一厂仓储管理系统.png b/apps/web-test/public/xbyt/AUTO_1666583880545_C一厂仓储管理系统.png
new file mode 100644
index 00000000..c234d490
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583880545_C一厂仓储管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583928544.png b/apps/web-test/public/xbyt/AUTO_1666583928544.png
new file mode 100644
index 00000000..413c1b07
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583928544.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583928544_C采油（气）井口管理系统.png b/apps/web-test/public/xbyt/AUTO_1666583928544_C采油（气）井口管理系统.png
new file mode 100644
index 00000000..25dd8c55
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583928544_C采油（气）井口管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583973186.png b/apps/web-test/public/xbyt/AUTO_1666583973186.png
new file mode 100644
index 00000000..a2219dd7
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583973186.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666583973186_C西北油田管杆管理系统.png b/apps/web-test/public/xbyt/AUTO_1666583973186_C西北油田管杆管理系统.png
new file mode 100644
index 00000000..073db186
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666583973186_C西北油田管杆管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666584180379.png b/apps/web-test/public/xbyt/AUTO_1666584180379.png
new file mode 100644
index 00000000..956551c6
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666584180379.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666584180379_C数字档案馆系统.png b/apps/web-test/public/xbyt/AUTO_1666584180379_C数字档案馆系统.png
new file mode 100644
index 00000000..462aec5c
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666584180379_C数字档案馆系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666584268653.png b/apps/web-test/public/xbyt/AUTO_1666584268653.png
new file mode 100644
index 00000000..bda28e0b
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666584268653.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1666584268653_C研究院云平台.png b/apps/web-test/public/xbyt/AUTO_1666584268653_C研究院云平台.png
new file mode 100644
index 00000000..838fac5d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1666584268653_C研究院云平台.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1670838488350.jpg b/apps/web-test/public/xbyt/AUTO_1670838488350.jpg
new file mode 100644
index 00000000..bd3b29ce
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1670838488350.jpg differ
diff --git a/apps/web-test/public/xbyt/AUTO_1670838488350_C中石化电子招标交易网.jpg b/apps/web-test/public/xbyt/AUTO_1670838488350_C中石化电子招标交易网.jpg
new file mode 100644
index 00000000..a48d1e68
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1670838488350_C中石化电子招标交易网.jpg differ
diff --git a/apps/web-test/public/xbyt/AUTO_1672994044904.png b/apps/web-test/public/xbyt/AUTO_1672994044904.png
new file mode 100644
index 00000000..a483599a
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1672994044904.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1672994044904_C财务运营运行分析系统.png b/apps/web-test/public/xbyt/AUTO_1672994044904_C财务运营运行分析系统.png
new file mode 100644
index 00000000..2701a0b3
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1672994044904_C财务运营运行分析系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1675824694006.png b/apps/web-test/public/xbyt/AUTO_1675824694006.png
new file mode 100644
index 00000000..dcadf32d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1675824694006.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1675824694006_C方案管理系统.png b/apps/web-test/public/xbyt/AUTO_1675824694006_C方案管理系统.png
new file mode 100644
index 00000000..c54566f0
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1675824694006_C方案管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1675824822492.png b/apps/web-test/public/xbyt/AUTO_1675824822492.png
new file mode 100644
index 00000000..717a2a51
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1675824822492.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1675824822492_C工程院价值积分.png b/apps/web-test/public/xbyt/AUTO_1675824822492_C工程院价值积分.png
new file mode 100644
index 00000000..a2f514e6
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1675824822492_C工程院价值积分.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1675824877492.png b/apps/web-test/public/xbyt/AUTO_1675824877492.png
new file mode 100644
index 00000000..d1154c78
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1675824877492.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1675824877492_C工程院管理系统.png b/apps/web-test/public/xbyt/AUTO_1675824877492_C工程院管理系统.png
new file mode 100644
index 00000000..78566c39
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1675824877492_C工程院管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1675824988429.png b/apps/web-test/public/xbyt/AUTO_1675824988429.png
new file mode 100644
index 00000000..84101531
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1675824988429.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1675824988429_C科研项目管理.png b/apps/web-test/public/xbyt/AUTO_1675824988429_C科研项目管理.png
new file mode 100644
index 00000000..681e0504
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1675824988429_C科研项目管理.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1677663885789.png b/apps/web-test/public/xbyt/AUTO_1677663885789.png
new file mode 100644
index 00000000..5df635a0
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1677663885789.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1677663885789_C总部督办系统.png b/apps/web-test/public/xbyt/AUTO_1677663885789_C总部督办系统.png
new file mode 100644
index 00000000..f7d2661f
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1677663885789_C总部督办系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1694663735085.png b/apps/web-test/public/xbyt/AUTO_1694663735085.png
new file mode 100644
index 00000000..60551f59
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1694663735085.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1694663735085_C中石化地质资料管理系统.png b/apps/web-test/public/xbyt/AUTO_1694663735085_C中石化地质资料管理系统.png
new file mode 100644
index 00000000..040e1af8
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1694663735085_C中石化地质资料管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1694663867828.png b/apps/web-test/public/xbyt/AUTO_1694663867828.png
new file mode 100644
index 00000000..6335d51e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1694663867828.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1694663867828_C中石化档案管理系统.png b/apps/web-test/public/xbyt/AUTO_1694663867828_C中石化档案管理系统.png
new file mode 100644
index 00000000..681e0504
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1694663867828_C中石化档案管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1695377149839.png b/apps/web-test/public/xbyt/AUTO_1695377149839.png
new file mode 100644
index 00000000..2c308049
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1695377149839.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1695377149839_C员工自助.png b/apps/web-test/public/xbyt/AUTO_1695377149839_C员工自助.png
new file mode 100644
index 00000000..5818d243
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1695377149839_C员工自助.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1697681999227.png b/apps/web-test/public/xbyt/AUTO_1697681999227.png
new file mode 100644
index 00000000..2cfc234b
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1697681999227.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1697681999227_C中石化法治合规管理系统.png b/apps/web-test/public/xbyt/AUTO_1697681999227_C中石化法治合规管理系统.png
new file mode 100644
index 00000000..28b09f7e
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1697681999227_C中石化法治合规管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1698372021846.png b/apps/web-test/public/xbyt/AUTO_1698372021846.png
new file mode 100644
index 00000000..6a06617d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1698372021846.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1698372021846_C开发工具箱.png b/apps/web-test/public/xbyt/AUTO_1698372021846_C开发工具箱.png
new file mode 100644
index 00000000..c66f4e37
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1698372021846_C开发工具箱.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1703582374111.png b/apps/web-test/public/xbyt/AUTO_1703582374111.png
new file mode 100644
index 00000000..fa4f4d16
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1703582374111.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1703582374111_C标准化系统.png b/apps/web-test/public/xbyt/AUTO_1703582374111_C标准化系统.png
new file mode 100644
index 00000000..cec1b191
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1703582374111_C标准化系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1704682089834.png b/apps/web-test/public/xbyt/AUTO_1704682089834.png
new file mode 100644
index 00000000..2ca7c480
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1704682089834.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1704682089834_C后勤管理系统.png b/apps/web-test/public/xbyt/AUTO_1704682089834_C后勤管理系统.png
new file mode 100644
index 00000000..9b95b684
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1704682089834_C后勤管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1704873061517.png b/apps/web-test/public/xbyt/AUTO_1704873061517.png
new file mode 100644
index 00000000..575f845f
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1704873061517.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1704873061517_C中石化会议管理系统.png b/apps/web-test/public/xbyt/AUTO_1704873061517_C中石化会议管理系统.png
new file mode 100644
index 00000000..a9baab81
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1704873061517_C中石化会议管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1704963304068.png b/apps/web-test/public/xbyt/AUTO_1704963304068.png
new file mode 100644
index 00000000..2e03717b
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1704963304068.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1704963304068_C中石化股权管理系统.png b/apps/web-test/public/xbyt/AUTO_1704963304068_C中石化股权管理系统.png
new file mode 100644
index 00000000..3ae486d1
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1704963304068_C中石化股权管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1710824498180.png b/apps/web-test/public/xbyt/AUTO_1710824498180.png
new file mode 100644
index 00000000..11048705
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1710824498180.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1710824498180_C信用风险管理系统.png b/apps/web-test/public/xbyt/AUTO_1710824498180_C信用风险管理系统.png
new file mode 100644
index 00000000..c5792c9a
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1710824498180_C信用风险管理系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1710824885325.png b/apps/web-test/public/xbyt/AUTO_1710824885325.png
new file mode 100644
index 00000000..fd7c8b38
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1710824885325.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1710824885325_CSmartBI报表工具.png b/apps/web-test/public/xbyt/AUTO_1710824885325_CSmartBI报表工具.png
new file mode 100644
index 00000000..98169c9d
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1710824885325_CSmartBI报表工具.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1711525669182.png b/apps/web-test/public/xbyt/AUTO_1711525669182.png
new file mode 100644
index 00000000..14e25f22
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1711525669182.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1711525669182_C纪检监督应用系统.png b/apps/web-test/public/xbyt/AUTO_1711525669182_C纪检监督应用系统.png
new file mode 100644
index 00000000..886b9856
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1711525669182_C纪检监督应用系统.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1722308567948.png b/apps/web-test/public/xbyt/AUTO_1722308567948.png
new file mode 100644
index 00000000..ba823265
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1722308567948.png differ
diff --git a/apps/web-test/public/xbyt/AUTO_1722308567948_C投资管理.png b/apps/web-test/public/xbyt/AUTO_1722308567948_C投资管理.png
new file mode 100644
index 00000000..0c3fffd9
Binary files /dev/null and b/apps/web-test/public/xbyt/AUTO_1722308567948_C投资管理.png differ
diff --git a/apps/web-test/public/xbyt/WORKBENCH_AUDIT.png b/apps/web-test/public/xbyt/WORKBENCH_AUDIT.png
new file mode 100644
index 00000000..31bb3172
Binary files /dev/null and b/apps/web-test/public/xbyt/WORKBENCH_AUDIT.png differ
diff --git a/apps/web-test/public/xbyt/WORKBENCH_AUDIT_C磁贴审核.png b/apps/web-test/public/xbyt/WORKBENCH_AUDIT_C磁贴审核.png
new file mode 100644
index 00000000..7516078d
Binary files /dev/null and b/apps/web-test/public/xbyt/WORKBENCH_AUDIT_C磁贴审核.png differ
diff --git a/apps/web-test/public/xbyt/WORKBENCH_BUSINESS.png b/apps/web-test/public/xbyt/WORKBENCH_BUSINESS.png
new file mode 100644
index 00000000..a718d390
Binary files /dev/null and b/apps/web-test/public/xbyt/WORKBENCH_BUSINESS.png differ
diff --git a/apps/web-test/public/xbyt/WORKBENCH_BUSINESS_C业务域.png b/apps/web-test/public/xbyt/WORKBENCH_BUSINESS_C业务域.png
new file mode 100644
index 00000000..e3b0105f
Binary files /dev/null and b/apps/web-test/public/xbyt/WORKBENCH_BUSINESS_C业务域.png differ
diff --git a/apps/web-test/public/xbyt/WORKBENCH_MANAGER.png b/apps/web-test/public/xbyt/WORKBENCH_MANAGER.png
new file mode 100644
index 00000000..a79384f7
Binary files /dev/null and b/apps/web-test/public/xbyt/WORKBENCH_MANAGER.png differ
diff --git a/apps/web-test/public/xbyt/WORKBENCH_MANAGER_C磁贴管理.png b/apps/web-test/public/xbyt/WORKBENCH_MANAGER_C磁贴管理.png
new file mode 100644
index 00000000..3534637d
Binary files /dev/null and b/apps/web-test/public/xbyt/WORKBENCH_MANAGER_C磁贴管理.png differ
diff --git a/apps/web-test/public/xbyt/WORKBENCH_USER_AUTH.png b/apps/web-test/public/xbyt/WORKBENCH_USER_AUTH.png
new file mode 100644
index 00000000..ed2b2d7e
Binary files /dev/null and b/apps/web-test/public/xbyt/WORKBENCH_USER_AUTH.png differ
diff --git a/apps/web-test/public/xbyt/WORKBENCH_USER_AUTH_C用户授权.png b/apps/web-test/public/xbyt/WORKBENCH_USER_AUTH_C用户授权.png
new file mode 100644
index 00000000..3e0a76f1
Binary files /dev/null and b/apps/web-test/public/xbyt/WORKBENCH_USER_AUTH_C用户授权.png differ
diff --git a/apps/web-test/public/xbyt/WORKBENCH_USER_TMPL.png b/apps/web-test/public/xbyt/WORKBENCH_USER_TMPL.png
new file mode 100644
index 00000000..1ee3fad6
Binary files /dev/null and b/apps/web-test/public/xbyt/WORKBENCH_USER_TMPL.png differ
diff --git a/apps/web-test/public/xbyt/WORKBENCH_USER_TMPL_C用户模板.png b/apps/web-test/public/xbyt/WORKBENCH_USER_TMPL_C用户模板.png
new file mode 100644
index 00000000..10ab9894
Binary files /dev/null and b/apps/web-test/public/xbyt/WORKBENCH_USER_TMPL_C用户模板.png differ
diff --git a/apps/web-test/src/bootstrap.ts b/apps/web-test/src/bootstrap.ts
index e76befc9..454f39a8 100644
--- a/apps/web-test/src/bootstrap.ts
+++ b/apps/web-test/src/bootstrap.ts
@@ -9,6 +9,8 @@ import VueGridLayout from 'vue3-grid-layout-next';
 
 import { setupI18n } from '#/locales';
 
+import VxeTable from 'vxe-table'
+
 import App from './app.vue';
 import { router } from './router';
 
@@ -29,6 +31,8 @@ async function bootstrap(namespace: string) {
 
   app.use(VueGridLayout);
 
+  app.use(VxeTable);
+
   app.mount('#app');
 }
 
diff --git a/apps/web-test/src/layouts/basic.vue b/apps/web-test/src/layouts/basic.vue
index 3c302634..0bfb38e4 100644
--- a/apps/web-test/src/layouts/basic.vue
+++ b/apps/web-test/src/layouts/basic.vue
@@ -2,16 +2,18 @@
 import type { NotificationItem } from '@vben/layouts';
 
 import { computed, ref } from 'vue';
+import { UserSwitchOutlined,HeartOutlined } from '@ant-design/icons-vue';
+
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
 import {
-  BasicLayout,
   LockScreen,
-  Notification,
   UserDropdown,
 } from '@vben/layouts';
+import { Notification } from './notification';
+import { BasicLayout } from '#/layouts/basic/index'
 import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
@@ -20,6 +22,9 @@ import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
 import LoginForm from '#/views/_core/authentication/login.vue';
 
+import { UserInfo,UserSwitch,UserLike } from '#/layouts/user';
+
+
 const notifications = ref<NotificationItem[]>([
   {
     avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
@@ -61,30 +66,24 @@ const showDot = computed(() =>
 const menus = computed(() => [
   {
     handler: () => {
-      openWindow(VBEN_DOC_URL, {
-        target: '_blank',
-      });
+      infoVisible.value = true
     },
     icon: BookOpenText,
-    text: $t('widgets.document'),
+    text: '个人信息',
   },
   {
     handler: () => {
-      openWindow(VBEN_GITHUB_URL, {
-        target: '_blank',
-      });
+      switchVisible.value = true
     },
-    icon: MdiGithub,
-    text: 'GitHub',
+    icon: UserSwitchOutlined,
+    text: '切换租户',
   },
   {
     handler: () => {
-      openWindow(`${VBEN_GITHUB_URL}/issues`, {
-        target: '_blank',
-      });
+      likeVisible.value = true
     },
-    icon: CircleHelp,
-    text: $t('widgets.qa'),
+    icon: HeartOutlined,
+    text: '个人偏好',
   },
 ]);
 
@@ -103,33 +102,25 @@ function handleNoticeClear() {
 function handleMakeAll() {
   notifications.value.forEach((item) => (item.isRead = true));
 }
+
+let infoVisible = ref(false)
+let switchVisible = ref(false)
+let likeVisible = ref(false)
 </script>
 
 <template>
   <BasicLayout @clear-preferences-and-logout="handleLogout">
+
     <template #user-dropdown>
-      <UserDropdown
-        :avatar
-        :menus
-        :text="userStore.userInfo?.realName"
-        description="ann.vben@gmail.com"
-        tag-text="Pro"
-        @logout="handleLogout"
-      />
+      <UserDropdown :avatar :menus :text="userStore.userInfo?.realName"
+        @logout="handleLogout" />
     </template>
     <template #notification>
-      <Notification
-        :dot="showDot"
-        :notifications="notifications"
-        @clear="handleNoticeClear"
-        @make-all="handleMakeAll"
-      />
+      <Notification :dot="showDot" :notifications="notifications" @clear="handleNoticeClear" :icColor="'#fff'"
+        @make-all="handleMakeAll" />
     </template>
     <template #extra>
-      <AuthenticationLoginExpiredModal
-        v-model:open="accessStore.loginExpired"
-        :avatar
-      >
+      <AuthenticationLoginExpiredModal v-model:open="accessStore.loginExpired" :avatar>
         <LoginForm />
       </AuthenticationLoginExpiredModal>
     </template>
@@ -137,4 +128,8 @@ function handleMakeAll() {
       <LockScreen :avatar @to-login="handleLogout" />
     </template>
   </BasicLayout>
+
+  <UserInfo v-model:visible="infoVisible"></UserInfo>
+  <UserSwitch v-model:visible="switchVisible"></UserSwitch>
+  <UserLike v-model:visible="likeVisible"></UserLike>
 </template>
diff --git a/apps/web-test/src/layouts/basic/content/content-spinner.vue b/apps/web-test/src/layouts/basic/content/content-spinner.vue
new file mode 100644
index 00000000..e97e4b6c
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/content/content-spinner.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { VbenSpinner } from '@vben-core/shadcn-ui';
+
+import { useContentSpinner } from './use-content-spinner';
+
+defineOptions({ name: 'LayoutContentSpinner' });
+
+const { spinning } = useContentSpinner();
+</script>
+<template>
+  <VbenSpinner :spinning="spinning" />
+</template>
diff --git a/apps/web-test/src/layouts/basic/content/content.vue b/apps/web-test/src/layouts/basic/content/content.vue
new file mode 100644
index 00000000..c81b8ab6
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/content/content.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type {
+  RouteLocationNormalizedLoaded,
+  RouteLocationNormalizedLoadedGeneric,
+} from 'vue-router';
+
+import { type VNode } from 'vue';
+import { RouterView } from 'vue-router';
+
+import { preferences, usePreferences } from '@vben/preferences';
+import { storeToRefs, useTabbarStore } from '@vben/stores';
+
+import { IFrameRouterView } from '@vben/layouts';
+
+defineOptions({ name: 'LayoutContent' });
+
+const tabbarStore = useTabbarStore();
+const { keepAlive } = usePreferences();
+
+const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
+  storeToRefs(tabbarStore);
+
+// 页面切换动画
+function getTransitionName(_route: RouteLocationNormalizedLoaded) {
+  // 如果偏好设置未设置，则不使用动画
+  const { tabbar, transition } = preferences;
+  const transitionName = transition.name;
+  if (!transitionName || !transition.enable) {
+    return;
+  }
+
+  // 标签页未启用或者未开启缓存，则使用全局配置动画
+  if (!tabbar.enable || !keepAlive) {
+    return transitionName;
+  }
+
+  // 如果页面已经加载过，则不使用动画
+  // if (route.meta.loaded) {
+  //   return;
+  // }
+  // 已经打开且已经加载过的页面不使用动画
+  // const inTabs = getCachedTabs.value.includes(route.name as string);
+
+  // return inTabs && route.meta.loaded ? undefined : transitionName;
+  return transitionName;
+}
+
+/**
+ * 转换组件，自动添加 name
+ * @param component
+ */
+function transformComponent(
+  component: VNode,
+  route: RouteLocationNormalizedLoadedGeneric,
+) {
+  const routeName = route.name as string;
+  // 如果组件没有 name，则直接返回
+  if (!routeName) {
+    return component;
+  }
+
+  const componentName = (component.type as any).name;
+
+  // 已经设置过 name，则直接返回
+  if (componentName) {
+    return component;
+  }
+
+  // componentName 与 routeName 一致，则直接返回
+  if (componentName === routeName) {
+    return component;
+  }
+
+  // 设置 name
+  component.type ||= {};
+  (component.type as any).name = routeName;
+
+  return component;
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <IFrameRouterView />
+    <RouterView v-slot="{ Component, route }">
+      <Transition :name="getTransitionName(route)" appear mode="out-in">
+        <KeepAlive
+          v-if="keepAlive"
+          :exclude="getExcludeCachedTabs"
+          :include="getCachedTabs"
+        >
+          <component
+            :is="transformComponent(Component, route)"
+            v-if="renderRouteView"
+            v-show="!route.meta.iframeSrc"
+            :key="route.fullPath"
+          />
+        </KeepAlive>
+        <component
+          :is="Component"
+          v-else-if="renderRouteView"
+          :key="route.fullPath"
+        />
+      </Transition>
+    </RouterView>
+  </div>
+</template>
diff --git a/apps/web-test/src/layouts/basic/content/index.ts b/apps/web-test/src/layouts/basic/content/index.ts
new file mode 100644
index 00000000..500cbcca
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/content/index.ts
@@ -0,0 +1,2 @@
+export { default as LayoutContent } from './content.vue';
+export { default as LayoutContentSpinner } from './content-spinner.vue';
diff --git a/apps/web-test/src/layouts/basic/content/use-content-spinner.ts b/apps/web-test/src/layouts/basic/content/use-content-spinner.ts
new file mode 100644
index 00000000..dfe3c536
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/content/use-content-spinner.ts
@@ -0,0 +1,50 @@
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { preferences } from '@vben/preferences';
+
+function useContentSpinner() {
+  const spinning = ref(false);
+  const startTime = ref(0);
+  const router = useRouter();
+  const minShowTime = 500; // 最小显示时间
+  const enableLoading = computed(() => preferences.transition.loading);
+
+  // 结束加载动画
+  const onEnd = () => {
+    if (!enableLoading.value) {
+      return;
+    }
+    const processTime = performance.now() - startTime.value;
+    if (processTime < minShowTime) {
+      setTimeout(() => {
+        spinning.value = false;
+      }, minShowTime - processTime);
+    } else {
+      spinning.value = false;
+    }
+  };
+
+  // 路由前置守卫
+  router.beforeEach((to) => {
+    if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
+      return true;
+    }
+    startTime.value = performance.now();
+    spinning.value = true;
+    return true;
+  });
+
+  // 路由后置守卫
+  router.afterEach((to) => {
+    if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
+      return true;
+    }
+    onEnd();
+    return true;
+  });
+
+  return { spinning };
+}
+
+export { useContentSpinner };
diff --git a/apps/web-test/src/layouts/basic/copyright/copyright.vue b/apps/web-test/src/layouts/basic/copyright/copyright.vue
new file mode 100644
index 00000000..8202076a
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/copyright/copyright.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+interface Props {
+  companyName: string;
+  companySiteLink?: string;
+  date: string;
+  icp?: string;
+  icpLink?: string;
+}
+
+defineOptions({
+  name: 'Copyright',
+});
+
+withDefaults(defineProps<Props>(), {
+  companyName: 'Vben Admin',
+  companySiteLink: '',
+  date: '2024',
+  icp: '',
+  icpLink: '',
+});
+</script>
+
+<template>
+  <div class="text-md flex-center">
+    <!-- ICP Link -->
+    <a
+      v-if="icp"
+      :href="icpLink || 'javascript:void(0)'"
+      class="hover:text-primary-hover mx-1"
+      target="_blank"
+    >
+      {{ icp }}
+    </a>
+
+    <!-- Copyright Text -->
+    Copyright © {{ date }}
+
+    <!-- Company Link -->
+    <a
+      v-if="companyName"
+      :href="companySiteLink || 'javascript:void(0)'"
+      class="hover:text-primary-hover mx-1"
+      target="_blank"
+    >
+      {{ companyName }}
+    </a>
+  </div>
+</template>
diff --git a/apps/web-test/src/layouts/basic/copyright/index.ts b/apps/web-test/src/layouts/basic/copyright/index.ts
new file mode 100644
index 00000000..e0620daa
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/copyright/index.ts
@@ -0,0 +1 @@
+export { default as Copyright } from './copyright.vue';
diff --git a/apps/web-test/src/layouts/basic/footer/footer.vue b/apps/web-test/src/layouts/basic/footer/footer.vue
new file mode 100644
index 00000000..6fc256d7
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/footer/footer.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'LayoutFooter',
+});
+</script>
+
+<template>
+  <div class="flex-center text-muted-foreground relative h-full w-full text-xs">
+    <slot></slot>
+  </div>
+</template>
diff --git a/apps/web-test/src/layouts/basic/footer/index.ts b/apps/web-test/src/layouts/basic/footer/index.ts
new file mode 100644
index 00000000..7e149a25
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/footer/index.ts
@@ -0,0 +1 @@
+export { default as LayoutFooter } from './footer.vue';
diff --git a/apps/web-test/src/layouts/basic/header/header.vue b/apps/web-test/src/layouts/basic/header/header.vue
new file mode 100644
index 00000000..4923d4dd
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/header/header.vue
@@ -0,0 +1,279 @@
+<script lang="ts" setup>
+import { computed, useSlots, ref } from 'vue';
+
+import { preferences, usePreferences, updatePreferences } from '@vben/preferences';
+import { useAccessStore } from '@vben/stores';
+import VbenFullScreen from './../../full-screen/full-screen.vue';
+
+
+import {
+  LanguageToggle,
+  PreferencesButton,
+  ThemeToggle,
+} from '@vben/layouts';
+
+interface Props {
+  /**
+   * Logo 主题
+   */
+  theme?: string;
+}
+
+defineOptions({
+  name: 'LayoutHeader',
+});
+
+withDefaults(defineProps<Props>(), {
+  theme: 'light',
+});
+
+const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
+
+const accessStore = useAccessStore();
+const { globalSearchShortcutKey, preferencesButtonPosition } = usePreferences();
+const slots = useSlots();
+const rightSlots = computed(() => {
+  const list = [{ index: 100, name: 'user-dropdown' }];
+  if (preferences.widget.globalSearch) {
+    list.push({
+      index: 5,
+      name: 'global-search',
+    });
+  }
+
+  if (preferencesButtonPosition.value.header) {
+    list.push({
+      index: 10,
+      name: 'preferences',
+    });
+  }
+  if (preferences.widget.themeToggle) {
+    list.push({
+      index: 15,
+      name: 'theme-toggle',
+    });
+  }
+  if (preferences.widget.languageToggle) {
+    list.push({
+      index: 20,
+      name: 'language-toggle',
+    });
+  }
+  if (preferences.widget.fullscreen) {
+    list.push({
+      index: 25,
+      name: 'fullscreen',
+    });
+  }
+  if (preferences.widget.notification) {
+    list.push({
+      index: 30,
+      name: 'notification',
+    });
+  }
+
+  Object.keys(slots).forEach((key) => {
+    const name = key.split('-');
+    if (key.startsWith('header-right')) {
+      list.push({ index: Number(name[2]), name: key });
+    }
+  });
+  return list.sort((a, b) => a.index - b.index);
+});
+
+const leftSlots = computed(() => {
+  const list: any[] = [];
+
+  Object.keys(slots).forEach((key) => {
+    const name = key.split('-');
+    if (key.startsWith('header-left')) {
+      list.push({ index: Number(name[2]), name: key });
+    }
+  });
+  return list.sort((a, b) => a.index - b.index);
+});
+
+function clearPreferencesAndLogout() {
+  emit('clearPreferencesAndLogout');
+}
+
+let themeSwitch = ref(preferences.theme.mode == 'dark');
+let themeChange = () => {
+  themeSwitch.value = !themeSwitch.value;
+  updatePreferences({
+    theme: {
+      mode: themeSwitch.value ? 'dark' : 'light'
+    }
+  })
+
+  console.log(preferences.app.layout,'????');
+  
+}
+</script>
+
+<template>
+  <template v-for="slot in leftSlots.filter((item) => item.index < 5)" :key="slot.name">
+    <slot :name="slot.name"></slot>
+  </template>
+  <div class="flex-center hidden lg:block">
+    <slot name="breadcrumb"></slot>
+  </div>
+  <template v-for="slot in leftSlots.filter((item) => item.index > 5)" :key="slot.name">
+    <slot :name="slot.name"></slot>
+  </template>
+  <div class="flex h-full min-w-0 flex-1 items-center">
+    <slot name="menu"></slot>
+  </div>
+  <div class="flex h-full min-w-0 flex-shrink-0 items-center">
+    <template v-for="slot in rightSlots" :key="slot.name">
+      <slot :name="slot.name">
+        <template v-if="slot.name === 'global-search'">
+        </template>
+
+        <template v-else-if="slot.name === 'preferences'">
+          <PreferencesButton class="mr-1" @clear-preferences-and-logout="clearPreferencesAndLogout" />
+        </template>
+        <template v-else-if="slot.name === 'theme-toggle'">
+          <ThemeToggle class="mr-1 mt-[2px]" />
+        </template>
+        <template v-else-if="slot.name === 'language-toggle'">
+          <LanguageToggle class="mr-1" />
+        </template>
+        <template v-else-if="slot.name === 'fullscreen'">
+          <VbenFullScreen class="mr-1" />
+        </template>
+      </slot>
+    </template>
+    <div class="mr-2 scale-75">
+      <label class="switch">
+        <span class="sun"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <g fill="#ffd43b">
+              <circle r="5" cy="12" cx="12"></circle>
+              <path
+                d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z">
+              </path>
+            </g>
+          </svg></span>
+        <span class="moon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+            <path
+              d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z">
+            </path>
+          </svg></span>
+        <input type="checkbox" class="input"  :checked="themeSwitch" @change="themeChange">
+        <span class="slider"></span>
+      </label>
+
+    </div>
+  </div>
+</template>
+<style>
+
+/* From Uiverse.io by andrew-demchenk0 */ 
+.switch {
+  font-size: 17px;
+  position: relative;
+  display: inline-block;
+  width: 64px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #73C0FC;
+  transition: .4s;
+  border-radius: 30px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 30px;
+  width: 30px;
+  border-radius: 20px;
+  left: 2px;
+  bottom: 2px;
+  z-index: 2;
+  background-color: #e8e8e8;
+  transition: .4s;
+}
+
+.sun svg {
+  position: absolute;
+  top: 6px;
+  left: 36px;
+  z-index: 1;
+  width: 24px;
+  height: 24px;
+}
+
+.moon svg {
+  fill: #73C0FC;
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  z-index: 1;
+  width: 24px;
+  height: 24px;
+}
+
+/* .switch:hover */.sun svg {
+  animation: rotate 15s linear infinite;
+}
+
+@keyframes rotate {
+ 
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* .switch:hover */.moon svg {
+  animation: tilt 5s linear infinite;
+}
+
+@keyframes tilt {
+ 
+  0% {
+    transform: rotate(0deg);
+  }
+
+  25% {
+    transform: rotate(-10deg);
+  }
+
+  75% {
+    transform: rotate(10deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.input:checked + .slider {
+  background-color: #183153;
+}
+
+.input:focus + .slider {
+  box-shadow: 0 0 1px #183153;
+}
+
+.input:checked + .slider:before {
+  transform: translateX(30px);
+}
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/layouts/basic/header/index.ts b/apps/web-test/src/layouts/basic/header/index.ts
new file mode 100644
index 00000000..44f0729f
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/header/index.ts
@@ -0,0 +1 @@
+export { default as LayoutHeader } from './header.vue';
diff --git a/apps/web-test/src/layouts/basic/index.ts b/apps/web-test/src/layouts/basic/index.ts
new file mode 100644
index 00000000..b3a01cd1
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/index.ts
@@ -0,0 +1 @@
+export { default as BasicLayout } from './layout.vue';
diff --git a/apps/web-test/src/layouts/basic/layout.vue b/apps/web-test/src/layouts/basic/layout.vue
new file mode 100644
index 00000000..5f0dfb45
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/layout.vue
@@ -0,0 +1,341 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@vben/types';
+
+import { computed, useSlots, watch } from 'vue';
+
+import { useWatermark } from '@vben/hooks';
+import { $t } from '@vben/locales';
+import {
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@vben/preferences';
+import { useLockStore, useUserStore } from '@vben/stores';
+import { deepToRaw, mapTree } from '@vben/utils';
+import { VbenAdminLayout } from '@vben-core/layout-ui';
+import { Toaster, VbenBackTop } from '@vben-core/shadcn-ui';
+import { VbenLogo } from '#/layouts/logo';
+
+import { Breadcrumb, CheckUpdates, Preferences } from '@vben/layouts';
+import { LayoutContent, LayoutContentSpinner } from './content';
+import { Copyright } from './copyright';
+import { LayoutFooter } from './footer';
+import { LayoutHeader } from './header';
+import {
+  LayoutExtraMenu,
+  LayoutMenu,
+  LayoutMixedMenu,
+  useExtraMenu,
+  useMixedMenu,
+} from './menu';
+import { LayoutTabbar } from './tabbar';
+
+defineOptions({ name: 'BasicLayout' });
+
+const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
+
+const {
+  isDark,
+  isHeaderNav,
+  isMixedNav,
+  isMobile,
+  isSideMixedNav,
+  layout,
+  preferencesButtonPosition,
+  sidebarCollapsed,
+  theme,
+} = usePreferences();
+const userStore = useUserStore();
+const { updateWatermark } = useWatermark();
+const lockStore = useLockStore();
+
+const sidebarTheme = computed(() => {
+  const dark = isDark.value || preferences.theme.semiDarkSidebar;
+  return dark ? 'dark' : 'light';
+});
+
+const headerTheme = computed(() => {
+  // const dark = isDark.value || preferences.theme.semiDarkHeader;
+  // return dark ? 'dark' : 'light';
+  return '!bg-[#007da3]'
+});
+
+const logoClass = computed(() => {
+  const { collapsedShowTitle } = preferences.sidebar;
+  const classes: string[] = [];
+
+  if (collapsedShowTitle && sidebarCollapsed.value && !isMixedNav.value) {
+    classes.push('mx-auto');
+  }
+
+  if (isSideMixedNav.value) {
+    classes.push('flex-center');
+  }
+
+  return classes.join(' ');
+});
+
+const isMenuRounded = computed(() => {
+  return preferences.navigation.styleType === 'rounded';
+});
+
+const logoCollapsed = computed(() => {
+  if (isMobile.value && sidebarCollapsed.value) {
+    return true;
+  }
+  if (isHeaderNav.value || isMixedNav.value) {
+    return false;
+  }
+  return sidebarCollapsed.value || isSideMixedNav.value;
+});
+
+const showHeaderNav = computed(() => {
+  return !isMobile.value && (isHeaderNav.value || isMixedNav.value);
+});
+
+// 侧边多列菜单
+const {
+  extraActiveMenu,
+  extraMenus,
+  handleDefaultSelect,
+  handleMenuMouseEnter,
+  handleMixedMenuSelect,
+  handleSideMouseLeave,
+  sidebarExtraVisible,
+} = useExtraMenu();
+
+const {
+  handleMenuSelect,
+  headerActive,
+  headerMenus,
+  sidebarActive,
+  sidebarMenus,
+  sidebarVisible,
+} = useMixedMenu();
+
+function wrapperMenus(menus: MenuRecordRaw[]) {
+  return mapTree(menus, (item) => {
+    return { ...deepToRaw(item), name: $t(item.name) };
+  });
+}
+
+function toggleSidebar() {
+  updatePreferences({
+    sidebar: {
+      hidden: !preferences.sidebar.hidden,
+    },
+  });
+}
+
+function clearPreferencesAndLogout() {
+  emit('clearPreferencesAndLogout');
+}
+
+watch(
+  () => preferences.app.watermark,
+  async (val) => {
+    if (val) {
+      await updateWatermark({
+        content: `${userStore.userInfo?.username}`,
+      });
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const slots = useSlots();
+const headerSlots = computed(() => {
+  return Object.keys(slots).filter((key) => key.startsWith('header-'));
+});
+</script>
+
+<template>
+  <VbenAdminLayout
+    v-model:sidebar-extra-visible="sidebarExtraVisible"
+    :content-compact="preferences.app.contentCompact"
+    :header-height="preferences.header.height"
+    :footer-enable="preferences.footer.enable"
+    :footer-fixed="preferences.footer.fixed"
+    :header-hidden="preferences.header.hidden"
+    :header-mode="preferences.header.mode"
+    :header-theme="headerTheme"
+    :header-toggle-sidebar-button="preferences.widget.sidebarToggle"
+    :header-visible="preferences.header.enable"
+    :is-mobile="preferences.app.isMobile"
+    :layout="layout"
+    :sidebar-collapse="preferences.sidebar.collapsed"
+    :sidebar-collapse-show-title="preferences.sidebar.collapsedShowTitle"
+    :sidebar-enable="sidebarVisible"
+    :sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
+    :sidebar-extra-collapse="preferences.sidebar.extraCollapse"
+    :sidebar-hidden="preferences.sidebar.hidden"
+    :sidebar-theme="sidebarTheme"
+    :sidebar-width="preferences.sidebar.width"
+    :tabbar-enable="preferences.tabbar.enable"
+    :tabbar-height="preferences.tabbar.height"
+    @side-mouse-leave="handleSideMouseLeave"
+    @toggle-sidebar="toggleSidebar"
+    @update:sidebar-collapse="
+      (value: boolean) => updatePreferences({ sidebar: { collapsed: value } })
+    "
+    @update:sidebar-enable="
+      (value: boolean) => updatePreferences({ sidebar: { enable: value } })
+    "
+    @update:sidebar-expand-on-hover="
+      (value: boolean) =>
+        updatePreferences({ sidebar: { expandOnHover: value } })
+    "
+    @update:sidebar-extra-collapse="
+      (value: boolean) =>
+        updatePreferences({ sidebar: { extraCollapse: value } })
+    "
+  >
+    <!-- logo -->
+    <template #logo>
+      <VbenLogo
+        v-if="preferences.logo.enable"
+        :class="logoClass"
+        :collapsed="logoCollapsed"
+        :src="preferences.logo.source"
+        :text="'西北油田办公平台'"
+        :theme="'!white'"
+        :textClass="'text-white text-2xl'"
+        :logoSize="100"
+      />
+    </template>
+    <!-- 头部区域 -->
+    <template #header>
+      <LayoutHeader
+        :theme="theme"
+        @clear-preferences-and-logout="clearPreferencesAndLogout"
+      >
+        <template
+          v-if="!showHeaderNav && preferences.breadcrumb.enable"
+          #breadcrumb
+        >
+          <Breadcrumb
+            v-if="preferences.app.layout !== 'sidebar-topbar'"
+            :hide-when-only-one="preferences.breadcrumb.hideOnlyOne"
+            :show-home="preferences.breadcrumb.showHome"
+            :show-icon="preferences.breadcrumb.showIcon"
+            :type="preferences.breadcrumb.styleType"
+          />
+        </template>
+        <template v-if="showHeaderNav" #menu>
+          <LayoutMenu
+            :default-active="headerActive"
+            :menus="wrapperMenus(headerMenus)"
+            :rounded="isMenuRounded"
+            :theme="headerTheme"
+            class="w-full"
+            mode="horizontal"
+            @select="handleMenuSelect"
+          />
+        </template>
+        <template #user-dropdown>
+          <slot name="user-dropdown"></slot>
+        </template>
+        <template #notification>
+          <slot name="notification"></slot>
+        </template>
+        <template v-for="item in headerSlots" #[item]>
+          <slot :name="item"></slot>
+        </template>
+      </LayoutHeader>
+    </template>
+    <!-- 侧边菜单区域 -->
+    <template #menu>
+      <LayoutMenu
+        :accordion="preferences.navigation.accordion"
+        :collapse="preferences.sidebar.collapsed"
+        :collapse-show-title="preferences.sidebar.collapsedShowTitle"
+        :default-active="sidebarActive"
+        :menus="wrapperMenus(sidebarMenus)"
+        :rounded="isMenuRounded"
+        :theme="sidebarTheme"
+        mode="vertical"
+        @select="handleMenuSelect"
+      />
+    </template>
+    <template #mixed-menu>
+      <!-- :collapse="!preferences.sidebar.collapsedShowTitle" -->
+      <LayoutMixedMenu
+        :active-path="extraActiveMenu"
+        :menus="wrapperMenus(headerMenus)"
+        :rounded="isMenuRounded"
+        :theme="sidebarTheme"
+        @default-select="handleDefaultSelect"
+        @enter="handleMenuMouseEnter"
+        @select="handleMixedMenuSelect"
+      />
+    </template>
+    <!-- 侧边额外区域 -->
+    <template #side-extra>
+      <LayoutExtraMenu
+        :accordion="preferences.navigation.accordion"
+        :collapse="preferences.sidebar.extraCollapse"
+        :menus="wrapperMenus(extraMenus)"
+        :rounded="isMenuRounded"
+        :theme="sidebarTheme"
+      />
+    </template>
+    <template #side-extra-title>
+      <VbenLogo
+        v-if="preferences.logo.enable"
+        :text="preferences.app.name"
+        :theme="theme"
+      />
+    </template>
+
+    <template #tabbar>
+      <LayoutTabbar
+        v-if="preferences.tabbar.enable"
+        :show-icon="preferences.tabbar.showIcon"
+        :theme="theme"
+      />
+    </template>
+
+    <!-- 主体内容 -->
+    <template #content>
+      <LayoutContent />
+    </template>
+    <template v-if="preferences.transition.loading" #content-overlay>
+      <LayoutContentSpinner />
+    </template>
+
+    <!-- 页脚 -->
+    <template v-if="preferences.footer.enable" #footer>
+      <LayoutFooter>
+        <Copyright
+          v-if="preferences.copyright.enable"
+          v-bind="preferences.copyright"
+        />
+      </LayoutFooter>
+    </template>
+
+    <template #extra>
+      <slot name="extra"></slot>
+      <Toaster />
+      <CheckUpdates
+        v-if="preferences.app.enableCheckUpdates"
+        :check-updates-interval="preferences.app.checkUpdatesInterval"
+      />
+
+      <Transition v-if="preferences.widget.lockScreen" name="slide-up">
+        <slot v-if="lockStore.isLockScreen" name="lock-screen"></slot>
+      </Transition>
+
+      <template v-if="preferencesButtonPosition.fixed">
+        <Preferences
+          class="z-100 fixed bottom-20 right-0"
+          @clear-preferences-and-logout="clearPreferencesAndLogout"
+        />
+      </template>
+      <VbenBackTop />
+    </template>
+  </VbenAdminLayout>
+
+  
+</template>
\ No newline at end of file
diff --git a/apps/web-test/src/layouts/basic/menu/extra-menu.vue b/apps/web-test/src/layouts/basic/menu/extra-menu.vue
new file mode 100644
index 00000000..d8ccc1b4
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/menu/extra-menu.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@vben/types';
+import type { MenuProps } from '@vben-core/menu-ui';
+
+import { useRoute } from 'vue-router';
+
+import { Menu } from '@vben-core/menu-ui';
+
+import { useNavigation } from './use-navigation';
+
+interface Props extends MenuProps {
+  collapse?: boolean;
+  menus: MenuRecordRaw[];
+}
+
+withDefaults(defineProps<Props>(), {
+  accordion: true,
+  menus: () => [],
+});
+
+const route = useRoute();
+const { navigation } = useNavigation();
+
+async function handleSelect(key: string) {
+  await navigation(key);
+}
+</script>
+
+<template>
+  <Menu
+    :accordion="accordion"
+    :collapse="collapse"
+    :default-active="route.meta?.activePath || route.path"
+    :menus="menus"
+    :rounded="rounded"
+    :theme="theme"
+    mode="vertical"
+    @select="handleSelect"
+  />
+</template>
diff --git a/apps/web-test/src/layouts/basic/menu/index.ts b/apps/web-test/src/layouts/basic/menu/index.ts
new file mode 100644
index 00000000..72b87ad8
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/menu/index.ts
@@ -0,0 +1,5 @@
+export { default as LayoutExtraMenu } from './extra-menu.vue';
+export { default as LayoutMenu } from './menu.vue';
+export { default as LayoutMixedMenu } from './mixed-menu.vue';
+export * from './use-extra-menu';
+export * from './use-mixed-menu';
diff --git a/apps/web-test/src/layouts/basic/menu/menu.vue b/apps/web-test/src/layouts/basic/menu/menu.vue
new file mode 100644
index 00000000..275e3b72
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/menu/menu.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@vben/types';
+import type { MenuProps } from '@vben-core/menu-ui';
+
+import { Menu } from '@vben-core/menu-ui';
+
+import {
+  GlobalSearch,
+} from './../../global-search';
+
+interface Props extends MenuProps {
+  menus: MenuRecordRaw[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  accordion: true,
+  menus: () => [],
+});
+
+const emit = defineEmits<{
+  select: [string, string?];
+}>();
+
+function handleMenuSelect(key: string) {
+  emit('select', key, props.mode);
+}
+
+import { usePreferences } from '@vben/preferences';
+const {globalSearchShortcutKey } = usePreferences();
+import { useAccessStore } from '@vben/stores';
+const accessStore = useAccessStore();
+
+</script>
+
+<template>
+    <GlobalSearch
+    :enable-shortcut-key="globalSearchShortcutKey"
+    :menus="accessStore.accessMenus"
+    class="mr-1 sm:mr-4 pl-3 my-3"
+    />
+  <Menu
+    :accordion="accordion"
+    :collapse="collapse"
+    :collapse-show-title="collapseShowTitle"
+    :default-active="defaultActive"
+    :menus="menus"
+    :mode="mode"
+    :rounded="rounded"
+    :theme="theme"
+    @select="handleMenuSelect"
+  />
+</template>
diff --git a/apps/web-test/src/layouts/basic/menu/mixed-menu.vue b/apps/web-test/src/layouts/basic/menu/mixed-menu.vue
new file mode 100644
index 00000000..70bae0ef
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/menu/mixed-menu.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@vben/types';
+import type { NormalMenuProps } from '@vben-core/menu-ui';
+
+import { onBeforeMount } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { findMenuByPath } from '@vben/utils';
+import { NormalMenu } from '@vben-core/menu-ui';
+
+interface Props extends NormalMenuProps { }
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  defaultSelect: [MenuRecordRaw, MenuRecordRaw?];
+  enter: [MenuRecordRaw];
+  select: [MenuRecordRaw];
+}>();
+
+const route = useRoute();
+
+onBeforeMount(() => {
+  const menu = findMenuByPath(props.menus || [], route.path);
+  if (menu) {
+    const rootMenu = (props.menus || []).find(
+      (item) => item.path === menu.parents?.[0],
+    );
+    emit('defaultSelect', menu, rootMenu);
+  }
+});
+</script>
+
+<template>
+  <NormalMenu :active-path="activePath" :collapse="collapse" :menus="menus" :rounded="rounded" :theme="theme"
+    @enter="(menu) => emit('enter', menu)" @select="(menu) => emit('select', menu)" />
+</template>
diff --git a/apps/web-test/src/layouts/basic/menu/use-extra-menu.ts b/apps/web-test/src/layouts/basic/menu/use-extra-menu.ts
new file mode 100644
index 00000000..a1c6d3fe
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/menu/use-extra-menu.ts
@@ -0,0 +1,109 @@
+import type { MenuRecordRaw } from '@vben/types';
+
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { preferences } from '@vben/preferences';
+import { useAccessStore } from '@vben/stores';
+import { findRootMenuByPath } from '@vben/utils';
+
+import { useNavigation } from './use-navigation';
+
+function useExtraMenu() {
+  const accessStore = useAccessStore();
+  const { navigation } = useNavigation();
+
+  const menus = computed(() => accessStore.accessMenus);
+
+  const route = useRoute();
+  const extraMenus = ref<MenuRecordRaw[]>([]);
+  const sidebarExtraVisible = ref<boolean>(false);
+  const extraActiveMenu = ref('');
+
+  /**
+   * 选择混合菜单事件
+   * @param menu
+   */
+  const handleMixedMenuSelect = async (menu: MenuRecordRaw) => {
+    extraMenus.value = menu?.children ?? [];
+    extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+    const hasChildren = extraMenus.value.length > 0;
+
+    sidebarExtraVisible.value = hasChildren;
+    if (!hasChildren) {
+      await navigation(menu.path);
+    }
+  };
+
+  /**
+   * 选择默认菜单事件
+   * @param menu
+   * @param rootMenu
+   */
+  const handleDefaultSelect = (
+    menu: MenuRecordRaw,
+    rootMenu?: MenuRecordRaw,
+  ) => {
+    extraMenus.value = rootMenu?.children ?? [];
+    extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+
+    if (preferences.sidebar.expandOnHover) {
+      sidebarExtraVisible.value = extraMenus.value.length > 0;
+    }
+  };
+
+  /**
+   * 侧边菜单鼠标移出事件
+   */
+  const handleSideMouseLeave = () => {
+    if (preferences.sidebar.expandOnHover) {
+      return;
+    }
+    sidebarExtraVisible.value = false;
+
+    const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
+      menus.value,
+      route.path,
+    );
+    extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
+    extraMenus.value = rootMenu?.children ?? [];
+  };
+
+  const handleMenuMouseEnter = (menu: MenuRecordRaw) => {
+    if (!preferences.sidebar.expandOnHover) {
+      const { findMenu } = findRootMenuByPath(menus.value, menu.path);
+      extraMenus.value = findMenu?.children ?? [];
+      extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+      sidebarExtraVisible.value = extraMenus.value.length > 0;
+    }
+  };
+
+  watch(
+    () => route.path,
+    (path) => {
+      const currentPath = route.meta?.activePath || path;
+      // if (preferences.sidebar.expandOnHover) {
+      //   return;
+      // }
+      const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
+        menus.value,
+        currentPath,
+      );
+      extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
+      extraMenus.value = rootMenu?.children ?? [];
+    },
+    { immediate: true },
+  );
+
+  return {
+    extraActiveMenu,
+    extraMenus,
+    handleDefaultSelect,
+    handleMenuMouseEnter,
+    handleMixedMenuSelect,
+    handleSideMouseLeave,
+    sidebarExtraVisible,
+  };
+}
+
+export { useExtraMenu };
diff --git a/apps/web-test/src/layouts/basic/menu/use-mixed-menu.ts b/apps/web-test/src/layouts/basic/menu/use-mixed-menu.ts
new file mode 100644
index 00000000..ca78fc0d
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/menu/use-mixed-menu.ts
@@ -0,0 +1,129 @@
+import type { MenuRecordRaw } from '@vben/types';
+
+import { computed, onBeforeMount, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { preferences, usePreferences } from '@vben/preferences';
+import { useAccessStore } from '@vben/stores';
+import { findRootMenuByPath } from '@vben/utils';
+
+import { useNavigation } from './use-navigation';
+
+function useMixedMenu() {
+  const { navigation } = useNavigation();
+  const accessStore = useAccessStore();
+  const route = useRoute();
+  const splitSideMenus = ref<MenuRecordRaw[]>([]);
+  const rootMenuPath = ref<string>('');
+
+  const { isMixedNav } = usePreferences();
+
+  const needSplit = computed(
+    () => preferences.navigation.split && isMixedNav.value,
+  );
+
+  const sidebarVisible = computed(() => {
+    const enableSidebar = preferences.sidebar.enable;
+    if (needSplit.value) {
+      return enableSidebar && splitSideMenus.value.length > 0;
+    }
+    return enableSidebar;
+  });
+  const menus = computed(() => accessStore.accessMenus);
+
+  /**
+   * 头部菜单
+   */
+  const headerMenus = computed(() => {
+    if (!needSplit.value) {
+      return menus.value;
+    }
+    return menus.value.map((item) => {
+      return {
+        ...item,
+        children: [],
+      };
+    });
+  });
+
+  /**
+   * 侧边菜单
+   */
+  const sidebarMenus = computed(() => {
+    return needSplit.value ? splitSideMenus.value : menus.value;
+  });
+
+  /**
+   * 侧边菜单激活路径
+   */
+  const sidebarActive = computed(() => {
+    return (route?.meta?.activePath as string) ?? route.path;
+  });
+
+  /**
+   * 头部菜单激活路径
+   */
+  const headerActive = computed(() => {
+    if (!needSplit.value) {
+      return route.path;
+    }
+    return rootMenuPath.value;
+  });
+
+  /**
+   * 菜单点击事件处理
+   * @param key 菜单路径
+   * @param mode 菜单模式
+   */
+  const handleMenuSelect = (key: string, mode?: string) => {
+    if (!needSplit.value || mode === 'vertical') {
+      navigation(key);
+      return;
+    }
+
+    const rootMenu = menus.value.find((item) => item.path === key);
+    rootMenuPath.value = rootMenu?.path ?? '';
+    splitSideMenus.value = rootMenu?.children ?? [];
+    if (splitSideMenus.value.length === 0) {
+      navigation(key);
+    }
+  };
+
+  /**
+   * 计算侧边菜单
+   * @param path 路由路径
+   */
+  function calcSideMenus(path: string = route.path) {
+    let { rootMenu } = findRootMenuByPath(menus.value, path);
+    if (!rootMenu) {
+      rootMenu = menus.value.find((item) => item.path === path);
+    }
+    rootMenuPath.value = rootMenu?.path ?? '';
+    splitSideMenus.value = rootMenu?.children ?? [];
+  }
+
+  watch(
+    () => route.path,
+    (path) => {
+      const currentPath = (route?.meta?.activePath as string) ?? path;
+      calcSideMenus(currentPath);
+    },
+    { immediate: true },
+  );
+
+  // 初始化计算侧边菜单
+  onBeforeMount(() => {
+    calcSideMenus(route.meta?.activePath || route.path);
+  });
+
+  return {
+    handleMenuSelect,
+    headerActive,
+    headerMenus,
+    sidebarActive,
+    sidebarMenus,
+    sidebarVisible,
+  };
+}
+
+export { useMixedMenu };
diff --git a/apps/web-test/src/layouts/basic/menu/use-navigation.ts b/apps/web-test/src/layouts/basic/menu/use-navigation.ts
new file mode 100644
index 00000000..5efb3969
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/menu/use-navigation.ts
@@ -0,0 +1,19 @@
+import { useRouter } from 'vue-router';
+
+import { isHttpUrl, openWindow } from '@vben/utils';
+
+function useNavigation() {
+  const router = useRouter();
+
+  const navigation = async (path: string) => {
+    if (isHttpUrl(path)) {
+      openWindow(path, { target: '_blank' });
+    } else {
+      await router.push(path);
+    }
+  };
+
+  return { navigation };
+}
+
+export { useNavigation };
diff --git a/apps/web-test/src/layouts/basic/tabbar/index.ts b/apps/web-test/src/layouts/basic/tabbar/index.ts
new file mode 100644
index 00000000..5cc24790
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/tabbar/index.ts
@@ -0,0 +1,2 @@
+export { default as LayoutTabbar } from './tabbar.vue';
+export * from './use-tabbar';
diff --git a/apps/web-test/src/layouts/basic/tabbar/tabbar.vue b/apps/web-test/src/layouts/basic/tabbar/tabbar.vue
new file mode 100644
index 00000000..77f3f225
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/tabbar/tabbar.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { useContentMaximize, useTabs } from '@vben/hooks';
+import { preferences } from '@vben/preferences';
+import { useTabbarStore } from '@vben/stores';
+import {
+  TabsToolMore,
+  TabsToolRefresh,
+  TabsToolScreen,
+  TabsView,
+} from '@vben-core/tabs-ui';
+
+import { useTabbar } from './use-tabbar';
+
+defineOptions({
+  name: 'LayoutTabbar',
+});
+
+defineProps<{ showIcon?: boolean; theme?: string }>();
+
+const route = useRoute();
+const tabbarStore = useTabbarStore();
+const { toggleMaximize } = useContentMaximize();
+const { refreshTab, unpinTab } = useTabs();
+
+const {
+  createContextMenus,
+  currentActive,
+  currentTabs,
+  handleClick,
+  handleClose,
+} = useTabbar();
+
+const menus = computed(() => {
+  const tab = tabbarStore.getTabByPath(currentActive.value);
+  const menus = createContextMenus(tab);
+  return menus.map((item) => {
+    return {
+      ...item,
+      label: item.text,
+      value: item.key,
+    };
+  });
+});
+
+// 刷新后如果不保持tab状态，关闭其他tab
+if (!preferences.tabbar.persist) {
+  tabbarStore.closeOtherTabs(route);
+}
+</script>
+
+<template>
+  <TabsView
+    :active="currentActive"
+    :class="theme"
+    :context-menus="createContextMenus"
+    :dragable="preferences.tabbar.dragable"
+    :show-icon="showIcon"
+    :style-type="preferences.tabbar.styleType"
+    :tabs="currentTabs"
+    @close="handleClose"
+    @sort-tabs="tabbarStore.sortTabs"
+    @unpin="unpinTab"
+    @update:active="handleClick"
+  />
+  <div class="flex-center h-full">
+    <TabsToolRefresh
+      v-if="preferences.tabbar.showRefresh"
+      @refresh="refreshTab"
+    />
+    <TabsToolMore v-if="preferences.tabbar.showMore" :menus="menus" />
+    <TabsToolScreen
+      v-if="preferences.tabbar.showMaximize"
+      :screen="preferences.sidebar.hidden"
+      @change="toggleMaximize"
+      @update:screen="toggleMaximize"
+    />
+  </div>
+</template>
diff --git a/apps/web-test/src/layouts/basic/tabbar/use-tabbar.ts b/apps/web-test/src/layouts/basic/tabbar/use-tabbar.ts
new file mode 100644
index 00000000..52b32dc4
--- /dev/null
+++ b/apps/web-test/src/layouts/basic/tabbar/use-tabbar.ts
@@ -0,0 +1,220 @@
+import type { TabDefinition } from '@vben/types';
+import type { IContextMenuItem } from '@vben-core/tabs-ui';
+import type { RouteLocationNormalizedGeneric } from 'vue-router';
+
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useContentMaximize, useTabs } from '@vben/hooks';
+import {
+  ArrowLeftToLine,
+  ArrowRightLeft,
+  ArrowRightToLine,
+  ExternalLink,
+  FoldHorizontal,
+  Fullscreen,
+  Minimize2,
+  Pin,
+  PinOff,
+  RotateCw,
+  X,
+} from '@vben/icons';
+import { $t, useI18n } from '@vben/locales';
+import { useAccessStore, useTabbarStore } from '@vben/stores';
+import { filterTree } from '@vben/utils';
+
+export function useTabbar() {
+  const router = useRouter();
+  const route = useRoute();
+  const accessStore = useAccessStore();
+  const tabbarStore = useTabbarStore();
+  const { contentIsMaximize, toggleMaximize } = useContentMaximize();
+  const {
+    closeAllTabs,
+    closeCurrentTab,
+    closeLeftTabs,
+    closeOtherTabs,
+    closeRightTabs,
+    closeTabByKey,
+    getTabDisableState,
+    openTabInNewWindow,
+    refreshTab,
+    toggleTabPin,
+  } = useTabs();
+
+  const currentActive = computed(() => {
+    return route.fullPath;
+  });
+
+  const { locale } = useI18n();
+  const currentTabs = ref<RouteLocationNormalizedGeneric[]>();
+  watch(
+    [
+      () => tabbarStore.getTabs,
+      () => tabbarStore.updateTime,
+      () => locale.value,
+    ],
+    ([tabs]) => {
+      currentTabs.value = tabs.map((item) => wrapperTabLocale(item));
+    },
+  );
+
+  /**
+   * 初始化固定标签页
+   */
+  const initAffixTabs = () => {
+    const affixTabs = filterTree(router.getRoutes(), (route) => {
+      return !!route.meta?.affixTab;
+    });
+    tabbarStore.setAffixTabs(affixTabs);
+  };
+
+  // 点击tab,跳转路由
+  const handleClick = (key: string) => {
+    router.push(key);
+  };
+
+  // 关闭tab
+  const handleClose = async (key: string) => {
+    await closeTabByKey(key);
+  };
+
+  function wrapperTabLocale(tab: RouteLocationNormalizedGeneric) {
+    return {
+      ...tab,
+      meta: {
+        ...tab?.meta,
+        title: $t(tab?.meta?.title as string),
+      },
+    };
+  }
+
+  watch(
+    () => accessStore.accessMenus,
+    () => {
+      initAffixTabs();
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => route.path,
+    () => {
+      const meta = route.matched?.[route.matched.length - 1]?.meta;
+      tabbarStore.addTab({
+        ...route,
+        meta: meta || route.meta,
+      });
+    },
+    { immediate: true },
+  );
+
+  const createContextMenus = (tab: TabDefinition) => {
+    const {
+      disabledCloseAll,
+      disabledCloseCurrent,
+      disabledCloseLeft,
+      disabledCloseOther,
+      disabledCloseRight,
+      disabledRefresh,
+    } = getTabDisableState(tab);
+
+    const affixTab = tab?.meta?.affixTab ?? false;
+
+    const menus: IContextMenuItem[] = [
+      {
+        disabled: disabledCloseCurrent,
+        handler: async () => {
+          await closeCurrentTab(tab);
+        },
+        icon: X,
+        key: 'close',
+        text: $t('preferences.tabbar.contextMenu.close'),
+      },
+      {
+        handler: async () => {
+          await toggleTabPin(tab);
+        },
+        icon: affixTab ? PinOff : Pin,
+        key: 'affix',
+        text: affixTab
+          ? $t('preferences.tabbar.contextMenu.unpin')
+          : $t('preferences.tabbar.contextMenu.pin'),
+      },
+      {
+        handler: async () => {
+          if (!contentIsMaximize.value) {
+            await router.push(tab.fullPath);
+          }
+          toggleMaximize();
+        },
+        icon: contentIsMaximize.value ? Minimize2 : Fullscreen,
+        key: contentIsMaximize.value ? 'restore-maximize' : 'maximize',
+        text: contentIsMaximize.value
+          ? $t('preferences.tabbar.contextMenu.restoreMaximize')
+          : $t('preferences.tabbar.contextMenu.maximize'),
+      },
+      {
+        disabled: disabledRefresh,
+        handler: refreshTab,
+        icon: RotateCw,
+        key: 'reload',
+        text: $t('preferences.tabbar.contextMenu.reload'),
+      },
+      {
+        handler: async () => {
+          await openTabInNewWindow(tab);
+        },
+        icon: ExternalLink,
+        key: 'open-in-new-window',
+        separator: true,
+        text: $t('preferences.tabbar.contextMenu.openInNewWindow'),
+      },
+
+      {
+        disabled: disabledCloseLeft,
+        handler: async () => {
+          await closeLeftTabs(tab);
+        },
+        icon: ArrowLeftToLine,
+        key: 'close-left',
+        text: $t('preferences.tabbar.contextMenu.closeLeft'),
+      },
+      {
+        disabled: disabledCloseRight,
+        handler: async () => {
+          await closeRightTabs(tab);
+        },
+        icon: ArrowRightToLine,
+        key: 'close-right',
+        separator: true,
+        text: $t('preferences.tabbar.contextMenu.closeRight'),
+      },
+      {
+        disabled: disabledCloseOther,
+        handler: async () => {
+          await closeOtherTabs(tab);
+        },
+        icon: FoldHorizontal,
+        key: 'close-other',
+        text: $t('preferences.tabbar.contextMenu.closeOther'),
+      },
+      {
+        disabled: disabledCloseAll,
+        handler: closeAllTabs,
+        icon: ArrowRightLeft,
+        key: 'close-all',
+        text: $t('preferences.tabbar.contextMenu.closeAll'),
+      },
+    ];
+    return menus;
+  };
+
+  return {
+    createContextMenus,
+    currentActive,
+    currentTabs,
+    handleClick,
+    handleClose,
+  };
+}
diff --git a/apps/web-test/src/layouts/full-screen/full-screen.vue b/apps/web-test/src/layouts/full-screen/full-screen.vue
new file mode 100644
index 00000000..60759e30
--- /dev/null
+++ b/apps/web-test/src/layouts/full-screen/full-screen.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { Maximize, Minimize } from '@vben/icons';
+
+import { useFullscreen } from '@vueuse/core';
+
+
+import {
+  VbenIconButton,
+} from '@vben-core/shadcn-ui';
+
+defineOptions({ name: 'FullScreen' });
+
+const { isFullscreen, toggle } = useFullscreen();
+
+// 重新检查全屏状态
+isFullscreen.value = !!(
+  document.fullscreenElement ||
+  // @ts-ignore
+  document.webkitFullscreenElement ||
+  // @ts-ignore
+  document.mozFullScreenElement ||
+  // @ts-ignore
+  document.msFullscreenElement
+);
+</script>
+<template>
+  <VbenIconButton @click="toggle" class="hover:text-[#007da3] text-white">
+    <Minimize v-if="isFullscreen" class="size-4 hover:text-[#007da3]" />
+    <Maximize v-else class="size-4 hover:text-[#007da3]" />
+  </VbenIconButton>
+</template>
diff --git a/apps/web-test/src/layouts/full-screen/index.ts b/apps/web-test/src/layouts/full-screen/index.ts
new file mode 100644
index 00000000..3997ee08
--- /dev/null
+++ b/apps/web-test/src/layouts/full-screen/index.ts
@@ -0,0 +1 @@
+export { default as VbenFullScreen } from './full-screen.vue';
diff --git a/apps/web-test/src/layouts/global-search/global-search.vue b/apps/web-test/src/layouts/global-search/global-search.vue
new file mode 100644
index 00000000..36c9d11d
--- /dev/null
+++ b/apps/web-test/src/layouts/global-search/global-search.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@vben/types';
+
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import {
+  ArrowDown,
+  ArrowUp,
+  CornerDownLeft,
+  MdiKeyboardEsc,
+  Search,
+} from '@vben/icons';
+import { $t } from '@vben/locales';
+import { isWindowsOs } from '@vben/utils';
+import { useVbenModal } from '@vben-core/popup-ui';
+
+import { useMagicKeys, whenever } from '@vueuse/core';
+
+import SearchPanel from './search-panel.vue';
+
+defineOptions({
+  name: 'GlobalSearch',
+});
+
+const props = withDefaults(
+  defineProps<{ enableShortcutKey?: boolean; menus: MenuRecordRaw[] }>(),
+  {
+    enableShortcutKey: true,
+    menus: () => [],
+  },
+);
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+});
+const open = modalApi.useStore((state) => state.isOpen);
+
+const keyword = ref('');
+const searchInputRef = ref<HTMLInputElement>();
+
+function handleClose() {
+  modalApi.close();
+  keyword.value = '';
+}
+
+const keys = useMagicKeys();
+const cmd = isWindowsOs() ? keys['ctrl+k'] : keys['cmd+k'];
+whenever(cmd!, () => {
+  if (props.enableShortcutKey) {
+    modalApi.open();
+  }
+});
+
+whenever(open, () => {
+  nextTick(() => {
+    searchInputRef.value?.focus();
+  });
+});
+
+const preventDefaultBrowserSearchHotKey = (event: KeyboardEvent) => {
+  if (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault();
+  }
+};
+
+const toggleKeydownListener = () => {
+  if (props.enableShortcutKey) {
+    window.addEventListener('keydown', preventDefaultBrowserSearchHotKey);
+  } else {
+    window.removeEventListener('keydown', preventDefaultBrowserSearchHotKey);
+  }
+};
+
+const toggleOpen = () => {
+  open.value ? modalApi.close() : modalApi.open();
+};
+
+watch(() => props.enableShortcutKey, toggleKeydownListener);
+
+onMounted(() => {
+  toggleKeydownListener();
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', preventDefaultBrowserSearchHotKey);
+  });
+});
+
+import { usePreferences } from '@vben/preferences';
+
+const {sidebarCollapsed } = usePreferences();
+
+</script>
+
+<template>
+  <div>
+    <Modal :fullscreen-button="false" class="w-[600px]" header-class="py-2">
+      <template #title>
+        <div class="flex items-center">
+          <Search class="text-muted-foreground mr-2 size-4" />
+          <input ref="searchInputRef" v-model="keyword" :placeholder="$t('widgets.search.searchNavigate')"
+            class="ring-none placeholder:text-muted-foreground w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal outline-none ring-0 ring-offset-transparent focus-visible:ring-transparent" />
+        </div>
+      </template>
+
+      <SearchPanel :keyword="keyword" :menus="menus" @close="handleClose" />
+      <template #footer>
+        <div class="flex w-full justify-start text-xs">
+          <div class="mr-2 flex items-center">
+            <CornerDownLeft class="mr-1 size-3" />
+            {{ $t('widgets.search.select') }}
+          </div>
+          <div class="mr-2 flex items-center">
+            <ArrowUp class="mr-1 size-3" />
+            <ArrowDown class="mr-1 size-3" />
+            {{ $t('widgets.search.navigate') }}
+          </div>
+          <div class="flex items-center">
+            <MdiKeyboardEsc class="mr-1 size-3" />
+            {{ $t('widgets.search.close') }}
+          </div>
+        </div>
+      </template>
+    </Modal>
+    <div v-if="!sidebarCollapsed"
+      class="md:bg-accent group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-none"
+      @click="toggleOpen()">
+      <Search class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100" />
+      <span class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block">
+        {{ $t('widgets.search.title') }}
+      </span>
+      <span v-if="enableShortcutKey"
+        class="bg-background border-foreground/60 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block">
+        {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
+        <kbd>K</kbd>
+      </span>
+      <span v-else></span>
+    </div>
+    <div v-else class="rounded-full w100% flex justify-center cursor-pointer" @click="toggleOpen()">
+      <Search class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100" />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-test/src/layouts/global-search/index.ts b/apps/web-test/src/layouts/global-search/index.ts
new file mode 100644
index 00000000..cd490aee
--- /dev/null
+++ b/apps/web-test/src/layouts/global-search/index.ts
@@ -0,0 +1 @@
+export { default as GlobalSearch } from './global-search.vue';
diff --git a/apps/web-test/src/layouts/global-search/search-panel.vue b/apps/web-test/src/layouts/global-search/search-panel.vue
new file mode 100644
index 00000000..9f648ac3
--- /dev/null
+++ b/apps/web-test/src/layouts/global-search/search-panel.vue
@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@vben/types';
+
+import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { SearchX, X } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { mapTree, traverseTreeValues, uniqueByField } from '@vben/utils';
+import { VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
+import { isHttpUrl } from '@vben-core/shared/utils';
+
+import { onKeyStroke, useLocalStorage, useThrottleFn } from '@vueuse/core';
+
+defineOptions({
+  name: 'SearchPanel',
+});
+
+const props = withDefaults(
+  defineProps<{ keyword: string; menus: MenuRecordRaw[] }>(),
+  {
+    keyword: '',
+    menus: () => [],
+  },
+);
+const emit = defineEmits<{ close: [] }>();
+
+const router = useRouter();
+const searchHistory = useLocalStorage<MenuRecordRaw[]>(
+  `__search-history-${location.hostname}__`,
+  [],
+);
+const activeIndex = ref(-1);
+const searchItems = shallowRef<MenuRecordRaw[]>([]);
+const searchResults = ref<MenuRecordRaw[]>([]);
+
+const handleSearch = useThrottleFn(search, 200);
+
+// 搜索函数，用于根据搜索关键词查找匹配的菜单项
+function search(searchKey: string) {
+  // 去除搜索关键词的前后空格
+  searchKey = searchKey.trim();
+
+  // 如果搜索关键词为空，清空搜索结果并返回
+  if (!searchKey) {
+    searchResults.value = [];
+    return;
+  }
+
+  // 使用搜索关键词创建正则表达式
+  const reg = createSearchReg(searchKey);
+
+  // 初始化结果数组
+  const results: MenuRecordRaw[] = [];
+
+  // 遍历搜索项
+  traverseTreeValues(searchItems.value, (item) => {
+    // 如果菜单项的名称匹配正则表达式，将其添加到结果数组中
+    if (reg.test(item.name?.toLowerCase())) {
+      results.push(item);
+    }
+  });
+
+  // 更新搜索结果
+  searchResults.value = results;
+
+  // 如果有搜索结果，设置索引为 0
+  if (results.length > 0) {
+    activeIndex.value = 0;
+  }
+
+  // 赋值索引为 0
+  activeIndex.value = 0;
+}
+
+// When the keyboard up and down keys move to an invisible place
+// the scroll bar needs to scroll automatically
+function scrollIntoView() {
+  const element = document.querySelector(
+    `[data-search-item="${activeIndex.value}"]`,
+  );
+
+  if (element) {
+    element.scrollIntoView({ block: 'nearest' });
+  }
+}
+
+// enter keyboard event
+async function handleEnter() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  const result = searchResults.value;
+  const index = activeIndex.value;
+  if (result.length === 0 || index < 0) {
+    return;
+  }
+  const to = result[index];
+  if (to) {
+    searchHistory.value.push(to);
+    handleClose();
+    await nextTick();
+    if (isHttpUrl(to.path)) {
+      window.open(to.path, '_blank');
+    } else {
+      router.push({ path: to.path, replace: true });
+    }
+  }
+}
+
+// Arrow key up
+function handleUp() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  activeIndex.value--;
+  if (activeIndex.value < 0) {
+    activeIndex.value = searchResults.value.length - 1;
+  }
+  scrollIntoView();
+}
+
+// Arrow key down
+function handleDown() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  activeIndex.value++;
+  if (activeIndex.value > searchResults.value.length - 1) {
+    activeIndex.value = 0;
+  }
+  scrollIntoView();
+}
+
+// close search modal
+function handleClose() {
+  searchResults.value = [];
+  emit('close');
+}
+
+// Activate when the mouse moves to a certain line
+function handleMouseenter(e: MouseEvent) {
+  const index = (e.target as HTMLElement)?.dataset.index;
+  activeIndex.value = Number(index);
+}
+
+function removeItem(index: number) {
+  if (props.keyword) {
+    searchResults.value.splice(index, 1);
+  } else {
+    searchHistory.value.splice(index, 1);
+  }
+  activeIndex.value = activeIndex.value - 1 >= 0 ? activeIndex.value - 1 : 0;
+  scrollIntoView();
+}
+
+// 存储所有需要转义的特殊字符
+const code = new Set([
+  '$',
+  '(',
+  ')',
+  '*',
+  '+',
+  '.',
+  '?',
+  '[',
+  '\\',
+  ']',
+  '^',
+  '{',
+  '|',
+  '}',
+]);
+
+// 转换函数，用于转义特殊字符
+function transform(c: string) {
+  // 如果字符在特殊字符列表中，返回转义后的字符
+  // 如果不在，返回字符本身
+  return code.has(c) ? `\\${c}` : c;
+}
+
+// 创建搜索正则表达式
+function createSearchReg(key: string) {
+  // 将输入的字符串拆分为单个字符
+  // 对每个字符进行转义
+  // 然后用'.*'连接所有字符，创建正则表达式
+  const keys = [...key].map((item) => transform(item)).join('.*');
+  // 返回创建的正则表达式
+  return new RegExp(`.*${keys}.*`);
+}
+
+watch(
+  () => props.keyword,
+  (val) => {
+    if (val) {
+      handleSearch(val);
+    } else {
+      searchResults.value = [...searchHistory.value];
+    }
+  },
+);
+
+onMounted(() => {
+  searchItems.value = mapTree(props.menus, (item) => {
+    return {
+      ...item,
+      name: $t(item?.name),
+    };
+  });
+  if (searchHistory.value.length > 0) {
+    searchResults.value = searchHistory.value;
+  }
+  // enter search
+  onKeyStroke('Enter', handleEnter);
+  // Monitor keyboard arrow keys
+  onKeyStroke('ArrowUp', handleUp);
+  onKeyStroke('ArrowDown', handleDown);
+  // esc close
+  onKeyStroke('Escape', handleClose);
+});
+</script>
+
+<template>
+  <VbenScrollbar>
+    <div class="!flex h-full justify-center px-2 sm:max-h-[450px]">
+      <!-- 无搜索结果 -->
+      <div
+        v-if="keyword && searchResults.length === 0"
+        class="text-muted-foreground text-center"
+      >
+        <SearchX class="mx-auto mt-4 size-12" />
+        <p class="mb-10 mt-6 text-xs">
+          {{ $t('widgets.search.noResults') }}
+          <span class="text-foreground text-sm font-medium">
+            "{{ keyword }}"
+          </span>
+        </p>
+      </div>
+      <!-- 历史搜索记录 & 没有搜索结果 -->
+      <div
+        v-if="!keyword && searchResults.length === 0"
+        class="text-muted-foreground text-center"
+      >
+        <p class="my-10 text-xs">
+          {{ $t('widgets.search.noRecent') }}
+        </p>
+      </div>
+
+      <ul v-show="searchResults.length > 0" class="w-full">
+        <li
+          v-if="searchHistory.length > 0 && !keyword"
+          class="text-muted-foreground mb-2 text-xs"
+        >
+          {{ $t('widgets.search.recent') }}
+        </li>
+        <li
+          v-for="(item, index) in uniqueByField(searchResults, 'path')"
+          :key="item.path"
+          :class="
+            activeIndex === index
+              ? 'active bg-primary text-primary-foreground'
+              : ''
+          "
+          :data-index="index"
+          :data-search-item="index"
+          class="bg-accent flex-center group mb-3 w-full cursor-pointer rounded-lg px-4 py-4"
+          @click="handleEnter"
+          @mouseenter="handleMouseenter"
+        >
+          <VbenIcon
+            :icon="item.icon"
+            class="mr-2 size-5 flex-shrink-0"
+            fallback
+          />
+
+          <span class="flex-1">{{ item.name }}</span>
+          <div
+            class="flex-center dark:hover:bg-accent hover:text-primary-foreground rounded-full p-1 hover:scale-110"
+            @click.stop="removeItem(index)"
+          >
+            <X class="size-4" />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </VbenScrollbar>
+</template>
diff --git a/apps/web-test/src/layouts/layout.vue b/apps/web-test/src/layouts/layout.vue
new file mode 100644
index 00000000..41a40c8d
--- /dev/null
+++ b/apps/web-test/src/layouts/layout.vue
@@ -0,0 +1 @@
+<template></template>
\ No newline at end of file
diff --git a/apps/web-test/src/layouts/logo/index.ts b/apps/web-test/src/layouts/logo/index.ts
new file mode 100644
index 00000000..d2a2f99a
--- /dev/null
+++ b/apps/web-test/src/layouts/logo/index.ts
@@ -0,0 +1 @@
+export { default as VbenLogo } from './logo.vue';
diff --git a/apps/web-test/src/layouts/logo/logo.vue b/apps/web-test/src/layouts/logo/logo.vue
new file mode 100644
index 00000000..f28e23d6
--- /dev/null
+++ b/apps/web-test/src/layouts/logo/logo.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+// import { VbenAvatar } from '../avatar';
+
+interface Props {
+  /**
+   * @zh_CN 是否收起文本
+   */
+  collapsed?: boolean;
+  /**
+   * @zh_CN Logo 跳转地址
+   */
+  href?: string;
+  /**
+   * @zh_CN Logo 图片大小
+   */
+  logoSize?: number;
+  /**
+   * @zh_CN Logo 图标
+   */
+  src?: string;
+  /**
+   * @zh_CN Logo 文本
+   */
+  text: string;
+  /**
+   * @zh_CN Logo 主题
+   */
+  theme?: string;
+  /**
+   * logo字体颜色
+   */
+  textClass?: string;
+}
+
+defineOptions({
+  name: 'VbenLogo',
+});
+
+withDefaults(defineProps<Props>(), {
+  collapsed: false,
+  href: 'javascript:void 0',
+  logoSize: 32,
+  src: '',
+  theme: 'light',
+});
+</script>
+
+<template>
+  <div :class="theme" class="flex h-full items-center text-lg">
+    <a :class="$attrs.class" :href="href"
+      class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500">
+      <!-- <VbenAvatar v-if="src" :alt="text" :src="src" :size="logoSize" class="relative w-8 rounded-none bg-transparent" /> -->
+      <img v-if="src" :alt="text" :src="src" class="relative rounded-none bg-transparent w-100" >
+      <span v-if="!collapsed" class="text-foreground truncate text-nowrap font-semibold" :class="textClass">
+        {{ text }}
+      </span>
+    </a>
+  </div>
+</template>
diff --git a/apps/web-test/src/layouts/notification/index.ts b/apps/web-test/src/layouts/notification/index.ts
new file mode 100644
index 00000000..e219b710
--- /dev/null
+++ b/apps/web-test/src/layouts/notification/index.ts
@@ -0,0 +1,3 @@
+export { default as Notification } from './notification.vue';
+
+export type * from './types';
diff --git a/apps/web-test/src/layouts/notification/notification.vue b/apps/web-test/src/layouts/notification/notification.vue
new file mode 100644
index 00000000..806b25e8
--- /dev/null
+++ b/apps/web-test/src/layouts/notification/notification.vue
@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import type { NotificationItem } from './types';
+
+import { Bell, MailCheck } from '@vben/icons';
+import { $t } from '@vben/locales';
+import {
+  VbenButton,
+  VbenIconButton,
+  VbenPopover,
+  VbenScrollbar,
+} from '@vben-core/shadcn-ui';
+
+import { useToggle } from '@vueuse/core';
+
+interface Props {
+  /**
+   * 显示圆点
+   */
+  dot?: boolean;
+  /**
+   * 消息列表
+   */
+  notifications?: NotificationItem[];
+  /**
+   * 图标颜色
+   */
+  icColor?:string;
+}
+
+defineOptions({ name: 'NotificationPopup' });
+
+withDefaults(defineProps<Props>(), {
+  dot: false,
+  notifications: () => [],
+});
+
+const emit = defineEmits<{
+  clear: [];
+  makeAll: [];
+  read: [NotificationItem];
+  viewAll: [];
+}>();
+
+const [open, toggle] = useToggle();
+
+function close() {
+  open.value = false;
+}
+
+function handleViewAll() {
+  emit('viewAll');
+  close();
+}
+
+function handleMakeAll() {
+  emit('makeAll');
+}
+
+function handleClear() {
+  emit('clear');
+}
+
+function handleClick(item: NotificationItem) {
+  emit('read', item);
+}
+</script>
+<template>
+  <VbenPopover
+    v-model:open="open"
+    content-class="relative right-2 w-[360px] p-0"
+  >
+    <template #trigger>
+      <div class="flex-center mr-2 h-full" @click.stop="toggle()">
+        <VbenIconButton class="bell-button text-white relative hover:text-[#007da3]">
+          <span
+            v-if="dot"
+            class="bg-[#ef4444] absolute right-0.5 top-0.5 h-2 w-2 rounded"
+          ></span>
+          <Bell class="size-4 hover:text-[#007da3]"  />
+        </VbenIconButton>
+      </div>
+    </template>
+
+    <div class="relative">
+      <div class="flex items-center justify-between p-4 py-3">
+        <div class="text-foreground">{{ $t('widgets.notifications') }}</div>
+        <VbenIconButton
+          :tooltip="$t('widgets.markAllAsRead')"
+          @click="handleMakeAll"
+        >
+          <MailCheck class="size-4" />
+        </VbenIconButton>
+      </div>
+      <VbenScrollbar v-if="notifications.length > 0">
+        <ul class="!flex max-h-[360px] w-full flex-col">
+          <template v-for="item in notifications" :key="item.title">
+            <li
+              class="hover:bg-accent border-border relative flex w-full cursor-pointer items-start gap-5 border-t px-3 py-3"
+              @click="handleClick(item)"
+            >
+              <span
+                v-if="!item.isRead"
+                class="bg-primary absolute right-2 top-2 h-2 w-2 rounded"
+              ></span>
+
+              <span
+                class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
+              >
+                <img
+                  :src="item.avatar"
+                  class="aspect-square h-full w-full object-cover"
+                  role="img"
+                />
+              </span>
+              <div class="flex flex-col gap-1 leading-none">
+                <p class="font-semibold">{{ item.title }}</p>
+                <p class="text-muted-foreground my-1 line-clamp-2 text-xs">
+                  {{ item.message }}
+                </p>
+                <p class="text-muted-foreground line-clamp-2 text-xs">
+                  {{ item.date }}
+                </p>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </VbenScrollbar>
+
+      <template v-else>
+        <div class="flex-center text-muted-foreground min-h-[150px] w-full">
+          {{ $t('common.noData') }}
+        </div>
+      </template>
+
+      <div
+        class="border-border flex items-center justify-between border-t px-4 py-3"
+      >
+        <VbenButton size="sm" variant="ghost" @click="handleClear">
+          {{ $t('widgets.clearNotifications') }}
+        </VbenButton>
+        <VbenButton size="sm" @click="handleViewAll">
+          {{ $t('widgets.viewAll') }}
+        </VbenButton>
+      </div>
+    </div>
+  </VbenPopover>
+</template>
+
+<style scoped>
+:deep(.bell-button) {
+  &:hover {
+    svg {
+      animation: bell-ring 1s both;
+    }
+  }
+}
+
+@keyframes bell-ring {
+  0%,
+  100% {
+    transform-origin: top;
+  }
+
+  15% {
+    transform: rotateZ(10deg);
+  }
+
+  30% {
+    transform: rotateZ(-10deg);
+  }
+
+  45% {
+    transform: rotateZ(5deg);
+  }
+
+  60% {
+    transform: rotateZ(-5deg);
+  }
+
+  75% {
+    transform: rotateZ(2deg);
+  }
+}
+</style>
diff --git a/apps/web-test/src/layouts/notification/types.ts b/apps/web-test/src/layouts/notification/types.ts
new file mode 100644
index 00000000..57e17943
--- /dev/null
+++ b/apps/web-test/src/layouts/notification/types.ts
@@ -0,0 +1,9 @@
+interface NotificationItem {
+  avatar: string;
+  date: string;
+  isRead?: boolean;
+  message: string;
+  title: string;
+}
+
+export type { NotificationItem };
diff --git a/apps/web-test/src/layouts/user/builtin.vue b/apps/web-test/src/layouts/user/builtin.vue
new file mode 100644
index 00000000..54725a64
--- /dev/null
+++ b/apps/web-test/src/layouts/user/builtin.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { BuiltinThemeType } from '@vben/types';
+
+import { computed, ref } from 'vue';
+
+import { UserRoundPen } from '@vben/icons';
+import { $t } from '@vben/locales';
+import {
+  BUILT_IN_THEME_PRESETS,
+  type BuiltinThemePreset,
+} from '@vben/preferences';
+import { convertToHsl, TinyColor } from '@vben/utils';
+
+defineOptions({
+  name: 'PreferenceBuiltinTheme',
+});
+
+const props = defineProps<{ isDark: boolean }>();
+
+const colorInput = ref();
+const modelValue = defineModel<BuiltinThemeType>({ default: 'default' });
+const themeColorPrimary = defineModel<string>('themeColorPrimary');
+
+const inputValue = computed(() => {
+  return new TinyColor(themeColorPrimary.value || '').toHexString();
+});
+
+const builtinThemePresets = computed(() => {
+  return [...BUILT_IN_THEME_PRESETS];
+});
+
+function typeView(name: BuiltinThemeType) {
+  switch (name) {
+    case 'default': {
+      return $t('preferences.theme.builtin.default');
+    }
+    case 'violet': {
+      return $t('preferences.theme.builtin.violet');
+    }
+    case 'pink': {
+      return $t('preferences.theme.builtin.pink');
+    }
+    case 'rose': {
+      return $t('preferences.theme.builtin.rose');
+    }
+    case 'sky-blue': {
+      return $t('preferences.theme.builtin.skyBlue');
+    }
+    case 'deep-blue': {
+      return $t('preferences.theme.builtin.deepBlue');
+    }
+
+    case 'green': {
+      return $t('preferences.theme.builtin.green');
+    }
+    case 'deep-green': {
+      return $t('preferences.theme.builtin.deepGreen');
+    }
+    case 'orange': {
+      return $t('preferences.theme.builtin.orange');
+    }
+    case 'yellow': {
+      return $t('preferences.theme.builtin.yellow');
+    }
+    case 'zinc': {
+      return $t('preferences.theme.builtin.zinc');
+    }
+    case 'neutral': {
+      return $t('preferences.theme.builtin.neutral');
+    }
+    case 'slate': {
+      return $t('preferences.theme.builtin.slate');
+    }
+    case 'gray': {
+      return $t('preferences.theme.builtin.gray');
+    }
+    case 'custom': {
+      return $t('preferences.theme.builtin.custom');
+    }
+  }
+}
+
+function handleSelect(theme: BuiltinThemePreset) {
+  modelValue.value = theme.type;
+  const primaryColor = props.isDark
+    ? theme.darkPrimaryColor || theme.primaryColor
+    : theme.primaryColor;
+
+  themeColorPrimary.value = primaryColor || theme.color;
+}
+
+function handleInputChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  themeColorPrimary.value = convertToHsl(target.value);
+}
+
+function selectColor() {
+  colorInput.value?.[0]?.click?.();
+}
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap justify-between">{{  }}
+    <template v-for="theme in builtinThemePresets" :key="theme.type">
+      <div class="flex cursor-pointer flex-col" @click="handleSelect(theme)">
+        <div
+          :class="{
+            'outline-box-active': theme.type === modelValue,
+          }"
+          class="outline-box flex-center group cursor-pointer"
+        >
+          <template v-if="theme.type !== 'custom'">
+            <div
+              :style="{ backgroundColor: theme.color }"
+              class="mx-10 my-2 size-5 rounded-md"
+            ></div>
+          </template>
+          <template v-else>
+            <div class="size-full px-10 py-2" @click.stop="selectColor">
+              <div class="flex-center relative size-5 rounded-sm">
+                <UserRoundPen
+                  class="absolute z-10 size-5 opacity-60 group-hover:opacity-100"
+                />
+                <input
+                  ref="colorInput"
+                  :value="inputValue"
+                  class="absolute inset-0 opacity-0"
+                  type="color"
+                  @input="handleInputChange"
+                />
+              </div>
+            </div>
+          </template>
+        </div>
+        <div class="text-muted-foreground my-2 text-center text-xs">
+          {{ typeView(theme.type) }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/apps/web-test/src/layouts/user/icons/content-compact.vue b/apps/web-test/src/layouts/user/icons/content-compact.vue
new file mode 100644
index 00000000..a1bcefdc
--- /dev/null
+++ b/apps/web-test/src/layouts/user/icons/content-compact.vue
@@ -0,0 +1,119 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <rect
+        id="svg_8"
+        fill="hsl(var(--primary))"
+        height="9.07027"
+        stroke="null"
+        width="104.07934"
+        x="-0.07419"
+        y="-0.05773"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="15.58168"
+        y="3.20832"
+      />
+      <path
+        id="svg_12"
+        d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
+        fill="#ffffff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="41.98275"
+        x="45.37589"
+        y="13.53192"
+      />
+      <path
+        id="svg_14"
+        d="m16.4123,15.53192c0,-1.08676 0.74096,-2 1.62271,-2l21.74653,0c0.88175,0 1.62271,0.91324 1.62271,2l0,17.24865c0,1.08676 -0.74096,2 -1.62271,2l-21.74653,0c-0.88175,0 -1.62271,-0.91324 -1.62271,-2l0,-17.24865z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="71.10636"
+        x="16.54743"
+        y="39.34689"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="28.14924"
+        y="3.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="41.25735"
+        y="3.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="54.23033"
+        y="3.07319"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.13843"
+        rx="2"
+        stroke="null"
+        width="7.78397"
+        x="1.5327"
+        y="0.881"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/apps/web-test/src/layouts/user/icons/full-content.vue b/apps/web-test/src/layouts/user/icons/full-content.vue
new file mode 100644
index 00000000..5cbcaca8
--- /dev/null
+++ b/apps/web-test/src/layouts/user/icons/full-content.vue
@@ -0,0 +1,50 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        id="svg_1"
+        d="m0.13514,4.13514c0,-2.17352 1.82648,-4 4,-4l96,0c2.17352,0 4,1.82648 4,4l0,58c0,2.17352 -1.82648,4 -4,4l-96,0c-2.17352,0 -4,-1.82648 -4,-4l0,-58z"
+        fill="currentColor"
+        fill-opacity="0.02"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="26.57155"
+        rx="2"
+        stroke="null"
+        width="53.18333"
+        x="45.79979"
+        y="3.77232"
+      />
+      <path
+        id="svg_14"
+        d="m4.28142,5.96169c0,-1.37748 1.06465,-2.53502 2.33158,-2.53502l31.2463,0c1.26693,0 2.33158,1.15754 2.33158,2.53502l0,21.86282c0,1.37748 -1.06465,2.53502 -2.33158,2.53502l-31.2463,0c-1.26693,0 -2.33158,-1.15754 -2.33158,-2.53502l0,-21.86282z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="25.02247"
+        rx="2"
+        stroke="null"
+        width="94.39371"
+        x="4.56735"
+        y="34.92584"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/apps/web-test/src/layouts/user/icons/header-nav.vue b/apps/web-test/src/layouts/user/icons/header-nav.vue
new file mode 100644
index 00000000..18158b3a
--- /dev/null
+++ b/apps/web-test/src/layouts/user/icons/header-nav.vue
@@ -0,0 +1,119 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <rect
+        id="svg_8"
+        fill="hsl(var(--primary))"
+        height="9.07027"
+        stroke="null"
+        width="104.07934"
+        x="-0.07419"
+        y="-0.05773"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="15.58168"
+        y="3.20832"
+      />
+      <path
+        id="svg_12"
+        d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
+        fill="#ffffff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="53.60438"
+        x="43.484"
+        y="13.66705"
+      />
+      <path
+        id="svg_14"
+        d="m3.43932,15.53192c0,-1.08676 1.03344,-2 2.26323,-2l30.33036,0c1.22979,0 2.26323,0.91324 2.26323,2l0,17.24865c0,1.08676 -1.03344,2 -2.26323,2l-30.33036,0c-1.22979,0 -2.26323,-0.91324 -2.26323,-2l0,-17.24865z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="95.02528"
+        x="3.30419"
+        y="39.34689"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="28.14924"
+        y="3.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="41.25735"
+        y="3.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="54.23033"
+        y="3.07319"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.13843"
+        rx="2"
+        stroke="null"
+        width="7.78397"
+        x="1.5327"
+        y="0.881"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/apps/web-test/src/layouts/user/icons/index.ts b/apps/web-test/src/layouts/user/icons/index.ts
new file mode 100644
index 00000000..c0c5a28e
--- /dev/null
+++ b/apps/web-test/src/layouts/user/icons/index.ts
@@ -0,0 +1,10 @@
+import HeaderNav from './header-nav.vue';
+
+export { default as ContentCompact } from './content-compact.vue';
+export { default as FullContent } from './full-content.vue';
+export { default as MixedNav } from './mixed-nav.vue';
+export { default as SidebarMixedNav } from './sidebar-mixed-nav.vue';
+export { default as SidebarNav } from './sidebar-nav.vue';
+
+const ContentWide = HeaderNav;
+export { ContentWide, HeaderNav };
diff --git a/apps/web-test/src/layouts/user/icons/mixed-nav.vue b/apps/web-test/src/layouts/user/icons/mixed-nav.vue
new file mode 100644
index 00000000..d194383f
--- /dev/null
+++ b/apps/web-test/src/layouts/user/icons/mixed-nav.vue
@@ -0,0 +1,161 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <rect
+        id="svg_8"
+        fill="hsl(var(--primary))"
+        height="9.07027"
+        stroke="null"
+        width="104.07934"
+        x="-0.07419"
+        y="-0.05773"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="15.58168"
+        y="3.20832"
+      />
+      <path
+        id="svg_12"
+        d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
+        fill="#ffffff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="44.13071"
+        x="53.37873"
+        y="13.45652"
+      />
+      <path
+        id="svg_14"
+        d="m19.4393,15.74245c0,-1.08676 0.79001,-2 1.73013,-2l23.18605,0c0.94011,0 1.73013,0.91324 1.73013,2l0,17.24865c0,1.08676 -0.79001,2 -1.73013,2l-23.18605,0c-0.94011,0 -1.73013,-0.91324 -1.73013,-2l0,-17.24865z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="78.39372"
+        x="19.93575"
+        y="39.34689"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="28.14924"
+        y="3.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="41.25735"
+        y="3.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="54.23033"
+        y="3.07319"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.13843"
+        rx="2"
+        stroke="null"
+        width="7.78397"
+        x="1.5327"
+        y="0.881"
+      />
+      <rect
+        id="svg_5"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="56.81191"
+        stroke="null"
+        width="15.44642"
+        x="-0.06423"
+        y="9.03113"
+      />
+      <path
+        id="svg_2"
+        d="m2.38669,15.38074c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_6"
+        d="m2.38669,28.43336c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_7"
+        d="m2.17616,41.27545c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_9"
+        d="m2.17616,54.32806c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/apps/web-test/src/layouts/user/icons/setting.vue b/apps/web-test/src/layouts/user/icons/setting.vue
new file mode 100644
index 00000000..d824e11f
--- /dev/null
+++ b/apps/web-test/src/layouts/user/icons/setting.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.9 12.66a1 1 0 0 1 0-1.32l1.28-1.44a1 1 0 0 0 .12-1.17l-2-3.46a1 1 0 0 0-1.07-.48l-1.88.38a1 1 0 0 1-1.15-.66l-.61-1.83a1 1 0 0 0-.95-.68h-4a1 1 0 0 0-1 .68l-.56 1.83a1 1 0 0 1-1.15.66L5 4.79a1 1 0 0 0-1 .48L2 8.73a1 1 0 0 0 .1 1.17l1.27 1.44a1 1 0 0 1 0 1.32L2.1 14.1a1 1 0 0 0-.1 1.17l2 3.46a1 1 0 0 0 1.07.48l1.88-.38a1 1 0 0 1 1.15.66l.61 1.83a1 1 0 0 0 1 .68h4a1 1 0 0 0 .95-.68l.61-1.83a1 1 0 0 1 1.15-.66l1.88.38a1 1 0 0 0 1.07-.48l2-3.46a1 1 0 0 0-.12-1.17ZM18.41 14l.8.9l-1.28 2.22l-1.18-.24a3 3 0 0 0-3.45 2L12.92 20h-2.56L10 18.86a3 3 0 0 0-3.45-2l-1.18.24l-1.3-2.21l.8-.9a3 3 0 0 0 0-4l-.8-.9l1.28-2.2l1.18.24a3 3 0 0 0 3.45-2L10.36 4h2.56l.38 1.14a3 3 0 0 0 3.45 2l1.18-.24l1.28 2.22l-.8.9a3 3 0 0 0 0 3.98m-6.77-6a4 4 0 1 0 4 4a4 4 0 0 0-4-4m0 6a2 2 0 1 1 2-2a2 2 0 0 1-2 2"
+    />
+  </svg>
+</template>
diff --git a/apps/web-test/src/layouts/user/icons/sidebar-mixed-nav.vue b/apps/web-test/src/layouts/user/icons/sidebar-mixed-nav.vue
new file mode 100644
index 00000000..8fc0ba40
--- /dev/null
+++ b/apps/web-test/src/layouts/user/icons/sidebar-mixed-nav.vue
@@ -0,0 +1,173 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <path
+        id="svg_2"
+        d="m-3.37838,3.7543a1.93401,4.02457 0 0 1 1.93401,-4.02457l11.3488,0l0,66.40541l-11.3488,0a1.93401,4.02457 0 0 1 -1.93401,-4.02457l0,-58.35627z"
+        fill="hsl(var(--primary))"
+        stroke="null"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="15.46086"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.67897"
+        rx="2"
+        stroke="null"
+        width="8.18938"
+        x="0.58676"
+        y="1.42154"
+      />
+      <rect
+        id="svg_8"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="9.07027"
+        rx="2"
+        stroke="null"
+        width="75.91967"
+        x="25.38277"
+        y="1.42876"
+      />
+      <rect
+        id="svg_9"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="27.91529"
+        y="3.69284"
+      />
+      <rect
+        id="svg_10"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="80.75054"
+        y="3.62876"
+      />
+      <rect
+        id="svg_11"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="87.78868"
+        y="3.69981"
+      />
+      <rect
+        id="svg_12"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="94.6847"
+        y="3.62876"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="42.9287"
+        x="58.75427"
+        y="14.613"
+      />
+      <rect
+        id="svg_14"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="20.97838"
+        rx="2"
+        stroke="null"
+        width="28.36894"
+        x="26.14342"
+        y="14.613"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="75.09493"
+        x="26.34264"
+        y="39.68822"
+      />
+      <rect
+        id="svg_5"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.79832"
+        y="28.39462"
+      />
+      <rect
+        id="svg_6"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="41.80156"
+      />
+      <rect
+        id="svg_7"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="55.36623"
+      />
+      <rect
+        id="svg_16"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="65.72065"
+        stroke="null"
+        width="12.49265"
+        x="9.85477"
+        y="-0.02618"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/apps/web-test/src/layouts/user/icons/sidebar-nav.vue b/apps/web-test/src/layouts/user/icons/sidebar-nav.vue
new file mode 100644
index 00000000..83ff3998
--- /dev/null
+++ b/apps/web-test/src/layouts/user/icons/sidebar-nav.vue
@@ -0,0 +1,153 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+      />
+      <path
+        id="svg_2"
+        d="m-3.37838,3.61916a4.4919,4.02457 0 0 1 4.4919,-4.02457l26.35848,0l0,66.40541l-26.35848,0a4.4919,4.02457 0 0 1 -4.4919,-4.02457l0,-58.35627z"
+        fill="hsl(var(--primary))"
+        stroke="null"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        width="17.66"
+        x="4.906"
+        y="23.884"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="9.706"
+        rx="2"
+        width="9.811"
+        x="8.83"
+        y="5.881"
+      />
+      <path
+        id="svg_5"
+        d="m4.906,35.833c0,-0.75801 0.63699,-1.395 1.395,-1.395l14.87,0c0.75801,0 1.395,0.63699 1.395,1.395l0,-0.001c0,0.75801 -0.63699,1.395 -1.395,1.395l-14.87,0c-0.75801,0 -1.395,-0.63699 -1.395,-1.395l0,0.001z"
+        fill="#ffffff"
+        opacity="undefined"
+      />
+      <rect
+        id="svg_6"
+        fill="#ffffff"
+        height="2.789"
+        rx="1.395"
+        width="17.66"
+        x="4.906"
+        y="44.992"
+      />
+      <rect
+        id="svg_7"
+        fill="#ffffff"
+        height="2.789"
+        rx="1.395"
+        width="17.66"
+        x="4.906"
+        y="55.546"
+      />
+      <rect
+        id="svg_8"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="9.07027"
+        rx="2"
+        stroke="null"
+        width="73.53879"
+        x="28.97986"
+        y="1.42876"
+      />
+      <rect
+        id="svg_9"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="32.039"
+        y="3.89903"
+      />
+      <rect
+        id="svg_10"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="80.75054"
+        y="3.62876"
+      />
+      <rect
+        id="svg_11"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="87.58249"
+        y="3.49362"
+      />
+      <rect
+        id="svg_12"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="94.6847"
+        y="3.62876"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="45.63141"
+        x="56.05157"
+        y="14.613"
+      />
+      <rect
+        id="svg_14"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="20.97838"
+        rx="2"
+        stroke="null"
+        width="22.82978"
+        x="29.38527"
+        y="14.613"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="72.45771"
+        x="28.97986"
+        y="39.48203"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/apps/web-test/src/layouts/user/index.ts b/apps/web-test/src/layouts/user/index.ts
new file mode 100644
index 00000000..97d594d3
--- /dev/null
+++ b/apps/web-test/src/layouts/user/index.ts
@@ -0,0 +1,3 @@
+export { default as UserInfo } from './info.vue';
+export { default as UserLike } from './like.vue';
+export { default as UserSwitch } from './switch.vue';
\ No newline at end of file
diff --git a/apps/web-test/src/layouts/user/info.vue b/apps/web-test/src/layouts/user/info.vue
new file mode 100644
index 00000000..4f3b9720
--- /dev/null
+++ b/apps/web-test/src/layouts/user/info.vue
@@ -0,0 +1,110 @@
+<template>
+    <Modal title="基本信息" :visible="visible" :cancelText="'关闭'" @cancel="close">
+        <Form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+            <FormItem label="头像" class="mb-3">
+                <upload v-model:file-list="fileList" name="avatar" list-type="picture-card" class="avatar-uploader"
+                    :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+                    :before-upload="beforeUpload" @change="handleChange">
+                    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
+                    <div v-else>
+                        <loading-outlined v-if="loading"></loading-outlined>
+                        <plus-outlined v-else></plus-outlined>
+                        <div class="ant-upload-text">上传头像</div>
+                    </div>
+                </upload>
+            </FormItem>
+            <FormItem :label="item.label" v-for="item in userData" :key="item.label" class="mb-3">
+                {{ item.value }}
+            </FormItem>
+        </Form>
+        <a href="#" class="text-[#007da3] ml-24">基本信息请至统一身份管理系统修改</a>
+    </Modal>
+</template>
+<script setup lang="ts">
+import { Modal, Form, FormItem ,Upload } from 'ant-design-vue';
+import { ref } from 'vue';
+import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
+import { message } from 'ant-design-vue';
+import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
+
+function getBase64(img: Blob, callback: (base64Url: string) => void) {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => callback(reader.result as string));
+    reader.readAsDataURL(img);
+}
+
+const fileList = ref([]);
+const loading = ref<boolean>(false);
+const imageUrl = ref<string>('');
+
+const handleChange = (info: UploadChangeParam) => {
+    if (info.file.status === 'uploading') {
+        loading.value = true;
+        return;
+    }
+    if (info.file.status === 'done') {
+        // Get this url from response in real world.
+        getBase64(info.file.originFileObj, (base64Url: string) => {
+            imageUrl.value = base64Url;
+            loading.value = false;
+        });
+    }
+    if (info.file.status === 'error') {
+        loading.value = false;
+        message.error('upload error');
+    }
+};
+
+const beforeUpload = (file: UploadProps['fileList'][number]) => {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+    if (!isJpgOrPng) {
+        message.error('You can only upload JPG file!');
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+        message.error('Image must smaller than 2MB!');
+    }
+    return isJpgOrPng && isLt2M;
+};
+
+const visible = defineModel<boolean>('visible');
+
+const close = () => {
+    visible.value = false
+}
+
+let userData = [{
+    label: '姓名',
+    value: '薛雄'
+}, {
+    label: '登录名',
+    value: 'xuex23'
+}, {
+    label: '性别',
+    value: '男'
+}, {
+    label: '员工编号',
+    value: '00454711'
+}, {
+    label: '机构单位',
+    value: '综合管理部（党委办公室）'
+}, {
+    label: '邮件地址',
+    value: '123@163.com'
+}]
+</script>
+<style scoped>
+.avatar-uploader > .ant-upload {
+  width: 128px;
+  height: 128px;
+}
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/layouts/user/layout.vue b/apps/web-test/src/layouts/user/layout.vue
new file mode 100644
index 00000000..a790d025
--- /dev/null
+++ b/apps/web-test/src/layouts/user/layout.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { LayoutType } from '@vben/types';
+
+import { type Component, computed } from 'vue';
+
+import { CircleHelp } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { VbenTooltip } from '@vben-core/shadcn-ui';
+
+import {
+  FullContent,
+  HeaderNav,
+  MixedNav,
+  SidebarMixedNav,
+  SidebarNav,
+} from './icons';
+
+interface PresetItem {
+  name: string;
+  tip: string;
+  type: LayoutType;
+}
+
+defineOptions({
+  name: 'PreferenceLayout',
+});
+
+const modelValue = defineModel<LayoutType>({ default: 'sidebar-topbar' });
+
+const components: Record<LayoutType, Component> = {
+  'sidebar-topbar': MixedNav,
+  'full-content': FullContent,
+  'header-nav': HeaderNav,
+  'mixed-nav': MixedNav,
+  'sidebar-mixed-nav': SidebarMixedNav,
+  'sidebar-nav': SidebarNav,
+};
+
+const PRESET = computed((): PresetItem[] => [
+  {
+    name: '默认',
+    tip: '顶部栏仅用于显示全局信息或操作，不包含菜单。',
+    type: 'sidebar-topbar',
+  },
+  {
+    name: $t('preferences.vertical'),
+    tip: $t('preferences.verticalTip'),
+    type: 'sidebar-nav',
+  },
+  {
+    name: $t('preferences.twoColumn'),
+    tip: $t('preferences.twoColumnTip'),
+    type: 'sidebar-mixed-nav',
+  },
+  // {
+  //   name: $t('preferences.horizontal'),
+  //   tip: $t('preferences.horizontalTip'),
+  //   type: 'header-nav',
+  // },
+  // {
+  //   name: $t('preferences.mixedMenu'),
+  //   tip: $t('preferences.mixedMenuTip'),
+  //   type: 'mixed-nav',
+  // },
+  // {
+  //   name: $t('preferences.fullContent'),
+  //   tip: $t('preferences.fullContentTip'),
+  //   type: 'full-content',
+  // },
+]);
+
+function activeClass(theme: string): string[] {
+  return theme === modelValue.value ? ['outline-box-active'] : [];
+}
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap gap-5">
+    <template v-for="theme in PRESET" :key="theme.name">
+      <div
+        class="flex w-[100px] cursor-pointer flex-col"
+        @click="modelValue = theme.type"
+      >
+        <div :class="activeClass(theme.type)" class="outline-box flex-center">
+          <component :is="components[theme.type]" />
+        </div>
+        <div
+          class="text-muted-foreground flex-center hover:text-foreground mt-2 text-center text-xs"
+        >
+          {{ theme.name }}
+          <VbenTooltip v-if="theme.tip" side="bottom">
+            <template #trigger>
+              <CircleHelp class="ml-1 size-3 cursor-help" />
+            </template>
+            {{ theme.tip }}
+          </VbenTooltip>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/apps/web-test/src/layouts/user/like.vue b/apps/web-test/src/layouts/user/like.vue
new file mode 100644
index 00000000..c13291bc
--- /dev/null
+++ b/apps/web-test/src/layouts/user/like.vue
@@ -0,0 +1,144 @@
+<template>
+    <Modal title="个人偏好" :visible="visible" @cancel="close" :width="600">
+        <Tabs v-model:activeKey="activeKey" centered tabPosition="left">
+            <TabPane key="1" tab="自定义菜单">
+                <div class="list-box flex flex-col gap-4 my-2">
+                    <div class="list-item-box flex justify-around  items-center">
+                        <div class="i-n w-100 shrink-0">
+                            <FolderOutlined class="mr-2" />总部系统
+                        </div>
+                        <div class="i-s">显示菜单：<Checkbox v-model:checked="checked"></Checkbox>
+                        </div>
+                        <div class="i-n">排序：0</div>
+                    </div>
+                    <div class="list-item-box flex justify-around  items-center" v-for="(item, index) in otherRouter"
+                        :key="index">
+                        <div class="i-n w-100 shrink-0">
+                            <FolderOutlined class="mr-2" />{{ item.name }}
+                        </div>
+                        <div class="i-s">显示菜单：<Checkbox v-model:checked="checked"></Checkbox>
+                        </div>
+                        <div class="i-n">排序：{{ index + 1 }}</div>
+                    </div>
+                </div>
+            </TabPane>
+            <TabPane key="2" tab="菜单区设置" force-render>
+                <div class="flex justify-center">
+                    <Form style="width: 450px;">
+                        <FormItem label="菜单栏默认打开：" class="mb-3">
+                            <Switch v-model:checked="menuOpen" />
+                        </FormItem>
+                        <FormItem label="深色侧边栏：" class="mb-3">
+                            <Switch v-model:checked="menuTheme" />
+                        </FormItem>
+                        <FormItem label="布局：" class="mb-3">
+                            <layout v-model="layoutVlaue"></layout>
+                        </FormItem>
+                    </Form>
+                </div>
+            </TabPane>
+            <TabPane key="3" tab="主题设置">
+                <div class="flex justify-center">
+
+                    <Form style="width: 450px;">
+                        <FormItem label="默认主题：" class="mb-3">
+                            <theme v-model="themeValue"></theme>
+                        </FormItem>
+                        <FormItem label="内置主题：" class="mb-3">
+                            <builtin :isDark="true" v-model="builtinValue"></builtin>
+                        </FormItem>
+                    </Form>
+                </div>
+            </TabPane>
+            <TabPane key="4" tab="消息语音">
+                <div class="flex justify-center">
+                    <Form style="width: 450px;">
+                        <FormItem label="消息语音提醒：" class="mb-3">
+                            <Switch v-model:checked="checked" class="ml-3" />
+                        </FormItem>
+                        <FormItem label="提示语言选择列表：" class="mb-3">
+                            <Select ref="select" class="ml-3" v-model:value="value1" :options="options1"></Select>
+                        </FormItem>
+                        <FormItem label="提示语音选择文件地址" class="mb-3">
+                            <div class="ml-3 flex flex-col gap-2">
+                                无
+                                <div class="flex gap-2">
+                                    <Button type="primary">试听</Button>
+                                    <Button type="primary">上传</Button>
+                                </div>
+                            </div>
+
+                        </FormItem>
+                    </Form>
+                </div>
+            </TabPane>
+        </Tabs>
+        <template #footer>
+            <Button type="link" key="back" @click="close">恢复</Button>
+            <Button key="back" @click="close">取消</Button>
+            <Button key="submit" type="primary" @click="close">确定</Button>
+        </template>
+    </Modal>
+</template>
+<script setup lang="ts">
+import { Modal, Tabs, Form, FormItem, Select, Button, TabPane, Checkbox, Switch, Radio, RadioGroup } from 'ant-design-vue';
+import { FolderOutlined } from '@ant-design/icons-vue';
+import layout from './layout.vue';
+import theme from './theme.vue';
+import builtin from './builtin.vue';
+import { ref, watch } from 'vue';
+import { otherRouter } from "#/router/routes/modules/linkdata"
+import { preferences, updatePreferences } from '@vben/preferences';
+let layoutVlaue = ref(preferences.app.layout)
+watch(layoutVlaue, (n, o) => {
+    updatePreferences({
+        app: {
+            layout: n
+        }
+    })
+
+})
+let themeValue = ref(preferences.theme.mode);
+watch(themeValue, (n, o) => {
+    updatePreferences({
+        theme: {
+            mode: n
+        }
+    })
+})
+let builtinValue = ref(preferences.theme.builtinType);
+watch(builtinValue, (n, o) => {
+    updatePreferences({
+        theme: {
+            builtinType: n
+        }
+    })
+})
+let menuOpen = ref(preferences.sidebar.enable)
+watch(menuOpen, (n, o) => {
+    updatePreferences({
+        sidebar: {
+            enable: n
+        }
+    })
+})
+let menuTheme = ref(preferences.theme.semiDarkSidebar)
+watch(menuTheme, (n, o) => {
+    updatePreferences({
+        theme: {
+            semiDarkSidebar: n
+        }
+    })
+})
+let value1 = ref('')
+let activeKey = ref('1');
+let checked = ref(true)
+let options1 = []
+
+const visible = defineModel<boolean>('visible');
+
+const close = () => {
+    visible.value = false
+}
+
+</script>
\ No newline at end of file
diff --git a/apps/web-test/src/layouts/user/switch.vue b/apps/web-test/src/layouts/user/switch.vue
new file mode 100644
index 00000000..9e84b259
--- /dev/null
+++ b/apps/web-test/src/layouts/user/switch.vue
@@ -0,0 +1,32 @@
+<template>
+    <Modal title="切换租户" :visible="visible" @cancel="close">
+        <!-- <div class="flex justify-center mb-10">请选择您要切换到的租户</div> -->
+        <Form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+            <FormItem label="请选择租户">
+                <Select ref="select" v-model:value="value1" :options="options1"></Select>
+            </FormItem>
+        </Form>
+    </Modal>
+</template>
+<script setup lang="ts">
+import { Modal, Form, FormItem, Select } from 'ant-design-vue';
+import { ref } from 'vue';
+let value1 = ref('1');
+let options1 = [
+    {
+        value: '1',
+        label: '西北油田（xbyt）',
+    },
+    {
+        value: '2',
+        label: '智能油气田（znyqt）',
+    }
+]
+
+const visible = defineModel<boolean>('visible');
+
+const close = () => {
+    visible.value = false
+}
+
+</script>
\ No newline at end of file
diff --git a/apps/web-test/src/layouts/user/theme.vue b/apps/web-test/src/layouts/user/theme.vue
new file mode 100644
index 00000000..165552ab
--- /dev/null
+++ b/apps/web-test/src/layouts/user/theme.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { ThemeModeType } from '@vben/types';
+
+import type { Component } from 'vue';
+
+import { MoonStar, Sun, SunMoon } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+
+defineOptions({
+  name: 'PreferenceTheme',
+});
+
+const modelValue = defineModel<string>({ default: 'auto' });
+
+const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
+  {
+    icon: Sun,
+    name: 'light',
+  },
+  {
+    icon: MoonStar,
+    name: 'dark',
+  },
+  {
+    icon: SunMoon,
+    name: 'auto',
+  },
+];
+
+function activeClass(theme: string): string[] {
+  return theme === modelValue.value ? ['outline-box-active'] : [];
+}
+
+function nameView(name: string) {
+  switch (name) {
+    case 'light': {
+      return $t('preferences.theme.light');
+    }
+    case 'dark': {
+      return $t('preferences.theme.dark');
+    }
+    case 'auto': {
+      return $t('preferences.followSystem');
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap justify-between">
+    <template v-for="theme in THEME_PRESET" :key="theme.name">
+      <div
+        class="flex cursor-pointer flex-col"
+        @click="modelValue = theme.name"
+      >
+        <div
+          :class="activeClass(theme.name)"
+          class="outline-box flex-center py-4"
+        >
+          <component :is="theme.icon" class="mx-9 size-5" />
+        </div>
+        <div class="text-muted-foreground mt-2 text-center text-xs">
+          {{ nameView(theme.name) }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/apps/web-test/src/main.ts b/apps/web-test/src/main.ts
index 5d728a02..e20cee6a 100644
--- a/apps/web-test/src/main.ts
+++ b/apps/web-test/src/main.ts
@@ -2,6 +2,7 @@ import { initPreferences } from '@vben/preferences';
 import { unmountGlobalLoading } from '@vben/utils';
 
 import { overridesPreferences } from './preferences';
+import 'vxe-table/lib/style.css'
 
 /**
  * 应用初始化完成之后再进行页面加载渲染
diff --git a/apps/web-test/src/plugins/fastCrud.ts b/apps/web-test/src/plugins/fastCrud.ts
new file mode 100644
index 00000000..29c46213
--- /dev/null
+++ b/apps/web-test/src/plugins/fastCrud.ts
@@ -0,0 +1,14 @@
+import type { App } from 'vue';
+
+import FastCrud from '@fast-crud/fast-crud';
+import ui from '@fast-crud/ui-antdv4';
+import Antdv from 'ant-design-vue';
+import '@fast-crud/fast-crud/dist/style.css';
+import '@fast-crud/ui-antdv4/dist/style.css';
+
+export function registerFastCrud(app: App) {
+  app.use(Antdv);
+  app.use(ui);
+  app.use(FastCrud, {
+  });
+}
diff --git a/apps/web-test/src/plugins/vxeTable.ts b/apps/web-test/src/plugins/vxeTable.ts
new file mode 100644
index 00000000..850334f0
--- /dev/null
+++ b/apps/web-test/src/plugins/vxeTable.ts
@@ -0,0 +1,202 @@
+import type { App } from 'vue';
+
+import VXETable from 'vxe-table'
+
+import {
+  VxeTable,
+  VxeColumn,
+  VxeColgroup,
+  VxeGrid,
+  VxeToolbar
+} from 'vxe-table'
+
+import VxeUI from 'vxe-pc-ui'
+
+import {
+
+  VxeAlert,
+  VxeAnchor,
+  VxeAnchorLink,
+  VxeBreadcrumb,
+  VxeBreadcrumbItem,
+  VxeButton,
+  VxeButtonGroup,
+  VxeCalendar,
+  VxeCard,
+  VxeCarousel,
+  VxeCheckbox,
+  VxeCheckboxGroup,
+  VxeCol,
+  VxeCollapse,
+  VxeCollapsePane,
+  VxeDatePicker,
+  VxeDrawer,
+  VxeForm,
+  VxeFormDesign,
+  VxeFormGather,
+  VxeFormItem,
+  VxeFormView,
+  VxeIcon,
+  VxeIconPicker,
+  VxeImage,
+  VxeImageGroup,
+  VxeImagePreview,
+  VxeInput,
+  VxeLayoutAside,
+  VxeLayoutBody,
+  VxeLayoutContainer,
+  VxeLayoutFooter,
+  VxeLayoutHeader,
+  VxeLink,
+  VxeListDesign,
+  VxeListView,
+  VxeList,
+  VxeLoading,
+  VxeMenu,
+  VxeModal,
+  VxeNumberInput,
+  VxeOptgroup,
+  VxeOption,
+  VxePager,
+  VxePasswordInput,
+  VxePrintPageBreak,
+  VxePrint,
+  VxePulldown,
+  VxeRadio,
+  VxeRadioButton,
+  VxeRadioGroup,
+  VxeRow,
+  VxeSelect,
+  VxeSwitch,
+  VxeTabPane,
+  VxeTabs,
+  VxeTag,
+  VxeText,
+  VxeTextarea,
+  VxeTip,
+  VxeTooltip,
+  VxeTree,
+  VxeTreeSelect,
+  VxeUpload
+} from 'vxe-pc-ui'
+
+import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
+import ExcelJS from 'exceljs'
+
+import VXETablePluginAntd from 'vxe-table-plugin-antd'
+
+// 导入主题变量，也可以重写主题变量
+import 'vxe-pc-ui/lib/style.css'
+import 'vxe-table/lib/style.css'
+import 'vxe-table/styles/cssvar.scss'
+import 'vxe-pc-ui/styles/cssvar.scss'
+
+// VxeUI.setTheme('dark')
+
+VxeUI.component(VxeAlert)
+VxeUI.component(VxeAnchor)
+VxeUI.component(VxeAnchorLink)
+VxeUI.component(VxeBreadcrumb)
+VxeUI.component(VxeBreadcrumbItem)
+VxeUI.component(VxeButton)
+VxeUI.component(VxeButtonGroup)
+VxeUI.component(VxeCalendar)
+VxeUI.component(VxeCard)
+VxeUI.component(VxeCarousel)
+VxeUI.component(VxeCheckbox)
+VxeUI.component(VxeCheckboxGroup)
+VxeUI.component(VxeCol)
+VxeUI.component(VxeCollapse)
+VxeUI.component(VxeCollapsePane)
+VxeUI.component(VxeDatePicker)
+VxeUI.component(VxeDrawer)
+VxeUI.component(VxeForm)
+VxeUI.component(VxeFormDesign)
+VxeUI.component(VxeFormGather)
+VxeUI.component(VxeFormItem)
+VxeUI.component(VxeFormView)
+VxeUI.component(VxeIcon)
+VxeUI.component(VxeIconPicker)
+VxeUI.component(VxeImage)
+VxeUI.component(VxeImageGroup)
+VxeUI.component(VxeImagePreview)
+VxeUI.component(VxeInput)
+VxeUI.component(VxeLayoutAside)
+VxeUI.component(VxeLayoutBody)
+VxeUI.component(VxeLayoutContainer)
+VxeUI.component(VxeLayoutFooter)
+VxeUI.component(VxeLayoutHeader)
+VxeUI.component(VxeLink)
+VxeUI.component(VxeListDesign)
+VxeUI.component(VxeListView)
+VxeUI.component(VxeList)
+VxeUI.component(VxeLoading)
+VxeUI.component(VxeMenu)
+VxeUI.component(VxeModal)
+VxeUI.component(VxeNumberInput)
+VxeUI.component(VxeOptgroup)
+VxeUI.component(VxeOption)
+VxeUI.component(VxePager)
+VxeUI.component(VxePasswordInput)
+VxeUI.component(VxePrintPageBreak)
+VxeUI.component(VxePrint)
+VxeUI.component(VxePulldown)
+VxeUI.component(VxeRadio)
+VxeUI.component(VxeRadioButton)
+VxeUI.component(VxeRadioGroup)
+VxeUI.component(VxeRow)
+VxeUI.component(VxeSelect)
+VxeUI.component(VxeSwitch)
+VxeUI.component(VxeTabPane)
+VxeUI.component(VxeTabs)
+VxeUI.component(VxeTag)
+VxeUI.component(VxeText)
+VxeUI.component(VxeTextarea)
+VxeUI.component(VxeTip)
+VxeUI.component(VxeTooltip)
+VxeUI.component(VxeTree)
+VxeUI.component(VxeTreeSelect)
+VxeUI.component(VxeUpload)
+
+VxeUI.component(VxeTable)
+VxeUI.component(VxeColumn)
+VxeUI.component(VxeColgroup)
+VxeUI.component(VxeGrid)
+VxeUI.component(VxeToolbar)
+
+VXETable.use(VXETablePluginAntd)
+
+VXETable.use(VXETablePluginExportXLSX, {
+  ExcelJS
+})
+
+VXETable.setConfig({
+  // zIndex: 9999,
+  grid: {
+    size: 'mini',
+    proxyConfig: {
+      props: {
+        result: 'data.rows',
+        total: 'data.total',
+      },
+    },
+    toolbarConfig: {
+      enabled: true,
+    },
+  },
+
+  pager: {
+    background: true,
+    pageSize: 50,
+    pageSizes: [50, 100, 300, 500, 1000],
+    layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
+  },
+})
+export function registerVxeTable(app: App) {
+  app.use(VxeUI)
+  app.use(VxeTable)
+  app.use(VxeColumn)
+  app.use(VxeColgroup)
+  app.use(VxeGrid)
+  app.use(VxeToolbar)
+}
diff --git a/apps/web-test/src/preferences.ts b/apps/web-test/src/preferences.ts
index cfe4e788..1f86698c 100644
--- a/apps/web-test/src/preferences.ts
+++ b/apps/web-test/src/preferences.ts
@@ -30,4 +30,13 @@ export const overridesPreferences = defineOverridesPreferences({
     preferencesButtonPosition: 'auto',
     watermark: false,
   },
+  logo: {
+    source: '/logo1.png',
+  },
+  shortcutKeys: {
+    globalSearch: false,
+  },
+  header: {
+    height: 60,
+  }
 });
diff --git a/apps/web-test/src/router/routes/modules/dashboard.ts b/apps/web-test/src/router/routes/modules/dashboard.ts
index c83eeb0b..3f60bfe2 100644
--- a/apps/web-test/src/router/routes/modules/dashboard.ts
+++ b/apps/web-test/src/router/routes/modules/dashboard.ts
@@ -2,48 +2,140 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import { BasicLayout } from '#/layouts';
 
+import { firstRouter, otherRouter } from "./linkdata"
+
+const getRouter = (list: any, type: string) => {
+  let obj = [];
+  if (type == 'first') {
+    for (let i = 0; i < list.children.length; i++) {
+      obj.push({
+        name: list.children[i]?.rName,
+        path: '',
+        component: () => null,
+        meta: {
+          title: list.children[i]?.name,
+          link: list.children[i]?.url
+        },
+      })
+    }
+  } else {
+    for (let i = 0; i < list.length; i++) {
+      let chunk:any = {}
+      chunk.component = BasicLayout;
+        chunk.meta = {
+          icon: 'lucide:layout-dashboard',
+          title: list[i].name,
+          order: i,
+        };
+        chunk.name = list[i].rName;
+        chunk.path = '/'+list[i].rName;
+
+        chunk.children = [];
+        for (let j = 0; j < list[i].children.length; j++) {
+          chunk.children.push({
+            name: list[i].children[j]?.rName,
+            path: '',
+            component: () => null,
+            meta: {
+              title: list[i].children[j]?.name,
+              link: list[i].children[j]?.url
+            },
+          })
+        }
+    obj.push(chunk)
+    }
+  }
+
+  return obj
+}
+
+
 const routes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
       icon: 'lucide:layout-dashboard',
       order: -1,
-      title: '首页',
+      title: '总部系统',
     },
-    name: 'Dashboard',
+    name: 'zbxt',
     path: '/home',
     children: [
       {
         name: 'home',
         path: '/home',
         component: () => import('#/views/dashboard/home/index.vue'),
+        // component: () => import('#/views/dashboard/home/main.vue'),
         meta: {
-          affixTab: true,
           hideInMenu: true,
           icon: 'lucide:area-chart',
-          title: '首页',
+          title: '总部系统',
+          affixTab: true
+        },
+      },
+
+      ...getRouter(firstRouter, 'first'),
+      {
+        name: 'portal',
+        path: '/portal',
+        component: () => import('#/views/dashboard/home/portal.vue'),
+        // component: () => import('#/views/dashboard/home/main.vue'),
+        meta: {
+          hideInMenu: true,
+          icon: 'lucide:area-chart',
+          title: '磁贴管理',
+        },
+      },
+      {
+        name: 'audit',
+        path: '/audit',
+        component: () => import('#/views/dashboard/home/audit.vue'),
+        // component: () => import('#/views/dashboard/home/main.vue'),
+        meta: {
+          hideInMenu: true,
+          icon: 'lucide:area-chart',
+          title: '磁贴审核',
         },
       },
       // {
-      //   name: 'Analytics',
-      //   path: '/analytics',
-      //   component: () => import('#/views/dashboard/analytics/index.vue'),
+      //   name: 'test',
+      //   path: '/test',
+      //   component: () => import('#/views/dashboard/home/test.vue'),
+      //   // component: () => import('#/views/dashboard/home/main.vue'),
       //   meta: {
-      //     affixTab: true,
       //     icon: 'lucide:area-chart',
-      //     title: $t('page.dashboard.analytics'),
+      //     title: '测试',
+      //   },
+      // },
+      // {
+      //   name: 'zshxgw',
+      //   path: '',
+      //   component: () => null,
+      //   meta: {
+      //     title: '中石化新公文系统',
+      //     link: 'http://www.baidu.com'
+      //   },
+      // },
+      // {
+      //   name: 'zshht',
+      //   path: '',
+      //   component: () => null,
+      //   meta: {
+      //     title: '中石化合同系统',
+      //     link: 'http://www.baidu.com'
       //   },
       // },
       // {
       //   name: 'Workspace',
       //   path: '/workspace',
-      //   component: () => import('#/views/dashboard/workspace/index.vue'),
+      //   component: () => import('#/views/dashboard/wor kspace/index.vue'),
       //   meta: {
       //     title: $t('page.dashboard.workspace'),
       //   },
       // },
     ],
   },
+...getRouter(otherRouter,'other')
 ];
 
 export default routes;
diff --git a/apps/web-test/src/router/routes/modules/demos.ts b/apps/web-test/src/router/routes/modules/demos.ts
index fa28acc7..296d4a1f 100644
--- a/apps/web-test/src/router/routes/modules/demos.ts
+++ b/apps/web-test/src/router/routes/modules/demos.ts
@@ -1,30 +1,31 @@
-import type { RouteRecordRaw } from 'vue-router';
+// import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
-import { $t } from '#/locales';
+// import { BasicLayout } from '#/layouts';
+// import { $t } from '#/locales';
 
-const routes: RouteRecordRaw[] = [
-  {
-    component: BasicLayout,
-    meta: {
-      icon: 'ic:baseline-view-in-ar',
-      keepAlive: true,
-      order: 1000,
-      title: $t('page.demos.title'),
-    },
-    name: 'Demos',
-    path: '/demos',
-    children: [
-      {
-        meta: {
-          title: $t('page.demos.antd'),
-        },
-        name: 'AntDesignDemos',
-        path: '/demos/ant-design',
-        component: () => import('#/views/demos/antd/index.vue'),
-      },
-    ],
-  },
-];
+// const routes: RouteRecordRaw[] = [
+//   {
+//     component: BasicLayout,
+//     meta: {
+//       icon: 'ic:baseline-view-in-ar',
+//       keepAlive: true,
+//       order: 1000,
+//       title: $t('page.demos.title'),
+//     },
+//     name: 'Demos',
+//     path: '/demos',
+//     children: [
+//       {
+//         meta: {
+//           title: $t('page.demos.antd'),
+//         },
+//         name: 'AntDesignDemos',
+//         path: '/demos/ant-design',
+//         component: () => import('#/views/demos/antd/index.vue'),
+//       },
+//     ],
+//   },
+// ];
 
-export default routes;
+// export default routes;
+export default [];
diff --git a/apps/web-test/src/router/routes/modules/linkdata.ts b/apps/web-test/src/router/routes/modules/linkdata.ts
new file mode 100644
index 00000000..36cc3df6
--- /dev/null
+++ b/apps/web-test/src/router/routes/modules/linkdata.ts
@@ -0,0 +1,232 @@
+let firstRouter = {
+    "name": "总部系统",
+    "children": [
+        {
+            "name": "中石化新公文系统",
+            "url": "https://newoa12.sinopec.com?pageCode=zbxt_new_oa",
+            "rName": "zbxt_new_oa"
+        },
+        {
+            "name": "中石化移动应用平台",
+            "url": "https://console.m.sinopec.com/ACWeb/Portal/IndexPage?pageCode=zbxt_ydyypt",
+            "rName": "zbxt_ydyypt"
+        },
+        {
+            "name": "中石化合同系统",
+            "url": "https://cmis.sinopec.com/zen/portal/#/home?pageCode=zbxt_htxt",
+            "rName": "zbxt_htxt"
+        },
+        {
+            "name": "中石化党群管理系统",
+            "url": "https://dj.sinopec.com?pageCode=zbxt_dqgl",
+            "rName": "zbxt_dqgl"
+        },
+        {
+            "name": "中石化法律共享平台",
+            "url": "http://slsp.sinopec.com?pageCode=zbxt_flgl",
+            "rName": "zbxt_flgl"
+        },
+        {
+            "name": "中石化安全管理系统",
+            "url": "http://safety.sinopec.com:8000/IPWeb/Home?pageCode=zbxt_aqgl",
+            "rName": "zbxt_aqgl"
+        },
+        {
+            "name": "中石化法治合规管理",
+            "url": "https://lcrs.sinopec.com/?pageCode=zbxt_nkglxt",
+            "rName": "zbxt_nkglxt"
+        },
+        {
+            "name": "中石化制度管理系统",
+            "url": "http://10.249.201.77?pageCode=zbxt_zdgl",
+            "rName": "zbxt_zdgl"
+        },
+        {
+            "name": "中石化信息化标准系统",
+            "url": "http://infostd.sinopec.com/?pageCode=zbxt_xxhbz",
+            "rName": "zbxt_xxhbz"
+        },
+        {
+            "name": "中石化网络学院",
+            "url": "https://sia.sinopec.com/learn/index.html?pageCode=zbxt_wlxy",
+            "rName": "zbxt_wlxy"
+        },
+        {
+            "name": "中石化科技管理平台",
+            "url": "http://istm.sinopec.com/?pageCode=zbxt_kjglpt",
+            "rName": "zbxt_kjglpt"
+        },
+        {
+            "name": "中石化信创邮件系统",
+            "url": "https://webmail.sinopec.com/?pageCode=zbxt_xcyj",
+            "rName": "zbxt_xcyj"
+        }
+    ]
+}
+
+let otherRouter = 
+    [
+        {
+            "name": "经营管理",
+            "children": [
+                {
+                    "name": "市场管理信息系统",
+                    "url": "https://xbscgl.xbyt.sinopec.com?pageCode=jygl_scglxx",
+                    "rName": "jygl_scglxx"
+                },
+                {
+                    "name": "工程造价管理",
+                    "url": "http://10.16.0.157:8082/xbscjyweb?pageCode=jygl_gczjgl",
+                    "rName": "jygl_gczjgl"
+                }
+            ],
+            "rName": "jygl"
+        },
+        {
+            "name": "勘探开发",
+            "icon": "lucide:area-chart",
+            "children": [
+                {
+                    "name": "油气开发平台",
+                    "url": "http://yqkfyw.xbyt.sinopec.com/webptframe/home_navtree_hn.html?pageCode=yqkfyw_kfpt",
+                    "rName": "yqkfyw_kfpt"
+                },
+                {
+                    "name": "地面工程GIS",
+                    "url": "https://ssco.xbsj.sinopec.com/DMGCFZ//HomeXBYTGISFront/Index?pageCode=yqkfyw_gis",
+                    "rName": "yqkfyw_gis"
+                },
+                {
+                    "name": "设备管理系统",
+                    "url": "https://sbgl.xbyt.sinopec.com:9006/XBEM?pageCode=yqkfyw_sbxt",
+                    "rName": "yqkfyw_sbxt"
+                },
+                {
+                    "name": "石油工程决策系统",
+                    "url": "https://gcjc.xbyt.sinopec.com?pageCode=yqkfyw_sygc",
+                    "rName": "yqkfyw_sygc"
+                },
+                {
+                    "name": "完井快报",
+                    "url": "http://xbyt.sinopec.com/wczx/Lists/sc/SinopecAllItems.aspx?pageCode=yqkfyw_",
+                    "rName": "yqkfyw_"
+                },
+                {
+                    "name": "钻井数据库系统",
+                    "url": "http://10.16.0.74/tyrz_zjsjk/?pageCode=yqkfyw_zjsjk",
+                    "rName": "yqkfyw_zjsjk"
+                },
+                {
+                    "name": "完井测试日报",
+                    "url": "http://xbyt.sinopec.com/wczx/Lists/kt/SinopecAllItems.aspx?pageCode=yqkfyw_wjcs",
+                    "rName": "yqkfyw_wjcs"
+                },
+                {
+                    "name": "IPPE",
+                    "url": "http://ippe.sinopec.com/?pageCode=yqkfyw_ippe",
+                    "rName": "yqkfyw_ippe"
+                }
+            ],
+            "rName": "yqkfyw"
+        },
+        {
+            "name": "安全生产",
+            "children": [
+                {
+                    "name": "生产重点",
+                    "url": "http://10.16.128.237:9528/yxrb/zdbb/scxxyxrb?pageCode=scyx_zdjxx",
+                    "rName": "scyx_zdjxx"
+                },
+                {
+                    "name": "集输防腐数据平台",
+                    "url": "https://dmgcysbgl.xbyt.sinopec.com:8080/xbyqjs//xbjqmh_1.0.0/mh/loginSuccess.action?pageCode=scyx_jsffsj",
+                    "rName": "scyx_jsffsj"
+                },
+                {
+                    "name": "土地信息管理系统",
+                    "url": "http://10.16.0.73:8888/xbtd?pageCode=scyx_tdxxgl",
+                    "rName": "scyx_tdxxgl"
+                },
+                {
+                    "name": "HSSE管理系统",
+                    "url": "http://10.16.128.247:8088/?pageCode=scyx_hseglxx",
+                    "rName": "scyx_hseglxx"
+                },
+                {
+                    "name": "生产运行（应急）指挥中心协同平台",
+                    "url": "http://10.16.66.120:8088/home?pageCode=scyx_yjzhxt",
+                    "rName": "scyx_yjzhxt"
+                }
+            ],
+            "rName": "scyx"
+        },
+        {
+            "name": "综合行政",
+            "children": [
+                {
+                    "name": "领导请销假",
+                    "url": "https://10.16.0.128/xjOA/main/login/leave.jsp?pageCode=gcgl_ldqxj",
+                    "rName": "gcgl_ldqxj"
+                },
+                {
+                    "name": "督办管理",
+                    "url": "https://10.16.0.128/xjOA/main/login/urge.jsp?pageCode=gcgl_db",
+                    "rName": "gcgl_db"
+                },
+                {
+                    "name": "员工诉求",
+                    "url": "https://10.16.0.128/xjOA/main/login/appeal.jsp?pageCode=gcgl_ygsq",
+                    "rName": "gcgl_ygsq"
+                },
+                {
+                    "name": "会议管理系统",
+                    "url": "http://10.16.0.128:8089/HYXT/?pageCode=gcgl_hyxt",
+                    "rName": "gcgl_hyxt"
+                }
+            ],
+            "rName": "gcgl"
+        },
+        {
+            "name": "数据管理",
+            "children": [
+                {
+                    "name": "GIS数据服务",
+                    "url": "http://10.16.0.210:8017?pageCode=sjgl_gissjfw",
+                    "rName": "sjgl_gissjfw"
+                },
+                {
+                    "name": "EPBP",
+                    "url": "http://10.16.128.130/blankSSO.action?pageCode=sjgl_EPBP_ktkfsjcj",
+                    "rName": "sjgl_EPBP_ktkfsjcj"
+                },
+                {
+                    "name": "单井数据服务",
+                    "url": "https://ssco.xbsj.sinopec.com/djsjfw/goto.html?pageCode=sjgl_djsjfw",
+                    "rName": "sjgl_djsjfw"
+                },
+                {
+                    "name": "数据管理平台",
+                    "url": "http://10.16.3.30:10008/?pageCode=sjgl_sjgl",
+                    "rName": "sjgl_sjgl"
+                },
+                {
+                    "name": "文档资料共享环境",
+                    "url": "https://10.16.67.140/xbsjzlgx/sso?pageCode=sjgl_wdzlgx",
+                    "rName": "sjgl_wdzlgx"
+                },
+                {
+                    "name": "视频共享平台",
+                    "url": "http://10.16.128.81:8020/?pageCode=sjgl_spgxpt",
+                    "rName": "sjgl_spgxpt"
+                },
+                {
+                    "name": "smartbi报表工具",
+                    "url": "http://10.16.67.135:18080/smartbi/vision/index.jsp?pageCode=sjgl_smartbi",
+                    "rName": "sjgl_smartbi"
+                }
+            ],
+            "rName": "sjgl"
+        }
+    ]
+
+export { firstRouter, otherRouter };
\ No newline at end of file
diff --git a/apps/web-test/src/router/routes/modules/vben.ts b/apps/web-test/src/router/routes/modules/vben.ts
index 46947212..ff4bd291 100644
--- a/apps/web-test/src/router/routes/modules/vben.ts
+++ b/apps/web-test/src/router/routes/modules/vben.ts
@@ -1,81 +1,82 @@
-import type { RouteRecordRaw } from 'vue-router';
+// import type { RouteRecordRaw } from 'vue-router';
 
-import {
-  VBEN_DOC_URL,
-  VBEN_ELE_PREVIEW_URL,
-  VBEN_GITHUB_URL,
-  VBEN_LOGO_URL,
-  VBEN_NAIVE_PREVIEW_URL,
-} from '@vben/constants';
+// import {
+//   VBEN_DOC_URL,
+//   VBEN_ELE_PREVIEW_URL,
+//   VBEN_GITHUB_URL,
+//   VBEN_LOGO_URL,
+//   VBEN_NAIVE_PREVIEW_URL,
+// } from '@vben/constants';
 
-import { BasicLayout, IFrameView } from '#/layouts';
-import { $t } from '#/locales';
+// import { BasicLayout, IFrameView } from '#/layouts';
+// import { $t } from '#/locales';
 
-const routes: RouteRecordRaw[] = [
-  {
-    component: BasicLayout,
-    meta: {
-      badgeType: 'dot',
-      icon: VBEN_LOGO_URL,
-      order: 9999,
-      title: $t('page.vben.title'),
-    },
-    name: 'VbenProject',
-    path: '/vben-admin',
-    children: [
-      {
-        name: 'VbenAbout',
-        path: '/vben-admin/about',
-        component: () => import('#/views/_core/about/index.vue'),
-        meta: {
-          icon: 'lucide:copyright',
-          title: $t('page.vben.about'),
-        },
-      },
-      {
-        name: 'VbenDocument',
-        path: '/vben-admin/document',
-        component: IFrameView,
-        meta: {
-          icon: 'lucide:book-open-text',
-          link: VBEN_DOC_URL,
-          title: $t('page.vben.document'),
-        },
-      },
-      {
-        name: 'VbenGithub',
-        path: '/vben-admin/github',
-        component: IFrameView,
-        meta: {
-          icon: 'mdi:github',
-          link: VBEN_GITHUB_URL,
-          title: 'Github',
-        },
-      },
-      {
-        name: 'VbenNaive',
-        path: '/vben-admin/naive',
-        component: IFrameView,
-        meta: {
-          badgeType: 'dot',
-          icon: 'logos:naiveui',
-          link: VBEN_NAIVE_PREVIEW_URL,
-          title: $t('page.vben.naive-ui'),
-        },
-      },
-      {
-        name: 'VbenElementPlus',
-        path: '/vben-admin/ele',
-        component: IFrameView,
-        meta: {
-          badgeType: 'dot',
-          icon: 'logos:element',
-          link: VBEN_ELE_PREVIEW_URL,
-          title: $t('page.vben.element-plus'),
-        },
-      },
-    ],
-  },
-];
+// const routes: RouteRecordRaw[] = [
+//   {
+//     component: BasicLayout,
+//     meta: {
+//       badgeType: 'dot',
+//       icon: VBEN_LOGO_URL,
+//       order: 9999,
+//       title: $t('page.vben.title'),
+//     },
+//     name: 'VbenProject',
+//     path: '/vben-admin',
+//     children: [
+//       {
+//         name: 'VbenAbout',
+//         path: '/vben-admin/about',
+//         component: () => import('#/views/_core/about/index.vue'),
+//         meta: {
+//           icon: 'lucide:copyright',
+//           title: $t('page.vben.about'),
+//         },
+//       },
+//       {
+//         name: 'VbenDocument',
+//         path: '/vben-admin/document',
+//         component: IFrameView,
+//         meta: {
+//           icon: 'lucide:book-open-text',
+//           link: VBEN_DOC_URL,
+//           title: $t('page.vben.document'),
+//         },
+//       },
+//       {
+//         name: 'VbenGithub',
+//         path: '/vben-admin/github',
+//         component: IFrameView,
+//         meta: {
+//           icon: 'mdi:github',
+//           link: VBEN_GITHUB_URL,
+//           title: 'Github',
+//         },
+//       },
+//       {
+//         name: 'VbenNaive',
+//         path: '/vben-admin/naive',
+//         component: IFrameView,
+//         meta: {
+//           badgeType: 'dot',
+//           icon: 'logos:naiveui',
+//           link: VBEN_NAIVE_PREVIEW_URL,
+//           title: $t('page.vben.naive-ui'),
+//         },
+//       },
+//       {
+//         name: 'VbenElementPlus',
+//         path: '/vben-admin/ele',
+//         component: IFrameView,
+//         meta: {
+//           badgeType: 'dot',
+//           icon: 'logos:element',
+//           link: VBEN_ELE_PREVIEW_URL,
+//           title: $t('page.vben.element-plus'),
+//         },
+//       },
+//     ],
+//   },
+// ];
 
-export default routes;
+// export default routes;
+export default [];
diff --git a/apps/web-test/src/views/dashboard/home/NestedComponent.vue b/apps/web-test/src/views/dashboard/home/NestedComponent.vue
new file mode 100644
index 00000000..bf6c4359
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/NestedComponent.vue
@@ -0,0 +1,38 @@
+<template>
+  <VueDraggable class="drag-area" tag="ul" v-model="list" group="g1">
+    <li v-for="el in modelValue" :key="el.name" class="grup-box">
+      <p>{{ el.name }}</p>
+      <nested-component v-model="el.children" />
+    </li>
+  </VueDraggable>
+</template>
+<script setup lang="ts">
+import { VueDraggable } from 'vue-draggable-plus'
+import { computed } from 'vue'
+
+interface IList {
+  name: string
+  children: IList[]
+}
+
+interface Props {
+  modelValue: IList[]
+}
+
+const props = defineProps<Props>()
+
+interface Emits {
+  (e: 'update:modelValue', value: IList[]): void
+}
+
+const emits = defineEmits<Emits>()
+const list = computed({
+  get: () => props.modelValue,
+  set: value => emits('update:modelValue', value)
+})
+</script>
+<style scoped>
+.drag-area {
+  min-height: 50px;
+}
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/audit.vue b/apps/web-test/src/views/dashboard/home/audit.vue
new file mode 100644
index 00000000..8132dbe0
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/audit.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="main-box bg-[#ecf3f8] px-3 mt-3 h-[100%]">
+        <div class="top-box flex justify-between items-center">
+            <Button type="primary">批量审批</Button>
+            <div class="flex items-center gap-2">
+                <VbenIconButton
+                    class="hover:text-[#007da3] w-[30px] h-[30px] flex justify-center items-center rounded-[50%]">
+                    <UnorderedListOutlined />
+                </VbenIconButton>
+            </div>
+        </div>
+        <CardTitle :type="'audit'" :list="list" />
+    </div>
+</template>
+<script setup lang="ts">
+import {
+    VbenIconButton,
+} from '@vben-core/shadcn-ui';
+import CardTitle from './components/CardTiles/index.vue';
+import { UnorderedListOutlined } from '@ant-design/icons-vue';
+import { Button} from 'ant-design-vue';
+import { tilesList } from './tiles'
+
+let list: any[] = []
+for (let i = tilesList.length; i > 0; i--) {
+    if(!tilesList[i]?.name) continue;
+    let obj: any = {}
+    obj.name = tilesList[i]?.name;
+    obj.url = tilesList[i]?.name2;
+    obj.work = '经营管理';
+    obj.code = tilesList[i]?.name1.split('.')[0];
+    list.push(obj);
+    obj = null
+}
+</script>
+<style scoped lang="scss">
+.tiles-list {
+    border-top: 1px solid #ddd;
+}
+
+.card-bt-box {
+    border-top: 1px solid #ddd;
+}
+
+.card-box:hover {
+    .mask-box {
+        display: block;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/components/CardTiles/index.vue b/apps/web-test/src/views/dashboard/home/components/CardTiles/index.vue
new file mode 100644
index 00000000..b1817b81
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/components/CardTiles/index.vue
@@ -0,0 +1,111 @@
+<template>
+    <div class="content-box bg-[#fff] px-3 mt-2 h-[100%]">
+        <div class="filter-box py-3">
+            <Form layout="inline">
+                <FormItem label="标题">
+                    <Input class="!w-[150px]"></Input>
+                </FormItem>
+                <FormItem label="业务域">
+                    <Select placeholder="请选择" class="!w-[150px]"></Select>
+                </FormItem>
+                <FormItem label="适用范围">
+                    <Select v-model:value="scope" :options="options2" placeholder="请选择" class="!w-[150px]"></Select>
+                </FormItem>
+                <FormItem label="状态" v-if="type == 'portal'">
+                    <Select placeholder="请选择" class="!w-[150px]"></Select>
+                </FormItem>
+                <FormItem>
+                    <Button type="primary">查询</Button>
+                </FormItem>
+            </Form>
+        </div>
+        <div class="tiles-list flex flex-wrap justify-stretch gap-4 py-3 ">
+            <Card class="w-[18%] relative card-box" :bodyStyle="{ padding: 0 }"
+                v-for="(item, index) in list.slice(0, 10)" :key="index">
+                <div class="card-tp-b flex flex-col items-center">
+                    <img :src="'/xbyt/' + item.url" alt="" class="mt-3 w-[100px] h-[100px]">
+                    <div class="text-sm pb-2">{{ item.name }}</div>
+                </div>
+                <div class="card-bt-box pt-2 pl-6 text-xs flex flex-col gap-1 pb-3">
+                    <div class="c-b-item flex">
+                        <div class="font-semibold">编码：</div>{{ item.code }}
+                    </div>
+                    <div class="c-b-item flex">
+                        <div class="font-semibold">标题：</div>{{ item.name }}
+                    </div>
+                    <div class="c-b-item flex">
+                        <div class="font-semibold">业务域：</div>{{ item.work }}
+                    </div>
+                </div>
+                <div class="mask-box hidden">
+                    <div v-if="type == 'portal'"
+                        class="absolute inset-x-0 inset-y-0 bg-[rgba(0,0,0,.3)] flex items-center justify-center gap-4">
+                        <Button type="primary">修改</Button>
+                        <Button type="primary" danger>删除</Button>
+                    </div>
+                    <div v-else-if="type == 'audit'"
+                        class="absolute inset-x-0 inset-y-0 bg-[rgba(0,0,0,.3)] flex items-center justify-center gap-4">
+                        <Button type="primary">通过</Button>
+                        <Button type="primary" danger>驳回</Button>
+                    </div>
+                    <ExpandOutlined class="absolute top-2 right-2 text-[#fff]" />
+                </div>
+            </Card>
+        </div>
+        <div class="flex justify-end">
+            <Pagination v-model:current="current" :total="500" />
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref,toRefs } from 'vue';
+
+import { ExpandOutlined } from '@ant-design/icons-vue';
+import { Button, Form, FormItem, Input, Select, Card, Pagination } from 'ant-design-vue';
+import { tilesList } from '../../tiles'
+const props = defineProps({
+  type: {
+    type: String,
+    default: ''
+  },
+  list: {
+    type: Object,
+    default: []
+  }
+})
+
+let { list,type } = toRefs(props);
+for (let i = 0; i < tilesList.length; i++) {
+    let obj: any = {}
+    obj.name = tilesList[i]?.name;
+    obj.url = tilesList[i]?.name2;
+    obj.work = '经营管理';
+    obj.code = tilesList[i]?.name1.split('.')[0];
+    list.value.push(obj);
+    obj = null
+}
+let scope = 'all'
+
+const options2 = [
+    {
+        value: 'all',
+        label: '全部',
+    },
+]
+let current = ref(1)
+</script>
+<style scoped lang="scss">
+.tiles-list {
+    border-top: 1px solid #ddd;
+}
+
+.card-bt-box {
+    border-top: 1px solid #ddd;
+}
+
+.card-box:hover {
+    .mask-box {
+        display: block;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/components/GridGroup/index.vue b/apps/web-test/src/views/dashboard/home/components/GridGroup/index.vue
new file mode 100644
index 00000000..5faf0602
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/components/GridGroup/index.vue
@@ -0,0 +1,455 @@
+<script setup>
+import { defineAsyncComponent, getCurrentInstance, markRaw, onMounted, ref,nextTick } from 'vue';
+
+import { UndoOutlined, CheckOutlined, CloseCircleFilled, QuestionCircleOutlined, SyncOutlined, ShoppingCartOutlined, EditOutlined } from '@ant-design/icons-vue';
+import { CheckboxGroup, Checkbox, Collapse, CollapsePanel, FloatButtonGroup, FloatButton, BackTop, Popover } from 'ant-design-vue';
+
+
+import { toRefs } from 'vue'
+
+const props = defineProps({
+  list: {
+    type: Object,
+    default: []
+  },
+})
+let { list } = toRefs(props);
+
+const { proxy } = getCurrentInstance();
+const layout = ref(JSON.parse(JSON.stringify(list.value)));
+onMounted(() => {
+  layout.value = [
+    {
+      "x": 1,
+      "y": 0,
+      "w": 1,
+      "h": 2,
+      "i": "1728964990256",
+      "component": {
+        "name1": "AUTO_1612155980933.png",
+        "name2": "AUTO_1612155980933_C会议管理.png",
+        "size": "2x2",
+        "name": "会议管理",
+        "w": 1,
+        "h": 2,
+        "component": "../Output1/index.vue",
+        "i": 0
+      },
+    },
+    {
+      "x": 4,
+      "y": 0,
+      "w": 1,
+      "h": 2,
+      "i": "1728965029729",
+      "component": {
+        "name1": "AUTO_1612155980933.png",
+        "name2": "AUTO_1612155980933_C会议管理.png",
+        "size": "2x2",
+        "name": "会议管理",
+        "w": 1,
+        "h": 2,
+        "component": "../Output1/index.vue",
+        "i": 0
+      },
+    },
+  ]
+})
+const colNum = 12;
+let defaultH = 2;
+let defaultW = 2;
+const mouseXY = {
+  x: null,
+  y: null,
+};
+const DragPos = {
+  x: null,
+  y: null,
+  w: null,
+  h: null,
+  i: null,
+};
+//  [
+//   {
+//     id: '1-1',
+//     title: '磁贴管理(2×2)',
+//     name: 'xl',
+//     component: './components/Output1/index.vue',
+//     des: '磁贴管理(2×2)',
+//     w: 1,
+//     h: 2,
+//     img: 'WORKBENCH_MANAGER.png'
+//   },
+//   {
+//     id: '1-2',
+//     title: '饼图示例(8×8)',
+//     name: 'xxl',
+//     component: './components/Output2/index.vue',
+//     des: '饼图示例(8×8)',
+//     w: 8,
+//     h: 8,
+//     img: 'AUTO_1620294688040.png'
+//   },
+//   {
+//     id: '1-3',
+//     title: '报表示例(4×4)',
+//     name: 'xxxl',
+//     component: './components/Output3/index.vue',
+//     des: '报表示例(4×4)',
+//     w: 4,
+//     h: 4,
+//     img: "AUTO_1621594591994.png"
+//   },
+//   {
+//     id: '1-4',
+//     title: '列表示例(16×8)',
+//     name: 'xxxxl',
+//     component: './components/Output4/index.vue',
+//     des: '列表示例(16×8)',
+//     w: 16,
+//     h: 8,
+//     img: 'AUTO_1620296071109.png'
+//   },
+// ];
+let currentDragCom = null;
+onMounted(() => {
+  document.addEventListener(
+    'dragover',
+    (e) => {
+      e.preventDefault();
+      mouseXY.x = e.clientX;
+      mouseXY.y = e.clientY;
+    },
+    false,
+  );
+  document.addEventListener('dragenter', (event) => {
+    // 阻止默认行为
+    event.preventDefault();
+  });
+  processLayout(layout.value);
+});
+// 引入组件
+const loadComponent = (path) => {
+  return defineAsyncComponent(markRaw(() => import(`${path}`)));
+};
+// 处理布局数据中的组件
+const processLayout = (layoutSetInfo) => {
+  for (const item of layoutSetInfo) {
+    if (!item.component) {
+      continue;
+    }
+    const resComp = loadComponent(item.component.component);
+    item.loadComp = resComp;
+  }
+};
+
+const dragstart = (e, item) => {
+  e.dataTransfer.effectAllowed = 'move';
+  currentDragCom = item;
+  defaultH = item.h;
+  defaultW = item.w;
+};
+const drag = (e, item) => {
+  e.preventDefault && e.preventDefault();
+  const parentRect = document
+    .querySelector('.grid-box')
+    .getBoundingClientRect();
+  let mouseInGrid = false;
+  if (
+    mouseXY.x > parentRect.left &&
+    mouseXY.x < parentRect.right &&
+    mouseXY.y > parentRect.top &&
+    mouseXY.y < parentRect.bottom
+  ) {
+    mouseInGrid = true;
+  }
+  if (mouseInGrid === true && !layout.value.some((item) => item.i === 'drop')) {
+    layout.value.push({
+      x: (layout.value.length * 2) % (colNum || 12),
+      y: layout.value.length + (colNum || 12),
+      w: defaultW,
+      h: defaultH,
+      i: 'drop',
+    });
+  }
+  const index = layout.value.findIndex((item) => item.i === 'drop');
+  if (index !== -1) {
+    try {
+      proxy.$refs.gridItem[layout.value.length - 1].$refs.item.style.display =
+        'none';
+    } catch { }
+
+    const el = proxy.$refs.gridItem ? proxy.$refs.gridItem[index] : null;
+    if (el) {
+      el.dragging = {
+        top: mouseXY.y - parentRect.top,
+        left: mouseXY.x - parentRect.left,
+      };
+      const new_pos =
+        el &&
+        el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left);
+      if (mouseInGrid === true) {
+        //  function dragEvent(eventName, id, x, y, h, w)
+        proxy.$refs.gridLayout.dragEvent(
+          'dragstart',
+          'drop',
+          new_pos.x || 0,
+          new_pos.y || 0,
+          defaultH,
+          defaultW,
+        );
+        DragPos.i = String(Date.now());
+        DragPos.x = layout.value[index].x;
+        DragPos.y = layout.value[index].y;
+      }
+      if (mouseInGrid === false) {
+        proxy.$refs.gridLayout.dragEvent(
+          'dragend',
+          'drop',
+          new_pos.x || 0,
+          new_pos.y || 0,
+          defaultH,
+          defaultW,
+        );
+        layout.value = layout.value.filter((obj) => obj.i !== 'drop');
+      }
+    }
+  }
+};
+const dragend = (e) => {
+  console.log('eeeee',e);
+  tilesIsMove.value = false;
+  const parentRect = document
+    .querySelector('.grid-box')
+    .getBoundingClientRect();
+  let mouseInGrid = false;
+  if (
+    mouseXY.x > parentRect.left &&
+    mouseXY.x < parentRect.right &&
+    mouseXY.y > parentRect.top &&
+    mouseXY.y < parentRect.bottom
+  ) {
+    mouseInGrid = true;
+  }
+  if (mouseInGrid === true) {
+    proxy.$refs.gridLayout.dragEvent(
+      'dragend',
+      'drop',
+      DragPos.x,
+      DragPos.y,
+      defaultH,
+      defaultW,
+    );
+    const delIndex = layout.value.findIndex((item) => item.i === 'drop');
+    layout.value.splice(delIndex, 1);
+    const loadComp = loadComponent(currentDragCom.component);
+    layout.value.push({
+      x: DragPos.x,
+      y: DragPos.y,
+      w: currentDragCom.w,
+      h: currentDragCom.h,
+      i: DragPos.i,
+      isDraggable: true,
+      isResizable: true,
+      component: currentDragCom,
+      loadComp,
+    });
+    proxy.$refs.gridLayout.dragEvent(
+      'dragend',
+      DragPos.i,
+      DragPos.x,
+      DragPos.y,
+      currentDragCom.h,
+      currentDragCom.w,
+    );
+    try {
+      proxy.$refs.gridItem[layout.value.length].$refs.item.style.display =
+        'block';
+    } catch { 
+    }
+  }
+  nextTick(()=>{
+    tilesIsMove.value = true;
+  })
+};
+// 尺寸变更后，触发resize事件，使图表resize
+const resizedEvent = (e) => {
+  if (document.createEvent) {
+    const ev = new Event('resize');
+    window.dispatchEvent(ev);
+  } else if (document.createEventObject) {
+    window.fireEvent('onresize');
+  }
+};
+// 删除item
+const delItem = (item) => {
+  const delIndex = layout.value.findIndex((el) => el.i === item.i);
+  layout.value.splice(delIndex, 1);
+};
+
+// 商店弹层
+let shop = ref(false)
+// 编辑磁贴
+let editTiles = ref(false)
+// 商店分组展开
+let activeKeyArr = ref(['1', '2', '3'])
+// 选中的磁贴
+let selectTilseArr = ref([])
+// 新增磁贴
+let addTiles = (val) => {
+  let arr = JSON.parse(JSON.stringify(selectTilseArr.value))
+  if (arr.includes(val)) {
+    arr = arr.filter((item) => {
+      return item != val
+    })
+  } else {
+    arr.push(val)
+  }
+
+  selectTilseArr.value = arr
+}
+// 磁贴是否可拖拽
+let tilesIsMove = ref(true)
+// 取消和确定编辑磁贴
+let cancelOrSure = (type) => {
+  if (type == 'cance') {
+    editTiles.value = false;
+    tilesIsMove.value = false;
+  } else if (type == 'sure') {
+    editTiles.value = true;
+    tilesIsMove.value = true;
+  }
+}
+</script>
+
+<template>
+  <div class="container-group">
+    <!-- 自定义布局的部分 -->
+    <div class="grid-box  select-none">
+      <grid-layout ref="gridLayout" v-model:layout="layout" :col-num="3" :is-draggable="tilesIsMove" :is-mirrored="false"
+        :auto-size="false" :is-resizable="tilesIsMove" :margin="[10, 10]" :row-height="55"
+        :vertical-compact="true">
+
+        <grid-item v-for="(item, index ) in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w"
+          :x="item.x" :y="item.y" :dragAllowFrom="item.component&&item.component.dom?item.component.dom:null" @resized="resizedEvent">
+          <span class="close" @click="delItem(item)" v-if="tilesIsMove">
+            <CloseCircleFilled style="color: #f10215;" />
+          </span>
+          <div class="py-2 px-4 box-border w-[100%] h-[100%] us-card-box bg-background">
+            <component :is="item.loadComp" :data="item" :key="item.i" />
+          </div>
+        </grid-item>
+      </grid-layout>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container-group {
+  width: 100%;
+  height: 100%;
+}
+
+.grid-box {
+  width: 100%;
+  height: 100%;
+}
+
+
+.components-box {
+  padding: 12px 20px;
+  // border: 1px solid rgb(66 66 66 / 100%);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-content: flex-start;
+
+  .ctrl-box {
+    display: flex;
+    align-items: center;
+    width: 104px;
+    height: 130px;
+    padding: 12px;
+    // margin-top: 20px;
+    background: #ecf1f3;
+    user-select: none;
+    flex-direction: column;
+    border-radius: 10px;
+    border: 1px solid #ecf1f3;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      border: 1px dashed hsl(var(--primary));
+    }
+
+    &.active {
+      border: 1px solid hsl(var(--primary));
+    }
+
+    .ctrl-name {
+      font-size: 12px;
+      color: hsl(var(--primary));
+      text-align: center;
+      margin-bottom: 8px;
+    }
+
+
+    img {
+      width: 100%;
+      // height: 100%;
+      object-fit: contain
+    }
+  }
+}
+
+.us-card-box {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.shop-box {
+  width: 550px;
+  height: 75vh;
+  overflow-y: auto;
+}
+</style>
+
+<style lang="scss">
+.vue-grid-layout {
+  height: 100% !important;
+  overflow: auto;
+  background: transparent;
+  border: 0px solid rgb(66 66 66 / 100%);
+
+  .vue-grid-item {
+    // padding: 12px 20px;
+    // background: #2d2d2c;
+    // border: 1px solid rgb(66 66 66 / 100%);
+    border-radius: 2px;
+  }
+
+  .close {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    color: rgb(255 255 255 / 60%);
+    cursor: pointer;
+
+    i {
+      font-size: 20px;
+    }
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .vue-grid-item.vue-resizable.vue-grid-placeholder {
+    background: white !important;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/components/Output1/index.vue b/apps/web-test/src/views/dashboard/home/components/Output1/index.vue
index ea9f719e..108e72ec 100644
--- a/apps/web-test/src/views/dashboard/home/components/Output1/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/Output1/index.vue
@@ -1,3 +1,20 @@
 <template>
-  <div class="text-white">我是示例组件1</div>
+  <a href="/portal" class="pointer-events-none inline-block w-[100%] h-[100%] flex flex-col items-center gap-1">
+    <img :src="'/xbyt/'+data.component.name2" alt="" class="w-full object-content">
+    <div class="text-sm">{{ data.component.name }}</div>
+  </a>
 </template>
+<script setup lang="ts">
+import { toRefs } from 'vue'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
+  },
+})
+console.log('propsprops', props.data);
+let { data } = toRefs(props);
+
+</script>
+<style>
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/components/Output2/index.vue b/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
index 93576846..ccfdad7f 100644
--- a/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
@@ -1,3 +1,176 @@
 <template>
-  <div class="text-white">我是示例组件2</div>
+  <div style="width: 100%;height: 100%;" class="flex flex-col">
+    <div class="head-top-box flex justify-between mb-3 titlt-top">
+      <div class="flex items-center gap-10">
+        <Badge :count="9" :offset="[6, -3]">
+          <div class="flex items-center gap-1 cursor-pointer">
+            <CalendarOutlined />待办
+          </div>
+        </Badge>
+
+        <div class="flex items-center gap-1 cursor-pointer">
+          <CarryOutOutlined />已办
+        </div>
+        <Badge :count="9" :offset="[6, -3]">
+          <div class="flex items-center gap-1 cursor-pointer">
+            <ExceptionOutlined />待阅
+          </div>
+        </Badge>
+        <div class="flex items-center gap-1 cursor-pointer">
+          <FileDoneOutlined />已阅
+        </div>
+        <div class="flex items-center gap-1 cursor-pointer">
+          <StarOutlined />关注
+        </div>
+      </div>
+      <div class="flex items-center gap-3">
+        <InputSearch placeholder="任务查询" style="width: 200px" />
+        <SettingOutlined class="cursor-pointer" @click="userSet = true" />
+        <ReloadOutlined class="cursor-pointer" />
+      </div>
+    </div>
+    <ul class="f-btn-box">
+      <li v-for="(item) in plainOptions" :key="item">
+        <Button >{{ item }}</Button>
+      </li>
+    </ul>
+    <div class="flex-1 overflow-hidden">
+      <vxe-grid v-bind="gridOptions">
+        <template #attention_default="{ row }">
+          <StarOutlined class="text-lg"></StarOutlined>
+        </template>
+        <template #pager>
+          <div class="py-2 flex justify-end">
+            <Pagination size="small" :total="1000" show-size-changer show-quick-jumper />
+          </div>
+        </template>
+      </vxe-grid>
+    </div>
+
+    <Modal v-model:open="userSet" title="个人设置" :okText="'提交'" :width="800">
+      <div class="flex  gap-2">
+        <div class="shrink-0">接收消息系统：</div>
+        <div>
+          <Checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate" @change="onCheckAllChange">
+            全选
+          </Checkbox>
+          <CheckboxGroup v-model:value="state.checkedList">
+            <div class="flex flex-wrap gap-2 mt-2">
+              <Checkbox :value="item" v-for="(item) in plainOptions" :key="item">
+                <div class="w-[85px] truncate">{{ item }}</div>
+              </Checkbox>
+            </div>
+          </CheckboxGroup>
+        </div>
+      </div>
+    </Modal>
+  </div>
 </template>
+
+<script lang="ts" setup>
+import { reactive, watch, ref } from 'vue'
+import { type VxeGridProps, VxeUI } from 'vxe-table'
+import { CalendarOutlined, CarryOutOutlined, StarOutlined, ExceptionOutlined, FileDoneOutlined, SettingOutlined, ReloadOutlined } from '@ant-design/icons-vue';
+import { InputSearch, Pagination, Badge, Modal, Checkbox, CheckboxGroup, Button } from 'ant-design-vue';
+import { preferences } from '@vben/preferences';
+
+watch(() => preferences.theme.mode, (n: any) => {
+  VxeUI.setTheme(n)
+})
+
+interface RowVO {
+  id: number
+  title: string
+  taskName: string
+  handle: string
+  attention: string
+  systemName: string
+  time: string
+}
+
+const gridOptions = reactive<VxeGridProps<RowVO>>({
+  showOverflow: true,
+  border: true,
+  loading: true,
+  height: 'auto',
+  columnConfig: {
+    resizable: true
+  },
+  columns: [
+    { field: 'title', title: '标题' },
+    { field: 'taskName', title: '任务名称' },
+    { field: 'systemName', title: '系统名称' },
+    { field: 'time', title: '接收时间', sortable: true },
+    { field: 'handle', title: '操作' },
+    { field: 'attention', title: '关注', slots: { default: 'attention_default' } },
+  ],
+  data: [
+    { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
+    { id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
+    { id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
+  ]
+})
+
+const tablePage = reactive({
+  total: 0,
+  currentPage: 1,
+  pageSize: 10
+})
+const findList = () => {
+  gridOptions.loading = true
+  setTimeout(() => {
+    gridOptions.loading = false
+    tablePage.total = 10
+    gridOptions.data = [
+      { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
+      { id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
+      { id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
+      { id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
+      { id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
+      { id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
+      { id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
+    ]
+  }, 300)
+}
+
+findList()
+
+
+// 个人设置弹层
+let userSet = ref(false);
+
+const plainOptions = ['公文系统', '合同管理', '物资管理', '督查管理', '市场管理', '电子考勤', '财务管理信息通知', '费用报销', '设备管理', '工程造价', '员工诉求', '即完即结', '科技研发', '标准化系统', '纪检监督系统', '后勤管理系统', '信用风险系统'];
+const state = reactive({
+  indeterminate: true,
+  checkAll: false,
+  checkedList: ['公文系统', '合同管理'],
+});
+
+const onCheckAllChange = (e: any) => {
+  Object.assign(state, {
+    checkedList: e.target.checked ? plainOptions : [],
+    indeterminate: false,
+  });
+};
+watch(
+  () => state.checkedList,
+  val => {
+    state.indeterminate = !!val.length && val.length < plainOptions.length;
+    state.checkAll = val.length === plainOptions.length;
+  },
+);
+</script>
+<style lang="scss">
+@import 'vxe-table/lib/style.css';
+
+.f-btn-box {
+  width: 100%; //指定可滑动区域宽度
+  overflow: hidden; //超出隐藏
+  white-space: nowrap; //超出不换行
+  overflow-x: auto; //出现水平滚动条
+  li {
+    display: inline-block;
+    margin-right: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/components/Output3/index.vue b/apps/web-test/src/views/dashboard/home/components/Output3/index.vue
index c9b2c92c..92a73d09 100644
--- a/apps/web-test/src/views/dashboard/home/components/Output3/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/Output3/index.vue
@@ -1,3 +1,18 @@
 <template>
-  <div class="text-white">我是示例组件3</div>
+  <a href="#" class="pointer-events-none">
+    <img :src="'/xbyt/'+data.component.img" alt="" class="w-full h-full object-cover">
+  </a>
 </template>
+<script setup lang="ts">
+import { toRefs } from 'vue'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
+  },
+})
+console.log('propsprops', props.data);
+let { data } = toRefs(props);
+
+</script>
+<style></style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/components/Output4/index.vue b/apps/web-test/src/views/dashboard/home/components/Output4/index.vue
new file mode 100644
index 00000000..92a73d09
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/components/Output4/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <a href="#" class="pointer-events-none">
+    <img :src="'/xbyt/'+data.component.img" alt="" class="w-full h-full object-cover">
+  </a>
+</template>
+<script setup lang="ts">
+import { toRefs } from 'vue'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
+  },
+})
+console.log('propsprops', props.data);
+let { data } = toRefs(props);
+
+</script>
+<style></style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/components/Output5/index.vue b/apps/web-test/src/views/dashboard/home/components/Output5/index.vue
new file mode 100644
index 00000000..c7010af7
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/components/Output5/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="custom-card w-[100%] h-[100%] flex flex-col">
+    <div class="card-name titlt-top">我的应用</div>
+    <GridGroup :list="data.component.childer" class="flex-1"></GridGroup>
+  </div>
+</template>
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import GridGroup from '../GridGroup/index.vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
+  },
+})
+console.log('propsprops', props.data);
+let { data } = toRefs(props);
+
+</script>
+<style lang="scss" scoped>
+.card-name {
+  font-weight: 500;
+  padding: 5px 0;
+  border-bottom: 1px solid #ddd;
+}
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/index.vue b/apps/web-test/src/views/dashboard/home/index.vue
index 3ea1069f..0b5a33fb 100644
--- a/apps/web-test/src/views/dashboard/home/index.vue
+++ b/apps/web-test/src/views/dashboard/home/index.vue
@@ -1,8 +1,75 @@
 <script setup>
-import { defineAsyncComponent, getCurrentInstance, onMounted, ref } from 'vue';
+import { defineAsyncComponent, getCurrentInstance, markRaw, onMounted, ref, nextTick } from 'vue';
 
-const { proxy } = getCurrentInstance();
+import { UndoOutlined, CheckOutlined, CloseCircleFilled, QuestionCircleOutlined, SyncOutlined, ShoppingCartOutlined, EditOutlined } from '@ant-design/icons-vue';
+import { CheckboxGroup, Checkbox, Collapse, CollapsePanel, FloatButtonGroup, FloatButton, BackTop, Popover } from 'ant-design-vue';
+
+import { tilesList } from './tiles'
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+// import GridGroup from './components/GridGroup/index.vue'
+
+const { proxy, ctx: that } = getCurrentInstance();
 const layout = ref([]);
+onMounted(() => {
+  layout.value = [
+    {
+      "x": 1,
+      "y": 0,
+      "w": 1,
+      "h": 2,
+      "i": "1728964990256",
+      "component": {
+        "name1": "AUTO_1612155980933.png",
+        "name2": "AUTO_1612155980933_C会议管理.png",
+        "size": "2x2",
+        "name": "会议管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 0,
+        "path": "/portal"
+      },
+    },
+    {
+      "x": 0,
+      "y": 2,
+      "w": 8,
+      "h": 5,
+      "i": "1728964991972",
+      "component": {
+        "name1": "AUTO_1612159241967.png",
+        "name2": "AUTO_1612159241967_C车辆调度.png",
+        "size": "2x2",
+        "name": "车辆调度",
+        "w": 8,
+        "h": 5,
+        "component": "./components/Output2/index.vue",
+        "i": 2,
+        "dom": '.titlt-top'
+      },
+    },
+    {
+      "x": 4,
+      "y": 0,
+      "w": 1,
+      "h": 2,
+      "i": "1728965029729",
+      "component": {
+        "name1": "AUTO_1612155980933.png",
+        "name2": "AUTO_1612155980933_C会议管理.png",
+        "size": "2x2",
+        "name": "会议管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 0,
+        "path": "/audit"
+      },
+    }
+  ]
+})
 const colNum = 12;
 let defaultH = 2;
 let defaultW = 2;
@@ -17,35 +84,49 @@ const DragPos = {
   h: null,
   i: null,
 };
-const componentsInfo = [
-  {
-    id: '1-1',
-    title: '示例组件1',
-    name: 'annualOutput',
-    component: './components/Output1/index.vue',
-    des: '示例组件1',
-    w: 4,
-    h: 8,
-  },
-  {
-    id: '1-2',
-    title: '示例组件2',
-    name: 'MonthOutput',
-    component: './components/Output2/index.vue',
-    des: '示例组件2',
-    w: 2,
-    h: 2,
-  },
-  {
-    id: '1-3',
-    title: '示例组件3',
-    name: 'dayOutput',
-    component: './components/Output3/index.vue',
-    des: '示例组件3',
-    w: 8,
-    h: 4,
-  },
-];
+const componentsInfo = tilesList
+//  [
+//   {
+//     id: '1-1',
+//     title: '磁贴管理(2×2)',
+//     name: 'xl',
+//     component: './components/Output1/index.vue',
+//     des: '磁贴管理(2×2)',
+//     w: 1,
+//     h: 2,
+//     img: 'WORKBENCH_MANAGER.png'
+//   },
+//   {
+//     id: '1-2',
+//     title: '饼图示例(8×8)',
+//     name: 'xxl',
+//     component: './components/Output2/index.vue',
+//     des: '饼图示例(8×8)',
+//     w: 8,
+//     h: 8,
+//     img: 'AUTO_1620294688040.png'
+//   },
+//   {
+//     id: '1-3',
+//     title: '报表示例(4×4)',
+//     name: 'xxxl',
+//     component: './components/Output3/index.vue',
+//     des: '报表示例(4×4)',
+//     w: 4,
+//     h: 4,
+//     img: "AUTO_1621594591994.png"
+//   },
+//   {
+//     id: '1-4',
+//     title: '列表示例(16×8)',
+//     name: 'xxxxl',
+//     component: './components/Output4/index.vue',
+//     des: '列表示例(16×8)',
+//     w: 16,
+//     h: 8,
+//     img: 'AUTO_1620296071109.png'
+//   },
+// ];
 let currentDragCom = null;
 onMounted(() => {
   document.addEventListener(
@@ -65,7 +146,7 @@ onMounted(() => {
 });
 // 引入组件
 const loadComponent = (path) => {
-  return defineAsyncComponent(() => import(`${path}`));
+  return defineAsyncComponent(markRaw(() => import(`${path}`)));
 };
 // 处理布局数据中的组件
 const processLayout = (layoutSetInfo) => {
@@ -112,8 +193,9 @@ const drag = (e, item) => {
     try {
       proxy.$refs.gridItem[layout.value.length - 1].$refs.item.style.display =
         'none';
-    } catch {}
-    const el = proxy.$refs.gridItem[index];
+    } catch { }
+
+    const el = proxy.$refs.gridItem ? proxy.$refs.gridItem[index] : null;
     if (el) {
       el.dragging = {
         top: mouseXY.y - parentRect.top,
@@ -151,6 +233,8 @@ const drag = (e, item) => {
   }
 };
 const dragend = (e) => {
+  console.log('eeeee', e);
+  tilesIsMove.value = false;
   const parentRect = document
     .querySelector('.grid-box')
     .getBoundingClientRect();
@@ -195,8 +279,12 @@ const dragend = (e) => {
     try {
       proxy.$refs.gridItem[layout.value.length].$refs.item.style.display =
         'block';
-    } catch {}
+    } catch {
+    }
   }
+  nextTick(() => {
+    tilesIsMove.value = true;
+  })
 };
 // 尺寸变更后，触发resize事件，使图表resize
 const resizedEvent = (e) => {
@@ -212,90 +300,268 @@ const delItem = (item) => {
   const delIndex = layout.value.findIndex((el) => el.i === item.i);
   layout.value.splice(delIndex, 1);
 };
+
+// 商店弹层
+let shop = ref(false)
+// 编辑磁贴
+let editTiles = ref(false)
+// 商店分组展开
+let activeKeyArr = ref(['1', '2', '3'])
+// 选中的磁贴
+let selectTilseArr = ref([])
+// 新增磁贴
+let addTiles = (val) => {
+  let arr = JSON.parse(JSON.stringify(selectTilseArr.value))
+  if (arr.includes(val)) {
+    arr = arr.filter((item) => {
+      return item != val
+    })
+  } else {
+    arr.push(val)
+  }
+
+  selectTilseArr.value = arr
+}
+// 磁贴是否可拖拽
+let tilesIsMove = ref(false)
+// 取消和确定编辑磁贴
+let cancelOrSure = (type) => {
+  if (type == 'cance') {
+    editTiles.value = false;
+    tilesIsMove.value = false;
+  } else if (type == 'sure') {
+    editTiles.value = true;
+    tilesIsMove.value = true;
+  }
+}
+// 页面跳转
+let goPage = (item) => {
+  if (tilesIsMove.value) return;
+  router.push(item.component?.path);
+}
 </script>
 
 <template>
-  <div class="container h-[100vh]">
+  <div class="container h-[calc(100%-10px)] px-[20px]">
     <!-- 自定义布局的部分 -->
-    <div class="grid-box">
-      <grid-layout
-        ref="gridLayout"
-        v-model:layout="layout"
-        :col-num="12"
-        :is-draggable="true"
-        :is-mirrored="false"
-        :is-resizable="true"
-        :margin="[10, 10]"
-        :row-height="30"
-        :use-css-transforms="true"
-        :vertical-compact="true"
-      >
-        <grid-item
-          v-for="item in layout"
-          :key="item.i"
-          ref="gridItem"
-          :h="item.h"
-          :i="item.i"
-          :w="item.w"
-          :x="item.x"
-          :y="item.y"
-          @resized="resizedEvent"
-        >
-          <span class="close" @click="delItem(item)"
-            ><i class="sky-iconfont icon-guanbi">x</i></span
-          >
-          <component :is="item.loadComp" />
+    <div class="grid-box  select-none">
+      <grid-layout ref="gridLayout" v-model:layout="layout" :col-num="12" :is-draggable="tilesIsMove"
+        :is-mirrored="false" :auto-size="false" :responsive="false" :is-resizable="tilesIsMove" :margin="[10, 10]"
+        :row-height="45" :vertical-compact="true">
+
+        <grid-item v-for="(item, index ) in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w"
+          :x="item.x" :y="item.y" :dragAllowFrom="item.component && item.component.dom ? item.component.dom : null"
+          @resized="resizedEvent">
+          <span class="close" @click="delItem(item)" v-if="tilesIsMove">
+            <CloseCircleFilled style="color: #f10215;" />
+          </span>
+          <div class="py-2 px-4 box-border w-[100%] h-[100%] us-card-box bg-background" @click="goPage(item)">
+            <component :is="item.loadComp" :data="item" :key="item.i" />
+          </div>
         </grid-item>
+
+        <!-- <grid-item>
+          <div style="width: 200px;height: 200px;border: 1px solid #f00;">
+
+          </div>
+        </grid-item> -->
       </grid-layout>
     </div>
-    <!-- 可拖入的组件部分 -->
-    <div class="components-box">
-      <div
-        v-for="item in componentsInfo"
-        :key="item.id"
-        class="ctrl-box"
-        draggable="true"
-        @drag="drag"
-        @dragend="dragend"
-        @dragstart="dragstart($event, item)"
-      >
-        {{ item.des }}
-      </div>
-    </div>
+
+    <!-- 右侧悬浮部分 -->
+    <FloatButtonGroup shape="circle" :style="{ right: '40px' }">
+      <template v-if="!editTiles">
+        <FloatButton tooltip="编辑磁贴" @click="cancelOrSure('sure')">
+          <template #icon>
+            <EditOutlined style="font-size: 20px;" />
+          </template>
+        </FloatButton>
+      </template>
+      <template v-else>
+        <FloatButton tooltip="保存修改" @click="cancelOrSure('sure')">
+          <template #icon>
+            <CheckOutlined style="font-size: 20px;" />
+          </template>
+        </FloatButton>
+        <FloatButton tooltip="取消修改" @click="cancelOrSure('cance')">
+          <template #icon>
+            <UndoOutlined style="font-size: 20px;" />
+          </template>
+        </FloatButton>
+        <Popover v-model:open="shop" title="磁贴商店（127）" trigger="click" placement="topRight">
+          <template #content>
+            <div class="shop-box">
+              <CheckboxGroup style="width: 100%" v-model:value="selectTilseArr">
+                <Collapse v-model:activeKey="activeKeyArr" style="width: 100%">
+                  <CollapsePanel key="1" header="个人工作台（22）">
+                    <!-- 可拖入的组件部分 -->
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(0, 22)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend($event)" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="2" header="综合行政（12）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(22, 34)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="3" header="经营管理（22）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(34, 56)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="4" header="安全生产（19）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(56, 75)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="5" header="勘探开发（26）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(75, 101)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="6" header="数据管理（1）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(101, 102)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                  <CollapsePanel key="7" header="总部系统（25）">
+                    <div class="components-box">
+                      <div v-for="item in componentsInfo.slice(102, 127)" :key="item.name" class="ctrl-box"
+                        draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
+                        @click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
+                        <div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
+                        <img :src="'/xbyt/' + item.name2" alt="">
+                        <Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
+                          class="absolute bottom-0 right-1" />
+                      </div>
+                    </div>
+                  </CollapsePanel>
+                </Collapse>
+              </CheckboxGroup>
+            </div>
+          </template>
+          <FloatButton tooltip="磁贴商店">
+            <template #icon>
+              <ShoppingCartOutlined style="font-size: 20px;" :visibility-height="0" />
+            </template>
+          </FloatButton>
+        </Popover>
+      </template>
+    </FloatButtonGroup>
   </div>
 </template>
 
 <style scoped lang="scss">
 .container {
+  min-width: 1000px;
   position: relative;
+  overflow-x: auto;
 }
 
 .grid-box {
-  width: calc(100% - 320px);
+  min-width: 1000px;
+  width: 100%;
   height: 100%;
 }
 
 .components-box {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 300px;
-  height: 100%;
   padding: 12px 20px;
-  border: 1px solid rgb(66 66 66 / 100%);
+  // border: 1px solid rgb(66 66 66 / 100%);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-content: flex-start;
 
   .ctrl-box {
     display: flex;
     align-items: center;
-    height: 40px;
-    padding: 0 12px;
-    margin-top: 20px;
-    color: #fff;
+    width: 104px;
+    height: 130px;
+    padding: 12px;
+    // margin-top: 20px;
+    background: #ecf1f3;
     user-select: none;
-    background: #2d2d2c;
-    border: 1px solid rgb(66 66 66 / 100%);
+    flex-direction: column;
+    border-radius: 10px;
+    border: 1px solid #ecf1f3;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      border: 1px dashed hsl(var(--primary));
+    }
+
+    &.active {
+      border: 1px solid hsl(var(--primary));
+    }
+
+    .ctrl-name {
+      font-size: 12px;
+      color: hsl(var(--primary));
+      text-align: center;
+      margin-bottom: 8px;
+    }
+
+
+    img {
+      width: 100%;
+      // height: 100%;
+      object-fit: contain
+    }
   }
 }
+
+.us-card-box {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.shop-box {
+  width: 550px;
+  height: 75vh;
+  overflow-y: auto;
+}
 </style>
 
 <style lang="scss">
@@ -303,19 +569,19 @@ const delItem = (item) => {
   height: 100% !important;
   overflow: auto;
   background: transparent;
-  border: 1px solid rgb(66 66 66 / 100%);
+  // border: 1px solid rgb(66 66 66 / 100%);
 
   .vue-grid-item {
-    padding: 12px 20px;
-    background: #2d2d2c;
-    border: 1px solid rgb(66 66 66 / 100%);
+    // padding: 12px 20px;
+    // background: #2d2d2c;
+    // border: 1px solid rgb(66 66 66 / 100%);
     border-radius: 2px;
   }
 
   .close {
     position: absolute;
-    top: 10px;
-    right: 10px;
+    top: -10px;
+    right: -10px;
     display: inline-block;
     width: 16px;
     height: 16px;
diff --git a/apps/web-test/src/views/dashboard/home/main.vue b/apps/web-test/src/views/dashboard/home/main.vue
new file mode 100644
index 00000000..d4327222
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/main.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="flex justify-between">
+      <nested-draggable v-model="list" class="w-full"></nested-draggable>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue'
+  import NestedDraggable from './NestedComponent.vue'
+  
+  const list = ref([
+    {
+      name: 'item 1',
+      type: 'father',
+      children: [
+        {
+          name: 'item 2',
+          type: 'son',
+          children: []
+        }
+      ]
+    },
+    {
+      name: 'item 3',
+      type: 'father',
+      children: [
+        {
+          name: 'item 4',
+          type: 'son',
+          children: []
+        }
+      ]
+    },
+    {
+      name: 'item 5',
+      type: 'father',
+      children: []
+    }
+  ])
+  </script>
+  
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/portal.vue b/apps/web-test/src/views/dashboard/home/portal.vue
new file mode 100644
index 00000000..f72d1787
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/portal.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="main-box bg-[#ecf3f8] px-3 mt-3 h-[100%]">
+        <div class="top-box flex justify-between items-center">
+            <div class="t-b-name text-base">磁贴管理</div>
+            <div class="flex items-center gap-2">
+                <Button type="primary">注册磁贴</Button>
+                <VbenIconButton
+                    class="hover:text-[#007da3] w-[30px] h-[30px] flex justify-center items-center rounded-[50%]">
+                    <UnorderedListOutlined />
+                </VbenIconButton>
+            </div>
+        </div>
+        <CardTitle :type="'portal'" :list="list" />
+    </div>
+</template>
+<script setup lang="ts">
+import {
+    VbenIconButton,
+} from '@vben-core/shadcn-ui';
+import CardTitle from './components/CardTiles/index.vue';
+import { UnorderedListOutlined, ExpandOutlined } from '@ant-design/icons-vue';
+import { Button, Form, FormItem, Input, Select, Card, Pagination} from 'ant-design-vue';
+import { tilesList } from './tiles'
+
+let list: any[] = []
+for (let i = 0; i < tilesList.length; i++) {
+    let obj: any = {}
+    obj.name = tilesList[i]?.name;
+    obj.url = tilesList[i]?.name2;
+    obj.work = '经营管理';
+    obj.code = tilesList[i]?.name1.split('.')[0];
+    list.push(obj);
+    obj = null
+}
+</script>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/test.vue b/apps/web-test/src/views/dashboard/home/test.vue
new file mode 100644
index 00000000..e76bd643
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/test.vue
@@ -0,0 +1,137 @@
+<template>
+    <div>
+
+        <div class="flex flex-col">
+            Displayed as <code>[x, y, w, h]</code>:
+            <div class="flex flex-wrap">
+                <div v-for="item in layout">
+                    <b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
+                </div>
+            </div>
+        </div>
+
+        {{ xxx }}
+        <grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="draggable"
+            :is-resizable="resizable" :responsive="false" :vertical-compact="false" :prevent-collision="true"
+            :use-css-transforms="true">
+            <grid-item v-for="item in layout" :static="item.static" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
+                :i="item.i" @dragging="moveEvent" @resizeEvent="resizeEvent">
+                <span class="text">{{ item.i }}</span>
+            </grid-item>
+        </grid-layout>
+    </div>
+</template>
+
+<script lang="ts">
+import { GridLayout, GridItem } from "vue-grid-layout"
+
+export default {
+    components: {
+        GridLayout,
+        GridItem
+    },
+    data() {
+        return {
+            xxx:{},
+            layout: [
+                { "x": 0, "y": 0, "w": 2, "h": 2, "i": "0", static: false },
+                { "x": 2, "y": 0, "w": 2, "h": 4, "i": "1", static: true },
+                { "x": 4, "y": 0, "w": 2, "h": 5, "i": "2", static: false },
+                { "x": 6, "y": 0, "w": 2, "h": 3, "i": "3", static: false },
+                { "x": 8, "y": 0, "w": 2, "h": 3, "i": "4", static: false },
+                { "x": 10, "y": 0, "w": 2, "h": 3, "i": "5", static: false },
+                { "x": 0, "y": 5, "w": 2, "h": 5, "i": "6", static: false },
+                { "x": 2, "y": 5, "w": 2, "h": 5, "i": "7", static: false },
+                { "x": 4, "y": 5, "w": 2, "h": 5, "i": "8", static: false },
+                { "x": 6, "y": 3, "w": 2, "h": 4, "i": "9", static: true },
+                { "x": 8, "y": 4, "w": 2, "h": 4, "i": "10", static: false },
+                { "x": 10, "y": 4, "w": 2, "h": 4, "i": "11", static: false },
+                { "x": 0, "y": 10, "w": 2, "h": 5, "i": "12", static: false },
+                { "x": 2, "y": 10, "w": 2, "h": 5, "i": "13", static: false },
+                { "x": 4, "y": 8, "w": 2, "h": 4, "i": "14", static: false },
+                { "x": 6, "y": 8, "w": 2, "h": 4, "i": "15", static: false },
+                { "x": 8, "y": 10, "w": 2, "h": 5, "i": "16", static: false },
+                { "x": 10, "y": 4, "w": 2, "h": 2, "i": "17", static: false },
+                { "x": 0, "y": 9, "w": 2, "h": 3, "i": "18", static: false },
+                { "x": 2, "y": 6, "w": 2, "h": 2, "i": "19", static: false }
+            ],
+            draggable: true,
+            resizable: true,
+        }
+    },
+    methods: {
+        moveEvent(e) {
+            console.log(e)
+         this.xxx = {delta:e.delta,velocity:e.velocity}
+
+        },
+
+        resizeEvent(e) {
+            console.log(e)
+
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+.vue-grid-layout {
+    background: #eee;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+    background: #ccc;
+    border: 1px solid black;
+}
+
+.vue-grid-item .resizing {
+    opacity: 0.9;
+}
+
+.vue-grid-item .static {
+    background: #cce;
+}
+
+.vue-grid-item .text {
+    font-size: 24px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    height: 100%;
+    width: 100%;
+}
+
+.vue-grid-item .no-drag {
+    height: 100%;
+    width: 100%;
+}
+
+.vue-grid-item .minMax {
+    font-size: 12px;
+}
+
+.vue-grid-item .add {
+    cursor: pointer;
+}
+
+.vue-draggable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 0;
+    left: 0;
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
+    background-position: bottom right;
+    padding: 0 8px 8px 0;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/apps/web-test/src/views/dashboard/home/tiles.ts b/apps/web-test/src/views/dashboard/home/tiles.ts
new file mode 100644
index 00000000..31791080
--- /dev/null
+++ b/apps/web-test/src/views/dashboard/home/tiles.ts
@@ -0,0 +1,1342 @@
+let tilesList = [
+    {
+        "name1": "AUTO_1612155980933.png",
+        "name2": "AUTO_1612155980933_C会议管理.png",
+        "size": "2x2",
+        "name": "会议管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 0,
+        "path": "/portal"
+    },
+    {
+        "name1": "AUTO_1612158921536.png",
+        "name2": "AUTO_1612158921536_C电子考勤.png",
+        "size": "2x2",
+        "name": "电子考勤",
+        "w": 4,
+        "h": 6,
+        "component": "./components/Output5/index.vue",
+        "dom": '.titlt-top',
+        "childer": [
+            {
+                "name1": "AUTO_1612159241967.png",
+                "name2": "AUTO_1612159241967_C车辆调度.png",
+                "size": "2x2",
+                "name": "车辆调度",
+                "w": 1,
+                "h": 2,
+                "i": 0,
+                "x": 1,
+                "y": 1,
+                "component": "../../components/Output1/index.vue"
+            }
+        ],
+        "i": 1
+    },
+    {
+        "name1": "AUTO_1612159241967.png",
+        "name2": "AUTO_1612159241967_C车辆调度.png",
+        "size": "2x2",
+        "name": "车辆调度",
+        "w": 8,
+        "h": 5,
+        "component": "./components/Output2/index.vue",
+        "i": 2,
+        "dom": '.titlt-top'
+    },
+    {
+        "name1": "AUTO_1612159773503.png",
+        "name2": "AUTO_1612159773503_C网络学院.png",
+        "size": "2x2",
+        "name": "网络学院",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 3,
+        "path": '/audit'
+    },
+    {
+        "name1": "AUTO_1612160044533.png",
+        "name2": "AUTO_1612160044533_C市场管理.png",
+        "size": "2x2",
+        "name": "市场管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 4
+    },
+    {
+        "name1": "AUTO_1612171928867.png",
+        "name2": "AUTO_1612171928867_C员工培训.png",
+        "size": "2x2",
+        "name": "员工培训",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 5
+    },
+    {
+        "name1": "AUTO_1612174485058.png",
+        "name2": "AUTO_1612174485058_C投资共享.png",
+        "size": "2x2",
+        "name": "投资共享",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 6
+    },
+    {
+        "name1": "AUTO_1612174582883.png",
+        "name2": "AUTO_1612174582883_C即完即结.png",
+        "size": "2x2",
+        "name": "即完即结",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 7
+    },
+    {
+        "name1": "AUTO_1612175576303.png",
+        "name2": "AUTO_1612175576303_C费用报销.png",
+        "size": "2x2",
+        "name": "费用报销",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 8
+    },
+    {
+        "name1": "AUTO_1612175720787.png",
+        "name2": "AUTO_1612175720787_C统一身份.png",
+        "size": "2x2",
+        "name": "统一身份",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 9
+    },
+    {
+        "name1": "AUTO_1612175837663.png",
+        "name2": "AUTO_1612175837663_C设备管理.png",
+        "size": "2x2",
+        "name": "设备管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 10
+    },
+    {
+        "name1": "AUTO_1612176086934.png",
+        "name2": "AUTO_1612176086934_C物资管理.png",
+        "size": "2x2",
+        "name": "物资管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 11
+    },
+    {
+        "name1": "AUTO_1612176568856.png",
+        "name2": "AUTO_1612176568856_C财务管理.png",
+        "size": "2x2",
+        "name": "财务管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 12
+    },
+    {
+        "name1": "AUTO_1612176783322.png",
+        "name2": "AUTO_1612176783322_C内部审计.png",
+        "size": "2x2",
+        "name": "内部审计",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 13
+    },
+    {
+        "name1": "AUTO_1612176967032.png",
+        "name2": "AUTO_1612176967032_C土地信息.png",
+        "size": "2x2",
+        "name": "土地信息",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 14
+    },
+    {
+        "name1": "AUTO_1612178344190.png",
+        "name2": "AUTO_1612178344190_CHSSE.png",
+        "size": "2x2",
+        "name": "HSSE",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 15
+    },
+    {
+        "name1": "AUTO_1612236164722.png",
+        "name2": "AUTO_1612236164722_C门户网站.png",
+        "size": "2x2",
+        "name": "门户网站",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 16
+    },
+    {
+        "name1": "AUTO_1612250582407.png",
+        "name2": "AUTO_1612250582407_C生产运行.png",
+        "size": "2x2",
+        "name": "生产运行",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 17
+    },
+    {
+        "name1": "AUTO_1612251274093.png",
+        "name2": "AUTO_1612251274093_C集输防腐.png",
+        "size": "2x2",
+        "name": "集输防腐",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 18
+    },
+    {
+        "name1": "AUTO_1612251718987.png",
+        "name2": "AUTO_1612251718987_C地面工程GIS.png",
+        "size": "2x2",
+        "name": "地面工程GIS",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 19
+    },
+    {
+        "name1": "AUTO_1612253226393.jpg",
+        "name2": "AUTO_1612253226393_C单井日报.jpg",
+        "size": "2x2",
+        "name": "单井日报",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 20
+    },
+    {
+        "name1": "AUTO_1612254108987.png",
+        "name2": "AUTO_1612254108987_C新井日报.png",
+        "size": "2x2",
+        "name": "新井日报",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 21
+    },
+    {
+        "name1": "AUTO_1612254641675.png",
+        "name2": "AUTO_1612254641675_C单元日报.png",
+        "size": "2x2",
+        "name": "单元日报",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 22
+    },
+    {
+        "name1": "AUTO_1612254711440.png",
+        "name2": "AUTO_1612254711440_C单井曲线.png",
+        "size": "2x2",
+        "name": "单井曲线",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 23
+    },
+    {
+        "name1": "AUTO_1612254770604.png",
+        "name2": "AUTO_1612254770604_C单元曲线.png",
+        "size": "2x2",
+        "name": "单元曲线",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 24
+    },
+    {
+        "name1": "AUTO_1612254834191.png",
+        "name2": "AUTO_1612254834191_C缝洞单元查询.png",
+        "size": "2x2",
+        "name": "缝洞单元查询",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 25
+    },
+    {
+        "name1": "AUTO_1612254982651.png",
+        "name2": "AUTO_1612254982651_C单位日度生产曲线.png",
+        "size": "2x2",
+        "name": "单位日度生产曲线",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 26
+    },
+    {
+        "name1": "AUTO_1612255706920.png",
+        "name2": "AUTO_1612255706920_C待办管理.png",
+        "size": "2x2",
+        "name": "待办管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 27
+    },
+    {
+        "name1": "AUTO_1615449162971.png",
+        "name2": "AUTO_1615449162971_C日志服务.png",
+        "size": "2x2",
+        "name": "日志服务",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 28
+    },
+    {
+        "name1": "AUTO_1619690316967.png",
+        "name2": "AUTO_1619690316967_C领导请销假.png",
+        "size": "2x2",
+        "name": "领导请销假",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 29
+    },
+    {
+        "name1": "AUTO_1619690579620.png",
+        "name2": "AUTO_1619690579620_C政务信息.png",
+        "size": "2x2",
+        "name": "政务信息",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 30
+    },
+    {
+        "name1": "AUTO_1619692785109.png",
+        "name2": "AUTO_1619692785109_C诉求建议.png",
+        "size": "2x2",
+        "name": "诉求建议",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 31
+    },
+    {
+        "name1": "AUTO_1619693932246.png",
+        "name2": "AUTO_1619693932246_CEPBP.png",
+        "size": "2x2",
+        "name": "EPBP",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 32
+    },
+    {
+        "name1": "AUTO_1620294589450.png",
+        "name2": "AUTO_1620294589450.png",
+        "size": "2x2",
+        "name": "",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 33
+    },
+    {
+        "name1": "AUTO_1620294688040.png",
+        "name2": "AUTO_1620294688040.png",
+        "size": "2x2",
+        "name": "",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 34
+    },
+    {
+        "name1": "AUTO_1620295916974.png",
+        "name2": "AUTO_1620295916974.png",
+        "size": "2x2",
+        "name": "",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 35
+    },
+    {
+        "name1": "AUTO_1620296071109.png",
+        "name2": "AUTO_1620296071109.png",
+        "size": "2x2",
+        "name": "",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 36
+    },
+    {
+        "name1": "AUTO_1621594591994.png",
+        "name2": "AUTO_1621594591994.png",
+        "size": "2x2",
+        "name": "",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 37
+    },
+    {
+        "name1": "AUTO_1626147030794.png",
+        "name2": "AUTO_1626147030794_C短信发送系统列表.png",
+        "size": "2x2",
+        "name": "短信发送系统列表",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 38
+    },
+    {
+        "name1": "AUTO_1626147560487.png",
+        "name2": "AUTO_1626147560487_C短信统计.png",
+        "size": "2x2",
+        "name": "短信统计",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 39
+    },
+    {
+        "name1": "AUTO_1627447527085.png",
+        "name2": "AUTO_1627447527085_C单井数据服务.png",
+        "size": "2x2",
+        "name": "单井数据服务",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 40
+    },
+    {
+        "name1": "AUTO_1627617227980.png",
+        "name2": "AUTO_1627617227980_C文档资料共享.png",
+        "size": "2x2",
+        "name": "文档资料共享",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 41
+    },
+    {
+        "name1": "AUTO_1627617829154.png",
+        "name2": "AUTO_1627617829154_C数据管理平台.png",
+        "size": "2x2",
+        "name": "数据管理平台",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 42
+    },
+    {
+        "name1": "AUTO_1629707506710.png",
+        "name2": "AUTO_1629707506710_C电子邮件.png",
+        "size": "2x2",
+        "name": "电子邮件",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 43
+    },
+    {
+        "name1": "AUTO_1629712380535.png",
+        "name2": "AUTO_1629712380535_C督办管理.png",
+        "size": "2x2",
+        "name": "督办管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 44
+    },
+    {
+        "name1": "AUTO_1630380946904.png",
+        "name2": "AUTO_1630380946904_C操作手册.png",
+        "size": "2x2",
+        "name": "操作手册",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 45
+    },
+    {
+        "name1": "AUTO_1630399009307.png",
+        "name2": "AUTO_1630399009307_C志审计服.png",
+        "size": "2x2",
+        "name": "志审计服",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 46
+    },
+    {
+        "name1": "AUTO_1631003052258.png",
+        "name2": "AUTO_1631003052258_C工程造价.png",
+        "size": "2x2",
+        "name": "工程造价",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 47
+    },
+    {
+        "name1": "AUTO_1631269202083.png",
+        "name2": "AUTO_1631269202083_C信息化标准管理系统.png",
+        "size": "2x2",
+        "name": "信息化标准管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 48
+    },
+    {
+        "name1": "AUTO_1634034734031.png",
+        "name2": "AUTO_1634034734031_C区块目标.png",
+        "size": "2x2",
+        "name": "区块目标",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 49
+    },
+    {
+        "name1": "AUTO_1634092797607.png",
+        "name2": "AUTO_1634092797607_C开发业务平台.png",
+        "size": "2x2",
+        "name": "开发业务平台",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 50
+    },
+    {
+        "name1": "AUTO_1634205034896.png",
+        "name2": "AUTO_1634205034896_C工程决策.png",
+        "size": "2x2",
+        "name": "工程决策",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 51
+    },
+    {
+        "name1": "AUTO_1636014526817.png",
+        "name2": "AUTO_1636014526817_Csec储量管理.png",
+        "size": "2x2",
+        "name": "sec储量管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 52
+    },
+    {
+        "name1": "AUTO_1639123306823.png",
+        "name2": "AUTO_1639123306823_C投资优选.png",
+        "size": "2x2",
+        "name": "投资优选",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 53
+    },
+    {
+        "name1": "AUTO_1639555021078.png",
+        "name2": "AUTO_1639555021078_C油藏经营决策支撑系统.png",
+        "size": "2x2",
+        "name": "油藏经营决策支撑系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 54
+    },
+    {
+        "name1": "AUTO_1640597761259.png",
+        "name2": "AUTO_1640597761259_C两册管理.png",
+        "size": "2x2",
+        "name": "两册管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 55
+    },
+    {
+        "name1": "AUTO_1645438375823_C.png",
+        "name2": "AUTO_1645438375823_C.png",
+        "size": "2x2",
+        "name": "",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 56
+    },
+    {
+        "name1": "AUTO_1645597539550.png",
+        "name2": "AUTO_1645597539550_C开发数据.png",
+        "size": "2x2",
+        "name": "开发数据",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 57
+    },
+    {
+        "name1": "AUTO_1645598155236.png",
+        "name2": "AUTO_1645598155236_C新公文.png",
+        "size": "2x2",
+        "name": "新公文",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 58
+    },
+    {
+        "name1": "AUTO_1645598261641.png",
+        "name2": "AUTO_1645598261641_C原油生产.png",
+        "size": "2x2",
+        "name": "原油生产",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 59
+    },
+    {
+        "name1": "AUTO_1645598347761.png",
+        "name2": "AUTO_1645598347761_C天然气量.png",
+        "size": "2x2",
+        "name": "天然气量",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 60
+    },
+    {
+        "name1": "AUTO_1645598429026.png",
+        "name2": "AUTO_1645598429026_C移动平台.png",
+        "size": "2x2",
+        "name": "移动平台",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 61
+    },
+    {
+        "name1": "AUTO_1645598631260.png",
+        "name2": "AUTO_1645598631260_C合同管理.png",
+        "size": "2x2",
+        "name": "合同管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 62
+    },
+    {
+        "name1": "AUTO_1645598899300.png",
+        "name2": "AUTO_1645598899300_C开发曲线.png",
+        "size": "2x2",
+        "name": "开发曲线",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 63
+    },
+    {
+        "name1": "AUTO_1645599156154.png",
+        "name2": "AUTO_1645599156154_C党群管理.png",
+        "size": "2x2",
+        "name": "党群管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 64
+    },
+    {
+        "name1": "AUTO_1645599366859.png",
+        "name2": "AUTO_1645599366859_C法律管理.png",
+        "size": "2x2",
+        "name": "法律管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 65
+    },
+    {
+        "name1": "AUTO_1645599467554.png",
+        "name2": "AUTO_1645599467554_C安全管理.png",
+        "size": "2x2",
+        "name": "安全管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 66
+    },
+    {
+        "name1": "AUTO_1645599603920.png",
+        "name2": "AUTO_1645599603920_C法治合规管理系统.png",
+        "size": "2x2",
+        "name": "法治合规管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 67
+    },
+    {
+        "name1": "AUTO_1645599712492.png",
+        "name2": "AUTO_1645599712492_C制度管理.png",
+        "size": "2x2",
+        "name": "制度管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 68
+    },
+    {
+        "name1": "AUTO_1645599804473.png",
+        "name2": "AUTO_1645599804473_C标准系统.png",
+        "size": "2x2",
+        "name": "标准系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 69
+    },
+    {
+        "name1": "AUTO_1645599941581.png",
+        "name2": "AUTO_1645599941581_C网络学院.png",
+        "size": "2x2",
+        "name": "网络学院",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 70
+    },
+    {
+        "name1": "AUTO_1645600400416.png",
+        "name2": "AUTO_1645600400416_C石化商旅.png",
+        "size": "2x2",
+        "name": "石化商旅",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 71
+    },
+    {
+        "name1": "AUTO_1645600945423.png",
+        "name2": "AUTO_1645600945423_C新井跟踪.png",
+        "size": "2x2",
+        "name": "新井跟踪",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 72
+    },
+    {
+        "name1": "AUTO_1645688629273.png",
+        "name2": "AUTO_1645688629273_C生产重点.png",
+        "size": "2x2",
+        "name": "生产重点",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 73
+    },
+    {
+        "name1": "AUTO_1645756565135.png",
+        "name2": "AUTO_1645756565135_C财务经营.png",
+        "size": "2x2",
+        "name": "财务经营",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 74
+    },
+    {
+        "name1": "AUTO_1647509677160.png",
+        "name2": "AUTO_1647509677160_C科技管理平台.png",
+        "size": "2x2",
+        "name": "科技管理平台",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 75
+    },
+    {
+        "name1": "AUTO_1647510707318.png",
+        "name2": "AUTO_1647510707318_C钻井监督日报.png",
+        "size": "2x2",
+        "name": "钻井监督日报",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 76
+    },
+    {
+        "name1": "AUTO_1647511070885.png",
+        "name2": "AUTO_1647511070885_C测试生产日报.png",
+        "size": "2x2",
+        "name": "测试生产日报",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 77
+    },
+    {
+        "name1": "AUTO_1648454882130.png",
+        "name2": "AUTO_1648454882130_C实验分析.png",
+        "size": "2x2",
+        "name": "实验分析",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 78
+    },
+    {
+        "name1": "AUTO_1649408616960.png",
+        "name2": "AUTO_1649408616960_C物装BW系统.png",
+        "size": "2x2",
+        "name": "物装BW系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 79
+    },
+    {
+        "name1": "AUTO_1649411112471.png",
+        "name2": "AUTO_1649411112471_C物资电子商务.png",
+        "size": "2x2",
+        "name": "物资电子商务",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 80
+    },
+    {
+        "name1": "AUTO_1649411513969.png",
+        "name2": "AUTO_1649411513969_C易派客.png",
+        "size": "2x2",
+        "name": "易派客",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 81
+    },
+    {
+        "name1": "AUTO_1649411560473.png",
+        "name2": "AUTO_1649411560473_C物资供应协同.png",
+        "size": "2x2",
+        "name": "物资供应协同",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 82
+    },
+    {
+        "name1": "AUTO_1649411776285.png",
+        "name2": "AUTO_1649411776285_C智能化管线.png",
+        "size": "2x2",
+        "name": "智能化管线",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 83
+    },
+    {
+        "name1": "AUTO_1662610017418.png",
+        "name2": "AUTO_1662610017418_C完井快报.png",
+        "size": "2x2",
+        "name": "完井快报",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 84
+    },
+    {
+        "name1": "AUTO_1662610117349.png",
+        "name2": "AUTO_1662610117349_C完井测试.png",
+        "size": "2x2",
+        "name": "完井测试",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 85
+    },
+    {
+        "name1": "AUTO_1666581710706.png",
+        "name2": "AUTO_1666581710706_C注气三次采油系统.png",
+        "size": "2x2",
+        "name": "注气三次采油系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 86
+    },
+    {
+        "name1": "AUTO_1666581786818.png",
+        "name2": "AUTO_1666581786818_C二厂数据决策系统.png",
+        "size": "2x2",
+        "name": "二厂数据决策系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 87
+    },
+    {
+        "name1": "AUTO_1666581893053.png",
+        "name2": "AUTO_1666581893053_C石油工程方案管理系统.png",
+        "size": "2x2",
+        "name": "石油工程方案管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 88
+    },
+    {
+        "name1": "AUTO_1666582018742.png",
+        "name2": "AUTO_1666582018742_C井控装备图库系统.png",
+        "size": "2x2",
+        "name": "井控装备图库系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 89
+    },
+    {
+        "name1": "AUTO_1666582152494.png",
+        "name2": "AUTO_1666582152494_C监督生产经营平台.png",
+        "size": "2x2",
+        "name": "监督生产经营平台",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 90
+    },
+    {
+        "name1": "AUTO_1666582214091.png",
+        "name2": "AUTO_1666582214091_C地面工程.png",
+        "size": "2x2",
+        "name": "地面工程",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 91
+    },
+    {
+        "name1": "AUTO_1666582329658.png",
+        "name2": "AUTO_1666582329658_C科技研发管理系统.png",
+        "size": "2x2",
+        "name": "科技研发管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 92
+    },
+    {
+        "name1": "AUTO_1666582540377.png",
+        "name2": "AUTO_1666582540377_C油气运销智能管理系统.png",
+        "size": "2x2",
+        "name": "油气运销智能管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 93
+    },
+    {
+        "name1": "AUTO_1666582779648.png",
+        "name2": "AUTO_1666582779648_C倒液运输管理系统.png",
+        "size": "2x2",
+        "name": "倒液运输管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 94
+    },
+    {
+        "name1": "AUTO_1666582846531.png",
+        "name2": "AUTO_1666582846531_C供水系统.png",
+        "size": "2x2",
+        "name": "供水系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 95
+    },
+    {
+        "name1": "AUTO_1666582926626.png",
+        "name2": "AUTO_1666582926626_C能源管控一体化系统.png",
+        "size": "2x2",
+        "name": "能源管控一体化系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 96
+    },
+    {
+        "name1": "AUTO_1666583039406.png",
+        "name2": "AUTO_1666583039406_C智能应急指挥系统.png",
+        "size": "2x2",
+        "name": "智能应急指挥系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 97
+    },
+    {
+        "name1": "AUTO_1666583226002.png",
+        "name2": "AUTO_1666583226002_C-六精-管理共享平台.png",
+        "size": "2x2",
+        "name": "六精管理共享平台",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 98
+    },
+    {
+        "name1": "AUTO_1666583364982.png",
+        "name2": "AUTO_1666583364982_C取证培训系统.png",
+        "size": "2x2",
+        "name": "取证培训系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 99
+    },
+    {
+        "name1": "AUTO_1666583498511.png",
+        "name2": "AUTO_1666583498511_C一厂考勤管理系统.png",
+        "size": "2x2",
+        "name": "一厂考勤管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 100
+    },
+    {
+        "name1": "AUTO_1666583740187.png",
+        "name2": "AUTO_1666583740187_C离退休职工信息管理系统.png",
+        "size": "2x2",
+        "name": "离退休职工信息管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 101
+    },
+    {
+        "name1": "AUTO_1666583880545.png",
+        "name2": "AUTO_1666583880545_C一厂仓储管理系统.png",
+        "size": "2x2",
+        "name": "一厂仓储管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 102
+    },
+    {
+        "name1": "AUTO_1666583928544.png",
+        "name2": "AUTO_1666583928544_C采油（气）井口管理系统.png",
+        "size": "2x2",
+        "name": "采油（气）井口管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 103
+    },
+    {
+        "name1": "AUTO_1666583973186.png",
+        "name2": "AUTO_1666583973186_C西北油田管杆管理系统.png",
+        "size": "2x2",
+        "name": "西北油田管杆管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 104
+    },
+    {
+        "name1": "AUTO_1666584180379.png",
+        "name2": "AUTO_1666584180379_C数字档案馆系统.png",
+        "size": "2x2",
+        "name": "数字档案馆系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 105
+    },
+    {
+        "name1": "AUTO_1666584268653.png",
+        "name2": "AUTO_1666584268653_C研究院云平台.png",
+        "size": "2x2",
+        "name": "研究院云平台",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 106
+    },
+    {
+        "name1": "AUTO_1670838488350.jpg",
+        "name2": "AUTO_1670838488350_C中石化电子招标交易网.jpg",
+        "size": "2x2",
+        "name": "中石化电子招标交易网",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 107
+    },
+    {
+        "name1": "AUTO_1672994044904.png",
+        "name2": "AUTO_1672994044904_C财务运营运行分析系统.png",
+        "size": "2x2",
+        "name": "财务运营运行分析系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 108
+    },
+    {
+        "name1": "AUTO_1675824694006.png",
+        "name2": "AUTO_1675824694006_C方案管理系统.png",
+        "size": "2x2",
+        "name": "方案管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 109
+    },
+    {
+        "name1": "AUTO_1675824822492.png",
+        "name2": "AUTO_1675824822492_C工程院价值积分.png",
+        "size": "2x2",
+        "name": "工程院价值积分",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 110
+    },
+    {
+        "name1": "AUTO_1675824877492.png",
+        "name2": "AUTO_1675824877492_C工程院管理系统.png",
+        "size": "2x2",
+        "name": "工程院管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 111
+    },
+    {
+        "name1": "AUTO_1675824988429.png",
+        "name2": "AUTO_1675824988429_C科研项目管理.png",
+        "size": "2x2",
+        "name": "科研项目管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 112
+    },
+    {
+        "name1": "AUTO_1677663885789.png",
+        "name2": "AUTO_1677663885789_C总部督办系统.png",
+        "size": "2x2",
+        "name": "总部督办系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 113
+    },
+    {
+        "name1": "AUTO_1694663735085.png",
+        "name2": "AUTO_1694663735085_C中石化地质资料管理系统.png",
+        "size": "2x2",
+        "name": "中石化地质资料管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 114
+    },
+    {
+        "name1": "AUTO_1694663867828.png",
+        "name2": "AUTO_1694663867828_C中石化档案管理系统.png",
+        "size": "2x2",
+        "name": "中石化档案管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 115
+    },
+    {
+        "name1": "AUTO_1695377149839.png",
+        "name2": "AUTO_1695377149839_C员工自助.png",
+        "size": "2x2",
+        "name": "员工自助",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 116
+    },
+    {
+        "name1": "AUTO_1697681999227.png",
+        "name2": "AUTO_1697681999227_C中石化法治合规管理系统.png",
+        "size": "2x2",
+        "name": "中石化法治合规管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 117
+    },
+    {
+        "name1": "AUTO_1698372021846.png",
+        "name2": "AUTO_1698372021846_C开发工具箱.png",
+        "size": "2x2",
+        "name": "开发工具箱",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 118
+    },
+    {
+        "name1": "AUTO_1703582374111.png",
+        "name2": "AUTO_1703582374111_C标准化系统.png",
+        "size": "2x2",
+        "name": "标准化系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 119
+    },
+    {
+        "name1": "AUTO_1704682089834.png",
+        "name2": "AUTO_1704682089834_C后勤管理系统.png",
+        "size": "2x2",
+        "name": "后勤管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 120
+    },
+    {
+        "name1": "AUTO_1704873061517.png",
+        "name2": "AUTO_1704873061517_C中石化会议管理系统.png",
+        "size": "2x2",
+        "name": "中石化会议管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 121
+    },
+    {
+        "name1": "AUTO_1704963304068.png",
+        "name2": "AUTO_1704963304068_C中石化股权管理系统.png",
+        "size": "2x2",
+        "name": "中石化股权管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 122
+    },
+    {
+        "name1": "AUTO_1710824498180.png",
+        "name2": "AUTO_1710824498180_C信用风险管理系统.png",
+        "size": "2x2",
+        "name": "信用风险管理系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 123
+    },
+    {
+        "name1": "AUTO_1710824885325.png",
+        "name2": "AUTO_1710824885325_CSmartBI报表工具.png",
+        "size": "2x2",
+        "name": "SmartBI报表工具",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 124
+    },
+    {
+        "name1": "AUTO_1711525669182.png",
+        "name2": "AUTO_1711525669182_C纪检监督应用系统.png",
+        "size": "2x2",
+        "name": "纪检监督应用系统",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 125
+    },
+    {
+        "name1": "AUTO_1722308567948.png",
+        "name2": "AUTO_1722308567948_C投资管理.png",
+        "size": "2x2",
+        "name": "投资管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 126
+    },
+    {
+        "name1": "WORKBENCH_AUDIT.png",
+        "name2": "WORKBENCH_AUDIT_C磁贴审核.png",
+        "size": "2x2",
+        "name": "磁贴审核",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 127
+    },
+    {
+        "name1": "WORKBENCH_BUSINESS.png",
+        "name2": "WORKBENCH_BUSINESS_C业务域.png",
+        "size": "2x2",
+        "name": "业务域",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 128
+    },
+    {
+        "name1": "WORKBENCH_MANAGER.png",
+        "name2": "WORKBENCH_MANAGER_C磁贴管理.png",
+        "size": "2x2",
+        "name": "磁贴管理",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 129
+    },
+    {
+        "name1": "WORKBENCH_USER_AUTH.png",
+        "name2": "WORKBENCH_USER_AUTH_C用户授权.png",
+        "size": "2x2",
+        "name": "用户授权",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 130
+    },
+    {
+        "name1": "WORKBENCH_USER_TMPL.png",
+        "name2": "WORKBENCH_USER_TMPL_C用户模板.png",
+        "size": "2x2",
+        "name": "用户模板",
+        "w": 1,
+        "h": 2,
+        "component": "./components/Output1/index.vue",
+        "i": 131
+    }
+]
+
+export { tilesList }
\ No newline at end of file
diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
index 7d2dfa9e..b4117136 100644
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -18,7 +18,7 @@ import {
 } from './components';
 import { useLayout } from './hooks/use-layout';
 
-interface Props extends VbenLayoutProps {}
+interface Props extends VbenLayoutProps { }
 
 defineOptions({
   name: 'VbenLayout',
@@ -120,7 +120,6 @@ const sidebarEnableState = computed(() => {
  */
 const sidebarMarginTop = computed(() => {
   const { headerHeight, isMobile } = props;
-  console.log(props);
   return (isMixedNav.value && !isMobile) ||
     currentLayout.value === 'sidebar-topbar'
     ? headerHeight
@@ -245,9 +244,9 @@ const tabbarStyle = computed((): CSSProperties => {
   let marginLeft = 0;
 
   // 如果不是混合导航，tabbar 的宽度为 100%
-  if (!isMixedNav.value || props.sidebarHidden) {
+  if ((!isMixedNav.value || props.sidebarHidden) && currentLayout.value !== 'sidebar-topbar') {
     width = '100%';
-  } else if (sidebarEnable.value) {
+  } else if (sidebarEnable.value ) {
     // 鼠标在侧边栏上时，且侧边栏展开时的宽度
     const onHoveringWidth = sidebarExpandOnHover.value
       ? props.sidebarWidth
@@ -278,9 +277,9 @@ const contentStyle = computed((): CSSProperties => {
   return {
     marginTop:
       fixed &&
-      !isFullContent.value &&
-      !headerIsHidden.value &&
-      (!isHeaderAutoMode.value || scrollY.value < headerWrapperHeight.value)
+        !isFullContent.value &&
+        !headerIsHidden.value &&
+        (!isHeaderAutoMode.value || scrollY.value < headerWrapperHeight.value)
         ? `${headerWrapperHeight.value}px`
         : 0,
     paddingBottom: `${footerEnable && footerFixed ? footerHeight : 0}px`,
@@ -448,31 +447,15 @@ function handleHeaderToggle() {
 
 <template>
   <div class="relative flex min-h-full w-full">
-    <LayoutSidebar
-      v-if="sidebarEnableState"
-      v-model:collapse="sidebarCollapse"
-      v-model:expand-on-hover="sidebarExpandOnHover"
-      v-model:expand-on-hovering="sidebarExpandOnHovering"
-      v-model:extra-collapse="sidebarExtraCollapse"
-      v-model:extra-visible="sidebarExtraVisible"
-      :collapse-width="getSideCollapseWidth"
-      :dom-visible="!isMobile"
-      :extra-width="sidebarExtraWidth"
-      :fixed-extra="sidebarExpandOnHover"
-      :header-height="isMixedNav ? 0 : headerHeight"
-      :is-sidebar-mixed="isSidebarMixedNav"
-      :margin-top="sidebarMarginTop"
-      :mixed-width="sidebarMixedWidth"
-      :show="showSidebar"
-      :theme="sidebarTheme"
-      :width="getSidebarWidth"
-      :z-index="sidebarZIndex"
-      @leave="() => emit('sideMouseLeave')"
-    >
-      <template
-        v-if="isSideMode && !isMixedNav && currentLayout !== 'sidebar-topbar'"
-        #logo
-      >
+    <LayoutSidebar v-if="sidebarEnableState" v-model:collapse="sidebarCollapse"
+      v-model:expand-on-hover="sidebarExpandOnHover" v-model:expand-on-hovering="sidebarExpandOnHovering"
+      v-model:extra-collapse="sidebarExtraCollapse" v-model:extra-visible="sidebarExtraVisible"
+      :collapse-width="getSideCollapseWidth" :dom-visible="!isMobile" :extra-width="sidebarExtraWidth"
+      :fixed-extra="sidebarExpandOnHover" :header-height="isMixedNav ? 0 : headerHeight"
+      :is-sidebar-mixed="isSidebarMixedNav" :margin-top="sidebarMarginTop" :mixed-width="sidebarMixedWidth"
+      :show="showSidebar" :theme="sidebarTheme" :width="getSidebarWidth" :z-index="sidebarZIndex"
+      @leave="() => emit('sideMouseLeave')">
+      <template v-if="isSideMode && !isMixedNav && currentLayout !== 'sidebar-topbar'" #logo>
         <slot name="logo"></slot>
       </template>
 
@@ -491,65 +474,35 @@ function handleHeaderToggle() {
       </template>
     </LayoutSidebar>
 
-    <div
-      ref="contentRef"
-      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
-    >
-      <div
-        :class="{
-          'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
-        }"
-        :style="headerWrapperStyle"
-        class="overflow-hidden transition-all duration-200"
-      >
-        <LayoutHeader
-          v-if="headerVisible"
-          :full-width="!isSideMode"
-          :height="headerHeight"
-          :is-mobile="isMobile"
-          :show="!isFullContent && !headerHidden"
-          :sidebar-width="sidebarWidth"
-          :theme="headerTheme"
-          :width="mainStyle.width"
-          :z-index="headerZIndex"
-        >
+    <div ref="contentRef" class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in">
+      <div :class="{
+        'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
+      }" :style="headerWrapperStyle" class="overflow-hidden transition-all duration-200">
+        <LayoutHeader v-if="headerVisible" :full-width="!isSideMode" :height="headerHeight" :is-mobile="isMobile"
+          :show="!isFullContent && !headerHidden" :sidebar-width="sidebarWidth" :theme="headerTheme"
+          :width="mainStyle.width" :z-index="headerZIndex">
           <template v-if="showHeaderLogo" #logo>
             <slot name="logo"></slot>
           </template>
 
           <template #toggle-button>
-            <VbenIconButton
-              v-if="showHeaderToggleButton"
-              class="my-0 ml-2 mr-1 rounded-md"
-              @click="handleHeaderToggle"
-            >
+            <VbenIconButton v-if="showHeaderToggleButton" class="my-0 ml-2 mr-1 rounded-md" @click="handleHeaderToggle">
               <Menu class="size-4" />
             </VbenIconButton>
           </template>
           <slot name="header"></slot>
         </LayoutHeader>
 
-        <LayoutTabbar
-          v-if="tabbarEnable"
-          :height="tabbarHeight"
-          :style="tabbarStyle"
-        >
+        <LayoutTabbar v-if="tabbarEnable" :height="tabbarHeight" :style="tabbarStyle">
           <slot name="tabbar"></slot>
         </LayoutTabbar>
       </div>
 
       <!-- </div> -->
-      <LayoutContent
-        :content-compact="contentCompact"
-        :content-compact-width="contentCompactWidth"
-        :padding="contentPadding"
-        :padding-bottom="contentPaddingBottom"
-        :padding-left="contentPaddingLeft"
-        :padding-right="contentPaddingRight"
-        :padding-top="contentPaddingTop"
-        :style="contentStyle"
-        class="transition-[margin-top] duration-200"
-      >
+      <LayoutContent :content-compact="contentCompact" :content-compact-width="contentCompactWidth"
+        :padding="contentPadding" :padding-bottom="contentPaddingBottom" :padding-left="contentPaddingLeft"
+        :padding-right="contentPaddingRight" :padding-top="contentPaddingTop" :style="contentStyle"
+        class="transition-[margin-top] duration-200">
         <slot name="content"></slot>
 
         <template #overlay>
@@ -557,23 +510,14 @@ function handleHeaderToggle() {
         </template>
       </LayoutContent>
 
-      <LayoutFooter
-        v-if="footerEnable"
-        :fixed="footerFixed"
-        :height="footerHeight"
-        :show="!isFullContent"
-        :width="footerWidth"
-        :z-index="zIndex"
-      >
+      <LayoutFooter v-if="footerEnable" :fixed="footerFixed" :height="footerHeight" :show="!isFullContent"
+        :width="footerWidth" :z-index="zIndex">
         <slot name="footer"></slot>
       </LayoutFooter>
     </div>
     <slot name="extra"></slot>
-    <div
-      v-if="maskVisible"
-      :style="maskStyle"
+    <div v-if="maskVisible" :style="maskStyle"
       class="bg-overlay fixed left-0 top-0 h-full w-full transition-[background-color] duration-200"
-      @click="handleClickMask"
-    ></div>
+      @click="handleClickMask"></div>
   </div>
 </template>
diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue b/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
index 53152661..d17f56c8 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
@@ -107,7 +107,7 @@ onBeforeUnmount(() => {
       </template>
       <slot name="title"></slot>
     </VbenTooltip>
-    <div v-show="!showTooltip" :class="[e('content')]">
+    <div v-show="!showTooltip" :class="[e('content')]"  class="text-wrap">
       <VbenMenuBadge
         v-if="rootMenu.props.mode !== 'horizontal'"
         class="right-2"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
index 1c3b4470..ea4b01e1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@@ -26,6 +26,10 @@ interface Props {
    * @zh_CN Logo 主题
    */
   theme?: string;
+  /**
+   * logo字体颜色
+   */
+  textClass?: string;
 }
 
 defineOptions({
@@ -43,21 +47,10 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div :class="theme" class="flex h-full items-center text-lg">
-    <a
-      :class="$attrs.class"
-      :href="href"
-      class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500"
-    >
-      <VbenAvatar
-        v-if="src"
-        :alt="text"
-        :src="src"
-        class="relative w-8 rounded-none bg-transparent"
-      />
-      <span
-        v-if="!collapsed"
-        class="text-foreground truncate text-nowrap font-semibold"
-      >
+    <a :class="$attrs.class" :href="href"
+      class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500">
+      <VbenAvatar v-if="src" :alt="text" :src="src" class="relative w-8 rounded-none bg-transparent" />
+      <span v-if="!collapsed" class="text-foreground truncate text-nowrap font-semibold" :class="textClass">
         {{ text }}
       </span>
     </a>
diff --git a/packages/effects/layouts/src/widgets/notification/notification.vue b/packages/effects/layouts/src/widgets/notification/notification.vue
index 6eb4b368..9c44dad5 100644
--- a/packages/effects/layouts/src/widgets/notification/notification.vue
+++ b/packages/effects/layouts/src/widgets/notification/notification.vue
@@ -21,6 +21,10 @@ interface Props {
    * 消息列表
    */
   notifications?: NotificationItem[];
+  /**
+   * 图标颜色
+   */
+  icColor?:string;
 }
 
 defineOptions({ name: 'NotificationPopup' });
@@ -70,9 +74,9 @@ function handleClick(item: NotificationItem) {
         <VbenIconButton class="bell-button text-foreground relative">
           <span
             v-if="dot"
-            class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
+            class="bg-[#ef4444] absolute right-0.5 top-0.5 h-2 w-2 rounded"
           ></span>
-          <Bell class="size-4" />
+          <Bell class="size-4" :style="{ color: icColor}" />
         </VbenIconButton>
       </div>
     </template>
diff --git a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
index 9a0f2d10..0c820a4f 100644
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -53,6 +53,10 @@ interface Props {
    * 文本
    */
   text?: string;
+  /**
+   * 是否隐藏锁定屏幕
+   */
+  hideLockLcreen?: boolean
 }
 
 defineOptions({
@@ -176,7 +180,7 @@ if (enableShortcutKey.value) {
           <div
             class="text-foreground mb-1 flex items-center text-sm font-medium"
           >
-            {{ text }}
+            李华
             <Badge class="ml-2 text-green-400">
               {{ tagText }}
             </Badge>
@@ -196,7 +200,8 @@ if (enableShortcutKey.value) {
         <VbenIcon :icon="menu.icon" class="mr-2 size-4" />
         {{ menu.text }}
       </DropdownMenuItem>
-      <DropdownMenuSeparator />
+      <template v-if="!hideLockLcreen">
+        <DropdownMenuSeparator />
       <DropdownMenuItem
         v-if="preferences.widget.lockScreen"
         class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
@@ -208,6 +213,7 @@ if (enableShortcutKey.value) {
           {{ altView }} L
         </DropdownMenuShortcut>
       </DropdownMenuItem>
+      </template>
       <DropdownMenuSeparator />
       <DropdownMenuItem
         class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 10d6b2fe..f774e2c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -609,6 +609,27 @@ importers:
 
   apps/web-test:
     dependencies:
+      '@vben-core/form-ui':
+        specifier: workspace:*
+        version: link:../../packages/@core/ui-kit/form-ui
+      '@vben-core/layout-ui':
+        specifier: workspace:*
+        version: link:../../packages/@core/ui-kit/layout-ui
+      '@vben-core/menu-ui':
+        specifier: workspace:*
+        version: link:../../packages/@core/ui-kit/menu-ui
+      '@vben-core/popup-ui':
+        specifier: workspace:*
+        version: link:../../packages/@core/ui-kit/popup-ui
+      '@vben-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../packages/@core/ui-kit/shadcn-ui
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../../packages/@core/base/shared
+      '@vben-core/tabs-ui':
+        specifier: workspace:*
+        version: link:../../packages/@core/ui-kit/tabs-ui
       '@vben/access':
         specifier: workspace:*
         version: link:../../packages/effects/access
@@ -13962,10 +13983,10 @@ snapshots:
 
   '@interactjs/feedback@1.10.2': {}
 
-  '@interactjs/inertia@1.10.2(@interactjs/core@1.10.2(@interactjs/utils@1.10.2))(@interactjs/modifiers@1.10.2(@interactjs/core@1.10.2(@interactjs/utils@1.10.2))(@interactjs/utils@1.10.2))(@interactjs/utils@1.10.2)':
+  '@interactjs/inertia@1.10.2(@interactjs/core@1.10.2(@interactjs/utils@1.10.2))(@interactjs/modifiers@1.10.2(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.2)':
     dependencies:
       '@interactjs/core': 1.10.2(@interactjs/utils@1.10.2)
-      '@interactjs/modifiers': 1.10.2(@interactjs/core@1.10.2(@interactjs/utils@1.10.2))(@interactjs/utils@1.10.2)
+      '@interactjs/modifiers': 1.10.2(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
       '@interactjs/offset': 1.10.2(@interactjs/core@1.10.2(@interactjs/utils@1.10.2))(@interactjs/utils@1.10.2)
       '@interactjs/utils': 1.10.2
     optionalDependencies:
@@ -14001,7 +14022,7 @@ snapshots:
       '@interactjs/core': 1.10.2(@interactjs/utils@1.10.2)
       '@interactjs/dev-tools': 1.10.2
       '@interactjs/feedback': 1.10.2
-      '@interactjs/inertia': 1.10.2(@interactjs/core@1.10.2(@interactjs/utils@1.10.2))(@interactjs/modifiers@1.10.2(@interactjs/core@1.10.2(@interactjs/utils@1.10.2))(@interactjs/utils@1.10.2))(@interactjs/utils@1.10.2)
+      '@interactjs/inertia': 1.10.2(@interactjs/core@1.10.2(@interactjs/utils@1.10.2))(@interactjs/modifiers@1.10.2(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.2)
       '@interactjs/interact': 1.10.2
       '@interactjs/modifiers': 1.10.2(@interactjs/core@1.10.2(@interactjs/utils@1.10.2))(@interactjs/utils@1.10.2)
       '@interactjs/multi-target': 1.10.2