@opentiny/vue-docs 3.16.2 → 3.17.0

package/src/views/components/demo.vue

@@ -1,11 +1,17 @@
 <template>
-  <div :id="demo.demoId" class="ti-b-a ti-br-sm ti-wp100" :class="currDemoId === demo.demoId ? 'b-a-success' : ''">
-    <div class="ti-px24 ti-py20">
-      <!-- DEMO 的标题 + 说明desc+  示例wcTag -->
-      <div class="ti-f-r ti-f-pos-between ti-f-box-end ti-pb20">
-        <div class="ti-f18 ti-cur-hand">{{ demo.name[langKey] }}</div>
-        <div>
-          <tiny-tooltip placement="top" :append-to-body="false" :content="copyTip">
+  <div :id="demo.demoId" class="ti-br-sm ti-wp100" :class="currDemoId === demo.demoId ? 'b-a-success is-current' : ''">
+    <div class="demo-content">
+      <!-- DEMO 的标题 + 说明desc + 示例wcTag -->
+      <div class="ti-f-r ti-f-pos-between ti-f-box-end">
+        <div class="demo-title">{{ demo.name[langKey] }}</div>
+        <div class="demo-options">
+          <tiny-tooltip
+            placement="top"
+            effect="light"
+            popper-class="docs-tooltip"
+            :append-to-body="false"
+            :content="copyTip"
+          >
             <i
               :class="copyIcon"
               class="h:c-success ti-w16 ti-h16 ti-cur-hand"
@@ -15,6 +21,8 @@
           </tiny-tooltip>
           <tiny-tooltip
             placement="top"
+            effect="light"
+            popper-class="docs-tooltip"
             :append-to-body="false"
             :content="demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode')"
           >
@@ -24,12 +32,18 @@
               @click="toggleDemoCode(demo)"
             />
           </tiny-tooltip>
-          <tiny-tooltip placement="top" :append-to-body="false" :content="i18nByKey('playground')">
+          <tiny-tooltip
+            placement="top"
+            effect="light"
+            popper-class="docs-tooltip"
+            :append-to-body="false"
+            :content="i18nByKey('playground')"
+          >
             <i class="i-ti-playground ml8 h:c-success ti-w16 ti-h16 ti-cur-hand" @click="openPlayground(demo)" />
           </tiny-tooltip>
         </div>
       </div>
-      <component :is="getDescMd(demo)" class="ti-mb16 ti-f14" />
+      <component :is="getDescMd(demo)" class="demo-desc" />
 
       <div v-if="isMobileFirst" class="pc-demo-container">
         <tiny-button @click="openPlayground(demo, false)">多端预览</tiny-button>
@@ -46,13 +60,16 @@
       </div>
     </div>
     <!-- demo 打开后的示例代码  细滚动时，width:fit-content; -->
-    <div v-if="demo.isOpen" class="ti-px24 ti-py20 ti-b-t-lightless">
-      <div>
+    <div v-if="demo.isOpen" class="ti-px24 ti-py20 ti-b-t-lightless demo-code">
+      <template v-if="files?.length">
         <tiny-tabs v-model="tabValue" class="code-tabs">
           <tiny-tab-item v-for="(file, idx) in files" :key="file.fileName" :name="'tab' + idx" :title="file.fileName">
             <async-highlight :code="file.code"></async-highlight>
           </tiny-tab-item>
         </tiny-tabs>
+      </template>
+      <div v-else-if="files[0]">
+        <async-highlight :code="files[0].code"></async-highlight>
       </div>
     </div>
   </div>
