From e3c9a13493d7f897c29ac60573ffe2cf3de41109 Mon Sep 17 00:00:00 2001
From: Quicy <1728550853@qq.com>
Date: Fri, 23 Jan 2026 10:48:56 +0800
Subject: [PATCH] feat: platform ui

---
 .../web/src/components/AddPlatform/index.vue  | 188 ++++++++++++++
 .../web/src/components/CreateMCP/index.vue    |   2 +-
 packages/web/src/pages/platform/index.vue     | 230 +++++++++++++++++-
 3 files changed, 417 insertions(+), 3 deletions(-)
 create mode 100644 packages/web/src/components/AddPlatform/index.vue

diff --git a/packages/web/src/components/AddPlatform/index.vue b/packages/web/src/components/AddPlatform/index.vue
new file mode 100644
index 00000000..8289b652
--- /dev/null
+++ b/packages/web/src/components/AddPlatform/index.vue
@@ -0,0 +1,188 @@
+<template>
+  <section class="flex">
+    <Dialog v-model:open="open ">
+      <DialogTrigger as-child>
+        <Button
+          variant="default"
+          class="ml-auto my-4"
+        >
+          添加平台
+        </Button>
+      </DialogTrigger>
+      <DialogContent class="sm:max-w-106.25">
+        <form @submit="addPlatform">
+          <DialogHeader>
+            <DialogTitle>添加平台</DialogTitle>
+            <DialogDescription class="mb-4">
+              为模型添加使用平台
+            </DialogDescription>
+          </DialogHeader>
+          <div>
+            <FormField
+              v-slot="{ componentField }"
+              name="name"
+            >
+              <FormItem>
+                <FormLabel class="mb-2">
+                  Name
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    type="text"
+                    placeholder="请输入Name"
+                    v-bind="componentField"
+                    autocomplete="name"
+                  />
+                </FormControl>
+                <blockquote class="h-5">
+                  <FormMessage />
+                </blockquote>
+              </FormItem>
+            </FormField>
+            <FormField
+              v-slot="{ componentField }"
+              name="config"
+            >
+              <FormItem>
+                <FormLabel class="mb-2">
+                  Config
+                </FormLabel>
+                <FormControl>
+                  <TagsInput
+                    :add-on-blur="true"
+                    :model-value="configList"
+                    :convert-value="tagStr => {
+                      if (/^\w+\:\w+$/.test(tagStr)) {
+                        return tagStr
+                      }
+                      return ''
+                    }"
+                    @update:model-value="(env) => {
+                      configList = env.filter(Boolean) as string[]
+                      const curConfig: Record<string,string> = {}
+                      configList.forEach(envItem => {
+                        const [key, value] = envItem.split(`:`);
+                        if (key && value) {
+                          curConfig[key] = value
+                        }
+                      })
+                      componentField['onUpdate:modelValue']?.(curConfig)
+                    }"
+                  >
+                    <TagsInputItem
+                      v-for="(value, index) in configList"
+                      :key="index"
+                      :value="value as string"
+                    >
+                      <TagsInputItemText />
+                      <TagsInputItemDelete />
+                    </TagsInputItem>
+                    <TagsInputInput
+                      placeholder="请输入Env"
+                      class="w-full py-1"
+                    />
+                  </TagsInput>
+                </FormControl>
+                <blockquote class="h-5">
+                  <FormMessage />
+                </blockquote>
+              </FormItem>
+            </FormField>
+            <FormField
+              v-slot="{ componentField }"
+              name="active"
+            >
+              <FormItem>
+                <FormLabel class="mb-2">
+                  是否立即使用
+                </FormLabel>
+                <FormControl>
+                  <Switch
+                    id="airplane-mode"
+                    :model-value="componentField.modelValue"
+                    @update:model-value="componentField['onUpdate:modelValue']"
+                  />
+                </FormControl>
+                <blockquote class="h-5">
+                  <FormMessage />
+                </blockquote>
+              </FormItem>
+            </FormField>
+          </div>
+          <DialogFooter class="mt-4">
+            <DialogClose as-child>
+              <Button variant="outline">
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button type="submit">
+              添加MCP
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {  
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  FormField,
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  TagsInput,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText,
+  Switch,  
+} from '@memoh/ui'
+import z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { ref, inject } from 'vue'
+import { useMutation } from '@pinia/colada'
+import request from '@/utils/request'
+
+const configList=ref<string[]>([])
+const validataSchema = toTypedSchema(z.object({
+  name: z.string().min(1),
+  config: z.looseObject({}),
+  active:z.coerce.boolean()
+}))
+
+const form = useForm({
+  validationSchema:validataSchema
+})
+
+
+const {mutate:addFetchPlatform}=useMutation({
+  mutation: (data: Parameters<(Parameters<typeof form.handleSubmit>)[0]>[0]) => request({
+    url: '/platform/',
+    data,
+    method:'post'
+  })
+})
+const addPlatform = form.handleSubmit(async (value) => {
+  try {
+    await addFetchPlatform(value)  
+    open.value=false
+  } catch {
+    return
+  }  
+})
+
+const open=inject('open',ref<boolean>(false))
+</script>
\ No newline at end of file
diff --git a/packages/web/src/components/CreateMCP/index.vue b/packages/web/src/components/CreateMCP/index.vue
index 54eced70..d8b5926b 100644
--- a/packages/web/src/components/CreateMCP/index.vue
+++ b/packages/web/src/components/CreateMCP/index.vue
@@ -217,7 +217,7 @@
               </Button>
             </DialogClose>
             <Button type="submit">
