-
-
-
+
{ $parent.openCtxMenu(e, item) }"
+ >
+
mdi-{{ item.icon.name }}
{{ item.name }}
@@ -22,9 +27,6 @@ export default {
onSelectable(row, index) {
if (!row.dirtype) return true;
},
- handleCommand(command) {
- command.action(command.row);
- },
onScrollEnd() {
this.$emit("scroll-end")
},
@@ -41,7 +43,7 @@ export default {
.explorer-item {
width: 80px;
- padding: 15px;
+ padding: 5px 10px;
text-align: center;
cursor: pointer;
}
diff --git a/src/components/FileExplorer/layout/mixin.js b/src/components/FileExplorer/layout/mixin.js
new file mode 100644
index 0000000..e7c9c02
--- /dev/null
+++ b/src/components/FileExplorer/layout/mixin.js
@@ -0,0 +1,17 @@
+const mixin = {
+ props: {
+ value: Array,
+ },
+ data() {
+ return {
+ data: [],
+ }
+ },
+ watch: {
+ value(nval, oval) {
+ this.data = nval;
+ },
+ },
+}
+
+export default mixin
\ No newline at end of file
diff --git a/src/components/FileExplorer/layout/table.vue b/src/components/FileExplorer/layout/table.vue
new file mode 100644
index 0000000..30f1691
--- /dev/null
+++ b/src/components/FileExplorer/layout/table.vue
@@ -0,0 +1,141 @@
+
+
+
+
+
+
+
+
+ {{ $t('fth.name') }}
+ {{ $t('fth.size') }}
+ {{ $t('fth.updated') }}
+
+
+
+ { $parent.openCtxMenu(e, item) }"
+ >
+
+
+
+
+ mdi-{{ item.icon.name }}
+
+
+ {{ item.name }}
+
+ {{ item.updated | moment }}
+
+
+ {{ item.size }}
+ {{ item.updated | moment }}
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/FileExplorer/libs/action.js b/src/components/FileExplorer/libs/action.js
new file mode 100644
index 0000000..f2eeab7
--- /dev/null
+++ b/src/components/FileExplorer/libs/action.js
@@ -0,0 +1,45 @@
+
+import { Toast, Loading } from "@/components"
+
+var actions = {}
+var vToast, vLoading
+
+export default {
+ register(action, actionFunc) {
+ if (!vToast) {
+ vToast = Toast()
+ vLoading = Loading()
+ vToast.success("test")
+ }
+
+ actions[action] = actionFunc
+ },
+
+ do(action, ...params) {
+ return new Promise((resolve, reject) => {
+ actions[action](...params).then((ret) => {
+ vToast.success(`${action}成功`)
+ resolve()
+ }).catch(() => {
+ vToast.error(`${action}失败`)
+ reject()
+ })
+ })
+ },
+ doBatch(action, ...matters) {
+ return new Promise((resolve, reject) => {
+ vLoading.show()
+ Promise.all(matters.map((obj) => {
+ return actions[action](obj.alias);
+ })).then((ret) => {
+ vLoading.hide()
+ vToast.success(`${action}成功`)
+ resolve()
+ }).catch(() => {
+ vLoading.hide()
+ vToast.error(`${action}失败`)
+ reject()
+ });
+ })
+ }
+}
\ No newline at end of file
diff --git a/src/components/FileExplorer/libs/icons.js b/src/components/FileExplorer/libs/icons.js
new file mode 100644
index 0000000..4387ea4
--- /dev/null
+++ b/src/components/FileExplorer/libs/icons.js
@@ -0,0 +1,46 @@
+export default function buildIcon(matter) {
+ if (matter.dirtype > 0) {
+ matter.icon = { name: 'folder', color: '#ffc402' }
+ return matter
+ }
+
+
+ let type = matter.type
+ let [t1, t2] = type.split('/')
+ console.log(type, '=>', t1, t2)
+
+ let t1Icons = {
+ audio: { name: 'book-music', color: 'rgb(55, 159, 211)' },
+ video: { name: 'file-video', color: 'rgb(128, 149, 255)' },
+ image: { name: 'file-image', color: 'rgb(18, 150, 219)' },
+ text: { name: 'file-document', color: 'rgb(13, 71, 161)' },
+ zip: { name: 'zip-box', color: 'rgb(244, 196, 70)' },
+ 'x-zip': { name: 'zip-box', color: 'rgb(244, 196, 70)' },
+ json: { name: 'code-json', color: '' },
+ xml: { name: 'xml', color: '' },
+ }
+
+ let t2Icons = {
+ pdf: { name: 'file-pdf-box', color: '' },
+ psd: { name: 'file-psd', color: '' },
+ rtf: { name: 'file-rtf', color: '' },
+ markdown: { name: 'language-markdown', color: '' },
+ xml: { name: 'xml', color: '' },
+ 'msword': { name: 'file-word', color: '' },
+ 'vnd.ms-excel': { name: 'file-excel', color: '' },
+ 'vnd.ms-powerpoint': { name: 'file-powerpoint', color: '' },
+ 'vnd.openxmlformats-officedocument.wordprocessingml.document': { name: 'file-word', color: '' },
+ 'vnd.openxmlformats-officedocument.spreadsheetml.sheet': { name: 'file-excel', color: '' },
+ 'vnd.openxmlformats-officedocument.presentationml.presentation': { name: 'file-powerpoint', color: '' },
+ }
+
+ if (Object.keys(t2Icons).includes(t2)) {
+ matter.icon = t2Icons[t2]
+ } else if (Object.keys(t1Icons).includes(t1)) {
+ matter.icon = t1Icons[t1]
+ } else {
+ matter.icon = { name: 'file', color: '#c9c9c9' }
+ }
+
+ return matter
+}
\ No newline at end of file
diff --git a/src/components/FileExplorer/libs/userop.js b/src/components/FileExplorer/libs/userop.js
new file mode 100644
index 0000000..39c8b8f
--- /dev/null
+++ b/src/components/FileExplorer/libs/userop.js
@@ -0,0 +1,68 @@
+import { transfer } from "@/helper";
+import action from "./action"
+
+import DialogConfirm from "../components/DialogConfirm";
+import DialogInputConfirm from "../components/DialogInputConfirm";
+import DialogMove from "../components/DialogMove";
+import DialogShare from "../components/DialogShare";
+import DialogUpload from "../components/DialogUpload";
+import DialogOutlink from "../components/DialogOutlink";
+
+
+export function registerAction(name, actionFunc) {
+ action.register(name, actionFunc)
+}
+
+export function openShare(obj) {
+ transfer(DialogShare)({ alias: obj.alias });
+}
+
+export function openOutline(obj) {
+ // transfer(DialogOutlink)({ items: this.selectedItems });
+
+ // this.linkLoader(obj).then((link) => {
+ // const h = this.$createElement;
+ // this.$msgbox({
+ // title: "获取外链",
+ // message: h("p", null, link),
+ // confirmButtonText: "确定",
+ // });
+ // });
+}
+
+export function openRename(matter) {
+ return new Promise((resolve, reject) => {
+ transfer(DialogInputConfirm)({ title: "重命名", description: "输入 xxx 的新名称:", value: matter.name }).then((newName) => {
+ action.do('rename', matter.alias, newName).then(resolve).catch(reject)
+ });
+ })
+}
+
+export function openRemove(...matters) {
+ return new Promise((resolve, reject) => {
+ transfer(DialogConfirm)({ title: "删除", description: "确认删除 xxx 吗", matters: matters }).then(() => {
+ action.doBatch("remove", ...matters).then(resolve).catch(reject)
+ });
+ })
+}
+
+export function openMove(...matters) {
+ return new Promise((resolve, reject) => {
+ transfer(DialogMove)({ title: "移动", matters: matters }).then(() => {
+ action.doBatch("move", ...matters).then(resolve).catch(reject)
+ });
+ })
+}
+
+ // this.$confirm(this.$t("tips.batch-delete"), this.$t("op.batch-delete"), {
+ // type: "warning",
+ // confirmButtonText: this.$t("op.confirm"),
+ // cancelButtonText: this.$t("op.cancel"),
+ // }).then(() => {
+ // const loading = this.$loading({
+ // lock: true,
+ // text: this.$t("tips.deleting"),
+ // spinner: "el-icon-loading",
+ // background: "rgba(0, 0, 0, 0.7)",
+ // });
+
diff --git a/src/components/FileViewer/Media.vue b/src/components/FileExplorer/viewer/Media.vue
similarity index 100%
rename from src/components/FileViewer/Media.vue
rename to src/components/FileExplorer/viewer/Media.vue
diff --git a/src/components/FileViewer/Picture.vue b/src/components/FileExplorer/viewer/Picture.vue
similarity index 100%
rename from src/components/FileViewer/Picture.vue
rename to src/components/FileExplorer/viewer/Picture.vue
diff --git a/src/components/FileExplorer/viewer/index.js b/src/components/FileExplorer/viewer/index.js
new file mode 100644
index 0000000..f828d85
--- /dev/null
+++ b/src/components/FileExplorer/viewer/index.js
@@ -0,0 +1,69 @@
+import MediaViewer from './Media'
+import PictureViewer from './Picture'
+import { transfer } from '@/helper'
+
+const streamTypeOpeners = {
+ "audio": openMediaPlayer,
+ "video": openMediaPlayer,
+ "image": openImageViewer,
+ "text": openEditor,
+}
+
+const extTypeOpeners = {
+ "pdf": openPDFViewer,
+ "json": openEditor,
+ "yaml": openEditor,
+ "x-yaml": openEditor,
+ "msword": openOfficeEditor,
+ "vnd.ms-excel": openOfficeEditor,
+ "vnd.ms-powerpoint": openOfficeEditor,
+ "vnd.openxmlformats-officedocument.wordprocessingml.document": openOfficeEditor,
+ "vnd.openxmlformats-officedocument.spreadsheetml.sheet": openOfficeEditor,
+ "vnd.openxmlformats-officedocument.presentationml.presentation": openOfficeEditor,
+}
+
+function openMediaPlayer(obj, link) {
+ transfer(MediaViewer)({ title: obj.name, url: link, type: obj.type })
+}
+function openImageViewer(obj, link) {
+ transfer(PictureViewer)({ title: obj.name, url: link })
+}
+function openPDFViewer(obj, link) {
+ window.open(`/viewer/pdf?link=${encodeURIComponent(link)}&title=${obj.name}`, '_blank')
+}
+function openEditor(obj, link) {
+ window.open(`/f/editor?alias=${obj.alias}`, '_blank')
+}
+function openOfficeEditor(obj, link) {
+ window.open("http://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(link));
+}
+
+class Preview {
+
+ linkLoader;
+
+ constructor(linkLoader) {
+ this.linkLoader = linkLoader
+ }
+
+ view(obj) {
+ let [t1, t2] = obj.type.split('/')
+ if (Object.keys(streamTypeOpeners).includes(t1)) {
+ this.linkLoader(obj).then(link => {
+ streamTypeOpeners[t1](obj, link)
+ })
+ return
+ }
+
+ if (Object.keys(extTypeOpeners).includes(t2)) {
+ this.linkLoader(obj).then(link => {
+ extTypeOpeners[t2](obj, link)
+ })
+ return
+ }
+
+ console.log(obj.name, t1, t2)
+ }
+}
+
+export default Preview
\ No newline at end of file
diff --git a/src/components/FileViewer/index.js b/src/components/FileViewer/index.js
deleted file mode 100644
index 82d3068..0000000
--- a/src/components/FileViewer/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import MediaViewer from './Media'
-import PictureViewer from './Picture'
-import { transfer } from '@/helper'
-
-class Preview {
- view(type, obj, link) {
- switch (type) {
- case "media":
- transfer(MediaViewer)({ title: obj.name, url: link, type: obj.type })
- break;
- case "image":
- transfer(PictureViewer)({ title: obj.name, url: link })
- break;
- case "pdf":
- window.open(`/viewer/pdf?link=${encodeURIComponent(link)}&title=${obj.name}`, '_blank')
- break;
- case "doc":
- window.open("http://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(link));
- break;
- case "text":
- window.open(`/f/editor?alias=${obj.alias}`, '_blank')
- break;
- default:
- console.log(type, obj, link)
- }
- }
-}
-
-export default Preview
\ No newline at end of file
diff --git a/src/components/Loading/index.vue b/src/components/Loading/index.vue
new file mode 100644
index 0000000..f0eee5a
--- /dev/null
+++ b/src/components/Loading/index.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Toast/index.vue b/src/components/Toast/index.vue
new file mode 100644
index 0000000..e85189b
--- /dev/null
+++ b/src/components/Toast/index.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+ {{ item.message }}
+
+
+ {{ item.message }}
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Topbar/index copy.vue b/src/components/Topbar/index copy.vue
new file mode 100644
index 0000000..6a95545
--- /dev/null
+++ b/src/components/Topbar/index copy.vue
@@ -0,0 +1,231 @@
+
+
+
+
+
+
+ {{ menu.title }}
+
+
+ 更多
+ {{ menu.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ profile.nickname }}
+
+
+
+
+
+
+
+ {{ $t("leftnav.storage") }}
+ {{ storage.percentage }}%
+
+
+ {{ storage.used }}/{{ storage.max }}
+
+
+
+ {{ $t("topbar.settings") }}
+ {{ $t("topbar.s-platform") }}
+ {{ $t("topbar.signout") }}
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Topbar/index.vue b/src/components/Topbar/index.vue
index 1aa9946..dc4a7c6 100644
--- a/src/components/Topbar/index.vue
+++ b/src/components/Topbar/index.vue
@@ -1,71 +1,42 @@
-
+
-
+
-
- {{ menu.title }}
+
+
-
- 更多
- {{ menu.title }}
-
-
+
{{ item.title }}
+
+
\ No newline at end of file
diff --git a/src/components/Uploader/index.vue b/src/components/Uploader/index.vue
index 64159f8..5409e66 100644
--- a/src/components/Uploader/index.vue
+++ b/src/components/Uploader/index.vue
@@ -1,128 +1,63 @@
-
-
-
{{ title }}
-
-
-
-
-
-
-
-
-
-
- {{ scope.row.name }}
-
-
- {{ fomatSize(scope.row.size) }}
- {{ fomatSize(scope.row.speed) }}/s
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 仅展示本次上传任务 -
-
+
+
+
\ No newline at end of file
diff --git a/src/components/Uploader/list.vue b/src/components/Uploader/list.vue
new file mode 100644
index 0000000..6d90289
--- /dev/null
+++ b/src/components/Uploader/list.vue
@@ -0,0 +1,131 @@
+
+
+
+
{{ title }}
+
+
+
+
+
+
+
+
+
+ {{ scope.row.name }}
+
+
+ {{ fomatSize(scope.row.size) }}
+ {{ fomatSize(scope.row.speed) }}/s
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- 仅展示本次上传任务 -
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..cdd995a
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,30 @@
+import Vue from "vue";
+import vuetify from '@/plugins/vuetify'
+import store from "./store"
+
+const mount = (component, options) => {
+ const _constructor = Vue.extend(component)
+ const propsData = Object.assign({}, options);
+ const instance = new _constructor({
+ store,
+ vuetify,
+ propsData,
+ mounted() {
+ this.$nextTick(function () {
+ document.getElementById("app").appendChild(this.$el)
+ })
+ },
+ destroyed() {
+ this.$el.parentNode.removeChild(this.$el)
+ },
+ });
+
+ return instance.$mount(document.createElement('div'));
+}
+
+
+import ComponentToast from "./Toast"
+import ComponentLoading from "./Loading"
+
+export const Toast = (options = {}) => mount(ComponentToast, options);
+export const Loading = (options = {}) => mount(ComponentLoading, options);
\ No newline at end of file
diff --git a/src/components/store.js b/src/components/store.js
new file mode 100644
index 0000000..7f92edf
--- /dev/null
+++ b/src/components/store.js
@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+ state: {
+ msgPool: []
+ },
+ mutations: {
+ message(state, step) {
+ state.msgPool.push(step)
+ //将消息添加到消息列表
+ setTimeout(() => {
+ state.msgPool.shift()
+ }, step.time);
+ //清除消息
+ }
+ },
+ actions: {
+ },
+ modules: {
+ }
+})
diff --git a/src/helper.js b/src/helper.js
index 4184434..674b63f 100644
--- a/src/helper.js
+++ b/src/helper.js
@@ -2,12 +2,13 @@ import Vue from 'vue'
import i18n from './i18n'
import store from './store'
import router from './router'
+import vuetify from './plugins/vuetify'
export const transfer = component => {
const _constructor = Vue.extend(component)
return function (propsData = {}) {
console.log(propsData)
- let instance = new _constructor({ i18n, store, router, propsData }).$mount(document.createElement('div'))
+ let instance = new _constructor({ i18n, store, vuetify, router, propsData }).$mount(document.createElement('div'))
return new Promise((resolve, reject) => {
instance.$once('completed', data => resolve(data))
diff --git a/src/libs/mixin/dialog.js b/src/libs/mixin/dialog.js
index e5e77f6..e335b61 100644
--- a/src/libs/mixin/dialog.js
+++ b/src/libs/mixin/dialog.js
@@ -23,12 +23,12 @@ const DialogMixin = {
close() {
this.visible = false;
},
- completed() {
- this.$emit('completed');
+ completed(data, ) {
+ this.$emit('completed', data);
},
- finish() {
+ finish(data) {
this.close();
- this.completed();
+ this.completed(data);
},
}
}
diff --git a/src/main.js b/src/main.js
index 26df322..01eeb99 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,10 +3,12 @@ import App from './App'
import i18n from './i18n'
import store from './store'
import router from './router'
+import vuetify from './plugins/vuetify'
import './plugins/axios'
import './plugins/moment'
import './plugins/element'
import './plugins/fileexplorer'
+import './plugins/ctxmenu'
import './plugins/clipboard'
import './plugins/photoswipe'
import './plugins/plyr'
@@ -19,5 +21,6 @@ new Vue({
i18n,
router,
store,
+ vuetify,
render: h => h(App)
}).$mount('#app')
diff --git a/src/plugins/ctxmenu.js b/src/plugins/ctxmenu.js
new file mode 100644
index 0000000..7aef2d8
--- /dev/null
+++ b/src/plugins/ctxmenu.js
@@ -0,0 +1,3 @@
+import Vue from 'vue'
+import Contextmenu from "vue-contextmenujs"
+Vue.use(Contextmenu);
\ No newline at end of file
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 0000000..1b7d29d
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib/framework';
+// import colors from 'vuetify/lib/util/colors'
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+ // theme: {
+ // dark: false,
+ // themes: {
+ // light: {
+ // primary: colors.red.darken1, // #E53935
+ // secondary: colors.red.lighten4, // #FFCDD2
+ // accent: colors.indigo.base, // #3F51B5
+ // },
+ // },
+ // },
+});
diff --git a/src/store.js b/src/store.js
index 5ddb991..94e5dc7 100644
--- a/src/store.js
+++ b/src/store.js
@@ -4,11 +4,29 @@ import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
+ // strict: true,
state: {
storages: [],
- cs: {}
+ cs: {},
+ files: [],
+ uploading: false,
+ uploadedCnt: 0,
+ uListActive: false,
},
mutations: {
+ updateFiles(state, files) {
+ state.files = files
+ },
+ uploadedCntIncr(state) {
+ state.uploadedCnt++
+ },
+ updateUploading(state, status) {
+ state.uploading = status
+ },
+ setuListActive(state, active) {
+ console.log(123123, active)
+ state.uListActive = active
+ },
storages(state, storages) {
state.storages = storages
},
diff --git a/src/template/index.ejs b/src/template/index.ejs
index fa08737..1bf7d91 100644
--- a/src/template/index.ejs
+++ b/src/template/index.ejs
@@ -8,6 +8,8 @@
+
+
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
diff --git a/src/views/home/disk/index.vue b/src/views/home/disk/index.vue
index ce38eee..8bfae42 100644
--- a/src/views/home/disk/index.vue
+++ b/src/views/home/disk/index.vue
@@ -18,29 +18,30 @@
-
- 上传
-
- 上传文件
- 上传文件夹
-
-
+
+
+ 上传
- 新建
+ 新建
+
新建文件
新建文件夹
- {{ $t("disk.download") }}
-
- {{ $t("disk.delete") }}
-
+ {{ $t("disk.download")
+ }}
+
+ {{ $t("disk.delete") }}
+
+ 移动到
-
+
@@ -49,26 +50,21 @@
-
-
-
-
+
@@ -122,4 +151,33 @@ export default {
outline: 0;
background-color: #eaeaea !important;
}
+
+.menu {
+ width: 200px;
+ height: 100%;
+ background-color: #f4f4f5;
+}
+
+@media (max-width: 480px) {
+ .menu {
+ width: 0 !important;
+ }
+
+ .menu-open {
+ position: fixed;
+ width: 200px !important;
+ z-index: 999;
+ }
+
+ .menu-bg-mask {
+ height: 100%;
+ position: absolute;
+ background: rgba(1, 1, 1, 0.4);
+ z-index: 998;
+ }
+
+ .mask-open {
+ width: 100%;
+ }
+}
diff --git a/src/views/home/share/home.vue b/src/views/home/share/home.vue
index d8a4d0a..02d00ea 100644
--- a/src/views/home/share/home.vue
+++ b/src/views/home/share/home.vue
@@ -55,7 +55,7 @@