- ![logo]()
+ > = ref(get(config, 'pc.header.i18n'))
const playground: Ref = ref(get(config, 'pc.header.playground'))
const github: Ref = ref(get(config, 'pc.header.github'))
+ const redirect = get(config, 'pc.redirect')
const darkMode: Ref = ref(get(config, 'pc.header.darkMode'))
const currentThemes = ref(getBrowserThemes(themesKey))
@@ -98,6 +87,11 @@ export default defineComponent({
const router = useRouter()
const nonEmptyLanguages: ComputedRef> = computed(() => removeEmpty(languages.value))
+ const backRoot = () => {
+ const { language: lang } = getPCLocationInfo()
+ router.replace(`/${lang}${redirect}`)
+ }
+
const handleLanguageChange = (language: string) => {
const { menuName } = getPCLocationInfo()
router.replace(`/${language}/${menuName}`)
@@ -115,7 +109,7 @@ export default defineComponent({
const toggleTheme = () => {
setCurrentThemes(currentThemes.value === 'darkThemes' ? 'themes' : 'darkThemes')
window.postMessage(getThemesMessage(), '*')
- ;(document.getElementById('mobile') as HTMLIFrameElement).contentWindow!.postMessage(getThemesMessage(), '*')
+ ; (document.getElementById('mobile') as HTMLIFrameElement).contentWindow!.postMessage(getThemesMessage(), '*')
}
watchThemes((themes, from) => {
@@ -135,10 +129,14 @@ export default defineComponent({
isOpenMenu,
darkMode,
currentThemes,
+ backRoot,
handleLanguageChange,
toggleTheme,
}
},
+ components:{
+ AnimationBox
+ }
})
@@ -186,7 +184,7 @@ export default defineComponent({
padding: 0 30px;
justify-content: space-between;
user-select: none;
- z-index: 996;
+ z-index: 9;
background: var(--site-config-color-bar);
border-bottom: 1px solid var(--site-config-color-border);
box-sizing: border-box;
@@ -194,12 +192,15 @@ export default defineComponent({
&__lead {
display: flex;
align-items: center;
+ cursor: pointer;
}
&__logo {
width: 32px;
+ height: 32px;
margin-right: 12px;
flex-shrink: 0;
+ transition: .3s all ease-in-out;
}
&__title {
diff --git a/packages/varlet-cli/site/pc/components/AppSidebar.vue b/packages/varlet-cli/site/pc/components/AppSidebar.vue
index fd9a991ffe7..67720b42548 100644
--- a/packages/varlet-cli/site/pc/components/AppSidebar.vue
+++ b/packages/varlet-cli/site/pc/components/AppSidebar.vue
@@ -74,7 +74,7 @@ export default defineComponent({
top: 60px;
bottom: 0;
left: 0;
- z-index: 99;
+ z-index: 6;
overflow-y: scroll;
box-shadow: 0 8px 12px var(--site-config-color-shadow);
background: var(--site-config-color-bar);
diff --git a/packages/varlet-cli/site/pc/components/LogoAnimation.vue b/packages/varlet-cli/site/pc/components/LogoAnimation.vue
new file mode 100644
index 00000000000..83163eec462
--- /dev/null
+++ b/packages/varlet-cli/site/pc/components/LogoAnimation.vue
@@ -0,0 +1,71 @@
+
+ ![logo]()
+
+
+
\ No newline at end of file
diff --git a/packages/varlet-cli/site/pc/floating.ts b/packages/varlet-cli/site/pc/floating.ts
new file mode 100644
index 00000000000..30c2b409b39
--- /dev/null
+++ b/packages/varlet-cli/site/pc/floating.ts
@@ -0,0 +1,7 @@
+import { reactive, ref } from "vue";
+
+// 动画节点属性存储
+export const animationBoxData = reactive({})
+
+// 存储节点
+export const animationEl = ref();
\ No newline at end of file
diff --git a/packages/varlet-cli/site/pc/pages/index.en-US.vue b/packages/varlet-cli/site/pc/pages/index.en-US.vue
new file mode 100644
index 00000000000..76fdc02ad54
--- /dev/null
+++ b/packages/varlet-cli/site/pc/pages/index.en-US.vue
@@ -0,0 +1,243 @@
+
+
+
+ {
return glob(`${SRC_DIR}/**/${EXAMPLE_DIR_NAME}/${EXAMPLE_DIR_INDEX}`)
}
@@ -45,53 +53,94 @@ export function findRootDocs(): Promise {
return glob(`${ROOT_DOCS_DIR}/*.md`)
}
+export async function findRootPages(): Promise {
+ // the user pages
+ const userPages = await glob(`${ROOT_PAGES_DIR}/*.vue`)
+ // authority pattern
+ const authorityPage = await glob(`${SITE}/pc/pages/*.vue`)
+
+ // filter
+ const filterMap = new Map()
+ authorityPage.forEach((page) => {
+ const [, routePath, language] = page.match(ROOT_PAGE_RE) ?? []
+ filterMap.set(routePath + language, `${SITE_PC_DIR}/pages/${routePath}.${language}.vue`)
+ })
+ userPages.forEach((page) => {
+ const [, routePath, language] = page.match(ROOT_PAGE_RE) ?? []
+ filterMap.set(routePath + language, page)
+ })
+
+ return Promise.resolve(Array.from(filterMap.values()))
+}
+
export async function buildMobileSiteRoutes() {
const examples: string[] = await findExamples()
const routes = examples.map(
(example) => `
- {
- path: '${getExampleRoutePath(example)}',
- // @ts-ignore
- component: () => import('${example}')
- }\
-`
+ {
+ path: '${getExampleRoutePath(example)}',
+ // @ts-ignore
+ component: () => import('${example}')
+ }\
+ `
)
const source = `export default [\
- ${routes.join(',')}
-]`
+ ${routes.join(',')}
+ ]`
await outputFileSyncOnChange(SITE_MOBILE_ROUTES, source)
}
export async function buildPcSiteRoutes() {
- const [componentDocs, rootDocs] = await Promise.all([findComponentDocs(), findRootDocs()])
+ const [componentDocs, rootDocs, rootPages] = await Promise.all([findComponentDocs(), findRootDocs(), findRootPages()])
+
+ const rootPagesRoutes = rootPages.map(
+ (rootPage) => `
+ {
+ path: '${getRootPagesPath(rootPage)}',
+ // @ts-ignore
+ component: () => import('${rootPage}')
+ }\
+ `
+ )
const componentDocsRoutes = componentDocs.map(
(componentDoc) => `
- {
- path: '${getComponentDocRoutePath(componentDoc)}',
- // @ts-ignore
- component: () => import('${componentDoc}')
- }\
-`
+ {
+ path: '${getComponentDocRoutePath(componentDoc)}',
+ // @ts-ignore
+ component: () => import('${componentDoc}')
+ }\
+ `
)
const rootDocsRoutes = rootDocs.map(
(rootDoc) => `
- {
- path: '${getRootDocRoutePath(rootDoc)}',
- // @ts-ignore
- component: () => import('${rootDoc}')
- }\
-`
+ {
+ path: '${getRootDocRoutePath(rootDoc)}',
+ // @ts-ignore
+ component: () => import('${rootDoc}')
+ }\
+ `
)
+ const layoutRoutes = `
+ {
+ path: '/layout',
+ // @ts-ignore
+ component:()=> import('${SITE_PC_DIR}/Layout.vue'),
+ children: [
+ ${[...componentDocsRoutes, rootDocsRoutes].join(',')},
+ ]
+ }\
+ `
const source = `export default [\
- ${[...componentDocsRoutes, rootDocsRoutes].join(',')}
-]`
-
+ ${rootPagesRoutes.join(',')},
+ \
+ ${layoutRoutes}
+ ]`
outputFileSyncOnChange(SITE_PC_ROUTES, source)
}
diff --git a/packages/varlet-cli/src/shared/constant.ts b/packages/varlet-cli/src/shared/constant.ts
index 5093aa224c0..8260280a205 100644
--- a/packages/varlet-cli/src/shared/constant.ts
+++ b/packages/varlet-cli/src/shared/constant.ts
@@ -8,6 +8,8 @@ export const LIB_DIR = resolve(CWD, 'lib')
export const UMD_DIR = resolve(CWD, 'umd')
export const TYPES_DIR = resolve(CWD, 'types')
export const ROOT_DOCS_DIR = resolve(CWD, 'docs')
+export const ROOT_PAGES_DIR = resolve(CWD, 'pages')
+
export const ESLINT_EXTENSIONS = ['.vue', '.ts', '.js', '.mjs', '.tsx', '.jsx']
export const VITE_RESOLVE_EXTENSIONS = ['.vue', '.tsx', '.ts', '.jsx', '.js', '.less', '.css']
export const SCRIPTS_EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js']
@@ -27,6 +29,7 @@ export const SITE = resolve(__dirname, '../../site')
export const SITE_OUTPUT_PATH = resolve(CWD, 'site')
export const SITE_PUBLIC_PATH = resolve(CWD, 'public')
export const SITE_DIR = resolve(CWD, '.varlet/site')
+export const SITE_PC_DIR = resolve(CWD, '.varlet/site/pc')
export const SITE_PC_ROUTES = resolve(CWD, '.varlet/pc.routes.ts')
export const SITE_MOBILE_ROUTES = resolve(CWD, '.varlet/mobile.routes.ts')
export const SITE_CONFIG = resolve(CWD, '.varlet/site.config.json')
diff --git a/packages/varlet-cli/varlet.default.config.js b/packages/varlet-cli/varlet.default.config.js
index 20f0a2c33c3..9eac53aefc9 100644
--- a/packages/varlet-cli/varlet.default.config.js
+++ b/packages/varlet-cli/varlet.default.config.js
@@ -19,7 +19,7 @@ module.exports = {
useMobile: false,
pc: {
menu: [],
- redirect: '/home',
+ redirect: '/index',
title: {
'zh-CN': '面向 Vue3 的 Material 风格移动端组件库',
'en-US': 'Material design mobile components built for Vue3',
diff --git a/packages/varlet-ui/docs/home.en-US.md b/packages/varlet-ui/docs/home.en-US.md
index 82704daf043..1372f3bc48c 100644
--- a/packages/varlet-ui/docs/home.en-US.md
+++ b/packages/varlet-ui/docs/home.en-US.md
@@ -1,10 +1,3 @@
-
+
@@ -15,21 +15,10 @@
>
{{ title }}
+
- {{ value }}
-
+ >{{ value }}
@@ -76,6 +63,7 @@ import { get } from 'lodash-es'
import { getBrowserThemes, getPCLocationInfo, removeEmpty, setThemes, watchThemes } from '../../utils'
import { useRouter } from 'vue-router'
import type { Ref, ComputedRef } from 'vue'
+import AnimationBox from "./AnimationBox.vue";
export default defineComponent({
name: 'AppHeader',
@@ -91,6 +79,7 @@ export default defineComponent({
const languages: Ref
+
+
+
+
diff --git a/packages/varlet-cli/site/pc/pages/index.zh-CN.vue b/packages/varlet-cli/site/pc/pages/index.zh-CN.vue
new file mode 100644
index 00000000000..481e4a572d3
--- /dev/null
+++ b/packages/varlet-cli/site/pc/pages/index.zh-CN.vue
@@ -0,0 +1,243 @@
+
+
+
+
+
+
+ Varlet
+
+ Vue 3 Mobile Component Library
+
+
+
+
+ Get Started
+
+
+ Github
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ Material style mobile terminal component library for vue3
+
+
+
+
+
+
diff --git a/packages/varlet-cli/src/compiler/compileSiteEntry.ts b/packages/varlet-cli/src/compiler/compileSiteEntry.ts
index 4820e5608d9..d44ceca0c4a 100644
--- a/packages/varlet-cli/src/compiler/compileSiteEntry.ts
+++ b/packages/varlet-cli/src/compiler/compileSiteEntry.ts
@@ -3,9 +3,11 @@ import {
EXAMPLE_DIR_INDEX,
EXAMPLE_DIR_NAME,
ROOT_DOCS_DIR,
+ ROOT_PAGES_DIR,
SITE,
SITE_DIR,
SITE_MOBILE_ROUTES,
+ SITE_PC_DIR,
SITE_PC_ROUTES,
SRC_DIR,
} from '../shared/constant'
@@ -16,6 +18,7 @@ import { getVarletConfig } from '../config/varlet.config'
const EXAMPLE_COMPONENT_NAME_RE = /\/([-\w]+)\/example\/index.vue/
const COMPONENT_DOCS_RE = /\/([-\w]+)\/docs\/([-\w]+)\.md/
const ROOT_DOCS_RE = /\/docs\/([-\w]+)\.([-\w]+)\.md/
+const ROOT_PAGE_RE = /\/pages\/([-\w]+)\.([-\w]+)\.vue/
export function getExampleRoutePath(examplePath: string): string {
return '/' + examplePath.match(EXAMPLE_COMPONENT_NAME_RE)?.[1]
@@ -33,6 +36,11 @@ export function getRootDocRoutePath(rootDocsPath: string): string {
return `/${language}/${routePath}`
}
+export function getRootPagesPath(rootPagePath: string): string {
+ const [, routePath, language] = rootPagePath.match(ROOT_PAGE_RE) ?? []
+ return `/${language}/${routePath}`
+}
+
export function findExamples(): Promise
+
+
+ Varlet
+
+ Vue 3 移动端组件库
+
+
+
+
+ 起步
+
+
+ Github
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Vue3 Material风格的移动端组件库
+
+
-
### Intro
diff --git a/packages/varlet-ui/docs/home.zh-CN.md b/packages/varlet-ui/docs/home.zh-CN.md
index 807bb24d4bd..5edb0ce576f 100644
--- a/packages/varlet-ui/docs/home.zh-CN.md
+++ b/packages/varlet-ui/docs/home.zh-CN.md
@@ -1,10 +1,3 @@
-
- 
-
-
- VARLET
- Material design mobile component library for Vue3
-
-
### 介绍
From d2ad8be6dd1268bf1ef20069241e9525b0bebb2a Mon Sep 17 00:00:00 2001
From: wegi8 <18272190626@163.com>
Date: Mon, 2 May 2022 16:50:58 +0800
Subject: [PATCH 2/2] fix: fix the AnimationBox over 100vh
---
packages/varlet-cli/site/pc/components/LogoAnimation.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/varlet-cli/site/pc/components/LogoAnimation.vue b/packages/varlet-cli/site/pc/components/LogoAnimation.vue
index 83163eec462..9de94b94de0 100644
--- a/packages/varlet-cli/site/pc/components/LogoAnimation.vue
+++ b/packages/varlet-cli/site/pc/components/LogoAnimation.vue
@@ -64,7 +64,7 @@ export default defineComponent({
}
.logo-animation {
- position: fixed;
+ position: absolute;
z-index: 10;
pointer-events:none;
}
-
-
-
- VARLET
- 面向 Vue3 的 Material 风格移动端组件库
-