yichael
/
AnimationManager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理后台</title>
  <link rel="icon" type="image/png" href="static/favicon.png">
  <link rel="stylesheet" href="css/admin.css">
</head>
<body>
  <!-- 登录页面 -->
  <div id="loginPage" class="login-page">
    <div class="login-container">
      <div class="login-header">
        <h1>管理后台</h1>
        <p>管理员登录</p>
      </div>
      <form id="loginForm" class="login-form">
        <div class="form-group">
          <label>用户名</label>
          <input type="text" id="adminUsername" placeholder="请输入管理员用户名" required>
        </div>
        <div class="form-group">
          <label>密码</label>
          <input type="password" id="adminPassword" placeholder="请输入密码" required>
        </div>
        <button type="submit" class="login-btn">登录</button>
        <div id="loginError" class="error-message" style="display: none;"></div>
      </form>
    </div>
  </div>

  <!-- 主界面 -->
  <div id="mainPage" class="main-page" style="display: none;">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <h2>管理后台</h2>
      </div>
      <nav class="sidebar-nav">
        <a href="#" class="nav-item active" data-page="users">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z" fill="currentColor"/>
            <path d="M10 12C5.58172 12 2 13.7909 2 16V20H18V16C18 13.7909 14.4183 12 10 12Z" fill="currentColor"/>
          </svg>
          <span>用户管理</span>
        </a>
        <a href="#" class="nav-item" data-page="resource-manager">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M18 4H2L0 8L2 12H18L20 8L18 4Z" fill="currentColor"/>
            <path d="M2 12L4 20H16L18 12" fill="currentColor"/>
          </svg>
          <span>素材管理</span>
        </a>
        <a href="#" class="nav-item" data-page="pricing">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M10 2L3 7V18H17V7L10 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M10 10V18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <path d="M6 10H14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <span>素材定价</span>
        </a>
        <a href="#" class="nav-item" data-page="product-pricing">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M10 2L3 7V18H17V7L10 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M10 10V18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <path d="M6 10H14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <span>商品定价</span>
        </a>
        <a href="#" class="nav-item" data-page="currency">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/>
            <path d="M10 5V15M7 8H13M7 12H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <span>充值与货币</span>
        </a>
      </nav>
      <div class="sidebar-footer">
        <button id="logoutBtn" class="logout-btn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
            <polyline points="16 17 21 12 16 7"/>
            <line x1="21" y1="12" x2="9" y2="12"/>
          </svg>
          <span>退出登录</span>
        </button>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
      <header class="main-header">
        <h1 id="pageTitle">用户管理</h1>
        <div class="header-actions">
          <span class="admin-name" id="adminName">管理员</span>
        </div>
      </header>

      <div class="content-area" id="contentArea">
        <!-- 页面容器 - 使用 iframe 加载各个页面 -->
        <iframe id="pageFrame" src="page/users/users.html" frameborder="0" style="width: 100%; height: 100%; border: none;"></iframe>
      </div>
    </main>
  </div>

  <!-- 编辑用户弹窗 -->
  <div id="editUserModal" class="modal" style="display: none;">
    <div class="modal-content">
      <div class="modal-header">
        <h3>编辑用户</h3>
        <button class="modal-close" id="closeEditUserModal">&times;</button>
      </div>
      <form id="editUserForm" class="modal-form">
        <input type="hidden" id="editUserId">
        <div class="form-group">
          <label>用户名</label>
          <input type="text" id="editUsername" required>
        </div>
        <div class="form-group">
          <label>手机号</label>
          <input type="text" id="editPhone" required>
        </div>
        <div class="form-group">
          <label>Ani币</label>
          <input type="number" id="editPoints" min="0" required>
        </div>
        <div class="modal-actions">
          <button type="button" class="btn-secondary" id="cancelEditUser">取消</button>
          <button type="submit" class="btn-primary">保存</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 上传素材弹窗 -->
  <div id="uploadStoreModal" class="modal" style="display: none;">
    <div class="modal-content">
      <div class="modal-header">
        <h3>上传素材</h3>
        <button class="modal-close" id="closeUploadModal">&times;</button>
      </div>
      <form id="uploadStoreForm" class="modal-form">
        <div class="form-group">
          <label>上传到分类目录</label>
          <select id="uploadCategory" required>
            <option value="">请选择分类目录</option>
            <!-- 分类选项将通过 JavaScript 动态加载 -->
          </select>
          <small class="form-hint">选择素材要上传到的分类目录，文件夹名称将作为资源名称</small>
        </div>
        <div class="form-group">
          <label>资源名称（文件夹名称）</label>
          <input type="text" id="uploadName" placeholder="例如: player_0001" required>
          <small class="form-hint">上传的文件夹名称将作为资源名称显示</small>
        </div>
        <div class="form-group">
          <label>上传文件夹</label>
          <div class="file-upload-area" id="fileUploadArea">
            <input type="file" id="uploadFiles" webkitdirectory directory multiple required style="display: none;">
            <div class="file-upload-content">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="17 8 12 3 7 8"></polyline>
                <line x1="12" y1="3" x2="12" y2="15"></line>
              </svg>
              <p class="file-upload-text" id="fileUploadText">点击选择文件夹或拖拽文件夹到此处</p>
              <p class="file-upload-hint" id="fileUploadHint">未选择任何文件</p>
            </div>
          </div>
          <small class="form-hint">请选择包含PNG序列帧的文件夹</small>
        </div>
        
        <!-- 上传进度 -->
        <div id="uploadProgressContainer" class="upload-progress-container" style="display: none;">
          <div class="upload-progress-header">
            <span>上传进度</span>
            <span id="uploadProgressPercent">0%</span>
          </div>
          <div class="upload-progress-bar">
            <div class="upload-progress-fill" id="uploadProgressFill"></div>
          </div>
          <div class="upload-progress-text" id="uploadProgressText">准备上传...</div>
        </div>

        <!-- 上传成功预览 -->
        <div id="uploadSuccessPreview" class="upload-success-preview" style="display: none;">
          <div class="preview-header">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M16 4h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
              <rect x="8" y="2" width="4" height="4" rx="1" ry="1"></rect>
            </svg>
            <span>上传成功！预览图：</span>
          </div>
          <div class="preview-image-container">
            <img id="previewImage" src="" alt="预览图" class="preview-image">
            <div class="preview-loading" id="previewLoading">加载预览图...</div>
          </div>
        </div>

        <div class="modal-actions">
          <button type="button" class="btn-secondary" id="cancelUpload">取消</button>
          <button type="submit" class="btn-primary" id="uploadSubmitBtn">上传</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 自定义确认对话框 -->
  <div id="customConfirmModal" class="modal" style="display: none;">
    <div class="modal-content confirm-modal-content">
      <div class="modal-header">
        <h3 id="confirmTitle">确认操作</h3>
      </div>
      <div class="modal-body">
        <p id="confirmMessage"></p>
        <div id="confirmFileList" class="file-list" style="display: none;">
          <div class="file-list-header">
            <span>文件列表 (<span id="fileCount">0</span> 个文件)</span>
          </div>
          <div class="file-list-content" id="fileListContent"></div>
        </div>
      </div>
      <div class="modal-actions">
        <button type="button" class="btn-secondary" id="confirmCancel">取消</button>
        <button type="button" class="btn-primary" id="confirmOk">确认</button>
      </div>
    </div>
  </div>

  <!-- 自定义提示对话框 -->
  <div id="customAlertModal" class="modal" style="display: none;">
    <div class="modal-content alert-modal-content">
      <div class="modal-header">
        <h3 id="alertTitle">提示</h3>
        <button class="modal-close" id="closeAlertModal">&times;</button>
      </div>
      <div class="modal-body">
        <p id="alertMessage"></p>
      </div>
      <div class="modal-actions">
        <button type="button" class="btn-primary" id="alertOk">确定</button>
      </div>
    </div>
  </div>

  <!-- 主脚本 -->
  <script src="js/admin.js"></script>
</body>
</html>