@opentiny/vue-docs 3.17.3 → 3.17.4

package/src/tools/appData.js

@@ -11,17 +11,14 @@ const appData = reactive({
   bpState: useMediaQuery([640, 1024, 1280]).matches // 3点4区间， bp0,bp1,bp2,bp3
 })
 const isZhCn = computed(() => appData.lang === ZH_CN_LANG)
-let appFn = {
-  toggleLang() {
-    let url = location.href
-    if (appData.lang === ZH_CN_LANG) {
-      url = location.href.replace(zhPath, enPath)
-    } else {
-      url = location.href.replace(enPath, zhPath)
+const appFn = {
+  toggleLang(name) {
+    if (name !== appData.lang) {
+      let url = location.href
+      url = location.href.replace(LANG_PATH_MAP[appData.lang], LANG_PATH_MAP[name])
+      appData.lang = name
+      location.replace(url)
     }
-    appData.lang = appData.lang === ZH_CN_LANG ? EN_US_LANG : ZH_CN_LANG
-    // router.push(url)
-    location.replace(url)
   },
   toggleTheme() {
     appData.theme = appData.theme === 'light' ? 'dark' : 'light'

package/src/tools/useApiMode.js

@@ -1,9 +1,11 @@
 import { reactive } from 'vue'
 import { $local } from './storage'
+import { appFn } from './appData'
 
 const _modeKey = 'tiny-vue-api-mode'
 const _demoModeKey = 'tiny-vue-demo-mode'
 const apiModeState = reactive({
+  localeMode: location.href.includes('en-US') ? 'enUS' : 'zhCN',
   apiMode: $local[_modeKey] || 'Composition', // 示例风格:  Options: 组合式; Composition: 选项式
   demoMode: $local[_demoModeKey] || 'default' // 示例展示： default:多示例， single:单示例
 })
@@ -12,6 +14,9 @@ const apiModeFn = {
   getDemoName: (name) => {
     return name.replace(/\.vue$/, `${apiModeState.apiMode === 'Options' ? '' : '-composition-api'}.vue`)
   },
+  changeLocaleMode: (name) => {
+    appFn.toggleLang(name)
+  },
   changeApiMode: (name) => {
     $local[_modeKey] = name
   },

package/src/tools/useStyleSettings.js

@@ -1,6 +1,22 @@
 /** 文档显示风格设置 */
 const getStyleSettings = (i18nByKey) => {
   const styleSettings = [
+    {
+      // 语言选择
+      name: 'localeMode',
+      defaultValue: 'zhCN',
+      title: i18nByKey('localeType'),
+      options: [
+        {
+          value: 'zhCN',
+          text: i18nByKey('zh-cn')
+        },
+        {
+          value: 'enUS',
+          text: i18nByKey('en-us')
+        }
+      ]
+    },
     {
       // 示例代码风格
       name: 'apiMode',

package/src/tools/useTheme.js

@@ -16,6 +16,17 @@ import {
   INFINITY_THEME,
   getKeyByValue
 } from '../const'
+import glaciers from '@/assets/images/glaciers.png'
+import glaciersIcon from '@/assets/images/glaciers-icon.png'
+
+import infinitely from '@/assets/images/Infinitely.png'
+import infinitelyIcon from '@/assets/images/Infinitely-icon.png'
+
+import oceanic from '@/assets/images/oceanic.png'
+import oceanicIcon from '@/assets/images/oceanic-icon.png'
+
+import starrySky from '@/assets/images/starry-sky.png'
+import starrySkyIcon from '@/assets/images/starry-sky-icon.png'
 
 const themeMap = {
   [DEFAULT_THEME]: null,
@@ -27,10 +38,34 @@ const themeMap = {
 const isEn = appData.lang === 'enUS'
 
 const themeData = [
-  { value: [DEFAULT_THEME], label: isEn ? 'Default Theme' : '默认主题' },
-  { value: [INFINITY_THEME], label: isEn ? 'Infinity Theme' : '无限主题' },
-  { value: [AURORA_THEME], label: isEn ? 'Aurora Theme' : 'Aurora 主题' },
-  { value: [SMB_THEME], label: isEn ? 'SMB Theme' : 'SMB 主题' }
+  {
+    value: [DEFAULT_THEME],
+    label: isEn ? 'Default Theme' : '冰川主题',
+    tips: isEn ? 'Accurate, Efficient, Distinct' : '精准、高效、清晰',
+    icon: glaciersIcon,
+    bgImage: glaciers
+  },
+  {
+    value: [SMB_THEME],
+    label: isEn ? 'Star Theme' : '星空主题',
+    tips: isEn ? 'Leading, Innovative, Reliable' : '领先、创新、信赖',
+    icon: starrySkyIcon,
+    bgImage: starrySky
+  },
+  {
+    value: [AURORA_THEME],
+    label: isEn ? 'Ocean Theme' : '海洋主题',
+    tips: isEn ? 'Simple, Agile, Delightful' : '简约、敏捷、愉悦',
+    icon: oceanicIcon,
+    bgImage: oceanic
+  },
+  {
+    value: [INFINITY_THEME],
+    label: isEn ? 'Infinity Theme' : '无限主题',
+    tips: isEn ? 'Creative, Scientific, Efficient' : '创造、科学、高效',
+    icon: infinitelyIcon,
+    bgImage: infinitely
+  }
 ]
 
 const designConfigMap = {

package/src/views/components/components.vue

@@ -150,7 +150,6 @@
                           class="api-table"
                           :data="tableData[oneGroup.name][key]"
                           :expand-config="apiExpandConf"
-                          :row-class-name="setCurrRowClass"
                           row-id="name"
                         >
                           <tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
@@ -242,6 +241,7 @@
 <script lang="jsx">
 import { defineComponent, reactive, computed, toRefs, watch, onMounted, ref, onUnmounted, nextTick } from 'vue'
 import { marked } from 'marked'
+import hljs from 'highlight.js'
 import { Anchor, ButtonGroup, Grid, GridColumn, Tabs, TabItem, Tooltip } from '@opentiny/vue'
 import { iconOuterLink } from '@opentiny/vue-icon'
 import debounce from '@opentiny/vue-renderless/common/deps/debounce'
@@ -497,7 +497,13 @@ export default defineComponent({
       Promise.all(promiseArr)
         .then(([mdData, jsData, apiData, faqData]) => {
           // 1、加载顶部md
-          state.cmpTopMd = marked(mdData)
+          state.cmpTopMd = marked(mdData, {
+            gfm: true,
+            highlight(code, language) {
+              const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
+              return hljs.highlight(code, { language: validLanguage }).value
+            }
+          })
 
           // 2、加载faq.md
           if (faqData) {
@@ -710,7 +716,7 @@ export default defineComponent({
 .docs-header {
   position: sticky;
   top: 0;
-  z-index: 200;
+  z-index: var(--docs-header-zindex);
   padding: var(--ti-common-space-4x) var(--ti-common-space-10x);
   background-color: #fff;
   box-shadow: var(--ti-common-space-3x) 0 var(--ti-common-space-5x) var(--ti-common-space-6) rgba(0, 0, 0, 0.06);
@@ -723,7 +729,7 @@ export default defineComponent({
   }
 
   .markdown-top-body {
-    z-index: 99;
+    z-index: var(--docs-markdown-top-body-zindex);
     font-size: var(--ti-common-font-size-1);
     transition: all ease-in-out 0.3s;
 
@@ -771,7 +777,7 @@ export default defineComponent({
     :deep(> .tiny-tabs__header) {
       position: sticky;
       top: 90px;
-      z-index: 100;
+      z-index: var(--docs-tabs-header-zindex);
       background-color: #fff;
 
       &::after {
@@ -791,7 +797,8 @@ export default defineComponent({
       }
     }
 
-    :deep(.tiny-tabs__content) {
+    & > :deep(.tiny-tabs__content) {
+      // 不能影响到tabs组件的样式
       margin: 0;
       overflow: visible;
     }
@@ -818,6 +825,7 @@ export default defineComponent({
       fill: #5e7ce0;
     }
   }
+
   &-name:has(+ .version-tip) {
     margin-right: 4px;
   }

package/src/views/components/demo.vue

@@ -43,7 +43,7 @@
           </tiny-tooltip>
         </div>
       </div>
-      <component :is="getDescMd(demo)" class="demo-desc" />
+      <component :is="getDescMd(demo)" class="demo-desc markdown-body" />
 
       <div v-if="isMobileFirst" class="pc-demo-container">
         <tiny-button @click="openPlayground(demo, false)">多端预览</tiny-button>
@@ -192,9 +192,9 @@ export default defineComponent({
         const tinyTheme = templateModeState.isSaas ? 'saas' : currentThemeKey.value.split('-')[1]
         const openModeQuery = open ? '' : '&openMode=preview'
         // TODO: 目前mf只有Options写法，后续再放开compositon
-        const url = `${import.meta.env.VITE_PLAYGROUND_URL}?cmpId=${cmpId}&fileName=${
-          demo.codeFiles[0]
-        }&apiMode=Options&mode=${templateModeState.mode}&theme=${tinyTheme}${openModeQuery}`
+        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}`
 
         if (open) {
           window.open(url)

package/src/views/components/float-settings.vue

@@ -5,69 +5,70 @@
     :style="settingsStyle"
   >
     <!-- 切换主题样式 -->
-    <tiny-dropdown trigger="click" :show-icon="false" @visible-change="(visible) => toggleMenuShow(visible, 'theme')">
-      <tiny-tooltip
-        :content="i18nByKey('changeTheme')"
-        :placement="isSettingsAside ? 'left' : 'right'"
-        popper-class="docs-tooltip"
-        effect="light"
-      >
+    <tiny-popover
+      width="404"
+      placement="left-end"
+      trigger="click"
+      :visible-arrow="false"
+      popper-class="theme-settings-popover"
+    >
+      <div class="theme-settings-menu">
+        <div class="theme-settings-title">{{ i18nByKey('changeTheme') }}</div>
+        <div
+          v-for="(item, index) in themeData"
+          :key="item.text + index"
+          :class="['theme-option-list', { 'is-active-popover': item.value === currentThemeKey }]"
+          :style="{ backgroundImage: 'url(' + item.bgImage + ')' }"
+          @click="themeItemClick(item)"
+        >
+          <div class="theme-option-list-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
+          <div>
+            <div class="theme-option-list-text">
+              {{ item.text }}
+            </div>
+            <div class="theme-option-list-tips">
+              {{ item.tips }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #reference>
         <div class="settings-btn theme-change-button">
-          <theme-settings-icon
-            :class="['settings-icon theme-settings-icon', { 'is-active': showThemeMenu }]"
-          ></theme-settings-icon>
+          <theme-settings-icon class="settings-icon theme-settings-icon"></theme-settings-icon>
         </div>
-      </tiny-tooltip>
-      <template #dropdown>
-        <tiny-dropdown-menu popper-class="opt-menu theme-settings-menu">
-          <div v-for="(item, index) in themeData" :key="index" class="theme-option-list">
-            <tiny-button
-              ghost
-              :class="['theme-option', { 'is-active': item.value === currentThemeKey }]"
-              @click="themeItemClick(item)"
-              >{{ item.text }}</tiny-button
-            >
-          </div>
-        </tiny-dropdown-menu>
       </template>
-    </tiny-dropdown>
+    </tiny-popover>
 
     <!-- demo风格设置 -->
-    <tiny-dropdown
+    <tiny-popover
       v-if="!templateModeState.isSaas"
-      trigger="click"
-      :show-icon="false"
-      @visible-change="(visible) => toggleMenuShow(visible, 'style')"
+      width="180"
+      placement="left-end"
+      trigger="manual"
+      :visible-arrow="false"
+      v-model="demoStyleVisible"
+      popper-class="opt-menu style-settings-menu theme-settings-popover"
     >
-      <tiny-tooltip
-        :content="i18nByKey('changeApiType')"
-        :placement="isSettingsAside ? 'left' : 'right'"
-        popper-class="docs-tooltip"
-        effect="light"
-      >
-        <div class="settings-btn style-settings-btn">
-          <style-settings-icon
-            :class="['settings-icon style-settings-icon', { 'is-active': showStyleMenu }]"
-          ></style-settings-icon>
+      <div v-for="(item, index) in styleSettings" :key="index" class="style-settings-item">
+        <p class="style-settings-title">{{ item.title }}</p>
+        <tiny-radio-group
+          v-model="apiModeState[item.name]"
+          class="style-settings-options-group"
+          @change="onSettingsChange(item.name)"
+        >
+          <tiny-radio v-for="option in item.options" :key="option" :label="option.value">{{ option.text }}</tiny-radio>
+        </tiny-radio-group>
+      </div>
+      <template #reference>
+        <div
+          class="settings-btn style-settings-btn"
+          @click="demoStyleVisible = !demoStyleVisible"
+          @blur="demoStyleVisible = false"
+        >
+          <style-settings-icon class="settings-icon style-settings-icon"></style-settings-icon>
         </div>
-      </tiny-tooltip>
-      <template #dropdown>
-        <tiny-dropdown-menu popper-class="opt-menu style-settings-menu">
-          <div v-for="(item, index) in styleSettings" :key="index" class="style-settings-item">
-            <p class="style-settings-title">{{ item.title }}</p>
-            <tiny-radio-group
-              v-model="apiModeState[item.name]"
-              class="style-settings-options-group"
-              @change="onSettingsChange(item.name)"
-            >
-              <tiny-radio v-for="option in item.options" :key="option" :label="option.value">{{
-                option.text
-              }}</tiny-radio>
-            </tiny-radio-group>
-          </div>
-        </tiny-dropdown-menu>
       </template>
-    </tiny-dropdown>
+    </tiny-popover>
 
     <!-- 返回顶部 -->
     <div v-show="showBackTop" @click="onBackTop">
@@ -87,7 +88,7 @@
 
 <script>
 import { defineComponent, reactive, toRefs, onMounted, onUnmounted, watch, nextTick, ref } from 'vue'
-import { Dropdown, DropdownMenu, Tooltip, Radio, RadioGroup, Button } from '@opentiny/vue'
+import { Tooltip, Radio, RadioGroup, Popover } from '@opentiny/vue'
 import { iconUpWard } from '@opentiny/vue-icon'
 import debounce from '@opentiny/vue-renderless/common/deps/debounce'
 import { i18nByKey, useApiMode, useTemplateMode } from '@/tools'
@@ -100,13 +101,11 @@ import StyleSettingsIcon from '@/assets/images/style-settings.svg'
 export default defineComponent({
   name: 'FloatSettings',
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
     TinyTooltip: Tooltip,
     TinyRadio: Radio,
     TinyRadioGroup: RadioGroup,
-    TinyButton: Button,
     IconUpWard: iconUpWard(),
+    TinyPopover: Popover,
     ThemeSettingsIcon,
     StyleSettingsIcon
   },
@@ -120,9 +119,8 @@ export default defineComponent({
     const isPlus = import.meta.env.VITE_APP_MODE === 'plus'
 
     const state = reactive({
+      demoStyleVisible: false,
       themeData: [],
-      showThemeMenu: false,
-      showStyleMenu: false,
       styleSettings: getStyleSettings(i18nByKey),
       settingsStyle: {
         bottom: DEFAULT_BOTTOM_VAL
@@ -133,7 +131,7 @@ export default defineComponent({
     })
 
     if (isPlus) {
-      state.styleSettings = state.styleSettings.filter((item) => item.defaultValue === 'default')
+      state.styleSettings = state.styleSettings.filter((item) => item.name !== 'apiMode')
       apiModeState.apiMode = 'Options'
     }
 
@@ -147,6 +145,10 @@ export default defineComponent({
       },
       onSettingsChange(modeType) {
         switch (modeType) {
+          case 'localeMode': {
+            apiModeFn.changeLocaleMode(apiModeState[modeType])
+            break
+          }
           case 'apiMode': {
             apiModeFn.changeApiMode(apiModeState[modeType])
             break
@@ -162,21 +164,16 @@ export default defineComponent({
       themeItemClick(node) {
         const val = node?.value || 'tiny-smb-theme'
         changeTheme(val)
-      },
-
-      toggleMenuShow(visible, type) {
-        if (type === 'theme') {
-          state.showThemeMenu = visible
-        } else if (type === 'style') {
-          state.showStyleMenu = visible
-        }
       }
     }
 
     const getThemeOptions = () => {
       const themeData = getThemeData().map((item) => ({
         value: item.value[0],
-        text: item.label
+        text: item.label,
+        tips: item.tips,
+        icon: item.icon,
+        bgImage: item.bgImage
       }))
       state.themeData = themeData
     }
@@ -261,7 +258,7 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   column-gap: var(--ti-common-space-3x);
-  z-index: 999;
+  z-index: var(--docs-float-settings-zindex);
   transition: all 0.3s linear;
 
   &.float-settings--aside {
@@ -306,10 +303,6 @@ export default defineComponent({
       width: var(--ti-common-size-4x);
       height: var(--ti-common-size-4x);
       color: #595959;
-
-      &.is-active {
-        color: var(--ti-common-color-primary-normal);
-      }
     }
   }
 }
@@ -320,13 +313,6 @@ export default defineComponent({
   border-radius: var(--ti-common-space-3x);
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
 
-  &.theme-settings-menu {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
   &.style-settings-menu {
     padding: 14px;
 
@@ -338,6 +324,7 @@ export default defineComponent({
         font-size: var(--ti-common-font-size-base);
         line-height: var(--ti-common-line-height-6);
         font-weight: 600;
+        color: #000000;
       }
 
       .style-settings-options-group {
@@ -357,25 +344,64 @@ export default defineComponent({
       }
     }
   }
+}
+.tiny-popover.tiny-popper.theme-settings-popover {
+  border-radius: 12px;
+  background-color: #ffffff;
+}
 
-  .theme-option-list {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 154px;
-
-    .theme-option {
-      display: inline-block;
-      width: 126px;
-      border: none;
-      border-radius: var(--ti-common-space-2x);
-
-      &.is-active {
-        background-color: rgba(0, 0, 0, 0.05);
-      }
-    }
+.theme-settings-menu {
+  width: 404px;
+  display: flex;
+  padding: 15px 32px;
+  flex-direction: column;
+  margin: 0;
+  .theme-settings-title {
+    height: 20px;
+    line-height: 20px;
+    color: #000000;
+    font-weight: 700;
+  }
+}
+.theme-option-list {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  background-color: aliceblue;
+  cursor: pointer;
+  margin-top: 20px;
+  width: 308px;
+  height: 64px;
+  border: 1px solid #ffffff;
+  border-radius: 8px;
+  background-repeat: no-repeat;
+  .theme-option-list-icon {
+    width: 32px;
+    height: 32px;
+    margin: 16px 24px;
+  }
+  .theme-option-list-text {
+    height: 22px;
+    line-height: 22px;
+    font-size: 14px;
+    color: #202e54;
+    font-weight: 700;
+  }
+  .theme-option-list-tips {
+    height: 20px;
+    line-height: 20px;
+    font-size: 14px;
+    color: #808080;
+    font-weight: 500;
   }
 }
+.theme-option-list:hover {
+  border-color: rgba(0, 0, 0, 0.05);
+  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
+}
+.is-active-popover {
+  border-color: #1476ff;
+}
 
 @media (max-width: 1279px) {
   .float-settings {

package/src/views/layout/layout.vue

@@ -386,7 +386,7 @@ export default defineComponent({
   }
   #layoutSider.showMenu {
     display: block !important;
-    z-index: 9;
+    z-index: var(--docs-layout-sider-zindex);
   }
 }
 </style>

package/vite.config.ts

@@ -111,7 +111,8 @@ export default defineConfig((config) => {
       __VUE_I18N_LEGACY_API__: true,
       __INTLIFY_PROD_DEVTOOLS__: false,
       __INTLIFY_JIT_COMPILATION__: false,
-      __INTLIFY_DROP_MESSAGE_COMPILER__: false
+      __INTLIFY_DROP_MESSAGE_COMPILER__: false,
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
     }
   }
 

package/demos/mobile-first/app/time-line-new/auto-slot.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="flex justify-between">
-    <tiny-time-line :data="data">
-      <template #left="data">
-        <div class="ml-1.5 -mt-1.5">
-          <tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
-        </div>
-        <span class="ml-2 inline-block text-xs leading-5 mb-6">
-          {{ data.slotScope.title }}
-        </span>
-      </template>
-    </tiny-time-line>
-
-    <tiny-time-line :data="data1">
-      <template #left="data1">
-        <div class="ml-1.5 -mt-1.5">
-          <tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
-        </div>
-        <span class="ml-2 inline-block text-xs leading-5 mb-6">
-          {{ data1.slotScope.title }}
-        </span>
-      </template>
-    </tiny-time-line>
-  </div>
-</template>
-
-<script>
-import { TimeLineNew, UserHead } from '@opentiny/vue'
-import { IconLoading } from '@opentiny/vue-icon'
-
-export default {
-  components: {
-    TinyTimeLine: TimeLineNew,
-    TinyUserHead: UserHead
-  },
-  data() {
-    return {
-      imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
-      data: [{ title: '节点标题1' }, { title: '节点标题2' }, { title: '节点标题3' }, { title: '节点标题4' }],
-      data1: [
-        { title: '节点标题1' },
-        { title: '节点标题2' },
-        { title: '节点标题3' },
-        { title: '节点标题4' },
-        { title: '节点标题5', autoColor: IconLoading() }
-      ]
-    }
-  }
-}
-</script>

package/demos/mobile-first/app/time-line-new/basic-usage.vue

@@ -1,23 +0,0 @@
-<template>
-  <tiny-time-line :data="data"></tiny-time-line>
-</template>
-
-<script>
-import { TimeLineNew } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeLine: TimeLineNew
-  },
-  data() {
-    return {
-      data: [
-        { name: '节点标题', time: '2022-11-11 00:01:30' },
-        { name: '节点标题', time: '2022-11-12 14:20:15' },
-        { name: '节点标题', time: '2022-11-14 20:45:50' },
-        { name: '节点标题', time: '2022-11-14 20:45:50' }
-      ]
-    }
-  }
-}
-</script>

package/demos/mobile-first/app/time-line-new/fold-time.vue

@@ -1,29 +0,0 @@
-<template>
-  <tiny-time-line :data="data" vertical></tiny-time-line>
-</template>
-
-<script>
-import { TimeLineNew } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeLine: TimeLineNew
-  },
-  data() {
-    return {
-      active: 1,
-      data: [
-        { name: '节点标题', time: '2019-11-11 00:01:30' },
-        { name: '节点标题', time: '2019-11-12 14:20:15' },
-        { name: '节点标题', time: '2019-11-14 20:45:50' },
-        { name: '节点标题', time: '2019-11-11 00:01:30' },
-        { name: '节点标题', time: '2019-11-12 14:20:15' },
-        { name: '节点标题', time: '2019-11-14 20:45:50' },
-        { name: '节点标题', time: '2019-11-11 00:01:30' },
-        { name: '节点标题', time: '2019-11-12 14:20:15' },
-        { name: '节点标题', time: '2019-11-14 20:45:50' }
-      ]
-    }
-  }
-}
-</script>