feat: Remove Ai and Add Font Re

mx-space · Nov 4, 2024 · e7be5dd · e7be5dd
1 parent f2974c3
commit e7be5dd
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 64 deletions.
diff --git a/app/components/ToolBox.tsx b/app/components/ToolBox.tsx
@@ -1,45 +1,71 @@
 'use client'
 
 import { useState } from 'react';
-import { MessageSquare } from 'lucide-react';
-import { OramaChatBox } from '@orama/react-components';
+import { Type } from 'lucide-react';
 import { cn } from '@/utils/cn';
-import { buttonVariants } from '@/app/components/ui/button';
+
+const FONT_OPTIONS = [
+  { name: '默认', value: '' },
+  { name: '无衬线', value: 'font-sans' },
+  { name: '衬线', value: 'font-serif' },
+  { name: '等宽', value: 'font-mono' }
+];
 
 export default function ToolBox() {
-  const [showChat, setShowChat] = useState(false);
+  const [showFontSelect, setShowFontSelect] = useState(false);
+  const [currentFont, setCurrentFont] = useState('');
+
+  const handleFontChange = (fontValue: string) => {
+    setCurrentFont(fontValue);
+    document.body.className = fontValue;
+  };
 
   return (
-    <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-2">
-      {showChat && (
-        <OramaChatBox
-          index={{
-            endpoint: 'https://cloud.orama.run/v1/indexes/mxspace-no50lj',
-            api_key: 'HHIpRwosmxFfAs7l2gsJv5m5A3ew2PRB'
-          }}
-          sourceBaseUrl="https://mx-space.js.org"
-          sourcesMap={{
-            title: 'title',
-            description: 'description',
-            path: 'url'
-          }}
-          suggestions={[
-            '如何部署 Mix Space?',
-            '如何更新 Mix Space?',
-            '如何配置主题?'
-          ]}
-          className="mb-2 w-[350px] !rounded-xl overflow-hidden"
-        />
-      )}
+    <div className="fixed bottom-6 right-6 z-50 flex items-center justify-center">
+      <div 
+        className={cn(
+          "absolute bottom-16 right-0 bg-white/80 dark:bg-zinc-800/80 backdrop-blur-sm",
+          "rounded-2xl p-3 shadow-lg transition-all duration-300 origin-bottom-right",
+          showFontSelect ? "scale-100 opacity-100" : "scale-75 opacity-0 pointer-events-none"
+        )}
+      >
+        <div className="flex flex-col gap-3">
+          {FONT_OPTIONS.map((font, index) => (
+            <button
+              key={font.value}
+              onClick={() => handleFontChange(font.value)}
+              className={cn(
+                "w-10 h-10 rounded-xl flex items-center justify-center transition-all",
+                "bg-white dark:bg-zinc-800 shadow hover:shadow-md",
+                "hover:scale-105 active:scale-95",
+                font.value,
+                currentFont === font.value && 'ring-2 ring-blue-500'
+              )}
+              style={{
+                transform: `translateY(${showFontSelect ? 0 : 20}px)`,
+                opacity: showFontSelect ? 1 : 0,
+                transitionDelay: `${index * 50}ms`
+              }}
+            >
+              <span className="text-lg select-none">T</span>
+            </button>
+          ))}
+        </div>
+      </div>
 
       <button
-        onClick={() => setShowChat(!showChat)}
+        onClick={() => setShowFontSelect(!showFontSelect)}
         className={cn(
-          buttonVariants({ size: 'lg' }),
-          'rounded-full shadow-lg p-4'
+          "w-12 h-12 rounded-xl shadow-lg",
+          "bg-white dark:bg-zinc-800",
+          "flex items-center justify-center",
+          "hover:shadow-xl transition-all",
+          "hover:scale-105 active:scale-95",
+          "focus:outline-none focus:ring-2 focus:ring-blue-500",
+          showFontSelect && "bg-blue-50 dark:bg-blue-950"
         )}
       >
-        <MessageSquare className="h-6 w-6" />
+        <Type className="h-5 w-5" />
       </button>
     </div>
   );

diff --git a/app/components/search.tsx b/app/components/search.tsx
@@ -10,38 +10,5 @@ const client = new OramaClient({
 });
 
 export default function CustomSearchDialog(props: SharedProps) {
-  return (
-    <SearchDialog 
-      {...props} 
-      client={client}
-      showOrama
-      renderResult={(result) => (
-        <div className="p-4 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
-          <div className="font-medium text-lg mb-1">{result.title}</div>
-          <div className="text-sm text-gray-600 dark:text-gray-400">{result.description}</div>
-          <div className="text-xs text-gray-500 dark:text-gray-500 mt-2">
-            {result.section && (
-              <span className="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
-                {result.section}
-              </span>
-            )}
-          </div>
-        </div>
-      )}
-      footer={
-        <div className="flex items-center justify-end gap-1 text-sm text-gray-500">
-          <span>搜索由</span>
-          <a 
-            href="https://oramasearch.com" 
-            target="_blank" 
-            rel="noopener noreferrer"
-            className="hover:text-fd-primary transition-colors"
-          >
-            Orama
-          </a>
-          <span>提供支持</span>
-        </div>
-      }
-    />
-  );
+  return <SearchDialog {...props} client={client} showOrama />;
 }
diff --git a/app/global.css b/app/global.css
@@ -1,3 +1,41 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 无衬线字体 */
+.font-sans {
+  font-family: 'Inter', 'LXGW Neo XiHei', system-ui, -apple-system, sans-serif;
+}
+
+/* 衬线字体 */
+.font-serif {
+  font-family: 'Noto Serif SC', 'Source Han Serif SC', serif;
+}
+
+/* 等宽字体 */
+.font-mono {
+  font-family: 'JetBrains Mono', 'LXGW WenKai Mono', monospace;
+}
+
+/* 预加载字体 */
+@font-face {
+  font-family: 'LXGW Neo XiHei';
+  src: url('https://cdn.jsdelivr.net/gh/chawyehsu/lxgw-neo-xihei-webfont@latest/dist/LXGWNeoXiHei.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'LXGW WenKai Mono';
+  src: url('https://cdn.jsdelivr.net/gh/chawyehsu/lxgw-wenkai-webfont@latest/dist/LXGWWenKaiMono-Regular.woff2') format('woff2');
+  font-display: swap;
+}
+
+@layer base {
+  body {
+    transition: font-family 0.3s ease;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -40,7 +40,16 @@ export default function RootLayout({
 }) {
   return (
     <html lang="zh-CN" suppressHydrationWarning>
-      <head />
+      <head>
+        {/* Inter 字体 */}
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
+
+        {/* Noto Serif SC */}
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap" rel="stylesheet" />
+
+        {/* JetBrains Mono */}
+        <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
+      </head>
       <body>
         <Provider>
           {children}