<template>
    <div class="text-showcase">
        <section class="intro">
            <p class="eyebrow">组件展示 · Text</p>
            <h1>文本组件设计指南</h1>
            <p class="subtitle">
                通过多种类型、尺寸与样式组合，让文本信息层次更加清晰。以下示例展示了不同的文本样式及推荐的使用场景，帮助快速搭建一致、优雅的界面体验。
            </p>
        </section>

        <section class="card-grid">
            <el-card
                v-for="group in textGroups"
                :key="group.id"
                shadow="hover"
                class="group-card">
                <template #header>
                    <div class="card-header">
                        <h3>{{ group.title }}</h3>
                        <span>{{ group.caption }}</span>
                    </div>
                </template>
                <p class="group-description">{{ group.description }}</p>
                <div class="text-grid">
                    <div
                        v-for="item in group.texts"
                        :key="item.label"
                        class="text-item">
                        <ComText v-bind="item.props">
                            {{ item.content }}
                        </ComText>
                        <span class="text-note">{{ item.note }}</span>
                    </div>
                </div>
            </el-card>
        </section>

        <section class="card-full">
            <el-card shadow="hover">
                <template #header>
                    <div class="card-header">
                        <h3>文本截断示例</h3>
                        <span>展示长文本的省略与多行截断效果</span>
                    </div>
                </template>
                <div class="truncate-demo">
                    <div class="truncate-item">
                        <h4>单行截断</h4>
                        <ComText truncated style="width: 300px; d">
                            这是一段非常长的文本内容，当文本超出容器宽度时会自动显示省略号，适用于标题、标签等场景。
                        </ComText>
                        <span class="demo-note">truncated: true</span>
                    </div>
                    <div class="truncate-item">
                        <h4>多行截断（2行）</h4>
                        <ComText :line-clamp="2" style="width: 300px">
                            这是一段非常长的文本内容，当文本超出指定行数时会自动显示省略号。多行截断适用于描述性文本、摘要等场景，能够保持界面的整洁和一致性。
                        </ComText>
                        <span class="demo-note">line-clamp: 2</span>
                    </div>
                    <div class="truncate-item">
                        <h4>多行截断（3行）</h4>
                        <ComText :line-clamp="3" style="width: 300px">
                            这是一段非常长的文本内容，当文本超出指定行数时会自动显示省略号。多行截断适用于描述性文本、摘要等场景，能够保持界面的整洁和一致性。通过设置不同的行数，可以灵活控制文本的显示范围。
                        </ComText>
                        <span class="demo-note">line-clamp: 3</span>
                    </div>
                </div>
            </el-card>
        </section>

        <section class="card-full">
            <el-card shadow="hover">
                <template #header>
                    <div class="card-header">
                        <h3>扩展属性示例</h3>
                        <span>展示自定义颜色、字体、对齐等扩展功能</span>
                    </div>
                </template>
                <div class="extend-demo">
                    <div class="extend-group">
                        <h4>自定义颜色</h4>
                        <div class="extend-items">
                            <ComText color="#409EFF">主题蓝色</ComText>
                            <ComText color="#67C23A">成功绿色</ComText>
                            <ComText color="#E6A23C">警告橙色</ComText>
                            <ComText color="#F56C6C">危险红色</ComText>
                            <ComText color="#909399">信息灰色</ComText>
                        </div>
                    </div>
                    <div class="extend-group">
                        <h4>字体粗细</h4>
                        <div class="extend-items">
                            <ComText :font-weight="300">细体 (300)</ComText>
                            <ComText :font-weight="400">常规 (400)</ComText>
                            <ComText :font-weight="600">半粗 (600)</ComText>
                            <ComText :font-weight="700">粗体 (700)</ComText>
                        </div>
                    </div>
                    <div class="extend-group">
                        <h4>文本对齐</h4>
                        <div
                            class="extend-items"
                            style="flex-direction: column; gap: 12px">
                            <ComText
                                text-align="left"
                                style="
                                    width: 100%;
                                    display: block;
                                    border: 1px solid #e4e7ed;
                                    padding: 8px;
                                ">
                                左对齐文本内容
                            </ComText>
                            <ComText
                                text-align="center"
                                style="
                                    width: 100%;
                                    display: block;
                                    border: 1px solid #e4e7ed;
                                    padding: 8px;
                                ">
                                居中对齐文本内容
                            </ComText>
                            <ComText
                                text-align="right"
                                style="
                                    width: 100%;
                                    display: block;
                                    border: 1px solid #e4e7ed;
                                    padding: 8px;
                                ">
                                右对齐文本内容
                            </ComText>
                        </div>
                    </div>
                    <div class="extend-group">
                        <h4>文本装饰</h4>
                        <div class="extend-items">
                            <ComText text-decoration="underline">
                                下划线文本
                            </ComText>
                            <ComText text-decoration="line-through">
                                删除线文本
                            </ComText>
                            <ComText text-decoration="overline">
                                上划线文本
                            </ComText>
                        </div>
                    </div>
                </div>
            </el-card>
        </section>

        <section class="card-full">
            <el-card shadow="hover">
                <template #header>
                    <div class="card-header">
                        <h3>自定义标签示例</h3>
                        <span>通过 tag 属性自定义渲染的 HTML 标签</span>
                    </div>
                </template>
                <div class="tag-demo">
                    <div class="tag-item">
                        <ComText tag="h1" type="primary" size="large">
                            H1 标题标签
                        </ComText>
                        <span class="demo-note">tag: h1</span>
                    </div>
                    <div class="tag-item">
                        <ComText tag="h2" type="success">H2 标题标签</ComText>
                        <span class="demo-note">tag: h2</span>
                    </div>
                    <div class="tag-item">
                        <ComText tag="p">段落标签</ComText>
                        <span class="demo-note">tag: p</span>
                    </div>
                    <div class="tag-item">
                        <ComText tag="strong" :font-weight="700"
                            >强调标签</ComText
                        >
                        <span class="demo-note">tag: strong</span>
                    </div>
                    <div class="tag-item">
                        <ComText tag="em" style="font-style: italic"
                            >斜体标签</ComText
                        >
                        <span class="demo-note">tag: em</span>
                    </div>
                </div>
            </el-card>
        </section>

        <section class="card-full guide-card">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <h3>使用建议</h3>
                        <span>保持一致性，提升可读性与体验</span>
                    </div>
                </template>
                <ul class="guide-list">
                    <li v-for="tip in usageGuides" :key="tip">
                        {{ tip }}
                    </li>
                </ul>
            </el-card>
        </section>
    </div>
