add share button

src/components/pages/home/intro.vue

@@ -26,6 +26,9 @@
             <li>時間搜尋課程</li>
             <li>以教師名稱搜尋課程</li>
             <li>以系所年級進行搜尋</li>
+            <li>歷年課程查詢</li>
+            <li>建立多組課表</li>
+            <li>課表分享功能</li>
           </ol>
         </div>
       </div>
@@ -136,6 +139,8 @@
           v 1.0.4 新增系所年級搜尋功能。<br />
           v 1.0.5
           課程列表可以顯示更多課程資訊，新增選擇課程時的衝堂顏色標示。<br />
+          v 1.0.6
+          新增歷年課程查詢功能，新增建立多組課表功能，新增課表分享功能。<br />
         </div>
       </div>
 

src/components/pages/main/course_tab.vue

@@ -60,6 +60,8 @@ const addTab = () => {
   store.dispatch("open_main_modal");
 };
 
+const oldName = ref("");
+
 const show_tab_name = (tab_name) => {
   if (tab_name.length > 8) return tab_name.slice(0, 6) + "...";
   return tab_name;

src/components/pages/main/inputArea.vue

@@ -45,20 +45,21 @@
             </div>
             <span class="mx-3 py-1 min-w-[4rem]"> 顯示學分 </span>
           </div>
-          <button
-            class="btn-normal min-w-[8rem]"
-            v-on:click="show_list">
-            展開課程列表
+          <button class="btn-normal w-[8rem]" v-on:click="show_list">
+            課程列表
+            <CaretDownOutlined />
           </button>
-          <button
-            class="btn-normal min-w-[4rem]"
-            v-on:click="clearTable">
+          <button class="btn-normal w-[8rem]" v-on:click="clearTable">
             清空課表
+            <DeleteOutlined />
           </button>
-          <button
-            class="btn-normal min-w-[8rem]"
-            v-on:click="download">
+          <button class="btn-normal w-[8rem]" v-on:click="">
+            分享課表
+            <ExportOutlined />
+          </button>
+          <button class="btn-normal w-[8rem]" v-on:click="download">
             下載課表
+            <DownloadOutlined />
           </button>
         </div>
         <div id="class_list" v-if="class_list_visible === true">
@@ -141,6 +142,13 @@ import Time from "@components/pages/main/serach_modes/time.vue";
 import Custom from "@components/pages/main/serach_modes/custom.vue";
 import Department from "@components/pages/main/serach_modes/department.vue";
 
+import {
+  CaretDownOutlined,
+  DeleteOutlined,
+  ExportOutlined,
+  DownloadOutlined,
+} from "@ant-design/icons-vue";
+
 import {
   onMounted,
   onUpdated,

src/components/pages/tutorial/tutorial.vue

@@ -18,6 +18,9 @@
     </div>
     <div>
       <div class="text-2xl font-bold text-orange-700 my-3">排課</div>
+      <p class="text-base my-1 mx-3">
+        除了最新年度的課程外，我們也提供了歷年的課程資料，可以在搜尋欄中選擇年度。
+      </p>
       <div
         class="text-lg font-semibold border-b border-b-black text-orange-600">
         課程名稱搜尋
@@ -88,6 +91,22 @@
         在課表製作頁面，可以將點選下載課表儲存，並且可以在下次開啟時直接載入，
         只要在同一裝置的同瀏覽器，就可以保存你的所有課表資訊。
       </p>
+      <div
+        class="text-lg font-semibold border-b border-b-black text-orange-600">
+        課表分享
+      </div>
+      <p class="text-base my-1 mx-3">
+        在課表製作頁面，可以將點選分享課表，會產生一個網址，可以分享給其他人，
+        這個網址可以直接開啟課表，但是無法修改課表。
+      </p>
+      <div
+        class="text-lg font-semibold border-b border-b-black text-orange-600">
+        多課表製作
+      </div>
+      <p class="text-base my-1 mx-3">
+        為了方便大家在排課時安排多種方案，或者紀錄朋友的課表，我們提供了多課表製作的功能，
+        可以在課表製作頁面新增多個課表，並且可以在不同課表間切換。
+      </p>
       <div
         class="text-lg font-semibold border-b border-b-black text-orange-600">
         課表美化

src/css/style.css

@@ -25,7 +25,7 @@ img {
   @apply text-center font-medium mx-2 px-5 py-3 border-2 border-orange-200 bg-orange-200 rounded-full hover:bg-transparent duration-300;
 }
 .btn-normal {
-  @apply text-center shadow-2xl text-white font-medium mx-2 px-5 py-1 border-2 border-gray-500 bg-gray-500 rounded-lg hover:bg-transparent hover:text-black duration-500;
+  @apply text-center shadow-2xl  flex justify-center items-center text-lime-900 font-medium mx-2 px-5 py-1 border-2 border-lime-600 bg-lime-600/60 rounded-lg hover:bg-transparent duration-300;
 }
 .btn-comment {
   @apply text-center shadow-2xl font-medium mx-2 px-5 py-1 border-2 border-[#aefff7] bg-[#aefff7] rounded-lg hover:bg-transparent hover:text-white duration-500;