docs: i18n

Author: liihuu

docs/@components/ChartPreview.vue

@@ -15,11 +15,13 @@ import ResizeObserver from 'resize-observer-polyfill'
 import stackBlitz from '@stackblitz/sdk'
 import { getParameters } from 'codesandbox/lib/api/define'
 
-import Tooltip from './Tooltip.vue';
+import i18n from '../@i18n'
+
+import Tooltip from './Tooltip.vue'
+import Loading from './Loading.vue'
 
 const { isDark, lang } = useData()
 
-import Loading from './Loading.vue'
 
 const href = ref()
 
@@ -256,7 +258,7 @@ onUnmounted(() => {
           name="parameters"
           :value="getCodeSandboxParameters()"/>
         <button type="submit">
-          <Tooltip :tip="lang === 'zh-CN' ? '在 CodeSandbox 中打开' : 'Open in CodeSandbox'">
+          <Tooltip :tip="i18n('component_chart_preview_open_in_codesandbox', lang)">
             <svg width="18px" height="18px" viewBox="0 0 24 24">
               <path stroke="none" d="M2.34 6.423L12 .845l9.66 5.578v11.154L12 23.155l-9.66-5.578zM12 3.155L9.67 4.5L12 5.845L14.33 4.5zm4.33 2.5L12 8.155l-4.33-2.5L5.34 7L12 10.845L18.66 7zm3.33 3.077L13 12.577v7.69l2.34-1.35v-4.994l4.32-2.495zm0 5.006l-2.32 1.34v2.684l2.32-1.34zm-15.32-2.31l4.32 2.495v4.994l2.34 1.35v-7.69L4.34 8.732zm0 2.31v2.685l2.32 1.34v-2.686z"/>
             </svg>
@@ -272,22 +274,22 @@ onUnmounted(() => {
           name="data"
           :value="getCodePenParameters()"/>
         <button type="submit">
-          <Tooltip :tip="lang === 'zh-CN' ? '在 CodePen 中打开' : 'Open in CodePen'">
+          <Tooltip :tip="i18n('component_chart_preview_open_in_codepen', lang)">
             <svg width="20px" height="20px" viewBox="0 0 24 24"><path stroke="none" d="m21.66 8.264l-9.18-6.12a.88.88 0 0 0-.966 0l-9.146 6.12c-.225.129-.354.451-.354.676v6.087c0 .258.129.548.354.741l9.147 6.087a.88.88 0 0 0 .966 0l9.146-6.087c.226-.129.355-.45.355-.74V8.94c.032-.257-.097-.547-.323-.676m-8.793-3.8l6.731 4.509l-3.06 1.996l-3.703-2.512c.032 0 .032-3.993.032-3.993m-1.707 0v3.993L7.424 10.97L4.43 8.973zM3.753 10.55L5.878 12l-2.125 1.45zm7.407 8.985l-6.73-4.509l2.994-1.996l3.736 2.512zm.87-5.475L8.97 12l3.06-2.061L15.09 12zm.837 5.475v-3.993l3.736-2.512l2.995 1.996zm7.407-6.087L18.15 12l2.125-1.45z"/></svg>
           </Tooltip>
         </button>
       </form>
       <button
         @click="openStackBlitz()">
-        <Tooltip :tip="lang === 'zh-CN' ? '在 StackBlitz 中打开' : 'Open in StackBlitz'">
+        <Tooltip :tip="i18n('component_chart_preview_open_in_stackblitz', lang)">
           <svg width="18px" height="18px" viewBox="0 0 24 24">
             <path stroke="none" d="M10.797 14.182H3.635L16.728 0l-3.525 9.818h7.162L7.272 24l3.524-9.818Z"/>
           </svg>
         </Tooltip>
       </button>
       <button
         @click="showCode = !showCode">
-        <Tooltip :tip="lang === 'zh-CN' ? (showCode ? '收起代码' : '显示代码') : (showCode ? 'Hide code' : 'Show code')">
+        <Tooltip :tip="showCode ? i18n('component_chart_preview_hide_code', lang) : i18n('component_chart_preview_show_code', lang)">
           <svg v-if="!showCode" width="20px" height="20px" viewBox="0 0 16 16">
             <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.25 11.25L1.75 8l3.5-3.25m5.5 6.5L14.25 8l-3.5-3.25"/>
           </svg>

docs/@i18n/en-US.json

@@ -1,5 +1,48 @@
 {
   "view_banner_tip": "🔔  v9 will be maintained until May 2025. It is recommended to migrate to the new version as soon as possible.",
+  "view_home_hero_title": "Highly customizable professional lightweight financial chart",
+  "view_home_hero_desc": "Easy to use, lightweight and smooth, suitable for web front-end financial chart with rich scenarios.",
+  "view_home_hero_button": "Getting Started",
+  "view_home_top_sponsor": "Top Sponsor",
+  "view_home_quick_create_chart_title": "Create chart easily and quickly",
+  "view_home_quick_create_chart_desc": "KLineChart allows you to create a financial chart with just a few lines of code, while also utilizing various commonly used technical indicators built-in to make the chart look more professional.",
+  "view_home_quick_create": "Quick started",
+  "view_home_faq_title": "FAQ",
+  "view_home_faq_desc": "Most of the problems encountered during the development process can be answered from the following content.",
+  "view_home_faq_question_1": "After the chart is initialized, only one line can be seen?",
+  "view_home_faq_answer_1": "The chart always fills the container, checking to see if the container has height.",
+  "view_home_faq_question_2": "The candle shows a line, no fluctuation, what to do?",
+  "view_home_faq_answer_2": "To set the precision when setting the trading pair, call <code>setSymbol({ ticker: 'TestSymbol', pricePrecision: 6, volumePrecision: 6 })<\/code> .",
+  "view_home_faq_question_3": "How to create a real-time chart?",
+  "view_home_faq_answer_3": "Through style settings, <code>chart.setStyles({ candle: { type: 'area' }})<\/code> .",
+  "view_home_faq_question_4": "Built-in technical indicators, calculated data is not what you want, how to do?",
+  "view_home_faq_answer_4": "You can override <code>calc<\/code> by the chart method <code>createIndicator<\/code> or <code>overrideIndicator<\/code>.",
+  "view_home_faq_question_5": "What if I want to create an indicator other than the built-in technical indicator?",
+  "view_home_faq_answer_5": "Chart support custom technical indicators, see <a rel='noreferrer' href='/en-US/guide/indicator' style='cursor:pointer;color:var(--vp-c-indigo-1)'>indicators<\/a> for details.",
+  "view_home_faq_question_6": "Want to mark the point of sale, how should do?",
+  "view_home_faq_answer_6": "Overlays can be used. The built-in overlay has a <code>simpleAnnotation</code>, which can be created with the chart api <code>createOverlay({ name: 'simpleAnnotation', ... })<\/code>.",
+  "view_home_sponsor_title": "Sponsors",
+  "view_home_sponsor_desc": "Maintaining such a chart and developing new features requires tremendous effort, which can only be sustained with the generous financial support of our sponsors.",
+  "view_home_sponsor_become_sponsor": "Become a sponsor",
+  "view_local_dev_dir_explain_dist": "Store compiled files",
+  "view_local_dev_dir_explain_docs": "Docs directory",
+  "view_local_dev_dir_explain_scripts": "Built script directory",
+  "view_local_dev_dir_explain_src": "Source code directory",
+  "view_local_dev_dir_explain_common": "Store some public basic files",
+  "view_local_dev_dir_explain_utils": "Util directory",
+  "view_local_dev_dir_explain_component": "Component directory",
+  "view_local_dev_dir_explain_extension": "Some module directory that can be extended",
+  "view_local_dev_dir_explain_figure": "Basic drawing directory",
+  "view_local_dev_dir_explain_i18n": "International directory",
+  "view_local_dev_dir_explain_indicator": "Indicator directory",
+  "view_local_dev_dir_explain_overlay": "Overlay directory",
+  "view_local_dev_dir_explain_styles": "Style directory",
+  "view_local_dev_dir_explain_x_axis": "X-axis directory",
+  "view_local_dev_dir_explain_y_axis": "Y-axis directory",
+  "view_local_dev_dir_explain_pane": "Panel directory",
+  "view_local_dev_dir_explain_view": "Draw module directory",
+  "view_local_dev_dir_explain_widget": "Draw module collection directory",
+  "view_local_dev_dir_explain_tests": "Test module directory",
   "view_customize_title": "Customized Service",
   "view_customize_free_title": "Free",
   "view_customize_free_desc": "Free professional K Line component",
@@ -16,5 +59,15 @@
   "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."
+  "view_customize_custom_tip": "Contact developers to discuss specific requirements.",
+  "view_404_title": "Page Not Found",
+  "view_404_desc_1": "Make sure the address is correct and the page hasn't moved.",
+  "view_404_desc_2": "Please contact your KLineChart administrator if you think this is a mistake.",
+  "view_404_back_home": "Take me home",
+
+  "component_chart_preview_open_in_codesandbox": "Open in CodeSandbox",
+  "component_chart_preview_open_in_codepen": "Open in CodePen",
+  "component_chart_preview_open_in_stackblitz": "Open in StackBlitz",
+  "component_chart_preview_show_code": "Show code",
+  "component_chart_preview_hide_code": "Hide code"
 }

docs/@i18n/zh-CN.json

@@ -1,5 +1,48 @@
 {
   "view_banner_tip": "🔔  v9 将维护到 2025 年 5 月份，建议尽快迁移到新版本。",
+  "view_home_hero_title": "可高度自定义的专业级轻量金融图表",
+  "view_home_hero_desc": "简单易用，轻量流畅，适用场景丰富的 Web 前端金融图表。",
+  "view_home_hero_button": "快速开始",
+  "view_home_top_sponsor": "顶级赞助商",
+  "view_home_quick_create_chart_title": "简单快速创建图表",
+  "view_home_quick_create_chart_desc": "KLineChart 让你使用几行代码就可以创建一个金融图表，同时可以使用内置的多种常用技术指标，让图表看起来更专业。",
+  "view_home_quick_create": "快速创建",
+  "view_home_faq_title": "常见问题",
+  "view_home_faq_desc": "开发过程遇到的问题，大多都可以从以下内容中找到答案。",
+  "view_home_faq_question_1": "初始化图表后，只能看到一个x轴，是怎么回事？",
+  "view_home_faq_answer_1": "图表总是会填充容器，检查一下容器是否有高度。",
+  "view_home_faq_question_2": "蜡烛柱显示趋近于一条线，看不到波动，怎么办？",
+  "view_home_faq_answer_2": "在设置交易对的时候要设置精度，调用<code>setSymbol({ ticker: 'TestSymbol', pricePrecision: 6, volumePrecision: 6 })<\/code> 。",
+  "view_home_faq_question_3": "分时图怎么创建？",
+  "view_home_faq_answer_3": "通过样式设置，<code>chart.setStyles({ candle: { type: 'area' }})<\/code> 。",
+  "view_home_faq_question_4": "内置的技术指标，计算出来的数据不是想要的，怎么办？",
+  "view_home_faq_answer_4": "可以通过图表方法 <code>createIndicator<\/code> 或者 <code>overrideIndicator<\/code> 重写 <code>calc<\/code> 即可。",
+  "view_home_faq_question_5": "想创建一个内置技术指标之外的指标，怎么办？",
+  "view_home_faq_answer_5": "图表支持自定义技术指标，详情参阅<a rel='noreferrer' href='/guide/indicator' style='cursor:pointer;color:var(--vp-c-indigo-1)'>技术指标<\/a>。",
+  "view_home_faq_question_6": "想标记一下买卖点，该怎么做？",
+  "view_home_faq_answer_6": "可以使用覆盖物，内置的覆盖物有一个 <code>simpleAnnotation<\/code> ，用图表api创建即可 <code>createOverlay({ name: 'simpleAnnotation', ... })<\/code> 。",
+  "view_home_sponsor_title": "赞助商",
+  "view_home_sponsor_desc": "维护这样一个图表和开发新功能需要巨大精力，只有在我们的赞助者慷慨的财务支持下才得以持续。",
+  "view_home_sponsor_become_sponsor": "成为赞助商",
+  "view_local_dev_dir_explain_dist": "存放编译生成的文件",
+  "view_local_dev_dir_explain_docs": "文档目录",
+  "view_local_dev_dir_explain_scripts": "构建的脚本目录",
+  "view_local_dev_dir_explain_src": "源码目录",
+  "view_local_dev_dir_explain_common": "存放公共的基础的一些文件",
+  "view_local_dev_dir_explain_utils": "工具类文件夹",
+  "view_local_dev_dir_explain_component": "组件文件夹",
+  "view_local_dev_dir_explain_extension": "可扩展的一些模块文件夹",
+  "view_local_dev_dir_explain_figure": "基础图形文件夹",
+  "view_local_dev_dir_explain_i18n": "国际化文件夹",
+  "view_local_dev_dir_explain_indicator": "指标文件夹",
+  "view_local_dev_dir_explain_overlay": "覆盖物文件夹",
+  "view_local_dev_dir_explain_styles": "样式文件夹",
+  "view_local_dev_dir_explain_x_axis": "x轴文件夹",
+  "view_local_dev_dir_explain_y_axis": "y轴文件夹",
+  "view_local_dev_dir_explain_pane": "窗口文件夹",
+  "view_local_dev_dir_explain_view": "绘制模块文件夹",
+  "view_local_dev_dir_explain_widget": "绘制模块集合文件夹",
+  "view_local_dev_dir_explain_tests": "测试模块文件夹",
   "view_customize_title": "定制化服务",
   "view_customize_free_title": "免费版",
   "view_customize_free_desc": "免费的专业级K线组件",
@@ -16,5 +59,15 @@
   "view_customize_custom_desc": "专属定制，扩展开发",
   "view_customize_custom_price": "¥ 面议",
   "view_customize_custom_features": ["赞助版所有服务", "UI定制开发", "扩展定制开发", "其它图表相关定制开发"],
-  "view_customize_custom_tip": "联系开发者，讨论具体需求。"
+  "view_customize_custom_tip": "联系开发者，讨论具体需求。",
+  "view_404_title": "未找到页面",
+  "view_404_desc_1": "确保地址正确且页面未移除。",
+  "view_404_desc_2": "如果您认为这是一个错误，请联系您的 KLineChart 管理员。",
+  "view_404_back_home": "返回首页",
+
+  "component_chart_preview_open_in_codesandbox": "在 CodeSandbox 中打开",
+  "component_chart_preview_open_in_codepen": "在 CodePen 中打开",
+  "component_chart_preview_open_in_stackblitz": "在 StackBlitz 中打开",
+  "component_chart_preview_show_code": "显示代码",
+  "component_chart_preview_hide_code": "收起代码"
 }

docs/@views/NotFound.vue

@@ -2,6 +2,8 @@
 import { onMounted, ref } from 'vue'
 import { withBase, useData } from 'vitepress'
 
+import i18n from '../@i18n'
+
 const { lang } = useData()
 const root = ref('/')
 onMounted(() => {
@@ -17,16 +19,16 @@ onMounted(() => {
       <span>4</span>
     </div>
 
-    <p class="title">{{ lang === 'zh-CN' ? '未找到页面' : 'Page Not Found'}}</p>
+    <p class="title">{{ i18n('view_404_title', lang) }}</p>
     <p class="tip" style="margin-top: 30px;">
-      {{ lang === 'zh-CN' ? '确保地址正确且页面未移除。' : `Make sure the address is correct and the page hasn't moved.` }}
+      {{ i18n('view_404_desc_1', lang) }}
     </p>
     <p class="tip">
-      {{ lang === 'zh-CN' ? '如果您认为这是一个错误，请联系您的 KLineChart 管理员。' : 'Please contact your KLineChart administrator if you think this is a mistake.' }}
+      {{ i18n('view_404_desc_2', lang) }}
     </p>
     <div class="action">
       <a class="link" :href="withBase(root)" aria-label="go to home">
-        {{ lang === 'zh-CN' ? '返回首页' : 'Take me home' }}
+        {{ i18n('view_404_back_home', lang) }}
       </a>
     </div>
   </div>

docs/@views/customize/index.vue

@@ -1,46 +1,48 @@
 <template>
   <div class="customize">
-    <h1 class="customize-title">{{i18n('view_customize_title', lang)}}</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">{{i18n('view_customize_free_title', lang)}}</h3>
-          <p class="customize-content-item-sub-title">{{i18n('view_customize_free_desc', lang)}}</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">
-            {{i18n('view_customize_free_price', lang)}}
+            {{ i18n('view_customize_free_price', lang) }}
           </p>
         </div>
         <FeatureList :features="i18n('view_customize_free_features', lang)"/>
         <p class="customize-content-item-tip">
-          {{i18n('view_customize_free_tip', lang)}}
+          {{ 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">{{i18n('view_customize_sponsor_title', lang)}}</h3>
-            <p class="customize-content-item-sub-title">{{i18n('view_customize_sponsor_desc', lang)}}</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;">{{i18n('view_customize_sponsor_sponsor', lang)}}</span>
-              {{i18n('view_customize_sponsor_price', lang)}}
+              <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="i18n('view_customize_sponsor_features', lang)"/>
         <p class="customize-content-item-tip">
-          {{i18n('view_customize_sponsor_tip', lang)}}
+          {{ 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">{{i18n('view_customize_custom_title', lang)}}</h3>
-          <p class="customize-content-item-sub-title">{{i18n('view_customize_custom_desc', lang)}}</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">
-            {{i18n('view_customize_custom_price', lang)}}
+            {{ i18n('view_customize_custom_price', lang) }}
           </p>
         </div>
         <FeatureList :features="i18n('view_customize_custom_features', lang)"/>
         <p class="customize-content-item-tip">
-          {{i18n('view_customize_custom_tip', lang)}}
+          {{ i18n('view_customize_custom_tip', lang) }}
         </p>
       </div>
     </div>