@deppon/deppon-template 2.4.5 → 2.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/pro-layout/ProLayout.vue.css +273 -13
  2. package/es/pro-layout/ProLayout.vue_vue_type_script_setup_true_lang.vue.js +117 -48
  3. package/package.json +6 -6
package/es/pro-layout/ProLayout.vue.css CHANGED
@@ -1169,6 +1169,12 @@ body .el-overlay-dialog,
1169
1169
  --pro-layout-header-bg: var(--el-bg-color, #ffffff);
1170
1170
  --pro-layout-tags-bar-bg: var(--pro-layout-header-bg);
1171
1171
  --pro-layout-main-bg: var(--el-bg-color-page, #f2f3f5);
1172
+ /* 顶栏横向菜单：圆体（可通过 --pro-layout-top-menu-font-family 覆盖） */
1173
+ --pro-layout-top-menu-font-family: 'Yuanti SC', 'Yuanti TC', 'Hiragino Sans GB', 'PingFang SC', 'Microsoft YaHei UI', system-ui, sans-serif;
1174
+ --pro-layout-top-menu-active-bar-width: 28px;
1175
+ --pro-layout-top-menu-active-bar-height: 3px;
1176
+ /* 选中态：下划线距菜单项底边的距离（绝对定位，不占文字布局） */
1177
+ --pro-layout-top-menu-active-bar-offset: 4px;
1172
1178
  background: #fff !important;
1173
1179
  }
1174
1180
  .pro-layout__sider {
@@ -1645,31 +1651,285 @@ body .el-overlay-dialog,
1645
1651
  .pro-layout__top-menu {
1646
1652
  flex: 1;
1647
1653
  min-width: 0;
1654
+ display: flex;
1655
+ align-items: center;
1656
+ justify-content: flex-start;
1657
+ margin: 0 6px;
1648
1658
  padding: 0 6px;
1659
+ /* 覆盖 Element Plus：.el-menu-item [class^=el-icon] 的 margin-right，间距改由 label 的 gap 控制 */
1660
+ /* 首项（工作台）：浅灰底、紧凑内边距，字与图标近黑、同一水平线 */
1661
+ /* 其余项选中：加粗、近黑字；下划线挂在菜单项上，绝对定位不占布局、不挡选中背景 */
1662
+ }
1663
+ .pro-layout__top-menu-glass {
1664
+ display: flex;
1665
+ flex: 1;
1666
+ min-width: 0;
1667
+ width: 100%;
1668
+ align-items: center;
1669
+ justify-content: flex-start;
1670
+ padding: 0;
1671
+ background: transparent;
1672
+ border: none;
1673
+ box-shadow: none;
1674
+ backdrop-filter: none;
1675
+ -webkit-backdrop-filter: none;
1676
+ }
1677
+ .pro-layout__top-menu-divider-line {
1678
+ display: block;
1679
+ width: 1px;
1680
+ height: 18px;
1681
+ margin: 0 auto;
1682
+ border-radius: 1px;
1683
+ background: rgba(0, 0, 0, 0.08);
1649
1684
  }
1650
1685
  .pro-layout__top-menu .pro-layout__top-menu-el {
1686
+ --el-menu-bg-color: transparent !important;
1687
+ --el-menu-horizontal-height: 40px;
1651
1688
  background: transparent !important;
1652
1689
  border-bottom: none !important;
1690
+ height: auto !important;
1691
+ min-height: 0 !important;
1692
+ flex: 1;
1693
+ min-width: 0;
1694
+ font-family: var(--pro-layout-top-menu-font-family) !important;
1653
1695
  }
1654
- .pro-layout__top-menu .el-menu-item {
1655
- height: 38px !important;
1656
- margin: 8px 6px !important;
1696
+ .pro-layout__top-menu .pro-layout__top-menu-el.el-menu--horizontal {
1697
+ display: flex !important;
1698
+ flex-wrap: nowrap !important;
1699
+ align-items: center !important;
1700
+ }
1701
+ .pro-layout__top-menu .el-menu-item,
1702
+ .pro-layout__top-menu .el-sub-menu__title {
1703
+ min-height: 30px !important;
1704
+ height: 30px !important;
1705
+ line-height: 1.2 !important;
1706
+ margin: 0 4px !important;
1707
+ padding: 0 14px !important;
1657
1708
  border-radius: 10px !important;
1658
1709
  border-bottom: none !important;
1659
- color: #4a5b76 !important;
1660
- transition: all 0.2s ease !important;
1710
+ font-family: inherit !important;
1711
+ font-size: 14px !important;
1712
+ font-weight: 500 !important;
1713
+ letter-spacing: 0.03em !important;
1714
+ color: rgba(0, 0, 0, 0.52) !important;
1715
+ background: transparent !important;
1716
+ user-select: none;
1717
+ transition: background 0.2s ease, color 0.2s ease !important;
1718
+ display: inline-flex !important;
1719
+ align-items: center !important;
1720
+ justify-content: center !important;
1721
+ box-sizing: border-box !important;
1661
1722
  }
1662
- .pro-layout__top-menu .el-menu-item:hover {
1663
- color: var(--el-color-primary, #409eff) !important;
1723
+ .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-divider {
1724
+ height: 40px !important;
1725
+ min-height: 40px !important;
1726
+ line-height: 1 !important;
1727
+ width: 14px !important;
1728
+ min-width: 14px !important;
1729
+ max-width: 14px !important;
1730
+ padding: 0 !important;
1731
+ margin: 0 6px !important;
1732
+ cursor: default !important;
1733
+ opacity: 1 !important;
1734
+ pointer-events: none !important;
1664
1735
  background: transparent !important;
1736
+ border-radius: 0 !important;
1737
+ display: inline-flex !important;
1738
+ align-items: center !important;
1739
+ justify-content: center !important;
1740
+ box-sizing: border-box !important;
1665
1741
  }
1666
- .pro-layout__top-menu .el-menu-item.is-active {
1667
- background: linear-gradient(135deg, rgba(57, 124, 255, 0.18), rgba(108, 74, 255, 0.15)) !important;
1668
- box-shadow: 0 8px 20px rgba(56, 108, 255, 0.16);
1742
+ .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-divider:hover,
1743
+ .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-divider:focus {
1744
+ background: transparent !important;
1669
1745
  }
1670
- .pro-layout__top-menu .el-menu-item.is-active .pro-layout__top-menu-item-label {
1671
- color: #1651d7 !important;
1672
- font-weight: 700;
1746
+ .pro-layout__top-menu .pro-layout__top-menu-item-label {
1747
+ display: inline-flex;
1748
+ align-items: center;
1749
+ gap: 6px;
1750
+ padding-bottom: 0;
1751
+ line-height: 1.2;
1752
+ vertical-align: middle;
1753
+ }
1754
+ .pro-layout__top-menu .pro-layout__top-menu-item-text {
1755
+ display: inline-block;
1756
+ line-height: 1.2;
1757
+ }
1758
+ .pro-layout__top-menu .pro-layout__top-menu-item-icon {
1759
+ font-size: 17px;
1760
+ color: rgba(0, 0, 0, 0.45) !important;
1761
+ }
1762
+ .pro-layout__top-menu .pro-layout__top-menu-el .el-menu-item [class^='el-icon'],
1763
+ .pro-layout__top-menu .pro-layout__top-menu-el .el-menu-item .el-icon,
1764
+ .pro-layout__top-menu .pro-layout__top-menu-el .el-sub-menu__title [class^='el-icon'],
1765
+ .pro-layout__top-menu .pro-layout__top-menu-el .el-sub-menu__title .el-icon {
1766
+ margin-right: 0 !important;
1767
+ }
1768
+ .pro-layout__top-menu .pro-layout__top-menu-item-badge {
1769
+ margin-left: 2px;
1770
+ vertical-align: middle;
1771
+ line-height: 1;
1772
+ }
1773
+ .pro-layout__top-menu .pro-layout__top-menu-item-badge .el-badge__content {
1774
+ height: 18px;
1775
+ line-height: 18px;
1776
+ padding: 0 6px;
1777
+ border-radius: 6px !important;
1778
+ font-size: 11px !important;
1779
+ font-weight: 700 !important;
1780
+ border: none !important;
1781
+ background: linear-gradient(180deg, #ffb347 0%, #ff8c42 100%) !important;
1782
+ color: #fff !important;
1783
+ }
1784
+ .pro-layout__top-menu .el-menu-item:not(.is-disabled:not(.pro-layout__top-menu-divider):focus-visible),
1785
+ .pro-layout__top-menu .el-sub-menu:not(.is-disabled .el-sub-menu__title:focus-visible) {
1786
+ outline: 2px solid color-mix(in srgb, var(--el-color-primary, #409eff) 38%, transparent);
1787
+ outline-offset: 2px;
1788
+ border-radius: 10px;
1789
+ }
1790
+ .pro-layout__top-menu .el-menu-item:hover:not(.is-disabled:not(.is-active):not(.pro-layout__top-menu-divider):not(
1791
+ .pro-layout__top-menu-item--lead
1792
+ )),
1793
+ .pro-layout__top-menu .el-sub-menu:not(.is-disabled:not(.is-active):not(.pro-layout__top-menu-item--lead):hover > .el-sub-menu__title) {
1794
+ color: rgba(0, 0, 0, 0.72) !important;
1795
+ background: transparent !important;
1796
+ }
1797
+ .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead:not(.pro-layout__top-menu-divider) {
1798
+ padding: 0 8px !important;
1799
+ margin: 0 2px !important;
1800
+ border-radius: 8px !important;
1801
+ background: rgba(0, 0, 0, 0.06) !important;
1802
+ color: rgba(0, 0, 0, 0.92) !important;
1803
+ font-weight: 500 !important;
1804
+ }
1805
+ .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead:not(.pro-layout__top-menu-divider
1806
+ .pro-layout__top-menu-item-label
1807
+ ) {
1808
+ gap: 5px !important;
1809
+ align-items: center !important;
1810
+ }
1811
+ .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead:not(.is-active:hover:not(.pro-layout__top-menu-divider)) {
1812
+ background: rgba(0, 0, 0, 0.078) !important;
1813
+ color: #000 !important;
1814
+ }
1815
+ .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead.is-active {
1816
+ background: rgba(0, 0, 0, 0.085) !important;
1817
+ color: #000 !important;
1818
+ font-weight: 600 !important;
1819
+ box-shadow: none !important;
1820
+ }
1821
+ .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-icon {
1822
+ font-size: 16px !important;
1823
+ color: rgba(0, 0, 0, 0.88) !important;
1824
+ }
1825
+ .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-icon svg {
1826
+ fill: currentColor !important;
1827
+ }
1828
+ .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead.is-active .pro-layout__top-menu-item-icon {
1829
+ color: #000 !important;
1830
+ }
1831
+ .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-text {
1832
+ color: inherit !important;
1833
+ }
1834
+ .pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead > .el-sub-menu__title {
1835
+ padding: 0 8px !important;
1836
+ margin: 0 2px !important;
1837
+ border-radius: 8px !important;
1838
+ background: rgba(0, 0, 0, 0.06) !important;
1839
+ color: rgba(0, 0, 0, 0.92) !important;
1840
+ font-weight: 500 !important;
1841
+ }
1842
+ .pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead:not(.is-active:hover > .el-sub-menu__title) {
1843
+ background: rgba(0, 0, 0, 0.078) !important;
1844
+ color: #000 !important;
1845
+ }
1846
+ .pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead.is-active > .el-sub-menu__title {
1847
+ background: rgba(0, 0, 0, 0.085) !important;
1848
+ color: #000 !important;
1849
+ font-weight: 600 !important;
1850
+ }
1851
+ .pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-label {
1852
+ gap: 5px !important;
1853
+ align-items: center !important;
1854
+ }
1855
+ .pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-icon {
1856
+ font-size: 16px !important;
1857
+ color: rgba(0, 0, 0, 0.88) !important;
1858
+ }
1859
+ .pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-icon svg {
1860
+ fill: currentColor !important;
1861
+ }
1862
+ .pro-layout__top-menu .el-sub-menu.pro-layout__top-menu-item--lead.is-active .pro-layout__top-menu-item-icon {
1863
+ color: #000 !important;
1864
+ }
1865
+ .pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead)) {
1866
+ position: relative !important;
1867
+ color: rgba(0, 0, 0, 0.88) !important;
1868
+ background: transparent !important;
1869
+ box-shadow: none !important;
1870
+ font-weight: 700 !important;
1871
+ }
1872
+ .pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead)::after) {
1873
+ content: '';
1874
+ position: absolute;
1875
+ left: 50%;
1876
+ bottom: -2px;
1877
+ width: var(--pro-layout-top-menu-active-bar-width);
1878
+ height: var(--pro-layout-top-menu-active-bar-height);
1879
+ transform: translateX(-50%);
1880
+ border-radius: 999px;
1881
+ background: var(--el-color-primary, #409eff);
1882
+ box-shadow: 0 1px 4px color-mix(in srgb, var(--el-color-primary, #409eff) 35%, transparent);
1883
+ pointer-events: none;
1884
+ z-index: 1;
1885
+ }
1886
+ .pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead):hover) {
1887
+ background: transparent !important;
1888
+ }
1889
+ .pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead > .el-sub-menu__title) {
1890
+ position: relative !important;
1891
+ color: rgba(0, 0, 0, 0.88) !important;
1892
+ background: transparent !important;
1893
+ box-shadow: none !important;
1894
+ font-weight: 700 !important;
1895
+ }
1896
+ .pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead > .el-sub-menu__title::after) {
1897
+ content: '';
1898
+ position: absolute;
1899
+ left: 50%;
1900
+ bottom: -2px;
1901
+ width: var(--pro-layout-top-menu-active-bar-width);
1902
+ height: var(--pro-layout-top-menu-active-bar-height);
1903
+ transform: translateX(-50%);
1904
+ border-radius: 999px;
1905
+ background: var(--el-color-primary, #409eff);
1906
+ box-shadow: 0 1px 4px color-mix(in srgb, var(--el-color-primary, #409eff) 35%, transparent);
1907
+ pointer-events: none;
1908
+ z-index: 1;
1909
+ }
1910
+ .pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead > .el-sub-menu__title:hover) {
1911
+ background: transparent !important;
1912
+ }
1913
+ .pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead) .pro-layout__top-menu-item-label),
1914
+ .pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-label) {
1915
+ color: rgba(0, 0, 0, 0.88) !important;
1916
+ font-weight: 700 !important;
1917
+ }
1918
+ .pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead) .pro-layout__top-menu-item-text),
1919
+ .pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-text) {
1920
+ color: rgba(0, 0, 0, 0.88) !important;
1921
+ }
1922
+ .pro-layout__top-menu .el-menu-item.is-active:not(.pro-layout__top-menu-divider:not(.pro-layout__top-menu-item--lead) .pro-layout__top-menu-item-icon),
1923
+ .pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead .pro-layout__top-menu-item-icon) {
1924
+ color: rgba(0, 0, 0, 0.62) !important;
1925
+ }
1926
+ .pro-layout__top-menu .el-sub-menu__icon-arrow {
1927
+ margin-left: 2px !important;
1928
+ transition: color 0.2s ease !important;
1929
+ color: rgba(0, 0, 0, 0.35) !important;
1930
+ }
1931
+ .pro-layout__top-menu .el-sub-menu.is-active:not(.pro-layout__top-menu-item--lead .el-sub-menu__icon-arrow) {
1932
+ color: rgba(0, 0, 0, 0.5) !important;
1673
1933
  }
