新增 Web 浏览端(Go+Vue 报表系统)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fish
13
web/frontend/index.html
Normal file
13
web/frontend/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>期货报告 · Trade</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
26
web/frontend/package.json
Normal file
26
web/frontend/package.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "trade-web-frontend",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.7",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.8.4",
|
||||
"pinia": "^2.2.4",
|
||||
"vue": "^3.5.10",
|
||||
"vue-router": "^4.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.7.4",
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"typescript": "^5.6.2",
|
||||
"vite": "^5.4.8",
|
||||
"vue-tsc": "^2.1.6"
|
||||
}
|
||||
}
|
||||
91
web/frontend/src/App.vue
Normal file
91
web/frontend/src/App.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const showLayout = computed(() => route.meta.layout !== 'blank' && !!auth.token)
|
||||
|
||||
function logout() {
|
||||
auth.logout()
|
||||
router.replace('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-container v-if="showLayout" class="app">
|
||||
<el-aside width="220px" class="aside">
|
||||
<div class="brand">期货报告</div>
|
||||
<el-menu
|
||||
:default-active="route.path"
|
||||
router
|
||||
background-color="#1f2d3d"
|
||||
text-color="#cfd8e3"
|
||||
active-text-color="#ffffff"
|
||||
>
|
||||
<el-menu-item index="/scores">打分列表</el-menu-item>
|
||||
<el-menu-item index="/chart">K 线 / 持仓</el-menu-item>
|
||||
<el-menu-item v-if="auth.isAdmin" index="/admin/users">用户管理</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header class="header">
|
||||
<div class="user">
|
||||
<span>{{ auth.user?.username }}</span>
|
||||
<el-tag size="small" :type="auth.isAdmin ? 'danger' : 'info'">
|
||||
{{ auth.isAdmin ? '管理员' : '普通用户' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button type="primary" link @click="logout">退出登录</el-button>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<router-view v-else />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
.app {
|
||||
height: 100%;
|
||||
}
|
||||
.aside {
|
||||
background: #1f2d3d;
|
||||
color: #cfd8e3;
|
||||
}
|
||||
.brand {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
border-bottom: 1px solid #344558;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.el-menu {
|
||||
border-right: none !important;
|
||||
}
|
||||
</style>
|
||||
19
web/frontend/src/api/auth.ts
Normal file
19
web/frontend/src/api/auth.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import client from './client'
|
||||
import type { AuthUser } from '@/stores/auth'
|
||||
|
||||
export interface LoginResp {
|
||||
token: string
|
||||
user: AuthUser
|
||||
}
|
||||
|
||||
export function login(username: string, password: string) {
|
||||
return client.post<LoginResp>('/login', { username, password }).then((r) => r.data)
|
||||
}
|
||||
|
||||
export function logout() {
|
||||
return client.post('/logout').then((r) => r.data)
|
||||
}
|
||||
|
||||
export function me() {
|
||||
return client.get<AuthUser>('/me').then((r) => r.data)
|
||||
}
|
||||
19
web/frontend/src/api/candles.ts
Normal file
19
web/frontend/src/api/candles.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import client from './client'
|
||||
|
||||
export interface Candle {
|
||||
ts_code: string
|
||||
trade_date: string
|
||||
open: number
|
||||
high: number
|
||||
low: number
|
||||
close: number
|
||||
vol: number
|
||||
amount: number
|
||||
oi: number
|
||||
oi_chg: number
|
||||
pre_close: number
|
||||
}
|
||||
|
||||
export function listCandles(ts_code: string, start?: string, end?: string) {
|
||||
return client.get<Candle[]>('/candles', { params: { ts_code, start, end } }).then((r) => r.data)
|
||||
}
|
||||
34
web/frontend/src/api/client.ts
Normal file
34
web/frontend/src/api/client.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import axios, { type AxiosInstance } from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import router from '@/router'
|
||||
|
||||
const baseURL = import.meta.env.VITE_API_BASE || '/api'
|
||||
|
||||
const client: AxiosInstance = axios.create({ baseURL, timeout: 15_000 })
|
||||
|
||||
client.interceptors.request.use((cfg) => {
|
||||
const auth = useAuthStore()
|
||||
if (auth.token) {
|
||||
cfg.headers = cfg.headers ?? {}
|
||||
cfg.headers.Authorization = `Bearer ${auth.token}`
|
||||
}
|
||||
return cfg
|
||||
})
|
||||
|
||||
client.interceptors.response.use(
|
||||
(resp) => resp,
|
||||
(err) => {
|
||||
const status = err?.response?.status
|
||||
if (status === 401) {
|
||||
const auth = useAuthStore()
|
||||
auth.logout()
|
||||
router.replace({ path: '/login', query: { redirect: router.currentRoute.value.fullPath } })
|
||||
}
|
||||
const msg = err?.response?.data?.error || err.message || '请求失败'
|
||||
if (status !== 401) ElMessage.error(msg)
|
||||
return Promise.reject(err)
|
||||
},
|
||||
)
|
||||
|
||||
export default client
|
||||
65
web/frontend/src/api/scores.ts
Normal file
65
web/frontend/src/api/scores.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import client from './client'
|
||||
|
||||
export interface ShortDetail {
|
||||
trade_date: string
|
||||
close: number
|
||||
pre_close: number
|
||||
oi: number
|
||||
oi_chg: number
|
||||
score: number
|
||||
}
|
||||
|
||||
export interface MediumDetail {
|
||||
price_return_pct: number
|
||||
price_signal: number
|
||||
long_up_days: number
|
||||
long_down_days: number
|
||||
fund_signal: number
|
||||
}
|
||||
|
||||
export interface LongDetail {
|
||||
avg_oi: number
|
||||
oi_before: number
|
||||
change_pct: number
|
||||
}
|
||||
|
||||
export interface ScoreDetail {
|
||||
short_details?: ShortDetail[]
|
||||
medium_detail?: MediumDetail
|
||||
long_detail?: LongDetail
|
||||
}
|
||||
|
||||
export interface Score {
|
||||
id: number
|
||||
ts_code: string
|
||||
trade_date: string
|
||||
close: number
|
||||
oi: number
|
||||
oi_chg: number
|
||||
short_term: number
|
||||
medium_term: number
|
||||
long_term: number
|
||||
composite: number
|
||||
signal: string
|
||||
detail?: ScoreDetail
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface ScoreListParams {
|
||||
ts_code?: string
|
||||
start?: string
|
||||
end?: string
|
||||
limit?: number
|
||||
}
|
||||
|
||||
export function listScores(params: ScoreListParams = {}) {
|
||||
return client.get<Score[]>('/scores', { params }).then((r) => r.data)
|
||||
}
|
||||
|
||||
export function getScore(id: number) {
|
||||
return client.get<Score>(`/scores/${id}`).then((r) => r.data)
|
||||
}
|
||||
|
||||
export function listContracts() {
|
||||
return client.get<string[]>('/contracts').then((r) => r.data)
|
||||
}
|
||||
26
web/frontend/src/api/users.ts
Normal file
26
web/frontend/src/api/users.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import client from './client'
|
||||
|
||||
export interface AdminUser {
|
||||
id: number
|
||||
username: string
|
||||
role: 'admin' | 'user'
|
||||
disabled: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export function listUsers() {
|
||||
return client.get<AdminUser[]>('/admin/users').then((r) => r.data)
|
||||
}
|
||||
|
||||
export function createUser(username: string, password: string, role: 'admin' | 'user' = 'user') {
|
||||
return client.post<AdminUser>('/admin/users', { username, password, role }).then((r) => r.data)
|
||||
}
|
||||
|
||||
export function updateUser(id: number, patch: { password?: string; disabled?: boolean }) {
|
||||
return client.patch<AdminUser>(`/admin/users/${id}`, patch).then((r) => r.data)
|
||||
}
|
||||
|
||||
export function deleteUser(id: number) {
|
||||
return client.delete(`/admin/users/${id}`).then((r) => r.data)
|
||||
}
|
||||
97
web/frontend/src/components/KLineChart.vue
Normal file
97
web/frontend/src/components/KLineChart.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import type { Candle } from '@/api/candles'
|
||||
|
||||
const props = defineProps<{ data: Candle[] }>()
|
||||
|
||||
const containerRef = ref<HTMLDivElement | null>(null)
|
||||
let chart: echarts.ECharts | null = null
|
||||
|
||||
function render() {
|
||||
if (!chart) return
|
||||
const dates = props.data.map((c) => c.trade_date)
|
||||
// ECharts K 线顺序: [open, close, low, high]
|
||||
const ohlc = props.data.map((c) => [c.open, c.close, c.low, c.high])
|
||||
const oi = props.data.map((c) => c.oi)
|
||||
|
||||
chart.setOption(
|
||||
{
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
|
||||
legend: { data: ['K 线', '持仓量'], top: 0 },
|
||||
grid: [
|
||||
{ left: 60, right: 40, top: 40, height: '60%' },
|
||||
{ left: 60, right: 40, top: '78%', height: '18%' },
|
||||
],
|
||||
xAxis: [
|
||||
{ type: 'category', data: dates, scale: true, boundaryGap: false },
|
||||
{ type: 'category', gridIndex: 1, data: dates, scale: true, boundaryGap: false, axisLabel: { show: false } },
|
||||
],
|
||||
yAxis: [
|
||||
{ scale: true, splitArea: { show: true } },
|
||||
{ gridIndex: 1, scale: true, splitNumber: 3 },
|
||||
],
|
||||
dataZoom: [
|
||||
{ type: 'inside', xAxisIndex: [0, 1] },
|
||||
{ type: 'slider', xAxisIndex: [0, 1], height: 18, bottom: 6 },
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'K 线',
|
||||
type: 'candlestick',
|
||||
data: ohlc,
|
||||
itemStyle: {
|
||||
color: '#ec3a3a',
|
||||
color0: '#26a69a',
|
||||
borderColor: '#ec3a3a',
|
||||
borderColor0: '#26a69a',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '持仓量',
|
||||
type: 'line',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
data: oi,
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: { color: '#5470c6' },
|
||||
areaStyle: { opacity: 0.15, color: '#5470c6' },
|
||||
},
|
||||
],
|
||||
},
|
||||
true,
|
||||
)
|
||||
}
|
||||
|
||||
function resize() {
|
||||
chart?.resize()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (containerRef.value) {
|
||||
chart = echarts.init(containerRef.value)
|
||||
render()
|
||||
window.addEventListener('resize', resize)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resize)
|
||||
chart?.dispose()
|
||||
chart = null
|
||||
})
|
||||
|
||||
watch(() => props.data, render, { deep: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="containerRef" class="chart"></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 560px;
|
||||
}
|
||||
</style>
|
||||
105
web/frontend/src/components/ScoreDetailDrawer.vue
Normal file
105
web/frontend/src/components/ScoreDetailDrawer.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { getScore, type Score } from '@/api/scores'
|
||||
|
||||
const props = defineProps<{ scoreId: number | null }>()
|
||||
const emit = defineEmits<{ (e: 'close'): void }>()
|
||||
|
||||
const score = ref<Score | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.scoreId !== null,
|
||||
set: (v) => {
|
||||
if (!v) emit('close')
|
||||
},
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.scoreId,
|
||||
async (id) => {
|
||||
if (id === null) {
|
||||
score.value = null
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
score.value = await getScore(id)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer v-model="visible" title="打分明细" size="640px" destroy-on-close>
|
||||
<div v-loading="loading" v-if="score">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="合约">{{ score.ts_code }}</el-descriptions-item>
|
||||
<el-descriptions-item label="日期">{{ score.trade_date }}</el-descriptions-item>
|
||||
<el-descriptions-item label="收盘">{{ score.close }}</el-descriptions-item>
|
||||
<el-descriptions-item label="持仓">{{ score.oi }}</el-descriptions-item>
|
||||
<el-descriptions-item label="综合">
|
||||
<strong>{{ score.composite.toFixed(2) }}</strong>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="信号">
|
||||
<el-tag>{{ score.signal }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="短期(7d × 0.4)">{{ score.short_term.toFixed(2) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中期(15d × 0.35)">{{ score.medium_term.toFixed(2) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="长期(30d × 0.25)" :span="2">
|
||||
{{ score.long_term.toFixed(2) }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<h4 class="section">短期 7 日逐日打分</h4>
|
||||
<el-table :data="score.detail?.short_details ?? []" size="small" border>
|
||||
<el-table-column prop="trade_date" label="日期" width="100" />
|
||||
<el-table-column prop="close" label="收盘" />
|
||||
<el-table-column prop="pre_close" label="昨收" />
|
||||
<el-table-column prop="oi" label="持仓" />
|
||||
<el-table-column prop="oi_chg" label="持仓变化" />
|
||||
<el-table-column prop="score" label="单日得分" />
|
||||
</el-table>
|
||||
|
||||
<h4 class="section">中期(15d)细节</h4>
|
||||
<el-descriptions :column="2" border v-if="score.detail?.medium_detail">
|
||||
<el-descriptions-item label="价格收益率">
|
||||
{{ (score.detail.medium_detail.price_return_pct * 100).toFixed(2) }}%
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="价格信号分">
|
||||
{{ score.detail.medium_detail.price_signal.toFixed(2) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="增仓上涨日">
|
||||
{{ score.detail.medium_detail.long_up_days }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="增仓下跌日">
|
||||
{{ score.detail.medium_detail.long_down_days }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="资金意愿分" :span="2">
|
||||
{{ score.detail.medium_detail.fund_signal }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<h4 class="section">长期(30d)细节</h4>
|
||||
<el-descriptions :column="2" border v-if="score.detail?.long_detail">
|
||||
<el-descriptions-item label="30 日均持仓">
|
||||
{{ score.detail.long_detail.avg_oi.toFixed(0) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="30 日前持仓">
|
||||
{{ score.detail.long_detail.oi_before.toFixed(0) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="变化幅度" :span="2">
|
||||
{{ (score.detail.long_detail.change_pct * 100).toFixed(2) }}%
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.section {
|
||||
margin: 18px 0 8px;
|
||||
}
|
||||
</style>
|
||||
15
web/frontend/src/env.d.ts
vendored
Normal file
15
web/frontend/src/env.d.ts
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_BASE?: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
14
web/frontend/src/main.ts
Normal file
14
web/frontend/src/main.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
import 'element-plus/dist/index.css'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.use(ElementPlus, { locale: zhCn })
|
||||
app.mount('#app')
|
||||
48
web/frontend/src/router/index.ts
Normal file
48
web/frontend/src/router/index.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('@/views/LoginView.vue'),
|
||||
meta: { layout: 'blank', public: true },
|
||||
},
|
||||
{ path: '/', redirect: '/scores' },
|
||||
{
|
||||
path: '/scores',
|
||||
name: 'scores',
|
||||
component: () => import('@/views/ScoresView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/chart',
|
||||
name: 'chart',
|
||||
component: () => import('@/views/ChartView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/users',
|
||||
name: 'admin-users',
|
||||
component: () => import('@/views/AdminUsersView.vue'),
|
||||
meta: { adminOnly: true },
|
||||
},
|
||||
{ path: '/:pathMatch(.*)*', redirect: '/scores' },
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
router.beforeEach((to) => {
|
||||
const auth = useAuthStore()
|
||||
if (to.meta.public) return true
|
||||
if (!auth.token) {
|
||||
return { path: '/login', query: { redirect: to.fullPath } }
|
||||
}
|
||||
if (to.meta.adminOnly && !auth.isAdmin) {
|
||||
return { path: '/scores' }
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
export default router
|
||||
43
web/frontend/src/stores/auth.ts
Normal file
43
web/frontend/src/stores/auth.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export interface AuthUser {
|
||||
id: number
|
||||
username: string
|
||||
role: 'admin' | 'user'
|
||||
}
|
||||
|
||||
interface State {
|
||||
token: string
|
||||
user: AuthUser | null
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'trade.auth'
|
||||
|
||||
function load(): State {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return { token: '', user: null }
|
||||
return JSON.parse(raw) as State
|
||||
} catch {
|
||||
return { token: '', user: null }
|
||||
}
|
||||
}
|
||||
|
||||
export const useAuthStore = defineStore('auth', {
|
||||
state: (): State => load(),
|
||||
getters: {
|
||||
isAdmin: (s) => s.user?.role === 'admin',
|
||||
},
|
||||
actions: {
|
||||
setSession(token: string, user: AuthUser) {
|
||||
this.token = token
|
||||
this.user = user
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify({ token, user }))
|
||||
},
|
||||
logout() {
|
||||
this.token = ''
|
||||
this.user = null
|
||||
localStorage.removeItem(STORAGE_KEY)
|
||||
},
|
||||
},
|
||||
})
|
||||
198
web/frontend/src/views/AdminUsersView.vue
Normal file
198
web/frontend/src/views/AdminUsersView.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
createUser,
|
||||
deleteUser,
|
||||
listUsers,
|
||||
updateUser,
|
||||
type AdminUser,
|
||||
} from '@/api/users'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const users = ref<AdminUser[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const createDialog = reactive({
|
||||
visible: false,
|
||||
username: '',
|
||||
password: '',
|
||||
role: 'user' as 'admin' | 'user',
|
||||
})
|
||||
|
||||
const resetDialog = reactive({
|
||||
visible: false,
|
||||
user: null as AdminUser | null,
|
||||
password: '',
|
||||
})
|
||||
|
||||
async function reload() {
|
||||
loading.value = true
|
||||
try {
|
||||
users.value = await listUsers()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
createDialog.username = ''
|
||||
createDialog.password = ''
|
||||
createDialog.role = 'user'
|
||||
createDialog.visible = true
|
||||
}
|
||||
|
||||
async function submitCreate() {
|
||||
const { username, password, role } = createDialog
|
||||
if (!username.trim() || password.length < 6) {
|
||||
ElMessage.warning('用户名必填,密码至少 6 位')
|
||||
return
|
||||
}
|
||||
await createUser(username.trim(), password, role)
|
||||
ElMessage.success('账号已创建')
|
||||
createDialog.visible = false
|
||||
await reload()
|
||||
}
|
||||
|
||||
function openReset(u: AdminUser) {
|
||||
resetDialog.user = u
|
||||
resetDialog.password = ''
|
||||
resetDialog.visible = true
|
||||
}
|
||||
|
||||
async function submitReset() {
|
||||
if (!resetDialog.user) return
|
||||
if (resetDialog.password.length < 6) {
|
||||
ElMessage.warning('新密码至少 6 位')
|
||||
return
|
||||
}
|
||||
await updateUser(resetDialog.user.id, { password: resetDialog.password })
|
||||
ElMessage.success('密码已重置')
|
||||
resetDialog.visible = false
|
||||
}
|
||||
|
||||
async function toggleDisabled(u: AdminUser) {
|
||||
await updateUser(u.id, { disabled: !u.disabled })
|
||||
ElMessage.success(u.disabled ? '已启用' : '已禁用')
|
||||
await reload()
|
||||
}
|
||||
|
||||
async function remove(u: AdminUser) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认删除用户「${u.username}」?`, '确认', {
|
||||
type: 'warning',
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
await deleteUser(u.id)
|
||||
ElMessage.success('已删除')
|
||||
await reload()
|
||||
}
|
||||
|
||||
onMounted(reload)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card shadow="never" class="head-card">
|
||||
<div class="head">
|
||||
<span>用户管理 — 仅管理员可访问,本系统不开放注册</span>
|
||||
<el-button type="primary" @click="openCreate">新建账号</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-table :data="users" v-loading="loading" stripe>
|
||||
<el-table-column prop="id" label="ID" width="60" />
|
||||
<el-table-column prop="username" label="用户名" />
|
||||
<el-table-column prop="role" label="角色" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.role === 'admin' ? 'danger' : 'info'">{{ row.role }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.disabled ? 'warning' : 'success'">
|
||||
{{ row.disabled ? '已禁用' : '正常' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建于" width="180" />
|
||||
<el-table-column prop="updated_at" label="更新于" width="180" />
|
||||
<el-table-column label="操作" width="280" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="openReset(row)">重置密码</el-button>
|
||||
<el-button
|
||||
link
|
||||
:type="row.disabled ? 'success' : 'warning'"
|
||||
:disabled="row.id === auth.user?.id"
|
||||
@click="toggleDisabled(row)"
|
||||
>
|
||||
{{ row.disabled ? '启用' : '禁用' }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
:disabled="row.id === auth.user?.id"
|
||||
@click="remove(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="createDialog.visible" title="新建账号" width="420px">
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="createDialog.username" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码">
|
||||
<el-input v-model="createDialog.password" type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色">
|
||||
<el-radio-group v-model="createDialog.role">
|
||||
<el-radio value="user">普通用户</el-radio>
|
||||
<el-radio value="admin">管理员</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="createDialog.visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitCreate">创建</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="resetDialog.visible" title="重置密码" width="420px">
|
||||
<p>用户:{{ resetDialog.user?.username }}</p>
|
||||
<el-input
|
||||
v-model="resetDialog.password"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="新密码 (至少 6 位)"
|
||||
/>
|
||||
<template #footer>
|
||||
<el-button @click="resetDialog.visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitReset">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.head-card :deep(.el-card__body) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #606266;
|
||||
}
|
||||
</style>
|
||||
88
web/frontend/src/views/ChartView.vue
Normal file
88
web/frontend/src/views/ChartView.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { listContracts } from '@/api/scores'
|
||||
import { listCandles, type Candle } from '@/api/candles'
|
||||
import KLineChart from '@/components/KLineChart.vue'
|
||||
|
||||
const filter = reactive<{ ts_code: string; range: [string, string] | [] }>({
|
||||
ts_code: '',
|
||||
range: [],
|
||||
})
|
||||
|
||||
const contracts = ref<string[]>([])
|
||||
const candles = ref<Candle[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
async function reload() {
|
||||
if (!filter.ts_code) {
|
||||
ElMessage.warning('请选择合约')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const [start, end] = filter.range || []
|
||||
candles.value = await listCandles(filter.ts_code, start, end)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
contracts.value = await listContracts().catch(() => [])
|
||||
if (contracts.value.length > 0) {
|
||||
filter.ts_code = contracts.value[0]
|
||||
await reload()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card shadow="never" class="filter-card">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="合约">
|
||||
<el-select
|
||||
v-model="filter.ts_code"
|
||||
placeholder="选择合约"
|
||||
filterable
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option v-for="c in contracts" :key="c" :label="c" :value="c" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker
|
||||
v-model="filter.range"
|
||||
type="daterange"
|
||||
value-format="YYYYMMDD"
|
||||
range-separator="→"
|
||||
start-placeholder="起"
|
||||
end-placeholder="止"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="reload">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="chart-card" v-loading="loading">
|
||||
<KLineChart :data="candles" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.filter-card :deep(.el-card__body) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.chart-card :deep(.el-card__body) {
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
86
web/frontend/src/views/LoginView.vue
Normal file
86
web/frontend/src/views/LoginView.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { login } from '@/api/auth'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const form = reactive({ username: '', password: '' })
|
||||
const loading = ref(false)
|
||||
|
||||
async function submit() {
|
||||
if (!form.username || !form.password) {
|
||||
ElMessage.warning('请输入用户名和密码')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const resp = await login(form.username.trim(), form.password)
|
||||
auth.setSession(resp.token, resp.user)
|
||||
const redirect = (route.query.redirect as string) || '/scores'
|
||||
router.replace(redirect)
|
||||
} catch {
|
||||
// axios 拦截器已弹错
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="card">
|
||||
<h2>期货报告系统</h2>
|
||||
<p class="hint">仅授权账号可登录,联系管理员申请。</p>
|
||||
<el-form @submit.prevent="submit" label-width="0">
|
||||
<el-form-item>
|
||||
<el-input v-model="form.username" placeholder="用户名" autocomplete="username" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="密码"
|
||||
show-password
|
||||
autocomplete="current-password"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-button type="primary" :loading="loading" style="width: 100%" @click="submit">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #1f2d3d 0%, #3a506b 100%);
|
||||
}
|
||||
.card {
|
||||
width: 360px;
|
||||
padding: 36px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.card h2 {
|
||||
margin: 0 0 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.hint {
|
||||
margin: 0 0 24px;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
125
web/frontend/src/views/ScoresView.vue
Normal file
125
web/frontend/src/views/ScoresView.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { listContracts, listScores, type Score } from '@/api/scores'
|
||||
import ScoreDetailDrawer from '@/components/ScoreDetailDrawer.vue'
|
||||
|
||||
const filter = reactive<{ ts_code?: string; range: [string, string] | []; limit: number }>({
|
||||
ts_code: undefined,
|
||||
range: [],
|
||||
limit: 200,
|
||||
})
|
||||
|
||||
const contracts = ref<string[]>([])
|
||||
const rows = ref<Score[]>([])
|
||||
const loading = ref(false)
|
||||
const drawerScoreId = ref<number | null>(null)
|
||||
|
||||
async function reload() {
|
||||
loading.value = true
|
||||
try {
|
||||
const [start, end] = filter.range || []
|
||||
rows.value = await listScores({
|
||||
ts_code: filter.ts_code,
|
||||
start: start || undefined,
|
||||
end: end || undefined,
|
||||
limit: filter.limit,
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function signalTagType(s: string) {
|
||||
if (s.includes('强烈看多')) return 'success'
|
||||
if (s.includes('偏多')) return ''
|
||||
if (s.includes('偏空')) return 'warning'
|
||||
if (s.includes('强烈看空')) return 'danger'
|
||||
return 'info'
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
contracts.value = await listContracts().catch(() => [])
|
||||
await reload()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card shadow="never" class="filter-card">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="合约">
|
||||
<el-select
|
||||
v-model="filter.ts_code"
|
||||
placeholder="全部合约"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option v-for="c in contracts" :key="c" :label="c" :value="c" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker
|
||||
v-model="filter.range"
|
||||
type="daterange"
|
||||
value-format="YYYYMMDD"
|
||||
range-separator="→"
|
||||
start-placeholder="起"
|
||||
end-placeholder="止"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="条数">
|
||||
<el-input-number v-model="filter.limit" :min="10" :max="500" :step="50" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="reload">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-table :data="rows" v-loading="loading" stripe class="score-table">
|
||||
<el-table-column prop="trade_date" label="日期" width="100" />
|
||||
<el-table-column prop="ts_code" label="合约" width="140" />
|
||||
<el-table-column prop="close" label="收盘" width="90" />
|
||||
<el-table-column prop="oi" label="持仓" width="100" />
|
||||
<el-table-column prop="oi_chg" label="持仓变化" width="100" />
|
||||
<el-table-column prop="short_term" label="短期(7d)" width="90" />
|
||||
<el-table-column prop="medium_term" label="中期(15d)" width="90" />
|
||||
<el-table-column prop="long_term" label="长期(30d)" width="90" />
|
||||
<el-table-column prop="composite" label="综合" width="80">
|
||||
<template #default="{ row }">
|
||||
<strong>{{ row.composite.toFixed(2) }}</strong>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="signal" label="信号" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="signalTagType(row.signal)">{{ row.signal }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="drawerScoreId = row.id">明细</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<ScoreDetailDrawer
|
||||
:score-id="drawerScoreId"
|
||||
@close="drawerScoreId = null"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.filter-card :deep(.el-card__body) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.score-table {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
23
web/frontend/tsconfig.json
Normal file
23
web/frontend/tsconfig.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"noEmit": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
11
web/frontend/tsconfig.node.json
Normal file
11
web/frontend/tsconfig.node.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
26
web/frontend/vite.config.ts
Normal file
26
web/frontend/vite.config.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'node:path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
emptyOutDir: true,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user