From 50b435ba8020dd92e939244b210f6b47f6818a5c Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Sat, 21 Oct 2023 18:38:11 +0800
Subject: [PATCH] alpha

---
 src/api/api-models.ts                         |  20 +-
 src/components/ScheduleList.vue               |  94 ++++++-
 src/router/index.ts                           |   8 +
 src/views/ManageLayout.vue                    |   7 +-
 src/views/ViewerLayout.vue                    |  50 ++--
 src/views/manage/DashboardView.vue            |   6 +-
 src/views/manage/HistoryView.vue              |  12 +-
 src/views/manage/ScheduleManageView.vue       | 237 ++++++++++++----
 src/views/manage/SettingsManageView.vue       | 259 ++++++++++++++++--
 src/views/view/ScheduleView.vue               |  75 +++++
 src/views/view/SongListView.vue               |  30 +-
 src/views/view/UserIndexView.vue              |  14 +-
 .../DefaultScheduleTemplate.vue               |  19 ++
 .../view/scheduleTemplate/PinkySchedule.vue   |  23 ++
 .../DefaultSongListTemplate.vue               |  12 +-
 15 files changed, 706 insertions(+), 160 deletions(-)
 create mode 100644 src/views/view/scheduleTemplate/DefaultScheduleTemplate.vue
 create mode 100644 src/views/view/scheduleTemplate/PinkySchedule.vue

diff --git a/src/api/api-models.ts b/src/api/api-models.ts
index b78d91e..bd568b6 100644
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -22,9 +22,11 @@ export interface UserInfo {
   createAt: number
   biliId?: number
   biliRoomId?: number
-  indexType: IndexTypes
-  songListType: SongListTypes
-  enableFunctions: FunctionTypes[]
+  extra?: {
+    enableFunctions: FunctionTypes[]
+    isInBlackList: boolean
+    templateTypes: { [key: string]: string }
+  }
 }
 export interface AccountInfo extends UserInfo {
   isEmailVerified: boolean
@@ -46,10 +48,15 @@ export interface UserSetting {
   sendEmail: Setting_SendEmail
   questionBox: Setting_QuestionBox
   enableFunctions: FunctionTypes[]
+
+  indexTemplate: string | null,
+  songListTemplate: string | null
+  scheduleTemplate: string | null
 }
 export enum FunctionTypes {
   SongList,
   QuestionBox,
+  Schedule,
 }
 export interface SongAuthorInfo {
   name: string
@@ -130,9 +137,10 @@ export interface ScheduleWeekInfo {
   days: ScheduleDayInfo[]
 }
 export interface ScheduleDayInfo {
-  title: string
-  tag: string
-  time: number
+  title: string | null
+  tag: string | null
+  tagColor: string | null
+  time: string | null
 }
 export enum ThemeType {
   Auto = 'auto',
diff --git a/src/components/ScheduleList.vue b/src/components/ScheduleList.vue
index 2d9d4a4..ff7ade7 100644
--- a/src/components/ScheduleList.vue
+++ b/src/components/ScheduleList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
-import { NGrid, NList, NListItem, NSpace, NCard, NEmpty, NGridItem } from 'naive-ui'
+import { NGrid, NList, NListItem, NSpace, NCard, NEmpty, NGridItem, NText, NTime, NButton, NPopconfirm, NEllipsis, NBadge } from 'naive-ui'
 import { ref } from 'vue'
 import { ScheduleWeekInfo } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
@@ -8,24 +8,92 @@ import { SCHEDULE_API_URL } from '@/data/constants'
 
 const { width } = useWindowSize()
 
+const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+function getDateFromWeek(year: number, week: number, dayOfWeek: number): Date {
+    // week starts from 1-52, dayOfWeek starts from 0-6 where 0 is Monday
+    var simple = new Date(year, 0, 1 + (week - 1) * 7);
+    var dow = simple.getDay();
+    var ISOweekStart = simple;
+    if (dow <= 4)
+        ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
+    else
+        ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
+    return new Date(ISOweekStart.getFullYear(), ISOweekStart.getMonth(), ISOweekStart.getDate() + dayOfWeek);
+}
+
 defineProps<{
-  schedules: ScheduleWeekInfo[]
+  schedules: ScheduleWeekInfo[],
+  isSelf: boolean
+}>()
+const emit = defineEmits<{
+  (e: 'onUpdate', schedule: ScheduleWeekInfo): void
+  (e: 'onDelete', schedule: ScheduleWeekInfo): void
+  (e: 'onCopy', schedule: ScheduleWeekInfo): void
 }>()
 </script>
 
 <template>
   <NEmpty v-if="(schedules?.length ?? 0) == 0" />
-  <NList>
-    <NListItem v-for="item in schedules" v-bind:key="item.year + ' ' + item.week">
-      <NGrid x-gap="12" :cols="7">
-        <NGridItem v-for="(day, index) in item.days" v-bind:key="index">
-          <NCard size="small" style="height: 100px; width: 100%">
-            <template #header-extra>
-              {{ day ? day.tag : '休息' }}
-            </template>
-          </NCard>
-        </NGridItem>
-      </NGrid>
+  <NList style="padding: 0;" bordered >
+    <NListItem v-for="item in schedules" v-bind:key="item.year + ' ' + item.week" style="padding: 0">
+      <NCard size="small" :bordered="false">
+        <template #header>
+          <NText> {{ item.year }}年第{{ item.week }}周 </NText>
+        </template>
+        <template v-if="isSelf" #header-extra>
+          <NSpace>
+            <NButton size="small" @click="emit('onUpdate', item)"> 编辑 </NButton>
+            <NButton size="small" @click="emit('onCopy', item)"> 复制 </NButton>
+            <NPopconfirm @positive-click="emit('onDelete', item)">
+              <template #trigger>
+                <NButton size="small" type="error"> 删除 </NButton>
+              </template>
+              确定删除?
+            </NPopconfirm>
+          </NSpace>
+        </template>
+        <NGrid x-gap="8" cols="1 1000:7">
+          <NGridItem v-for="(day, index) in item.days" v-bind:key="index">
+            <NCard
+              size="small"
+              :style="{ height: '65px', backgroundColor: day.tagColor + '1f' }"
+              content-style="padding: 5px;"
+              header-style="padding: 0px 6px 0px 6px;"
+              :embedded="day?.tag != undefined"
+            >
+              <template #header-extra>
+                <template v-if="day.tag">
+                  <NSpace :size="5">
+                    <NBadge v-if="day.tagColor" dot :color="day.tagColor"/>
+                    <NEllipsis>
+                      <NText :style="{ color: day.tagColor }">
+                        {{ day.tag }}
+                      </NText>
+                    </NEllipsis>
+                  </NSpace>
+                </template>
+                <template v-else>
+                  <NText depth="3" style="font-size: 11px" italic> 休息 </NText>
+                </template>
+              </template>
+              <template #header>
+                <NText :depth="3" style="font-size: 12px" strong :italic="!day.tag">
+                  <NTime :time="getDateFromWeek(item.year, item.week, index)" format="MM/dd" />
+                  {{ weekdays[index] }}
+                  {{ day.time }}
+                </NText>
+              </template>
+              <template v-if="day?.title">
+                <NEllipsis>
+                  <NText style="font-size: 13px">
+                    {{ day.title }}
+                  </NText>
+                </NEllipsis>
+              </template>
+            </NCard>
+          </NGridItem>
+        </NGrid>
+      </NCard>
     </NListItem>
   </NList>
   <NGrid v-if="width > 1000"> </NGrid>
diff --git a/src/router/index.ts b/src/router/index.ts
index 7536463..b0c9935 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -40,6 +40,14 @@ const routes: Array<RouteRecordRaw> = [
           title: '棉花糖 (提问箱',
         },
       },
+      {
+        path: 'schedule',
+        name: 'user-schedule',
+        component: () => import('@/views/view/ScheduleView.vue'),
+        meta: {
+          title: '日程',
+        },
+      },
     ],
   },
   //管理页面
