init cli center

2025-12-18 01:51:51 +08:00
parent b9624e4f6f
commit 5b610fd600
45 changed files with 14946 additions and 21 deletions
--- a/cli-center/src/pages/demos/base.astro
+++ b/cli-center/src/pages/demos/base.astro
@@ -0,0 +1,9 @@
+---
+import Html from '@/components/html.astro';
+---
+
+<Html>
+  <main>
+   
+  </main>
+</Html>
--- a/cli-center/src/pages/demos/vue.astro
+++ b/cli-center/src/pages/demos/vue.astro
@@ -0,0 +1,10 @@
+---
+import Html from '@/components/html.astro';
+// import Counter from '@/components/vue/Counter.vue';
+---
+
+<Html>
+  <main>
+    <!-- <Counter count={10} client:only/> -->
+  </main>
+</Html>
--- a/cli-center/src/pages/docs/[...id].astro
+++ b/cli-center/src/pages/docs/[...id].astro
@@ -0,0 +1,27 @@
+---
+import { getCollection, render } from 'astro:content';
+import Main from '@/layouts/mdx.astro';
+import { basename } from '@/modules/basename';
+// 1. 为每个集合条目生成一个新路径
+export async function getStaticPaths() {
+  const posts = await getCollection('docs');
+  return posts.map((post) => ({
+    params: { id: post.id },
+    props: { post },
+    data: post,
+  }));
+}
+type Post = {
+  data: { title: string; tags: string[]; showMenu?: boolean };
+};
+// 2. 对于你的模板，你可以直接从 prop 获取条目
+const { post } = Astro.props as { post: Post };
+const { Content } = await render(post);
+const showMenu = post.data?.showMenu;
+const staticPaths = await getStaticPaths();
+const menu = staticPaths.map((item) => item.data);
+---
+
+<Main showMenu={showMenu} menu={menu} basename={basename} title={post.data.title}>
+  <Content />
+</Main>
--- a/cli-center/src/pages/docs/index.astro
+++ b/cli-center/src/pages/docs/index.astro
@@ -0,0 +1,80 @@
+---
+import { getCollection } from 'astro:content';
+const posts = await getCollection('docs');
+import { basename, wrapBasename } from '@/modules/basename';
+import Blank from '@/layouts/blank.astro';
+---
+
+<Blank>
+  <main class='min-h-screen bg-linear-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800'>
+    <div class='max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12'>
+      {/* 页面标题区域 */}
+      <div class='mb-12'>
+        <h1 class='text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4 bg-clip-text bg-linear-to-r from-blue-600 to-purple-600'>📚 文档列表</h1>
+        <p class='text-slate-600 dark:text-slate-400 text-lg'>浏览所有可用的文档资源</p>
+        <div class='mt-4 h-1 w-20 bg-linear-to-r from-blue-600 to-purple-600 rounded-full'></div>
+      </div>
+
+      {/* 文档列表 */}
+      <div class='space-y-4'>
+        {
+          posts.map((post) => {
+            const tags = post.data.tags || [];
+            const postUrl = wrapBasename(`/docs/${post.id}`);
+            return (
+              <article class='group bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-400'>
+                <div class='p-6'>
+                  {/* 文档标题 */}
+                  <a href={postUrl} class='block'>
+                    <h2 class='text-xl sm:text-2xl font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 mb-3'>
+                      {post.data.title}
+                    </h2>
+                  </a>
+
+                  {/* 文档描述(如果有) */}
+                  {post.data.description && <p class='text-slate-600 dark:text-slate-400 mb-4 line-clamp-2'>{post.data.description}</p>}
+
+                  {/* 标签列表 */}
+                  {tags.length > 0 && (
+                    <div class='flex flex-wrap gap-2 mt-4'>
+                      {tags.map((tag) => (
+                        <div class='inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors duration-200 border border-blue-200 dark:border-blue-800'>
+                          <span class='mr-1'>#</span>
+                          {tag}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* 阅读更多指示器 */}
+                  <a
+                    href={postUrl}
+                    class='mt-4 flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-200'>
+                    <span>阅读更多</span>
+                    <svg
+                      class='w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform duration-200'
+                      fill='none'
+                      viewBox='0 0 24 24'
+                      stroke='currentColor'>
+                      <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7' />
+                    </svg>
+                  </a>
+                </div>
+              </article>
+            );
+          })
+        }
+      </div>
+
+      {/* 空状态 */}
+      {
+        posts.length === 0 && (
+          <div class='text-center py-16'>
+            <div class='text-6xl mb-4'>📭</div>
+            <p class='text-xl text-slate-600 dark:text-slate-400'>暂无文档</p>
+          </div>
+        )
+      }
+    </div>
+  </main>
+</Blank>
--- a/cli-center/src/pages/index.astro
+++ b/cli-center/src/pages/index.astro
@@ -0,0 +1,47 @@
+---
+// import { query } from '@/modules/query.ts';
+console.log('Hello from index.astro');
+import '../styles/global.css';
+---
+
+<html lang='en'>
+  <head>
+    <title>My Homepage</title>
+  </head>
+  <body>
+    <h1 onclick="{onClick}">Welcome to my website!</h1>
+    <div class='bg-amber-50 w-20 h-20 rounded-full'></div>
+    <div id='root'></div>
+    <script type='importmap' data-vite-ignore is:inline>
+      {
+        "imports": {
+          "react": "https://esm.sh/react@19.1.0",
+          "react-dom": "https://esm.sh/react-dom@19.1.0/client.js",
+          "react-toastify": "https://esm.sh/react-toastify@11.0.5"
+        }
+      }
+    </script>
+    <script type='module' data-vite-ignore is:inline>
+      import { Button, message } from 'https://esm.sh/antd?standalone';
+      import React from 'react';
+      import { ToastContainer, toast } from 'react-toastify';
+      import { createRoot } from 'react-dom';
+      setTimeout(() => {
+        toast.loading('Hello from index.astro');
+        window.toast = toast;
+        console.log('message', toast);
+      }, 1000);
+      console.log('Hello from index.astro', Button);
+      const root = document.getElementById('root');
+      const render = createRoot(root);
+      const App = () => {
+        const button = React.createElement(Button, null, 'Hello');
+        const messageEl = React.createElement(ToastContainer, null, 'Hello');
+        const wrapperMessage = React.createElement('div', null, [button, messageEl]);
+        return wrapperMessage;
+      };
+      // render.render(React.createElement(Button, null, 'Hello'), root);
+      render.render(App(), root);
+    </script>
+  </body>
+</html>
--- a/cli-center/src/pages/setting.astro
+++ b/cli-center/src/pages/setting.astro
@@ -0,0 +1,8 @@
+---
+import Html from '@/components/html.astro';
+import { FirstLogin } from '@/apps/setting/index.tsx';
+---
+
+<Html>
+  <FirstLogin client:only />
+</Html>
--- a/cli-center/src/pages/setting/all.astro
+++ b/cli-center/src/pages/setting/all.astro
@@ -0,0 +1,8 @@
+---
+import Html from '@/components/html.astro';
+import { FirstLogin } from '@/apps/setting/index.tsx';
+---
+
+<Html>
+  <FirstLogin client:only />
+</Html>