This is an automated email from the ASF dual-hosted git repository. sushuang pushed a commit to branch v6-examples-supplement in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit 667970d8b953e30edb964aea76a8bcb2fffb8957 Author: 100pah <[email protected]> AuthorDate: Thu Aug 7 03:00:40 2025 +0800 infra: Add version since in editor page, and tweak version since in gallery page. --- README.md | 2 +- src/common/i18n.js | 4 +-- src/editor/Editor.vue | 75 ++++++++++++++++++++++++++++++--------------- src/explore/ExampleCard.vue | 15 ++++----- 4 files changed, 60 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 07062d5b..0b3bef9b 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ Metadata properties can be: + `title`: Optional. String. + `titleCN`: Optional. String. + `category`: Optional. String list. That is the main categories in [example gallery page](https://echarts.apache.org/examples/en/index.html). If multiple categories need to be specified, use quotation marks and commas like `/* category: 'line, visualMap' */` -+ `since`: Optional. Semver version string. Recommended to add it to hint users the available echarts versions. For example, `/* since: 6.0.0 */`. ++ `since`: Optional. Semver version string. Recommended to add it to hint users the available echarts versions. For example, `/* since: 6.0.0 */`. Do not use `v6.0.0`, must follow Semver format. + `difficulty`: Optional. Number. + `theme`: Optional. String. + `excludeFromGallery`: Optional. Boolean. Indicate that exclude this example from [example gallery page](https://echarts.apache.org/examples/en/index.html). diff --git a/src/common/i18n.js b/src/common/i18n.js index ac3b635f..eb298fb3 100644 --- a/src/common/i18n.js +++ b/src/common/i18n.js @@ -9,7 +9,7 @@ export default { infiniteLoopInEditor: 'Potential infinite loops exist in code!', potentialRedirectionInEditor: 'Potential redirection exists in code!', chartOK: 'Chart has been generated in ', - bannerNew: 'Since', + bannerVersionRequire: 'Require ECharts', darkMode: 'Dark Mode', enableDecal: 'Decal Pattern', @@ -140,7 +140,7 @@ export default { infiniteLoopInEditor: '编辑器内容可能存在无限循环！', potentialRedirectionInEditor: '编辑器内容可能存在重定向代码！', chartOK: '图表已生成, ', - bannerNew: '新增', + bannerVersionRequire: '依赖 ECharts', darkMode: '深色模式', enableDecal: '无障碍花纹', diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue index 83f437cc..cc627b9d 100644 --- a/src/editor/Editor.vue +++ b/src/editor/Editor.vue @@ -10,31 +10,36 @@ <span slot="label">{{ $t('editor.tabEditor') }}</span> <el-container> <el-header id="editor-control-panel"> - <div class="languages"> - <el-tooltip - :content="$t('editor.tooltip.jsMode')" - placement="bottom" - > - <a - :class="{ js: true, active: !shared.typeCheck }" - @click="changeLang('js')" - >JS</a + <div> + <div class="languages"> + <el-tooltip + :content="$t('editor.tooltip.jsMode')" + placement="bottom" > - </el-tooltip> - <el-tooltip - :content="$t(`editor.tooltip.${hasTs ? 'tsMode' : 'noTs'}`)" - placement="bottom" - > - <a - @click="hasTs && changeLang('ts')" - :class="{ - ts: true, - active: shared.typeCheck, - disabled: !hasTs - }" - >TS</a + <a + :class="{ js: true, active: !shared.typeCheck }" + @click="changeLang('js')" + >JS</a + > + </el-tooltip> + <el-tooltip + :content="$t(`editor.tooltip.${hasTs ? 'tsMode' : 'noTs'}`)" + placement="bottom" > - </el-tooltip> + <a + @click="hasTs && changeLang('ts')" + :class="{ + ts: true, + active: shared.typeCheck, + disabled: !hasTs + }" + >TS</a + > + </el-tooltip> + </div> + <div class="example-version-since" v-if="hasVersionSince"> + {{ versionSinceBanner }} + </div> </div> <div class="editor-controls"> <a @@ -424,6 +429,7 @@ import { import { collectDeps, buildExampleCode } from '../../common/buildCode'; import { gotoURL } from '../common/route'; import { mount } from '@lang/object-visualizer'; +import { compareVersions } from 'compare-versions'; import './object-visualizer.css'; import { getScriptURLs, URL_PARAMS } from '../common/config'; @@ -472,7 +478,16 @@ export default { computed: { hasTs() { return this.exampleConfig && this.exampleConfig.ts; - } + }, + + hasVersionSince() { + return this.exampleConfig && this.exampleConfig.since + && compareVersions(this.shared.echartsFullVersion, this.exampleConfig.since) >= 0; + }, + + versionSinceBanner() { + return this.$t('editor.bannerVersionRequire') + ' v' + this.exampleConfig.since + '+'; + }, }, mounted() { @@ -1047,6 +1062,18 @@ $handler-width: 15px; } } + .example-version-since { + display: inline-block; + padding: 1px 5px; + vertical-align: middle; + font-size: 10px; + // background: #fb628b; + background: #409eff; + color: #fff; + font-weight: bold; + border-radius: 2px; + } + .editor-controls { .el-switch__label { margin-top: -3px; diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue index e8859f7b..4f129f36 100644 --- a/src/explore/ExampleCard.vue +++ b/src/explore/ExampleCard.vue @@ -8,8 +8,8 @@ </picture> </a> <div class="example-info"> - <div class="example-new" v-if="isNew"> - {{ newBanner }} + <div class="example-version-since" v-if="hasVersionSince"> + {{ versionSinceBanner }} </div> <div> <div class="example-title" :title="title">{{ title }}</div> @@ -44,15 +44,13 @@ export default { return this.example.title || ''; }, - isNew() { + hasVersionSince() { return this.example.since && compareVersions(store.echartsFullVersion, this.example.since) >= 0; }, - newBanner() { - return store.locale === 'zh' - ? (this.example.since + ' ' + this.$t('editor.bannerNew')) - : (this.$t('editor.bannerNew') + ' ' + this.example.since); + versionSinceBanner() { + return 'v' + this.example.since + '+'; }, exampleTheme() { @@ -145,13 +143,12 @@ export default { padding-left: 10px; } - .example-new { + .example-version-since { margin-top: 12px; float: right; padding: 1px 5px; margin-left: 5px; vertical-align: middle; - border-radius: 3px; font-size: 10px; background: #fb628b; color: #fff; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
