<template>
    <el-scrollbar>
        <div class="common-page box">
            <el-space direction="vertical" :size="20" alignment="flex-start" fill>
                <div class="text-title-0-show">开发样式</div>
                <div class="text-title-1-show">样式变量</div>
                <ConstStyle />
                <div class="text-title-1-show">文字样式</div>
                <TextStyle />
                <div class="text-title-1-show">通用样式/组件</div>
                <div style="position: relative; min-height: 700px;">
                    <el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs dev-style-tabs">
                        <el-tab-pane label="通用" lazy>
                            <common-page />
                        </el-tab-pane>
                        <el-tab-pane label="文本" lazy>
                            <text-page />
                        </el-tab-pane>
                        <el-tab-pane label="图片" lazy>
                            <images-page />
                        </el-tab-pane>
                        <el-tab-pane label="单选框" lazy>
                            <radio-page />
                        </el-tab-pane>
                        <el-tab-pane label="选项卡" lazy>
                            <tabs-page />
                        </el-tab-pane>
                        <el-tab-pane label="人物" lazy>
                            <people-page />
                        </el-tab-pane>
                        <el-tab-pane label="新闻" lazy>
                            <news-page />
                        </el-tab-pane>
                        <el-tab-pane label="预警面板" lazy>
                            <WarnningPane />
                        </el-tab-pane>
                        <el-tab-pane label="领域标签" lazy>
                            <AreaTag />
                        </el-tab-pane>
                        <el-tab-pane label="按钮" lazy>
                            <ActionButton />
                        </el-tab-pane>
                        <el-tab-pane label="时间选择框" lazy>
                            <TimeTabPane />
                        </el-tab-pane>
                        <el-tab-pane label="Ai智能总结" lazy>
                            <AiInfo />
                        </el-tab-pane>
                        <el-tab-pane label="Ai内容摘要" lazy>
                            <AiSummary />
                        </el-tab-pane>
                        <el-tab-pane label="层级关系图" lazy>
                            <GraphChart />
                        </el-tab-pane>
                        <el-tab-pane label="引力关系图" lazy>
                            <GraphTreeChart />
                        </el-tab-pane>
                        <el-tab-pane label="树状图" lazy>
                            <TreeChart />
                        </el-tab-pane>
                        <el-tab-pane label="词云图" lazy>
                            <WordCloudChart />
                        </el-tab-pane>
                        <el-tab-pane label="关系图" lazy>
                            <RelationChart />
                        </el-tab-pane>
                        <el-tab-pane label="中心关系图" lazy>
                            <RelationCenterChart />
                        </el-tab-pane>
                        <el-tab-pane label="引力关系图" lazy>
                            <RelationForceChart />
                        </el-tab-pane>
                        <el-tab-pane label="激活工作框" lazy>
                            <WorkingBox />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-space>
        </div>
    </el-scrollbar>
</template>

<script setup>
import "@/styles/container.scss"
import "./devStyle.scss"
import TextStyle from './textStyle.vue';
import ConstStyle from './constStyle.vue';
import { ElTabs, ElTabPane, ElSpace } from "element-plus";
import RadioPage from './RadioPage/index.vue';
import TabsPage from './TabsPage/index.vue';
import CommonPage from './CommonPage/index.vue';
import TextPage from './TextPage/index.vue';
import ImagesPage from './Images/index.vue';
import PeoplePage from './People/index.vue';
import WarnningPane from './WarnningPane/index.vue'
import GraphChart from './GraphChart/index.vue'
import GraphTreeChart from './GraphTreeChart/index.vue'
import TreeChart from './TreeChart/index.vue'
import AreaTag from './AreaTag/index.vue'
import ActionButton from './ActionButton/index.vue'
import WordCloudChart from './WordCloudChart/index.vue'
import NewsPage from './News/index.vue'
import TimeTabPane from './TimeTabPane/index.vue'
import AiInfo from './Ai/AiInfo/index.vue'
import AiSummary from './Ai/AiSummary/index.vue'
import RelationChart from './RelationChart/index.vue'
import RelationCenterChart from './RelationCenterChart/index.vue'
import RelationForceChart from './RelationForceChart/index.vue'
import WorkingBox from './WorkingBox/index.vue'
</script>

<style lang="scss" scoped>
.box {
    padding-bottom: 20px;
}

.dev-style-tabs {
    :deep(.el-tabs__content) {
        display: block !important;
    }
}
</style>