codexmate 0.0.38 → 0.0.40

package/web-ui/modules/i18n.mjs

@@ -2,11 +2,41 @@ import { DICT } from './i18n.dict.mjs';
 
 const I18N_STORAGE_KEY = 'codexmateLang';
 
+const LANGUAGE_META = Object.freeze([
+    Object.freeze({ code: 'zh', nativeName: '中文', englishName: 'Chinese', htmlLang: 'zh-CN', dir: 'ltr' }),
+    Object.freeze({ code: 'en', nativeName: 'English', englishName: 'English', htmlLang: 'en', dir: 'ltr' }),
+    Object.freeze({ code: 'ja', nativeName: '日本語', englishName: 'Japanese', htmlLang: 'ja', dir: 'ltr' }),
+    Object.freeze({ code: 'vi', nativeName: 'Tiếng Việt', englishName: 'Vietnamese', htmlLang: 'vi', dir: 'ltr' })
+]);
+
+function getAvailableLanguages() {
+    return LANGUAGE_META.filter((item) => item && item.code && DICT[item.code]);
+}
+
+function getDefaultLanguageMeta() {
+    const available = getAvailableLanguages();
+    return available[0] || LANGUAGE_META[0];
+}
+
+function getLanguageMeta(code) {
+    const normalized = typeof code === 'string' ? code.trim().toLowerCase() : '';
+    return getAvailableLanguages().find((item) => item.code === normalized) || getDefaultLanguageMeta();
+}
+
 function normalizeLang(value) {
     const normalized = typeof value === 'string' ? value.trim().toLowerCase() : '';
-    if (normalized === 'en') return 'en';
-    if (normalized === 'ja') return 'ja';
-    return 'zh';
+    const available = getAvailableLanguages();
+    const fallback = available[0] && available[0].code ? available[0].code : 'zh';
+    return available.some((item) => item.code === normalized) ? normalized : fallback;
+}
+
+function applyDocumentLanguage(next) {
+    try {
+        if (typeof document === 'undefined' || !document.documentElement) return;
+        const meta = getLanguageMeta(next);
+        document.documentElement.lang = meta.htmlLang || meta.code || 'zh-CN';
+        document.documentElement.dir = meta.dir || 'ltr';
+    } catch (_) {}
 }
 
 function interpolate(template, params) {
@@ -26,13 +56,38 @@ export function createI18nMethods() {
                 : '';
             const next = normalizeLang(saved);
             this.lang = next;
-            try {
-                if (typeof document !== 'undefined' && document.documentElement) {
-                    if (next === 'en') document.documentElement.lang = 'en';
-                    else if (next === 'ja') document.documentElement.lang = 'ja';
-                    else document.documentElement.lang = 'zh-CN';
+            applyDocumentLanguage(next);
+        },
+        languageOptions() {
+            return getAvailableLanguages();
+        },
+        currentLanguageLabel() {
+            return getLanguageMeta(this.lang).nativeName || '中文';
+        },
+        openLanguageSettings() {
+            if (typeof this.switchMainTab === 'function') {
+                this.switchMainTab('settings');
+            } else {
+                this.mainTab = 'settings';
+                if (typeof this.saveNavState === 'function') {
+                    this.saveNavState();
                 }
-            } catch (_) {}
+            }
+            this.settingsTab = 'general';
+            this.$nextTick(() => {
+                const target = typeof document !== 'undefined'
+                    ? document.getElementById('settings-language')
+                    : null;
+                if (target && typeof target.scrollIntoView === 'function') {
+                    target.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                }
+                const select = typeof document !== 'undefined'
+                    ? document.getElementById('settings-language-select')
+                    : null;
+                if (select && typeof select.focus === 'function') {
+                    select.focus();
+                }
+            });
         },
         setLang(nextLang) {
             const next = normalizeLang(nextLang);
@@ -42,13 +97,7 @@ export function createI18nMethods() {
                     localStorage.setItem(I18N_STORAGE_KEY, next);
                 }
             } catch (_) {}
-            try {
-                if (typeof document !== 'undefined' && document.documentElement) {
-                    if (next === 'en') document.documentElement.lang = 'en';
-                    else if (next === 'ja') document.documentElement.lang = 'ja';
-                    else document.documentElement.lang = 'zh-CN';
-                }
-            } catch (_) {}
+            applyDocumentLanguage(next);
         },
         t(key, params = null) {
             const lang = normalizeLang(this.lang);

package/web-ui/partials/index/layout-header.html

@@ -93,27 +93,12 @@
                 @click="onMainTabClick('settings', $event)">{{ t('tab.settings') }}</button>
         </div>
 
-        <div v-if="!sessionStandalone" class="lang-fab" role="group" :aria-label="t('lang.label')">
-            <div class="lang-choice" role="group" :aria-label="t('lang.label')">
-                <button
-                    type="button"
-                    class="lang-choice-btn"
-                    :aria-pressed="(lang || 'zh') === 'zh'"
-                    :class="{ active: (lang || 'zh') === 'zh' }"
-                    @click="setLang('zh')">ZH</button>
-                <button
-                    type="button"
-                    class="lang-choice-btn"
-                    :aria-pressed="(lang || 'zh') === 'en'"
-                    :class="{ active: (lang || 'zh') === 'en' }"
-                    @click="setLang('en')">EN</button>
-                <button
-                    type="button"
-                    class="lang-choice-btn"
-                    :aria-pressed="(lang || 'zh') === 'ja'"
-                    :class="{ active: (lang || 'zh') === 'ja' }"
-                    @click="setLang('ja')">日本語</button>
-            </div>
+        <div v-if="!sessionStandalone" class="lang-fab">
+            <button
+                type="button"
+                class="language-settings-link"
+                :aria-label="t('settings.language.sideLabel', { language: currentLanguageLabel() })"
+                @click="openLanguageSettings">{{ t('settings.language.sideLabel', { language: currentLanguageLabel() }) }}</button>
         </div>
 
         <div :class="['app-shell', { standalone: sessionStandalone }]">
@@ -282,7 +267,7 @@
                         <div class="side-item-title">{{ t('side.plugins.tools') }}</div>
                         <div class="side-item-meta">
                             <span>{{ t('side.plugins.tools.meta') }}</span>
-                            <span>{{ promptTemplatesList.length }} templates</span>
+                            <span>{{ t('side.plugins.templatesCount', { count: promptTemplatesList.length }) }}</span>
                         </div>
                     </button>
                 </div>
@@ -308,40 +293,25 @@
                         :class="['side-item', { active: isMainTabNavActive('trash') }]"
                         @pointerdown="onMainTabPointerDown('trash', $event)"
                         @click="onMainTabClick('trash', $event)">
-                        <div class="side-item-title">回收站</div>
+                        <div class="side-item-title">{{ t('settings.trash.title') }}</div>
                         <div class="side-item-meta">
-                            <span>已删除会话</span>
+                            <span>{{ t('settings.trash.meta') }}</span>
                             <span v-if="sessionTrashCount > 0" class="side-item-badge">{{ sessionTrashCount }}</span>
                         </div>
                     </button>
                 </div>
                 <div id="side-tab-new" class="side-item side-item-ghost" tabindex="-1" aria-hidden="true">
-                    <div class="side-item-title">New Tab</div>
+                    <div class="side-item-title">{{ t('side.newTab') }}</div>
                     <div class="side-item-meta"><span>&nbsp;</span></div>
                 </div>
                 </div>
 
-                <div class="side-rail-lang" role="group" :aria-label="t('lang.label')">
-                    <div class="lang-choice" role="group" :aria-label="t('lang.label')">
-                        <button
-                            type="button"
-                            class="lang-choice-btn"
-                            :aria-pressed="(lang || 'zh') === 'zh'"
-                            :class="{ active: (lang || 'zh') === 'zh' }"
-                            @click="setLang('zh')">ZH</button>
-                        <button
-                            type="button"
-                            class="lang-choice-btn"
-                            :aria-pressed="(lang || 'zh') === 'en'"
-                            :class="{ active: (lang || 'zh') === 'en' }"
-                            @click="setLang('en')">EN</button>
-                        <button
-                            type="button"
-                            class="lang-choice-btn"
-                            :aria-pressed="(lang || 'zh') === 'ja'"
-                            :class="{ active: (lang || 'zh') === 'ja' }"
-                            @click="setLang('ja')">日本語</button>
-                    </div>
+                <div class="side-rail-lang">
+                    <button
+                        type="button"
+                        class="language-settings-link"
+                        :aria-label="t('settings.language.sideLabel', { language: currentLanguageLabel() })"
+                        @click="openLanguageSettings">{{ t('settings.language.sideLabel', { language: currentLanguageLabel() }) }}</button>
                 </div>
             </aside>
             <main class="main-panel">

package/web-ui/partials/index/modal-openclaw-config.html

@@ -33,86 +33,150 @@
                             <button class="btn-mini" @click="resetOpenclawQuick">{{ t('common.clear') }}</button>
                         </div>
                     </div>
-                    <div class="quick-steps">
-                        <div class="quick-step"><span class="step-badge">1</span><span>{{ t('modal.openclaw.quick.step1') }}</span></div>
-                        <div class="quick-step"><span class="step-badge">2</span><span>{{ t('modal.openclaw.quick.step2') }}</span></div>
-                        <div class="quick-step"><span class="step-badge">3</span><span>{{ t('modal.openclaw.quick.step3') }}</span></div>
-                    </div>
-                    <div class="quick-grid">
-                        <div class="quick-card">
-                            <div class="structured-card-title">Provider</div>
-                            <div class="form-group">
-                                <label class="form-label">{{ t('field.providerName') }}</label>
-                                <input v-model="openclawQuick.providerName" class="form-input" placeholder="例如: custom-myapi">
-                                <div class="form-hint">{{ t('modal.openclaw.quick.providerHint') }}</div>
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">{{ t('field.baseUrl') }}</label>
-                                <input v-model="openclawQuick.baseUrl" class="form-input" placeholder="https://api.example.com/v1" :readonly="openclawQuick.baseUrlReadOnly">
-                                <div v-if="openclawQuick.baseUrlDisplayKind === 'builtin-default'" class="form-hint">{{ t('modal.openclaw.quick.baseUrlHintDefault') }}</div>
-                                <div v-else-if="openclawQuick.baseUrlReadOnly" class="form-hint">{{ t('modal.openclaw.quick.baseUrlHintReadonly') }}</div>
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">API Key</label>
-                                <div class="list-row">
-                                    <input v-model="openclawQuick.apiKey" class="form-input" :readonly="openclawQuick.apiKeyReadOnly" :type="(openclawQuick.apiKeyReadOnly || openclawQuick.showKey) ? 'text' : 'password'" placeholder="sk-...">
-                                    <button v-if="!openclawQuick.apiKeyReadOnly" class="btn-mini" @click="toggleOpenclawQuickKey">
-                                        {{ openclawQuick.showKey ? t('common.hide') : t('common.show') }}
+
+                    <!-- Accordion Stepper -->
+                    <div class="quick-accordion">
+                        <!-- Step 1: Provider -->
+                        <div :class="['accordion-panel', { active: openclawAccordionStep === 1, completed: openclawAccordionStep > 1 }]">
+                            <button class="accordion-trigger" @click="toggleAccordionStep(1)" type="button">
+                                <span class="accordion-step-badge">
+                                    <template v-if="openclawAccordionStep > 1">✓</template>
+                                    <template v-else>1</template>
+                                </span>
+                                <span class="accordion-title">Provider</span>
+                                <span class="accordion-status" v-if="openclawQuick.providerName">{{ openclawQuick.providerName }}</span>
+                                <svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M6 9l6 6 6-6"/>
+                                </svg>
+                            </button>
+                            <div class="accordion-content" v-show="openclawAccordionStep === 1">
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.providerName') }}</label>
+                                    <input v-model="openclawQuick.providerName" class="form-input" placeholder="例如: custom-myapi" @input="validateProviderName">
+                                    <div class="form-hint" :class="{ 'hint-error': !openclawValidation.providerName.valid }">
+                                        {{ openclawValidation.providerName.message || t('modal.openclaw.quick.providerHint') }}
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.baseUrl') }}</label>
+                                    <input v-model="openclawQuick.baseUrl" class="form-input" placeholder="https://api.example.com/v1" :readonly="openclawQuick.baseUrlReadOnly">
+                                    <div v-if="openclawQuick.baseUrlDisplayKind === 'builtin-default'" class="form-hint">{{ t('modal.openclaw.quick.baseUrlHintDefault') }}</div>
+                                    <div v-else-if="openclawQuick.baseUrlReadOnly" class="form-hint">{{ t('modal.openclaw.quick.baseUrlHintReadonly') }}</div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">API Key</label>
+                                    <div class="list-row">
+                                        <input v-model="openclawQuick.apiKey" class="form-input" :readonly="openclawQuick.apiKeyReadOnly" :type="(openclawQuick.apiKeyReadOnly || openclawQuick.showKey) ? 'text' : 'password'" placeholder="sk-...">
+                                        <button v-if="!openclawQuick.apiKeyReadOnly" class="btn-mini" @click="toggleOpenclawQuickKey">
+                                            {{ openclawQuick.showKey ? t('common.hide') : t('common.show') }}
+                                        </button>
+                                    </div>
+                                    <div v-if="openclawQuick.apiKeyDisplayKind === 'auth-profile-value'" class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintFromAuth') }}</div>
+                                    <div v-else-if="openclawQuick.apiKeyReadOnly" class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintReadonly') }}</div>
+                                    <div v-else class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintKeep') }}</div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.apiType') }}</label>
+                                    <input v-model="openclawQuick.apiType" class="form-input" list="openclawApiTypeList" :placeholder="t('placeholder.apiTypeExample')">
+                                    <datalist id="openclawApiTypeList">
+                                        <option value="openai-responses"></option>
+                                        <option value="openai-chat"></option>
+                                        <option value="anthropic"></option>
+                                        <option value="custom"></option>
+                                    </datalist>
+                                </div>
+                                <div class="accordion-actions">
+                                    <button class="btn btn-confirm btn-sm" @click="nextAccordionStep" :disabled="!openclawQuick.providerName">
+                                        下一步 →
                                     </button>
                                 </div>
