├── nuxt
    ├── public
    │   ├── sw.js
    │   └── favicon.ico
    └── app
    │   ├── index.d.ts
    │   ├── pages
    │       ├── account
    │       │   ├── index.vue
    │       │   ├── general.vue
    │       │   ├── devices.vue
    │       │   └── log.vue
    │       ├── auth
    │       │   ├── login.vue
    │       │   ├── register.vue
    │       │   ├── forgot.vue
    │       │   ├── verify.vue
    │       │   └── reset
    │       │   │   └── [token].vue
    │       ├── index.vue
    │       ├── account.vue
    │       ├── price.vue
    │       ├── workflow.vue
    │       └── bot.vue
    │   ├── middleware
    │       ├── auth.ts
    │       ├── guest.ts
    │       ├── role-user.ts
    │       ├── role-admin.ts
    │       └── verified.ts
    │   ├── app.config.ts
    │   ├── plugins
    │       ├── arco-design.ts
    │       ├── fetchSettings.ts
    │       └── app.ts
    │   ├── components
    │       ├── app
    │       │   ├── Logo.vue
    │       │   ├── Footer.vue
    │       │   ├── Theme.vue
    │       │   ├── Header.vue
    │       │   └── Signin.vue
    │       ├── modal
    │       │   └── User.vue
    │       ├── home
    │       │   ├── Welcome.vue
    │       │   ├── Demo.vue
    │       │   └── Tetris.vue
    │       ├── auth
    │       │   ├── ForgotPassword.vue
    │       │   ├── Register.vue
    │       │   └── Login.vue
    │       ├── account
    │       │   ├── About.vue
    │       │   ├── UpdateProfile.vue
    │       │   └── UpdatePassword.vue
    │       └── input
    │       │   └── UploadImage.vue
    │   ├── assets
    │       └── css
    │       │   ├── main.css
    │       │   ├── arco.css
    │       │   ├── dark.css
    │       │   └── style.min.css
    │   ├── app.vue
    │   ├── stores
    │       ├── settings.ts
    │       └── auth.ts
    │   └── error.vue
├── tsconfig.json
├── .gitattributes
├── .editorconfig
├── .gitignore
├── .vscode
    └── settings.json
├── package.json
├── .env.example
├── nuxt.config.ts
└── README.md


/nuxt/public/sw.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/nuxt/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onenov/ChatBot-Next/HEAD/nuxt/public/favicon.ico


--------------------------------------------------------------------------------
/nuxt/app/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module '#app' {
2 |   interface NuxtApp {
3 |     $storage(msg: string): string
4 |   }
5 | }
6 | 
7 | export { }


--------------------------------------------------------------------------------
/nuxt/app/pages/account/index.vue:
--------------------------------------------------------------------------------
1 | <script lang="ts" setup>
2 | definePageMeta({
3 |   redirect: "/account/general",
4 | });
5 | </script>
6 | <template></template>
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./nuxt/.nuxt/tsconfig.json",
4 |   "compilerOptions": {
5 |     "module": "ESNext"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | * text=auto eol=lf
 2 | 
 3 | *.blade.php diff=html
 4 | *.css diff=css
 5 | *.html diff=html
 6 | *.md diff=markdown
 7 | *.php diff=php
 8 | 
 9 | /.github export-ignore
10 | CHANGELOG.md export-ignore
11 | .styleci.yml export-ignore
12 | 


--------------------------------------------------------------------------------
/nuxt/app/middleware/auth.ts:
--------------------------------------------------------------------------------
1 | export default defineNuxtRouteMiddleware((to, from) => {
2 |   const nuxtApp = useNuxtApp()
3 |   const auth = useAuthStore()
4 | 
5 |   if (!auth.logged) {
6 |     return nuxtApp.runWithContext(() => navigateTo('/'))
7 |   }
8 | })
9 | 


--------------------------------------------------------------------------------
/nuxt/app/middleware/guest.ts:
--------------------------------------------------------------------------------
1 | export default defineNuxtRouteMiddleware((to, from) => {
2 |   const nuxtApp = useNuxtApp()
3 |   const auth = useAuthStore()
4 | 
5 |   if (auth.logged) {
6 |     return nuxtApp.runWithContext(() => navigateTo('/'))
7 |   }
8 | })
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | indent_size = 4
 7 | indent_style = space
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 
14 | [*.{ts,js,vue}]
15 | indent_size = 2
16 | 


--------------------------------------------------------------------------------
/nuxt/app/app.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineAppConfig({
 2 |   ui: {
 3 |     primary: "emerald",
 4 |     strategy: "override",
 5 |     gray: "neutral",
 6 |     container: {
 7 |       constrained: "max-w-screen-2xl w-full",
 8 |     },
 9 |     avatar: {
10 |       default: {
11 |         icon: "i-heroicons-user",
12 |       },
13 |     },
14 |   },
15 | });
16 | 


--------------------------------------------------------------------------------
/nuxt/app/plugins/arco-design.ts:
--------------------------------------------------------------------------------
 1 | import ArcoVue from "@arco-design/web-vue";
 2 | // 此处引入css则不需要在nuxt.config.ts配置
 3 | import "@arco-design/web-vue/dist/arco.css";
 4 | import ArcoVueIcon from '@arco-design/web-vue/es/icon';
 5 | 
 6 | export default defineNuxtPlugin((nuxtApp) => {
 7 |     nuxtApp.vueApp.use(ArcoVue);
 8 |     nuxtApp.vueApp.use(ArcoVueIcon);
 9 | 
10 | });
11 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/auth/login.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | definePageMeta({
 3 |   middleware: ['guest'],
 4 | });
 5 | 
 6 | useSeoMeta({
 7 |   title: '登陆',
 8 | })
 9 | </script>
10 | <template>
11 |   <HomeTetris />
12 |   <UCard class="w-full max-w-md mx-auto my-20 z-[99]">
13 |     <h1 class="text-3xl font-black mb-6 leading-tight tracking-tight">登陆</h1>
14 |     <AuthLogin />
15 |   </UCard>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/auth/register.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | definePageMeta({
 3 |   middleware: ['guest'],
 4 | });
 5 | 
 6 | useSeoMeta({
 7 |   title: '注册',
 8 | })
 9 | </script>
10 | <template>
11 |   <HomeTetris />
12 |   <UCard class="w-full max-w-md mx-auto my-20 z-[40]">
13 |     <h1 class="text-3xl font-black mb-6 leading-tight tracking-tight">注册</h1>
14 |     <AuthRegister />
15 |   </UCard>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/auth/forgot.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | definePageMeta({
 3 |   middleware: ['guest'],
 4 | });
 5 | 
 6 | useSeoMeta({
 7 |   title: '重置密码',
 8 | })
 9 | </script>
10 | <template>
11 |   <HomeTetris />
12 |   <UCard class="w-full max-w-md mx-auto my-20 z-[99]">
13 |     <h1 class="text-3xl font-black mb-6 leading-tight tracking-tight">重置密码</h1>
14 |     <AuthForgotPassword />
15 |   </UCard>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ModalUser } from '#components'
 3 | 
 4 | const modal = useModal();
 5 | const router = useRouter();
 6 | const auth = useAuthStore();
 7 | 
 8 | function openUserModal() {
 9 |   modal.open(ModalUser)
10 | }
11 | 
12 | useSeoMeta({
13 |   title: 'Home',
14 | })
15 | 
16 | </script>
17 | 
18 | <template>
19 |   <HomeWelcome />
20 |   <HomeDemo />
21 | </template>
22 | <style scoped></style>
23 | 


--------------------------------------------------------------------------------
/nuxt/app/middleware/role-user.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtRouteMiddleware((to, from) => {
 2 |   const nuxtApp = useNuxtApp()
 3 |   const auth = useAuthStore()
 4 | 
 5 |   if (auth.logged && !auth.user.roles.includes('user')) {
 6 |     return nuxtApp.runWithContext(() => {
 7 |       useToast().add({
 8 |         icon: "i-heroicons-exclamation-circle-solid",
 9 |         title: "Access denied.",
10 |         color: "red",
11 |       });
12 | 
13 |       return navigateTo('/')
14 |     })
15 |   }
16 | })
17 | 


--------------------------------------------------------------------------------
/nuxt/app/middleware/role-admin.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtRouteMiddleware((to, from) => {
 2 |   const nuxtApp = useNuxtApp()
 3 |   const auth = useAuthStore()
 4 | 
 5 |   if (auth.logged && !auth.user.roles.includes('admin')) {
 6 |     return nuxtApp.runWithContext(() => {
 7 |       useToast().add({
 8 |         icon: "i-heroicons-exclamation-circle-solid",
 9 |         title: "Access denied.",
10 |         color: "red",
11 |       });
12 | 
13 |       return navigateTo('/')
14 |     })
15 |   }
16 | })
17 | 


--------------------------------------------------------------------------------
/nuxt/app/middleware/verified.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtRouteMiddleware((to, from) => {
 2 |   const nuxtApp = useNuxtApp()
 3 |   const auth = useAuthStore()
 4 | 
 5 |   if (auth.logged && auth.user.must_verify_email) {
 6 |     return nuxtApp.runWithContext(() => {
 7 |       useToast().add({
 8 |         icon: "i-heroicons-exclamation-circle-solid",
 9 |         title: "Please confirm your email.",
10 |         color: "red",
11 |       });
12 | 
13 |       return navigateTo('/account/general')
14 |     })
15 |   }
16 | })
17 | 


--------------------------------------------------------------------------------
/nuxt/app/components/app/Logo.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { storeToRefs } from 'pinia';
 3 | import { useSettingsStore } from '@/stores/settings';
 4 | 
 5 | const settingsStore = useSettingsStore();
 6 | const { settings } = storeToRefs(settingsStore);
 7 | </script>
 8 | 
 9 | <template>
10 |   <div>
11 |     <NuxtLink to="/" class="font-black text-2xl leading-tight tracking-tight">
12 |       <span class="text-gray-700 dark:text-gray-100">{{ settings.Web_Title }}</span>
13 |       <span class="text-primary-500">Next</span>
14 |     </NuxtLink>
15 |   </div>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/nuxt/app/assets/css/main.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |     #__nuxt {
 7 |         @apply min-h-screen flex flex-col;
 8 |     }
 9 | 
10 |     html {
11 |         @apply text-gray-800 dark:bg-gray-900;
12 |     }
13 | 
14 |     html.dark {
15 |         @apply text-gray-50 bg-gray-900;
16 |     }
17 | 
18 |     button,
19 |     a,
20 |     [role="button"] {
21 |         @apply transition-colors;
22 |     }
23 | 
24 |     input[type="checkbox"],
25 |     input[type="radio"] {
26 |         @apply transition-all;
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/nuxt/app/app.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup></script>
 2 | 
 3 | <template>
 4 |   <AppHeader />
 5 | 
 6 |   <UContainer as="main" class="flex-grow py-4 sm:py-7 flex flex-col">
 7 |     <NuxtPage />
 8 |   </UContainer>
 9 | 
10 |   <AppFooter />
11 | 
12 |   <NuxtLoadingIndicator class="!opacity-100" :throttle="0" />
13 | 
14 |   <UModals />
15 | 
16 |   <UNotifications>
17 |     <template #title="{ title }">
18 |       <span v-html="title" />
19 |     </template>
20 |     <template #description="{ description }">
21 |       <span v-html="description" />
22 |     </template>
23 |   </UNotifications>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/nuxt/app/components/app/Footer.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { storeToRefs } from 'pinia';
 3 | import { useSettingsStore } from '@/stores/settings';
 4 | 
 5 | const settingsStore = useSettingsStore();
 6 | const { settings } = storeToRefs(settingsStore);
 7 | </script>
 8 | <template>
 9 |   <footer class="bg-background/75 border-t border-dashed border-gray-200/80 dark:border-gray-800/80">
10 |     <UContainer class="flex justify-between py-4 text-sm">
11 |       <span> {{ settings.Web_Title }} {{ new Date().getFullYear() }} </span>
12 |       <NuxtLink to="https://orence.net" target="_blank"> ORENCE </NuxtLink>
13 |     </UContainer>
14 |   </footer>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/nuxt/app/stores/settings.ts:
--------------------------------------------------------------------------------
 1 | // nuxt/app/stores/settings.ts
 2 | import { defineStore } from "pinia";
 3 | 
 4 | interface Settings {
 5 |   Web_Title: string;
 6 |   Web_Description: string;
 7 |   Web_URL: string;
 8 |   Web_Logo: string;
 9 |   Dify_Api: string;
10 |   Dify_Token: string;
11 | }
12 | 
13 | export const useSettingsStore = defineStore("settings", {
14 |   state: (): { settings: Settings } => ({
15 |     settings: {
16 |       Web_Title: "",
17 |       Web_Description: "",
18 |       Web_URL: "",
19 |       Web_Logo: "",
20 |       Dify_Api: "",
21 |       Dify_Token: "",
22 |     },
23 |   }),
24 |   actions: {
25 |     setSettings(settings: Settings) {
26 |       this.settings = settings;
27 |     },
28 |   },
29 | });
30 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | /.phpunit.cache
 2 | /node_modules
 3 | /public/build
 4 | /public/hot
 5 | /public/storage
 6 | /public/.well-known
 7 | /storage/*.key
 8 | /vendor
 9 | /public/vendor
10 | .env
11 | .env.backup
12 | .env.production
13 | .phpunit.result.cache
14 | Homestead.json
15 | Homestead.yaml
16 | auth.json
17 | npm-debug.log
18 | yarn-error.log
19 | yarn.lock
20 | /.fleet
21 | /.idea
22 | /.vscode/*
23 | !/.vscode/settings.json
24 | .npmrc
25 | 
26 | # Nuxt dev/build outputs
27 | /nuxt/.nuxt
28 | /nuxt/.output
29 | .output
30 | .data
31 | .nuxt
32 | .nitro
33 | .cache
34 | dist
35 | 
36 | # Node dependencies
37 | node_modules
38 | 
39 | # Logs
40 | logs
41 | *.log
42 | 
43 | # Misc
44 | .DS_Store
45 | .fleet
46 | .idea
47 | 
48 | # Local env files
49 | .env
50 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/account.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | definePageMeta({
 3 |   middleware: ["auth"],
 4 | });
 5 | 
 6 | const links = [
 7 |   [
 8 |     {
 9 |       label: "个人中心",
10 |       icon: "i-heroicons-user",
11 |       to: "/account/general",
12 |     },
13 |     {
14 |       label: "消耗总览",
15 |       to: "/account/log",
16 |       icon: "i-heroicons-clock",
17 |     },
18 |     {
19 |       label: "登陆历史",
20 |       icon: "i-heroicons-device-phone-mobile",
21 |       to: "/account/devices",
22 |     },
23 |   ],
24 | ];
25 | </script>
26 | <template>
27 |   <NuxtLayout>
28 |     <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800 mb-4" />
29 |     <NuxtPage class="col-span-10 md:col-span-8" />
30 |   </NuxtLayout>
31 | </template>
32 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files.associations": {
 3 |     "*.css": "tailwindcss"
 4 |   },
 5 |   "editor.quickSuggestions": {
 6 |     "strings": true
 7 |   },
 8 |   "tailwindCSS.experimental.classRegex": [
 9 |     [
10 |       "ui:\\s*{([^)]*)\\s*}",
11 |       "[\"'`]([^\"'`]*).*?[\"'`]"
12 |     ],
13 |     [
14 |       "/\\*ui\\*/\\s*{([^;]*)}",
15 |       ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"
16 |     ]
17 |   ],
18 |   "tailwindCSS.classAttributes": [
19 |     "class",
20 |     "className",
21 |     "ngClass",
22 |     "ui"
23 |   ],
24 |   "typescript.tsdk": "node_modules/typescript/lib",
25 |   "vue3snippets.enable-compile-vue-file-on-did-save-code": true,
26 |   "intelephense.completion.maxItems": 200,
27 |   "editor.formatOnSave": true,
28 |   "intelephense.format.enable": true,
29 | }


--------------------------------------------------------------------------------
/nuxt/app/components/modal/User.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const modal = useModal()
 3 | const auth = useAuthStore();
 4 | </script>
 5 | <template>
 6 |   <UModal prevent-close>
 7 |     <UCard>
 8 |       <template #header>
 9 |         <div class="flex items-center justify-between">
10 |           <div class="text-2xl leading-tight font-black">Hello；{{ auth.user.name }}</div>
11 |           <UButton icon="i-heroicons-x-mark-20-solid" @click="modal.close" color="gray" />
12 |         </div>
13 | 
14 |       </template>
15 | 
16 |       <UCard>
17 |         <div class="font-bold text-lg leading-tight tracking-tighter mb-4">
18 |           User Object
19 |         </div>
20 |         <pre>{{ auth.user }}</pre>
21 |       </UCard>
22 | 
23 |     </UCard>
24 |   </UModal>
25 | </template>
26 | 


--------------------------------------------------------------------------------
/nuxt/app/error.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |   error: Object,
 4 | });
 5 | 
 6 | const handleError = () => clearError({ redirect: "/" });
 7 | 
 8 | useSeoMeta({
 9 |   title: 'Error',
10 | })
11 | </script>
12 | 
13 | <template>
14 |   <HomeTetris />
15 |   <UContainer class="py-5 flex items-center justify-center z-[100]">
16 |     <AppLogo />
17 |   </UContainer>
18 |   <UContainer class="flex-grow flex flex-col items-center justify-center space-y-5 z-[100]">
19 |     <h1 class="text-9xl font-bold">{{ error?.statusCode }}</h1>
20 |     <div>{{ error?.message }}</div>
21 |     <div v-if="error?.statusCode >= 500" v-html="error?.stack"></div>
22 |     <div>
23 |       <UButton @click="handleError" size="xl" variant="outline" label="Go back" />
24 |     </div>
25 |   </UContainer>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/nuxt/app/components/app/Theme.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref, computed, onMounted } from 'vue';
 3 | const colorMode = useColorMode();
 4 | const isDark = computed({
 5 |   get() {
 6 |     return colorMode.value === "dark";
 7 |   },
 8 |   set(value: boolean) {
 9 |     colorMode.preference = value ? "dark" : "light";
10 |     document.body.setAttribute('arco-theme', value ? 'dark' : 'light');
11 |     // Log the current arco-theme value
12 |     // console.log('arco-theme set to:', value ? 'dark' : 'light');
13 |   },
14 | });
15 | 
16 | onMounted(() => {
17 |   document.body.setAttribute('arco-theme', colorMode.value === 'dark' ? 'dark' : 'light');
18 |   // Log the initial arco-theme value
19 |   // console.log('arco-theme on mount:', colorMode.value === 'dark' ? 'dark' : 'light');
20 | });
21 | </script>
22 | 
23 | <template>
24 |   <ClientOnly>
25 |     <UButton :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'" color="gray" variant="soft"
26 |       aria-label="Theme" @click="isDark = !isDark" />
27 |     <template #fallback>
28 |       <USkeleton class="w-8 h-8 rounded-md" />
29 |     </template>
30 |   </ClientOnly>
31 | </template>
32 | 


--------------------------------------------------------------------------------
/nuxt/app/components/home/Welcome.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 
 3 | </script>
 4 | 
 5 | <template>
 6 | 
 7 |   <ULandingHero class="z-40 py-40">
 8 |     <template #headline>
 9 |       <UBadge color="primary" variant="subtle">测试预览版 v1.0.1</UBadge>
10 |     </template>
11 |     <template #title>
12 |       <span>ChatBot </span><span class="text-primary-500">Next</span>
13 |     </template>
14 |     <template #description>
15 |       <div class="">提供从 Agent 构建到 AI workflow 编排、RAG 检索、模型管理等能力，轻松构建和运营生成式 AI 原生应用。<br>简化了令人惊叹且响应迅速的 ChatBot 应用程序的创建。
16 |       </div>
17 |     </template>
18 |     <div class="flex flex-wrap gap-x-6 gap-y-3 justify-center">
19 |       <NuxtLink to="/workflow">
20 |         <UButton size="lg" color="primary" variant="solid" :trailing="false"> 立即开始
21 |           <UIcon name="i-heroicons-chevron-right" />
22 |         </UButton>
23 |       </NuxtLink>
24 |       <NuxtLink to="https://nov.craft.me/Hd9T8EOH0PDXD3" target="_blank">
25 |         <UButton size="lg" color="primary" variant="solid" :trailing="false"> 文档
26 |           <UIcon name="i-heroicons-document-text" />
27 |         </UButton>
28 |       </NuxtLink>
29 |     </div>
30 |   </ULandingHero>
31 |   <HomeTetris />
32 | </template>
33 | 


--------------------------------------------------------------------------------
/nuxt/app/plugins/fetchSettings.ts:
--------------------------------------------------------------------------------
 1 | // nuxt/app/plugins/fetchSettings.ts
 2 | import { defineNuxtPlugin, useRuntimeConfig } from "#app";
 3 | import { useSettingsStore } from "~/stores/settings";
 4 | 
 5 | export default defineNuxtPlugin(async (nuxtApp) => {
 6 |   const settingsStore = useSettingsStore(nuxtApp.$pinia);
 7 |   const config = useRuntimeConfig();
 8 | 
 9 |   try {
10 |     const { data, error } = await useFetch(
11 |       `${config.public.apiBase}${config.public.apiPrefix}/get_settings`,
12 |       {
13 |         method: "POST",
14 |         headers: {
15 |           "Content-Type": "application/json",
16 |         },
17 |         body: JSON.stringify({
18 |           /* 可以在这里添加请求体 */
19 |         }),
20 |       }
21 |     );
22 | 
23 |     if (error.value) {
24 |       console.error("Error fetching settings:", error.value);
25 |       return;
26 |     }
27 | 
28 |     if (!data.value) {
29 |       console.error("Failed to fetch settings: No data returned");
30 |       return;
31 |     }
32 | 
33 |     settingsStore.setSettings(data.value);
34 |     // console.log("Settings fetched and stored:", data.value);
35 |   } catch (error) {
36 |     console.error("Failed to fetch settings:", error);
37 |   }
38 | });
39 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/auth/verify.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | definePageMeta({
 3 |   validate: (route) => !!route.query.verify_url,
 4 | });
 5 | 
 6 | const route = useRoute();
 7 | const auth = useAuthStore();
 8 | 
 9 | const { pending, error } = useLazyFetch<any>(route.query.verify_url as string, {
10 |   async onResponse({ response }) {
11 |     if (response._data?.ok) {
12 |       await auth.fetchUser();
13 |     }
14 |   },
15 | });
16 | 
17 | useSeoMeta({
18 |   title: 'Email Verification',
19 | })
20 | </script>
21 | <template>
22 |   <UCard class="w-full max-w-md mx-auto my-20">
23 |     <div class="space-y-4">
24 |       <h1
25 |         class="text-3xl font-black leading-tight tracking-tight flex items-center gap-2"
26 |       >
27 |         Email Verification
28 |         <UIcon v-if="pending" name="i-heroicons-arrow-path-solid" class="animate-spin" />
29 |         <span v-else-if="error" class="text-red-500">Error</span>
30 |         <span v-else class="text-emerald-500">Done</span>
31 |       </h1>
32 |       <div v-if="error && error.data?.message">{{ error.data?.message }}</div>
33 | 
34 |       <div class="text-sm">
35 |         <NuxtLink class="text-sm" to="/">Back to Home</NuxtLink>
36 |       </div>
37 |     </div>
38 |   </UCard>
39 | </template>
40 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/account/general.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | useSeoMeta({
 3 |   title: 'Account',
 4 | })
 5 | </script>
 6 | <template>
 7 |   <UCard :ui="{ body: { base: 'grid grid-cols-12 gap-6 md:gap-8' } }">
 8 |     <div class="col-span-12 lg:col-span-4">
 9 |       <div class="text-lg font-semibold mb-2">基本信息</div>
10 |       <div class="text-sm opacity-80">
11 |         了解你的用户等级，配额、剩余额度和有效期
12 |       </div>
13 |     </div>
14 |     <div class="col-span-12 lg:col-span-8">
15 |       <AccountAbout />
16 |     </div>
17 |     <UDivider class="col-span-12" />
18 |     <div class="col-span-12 lg:col-span-4">
19 |       <div class="text-lg font-semibold mb-2">简介</div>
20 |       <div class="text-sm opacity-80">
21 |         更新您的个人资料信息和电子邮件地址。
22 |       </div>
23 |     </div>
24 |     <div class="col-span-12 lg:col-span-8">
25 |       <AccountUpdateProfile />
26 |     </div>
27 |     <UDivider class="col-span-12" />
28 |     <div class="col-span-12 lg:col-span-4">
29 |       <div class="text-lg font-semibold mb-2">更新密码</div>
30 |       <div class="text-sm opacity-80">
31 |         确保您的帐户使用长而随机的密码以保持安全。
32 |       </div>
33 |     </div>
34 |     <div class="col-span-12 lg:col-span-8">
35 |       <AccountUpdatePassword />
36 |     </div>
37 |   </UCard>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "laravel-nuxt",
 3 |     "private": true,
 4 |     "type": "module",
 5 |     "scripts": {
 6 |         "serve": "node nuxt/.output/server/index.mjs",
 7 |         "build": "nuxi cleanup && nuxi build",
 8 |         "cleanup": "nuxi cleanup",
 9 |         "dev": "nuxt dev",
10 |         "generate": "nuxt generate",
11 |         "preview": "nuxt preview",
12 |         "postinstall": "nuxt prepare",
13 |         "api": "php artisan octane:start --watch"
14 |     },
15 |     "devDependencies": {
16 |         "@arco-design/web-vue": "^2.55.3",
17 |         "@iconify-json/heroicons": "^1.1.21",
18 |         "@iconify/vue": "^4.1.2",
19 |         "@nuxt/devtools": "^1.3.9",
20 |         "@nuxt/image": "^1.7.0",
21 |         "@nuxt/ui": "^2.17.0",
22 |         "@pinia/nuxt": "^0.5.1",
23 |         "chokidar": "^3.6.0",
24 |         "dayjs-nuxt": "^2.1.9",
25 |         "nuxt": "^3.12.3",
26 |         "nuxt-security": "^1.4.3",
27 |         "vue": "^3.4.31",
28 |         "vue-router": "^4.4.0"
29 |     },
30 |     "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
31 |     "dependencies": {
32 |         "@nuxt/ui-pro": "^1.3.2",
33 |         "axios": "^1.7.2"
34 |     }
35 | }


--------------------------------------------------------------------------------
/nuxt/app/components/auth/ForgotPassword.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const form = ref();
 3 | 
 4 | const state = reactive({
 5 |   email: "",
 6 | });
 7 | 
 8 | const { refresh: onSubmit, status: forgotStatus } = useFetch<any>("forgot-password", {
 9 |   method: "POST",
10 |   body: state,
11 |   immediate: false,
12 |   watch: false,
13 |   async onResponse({ response }) {
14 |     if (response?.status === 422) {
15 |       form.value.setErrors(response._data?.errors);
16 |     } else if (response._data?.ok) {
17 |       useToast().add({
18 |         title: "Success",
19 |         description: response._data.message,
20 |         color: "emerald",
21 |       });
22 |     }
23 |   }
24 | });
25 | </script>
26 | 
27 | <template>
28 | 
29 |   <div class="space-y-4 z-[40]">
30 |     <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
31 |       <UFormGroup label="Email" name="email" required>
32 |         <UInput v-model="state.email" placeholder="you@example.com" icon="i-heroicons-envelope" trailing type="email"
33 |           autofocus />
34 |       </UFormGroup>
35 | 
36 |       <div class="flex items-center justify-end space-x-4">
37 |         <UButton type="submit" label="发送重置链接" :loading="forgotStatus === 'pending'" />
38 |       </div>
39 |     </UForm>
40 | 
41 |     <div class="text-sm">
42 |       <NuxtLink class="text-sm" to="/auth/login">返回登陆</NuxtLink>
43 |     </div>
44 |   </div>
45 | </template>
46 | 


