Merge pull request #6 from stormckey/master

Better build, better linux support and enable coin

src-tauri/src/main.rs

@@ -3,7 +3,7 @@
     windows_subsystem = "windows"
 )]
 
- 
+#[allow(unused_imports)]
 use window_shadows::set_shadow;
 
 use tauri::{Manager, Runtime, Window};
@@ -22,7 +22,7 @@ fn main() {
             #[cfg(target_os = "macos")]
             win.set_transparent_titlebar(true, true);
 
-
+            #[cfg(any(target_os = "macos", target_os = "windows"))]
             set_shadow(&win, true).unwrap();
             // 监听更新消息
             win.listen("tauri://update-status".to_string(), move |msg| {
@@ -69,12 +69,12 @@ fn main() {
 }
 #[cfg(target_os = "macos")]
 use cocoa::appkit::{NSWindow, NSWindowStyleMask, NSWindowTitleVisibility};
- 
+
 pub trait WindowExt {
     #[cfg(target_os = "macos")]
     fn set_transparent_titlebar(&self, title_transparent: bool, remove_toolbar: bool);
 }
- 
+
 impl<R: Runtime> WindowExt for Window<R> {
     #[cfg(target_os = "macos")]
     fn set_transparent_titlebar(&self, title_transparent: bool, remove_tool_bar: bool) {

src-tauri/tauri.conf.json

@@ -6,8 +6,8 @@
   "build": {
     "distDir": "../dist",
     "devPath": "http://localhost:5173",
-    "beforeDevCommand": "",
-    "beforeBuildCommand": ""
+    "beforeDevCommand": "yarn dev",
+    "beforeBuildCommand": "yarn build"
   },
   "tauri": {
     "systemTray": {

src/App.tsx

@@ -6,20 +6,26 @@ import BottomBar from "./component/menubar/bottomBar"
 import {
   useRecoilValue,
 } from "recoil"
-import { stocksState } from "./component/state"
+import { stocksState, showExchange } from "./component/state"
 import Modal from "./component/modal/modal"
 import { saveStockToStore } from "./component/util"
 
 const IndexStock = {
   '上证指数': 'SH000001',
   '深证成指': 'SZ399001',
   '创业板指': 'SZ399006',
+  '纳斯达克': '.IXIC',
+  '道琼斯': '.DJI',
+  '标普': '.INX'
 }
 
 const stockIndex = [
-  IndexStock.上证指数,
   IndexStock.深证成指,
+  IndexStock.上证指数,
   IndexStock.创业板指,
+  IndexStock.道琼斯,
+  IndexStock.纳斯达克,
+  IndexStock.标普,
 ]
 
 export interface Modal {
@@ -30,16 +36,26 @@ export interface Modal {
 
 
 function App() {
+  const showExchangeValue = useRecoilValue(showExchange)
   const [stockDetails, setStockDetails] = useState<StockDetail[]>()
   const stocks = useRecoilValue(stocksState)
+  const [topStocks, setTopStocks] = useState<StockDetail[]>()
+
+  const useUSATop = (): boolean =>
+    showExchangeValue.includes('NYSE')
+
 
   useEffect(() => {
     const getData = async () => {
       try {
         let stocksSearch = []
-        stocksSearch.unshift(...stockIndex, ...stocks.map(stock => stock.symbol))
+        stocksSearch.unshift(...stocks.map(stock => stock.symbol))
+        console.log(stocks)
         const info = await getStocks(stocksSearch)
+        if (!info) return
         setStockDetails(info)
+        const top = await getStocks(stockIndex)
+        setTopStocks(top)
         await saveStockToStore(stocks)
       } catch (e) {
       }
@@ -52,10 +68,14 @@ function App() {
 
   return (
     <div className="flex flex-col z-0 h-4">
-      <TopIndex stocks={stockDetails?.slice(0, 3)}></TopIndex>
-      <StockList stocks={stockDetails?.slice(3)} ></StockList>
+      <TopIndex stocks={useUSATop() ? topStocks?.slice(3, 6) : topStocks?.slice(0, 3)}></TopIndex>
+      <StockList stocks={stockDetails?.filter(stock =>
+        showExchangeValue.some(exchange =>
+          stock.exchange.includes(exchange)
+        )
+      )} ></StockList>
       <Modal></Modal>
-      <BottomBar stock={stockDetails ? stockDetails[0] : undefined} ></BottomBar>
+      <BottomBar stock={topStocks ? (useUSATop() ? topStocks[3] : topStocks[0]) : undefined} ></BottomBar>
     </div >
   )
 }

src/api/xueqiu/api.ts

@@ -18,6 +18,7 @@ export interface StockDetail {
     volume_ratio: number,
     limit_up: number
     limit_down: number
+    exchange: string
 }
 
 export interface StockMini {
@@ -28,7 +29,7 @@ export interface StockMini {
 let token: string = ''
 
 export async function getToken(): Promise<string> {
-    if (token !== '') return token
+    if (token) return token
 
     const res = await fetch('https://xueqiu.com/', {
         method: "GET",
@@ -43,7 +44,7 @@ export async function getToken(): Promise<string> {
 }
 
 export async function getStocks(code: string[]): Promise<StockDetail[] | undefined> {
-    if (code.length === 0) return []
+    if (!code) return []
 
     const token = await getToken()
 
@@ -56,7 +57,7 @@ export async function getStocks(code: string[]): Promise<StockDetail[] | undefin
         res = await fetch<XueqiuResp>(url, {
             method: "GET",
             headers: {
-                'Cookie': await getToken()
+                'Cookie': token
             }
         })
         return res.data.data.items.map(item => {
@@ -78,6 +79,7 @@ export async function getStocks(code: string[]): Promise<StockDetail[] | undefin
                 volume_ratio: quote.volume_ratio!,
                 limit_up: quote.limit_up!,
                 limit_down: quote.limit_down!,
+                exchange: quote.exchange
             }
             return stock
         })
@@ -98,16 +100,10 @@ export async function searchStocks(key: string): Promise<StockMini[] | undefined
         res = await fetch<XueqiuSearchResp>(url, {
             method: "GET",
             headers: {
-                'Cookie': await getToken()
+                'Cookie': token
             }
         })
-        return res.data.stocks.filter((item => {
-            if (item.code.includes("SH") || item.code.includes("SZ")) {
-                return true
-            }
-        })
-
-        ).map(item => {
+        return res.data.stocks.map(item => {
             const stock: StockMini = {
                 name: item.name,
                 symbol: item.code,

src/component/menubar/bottomBar.tsx

@@ -1,63 +1,54 @@
 import { useState } from "react"
 import { StockDetail } from "../../api/xueqiu/api"
-import dollar from '../../assets/dollar.svg'
 import { getTips } from "../util"
-import { openCoinState, openSearchState, openSettingState } from "../state"
-import { useRecoilState, } from 'recoil'
+import { useRecoilState } from 'recoil'
 import stockmanSvg from '../../assets/stockman2.svg'
+import configSvg from '../../assets/config.svg'
+import { modalState } from "../state"
 
-export default function ButtomBar({ stock }: { stock: StockDetail | undefined }) {
+export default function BottomBar({ stock }: { stock: StockDetail | undefined }) {
+    const [modalStateValue, setModalState] = useRecoilState(modalState)
     const [tips, setTips] = useState('')
     const [displayText, displayClass] = getTips(tips, stock)
-    const [openSearch, setOpenSearch] = useRecoilState(openSearchState)
-    const [openSetting, setOpenSetting] = useRecoilState(openSettingState)
-    const [openCoin, setOpenCoin] = useRecoilState(openCoinState)
-
     return (
         <div className="flex flex-row bg-stone-200 h-12 w-full absolute bottom-0">
             <div className="flex ml-4 my-auto ">
                 <button
                     type="button" className={`items-center p-1  active:ring active:ring-amber-400  rounded-full select-none `}
                     onClick={() => {
-                        setOpenCoin((value) => !value)
-                        setOpenSetting(false)
-                        setOpenSearch(false)
+                        setModalState((value) => value === 'coin' ? null : 'coin')
                     }}
                 >
                     <img src={stockmanSvg} className="w-7 h-7 select-none" />
                 </button>
             </div>
 
             <div
-                className="w-4/5 h-full flex"
+                className="w-4/5 h-full flex-grow flex"
             >
                 <button
                     type="button"
                     onMouseOver={() => { setTips('添加自选') }}
                     onMouseOut={() => { setTips('') }}
                     onClick={() => {
-                        setOpenSearch((value) => !value)
-                        setOpenSetting(false)
-                        setOpenCoin(false)
+                        setModalState((value) => value === 'search' ? null : 'search')
                     }}
-                    className={`shadow mx-auto w-4/5 whitespace-nowrap px-5 py-1 my-auto  hover:bg-blue-600/80 text-white  font-medium rounded-md text-sm  text-center items-center ${displayClass} ${openSearch ? "bg-blue-600/80 " : ""}`}
+                    className={`shadow mx-auto w-4/5 whitespace-nowrap px-5 py-1 my-auto  hover:bg-blue-600/80 text-white  font-medium rounded-md text-sm  text-center items-center ${displayClass} ${modalStateValue === 'search' ? "bg-blue-600/80 " : ""}`}
                 >
-                    {openSearch ? "添加自选" : displayText}
+                    {modalStateValue === 'search' ? "添加自选" : displayText}
                 </button>
             </div>
 
-            <button
-                type="button"
-                onClick={() => {
-                    setOpenSetting((value) => !value)
-                    setOpenCoin(false)
-                    setOpenSearch(false)
-                }}
-                className={`h-8 w-8 my-auto mr-4 ml-auto  rounded-full hover:text-blue-700/90  hover:shadow active:shadow active:shadow-neutral-500 ${openSetting ? "text-blue-700/90 shadow" : "text-gray-900/80"}`}>
-                <svg xmlns="http://www.w3.org/2000/svg" className=" " viewBox="0 0 20 20" fill="currentColor">
-                    <path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
-                </svg>
-            </button>
+            <div className="flex mr-4 my-auto ">
+                <button
+                    type="button" className={`items-center p-1  active:ring active:ring-amber-400  rounded-full select-none `}
+                    onClick={() => {
+                        setModalState((value) => value === 'setting' ? null : 'setting')
+                    }}
+                >
+                    <img src={configSvg} className="w-7 h-7 select-none" />
+                </button>
+            </div>
         </div >
     )
 }

src/component/menubar/stockList.tsx

@@ -2,7 +2,7 @@ import { useState } from "react"
 import { StockDetail } from "../../api/xueqiu/api"
 import { getBackgoundClass, getTextClassByDiff, openXueqiu } from '../util'
 
-import { backgroundBlurState, openCoinState, openSearchState, openSettingState, stocksState, StockStatus } from "../state"
+import { backgroundBlurState, modalState, stocksState, StockStatus } from "../state"
 import {
     useSetRecoilState,
     useRecoilValue,
@@ -11,20 +11,14 @@ import {
 import StockExpand from "./stockExpand"
 
 export default function StockList({ stocks: stockDetails }: { stocks: StockDetail[] | undefined }) {
-    const setOpenSearch = useSetRecoilState(openSearchState)
-    const setOpenSetting = useSetRecoilState(openSettingState)
-    const setOpenCoin = useSetRecoilState(openCoinState)
     const backgroundBlur = useRecoilValue(backgroundBlurState)
+    const setModalState = useSetRecoilState(modalState)
 
     if (stockDetails?.length === 0) {
         return (
             <div
                 className={`w-full absolute top-84px bottom-12 overflow-y-auto scrollbar-hide ${backgroundBlur ? 'blur-sm' : ''}`}
-                onClick={() => {
-                    setOpenSearch(false)
-                    setOpenSetting(false)
-                    setOpenCoin(false)
-                }}>
+                onClick={() => setModalState(null)}>
                 <div className="flex flex-col items-center justify-center h-full text-gray-700">
                     <div>
                         <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -41,11 +35,7 @@ export default function StockList({ stocks: stockDetails }: { stocks: StockDetai
         return <StockItem key={stockDetail.symbol} stockDetail={stockDetail} ></StockItem>
     })
     return (
-        <div className={`w-full absolute top-84px bottom-12 overflow-y-auto scrollbar-hide ${backgroundBlur ? 'blur-sm' : ''}`} onClick={() => {
-            setOpenSearch(false)
-            setOpenSetting(false)
-            setOpenCoin(false)
-        }}>
+        <div className={`w-full absolute top-84px bottom-12 overflow-y-auto scrollbar-hide ${backgroundBlur ? 'blur-sm' : ''}`} onClick={() => setModalState(null)}>
             <div className="flex flex-col mt-2 mx-3 divide-y divide-dashed  divide-gray-200 ">
                 {stockDiv}
             </div>

src/component/modal/coin.tsx

@@ -1,15 +1,16 @@
 import { createPortal } from "react-dom"
 import modalDom from "../util"
-import { openCoinState } from "../state"
+import { modalState } from "../state"
+import { showExchange } from "../state"
+import { useSetRecoilState, useRecoilState } from "recoil"
 
 import {
     useRecoilValue,
 } from 'recoil'
 
 export default function CoinModal() {
-    const openCoin = useRecoilValue(openCoinState)
 
-    if (!openCoin) {
+    if (useRecoilValue(modalState) != 'coin') {
         return null
     }
 
@@ -22,21 +23,22 @@ export default function CoinModal() {
 
 
 function Coin() {
+    const [showExchangeValue, setShowExchange] = useRecoilState(showExchange)
 
     return (
         <div className="z-100 bottom-52px rounded-tr-xl absolute overflow-hidden left-0 w-16 bg-neutral-50 shadow ring ring-gray-100 whitespace-nowrap">
             <ul className="text-sm  text-gray-700 ">
                 <li>
-                    <a href="#" className="block  text-center py-2 mx-0.5 px-4 hover:bg-blue-600/80 hover:shadow hover:rounded hover:text-white border-b">A股</a>
+                    <button onClick={() => { setShowExchange(['SH', 'SZ']); console.log(showExchangeValue) }} className="block  text-center py-2 mx-0.5 px-4 hover:bg-blue-600/80 hover:shadow hover:rounded hover:text-white border-b">沪深</button>
                 </li>
                 <li>
-                    <a href="#" className="block  text-center py-2 mx-0.5 px-4 hover:bg-blue-600/80 hover:shadow hover:rounded hover:text-white border-b">港股</a>
+                    <button onClick={() => { setShowExchange(['NYSE', 'NASDAQ']); console.log(showExchangeValue) }} className="block  text-center py-2 mx-0.5 px-4 hover:bg-blue-600/80 hover:shadow hover:rounded hover:text-white border-b">美股</button>
                 </li>
                 <li >
-                    <a href="#" className="block  text-center py-2 mx-0.5 px-4 hover:bg-blue-600/80 hover:shadow hover:rounded hover:text-white">美股</a>
+                    <button onClick={() => { setShowExchange(['F']); console.log(showExchangeValue) }} className="block  text-center py-2 mx-0.5 px-4 hover:bg-blue-600/80 hover:shadow hover:rounded hover:text-white">基金</button>
                 </li>
                 <li >
-                    <a href="#" className="block  text-center py-2 mx-0.5 px-4 hover:bg-blue-600/80 hover:shadow hover:rounded hover:text-white">币市</a>
+                    <button onClick={() => { setShowExchange(['']); console.log(showExchangeValue) }} className="block  text-center py-2 mx-0.5 px-4 hover:bg-blue-600/80 hover:shadow hover:rounded hover:text-white">全部</button>
                 </li>
             </ul>
         </div>