TUI

<template>
  <div class="anchor-demo">
    <div class="demo-content">
      <div id="introduction" class="content-section">
        <h3>介绍</h3>
        <p>TsAnchor 是一个用于页面内快速定位的锚点组件，支持自动高亮当前可见的锚点。</p>
        <p>当用户滚动页面时，组件会自动检测当前在视口中的锚点，并高亮显示对应的导航项。</p>
      </div>
      
      <div id="features" class="content-section">
        <h3>特性</h3>
        <ul>
          <li>自动检测滚动位置</li>
          <li>平滑滚动定位</li>
          <li>支持多个锚点同时可见</li>
          <li>防抖处理避免频繁切换</li>
        </ul>
      </div>
      
      <div id="usage" class="content-section">
        <h3>使用方法</h3>
        <p>只需传入锚点列表，组件会自动处理滚动监听和高亮逻辑。</p>
        <pre><code>{{ usageCode }}</code></pre>
      </div>
      
      <div id="api" class="content-section">
        <h3>API</h3>
        <p>组件提供了简单的 props 接口，支持自定义锚点数据和暗黑模式。</p>
      </div>
    </div>
    
    <div class="demo-sidebar">
      <TsAnchor :anchors="anchors" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsAnchor } from 'tui';
import type { AnchorItem } from 'tui/components/anchor/src/types';

const anchors: AnchorItem[] = [
  { id: 'introduction', title: '介绍' },
  { id: 'features', title: '特性' },
  { id: 'usage', title: '使用方法' },
  { id: 'api', title: 'API' },
];

const usageCode = `import { TsAnchor } from 'tui';

const anchors = [
  { id: 'section1', title: '章节一' },
  { id: 'section2', title: '章节二' },
];

&lt;TsAnchor :anchors="anchors" /&gt;`;
</script>

<style scoped>
.anchor-demo {
  display: flex;
  gap: 40px;
  padding: 20px;
  min-height: 100vh;
}

.demo-content {
  flex: 1;
  max-width: 800px;
}

.content-section {
  margin-bottom: 60px;
  scroll-margin-top: 20px;
}

.content-section h3 {
  color: var(--ts-color-primary);
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}

.content-section p {
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--ts-color-text);
}

.content-section ul {
  margin-left: 20px;
}

.content-section li {
  margin-bottom: 8px;
  color: var(--ts-color-text);
}

.demo-sidebar {
  width: 200px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

pre {
  background: var(--ts-card-background-color);
  border: 1px solid var(--ts-border-color-gray);
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin: 16px 0;
}

code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  color: var(--ts-color-blue);
}
</style>

<template>
  <div class="anchor-demo dark-demo">
    <div class="demo-content">
      <div id="theme-intro" class="content-section">
        <h3>暗黑主题</h3>
        <p>TsAnchor 支持暗黑模式，通过设置 dark 属性为 true 即可启用。</p>
        <p>暗黑模式下，组件会自动调整文字颜色、背景色和边框色，以适应暗色背景。</p>
      </div>
      
      <div id="theme-features" class="content-section">
        <h3>暗黑模式特性</h3>
        <ul>
          <li>自动适配暗色背景</li>
          <li>优化的对比度</li>
          <li>平滑的过渡动画</li>
          <li>保持交互一致性</li>
        </ul>
      </div>
      
      <div id="theme-usage" class="content-section">
        <h3>使用方法</h3>
        <p>只需要在组件上添加 dark 属性：</p>
        <pre><code>{{ darkCode }}</code></pre>
      </div>
      
      <div id="theme-custom" class="content-section">
        <h3>自定义暗色</h3>
        <p>可以通过 CSS 变量进一步自定义暗黑模式的颜色：</p>
        <pre><code>{{ customCode }}</code></pre>
      </div>
    </div>
    
    <div class="demo-sidebar">
      <TsAnchor :anchors="anchors" :dark="true" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsAnchor } from 'tui';
import type { AnchorItem } from 'tui/components/anchor/src/types';

const anchors: AnchorItem[] = [
  { id: 'theme-intro', title: '暗黑主题' },
  { id: 'theme-features', title: '暗黑模式特性' },
  { id: 'theme-usage', title: '使用方法' },
  { id: 'theme-custom', title: '自定义暗色' },
];

const darkCode = `&lt;TsAnchor :anchors="anchors" :dark="true" /&gt;`;

const customCode = `:root[data-ts-theme='dark'] {
  --ts-color-primary: rgba(255, 255, 255, 0.88);
  --ts-color-blue: #1890ff;
}`;
</script>

<style scoped>
.anchor-demo {
  display: flex;
  gap: 40px;
  padding: 20px;
  min-height: 100vh;
}

.dark-demo {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.88);
}

.demo-content {
  flex: 1;
  max-width: 800px;
}

.content-section {
  margin-bottom: 60px;
  scroll-margin-top: 20px;
}

.content-section h3 {
  color: var(--ts-color-primary);
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}

.content-section p {
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--ts-color-text);
}

.content-section ul {
  margin-left: 20px;
}

.content-section li {
  margin-bottom: 8px;
  color: var(--ts-color-text);
}

.demo-sidebar {
  width: 200px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

pre {
  background: var(--ts-card-background-color);
  border: 1px solid var(--ts-border-color-gray);
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin: 16px 0;
}

code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  color: var(--ts-color-blue);
}
</style>

