ST-Amily2-Chat-Optimisation-SecFix/MiZheSi/template.html

<div class="mizhesi-container">
    <div class="mizhesi-header" style="justify-content: center;">
        <i class="fas fa-scroll"></i>
        <h3>密折司奏报</h3>
    </div>
    <div class="mizhesi-search-container">
        <input type="text" id="mizhesi-search-input" placeholder="搜索内容...">
        <button id="mizhesi-search-button" class="menu_button" title="搜索"><i class="fa-solid fa-magnifying-glass"></i></button>
        <button id="mizhesi-clear-button" class="menu_button" title="清除高亮"><i class="fa-solid fa-xmark"></i></button>
    </div>
    <div id="mizhesi-editor-container" class="mizhesi-editor-container">

    </div>
</div>
<style>
    .mizhesi-container {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #ddd;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .mizhesi-header {
        padding-bottom: 10px;
        border-bottom: 1px solid #555;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .mizhesi-header i {
        font-size: 1.5em;
        color: #d4af37;
    }
    .mizhesi-header h3 {
        margin: 0;
        font-weight: 600;
    }
    .mizhesi-editor-container {
        flex-grow: 1;
        overflow-y: auto;
        padding-right: 10px;
    }
    .mizhesi-message-block {
        border: 1px solid #444;
        border-radius: 8px;
        margin-bottom: 15px;
        background-color: #2b2d31;
    }
    .mizhesi-message-header {
        padding: 8px 12px;
        background-color: #3a3d42;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        font-weight: bold;
        font-size: 0.9em;
        cursor: pointer; 
        position: relative;
    }
    .mizhesi-message-header::after {
        content: '▶'; 
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.2s ease-in-out;
    }
    .mizhesi-message-block.expanded .mizhesi-message-header::after {
        transform: translateY(-50%) rotate(90deg);
    }
    .mizhesi-message-content {
        padding: 12px;
        display: none; 
    }
    .mizhesi-message-content textarea {
        width: 100%;
        min-height: 80px;
        height: auto;
        background-color: #202225;
        color: #ccc;
        border: 1px solid #555;
        border-radius: 4px;
        padding: 10px;
        box-sizing: border-box;
        font-size: 0.95em;
        line-height: 1.5;
        resize: vertical;
    }

    .mizhesi-message-block[data-role="system"] .mizhesi-message-header {
        background-color: #5865f2; 
        color: white;
    }
    .mizhesi-message-block[data-role="user"] .mizhesi-message-header {
        background-color: #57f287; 
        color: #060607;
    }
    .mizhesi-message-block[data-role="assistant"] .mizhesi-message-header {
        background-color: #f25757; 
        color: white;
    }
    .mizhesi-highlight {
        background-color: rgb(235, 7, 185);
        color: black;
    }
    .mizhesi-search-container {
        display: flex;
        margin-bottom: 10px;
    }
    .mizhesi-search-container input {
        flex-grow: 1;
        background-color: #202225;
        border: 1px solid #555;
        color: #ccc;
        border-radius: 4px;
        padding: 4px 8px;
        margin-right: 5px;
    }
    .mizhesi-highlight-border {
        border: 2px solid #ff00dd !important;
        box-shadow: 0 0 10px #ff00c8;
    }
</style>