Skip to content

Commit

Permalink
format
Browse files Browse the repository at this point in the history
  • Loading branch information
@syzygy608
syzygy608 committed Aug 30, 2024
1 parent 04e86d6 commit d81c20c
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 115 deletions.
70 changes: 33 additions & 37 deletions src/components/pages/home/intro.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,12 @@
<textarea
class="w-full h-32 bg-orange-100/50 text-gray-500 p-3"
v-model="feature"
v-if="modify"
></textarea>
<ol class="list-decimal list-inside my-3" v-html="feature" v-else>

</ol>
v-if="modify"></textarea>
<ol
class="list-decimal list-inside my-3"
v-html="feature"
v-else></ol>
</div>

</div>
</div>
<div class="w-11/12 md:w-7/12 mx-auto my-3">
Expand Down Expand Up @@ -68,7 +67,7 @@
<div class="text-center md:text-left md:ml-6">
<p
class="text-2xl font-bold px-5 border-b border-white text-orange-700">
{{ members[1].name }}
{{ members[1].name }}
</p>
<textarea
class="px-6 w-[25rem] h-[10rem] py-3 text-xl bg-orange-100/50 text-gray-500"
Expand Down Expand Up @@ -135,14 +134,11 @@
版本紀錄
</div>
<div class="text-xl text-gray-500 my-1">
<div v-html="version" v-if="!modify">

</div>
<div v-html="version" v-if="!modify"></div>
<textarea
class="w-full h-32 bg-orange-100/50 text-gray-500 p-3"
v-model="version"
v-if="modify"
></textarea>
v-if="modify"></textarea>
</div>
</div>

Expand Down Expand Up @@ -200,7 +196,7 @@ const feature = ref(`
<li>歷年課程查詢</li>
<li>建立多組課表</li>
<li>課表分享功能</li>
`)
`);
const version = ref(`
v 0.0.1 第一次公開測試版本開放 <br />
Expand All @@ -220,28 +216,30 @@ v 1.0.5
課程列表可以顯示更多課程資訊，新增選擇課程時的衝堂顏色標示。<br />
v 1.0.6
新增歷年課程查詢功能，新增建立多組課表功能，新增課表分享功能。<br />
`)
`);
const members = ref(
[
{
"name": "吳翰平",
"intro": "現在就讀於中正大學資訊工程學系四年級，目前正在鑽研程式演算法競賽與網頁前後端工程，負責本網站的前端工程，是一位 Vue 新手。",
},
{
"name": "王子銜",
"intro": "中正大學通訊工程學系四年級，主要研究網頁前後端與演算法競賽。 2023 中研院 Summer intern",
},
{
"name": "楊其龍",
"intro": "中正大學資訊工程學系四年級 主要研究軟體工程、網頁前後端、競程， 目前主要學習ML， 此專案主要負責後端伺服器、資料庫、API。",
},
{
"name": "凃昀辰",
"intro": "現在就讀於資訊工程學系四年級，主要研究跨域資訊安全與CTF， 目前主要為學習ML相關知識。",
}
]
)
const members = ref([
{
name: "吳翰平",
intro:
"現在就讀於中正大學資訊工程學系四年級，目前正在鑽研程式演算法競賽與網頁前後端工程，負責本網站的前端工程，是一位 Vue 新手。",
},
{
name: "王子銜",
intro:
"中正大學通訊工程學系四年級，主要研究網頁前後端與演算法競賽。 2023 中研院 Summer intern",
},
{
name: "楊其龍",
intro:
"中正大學資訊工程學系四年級 主要研究軟體工程、網頁前後端、競程， 目前主要學習ML， 此專案主要負責後端伺服器、資料庫、API。",
},
{
name: "凃昀辰",
intro:
"現在就讀於資訊工程學系四年級，主要研究跨域資訊安全與CTF， 目前主要為學習ML相關知識。",
},
]);
const modify = ref(false);
Expand All @@ -250,12 +248,10 @@ if (localStorage.getItem("token")) {
if (res) {
modify.value = true;
console.log("Token verified");
}
else {
} else {
console.log("Token expired");
}
}
</script>

