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也是非常快速的。

转载于:https://juejin.im/post/5c7a2060f265da2db2794eb8