{$layout}
{$template "menu"}

<form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>

    <div class="config-section">
        <div class="section-title">{{t('settings_user_ui_index@用户系统设置')}}</div>

        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@产品名称')}} *</div>
            <div class="item-content">
                <input type="text" name="productName" v-model="config.productName" maxlength="100"/>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@用户系统名称')}} *</div>
            <div class="item-content">
                <input type="text" name="userSystemName" v-model="config.userSystemName" maxlength="100"/>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@浏览器图标')}}</div>
            <div class="item-content">
                <div v-if="config.faviconFileId > 0">
                    <a :href="'/ui/image/' + config.faviconFileId" target="_blank"><img :src="'/ui/image/' + config.faviconFileId" style="width:32px;border:1px #ccc solid; padding: 2px; background: #f8f8f8; border-radius: 4px;"/></a>
                </div>
                <div v-else>
                    <span class="disabled">{{t('settings_user_ui_index@还没有上传。')}}</span>
                </div>
                <div style="margin-top: 0.8em">
                    <file-upload name="faviconFile" accept=".png" />
                </div>
                <p class="comment">{{t('settings_user_ui_index@在浏览器标签栏显示的图标，请使用PNG格式。')}}</p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@Logo图')}}</div>
            <div class="item-content">
                <div v-if="config.logoFileId > 0">
                    <a :href="'/ui/image/' + config.logoFileId" target="_blank"><img :src="'/ui/image/' + config.logoFileId" style="width:32px;border:1px #ccc solid; padding: 4px; background: #276AC6; border-radius: 4px;"/></a>
                </div>
                <div v-else>
                    <span class="disabled">{{t('settings_user_ui_index@还没有上传。')}}</span>
                </div>
                <div style="margin-top: 0.8em">
                    <file-upload name="logoFile" accept=".png" />
                </div>
                <p class="comment">{{t('settings_user_ui_index@显示在系统控制面板界面上的图标，请使用PNG格式；将会被用于深色背景之上，请使用浅色勾勒线条。')}}</p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@显示版本号')}}</div>
            <div class="item-content">
                <checkbox name="showVersion" v-model="config.showVersion"></checkbox>
                <p class="comment">{{t('settings_user_ui_index@选中后，表示在系统名称后面加入版本号。')}}</p>
            </div>
        </div>
        <div class="config-item" v-show="config.showVersion">
            <div class="item-label">{{t('settings_user_ui_index@定制版本号')}}</div>
            <div class="item-content">
                <input type="text" name="version" v-model="config.version" maxlength="100"/>
                <p class="comment">{{t('settings_user_ui_index@定制自己的版本号，留空表示使用系统自带的版本号。')}}</p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@页面背景颜色')}}</div>
            <div class="item-content">
                <div class="ui fields inline">
                    <div class="ui field">
                        <div class="ui input left labeled">
                            <span class="ui label">#</span>
                            <input type="text" maxlength="7" style="width: 8em;" v-model="config.theme.backgroundColor" @input="changeThemeBackgroundColor" :placeholder="t('settings_user_ui_index@16进制色值')" name="themeBackgroundColor"/>
                        </div>
                    </div>
                    <div class="ui field">
                        <div class="theme-background-preview-box" :style="'background-color: ' + ((config.theme.backgroundColor.length > 0) ? '#' + config.theme.backgroundColor : '')" :title="t('settings_user_ui_index@背景颜色预览')" ref="themeBackgroundPreviewBox"></div>
                    </div>
                </div>
                <p class="comment">{{t('settings_user_ui_index@整个页面框架的背景颜色，留空表示使用默认的背景颜色。可点击使用：')}}
                    <span class="color-spans">
                        <a href="" v-for="color in themeBackgroundColors" @click.prevent="selectThemeBackgroundColor(color)" :title="'#' + color"><span class="color-span" :style="'background-color: #' + color">&nbsp;</span></a>
                    </span>
                </p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@显示页脚')}}</div>
            <div class="item-content">
                <checkbox name="showPageFooter" v-model="config.showPageFooter"></checkbox>
            </div>
        </div>
        <div class="config-item" v-show="config.showPageFooter">
            <div class="item-label">{{t('settings_user_ui_index@自定义页脚HTML')}}</div>
            <div class="item-content">
                <textarea rows="3" name="pageFooterHTML" v-model="config.pageFooterHTML"></textarea>
                <p class="comment">{{t('settings_user_ui_index@类似于')}}<code-label>&lt;a class=&quot;item&quot;&gt;{{t('settings_user_ui_index@内容1')}}&lt;/a&gt;&lt;a class=&quot;item&quot;&gt;{{t('settings_user_ui_index@内容2')}}&lt;/a&gt;</code-label></p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@显示财务相关功能')}}</div>
            <div class="item-content">
                <checkbox name="showFinance" v-model="config.showFinance"></checkbox>
                <p class="comment">{{t('settings_user_ui_index@选中后，表示在菜单中显示财务管理功能。')}}</p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@注册设置')}}</div>
            <div class="item-content">
                <a href="/users/setting">{{t('settings_user_ui_index@修改用户注册相关设置')}} &raquo;</a>
            </div>
        </div>
    </div>

    <div class="config-section">
        <div class="section-title">{{t('settings_user_ui_index@网站相关设置')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@自动检查CNAME')}}</div>
            <div class="item-content">
                <checkbox name="serverCheckCNAME" v-model="config.server.checkCNAME"></checkbox>
                <p class="comment">{{t('settings_user_ui_index@选中后，表示自动在网站列表中检查网站域名是否已正确解析到对应的CNAME。')}}</p>
            </div>
        </div>
    </div>

    <div class="config-section">
        <div class="section-title">{{t('settings_user_ui_index@数据看板设置')}}</div>
        <div class="config-item">
            <div class="item-content"><checkbox name="showTrafficCharts" v-model="config.showTrafficCharts">{{t("settings_user_ui_index@显示流量相关数据和图表")}}</checkbox></div>
        </div>
        <div class="config-item">
            <div class="item-content">
                <checkbox name="showCacheInfoInTrafficCharts" v-model="config.showCacheInfoInTrafficCharts">{{t("settings_user_ui_index@在流量图表中显示缓存相关信息")}}</checkbox>
                <p class="comment">{{t('settings_user_ui_index@选中后，表示在流量图表中显示缓存流量、缓存命中率等信息。')}}</p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-content"><checkbox name="showBandwidthCharts" v-model="config.showBandwidthCharts">{{t("settings_user_ui_index@显示带宽相关数据和图表")}}</checkbox></div>
        </div>
        <div class="config-item" v-show="false">
            <div class="item-label">{{t('settings_user_ui_index@带宽单位')}}</div>
            <div class="item-content">
                <b-select
                    name="bandwidthUnit"
                    v-model="config.bandwidthUnit"
                    auto-width
                    :options="[
                        {label: t('settings_user_ui_index@比特'), value: 'bit'},
                        {label: t('settings_user_ui_index@字节'), value: 'byte'},
                    ]"
                ></b-select>
            </div>
        </div>
    </div>

    <div class="config-section">
        <div class="section-title">{{t('settings_user_ui_index@门户页面')}}</div>
        <div class="config-item">
            <div class="item-content"><checkbox name="portalIsOn" v-model="config.portal.isOn">{{t("settings_user_ui_index@启用内置门户页面")}}</checkbox>
                <p class="comment">{{t('settings_user_ui_index@启用内置门户页面后，访问用户系统首页会自动跳转到内置的门户页面（网址是：')}}<code-label>/portal</code-label>{{t('settings_user_ui_index@）。')}}</p>
            </div>
        </div>
        <div class="config-item" v-show="config.portal.isOn">
            <div class="item-label">{{t('settings_user_ui_index@Logo图')}}</div>
            <div class="item-content">
                <div v-if="config.portal.logoFileId > 0">
                    <a :href="'/ui/image/' + config.portal.logoFileId" target="_blank"><img :src="'/ui/image/' + config.portal.logoFileId" style="width:32px;border:1px #ccc solid; padding: 4px; border-radius: 4px;" alt=""/></a>
                </div>
                <div v-else>
                    <span class="disabled">{{t('settings_user_ui_index@还没有上传。')}}</span>
                </div>
                <div style="margin-top: 0.8em">
                    <file-upload name="portalLogoFile" accept=".png" />
                </div>
                <p class="comment">{{t('settings_user_ui_index@显示在门户页面上的图标，请使用PNG格式。')}}</p>
            </div>
        </div>
    </div>

    <div class="config-section">
        <div class="section-title">{{t('settings_user_ui_index@使用OAuth2用户登录')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@启用')}}<br/>{{t('settings_user_ui_index@Google OAuth2')}}</div>
            <div class="item-content">
                <checkbox name="googleOAuth2IsOn" v-model="config.googleOAuth2.isOn" v-show="userRegisterIsOn"></checkbox>
                <p class="comment" v-if="userRegisterIsOn">{{t('settings_user_ui_index@请在')}} <a href="https://console.cloud.google.com/apis/credentials" target="_blank">{{t('settings_user_ui_index@Google API 控制台')}}</a> {{t('settings_user_ui_index@中创建 OAuth2 凭据。')}}<br/>{{t('settings_user_ui_index@请将回调端点注册为')}} <code>{{t('settings_user_ui_index@[用户节点访问地址]')}}/login/oauth2callback?provider=google</code>{{t('settings_user_ui_index@。')}}</p>
                <p class="comment" v-else>{{t('settings_user_ui_index@要启用 Google OAuth2，请先在')}} <a href="/users/setting" target="_blank">{{t('settings_user_ui_index@[用户设置/注册设置]')}}</a> {{t('settings_user_ui_index@启用')}} "{{t('settings_user_ui_index@允许注册')}}"{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
        <div class="config-item" v-show="config.googleOAuth2.isOn && userRegisterIsOn">
            <div class="item-label">{{t('settings_user_ui_index@客户端 ID')}}</div>
            <div class="item-content">
                <input type="text" name="googleOAuth2ClientId" v-model="config.googleOAuth2.clientId"/>
                <p class="comment">{{t('settings_user_ui_index@请在')}} <a href="https://console.cloud.google.com/apis/credentials" target="_blank">{{t('settings_user_ui_index@Google API 控制台')}}</a> {{t('settings_user_ui_index@的 OAuth2 设置页面中获取')}} <b>{{t('settings_user_ui_index@客户端 ID')}}</b>{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
        <div class="config-item" v-show="config.googleOAuth2.isOn && userRegisterIsOn">
            <div class="item-label">{{t('settings_user_ui_index@客户端密钥')}}</div>
            <div class="item-content">
                <input type="text" name="googleOAuth2ClientSecret" v-model="config.googleOAuth2.clientSecret"/>
                <p class="comment">{{t('settings_user_ui_index@请在')}} <a href="https://console.cloud.google.com/apis/credentials" target="_blank">{{t('settings_user_ui_index@Google API 控制台')}}</a> {{t('settings_user_ui_index@的 OAuth2 设置页面中获取')}} <b>{{t('settings_user_ui_index@客户端密钥')}}</b>{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
    </div>
    
    <div class="config-section">
         <div class="section-title">{{t('settings_user_ui_index@GitHub OAuth2')}}</div>
         <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@启用')}}<br/>{{t('settings_user_ui_index@GitHub OAuth2')}}</div>
            <div class="item-content">
                <checkbox name="githubOAuth2IsOn" v-model="config.githubOAuth2.isOn" v-show="userRegisterIsOn"></checkbox>
                <p class="comment" v-if="userRegisterIsOn">{{t('settings_user_ui_index@请在')}} <a href="https://github.com/settings/developers" target="_blank">{{t('settings_user_ui_index@GitHub 开发者设置')}}</a> {{t('settings_user_ui_index@中注册 OAuth 应用，并获取')}} <b>{{t('settings_user_ui_index@客户端 ID')}}</b> {{t('settings_user_ui_index@和')}} <b>{{t('settings_user_ui_index@客户端密钥')}}</b>{{t('settings_user_ui_index@。')}}<br/>{{t('settings_user_ui_index@请将回调端点注册为')}} <code>{{t('settings_user_ui_index@[用户节点访问地址]')}}/login/oauth2callback?provider=github</code>{{t('settings_user_ui_index@。')}}</p>
                <p class="comment" v-else>{{t('settings_user_ui_index@要启用 GitHub OAuth2，请先在')}} <a href="/users/setting" target="_blank">{{t('settings_user_ui_index@[用户设置/注册设置]')}}</a> {{t('settings_user_ui_index@启用')}} "{{t('settings_user_ui_index@允许注册')}}"{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
        <div class="config-item" v-show="config.githubOAuth2.isOn && userRegisterIsOn">
            <div class="item-label">{{t('settings_user_ui_index@客户端 ID')}}</div>
            <div class="item-content">
                <input type="text" name="githubOAuth2ClientId" v-model="config.githubOAuth2.clientId"/>
                <p class="comment">{{t('settings_user_ui_index@请在')}} <a href="https://github.com/settings/developers" target="_blank">{{t('settings_user_ui_index@GitHub 开发者设置')}}</a> {{t('settings_user_ui_index@的 OAuth 应用页面中获取')}} <b>{{t('settings_user_ui_index@客户端 ID')}}</b>{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
        <div class="config-item" v-show="config.githubOAuth2.isOn && userRegisterIsOn">
            <div class="item-label">{{t('settings_user_ui_index@客户端密钥')}}</div>
            <div class="item-content">
                <input type="text" name="githubOAuth2ClientSecret" v-model="config.githubOAuth2.clientSecret"/>
                <p class="comment">{{t('settings_user_ui_index@请在')}} <a href="https://github.com/settings/developers" target="_blank">{{t('settings_user_ui_index@GitHub 开发者设置')}}</a> {{t('settings_user_ui_index@的 OAuth 应用页面中获取')}} <b>{{t('settings_user_ui_index@客户端密钥')}}</b>{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
    </div>
    
    <div class="config-section">
         <div class="section-title">{{t('settings_user_ui_index@GitLab OAuth2')}}</div>
         <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@启用')}}<br/>{{t('settings_user_ui_index@GitLab OAuth2')}}</div>
            <div class="item-content">
                <checkbox name="gitlabOAuth2IsOn" v-model="config.gitlabOAuth2.isOn" v-show="userRegisterIsOn"></checkbox>
                <p class="comment" v-if="userRegisterIsOn">{{t('settings_user_ui_index@请在')}} <a href="https://gitlab.com/-/profile/applications" target="_blank">{{t('settings_user_ui_index@GitLab 应用管理')}}</a> {{t('settings_user_ui_index@页面注册 OAuth 应用，并获取')}} <b>{{t('settings_user_ui_index@客户端 ID')}}</b> {{t('settings_user_ui_index@和')}} <b>{{t('settings_user_ui_index@客户端密钥')}}</b>{{t('settings_user_ui_index@。')}}<br/>{{t('settings_user_ui_index@请将回调端点注册为')}} <code>{{t('settings_user_ui_index@[用户节点访问地址]')}}/login/oauth2callback?provider=gitlab</code>{{t('settings_user_ui_index@。')}}</p>
                <p class="comment" v-else>{{t('settings_user_ui_index@要启用 GitLab OAuth2，请先在')}} <a href="/users/setting" target="_blank">{{t('settings_user_ui_index@[用户设置/注册设置]')}}</a> {{t('settings_user_ui_index@启用')}} "{{t('settings_user_ui_index@允许注册')}}"{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
        <div class="config-item" v-show="config.gitlabOAuth2.isOn && userRegisterIsOn">
            <div class="item-label">{{t('settings_user_ui_index@客户端 ID')}}</div>
            <div class="item-content">
                <input type="text" name="gitlabOAuth2ClientId" v-model="config.gitlabOAuth2.clientId"/>
                <p class="comment">{{t('settings_user_ui_index@请在')}} <a href="https://gitlab.com/-/profile/applications" target="_blank">{{t('settings_user_ui_index@GitLab 应用管理')}}</a> {{t('settings_user_ui_index@页面获取')}} <b>{{t('settings_user_ui_index@客户端 ID')}}</b>{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
        <div class="config-item" v-show="config.gitlabOAuth2.isOn && userRegisterIsOn">
            <div class="item-label">{{t('settings_user_ui_index@客户端密钥')}}</div>
            <div class="item-content">
                <input type="text" name="gitlabOAuth2ClientSecret" v-model="config.gitlabOAuth2.clientSecret"/>
                <p class="comment">{{t('settings_user_ui_index@请在')}} <a href="https://gitlab.com/-/profile/applications" target="_blank">{{t('settings_user_ui_index@GitLab 应用管理')}}</a> {{t('settings_user_ui_index@页面获取')}} <b>{{t('settings_user_ui_index@客户端密钥')}}</b>{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
    </div>

    <div class="config-section">
         <div class="section-title">{{t('settings_user_ui_index@Twitter OAuth2')}}</div>
         <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@启用')}}<br/>{{t('settings_user_ui_index@Twitter OAuth2')}}</div>
            <div class="item-content">
                <checkbox name="twitterOAuth2IsOn" v-model="config.twitterOAuth2.isOn" v-show="userRegisterIsOn"></checkbox>
                <p class="comment" v-if="userRegisterIsOn">{{t('settings_user_ui_index@请在')}} <a href="https://developer.twitter.com/en/portal/projects-and-apps" target="_blank">{{t('settings_user_ui_index@Twitter 开发者平台')}}</a> {{t('settings_user_ui_index@创建 OAuth 应用，并获取')}} <b>{{t('settings_user_ui_index@客户端 ID')}}</b> {{t('settings_user_ui_index@和')}} <b>{{t('settings_user_ui_index@客户端密钥')}}</b>{{t('settings_user_ui_index@。')}}<br/>{{t('settings_user_ui_index@请将回调端点注册为')}} <code>{{t('settings_user_ui_index@[用户节点访问地址]')}}/login/oauth2callback?provider=twitter</code>{{t('settings_user_ui_index@，并确保')}} <b>{{t('settings_user_ui_index@OAuth2.0')}}</b> {{t('settings_user_ui_index@被启用。')}}</p>
                <p class="comment" v-else>{{t('settings_user_ui_index@要启用 Twitter OAuth2，请先在')}} <a href="/users/setting" target="_blank">{{t('settings_user_ui_index@[用户设置/注册设置]')}}</a> {{t('settings_user_ui_index@启用')}} "{{t('settings_user_ui_index@允许注册')}}"{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
        <div class="config-item" v-show="config.twitterOAuth2.isOn && userRegisterIsOn">
            <div class="item-label">{{t('settings_user_ui_index@客户端 ID')}}</div>
            <div class="item-content">
                <input type="text" name="twitterOAuth2ClientId" v-model="config.twitterOAuth2.clientId"/>
                <p class="comment">{{t('settings_user_ui_index@请在')}} <a href="https://developer.twitter.com/en/portal/projects-and-apps" target="_blank">{{t('settings_user_ui_index@Twitter 开发者平台')}}</a> {{t('settings_user_ui_index@的 OAuth2 设置页面中获取')}} <b>{{t('settings_user_ui_index@客户端 ID')}}</b>{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
        <div class="config-item" v-show="config.twitterOAuth2.isOn && userRegisterIsOn">
            <div class="item-label">{{t('settings_user_ui_index@客户端密钥')}}</div>
            <div class="item-content">
                <input type="text" name="twitterOAuth2ClientSecret" v-model="config.twitterOAuth2.clientSecret"/>
                <p class="comment">{{t('settings_user_ui_index@请在')}} <a href="https://developer.twitter.com/en/portal/projects-and-apps" target="_blank">{{t('settings_user_ui_index@Twitter 开发者平台')}}</a> {{t('settings_user_ui_index@的 OAuth2 设置页面中获取')}} <b>{{t('settings_user_ui_index@客户端密钥')}}</b>{{t('settings_user_ui_index@。')}}</p>
            </div>
        </div>
    </div>

    <div class="config-section">
        <div class="section-title">{{t('settings_user_ui_index@其他设置')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@时区')}}</div>
            <div class="item-content">
                <div class="ui fields inline">
                    <div class="ui field">
                        <b-select
                            v-model="timeZoneGroupCode"
                            :options="[
                                ...timeZoneGroups.map(timeZoneGroup => ({
                                    label: timeZoneGroup.name,
                                    value: timeZoneGroup.code,
                                }))
                            ]"
                        ></b-select>
                    </div>
                    <div class="ui field">
                        <b-select
                            name="timeZone"
                            v-model="config.timeZone"
                            :options="[
                                ...timeZoneLocations.filter(timeZoneLocation=>timeZoneLocation.group == timeZoneGroupCode).map(timeZoneLocation => ({
                                    label: (timeZoneLocation.name??'') + t('settings_user_ui_index@（') + (timeZoneLocation.offset??'') + t('settings_user_ui_index@）'),
                                    value: timeZoneLocation.name,
                                }))
                            ]"
                        ></b-select>
                    </div>
                </div>
                <p class="comment">{{t('settings_user_ui_index@用户系统显示时间使用的时区。')}}</p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@使用的DNS解析库')}}</div>
            <div class="item-content">
                <b-select
                    name="dnsResolverType"
                    v-model="config.dnsResolver.type"
                    auto-width
                    :options="[
                        {label: t('settings_user_ui_index@默认'), value: 'default'},
                        {label: 'CGO', value: 'cgo'},
                        {label: t('settings_user_ui_index@Go原生'), value: 'goNative'},
                    ]"
                ></b-select>
                <p class="comment">{{t('settings_user_ui_index@用户系统使用的DNS解析库；修改此项配置后，需要重启用户系统进程才会生效；通常不需要修改；如要修改，请在专家指导下进行。')}}</p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@自定义客户端IP报头')}}<a id="client-ip-header-names"></a></div>
            <div class="item-content">
                <input type="text" name="clientIPHeaderNames" v-model="config.clientIPHeaderNames"/>
                <p class="comment">{{t('settings_user_ui_index@可以通过此报头获取客户端IP，类似于')}}<code-label>X-Forwarded-For X-Real-IP True-Client-IP Client-IP</code-label>&nbsp;<a href=""><span class="small" @click.prevent="addDefaultClientIPHeaderNames('X-Forwarded-For X-Real-IP True-Client-IP Client-IP')">[{{t('settings_user_ui_index@填入')}}]</span></a>{{t('settings_user_ui_index@，用于使用反向代理访问用户系统的情形；如果有多个报头可以使用空格隔开。')}}</p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">{{t('settings_user_ui_index@Unique Key')}}<a id="unique_key"></a></div>
            <div class="item-content">
                <div class="ui fields inline">
                    <div class="ui field">
                        <input type="text" readonly style="text-align: center;" name="uniqueKey" v-model="config.uniqueKey"/>
                    </div>
                    <div class="ui field">
                        <a href="" @click.prevent="regenUniqueKey"><span class="primary">[{{t('settings_user_ui_index@重新生成')}}]</span></a>
                    </div>
                </div>
                
                <p class="comment">{{t('settings_user_ui_index@可用于验证切换用户访问令牌的安全性。')}}</p>
            </div>
        </div>
    </div>

    <p class="comment">{{t('settings_user_ui_index@修改后，在3分钟内生效。')}}</p>

    <div class="margin"></div>
    <submit-btn></submit-btn>
</form>