--------------------------------------------------------------------------------
/nuxt/app/stores/auth.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | 
 3 | export type User = {
 4 |   ulid: string;
 5 |   name: string;
 6 |   email: string;
 7 |   avatar: string;
 8 |   must_verify_email: boolean;
 9 |   has_password: boolean;
10 |   roles: string[];
11 |   providers: string[];
12 | }
13 | 
14 | export const useAuthStore = defineStore('auth', () => {
15 |   const config = useRuntimeConfig()
16 |   const nuxtApp = useNuxtApp()
17 | 
18 |   const user = ref(<User>{});
19 |   const token = useCookie('token', {
20 |     path: '/',
21 |     sameSite: 'strict',
22 |     secure: config.public.apiBase.startsWith('https://'),
23 |     maxAge: 60 * 60 * 24 * 365
24 |   })
25 |   const logged = computed(() => !!token.value)
26 | 
27 |   const { refresh: logout } = useFetch<any>('logout', {
28 |     method: 'POST',
29 |     immediate: false,
30 |     onResponse({ response }) {
31 |       if (response.status === 200) {
32 |         token.value = ''
33 |         user.value = <User>{}
34 | 
35 |         nuxtApp.runWithContext(() => {
36 |           return navigateTo('/');
37 |         })
38 |       }
39 |     }
40 |   })
41 | 
42 |   const { refresh: fetchUser } = useFetch<any>('user', {
43 |     immediate: false,
44 |     onResponse({ response }) {
45 |       if (response.status === 200) {
46 |         user.value = response._data.user
47 |       }
48 |     }
49 |   })
50 | 
51 |   return { user, logged, logout, fetchUser, token }
52 | })
53 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
 1 | APP_NAME=ChatBotNext
 2 | APP_ENV=local
 3 | APP_KEY=base64:+HevWQcC4/rAz01YPSbbnA==
 4 | APP_DEBUG=true
 5 | APP_TIMEZONE=Asia/Shanghai
 6 | APP_SERVICE=laravelnuxt.api
 7 | APP_URL=http://localhost:8000
 8 | API_LOCAL_URL=http://localhost:8000
 9 | FRONTEND_URL=http://localhost:3000
10 | 
11 | OCTANE_HOST=localhost
12 | OCTANE_PORT=8000
13 | HOST=localhost
14 | PORT=3000
15 | 
16 | APP_LOCALE=zh_CN
17 | APP_FALLBACK_LOCALE=zh_CN
18 | APP_FAKER_LOCALE=zh_CN
19 | 
20 | AUTH_GUARD=api
21 | 
22 | APP_MAINTENANCE_DRIVER=file
23 | APP_MAINTENANCE_STORE=database
24 | 
25 | BCRYPT_ROUNDS=12
26 | 
27 | LOG_CHANNEL=stack
28 | LOG_STACK=single
29 | LOG_DEPRECATIONS_CHANNEL=null
30 | LOG_LEVEL=debug
31 | 
32 | DB_CONNECTION=sqlite
33 | # DB_HOST=127.0.0.1
34 | # DB_PORT=3306
35 | # DB_DATABASE=laravel
36 | # DB_USERNAME=root
37 | # DB_PASSWORD=
38 | 
39 | SESSION_DRIVER=database
40 | SESSION_LIFETIME=120
41 | SESSION_ENCRYPT=false
42 | SESSION_PATH=/
43 | SESSION_DOMAIN=null
44 | 
45 | BROADCAST_CONNECTION=log
46 | FILESYSTEM_DISK=local
47 | QUEUE_CONNECTION=redis
48 | 
49 | CACHE_STORE=redis
50 | CACHE_PREFIX=
51 | 
52 | MEMCACHED_HOST=127.0.0.1
53 | 
54 | REDIS_CLIENT=phpredis
55 | REDIS_HOST=127.0.0.1
56 | REDIS_PASSWORD=null
57 | REDIS_PORT=6379
58 | 
59 | MAIL_MAILER=smtp
60 | MAIL_HOST=smtp.office365.com
61 | MAIL_PORT=587
62 | MAIL_USERNAME=example.office.com
63 | MAIL_PASSWORD=password
64 | MAIL_ENCRYPTION=tls
65 | MAIL_FROM_ADDRESS="example.office.com"
66 | MAIL_FROM_NAME="${APP_NAME}"
67 | 
68 | AWS_ACCESS_KEY_ID=
69 | AWS_SECRET_ACCESS_KEY=
70 | AWS_DEFAULT_REGION=us-east-1
71 | AWS_BUCKET=
72 | AWS_USE_PATH_STYLE_ENDPOINT=false
73 | 
74 | VITE_APP_NAME="${APP_NAME}"
75 | 
76 | GOOGLE_CLIENT_ID=
77 | GOOGLE_CLIENT_SECRET=
78 | GOOGLE_REDIRECT_URI=http://localhost:8000/api/v1/login/google/callback
79 | 
80 | TELESCOPE_ENABLED=false
81 | 


--------------------------------------------------------------------------------
/nuxt/app/components/account/About.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const form = ref();
 3 | const auth = useAuthStore();
 4 | const quotaDescription = computed(() => `你还可以创建 ${auth.user.remaining_ration} 个Bot`);
 5 | const progressColor = computed(() => {
 6 |   if (auth.user.remaining_ration === 0) {
 7 |     return 'red';
 8 |   } else if (auth.user.remaining_ration === 1) {
 9 |     return 'yellow';
10 |   } else {
11 |     return 'green';
12 |   }
13 | });
14 | 
15 | // 手动触发更新auth数据
16 | const updateAuthData = async () => {
17 |   await auth.fetchUser();
18 | };
19 | 
20 | // 在组件挂载时更新用户数据
21 | onMounted(() => {
22 |   updateAuthData();
23 | });
24 | 
25 | </script>
26 | <template>
27 |   <div class="z-[40] mb-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
28 |     <UDashboardCard icon="i-heroicons-currency-yen">
29 |       <template v-slot:title>
30 |         <div class="text-lg font-bold">
31 |           余额 ¥ {{ auth.user.balance }}
32 |         </div>
33 |       </template>
34 |       <template v-slot:description>
35 |         <div class="text-base font-medium" v-if="auth.user.vip_expiry_date">
36 |           会员有效期至 {{ auth.user.vip_expiry_date }}
37 |         </div>
38 |         <div class="text-base font-medium" v-else>
39 |           你还不是会员呢
40 |         </div>
41 |       </template>
42 |       <UProgress :color="green" :value="auth.user.vip_level" :max="4" />
43 |     </UDashboardCard>
44 |     <UDashboardCard icon="i-heroicons-cube-transparent">
45 |       <template v-slot:title>
46 |         <div class="text-lg font-bold">
47 |           配额 {{ auth.user.ration }} / {{ auth.user.vip_ration }}
48 |         </div>
49 |       </template>
50 |       <template v-slot:description>
51 |         <div class="text-base font-medium">
52 |           你还可以创建 {{ auth.user.remaining_ration }} 个Bot
53 |         </div>
54 |       </template>
55 |       <UProgress :color="progressColor" :value="auth.user.ration" :max="auth.user.vip_ration" />
56 |     </UDashboardCard>
57 |   </div>
58 | </template>
59 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/account/devices.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const dayjs = useDayjs();
 3 | const auth = useAuthStore();
 4 | 
 5 | const { data, status, refresh } = useFetch<any>("devices");
 6 | const loading = computed(() => status.value === 'pending');
 7 | 
 8 | const columns = [
 9 |   {
10 |     key: "name",
11 |     label: "环境",
12 |   },
13 |   {
14 |     key: "last_used_at",
15 |     label: "最后时间",
16 |     class: "max-w-[9rem] w-[9rem] min-w-[9rem]",
17 |   },
18 |   {
19 |     key: "actions",
20 |   },
21 | ];
22 | 
23 | const items = (row: any) => [
24 |   [
25 |     {
26 |       label: "删除",
27 |       icon: "i-heroicons-trash-20-solid",
28 |       click: async () => {
29 |         await $fetch<any>("devices/disconnect", {
30 |           method: "POST",
31 |           body: {
32 |             hash: row.hash,
33 |           },
34 |           async onResponse({ response }) {
35 |             if (response._data?.ok) {
36 |               await refresh();
37 |               await auth.fetchUser();
38 |             }
39 |           }
40 |         });
41 |       },
42 |     },
43 |   ],
44 | ];
45 | 
46 | useSeoMeta({
47 |   title: 'Devices',
48 | })
49 | </script>
50 | <template>
51 |   <UCard :ui="{ body: { padding: 'p-0' } }">
52 |     <UTable :rows="data?.devices" :columns="columns" size="lg" :loading="loading">
53 |       <template #name-data="{ row }">
54 |         <div class="font-semibold">
55 |           {{ row.name }}
56 |           <UBadge v-if="row.is_current" label="active" color="emerald" variant="soft" size="xs" class="ms-1" />
57 |         </div>
58 |         <div class="font-medium text-sm">IP: {{ row.ip }}</div>
59 |       </template>
60 |       <template #last_used_at-data="{ row }">
61 |         {{ dayjs(row.last_used_at).fromNow() }}
62 |       </template>
63 |       <template #actions-data="{ row }">
64 |         <div class="flex justify-end">
65 |           <UDropdown :items="items(row)">
66 |             <UButton :disabled="row.is_current" color="gray" variant="ghost"
67 |               icon="i-heroicons-ellipsis-horizontal-20-solid" />
68 |           </UDropdown>
69 |         </div>
70 |       </template>
71 |     </UTable>
72 |   </UCard>
73 | </template>
74 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/account/log.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref, onMounted, computed } from 'vue';
 3 | import { useAuthStore } from '@/stores/auth'; // 根据您的实际路径调整
 4 | import dayjs from 'dayjs'; // 确保已经安装 dayjs
 5 | 
 6 | const auth = useAuthStore();
 7 | const userLogs = ref([]);
 8 | 
 9 | // 获取用户日志的方法
10 | const fetchUserLogs = async (userId: string) => {
11 |   const { refresh: fetchData, status: fetchDataStatus } = useFetch<any>(`/user-logs/${userId}`, {
12 |     method: 'GET',
13 |     immediate: false,
14 |     watch: false,
15 |     onResponse({ response }) {
16 |       if (response?.status === 200 && response._data) {
17 |         userLogs.value = response._data;
18 |       } else {
19 |         console.error('获取用户日志时出现问题', response?._data?.message || '未知错误');
20 |       }
21 |     },
22 |     onError(error) {
23 |       console.error('获取用户日志时出现错误', error);
24 |     }
25 |   });
26 | 
27 |   await fetchData();
28 |   // console.log(userLogs.value); // 确认数据已加载
29 | };
30 | 
31 | onMounted(() => {
32 |   const userId = auth.user.id.toString();
33 |   fetchUserLogs(userId);
34 | });
35 | 
36 | const columns = computed(() => [
37 |   { key: 'id', label: 'ID' },
38 |   // { key: 'user_id', label: 'User ID' },
39 |   { key: 'balance', label: '金额' },
40 |   { key: 'balance_before', label: '变更前' },
41 |   { key: 'balance_after', label: '变更后' },
42 |   { key: 'change_type', label: '属性' },
43 |   { key: 'description', label: '描述' },
44 |   //{ key: 'created_at', label: 'Created At', format: val => dayjs(val).format('YYYY-MM-DD HH:mm') },
45 |   { key: 'updated_at', label: '时间', format: val => dayjs(val).format('YYYY-MM-DD HH:mm') }
46 | ]);
47 | 
48 | useSeoMeta({
49 |   title: 'User Logs',
50 | });
51 | </script>
52 | 
53 | <template>
54 |   <UCard :ui="{ body: { padding: 'p-0' } }">
55 |     <UTable :rows="userLogs" :columns="columns" size="lg">
56 |       <template #header="{ column }">
57 |         <th>{{ column.label }}</th>
58 |       </template>
59 |       <template #cell="{ row, column }">
60 |         <td v-if="column.format">{{ column.format(row[column.key]) }}</td>
61 |         <td v-else>{{ row[column.key] }}</td>
62 |       </template>
63 |     </UTable>
64 |   </UCard>
65 | </template>
66 | 


--------------------------------------------------------------------------------
/nuxt/app/components/auth/Register.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const router = useRouter();
 3 | const form = ref();
 4 | 
 5 | const state = reactive({
 6 |   name: "",
 7 |   email: "",
 8 |   password: "",
 9 |   password_confirmation: "",
10 | });
11 | 
12 | const { refresh: onSubmit, status: registerStatus } = useFetch<any>("register", {
13 |   method: "POST",
14 |   body: state,
15 |   immediate: false,
16 |   watch: false,
17 |   async onResponse({ response }) {
18 |     if (response?.status === 422) {
19 |       form.value.setErrors(response._data?.errors);
20 |     } else if (response._data?.ok) {
21 |       useToast().add({
22 |         icon: "i-heroicons-check-circle-20-solid",
23 |         title: "您已成功注册！",
24 |         color: "emerald",
25 |         actions: [
26 |           {
27 |             label: "登陆",
28 |             to: "/auth/login",
29 |             color: "emerald",
30 |           },
31 |         ],
32 |       });
33 | 
34 |       router.push("/auth/login");
35 |     }
36 |   }
37 | });
38 | </script>
39 | 
40 | <template>
41 |   <div class="space-y-4">
42 |     <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
43 |       <UFormGroup label="用户名" name="name" required>
44 |         <UInput v-model="state.name" type="text" autofocus />
45 |       </UFormGroup>
46 | 
47 |       <UFormGroup label="邮箱" name="email" required>
48 |         <UInput v-model="state.email" placeholder="you@example.com" icon="i-heroicons-envelope" trailing type="email" />
49 |       </UFormGroup>
50 | 
51 |       <UFormGroup label="密码" name="password" hint="min 8 characters"
52 |         :ui="{ hint: 'text-xs text-gray-500 dark:text-gray-400' }" required>
53 |         <UInput v-model="state.password" type="password" autocomplete="off" />
54 |       </UFormGroup>
55 | 
56 |       <UFormGroup label="重复密码" name="password_confirmation" required>
57 |         <UInput v-model="state.password_confirmation" type="password" autocomplete="off" />
58 |       </UFormGroup>
59 | 
60 |       <div class="flex items-center justify-end space-x-4">
61 |         <UButton type="submit" label="注册" :loading="registerStatus === 'pending'" />
62 |       </div>
63 |     </UForm>
64 | 
65 |     <div class="text-sm">
66 |       已经有一个帐户？
67 |       <NuxtLink class="text-sm" to="/auth/login">登陆</NuxtLink>
68 |     </div>
69 |   </div>
70 | </template>
71 | 


--------------------------------------------------------------------------------
/nuxt/app/components/home/Demo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 |   <div class="grid grid-cols-1 md:grid-cols-5 gap-6 h-full gap-y-6 relative max-w-6xl mx-auto">
 4 |     <!-- Left Column -->
 5 |     <div class="md:col-span-3 space-y-4 flex flex-col h-full gap-y-2">
 6 |       <ULandingCard title="应用" description="应用即基于各类业务场景，组合大模型、知识库等原子能力搭建并进行个性化配置的专属“数字员工”。"
 7 |         icon="i-heroicons-face-smile" color="indigo" orientation="horizontal">
 8 | 
 9 |         <div class="flex justify-center items-center">
10 |           <img src="https://io.onenov.cn/file/202407130340221.svg" class="w-9/12 rounded-md">
11 |         </div>
12 |       </ULandingCard>
13 | 
14 |       <ULandingCard title="知识库" description="基于RAG架构的知识库能力，帮助企业利用自有知识定制化AI，把知识教给一个“数字大脑”。" icon="i-heroicons-book-open"
15 |         color="primary" orientation="horizontal">
16 |         <div class="flex justify-center items-center">
17 |           <img src="https://io.onenov.cn/file/202407130341465.svg" class="w-9/12 rounded-md">
18 |         </div>
19 |       </ULandingCard>
20 |       <ULandingCard title="插件" description="基于Agent架构的高可扩展插件能力，让智能体与外部服务进行交互，除了“大脑”还拥有“手和脚” 。"
21 |         icon="i-heroicons-puzzle-piece" color="cyan" orientation="horizontal">
22 |         <div class="flex justify-center items-center">
23 |           <img src="https://io.onenov.cn/file/202407130341710.svg" class="w-9/12 rounded-md">
24 |         </div>
25 |       </ULandingCard>
26 |     </div>
27 |     <!-- Right Column -->
28 |     <div class="md:col-span-2 space-y-4 flex flex-col h-full gap-y-2">
29 |       <ULandingCard title="工作流" description="实用WorkFlow功能，进一步增强AI对流程型复杂任务的理解和执行能力，以实现“可计划”的Agent。"
30 |         icon="i-heroicons-squares-plus" color="sky" orientation="vertical">
31 |         <div class="flex justify-center items-center">
32 |           <img src="https://io.onenov.cn/file/202407130341425.svg" class="w-9/12 rounded-md">
33 |         </div>
34 |       </ULandingCard>
35 |       <ULandingCard title="应用接入" description="支持一键接入主流IM平台、办公协同平台等，还可通过封装能力嵌入您的Web网站，或通过API接入自研/第三方系统使用。"
36 |         icon="i-heroicons-sparkles" color="teal" orientation="vertical">
37 |         <div class="flex justify-center items-center">
38 |           <img src="https://io.onenov.cn/file/202407130353575.svg" class="w-9/12 rounded-md">
39 |         </div>
40 |       </ULandingCard>
41 |     </div>
42 |   </div>
43 | 
44 | </template>
45 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/auth/reset/[token].vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const router = useRouter();
 3 | const route = useRoute();
 4 | const auth = useAuthStore();
 5 | const form = ref();
 6 | 
 7 | const state = reactive({
 8 |   email: route.query.email as string,
 9 |   token: route.params.token,
10 |   password: "",
11 |   password_confirmation: "",
12 | });
13 | 
14 | const { refresh: onSubmit, status: resetStatus } = useFetch<any>("reset-password", {
15 |   method: "POST",
16 |   body: state,
17 |   immediate: false,
18 |   watch: false,
19 |   async onResponse({ response }) {
20 |     if (response?.status === 422) {
21 |       form.value.setErrors(response._data?.errors);
22 |     } else if (response._data?.ok) {
23 |       useToast().add({
24 |         title: "Success",
25 |         description: response._data.message,
26 |         color: "emerald",
27 |       });
28 | 
29 |       if (auth.logged) {
30 |         await auth.fetchUser();
31 |         await router.push("/");
32 |       } else {
33 |         await router.push("/auth/login");
34 |       }
35 |     }
36 |   }
37 | });
38 | 
39 | useSeoMeta({
40 |   title: '重置密码',
41 | })
42 | </script>
43 | <template>
44 |   <UCard class="w-full max-w-md mx-auto my-20">
45 |     <h1 class="text-3xl font-black mb-6 leading-tight tracking-tight">重置密码</h1>
46 | 
47 |     <div class="space-y-4">
48 |       <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
49 |         <UFormGroup label="Email" name="email" required>
50 |           <UInput v-model="state.email" placeholder="用户邮箱地址" icon="i-heroicons-envelope" trailing type="email"
51 |             readonly="" />
52 |         </UFormGroup>
53 | 
54 |         <UFormGroup label="New Password" name="password" hint="min 8 characters"
55 |           :ui="{ hint: 'text-xs text-gray-500 dark:text-gray-400' }" required>
56 |           <UInput v-model="state.password" type="password" autocomplete="off" />
57 |         </UFormGroup>
58 | 
59 |         <UFormGroup label="Repeat Password" name="password_confirmation" required>
60 |           <UInput v-model="state.password_confirmation" type="password" autocomplete="off" />
61 |         </UFormGroup>
62 | 
63 |         <div class="flex items-center justify-end space-x-4">
64 |           <UButton type="submit" label="Reset password" :loading="resetStatus === 'pending'" />
65 |         </div>
66 |       </UForm>
67 | 
68 |       <div class="text-sm">
69 |         <NuxtLink class="text-sm" to="/auth/login">返回登陆</NuxtLink>
70 |       </div>
71 |     </div>
72 |   </UCard>
73 | </template>
74 | 


--------------------------------------------------------------------------------
/nuxt/app/assets/css/arco.css:
--------------------------------------------------------------------------------
 1 | --color-white: rgba(255, 255, 255, 0.9) !important;
 2 | --color-black: #000000 !important;
 3 | --color-border: #333335 !important;
 4 | --color-bg-1: #17171a !important;
 5 | --color-bg-2: #232324 !important;
 6 | --color-bg-3: #2a2a2b !important;
 7 | --color-bg-4: #313132 !important;
 8 | --color-bg-5: #373739 !important;
 9 | --color-bg-white: #f6f6f6 !important;
10 | --color-text-1: rgba(255, 255, 255, 0.9) !important;
11 | --color-text-2: rgba(255, 255, 255, 0.7) !important;
12 | --color-text-3: rgba(255, 255, 255, 0.5) !important;
13 | --color-text-4: rgba(255, 255, 255, 0.3) !important;
14 | --color-fill-1: rgba(255, 255, 255, 0.04) !important;
15 | --color-fill-2: rgba(255, 255, 255, 0.08) !important;
16 | --color-fill-3: rgba(255, 255, 255, 0.12) !important;
17 | --color-fill-4: rgba(255, 255, 255, 0.16) !important;
18 | --color-primary-light-1: rgba(var(--primary-6), 0.2) !important;
19 | --color-primary-light-2: rgba(var(--primary-6), 0.35) !important;
20 | --color-primary-light-3: rgba(var(--primary-6), 0.5) !important;
21 | --color-primary-light-4: rgba(var(--primary-6), 0.65) !important;
22 | --color-secondary: rgba(var(--gray-9), 0.08) !important;
23 | --color-secondary-hover: rgba(var(--gray-8), 0.16) !important;
24 | --color-secondary-active: rgba(var(--gray-7), 0.24) !important;
25 | --color-secondary-disabled: rgba(var(--gray-9), 0.08) !important;
26 | --color-danger-light-1: rgba(var(--danger-6), 0.2) !important;
27 | --color-danger-light-2: rgba(var(--danger-6), 0.35) !important;
28 | --color-danger-light-3: rgba(var(--danger-6), 0.5) !important;
29 | --color-danger-light-4: rgba(var(--danger-6), 0.65) !important;
30 | --color-success-light-1: rgb(var(--success-6), 0.2) !important;
31 | --color-success-light-2: rgb(var(--success-6), 0.35) !important;
32 | --color-success-light-3: rgb(var(--success-6), 0.5) !important;
33 | --color-success-light-4: rgb(var(--success-6), 0.65) !important;
34 | --color-warning-light-1: rgb(var(--warning-6), 0.2) !important;
35 | --color-warning-light-2: rgb(var(--warning-6), 0.35) !important;
36 | --color-warning-light-3: rgb(var(--warning-6), 0.5) !important;
37 | --color-warning-light-4: rgb(var(--warning-6), 0.65) !important;
38 | --color-link-light-1: rgb(var(--link-6), 0.2) !important;
39 | --color-link-light-2: rgb(var(--link-6), 0.35) !important;
40 | --color-link-light-3: rgb(var(--link-6), 0.5) !important;
41 | --color-link-light-4: rgb(var(--link-6), 0.65) !important;
42 | --color-tooltip-bg: #373739 !important;
43 | --color-spin-layer-bg: rgba(51, 51, 51, 0.6) !important;
44 | --color-menu-dark-bg: #232324 !important;
45 | --color-menu-light-bg: #232324 !important;
46 | --color-menu-dark-hover: var(--color-fill-2) !important;
47 | --color-mask-bg: rgba(23, 23, 26, 0.6) !important;
48 | 


--------------------------------------------------------------------------------
/nuxt/app/components/account/UpdateProfile.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const form = ref();
 3 | const auth = useAuthStore();
 4 | 
 5 | const state = reactive({
 6 |   ...{
 7 |     email: auth.user.email,
 8 |     name: auth.user.name,
 9 |     avatar: auth.user.avatar,
10 |   },
11 | });
12 | 
13 | const { refresh: sendEmailVerification, status: resendEmailStatus } = useFetch<any>("verification-notification", {
14 |   method: "POST",
15 |   body: { email: state.email },
16 |   immediate: false,
17 |   watch: false,
18 |   onResponse({ response }) {
19 |     if (response._data?.ok) {
20 |       useToast().add({
21 |         icon: "i-heroicons-check-circle-20-solid",
22 |         title: response._data.message,
23 |         color: "emerald",
24 |       });
25 |     }
26 |   }
27 | });
28 | 
29 | const { refresh: onSubmit, status: accountUpdateStatus } = useFetch<any>("account/update", {
30 |   method: "POST",
31 |   body: state,
32 |   immediate: false,
33 |   watch: false,
34 |   async onResponse({ response }) {
35 |     if (response?.status === 422) {
36 |       form.value.setErrors(response._data?.errors);
37 |     } else if (response._data?.ok) {
38 |       useToast().add({
39 |         icon: "i-heroicons-check-circle-20-solid",
40 |         title: "帐户详细信息已成功更新。",
41 |         color: "emerald",
42 |       });
43 | 
44 |       await auth.fetchUser();
45 | 
46 |       state.name = auth.user.name;
47 |       state.email = auth.user.email;
48 |       state.avatar = auth.user.avatar;
49 |     }
50 |   }
51 | });
52 | </script>
53 | 
54 | <template>
55 |   <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
56 |     <UFormGroup label="" name="avatar" class="flex">
57 |       <InputUploadImage v-model="state.avatar" accept=".png, .jpg, .jpeg, .webp" entity="avatars" max-size="2"
58 |         :width="300" :height="300" />
59 |     </UFormGroup>
60 | 
61 |     <UFormGroup label="Name" name="name" required>
62 |       <UInput v-model="state.name" type="text" />
63 |     </UFormGroup>
64 | 
65 |     <UFormGroup label="Email" name="email" required>
66 |       <UInput v-model="state.email" placeholder="you@example.com" icon="i-heroicons-envelope" trailing type="email" />
67 |     </UFormGroup>
68 | 
69 |     <UAlert v-if="auth.user.must_verify_email" icon="i-heroicons-information-circle-20-solid" title="请确认您的电子邮件地址。"
70 |       description="确认电子邮件已发送到您的电子邮件地址。请单击电子邮件中的确认链接以验证您的电子邮件地址。" :actions="[
71 |         {
72 |           label: '重新发送验证邮件',
73 |           variant: 'solid',
74 |           color: 'gray',
75 |           loading: resendEmailStatus === 'pending',
76 |           click: sendEmailVerification,
77 |         },
78 |       ]" />
79 | 
80 |     <div class="pt-2">
81 |       <UButton type="submit" label="保存" :loading="accountUpdateStatus === 'pending'" />
82 |     </div>
83 |   </UForm>
84 | </template>
85 | 


--------------------------------------------------------------------------------
/nuxt/app/components/input/UploadImage.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const props = defineProps(["modelValue", "entity", "accept", "maxSize", "width", "height"]);
 3 | const emit = defineEmits(["update:modelValue"]);
 4 | 
 5 | const { $storage } = useNuxtApp();
 6 | 
 7 | const value = computed({
 8 |   get() {
 9 |     return props.modelValue;
10 |   },
11 |   set(value) {
12 |     emit("update:modelValue", value);
13 |   },
14 | });
15 | 
16 | const inputRef = ref();
17 | const loading = ref(false);
18 | 
19 | const onSelect = async (e: any) => {
20 |   const file = e.target.files[0];
21 |   e.target.value = null;
22 | 
23 |   if (file.size > props.maxSize * 1024 * 1024) {
24 |     return useToast().add({
25 |       title: "File is too large.",
26 |       color: "red",
27 |       icon: "i-heroicons-exclamation-circle-solid",
28 |     });
29 |   }
30 | 
31 |   loading.value = true;
32 | 
33 |   const formData = new FormData();
34 |   formData.append("image", file);
35 | 
36 |   await $fetch<any>("upload", {
37 |     method: "POST",
38 |     body: formData,
39 |     params: {
40 |       entity: props.entity,
41 |       width: props.width ?? null,
42 |       height: props.height ?? null,
43 |     },
44 |     ignoreResponseError: true,
45 |     onResponse({ response }) {
46 |       if (response.status !== 200) {
47 |         useToast().add({
48 |           icon: 'i-heroicons-exclamation-circle-solid',
49 |           color: 'red',
50 |           title: response._data?.message ?? response.statusText ?? 'Something went wrong',
51 |         });
52 |       } else if (response._data?.ok) {
53 |         value.value = response._data?.path;
54 |       }
55 | 
56 |       loading.value = false;
57 |     },
58 |   });
59 | };
60 | </script>
61 | 
62 | <template>
63 |   <div class="flex gap-6">
64 |     <div class="relative flex">
65 |       <UAvatar :src="$storage(value)" size="3xl" img-class="object-cover" :ui="{ rounded: 'rounded-lg' }" />
66 | 
67 |       <UTooltip text="Upload" class="absolute top-0 end-0 -m-2" :popper="{ placement: 'right' }">
68 |         <UButton type="button" color="gray" icon="i-heroicons-cloud-arrow-up" size="2xs"
69 |           :ui="{ rounded: 'rounded-full' }" :loading="loading" @click="inputRef.click()" />
70 |       </UTooltip>
71 |       <UTooltip text="Delete" class="absolute bottom-0 end-0 -m-2" :popper="{ placement: 'right' }">
72 |         <UButton type="button" color="gray" icon="i-heroicons-x-mark-20-solid" size="2xs"
73 |           :ui="{ rounded: 'rounded-full' }" :disabled="loading" @click="value = ''" />
74 |       </UTooltip>
75 |       <input ref="inputRef" type="file" class="hidden" :accept="accept" @change="onSelect" />
76 |     </div>
77 |     <div class="text-sm opacity-80">
78 |       <div>最大上传大小: {{ maxSize }}Mb</div>
79 |       <div>支持的文件格式: {{ accept }}</div>
80 |     </div>
81 |   </div>
82 | </template>
83 | 


