refactor: code optimization

This commit is contained in:
meilin.huang
2025-04-23 20:36:32 +08:00
parent 798ab7d18b
commit 2170509d92
33 changed files with 445 additions and 380 deletions

View File

@@ -56,11 +56,11 @@
"autoprefixer": "^10.4.21",
"code-inspector-plugin": "^0.20.9",
"dotenv": "^16.3.1",
"eslint": "^9.24.0",
"eslint": "^9.25.1",
"eslint-plugin-vue": "^10.0.0",
"postcss": "^8.5.3",
"prettier": "^3.5.3",
"sass": "^1.86.3",
"sass": "^1.87.0",
"tailwindcss": "^4.1.4",
"typescript": "^5.8.2",
"vite": "^6.3.2",

View File

@@ -1,6 +1,6 @@
<template>
<el-config-provider :size="getGlobalComponentSize" :locale="getGlobalI18n">
<div class="!h-full">
<div class="h-full">
<el-watermark
:zIndex="10000000"
:width="210"

View File

@@ -1,7 +1,7 @@
<template>
<el-container class="layout-container flex-center">
<Header />
<el-container class="layout-mian-height-50">
<el-container class="h-[calc(100vh-50px)]">
<Aside />
<div class="flex-center layout-backtop">
<TagsView v-if="themeConfig.isTagsview" />

View File

@@ -5,10 +5,8 @@
<Aside />
<el-container class="flex-center layout-backtop">
<Header v-if="isFixedHeader" />
<!-- <el-scrollbar> -->
<Header v-if="!isFixedHeader" />
<Main />
<!-- </el-scrollbar> -->
</el-container>
</div>
<el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>

View File

@@ -3,10 +3,8 @@
<Aside />
<el-container class="flex-center layout-backtop">
<Header v-if="isFixedHeader" />
<!-- <el-scrollbar view-class="!h-full" ref="layoutDefaultsScrollbarRef"> -->
<Header v-if="!isFixedHeader" />
<Main />
<!-- </el-scrollbar> -->
</el-container>
<el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
</el-container>

View File

