huihuiSquare/digital-avatar-app/src/views/CreateOrg.vue

<template>
  <div class="create-org-page">
    <!-- 顶部导航 -->
    <header class="page-header">
      <div class="header-left">
        <button class="back-btn" @click="goBack">‹</button>
        <h1 class="page-title">创建组织</h1>
      </div>
    </header>

    <!-- 表单 -->
    <section class="form-section">
      <div class="form-card">
        <!-- Logo 选择 -->
        <div class="field">
          <label class="field-label">组织标识</label>
          <div class="emoji-picker">
            <button
              v-for="e in emojiOptions"
              :key="e"
              class="emoji-option"
              :class="{ active: form.emoji === e }"
              @click="form.emoji = e"
            >{{ e }}</button>
          </div>
        </div>

        <!-- 名称 -->
        <div class="field">
          <label class="field-label">组织名称</label>
          <input v-model="form.name" class="text-input" placeholder="例如：会会增长团队" maxlength="20" />
        </div>

        <!-- 简介 -->
        <div class="field">
          <label class="field-label">组织简介</label>
          <textarea v-model="form.desc" class="text-area" rows="3" placeholder="一句话介绍这个组织的用途" maxlength="100"></textarea>
          <span class="char-count">{{ form.desc.length }}/100</span>
        </div>

        <!-- 类型 -->
        <div class="field">
          <label class="field-label">组织类型</label>
          <div class="type-picker">
            <button
              v-for="t in typeOptions"
              :key="t.value"
              class="type-option"
              :class="{ active: form.type === t.value }"
              @click="form.type = t.value"
            >{{ t.label }}</button>
          </div>
        </div>
      </div>
    </section>

    <!-- 提交 -->
    <section class="submit-section">
      <button class="submit-btn" :disabled="!canSubmit || submitting" @click="submit">
        {{ submitting ? '创建中...' : '创建组织' }}
      </button>
      <p class="toast" v-if="toast">{{ toast }}</p>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { createOrganization } from '@/api'

const router = useRouter()
const toast = ref('')
const submitting = ref(false)

const emojiOptions = ['🏢', '🚀', '💡', '🌟', '🔥', '🐳']
const typeOptions = [
  { value: 'team', label: '团队' },
  { value: 'company', label: '企业' },
  { value: 'community', label: '社群' }
] as const

const form = ref({
  emoji: '🏢',
  name: '',
  desc: '',
  type: 'team' as 'team' | 'company' | 'community'
})

const canSubmit = computed(() => form.value.name.trim().length > 0)

const goBack = () => router.back()

const submit = async () => {
  if (!canSubmit.value || submitting.value) return
  submitting.value = true
  try {
    await createOrganization({
      name: form.value.name,
      desc: form.value.desc,
      emoji: form.value.emoji,
      type: form.value.type
    })
    toast.value = `组织「${form.value.name}」创建成功`
    setTimeout(() => router.push('/avatar/manage'), 1200)
  } catch (e) {
    toast.value = '创建失败，请重试'
    submitting.value = false
  }
}
</script>

<style scoped>
.create-org-page { min-height: 100vh; background: #F8F9FA; padding-bottom: 40px; }

.page-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: linear-gradient(135deg, #F97316 0%, #FB923C 100%); color: white;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.back-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; padding: 4px; }
.page-title { font-size: 18px; font-weight: 600; margin: 0; }

.form-section { padding: 16px 20px; }
.form-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.field { margin-bottom: 20px; position: relative; }
.field:last-child { margin-bottom: 0; }
.field-label { display: block; font-size: 14px; font-weight: 600; color: #18191C; margin-bottom: 10px; }

.emoji-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.emoji-option {
  width: 44px; height: 44px; border-radius: 12px; border: 2px solid #F3F4F6;
  background: #F8F9FA; font-size: 22px; cursor: pointer; transition: all 0.2s;
}
.emoji-option.active { border-color: #F97316; background: #FFF0E6; transform: scale(1.05); }

.text-input, .text-area {
  width: 100%; box-sizing: border-box; border: 1px solid #E5E7EB; border-radius: 10px;
  padding: 12px 14px; font-size: 14px; color: #18191C; outline: none; font-family: inherit;
  transition: border-color 0.2s;
}
.text-input:focus, .text-area:focus { border-color: #F97316; }
.text-area { resize: none; }
.char-count { position: absolute; right: 4px; bottom: -18px; font-size: 11px; color: #C9CDD2; }

.type-picker { display: flex; gap: 10px; }
.type-option {
  flex: 1; padding: 10px; border: 1px solid #E5E7EB; border-radius: 10px;
  background: white; font-size: 14px; color: #6B7280; cursor: pointer; transition: all 0.2s;
}
.type-option.active { border-color: #F97316; background: #FFF0E6; color: #F97316; font-weight: 600; }

.submit-section { padding: 0 20px; }
.submit-btn {
  width: 100%; padding: 14px; background: #F97316; color: white;
  border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: opacity 0.2s;
}
.submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.submit-btn:not(:disabled):hover { opacity: 0.9; }
.toast { text-align: center; font-size: 13px; color: #F97316; margin: 12px 0 0; }
</style>