fix: 🐛 样式布局调整

xiaohuohumax · Oct 3, 2024 · c325db9 · c325db9
1 parent b0879fe
commit c325db9
Show file tree

Hide file tree

Showing 20 changed files with 153 additions and 153 deletions.
diff --git a/app/web/CHANGELOG.md b/app/web/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @xiaohuohumax/miaoji-web
 
+## 1.4.1
+
+### Minor Changes
+
+- 样式布局调整
+
 ## 1.4.0
 
 ### Minor Changes

diff --git a/app/web/package.json b/app/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@xiaohuohumax/miaoji-web",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "private": true,
   "description": "MiaoJi web client",
   "author": {

diff --git a/app/web/src/App.vue b/app/web/src/App.vue
@@ -47,12 +47,13 @@ const themeOverrides: GlobalThemeOverrides = {
   },
   Card: {
     color: 'transparent',
+    borderColor: 'transparent',
   },
 }
 </script>
 
 <template>
-  <CPointBackground class="-z-50 fixed left-0 top-0 hidden sm:block opacity-60" />
+  <CPointBackground class="-z-20 fixed left-0 top-0 hidden sm:block opacity-60" />
   <NLoadingBarProvider>
     <NConfigProvider
       :theme-overrides="themeOverrides" :theme="appStore.theme.naiveTheme" :locale="tm('naiveUi.locale')"

diff --git a/app/web/src/components/CSubTitle.vue b/app/web/src/components/CSubTitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2 class="text-lg mb-2 dark:text-green-300 text-orange-500">
+  <h2 class="text-lg dark:text-green-300 text-orange-500">
     <slot />
   </h2>
 </template>
diff --git a/app/web/src/style/index.css b/app/web/src/style/index.css
@@ -9,7 +9,7 @@
 
 html.dark:root{
   --text-color: rgb(134 239 172);
-  --bg-color: #101010;
+  --bg-color: #18181c;
 }
 
 /* tailwindcss 与 naive-ui 基础样式冲突 */
@@ -64,24 +64,19 @@ menu {
   list-style: initial !important;
 }
 
