feat: base force copy connection

packages/copy/src/constant/event.ts

@@ -13,3 +13,7 @@ export const SELECT_START = "selectstart";
 export const CONTEXT_MENU = "contextmenu";
 export const KEY_DOWN = "keydown";
 export const TOUCH_START = "touchstart";
+export const FOCUS = "focus";
+export const BLUR = "blur";
+export const FOCUS_IN = "focusin";
+export const FOCUS_OUT = "focusout";

packages/force-copy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "force-copy",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "author": "Czy",
   "license": "MIT",
   "sideEffects": false,

packages/force-copy/src/inject/utils/bus.ts

@@ -16,6 +16,8 @@ const EVENTS_TYPE = [
   "CONTEXT_MENU_CAPTURE",
   "SELECT_START_CAPTURE",
   "TOUCH_START_CAPTURE",
+  "FOCUS_CAPTURE",
+  "BLUR_CAPTURE",
 ] as const;
 
 export const EVENTS_ENUM = EVENTS_TYPE.reduce(
@@ -38,6 +40,8 @@ interface EventBusParams {
   [EVENTS_ENUM.CONTEXT_MENU_CAPTURE]: Event;
   [EVENTS_ENUM.SELECT_START_CAPTURE]: Event;
   [EVENTS_ENUM.TOUCH_START_CAPTURE]: TouchEvent;
+  [EVENTS_ENUM.FOCUS_CAPTURE]: FocusEvent;
+  [EVENTS_ENUM.BLUR_CAPTURE]: FocusEvent;
 }
 
 declare module "laser-utils/dist/es/event-bus" {

packages/force-copy/src/inject/utils/events.ts

@@ -1,7 +1,11 @@
 import {
+  BLUR,
   CONTEXT_MENU,
   COPY,
   DOM_READY,
+  FOCUS,
+  FOCUS_IN,
+  FOCUS_OUT,
   KEY_DOWN,
   MOUSE_DOWN,
   MOUSE_UP,
@@ -35,6 +39,10 @@ export const initBaseEvents = () => {
   );
   window.addEventListener(DOM_READY, e => EventBus.emit(EVENTS_ENUM.DOM_LOADED, e), true);
   window.addEventListener(PAGE_LOADED, e => EventBus.emit(EVENTS_ENUM.PAGE_LOADED, e), true);
+  window.addEventListener(FOCUS, e => EventBus.emit(EVENTS_ENUM.FOCUS_CAPTURE, e), true);
+  window.addEventListener(FOCUS_IN, e => EventBus.emit(EVENTS_ENUM.FOCUS_CAPTURE, e), true);
+  window.addEventListener(BLUR, e => EventBus.emit(EVENTS_ENUM.BLUR_CAPTURE, e), true);
+  window.addEventListener(FOCUS_OUT, e => EventBus.emit(EVENTS_ENUM.FOCUS_CAPTURE, e), true);
 };
 
 export const stopNativePropagation = (event: Event) => event.stopImmediatePropagation();

packages/force-copy/src/popup/components/app/index.module.scss

@@ -0,0 +1,26 @@
+body {
+  user-select: none;
+  background-color: var(--color-bg-3);
+}
+
+.container {
+  padding: 10px;
+  width: 270px;
+  color: var(--color-text-1);
+}
+
+.hr {
+  margin: 5px 0;
+  height: 1px;
+  background-color: var(--color-border-3);
+  width: 100%;
+}
+
+.console {
+  position: relative;
+  > div {
+    margin: 10px 5px;
+    display: flex;
+    align-items: center;
+  }
+}

packages/force-copy/src/popup/components/app/index.tsx

@@ -0,0 +1,28 @@
+import type { FC } from "react";
+import styles from "./index.module.scss";
+import { cs } from "laser-utils";
+import { I18n } from "../../i18n";
+import { cross } from "@/utils/global";
+import { Console } from "../console";
+import { Header } from "../header";
+import { Footer } from "../footer";
+
+const i18n = new I18n(cross.i18n.getUILanguage());
+
+export const App: FC = () => {
+  return (
+    <div className={cs(styles.container)}>
+      <Header i18n={i18n}></Header>
+
+      <div className={styles.hr}></div>
+
+      <div className={styles.console}>
+        <Console i18n={i18n}></Console>
+      </div>
+
+      <div className={styles.hr}></div>
+
+      <Footer i18n={i18n}></Footer>
+    </div>
+  );
+};

packages/force-copy/src/popup/components/console/index.module.scss

@@ -0,0 +1,4 @@
+.switch {
+  display: flex;
+  justify-content: center;
+}