--------------------------------------------------------------------------------
/nuxt/app/components/account/UpdatePassword.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const form = ref();
 3 | const auth = useAuthStore();
 4 | 
 5 | const state = reactive({
 6 |   current_password: "",
 7 |   password: "",
 8 |   password_confirmation: "",
 9 | });
10 | 
11 | const { refresh: onSubmit, status: accountPasswordStatus } = useFetch<any>("account/password", {
12 |   method: "POST",
13 |   body: state,
14 |   immediate: false,
15 |   watch: false,
16 |   async onResponse({ response }) {
17 |     if (response?.status === 422) {
18 |       form.value.setErrors(response._data?.errors);
19 |     } else if (response._data?.ok) {
20 |       useToast().add({
21 |         icon: "i-heroicons-check-circle-20-solid",
22 |         title: "密码已成功更新。",
23 |         color: "emerald",
24 |       });
25 | 
26 |       state.current_password = "";
27 |       state.password = "";
28 |       state.password_confirmation = "";
29 |     }
30 |   }
31 | });
32 | 
33 | const { refresh: sendResetPasswordEmail, status: resetPasswordEmailStatus } = useFetch<any>("forgot-password", {
34 |   method: "POST",
35 |   body: { email: auth.user.email },
36 |   immediate: false,
37 |   watch: false,
38 |   onResponse({ response }) {
39 |     if (response._data?.ok) {
40 |       useToast().add({
41 |         icon: "i-heroicons-check-circle-20-solid",
42 |         title: "重置密码的链接已发送到您的电子邮件。",
43 |         color: "emerald",
44 |       });
45 |     }
46 |   }
47 | });
48 | </script>
49 | 
50 | <template>
51 |   <div>
52 |     <UForm v-if="auth.user.has_password" ref="form" :state="state" @submit="onSubmit" class="space-y-4">
53 |       <UFormGroup label="当前密码" name="current_password" required>
54 |         <UInput v-model="state.current_password" type="password" autocomplete="off" />
55 |       </UFormGroup>
56 | 
57 |       <UFormGroup label="新密码" name="password" hint="最少8个字符" :ui="{ hint: 'text-xs text-gray-500 dark:text-gray-400' }"
58 |         required>
59 |         <UInput v-model="state.password" type="password" autocomplete="off" />
60 |       </UFormGroup>
61 | 
62 |       <UFormGroup label="确认密码" name="password_confirmation" required>
63 |         <UInput v-model="state.password_confirmation" type="password" autocomplete="off" />
64 |       </UFormGroup>
65 | 
66 |       <div class="pt-2">
67 |         <UButton type="submit" label="保存" :loading="accountPasswordStatus === 'pending'" />
68 |       </div>
69 |     </UForm>
70 | 
71 |     <UAlert v-else icon="i-heroicons-information-circle-20-solid" title="发送指向您的电子邮件的链接以重置您的密码。"
72 |       description="To create a password for your account, you must go through the password recovery process." :actions="[
73 |         {
74 |           label: 'Send link to Email',
75 |           variant: 'solid',
76 |           color: 'gray',
77 |           loading: resetPasswordEmailStatus === 'pending',
78 |           click: sendResetPasswordEmail,
79 |         },
80 |       ]" />
81 |   </div>
82 | </template>
83 | 


--------------------------------------------------------------------------------
/nuxt/app/components/home/Tetris.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Transition appear name="fade">
 3 |     <div :style="{ '--cell': `${width / cols}px`, '--rows': rows - 1 }">
 4 |       <div ref="el" class="absolute inset-0 grid justify-center auto-rows-[--cell] space-y-0 h-screen">
 5 |         <div v-for="(row, rowIndex) in grid" :key="rowIndex"
 6 |           class="grid grid-flow-col auto-cols-[--cell] flex-1 space-x-0">
 7 |           <div v-for="(cell, cellIndex) in row" :key="cellIndex"
 8 |             class="relative border border-primary-200/50 dark:border-primary-900/25">
 9 |             <div
10 |               class="absolute inset-0 bg-primary-500/10 hover:bg-primary-500/20 dark:bg-primary-400/5 dark:hover:bg-primary-400/10 opacity-0 transition-opacity will-change-[opacity] duration-1000"
11 |               :class="[cell && 'opacity-100 cursor-pointer']" @click="cell && removeCell(rowIndex, cellIndex)" />
12 |           </div>
13 |         </div>
14 |         <div
15 |           class="absolute top-[calc((var(--cell) * var(--rows)) + 1px)] inset-x-0 h-[calc(var(--cell) * 2)] bg-gradient-to-t from-white dark:from-gray-900 pointer-events-none" />
16 |       </div>
17 |     </div>
18 |   </Transition>
19 | </template>
20 | 
21 | <script setup lang="ts">
22 | import { ref, watch, onMounted } from 'vue';
23 | import { useElementSize } from '@vueuse/core';
24 | 
25 | const el = ref(null);
26 | const grid = ref<Array<Array<boolean | null>>>([]);
27 | const rows = ref(0);
28 | const cols = ref(0);
29 | const { width, height } = useElementSize(el);
30 | 
31 | function createGrid() {
32 |   grid.value = [];
33 |   for (let i = 0; i < rows.value; i++) {
34 |     grid.value.push(new Array(cols.value).fill(null));
35 |   }
36 | }
37 | 
38 | function createNewCell() {
39 |   const x = Math.floor(Math.random() * cols.value);
40 |   if (grid.value[0]) {
41 |     grid.value[0][x] = true;
42 |   }
43 | }
44 | 
45 | function moveCellsDown() {
46 |   for (let row = rows.value - 2; row >= 0; row--) {
47 |     for (let col = 0; col < cols.value; col++) {
48 |       if (grid.value[row][col] !== null && grid.value[row + 1][col] === null) {
49 |         grid.value[row + 1][col] = grid.value[row][col];
50 |         grid.value[row][col] = null;
51 |       }
52 |     }
53 |   }
54 |   setTimeout(() => {
55 |     if (grid.value[rows.value - 1] && grid.value[rows.value - 1].every(cell => cell !== null)) {
56 |       for (let col = 0; col < cols.value; col++) {
57 |         grid.value[rows.value - 1][col] = null;
58 |       }
59 |     }
60 |   }, 500);
61 | }
62 | 
63 | function removeCell(row: number, col: number) {
64 |   grid.value[row][col] = null;
65 | }
66 | 
67 | function calcGrid() {
68 |   const base = Math.ceil(width.value / 60);
69 |   const cell = width.value / base;
70 |   rows.value = Math.max(Math.ceil(height.value / cell) - 1, 1);
71 |   cols.value = Math.max(Math.floor(width.value / cell), 1);
72 |   createGrid();
73 | }
74 | 
75 | watch(width, calcGrid);
76 | onMounted(() => {
77 |   setTimeout(calcGrid, 50);
78 |   setInterval(() => {
79 |     moveCellsDown();
80 |     createNewCell();
81 |   }, 1000);
82 | });
83 | </script>
84 | 
85 | <style scoped>
86 | .fade-enter-active,
87 | .fade-leave-active {
88 |   transition: opacity 0.5s ease;
89 | }
90 | 
91 | .fade-enter-from,
92 | .fade-leave-to {
93 |   opacity: 0;
94 | }
95 | </style>
96 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
  1 | // https://nuxt.com/docs/api/configuration/nuxt-config
  2 | export default defineNuxtConfig({
  3 |   compatibilityDate: "2024-07-03",
  4 |   rootDir: "nuxt/",
  5 | 
  6 |   future: {
  7 |     compatibilityVersion: 4,
  8 |   },
  9 | 
 10 |   /**
 11 |    * Manually disable nuxt telemetry.
 12 |    * @see [Nuxt Telemetry](https://github.com/nuxt/telemetry) for more information.
 13 |    */
 14 |   telemetry: true,
 15 |   ssr: false,
 16 |   $development: {
 17 |     ssr: false,
 18 |     devtools: {
 19 |       enabled: false,
 20 |     },
 21 |   },
 22 | 
 23 |   $production: {
 24 |     ssr: false,
 25 |   },
 26 | 
 27 |   app: {
 28 |     head: {
 29 |       title: "Home",
 30 |       titleTemplate: "%s | ChatBotNext",
 31 |       meta: [
 32 |         { charset: "utf-8" },
 33 |         { name: "viewport", content: "width=device-width, initial-scale=1" },
 34 |       ],
 35 |       link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
 36 |     },
 37 |   },
 38 | 
 39 |   routeRules: {
 40 |     "auth/verify": { ssr: false },
 41 |   },
 42 | 
 43 |   tailwindcss: {
 44 |     cssPath: "@/assets/css/main.css",
 45 |   },
 46 |   css: ["@/assets/css/style.min.css", "@/assets/css/dark.css"],
 47 |   /**
 48 |    * @see https://v3.nuxtjs.org/api/configuration/nuxt.config#modules
 49 |    */
 50 |   extends: ["@nuxt/ui-pro"],
 51 |   modules: [
 52 |     "@nuxt/ui",
 53 |     "@nuxt/image",
 54 |     "@pinia/nuxt",
 55 |     "dayjs-nuxt",
 56 |     "nuxt-security",
 57 |     "@nuxtjs/tailwindcss",
 58 |   ],
 59 | 
 60 |   ui: {
 61 |     icons: ["heroicons"],
 62 |   },
 63 | 
 64 |   image: {
 65 |     domains: [import.meta.env.APP_URL || "http://127.0.0.1:8000"],
 66 |     alias: {
 67 |       api: import.meta.env.APP_URL || "http://127.0.0.1:8000",
 68 |     },
 69 |   },
 70 | 
 71 |   security: {
 72 |     headers: {
 73 |       crossOriginEmbedderPolicy: "unsafe-none",
 74 |       crossOriginOpenerPolicy: "same-origin-allow-popups",
 75 |       contentSecurityPolicy: {
 76 |         "img-src": [
 77 |           "'self'",
 78 |           "data:",
 79 |           "https://*",
 80 |           import.meta.env.APP_URL || "http://127.0.0.1:8000",
 81 |         ],
 82 |       },
 83 |     },
 84 |   },
 85 | 
 86 |   dayjs: {
 87 |     locales: ["en", "zh-cn"], // 添加中文支持
 88 |     plugins: ["relativeTime", "utc", "timezone"],
 89 |     defaultLocale: "zh-cn", // 设置默认语言为中文
 90 |     defaultTimezone: "Asia/Shanghai", // 设置默认时区为上海
 91 |   },
 92 |   plugins: ["~/plugins/fetchSettings.ts"],
 93 |   typescript: {
 94 |     strict: false,
 95 |   },
 96 | 
 97 |   /**
 98 |    * @see https://v3.nuxtjs.org/guide/features/runtime-config#exposing-runtime-config
 99 |    */
100 |   runtimeConfig: {
101 |     apiLocal: import.meta.env.API_LOCAL_URL,
102 |     public: {
103 |       apiBase: import.meta.env.APP_URL,
104 |       apiPrefix: "/api/v1",
105 |       storageBase: import.meta.env.APP_URL + "/storage/",
106 |       providers: {
107 |         google: {
108 |           name: "Google",
109 |           icon: "",
110 |           color: "gray",
111 |         },
112 |       },
113 |     },
114 |   },
115 |   build: {
116 |     chunkSizeWarningLimit: 1000, // 单位为 KB
117 |     analyze: true, // 这将打开包分析器
118 |   },
119 |   nitro: {
120 |     prerender: {
121 |       crawlLinks: true,
122 |       routes: ["/workflow"], // 添加需 prerender 的路径
123 |     },
124 |   },
125 | });
126 | 


--------------------------------------------------------------------------------
/nuxt/app/components/app/Header.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | const auth = useAuthStore();
  3 | const { $storage } = useNuxtApp();
  4 | 
  5 | const userItems = [
  6 |   [
  7 |     {
  8 |       label: "User",
  9 |       slot: "overview",
 10 |       disabled: true,
 11 |     },
 12 |   ],
 13 |   [
 14 |     {
 15 |       label: "个人中心",
 16 |       to: "/account/general",
 17 |       icon: "i-heroicons-user",
 18 |     },
 19 |     {
 20 |       label: "消耗总览",
 21 |       to: "/account/log",
 22 |       icon: "i-heroicons-clock",
 23 |     },
 24 |     {
 25 |       label: "登陆历史",
 26 |       to: "/account/devices",
 27 |       icon: "i-heroicons-device-phone-mobile",
 28 |     },
 29 |   ],
 30 |   [
 31 |     {
 32 |       label: "退出登录",
 33 |       click: auth.logout,
 34 |       icon: "i-heroicons-arrow-left-on-rectangle",
 35 |     },
 36 |   ],
 37 | ];
 38 | 
 39 | const navItems = [
 40 |   {
 41 |     label: "工作台",
 42 |     to: "/workflow",
 43 |     //target: "_blank",
 44 |     icon: "i-heroicons-wallet-solid",
 45 |   },
 46 |   {
 47 |     label: "助手",
 48 |     to: "/bot",
 49 |     //target: "_blank",
 50 |     icon: "i-heroicons-chat-bubble-oval-left-ellipsis-solid",
 51 |   },
 52 |   {
 53 |     label: "会员",
 54 |     to: "/price",
 55 |     //target: "_blank",
 56 |     icon: "i-heroicons-shopping-bag-solid",
 57 |   },
 58 | ];
 59 | 
 60 | const isSideOpen = ref(false);
 61 | const openSide = () => {
 62 |   isSideOpen.value = true;
 63 | };
 64 | 
 65 | defineShortcuts({
 66 |   escape: {
 67 |     usingInput: true,
 68 |     whenever: [isSideOpen],
 69 |     handler: () => {
 70 |       isSideOpen.value = false;
 71 |     },
 72 |   },
 73 | });
 74 | </script>
 75 | <template>
 76 |   <header
 77 |     class="bg-background/75 backdrop-blur -mb-px sticky top-0 z-50 border-dashed border-gray-200/80 dark:border-gray-800/80">
 78 |     <UContainer class="flex items-center justify-between gap-3 h-16 py-2">
 79 |       <AppLogo class="lg:flex-1" />
 80 | 
 81 |       <nav class="hidden lg:flex">
 82 |         <ul class="flex flex-col items-end lg:flex-row lg:items-center lg:gap-x-8">
 83 |           <UHorizontalNavigation :links="navItems"
 84 |             class="text-sm/6 font-semibold flex items-center gap-1 hover:text-primary" />
 85 |         </ul>
 86 |       </nav>
 87 | 
 88 | 
 89 |       <div class="flex items-center justify-end gap-3 lg:flex-1">
 90 |         <AppSignin />
 91 |         <AppTheme />
 92 |         <UDropdown v-if="auth.logged" :items="userItems" :ui="{ item: { disabled: 'cursor-text select-text' } }"
 93 |           :popper="{ placement: 'bottom-end' }">
 94 |           <UAvatar size="sm" :src="$storage(auth.user.avatar)" :alt="auth.user.name" :ui="{ rounded: 'rounded-md' }" />
 95 | 
 96 |           <template #overview>
 97 |             <div class="text-left">
 98 |               <p>Hello： </p>
 99 |               <p class="truncate font-medium text-gray-900 dark:text-white">
100 |                 {{ auth.user.name }}，欢迎回来～
101 |               </p>
102 |             </div>
103 |           </template>
104 |         </UDropdown>
105 |         <UButton v-else label="登陆" to="/auth/login" variant="ghost" color="gray" />
106 | 
107 |         <UButton class="lg:hidden" variant="ghost" color="gray" icon="i-heroicons-bars-3" @click="isSideOpen = true" />
108 |       </div>
109 |     </UContainer>
110 |   </header>
111 | 
112 |   <USlideover v-model="isSideOpen" :ui="{ width: 'max-w-xs' }" @close="">
113 |     <UContainer
114 |       class="flex items-center justify-between gap-3 h-16 py-2 border-dashed border-gray-200/80 dark:border-gray-800/80">
115 |       <AppLogo />
116 |       <UButton variant="ghost" color="gray" icon="i-heroicons-x-mark-20-solid" @click="isSideOpen = false" />
117 |     </UContainer>
118 |     <UContainer class="flex-1 py-4 sm:py-6">
119 |       <UVerticalNavigation :links="navItems">
120 |         <template #default="{ link }">
121 |           <span class="group-hover:text-primary relative">{{ link.label }}</span>
122 |         </template>
123 |       </UVerticalNavigation>
124 |     </UContainer>
125 |   </USlideover>
126 | </template>
127 | 


--------------------------------------------------------------------------------
/nuxt/app/plugins/app.ts:
--------------------------------------------------------------------------------
  1 | import type { FetchOptions } from "ofetch";
  2 | import { ofetch } from "ofetch";
  3 | 
  4 | export default defineNuxtPlugin({
  5 |   name: "app",
  6 |   enforce: "default",
  7 |   parallel: true,
  8 |   async setup(nuxtApp) {
  9 |     const config = useRuntimeConfig();
 10 |     const auth = useAuthStore();
 11 | 
 12 |     nuxtApp.provide("storage", (path: string): string => {
 13 |       if (!path) return "";
 14 | 
 15 |       return path.startsWith("http://") || path.startsWith("https://")
 16 |         ? path
 17 |         : config.public.storageBase + path;
 18 |     });
 19 | 
 20 |     function buildHeaders(headers = <HeadersInit>{}): HeadersInit {
 21 |       return {
 22 |         ...headers,
 23 |         ...{
 24 |           Accept: "application/json",
 25 |         },
 26 |         ...(import.meta.server
 27 |           ? {
 28 |               referer: useRequestURL().toString(),
 29 |               ...useRequestHeaders([
 30 |                 "x-forwarded-for",
 31 |                 "user-agent",
 32 |                 "referer",
 33 |               ]),
 34 |             }
 35 |           : {}),
 36 |         ...(auth.logged
 37 |           ? {
 38 |               Authorization: `Bearer ${auth.token}`,
 39 |             }
 40 |           : {}),
 41 |       };
 42 |     }
 43 | 
 44 |     function buildBaseURL(baseURL: string): string {
 45 |       if (baseURL) return baseURL;
 46 | 
 47 |       return import.meta.server
 48 |         ? config.apiLocal + config.public.apiPrefix
 49 |         : config.public.apiBase + config.public.apiPrefix;
 50 |     }
 51 | 
 52 |     function buildSecureMethod(options: FetchOptions): void {
 53 |       if (import.meta.server) return;
 54 | 
 55 |       const method = options.method?.toLowerCase() ?? "get";
 56 | 
 57 |       if (options.body instanceof FormData && method === "put") {
 58 |         options.method = "POST";
 59 |         options.body.append("_method", "PUT");
 60 |       }
 61 |     }
 62 | 
 63 |     function isRequestWithAuth(baseURL: string, path: string): boolean {
 64 |       return (
 65 |         !baseURL &&
 66 |         !path.startsWith("/_nuxt") &&
 67 |         !path.startsWith("http://") &&
 68 |         !path.startsWith("https://")
 69 |       );
 70 |     }
 71 | 
 72 |     globalThis.$fetch = ofetch.create(<FetchOptions>{
 73 |       retry: false,
 74 | 
 75 |       onRequest({ request, options }) {
 76 |         if (!isRequestWithAuth(options.baseURL ?? "", request.toString()))
 77 |           return;
 78 | 
 79 |         options.credentials = "include";
 80 | 
 81 |         options.baseURL = buildBaseURL(options.baseURL ?? "");
 82 |         options.headers = buildHeaders(options.headers);
 83 | 
 84 |         buildSecureMethod(options);
 85 |       },
 86 | 
 87 |       onRequestError({ error }) {
 88 |         if (import.meta.server) return;
 89 | 
 90 |         if (error.name === "AbortError") return;
 91 | 
 92 |         useToast().add({
 93 |           icon: "i-heroicons-exclamation-circle-solid",
 94 |           color: "red",
 95 |           title: error.message ?? "Something went wrong",
 96 |         });
 97 |       },
 98 | 
 99 |       onResponseError({ response }) {
100 |         if (response.status === 401) {
101 |           if (auth.logged) {
102 |             auth.token = "";
103 |             auth.user = <User>{};
104 |           }
105 | 
106 |           if (import.meta.client) {
107 |             useToast().add({
108 |               title: "请先登录",
109 |               icon: "i-heroicons-exclamation-circle-solid",
110 |               color: "primary",
111 |             });
112 |           }
113 |         } else if (response.status !== 422) {
114 |           if (import.meta.client) {
115 |             useToast().add({
116 |               icon: "i-heroicons-exclamation-circle-solid",
117 |               color: "red",
118 |               title:
119 |                 response._data?.message ??
120 |                 response.statusText ??
121 |                 "Something went wrong",
122 |             });
123 |           }
124 |         }
125 |       },
126 |     });
127 | 
128 |     if (auth.logged) {
129 |       await auth.fetchUser();
130 |     }
131 |   },
132 | });
133 | 


