listpage-next 0.0.241 → 0.0.243

package/dist/components/Menu/types.d.ts

@@ -1,6 +1,12 @@
-import { ItemType } from 'antd/es/menu/interface';
 import { MenuProps as AntdMenuProps } from 'antd';
-export type MenuItem = ItemType;
+import { JSX, ReactNode } from 'react';
+export type MenuItem = {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    children?: MenuItem[];
+    element?: JSX.Element;
+};
 export interface MenuProps extends Omit<AntdMenuProps, 'onSelect'> {
     onSelect?: (path: string) => void;
     defaultActiveKey?: string;

package/dist/components/PageLayout/components/PageLogo/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Avatar, Image } from "antd";
+import { Image } from "antd";
 import { styled } from "styled-components";
 import { usePageContext } from "../PageProvider/index.js";
 const PageLogo = (props)=>{
@@ -11,11 +11,7 @@ const PageLogo = (props)=>{
         src: src,
         preview: true
     });
-    const avatar = icon && /*#__PURE__*/ jsx(Avatar, {
-        icon: icon,
-        shape: "circle",
-        size: 22
-    });
+    const avatar = icon;
     if (collapsed) return /*#__PURE__*/ jsx(LogoContentCollapseWrapper, {
         children: image || avatar
     });

package/dist/features/ReactApp/App.d.ts

@@ -0,0 +1,11 @@
+import { MenuItem } from '../../components';
+import { JSX, ReactNode } from 'react';
+export interface AppProps {
+    menus: MenuItem[];
+    basename?: string;
+    title?: string;
+    icon?: ReactNode;
+    hasAuth?: () => boolean;
+    loginElement?: JSX.Element;
+}
+export declare const App: (props: AppProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ReactApp/App.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { createRoutes } from "./utils.js";
+import { Auth } from "./Auth.js";
+import { Layout } from "./Layout.js";
+const App = (props)=>{
+    const { menus, basename = '', title, icon, loginElement, hasAuth } = props;
+    const router = useMemo(()=>{
+        const routes = createRoutes(menus);
+        return createBrowserRouter([
+            loginElement && {
+                path: '/login',
+                element: loginElement
+            },
+            {
+                path: '/',
+                element: /*#__PURE__*/ jsx(Auth, {
+                    hasAuth: hasAuth,
+                    children: /*#__PURE__*/ jsx(Layout, {
+                        menus: menus,
+                        title: title,
+                        icon: icon,
+                        basename: basename
+                    })
+                }),
+                children: routes
+            }
+        ].filter(Boolean), {
+            basename
+        });
+    }, [
+        basename,
+        title,
+        icon,
+        menus
+    ]);
+    return /*#__PURE__*/ jsx(RouterProvider, {
+        router: router
+    });
+};
+export { App };

package/dist/features/ReactApp/Auth.d.ts

@@ -0,0 +1,4 @@
+export declare const Auth: ({ children, hasAuth, }: {
+    children: React.ReactNode;
+    hasAuth?: () => boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ReactApp/Auth.js

@@ -0,0 +1,16 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Navigate, useLocation } from "react-router-dom";
+const Auth = ({ children, hasAuth = ()=>true })=>{
+    const location = useLocation();
+    if (!hasAuth()) return /*#__PURE__*/ jsx(Navigate, {
+        to: "/login",
+        state: {
+            from: location
+        },
+        replace: true
+    });
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: children
+    });
+};
+export { Auth };