@@ -34,13 +34,14 @@ body,
-webkit-tap-highlight-color: transparent;
background-color: var(--bg-main-color);
font-size: 14px;
overflow: hidden;
position: relative;
// overflow: hidden;
// position: relative;
}
/* 主布局样式
------------------------------- */
.layout-container {
display: flex;
width: 100%;
height: 100%;
@@ -102,10 +103,6 @@ body,
transition: width 0.3s ease;
}
.layout-mian-height-50 {
height: calc(100vh - 50px);
}
.layout-columns-warp {
flex: 1;
display: flex;
@@ -259,16 +256,6 @@ body,
opacity: 0;
}
/* 元素无法被选择 */
.none-select {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* custom card */
.card {

View File

@@ -7,13 +7,13 @@
</template>
<template #default="scope">
<el-button v-auth="'authcert:save'" @click="edit(scope.row, scope.$index)" type="primary" icon="edit" link></el-button>
<el-button class="ml-0.5" v-auth="'authcert:del'" type="danger" @click="deleteRow(scope.$index)" icon="delete" link></el-button>
<el-button class="!ml-0.5" v-auth="'authcert:del'" type="danger" @click="deleteRow(scope.$index)" icon="delete" link></el-button>
<el-button
:title="$t('ac.testConn')"
:loading="props.testConnBtnLoading && scope.$index == state.idx"
:disabled="props.testConnBtnLoading"
class="ml-0.5"
class="!ml-0.5"
type="success"
@click="testConn(scope.row, scope.$index)"
icon="Link"

View File

@@ -22,8 +22,8 @@
<span
:id="node.key"
@dblclick="treeNodeDblclick(data, node)"
class="node-container flex items-center w-full cursor-pointer none-select"
:class="data.type.nodeDblclickFunc ? 'none-select' : ''"
class="node-container flex items-center w-full cursor-pointer select-none"
:class="data.type.nodeDblclickFunc ? 'select-none' : ''"
>
<span v-if="data.type.value == TagTreeNode.TagPath">
<tag-info :tag-path="data.label" />

View File

@@ -324,7 +324,7 @@ const columns = [
TableColumn.new('fs', 'machine.fs').isSlot().setAddWidth(25),
TableColumn.new('remark', 'common.remark'),
TableColumn.new('code', 'common.code'),
TableColumn.new('action', 'common.operation').isSlot().setMinWidth(258).fixedRight().alignCenter(),
TableColumn.new('action', 'common.operation').isSlot().setMinWidth(258).fixedRight().alignCenter().noShowOverflowTooltip(),
];
// 该用户拥有的的操作列按钮权限使用v-if进行判断v-auth对el-dropdown-item无效

View File

@@ -1,17 +1,19 @@
<template>
<div class="tag-tree-list card">
<div class="tag-tree-list card h-full flex">
<Splitpanes class="default-theme">
<Pane size="30" min-size="25" max-size="35">
<div class="card !p-1 !mb-1 !mr-1">
<el-input v-model="filterTag" clearable :placeholder="$t('tag.nameFilterPlaceholder')" style="width: 200px; margin-right: 10px" />
<el-button
v-if="useUserInfo().userInfo.username == 'admin'"
v-auth="'tag:save'"
type="primary"
icon="plus"
@click="showSaveTagDialog(null)"
></el-button>
<div class="float-right">
<Pane size="30" min-size="25" max-size="35" class="flex flex-col flex-1">
<div class="card !p-1 !mb-1 !mr-1 flex justify-between">
<div class="mb-1">
<el-input v-model="filterTag" clearable :placeholder="$t('tag.nameFilterPlaceholder')" class="mr-2 !w-[200px]" />
<el-button
v-if="useUserInfo().userInfo.username == 'admin'"
v-auth="'tag:save'"
type="primary"
icon="plus"
@click="showSaveTagDialog(null)"
></el-button>
</div>
<div>
<el-tooltip placement="top">
<template #content>
{{ $t('tag.tagTips1') }}
@@ -19,11 +21,7 @@
{{ $t('tag.tagTips2') }} <br />
{{ $t('tag.tagTips3') }}
</template>
<span>
<el-icon>
<question-filled />
</el-icon>
</span>
<SvgIcon name="question-filled" />
</el-tooltip>
</div>
</div>
@@ -67,8 +65,8 @@
</Pane>
<Pane min-size="40" size="70">
<div class="ml-2">
<el-tabs @tab-change="tabChange" v-model="state.activeTabName" v-if="currentTag">
<div class="ml-2 h-full">
<el-tabs class="h-full" @tab-change="tabChange" v-model="state.activeTabName" v-if="currentTag">
<el-tab-pane :label="$t('common.detail')" :name="TagDetail">
<el-descriptions :column="2" border>
<el-descriptions-item :label="$t('common.type')">
@@ -91,6 +89,7 @@
</el-tab-pane>
<el-tab-pane
class="h-full"
:disabled="currentTag.type != TagResourceTypeEnum.Tag.value"
:label="`${$t('tag.machine')} (${resourceCount.machine || 0})`"
:name="MachineTag"
@@ -99,6 +98,7 @@
</el-tab-pane>
<el-tab-pane
class="h-full"
:disabled="currentTag.type != TagResourceTypeEnum.Tag.value"
:label="`${$t('tag.db')} (${resourceCount.db || 0})`"
:name="DbTag"
@@ -107,6 +107,7 @@
</el-tab-pane>
<el-tab-pane
class="h-full"
:disabled="currentTag.type != TagResourceTypeEnum.Tag.value"
:label="`Redis (${resourceCount.redis || 0})`"
:name="RedisTag"
@@ -115,6 +116,7 @@
</el-tab-pane>
<el-tab-pane
class="h-full"
:disabled="currentTag.type != TagResourceTypeEnum.Tag.value"
:label="`Mongo (${resourceCount.mongo || 0})`"
:name="MongoTag"
@@ -490,17 +492,10 @@ const removeDeafultExpandId = (id: any) => {
<style lang="scss">
.tag-tree-list {
.tag-tree-data {
height: calc(100vh - 202px);
.el-tree-node__content {
height: 40px;
line-height: 40px;
}
}
.el-tree {
display: inline-block;
min-width: 100%;
}
}
</style>

View File

@@ -1,24 +1,23 @@
<template>
<div class="card system-resouce-list">
<div class="card system-resource-list h-full flex">
<Splitpanes class="default-theme">
<Pane size="25" min-size="20" max-size="30">
<div class="card !p-1 mr-1">
<el-input v-model="filterResource" clearable :placeholder="$t('system.menu.filterPlaceholder')" style="width: 200px; margin-right: 10px" />
<el-button v-auth="perms.addResource" type="primary" icon="plus" @click="addResource(false)"></el-button>
<Pane size="30" min-size="25" max-size="35" class="flex flex-col flex-1">
<div class="card !p-1 mr-1 flex justify-between">
<div class="mb-1">
<el-input v-model="filterResource" clearable :placeholder="$t('system.menu.filterPlaceholder')" class="mr-2 !w-[200px]" />
<el-button v-auth="perms.addResource" type="primary" icon="plus" @click="addResource(false)"></el-button>
</div>
<div class="float-right">
<div>
<el-tooltip placement="top">
<template #content> {{ $t('system.menu.opTips') }} </template>
<span>
<SvgIcon name="question-filled" />
</span>
<SvgIcon name="question-filled" />
</el-tooltip>
</div>
</div>
<el-scrollbar class="tree-data">
<el-scrollbar>
<el-tree
ref="resourceTreeRef"
class="none-select"
:indent="24"
node-key="id"
:props="props"
@@ -62,7 +61,7 @@
</el-scrollbar>
</Pane>
<Pane min-size="40">
<Pane min-size="40" size="70">
<div class="ml-2">
<el-tabs v-model="state.activeTabName" @tab-click="onTabClick" v-if="currentResource">
<el-tab-pane :label="$t('common.detail')" :name="ResourceDetail">
@@ -437,29 +436,10 @@ const removeDeafultExpandId = (id: any) => {
};
</script>
<style lang="scss">
.system-resouce-list {
.system-resource-list {
.el-tree-node__content {
height: 40px;
line-height: 40px;
}
.tree-data {
height: calc(100vh - 202px);
}
.el-tree {
display: inline-block;
min-width: 100%;
}
}
.none-select {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>