mirror of
https://github.com/ArvinLovegood/go-stock.git
synced 2025-07-19 00:00:09 +08:00
feat(frontend):添加股票分组菜单功能并优化路由
- 在 App.vue 中添加股票分组列表,动态生成分组选项 - 更新路由配置,使用 createWebHistory替代 createWebHashHistory - 在 stock.vue 中添加分组切换逻辑,支持通过路由和事件切换分组
This commit is contained in:
parent
99b6586c77
commit
c7e37e039e
@ -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)=>{
|
||||||
|
@ -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" >
|
||||||
|
@ -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,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user