@@ -63,7 +80,7 @@ import { defineComponent, reactive, computed, toRefs, shallowRef, onMounted, wat
 import { i18nByKey, getWord } from '@/i18n'
 import { $split, appData, fetchDemosFile } from '@/tools'
 import { Tooltip as TinyTooltip, Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
-import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from './cmpConfig'
+import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from './cmp-config'
 import { router } from '@/router.js'
 import demoConfig from '@demos/config.js'
 import { useApiMode, useTemplateMode } from '@/tools'
@@ -74,7 +91,7 @@ const { apiModeState, apiModeFn } = useApiMode()
 
 export default defineComponent({
   name: 'Demo',
-  props: ['demo'],
+  props: ['demo', 'currDemoId'],
   components: {
     TinyTooltip,
     TinyTabs,
@@ -119,15 +136,6 @@ export default defineComponent({
       tabValue: 'tab0',
       cmpId: router.currentRoute.value.params.cmpId,
       langKey: getWord('zh-CN', 'en-US'),
-      currDemoId: computed(() => {
-        let hash = router.currentRoute.value.hash?.slice(1)
-
-        // 兼容/#hashName这种模式
-        if (hash.includes('/')) {
-          hash = hash.slice(1)
-        }
-        return hash
-      }),
       copyTip: i18nByKey('copyCode'),
       copyIcon: 'i-ti-copy'
     })
@@ -238,10 +246,14 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
+.is-current {
+  padding: var(--ti-common-space-5x) var(--ti-common-space-6x);
+}
+
 .demo-desc {
   font-size: 16px;
   line-height: 1.7em;
-  margin: 12px 0;
+  margin: var(--ti-common-space-2x) 0 var(--ti-common-space-6x);
 
   :deep(code) {
     color: #476582;
@@ -297,12 +309,42 @@ export default defineComponent({
 .pc-demo-container {
   display: flex;
   flex-direction: column;
+  background: #fafafa;
+  padding: var(--ti-common-space-8x) var(--ti-common-space-6x) calc(var(--ti-common-space-base) * 12);
 
   .pc-demo {
     flex: 1;
   }
 }
 
+.demo-content {
+  position: relative;
+
+  .demo-title {
+    font-size: 20px;
+    color: #191919;
+    font-weight: bold;
+  }
+
+  .demo-desc {
+    margin-bottom: var(--ti-common-size-4x);
+    font-size: var(--ti-common-font-size-1);
+    color: #595959;
+    line-height: 30px;
+  }
+
+  .demo-options {
+    height: var(--ti-common-size-4x);
+    position: absolute;
+    right: var(--ti-common-space-8x);
+    bottom: var(--ti-common-space-4x);
+  }
+}
+
+.demo-code {
+  border: 1px solid #efeff4;
+}
+
 .phone-container {
   margin: auto;
   width: 395px;
@@ -334,6 +376,5 @@ export default defineComponent({
 .code-preview-box {
   overflow: auto;
   padding: 20px 5px;
-  background-color: #f5f6f8;
 }
 </style>

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

@@ -0,0 +1,385 @@
+<template>
+  <div
+    ref="floatSettings"
+    :class="['float-settings', { 'float-settings--aside': isSettingsAside }]"
+    :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"
+      >
+        <div class="settings-btn theme-change-button">
+          <theme-settings-icon
+            :class="['settings-icon theme-settings-icon', { 'is-active': showThemeMenu }]"
+          ></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>
+
+    <!-- demo风格设置 -->
+    <tiny-dropdown
+      v-if="!templateModeState.isSaas"
+      trigger="click"
+      :show-icon="false"
+      @visible-change="(visible) => toggleMenuShow(visible, 'style')"
+    >
+      <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>
+      </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>
+
+    <!-- 返回顶部 -->
+    <div v-show="showBackTop" @click="onBackTop">
+      <tiny-tooltip
+        :content="i18nByKey('backTop')"
+        :placement="isSettingsAside ? 'left' : 'right'"
+        popper-class="docs-tooltip"
+        effect="light"
+      >
+        <div class="settings-btn back-top-btn">
+          <icon-up-ward class="settings-icon"></icon-up-ward>
+        </div>
+      </tiny-tooltip>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, reactive, toRefs, onMounted, onUnmounted, watch, nextTick, ref } from 'vue'
+import { Dropdown, DropdownMenu, Tooltip, Radio, RadioGroup, Button } from '@opentiny/vue'
+import { iconUpWard } from '@opentiny/vue-icon'
+import debounce from '@opentiny/vue-renderless/common/deps/debounce'
+import { i18nByKey, useApiMode, useTemplateMode } from '@/tools'
+import useTheme from '@/tools/useTheme'
+import { router } from '@/router'
+import useStyleSettings from '@/tools/useStyleSettings'
+import ThemeSettingsIcon from '@/assets/images/theme-settings.svg'
+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(),
+    ThemeSettingsIcon,
+    StyleSettingsIcon
+  },
+  setup() {
+    const DEFAULT_BOTTOM_VAL = '10vh'
+    const { getThemeData, changeTheme, currentThemeKey } = useTheme()
+    const { apiModeState, apiModeFn } = useApiMode()
+    const { getStyleSettings } = useStyleSettings()
+    const { templateModeState } = useTemplateMode()
+    const floatSettings = ref(null)
+    const isPlus = import.meta.env.VITE_APP_MODE === 'plus'
+
+    const state = reactive({
+      themeData: [],
+      showThemeMenu: false,
+      showStyleMenu: false,
+      styleSettings: getStyleSettings(i18nByKey),
+      settingsStyle: {
+        bottom: DEFAULT_BOTTOM_VAL
+      },
+      showBackTop: false, // 是否显示返回顶部按钮
+      initBottomVal: null, // 初始底部偏移
+      isSettingsAside: false // 是否贴边
+    })
+
+    if (isPlus) {
+      state.styleSettings = state.styleSettings.filter((item) => item.defaultValue === 'default')
+      apiModeState.apiMode = 'Options'
+    }
+
+    const funcs = {
+      onBackTop() {
+        document.getElementById('doc-layout').scrollTo({
+          top: 0,
+          left: 0,
+          behavior: 'smooth'
+        })
+      },
+      onSettingsChange(modeType) {
+        switch (modeType) {
+          case 'apiMode': {
+            apiModeFn.changeApiMode(apiModeState[modeType])
+            break
+          }
+          case 'demoMode': {
+            apiModeFn.changeDemoMode(apiModeState[modeType])
+            break
+          }
+        }
+      },
+
+      // 主题切换功能
+      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
+      }))
+      state.themeData = themeData
+    }
+
+    const setScrollListener = () => {
+      nextTick(() => {
+        const docLayout = document.getElementById('doc-layout')
+        const nav = document.querySelector('.nav')
+        if (docLayout) {
+          docLayout.onscroll = debounce(100, false, () => {
+            const {
+              scrollTop: layoutScrollTop,
+              scrollHeight: layoutScrollHeight,
+              clientHeight: layoutHeight
+            } = docLayout
+            const headerHeight = docLayout.querySelector('header')?.clientHeight || 0
+            const footerHeight = docLayout.querySelector('#footer')?.clientHeight || 0
+            const footerTop = footer.getBoundingClientRect().top
+            const navHeight = nav?.clientHeight || 0
+            const currSettingsBottom = parseInt(window.getComputedStyle(floatSettings.value).getPropertyValue('bottom'))
+            const footerVisibleHeight = footerHeight - (layoutScrollHeight - layoutScrollTop - layoutHeight)
+
+            state.showBackTop = layoutScrollTop > 500
+            state.showSettings = footerTop - navHeight - headerHeight > 220
+
+            if (!state.initBottomVal) {
+              state.initBottomVal = currSettingsBottom
+            }
+            if (footerVisibleHeight > state.initBottomVal - 40) {
+              state.settingsStyle.bottom = `${footerVisibleHeight + 20}px`
+            } else {
+              state.settingsStyle.bottom = DEFAULT_BOTTOM_VAL
+            }
+          })
+        }
+      })
+    }
+
+    const removeScrollListener = () => {
+      const docLayout = document.getElementById('doc-layout') || {}
+      docLayout.onscroll = null
+    }
+
+    watch(
+      () => router.currentRoute.value,
+      (newVal) => {
+        const { path } = newVal || {}
+        state.isSettingsAside = ['overview', 'docs'].find((i) => path.includes(i))
+      },
+      {
+        immediate: true
+      }
+    )
+
+    onMounted(() => {
+      getThemeOptions()
+      setScrollListener()
+    })
+
+    onUnmounted(() => {
+      removeScrollListener()
+    })
+
+    return {
+      ...toRefs(state),
+      ...funcs,
+      templateModeState,
+      i18nByKey,
+      apiModeState,
+      currentThemeKey,
+      floatSettings
+    }
+  }
+})
+</script>
+
+<style lang="less">
+.float-settings {
+  position: fixed;
+  right: 200px;
+  height: 140px;
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--ti-common-space-3x);
+  z-index: 999;
+  transition: all 0.3s linear;
+
+  &.float-settings--aside {
+    right: var(--ti-common-size-6x);
+  }
+
+  .tiny-dropdown__trigger .tiny-dropdown__title {
+    line-height: 1;
+    margin-right: 0;
+  }
+
+  .settings-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ti-common-size-9x);
+    height: var(--ti-common-size-9x);
+    margin-bottom: var(--ti-common-space-2x);
+    border: 1px solid var(--ti-common-color-line-dividing);
+    border-radius: var(--ti-common-space-3x);
+    background-color: var(--ti-common-color-bg-white-normal);
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
+
+      .settings-icon {
+        color: var(--ti-common-color-primary-normal);
+        fill: var(--ti-common-color-primary-normal);
+      }
+    }
+
+    &.style-settings-btn {
+      margin-bottom: var(--ti-common-space-6x);
+    }
+
+    &.back-top-btn {
+      margin-bottom: 0;
+    }
+
+    .settings-icon {
+      width: var(--ti-common-size-4x);
+      height: var(--ti-common-size-4x);
+      color: #595959;
+
+      &.is-active {
+        color: var(--ti-common-color-primary-normal);
+      }
+    }
+  }
+}
+
+.opt-menu {
+  width: 154px;
+  padding: var(--ti-common-size-3x) 0;
+  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;
+
+    .style-settings-item {
+      padding-left: var(--ti-common-space-3x);
+
+      .style-settings-title {
+        margin-bottom: 2px;
+        font-size: var(--ti-common-font-size-base);
+        line-height: var(--ti-common-line-height-6);
+        font-weight: 600;
+      }
+
+      .style-settings-options-group {
+        padding-left: var(--ti-common-space-base);
+        margin-bottom: var(--ti-common-space-6);
+        display: flex;
+        flex-direction: column;
+
+        .tiny-radio .tiny-radio__label {
+          font-size: var(--ti-common-font-size-base);
+          line-height: var(--ti-common-line-height-6);
+        }
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+
+  .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);
+      }
+    }
+  }
+}
+
+@media (max-width: 1279px) {
+  .float-settings {
+    right: var(--ti-common-space-3x);
+  }
+}
+</style>

