feat: update 1.0.0

README.md

@@ -2,6 +2,18 @@
 
 > 特点: 复刻官方，完全开源+免费
 
-![](./showcase.png)
+目前 MVP 版本已经在自用中，更多功能完善施工中...
 
-施工中...
+### 使用
+
+> 暂未上线插件市场
+
+1. 下载[离线文件]()，复制后打开 utool 进行安装
+   ![](https://files.mdnice.com/user/8265/172f5f7b-d4b4-499a-a524-1fd1c89cef39.png)
+
+2. 通过 utool 进行调起
+   ![](https://files.mdnice.com/user/8265/3441940e-76db-4fd9-9e7d-1fc0c16bc1d7.png)
+
+3. 打开跟随主程序启动
+
+![](https://files.mdnice.com/user/8265/46bbb881-3753-4069-bb01-4d44bdabb958.png)

package.json

@@ -3,10 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "export DEBUG=1 && vite",
     "build": "tsc && vite build",
-    "dev:preload": "npm run build:preload -- --watch",
-    "build:preload": "tsc -p tsconfig.preload.json",
+    "build:debug": "export DEBUG=1 && npm run build",
     "preview": "vite preview",
     "prepare": "husky install"
   },

public/clipboard-event/index.js

@@ -10,7 +10,7 @@ class ClipboardEventListener extends EventEmitter {
     this.listening = false;
   }
 
-  filePath = join(homedir(), "_tmp_utool");
+  filePath = join(homedir(), "utool_clipboard");
 
   async startListening() {
     const { platform } = process;

src/App.tsx

@@ -6,7 +6,7 @@ import {
   IconButton,
   ThemeProvider,
 } from "@mui/material";
-import { FilterTab } from "./components/FilterTab";
+import { FilterTab, filterTabList } from "./components/FilterTab";
 import { useClipboardData } from "./hooks/useClipboardData";
 import { ClipBoardList } from "./components/ClipBoardList";
 import { ClipBoardDataType, copyToClipBoard, paste } from "./utils/clipboard";
@@ -15,11 +15,15 @@ import { useThemeProvider } from "./hooks/useThemeProvider";
 import { Clear } from "./components/Clear";
 
 function App() {
-  const [clipBoardType, setClipBoard] = useState<ClipBoardDataType>(
-    ClipBoardDataType.all
-  );
+  const [clipBoardType, setClipBoard] = useState<{
+    type: ClipBoardDataType;
+    index: number;
+  }>({
+    type: ClipBoardDataType.all,
+    index: 0,
+  });
   const { clipBoardList, clear } = useClipboardData({
-    filter: clipBoardType,
+    filter: clipBoardType.type,
   });
 
   const { Provider } = useThemeProvider();
@@ -43,9 +47,26 @@ function App() {
     listRef.current?.scrollTo(0, 0);
   });
 
-  const listRef = useRef<HTMLUListElement | null>(null);
+  useKeyPress("leftarrow", () => {
+    const nextIndex = Math.max(0, clipBoardType.index - 1);
+    setClipBoard({
+      index: nextIndex,
+      type: filterTabList[nextIndex].value,
+    });
+  });
 
-  console.log("clipBoardList", clipBoardList);
+  useKeyPress("rightarrow", () => {
+    const nextIndex = Math.min(
+      filterTabList.length - 1,
+      clipBoardType.index + 1
+    );
+    setClipBoard({
+      index: nextIndex,
+      type: filterTabList[nextIndex].value,
+    });
+  });
+
+  const listRef = useRef<HTMLUListElement | null>(null);
 
   return (
     <Provider>
@@ -59,9 +80,12 @@ function App() {
         <Clear onClick={clear} />
 
         <FilterTab
-          value={clipBoardType}
-          onChange={(v) => {
-            setClipBoard(v);
+          value={clipBoardType.type}
+          onChange={(type, index) => {
+            setClipBoard({
+              type,
+              index,
+            });
           }}
         />
         <ClipBoardList

src/components/ClipBoardItemContent.tsx

@@ -29,8 +29,9 @@ export const ClipBoardItemContent: FC<{
         }}
       >
         {item.files.map((file) => (
-          <Box key={file.path}>
-            <Typography>{file.name}</Typography>
+          <Box key={file.path} display="flex" marginTop="5px">
+            <img src={file.icon} className="w-5" />{" "}
+            <Typography sx={{ marginLeft: "10px" }}>{file.name}</Typography>
           </Box>
         ))}
       </Box>

src/components/FilterTab.tsx

@@ -1,12 +1,4 @@
-import {
-  Box,
-  Tabs,
-  Tab,
-  colors,
-  makeStyles,
-  createStyles,
-  SxProps,
-} from "@mui/material";
+import { Box, Tabs, Tab, colors, SxProps } from "@mui/material";
 import { FC } from "react";
 import { ClipBoardDataType } from "../utils/clipboard";
 import TextSnippetIcon from "@mui/icons-material/TextSnippet";
@@ -15,10 +7,33 @@ import FilePresentIcon from "@mui/icons-material/FilePresent";
 import BallotIcon from "@mui/icons-material/Ballot";
 interface IFilterTabProps {
   value: ClipBoardDataType;
-  onChange: (v: ClipBoardDataType) => void;
+  onChange: (v: ClipBoardDataType, index: number) => void;
   sx?: SxProps;
 }
 
+export const filterTabList = [
+  {
+    label: "全部",
+    icon: <BallotIcon />,
+    value: ClipBoardDataType.all,
+  },
+  {
+    label: "文本",
+    icon: <TextSnippetIcon />,
+    value: ClipBoardDataType.text,
+  },
+  {
+    label: "文件",
+    icon: <FilePresentIcon />,
+    value: ClipBoardDataType.file,
+  },
+  {
+    label: "图片",
+    icon: <ImageIcon />,
+    value: ClipBoardDataType.image,
+  },
+];
+
 export const FilterTab: FC<IFilterTabProps> = ({
   value,
   onChange,
@@ -36,7 +51,12 @@ export const FilterTab: FC<IFilterTabProps> = ({
     >
       <Tabs
         value={value}
-        onChange={(_, v) => onChange(v)}
+        onChange={(_, v) =>
+          onChange(
+            v,
+            filterTabList.findIndex((x) => x.value === v)
+          )
+        }
         classes={{
           flexContainer: "oooo",
         }}
@@ -47,41 +67,15 @@ export const FilterTab: FC<IFilterTabProps> = ({
         TabIndicatorProps={{
           sx: {
             backgroundColor: colors.grey[50],
-            // opacity: 0.6,
             height: "40px",
             borderRadius: "40%",
             bottom: "15px",
           },
         }}
       >
-        <Tab
-          label="全部"
-          icon={<BallotIcon />}
-          iconPosition="start"
-          value={ClipBoardDataType.all}
-          sx={{ zIndex: 1 }}
-        />
-        <Tab
-          label="文本"
-          icon={<TextSnippetIcon />}
-          iconPosition="start"
-          value={ClipBoardDataType.text}
-          sx={{ zIndex: 1 }}
-        />
-        <Tab
-          label="文件"
-          iconPosition="start"
-          icon={<FilePresentIcon />}
-          value={ClipBoardDataType.file}
-          sx={{ zIndex: 1 }}
-        />
-        <Tab
-          label="图片"
-          icon={<ImageIcon />}
-          iconPosition="start"
-          value={ClipBoardDataType.image}
-          sx={{ zIndex: 1 }}
-        />
+        {filterTabList.map((x) => (
+          <Tab iconPosition="start" key={x.value} sx={{ zIndex: 1 }} {...x} />
+        ))}
       </Tabs>
     </Box>
   );

src/global.d.ts

@@ -21,6 +21,8 @@ declare global {
     utoolClipboard: utoolClipboard;
   }
 
+  const DEBUG: boolean;
+
   interface UToolsApi {
     /**
      * 设置子输入框

src/hooks/useClipboardData.ts

@@ -14,7 +14,7 @@ interface params {
   filter?: ClipBoardDataType;
 }
 
-const MAX_SIZE = 50;
+const MAX_SIZE = 100;
 
 export const useClipboardData = ({ filter }: params = {}) => {
   // TODO: 本地持久化，使用写本地文件替代
@@ -30,8 +30,9 @@ export const useClipboardData = ({ filter }: params = {}) => {
   useEffect(() => {
     downloadClipboard().then(() => {
       window.utoolClipboard.clipboardListener.startListening();
-      window.utoolClipboard.clipboardListener.on("change", () => {
-        const item = readClipBoard();
+      window.utoolClipboard.clipboardListener.on("change", async () => {
+        const item = await readClipBoard();
+        console.log("Data from clipboard", item);
         if (item) {
           setClipBoardList((pre = []) =>
             [

src/main.tsx

@@ -3,7 +3,13 @@ import App from "./App";
 import "./index.css";
 import VConsole from "vconsole";
 
-const vconsole = new VConsole();
+if (DEBUG) {
+  // const vconsole = new VConsole();
+}
+
+window.addEventListener("error", (e) => {
+  window.utools.showNotification(e.message);
+});
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <App />

src/node-clipboard/darwin.d.ts

@@ -0,0 +1 @@
+export const darwin: string;

src/node-clipboard/index.ts

@@ -0,0 +1,3 @@
+export * from "./darwin";
+export * from "./linux";
+export * from "./win32";

src/node-clipboard/linux.d.ts

@@ -0,0 +1 @@
+export const linux: string;

src/node-clipboard/win32.d.ts

@@ -0,0 +1 @@
+export const win32: string;