You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2025/11/07 06:40:54 UTC
(echarts-theme-builder) 11/28: feat: update styles
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 6513e7a04e52d24b139a08a6803902cb024428b5
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Sep 10 16:08:40 2025 +0800
feat: update styles
---
src/App.vue | 2 ++
src/components/ColorList.vue | 1 +
src/components/ThemePanel.vue | 82 ++++++++++++++++++++++++++++++++-----------
3 files changed, 64 insertions(+), 21 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 8d77442..1b9dd43 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,6 +28,8 @@ const chartPreviewRef = ref<InstanceType<typeof ChartPreviewPanel> | null>(null)
#theme-builder {
width: 100%;
height: 100vh;
+
+ --van-button-default-height: 35px;
}
.container-fluid {
diff --git a/src/components/ColorList.vue b/src/components/ColorList.vue
index 696ef8c..dca0340 100644
--- a/src/components/ColorList.vue
+++ b/src/components/ColorList.vue
@@ -29,6 +29,7 @@
size="mini"
@click="removeColor(index)"
icon="cross"
+ plain
/>
</div>
</div>
diff --git a/src/components/ThemePanel.vue b/src/components/ThemePanel.vue
index 2fc7085..317c1c3 100644
--- a/src/components/ThemePanel.vue
+++ b/src/components/ThemePanel.vue
@@ -6,35 +6,35 @@
<div class="panel-content">
<!-- Action Buttons -->
<div class="action-buttons">
- <van-button type="primary" size="small" @click="downloadTheme">
+ <van-button type="primary" @click="downloadTheme">
<van-icon name="down" />
下载主题
</van-button>
- <van-button size="small" @click="importConfig">
+ <van-button @click="importConfig">
<van-icon name="upgrade" />
导入配置
</van-button>
- <van-button size="small" @click="exportConfig">
+ <van-button @click="exportConfig">
<van-icon name="share" />
导出配置
</van-button>
- <van-button size="small" @click="showThemeCode">
+ <van-button @click="showThemeCode">
<van-icon name="eye-o" />
使用主题
</van-button>
</div>
<div class="action-buttons">
- <van-button size="small" @click="refreshCharts">
+ <van-button @click="refreshCharts">
<van-icon name="replay" />
刷新
</van-button>
- <van-button size="small" @click="resetTheme">
- <van-icon name="delete" />
+ <van-button @click="resetTheme">
+ <van-icon name="revoke" />
复原
</van-button>
- <van-button size="small" @click="showHelp">
- <van-icon name="question" />
+ <van-button @click="showHelp">
+ <van-icon name="info-o" />
帮助
</van-button>
</div>
@@ -619,18 +619,16 @@ const showCodeDialog = async (title: string, code: string) => {
const showHelp = () => {
showDialog({
title: '使用帮助',
- message: `ECharts 主题构建工具
-
-• 基本配置：设置主题的基本颜色和样式
-• 预定义主题：选择内置的主题方案
-• 导入配置：导入之前导出的配置文件
-• 导出配置：导出当前配置供后续使用
-• 下载主题：下载可用于 ECharts 的主题文件
-• 使用主题：查看和复制生成的主题代码
-
-支持的格式：
-• JSON：ECharts 主题配置文件
-• JavaScript：可直接引入的 JS 文件`,
+ message: `<div class="modal-body">
+ <h4>主题在线构建工具是什么？</h4>
+ <p>"主题"是 ECharts 图表的风格抽象，用于统一多个图表的风格样式。使用主题在线构建工具，可以快速直观地生成主题配置文件，并在 ECharts 中使用自定义的主题样式。</p>
+ <p>在此主题的基础上，你仍然可以使用 <code>setOption</code> 覆盖或设置主题样式。</p>
+ <p>ECharts 官方提供 <code>default</code>、<code>infographic</code>、<code>shine</code>、<code>roma</code>、<code>macarons</code>、<code>vintage</code> 等主题，可供<a href="http://echarts.baidu.com/download-theme.html" target="_blank">下载</a>使用。</p>
+
+ <h4>导入、导出</h4>
+ <p>为了便于二次修改，我们的主题构建工具支持导入、导出配置项，导出的 JSON 文件仅用于在本工具中导入使用，而不能直接作为主题在 ECharts 中注册。</p>
+ </div>`,
+ allowHtml: true,
confirmButtonText: '知道了'
})
}
@@ -941,4 +939,46 @@ const handleFileImport = async (event: Event) => {
font-size: 12px !important;
line-height: 1 !important;
}
+
+/* Help dialog styles */
+:global(.modal-body) {
+ text-align: left;
+ padding: 5px 0;
+ white-space: normal;
+}
+
+:global(.modal-body h4) {
+ margin: 30px 0 10px;
+ color: #333;
+ font-size: 16px;
+ font-weight: 500;
+}
+
+:global(.modal-body h4:first-child) {
+ margin-top: 0;
+}
+
+:global(.modal-body p) {
+ margin: 15px 0;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #555;
+}
+
+:global(.modal-body code) {
+ background: #f0f0f0;
+ padding: 2px 4px;
+ border-radius: 3px;
+ font-family: Monaco, monospace;
+ font-size: 90%;
+}
+
+:global(.modal-body a) {
+ color: #1989fa;
+ text-decoration: none;
+}
+
+:global(.modal-body a:hover) {
+ text-decoration: underline;
+}
</style>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org