xto-fronted 0.4.64 → 0.4.66

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 (17) hide show
  1. package/dist/components/Layout/SidebarMenuItem.vue.d.ts +5 -0
  2. package/dist/index-BbeWpCd3.js +345 -0
  3. package/dist/index-BjEnT8WQ.js +372 -0
  4. package/dist/index-CmajGrKA.js +142 -0
  5. package/dist/index-CsRhLwmR.js +475 -0
  6. package/dist/index-logKl0VM.js +3144 -0
  7. package/dist/index.es.js +1 -1
  8. package/dist/index.umd.js +1 -1
  9. package/dist/style.css +1 -1
  10. package/package.json +3 -3
  11. package/src/assets/styles/index.scss +235 -235
  12. package/src/components/Layout/Header.vue +1012 -1012
  13. package/src/components/Layout/Sidebar.vue +4 -152
  14. package/src/components/Layout/SidebarMenuItem.vue +158 -0
  15. package/src/style.scss +13 -13
  16. package/src/views/error/403.vue +56 -56
  17. package/src/views/error/404.vue +56 -56
package/src/assets/styles/index.scss CHANGED
@@ -1,236 +1,236 @@
1
- // ==============================================
2
- // 全局样式入口
3
- // ==============================================
4
-
5
- // CSS 变量（根选择器）
6
- @use 'root';
7
-
8
- // Reset
9
- @use 'reset';
10
-
11
- // Transitions
12
- @use 'transition';
13
-
14
- // Dark Theme Override
15
- @use 'dark';
16
-
17
- // ==============================================
18
- // 全局通用样式
19
- // ==============================================
20
-
21
- // 文字截断
22
- .text-ellipsis {
23
- overflow: hidden;
24
- text-overflow: ellipsis;
25
- white-space: nowrap;
26
- }
27
-
28
- // 多行截断
29
- .text-ellipsis-2 {
30
- display: -webkit-box;
31
- -webkit-line-clamp: 2;
32
- -webkit-box-orient: vertical;
33
- overflow: hidden;
34
- }
35
-
36
- // Flex 布局
37
- .flex {
38
- display: flex;
39
- }
40
-
41
- .flex-center {
42
- display: flex;
43
- align-items: center;
44
- justify-content: center;
45
- }
46
-
47
- .flex-between {
48
- display: flex;
49
- align-items: center;
50
- justify-content: space-between;
51
- }
52
-
53
- .flex-wrap {
54
- flex-wrap: wrap;
55
- }
56
-
57
- .flex-1 {
58
- flex: 1;
59
- }
60
-
61
- // 文字对齐
62
- .text-left {
63
- text-align: left;
64
- }
65
-
66
- .text-center {
67
- text-align: center;
68
- }
69
-
70
- .text-right {
71
- text-align: right;
72
- }
73
-
74
- // 颜色
75
- .text-primary {
76
- color: var(--color-primary);
77
- }
78
-
79
- .text-success {
80
- color: var(--color-success);
81
- }
82
-
83
- .text-warning {
84
- color: var(--color-warning);
85
- }
86
-
87
- .text-danger {
88
- color: var(--color-danger);
89
- }
90
-
91
- .text-info {
92
- color: var(--color-info);
93
- }
94
-
95
- // 背景
96
- .bg-primary {
97
- background-color: var(--color-primary);
98
- }
99
-
100
- .bg-success {
101
- background-color: var(--color-success);
102
- }
103
-
104
- .bg-warning {
105
- background-color: var(--color-warning);
106
- }
107
-
108
- .bg-danger {
109
- background-color: var(--color-danger);
110
- }
111
-
112
- // 间距
113
- .mt-10 {
114
- margin-top: 10px;
115
- }
116
-
117
- .mt-20 {
118
- margin-top: 20px;
119
- }
120
-
121
- .mb-10 {
122
- margin-bottom: 10px;
123
- }
124
-
125
- .mb-20 {
126
- margin-bottom: 20px;
127
- }
128
-
129
- .ml-10 {
130
- margin-left: 10px;
131
- }
132
-
133
- .mr-10 {
134
- margin-right: 10px;
135
- }
136
-
137
- .p-10 {
138
- padding: 10px;
139
- }
140
-
141
- .p-20 {
142
- padding: 20px;
143
- }
144
-
145
- // 卡片容器
146
- .card {
147
- background-color: var(--bg-color);
148
- border-radius: var(--border-radius-base);
149
- box-shadow: var(--box-shadow-light);
150
- padding: var(--spacing-md);
151
- }
152
-
153
- // 页面容器
154
- .page-container {
155
- padding: var(--spacing-md);
156
- min-height: 100%;
157
- }
158
-
159
- // 搜索栏
160
- .search-bar {
161
- display: flex;
162
- flex-wrap: wrap;
163
- gap: var(--spacing-sm);
164
- margin-bottom: var(--spacing-md);
165
- }
166
-
167
- // 工具栏
168
- .toolbar {
169
- display: flex;
170
- align-items: center;
171
- justify-content: space-between;
172
- margin-bottom: var(--spacing-md);
173
- }
174
-
175
- // 表格容器
176
- .table-container {
177
- background-color: var(--bg-color);
178
- border-radius: var(--border-radius-base);
179
- padding: var(--spacing-md);
180
- }
181
-
182
- // 分页容器
183
- .pagination-container {
184
- display: flex;
185
- justify-content: flex-end;
186
- margin-top: var(--spacing-md);
187
- }
188
-
189
- // ==============================================
190
- // 菜单高亮样式（全局样式，不能在 scoped 中）
191
- // ==============================================
192
- .x-menu-item {
193
- &.is-active {
194
- color: var(--color-primary) !important;
195
- background-color: var(--color-primary-light-9) !important;
196
- position: relative;
197
-
198
- // 左侧高亮条
199
- &::before {
200
- content: '';
201
- position: absolute;
202
- left: 0;
203
- top: 0;
204
- bottom: 0;
205
- width: 4px;
206
- background-color: var(--color-primary);
207
- border-radius: 0 2px 2px 0;
208
- }
209
- }
210
- }
211
-
212
- // SubMenu 的子菜单项高亮（只有 MenuItem 高亮，SubMenu 本身不高亮）
213
- .x-sub-menu__menu .x-menu-item.is-active {
214
- color: var(--color-primary) !important;
215
- background-color: var(--color-primary-light-9) !important;
216
- position: relative;
217
-
218
- &::before {
219
- content: '';
220
- position: absolute;
221
- left: 0;
222
- top: 0;
223
- bottom: 0;
224
- width: 4px;
225
- background-color: var(--color-primary);
226
- border-radius: 0 2px 2px 0;
227
- }
228
- }
229
-
230
- // ==============================================
231
- // 灰色模式（全局样式，不能在 scoped 中）
232
- // ==============================================
233
- html.grey-mode {
234
- filter: grayscale(100%);
235
- -webkit-filter: grayscale(100%);
1
+ // ==============================================
2
+ // 全局样式入口
3
+ // ==============================================
4
+
5
+ // CSS 变量（根选择器）
6
+ @use 'root';
7
+
8
+ // Reset
9
+ @use 'reset';
10
+
11
+ // Transitions
12
+ @use 'transition';
13
+
14
+ // Dark Theme Override
15
+ @use 'dark';
16
+
17
+ // ==============================================
18
+ // 全局通用样式
19
+ // ==============================================
20
+
21
+ // 文字截断
22
+ .text-ellipsis {
23
+ overflow: hidden;
24
+ text-overflow: ellipsis;
25
+ white-space: nowrap;
26
+ }
27
+
28
+ // 多行截断
29
+ .text-ellipsis-2 {
30
+ display: -webkit-box;
31
+ -webkit-line-clamp: 2;
32
+ -webkit-box-orient: vertical;
33
+ overflow: hidden;
34
+ }
35
+
36
+ // Flex 布局
37
+ .flex {
38
+ display: flex;
39
+ }
40
+
41
+ .flex-center {
42
+ display: flex;
43
+ align-items: center;
44
+ justify-content: center;
45
+ }
46
+
47
+ .flex-between {
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: space-between;
51
+ }
52
+
53
+ .flex-wrap {
54
+ flex-wrap: wrap;
55
+ }
56
+
57
+ .flex-1 {
58
+ flex: 1;
59
+ }
60
+
61
+ // 文字对齐
62
+ .text-left {
63
+ text-align: left;
64
+ }
65
+
66
+ .text-center {
67
+ text-align: center;
68
+ }
69
+
70
+ .text-right {
71
+ text-align: right;
72
+ }
73
+
74
+ // 颜色
75
+ .text-primary {
76
+ color: var(--color-primary);
77
+ }
78
+
79
+ .text-success {
80
+ color: var(--color-success);
81
+ }
82
+
83
+ .text-warning {
84
+ color: var(--color-warning);
85
+ }
86
+
87
+ .text-danger {
88
+ color: var(--color-danger);
89
+ }
90
+
91
+ .text-info {
92
+ color: var(--color-info);
93
+ }
94
+
95
+ // 背景
96
+ .bg-primary {
97
+ background-color: var(--color-primary);
98
+ }
99
+
100
+ .bg-success {
101
+ background-color: var(--color-success);
102
+ }
103
+
104
+ .bg-warning {
105
+ background-color: var(--color-warning);
106
+ }
107
+
108
+ .bg-danger {
109
+ background-color: var(--color-danger);
110
+ }
111
+
112
+ // 间距
113
+ .mt-10 {
114
+ margin-top: 10px;
115
+ }
116
+
117
+ .mt-20 {
118
+ margin-top: 20px;
119
+ }
120
+
121
+ .mb-10 {
122
+ margin-bottom: 10px;
123
+ }
124
+
125
+ .mb-20 {
126
+ margin-bottom: 20px;
127
+ }
128
+
129
+ .ml-10 {
130
+ margin-left: 10px;
131
+ }
132
+
133
+ .mr-10 {
134
+ margin-right: 10px;
135
+ }
136
+
137
+ .p-10 {
138
+ padding: 10px;
139
+ }
140
+
141
+ .p-20 {
142
+ padding: 20px;
143
+ }
144
+
145
+ // 卡片容器
146
+ .card {
147
+ background-color: var(--bg-color);
148
+ border-radius: var(--border-radius-base);
149
+ box-shadow: var(--box-shadow-light);
150
+ padding: var(--spacing-md);
151
+ }
152
+
153
+ // 页面容器
154
+ .page-container {
155
+ padding: var(--spacing-md);
156
+ min-height: 100%;
157
+ }
158
+
159
+ // 搜索栏
160
+ .search-bar {
161
+ display: flex;
162
+ flex-wrap: wrap;
163
+ gap: var(--spacing-sm);
164
+ margin-bottom: var(--spacing-md);
165
+ }
166
+
167
+ // 工具栏
168
+ .toolbar {
169
+ display: flex;
170
+ align-items: center;
171
+ justify-content: space-between;
172
+ margin-bottom: var(--spacing-md);
173
+ }
174
+
175
+ // 表格容器
176
+ .table-container {
177
+ background-color: var(--bg-color);
178
+ border-radius: var(--border-radius-base);
179
+ padding: var(--spacing-md);
180
+ }
181
+
182
+ // 分页容器
183
+ .pagination-container {
184
+ display: flex;
185
+ justify-content: flex-end;
186
+ margin-top: var(--spacing-md);
187
+ }
188
+
189
+ // ==============================================
190
+ // 菜单高亮样式（全局样式，不能在 scoped 中）
191
+ // ==============================================
192
+ .x-menu-item {
193
+ &.is-active {
194
+ color: var(--color-primary) !important;
195
+ background-color: var(--color-primary-light-9) !important;
196
+ position: relative;
197
+
198
+ // 左侧高亮条
199
+ &::before {
200
+ content: '';
201
+ position: absolute;
202
+ left: 0;
203
+ top: 0;
204
+ bottom: 0;
205
+ width: 4px;
206
+ background-color: var(--color-primary);
207
+ border-radius: 0 2px 2px 0;
208
+ }
209
+ }
210
+ }
211
+
212
+ // SubMenu 的子菜单项高亮（只有 MenuItem 高亮，SubMenu 本身不高亮）
213
+ .x-sub-menu__menu .x-menu-item.is-active {
214
+ color: var(--color-primary) !important;
215
+ background-color: var(--color-primary-light-9) !important;
216
+ position: relative;
217
+
218
+ &::before {
219
+ content: '';
220
+ position: absolute;
221
+ left: 0;
222
+ top: 0;
223
+ bottom: 0;
224
+ width: 4px;
225
+ background-color: var(--color-primary);
226
+ border-radius: 0 2px 2px 0;
227
+ }
228
+ }
229
+
230
+ // ==============================================
231
+ // 灰色模式（全局样式，不能在 scoped 中）
232
+ // ==============================================
233
+ html.grey-mode {
234
+ filter: grayscale(100%);
235
+ -webkit-filter: grayscale(100%);
236
236
  }