-                                <div v-if="openclawQuick.apiKeyDisplayKind === 'auth-profile-value'" class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintFromAuth') }}</div>
-                                <div v-else-if="openclawQuick.apiKeyReadOnly" class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintReadonly') }}</div>
-                                <div v-else class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintKeep') }}</div>
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">{{ t('field.apiType') }}</label>
-                                <input v-model="openclawQuick.apiType" class="form-input" list="openclawApiTypeList" :placeholder="t('placeholder.apiTypeExample')">
-                                <datalist id="openclawApiTypeList">
-                                    <option value="openai-responses"></option>
-                                    <option value="openai-chat"></option>
-                                    <option value="anthropic"></option>
-                                    <option value="custom"></option>
-                                </datalist>
                             </div>
                         </div>
 
-                        <div class="quick-card">
-                            <div class="structured-card-title">{{ t('modal.openclaw.quick.modelTitle') }}</div>
-                            <div class="form-group">
-                                <label class="form-label">{{ t('field.modelId') }}</label>
-                                <input v-model="openclawQuick.modelId" class="form-input" :placeholder="t('placeholder.modelIdExample')">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">{{ t('field.displayName') }}</label>
-                                <input v-model="openclawQuick.modelName" class="form-input" :placeholder="t('placeholder.modelNameOptional')">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">{{ t('field.contextAndMaxOutput') }}</label>
-                                <div class="list-row">
-                                    <input v-model="openclawQuick.contextWindow" class="form-input" :placeholder="t('field.contextWindow')">
-                                    <input v-model="openclawQuick.maxTokens" class="form-input" :placeholder="t('field.maxOutput')">
+                        <!-- Step 2: Model -->
+                        <div :class="['accordion-panel', { active: openclawAccordionStep === 2, completed: openclawAccordionStep > 2 }]">
+                            <button class="accordion-trigger" @click="toggleAccordionStep(2)" type="button">
+                                <span class="accordion-step-badge">
+                                    <template v-if="openclawAccordionStep > 2">✓</template>
+                                    <template v-else>2</template>
+                                </span>
+                                <span class="accordion-title">{{ t('modal.openclaw.quick.modelTitle') }}</span>
+                                <span class="accordion-status" v-if="openclawQuick.modelId">{{ openclawQuick.modelName || openclawQuick.modelId }}</span>
+                                <svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M6 9l6 6 6-6"/>
+                                </svg>
+                            </button>
+                            <div class="accordion-content" v-show="openclawAccordionStep === 2">
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.modelId') }}</label>
+                                    <input v-model="openclawQuick.modelId" class="form-input" :placeholder="t('placeholder.modelIdExample')" @input="validateModelId">
+                                    <div class="form-hint" :class="{ 'hint-error': !openclawValidation.modelId.valid }">
+                                        {{ openclawValidation.modelId.message || '必填，例如: gpt-4' }}
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.displayName') }}</label>
+                                    <input v-model="openclawQuick.modelName" class="form-input" :placeholder="t('placeholder.modelNameOptional')">
+                                    <div class="form-hint">可选，用于显示</div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.contextAndMaxOutput') }}</label>
+                                    <div class="list-row">
+                                        <input v-model="openclawQuick.contextWindow" class="form-input" :placeholder="t('field.contextWindow')">
+                                        <input v-model="openclawQuick.maxTokens" class="form-input" :placeholder="t('field.maxOutput')">
+                                    </div>
+                                    <div class="form-hint">{{ t('hint.emptyNoChange') }}</div>
+                                </div>
+                                <div class="accordion-actions">
+                                    <button class="btn btn-cancel btn-sm" @click="prevAccordionStep">
+                                        ← 上一步
+                                    </button>
+                                    <button class="btn btn-confirm btn-sm" @click="nextAccordionStep" :disabled="!openclawQuick.modelId">
+                                        下一步 →
+                                    </button>
                                 </div>
