File size: 5,751 Bytes
35e7795
72a404d
35e7795
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72a404d
35e7795
 
 
 
 
 
 
 
 
72a404d
35e7795
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QA 标注系统 - 标注工作台</title>
    <link rel="stylesheet" href="/static/css/manager.css">
    <link rel="stylesheet" href="/static/css/annotation.css">
</head>
<body>
    <div class="annotation-container">
        <!-- 侧边栏 -->
        <aside class="annotation-sidebar">
            <div class="annotation-sidebar-header">
                <h2 data-i18n="annotation.taskList">任务列表</h2>
            </div>
            <div class="annotation-sidebar-content">
                <div id="progressInfo" class="progress-info" style="display: none;">
                    <div><span data-i18n="annotation.annotated">已标注</span>: <span id="annotatedCount">0</span> <span data-i18n="annotation.of">/</span> <span id="totalCount">0</span></div>
                    <div style="margin-top: 8px;">
                        <div style="background: #e0e0e0; height: 8px; border-radius: 4px; overflow: hidden;">
                            <div id="progressBar" style="background: #667eea; height: 100%; width: 0%; transition: width 0.3s ease;"></div>
                        </div>
                    </div>
                </div>
                <div class="qa-list-container" style="flex: 1; overflow-y: auto; min-height: 0;">
                    <ul id="qaListBody" class="qa-list">
                        <li class="qa-list-empty"><span data-i18n="common.loading">加载中...</span></li>
                    </ul>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="annotation-main">
            <div class="annotation-header">
                <h1 data-i18n="annotation.workbench">标注工作台</h1>
                <div style="display: flex; gap: 12px; align-items: center;">
                    <button class="btn btn-primary" id="backBtn"><span data-i18n="annotation.back">返回</span></button>
                    <button class="btn btn-secondary" id="logoutBtn"><span data-i18n="annotation.logout">退出登录</span></button>
                </div>
            </div>
            <div class="annotation-content" id="annotationContent">
                <div class="annotation-qa-display" id="qaDisplay">
                    <div class="empty-state">
                        <div class="empty-state-icon">📝</div>
                        <div class="empty-state-text"><span data-i18n="common.loading">加载中...</span></div>
                    </div>
                </div>
                <div class="annotation-form-panel" id="annotationFormPanel" style="display: none;">
                    <div class="annotation-form-panel-header">
                        <h3 data-i18n="annotation.annotationForm">标注表单</h3>
                    </div>
                    <div class="annotation-form-panel-body" id="annotationFormBody">
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="https://unpkg.com/i18next@23.7.11/dist/umd/i18next.min.js"></script>
    <script src="/static/js/api.js"></script>
    <script src="/static/js/i18n-helper.js"></script>
    <script src="/static/js/annotation.js"></script>

    <!-- i18n 国际化初始化 -->
    <script>
        window.addEventListener('load', async function() {
            if (typeof i18next === 'undefined') {
                console.error('i18next 库未加载');
                return;
            }

            const savedLanguage = localStorage.getItem('appLanguage') || 'en-US';

            try {
                const [zhCN, enUS] = await Promise.all([
                    fetch('/static/locales/zh-CN.json').then(r => r.json()),
                    fetch('/static/locales/en-US.json').then(r => r.json())
                ]);

                await i18next.init({
                    lng: savedLanguage,
                    fallbackLng: 'en-US',
                    debug: false,
                    resources: {
                        'zh-CN': {
                            translation: zhCN.translation
                        },
                        'en-US': {
                            translation: enUS.translation
                        }
                    }
                });

                window.i18next = i18next;
                window.t = function(key, options) {
                    return i18next.t(key, options);
                };

                updatePageLanguage();
            } catch (error) {
                console.error('i18next 初始化失败:', error);
            }
        });

        function updatePageLanguage() {
            if (!window.i18next) return;

            const lang = window.i18next.language;
            document.documentElement.lang = lang;

            document.querySelectorAll('[data-i18n]').forEach(element => {
                const key = element.getAttribute('data-i18n');
                const translation = window.i18next.t(key);

                if (element.children.length === 1 && element.children[0].tagName === 'SPAN') {
                    const span = element.children[0];
                    if (span.hasAttribute('data-i18n')) {
                        span.textContent = window.i18next.t(span.getAttribute('data-i18n'));
                    } else {
                        element.textContent = translation;
                    }
                } else {
                    element.textContent = translation;
                }
            });

            document.title = window.i18next.t('app.title') + ' - ' + window.i18next.t('annotation.workbench');
        }
    </script>
</body>
</html>