fix(sites): fix console warning (#1042)
* fix(sites): fix console warning * fix(sites): fix console warning
This commit is contained in:
gimmyhehe
GitHub
parent
9065b867aa
commit
26fd4df6ab
|
|
@ -96,10 +96,10 @@ If you want to control the `css` variable through `js`, you can do this:
|
|||
```js
|
||||
const el = document.documentElement
|
||||
|
||||
//Obtain the CSS variable.
|
||||
// Obtain the CSS variable.
|
||||
getComputedStyle(el).getPropertyValue('--ti-base-color-white')
|
||||
|
||||
//Set the CSS variable.
|
||||
// Set the CSS variable.
|
||||
el.style.setProperty('--ti-base-color-white', '#fefefe')
|
||||
```
|
||||
|
||||
|
|
@ -115,11 +115,15 @@ Replace all the old variable names in the `src` directory in the project as an e
|
|||
|
||||
Step 1: Click to download the mapping table `newVars.json` and the replacement script `replaceVar.js`.
|
||||
|
||||
<a :href="$pub('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json files</a> and <a :href="$pub('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js files</a>
|
||||
<script setup>
|
||||
import { pubUrl } from '@/tools'
|
||||
</script>
|
||||
|
||||
<a :href="pubUrl('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json files</a> and <a :href="pubUrl('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js files</a>
|
||||
|
||||
Step 2: Place `newVars.json` and `replaceVar.js` in the root directory of the project, which is at the same level as the src directory.
|
||||
|
||||
<img src="@demos/resource/theme-demo.png" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
|
||||
<img :src="pubUrl('@demos/resource/theme-demo.png')" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
|
||||
|
||||
Step 3: Run the following command in the root directory of the project:
|
||||
|
||||
|
|
|
|||
|
|
@ -47,7 +47,10 @@ resolve: {
|
|||
|
||||
```js
|
||||
import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
|
||||
import { tinySmbTheme } from '@opentiny/vue-theme/theme' // 导入主题
|
||||
|
||||
import { tinySmbTheme } from '@opentiny/vue-theme/theme'
|
||||
|
||||
// 导入主题
|
||||
|
||||
new TinyThemeTool(tinySmbTheme, 'tinyStyleSheetId') // 初始化主题
|
||||
```
|
||||
|
|
@ -162,11 +165,15 @@ el.style.setProperty('--ti-base-color-white', '#fefefe')
|
|||
|
||||
步骤一、点击下载新旧变量的映射表`newVars.json`和替换脚本`replaceVar.js`
|
||||
|
||||
<a :href="$pub('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json 文件</a> 和 <a :href="$pub('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js 文件</a>
|
||||
<script setup>
|
||||
import { pubUrl } from '@/tools'
|
||||
</script>
|
||||
|
||||
<a :href="pubUrl('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json 文件</a> 和 <a :href="pubUrl('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js 文件</a>
|
||||
|
||||
步骤二、将 `newVars.json` 和 `replaceVar.js` 放到项目根目录下，与 src 目录同级；
|
||||
|
||||
<img src="@demos/resource/theme-demo.png" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
|
||||
<img :src="pubUrl('@demos/resource/theme-demo.png')" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
|
||||
|
||||
步骤三、在项目根目录下，执行以下命令进行替换；
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const i18n = initI18n({
|
|||
},
|
||||
messages
|
||||
})
|
||||
const $t = i18n.global.t
|
||||
const $t2 = (cn, en) => (i18n.global.locale === 'zhCN' ? cn : en)
|
||||
const i18nByKey = i18n.global.t
|
||||
const getWord = (cn, en) => (i18n.global.locale === 'zhCN' ? cn : en)
|
||||
|
||||
export { i18n, $t, $t2 }
|
||||
export { i18n, i18nByKey, getWord }
|
||||
|
|
|
|||
|
|
@ -21,8 +21,7 @@ import './assets/custom-block.less'
|
|||
import { i18n } from './i18n/index'
|
||||
import { router } from './router'
|
||||
import App from './App.vue'
|
||||
import { $t, $t2 } from './i18n'
|
||||
import { $pub, appData } from './tools'
|
||||
import { appData } from './tools'
|
||||
import { ZH_CN_LANG, EN_US_LANG, LANG_PATH_MAP } from './const'
|
||||
import demoConfig from '@demos/config.js'
|
||||
|
||||
|
|
@ -62,11 +61,7 @@ if (import.meta.env.VITE_TINY_THEME === 'saas') {
|
|||
import('./tailwind.css')
|
||||
}
|
||||
|
||||
app
|
||||
.use(router)
|
||||
.use(i18n)
|
||||
.use(createHead()) // 支持md修改title
|
||||
.mixin({ methods: { $t, $t2, $pub } })
|
||||
app.use(router).use(i18n).use(createHead()) // 支持md修改title
|
||||
|
||||
if (typeof demoConfig.initApp === 'function') {
|
||||
demoConfig.initApp(app)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { docMenus, cmpMenus } from '@menu/menus.js'
|
||||
|
||||
import { appData, $t2 } from './tools'
|
||||
import { appData } from './tools'
|
||||
|
||||
/**
|
||||
* 聚合doc / cmp 两个页面的所有菜单.
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const $delay = (time) => new Promise((resolve) => setTimeout(resolve, time))
|
|||
*/
|
||||
const $idle = () => new Promise((resolve) => (window.requestIdleCallback || window.requestAnimationFrame)(resolve))
|
||||
|
||||
const $pub = (url) => {
|
||||
const pubUrl = (url) => {
|
||||
return baseUrl + url
|
||||
}
|
||||
|
||||
|
|
@ -80,4 +80,4 @@ const fetchDemosFile = (path) => {
|
|||
})
|
||||
}
|
||||
|
||||
export { $clone, $split, $delay, $idle, $pub, fetchDemosFile }
|
||||
export { $clone, $split, $delay, $idle, pubUrl, fetchDemosFile }
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
import type { PropType } from 'vue'
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { Tag as TinyTag, Alert as TinyAlert, Tooltip as TinyTooltip } from '@opentiny/vue'
|
||||
import { $t2 } from '../../i18n/index'
|
||||
import { getWord } from '../../i18n/index'
|
||||
|
||||
enum STAGE {
|
||||
experimental = 'experimental',
|
||||
|
|
@ -140,9 +140,11 @@ export default defineComponent({
|
|||
})
|
||||
|
||||
const generateDes = (desMap: typeof cnDesMap) => {
|
||||
// 当前stable之后，不显示experimental的描述
|
||||
const isFilterExperimental = [STAGE.removed, STAGE.deprecated, STAGE.stable].includes(currentStageComputed.value as STAGE)
|
||||
// 当前deprecated之后，不显示stable的描述
|
||||
// 当前stable之后，不显示experimental的描述
|
||||
const isFilterExperimental = [STAGE.removed, STAGE.deprecated, STAGE.stable].includes(
|
||||
currentStageComputed.value as STAGE
|
||||
)
|
||||
// 当前deprecated之后，不显示stable的描述
|
||||
const isFilterStable = [STAGE.removed, STAGE.deprecated].includes(currentStageComputed.value as STAGE)
|
||||
|
||||
const goingStages = Object.entries(desMap).filter(([stage]) => {
|
||||
|
|
@ -163,17 +165,21 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const tipComputed = computed(() => {
|
||||
if (props.tip) return $t2(props.tip['zh-CN'], props.tip['en-US']) as string
|
||||
if (props.tip) return getWord(props.tip['zh-CN'], props.tip['en-US']) as string
|
||||
|
||||
if (!props.metaData) return ''
|
||||
|
||||
const vertionDesZnCn = generateDes(cnDesMap)
|
||||
const znChTip = `该${props.tipSubject === 'component' ? '组件' : '特性'}${vertionDesZnCn}。${props.extendTip?.['zh-CN'] || ''}`
|
||||
const znChTip = `该${props.tipSubject === 'component' ? '组件' : '特性'}${vertionDesZnCn}。${
|
||||
props.extendTip?.['zh-CN'] || ''
|
||||
}`
|
||||
|
||||
const vertionDesEnUs = generateDes(enDesMap)
|
||||
const enUsTip = `This ${props.tipSubject === 'component' ? 'component' : 'feature'} is ${vertionDesEnUs}. ${props.extendTip?.['en-US'] || ''}`
|
||||
const enUsTip = `This ${props.tipSubject === 'component' ? 'component' : 'feature'} is ${vertionDesEnUs}. ${
|
||||
props.extendTip?.['en-US'] || ''
|
||||
}`
|
||||
|
||||
return $t2(znChTip, enUsTip) as string
|
||||
return getWord(znChTip, enUsTip) as string
|
||||
})
|
||||
|
||||
const alertTypeComputed = computed(() => {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</version-tip>
|
||||
<template v-if="currJson?.demos?.length > 0">
|
||||
<div class="all-demos-container">
|
||||
<h2 class="ti-f30 ti-fw-normal !ti-mb20">{{ $t('yan-shi') }}</h2>
|
||||
<h2 class="ti-f30 ti-fw-normal !ti-mb20">{{ i18nByKey('yan-shi') }}</h2>
|
||||
<div v-if="apiModeState.demoMode === 'default'" class="ti-f-c ti-f-wrap">
|
||||
<template v-if="currJson.column === '2' && currJson.demos.length > 1">
|
||||
<div class="one-demo-col2">
|
||||
|
|
@ -52,19 +52,19 @@
|
|||
<table class="api-table">
|
||||
<thead>
|
||||
<tr v-if="key.includes('slots')">
|
||||
<th width="15%">{{ $t('name') }}</th>
|
||||
<th width="85%">{{ $t('desc') }}</th>
|
||||
<th width="15%">{{ i18nByKey('name') }}</th>
|
||||
<th width="85%">{{ i18nByKey('desc') }}</th>
|
||||
</tr>
|
||||
<tr v-else-if="key.includes('events')">
|
||||
<th width="15%">{{ $t('name') }}</th>
|
||||
<th width="20%">{{ $t('propType') }}</th>
|
||||
<th width="65%">{{ $t('desc') }}</th>
|
||||
<th width="15%">{{ i18nByKey('name') }}</th>
|
||||
<th width="20%">{{ i18nByKey('propType') }}</th>
|
||||
<th width="65%">{{ i18nByKey('desc') }}</th>
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<th width="15%">{{ $t('name') }}</th>
|
||||
<th width="20%">{{ $t('propType') }}</th>
|
||||
<th width="20%">{{ $t('defValue') }}</th>
|
||||
<th width="45%">{{ $t('desc') }}</th>
|
||||
<th width="15%">{{ i18nByKey('name') }}</th>
|
||||
<th width="20%">{{ i18nByKey('propType') }}</th>
|
||||
<th width="20%">{{ i18nByKey('defValue') }}</th>
|
||||
<th width="45%">{{ i18nByKey('desc') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
<h2 id="FAQ" v-if="cmpFAQMd" class="ti-f30 ti-fw-normal ti-mt28 ti-mb20">FAQ</h2>
|
||||
<div class="markdown-body" v-html="cmpFAQMd"></div>
|
||||
<div v-if="currJson.owner" class="ti-abs ti-right24 ti-top24" @click="copyText(currJson.owner)">
|
||||
{{ $t('doc-owner') }} : {{ currJson.owner }}
|
||||
{{ i18nByKey('doc-owner') }} : {{ currJson.owner }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -142,7 +142,7 @@ import { defineComponent, reactive, computed, toRefs, watch, onMounted, ref } fr
|
|||
import { marked } from 'marked'
|
||||
import { Loading, Anchor, ButtonGroup } from '@opentiny/vue'
|
||||
import debounce from '@opentiny/vue-renderless/common/deps/debounce'
|
||||
import { $t, $t2, $clone, fetchDemosFile, useApiMode, useTemplateMode } from '@/tools'
|
||||
import { i18nByKey, getWord, $clone, fetchDemosFile, useApiMode, useTemplateMode } from '@/tools'
|
||||
import demo from '@/views/components/demo'
|
||||
import { router } from '@/router.js'
|
||||
import { Collapse, CollapseItem } from '@opentiny/vue'
|
||||
|
|
@ -168,7 +168,7 @@ export default defineComponent({
|
|||
const anchorRefreshKey = ref(0)
|
||||
const state = reactive({
|
||||
webDocPath: computed(() => ''),
|
||||
langKey: $t2('zh-CN', 'en-US'),
|
||||
langKey: getWord('zh-CN', 'en-US'),
|
||||
cmpId: '',
|
||||
currJson: { column: 1, demos: [], apis: [] },
|
||||
cmpTopMd: null,
|
||||
|
|
@ -264,7 +264,7 @@ export default defineComponent({
|
|||
|
||||
// saas下切换mode和组价示例都会触发loadPage,需要防抖
|
||||
const loadPage = debounce(templateModeState.isSaas ? 100 : 0, false, () => {
|
||||
const lang = $t2('cn', 'en')
|
||||
const lang = getWord('cn', 'en')
|
||||
state.cmpId = router.currentRoute.value.params.cmpId
|
||||
|
||||
// 将请求合并起来，这样页面更新一次，页面刷新的时机就固定了
|
||||
|
|
@ -409,7 +409,7 @@ export default defineComponent({
|
|||
return {
|
||||
...toRefs(state),
|
||||
...fn,
|
||||
$t,
|
||||
i18nByKey,
|
||||
anchorRefreshKey,
|
||||
apiModeState,
|
||||
templateModeState,
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<tiny-tooltip
|
||||
placement="top"
|
||||
:append-to-body="false"
|
||||
:content="demo.isOpen ? $t('hideCode') : $t('showCode')"
|
||||
:content="demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode')"
|
||||
>
|
||||
<i
|
||||
:class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'"
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
@click="toggleDemoCode(demo)"
|
||||
/>
|
||||
</tiny-tooltip>
|
||||
<tiny-tooltip placement="top" :append-to-body="false" :content="$t('playground')">
|
||||
<tiny-tooltip placement="top" :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>
|
||||
|
|
@ -65,8 +65,8 @@
|
|||
|
||||
<script lang="jsx">
|
||||
import { defineComponent, reactive, computed, toRefs, shallowRef, onMounted, watch, nextTick, inject } from 'vue'
|
||||
import { $t, $t2 } from '@/i18n'
|
||||
import { $split, appData, fetchDemosFile, $pub } from '@/tools'
|
||||
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 { router } from '@/router.js'
|
||||
|
|
@ -108,7 +108,7 @@ export default defineComponent({
|
|||
.then((code) => {
|
||||
return code
|
||||
})
|
||||
.catch((error) => {
|
||||
.catch(() => {
|
||||
return `${demoName}示例资源不存在，请检查文件名是否正确？`
|
||||
})
|
||||
const ext = $split(fileName, '.', -1)
|
||||
|
|
@ -123,7 +123,7 @@ export default defineComponent({
|
|||
const state = reactive({
|
||||
tabValue: 'tab0',
|
||||
cmpId: router.currentRoute.value.params.cmpId,
|
||||
langKey: $t2('zh-CN', 'en-US'),
|
||||
langKey: getWord('zh-CN', 'en-US'),
|
||||
currDemoId: computed(() => {
|
||||
let hash = router.currentRoute.value.hash?.slice(1)
|
||||
|
||||
|
|
@ -133,7 +133,7 @@ export default defineComponent({
|
|||
}
|
||||
return hash
|
||||
}),
|
||||
copyTip: $t('copyCode'),
|
||||
copyTip: i18nByKey('copyCode'),
|
||||
copyIcon: 'i-ti-copy'
|
||||
})
|
||||
|
||||
|
|
@ -169,12 +169,12 @@ export default defineComponent({
|
|||
|
||||
navigator.clipboard.writeText(demo.files[0].code)
|
||||
}
|
||||
state.copyTip = $t('copyCodeOk')
|
||||
state.copyTip = i18nByKey('copyCodeOk')
|
||||
state.copyIcon = 'i-ti-check'
|
||||
},
|
||||
resetTip() {
|
||||
setTimeout(() => {
|
||||
state.copyTip = $t('copyCode')
|
||||
state.copyTip = i18nByKey('copyCode')
|
||||
state.copyIcon = 'i-ti-copy'
|
||||
}, 300)
|
||||
},
|
||||
|
|
@ -218,7 +218,7 @@ export default defineComponent({
|
|||
}
|
||||
)
|
||||
|
||||
return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig, cmp, isMobileFirst }
|
||||
return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig, cmp, isMobileFirst, i18nByKey }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -304,7 +304,7 @@ export default defineComponent({
|
|||
position: absolute;
|
||||
left: 11px;
|
||||
top: 79px;
|
||||
transform: translateX(0);
|
||||
transform: i18nByKeyX(0);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,7 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, nextTick, watch, onMounted, computed, shallowRef } from 'vue'
|
||||
import { Anchor as TinyAnchor } from '@opentiny/vue'
|
||||
import { $t2 } from '@/tools'
|
||||
import { getWord } from '@/tools'
|
||||
import docMDs, { transformIdSelector } from './docConfig.js'
|
||||
import { router } from '@/router.js'
|
||||
|
||||
|
|
@ -28,7 +27,7 @@ const catalog = ref([])
|
|||
const docCmp = shallowRef(null)
|
||||
|
||||
async function loadPage() {
|
||||
let suffix = $t2('', '-en')
|
||||
let suffix = getWord('', '-en')
|
||||
const docKey = router.currentRoute.value.params.docId
|
||||
const docName = isOpen && openDocMap[docKey] ? openDocMap[docKey] : docKey
|
||||
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
<div class="main-layout ti-hp100 ti-f-c ti-f-box-stretch">
|
||||
<!-- 切换语言 -->
|
||||
<div class="lang-box">
|
||||
<tiny-tooltip :content="$t('changeLanguage')" placement="left">
|
||||
<span class="lang-btn" @click="changeLanguage">{{ $t('language') }}</span>
|
||||
<tiny-tooltip :content="i18nByKey('changeLanguage')" placement="left">
|
||||
<span class="lang-btn" @click="changeLanguage">{{ i18nByKey('language') }}</span>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
<!-- 切換主题样式 -->
|
||||
<tiny-dropdown v-if="!templateModeState.isSaas" class="theme-change-button" trigger="click">
|
||||
<tiny-tooltip :content="$t('changeTheme')" placement="left">
|
||||
<tiny-tooltip :content="i18nByKey('changeTheme')" placement="left">
|
||||
<span>
|
||||
<img :src="themeSvg" :alt="$t('changeTheme')" />
|
||||
<img :src="themeSvg" :alt="i18nByKey('changeTheme')" />
|
||||
</span>
|
||||
</tiny-tooltip>
|
||||
<template #dropdown>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<div v-show="!isCollapsed" class="api-type-box" :class="{ 'is-collapsed': isCollapsed }">
|
||||
<div class="api-type">
|
||||
<div :class="{ 'api-mode': true, active: apiModeState.apiMode === 'Options' }">
|
||||
{{ $t2('选项式', 'Options') }}
|
||||
{{ getWord('选项式', 'Options') }}
|
||||
</div>
|
||||
<tiny-switch
|
||||
class="api-switch"
|
||||
|
|
@ -41,16 +41,16 @@
|
|||
v-model="apiModeState.apiMode"
|
||||
></tiny-switch>
|
||||
<div :class="{ 'api-mode': true, active: apiModeState.apiMode === 'Composition' }">
|
||||
{{ $t2('组合式', 'Composition') }}
|
||||
{{ getWord('组合式', 'Composition') }}
|
||||
</div>
|
||||
<tiny-tooltip :content="$t('apiType')" placement="right">
|
||||
<tiny-tooltip :content="i18nByKey('apiType')" placement="right">
|
||||
<icon-help-circle></icon-help-circle>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="api-type">
|
||||
<div :class="{ 'api-mode': true, active: apiModeState.demoMode === 'single' }">
|
||||
{{ $t2('单示例', 'Single') }}
|
||||
{{ getWord('单示例', 'Single') }}
|
||||
</div>
|
||||
<tiny-switch
|
||||
class="api-switch"
|
||||
|
|
@ -60,9 +60,9 @@
|
|||
v-model="apiModeState.demoMode"
|
||||
></tiny-switch>
|
||||
<div :class="{ 'api-mode': true, active: apiModeState.demoMode === 'default' }">
|
||||
{{ $t2('多示例', 'Multiple') }}
|
||||
{{ getWord('多示例', 'Multiple') }}
|
||||
</div>
|
||||
<tiny-tooltip :content="$t2('切换demo的预览模式', 'Change demo preview mode')" placement="right">
|
||||
<tiny-tooltip :content="getWord('切换demo的预览模式', 'Change demo preview mode')" placement="right">
|
||||
<icon-help-circle></icon-help-circle>
|
||||
</tiny-tooltip>
|
||||
</div>
|
||||
|
|
@ -109,7 +109,7 @@ import { Switch, TreeMenu, Dropdown, DropdownMenu, DropdownItem, Tooltip, Tag }
|
|||
import { iconHelpCircle } from '@opentiny/vue-icon'
|
||||
import { genMenus } from '@/menus.jsx'
|
||||
import { router } from '@/router.js'
|
||||
import { $t2, appData, appFn, useApiMode, useTemplateMode } from '@/tools'
|
||||
import { getWord, i18nByKey, appData, appFn, useApiMode, useTemplateMode } from '@/tools'
|
||||
import themeSvg from '@/assets/images/theme.svg?url'
|
||||
import useTheme from '@/tools/useTheme'
|
||||
|
||||
|
|
@ -140,7 +140,7 @@ export default defineComponent({
|
|||
expandKeys: []
|
||||
})
|
||||
|
||||
const lang = $t2('zh-CN', 'en-US')
|
||||
const lang = getWord('zh-CN', 'en-US')
|
||||
const getTo = (route, key) => `${import.meta.env.VITE_CONTEXT}${lang}/os-theme/${route}${key}`
|
||||
|
||||
const changeLanguage = () => {
|
||||
|
|
@ -213,7 +213,9 @@ export default defineComponent({
|
|||
changeLanguage,
|
||||
apiModeState,
|
||||
apiModeFn,
|
||||
templateModeState
|
||||
templateModeState,
|
||||
getWord,
|
||||
i18nByKey
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<div>
|
||||
<div class="overview-layout ti-pt48">
|
||||
<h1 class="ti-mb20 ti-f24 ti-fw-600">
|
||||
{{ $t('overview') }}
|
||||
{{ i18nByKey('overview') }}
|
||||
<span class="ti-f18">({{ getTotalComponentsNum() }})</span>
|
||||
</h1>
|
||||
|
||||
<h1 class="ti-f14 ti-my20 ti-lh21">
|
||||
{{ $t('overviewDesc') }}
|
||||
{{ i18nByKey('overviewDesc') }}
|
||||
</h1>
|
||||
<!-- 搜索 -->
|
||||
<tiny-input
|
||||
:placeholder="$t('searchComponents')"
|
||||
:placeholder="i18nByKey('searchComponents')"
|
||||
v-model="value"
|
||||
class="ti-mb10 search-input"
|
||||
:style="{ width: '100%', padding: '6px' }"
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
<div v-for="(menu, index) in searchMenus" :label="menu" :key="index">
|
||||
<div class="ti-rel ti-mt25">
|
||||
<h2 class="ti-f16 ti-d-ib ti-fw-600 ti-mr8">{{ $t2(menu.label, menu.labelEn) }}</h2>
|
||||
<h2 class="ti-f16 ti-d-ib ti-fw-600 ti-mr8">{{ getWord(menu.label, menu.labelEn) }}</h2>
|
||||
<span v-if="searchMenus?.length !== 0" class="cell-title">{{ menu.children.length }}</span>
|
||||
</div>
|
||||
<div class="ti-f-r ti-f-wrap ti-f-pos-between overview-card">
|
||||
|
|
@ -41,8 +41,8 @@
|
|||
<div class="ti-br-4 component-card">
|
||||
<img
|
||||
class="ti-h125 ti-w125"
|
||||
:src="$pub(`@demos/overviewimage/${getSvg(cell.key)}.svg`)"
|
||||
:onerror="`this.src='${$pub(`@demos/overviewimage/dev.svg`)}'`"
|
||||
:src="pubUrl(`@demos/overviewimage/${getSvg(cell.key)}.svg`)"
|
||||
:onerror="`this.src='${pubUrl(`@demos/overviewimage/dev.svg`)}'`"
|
||||
/>
|
||||
<h2 class="ti-f16 overview-card-label">
|
||||
{{ cell.name }}
|
||||
|
|
@ -66,8 +66,7 @@ import { cmpMenus } from '@menu/menus.js'
|
|||
import TinyInput from '@opentiny/vue-input'
|
||||
import noDataSvg from '@/assets/images/no-data.svg?url'
|
||||
import searchSvg from '@/assets/images/search.svg?url'
|
||||
import { $t2, isZhCn } from '@/tools'
|
||||
|
||||
import { getWord, i18nByKey, isZhCn, pubUrl } from '@/tools'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Overview',
|
||||
|
|
@ -98,7 +97,7 @@ export default defineComponent({
|
|||
const trimValue = value.replaceAll(' ', '').toLowerCase()
|
||||
const currentValue = trimValue
|
||||
const reg = new RegExp(currentValue, 'ig')
|
||||
const isGrid = (trimValue === 'grid' || trimValue === '表格')
|
||||
const isGrid = trimValue === 'grid' || trimValue === '表格'
|
||||
const searchMenus = state.menus
|
||||
.map((item) => {
|
||||
const label = item.label
|
||||
|
|
@ -115,7 +114,7 @@ export default defineComponent({
|
|||
.filter((item) => item.children.length > 0)
|
||||
state.searchMenus = searchMenus
|
||||
}
|
||||
const lang = $t2('zh-CN', 'en-US')
|
||||
const lang = getWord('zh-CN', 'en-US')
|
||||
let fn = {
|
||||
searchHandler: debounce(searchResultFn, 300),
|
||||
getTo: (key) => `${import.meta.env.VITE_CONTEXT}${lang}/os-theme/components/${key}`,
|
||||
|
|
@ -128,7 +127,7 @@ export default defineComponent({
|
|||
}
|
||||
},
|
||||
getTotalComponentsNum: () => {
|
||||
let total = 0;
|
||||
let total = 0
|
||||
cmpMenus.forEach((cmpCategory) => {
|
||||
if (cmpCategory.key === 'cmp_frame_style') {
|
||||
total += 2
|
||||
|
|
@ -145,7 +144,7 @@ export default defineComponent({
|
|||
const common = new window.TDCommon(['#footer'], {})
|
||||
common.renderFooter()
|
||||
})
|
||||
return { ...toRefs(state), ...fn, TinyInput, noDataSvg, searchSvg, isZhCn }
|
||||
return { ...toRefs(state), ...fn, TinyInput, noDataSvg, searchSvg, isZhCn, getWord, i18nByKey, pubUrl }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -174,7 +173,11 @@ export default defineComponent({
|
|||
|
||||
.component-card {
|
||||
box-shadow: 1px 1px 4px 1px rgba(31, 52, 121, 0.1);
|
||||
transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
|
||||
transition:
|
||||
color 0.3s,
|
||||
background-color 0.3s,
|
||||
box-shadow 0.3s,
|
||||
border-color 0.3s;
|
||||
padding: 24px;
|
||||
font-size: 14px;
|
||||
color: rgb(51, 54, 57);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import importPlugin from '@opentiny/vue-vite-import'
|
|||
import vue3SvgPlugin from 'vite-svg-loader'
|
||||
import { getAlias, pathFromWorkspaceRoot, getOptimizeDeps } from '../../internals/cli/src/config/vite'
|
||||
import virtualTemplatePlugin from '@opentiny-internal/unplugin-virtual-template/vite'
|
||||
import tailwindCss from 'tailwindcss'
|
||||
|
||||
export default defineConfig((config) => {
|
||||
const env = loadEnv(config.mode, process.cwd() + '/env', '')
|
||||
|
|
@ -97,13 +98,20 @@ export default defineConfig((config) => {
|
|||
strict: false,
|
||||
allow: ['..']
|
||||
}
|
||||
},
|
||||
define: {
|
||||
__VUE_I18N_FULL_INSTALL__: true,
|
||||
__VUE_I18N_LEGACY_API__: true,
|
||||
__INTLIFY_PROD_DEVTOOLS__: false,
|
||||
__INTLIFY_JIT_COMPILATION__: false,
|
||||
__INTLIFY_DROP_MESSAGE_COMPILER__: false
|
||||
}
|
||||
}
|
||||
|
||||
if (env.VITE_TINY_THEME === 'saas') {
|
||||
viteConfig.css = {
|
||||
postcss: {
|
||||
plugins: [require('tailwindcss')]
|
||||
plugins: [tailwindCss]
|
||||
}
|
||||
}
|
||||
// 这里逻辑是兼容saas官网工程的alias写法
|
||||
|
|
@ -114,9 +122,7 @@ export default defineConfig((config) => {
|
|||
}
|
||||
|
||||
if (env.NODE_ENV === 'development') {
|
||||
viteConfig.define = {
|
||||
'process.env': {}
|
||||
}
|
||||
viteConfig.define['process.env'] = {}
|
||||
}
|
||||
|
||||
return viteConfig
|
||||
|
|
|
|||
Loading…
Reference in New Issue