From 32d7e432fbe12b632462e01fba2afc1c19418dc6 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Wed, 25 Dec 2024 15:37:18 +0800
Subject: [PATCH] fix(mobile): fix mobile components build error

---
 packages/mobile/components/container/index.ts |   1 -
 .../components/date-picker/src/mobile.vue     |   5 +-
 packages/mobile/components/loading/index.ts   |   2 +-
 packages/mobile/components/modal/index.ts     |   2 +-
 .../multi-select-item/src/mobile.vue          |   4 +-
 packages/mobile/components/popover/index.ts   |   1 -
 .../mobile/components/tooltip/src/mobile.vue  |   3 +-
 .../mobile/components/upload/src/mobile.vue   |   4 +-
 packages/mobile/package.json                  |   1 +
 packages/mobile/vite.config.ts                |   7 +-
 packages/mobile/vue-common/index.ts           |   6 +-
 .../mobile/vue-common/src/adapter/index.ts    | 492 ++++++++++++++++-
 .../vue-common/src/adapter/vue3/index.ts      | 496 ------------------
 .../vue-common/src/adapter/vue3/package.json  |  11 -
 14 files changed, 500 insertions(+), 535 deletions(-)
 delete mode 100644 packages/mobile/vue-common/src/adapter/vue3/index.ts
 delete mode 100644 packages/mobile/vue-common/src/adapter/vue3/package.json

diff --git a/packages/mobile/components/container/index.ts b/packages/mobile/components/container/index.ts
index 3914cc35d6..7a32ea9c80 100644
--- a/packages/mobile/components/container/index.ts
+++ b/packages/mobile/components/container/index.ts
@@ -10,7 +10,6 @@
  *
  */
 import Container from './src/mobile.vue'
