8670addcc3
Add lucide-vue-next (stroke-based, single-color, currentColor) and swap emoji icons across nav + all main views: Settings/LogOut (App), BarChart3/Users/Plus (Analytics), LayoutDashboard (MyBoard), Sparkles/Users/Pencil (GroupEdit), Box/ListChecks/Paperclip/ PlusCircle/ArrowLeft (GroupBuilder), Target/ArrowLeft/Search (Chat/Personas/Training), User/Lock/Globe (Settings), Users/UserPlus/Info (AdminUsers). - Buttons become inline-flex for icon+text alignment. - Icons inherit currentColor (single color, modern line style). - Rebuild dist with lucide.
96 lines
4.4 KiB
Vue
96 lines
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<router-link to="/training" class="btn-back"><ArrowLeft :size="16" :stroke-width="2" /> {{ i18n.t('training') }}</router-link>
|
|
|
|
<!-- Step guidance -->
|
|
<div class="card guide">
|
|
<strong><ListChecks :size="18" :stroke-width="1.8" style="vertical-align:-3px" /> วิธีสร้างกลุ่มบุคคลต้นแบบ</strong>
|
|
<ol style="margin:8px 0 0;padding-left:20px;line-height:1.8">
|
|
<li>กรอก <strong>ชื่อ/รายละเอียดสินค้าหรือบริการ</strong> ที่อยากให้ทีมฝึกขาย (ช่องด้านล่าง)</li>
|
|
<li>(ไม่บังคับ) ระบุกลุ่มลูกค้าเป้าหมาย หรืออัปโหลดไฟล์เอกสารสินค้า .pdf/.md/.txt</li>
|
|
<li>กด <strong>สร้าง</strong> — ระบบจะพาไปหน้าสร้างบุคคลต้นแบบ (ลูกค้าจำลอง)</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2 style="margin-top:0"><Box :size="22" :stroke-width="1.8" style="vertical-align:-4px" /> {{ i18n.t('addProduct') }}</h2>
|
|
<label>{{ i18n.t('product') }} <span class="req">*</span></label>
|
|
<textarea v-model="form.product" rows="3" placeholder="เช่น ระบบ POS สำหรับร้านอาหาร Cloud POS for small restaurants"></textarea>
|
|
|
|
<label>{{ i18n.t('segment') }}</label>
|
|
<input v-model="form.segment" placeholder="เช่น SMEs ร้านอาหารในกรุงเทพ" />
|
|
|
|
<label>{{ i18n.t('description') }}</label>
|
|
<textarea v-model="form.description" rows="3" placeholder="รายละเอียดเพิ่มเติม เช่น จุดเด่นสินค้า ราคา ฯลฯ (ไม่บังคับ)"></textarea>
|
|
|
|
<div class="row">
|
|
<div style="flex:1">
|
|
<label>{{ i18n.t('channel') }}</label>
|
|
<select v-model="form.channel">
|
|
<option value="facebook">{{ i18n.t('facebook') }}</option>
|
|
<option value="line">{{ i18n.t('line') }}</option>
|
|
</select>
|
|
</div>
|
|
<div style="flex:1">
|
|
<label>{{ i18n.t('language') }}</label>
|
|
<select v-model="form.language">
|
|
<option value="th">{{ i18n.t('thai') }}</option>
|
|
<option value="en">{{ i18n.t('english') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<label><Paperclip :size="15" :stroke-width="1.8" style="vertical-align:-2px" /> ไฟล์เอกสารสินค้า (.pdf/.md/.txt) — ใช้เป็นข้อมูลให้ระบบได้</label>
|
|
<input type="file" multiple accept=".pdf,.md,.txt" @change="onFiles" />
|
|
|
|
<div class="error" v-if="error">{{ error }}</div>
|
|
<button class="primary" style="margin-top:16px;display:inline-flex;align-items:center;gap:6px" :disabled="busy || (!form.product && !files.length)" @click="create">
|
|
<PlusCircle :size="18" :stroke-width="2" /> {{ busy ? 'กำลังสร้าง…' : i18n.t('create') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { Box, ListChecks, Paperclip, PlusCircle, ArrowLeft } from 'lucide-vue-next'
|
|
import { api } from '../api'
|
|
import { i18n } from '../i18n'
|
|
|
|
const router = useRouter()
|
|
const form = ref({ product: '', segment: '', description: '', channel: 'facebook', language: 'th' })
|
|
const files = ref([])
|
|
const error = ref('')
|
|
const busy = ref(false)
|
|
|
|
function onFiles(e) {
|
|
files.value = Array.from(e.target.files || [])
|
|
}
|
|
async function create() {
|
|
busy.value = true
|
|
error.value = ''
|
|
try {
|
|
const fd = new FormData()
|
|
fd.append('product', form.value.product)
|
|
fd.append('segment', form.value.segment)
|
|
fd.append('description', form.value.description)
|
|
fd.append('channel', form.value.channel)
|
|
fd.append('language', form.value.language)
|
|
files.value.forEach((f) => fd.append('files', f))
|
|
const data = await api.createGroup(fd)
|
|
const gid = data.group.id
|
|
router.push(`/admin/groups/${gid}/edit`)
|
|
} catch (e) {
|
|
error.value = e.message
|
|
} finally {
|
|
busy.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.guide { background: #eef2ff; border-color: #c7d2fe; margin-bottom: 16px; }
|
|
.req { color: var(--red); }
|
|
</style>
|