This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/echarts-theme-builder.git
commit b6df62ab74f21f6b0f7bc22860bb41a2e77fb4d5 Author: Ovilia <[email protected]> AuthorDate: Fri Sep 12 15:00:52 2025 +0800 feat: update theme --- src/App.vue | 32 +++++++++++++++++++++++++++++++- src/components/ChartPreviewPanel.vue | 6 +++++- src/components/ColorList.vue | 8 ++++++-- src/components/ColorPicker.vue | 4 ++++ 4 files changed, 46 insertions(+), 4 deletions(-) diff --git a/src/App.vue b/src/App.vue index 1b9dd43..1c3d598 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,6 +3,18 @@ import { ref } from 'vue' // Simple fixed sidebar layout without responsive design import ChartPreviewPanel from './components/ChartPreviewPanel.vue' import ThemePanel from './components/ThemePanel.vue' +import { useI18n } from 'vue-i18n' +import { useLocalization } from './composables/useLocalization' + +// Initialize i18n +const { t } = useI18n() + +// Set up language control +const { switchLanguage, currentLanguage } = useLocalization() +const currentLang = ref(currentLanguage) +const onLanguageChange = (lang: string) => { + switchLanguage(lang) +} // Get reference to chart preview panel const chartPreviewRef = ref<InstanceType<typeof ChartPreviewPanel> | null>(null) @@ -10,6 +22,14 @@ const chartPreviewRef = ref<InstanceType<typeof ChartPreviewPanel> | null>(null) <template> <div id="theme-builder"> + <!-- Language Selector --> + <div class="language-selector"> + <van-radio-group v-model="currentLang" direction="horizontal" @change="onLanguageChange"> + <van-radio name="en">English</van-radio> + <van-radio name="zh">中文</van-radio> + </van-radio-group> + </div> + <div class="container-fluid" id="content"> <van-row class="row-container" :gutter="0"> <van-col span="6" class="theme-config"> @@ -28,8 +48,18 @@ const chartPreviewRef = ref<InstanceType<typeof ChartPreviewPanel> | null>(null) #theme-builder { width: 100%; height: 100vh; + position: relative; + --van-button-default-height: auto; + --van-button-normal-padding: 8px 10px; +} - --van-button-default-height: 35px; +.language-selector { + position: absolute; + top: 10px; + right: 20px; + z-index: 1000; + background-color: rgba(255, 255, 255, 0.9); + padding: 15px; } .container-fluid { diff --git a/src/components/ChartPreviewPanel.vue b/src/components/ChartPreviewPanel.vue index d7ad18e..3a43f71 100644 --- a/src/components/ChartPreviewPanel.vue +++ b/src/components/ChartPreviewPanel.vue @@ -1,7 +1,7 @@ <template> <div class="chart-preview"> <div class="preview-header"> - <h3>Chart Preview</h3> + <h3>{{ $t('preview.chartPreview') }}</h3> </div> <div class="charts-grid"> @@ -24,8 +24,12 @@ import { ref, onMounted, onUnmounted, nextTick, watch, computed } from 'vue' import * as echarts from 'echarts' import { getChartConfigs } from '../utils/chartConfigs' import { useThemeStore } from '../stores/theme' +import { useI18n } from 'vue-i18n' import type { ECharts } from 'echarts' +// Initialize i18n +const { t } = useI18n() + const themeStore = useThemeStore() const chartInstances = ref<ECharts[]>([]) const chartRefs = ref<(HTMLElement | null)[]>([]) diff --git a/src/components/ColorList.vue b/src/components/ColorList.vue index dca0340..71f384f 100644 --- a/src/components/ColorList.vue +++ b/src/components/ColorList.vue @@ -40,14 +40,14 @@ @click="addColor" icon="plus" > - 增加 + {{ $t('common.add') }} </van-button> <van-button v-if="modelValue.length > 1" size="small" @click="removeLastColor" > - 减少 + {{ $t('common.reduce') }} </van-button> </div> </div> @@ -59,6 +59,10 @@ import { defineProps, defineEmits } from 'vue' import { ColorPicker } from 'vue3-colorpicker' import 'vue3-colorpicker/style.css' +import { useI18n } from 'vue-i18n' + +// Initialize i18n +const { t } = useI18n() interface Props { modelValue: string[] diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue index d79e58d..24ef87d 100644 --- a/src/components/ColorPicker.vue +++ b/src/components/ColorPicker.vue @@ -26,6 +26,10 @@ import { defineProps, defineEmits } from 'vue' import { ColorPicker } from 'vue3-colorpicker' import 'vue3-colorpicker/style.css' +import { useI18n } from 'vue-i18n' + +// Initialize i18n +const { t } = useI18n() interface Props { modelValue: string --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
