From 3442f962148b7a65d26f703b1b4af9ce8d04c711 Mon Sep 17 00:00:00 2001 From: wangys <3401275564@qq.com> Date: Sat, 13 Dec 2025 14:23:40 +0800 Subject: [PATCH] =?UTF-8?q?admin=E8=B7=B3=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../platform/localSharedImportMap.js | 130 -------- .../AdminSidebarLayout.scss | 264 ++++++++++++++++ .../AdminSidebarLayout/AdminSidebarLayout.vue | 292 ++++++++++++++++++ .../src/layouts/AdminSidebarLayout/README.md | 214 +++++++++++++ .../layouts/SidebarLayout/SidebarLayout.vue | 28 +- 应用对应服务.drawio.xml | 136 -------- 6 files changed, 795 insertions(+), 269 deletions(-) delete mode 100644 urbanLifelineWeb/packages/platform/.__mf__temp/platform/localSharedImportMap.js create mode 100644 urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss create mode 100644 urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue create mode 100644 urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/README.md delete mode 100644 应用对应服务.drawio.xml diff --git a/urbanLifelineWeb/packages/platform/.__mf__temp/platform/localSharedImportMap.js b/urbanLifelineWeb/packages/platform/.__mf__temp/platform/localSharedImportMap.js deleted file mode 100644 index 963040dd..00000000 --- a/urbanLifelineWeb/packages/platform/.__mf__temp/platform/localSharedImportMap.js +++ /dev/null @@ -1,130 +0,0 @@ - -// Windows temporarily needs this file, https://github.com/module-federation/vite/issues/68 - - import {loadShare} from "@module-federation/runtime"; - const importMap = { - - "element-plus": async () => { - let pkg = await import("__mf__virtual/platform__prebuild__element_mf_2_plus__prebuild__.js"); - return pkg; - } - , - "vue": async () => { - let pkg = await import("__mf__virtual/platform__prebuild__vue__prebuild__.js"); - return pkg; - } - , - "vue-router": async () => { - let pkg = await import("__mf__virtual/platform__prebuild__vue_mf_2_router__prebuild__.js"); - return pkg; - } - - } - const usedShared = { - - "element-plus": { - name: "element-plus", - version: "2.12.0", - scope: ["default"], - loaded: false, - from: "platform", - async get () { - if (false) { - throw new Error(`Shared module '${"element-plus"}' must be provided by host`); - } - usedShared["element-plus"].loaded = true - const {"element-plus": pkgDynamicImport} = importMap - const res = await pkgDynamicImport() - const exportModule = {...res} - // All npm packages pre-built by vite will be converted to esm - Object.defineProperty(exportModule, "__esModule", { - value: true, - enumerable: false - }) - return function () { - return exportModule - } - }, - shareConfig: { - singleton: false, - requiredVersion: "^2.12.0", - - } - } - , - "vue": { - name: "vue", - version: "3.5.25", - scope: ["default"], - loaded: false, - from: "platform", - async get () { - if (false) { - throw new Error(`Shared module '${"vue"}' must be provided by host`); - } - usedShared["vue"].loaded = true - const {"vue": pkgDynamicImport} = importMap - const res = await pkgDynamicImport() - const exportModule = {...res} - // All npm packages pre-built by vite will be converted to esm - Object.defineProperty(exportModule, "__esModule", { - value: true, - enumerable: false - }) - return function () { - return exportModule - } - }, - shareConfig: { - singleton: false, - requiredVersion: "^3.5.25", - - } - } - , - "vue-router": { - name: "vue-router", - version: "4.6.3", - scope: ["default"], - loaded: false, - from: "platform", - async get () { - if (false) { - throw new Error(`Shared module '${"vue-router"}' must be provided by host`); - } - usedShared["vue-router"].loaded = true - const {"vue-router": pkgDynamicImport} = importMap - const res = await pkgDynamicImport() - const exportModule = {...res} - // All npm packages pre-built by vite will be converted to esm - Object.defineProperty(exportModule, "__esModule", { - value: true, - enumerable: false - }) - return function () { - return exportModule - } - }, - shareConfig: { - singleton: false, - requiredVersion: "^4.6.3", - - } - } - - } - const usedRemotes = [ - { - entryGlobalName: "shared", - name: "shared", - type: "module", - entry: "http://localhost:5000/remoteEntry.js", - shareScope: "default", - } - - ] - export { - usedShared, - usedRemotes - } - \ No newline at end of file diff --git a/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss b/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss new file mode 100644 index 00000000..c3a40ef7 --- /dev/null +++ b/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss @@ -0,0 +1,264 @@ +.sidebar-layout { + display: flex; + width: 100%; + height: 100vh; + overflow: hidden; +} + +// ==================== 侧边栏 ==================== +.sidebar { + width: 220px; + height: 100%; + background: #F0EAF4; + display: flex; + flex-direction: column; + color: #333; + flex-shrink: 0; + transition: width 0.3s ease; + border-right: 1px solid rgba(0, 0, 0, 0.08); + + &.collapsed { + width: 64px; + + .sidebar-header { + padding: 16px 12px; + justify-content: center; + + .logo { + justify-content: center; + } + + .collapse-btn { + position: static; + margin-left: 0; + } + } + + .nav-item { + justify-content: center; + padding: 12px; + } + + .user-section { + justify-content: center; + padding: 16px 12px; + } + } +} + +// 侧边栏头部 +.sidebar-header { + padding: 16px 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.08); + display: flex; + align-items: center; + justify-content: space-between; +} + +.collapse-btn { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + cursor: pointer; + color: #888; + transition: all 0.2s; + + &:hover { + background: rgba(124, 58, 237, 0.1); + color: #7c3aed; + } +} + +.logo { + display: flex; + align-items: center; + gap: 10px; + + .logo-img { + width: 40px; + height: 40px; + border-radius: 6px; + object-fit: contain; + background: #fff; + padding: 2px; + } + + .logo-text { + font-size: 16px; + font-weight: 600; + color: #333; + } +} + +// 导航菜单 +.nav-menu { + flex: 1; + overflow-y: auto; + padding: 12px 0; + + &::-webkit-scrollbar { + width: 4px; + } + + &::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.2); + border-radius: 4px; + } +} + +.nav-section { + padding: 8px 0; +} + +.nav-item { + display: flex; + align-items: center; + gap: 12px; + padding: 14px 20px; + margin-bottom: 4px; + cursor: pointer; + transition: all 0.2s ease; + color: #555; + font-size: 14px; + + &:hover { + background: rgba(124, 58, 237, 0.1); + color: #7c3aed; + } + + &.active { + background: rgba(124, 58, 237, 0.15); + color: #7c3aed; + font-weight: 500; + } + + .el-icon { + font-size: 18px; + flex-shrink: 0; + } + + span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +// 用户信息 +.user-section { + padding: 16px 20px; + border-top: 1px solid rgba(0, 0, 0, 0.08); + cursor: pointer; + transition: background 0.2s; + + &:hover { + background: rgba(124, 58, 237, 0.05); + } + + .user-info-wrapper { + display: flex; + align-items: center; + gap: 12px; + } + + .user-avatar { + flex-shrink: 0; + } + + .user-name { + font-size: 14px; + font-weight: 500; + color: #333; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +// ==================== 主内容区 ==================== +.main-content { + flex: 1; + height: 100%; + overflow: hidden; + background: #fff; + position: relative; +} + +// iframe 容器 +.iframe-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + position: relative; +} + +.iframe-header { + height: 56px; + padding: 0 24px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #e5e7eb; + background: #fafafa; + flex-shrink: 0; +} + +.iframe-title { + font-size: 16px; + font-weight: 600; + color: #333; +} + +.content-iframe { + flex: 1; + width: 100%; + height: 100%; + border: none; + background: #fff; +} + +.iframe-loading { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + color: #7c3aed; + font-size: 14px; + z-index: 10; + + .el-icon { + font-size: 32px; + } +} + +// ==================== 响应式 ==================== +@media (max-width: 768px) { + .sidebar { + width: 64px; + + &:not(.collapsed) { + width: 220px; + position: fixed; + left: 0; + top: 0; + z-index: 1000; + box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); + } + } + + .iframe-header { + padding: 0 16px; + + .iframe-title { + font-size: 14px; + } + } +} diff --git a/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue b/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue new file mode 100644 index 00000000..24209620 --- /dev/null +++ b/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue @@ -0,0 +1,292 @@ +