website-operation-records/index.html at main · coowinit/website-operation-records · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!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="stylesheet" href="css/style.css" />
</head>
<body>
  <header class="page-hero">
    <div class="hero-inner">
      <div>
        <p class="eyebrow">Website Operation Records · v1.2.1</p>
        <h1>网站运维工作记录表</h1>
        <p class="hero-desc">用于记录网站安全巡检、网站备份、询盘链路排查、核心网站更新和 SEO 巡检整改。当前版本已接入 PHP + SQLite，日常新增、编辑、删除会保存到服务器数据库；备份、导入、导出、恢复默认模板已统一集中到「数据管理」入口，业务表页面只负责记录新增、编辑和删除。</p>
      </div>
      <div class="hero-badge">
        <span>服务器保存</span>
        <strong>SQLite</strong>
      </div>
    </div>
  </header>

  <main class="page-wrap">
    <section class="section menu-section" aria-labelledby="menuTitle">
      <div class="section-head compact-head">
        <div>
          <p class="section-kicker">表格菜单</p>
          <h2 id="menuTitle">选择记录表</h2>
        </div>
        <p class="section-note">点击菜单切换业务表，进入「数据管理」可统一处理全站备份、导入、导出和恢复。</p>
      </div>
      <div id="tableMenu" class="record-menu-grid" aria-label="记录表菜单"></div>
    </section>

    <section class="section table-section" aria-labelledby="activeTableTitle">
      <div class="table-title-row">
        <div>
          <p id="activeTableCode" class="section-kicker">Table</p>
          <h2 id="activeTableTitle">加载中...</h2>
          <p id="activeTableDesc" class="section-note table-desc"></p>
        </div>
        <div class="table-count-card">
          <span>当前记录</span>
          <strong id="activeRowCount">0</strong>
        </div>
      </div>

      <p id="activeTableNote" class="record-page-note"></p>

      <div id="recordToolbar" class="record-toolbar" aria-label="记录操作区">
        <button id="addRecordBtn" class="action-btn primary" type="button">新增记录</button>
        <button id="refreshDataBtn" class="action-btn" type="button">刷新数据</button>
      </div>

      <div id="apiStatus" class="api-status loading">正在连接 PHP + SQLite 数据库...</div>

      <div id="dataManagerPanel" class="data-manager-panel" hidden>
        <div class="data-manager-intro">
          <div>
            <p class="section-kicker">Global Backup</p>
            <h3>全局数据管理</h3>
            <p>这里管理的是整套 SQLite 数据库，不是单独某一张表。导入、恢复默认模板、从服务器备份恢复都会覆盖全部业务表，系统会在高风险操作前自动生成服务器端备份。</p>
          </div>
          <div class="data-manager-badge">
            <span>备份范围</span>
            <strong>全部记录表</strong>
          </div>
        </div>

        <div class="data-manager-actions" aria-label="全局数据管理操作区">
          <button id="serverBackupBtn" class="action-btn primary" type="button">生成服务器备份</button>
          <button id="toggleBackupPanelBtn" class="action-btn" type="button">服务器备份列表</button>
          <button id="exportDataBtn" class="action-btn" type="button">导出完整 JSON</button>
          <label class="action-btn file-btn" for="importDataInput">导入 JSON 备份</label>
          <input id="importDataInput" class="hidden-file-input" type="file" accept=".json,application/json" />
          <button id="resetDataBtn" class="action-btn danger-light" type="button">恢复默认模板</button>
        </div>

        <div class="data-manager-warning">
          <strong>注意：</strong>导入 JSON、恢复默认模板、从服务器备份恢复都会覆盖当前 SQLite 数据库。正式使用前，建议先点击「生成服务器备份」。
        </div>

        <div id="backupPanel" class="backup-panel" hidden>
          <div class="backup-panel-head">
            <div>
              <strong>服务器端 JSON 备份</strong>
              <p>备份文件保存在服务器 <code>backups/</code> 目录中。导入、恢复默认模板、从备份恢复前，系统都会先自动生成一份备份。</p>
            </div>
            <button id="refreshBackupsBtn" class="mini-btn" type="button">刷新列表</button>
          </div>
          <div id="backupList" class="backup-list">正在加载备份列表...</div>
        </div>
      </div>

      <div class="table-wrap" id="tableWrap"></div>

      <div id="editTip" class="edit-tip">
        <strong>保存提醒：</strong>
        页面修改会通过 PHP 接口保存到 SQLite 数据库，不再依赖浏览器本地存储。备份、导入、导出和恢复默认模板请进入「数据管理」统一操作。
      </div>
    </section>
  </main>

  <div id="recordModal" class="modal" hidden>
    <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
      <div class="modal-head">
        <div>
          <p id="modalTableName" class="section-kicker">Table</p>
          <h3 id="modalTitle">新增记录</h3>
        </div>
        <button id="closeModalBtn" class="modal-close" type="button" aria-label="关闭">×</button>
      </div>
      <form id="recordForm" class="record-form">
        <div id="formFields" class="form-grid"></div>
        <div class="modal-actions">
          <button id="cancelFormBtn" class="action-btn" type="button">取消</button>
          <button class="action-btn primary" type="submit">保存记录</button>
        </div>
      </form>
    </div>
  </div>

  <footer class="page-footer">
    <p>网站运维工作记录表 · v1.2.1</p>
  </footer>

  <script src="js/records-data.js"></script>
  <script src="js/app.js"></script>
</body>
</html>