add problem extra file tab

hoj-springboot/DataBackup/src/main/java/top/hcode/hoj/controller/oj/ProblemController.java

@@ -237,7 +237,6 @@ public class ProblemController {
     public CommonResult getProblemInfo(@RequestParam(value = "problemId", required = true) String problemId) {
 
         QueryWrapper<Problem> wrapper = new QueryWrapper<Problem>().eq("problem_id", problemId);
-
         //查询题目详情，题目标签，题目语言，题目做题情况
         Problem problem = problemService.getOne(wrapper, false);
         if (problem == null) {
@@ -284,6 +283,11 @@ public class ProblemController {
                 LangNameAndCode.put(tmpMap.get(codeTemplate.getLid()), codeTemplate.getCode());
             }
         }
+        // 屏蔽一些题目参数
+        problem.setJudgeExtraFile(null)
+                .setSpjCode(null)
+                .setSpjLanguage(null);
+
         // 将数据统一写入到一个Vo返回数据实体类中
         ProblemInfoVo problemInfoVo = new ProblemInfoVo(problem, tags, languagesStr, problemCount, LangNameAndCode);
         return CommonResult.successResponse(problemInfoVo, "获取成功");

hoj-vue/src/common/utils.js

@@ -92,6 +92,19 @@ function downloadFile (url) {
   })
 }
 
+function downloadFileByText (fileName,fileContent) {
+  return new Promise((resolve, reject) => {
+      let link = document.createElement('a')
+      link.href = window.URL.createObjectURL(new window.Blob([fileContent], {type:'text/plain;charset=utf-8'}))
+      link.download = fileName
+      document.body.appendChild(link)
+      link.click()
+      link.remove()
+      myMessage.success("Download Successfully!")
+      resolve()
+  })
+}
+
 function getLanguages (all=true) {
   return new Promise((resolve, reject) => {
     let languages = storage.get(STORAGE_KEY.languages)
@@ -138,6 +151,7 @@ export default {
   filterEmptyValue: filterEmptyValue,
   breakLongWords: breakLongWords,
   downloadFile: downloadFile,
+  downloadFileByText:downloadFileByText,
   getLanguages:getLanguages,
   stringToExamples:stringToExamples,
   examplesToString:examplesToString

hoj-vue/src/components/admin/AddExtraFile.vue

@@ -9,7 +9,7 @@
       @close="deleteFile(key)"
       @click="openFileDialog(key, value)"
     >
-      {{ key }}
+      <i class="fa fa-file-code-o"> {{ key }}</i>
     </el-tag>
 
     <el-button

hoj-vue/src/i18n/oj/en-US.js

@@ -171,6 +171,7 @@ export const m = {
   // /views/oj/problem/Problem.vue
   Problem_Description:'Problem Description',
   My_Submission:'My Submission',
+  Problem_Annex:'Problem Annex',
   Login_to_view_your_submission_history:'Login to view your submission history',
   Shrink_Sidebar:'Shrink Sidebar',
   View_Problem_Content:'View Problem Content',

hoj-vue/src/i18n/oj/zh-CN.js

@@ -172,6 +172,7 @@ export const m = {
   // /views/oj/problem/Problem.vue
   Problem_Description:'题目描述',
   My_Submission:'我的提交',
+  Problem_Annex:'题目附件',
   Login_to_view_your_submission_history:'登录以查看您的提交记录',
   Shrink_Sidebar:'收缩侧边栏',
   View_Problem_Content:'查看题目内容',

hoj-vue/src/views/oj/problem/Problem.vue

@@ -11,9 +11,10 @@
           >
             <el-tab-pane name="problemDetail" v-loading="loading">
               <span slot="label"
-                ><i class="fa fa-list-alt"></i>
+                ><i class="fa fa-list-alt">
-                {{ $t('m.Problem_Description') }}</span
+                  {{ $t('m.Problem_Description') }}</i
-              >
+                >
+              </span>
               <div :padding="10" shadow class="problem-detail">
                 <div slot="header" class="panel-title">
                   <span>{{ problemData.problem.title }}</span
@@ -395,6 +396,42 @@
                 </div>
               </template>
             </el-tab-pane>
+
+            <el-tab-pane name="extraFile" v-if="userExtraFile">
+              <span slot="label"
+                ><i class="fa fa-file-code-o"> {{ $t('m.Problem_Annex') }}</i>
+              </span>
+              <div class="problem-detail">
+                <el-divider></el-divider>
+                <div>
+                  <el-tag
+                    :key="index"
+                    v-for="(value, key, index) in userExtraFile"
+                    class="extra-file"
+                    :disable-transitions="false"
+                    @click="showExtraFileContent(key, value)"
+                  >
+                    <i class="fa fa-file-code-o"> {{ key }}</i>
+                  </el-tag>
+                </div>
+                <el-divider></el-divider>
+
+                <div class="markdown-body" v-if="fileContent">
+                  <h3>
+                    {{ fileName }}
+                    <el-button
+                      type="primary"
+                      icon="el-icon-download"
+                      size="small"
+                      circle
+                      @click="downloadExtraFile"
+                      class="file-download"
+                    ></el-button>
+                  </h3>
+                  <pre v-highlight="fileContent"><code class="c++"></code></pre>
+                </div>
+              </div>
+            </el-tab-pane>
           </el-tabs>
         </el-col>
         <div
@@ -707,6 +744,9 @@ export default {
       mySubmissions: [],
       loading: false,
       bodyClass: '',
+      userExtraFile: null,
+      fileContent: '',
+      fileName: '',
     };
   },
   // 获取缓存中的该题的做题代码，代码语言，代码风格
@@ -946,6 +986,9 @@ export default {
               result.problem.hint.toString()
             );
           }
+          if (result.problem.userExtraFile) {
+            this.userExtraFile = JSON.parse(result.problem.userExtraFile);
+          }
 
           this.problemData = result;
 
@@ -1273,6 +1316,17 @@ export default {
       );
     },
 
+    showExtraFileContent(name, content) {
+      this.fileName = name;
+      this.fileContent = content;
+      this.$nextTick((_) => {
+        addCodeBtn();
+      });
+    },
+    downloadExtraFile() {
+      utils.downloadFileByText(this.fileName, this.fileContent);
+    },
+
     calcOIRankScore(score, difficulty) {
       return 0.1 * score + 2 * difficulty;
     },
@@ -1404,6 +1458,16 @@ a {
   font-size: 14px;
 }
 
+.extra-file {
+  margin: 10px;
+  cursor: pointer;
+}
+.file-download {
+  vertical-align: bottom;
+  float: right;
+  margin-right: 5px;
+}
+
 .submit-detail {
   height: 100%;
 }