feat(frontend):添加股票分组菜单功能并优化路由

- 在 App.vue 中添加股票分组列表,动态生成分组选项
- 更新路由配置,使用 createWebHistory替代 createWebHashHistory
- 在 stock.vue 中添加分组切换逻辑,支持通过路由和事件切换分组
This commit is contained in:
ArvinLovegood 2025-05-09 23:43:51 +08:00
parent 99b6586c77
commit c7e37e039e
3 changed files with 115 additions and 18 deletions

View File

@ -10,14 +10,17 @@ import {
} from '../wailsjs/runtime' } from '../wailsjs/runtime'
import {h, onBeforeMount, onMounted, ref} from "vue"; import {h, onBeforeMount, onMounted, ref} from "vue";
import { RouterLink } from 'vue-router' import { RouterLink } from 'vue-router'
import {darkTheme, NGradientText, NIcon, NText,} from 'naive-ui' import {darkTheme, NButton, NGradientText, NIcon, NText,} from 'naive-ui'
import { import {
SettingsOutline, SettingsOutline,
ReorderTwoOutline, ReorderTwoOutline,
ExpandOutline, ExpandOutline,
PowerOutline, LogoGithub, MoveOutline, WalletOutline, StarOutline, AlarmOutline, SparklesOutline, NewspaperOutline, PowerOutline, LogoGithub, MoveOutline, WalletOutline, StarOutline, AlarmOutline, SparklesOutline, NewspaperOutline,
} from '@vicons/ionicons5' } from '@vicons/ionicons5'
import {GetConfig} from "../wailsjs/go/main/App"; import {GetConfig, GetGroupList} from "../wailsjs/go/main/App";
import { useRouter } from 'vue-router'
const router = useRouter()
const enableNews= ref(false) const enableNews= ref(false)
const contentStyle = ref("") const contentStyle = ref("")
const enableFund = ref(false) const enableFund = ref(false)
@ -28,6 +31,7 @@ const activeKey = ref('')
const containerRef= ref({}) const containerRef= ref({})
const realtimeProfit= ref(0) const realtimeProfit= ref(0)
const telegraph= ref([]) const telegraph= ref([])
const groupList=ref([])
const menuOptions = ref([ const menuOptions = ref([
{ {
label: () => label: () =>
@ -36,6 +40,10 @@ const menuOptions = ref([
{ {
to: { to: {
name: 'stock', name: 'stock',
query: {
groupName: '全部',
groupId: 0,
},
params: { params: {
}, },
} }
@ -46,12 +54,36 @@ const menuOptions = ref([
icon: renderIcon(StarOutline), icon: renderIcon(StarOutline),
children:[ children:[
{ {
label: ()=> h(NText, {type:realtimeProfit.value>0?'error':'success'},{ default: () => '当日盈亏 '+realtimeProfit.value+"¥"}), label: () =>
key: 'realtimeProfit', h(
show: realtimeProfit.value, 'a',
icon: renderIcon(WalletOutline), {
}, href: '#',
] type: 'info',
onClick: ()=>{
//console.log("push",item)
router.push({
name: 'stock',
query: {
groupName: '全部',
groupId: 0,
},
})
EventsEmit("changeTab", {ID:0,name:'全部'})
},
to: {
name: 'stock',
query: {
groupName: '全部',
groupId: 0,
},
}
},
{ default: () => '全部',}
),
key: 0,
}
],
}, },
{ {
label: () => label: () =>
@ -214,8 +246,53 @@ window.onerror = function (msg, source, lineno, colno, error) {
}; };
onBeforeMount(()=>{ onBeforeMount(()=>{
GetGroupList().then(result => {
groupList.value=result
menuOptions.value.map((item)=>{
//console.log(item)
if(item.key==='stock'){
item.children.push(...groupList.value.map(item=>{
return {
label: () =>
h(
'a',
{
href: '#',
type: 'info',
onClick: ()=>{
//console.log("push",item)
router.push({
name: 'stock',
query: {
groupName: item.name,
groupId: item.ID,
},
})
setTimeout(()=>{
EventsEmit("changeTab", item)
},100)
},
to: {
name: 'stock',
query: {
groupName: item.name,
groupId: item.ID,
},
}
},
{ default: () => item.name,}
),
key: item.ID,
}
}))
}
})
})
GetConfig().then((res)=>{ GetConfig().then((res)=>{
console.log(res) //console.log(res)
enableFund.value=res.enableFund enableFund.value=res.enableFund
menuOptions.value.filter((item)=>{ menuOptions.value.filter((item)=>{

View File

@ -56,6 +56,10 @@ import {asBlob} from 'html-docx-js-typescript';
import vueDanmaku from 'vue3-danmaku' import vueDanmaku from 'vue3-danmaku'
import {keys, pad, padStart} from "lodash"; import {keys, pad, padStart} from "lodash";
import {models} from "../../wailsjs/go/models"; import {models} from "../../wailsjs/go/models";
import {RouterLink} from "vue-router";
import { useRoute } from 'vue-router'
const route = useRoute()
const danmus = ref([]) const danmus = ref([])
const ws = ref(null) const ws = ref(null)
const dialog = useDialog() const dialog = useDialog()
@ -122,7 +126,12 @@ const data = reactive({
changePercent:0 changePercent:0
}) })
const feishiInterval= ref(null) const feishiInterval= ref(null)
const currentGroupId=ref(0) const currentGroupId=ref(0)
const theme=computed(() => { const theme=computed(() => {
return data.darkTheme ? 'dark' : 'light' return data.darkTheme ? 'dark' : 'light'
}) })
@ -155,9 +164,13 @@ const groupResults=computed(() => {
}) })
onBeforeMount(()=>{ onBeforeMount(()=>{
GetGroupList().then(result => { GetGroupList().then(result => {
groupList.value=result groupList.value=result
if(route.query.groupId){
message.success("切换分组:"+route.query.groupName)
currentGroupId.value=Number(route.query.groupId)
console.log("route.params",route.query)
}
}) })
GetStockList("").then(result => { GetStockList("").then(result => {
stockList.value = result stockList.value = result
@ -304,6 +317,12 @@ EventsOn("newChatStream",async (msg) => {
} }
}) })
EventsOn("changeTab" ,async (msg) => {
//console.log("changeTab",msg)
currentGroupId.value=msg.ID
updateTab(currentGroupId.value)
})
EventsOn("updateVersion",async (msg) => { EventsOn("updateVersion",async (msg) => {
const githubTimeStr = msg.published_at; const githubTimeStr = msg.published_at;
@ -473,7 +492,8 @@ function getStockList(value){
function blinkBorder(findId){ function blinkBorder(findId){
// //
const element = document.getElementById(findId); let element = document.getElementById(findId);
console.log("blinkBorder",findId,element)
if (element) { if (element) {
// //
element.scrollIntoView({ behavior: 'smooth'}); element.scrollIntoView({ behavior: 'smooth'});
@ -1552,11 +1572,11 @@ function delStockGroup(code,name,groupId){
</n-gradient-text> </n-gradient-text>
</template> </template>
</vue-danmaku> </vue-danmaku>
<n-tabs style="--wails-draggable:drag" type="card" animated addable @add="addTab" @update-value="updateTab" placement="top" @close="(key)=>{delTab(key)}"> <n-tabs style="--wails-draggable:drag" type="card" animated addable :data-currentGroupId="currentGroupId" :value="currentGroupId" @add="addTab" @update-value="updateTab" placement="top" @close="(key)=>{delTab(key)}">
<n-tab-pane name="0" tab="全部"> <n-tab-pane :name="0" :tab="'全部'">
<n-grid :x-gap="8" :cols="3" :y-gap="8" > <n-grid :x-gap="8" :cols="3" :y-gap="8" >
<n-gi :id="result['股票代码']" v-for="result in sortedResults" style="margin-left: 2px;" > <n-gi :id="result['股票代码']+'_gi'" v-for="result in sortedResults" style="margin-left: 2px;" >
<n-card :data-sort="result.sort" :id="result['股票代码']+'_card'" :data-code="result['股票代码']" :bordered="true" :title="result['股票名称']" :closable="false" @close="removeMonitor(result['股票代码'],result['股票名称'],result.key)"> <n-card :data-sort="result.sort" :id="result['股票代码']" :data-code="result['股票代码']" :bordered="true" :title="result['股票名称']" :closable="false" @close="removeMonitor(result['股票代码'],result['股票名称'],result.key)">
<n-grid :cols="1" :y-gap="6"> <n-grid :cols="1" :y-gap="6">
<n-gi> <n-gi>
<n-text :type="result.type" > <n-text :type="result.type" >

View File

@ -1,4 +1,4 @@
import {createMemoryHistory, createRouter, createWebHashHistory} from 'vue-router' import {createMemoryHistory, createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
import stockView from '../components/stock.vue' import stockView from '../components/stock.vue'
import settingsView from '../components/settings.vue' import settingsView from '../components/settings.vue'
@ -7,7 +7,7 @@ import fundView from "../components/fund.vue";
import market from "../components/market.vue"; import market from "../components/market.vue";
const routes = [ const routes = [
{ path: '/', component: stockView,name: 'stock' }, { path: '/', component: stockView,name: 'stock'},
{ path: '/fund', component: fundView,name: 'fund' }, { path: '/fund', component: fundView,name: 'fund' },
{ path: '/settings', component: settingsView,name: 'settings' }, { path: '/settings', component: settingsView,name: 'settings' },
{ path: '/about', component: about,name: 'about' }, { path: '/about', component: about,name: 'about' },
@ -15,7 +15,7 @@ const routes = [
] ]
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), history: createWebHistory(),
routes, routes,
}) })