docs: rewrite home page

2024-11-25 16:22:43 +08:00 · 2024-10-26 01:40:14 +08:00 · 2024-10-26 01:40:14 +08:00 · dbf0545bd8
commit dbf0545bd8
parent 5677da8182
34 changed files with 8742 additions and 146 deletions
--- a/docs/.vitepress/config/index.js
+++ b/docs/.vitepress/config/index.js
@ -1,5 +1,4 @@
 import { defineConfig } from 'vitepress'
-import { transformerTwoslash } from '@shikijs/vitepress-twoslash'

 import zhCN, { search as zhCNSearch } from './zh-CN'
 import enUS, { search as enUSSearch } from './en-US'
@ -21,12 +20,9 @@ export default defineConfig({
  lastUpdated: true,
  markdown: {
    theme: {
-      light: 'vitesse-light',
-      dark: 'vitesse-dark',
-    },
-    codeTransformers: [
-      transformerTwoslash(),
-    ],
+      light: 'github-light',
+      dark: 'github-dark',
+    }
  },
  head: [
    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/images/logo.svg' }],
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@ -1,20 +1,16 @@
 // https://vitepress.dev/guide/custom-theme
 import Theme from 'vitepress/theme'
-import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'

 import Layout from '../../@views/Layout.vue'

 import Badge from '../../@components/Badge.vue'

-import '@shikijs/vitepress-twoslash/style.css'
-
 import './style.css'

 export default {
  extends: Theme,
  Layout: Layout,
  enhanceApp({ app }) {
-    app.use(TwoslashFloatingVue)
    app.component('Badge', Badge)
    // ...
  }
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@ -8,9 +8,9 @@
 * -------------------------------------------------------------------------- */

 :root {
-  --vp-c-indigo-1: #1677FF;
-  --vp-c-indigo-2: #3086ff;
-  --vp-c-indigo-3: #4995ff;
+  --vp-c-indigo-1: #E6AC00;
+  --vp-c-indigo-2: #d6ac2e;
+  --vp-c-indigo-3: #c9aa4e;

  --vp-c-text-1: rgb(40, 42, 43);
  --vp-c-text-2: rgba(40, 42, 43, .72);
@ -37,19 +37,8 @@
  --vp-code-line-height: 1.6;
  --vp-code-font-size: 1em;

-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(
-    145deg,
-    var(--custom-green) 26%,
-    var(--custom-red)
-  );
-
-  --vp-home-hero-image-background-image: linear-gradient(
-    -45deg,
-    rgba(45, 192, 142, 0.3),
-    rgba(249, 40, 85, 0.3)
-  );
-  --vp-home-hero-image-filter: blur(40px);
+  --vp-home-hero-bg: linear-gradient(180deg, rgba(238, 238, 238, 0) 0%, rgba(234, 204, 117, 0.2) 52%, rgba(230, 172, 0, 0) 100%);
+  --vp-c-bg-soft: #FAFAFA;
 }

 .dark {
@ -60,21 +49,69 @@
  --vp-c-bg: #121212;
  --vp-c-divider: #232525;
  --vp-c-gutter: var(--vp-c-divider);
+
+  --vp-home-hero-bg: linear-gradient(180deg, rgba(238, 238, 238, 0) 0%, rgba(234, 204, 117, 0.15) 52%, rgba(230, 172, 0, 0) 100%);
+  --vp-c-bg-soft: rgba(250, 250, 250, 0.05);
 }

 body {
  font-size: 14px;
 }

+.VPFeatures .VPFeature {
+  background-color: transparent;
+  border: none;
+}
+
+.VPFeatures .VPFeature .box {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.VPFeatures .VPFeature .VPImage {
+  margin-bottom: 0;
+  width: 40px;
+  height: 40px;
+}
+
+.VPFeatures .VPFeature .title {
+  padding: 8px 0;
+  line-height: normal;
+}
+
+.VPFeatures .VPFeature .details {
+  padding: 0;
+  font-weight: normal;
+}
+
@media (min-width: 640px) {
-  :root {
-    --vp-home-hero-image-filter: blur(60px);
+  .VPFeatures .VPFeature .title {
+    font-size: 18px;
+    line-height: normal;
+    padding: 12px 0;
+  }
+
+  .VPFeatures .VPFeature .VPImage {
+    margin-bottom: 0;
+    width: 48px;
+    height: 48px;
+  }
+
+  .VPFeatures .VPFeature .box {
+    padding-top: 24px;
+    padding-bottom: 24px;
  }
 }

@media (min-width: 960px) {
-  :root {
-    --vp-home-hero-image-filter: blur(80px);
+  .VPFeatures .VPFeature .title {
+    font-size: 20px;
+    padding: 16px 0;
+  }
+  
+  .VPFeatures .VPFeature .details {
+    font-size: 16px;
+    line-height: 26px;
  }
 }

--- a/docs/@components/Chart.vue
+++ b/docs/@components/Chart.vue
@ -0,0 +1,93 @@
+<script setup>
+import { ref, onMounted, onUnmounted, watch, defineProps } from 'vue'
+import { useData } from 'vitepress';
+
+import { transform } from '@babel/standalone'
+
+import ResizeObserver from 'resize-observer-polyfill'
+
+const { isDark } = useData()
+
+import Loading from './Loading.vue'
+
+const href = ref()
+
+const props = defineProps(['height', 'js', 'css'])
+
+const version = ref('9.5.0')
+const loading = ref(true)
+
+let observer
+
+onMounted(() => {
+  href.value = location.href
+  loading.value = true
+  const container = document.getElementById('container')
+  const coreScript = document.createElement('script')
+  coreScript.defer = true
+  coreScript.src = 'https://unpkg.com/klinecharts/dist/umd/klinecharts.min.js'
+  coreScript.onload = () => {
+    const klinecharts = window.klinecharts
+    if (klinecharts) {
+      version.value = klinecharts.version()
+      
+      if (props.css) {
+        const style = document.createElement('style')
+        style.setAttribute('type', 'text/css')
+        style.innerHTML = props.css
+        container.appendChild(style)
+      }
+      if (props.js) {
+        const transformJs = props.js + '\n' + 'window.chart = chart'
+        const { code } = transform(transformJs,  {
+          presets: [
+          'es2015',
+            ['stage-3', { decoratorsBeforeExport: true }],
+          ],
+          plugins: ['transform-modules-umd'],
+        })
+
+        const chartDom = document.createElement('div')
+        chartDom.style.height = props.height || '430px'
+        chartDom.id = 'k-line-chart'
+        container.appendChild(chartDom)
+        const script = document.createElement('script')
+        script.innerHTML = code
+        container.appendChild(script)
+        window.chart.setStyles(isDark.value ? 'dark' : 'light')
+
+        observer = new ResizeObserver(entries => {
+          window.chart.resize()
+        })
+        observer.observe(container)
+      }
+      loading.value = false
+    }
+  }
+  container.appendChild(coreScript)
+})
+
+watch(isDark, (newValue) => {
+  if (newValue) {
+    window.chart.setStyles('dark')
+  } else {
+    window.chart.setStyles('light')
+  }
+})
+
+onUnmounted(() => {
+  const container = document.getElementById('container')
+  if (observer && container) {
+    observer.unobserve(container)
+  }
+  if (window.klinecharts) {
+    window.klinecharts.dispose('k-line-chart')
+  }
+})
+</script>
+
+<template>
+<div id="container" style="position: relative;width: 100%;">
+  <Loading v-if="loading"/>
+</div>
+</template>
--- a/docs/@components/CodeHighlight.vue
+++ b/docs/@components/CodeHighlight.vue
@ -0,0 +1,52 @@
+<script setup>
+import { onMounted, ref, defineProps } from 'vue'
+import { codeToHtml } from 'shiki'
+
+const props = defineProps(['code', 'width'])
+
+const code = ref('')
+
+onMounted(async () => {
+  code.value = await codeToHtml(props.code, {
+    lang: 'javascript',
+    themes: { 
+      light: 'github-light',
+      dark: 'github-dark',
+    },
+    defaultColor: 'light'
+  })
+})
+</script>
+
+<template>
+  <div
+    class="code-highlight"
+    :style="{ 'width': props.width }">
+    <slot></slot>
+    <div class="code" v-html="code"/>
+  </div>
+</template>
+
+<style>
+.code-highlight {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  border: solid 1px var(--vp-c-gutter);
+  background-color: var(--vp-code-block-bg)!important;
+}
+
+.code-highlight .code {
+  overflow: auto;
+  padding: 18px 20px;
+}
+
+.code-highlight .code .shiki {
+  margin: 0;
+  background-color: transparent!important;
+}
+
+html.dark .code-highlight .code .shiki span {
+  color: var(--shiki-dark) !important;
+}
+</style>
--- a/docs/@views/Layout.vue
+++ b/docs/@views/Layout.vue
@ -4,7 +4,10 @@ import DefaultTheme from 'vitepress/theme'
 import { nextTick, provide } from 'vue'

 import Banner from './Banner.vue'
-import HomeSponsor from './home/sponsor/index.vue'
+import HomeHero from './home/Hero.vue'
+import HomeCreateChart from './home/CreateChart.vue'
+import HomeFAQ from './home/FAQ.vue'
+import HomeSponsor from './home/Sponsor.vue'
 import NotFound from './NotFound.vue'

 const { isDark } = useData()
@ -48,7 +51,12 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }) => {
    <!-- <template #layout-top>
      <Banner/>
    </template> -->
+    <template #home-hero-before>
+      <HomeHero/>
+    </template>
    <template #home-features-after>
+      <HomeCreateChart/>
+      <HomeFAQ/>
      <HomeSponsor/>
    </template>
    <template #not-found>
--- a/docs/@views/NotFound.vue
+++ b/docs/@views/NotFound.vue
@ -52,7 +52,7 @@ onMounted(() => {

 .NotFound .logo img {
  width: 92px;
-  margin: 0 16px
+  margin: 0 22px
 }

@media (min-width: 768px) {
--- a/docs/@views/home/CreateChart.vue
+++ b/docs/@views/home/CreateChart.vue
@ -0,0 +1,123 @@
+<script setup>
+import { ref } from 'vue';
+import { useData } from 'vitepress';
+
+import Section from './Section.vue';
+import CodeHighlight from '../../@components/CodeHighlight.vue';
+import Chart from '../../@components/Chart.vue';
+
+const { lang } = useData()
+
+const code = ref(
+  `import { init } from 'klinecharts';
+
+const chart = init('k-line-chart');
+
+chart.createIndicator('MA', false, { id: 'candle_pane' });
+chart.createIndicator('VOL');
+
+fetch('/data/kline.json').then(res => {
+  return res.json();
+}).then(dataList => {
+  chart.applyNewData(dataList);
+})
+`
+)
+
+</script>
+
+<template>
+  <Section
+    :title="lang === 'zh-CN' ? '简单快速创建图表' : 'Create chart easily and quickly'"
+    :subTitle="lang === 'zh-CN' ? 'KLineChart 让你使用几行代码就可以创建一个金融图表，同时可以使用内置的多种常用技术指标，让图表看起来更专业。' : '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.'">
+    <div class="create-chart">
+      <div class="code-container">
+        <CodeHighlight :code="code">
+          <span class="title">chart.js</span>
+        </CodeHighlight>
+      </div>
+      <div class="chart-container">
+        <span class="title" style="height: 58px;">
+          <span class="address">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24">
+              <path fill="currentColor" d="M5.5 7.5a6.5 6.5 0 0 1 13 0V9h2v13h-17V9h2zm2 1.5h9V7.5a4.5 4.5 0 1 0-9 0zm-2 2v9h13v-9zm4.5 4.5a2 2 0 1 1 4 0a2 2 0 0 1-4 0"/>
+            </svg>
+            &nbsp;https://klinecharts.com/sample/basic
+          </span>
+        </span>
+        <Chart :js="code" height="360px"/>
+      </div>
+    </div>
+  </Section>
+</template>
+
+<style scoped>
+::v-deep.section {
+  padding-top: 60px;
+}
+
+.create-chart {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 20px;
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  padding: 0 20px;
+  height: 46px;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-bg-soft);
+  border-bottom: solid 1px var(--vp-c-gutter);
+}
+
+.code-container {
+  width: 100%;
+}
+
+.chart-container {
+  width: 100%;
+  border-radius: 12px;
+  border: solid 1px var(--vp-c-gutter);
+  background-color: var(--vp-code-block-bg);
+  padding-bottom: 6px;
+}
+
+.address {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  border-radius: 20px;
+  width: 100%;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-bg-alt);
+}
+
+@media (min-width: 640px) {
+  ::v-deep.section {
+    padding-top: 118px;
+  }
+}
+
+@media (min-width: 960px) {
+  .create-chart {
+    flex-direction: row;
+  }
+
+  .code-container, .chart-container {
+    width: calc(50% - 10px);
+  }
+}
+</style>
--- a/docs/@views/home/FAQ.vue
+++ b/docs/@views/home/FAQ.vue
@ -0,0 +1,199 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { useData } from 'vitepress';
+
+import Section from './Section.vue';
+
+const { lang } = useData()
+
+const zhItems = [
+  {
+    q: "初始化图表后，只能看到一个x轴，是怎么回事？",
+    a: "图表总是会填充容器，检查一下容器是否有高度。",
+    collapsed: true
+  },
+  {
+    q: "蜡烛柱显示趋近于一条线，看不到波动，怎么办？",
+    a: `图表默认价格精度为两位小数，调用 <code>setPriceVolumePrecision(pricePrecision, volumePrecision)</code> 设置下精度。`,
+    collapsed: true
+  },
+  {
+    q: "分时图怎么创建？",
+    a: `通过样式设置，<code>chart.setStyles({ candle: { type: 'area' }})</code> 。`,
+    collapsed: true
+  },
+  {
+    q: "内置的技术指标，计算出来的数据不是想要的，怎么办？",
+    a: `可以通过图表方法 <code>createIndicator</code> 或者 <code>overrideIndicator</code> 重写 <code>calc</code> 即可。`,
+    collapsed: true
+  },
+  {
+    q: "想创建一个内置技术指标之外的指标，怎么办？",
+    a: `图表支持自定义技术指标，详情参阅<a href="/guide/indicator" style="cursor:pointer;color:var(--vp-c-indigo-1)">技术指标</a>。`,
+    collapsed: true
+  },
+  {
+    q: "想标记一下买卖点，该怎么做？",
+    a: `可以使用覆盖物，内置的覆盖物有一个 <code>simpleAnnotation</code> ，用图表api创建即可 <code>createOverlay({ name: 'simpleAnnotation', ... }, paneId)</code> 。`,
+    collapsed: true
+  },
+]
+
+const enItems = [
+  {
+    q: "After the chart is initialized, only one line can be seen?",
+    a: "The chart always fills the container, checking to see if the container has height.",
+    collapsed: true
+  },
+  {
+    q: "The candle shows a line, no fluctuation, what to do?",
+    a: `Chart default price precision is two decimal, call <code>setPriceVolumePrecision(pricePrecision, volumePrecision)</code> to set the precision.`,
+    collapsed: true
+  },
+  {
+    q: "How to create a real-time chart?",
+    a: `Through style settings, <code>chart.setStyles({ candle: { type: 'area' }})</code> 。`,
+    collapsed: true
+  },
+  {
+    q: "Built-in technical indicators, calculated data is not what you want, how to do?",
+    a: `You can override <code>calc</code> by the chart method <code>createIndicator</code> or <code>overrideIndicator</code>.`,
+    collapsed: true
+  },
+  {
+    q: "What if I want to create an indicator other than the built-in technical indicator?",
+    a: `Chart support custom technical indicators, see <a href="/en-US/guide/indicator" style="cursor:pointer;color:var(--vp-c-indigo-1)">indicators</a> for details.`,
+    collapsed: true
+  },
+  {
+    q: "Want to mark the point of sale, how should do?",
+    a: `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', ... }, paneId)</code>.`,
+    collapsed: true
+  },
+]
+
+const items = ref(lang.value === 'zh-CN' ? zhItems : enItems)
+watch(lang, (newLang) => {
+  items.value = newLang === 'zh-CN' ? zhItems : enItems
+})
+
+</script>
+
+<template>
+  <Section
+    title="FAQ"
+    :subTitle="lang === 'zh-CN' ? '开发过程遇到的问题，大多都可以从以下内容中找到答案。' : 'Most of the problems encountered during the development process can be answered from the following content.'">
+    <ul class="faq">
+      <li class="item" v-for="item in items">
+        <div class="item-content home-faq-item-content">
+          <span class="item-content-q">{{ item.q }}</span>
+          <span v-if="!item.collapsed" class="item-content-a" v-html="item.a"/>
+        </div>
+        <span
+          class="icon"
+          @click="item.collapsed = !item.collapsed">
+          <svg
+            v-if="item.collapsed"
+            viewBox="0 0 30 30">
+            <g transform="translate(-1630, -2301)">
+              <path d="M1647,2301 L1647,2314 L1660,2314 L1660,2318 L1646.999,2318 L1647,2331 L1643,2331 L1642.999,2318 L1630,2318 L1630,2314 L1643,2314 L1643,2301 L1647,2301 Z"/>
+            </g>
+          </svg>
+          <svg
+            v-if="!item.collapsed"
+            viewBox="0 0 30 4">
+            <g transform="translate(-1630, -2444)">
+              <rect x="1630" y="2444" width="30" height="4"/>
+            </g>
+          </svg>
+        </span>
+      </li>
+    </ul>
+  </Section>
+</template>
+
+<style>
+.home-faq-item-content code {
+  padding: 2px 6px;
+  border-radius: 4px;
+  background-color:var(--vp-code-bg);
+  color:var(--vp-code-color);
+}
+</style>
+
+<style scoped>
+.faq {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 12px;
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  background-color: var(--vp-c-bg-soft);
+  padding: 16px 26px;
+  color: var(--vp-c-text-1);
+}
+
+.item-content {
+  display: flex;
+  flex-direction: column;
+  margin-right: auto;
+  padding-right: 16px;
+}
+
+.item-content-q {
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.item-content-a {
+  font-size: 14px;
+  padding-top: 12px;
+  color: var(--vp-c-text-2);
+}
+
+.icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 16px;
+  height: 22px;
+  cursor: pointer;
+}
+
+.icon svg {
+  width: 16px;
+  fill: var(--vp-c-text-1);
+}
+
+@media (min-width: 640px) {
+  .faq {
+    gap: 20px;
+  }
+  .item {
+    padding: 18px 50px;
+  }
+  .item-content-q {
+    font-size: 18px;
+    line-height: 28px;
+  }
+
+  .item-content-a {
+    font-size: 16px;
+    padding-top: 20px;
+  }
+  .icon {
+    width: 20px;
+    height: 28px;
+  }
+
+  .icon svg {
+    width: 20px;
+  }
+}
+</style>
--- a/docs/@views/home/Hero.vue
+++ b/docs/@views/home/Hero.vue
--- a/docs/@views/home/Section.vue
+++ b/docs/@views/home/Section.vue
@ -0,0 +1,75 @@
+<script setup>
+import { defineProps } from 'vue'
+const props = defineProps(['title', 'subTitle'])
+
+</script>
+
+<template>
+  <section class="section">
+    <div class="content">
+      <h2 class="title">{{ props.title }}</h2>
+      <h3 class="sub-title">{{ props.subTitle }}</h3>
+      <slot></slot>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.section {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 80px 24px 0 24px;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 1152px;
+  padding: 0 32px;
+}
+
+.title {
+  font-size: 28px;
+  line-height: 40px;
+  text-align: center;
+  font-weight: bold;
+}
+.sub-title {
+  padding-top: 18px;
+  font-size: 18px;
+  line-height: 26px;
+  text-align: center;
+  color: var(--vp-c-text-2);
+  max-width: 660px;
+  padding-bottom: 32px;
+}
+
+@media (min-width: 640px) {
+  .section {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: 150px 48px 0 48px;
+  }
+
+  .title {
+    font-size: 36px;
+    line-height: 42px;
+  }
+  .sub-title {
+    padding-top: 26px;
+    font-size: 20px;
+    line-height: 30px;
+    max-width: 660px;
+    padding-bottom: 52px;
+  }
+}
+
+@media (min-width: 960) {
+  .section {
+    padding: 150px 64px 0 64px;
+  }
+}
+</style>
--- a/docs/@views/home/sponsor/index.vue
+++ b/docs/@views/home/sponsor/index.vue
@ -1,9 +1,24 @@
 <script setup>
  import { ref } from 'vue'
+  import Section from './Section.vue';

  import { useData } from 'vitepress'

-  import sponsors from './index.json'
+  const sponsors = [
+    {
+      "name": "Northstar",
+      "logo": "/images/sponsors/Northstar.png",
+      "website": "https://www.quantit.tech",
+      "amount": 600
+    },
+    {
+      "name": "flameOnYou",
+      "text": "flameOnYou",
+      "logo": "/images/sponsors/flameOnYou.jpg",
+      "website": "https://github.com/flameOnYou",
+      "amount": 1600
+    }
+  ]

  sponsors.sort((s1, s2) => s2.amount - s1.amount)

@ -28,9 +43,10 @@
 </script>

 <template>
-  <section class="home-section sponsor-section">
-    <div class="home-section-content sponsor">
-      <h2>{{ lang === 'zh-CN' ? '赞助商' : 'Sponsors' }}</h2>
+  <Section
+    :title="lang === 'zh-CN' ? '赞助商' : 'Sponsors'"
+    :subTitle="lang === 'zh-CN' ? '维护这样一个图表和开发新功能需要巨大精力，只有在我们的赞助者慷慨的财务支持下才得以持续。' : 'Maintaining such a chart and developing new features requires tremendous effort, which can only be sustained with the generous financial support of our sponsors.'">
+    <div class="sponsor">
      <div class="sponsor-grid sponsor-top-grid">
        <a class="sponsor-grid-item item-no1" :href="sponsors[0].website" target="_blank" rel="noreferrer">
          <img class="image" :src="sponsors[0].logo"/>
@ -68,42 +84,12 @@
        </a>
      </div>
    </div>
-  </section>
+  </Section>
 </template>

 <style scoped>
-  .home-section {
-    border-top: 1px solid var(--vp-c-gutter);
-    padding: 60px 24px;
-    text-align: center;
-  }
-
-  .home-section .home-section-content {
-    margin: 0 auto;
-    max-width: 1152px;
-  }
-
-  @media (min-width: 640px) {
-    .home-section {
-      padding: 60px 48px
-    }
-  }
-
-  @media (min-width: 960px) {
-    .home-section{
-      padding: 60px 64px
-    }
-  }
-
-  .sponsor-section {
-    margin-top: 100px;
-  }
-
-  .sponsor h2 {
-    font-size: 26px;
-    text-align: center;
-    font-weight: 600;
-    padding-bottom: 34px;
+  .sponsor {
+    width: 100%;
  }

  .sponsor h4 {
@ -138,19 +124,6 @@
    padding-left: 12px;
  }

-  /* .dark .sponsor .sponsor-grid .sponsor-grid-item .image {
-    filter: grayscale(1) invert(1);
-  } */
-
-  .dark .sponsor .sponsor-grid .sponsor-grid-item:hover {
-    background-color: var(--vp-c-neutral);
-    color: rgba(0, 0, 0, 0.6)!important;
-  }
-
-  /* .dark .sponsor-grid .sponsor-grid-item:hover .image {
-    filter: grayscale(0) invert(0);
-  } */
-
  .sponsor-top-grid .item-no1 {
    height: 160px;
    font-size: 16px;
@ -190,7 +163,7 @@
    display: flex;
    flex-direction: row;
    justify-content: center;
-    padding-top: 26px;
+    padding-top: 30px;
    font-size: 14px;
    color: var(--vp-c-indigo-1);
    font-weight: bold;
@ -200,15 +173,15 @@
    padding: 8px 22px;
    border-radius: 99px;
    transition: all .25s ease-in;
-    text-decoration: underline;
-  }
-
-  .sponsor-become a:hover {
    background-color: var(--vp-c-indigo-1);
    color: white;
    text-decoration: none;
  }

+  .sponsor-become a:hover {
+    background-color: var(--vp-c-indigo-2);
+  }
+
  @media (min-width: 640px) {
    .sponsor-platinum-grid .item {
      width: calc((100% - 12px) / 3);
--- a/docs/@views/home/sponsor/index.json
+++ b/docs/@views/home/sponsor/index.json
@ -1,15 +0,0 @@
-[
-  {
-    "name": "Northstar",
-    "logo": "/images/sponsors/Northstar.png",
-    "website": "https://www.quantit.tech",
-    "amount": 600
-  },
-  {
-    "name": "flameOnYou",
-    "text": "flameOnYou",
-    "logo": "/images/sponsors/flameOnYou.jpg",
-    "website": "https://github.com/flameOnYou",
-    "amount": 1600
-  }
-]
--- a/docs/en-US/index.md
+++ b/docs/en-US/index.md
@ -3,32 +3,50 @@ title: Highly customizable professional lightweight financial chart
 # https://vitepress.dev/reference/default-theme-home-page
 layout: home

-hero:
-  name: KLineChart
-  text: Highly customizable professional lightweight financial chart
-  tagline: Easy to use, lightweight and smooth, suitable for web front-end financial chart with rich scenarios.
-  image:
-    src: /images/logo_hero.svg
-    alt: KLineChart
-  actions:
-    - theme: brand
-      text: Getting Started
-      link: /en-US/guide/quick-start
-    - theme: alt
-      text: View on Github
-      link: https://github.com/klinecharts/KLineChart
+# hero:
+#   name: KLineChart
+#   text: Highly customizable professional lightweight financial chart
+#   tagline: Easy to use, lightweight and smooth, suitable for web front-end financial chart with rich scenarios.
+#   image:
+#     src: /images/logo_hero.svg
+#     alt: KLineChart
+#   actions:
+#     - theme: brand
+#       text: Getting Started
+#       link: /en-US/guide/quick-start
+#     - theme: alt
+#       text: View on Github
+#       link: https://github.com/klinecharts/KLineChart

 features:
  - icon:
-      src: /images/box.png
+      light: /images/box_light.png
+      dark: /images/box_dark.png
    title: Out of the box
-    details: Simple and fast integration, zero cost to get started, only 3 lines of code to display a chart, so that all attention can be focused on data docking.
+    details: Simple and fast integration, zero cost to get started, displaying a chart in just 3 lines of code, allowing users to focus on data integration.
  - icon:
-      src: /images/rocket.png
+      light: /images/rocket_light.png
+      dark: /images/rocket_dark.png
    title: Lightweight and smooth
-    details: Zero dependency, only about 50k under Gzip compression, and less than 1 millisecond to load under 4G network. Charts remain fluid even with thousands of candles.
+    details: Zero dependency, only about 50k under Gzip compression. Charts can remain smooth even with thousands of data.
  - icon:
-      src: /images/expand.png
+      light: /images/power_light.png
+      dark: /images/power_dark.png
+    title: Powerful functionality
+    details: Built in multiple candlestick charts, multiple coordinate axes, dozens of commonly used indicators, and line drawing models to meet most needs.
+  - icon:
+      light: /images/expand_light.png
+      dark: /images/expand_dark.png
    title: Highly expand
-    details: Provide rich configuration and Api, style modification, function collocation as you like. Provide technical indicators and line drawing model extensions, so that the chart has more possibilities.
+    details: Provide rich APIs, style configurations, technical specifications, line drawing models, and coordinate axis extensions, with customizable functional combinations.
+  - icon:
+      light: /images/mobile_light.png
+      dark: /images/mobile_dark.png
+    title: Mobile
+    details: Specially adapted for mobile devices, fully capable of running on mobile browsers.
+  - icon:
+      light: /images/typescript_light.png
+      dark: /images/typescript_dark.png
+    title: Typescript
+    details: Provide a complete Typescript declaration file, perfectly supporting Typescript development.
 ---
--- a/docs/index.md
+++ b/docs/index.md
@ -3,32 +3,46 @@ title: 可高度自定义的专业级轻量金融图表
 # https://vitepress.dev/reference/default-theme-home-page
 layout: home

-hero:
-  name: KLineChart
-  text: 可高度自定义的专业级轻量金融图表
-  tagline: 简单易用，轻量流畅，适用场景丰富的 Web 前端金融图表。
-  image:
-    src: /images/logo_hero.svg
-    alt: KLineChart
-  actions:
-    - theme: brand
-      text: 快速开始
-      link: /guide/quick-start
-    - theme: alt
-      text: 在 Github 上查看
-      link: https://github.com/klinecharts/KLineChart
+# hero:
+#   text: 可高度自定义的专业级轻量金融图表
+#   tagline: 简单易用，轻量流畅，适用场景丰富的 Web 前端金融图表。
+#   actions:
+#     - theme: brand
+#       text: 快速开始
+#       link: /guide/quick-start
+#     - theme: alt
+#       text: 在 Github 上查看
+#       link: https://github.com/klinecharts/KLineChart

 features:
  - icon:
-      src: /images/box.png
+      light: /images/box_light.png
+      dark: /images/box_dark.png
    title: 开箱即用
-    details: 简单快速集成，零成本上手，显示出一个图表仅需3行代码，让所有注意力都能放在数据对接上。
+    details: 简单快速集成，零成本上手，显示出一个图表仅需3行代码，让使用者专注于数据对接。
  - icon:
-      src: /images/rocket.png
+      light: /images/rocket_light.png
+      dark: /images/rocket_dark.png
    title: 轻量流畅
-    details: 零依赖，Gzip压缩下仅50k左右，4G网络下加载耗时不足1毫秒。图表即使在成千上万蜡烛图的情况下也能保持流畅。
+    details: 零依赖，Gzip压缩下仅50k左右。图表即使在成千上万数据的情况下也能保持流畅。
  - icon:
-      src: /images/expand.png
+      light: /images/power_light.png
+      dark: /images/power_dark.png
+    title: 功能强大
+    details: 内置多种蜡烛图，多种坐标轴，几十种常用指标和画线模型，满足大多数需求。
+  - icon:
+      light: /images/expand_light.png
+      dark: /images/expand_dark.png
    title: 高可扩展
-    details: 提供丰富的配置和Api，样式修改、功能搭配随心所欲。提供技术指标和画线模型扩展，让图表拥有更多可能。
+    details: 提供丰富的Api，样式配置，提供技术指标，画线模型和坐标轴扩展，功能搭配随心所欲。
+  - icon:
+      light: /images/mobile_light.png
+      dark: /images/mobile_dark.png
+    title: 移动端
+    details: 针对移动端，做了单独的适配，完全可以运行在移动端浏览器上。
+  - icon:
+      light: /images/typescript_light.png
+      dark: /images/typescript_dark.png
+    title: Typescript
+    details: 提供完整的 Typescript 声明文件，完美支持 Typescript 开发。
 ---
--- a/docs/public/data/kline.json
+++ b/docs/public/data/kline.json
--- a/docs/public/images/box.png
+++ b/docs/public/images/box.png
--- a/docs/public/images/box_dark.png
+++ b/docs/public/images/box_dark.png
--- a/docs/public/images/box_light.png
+++ b/docs/public/images/box_light.png
--- a/docs/public/images/expand.png
+++ b/docs/public/images/expand.png
--- a/docs/public/images/expand_dark.png
+++ b/docs/public/images/expand_dark.png
--- a/docs/public/images/expand_light.png
+++ b/docs/public/images/expand_light.png
--- a/docs/public/images/logo.svg
+++ b/docs/public/images/logo.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="160.00003051757812" height="160" viewBox="0 0 160.00003051757812 160"><defs><linearGradient x1="0" y1="0.5" x2="1" y2="0.5" id="master_svg0_768_1759"><stop offset="0%" stop-color="#F92855" stop-opacity="1"/><stop offset="100%" stop-color="#2DC08E" stop-opacity="1"/></linearGradient></defs><g><g><path d="M95.1576,6.27848L153.722,64.8424Q156.803,67.9238,158.43,71.9362Q160,75.8078,160,80Q160,84.1922,158.43,88.0638Q156.803,92.0762,153.722,95.1576L95.1576,153.722Q92.0762,156.803,88.0638,158.43Q84.1922,160,80,160Q75.8078,160,71.9362,158.43Q67.9238,156.803,64.8424,153.722L6.27848,95.1576Q3.19708,92.0762,1.56999,88.0638Q0,84.1922,0,80Q0,75.8078,1.56999,71.9362Q3.19707,67.9238,6.27848,64.8424L64.8424,6.27848Q67.9238,3.19707,71.9362,1.56999Q75.8078,0,80,0Q84.1922,0,88.0638,1.56999Q92.0762,3.19707,95.1576,6.27848ZM87.9397,13.4964Q86.322,11.8787,84.2279,11.0295Q82.2013,10.2077,80,10.2077Q77.7987,10.2077,75.7721,11.0295Q73.678,11.8787,72.0603,13.4964L54.5534,31.0033L105.447,31.0033L87.9397,13.4964ZM107.561,118.789Q109.848,118.789,111.93,117.909Q113.944,117.057,115.5,115.5Q117.057,113.944,117.909,111.93Q118.789,109.848,118.789,107.561L118.789,52.4393Q118.789,50.1516,117.909,48.0703Q117.057,46.0562,115.5,44.4996Q113.944,42.9431,111.93,42.0912Q109.848,41.2109,107.561,41.2109L52.4393,41.2109Q50.1515,41.2109,48.0703,42.0912Q46.0562,42.9431,44.4996,44.4996Q42.9431,46.0562,42.0912,48.0703Q41.2109,50.1515,41.2109,52.4393L41.2109,107.561Q41.2109,109.848,42.0912,111.93Q42.9431,113.944,44.4996,115.5Q46.0562,117.057,48.0703,117.909Q50.1516,118.789,52.4393,118.789L107.561,118.789ZM13.4964,72.0603L31.0033,54.5534L31.0033,105.447L13.4964,87.9397Q11.8787,86.322,11.0295,84.2278Q10.2077,82.2013,10.2077,80Q10.2077,77.7987,11.0295,75.7721Q11.8787,73.678,13.4964,72.0603ZM146.504,87.9397L128.997,105.447L128.997,54.5534L146.504,72.0603Q148.121,73.678,148.971,75.7721Q149.792,77.7987,149.792,80Q149.792,82.2013,148.971,84.2279Q148.121,86.322,146.504,87.9397ZM72.0603,146.504L54.5534,128.997L105.447,128.997L87.9397,146.504Q86.322,148.121,84.2278,148.971Q82.2012,149.792,80,149.792Q77.7987,149.792,75.7721,148.971Q73.678,148.121,72.0603,146.504Z" fill-rule="evenodd" fill="url(#master_svg0_768_1759)" fill-opacity="1"/></g><g><g><path d="M64.16208911132813,62.68834972381592C63.348189111328125,62.68834972381592,62.68838911132812,63.27273572381592,62.68838911132812,63.993609723815915L62.68838911132812,71.82518972381592L55.319959111328124,71.82518972381592C53.69216911132813,71.82518972381592,52.372589111328125,72.99394972381592,52.372589111328125,74.43574972381592L52.372589111328125,96.62514972381592C52.372589111328125,98.06694972381592,53.69216911132813,99.23574972381593,55.319959111328124,99.23574972381593L62.68838911132812,99.23574972381593L62.68838911132812,107.06724972381592C62.68838911132812,107.78814972381592,63.348189111328125,108.37254972381592,64.16208911132813,108.37254972381592C64.97598911132812,108.37254972381592,65.63578911132812,107.78814972381592,65.63578911132812,107.06724972381592L65.63578911132812,99.23574972381593L73.00418911132812,99.23574972381593C74.63198911132812,99.23574972381593,75.95148911132813,98.06694972381592,75.95148911132813,96.62514972381592L75.95148911132813,74.43574972381592C75.95148911132813,72.99394972381592,74.63198911132812,71.82518972381592,73.00418911132812,71.82518972381592L65.63578911132812,71.82518972381592L65.63578911132812,63.993609723815915C65.63578911132812,63.27273572381592,64.97598911132812,62.68834972381592,64.16208911132813,62.68834972381592Z" fill-rule="evenodd" fill="#F92855" fill-opacity="1"/></g><g><path d="M96.58314395141602,52.37255859375C95.76924395141602,52.37255859375,95.10944395141601,52.95694459375,95.10944395141601,53.67781859375L95.10944395141601,61.50939859375L87.74101395141602,61.50939859375C86.11322395141602,61.50939859375,84.79364395141602,62.67815859375,84.79364395141602,64.11995859375L84.79364395141602,86.30935859375C84.79364395141602,87.75115859375,86.11322395141602,88.91995859375001,87.74101395141602,88.91995859375001L95.10944395141601,88.91995859375001L95.10944395141601,96.75145859375C95.10944395141601,97.47235859375,95.76924395141602,98.05675859375,96.58314395141602,98.05675859375C97.39704395141601,98.05675859375,98.05684395141601,97.47235859375,98.05684395141601,96.75145859375L98.05684395141601,88.91995859375001L105.42524395141601,88.91995859375001C107.05304395141602,88.91995859375001,108.37254395141602,87.75115859375,108.37254395141602,86.30935859375L108.37254395141602,64.11995859375C108.37254395141602,62.67815859375,107.05304395141602,61.50939859375,105.42524395141601,61.50939859375L98.05684395141601,61.50939859375L98.05684395141601,53.67781859375C98.05684395141601,52.95694459375,97.39704395141601,52.37255859375,96.58314395141602,52.37255859375Z" fill-rule="evenodd" fill="#2DC08E" fill-opacity="1"/></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="60" height="60" viewBox="0 0 60 60"><g><g><rect x="27.70969009399414" y="17.502239227294922" width="4.999998569488525" height="24.995521545410156" rx="0" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M43.5914,4.34332L43.5914,3.25748C39.5054,1.18259,34.8925,0,30,0C13.4301,0,0,13.4277,0,29.9946C0,39.724,4.6344,48.3569,11.8064,53.8398L11.8064,47.1313C7.59139,42.659,4.99999,36.6279,4.99999,29.9946C4.99999,16.1906,16.1935,4.9991,30,4.9991C33.0215,4.9991,35.914,5.53664,38.5914,6.52572L38.5914,26.8447L43.5914,26.8447L43.5914,4.34332Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M48.59135179748535,6.46121883392334L48.59135179748535,13.28795883392334C52.58065179748535,17.71721883392334,54.99995179748535,23.57641883392334,54.99995179748535,29.99461883392334C54.99995179748535,43.79861883392334,43.80645179748535,54.99021883392334,29.999951797485352,54.99021883392334C27.129051797485353,54.99021883392334,24.376321797485353,54.50641883392334,21.806441797485352,53.61411883392334L21.806441797485352,33.080118833923336L16.80645179748535,33.080118833923336L16.80645179748535,55.58141883392334L16.80645179748535,56.94681883392334C20.784941797485352,58.90341883392334,25.268811797485352,60.00001883392334,29.999951797485352,60.00001883392334C46.569851797485356,60.00001883392334,59.99995179748535,46.57231883392334,59.99995179748535,30.00541883392334C60.010751797485355,20.44791883392334,55.54835179748535,11.95483883392334,48.59135179748535,6.46121883392334Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
--- a/docs/public/images/logo_hero.svg
+++ b/docs/public/images/logo_hero.svg
--- a/docs/public/images/mobile_dark.png
+++ b/docs/public/images/mobile_dark.png
--- a/docs/public/images/mobile_light.png
+++ b/docs/public/images/mobile_light.png
--- a/docs/public/images/power_dark.png
+++ b/docs/public/images/power_dark.png
--- a/docs/public/images/power_light.png
+++ b/docs/public/images/power_light.png
--- a/docs/public/images/rocket.png
+++ b/docs/public/images/rocket.png
--- a/docs/public/images/rocket_dark.png
+++ b/docs/public/images/rocket_dark.png
--- a/docs/public/images/rocket_light.png
+++ b/docs/public/images/rocket_light.png
--- a/docs/public/images/typescript_dark.png
+++ b/docs/public/images/typescript_dark.png
--- a/docs/public/images/typescript_light.png
+++ b/docs/public/images/typescript_light.png
--- a/package.json
+++ b/package.json
@ -65,7 +65,6 @@
    "@rollup/plugin-terser": "^0.4.4",
    "@rollup/plugin-typescript": "^11.1.6",
    "@rollup/pluginutils": "^5.1.0",
-    "@shikijs/vitepress-twoslash": "^1.4.0",
    "@stackblitz/sdk": "^1.9.0",
    "@types/node": "^20.12.7",
    "chalk": "^5.3.0",
@ -84,5 +83,8 @@
    "tslib": "^2.6.2",
    "typescript": "^5.5.4",
    "vitepress": "^1.3.4"
+  },
+  "dependencies": {
+    "shiki": "^1.22.1"
  }
 }