Merge pull request #39 from HelloBojack/master

feat: Completed issues #16 and #18

app/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

app/electron.vite.config.ts

@@ -12,7 +12,8 @@ export default defineConfig({
   renderer: {
     resolve: {
       alias: {
-        '@renderer': resolve('src/renderer/src')
+        '@renderer': resolve('src/renderer/src'),
+        '@components': resolve('src/renderer/src/components')
       }
     },
     plugins: [react()]

app/package.json

@@ -45,6 +45,7 @@
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
     "@icon-park/react": "^1.4.2",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@types/better-sqlite3": "^7.6.10",
     "@types/mockjs": "^1.0.10",
     "@uiw/react-codemirror": "^4.22.2",
@@ -52,16 +53,20 @@
     "antd": "^5.18.3",
     "antd-style": "^3.6.2",
     "better-sqlite3": "^11.0.0",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
     "electron-updater": "^6.2.1",
     "localforage": "^1.10.0",
+    "lucide-react": "^0.408.0",
     "mantine-contextmenu": "^7.10.2",
     "match-sorter": "^6.3.4",
     "mockjs": "^1.1.0",
     "openai": "^4.24.7",
     "react-router-dom": "^6.23.1",
     "sort-by": "^0.0.2",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss-animate": "^1.0.7",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

app/src/renderer/src/assets/global.scss

@@ -1,14 +1,48 @@
-body{
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+        --radius: 0.5rem;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+    }
+}
+
+body {
     @apply w-screen h-screen;
 }
 
-*{
+* {
     opacity: 0.995;
 }
 
 
 // 可以拖动
-.drag{
+.drag {
     -webkit-app-region: drag;
 }
 
@@ -17,13 +51,14 @@ body{
 input,
 select,
 textarea,
-option{
+option {
     -webkit-app-region: none;
 }
 
-.contextMenu{
+.contextMenu {
     @apply rounded-md;
+
     button {
         @apply bg-[#2c3e50] text-white px-5 py-1 hover:bg-[#34495e];
     }
-}
+}

app/src/renderer/src/components/Search/index.tsx

@@ -1,51 +1,65 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@components/ui/tooltip"
 import useSearch from "@renderer/hooks/useSearch"
 import { SettingOne } from "@icon-park/react"
 import { Button, Input } from "antd"
 import { useStore } from "@renderer/store/useStore"
 import { useEffect, useState } from "react"
 export default function Search(): JSX.Element {
-  const {handleSearch} = useSearch()
-  const search = useStore((state)=>state.search)
+  const { handleSearch } = useSearch()
+  const search = useStore((state) => state.search)
   const [version, setVersion] = useState('')
   const [updateInfo] = useState('')
   useEffect(() => {
     window.api.getVersion().then((res) => {
-        setVersion(res)
+      setVersion(res)
     })
-    window.api.updateInfo((value)=>{
-      if(value === '软件更新失败，重试中...'){
-          window.api.checkUpdate();
+    window.api.updateInfo((value) => {
+      if (value === '软件更新失败，重试中...') {
+        window.api.checkUpdate();
       }
-  })
+    })
 
-  window.api.checkUpdate();
-}, []);
+    window.api.checkUpdate();
+  }, []);
   return (
     <main className="bg-slate-50 p-3 rounded-lg drag" >
-        <div className="bg-slate-200 p-3 rounded-l flex items-center gap-1 no-drag">
-            <SettingOne 
-              theme="outline"
-              size="22"
-              fill="#34495e"
-              strokeWidth={4}
-              className="cursor-pointer"
-              onClick={()=>window.api.openWindow('code')
-              }
-            />
-            <Input 
-            value={search}
-            placeholder="请输入常用的action名字以快速调用" 
-            onChange={handleSearch}
-            autoFocus
-            />
-        </div>
-        <section className="text-center text-slate-600 text-xs mt-2 no-drag select-none">
-          <div>
+      <div className="bg-slate-200 p-3 rounded-l flex items-center gap-1 no-drag">
+        <TooltipProvider delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger>
+              <SettingOne
+                theme="outline"
+                size="22"
+                fill="#34495e"
+                strokeWidth={4}
+                className="cursor-pointer"
+                onClick={() => window.api.openWindow('code')}
+              />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>编辑代码</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+        <Input
+          value={search}
+          placeholder="请输入常用的action名字以快速调用"
+          onChange={handleSearch}
+          autoFocus
+        />
+      </div>
+      <section className="text-center text-slate-600 text-xs mt-2 no-drag select-none">
+        <div>
           autoMate V{version}
-          <span className="text-blue-600 cursor-pointer" onClick={()=>window.api.openWindow('config')}>点击配置</span>
-          </div>
-          {updateInfo==='成功' && <Button type="primary" onClick={()=>window.api.restartApp()}>重启</Button>}
-        </section>
+          <span className="text-blue-600 cursor-pointer" onClick={() => window.api.openWindow('config')}>点击配置AI API</span>
+        </div>
+        {updateInfo === '成功' && <Button type="primary" onClick={() => window.api.restartApp()}>重启</Button>}
+      </section>
 
     </main>
   )

app/src/renderer/src/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@renderer/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

app/src/renderer/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

app/tailwind.config.js

@@ -1,12 +1,77 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: ["class"],
   content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}"
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
   ],
+  prefix: "",
   theme: {
-    extend: {},
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
   },
-  plugins: [],
-}
-
+  plugins: [require("tailwindcss-animate")],
+}