fix: the issue of modifying tabs

Author: James-9696

examples/sites/src/views/components/demo.vue

@@ -53,9 +53,9 @@
         <div v-if="isMobileFirst" class="pc-demo-container">
           <tiny-button @click="openPlayground(demo, false)">多端预览</tiny-button>
         </div>
-        <div v-else-if="demoConfig.isMobile" class="mobile-demo-container">
+        <div v-else-if="demoConfig.isMobile" class="pc-demo-container">
           <div class="mobile-view-btn">
-            <tiny-button tiny_mode="pc" @click="openIframe(demo)">{{ i18nByKey('yan-shi') }}</tiny-button>
+            <tiny-button @click="openIframe(demo)">{{ i18nByKey('yan-shi') }}</tiny-button>
           </div>
         </div>
         <div v-else class="pc-demo-container">
@@ -369,15 +369,6 @@ onBeforeUnmount(() => {
   }
 }
 
-.mobile-demo-container {
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-  border-radius: 6px;
-  border: 1px solid #dcdfe6;
-  padding: 26px 18px 42px;
-}
-
 .demo-content {
   position: relative;
 

packages/mobile/components/tabs/src/tab-nav/renderless/index.ts

@@ -17,17 +17,12 @@ import { on, off } from '@mobile-root/utils/deps/dom'
 
 export const computedNavStyle = (state: ITabNavRenderlessParams['state']): { transform: string; width?: string } => {
   const dir = ~[POSITION.Top, POSITION.Bottom].indexOf(state.rootTabs.position) ? 'X' : 'Y'
-
   if (state.mode === 'mobile') {
     const { offset, width } = state.lineStyle
     return {
       width: `${width}px`,
       transform: `translate${dir}(${offset}px) translate${dir}(-50%)`
     }
-  } else {
-    return {
-      transform: `translate${dir}(-${state.navOffset}px)`
-    }
   }
 }
 

packages/mobile/components/tabs/src/tab-nav/renderless/vue.ts

@@ -87,7 +87,7 @@ export const renderless = (
     showExpandItem: false,
     showExpandTabs: props.showExpandTabs,
     expandHeaderStyle: {},
-    mode: props._mode || parent.$mode || tinyMode || 'pc',
+    mode: props._mode || 'mobile',
     rootTabs: inject('rootTabs'),
     sizeName: computed(() => api.computedSizeName(state)),
     navStyle: computed(() => api.computedNavStyle(state)),