--------------------------------------------------------------------------------
/nuxt/app/components/auth/Login.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | const config = useRuntimeConfig();
  3 | const router = useRouter();
  4 | const auth = useAuthStore();
  5 | const form = ref();
  6 | 
  7 | type Provider = {
  8 |   name: string;
  9 |   icon: string;
 10 |   color: string;
 11 |   loading?: boolean;
 12 | };
 13 | 
 14 | const state = reactive({
 15 |   email: "",
 16 |   password: "",
 17 |   remember: false,
 18 | });
 19 | 
 20 | const { refresh: onSubmit, status: loginStatus } = useFetch<any>("login", {
 21 |   method: "POST",
 22 |   body: state,
 23 |   immediate: false,
 24 |   watch: false,
 25 |   async onResponse({ response }) {
 26 |     if (response?.status === 422) {
 27 |       form.value.setErrors(response._data?.errors);
 28 |     } else if (response._data?.ok) {
 29 |       auth.token = response._data.token;
 30 | 
 31 |       await auth.fetchUser();
 32 |       await router.push("/");
 33 |     }
 34 |   }
 35 | });
 36 | 
 37 | const providers = ref<{ [key: string]: Provider }>(config.public.providers);
 38 | 
 39 | async function handleMessage(event: { data: any }): Promise<void> {
 40 |   const provider = event.data.provider as string;
 41 | 
 42 |   if (Object.keys(providers.value).includes(provider) && event.data.token) {
 43 |     providers.value[provider].loading = false;
 44 |     auth.token = event.data.token;
 45 | 
 46 |     await auth.fetchUser();
 47 |     await router.push("/");
 48 |   } else if (event.data.message) {
 49 |     useToast().add({
 50 |       icon: "i-heroicons-exclamation-circle-solid",
 51 |       color: "red",
 52 |       title: event.data.message,
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function loginVia(provider: string): void {
 58 |   providers.value[provider].loading = true;
 59 | 
 60 |   const width = 640;
 61 |   const height = 660;
 62 |   const left = window.screen.width / 2 - width / 2;
 63 |   const top = window.screen.height / 2 - height / 2;
 64 | 
 65 |   const popup = window.open(
 66 |     `${config.public.apiBase}${config.public.apiPrefix}/login/${provider}/redirect`,
 67 |     "Sign In",
 68 |     `toolbar=no, location=no, directories=no, status=no, menubar=no, scollbars=no, resizable=no, copyhistory=no, width=${width},height=${height},top=${top},left=${left}`
 69 |   );
 70 | 
 71 |   const interval = setInterval(() => {
 72 |     if (!popup || popup.closed) {
 73 |       clearInterval(interval);
 74 |       providers.value[provider].loading = false;
 75 |     }
 76 |   }, 500);
 77 | }
 78 | 
 79 | onMounted(() => window.addEventListener("message", handleMessage));
 80 | onBeforeUnmount(() => window.removeEventListener("message", handleMessage));
 81 | </script>
 82 | 
 83 | <template>
 84 |   <div class="space-y-4 z-[99]">
 85 |     <!--
 86 |     <div class="flex gap-4">
 87 |       <UButton v-for="(provider, key) in providers" :key="key" :loading="provider.loading" :icon="provider.icon"
 88 |         :color="provider.color" :label="provider.name" size="lg" class="w-full flex items-center justify-center"
 89 |         @click="loginVia(key as string)" />
 90 |     </div>
 91 | 
 92 |     <UDivider label="OR" />
 93 |     -->
 94 |     <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
 95 |       <UFormGroup label="Email" name="email" required>
 96 |         <UInput v-model="state.email" placeholder="you@example.com" icon="i-heroicons-envelope" trailing type="email"
 97 |           autofocus />
 98 |       </UFormGroup>
 99 | 
100 |       <UFormGroup label="Password" name="password" required>
101 |         <UInput v-model="state.password" type="password" />
102 |       </UFormGroup>
103 | 
104 |       <UTooltip text="for 1 month" :popper="{ placement: 'right' }">
105 |         <UCheckbox v-model="state.remember" label="记住我" />
106 |       </UTooltip>
107 | 
108 |       <div class="flex items-center justify-end space-x-4">
109 |         <NuxtLink class="text-sm" to="/auth/forgot">忘记密码？</NuxtLink>
110 |         <UButton type="submit" label="登陆" :loading="loginStatus === 'pending'" />
111 |       </div>
112 |     </UForm>
113 | 
114 |     <div class="text-sm">
115 |       还没有帐户？
116 |       <NuxtLink class="text-sm" to="/auth/register">创建一个</NuxtLink>
117 |     </div>
118 |   </div>
119 | </template>
120 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![](https://io.onenov.cn/file/202407151458648.png)
  2 | 
  3 | # ChatBot Next
  4 | 
  5 | [![](https://img.shields.io/badge/Laravel-v11-ff2e21.svg)](https://laravel.com)
  6 | [![](https://img.shields.io/badge/nuxt.js-v3-04C690.svg)](https://nuxt.com)
  7 | 
  8 | 无缝集成处理和调度 Dify & Dify on WeChat，Web 可视化多用户管理/一键启动 ChatBot，简化了令人惊叹且响应迅速的 ChatBot 应用程序的创建。
  9 | 
 10 | 请注意：该项目仅用于学习交流使用，Dify 允许被用于商业化，例如作为其他应用的“后端即服务”使用，或者作为应用开发平台提供给企业。然而，当满足以下条件时，必须联系生产者获得商业许可：
 11 | -   多租户 SaaS 服务：除非获得 Dify 的明确书面授权，否则不得使用 Dify.AI 的源码来运营与 Dify.AI 服务版类似的多租户 SaaS 服务。
 12 | -   LOGO 及版权信息：在使用 Dify 的过程中，不得移除或修改 Dify 控制台内的 LOGO 或版权信息。
 13 | 
 14 | ## 演示
 15 | 
 16 | -   [ChatBot Next](https://chatbot-dev.orence.net)
 17 | 
 18 | ## 要求
 19 | 
 20 | -   PHP 8.2 / Node 20+
 21 | -   [**Throttling with Redis**](https://laravel.com/docs/11.x/routing#throttling-with-redis) **Redis**
 22 | -   [**Laravel Octane**](https://laravel.com/docs/11.x/octane) 支持 2 种运行模式：Swoole（php 扩展）或 Roadrunner
 23 | 
 24 | ## 说明
 25 | 
 26 | 仅作为一个框架处理和调度 [**Dify**](https://github.com/langgenius/dify) 和 [**Dify on WeChat**](https://github.com/hanfangyuan4396/dify-on-wechat) 项目，并增加了一堆附加功能，目前只开源前端部分。项目还在处于内部开发阶段，你需要根据文档调整其他项目（Dify 、Dify on WeChat）的部署方式。
 27 | 
 28 | 获取方式：请添加微信 [AOKIEO] 了解获取后端，交流或更多。
 29 | 
 30 | ### 目前已经实现的功能
 31 | 
 32 | #### 用户系统
 33 | 
 34 | -   用户注册、登陆、找回密码、邮箱验证
 35 | -   用户管理
 36 | -   会员管理
 37 | -   卡密兑换
 38 | -   签到
 39 | -   消耗记录
 40 | 
 41 | #### 工作台
 42 | 
 43 | -   应用广场（后台新增开放应用或一些文档）
 44 | -   我创建的（联通 Dify 创建不同类型的应用）
 45 | -   应用模板（获取 Dify 创建的部分应用作为可复制模板）
 46 | -   知识库
 47 | -   自动计算工作台创建的应用消耗的额度，与系统余额关联
 48 | 
 49 | #### 助手
 50 | 
 51 | -   一键创建或启动 Dify on WeChat 的机器人
 52 | -   通过表单弹窗创建
 53 | -   获取日志
 54 | -   个人微信二维码扫码登陆流程
 55 | -   修改配置
 56 | -   启动、停止、删除
 57 | 
 58 | 支持一键启动下面的应用类型
 59 | 
 60 | -   个人微信
 61 | -   企业微信应用
 62 | -   企业服务公众号
 63 | -   个人订阅公众号
 64 | -   企业微信客服
 65 | -   飞书
 66 | 
 67 | ---
 68 | 
 69 | 支持联通 Dify 的应用类型
 70 | 
 71 | -   chatbot(对应聊天助手)
 72 | -   agent(对应 Agent)
 73 | -   workflow(对应工作流)
 74 | 
 75 | ## 待开发的功能
 76 | 
 77 | -   [ ] 签到自定义延长会员有效期或增加余额
 78 | -   [ ] 支持 coze 机器人
 79 | -   [ ] 创建应用增加更多可视化部署
 80 | -   [ ] 数据清洗模块
 81 | 
 82 | ## Links
 83 | 
 84 | -   [Nuxt 3](https://nuxt.com/)
 85 | -   [Nuxt UI](https://ui.nuxt.com/)
 86 | -   [Nuxt UI Pro](https://ui.nuxt.com/pro/getting-started)
 87 | -   [Arco Design VUE](https://arco.design/vue/docs/start)
 88 | -   [Tailwind CSS](https://tailwindcss.com/)
 89 | -   [Laravel 11x](https://laravel.com/docs/11.x)
 90 | 
 91 | ## Framework Features
 92 | 
 93 | -   [**Laravel 11**](https://laravel.com/docs/11.x) and [**Nuxt 3**](https://nuxt.com/)
 94 | -   [**Laravel Octane**](https://laravel.com/docs/11.x/octane) supercharges your application's performance by serving your application using high-powered application servers.
 95 | -   [**Laravel Telescope**](https://laravel.com/docs/11.x/telescope) provides insight into the requests coming into your application, exceptions, log entries, database queries, queued jobs, mail, notifications, cache operations, scheduled tasks, variable dumps, and more.
 96 | -   [**Laravel Sanctum**](https://laravel.com/docs/11.x/sanctum) Token-based authorization is compatible with **SSR** and **CSR**
 97 | -   [**Laravel Socialite**](https://laravel.com/docs/11.x/socialite) OAuth providers
 98 | -   [**Laravel Sail**](https://laravel.com/docs/11.x/sail) Light-weight command-line interface for interacting with Laravel's default Docker development environment.
 99 | -   [**Spatie Laravel Permissions**](https://spatie.be/docs/laravel-permission/v6/introduction) This package allows you to manage user permissions and roles in a database.
100 | -   UI library [**Nuxt UI**](https://ui.nuxt.com/) based on [**TailwindCSS**](https://tailwindui.com/) and [**HeadlessUI**](https://headlessui.com/).
101 | -   [**Pinia**](https://pinia.vuejs.org/ssr/nuxt.html) The intuitive store for Vue.js
102 | -   Integrated pages: login, registration, password recovery, email confirmation, account information update, password change.
103 | -   Temporary uploads with cropping and optimization of images.
104 | -   Device management
105 | -   [**ofetch**](https://github.com/unjs/ofetch) preset for working with Laravel API, which makes it possible
106 |     use $**fetch** without having to resort to custom $**fetch** wrappers.
107 | 
108 | ### Authentication
109 | 
110 | **useAuthStore()** has everything you need to work with authorization.
111 | 
112 | Data returned by **useAuthStore**:
113 | 
114 | -   `logged`: Boolean, whether the user is authorized
115 | -   `token`: Cookie, sanctum token
116 | -   `user`: User object, user stored in pinia store
117 | -   `logout`: Function, remove local data and call API to remove token
118 | -   `fetchUser`: Function, fetch user data
119 | 
120 | ### Nuxt Middleware
121 | 
122 | The following middleware is supported:
123 | 
124 | -   `guest`: unauthorized users
125 | -   `auth`: authorized users
126 | -   `verified`: users who have confirmed their email
127 | -   `role-user`: users with the 'user' role
128 | -   `role-admin`: users with the 'admin' role
129 | 
130 | ### Laravel Middleware
131 | 
132 | All built-in middleware from Laravel + middleware based on roles [**Spatie Laravel Permissions Middleware**](https://spatie.be/docs/laravel-permission/v6/basic-usage/middleware)
133 | 


--------------------------------------------------------------------------------
/nuxt/app/components/app/Signin.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <ClientOnly>
  3 |     <UButton v-if="announcements.length > 0" icon="i-heroicons-envelope" size="sm" color="primary" square variant="soft"
  4 |       @click="showAnnouncement" />
  5 |     <UButton v-if="!signedIn && auth.logged" icon="i-heroicons-calendar-days" size="sm" color="primary" square
  6 |       variant="soft" @click="signIn" />
  7 |     <!-- 公告弹窗 -->
  8 |     <div v-for="(announcement, index) in announcements" :key="index">
  9 |       <a-modal v-model:visible="announcement.visible" title="公告" :hide-cancel="true" @ok="closeAnnouncement(index)"
 10 |         width="auto">
 11 |         <div v-html="announcement.content"></div>
 12 |       </a-modal>
 13 |     </div>
 14 |   </ClientOnly>
 15 | </template>
 16 | 
 17 | <script lang="ts" setup>
 18 | import { ref, onMounted } from 'vue';
 19 | import { Modal, Notification } from '@arco-design/web-vue';
 20 | const router = useRouter();
 21 | const auth = useAuthStore();
 22 | const signedIn = ref(false);
 23 | const toast = useToast();
 24 | const announcements = ref([]);
 25 | const notices = ref([]);
 26 | 
 27 | const closeAnnouncement = (index: number) => {
 28 |   announcements.value[index].visible = false;
 29 | };
 30 | 
 31 | const fetchAnnouncements = async () => {
 32 |   const { refresh: fetchData } = useFetch<any>('/get_announcements', {
 33 |     method: 'GET',
 34 |     immediate: true,
 35 |     watch: false,
 36 |     onResponse({ response }) {
 37 |       if (response?.status === 200) {
 38 |         announcements.value = response._data.map(announcement => ({
 39 |           ...announcement,
 40 |           visible: false, // 初始状态设为不可见
 41 |         }));
 42 |       } else {
 43 |         toast.add({
 44 |           icon: 'i-heroicons-x-circle-20-solid',
 45 |           title: response?._data?.message || '获取公告时出现问题',
 46 |           color: 'red',
 47 |         });
 48 |       }
 49 |     },
 50 |     onError(error) {
 51 |       toast.add({
 52 |         icon: 'i-heroicons-x-circle-20-solid',
 53 |         title: '获取公告时出现错误',
 54 |         color: 'red',
 55 |       });
 56 |     },
 57 |   });
 58 |   await fetchData();
 59 | };
 60 | 
 61 | const fetchNotices = async () => {
 62 |   const { refresh: fetchData } = useFetch<any>('/get_notices', {
 63 |     method: 'GET',
 64 |     immediate: true,
 65 |     watch: false,
 66 |     onResponse({ response }) {
 67 |       if (response?.status === 200) {
 68 |         notices.value = response._data.map(notice => ({
 69 |           ...notice,
 70 |         }));
 71 |         showNotices();
 72 |       } else {
 73 |         toast.add({
 74 |           icon: 'i-heroicons-x-circle-20-solid',
 75 |           title: response?._data?.message || '获取通知时出现问题',
 76 |           color: 'red',
 77 |         });
 78 |       }
 79 |     },
 80 |     onError(error) {
 81 |       toast.add({
 82 |         icon: 'i-heroicons-x-circle-20-solid',
 83 |         title: '获取通知时出现错误',
 84 |         color: 'red',
 85 |       });
 86 |     },
 87 |   });
 88 |   await fetchData();
 89 | };
 90 | 
 91 | const showNotices = () => {
 92 |   const lastNoticeTime = localStorage.getItem('last_notice_time');
 93 |   const oneDay = 24 * 60 * 60 * 1000;
 94 |   const currentTime = new Date().getTime();
 95 | 
 96 |   if (!lastNoticeTime || currentTime - parseInt(lastNoticeTime, 10) > oneDay) {
 97 |     notices.value.forEach((notice: any) => {
 98 |       Notification.info({
 99 |         title: notice.title,
100 |         content: notice.content,
101 |         duration: 5000,
102 |         dangerouslySetInnerHTML: true,
103 |       });
104 |     });
105 |     localStorage.setItem('last_notice_time', currentTime.toString());
106 |   }
107 | };
108 | 
109 | const showAnnouncement = () => {
110 |   announcements.value.forEach((announcement: any) => {
111 |     announcement.visible = true;
112 |   });
113 | };
114 | 
115 | const showAnnouncements = () => {
116 |   const lastAnnouncementTime = localStorage.getItem('last_announcement_time');
117 |   const oneDay = 24 * 60 * 60 * 1000;
118 |   const currentTime = new Date().getTime();
119 | 
120 |   // 检查是否需要显示公告
121 |   const shouldShowAnnouncements = !lastAnnouncementTime || currentTime - parseInt(lastAnnouncementTime, 10) > oneDay;
122 | 
123 |   if (shouldShowAnnouncements) {
124 |     setTimeout(() => {
125 |       announcements.value.forEach((announcement: any) => {
126 |         announcement.visible = true;
127 |       });
128 |       // 更新本地存储
129 |       localStorage.setItem('last_announcement_time', currentTime.toString());
130 |     }, 1000);
131 |   } else {
132 |     announcements.value.forEach((announcement: any) => {
133 |       announcement.visible = false;
134 |     });
135 |   }
136 | };
137 | 
138 | const checkSignin = async () => {
139 |   const { refresh: fetchData } = useFetch<any>('/check-signin', {
140 |     method: 'POST',
141 |     body: { userid: auth.user.id.toString() },
142 |     immediate: true,
143 |     watch: false,
144 |     onResponse({ response }) {
145 |       if (response?.status === 200) {
146 |         signedIn.value = response._data.signed_in;
147 |       } else {
148 |         toast.add({
149 |           icon: 'i-heroicons-x-circle-20-solid',
150 |           title: response?._data?.message || '签到检测时出现问题',
151 |           color: 'red',
152 |         });
153 |       }
154 |     },
155 |     onError(error) {
156 |       toast.add({
157 |         icon: 'i-heroicons-x-circle-20-solid',
158 |         title: '签到检测时出现错误',
159 |         color: 'red',
160 |       });
161 |     },
162 |   });
163 |   await fetchData();
164 | };
165 | 
166 | const signIn = async () => {
167 |   const { refresh: fetchData } = useFetch<any>('/signin', {
168 |     method: 'POST',
169 |     body: { userid: auth.user.id.toString() },
170 |     immediate: true,
171 |     watch: false,
172 |     onResponse({ response }) {
173 |       if (response?.status === 200 && response._data.success) {
174 |         signedIn.value = true;
175 |         toast.add({
176 |           icon: 'i-heroicons-check-circle-20-solid',
177 |           title: '签到成功',
178 |           color: 'green',
179 |         });
180 |       } else {
181 |         toast.add({
182 |           icon: 'i-heroicons-x-circle-20-solid',
183 |           title: response?._data?.message || '签到时出现问题',
184 |           color: 'red',
185 |         });
186 |       }
187 |     },
188 |     onError(error) {
189 |       toast.add({
190 |         icon: 'i-heroicons-x-circle-20-solid',
191 |         title: '签到时出现错误',
192 |         color: 'red',
193 |       });
194 |     },
195 |   });
196 |   await fetchData();
197 | };
198 | 
199 | onMounted(() => {
200 |   if (auth.logged) {
201 |     checkSignin();
202 |   }
203 |   fetchAnnouncements().then(() => {
204 |     showAnnouncements();
205 |   });
206 |   fetchNotices();
207 | });
208 | </script>
209 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/price.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <HomeTetris />
  3 |   <UPageHero class="z-[40] mb-4" title="一站式 AI 智能体搭建平台" description="打造 7*24h 在线智能客服" align="left">
  4 |     <div class="mb-4" v-if="auth.logged">
  5 |       <p class="text-2xl font-bold mb-2 mt-10">会员兑换</p>
  6 | 
  7 |       <p class="text-lg mb-2 mr-10 flex">你可以使用我们的测试卡密 <UBadge class="ml-2" size="xs" color="orange">
  8 |           testcard
  9 |         </UBadge>
 10 |       </p>
 11 |       <a-input-search v-model:value="cardCode" :style="{ width: '100%' }" size="large" placeholder="填写兑换卡密"
 12 |         button-text="兑换" search-button @search="handleRedeemCard" allow-clear />
 13 |     </div>
 14 |   </UPageHero>
 15 | 
 16 |   <div v-if="vips.length > 0" class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3 gap-4 p-2">
 17 |     <UPricingCard v-for="(vip, index) in vips" :key="index" :title="vip.title" :description="vip.subtitle"
 18 |       :price="vip.price" :discount="vip.discount_price" :cycle="`/${vip.valid_days}天`"
 19 |       :highlight="vip.testimonials === 1" :badge="{ label: `可创建${vip.ration}个Bot` }"
 20 |       :button="{ label: 'Buy now', onClick: handleBuyNow }" orientation="vertical" align="bottom"
 21 |       :features="[vip.description1, vip.description2, vip.description3, vip.description4]" />
 22 |   </div>
 23 |   <UDivider label="OR" />
 24 |   <div v-if="highestVip" class="p-2">
 25 |     <UPricingCard :title="highestVip.title" :description="highestVip.subtitle" :price="highestVip.price"
 26 |       :discount="highestVip.discount_price" :cycle="`/${highestVip.valid_days}天`"
 27 |       :highlight="highestVip.testimonials === 1" :badge="{ label: `可创建${highestVip.ration}个Bot` }"
 28 |       :button="{ label: 'Buy now', onClick: handleBuyNow }" orientation="horizontal" align="bottom"
 29 |       :features="[highestVip.description1, highestVip.description2, highestVip.description3, highestVip.description4]" />
 30 |   </div>
 31 | 
 32 | 
 33 | 
 34 |   <UPageHero class="z-[40] mb-4" title="常见问题" description="如果你有更多未解决的问题，请联系客服。" align="center" :links="[{ label: '个人中心', size: 'lg', to: '/account/general' }, {
 35 |     label: '联系客服', color: 'gray'
 36 |     , size: 'lg', trailingIcon: 'i-heroicons-arrow-right-20-solid', click: handleContactUs
 37 |   }]">
 38 |   </UPageHero>
 39 | 
 40 |   <div class="p-2 mt-4">
 41 |     <ULandingFAQ :items="items" multiple />
 42 |   </div>
 43 |   <Modal v-model:visible="modalVisible" :title="isContact ? '联系客服' : '扫码支付'" okText="确认" @ok="modalVisible = false"
 44 |     :footer="false" width="auto">
 45 |     <div class="max-w-xs">
 46 |       <img :src="modalImageSrc" alt="展示图片" style="width: 100%;" />
 47 |     </div>
 48 |     <a-alert banner center v-if="isContact" type="info" show-icon>
 49 |       请扫码添加客服
 50 |     </a-alert>
 51 |     <a-alert banner center v-else type="info" show-icon>
 52 |       请在支付成功后联系客服
 53 |     </a-alert>
 54 |   </Modal>
 55 | </template>
 56 | <script setup lang="ts">
 57 | import { Modal } from '@arco-design/web-vue';
 58 | import { useAuthStore } from '@/stores/auth';
 59 | 
 60 | import { storeToRefs } from 'pinia';
 61 | import { useSettingsStore } from '@/stores/settings';
 62 | 
 63 | const settingsStore = useSettingsStore();
 64 | const { settings } = storeToRefs(settingsStore);
 65 | 
 66 | const auth = useAuthStore();
 67 | 
 68 | useSeoMeta({
 69 |   title: '会员',
 70 | })
 71 | 
 72 | const items = [{
 73 |   label: 'ChatBotNext 怎么收费？',
 74 |   content: '平台根据 资源容量、功能权益、服务支持 的不同，划分不同的版本套餐，为不同需求的客户提供可选择的版本订阅服务。'
 75 | }, {
 76 |   label: '配额是什么？',
 77 |   content: '配额是可以启动机器人的数量。'
 78 | }, {
 79 |   label: '余额用来做什么？',
 80 |   content: '余额用来抵扣工作台创建应用的消耗。'
 81 | }, {
 82 |   label: '我应该怎么付费？',
 83 |   content: '我们暂不提供在线支付购买套餐，你可以获取有效卡密兑换会员。'
 84 | }]
 85 | 
 86 | const vips = ref([]);
 87 | const highestVip = ref(null);
 88 | const cardCode = ref('');
 89 | const toast = useToast();
 90 | 
 91 | const fetchVips = async () => {
 92 |   const { refresh: fetchData } = useFetch('/vips', {
 93 |     method: 'GET',
 94 |     immediate: true,
 95 |     watch: false,
 96 |     onResponse({ response }) {
 97 |       if (response?.status === 200) {
 98 |         const data = response._data;
 99 |         data.sort((a, b) => a.level - b.level); // 按等级升序排序
100 |         highestVip.value = data.pop(); // 提取最高等级的会员信息
101 |         vips.value = data; // 剩下的会员信息
102 |       } else {
103 |         toast.add({
104 |           icon: 'i-heroicons-x-circle-20-solid',
105 |           title: response?._data?.message || '获取套餐时出现问题',
106 |           color: 'red',
107 |         });
108 |       }
109 |     },
110 |     onError(error) {
111 |       toast.add({
112 |         icon: 'i-heroicons-x-circle-20-solid',
113 |         title: '获取套餐时出现错误',
114 |         color: 'red',
115 |       });
116 |     },
117 |   });
118 | 
119 |   await fetchData();
120 | };
121 | const handleRedeemCard = async (value: string, ev: MouseEvent) => {
122 |   if (!value.trim()) {
123 |     toast.add({
124 |       icon: 'i-heroicons-x-circle-20-solid',
125 |       title: '请输入有效的卡密',
126 |       color: 'red',
127 |     });
128 |     return;
129 |   }
130 | 
131 |   const { refresh: redeemCard } = useFetch('/redeem-card', {
132 |     method: 'POST',
133 |     body: { userid: auth.user.id, card_code: value },
134 |     immediate: false,
135 |     watch: false,
136 |     onResponse({ response }) {
137 |       if (response?.status === 200) {
138 |         toast.add({
139 |           icon: 'i-heroicons-check-circle-20-solid',
140 |           title: response._data.message,
141 |           color: 'emerald',
142 |         });
143 |         fetchVips();
144 |       } else {
145 |         toast.add({
146 |           icon: 'i-heroicons-x-circle-20-solid',
147 |           title: response?._data?.message || '兑换卡密时出现问题',
148 |           color: 'red',
149 |         });
150 |       }
151 |     },
152 |     onError(error) {
153 |       toast.add({
154 |         icon: 'i-heroicons-x-circle-20-solid',
155 |         title: '兑换卡密时出现错误',
156 |         color: 'red',
157 |       });
158 |     },
159 |   });
160 |   await redeemCard();
161 | };
162 | const modalVisible = ref(false);
163 | const modalImageSrc = ref('');
164 | const isContact = ref(false);
165 | const handleContactUs = () => {
166 |   const customerUrl = settings.value.Customer;
167 |   const isImage = /\.(png|jpe?g|webp)$/i.test(customerUrl);
168 |   if (isImage) {
169 |     isContact.value = true;
170 |     modalImageSrc.value = customerUrl;
171 |     modalVisible.value = true;
172 |   } else {
173 |     window.open(customerUrl, '_blank');
174 |   }
175 | };
176 | 
177 | const handleBuyNow = () => {
178 |   const purchaseUrl = settings.value.Purchase;
179 |   const isImage = /\.(png|jpe?g|webp)$/i.test(purchaseUrl);
180 |   if (isImage) {
181 |     isContact.value = false;
182 |     modalImageSrc.value = purchaseUrl;
183 |     modalVisible.value = true;
184 |   } else {
185 |     window.open(purchaseUrl, '_blank');
186 |   }
187 | };
188 | onMounted(() => {
189 |   fetchVips();
190 | });
191 | </script>
192 | 


--------------------------------------------------------------------------------
/nuxt/app/assets/css/dark.css:
--------------------------------------------------------------------------------
  1 | .dark body {
  2 |     --color-white: rgba(255, 255, 255, 0.9) !important;
  3 |     --color-black: #000000 !important;
  4 |     --color-border: #333335 !important;
  5 |     --color-bg-1: #17171a !important;
  6 |     --color-bg-2: #232324 !important;
  7 |     --color-bg-3: #2a2a2b !important;
  8 |     --color-bg-4: #313132 !important;
  9 |     --color-bg-5: #373739 !important;
 10 |     --color-bg-white: #f6f6f6 !important;
 11 |     --color-text-1: rgba(255, 255, 255, 0.9) !important;
 12 |     --color-text-2: rgba(255, 255, 255, 0.7) !important;
 13 |     --color-text-3: rgba(255, 255, 255, 0.5) !important;
 14 |     --color-text-4: rgba(255, 255, 255, 0.3) !important;
 15 |     --color-fill-1: rgba(255, 255, 255, 0.04) !important;
 16 |     --color-fill-2: rgba(255, 255, 255, 0.08) !important;
 17 |     --color-fill-3: rgba(255, 255, 255, 0.12) !important;
 18 |     --color-fill-4: rgba(255, 255, 255, 0.16) !important;
 19 |     --color-primary-light-1: rgba(var(--primary-6), 0.2) !important;
 20 |     --color-primary-light-2: rgba(var(--primary-6), 0.35) !important;
 21 |     --color-primary-light-3: rgba(var(--primary-6), 0.5) !important;
 22 |     --color-primary-light-4: rgba(var(--primary-6), 0.65) !important;
 23 |     --color-secondary: rgba(var(--gray-9), 0.08) !important;
 24 |     --color-secondary-hover: rgba(var(--gray-8), 0.16) !important;
 25 |     --color-secondary-active: rgba(var(--gray-7), 0.24) !important;
 26 |     --color-secondary-disabled: rgba(var(--gray-9), 0.08) !important;
 27 |     --color-danger-light-1: rgba(var(--danger-6), 0.2) !important;
 28 |     --color-danger-light-2: rgba(var(--danger-6), 0.35) !important;
 29 |     --color-danger-light-3: rgba(var(--danger-6), 0.5) !important;
 30 |     --color-danger-light-4: rgba(var(--danger-6), 0.65) !important;
 31 |     --color-success-light-1: rgb(var(--success-6), 0.2) !important;
 32 |     --color-success-light-2: rgb(var(--success-6), 0.35) !important;
 33 |     --color-success-light-3: rgb(var(--success-6), 0.5) !important;
 34 |     --color-success-light-4: rgb(var(--success-6), 0.65) !important;
 35 |     --color-warning-light-1: rgb(var(--warning-6), 0.2) !important;
 36 |     --color-warning-light-2: rgb(var(--warning-6), 0.35) !important;
 37 |     --color-warning-light-3: rgb(var(--warning-6), 0.5) !important;
 38 |     --color-warning-light-4: rgb(var(--warning-6), 0.65) !important;
 39 |     --color-link-light-1: rgb(var(--link-6), 0.2) !important;
 40 |     --color-link-light-2: rgb(var(--link-6), 0.35) !important;
 41 |     --color-link-light-3: rgb(var(--link-6), 0.5) !important;
 42 |     --color-link-light-4: rgb(var(--link-6), 0.65) !important;
 43 |     --color-tooltip-bg: #373739 !important;
 44 |     --color-spin-layer-bg: rgba(51, 51, 51, 0.6) !important;
 45 |     --color-menu-dark-bg: #232324 !important;
 46 |     --color-menu-light-bg: #232324 !important;
 47 |     --color-menu-dark-hover: var(--color-fill-2) !important;
 48 |     --color-mask-bg: rgba(23, 23, 26, 0.6) !important;
 49 |     --red-1: 77, 0, 10 !important;
 50 |     --red-2: 119, 6, 17 !important;
 51 |     --red-3: 161, 22, 31 !important;
 52 |     --red-4: 203, 46, 52 !important;
 53 |     --red-5: 245, 78, 78 !important;
 54 |     --red-6: 247, 105, 101 !important;
 55 |     --red-7: 249, 141, 134 !important;
 56 |     --red-8: 251, 176, 167 !important;
 57 |     --red-9: 253, 209, 202 !important;
 58 |     --red-10: 255, 240, 236 !important;
 59 |     --orangered-1: 77, 14, 0 !important;
 60 |     --orangered-2: 119, 30, 5 !important;
 61 |     --orangered-3: 162, 55, 20 !important;
 62 |     --orangered-4: 204, 87, 41 !important;
 63 |     --orangered-5: 247, 126, 69 !important;
 64 |     --orangered-6: 249, 146, 90 !important;
 65 |     --orangered-7: 250, 173, 125 !important;
 66 |     --orangered-8: 252, 198, 161 !important;
 67 |     --orangered-9: 253, 222, 197 !important;
 68 |     --orangered-10: 255, 244, 235 !important;
 69 |     --orange-1: 77, 27, 0 !important;
 70 |     --orange-2: 121, 48, 4 !important;
 71 |     --orange-3: 166, 75, 10 !important;
 72 |     --orange-4: 210, 105, 19 !important;
 73 |     --orange-5: 255, 141, 31 !important;
 74 |     --orange-6: 255, 150, 38 !important;
 75 |     --orange-7: 255, 179, 87 !important;
 76 |     --orange-8: 255, 205, 135 !important;
 77 |     --orange-9: 255, 227, 184 !important;
 78 |     --orange-10: 255, 247, 232 !important;
 79 |     --gold-1: 77, 45, 0 !important;
 80 |     --gold-2: 119, 75, 4 !important;
 81 |     --gold-3: 162, 111, 15 !important;
 82 |     --gold-4: 204, 150, 31 !important;
 83 |     --gold-5: 247, 192, 52 !important;
 84 |     --gold-6: 249, 204, 68 !important;
 85 |     --gold-7: 250, 220, 108 !important;
 86 |     --gold-8: 252, 233, 149 !important;
 87 |     --gold-9: 253, 244, 190 !important;
 88 |     --gold-10: 255, 252, 232 !important;
 89 |     --yellow-1: 77, 56, 0 !important;
 90 |     --yellow-2: 120, 94, 7 !important;
 91 |     --yellow-3: 163, 134, 20 !important;
 92 |     --yellow-4: 207, 179, 37 !important;
 93 |     --yellow-5: 250, 225, 60 !important;
 94 |     --yellow-6: 251, 233, 75 !important;
 95 |     --yellow-7: 252, 243, 116 !important;
 96 |     --yellow-8: 253, 250, 157 !important;
 97 |     --yellow-9: 254, 254, 198 !important;
 98 |     --yellow-10: 254, 255, 240 !important;
 99 |     --lime-1: 42, 77, 0 !important;
100 |     --lime-2: 68, 112, 6 !important;
101 |     --lime-3: 98, 148, 18 !important;
102 |     --lime-4: 132, 183, 35 !important;
103 |     --lime-5: 168, 219, 57 !important;
104 |     --lime-6: 184, 226, 75 !important;
105 |     --lime-7: 203, 233, 112 !important;
106 |     --lime-8: 222, 241, 152 !important;
107 |     --lime-9: 238, 248, 194 !important;
108 |     --lime-10: 253, 255, 238 !important;
109 |     --green-1: 0, 77, 28 !important;
110 |     --green-2: 4, 102, 37 !important;
111 |     --green-3: 10, 128, 45 !important;
112 |     --green-4: 18, 154, 55 !important;
113 |     --green-5: 29, 180, 64 !important;
114 |     --green-6: 39, 195, 70 !important;
115 |     --green-7: 80, 210, 102 !important;
116 |     --green-8: 126, 225, 139 !important;
117 |     --green-9: 178, 240, 183 !important;
118 |     --green-10: 235, 255, 236 !important;
119 |     --cyan-1: 0, 66, 77 !important;
120 |     --cyan-2: 6, 97, 108 !important;
121 |     --cyan-3: 17, 131, 139 !important;
122 |     --cyan-4: 31, 166, 170 !important;
123 |     --cyan-5: 48, 201, 201 !important;
124 |     --cyan-6: 63, 212, 207 !important;
125 |     --cyan-7: 102, 223, 215 !important;
126 |     --cyan-8: 144, 233, 225 !important;
127 |     --cyan-9: 190, 244, 237 !important;
128 |     --cyan-10: 240, 255, 252 !important;
129 |     --blue-1: 0, 26, 77 !important;
130 |     --blue-2: 5, 47, 120 !important;
131 |     --blue-3: 19, 76, 163 !important;
132 |     --blue-4: 41, 113, 207 !important;
133 |     --blue-5: 70, 154, 250 !important;
134 |     --blue-6: 90, 170, 251 !important;
135 |     --blue-7: 125, 193, 252 !important;
136 |     --blue-8: 161, 213, 253 !important;
137 |     --blue-9: 198, 232, 254 !important;
138 |     --blue-10: 234, 248, 255 !important;
139 |     --arcoblue-1: 0, 13, 77 !important;
140 |     --arcoblue-2: 4, 27, 121 !important;
141 |     --arcoblue-3: 14, 50, 166 !important;
142 |     --arcoblue-4: 29, 77, 210 !important;
143 |     --arcoblue-5: 48, 111, 255 !important;
144 |     --arcoblue-6: 60, 126, 255 !important;
145 |     --arcoblue-7: 104, 159, 255 !important;
146 |     --arcoblue-8: 147, 190, 255 !important;
147 |     --arcoblue-9: 190, 218, 255 !important;
148 |     --arcoblue-10: 234, 244, 255 !important;
149 |     --purple-1: 22, 0, 77 !important;
150 |     --purple-2: 39, 6, 110 !important;
151 |     --purple-3: 62, 19, 143 !important;
152 |     --purple-4: 90, 37, 176 !important;
153 |     --purple-5: 123, 61, 209 !important;
154 |     --purple-6: 142, 81, 218 !important;
155 |     --purple-7: 169, 116, 227 !important;
156 |     --purple-8: 197, 154, 237 !important;
157 |     --purple-9: 223, 194, 246 !important;
158 |     --purple-10: 247, 237, 255 !important;
159 |     --pinkpurple-1: 66, 0, 77 !important;
160 |     --pinkpurple-2: 101, 3, 112 !important;
161 |     --pinkpurple-3: 138, 13, 147 !important;
162 |     --pinkpurple-4: 176, 27, 182 !important;
163 |     --pinkpurple-5: 217, 46, 217 !important;
164 |     --pinkpurple-6: 225, 61, 219 !important;
165 |     --pinkpurple-7: 232, 102, 223 !important;
166 |     --pinkpurple-8: 240, 146, 230 !important;
167 |     --pinkpurple-9: 247, 193, 240 !important;
168 |     --pinkpurple-10: 255, 242, 253 !important;
169 |     --magenta-1: 77, 0, 52 !important;
170 |     --magenta-2: 119, 8, 80 !important;
171 |     --magenta-3: 161, 23, 108 !important;
172 |     --magenta-4: 203, 43, 136 !important;
173 |     --magenta-5: 245, 69, 166 !important;
174 |     --magenta-6: 247, 86, 169 !important;
175 |     --magenta-7: 249, 122, 184 !important;
176 |     --magenta-8: 251, 158, 200 !important;
177 |     --magenta-9: 253, 195, 219 !important;
178 |     --magenta-10: 255, 232, 241 !important;
179 |     --gray-1: 23, 23, 26 !important;
180 |     --gray-2: 46, 46, 48 !important;
181 |     --gray-3: 72, 72, 73 !important;
182 |     --gray-4: 95, 95, 96 !important;
183 |     --gray-5: 120, 120, 122 !important;
184 |     --gray-6: 146, 146, 147 !important;
185 |     --gray-7: 171, 171, 172 !important;
186 |     --gray-8: 197, 197, 197 !important;
187 |     --gray-9: 223, 223, 223 !important;
188 |     --gray-10: 246, 246, 246 !important;
189 |     --primary-1: 232, 255, 244 !important;
190 |     --primary-2: 187, 243, 219 !important;
191 |     --primary-3: 145, 231, 196 !important;
192 |     --primary-4: 106, 219, 178 !important;
193 |     --primary-5: 71, 207, 162 !important;
194 |     --primary-6: 9, 189, 127 !important;
195 |     --primary-7: 25, 165, 128 !important;
196 |     --primary-8: 14, 136, 107 !important;
197 |     --primary-9: 5, 106, 86 !important;
198 |     --primary-10: 0, 77, 64 !important;
199 |     --link-1: 0, 14, 77 !important;
200 |     --link-2: 13, 30, 95 !important;
201 |     --link-3: 32, 52, 113 !important;
202 |     --link-4: 57, 78, 131 !important;
203 |     --link-5: 87, 107, 149 !important;
204 |     --link-6: 125, 141, 170 !important;
205 |     --link-7: 150, 166, 191 !important;
206 |     --link-8: 178, 192, 213 !important;
207 |     --link-9: 207, 219, 234 !important;
208 |     --link-10: 238, 246, 255 !important;
209 |     --success-1: var(--green-1) !important;
210 |     --success-2: var(--green-2) !important;
211 |     --success-3: var(--green-3) !important;
212 |     --success-4: var(--green-4) !important;
213 |     --success-5: var(--green-5) !important;
214 |     --success-6: var(--green-6) !important;
215 |     --success-7: var(--green-7) !important;
216 |     --success-8: var(--green-8) !important;
217 |     --success-9: var(--green-9) !important;
218 |     --success-10: var(--green-10) !important;
219 |     --danger-1: 77, 0, 10 !important;
220 |     --danger-2: 120, 9, 20 !important;
221 |     --danger-3: 163, 28, 38 !important;
222 |     --danger-4: 207, 57, 62 !important;
223 |     --danger-5: 250, 93, 93 !important;
224 |     --danger-6: 251, 123, 119 !important;
225 |     --danger-7: 252, 154, 147 !important;
226 |     --danger-8: 253, 183, 176 !important;
227 |     --danger-9: 254, 211, 204 !important;
228 |     --danger-10: 255, 237, 233 !important;
229 |     --warning-1: 77, 48, 0 !important;
230 |     --warning-2: 121, 82, 4 !important;
231 |     --warning-3: 166, 119, 10 !important;
232 |     --warning-4: 210, 159, 19 !important;
233 |     --warning-5: 255, 202, 31 !important;
234 |     --warning-6: 255, 211, 38 !important;
235 |     --warning-7: 255, 227, 87 !important;
236 |     --warning-8: 255, 240, 135 !important;
237 |     --warning-9: 255, 248, 184 !important;
238 |     --warning-10: 255, 253, 232 !important;
239 | }
240 | 


--------------------------------------------------------------------------------
/nuxt/app/assets/css/style.min.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     --color-white: #ffffff !important;
  3 |     --color-black: #000000 !important;
  4 |     --color-border: rgb(var(--gray-3)) !important;
  5 |     --color-bg-popup: var(--color-bg-5) !important;
  6 |     --color-bg-1: #fff !important;
  7 |     --color-bg-2: #fff !important;
  8 |     --color-bg-3: #fff !important;
  9 |     --color-bg-4: #fff !important;
 10 |     --color-bg-5: #fff !important;
 11 |     --color-bg-white: #fff !important;
 12 |     --color-neutral-1: rgb(var(--gray-1)) !important;
 13 |     --color-neutral-2: rgb(var(--gray-2)) !important;
 14 |     --color-neutral-3: rgb(var(--gray-3)) !important;
 15 |     --color-neutral-4: rgb(var(--gray-4)) !important;
 16 |     --color-neutral-5: rgb(var(--gray-5)) !important;
 17 |     --color-neutral-6: rgb(var(--gray-6)) !important;
 18 |     --color-neutral-7: rgb(var(--gray-7)) !important;
 19 |     --color-neutral-8: rgb(var(--gray-8)) !important;
 20 |     --color-neutral-9: rgb(var(--gray-9)) !important;
 21 |     --color-neutral-10: rgb(var(--gray-10)) !important;
 22 |     --color-text-1: var(--color-neutral-10) !important;
 23 |     --color-text-2: var(--color-neutral-8) !important;
 24 |     --color-text-3: var(--color-neutral-6) !important;
 25 |     --color-text-4: var(--color-neutral-4) !important;
 26 |     --color-border-1: #ebebeb !important;
 27 |     --color-border-2: #d5d8dd !important;
 28 |     --color-border-3: var(--color-neutral-4) !important;
 29 |     --color-border-4: #9da4ae !important;
 30 |     --color-fill-1: var(--color-neutral-1) !important;
 31 |     --color-fill-2: var(--color-neutral-2) !important;
 32 |     --color-fill-3: var(--color-neutral-3) !important;
 33 |     --color-fill-4: var(--color-neutral-4) !important;
 34 |     --color-primary-light-1: rgb(var(--primary-1)) !important;
 35 |     --color-primary-light-2: rgb(var(--primary-2)) !important;
 36 |     --color-primary-light-3: rgb(var(--primary-3)) !important;
 37 |     --color-primary-light-4: rgb(var(--primary-4)) !important;
 38 |     --color-secondary: var(--color-neutral-2) !important;
 39 |     --color-secondary-hover: var(--color-neutral-3) !important;
 40 |     --color-secondary-active: var(--color-neutral-4) !important;
 41 |     --color-secondary-disabled: var(--color-neutral-1) !important;
 42 |     --color-danger-light-1: rgb(var(--danger-1)) !important;
 43 |     --color-danger-light-2: rgb(var(--danger-2)) !important;
 44 |     --color-danger-light-3: rgb(var(--danger-3)) !important;
 45 |     --color-danger-light-4: rgb(var(--danger-4)) !important;
 46 |     --color-success-light-1: rgb(var(--success-1)) !important;
 47 |     --color-success-light-2: rgb(var(--success-2)) !important;
 48 |     --color-success-light-3: rgb(var(--success-3)) !important;
 49 |     --color-success-light-4: rgb(var(--success-4)) !important;
 50 |     --color-warning-light-1: rgb(var(--warning-1)) !important;
 51 |     --color-warning-light-2: rgb(var(--warning-2)) !important;
 52 |     --color-warning-light-3: rgb(var(--warning-3)) !important;
 53 |     --color-warning-light-4: rgb(var(--warning-4)) !important;
 54 |     --color-link-light-1: rgb(var(--link-1)) !important;
 55 |     --color-link-light-2: rgb(var(--link-2)) !important;
 56 |     --color-link-light-3: rgb(var(--link-3)) !important;
 57 |     --color-link-light-4: rgb(var(--link-4)) !important;
 58 |     --color-data-1: rgb(var(--arcoblue-5)) !important;
 59 |     --color-data-2: rgb(var(--arcoblue-3)) !important;
 60 |     --color-data-3: rgb(var(--blue-5)) !important;
 61 |     --color-data-4: rgb(var(--blue-3)) !important;
 62 |     --color-data-5: rgb(var(--orange-6)) !important;
 63 |     --color-data-6: rgb(var(--orange-3)) !important;
 64 |     --color-data-7: rgb(var(--green-4)) !important;
 65 |     --color-data-8: rgb(var(--green-3)) !important;
 66 |     --color-data-9: rgb(var(--purple-4)) !important;
 67 |     --color-data-10: rgb(var(--purple-3)) !important;
 68 |     --color-data-11: rgb(var(--gold-6)) !important;
 69 |     --color-data-12: rgb(var(--gold-4)) !important;
 70 |     --color-data-13: rgb(var(--lime-6)) !important;
 71 |     --color-data-14: rgb(var(--lime-4)) !important;
 72 |     --color-data-15: rgb(var(--magenta-4)) !important;
 73 |     --color-data-16: rgb(var(--magenta-3)) !important;
 74 |     --color-data-17: rgb(var(--cyan-6)) !important;
 75 |     --color-data-18: rgb(var(--cyan-3)) !important;
 76 |     --color-data-19: rgb(var(--pinkpurple-4)) !important;
 77 |     --color-data-20: rgb(var(--pinkpurple-2)) !important;
 78 |     --border-radius-none: 0 !important;
 79 |     --border-radius-small: 0.375rem !important;
 80 |     --border-radius-medium: 0.375rem !important;
 81 |     --border-radius-large: 0.375rem !important;
 82 |     --border-radius-circle: 50% !important;
 83 |     --color-tooltip-bg: rgb(var(--gray-10)) !important;
 84 |     --color-spin-layer-bg: rgba(255, 255, 255, 0.6) !important;
 85 |     --color-menu-dark-bg: #232324 !important;
 86 |     --color-menu-light-bg: #ffffff !important;
 87 |     --color-menu-dark-hover: rgba(255, 255, 255, 0.04) !important;
 88 |     --color-mask-bg: rgba(29, 33, 41, 0.6) !important;
 89 |     --font-weight-100: 100 !important;
 90 |     --font-weight-200: 200 !important;
 91 |     --font-weight-300: 300 !important;
 92 |     --font-weight-400: 400 !important;
 93 |     --font-weight-500: 500 !important;
 94 |     --font-weight-600: 600 !important;
 95 |     --font-weight-700: 700 !important;
 96 |     --font-weight-800: 800 !important;
 97 |     --font-weight-900: 900 !important;
 98 |     --red-1: 255, 236, 232 !important;
 99 |     --red-2: 253, 205, 197 !important;
100 |     --red-3: 251, 172, 163 !important;
101 |     --red-4: 249, 137, 129 !important;
102 |     --red-5: 247, 101, 96 !important;
103 |     --red-6: 245, 63, 63 !important;
104 |     --red-7: 203, 39, 45 !important;
105 |     --red-8: 161, 21, 30 !important;
106 |     --red-9: 119, 8, 19 !important;
107 |     --red-10: 77, 0, 10 !important;
108 |     --orangered-1: 255, 243, 232 !important;
109 |     --orangered-2: 253, 221, 195 !important;
110 |     --orangered-3: 252, 197, 159 !important;
111 |     --orangered-4: 250, 172, 123 !important;
112 |     --orangered-5: 249, 144, 87 !important;
113 |     --orangered-6: 247, 114, 52 !important;
114 |     --orangered-7: 204, 81, 32 !important;
115 |     --orangered-8: 162, 53, 17 !important;
116 |     --orangered-9: 119, 31, 6 !important;
117 |     --orangered-10: 77, 14, 0 !important;
118 |     --orange-1: 255, 247, 232 !important;
119 |     --orange-2: 255, 228, 186 !important;
120 |     --orange-3: 255, 207, 139 !important;
121 |     --orange-4: 255, 182, 93 !important;
122 |     --orange-5: 255, 154, 46 !important;
123 |     --orange-6: 255, 125, 0 !important;
124 |     --orange-7: 210, 95, 0 !important;
125 |     --orange-8: 166, 69, 0 !important;
126 |     --orange-9: 121, 46, 0 !important;
127 |     --orange-10: 77, 27, 0 !important;
128 |     --gold-1: 255, 252, 232 !important;
129 |     --gold-2: 253, 244, 191 !important;
130 |     --gold-3: 252, 233, 150 !important;
131 |     --gold-4: 250, 220, 109 !important;
132 |     --gold-5: 249, 204, 69 !important;
133 |     --gold-6: 247, 186, 30 !important;
134 |     --gold-7: 204, 146, 19 !important;
135 |     --gold-8: 162, 109, 10 !important;
136 |     --gold-9: 119, 75, 4 !important;
137 |     --gold-10: 77, 45, 0 !important;
138 |     --yellow-1: 254, 255, 232 !important;
139 |     --yellow-2: 254, 254, 190 !important;
140 |     --yellow-3: 253, 250, 148 !important;
141 |     --yellow-4: 252, 242, 107 !important;
142 |     --yellow-5: 251, 232, 66 !important;
143 |     --yellow-6: 250, 220, 25 !important;
144 |     --yellow-7: 207, 175, 15 !important;
145 |     --yellow-8: 163, 132, 8 !important;
146 |     --yellow-9: 120, 93, 3 !important;
147 |     --yellow-10: 77, 56, 0 !important;
148 |     --lime-1: 252, 255, 232 !important;
149 |     --lime-2: 237, 248, 187 !important;
150 |     --lime-3: 220, 241, 144 !important;
151 |     --lime-4: 201, 233, 104 !important;
152 |     --lime-5: 181, 226, 65 !important;
153 |     --lime-6: 159, 219, 29 !important;
154 |     --lime-7: 126, 183, 18 !important;
155 |     --lime-8: 95, 148, 10 !important;
156 |     --lime-9: 67, 112, 4 !important;
157 |     --lime-10: 42, 77, 0 !important;
158 |     --green-1: 232, 255, 234 !important;
159 |     --green-2: 175, 240, 181 !important;
160 |     --green-3: 123, 225, 136 !important;
161 |     --green-4: 76, 210, 99 !important;
162 |     --green-5: 35, 195, 67 !important;
163 |     --green-6: 0, 180, 42 !important;
164 |     --green-7: 0, 154, 41 !important;
165 |     --green-8: 0, 128, 38 !important;
166 |     --green-9: 0, 102, 34 !important;
167 |     --green-10: 0, 77, 28 !important;
168 |     --cyan-1: 232, 255, 251 !important;
169 |     --cyan-2: 183, 244, 236 !important;
170 |     --cyan-3: 137, 233, 224 !important;
171 |     --cyan-4: 94, 223, 214 !important;
172 |     --cyan-5: 55, 212, 207 !important;
173 |     --cyan-6: 20, 201, 201 !important;
174 |     --cyan-7: 13, 165, 170 !important;
175 |     --cyan-8: 7, 130, 139 !important;
176 |     --cyan-9: 3, 97, 108 !important;
177 |     --cyan-10: 0, 66, 77 !important;
178 |     --blue-1: 232, 247, 255 !important;
179 |     --blue-2: 195, 231, 254 !important;
180 |     --blue-3: 159, 212, 253 !important;
181 |     --blue-4: 123, 192, 252 !important;
182 |     --blue-5: 87, 169, 251 !important;
183 |     --blue-6: 52, 145, 250 !important;
184 |     --blue-7: 32, 108, 207 !important;
185 |     --blue-8: 17, 75, 163 !important;
186 |     --blue-9: 6, 48, 120 !important;
187 |     --blue-10: 0, 26, 77 !important;
188 |     --arcoblue-1: 232, 243, 255 !important;
189 |     --arcoblue-2: 190, 218, 255 !important;
190 |     --arcoblue-3: 148, 191, 255 !important;
191 |     --arcoblue-4: 106, 161, 255 !important;
192 |     --arcoblue-5: 64, 128, 255 !important;
193 |     --arcoblue-6: 22, 93, 255 !important;
194 |     --arcoblue-7: 14, 66, 210 !important;
195 |     --arcoblue-8: 7, 44, 166 !important;
196 |     --arcoblue-9: 3, 26, 121 !important;
197 |     --arcoblue-10: 0, 13, 77 !important;
198 |     --purple-1: 245, 232, 255 !important;
199 |     --purple-2: 221, 190, 246 !important;
200 |     --purple-3: 195, 150, 237 !important;
201 |     --purple-4: 168, 113, 227 !important;
202 |     --purple-5: 141, 78, 218 !important;
203 |     --purple-6: 114, 46, 209 !important;
204 |     --purple-7: 85, 29, 176 !important;
205 |     --purple-8: 60, 16, 143 !important;
206 |     --purple-9: 39, 6, 110 !important;
207 |     --purple-10: 22, 0, 77 !important;
208 |     --pinkpurple-1: 255, 232, 251 !important;
209 |     --pinkpurple-2: 247, 186, 239 !important;
210 |     --pinkpurple-3: 240, 142, 230 !important;
211 |     --pinkpurple-4: 232, 101, 223 !important;
212 |     --pinkpurple-5: 225, 62, 219 !important;
213 |     --pinkpurple-6: 217, 26, 217 !important;
214 |     --pinkpurple-7: 176, 16, 182 !important;
215 |     --pinkpurple-8: 138, 9, 147 !important;
216 |     --pinkpurple-9: 101, 3, 112 !important;
217 |     --pinkpurple-10: 66, 0, 77 !important;
218 |     --magenta-1: 255, 232, 241 !important;
219 |     --magenta-2: 253, 194, 219 !important;
220 |     --magenta-3: 251, 157, 199 !important;
221 |     --magenta-4: 249, 121, 183 !important;
222 |     --magenta-5: 247, 84, 168 !important;
223 |     --magenta-6: 245, 49, 157 !important;
224 |     --magenta-7: 203, 30, 131 !important;
225 |     --magenta-8: 161, 16, 105 !important;
226 |     --magenta-9: 119, 6, 79 !important;
227 |     --magenta-10: 77, 0, 52 !important;
228 |     --gray-1: 247, 248, 250 !important;
229 |     --gray-2: 242, 243, 245 !important;
230 |     --gray-3: 229, 230, 235 !important;
231 |     --gray-4: 201, 205, 212 !important;
232 |     --gray-5: 169, 174, 184 !important;
233 |     --gray-6: 134, 144, 156 !important;
234 |     --gray-7: 107, 119, 133 !important;
235 |     --gray-8: 78, 89, 105 !important;
236 |     --gray-9: 39, 46, 59 !important;
237 |     --gray-10: 29, 33, 41 !important;
238 |     --primary-1: 232, 255, 244 !important;
239 |     --primary-2: 187, 243, 219 !important;
240 |     --primary-3: 145, 231, 196 !important;
241 |     --primary-4: 106, 219, 178 !important;
242 |     --primary-5: 71, 207, 162 !important;
243 |     --primary-6: 9, 189, 127 !important;
244 |     --primary-7: 25, 165, 128 !important;
245 |     --primary-8: 14, 136, 107 !important;
246 |     --primary-9: 5, 106, 86 !important;
247 |     --primary-10: 0, 77, 64 !important;
248 |     --link-1: 232, 255, 244 !important;
249 |     --link-2: 176, 240, 210 !important;
250 |     --link-3: 125, 225, 182 !important;
251 |     --link-4: 80, 209, 158 !important;
252 |     --link-5: 40, 194, 138 !important;
253 |     --link-6: 3, 169, 113 !important;
254 |     --link-7: 3, 153, 108 !important;
255 |     --link-8: 2, 128, 94 !important;
256 |     --link-9: 1, 102, 78 !important;
257 |     --link-10: 0, 77, 61 !important;
258 |     --success-1: 232, 255, 244 !important;
259 |     --success-2: 176, 240, 210 !important;
260 |     --success-3: 125, 225, 182 !important;
261 |     --success-4: 80, 209, 158 !important;
262 |     --success-5: 40, 194, 138 !important;
263 |     --success-6: 5, 179, 120 !important;
264 |     --success-7: 3, 153, 108 !important;
265 |     --success-8: 2, 128, 94 !important;
266 |     --success-9: 1, 102, 78 !important;
267 |     --success-10: 0, 77, 61 !important;
268 |     --danger-1: 255, 236, 232 !important;
269 |     --danger-2: 254, 208, 201 !important;
270 |     --danger-3: 253, 179, 171 !important;
271 |     --danger-4: 253, 148, 141 !important;
272 |     --danger-5: 252, 116, 111 !important;
273 |     --danger-6: 251, 81, 81 !important;
274 |     --danger-7: 207, 50, 55 !important;
275 |     --danger-8: 164, 26, 36 !important;
276 |     --danger-9: 120, 10, 21 !important;
277 |     --danger-10: 77, 0, 10 !important;
278 |     --warning-1: 255, 251, 232 !important;
279 |     --warning-2: 254, 241, 193 !important;
280 |     --warning-3: 254, 229, 155 !important;
281 |     --warning-4: 253, 214, 116 !important;
282 |     --warning-5: 244, 186, 64 !important;
283 |     --warning-6: 252, 177, 40 !important;
284 |     --warning-7: 230, 135, 37 !important;
285 |     --warning-8: 164, 101, 13 !important;
286 |     --warning-9: 120, 68, 5 !important;
287 |     --warning-10: 77, 40, 0 !important;
288 | }
289 | .arco-page-header-wrapper {
290 |     padding-right: 0px !important;
291 |     padding-left: 0px !important;
292 | }
293 | 
294 | .arco-btn-size-medium {
295 |     --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
296 |     --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
297 |     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
298 |         var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
299 | }
300 | .arco-tabs-nav {
301 |     background-color: #ffffff00;
302 |     -webkit-backdrop-filter: blur(15px);
303 |     backdrop-filter: blur(15px);
304 |     border-radius: var(--border-radius-small);
305 | }
306 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/workflow.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <div v-if="showContent">
   3 |     <HomeTetris />
   4 |     <a-tabs size="large" animation>
   5 |       <template #extra>
   6 |         <UButton class="mr-2" icon="i-heroicons-currency-yen" size="xs" disabled>{{ totalCostForCreatedByMe }}</UButton>
   7 | 
   8 |         <UButton class="mr-2" icon="i-heroicons-arrow-path" size="xs" color="primary" square variant="solid"
   9 |           @click="refresh" />
  10 |         <UButton size="xs" @click="createModalVisible = true">新建</UButton>
  11 |       </template>
  12 |       <a-tab-pane key="1" size="large">
  13 |         <template #title>
  14 |           <icon-code-square />应用广场
  15 |         </template>
  16 |         <div v-if="currentPageData && currentPageData.length > 0">
  17 |           <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-4 p-2">
  18 |             <ULandingCard v-for="item in currentPageData" :key="item.id" :title="item.title"
  19 |               :description="item.subtitle" @click="handleCardClick(item)" color="primary" orientation="vertical">
  20 |               <template v-slot:icon>
  21 |                 <img :src="item.imageurl" alt="CustomIcon" class="w-8 h-8" />
  22 |               </template>
  23 |             </ULandingCard>
  24 |           </div>
  25 |           <div class="p-2" v-if="pagination.total > 20">
  26 |             <UPagination :current="pagination.current" :page-count="pagination.totalPages" :total="pagination.total"
  27 |               @change="handlePageChange" />
  28 |           </div>
  29 |         </div>
  30 |         <ULandingSection icon="i-heroicons-rocket-launch" title="暂无数据" description="看起来什么都还没有呢～" v-else />
  31 |       </a-tab-pane>
  32 |       <a-tab-pane key="2">
  33 |         <template #title>
  34 |           <icon-apps />我创建的
  35 |         </template>
  36 |         <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-4 p-2"
  37 |           v-if="paginatedCreatedByMeData && paginatedCreatedByMeData.length > 0">
  38 |           <ULandingCard v-for="item in paginatedCreatedByMeData" :key="item.id" :title="item.name" color="primary"
  39 |             orientation="vertical" @click="loadIframe(item)">
  40 |             <template v-slot:icon>
  41 |               <span class="text-2xl">{{ item.icon }}</span>
  42 |             </template>
  43 |             <template v-slot:description>
  44 |               <span class="text-sm text-wrap line-clamp-2">{{ item.description ? item.description : '暂无描述' }}</span>
  45 |             </template>
  46 |             <UDropdown :items="myappitems(item)" :ui="customUIConfig" :popper="{ arrow: true }" @click.stop
  47 |               class="absolute top-4 right-4 z-40">
  48 |               <UButton icon="i-heroicons-pencil-square" size="2xs" color="primary" variant="outline" />
  49 |             </UDropdown>
  50 |             <UBadge class="absolute right-12 top-4" variant="subtle"
  51 |               :color="item.mode === 'advanced-chat' || item.mode === 'workflow' ? 'cyan' : 'emerald'">
  52 |               <span class="ml-1" v-if="item.mode === 'workflow'">工作流</span>
  53 |               <span class="ml-1" v-else-if="item.mode === 'agent-chat'">AGENT</span>
  54 |               <span class="ml-1" v-else-if="item.mode === 'completion'">文本生成</span>
  55 |               <span class="ml-1" v-else-if="item.mode === 'chat'">聊天助手</span>
  56 |               <span class="ml-1" v-else-if="item.mode === 'advanced-chat'">聊天助手</span>
  57 |             </UBadge>
  58 |             <div class="mb-4"></div>
  59 |             <div class="flex absolute bottom-4 space-x-2">
  60 |               <UTooltip text="应用消耗额度" :popper="{ placement: 'top', arrow: true }">
  61 |                 <UBadge color="white" variant="solid">¥{{ item.totalCost.toFixed(2) }}</UBadge>
  62 |               </UTooltip>
  63 |               <UTooltip text="全部消息" :popper="{ placement: 'top', arrow: true }">
  64 |                 <UBadge color="white" variant="solid">{{ item.totalConversationCount }}</UBadge>
  65 |               </UTooltip>
  66 |               <UTooltip text="活跃用户" :popper="{ placement: 'top', arrow: true }">
  67 |                 <UBadge color="white" variant="solid">{{ item.totalTerminalCount }}</UBadge>
  68 |               </UTooltip>
  69 |             </div>
  70 |             <div class="flex absolute bottom-4 space-x-2 right-4" @click.stop>
  71 |               <UButton size="2xs" color="white" variant="solid" icon="i-heroicons-eye" @click="previewApp(item.id)">
  72 |               </UButton>
  73 |             </div>
  74 |             <div v-if="createdByMePagination.total > 20">
  75 |               <UPagination :current="createdByMePagination.current" :page-count="createdByMePagination.totalPages"
  76 |                 :total="createdByMePagination.total" @change="handleCreatedByMePageChange" />
  77 |             </div>
  78 |           </ULandingCard>
  79 |         </div>
  80 |         <ULandingSection icon="i-heroicons-rocket-launch" title="暂无数据" description="看起来什么都还没有呢～" v-else />
  81 |       </a-tab-pane>
  82 |       <a-tab-pane key="3">
  83 |         <template #title>
  84 |           <icon-tags />应用模板
  85 |         </template>
  86 | 
  87 |         <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-4 p-2"
  88 |           v-if="paginatedOpenTemplateData && paginatedOpenTemplateData.length > 0">
  89 |           <ULandingCard v-for="item in paginatedOpenTemplateData" :key="item.id" :title="item.name" color="primary"
  90 |             orientation="vertical" @click="loadIframe(item)">
  91 |             <template v-slot:icon>
  92 |               <span class="text-2xl">{{ item.icon }}</span>
  93 |             </template>
  94 |             <template v-slot:description>
  95 |               <span class="text-sm text-wrap line-clamp-2">{{ item.description }}</span>
  96 |             </template>
  97 | 
  98 |             <UButton :ui="{ rounded: 'rounded-full' }" icon="i-heroicons-clipboard-document-list" @click.stop
  99 |               class="absolute top-2 right-2 z-40" size="2xs" color="white" variant="solid"
 100 |               @click="prepareCopyItem(item)" />
 101 | 
 102 |           </ULandingCard>
 103 |           <div v-if="openTemplatePagination.total > 20">
 104 |             <UPagination :current="openTemplatePagination.current" :page-count="openTemplatePagination.totalPages"
 105 |               :total="openTemplatePagination.total" @change="handleOpenTemplatePageChange" />
 106 |           </div>
 107 |         </div>
 108 |         <ULandingSection icon="i-heroicons-rocket-launch" title="暂无数据" description="看起来什么都还没有呢～" v-else />
 109 |       </a-tab-pane>
 110 |       <a-tab-pane key="4">
 111 |         <template #title>
 112 |           <icon-bookmark />知识库
 113 |         </template>
 114 |         <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-4 p-2"
 115 |           v-if="paginatedKnowledgeBaseData && paginatedKnowledgeBaseData.length > 0">
 116 |           <ULandingCard v-for="item in paginatedKnowledgeBaseData" :key="item.id" :title="item.name"
 117 |             :description="item.description" color="primary" orientation="vertical" @click="loadIframe(item)">
 118 |             <template v-slot:icon>
 119 |               <span class="text-3xl">
 120 |                 <UIcon name="i-heroicons-rectangle-stack" />
 121 |               </span>
 122 |             </template>
 123 |             <template v-slot:description>
 124 |               <span class="text-sm text-wrap line-clamp-2">{{ item.description }}</span>
 125 |             </template>
 126 |             <UDropdown :items="knowledgeitems(item)" :ui="customUIConfig" :popper="{ arrow: true }" @click.stop
 127 |               class="absolute top-2 right-2 z-40">
 128 |               <UButton icon="i-heroicons-pencil-square" size="2xs" color="primary" variant="outline" />
 129 |             </UDropdown>
 130 |           </ULandingCard>
 131 |           <div v-if="knowledgeBasePagination.total > 20">
 132 |             <UPagination :current="knowledgeBasePagination.current" :page-count="knowledgeBasePagination.totalPages"
 133 |               :total="knowledgeBasePagination.total" @change="handleKnowledgeBasePageChange" />
 134 |           </div>
 135 |         </div>
 136 |         <ULandingSection icon="i-heroicons-rocket-launch" title="暂无数据" description="看起来什么都还没有呢～" v-else />
 137 |       </a-tab-pane>
 138 |     </a-tabs>
 139 |   </div>
 140 |   <div v-else class="main overflow-auto h-100">
 141 |     <iframe class="iframe-wraps rounded-xl border-green-500 border" scrolling="auto" :src="iframeSrc"
 142 |       :style="{ height: iframeHeight }" frameborder="0" :key="iframeKey"
 143 |       referrerpolicy="origin-when-cross-origin"></iframe>
 144 | 
 145 |     <div class="floating-button mobile_none flex flex-col space-y-2">
 146 |       <a-button type="primary" shape="circle" @click="showContent = true">
 147 |         <icon-close-circle />
 148 |       </a-button>
 149 |     </div>
 150 |   </div>
 151 |   <a-modal v-model:visible="createModalVisible" title="创建应用" ok-text="提交" @ok="submitCreateForm" width="auto">
 152 |     <a-form :model="createForm" layout="vertical">
 153 |       <a-form-item label="名称">
 154 |         <a-input placeholder="填写应用名称" v-model="createForm.name" />
 155 |       </a-form-item>
 156 |       <a-form-item label="描述">
 157 |         <a-textarea placeholder="填写应用描述" v-model="createForm.description" />
 158 |       </a-form-item>
 159 |       <a-form-item label="类型">
 160 |         <a-select v-model="createForm.mode" placeholder="请选择类型">
 161 |           <a-option value="chat">基础编排</a-option>
 162 |           <a-option value="advanced-chat">工作流编排</a-option>
 163 |           <a-option value="completion">文本生成应用</a-option>
 164 |           <a-option value="agent-chat">Agent</a-option>
 165 |           <a-option value="workflow">工作流</a-option>
 166 |           <a-option value="knowledge">知识库</a-option>
 167 |         </a-select>
 168 |       </a-form-item>
 169 |       <a-form-item>
 170 |         <a-alert v-if="createForm.mode === 'chat'">使用大型语言模型构建基于聊天的助手（新手）。</a-alert>
 171 |         <a-alert v-if="createForm.mode === 'advanced-chat'">使用大型语言模型构建基于聊天的助手（进阶）。</a-alert>
 172 |         <a-alert v-if="createForm.mode === 'completion'">构建一个根据提示生成高质量文本的应用程序, 例如生成文章、摘要、翻译等。</a-alert>
 173 |         <a-alert v-if="createForm.mode === 'agent-chat'">构建一个智能Agent, 可以自主选择工具来完成任务。</a-alert>
 174 |         <a-alert v-if="createForm.mode === 'workflow'">以工作流的形式编排生成型应用, 提供更多的自定义能力。它适合有经验的用户。</a-alert>
 175 |         <a-alert v-if="createForm.mode === 'knowledge'">创建一个知识库，可以在应用中导入知识库使用。</a-alert>
 176 |       </a-form-item>
 177 |     </a-form>
 178 |   </a-modal>
 179 |   <a-modal v-model:visible="editModalVisible" title="编辑" ok-text="提交" @ok="submitEditForm" width="80%">
 180 |     <a-form :model="editForm" layout="vertical">
 181 |       <a-form-item label="名称">
 182 |         <a-input v-model="editForm.name" />
 183 |       </a-form-item>
 184 |       <a-form-item label="描述">
 185 |         <a-textarea v-model="editForm.description" />
 186 |       </a-form-item>
 187 |     </a-form>
 188 |   </a-modal>
 189 |   <a-modal v-model:visible="copyModalVisible" title="复制" ok-text="提交" @ok="submitCopyForm" width="auto">
 190 |     <a-form :model="copyForm" layout="vertical">
 191 |       <a-form-item label="名称">
 192 |         <a-input v-model="copyForm.name" />
 193 |       </a-form-item>
 194 |     </a-form>
 195 |   </a-modal>
 196 |   <a-modal v-model:visible="showModal" title="删除项目" @cancel="showModal = false" @ok="confirmDelete" width="50%">
 197 |     <p>你确定要删除这个项目吗？</p>
 198 |   </a-modal>
 199 |   <a-modal v-model:visible="showKnowledgeModal" title="删除项目" @cancel="showKnowledgeModal = false" width="50%"
 200 |     @ok="confirmDeleteKnowledge">
 201 |     <p>你确定要删除这个知识库吗？</p>
 202 |   </a-modal>
 203 | </template>
 204 | 
 205 | <script lang="ts" setup>
 206 | import { ref, computed, onMounted } from 'vue';
 207 | import axios from 'axios';
 208 | import { storeToRefs } from 'pinia';
 209 | import { useSettingsStore } from '@/stores/settings';
 210 | import { useAuthStore } from '@/stores/auth';
 211 | 
 212 | useSeoMeta({
 213 |   title: '工作台',
 214 | })
 215 | 
 216 | 
 217 | const settingsStore = useSettingsStore();
 218 | const { settings } = storeToRefs(settingsStore);
 219 | const modal = useModal();
 220 | const auth = useAuthStore();
 221 | 
 222 | const data = ref([]);
 223 | const createdByMeData = ref([]);
 224 | const openTemplateData = ref([]);
 225 | const knowledgeBaseData = ref([]);
 226 | 
 227 | const pagination = ref({
 228 |   current: 1,
 229 |   pageSize: 20,
 230 |   total: 0,
 231 |   totalPages: 0,
 232 | });
 233 | const createdByMePagination = ref({
 234 |   current: 1,
 235 |   pageSize: 20,
 236 |   total: 0,
 237 |   totalPages: 0,
 238 | });
 239 | const openTemplatePagination = ref({
 240 |   current: 1,
 241 |   pageSize: 20,
 242 |   total: 0,
 243 |   totalPages: 0,
 244 | });
 245 | const knowledgeBasePagination = ref({
 246 |   current: 1,
 247 |   pageSize: 20,
 248 |   total: 0,
 249 |   totalPages: 0,
 250 | });
 251 | 
 252 | const { refresh: fetchData, status: fetchDataStatus } = useFetch<any>('get_app', {
 253 |   method: 'POST',
 254 |   body: { page: 1, pageSize: 40 },
 255 |   immediate: false,
 256 |   watch: false,
 257 |   onResponse({ response }) {
 258 |     if (response?.status === 200 && response._data) {
 259 |       // console.log('ResponseData:', response._data);
 260 |       useToast().add({ icon: 'i-heroicons-check-circle-20-solid', title: '应用数据已成功获取。', color: 'emerald' });
 261 |       data.value = response._data.data;
 262 |       pagination.value.total = response._data.total;
 263 |       pagination.value.totalPages = Math.ceil(response._data.total / pagination.value.pageSize);
 264 |     } else {
 265 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '获取应用数据失败。', color: 'red' });
 266 |     }
 267 |   },
 268 |   onError() {
 269 |     useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '请求失败,请稍后再试。', color: 'red' });
 270 |   },
 271 | });
 272 | 
 273 | const currentPageData = computed(() => {
 274 |   const start = (pagination.value.current - 1) * pagination.value.pageSize;
 275 |   const end = start + pagination.value.pageSize;
 276 |   return data.value.slice(start, end);
 277 | });
 278 | 
 279 | // 在 paginatedCreatedByMeData 计算属性中增加计算总消耗额度的逻辑
 280 | const paginatedCreatedByMeData = computed(() => {
 281 |   const start = (createdByMePagination.value.current - 1) * createdByMePagination.value.pageSize;
 282 |   const end = start + createdByMePagination.value.pageSize;
 283 |   return createdByMeData.value.slice(start, end);
 284 | });
 285 | 
 286 | // 新增totalCostForCreatedByMe计算属性
 287 | const totalCostForCreatedByMe = computed(() => {
 288 |   return createdByMeData.value.reduce((acc, item) => acc + item.totalCost, 0).toFixed(2);
 289 | });
 290 | 
 291 | 
 292 | const paginatedOpenTemplateData = computed(() => {
 293 |   const start = (openTemplatePagination.value.current - 1) * openTemplatePagination.value.pageSize;
 294 |   const end = start + openTemplatePagination.value.pageSize;
 295 |   return openTemplateData.value.slice(start, end);
 296 | });
 297 | 
 298 | const paginatedKnowledgeBaseData = computed(() => {
 299 |   const start = (knowledgeBasePagination.value.current - 1) * knowledgeBasePagination.value.pageSize;
 300 |   const end = start + knowledgeBasePagination.value.pageSize;
 301 |   return knowledgeBaseData.value.slice(start, end);
 302 | });
 303 | 
 304 | const handlePageChange = (page) => {
 305 |   pagination.value.current = page;
 306 | };
 307 | 
 308 | const handleCreatedByMePageChange = (page) => {
 309 |   createdByMePagination.value.current = page;
 310 | };
 311 | 
 312 | const handleOpenTemplatePageChange = (page) => {
 313 |   openTemplatePagination.value.current = page;
 314 | };
 315 | 
 316 | const handleKnowledgeBasePageChange = (page) => {
 317 |   knowledgeBasePagination.value.current = page;
 318 | };
 319 | 
 320 | const fetchTags = async (type) => {
 321 |   try {
 322 |     const response = await axios.get(`${settings.value.Dify_Api}/console/api/tags?type=${type}`, {
 323 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 324 |     });
 325 | 
 326 |     if (response.status === 200) {
 327 |       return response.data;
 328 |     } else {
 329 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: `获取${type}标签数据失败。`, color: 'red' });
 330 |       return [];
 331 |     }
 332 |   } catch (error) {
 333 |     // console.log(`Error fetching ${type} tags:`, error);
 334 |     useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '请求失败,请稍后再试。', color: 'red' });
 335 |     return [];
 336 |   }
 337 | };
 338 | const createTag = async (name, type) => {
 339 |   try {
 340 |     const response = await axios.post(`${settings.value.Dify_Api}/console/api/tags`, {
 341 |       name,
 342 |       type,
 343 |     }, {
 344 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 345 |     });
 346 | 
 347 |     if (response.status === 200 || response.status === 201) {
 348 |       // 200和201都表示创建成功
 349 |       // console.log(`Tag ${name} created successfully for type ${type}.`);
 350 |       useToast().add({ icon: 'i-heroicons-check-circle-20-solid', title: `新用户初始化成功`, color: 'emerald' });
 351 |     } else {
 352 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: `创建${type}标签失败。`, color: 'red' });
 353 |     }
 354 |   } catch (error) {
 355 |     // console.log(`Error creating ${type} tag:`, error);
 356 |     useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '请求失败,请稍后再试。', color: 'red' });
 357 |   }
 358 | };
 359 | 
 360 | const ensureTagsExist = async () => {
 361 |   const userId = auth.user.id.toString();
 362 | 
 363 |   const [appTags, knowledgeTags] = await Promise.all([
 364 |     fetchTags('app'),
 365 |     fetchTags('knowledge')
 366 |   ]);
 367 | 
 368 |   const appTagExists = appTags.some(tag => tag.name === userId);
 369 |   const knowledgeTagExists = knowledgeTags.some(tag => tag.name === userId);
 370 | 
 371 |   if (!appTagExists) {
 372 |     await createTag(userId, 'app');
 373 |   }
 374 | 
 375 |   if (!knowledgeTagExists) {
 376 |     await createTag(userId, 'knowledge');
 377 |   }
 378 | };
 379 | 
 380 | const fetchAdditionalData = async () => {
 381 |   try {
 382 |     const response = await axios.get(`${settings.value.Dify_Api}/console/api/apps?page=1&limit=100`, {
 383 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 384 |     });
 385 |     if (response.status === 200) {
 386 |       const allData = response.data.data;
 387 |       createdByMeData.value = await Promise.all(
 388 |         allData
 389 |           .filter(item => item.tags.some(tag => tag.name === auth.user.id.toString()))
 390 |           .map(async (item) => {
 391 |             const tokenCosts = await fetchTokenCosts(item.id);
 392 |             const totalCost = tokenCosts.reduce((acc, cost) => acc + parseFloat(cost.total_price), 0);
 393 | 
 394 |             const terminalCounts = await fetchTerminalCounts(item.id);
 395 |             const totalTerminalCount = terminalCounts.reduce((acc, count) => acc + count.terminal_count, 0);
 396 | 
 397 |             const conversationCounts = await fetchConversationCounts(item.id);
 398 |             const totalConversationCount = conversationCounts.reduce((acc, count) => acc + count.conversation_count, 0);
 399 | 
 400 |             return { ...item, totalCost, totalTerminalCount, totalConversationCount };
 401 |           })
 402 |       );
 403 | 
 404 |       openTemplateData.value = allData.filter(item => item.tags.some(tag => tag.name === 'OPEN'));
 405 | 
 406 |       createdByMePagination.value.total = createdByMeData.value.length;
 407 |       createdByMePagination.value.totalPages = Math.ceil(createdByMeData.value.length / createdByMePagination.value.pageSize);
 408 | 
 409 |       openTemplatePagination.value.total = openTemplateData.value.length;
 410 |       openTemplatePagination.value.totalPages = Math.ceil(openTemplateData.value.length / openTemplatePagination.value.pageSize);
 411 |     } else {
 412 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '获取应用数据失败。', color: 'red' });
 413 |     }
 414 |   } catch (error) {
 415 |     console.error('Error fetching data:', error);
 416 |     useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '请求失败, 请稍后再试。', color: 'red' });
 417 |   }
 418 | };
 419 | const fetchTokenCosts = async (appId) => {
 420 |   try {
 421 |     const response = await axios.get(`${settings.value.Dify_Api}/console/api/apps/${appId}/statistics/token-costs`, {
 422 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 423 |     });
 424 | 
 425 |     if (response.status === 200) {
 426 |       return response.data.data;
 427 |     } else {
 428 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '获取Token成本数据失败。', color: 'red' });
 429 |       return [];
 430 |     }
 431 |   } catch (error) {
 432 |     console.error('Error fetching token costs:', error);
 433 |     useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '请求失败,请稍后再试。', color: 'red' });
 434 |     return [];
 435 |   }
 436 | };
 437 | const fetchConversationCounts = async (appId) => {
 438 |   try {
 439 |     const response = await axios.get(`${settings.value.Dify_Api}/console/api/apps/${appId}/statistics/daily-conversations`, {
 440 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 441 |     });
 442 |     if (response.status === 200) {
 443 |       return response.data.data;
 444 |     } else {
 445 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '获取对话数据失败。', color: 'red' });
 446 |       return [];
 447 |     }
 448 |   } catch (error) {
 449 |     console.error('Error fetching conversation counts:', error);
 450 |     useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '请求失败, 请稍后再试。', color: 'red' });
 451 |     return [];
 452 |   }
 453 | };
 454 | const fetchTerminalCounts = async (appId) => {
 455 |   try {
 456 |     const response = await axios.get(`${settings.value.Dify_Api}/console/api/apps/${appId}/statistics/daily-end-users`, {
 457 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 458 |     });
 459 |     if (response.status === 200) {
 460 |       return response.data.data;
 461 |     } else {
 462 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '获取终端用户数据失败。', color: 'red' });
 463 |       return [];
 464 |     }
 465 |   } catch (error) {
 466 |     console.error('Error fetching terminal counts:', error);
 467 |     useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '请求失败, 请稍后再试。', color: 'red' });
 468 |     return [];
 469 |   }
 470 | };
 471 | 
 472 | const fetchKnowledgeBaseData = async () => {
 473 |   try {
 474 |     const response = await axios.get(`${settings.value.Dify_Api}/console/api/datasets?page=1&limit=100`, {
 475 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 476 |     });
 477 | 
 478 |     if (response.status === 200) {
 479 |       const allData = response.data.data;
 480 |       knowledgeBaseData.value = allData.filter(item => item.tags.some(tag => tag.name === auth.user.id.toString()));
 481 | 
 482 |       knowledgeBasePagination.value.total = knowledgeBaseData.value.length;
 483 |       knowledgeBasePagination.value.totalPages = Math.ceil(knowledgeBaseData.value.length / knowledgeBasePagination.value.pageSize);
 484 |     } else {
 485 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '获取知识库数据失败。', color: 'red' });
 486 |     }
 487 |   } catch (error) {
 488 |     // console.log('Error fetching knowledge base data:', error);
 489 |     useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '请求失败,请稍后再试。', color: 'red' });
 490 |   }
 491 | };
 492 | 
 493 | import { useRouter } from 'vue-router';
 494 | const router = useRouter();
 495 | 
 496 | onMounted(async () => {
 497 |   if (!auth.logged) {
 498 |     router.push('/auth/login');
 499 |     return;
 500 |   }
 501 |   fetchData();
 502 |   ensureTagsExist();
 503 |   fetchAdditionalData();
 504 |   fetchKnowledgeBaseData();
 505 |   updateAuthData();
 506 | });
 507 | const updateAuthData = async () => {
 508 |   await auth.fetchUser();
 509 | };
 510 | const refresh = () => {
 511 |   fetchAdditionalData();
 512 |   fetchKnowledgeBaseData();
 513 |   updateWorkflowBalance();
 514 |   updateAuthData();
 515 | };
 516 | const myappitems = (item) => [
 517 |   [{
 518 |     label: '编辑',
 519 |     icon: 'i-heroicons-pencil-square-20-solid',
 520 |     click: () => {
 521 |       editItem(item);
 522 |     }
 523 |   }, {
 524 |     label: '复制',
 525 |     icon: 'i-heroicons-document-duplicate-20-solid',
 526 |     click: () => {
 527 |       prepareCopyItem(item);
 528 |     }
 529 |   }],
 530 |   [{
 531 |     label: '删除',
 532 |     icon: 'i-heroicons-trash-20-solid',
 533 |     click: () => {
 534 |       showDeleteConfirm(item);
 535 |     }
 536 |   }]
 537 | ];
 538 | const knowledgeitems = (item) => [
 539 |   [{
 540 |     label: '编辑',
 541 |     icon: 'i-heroicons-pencil-square-20-solid',
 542 |     click: () => {
 543 |       editKnowledge(item);
 544 |     }
 545 |   }, {
 546 |     label: '删除',
 547 |     icon: 'i-heroicons-trash-20-solid',
 548 |     click: () => {
 549 |       showDeleteKnowledgeConfirm(item);
 550 |     }
 551 |   }]
 552 | ];
 553 | const customUIConfig = {
 554 |   width: 'w-20'
 555 | };
 556 | 
 557 | const editModalVisible = ref(false);
 558 | 
 559 | const editForm = ref({ name: '', description: '', id: '', icon: '', icon_background: '' });
 560 | 
 561 | const editItem = (item) => {
 562 |   editForm.value = {
 563 |     name: item.name,
 564 |     description: item.description,
 565 |     id: item.id,
 566 |     icon: item.icon || '',
 567 |     icon_background: item.icon_background || '',
 568 |     mode: item.mode || '', // 新增模式字段
 569 |   };
 570 |   editModalVisible.value = true;
 571 | };
 572 | const editKnowledge = (item) => {
 573 |   editForm.value = {
 574 |     name: item.name,
 575 |     description: item.description || '',
 576 |     id: item.id,
 577 |     mode: 'knowledge', // 明确设置为知识库模式
 578 |   };
 579 |   editModalVisible.value = true;
 580 | };
 581 | const submitEditForm = async () => {
 582 |   try {
 583 |     if (editForm.value.mode === 'knowledge') {
 584 |       // 知识库的编辑请求
 585 |       await axios.patch(`${settings.value.Dify_Api}/console/api/datasets/${editForm.value.id}`, {
 586 |         name: editForm.value.name,
 587 |         description: editForm.value.description,
 588 |       }, {
 589 |         headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 590 |       });
 591 |     } else {
 592 |       // 应用的编辑请求
 593 |       await axios.put(`${settings.value.Dify_Api}/console/api/apps/${editForm.value.id}`, {
 594 |         name: editForm.value.name,
 595 |         icon: editForm.value.icon,
 596 |         icon_background: editForm.value.icon_background,
 597 |         description: editForm.value.description,
 598 |       }, {
 599 |         headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 600 |       });
 601 |     }
 602 |     editModalVisible.value = false;
 603 |     useToast().add({
 604 |       icon: 'i-heroicons-check-circle-20-solid',
 605 |       title: '编辑成功。',
 606 |       color: 'emerald',
 607 |     });
 608 |     // 可选：刷新数据
 609 |     refresh();
 610 |   } catch (error) {
 611 |     console.error("Error during request:", error);
 612 |     useToast().add({
 613 |       icon: 'i-heroicons-x-circle-20-solid',
 614 |       title: '编辑失败，请稍后再试。',
 615 |       color: 'red',
 616 |     });
 617 |   }
 618 | };
 619 | 
 620 | const showModal = ref(false);
 621 | const showKnowledgeModal = ref(false);
 622 | 
 623 | const itemToDelete = ref<any>(null);
 624 | const knowledgeToDelete = ref<any>(null);
 625 | 
 626 | function showDeleteConfirm(item: any) {
 627 |   itemToDelete.value = item;
 628 |   showModal.value = true;
 629 | }
 630 | function confirmDelete() {
 631 |   if (itemToDelete.value) {
 632 |     deleteItem(itemToDelete.value);
 633 |     showModal.value = false;
 634 |   }
 635 | }
 636 | 
 637 | function showDeleteKnowledgeConfirm(item: any) {
 638 |   knowledgeToDelete.value = item;
 639 |   showKnowledgeModal.value = true;
 640 | }
 641 | function confirmDeleteKnowledge() {
 642 |   if (knowledgeToDelete.value) {
 643 |     deleteKnowledge(knowledgeToDelete.value);
 644 |     showKnowledgeModal.value = false;
 645 |   }
 646 | }
 647 | 
 648 | const deleteItem = async (item) => {
 649 |   try {
 650 |     await axios.delete(`${settings.value.Dify_Api}/console/api/apps/${item.id}`, {
 651 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 652 |     });
 653 | 
 654 |   } catch (error) {
 655 |     console.error('Error deleting item:', error);
 656 |   }
 657 |   useToast().add({
 658 |     icon: 'i-heroicons-check-circle-20-solid',
 659 |     title: '应用已删除',
 660 |     color: 'emerald',
 661 |   });
 662 |   refresh();
 663 | };
 664 | const deleteKnowledge = async (item) => {
 665 |   try {
 666 |     await axios.delete(`${settings.value.Dify_Api}/console/api/datasets/${item.id}`, {
 667 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 668 |     });
 669 | 
 670 |   } catch (error) {
 671 |     console.error('Error deleting knowledge item:', error);
 672 |   }
 673 |   useToast().add({
 674 |     icon: 'i-heroicons-check-circle-20-solid',
 675 |     title: '知识库已删除',
 676 |     color: 'emerald',
 677 |   });
 678 |   refresh();
 679 | };
 680 | 
 681 | const createModalVisible = ref(false);
 682 | const createForm = ref({ name: '', description: '', mode: 'chat', icon: '🤖', icon_background: '#FFEAD5' });
 683 | 
 684 | const submitCreateForm = async () => {
 685 |   // 检查必要的表单字段
 686 |   if (!createForm.value.name || !createForm.value.mode) {
 687 |     useToast().add({
 688 |       icon: 'i-heroicons-exclamation-circle-20-solid',
 689 |       title: '请填写完整所有必填项',
 690 |       color: 'red',
 691 |     });
 692 |     return;
 693 |   }
 694 | 
 695 |   try {
 696 |     let createResponse;
 697 |     if (createForm.value.mode === 'knowledge') {
 698 |       createResponse = await axios.post(`${settings.value.Dify_Api}/console/api/datasets`, {
 699 |         name: createForm.value.name,
 700 |         description: createForm.value.description,
 701 |       }, {
 702 |         headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 703 |       });
 704 |     } else {
 705 |       createResponse = await axios.post(`${settings.value.Dify_Api}/console/api/apps`, {
 706 |         name: createForm.value.name,
 707 |         icon: createForm.value.icon,
 708 |         icon_background: createForm.value.icon_background,
 709 |         mode: createForm.value.mode,
 710 |         description: createForm.value.description,
 711 |       }, {
 712 |         headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 713 |       });
 714 |     }
 715 | 
 716 |     const appId = createResponse.data.id;
 717 |     const tagType = createForm.value.mode === 'knowledge' ? 'knowledge' : 'app';
 718 | 
 719 |     const tagResponse = await axios.get(`${settings.value.Dify_Api}/console/api/tags`, {
 720 |       params: { type: tagType },
 721 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 722 |     });
 723 | 
 724 |     const userTag = tagResponse.data.find(tag => tag.name === String(auth.user.id));
 725 |     if (userTag) {
 726 |       const tagId = userTag.id;
 727 |       await axios.post(`${settings.value.Dify_Api}/console/api/tag-bindings/create`, {
 728 |         tag_ids: [tagId],
 729 |         target_id: appId,
 730 |         type: tagType,
 731 |       }, {
 732 |         headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 733 |       });
 734 |     } else {
 735 |       console.error('未找到用户标签:', auth.user.id);
 736 |     }
 737 | 
 738 |     createModalVisible.value = false;
 739 |     useToast().add({
 740 |       icon: 'i-heroicons-check-circle-20-solid',
 741 |       title: '应用创建完成',
 742 |       color: 'emerald',
 743 |     });
 744 |     refresh();
 745 |   } catch (error) {
 746 |     console.error("创建应用时发生错误:", error);
 747 |     useToast().add({
 748 |       icon: 'i-heroicons-x-circle-20-solid',
 749 |       title: '创建应用失败，请稍后再试。',
 750 |       color: 'red',
 751 |     });
 752 |   }
 753 | };
 754 | 
 755 | const copyModalVisible = ref(false);
 756 | const copyForm = ref({ name: '', id: '', icon: '', icon_background: '', mode: '' });
 757 | 
 758 | 
 759 | const prepareCopyItem = (item) => {
 760 |   copyForm.value = {
 761 |     name: item.name + '(copy)',
 762 |     id: item.id,
 763 |     icon: item.icon,
 764 |     icon_background: item.icon_background,
 765 |     mode: item.mode,
 766 |   };
 767 |   copyModalVisible.value = true;
 768 | };
 769 | 
 770 | const submitCopyForm = async () => {
 771 |   try {
 772 |     // Step 1: 复制应用或知识库
 773 |     let copyResponse;
 774 |     if (copyForm.value.mode === 'knowledge') {
 775 |       copyResponse = await axios.post(`${settings.value.Dify_Api}/console/api/datasets/${copyForm.value.id}/copy`, {
 776 |         name: copyForm.value.name,
 777 |         description: copyForm.value.description,
 778 |       }, {
 779 |         headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 780 |       });
 781 |     } else {
 782 |       copyResponse = await axios.post(`${settings.value.Dify_Api}/console/api/apps/${copyForm.value.id}/copy`, {
 783 |         name: copyForm.value.name,
 784 |         icon: copyForm.value.icon,
 785 |         icon_background: copyForm.value.icon_background,
 786 |         mode: copyForm.value.mode,
 787 |         description: copyForm.value.description,
 788 |       }, {
 789 |         headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 790 |       });
 791 |     }
 792 | 
 793 |     // 获取复制的应用或知识库ID
 794 |     const appId = copyResponse.data.id;
 795 | 
 796 |     // Step 2: 获取所有Tag信息
 797 |     const tagType = copyForm.value.mode === 'knowledge' ? 'knowledge' : 'app';
 798 |     const tagResponse = await axios.get(`${settings.value.Dify_Api}/console/api/tags?type=${tagType}`, {
 799 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 800 |     });
 801 | 
 802 |     // 查找名称为auth.user.id的TagID
 803 |     const userTag = tagResponse.data.find(tag => tag.name === String(auth.user.id));
 804 | 
 805 |     if (userTag) {
 806 |       const tagId = userTag.id;
 807 | 
 808 |       // Step 3: 绑定Tag和应用或知识库
 809 |       await axios.post(
 810 |         `${settings.value.Dify_Api}/console/api/tag-bindings/create`,
 811 |         {
 812 |           tag_ids: [tagId],
 813 |           target_id: appId,
 814 |           type: tagType,
 815 |         },
 816 |         {
 817 |           headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 818 |         }
 819 |       );
 820 |     } else {
 821 |       console.error('未找到用户标签:', auth.user.id);
 822 |     }
 823 | 
 824 |     copyModalVisible.value = false;
 825 |     useToast().add({
 826 |       icon: 'i-heroicons-check-circle-20-solid',
 827 |       title: '复制成功',
 828 |       color: 'emerald',
 829 |     });
 830 |     refresh();
 831 |   } catch (error) {
 832 |     console.error('复制项目并绑定标签时发生错误:', error);
 833 |     useToast().add({
 834 |       icon: 'i-heroicons-x-circle-20-solid',
 835 |       title: '复制失败，请稍后再试。',
 836 |       color: 'red',
 837 |     });
 838 |   }
 839 | };
 840 | const previewApp = async (appId) => {
 841 |   try {
 842 |     const response = await axios.get(`${settings.value.Dify_Api}/console/api/apps/${appId}`, {
 843 |       headers: { Authorization: `Bearer ${settings.value.Dify_Token}` },
 844 |     });
 845 | 
 846 |     if (response.status === 200) {
 847 |       const data = response.data;
 848 |       let previewUrl;
 849 | 
 850 |       if (data.mode === 'agent-chat') {
 851 |         previewUrl = `${settings.value.Dify_Api}/chat/${data.site.code}`;
 852 |       } else {
 853 |         previewUrl = `${settings.value.Dify_Api}/${data.mode}/${data.site.code}`;
 854 |       }
 855 | 
 856 |       window.open(previewUrl, '_blank');
 857 |     } else {
 858 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '获取应用预览地址失败。', color: 'red' });
 859 |     }
 860 |   } catch (error) {
 861 |     console.error('Error fetching app preview data:', error);
 862 |     useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '请求失败，请稍后再试。', color: 'red' });
 863 |   }
 864 | };
 865 | watch(
 866 |   () => totalCostForCreatedByMe.value,
 867 |   async (newValue, oldValue) => {
 868 |     // 确保新的值不为 0
 869 |     if (parseFloat(newValue) !== 0) {
 870 |       await updateWorkflowBalance();
 871 |     }
 872 |   }
 873 | );
 874 | const updateWorkflowBalance = async () => {
 875 |   if (parseFloat(totalCostForCreatedByMe.value) === 0) {
 876 |     return;
 877 |   }
 878 | 
 879 |   if (auth.user.balance < totalCostForCreatedByMe.value) {
 880 |     // 余额不足，跳转到 /price 页面
 881 |     router.push('/price');
 882 |     useToast().add({
 883 |       icon: 'i-heroicons-x-circle-20-solid',
 884 |       title: '余额不足，请充值。',
 885 |       color: 'red',
 886 |     });
 887 |     return;
 888 |   }
 889 | 
 890 |   const { execute: postRequest } = useFetch<any>('/update-workflow-balance', {
 891 |     method: 'POST',
 892 |     body: {
 893 |       userId: auth.user.id,
 894 |       totalCostForCreatedByMe: parseFloat(totalCostForCreatedByMe.value),
 895 |     },
 896 |     immediate: false,
 897 |     watch: false,
 898 |     onResponse({ response }) {
 899 |       if (response?.status === 200) {
 900 | 
 901 |       } else {
 902 |         useToast().add({
 903 |           icon: 'i-heroicons-x-circle-20-solid',
 904 |           title: '余额更新失败，请稍后再试。',
 905 |           color: 'red',
 906 |         });
 907 |       }
 908 |     },
 909 |     onError() {
 910 |       useToast().add({
 911 |         icon: 'i-heroicons-x-circle-20-solid',
 912 |         title: '请求失败，请稍后再试。',
 913 |         color: 'red',
 914 |       });
 915 |     },
 916 |   });
 917 | 
 918 |   await postRequest();
 919 | };
 920 | const showContent = ref(true);
 921 | const showResult = ref(false);
 922 | const closeResult = () => {
 923 |   showContent.value = true;
 924 |   showResult.value = false;
 925 | }
 926 | const iframeSrc = ref('');
 927 | const iframeKey = ref(0);
 928 | const loadIframe = (item) => {
 929 |   showContent.value = false;
 930 |   showResult.value = false; //无论如何都重置为false
 931 | 
 932 |   const id = item.id;
 933 |   if (item.permission === 'only_me') {
 934 |     iframeSrc.value = `${settings.value.Dify_Api}/datasets/${id}/documents?workflow`;
 935 |   } else if (item.mode === 'advanced-chat' || item.mode === 'workflow?workflow') {
 936 |     iframeSrc.value = `${settings.value.Dify_Api}/app/${id}/workflow?workflow`;
 937 |   } else {
 938 |     iframeSrc.value = `${settings.value.Dify_Api}/app/${id}/configuration?workflow`;
 939 |   }
 940 |   iframeKey.value += 1; // Force iframe to reload if the src is the same
 941 |   showContent.value = false;
 942 | };
 943 | 
 944 | const iframeHeight = ref('calc(100vh - 80px)')
 945 | const handleResize = () => {
 946 |   const width = window.innerWidth
 947 |   if (width < 720) {
 948 | 
 949 |     iframeHeight.value = 'calc(100vh - 148px'
 950 |   } else {
 951 |     iframeHeight.value = 'calc(100vh - 175px)'
 952 | 
 953 |   }
 954 | }
 955 | const handleCardClick = (item) => {
 956 |   showContent.value = false;
 957 |   showResult.value = false; //无论如何都重置为false
 958 | 
 959 |   iframeSrc.value = item.appurl; //改变iframe的src
 960 |   iframeKey.value += 1; //每次点击卡片都增加iframe的key
 961 | 
 962 |   showContent.value = false;
 963 | }
 964 | onMounted(() => {
 965 |   window.addEventListener('resize', handleResize)
 966 |   handleResize();
 967 | })
 968 | 
 969 | onUnmounted(() => {
 970 |   window.removeEventListener('resize', handleResize)
 971 | })
 972 | 
 973 | watchEffect(handleResize)
 974 | 
 975 | const botVisible = ref(false);
 976 | const showBot = () => {
 977 |   botVisible.value = true;
 978 | };
 979 | </script>
 980 | <style>
 981 | .floating-button {
 982 |   position: fixed;
 983 |   bottom: 50%;
 984 |   right: 10px;
 985 |   z-index: 1001;
 986 | }
 987 | 
 988 | .floating-button-robot {
 989 |   position: fixed;
 990 |   bottom: 55%;
 991 |   right: 10px;
 992 |   z-index: 1001;
 993 | }
 994 | 
 995 | .arco-result {
 996 |   padding: 12px;
 997 | }
 998 | 
 999 | .iframe-wraps {
1000 |   width: 100%;
1001 | }
1002 | </style>
1003 | 


