andy/by-crm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): 为前端添加完整移动端响应式适配

Browse Source 
- 新增响应式工具函数与全局移动端样式，统一适配≤768px屏幕
- 添加移动端底部导航组件，替代桌面端侧边栏菜单
- 为经销商、客户、报备列表页新增移动端卡片视图替换表格布局
- 调整所有页面的表单、弹窗与布局适配移动端尺寸
- 优化移动端viewport配置，适配全面屏安全区域
- 修复密码哈希工具，在非安全上下文下回退使用js-sha256库
- 更新依赖包，新增@vueuse/core与js-sha256
This commit is contained in:
wanglongjie 2026-08-03 15:35:45 +08:00
parent 4c6970c32d
commit fd89c31640
16 changed files with 613 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<title>泊云智销通</title> <title>泊云智销通</title>
</head> </head>
<body> <body>

2
frontend/package.json
View File

@ -11,10 +11,12 @@
}, },
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.0", "@element-plus/icons-vue": "^2.3.0",
"@vueuse/core": "^14.4.0",
"axios": "^1.6.0", "axios": "^1.6.0",
"bcryptjs": "^3.0.3", "bcryptjs": "^3.0.3",
"dayjs": "^1.11.0", "dayjs": "^1.11.0",
"element-plus": "^2.5.0", "element-plus": "^2.5.0",
"js-sha256": "^1.0.0",
"pinia": "^2.1.0", "pinia": "^2.1.0",
"pinia-plugin-persistedstate": "^3.2.0", "pinia-plugin-persistedstate": "^3.2.0",
"vue": "^3.4.0", "vue": "^3.4.0",

42
frontend/pnpm-lock.yaml
View File

@ -11,6 +11,9 @@ importers:
'@element-plus/icons-vue': '@element-plus/icons-vue':
specifier: ^2.3.0 specifier: ^2.3.0
version: 2.3.2(vue@3.5.27(typescript@5.9.3)) version: 2.3.2(vue@3.5.27(typescript@5.9.3))
'@vueuse/core':
specifier: ^14.4.0
version: 14.4.0(vue@3.5.27(typescript@5.9.3))
axios: axios:
specifier: ^1.6.0 specifier: ^1.6.0
version: 1.13.2 version: 1.13.2
@ -23,6 +26,9 @@ importers:
element-plus: element-plus:
specifier: ^2.5.0 specifier: ^2.5.0
version: 2.13.1(vue@3.5.27(typescript@5.9.3)) version: 2.13.1(vue@3.5.27(typescript@5.9.3))
js-sha256:
specifier: ^1.0.0
version: 1.0.0
pinia: pinia:
specifier: ^2.1.0 specifier: ^2.1.0
version: 2.3.1(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)) version: 2.3.1(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
@ -529,6 +535,9 @@ packages:
'@types/web-bluetooth@0.0.20': '@types/web-bluetooth@0.0.20':
resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==} resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
'@types/web-bluetooth@0.0.21':
resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
'@typescript-eslint/eslint-plugin@6.21.0': '@typescript-eslint/eslint-plugin@6.21.0':
resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==} resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
engines: {node: ^16.0.0 || >=18.0.0} engines: {node: ^16.0.0 || >=18.0.0}
@ -644,12 +653,25 @@ packages:
'@vueuse/core@10.11.1': '@vueuse/core@10.11.1':
resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==} resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
'@vueuse/core@14.4.0':
resolution: {integrity: sha512-X4WHz1HlCzCBoYXesUkifzzWBAcZgXG8Fi5iNPQg/epdzOB3gu8Fawj3hvuwYR1nGcXGnvxwYYcUC/71++svtQ==}
peerDependencies:
vue: ^3.5.0
'@vueuse/metadata@10.11.1': '@vueuse/metadata@10.11.1':
resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==} resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
'@vueuse/metadata@14.4.0':
resolution: {integrity: sha512-swx/255R6JyHZFJhx845iz5CRWDZdCfvkZOpACWc5+c5WHcG24mv8gUT1WIdFQaHt6dq79rvILd9QnCWiyVm9g==}
'@vueuse/shared@10.11.1': '@vueuse/shared@10.11.1':
resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==} resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
'@vueuse/shared@14.4.0':
resolution: {integrity: sha512-JRgY90Sz8DDtPMsaDflvPMp9xYk69JZAmbuDvAquUVXKr2gEjqtzGNTTthLfckH0BzBqvnu31gb4a8TGLRe79g==}
peerDependencies:
vue: ^3.5.0
acorn-jsx@5.3.2: acorn-jsx@5.3.2:
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
peerDependencies: peerDependencies:
@ -1015,6 +1037,9 @@ packages:
isexe@2.0.0: isexe@2.0.0:
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
js-sha256@1.0.0:
resolution: {integrity: sha512-Bqxf6ENUzYIMzuELCmRNrJOVbjKH1oMgbfYJBKVr/W1Xf9fazpahqCbb24v1pR7XV1isuqhM+w9KWpK7zCyUQw==}
js-yaml@4.1.1: js-yaml@4.1.1:
resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==} resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
hasBin: true hasBin: true
@ -1699,6 +1724,8 @@ snapshots:
'@types/web-bluetooth@0.0.20': {} '@types/web-bluetooth@0.0.20': {}
'@types/web-bluetooth@0.0.21': {}
'@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)': '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)':
dependencies: dependencies:
'@eslint-community/regexpp': 4.12.2 '@eslint-community/regexpp': 4.12.2
@ -1880,8 +1907,17 @@ snapshots:
- '@vue/composition-api' - '@vue/composition-api'
- vue - vue
'@vueuse/core@14.4.0(vue@3.5.27(typescript@5.9.3))':
dependencies:
'@types/web-bluetooth': 0.0.21
'@vueuse/metadata': 14.4.0
'@vueuse/shared': 14.4.0(vue@3.5.27(typescript@5.9.3))
vue: 3.5.27(typescript@5.9.3)
'@vueuse/metadata@10.11.1': {} '@vueuse/metadata@10.11.1': {}
'@vueuse/metadata@14.4.0': {}
'@vueuse/shared@10.11.1(vue@3.5.27(typescript@5.9.3))': '@vueuse/shared@10.11.1(vue@3.5.27(typescript@5.9.3))':
dependencies: dependencies:
vue-demi: 0.14.10(vue@3.5.27(typescript@5.9.3)) vue-demi: 0.14.10(vue@3.5.27(typescript@5.9.3))
@ -1889,6 +1925,10 @@ snapshots:
- '@vue/composition-api' - '@vue/composition-api'
- vue - vue
'@vueuse/shared@14.4.0(vue@3.5.27(typescript@5.9.3))':
dependencies:
vue: 3.5.27(typescript@5.9.3)
acorn-jsx@5.3.2(acorn@8.15.0): acorn-jsx@5.3.2(acorn@8.15.0):
dependencies: dependencies:
acorn: 8.15.0 acorn: 8.15.0
@ -2309,6 +2349,8 @@ snapshots:
isexe@2.0.0: {} isexe@2.0.0: {}
js-sha256@1.0.0: {}
js-yaml@4.1.1: js-yaml@4.1.1:
dependencies: dependencies:
argparse: 2.0.1 argparse: 2.0.1

