temp

libs/registry/package.json

@@ -5,10 +5,16 @@
   "main": "index.js",
   "scripts": {
     "dev": "astro dev",
-    "build": "astro build",
+    "build": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide && astro build",
     "preview": "astro preview",
-    "build:registry": "pnpm dlx shadcn@latest build"
+    "build:registry": "pnpm dlx shadcn@latest build",
+    "machine-translate": "inlang machine translate --project project.inlang",
+    "pub": ""
   },
+  "files": [
+    "registry",
+    "dist"
+  ],
   "keywords": [],
   "author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
   "license": "MIT",
@@ -25,12 +31,11 @@
     "tw-animate-css": "^1.2.9"
   },
   "dependencies": {
-    "@inlang/paraglide-js": "^2.0.12",
-    "@inlang/paraglide-js-adapter-vite": "^1.2.40",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "i18next": "^25.1.2",
     "i18next-browser-languagedetector": "^8.1.0",
+    "i18next-http-backend": "^3.0.2",
     "lucide-react": "^0.509.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

libs/registry/registry/astro/i18n/locales/zh/translation.json

@@ -1,4 +1,4 @@
 {
-  "welcome": "Welcome to our site",
-  "about": "About us"
-}
+  "welcome": "欢迎来到我们的网站",
+  "about": "关于我们"
+}

libs/registry/registry/card/card.tsx

@@ -1,36 +1,56 @@
 // components/card.ts
-import type { VariantProps } from "class-variance-authority";
-import { cva, cx } from "class-variance-authority";
- 
+import type { VariantProps } from 'class-variance-authority';
+import { cva, cx } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
 /**
  * Box
  */
 export type BoxProps = VariantProps<typeof box>;
