refactor: 调整多处页面布局与组件引用

1. 修复AI记忆页面表单label宽度固定为70px
2. 为分页组件添加居中样式
3. 调整多处页面的组件导入与布局结构,包括系统角色/用户、工作流、代码生成、仪表盘页面
4. 重构工作流设计面板的组件引用与画布样式
This commit is contained in:
zhangtao
2026-05-18 01:14:01 +08:00
parent 6bbf49aa04
commit 715853f1ad
8 changed files with 89 additions and 62 deletions
@@ -100,4 +100,10 @@ function handleCurrentChange(val: number) {
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.pagination {
display: flex;
justify-content: center;
padding: 12px 0;
}
</style>
+67 -58
View File
@@ -97,24 +97,10 @@
<!-- CardList 概览统计含在线用户/UV/PV/访问量等 -->
<CardList />
<!-- 日程日历 + 我的收藏 -->
<!-- 关于项目 + 我的收藏 -->
<ElRow :gutter="16">
<ElCol :xs="24" :span="12" class="flex flex-col">
<ElCard shadow="hover" class="workplace-surface workplace-ops-card flex flex-col h-full">
<template #header>
<div class="workplace-section-card__head">
<div>
<span class="workplace-panel-title">日程日历</span>
<p class="workplace-section-sub workplace-section-sub--inline">
点击日期添加或编辑本地演示
</p>
</div>
</div>
</template>
<div class="workplace-ops-card__body">
<FaCalendar />
</div>
</ElCard>
<AboutProject />
</ElCol>
<ElCol :xs="24" :span="12" class="flex flex-col">
<ElCard shadow="hover" class="flex flex-col h-full">
@@ -152,51 +138,60 @@
</div>
</div>
</template>
<div v-if="quickLinks.length > 0">
<ElTooltip
<ElRow v-if="quickLinks.length > 0" :gutter="12">
<ElCol
v-for="(item, index) in quickLinks"
:key="item.id || `${item.href}-${index}`"
placement="top"
:show-after="400"
:content="item.title"
:xs="24"
:sm="12"
:md="8"
:lg="8"
:xl="8"
class="mb-3"
>
<div
class="workplace-quick-row workplace-quick-row--compact workplace-quick-row--chip"
role="button"
tabindex="0"
@click="handleQuickLinkClick(item)"
@keydown.enter.prevent="handleQuickLinkClick(item)"
@keydown.space.prevent="handleQuickLinkClick(item)"
<ElTooltip
placement="top"
:show-after="400"
:content="item.title"
>
<span
class="workplace-quick-row__accent"
:style="{ backgroundColor: getQuickLinkColor(getQuickLinkStableIndex(item)) }"
/>
<div
class="workplace-quick-row__icon"
:style="{ color: getQuickLinkColor(getQuickLinkStableIndex(item)) }"
class="workplace-quick-row workplace-quick-row--compact workplace-quick-row--chip"
role="button"
tabindex="0"
@click="handleQuickLinkClick(item)"
@keydown.enter.prevent="handleQuickLinkClick(item)"
@keydown.space.prevent="handleQuickLinkClick(item)"
>
<FaMenuRouteIcon :icon="item.icon || 'menu'" />
</div>
<div class="workplace-quick-row__text">
<span class="workplace-quick-row__title">{{ item.title }}</span>
</div>
<div class="workplace-quick-row__actions">
<button
type="button"
class="workplace-quick-row__remove"
:disabled="!item.id && !item.href"
:title="item.id || item.href ? '移除收藏' : '无法移除(缺少路径)'"
:aria-label="`移除收藏 ${item.title}`"
@click.stop="handleDeleteLink(item)"
<span
class="workplace-quick-row__accent"
:style="{ backgroundColor: getQuickLinkColor(getQuickLinkStableIndex(item)) }"
/>
<div
class="workplace-quick-row__icon"
:style="{ color: getQuickLinkColor(getQuickLinkStableIndex(item)) }"
>
<ElIcon><Close /></ElIcon>
</button>
<FaMenuRouteIcon :icon="item.icon || 'menu'" />
</div>
<div class="workplace-quick-row__text">
<span class="workplace-quick-row__title">{{ item.title }}</span>
</div>
<div class="workplace-quick-row__actions">
<button
type="button"
class="workplace-quick-row__remove"
:disabled="!item.id && !item.href"
:title="item.id || item.href ? '移除收藏' : '无法移除(缺少路径)'"
:aria-label="`移除收藏 ${item.title}`"
@click.stop="handleDeleteLink(item)"
>
<ElIcon><Close /></ElIcon>
</button>
</div>
</div>
</div>
</ElTooltip>
</div>
<ElEmpty v-else :image-size="48">
</ElTooltip>
</ElCol>
</ElRow>
<ElEmpty v-else :image-size="100">
<template #description>
<p class="workplace-quick-empty__title">暂无收藏</p>
<p class="workplace-quick-empty__hint">
@@ -210,8 +205,25 @@
</ElCol>
</ElRow>
<!-- 最新动态 + 关于项目 -->
<!-- 日程日历 + 最新动态 -->
<ElRow :gutter="16">
<ElCol :span="12" class="flex flex-col">
<ElCard shadow="hover" class="workplace-surface workplace-ops-card flex flex-col h-full">
<template #header>
<div class="workplace-section-card__head">
<div>
<span class="workplace-panel-title">日程日历</span>
<p class="workplace-section-sub workplace-section-sub--inline">
点击日期添加或编辑本地演示
</p>
</div>
</div>
</template>
<div class="workplace-ops-card__body">
<FaCalendar />
</div>
</ElCard>
</ElCol>
<ElCol :span="12" class="flex flex-col">
<ElCard shadow="hover" class="h-full flex flex-col">
<template #header>
@@ -228,7 +240,7 @@
</ElLink>
</div>
</template>
<ElScrollbar height="300px">
<ElScrollbar class="h-full">
<ElTimeline class="p-2">
<ElTimelineItem
v-for="(item, index) in vesionList"
@@ -263,9 +275,6 @@
</ElScrollbar>
</ElCard>
</ElCol>
<ElCol :span="12" class="flex flex-col">
<AboutProject />
</ElCol>
</ElRow>
</div>
</template>
@@ -125,7 +125,7 @@
:items="memoryDialogFormItems"
:rules="rules"
label-suffix=":"
:label-width="'auto'"
:label-width="'70px'"
label-position="right"
:span="24"
:gutter="16"
@@ -37,7 +37,7 @@
</ElButton>
</ElFormItem>
</ElForm>
<ElRow>
<div>
<ElTable
ref="tableRef"
:data="data"
@@ -79,7 +79,7 @@
:total="total"
@pagination="emit('fetch')"
/>
</ElRow>
</div>
<template #footer>
<div class="dialog-footer">
<ElButton type="primary" :loading="confirmLoading" @click="emit('confirm')"> </ElButton>
@@ -165,6 +165,7 @@ import type { FormItem } from "@/components/forms/fa-form/index.vue";
import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
import FaForm from "@/components/forms/fa-form/index.vue";
import { ElTag, ElMessage } from "element-plus";
import FaPermissonDrawer from "./components/FaPermissonDrawer.vue";
defineOptions({
name: "Role",
@@ -238,6 +238,7 @@ import type { FormItem } from "@/components/forms/fa-form/index.vue";
import type { IContentConfig, IObject } from "@/components/modal/types";
import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
import FaForm from "@/components/forms/fa-form/index.vue";
import FaDeptTree from "./components/FaDeptTree.vue";
import { ElTag, ElMessage, ElMessageBox } from "element-plus";
const { hasAuth } = useAuth();
@@ -206,6 +206,8 @@ import WorkflowDefinitionAPI, {
type WorkflowForm,
} from "@/api/module_task/workflow/definition";
import WorkflowNodeTypeAPI from "@/api/module_task/workflow/node-type";
import FaNodeConfigPanel from "./FaNodeConfigPanel.vue";
import FaEdgeConfigPanel from "./FaEdgeConfigPanel.vue";
defineOptions({
name: "WorkflowCreateDrawer",
@@ -965,9 +967,16 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
.canvas-container {
flex: 1;
min-height: 400px;
width: 100%;
height: 100%;
overflow: hidden;
}
.canvas-container :deep(.vue-flow) {
width: 100%;
height: 100%;
}
:deep(.vue-flow__controls) {
display: flex;
flex-direction: column;
@@ -124,6 +124,7 @@ import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue"
import FaTable from "@/components/tables/fa-table/index.vue";
import FaTableHeader from "@/components/tables/fa-table-header/index.vue";
import FaTableHeaderLeft from "@/components/tables/fa-table-header-left/index.vue";
import FaWorkflowDesignDrawer from "../components/FaWorkflowDesignDrawer.vue";
import { useTable } from "@/hooks/core/useTable";
import type { ColumnOption } from "@/types/component";
import { ArrowDown } from "@element-plus/icons-vue";