Merge pull request 'refactor/migrate-to-nuxtui-v4' (#12 ) from refactor/migrate-to-nuxtui-v4 into main

refactor: 迁移到 @nuxt/ui@4
- https://ui.nuxt.com/docs/getting-started/migration/v4#changes-from-v3
2026-02-10 21:53:30 +08:00 · 2026-02-10 21:51:21 +08:00 · 2026-02-10 21:39:55 +08:00
11 changed files with 1033 additions and 246 deletions
--- a/app/components/ModalAuthentication.vue
+++ b/app/components/ModalAuthentication.vue
@@ -411,7 +411,7 @@ const onForgetPasswordSubmit = (
                  name="mobile"
                  required
                >
-                  <UButtonGroup class="w-full">
+                  <UFieldGroup class="w-full">
                    <UInput
                      v-model="smsForm.mobile"
                      :disabled="final_loading"
@@ -437,7 +437,7 @@ const onForgetPasswordSubmit = (
                      class="text-xs font-bold"
                      color="neutral"
                    />
-                  </UButtonGroup>
+                  </UFieldGroup>
                </UFormField>
                <Transition name="pin-root">
                  <div v-if="sms_triggered">
@@ -485,7 +485,7 @@ const onForgetPasswordSubmit = (
                    name="mobile"
                    required
                  >
-                    <UButtonGroup class="w-full">
+                    <UFieldGroup class="w-full">
                      <UInput
                        v-model="forgetPasswordState.mobile"
                        :disabled="final_loading"
@@ -512,7 +512,7 @@ const onForgetPasswordSubmit = (
                        class="text-xs font-bold"
                        color="neutral"
                      />
-                    </UButtonGroup>
+                    </UFieldGroup>
                  </UFormField>
                  <UFormField
                    label="验证码"
--- a/app/components/aigc/generation/CGTaskCard.client.vue
+++ b/app/components/aigc/generation/CGTaskCard.client.vue
@@ -327,7 +327,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
        </p>
      </div>
      <div class="flex items-end gap-1">
-        <UButtonGroup>
+        <UFieldGroup>
          <UButton
            color="neutral"
            variant="outline"
@@ -411,7 +411,7 @@ const onRetryClick = (course: resp.gen.CourseGenItem) => {
              trailing-icon="i-tabler-dots"
            />
          </UDropdownMenu>
-        </UButtonGroup>
+        </UFieldGroup>
      </div>
    </div>

--- a/app/components/aigc/generation/GBTaskCard.vue
+++ b/app/components/aigc/generation/GBTaskCard.vue
@@ -314,7 +314,7 @@ const startDownload = (url: string, filename: string) => {
            variant="soft"
            @click="emit('delete', video)"
          />
-          <UButtonGroup size="xs">
+          <UFieldGroup size="xs">
            <UButton
              :label="
                downloadingState.subtitle > 0 && downloadingState.subtitle < 100
@@ -374,7 +374,7 @@ const startDownload = (url: string, filename: string) => {
                variant="soft"
              />
            </UDropdownMenu>
-          </UButtonGroup>
+          </UFieldGroup>
        </div>
      </div>
    </div>
--- a/app/components/aigc/generation/TitlesTemplate.vue
+++ b/app/components/aigc/generation/TitlesTemplate.vue
@@ -79,7 +79,7 @@ const closePreview = () => {
        </p>
      </div>
      <div>
-        <UButtonGroup
+        <UFieldGroup
          size="xs"
          v-if="type === 'system'"
        >
@@ -101,7 +101,7 @@ const closePreview = () => {
              color="error"
            />

-            <template #panel="{ close }">
+            <template #content="{ close }">
              <div class="flex flex-col gap-2 p-2">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                  素材删除后不可恢复，确认删除？
@@ -117,7 +117,7 @@ const closePreview = () => {
              </div>
            </template>
          </UPopover>
-        </UButtonGroup>
+        </UFieldGroup>
        <div v-if="type === 'user'">
          <!-- <UButton
            icon="tabler:trash"
@@ -135,7 +135,7 @@ const closePreview = () => {
              size="xs"
            />

-            <template #panel="{ close }">
+            <template #content="{ close }">
              <div class="flex flex-col gap-2 p-2">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                  素材删除后不可恢复，确认删除？
--- a/app/pages/generation/admin/materials.vue
+++ b/app/pages/generation/admin/materials.vue
@@ -885,7 +885,7 @@ const onCreateSubmit = async (
      <!-- 状态筛选 -->
      <div class="mb-4 flex items-center gap-4">
        <span class="text-sm text-gray-600 dark:text-gray-400">状态筛选：</span>
-        <UButtonGroup>
+        <UFieldGroup>
          <UButton
            :color="statusFilter === 0 ? 'primary' : 'neutral'"
            :variant="statusFilter === 0 ? 'solid' : 'ghost'"
@@ -910,7 +910,7 @@ const onCreateSubmit = async (
              }
            "
          />
-        </UButtonGroup>
+        </UFieldGroup>
        <UBadge
          v-if="titlesListResp?.data.total"
          color="primary"
--- a/app/pages/generation/avatar-models.vue
+++ b/app/pages/generation/avatar-models.vue
@@ -338,7 +338,7 @@ const onAvatarUpload = async (files: FileList) => {
          <div
            class="absolute inset-0 flex flex-col items-center justify-center bg-white/50 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 dark:bg-neutral-800/50"
          >
-            <UButtonGroup>
+            <UFieldGroup>
              <UButton
                color="neutral"
                icon="tabler:download"
@@ -353,7 +353,7 @@ const onAvatarUpload = async (files: FileList) => {
                  }
                "
              />
-            </UButtonGroup>
+            </UFieldGroup>
            <span
              class="pt-4 text-xs font-medium text-neutral-400 dark:text-neutral-300"
            >
--- a/app/pages/generation/green-screen.vue
+++ b/app/pages/generation/green-screen.vue
@@ -131,7 +131,7 @@ onMounted(() => {
        "
      >
        <template #action>
-          <UButtonGroup size="md">
+          <UFieldGroup size="md">
            <UInput
              id="input-search"
              v-model="searchInput"
@@ -151,7 +151,7 @@ onMounted(() => {
                />
              </template>
            </UInput>
-          </UButtonGroup>
+          </UFieldGroup>
          <UButton
            id="button-create"
            :trailing="false"
--- a/app/pages/generation/ppt-templates.vue
+++ b/app/pages/generation/ppt-templates.vue
@@ -476,7 +476,7 @@ const onDeleteCat = (cat: PPTCategory) => {

          <div class="space-y-4">
            <UFormField label="创建分类">
-              <UButtonGroup
+              <UFieldGroup
                orientation="horizontal"
                class="w-full"
                size="lg"
@@ -493,7 +493,7 @@ const onDeleteCat = (cat: PPTCategory) => {
                  :disabled="!createCatInput"
                  @click="onCreateCat"
                />
-              </UButtonGroup>
+              </UFieldGroup>
            </UFormField>
            <div class="rounded-md border dark:border-neutral-700">
              <UTable
--- a/app/pages/user/authenticate.vue
+++ b/app/pages/user/authenticate.vue
@@ -440,7 +440,7 @@ onMounted(() => {
                name="mobile"
                required
              >
-                <UButtonGroup class="w-full">
+                <UFieldGroup class="w-full">
                  <UInput
                    v-model="smsForm.mobile"
                    :disabled="final_loading"
@@ -467,7 +467,7 @@ onMounted(() => {
                    color="neutral"
                    variant="outline"
                  />
-                </UButtonGroup>
+                </UFieldGroup>
              </UFormField>
              <Transition name="pin-root">
                <div
@@ -518,7 +518,7 @@ onMounted(() => {
                  name="mobile"
                  required
                >
-                  <UButtonGroup class="w-full">
+                  <UFieldGroup class="w-full">
                    <UInput
                      v-model="forgetPasswordState.mobile"
                      :disabled="final_loading"
@@ -543,7 +543,7 @@ onMounted(() => {
                      class="text-xs font-bold"
                      color="neutral"
                    />
-                  </UButtonGroup>
+                  </UFieldGroup>
                </UFormField>
                <UFormField
                  label="验证码"
--- a/package.json
+++ b/package.json
@@ -31,33 +31,39 @@
    "idb-keyval": "^6.2.1",
    "markdown-it": "^14.1.0",
    "nuxt": "^4.3.1",
-    "nuxt-driver.js": "^0.0.11",
+    "nuxt-driver.js": "^0.0.24",
+    "pinia": "^3.0.4",
    "pinia-plugin-persistedstate": "^4.7.1",
    "radix-vue": "^1.9.2",
    "v-calendar": "^3.1.2",
-    "vue": "^3.4.34",
+    "vue": "^3.5.28",
    "vue-router": "^4.4.0",
    "yup": "^1.4.0"
  },
  "devDependencies": {
-    "@nuxt/ui": "^3.3.7",
+    "@nuxt/ui": "^4.4.0",
    "@nuxtjs/google-fonts": "^3.2.0",
    "@pinia/nuxt": "^0.11.3",
-    "@tailwindcss/typography": "^0.5.13",
+    "@tailwindcss/typography": "^0.5.19",
    "@types/markdown-it": "^13.0.9",
    "@types/node": "^25.2.2",
    "@vite-pwa/nuxt": "^1.1.1",
-    "@vueuse/core": "^14.2.0",
-    "@vueuse/nuxt": "^14.2.0",
+    "@vueuse/core": "^14.2.1",
+    "@vueuse/nuxt": "^14.2.1",
    "dayjs-nuxt": "^2.1.11",
    "oxfmt": "^0.28.0",
    "oxlint": "^1.43.0",
-    "sass": "^1.77.8",
+    "sass": "^1.97.3",
    "tailwindcss": "^4.1.18",
    "typescript": "^5.9.3"
  },
  "peerDependencies": {
    "dayjs": "^1.11.19"
  },
-  "packageManager": "pnpm@10.22.0"
+  "packageManager": "pnpm@10.22.0",
+  "pnpm": {
+    "overrides": {
+      "citty": "0.1.6"
+    }
+  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
Timothy Yin	5e1839b305	Merge pull request 'refactor/migrate-to-nuxtui-v4' (#12 ) from refactor/migrate-to-nuxtui-v4 into main	2026-02-10 21:53:30 +08:00
Timothy Yin	fa756d8c97	refactor: 迁移到 @nuxt/ui@4 - https://ui.nuxt.com/docs/getting-started/migration/v4#changes-from-v3	2026-02-10 21:51:21 +08:00
Timothy Yin	8198c853c9	chore(deps): 更新依赖，修复 peerDeps 关系	2026-02-10 21:39:55 +08:00