package/dist/features/ReactApp/Layout.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { MenuItem } from '../../components';
+export interface LayoutProps {
+    menus: MenuItem[];
+    basename?: string;
+    title?: string;
+    icon?: ReactNode;
+}
+export declare const Layout: (props: LayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ReactApp/Layout.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
+import { Menu, PageLayout } from "../../components/index.js";
+import { getDefaultActiveKey } from "./utils.js";
+const Layout = (props)=>{
+    const { menus, basename = '', title, icon } = props;
+    const navigate = useNavigate();
+    const defaultActiveKey = useMemo(()=>getDefaultActiveKey(basename, menus), [
+        basename,
+        menus
+    ]);
+    return /*#__PURE__*/ jsx(PageLayout, {
+        logo: {
+            icon,
+            title
+        },
+        sider: /*#__PURE__*/ jsx(Menu, {
+            items: menus,
+            defaultActiveKey: defaultActiveKey,
+            onSelect: navigate
+        }),
+        content: /*#__PURE__*/ jsx(Outlet, {})
+    });
+};
+export { Layout };

package/dist/features/ReactApp/index.d.ts

@@ -0,0 +1 @@
+export { App } from './App';

package/dist/features/ReactApp/index.js

@@ -0,0 +1,2 @@
+import { App } from "./App.js";
+export { App };

package/dist/features/ReactApp/utils.d.ts

@@ -0,0 +1,4 @@
+import { MenuItem } from '../../components';
+import { RouteObject } from 'react-router-dom';
+export declare const getDefaultActiveKey: (basename: string, menus: MenuItem[]) => string | undefined;
+export declare const createRoutes: (menus: MenuItem[]) => RouteObject[];

package/dist/features/ReactApp/utils.js

@@ -0,0 +1,15 @@
+import { detectActiveMenu } from "../../components/index.js";
+const getDefaultActiveKey = (basename, menus)=>{
+    let pathname = window.location.pathname;
+    if (pathname.startsWith(`${basename}`)) pathname = pathname.slice(basename.length + 1);
+    return detectActiveMenu(pathname, menus);
+};
+const createRoutes = (menus)=>{
+    const routes = menus.filter((menu)=>menu?.element).map((menu)=>({
+            path: menu.key,
+            element: menu.element,
+            children: createRoutes(menu?.children ?? [])
+        }));
+    return routes;
+};
+export { createRoutes, getDefaultActiveKey };

package/dist/ui/LogPreview/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface LogEntry {
+    timestamp: string;
+    level: 'INFO' | 'WARN' | 'ERROR' | 'DEBUG';
+    message: string;
+}
+export interface LogPreviewProps {
+    logs: LogEntry[];
+    className?: string;
+}
+export declare const LogPreview: React.FC<LogPreviewProps>;

package/dist/ui/LogPreview/index.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import ansi_to_html from "ansi-to-html";
+import dayjs from "dayjs";
+const LogPreview = ({ logs, className = '' })=>{
+    const logsEndRef = useRef(null);
+    const convert = useMemo(()=>new ansi_to_html({
+            fg: '#d1d5db',
+            bg: '#030712',
+            newline: false,
+            escapeXML: true,
+            stream: false
+        }), []);
+    useEffect(()=>{
+        const endEl = logsEndRef.current;
+        const container = endEl?.parentElement;
+        if (!endEl || !container) return;
+        const THRESHOLD = 50;
+        const distanceFromBottom = container.scrollHeight - (container.scrollTop + container.clientHeight);
+        if (distanceFromBottom <= THRESHOLD) endEl.scrollIntoView({
+            behavior: 'smooth'
+        });
+    }, [
+        logs
+    ]);
+    const getLevelColor = (level)=>{
+        const uLevel = level?.toUpperCase() || 'INFO';
+        switch(uLevel){
+            case 'ERROR':
+                return 'text-red-500 font-bold';
+            case 'WARN':
+                return 'text-yellow-500';
+            case 'DEBUG':
+                return 'text-blue-500';
+            default:
+                return 'text-green-500';
+        }
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: `flex-1 bg-gray-950 rounded-lg border border-gray-800 font-mono text-sm p-4 overflow-y-auto w-full} transition-all duration-300 ${className}`,
+        children: [
+            0 === logs.length ? /*#__PURE__*/ jsx("div", {
+                className: "text-gray-600 italic p-4 text-center",
+                children: "暂无日志或无法获取"
+            }) : logs.map((log, idx)=>/*#__PURE__*/ jsxs("div", {
+                    className: "mb-1 hover:bg-gray-900/50 p-0.5 rounded flex gap-3",
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            className: "text-gray-600 select-none shrink-0 text-xs py-0.5",
+                            children: dayjs(log.timestamp).format('YYYY-MM-DD HH:mm:ss')
+                        }),
+                        log.level && /*#__PURE__*/ jsx("span", {
+                            className: `${getLevelColor(log.level)} w-12 shrink-0 select-none`,
+                            children: log.level || 'INFO'
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: "text-gray-300 break-all whitespace-pre-wrap",
+                            dangerouslySetInnerHTML: {
+                                __html: convert.toHtml(log.message)
+                            }
+                        })
+                    ]
+                }, idx)),
+            /*#__PURE__*/ jsx("div", {
+                ref: logsEndRef
+            })
+        ]
+    });
+};
+export { LogPreview };

