fix: legacy

release
hemengke1997 · Apr 17, 2024 · f168a4b · f168a4b
1 parent 3e10350
commit f168a4b
Show file tree

Hide file tree

Showing 17 changed files with 1,387 additions and 129 deletions.
diff --git a/packages/istanbul-widget/CHANGELOG.md b/packages/istanbul-widget/CHANGELOG.md
@@ -1,5 +1,11 @@
 # istanbul-widget
 
+## 1.0.2
+
+### Patch Changes
+
+- fix: legacy
+
 ## 1.0.1
 
 ### Patch Changes

diff --git a/packages/istanbul-widget/dev.ts b/packages/istanbul-widget/dev.ts
@@ -1,6 +1,10 @@
 import IstanbulWidget from './src/istanbul-widget'
 
 new IstanbulWidget({
+  defaultPosition: {
+    x: 20,
+    y: 100,
+  },
   report: {
     onAction: async (coverage) => {
       console.log('上报', coverage)

diff --git a/packages/istanbul-widget/package.json b/packages/istanbul-widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "istanbul-widget",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "main": "./dist/istanbul-widget.min.js",
   "module": "./dist/istanbul-widget.esm.js",
@@ -37,7 +37,9 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.24.4",
     "@iconify/tailwind": "^0.1.4",
+    "@rollup/plugin-babel": "^6.0.4",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.23",

diff --git a/packages/istanbul-widget/src/components/ui/alert-dialog.tsx b/packages/istanbul-widget/src/components/ui/alert-dialog.tsx
@@ -35,7 +35,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "iw-fixed iw-left-[50%] iw-top-[50%] iw-z-50 iw-grid iw-w-[80%] iw-max-w-lg iw-translate-x-[-50%] iw-translate-y-[-50%] iw-gap-4 iw-border iw-bg-background iw-p-6 iw-shadow-lg iw-duration-200 data-[state=open]:iw-animate-in data-[state=closed]:iw-animate-out data-[state=closed]:iw-fade-out-0 data-[state=open]:iw-fade-in-0 data-[state=closed]:iw-zoom-out-95 data-[state=open]:iw-zoom-in-95 data-[state=closed]:iw-slide-out-to-left-1/2 data-[state=closed]:iw-slide-out-to-top-[48%] data-[state=open]:iw-slide-in-from-left-1/2 data-[state=open]:iw-slide-in-from-top-[48%] iw-rounded-lg",
+        "iw-fixed iw-left-[50%] iw-top-[50%] iw-z-50 iw-grid iw-w-[80%] iw-max-w-lg iw-translate-x-[-50%] iw-translate-y-[-50%] iw-space-4 iw-border iw-bg-background iw-p-6 iw-shadow-lg iw-duration-200 data-[state=open]:iw-animate-in data-[state=closed]:iw-animate-out data-[state=closed]:iw-fade-out-0 data-[state=open]:iw-fade-in-0 data-[state=closed]:iw-zoom-out-95 data-[state=open]:iw-zoom-in-95 data-[state=closed]:iw-slide-out-to-left-1/2 data-[state=closed]:iw-slide-out-to-top-[48%] data-[state=open]:iw-slide-in-from-left-1/2 data-[state=open]:iw-slide-in-from-top-[48%] iw-rounded-lg",
         className
       )}
       {...props}

diff --git a/packages/istanbul-widget/src/components/ui/button.tsx b/packages/istanbul-widget/src/components/ui/button.tsx
@@ -10,13 +10,13 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "iw-bg-primary iw-text-primary-foreground iw-shadow hover:iw-bg-primary/90",
+          "iw-bg-primary iw-text-primary-foreground iw-shadow",
         destructive:
-          "iw-bg-destructive iw-text-destructive-foreground iw-shadow-sm hover:iw-bg-destructive/90",
+          "iw-bg-destructive iw-text-destructive-foreground iw-shadow-sm",
         outline:
           "iw-border iw-border-input iw-bg-background iw-shadow-sm hover:iw-bg-accent hover:iw-text-accent-foreground",
         secondary:
-          "iw-bg-secondary iw-text-secondary-foreground iw-shadow-sm hover:iw-bg-secondary/80",
+          "iw-bg-secondary iw-text-secondary-foreground iw-shadow-sm",
         ghost: "hover:iw-bg-accent hover:iw-text-accent-foreground",
         link: "iw-text-primary iw-underline-offset-4 hover:iw-underline",
       },

diff --git a/packages/istanbul-widget/src/components/ui/dialog.tsx b/packages/istanbul-widget/src/components/ui/dialog.tsx
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "iw-fixed iw-left-[50%] iw-top-[50%] iw-z-50 iw-grid iw-w-[80%] iw-max-w-lg iw-translate-x-[-50%] iw-translate-y-[-50%] iw-gap-4 iw-border iw-bg-background iw-p-6 iw-shadow-lg iw-duration-200 data-[state=open]:iw-animate-in data-[state=closed]:iw-animate-out data-[state=closed]:iw-fade-out-0 data-[state=open]:iw-fade-in-0 data-[state=closed]:iw-zoom-out-95 data-[state=open]:iw-zoom-in-95 data-[state=closed]:iw-slide-out-to-left-1/2 data-[state=closed]:iw-slide-out-to-top-[48%] data-[state=open]:iw-slide-in-from-left-1/2 data-[state=open]:iw-slide-in-from-top-[48%] iw-rounded-lg",
+        "iw-fixed iw-left-[50%] iw-top-[50%] iw-z-50 iw-grid iw-w-[80%] iw-max-w-lg iw-translate-x-[-50%] iw-translate-y-[-50%] iw-space-4 iw-border iw-bg-background iw-p-6 iw-shadow-lg iw-duration-200 data-[state=open]:iw-animate-in data-[state=closed]:iw-animate-out data-[state=closed]:iw-fade-out-0 data-[state=open]:iw-fade-in-0 data-[state=closed]:iw-zoom-out-95 data-[state=open]:iw-zoom-in-95 data-[state=closed]:iw-slide-out-to-left-1/2 data-[state=closed]:iw-slide-out-to-top-[48%] data-[state=open]:iw-slide-in-from-left-1/2 data-[state=open]:iw-slide-in-from-top-[48%] iw-rounded-lg",
         className
       )}
       {...props}

