新增 Web 浏览端(Go+Vue 报表系统)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fish
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>
|
||||
Reference in New Issue
Block a user