fix(saas): increase the demonstration function of screens of different sizes in the training field (#3880)

* fix: increase the demonstration function of screens of different sizes in the training field

* fix: layout reversal, horizontal adjustment

* fix: update comment

Author: James-9696

examples/sites/playground/App.vue

@@ -38,8 +38,8 @@
   }
   p {
     font-size: 14px;
-    line-height: 30px;
-    margin-bottom: 11px;
+    line-height: 21px;
+    margin-bottom: 0px;
   }
   code {
     margin: 0 4px;

examples/sites/playground/assets/big.png

@@ -1,13 +1,9 @@
 <template>
-  <div ref="demoContainer" :id="demo.demoId" :class="!isMobileFirst ? 'demo-container' : 'demo-mobile-first-container'">
+  <div ref="demoContainer" :id="demo.demoId" class="demo-container">
     <div
       v-if="isIntersecting"
       class="ti-br-sm ti-wp100"
-      :class="{
-        'b-a-success': currDemoId === demo.demoId,
-        'is-current': currDemoId === demo.demoId,
-        'is-mobile-first': isMobileFirst
-      }"
+      :class="currDemoId === demo.demoId ? 'b-a-success is-current' : ''"
     >
       <div class="demo-content">
         <!-- DEMO 的标题 + 说明desc + 示例wcTag -->
@@ -47,37 +43,6 @@
             <tiny-button @click="openIframe(demo)">{{ i18nByKey('yan-shi') }}</tiny-button>
           </div>
         </div>
-        <div v-else-if="isMobileFirst" class="mobile-first-demo-container">
-          <div class="right-side-panel">
-            <div class="panel-header">
-              <h3 class="panel-title">{{ demo.name[state.langKey] }}</h3>
-              <div class="screen-switch-wrapper" v-if="!isSmallScreen">
-                <!-- 添加 Switch 控件 -->
-                <span class="switch-label">{{ screenFlag ? '小屏' : '大屏' }}</span>
-                <tiny-switch v-model="screenFlag" size="small"> </tiny-switch>
-              </div>
-            </div>
-            <div class="panel-body">
-              <div class="panel-cmp-box">
-                <!-- 小屏幕 -->
-                <div v-if="screenFlag && !isSmallScreen" key="mobile-iframe-wrapper">
-                  <iframe
-                    ref="iframeRef"
-                    style="height: 300px; max-width: 639px"
-                    sandbox="allow-scripts allow-same-origin"
-                    :src="`/saas.html?component=${router.currentRoute.value.params.cmpId}&demo=${demo.codeFiles[0]}`"
-                    frameborder="0"
-                    importance="high"
-                    loading="lazy"
-                  >
-                  </iframe>
-                </div>
-                <!-- 大屏 -->
-                <component v-else :is="cmp" />
-              </div>
-            </div>
-          </div>
-        </div>
         <div v-else class="pc-demo-container">
           <div class="pc-demo">
             <component :is="cmp" />
@@ -117,16 +82,14 @@ import {
 } from 'vue'
 import { i18nByKey, getWord } from '@/i18n'
 import { $split, fetchDemosFile } from '@/tools'
-import { Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton, Switch as TinySwitch } from '@opentiny/vue'
+import { Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
 import { AutoTip as vAutoTip } from '@opentiny/vue-directive'
 import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from '../views/components-doc/cmp-config'
 import { router } from '@/router.js'
 import demoConfig from '@demos/config.js'
 import { useApiMode, useTemplateMode } from '@/tools'
-import { useBreakpoint } from '@opentiny/vue-common'
 import useTheme from '@/tools/useTheme'
 import AsyncHighlight from './async-highlight.vue'
-import '../assets/right-panel.less'
 
 const props = defineProps({
   demo: {
@@ -146,10 +109,9 @@ const props = defineProps({
     default: false
   }
 })
+
 const emit = defineEmits(['mounted', 'get-iframe-demo'])
-const iframeRef = ref()
-const isSmallScreen = computed(() => useBreakpoint().current.value === 'default')
-let screenFlag = ref(false)
+
 const { apiModeState, apiModeFn } = useApiMode()
 
 defineOptions({
@@ -175,14 +137,6 @@ const state = reactive({
   copyIcon: 'i-ti-copy'
 })
 
-watch(
-  isSmallScreen,
-  (val) => {
-    if (val) screenFlag.value = true
-  },
-  { immediate: true }
-)
-
 watch(
   () => props.isIntersecting,
   async () => {
@@ -299,7 +253,7 @@ const openPlayground = (demo, open = true) => {
   const tinyTheme = templateModeState.isSaas ? 'saas' : currentThemeKey.value.split('-')[0]
   const openModeQuery = open ? '' : '&openMode=preview'
   // TODO: 目前mf只有Options写法，后续再放开compositon
-  const url = `${import.meta.env.VITE_PLAYGROUND_URL}?cmpId=${cmpId}&fileName=${props.demo.codeFiles[0]}&apiMode=${
+  const url = `${import.meta.env.VITE_PLAYGROUND_URL}?cmpId=${cmpId}&fileName=${demo.codeFiles[0]}&apiMode=${
     isMobileFirst.value ? 'Options' : apiModeState.apiMode
   }&mode=${templateModeState.mode}&theme=${tinyTheme}${openModeQuery}`
 
@@ -342,11 +296,6 @@ onBeforeUnmount(() => {
   padding: 20px 24px;
 }
 
-.is-mobile-first {
-  padding: 20px;
-  border: 1px solid #dcdfe6;
-}
-
 .demo-desc {
   font-size: 16px;
   line-height: 1.7em;
@@ -399,23 +348,6 @@ onBeforeUnmount(() => {
   .pc-demo-container {
     overflow: auto;
   }
-  .demo-mobile-first-container {
-    cursor: pointer;
-    width: 100%;
-    .is-mobile-first {
-      .demo-title {
-        width: 200px;
-        font-size: 18px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .demo-options {
-        top: 0px;
-        right: 0px;
-      }
-    }
-  }
 }
 
 .pc-demo-container {