package/dist/ui/index.d.ts

@@ -1,2 +1,3 @@
 export { PromptEditor, type PromptEditorProps } from './PromptEditor';
 export { Button, type ButtonProps } from './Button';
+export { LogPreview, type LogPreviewProps, type LogEntry } from './LogPreview';

package/dist/ui/index.js

@@ -1,3 +1,4 @@
 import { PromptEditor } from "./PromptEditor/index.js";
 import { Button } from "./Button/index.js";
-export { Button, PromptEditor };
+import { LogPreview } from "./LogPreview/index.js";
+export { Button, LogPreview, PromptEditor };

package/dist/ui.css

@@ -7,14 +7,20 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-green-500: oklch(72.3% 0.219 149.579);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-slate-300: oklch(86.9% 0.022 252.894);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
+    --color-gray-950: oklch(13% 0.028 261.692);
     --color-white: #fff;
     --spacing: 0.25rem;
     --text-xs: 0.75rem;
@@ -22,6 +28,7 @@
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --font-weight-medium: 500;
+    --font-weight-bold: 700;
     --radius-lg: 0.5rem;
     --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
@@ -188,6 +195,27 @@
   .relative {
     position: relative;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
   .block {
     display: block;
   }
@@ -206,12 +234,18 @@
   .h-full {
     height: 100%;
   }
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
   .flex-1 {
     flex: 1;
   }
   .flex-shrink {
     flex-shrink: 1;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .flex-grow {
     flex-grow: 1;
   }
@@ -239,12 +273,18 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .overflow-auto {
     overflow: auto;
   }
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -258,12 +298,24 @@
   .border-gray-700 {
     border-color: var(--color-gray-700);
   }
+  .border-gray-800 {
+    border-color: var(--color-gray-800);
+  }
   .bg-\[\#0B1120\] {
     background-color: #0B1120;
   }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
+  .bg-gray-950 {
+    background-color: var(--color-gray-950);
+  }
+  .p-0\.5 {
+    padding: calc(var(--spacing) * 0.5);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -273,6 +325,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
@@ -282,6 +337,9 @@
   .py-2\.5 {
     padding-block: calc(var(--spacing) * 2.5);
   }
+  .text-center {
+    text-align: center;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -293,19 +351,47 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .break-all {
+    word-break: break-all;
+  }
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+  .text-blue-500 {
+    color: var(--color-blue-500);
+  }
   .text-gray-300 {
     color: var(--color-gray-300);
   }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
+  .text-green-500 {
+    color: var(--color-green-500);
+  }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
   .text-slate-300 {
     color: var(--color-slate-300);
   }
   .text-white {
     color: var(--color-white);
   }
+  .text-yellow-500 {
+    color: var(--color-yellow-500);
+  }
+  .italic {
+    font-style: italic;
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -338,6 +424,14 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
   .hover\:scale-\[1\.02\] {
     &:hover {
       @media (hover: hover) {
@@ -359,6 +453,16 @@
       }
     }
   }
+  .hover\:bg-gray-900\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
+        }
+      }
+    }
+  }
   .hover\:text-white {
     &:hover {
       @media (hover: hover) {
@@ -573,6 +677,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -616,6 +724,7 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-duration: initial;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.241",
+  "version": "0.0.243",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,8 +11,12 @@
       "import": "./dist/index.js"
     },
     "./ui": {
-      "types": "./dist/ui.d.ts",
-      "import": "./dist/ui.js"
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js"
+    },
+    "./features/*": {
+      "types": "./dist/features/*/index.d.ts",
+      "import": "./dist/features/*/index.js"
     },
     "./ui.css": "./dist/ui.css"
   },
@@ -84,6 +88,7 @@
     "react-simple-code-editor": "~0.14.1",
     "prismjs": "~1.30.0",
     "@types/prismjs": "~1.26.5",
-    "json-schema-faker": "~0.5.9"
+    "json-schema-faker": "~0.5.9",
+    "ansi-to-html": "~0.7.2"
   }
 }

package/dist/ui.d.ts

@@ -1 +0,0 @@
-export * from './ui';

package/dist/ui.js

@@ -1 +0,0 @@
-export * from "./ui.js";