fish/trade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

适配移动端展示

Browse Source
This commit is contained in:
fish
2026-05-04 21:36:48 +08:00
parent c852b1d871
commit b6bacbfae9
10 changed files with 298 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
web/frontend/src/views/AdminUsersView.vue
View File

@@ -103,45 +103,47 @@ onMounted(reload)
</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>
<div class="table-wrapper" v-loading="loading">
<el-table :data="users" stripe class="user-table">
<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>
</div>
<el-dialog v-model="createDialog.visible" title="新建账号" width="420px">
<el-form label-width="80px">
@@ -195,4 +197,19 @@ onMounted(reload)
align-items: center;
color: var(--el-text-color-regular);
}
.table-wrapper {
background: var(--el-bg-color);
border-radius: 4px;
overflow-x: auto;
}
.user-table {
min-width: 960px;
}
@media (max-width: 768px) {
.head {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
</style>

8
web/frontend/src/views/ChangePasswordView.vue
View File

@@ -87,9 +87,12 @@ async function submit() {
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1f2d3d 0%, #3a506b 100%);
overflow: hidden;
padding: 16px;
}
.card {
width: 360px;
max-width: 100%;
padding: 36px 32px;
background: var(--el-bg-color);
color: var(--el-text-color-primary);
@@ -106,4 +109,9 @@ async function submit() {
font-size: 12px;
text-align: center;
}
@media (max-width: 768px) {
.card {
padding: 28px 20px;
}
}
</style>

8
web/frontend/src/views/ChartView.vue
View File

@@ -4,6 +4,9 @@ import { ElMessage } from 'element-plus'
import { listContracts } from '@/api/scores'
import { listCandles, type Candle } from '@/api/candles'
import KLineChart from '@/components/KLineChart.vue'
import { useMobile } from '@/composables/useMobile'
const { isMobile } = useMobile()
const filter = reactive<{ ts_code: string; range: [string, string] | [] }>({
ts_code: '',
@@ -40,13 +43,13 @@ onMounted(async () => {
<template>
<div class="page">
<el-card shadow="never" class="filter-card">
<el-form :inline="true">
<el-form :inline="!isMobile">
<el-form-item label="合约">
<el-select
v-model="filter.ts_code"
placeholder="选择合约"
filterable
style="width: 200px"
:style="{ width: isMobile ? '100%' : '200px' }"
>
<el-option v-for="c in contracts" :key="c" :label="c" :value="c" />
</el-select>
@@ -59,6 +62,7 @@ onMounted(async () => {
range-separator="→"
start-placeholder="起"
end-placeholder="止"
:style="{ width: isMobile ? '100%' : 'auto' }"
/>
</el-form-item>
<el-form-item>

7
web/frontend/src/views/LoginView.vue
View File

@@ -70,9 +70,11 @@ async function submit() {
justify-content: center;
background: linear-gradient(135deg, #1f2d3d 0%, #3a506b 100%);
overflow: hidden;
padding: 16px;
}
.card {
width: 360px;
max-width: 100%;
padding: 36px 32px;
background: var(--el-bg-color);
color: var(--el-text-color-primary);
@@ -89,4 +91,9 @@ async function submit() {
font-size: 12px;
text-align: center;
}
@media (max-width: 768px) {
.card {
padding: 28px 20px;
}
}
</style>

7
web/frontend/src/views/RunView.vue
View File

@@ -8,6 +8,9 @@ import {
type RunResponse,
} from '@/api/run'
import { parseTsCode } from '@/utils/contract'
import { useMobile } from '@/composables/useMobile'
const { isMobile } = useMobile()
const SYMBOLS = ['FG', 'SA', 'RB', 'MA', 'CF', 'M']
@@ -139,7 +142,7 @@ onMounted(loadActive)
<template #header>
<span>打分结果</span>
</template>
<el-descriptions :column="2" border>
<el-descriptions :column="isMobile ? 1 : 2" border>
<el-descriptions-item label="品种">{{ parseTsCode(result.ts_code).symbol }}</el-descriptions-item>
<el-descriptions-item label="合约">{{ parseTsCode(result.ts_code).contract }}</el-descriptions-item>
<el-descriptions-item label="日期">{{ result.trade_date }}</el-descriptions-item>
@@ -151,7 +154,7 @@ onMounted(loadActive)
<el-descriptions-item label="综合">
<strong>{{ result.composite }}</strong>
</el-descriptions-item>
<el-descriptions-item label="信号" :span="2">
<el-descriptions-item label="信号" :span="isMobile ? 1 : 2">
<el-tag :type="signalTagType(result.signal)">{{ result.signal }}</el-tag>
</el-descriptions-item>
</el-descriptions>

98
web/frontend/src/views/ScoresView.vue
View File

@@ -3,6 +3,9 @@ import { onMounted, reactive, ref } from 'vue'
import { listContracts, listScores, type Score } from '@/api/scores'
import ScoreDetailDrawer from '@/components/ScoreDetailDrawer.vue'
import { parseTsCode } from '@/utils/contract'
import { useMobile } from '@/composables/useMobile'
const { isMobile } = useMobile()
const filter = reactive<{
ts_code?: string
@@ -59,14 +62,14 @@ onMounted(async () => {
<template>
<div class="page">
<el-card shadow="never" class="filter-card">
<el-form :inline="true">
<el-form :inline="!isMobile">
<el-form-item label="合约">
<el-select
v-model="filter.ts_code"
placeholder="全部合约"
clearable
filterable
style="width: 200px"
:style="{ width: isMobile ? '100%' : '200px' }"
>
<el-option v-for="c in contracts" :key="c" :label="c" :value="c" />
</el-select>
@@ -79,6 +82,7 @@ onMounted(async () => {
range-separator="→"
start-placeholder="起"
end-placeholder="止"
:style="{ width: isMobile ? '100%' : 'auto' }"
/>
</el-form-item>
<el-form-item label="条数">
@@ -87,8 +91,8 @@ onMounted(async () => {
<el-form-item>
<el-button type="primary" :loading="loading" style="width: 88px" @click="reload">查询</el-button>
</el-form-item>
<el-form-item label="快捷">
<el-button-group class="signal-group">
<el-form-item label="快捷" class="signal-item">
<el-button-group class="signal-group" :size="isMobile ? 'small' : 'default'">
<el-button
:type="filter.signal === '强烈看多' ? 'success' : ''"
@click="toggleSignal('强烈看多')"
@@ -118,40 +122,42 @@ onMounted(async () => {
</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 label="品种" width="80">
<template #default="{ row }">
{{ parseTsCode(row.ts_code).symbol }}
</template>
</el-table-column>
<el-table-column label="合约" width="80">
<template #default="{ row }">
{{ parseTsCode(row.ts_code).contract }}
</template>
</el-table-column>
<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>
<div class="table-wrapper" v-loading="loading">
<el-table :data="rows" stripe class="score-table">
<el-table-column prop="trade_date" label="日期" width="100" />
<el-table-column label="品种" width="80">
<template #default="{ row }">
{{ parseTsCode(row.ts_code).symbol }}
</template>
</el-table-column>
<el-table-column label="合约" width="80">
<template #default="{ row }">
{{ parseTsCode(row.ts_code).contract }}
</template>
</el-table-column>
<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>
</div>
<ScoreDetailDrawer
:score-id="drawerScoreId"
@@ -177,7 +183,21 @@ onMounted(async () => {
outline: none;
box-shadow: none;
}
.score-table {
.table-wrapper {
background: var(--el-bg-color);
border-radius: 4px;
overflow-x: auto;
}
.score-table {
min-width: 960px;
}
@media (max-width: 768px) {
.signal-item {
flex-wrap: wrap;
}
.signal-group {
flex-wrap: wrap;
}
}
</style>