</template>

<script setup name="ShowText">
    import ComText from "@/components/ComText/index.vue";

    const textGroups = [
        {
            id: "type",
            title: "文本类型",
            caption: "Text Types",
            description:
                "通过不同的类型色彩区分文本的语义和重要性，帮助用户快速识别信息层级和状态。",
            texts: [
                {
                    content: "默认文本",
                    note: "常规文本内容",
                    props: {},
                },
                {
                    content: "主要文本",
                    note: "强调重要信息",
                    props: { type: "primary" },
                },
                {
                    content: "成功文本",
                    note: "表示成功状态",
                    props: { type: "success" },
                },
                {
                    content: "警告文本",
                    note: "提示警告信息",
                    props: { type: "warning" },
                },
                {
                    content: "危险文本",
                    note: "警示危险操作",
                    props: { type: "danger" },
                },
                {
                    content: "信息文本",
                    note: "展示辅助信息",
                    props: { type: "info" },
                },
            ],
        },
        {
            id: "size",
            title: "尺寸规格",
            caption: "Size Variants",
            description:
                "通过不同尺寸适配多端布局，从移动端到桌面端的文本显示都能保持舒适体验。",
            texts: [
                {
                    content: "大号文本",
                    note: "适用于标题、强调内容",
                    props: { size: "large" },
                },
                {
                    content: "默认文本",
                    note: "桌面端通用尺寸",
                    props: { size: "default" },
                },
                {
                    content: "小号文本",
                    note: "辅助信息、说明文字",
                    props: { size: "small" },
                },
            ],
        },
        {
            id: "combination",
            title: "组合使用",
            caption: "Combinations",
            description:
                "将类型、尺寸等属性组合使用，创造出更丰富的视觉层次和语义表达。",
            texts: [
                {
                    content: "主要大号文本",
                    note: "type + size 组合",
                    props: { type: "primary", size: "large" },
                },
                {
                    content: "成功默认文本",
                    note: "type + size 组合",
                    props: { type: "success", size: "default" },
                },
                {
                    content: "警告小号文本",
                    note: "type + size 组合",
                    props: { type: "warning", size: "small" },
                },
                {
                    content: "危险大号文本",
                    note: "type + size 组合",
                    props: { type: "danger", size: "large" },
                },
            ],
        },
    ];

    const usageGuides = [
        "根据文本的重要性和语义选择合适的类型，保持页面信息层次清晰。",
        "长文本内容建议使用 truncated 或 line-clamp 属性，避免破坏页面布局。",
        "通过 size 属性适配不同场景，标题使用 large，正文使用 default，辅助信息使用 small。",
        "自定义颜色和字体样式时，需确保文本与背景的对比度符合无障碍标准。",
        "使用 tag 属性可以改变渲染的 HTML 标签，有助于 SEO 和语义化。",
        "扩展属性（color、fontWeight 等）提供了更灵活的样式定制能力，但需保持设计一致性。",
    ];
