feat: initialize project with event order form
This commit establishes the initial structure of the Nuxt application, centered around a new event order form. Key changes include: - Setting up the main app layout with a header, footer, and color mode support using @nuxt/ui. - Creating a multi-part event order form on the index page. - Introducing a `useEventOrder` composable to manage form state and validation with Zod. - Adding modular form components under `app/components/eventOrder`. - Including project configuration files for pnpm, VSCode, and global CSS.
This commit is contained in:
xiaomai
41
.github/copilot-instructions.md
vendored
Normal file
41
.github/copilot-instructions.md
vendored
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
This repository is a small Nuxt 4 site (TypeScript + Vue 3) using the `@nuxt/ui` component kit.
|
||||||
|
|
||||||
|
Quick context
|
||||||
|
- Framework: Nuxt 4 (see `nuxt.config.ts`). compatibilityDate is 2025-07-15 and `@nuxt/ui` is enabled.
|
||||||
|
- Scripts: `dev`, `build`, `generate`, `preview` are defined in `package.json`. Use `pnpm` in this workspace (pnpm-lock present).
|
||||||
|
- UI: Pages and layout live under `app/` (Nuxt App Directory). Components from `@nuxt/ui` (prefixed with `U*`) are used throughout.
|
||||||
|
|
||||||
|
What an AI coding agent should know/do first
|
||||||
|
- Run local dev: `pnpm dev` to start Nuxt dev server (http://localhost:3000). Changes in `app/` hot-reload.
|
||||||
|
- Preserve TypeScript usage: files use `lang="ts"` in SFCs and `typescript` is a dependency.
|
||||||
|
- Styling: `app/assets/css/main.css` imports Tailwind and `@nuxt/ui`. Avoid removing these imports.
|
||||||
|
|
||||||
|
Project-specific patterns and conventions
|
||||||
|
- Use Nuxt app directory layout: `app/app.vue`, `app/layouts/default.vue`, `app/pages/*.vue`. Add pages/components under `app/`.
|
||||||
|
- UI primitives: Expect `UApp`, `UHeader`, `UMain`, `UFooter`, `UPageHero`, `UContainer`, `UForm`, `UCard`, `UInput`, `USelect`, etc. These are provided by `@nuxt/ui` — prefer those over adding new UI libraries.
|
||||||
|
- Minimal global JS: logic is inside pages via `<script setup lang="ts">`. Prefer composition API and `reactive`/`ref` patterns as in `app/pages/index.vue`.
|
||||||
|
- Validation: the example uses `zod` (imported locally in the page). If adding validation follow the zod pattern (schema + z.infer for types).
|
||||||
|
|
||||||
|
Integration and external dependencies
|
||||||
|
- No backend code in this repo — it's a frontend site. If integrating APIs, add runtime config to `nuxt.config.ts` and use Nuxt server or composables to centralize calls.
|
||||||
|
- Build & preview: `pnpm build` then `pnpm preview` to check production output.
|
||||||
|
|
||||||
|
When editing or adding files
|
||||||
|
- Keep naming under `app/` and follow existing patterns (SFC + TS + `script setup`).
|
||||||
|
- Add imports for UI components only when needed; many U* components are globally available via `@nuxt/ui`.
|
||||||
|
- Update `app/assets/css/main.css` only to add project-specific styles; don't remove `@nuxt/ui` or Tailwind imports.
|
||||||
|
|
||||||
|
Examples to reference when making changes
|
||||||
|
- `nuxt.config.ts` — module list and devtools flag.
|
||||||
|
- `package.json` — available scripts.
|
||||||
|
- `app/pages/index.vue` — form structure, `zod` usage, `reactive` state, `U*` components.
|
||||||
|
- `app/layouts/default.vue` — shows header/footer composition and use of slots for `UHeader` and `UFooter`.
|
||||||
|
|
||||||
|
Failure modes & quick checks
|
||||||
|
- If the dev server fails, check Node version and `pnpm install` exit logs; `nuxt prepare` runs on postinstall.
|
||||||
|
- Type errors appear when SFCs change TS types — run `pnpm dev` and inspect terminal/console errors.
|
||||||
|
|
||||||
|
If unclear or missing context
|
||||||
|
- Ask the maintainer whether there are environment variables, deployment targets, or private packages to consider before adding integrations or CI.
|
||||||
|
|
||||||
|
End of instructions — ask for feedback if anything here is unclear or you'd like more granular conventions (commit messages, PR checks, etc.).
|
||||||
24
.vscode/settings.json
vendored
Normal file
24
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"files.associations": {
|
||||||
|
"*.page-template": "vue",
|
||||||
|
"*.layout-template": "vue",
|
||||||
|
"*.vue": "vue",
|
||||||
|
"*.css": "tailwindcss"
|
||||||
|
},
|
||||||
|
"editor.quickSuggestions": {
|
||||||
|
"other": "on",
|
||||||
|
"comments": "off",
|
||||||
|
"strings": "on"
|
||||||
|
},
|
||||||
|
"tailwindCSS.classAttributes": [
|
||||||
|
"class",
|
||||||
|
"className",
|
||||||
|
"ngClass",
|
||||||
|
"class:list",
|
||||||
|
"ui"
|
||||||
|
],
|
||||||
|
"tailwindCSS.experimental.classRegex": [
|
||||||
|
["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
|
||||||
|
],
|
||||||
|
"css.lint.unknownAtRules": "ignore"
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<UApp>
|
||||||
<NuxtRouteAnnouncer />
|
<NuxtLayout>
|
||||||
<NuxtWelcome />
|
<NuxtPage />
|
||||||
</div>
|
</NuxtLayout>
|
||||||
|
</UApp>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
2
app/assets/css/main.css
Normal file
2
app/assets/css/main.css
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
@import "@nuxt/ui";
|
||||||
68
app/components/eventOrder/MetaDetails.vue
Normal file
68
app/components/eventOrder/MetaDetails.vue
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<UCard>
|
||||||
|
<template #header>
|
||||||
|
<h2 class="text-xl font-bold">{{ secIdx }}. 您的活动信息</h2>
|
||||||
|
<p class="text-muted text-sm">
|
||||||
|
您提供的联系方式与活动信息仅用于沟通与履约，本工作室将妥善保护，不会未经同意向第三方公开或出售。
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="grid gap-4">
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<UFormField name="contactName" label="联络人姓名" required>
|
||||||
|
<UInput v-model="orderState.contactName" class="w-full" />
|
||||||
|
</UFormField>
|
||||||
|
|
||||||
|
<UFormField name="contactNumber" label="联系方式（推荐 WhatsApp）">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<UCheckbox
|
||||||
|
v-model="orderState.isSameContact"
|
||||||
|
label="当前手机号码？"
|
||||||
|
class="whitespace-nowrap"
|
||||||
|
/>
|
||||||
|
<UInput
|
||||||
|
v-model="orderState.contactNumber"
|
||||||
|
:disabled="orderState.isSameContact"
|
||||||
|
:class="[
|
||||||
|
'w-full transition-opacity duration-300',
|
||||||
|
orderState.isSameContact ? 'opacity-0 pointer-events-none' : '',
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</UFormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 活动信息 -->
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
<UFormField name="eventName" label="活动名称" required>
|
||||||
|
<UInput
|
||||||
|
v-model="orderState.eventName"
|
||||||
|
class="w-full"
|
||||||
|
placeholder="如果可能，请写上活动全名"
|
||||||
|
/>
|
||||||
|
</UFormField>
|
||||||
|
|
||||||
|
<UFormField name="eventDate" label="活动日期" required>
|
||||||
|
<UInput type="date" v-model="orderState.eventDate" class="w-full" />
|
||||||
|
</UFormField>
|
||||||
|
|
||||||
|
<UFormField name="eventLocation" label="地点" required>
|
||||||
|
<USelect
|
||||||
|
v-model="orderState.eventLocation"
|
||||||
|
:items="eventLocationItems"
|
||||||
|
placeholder="请选择地点"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</UFormField>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const { sectionIndex, orderState, eventLocationItems } = useEventOrder();
|
||||||
|
|
||||||
|
const secIdx = ref(++sectionIndex.value);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
78
app/components/eventOrder/ProductBackgroundDesign.vue
Normal file
78
app/components/eventOrder/ProductBackgroundDesign.vue
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<UCard>
|
||||||
|
<template #header>
|
||||||
|
<h2 class="text-xl font-bold">{{ secIdx }}. 背景设计</h2>
|
||||||
|
<p class="text-muted text-sm">自研动态背景效果，可以自定义形象动态图。</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<UCheckbox
|
||||||
|
v-model="orderState.backgroundDesign"
|
||||||
|
label="订阅服务"
|
||||||
|
description="默认屏幕尺寸为 1920 × 1080。须和屏幕供应单位获取详细尺寸，确保展示无误。"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="orderState.backgroundDesign"
|
||||||
|
:class="['grid', 'grid-cols-1', 'gap-4']"
|
||||||
|
>
|
||||||
|
<UFormField name="backgroundType">
|
||||||
|
<URadioGroup
|
||||||
|
v-model="orderState.backgroundType"
|
||||||
|
color="primary"
|
||||||
|
variant="table"
|
||||||
|
default-value="static"
|
||||||
|
:items="backgroundTypeSelection"
|
||||||
|
orientation="horizontal"
|
||||||
|
/>
|
||||||
|
</UFormField>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<UFormField
|
||||||
|
label="屏宽"
|
||||||
|
name="backgroundWidthOverride"
|
||||||
|
class="flex-1"
|
||||||
|
>
|
||||||
|
<UInput
|
||||||
|
type="number"
|
||||||
|
v-model="orderState.backgroundWidthOverride"
|
||||||
|
placeholder="1920"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</UFormField>
|
||||||
|
<span class="text-2xl">×</span>
|
||||||
|
<UFormField
|
||||||
|
label="屏高"
|
||||||
|
name="backgroundHeightOverride"
|
||||||
|
class="flex-1"
|
||||||
|
>
|
||||||
|
<UInput
|
||||||
|
type="number"
|
||||||
|
v-model="orderState.backgroundHeightOverride"
|
||||||
|
placeholder="1080"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</UFormField>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { RadioGroupItem } from "@nuxt/ui";
|
||||||
|
|
||||||
|
const { sectionIndex, orderState } = useEventOrder();
|
||||||
|
|
||||||
|
const secIdx = ref(++sectionIndex.value);
|
||||||
|
|
||||||
|
const backgroundTypeSelection = ref<RadioGroupItem[]>([
|
||||||
|
{ label: "静态背景图", value: "static" },
|
||||||
|
{
|
||||||
|
label: "动态背景图",
|
||||||
|
value: "dynamic",
|
||||||
|
description: "由于技术原因，不能保证每次都能对成果进行微调。",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
54
app/components/eventOrder/ProductBidding.vue
Normal file
54
app/components/eventOrder/ProductBidding.vue
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<UCard>
|
||||||
|
<template #header>
|
||||||
|
<h2 class="text-xl font-bold">{{ secIdx }}. 宴会竞标大屏</h2>
|
||||||
|
<p class="text-muted text-sm">
|
||||||
|
自研竞标展示系统，全马首创，适用于宴会、活动、庆典等场合，具备实时竞标显示功能。
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
|
||||||
|
<UCheckbox
|
||||||
|
v-model="orderState.biddingSystem"
|
||||||
|
label="订阅服务"
|
||||||
|
description="包含图片处理 & 宴会当日技术支持（场控 / 协调）"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<UCheckbox
|
||||||
|
v-model="orderState.biddingSystemProvideImage"
|
||||||
|
label="提供照片？"
|
||||||
|
description="活动方将发送标品图片给予本工作室"
|
||||||
|
:class="[orderState.biddingSystem ? '' : 'opacity-0']"
|
||||||
|
:disabled="!orderState.biddingSystem"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<UFormField
|
||||||
|
name="estimatedBidItemCount"
|
||||||
|
label="标品数量预估"
|
||||||
|
:class="[orderState.biddingSystem ? '' : 'opacity-0']"
|
||||||
|
>
|
||||||
|
<USelect
|
||||||
|
v-model="orderState.estimatedBidItemCount"
|
||||||
|
:items="itemCountRanges"
|
||||||
|
placeholder="请选择预估数量区间"
|
||||||
|
:class="['w-full']"
|
||||||
|
:disabled="!orderState.biddingSystem"
|
||||||
|
/>
|
||||||
|
</UFormField>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const { sectionIndex, orderState } = useEventOrder();
|
||||||
|
|
||||||
|
const secIdx = ref(++sectionIndex.value);
|
||||||
|
|
||||||
|
const itemCountRanges = Array.from({ length: 4 }, (_, i) => {
|
||||||
|
const start = 10 + i * 10;
|
||||||
|
const end = start + 10;
|
||||||
|
return { label: `${start} ~ ${end}`, value: `${start}-${end}` };
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
65
app/components/eventOrder/ProductFlowDesign.vue
Normal file
65
app/components/eventOrder/ProductFlowDesign.vue
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<UCard>
|
||||||
|
<template #header>
|
||||||
|
<h2 class="text-xl font-bold">{{ secIdx }}. 流程 PPT 设计</h2>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
|
||||||
|
<UCheckbox
|
||||||
|
v-model="orderState.flowBackgroundDesign"
|
||||||
|
label="订阅服务"
|
||||||
|
description="包含图片处理 & 宴会当日技术支持（场控 / 协调）"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<UFormField
|
||||||
|
name="backgroundSourceProvided"
|
||||||
|
label="是否提供背景设计稿？"
|
||||||
|
:class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
|
||||||
|
>
|
||||||
|
<USwitch
|
||||||
|
v-model="orderState.backgroundSourceProvided"
|
||||||
|
:label="
|
||||||
|
orderState.backgroundSourceProvided
|
||||||
|
? '我将提供背景图片'
|
||||||
|
: '需要重新临摹设计'
|
||||||
|
"
|
||||||
|
:description="
|
||||||
|
orderState.backgroundSourceProvided
|
||||||
|
? '活动方将发送背景设计稿给予本工作室'
|
||||||
|
: '需要工作室重新设计背景图'
|
||||||
|
"
|
||||||
|
:disabled="!orderState.flowBackgroundDesign"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</UFormField>
|
||||||
|
|
||||||
|
<UFormField
|
||||||
|
name="pptDesignQty"
|
||||||
|
label="标品数量预估"
|
||||||
|
:class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
|
||||||
|
>
|
||||||
|
<UInput
|
||||||
|
type="number"
|
||||||
|
v-model="orderState.pptDesignQty"
|
||||||
|
placeholder="请选择预估数量区间"
|
||||||
|
:class="['w-full']"
|
||||||
|
:disabled="!orderState.flowBackgroundDesign"
|
||||||
|
/>
|
||||||
|
</UFormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<p class="text-muted text-sm">
|
||||||
|
包含基础排版与动画，可额外购买内容编排服务（另计）
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</UCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const { sectionIndex, orderState } = useEventOrder();
|
||||||
|
|
||||||
|
const secIdx = ref(++sectionIndex.value);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
25
app/components/eventOrder/ProductSponsor.vue
Normal file
25
app/components/eventOrder/ProductSponsor.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<UCard>
|
||||||
|
<template #header>
|
||||||
|
<h2 class="text-xl font-bold">{{ secIdx }}. 赞助商名册</h2>
|
||||||
|
<p class="text-muted text-sm">
|
||||||
|
附送一个<strong>基础款</strong>手机端电子征信录，可定制（另计）
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
|
||||||
|
<UCheckbox
|
||||||
|
v-model="orderState.sponsorListDesign"
|
||||||
|
label="订阅服务"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const { sectionIndex, orderState } = useEventOrder();
|
||||||
|
|
||||||
|
const secIdx = ref(++sectionIndex.value);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
94
app/composables/eventOrder.ts
Normal file
94
app/composables/eventOrder.ts
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
import * as z from "zod";
|
||||||
|
import { createSharedComposable } from "@vueuse/core";
|
||||||
|
|
||||||
|
export const _useEventOrder = () => {
|
||||||
|
const sectionIndex = ref(0);
|
||||||
|
|
||||||
|
function formatLocalDate(date: Date): string {
|
||||||
|
const y = date.getFullYear();
|
||||||
|
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||||
|
const d = String(date.getDate()).padStart(2, "0");
|
||||||
|
return `${y}-${m}-${d}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const EVENT_LOCATIONS = [
|
||||||
|
"永平区",
|
||||||
|
"周边城市（Batu Pahat / Kluang）",
|
||||||
|
"柔佛州境内",
|
||||||
|
"柔佛州境外",
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
const eventLocationItems = ref<string[]>([...EVENT_LOCATIONS]);
|
||||||
|
|
||||||
|
const orderSchema = z.object({
|
||||||
|
contactName: z.string().min(1, "姓名不能为空"),
|
||||||
|
// 用户可以选择是否使用同一联系方式
|
||||||
|
isSameContact: z.boolean().default(true),
|
||||||
|
contactNumber: z.string().optional(),
|
||||||
|
eventName: z.string().min(1, "活动名称不能为空"),
|
||||||
|
eventDate: z
|
||||||
|
.string()
|
||||||
|
.refine((date) => {
|
||||||
|
return !isNaN(Date.parse(date));
|
||||||
|
}, "无效的日期")
|
||||||
|
.refine((date) => {
|
||||||
|
const eventDate = new Date(date);
|
||||||
|
const today = new Date();
|
||||||
|
// 仅按日期比较（忽略时间）
|
||||||
|
eventDate.setHours(0, 0, 0, 0);
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
// 活动日期必须是今天或未来的日期
|
||||||
|
return eventDate.getTime() >= today.getTime();
|
||||||
|
}, "活动日期必须是今天或未来的日期"),
|
||||||
|
eventLocation: z.enum(EVENT_LOCATIONS),
|
||||||
|
// 服务：竞标系统
|
||||||
|
biddingSystem: z.boolean().default(false),
|
||||||
|
biddingSystemProvideImage: z.boolean().default(false).optional(),
|
||||||
|
estimatedBidItemCount: z.string().optional(),
|
||||||
|
// 服务：背景设计
|
||||||
|
backgroundDesign: z.boolean().default(false),
|
||||||
|
backgroundType: z.enum(["static", "dynamic"]).optional(),
|
||||||
|
backgroundWidthOverride: z.number().optional(),
|
||||||
|
backgroundHeightOverride: z.number().optional(),
|
||||||
|
// 服务：流程 PPT 设计
|
||||||
|
flowBackgroundDesign: z.boolean().default(false),
|
||||||
|
backgroundSourceProvided: z.boolean().default(false), // 如果自己设计的，那么就没有这个额外收费
|
||||||
|
pptDesignQty: z
|
||||||
|
.number()
|
||||||
|
.min(1, "最少都要一张")
|
||||||
|
.max(20, "太多了我来不及做设计"),
|
||||||
|
// 服务：赞助商征信录设计
|
||||||
|
sponsorListDesign: z.boolean().default(false),
|
||||||
|
});
|
||||||
|
|
||||||
|
type OrderForm = z.infer<typeof orderSchema>;
|
||||||
|
|
||||||
|
const orderState = reactive<OrderForm>({
|
||||||
|
contactName: "",
|
||||||
|
isSameContact: true,
|
||||||
|
contactNumber: "",
|
||||||
|
eventName: "",
|
||||||
|
eventDate: formatLocalDate(new Date()),
|
||||||
|
eventLocation: EVENT_LOCATIONS[0],
|
||||||
|
biddingSystem: false,
|
||||||
|
biddingSystemProvideImage: false,
|
||||||
|
estimatedBidItemCount: "30-40",
|
||||||
|
backgroundDesign: false,
|
||||||
|
backgroundType: "static",
|
||||||
|
backgroundWidthOverride: 1920,
|
||||||
|
backgroundHeightOverride: 1080,
|
||||||
|
flowBackgroundDesign: false,
|
||||||
|
backgroundSourceProvided: false,
|
||||||
|
pptDesignQty: 1,
|
||||||
|
sponsorListDesign: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
sectionIndex,
|
||||||
|
eventLocationItems,
|
||||||
|
orderSchema,
|
||||||
|
orderState,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useEventOrder = createSharedComposable(_useEventOrder);
|
||||||
59
app/layouts/default.vue
Normal file
59
app/layouts/default.vue
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
<template>
|
||||||
|
<UApp>
|
||||||
|
<UHeader>
|
||||||
|
<template #left>
|
||||||
|
<div class="text-2xl font-bold">Tootaio Studio</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #right>
|
||||||
|
<UColorModeButton />
|
||||||
|
</template>
|
||||||
|
</UHeader>
|
||||||
|
|
||||||
|
<UMain>
|
||||||
|
<slot />
|
||||||
|
</UMain>
|
||||||
|
|
||||||
|
<UFooter>
|
||||||
|
<template #left>
|
||||||
|
<p class="text-muted text-sm">
|
||||||
|
Copyright © 2021 - {{ new Date().getFullYear() }} Tootaio Studio.
|
||||||
|
All Rights Reserved.
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #right>
|
||||||
|
<UButton
|
||||||
|
v-for="link in socialLink"
|
||||||
|
:key="link.name"
|
||||||
|
:icon="link.icon"
|
||||||
|
color="neutral"
|
||||||
|
variant="ghost"
|
||||||
|
:to="link.link"
|
||||||
|
target="_blank"
|
||||||
|
:aria-label="link.name"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</UFooter>
|
||||||
|
</UApp>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const socialLink = [
|
||||||
|
{
|
||||||
|
name: "Blog Posts",
|
||||||
|
icon: "lucide:globe",
|
||||||
|
link: "https://xiaomai.tootaio.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Official Website",
|
||||||
|
icon: "lucide:mouse-pointer-click",
|
||||||
|
link: "https://tootaio.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "GitHub",
|
||||||
|
icon: "lucide:github",
|
||||||
|
link: "https://github.com/kingsmai",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
29
app/pages/index.vue
Normal file
29
app/pages/index.vue
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<UPageHero
|
||||||
|
title="客制化高定系统"
|
||||||
|
description="以自研技术为核心，专注打造高度定制化的交互展示系统。首创动态竞标与赞助商展示方案，全面支持宴会、活动与颁奖典礼等多场景应用，让每一场盛会更具视觉冲击与品牌价值。"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<UContainer>
|
||||||
|
<UForm :schema="orderSchema" :state="orderState" class="space-y-4">
|
||||||
|
<!-- 联系人信息 -->
|
||||||
|
<EventOrderMetaDetails />
|
||||||
|
<!-- 竞标大屏 -->
|
||||||
|
<EventOrderProductBidding />
|
||||||
|
<!-- 背景设计 -->
|
||||||
|
<EventOrderProductBackgroundDesign />
|
||||||
|
<!-- 致辞 / 流程 PPT 设计 -->
|
||||||
|
<EventOrderProductFlowDesign />
|
||||||
|
<!-- 赞助商名册 -->
|
||||||
|
<EventOrderProductSponsor />
|
||||||
|
</UForm>
|
||||||
|
</UContainer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const { orderSchema, orderState } = useEventOrder();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
@@ -3,4 +3,5 @@ export default defineNuxtConfig({
|
|||||||
compatibilityDate: "2025-07-15",
|
compatibilityDate: "2025-07-15",
|
||||||
devtools: { enabled: true },
|
devtools: { enabled: true },
|
||||||
modules: ["@nuxt/ui"],
|
modules: ["@nuxt/ui"],
|
||||||
|
css: ["~/assets/css/main.css"],
|
||||||
});
|
});
|
||||||
|
|||||||
5
pnpm-workspace.yaml
Normal file
5
pnpm-workspace.yaml
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
onlyBuiltDependencies:
|
||||||
|
- '@parcel/watcher'
|
||||||
|
- '@tailwindcss/oxide'
|
||||||
|
- esbuild
|
||||||
|
- vue-demi
|
||||||
Reference in New Issue
Block a user