web_huangguo_web/app/templates/page/setting.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{template "seoCommon" .}}
    <title>账号设置 - 黄果短剧</title>
    <meta
      name="description"
      content="黄果短剧账号设置：修改昵称与简介，管理登录密码与账号安全 - 黄果短剧"
    />
    <meta name="keywords" content="账号设置,个人资料,密码安全,黄果短剧" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="账号设置 - 黄果短剧" />
    <meta
      property="og:description"
      content="黄果短剧账号设置：修改昵称与简介，管理登录密码与账号安全。"
    />
    <link rel="stylesheet" href="/static/css/setting.css" />
    <link rel="stylesheet" href="/static/css/accountShared.css?v=11" />
  </head>
  <body class="site-shell setting-layout is-setting-page">
    {{template "header" .}}
    <main class="setting-page">
      <div class="setting-pc">
        <nav class="setting-breadcrumb" aria-label="面包屑">
          <a class="setting-breadcrumb-link" href="/user-center/">个人中心</a>
          <span class="setting-breadcrumb-sep">/</span>
          <span class="setting-breadcrumb-current">账号设置</span>
        </nav>
        <div class="setting-head">
          <h1 class="setting-title">账号设置</h1>
          <p class="setting-desc">管理个人资料与登录状态</p>
        </div>
      </div>

      <header class="setting-nav">
        <a
          class="setting-nav-back"
          href="javascript:history.back()"
          aria-label="返回"
        >
          <img src="/static/images/back.svg" alt="返回" />
        </a>
        <div class="setting-nav-title">账号设置</div>
        <span class="setting-nav-spacer" aria-hidden="true"></span>
      </header>

      <div class="setting-main">
        <section
          class="setting-panel setting-profile-pc"
          aria-labelledby="settingProfileTitle"
        >
          <h2 class="setting-panel-title" id="settingProfileTitle">个人资料</h2>
          <div class="setting-avatar-row">
            {{if .setting.Avatar}}
            <img
              class="setting-avatar lazy"
              src="/static/images/placeholder.png?v=2"
              data-src="{{.setting.Avatar}}"
              alt="{{if .setting.DisplayName}}{{.setting.DisplayName}}{{else}}用户{{end}}的头像"
            />
            {{else}}
            <img
              class="setting-avatar"
              src="/static/images/avatar.png"
              alt="{{if .setting.DisplayName}}{{.setting.DisplayName}}{{else}}用户{{end}}的默认头像"
            />
            {{end}}
            <div class="setting-avatar-text">
              <div class="setting-avatar-name">{{.setting.DisplayName}}</div>
            </div>
          </div>
          <div class="setting-field">
            <label class="setting-label" for="setting-nickname">昵称</label>
            <input
              class="setting-input"
              id="setting-nickname"
              type="text"
              value="{{if .setting.NickName}}{{.setting.NickName}}{{else}}{{.setting.DisplayName}}{{end}}"
              readonly
            />
          </div>
          <div class="setting-field">
            <span class="setting-label">个人简介</span>
            <div class="setting-input setting-input--static">
              {{if
              .setting.Introduction}}{{.setting.Introduction}}{{else}}未设置简介{{end}}
            </div>
          </div>
          <a class="setting-save-btn" href="/edit-profile/">保存修改</a>
        </section>

        <section class="setting-profile-mobile" aria-label="个人资料">
          <div class="setting-section-label">个人资料</div>
          <div class="setting-group">
            <a class="setting-item setting-item--avatar" href="/edit-profile/">
              <span class="setting-item-label">头像</span>
              <span class="setting-item-right">
                {{if .setting.Avatar}}
                <img
                  class="setting-item-avatar lazy"
                  src="/static/images/placeholder.png?v=2"
                  data-src="{{.setting.Avatar}}"
                  alt="{{if .setting.DisplayName}}{{.setting.DisplayName}}{{else}}用户{{end}}的头像"
                />
                {{else}}
                <img
                  class="setting-item-avatar"
                  src="/static/images/avatar.png"
                  alt="{{if .setting.DisplayName}}{{.setting.DisplayName}}{{else}}用户{{end}}的默认头像"
                />
                {{end}}
                <img
                  class="setting-item-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="编辑头像"
                />
              </span>
            </a>
            <a class="setting-item" href="/edit-profile/">
              <span class="setting-item-label">昵称</span>
              <span class="setting-item-right">
                <span class="setting-item-value"
                  >{{if
                  .setting.NickName}}{{.setting.NickName}}{{else}}未设置{{end}}</span
                >
                <img
                  class="setting-item-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="编辑昵称"
                />
              </span>
            </a>
            <a class="setting-item" href="/edit-profile/">
              <span class="setting-item-label">个人简介</span>
              <span class="setting-item-right">
                <span class="setting-item-value"
                  >{{if
                  .setting.Introduction}}{{.setting.Introduction}}{{else}}未填写{{end}}</span
                >
                <img
                  class="setting-item-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="编辑个人简介"
                />
              </span>
            </a>
          </div>
        </section>

        <aside class="setting-aside">
          <div class="setting-section-label setting-section-label--aside">
            账号安全
          </div>
          <h2 class="setting-aside-title">账号安全</h2>
          <div class="setting-group setting-group--security">
            <a class="setting-item" href="/edit-password/">
              <span class="setting-item-label">登录密码</span>
              <span class="setting-item-hint">建议定期更新登录密码</span>
              <span class="setting-item-action">修改密码</span>
              <span class="setting-item-right">
                <span class="setting-item-value">修改</span>
                <img
                  class="setting-item-arrow"
                  src="/static/images/arrow_right2.svg"
                  alt="修改登录密码"
                />
              </span>
            </a>
          </div>

          <!--<div class="setting-section-label setting-section-label&#45;&#45;aside">通知偏好</div>
            <h2 class="setting-aside-title">通知偏好</h2>
            <div class="setting-group setting-group&#45;&#45;notify">
                <div class="setting-item">
                    <span class="setting-item-label">剧集更新提醒</span>
                    <button class="setting-switch setting-switch&#45;&#45;on" type="button" aria-pressed="true" aria-label="剧集更新提醒"></button>
                </div>
                <div class="setting-item">
                    <span class="setting-item-label">收藏内容推荐</span>
                    <button class="setting-switch setting-switch&#45;&#45;on" type="button" aria-pressed="true" aria-label="收藏内容推荐"></button>
                </div>
                <div class="setting-item">
                    <span class="setting-item-label">活动与优惠通知</span>
                    <button class="setting-switch" type="button" aria-pressed="false" aria-label="活动与优惠通知"></button>
                </div>
            </div>-->

          <button class="setting-logout" type="button" data-auth-logout>
            退出登录
          </button>
        </aside>
      </div>
    </main>
    {{template "footer" .}}
    <script src="/static/js/pages/setting.js"></script>
  </body>
</html>