mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-23 05:10:57 +00:00
refactor: 调整多处页面布局与组件引用
1. 修复AI记忆页面表单label宽度固定为70px 2. 为分页组件添加居中样式 3. 调整多处页面的组件导入与布局结构,包括系统角色/用户、工作流、代码生成、仪表盘页面 4. 重构工作流设计面板的组件引用与画布样式
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
+2
-2
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user