TUI

<template>
  <div class="component-card-demo-column">
    <TsText text="这是一段普通文本内容" />
    <TsText>这是通过插槽传入的文本内容</TsText>
  </div>
</template>

<script setup lang="ts">
import { TsText } from 'tui';
</script>

<template>
  <div class="component-card-demo-column">
    <TsText mode="code" class="text-code-demo">在JavaScript中，使用`console.log()`来打印输出</TsText>
    <TsText mode="code" class="text-code-demo">CSS中设置颜色可以使用`color: #ff0000`或`color: red`</TsText>
  </div>
</template>

<script setup lang="ts">
import { TsText } from 'tui';
</script>

<style scoped>
:deep(.text-code-demo) {
  .code {
    background: var(--bussiness-bg-gray);
    padding: 2px 6px;
    border-radius: 4px;
    font-style: italic;
    margin: 0 5px;
    color: var(--bussiness-deep-blue);
  }
}
</style>

<template>
  <div class="component-card-demo-wrap">
    <TsText mode="code" class="text-code-demo">在Vue组件中，使用`defineProps`定义props，例如： `const props = defineProps({ name: String, age: Number })`</TsText>
  </div>
</template>

<script setup lang="ts">
import { TsText } from 'tui';
</script>

<style scoped>
:deep(.text-code-demo) {
  .code {
    background: var(--bussiness-bg-gray);
    padding: 2px 6px;
    border-radius: 4px;
    font-style: italic;
    margin: 0 5px;
    color: var(--bussiness-deep-blue);
  }
}
</style>

<template>
  <div class="component-card-demo-column">
    <div class="example-block">
      <p class="example-title">默认情况（保留空格）:</p>
      <TsText class="example-text">这段文本中的 多个空格 会被保留</TsText>
    </div>
    <div class="example-block">
      <p class="example-title">启用 trim（删除所有空格）:</p>
      <TsText class="example-text" :trim="true">这段文本中的 所有空格 都会被删除</TsText>
    </div>
    <div class="example-block">
      <p class="example-title">启用 codeTrim（保留代码片段两侧的空格）, 其他空格不受影响:</p>
      <TsText class="example-text" :code-trim="false">代码片段 `const name = 'value'` 中的两侧空格 会被保留</TsText>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsText } from 'tui';
</script>

<style scoped>
.example-block {
  margin-bottom: 16px;
}

.example-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.example-text {
  padding: 8px 12px;
  font-size: 12px;
  background-color: var(--ts-code-block-code-bg-color);
  border-radius: 4px;
  line-height: 22px;
}
</style>

<template>
  <div class="component-card-demo-column">
    <p class="demo-desc">自定义代码高亮样式：</p>
    <TsText mode="code" class="custom-code-style">这是自定义样式的代码片段`console.log()`</TsText>
    
    <p class="demo-desc">不同颜色主题：</p>
    <TsText mode="code" class="success-code">成功状态`success`</TsText>
    <TsText mode="code" class="warning-code">警告状态`warning`</TsText>
    <TsText mode="code" class="error-code">错误状态`error`</TsText>
  </div>
</template>

<script setup lang="ts">
import { TsText } from 'tui';
</script>

<style scoped>
.demo-desc {
  margin-bottom: 8px;
  color: var(--ts-color-text);
}

:deep(.custom-code-style) {
  .code {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
  }
}

:deep(.success-code) {
  .code {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
    padding: 2px 6px;
    border-radius: 4px;
  }
}

:deep(.warning-code) {
  .code {
    background: #fffbe6;
    color: #faad14;
    border: 1px solid #ffe58f;
    padding: 2px 6px;
    border-radius: 4px;
  }
}

:deep(.error-code) {
  .code {
    background: #fff2f0;
    color: #ff4d4f;
    border: 1px solid #ffccc7;
    padding: 2px 6px;
    border-radius: 4px;
  }
}
</style>

<template>
  <div class="component-card-demo-column">
    <p class="demo-desc">复杂文本内容，包含多种代码片段：</p>
    <TsText mode="code" class="complex-text">
      在Vue 3中，可以使用`ref`创建响应式数据，使用`reactive`创建响应式对象。
      例如：`const count = ref(0)`，`const state = reactive({ name: 'Vue', version: 3 })`。
      访问时使用`count.value`，而对象属性直接访问`state.name`。
    </TsText>
    
    <p class="demo-desc">多行代码示例：</p>
    <TsText mode="code" class="multi-line-text">
      安装依赖：
      `npm install vue@next`
      
      创建项目：
      `npm create vue@latest my-project`
      
      启动开发服务器：
      `npm run dev`
    </TsText>
  </div>
</template>

<script setup lang="ts">
import { TsText } from 'tui';
</script>

<style scoped>
.demo-desc {
  margin-bottom: 8px;
  color: var(--ts-color-text);
}

:deep(.complex-text) {
  .code {
    background: #e6f7ff;
    color: #0958d9;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
  }
}

:deep(.multi-line-text) {
  .code {
    background: #f6f8fa;
    color: #1f2329;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.6;
    display: inline-block;
    margin: 2px 0;
  }
}
</style>