feat: add auto create pc site route

packages/varlet-cli/site/pc/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import App from './App.vue'
 
 const app = createApp(App as any)

packages/varlet-cli/src/commands/dev.ts

@@ -3,38 +3,42 @@ import WebpackDevServer from 'webpack-dev-server'
 import logger from '../shared/logger'
 import { getDevConfig } from '../config/webpack.dev.config'
 import { getPort } from 'portfinder'
-import { buildMobileSiteRoutes } from '../shared/fsUtils'
+import { buildMobileSiteRoutes, buildPcSiteRoutes } from '../shared/fsUtils'
 import { setDev } from '../shared/env'
 
 export function runDevServer(port: number, config: any) {
-  const { host } = config.devServer
-  const server = new WebpackDevServer(webpack(config), config.devServer)
+	const { host } = config.devServer
+	const server = new WebpackDevServer(webpack(config), config.devServer)
 
-  ;(server as any).showStatus = function() {}
+	;(server as any).showStatus = function () {}
 
-  server.listen(port, host,(err?: Error) => {
-    if (err) {
-      logger.error(err.toString())
-      return
-    }
+	server.listen(port, host, (err?: Error) => {
+		if (err) {
+			logger.error(err.toString())
+			return
+		}
 
-    logger.success(`Server running at http://${host}:${port}`)
-  })
+		logger.success(`Server running at http://${host}:${port}`)
+	})
 }
 
 export async function dev() {
-  setDev()
-  await buildMobileSiteRoutes()
+	setDev()
+	await buildMobileSiteRoutes()
+	buildPcSiteRoutes()
 
-  const config = getDevConfig()
-  const { port } = config.devServer
-  getPort({
-    port
-  }, (err: Error, port: number) => {
-    if (err) {
-      logger.error(err.toString())
-      return
-    }
-    runDevServer(port, config)
-  })
+	const config = getDevConfig()
+	const { port } = config.devServer
+	getPort(
+		{
+			port,
+		},
+		(err: Error, port: number) => {
+			if (err) {
+				logger.error(err.toString())
+				return
+			}
+			runDevServer(port, config)
+		}
+	)
 }

packages/varlet-cli/src/shared/constant.ts

@@ -9,8 +9,13 @@ export const SRC_DIR = resolve(CWD, 'src')
 export const ES_DIR = resolve(CWD, 'es')
 export const CJS_DIR = resolve(CWD, 'cjs')
 export const UMD_DIR = resolve(CWD, 'umd')
-export const SITE_MOBILE_ROUTES = resolve(__dirname, '../../site/mobile/routes.ts')
+export const SITE_MOBILE_ROUTES = resolve(
+	__dirname,
+	'../../site/mobile/routes.ts'
+)
+export const SITE_PC_ROUTES = resolve(__dirname, '../../site/PC/routes.ts')
 export const EXAMPLE_DIR_NAME = 'example'
+export const DOCS_DIR_NAME = 'docs'
 export const EXAMPLE_DIR_INDEX = 'index.vue'
 export const TESTS_DIR_NAME = '__tests__'
 export const EXTENSIONS = ['.vue', '.ts', '.js', '.less', '.css']

packages/varlet-cli/src/shared/fsUtils.ts

@@ -1,99 +1,172 @@
 import slash from 'slash'
-import { parse , extname, resolve } from 'path'
-import { lstatSync, pathExistsSync, readdir, writeFileSync } from 'fs-extra'
-import { EXAMPLE_DIR_INDEX, EXAMPLE_DIR_NAME, SITE_MOBILE_ROUTES, SRC_DIR, TESTS_DIR_NAME } from './constant'
+import { parse, extname, resolve } from 'path'
+import {
+	lstatSync,
+	pathExistsSync,
+	readdir,
+	writeFileSync,
+	readdirSync,
+} from 'fs-extra'
+import {
+	EXAMPLE_DIR_INDEX,
+	EXAMPLE_DIR_NAME,
+	SITE_MOBILE_ROUTES,
+	SITE_PC_ROUTES,
+	SRC_DIR,
+	TESTS_DIR_NAME,
+	DOCS_DIR_NAME,
+} from './constant'
 import { getVarletConfig } from '../config/varlet.config'
 
