ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目微调

Browse Source
This commit is contained in:
hongawen
2024-10-11 08:49:31 +08:00
parent 507ea137e4
commit 0cb14955c5
9 changed files with 292 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@@ -15,8 +15,6 @@
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"@vueuse/core": "^10.4.1", "@vueuse/core": "^10.4.1",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^1.7.3", "axios": "^1.7.3",
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"dayjs": "^1.11.9", "dayjs": "^1.11.9",

60
frontend/src/App.vue
View File

@@ -1,54 +1,54 @@
<template> <template>
<!--element-plus语言国际化，全局修改为中文--> <!--element-plus语言国际化，全局修改为中文-->
<el-config-provider <el-config-provider
:locale="locale" :locale='locale'
:size="assemblySize" :size='assemblySize'
:button="buttonConfig" :button='buttonConfig'
> >
<router-view :key="$route.fullPath" /> <router-view :key='$route.fullPath' />
</el-config-provider> </el-config-provider>
</template> </template>
<script lang="ts" setup> <script lang='ts' setup>
defineOptions({ defineOptions({
name: "App", name: 'App',
}); })
import { useI18n } from "vue-i18n"; import { useI18n } from 'vue-i18n'
import { getBrowserLang } from "@/utils"; import { getBrowserLang } from '@/utils'
import { useTheme } from "@/hooks/useTheme"; import { useTheme } from '@/hooks/useTheme'
import { ElConfigProvider } from "element-plus"; import { ElConfigProvider } from 'element-plus'
import { LanguageType } from "./stores/interface"; import { LanguageType } from './stores/interface'
import { useGlobalStore } from "@/stores/modules/global"; import { useGlobalStore } from '@/stores/modules/global'
import en from "element-plus/es/locale/lang/en"; import en from 'element-plus/es/locale/lang/en'
import zhCn from "element-plus/es/locale/lang/zh-cn"; import zhCn from 'element-plus/es/locale/lang/zh-cn'
const globalStore = useGlobalStore(); const globalStore = useGlobalStore()
// init theme // init theme
const { initTheme } = useTheme(); const { initTheme } = useTheme()
initTheme(); initTheme()
// init language // init language
const i18n = useI18n(); const i18n = useI18n()
onMounted(() => { onMounted(() => {
const language = globalStore.language ?? getBrowserLang(); const language = globalStore.language ?? getBrowserLang()
i18n.locale.value = language; i18n.locale.value = language
globalStore.setGlobalState("language", language as LanguageType); globalStore.setGlobalState('language', language as LanguageType)
}); })
// element language // element language
const locale = computed(() => { const locale = computed(() => {
if (globalStore.language == "zh") return zhCn; if (globalStore.language == 'zh') return zhCn
if (globalStore.language == "en") return en; if (globalStore.language == 'en') return en
return getBrowserLang() == "zh" ? zhCn : en; return getBrowserLang() == 'zh' ? zhCn : en
}); })
// element assemblySize // element assemblySize
const assemblySize = computed(() => globalStore.assemblySize); const assemblySize = computed(() => globalStore.assemblySize)
// element button config // element button config
const buttonConfig = reactive({ autoInsertSpace: false }); const buttonConfig = reactive({ autoInsertSpace: false })
document.getElementById("loadingPage")?.remove(); document.getElementById('loadingPage')?.remove()
</script> </script>
<style scoped></style> <style scoped></style>

39
frontend/src/components/SelectIcon/index.scss Normal file
View File

@@ -0,0 +1,39 @@
.icon-box {
width: 100%;
.el-button {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--el-text-color-regular);
}
:deep(.el-dialog__body) {
padding: 25px 20px 20px;
.el-input {
margin-bottom: 10px;
}
.icon-list {
display: grid;
grid-template-columns: repeat(auto-fill, 115px);
justify-content: space-evenly;
max-height: 70vh;
.icon-item {
display: flex;
flex-direction: column;
align-items: center;
width: 42px;
padding: 20px 30px;
cursor: pointer;
transition: all 0.2s;
&:hover {
transform: scale(1.3);
}
span {
margin-top: 5px;
line-height: 20px;
text-align: center;
}
}
}
}
}

