+
+
+
+);
+
+export default ModularStockMonitoring;
diff --git a/frontend/src/pages/ModularStockMonitoring/style.css b/frontend/src/pages/ModularStockMonitoring/style.css
new file mode 100644
index 0000000..25f477b
--- /dev/null
+++ b/frontend/src/pages/ModularStockMonitoring/style.css
@@ -0,0 +1,120 @@
+.msm-page {
+ container-name: modular-stock-monitoring;
+ container-type: inline-size;
+ display: flex;
+ min-height: calc(100% - 46px);
+ flex-direction: column;
+ gap: var(--sycm-page-section-gap);
+ background: var(--sycm-bg-page-soft);
+}
+
+.msm-header {
+ display: flex;
+ min-height: 84px;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--sycm-space-lg);
+ margin: calc(var(--sycm-page-padding-y) * -1) calc(var(--sycm-page-padding-x) * -1) 0;
+ padding: 14px calc(var(--sycm-page-padding-x) + 2px);
+ border-bottom: 1px solid var(--sycm-border-base);
+ background: var(--sycm-bg-container);
+}
+.msm-header__heading { min-width: 0; }
+.msm-header h3 {
+ margin: 0;
+ color: var(--sycm-text-strong);
+ font-size: var(--sycm-font-size-page);
+ font-weight: var(--sycm-font-weight-semibold);
+ line-height: var(--sycm-line-height-tight);
+}
+.msm-header__heading .ant-typography {
+ display: block;
+ margin-top: 6px;
+ color: var(--sycm-text-secondary);
+ font-size: var(--sycm-font-size-caption);
+}
+
+.msm-filter-card,
+.msm-panel,
+.msm-summary-card {
+ border: 1px solid var(--sycm-border-card) !important;
+ border-radius: var(--sycm-radius-lg) !important;
+ box-shadow: var(--sycm-shadow-card) !important;
+}
+.msm-filter-card { margin-bottom: 0; }
+.msm-filter-card .ant-card-body { padding: 14px 16px; }
+.msm-filter-card .ant-space { width: 100%; }
+.msm-filter-card .ant-space-item { max-width: 100%; }
+.msm-filter-card .ant-select,
+.msm-filter-card .ant-input-affix-wrapper { max-width: 100%; }
+
+.msm-summary-row { margin-top: -4px; }
+.msm-summary-row .ant-col { display: flex; }
+.msm-summary-card {
+ position: relative;
+ width: 100%;
+ min-height: 98px;
+ overflow: hidden;
+}
+.msm-summary-card::before {
+ position: absolute;
+ inset: 0 auto 0 0;
+ width: 3px;
+ background: var(--sycm-color-primary);
+ content: '';
+}
+.msm-summary-card.is-red::before { background: var(--sycm-color-danger); }
+.msm-summary-card.is-orange::before { background: var(--sycm-color-orange); }
+.msm-summary-card.is-green::before { background: var(--sycm-color-success); }
+/* 「低于安全库存」独立成色,避免与缺货(红)、库存偏低(橙)混淆 */
+.msm-summary-card.is-purple::before { background: var(--sycm-color-purple, #722ed1); }
+.msm-summary-card.is-cyan::before { background: var(--sycm-color-cyan, #13c2c2); }
+.msm-summary-card .ant-card-body {
+ display: flex;
+ min-height: 98px;
+ align-items: center;
+ padding: 16px 18px;
+}
+.msm-summary-card .ant-statistic { width: 100%; }
+.msm-summary-card .ant-statistic-title {
+ margin-bottom: 8px;
+ color: var(--sycm-text-secondary);
+ font-size: var(--sycm-font-size-caption);
+}
+.msm-summary-card .ant-statistic-content {
+ color: var(--sycm-text-strong);
+ font-family: var(--sycm-font-family-number);
+ font-size: var(--sycm-font-size-metric);
+ line-height: 1.1;
+}
+.msm-summary-card .ant-statistic-content-suffix { font-size: var(--sycm-font-size-caption); }
+
+.msm-panel { margin-bottom: 0; overflow: hidden; }
+.msm-panel .ant-card-head {
+ min-height: 48px;
+ padding: 0 16px;
+ border-bottom-color: var(--sycm-border-light);
+}
+.msm-panel .ant-card-head-title { font-size: var(--sycm-font-size-title); }
+.msm-panel .ant-card-body { padding: 0 16px 16px; }
+.msm-panel .ant-table { font-size: var(--sycm-font-size-caption); }
+.msm-panel .ant-table-wrapper .ant-table-container { border-radius: var(--sycm-radius-md); }
+.msm-panel .ant-table-placeholder .ant-table-cell { height: 180px; }
+.msm-muted { color: var(--sycm-text-tertiary); }
+
+@container modular-stock-monitoring (max-width: 900px) {
+ .msm-filter-card .ant-space-item { flex: 1 1 180px; }
+}
+
+@media (max-width: 767px) {
+ .msm-header {
+ min-height: 72px;
+ align-items: flex-start;
+ flex-direction: column;
+ gap: var(--sycm-space-sm);
+ padding-block: 12px;
+ }
+ .msm-filter-card .ant-select,
+ .msm-filter-card .ant-input-affix-wrapper { width: 100%; }
+ .msm-panel .ant-card-body { padding-inline: 10px; }
+}
diff --git a/frontend/src/router/index.jsx b/frontend/src/router/index.jsx
index 9e4352c..2761c18 100644
--- a/frontend/src/router/index.jsx
+++ b/frontend/src/router/index.jsx
@@ -17,6 +17,7 @@ const DevelopmentStylePreview = lazy(() => import('../pages/DevelopmentStylePrev
const ProductAnalysis = lazy(() => import('../pages/ProductAnalysis'));
const OpsBIncentiveBoard = lazy(() => import('../pages/PlanningUpload/OpsBIncentiveBoard'));
const ProductMonitoring = lazy(() => import('../pages/ProductMonitoring'));
+const ModularStockMonitoring = lazy(() => import('../pages/ModularStockMonitoring'));
const lazyLoadingElement =