Skip to content

Commit 6a28a6d

Browse files
zds-szds-s
authored
feat(demo): enhance demo preview component with loading state and error handling (#32)
* feat(demo): enhance demo preview component with loading state and error handling * chore: update .gitignore to include 'dist' directory * feat(docs): enhance documentation for MineAdmin plugin system, including structure, lifecycle, and API references * 🌐 Auto-translated content
1 parent 90d6daf commit 6a28a6d

49 files changed

Lines changed: 22178 additions & 343 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.vitepress/.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.temp
22
cache
3-
.vite
3+
.vite
4+
dist

‎.vitepress/components/code-group.vue‎

Lines changed: 225 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,228 @@ const currentTab = ref('index.vue');
3131
</script>
3232

3333
<template>
34-
<el-tabs
35-
v-model="currentTab"
36-
>
37-
<el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.label" >
38-
<component :is="tab.component" class="border-0" />
39-
</el-tab-pane>
40-
</el-tabs>
41-
</template>
34+
<div class="code-group-container">
35+
<el-tabs
36+
v-model="currentTab"
37+
class="code-group-tabs"
38+
tab-position="top"
39+
>
40+
<el-tab-pane
41+
v-for="tab in tabs"
42+
:key="tab.label"
43+
:label="tab.label"
44+
:name="tab.label"
45+
class="code-group-pane"
46+
>
47+
<div class="code-content-wrapper">
48+
<component :is="tab.component" class="code-content" />
49+
</div>
50+
</el-tab-pane>
51+
</el-tabs>
52+
</div>
53+
</template>
54+
55+
<style scoped>
56+
.code-group-container {
57+
width: 100%;
58+
background: var(--vp-c-bg-alt);
59+
}
60+
61+
.code-group-tabs {
62+
width: 100%;
63+
}
64+
65+
.code-content-wrapper {
66+
position: relative;
67+
background: var(--vp-code-block-bg);
68+
border-radius: 0 0 8px 8px;
69+
overflow: hidden;
70+
}
71+
72+
.code-content {
73+
display: block;
74+
width: 100%;
75+
margin: 0;
76+
padding: 0;
77+
border: none;
78+
background: transparent;
79+
overflow-x: auto;
80+
}
81+
82+
/* Element Plus 标签页样式重写 */
83+
.code-group-tabs :deep(.el-tabs__header) {
84+
margin: 0;
85+
background: var(--vp-c-bg-soft);
86+
border-bottom: 1px solid var(--vp-c-divider);
87+
}
88+
89+
.code-group-tabs :deep(.el-tabs__nav-wrap) {
90+
padding: 0;
91+
}
92+
93+
.code-group-tabs :deep(.el-tabs__nav-scroll) {
94+
display: flex;
95+
overflow-x: auto;
96+
}
97+
98+
.code-group-tabs :deep(.el-tabs__item) {
99+
padding: 0.75rem 1.25rem;
100+
font-weight: 500;
101+
font-size: 0.875rem;
102+
color: var(--vp-c-text-2);
103+
border: none;
104+
background: transparent;
105+
transition: all 0.2s ease;
106+
white-space: nowrap;
107+
position: relative;
108+
}
109+
110+
.code-group-tabs :deep(.el-tabs__item:hover) {
111+
color: var(--vp-c-brand-1);
112+
background: var(--vp-c-brand-soft);
113+
}
114+
115+
.code-group-tabs :deep(.el-tabs__item.is-active) {
116+
color: var(--vp-c-brand-1);
117+
background: var(--vp-c-bg);
118+
font-weight: 600;
119+
}
120+
121+
.code-group-tabs :deep(.el-tabs__active-bar) {
122+
background: var(--vp-c-brand-1);
123+
height: 2px;
124+
border-radius: 1px;
125+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
126+
}
127+
128+
.code-group-tabs :deep(.el-tabs__content) {
129+
padding: 0;
130+
background: var(--vp-code-block-bg);
131+
}
132+
133+
.code-group-tabs :deep(.el-tab-pane) {
134+
padding: 0;
135+
background: transparent;
136+
}
137+
138+
/* 代码块内容样式优化 */
139+
.code-content :deep(pre) {
140+
margin: 0;
141+
padding: 1.25rem;
142+
background: var(--vp-code-block-bg) !important;
143+
border-radius: 0;
144+
font-size: 0.875rem;
145+
line-height: 1.5;
146+
overflow-x: auto;
147+
}
148+
149+
.code-content :deep(code) {
150+
background: transparent !important;
151+
color: var(--vp-code-block-color);
152+
font-family: var(--vp-font-family-mono);
153+
font-weight: 400;
154+
}
155+
156+
/* 滚动条样式 */
157+
.code-content :deep(pre)::-webkit-scrollbar {
158+
width: 6px;
159+
height: 6px;
160+
}
161+
162+
.code-content :deep(pre)::-webkit-scrollbar-track {
163+
background: rgba(0, 0, 0, 0.1);
164+
border-radius: 3px;
165+
}
166+
167+
.code-content :deep(pre)::-webkit-scrollbar-thumb {
168+
background: var(--vp-c-brand-1);
169+
border-radius: 3px;
170+
}
171+
172+
.code-content :deep(pre)::-webkit-scrollbar-thumb:hover {
173+
background: var(--vp-c-brand-2);
174+
}
175+
176+
/* 深色模式适配 */
177+
.dark .code-group-container {
178+
background: var(--vp-c-bg);
179+
}
180+
181+
.dark .code-group-tabs :deep(.el-tabs__header) {
182+
background: var(--vp-c-bg-alt);
183+
border-color: var(--vp-c-border);
184+
}
185+
186+
.dark .code-group-tabs :deep(.el-tabs__item.is-active) {
187+
background: var(--vp-c-bg-soft);
188+
}
189+
190+
.dark .code-content :deep(pre)::-webkit-scrollbar-track {
191+
background: rgba(255, 255, 255, 0.1);
192+
}
193+
194+
/* 响应式设计 */
195+
@media (max-width: 768px) {
196+
.code-group-tabs :deep(.el-tabs__item) {
197+
padding: 0.625rem 1rem;
198+
font-size: 0.8rem;
199+
}
200+
201+
.code-content :deep(pre) {
202+
padding: 1rem;
203+
font-size: 0.8rem;
204+
}
205+
}
206+
207+
@media (max-width: 480px) {
208+
.code-group-tabs :deep(.el-tabs__item) {
209+
padding: 0.5rem 0.75rem;
210+
font-size: 0.75rem;
211+
}
212+
213+
.code-content :deep(pre) {
214+
padding: 0.875rem;
215+
font-size: 0.75rem;
216+
}
217+
}
218+
219+
/* 文件名样式优化 */
220+
.code-group-tabs :deep(.el-tabs__item) {
221+
font-family: var(--vp-font-family-mono);
222+
}
223+
224+
/* 活动标签页指示器动画 */
225+
.code-group-tabs :deep(.el-tabs__item.is-active)::before {
226+
content: '';
227+
position: absolute;
228+
top: 0;
229+
left: 0;
230+
right: 0;
231+
height: 2px;
232+
background: linear-gradient(90deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
233+
animation: tabGlow 0.3s ease;
234+
}
235+
236+
@keyframes tabGlow {
237+
from {
238+
opacity: 0;
239+
transform: scaleX(0);
240+
}
241+
to {
242+
opacity: 1;
243+
transform: scaleX(1);
244+
}
245+
}
246+
247+
/* 减少动画模式支持 */
248+
@media (prefers-reduced-motion: reduce) {
249+
.code-group-tabs :deep(.el-tabs__active-bar),
250+
.code-group-tabs :deep(.el-tabs__item) {
251+
transition: none !important;
252+
}
253+
254+
.code-group-tabs :deep(.el-tabs__item.is-active)::before {
255+
animation: none;
256+
}
257+
}
258+
</style>

0 commit comments

Comments
 (0)