89
frontend/src/components/SelectIcon/index.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<div class='icon-box'>
<el-input
ref='inputRef'
v-model='valueIcon'
v-bind='$attrs'
:placeholder='placeholder'
:clearable='clearable'
@clear='clearIcon'
@click='openDialog'
>
<template #append>
<el-button :icon='customIcons[iconValue]' />
</template>
</el-input>
<el-dialog v-model='dialogVisible' :title='placeholder' top='50px' width='66%'>
<el-input v-model='inputValue' placeholder='搜索图标' size='large' :prefix-icon='Icons.Search' />
<el-scrollbar v-if='Object.keys(iconsList).length'>
<div class='icon-list'>
<div v-for='item in iconsList' :key='item' class='icon-item' @click='selectIcon(item)'>
<component :is='item'></component>
<span>{{ item.name }}</span>
</div>
</div>
</el-scrollbar>
<el-empty v-else description='未搜索到您要找的图标~' />
</el-dialog>
</div>
</template>
<script lang='ts' setup name='SelectIcon'>
import * as Icons from '@element-plus/icons-vue'
interface SelectIconProps {
iconValue: string;
title?: string;
clearable?: boolean;
placeholder?: string;
}
const props = withDefaults(defineProps<SelectIconProps>(), {
iconValue: '',
title: '请选择图标',
clearable: true,
placeholder: '请选择图标',
})
// 重新接收一下，防止打包后 clearable 报错
const valueIcon = ref(props.iconValue)
// open Dialog
const dialogVisible = ref(false)
const openDialog = () => (dialogVisible.value = true)
// 选择图标(触发更新父组件数据)
const emit = defineEmits<{
'update:iconValue': [value: string];
}>()
const selectIcon = (item: any) => {
dialogVisible.value = false
valueIcon.value = item.name
emit('update:iconValue', item.name)
setTimeout(() => inputRef.value.blur(), 0)
}
// 清空图标
const inputRef = ref()
const clearIcon = () => {
valueIcon.value = ''
emit('update:iconValue', '')
setTimeout(() => inputRef.value.blur(), 0)
}
// 监听搜索框值
const inputValue = ref('')
const customIcons: { [key: string]: any } = Icons
const iconsList = computed((): { [key: string]: any } => {
if (!inputValue.value) return Icons
let result: { [key: string]: any } = {}
for (const key in customIcons) {
if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) result[key] = customIcons[key]
}
return result
})
</script>
<style scoped lang='scss'>
@import "./index.scss";
</style>

6
frontend/src/main.ts
View File

@@ -25,7 +25,7 @@ import * as Icons from "@element-plus/icons-vue";
// custom directives // custom directives
import directives from "@/directives/index"; import directives from "@/directives/index";
// vue Router // vue Router
import Router from "@/routers"; import router from "@/routers";
// vue i18n // vue i18n
import I18n from "@/languages/index"; import I18n from "@/languages/index";
// pinia store // pinia store
@@ -48,13 +48,13 @@ const setupAll = async () => {
app app
.use(ElementPlus) .use(ElementPlus)
.use(directives) .use(directives)
.use(Router) // 使用路由 .use(router) // 使用路由
.use(I18n) .use(I18n)
.use(pinia) .use(pinia)
.use(registerGlobComp) // 使用全局自定义组件 .use(registerGlobComp) // 使用全局自定义组件
//待路由初始化完毕后，挂载app //待路由初始化完毕后，挂载app
await Router.isReady() await router.isReady()
} }
//挂载app //挂载app

79
frontend/src/routers/index.ts
View File

