18879694722
/
ai-salesperson-assistant


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI实验室 - 数据训练中心</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4285f4;
            --primary-light: rgba(66, 133, 244, 0.1);
            --primary-dark: #3367d6;
            --text-dark: #0a192f;
            --text-medium: #333333;
            --text-light: #8898aa;
            --background: #ffffff;
            --card-bg: #f8f9fa;
            --border: #e6e9ed;
            --success: #34a853;
            --warning: #fbbc05;
            --error: #ea4335;
            --shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        
        body {
            background-color: #f5f8ff;
            background-image: linear-gradient(135deg, #f5f8ff 0%, #e8ecff 100%);
            color: var(--text-medium);
            line-height: 1.6;
            padding: 16px;
            max-width: 500px;
            margin: 0 auto;
            position: relative;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* 头部导航 */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            margin-bottom: 20px;
            position: sticky;
            top: 0;
            background: transparent;
            z-index: 100;
        }
        
        .back-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--background);
            border: none;
            color: var(--text-dark);
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
        }
        
        .back-btn:hover {
            background: var(--primary-light);
            color: var(--primary);
        }
        
        .title {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-dark);
            text-align: center;
            flex-grow: 1;
            text-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        /* 卡片样式 */
        .card {
            background: var(--background);
            border-radius: 20px;
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(66, 133, 244, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(66, 133, 244, 0.15);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-dark);
        }
        
        .card-subtitle {
            font-size: 14px;
            color: var(--text-light);
            margin-top: 4px;
        }
        
        /* 上传控制台 */
        .upload-console {
            position: relative;
            min-height: 220px;
        }
        
        .source-tags {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        .source-tag {
            background: #f0f4f8;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            color: var(--text-dark);
            transition: all 0.2s ease;
            border: 1px solid transparent;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .source-tag.active {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3);
            color: var(--primary);
            font-weight: 600;
            background: rgba(66, 133, 244, 0.08);
        }
        
        /* 自定义标签区域 */
        .custom-tag-form {
            display: flex;
            margin-top: 25px;
            gap: 10px;
            align-items: center;
        }
        
        .custom-tag-input {
            flex: 1;
            padding: 12px 18px;
            border-radius: 20px;
            border: 1px solid var(--border);
            outline: none;
            font-size: 14px;
            transition: border-color 0.3s;
            background: var(--card-bg);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
        }
        
        .custom-tag-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
        }
        
        .add-tag-btn {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 12px 24px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 10px rgba(66, 133, 244, 0.3);
        }
        
        .add-tag-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(66, 133, 244, 0.4);
        }
        
        /* 数据看板 */
        .stats-container {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            margin-top: 15px;
        }
        
        .stat-item {
            flex: 1;
            text-align: center;
            padding: 15px;
            border-radius: 16px;
            background: var(--background);
            position: relative;
            box-shadow: 0 4px 10px rgba(0,0,0,0.03);
            border: 1px solid rgba(66, 133, 244, 0.08);
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-dark);
            margin: 10px 0;
        }
        
        .stat-label {
            font-size: 13px;
            color: var(--text-light);
        }
        
        .progress-ring {
            position: relative;
            width: 80px;
            height: 80px;
            margin: 0 auto;
        }
        
        .progress-bg {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(var(--primary) 0% 75%, var(--border) 75% 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .progress-inner {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: var(--card-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            color: var(--text-dark);
        }
        
        .quality-bar {
            height: 8px;
            background: var(--border);
            border-radius: 4px;
            margin-top: 15px;
            overflow: hidden;
            position: relative;
        }
        
        .quality-fill {
            height: 100%;
            width: 85%;
            background: linear-gradient(90deg, var(--primary), var(--primary-dark));
            border-radius: 4px;
            position: relative;
        }
        
        .quality-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.5),
                transparent);
            animation: wave 2s linear infinite;
        }
        
        @keyframes wave {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        .alert-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--error);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            font-weight: bold;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(234, 67, 53, 0.7); }
            70% { box-shadow: 0 0 0 8px rgba(234, 67, 53, 0); }
            100% { box-shadow: 0 0 0 0 rgba(234, 67, 53, 0); }
        }
        
        /* 训练结果展示 */
        .training-results {
            margin-top: 25px;
        }
        
        .result-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid var(--border);
            transition: all 0.2s ease;
        }
        
        .result-item:hover {
            background: rgba(66, 133, 244, 0.03);
            border-radius: 12px;
            padding: 15px;
        }
        
        .result-item:last-child {
            border-bottom: none;
        }
        
        .result-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            margin-right: 15px;
            font-size: 18px;
        }
        
        .result-content {
            flex: 1;
        }
        
        .result-title {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 4px;
        }
        
        .result-meta {
            display: flex;
            font-size: 13px;
            color: var(--text-light);
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .result-date {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .result-status {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .status-completed {
            background: rgba(52, 168, 83, 0.1);
            color: var(--success);
        }
        
        .status-training {
            background: rgba(251, 188, 5, 0.1);
            color: var(--warning);
        }
        
        .status-error {
            background: rgba(234, 67, 53, 0.1);
            color: var(--error);
        }
        
        /* 数据记录部分 */
        .data-record {
            margin-top: 25px;
        }
        
        .record-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .view-all {
            color: var(--primary);
            font-size: 14px;
            text-decoration: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .record-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .record-item {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(66, 133, 244, 0.08);
            transition: all 0.3s ease;
        }
        
        .record-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(66, 133, 244, 0.15);
        }
        
        .record-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .record-value {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .record-trend {
            display: flex;
            align-items: center;
            font-size: 12px;
            margin-top: 5px;
        }
        
        .trend-up {
            color: var(--success);
        }
        
        .trend-down {
            color: var(--error);
        }
        
        .trend-icon {
            margin-right: 4px;
        }
        
        /* 历史数据记录 */
        .history-list {
            max-height: 200px;
            overflow-y: auto;
            padding-right: 8px;
        }
        
        .history-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
            transition: all 0.2s ease;
        }
        
        .history-item:hover {
            background: rgba(66, 133, 244, 0.03);
            border-radius: 12px;
            padding: 12px;
        }
        
        .history-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            margin-right: 12px;
            font-size: 16px;
        }
        
        .history-content {
            flex: 1;
        }
        
        .history-name {
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .history-meta {
            display: flex;
            font-size: 12px;
            color: var(--text-light);
            gap: 15px;
        }
        
        .history-size {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .history-date {
            color: var(--text-medium);
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        /* 页面标题装饰 */
        .page-header {
            text-align: center;
            margin-bottom: 25px;
        }
        
        .page-title {
            font-size: 28px;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 8px;
            background: linear-gradient(90deg, #3367d6, #4285f4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            display: inline-block;
        }
        
        .page-subtitle {
            color: var(--text-light);
            font-size: 16px;
            max-width: 300px;
            margin: 0 auto;
        }
        
        /* 装饰元素 */
        .decor-circle {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(66, 133, 244, 0.1) 0%, rgba(66, 133, 244, 0.05) 100%);
            z-index: -1;
        }
        
        .circle-1 {
            top: 10%;
            left: -50px;
        }
        
        .circle-2 {
            bottom: 10%;
            right: -50px;
        }
        
        /* 新增搜索框样式 */
        .search-container {
            margin-bottom: 20px;
            position: relative;
        }
        
        .search-box {
            display: flex;
            align-items: center;
            background: var(--card-bg);
            border-radius: 30px;
            padding: 8px 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border);
        }
        
        .search-box i {
            color: var(--text-light);
            margin-right: 10px;
            font-size: 18px;
        }
        
        .search-input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 10px 0;
            font-size: 15px;
            color: var(--text-dark);
            outline: none;
        }
        
        .search-input::placeholder {
            color: var(--text-light);
        }
        
        /* 上传控制台新样式 */
        .upload-method-selector {
            margin: 25px 0;
        }
        
        .method-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-dark);
        }
        
        .method-options {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .method-option {
            flex: 1;
            min-width: 100px;
            padding: 15px;
            background: var(--card-bg);
            border-radius: 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid var(--border);
        }
        
        .method-option:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(66, 133, 244, 0.1);
        }
        
        .method-option.active {
            border-color: var(--primary);
            background: var(--primary-light);
            color: var(--primary);
            font-weight: 600;
        }
        
        .method-icon {
            font-size: 24px;
            margin-bottom: 10px;
            color: var(--primary);
        }
        
        .upload-action {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }
        
        .upload-button {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 30px;
            padding: 15px 40px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 6px 15px rgba(66, 133, 244, 0.3);
        }
        
        .upload-button:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(66, 133, 244, 0.4);
        }
        
        .upload-button:active {
            transform: translateY(0);
        }
        
        /* 上传状态指示器 */
        .upload-status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 16px;
            background: rgba(52, 168, 83, 0.1);
            color: var(--success);
            text-align: center;
            display: none;
        }
        
        .upload-status.error {
            background: rgba(234, 67, 53, 0.1);
            color: var(--error);
        }
        
        .upload-progress {
            height: 6px;
            background: var(--border);
            border-radius: 3px;
            margin-top: 10px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--primary), var(--primary-dark));
            border-radius: 3px;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="decor-circle circle-1"></div>
    <div class="decor-circle circle-2"></div>
    
    <!-- 顶部导航 -->
    <div class="header">
        <button class="back-btn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <h1 class="title">数据训练中心</h1>
    </div>
    
    <div class="page-header">
        <h1 class="page-title">AI数据训练中心</h1>
        <p class="page-subtitle">上传数据、训练模型、优化结果</p>
    </div>
    
    <!-- 上传控制台 -->
    <div class="card upload-console">
        <div class="card-header">
            <div>
                <div class="card-title">上传控制台</div>
                <div class="card-subtitle">选择数据类型和输入方式</div>
            </div>
        </div>
        
        <div class="source-tags" id="sourceTags">
            <div class="source-tag active">会议记录</div>
            <div class="source-tag">客户合同</div>
            <div class="source-tag">反馈表</div>
            <div class="source-tag">培训资料</div>
        </div>
        
        <div class="custom-tag-form">
            <input type="text" class="custom-tag-input" id="customTagInput" placeholder="输入新数据类型...">
            <button class="add-tag-btn" id="addTagBtn">
                添加标签
            </button>
        </div>
        
        <div class="upload-method-selector">
            <div class="method-title">选择输入方式</div>
            <div class="method-options" id="methodOptions">
                <div class="method-option" data-method="camera">
                    <div class="method-icon">
                        <i class="fas fa-camera"></i>
                    </div>
                    <div>拍照</div>
                </div>
                <div class="method-option" data-method="file">
                    <div class="method-icon">
                        <i class="fas fa-file"></i>
                    </div>
                    <div>文件</div>
                </div>
                <div class="method-option" data-method="mic">
                    <div class="method-icon">
                        <i class="fas fa-microphone"></i>
                    </div>
                    <div>录音</div>
                </div>
                <div class="method-option" data-method="text">
                    <div class="method-icon">
                        <i class="fas fa-keyboard"></i>
                    </div>
                    <div>文本</div>
                </div>
            </div>
        </div>
        
        <div class="upload-action">
            <button class="upload-button" id="uploadButton">
                <i class="fas fa-cloud-upload-alt"></i> 上传数据
            </button>
        </div>
        
        <div class="upload-status" id="uploadStatus">
            <div>数据上传中...</div>
            <div class="upload-progress">
                <div class="progress-bar" id="progressBar"></div>
            </div>
        </div>
    </div>
    
    <!-- 数据看板 -->
    <div class="card">
        <div class="card-header">
            <div>
                <div class="card-title">数据看板</div>
                <div class="card-subtitle">今日处理状态</div>
            </div>
            <div class="alert-badge">3</div>
        </div>
        
        <div class="stats-container">
            <div class="stat-item">
                <div class="progress-ring">
                    <div class="progress-bg">
                        <div class="progress-inner">128</div>
                    </div>
                </div>
                <div class="stat-label">处理量</div>
            </div>
            
            <div class="stat-item">
                <div class="stat-value">85%</div>
                <div class="stat-label">质量评分</div>
                <div class="quality-bar">
                    <div class="quality-fill"></div>
                </div>
            </div>
        </div>
        
        <!-- 每日数据记录 -->
        <div class="data-record">
            <div class="record-header">
                <div class="card-title">每日数据记录</div>
                <a class="view-all">
                    查看全部 <i class="fas fa-arrow-right"></i>
                </a>
            </div>
            
            <div class="record-list">
                <div class="record-item">
                    <div class="record-title"><i class="fas fa-file-medical"></i> 新增数据</div>
                    <div class="record-value">42</div>
                    <div class="record-trend trend-up">
                        <i class="fas fa-arrow-up trend-icon"></i> 12%
                    </div>
                </div>
                
                <div class="record-item">
                    <div class="record-title"><i class="fas fa-cogs"></i> 处理中</div>
                    <div class="record-value">18</div>
                    <div class="record-trend trend-down">
                        <i class="fas fa-arrow-down trend-icon"></i> 5%
                    </div>
                </div>
                
                <div class="record-item">
                    <div class="record-title"><i class="fas fa-clock"></i> 训练时间</div>
                    <div class="record-value">1.8h</div>
                    <div class="record-trend trend-up">
                        <i class="fas fa-arrow-up trend-icon"></i> 23%
                    </div>
                </div>
                
                <div class="record-item">
                    <div class="record-title"><i class="fas fa-check-circle"></i> 完成率</div>
                    <div class="record-value">76%</div>
                    <div class="record-trend trend-up">
                        <i class="fas fa-arrow-up trend-icon"></i> 8%
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 历史数据上传记录 -->
    <div class="card">
        <div class="card-header">
            <div>
                <div class="card-title">历史数据上传记录</div>
                <div class="card-subtitle">最近上传的文件</div>
            </div>
        </div>
        
        <!-- 搜索区域 -->
        <div class="search-container">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" class="search-input" id="searchInput" placeholder="搜索文件名、类型或日期...">
            </div>
        </div>
        
        <div class="history-list" id="historyList">
            <div class="history-item">
                <div class="history-icon">
                    <i class="fas fa-file-pdf"></i>
                </div>
                <div class="history-content">
                    <div class="history-name">Q3销售报告.pdf</div>
                    <div class="history-meta">
                        <div class="history-size">
                            <i class="fas fa-database"></i> 4.2MB
                        </div>
                        <div class="history-date">
                            <i class="far fa-calendar"></i> 2023-10-15
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="history-item">
                <div class="history-icon">
                    <i class="fas fa-file-excel"></i>
                </div>
                <div class="history-content">
                    <div class="history-name">客户数据.xlsx</div>
                    <div class="history-meta">
                        <div class="history-size">
                            <i class="fas fa-database"></i> 3.1MB
                        </div>
                        <div class="history-date">
                            <i class="far fa-calendar"></i> 2023-10-14
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="history-item">
                <div class="history-icon">
                    <i class="fas fa-file-word"></i>
                </div>
                <div class="history-content">
                    <div class="history-name">会议纪要.docx</div>
                    <div class="history-meta">
                        <div class="history-size">
                            <i class="fas fa-database"></i> 1.7MB
                        </div>
                        <div class="history-date">
                            <i class="far fa-calendar"></i> 2023-10-13
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="history-item">
                <div class="history-icon">
                    <i class="fas fa-file-csv"></i>
                </div>
                <div class="history-content">
                    <div class="history-name">用户反馈.csv</div>
                    <div class="history-meta">
                        <div class="history-size">
                            <i class="fas fa-database"></i> 2.3MB
                        </div>
                        <div class="history-date">
                            <i class="far fa-calendar"></i> 2023-10-12
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 训练结果展示 -->
    <div class="card">
        <div class="card-header">
            <div>
                <div class="card-title">训练结果展示</div>
                <div class="card-subtitle">模型训练状态与结果</div>
            </div>
        </div>
        
        <div class="training-results">
            <div class="result-item">
                <div class="result-icon">
                    <i class="fas fa-brain"></i>
                </div>
                <div class="result-content">
                    <div class="result-title">销售预测模型</div>
                    <div class="result-meta">
                        <div class="result-date">
                            <i class="far fa-clock"></i> 训练时间: 2.3小时
                        </div>
                        <div class="result-status status-completed">已完成</div>
                    </div>
                </div>
            </div>
            
            <div class="result-item">
                <div class="result-icon">
                    <i class="fas fa-comments"></i>
                </div>
                <div class="result-content">
                    <div class="result-title">情感分析模型</div>
                    <div class="result-meta">
                        <div class="result-date">
                            <i class="far fa-clock"></i> 训练时间: 1.5小时
                        </div>
                        <div class="result-status status-training">训练中</div>
                    </div>
                </div>
            </div>
            
            <div class="result-item">
                <div class="result-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="result-content">
                    <div class="result-title">趋势预测模型</div>
                    <div class="result-meta">
                        <div class="result-date">
                            <i class="far fa-clock"></i> 训练时间: 3.1小时
                        </div>
                        <div class="result-status status-completed">已完成</div>
                    </div>
                </div>
            </div>
            
            <div class="result-item">
                <div class="result-icon">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="result-content">
                    <div class="result-title">客户服务模型</div>
                    <div class="result-meta">
                        <div class="result-date">
                            <i class="far fa-clock"></i> 训练时间: 4.2小时
                        </div>
                        <div class="result-status status-error">失败</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 标签选择交互
        const tags = document.querySelectorAll('.source-tag');
        tags.forEach(tag => {
            tag.addEventListener('click', function() {
                tags.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 添加自定义标签
        const addTagBtn = document.getElementById('addTagBtn');
        const customTagInput = document.getElementById('customTagInput');
        const sourceTags = document.getElementById('sourceTags');
        
        addTagBtn.addEventListener('click', function() {
            const tagText = customTagInput.value.trim();
            if (tagText) {
                const newTag = document.createElement('div');
                newTag.className = 'source-tag';
                newTag.textContent = tagText;
                
                // 添加点击事件
                newTag.addEventListener('click', function() {
                    tags.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
                
                sourceTags.appendChild(newTag);
                customTagInput.value = '';
                
                // 添加动画效果
                newTag.style.opacity = '0';
                newTag.style.transform = 'scale(0.8)';
                setTimeout(() => {
                    newTag.style.transition = 'all 0.3s ease';
                    newTag.style.opacity = '1';
                    newTag.style.transform = 'scale(1)';
                }, 10);
            }
        });
        
        // 按Enter键添加标签
        customTagInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addTagBtn.click();
            }
        });
        
        // 输入方式选择
        const methodOptions = document.querySelectorAll('.method-option');
        methodOptions.forEach(option => {
            option.addEventListener('click', function() {
                methodOptions.forEach(opt => opt.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 上传按钮功能
        const uploadButton = document.getElementById('uploadButton');
        const uploadStatus = document.getElementById('uploadStatus');
        const progressBar = document.getElementById('progressBar');
        
        uploadButton.addEventListener('click', function() {
            // 获取选中的标签
            const selectedTag = document.querySelector('.source-tag.active').textContent;
            
            // 获取选中的输入方式
            const selectedMethod = document.querySelector('.method-option.active');
            const methodName = selectedMethod ? selectedMethod.querySelector('div:last-child').textContent : '未选择';
            
            // 显示上传状态
            uploadStatus.style.display = 'block';
            uploadStatus.innerHTML = `<div>正在上传: ${selectedTag} (方式: ${methodName})</div>
                                       <div class="upload-progress">
                                         <div class="progress-bar" id="progressBar"></div>
                                       </div>`;
            
            // 模拟上传进度
            let progress = 0;
            const interval = setInterval(() => {
                progress += Math.floor(Math.random() * 10);
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                    
                    // 上传完成
                    setTimeout(() => {
                        uploadStatus.innerHTML = `<div><i class="fas fa-check-circle"></i> 上传成功: ${selectedTag} (方式: ${methodName})</div>`;
                        
                        // 添加新项目到历史记录
                        const historyList = document.getElementById('historyList');
                        const newItem = document.createElement('div');
                        newItem.className = 'history-item';
                        newItem.innerHTML = `
                            <div class="history-icon">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="history-content">
                                <div class="history-name">${selectedTag}.${getFileExtension(methodName)}</div>
                                <div class="history-meta">
                                    <div class="history-size">
                                        <i class="fas fa-database"></i> ${(Math.random() * 5).toFixed(1)}MB
                                    </div>
                                    <div class="history-date">
                                        <i class="far fa-calendar"></i> ${getCurrentDate()}
                                    </div>
                                </div>
                            </div>
                        `;
                        historyList.insertBefore(newItem, historyList.firstChild);
                        
                        // 3秒后隐藏状态
                        setTimeout(() => {
                            uploadStatus.style.display = 'none';
                        }, 3000);
                    }, 500);
                }
                
                // 更新进度条
                progressBar.style.width = `${progress}%`;
            }, 200);
        });
        
        // 获取文件扩展名
        function getFileExtension(method) {
            switch(method) {
                case '拍照': return 'jpg';
                case '文件': return 'pdf';
                case '录音': return 'mp3';
                case '文本': return 'txt';
                default: return 'dat';
            }
        }
        
        // 获取当前日期
        function getCurrentDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        
        // 历史记录搜索功能
        const searchInput = document.getElementById('searchInput');
        const historyItems = document.querySelectorAll('.history-item');
        
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            
            historyItems.forEach(item => {
                const fileName = item.querySelector('.history-name').textContent.toLowerCase();
                if (fileName.includes(searchTerm)) {
                    item.style.display = 'flex';
                } else {
                    item.style.display = 'none';
                }
            });
        });
        
        // 模拟每日数据更新
        setInterval(() => {
            const valueElements = document.querySelectorAll('.record-value');
            valueElements.forEach(el => {
                const currentValue = parseInt(el.textContent) || 0;
                const change = Math.floor(Math.random() * 5) - 2; // -2 到 2 之间的随机数
                const newValue = Math.max(0, currentValue + change);
                el.textContent = newValue;
            });
        }, 5000);
    </script>
</body>
</html>