diff --git a/src/views/ManageLayout.vue b/src/views/ManageLayout.vue
index 13dbdcf..17d9a8a 100644
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -30,7 +30,7 @@ import { RouterLink } from 'vue-router'
 import { useElementSize, useStorage } from '@vueuse/core'
 import { ACCOUNT_API_URL } from '@/data/constants'
 import { QueryGetAPI } from '@/api/query'
-import { ThemeType } from '@/api/api-models'
+import { FunctionTypes, ThemeType } from '@/api/api-models'
 import { isDarkMode } from '@/Utils'
 
 const accountInfo = useAccount()
@@ -71,7 +71,7 @@ const menuOptions = [
           to: {
             name: 'manage-schedule',
           },
-          disabled: !accountInfo.value?.isEmailVerified,
+          disabled: !accountInfo.value?.isEmailVerified || (accountInfo.value?.settings?.enableFunctions.indexOf(FunctionTypes.Schedule) ?? -1) == -1,
         },
         { default: () => '日程' }
       ),
@@ -86,7 +86,7 @@ const menuOptions = [
           to: {
             name: 'manage-songList',
           },
-          disabled: !accountInfo.value?.isEmailVerified,
+          disabled: !accountInfo.value?.isEmailVerified || (accountInfo.value?.settings?.enableFunctions.indexOf(FunctionTypes.SongList) ?? -1) == -1,
         },
         { default: () => '歌单' }
       ),
@@ -101,6 +101,7 @@ const menuOptions = [
           to: {
             name: 'manage-questionBox',
           },
+          disabled: !accountInfo.value?.isEmailVerified || (accountInfo.value?.settings?.enableFunctions.indexOf(FunctionTypes.QuestionBox) ?? -1) == -1,
         },
         { default: () => '棉花糖 (提问箱' }
       ),
diff --git a/src/views/ViewerLayout.vue b/src/views/ViewerLayout.vue
index e156287..780d9e6 100644
--- a/src/views/ViewerLayout.vue
+++ b/src/views/ViewerLayout.vue
@@ -1,23 +1,6 @@
 <!-- eslint-disable vue/component-name-in-template-casing -->
 <script setup lang="ts">
-import {
-  NAvatar,
-  NIcon,
-  NLayout,
-  NLayoutHeader,
-  NLayoutSider,
-  NMenu,
-  NSpace,
-  NText,
-  NButton,
-  NResult,
-  NPageHeader,
-  NSwitch,
-  NModal,
-  NEllipsis,
-  MenuOption,
-NSpin,
-} from 'naive-ui'
+import { NAvatar, NIcon, NLayout, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText, NButton, NResult, NPageHeader, NSwitch, NModal, NEllipsis, MenuOption, NSpin } from 'naive-ui'
 import { computed, h, onMounted, ref } from 'vue'
 import { BookOutline as BookIcon, Chatbox, Home, Moon, MusicalNote, PersonOutline as PersonIcon, Sunny, WineOutline as WineIcon } from '@vicons/ionicons5'
 import { GetInfo, useUser, useUserWithUId } from '@/api/user'
@@ -28,12 +11,13 @@ import { useAccount } from '@/api/account'
 import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
 import { useElementSize, useStorage } from '@vueuse/core'
 import { isDarkMode } from '@/Utils'
+import { CalendarClock24Filled } from '@vicons/fluent'
 
 const route = useRoute()
 const id = computed(() => {
   return route.params.id
 })
-const themeType = useStorage('Settings.Theme', ThemeType.Auto);
+const themeType = useStorage('Settings.Theme', ThemeType.Auto)
 
 const userInfo = ref<UserInfo>()
 const biliUserInfo = ref()
@@ -90,10 +74,25 @@ onMounted(async () => {
           },
           { default: () => '歌单' }
         ),
-      show: (userInfo.value?.enableFunctions.indexOf(FunctionTypes.SongList) ?? -1) > -1,
+      show: (userInfo.value?.extra?.enableFunctions.indexOf(FunctionTypes.SongList) ?? -1) > -1,
       key: 'user-songList',
       icon: renderIcon(MusicalNote),
     },