@@ -1,17 +1,17 @@
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"; import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import { useUserStore } from "@/stores/modules/user"; import { useUserStore } from '@/stores/modules/user'
import { useAuthStore } from "@/stores/modules/auth"; import { useAuthStore } from '@/stores/modules/auth'
import { LOGIN_URL, ROUTER_WHITE_LIST } from "@/config"; import { LOGIN_URL, ROUTER_WHITE_LIST } from '@/config'
import { initDynamicRouter } from "@/routers/modules/dynamicRouter"; import { initDynamicRouter } from '@/routers/modules/dynamicRouter'
import { staticRouter, errorRouter } from "@/routers/modules/staticRouter"; import { staticRouter, errorRouter } from '@/routers/modules/staticRouter'
import NProgress from "@/config/nprogress"; import NProgress from '@/config/nprogress'
const mode = import.meta.env.VITE_ROUTER_MODE; const mode = import.meta.env.VITE_ROUTER_MODE
const routerMode = { const routerMode = {
hash: () => createWebHashHistory(), hash: () => createWebHashHistory(),
history: () => createWebHistory() history: () => createWebHistory(),
}; }
/** /**
* @description 📚 路由参数配置简介 * @description 📚 路由参数配置简介
@@ -31,77 +31,76 @@ const routerMode = {
* */ * */
const router = createRouter({ const router = createRouter({
history: routerMode[mode](), history: routerMode[mode](),
routes: [...staticRouter, ...errorRouter], routes: [...staticRouter],
// 不区分路由大小写，非严格模式下提供了更宽松的路径匹配 // 不区分路由大小写，非严格模式下提供了更宽松的路径匹配
strict: false, strict: false,
// 页面刷新时，滚动条位置还原 // 页面刷新时，滚动条位置还原
scrollBehavior: () => ({ left: 0, top: 0 }) scrollBehavior: () => ({ left: 0, top: 0 }),
}); })
/** /**
* @description 路由拦截 beforeEach * @description 路由拦截 beforeEach
* */ * */
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
const userStore = useUserStore(); const userStore = useUserStore()
const authStore = useAuthStore(); const authStore = useAuthStore()
// 1.NProgress 开始 // 1.NProgress 开始
NProgress.start(); NProgress.start()
// 2.动态设置标题 // 2.动态设置标题
const title = import.meta.env.VITE_GLOB_APP_TITLE; const title = import.meta.env.VITE_GLOB_APP_TITLE
document.title = to.meta.title ? `${to.meta.title} - ${title}` : title; document.title = to.meta.title ? `${to.meta.title} - ${title}` : title
// 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由到登陆页 // 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由到登陆页
if (to.path.toLocaleLowerCase() === LOGIN_URL) { if (to.path.toLocaleLowerCase() === LOGIN_URL) {
if (userStore.token) return next(from.fullPath); if (userStore.token) return next(from.fullPath)
resetRouter(); resetRouter()
return next(); return next()
} }
// 4.判断访问页面是否在路由白名单地址(静态路由)中，如果存在直接放行 // 4.判断访问页面是否在路由白名单地址(静态路由)中，如果存在直接放行
if (ROUTER_WHITE_LIST.includes(to.path)) return next(); if (ROUTER_WHITE_LIST.includes(to.path)) return next()
// 5.判断是否有 Token，没有重定向到 login 页面 // 5.判断是否有 Token，没有重定向到 login 页面
if (!userStore.token) return next({ path: LOGIN_URL, replace: true }); if (!userStore.token) return next({ path: LOGIN_URL, replace: true })
// 6.如果没有菜单列表，就重新请求菜单列表并添加动态路由 // 6.如果没有菜单列表，就重新请求菜单列表并添加动态路由
if (!authStore.authMenuListGet.length) { if (!authStore.authMenuListGet.length) {
await initDynamicRouter(); await initDynamicRouter()
return next({ ...to, replace: true }); return next({ ...to, replace: true })
} }
// 7.存储 routerName 做按钮权限筛选 // 7.存储 routerName 做按钮权限筛选
authStore.setRouteName(to.name as string); authStore.setRouteName(to.name as string)
// 8.正常访问页面 // 8.正常访问页面
next(); next()
}); })
/** /**
* @description 重置路由 * @description 重置路由
* */ * */
export const resetRouter = () => { export const resetRouter = () => {
const authStore = useAuthStore(); const authStore = useAuthStore()
authStore.flatMenuListGet.forEach(route => { authStore.flatMenuListGet.forEach(route => {
const { name } = route; const { name } = route
if (name && router.hasRoute(name)) router.removeRoute(name); if (name && router.hasRoute(name)) router.removeRoute(name)
}); })
}; }
/** /**
* @description 路由跳转错误 * @description 路由跳转错误
* */ * */
router.onError(error => { router.onError(error => {
NProgress.done(); NProgress.done()
console.warn("路由错误", error.message); console.warn('路由错误', error.message)
}); })
/** /**
* @description 路由跳转结束 * @description 路由跳转结束
* */ * */
router.afterEach(() => { router.afterEach(() => {
NProgress.done(); NProgress.done()
}); })
export default router; export default router

18
frontend/src/routers/modules/staticRouter.ts
View File

@@ -41,21 +41,7 @@ export const staticRouter: RouteRecordRaw[] = [
isKeepAlive: false, isKeepAlive: false,
}, },
}, },
], // 错误页面路由
},
],
},
];
/**
* errorRouter (错误页面路由)
*/
export const errorRouter = [
{
path: "/layout",
name: "layout",
component: Layout,
children: [
{ {
path: "/403", path: "/403",
name: "403", name: "403",
@@ -87,4 +73,6 @@ export const errorRouter = [
}, },
], ],
}, },
],
},
]; ];

105
frontend/src/views/home/components/tree.vue
View File