76
frontend/src/components/MobileTabBar.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<nav class="mobile-tab-bar">
<router-link
v-for="item in menus"
:key="item.path"
:to="item.path"
class="tab-item"
:class="{ active: isActive(item.path) }"
>
<el-icon><component :is="item.icon" /></el-icon>
<span class="tab-label">{{ item.label }}</span>
</router-link>
</nav>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { HomeFilled, Document, Shop, Setting } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
const route = useRoute()
const userStore = useUserStore()
// 与 Layout 侧边栏菜单保持一致，仅 admin 项按角色显隐
const allMenus = [
{ path: '/dashboard', label: '首页', icon: HomeFilled, adminOnly: false },
{ path: '/report', label: '报备', icon: Document, adminOnly: false },
{ path: '/dealer', label: '经销商', icon: Shop, adminOnly: true },
{ path: '/system-config', label: '设置', icon: Setting, adminOnly: true }
]
const menus = computed(() => allMenus.filter((m) => !m.adminOnly || userStore.isAdmin))
const isActive = (path: string) => route.path === path
</script>
<style scoped>
.mobile-tab-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
display: flex;
height: 56px;
background-color: #fff;
border-top: 1px solid #e6e6e6;
/* 兼容 iPhone 底部安全区 */
padding-bottom: env(safe-area-inset-bottom);
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
color: #909399;
text-decoration: none;
font-size: 12px;
}
.tab-item .el-icon {
font-size: 20px;
}
.tab-item.active {
color: #409eff;
}
.tab-label {
line-height: 1;
}
</style>

17
frontend/src/composables/useResponsive.ts Normal file
View File

@ -0,0 +1,17 @@
import { useMediaQuery } from '@vueuse/core'
/**
* 响应式断点判断（与 styles/variables.scss 的媒体查询保持一致）。
* - isMobile : ≤768px 手机竖屏
* - isTablet : 769–1024 平板
* - isPC : ≥1025px 桌面（现有 PC 行为）
*
* 返回值均为 Ref<boolean>，可在模板中直接 v-if。
*/
export function useResponsive() {
const isMobile = useMediaQuery('(max-width: 768px)')
const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)')
const isPC = useMediaQuery('(min-width: 1025px)')
return { isMobile, isTablet, isPC }
}

1
frontend/src/main.ts
View File

@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import '@/styles/mobile.scss'
import * as ElementPlusIconsVue from '@element-plus/icons-vue' import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'

44
frontend/src/styles/mobile.scss Normal file
View File

@ -0,0 +1,44 @@
@use './variables.scss' as *;
/* ============================================================
* 移动端全局兜底样式
* 仅在 ≤768px 生效，PC（≥1025px）零影响。
* 处理无法在组件内逐个绑定的命令式弹层（ElMessageBox 等）
* 与通用触摸/溢出问题。
* ========================================================= */
@include mobile {
// 防止页面横向溢出（宽表格/固定宽度元素）
html,
body {
overflow-x: hidden;
}
// 命令式确认框（ElMessageBox.confirm）无法逐个绑宽度，统一兜底
.el-message-box {
width: 86% !important;
max-width: 86vw !important;
}
// 通知/消息更贴顶，避免遮挡底部 Tab
.el-message {
min-width: auto !important;
max-width: 92vw !important;
}
// 分页器触摸热区加大
.el-pagination {
.btn-prev,
.btn-next,
.el-pager li {
min-width: 32px;
height: 32px;
line-height: 32px;
}
}
// 表单标签更紧凑
.el-form-item__label {
font-size: 14px;
}
}

