Chato/index.html at main · Kwillited/Chato · 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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chato</title>
    <!-- TailwindjCSS 使用本地文件 -->
    <script src="./src/static/js/tailwindcss.min.js" type="module"></script>

    <!-- 外部Tailwind配置 -->
    <script src="./src/static/js/tailwind-config.js" type="module"></script>

    <!-- 外部CSS样式 -->
    <link href="./src/static/css/main-styles.css" rel="stylesheet" />
    <!-- 加载状态样式 -->
    <link href="./src/styles/loading.css" rel="stylesheet" />

    <!-- Font Awesome 使用本地文件 -->
    <link href="./src/static/css/font-awesome.min.css" rel="stylesheet" />

    <!-- Marked.js 用于Markdown渲染 - 使用本地文件 -->
    <script src="./src/static/js/marked.min.js" type="module"></script>

    <!-- Highlight.js 用于代码高亮 - 使用本地文件 -->
    <link href="./src/static/css/highlight-style.min.css" rel="stylesheet" />
    <script src="./src/static/js/highlight-common.js" type="module"></script>

    <!-- KaTeX 用于数学公式渲染 - 使用本地文件 -->
    <link href="./src/static/css/katex.min.css" rel="stylesheet" />
    <script src="./src/static/js/katex/katex.min.js" type="module"></script>

    <style type="text/tailwindcss">
      /* 保留一个空的style标签，因为Tailwind可能会使用它 */
    </style>
  </head>
  <body id="app-body" class="bg-light text-dark transition-colors duration-300 dark:bg-dark dark:text-light">

    <!-- Vue应用挂载点 -->
    <div id="app"></div>

    <!-- 引入Vue应用入口文件 -->
    <script type="module" src="./src/main.js"></script>
    <script>
      // 初始加载时根据localStorage设置深色模式（仅设置dark类）
      const savedTheme = localStorage.getItem('systemSettings');
      if (savedTheme) {
        try {
          const settings = JSON.parse(savedTheme);
          if (settings.darkMode) {
            document.documentElement.classList.add('dark');
          } else {
            document.documentElement.classList.remove('dark');
          }
        } catch (e) {
          console.error('解析保存的主题设置失败:', e);
        }
      } else {
        // 默认浅色模式
        document.documentElement.classList.remove('dark');
      }

      // 监听存储变化，同步更新html的dark类
      window.addEventListener('storage', (e) => {
        if (e.key === 'systemSettings') {
          try {
            const settings = JSON.parse(e.newValue);
            if (settings.darkMode) {
              document.documentElement.classList.add('dark');
            } else {
              document.documentElement.classList.remove('dark');
            }
          } catch (e) {
            console.error('解析主题设置变化失败:', e);
          }
        }
      });
    </script>
  </body>
</html>