+
+
+
+
+
+
+
+
+
+
+
+ {options.map((option) => (
+ handleSelect(option.value)}
+ >
+
+ ))}
+
+
+
+
+
+
+ )
+}
diff --git a/src/app/config/env/page.tsx b/src/app/config/env/page.tsx
new file mode 100644
index 0000000..5918218
--- /dev/null
+++ b/src/app/config/env/page.tsx
@@ -0,0 +1,324 @@
+'use client';
+
+import { configEnvList } from '@kevisual/use-config/env-config.ts';
+import { useConfigStore } from '../store/config';
+import { useEffect, useState, useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader } from '@/components/ui/card';
+import { Trash2, Plus, Save, Upload, Download } from 'lucide-react';
+import { toast } from 'sonner';
+import { Autocomplate, type AutocomplateOption } from '@/app/config/components/autocomplate';
+
+type EnvItem = {
+ key: string;
+ value: string;
+ id: string;
+};
+
+export default function EnvPage() {
+ const { getEnv, updateEnv, envData } = useConfigStore();
+ const [envItems, setEnvItems] = useState
+
+ {emptyMessage}
+ {searchValue && (
+
+ )}
+
+ {option.label}
+ {option.description && (
+
+ {option.description}
+
+ )}
+ {option.tags && option.tags.length > 0 && (
+
+
+ {option.tags.map((tag, index) => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+
+ );
+ }
+
+ return (
+ 加载中...
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/config/store/config.ts b/src/app/config/store/config.ts
index 8b56532..4bf97ee 100644
--- a/src/app/config/store/config.ts
+++ b/src/app/config/store/config.ts
@@ -1,7 +1,7 @@
import { create } from 'zustand';
import { query } from '@/modules/query';
import { toast } from 'sonner';
-import { QueryConfig } from '@kevisual/api/config';
+import { QueryConfig, Config } from '@kevisual/api/config';
export const queryConfig = new QueryConfig({ query: query as any });
@@ -16,6 +16,10 @@ interface ConfigStore {
deleteConfig: (id: string) => Promise
+
+
+
+
+
+
+
+
+ 环境变量配置
+管理应用的环境变量配置
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ {envItems.map((item) => (
+
+
+
+
+ ))}
+
+
+ {envItems.length === 0 && (
+
+
+
+ {getEnvDescription(item.key)}
+ )}
+
+ {item.key && getEnvTags(item.key).length > 0 && (
+
+
+
+
+ updateEnvItem(item.id, 'key', value)}
+ options={comboboxOptions}
+ placeholder="输入或选择环境变量键"
+ searchPlaceholder="搜索环境变量..."
+ emptyMessage="未找到匹配的环境变量"
+ />
+
+
+ {item.key && getEnvDescription(item.key) && (
+
+ {getEnvTags(item.key).map((tag) => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+
+
+ updateEnvItem(item.id, 'value', e.target.value)}
+ placeholder="输入环境变量的值"
+ type={
+ item.key.toLowerCase().includes('password') ||
+ item.key.toLowerCase().includes('secret') ||
+ item.key.toLowerCase().includes('key')
+ ? 'password'
+ : 'text'
+ }
+ />
+
+
+
+ 暂无环境变量
+ +
+
+
+ {/* User Info Fields */}
+
+ {me?.avatar ? (
+ 
+ ) : (
+ 
+ )}
+
+
+
+ {me?.username || '-'}
+{me?.description || '暂无描述'}
+
+
+
+ {/* Edit Profile Button */}
+
+
+
+
+ {me?.username || '-'}
+
+
+
+
+
+ {me?.nickname || '-'}
+
+
+
+
+
+
+
+
+ {me?.description || '暂无描述'}
+ +
+
+
+
+ {me?.id || '-'}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default () => {
+ return textarea]:h-auto",
+
+ // Variants based on alignment.
+ "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+ "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+ "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+ "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+ // Focus state.
+ "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+
+ // Error state.
+ "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+const inputGroupAddonVariants = cva(
+ "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+ {
+ variants: {
+ align: {
+ "inline-start":
+ "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+ "inline-end":
+ "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+ "block-start":
+ "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+ "block-end":
+ "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+ },
+ },
+ defaultVariants: {
+ align: "inline-start",
+ },
+ }
+)
+
+function InputGroupAddon({
+ className,
+ align = "inline-start",
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
{
+ if ((e.target as HTMLElement).closest("button")) {
+ return
+ }
+ e.currentTarget.parentElement?.querySelector("input")?.focus()
+ }}
+ {...props}
+ />
+ )
+}
+
+const inputGroupButtonVariants = cva(
+ "text-sm shadow-none flex gap-2 items-center",
+ {
+ variants: {
+ size: {
+ xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+ sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+ "icon-xs":
+ "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+ },
+ },
+ defaultVariants: {
+ size: "xs",
+ },
+ }
+)
+
+function InputGroupButton({
+ className,
+ type = "button",
+ variant = "ghost",
+ size = "xs",
+ ...props
+}: Omit, "size"> &
+ VariantProps) {
+ return (
+
+ )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+
+ )
+}
+
+function InputGroupInput({
+ className,
+ ...props
+}: React.ComponentProps<"input">) {
+ return (
+
+ )
+}
+
+function InputGroupTextarea({
+ className,
+ ...props
+}: React.ComponentProps<"textarea">) {
+ return (
+
+ )
+}
+
+export {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupText,
+ InputGroupInput,
+ InputGroupTextarea,
+}
diff --git a/src/modules/layout/store/index.ts b/src/modules/layout/store/index.ts
index d68240a..30df147 100644
--- a/src/modules/layout/store/index.ts
+++ b/src/modules/layout/store/index.ts
@@ -47,9 +47,10 @@ export const usePlatformStore = create((set) => {
type Me = {
id?: string;
username?: string;
+ nickname?: string | null;
needChangePassword?: boolean;
role?: string;
- description?: string;
+ description?: string | null;
type?: 'user' | 'org';
orgs?: string[];
avatar?: string;