调整用户页样式, 添加过渡动画

src/views/view/QuestionBoxView.vue

@@ -30,7 +30,6 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 
 const { biliInfo, userInfo } = defineProps<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   biliInfo: any | undefined
   userInfo: UserInfo | undefined
 }>()
@@ -172,40 +171,50 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div style="max-width: 700px; margin: 0 auto" title="提问">
+  <div
+    style="max-width: 700px; margin: 0 auto"
+    title="提问"
+  >
     <NCard embedded>
       <NSpace vertical>
-        <NCard v-if="tags.length > 0" title="投稿话题 (可选)" size="small">
+        <NCard
+          v-if="tags.length > 0"
+          title="投稿话题 (可选)"
+          size="small"
+        >
           <NSpace>
             <NTag
               v-for="tag in tags"
               :key="tag"
-              @click="onSelectTag(tag)"
               style="cursor: pointer"
               :bordered="false"
               :type="selectedTag == tag ? 'primary' : 'default'"
+              @click="onSelectTag(tag)"
             >
               {{ tag }}
             </NTag>
           </NSpace>
         </NCard>
-        <NSpace align="center" justify="center">
+        <NSpace
+          align="center"
+          justify="center"
+        >
           <NInput
+            v-model:value="questionMessage"
             :disabled="isSelf"
             show-count
             maxlength="5000"
             type="textarea"
             :count-graphemes="countGraphemes"
-            v-model:value="questionMessage"
             style="width: 300px"
           />
           <NUpload
+            v-model:file-list="fileList"
             :max="1"
             accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico"
             list-type="image-card"
             :disabled="!accountInfo.id || isSelf"
             :default-upload="false"
-            v-model:file-list="fileList"
             @update:file-list="OnFileListChange"
           >
             + 上传图片
