change: Add fold lines, length limits and modify page element layout

src/api/index.js

@@ -111,6 +111,8 @@ service.interceptors.response.use(
       message = getErrMsg(response.data.details);
     } else if (response.status == 400 && response.data?.error) {
       message = getErrMsg(response.data.error);
+    } else if (response.status == 400 && response.data?.non_field_errors?.length > 0) {
+      message = getErrMsg(response.data.non_field_errors[0]);
     } else if (response.status == 401 && response.data?.error) {
       message = getErrMsg(response.data.error);
     } else if (response.status == 401 && response.data?.detail) {

src/components/Editor.vue

@@ -29,6 +29,7 @@ const toolbarConfig = {
 };
 const editorConfig = {
   placeholder: '',
+  maxLength: 5000,
   MENU_CONF: {
     uploadImage: {
       server: import.meta.env.VITE_APP_BASE_API + '/api/web/upload_image/',

src/components/TopNav.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="top-right">
       <!-- <lang-select></lang-select> -->
-      <el-divider direction="vertical" style="border-color: #394253; height: 32px; margin: 0 24px" />
+      <!-- <el-divider direction="vertical" style="border-color: #394253; height: 32px; margin: 0 24px" /> -->
       <el-popover
         v-if="store.state.token"
         ref="popperRef"

src/lang/en.js

@@ -29,7 +29,7 @@ export default {
   systemInterface: 'System interface',
   exception: 'exception',
   interfaceTimeout: 'Interface request timeout',
-  interfaceException: 'Interface connection exception',
+  interfaceException: 'Network connection error',
   login: {
     username: 'User name',
     password: 'Password',
@@ -207,9 +207,7 @@ export default {
   },
   participate: {
     continue: 'Continue',
-    accept_text1: 'please accept the',
-    accept_text2: 'rules and terms',
-    accept_text3: 'in order to participate.',
+    accept_text: 'Please read and accept the rules and conditions.',
     accept_label: 'I accept the terms and conditions.',
   },
   submission: {
@@ -282,17 +280,17 @@ export default {
     editChall: 'Edit Challenge',
     title: 'Title',
     titlePH: 'Autonomous Driving Algorithms Challenge',
-    shortDesc: 'Short_description',
+    shortDesc: 'Short description',
     shortDescPH: 'Autonomous Driving Algorithm Challenge for each submission',
     desc: 'Description',
-    evaluation: 'Evaluation_details',
-    termsConditions: 'Terms_and_conditions',
+    evaluation: 'Evaluation details',
+    termsConditions: 'Terms and conditions',
     image: 'Image',
     imagePH: 'Please upload logo jpg format is supported',
-    SubmiGuide: 'Submission_guidelines',
-    lbDesc: 'Leaderboard_description',
-    startDate: 'Start_date',
-    endDate: 'End_date',
+    SubmiGuide: 'Submission guidelines',
+    lbDesc: 'Leaderboard description',
+    startDate: 'Start date',
+    endDate: 'End date',
     published: 'Published',
     createSuccess: 'Contest creation success',
     updateSuccess: 'Challenge updated successfully!',
@@ -302,18 +300,18 @@ export default {
     editPhase: 'Edit Phase',
     name: 'Name',
     desc: 'Description',
-    lbPublic: 'Leaderboard_public',
-    isPublic: 'Is_public',
-    isSubmiPublic: 'Is_submission_public',
-    startDate: 'Start_date',
-    endDate: 'End_date',
+    lbPublic: 'Leaderboard public',
+    isPublic: 'Is public',
+    isSubmiPublic: 'Is submission public',
+    startDate: 'Start date',
+    endDate: 'End date',
     codename: 'Codename',
-    maxSubmiPerDay: 'Max_submissions_per_day',
-    maxSubmiPerMonth: 'Max_submissions_per_month',
-    maxSubmissions: 'Max_submissions',
-    isRestrictedToSelectOneSubmission: 'Is_restricted_to_select_one_submission',
-    isPartialSubmissionEvaluationEnabled: 'Is_partial_submission_evaluation_enabled',
-    allowedSubmissionFileTypes: 'Allowed_submission_file_types',
+    maxSubmiPerDay: 'Max submissions perday',
+    maxSubmiPerMonth: 'Max submissions per month',
+    maxSubmissions: 'Max submissions',
+    isRestrictedToSelectOneSubmission: 'Is restricted to select onesubmission',
+    isPartialSubmissionEvaluationEnabled: 'Is partial submission evaluation enabled',
+    allowedSubmissionFileTypes: 'Allowed submission file types',
     createSuccess: 'Phase creation successfully!',
     updateSuccess: 'Phase updated successfully!',
   },

src/lang/zh.js

@@ -205,9 +205,7 @@ export default {
   },
   participate: {
     continue: '继续',
-    accept_text1: '请接受',
-    accept_text2: '规则和条款',
-    accept_text3: '才能参加比赛。',
+    accept_text: '请阅读并接受规则和条件。',
     accept_label: '我接受条款和条件',
   },
   submission: {

src/permission.js

@@ -23,9 +23,6 @@ router.beforeEach((to, from, next) => {
               .then((res) => {
                 next({ path: '/' });
               })
-              .catch((err) => {
-                next({ path: '/' });
-              });
           });
       } else if (to.path.startsWith('/host')) {
         if (store.state.isHost === 1) {

src/store/index.js

@@ -93,7 +93,7 @@ export default createStore({
             removeToken();
             removeJwtToken();
             commit('clearStore');
-            reject(error);
+            resolve();
           });
       });
     },

src/styles/global.scss

@@ -393,6 +393,33 @@ body {
   }
 }
 
+// 折叠面板
+.el-collapse.oa-collapse {
+  border: none;
+  margin-top: -16px;
+  // margin-bottom: 24px;
+  --el-collapse-border-color: rgba(67, 77, 96, 0.6);
+  .el-collapse-item__header {
+    font-size: 14px;
+    font-weight: 700;
+  }
+  .el-collapse-item__wrap {
+    border-bottom-color: rgba(67, 77, 96, 0.6);
+    .el-collapse-item__content {
+      font-size: 14px;
+      color: var(--text-color);
+    }
+  }
+  .el-collapse-item:nth-last-child(1) {
+    .el-collapse-item__wrap {
+      border-bottom: none;
+    }
+    .el-collapse-item__header {
+      border-bottom-color: transparent;
+    }
+  }
+}
+
 // 已选择项tag框
 .custom-selected-tag {
   &.el-tag {

src/views/challenge/AllSubmission.vue

@@ -4,27 +4,27 @@
   </el-select>
   <el-table :data="submissionList" stripe style="width: 100%">
     <el-table-column fixed type="index" label="#" width="50" :index="(i) => (i + 1).toString().padStart(2, '0')" />
-    <el-table-column prop="participant_team" :label="$t('submission.team')" width="250"> </el-table-column>
-    <el-table-column prop="created_by" :label="$t('submission.createdBy')"> </el-table-column>
-    <el-table-column prop="status" :label="$t('submission.status')">
+    <el-table-column fixed prop="participant_team" :label="$t('submission.team')" width="240"> </el-table-column>
+    <el-table-column prop="created_by" :label="$t('submission.createdBy')" width="130"> </el-table-column>
+    <el-table-column prop="status" :label="$t('submission.status')" width="100">
       <template #default="{ row }">
         <span :class="['submis-status', row.status]">{{ row.status.charAt(0).toUpperCase() + row.status.slice(1) }}</span>
       </template>
     </el-table-column>
-    <el-table-column prop="execution_time" :label="$t('submission.executTime')" width="160" />
-    <el-table-column prop="submission_result_file" :label="$t('submission.resultFile')">
+    <el-table-column prop="execution_time" :label="$t('submission.executTime')" width="180" />
+    <el-table-column prop="submission_result_file" :label="$t('submission.resultFile')" width="100">
       <template #default="{ row }">
         <el-link type="primary" v-if="row.submission_result_file" :href="row.submission_result_file" target="_blank">Link</el-link>
         <span v-else>-</span>
       </template>
     </el-table-column>
-    <el-table-column prop="stdout_file" :label="$t('submission.stdoutFile')">
+    <el-table-column prop="stdout_file" :label="$t('submission.stdoutFile')" width="100">
       <template #default="{ row }">
         <el-link type="primary" v-if="row.stdout_file" :href="row.stdout_file" target="_blank">Link</el-link>
         <span v-else>-</span>
       </template>
     </el-table-column>
-    <el-table-column prop="stderr_file" :label="$t('submission.stderrFile')">
+    <el-table-column prop="stderr_file" :label="$t('submission.stderrFile')" width="100">
       <template #default="{ row }">
         <el-link type="primary" v-if="row.stderr_file" :href="row.stderr_file" target="_blank">Link</el-link>
         <span v-else>-</span>
@@ -51,18 +51,24 @@
 
 <script setup>
 import { onMounted, reactive, ref } from 'vue';
-import { challengePhase, getAllSubmissions } from '@/api/challenge';
+import { getAllSubmissions } from '@/api/challenge';
 import { formatTime } from '@/utils/tool';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-const props = defineProps(['challengeId']);
-const phases = ref([]);
+const props = defineProps({
+  challengeId: [String, Number],
+  phases: {
+    type: Array,
+    default: [],
+  },
+});
 
 onMounted(() => {
-  challengePhase(props.challengeId).then((res) => {
-    phases.value = res.results || [];
-  });
+  if (props.phases.length > 0) {
+    selectedPhaseId.value = props.phases[0].id;
+    getSubmissionList();
+  }
 });
 
 const selectedPhaseId = ref('');
@@ -91,67 +97,6 @@ const loadMore = () => {
 </script>
 
 <style lang="scss" scoped>
-.title {
-  font-weight: 700;
-}
-.describe {
-  line-height: 21px;
-}
-.selected-bar {
-  height: 48px;
-  background: #2a335e;
-  border-radius: 4px 4px 4px 4px;
-  border: 1px solid #4562e3;
-  padding: 0 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &.btw {
-    justify-content: space-between;
-  }
-}
-.phase-box {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 24px 20px;
-  &.more {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .phase-card {
-    height: 123px;
-    background: #282f3b;
-    border-radius: 2px 2px 2px 2px;
-    border: 1px solid #404b64;
-    padding: 24px 24px 24px 35px;
-    cursor: pointer;
-    .row {
-      height: 14px;
-      font-weight: 700;
-    }
-  }
-}
-.instr_con {
-  padding-left: 24px;
-}
-.command {
-  height: 32px;
-  background: #282f3b;
-  border-radius: 2px 2px 2px 2px;
-  border: 1px solid #404b64;
-  padding: 8px;
-  display: inline-block;
-  max-width: 80%;
-}
-.copy {
-  width: 32px;
-  height: 32px;
-  background: #404b64;
-  border-radius: 2px 2px 2px 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
 .submis-status {
   &::before {
     content: '';

src/views/challenge/Detail.vue

@@ -19,7 +19,10 @@
           <overview :detailInfo="detailInfo" :phases="phases"></overview>
         </el-tab-pane>
         <el-tab-pane :label="$t('challenge.participate')" name="participate" v-if="!teamDetail">
-          <participate :challengeId="challengeId" @callback="getPartTeam('submission')" @openTerm="openTerm"></participate>
+          <participate
+            :challengeId="challengeId"
+            :termsConditions="detailInfo.terms_and_conditions"
+            @callback="getPartTeam('submission')"></participate>
         </el-tab-pane>
         <el-tab-pane :label="$t('challenge.submission')" name="submission" v-else>
           <submission
@@ -37,7 +40,7 @@
           <approval :challengeId="challengeId"></approval>
         </el-tab-pane>
         <el-tab-pane :label="$t('challenge.allSubmission')" name="allSubmission" v-if="isChallengeHost">
-          <all-submission :challengeId="challengeId"></all-submission>
+          <all-submission :challengeId="challengeId" :phases="phases"></all-submission>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -81,13 +84,6 @@ const getPartTeam = (tabId) => {
   });
 };
 
-const openTerm = () => {
-  activeName.value = 'overview';
-  setTimeout(() => {
-    let dom = document.querySelector('#term');
-    dom && dom.scrollIntoView();
-  }, 200);
-};
 const clearPartTeam = (tabId) => {
   teamDetail.value = undefined;
   activeName.value = tabId;

src/views/challenge/Leaderboard.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="title mb24">{{ $t('challenge.leaderboard') }}</div>
-  <div class="mb24">
-    <div v-html="description" class="editor-content-view"></div>
-  </div>
+  <el-collapse :model-value="['1']" class="oa-collapse">
+    <el-collapse-item :title="$t('challenge.leaderboard')" name="1">
+      <div v-html="description" class="editor-content-view"></div>
+    </el-collapse-item>
+  </el-collapse>
 
   <div class="flex-center mb16">
     <el-select v-model="curSplitId" :placeholder="$t('submission.phasePH')" @change="splitChange" style="width: 360px" class="mr16">
       <el-option v-for="item in splits" :key="item.id" :label="getSplitLabel(item)" :value="item.id" />
     </el-select>
-    <!-- <el-checkbox :label="$t('leaderboard.orderScore')" name="type" v-model="isByScore" @change="splitChange"></el-checkbox> -->
 
     <el-select v-model="curOrderBy" :placeholder="$t('submission.orderPH')" @change="splitChange" style="width: 360px" class="mr16">
       <el-option v-for="item in labels" :key="item" :label="item" :value="item" />
@@ -18,7 +18,6 @@
   <el-table :data="leaderboardList" stripe style="width: 100%" header-cell-class-name="thBg">
     <el-table-column fixed prop="rank" :label="$t('leaderboard.rank')" width="80" />
     <el-table-column fixed sortable prop="submission__participant_team__team_name" :label="$t('leaderboard.team')" width="250" />
-    <!-- <el-table-column sortable prop="filtering_score" :label="$t('leaderboard.score')" /> -->
     <el-table-column sortable :label="label" v-for="(label, i) in labels" :key="label" width="280">
       <template #default="{ row }">
         {{ row.result[i] }}
@@ -45,7 +44,6 @@ import { formatTime } from '@/utils/tool';
 const props = defineProps(['challengeId', 'description']);
 const curSplitId = ref('');
 const splits = ref([]);
-const isByScore = ref(false);
 const curOrderBy = ref('');
 const labels = ref([
   'Driving score',
@@ -70,6 +68,12 @@ const getSplitLabel = (item) => {
 onMounted(() => {
   getPhaseSplit(props.challengeId).then((res) => {
     splits.value = res || [];
+    if (splits.value.length > 0) {
+      curSplitId.value = splits.value[0].id;
+      labels.value = splits.value[0].leaderboard_schema?.labels || [];
+      curOrderBy.value = labels.value[0];
+      splitChange();
+    }
   });
 });
 const pager = reactive({
@@ -87,8 +91,6 @@ const splitChange = () => {
     });
     if (leaderboardList.value.length > 0) {
       labels.value = leaderboardList.value[0].leaderboard__schema?.labels || [];
-    } else {
-      labels.value = [];
     }
   });
 };