1674
1934
  .pro-layout__breadcrumb {
1675
1935
  display: flex;
package/es/pro-layout/ProLayout.vue_vue_type_script_setup_true_lang.vue.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import '../_virtual/_rollup-plugin-inject-process-env.js';
2
+ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
2
3
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
4
  import _typeof from '@babel/runtime/helpers/typeof';
4
5
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
- import { useSlots, ref, computed, watch, markRaw, onMounted, onUnmounted, nextTick, openBlock, createBlock, unref, normalizeClass, withCtx, createElementVNode, createElementBlock, renderSlot, normalizeStyle, createCommentVNode, createTextVNode, toDisplayString, createVNode, Fragment, renderList, resolveDynamicComponent, withDirectives, mergeProps, withModifiers, vShow } from 'vue';
6
+ import { useSlots, ref, computed, watch, markRaw, onMounted, onUnmounted, nextTick, openBlock, createBlock, unref, normalizeClass, withCtx, createElementVNode, createElementBlock, renderSlot, normalizeStyle, createCommentVNode, createTextVNode, toDisplayString, createVNode, Fragment, renderList, withModifiers, resolveDynamicComponent, withDirectives, mergeProps, vShow } from 'vue';
6
7
  import { useRouter, useRoute } from '@deppon/deppon-router';
7
- import { ElContainer, ElHeader, ElMenu, ElMenuItem, ElBadge, ElSubMenu, ElInput, ElIcon, ElButton, ElAside, ElScrollbar, ElTooltip, ElMain, ElFooter } from '@deppon/deppon-ui';
8
+ import { ElContainer, ElHeader, ElMenu, ElMenuItem, ElIcon, ElBadge, ElSubMenu, ElInput, ElButton, ElAside, ElScrollbar, ElTooltip, ElMain, ElFooter } from '@deppon/deppon-ui';
8
9
  import { Search, Service, Bell, Close, House, Expand, Fold, ArrowRight, ArrowLeft } from '@deppon/deppon-ui/icons-vue';
9
10
  import { isMobile as _isMobile } from '../utils/other.js';
10
11
 
@@ -29,73 +30,82 @@ var _hoisted_5 = {
29
30
  "class": "pro-layout__top-menu"
30
31
  };
31
32
  var _hoisted_6 = {
32
- "class": "pro-layout__top-menu-item-label"
33
+ "class": "pro-layout__top-menu-glass"
33
34
  };
34
35
  var _hoisted_7 = {
35
36
  "class": "pro-layout__top-menu-item-label"
36
37
  };
37
38
  var _hoisted_8 = {
38
- "class": "pro-layout__header-right"
39
+ "class": "pro-layout__top-menu-item-text"
39
40
  };
40
41
  var _hoisted_9 = {
41
- "class": "pro-layout__header-user-name"
42
+ "class": "pro-layout__top-menu-item-label"
42
43
  };
43
44
  var _hoisted_10 = {
45
+ "class": "pro-layout__top-menu-item-text"
46
+ };
47
+ var _hoisted_11 = {
48
+ "class": "pro-layout__header-right"
49
+ };
50
+ var _hoisted_12 = {
51
+ "class": "pro-layout__header-user-name"
52
+ };
53
+ var _hoisted_13 = {
44
54
  key: 0,
45
55
  "class": "pro-layout__sider-header"
46
56
  };
47
- var _hoisted_11 = {
57
+ var _hoisted_14 = {
48
58
  key: 1,
49
59
  "class": "pro-layout__menu-search"
50
60
  };
51
- var _hoisted_12 = {
61
+ var _hoisted_15 = {
52
62
  key: 0,
53
63
  "class": "pro-layout__menu-group"
54
64
  };
55
- var _hoisted_13 = {
65
+ var _hoisted_16 = {
56
66
  "class": "pro-layout__menu-group-header-left"
57
67
  };
58
- var _hoisted_14 = {
68
+ var _hoisted_17 = {
59
69
  key: 1,
60
70
  "class": "pro-layout__menu-group-title"
61
71
  };
62
- var _hoisted_15 = {
72
+ var _hoisted_18 = {
63
73
  key: 2,
64
74
  "class": "pro-layout__menu-group-title-char"
65
75
  };
66
- var _hoisted_16 = {
76
+ var _hoisted_19 = {
67
77
  key: 0,
68
78
  "class": "pro-layout__menu-group-actions"
69
79
  };
70
- var _hoisted_17 = {
80
+ var _hoisted_20 = {
71
81
  key: 0,
72
82
  "class": "pro-layout__menu-group-count"
73
83
  };
74
- var _hoisted_18 = {
84
+ var _hoisted_21 = {
75
85
  "class": "pro-layout__menu-group-count-current"
76
86
  };
77
- var _hoisted_19 = {
87
+ var _hoisted_22 = {
78
88
  "class": "pro-layout__menu-group-count-max"
79
89
  };
80
- var _hoisted_20 = {
90
+ var _hoisted_23 = {
81
91
  key: 1,
82
92
  "class": "pro-layout__menu-item-char"
83
93
  };
84
- var _hoisted_21 = {
94
+ var _hoisted_24 = {
85
95
  key: 1,
86
96
  "class": "pro-layout__menu-item-char"
87
97
  };
88
- var _hoisted_22 = {
98
+ var _hoisted_25 = {
89
99
  key: 1,
90
100
  "class": "pro-layout__menu-item-char"
91
101
  };
92
- var _hoisted_23 = {
102
+ var _hoisted_26 = {
93
103
  "class": "pro-layout__tag-label pro-layout__tag-label--affix-icon"
94
104
  };
95
- var _hoisted_24 = {
105
+ var _hoisted_27 = {
96
106
  "class": "pro-layout__tag-label"
97
107
  };
98
- var _hoisted_25 = {
108
+ var _hoisted_28 = {
99
109
  "class": "pro-layout__tag-actions"
100
110
  };
101
111
  var script = {
@@ -647,6 +657,29 @@ var script = {
647
657
  }
648
658
  return [];
649
659
  });
660
+
661
+ /** 顶栏只保留「工作台」右侧一条竖向分隔线 */
662
+ var topMenuItemsWithDividers = computed(function () {
663
+ var list = topMenuItems.value;
664
+ if (!list.length) return [];
665
+ if (list.length === 1) return list;
666
+ return [list[0], {
667
+ __divider: true,
668
+ key: 'top-menu-div-lead'
669
+ }].concat(_toConsumableArray(list.slice(1)));
670
+ });
671
+
672
+ /** 顶栏横向菜单中第一个真实项（工作台 / 首页）在扁平列表里的下标，用于常驻灰底样式 */
673
+ var topMenuLeadFlatIndex = computed(function () {
674
+ var arr = topMenuItemsWithDividers.value;
675
+ var i = arr.findIndex(function (x) {
676
+ return !x.__divider;
677
+ });
678
+ return i >= 0 ? i : -1;
679
+ });
680
+ var isTopMenuLeadItem = function isTopMenuLeadItem(index) {
681
+ return index === topMenuLeadFlatIndex.value;
682
+ };
650
683
  var activeTopMenu = computed(function () {
651
684
  var currentPath = route.path;
652
685
  var _iterator2 = _createForOfIteratorHelper(props.topMenuItems),
@@ -724,45 +757,81 @@ var script = {
724
757
  alt: __props.title,
725
758
  "class": "pro-layout__header-logo-img",
726
759
  style: normalizeStyle(logoStyle.value)
727
- }, null, 12 /* STYLE, PROPS */, _hoisted_3)) : createCommentVNode("v-if", true), __props.title ? (openBlock(), createElementBlock("span", _hoisted_4, [_cache[5] || (_cache[5] = createElementVNode("span", {
760
+ }, null, 12 /* STYLE, PROPS */, _hoisted_3)) : createCommentVNode("v-if", true), __props.title ? (openBlock(), createElementBlock("span", _hoisted_4, [_cache[6] || (_cache[6] = createElementVNode("span", {
728
761
  "class": "pro-layout__header-logo-divider"
729
762
  }, null, -1 /* CACHED */)), createTextVNode(" " + toDisplayString(__props.title), 1 /* TEXT */)])) : createCommentVNode("v-if", true)];
730
763
  })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "header-left", {
731
764
  collapsed: collapsed.value
732
- })]), __props.showTopMenu && topMenuItems.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(unref(ElMenu), {
765
+ })]), __props.showTopMenu && topMenuItems.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [createCommentVNode(" 顶栏不用 el-menu 内置 router：与 @click handleTopMenuClick 会重复 router.push，造成卡顿 "), createVNode(unref(ElMenu), {
733
766
  "default-active": activeTopMenu.value,
734
767
  mode: "horizontal",
735
- router: __props.menuRouter,
768
+ router: false,
736
769
  ellipsis: true,
737
770
  "class": "pro-layout__top-menu-el"
738
771
  }, {
739
772
  "default": withCtx(function () {
740
- return [(openBlock(true), createElementBlock(Fragment, null, renderList(topMenuItems.value, function (item) {
773
+ return [(openBlock(true), createElementBlock(Fragment, null, renderList(topMenuItemsWithDividers.value, function (item, index) {
741
774
  return openBlock(), createElementBlock(Fragment, {
742
- key: item.path || item.key || item.label
743
- }, [!item.children || item.children.length === 0 ? (openBlock(), createBlock(unref(ElMenuItem), {
775
+ key: item.__divider ? item.key : item.path || item.key || item.label || String(index)
776
+ }, [item.__divider ? (openBlock(), createBlock(unref(ElMenuItem), {
744
777
  key: 0,
778
+ index: "__top_divider_".concat(index),
779
+ disabled: "",
780
+ "class": "pro-layout__top-menu-divider",
781
+ onClick: _cache[1] || (_cache[1] = withModifiers(function () {}, ["prevent", "stop"]))
782
+ }, {
783
+ "default": withCtx(function () {
784
+ return _toConsumableArray(_cache[7] || (_cache[7] = [createElementVNode("span", {
785
+ "class": "pro-layout__top-menu-divider-line",
786
+ "aria-hidden": "true"
787
+ }, null, -1 /* CACHED */)]));
788
+ }),
789
+ _: 1 /* STABLE */
790
+ }, 8 /* PROPS */, ["index"])) : !item.children || item.children.length === 0 ? (openBlock(), createBlock(unref(ElMenuItem), {
791
+ key: 1,
745
792
  index: item.path || item.key,
793
+ "class": normalizeClass({
794
+ 'pro-layout__top-menu-item--lead': isTopMenuLeadItem(index)
795
+ }),
746
796
  onClick: function onClick($event) {
747
797
  return handleTopMenuClick(item);
748
798
  }
749
799
  }, {
750
800
  "default": withCtx(function () {
751
- return [createElementVNode("span", _hoisted_6, [createTextVNode(toDisplayString(item.title || item.label) + " ", 1 /* TEXT */), item.badge ? (openBlock(), createBlock(unref(ElBadge), {
801
+ return [createElementVNode("span", _hoisted_7, [item.icon ? (openBlock(), createBlock(unref(ElIcon), {
752
802
  key: 0,
803
+ "class": "pro-layout__top-menu-item-icon"
804
+ }, {
805
+ "default": withCtx(function () {
806
+ return [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))];
807
+ }),
808
+ _: 2 /* DYNAMIC */
809
+ }, 1024 /* DYNAMIC_SLOTS */)) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_8, toDisplayString(item.title || item.label), 1 /* TEXT */), item.badge ? (openBlock(), createBlock(unref(ElBadge), {
810
+ key: 1,
753
811
  value: item.badge,
754
812
  "class": "pro-layout__top-menu-item-badge",
755
813
  type: item.badgeType || 'danger'
756
814
  }, null, 8 /* PROPS */, ["value", "type"])) : createCommentVNode("v-if", true)])];
757
815
  }),
758
816
  _: 2 /* DYNAMIC */
759
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "onClick"])) : (openBlock(), createBlock(unref(ElSubMenu), {
760
- key: 1,
761
- index: item.path || item.key
817
+ }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "class", "onClick"])) : (openBlock(), createBlock(unref(ElSubMenu), {
818
+ key: 2,
819
+ index: item.path || item.key,
820
+ "class": normalizeClass({
821
+ 'pro-layout__top-menu-item--lead': isTopMenuLeadItem(index)
822
+ })
762
823
  }, {
763
824
  title: withCtx(function () {
764
- return [createElementVNode("span", _hoisted_7, [createTextVNode(toDisplayString(item.title || item.label) + " ", 1 /* TEXT */), item.badge ? (openBlock(), createBlock(unref(ElBadge), {
825
+ return [createElementVNode("span", _hoisted_9, [item.icon ? (openBlock(), createBlock(unref(ElIcon), {
765
826
  key: 0,
827
+ "class": "pro-layout__top-menu-item-icon"
828
+ }, {
829
+ "default": withCtx(function () {
830
+ return [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))];
831
+ }),
832
+ _: 2 /* DYNAMIC */
833
+ }, 1024 /* DYNAMIC_SLOTS */)) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_10, toDisplayString(item.title || item.label), 1 /* TEXT */), item.badge ? (openBlock(), createBlock(unref(ElBadge), {
834
+ key: 1,
766
835
  value: item.badge,
767
836
  "class": "pro-layout__top-menu-item-badge",
768
837
  type: item.badgeType || 'danger'
@@ -785,14 +854,14 @@ var script = {
785
854
  }), 128 /* KEYED_FRAGMENT */))];
786
855
  }),
787
856
  _: 2 /* DYNAMIC */
788
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index"]))], 64 /* STABLE_FRAGMENT */);
857
+ }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "class"]))], 64 /* STABLE_FRAGMENT */);
789
858
  }), 128 /* KEYED_FRAGMENT */))];
790
859
  }),
791
860
  _: 1 /* STABLE */
792
- }, 8 /* PROPS */, ["default-active", "router"])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_8, [__props.showHeaderSearch ? (openBlock(), createBlock(unref(ElInput), {
861
+ }, 8 /* PROPS */, ["default-active"])])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_11, [__props.showHeaderSearch ? (openBlock(), createBlock(unref(ElInput), {
793
862
  key: 0,
794
863
  modelValue: headerSearchText.value,
795
- "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
864
+ "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
796
865
  return headerSearchText.value = $event;
797
866
  }),
798
867
  placeholder: __props.headerSearchPlaceholder,
@@ -815,7 +884,7 @@ var script = {
815
884
  text: "",
816
885
  circle: "",
817
886
  "class": "pro-layout__header-action-btn",
818
- onClick: _cache[2] || (_cache[2] = function ($event) {
887
+ onClick: _cache[3] || (_cache[3] = function ($event) {
819
888
  return _ctx.$emit('phone-click');
820
889
  })
821
890
  }, {
@@ -833,7 +902,7 @@ var script = {
833
902
  text: "",
834
903
  circle: "",
835
904
  "class": "pro-layout__header-action-btn",
836
- onClick: _cache[3] || (_cache[3] = function ($event) {
905
+ onClick: _cache[4] || (_cache[4] = function ($event) {
837
906
  return _ctx.$emit('bell-click');
838
907
  })
839
908
  }, {
@@ -846,7 +915,7 @@ var script = {
846
915
  })];
847
916
  }),
848
917
  _: 1 /* STABLE */
849
- })) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_9, [renderSlot(_ctx.$slots, "header-right", {
918
+ })) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, "header-right", {
850
919
  collapsed: collapsed.value
851
920
  })])])])];
852
921
  }),
@@ -864,12 +933,12 @@ var script = {
864
933
  }])
865
934
  }, {
866
935
  "default": withCtx(function () {
867
- return [unref(slots)['sider-header'] ? (openBlock(), createElementBlock("div", _hoisted_10, [renderSlot(_ctx.$slots, "sider-header", {
936
+ return [unref(slots)['sider-header'] ? (openBlock(), createElementBlock("div", _hoisted_13, [renderSlot(_ctx.$slots, "sider-header", {
868
937
  collapsed: collapsed.value
869
- })])) : createCommentVNode("v-if", true), __props.showMenuSearch ? (openBlock(), createElementBlock("div", _hoisted_11, [!collapsed.value ? (openBlock(), createBlock(unref(ElInput), {
938
+ })])) : createCommentVNode("v-if", true), __props.showMenuSearch ? (openBlock(), createElementBlock("div", _hoisted_14, [!collapsed.value ? (openBlock(), createBlock(unref(ElInput), {
870
939
  key: 0,
871
940
  modelValue: menuSearchText.value,
872
- "onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
941
+ "onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
873
942
  return menuSearchText.value = $event;
874
943
  }),
875
944
  placeholder: __props.menuSearchPlaceholder,
@@ -909,12 +978,12 @@ var script = {
909
978
  return [(openBlock(true), createElementBlock(Fragment, null, renderList(menuGroups.value, function (group, groupIndex) {
910
979
  return openBlock(), createElementBlock(Fragment, {
911
980
  key: "".concat(group.type, "-").concat(groupIndex)
912
- }, [group.items && group.items.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_12, [__props.showCommonMenus || menuGroups.value.length > 1 ? (openBlock(), createElementBlock("div", {
981
+ }, [group.items && group.items.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_15, [__props.showCommonMenus || menuGroups.value.length > 1 ? (openBlock(), createElementBlock("div", {
913
982
  key: 0,
914
983
  "class": normalizeClass(["pro-layout__menu-group-header", {
915
984
  'pro-layout__menu-group-header--collapsed': collapsed.value
916
985
  }])
917
- }, [createElementVNode("div", _hoisted_13, [!collapsed.value ? (openBlock(), createBlock(unref(ElIcon), {
986
+ }, [createElementVNode("div", _hoisted_16, [!collapsed.value ? (openBlock(), createBlock(unref(ElIcon), {
918
987
  key: 0,
919
988
  "class": "pro-layout__menu-group-toggle",
920
989
  onClick: function onClick($event) {
@@ -925,7 +994,7 @@ var script = {
925
994
  return [(openBlock(), createBlock(resolveDynamicComponent(isMenuGroupExpanded(groupIndex) ? unref(FoldIcon) : unref(ExpandIcon))))];
926
995
  }),
927
996
  _: 2 /* DYNAMIC */
928
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"])) : createCommentVNode("v-if", true), !collapsed.value ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(group.title), 1 /* TEXT */)) : (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(getFirstChar(group.title)), 1 /* TEXT */))]), !collapsed.value ? (openBlock(), createElementBlock("div", _hoisted_16, [group.type === 'common' && commonMenusCount.value > 0 ? (openBlock(), createElementBlock("span", _hoisted_17, [createElementVNode("span", _hoisted_18, toDisplayString(commonMenusCount.value), 1 /* TEXT */), createElementVNode("span", _hoisted_19, "/" + toDisplayString(__props.commonMenusMax), 1 /* TEXT */)])) : createCommentVNode("v-if", true), group.type === 'common' && commonMenusCount.value > 0 ? (openBlock(), createElementBlock("span", {
997
+ }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"])) : createCommentVNode("v-if", true), !collapsed.value ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(group.title), 1 /* TEXT */)) : (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(getFirstChar(group.title)), 1 /* TEXT */))]), !collapsed.value ? (openBlock(), createElementBlock("div", _hoisted_19, [group.type === 'common' && commonMenusCount.value > 0 ? (openBlock(), createElementBlock("span", _hoisted_20, [createElementVNode("span", _hoisted_21, toDisplayString(commonMenusCount.value), 1 /* TEXT */), createElementVNode("span", _hoisted_22, "/" + toDisplayString(__props.commonMenusMax), 1 /* TEXT */)])) : createCommentVNode("v-if", true), group.type === 'common' && commonMenusCount.value > 0 ? (openBlock(), createElementBlock("span", {
929
998
  key: 1,
930
999
  "class": "pro-layout__menu-group-edit",
931
1000
  onClick: toggleEditMode
@@ -990,7 +1059,7 @@ var script = {
990
1059
  return [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))];
991
1060
  }),
992
1061
  _: 2 /* DYNAMIC */
993
- }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_20, toDisplayString(getFirstChar(item.title || item.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
1062
+ }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_23, toDisplayString(getFirstChar(item.title || item.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
994
1063
  }),
995
1064
  _: 2 /* DYNAMIC */
996
1065
  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "disabled", "class"])) : (openBlock(), createBlock(unref(ElSubMenu), {
@@ -1006,7 +1075,7 @@ var script = {
1006
1075
  return [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))];
1007
1076
  }),
1008
1077
  _: 2 /* DYNAMIC */
1009
- }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_21, toDisplayString(getFirstChar(item.title || item.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true), !collapsed.value ? (openBlock(), createBlock(unref(ElTooltip), {
1078
+ }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !item.icon ? (openBlock(), createElementBlock("span", _hoisted_24, toDisplayString(getFirstChar(item.title || item.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true), !collapsed.value ? (openBlock(), createBlock(unref(ElTooltip), {
1010
1079
  key: 2,
1011
1080
  content: item.title || item.label,
1012
1081
  placement: "right",
@@ -1057,7 +1126,7 @@ var script = {
1057
1126
  return [(openBlock(), createBlock(resolveDynamicComponent(child.icon)))];
1058
1127
  }),
1059
1128
  _: 2 /* DYNAMIC */
1060
- }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !child.icon ? (openBlock(), createElementBlock("span", _hoisted_22, toDisplayString(getFirstChar(child.title || child.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
1129
+ }, 1024 /* DYNAMIC_SLOTS */)) : collapsed.value && !child.icon ? (openBlock(), createElementBlock("span", _hoisted_25, toDisplayString(getFirstChar(child.title || child.label)), 1 /* TEXT */)) : createCommentVNode("v-if", true)];
1061
1130
  }),
1062
1131
  _: 2 /* DYNAMIC */
1063
1132
  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["index", "disabled"]);
@@ -1109,7 +1178,7 @@ var script = {
1109
1178
  "class": "pro-layout__tag-item pro-layout__tag-item--affix"
1110
1179
  }, {
1111
1180
  title: withCtx(function () {
1112
- return [createElementVNode("span", _hoisted_23, [createVNode(unref(ElIcon), null, {
1181
+ return [createElementVNode("span", _hoisted_26, [createVNode(unref(ElIcon), null, {
1113
1182
  "default": withCtx(function () {
1114
1183
  return [(openBlock(), createBlock(resolveDynamicComponent(unref(HouseIcon))))];
1115
1184
  }),
@@ -1124,7 +1193,7 @@ var script = {
1124
1193
  "class": "pro-layout__tag-item"
1125
1194
  }, {
1126
1195
  title: withCtx(function () {
1127
- return [createElementVNode("span", _hoisted_24, toDisplayString(tag.title), 1 /* TEXT */), createElementVNode("div", _hoisted_25, [createVNode(unref(ElIcon), {
1196
+ return [createElementVNode("span", _hoisted_27, toDisplayString(tag.title), 1 /* TEXT */), createElementVNode("div", _hoisted_28, [createVNode(unref(ElIcon), {
1128
1197
  "class": "pro-layout__tag-icon",
1129
1198
  onClick: withModifiers(function ($event) {
1130
1199
  return handleTagClose(tag);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deppon/deppon-template",
3
- "version": "2.4.5",
3
+ "version": "2.4.7",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "typings": "es/index.d.ts",
@@ -43,11 +43,11 @@
43
43
  "less": "^4.2.0"
44
44
  },
45
45
  "dependencies": {
46
- "@deppon/deppon-assets": "2.4.5",
47
- "@deppon/deppon-request": "2.4.5",
48
- "@deppon/deppon-router": "2.4.5",
49
- "@deppon/deppon-ui": "2.4.5",
50
- "@deppon/deppon-utils": "2.4.5",
46
+ "@deppon/deppon-assets": "2.4.7",
47
+ "@deppon/deppon-request": "2.4.7",
48
+ "@deppon/deppon-router": "2.4.7",
49
+ "@deppon/deppon-ui": "2.4.7",
50
+ "@deppon/deppon-utils": "2.4.7",
51
51
  "dayjs": "^1.11.10",
52
52
  "lodash-es": "^4.17.21",
53
53
  "mitt": "^3.0.1"