diff --git a/examples/sites/env/.env.innersaas b/examples/sites/env/.env.innersaas index 909bc999c..22303db3c 100644 --- a/examples/sites/env/.env.innersaas +++ b/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 \ No newline at end of file +VITE_PLAYGROUND_URL=/vue-saas-playground \ No newline at end of file diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue index 2a5395941..822df9137 100644 --- a/examples/sites/playground/App.vue +++ b/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() {
布局方向: - + + + + 布局反转: + OpenTiny Vue 版本: - + @@ -236,6 +269,7 @@ function share() { :preview-options="state.previewOptions" :clear-console="false" :layout="state.layout" + :layout-reverse="state.layoutReverse" > diff --git a/examples/sites/src/App.vue b/examples/sites/src/App.vue index 6b468a91d..f9c314ea6 100644 --- a/examples/sites/src/App.vue +++ b/examples/sites/src/App.vue @@ -2,9 +2,9 @@
- - - + + +
@@ -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) { diff --git a/packages/theme-saas/src/qr-code/index.less b/packages/theme-saas/src/qr-code/index.less new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-saas/src/theme-tool.js b/packages/theme-saas/src/theme-tool.js index 5ab56a498..2d9dad10f 100644 --- a/packages/theme-saas/src/theme-tool.js +++ b/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 diff --git a/packages/theme-saas/src/watermark/index.less b/packages/theme-saas/src/watermark/index.less new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme/src/theme-tool.js b/packages/theme/src/theme-tool.js index b1475be27..74f1aedd8 100644 --- a/packages/theme/src/theme-tool.js +++ b/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