@@ -213,14 +222,31 @@ onUnmounted(() => {
         </NSpace>
         <NDivider style="margin: 10px 0 10px 0" />
         <NSpace align="center">
-          <NAlert v-if="!accountInfo.id && !isSelf" type="warning"> 只有注册用户才能够上传图片 </NAlert>
+          <NAlert
+            v-if="!accountInfo.id && !isSelf"
+            type="warning"
+          >
+            只有注册用户才能够上传图片
+          </NAlert>
         </NSpace>
-        <NSpace v-if="accountInfo.id" vertical>
-          <NCheckbox :disabled="isSelf" v-model:checked="isAnonymous" label="匿名提问" />
+        <NSpace
+          v-if="accountInfo.id"
+          vertical
+        >
+          <NCheckbox
+            v-model:checked="isAnonymous"
+            :disabled="isSelf"
+            label="匿名提问"
+          />
           <NDivider style="margin: 10px 0 10px 0" />
         </NSpace>
         <NSpace justify="center">
-          <NButton :disabled="isSelf" type="primary" :loading="isSending || !token" @click="SendQuestion">
+          <NButton
+            :disabled="isSelf"
+            type="primary"
+            :loading="isSending || !token"
+            @click="SendQuestion"
+          >
             发送
           </NButton>
           <NButton
@@ -233,24 +259,46 @@ onUnmounted(() => {
         </NSpace>
         <VueTurnstile
           ref="turnstile"
-          :site-key="TURNSTILE_KEY"
           v-model="token"
+          :site-key="TURNSTILE_KEY"
           theme="auto"
           style="text-align: center"
         />
-        <NAlert v-if="isSelf" type="warning"> 不能给自己提问 </NAlert>
+        <NAlert
+          v-if="isSelf"
+          type="warning"
+        >
+          不能给自己提问
+        </NAlert>
       </NSpace>
     </NCard>
     <NDivider> 公开回复 </NDivider>
     <NList v-if="publicQuestions.length > 0">
-      <NListItem v-for="item in publicQuestions" :key="item.id">
-        <NCard :embedded="!item.isReaded" hoverable size="small">
+      <NListItem
+        v-for="item in publicQuestions"
+        :key="item.id"
+      >
+        <NCard
+          :embedded="!item.isReaded"
+          hoverable
+          size="small"
+        >
           <template #header>
-            <NSpace :size="0" align="center">
-              <NText depth="3" style="font-size: small">
+            <NSpace
+              :size="0"
+              align="center"
+            >
+              <NText
+                depth="3"
+                style="font-size: small"
+              >
                 <NTooltip>
                   <template #trigger>
-                    <NTime :time="item.sendAt" :to="Date.now()" type="relative" />
+                    <NTime
+                      :time="item.sendAt"
+                      :to="Date.now()"
+                      type="relative"
+                    />
                   </template>
                   <NTime />
                 </NTooltip>
@@ -259,12 +307,29 @@ onUnmounted(() => {
           </template>
           <NCard style="text-align: center">
             {{ item.question.message }}
-            <br />
-            <NImage v-if="item.question.image" :src="item.question.image" height="100" lazy />
+            <br>
+            <NImage
+              v-if="item.question.image"
+              :src="item.question.image"
+              height="100"
+              lazy
+            />
           </NCard>
-          <template v-if="item.answer" #footer>
-            <NSpace align="center" :size="6" :wrap="false">
-              <NAvatar :src="AVATAR_URL + userInfo?.biliId + '?size=64'" circle :size="45" :img-props="{ referrerpolicy: 'no-referrer' }" />
+          <template
+            v-if="item.answer"
+            #footer
+          >
+            <NSpace
+              align="center"
+              :size="6"
+              :wrap="false"
+            >
+              <NAvatar
+                :src="AVATAR_URL + userInfo?.biliId + '?size=64'"
+                circle
+                :size="45"
+                :img-props="{ referrerpolicy: 'no-referrer' }"
+              />
               <NDivider vertical />
               <NText style="font-size: 16px">
                 {{ item.answer?.message }}

src/views/view/SongListView.vue

@@ -1,42 +1,44 @@
 <template>
-  <NSpin
-    v-if="isLoading"
-    show
-  />
-  <component
-    :is="selectedTemplate?.component"
-    v-else
-    ref="dynamicConfigRef"
-    :config="selectedTemplate?.settingName ? currentConfig : undefined"
-    :user-info="userInfo"
-    :bili-info="biliInfo"
-    :data="currentData"
-    :live-request-settings="settings"
-    :live-request-active="songsActive"
-    v-bind="$attrs"
-    @request-song="requestSong"
-  />
-  <NButton
-    v-if="selectedTemplate?.settingName && userInfo?.id == accountInfo.id"
-    type="info"
-    size="small"
-    style="position: absolute; right: 32px; top: 20px; z-index: 1000; border: solid 3px #dfdfdf;"
-    @click="showSettingModal = true"
-  >
-    自定义
-  </NButton>
-  <NModal
-    v-model:show="showSettingModal"
-    style="max-width: 90vw; width: 800px;"
-    preset="card"
-    title="设置"
-  >
-    <DynamicForm
-      :name="selectedTemplate?.settingName"
-      :config-data="currentConfig"
-      :config="selectedTemplateConfig"
+  <div>
+    <NSpin
+      v-if="isLoading"
+      show
     />
-  </NModal>
+    <component
+      :is="selectedTemplate?.component"
+      v-else
+      ref="dynamicConfigRef"
+      :config="selectedTemplate?.settingName ? currentConfig : undefined"
+      :user-info="userInfo"
+      :bili-info="biliInfo"
+      :data="currentData"
+      :live-request-settings="settings"
+      :live-request-active="songsActive"
+      v-bind="$attrs"
+      @request-song="requestSong"
+    />
+    <NButton
+      v-if="selectedTemplate?.settingName && userInfo?.id == accountInfo.id"
+      type="info"
+      size="small"
+      style="position: absolute; right: 32px; top: 20px; z-index: 1000; border: solid 3px #dfdfdf;"
+      @click="showSettingModal = true"
+    >
+      自定义
+    </NButton>
+    <NModal
+      v-model:show="showSettingModal"
+      style="max-width: 90vw; width: 800px;"
+      preset="card"
+      title="设置"
+    >
+      <DynamicForm
+        :name="selectedTemplate?.settingName"
+        :config-data="currentConfig"
+        :config="selectedTemplateConfig"
+      />
+    </NModal>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -135,7 +137,8 @@ import { computed, onMounted, ref, watch } from 'vue';
     await DownloadConfig(selectedTemplate.value!.settingName, props.userInfo?.id)
       .then((data) => {
         if (data.msg) {
-          message.error('加载失败: ' + data.msg);
+          //message.error('加载失败: ' + data.msg);
+          console.log('当前模板没有配置, 使用默认配置');
         } else {
           currentConfig.value = data.data;
         }

src/views/view/UserIndexView.vue

@@ -1,9 +1,11 @@
 <template>
-  <component
-    :is="componentType"
-    :user-info="userInfo"
-    :bili-info="biliInfo"
-  />
+  <div>
+    <component
+      :is="componentType"
+      :user-info="userInfo"
+      :bili-info="biliInfo"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>

src/views/view/VideoCollectView.vue

@@ -39,25 +39,27 @@ async function get() {
 </script>
 
 <template>
-  <NSpin :show="isLoading">
-    <NFlex justify="center">
-      <NEmpty
-        v-if="videoTables.length == 0"
-        description="没有正在进行的征集表"
-      />
-      <NList v-else>
-        <NListItem
-          v-for="item in videoTables"
-          :key="item.id"
-        >
-          <VideoCollectInfoCard
-            :item="item"
-            can-click
-            style="width: 500px; max-width: 70vw"
-            from="user"
-          />
-        </NListItem>
-      </NList>
-    </NFlex>
-  </NSpin>
+  <div>
+    <NSpin :show="isLoading">
+      <NFlex justify="center">
+        <NEmpty
+          v-if="videoTables.length == 0"
+          description="没有正在进行的征集表"
+        />
+        <NList v-else>
+          <NListItem
+            v-for="item in videoTables"
+            :key="item.id"
+          >
+            <VideoCollectInfoCard
+              :item="item"
+              can-click
+              style="width: 500px; max-width: 70vw"
+              from="user"
+            />
+          </NListItem>
+        </NList>
+      </NFlex>
+    </NSpin>
+  </div>
 </template>

src/views/view/songListTemplate/TraditionalSongListTemplate.vue

@@ -472,10 +472,10 @@ export const Config = defineTemplateConfig([
           <!-- Social Links (Visible on Hover) -->
           <div class="social-links">
             <p class="social-links-title">
-              关于
+              关于我
             </p>
             <p class="social-links-subtitle">
-              {{ props.config?.longDescription }}
+              {{ props.config?.longDescription ?? '暂时没有填写介绍' }}
             </p>
             <div class="social-icons-bar">
               <!-- Add actual icons here -->
@@ -918,7 +918,7 @@ html.dark .filter-input::placeholder {
   top: 0; left: 0; right: 0; bottom: 0;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
-  background-color: rgba(0, 0, 0, 0.1); /* Optional overlay */
+  background-color: rgba(80, 80, 80, 0.1); /* Optional overlay */
   border-radius: inherit; /* Inherit rounding */
   z-index: 1; /* Below content */
   pointer-events: none;