update
This commit is contained in:
Baobhan Sith
@@ -123,48 +123,59 @@ const handleSubmit = async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="add-proxy-form-overlay">
|
||||
<div class="add-proxy-form">
|
||||
<h3>{{ formTitle }}</h3>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="form-group">
|
||||
<label for="proxy-name">{{ t('proxies.form.name') }}</label>
|
||||
<input type="text" id="proxy-name" v-model="formData.name" required />
|
||||
<div class="fixed inset-0 bg-overlay flex justify-center items-center z-50"> <!-- Use bg-overlay for the overlay -->
|
||||
<div class="bg-background text-foreground p-8 rounded-lg shadow-xl border border-border min-w-[350px] max-w-lg"> <!-- Form Panel with Tailwind -->
|
||||
<h3 class="text-lg font-semibold text-center mb-6">{{ formTitle }}</h3> <!-- Title with Tailwind -->
|
||||
<form @submit.prevent="handleSubmit" class="space-y-4"> <!-- Form with spacing -->
|
||||
<div> <!-- Form Group -->
|
||||
<label for="proxy-name" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.name') }}</label>
|
||||
<input type="text" id="proxy-name" v-model="formData.name" required
|
||||
class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="proxy-type">{{ t('proxies.form.type') }}</label>
|
||||
<select id="proxy-type" v-model="formData.type">
|
||||
<div> <!-- Form Group -->
|
||||
<label for="proxy-type" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.type') }}</label>
|
||||
<select id="proxy-type" v-model="formData.type"
|
||||
class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary appearance-none bg-no-repeat bg-right pr-8"
|
||||
style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.75rem center; background-size: 16px 12px;">
|
||||
<option value="SOCKS5">SOCKS5</option>
|
||||
<option value="HTTP">HTTP</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="proxy-host">{{ t('proxies.form.host') }}</label>
|
||||
<input type="text" id="proxy-host" v-model="formData.host" required />
|
||||
<div> <!-- Form Group -->
|
||||
<label for="proxy-host" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.host') }}</label>
|
||||
<input type="text" id="proxy-host" v-model="formData.host" required
|
||||
class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="proxy-port">{{ t('proxies.form.port') }}</label>
|
||||
<input type="number" id="proxy-port" v-model.number="formData.port" required min="1" max="65535" />
|
||||
<div> <!-- Form Group -->
|
||||
<label for="proxy-port" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.port') }}</label>
|
||||
<input type="number" id="proxy-port" v-model.number="formData.port" required min="1" max="65535"
|
||||
class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="proxy-username">{{ t('proxies.form.username') }} ({{ t('proxies.form.optional') }})</label>
|
||||
<input type="text" id="proxy-username" v-model="formData.username" />
|
||||
<div> <!-- Form Group -->
|
||||
<label for="proxy-username" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.username') }} ({{ t('proxies.form.optional') }})</label>
|
||||
<input type="text" id="proxy-username" v-model="formData.username"
|
||||
class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="proxy-password">{{ t('proxies.form.password') }} ({{ t('proxies.form.optional') }})</label>
|
||||
<input type="password" id="proxy-password" v-model="formData.password" />
|
||||
<small v-if="isEditMode">{{ t('proxies.form.passwordUpdateNote') }}</small>
|
||||
<div> <!-- Form Group -->
|
||||
<label for="proxy-password" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.password') }} ({{ t('proxies.form.optional') }})</label>
|
||||
<input type="password" id="proxy-password" v-model="formData.password"
|
||||
class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
|
||||
<small v-if="isEditMode" class="block mt-1 text-xs text-text-secondary">{{ t('proxies.form.passwordUpdateNote') }}</small>
|
||||
</div>
|
||||
|
||||
<div v-if="formError || combinedStoreError" class="error-message">
|
||||
<div v-if="formError || combinedStoreError" class="text-red-600 bg-red-100 border border-red-300 rounded-md p-3 text-sm text-center font-medium"> <!-- Error Message with Tailwind -->
|
||||
{{ formError || combinedStoreError }}
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" :disabled="isLoading">
|
||||
<div class="flex justify-end space-x-3 pt-5 mt-6 border-t border-border"> <!-- Form Actions with Tailwind -->
|
||||
<button type="submit" :disabled="isLoading"
|
||||
class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out">
|
||||
{{ submitButtonText }}
|
||||
</button>
|
||||
<button type="button" @click="emit('close')" :disabled="isLoading">{{ t('proxies.form.cancel') }}</button>
|
||||
<button type="button" @click="emit('close')" :disabled="isLoading"
|
||||
class="px-4 py-2 bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out">
|
||||
{{ t('proxies.form.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -172,149 +183,5 @@ const handleSubmit = async () => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 应用更详细的美化样式 */
|
||||
.add-proxy-form-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6); /* 加深背景 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.add-proxy-form {
|
||||
background-color: var(--app-bg-color, white);
|
||||
color: var(--text-color, #333);
|
||||
padding: calc(var(--base-padding, 1rem) * 2);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* 调整阴影 */
|
||||
min-width: 350px; /* 稍微加宽 */
|
||||
max-width: 550px; /* 调整最大宽度 */
|
||||
border: 1px solid var(--border-color, #ccc);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: calc(var(--base-margin, 0.5rem) * 4); /* 增加标题下边距 */
|
||||
text-align: center;
|
||||
color: var(--text-color, #333);
|
||||
font-family: var(--font-family-sans-serif, sans-serif);
|
||||
font-size: 1.4em; /* 稍微增大标题字号 */
|
||||
font-weight: 600; /* 加粗标题 */
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: calc(var(--base-margin, 0.5rem) * 2.5); /* 增加组间距 */
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--base-margin, 0.5rem) * 0.8); /* 调整标签下边距 */
|
||||
font-weight: 500; /* 调整标签字重 */
|
||||
font-size: 0.95em; /* 调整标签字号 */
|
||||
color: var(--text-color-secondary, #666); /* 使用次要文本颜色 */
|
||||
font-family: var(--font-family-sans-serif, sans-serif);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: calc(var(--base-padding, 1rem) * 0.6); /* 调整输入框内边距 */
|
||||
border: 1px solid var(--border-color, #ccc);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--app-bg-color, white);
|
||||
color: var(--text-color, #333);
|
||||
font-family: var(--font-family-sans-serif, sans-serif);
|
||||
font-size: 1em; /* 确保字体大小 */
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="password"]:focus,
|
||||
select:focus {
|
||||
outline: none; /* 移除默认 outline */
|
||||
border-color: var(--button-bg-color, #007bff); /* 聚焦时使用按钮背景色 */
|
||||
box-shadow: 0 0 5px var(--button-bg-color, #007bff); /* 恢复光晕效果并使用主题色 */
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none; /* 移除默认下拉箭头 (可能需要自定义箭头) */
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* 添加自定义箭头 */
|
||||
background-repeat: no-repeat;
|
||||
background-position: right calc(var(--base-padding, 1rem) * 0.6) center;
|
||||
background-size: 16px 12px;
|
||||
padding-right: calc(var(--base-padding, 1rem) * 2); /* 为箭头腾出空间 */
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
margin-top: calc(var(--base-margin, 0.5rem) * 0.5); /* 调整上边距 */
|
||||
font-size: 0.85em; /* 调整字号 */
|
||||
color: var(--text-color-secondary, #666);
|
||||
font-family: var(--font-family-sans-serif, sans-serif);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-bottom: var(--base-margin, 0.5rem);
|
||||
text-align: center;
|
||||
font-family: var(--font-family-sans-serif, sans-serif);
|
||||
font-weight: 500; /* 加粗错误信息 */
|
||||
padding: calc(var(--base-padding, 1rem) * 0.5); /* 添加内边距 */
|
||||
background-color: rgba(255, 0, 0, 0.05); /* 添加淡红色背景 */
|
||||
border: 1px solid rgba(255, 0, 0, 0.2); /* 添加边框 */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: calc(var(--base-margin, 0.5rem) * 4); /* 增加顶部间距 */
|
||||
padding-top: calc(var(--base-padding, 1rem) * 1); /* 在按钮上方增加间距 */
|
||||
border-top: 1px solid var(--border-color, #eee); /* 添加分隔线 */
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
margin-left: var(--base-margin, 0.5rem);
|
||||
padding: calc(var(--base-padding, 1rem) * 0.7) calc(var(--base-padding, 1rem) * 1.4); /* 调整按钮内边距 */
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-family-sans-serif, sans-serif);
|
||||
font-weight: 500; /* 调整按钮字重 */
|
||||
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; /* 添加过渡 */
|
||||
}
|
||||
|
||||
.form-actions button[type="submit"] {
|
||||
background-color: var(--button-bg-color, #007bff);
|
||||
color: var(--button-text-color, white);
|
||||
border: 1px solid var(--button-bg-color, #007bff); /* 添加边框 */
|
||||
}
|
||||
.form-actions button[type="submit"]:hover:not(:disabled) {
|
||||
background-color: var(--button-hover-bg-color, #0056b3);
|
||||
border-color: var(--button-hover-bg-color, #0056b3); /* 同步边框色 */
|
||||
}
|
||||
|
||||
.form-actions button[type="button"] {
|
||||
background-color: transparent; /* 取消按钮透明背景 */
|
||||
color: var(--text-color-secondary, #666); /* 使用次要文本颜色 */
|
||||
border: 1px solid var(--border-color, #ccc); /* 添加边框 */
|
||||
}
|
||||
.form-actions button[type="button"]:hover:not(:disabled) {
|
||||
background-color: var(--border-color, #eee); /* 悬停时淡灰色背景 */
|
||||
border-color: var(--text-color-secondary, #bbb); /* 悬停时边框变深 */
|
||||
color: var(--text-color, #333); /* 悬停时文本变深 */
|
||||
}
|
||||
|
||||
.form-actions button:disabled {
|
||||
opacity: 0.5; /* 调整禁用透明度 */
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* Remove all scoped styles as they are now handled by Tailwind utility classes */
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user