+    {
+      label: () =>
+        h(
+          RouterLink,
+          {
+            to: {
+              name: 'user-schedule',
+            },
+          },
+          { default: () => '日程' }
+        ),
+      show: (userInfo.value?.extra?.enableFunctions.indexOf(FunctionTypes.Schedule) ?? -1) > -1,
+      key: 'user-schedule',
+      icon: renderIcon(CalendarClock24Filled),
+    },
     {
       label: () =>
         h(
@@ -105,7 +104,7 @@ onMounted(async () => {
           },
           { default: () => '棉花糖 (提问箱' }
         ),
-      show: (userInfo.value?.enableFunctions.indexOf(FunctionTypes.QuestionBox) ?? -1) > -1,
+      show: (userInfo.value?.extra?.enableFunctions.indexOf(FunctionTypes.QuestionBox) ?? -1) > -1,
       key: 'user-questionBox',
       icon: renderIcon(Chatbox),
     },
@@ -127,7 +126,7 @@ onMounted(async () => {
                 <NIcon :component="Sunny" />
               </template>
               <template #unchecked>
-                <NIcon :component="Moon"/>
+                <NIcon :component="Moon" />
               </template>
             </NSwitch>
             <template v-if="accountInfo">
@@ -160,14 +159,17 @@ onMounted(async () => {
         <NMenu :default-value="$route.name?.toString()" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
       </NLayoutSider>
       <NLayout style="height: 100%">
-        <div class="viewer-page-content" :style="`box-shadow:${isDarkMode() ? 'rgb(28 28 28 / 9%) 5px 5px 6px inset, rgba(139, 139, 139, 0.09) -5px -5px 6px inset' : 'inset 5px 5px 6px #8b8b8b17, inset -5px -5px 6px #8b8b8b17;'}`">
+        <div
+          class="viewer-page-content"
+          :style="`box-shadow:${isDarkMode() ? 'rgb(28 28 28 / 9%) 5px 5px 6px inset, rgba(139, 139, 139, 0.09) -5px -5px 6px inset' : 'inset 5px 5px 6px #8b8b8b17, inset -5px -5px 6px #8b8b8b17;'}`"
+        >
           <RouterView v-if="userInfo" v-slot="{ Component }">
             <KeepAlive>
               <component :is="Component" :bili-info="biliUserInfo" :user-info="userInfo" />
             </KeepAlive>
           </RouterView>
           <template v-else>
-            <NSpin show/>
+            <NSpin show />
           </template>
         </div>
       </NLayout>
diff --git a/src/views/manage/DashboardView.vue b/src/views/manage/DashboardView.vue
index 6c1f24d..7b8b46e 100644
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -9,7 +9,7 @@ const accountInfo = useAccount()
 </script>
 
 <template>
-  <NSpace justify="center" align="center" vertical>
+  <NSpace justify="center" align="center" vertical style="width: 100%;">
     <NCard embedded style="max-width: 90%;width: 800px;">
       <NSpace align="center" justify="center" vertical>
         <NText style="font-size: 3rem">
@@ -32,7 +32,7 @@ const accountInfo = useAccount()
       </NAlert>
       <NAlert>
         Bilibili 账户:
-        <NTag v-if="accountInfo?.isBiliVerified" type="success"> 已认证 </NTag>
+        <NTag v-if="accountInfo?.isBiliVerified" type="success"> 已认证 | {{ accountInfo?.biliId }} </NTag>
         <template v-else>
           <NTag type="error" size="small"> 未认证 </NTag>
           <NDivider vertical />
@@ -40,7 +40,7 @@ const accountInfo = useAccount()
         </template>
       </NAlert>
     </NCard>
-    <div style="max-width: 90%;width: 800px;">
+    <div style="width: 100%;">
       <NDivider/>
       <SettingsManageView />
     </div>
diff --git a/src/views/manage/HistoryView.vue b/src/views/manage/HistoryView.vue
index 48177e3..2026a1a 100644
--- a/src/views/manage/HistoryView.vue
+++ b/src/views/manage/HistoryView.vue
@@ -2,7 +2,7 @@
 import { useAccount } from '@/api/account'
 import { QueryGetAPI } from '@/api/query'
 import { HISTORY_API_URL } from '@/data/constants'
-import { NCard, useMessage } from 'naive-ui'
+import { NCard, NSpace, useMessage } from 'naive-ui'
 import { onMounted, ref } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -409,9 +409,11 @@ onMounted(async () => {
 
 <template>
   <NCard size="small">
-    <VChart :option="fansOption" style="height: 200px" />
-    <VChart :option="guardsOption" style="height: 200px" />
-    <VChart :option="upstatViewOption" style="height: 200px" />
-    <VChart :option="upstatLikeOption" style="height: 200px" />
+    <NSpace vertical>
+      <VChart :option="fansOption" style="height: 200px" />
+      <VChart :option="guardsOption" style="height: 200px" />
+      <VChart :option="upstatViewOption" style="height: 200px" />
+      <VChart :option="upstatLikeOption" style="height: 200px" />
+    </NSpace>
   </NCard>
 </template>
diff --git a/src/views/manage/ScheduleManageView.vue b/src/views/manage/ScheduleManageView.vue
index 21d6b33..9d87a0d 100644
--- a/src/views/manage/ScheduleManageView.vue
+++ b/src/views/manage/ScheduleManageView.vue
@@ -5,9 +5,28 @@ import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import ScheduleList from '@/components/ScheduleList.vue'
 import { SCHEDULE_API_URL } from '@/data/constants'
 import { addWeeks, endOfWeek, endOfYear, format, isBefore, startOfWeek, startOfYear } from 'date-fns'
-import { NButton, NDivider, NForm, NFormItem, NModal, NSelect, NTabPane, NTabs, useMessage } from 'naive-ui'
-import { SelectBaseOption, SelectMixedOption } from 'naive-ui/es/select/src/interface'
-import { computed, onMounted, ref } from 'vue'
+import {
+  NAlert,
+  NBadge,
+  NButton,
+  NColorPicker,
+  NDivider,
+  NForm,
+  NFormItem,
+  NInput,
+  NInputGroup,
+  NInputGroupLabel,
+  NModal,
+  NSelect,
+  NSpace,
+  NTabPane,
+  NTabs,
+  NText,
+  NTimePicker,
+  useMessage,
+} from 'naive-ui'
+import { SelectMixedOption, SelectOption } from 'naive-ui/es/select/src/interface'
+import { VNode, computed, h, onMounted, ref } from 'vue'
 
 const rules = {
   user: {
@@ -28,7 +47,7 @@ const rules = {
     trigger: ['input'],
   },
 }
-
+const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
 const yearOptions = [
   {
     label: new Date().getFullYear().toString(),
@@ -41,16 +60,45 @@ const yearOptions = [
 ] as SelectMixedOption[]
 const weekOptions = computed(() => {
   let weeks = [] as SelectMixedOption[]
-  const all = getAllWeeks(addScheduleYear.value.value as number)
+  const all = getAllWeeks(selectedScheduleYear.value)
   all.forEach((week) => {
+    const isExist = (schedules.value?.findIndex((s) => s.year == selectedScheduleYear.value && s.week == week[0] + 1) ?? -1) > -1
     weeks.push({
-      label: `第${week[0] + 1}周 (${week[1]})`,
+      label: `${isExist ? '(已安排)' : ''} 第${week[0] + 1}周 (${week[1]})`,
       value: week[0] + 1,
-      disabled: (schedules.value?.findIndex((s) => s.year == addScheduleYear.value.value && s.week == week[0] + 1) ?? -1) > -1,
+      disabled: isExist,
     })
   })
   return weeks
 })
+const dayOptions = computed(() => {
+  let days = [] as SelectMixedOption[]
+  for (let i = 0; i < 7; i++) {
+    try {
+      days.push({
+        label: updateScheduleModel.value?.days[i].tag ? weekdays[i] + ' (已安排)' : weekdays[i],
+        value: i,
+      })
+    } catch (err) {
+      console.error(err)
+    }
+  }
+  return days
+})
+const existTagOptions = computed(() => {
+  let colors = [] as SelectMixedOption[]
+  schedules.value?.forEach((s) => {
+    s.days.forEach((d) => {
+      if (d.tag && !colors.find((c) => c.value == d.tagColor && c.label == d.tag)) {
+        colors.push({
+          label: d.tag,
+          value: d.tagColor ?? '',
+        })
+      }
+    })
+  })
+  return colors
+})
 function getAllWeeks(year: number) {
   const startDate = startOfYear(new Date(year, 0, 1))
   const endDate = endOfYear(new Date(year, 11, 31))
@@ -61,8 +109,8 @@ function getAllWeeks(year: number) {
   let index = 0
 
   while (isBefore(date, endDate)) {
-    const weekStart = format(date, 'MM-dd')
-    const weekEnd = format(endOfWeek(date, { weekStartsOn: 1 }), 'MM-dd')
+    const weekStart = format(date, 'MM/dd')
+    const weekEnd = format(endOfWeek(date, { weekStartsOn: 1 }), 'MM/dd')
 
     weeks.push([index, `${weekStart} - ${weekEnd}`])
 
@@ -78,10 +126,13 @@ const message = useMessage()
 
 const showUpdateModal = ref(false)
 const showAddModal = ref(false)
+const showCopyModal = ref(false)
 const updateScheduleModel = ref<ScheduleWeekInfo>({} as ScheduleWeekInfo)
+const selectedExistTag = ref()
 
-const addScheduleYear = ref(yearOptions[0])
-const addScheduleWeek = ref()
+const selectedDay = ref(0)
+const selectedScheduleYear = ref(new Date().getFullYear())
+const selectedScheduleWeek = ref(Number(format(Date.now(), 'w')) + 1)
 
 async function get() {
   await QueryGetAPI<ScheduleWeekInfo[]>(SCHEDULE_API_URL + 'get', {
@@ -90,7 +141,6 @@ async function get() {
     .then((data) => {
       if (data.code == 200) {
         schedules.value = data.data
-        console.log(data.data)
       } else {
         message.error('加载失败: ' + data.message)
       }
@@ -100,53 +150,86 @@ async function get() {
       message.error('加载失败')
     })
 }
-const isAdding = ref(false)
+const isLoading = ref(false)
 async function addSchedule() {
-  isAdding.value = true
+  isLoading.value = true
   await QueryPostAPI(SCHEDULE_API_URL + 'update', {
-    year: addScheduleYear.value.value,
-    week: addScheduleWeek.value,
+    year: selectedScheduleYear.value,
+    week: selectedScheduleWeek.value,
   })
     .then((data) => {
       if (data.code == 200) {
         message.success('添加成功')
-        const model = {
-          year: addScheduleYear.value.value as number,
-          week: addScheduleWeek.value.value as number,
-          days: new Array(7) as ScheduleDayInfo[],
-        } as ScheduleWeekInfo
-        schedules.value?.push(model)
         showAddModal.value = false
-        updateScheduleModel.value = model
-        showUpdateModal.value = true
+        get()
+      } else {
+        message.error('添加失败: ' + data.message)
       }
     })
     .finally(() => {
-      isAdding.value = false
+      isLoading.value = false
     })
 }
-async function onUpdateSchedule(schedule: ScheduleWeekInfo) {
-  updateScheduleModel.value = schedule
+async function onCopySchedule() {
+  if (schedules.value?.find((s) => s.year == selectedScheduleYear.value && s.week == selectedScheduleWeek.value)) {
+    message.error('想要复制到的周已存在')
+  } else {
+    updateScheduleModel.value.year = selectedScheduleYear.value
+    updateScheduleModel.value.week = selectedScheduleWeek.value
+    await onUpdateSchedule()
+    showCopyModal.value = false
+  }
+}
+async function onUpdateSchedule() {
   await QueryPostAPI(SCHEDULE_API_URL + 'update', {
-    year: addScheduleYear.value.value,
-    week: addScheduleWeek.value,
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        message.success('添加成功')
-        const model = {
-          year: addScheduleYear.value.value as number,
-          week: addScheduleWeek.value.value as number,
-          days: new Array(7) as ScheduleDayInfo[],
-        } as ScheduleWeekInfo
-        showAddModal.value = false
-        showUpdateModal.value = true
+    year: updateScheduleModel.value.year,
+    week: updateScheduleModel.value.week,
+    day: selectedDay.value,
+    days: updateScheduleModel.value?.days,
+  }).then((data) => {
+    if (data.code == 200) {
+      message.success('成功')
+      const s = schedules.value?.find((s) => s.year == selectedScheduleYear.value && s.week == selectedScheduleWeek.value)
+      if (s) {
+        s.days[selectedDay.value] = updateScheduleModel.value.days[selectedDay.value]
+      } else {
+        schedules.value?.push(updateScheduleModel.value)
       }
-    })
-    .finally(() => {
-      isAdding.value = false
-    })
+      //updateScheduleModel.value = {} as ScheduleWeekInfo
+    } else {
+      message.error('修改失败: ' + data.message)
+    }
+  })
 }
+async function onDeleteSchedule(schedule: ScheduleWeekInfo) {
+  await QueryGetAPI(SCHEDULE_API_URL + 'del', {
+    year: schedule.year,
+    week: schedule.week,
+  }).then((data) => {
+    if (data.code == 200) {
+      message.success('已删除')
+      get()
+    } else {
+      message.error('删除失败: ' + data.message)
+    }
+  })
+}
+function onOpenUpdateModal(schedule: ScheduleWeekInfo) {
+  updateScheduleModel.value = JSON.parse(JSON.stringify(schedule))
+  showUpdateModal.value = true
+}
+function onOpenCopyModal(schedule: ScheduleWeekInfo) {
+  updateScheduleModel.value = JSON.parse(JSON.stringify(schedule))
+  showCopyModal.value = true
+}
+function onSelectChange(value: string | null, option: SelectMixedOption) {
+  if (value) {
+    updateScheduleModel.value.days[selectedDay.value].tagColor = value
+    updateScheduleModel.value.days[selectedDay.value].tag = option.label as string
+  }
+}
+const renderOption = ({ node, option }: { node: VNode; option: SelectOption }) =>
+  h(NSpace, { align: 'center', size: 3, style: 'margin-left: 5px' }, () => [option.value ? h(NBadge, { dot: true, color: option.value?.toString() }) : null, node])
 
 onMounted(() => {
   get()
@@ -154,17 +237,65 @@ onMounted(() => {
 </script>
 
 <template>
-  <NButton @click="showAddModal = true"> 添加日程 </NButton>
+  <NButton @click="showAddModal = true"> 添加周程 </NButton>
+  <NDivider />
   <NModal v-model:show="showAddModal" style="width: 600px; max-width: 90vw" preset="card" title="添加周程">
-    <NSelect :options="yearOptions" />
-    <NSelect :options="weekOptions" />
+    <NSpace vertical>
+      年份
+      <NSelect :options="yearOptions" v-model:value="selectedScheduleYear" />
+      第几周
+      <NSelect :options="weekOptions" v-model:value="selectedScheduleWeek" />
+    </NSpace>
     <NDivider />
-    <NButton @click="addSchedule" :loading="isAdding"> 添加 </NButton>
+    <NButton @click="addSchedule" :loading="isLoading"> 添加 </NButton>
   </NModal>
-  <NModal v-model:show="showUpdateModal">
-    <NTabs>
-      <NTabPane v-for="(day, index) in updateScheduleModel.days" v-bind:key="day.time" :name="index" :tab="index.toString()"> </NTabPane>
-    </NTabs>
+  <NModal v-model:show="showCopyModal" style="width: 600px; max-width: 90vw" preset="card" title="复制周程">
+    <NAlert type="info"> 复制为 </NAlert>
+    <NSpace vertical>
+      年份
+      <NSelect :options="yearOptions" v-model:value="selectedScheduleYear" />
+      第几周
+      <NSelect :options="weekOptions" v-model:value="selectedScheduleWeek" />
+    </NSpace>
+    <NDivider />
+    <NButton @click="onCopySchedule" :loading="isLoading"> 复制 </NButton>
   </NModal>
-  <ScheduleList :schedules="schedules ?? []" />
+  <NModal v-model:show="showUpdateModal" style="width: 600px; max-width: 90vw" preset="card" title="编辑周程">
+    <NSelect :options="dayOptions" v-model:value="selectedDay" />
+    <NDivider />
+    <template v-if="updateScheduleModel">
+      <NSpace vertical>
+        <NSpace>
+          <NInputGroup>
+            <NInputGroupLabel type="primary"> 标签 </NInputGroupLabel>
+            <NInput v-model:value="updateScheduleModel.days[selectedDay].tag" placeholder="标签 | 留空视为无安排" style="max-width: 300px" maxlength="10" show-count />
+          </NInputGroup>
+          <NSelect
+            v-model:value="selectedExistTag"
+            @update:value="onSelectChange"
+            :options="existTagOptions"
+            filterable
+            clearable
+            placeholder="使用过的标签"
+            style="max-width: 150px"
+            :render-option="renderOption"
+          />
+        </NSpace>
+        <NInputGroup>
+          <NInputGroupLabel> 内容 </NInputGroupLabel>
+          <NInput v-model:value="updateScheduleModel.days[selectedDay].title" placeholder="内容" style="max-width: 200px" maxlength="30" show-count />
+        </NInputGroup>
+        <NTimePicker default-formatted-value="20:00" v-model:formatted-value="updateScheduleModel.days[selectedDay].time" format="HH:mm" />
+        <NColorPicker
+          v-model:value="updateScheduleModel.days[selectedDay].tagColor"
+          :swatches="['#FFFFFF', '#18A058', '#2080F0', '#F0A020', 'rgba(208, 48, 80, 1)']"
+          default-value="#61B589"
+          :show-alpha="false"
+          :modes="['hex']"
+        />
+        <NButton @click="onUpdateSchedule()"> 保存 </NButton>
+      </NSpace>
+    </template>
+  </NModal>
+  <ScheduleList :schedules="schedules ?? []" @on-update="onOpenUpdateModal" @on-delete="onDeleteSchedule" @on-copy="onOpenCopyModal" is-self />
 </template>
diff --git a/src/views/manage/SettingsManageView.vue b/src/views/manage/SettingsManageView.vue
index bc4360a..5e82121 100644
--- a/src/views/manage/SettingsManageView.vue
+++ b/src/views/manage/SettingsManageView.vue
@@ -1,36 +1,197 @@
 <script setup lang="ts">
 import { useAccount } from '@/api/account'
-import { NButton, NCard, NCheckbox, NCheckboxGroup, NDivider, NForm, NSpace, NSwitch, useMessage } from 'naive-ui'
-import { ref } from 'vue'
+import { NButton, NCard, NCheckbox, NCheckboxGroup, NDivider, NForm, NSelect, NSpace, NSwitch, NTabPane, NTabs, SelectOption, useMessage } from 'naive-ui'
+import { computed, onMounted, ref } from 'vue'
 import { useRequest } from 'vue-request'
-import { FunctionTypes } from '@/api/api-models'
+import { FunctionTypes, ScheduleWeekInfo, SongFrom, SongLanguage, SongsInfo } from '@/api/api-models'
 import { QueryPostAPI } from '@/api/query'
-import { ACCOUNT_API_URL } from '@/data/constants'
+import { ACCOUNT_API_URL, FETCH_API } from '@/data/constants'
+import ScheduleView from '../view/ScheduleView.vue'
+import UserIndexView from '../view/UserIndexView.vue'
+import SongListView from '../view/SongListView.vue'
 
-const account = useAccount()
+const accountInfo = useAccount()
 const message = useMessage()
 
+const templateOptions = [
+  {
+    label: '主页',
+    value: 'index',
+  },
+  {
+    label: '歌单',
+    value: 'songlist',
+  },
+  {
+    label: '日程表',
+    value: 'schedule',
+  },
+] as SelectOption[]
+const fakeSongList = [
+  {
+    id: 1,
+    key: 'song1',
+    name: '歌曲1',
+    author: ['作者1'],
+    url: 'https://example.com/song1.mp3',
+    from: SongFrom.Custom,
+    language: [SongLanguage.Chinese],
+    createTime: Date.now(),
+    updateTime: Date.now(),
+  },
+  {
+    id: 2,
+    key: 'song2',
+    name: '歌曲2',
+    author: ['作者2'],
+    url: 'https://example.com/song2.mp3',
+    from: SongFrom.Custom,
+    language: [SongLanguage.Chinese],
+    createTime: Date.now(),
+    updateTime: Date.now(),
+  },
+  {
+    id: 3,
+    key: 'song3',
+    name: '歌曲3',
+    author: ['作者3'],
+    url: 'https://example.com/song3.mp3',
+    from: SongFrom.Custom,
+    language: [SongLanguage.Chinese],
+    createTime: Date.now(),
+    updateTime: Date.now(),
+  },
+  {
+    id: 4,
+    key: 'song4',
+    name: '歌曲4',
+    author: ['作者4'],
+    url: 'https://example.com/song4.mp3',
+    from: SongFrom.Custom,
+    language: [SongLanguage.Chinese],
+    createTime: Date.now(),
+    updateTime: Date.now(),
+  },
+  {
+    id: 5,
+    key: 'song5',
+    name: '歌曲5',
+    author: ['作者5'],
+    url: 'https://example.com/song5.mp3',
+    from: SongFrom.Custom,
+    language: [SongLanguage.Chinese],
+    createTime: Date.now(),
+    updateTime: Date.now(),
+  },
+] as SongsInfo[]
+const fakeSchedule = [
+  {
+    year: 2023,
+    week: 30,
+    days: [
+      {
+        title: '唱唱歌!',
+        tag: '歌回',
+        tagColor: '#61B589',
+        time: '10:00',
+      },
+      {
+        title: '玩点游戏',
+        tag: '游戏',
+        tagColor: '#A36565',
+        time: '20:00',
+      },
+      {
+        title: 'Title 3',
+        tag: 'Tag 3',
+        tagColor: '#7BCDEF',
+        time: '12:00 PM',
+      },
+      {
+        title: null,
+        tag: null,
+        tagColor: null,
+        time: null,
+      },
+      {
+        title: null,
+        tag: null,
+        tagColor: null,
+        time: null,
+      },
+      {
+        title: null,
+        tag: null,
+        tagColor: null,
+        time: null,
+      },
+      {
+        title: null,
+        tag: null,
+        tagColor: null,
+        time: null,
+      },
+    ],
+  },
+] as ScheduleWeekInfo[]
+const selectedOption = ref(templateOptions[0].value)
+
+const scheduleTemplateOptions = [
+  {
+    label: '默认',
+    value: '',
+  },
+  {
+    label: '粉粉',
+    value: 'PinkySchedule',
+  },
+] as SelectOption[]
+const selectedScheduleTemplate = ref(accountInfo.value?.settings.scheduleTemplate ?? scheduleTemplateOptions[0].value?.toString())
+const songListTemplateOptions = [
+  {
+    label: '默认',
+    value: '',
+  },
+] as SelectOption[]
+const selectedSongListTemplate = ref(accountInfo.value?.settings.songListTemplate ?? songListTemplateOptions[0].value)
+
+const biliUserInfo = ref()
+
 function UpdateEnableFunction(func: FunctionTypes, enable: boolean) {
-  if (account.value) {
+  if (accountInfo.value) {
     if (enable) {
       //从account.value?.settings.enableFunctions中移除指定的func
-      account.value.settings.enableFunctions = account.value?.settings.enableFunctions.filter((f) => f != func)
+      accountInfo.value.settings.enableFunctions = accountInfo.value?.settings.enableFunctions.filter((f) => f != func)
     } else {
-      account.value.settings.enableFunctions.push(func)
+      accountInfo.value.settings.enableFunctions.push(func)
     }
   }
 }
+async function RequestBiliUserData() {
+  await fetch(FETCH_API + `https://account.bilibili.com/api/member/getCardByMid?mid=10021741`)
+    .then(async (respone) => {
+      let data = await respone.json()
+      if (data.code == 0) {
+        biliUserInfo.value = data.card
+      } else {
+        throw new Error('Bili User API Error: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+}
 async function SaveComboGroupSetting(value: (string | number)[], meta: { actionType: 'check' | 'uncheck'; value: string | number }) {
-  if (account.value) {
+  if (accountInfo.value) {
     //UpdateEnableFunction(meta.value as FunctionTypes, meta.actionType == 'check')
-    await QueryPostAPI(ACCOUNT_API_URL + 'update-setting', account.value?.settings)
+    await QueryPostAPI(ACCOUNT_API_URL + 'update-setting', accountInfo.value?.settings)
       .then((data) => {
         if (data.code == 200) {
           //message.success('保存成功')
         } else {
           message.error('修改失败')
-          if (account.value) {
-            account.value.settings.enableFunctions = account.value.settings.enableFunctions.filter((f) => f != (meta.value as FunctionTypes))
+          if (accountInfo.value) {
+            accountInfo.value.settings.enableFunctions = accountInfo.value.settings.enableFunctions.filter((f) => f != (meta.value as FunctionTypes))
           }
         }
       })
@@ -40,10 +201,10 @@ async function SaveComboGroupSetting(value: (string | number)[], meta: { actionT
       })
   }
 }
-async function SaveComboSetting(value :boolean) {
-  if (account.value) {
+async function SaveComboSetting(value: boolean) {
+  if (accountInfo.value) {
     //UpdateEnableFunction(meta.value as FunctionTypes, meta.actionType == 'check')
-    await QueryPostAPI(ACCOUNT_API_URL + 'update-setting', account.value?.settings)
+    await QueryPostAPI(ACCOUNT_API_URL + 'update-setting', accountInfo.value?.settings)
       .then((data) => {
         if (data.code == 200) {
           //message.success('保存成功')
@@ -57,23 +218,61 @@ async function SaveComboSetting(value :boolean) {
       })
   }
 }
+const componentType = computed(() => {
+  switch (selectedOption.value) {
+    case 'index':
+      return UserIndexView
+    case 'songlist':
+      return SongListView
+    case 'schedule':
+      return ScheduleView
+    default:
+      return UserIndexView
+  }
+})
+onMounted(() => {
+  RequestBiliUserData()
+})
 </script>
 
 <template>
-  <NCard v-if="account" title="设置">
-    <NDivider style="margin: 0"> 启用功能 </NDivider>
-    <NCheckboxGroup v-model:value="account.settings.enableFunctions" @update:value="SaveComboGroupSetting">
-      <NCheckbox :value="FunctionTypes.SongList"> 歌单 </NCheckbox>
-      <NCheckbox :value="FunctionTypes.QuestionBox"> 提问箱(棉花糖 </NCheckbox>
-    </NCheckboxGroup>
-    <NDivider > 通知 </NDivider>
-    <NSpace>
-      <NCheckbox v-model:checked="account.settings.sendEmail.recieveQA" @update:checked="SaveComboSetting"> 收到新提问时发送邮件 </NCheckbox>
-      <NCheckbox v-model:checked="account.settings.sendEmail.recieveQAReply" @update:checked="SaveComboSetting"> 提问收到回复时发送邮件 </NCheckbox>
-    </NSpace>
-    <NDivider> 提问箱 </NDivider>
-    <NSpace>
-      <NCheckbox v-model:checked="account.settings.questionBox.allowUnregistedUser" @update:checked="SaveComboSetting"> 允许未注册用户提问 </NCheckbox>
-    </NSpace>
+  <NCard v-if="accountInfo" title="设置" style="min-height: 800px">
+    <NTabs>
+      <NTabPane tab="常规" name="general">
+        <NDivider style="margin: 0"> 启用功能 </NDivider>
+        <NCheckboxGroup v-model:value="accountInfo.settings.enableFunctions" @update:value="SaveComboGroupSetting">
+          <NCheckbox :value="FunctionTypes.SongList"> 歌单 </NCheckbox>
+          <NCheckbox :value="FunctionTypes.QuestionBox"> 提问箱(棉花糖 </NCheckbox>
+          <NCheckbox :value="FunctionTypes.Schedule"> 日程 </NCheckbox>
+        </NCheckboxGroup>
+        <NDivider> 通知 </NDivider>
+        <NSpace>
+          <NCheckbox v-model:checked="accountInfo.settings.sendEmail.recieveQA" @update:checked="SaveComboSetting"> 收到新提问时发送邮件 </NCheckbox>
+          <NCheckbox v-model:checked="accountInfo.settings.sendEmail.recieveQAReply" @update:checked="SaveComboSetting"> 提问收到回复时发送邮件 </NCheckbox>
+        </NSpace>
+        <NDivider> 提问箱 </NDivider>
+        <NSpace>
+          <NCheckbox v-model:checked="accountInfo.settings.questionBox.allowUnregistedUser" @update:checked="SaveComboSetting"> 允许未注册用户提问 </NCheckbox>
+        </NSpace>
+      </NTabPane>
+      <NTabPane tab="模板" name="template">
+        <NSpace vertical>
+          <NSpace align="center"> 页面 <NSelect :options="templateOptions" v-model:value="selectedOption" style="width: 150px" /> </NSpace>
+          <NDivider style="margin: 5px 0 5px 0" title-placement="left"> 模板 </NDivider>
+          <template v-if="selectedOption == 'index'">
+            <NSelect style="width: 150px" />
+            <UserIndexView :user-info="accountInfo" :bili-info="biliUserInfo" />
+          </template>
+          <template v-else-if="selectedOption == 'songlist'">
+            <NSelect :options="songListTemplateOptions" v-model:value="selectedSongListTemplate" style="width: 150px" />
+            <SongListView :user-info="accountInfo" :bili-info="biliUserInfo" :fake-data="fakeSongList" :is-self="false" />
+          </template>
+          <template v-else-if="selectedOption == 'schedule'">
+            <NSelect :options="scheduleTemplateOptions" v-model:value="selectedScheduleTemplate" style="width: 150px" />
+            <ScheduleView :user-info="accountInfo" :bili-info="biliUserInfo" :fake-data="fakeSchedule" :is-self="false" :template="selectedScheduleTemplate" />
+          </template>
+        </NSpace>
+      </NTabPane>
+    </NTabs>
   </NCard>
 </template>
diff --git a/src/views/view/ScheduleView.vue b/src/views/view/ScheduleView.vue
index e69de29..d020935 100644
--- a/src/views/view/ScheduleView.vue
+++ b/src/views/view/ScheduleView.vue
@@ -0,0 +1,75 @@
+<template>
+  <NSpin v-if="isLoading" show />
+  <component v-else v-bind="$attrs" :is="componentType" :user-info="userInfo" :currentData="currentData" />
+</template>
+
+<script lang="ts" setup>
+import { ScheduleWeekInfo } from '@/api/api-models'
+import DefaultScheduleTemplate from '@/views/view/scheduleTemplate/DefaultScheduleTemplate.vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { UserInfo } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { SCHEDULE_API_URL } from '@/data/constants'
+import { NSpin, useMessage } from 'naive-ui'
+import PinkySchedule from './scheduleTemplate/PinkySchedule.vue'
+
+const props = defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  biliInfo: any | undefined
+  userInfo: UserInfo | undefined
+  template?: string | undefined
+  fakeData?: ScheduleWeekInfo[]
+}>()
+
+const componentType = computed(() => {
+  const type = props.template ?? props.userInfo?.extra?.templateTypes['schedule']?.toLowerCase()
+  if (props.userInfo) {
+    switch (type?.toLocaleLowerCase()) {
+      case 'test':
+        return DefaultScheduleTemplate
+      case 'pinkyschedule':
+        return PinkySchedule
+      default:
+        return DefaultScheduleTemplate
+    }
+  } else {
+    return DefaultScheduleTemplate
+  }
+})
+const currentData = ref<ScheduleWeekInfo[]>()
+const isLoading = ref(true)
+const message = useMessage()
+
+const errMessage = ref('')
+
+async function get() {
+  isLoading.value = true
+  await QueryGetAPI<ScheduleWeekInfo[]>(SCHEDULE_API_URL + 'get', {
+    id: props.userInfo?.id,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        currentData.value = data.data
+      } else {
+        errMessage.value = data.message
+        message.error('加载失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('加载失败')
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+
+onMounted(async () => {
+  if (!props.fakeData) {
+    await get()
+  } else {
+    currentData.value = props.fakeData
+    isLoading.value = false
+  }
+})
+</script>
diff --git a/src/views/view/SongListView.vue b/src/views/view/SongListView.vue
index 25444a4..f4b3a14 100644
--- a/src/views/view/SongListView.vue
+++ b/src/views/view/SongListView.vue
@@ -1,10 +1,10 @@
 <template>
   <NSpin v-if="isLoading" show />
-  <component v-else :is="songListType" :user-info="userInfo" :songs="songs" />
+  <component v-else :is="componentType" :user-info="userInfo" :currentData="currentData" />
 </template>
 
 <script lang="ts" setup>
-import { SongListTypes, SongsInfo } from '@/api/api-models'
+import { SongsInfo } from '@/api/api-models'
 import DefaultSongListTemplate from '@/views/view/songListTemplate/DefaultSongListTemplate.vue'
 import { computed, onMounted, ref } from 'vue'
 import { UserInfo } from '@/api/api-models'
@@ -12,16 +12,19 @@ import { QueryGetAPI } from '@/api/query'
 import { SONG_API_URL } from '@/data/constants'
 import { NSpin, useMessage } from 'naive-ui'
 
-const { biliInfo, userInfo } = defineProps<{
+const props = defineProps<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   biliInfo: any | undefined
   userInfo: UserInfo | undefined
+  template?: string | undefined
+  fakeData?: SongsInfo[]
 }>()
 
-const songListType = computed(() => {
-  if (userInfo) {
-    switch (userInfo.songListType) {
-      case SongListTypes.Default:
+const componentType = computed(() => {
+  const type = props.template ?? props.userInfo?.extra?.templateTypes['songlist']?.toLowerCase()
+  if (props.userInfo) {
+    switch (type?.toLocaleLowerCase()) {
+      case '':
         return DefaultSongListTemplate
 
       default:
@@ -31,7 +34,7 @@ const songListType = computed(() => {
     return DefaultSongListTemplate
   }
 })
-const songs = ref<SongsInfo[]>()
+const currentData = ref<SongsInfo[]>()
 const isLoading = ref(true)
 const message = useMessage()
 
@@ -40,11 +43,11 @@ const errMessage = ref('')
 async function getSongs() {
   isLoading.value = true
   await QueryGetAPI<SongsInfo[]>(SONG_API_URL + 'get', {
-    id: userInfo?.id,
+    id: props.userInfo?.id,
   })
     .then((data) => {
       if (data.code == 200) {
-        songs.value = data.data
+        currentData.value = data.data
       } else {
         errMessage.value = data.message
         message.error('加载失败: ' + data.message)
@@ -60,6 +63,11 @@ async function getSongs() {
 }
 
 onMounted(async () => {
-  await getSongs()
+  if (!props.fakeData) {
+    await getSongs()
+  } else {
+    currentData.value = props.fakeData
+    isLoading.value = false
+  }
 })
 </script>
diff --git a/src/views/view/UserIndexView.vue b/src/views/view/UserIndexView.vue
index 36e7c94..623d068 100644
--- a/src/views/view/UserIndexView.vue
+++ b/src/views/view/UserIndexView.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="indexType" :user-info="userInfo" :bili-info="biliInfo"/>
+  <component :is="componentType" :user-info="userInfo" :bili-info="biliInfo" />
 </template>
 
 <script lang="ts" setup>
@@ -8,16 +8,18 @@ import DefaultIndexTemplate from '@/views/view/indexTemplate/DefaultIndexTemplat
 import { computed, onMounted, ref } from 'vue'
 import { UserInfo } from '@/api/api-models'
 
-const { biliInfo, userInfo } = defineProps<{
+const props = defineProps<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   biliInfo: any | undefined
   userInfo: UserInfo | undefined
+  template?: string | undefined
 }>()
 
-const indexType = computed(() => {
-  if (userInfo) {
-    switch (userInfo.indexType) {
-      case IndexTypes.Default:
+const componentType = computed(() => {
+  const type = props.template ?? props.userInfo?.extra?.templateTypes['index']?.toLowerCase()
+  if (props.userInfo) {
+    switch (type?.toLocaleLowerCase()) {
+      case '':
         return DefaultIndexTemplate
 
       default:
diff --git a/src/views/view/scheduleTemplate/DefaultScheduleTemplate.vue b/src/views/view/scheduleTemplate/DefaultScheduleTemplate.vue
new file mode 100644
index 0000000..9c73f57
--- /dev/null
+++ b/src/views/view/scheduleTemplate/DefaultScheduleTemplate.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account'
+import { ScheduleWeekInfo, UserInfo } from '@/api/api-models'
+import ScheduleList from '@/components/ScheduleList.vue'
+import { NDivider } from 'naive-ui'
+
+const accountInfo = useAccount()
+
+defineProps<{
+  userInfo: UserInfo | undefined
+  currentData: ScheduleWeekInfo[] | undefined
+}>()
+</script>
+
+<template>
+  <NDivider style="margin-top: 10px" />
+  <ScheduleList v-if="currentData" :schedules="currentData ?? []" :is-self="accountInfo?.id == userInfo?.id" v-bind="$attrs" />
+  <NDivider />
+</template>
diff --git a/src/views/view/scheduleTemplate/PinkySchedule.vue b/src/views/view/scheduleTemplate/PinkySchedule.vue
new file mode 100644
index 0000000..0a05eff
--- /dev/null
+++ b/src/views/view/scheduleTemplate/PinkySchedule.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ScheduleWeekInfo, UserInfo } from '@/api/api-models';
+
+defineProps<{
+  userInfo: UserInfo | undefined
+  currentData: ScheduleWeekInfo[] | undefined
+}>()
+</script>
+<template>
+  <div class="schedule-template pinky">
+    <div v-for="item in currentData" :key="item.week">
+      test
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.schedule-template pinky {
+  background-color: #ebf0fa;
+  background-image: linear-gradient(90deg, #ffffff 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(#ffffff 10%, rgba(0, 0, 0, 0) 10%);
+  background-size: 20px 20px;
+}
+</style>
diff --git a/src/views/view/songListTemplate/DefaultSongListTemplate.vue b/src/views/view/songListTemplate/DefaultSongListTemplate.vue
index 5aba303..019309b 100644
--- a/src/views/view/songListTemplate/DefaultSongListTemplate.vue
+++ b/src/views/view/songListTemplate/DefaultSongListTemplate.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account';
+import { useAccount } from '@/api/account'
 import { SongsInfo, UserInfo } from '@/api/api-models'
 import SongList from '@/components/SongList.vue'
-import { NDivider } from 'naive-ui';
+import { NDivider } from 'naive-ui'
 
 const accountInfo = useAccount()
 
 defineProps<{
   userInfo: UserInfo | undefined
-  songs: SongsInfo[] | undefined
+  currentData: SongsInfo[] | undefined
 }>()
 </script>
 
 <template>
-  <NDivider style="margin-top: 10px;"/>
-  <SongList v-if="songs" :songs="songs ?? []" :is-self="accountInfo?.id == userInfo?.id"/>
-  <NDivider/>
+  <NDivider style="margin-top: 10px" />
+  <SongList v-if="currentData" :songs="currentData ?? []" :is-self="accountInfo?.id == userInfo?.id" v-bind="$attrs" />
+  <NDivider />
 </template>