-                                <div class="form-hint">{{ t('hint.emptyNoChange') }}</div>
                             </div>
                         </div>
 
-                        <div class="quick-card">
-                            <div class="structured-card-title">{{ t('modal.openclaw.quick.optionsTitle') }}</div>
-                            <label class="quick-option">
-                                <input type="checkbox" v-model="openclawQuick.setPrimary">
-                                {{ t('modal.openclaw.quick.setPrimary') }}
-                            </label>
-                            <label class="quick-option">
-                                <input type="checkbox" v-model="openclawQuick.overrideProvider">
-                                {{ t('modal.openclaw.quick.overrideProvider') }}
-                            </label>
-                            <label class="quick-option">
-                                <input type="checkbox" v-model="openclawQuick.overrideModels">
-                                {{ t('modal.openclaw.quick.overrideModels') }}
-                            </label>
-                            <div class="form-hint">{{ t('modal.openclaw.quick.optionsHint') }}</div>
+                        <!-- Step 3: Options -->
+                        <div :class="['accordion-panel', { active: openclawAccordionStep === 3, completed: openclawAccordionStep > 3 }]">
+                            <button class="accordion-trigger" @click="toggleAccordionStep(3)" type="button">
+                                <span class="accordion-step-badge">
+                                    <template v-if="openclawAccordionStep > 3">✓</template>
+                                    <template v-else>3</template>
+                                </span>
+                                <span class="accordion-title">{{ t('modal.openclaw.quick.optionsTitle') }}</span>
+                                <span class="accordion-status">高级选项</span>
+                                <svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M6 9l6 6 6-6"/>
+                                </svg>
+                            </button>
+                            <div class="accordion-content" v-show="openclawAccordionStep === 3">
+                                <label class="quick-option">
+                                    <input type="checkbox" v-model="openclawQuick.setPrimary">
+                                    {{ t('modal.openclaw.quick.setPrimary') }}
+                                </label>
+                                <label class="quick-option">
+                                    <input type="checkbox" v-model="openclawQuick.overrideProvider">
+                                    {{ t('modal.openclaw.quick.overrideProvider') }}
+                                </label>
+                                <label class="quick-option">
+                                    <input type="checkbox" v-model="openclawQuick.overrideModels">
+                                    {{ t('modal.openclaw.quick.overrideModels') }}
+                                </label>
+                                <div class="form-hint">{{ t('modal.openclaw.quick.optionsHint') }}</div>
+                                <div class="accordion-actions">
+                                    <button class="btn btn-cancel btn-sm" @click="prevAccordionStep">
+                                        ← 上一步
+                                    </button>
+                                    <button class="btn btn-confirm btn-sm" @click="finishAccordionStep">
+                                        完成 ✓
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                     </div>
+
                     <div class="btn-group">
                         <button class="btn btn-confirm" @click="applyOpenclawQuickToText">{{ t('modal.openclaw.quick.writeToEditor') }}</button>
                     </div>
