优化bug
This commit is contained in:
24kycj
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<transition name="npd-fade">
|
||||
<div v-if="visible" class="npd-mask" @mousedown.self="onCancel">
|
||||
<div class="npd-dialog" role="dialog" aria-modal="true" aria-labelledby="npd-title">
|
||||
<div class="npd-header">
|
||||
<span id="npd-title" class="npd-title">添加网络位置</span>
|
||||
<button type="button" class="npd-close" aria-label="关闭" @click="onCancel">×</button>
|
||||
</div>
|
||||
<div class="npd-body">
|
||||
<p class="npd-hint">系统将按此 UNC 路径访问网络共享,请确认主机可访问且账号有效。</p>
|
||||
|
||||
<label class="npd-field">
|
||||
<span class="npd-label">主机(IP 或主机名)<span class="npd-req">*</span></span>
|
||||
<input
|
||||
v-model.trim="host"
|
||||
type="text"
|
||||
class="c-input"
|
||||
placeholder="例如 192.168.1.100 或 nas-server"
|
||||
:class="{ 'is-invalid': touched && !hostValid }"
|
||||
@blur="touched = true"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="npd-field">
|
||||
<span class="npd-label">共享名(可选)</span>
|
||||
<input
|
||||
v-model.trim="share"
|
||||
type="text"
|
||||
class="c-input"
|
||||
placeholder="例如 share,留空表示只挂载到根"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="npd-field">
|
||||
<span class="npd-label">用户名<span class="npd-req">*</span></span>
|
||||
<input
|
||||
v-model.trim="userName"
|
||||
type="text"
|
||||
class="c-input"
|
||||
placeholder="例如 admin"
|
||||
:class="{ 'is-invalid': touched && !userNameValid }"
|
||||
@blur="touched = true"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="npd-field">
|
||||
<span class="npd-label">密码<span class="npd-req">*</span></span>
|
||||
<input
|
||||
v-model="password"
|
||||
type="password"
|
||||
class="c-input"
|
||||
placeholder="请输入密码"
|
||||
:class="{ 'is-invalid': touched && !passwordValid }"
|
||||
@blur="touched = true"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div v-if="previewUrl" class="npd-preview">
|
||||
<span class="npd-preview-label">将添加为</span>
|
||||
<code class="npd-preview-path">{{ previewUrl }}</code>
|
||||
</div>
|
||||
|
||||
<p v-if="touched && errorText" class="npd-error">{{ errorText }}</p>
|
||||
</div>
|
||||
<div class="npd-footer">
|
||||
<button type="button" class="c-button-cs" @click="onCancel">取消</button>
|
||||
<button type="button" class="c-button-cs npd-primary" :disabled="!canConfirm" @click="onConfirm">
|
||||
确定
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { buildNetworkUrl } from '@/utils/networkPath'
|
||||
|
||||
const props = defineProps<{ visible: boolean }>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:visible': [boolean]
|
||||
confirm: [{ path: string; hostName: string; userName: string; password: string }]
|
||||
}>()
|
||||
|
||||
const host = ref('')
|
||||
const share = ref('')
|
||||
const userName = ref('')
|
||||
const password = ref('')
|
||||
const touched = ref(false)
|
||||
|
||||
const hostRe = /^[A-Za-z0-9_.-]+$/
|
||||
|
||||
const hostValid = computed(() => hostRe.test(host.value))
|
||||
const userNameValid = computed(() => userName.value.length > 0)
|
||||
const passwordValid = computed(() => password.value.length > 0)
|
||||
const canConfirm = computed(() => hostValid.value && userNameValid.value && passwordValid.value)
|
||||
|
||||
const previewUrl = computed(() => (hostValid.value ? buildNetworkUrl(host.value, share.value) : ''))
|
||||
|
||||
const errorText = computed(() => {
|
||||
if (!hostValid.value) return '主机名/IP 不合法'
|
||||
if (!userNameValid.value) return '请输入用户名'
|
||||
if (!passwordValid.value) return '请输入密码'
|
||||
return ''
|
||||
})
|
||||
|
||||
function reset(): void {
|
||||
host.value = ''
|
||||
share.value = ''
|
||||
userName.value = ''
|
||||
password.value = ''
|
||||
touched.value = false
|
||||
}
|
||||
|
||||
function onCancel(): void {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
function onConfirm(): void {
|
||||
touched.value = true
|
||||
if (!canConfirm.value) return
|
||||
const path = buildNetworkUrl(host.value, share.value)
|
||||
emit('confirm', {
|
||||
path,
|
||||
hostName: host.value,
|
||||
userName: userName.value,
|
||||
password: password.value
|
||||
})
|
||||
reset()
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(v) => {
|
||||
if (v) {
|
||||
reset()
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.npd-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9000;
|
||||
}
|
||||
.npd-dialog {
|
||||
width: 460px;
|
||||
max-width: 92vw;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.npd-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.npd-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
.npd-close {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
color: #909399;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.npd-close:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
.npd-body {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.npd-hint {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
.npd-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.npd-label {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
}
|
||||
.npd-req {
|
||||
color: #f56c6c;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.is-invalid {
|
||||
border-color: #f56c6c !important;
|
||||
}
|
||||
.npd-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: #f0f9ff;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.npd-preview-label {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
}
|
||||
.npd-preview-path {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
color: #409eff;
|
||||
word-break: break-all;
|
||||
}
|
||||
.npd-error {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #f56c6c;
|
||||
}
|
||||
.npd-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
.npd-primary {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
.npd-primary[disabled] {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.npd-fade-enter-active,
|
||||
.npd-fade-leave-active {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.npd-fade-enter-from,
|
||||
.npd-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import { configGet } from '@/api/cardsoon'
|
||||
import { useNetworkAuthStore } from '@/stores/networkAuth'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './styles/design-base.css'
|
||||
@@ -31,4 +32,7 @@ void (async () => {
|
||||
const app = createApp(App)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
|
||||
useNetworkAuthStore().loadFromStorage()
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
@@ -18,6 +18,10 @@ export interface PathListItem {
|
||||
path: string
|
||||
meta: string
|
||||
sizeBytes: number
|
||||
isNetwork?: boolean
|
||||
hostName?: string
|
||||
userName?: string
|
||||
password?: string
|
||||
}
|
||||
|
||||
export interface DistributeFormState {
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
// TODO: 后续用 electron safeStorage 加密
|
||||
import { defineStore } from 'pinia'
|
||||
import type { StoredCredential } from '@/types/network'
|
||||
|
||||
const STORAGE_KEY = 'networkCredentials'
|
||||
|
||||
export const useNetworkAuthStore = defineStore('networkAuth', {
|
||||
state: () => ({
|
||||
credentials: {} as Record<string, StoredCredential>
|
||||
}),
|
||||
getters: {
|
||||
hasCredentials: (state) => Object.keys(state.credentials).length > 0
|
||||
},
|
||||
actions: {
|
||||
loadFromStorage(): void {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return
|
||||
const parsed = JSON.parse(raw) as Record<string, StoredCredential>
|
||||
if (parsed && typeof parsed === 'object') {
|
||||
this.credentials = { ...this.credentials, ...parsed }
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[networkAuth] loadFromStorage 失败,已忽略', e)
|
||||
try {
|
||||
localStorage.removeItem(STORAGE_KEY)
|
||||
} catch {
|
||||
// localStorage 不可用时静默忽略
|
||||
}
|
||||
}
|
||||
},
|
||||
setCredential(hostName: string, userName: string, password: string): void {
|
||||
const host = (hostName || '').trim()
|
||||
if (!host) return
|
||||
this.credentials[host] = {
|
||||
userName: userName || '',
|
||||
password: password || '',
|
||||
lastUsed: new Date().toISOString()
|
||||
}
|
||||
this.persist()
|
||||
},
|
||||
getCredential(hostName: string): StoredCredential | null {
|
||||
const host = (hostName || '').trim()
|
||||
if (!host) return null
|
||||
return this.credentials[host] || null
|
||||
},
|
||||
removeCredential(hostName: string): void {
|
||||
const host = (hostName || '').trim()
|
||||
if (!host) return
|
||||
if (delete this.credentials[host]) {
|
||||
this.persist()
|
||||
}
|
||||
},
|
||||
clearAll(): void {
|
||||
this.credentials = {}
|
||||
this.persist()
|
||||
},
|
||||
persist(): void {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(this.credentials))
|
||||
} catch (e) {
|
||||
console.warn('[networkAuth] 持久化失败', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,13 @@
|
||||
/** 提交到后端的网络凭据结构(JSON 字符串里的一项) */
|
||||
export interface NetworkCredential {
|
||||
host_name: string
|
||||
user_name: string
|
||||
password: string
|
||||
}
|
||||
|
||||
/** 客户端缓存的凭据(以 host 为 key) */
|
||||
export interface StoredCredential {
|
||||
userName: string
|
||||
password: string
|
||||
lastUsed: string
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import type { DistributeFormState } from '@/stores/distributeForm'
|
||||
import { cleanPathPattern } from '@shared/path-pattern'
|
||||
import { resolveJobTasks } from '@/utils/validateJobConfig'
|
||||
import { useNetworkAuthStore } from '@/stores/networkAuth'
|
||||
import { buildNetInfo } from '@/utils/networkPath'
|
||||
|
||||
export interface BuildJobOptions {
|
||||
taskId: string
|
||||
@@ -57,5 +59,12 @@ export function buildJobConfig(
|
||||
if (form.generateZip) body.is_generate_zip = true
|
||||
if (form.failPrintLabel) body.is_printer_record_logo = true
|
||||
|
||||
const networkItems = form.pathList.filter((x) => x.isNetwork)
|
||||
if (networkItems.length > 0) {
|
||||
const netStore = useNetworkAuthStore()
|
||||
const netInfo = buildNetInfo(networkItems, (host) => netStore.getCredential(host))
|
||||
if (netInfo) body.net_info = netInfo
|
||||
}
|
||||
|
||||
return body
|
||||
}
|
||||
|
||||
@@ -31,7 +31,11 @@ async function buildJobJson(form: DistributeFormState): Promise<{ ok: true; json
|
||||
}
|
||||
}
|
||||
|
||||
return { ok: true, json: JSON.stringify(buildJobConfig(form, { taskId, udfFile })) }
|
||||
try {
|
||||
return { ok: true, json: JSON.stringify(buildJobConfig(form, { taskId, udfFile })) }
|
||||
} catch (e) {
|
||||
return { ok: false, message: e instanceof Error ? e.message : String(e) }
|
||||
}
|
||||
}
|
||||
|
||||
export async function createDistributeJob(
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import type { NetworkCredential, StoredCredential } from '@/types/network'
|
||||
|
||||
export function isNetworkPath(p: string): boolean {
|
||||
if (!p) return false
|
||||
return p.startsWith('\\\\') || p.startsWith('//')
|
||||
}
|
||||
|
||||
export function extractHostName(p: string): string {
|
||||
if (!p) return ''
|
||||
if (p.startsWith('\\\\')) {
|
||||
const part = p.substring(2).split('\\')[0]
|
||||
return part || ''
|
||||
}
|
||||
if (p.startsWith('//')) {
|
||||
const part = p.substring(2).split('/')[0]
|
||||
return part || ''
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
export function buildNetworkUrl(host: string, share: string): string {
|
||||
const h = host.trim()
|
||||
const s = share.trim().replace(/^[\\/]+/, '').replace(/[\\/]+$/, '')
|
||||
return s ? `\\\\${h}\\${s}` : `\\\\${h}`
|
||||
}
|
||||
|
||||
export function buildNetInfo(
|
||||
networkItems: { hostName?: string; userName?: string; password?: string }[],
|
||||
getStored: (host: string) => StoredCredential | null
|
||||
): string {
|
||||
const creds: NetworkCredential[] = []
|
||||
const seen = new Set<string>()
|
||||
for (const it of networkItems) {
|
||||
const host = (it.hostName || '').trim()
|
||||
if (!host || seen.has(host)) continue
|
||||
seen.add(host)
|
||||
const stored = getStored(host)
|
||||
const user_name = (it.userName || stored?.userName || '').trim()
|
||||
const password = it.password || stored?.password || ''
|
||||
if (!user_name || !password) {
|
||||
throw new Error(`缺少网络凭据: ${host}`)
|
||||
}
|
||||
creds.push({
|
||||
host_name: `\\\\${host}`,
|
||||
user_name,
|
||||
password
|
||||
})
|
||||
}
|
||||
return creds.length > 0 ? JSON.stringify(creds) : ''
|
||||
}
|
||||
@@ -12,13 +12,17 @@ export async function validateJobPreflight(form: DistributeFormState): Promise<s
|
||||
|
||||
const { hasCopy, hasPrint } = resolveJobTasks(form)
|
||||
if (hasCopy) {
|
||||
const paths = form.pathList.map((x) => x.path)
|
||||
const ex = await fsPathExists(paths)
|
||||
if (ex.ok && ex.data?.missing.length) {
|
||||
return `路径不存在: ${ex.data.missing.join(', ')}`
|
||||
}
|
||||
if (totalCopyBytes(form) <= 0) {
|
||||
return '拷贝路径下没有可拷贝的文件'
|
||||
// 网络项在主进程 fs.existsSync 必返 false,跳过其存在性 / 总大小校验
|
||||
const localItems = form.pathList.filter((x) => !x.isNetwork)
|
||||
const localPaths = localItems.map((x) => x.path)
|
||||
if (localPaths.length > 0) {
|
||||
const ex = await fsPathExists(localPaths)
|
||||
if (ex.ok && ex.data?.missing.length) {
|
||||
return `路径不存在: ${ex.data.missing.join(', ')}`
|
||||
}
|
||||
if (totalCopyBytes(form) <= 0) {
|
||||
return '拷贝路径下没有可拷贝的文件'
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasPrint) {
|
||||
|
||||
@@ -22,6 +22,9 @@
|
||||
<button type="button" class="c-button-cs" @click="addPath">
|
||||
添加路径
|
||||
</button>
|
||||
<button type="button" class="c-button-cs" @click="networkDialogVisible = true">
|
||||
添加网络位置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-path-hint">
|
||||
@@ -68,7 +71,10 @@
|
||||
<div class="c-panel__body">
|
||||
<div v-for="(item, idx) in formStore.pathList" :key="idx" class="c-path-item">
|
||||
<div class="c-path-item__info">
|
||||
<div class="c-path-item__name">{{ item.path }}</div>
|
||||
<div class="c-path-item__name">
|
||||
{{ item.path }}
|
||||
<span v-if="item.isNetwork" class="c-path-item__tag">网络</span>
|
||||
</div>
|
||||
<div class="c-path-item__meta">{{ item.meta }}</div>
|
||||
</div>
|
||||
<button type="button" class="c-path-item__delete" @click="removePath(idx)">
|
||||
@@ -141,11 +147,12 @@
|
||||
</section>
|
||||
</main>
|
||||
<AppFooter />
|
||||
<NetworkPathDialog v-model:visible="networkDialogVisible" @confirm="onNetworkConfirm" />
|
||||
</AppShell>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { notify, notifyRequireInit } from '@/composables/useNotify'
|
||||
import AppShell from '@/layouts/AppShell.vue'
|
||||
@@ -154,11 +161,13 @@ import AppFooter from '@/components/AppFooter.vue'
|
||||
import NavButton from '@/components/NavButton.vue'
|
||||
import AppIcon from '@/components/AppIcon.vue'
|
||||
import AppSelect from '@/components/AppSelect.vue'
|
||||
import NetworkPathDialog from '@/components/NetworkPathDialog.vue'
|
||||
import { COPY_TYPE_OPTIONS, FORMAT_TYPE_OPTIONS } from '@/constants/selectOptions'
|
||||
import { CARD_CAPACITY_BYTES, CARD_CAPACITY_GB } from '@/constants/cardCapacity'
|
||||
import { useDistributeFormStore } from '@/stores/distributeForm'
|
||||
import { useJobStore } from '@/stores/job'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useNetworkAuthStore } from '@/stores/networkAuth'
|
||||
import { validateJobPreflight } from '@/utils/validateJobPreflight'
|
||||
import { createDistributeJob } from '@/utils/createDistributeJob'
|
||||
import { formatBytesAsGb, formatBytesCompact } from '@/utils/formatBytes'
|
||||
@@ -176,6 +185,9 @@ const router = useRouter()
|
||||
const formStore = useDistributeFormStore()
|
||||
const jobStore = useJobStore()
|
||||
const appStore = useAppStore()
|
||||
const netStore = useNetworkAuthStore()
|
||||
|
||||
const networkDialogVisible = ref(false)
|
||||
|
||||
const canUse = computed(() => appStore.initialized)
|
||||
const canSubmit = computed(
|
||||
@@ -296,6 +308,26 @@ function removePath(idx: number): void {
|
||||
formStore.pathList.splice(idx, 1)
|
||||
}
|
||||
|
||||
function onNetworkConfirm(payload: {
|
||||
path: string
|
||||
hostName: string
|
||||
userName: string
|
||||
password: string
|
||||
}): void {
|
||||
netStore.setCredential(payload.hostName, payload.userName, payload.password)
|
||||
formStore.pathList.push({
|
||||
path: payload.path,
|
||||
meta: '网络位置 · 待提交',
|
||||
sizeBytes: 0,
|
||||
isNetwork: true,
|
||||
hostName: payload.hostName,
|
||||
userName: payload.userName,
|
||||
password: payload.password
|
||||
})
|
||||
networkDialogVisible.value = false
|
||||
notify.info(`已添加网络位置: ${payload.path}`)
|
||||
}
|
||||
|
||||
async function pickTemplate(): Promise<void> {
|
||||
const r = await dialogOpenSoon()
|
||||
if (!r.ok) {
|
||||
@@ -361,6 +393,18 @@ async function onSubmit(): Promise<void> {
|
||||
<style src="@/styles/pages/page4.css"></style>
|
||||
|
||||
<style scoped>
|
||||
.c-path-item__tag {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
padding: 0 6px;
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
background: #409eff;
|
||||
border-radius: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.c-card-small--slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user