@opentiny/vue-docs 2.1.8 → 2.1.10

package/demos/pc/app/watermark/basic-usage-composition-api.vue

@@ -0,0 +1,26 @@
+<template>
+  <tiny-watermark v-bind="params">
+    <div style="height: 500px"></div>
+  </tiny-watermark>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { Watermark as TinyWatermark } from '@opentiny/vue'
+
+const params = reactive({
+  width: 120,
+  height: 64,
+  content: ['Tiny Watermark', 'Happy Working'],
+  font: {
+    color: '#ccc',
+    fontSize: 25
+  },
+  gap: [100, 100],
+  offset: [20, 20],
+  rotate: -25,
+  zIndex: 9,
+  customClass: 'test',
+  interlaced: true
+})
+</script>

package/demos/pc/app/watermark/basic-usage.vue

@@ -0,0 +1,34 @@
+<template>
+  <tiny-watermark v-bind="params">
+    <div style="height: 500px"></div>
+  </tiny-watermark>
+</template>
+
+<script>
+import { Watermark } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyWatermark: Watermark
+  },
+  data() {
+    return {
+      params: {
+        width: 120,
+        height: 64,
+        content: ['Tiny Watermark', 'Happy Working'],
+        font: {
+          color: '#ccc',
+          fontSize: 25
+        },
+        gap: [100, 100],
+        offset: [20, 20],
+        rotate: -25,
+        zIndex: 9,
+        customClass: 'test',
+        interlaced: true
+      }
+    }
+  }
+}
+</script>

package/demos/pc/app/watermark/image-composition-api.vue

@@ -0,0 +1,28 @@
+<template>
+  <tiny-watermark v-bind="params">
+    <div style="height: 500px"></div>
+  </tiny-watermark>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { Watermark as TinyWatermark } from '@opentiny/vue'
+
+const params = reactive({
+  width: 136,
+  height: 120,
+  content: ['Tiny Watermark', 'Happy Working'],
+  image: import.meta.env.VITE_APP_BUILD_BASE_URL
+    ? `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
+    : 'https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/assets/tinyvue.svg',
+  font: {
+    color: '#ccc',
+    fontSize: 16
+  },
+  rotate: -22,
+  gap: [100, 100],
+  zIndex: 9,
+  customClass: 'test',
+  interlaced: true
+})
+</script>

package/demos/pc/app/watermark/image.vue

@@ -0,0 +1,36 @@
+<template>
+  <tiny-watermark v-bind="params">
+    <div style="height: 500px"></div>
+  </tiny-watermark>
+</template>
+
+<script>
+import { Watermark } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyWatermark: Watermark
+  },
+  data() {
+    return {
+      params: {
+        width: 136,
+        height: 120,
+        content: ['Tiny Watermark', 'Happy Working'],
+        image: import.meta.env.VITE_APP_BUILD_BASE_URL
+          ? `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
+          : 'https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/assets/tinyvue.svg',
+        font: {
+          color: '#ccc',
+          fontSize: 100
+        },
+        rotate: -22,
+        gap: [100, 100],
+        zIndex: 9,
+        customClass: 'test',
+        interlaced: true
+      }
+    }
+  }
+}
+</script>

package/demos/pc/app/watermark/webdoc/watermark.cn.md

@@ -0,0 +1,6 @@
+---
+title: Watermark 水印
+---
+# Watermark 水印
+
+<div>给页面的某个区域加上水印。</div>

package/demos/pc/app/watermark/webdoc/watermark.en.md

@@ -0,0 +1,11 @@
+---
+title: Watermark
+---
+# Watermark
+
+<div>Add specific text or patterns to the page.</div>
+
+
+---
+
+

package/demos/pc/app/watermark/webdoc/watermark.js