-.n-card {
-  background-color: var(--bg-color);
-}
-
 @keyframes card {
   0% {
     opacity: 0;
-    transform: translateY(1em);
   }
 
   100% {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
 .n-card {
-  animation: card .6s ease-in;
+  animation: card .3s ease-in;
+  background-color: var(--bg-color);
 }
 
 .n-icon {
@@ -90,4 +85,4 @@ menu {
 
 .n-loading-bar-container .n-loading-bar:not(.n-loading-bar--error){
   background-color: var(--text-color) !important;
- }
+}
diff --git a/app/web/src/views/VAbout.vue b/app/web/src/views/VAbout.vue
@@ -29,18 +29,18 @@ async function queryDataFunc(): Promise<Issue> {
 
 <template>
   <NSpace :vertical="true">
-    <NCard :bordered="false">
-      <NSpace :vertical="true">
-        <CSubTitle>
-          {{ t('page.about.title') }}
-        </CSubTitle>
-        <CLoadData v-model:data="issue" :query-data-func="queryDataFunc">
-          <template #success="{ data }">
-            <CMarkdown :id="data.number" :content="data.body" />
-            <CReactions :reaction="data.reactions" :issue-url="data.html_url" />
-          </template>
-        </CLoadData>
-      </NSpace>
+    <NCard size="small">
+      <CSubTitle>
+        {{ t('page.about.title') }}
+      </CSubTitle>
+    </NCard>
+    <NCard size="small">
+      <CLoadData v-model:data="issue" :query-data-func="queryDataFunc">
+        <template #success="{ data }">
+          <CMarkdown :id="data.number" :content="data.body" />
+          <CReactions :reaction="data.reactions" :issue-url="data.html_url" />
+        </template>
+      </CLoadData>
     </NCard>
   </NSpace>
 </template>
diff --git a/app/web/src/views/VAlbum.vue b/app/web/src/views/VAlbum.vue
@@ -1,8 +1,6 @@
 <script setup lang='ts'>
-import type { Album } from './components/CAlbumCard.vue'
 import type { QueryFuncRes } from './components/CLoadPages.vue'
 import CSubTitle from '@/CSubTitle.vue'
-import { markdown, steam } from '@xiaohuohumax/miaoji-util'
 import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
 import type { Issue } from '~/api/module/issue'
 import issueApi from '~/api/module/issue'
@@ -23,39 +21,24 @@ async function queryPagesFunc(page: number, perPage: number): Promise<QueryFuncR
     hasNext: data.length === perPage,
   }
 }
-
-function issueToAlbum(issues: Issue[]): Album[] {
-  return issues.map((issue) => {
-    if (!issue.body) {
-      return null
-    }
-    const images = markdown.parseImages(issue.body)
-    if (images.length === 0) {
-      return null
-    }
-    return {
-      images,
-      issue,
-    }
-  }).filter(steam.filterNullFunc)
-}
 </script>
 
 <template>
-  <NCard :bordered="false">
-    <NSpace :vertical="true">
+  <NSpace :vertical="true">
+    <NCard size="small">
       <CSubTitle>
         {{ t('page.album.title') }}
       </CSubTitle>
-      <CLoadPages :query-pages-func="queryPagesFunc">
-        <template #default="{ datas }">
-          <NGrid cols="1 s:2 m:3 l:3 xl:4" responsive="screen" :x-gap="12" :y-gap="12">
-            <NGridItem v-for="album in issueToAlbum(datas)" :key="album.issue.number">
-              <CPhotoCard v-bind="album" />
-            </NGridItem>
-          </NGrid>
-        </template>
-      </CLoadPages>
-    </NSpace>
-  </NCard>
+    </NCard>
+    <CLoadPages :query-pages-func="queryPagesFunc">
+      <template #default="{ datas }">
+        <NGrid cols="1 s:2 m:3 l:3 xl:4" responsive="screen" :x-gap="12" :y-gap="12">
+          <NGridItem v-for="issue in datas" :key="issue.number">
+            <CPhotoCard :issue="issue" />
+            <div class="mt-4" />
+          </NGridItem>
+        </NGrid>
+      </template>
+    </CLoadPages>
+  </NSpace>
 </template>
diff --git a/app/web/src/views/VAlbumDetails.vue b/app/web/src/views/VAlbumDetails.vue
@@ -41,7 +41,7 @@ async function queryDataFunc(): Promise<IssueImage> {
 
 <template>
   <NSpace :vertical="true">
-    <NCard :bordered="false">
+    <NCard>
       <CLoadData v-model:data="issueImage" :query-data-func="queryDataFunc">
         <template #success="{ data: { issue, images } }">
           <NSpace :vertical="true">

diff --git a/app/web/src/views/VArticle.vue b/app/web/src/views/VArticle.vue
@@ -32,7 +32,7 @@ async function queryDataFunc(): Promise<Issue> {
 
 <template>
   <NSpace :vertical="true">
-    <NCard :bordered="false">
+    <NCard size="small">
       <CLoadData v-model:data="issue" :query-data-func="queryDataFunc">
         <template #success="{ data }">
           <NSpace :vertical="true">

diff --git a/app/web/src/views/VHistory.vue b/app/web/src/views/VHistory.vue
@@ -34,11 +34,13 @@ function getHistoryColor(issue: Issue) {
 </script>
 
 <template>
-  <NCard :bordered="false">
-    <NSpace :vertical="true">
+  <NSpace :vertical="true">
+    <NCard size="small">
       <CSubTitle>
         {{ t('page.history.title') }}
       </CSubTitle>
+    </NCard>
+    <NCard size="small">
       <CLoadPages :query-pages-func="queryPagesFunc">
         <template #default="{ datas }">
           <NTimeline>
@@ -59,6 +61,6 @@ function getHistoryColor(issue: Issue) {
           </NTimeline>
         </template>
       </CLoadPages>
-    </NSpace>
-  </NCard>
+    </NCard>
+  </NSpace>
 </template>
diff --git a/app/web/src/views/VLink.vue b/app/web/src/views/VLink.vue
@@ -1,9 +1,7 @@
 <script setup lang='ts'>
-import type { Link } from './components/CLinkCard.vue'
 import type { QueryFuncRes } from './components/CLoadPages.vue'
 import CLink from '@/CLink.vue'
 import CSubTitle from '@/CSubTitle.vue'
-import { markdown, steam } from '@xiaohuohumax/miaoji-util'
 import { NButton, NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
 import { computed } from 'vue'
 import type { Issue } from '~/api/module/issue'
@@ -26,56 +24,38 @@ async function queryPagesFunc(page: number, perPage: number): Promise<QueryFuncR
   }
 }
 
-function issueToLink(issues: Issue[]): Link[] {
-  return issues.map((issue) => {
-    if (!issue.body) {
-      return null
-    }
-    const links = markdown.parseLinks(issue.body)
-    if (links.length === 0) {
-      return null
-    }
-    return {
-      title: links[0].content,
-      href: links[0].href,
-      issue,
-    }
-  }).filter(steam.filterNullFunc)
-}
-
 const applyHref = computed(() => {
-  return [
+  return encodeURI([
     appConfig.repository,
     '/issues/new?title=',
-    encodeURIComponent(t('page.link.applyTitle')),
+    t('page.link.applyTitle'),
     '&body=',
-    encodeURIComponent(t('page.link.applyContent')),
-  ].join('')
+    t('page.link.applyContent'),
+  ].join(''))
 })
 </script>
 
 <template>
   <NSpace :vertical="true">
-    <NCard :bordered="false">
-      <NSpace :vertical="true">
-        <CSubTitle>
-          {{ t('page.link.title') }}
-        </CSubTitle>
-        <CLoadPages :query-pages-func="queryPagesFunc">
-          <template #default="{ datas }">
-            <NGrid cols="1 s:2 m:3 l:4 xl:5 2xl:6" responsive="screen" :x-gap="12" :y-gap="12">
-              <NGridItem v-for="link in issueToLink(datas)" :key="link.issue.number">
-                <CLinkCard v-bind="link" />
-              </NGridItem>
-            </NGrid>
-          </template>
-        </CLoadPages>
-        <CLink :href="applyHref" target="_blank">
-          <NButton class="w-full" secondary type="info">
-            {{ t('page.link.toApply') }}
-          </NButton>
-        </CLink>
-      </NSpace>
+    <NCard size="small">
+      <CSubTitle>
+        {{ t('page.link.title') }}
+      </CSubTitle>
     </NCard>
+    <CLoadPages :query-pages-func="queryPagesFunc">
+      <template #default="{ datas }">
+        <NGrid cols="1 s:2 m:3 l:3 xl:4" responsive="screen" :x-gap="12" :y-gap="12">
+          <NGridItem v-for="issue in datas" :key="issue.number">
+            <CLinkCard :issue="issue" />
+          </NGridItem>
+        </NGrid>
+        <div class="mt-4" />
+      </template>
+    </CLoadPages>
+    <CLink :href="applyHref" target="_blank">
+      <NButton class="w-full" secondary type="info">
+        {{ t('page.link.toApply') }}
+      </NButton>
+    </CLink>
   </NSpace>
 </template>
diff --git a/app/web/src/views/VMessage.vue b/app/web/src/views/VMessage.vue
@@ -30,19 +30,21 @@ async function queryDataFunc(): Promise<Issue> {
 
 <template>
   <NSpace :vertical="true">
-    <NCard :bordered="false">
-      <NSpace :vertical="true">
+    <NSpace :vertical="true">
+      <NCard size="small">
         <CSubTitle>
           {{ t('page.message.title') }}
         </CSubTitle>
+      </NCard>
+      <NCard size="small">
         <CLoadData v-model:data="issue" :query-data-func="queryDataFunc">
           <template #success="{ data }">
             <CMarkdown :id="data.number" :content="data.body" />
             <CReactions :reaction="data.reactions" :issue-url="data.html_url" />
           </template>
         </CLoadData>
-      </NSpace>
-    </NCard>
+      </NCard>
+    </NSpace>
     <CComment :issue="issue" />
   </NSpace>
 </template>
diff --git a/app/web/src/views/VTag.vue b/app/web/src/views/VTag.vue
@@ -10,13 +10,15 @@ const appStore = useAppStore()
 </script>
 
 <template>
-  <NCard :bordered="false">
-    <NSpace :vertical="true">
+  <NSpace :vertical="true">
+    <NCard size="small">
       <CSubTitle>
         {{ t('page.tag.title') }}
       </CSubTitle>
+    </NCard>
+    <NCard size="small">
       <CLabels v-if="appStore.labels.length > 0" :labels="appStore.labels" :show-icon="false" />
       <NEmpty v-else />
-    </NSpace>
-  </NCard>
+    </NCard>
+  </NSpace>
 </template>