@@ -262,14 +326,14 @@
                         :readonly="openclawSaving || openclawApplying"
                         placeholder="在这里编辑 OpenClaw 配置（JSON5）"></textarea>
                     <div class="template-editor-warning">
-                        <span v-if="openclawEditing.lockName && openclawEditing.name === '默认配置'">默认配置始终映射当前 openclaw.json，请直接使用“保存并应用”。</span>
+                        <span v-if="openclawEditing.lockName && isDefaultOpenclawConfig(openclawEditing.name)">默认配置始终映射当前 openclaw.json，请直接使用“保存并应用”。</span>
                         <span v-else>保存仅写入本地配置库。点击“保存并应用”后会写入 openclaw.json。</span>
                     </div>
                 </div>
 
                 <div class="btn-group">
                     <button class="btn btn-cancel" @click="closeOpenclawConfigModal" :disabled="openclawSaving || openclawApplying">取消</button>
-                    <button class="btn btn-confirm" @click="saveOpenclawConfig" :disabled="openclawSaving || openclawApplying || (openclawEditing.lockName && openclawEditing.name === '默认配置')">
+                    <button class="btn btn-confirm" @click="saveOpenclawConfig" :disabled="openclawSaving || openclawApplying || (openclawEditing.lockName && isDefaultOpenclawConfig(openclawEditing.name))">
                         {{ openclawSaving ? '保存中...' : '保存' }}
                     </button>
                     <button class="btn btn-confirm secondary" @click="saveAndApplyOpenclawConfig" :disabled="openclawSaving || openclawApplying">

