<? viewPlugins("qgGrid","layer","zTree","qgUpload");
$headerEnd = '<script src="'.\mvc::$cfg['path']['static'].'/js/jsplumb.min.js?'.VER_STATIC.'"></script>';
viewSet("headerEnd",$headerEnd);
viewLoad("public/header");
?>
<style>
    body {
        background: linear-gradient(180deg, #f3f9ff 0%, #ffffff 100%);
        font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        color: #334155;
        min-height: 100vh;
    }
    .container{
        margin-left: 10px;
    }

    :root {
        --slate-50: #f8fafc;
        --slate-100: #f1f5f9;
        --slate-200: #e2e8f0;
        --slate-300: #cbd5e1;
        --slate-400: #94a3b8;
        --slate-500: #64748b;
        --slate-700: #334155;
        --slate-800: #1e293b;
        --sky-50: #f0f9ff;
        --sky-100: #e0f2fe;
        --orange-100: #ffedd5;
        --orange-500: #f97316;
    }

    /* 顶部装饰 */
    .top-badge {
        background: var(--sky-100);
        color: #0369a1;
        padding: 6px 18px;
        border-radius: 999px;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 10px rgba(186, 230, 253, 0.5);
    }

    /* 容器卡片样式 */
    .glass-card {
        background: white;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 1);
        box-shadow: 0 20px 50px rgba(148, 163, 184, 0.1);
        margin-bottom: 30px;
        padding: 10px 10px;
        position: relative;
    }

    /* 流程节点通用样式 */
    .flow-node {
        border-radius: 14px;
        padding: 12px 28px;
        color: white;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        position: relative;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        z-index: 2;
    }
    .flow-node:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12); cursor: pointer; }
    .flow-node a { color: white; text-decoration: none; display: flex; align-items: center; gap: 8px; }
    .flow-node a:hover { color: white; text-decoration: none; }

    .node-blue { background: linear-gradient(135deg, #38bdf8, #1d4ed8); }
    .node-dark { background: linear-gradient(135deg, #64748b, #475569); }
    .node-cyan { background: linear-gradient(135deg, #22d3ee, #0891b2); }
    .node-green { background: linear-gradient(135deg, #34d399, #059669); }
    .node-orange { background: linear-gradient(135deg, #fb923c, #f97316); box-shadow: 0 10px 25px rgba(249, 115, 22, 0.3); }

    /*计数器小徽章 */
    .node-badge {
        background-color: rgba(255, 255, 255, 0.2);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 10px;
        margin-left: 4px;
    }
    .node-badge-dark {
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* 标签样式的子节点 */
    .tag-node {
        background: white;
        border: 1px solid var(--slate-100);
        color: var(--slate-500);
        padding: 6px 16px;
        border-radius: 10px;
        font-size: 14px;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }

    /* 连线系统 */
    .v-line {
        width: 2px;
        height: 50px;
        background: var(--slate-300);
        position: relative;
    }
    .v-line::after {
        content: '▼';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%) scaleX(1.2);
        font-size: 8px;
        color: var(--slate-300);
    }

    .h-connector {
        display: flex;
        align-items: center;
        flex-grow: 1;
        padding: 0 15px;
    }
    .h-line {
        height: 2px;
        background: var(--slate-300);
        flex-grow: 1;
        position: relative;
    }
    .arrow-left::before {
        content: '◀';
        position: absolute;
        left: -5px;
        top: 50%;
        transform: translateY(-50%) scaleY(1.2);
        font-size: 8px;
        color: var(--slate-300);
    }
    .arrow-right::after {
        content: '▶';
        position: absolute;
        right: -5px;
        top: 50%;
        transform: translateY(-50%) scaleY(1.2);
        font-size: 8px;
        color: var(--slate-300);
    }

    /* 结构部分样式 */
    .struct-item {
        border-radius: 14px;
        padding: 15px 24px;
        margin-bottom: 15px;
        border: 1px solid transparent;
        font-weight: 500;
        transition: all 0.2s;
    }
    .struct-blue { background: #f0f9ff; border-color: var(--sky-100); color: #0369a1 !important; }
    .struct-blue a { color: #0369a1 !important; text-decoration: none; }
    .struct-yellow { background: #fffbeb; border-color: #fef3c7; color: #92400e !important; }
      .struct-yellow a { 
        color: #92400e !important; 
        text-decoration: none; 
    }

    .struct-item:hover { transform: translateX(5px); }

    .footer-text {
        color: var(--slate-300);
        font-size: 12px;
        text-align: center;
        margin-top: 50px;
        letter-spacing: 1px;
    }

    /* 自定义图标容器 */
    .icon-box {
        width: 40px;
        height: 40px;
        
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--orange-500);
    }

    .tag-container {
        background-color: rgba(240, 249, 255, 0.5);
        padding: 1rem;
        border-radius: 1.5rem;
        border: 1px solid var(--sky-100);
        min-width: 130px;
    }

    .relation-label {
        font-size: 12px;
        background-color: var(--slate-50);
        border: 1px solid var(--slate-100);
        padding: 4px 8px;
        border-radius: 4px;
        color: var(--slate-400);
    }
    
    /* //保持原来的样式 */
    a:hover{
        text-decoration: none;
        color: inherit; 
    }
    .struct-gray {
        background: var(--slate-50);
        border-color: var(--slate-200);
        color: var(--slate-400) !important;
    }
    .struct-gray:hover {
        transform: translateX(5px);
        background: var(--slate-100);
    }
</style>
</head>
<body>

<div class="container py-2" style="max-width:1024px;">
    <!-- 顶部标题区域 -->
    <!-- <div class="text-center mb-5">
        <div class="top-badge mb-4">
            <i class="fas fa-database" style="font-size: 10px;"></i> <lg>数据管理系统</lg>
        </div>
        <h1 class="fw-bold" style="letter-spacing: 4px; font-size: 32px; color: var(--slate-800);"><lg>汽车零件数据流程图</lg></h1>
    </div> -->

    <!-- 主体流程图卡片 -->
    <div class="glass-card">
        <div class="d-flex flex-column align-items-center">
            
            <!-- 阶段1: 信息录入 -->
            <div class="flow-node node-blue">
                <a href="<?=PATH_SITE?><?=PATH_LANG?>/work/dataList?act=import" tab><i class="fa fa-file"></i> <lg>信息录入</lg></a>
            </div>

            <div class="v-line"></div>

            <!-- 阶段2: 数据处理 -->
            <div class="d-flex align-items-center justify-content-center w-100 my-1" style="max-width: 700px;">
                <div class="flow-node node-dark">
                    <i class="fa fa-asterisk"></i> <lg>数据清洗</lg>
                </div>
                
                <div class="h-connector">
                    <div class="h-line arrow-left"></div>
                    <div class="px-3 text-slate-400 text-sm whitespace-nowrap"><lg>补充数据</lg></div>
                    <div class="h-line arrow-right"></div>
                </div>

                <div class="flow-node node-cyan">
                    <a href="<?=PATH_SITE?><?=PATH_LANG?>/work/dataList.html" tab><i class="fa fa-database"></i> <lg>数据单</lg> <span class="node-badge"><?=$tjArr['work-data']? $tjArr['work-data']: 0?></span></a>
                </div>
            </div>

            <div class="v-line"></div>

            <!-- 阶段3: 核心关联 -->
            <div class="d-flex align-items-center gap-2 justify-content-center w-100">
                <!-- 供应商 -->
                <div class="flow-node node-dark">
                   <a href="<?=PATH_SITE?><?=PATH_LANG?>/element/listView?elename=supplier_pro" tab> <i class="fa fa-users"></i> <lg>供应商目录</lg></a>
                </div>

                <div class="d-flex align-items-center px-3">
                    <span class="relation-label"><lg>号码关联</lg></span>
                    <div class="ms-1" style="color: var(--slate-300);">──▶</div>
                </div>

                <!-- 零件库 -->
                <div class="flow-node node-green px-5">
                    <a href="<?=PATH_SITE?><?=PATH_LANG?>/oe/list" tab><i class="fa fa-server"></i> <lg>零件库</lg> <span class="node-badge node-badge-dark"><?=$tjArr['oepro']? $tjArr['oepro']: 0?></span></a>
                </div>

                <div class="px-3" style="color: var(--slate-300);">──▶</div>

                <!-- 分类详情 -->
                <div class="tag-container">
                    <div class="tag-node"><a href="<?= PATH_SITE ?><?= PATH_LANG ?>/oe/listSup" tab><lg>基础信息</lg></a></div>
                    <div class="tag-node"><lg>参数</lg></div>
                    <div class="tag-node"><lg>参考号</lg></div>
                    <div class="tag-node"><a href="<?= PATH_SITE ?><?= PATH_LANG ?>/carmodel/lists" tab><lg>国际车型</lg></a></div>
                    <div class="tag-node mb-0"><a href="<?= PATH_SITE ?><?= PATH_LANG ?>/carmodelcn/lists.html" tab><lg>中国车型</lg></a></div>
                </div>
            </div>

            <div class="v-line" style="margin-bottom:5px !important;"></div>

            <!-- 阶段4: 商品库 -->
            <div class="flow-node node-orange px-5 py-3 mt-1" style="margin-top:5px !important;min-width: 180px; justify-content: center;">
                <a href="<?=PATH_SITE?><?=PATH_LANG?>/pro/codeList" tab><i class="fa fa-box-archive"></i> <lg>商品库</lg> <span class="node-badge"><?=$tjArr['pro']? $tjArr['pro']: 0?></span></a>
            </div>
        </div>
    </div>

    <!-- 数据结构卡片 -->
    <div class="glass-card p-3">
        <div class="d-flex align-items-center gap-3 mb-3">
            <i class="fa fa-cube" style="color: #f97316;"></i>
            <h4 class="m-0 fw-bold" style="color: var(--slate-700);"><lg>商品库数据结构</lg></h4>
        </div>

        <div class="row g-4">
            <div class="col-md-6">
                <div class="struct-item struct-blue"><a href="<?= PATH_SITE ?><?= PATH_LANG ?>/pro/codeList" tab><lg>基础信息</lg></a></div>
                <div class="struct-item struct-gray"><lg>参数</lg></div>
                <div class="struct-item struct-gray"><lg>参考号</lg></div>
                <div class="struct-item struct-blue"><a href="<?= PATH_SITE ?><?= PATH_LANG ?>/carmodel/lists" tab><lg>国际车型</lg></a></div>
                <div class="struct-item struct-blue"><a href="<?= PATH_SITE ?><?= PATH_LANG ?>/carmodelcn/lists.html" tab><lg>中国车型</lg></a></div>
                <div class="struct-item struct-blue"><a href="<?= PATH_SITE ?><?= PATH_LANG ?>/carmodelna/lists.html" tab><lg>北美车型</lg></a></div>
            </div>
            <div class="col-md-6">
                <div class="struct-item struct-yellow"><a href="<?= PATH_SITE ?><?= PATH_LANG ?>/pro/image/list" tab><lg>图片</lg></a></div>
                <div class="struct-item struct-yellow"><a href="<?= PATH_SITE ?><?= PATH_LANG ?>/oe/oeLink?type=link" tab><lg>关联</lg></a></div>
                <div class="struct-item struct-yellow"><a href="<?= PATH_SITE ?><?= PATH_LANG ?>/oe/oeLink?type=pair" tab><lg>配对</lg></a></div>
                <div class="struct-item struct-gray"><lg>附件</lg></div>
                <div class="struct-item struct-gray"><lg>包装</lg></div>
                <div class="struct-item struct-yellow"><a href="<?= PATH_SITE ?><?= PATH_LANG ?>/element/listView?elename=competitor" tab><lg>竞争对手</lg></a></div>
            </div>
        </div>
    </div>
</div>
<? viewLoad("public/footer") ?>