<script setup lang="ts">
import { ElSpace, ElRow, ElCol } from 'element-plus';
import '@/styles/tabs.scss'
import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
import AiTipPane from '@/components/base/panes/AiTipPane.vue';
import CommonText from '@/components/base/texts/CommonText.vue';
import IntelligentEntityText from '@/components/base/texts/IntelligentEntityText.vue';
import TranslateExample from './TranslateExample.vue';

const span = 12
</script>

<template>
    <el-row class="layout-grid-line">
        <el-col :span="span">
            <pre>
{{ `import CommonText from '@/components/base/texts/CommonText.vue';
<template>
    <common-text>科技领域</common-text>
    <common-text class="text-title-1-show" color="var(--color-yellow-100)">科技领域</common-text>
    <common-text color="red" :lineLimit="1">科技领域</common-text>
</template>
`}}
</pre>
            <el-space direction="vertical">
                <common-text>科技领域</common-text>
                <common-text class="text-title-1-show" color="var(--color-yellow-100)">科技领域</common-text>
                <common-text color="red"
                    :lineLimit="1">超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。</common-text>
            </el-space>
        </el-col>

        <el-col :span="span">
            <pre>{{ `import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';\n <template>
    <color-prefix-title>科技领域</color-prefix-title>
    <color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title>
    <color-prefix-title color="red">科技领域</color-prefix-title>
</template>
        `}}
    </pre>
            <el-space direction="vertical">
                <color-prefix-title>科技领域</color-prefix-title>
                <color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title>
                <color-prefix-title color="red">科技领域</color-prefix-title>
            </el-space>
        </el-col>

        <el-col :span="span">
            <pre>{{ `import AiTipPane from '@/components/base/panes/AiTipPane.vue';\n<template>
    <ai-tip-pane>huidadadadadasda</ai-tip-pane>
</template>
        `}}
    </pre>
            <ai-tip-pane>huidadadadadasda</ai-tip-pane>
        </el-col>

        <el-col :span="span">
            <pre>{{ `import IntelligentEntityText from '@/components/base/texts/IntelligentEntityText.vue';\n<template>
    <intelligent-entity-text
        text="华盛顿当地时间2024年7月2日，美国商务部产业与安全局（BIS） 发布一项最终规则，宣布修订《出口管理条例》（EAR） ，以违反美国国家安全或外交政策利益为由在实体清单 中增列来自四个国家的6个实体，其中包括2家中国企业。[1]"
        :entities="[{
            text_span: '华盛顿',
            type: 'location'
        }, {
            text_span: '美国商务部产业与安全局',
            type: 'organization'
        }]">
    </intelligent-entity-text>
</template>
        `}}
    </pre>
            <intelligent-entity-text
                text="华盛顿当地时间2024年7月2日，美国商务部产业与安全局（BIS） 发布一项最终规则，宣布修订《出口管理条例》（EAR） ，以违反美国国家安全或外交政策利益为由在实体清单 中增列来自四个国家的6个实体，其中包括2家中国企业。[1]"
                :entities="[{
                    text_span: '华盛顿',
                    type: 'location'
                }, {
                    text_span: '美国商务部产业与安全局',
                    type: 'organization'
                }]">
            </intelligent-entity-text>
        </el-col>

        <el-col :span="span">
            <pre>{{ `参考src/styles/components/TextPage/TranslateExample.vue` }}
    </pre>
            <translate-example>
            </translate-example>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped></style>