-export const box = cva(["box", "box-border"], {
+export const box = cva(['box', 'box-border'], {
   variants: {
-    margin: { 0: "m-0", 2: "m-2", 4: "m-4", 8: "m-8" },
-    padding: { 0: "p-0", 2: "p-2", 4: "p-4", 8: "p-8" },
+    margin: { 0: 'm-0', 2: 'm-2', 4: 'm-4', 8: 'm-8' },
+    padding: { 0: 'p-0', 2: 'p-2', 4: 'p-4', 8: 'p-8' },
   },
   defaultVariants: {
     margin: 0,
     padding: 0,
   },
 });
- 
+
 /**
  * Card
  */
 type CardBaseProps = VariantProps<typeof cardBase>;
-const cardBase = cva(["card", "border-solid", "border-slate-300", "rounded"], {
+const cardBase = cva(['card', 'border-solid', 'border-slate-300', 'rounded'], {
   variants: {
     shadow: {
-      md: "drop-shadow-md",
-      lg: "drop-shadow-lg",
-      xl: "drop-shadow-xl",
+      md: 'drop-shadow-md',
+      lg: 'drop-shadow-lg',
+      xl: 'drop-shadow-xl',
     },
   },
 });
- 
+
 export interface CardProps extends BoxProps, CardBaseProps {}
-export const card = ({ margin, padding, shadow }: CardProps = {}) =>
-  cx(box({ margin, padding }), cardBase({ shadow }));
+export const card = ({ margin, padding, shadow }: CardProps = {}) => cx(box({ margin, padding }), cardBase({ shadow }));
+
+type CardBlankProps = {
+  number?: number;
+  className?: string;
+};
+
+/**
+ * CardBlank 空的卡片，用于占位
+ * @param props
+ * @returns
+ */
+export const CardBlank = (props: CardBlankProps) => {
+  const { number = 4, className } = props;
+  return (
+    <>
+      {new Array(number).fill(0).map((_, index) => {
+        return <div key={index} className={cn('w-[300px] shark-0', className)}></div>;
+      })}
+    </>
+  );
+};

libs/registry/registry/i18n/index.tsx

@@ -0,0 +1,74 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import Backend from 'i18next-http-backend'; // 引入 Backend 插件
+import { useLayoutEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+export { useTranslation };
+type I18NextProviderProps = {
+  children: React.ReactNode;
+  basename?: string;
+  noUse?: boolean;
+};
+
+export const initI18n = async (basename: string) => {
+  // 初始化 i18n
+  return new Promise((resolve) => {
+    i18n
+      .use(Backend) // 使用 Backend 插件
+      .use(initReactI18next)
+      .init(
+        {
+          backend: {
+            loadPath: `${basename}/locales/{{lng}}/{{ns}}.json`, // 指定 JSON 文件的路径
+          },
+          lng: 'zh', // 默认语言
+          fallbackLng: 'en', // 备用语言
+          interpolation: {
+            escapeValue: false, // react 已经安全地处理了转义
+          },
+        },
+        (e) => {
+          console.log('e', e);
+          resolve(true);
+        },
+      );
+  });
+};
+
+/**
+ * 国际化组件,初始化
+ * @param props
+ * @returns
+ */
+export const I18NextProvider = (props: I18NextProviderProps) => {
+  const { children, basename, noUse } = props;
+  if (noUse) {
+    return <>{children}</>;
+  }
+  const [init, setInit] = useState(false);
+  useLayoutEffect(() => {
+    initCheck();
+  }, []);
+  const initCheck = async () => {
+    let _currentBasename = '';
+    if (typeof basename === 'undefined') {
+      const local = localStorage.getItem('locale-basename');
+      if (local) {
+        _currentBasename = local;
+      } else {
+        _currentBasename = '';
+      }
+    } else {
+      _currentBasename = basename;
+    }
+    if (_currentBasename === '/') {
+      _currentBasename = '';
+    }
+    initI18n(_currentBasename);
+    setInit(true);
+  };
+  if (!init) {
+    return <></>;
+  }
+  return <>{children}</>;
+};

libs/registry/registry/modules/toast/ToastLogin.tsx

@@ -1,8 +1,17 @@
 import { toast } from 'react-toastify';
-import { useTranslation } from 'react-i18next';
 // Custom message component
 const LoginMessage = (props: ToastLoginProps) => {
-  const { t } = useTranslation();
+  const lng = props.lng || 'zh';
+  const isZH = lng === 'zh';
+  const en = {
+    'Please login': 'Please login',
+    'Click here to go to the login page.': 'Click here to go to the login page.',
+  };
+  const zh = {
+    'Please login': '请登录',
+    'Click here to go to the login page.': '点击这里前往登录页面',
+  };
+  const t = isZH ? zh : en;
   const handleClick = () => {
     const currentUrl = window.location.href;
     const redirect = encodeURIComponent(props?.redirectUrl || currentUrl);
@@ -13,8 +22,8 @@ const LoginMessage = (props: ToastLoginProps) => {
 
   return (
     <div className='msg-container' onClick={handleClick} style={{ cursor: 'pointer' }}>
-      <p className='msg-title'>{t('Please login')}</p>
-      <p className='msg-description'>{t('Click here to go to the login page.')}</p>
+      <p className='msg-title'>{t['Please login']}</p>
+      <p className='msg-description'>{t['Click here to go to the login page.']}</p>
     </div>
   );
 };
@@ -27,6 +36,7 @@ type ToastLoginProps = {
    * 登录成功后跳转的地址, 默认是当前页面
    */
   redirectUrl?: string;
+  lng?: 'en' | 'zh';
 };
 /**
  * 登录提示

libs/registry/registry/render/ReactRender.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+export class ReactRenderer {
+  component: any;
+  element: HTMLElement;
+  ref: React.RefObject<any>;
+  props: any;
+  root: any;
+
+  constructor(component: any, { props }: any) {
+    this.component = component;
+    this.element = document.createElement('div');
+    this.ref = React.createRef();
+    this.props = {
+      ...props,
+      ref: this.ref,
+    };
+    this.root = createRoot(this.element);
+    this.render();
+  }
+
+  updateProps(props: any) {
+    this.props = {
+      ...this.props,
+      ...props,
+    };
+    this.render();
+  }
+
+  render() {
+    this.root.render(React.createElement(this.component, this.props));
+  }
+
+  destroy() {
+    this.root.unmount();
+  }
+}
+
+export default ReactRenderer;

libs/registry/registry/tw/theme.css

@@ -0,0 +1,78 @@
+@import 'tailwindcss';
+
+@theme {
+  --color-primary: #ffc107;
+  --color-secondary: #ffa000;
+  --color-text-primary: #000000;
+  --color-text-secondary: #000000;
+  --color-success: #28a745;
+  --color-scrollbar-thumb: #999999;
+  --color-scrollbar-track: rgba(0, 0, 0, 0.1);
+  --color-scrollbar-thumb-hover: #666666;
+  --scrollbar-color: #ffc107; /* 滚动条颜色 */
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+}
+/* font-family */
+@utility font-family-mon {
+  font-family: 'Montserrat', sans-serif;
+}
+@utility font-family-rob {
+  font-family: 'Roboto', sans-serif;
+}
+@utility font-family-int {
+  font-family: 'Inter', sans-serif;
+}
+@utility font-family-orb {
+  font-family: 'Orbitron', sans-serif;
+}
+@utility font-family-din {
+  font-family: 'DIN', sans-serif;
+}
+
+@utility flex-row-center {
+  @apply flex flex-row items-center justify-center;
+}
+@utility flex-col-center {
+  @apply flex flex-col items-center justify-center;
+}
+
+@utility scrollbar {
+  overflow: auto;
+  /* 整个滚动条 */
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-track);
+  }
+  /* 滚动条有滑块的轨道部分 */
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+    border-radius: 1px;
+  }
+
+  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background-color: var(--color-scrollbar-thumb);
+    border-radius: 5px;
+  }
+
+  /* 滚动条滑块hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scrollbar-thumb-hover);
+  }
+
+  /* 同时有垂直和水平滚动条时交汇的部分 */
+  &::-webkit-scrollbar-corner {
+    display: block; /* 修复交汇时出现的白块 */
+  }
+}

libs/registry/src/components/Switch.tsx

@@ -1,27 +0,0 @@
-// src/components/LanguageSwitcher.tsx
-"use client";
-import * as m from "@/paraglide/messages";
-import { setLanguageTag, languageTag } from "@/paraglide/runtime";
-
-export function LanguageSwitcher() {
-  return (
-    <div>
-      <h1>{m.welcome()}</h1>
-      <p>{m.about()}</p>
-      
-      <button 
-        onClick={() => setLanguageTag("en")}
-        disabled={languageTag() === "en"}
-      >
-        English
-      </button>
-      
-      <button 
-        onClick={() => setLanguageTag("zh")}
-        disabled={languageTag() === "zh"}
-      >
-        中文
-      </button>
-    </div>
-  );
-}

libs/registry/src/modules/demo/ShowLogin.tsx

@@ -1,7 +1,11 @@
 import { toastLogin } from '@/registry/modules/toast/ToastLogin';
 import { ToastProvider } from '@/registry/modules/toast/Provider';
 import { Button } from '@/registry/button/button';
+import { useTranslation } from 'react-i18next';
+import '@/registry/astro/i18n'; // 初始化i18n
+
 export const ShowLogin = () => {
+  const { t } = useTranslation();
   return (
     <ToastProvider>
       <Button
@@ -9,7 +13,7 @@ export const ShowLogin = () => {
           toastLogin();
           console.log('clicked');
         }}>
-        Click me
+        {t('welcome')} Click me
       </Button>
     </ToastProvider>
   );

libs/registry/src/pages/index.astro

@@ -1,8 +1,10 @@
 ---
 import '../styles/global.css';
-import '@/registry/astro/i18n'; // 初始化i18n
 import { ShowLogin } from '@/modules/demo/ShowLogin';
+const url = new URL(Astro.request.url);
 ---
 
 <h1 class='text-4xl'>Registry</h1>
-<ShowLogin client:load />
+
+<ShowLogin client:only="react" />
+