feat: complete huihui square avatar workflows

2026-07-24 14:04:21 +08:00
parent 2ef58a44b8
commit e3bda469bb
68 changed files with 8062 additions and 132 deletions
@@ -0,0 +1,157 @@
+<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: '社群' }
+]
+
+const form = ref({ emoji: '🏢', name: '', desc: '', type: 'team' })
+
+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>