@@ -0,0 +1,134 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      'demoId': 'basic',
+      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example ' },
+      'codeFiles': ['basic-usage.vue']
+    },
+    {
+      'demoId': 'image',
+      'name': { 'zh-CN': '图片水印', 'en-US': 'Basic Usage Image' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example ' },
+      'codeFiles': ['image.vue']
+    }
+  ],
+  apis: [
+    {
+      'name': 'watermark',
+      'type': 'component',
+      'properties': [
+        {
+          'name': 'width',
+          'type': 'Number',
+          'defaultValue': '120',
+          'desc': {
+            'zh-CN': '水印的宽度, 最小宽度120',
+            'en-US': 'The width of the watermark, minimum width 120'
+          },
+          'demoId': 'basic'
+        },
+        {
+          'name': 'height',
+          'type': 'Number',
+          'defaultValue': '64',
+          'desc': {
+            'zh-CN': '水印的高度, 最小高度64',
+            'en-US': 'The height of the watermark, minimum height 120'
+          },
+          'demoId': 'basic'
+        },
+        {
+          'name': 'rotate',
+          'type': 'Number',
+          'defaultValue': '-22',
+          'desc': {
+            'zh-CN': '水印绘制时，旋转的角度，单位 °',
+            'en-US': 'When the watermark is drawn, the rotation Angle, unit ° '
+          },
+          'demoId': 'basic'
+        },
+        {
+          'name': 'zIndex',
+          'type': 'Number',
+          'defaultValue': '9',
+          'desc': {
+            'zh-CN': '追加的水印元素的 `z-index `',
+            'en-US': 'The z-index of the appended watermark element'
+          },
+          'demoId': 'basic'
+        },
+        {
+          'name': 'image',
+          'type': 'String',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '图片源，建议导出 2 倍或 3 倍图，优先级高 (支持 base64 格式),此属性高于content',
+            'en-US': 'Image source, it is recommended to export 2x or 3x image, high priority, higher content'
+          },
+          'demoId': 'image'
+        },
+        {
+          'name': 'content',
+          'type': 'String | String[]',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '水印文字内容，此属性低于image',
+            'en-US': 'Watermark text content, lower image'
+          },
+          'demoId': 'basic'
+        },
+        {
+          'name': 'font',
+          'type': 'Font',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': `文字样式,可配置字段如下{
+              color:'rgba(0,0,0,.15)',
+              fontSize:'16',
+              "fontWeight":'normal',
+              "fontFamily":'sans-serif',
+              "fontStyle":'normal'
+            }`,
+            'en-US': 'Text style'
+          },
+          'demoId': 'basic'
+        },
+        {
+          'name': 'gap',
+          'type': '[Number, Number] ',
+          'defaultValue': '[100, 100]',
+          'desc': {
+            'zh-CN': '水印之间的间距',
+            'en-US': 'The spacing between watermarks'
+          },
+          'demoId': 'basic'
+        },
+        {
+          'name': 'offset',
+          'type': '[Number, Number] ',
+          'defaultValue': '[20, 20] ',
+          'desc': {
+            'zh-CN': '水印距离容器左上角的偏移量，默认为`20 `',
+            'en-US': 'The offset of the watermark from the upper left corner of the container. '
+          },
+          'demoId': 'basic'
+        },
+        {
+          'name': 'interlaced',
+          'type': 'Boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '水印是否交错',
+            'en-US': 'Whether the watermark is interlaced'
+          },
+          'demoId': 'basic'
+        }
+      ],
+      'events': [],
+      'slots': []
+    }
+  ]
+}

package/demos/pc/menus.js

@@ -241,7 +241,8 @@ export const cmpMenus = [
       { 'nameCn': '全屏显示', 'name': 'Fullscreen', 'key': 'fullscreen' },
       { 'nameCn': '全局设置', 'name': 'ConfigProvider', 'key': 'config-provider' },
       { 'nameCn': '分割线', 'name': 'Divider', 'key': 'divider' },
-      { 'nameCn': '二维码', 'name': 'QrCode', 'key': 'qr-code' }
+      { 'nameCn': '二维码', 'name': 'QrCode', 'key': 'qr-code' },
+      { 'nameCn': '水印', 'name': 'Watermark', 'key': 'watermark' }
     ]
   }
 ]

package/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

package/env/.env.mobilealpha

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "dependencies": {
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -16,16 +16,16 @@
     "@playwright/test": "^1.29.2",
     "sortablejs": "1.15.0",
     "@opentiny/vue-repl": "^1.1.0",
-    "@opentiny/vue-common": "~3.11.0",
-    "@opentiny/vue": "~3.11.0",
-    "@opentiny/vue-theme": "~3.11.0",
-    "@opentiny/vue-icon-saas": "~3.11.0",
-    "@opentiny/vue-design-smb": "~3.11.0",
-    "@opentiny/vue-icon": "~3.11.0",
-    "@opentiny/vue-design-aurora": "~3.11.0",
-    "@opentiny/vue-theme-mobile": "~3.11.0",
+    "@opentiny/vue": "~3.12.0",
+    "@opentiny/vue-common": "~3.12.0",
+    "@opentiny/vue-icon-saas": "~3.12.0",
+    "@opentiny/vue-icon": "~3.12.0",
+    "@opentiny/vue-design-smb": "~3.12.0",
+    "@opentiny/vue-theme": "~3.12.0",
+    "@opentiny/vue-design-aurora": "~3.12.0",
+    "@opentiny/vue-theme-mobile": "~3.12.0",
     "@opentiny/vue-vite-import": "~1.1.5",
-    "@opentiny/vue-theme-saas": "~3.11.0"
+    "@opentiny/vue-theme-saas": "~3.12.0"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",

package/playground/App.vue

@@ -1,42 +1,60 @@
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, nextTick } from 'vue'
 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)
 const tinyMode = searchObj.get('mode')
 const tinyTheme = tinyMode === 'saas' ? 'aurora' : searchObj.get('theme')
+const isMobileFirst = tinyMode === 'mobile-first'
 
 const createImportMap = (version) => {
   const imports = {
-    '@opentiny/vue': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue.mjs`,
-    '@opentiny/vue-icon': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-icon.mjs`,
-    '@opentiny/vue-locale': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-locale.mjs`,
-    '@opentiny/vue-common': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`,
+    '@opentiny/vue': `${getRuntime(version)}tiny-vue.mjs`,
+    '@opentiny/vue-icon': `${getRuntime(version)}tiny-vue-icon.mjs`,
+    '@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`,
+    '@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`,
     '@opentiny/vue-theme/': `${cdnHost}/@opentiny/vue-theme@${version}/`,
     'sortablejs': `${cdnHost}/sortablejs@1.15.0/modular/sortable.esm.js`
   }
   if (['aurora', 'smb'].includes(tinyTheme)) {
     imports[`@opentiny/vue-design-${tinyTheme}`] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}@${version}/index.js`
   }
+  if (isMobileFirst) {
+    imports['@opentiny/vue-icon'] = `${getRuntime(version)}tiny-vue-icon-saas.mjs`
+  }
   return {
     imports
   }
 }
 
 const getTinyTheme = (version) => {
+  if (isMobileFirst) {
+    return `${getRuntime(version)}tailwind.css`
+  }
   let theme = tinyMode === 'saas' ? 'saas' : tinyTheme
   if (!['smb', 'default', 'aurora', 'saas'].includes(theme)) {
     theme = 'default'
@@ -65,9 +83,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: '垂直' }
@@ -81,24 +101,28 @@ const state = reactive({
 const designThemeMap = {
   aurora: 'tinyAuroraTheme',
   infinity: 'tinyInfinityTheme',
-  smb: 'tinySmbTheme',
+  smb: 'tinySmbTheme'
 }
 
 function setTinyDesign() {
   let importCode = ''
   let useCode = ''
+
+  if (isMobileFirst) {
+    useCode += 'app.provide("TinyMode", "mobile-first");\n'
+  }
   // 目前只有aurora和smb有design包
   if (['aurora', 'smb'].includes(tinyTheme)) {
     importCode += `import designConfig from '@opentiny/vue-design-${tinyTheme}';
