docs: update

Author: liihuu

docs/.vitepress/config/index.js

@@ -24,7 +24,7 @@ function config () {
     metaChunk: true,
     title: 'KLineChart',
     outDir: '../website',
-    srcExclude: ['@components', 'data', '@views'],
+    srcExclude: ['@components', '@views', '@i18n'],
     lastUpdated: true,
     markdown: {
       theme: {

docs/@i18n/en-US.json

@@ -0,0 +1,20 @@
+{
+  "view_banner_tip": "🔔  v9 will be maintained until May 2025. It is recommended to migrate to the new version as soon as possible.",
+  "view_customize_title": "Customized Service",
+  "view_customize_free_title": "Free",
+  "view_customize_free_desc": "Free professional K Line component",
+  "view_customize_free_price": "$ 0",
+  "view_customize_free_features": ["Highly scalable core chart", "Full features Pro version chart", "Complete development documents", "Development discussion WeChat group"],
+  "view_customize_free_tip": "Contact the developer to join the development discussion group.",
+  "view_customize_sponsor_title": "Sponsor",
+  "view_customize_sponsor_desc": "Comprehensive answers to development issues",
+  "view_customize_sponsor_sponsor": "Sponsor",
+  "view_customize_sponsor_price": "$ 78",
+  "view_customize_sponsor_features": ["All services in the free version", "Homepage sponsor advertising space", "One-on-one Q&A", "New features priority support"],
+  "view_customize_sponsor_tip": "Donate to the project on the sponsorship page, and after completing the donation, contact the developer to get one week of answers to your questions.",
+  "view_customize_custom_title": "Customized",
+  "view_customize_custom_desc": "Exclusive customization and extended development",
+  "view_customize_custom_price": "$ Discussion",
+  "view_customize_custom_features": ["All services of the sponsored version", "UI custom development", "Extended custom development", "Other chart custom development"],
+  "view_customize_custom_tip": "Contact developers to discuss specific requirements."
+}

docs/@i18n/index.js

@@ -0,0 +1,11 @@
+import zhCN from './zh-CN.json'
+import enUS from './en-US.json'
+
+const locales = {
+  'zh-CN': zhCN,
+  'en-US': enUS
+}
+
+export default function i18n (key, locale = 'zh-CN') {
+  return (locales[locale] || {})[key] || key
+}

docs/@i18n/zh-CN.json

@@ -0,0 +1,20 @@
+{
+  "view_banner_tip": "🔔  v9 将维护到 2025 年 5 月份，建议尽快迁移到新版本。",
+  "view_customize_title": "定制化服务",
+  "view_customize_free_title": "免费版",
+  "view_customize_free_desc": "免费的专业级K线组件",
+  "view_customize_free_price": "¥ 0",
+  "view_customize_free_features": ["高度可扩展的核心图表", "功能完善的Pro版图表", "完善的开发文档", "开发讨论微信群"],
+  "view_customize_free_tip": "联系开发者加入开发讨论群。",
+  "view_customize_sponsor_title": "赞助版",
+  "view_customize_sponsor_desc": "全方位解答遇到的问题",
+  "view_customize_sponsor_sponsor": "赞助",
+  "view_customize_sponsor_price": "¥ 500",
+  "view_customize_sponsor_features": ["免费版所有服务", "首页赞助商广告位", "一对一答疑", "新功能优先支持"],
+  "view_customize_sponsor_tip": "在赞助页对项目进行捐赠，完成之后联系开发者获得一周时间的答疑。",
+  "view_customize_custom_title": "定制版",
+  "view_customize_custom_desc": "专属定制，扩展开发",
+  "view_customize_custom_price": "¥ 面议",
+  "view_customize_custom_features": ["赞助版所有服务", "UI定制开发", "扩展定制开发", "其它图表相关定制开发"],
+  "view_customize_custom_tip": "联系开发者，讨论具体需求。"
+}

docs/@views/Banner.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="banner" :class="{ 'top': y === 0 }" role="banner" v-if="isVisible">
-    <span v-if="lang === 'zh-CN'">🔔&nbsp;&nbsp;v9 将维护到 2025 年 5 月份，建议尽快迁移到新版本。</span>
-    <span v-else>🔔&nbsp;&nbsp;v9 will be maintained until May 2025. It is recommended to migrate to the new version as soon as possible.</span>
+  <div class="banner" :class="{ 'top': y === 0 }" role="banner" v-if="visible">
+    <span>{{ i18n('view_banner_tip', lang) }}</span>
     <button class="banner-close" @click.prevent="closeBanner">
       <span class="close">&times;</span>
     </button>
@@ -13,21 +12,22 @@ import { ref, onMounted } from 'vue'
 import { useWindowScroll } from '@vueuse/core'
 import { useData } from 'vitepress'
 
+import i18n from '../@i18n'
+
 const { y } = useWindowScroll()
 
-const isVisible = ref(true)
+const visible = ref(false)
 
 const { lang } = useData()
 
 const closeBanner = () => {
-  isVisible.value = false
+  visible.value = false
   document.documentElement.classList.remove('banner-fixed')
 }
 
 onMounted(() => {
-  if (isVisible.value) {
-    document.documentElement.classList.add('banner-fixed')
-  }
+  visible.value = true
+  document.documentElement.classList.add('banner-fixed')
 })
 </script>
 <style scoped>
@@ -45,7 +45,7 @@ onMounted(() => {
   right: 0;
   z-index: 61;
   width: 100%;
-  height: var(--vp-layout-top-height);
+  height: var(--vp-layout-top-height, 50px);
   background-color: var(--vp-c-bg);
   overflow: hidden;
   margin: 0;

docs/@views/customize/index.vue

@@ -1,45 +1,46 @@
 <template>
   <div class="customize">
-    <h1 class="customize-title">{{ lang === 'zh-CN' ? '定制化服务' : 'Customized Service' }}</h1>
+    <h1 class="customize-title">{{i18n('view_customize_title', lang)}}</h1>
     <div class="customize-content">
       <div class="customize-content-item customize-content-free-item">
         <div class="customize-content-item-title-container">
-          <h3 class="customize-content-item-title">{{ lang === 'zh-CN' ? '免费版' : 'Free' }}</h3>
-          <p class="customize-content-item-sub-title">{{ lang === 'zh-CN' ? '免费的专业级K线组件' : 'Free professional K Line component' }}</p>
+          <h3 class="customize-content-item-title">{{i18n('view_customize_free_title', lang)}}</h3>
+          <p class="customize-content-item-sub-title">{{i18n('view_customize_free_desc', lang)}}</p>
           <p class="customize-content-item-price">
-            {{ lang === 'zh-CN' ? '¥ 0' : '$ 0' }}
+            {{i18n('view_customize_free_price', lang)}}
           </p>
         </div>
-        <FeatureList :features="lang === 'zh-CN' ? ['高度可扩展的核心图表', '功能完善的Pro版图表', '完善的开发文档', '开发讨论微信群'] : ['Highly scalable core chart', 'Full features Pro version chart', 'Complete development documents', 'Development discussion WeChat group']"/>
+        <FeatureList :features="i18n('view_customize_free_features', lang)"/>
         <p class="customize-content-item-tip">
-          {{ lang === 'zh-CN' ? '联系开发者加入开发讨论群。' : 'Contact the developer to join the development discussion group.' }}
+          {{i18n('view_customize_free_tip', lang)}}
         </p>
       </div>
       <div class="customize-content-item customize-content-qa-item">
         <div class="customize-content-item-title-container">
-          <h3 class="customize-content-item-title">{{ lang === 'zh-CN' ? '赞助版' : 'Sponsor' }}</h3>
-            <p class="customize-content-item-sub-title">{{ lang === 'zh-CN' ? '全方位解答遇到的问题' : 'Comprehensive answers to development issues' }}</p>
+          <h3 class="customize-content-item-title">{{i18n('view_customize_sponsor_title', lang)}}</h3>
+            <p class="customize-content-item-sub-title">{{i18n('view_customize_sponsor_desc', lang)}}</p>
             <p class="customize-content-item-price">
-              <span style="font-size: 14px; padding-right: 6px; padding-top: 4px; font-weight: normal;">{{ lang === 'zh-CN' ? '赞助' : 'Sponsor' }}</span>{{ lang === 'zh-CN' ? `¥ 500` : '$ 78' }}
+              <span style="font-size: 14px; padding-right: 6px; padding-top: 4px; font-weight: normal;">{{i18n('view_customize_sponsor_sponsor', lang)}}</span>
+              {{i18n('view_customize_sponsor_price', lang)}}
             </p>
         </div>
 
-        <FeatureList :features="lang === 'zh-CN' ? ['免费版所有服务', '首页赞助商广告位', '一对一答疑', '新功能优先支持'] : ['All services in the free version', 'Homepage sponsor advertising space', 'One-on-one Q&A', 'New features priority support']"/>
+        <FeatureList :features="i18n('view_customize_sponsor_features', lang)"/>
         <p class="customize-content-item-tip">
-          {{ lang === 'zh-CN' ? '在赞助页对项目进行捐赠，完成之后联系开发者获得一周时间的答疑。' : 'Donate to the project on the sponsorship page, and after completing the donation, contact the developer to get one week of answers to your questions.' }}
+          {{i18n('view_customize_sponsor_tip', lang)}}
         </p>
       </div>
       <div class="customize-content-item customize-content-custom-item">
         <div class="customize-content-item-title-container">
-          <h3 class="customize-content-item-title">{{ lang === 'zh-CN' ? '定制版' : 'Customized' }}</h3>
-          <p class="customize-content-item-sub-title">{{ lang === 'zh-CN' ? '专属定制，扩展开发' : 'Exclusive customization and extended development' }}</p>
+          <h3 class="customize-content-item-title">{{i18n('view_customize_custom_title', lang)}}</h3>
+          <p class="customize-content-item-sub-title">{{i18n('view_customize_custom_desc', lang)}}</p>
           <p class="customize-content-item-price">
-            {{ lang === 'zh-CN' ? '¥ 面议' : '$ Discussion' }}
+            {{i18n('view_customize_custom_price', lang)}}
           </p>
         </div>
-        <FeatureList :features="lang === 'zh-CN' ? ['赞助版所有服务', 'UI定制开发', '扩展定制开发', '其它图表相关定制开发'] : ['All services of the sponsored version', 'UI custom development', 'Extended custom development', 'Other chart custom development']"/>
+        <FeatureList :features="i18n('view_customize_custom_features', lang)"/>
         <p class="customize-content-item-tip">
-          {{ lang === 'zh-CN' ? '联系开发者，讨论具体需求。' : 'Contact developers to discuss specific requirements.' }}
+          {{i18n('view_customize_custom_tip', lang)}}
         </p>
       </div>
     </div>
@@ -49,6 +50,8 @@
 <script setup>
 import { useData } from 'vitepress'
 
+import i18n from '../../@i18n'
+
 import FeatureList from './FeatureList.vue'
 
 const { lang } = useData()
@@ -183,6 +186,7 @@ const { lang } = useData()
   font-size: 14px;
   padding: 0 20px;
   color: #e77c0a;
+  line-height: 18px;
   border-top: solid 1px var(--vp-c-gutter);
 }
 

package.json

@@ -107,7 +107,7 @@
     "shiki": "^2.4.2",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
-    "vitepress": "2.0.0-alpha.5"
+    "vitepress": "2.0.0-alpha.6"
   },
   "pnpm": {
     "overrides": {