v3.8.0

g122622 · Aug 23, 2024 · 36daf09 · 36daf09
1 parent 9de3965
commit 36daf09
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 84 deletions.
diff --git a/src/assets/whatsNew.ts b/src/assets/whatsNew.ts
@@ -89,6 +89,8 @@ export default {
     "3.8.0": [
         "文件管理器性能优化（文件类型使用哈希表匹配）",
         "文件管理器文件名tooltip展示细节优化",
-        "文件管理器更好地支持亮色主题"
+        "文件管理器更好地支持亮色主题",
+        "关于页面支持多栏显示",
+        "底下三个图标按钮样式正常化"
     ]
 };
diff --git a/src/components/FileMgr/FileItem.vue b/src/components/FileMgr/FileItem.vue
@@ -62,7 +62,6 @@ import DirSingleItem from "@/api/core/types/DirSingleItem";
 import getFileType from "@/utils/file/getFileType";
 import { computed, ref, onMounted, onUnmounted } from "vue";
 import { useMainStore } from "@/store/main"
-import { useSettingsStore } from "@/store/settings"
 import prettyBytes from "@/utils/prettyBytes";
 import AdapterBase from "@/api/core/types/AdapterBase";
 import { ViewOptions } from "./types/ViewOptions";
@@ -80,7 +79,6 @@ interface Props {
 const props = defineProps<Props>()
 const emit = defineEmits(['selected', 'unselected'])
 const mainStore = useMainStore()
-const settingsStore = useSettingsStore()
 // 由于看图模式下排版存在不稳定性，故不启用虚拟列表
 const isIntersecting = ref<boolean>(props.viewOptions.itemDisplayMode === 2)
 
@@ -95,8 +93,6 @@ const isHidden = computed(() => {
 
 const fileItemClassList = computed(() => {
     return {
-        'file-item-dark': settingsStore.getSetting('is_dark'),
-        'file-item-light': !settingsStore.getSetting('is_dark'),
         'file-item-list': props.viewOptions.itemDisplayMode === 0,
         'file-item-item': props.viewOptions.itemDisplayMode === 1,
         'file-item-photo': props.viewOptions.itemDisplayMode === 2,
@@ -218,23 +214,27 @@ onUnmounted(() => {
     position: relative !important; // 为了contextmenu的右键点击激发区域能够顺利溢出隐藏
 }
 
-.file-item-dark {
-    color: white;
-    background-color: rgba(131, 131, 131, @item-background-alpha);
-}
+.v-theme--LightTheme {
+    .file-item {
+        color: black;
+        background-color: rgba(255, 255, 255, @item-background-alpha);
+        box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
+    }
 
-.file-item-light {
-    color: black;
-    background-color: rgba(255, 255, 255, @item-background-alpha);
-    box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
+    .file-item:hover {
+        background-color: rgba(230, 230, 230, 0.5);
+    }
 }
 
-.file-item-dark:hover {
-    background-color: rgba(131, 131, 131, 0.5);
-}
+.v-theme--DarkTheme {
+    .file-item {
+        color: white;
+        background-color: rgba(131, 131, 131, @item-background-alpha);
+    }
 
-.file-item-light:hover {
-    background-color: rgba(230, 230, 230, 0.5);
+    .file-item:hover {
+        background-color: rgba(131, 131, 131, 0.5);
+    }
 }
 
 .file-item-list {

diff --git a/src/components/FileMgr/FileMgr.vue b/src/components/FileMgr/FileMgr.vue
@@ -120,6 +120,18 @@
                                 v-if="options.useCtxMenu">
                             </ContextMenu>
                         </FileItem>
+                        <!-- 替代file-item，用于测试
+                        <div v-for="item in currentFileTableForRender" :key="item.key"
+                            @click="handleItemDoubleClick(item)" style="width: 100px;height: 100px;" v-ripple>
+                            <template v-if="item.type === `folder`">
+                                <img :src="`./assets/fileTypes/folder.png`" class="file-types-image" loading="lazy" />
+                            </template>
+                <template v-if="item.type === `file`">
+                                <img :src="`./assets/fileTypes/${getFileType(item.name)}.png`" class="file-types-image"
+                                    loading="lazy" />
+                            </template>
+                {{ item.name }}
+            </div> -->
                     </template>
                     <div v-else-if="currentFileTableForRender.length === 0 && !isLoading"
                         style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
@@ -150,7 +162,8 @@
                 <BottomBar :currentFileTableForRender="currentFileTableForRender" :selectedItems="selectedItems"
                     @selectAll="selectAll()" @unSelectAll="unSelectAll()" @reverseSelection="reverseSelection()">
                     <ClipBoard ref="ClipBoardRef" :adapter="adapter" :current-dir="currentDir"
-                        :selected-items="selectedItems"></ClipBoard>
+                        :selected-items="selectedItems">
+                    </ClipBoard>
                 </BottomBar>
             </v-main>
         </v-app>

diff --git a/src/components/FileStateManager.vue b/src/components/FileStateManager.vue
@@ -2,7 +2,7 @@
     <div class="text-center">
         <v-menu v-model="isMenuOpen" :close-on-content-click="false" location="end">
             <template v-slot:activator="{ props }">
-                <v-btn icon v-bind="props" size="small" style="margin-top:10px">
+                <v-btn icon v-bind="props" size="small" style="margin-top:10px" variant="flat">
                     <v-icon>
                         mdi-file
                     </v-icon>

diff --git a/src/components/PerformanceMonitor/PerformanceMonitor.vue b/src/components/PerformanceMonitor/PerformanceMonitor.vue
@@ -2,7 +2,7 @@
     <div class="text-center">
         <v-menu v-model="isMenuOpen" :close-on-content-click="false" location="end">
             <template v-slot:activator="{ props }">
-                <v-btn icon v-bind="props" size="small" style="margin-top:10px">
+                <v-btn icon v-bind="props" size="small" style="margin-top:10px" variant="flat">
                     <v-icon>
                         mdi-chart-bell-curve
                     </v-icon>

diff --git a/src/components/SideColumn.vue b/src/components/SideColumn.vue
@@ -101,9 +101,18 @@ hr {
 </style>
 
 <style>
-.v-navigation-drawer {
-    border: none;
-    /* box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12)); */
-    box-shadow: 0px 0px 7px 5px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.25));
+.v-theme--LightTheme {
+    .v-navigation-drawer {
+        border: none;
+        box-shadow: 0px 0px 2px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.15));
+    }
+}
+
+.v-theme--DarkTheme {
+    .v-navigation-drawer {
+        border: none;
+        /* box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12)); */
+        box-shadow: 0px 0px 7px 5px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.25));
+    }
 }
 </style>
diff --git a/src/components/SystemBar.vue b/src/components/SystemBar.vue
@@ -169,4 +169,10 @@ const itemList = computed(() => {
 .system-bar-item-danger:hover {
     background-color: rgba(255, 29, 29, 0.9);
 }
+
+.v-theme--LightTheme {
+    .v-system-bar {
+        background-color: #f7f7f7;
+    }
+}
 </style>
diff --git a/src/components/TaskMgr.vue b/src/components/TaskMgr.vue
@@ -2,7 +2,7 @@
     <div class="text-center">
         <v-menu v-model="isMenuOpen" :close-on-content-click="false" location="end">
             <template v-slot:activator="{ props }">
-                <v-btn icon v-bind="props" size="small" style="margin-top:10px">
+                <v-btn icon v-bind="props" size="small" style="margin-top:10px" variant="flat">
                     <v-icon>
                         mdi-function-variant
                     </v-icon>

diff --git a/src/components/shared/BottomTip.vue b/src/components/shared/BottomTip.vue
@@ -38,8 +38,10 @@ const queryData = async () => {
             words.value = hitokoto
             fromWhere.value = from
         } catch (e) {
-            words.value = "网络出错了，请稍后再试，或者永久关闭此功能"
-            fromWhere.value = "null"
+            if (words.value === "") {
+                words.value = "网络出错了，请稍后再试，或者永久关闭此功能"
+                fromWhere.value = "null"
+            }
             // warn(`从网络获取句子失败!只能显示之前的旧句子了 ${e.message}`)
         }
     }

diff --git a/src/styles/globalVuetifyOverrides.less b/src/styles/globalVuetifyOverrides.less
@@ -26,4 +26,17 @@
 
 .v-list-item__append {
     overflow: visible !important;
+}
+
+.v-theme--LightTheme {
+    .v-toolbar {
+        border: none;
+        box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.05)),
+            0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.04)),
+            0px 1px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.03)) !important;
+    }
+}
+
+.v-theme--DarkTheme {
+
 }
diff --git a/src/views/About/AboutView.vue b/src/views/About/AboutView.vue
@@ -5,10 +5,9 @@
             <IconBtn icon="mdi-gift" tooltip="捐赠作者" />
         </ActionToolBarBase>
     </Teleport>
-
     <v-col>
-        <v-alert border="start" color="blue-gray" density="compact" variant="elevated" class="about-msg"
-            style="font-size: 15px;">
+        <v-alert border="start" color="blue-gray" variant="elevated" class="about-msg"
+            style="font-size: 15px; margin-top: 20px;">
             <template #prepend>
                 <img src="./favicon.png" style="width: 150px;">
             </template>
@@ -32,60 +31,62 @@
             </div>
         </v-alert>
     </v-col>
-    <v-col>
-        <v-card class="rounded-lg">
-            <v-list lines="one">
-                <v-list-subheader>运行环境/版本</v-list-subheader>
-                <v-list-item v-ripple v-for="item in runtimeTableData" :key="item.key" :subtitle="item.key"
-                    :title="item.value">
-                    <template #prepend>
-                        <img :src="`./assets/about/${item.img}`" class="image" />
-                    </template>
-                    <template #append>
-                        <IconBtn icon="mdi-open-in-new" tooltip="item.link" :onClick="() => { }" />
-                    </template>
-                </v-list-item>
-            </v-list>
-        </v-card>
-    </v-col>
-    <v-col>
-        <v-card class="rounded-lg">
-            <v-list lines="one">
-                <v-list-subheader>依赖库</v-list-subheader>
-                <v-list-item v-ripple v-for="item in depLibsTableData" :key="item.key" :subtitle="item.key"
-                    :title="item.value">
-                    <template v-slot:prepend>
-                        <img :src="`./assets/about/${item.img}`" class="image" />
-                    </template>
-                </v-list-item>
-            </v-list>
-        </v-card>
-    </v-col>
-    <v-col>
-        <v-card class="rounded-lg">
-            <div class="bottom">
-                <v-list-subheader>构建信息</v-list-subheader>
-                构建日期：
-                {{ store.COMPILE_DATE }}
-                <br>
-                构建号：
-                {{ store.COMPILE_NUMBER }}
-                <br>
-                构建平台：
-                {{ store.COMPILE_PLATFORM }}
-                <br>
-                构建CPU信息：
-                {{ store.COMPILE_CPU }}
-                <br>
-                构建内存信息：
-                {{ store.COMPILE_MEM }}
-                <br>
-                构建环境：
-                {{ store.COMPILE_ENV }}
-            </div>
+    <div id="about-lists-container">
+        <v-col>
+            <v-card class="rounded-lg">
+                <v-list lines="one">
+                    <v-list-subheader>运行环境/版本</v-list-subheader>
+                    <v-list-item v-ripple v-for="item in runtimeTableData" :key="item.key" :subtitle="item.key"
+                        :title="item.value">
+                        <template #prepend>
+                            <img :src="`./assets/about/${item.img}`" class="image" />
+                        </template>
+                        <template #append>
+                            <IconBtn icon="mdi-open-in-new" tooltip="item.link" :onClick="() => { }" />
+                        </template>
+                    </v-list-item>
+                </v-list>
+            </v-card>
+        </v-col>
+        <v-col>
+            <v-card class="rounded-lg">
+                <v-list lines="one">
+                    <v-list-subheader>依赖库</v-list-subheader>
+                    <v-list-item v-ripple v-for="item in depLibsTableData" :key="item.key" :subtitle="item.key"
+                        :title="item.value">
+                        <template v-slot:prepend>
+                            <img :src="`./assets/about/${item.img}`" class="image" />
+                        </template>
+                    </v-list-item>
+                </v-list>
+            </v-card>
+        </v-col>
+        <v-col>
+            <v-card class="rounded-lg">
+                <div class="bottom">
+                    <v-list-subheader>构建信息</v-list-subheader>
+                    构建日期：
+                    {{ store.COMPILE_DATE }}
+                    <br>
+                    构建号：
+                    {{ store.COMPILE_NUMBER }}
+                    <br>
+                    构建平台：
+                    {{ store.COMPILE_PLATFORM }}
+                    <br>
+                    构建CPU信息：
+                    {{ store.COMPILE_CPU }}
+                    <br>
+                    构建内存信息：
+                    {{ store.COMPILE_MEM }}
+                    <br>
+                    构建环境：
+                    {{ store.COMPILE_ENV }}
+                </div>
 
-        </v-card>
-    </v-col>
+            </v-card>
+        </v-col>
+    </div>
     <BottomTip></BottomTip>
 </template>
 
@@ -129,6 +130,19 @@ const depLibsTableData = [
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
+#about-lists-container {
+    padding: 10px;
+    display: flex;
+    flex-wrap: wrap;
+
+    // 调节子元素的性质。这里是列表们
+    >div {
+        min-width: 400px;
+        flex-grow: 1;
+        padding: 5px;
+    }
+}
+
 .bottom {
     font-size: 15px;
     white-space: pre-wrap;