-      import { design } from '@opentiny/vue-common';\n`,
-    useCode += 'app.provide(design.configKey, designConfig)\n'
+      import { design } from '@opentiny/vue-common';\n`
+    useCode += 'app.provide(design.configKey, designConfig);\n'
   }
 
   if (['aurora', 'infinity', 'smb'].includes(tinyTheme)) {
     const designTheme = designThemeMap[tinyTheme]
     importCode += `import TinyThemeTool from '@opentiny/vue-theme/theme-tool';
-      import { ${designTheme} } from '@opentiny/vue-theme/theme';\n`,
-    useCode += `const theme = new TinyThemeTool(${designTheme})\n`
+      import { ${designTheme} } from '@opentiny/vue-theme/theme';\n`
+    useCode += `const theme = new TinyThemeTool(${designTheme});\n`
   }
 
   state.previewOptions.customCode = {
@@ -107,11 +131,19 @@ 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))
+  insertStyleDom(version)
+}
 
-  setTimeout(() => {
+function insertStyleDom(version) {
+  nextTick(() => {
     if (!document.querySelector('iframe')) return
 
     const iframeWin = document.querySelector('iframe').contentWindow
@@ -119,8 +151,19 @@ function versionChange(version) {
     link.id = 'tiny-theme'
     link.rel = 'stylesheet'
     link.href = getTinyTheme(version)
-    iframeWin.document.head.append(link)
-  }, 300)
+    iframeWin.addEventListener('DOMContentLoaded', () => {
+      iframeWin.document.head.append(link)
+    })
+  })
+}
+
+function changeLayout(layout) {
+  localStorage.setItem(LAYOUT, layout)
+}
+
+function changeReserve(isReserve) {
+  insertStyleDom(state.selectVersion)
+  localStorage.setItem(LAYOUT_REVERSE, isReserve)
 }
 
 function getDemoName(name, apiMode) {
@@ -200,11 +243,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>
@@ -221,6 +272,7 @@ function share() {
     :preview-options="state.previewOptions"
     :clear-console="false"
     :layout="state.layout"
+    :layout-reverse="state.layoutReverse"
   ></Repl>
 </template>
 

package/src/App.vue

@@ -2,13 +2,18 @@
   <div class="hp100 of-hidden">
     <tiny-config-provider :design="designConfig">
       <router-view />
+      <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>
 </template>
 
 <script>
-import { defineComponent, reactive, computed, onMounted, toRefs } from 'vue'
-import { ConfigProvider } from '@opentiny/vue'
+import { defineComponent, onMounted, provide, ref } from 'vue'
+import { ConfigProvider, Modal } from '@opentiny/vue'
+import { iconClose } from '@opentiny/vue-icon'
 import { appData } from './tools'
 import useTheme from './tools/useTheme'
 
@@ -16,9 +21,13 @@ export default defineComponent({
   name: 'AppVue',
   props: [],
   components: {
-    TinyConfigProvider: ConfigProvider
+    TinyConfigProvider: ConfigProvider,
+    TinyModal: Modal,
+    TinyIconClose: iconClose()
   },
   setup() {
+    const previewUrl = ref(import.meta.env.VITE_PLAYGROUND_URL)
+    const modalSHow = ref(false)
     onMounted(() => {
       // 加载header
       const common = new window.TDCommon(['#header'], {
@@ -33,10 +42,32 @@ export default defineComponent({
       common.renderHeader()
     })
     const { designConfig } = useTheme()
+
+    provide('showPreview', (url) => {
+      previewUrl.value = url
+      modalSHow.value = true
+    })
     return {
       appData,
-      designConfig
+      designConfig,
+      previewUrl,
+      modalSHow
     }
   }
 })
 </script>
+
+<style scoped lang="less">
+.close-icon.tiny-svg {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.tiny-modal {
+  :deep(.tiny-modal__body) {
+    padding: 34px 0 0;
+  }
+}
+</style>

package/src/tools/useApiMode.js

@@ -5,7 +5,7 @@ const _modeKey = 'tiny-vue-api-mode'
 const _demoModeKey = 'tiny-vue-demo-mode'
 const apiModeState = reactive({
   apiMode: $local[_modeKey] || 'Options',
-  demoMode: $local[_demoModeKey] || 'default' // 示例展示： default:多示例， single:单示例
+  demoMode: $local[_demoModeKey] || 'single' // 示例展示： default:多示例， single:单示例
 })
 
 const apiModeFn = {