pl2z38qho
/
moxun
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改1

Browse Source
main
LiRen-qiu 5 months ago
parent 9df7b13034
commit 21d27c9006
1 changed files with 196 additions and 103 deletions
Show Stats Download Patch File Download Diff File

299
src/vue_project/src/components/MainPage.vue
Unescape View File

@ -10,6 +10,18 @@
<!-- 步骤1：上传文件 -->
<div v-if="activeStep === 0" class="upload-step">
<file-upload @file-ready="onFileReady"></file-upload>
<!-- 步骤导航按钮 - 添加在步骤内容底部 -->
<div class="step-navigation-buttons">
<el-button
v-if="stepResults[0]"
type="primary"
@click="nextStep"
icon="el-icon-arrow-right"
class="next-button">
下一步
</el-button>
</div>
</div>
<!-- 步骤2：预处理 -->
@ -33,7 +45,7 @@
<el-switch v-model="preprocessSettings.removeSpecialChars"></el-switch>
</el-form-item>
</el-form>
<el-button type="primary" @click="processStep(1)">开始预处理</el-button>
</div>
<div class="result-panel" v-if="stepResults[1]">
@ -67,6 +79,19 @@
</div>
</div>
</div>
<!-- 步骤导航按钮 - 添加在步骤内容底部 -->
<div class="step-navigation-buttons">
<el-button v-if="activeStep > 0" icon="el-icon-arrow-left" @click="prevStep">返回</el-button>
<el-button
v-if="activeStep < 4 && stepResults[activeStep]"
type="primary"
@click="nextStep"
icon="el-icon-arrow-right"
class="next-button">
下一步
</el-button>
</div>
</div>
<!-- 步骤3：合并格式 -->
@ -93,7 +118,7 @@
<el-switch v-model="mergeSettings.generateUniqueIds"></el-switch>
</el-form-item>
</el-form>
<el-button type="primary" @click="processStep(2)">开始合并</el-button>
</div>
<div class="result-panel" v-if="stepResults[2]">
@ -127,6 +152,19 @@
</div>
</div>
</div>
<!-- 步骤导航按钮 - 添加在步骤内容底部 -->
<div class="step-navigation-buttons">
<el-button v-if="activeStep > 0" icon="el-icon-arrow-left" @click="prevStep">返回</el-button>
<el-button
v-if="activeStep < 4 && stepResults[activeStep]"
type="primary"
@click="nextStep"
icon="el-icon-arrow-right"
class="next-button">
下一步
</el-button>
</div>
</div>
<!-- 步骤4：单词纠错 -->
@ -154,7 +192,7 @@
</el-select>
</el-form-item>
</el-form>
<el-button type="primary" @click="processStep(3)">开始纠错</el-button>
</div>
<div class="result-panel" v-if="stepResults[3]">
@ -185,6 +223,19 @@
</div>
</div>
</div>
<!-- 步骤导航按钮 - 添加在步骤内容底部 -->
<div class="step-navigation-buttons">
<el-button v-if="activeStep > 0" icon="el-icon-arrow-left" @click="prevStep">返回</el-button>
<el-button
v-if="activeStep < 4 && stepResults[activeStep]"
type="primary"
@click="nextStep"
icon="el-icon-arrow-right"
class="next-button">
下一步
</el-button>
</div>
</div>
<!-- 步骤5：大模型分析 -->
@ -217,7 +268,7 @@
</el-checkbox-group>
</el-form-item>
</el-form>
<el-button type="primary" @click="processStep(4)">开始分析</el-button>
</div>
<div class="result-panel" v-if="stepResults[4]">
@ -288,6 +339,18 @@
</div>
</div>
</div>
<!-- 步骤导航按钮 - 添加在步骤内容底部 -->
<div class="step-navigation-buttons">
<el-button v-if="activeStep > 0" icon="el-icon-arrow-left" @click="prevStep">返回</el-button>
<el-button
v-if="activeStep === 4 && stepResults[4]"
type="success"
icon="el-icon-download"
@click="exportFinalResults">
导出分析结果
</el-button>
</div>
</div>
</div>
@ -295,64 +358,58 @@
<div class="bottom-steps-container">
<div class="steps-background">
<div class="steps-wrapper">
<!-- 新的步骤指示器样式 -->
<div class="steps-flow">
<!-- 重新设计的步骤流程 -->
<div class="steps-flow-container">
<!-- 步骤1 -->
<div class="step-circle" :class="{ 'active': activeStep >= 0, 'completed': stepResults[0] }">1</div>
<div class="step-item-container">
<div class="step-circle" :class="{ 'active': activeStep === 0, 'completed': stepResults[0] }">1</div>
<div class="step-button-box" :class="{ 'active': activeStep === 0, 'completed': stepResults[0] }" @click="handleFileUploadClick">
<i class="el-icon-upload2"></i>
<div class="step-text">上传文件</div>
</div>
</div>
<!-- 连接线 -->
<div class="step-connector"></div>
<!-- 步骤2 -->
<div class="step-circle" :class="{ 'active': activeStep >= 1, 'completed': stepResults[1] }">2</div>
<div class="step-item-container">
<div class="step-circle" :class="{ 'active': activeStep === 1, 'completed': stepResults[1] }">2</div>
<div class="step-button-box" :class="{ 'active': activeStep === 1, 'completed': stepResults[1], 'disabled': !stepResults[0] }" @click="goToStep(1)">
<div class="step-text">预处理</div>
</div>
</div>
<!-- 连接线 -->
<div class="step-connector"></div>
<!-- 步骤3 -->
<div class="step-circle" :class="{ 'active': activeStep >= 2, 'completed': stepResults[2] }">3</div>
<div class="step-item-container">
<div class="step-circle" :class="{ 'active': activeStep === 2, 'completed': stepResults[2] }">3</div>
<div class="step-button-box" :class="{ 'active': activeStep === 2, 'completed': stepResults[2], 'disabled': !stepResults[1] }" @click="goToStep(2)">
<div class="step-text">合并格式</div>
</div>
</div>
<!-- 连接线 -->
<div class="step-connector"></div>
<!-- 步骤4 -->
<div class="step-circle" :class="{ 'active': activeStep >= 3, 'completed': stepResults[3] }">4</div>
<div class="step-item-container">
<div class="step-circle" :class="{ 'active': activeStep === 3, 'completed': stepResults[3] }">4</div>
<div class="step-button-box" :class="{ 'active': activeStep === 3, 'completed': stepResults[3], 'disabled': !stepResults[2] }" @click="goToStep(3)">
<div class="step-text">单词纠错</div>
</div>
</div>
<!-- 连接线 -->
<div class="step-connector"></div>
<!-- 步骤5 -->
<div class="step-circle" :class="{ 'active': activeStep >= 4, 'completed': stepResults[4] }">5</div>
</div>
<!-- 按钮区域 -->
<div class="step-buttons-container">
<!-- 步骤1按钮 -->
<div class="step-button-wrapper">
<div class="step-button" :class="{ 'active': activeStep === 0 }" @click="goToStep(0)">
<div class="btn-icon"><i class="el-icon-upload2"></i></div>
<div class="btn-text">上传文件</div>
</div>
</div>
<!-- 步骤2按钮 -->
<div class="step-button-wrapper">
<div class="step-button" :class="{ 'active': activeStep === 1, 'disabled': !stepResults[0] }" @click="goToStep(1)">
<div class="btn-text">预处理</div>
</div>
</div>
<!-- 步骤3按钮 -->
<div class="step-button-wrapper">
<div class="step-button" :class="{ 'active': activeStep === 2, 'disabled': !stepResults[1] }" @click="goToStep(2)">
<div class="btn-text">合并格式</div>
</div>
</div>
<!-- 步骤4按钮 -->
<div class="step-button-wrapper">
<div class="step-button" :class="{ 'active': activeStep === 3, 'disabled': !stepResults[2] }" @click="goToStep(3)">
<div class="btn-text">单词纠错</div>
</div>
</div>
<!-- 步骤5按钮 -->
<div class="step-button-wrapper">
<div class="step-button" :class="{ 'active': activeStep === 4, 'disabled': !stepResults[3] }" @click="goToStep(4)">
<div class="btn-text">大模型分析</div>
<div class="step-item-container">
<div class="step-circle" :class="{ 'active': activeStep === 4, 'completed': stepResults[4] }">5</div>
<div class="step-button-box" :class="{ 'active': activeStep === 4, 'completed': stepResults[4], 'disabled': !stepResults[3] }" @click="goToStep(4)">
<div class="step-text">大模型分析</div>
</div>
</div>
</div>
@ -360,10 +417,9 @@
</div>
</div>
<!-- 只保留返回按钮和导出结果按钮 -->
<div class="step-navigation">
<el-button v-if="activeStep > 0" icon="el-icon-arrow-left" @click="prevStep">返回</el-button>
<el-button v-if="activeStep === 4 && stepResults[4]" type="success" icon="el-icon-download" @click="exportFinalResults">导出分析结果</el-button>
<!-- 移除底部的导出结果按钮，因为现在已添加到内容区域 -->
<div class="step-navigation" v-if="false">
<el-button type="success" icon="el-icon-download" @click="exportFinalResults">导出分析结果</el-button>
</div>
</div>
</template>
@ -466,7 +522,16 @@ export default {
},
prevStep() {
if (this.activeStep > 0) {
// 保存当前步骤，用于后续重置
const currentStep = this.activeStep;
// 转到上一步
this.activeStep -= 1;
// 重置后续步骤的完成状态
for (let i = currentStep; i <= 4; i++) {
this.stepResults[i] = false;
}
}
},
goToStep(step) {
@ -527,6 +592,23 @@ export default {
openUploadDialog() {
// 这个方法用于在底部步骤中点击"选择文件"按钮时触发上传文件功能
// 在实际应用中，可能需要调用子组件的方法或显示一个文件选择对话框
},
// 新增处理上传文件点击的方法
handleFileUploadClick() {
// 如果是第一步，触发文件上传
if (this.activeStep === 0) {
// 通过DOM触发文件上传组件中的上传按钮点击
const uploadInput = document.querySelector('.upload-area .el-upload__input');
if (uploadInput) {
uploadInput.click();
} else {
// 如果无法直接触发，设置activeStep确保显示上传组件
this.activeStep = 0;
}
} else {
// 如果不是第一步，导航到第一步
this.goToStep(0);
}
}
}
};
@ -648,7 +730,7 @@ export default {
.steps-background {
background-color: #f0f9ff;
padding: 30px 0;
padding: 60px 0 30px;
background-image: linear-gradient(to bottom, #87cefa 0%, #1e90ff 100%);
border-top: 1px solid #d1e9ff;
}
@ -660,18 +742,25 @@ export default {
}
/* 新的流程步骤样式 */
.steps-flow {
.steps-flow-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}
.step-item-container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
width: 180px;
}
.step-circle {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
background-color: #bdbdbd; /* 默认灰色 */
color: white;
display: flex;
justify-content: center;
@ -682,10 +771,12 @@ export default {
border: 2px solid white;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
z-index: 2;
}
.step-circle.active, .step-circle.completed {
background-color: #67c23a;
background-color: #67c23a; /* 活动或已完成为绿色 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
@ -693,83 +784,67 @@ export default {
height: 2px;
background-color: rgba(255, 255, 255, 0.7);
flex-grow: 1;
max-width: 100px;
max-width: 60px;
margin: 0 5px;
position: relative;
top: -40px; /* 调整连接线的位置，使其与圆圈中心对齐 */
z-index: 1;
}
/* 按钮样式 */
.step-buttons-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 20px;
}
.step-button-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 180px;
}
.step-button {
background-color: #f5f7fa;
border: 1px solid #dcdfe6;
/* 新的方框按钮样式 */
.step-button-box {
background-color: #bdbdbd; /* 默认灰色 */
border: none;
border-radius: 4px;
padding: 12px 15px;
padding: 15px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
width: 100%;
height: 50px;
width: 150px;
height: 60px;
color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.step-button:hover {
background-color: #ecf5ff;
border-color: #c6e2ff;
.step-button-box:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.step-button.active {
background-color: #ecf5ff;
border-color: #409eff;
color: #409eff;
.step-button-box.active, .step-button-box.completed {
background-color: #67c23a; /* 活动或已完成为绿色 */
}
.step-button.disabled {
.step-button-box.disabled {
cursor: not-allowed;
opacity: 0.6;
background-color: #f5f7fa;
border-color: #dcdfe6;
color: #c0c4cc;
}
.btn-icon {
.el-icon-upload2 {
font-size: 20px;
margin-bottom: 5px;
}
.btn-text {
font-size: 14px;
.step-text {
font-size: 16px;
font-weight: 500;
}
.step-hint {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
margin-top: 5px;
/* 删除不需要的样式 */
.steps-flow, .step-buttons-container, .step-button-wrapper, .step-button, .step-hint, .btn-icon, .btn-text {
display: none;
}
/* 调整导航按钮位置 */
.step-navigation {
display: flex;
justify-content: space-between;
/* 添加返回按钮容器样式 */
.back-button-container {
max-width: 1200px;
margin: 20px auto;
margin: 0 auto 20px;
padding: 0 20px;
display: flex;
justify-content: flex-start;
}
.chart-placeholder {
@ -824,4 +899,22 @@ export default {
border-radius: 15px;
background-color: rgba(0,0,0,0.03);
}
/* 添加新的步骤导航按钮样式 */
.step-navigation-buttons {
display: flex;
justify-content: space-between;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #ebeef5;
}
.next-button {
margin-left: auto;
}
/* 将返回按钮容器设置为不显示，因为我们已将返回按钮移到了内容区 */
.back-button-container {
display: none;
}
</style>
Write Preview
Loading…
Cancel
Save