+interface PathMap {
+	[key: string]: string[]
+}
+
 export function accessProperty(target: any, operator: string) {
-  const keys: string[] = operator.split('.')
-  return keys.reduce((value: any, key: string) => {
-    if (value === null || value === undefined) {
-      return null
-    }
-    return value[key]
-  }, target)
+	const keys: string[] = operator.split('.')
+	return keys.reduce((value: any, key: string) => {
+		if (value === null || value === undefined) {
+			return null
+		}
+		return value[key]
+	}, target)
 }
 
 export function getDirComponentNames(dir: string[]) {
-  return dir.filter((filename: string) => {
-    return ![
-      ...accessProperty(getVarletConfig(), 'componentsIgnores'),
-      'index.js'
-    ].includes(filename)
-  })
+	return dir.filter((filename: string) => {
+		return ![
+			...accessProperty(getVarletConfig(), 'componentsIgnores'),
+			'index.js',
+		].includes(filename)
+	})
 }
 
 export function isDir(path: string): boolean {
-  return pathExistsSync(path) && lstatSync(path).isDirectory()
+	return pathExistsSync(path) && lstatSync(path).isDirectory()
 }
 
 export function isSFC(path: string): boolean {
-  return pathExistsSync(path) && extname(path) === '.vue'
+	return pathExistsSync(path) && extname(path) === '.vue'
 }
 
 export function isScript(path: string): boolean {
-  return pathExistsSync(path) && extname(path) === '.js' || extname(path) === '.ts'
+	return (
+		(pathExistsSync(path) && extname(path) === '.js') || extname(path) === '.ts'
+	)
 }
 
 export function isLess(path: string): boolean {
-  return pathExistsSync(path) && extname(path) === '.less'
+	return pathExistsSync(path) && extname(path) === '.less'
 }
 
 export function isExampleDir(path: string): boolean {
-  return pathExistsSync(path) && parse(path).dir.endsWith(EXAMPLE_DIR_NAME)
+	return pathExistsSync(path) && parse(path).dir.endsWith(EXAMPLE_DIR_NAME)
 }
 
 export function isTestsDir(path: string): boolean {
-  return pathExistsSync(path) && parse(path).dir.endsWith(TESTS_DIR_NAME)
+	return pathExistsSync(path) && parse(path).dir.endsWith(TESTS_DIR_NAME)
 }
 
 export function replaceExt(path: string, ext: string): string {
-  return path.replace(extname(path), ext)
+	return path.replace(extname(path), ext)
+}
+
+export function convertMobileSiteExamplePathToComponentName(
+	path: string
+): string {
+	return path.replace(`/${EXAMPLE_DIR_NAME}/index.vue`, '').replace(/.*\//g, '')
 }
 
-export function convertMobileSiteExamplePathToComponentName(path: string): string {
-  return path
-    .replace(`/${EXAMPLE_DIR_NAME}/index.vue`, '')
-    .replace(/.*\//g, '')
+export function getRouterPathByPcSiteDocsPath(path: string): string {
+	return path.split(DOCS_DIR_NAME)[1]
 }
 
 export async function getMobileSiteExamplePaths(): Promise<string[]> {
-  const varletConfig = getVarletConfig()
-  const srcDir: string[] = await readdir(SRC_DIR)
-  return srcDir
-    .filter(filename => !accessProperty(varletConfig, 'siteIgnores').includes(filename))
-    .filter(filename => isDir(resolve(SRC_DIR, filename)))
-    .map(filename => resolve(SRC_DIR, filename))
-    .filter(path => isDir(resolve(path, EXAMPLE_DIR_NAME)))
-    .map(path => resolve(path, EXAMPLE_DIR_NAME))
-    .filter(path => pathExistsSync(resolve(path, EXAMPLE_DIR_INDEX)))
-    .map(path => slash(resolve(path, EXAMPLE_DIR_INDEX)))
+	const varletConfig = getVarletConfig()
+	const srcDir: string[] = await readdir(SRC_DIR)
+	return srcDir
+		.filter(
+			(filename) =>
+				!accessProperty(varletConfig, 'siteIgnores').includes(filename)
+		)
+		.filter((filename) => isDir(resolve(SRC_DIR, filename)))
+		.map((filename) => resolve(SRC_DIR, filename))
+		.filter((path) => isDir(resolve(path, EXAMPLE_DIR_NAME)))
+		.map((path) => resolve(path, EXAMPLE_DIR_NAME))
+		.filter((path) => pathExistsSync(resolve(path, EXAMPLE_DIR_INDEX)))
+		.map((path) => slash(resolve(path, EXAMPLE_DIR_INDEX)))
 }
 
-export async function buildMobileSiteRoutes() {
-  if (!pathExistsSync(SRC_DIR)) {
-    writeFileSync(SITE_MOBILE_ROUTES, 'export default []')
-    return
-  }
+export function getPcSiteDocsPaths(): string[] {
+	const DOCS_DIR = resolve(SRC_DIR, DOCS_DIR_NAME)
+	const docsDir: string[] = readdirSync(DOCS_DIR)
+	const docsDirMap = docsDir
+		.filter((filename) => isDir(resolve(DOCS_DIR, filename)))
+		.map((filename) => resolve(DOCS_DIR, filename))
+		.reduce((pathMap: PathMap, path: string) => {
+			pathMap[path] = readdirSync(path)
+			return pathMap
+		}, {})
+	return Object.entries(docsDirMap).reduce((pathList: string[], pathMap) => {
+		pathMap[1].forEach((filename) => {
+			pathList.push(resolve(pathMap[0], filename))
+		})
+		return pathList
+	}, [])
+}
 
-  const paths = await getMobileSiteExamplePaths()
-  const routes = paths!.map(path => `
+export async function buildMobileSiteRoutes() {
+	if (!pathExistsSync(SRC_DIR)) {
+		writeFileSync(SITE_MOBILE_ROUTES, 'export default []')
+		return
+	}
+
+	const paths = await getMobileSiteExamplePaths()
+	const routes = paths!.map(
+		(path) => `
   {
     path: '/${convertMobileSiteExamplePathToComponentName(path)}',
     component: () => import('${path}')
   }\
-`)
+`
+	)
+
+	writeFileSync(
+		SITE_MOBILE_ROUTES,
+		`export default [\
+  ${routes.join(',')}
+]`
+	)
+}
+
+export function buildPcSiteRoutes() {
+	if (!pathExistsSync(SRC_DIR)) {
+		writeFileSync(SITE_PC_ROUTES, 'export default []')
+		return
+	}
+
+	const paths = getPcSiteDocsPaths()
+	const routes = paths.map(
+		(path) => `
+  {
+    path: '${getRouterPathByPcSiteDocsPath(path)}',
+    component: () => import('${path}')
+  }\
+`
+	)
 
-  writeFileSync(SITE_MOBILE_ROUTES, `export default [\
+	writeFileSync(
+		SITE_PC_ROUTES,
+		`export default [\
   ${routes.join(',')}
-]`)
+]`
+	)
 }
 
 export function bigCamelize(str: string): string {
-  return camelize(str)
-    .replace(str.charAt(0), str.charAt(0).toUpperCase())
+	return camelize(str).replace(str.charAt(0), str.charAt(0).toUpperCase())
 }
 
 export function camelize(str: string): string {
-  return str.replace(/-(\w)/g, (_: any, p: string) => p.toUpperCase());
+	return str.replace(/-(\w)/g, (_: any, p: string) => p.toUpperCase())
 }

packages/varlet-ui/src/button/example/index.vue

@@ -0,0 +1,15 @@
+<template>
+	<button>test</button>
+</template>
+
+<script>
+export default {
+	name: 'Index',
+}
+</script>
+
+<style scoped>
+.button {
+	background: antiquewhite;
+}
+</style>

packages/varlet-ui/src/docs/en_US/button.md

@@ -0,0 +1 @@
+# This is button

packages/varlet-ui/src/docs/zh_CN/button.md

@@ -0,0 +1 @@
+# 这是 button

packages/varlet-ui/src/input/Input.vue

@@ -0,0 +1,17 @@
+<template>
+	<div class="varlet-input"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	name: 'VarletInput',
+})
+</script>
+
+<style lang="less">
+.varlet {
+	display: flex;
+}
+</style>

packages/varlet-ui/src/input/index.ts

@@ -0,0 +1,7 @@
+import Input from './Input.vue'
+
+Input.install = function (app) {
+	app.component(Input.name, Input)
+}
+
+export default Input

packages/varlet-ui/varlet.config.js

@@ -1,21 +1,21 @@
 module.exports = {
-  namespace: 'varlet',
-  pc: {
-    title: 'Varlet 组件库',
-    description: 'Varlet 组件库文档',
-    logo: 'https://cn.vuejs.org/images/logo.png'
-  },
-  mobile: {
-    title: 'Varlet 组件库示例',
-    description: 'Varlet 组件库示例',
-    logo: 'https://cn.vuejs.org/images/logo.png'
-  },
-  siteIgnores: [
-    'styles',
-    'utils'
-  ],
-  componentsIgnores: [
-    'styles',
-    'utils'
-  ]
+	namespace: 'varlet',
+	pc: {
+		title: 'Varlet 组件库',
+		description: 'Varlet 组件库文档',
+		logo: 'https://cn.vuejs.org/images/logo.png',
+		menu: [
+			{
+				title: 'button',
+				doc: 'button',
+			},
+		],
+	},
+	mobile: {
+		title: 'Varlet 组件库示例',
+		description: 'Varlet 组件库示例',
+		logo: 'https://cn.vuejs.org/images/logo.png',
+	},
+	siteIgnores: ['styles', 'utils', 'docs'],
+	componentsIgnores: ['styles', 'utils', 'docs'],
 }