feat: add mobile demo preview (#2807)
This commit is contained in:
gimmyhehe
GitHub
parent
83d7df5d15
commit
9a71be6e9f
|
|
@ -6,3 +6,4 @@ VITE_APP_MODE='mobile'
|
|||
|
||||
VITE_APP_BUILD_BASE_URL='/'
|
||||
VITE_PLAYGROUND_URL=/playground.html
|
||||
VITE_MOBILE_URL=/mobile.html
|
||||
|
|
|
|||
|
|
@ -5,4 +5,5 @@ VITE_BUILD_TARGET='inner'
|
|||
VITE_APP_MODE='mobile'
|
||||
|
||||
VITE_APP_BUILD_BASE_URL=https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tiny-vue-mobile-doc/${staticReleaseVersion}/
|
||||
VITE_PLAYGROUND_URL=/vue-playground
|
||||
VITE_PLAYGROUND_URL=/vue-playground
|
||||
VITE_MOBILE_URL=/vue-mobile-preview
|
||||
|
|
@ -5,4 +5,5 @@ VITE_BUILD_TARGET='inner'
|
|||
VITE_APP_MODE='mobile'
|
||||
|
||||
VITE_APP_BUILD_BASE_URL=//res.hc-cdn.com/tiny-vue-mobile-doc/
|
||||
VITE_PLAYGROUND_URL=/vue-playground
|
||||
VITE_PLAYGROUND_URL=/vue-playground
|
||||
VITE_MOBILE_URL=/vue-mobile-preview
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TinyVueMobile 演示</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/mobile/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div>
|
||||
<component :is="showComponent" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { shallowRef, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { TinyLoading } from '@opentiny/vue-mobile'
|
||||
import { vueComponents } from '@/views/components/cmp-config'
|
||||
|
||||
const showComponent = shallowRef(null)
|
||||
const notFoundDemo = (demoPath) => <div>{`${demoPath}示例资源不存在，请检查文件名是否正确？`}</div>
|
||||
const getComponent = async (demoPath) => {
|
||||
if (vueComponents[demoPath]) {
|
||||
const cmp = (await vueComponents[demoPath]()).default
|
||||
return cmp
|
||||
} else {
|
||||
return notFoundDemo(demoPath)
|
||||
}
|
||||
}
|
||||
|
||||
let loadingService
|
||||
const showLoading = () => {
|
||||
if (!loadingService) {
|
||||
loadingService = TinyLoading.service({
|
||||
lock: true
|
||||
})
|
||||
}
|
||||
}
|
||||
const closeLoading = () => {
|
||||
if (loadingService) {
|
||||
loadingService.close()
|
||||
loadingService = null
|
||||
}
|
||||
}
|
||||
|
||||
const receiveMessage = ({ data }) => {
|
||||
const { from, component, demo } = data || {}
|
||||
if (!['tiny-vue-site'].includes(from)) {
|
||||
return
|
||||
}
|
||||
showLoading()
|
||||
const demoPath = `${component}/${demo}`
|
||||
getComponent(demoPath).then((cmp) => {
|
||||
showComponent.value = cmp
|
||||
closeLoading()
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const searchObj = new URLSearchParams(location.search)
|
||||
const component = searchObj.get('component')
|
||||
const demo = searchObj.get('demo')
|
||||
window.addEventListener('message', receiveMessage, false)
|
||||
if (component && demo) {
|
||||
showLoading()
|
||||
const demoPath = `${component}/${demo}`
|
||||
getComponent(demoPath).then((cmp) => {
|
||||
showComponent.value = cmp
|
||||
closeLoading()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('message', receiveMessage)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
app.mount('#app')
|
||||
|
|
@ -45,6 +45,7 @@ export default defineConfig((config) => {
|
|||
const isSaas = env.VITE_TINY_THEME === 'saas'
|
||||
const isPlus = env.VITE_APP_MODE === 'plus'
|
||||
const isInner = env.VITE_BUILD_TARGET === 'inner'
|
||||
const isMobile = env.VITE_APP_MODE === 'mobile'
|
||||
const demosPath = isPlus ? '../plusdocs/pc' : `./demos/${env.VITE_APP_MODE}`
|
||||
const apisPath = isPlus ? '../plusdocs/apis' : './demos/apis'
|
||||
const menuPath = isSaas ? path.resolve('./demos/saas') : path.resolve(demosPath)
|
||||
|
|
@ -64,6 +65,19 @@ export default defineConfig((config) => {
|
|||
dest: '@demos/mobile-first'
|
||||
})
|
||||
}
|
||||
|
||||
const buildInput = () => {
|
||||
// design-server中一个路由对应一个页面
|
||||
const input = {
|
||||
index: path.resolve(__dirname, './index.html'),
|
||||
playground: path.resolve(__dirname, './playground.html')
|
||||
}
|
||||
if (isMobile) {
|
||||
input.mobile = path.resolve(__dirname, './mobile.html')
|
||||
}
|
||||
return input
|
||||
}
|
||||
|
||||
const viteConfig = {
|
||||
envDir: './env',
|
||||
base: env.VITE_APP_BUILD_BASE_URL || '/tiny-vue/',
|
||||
|
|
@ -125,11 +139,7 @@ export default defineConfig((config) => {
|
|||
optimizeDeps: getOptimizeDeps(3),
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
index: path.resolve(__dirname, './index.html'),
|
||||
// design-server中添加一个专门路由指向 playground.html
|
||||
playground: path.resolve(__dirname, './playground.html')
|
||||
}
|
||||
input: buildInput()
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue