2024.12.25

#@layout()
#define main()

<style>
    .details-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
        margin: 20px;
    }

    .detail-card {
        flex: 1 1 calc(48% - 10px);
        background: #f2f2f2;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .detail-card h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
    }

    .detail-card p {
        font-size: 14px;
        margin: 5px 0;
        word-wrap: break-word;
        color: #555;
    }

    .textarea-block {
        background: #fff;
        border-radius: 5px;
        border: 1px solid #e2e2e2;
        padding: 10px;
        overflow-y: auto;
        font-size: 14px;
        color: #555;
    }

    .textarea-block:focus {
        outline: none;
        border-color: #1E9FFF;
    }
</style>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend style="font-size: 24px; font-weight: bold;">详细信息</legend>
</fieldset>

<div class="details-container">
    <!-- 用户名和时间 -->
    <div class="detail-card">
        <h3>用户名</h3>
        <p>#(details.id??)</p>
        <h3>时间</h3>
        <p>#(details.time??)</p>
    </div>

    <!-- 源语言和目标语言 -->
    <div class="detail-card">
        <h3>源语言</h3>
        <p>#(details.from1??)</p>
        <h3>目标语言</h3>
        <p>#(details.to1??)</p>
    </div>

    <!-- 翻译文本 -->
    <div class="detail-card" style="flex: 1 1 100%;">
        <h3>翻译文本</h3>
        <div class="textarea-block" style="height: 100px;">#(details.q)</div>
    </div>

    <!-- 翻译结果 -->
    <div class="detail-card" style="flex: 1 1 100%;">
        <h3>翻译结果</h3>
        <div class="textarea-block" style="height: 100px;">#(details.result)</div>
    </div>
</div>

#end

#@layout()
#define main()
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend style="font-size: 24px; font-weight: bold;">翻译记录</legend>
</fieldset>

<style>
    .overflow {
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    table {
        border-collapse: collapse;
        width: 100%;
        background-color: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    th {
        background-color: #f8f8f8;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        padding: 12px;
        border-bottom: 2px solid #ddd;
    }

    td {
        font-size: 13px;
        text-align: center;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    tr:hover {
        background-color: #f5f5f5;
    }

    .layui-btn-xs {
        font-size: 13px;
        padding: 3px 10px;
        border-radius: 4px;
    }

    .centered-div {
        text-align: center;
        font-size: 18px;
        color: #FF5722;
        margin-top: 50px;
    }

    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
</style>

#if(session.loginUser.isAdmin??== 1)
<div style="margin: 20px;">
    <div class="layui-form">
        <table class="layui-table">
            <thead>
            <tr>
                <th width="120px">用户名</th>
                <th width="150px">时间</th>
                <th width="100px">源语言</th>
                <th width="100px">目标语言</th>
                <th>翻译内容</th>
                <th>翻译结果</th>
                <th width="100px">操作</th>
            </tr>
            </thead>
            <tbody>
            #for(x : list.getList())
            <tr>
                <td>#(x.id)</td>
                <td class="overflow">#(x.time)</td>
                <td>#(x.from1)</td>
                <td>#(x.to1)</td>
                <td class="overflow" title="#(x.q)">#(x.q)</td>
                <td class="overflow" title="#(x.result)">#(x.result)</td>
                <td>
                    <div class="layui-table-cell laytable-cell-1-action">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" href="/translate/detail/#(x.time)">
                            <i class="layui-icon layui-icon-search"></i>查看详情
                        </a>
                    </div>
                </td>
            </tr>
            #end
            </tbody>
        </table>
    </div>
    #@paginate(list.pageNumber, list.totalPage, "/translate/list/")
</div>
#else
<div class="centered-div">
    你无权访问本页面
</div>
#end
#end

#@layout()
#define main()

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px; text-align: center; font-size: 18px; font-weight: bold;">
    <legend>翻译记录查询</legend>
    <link rel="stylesheet" href="../static/selfDefine.css">
</fieldset>

<div style="max-width: 1200px; margin: 0 auto; padding: 20px;">

    <!-- 表单部分 -->
    <div class="form_box" style="margin-bottom: 30px;">
        <form action="/translate/search" method="post" style="display: flex; flex-wrap: wrap; justify-content: space-between;">
            <div style="flex: 1 1 30%; padding-right: 10px;">
                <label for="from">源语言</label>
                <select name="from" id="from" style="width: 100%; height: 38px; padding: 0 8px;">
                    <option value="">所有</option>
                    <option value="en">英语</option>
                    <option value="zh">汉语</option>
                    <option value="auto">自动</option>
                </select>
            </div>

            <div style="flex: 1 1 30%; padding-right: 10px;">
                <label for="to">目标语言</label>
                <select name="to" id="to" style="width: 100%; height: 38px; padding: 0 8px;">
                    <option value="">所有</option>
                    <option value="zh">汉语</option>
                    <option value="en">英语</option>
                </select>
            </div>

            <div style="flex: 1 1 30%; padding-right: 10px;">
                <label for="date">日期</label>
                <input type="date" name="date" id="date" value="#(date)" style="width: 100%; height: 38px; padding: 0 8px;">
            </div>

            <div style="flex: 1 1 10%; display: flex; align-items: flex-end; justify-content: center; margin-top: 20px;">
                <input class="layui-btn" type="submit" value="查询" style="width: 10%; height: 30px; font-size: 14px;">
            </div>

        </form>
    </div>

    <!-- 表格部分 -->
    <div class="layui-form">
        <table class="layui-table" style="width: 100%; text-align: center;">
            <thead>
            <tr>
                <th width="60px">用户名</th>
                <th>时间</th>
                <th width="50px">源语言</th>
                <th width="60px">目标语言</th>
                <th>翻译内容</th>
                <th>翻译结果</th>
                <th width="120px">操作</th>
            </tr>
            </thead>
            <tbody>
            #for(x : translations)
            <tr>
                <td>#(x.id)</td>
                <td class="overflow">#(x.time)</td>
                <td>#(x.from1)</td>
                <td>#(x.to1)</td>
                <td class="overflow">#(x.q)</td>
                <td class="overflow">#(x.result)</td>
                <td style="text-align: center">
                    <div class="layui-table-cell laytable-cell-1-action">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" href="/translate/detail/#(x.time)">
                            <i class="layui-icon layui-icon-edit"></i>查看详情
                        </a>
                    </div>
                </td>
            </tr>
            #end
            </tbody>
        </table>
    </div>

</div>
#end

#@layout()
#define main()
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px; text-align: center; font-size: 18px; font-weight: bold;">
    <legend>文本翻译</legend>
</fieldset>
<div style="margin: 0 auto; text-align: center; width: 80%;">

    <form action="/translate/fanyi" method="post">
        <textarea cols="100" rows="10" class="layui-input-block" name="q" style="margin-left: 0; font-size: 16px; font-weight: bold;">#(q)</textarea>

        <br><br>
        源语言
        <input type="radio" name="from" value="en"> 英语
        <input type="radio" name="from" value="zh"> 汉语
        <input type="radio" name="from" value="auto" checked> 自动
        &nbsp; &nbsp;
        目标语言
        <input type="radio" name="to" value="zh" checked> 汉语
        <input type="radio" name="to" value="en"> 英语
        &nbsp; &nbsp;
        <input class="layui-btn" type="submit">
    </form>
    <br>
    <textarea cols="100" rows="10" class="layui-input-block" name="result" style="margin-left: 0; font-size: 16px; font-weight: bold;">#(result)</textarea>

</div>
#end