</script>

<style scoped>
    .text-showcase {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 32px 40px 48px;
        background: linear-gradient(
            160deg,
            #f6f8ff 0%,
            #ffffff 55%,
            #f9fbff 100%
        );
        min-height: 100%;
    }

    .intro {
        max-width: 720px;
        text-align: left;
    }

    .eyebrow {
        font-size: 14px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #5c6aff;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .intro h1 {
        font-size: 32px;
        font-weight: 700;
        margin: 0 0 12px;
        color: #1f2a56;
    }

    .subtitle {
        font-size: 16px;
        line-height: 1.7;
        color: #4c5a7a;
        margin: 0;
    }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
    }

    .group-card {
        border-radius: 18px;
        overflow: hidden;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }

    .card-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #1f2a56;
    }

    .card-header span {
        font-size: 14px;
        color: #8792b0;
    }

    .group-description {
        font-size: 14px;
        line-height: 1.6;
        color: #4c5a7a;
        margin-bottom: 16px;
    }

    .text-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 20px;
    }

    .text-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
        min-width: 120px;
    }

    .text-note {
        font-size: 12px;
        color: #98a5c7;
    }

    .card-full {
        width: 100%;
    }

    .truncate-demo {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .truncate-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .truncate-item h4 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #1f2a56;
    }

    .demo-note {
        font-size: 12px;
        color: #98a5c7;
        font-family: "Courier New", monospace;
    }

    .extend-demo {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .extend-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .extend-group h4 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #1f2a56;
    }

    .extend-items {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
    }

    .tag-demo {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
    }

    .tag-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 150px;
    }

    .guide-card :deep(.el-card__body) {
        padding: 20px 28px 28px;
    }

    .guide-list {
        margin: 0;
        padding-left: 18px;
        display: grid;
        gap: 10px;
        color: #4c5a7a;
        font-size: 14px;
        line-height: 1.6;
    }

    .guide-list li {
        list-style: disc;
    }

    @media (max-width: 1024px) {
        .text-showcase {
            padding: 24px 24px 36px;
        }

        .card-grid {
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        }
    }

    @media (max-width: 600px) {
        .intro h1 {
            font-size: 26px;
        }

        .subtitle {
            font-size: 15px;
        }

        .extend-items {
            flex-direction: column;
            align-items: flex-start;
        }
    }
</style>
