mirror of https://github.com/1Panel-dev/1Panel
style: 修改文件和应用商店样式 (#2184)
zhengkunwang
GitHub
parent
c588c34955
commit
38b462eece
|
|
@ -12,6 +12,7 @@ export namespace App {
|
||||||
source: string;
|
source: string;
|
||||||
type: string;
|
type: string;
|
||||||
status: string;
|
status: string;
|
||||||
|
limit: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface AppDTO extends App {
|
export interface AppDTO extends App {
|
||||||
|
|
|
||||||
|
|
@ -59,11 +59,11 @@
|
||||||
:xl="8"
|
:xl="8"
|
||||||
>
|
>
|
||||||
<div class="app-card">
|
<div class="app-card">
|
||||||
<el-card class="e-card">
|
<el-card class="e-card" @click.stop="openDetail(app.key)">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="5">
|
<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="5">
|
||||||
<div class="app-icon-container">
|
<div class="app-icon-container">
|
||||||
<div class="app-icon" @click="openDetail(app.key)">
|
<div class="app-icon">
|
||||||
<el-avatar
|
<el-avatar
|
||||||
shape="square"
|
shape="square"
|
||||||
:size="60"
|
:size="60"
|
||||||
|
|
@ -85,8 +85,10 @@
|
||||||
plain
|
plain
|
||||||
round
|
round
|
||||||
size="small"
|
size="small"
|
||||||
@click="openInstall(app)"
|
:disabled="
|
||||||
:disabled="app.status === 'TakeDown'"
|
(app.installed && app.limit == 1) || app.status === 'TakeDown'
|
||||||
|
"
|
||||||
|
@click.stop="openInstall(app)"
|
||||||
>
|
>
|
||||||
{{ $t('app.install') }}
|
{{ $t('app.install') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
@ -274,15 +276,15 @@ onMounted(() => {
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover .app-icon {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
.app-icon {
|
.app-icon {
|
||||||
transition: transform 0.1s;
|
transition: transform 0.1s;
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-icon:hover {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-content {
|
.app-content {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row>
|
<div class="flex items-center">
|
||||||
<el-col :span="2">
|
<div class="flex-shrink-0 flex items-center mr-4">
|
||||||
<div>
|
<el-button :icon="Back" @click="back" circle :disabled="paths.length == 0" />
|
||||||
<el-button :icon="Back" @click="back" circle :disabled="paths.length == 0" />
|
<el-button :icon="Refresh" circle @click="search" />
|
||||||
<el-button :icon="Refresh" circle @click="search" />
|
</div>
|
||||||
</div>
|
<div
|
||||||
</el-col>
|
v-show="!searchableStatus"
|
||||||
<el-col :span="22">
|
tabindex="0"
|
||||||
<div v-show="!searchableStatus" tabindex="0" @click="searchableStatus = true">
|
@click="searchableStatus = true"
|
||||||
<div class="path" ref="pathRef">
|
class="address-bar bg-white shadow-md rounded-md px-4 py-2 flex items-center flex-grow"
|
||||||
<span ref="breadCrumbRef">
|
>
|
||||||
<span class="root">
|
<div ref="pathRef" class="w-full">
|
||||||
<el-link @click.stop="jump('/')">
|
<span ref="breadCrumbRef" class="w-full flex items-center">
|
||||||
<el-icon :size="20"><HomeFilled /></el-icon>
|
<span class="root mr-2">
|
||||||
</el-link>
|
<el-link @click.stop="jump('/')">
|
||||||
</span>
|
<el-icon :size="20"><HomeFilled /></el-icon>
|
||||||
<span v-for="item in paths" :key="item.url" class="other">
|
</el-link>
|
||||||
<span class="split">></span>
|
|
||||||
<el-link @click.stop="jump(item.url)">{{ item.name }}</el-link>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
<span v-for="path in paths" :key="path.url" class="inline-flex items-center">
|
||||||
|
<span class="mr-2">></span>
|
||||||
|
<el-link class="path-segment cursor-pointer mr-2 pathname" @click.stop="jump(path.url)">
|
||||||
|
{{ path.name }}
|
||||||
|
</el-link>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<el-input
|
</div>
|
||||||
ref="searchableInputRef"
|
<el-input
|
||||||
v-show="searchableStatus"
|
ref="searchableInputRef"
|
||||||
v-model="searchablePath"
|
v-show="searchableStatus"
|
||||||
@blur="searchableInputBlur"
|
v-model="searchablePath"
|
||||||
@keyup.enter="
|
@blur="searchableInputBlur"
|
||||||
jump(searchablePath);
|
class="px-4 py-2 bg-white border rounded-md shadow-md"
|
||||||
searchableStatus = false;
|
@keyup.enter="
|
||||||
"
|
jump(searchablePath);
|
||||||
/>
|
searchableStatus = false;
|
||||||
</el-col>
|
"
|
||||||
</el-row>
|
/>
|
||||||
|
</div>
|
||||||
<LayoutContent :title="$t('file.file')" v-loading="loading">
|
<LayoutContent :title="$t('file.file')" v-loading="loading">
|
||||||
<template #toolbar>
|
<template #toolbar>
|
||||||
<el-dropdown @command="handleCreate">
|
<el-dropdown @command="handleCreate">
|
||||||
|
|
@ -338,7 +342,14 @@ const copyDir = (row: File.File) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePath = () => {
|
const handlePath = () => {
|
||||||
if (breadCrumbRef.value.offsetWidth > pathWidth.value) {
|
const breadcrumbElement = breadCrumbRef.value as any;
|
||||||
|
const pathNodes = breadcrumbElement.querySelectorAll('.pathname');
|
||||||
|
|
||||||
|
let totalpathWidth = 0;
|
||||||
|
pathNodes.forEach((node) => {
|
||||||
|
totalpathWidth += node.offsetWidth;
|
||||||
|
});
|
||||||
|
if (totalpathWidth > pathWidth.value) {
|
||||||
paths.value.splice(0, 1);
|
paths.value.splice(0, 1);
|
||||||
paths.value[0].name = '..';
|
paths.value[0].name = '..';
|
||||||
nextTick(function () {
|
nextTick(function () {
|
||||||
|
|
@ -628,8 +639,12 @@ onMounted(() => {
|
||||||
getPaths(req.path);
|
getPaths(req.path);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
pathWidth.value = pathRef.value.offsetWidth * 0.7;
|
pathWidth.value = pathRef.value.offsetWidth;
|
||||||
search();
|
search();
|
||||||
|
|
||||||
|
nextTick(function () {
|
||||||
|
handlePath();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue