change style

src/main/index.ts

@@ -42,7 +42,8 @@ function createWindow(): void {
     },
     vibrancy: 'fullscreen-ui',
     // bug trace: https://github.com/electron/electron/issues/38466#issuecomment-2576225294
-    backgroundMaterial: 'tabbed'
+    backgroundMaterial: 'tabbed',
+    maximizable: false
   })
 
   mainWindow.on('ready-to-show', () => {

src/renderer/src/views/panel/PanelIndex.vue

@@ -21,14 +21,17 @@
 import { useGlobalStore } from '@renderer/store'
 import { storeToRefs } from 'pinia'
 import { computed, ref } from 'vue'
-import { IGoal } from '@renderer/types'
+import { IGoal, ICourse } from '@renderer/types'
+import { InfoFilled, Plus } from '@element-plus/icons-vue'
 
 const store = useGlobalStore()
 const { courseInfo } = storeToRefs(store)
 
+const tempCourseInfo = ref<ICourse>({ ...store.courseInfo! })
 const tempGoal = ref<IGoal>({ importance: 'H', indicator: '', target: '' })
 const tempGoalList = ref<IGoal[]>(store.goals)
 const showAddGoal = ref(false)
+const showEditCourse = ref(false)
 
 const addGoalSubmit = computed(() => !Object.values(tempGoal.value).every((v) => v))
 
@@ -54,44 +57,95 @@ const handleAddGoalSubmit = () => {
 const handleDeleteGoal = (idx: number) => {
   tempGoalList.value.splice(idx, 1)
 }
+
+const handleEditCourse = (action: 'save' | 'cancel') => {
+  if (action === 'save') {
+    store.saveCourseInfo(tempCourseInfo.value)
+    tempCourseInfo.value = { ...store.courseInfo! }
+  } else if (action === 'cancel') {
+    tempCourseInfo.value = { ...store.courseInfo! }
+  }
+  showEditCourse.value = false
+}
 </script>
 
 <template>
   <div v-if="courseInfo">
-    <div class="h-12 border-b border-gray-200 px-8 font-bold shadow leading-12">
+    <div class="border-b border-gray-300 px-8 font-bold flex justify-between items-center h-14">
-      <p>{{ courseInfo.name }}</p>
+      <p>课程信息：{{ courseInfo.name }}</p>
+      <div class="flex items-center">
+        <el-button type="primary" :icon="InfoFilled" @click="showEditCourse = true"
+          >编辑课程信息</el-button
+        >
+        <el-button :icon="Plus" @click="handleAddNewGoal">添加课程目标</el-button>
+      </div>
     </div>
 
-    <el-divider content-position="left">基本信息</el-divider>
+    <el-descriptions class="mx-auto p-4" border>
-    <div class="mx-auto w-full max-w-lg">
+      <el-descriptions-item>
-      <el-form :model="courseInfo" label-width="auto" disabled>
+        <template #label> 课程名称 </template>
+        {{ courseInfo.name }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label> 开课学院 </template>
+        {{ courseInfo.campus }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label> 任课教师 </template>
+        {{ courseInfo.teacher }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label> 课程负责人 </template>
+        {{ courseInfo.master }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label> 学分 </template>
+        {{ courseInfo.credit }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label> 教学班级 </template>
+        {{ courseInfo.className }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-dialog
+      v-model="showEditCourse"
+      title="编辑课程信息"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form :model="tempCourseInfo" label-width="auto">
         <el-form-item label="课号">
           <el-input
-            v-model="courseInfo!.id"
+            v-model="tempCourseInfo!.id"
             type="text"
             placeholder="(xxxx-xxxx-x)-xxxxxxxxxx-xxxxx-x"
           />
         </el-form-item>
         <el-form-item label="课程名称">
-          <el-input v-model="courseInfo.name" type="text" placeholder="课程名称" />
+          <el-input v-model="tempCourseInfo.name" type="text" placeholder="课程名称" />
         </el-form-item>
         <el-form-item label="开课学院">
-          <el-input v-model="courseInfo.campus" type="text" placeholder="开课学院" />
+          <el-input v-model="tempCourseInfo.campus" type="text" placeholder="开课学院" />
         </el-form-item>
         <el-form-item label="任课教师">
-          <el-input v-model="courseInfo.teacher" type="text" placeholder="任课教师" />
+          <el-input v-model="tempCourseInfo.teacher" type="text" placeholder="任课教师" />
         </el-form-item>
         <el-form-item label="课程负责人" class="relative">
-          <el-input v-model="courseInfo.master" type="text" placeholder="课程负责人" />
+          <el-input v-model="tempCourseInfo.master" type="text" placeholder="课程负责人" />
         </el-form-item>
         <el-form-item label="学分">
-          <el-input v-model="courseInfo.credit" type="number" placeholder="学分" />
+          <el-input v-model="tempCourseInfo.credit" type="number" placeholder="学分" />
         </el-form-item>
         <el-form-item label="教学班级">
-          <el-input v-model="courseInfo.className" type="text" placeholder="教学班级" />
+          <el-input v-model="tempCourseInfo.className" type="text" placeholder="教学班级" />
         </el-form-item>
       </el-form>
-    </div>
+      <template #footer>
+        <el-button type="primary" @click="handleEditCourse('save')">确认</el-button>
+        <el-button @click="handleEditCourse('cancel')">取消</el-button>
+      </template>
+    </el-dialog>
 
     <el-divider content-position="left">课程目标</el-divider>
     <div class="mx-auto w-full max-w-lg">
@@ -115,8 +169,7 @@ const handleDeleteGoal = (idx: number) => {
           </div>
         </div>
 
-        <el-button v-show="!showAddGoal" @click="handleAddNewGoal">添加</el-button>
+        <el-dialog v-model="showAddGoal" title="添加课程目标">
-
           <el-form v-show="showAddGoal" v-model="tempGoal">
             <el-form-item label="强弱支撑" label-position="top">
               <el-select v-model="tempGoal.importance">
@@ -131,13 +184,14 @@ const handleDeleteGoal = (idx: number) => {
             <el-form-item label="目标支撑的毕业要求指标点" label-position="top">
               <el-input v-model="tempGoal.indicator" type="textarea" />
             </el-form-item>
-          <div class="flex justify-end">
+          </el-form>
+          <template #footer>
             <el-button :disabled="addGoalSubmit" type="primary" @click="handleAddGoalSubmit"
               >添加</el-button
             >
             <el-button @click="handleAddGoalCancel">取消</el-button>
-          </div>
+          </template>
-        </el-form>
+        </el-dialog>
       </div>
     </div>
   </div>