readme

wangzhibo

2026-07-16 e0eb5808fe1ecb4e8a0e15cd9c6a0c77e30679bf

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
<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title data-i18n="page.title"></title>
  <link rel="stylesheet" href="css/styles.css">
  <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
  <script>LA.init({ id: "3QXRnnbLfuoKqmdc", ck: "3QXRnnbLfuoKqmdc" })</script>
</head>
 
<body>
  <div class="app-container">
    <!-- Header -->
    <header class="header">
      <div class="header-top">
        <img src="assets/logo.png" alt="" class="logo-icon" id="logo">
        <div class="header-actions">
          <button type="button" class="btn btn-header hidden" id="btn-home" data-i18n="btn.home"></button>
          <div class="lang-dropdown" id="lang-dropdown">
            <button type="button" class="btn btn-header" id="btn-lang"></button>
            <div class="lang-menu hidden" id="lang-menu"></div>
          </div>
        </div>
      </div>
      <h1 class="title-text" data-i18n="header.title"></h1>
    </header>
 
    <!-- Search -->
    <div class="search-row">
      <input type="text" class="search-input" id="search-input" data-i18n-placeholder="search.placeholder">
      <button type="button" class="btn btn-query" id="btn-query" data-i18n="btn.query"></button>
      <button type="button" class="btn btn-voice" id="btn-voice" data-i18n="btn.voice"></button>
    </div>
 
    <!-- Main content -->
    <div class="main-content" id="main-content">
      <!-- Browse mode -->
      <div id="browse-view">
        <div class="browse-section">
          <div class="tabs-wrap">
            <div class="tabs" id="tabs"></div>
            <div class="tab-detail" id="tab-detail">
              <p class="tab-desc" id="tab-desc"></p>
              <div class="tab-standard-wrap">
                <button type="button" class="btn btn-standard" id="btn-standard" data-i18n="btn.standard"></button>
              </div>
            </div>
          </div>
          <div class="item-list item-list-browse" id="item-list"></div>
        </div>
      </div>
 
      <!-- Search fuzzy results -->
      <div id="search-view" class="hidden flex flex-col h-full">
        <div class="search-hints">
          <p class="search-hint-main" data-i18n="search.notFoundHint"></p>
          <p class="search-hint-sub" data-i18n="search.referenceHint"></p>
        </div>
        <div class="item-list flex-1" id="search-results"></div>
      </div>
 
      <div class="no-results hidden" id="no-results" data-i18n="search.noResults"></div>
    </div>
 
    <footer class="app-footer">
      <p data-i18n="footer.copyright"></p>
    </footer>
  </div>
 
  <!-- Welcome modal -->
  <div class="modal-overlay hidden" id="welcome-modal">
    <div class="modal-card">
      <h2 class="welcome-title" data-i18n="welcome.title"></h2>
      <div class="welcome-text">
        <p data-i18n="welcome.p1"></p>
        <p data-i18n="welcome.p2"></p>
        <p data-i18n="welcome.p3"></p>
      </div>
      <button type="button" class="btn btn-confirm" id="btn-welcome-confirm" data-i18n="welcome.confirm"></button>
    </div>
  </div>
 
  <!-- Standard modal -->
  <div class="modal-overlay hidden" id="standard-modal">
    <div class="modal-card modal-card-wide modal-card-item" id="standard-modal-card">
      <h2 class="modal-title" id="standard-title"></h2>
      <div class="modal-standard-body" id="standard-body"></div>
      <div class="text-center">
        <button type="button" class="btn-close-transparent" id="btn-standard-close" aria-label="close">&times;</button>
      </div>
    </div>
  </div>
 
  <!-- Item disposal modal -->
  <div class="modal-overlay hidden" id="item-modal">
    <div class="modal-card modal-card-item" id="item-modal-card">
      <h2 class="modal-title" id="item-modal-name"></h2>
      <div class="modal-suggest" id="item-modal-suggest">
        <p class="modal-suggest-label" data-i18n="disposal.suggestLabel"></p>
        <div class="modal-suggest-visual">
          <img src="" alt="" class="modal-suggest-icon" id="item-modal-icon" width="180" height="180">
        </div>
      </div>
      <p class="modal-line" id="item-modal-line1"></p>
      <p class="modal-line" id="item-modal-line2"></p>
      <hr class="modal-divider">
      <p class="modal-tips-title" data-i18n="disposal.tipsTitle"></p>
      <ol class="modal-tips-list" id="item-modal-tips"></ol>
      <div class="text-center">
        <button type="button" class="btn-close-transparent" id="btn-item-close" aria-label="close">&times;</button>
      </div>
    </div>
  </div>
 
  <script src="js/storage.js"></script>
  <script src="js/i18n.js"></script>
  <script src="js/data.js"></script>
  <script src="js/app.js"></script>
</body>
 
</html>