package/src/views/docs/docs.vue

@@ -1,20 +1,18 @@
 <template>
-  <div>
-    <div class="ti-f-r ti-pt48 ti-pl48 ti-pr48">
-      <component id="doc_wrap" :is="docCmp" class="ti-w0 ti-fi-1" />
-      <!-- 目录列表 TODO: 需要锚点组件配置整改，处理id中的特殊字符 -->
-      <!-- <div v-if="anchorLinks.length > 0" class="docs-page-anchor catalog w128 sticky top32 ml24">
+  <div class="ti-f-r ti-pt48 ti-pl48 ti-pr48 docs-container">
+    <component id="doc_wrap" :is="docCmp" class="ti-w0 ti-fi-1" />
+    <!-- 目录列表 TODO: 需要锚点组件配置整改，处理id中的特殊字符 -->
+    <!-- <div v-if="anchorLinks.length > 0" class="docs-page-anchor catalog w128 sticky top32 ml24">
         <tiny-anchor :is-affix="true" :links="anchorLinks"> </tiny-anchor>
       </div> -->
-    </div>
-    <div id="footer"></div>
   </div>
+  <div id="footer"></div>
 </template>
 
 <script setup>
-import { ref, nextTick, watch, onMounted, computed, shallowRef } from 'vue'
+import { ref, nextTick, watch, onMounted, shallowRef } from 'vue'
 import { getWord } from '@/tools'
-import docMDs, { transformIdSelector } from './docConfig.js'
+import docMDs from './docConfig.js'
 import { router } from '@/router.js'
 
 const isOpen = import.meta.env.VITE_BUILD_TARGET === 'open'
@@ -53,17 +51,22 @@ onMounted(() => {
   const common = new window.TDCommon(['#footer'], {})
   common.renderFooter()
 })
-
-const anchorLinks = computed(() => {
-  return catalog.value.map((cat) => ({
-    key: cat.id,
-    title: cat.text,
-    link: `#${transformIdSelector(cat.id)}`
-  }))
-})
 </script>
 
 <style lang="less">
+.docs-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 120px;
+
+  #doc_wrap {
+    flex: 1;
+    min-width: var(--layout-content-main-min-width);
+    max-width: var(--layout-content-main-max-width);
+  }
+}
+
 .docs-page-anchor {
   .tiny-anchor__affix {
     overflow-y: auto;
@@ -80,6 +83,7 @@ const anchorLinks = computed(() => {
     }
   }
 }
+
 .catalog {
   height: calc(100vh - 150px);
   overflow: hidden;