iphone-xudale 0.2.9

package/app/(pages)/popup/page.tsx

@@ -0,0 +1,166 @@
+'use client'
+import { restoreFromStorage, saveToStorage } from '@/app/shared/util'
+import { defaultiPhoneOrderConfig, storeKeys } from '@/app/shared/constants'
+import { useEffect, useState } from 'react'
+import { Match_URL } from '@/app/shared/constants'
+import { IPHONEORDER_CONFIG } from '@/app/shared/interface'
+import SVGPlay from '@/app/components/SVGPlay'
+
+const Popup = () => {
+    const [orderEnabled, setOrderEnable] = useState<boolean>(false)
+    const [config, setConfig] = useState<IPHONEORDER_CONFIG>(defaultiPhoneOrderConfig)
+    // 异步获取enable状态
+    useEffect(() => {
+        const getOrderEnable = async () => {
+            const isEnabled = await restoreFromStorage(storeKeys.orderEnabled)
+            const config = await restoreFromStorage(storeKeys.orderConfig)
+            setOrderEnable(!!isEnabled)
+            setConfig(config as IPHONEORDER_CONFIG)
+        }
+        getOrderEnable()
+    }, [])
+
+    const handleOptionClick = () => {
+        if (typeof chrome !== 'undefined' && chrome?.runtime) {
+            chrome.runtime.openOptionsPage()
+        } else {
+            console.log(`please open in chrome`)
+        }
+    }
+    const handleConfirm = () => {
+        if (
+            !orderEnabled ||
+            (config?.lastName &&
+                config?.mobile &&
+                config?.firstName &&
+                config?.appleId &&
+                config?.last4code &&
+                config?.cityName &&
+                config?.districtName &&
+                config?.provinceName)
+        ) {
+            confirmAsync(orderEnabled)
+        } else {
+            setOrderEnable(false)
+            alert(`请先配置必要信息`)
+        }
+    }
+
+    const handleTestNotification = () => {
+        if (typeof chrome !== 'undefined' && chrome?.tabs) {
+            // @ts-ignore
+            chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+                chrome.tabs.sendMessage(tabs[0].id, {
+                    data: 'playSystemNotification',
+                    voiceInfo: config?.voiceInfo || {},
+                })
+            })
+            chrome.runtime.sendMessage()
+        }
+
+        console.log(`chrome?.runtime`, chrome?.tabs)
+    }
+
+    return (
+        <div className="mx-auto mt-1 mb-2 w-[18rem] h-[15rem]">
+            <main className="flex w-fit flex-col items-center gap-2 justify-between py-3 px-2 mx-auto mb-2 mt-2">
+                <div className="flex w-full gap-3 justify-center py-1 mb-2 bg-white border-b border-solid border-slate-300">
+                    <div
+                        className={`flex w-40 h-9 ${'bg-indigo-600 cursor-pointer'} bg-opacity-90 border border-indigo-500 rounded-md my-2 items-center align-middle justify-center text-center min-w-min px-3 hover:shadow-md hover:bg-indigo-500`}
+                        onClick={handleTestNotification}
+                    >
+                        <SVGPlay className="w-5 h-5 mr-2" />
+                        通知测试
+                    </div>
+                </div>
+                <div className="flex flex-row gap-3 h-10 justify-between mb-2 px-4 py-6 rounded-xl bg-slate-100">
+                    <div className="flex text-gray-600 items-center text-base font-bold">开启自动抢购</div>
+                    <SelectItem
+                        enabled={orderEnabled}
+                        index={0}
+                        callback={({ enabled }) => {
+                            setOrderEnable(enabled)
+                        }}
+                    />
+                </div>
+            </main>
+            <div className="w-full flex flex-row justify-center text-center items-center gap-5 text-sm">
+                <div
+                    className={`flex w-1/3 h-9 bg-white text-indigo-500 cursor-pointer bg-opacity-90 border-4 border-t-2 border-indigo-500 rounded-3xl my-2 items-center align-middle justify-center text-center min-w-min px-3 hover:shadow-md hover:border-t-[3px] hover:border-b-[3px]`}
+                    onClick={handleOptionClick}
+                >
+                    配置
+                </div>
+                <div
+                    className={`flex w-1/3 h-9 ${'bg-indigo-600 cursor-pointer'} bg-opacity-90 border border-indigo-500 rounded-3xl my-2 items-center align-middle justify-center text-center min-w-min px-3 hover:shadow-md hover:bg-indigo-500`}
+                    onClick={handleConfirm}
+                >
+                    确认
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Popup
+
+interface ISelectItemProps {
+    enabled?: boolean
+    index: number
+    callback: ({ enabled }: { enabled: boolean }) => void
+}
+const SelectItem = ({ enabled, callback }: ISelectItemProps) => {
+    const handleToggle = () => {
+        callback({
+            enabled: !enabled,
+        })
+    }
+    return (
+        <div className="flex flex-row gap-6">
+            <div className="w-20 flex-col justify-center items-end gap-1.5 inline-flex">
+                {enabled ? (
+                    <div
+                        className="w-14 h-7 bg-indigo-600  bg-opacity-70 rounded-2xl  py-0.5 px-[0.2rem] flex relative cursor-pointer ease-linear duration-500 shadow-indigo-500/50 shadow-md"
+                        onClick={handleToggle}
+                    >
+                        <div className="w-6 h-6 bg-gray-100 rounded-full pt-1 pb-2 px-1 ease-linear duration-300 ml-[1.65rem]"></div>
+                    </div>
+                ) : (
+                    <div
+                        className="w-14 h-7 bg-slate-400 bg-opacity-50 rounded-2xl py-0.5 px-[0.2rem] flex relative cursor-pointer ease-linear duration-500 shadow-slate-500/50 shadow-md"
+                        onClick={handleToggle}
+                    >
+                        <div className="w-6 h-6 bg-gray-100 rounded-full pt-1 pb-2  px-1 ease-linear duration-300 ml-0"></div>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+interface ICondirmLoadProps {
+    callback?: (msg: string) => void
+}
+const confirmLoad = async ({ callback }: ICondirmLoadProps) => {
+    let msg = ``
+    if (typeof chrome === 'undefined' || !chrome?.tabs) {
+        msg = 'Please use as chrome extension'
+        callback && callback(msg)
+        return
+    }
+
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
+    const tabUrl = (tab?.url || '').toLowerCase()
+    const urlObj = new URL(tabUrl)
+    const isInMatchUrl = urlObj.href.includes(Match_URL)
+
+    if (isInMatchUrl) {
+        chrome.tabs.reload(tab.id)
+        return
+    }
+}
+
+const confirmAsync = async (orderEnabled: boolean) => {
+    await saveToStorage(orderEnabled, storeKeys.orderEnabled)
+    window.close()
+}

package/app/(pages)/tips/page.tsx

@@ -0,0 +1,40 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { iframeMessagePass } from '@/app/shared/constants'
+
+const Tips = () => {
+    const [fetchCount, setFetchCount] = useState(0)
+    const [beforeReload, setBeforeReload] = useState(50)
+    useEffect(() => {
+        window.addEventListener('message', function (event) {
+            if (event.data.action === iframeMessagePass.messageAction) {
+                setFetchCount(event.data.count)
+                setBeforeReload(event.data.beforeReload)
+            }
+        })
+    }, [])
+
+    const bgTransparent = `body{background: transparent}`
+    if (!fetchCount)
+        return (
+            <div>
+                <style>{bgTransparent}</style>
+            </div>
+        )
+    return (
+        <main className="flex w-52 h-fit flex-col  text-gray-700 items-center gap-1 px-2  justify-between py-2 mx-auto rounded-lg bg-slate-100 text-base font-bold cursor-pointer shadow-slate-500/50  shadow-lg">
+            <style>{bgTransparent}</style>
+            <div className="flex flex-row gap-0 h-8 items-center justify-center py-2 ">
+                <div className="  ">
+                    当前正在重试：
+                    <span className=" text-indigo-700">{fetchCount > 9 ? fetchCount : '0' + fetchCount}</span>次
+                </div>
+            </div>
+            <div className="flex flex-row h-8">
+                <span className="text-indigo-700">{beforeReload}</span>次之后将刷新页面
+            </div>
+        </main>
+    )
+}
+
+export default Tips

package/app/components/DropListBox.tsx

@@ -0,0 +1,157 @@
+'use client'
+import { Fragment, useEffect, useState } from 'react'
+import { Listbox, Transition } from '@headlessui/react'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'
+import { find as _find } from 'lodash'
+
+type DropItem = {
+    id: number | string
+    name: string
+    icon?: string
+} & Record<string, any>
+
+interface IDropListBoxProps {
+    domID?: string
+    title?: string
+    itemList: Array<DropItem>
+    selectedIndex?: number
+
+    callback?: (item: DropItem) => void
+}
+export default function DropListBox({ domID, title, itemList, selectedIndex, callback }: IDropListBoxProps) {
+    const [selected, setSelected] = useState(itemList[selectedIndex || 0])
+
+    const handleSelect = (item: DropItem) => {
+        setSelected(item)
+        if (callback) callback(item)
+    }
+
+    // useEffect(() => {
+    //     let newItem: DropItem
+    //     if (selectedIndex !== undefined) {
+    //         newItem = itemList[selectedIndex]
+    //     } else {
+    //         newItem = itemList[0]
+    //     }
+    //     setSelected(newItem)
+    //     if (callback) callback(newItem)
+    // }, [itemList, selectedIndex])
+
+    // useEffect(() => {
+    //     console.log(`selectedIndex`, selectedIndex)
+    //     // 当之前的selected对象在新的itemList中存在时，不做处理
+    //     if(!_find(itemList, _item=>{
+    //         return _item.id == selected.id && _item.name == selected.name
+    //     })){
+    //         let newItem: DropItem
+    //         if (selectedIndex !== undefined && itemList[selectedIndex]) {
+    //             newItem = itemList[selectedIndex]
+    //         }else{
+    //             newItem = itemList[0]
+    //         }
+    //         setSelected(newItem)
+    //         if (callback) callback(newItem)
+    //     }
+    // }, [itemList])
+
+    useEffect(() => {
+        if (selectedIndex && itemList[selectedIndex]) {
+            setSelected(itemList[selectedIndex])
+        }
+    }, [selectedIndex])
+
+    useEffect(() => {
+        // 表示itemList已经变更
+        if (
+            !_find(itemList, _item => {
+                return _item.id == selected.id && _item.name == selected.name
+            })
+        ) {
+            let newItem: DropItem = (selectedIndex !== undefined ? itemList[selectedIndex] : itemList[0]) || itemList[0]
+            setSelected(newItem)
+        }
+    }, [itemList])
+
+    return (
+        <Listbox value={selected} onChange={handleSelect}>
+            {({ open }) => (
+                <>
+                    {title ? (
+                        <Listbox.Label className="block text-sm font-medium leading-6 text-gray-900">
+                            {title}
+                        </Listbox.Label>
+                    ) : null}
+                    <div className="relative mt-2">
+                        <Listbox.Button
+                            id={domID || ''}
+                            className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm sm:leading-6"
+                        >
+                            <span className="flex items-start">
+                                {selected?.icon ? (
+                                    <img src={selected.icon} alt="" className="h-5 w-5 flex-shrink-0 rounded-full" />
+                                ) : null}
+                                <span className=" block truncate h-6">{selected.name}</span>
+                            </span>
+                            <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
+                                <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                            </span>
+                        </Listbox.Button>
+
+                        <Transition
+                            show={open}
+                            as={Fragment}
+                            leave="transition ease-in duration-100"
+                            leaveFrom="opacity-100"
+                            leaveTo="opacity-0"
+                        >
+                            <Listbox.Options className="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                                {itemList.map(item => (
+                                    <Listbox.Option
+                                        key={item.id}
+                                        className={({ active }) =>
+                                            `${
+                                                active ? 'bg-indigo-600 text-white' : 'text-gray-900'
+                                            } relative cursor-default select-none py-2 pl-3 pr-9`
+                                        }
+                                        value={item}
+                                    >
+                                        {({ selected, active }) => (
+                                            <>
+                                                <div className="flex items-center">
+                                                    {item.icon ? (
+                                                        <img
+                                                            src={item.icon}
+                                                            alt=""
+                                                            className="h-5 w-5 flex-shrink-0 rounded-full"
+                                                        />
+                                                    ) : null}
+                                                    <span
+                                                        className={`${
+                                                            selected ? 'font-semibold' : 'font-normal'
+                                                        } 'ml-3 block truncate`}
+                                                    >
+                                                        {item.name}
+                                                    </span>
+                                                </div>
+
+                                                {selected ? (
+                                                    <span
+                                                        className={`${
+                                                            active ? 'text-white' : 'text-indigo-600'
+                                                        } absolute inset-y-0 right-0 flex items-center pr-4`}
+                                                    >
+                                                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                                    </span>
+                                                ) : null}
+                                            </>
+                                        )}
+                                    </Listbox.Option>
+                                ))}
+                            </Listbox.Options>
+                        </Transition>
+                    </div>
+                </>
+            )}
+        </Listbox>
+    )
+}

package/app/components/SVGPlay.tsx

@@ -0,0 +1,14 @@
+const SVGPlay = ({ className }: { className?: string }) => {
+    const svgTest = `
+    <svg width="64" height="64" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#ffffff" d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM7 6l8 4l-8 4V6z"/>
+    </svg>
+    `
+
+    const base64String = btoa(svgTest)
+
+    const imgSrc = `data:image/svg+xml;base64,${base64String}`
+    return <img src={imgSrc} className={className || ''} />
+}
+
+export default SVGPlay

package/app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 255, 255, 255;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 255, 255, 255;
+    --background-end-rgb: 255, 255, 255;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

package/app/layout.tsx

@@ -0,0 +1,15 @@
+import './globals.css'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+    title: 'iPhoneOrder',
+    description: 'iPhoneOrder',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en">
+            <body className={''}>{children}</body>
+        </html>
+    )
+}

package/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+    return <main className="flex min-h-screen flex-col items-center justify-between p-24"></main>
+}