mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2024-09-20 15:45:57 +08:00
feat: 文件列表样式修改
This commit is contained in:
wangdan
wangdan-fit2cloud
parent
9dc8fb4976
commit
2e12b4ca51
|
|
@ -1,20 +1,44 @@
|
|||
<template>
|
||||
<el-popover placement="right" :width="400" trigger="click" :title="$t('file.list')">
|
||||
<el-popover placement="right" :width="400" trigger="click" :title="$t('file.list')" :visible="popoverVisible">
|
||||
<template #reference>
|
||||
<el-button :icon="Folder"></el-button>
|
||||
<el-button :icon="Folder" @click="popoverVisible = true"></el-button>
|
||||
</template>
|
||||
<div>
|
||||
<BreadCrumbs>
|
||||
<BreadCrumbItem @click="jump(-1)" :right="paths.length == 0">/</BreadCrumbItem>
|
||||
<BreadCrumbItem
|
||||
v-for="(item, key) in paths"
|
||||
:key="key"
|
||||
@click="jump(key)"
|
||||
:right="key == paths.length - 1"
|
||||
>
|
||||
<!-- <span class="sle">{{ item }}</span> -->
|
||||
{{ item }}
|
||||
<BreadCrumbItem @click="jump(-1)" :right="paths.length == 0">
|
||||
<el-icon><HomeFilled /></el-icon>
|
||||
</BreadCrumbItem>
|
||||
<template v-if="paths.length > 2">
|
||||
<BreadCrumbItem>
|
||||
<el-dropdown ref="dropdown1" trigger="click" @command="jump($event)">
|
||||
<span class="el-dropdown-link">...</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(item, key) in paths.slice(0, -1)"
|
||||
:key="key"
|
||||
:command="key"
|
||||
>
|
||||
{{ item }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</BreadCrumbItem>
|
||||
<BreadCrumbItem @click="jump(paths.length - 1)" :right="true">
|
||||
<span class="sle" style="max-width: 200px">{{ paths[paths.length - 1] }}</span>
|
||||
</BreadCrumbItem>
|
||||
</template>
|
||||
<template v-else>
|
||||
<BreadCrumbItem
|
||||
v-for="(item, key) in paths"
|
||||
:key="key"
|
||||
@click="jump(key)"
|
||||
:right="key == paths.length - 1"
|
||||
>
|
||||
<span class="sle" style="max-width: 200px">{{ item }}</span>
|
||||
</BreadCrumbItem>
|
||||
</template>
|
||||
</BreadCrumbs>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -50,6 +74,8 @@ let loading = ref(false);
|
|||
let paths = ref<string[]>([]);
|
||||
let req = reactive({ path: '/', expand: true, page: 1, pageSize: 300 });
|
||||
|
||||
const popoverVisible = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
path: {
|
||||
type: String,
|
||||
|
|
@ -66,6 +92,7 @@ const em = defineEmits(['choose']);
|
|||
const checkFile = (row: any) => {
|
||||
rowName.value = row.name;
|
||||
em('choose', row.path);
|
||||
popoverVisible.value = false;
|
||||
};
|
||||
|
||||
const open = async (row: File.File) => {
|
||||
|
|
@ -91,6 +118,7 @@ const jump = async (index: number) => {
|
|||
}
|
||||
req.path = path;
|
||||
search(req);
|
||||
popoverVisible.value = true;
|
||||
};
|
||||
|
||||
const search = async (req: File.ReqFile) => {
|
||||
|
|
|
|||
|
|
@ -1,164 +1,160 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="isFirst">
|
||||
<div class="login-container">
|
||||
<div class="login-form">
|
||||
<el-form ref="registerFormRef" :model="registerForm" size="default" :rules="registerRules">
|
||||
<div class="login-title">{{ $t('commons.button.init') }}</div>
|
||||
<div class="login-form">
|
||||
<input type="text" class="hide" id="name" />
|
||||
<input type="password" class="hide" id="password" />
|
||||
<el-form-item prop="name" class="no-border">
|
||||
<el-input
|
||||
v-model="registerForm.name"
|
||||
:placeholder="$t('commons.login.username')"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<user />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="no-border">
|
||||
<el-input
|
||||
type="password"
|
||||
clearable
|
||||
v-model="registerForm.password"
|
||||
show-password
|
||||
:placeholder="$t('commons.login.password')"
|
||||
name="passwod"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="rePassword" class="no-border">
|
||||
<el-input
|
||||
type="password"
|
||||
clearable
|
||||
v-model="registerForm.rePassword"
|
||||
show-password
|
||||
:placeholder="$t('commons.login.rePassword')"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@focus="registerButtonFocused = true"
|
||||
@blur="registerButtonFocused = false"
|
||||
@click="register(registerFormRef)"
|
||||
class="login-button"
|
||||
type="primary"
|
||||
size="default"
|
||||
round
|
||||
>
|
||||
{{ $t('commons.button.init') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<input type="text" class="hide" id="name" />
|
||||
<input type="password" class="hide" id="password" />
|
||||
<el-form-item prop="name" class="no-border">
|
||||
<el-input
|
||||
v-model="registerForm.name"
|
||||
:placeholder="$t('commons.login.username')"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<user />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="no-border">
|
||||
<el-input
|
||||
type="password"
|
||||
clearable
|
||||
v-model="registerForm.password"
|
||||
show-password
|
||||
:placeholder="$t('commons.login.password')"
|
||||
name="passwod"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="rePassword" class="no-border">
|
||||
<el-input
|
||||
type="password"
|
||||
clearable
|
||||
v-model="registerForm.rePassword"
|
||||
show-password
|
||||
:placeholder="$t('commons.login.rePassword')"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@focus="registerButtonFocused = true"
|
||||
@blur="registerButtonFocused = false"
|
||||
@click="register(registerFormRef)"
|
||||
class="login-button"
|
||||
type="primary"
|
||||
size="default"
|
||||
round
|
||||
>
|
||||
{{ $t('commons.button.init') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="mfaShow">
|
||||
<div class="login-form">
|
||||
<el-form>
|
||||
<div class="login-title">{{ $t('commons.login.mfaTitle') }}</div>
|
||||
<el-form-item class="no-border">
|
||||
<el-input
|
||||
size="default"
|
||||
:placeholder="$t('commons.login.captchaHelper')"
|
||||
v-model="mfaLoginForm.code"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<Finished />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="login-button" type="primary" size="default" round @click="mfaLogin()">
|
||||
{{ $t('commons.button.verify') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="mfaShow">
|
||||
<div class="login-form">
|
||||
<el-form>
|
||||
<div class="login-title">{{ $t('commons.login.mfaTitle') }}</div>
|
||||
<el-form-item class="no-border">
|
||||
<el-input
|
||||
size="default"
|
||||
:placeholder="$t('commons.login.captchaHelper')"
|
||||
v-model="mfaLoginForm.code"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<Finished />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="login-button" type="primary" size="default" round @click="mfaLogin()">
|
||||
{{ $t('commons.button.verify') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!mfaShow">
|
||||
<div class="login-form">
|
||||
<el-form ref="loginFormRef" :model="loginForm" size="default" :rules="loginRules">
|
||||
<div class="login-title">{{ $t('commons.button.login') }}</div>
|
||||
<div class="login-form">
|
||||
<el-form ref="loginFormRef" :model="loginForm" size="default" :rules="loginRules">
|
||||
<div class="login-title">{{ $t('commons.button.login') }}</div>
|
||||
|
||||
<el-form-item prop="name" class="no-border">
|
||||
<el-input
|
||||
v-model="loginForm.name"
|
||||
:placeholder="$t('commons.login.username')"
|
||||
class="form-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<user />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="no-border">
|
||||
<el-input
|
||||
type="password"
|
||||
clearable
|
||||
v-model="loginForm.password"
|
||||
show-password
|
||||
:placeholder="$t('commons.login.password')"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<span v-if="errAuthInfo" class="input-error" style="line-height: 14px">
|
||||
{{ $t('commons.login.errorAuthInfo') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item prop="captcha" class="login-captcha">
|
||||
<el-input v-model="loginForm.captcha" :placeholder="$t('commons.login.captchaHelper')" />
|
||||
<img
|
||||
v-if="captcha.imagePath"
|
||||
:src="captcha.imagePath"
|
||||
:alt="$t('commons.login.captchaHelper')"
|
||||
@click="loginVerify()"
|
||||
/>
|
||||
<span v-if="errCaptcha" class="input-error" style="line-height: 14px">
|
||||
{{ $t('commons.login.errorCaptcha') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="login(loginFormRef)"
|
||||
@focus="loginButtonFocused = true"
|
||||
@blur="loginButtonFocused = false"
|
||||
class="login-button"
|
||||
type="primary"
|
||||
size="default"
|
||||
round
|
||||
>
|
||||
{{ $t('commons.button.login') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-form-item prop="name" class="no-border">
|
||||
<el-input
|
||||
v-model="loginForm.name"
|
||||
:placeholder="$t('commons.login.username')"
|
||||
class="form-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<user />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="no-border">
|
||||
<el-input
|
||||
type="password"
|
||||
clearable
|
||||
v-model="loginForm.password"
|
||||
show-password
|
||||
:placeholder="$t('commons.login.password')"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<span v-if="errAuthInfo" class="input-error" style="line-height: 14px">
|
||||
{{ $t('commons.login.errorAuthInfo') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item prop="captcha" class="login-captcha">
|
||||
<el-input v-model="loginForm.captcha" :placeholder="$t('commons.login.captchaHelper')" />
|
||||
<img
|
||||
v-if="captcha.imagePath"
|
||||
:src="captcha.imagePath"
|
||||
:alt="$t('commons.login.captchaHelper')"
|
||||
@click="loginVerify()"
|
||||
/>
|
||||
<span v-if="errCaptcha" class="input-error" style="line-height: 14px">
|
||||
{{ $t('commons.login.errorCaptcha') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="login(loginFormRef)"
|
||||
@focus="loginButtonFocused = true"
|
||||
@blur="loginButtonFocused = false"
|
||||
class="login-button"
|
||||
type="primary"
|
||||
size="default"
|
||||
round
|
||||
>
|
||||
{{ $t('commons.button.login') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -342,6 +338,7 @@ onMounted(() => {
|
|||
width: 0;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
|||
open: viteEnv.VITE_OPEN,
|
||||
proxy: {
|
||||
'/api/v1': {
|
||||
target: 'http://127.0.0.1:9999/',
|
||||
target: 'http://172.16.10.181:9999/',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue