mirror of
https://github.com/memohai/Memoh.git
synced 2026-04-27 07:16:19 +09:00
feat: platform ui
This commit is contained in:
Quicy
@@ -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>
|
||||
@@ -217,7 +217,7 @@
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit">
|
||||
添加Model
|
||||
添加MCP
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
|
||||
@@ -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>
|
||||
</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>
|
||||
Reference in New Issue
Block a user