package/web-ui/partials/index/modal-webhook.html

@@ -1,18 +1,18 @@
-	        <!-- Webhook 配置模态框 -->
+	        <!-- Webhook settings modal -->
 	        <div v-if="showWebhookModal" class="modal-overlay" @click.self="closeWebhookModal">
 	            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="webhook-modal-title">
-	                <div class="modal-title" id="webhook-modal-title">Webhook 配置</div>
+	                <div class="modal-title" id="webhook-modal-title">{{ t('settings.webhook.modalTitle') }}</div>
 
 	                <div class="form-group">
-	                    <label class="form-label">启用状态</label>
+	                    <label class="form-label">{{ t('settings.webhook.enabledLabel') }}</label>
 	                    <label class="settings-toggle">
 	                        <input type="checkbox" v-model="webhookConfig.enabled">
-	                        <span>启用 Webhook</span>
+	                        <span>{{ t('settings.webhook.enableToggle') }}</span>
 	                    </label>
 	                </div>
 
 	                <div class="form-group">
-	                    <label class="form-label">URL</label>
+	                    <label class="form-label">{{ t('settings.webhook.urlLabel') }}</label>
 	                    <input
 	                        v-model="webhookConfig.url"
 	                        class="form-input"
@@ -23,7 +23,7 @@
 	                </div>
 
 	                <div class="form-group">
-	                    <label class="form-label">事件</label>
+	                    <label class="form-label">{{ t('settings.webhook.eventsLabel') }}</label>
 	                    <div class="webhook-events-checkbox-list">
 	                        <label v-for="ev in webhookEventOptions" :key="ev" class="webhook-event-checkbox-item">
 	                            <input type="checkbox" :checked="webhookConfig.events.includes(ev)" @change="toggleWebhookEvent(ev)">
@@ -33,9 +33,9 @@
 	                </div>
 
 	                <div class="btn-group">
-	                    <button class="btn btn-cancel" @click="closeWebhookModal">取消</button>
+	                    <button class="btn btn-cancel" @click="closeWebhookModal">{{ t('common.cancel') }}</button>
 	                    <button class="btn btn-confirm" @click="saveWebhookSettings" :disabled="webhookSaving">
-	                        {{ webhookSaving ? '保存中...' : '保存' }}
+	                        {{ webhookSaving ? t('common.saving') : t('common.save') }}
 	                    </button>
 	                </div>
 	            </div>