@@ -1,26 +1,28 @@
<template> <template>
<div class="plan_tree"> <div class='plan_tree'>
<div class="search_view"> <div class='search_view'>
<el-input <el-input
placeholder="请输入计划名称" placeholder='请输入计划名称'
v-model="searchForm.planName" v-model='searchForm.planName'
></el-input> ></el-input>
<Menu style="width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)" @click.stop="detail({})" /> <Menu style='width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)'
@click.stop='detail()' />
</div> </div>
<div class="tree_container"> <div class='tree_container'>
<el-tree <el-tree
:data="data" :data='data'
ref="treeRef" ref='treeRef'
:filter-node-method="filterNode" :filter-node-method='filterNode'
:props="defaultProps" :props='defaultProps'
node-key="id" node-key='id'
default-expand-all default-expand-all
:default-checked-keys="defaultChecked" :default-checked-keys='defaultChecked'
@node-click="handleNodeClick" @node-click='handleNodeClick'
> >
<template #default="{ node, data }"> <template #default='{ node, data }'>
<span class="custom-tree-node" style="display: flex;align-items: center;"> <span class='custom-tree-node' style='display: flex;align-items: center;'>
<Platform v-if="!data.pid" style="width:18px;height: 18px;margin-right:8px;" :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}"/> <Platform v-if='!data.pid' style='width:18px;height: 18px;margin-right:8px;'
:style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" />
<span>{{ node.label }}</span> <span>{{ node.label }}</span>
<!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> --> <!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
</span> </span>
@@ -29,52 +31,54 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang='ts' setup>
import { Menu,Platform} from "@element-plus/icons-vue"; import { Menu, Platform } from '@element-plus/icons-vue'
const emit = defineEmits(["jump"]); import { useRouter } from 'vue-router'
const data: any = ref([]);
const router = useRouter()
const data: any = ref([])
const defaultProps = { const defaultProps = {
children: "children", children: 'children',
label: "name", label: 'name',
pid: "pid", pid: 'pid',
}; }
const searchForm = ref({ const searchForm = ref({
planName: "", planName: '',
}); })
const defaultChecked = ref([]); const defaultChecked = ref([])
const getTreeData = (val: any) => { const getTreeData = (val: any) => {
defaultChecked.value = []; defaultChecked.value = []
data.value = val; data.value = val
defaultChecked.value.push(data.value[0].children[0].id); defaultChecked.value.push(data.value[0].children[0].id)
}; }
const filterText = ref(""); const filterText = ref('')
const treeRef = ref(); const treeRef = ref()
watch( watch(
() => searchForm.value.planName, () => searchForm.value.planName,
(val) => { (val) => {
treeRef.value!.filter(val); treeRef.value!.filter(val)
}, },
{ {
deep: true, deep: true,
} },
); )
const handleNodeClick = (data) => { const handleNodeClick = (data) => {
console.log(data); console.log(data)
}; }
const filterNode = (value: string, data) => { const filterNode = (value: string, data) => {
if (!value) return true; if (!value) return true
return data.name.includes(value); return data.name.includes(value)
}; }
// 点击详情 // 点击详情
const detail = (e: any) => { const detail = () => {
emit("jump", e); router.push('/plan')
}; }
onMounted(() => { onMounted(() => {
console.log(); console.log()
}); })
defineExpose({ getTreeData }); defineExpose({ getTreeData })
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.plan_tree { .plan_tree {
// width: 200px; // width: 200px;
// height: 100%; // height: 100%;
@@ -83,6 +87,7 @@ defineExpose({ getTreeData });
padding: 5px; padding: 5px;
// height: calc(100% - 70px); // height: calc(100% - 70px);
background-color: #fff; background-color: #fff;
.search_view { .search_view {
width: 100%; width: 100%;
height: auto; height: auto;
@@ -91,10 +96,12 @@ defineExpose({ getTreeData });
padding: 0 5px; padding: 0 5px;
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
.el-input{
.el-input {
margin-top: 6px; margin-top: 6px;
} }
} }
.el-input { .el-input {
width: 100%; width: 100%;
margin: 0 10px 10px 0; margin: 0 10px 10px 0;

10
frontend/src/views/home/tabs/dashboard.vue
View File

@@ -2,7 +2,7 @@
<template> <template>
<div class="static"> <div class="static">
<div class="left_tree"> <div class="left_tree">
<tree ref="treeRef" @jump="jump" /> <tree ref="treeRef" />
</div> </div>
<!-- <span class="new_span">测试scss颜色</span> --> <!-- <span class="new_span">测试scss颜色</span> -->
<div class="right_container"> <div class="right_container">
@@ -216,13 +216,7 @@ const handleCheckFunction = (val: any) => {
}); });
form.value.activeTabs = val; form.value.activeTabs = val;
}; };
// 树点击跳转
const jump = (e: any) => {
console.log("🚀 ~ jump ~ e:", e);
router.push({
path: "/plan/planList",
});
};
onMounted(() => { onMounted(() => {
console.log(); console.log();
getTree(); getTree();