electron仿百度網盤-UI搭建思路

前言

https://juejin.im/editor/posts/5c167c2ff265da6167203868

例項展示

程式碼庫

求贊鴨： https://github.com/sparkxxxxxx/electron-vue-pan

UI架構

• MainPage
  • PanHeader
  • PanContent
    • SideBar
    • VBigIconList / v-table // 用於兩種檔案列表不同顯示

浮動框實現

先看例項

實現思路就是建立一個新的BrowserWindow就可以了。
/src/main/index.ts，在主程式程式碼中進行建立相應大小的BrowserWindow

省略部分程式碼

floatingWindows = new BrowserWindow({
    width: 140, // 懸浮視窗的寬度 比實際DIV的寬度要多2px 因為有1px的邊框
    height: 30, // 懸浮視窗的高度 比實際DIV的高度要多2px 因為有1px的邊框
    type: 'toolbar',    // 建立的視窗型別為工具欄視窗
    frame: false,   // 要建立無邊框視窗
    // resizable: false, // 禁止視窗大小縮放
    show: false,    // 先不讓視窗顯示
    webPreferences: {
        devTools: false // 關閉除錯工具
    },
    transparent: true,  // 設定透明
    alwaysOnTop: true,  // 視窗是否總是顯示在其他視窗之前
});

floatingWindows.once('ready-to-show', () => {
    floatingWindows.show()
});
floatingWindows.on('close', () => {
    floatingWindows = null;
})
複製程式碼

大圖示檔案列表

/src/renderer/components/v-bigIconList/v-bigIconList.vue，是一個VUE元件。

<template>
    <div>
        <dd v-for="rowDatas in bigIconDatas">
            <template v-for="file in rowDatas" >
                <div class="container" v-bind:class="file.isChecked ? 'container-checked ' : ''" @click="onClick(file)">
                    <div class="img-container" v-bind:class="getClass(file)"><img src=""></img></div>
                    <div><i>{{file.name}}</i></div>
                </div>
            </template>
        </dd>
    </div>
</template>

<script>

export default {
    name: 'v-bigIconList',
    data() {
        return {
            currentCheckedFile: null,
            contextMenuData: {
                menuName: 'demo',
                axis: {
                    x: null,
                    y: null
                }
            }
        };
    },
    props: {
        bigIconDatas: Array
    },
    methods: {
        getClass(file) {
            if (file.isDir) {
                return 'dir-img';
            }
            if (file.type === 'ZIP') {
                return 'zip-img';
            }
            return '';
        },
        checkedClass(file) {
            return file.isChecked ? 'container-checked ' : '';
        },
        onClick(file) {
            if (this.currentCheckedFile && this.currentCheckedFile.isChecked) {
                this.currentCheckedFile.isChecked = false;
            }
            const innerFile = file;
            innerFile.isChecked = !innerFile.isChecked;
            this.currentCheckedFile = file;
        }
    },
    created() {
        this.bigIconDatas.forEach(x => {
            x.forEach(item => {
                const that = item;
                that.isChecked = false;
            });
        });
    }
};
</script>
複製程式碼

程式碼並不複雜，但是實際上網盤非壓縮包，目錄這種預設圖示外，還有使用者自己上傳大圖片，視訊檔案，這樣大檔案顯示時就會是預覽圖，預覽圖地址通常是後端返回，此時我們需要對style做個處理，或者加一個img標籤，動態繫結src屬性。

v-router使用

左側導航欄和切換大圖示檔案列表和普通列表都是通過router-link來實現路由切換。 詳見src/renderer/router/index.ts配置檔案

routes: [
    {
      path: '/home',
      name: 'landing-page',
      redirect: '/home/all/table',
      component: require('@/components/LandingPage').default,
      children: [
          {
              path: 'all/table',
              name: 'all',
              component: require('@/components/v-bigIconList/v-bigIconList').default
          },
          {
              path: 'all/bar',
              name: 'all',
              component: require('@/basic/v-table/v-table').default
          },
          {
              path: 'uploading',
              name: 'uploading',
              component: require('@/components/uploading/uploading').default
          },
          {
              path: 'downloading',
              name: 'downloading',
              component: require('@/components/downloading/downloading').default
          },
          {
              path: 'downloaded',
              name: 'downloaded',
              component: require('@/components/downloaded/downloaded').default
          }
      ]
    },  
    {
      path: '/floating/window',
      name: 'floating-window',
      component: require('@/components/floatingWindow/floatingWindow').default
    },
    {
      path: '/downloaddemo',
      name: 'downloaddemo',
      component: downloadDemo
    }
  ]
複製程式碼

路由基本和頁面對應，唯有全部檔案時會有兩種檔案展示列表型別，分別對應兩個不同對元件。

總結

MAC版比windows版UI還是相對簡單一點，仿MAC版也是成本比較低的方式。因為有vue類的框架，我們用electron寫UI也是非常快速的。