@4399ywkf/cli 1.0.7 → 1.0.8

package/dist/templates/app/src/pages/base/index.tsx

@@ -1,32 +1,196 @@
-import React from 'react';
-import { createStyles } from "antd-style"
-
-
-const useStyles = createStyles(({ token, isDarkMode }) => ({
-  button: {
-    backgroundColor: token.colorPrimary,
-    width: '100px',
-    color: isDarkMode ? token.colorText : "#fff",
-    padding: `${token.paddingXS}px ${token.paddingSM}px`,
-    borderRadius: token.borderRadius,
-    cursor: 'pointer',
-    transition: 'all 0.3s ease',
-
-    '&:hover': {
-      backgroundColor: token.colorPrimaryHover,
+import { useUserStore } from "@store/user";
+import { Button, Card, Space, Typography, Tag, Flex } from "antd";
+import {
+  RocketOutlined,
+  ThunderboltOutlined,
+  BulbOutlined,
+  GithubOutlined,
+  BookOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
+import React from "react";
+import { createStyles } from "antd-style";
+
+const { Title, Paragraph, Text, Link } = Typography;
+
+const useStyles = createStyles(({ css, token }) => ({
+  app: css`
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  `,
+}));
+
+export default function BasePage() {
+  const theme = useUserStore((state) => state.themeMode);
+  const setTheme = useUserStore((state) => state.setThemeMode);
+  const { styles, cx } = useStyles();
+
+  const features = [
+    {
+      icon: <ThunderboltOutlined className="text-4xl text-blue-500" />,
+      title: "Rspack 构建",
+      description: "基于 Rspack 的极速构建体验，开发效率翻倍",
     },
-    '&:active': {
-      backgroundColor: token.colorPrimaryActive,
+    {
+      icon: <BulbOutlined className="text-4xl text-yellow-500" />,
+      title: "React 19",
+      description: "使用最新的 React 19 特性，享受并发渲染",
     },
-  },
-}));
+    {
+      icon: <SettingOutlined className="text-4xl text-green-500" />,
+      title: "TypeScript",
+      description: "完整的 TypeScript 支持，类型安全有保障",
+    },
+  ];
+
+  const quickLinks = [
+    { label: "📖 文档", description: "查看完整文档" },
+    { label: "🎨 组件库", description: "Ant Design 组件" },
+    { label: "🔧 配置", description: "项目配置说明" },
+    { label: "🚀 部署", description: "部署指南" },
+  ];
 
-export default function Base() {
-  const { styles } = useStyles();
   return (
-    <div className={styles.button}>
-      Base
-      {/* <Button type="primary">antd按钮</Button> */}
+    <div
+      className={cx(
+        styles.app,
+        "min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800 p-8"
+      )}
+    >
+      <div className="max-w-6xl mx-auto">
+        <Flex vertical gap={12}>
+          {/* 头部欢迎区域 */}
+          <div className="text-center mb-12 animate-fade-in">
+            <div className="inline-block mb-4">
+              <RocketOutlined className="text-6xl text-blue-500 animate-bounce" />
+            </div>
+            <Title level={1} className="!mb-4">
+              🎉 恭喜！项目创建成功
+            </Title>
+            <Paragraph className="text-lg text-gray-600 dark:text-gray-300">
+              你的项目已经准备就绪，现在可以开始开发了
+            </Paragraph>
+            <Space size="middle" className="mt-4">
+              <Tag color="blue">React 19</Tag>
+              <Tag color="green">TypeScript</Tag>
+              <Tag color="orange">Rspack</Tag>
+              <Tag color="purple">Ant Design</Tag>
+              <Tag color="cyan">Tailwind CSS</Tag>
+            </Space>
+          </div>
+
+          {/* 特性卡片 */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+            {features.map((feature, index) => (
+              <Card
+                key={index}
+                hoverable
+                className="text-center transition-all duration-300 hover:shadow-xl dark:bg-gray-800"
+              >
+                <div className="mb-4">{feature.icon}</div>
+                <Title level={4}>{feature.title}</Title>
+                <Paragraph className="text-gray-600 dark:text-gray-400">
+                  {feature.description}
+                </Paragraph>
+              </Card>
+            ))}
+          </div>
+
+          {/* 快速开始 */}
+          <Card
+            title={
+              <span className="text-xl">
+                <BookOutlined className="mr-2" />
+                快速开始
+              </span>
+            }
+            className="mb-8 dark:bg-gray-800"
+          >
+            <Space direction="vertical" size="large" className="w-full">
+              <div>
+                <Text strong className="text-base">
+                  1. 安装依赖
+                </Text>
+                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                  <code>pnpm install</code>
+                </div>
+              </div>
+              <div>
+                <Text strong className="text-base">
+                  2. 启动开发服务器
+                </Text>
+                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                  <code>pnpm dev</code>
+                </div>
+              </div>
+              <div>
+                <Text strong className="text-base">
+                  3. 构建生产版本
+                </Text>
+                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                  <code>pnpm build</code>
+                </div>
+              </div>
+            </Space>
+          </Card>
+
+          {/* 快捷链接 */}
+          <Card
+            title={
+              <span className="text-xl">
+                <GithubOutlined className="mr-2" />
+                快捷链接
+              </span>
+            }
+            className="mb-8 dark:bg-gray-800"
+          >
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              {quickLinks.map((link, index) => (
+                <div
+                  key={index}
+                  className="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+                >
+                  <div className="text-2xl mb-2">{link.label}</div>
+                  <Text className="text-sm text-gray-600 dark:text-gray-400">
+                    {link.description}
+                  </Text>
+                </div>
+              ))}
+            </div>
+          </Card>
+
+          {/* 底部操作区 */}
+          <Card className="text-center dark:bg-gray-800">
+            <Space size="large" wrap>
+              <Button
+                type="primary"
+                size="large"
+                icon={<RocketOutlined />}
+                onClick={() => window.open("https://ant.design", "_blank")}
+              >
+                查看 Ant Design 文档
+              </Button>
+              <Button
+                size="large"
+                icon={<BookOutlined />}
+                onClick={() => window.open("https://react.dev", "_blank")}
+              >
+                React 文档
+              </Button>
+              <Button
+                size="large"
+                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              >
+                切换主题 ({theme === "dark" ? "🌙 暗色" : "☀️ 亮色"})
+              </Button>
+            </Space>
+            <Paragraph className="mt-6 text-gray-500 dark:text-gray-400">
+              祝你开发愉快！如有问题，请查阅文档或联系技术支持 💪
+            </Paragraph>
+          </Card>
+        </Flex>
+      </div>
     </div>
   );
 }

package/dist/templates/app/src/routes.tsx

@@ -1,18 +1,27 @@
 import React, { lazy } from "react";
 import { createBrowserRouter, Navigate } from "react-router";
+import MainContentWrap from "@/layout/MainContentWrap";
 
 export const createRouter = (basename?: string) => {
-  return createBrowserRouter([
+  return createBrowserRouter(
+    [
+      {
+        path: "",
+        element: <MainContentWrap />,
+        children: [
+          {
+            path: "/",
+            element: <Navigate to="/base" replace />,
+          },
+          {
+            path: "/base",
+            Component: lazy(() => import("@/pages/base")),
+          },
+        ],
+      },
+    ],
     {
-      path: "/",
-      element: <Navigate to="/base" replace />,
-    },
-    {
-      path: "/base",
-      Component: lazy(() => import("@/pages/base")),
-    },
-  ], {
-    basename: basename || "/",
-  });
+      basename: basename || "/",
+    }
+  );
 };
-

package/dist/templates/app/src/types/global.d.ts

@@ -0,0 +1,19 @@
+import type { Env } from "@/config/env";
+
+declare global {
+  interface Window {
+    __GARFISH__?: boolean;
+    Garfish?: {
+      channel: {
+        emit: (event: string, data: any) => void;
+        on: (event: string, handler: (data: any) => void) => void;
+      };
+    };
+  }
+
+  namespace NodeJS {
+    interface ProcessEnv extends Env {}
+  }
+}
+
+export {};

package/dist/templates/app/src/utils/index.ts

@@ -1 +1,3 @@
-export * from "./getMicroApp";
+export * from "./convert";
+export * from "./locale";
+export * from "./copyToClipboard";

package/dist/templates/app/store/middleware/createDevtools.ts

@@ -1,23 +1,23 @@
-import { optionalDevtools } from 'zustand-utils';
-import type { devtools as _devtools } from 'zustand/middleware';
+import { optionalDevtools } from "zustand-utils";
+import type { devtools as _devtools } from "zustand/middleware";
 
-import { isDev } from '@/utils/env';
+import { isDev } from "@/config/env";
 
 export const createDevtools =
   (name: string): typeof _devtools =>
-  initializer => {
+  (initializer) => {
     let showDevtools = false;
 
     // check url to show devtools
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       const url = new URL(window.location.href);
-      const debug = url.searchParams.get('debug');
+      const debug = url.searchParams.get("debug");
       if (debug?.includes(name)) {
         showDevtools = true;
       }
     }
 
     return optionalDevtools(showDevtools)(initializer, {
-      name: `LobeChat_${name}${isDev ? '_DEV' : ''}`,
+      name: `LobeChat_${name}${isDev ? "_DEV" : ""}`,
     });
   };

package/dist/templates/base/index.tsx

@@ -1,32 +1,196 @@
-import React from 'react';
-import { createStyles } from "antd-style"
-
-
-const useStyles = createStyles(({ token, isDarkMode }) => ({
-  button: {
-    backgroundColor: token.colorPrimary,
-    width: '100px',
-    color: isDarkMode ? token.colorText : "#fff",
-    padding: `${token.paddingXS}px ${token.paddingSM}px`,
-    borderRadius: token.borderRadius,
-    cursor: 'pointer',
-    transition: 'all 0.3s ease',
-
-    '&:hover': {
-      backgroundColor: token.colorPrimaryHover,
+import { useUserStore } from "@store/user";
+import { Button, Card, Space, Typography, Tag, Flex } from "antd";
+import {
+  RocketOutlined,
+  ThunderboltOutlined,
+  BulbOutlined,
+  GithubOutlined,
+  BookOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
+import React from "react";
+import { createStyles } from "antd-style";
+
+const { Title, Paragraph, Text, Link } = Typography;
+
+const useStyles = createStyles(({ css, token }) => ({
+  app: css`
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  `,
+}));
+
+export default function BasePage() {
+  const theme = useUserStore((state) => state.themeMode);
+  const setTheme = useUserStore((state) => state.setThemeMode);
+  const { styles, cx } = useStyles();
+
+  const features = [
+    {
+      icon: <ThunderboltOutlined className="text-4xl text-blue-500" />,
+      title: "Rspack 构建",
+      description: "基于 Rspack 的极速构建体验，开发效率翻倍",
     },
-    '&:active': {
-      backgroundColor: token.colorPrimaryActive,
+    {
+      icon: <BulbOutlined className="text-4xl text-yellow-500" />,
+      title: "React 19",
+      description: "使用最新的 React 19 特性，享受并发渲染",
     },
-  },
-}));
+    {
+      icon: <SettingOutlined className="text-4xl text-green-500" />,
+      title: "TypeScript",
+      description: "完整的 TypeScript 支持，类型安全有保障",
+    },
+  ];
+
+  const quickLinks = [
+    { label: "📖 文档", description: "查看完整文档" },
+    { label: "🎨 组件库", description: "Ant Design 组件" },
+    { label: "🔧 配置", description: "项目配置说明" },
+    { label: "🚀 部署", description: "部署指南" },
+  ];
 
-export default function Base() {
-  const { styles } = useStyles();
   return (
-    <div className={styles.button}>
-      Base
-      {/* <Button type="primary">antd按钮</Button> */}
+    <div
+      className={cx(
+        styles.app,
+        "min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800 p-8"
+      )}
+    >
+      <div className="max-w-6xl mx-auto">
+        <Flex vertical gap={12}>
+          {/* 头部欢迎区域 */}
+          <div className="text-center mb-12 animate-fade-in">
+            <div className="inline-block mb-4">
+              <RocketOutlined className="text-6xl text-blue-500 animate-bounce" />
+            </div>
+            <Title level={1} className="!mb-4">
+              🎉 恭喜！项目创建成功
+            </Title>
+            <Paragraph className="text-lg text-gray-600 dark:text-gray-300">
+              你的项目已经准备就绪，现在可以开始开发了
+            </Paragraph>
+            <Space size="middle" className="mt-4">
+              <Tag color="blue">React 19</Tag>
+              <Tag color="green">TypeScript</Tag>
+              <Tag color="orange">Rspack</Tag>
+              <Tag color="purple">Ant Design</Tag>
+              <Tag color="cyan">Tailwind CSS</Tag>
+            </Space>
+          </div>
+
+          {/* 特性卡片 */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+            {features.map((feature, index) => (
+              <Card
+                key={index}
+                hoverable
+                className="text-center transition-all duration-300 hover:shadow-xl dark:bg-gray-800"
+              >
+                <div className="mb-4">{feature.icon}</div>
+                <Title level={4}>{feature.title}</Title>
+                <Paragraph className="text-gray-600 dark:text-gray-400">
+                  {feature.description}
+                </Paragraph>
+              </Card>
+            ))}
+          </div>
+
+          {/* 快速开始 */}
+          <Card
+            title={
+              <span className="text-xl">
+                <BookOutlined className="mr-2" />
+                快速开始
+              </span>
+            }
+            className="mb-8 dark:bg-gray-800"
+          >
+            <Space direction="vertical" size="large" className="w-full">
+              <div>
+                <Text strong className="text-base">
+                  1. 安装依赖
+                </Text>
+                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                  <code>pnpm install</code>
+                </div>
+              </div>
+              <div>
+                <Text strong className="text-base">
+                  2. 启动开发服务器
+                </Text>
+                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                  <code>pnpm dev</code>
+                </div>
+              </div>
+              <div>
+                <Text strong className="text-base">
+                  3. 构建生产版本
+                </Text>
+                <div className="mt-2 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg font-mono text-sm">
+                  <code>pnpm build</code>
+                </div>
+              </div>
+            </Space>
+          </Card>
+
+          {/* 快捷链接 */}
+          <Card
+            title={
+              <span className="text-xl">
+                <GithubOutlined className="mr-2" />
+                快捷链接
+              </span>
+            }
+            className="mb-8 dark:bg-gray-800"
+          >
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              {quickLinks.map((link, index) => (
+                <div
+                  key={index}
+                  className="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+                >
+                  <div className="text-2xl mb-2">{link.label}</div>
+                  <Text className="text-sm text-gray-600 dark:text-gray-400">
+                    {link.description}
+                  </Text>
+                </div>
+              ))}
+            </div>
+          </Card>
+
+          {/* 底部操作区 */}
+          <Card className="text-center dark:bg-gray-800">
+            <Space size="large" wrap>
+              <Button
+                type="primary"
+                size="large"
+                icon={<RocketOutlined />}
+                onClick={() => window.open("https://ant.design", "_blank")}
+              >
+                查看 Ant Design 文档
+              </Button>
+              <Button
+                size="large"
+                icon={<BookOutlined />}
+                onClick={() => window.open("https://react.dev", "_blank")}
+              >
+                React 文档
+              </Button>
+              <Button
+                size="large"
+                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              >
+                切换主题 ({theme === "dark" ? "🌙 暗色" : "☀️ 亮色"})
+              </Button>
+            </Space>
+            <Paragraph className="mt-6 text-gray-500 dark:text-gray-400">
+              祝你开发愉快！如有问题，请查阅文档或联系技术支持 💪
+            </Paragraph>
+          </Card>
+        </Flex>
+      </div>
     </div>
   );
 }

package/dist/templates/bootstrap/index.ts

@@ -0,0 +1,34 @@
+import "dayjs/locale/zh-cn";
+import dayjs from "dayjs";
+import { ConfigProvider } from "antd";
+import { env } from "@/config/env";
+
+interface BootstrapConfig {
+  appName: string;
+}
+
+/**
+ * 应用启动前的初始化配置
+ */
+export function bootstrap(config: BootstrapConfig) {
+  const { appName } = config;
+
+  // 配置 dayjs 国际化
+  dayjs.locale("zh-cn");
+
+  // 配置 antd 静态方法的前缀
+  ConfigProvider.config({
+    prefixCls: appName,
+  });
+
+  console.log(`✅ Application [${appName}] bootstrapped successfully`);
+}
+
+/**
+ * 使用环境变量初始化应用
+ */
+export function bootstrapWithEnv() {
+  bootstrap({
+    appName: env.APP_NAME,
+  });
+}

package/dist/templates/common.json

@@ -0,0 +1,3 @@
+{
+  "appName": "Chat应用"
+}

package/dist/templates/common.ts

@@ -1 +1,3 @@
-export default {};
+export default {
+  appName: "Chat应用",
+};

package/dist/templates/config/env/.env.public.tpl

@@ -1,5 +1,5 @@
 API_PREFIX="/api"
-API_TIMEOUT=60 * 1000
+API_TIMEOUT=60000
 
 COOKIE_NAME='ywkf_jwt'
 
@@ -9,23 +9,6 @@ OUTPUT_PATH='dist'
 BASENAME='/'
 
 PUBLIC_PATH='/s{{{ name }}}/'
-VERSION_NOTIFY_TIME=30000
-
-
-# Sentry 配置 - (官网)
-# REACT_APP_SENTRY_DSN="https://95add4dc797c22aa2224494e4abd4d71@o4509466151878656.ingest.us.sentry.io/4509466153058304"
-# SENTRY_PROJECT="javascript-react"
-# SENTRY_ORG="test-x6m"
-# SENTRY_AUTH_TOKEN="d477b94cfe375f5b4e4e88ac4fc15a8be8557652cea424710b6f7f19be4f0b3d"
-# SENTRY_URL="https://test-x6m.sentry.io/"
 
 # 帮助中心
-HELP_CENTER_URL="https://im-support.gz4399.com/"
-
-# 是否开启Sentry
-SENTRY_ENABLED='{{SENTRY_ENABLED}}'  
-REACT_APP_SENTRY_DSN='{{SENTRY_DSN}}'
-SENTRY_PROJECT='{{{ name }}}'
-SENTRY_ORG="sentry"
-SENTRY_AUTH_TOKEN="f13c66cd7a3629c8324cceb62fdb65aae1f337abbec4ebbadbe0a22447708994"
-SENTRY_URL="https://sentry.gz4399.com/"
+HELP_CENTER_URL="https://im-support.gz4399.com/"