toor
836d0228d2
The project now has exactly one UI library. Every naive-ui component in
packages/client/src is replaced by its Arco equivalent across 24 views and
roughly 80 components, and naive-ui is dropped from package.json along with
its transitive vueuc / @css-render / vdirs / seemly dependencies.
The migration is rendering-layer only. No store logic, no API contract, and
no /chat-run payload was touched.
Three classes of leftover were invisible to `grep naive-ui` and are now
covered by tests/client/no-naive-ui.test.ts, which asserts all three:
- dead .n-* class names in style blocks
- dead --n-* custom properties
- naive-ui in package.json
Notable behavioural traps handled along the way, recorded in
docs/arco-migration-rules.md:
- a-input-password defaults to masked; passing default-visibility="false"
would have exposed API keys in clear text
- a-upload fires a real XHR unless auto-upload is false
- nested Trigger components fight over the first element child, so the
group-chat settings dropdown was flattened
- Arco renders tooltip default-slot text inline, which was silently
collapsing the chat and group-chat toolbars
104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, watch } from 'vue'
|
|
import { useMessage } from '@/composables/useMessage'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useSettingsStore } from '@/stores/hermes/settings'
|
|
import SettingRow from './SettingRow.vue'
|
|
|
|
const settingsStore = useSettingsStore()
|
|
const message = useMessage()
|
|
const { t } = useI18n()
|
|
const proxyKeys = ['HTTPS_PROXY', 'HTTP_PROXY', 'ALL_PROXY', 'NO_PROXY'] as const
|
|
|
|
const draft = reactive<Record<string, string>>({
|
|
HTTPS_PROXY: '',
|
|
HTTP_PROXY: '',
|
|
ALL_PROXY: '',
|
|
NO_PROXY: '',
|
|
})
|
|
|
|
watch(
|
|
() => settingsStore.proxy,
|
|
(proxy) => {
|
|
for (const key of proxyKeys) {
|
|
draft[key] = String(proxy?.[key] || '')
|
|
}
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
|
|
async function save() {
|
|
try {
|
|
await settingsStore.saveSection('proxy', { ...draft })
|
|
await settingsStore.fetchSettings()
|
|
message.success(t('settings.saved'))
|
|
} catch {
|
|
message.error(t('settings.saveFailed'))
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="settings-section proxy-settings">
|
|
<h3 class="section-title">{{ t('settings.proxy.title') }}</h3>
|
|
<p class="section-hint">{{ t('settings.proxy.description') }}</p>
|
|
|
|
<SettingRow :label="t('settings.proxy.httpsProxy')" :hint="t('settings.proxy.httpsProxyHint')">
|
|
<a-input v-model="draft.HTTPS_PROXY" allow-clear size="small" class="input-lg" placeholder="http://127.0.0.1:7890" />
|
|
</SettingRow>
|
|
|
|
<SettingRow :label="t('settings.proxy.httpProxy')" :hint="t('settings.proxy.httpProxyHint')">
|
|
<a-input v-model="draft.HTTP_PROXY" allow-clear size="small" class="input-lg" placeholder="http://127.0.0.1:7890" />
|
|
</SettingRow>
|
|
|
|
<SettingRow :label="t('settings.proxy.allProxy')" :hint="t('settings.proxy.allProxyHint')">
|
|
<a-input v-model="draft.ALL_PROXY" allow-clear size="small" class="input-lg" placeholder="socks5://127.0.0.1:7890" />
|
|
</SettingRow>
|
|
|
|
<SettingRow :label="t('settings.proxy.noProxy')" :hint="t('settings.proxy.noProxyHint')">
|
|
<a-input v-model="draft.NO_PROXY" allow-clear size="small" class="input-lg" placeholder="localhost,127.0.0.1,.local" />
|
|
</SettingRow>
|
|
|
|
<div class="settings-actions">
|
|
<a-button type="primary" :loading="settingsStore.saving" @click="save">
|
|
{{ t('settings.proxy.save') }}
|
|
</a-button>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/styles/variables' as *;
|
|
|
|
.settings-section {
|
|
max-width: 820px;
|
|
}
|
|
|
|
.section-title {
|
|
margin: 0 0 6px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.section-hint {
|
|
margin: 0 0 16px;
|
|
color: $text-muted;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.input-lg {
|
|
width: 360px;
|
|
}
|
|
|
|
.settings-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-mobile) {
|
|
.input-lg {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|