Files
Mujinniao-Anonima/picx/src/components/folder-card/folder-card.vue
2022-11-21 17:02:50 +08:00

117 lines
3.4 KiB
Vue

<template>
<div class="folder-card" @dblclick="dblclickFolder">
<el-tooltip
v-if="mode === 'dir'"
effect="dark"
content="双击进入下一级目录"
placement="top"
>
<div class="icon">
<svg
t="1639999626518"
class="icon"
viewBox="0 0 1228 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3575"
width="200"
height="200"
>
<path
d="M1196.987733 212.5824v540.0576c0 39.594667-34.474667 71.3728-76.765866 71.3728H323.242667c-51.780267 0-88.746667-46.762667-73.250134-92.808533l126.737067-375.808H70.417067C31.675733 355.362133 0 326.4512 0 291.089067V98.372267C0 63.044267 31.675733 34.0992 70.417067 34.0992h378.811733c26.7264 0 51.029333 13.9264 63.010133 35.703467l39.048534 71.406933H1120.256c42.257067 0 76.8 32.119467 76.8 71.3728"
fill="#5398DF"
p-id="3576"
></path>
<path
d="M1128.721067 997.853867H68.266667a68.266667 68.266667 0 0 1-68.266667-68.266667V280.3712a68.266667 68.266667 0 0 1 68.266667-68.266667h1060.4544a68.266667 68.266667 0 0 1 68.266666 68.266667V929.5872a68.266667 68.266667 0 0 1-68.266666 68.266667"
fill="#85BCFF"
p-id="3577"
></path>
</svg>
</div>
</el-tooltip>
<div class="icon" v-if="mode === 'back'">
<svg
t="1640264285200"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="29312"
width="200"
height="200"
>
<path
d="M426.666667 384V213.333333l-298.666667 298.666667 298.666667 298.666667v-174.933334c213.333333 0 362.666667 68.266667 469.333333 217.6-42.666667-213.333333-170.666667-426.666667-469.333333-469.333333z"
p-id="29313"
fill="#85BCFF"
></path>
</svg>
</div>
<div class="text" v-if="mode === 'dir'">{{ folderObj.dir }}</div>
<div class="text" v-if="mode === 'back'">双击返回</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { useStore } from '@/store'
const store = useStore()
const userConfigInfo = computed(() => store.getters.getUserConfigInfo).value
// eslint-disable-next-line no-undef
const props = defineProps({
folderObj: {
type: Object,
default: () => {}
},
mode: {
type: String,
default: 'dir'
}
})
const emits = defineEmits(['update:modelValue'])
const dblclickFolder = () => {
const { folderObj, mode } = props
if (mode === 'back') {
const currentDir = userConfigInfo.selectedDir
if (currentDir === '/') {
return
}
const currentDirList = currentDir.split('/')
if (currentDirList.length === 1) {
userConfigInfo.selectedDir = '/'
} else if (currentDirList.length > 1) {
currentDirList.length -= 1
userConfigInfo.selectedDir = currentDirList.join('/')
}
} else {
userConfigInfo.selectedDir = folderObj.dirPath
}
const { selectedDir } = userConfigInfo
if (selectedDir === '/') {
userConfigInfo.selectedDirList = []
userConfigInfo.dirMode = 'rootDir'
} else {
userConfigInfo.selectedDirList = selectedDir.split('/')
userConfigInfo.dirMode = 'reposDir'
}
store.dispatch('USER_CONFIG_INFO_NOT_PERSIST')
}
</script>
<style scoped lang="stylus">
@import 'folder-card.styl';
</style>