--------------------------------------------------------------------------------
/nuxt/app/pages/bot.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <HomeTetris />
  3 |   <a-tabs size="large">
  4 |     <template #extra>
  5 |       <UButton class="mr-2" icon="i-heroicons-squares-2x2" size="xs" disabled>{{ auth.user.ration }}/{{
  6 |         auth.user.vip_ration }}
  7 |       </UButton>
  8 |       <UButton class="mr-2" size="xs" type="primary" @click="showModal = true">新增应用</UButton>
  9 |     </template>
 10 |     <a-tab-pane key="1">
 11 |       <template #title>
 12 |         <icon-robot /> 客户端
 13 |       </template>
 14 | 
 15 |       <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-4 p-2" v-if="chatBots && chatBots.length > 0">
 16 |         <ULandingCard v-for="(bot, index) in chatBots" :key="index" :title="bot.appname" :description="bot.describe"
 17 |           @click="showDetail(bot)" color="primary" orientation="vertical">
 18 |           <template v-slot:icon>
 19 |             <img :src="bot.channel_type === 'wx' ? 'https://io.onenov.cn/file/202405240059097.svg' :
 20 |               (bot.channel_type === 'feishu' ? 'https://io.onenov.cn/file/202405240055519.svg' :
 21 |                 (bot.channel_type === 'wechatcom_app' ? 'https://io.onenov.cn/file/202405240057860.svg' :
 22 |                   ((bot.channel_type === 'wechatmp_service' || bot.channel_type === 'wechatmp') ? 'https://io.onenov.cn/file/202405240142150.svg' :
 23 |                     'https://io.onenov.cn/file/202405211802572.svg')))" alt="CustomIcon" class="w-8 h-8" />
 24 |           </template>
 25 | 
 26 |           <UBadge class="absolute right-6 top-4" variant="subtle" :color="bot.process_id ? 'green' : 'red'">
 27 |             <span v-if="bot.dify_app_type === 'chatbot'" class="ml-1">聊天助手</span>
 28 |             <span v-else-if="bot.dify_app_type === 'agent'" class="ml-1">Agent</span>
 29 |             <span v-else-if="bot.dify_app_type === 'workflow'" class="ml-1">工作流</span>
 30 |           </UBadge>
 31 | 
 32 |           <div class="flex justify-between" @click.stop>
 33 |             <div class="flex space-x-2">
 34 |               <UButton size="2xs" variant="solid" @click="copyAuthToken(bot.login_token)" v-if="bot.process_id">Token
 35 |               </UButton>
 36 | 
 37 |               <UButton size="2xs" variant="solid" @click="showEditConfig(bot)" v-if="bot.process_id">配置
 38 |               </UButton>
 39 | 
 40 |               <UButton size="2xs" variant="solid" @click="viewChatbotLogs(bot.appname)" v-if="bot.process_id">日志
 41 |               </UButton>
 42 | 
 43 |               <UButton size="2xs" icon="i-heroicons-play-circle" variant="solid" v-if="!bot.process_id"
 44 |                 @click="startChatbot(bot.appname)"> 启动
 45 |               </UButton>
 46 |             </div>
 47 | 
 48 | 
 49 |             <UButton size="2xs" icon="i-heroicons-trash" color="red" variant="solid" v-if="!bot.process_id"
 50 |               @click="deleteChatbot(bot.appname)">
 51 |             </UButton>
 52 |             <UButton size="2xs" icon="i-heroicons-power" color="red" square variant="solid"
 53 |               @click="stopChatbot(bot.appname)" v-else>
 54 |             </UButton>
 55 |           </div>
 56 |         </ULandingCard>
 57 |       </div>
 58 | 
 59 |       <ULandingSection icon="i-heroicons-rocket-launch" title="暂无数据" description="看起来什么都还没有呢～" v-else />
 60 | 
 61 | 
 62 |     </a-tab-pane>
 63 |     <a-tab-pane key="2">
 64 |       <template #title>
 65 |         <icon-list /> 简介
 66 |       </template>
 67 |       <ULandingSection icon="i-heroicons-rocket-launch" title="暂无数据" description="看起来什么都还没有呢～" />
 68 |     </a-tab-pane>
 69 |     <a-tab-pane key="3">
 70 |       <template #title>
 71 |         <icon-question-circle /> 帮助
 72 |       </template>
 73 |       <ULandingSection icon="i-heroicons-rocket-launch" title="暂无数据" description="看起来什么都还没有呢～" />
 74 |     </a-tab-pane>
 75 |   </a-tabs>
 76 | 
 77 |   <a-modal v-model:visible="showModal" title="新增应用" @ok="handleSubmit" :unmount-on-close="true" width="auto">
 78 |     <a-form :model="form" :rules="rules" @submit="handleSubmit">
 79 |       <!-- 隐藏的UserID字段 -->
 80 |       <a-form-item label="UserID" prop="userid" style="display:none;"><a-input v-model="form.userid" /></a-form-item>
 81 |       <a-form-item label="应用名称" prop="appname">
 82 |         <a-input v-model="form.appname" placeholder="只支持英文和数字类型" />
 83 |         <template #extra>
 84 |           <div>确保名称不与现有应用冲突</div>
 85 |         </template>
 86 |       </a-form-item>
 87 |       <a-form-item label="应用描述" prop="describe">
 88 |         <a-input v-model="form.describe" placeholder="填入你的应用描述，支持中文" /></a-form-item>
 89 |       <a-form-item label="ApiKey" prop="dify_api_key">
 90 |         <a-input v-model="form.dify_api_key" placeholder="app-xxx" />
 91 |         <template #extra>
 92 |           <div>从WorkFlow获取应用ApiKey</div>
 93 |         </template>
 94 |       </a-form-item>
 95 |       <a-form-item label="助手类型" prop="dify_app_type">
 96 |         <a-radio-group v-model="form.dify_app_type">
 97 |           <a-radio value="chatbot">聊天助手</a-radio>
 98 |           <a-radio value="agent">Agent</a-radio>
 99 |           <a-radio value="workflow">工作流</a-radio>