<template>
  <div class="anchor-demo custom-demo">
    <div class="demo-content">
      <div id="custom-intro" class="content-section">
        <h3>自定义样式</h3>
        <p>可以通过 CSS 变量自定义 TsAnchor 的外观，包括颜色、间距、字体大小等。</p>
      </div>
      
      <div id="custom-colors" class="content-section">
        <h3>自定义颜色</h3>
        <p>修改主题色变量来改变锚点的颜色：</p>
        <pre><code>{{ colorCode }}</code></pre>
      </div>
      
      <div id="custom-spacing" class="content-section">
        <h3>自定义间距</h3>
        <p>调整锚点项的内边距和外边距：</p>
        <pre><code>{{ spacingCode }}</code></pre>
      </div>
      
      <div id="custom-animation" class="content-section">
        <h3>自定义动画</h3>
        <p>修改过渡动画的持续时间和缓动函数：</p>
        <pre><code>{{ animationCode }}</code></pre>
      </div>
    </div>
    
    <div class="demo-sidebar custom-sidebar">
      <TsAnchor :anchors="anchors" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsAnchor } from 'tui';
import type { AnchorItem } from 'tui/components/anchor/src/types';

const anchors: AnchorItem[] = [
  { id: 'custom-intro', title: '自定义样式' },
  { id: 'custom-colors', title: '自定义颜色' },
  { id: 'custom-spacing', title: '自定义间距' },
  { id: 'custom-animation', title: '自定义动画' },
];

const colorCode = `.ts-anchor__item {
  --ts-color-blue: #ff6b35;
  color: var(--ts-color-blue);
}

.ts-anchor__item--active {
  border-left-color: var(--ts-color-blue);
  background: rgba(var(--ts-color-blue), 0.1);
}`;

const spacingCode = `.ts-anchor__item {
  padding: 8px 12px;
  margin-top: 6px;
}

.ts-anchor__wrap {
  gap: 12px;
}`;

const animationCode = `.ts-anchor__item {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ts-anchor__item:hover {
  transform: translateX(4px);
}`;
</script>

<style scoped>
.anchor-demo {
  display: flex;
  gap: 40px;
  padding: 20px;
  min-height: 100vh;
}

.custom-demo {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.demo-content {
  flex: 1;
  max-width: 800px;
}

.content-section {
  margin-bottom: 60px;
  scroll-margin-top: 20px;
}

.content-section h3 {
  color: var(--ts-color-primary);
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}

.content-section p {
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--ts-color-text);
}

.demo-sidebar {
  width: 200px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

.custom-sidebar {
  --ts-color-blue: #ff6b35;
  --ts-color-primary: #2d3748;
}

pre {
  background: var(--ts-card-background-color);
  border: 1px solid var(--ts-border-color-gray);
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin: 16px 0;
}

code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  color: var(--ts-color-blue);
}
</style>

<template>
  <div class="anchor-demo responsive-demo">
    <div class="demo-content">
      <div id="responsive-intro" class="content-section">
        <h3>响应式设计</h3>
        <p>TsAnchor 支持响应式布局，在不同屏幕尺寸下自动调整布局方式。</p>
      </div>
      
      <div id="responsive-desktop" class="content-section">
        <h3>桌面端布局</h3>
        <p>在桌面端（宽度 > 768px），锚点显示为垂直列表：</p>
        <ul>
          <li>固定在侧边栏</li>
          <li>垂直排列</li>
          <li>支持滚动</li>
          <li>紧凑布局</li>
        </ul>
      </div>
      
      <div id="responsive-mobile" class="content-section">
        <h3>移动端布局</h3>
        <p>在移动端（宽度 ≤ 768px），锚点自动切换为水平布局：</p>
        <ul>
          <li>水平排列</li>
          <li>自适应宽度</li>
          <li>触摸友好</li>
          <li>边框样式</li>
        </ul>
      </div>
      
      <div id="responsive-breakpoints" class="content-section">
        <h3>断点设置</h3>
        <p>默认断点为 768px，可以通过修改 CSS 变量自定义：</p>
        <pre><code>{{ breakpointCode }}</code></pre>
      </div>
    </div>
    
    <div class="demo-sidebar">
      <TsAnchor :anchors="anchors" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsAnchor } from 'tui';
import type { AnchorItem } from 'tui/components/anchor/src/types';

const anchors: AnchorItem[] = [
  { id: 'responsive-intro', title: '响应式设计' },
  { id: 'responsive-desktop', title: '桌面端布局' },
  { id: 'responsive-mobile', title: '移动端布局' },
  { id: 'responsive-breakpoints', title: '断点设置' },
];

const breakpointCode = `/* 自定义断点 */
@media (max-width: 1024px) {
  .ts-anchor__wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .ts-anchor__item {
    flex: 1;
    min-width: 100px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }
}`;
</script>

<style scoped>
.anchor-demo {
  display: flex;
  gap: 40px;
  padding: 20px;
  min-height: 100vh;
}

.responsive-demo {
  background: #f8fafc;
}

.demo-content {
  flex: 1;
  max-width: 800px;
}

.content-section {
  margin-bottom: 60px;
  scroll-margin-top: 20px;
}

.content-section h3 {
  color: var(--ts-color-primary);
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}

.content-section p {
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--ts-color-text);
}

.content-section ul {
  margin-left: 20px;
}

.content-section li {
  margin-bottom: 8px;
  color: var(--ts-color-text);
}

.demo-sidebar {
  width: 200px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

pre {
  background: var(--ts-card-background-color);
  border: 1px solid var(--ts-border-color-gray);
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin: 16px 0;
}

code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  color: var(--ts-color-blue);
}

/* 响应式演示 */
@media (max-width: 768px) {
  .anchor-demo {
    flex-direction: column;
    gap: 20px;
  }
  
  .demo-sidebar {
    width: 100%;
    position: relative;
    top: 0;
  }
  
  .demo-content {
    max-width: 100%;
  }
}
</style>