mirror of https://github.com/allinssl/allinssl
124 lines
3.5 KiB
TypeScript
124 lines
3.5 KiB
TypeScript
import { defineComponent, ref } from 'vue'
|
||
import { useWorkflowStore } from '../../store/workflow'
|
||
import { UploadNodeData } from '../../types'
|
||
import configStyles from './Config.module.css'
|
||
|
||
export default defineComponent({
|
||
name: 'UploadNodeConfig',
|
||
props: {
|
||
nodeId: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
nodeData: {
|
||
type: Object as () => UploadNodeData,
|
||
required: true,
|
||
},
|
||
},
|
||
setup(props) {
|
||
const workflowStore = useWorkflowStore()
|
||
const certificateContent = ref(props.nodeData.certificateContent || '')
|
||
const uploadStatus = ref<'idle' | 'uploading' | 'success' | 'error'>('idle')
|
||
const errorMessage = ref('')
|
||
|
||
// 更新节点标签
|
||
const updateNodeLabel = (value: string) => {
|
||
workflowStore.updateNodeData(props.nodeId, { label: value })
|
||
}
|
||
|
||
// 更新证书内容
|
||
const updateCertificateContent = (value: string) => {
|
||
certificateContent.value = value
|
||
}
|
||
|
||
// 上传证书
|
||
const uploadCertificate = () => {
|
||
if (!certificateContent.value.trim()) {
|
||
errorMessage.value = '请输入证书内容'
|
||
return
|
||
}
|
||
|
||
// 模拟上传过程
|
||
uploadStatus.value = 'uploading'
|
||
errorMessage.value = ''
|
||
|
||
setTimeout(() => {
|
||
uploadStatus.value = 'success'
|
||
workflowStore.updateNodeData(props.nodeId, {
|
||
certificateContent: certificateContent.value,
|
||
})
|
||
}, 1000)
|
||
}
|
||
|
||
// 处理文件上传
|
||
const handleFileUpload = (event: Event) => {
|
||
const fileInput = event.target as HTMLInputElement
|
||
const file = fileInput.files?.[0]
|
||
|
||
if (file) {
|
||
const reader = new FileReader()
|
||
reader.onload = (e) => {
|
||
const content = e.target?.result as string
|
||
certificateContent.value = content
|
||
}
|
||
reader.readAsText(file)
|
||
}
|
||
}
|
||
|
||
return () => (
|
||
<div class={configStyles.configContainer}>
|
||
<div class={configStyles.configField}>
|
||
<div class={configStyles.configLabel}>节点名称</div>
|
||
<input
|
||
type="text"
|
||
value={props.nodeData.label}
|
||
onInput={(e) => updateNodeLabel((e.target as HTMLInputElement).value)}
|
||
class={configStyles.configInput}
|
||
/>
|
||
</div>
|
||
|
||
<div class={configStyles.configField}>
|
||
<div class={configStyles.configLabel}>上传证书文件</div>
|
||
<input
|
||
type="file"
|
||
class={configStyles.configFileInput}
|
||
onChange={handleFileUpload}
|
||
accept=".pem,.crt,.key,.cert"
|
||
/>
|
||
</div>
|
||
|
||
<div class={configStyles.configField}>
|
||
<div class={configStyles.configLabel}>或粘贴证书内容</div>
|
||
<textarea
|
||
value={certificateContent.value}
|
||
onInput={(e) => updateCertificateContent((e.target as HTMLTextAreaElement).value)}
|
||
class={configStyles.configTextarea}
|
||
placeholder="请粘贴证书内容"
|
||
></textarea>
|
||
</div>
|
||
|
||
{errorMessage.value && <div class={configStyles.configError}>{errorMessage.value}</div>}
|
||
|
||
<div class={configStyles.configActions}>
|
||
<button
|
||
class={configStyles.configButton}
|
||
onClick={uploadCertificate}
|
||
disabled={uploadStatus.value === 'uploading'}
|
||
>
|
||
{uploadStatus.value === 'uploading' ? '上传中...' : '上传证书'}
|
||
</button>
|
||
|
||
{uploadStatus.value === 'success' && <div class={configStyles.configSuccess}>上传成功</div>}
|
||
</div>
|
||
|
||
<div class={configStyles.configInfo}>
|
||
<div class={configStyles.configInfoTitle}>节点说明</div>
|
||
<div class={configStyles.configInfoContent}>
|
||
上传证书节点用于上传证书文件或粘贴证书内容。上传成功后，证书内容将保存到节点中。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
},
|
||
})
|