QSI.github.io/index.html at main · QSI-Lab/QSI.github.io · 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
132
133
134
135
136
137
138
139
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>量超智 LAB · 学术论文展示</title>
    <meta
      name="description"
      content="量超智 LAB 学术论文可视化展示平台，支持搜索、筛选、统计概览、本地配图与摘要展示。"
    />
    <script>
	  // 每次刷新生成一个新版本号，强制重新请求静态资源
	  window.__ASSET_VERSION__ = Date.now();

	  const css = document.createElement("link");
	  css.rel = "stylesheet";
	  css.href = `./styles.css?v=${window.__ASSET_VERSION__}`;
	  document.head.appendChild(css);
	</script>
  </head>
  <body>
    <div class="page-shell">
      <header class="hero">
        <div class="hero__glow hero__glow--left" aria-hidden="true"></div>
        <div class="hero__glow hero__glow--right" aria-hidden="true"></div>
        <div class="hero__inner">
          <div class="hero__badge">量</div>
          <div>
            <p class="hero__eyebrow">Academic Showcase</p>
            <h1 class="hero__title">量超智 LAB</h1>
            <p class="hero__subtitle">学术论文可视化展示平台</p>
          </div>
        </div>
      </header>

      <main class="page-main">
        <section class="stats-layout" aria-labelledby="stats-title">
          <div class="section-head">
            <div>
              <p class="section-kicker">Lab Snapshot</p>
              <h2 id="stats-title" class="section-title">论文概览</h2>
            </div>
          </div>

          <div id="summaryStats" class="summary-grid" aria-live="polite"></div>

          <div class="chart-grid">
            <article class="panel chart-card">
              <div class="chart-card__head">
                <h3>年度论文趋势</h3>
                <span>按年份统计</span>
              </div>
              <div id="yearChart" class="year-chart" aria-label="年度论文趋势图"></div>
            </article>

            <article class="panel chart-card">
              <div class="chart-card__head">
                <h3>CCF 等级分布</h3>
                <span>全部论文</span>
              </div>
              <div id="ccfChart" class="ccf-chart" aria-label="CCF 等级分布图"></div>
            </article>
          </div>
        </section>

        <section class="panel controls-panel" aria-labelledby="filters-title">
          <div class="section-head">
            <div>
              <p class="section-kicker">Search & Filter</p>
              <h2 id="filters-title" class="section-title">搜索与筛选</h2>
            </div>
            <button id="clearFiltersBtn" class="ghost-button" type="button" hidden>清除筛选</button>
          </div>

          <label class="search-box" for="searchInput">
            <span class="search-box__icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" focusable="false">
                <path
                  d="M10.5 4a6.5 6.5 0 1 0 0 13a6.5 6.5 0 0 0 0-13Zm0 0l9 9"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.8"
                />
              </svg>
            </span>
            <input
              id="searchInput"
              type="search"
              autocomplete="off"
              placeholder="搜索论文标题、作者、期刊或会议..."
            />
          </label>

          <div id="filterRows" class="filter-rows"></div>
        </section>

        <section class="results-strip" aria-live="polite">
          <div class="results-strip__meta">
            <p id="resultsCount" class="results-strip__count"></p>
            <p id="activeSummary" class="results-strip__summary"></p>
          </div>
          <div id="sortControls" class="sort-controls" aria-label="论文排序">
            <button type="button" class="sort-button is-active" data-sort-order="DESC">最新优先</button>
            <button type="button" class="sort-button" data-sort-order="ASC">最早优先</button>
          </div>
        </section>

        <section id="papersList" class="papers-list" aria-live="polite"></section>
      </main>

      <footer class="site-footer">
        <p class="site-footer__text">量超智 LAB · 学术论文展示 · 数据来源：课题组内部整理</p>
        <a class="site-footer__button" href="./gen_paper_json.html">打开论文 JSON 生成器</a>
      </footer>
    </div>

    <script>
	  function loadScript(src) {
		return new Promise((resolve, reject) => {
		  const s = document.createElement("script");
		  s.src = `${src}?v=${window.__ASSET_VERSION__}`;
		  s.onload = resolve;
		  s.onerror = () => reject(new Error(`加载失败: ${s.src}`));
		  document.body.appendChild(s);
		});
	  }

	  (async () => {
		await loadScript("./data.js");
		await loadScript("./papers-data.js");
		await loadScript("./app.js");
	  })().catch((err) => {
		console.error(err);
	  });
	</script>
  </body>
</html>