优化多个组件的样式和功能：调整 FileBrowser 和 TransferHistoryView 的高度计算，更新 TorrentCard 和 TorrentItem 的 VChip 颜色，修改 FileList、FileNavigator 和 FileToolbar 中 axios 的类型定义，更新主题中的 secondary 颜色，添加动态按钮到 UserListView，移除冗余的用户添加卡片样式。

2026-05-12 02:21:06 +08:00 · 2025-04-21 20:01:39 +08:00
parent 06f6ab355e
commit 77ec8c7a81
10 changed files with 43 additions and 57 deletions
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -181,8 +181,8 @@ function fileListUpdated(items: FileItem[]) {
 // 外层DIV大小控制
 const scrollStyle = computed(() => {
  return appMode
-    ? 'height: calc(100vh - 10rem - env(safe-area-inset-bottom) - 7rem)'
-    : 'height: calc(100vh - 10rem - env(safe-area-inset-bottom)'
+    ? 'height: calc(100vh - 10.5rem - env(safe-area-inset-bottom) - 6.5rem)'
+    : 'height: calc(100vh - 10.5rem - env(safe-area-inset-bottom)'
 })

 // 文件列表大小限制
--- a/src/components/cards/TorrentCard.vue
+++ b/src/components/cards/TorrentCard.vue
@@ -252,7 +252,7 @@ onMounted(() => {

        <!-- 体积和详情按钮并排 -->
        <div class="d-flex align-center">
-          <VChip v-if="torrent?.size" color="secondary" size="x-small" variant="elevated" class="rounded-sm mr-2">
+          <VChip v-if="torrent?.size" color="primary" size="x-small" variant="elevated" class="rounded-sm mr-2">
            {{ formatFileSize(torrent.size) }}
          </VChip>
          <VBtn icon size="small" variant="text" color="primary" @click.stop="openTorrentDetail">
@@ -263,9 +263,9 @@ onMounted(() => {
    </VCard>

    <!-- 更多来源对话框 -->
-    <VDialog v-model="showMoreTorrents" max-width="380px" location="center">
+    <VDialog v-model="showMoreTorrents" max-width="25rem" location="center">
      <VCard>
-        <VCardTitle class="py-2 d-flex align-center">
+        <VCardTitle class="py-3 d-flex align-center">
          <span>其他来源</span>
          <VSpacer />
          <VBtn variant="text" size="small" icon="mdi-close" @click.stop="showMoreTorrents = false"></VBtn>
@@ -273,7 +273,7 @@ onMounted(() => {

        <VDivider />

-        <VCardText class="more-sources-content">
+        <VCardText class="more-sources-content pa-0">
          <VList lines="one" density="compact">
            <VListItem
              v-for="(item, index) in props.more"
@@ -333,7 +333,7 @@ onMounted(() => {
                  </span>
                  <span>
                    <VIcon
-                      @click.stop="openTorrentDetail(item)"
+                      @click.stop="openTorrentDetail"
                      size="small"
                      color="secondary"
                      icon="mdi-arrow-top-right"
--- a/src/components/cards/TorrentItem.vue
+++ b/src/components/cards/TorrentItem.vue
@@ -203,7 +203,7 @@ onMounted(() => {
          </div>

          <div class="d-flex align-center">
-            <VChip v-if="torrent?.size" color="secondary" size="x-small" variant="elevated" class="rounded-sm mr-2">
+            <VChip v-if="torrent?.size" color="primary" size="x-small" variant="elevated" class="rounded-sm mr-2">
              {{ formatFileSize(torrent.size) }}
            </VChip>

--- a/src/components/filebrowser/FileList.vue
+++ b/src/components/filebrowser/FileList.vue
@@ -20,7 +20,7 @@ const inProps = defineProps({
  storage: String,
  endpoints: Object as PropType<EndPoints>,
  axios: {
-    type: Function,
+    type: Object as PropType<any>,
    required: true,
  },
  refreshpending: Boolean,
@@ -562,7 +562,7 @@ onMounted(() => {
        variant="plain"
        placeholder="搜索 ..."
        prepend-inner-icon="mdi-filter-outline"
-        class="me-2"
+        class="mx-2"
        rounded
      />
      <VSpacer v-if="isFile" />
--- a/src/components/filebrowser/FileNavigator.vue
+++ b/src/components/filebrowser/FileNavigator.vue
@@ -23,7 +23,7 @@ const props = defineProps({
  },
  endpoints: Object,
  axios: {
-    type: Function,
+    type: Object as PropType<any>,
    required: true,
  },
 })
--- a/src/components/filebrowser/FileToolbar.vue
+++ b/src/components/filebrowser/FileToolbar.vue
@@ -20,7 +20,7 @@ const inProps = defineProps({
  },
  endpoints: Object as PropType<EndPoints>,
  axios: {
-    type: Function,
+    type: Object as PropType<any>,
    required: true,
  },
 })
--- a/src/plugins/vuetify/theme.ts
+++ b/src/plugins/vuetify/theme.ts
@@ -159,7 +159,7 @@ const theme: VuetifyOptions['theme'] = {
      dark: true,
      colors: {
        'primary': '#A370F7',
-        'secondary': '#B794FF',
+        'secondary': '#8A8D93',
        'on-secondary': '#FFFFFF',
        'success': '#66BB6A',
        'info': '#42A5F5',
--- a/src/views/reorganize/TransferHistoryView.vue
+++ b/src/views/reorganize/TransferHistoryView.vue
@@ -189,8 +189,8 @@ const TransferDict: { [key: string]: string } = {

 const tableStyle = computed(() => {
  return appMode
-    ? 'height: calc(100vh - 14rem - env(safe-area-inset-bottom) - 7.5rem)'
-    : 'height: calc(100vh - 14rem - env(safe-area-inset-bottom)'
+    ? 'height: calc(100vh - 15rem - env(safe-area-inset-bottom) - 6.5rem)'
+    : 'height: calc(100vh - 15rem - env(safe-area-inset-bottom)'
 })

 // 分页提示
--- a/src/views/site/SiteCardListView.vue
+++ b/src/views/site/SiteCardListView.vue
@@ -88,7 +88,7 @@ onActivated(() => {

 // 使用动态按钮钩子
 useDynamicButton({
-  icon: 'mdi-plus',
+  icon: 'mdi-web-plus',
  onClick: () => {
    siteAddDialog.value = true
  },
@@ -123,7 +123,7 @@ useDynamicButton({
  <!-- 新增站点按钮 -->
  <VFab
    v-if="isRefreshed && !appMode"
-    icon="mdi-plus"
+    icon="mdi-web-plus"
    location="bottom"
    size="x-large"
    fixed
--- a/src/views/user/UserListView.vue
+++ b/src/views/user/UserListView.vue
@@ -4,6 +4,11 @@ import type { User } from '@/api/types'
 import NoDataFound from '@/components/NoDataFound.vue'
 import UserCard from '@/components/cards/UserCard.vue'
 import UserAddEditDialog from '@/components/dialog/UserAddEditDialog.vue'
+import { useDisplay } from 'vuetify'
+import { useDynamicButton } from '@/composables/useDynamicButton'
+// APP
+const display = useDisplay()
+const appMode = inject('pwaMode') && display.mdAndDown.value

 // 是否刷新过
 const isRefreshed = ref(false)
@@ -51,6 +56,14 @@ onActivated(() => {
    loadAllUsers()
  }
 })
+
+// 使用动态按钮钩子
+useDynamicButton({
+  icon: 'mdi-account-plus',
+  onClick: () => {
+    openAddUserDialog()
+  },
+})
 </script>

 <template>
@@ -70,14 +83,6 @@ onActivated(() => {
        @remove="loadAllUsers"
        @save="loadAllUsers"
      />
-
-      <!-- 添加用户卡片 -->
-      <VCard class="add-user-card" @click="openAddUserDialog">
-        <div class="add-user-content">
-          <VIcon icon="mdi-account-plus" size="large" color="primary" />
-          <span class="add-user-text">添加用户</span>
-        </div>
-      </VCard>
    </div>

    <!-- 无数据提示 -->
@@ -85,6 +90,19 @@ onActivated(() => {
      <NoDataFound error-code="404" error-title="没有用户" error-description="点击添加用户卡片添加用户" />
    </div>

+    <!-- 新增用户按钮 -->
+    <VFab
+      v-if="isRefreshed && !appMode"
+      icon="mdi-account-plus"
+      location="bottom"
+      size="x-large"
+      fixed
+      app
+      appear
+      @click="openAddUserDialog"
+      :class="{ 'mb-12': appMode }"
+    />
+
    <!-- 用户添加弹窗 -->
    <UserAddEditDialog
      v-if="addUserDialog"
@@ -97,35 +115,3 @@ onActivated(() => {
    />
  </div>
 </template>
-
-<style scoped>
-.add-user-card {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1.5px dashed rgba(var(--v-theme-primary), 0.4);
-  background-color: rgba(var(--v-theme-surface), 1);
-  block-size: 100%;
-  cursor: pointer;
-  min-block-size: 160px;
-  transition: all 0.3s ease;
-}
-
-.add-user-card:hover {
-  background-color: rgba(var(--v-theme-primary), 0.05);
-  transform: translateY(-4px);
-}
-
-.add-user-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.add-user-text {
-  color: rgba(var(--v-theme-primary), 0.8);
-  font-size: 1.05rem;
-  font-weight: 500;
-}
-</style>