change style

src/main/index.ts

@@ -34,12 +34,14 @@ function createWindow(): void {
     minHeight: 728,
     show: false,
     autoHideMenuBar: true,
-    titleBarStyle: 'hidden',
+    frame: false,
     icon: icon,
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false
-    }
+    },
+    vibrancy: 'fullscreen-ui',
+    backgroundMaterial: 'acrylic'
   })
 
   mainWindow.on('ready-to-show', () => {

src/renderer/src/assets/main.css

@@ -18,3 +18,18 @@
  */
 
 @import "tailwindcss";
+
+body {
+  background: transparent;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}

src/renderer/src/views/create/CreatePanel.vue

@@ -23,24 +23,28 @@ import { emitter } from '@renderer/utils/mitt'
 import router from '@renderer/router'
 import { useGlobalStore } from '@renderer/store'
 import { storeToRefs } from 'pinia'
+import { House, User, EditPen, MessageBox, Select } from '@element-plus/icons-vue'
 
 const store = useGlobalStore()
 const { courseInfo } = storeToRefs(store)
 
 const asideMenu = [
-  { title: '课程信息', route: 'panelIndex' },
-  { title: '学生管理', route: 'panelStudent' },
-  { title: '成绩录入', route: 'panelScore' },
-  { title: '录入试卷', route: 'panelPaper' },
-  { title: '完成导出', route: 'panelFinal' }
+  { title: '课程信息', route: 'panelIndex', icon: House },
+  { title: '学生管理', route: 'panelStudent', icon: User },
+  { title: '成绩录入', route: 'panelScore', icon: EditPen },
+  { title: '录入试卷', route: 'panelPaper', icon: MessageBox },
+  { title: '完成导出', route: 'panelFinal', icon: Select }
 ]
 const currentActiveIndex = ref(0)
+const expendMenu = ref(false)
 
 const handleMenuItemClick = (idx: number) => {
   currentActiveIndex.value = idx
   router.push({ name: asideMenu[idx].route })
 }
 
+const handleMenuExpend = () => (expendMenu.value = !expendMenu.value)
+
 onMounted(() => {
   emitter.emit('titleBarShow', ['save'])
   if (courseInfo.value === null) {
@@ -50,19 +54,37 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex w-full">
-    <aside class="h-full w-72 shrink-0 border-r border-dashed border-gray-200 bg-gray-100">
+  <div class="flex w-full bg-white/75">
+    <aside
+      class="h-full w-15 shrink-0 overflow-hidden max-w-60 text-nowrap transition-all ease-in-out"
+      :class="{ 'w-full': expendMenu }"
+    >
+      <div
+        class="m-2 flex h-11 w-11 flex-col items-center justify-center gap-1 rounded-md transition-all hover:bg-gray-400/20"
+        @click="handleMenuExpend"
+      >
+        <div class="w-4 border-b" />
+        <div class="w-4 border-b" />
+        <div class="w-4 border-b" />
+      </div>
       <div
         v-for="(item, index) in asideMenu"
         :key="index"
-        class="m-2 flex h-12 cursor-pointer items-center justify-center rounded-xl text-lg transition-all hover:bg-blue-200 hover:text-white"
-        :class="{ 'bg-blue-300 text-white': currentActiveIndex === index }"
+        class="relative m-2 flex h-11 cursor-pointer items-center overflow-hidden rounded-lg transition-all text hover:bg-gray-400/20"
+        :class="{ 'bg-gray-400/20': currentActiveIndex === index }"
         @click="handleMenuItemClick(index)"
       >
+        <div
+          v-show="currentActiveIndex === index"
+          class="absolute left-0 top-3 bottom-3 w-1 rounded-full bg-blue-500"
+        />
+        <el-icon :size="20" class="mx-3"><component :is="item.icon" /></el-icon>
         <p>{{ item.title }}</p>
       </div>
     </aside>
-    <router-view class="grow overflow-y-scroll" />
+    <router-view
+      class="grow overflow-y-scroll rounded-tl-lg border-t border-l border-gray-300 bg-white shadow-lg no-scrollbar"
+    />
   </div>
 </template>
 

src/renderer/src/views/create/CreateStart.vue

@@ -82,7 +82,7 @@ const handleSubmit = () => {
 </script>
 
 <template>
-  <div class="relative flex flex-col items-center justify-center">
+  <div class="relative flex flex-col items-center justify-center bg-white">
     <div
       class="absolute top-4 left-32 cursor-pointer rounded border border-gray-300 px-4 shadow hover:bg-gray-100"
       @click="handleBack"

src/renderer/src/views/home/HomeStart.vue

@@ -30,7 +30,7 @@ const handleFunctionClick = (ev: 'create' | 'open') => {
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center gap-12">
+  <div class="flex flex-col items-center justify-center gap-12 bg-white">
     <!-- 标题 -->
     <div class="text-center leading-5">
       <p class="text-2xl">欢迎</p>