refactor(frontend): 优化股票组件功能和布局

-调整了固定按钮的位置和样式
- 优化了股票搜索和添加功能的布局
- 移除了不必要的控制台日志输出- 调整了事件处理
This commit is contained in:
spark 2025-01-07 11:11:07 +08:00
parent 975ad611df
commit 9a41560bee

View File

@ -1,17 +1,18 @@
<script setup> <script setup>
import {onBeforeMount, onBeforeUnmount, onMounted, reactive, ref} from 'vue' import {onBeforeMount, onBeforeUnmount, onMounted, reactive, ref} from 'vue'
import { import {
Greet,
Follow, Follow,
UnFollow,
GetFollowList, GetFollowList,
GetStockList, GetStockList,
Greet,
SendDingDingMessage,
SetAlarmChangePercent,
SetCostPriceAndVolume, SetCostPriceAndVolume,
SendDingDingMessage, SetAlarmChangePercent UnFollow
} from '../../wailsjs/go/main/App' } from '../../wailsjs/go/main/App'
import {NButton, NFlex, NForm, NFormItem, NInputNumber, NText, useMessage, useModal} from 'naive-ui' import {NButton, NFlex, NForm, NFormItem, NInputNumber, NText, useMessage, useModal} from 'naive-ui'
import { WindowFullscreen,WindowUnfullscreen,EventsOn } from '../../wailsjs/runtime' import {EventsOn, WindowFullscreen, WindowUnfullscreen} from '../../wailsjs/runtime'
import {Add, StarOutline} from '@vicons/ionicons5' import {Add, Search} from '@vicons/ionicons5'
const message = useMessage() const message = useMessage()
const modal = useModal() const modal = useModal()
@ -69,7 +70,7 @@ onBeforeMount(()=>{
onMounted(() => { onMounted(() => {
message.loading("Loading...") message.loading("Loading...")
console.log(`the component is now mounted.`) // console.log(`the component is now mounted.`)
ticker.value=setInterval(() => { ticker.value=setInterval(() => {
if(isTradingTime()){ if(isTradingTime()){
@ -77,11 +78,10 @@ onMounted(() => {
data.fenshiURL='http://image.sinajs.cn/newchart/min/n/'+data.code+'.gif'+"?t="+Date.now() data.fenshiURL='http://image.sinajs.cn/newchart/min/n/'+data.code+'.gif'+"?t="+Date.now()
} }
}, 3500) }, 3500)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
console.log(`the component is now unmounted.`) // console.log(`the component is now unmounted.`)
clearInterval(ticker.value) clearInterval(ticker.value)
}) })
@ -143,7 +143,7 @@ function AddStock(){
function removeMonitor(code,name) { function removeMonitor(code,name) {
console.log("removeMonitor",name,code) // console.log("removeMonitor",name,code)
stocks.value.splice(stocks.value.indexOf(code),1) stocks.value.splice(stocks.value.indexOf(code),1)
delete results.value[name] delete results.value[name]
UnFollow(code).then(result => { UnFollow(code).then(result => {
@ -152,9 +152,9 @@ function removeMonitor(code,name) {
} }
function getStockList(value){ function getStockList(value){
console.log("getStockList",value) // console.log("getStockList",value)
let result; let result;
result=stockList.value.filter(item => item.name.includes(data.name)||item.ts_code.includes(data.name)) result=stockList.value.filter(item => item.name.includes(value)||item.ts_code.includes(value))
options.value=result.map(item => { options.value=result.map(item => {
return { return {
label: item.name+" - "+item.ts_code, label: item.name+" - "+item.ts_code,
@ -215,7 +215,7 @@ async function monitor() {
} }
} }
function onSelect(item) { function onSelect(item) {
console.log("onSelect",item) //console.log("onSelect",item)
if(item.indexOf("-")>0){ if(item.indexOf("-")>0){
item=item.split("-")[1].toLowerCase() item=item.split("-")[1].toLowerCase()
@ -233,7 +233,7 @@ function search(code,name){
} }
function setStock(code,name){ function setStock(code,name){
let res=followList.value.filter(item => item.StockCode===code) let res=followList.value.filter(item => item.StockCode===code)
console.log("res:",res) //console.log("res:",res)
formModel.value.name=name formModel.value.name=name
formModel.value.code=code formModel.value.code=code
formModel.value.volume=res[0].Volume formModel.value.volume=res[0].Volume
@ -314,6 +314,11 @@ function SendMessage(result){
SendDingDingMessage(msg,result["股票代码"]) SendDingDingMessage(msg,result["股票代码"])
} }
//
function getHeight() {
return document.documentElement.clientHeight
}
</script> </script>
<template> <template>
@ -362,19 +367,19 @@ function SendMessage(result){
</n-card > </n-card >
</n-gi> </n-gi>
</n-grid> </n-grid>
<n-affix :trigger-bottom="60" v-if="addBTN"> <n-affix :trigger-bottom="getHeight()/2-10" style="left:0">
<!-- <n-card :bordered="false">--> <!-- <n-card :bordered="false">-->
<n-input-group> <n-input-group>
<n-button type="info" @click="addBTN=false" >隐藏</n-button> <n-button type="error" @click="addBTN=!addBTN" > <n-icon :component="Search"/>&nbsp;<n-text v-if="addBTN">隐藏</n-text></n-button>
<n-auto-complete v-model:value="data.name" <n-auto-complete v-model:value="data.name" v-if="addBTN"
:input-props="{ :input-props="{
autocomplete: 'disabled', autocomplete: 'disabled',
}" }"
:options="options" :options="options"
placeholder="请输入股票/指数名称或者代码" placeholder="请输入股票/指数名称或者代码"
clearable @update-value="getStockList" :on-select="onSelect"/> clearable @update-value="getStockList" :on-select="onSelect"/>
<n-button type="primary" @click="AddStock"> <n-button type="primary" @click="AddStock" v-if="addBTN">
<n-icon :component="Add"/> &nbsp;关注该股票 <n-icon :component="Add"/> &nbsp;关注该股票
</n-button> </n-button>
</n-input-group> </n-input-group>