<style>
Expand Down
15 changes: 8 additions & 7 deletions src/components/pages/home/notify.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@
<div class="bg-white p-8 rounded-3xl shadow-lg my-auto">
<h2 class="text-xl font-semibold mb-4 text-center">提醒</h2>
<hr class="py-2" />
<p class="mb-4" v-if="!modify" v-html="content">
</p>
<div class = "w-[30rem] min-h-[20rem]">
<textarea v-model = "content" class="w-full h-[20rem] border-2 border-gray-300 p-2 rounded" v-if="modify"></textarea>
<p class="mb-4" v-if="!modify" v-html="content"></p>
<div class="w-[30rem] min-h-[20rem]">
<textarea
v-model="content"
class="w-full h-[20rem] border-2 border-gray-300 p-2 rounded"
v-if="modify"></textarea>
</div>
<div class="text-center">
<button
Expand Down Expand Up @@ -50,7 +52,7 @@ const content = ref(`
同時要請手機使用者多多包涵，為了實現更多功能，<br />
目前手機版的網頁版面不太完善，請使用電腦版瀏覽器以獲得更好的使用體驗，<br />
手機板的優化將在下個大版本進行，敬請期待!
`)
`);
const modify = ref(false);
Expand All @@ -59,8 +61,7 @@ if (localStorage.getItem("token")) {
if (res) {
modify.value = true;
console.log("Token verified");
}
else {
} else {
console.log("Token expired");
}
}
Expand Down
163 changes: 92 additions & 71 deletions src/components/pages/tutorial/tutorial.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,22 @@
<div class="text-2xl font-bold text-orange-700 my-3">排課</div>
<div v-for="item in arrange" :key="item.title">
<div
class="text-lg font-semibold border-b border-b-black text-orange-600" v-if="!modify">
class="text-lg font-semibold border-b border-b-black text-orange-600"
v-if="!modify">
{{ item.title }}
</div>
<input v-model="item.title" class="w-full text-lg font-semibold border-b border-b-black text-orange-600" v-else>
<input
v-model="item.title"
class="w-full text-lg font-semibold border-b border-b-black text-orange-600"
v-else />
<div>
<p class="text-base my-1 mx-3" v-if="!modify">{{ item.content }}</p>
<textarea v-model="item.content" class="w-full text-base my-1 mx-3" v-else></textarea>
<p class="text-base my-1 mx-3" v-if="!modify">
{{ item.content }}
</p>
<textarea
v-model="item.content"
class="w-full text-base my-1 mx-3"
v-else></textarea>
</div>
</div>
</div>
Expand All @@ -36,92 +45,104 @@
</div>
<div v-for="item in make" :key="item.title">
<div
class="text-lg font-semibold border-b border-b-black text-orange-600" v-if="!modify">
class="text-lg font-semibold border-b border-b-black text-orange-600"
v-if="!modify">
{{ item.title }}
</div>
<input v-model="item.title" class="w-full text-lg font-semibold border-b border-b-black text-orange-600" v-else>
<input
v-model="item.title"
class="w-full text-lg font-semibold border-b border-b-black text-orange-600"
v-else />
<div>
<p class="text-base my-1 mx-3" v-if="!modify">{{ item.content }}</p>
<textarea v-model="item.content" class="w-full text-base my-1 mx-3" v-else></textarea>
<p class="text-base my-1 mx-3" v-if="!modify">
{{ item.content }}
</p>
<textarea
v-model="item.content"
class="w-full text-base my-1 mx-3"
v-else></textarea>
</div>
</div>
</div>
</div>
</template>

<script setup>
import { ref } from 'vue'
import Token from '@functions/token'
import { ref } from "vue";
import Token from "@functions/token";
const arrange = ref(
[
{
'title': '課程名稱搜尋',
'content': '在搜尋欄中輸入課程名稱，即可搜尋到相關課程。'
},
{
'title': '系所搜尋',
'content': '在搜尋欄中輸入科系，會用科系搜尋相關課程，並且可以用年級、向度等方式進行篩選。'
},
{
'title': '以教師名稱搜尋課程',
'content': '在搜尋欄中輸入教師名稱，會用教師名稱搜尋相關課程。'
},
{
'title': '自定義課程新增',
'content': '自行輸入課程名稱，可以用來規劃社團或其他活動的時間。'
},
{
'title': '以時間搜尋課程',
'content': '為了讓大家更方便尋找空堂時間的課程，我們提供了以時間搜尋課程的功能， 在開啟時間搜尋模式後，可以直接在課表上對應的位置用左鍵拖拉來選擇時間， 右鍵確認選擇後，即可搜尋到相關課程。'
},
{
'title': '浮動搜尋欄',
'content': '為了讓大家更方便搜尋課程，我們提供了浮動搜尋欄的功能， 當使用者在下方課表區域時，左邊會有一個可以縮放的搜尋欄， 可以在此搜尋課程，並且可以直接將課程加入課表。'
},
{
'title': '課程評價查看',
'content': '為了讓大家更方便選擇課程， 本站和 CCU Plus 合作，提供了課程評價的功能， 當使用者在下方課表區域時，可以點擊課程，在課程翻轉後顯示的功能表內 提供了查看課程評價的功能。 另外，在浮動搜尋欄跟時間搜尋功能中，也提供在選擇課程前可以查看課程評價的功能。'
}
]
)
const arrange = ref([
{
title: "課程名稱搜尋",
content: "在搜尋欄中輸入課程名稱，即可搜尋到相關課程。",
},
{
title: "系所搜尋",
content:
"在搜尋欄中輸入科系，會用科系搜尋相關課程，並且可以用年級、向度等方式進行篩選。",
},
{
title: "以教師名稱搜尋課程",
content: "在搜尋欄中輸入教師名稱，會用教師名稱搜尋相關課程。",
},
{
title: "自定義課程新增",
content: "自行輸入課程名稱，可以用來規劃社團或其他活動的時間。",
},
{
title: "以時間搜尋課程",
content:
"為了讓大家更方便尋找空堂時間的課程，我們提供了以時間搜尋課程的功能， 在開啟時間搜尋模式後，可以直接在課表上對應的位置用左鍵拖拉來選擇時間， 右鍵確認選擇後，即可搜尋到相關課程。",
},
{
title: "浮動搜尋欄",
content:
"為了讓大家更方便搜尋課程，我們提供了浮動搜尋欄的功能， 當使用者在下方課表區域時，左邊會有一個可以縮放的搜尋欄， 可以在此搜尋課程，並且可以直接將課程加入課表。",
},
{
title: "課程評價查看",
content:
"為了讓大家更方便選擇課程， 本站和 CCU Plus 合作，提供了課程評價的功能， 當使用者在下方課表區域時，可以點擊課程，在課程翻轉後顯示的功能表內 提供了查看課程評價的功能。 另外，在浮動搜尋欄跟時間搜尋功能中，也提供在選擇課程前可以查看課程評價的功能。",
},
]);
const make = ref(
[
{
'title': '課表儲存',
'content': '在課表製作頁面，可以將點選下載課表儲存，並且可以在下次開啟時直接載入， 只要在同一裝置的同瀏覽器，就可以保存你的所有課表資訊。'
},
{
'title': '課表分享',
'content': '在課表製作頁面，可以將點選分享課表，會產生一個網址，可以分享給其他人， 這個網址可以直接開啟課表，但是無法修改課表。'
},
{
'title': '多課表製作',
'content': '為了方便大家在排課時安排多種方案，或者紀錄朋友的課表，我們提供了多課表製作的功能， 可以在課表製作頁面新增多個課表，並且可以在不同課表間切換。'
},
{
'title': '課表美化',
'content': '在課表頁面，點選指定的課程，可以將課程翻轉，並且可以在課程翻轉後顯示的功能表內 修改課程格子的顏色，以及修改文字的顏色，提供更多的課表美化選項。'
},
{
'title': '學分計算',
'content': '在課表頁面，點選頁面中的顯示學分，可以顯示目前課表中的學分總數， 除了自定義課程外，其他課程都會顯示學分，並且會計算進總學分中。'
}
]
)
const make = ref([
{
title: "課表儲存",
content:
"在課表製作頁面，可以將點選下載課表儲存，並且可以在下次開啟時直接載入， 只要在同一裝置的同瀏覽器，就可以保存你的所有課表資訊。",
},
{
title: "課表分享",
content:
"在課表製作頁面，可以將點選分享課表，會產生一個網址，可以分享給其他人， 這個網址可以直接開啟課表，但是無法修改課表。",
},
{
title: "多課表製作",
content:
"為了方便大家在排課時安排多種方案，或者紀錄朋友的課表，我們提供了多課表製作的功能， 可以在課表製作頁面新增多個課表，並且可以在不同課表間切換。",
},
{
title: "課表美化",
content:
"在課表頁面，點選指定的課程，可以將課程翻轉，並且可以在課程翻轉後顯示的功能表內 修改課程格子的顏色，以及修改文字的顏色，提供更多的課表美化選項。",
},
{
title: "學分計算",
content:
"在課表頁面，點選頁面中的顯示學分，可以顯示目前課表中的學分總數， 除了自定義課程外，其他課程都會顯示學分，並且會計算進總學分中。",
},
]);
const modify = ref(false)
const modify = ref(false);
if (localStorage.getItem("token")) {
const res = Token.verifyToken(localStorage.getItem("token"));
if (res) {
modify.value = true;
console.log("Token verified");
}
else {
} else {
console.log("Token expired");
}
}
</script>
</script>

0 comments on commit d81c20c

Please sign in to comment.