diff --git a/packages/istanbul-widget/src/components/ui/toaster.tsx b/packages/istanbul-widget/src/components/ui/toaster.tsx
@@ -16,7 +16,7 @@ export function Toaster() {
       {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
           <Toast key={id} {...props}>
-            <div className="iw-grid iw-gap-1">
+            <div className="iw-grid iw-space-1">
               {title && <ToastTitle>{title}</ToastTitle>}
               {description && (
                 <ToastDescription>{description}</ToastDescription>

diff --git a/packages/istanbul-widget/src/core/IstanbulWidget.tsx b/packages/istanbul-widget/src/core/IstanbulWidget.tsx
@@ -57,6 +57,10 @@ type CoreProps = {
     x: number
     y: number
   }
+  defaultPosition: {
+    x: number
+    y: number
+  }
   show: boolean
   min_internal: number
   onConfigChanged: (c: Config) => void
@@ -69,6 +73,7 @@ type CoreProps = {
 function Core(props: CoreProps) {
   const {
     position,
+    defaultPosition,
     show,
     min_internal,
     onConfigChanged,
@@ -222,8 +227,8 @@ function Core(props: CoreProps) {
         )}
       >
         <Dialog open={dialogOpen} onOpenChange={(open) => setDialogOpen(open)}>
-          <Draggable position={position}>
-            <div className='iw-flex iw-gap-x-2'>
+          <Draggable position={position} defaultPosition={defaultPosition}>
+            <div className='iw-flex iw-space-x-2'>
               <Button size='sm' onClick={debouncedReport}>
                 上报
               </Button>
@@ -240,8 +245,8 @@ function Core(props: CoreProps) {
               <DialogTitle>上报设置</DialogTitle>
             </DialogHeader>
 
-            <div className='iw-flex iw-flex-col iw-gap-3 iw-py-2'>
-              <div className='iw-flex iw-items-center iw-gap-4'>
+            <div className='iw-flex iw-flex-col iw-space-y-3 iw-py-4'>
+              <div className='iw-flex iw-items-center iw-space-x-4'>
                 <Label className={'iw-whitespace-nowrap iw-flex-none'}>
                   上报人 {requireReporter && <span className={'iw-text-red-600'}>*</span>}
                 </Label>
@@ -254,15 +259,15 @@ function Core(props: CoreProps) {
                   onChange={(e) => setDynamicConfig({ reporter: e.target.value })}
                 ></Input>
               </div>
-              <div className='iw-flex iw-items-center iw-gap-4'>
+              <div className='iw-flex iw-items-center iw-space-x-4'>
                 <Label>自动上报</Label>
                 <Switch
                   checked={dynamicConfig.enable_auto_report}
                   onCheckedChange={(checked) => setDynamicConfig({ enable_auto_report: checked })}
                 />
               </div>
               {dynamicConfig.enable_auto_report && (
-                <div className='iw-flex iw-items-center iw-gap-4'>
+                <div className='iw-flex iw-items-center iw-space-x-4'>
                   <Label className='iw-whitespace-nowrap'>自动上报间隔</Label>
                   <Input
                     type='number'
@@ -273,7 +278,7 @@ function Core(props: CoreProps) {
                   />
                 </div>
               )}
-              <div className='iw-flex iw-items-center iw-gap-4'>
+              <div className='iw-flex iw-items-center iw-space-x-4'>
                 <Label>离开页面时上报</Label>
                 <Switch
                   checked={dynamicConfig.report_on_pageleave}
@@ -282,7 +287,7 @@ function Core(props: CoreProps) {
               </div>
             </div>
 
-            <DialogFooter className={'iw-gap-y-2'}>
+            <DialogFooter className={'iw-flex'}>
               <AlertDialog>
                 <AlertDialogTrigger asChild>
                   <Button variant='destructive'>重置设置</Button>
@@ -316,6 +321,7 @@ function Core(props: CoreProps) {
                 onClick={() => {
                   onSubmit(dynamicConfig)
                 }}
+                className={'iw-mb-2'}
               >
                 保存
               </Button>

diff --git a/packages/istanbul-widget/src/core/components/Draggable.tsx b/packages/istanbul-widget/src/core/components/Draggable.tsx
@@ -1,3 +1,4 @@
+import { useUpdateEffect } from '@minko-fe/react-hook'
 import { useDraggable } from '@neodrag/react'
 import { type PropsWithChildren, memo, useEffect, useRef, useState } from 'react'
 import { setStorage } from '@/utils/tool'
@@ -7,10 +8,14 @@ type DraggableProps = PropsWithChildren<{
     x: number
     y: number
   }
+  defaultPosition: {
+    x: number
+    y: number
+  }
 }>
 
 function Draggable(props: DraggableProps) {
-  const { children, position: positionProp } = props
+  const { children, position: positionProp, defaultPosition } = props
 
   const draggableRef = useRef<HTMLDivElement>(null)
   const handleRef = useRef<HTMLDivElement>(null)
@@ -42,18 +47,23 @@ function Draggable(props: DraggableProps) {
     if (x + btn.offsetWidth > docWidth) {
       x = docWidth - btn.offsetWidth
     }
+
     if (y + btn.offsetHeight > docHeight) {
       y = docHeight - btn.offsetHeight
     }
 
     if (x < 0) {
-      x = 0
+      x = defaultPosition.x
     }
 
     if (y >= docHeight - btn.offsetHeight) {
       y = docHeight - btn.offsetHeight - 20
     }
 
+    if (y < 0) {
+      y = defaultPosition.y
+    }
+
     return [x, y]
   }
 
@@ -64,15 +74,15 @@ function Draggable(props: DraggableProps) {
     }
   }, [draggableRef.current])
 
-  useEffect(() => {
+  useUpdateEffect(() => {
     const { x, y } = position
     setStorage('btn_x', `${x}`)
     setStorage('btn_y', `${y}`)
   }, [position])
 
   return (
     <div ref={draggableRef} className={'iw-w-fit iw-pointer-events-auto'}>
-      <div className='iw-flex iw-items-center iw-gap-x-2 iw-rounded-md iw-bg-neutral-600 iw-p-2 iw-text-xs iw-shadow'>
+      <div className='iw-flex iw-items-center iw-space-x-2 iw-rounded-md iw-bg-[#525252] iw-p-2 iw-text-xs iw-shadow'>
         {children}
         <div ref={handleRef} className='iw-icon-[iconamoon--move-fill] iw-cursor-move iw-text-lg iw-text-white'></div>
       </div>

diff --git a/packages/istanbul-widget/src/core/core.ts b/packages/istanbul-widget/src/core/core.ts
@@ -21,6 +21,10 @@ export class IstanbulWidget {
   public option: Required<IstanbulWidgetOptions> = {
     theme: 'dark',
     target: document.body,
+    defaultPosition: {
+      x: 0,
+      y: 0,
+    },
     onReady: () => {},
     report: {
       auto: {
@@ -84,8 +88,8 @@ export class IstanbulWidget {
 
   private _initComponent() {
     if (!$.one(`#${ISTANBUL_WIDGET_ID}`)) {
-      const btnX = getStorage('btn_x') * 1
-      const btnY = getStorage('btn_y') * 1
+      const btnX = getStorage('btn_x', this.option.defaultPosition.x) * 1
+      const btnY = getStorage('btn_y', this.option.defaultPosition.y) * 1
 
       let target: HTMLElement = document.body
       if (typeof this.option.target === 'string') {
@@ -139,6 +143,10 @@ export class IstanbulWidget {
           x: btnX,
           y: btnY,
         },
+        defaultPosition: {
+          x: this.option.defaultPosition.x!,
+          y: this.option.defaultPosition.y!,
+        },
         show: true,
         min_internal: autoObj.minInterval!,
         onConfigChanged: setConfigToLocal,

diff --git a/packages/istanbul-widget/src/core/options.interface.ts b/packages/istanbul-widget/src/core/options.interface.ts
@@ -7,6 +7,17 @@ export interface IstanbulWidgetOptions {
    * 挂载DOM
    */
   target?: string | HTMLElement
+  /**
+   * 按钮默认位置
+   * @default
+   * ```js
+   * { x: 0, y: 0 }
+   * ```
+   */
+  defaultPosition?: {
+    x?: number
+    y?: number
+  }
   /**
    * 插件就绪时回调
    */