-              添加Model
+              添加MCP
             </Button>
           </DialogFooter>
         </form>
diff --git a/packages/web/src/pages/platform/index.vue b/packages/web/src/pages/platform/index.vue
index 34740e7e..9d06d07e 100644
--- a/packages/web/src/pages/platform/index.vue
+++ b/packages/web/src/pages/platform/index.vue
@@ -1,5 +1,231 @@
 <template>
   <section>
-    <h1>Platform</h1>
+    <AddPlatform />
+    <div>
+      <menu class="grid grid-cols-4 gap-4 [&_li>*]:h-full">
+        <li>
+          <Card>
+            <CardHeader>
+              <CardTitle class="text-muted-foreground">
+                平台:Telegram
+              </CardTitle>
+              <CardContent class="mt-4 p-0">
+                <ol
+                  class=" [&>li]:mt-2"
+                  type="1"
+                >
+                  <li>功能1</li>
+                  <li>功能2</li>
+                  <li>功能2</li>
+                </ol>
+              </CardContent>
+            </CardHeader>
+            <CardContent>
+              <section class="flex" />
+            </CardContent>
+            <CardFooter class="flex gap-4">
+              <Switch />
+              <Button
+                class="ml-auto"
+                @click="open = true"
+              >
+                编辑
+              </Button>
+              <Button variant="destructive">
+                删除
+              </Button>
+            </CardFooter>
+          </Card>
+        </li>
+        <li>
+          <Card>
+            <CardHeader>
+              <CardTitle class="text-muted-foreground">
+                平台:Telegram
+              </CardTitle>
+              <CardContent class="mt-4 p-0">
+                <ol
+                  class=" [&>li]:mt-2"
+                  type="1"
+                >
+                  <li>功能1</li>
+                  <li>功能2</li>
+                  <li>功能2</li>
+                </ol>
+              </CardContent>
+            </CardHeader>
+            <CardContent>
+              <section class="flex" />
+            </CardContent>
+            <CardFooter class="flex gap-4">
+              <Switch />
+              <Button class="ml-auto">
+                编辑
+              </Button>
+              <Button variant="destructive">
+                删除
+              </Button>
+            </CardFooter>
+          </Card>
+        </li>
+        <li>
+          <Card>
+            <CardHeader>
+              <CardTitle class="text-muted-foreground">
+                平台:Telegram
+              </CardTitle>
+              <CardContent class="mt-4 p-0">
+                <ol
+                  class=" [&>li]:mt-2"
+                  type="1"
+                >
+                  <li>功能1</li>
+                  <li>功能2</li>
+                  <li>功能2</li>
+                </ol>
+              </CardContent>
+            </CardHeader>
+            <CardContent>
+              <section class="flex" />
+            </CardContent>
+            <CardFooter class="flex gap-4">
+              <Switch />
+              <Button class="ml-auto">
+                编辑
+              </Button>
+              <Button variant="destructive">
+                删除
+              </Button>
+            </CardFooter>
+          </Card>
+        </li>
+        <li>
+          <Card>
+            <CardHeader>
+              <CardTitle class="text-muted-foreground">
+                平台:Telegram
+              </CardTitle>
+              <CardContent class="mt-4 p-0">
+                <ol
+                  class=" [&>li]:mt-2"
+                  type="1"
+                >
+                  <li>功能1</li>
+                  <li>功能2</li>
+                  <li>功能2</li>
+                </ol>
+              </CardContent>
+            </CardHeader>
+            <CardContent>
+              <section class="flex" />
+            </CardContent>
+            <CardFooter class="flex gap-4">
+              <Switch />
+              <Button class="ml-auto">
+                编辑
+              </Button>
+              <Button variant="destructive">
+                删除
+              </Button>
+            </CardFooter>
+          </Card>
+        </li>
+        <li>
+          <Card>
+            <CardHeader>
+              <CardTitle class="text-muted-foreground flex justify-between">
+                <header>
+                  平台:Telegram
+                </header>
+                
+                <Badge variant="outline">
+                  运行中...
+                </Badge>
+              </CardTitle>
+              <CardContent class="mt-4 p-0">
+                <ol
+                  class=" [&>li]:mt-2"
+                  type="1"
+                >
+                  <li>功能1</li>
+                  <li>功能2</li>
+                  <li>功能2</li>
+                </ol>
+              </CardContent>
+            </CardHeader>
+            <CardContent>
+              <section class="flex" />
+            </CardContent>
+            <CardFooter class="flex gap-4">
+              <Switch />
+              <Button
+                class="ml-auto"
+                @click="open=true"
+              >
+                编辑
+              </Button>
+              <Button variant="destructive">
+                删除
+              </Button>
+            </CardFooter>
+          </Card>
+        </li>
+        <li>
+          <Card>
+            <CardHeader>
+              <CardTitle class="text-muted-foreground">
+                平台:Telegram
+              </CardTitle>
+              <CardContent class="mt-4 p-0">
+                <ol
+                  class=" [&>li]:mt-2 "
+                  type="1"
+                >
+                  <li>1. 功能1</li>
+                  <li>2. 功能2</li>
+                  <li>3. 功能2</li>
+                </ol>
+              </CardContent>
+            </CardHeader>
+            <CardContent>
+              <section class="flex" />
+            </CardContent>
+            <CardFooter class="flex gap-4">
+              <Switch />
+              <Button class="ml-auto">
+                编辑
+              </Button>
+              <Button variant="destructive">
+                删除
+              </Button>
+            </CardFooter>
+          </Card>
+        </li>
+      </menu>
+    </div>
   </section>
-</template>
\ No newline at end of file
+</template>
+
+<script setup lang="ts">
+import { useMutation, useQuery } from '@pinia/colada'
+import request from '@/utils/request'
+import { watch, h, provide, ref } from 'vue'
+import AddPlatform from '@/components/AddPlatform/index.vue'
+import {Card,CardHeader,CardFooter,CardContent,CardTitle,Switch,Button, Badge } from '@memoh/ui'
+
+const open = ref(false)
+
+provide('open', open)
+
+const { data: platformData } = useQuery({
+  key: ['platform'],
+  query: () => request({
+    url: '/platform/'
+  })
+})
+
+
+watch(platformData, () => {
+  console.log(platformData.value?.data)
+})
+</script>
\ No newline at end of file