25
frontend/src/styles/variables.scss Normal file
View File

@ -0,0 +1,25 @@
// 断点常量 —— 与 composables/useResponsive.ts 的媒体查询保持一致
// 改动断点时两处需同步。
$bp-mobile: 768px;
$bp-tablet: 1024px;
/// ≤768px 移动端
@mixin mobile {
@media (max-width: $bp-mobile) {
@content;
}
}
/// 769–1024 平板
@mixin tablet {
@media (min-width: 769px) and (max-width: $bp-tablet) {
@content;
}
}
/// ≤1024px（移动 + 平板）
@mixin mobile-and-tablet {
@media (max-width: $bp-tablet) {
@content;
}
}

55
frontend/src/utils/crypto.ts
View File

@ -1,39 +1,44 @@
/** /**
* 密码加密工具 * 密码加密工具（SHA-256 → 小写 hex）
* 使用 Web Crypto API 进行 SHA-256 哈希 *
* 安全上下文（HTTPS 或 localhost）下使用原生 Web Crypto API；
* 非安全上下文（HTTP + 局域网/IP 访问，此时 crypto.subtle 为 undefined）
* 下回退到纯 JS 实现 js-sha256，保证产物一致，登录不再卡死。
* 两条路径对同一字符串产出的 SHA-256 小写 hex 完全相同。
*/ */
import { sha256 } from 'js-sha256'
/** /** 当前环境是否可用原生 Web Crypto（即处于安全上下文） */
* 将字符串转换为 ArrayBuffer function hasSubtleCrypto(): boolean {
*/ return typeof crypto !== 'undefined' && typeof crypto.subtle?.digest === 'function'
function stringToArrayBuffer(str: string): ArrayBuffer {
const encoder = new TextEncoder()
return encoder.encode(str).buffer
} }
/** /** 原生 Web Crypto SHA-256 → 小写 hex */
* 将 ArrayBuffer 转换为十六进制字符串 async function subtleSha256Hex(input: string): Promise<string> {
*/ const data = new TextEncoder().encode(input)
function arrayBufferToHex(buffer: ArrayBuffer): string { const hashBuffer = await crypto.subtle.digest('SHA-256', data)
const bytes = new Uint8Array(buffer) return Array.from(new Uint8Array(hashBuffer))
return Array.from(bytes) .map((b) => b.toString(16).padStart(2, '0'))
.map(b => b.toString(16).padStart(2, '0'))
.join('') .join('')
} }
/** 统一入口：优先原生，回退纯 JS */
async function sha256Hex(input: string): Promise<string> {
if (hasSubtleCrypto()) {
return subtleSha256Hex(input)
}
return sha256(input)
}
/** /**
* 使用 SHA-256 算法哈希密码 * 使用 SHA-256 算法哈希密码
* @param password 明文密码 * @param password 明文密码
* @returns 哈希后的十六进制字符串 * @returns 哈希后的十六进制字符串（小写）
*/ */
export async function hashPassword(password: string): Promise<string> { export async function hashPassword(password: string): Promise<string> {
if (!password) return '' if (!password) return ''
try { try {
// 使用 Web Crypto API 进行 SHA-256 哈希 return await sha256Hex(password)
const data = stringToArrayBuffer(password)
const hashBuffer = await crypto.subtle.digest('SHA-256', data)
return arrayBufferToHex(hashBuffer)
} catch (error) { } catch (error) {
console.error('密码哈希失败:', error) console.error('密码哈希失败:', error)
throw new Error('密码加密失败') throw new Error('密码加密失败')
@ -44,16 +49,12 @@ export async function hashPassword(password: string): Promise<string> {
* 简单的加盐哈希（可选，用于增强安全性） * 简单的加盐哈希（可选，用于增强安全性）
* @param password 明文密码 * @param password 明文密码
* @param salt 盐值 * @param salt 盐值
* @returns 哈希后的十六进制字符串 * @returns 哈希后的十六进制字符串（小写）
*/ */
export async function hashPasswordWithSalt(password: string, salt: string): Promise<string> { export async function hashPasswordWithSalt(password: string, salt: string): Promise<string> {
if (!password) return '' if (!password) return ''
try { try {
const saltedPassword = password + salt return await sha256Hex(password + salt)
const data = stringToArrayBuffer(saltedPassword)
const hashBuffer = await crypto.subtle.digest('SHA-256', data)
return arrayBufferToHex(hashBuffer)
} catch (error) { } catch (error) {
console.error('密码哈希失败:', error) console.error('密码哈希失败:', error)
throw new Error('密码加密失败') throw new Error('密码加密失败')

92
frontend/src/views/Customer.vue
View File

@ -17,7 +17,7 @@
</template> </template>
<!-- 查询表单 --> <!-- 查询表单 -->
<el-form :inline="true" :model="queryForm" class="query-form"> <el-form :inline="!isMobile" :model="queryForm" class="query-form">
<el-form-item label="客户名称"> <el-form-item label="客户名称">
<el-input v-model="queryForm.name" placeholder="请输入客户名称" clearable /> <el-input v-model="queryForm.name" placeholder="请输入客户名称" clearable />
</el-form-item> </el-form-item>
@ -49,7 +49,7 @@
</el-form> </el-form>
<!-- 数据表格 --> <!-- 数据表格 -->
<el-table :data="tableData" border stripe v-loading="loading"> <el-table v-if="!isMobile" :data="tableData" border stripe v-loading="loading">
<el-table-column prop="name" label="客户名称" /> <el-table-column prop="name" label="客户名称" />
<el-table-column prop="phone" label="联系电话" /> <el-table-column prop="phone" label="联系电话" />
<el-table-column prop="address" label="地址" /> <el-table-column prop="address" label="地址" />
@ -84,6 +84,31 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 移动端卡片视图 -->
<div v-if="isMobile" class="mobile-card-list" v-loading="loading">
<div v-for="row in tableData" :key="row.id" class="mobile-card">
<div class="card-top">
<span class="card-title">{{ row.name }}</span>
<el-tag v-if="row.status === 0" type="success" size="small">可报备</el-tag>
<el-tag v-else-if="row.status === 1" type="warning" size="small">保护中</el-tag>
<el-tag v-else type="info" size="small">已失效</el-tag>
</div>
<div class="card-row"><span class="label">联系电话</span><span>{{ row.phone || '-' }}</span></div>
<div class="card-row"><span class="label">所属行业</span><span>{{ getIndustryLabel(row.industry) }}</span></div>
<div class="card-row"><span class="label">地址</span><span>{{ row.address || '-' }}</span></div>
<template v-if="row.status === 1">
<div class="card-row"><span class="label">当前经销商</span><span>{{ row.currentDealerName || '-' }}</span></div>
<div class="card-row"><span class="label">保护期截止</span><span>{{ row.protectEndDate ? formatDate(row.protectEndDate) : '-' }}</span></div>
</template>
<div class="card-row"><span class="label">创建时间</span><span>{{ row.createdAt }}</span></div>
<div class="card-actions">
<el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
</div>
</div>
<el-empty v-if="!loading && tableData.length === 0" description="暂无客户数据" />
</div>
<!-- 分页 --> <!-- 分页 -->
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-pagination <el-pagination
@ -91,12 +116,12 @@
v-model:page-size="queryForm.size" v-model:page-size="queryForm.size"
:total="total" :total="total"
:page-sizes="[10, 20, 50, 100]" :page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
prev-text="上一页" prev-text="上一页"
next-text="下一页" next-text="下一页"
@size-change="fetchData" @size-change="fetchData"
@current-change="fetchData" @current-change="fetchData"
style="margin-top: 20px; justify-content: flex-end" :style="{ marginTop: '20px', justifyContent: isMobile ? 'center' : 'flex-end' }"
/> />
</el-config-provider> </el-config-provider>
</el-card> </el-card>
@ -105,7 +130,7 @@
<el-dialog <el-dialog
v-model="dialogVisible" v-model="dialogVisible"
:title="dialogTitle" :title="dialogTitle"
width="600px" :width="isMobile ? '92%' : '600px'"
@close="handleDialogClose" @close="handleDialogClose"
> >
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px"> <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
@ -161,8 +186,10 @@ import { getConfigValue } from '@/api/system'
import { searchSchoolByName } from '@/api/school' import { searchSchoolByName } from '@/api/school'
import type { Customer, CustomerForm } from '@/types' import type { Customer, CustomerForm } from '@/types'
import type { School } from '@/api/school' import type { School } from '@/api/school'
import { useResponsive } from '@/composables/useResponsive'
const protectDays = ref<number>(90) const protectDays = ref<number>(90)
const { isMobile } = useResponsive()
const loading = ref(false) const loading = ref(false)
const tableData = ref<Customer[]>([]) const tableData = ref<Customer[]>([])
@ -383,4 +410,59 @@ onMounted(() => {
color: #909399; color: #909399;
margin-top: 4px; margin-top: 4px;
} }
/* ===== 移动端卡片视图 ===== */
.mobile-card-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-card {
background: #fff;
border: 1px solid #ebeef5;
border-radius: 8px;
padding: 12px;
}
.card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.card-title {
font-size: 15px;
font-weight: 600;
color: #303133;
}
.card-row {
display: flex;
font-size: 13px;
color: #606266;
line-height: 1.8;
}
.card-row .label {
width: 76px;
color: #909399;
flex-shrink: 0;
}
.card-actions {
display: flex;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #f0f0f0;
}
@media (max-width: 768px) {
.card-header {
flex-wrap: wrap;
gap: 10px;
}
}
</style> </style>

22
frontend/src/views/Dashboard.vue
View File

@ -15,7 +15,7 @@
</el-card> </el-card>
</el-col> </el-col>
--> -->
<el-col :span="userStore.isAdmin ? 8 : 12"> <el-col :xs="24" :sm="userStore.isAdmin ? 8 : 12">
<el-card class="stat-card" @click="handleReportCountClick"> <el-card class="stat-card" @click="handleReportCountClick">
<div class="stat-content"> <div class="stat-content">
<div class="stat-icon" style="background-color: #67c23a"> <div class="stat-icon" style="background-color: #67c23a">
@ -28,7 +28,7 @@
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="userStore.isAdmin ? 8 : 12"> <el-col :xs="24" :sm="userStore.isAdmin ? 8 : 12">
<el-card class="stat-card" @click="handlePendingClick"> <el-card class="stat-card" @click="handlePendingClick">
<div class="stat-content"> <div class="stat-content">
<div class="stat-icon" style="background-color: #e6a23c"> <div class="stat-icon" style="background-color: #e6a23c">
@ -41,7 +41,7 @@
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="8" v-if="userStore.isAdmin"> <el-col :xs="24" :sm="8" v-if="userStore.isAdmin">
<el-card class="stat-card" @click="handleDealerCountClick"> <el-card class="stat-card" @click="handleDealerCountClick">
<div class="stat-content"> <div class="stat-content">
<div class="stat-icon" style="background-color: #f56c6c"> <div class="stat-icon" style="background-color: #f56c6c">
@ -184,4 +184,20 @@ onMounted(() => {
color: #606266; color: #606266;
line-height: 1.8; line-height: 1.8;
} }
@media (max-width: 768px) {
.welcome-card {
padding: 24px;
}
.stat-icon {
width: 48px;
height: 48px;
margin-right: 10px;
}
.stat-value {
font-size: 20px;
}
}
</style> </style>

89
frontend/src/views/Dealer.vue
View File

@ -12,7 +12,7 @@
</template> </template>
<!-- 查询表单 --> <!-- 查询表单 -->
<el-form :inline="true" :model="queryForm" class="query-form"> <el-form :inline="!isMobile" :model="queryForm" class="query-form">
<el-form-item label="经销商名称"> <el-form-item label="经销商名称">
<el-input v-model="queryForm.name" placeholder="请输入经销商名称" clearable /> <el-input v-model="queryForm.name" placeholder="请输入经销商名称" clearable />
</el-form-item> </el-form-item>
@ -35,7 +35,7 @@
</el-form> </el-form>
<!-- 数据表格 --> <!-- 数据表格 -->
<el-table :data="tableData" border stripe v-loading="loading"> <el-table v-if="!isMobile" :data="tableData" border stripe v-loading="loading">
<el-table-column prop="name" label="经销商名称" /> <el-table-column prop="name" label="经销商名称" />
<el-table-column prop="code" label="经销商账号" /> <el-table-column prop="code" label="经销商账号" />
<el-table-column prop="contactPerson" label="联系人" /> <el-table-column prop="contactPerson" label="联系人" />
@ -57,13 +57,36 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 移动端卡片视图 -->
<div v-if="isMobile" class="mobile-card-list" v-loading="loading">
<div v-for="row in tableData" :key="row.id" class="mobile-card">
<div class="card-top">
<span class="card-title">{{ row.name }}</span>
<el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</div>
<div class="card-row"><span class="label">账号</span><span>{{ row.code }}</span></div>
<div class="card-row"><span class="label">联系人</span><span>{{ row.contactPerson || '-' }}</span></div>
<div class="card-row"><span class="label">联系电话</span><span>{{ row.contactPhone || '-' }}</span></div>
<div class="card-row"><span class="label">邮箱</span><span>{{ row.email || '-' }}</span></div>
<div class="card-row"><span class="label">创建时间</span><span>{{ row.createdAt }}</span></div>
<div class="card-actions">
<el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
<el-button link type="warning" @click="handleResetPassword(row)">重置密码</el-button>
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
</div>
</div>
<el-empty v-if="!loading && tableData.length === 0" description="暂无经销商数据" />
</div>
</el-card> </el-card>
<!-- 新增/编辑对话框 --> <!-- 新增/编辑对话框 -->
<el-dialog <el-dialog
v-model="dialogVisible" v-model="dialogVisible"
:title="dialogTitle" :title="dialogTitle"
width="600px" :width="isMobile ? '92%' : '600px'"
@close="handleDialogClose" @close="handleDialogClose"
> >
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px"> <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
@ -110,7 +133,7 @@
<el-dialog <el-dialog
v-model="resetPasswordDialogVisible" v-model="resetPasswordDialogVisible"
title="重置密码" title="重置密码"
width="500px" :width="isMobile ? '92%' : '500px'"
@close="handleResetPasswordDialogClose" @close="handleResetPasswordDialogClose"
> >
<el-form ref="resetPasswordFormRef" :model="resetPasswordForm" :rules="resetPasswordRules" label-width="100px"> <el-form ref="resetPasswordFormRef" :model="resetPasswordForm" :rules="resetPasswordRules" label-width="100px">
@ -149,6 +172,9 @@ import { getDealerList, createDealer, updateDealer, deleteDealer } from '@/api/d
import { resetPassword } from '@/api/auth' import { resetPassword } from '@/api/auth'
import { hashPassword } from '@/utils/crypto' import { hashPassword } from '@/utils/crypto'
import type { Dealer } from '@/types' import type { Dealer } from '@/types'
import { useResponsive } from '@/composables/useResponsive'
const { isMobile } = useResponsive()
const loading = ref(false) const loading = ref(false)
const tableData = ref<Dealer[]>([]) const tableData = ref<Dealer[]>([])
@ -383,4 +409,59 @@ onMounted(() => {
.query-form { .query-form {
margin-bottom: 20px; margin-bottom: 20px;
} }
/* ===== 移动端卡片视图 ===== */
.mobile-card-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-card {
background: #fff;
border: 1px solid #ebeef5;
border-radius: 8px;
padding: 12px;
}
.card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.card-title {
font-size: 15px;
font-weight: 600;
color: #303133;
}
.card-row {
display: flex;
font-size: 13px;
color: #606266;
line-height: 1.8;
}
.card-row .label {
width: 76px;
color: #909399;
flex-shrink: 0;
}
.card-actions {
display: flex;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #f0f0f0;
}
@media (max-width: 768px) {
.card-header {
flex-wrap: wrap;
gap: 10px;
}
}
</style> </style>

65
frontend/src/views/Layout.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-container class="layout-container"> <el-container class="layout-container">
<el-aside width="200px"> <el-aside v-if="!isMobile" width="200px">
<div class="logo">泊云智销通</div> <div class="logo">{{ APP_TITLE }}</div>
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
router router
@ -34,13 +34,16 @@
<el-container> <el-container>
<el-header> <el-header>
<div class="header-content"> <div class="header-content">
<div class="breadcrumb"> <div class="header-left">
<el-breadcrumb separator="/"> <span class="mobile-logo">{{ APP_TITLE }}</span>
<el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item> <div class="breadcrumb">
</el-breadcrumb> <el-breadcrumb separator="/">
<el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div> </div>
<div class="user-info"> <div class="user-info">
<el-dropdown> <el-dropdown :trigger="isMobile ? 'click' : 'hover'">
<span class="user-name"> <span class="user-name">
<el-icon><Avatar /></el-icon> <el-icon><Avatar /></el-icon>
{{ userStore.userInfo?.dealerName }} {{ userStore.userInfo?.dealerName }}
@ -70,11 +73,14 @@
</el-main> </el-main>
</el-container> </el-container>
<!-- 移动端底部导航 -->
<MobileTabBar v-if="isMobile" />
<!-- 修改密码对话框 --> <!-- 修改密码对话框 -->
<el-dialog <el-dialog
v-model="showChangePasswordDialog" v-model="showChangePasswordDialog"
title="修改密码" title="修改密码"
width="500px" :width="isMobile ? '92%' : '500px'"
@close="handleDialogClose" @close="handleDialogClose"
> >
<el-form ref="formRef" :model="passwordForm" :rules="passwordRules" label-width="100px"> <el-form ref="formRef" :model="passwordForm" :rules="passwordRules" label-width="100px">
@ -118,10 +124,15 @@ import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'elem
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import { changePassword } from '@/api/auth' import { changePassword } from '@/api/auth'
import { hashPassword } from '@/utils/crypto' import { hashPassword } from '@/utils/crypto'
import { useResponsive } from '@/composables/useResponsive'
import MobileTabBar from '@/components/MobileTabBar.vue'
const APP_TITLE = '泊云智销通'
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const userStore = useUserStore() const userStore = useUserStore()
const { isMobile } = useResponsive()
const activeMenu = computed(() => route.path) const activeMenu = computed(() => route.path)
const currentPageTitle = computed(() => route.meta.title as string || '首页') const currentPageTitle = computed(() => route.meta.title as string || '首页')
@ -244,6 +255,19 @@ const handleLogout = async () => {
align-items: center; align-items: center;
} }
.header-left {
display: flex;
align-items: center;
}
/* 默认（PC）：隐藏移动端 logo，显示面包屑 */
.mobile-logo {
display: none;
font-size: 16px;
font-weight: bold;
color: #303133;
}
.user-name { .user-name {
display: flex; display: flex;
align-items: center; align-items: center;
@ -258,4 +282,29 @@ const handleLogout = async () => {
background-color: #f0f2f5; background-color: #f0f2f5;
padding: 20px; padding: 20px;
} }
/* ===== 移动端（≤768px） ===== */
@media (max-width: 768px) {
.el-header {
padding: 0 12px;
}
.breadcrumb {
display: none;
}
.mobile-logo {
display: inline;
}
.el-main {
padding: 12px;
/* 给底部 TabBar（56px + 安全区）留白 */
padding-bottom: calc(56px + env(safe-area-inset-bottom));
}
.user-name .el-tag {
display: none;
}
}
</style> </style>

13
frontend/src/views/Login.vue
View File

@ -89,7 +89,8 @@ const handleLogin = async () => {
} }
.login-box { .login-box {
width: 400px; width: 90%;
max-width: 400px;
padding: 40px; padding: 40px;
background: white; background: white;
border-radius: 10px; border-radius: 10px;
@ -109,4 +110,14 @@ const handleLogin = async () => {
.login-btn { .login-btn {
width: 100%; width: 100%;
} }
@media (max-width: 768px) {
.login-box {
padding: 24px;
}
.login-container {
padding: 16px;
}
}
</style> </style>

114
frontend/src/views/Report.vue
View File

@ -17,7 +17,7 @@
</template> </template>
<!-- 查询表单 --> <!-- 查询表单 -->
<el-form :inline="true" :model="queryForm" class="query-form"> <el-form :inline="!isMobile" :model="queryForm" class="query-form">
<el-form-item label="学校名称"> <el-form-item label="学校名称">
<el-input v-model="queryForm.customerName" placeholder="请输入学校名称" clearable /> <el-input v-model="queryForm.customerName" placeholder="请输入学校名称" clearable />
</el-form-item> </el-form-item>
@ -40,7 +40,7 @@
</el-form> </el-form>
<!-- 数据表格 --> <!-- 数据表格 -->
<el-table :data="tableData" border stripe v-loading="loading"> <el-table v-if="!isMobile" :data="tableData" border stripe v-loading="loading">
<el-table-column prop="dealerName" label="经销商" v-if="userStore.isAdmin"/> <el-table-column prop="dealerName" label="经销商" v-if="userStore.isAdmin"/>
<el-table-column prop="schoolName" label="学校名称" /> <el-table-column prop="schoolName" label="学校名称" />
<el-table-column prop="product" label="所属产品" show-overflow-tooltip /> <el-table-column prop="product" label="所属产品" show-overflow-tooltip />
@ -102,6 +102,36 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 移动端卡片视图 -->
<div v-if="isMobile" class="mobile-card-list" v-loading="loading">
<div v-for="row in tableData" :key="row.id" class="mobile-card">
<div class="card-top">
<span class="card-title">{{ row.schoolName }}</span>
<el-tag v-if="row.status === 0" type="warning" size="small">待审核</el-tag>
<el-tag v-else-if="row.status === 1" type="success" size="small">已通过</el-tag>
<el-tag v-else-if="row.status === 2" type="danger" size="small">已驳回</el-tag>
<el-tag v-else-if="row.status === 3" type="info" size="small">已失效</el-tag>
<el-tag v-else-if="row.status === 4" type="warning" size="small">已作废</el-tag>
</div>
<div v-if="userStore.isAdmin" class="card-row"><span class="label">经销商</span><span class="val">{{ row.dealerName || '-' }}</span></div>
<div class="card-row"><span class="label">所属产品</span><span class="val">{{ row.product || '-' }}</span></div>
<div class="card-row"><span class="label">项目类型</span><span class="val">{{ row.projectType || '-' }}</span></div>
<div class="card-row"><span class="label">负责人</span><span class="val">{{ row.contactPerson || '-' }}</span></div>
<div class="card-row"><span class="label">负责人电话</span><span class="val">{{ row.contactPhone || '-' }}</span></div>
<div class="card-row"><span class="label">报备说明</span><span class="val">{{ row.description || '-' }}</span></div>
<div class="card-row"><span class="label">保护期截止</span><span class="val">{{ formatDate(row.protectEndDate) }}</span></div>
<div class="card-row"><span class="label">创建时间</span><span class="val">{{ row.createdAt }}</span></div>
<div class="card-actions">
<el-button link type="primary" @click="handleView(row)">查看</el-button>
<el-button v-if="row.status === 1" link type="info" @click="handleShowProgress(row)">进展</el-button>
<el-button v-if="userStore.isAdmin && row.status === 0" link type="success" @click="handleAudit(row)">审核</el-button>
<el-button v-if="userStore.isAdmin && row.status === 1" link type="warning" @click="handleEdit(row)">编辑</el-button>
<el-button v-if="!userStore.isAdmin && row.status === 0" link type="danger" @click="handleWithdraw(row)">撤回</el-button>
</div>
</div>
<el-empty v-if="!loading && tableData.length === 0" description="暂无报备数据" />
</div>
<!-- 分页 --> <!-- 分页 -->
<el-config-provider :locale="zhCn"> <el-config-provider :locale="zhCn">
<el-pagination <el-pagination
@ -109,18 +139,18 @@
v-model:page-size="queryForm.size" v-model:page-size="queryForm.size"
:total="total" :total="total"
:page-sizes="[10, 20, 50, 100]" :page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
prev-text="上一页" prev-text="上一页"
next-text="下一页" next-text="下一页"
@size-change="fetchData" @size-change="fetchData"
@current-change="fetchData" @current-change="fetchData"
style="margin-top: 20px; justify-content: flex-end" :style="{ marginTop: '20px', justifyContent: isMobile ? 'center' : 'flex-end' }"
/> />
</el-config-provider> </el-config-provider>
</el-card> </el-card>
<!-- 提交报备对话框 --> <!-- 提交报备对话框 -->
<el-dialog v-model="dialogVisible" title="提交报备" width="650px" @close="handleDialogClose"> <el-dialog v-model="dialogVisible" title="提交报备" :width="isMobile ? '92%' : '650px'" @close="handleDialogClose">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px"> <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="学校" prop="schoolName"> <el-form-item label="学校" prop="schoolName">
<el-autocomplete <el-autocomplete
@ -183,7 +213,7 @@
</el-dialog> </el-dialog>
<!-- 审核对话框 --> <!-- 审核对话框 -->
<el-dialog v-model="auditDialogVisible" title="审核报备" width="600px"> <el-dialog v-model="auditDialogVisible" title="审核报备" :width="isMobile ? '92%' : '600px'">
<el-form :model="auditForm" label-width="100px"> <el-form :model="auditForm" label-width="100px">
<el-form-item label="审核结果"> <el-form-item label="审核结果">
<el-radio-group v-model="auditForm.approved"> <el-radio-group v-model="auditForm.approved">
@ -207,7 +237,7 @@
</el-dialog> </el-dialog>
<!-- 编辑报备对话框 --> <!-- 编辑报备对话框 -->
<el-dialog v-model="editDialogVisible" title="编辑报备" width="600px" @close="handleEditDialogClose"> <el-dialog v-model="editDialogVisible" title="编辑报备" :width="isMobile ? '92%' : '600px'" @close="handleEditDialogClose">
<el-form ref="editFormRef" :model="editFormData" :rules="editRules" label-width="100px"> <el-form ref="editFormRef" :model="editFormData" :rules="editRules" label-width="100px">
<el-form-item label="学校名称"> <el-form-item label="学校名称">
<el-input :model-value="currentReport?.schoolName" disabled /> <el-input :model-value="currentReport?.schoolName" disabled />
@ -270,8 +300,8 @@
</el-dialog> </el-dialog>
<!-- 报备详情对话框 --> <!-- 报备详情对话框 -->
<el-dialog v-model="detailDialogVisible" title="报备详情" width="700px"> <el-dialog v-model="detailDialogVisible" title="报备详情" :width="isMobile ? '92%' : '700px'">
<el-descriptions :column="2" border> <el-descriptions :column="isMobile ? 1 : 2" border>
<el-descriptions-item label="经销商"> <el-descriptions-item label="经销商">
{{ currentReport?.dealerName || '-' }} {{ currentReport?.dealerName || '-' }}
</el-descriptions-item> </el-descriptions-item>
@ -330,7 +360,7 @@
</el-dialog> </el-dialog>
<!-- 进展记录对话框 --> <!-- 进展记录对话框 -->
<el-dialog v-model="progressDialogVisible" title="报备进展记录" width="1000px" @close="handleProgressDialogClose"> <el-dialog v-model="progressDialogVisible" title="报备进展记录" :width="isMobile ? '92%' : '1000px'" :fullscreen="isMobile" @close="handleProgressDialogClose">
<el-card> <el-card>
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
@ -387,11 +417,13 @@ import { getProgressByReportId, createProgress, updateProgress } from '@/api/rep
import { searchSchoolByName } from '@/api/school' import { searchSchoolByName } from '@/api/school'
import { getConfigValue } from '@/api/system' import { getConfigValue } from '@/api/system'
import type { Report, ReportForm, ReportProgress, ReportProgressForm, ReportUpdateForm } from '@/types' import type { Report, ReportForm, ReportProgress, ReportProgressForm, ReportUpdateForm } from '@/types'
import { useResponsive } from '@/composables/useResponsive'
const route = useRoute() const route = useRoute()
const userStore = useUserStore() const userStore = useUserStore()
const protectDays = ref<number>(90) const protectDays = ref<number>(90)
const { isMobile } = useResponsive()
const loading = ref(false) const loading = ref(false)
const tableData = ref<Report[]>([]) const tableData = ref<Report[]>([])
@ -792,4 +824,66 @@ onMounted(() => {
:deep(.el-descriptions__content) { :deep(.el-descriptions__content) {
color: #333; color: #333;
} }
/* ===== 移动端卡片视图 ===== */
.mobile-card-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-card {
background: #fff;
border: 1px solid #ebeef5;
border-radius: 8px;
padding: 12px;
}
.card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.card-title {
font-size: 15px;
font-weight: 600;
color: #303133;
}
.card-row {
display: flex;
align-items: flex-start;
font-size: 13px;
color: #606266;
line-height: 1.8;
}
.card-row .label {
width: 80px;
flex-shrink: 0;
color: #909399;
}
.card-row .val {
flex: 1;
word-break: break-all;
}
.card-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #f0f0f0;
}
@media (max-width: 768px) {
.card-header {
flex-wrap: wrap;
gap: 10px;
}
}
</style> </style>

16
frontend/src/views/SystemConfig.vue
View File

@ -20,7 +20,7 @@
修改配置后立即生效，请谨慎操作。保护期天数的修改仅影响新生成的报备。 修改配置后立即生效，请谨慎操作。保护期天数的修改仅影响新生成的报备。
</el-alert> </el-alert>
<el-form :model="formData" label-width="150px"> <el-form :model="formData" :label-position="isMobile ? 'top' : 'right'" label-width="150px">
<el-divider content-position="left">报备配置</el-divider> <el-divider content-position="left">报备配置</el-divider>
<el-form-item label="保护期天数"> <el-form-item label="保护期天数">
@ -30,7 +30,7 @@
:max="365" :max="365"
:step="1" :step="1"
controls-position="right" controls-position="right"
style="width: 200px" :style="{ width: isMobile ? '100%' : '200px' }"
/> />
<span style="margin-left: 10px; color: #909399">天</span> <span style="margin-left: 10px; color: #909399">天</span>
<div style="margin-top: 5px; color: #909399; font-size: 12px"> <div style="margin-top: 5px; color: #909399; font-size: 12px">
@ -51,7 +51,7 @@
<el-divider content-position="left">当前配置状态</el-divider> <el-divider content-position="left">当前配置状态</el-divider>
<el-descriptions :column="2" border> <el-descriptions :column="isMobile ? 1 : 2" border>
<el-descriptions-item label="当前保护期天数"> <el-descriptions-item label="当前保护期天数">
{{ configs.find(c => c.configKey === 'report.protect.days')?.configValue || 90 }} 天 {{ configs.find(c => c.configKey === 'report.protect.days')?.configValue || 90 }} 天
</el-descriptions-item> </el-descriptions-item>
@ -72,6 +72,9 @@ import { ElMessage } from 'element-plus'
import { Check } from '@element-plus/icons-vue' import { Check } from '@element-plus/icons-vue'
import { getAllConfigs, batchUpdateConfigs } from '@/api/system' import { getAllConfigs, batchUpdateConfigs } from '@/api/system'
import type { SystemConfig } from '@/types' import type { SystemConfig } from '@/types'
import { useResponsive } from '@/composables/useResponsive'
const { isMobile } = useResponsive()
const configs = ref<SystemConfig[]>([]) const configs = ref<SystemConfig[]>([])
const saving = ref(false) const saving = ref(false)
@ -143,4 +146,11 @@ onMounted(() => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
@media (max-width: 768px) {
.card-header {
flex-wrap: wrap;
gap: 10px;
}
}
</style> </style>