100 |         </a-radio-group>
101 |       </a-form-item>
102 |       <a-form-item label="通道" prop="channel_type">
103 |         <a-radio-group v-model="form.channel_type">
104 |           <a-radio value="wx">个人微信号</a-radio>
105 |           <a-radio value="wechatcom_app">企业微信号</a-radio>
106 |           <a-radio value="wechatmp">个人公众号</a-radio>
107 |           <a-radio value="wechatmp_service">企业公众号</a-radio>
108 |           <a-radio value="feishu">飞书机器人</a-radio>
109 |           <!--<a-radio value="dingtalk">钉钉机器人</a-radio>-->
110 |         </a-radio-group>
111 |       </a-form-item>
112 |       <!-- 仅在选择企业微信时显示 -->
113 |       <template v-if="form.channel_type === 'wechatcom_app'">
114 |         <a-form-item label="CorpID" prop="wechatcom_corp_id">
115 |           <a-input v-model="form.wechatcom_corp_id" /></a-form-item>
116 |         <a-form-item label="AgentID" prop="wechatcomapp_agent_id">
117 |           <a-input v-model="form.wechatcomapp_agent_id" /></a-form-item>
118 |         <a-form-item label="Secret" prop="wechatcomapp_secret">
119 |           <a-input v-model="form.wechatcomapp_secret" /></a-form-item>
120 |         <a-form-item label="Token" prop="wechatcomapp_token">
121 |           <a-input v-model="form.wechatcomapp_token" /></a-form-item>
122 |         <a-form-item label="AES Key" prop="wechatcomapp_aes_key">
123 |           <a-input v-model="form.wechatcomapp_aes_key" /></a-form-item>
124 |       </template>
125 |       <!-- 仅在选择个人公众号或企业公众号时显示 -->
126 |       <template v-if="form.channel_type === 'wechatmp' || form.channel_type === 'wechatmp_service'">
127 |         <a-form-item label="AppID" prop="wechatmp_app_id">
128 |           <a-input v-model="form.wechatmp_app_id" /></a-form-item>
129 |         <a-form-item label="AppSecret" prop="wechatmp_app_secret">
130 |           <a-input v-model="form.wechatmp_app_secret" /></a-form-item>
131 |         <a-form-item label="Token" prop="wechatmp_token">
132 |           <a-input v-model="form.wechatmp_token" /></a-form-item>
133 |         <a-form-item label="AES Key" prop="wechatmp_aes_key">
134 |           <a-input v-model="form.wechatmp_aes_key" /></a-form-item>
135 |       </template>
136 |       <!-- 仅在选择飞书机器人时显示 -->
137 |       <template v-if="form.channel_type === 'feishu'">
138 |         <a-form-item label="AppID" prop="feishu_app_id">
139 |           <a-input v-model="form.feishu_app_id" /></a-form-item>
140 |         <a-form-item label="AppSecret" prop="feishu_app_secret">
141 |           <a-input v-model="form.feishu_app_secret" /></a-form-item>
142 |         <a-form-item label="Token" prop="feishu_token">
143 |           <a-input v-model="form.feishu_token" /></a-form-item>
144 |         <a-form-item label="Bot名称" prop="feishu_bot_name">
145 |           <a-input v-model="form.feishu_bot_name" /></a-form-item>
146 |       </template>
147 |       <!-- 仅在选择钉钉机器人时显示 -->
148 |       <template v-if="form.channel_type === 'dingtalk'">
149 |         <a-form-item label="钉钉ClientID" prop="dingtalk_client_id">
150 |           <a-input v-model="form.dingtalk_client_id" /></a-form-item>
151 |         <a-form-item label="钉钉ClientSecret" prop="dingtalk_client_secret">
152 |           <a-input v-model="form.dingtalk_client_secret" />
153 |         </a-form-item>
154 |       </template>
155 |     </a-form>
156 |   </a-modal>
157 |   <a-modal v-model:visible="showLogsModal" title="应用日志" :footer="false" :unmount-on-close="true" width="80%">
158 |     <template v-if="logsContent">
159 |       <div>
160 |         <pre class="chatbot-log">{{ logsContent }}</pre>
161 |       </div>
162 |     </template>
163 |     <template v-else>
164 |       <p>暂无日志</p>
165 |     </template>
166 |   </a-modal>
167 |   <a-modal v-model:visible="showStartModal" title="启动应用" :closable="false" :footer="false" :mask-closable="false"
168 |     :hide-cancel="true" :esc-to-close="false" :unmount-on-close="true" width="80%">
169 |     <template v-if="logsContent">
170 |       <div v-if="qrCodeUrl" class="flex justify-center items-center">
171 |         <div>
172 |           <img class="qr" :src="qrCodeUrl" alt="二维码" />
173 |           <a-alert v-if="logsContent.includes('Please press confirm on your phone.')" class="mt-2"
174 |             center>请在手机上确认登录，然后请耐心等待任务启动</a-alert>
175 | 
176 |           <a-alert v-else class="mt-2" center>请用手机微信扫描登录</a-alert>
177 |         </div>
178 |       </div>
179 |       <div v-if="LoginToken" class="flex justify-center items-center">
180 |         <div class="flex justify-center items-center">
181 |           <a-alert class="mt-2" center>请向机器人发送指令 <a-tag color="blue" @click="copyToClipboardtoken" bordered>#auth {{
182 |             LoginToken
183 |               }}</a-tag> 绑定管理员账户</a-alert>
184 |         </div>
185 |       </div>
186 |       <pre class="overflow-auto p-4 rounded-md chatbot-logs max-h-56 mt-4">{{ logsContent }}</pre>
187 |     </template>
188 |     <template v-else>
189 |       <a-alert banner center title="应用启动中">
190 |         <template #icon>
191 |           <icon-loading />
192 |         </template>
193 |         启动指令已下发，请等待任务运行。
194 |       </a-alert>
195 |     </template>
196 |   </a-modal>
197 |   <a-modal v-model:visible="showDetailModal" title="详细信息" :footer="false" :fullscreen="false" :unmount-on-close="true"
198 |     width="60%">
199 |     <div v-if="selectedBot" class="flex flex-col md:flex-row h-100 overflow-hidden">
200 |       <!-- 左侧区块 -->
201 |       <div class="w-full md:w-1/2 h-full p-4 overflow-y-auto flex-1">
202 |         <pre class="overflow-auto rounded-md chatbot-logs max-h-96">{{ selectedBot.logsContent || '暂无日志' }}</pre>
203 |       </div>
204 |       <!-- 右侧区块 -->
205 |       <div class="w-full md:w-1/2 h-full p-2">
206 |         <div class="flex flex-col justify-between h-full">
207 |           <div class="mb-2">
208 |             <ULandingCard :title="selectedBot.appname" :description="selectedBot.describe"
209 |               :color="selectedBot.process_id ? 'green' : 'red'">
210 |               <template v-slot:icon>
211 |                 <img :src="selectedBot.channel_type === 'wx' ? 'https://io.onenov.cn/file/202405240059097.svg' :
212 |                   (selectedBot.channel_type === 'feishu' ? 'https://io.onenov.cn/file/202405240055519.svg' :
213 |                     (selectedBot.channel_type === 'wechatcom_app' ? 'https://io.onenov.cn/file/202405240057860.svg' :
214 |                       ((selectedBot.channel_type === 'wechatmp_service' || selectedBot.channel_type === 'wechatmp') ? 'https://io.onenov.cn/file/202405240142150.svg' :
215 |                         'https://io.onenov.cn/file/202405211802572.svg')))" alt="CustomIcon" class="w-8 h-8" />
216 |               </template>
217 |               <UBadge class="absolute right-6 top-4" variant="subtle" :color="selectedBot.process_id ? 'green' : 'red'">
218 |                 <span v-if="selectedBot.dify_app_type === 'chatbot'" class="ml-1">聊天助手</span>
219 |                 <span v-else-if="selectedBot.dify_app_type === 'agent'" class="ml-1">Agent</span>
220 |                 <span v-else-if="selectedBot.dify_app_type === 'workflow'" class="ml-1">工作流</span>
221 |               </UBadge>
222 |             </ULandingCard>
223 | 
224 |             <div class="mt-4 mb-2">
225 |               <UDivider label="基本信息" />
226 |               <div class="index-module_basic">
227 |                 <a-row :gutter="20">
228 |                   <a-col :xs="24" :lg="24" class="cursor-pointer">
229 |                     <div class="draw_dialog_card_title">
230 |                       <p>进程任务：</p>
231 |                       <p><a-tag :color="selectedBot.process_id ? 'green' : 'red'" bordered>{{
232 |                         selectedBot.process_id ? selectedBot.process_id : '未启动'
233 |                           }}</a-tag></p>
234 |                     </div>
235 |                     <div class="draw_dialog_card_title">
236 |                       <p>认证口令：</p>
237 |                       <p><a-tag :color="selectedBot.login_token ? 'green' : 'red'" bordered
238 |                           @click="copyAuthToken(selectedBot.login_token)">{{
239 |                             selectedBot.login_token ? selectedBot.login_token : '未启动'
240 |                           }}</a-tag></p>
241 |                     </div>
242 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wx'">
243 |                       <p>登录用户：</p>
244 |                       <p><a-tag :color="selectedBot.nickname ? 'green' : 'red'" bordered>{{
245 |                         selectedBot.nickname ? selectedBot.nickname : '未启动' }}</a-tag>
246 |                       </p>
247 |                     </div>
248 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatcom_app'">
249 |                       <p>登录用户：</p>
250 |                       <p><a-tag :color="selectedBot.wechatcomapp_agent_id ? 'green' : 'red'" bordered>{{
251 |                         selectedBot.wechatcomapp_agent_id ?
252 |                           selectedBot.wechatcomapp_agent_id :
253 |                           '未启动' }}</a-tag>
254 |                       </p>
255 |                     </div>
256 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'feishu'">
257 |                       <p>登录用户：</p>
258 |                       <p><a-tag :color="selectedBot.feishu_bot_name ? 'green' : 'red'" bordered>{{
259 |                         selectedBot.feishu_bot_name ? selectedBot.feishu_bot_name :
260 |                           '未启动'
261 |                           }}</a-tag>
262 |                       </p>
263 |                     </div>
264 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatcom_app'">
265 |                       <p>运行端口：</p>
266 |                       <p><a-tag :color="selectedBot.port ? 'blue' : 'red'" bordered>{{
267 |                         selectedBot.port ? selectedBot.port : '未启动' }}</a-tag>
268 |                       </p>
269 |                     </div>
270 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'feishu'">
271 |                       <p>运行端口：</p>
272 |                       <p><a-tag :color="selectedBot.port ? 'blue' : 'red'" bordered>{{
273 |                         selectedBot.port ? selectedBot.port : '未启动' }}</a-tag>
274 |                       </p>
275 |                     </div>
276 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatmp'">
277 |                       <p>运行端口：</p>
278 |                       <p><a-tag :color="selectedBot.port ? 'blue' : 'red'" bordered>{{
279 |                         selectedBot.port ? selectedBot.port : '未启动' }}</a-tag>
280 |                       </p>
281 |                     </div>
282 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatmp_service'">
283 |                       <p>运行端口：</p>
284 |                       <p><a-tag :color="selectedBot.port ? 'blue' : 'red'" bordered>{{
285 |                         selectedBot.port ? selectedBot.port : '未启动' }}</a-tag>
286 |                       </p>
287 |                     </div>
288 | 
289 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type !== 'wx'">
290 |                       <p>服务器：</p>
291 |                       <p><a-tag color="blue" bordered>{{ serverIp }}</a-tag>
292 |                       </p>
293 |                     </div>
294 | 
295 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatcom_app'">
296 |                       <p>企业ID：</p>
297 |                       <p><a-tag :color="selectedBot.wechatcom_corp_id ? 'green' : 'red'" bordered>{{
298 |                         selectedBot.wechatcom_corp_id ? selectedBot.wechatcom_corp_id :
299 |                           '未启动'
300 |                           }}</a-tag>
301 |                       </p>
302 |                     </div>
303 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatcom_app'">
304 |                       <p>应用Secret</p>
305 |                       <p><a-tag :color="selectedBot.wechatcomapp_secret ? 'green' : 'red'" bordered>{{
306 |                         selectedBot.wechatcomapp_secret ?
307 |                           selectedBot.wechatcomapp_secret :
308 |                           '未启动' }}</a-tag>
309 |                       </p>
310 |                     </div>
311 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatcom_app'">
312 |                       <p>应用Token</p>
313 |                       <p><a-tag :color="selectedBot.wechatcomapp_token ? 'green' : 'red'" bordered>{{
314 |                         selectedBot.wechatcomapp_token ? selectedBot.wechatcomapp_token
315 |                           : '未启动'
316 |                           }}</a-tag>
317 |                       </p>
318 |                     </div>
319 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatcom_app'">
320 |                       <p>应用AesKey</p>
321 |                       <p><a-tag :color="selectedBot.wechatcomapp_aes_key ? 'green' : 'red'" bordered>{{
322 |                         selectedBot.wechatcomapp_aes_key ?
323 |                           selectedBot.wechatcomapp_aes_key :
324 |                           '未启动' }}</a-tag>
325 |                       </p>
326 |                     </div>
327 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'feishu'">
328 |                       <p>应用Id</p>
329 |                       <p><a-tag :color="selectedBot.feishu_app_id ? 'green' : 'red'" bordered>{{
330 |                         selectedBot.feishu_app_id ? selectedBot.feishu_app_id : '未启动'
331 |                           }}</a-tag>
332 |                       </p>
333 |                     </div>
334 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'feishu'">
335 |                       <p>应用Secret</p>
336 |                       <p><a-tag :color="selectedBot.feishu_app_secret ? 'green' : 'red'" bordered>{{
337 |                         selectedBot.feishu_app_secret ? selectedBot.feishu_app_secret :
338 |                           '未启动'
339 |                           }}</a-tag>
340 |                       </p>
341 |                     </div>
342 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'feishu'">
343 |                       <p>应用Token</p>
344 |                       <p><a-tag :color="selectedBot.feishu_token ? 'green' : 'red'" bordered>{{
345 |                         selectedBot.feishu_token ? selectedBot.feishu_token : '未启动'
346 |                           }}</a-tag>
347 |                       </p>
348 |                     </div>
349 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatmp_service'">
350 |                       <p>AppID</p>
351 |                       <p><a-tag :color="selectedBot.wechatmp_app_id ? 'green' : 'red'" bordered>{{
352 |                         selectedBot.wechatmp_app_id ? selectedBot.wechatmp_app_id :
353 |                           '未启动'
354 |                           }}</a-tag>
355 |                       </p>
356 |                     </div>
357 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatmp_service'">
358 |                       <p>AppSecret</p>
359 |                       <p><a-tag :color="selectedBot.wechatmp_app_secret ? 'green' : 'red'" bordered>{{
360 |                         selectedBot.wechatmp_app_secret ?
361 |                           selectedBot.wechatmp_app_secret :
362 |                           '未启动'
363 |                           }}</a-tag>
364 |                       </p>
365 |                     </div>
366 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatmp_service'">
367 |                       <p>Token</p>
368 |                       <p><a-tag :color="selectedBot.wechatmp_token ? 'green' : 'red'" bordered>{{
369 |                         selectedBot.wechatmp_token ? selectedBot.wechatmp_token : '未启动'
370 |                           }}</a-tag>
371 |                       </p>
372 |                     </div>
373 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatmp_service'">
374 |                       <p>AESKey</p>
375 |                       <p><a-tag :color="selectedBot.wechatmp_aes_key ? 'green' : 'red'" bordered>{{
376 |                         selectedBot.wechatmp_aes_key ? selectedBot.wechatmp_aes_key :
377 |                           '未启动'
378 |                           }}</a-tag>
379 |                       </p>
380 |                     </div>
381 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatmp'">
382 |                       <p>AppID</p>
383 |                       <p><a-tag :color="selectedBot.wechatmp_app_id ? 'green' : 'red'" bordered>{{
384 |                         selectedBot.wechatmp_app_id ? selectedBot.wechatmp_app_id :
385 |                           '未启动'
386 |                           }}</a-tag>
387 |                       </p>
388 |                     </div>
389 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatmp'">
390 |                       <p>AppSecret</p>
391 |                       <p><a-tag :color="selectedBot.wechatmp_app_secret ? 'green' : 'red'" bordered>{{
392 |                         selectedBot.wechatmp_app_secret ?
393 |                           selectedBot.wechatmp_app_secret :
394 |                           '未启动'
395 |                           }}</a-tag>
396 |                       </p>
397 |                     </div>
398 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatmp'">
399 |                       <p>Token</p>
400 |                       <p><a-tag :color="selectedBot.wechatmp_token ? 'green' : 'red'" bordered>{{
401 |                         selectedBot.wechatmp_token ? selectedBot.wechatmp_token : '未启动'
402 |                           }}</a-tag>
403 |                       </p>
404 |                     </div>
405 |                     <div class="draw_dialog_card_title" v-if="selectedBot.channel_type === 'wechatmp'">
406 |                       <p>AESKey</p>
407 |                       <p><a-tag :color="selectedBot.wechatmp_aes_key ? 'green' : 'red'" bordered>{{
408 |                         selectedBot.wechatmp_aes_key ? selectedBot.wechatmp_aes_key :
409 |                           '未启动'
410 |                           }}</a-tag>
411 |                       </p>
412 |                     </div>
413 |                     <div class="draw_dialog_card_title">
414 |                       <p>更新时间：</p>
415 |                       <p>{{ selectedBot.updated_at }}</p>
416 |                     </div>
417 |                   </a-col>
418 |                 </a-row>
419 |               </div>
420 |             </div>
421 |           </div>
422 |         </div>
423 |       </div>
424 |     </div>
425 |   </a-modal>
426 |   <a-modal v-model:visible="showEditModal" title="编辑配置" @ok="handleSaveConfig" :unmount-on-close="true" width="80%">
427 |     <a-form :model="configForm" :rules="configRules" @submit="handleSaveConfig">
428 |       <a-textarea v-model="configForm.configContent" :auto-size="{ minRows: 10, maxRows: 15 }" />
429 |       <a-alert class="mt-2" type="warning">警告：手动编辑配置之后需要停止并重新启动应用，如果你不知道怎么编辑请勿修改。</a-alert>
430 |     </a-form>
431 |   </a-modal>
432 | </template>
433 | <script setup lang="ts">
434 | import { ref, onMounted, watch, defineProps, defineEmits } from 'vue';
435 | import axios from 'axios';
436 | import { storeToRefs } from 'pinia';
437 | import { useSettingsStore } from '@/stores/settings';
438 | import { useAuthStore } from '@/stores/auth';
439 | import { Message, Modal } from "@arco-design/web-vue";
440 | const settingsStore = useSettingsStore();
441 | const { settings } = storeToRefs(settingsStore);
442 | const modal = useModal();
443 | const auth = useAuthStore();
444 | 
445 | useSeoMeta({
446 |   title: '助手',
447 | })
448 | import { useRouter } from 'vue-router';
449 | const router = useRouter();
450 | const form = ref({
451 |   userid: '',
452 |   appname: '',
453 |   describe: '',
454 |   dify_api_key: '',
455 |   dify_app_type: 'chatbot', // 默认值为 'chatbot'
456 |   channel_type: 'wx' // 仅有 wx 选项
457 | });
458 | 
459 | const chatBots = ref([]);
460 | const serverIp = ref('');
461 | const showModal = ref(false);
462 | const showLogsModal = ref(false);
463 | const showStartModal = ref(false);
464 | const logsContent = ref('');
465 | const qrCodeUrl = ref('');
466 | const LoginToken = ref('');
467 | 
468 | const showDetailModal = ref(false);
469 | const selectedBot = ref(null);
470 | 
471 | const showDetail = async (bot) => {
472 |   selectedBot.value = bot;
473 |   showDetailModal.value = true;
474 | 
475 |   const { refresh: fetchData, status: fetchDataStatus } = useFetch<any>('chatbot_logs', {
476 |     method: 'POST',
477 |     body: {
478 |       userid: auth.user.id.toString(),
479 |       appname: bot.appname
480 |     },
481 |     immediate: true,
482 |     watch: false,
483 |     onResponse({ response }) {
484 |       if (response?.status === 200 && response._data) {
485 |         useToast().add({ icon: 'i-heroicons-check-circle-20-solid', title: '日志数据已成功获取。', color: 'emerald' });
486 |         selectedBot.value.logsContent = response._data.output || '暂无日志';
487 |       } else {
488 |         useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '获取日志数据失败。', color: 'red' });
489 |         selectedBot.value.logsContent = '获取日志时出现问题';
490 |       }
491 |     },
492 |     onError() {
493 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '请求失败,请稍后再试。', color: 'red' });
494 |       selectedBot.value.logsContent = '获取日志时出现错误';
495 |     }
496 |   });
497 | 
498 |   await fetchData();
499 | };
500 | 
501 | const getChatbotList = async () => {
502 |   const { refresh: fetchData, status: fetchDataStatus } = useFetch<any>('chatbot_list', {
503 |     method: 'POST',
504 |     body: { userid: auth.user.id.toString() },
505 |     immediate: true,
506 |     watch: false,
507 |     onResponse({ response }) {
508 |       if (response?.status === 200 && response._data) {
509 |         chatBots.value = response._data.data;
510 |         serverIp.value = response._data.server_ip;
511 |       } else {
512 |         useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: response?._data?.message || '获取Chatbot列表时出现问题', color: 'red' });
513 |       }
514 |     },
515 |     onError(error) {
516 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '获取Chatbot列表时出现错误', color: 'red' });
517 |     },
518 |   });
519 |   await fetchData();
520 |   // console.log(chatBots.value);  // 确认数据已加载
521 | };
522 | 
523 | const rules = {
524 |   userid: [{ required: true }],
525 |   appname: [{ required: true }],
526 |   describe: [{ required: true }],
527 |   dify_api_key: [{ required: true }],
528 |   dify_app_type: [{ required: true }],
529 |   channel_type: [{ required: true }],
530 |   wechatcom_corp_id: [{ required: form.channel_type === 'wechatcom_app' }],
531 |   wechatcomapp_token: [{ required: form.channel_type === 'wechatcom_app' }],
532 |   wechatcomapp_secret: [{ required: form.channel_type === 'wechatcom_app' }],
533 |   wechatcomapp_agent_id: [{ required: form.channel_type === 'wechatcom_app' }],
534 |   wechatcomapp_aes_key: [{ required: form.channel_type === 'wechatcom_app' }],
535 |   wechatmp_app_id: [{ required: form.channel_type === 'wechatmp' || form.channel_type === 'wechatmp_service' }],
536 |   wechatmp_app_secret: [{ required: form.channel_type === 'wechatmp' || form.channel_type === 'wechatmp_service' }],
537 |   wechatmp_aes_key: [{ required: form.channel_type === 'wechatmp' || form.channel_type === 'wechatmp_service' }],
538 |   wechatmp_token: [{ required: form.channel_type === 'wechatmp' || form.channel_type === 'wechatmp_service' }],
539 |   feishu_app_id: [{ required: form.channel_type === 'feishu' }],
540 |   feishu_app_secret: [{ required: form.channel_type === 'feishu' }],
541 |   feishu_token: [{ required: form.channel_type === 'feishu' }],
542 |   feishu_bot_name: [{ required: form.channel_type === 'feishu' }],
543 |   dingtalk_client_id: [{ required: form.channel_type === 'dingtalk' }],
544 |   dingtalk_client_secret: [{ required: form.channel_type === 'dingtalk' }]
545 | };
546 | const handleSubmit = async () => {
547 |   if (auth.user.remaining_ration === 0) {
548 |     useToast().add({
549 |       icon: 'i-heroicons-x-circle-20-solid',
550 |       title: '配额不足，无法创建',
551 |       color: 'red'
552 |     });
553 |     return; // 退出函数，防止继续提交
554 |   }
555 |   form.value.userid = auth.user.id.toString();
556 |   try {
557 |     const { refresh: fetchData, status: fetchDataStatus } = useFetch<any>('chatbot_add', {
558 |       method: 'POST',
559 |       body: form.value,
560 |       immediate: true,
561 |       watch: false,
562 |       onResponse({ response }) {
563 |         if (response?.status === 200 && response._data) {
564 |           useToast().add({
565 |             icon: 'i-heroicons-check-circle-20-solid',
566 |             title: response._data.message,
567 |             color: 'emerald'
568 |           });
569 |           getChatbotList();
570 |           updateAuthData();
571 |           showModal.value = false;
572 |         } else {
573 |           useToast().add({
574 |             icon: 'i-heroicons-x-circle-20-solid',
575 |             title: response?._data?.message || '未知问题',
576 |             color: 'red'
577 |           });
578 |         }
579 |       },
580 |       onError(error) {
581 |         useToast().add({
582 |           icon: 'i-heroicons-x-circle-20-solid',
583 |           title: '提交表单时出现错误',
584 |           color: 'red'
585 |         });
586 |       },
587 |     });
588 | 
589 |     await fetchData();
590 |   } catch (error) {
591 |     useToast().add({
592 |       icon: 'i-heroicons-x-circle-20-solid',
593 |       title: '提交表单时出现意外错误',
594 |       color: 'red'
595 |     });
596 |   }
597 | };
598 | const startChatbot = async (appname) => {
599 |   showStartModal.value = true;
600 |   logsContent.value = '';
601 |   qrCodeUrl.value = '';
602 |   LoginToken.value = '';
603 |   const { refresh: fetchData } = useFetch<any>('chatbot_start', {
604 |     method: 'POST',
605 |     body: {
606 |       userid: auth.user.id.toString(),
607 |       appname: appname
608 |     },
609 |     immediate: true,
610 |     watch: false,
611 |     onResponse({ response }) {
612 |       if (response?.status === 200) {
613 |         useToast().add({ icon: 'i-heroicons-check-circle-20-solid', title: response._data.message, color: 'emerald' });
614 |         if (['wechatcom_app', 'wechatmp', 'wechatmp_service', 'feishu', 'dingtalk'].includes(form.channel_type)) {
615 |           getChatbotList();
616 |           showStartModal.value = false;
617 |         } else {
618 |           pollLogs(appname);
619 |         }
620 |         pollLogs(appname);
621 |       } else {
622 |         useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: response?._data?.message || '未知问题', color: 'red' });
623 |         showStartModal.value = false;
624 |       }
625 |     },
626 |     onError(error) {
627 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '启动应用时出现错误', color: 'red' });
628 |       showStartModal.value = false;
629 |     },
630 |   });
631 | 
632 |   await fetchData();
633 | };
634 | const pollLogs = async (appname) => {
635 |   let isStarted = false;
636 |   let hasShownConfirmMessage = false;
637 | 
638 |   // console.log('Starting pollLogs for app:', appname);
639 | 
640 |   while (!isStarted) {
641 |     await new Promise(resolve => setTimeout(resolve, 5000)); // 等待5秒
642 |     try {
643 |       const { refresh: fetchLogs } = useFetch<any>('chatbot_startlogs', {
644 |         method: 'POST',
645 |         body: {
646 |           userid: auth.user.id.toString(), // 确保获取的是正确的用户ID
647 |           appname: appname
648 |         },
649 |         headers: { 'Accept': 'application/json' },
650 |         immediate: true,
651 |         watch: false,
652 |         onResponse({ response }) {
653 |           // console.log('Logs Response:', response);
654 |           if (response?.status === 200) {
655 |             logsContent.value = response._data.output || '暂无日志';
656 |             if (response._data.login_img) {
657 |               qrCodeUrl.value = response._data.login_img;
658 |             }
659 |             if (response._data.login_token) {
660 |               LoginToken.value = response._data.login_token;
661 |             }
662 |             // 如果检测到登录成功, 更新状态并关闭弹窗
663 |             if (response._data.message === '登录成功' || response._data.output.includes('http://0.0.0.0:') || response._data.output.includes('createbotdifyforchat')) {
664 |               isStarted = true;
665 |               showStartModal.value = false; // 关闭弹窗
666 |               Message.success('启动成功！');
667 |               getChatbotList();
668 |               return; // 跳出循环
669 |             } else if (response._data.output.includes('Please press confirm on your phone.') && !hasShownConfirmMessage) {
670 |               // 如果检测到"请在手机上确认登录"信息且尚未显示过, 则显示提示信息
671 |               Message.info('请在手机上确认登录');
672 |               hasShownConfirmMessage = true;
673 |             }
674 |           } else {
675 |             console.error('Error Status:', response?.status);
676 |             Message.error(response?._data?.message || '未知问题');
677 |             isStarted = true; // 停止轮询
678 |             return; // 跳出循环
679 |           }
680 |         },
681 |         onError(error) {
682 |           console.error('Logs Error:', error);
683 |           Message.error('查看日志时出现错误');
684 |           isStarted = true; // 停止轮询
685 |           return; // 跳出循环
686 |         }
687 |       });
688 | 
689 |       await fetchLogs();
690 |     } catch (error) {
691 |       console.error('Logs Error:', error);
692 |       Message.error('查看日志时出现错误');
693 |       isStarted = true; // 停止轮询
694 |       return; // 跳出循环
695 |     }
696 |     // console.log('Current isStarted State:', isStarted); // 调试信息
697 |   }
698 | };
699 | const viewChatbotLogs = async (appname) => {
700 |   const { refresh: fetchData } = useFetch<any>('chatbot_logs', {
701 |     method: 'POST',
702 |     body: {
703 |       userid: auth.user.id.toString(),
704 |       appname: appname
705 |     },
706 |     immediate: true,
707 |     watch: false,
708 |     onResponse({ response }) {
709 |       if (response?.status === 200) {
710 |         logsContent.value = response._data.output || '暂无日志';
711 |         showLogsModal.value = true;
712 |         useToast().add({ icon: 'i-heroicons-check-circle-20-solid', title: response._data.message, color: 'emerald' });
713 |       } else {
714 |         useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: response?._data?.message || '未知问题', color: 'red' });
715 |       }
716 |     },
717 |     onError(error) {
718 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '查看日志时出现错误', color: 'red' });
719 |     },
720 |   });
721 | 
722 |   await fetchData();
723 | };
724 | const deleteChatbot = async (appname) => {
725 |   const { refresh: fetchData } = useFetch<any>('chatbot_delete', {
726 |     method: 'POST',
727 |     body: {
728 |       userid: auth.user.id.toString(),
729 |       appname: appname
730 |     },
731 |     immediate: true,
732 |     watch: false,
733 |     onResponse({ response }) {
734 |       if (response?.status === 200) {
735 |         useToast().add({ icon: 'i-heroicons-check-circle-20-solid', title: response._data.message, color: 'emerald' });
736 |         getChatbotList();
737 |         updateAuthData();
738 |       } else {
739 |         useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: response?._data?.message || '未知问题', color: 'red' });
740 |       }
741 |     },
742 |     onError(error) {
743 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '删除应用时出现错误', color: 'red' });
744 |     },
745 |   });
746 | 
747 |   await fetchData();
748 | };
749 | const stopChatbot = async (appname) => {
750 |   const { refresh: fetchData } = useFetch<any>('chatbot_stop', {
751 |     method: 'POST',
752 |     body: {
753 |       userid: auth.user.id.toString(),
754 |       appname: appname
755 |     },
756 |     immediate: true,
757 |     watch: false,
758 |     onResponse({ response }) {
759 |       if (response?.status === 200) {
760 |         useToast().add({ icon: 'i-heroicons-check-circle-20-solid', title: response._data.message, color: 'emerald' });
761 |         getChatbotList();
762 |       } else {
763 |         useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: response?._data?.message || '未知问题', color: 'red' });
764 |       }
765 |     },
766 |     onError(error) {
767 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '停止应用时出现错误', color: 'red' });
768 |     },
769 |   });
770 | 
771 |   await fetchData();
772 | };
773 | 
774 | const copyToClipboard = async (text: string) => {
775 |   try {
776 |     await navigator.clipboard.writeText(text)
777 |     // 显示消息
778 |     Message.success('复制成功！')
779 |   } catch (err) {
780 |     console.error('Failed to copy:', err)
781 |     // Message.error('Failed to copy!')
782 |   }
783 | }
784 | 
785 | const copyToClipboardtoken = () => {
786 |   const text = `#auth ${LoginToken.value}`;
787 | 
788 |   // 创建一个临时的textarea元素
789 |   const textarea = document.createElement('textarea');
790 |   textarea.value = text;
791 |   document.body.appendChild(textarea);
792 |   textarea.select();
793 |   document.execCommand('copy');
794 |   document.body.removeChild(textarea);
795 |   Message.success('复制成功！')
796 |   //alert(`内容已复制: ${text}`);
797 | }
798 | 
799 | const showEditModal = ref(false);
800 | const configForm = ref({
801 |   configContent: ''
802 | });
803 | const configRules = {
804 |   configContent: [{ required: true, message: '配置内容不能为空', trigger: 'blur' }]
805 | };
806 | 
807 | const showEditConfig = async (bot) => {
808 |   const { refresh: fetchData } = useFetch<any>('chatbot_config_get', {
809 |     method: 'POST',
810 |     body: {
811 |       userid: auth.user.id.toString(),
812 |       appname: bot.appname
813 |     },
814 |     immediate: true,
815 |     watch: false,
816 |     onResponse({ response }) {
817 |       if (response?.status === 200) {
818 |         configForm.value.configContent = response._data.configContent;
819 |         showEditModal.value = true;
820 |       } else {
821 |         useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: response?._data?.message || '获取配置时出现问题', color: 'red' });
822 |       }
823 |     },
824 |     onError(error) {
825 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '获取配置时出现错误', color: 'red' });
826 |     }
827 |   });
828 | 
829 |   await fetchData();
830 | };
831 | 
832 | const handleSaveConfig = async () => {
833 |   const { refresh: fetchData } = useFetch<any>('chatbot_config_save', {
834 |     method: 'POST',
835 |     body: {
836 |       userid: auth.user.id.toString(),
837 |       appname: selectedBot.value.appname,
838 |       configContent: configForm.value.configContent
839 |     },
840 |     immediate: true,
841 |     watch: false,
842 |     onResponse({ response }) {
843 |       if (response?.status === 200) {
844 |         useToast().add({ icon: 'i-heroicons-check-circle-20-solid', title: response._data.message, color: 'emerald' });
845 |         showEditModal.value = false;
846 |       } else {
847 |         useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: response?._data?.message || '保存配置时出现问题', color: 'red' });
848 |       }
849 |     },
850 |     onError(error) {
851 |       useToast().add({ icon: 'i-heroicons-x-circle-20-solid', title: '保存配置时出现错误', color: 'red' });
852 |     }
853 |   });
854 | 
855 |   await fetchData();
856 | };
857 | 
858 | const copyAuthToken = (token) => {
859 |   const authToken = `#auth ${token}`;
860 | 
861 |   // 创建一个临时的textarea元素
862 |   const textarea = document.createElement('textarea');
863 |   textarea.value = authToken;
864 |   document.body.appendChild(textarea);
865 |   textarea.select();
866 |   document.execCommand('copy');
867 |   document.body.removeChild(textarea);
868 |   useToast().add({
869 |     icon: 'i-heroicons-check-circle-20-solid',
870 |     title: '认证口令已复制！',
871 |     color: 'emerald',
872 |   });
873 | };
874 | const updateAuthData = async () => {
875 |   await auth.fetchUser();
876 | };
877 | onMounted(async () => {
878 |   if (!auth.logged) {
879 |     router.push('/auth/login');
880 |     return;
881 |   }
882 |   getChatbotList();
883 |   updateAuthData();
884 | });
885 | 
886 | const myappitems = (bot: { appname: string }) => [
887 |   [{
888 |     label: '编辑',
889 |     icon: 'i-heroicons-pencil-square-20-solid',
890 |     click: () => {
891 |       startChatbot(bot.appname);
892 |     }
893 |   }, {
894 |     label: '复制',
895 |     icon: 'i-heroicons-document-duplicate-20-solid',
896 |     click: () => {
897 |       viewChatbotLogs(bot.appname);
898 |     }
899 |   }, {
900 |     label: '复制',
901 |     icon: 'i-heroicons-document-duplicate-20-solid',
902 |     click: () => {
903 |       stopChatbot(bot.appname);
904 |     }
905 |   }, {
906 |     label: '复制',
907 |     icon: 'i-heroicons-document-duplicate-20-solid',
908 |     click: () => {
909 |       showEditConfig(bot.appname);
910 |     }
911 |   }],
912 |   [{
913 |     label: '删除',
914 |     icon: 'i-heroicons-trash-20-solid',
915 |     click: () => {
916 |       stopChatbot(bot.appname);
917 |     }
918 |   }]
919 | ];
920 | const customUIConfig = {
921 |   width: 'w-20'
922 | };
923 | </script>
924 | <style scoped>
925 | pre.chatbot-logs {
926 |   padding: 5px;
927 | }
928 | 
929 | img.qr {
930 |   border-radius: 15px;
931 |   border: 2px solid rgb(var(--primary-6), 0.5);
932 | }
933 | 
934 | pre.chatbot-log {
935 |   max-height: 60vh;
936 | }
937 | 
938 | pre.chatbot-data {
939 |   max-height: 85vh;
940 | }
941 | 
942 | .draw_dialog_card_title {
943 |   display: flex;
944 |   align-items: center;
945 |   justify-content: space-between;
946 |   margin-bottom: 10px;
947 | }
948 | </style>
949 | 


--------------------------------------------------------------------------------