feat(sites): add saas playground (#893)

examples/sites/env/.env.innersaas

@@ -5,4 +5,4 @@ VITE_TINY_THEME='saas'
 # 官网应用类型：pc / mobile / mobile-first
 VITE_APP_MODE='pc'
 VITE_APP_BUILD_BASE_URL=https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tiny-vue-saas/${staticReleaseVersion}/
-VITE_PLAYGROUND_URL=/vue-playground
+VITE_PLAYGROUND_URL=/vue-saas-playground

examples/sites/playground/App.vue

@@ -4,16 +4,26 @@ import { Repl, useStore, File } from '@opentiny/vue-repl'
 import '@opentiny/vue-repl/dist/style.css'
 
 import Editor from '@vue/repl/codemirror-editor'
-import { ButtonGroup as TinyButtonGroup, Select as TinySelect, Option as TinyOption, Notify } from '@opentiny/vue'
+import {
+  ButtonGroup as TinyButtonGroup,
+  Select as TinySelect,
+  Option as TinyOption,
+  Switch as TinySwitch,
+  Notify
+} from '@opentiny/vue'
 import { staticDemoPath, getWebdocPath } from '@/views/components/cmpConfig'
 import { fetchDemosFile } from '@/tools/utils'
 import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
+const VERSION = 'tiny-vue-version'
+const LAYOUT = 'playground-layout'
+const LAYOUT_REVERSE = 'playground-layout-reverse'
+
 const versions = ['3.11', '3.10', '3.9', '3.8']
-const latestVersion = versions[0]
-const cdnHost = window.localStorage.getItem('setting-cdn')
+const latestVersion = localStorage.getItem(VERSION) || versions[0]
+const cdnHost = localStorage.getItem('setting-cdn')
 const getRuntime = (version) => `${cdnHost}/@opentiny/vue@${version}/runtime/`
 
 const searchObj = new URLSearchParams(location.search)
@@ -74,9 +84,11 @@ const store = new useStore({
   }
 })
 
+// repl 属性
 const state = reactive({
-  // repl 属性
-  layout: 'horizon',
+  layout: localStorage.getItem(LAYOUT) || 'horizon',
+  // 默认为反转，所以需要判断是否为'false'后取反
+  layoutReverse: !(localStorage.getItem(LAYOUT_REVERSE) === 'false'),
   layoutOptions: [
     { value: 'horizon', text: '水平' },
     { value: 'vertical', text: '垂直' }
@@ -120,6 +132,11 @@ function setTinyDesign() {
   }
 }
 
+function selectVersion(version) {
+  versionChange(version)
+  localStorage.setItem(VERSION, version)
+}
+
 function versionChange(version) {
   const importMap = createImportMap(version)
   store.state.files['import-map.json'] = new File('', JSON.stringify(importMap))
@@ -138,6 +155,14 @@ function versionChange(version) {
   })
 }
 
+function changeLayout(layout) {
+  localStorage.setItem(LAYOUT, layout)
+}
+
+function changeReserve(isReserve) {
+  localStorage.setItem(LAYOUT_REVERSE, isReserve)
+}
+
 function getDemoName(name, apiMode) {
   return name.replace(/\.vue$/, `${apiMode === 'Options' ? '' : '-composition-api'}.vue`)
 }
@@ -215,11 +240,19 @@ function share() {
     <div>
       <span class="ml20">
         布局方向:
-        <tiny-button-group :data="state.layoutOptions" v-model="state.layout"></tiny-button-group>
+        <tiny-button-group
+          :data="state.layoutOptions"
+          v-model="state.layout"
+          @change="changeLayout"
+        ></tiny-button-group>
+      </span>
+      <span class="ml20">
+        布局反转:
+        <tiny-switch v-model="state.layoutReverse" mini @change="changeReserve"></tiny-switch>
       </span>
       <span class="ml20">
         OpenTiny Vue 版本:
-        <tiny-select v-model="state.selectVersion" @change="versionChange" style="width: 150px">
+        <tiny-select v-model="state.selectVersion" @change="selectVersion" style="width: 150px">
           <tiny-option v-for="item in state.versions" :key="item.value" :label="item.value" :value="item.value">
           </tiny-option>
         </tiny-select>
@@ -236,6 +269,7 @@ function share() {
     :preview-options="state.previewOptions"
     :clear-console="false"
     :layout="state.layout"
+    :layout-reverse="state.layoutReverse"
   ></Repl>
 </template>
 

examples/sites/src/App.vue

@@ -2,9 +2,9 @@
   <div class="hp100 of-hidden">
     <tiny-config-provider :design="designConfig">
       <router-view />
-      <tiny-modal v-show="visible" :show-header="false" :show-footer="false" v-model="modalSHow" fullscreen>
-        <tiny-icon-close class="close-icon" @click="visible = !visible"></tiny-icon-close>
-        <iframe v-if="visible" width="100%" height="100%" :src="previewUrl" frameborder="0"></iframe>
+      <tiny-modal :show-header="false" :show-footer="false" v-model="modalSHow" width="1400px" height="900px" resize>
+        <tiny-icon-close class="close-icon" @click="modalSHow = false"></tiny-icon-close>
+        <iframe v-if="modalSHow" width="100%" height="100%" :src="previewUrl" frameborder="0"></iframe>
       </tiny-modal>
     </tiny-config-provider>
   </div>
@@ -26,7 +26,6 @@ export default defineComponent({
     TinyIconClose: iconClose()
   },
   setup() {
-    const visible = ref(false)
     const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
     const modalSHow = ref(false)
     onMounted(() => {
@@ -41,18 +40,16 @@ export default defineComponent({
         }
       })
       common.renderHeader()
-      modalSHow.value = true
     })
     const { designConfig } = useTheme()
 
     provide('showPreview', (url) => {
       previewUrl.value = url
-      visible.value = true
+      modalSHow.value = true
     })
     return {
       appData,
       designConfig,
-      visible,
       previewUrl,
       modalSHow
     }
@@ -66,6 +63,7 @@ export default defineComponent({
   right: 10px;
   top: 10px;
   font-size: 16px;
+  cursor: pointer;
 }
 .tiny-modal {
   :deep(.tiny-modal__body) {

packages/theme-saas/src/theme-tool.js

@@ -11,7 +11,6 @@
  */
 
 import definedComponents from './theme.config'
-import packageJson from '../package.json'
 
 /**
  *  TinyVue主题切换类 负责CSS变量主题的装卸，主题元数据转换成主题数据
@@ -76,7 +75,6 @@ export default class TinyThemeTool {
     this.contentElement.textContent = this.formatCSSVariables(currentTheme.data)
 
     this.contentElement.setAttribute('tiny-theme', this.currentTheme.id)
-    this.contentElement.setAttribute('version', packageJson.version)
   }
 
   // 通过 `组件css变量`，来推导出组件名： 从 ti-checkbox-button-bg-color， 推导出 checkbox-button

packages/theme/src/theme-tool.js

@@ -11,7 +11,6 @@
  */
 
 import definedComponents from './theme.config'
-import packageJson from '../package.json'
 
 /**
  *  TinyVue主题切换类 负责CSS变量主题的装卸，主题元数据转换成主题数据
@@ -74,7 +73,6 @@ export default class TinyThemeTool {
     }
     this.contentElement.textContent = this.formatCSSVariables(currentTheme.data)
     this.contentElement.setAttribute('tiny-theme', this.currentTheme.id)
-    this.contentElement.setAttribute('version', packageJson.version)
   }
 
   // 通过 `组件css变量`，来推导出组件名： 从 ti-checkbox-button-bg-color， 推导出 checkbox-button