-import '@opentiny/vue-theme/container/index.less'
 
 /* istanbul ignore next */
 Container.install = function (Vue) {
diff --git a/packages/mobile/components/date-picker/src/mobile.vue b/packages/mobile/components/date-picker/src/mobile.vue
index ab9b6d50b0..54869742d5 100644
--- a/packages/mobile/components/date-picker/src/mobile.vue
+++ b/packages/mobile/components/date-picker/src/mobile.vue
@@ -19,7 +19,9 @@
       readOnly="true"
       :_mode="_mode"
     >
-      <icon-close slot="suffix" v-if="!state.clearable" @click="clearDisplayValue"></icon-close>
+      <template #suffix>
+        <icon-close v-if="!state.clearable" @click="clearDisplayValue"></icon-close>
+      </template>
     </tiny-input>
     <tiny-mini-picker
       v-model:visible="state.visible"
@@ -38,7 +40,6 @@ import { renderless, api } from './renderless/vue'
 import MiniPicker from '../../mini-picker'
 import Input from '../../input'
 import { iconCloseCircle } from '@opentiny/vue-icon'
-import '@opentiny/vue-theme/date-picker/index.less'
 
 export default defineComponent({
   components: {
diff --git a/packages/mobile/components/loading/index.ts b/packages/mobile/components/loading/index.ts
index 29c51352b0..17dc48382e 100644
--- a/packages/mobile/components/loading/index.ts
+++ b/packages/mobile/components/loading/index.ts
@@ -11,7 +11,7 @@
  */
 import service from './src/service'
 import directive from './src/directive'
-import { setupComponent } from '../../../vue-common'
+import { setupComponent } from '../../vue-common'
 
 const Loadings: any = {
   install(app) {
diff --git a/packages/mobile/components/modal/index.ts b/packages/mobile/components/modal/index.ts
index 60e9d61b4b..6b8f03b6e2 100644
--- a/packages/mobile/components/modal/index.ts
+++ b/packages/mobile/components/modal/index.ts
@@ -10,7 +10,7 @@
  *
  */
 
-import { createComponent, setupComponent } from '../../../vue-common'
+import { createComponent, setupComponent } from '../../vue-common'
 import { MsgQueue } from './src/renderless'
 import TINYModal from './src/mobile.vue'
 
diff --git a/packages/mobile/components/multi-select-item/src/mobile.vue b/packages/mobile/components/multi-select-item/src/mobile.vue
index 24679b1d84..28d39fe0ec 100644
--- a/packages/mobile/components/multi-select-item/src/mobile.vue
+++ b/packages/mobile/components/multi-select-item/src/mobile.vue
@@ -49,10 +49,10 @@
 </template>
 
 <script lang="ts">
-import { $prefix, props, setup, defineComponent } from '../../../vue-common'
+import { $prefix, setup, defineComponent } from '../../../vue-common'
 import { renderless, api } from './renderless/vue'
 import { iconChevronDown } from '@opentiny/vue-icon'
-import Button from '@opentiny/vue-button'
+import Button from '../../button'
 import { multiSelectItemProps } from './multi-select-item'
 import '@opentiny/vue-theme-mobile/multi-select-item/index.less'
 
diff --git a/packages/mobile/components/popover/index.ts b/packages/mobile/components/popover/index.ts
index ae2b94f919..86299bc51b 100644
--- a/packages/mobile/components/popover/index.ts
+++ b/packages/mobile/components/popover/index.ts
@@ -10,7 +10,6 @@
  *
  */
 import Popover from './src/mobile.vue'
-import '@opentiny/vue-theme/popover/index.less'
 
 /* istanbul ignore next */
 Popover.install = function (Vue) {
diff --git a/packages/mobile/components/tooltip/src/mobile.vue b/packages/mobile/components/tooltip/src/mobile.vue
index 616a812e17..7719c2ea63 100644
--- a/packages/mobile/components/tooltip/src/mobile.vue
+++ b/packages/mobile/components/tooltip/src/mobile.vue
@@ -22,8 +22,7 @@ import {
   defineComponent,
   isEmptyVnode,
   hooks
-} from '../../..//vue-common'
-import '@opentiny/vue-theme/tooltip/index.less'
+} from '../../../vue-common'
 import type { ITooltipApi, ITinyVm } from './tooltip'
 import { tooltipProps } from './tooltip'
 
diff --git a/packages/mobile/components/upload/src/mobile.vue b/packages/mobile/components/upload/src/mobile.vue
index c8b2052310..886a0c627e 100644
--- a/packages/mobile/components/upload/src/mobile.vue
+++ b/packages/mobile/components/upload/src/mobile.vue
@@ -11,7 +11,7 @@
  -->
 
 <script lang="tsx">
-import { $prefix, setup, h, defineComponent, props } from '@opentiny/vue-common'
+import { $prefix, setup, h, defineComponent } from '../../../vue-common'
 
 // 此处引入 h 是为了防止打包后 h 被重命名导致组件报错的问题
 import { renderless, api } from './renderless/vue'
@@ -37,7 +37,6 @@ export default defineComponent({
     let {
       accept,
       disabled,
-      drag,
       handleChange,
       handleClick,
       handlePaste,
@@ -46,7 +45,6 @@ export default defineComponent({
       listType,
       multiple,
       name,
-      uploadFiles,
       fileList,
       limit,
       isHidden,
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
index d150810786..38e3b98c13 100644
--- a/packages/mobile/package.json
+++ b/packages/mobile/package.json
@@ -32,6 +32,7 @@
     "@better-scroll/wheel": "^2.5.0",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/mobile-utils": "workspace:~",
+    "@opentiny/vue-theme-mobile": "workspace:~",
     "@opentiny/vue-locale": "workspace:~"
   },
   "devDependencies": {
diff --git a/packages/mobile/vite.config.ts b/packages/mobile/vite.config.ts
index 22680e7c52..263b9ec4a3 100644
--- a/packages/mobile/vite.config.ts
+++ b/packages/mobile/vite.config.ts
@@ -1,19 +1,16 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import dts from 'vite-plugin-dts'
 import svgLoader from 'vite-svg-loader'
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx(), dts(), svgLoader()],
+  plugins: [vue(), vueJsx(), svgLoader()],
   build: {
     lib: {
       entry: './index.ts'
     },
-    minify: true,
     rollupOptions: {
-      external: [/@better-scroll/, /@opentiny/],
+      external: [/@opentiny\/vue/, /@better-scroll/, 'vue', 'xss'],
       input: ['index.ts'],
       output: [
         {
diff --git a/packages/mobile/vue-common/index.ts b/packages/mobile/vue-common/index.ts
index 6e2ddcb884..b01048e3f0 100644
--- a/packages/mobile/vue-common/index.ts
+++ b/packages/mobile/vue-common/index.ts
@@ -20,7 +20,6 @@ import {
 } from './src/adapter'
 import { t } from '@opentiny/vue-locale'
 import { stringifyCssClass, stringifyCssClassObject, stringifyCssClassArray, deduplicateCssClass } from './src/csscls'
-import '@opentiny/vue-theme/base/index.less'
 import { defineComponent, isVue2, isVue3 } from './src/adapter'
 import { useBreakpoint } from './src/breakpoint'
 import { useDefer } from './src/usedefer'
@@ -164,7 +163,6 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, cla
   const globalDesignConfig: DesignConfig = customDesignConfig.designConfig || hooks.inject(design.configKey, {})
   const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')]
 
-  const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null
   const utils = {
     $prefix,
     t,
@@ -233,7 +231,7 @@ export function svg({ name = 'Icon', component }) {
       defineComponent({
         name: $prefix + name,
         setup: (props, context) => {
-          const { fill, width, height, 'custom-class': customClass } = context.attrs || {}
+          const { fill, width, height } = context.attrs || {}
           const mergeProps = Object.assign({}, props, propData || null)
           const mode = resolveMode(mergeProps, context)
           const isMobileFirst = mode === 'mobile-first'
@@ -241,8 +239,6 @@ export function svg({ name = 'Icon', component }) {
           const attrs = isVue3 ? tinyTag : { attrs: tinyTag }
           let className = 'tiny-svg'
 
-          const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null
-
           const extend = Object.assign(
             {
               style: { fill, width, height },
diff --git a/packages/mobile/vue-common/src/adapter/index.ts b/packages/mobile/vue-common/src/adapter/index.ts
index fdf4a6674f..68139b2ef5 100644
--- a/packages/mobile/vue-common/src/adapter/index.ts
+++ b/packages/mobile/vue-common/src/adapter/index.ts
@@ -1,6 +1,490 @@
-import vue from 'virtual:common/adapter/vue'
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import * as hooks from 'vue'
 
-export * from 'virtual:common/adapter/vue'
+import { camelize, capitalize, hyphenate } from '@opentiny/mobile-utils/string'
+import { bindFilter, emitter, getElementCssClass, getElementStatusClass } from './utils'
+
+const Teleport = hooks.Teleport
+
+export { emitter, bindFilter, getElementCssClass, getElementStatusClass, Teleport }
+
+export const defineAsyncComponent = hooks.defineAsyncComponent
+
+export const markRaw = hooks.markRaw
+
+export const renderComponent = ({
+  view = undefined as any,
+  component = undefined as any,
+  props,
+  context: { attrs, slots },
+  extend = {}
+}) => {
+  return () => hooks.h((view && view.value) || component, { ref: 'modeTemplate', ...props, ...attrs, ...extend }, slots)
+}
+
+export const rootConfig = (context) => {
+  const instance = hooks.getCurrentInstance()
+  context && setInstanceEmitter(instance)
+  return instance?.appContext.config.globalProperties
+}
+
+export const getComponentName = () => {
+  // 此处组件最多为两层组件，所以对多获取到父级组件即可
+  const instance = hooks.getCurrentInstance()
+  let componentName = instance?.type?.name
+  if (!componentName) {
+    componentName = instance?.parent?.type?.name
+  }
+
+  return componentName || ''
+}
+
+export const appContext = () =>
+  hooks.getCurrentInstance()?.appContext || {
+    component: () => {
+      // do nothing
+    }
+  }
+
+export const appProperties = () => {
+  const instance = hooks.getCurrentInstance()
+  return instance?.appContext.config.globalProperties || {}
+}
+
+export const useRouter = (instance = hooks.getCurrentInstance()) => {
+  const router = instance?.appContext.config.globalProperties.$router
+  const route = router && router.currentRoute.value
+
+  return { route, router }
+}
+
+const setInstanceEmitter = (instance) => {
+  const $emitter = emitter()
+
+  if (typeof instance.$emitter === 'undefined') Object.defineProperty(instance, '$emitter', { get: () => $emitter })
+}
+
+const emitEvent = (vm) => {
+  const broadcast = (vm, componentName, eventName, params) => {
+    const children = (vm.subTree && vm.subTree.children) || vm.children
+
+    Array.isArray(children) &&
+      children.forEach((child) => {
+        const name = child.type && child.type.componentName
+        const component = child.component
+
+        if (name === componentName) {
+          component.emit(eventName, params)
+          component.$emitter && component.$emitter.emit(eventName, params)
+        } else {
+          broadcast(child, componentName, eventName, params)
+        }
+      })
+  }
+
+  return {
+    dispatch(componentName, eventName, params) {
+      let parent = vm.parent || vm.root
+      let name = parent.type && parent.type.componentName
+
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.parent
+
+        if (parent) name = parent.type && parent.type.componentName
+      }
+
+      if (parent) {
+        parent.emit(...[eventName].concat(params))
+        // fix: VUE3下事件参数为数组，VUE2下事件参数不是数组，这里修改为和VUE2兼容
+        parent.$emitter && parent.$emitter.emit(...[eventName].concat(params))
+      }
+    },
+    broadcast(componentName, eventName, params) {
+      broadcast(vm, componentName, eventName, params)
+    }
+  }
+}
+
+const getRealParent = (vm) => {
+  if (vm && vm.parent)
+    return vm.parent.type.name === 'AsyncComponentWrapper' && vm.parent.parent ? vm.parent.parent : vm.parent
+}
+
+const parent = (vm) => (handler) => {
+  let parent = getRealParent(vm)
+  let level = 0
+
+  const parentObject = (parent) => {
+    return {
+      level,
+      vm: createVm({}, parent),
+      el: parent.vnode.el,
+      options: parent.type
+    }
+  }
+
+  if (typeof handler !== 'function') return parent ? parentObject(parent) : {}
+
+  level++
+
+  while (parent) {
+    if (handler(parentObject(parent))) break
+    parent = getRealParent(parent)
+    level++
+  }
+}
+
+const children = (vm) => (handler) => {
+  if (typeof handler !== 'function') return generateChildren(vm.subTree)
+
+  let layer = 1
+  const broadcast = (subTree) => {
+    if (subTree) {
+      const children = subTree.children || subTree.dynamicChildren
+      const level = layer++
+
+      if (Array.isArray(children)) {
+        if (
+          children.some((child) => {
+            return (
+              child.component &&
+              handler({
+                level,
+                vm: createVm({}, child.component),
+                el: child.el,
+                options: child.type,
+                isLevel1: true
+              })
+            )
+          })
+        )
+          return
+
+        children.forEach((child) => broadcast(child))
+      }
+    }
+  }
+
+  broadcast(vm.subTree)
+}
+
+const regEventPrefix = /^on[A-Z]/
+
+const generateListeners = (attrs) => {
+  const $attrs = {}
+  const $listeners = {}
+
+  for (const name in attrs) {
+    const event = attrs[name]
+
+    if (regEventPrefix.test(name) && typeof event === 'function') {
+      $listeners[hyphenate(name.substr(2))] = event
+      continue
+    }
+
+    $attrs[name] = event
+  }
+
+  return { $attrs, $listeners }
+}
+
+const generateChildren = (subTree) => {
+  const children: any = []
+  children.refs = {}
+
+  if (subTree) {
+    const arr = subTree.dynamicChildren || subTree.children
+
+    if (Array.isArray(arr)) {
+      arr.forEach((child) => {
+        if (child.component) {
+          const vm = createVm({}, child.component)
+
+          children.push(vm)
+          child.props.ref && (children.refs[child.props.ref] = vm)
+        }
+      })
+    } else if (subTree.component) {
+      children.push(createVm({}, subTree.component))
+    }
+  }
+
+  return children
+}
+
+const defineProperties = (vm, instance, property, filter) => {
+  for (const name in instance[property]) {
+    if (typeof filter === 'function' && filter(name)) continue
+
+    Object.defineProperty(vm, name, {
+      configurable: true,
+      enumerable: true,
+      get: () => instance[property][name],
+      set: (value) => (instance[property][name] = value)
+    })
+  }
+
+  return vm
+}
+
+const filter = (name) => name.indexOf('_') === 0
+
+const defineInstanceVm = (vm, instance) => {
+  defineProperties(vm, instance, 'setupState', null)
+  defineProperties(vm, instance, 'props', filter)
+  defineProperties(vm, instance, 'ctx', filter)
+
+  return vm
+}
+
+const createVm = (vm, instance, context = null) => {
+  const { $attrs, $listeners } = generateListeners(instance.attrs)
+  let $emitter = instance.$emitter
+
+  if (!$emitter) {
+    setInstanceEmitter(instance)
+    $emitter = instance.$emitter
+  }
+
+  const emit = (...args) => {
+    instance.emit(...args)
+    $emitter.emit.apply(vm, args)
+  }
+
+  const $set = (target, propertyName, value) => (target[propertyName] = value)
+
+  context || defineInstanceVm(vm, instance)
+
+  Object.defineProperties(vm, {
+    $attrs: { get: () => $attrs },
+    $children: { get: () => generateChildren(instance.subTree) },
+    $constants: { get: () => instance.props._constants },
+    $emit: { get: () => emit },
+    $el: { get: () => instance.vnode.el },
+    $listeners: { get: () => $listeners },
+    $mode: { get: () => instance._tiny_mode },
+    $nextTick: { get: () => hooks.nextTick },
+    $off: { get: () => $emitter.off },
+    $on: { get: () => $emitter.on },
+    $once: { get: () => $emitter.once },
+    $options: { get: () => ({ componentName: instance.type.componentName }) },
+    $parent: {
+      get: () => instance.parent && createVm({}, getRealParent(instance))
+    },
+    $refs: { get: () => instance.refs },
+    $renderless: { get: () => instance.props.tiny_renderless },
+    $scopedSlots: { get: () => instance.slots },
+    $set: { get: () => $set },
+    $slots: { get: () => instance.slots },
+    $template: { get: () => instance.props.tiny_template }
+  })
+
+  return vm
+}
+
+const onBeforeMount = (instance, refs) => {
+  for (let name in instance.refs) {
+    if (Object.prototype.hasOwnProperty.call(instance.refs, name)) {
+      refs[name] = instance.refs[name]
+    }
+  }
+}
+
+export const tools = (context, mode) => {
+  const instance = hooks.getCurrentInstance() as any
+  const root = instance?.appContext.config.globalProperties
+  const { route, router } = useRouter(instance)
+  const i18n = instance?.proxy?.$root?.$i18n
+  const { dispatch, broadcast } = emitEvent(instance)
+  const parentHandler = parent(instance)
+  const childrenHandler = children(instance)
+  const vm = createVm({}, instance, context)
+  const emit = context.emit
+  const refs = {}
+  const grandParent = typeof instance.props.tiny_template === 'undefined' && getRealParent(instance)
+  const parentVm = grandParent ? createVm({}, grandParent) : instance.parent ? createVm({}, instance.parent) : null
+
+  const setParentAttribute = ({ name, value }) => {
+    const ctx = grandParent ? grandParent.ctx : instance?.parent?.ctx
+    ctx[name] = value
+
+    // 当前的parentVm也保存一下。
+    parentVm[name] = value
+  }
+
+  const defineInstanceProperties = (props) => {
+    Object.defineProperties(vm, props)
+    Object.defineProperties(instance?.ctx, props)
+  }
+
+  const defineParentInstanceProperties = (props) => {
+    parentVm && Object.defineProperties(parentVm, props)
+  }
+
+  hooks.onBeforeMount(() => defineInstanceVm(vm, instance))
+  hooks.onMounted(() => onBeforeMount(instance, refs))
+
+  return {
+    framework: 'vue3',
+    vm,
+    emit,
+    emitter,
+    route,
+    router,
+    dispatch,
+    broadcast,
+    parentHandler,
+    childrenHandler,
+    i18n,
+    refs,
+    slots: instance?.slots,
+    scopedSlots: instance?.slots,
+    attrs: context.attrs,
+    parent: parentVm,
+    nextTick: hooks.nextTick,
+    constants: instance?.props._constants,
+    mode,
+    isPCMode: mode === 'pc',
+    isMobileMode: mode === 'mobile',
+    service: root?.$service,
+    getService: () => root?.$getService(vm),
+    setParentAttribute,
+    defineInstanceProperties,
+    defineParentInstanceProperties
+  }
+}
+
+const mapping = (content, before, after) => {
+  if (typeof content[before] !== 'undefined') {
+    const fn = content[before]
+
+    content[after] = (el, binding, vnode) => {
+      vnode.context = binding.instance
+      fn(el, binding, vnode)
+    }
+
+    delete content[before]
+  }
+}
+
+export const directive = (directives) => {
+  for (const name in directives) {
+    const content = directives[name]
+
+    mapping(content, 'bind', 'beforeMount')
+    mapping(content, 'update', 'updated')
+    mapping(content, 'unbind', 'unmounted')
+  }
+
+  return directives
+}
+
+export const parseVnode = (vnode) => vnode
+
+const { Text, Comment } = hooks
+
+export const isEmptyVnode = (vnode) => !vnode || !vnode.type || [Text, Comment].includes(vnode.type)
+
+const parseProps = (propsData) => {
+  const props = {}
+
+  for (const name in propsData) {
+    if (name === 'class' || name === 'style') {
+      props[name] = propsData[name]
+    } else if (name === 'on' || name === 'nativeOn') {
+      const events = propsData[name]
+
+      for (const eventName in events) props[`on${capitalize(camelize(eventName))}`] = events[eventName]
+    } else if (name === 'attrs' || name === 'props' || name === 'domProps') {
+      const attrs = propsData[name]
+
+      for (const key in attrs) props[key] = attrs[key]
+    } else {
+      props[name] = propsData[name]
+    }
+  }
+
+  return props
+}
+
+const customResolveComponent = (component) => {
+  let type = component
+  let customElement = false
+
+  if (typeof component === 'string' && typeof document !== 'undefined') {
+    const el = document.createElement(component)
+    const svgTagNames = ['SVG', 'CIRCLE', 'PATH']
+
+    if ((el instanceof HTMLUnknownElement && !svgTagNames.includes(el.nodeName)) || component.includes('-')) {
+      component = component.toLowerCase()
+      customElement = true
+
+      if (component === 'transition') type = hooks.Transition
+      else if (component === 'transition-group') type = hooks.TransitionGroup
+      else type = hooks.resolveComponent(component)
+    } else {
+      type = component
+    }
+  }
+
+  return { type, component, customElement }
+}
+
+type CreateElement = (component: any, propsData?: any, childData?: any) => ReturnType<typeof hooks.h>
+
+export const h: CreateElement = (component, propsData, childData) => {
+  let props = {}
+  let children = childData
+  const ret = customResolveComponent(component)
+  const customElement = ret.customElement
+  const type = ret.type
+
+  component = ret.component
+
+  if (propsData && typeof propsData === 'object' && !Array.isArray(propsData)) {
+    props = parseProps(propsData)
+    propsData.scopedSlots && (children = propsData.scopedSlots)
+  } else if (typeof propsData === 'string' || Array.isArray(propsData)) {
+    childData = propsData
+  }
+
+  if (typeof childData === 'string' || Array.isArray(childData))
+    children = typeof component !== 'string' || customElement ? () => childData : childData
+
+  return hooks.h(type, props, children)
+}
+
+export const createComponentFn = (design) => {
+  return ({ component, propsData, el }) => {
+    const comp = Object.assign(component, { provide: { [design.configKey]: design.configInstance } })
+    const vnode = hooks.createVNode(comp, propsData)
+
+    hooks.render(vnode, el)
+    return createVm({}, vnode.component)
+  }
+}
+
+export const defineComponent = hooks.defineComponent
+
+export default hooks
+
+export const isVue2 = false
+
+export const isVue3 = true
+
+export const isVnode = hooks.isVNode
+
+export const KeepAlive = hooks.KeepAlive
 
 export type {
   PropType,
@@ -9,6 +493,4 @@ export type {
   ComponentPublicInstance,
   SetupContext,
   ComputedRef
-} from 'virtual:common/adapter/vue'
-
-export default vue
+} from 'vue'
diff --git a/packages/mobile/vue-common/src/adapter/vue3/index.ts b/packages/mobile/vue-common/src/adapter/vue3/index.ts
deleted file mode 100644
index d7b00f08cb..0000000000
--- a/packages/mobile/vue-common/src/adapter/vue3/index.ts
+++ /dev/null
@@ -1,496 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import * as hooks from 'vue'
-
-import { camelize, capitalize, hyphenate } from '@opentiny/mobile-utils/string'
-import { bindFilter, emitter, getElementCssClass, getElementStatusClass } from '../utils'
-
-const Teleport = hooks.Teleport
-
-export { emitter, bindFilter, getElementCssClass, getElementStatusClass, Teleport }
-
-export const defineAsyncComponent = hooks.defineAsyncComponent
-
-export const markRaw = hooks.markRaw
-
-export const renderComponent = ({
-  view = undefined as any,
-  component = undefined as any,
-  props,
-  context: { attrs, slots },
-  extend = {}
-}) => {
-  return () => hooks.h((view && view.value) || component, { ref: 'modeTemplate', ...props, ...attrs, ...extend }, slots)
-}
-
-export const rootConfig = (context) => {
-  const instance = hooks.getCurrentInstance()
-  context && setInstanceEmitter(instance)
-  return instance?.appContext.config.globalProperties
-}
-
-export const getComponentName = () => {
-  // 此处组件最多为两层组件，所以对多获取到父级组件即可
-  const instance = hooks.getCurrentInstance()
-  let componentName = instance?.type?.name
-  if (!componentName) {
-    componentName = instance?.parent?.type?.name
-  }
-
-  return componentName || ''
-}
-
-export const appContext = () =>
-  hooks.getCurrentInstance()?.appContext || {
-    component: () => {
-      // do nothing
-    }
-  }
-
-export const appProperties = () => {
-  const instance = hooks.getCurrentInstance()
-  return instance?.appContext.config.globalProperties || {}
-}
-
-export const useRouter = (instance = hooks.getCurrentInstance()) => {
-  const router = instance?.appContext.config.globalProperties.$router
-  const route = router && router.currentRoute.value
-
-  return { route, router }
-}
-
-const setInstanceEmitter = (instance) => {
-  const $emitter = emitter()
-
-  if (typeof instance.$emitter === 'undefined') Object.defineProperty(instance, '$emitter', { get: () => $emitter })
-}
-
-const emitEvent = (vm) => {
-  const broadcast = (vm, componentName, eventName, params) => {
-    const children = (vm.subTree && vm.subTree.children) || vm.children
-
-    Array.isArray(children) &&
-      children.forEach((child) => {
-        const name = child.type && child.type.componentName
-        const component = child.component
-
-        if (name === componentName) {
-          component.emit(eventName, params)
-          component.$emitter && component.$emitter.emit(eventName, params)
-        } else {
-          broadcast(child, componentName, eventName, params)
-        }
-      })
-  }
-
-  return {
-    dispatch(componentName, eventName, params) {
-      let parent = vm.parent || vm.root
-      let name = parent.type && parent.type.componentName
-
-      while (parent && (!name || name !== componentName)) {
-        parent = parent.parent
-
-        if (parent) name = parent.type && parent.type.componentName
-      }
-
-      if (parent) {
-        parent.emit(...[eventName].concat(params))
-        // fix: VUE3下事件参数为数组，VUE2下事件参数不是数组，这里修改为和VUE2兼容
-        parent.$emitter && parent.$emitter.emit(...[eventName].concat(params))
-      }
-    },
-    broadcast(componentName, eventName, params) {
-      broadcast(vm, componentName, eventName, params)
-    }
-  }
-}
-
-const getRealParent = (vm) => {
-  if (vm && vm.parent)
-    return vm.parent.type.name === 'AsyncComponentWrapper' && vm.parent.parent ? vm.parent.parent : vm.parent
-}
-
-const parent = (vm) => (handler) => {
-  let parent = getRealParent(vm)
-  let level = 0
-
-  const parentObject = (parent) => {
-    return {
-      level,
-      vm: createVm({}, parent),
-      el: parent.vnode.el,
-      options: parent.type
-    }
-  }
-
-  if (typeof handler !== 'function') return parent ? parentObject(parent) : {}
-
-  level++
-
-  while (parent) {
-    if (handler(parentObject(parent))) break
-    parent = getRealParent(parent)
-    level++
-  }
-}
-
-const children = (vm) => (handler) => {
-  if (typeof handler !== 'function') return generateChildren(vm.subTree)
-
-  let layer = 1
-  const broadcast = (subTree) => {
-    if (subTree) {
-      const children = subTree.children || subTree.dynamicChildren
-      const level = layer++
-
-      if (Array.isArray(children)) {
-        if (
-          children.some((child) => {
-            return (
-              child.component &&
-              handler({
-                level,
-                vm: createVm({}, child.component),
-                el: child.el,
-                options: child.type,
-                isLevel1: true
-              })
-            )
-          })
-        )
-          return
-
-        children.forEach((child) => broadcast(child))
-      }
-    }
-  }
-
-  broadcast(vm.subTree)
-}
-
-const regEventPrefix = /^on[A-Z]/
-
-const generateListeners = (attrs) => {
-  const $attrs = {}
-  const $listeners = {}
-
-  for (const name in attrs) {
-    const event = attrs[name]
-
-    if (regEventPrefix.test(name) && typeof event === 'function') {
-      $listeners[hyphenate(name.substr(2))] = event
-      continue
-    }
-
-    $attrs[name] = event
-  }
-
-  return { $attrs, $listeners }
-}
-
-const generateChildren = (subTree) => {
-  const children: any = []
-  children.refs = {}
-
-  if (subTree) {
-    const arr = subTree.dynamicChildren || subTree.children
-
-    if (Array.isArray(arr)) {
-      arr.forEach((child) => {
-        if (child.component) {
-          const vm = createVm({}, child.component)
-
-          children.push(vm)
-          child.props.ref && (children.refs[child.props.ref] = vm)
-        }
-      })
-    } else if (subTree.component) {
-      children.push(createVm({}, subTree.component))
-    }
-  }
-
-  return children
-}
-
-const defineProperties = (vm, instance, property, filter) => {
-  for (const name in instance[property]) {
-    if (typeof filter === 'function' && filter(name)) continue
-
-    Object.defineProperty(vm, name, {
-      configurable: true,
-      enumerable: true,
-      get: () => instance[property][name],
-      set: (value) => (instance[property][name] = value)
-    })
-  }
-
-  return vm
-}
-
-const filter = (name) => name.indexOf('_') === 0
-
-const defineInstanceVm = (vm, instance) => {
-  defineProperties(vm, instance, 'setupState', null)
-  defineProperties(vm, instance, 'props', filter)
-  defineProperties(vm, instance, 'ctx', filter)
-
-  return vm
-}
-
-const createVm = (vm, instance, context = null) => {
-  const { $attrs, $listeners } = generateListeners(instance.attrs)
-  let $emitter = instance.$emitter
-
-  if (!$emitter) {
-    setInstanceEmitter(instance)
-    $emitter = instance.$emitter
-  }
-
-  const emit = (...args) => {
-    instance.emit(...args)
-    $emitter.emit.apply(vm, args)
-  }
-
-  const $set = (target, propertyName, value) => (target[propertyName] = value)
-
-  context || defineInstanceVm(vm, instance)
-
-  Object.defineProperties(vm, {
-    $attrs: { get: () => $attrs },
-    $children: { get: () => generateChildren(instance.subTree) },
-    $constants: { get: () => instance.props._constants },
-    $emit: { get: () => emit },
-    $el: { get: () => instance.vnode.el },
-    $listeners: { get: () => $listeners },
-    $mode: { get: () => instance._tiny_mode },
-    $nextTick: { get: () => hooks.nextTick },
-    $off: { get: () => $emitter.off },
-    $on: { get: () => $emitter.on },
-    $once: { get: () => $emitter.once },
-    $options: { get: () => ({ componentName: instance.type.componentName }) },
-    $parent: {
-      get: () => instance.parent && createVm({}, getRealParent(instance))
-    },
-    $refs: { get: () => instance.refs },
-    $renderless: { get: () => instance.props.tiny_renderless },
-    $scopedSlots: { get: () => instance.slots },
-    $set: { get: () => $set },
-    $slots: { get: () => instance.slots },
-    $template: { get: () => instance.props.tiny_template }
-  })
-
-  return vm
-}
-
-const onBeforeMount = (instance, refs) => {
-  for (let name in instance.refs) {
-    if (Object.prototype.hasOwnProperty.call(instance.refs, name)) {
-      refs[name] = instance.refs[name]
-    }
-  }
-}
-
-export const tools = (context, mode) => {
-  const instance = hooks.getCurrentInstance() as any
-  const root = instance?.appContext.config.globalProperties
-  const { route, router } = useRouter(instance)
-  const i18n = instance?.proxy?.$root?.$i18n
-  const { dispatch, broadcast } = emitEvent(instance)
-  const parentHandler = parent(instance)
-  const childrenHandler = children(instance)
-  const vm = createVm({}, instance, context)
-  const emit = context.emit
-  const refs = {}
-  const grandParent = typeof instance.props.tiny_template === 'undefined' && getRealParent(instance)
-  const parentVm = grandParent ? createVm({}, grandParent) : instance.parent ? createVm({}, instance.parent) : null
-
-  const setParentAttribute = ({ name, value }) => {
-    const ctx = grandParent ? grandParent.ctx : instance?.parent?.ctx
-    ctx[name] = value
-
-    // 当前的parentVm也保存一下。
-    parentVm[name] = value
-  }
-
-  const defineInstanceProperties = (props) => {
-    Object.defineProperties(vm, props)
-    Object.defineProperties(instance?.ctx, props)
-  }
-
-  const defineParentInstanceProperties = (props) => {
-    parentVm && Object.defineProperties(parentVm, props)
-  }
-
-  hooks.onBeforeMount(() => defineInstanceVm(vm, instance))
-  hooks.onMounted(() => onBeforeMount(instance, refs))
-
-  return {
-    framework: 'vue3',
-    vm,
-    emit,
-    emitter,
-    route,
-    router,
-    dispatch,
-    broadcast,
-    parentHandler,
-    childrenHandler,
-    i18n,
-    refs,
-    slots: instance?.slots,
-    scopedSlots: instance?.slots,
-    attrs: context.attrs,
-    parent: parentVm,
-    nextTick: hooks.nextTick,
-    constants: instance?.props._constants,
-    mode,
-    isPCMode: mode === 'pc',
-    isMobileMode: mode === 'mobile',
-    service: root?.$service,
-    getService: () => root?.$getService(vm),
-    setParentAttribute,
-    defineInstanceProperties,
-    defineParentInstanceProperties
-  }
-}
-
-const mapping = (content, before, after) => {
-  if (typeof content[before] !== 'undefined') {
-    const fn = content[before]
-
-    content[after] = (el, binding, vnode) => {
-      vnode.context = binding.instance
-      fn(el, binding, vnode)
-    }
-
-    delete content[before]
-  }
-}
-
-export const directive = (directives) => {
-  for (const name in directives) {
-    const content = directives[name]
-
-    mapping(content, 'bind', 'beforeMount')
-    mapping(content, 'update', 'updated')
-    mapping(content, 'unbind', 'unmounted')
-  }
-
-  return directives
-}
-
-export const parseVnode = (vnode) => vnode
-
-const { Text, Comment } = hooks
-
-export const isEmptyVnode = (vnode) => !vnode || !vnode.type || [Text, Comment].includes(vnode.type)
-
-const parseProps = (propsData) => {
-  const props = {}
-
-  for (const name in propsData) {
-    if (name === 'class' || name === 'style') {
-      props[name] = propsData[name]
-    } else if (name === 'on' || name === 'nativeOn') {
-      const events = propsData[name]
-
-      for (const eventName in events) props[`on${capitalize(camelize(eventName))}`] = events[eventName]
-    } else if (name === 'attrs' || name === 'props' || name === 'domProps') {
-      const attrs = propsData[name]
-
-      for (const key in attrs) props[key] = attrs[key]
-    } else {
-      props[name] = propsData[name]
-    }
-  }
-
-  return props
-}
-
-const customResolveComponent = (component) => {
-  let type = component
-  let customElement = false
-
-  if (typeof component === 'string' && typeof document !== 'undefined') {
-    const el = document.createElement(component)
-    const svgTagNames = ['SVG', 'CIRCLE', 'PATH']
-
-    if ((el instanceof HTMLUnknownElement && !svgTagNames.includes(el.nodeName)) || component.includes('-')) {
-      component = component.toLowerCase()
-      customElement = true
-
-      if (component === 'transition') type = hooks.Transition
-      else if (component === 'transition-group') type = hooks.TransitionGroup
-      else type = hooks.resolveComponent(component)
-    } else {
-      type = component
-    }
-  }
-
-  return { type, component, customElement }
-}
-
-type CreateElement = (component: any, propsData?: any, childData?: any) => ReturnType<typeof hooks.h>
-
-export const h: CreateElement = (component, propsData, childData) => {
-  let props = {}
-  let children = childData
-  const ret = customResolveComponent(component)
-  const customElement = ret.customElement
-  const type = ret.type
-
-  component = ret.component
-
-  if (propsData && typeof propsData === 'object' && !Array.isArray(propsData)) {
-    props = parseProps(propsData)
-    propsData.scopedSlots && (children = propsData.scopedSlots)
-  } else if (typeof propsData === 'string' || Array.isArray(propsData)) {
-    childData = propsData
-  }
-
-  if (typeof childData === 'string' || Array.isArray(childData))
-    children = typeof component !== 'string' || customElement ? () => childData : childData
-
-  return hooks.h(type, props, children)
-}
-
-export const createComponentFn = (design) => {
-  return ({ component, propsData, el }) => {
-    const comp = Object.assign(component, { provide: { [design.configKey]: design.configInstance } })
-    const vnode = hooks.createVNode(comp, propsData)
-
-    hooks.render(vnode, el)
-    return createVm({}, vnode.component)
-  }
-}
-
-export const defineComponent = hooks.defineComponent
-
-export default hooks
-
-export const isVue2 = false
-
-export const isVue3 = true
-
-export const isVnode = hooks.isVNode
-
-export const KeepAlive = hooks.KeepAlive
-
-export type {
-  PropType,
-  ExtractPropTypes,
-  DefineComponent,
-  ComponentPublicInstance,
-  SetupContext,
-  ComputedRef
-} from 'vue'
diff --git a/packages/mobile/vue-common/src/adapter/vue3/package.json b/packages/mobile/vue-common/src/adapter/vue3/package.json
deleted file mode 100644
index 0815d440fd..0000000000
--- a/packages/mobile/vue-common/src/adapter/vue3/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "vue3-common",
-  "private": true,
-  "version": "5.0.2-mf.0",
-  "description": "",
-  "main": "index.ts",
-  "devDependencies": {
-    "@vue/runtime-core": "^3.2.31",
-    "vue": "^3.3.9"
-  }
-}