settings.html

{% extends "base.html" %}
{% block content %}
<h1>设置</h1>
<div id="notification-area" class="mb-3"></div>

<!-- 标签页 -->
<ul class="nav nav-tabs mb-4" id="settingsTabs" role="tablist">

    <!-- 常规 -->
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button"
            role="tab" aria-controls="general" aria-selected="true">常规</button>
    </li>

    <!-- 端口 -->
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="ports-tab" data-bs-toggle="tab" data-bs-target="#ports" type="button" role="tab"
            aria-controls="ports" aria-selected="false">端口</button>
    </li>

    <!-- 外观 -->
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="appearance-tab" data-bs-toggle="tab" data-bs-target="#appearance" type="button"
            role="tab" aria-controls="appearance" aria-selected="false">外观</button>
    </li>

    <!-- 数据管理 -->
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="data-tab" data-bs-toggle="tab" data-bs-target="#data" type="button" role="tab"
            aria-controls="data" aria-selected="false">数据管理</button>
    </li>

    <!-- 关于 -->
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="about-tab" data-bs-toggle="tab" data-bs-target="#about" type="button" role="tab"
            aria-controls="about" aria-selected="false">关于</button>
    </li>

</ul>

<!-- 页面 -->
<div class="tab-content" id="settingsTabContent">

    <!-- 常规设置 -->
    <div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
        <h2>常规设置</h2>
        <form id="settings-form">
            <div class="mb-3">
                <label for="default-ip" class="form-label">默认 IP 地址</label>
                <select class="form-select" id="default-ip" name="default_ip">
                    {% for ip in ip_addresses %}
                    <option value="{{ ip }}" {% if ip==default_ip %}selected{% endif %}>{{ ip }}</option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn btn-primary">保存</button>
        </form>
    </div>

    <!-- 端口设置 -->
    <div class="tab-pane fade" id="ports" role="tabpanel" aria-labelledby="ports-tab">
        <h2>端口生成设置</h2>
        <form id="port-settings-form">

            <!-- 端口开始 -->
            <div class="mb-3">
                <label for="port-start" class="form-label">端口号（开始）</label>
                <input type="number" class="form-control" id="port-start" name="port_start" min="1024" max="65535">
            </div>

            <!-- 端口结束 -->
            <div class="mb-3">
                <label for="port-end" class="form-label">端口号（结束）</label>
                <input type="number" class="form-control" id="port-end" name="port_end" min="1024" max="65535">
            </div>

            <!-- 排除端口 -->
            <div class="mb-3">
                <label for="port-exclude" class="form-label">排除端口号（逗号分隔）</label>
                <input type="text" class="form-control" id="port-exclude" name="port_exclude">
            </div>

            <!-- 端口长度 -->
            <div class="mb-3">
                <label class="form-label">端口号长度</label>
                <div id="port-length-controls">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="port_length" id="port-length-4" value="4"
                            checked>
                        <label class="form-check-label" for="port-length-4">
                            4 位数
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="port_length" id="port-length-5" value="5">
                        <label class="form-check-label" for="port-length-5">
                            5 位数
                        </label>
                    </div>
                </div>
                <small id="port-length-help" class="form-text text-muted" style="display: none;">
                    <i class="fas fa-info-circle"></i> 端口长度由提供的开始/结束值决定。
                </small>
            </div>

            <!-- 复制到剪贴板 -->
            <div class="mb-3">
                <label class="form-label">复制到剪贴板格式</label>
                <div id="copy-format-controls">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="copy_format" id="copy-format-full"
                            value="full_url">
                        <label class="form-check-label" for="copy-format-full">
                            完整 URL
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="copy_format" id="copy-format-port"
                            value="port_only">
                        <label class="form-check-label" for="copy-format-port">
                            仅端口号
                        </label>
                    </div>
                </div>
            </div>

            <!-- 保存和清除按钮 -->
            <div class="mb-3">
                <button type="submit" class="btn btn-primary">保存端口设置</button>
                <button type="button" id="clear-port-settings" class="btn btn-secondary">清除值</button>
            </div>


        </form>
    </div>

    <!-- 外观设置 -->
    <div class="tab-pane fade" id="appearance" role="tabpanel" aria-labelledby="appearance-tab">
        <h2>外观</h2>
        <form id="theme-form">
            <div class="mb-3">
                <label for="theme" class="form-label">主题</label>
                <select class="form-select" id="theme" name="theme">
                    {% for theme_name in themes %}
                    <option value="{{ theme_name }}" {% if theme_name==current_theme %}selected{% endif %}>
                        {{ theme_name.replace('_', ' ').title() }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label for="custom-css" class="form-label">自定义 CSS</label>
                <div id="custom-css-editor"></div>
                <input type="hidden" id="custom-css" name="custom_css" value="{{ custom_css }}">
            </div>
            <button type="submit" class="btn btn-primary">保存</button>
        </form>
    </div>

    <!-- 数据管理 -->
    <div class="tab-pane fade" id="data" role="tabpanel" aria-labelledby="data-tab">
        <h2>数据管理</h2>

        <!-- 导出数据部分 -->
        <div class="mb-4">
            <h3>导出数据</h3>
            <p>将所有端口条目导出到文件。</p>
            <button id="export-entries-button" class="btn btn-primary">导出条目</button>
        </div>

        <!-- 清除数据部分 -->
        <div>
            <h3>清除数据</h3>
            <p>从数据库中清除所有条目。此操作无法撤销。</p>
            <button id="purge-button" class="btn btn-danger">清除所有条目</button>
        </div>
    </div>

    <!-- 关于 -->
    <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
        <h2 class="section-title mb-4">关于 Portall</h2>

        <div class="info-card version-info mb-4">
            <div class="card-content">
                <h3 class="card-title">版本信息</h3>
                <ul class="list-unstyled">
                    <li><span class="info-label">版本：</span> {{ version }}</li>
                    <li><span class="info-label">发布日期：</span> 2024 年 7 月 14 日</li>
                    <li><span class="info-label">汉化日期：</span> 2024 年 12 月 16 日</li>
                    <li><span class="info-label">Github:</span> <a href="https://github.com/Firfr/portall-zh-cn"
                            target="_blank">Portall汉化仓库</a></li>
                    <li><span class="info-label">Github:</span> <a href="https://github.com/need4swede/Portall"
                            target="_blank">Portall 仓库</a></li>
                </ul>
            </div>
        </div>

        <div class="info-card planned-features mb-4">
            <div class="card-content">
                <h3 class="card-title">计划功能</h3>
                <div id="planned-features-content" class="markdown-content"></div>
            </div>
        </div>

        <div class="info-card changelog">
            <div class="card-content">
                <h3 class="card-title">更新日志</h3>
                <div id="changelog-content" class="markdown-content"></div>
            </div>
        </div>
    </div>

</div>

<!-- 确认模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalLabel">确认清除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                你确定要清除所有条目吗？此操作无法撤销。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirm-purge">清除</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script type="module" src="{{ url_for('static', filename='js/core/settings.js') }}"></script>
{% endblock %}