|
|
<!doctype html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<meta name="description" content="Create App Component">
|
|
|
<title>创建新应用</title>
|
|
|
</head>
|
|
|
<style>
|
|
|
body {
|
|
|
background-color: var(--bg-color-secondary);
|
|
|
color: var(--text-color-primary);
|
|
|
padding: var(--spacing-xl);
|
|
|
border-radius: var(--radius-lg);
|
|
|
box-shadow: var(--shadow-md);
|
|
|
}
|
|
|
h1 {
|
|
|
text-align: center;
|
|
|
color: var(--color-primary);
|
|
|
margin-bottom: var(--spacing-lg);
|
|
|
font-size: 1.5rem;
|
|
|
}
|
|
|
</style>
|
|
|
<body>
|
|
|
<h1>创建新应用</h1>
|
|
|
<v-form :data="formData" @submit="handleSubmit">
|
|
|
<v-input name="name" label="应用名称" required placeholder="请输入应用名称"></v-input>
|
|
|
<v-input name="icon" label="应用图标（URL）" required placeholder="请输入应用图标的URL"></v-input>
|
|
|
<v-input name="des" label="应用描述" type="textarea" placeholder="请输入应用描述"></v-input>
|
|
|
<v-input name="typ" label="应用类型" type="select" :opts="typeOpts"></v-input>
|
|
|
<v-input name="init_url" label="应用地址" required placeholder="请输入应用首页"></v-input>
|
|
|
<div class="mt-4">
|
|
|
<v-btn type="submit" block>提交</v-btn>
|
|
|
</div>
|
|
|
</v-form>
|
|
|
</body>
|
|
|
<script setup>
|
|
|
formData = {
|
|
|
name: '',
|
|
|
icon: `http://public.veypi.com/img/avatar/${String(Math.floor(Math.random() * 220)).padStart(4, '0')}.jpg`,
|
|
|
des: '',
|
|
|
typ: 'public',
|
|
|
init_url: ''
|
|
|
}
|
|
|
|
|
|
typeOpts = [
|
|
|
{ label: '公开制', value: 'public' },
|
|
|
{ label: '申请制', value: 'apply' },
|
|
|
{ label: '邀请制', value: 'invite' }
|
|
|
]
|
|
|
|
|
|
onsuccess = () => {}
|
|
|
|
|
|
handleSubmit = () => {
|
|
|
const { name, icon, des, typ, init_url } = formData
|
|
|
if (!name || !icon || !typ || !init_url) {
|
|
|
$message.error('请填写所有必填字段')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
const newApp = {
|
|
|
name,
|
|
|
icon,
|
|
|
des: des || null,
|
|
|
typ,
|
|
|
status: 'ok',
|
|
|
init_url
|
|
|
}
|
|
|
|
|
|
$axios.post('/api/app', newApp)
|
|
|
.then(() => {
|
|
|
$message.success('创建成功')
|
|
|
onsuccess()
|
|
|
// Reset form
|
|
|
formData.name = ''
|
|
|
formData.icon = `http://public.veypi.com/img/avatar/${String(Math.floor(Math.random() * 220)).padStart(4, '0')}.jpg`
|
|
|
formData.des = ''
|
|
|
formData.typ = 'public'
|
|
|
formData.init_url = ''
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
$message.error(err.message || '创建应用失败，请稍后重试')
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
</html>
|