niuniu/ShiErFeng
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整部分前端布局和后端增删改逻辑

Browse Source
This commit is contained in:
焦龙言
2026-09-28 18:29:10 +08:00
parent 17d991a74a
commit a539b4eb71
57 changed files with 87382 additions and 895 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shierfeng-fastapi-app/src/components/business/TestBatchBanner.vue
+65 -9
View File
@@ -1,14 +1,11 @@
<template>
<view
v-if="testBatchStore.isTestMode"
class="flex items-start gap-3 rounded-xl border border-red-300 bg-red-50 px-3 py-3"
>
<view class="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-red-500 text-white">
<view class="i-mdi-flask-outline text-sm"></view>
<view v-if="testBatchStore.isTestMode" class="test-batch-banner">
<view class="test-batch-icon">
<view class="i-mdi-flask-outline test-batch-icon-glyph"></view>
</view>
<view class="min-w-0">
<text class="block text-sm font-bold text-red-700">测试数据</text>
<text class="mt-0.5 block break-all text-xs leading-5 text-red-600">
<view class="test-batch-copy">
<text class="test-batch-title">测试数据</text>
<text class="test-batch-value">
当前批次：{{ testBatchStore.currentBatchName || "已选测试批次" }}
</text>
</view>
@@ -20,3 +17,62 @@ import { useTestBatchStore } from "@/store";
const testBatchStore = useTestBatchStore();
</script>
<style lang="scss" scoped>
.test-batch-banner {
display: flex;
width: 100%;
min-width: 0;
box-sizing: border-box;
align-items: flex-start;
gap: 12rpx;
margin-top: 18rpx;
border: 1rpx solid #f1b8b4;
border-radius: 16rpx;
padding: 16rpx;
background: #fff5f4;
}
.test-batch-icon {
display: flex;
width: 52rpx;
height: 52rpx;
flex: 0 0 52rpx;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #d9534f;
color: #ffffff;
}
.test-batch-icon-glyph {
font-size: 28rpx;
}
.test-batch-copy {
min-width: 0;
flex: 1;
}
.test-batch-title,
.test-batch-value {
display: block;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.test-batch-title {
color: #b42318;
font-size: 24rpx;
font-weight: 700;
line-height: 1.4;
}
.test-batch-value {
margin-top: 5rpx;
color: #c2413b;
font-size: 22rpx;
line-height: 1.55;
}
</style>
shierfeng-fastapi-app/src/components/business/TestBatchModeSwitch.vue
+218 -19
View File
@@ -1,24 +1,24 @@
<template>
<view class="space-y-3 rounded-2xl bg-white p-4 shadow-sm">
<view class="flex items-center justify-between gap-3">
<view class="min-w-0">
<text class="block text-sm font-bold text-gray-800">数据模式</text>
<text class="mt-1 block text-xs text-gray-500">
<view class="test-batch-switch">
<view class="mode-switch-header">
<view class="mode-switch-copy">
<text class="mode-switch-title">数据模式</text>
<text class="mode-switch-description">
{{ testBatchStore.isTestMode ? "当前操作隔离在测试批次" : "当前使用正式数据" }}
</text>
</view>
<text
:class="testBatchStore.isTestMode ? 'border-red-300 bg-red-50 text-red-700' : 'border-gray-200 bg-gray-50 text-gray-600'"
class="shrink-0 rounded-full border px-2.5 py-1 text-xs font-semibold"
class="mode-switch-status"
:class="testBatchStore.isTestMode ? 'is-test' : 'is-formal'"
>
{{ testBatchStore.isTestMode ? "测试数据" : "正式数据" }}
</text>
</view>
<view class="flex rounded-xl bg-gray-100 p-1">
<view class="mode-switch-controls">
<button
class="flex-1 rounded-lg py-2 text-xs transition-colors"
:class="!testBatchStore.isTestMode ? 'bg-white font-semibold text-gray-800 shadow-sm' : 'text-gray-500'"
class="mode-switch-button"
:class="{ active: !testBatchStore.isTestMode }"
:disabled="loading"
size="mini"
@click="handleModeClick('formal')"
@@ -26,8 +26,8 @@
正式
</button>
<button
class="flex-1 rounded-lg py-2 text-xs transition-colors"
:class="testBatchStore.isTestMode ? 'bg-red-500 font-semibold text-white shadow-sm' : 'text-gray-500'"
class="mode-switch-button"
:class="{ 'active-test': testBatchStore.isTestMode }"
:disabled="loading || !activeOptions.length"
size="mini"
@click="handleModeClick('test')"
@@ -36,8 +36,11 @@
</button>
</view>
<view v-if="testBatchStore.isTestMode || activeOptions.length" class="space-y-1">
<text class="block text-xs text-gray-500">测试批次</text>
<view
v-if="testBatchStore.isTestMode || activeOptions.length"
class="test-batch-picker-row"
>
<text class="test-batch-picker-label-title">测试批次</text>
<picker
:range="activeOptions"
range-key="batchName"
@@ -45,15 +48,23 @@
:disabled="loading || !activeOptions.length"
@change="handleBatchChange"
>
<view class="rounded-xl bg-gray-50 px-3 py-3 text-sm text-gray-700">
{{ selectedBatch?.batchName || (loading ? "加载中..." : "暂无可用测试批次") }}
<view class="test-batch-picker">
<text class="test-batch-picker-label">
{{ selectedBatch?.batchName || (loading ? "加载中..." : "暂无可用测试批次") }}
</text>
<view class="i-mdi-chevron-down test-batch-picker-arrow"></view>
</view>
</picker>
</view>
<view v-if="loadError" class="flex items-center justify-between gap-2 rounded-lg bg-orange-50 px-3 py-2">
<text class="min-w-0 text-xs leading-5 text-orange-700">{{ loadError }}</text>
<button class="shrink-0 text-xs text-orange-700" size="mini" :disabled="loading" @click="loadOptions">
<view v-if="loadError" class="mode-switch-error">
<text class="mode-switch-error-text">{{ loadError }}</text>
<button
class="mode-switch-retry"
size="mini"
:disabled="loading"
@click="loadOptions"
>
重试
</button>
</view>
@@ -151,3 +162,191 @@ async function handleBatchChange(event) {
onMounted(loadOptions);
</script>
<style lang="scss" scoped>
.test-batch-switch {
width: 100%;
min-width: 0;
box-sizing: border-box;
border: 1rpx solid #e5eeee;
border-radius: 20rpx;
padding: 22rpx;
background: #ffffff;
box-shadow: 0 8rpx 24rpx rgba(40, 34, 92, 0.06);
}
.mode-switch-header {
display: flex;
min-width: 0;
align-items: flex-start;
justify-content: space-between;
gap: 14rpx;
}
.mode-switch-copy {
min-width: 0;
flex: 1;
}
.mode-switch-title,
.mode-switch-description,
.test-batch-picker-label-title,
.test-batch-picker-label,
.mode-switch-error-text {
display: block;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.mode-switch-title {
color: #28225c;
font-size: 26rpx;
font-weight: 700;
line-height: 1.4;
}
.mode-switch-description {
margin-top: 5rpx;
color: #8b969d;
font-size: 21rpx;
line-height: 1.5;
}
.mode-switch-status {
flex: 0 0 auto;
border: 1rpx solid #dce7e7;
border-radius: 999rpx;
padding: 7rpx 12rpx;
font-size: 20rpx;
line-height: 1.3;
}
.mode-switch-status.is-formal {
border-color: #dce7e7;
background: #f5f8f8;
color: #64727a;
}
.mode-switch-status.is-test {
border-color: #f1b8b4;
background: #fff1f0;
color: #b42318;
}
.mode-switch-controls {
display: flex;
width: 100%;
min-width: 0;
gap: 10rpx;
margin-top: 18rpx;
border-radius: 12rpx;
padding: 5rpx;
background: #f1f5f5;
}
.mode-switch-button {
width: auto;
min-width: 0;
height: 64rpx;
flex: 1;
margin: 0;
border: 0;
border-radius: 9rpx;
background: transparent;
color: #748087;
font-size: 23rpx;
line-height: 64rpx;
}
.mode-switch-button::after,
.mode-switch-retry::after {
border: 0;
}
.mode-switch-button.active {
background: #ffffff;
box-shadow: 0 4rpx 10rpx rgba(40, 34, 92, 0.08);
color: #28225c;
font-weight: 700;
}
.mode-switch-button.active-test {
background: #d9534f;
box-shadow: 0 4rpx 10rpx rgba(217, 83, 79, 0.18);
color: #ffffff;
font-weight: 700;
}
.test-batch-picker-row {
min-width: 0;
margin-top: 18rpx;
}
.test-batch-picker-label-title {
color: #6c7786;
font-size: 21rpx;
line-height: 1.4;
}
.test-batch-picker {
display: flex;
width: 100%;
min-width: 0;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
gap: 12rpx;
margin-top: 8rpx;
border: 1rpx solid #e0eaea;
border-radius: 12rpx;
padding: 16rpx;
background: #fbfdfd;
}
.test-batch-picker-label {
flex: 1;
color: #47545c;
font-size: 23rpx;
line-height: 1.5;
}
.test-batch-picker-arrow {
flex: 0 0 30rpx;
color: #96a5a9;
font-size: 30rpx;
}
.mode-switch-error {
display: flex;
min-width: 0;
align-items: center;
gap: 10rpx;
margin-top: 14rpx;
border-radius: 10rpx;
padding: 10rpx 12rpx;
background: #fff8ed;
}
.mode-switch-error-text {
flex: 1;
color: #a15c00;
font-size: 21rpx;
line-height: 1.5;
}
.mode-switch-retry {
width: auto;
min-width: 74rpx;
height: 52rpx;
flex: 0 0 auto;
margin: 0;
padding: 0 12rpx;
border: 0;
border-radius: 8rpx;
background: #fff0d6;
color: #a15c00;
font-size: 20rpx;
line-height: 52rpx;
}
</style>