Initial commit

2025-04-04 02:25:11 +08:00
commit cb0510c28e
20 changed files with 2211 additions and 0 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,11 @@
+{
+  "name": "Node.js 22 Development Environment",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
+  "settings": {
+    "terminal.integrated.defaultProfile.linux": "/bin/bash"
+  },
+  "extensions": [
+    "dbaeumer.vscode-eslint"
+  ],
+  "postCreateCommand": "npm install -g @kevisual/envision-cli@latest && npm install"
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
--- a/README.md
+++ b/README.md
@@ -0,0 +1,4 @@
+# app-template
+
+
+`/system/lib/app.js` 包函的模块是 `QueryRouterServer` 和 `Page` 和 `useConfigKey`
--- a/config/esbuild.config.mjs
+++ b/config/esbuild.config.mjs
@@ -0,0 +1,11 @@
+import { build } from 'esbuild';
+
+build({
+  entryPoints: ['src/index.ts'],
+  bundle: true,
+  outfile: 'dist/index.js',
+  platform: 'browser',
+  target: 'esnext',
+  sourcemap: false,
+  format: 'esm',
+}).catch(() => process.exit(1));
--- a/index.html
+++ b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AI Apps</title>
+<link rel="stylesheet" href="./src/assets/index.css">
+<style>
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-size: 16px;
+  }
+  #ai-root {
+    width: 100%;
+    height: 100%;
+  }
+</style>
+<script src="/system/lib/app.js"></script>
+</head>
+
+<body>
+  <div id="ai-root"></div>
+  <div id="ai-bot-root"></div>
+</body>
+<script src="./src/main.ts" type="module"></script>
+
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "app-template",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "basename": "/me/app/",
+  "scripts": {
+    "dev": "vite",
+    "dev:web": "cross-env WEB_DEV=true vite --mode web",
+    "build": "vite build",
+    "esbuild": "node esbuild.config.mjs",
+    "preview": "vite preview",
+    "prepub": "envision switchOrg user",
+    "pub": "envision deploy ./dist -k app-template -v 0.0.1"
+  },
+  "stackblitz": {
+    "startCommand": "npm dev:web"
+  },
+  "keywords": [],
+  "author": "abearxiong <xiongxiao@xiongxiao.me>",
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.13",
+    "@kevisual/query": "0.0.7-alpha.3",
+    "@kevisual/system-lib": "^0.0.10",
+    "@kevisual/system-ui": "^0.0.3",
+    "dayjs": "^1.11.13",
+    "lodash-es": "^4.17.21",
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@kevisual/router": "0.0.6-alpha-5",
+    "@kevisual/store": "0.0.1-alpha.10",
+    "@kevisual/types": "^0.0.6",
+    "@tailwindcss/vite": "^4.0.9",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-basic-ssl": "^1.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.25.0",
+    "react": "^19.0.0",
+    "tailwindcss": "^4.0.9",
+    "vite": "^6.1.0"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/snippets/no-react/h.ts
+++ b/snippets/no-react/h.ts
@@ -0,0 +1,94 @@
+// import { nanoid } from 'nanoid';
+import { RefObject, SyntheticEvent } from 'react';
+const randomId = () => {
+  return crypto.getRandomValues(new Uint32Array(1))[0].toString(16);
+};
+const loadChidren = (element: any, children: any[]) => {
+  children.forEach((child) => {
+    if (typeof child === 'boolean') {
+      return;
+    }
+    if (typeof child === 'function') {
+      // console.log('child', child);
+      return;
+    }
+    if (typeof child === 'undefined') {
+      return;
+    }
+    // console.log('child', child);
+    element.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+  });
+};
+// 在项目中定义 h 函数
+export function h(type: string | Function, props: any, ...children: any[]): HTMLElement {
+  if (typeof type === 'function') {
+    const element = type(props);
+    loadChidren(element, children);
+    return element;
+  }
+  const element = document.createElement(type);
+  const filterKeys = ['onLoad', 'onUnload', 'key'];
+  const key = props?.key || randomId();
+  Object.entries(props || {}).forEach(([key, value]) => {
+    if (filterKeys.includes(key)) {
+      return;
+    }
+    if (key === 'className') {
+      element.setAttribute('class', value as string);
+      return;
+    }
+    if (key.startsWith('on')) {
+      element.addEventListener(key.slice(2).toLowerCase(), value as EventListener);
+      return;
+    }
+    if (key === 'ref' && value) {
+      (value as any).current = element;
+      return;
+    }
+    if (typeof value === 'object') {
+      console.log('error', element, type, value);
+    } else {
+      element.setAttribute(key, value as string);
+    }
+  });
+  const onLoad = props?.onLoad;
+  const checkConnect = () => {
+    if (element.isConnected) {
+      onLoad?.({ el: element, key, _props: props });
+      // console.log('onLoad', element, key);
+      return true;
+    }
+    return false;
+  };
+  setTimeout(() => {
+    const res = checkConnect();
+    if (!res) {
+      setTimeout(() => {}, 1000);
+    }
+  }, 20);
+
+  loadChidren(element, children);
+  return element;
+}
+
+declare global {
+  namespace JSX {
+    // type Element = HTMLElement; // 将 JSX.Element 设置为 HTMLElement
+    interface Element extends HTMLElement {
+      class?: string;
+    }
+  }
+  namespace React {
+    interface FormEvent<T = Element> extends SyntheticEvent<T> {
+      target: EventTarget & (T extends HTMLInputElement ? HTMLInputElement : T);
+    }
+  }
+}
+
+export const useRef = <T = HTMLDivElement>(initialValue: T | null = null): RefObject<T | null> => {
+  return { current: initialValue };
+};
+
+export const useEffect = (callback: () => void) => {
+  setTimeout(callback, 0);
+};
--- a/snippets/react/ReactApp.tsx
+++ b/snippets/react/ReactApp.tsx
@@ -0,0 +1,6 @@
+import { createRoot } from 'react-dom/client';
+
+export const ReactApp = () => {
+  const root = createRoot(document.getElementById('app')!);
+  root.render(<div>Hello, World!</div>);
+};
--- a/snippets/routes-app/app.ts
+++ b/snippets/routes-app/app.ts
@@ -0,0 +1,12 @@
+import type { Page } from '@kevisual/store/page';
+import type { QueryRouterServer } from '@kevisual/router';
+export const page = useContextKey('page', () => {
+  return new window.Page({
+    basename: '',
+  }) as unknown as Page;
+});
+
+export const app = useContextKey('app', () => {
+  console.error('app not found');
+  return null as unknown as QueryRouterServer;
+});
--- a/snippets/routes-app/main.ts
+++ b/snippets/routes-app/main.ts
@@ -0,0 +1,39 @@
+import { page, app } from './app.ts';
+export const render = ({ renderRoot }) => {
+  renderRoot.innerHTML = `
+    <h1>Hello, World!</h1>
+  `;
+};
+
+if (page) {
+  page.addPage('/app-template', 'home');
+  page.subscribe('home', () => {
+    render({
+      renderRoot: document.getElementById('ai-root'),
+    });
+  });
+}
+
+if (app) {
+  app
+    .route({
+      path: 'app-template',
+      key: 'render',
+    })
+    .define(async (ctx) => {
+      let { renderRoot } = ctx.query;
+      if (!renderRoot) {
+        ctx.throw(404, 'renderRoot is required');
+      }
+      if (typeof renderRoot === 'string') {
+        renderRoot = document.querySelector(renderRoot);
+      }
+      if (!renderRoot) {
+        ctx.throw(404, 'renderRoot not found');
+      }
+      render({
+        renderRoot,
+      });
+    })
+    .addTo(app);
+}
--- a/snippets/store/app.ts
+++ b/snippets/store/app.ts
@@ -0,0 +1,85 @@
+import { create } from 'zustand';
+import { query } from '@/modules/query';
+type Store = {
+  list: any[];
+  setList: (list: any[]) => void;
+  data: any;
+  setData: (data: any) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  formData: any;
+  setFormData: (data: any) => void;
+  getList: () => Promise<any>;
+  init: () => Promise<void>;
+  getData: (id: number) => Promise<any>;
+  updateData: (data: any, opts?: { refresh?: boolean }) => Promise<any>;
+  deleteData: (id: number, opts?: { refresh?: boolean }) => Promise<any>;
+};
+export const useStore = create<Store>((set, get) => ({
+  list: [],
+  setList: (list) => set({ list }),
+  data: null,
+  setData: (data) => set({ data }),
+  loading: false,
+  setLoading: (loading) => set({ loading }),
+  formData: null,
+  setFormData: (formData) => set({ formData }),
+  getList: async () => {
+    set({ loading: true });
+    const res = await query.post({ path: 'posts', key: 'list' });
+    set({ loading: false });
+    if (res.code === 200) {
+      set({ list: res.data });
+    }
+    return res;
+  },
+  init: async () => {
+    await get().getList();
+  },
+  getData: async (id) => {
+    set({ loading: true });
+    const res = await query.post({
+      path: 'posts',
+      key: 'get',
+      id,
+    });
+    set({ loading: false });
+    if (res.code === 200) {
+      const data = res.data;
+      set({ data });
+    }
+    return res;
+  },
+  updateData: async (data, opts = { refresh: true }) => {
+    set({ loading: true });
+    const res = await query.post({
+      path: 'posts',
+      key: 'update',
+      data,
+    });
+    set({ loading: false });
+    if (res.code === 200) {
+      set({ data: res.data });
+    }
+    if (opts.refresh) {
+      await get().getList();
+    }
+    return res;
+  },
+  deleteData: async (id, opts = { refresh: true }) => {
+    set({ loading: true });
+    const res = await query.post({
+      path: 'posts',
+      key: 'delete',
+      id,
+    });
+    set({ loading: false });
+    if (res.code === 200) {
+      set({ data: null });
+    }
+    if (opts.refresh) {
+      await get().getList();
+    }
+    return res;
+  },
+}));
--- a/src/app.ts
+++ b/src/app.ts
@@ -0,0 +1,12 @@
+import type { Page } from '@kevisual/store/page';
+import type { QueryRouterServer } from '@kevisual/router';
+import { basename } from './modules/basename';
+export const page = useContextKey('page', () => {
+  return new window.Page({
+    basename,
+  }) as unknown as Page;
+});
+export const app = useContextKey('app', () => {
+  console.error('app not found');
+  return null as unknown as QueryRouterServer;
+});
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -0,0 +1,16 @@
+@import "tailwindcss";
+
+@layer components {
+  .test-loading {
+    @apply w-20 h-20 bg-gray-300 rounded-full animate-spin;
+  }
+}
+
+#ai-bot-root {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: -100px;
+  z-index: 9999;
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,48 @@
+import { page, app } from './app.ts';
+import { basename } from './modules/basename.ts';
+export const render = ({ renderRoot }) => {
+  renderRoot.innerHTML = `
+    <h1>Hello, World!</h1>
+  `;
+};
+console.log('basename', basename, page, app);
+
+if (page) {
+  page.addPage('/app-template', 'home');
+  page.subscribe('home', () => {
+    render({
+      renderRoot: document.getElementById('ai-root'),
+    });
+  });
+  page.addPage('', 'index');
+  page.subscribe('index', () => {
+    const root = document.getElementById('ai-root') as HTMLElement;
+    root.innerHTML = `
+      <h1>Hello, World!</h1>
+    `;
+  });
+}
+
+if (app) {
+  app
+    .route({
+      path: 'app-template',
+      key: 'render',
+    })
+    .define(async (ctx) => {
+      let { renderRoot } = ctx.query;
+      if (!renderRoot) {
+        ctx.throw(404, 'renderRoot is required');
+      }
+      if (typeof renderRoot === 'string') {
+        renderRoot = document.querySelector(renderRoot);
+      }
+      if (!renderRoot) {
+        ctx.throw(404, 'renderRoot not found');
+      }
+      render({
+        renderRoot,
+      });
+    })
+    .addTo(app);
+}
--- a/src/modules/basename.ts
+++ b/src/modules/basename.ts
@@ -0,0 +1,2 @@
+// @ts-ignore
+export const basename = DEV_SERVER ? '/' : BASE_NAME;
--- a/src/modules/message.ts
+++ b/src/modules/message.ts
@@ -0,0 +1,3 @@
+import { message } from '@kevisual/system-ui/dist/message';
+
+export { message };
--- a/src/modules/query.ts
+++ b/src/modules/query.ts
@@ -0,0 +1,3 @@
+import { QueryClient } from '@kevisual/query';
+
+export const query = new QueryClient();
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    // "jsxFragmentFactory": "Fragment",
+    // "jsxFactory": "h",
+    "baseUrl": "./",
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/@kevisual/types",
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    /* Linting */
+    "strict": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src",
+    "typings.d.ts",
+    "snippets"
+  ]
+}
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -0,0 +1,55 @@
+import { defineConfig } from 'vite';
+import basicSsl from '@vitejs/plugin-basic-ssl';
+// import react from '@vitejs/plugin-react';
+import dayjs from 'dayjs';
+import path from 'path';
+import tailwindcss from '@tailwindcss/vite'
+import pkgs from './package.json' with { type: 'json' };
+
+const isDev = process.env.NODE_ENV === 'development';
+const isWebDev = process.env.WEB_DEV === 'true';
+const BUILD_TIME = dayjs().format('YYYY-MM-DD HH:mm:ss');
+const basename = pkgs.basename;
+let plugins = [tailwindcss(),];
+
+if (!isWebDev) {
+  // 在bolt的web开发环境下不需要ssl
+  plugins.push(basicSsl());
+}
+
+
+export default defineConfig({
+  plugins: plugins,
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  base: isDev ? '/' : basename,
+  define: {
+    DEV_SERVER: JSON.stringify(isDev),
+    BUILD_TIME: JSON.stringify(BUILD_TIME),
+    BASE_NAME: JSON.stringify(basename),
+  },
+  optimizeDeps: {
+    exclude: ['react'], // 排除 react 和 react-dom 以避免打包
+  },
+  // esbuild: {
+  //   jsxFactory: 'h',
+  //   jsxFragment: 'Fragment',
+  // },
+  server: {
+    port: 6025,
+    host: '0.0.0.0',
+    proxy: {
+      '/api': {
+        target: 'https://kevisual.xiongxiao.me',
+        changeOrigin: true,
+      },
+      '/system/lib': {
+        target: 'https://kevisual.xiongxiao.me',
+        changeOrigin: true,
+      },
+    },
+  },
+});