opentiny
/
tiny-vue
2
0
Fork 30
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

feat: add mobile demo preview (#2807)

This commit is contained in:
gimmyhehe 2025-01-15 15:03:10 +08:00 committed by GitHub
parent 83d7df5d15
commit 9a71be6e9f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 115 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/sites/env/.env.mobile vendored
View File

@ -6,3 +6,4 @@ VITE_APP_MODE='mobile'
VITE_APP_BUILD_BASE_URL='/' VITE_APP_BUILD_BASE_URL='/'
VITE_PLAYGROUND_URL=/playground.html VITE_PLAYGROUND_URL=/playground.html
VITE_MOBILE_URL=/mobile.html

3
examples/sites/env/.env.mobilealpha vendored
View File

@ -5,4 +5,5 @@ VITE_BUILD_TARGET='inner'
VITE_APP_MODE='mobile' 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_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

3
examples/sites/env/.env.mobileprod vendored
View File

@ -5,4 +5,5 @@ VITE_BUILD_TARGET='inner'
VITE_APP_MODE='mobile' VITE_APP_MODE='mobile'
VITE_APP_BUILD_BASE_URL=//res.hc-cdn.com/tiny-vue-mobile-doc/ 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

13
examples/sites/mobile.html Normal file
View File

@ -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>

77
examples/sites/mobile/App.vue Normal file
View File

@ -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>

5
examples/sites/mobile/main.ts Normal file
View File

@ -0,0 +1,5 @@
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

20
examples/sites/vite.config.ts
View File

@ -45,6 +45,7 @@ export default defineConfig((config) => {
const isSaas = env.VITE_TINY_THEME === 'saas' const isSaas = env.VITE_TINY_THEME === 'saas'
const isPlus = env.VITE_APP_MODE === 'plus' const isPlus = env.VITE_APP_MODE === 'plus'
const isInner = env.VITE_BUILD_TARGET === 'inner' 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 demosPath = isPlus ? '../plusdocs/pc' : `./demos/${env.VITE_APP_MODE}`
const apisPath = isPlus ? '../plusdocs/apis' : './demos/apis' const apisPath = isPlus ? '../plusdocs/apis' : './demos/apis'
const menuPath = isSaas ? path.resolve('./demos/saas') : path.resolve(demosPath) const menuPath = isSaas ? path.resolve('./demos/saas') : path.resolve(demosPath)
@ -64,6 +65,19 @@ export default defineConfig((config) => {
dest: '@demos/mobile-first' 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 = { const viteConfig = {
envDir: './env', envDir: './env',
base: env.VITE_APP_BUILD_BASE_URL || '/tiny-vue/', base: env.VITE_APP_BUILD_BASE_URL || '/tiny-vue/',
@ -125,11 +139,7 @@ export default defineConfig((config) => {
optimizeDeps: getOptimizeDeps(3), optimizeDeps: getOptimizeDeps(3),
build: { build: {
rollupOptions: { rollupOptions: {
input: { input: buildInput()
index: path.resolve(__dirname, './index.html'),
// design-server中添加一个专门路由指向 playground.html
playground: path.resolve(__dirname, './playground.html')
}
} }
}, },
resolve: { resolve: {