Skip to content

Commit 0a2632a

Browse files
hiyukihiyuki
authored
Merge branch 'master' into fix-getcomponent-error
2 parents a6c2b8f + 35e9697 commit 0a2632a

13 files changed

Lines changed: 559 additions & 91 deletions

File tree

‎docs-vitepress/.vitepress/config.ts‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,24 @@ declare module "vitepress" {
2020
}
2121
}
2222
}
23+
interface ExtendedSidebarItem extends DefaultTheme.SidebarItem {
24+
badge?: { text?: string }
25+
items?: ExtendedSidebarItem[]
26+
}
27+
type ExtendedSidebar =
28+
| ExtendedSidebarItem[]
29+
| {
30+
[path: string]:
31+
| ExtendedSidebarItem[]
32+
| { items: ExtendedSidebarItem[]; base: string }
33+
}
2334

2435
const ogUrl = "https://mpxjs.cn/"
2536
const ogImage = `${ogUrl}logo.png`
2637
const title = "Mpx 框架"
2738
const description = "深度性能优化的增强型小程序开发框架"
2839

29-
const sidebar: DefaultTheme.Sidebar = {
40+
const sidebar: ExtendedSidebar = {
3041
"/guide/": [
3142
{
3243
text: "基础",
@@ -94,11 +105,12 @@ const sidebar: DefaultTheme.Sidebar = {
94105
text: "跨端基础",
95106
items: [
96107
{ text: "跨端输出配置", link: "/guide/cross-platform/basic" },
97-
{ text: "条件编译机制", link: "/guide/cross-platform/conditional" }
108+
{ text: "条件编译机制", link: "/guide/cross-platform/conditional" },
98109
],
99110
},
100111
{
101112
text: "跨端 RN",
113+
badge: { text: "新" },
102114
items: [
103115
{ text: "快速开始", link: "/guide/rn/start" },
104116
{ text: "组件使用与开发", link: "/guide/rn/component" },
@@ -1013,7 +1025,7 @@ export default withPwa(
10131025
level: [2, 3],
10141026
label: "本页目录",
10151027
},
1016-
sidebar,
1028+
sidebar: sidebar as DefaultTheme.Sidebar,
10171029
darkModeSwitchLabel: "外观",
10181030
sidebarMenuLabel: "菜单",
10191031
returnToTopLabel: "返回顶部",
@@ -1038,13 +1050,15 @@ export default withPwa(
10381050
vite: {
10391051
logLevel: "info",
10401052
plugins: [
1053+
// @ts-ignore
10411054
llmstxt({
10421055
customTemplateVariables: {
10431056
title,
10441057
description,
10451058
},
10461059
ignoreFiles: ["index.md", "api/index.md"],
10471060
}),
1061+
// @ts-ignore
10481062
groupIconVitePlugin({
10491063
customIcon: {
10501064
ios: "logos:apple",
@@ -1085,6 +1099,15 @@ export default withPwa(
10851099
)
10861100
),
10871101
},
1102+
{
1103+
find: /^.*\/VPSidebarItem\.vue$/,
1104+
replacement: fileURLToPath(
1105+
new URL(
1106+
"./theme/alias-components/CustomSidebarItem.vue",
1107+
import.meta.url
1108+
)
1109+
),
1110+
},
10881111
],
10891112
},
10901113
},

‎docs-vitepress/.vitepress/theme/alias-components/CustomMenuLink.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts" setup>
22
import type { DefaultTheme } from 'vitepress/theme'
33
import { useData } from 'vitepress'
4+
// @ts-ignore
45
import { isActive } from 'vitepress/dist/client/shared.js'
56
import { VPLink } from 'vitepress/theme'
67

‎docs-vitepress/.vitepress/theme/alias-components/CustomNavBarMenuLink.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts" setup>
22
import type { DefaultTheme } from 'vitepress/theme'
33
import { useData } from 'vitepress'
4+
// @ts-ignore
45
import { isActive } from 'vitepress/dist/client/shared.js'
56
import { VPLink } from 'vitepress/theme'
67

‎docs-vitepress/.vitepress/theme/alias-components/CustomSidebarItem.vue‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
<script setup lang="ts">
2+
import type { DefaultTheme } from "vitepress/theme"
3+
import { computed } from "vue"
4+
import { VPLink } from "vitepress/theme"
5+
// @ts-ignore
6+
import { useSidebarControl } from "vitepress/dist/client/theme-default/composables/sidebar.js"
7+
// @ts-ignore
8+
import VPSidebarItem from "vitepress/dist/client/theme-default/components/VPSidebarItem.vue"
9+
10+
const props = defineProps<{
11+
item: DefaultTheme.SidebarItem
12+
depth: number
13+
}>()
14+
15+
const {
16+
collapsed,
17+
collapsible,
18+
isLink,
19+
isActiveLink,
20+
hasActiveLink,
21+
hasChildren,
22+
toggle,
23+
} = useSidebarControl(computed(() => props.item))
24+
25+
const sectionTag = computed(() => (hasChildren.value ? "section" : `div`))
26+
27+
const linkTag = computed(() => (isLink.value ? "a" : "div"))
28+
29+
const textTag = computed(() => {
30+
return !hasChildren.value
31+
? "p"
32+
: props.depth + 2 === 7
33+
? "p"
34+
: `h${props.depth + 2}`
35+
})
36+
37+
const itemRole = computed(() => (isLink.value ? undefined : "button"))
38+
39+
const classes = computed(() => [
40+
[`level-${props.depth}`],
41+
{ collapsible: collapsible.value },
42+
{ collapsed: collapsed.value },
43+
{ "is-link": isLink.value },
44+
{ "is-active": isActiveLink.value },
45+
{ "has-active": hasActiveLink.value },
46+
])
47+
48+
function onItemInteraction(e: MouseEvent | Event) {
49+
if ("key" in e && e.key !== "Enter") {
50+
return
51+
}
52+
!props.item.link && toggle()
53+
}
54+
55+
function onCaretClick() {
56+
props.item.link && toggle()
57+
}
58+
</script>
59+
60+
<template>
61+
<component :is="sectionTag" class="VPSidebarItem" :class="classes">
62+
<div
63+
v-if="item.text"
64+
class="item"
65+
:role="itemRole"
66+
v-on="
67+
item.items
68+
? { click: onItemInteraction, keydown: onItemInteraction }
69+
: {}
70+
"
71+
:tabindex="item.items && 0"
72+
>
73+
<div class="indicator" />
74+
75+
<VPLink
76+
v-if="item.link"
77+
:tag="linkTag"
78+
class="link"
79+
:href="item.link"
80+
:rel="item.rel"
81+
:target="item.target"
82+
>
83+
<!-- <component :is="textTag" class="text" v-html="item.text" /> -->
84+
<component :is="textTag" class="text">
85+
<span v-html="item.text" />
86+
<NavBarBadge v-if="item.badge" :text="item.badge.text" />
87+
</component>
88+
</VPLink>
89+
<!-- <component v-else :is="textTag" class="text" v-html="item.text" /> -->
90+
<component v-else :is="textTag" class="text">
91+
<span v-html="item.text" />
92+
<NavBarBadge v-if="item.badge" :text="item.badge.text" />
93+
</component>
94+
95+
<div
96+
v-if="item.collapsed != null && item.items && item.items.length"
97+
class="caret"
98+
role="button"
99+
aria-label="toggle section"
100+
@click="onCaretClick"
101+
@keydown.enter="onCaretClick"
102+
tabindex="0"
103+
>
104+
<span class="vpi-chevron-right caret-icon" />
105+
</div>
106+
</div>
107+
108+
<div v-if="item.items && item.items.length" class="items">
109+
<template v-if="depth < 5">
110+
<VPSidebarItem
111+
v-for="i in item.items"
112+
:key="i.text"
113+
:item="i"
114+
:depth="depth + 1"
115+
/>
116+
</template>
117+
</div>
118+
</component>
119+
</template>
120+
121+
<style scoped>
122+
.VPSidebarItem.level-0 {
123+
padding-bottom: 24px;
124+
}
125+
126+
.VPSidebarItem.collapsed.level-0 {
127+
padding-bottom: 10px;
128+
}
129+
130+
.item {
131+
position: relative;
132+
display: flex;
133+
width: 100%;
134+
}
135+
136+
.VPSidebarItem.collapsible > .item {
137+
cursor: pointer;
138+
}
139+
140+
.indicator {
141+
position: absolute;
142+
top: 6px;
143+
bottom: 6px;
144+
left: -17px;
145+
width: 2px;
146+
border-radius: 2px;
147+
transition: background-color 0.25s;
148+
}
149+
150+
.VPSidebarItem.level-2.is-active > .item > .indicator,
151+
.VPSidebarItem.level-3.is-active > .item > .indicator,
152+
.VPSidebarItem.level-4.is-active > .item > .indicator,
153+
.VPSidebarItem.level-5.is-active > .item > .indicator {
154+
background-color: var(--vp-c-brand-1);
155+
}
156+
157+
.link {
158+
display: flex;
159+
align-items: center;
160+
flex-grow: 1;
161+
}
162+
163+
.text {
164+
flex-grow: 1;
165+
padding: 4px 0;
166+
line-height: 24px;
167+
font-size: 14px;
168+
transition: color 0.25s;
169+
}
170+
171+
.VPSidebarItem.level-0 .text {
172+
font-weight: 700;
173+
color: var(--vp-c-text-1);
174+
}
175+
176+
.VPSidebarItem.level-1 .text,
177+
.VPSidebarItem.level-2 .text,
178+
.VPSidebarItem.level-3 .text,
179+
.VPSidebarItem.level-4 .text,
180+
.VPSidebarItem.level-5 .text {
181+
font-weight: 500;
182+
color: var(--vp-c-text-2);
183+
}
184+
185+
.VPSidebarItem.level-0.is-link > .item > .link:hover .text,
186+
.VPSidebarItem.level-1.is-link > .item > .link:hover .text,
187+
.VPSidebarItem.level-2.is-link > .item > .link:hover .text,
188+
.VPSidebarItem.level-3.is-link > .item > .link:hover .text,
189+
.VPSidebarItem.level-4.is-link > .item > .link:hover .text,
190+
.VPSidebarItem.level-5.is-link > .item > .link:hover .text {
191+
color: var(--vp-c-brand-1);
192+
}
193+
194+
.VPSidebarItem.level-0.has-active > .item > .text,
195+
.VPSidebarItem.level-1.has-active > .item > .text,
196+
.VPSidebarItem.level-2.has-active > .item > .text,
197+
.VPSidebarItem.level-3.has-active > .item > .text,
198+
.VPSidebarItem.level-4.has-active > .item > .text,
199+
.VPSidebarItem.level-5.has-active > .item > .text,
200+
.VPSidebarItem.level-0.has-active > .item > .link > .text,
201+
.VPSidebarItem.level-1.has-active > .item > .link > .text,
202+
.VPSidebarItem.level-2.has-active > .item > .link > .text,
203+
.VPSidebarItem.level-3.has-active > .item > .link > .text,
204+
.VPSidebarItem.level-4.has-active > .item > .link > .text,
205+
.VPSidebarItem.level-5.has-active > .item > .link > .text {
206+
color: var(--vp-c-text-1);
207+
}
208+
209+
.VPSidebarItem.level-0.is-active > .item .link > .text,
210+
.VPSidebarItem.level-1.is-active > .item .link > .text,
211+
.VPSidebarItem.level-2.is-active > .item .link > .text,
212+
.VPSidebarItem.level-3.is-active > .item .link > .text,
213+
.VPSidebarItem.level-4.is-active > .item .link > .text,
214+
.VPSidebarItem.level-5.is-active > .item .link > .text {
215+
color: var(--vp-c-brand-1);
216+
}
217+
218+
.caret {
219+
display: flex;
220+
justify-content: center;
221+
align-items: center;
222+
margin-right: -7px;
223+
width: 32px;
224+
height: 32px;
225+
color: var(--vp-c-text-3);
226+
cursor: pointer;
227+
transition: color 0.25s;
228+
flex-shrink: 0;
229+
}
230+
231+
.item:hover .caret {
232+
color: var(--vp-c-text-2);
233+
}
234+
235+
.item:hover .caret:hover {
236+
color: var(--vp-c-text-1);
237+
}
238+
239+
.caret-icon {
240+
font-size: 18px;
241+
/*rtl:ignore*/
242+
transform: rotate(90deg);
243+
transition: transform 0.25s;
244+
}
245+
246+
.VPSidebarItem.collapsed .caret-icon {
247+
transform: rotate(0) /*rtl:rotate(180deg)*/;
248+
}
249+
250+
.VPSidebarItem.level-1 .items,
251+
.VPSidebarItem.level-2 .items,
252+
.VPSidebarItem.level-3 .items,
253+
.VPSidebarItem.level-4 .items,
254+
.VPSidebarItem.level-5 .items {
255+
border-left: 1px solid var(--vp-c-divider);
256+
padding-left: 16px;
257+
}
258+
259+
.VPSidebarItem.collapsed .items {
260+
display: none;
261+
}
262+
</style>

‎docs-vitepress/guide/rn/style.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -499,6 +499,38 @@ env(<environment-variable>, <fallback-value>?)
499499
| **作用域** | 全局生效 | 局部作用域 |
500500
| **用途** | 系统环境适配 | 样式变量管理 |
501501

502+
## 媒体查询
503+
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
504+
### 媒体类型
505+
- print 不支持
506+
- **screen 支持**
507+
- **all 支持**
508+
### 媒体特性
509+
- **width-视口（包括纵向滚动条）的宽度，支持**
510+
- height-视口的高度，暂不支持
511+
- aspect-ratio-视口（viewport）的宽高比，暂不支持
512+
- orientation-视口的旋转方向，暂不支持
513+
- prefers-color-scheme 系统的主题色设置为亮色或者暗色，暂不支持
514+
### 逻辑运算符
515+
- **and 支持**
516+
- not 不支持
517+
- only 不支持
518+
- or 不支持
519+
### 使用示例
520+
```css
521+
/* 支持 */
522+
@media screen and (min-width: 900px) {}
523+
@media (max-width: 12450px) { }
524+
@media screen and (min-width: 320px) and (max-width: 480px) {}
525+
/* 不支持 */
526+
/* 单位仅支持px */
527+
@media (max-width: 30em) { }
528+
@media (min-width: 30em) and (max-width: 50em) { }
529+
/* 媒体查询 4 级规范，暂不支持 */
530+
@media (width <= 30em) { }
531+
@media (30em <= width <= 50em ) { }
532+
```
533+
502534
## 原子类
503535

504536
> 原子类功能正在开发中，敬请期待后续版本支持。

0 commit comments

Comments
 (0)