AdminUI/index.html at main · pardnio/AdminUI · 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
<!DOCTYPE html>
<html lang="zh-hant">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>用戶列表</title>

        <!-- 預連接到 cdn.jsdelivr.net -->
        <link rel="preconnect" href="https://cdn.jsdelivr.net/">

        <!-- 預加載 Font Awesome 圖示 -->
        <link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" as="style" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" crossorigin="anonymous">

        <!-- 預加載 QuickUI 前端框架 -->
        <link rel="preload" href="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@0.6.6/dist/QuickUI.js" as="script" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@0.6.6/dist/QuickUI.js" defer crossorigin="anonymous"></script>

        <!-- 本地資源 -->
        <link rel="stylesheet" href="/dist/AdminUI.css">
        <script src="/dist/AdminUI.js"></script>
        <script src="/static/js/demo.js"></script>
    </head>

    <body id="body" :animation="fade-in">
        <!-- * 純範例用，請直接透過後端渲染 -->
        <section :if="is_guest" class="login">
            <temp :path="/page/component/demo-login.html"></temp>
        </section>
        <section :else>
            <!-- * 左側導覽列 (純範例用，請直接透過後端渲染) -->
            <temp :path="./page/component/demo-left-tab.html"></temp>
            <!-- 內容 -->
            <section class="system-block-body-right">
                <!-- * 頂部導覽列 (純範例用，請直接透過後端渲染) -->
                <temp :path="./page/component/demo-right-nav.html"></temp>
                <!-- -->
                <header>
                    <strong>入口頁範例</strong>
                    <section>
                    </section>
                </header>
                <!--  -->
                <p class="hint">還沒想好放什麼合適</p>
            </section>
        </section>
    </body>
    <script>
        document.addEventListener("DOMContentLoaded", _ => {

            page = new QUI({
                id: "body",
                data: {
                    // 純範例用，請直接透過後端渲染
                    ...demo_datas
                },
                event: {
                    // * 純範例用，請直接透過後端渲染
                    ...demo_events,
                    ...system_events,
                },
                next: () => {
                }
            });
        });
    </script>

</html>