mirror/MCSManager
2
0
Fork 1
mirror of https://github.com/MCSManager/MCSManager.git synced 2025-02-17 15:59:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: user info dialog

Browse Source
This commit is contained in:
unitwk 2023-08-25 19:37:01 +08:00
parent 0d75af4e91
commit ab372c057a
8 changed files with 125 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components.d.ts vendored
View File

@ -40,6 +40,7 @@ declare module 'vue' {
ATypographyParagraph: typeof import('ant-design-vue/es')['TypographyParagraph']
ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
BaseInfo: typeof import('./src/components/BaseInfo.vue')['default']
BetweenMenus: typeof import('./src/components/BetweenMenus.vue')['default']
CardOperator: typeof import('./src/components/CardOperator.vue')['default']
CardPanel: typeof import('./src/components/CardPanel.vue')['default']
@ -50,6 +51,7 @@ declare module 'vue' {
LayoutCard: typeof import('./src/components/LayoutCard.vue')['default']
LeftMenuBtn: typeof import('./src/components/LeftMenuBtn.vue')['default']
LeftMenusPanel: typeof import('./src/components/LeftMenusPanel.vue')['default']
MyselfInfoDialog: typeof import('./src/components/MyselfInfoDialog.vue')['default']
NewCardList: typeof import('./src/components/NewCardList/index.vue')['default']
Params: typeof import('./src/components/NewCardList/params.vue')['default']
PlaceHolderCard: typeof import('./src/components/PlaceHolderCard.vue')['default']

2
frontend/src/App.vue
View File

@ -40,6 +40,7 @@ if (isDarkUI) {
}
import { Button, Select, Input, Table } from "ant-design-vue";
import MyselfInfoDialog from "./components/MyselfInfoDialog.vue";
[Button, Select, Input, Table].forEach((element) => {
element.props.size.default = "large";
@ -70,5 +71,6 @@ onMounted(async () => {
<!-- Global Components -->
<InputDialogProvider></InputDialogProvider>
<MyselfInfoDialog></MyselfInfoDialog>
</a-config-provider>
</template>

4
frontend/src/components/AppHeader.vue
View File

@ -23,10 +23,12 @@ import { $t, setLanguage, $t as t } from "@/lang/i18n";
import { THEME, useAppConfigStore } from "@/stores/useAppConfigStore";
import { message } from "ant-design-vue";
import { useAppToolsStore } from "@/stores/useAppToolsStore";
const [messageApi] = message.useMessage();
const { containerState, changeDesignMode } = useLayoutContainerStore();
const { getRouteParamsUrl, toPage } = useAppRouters();
const { setTheme, isDarkTheme } = useAppConfigStore();
const { state: appTools } = useAppToolsStore();
const openNewCardDialog = () => {
containerState.showNewCardDialog = true;
};
@ -180,7 +182,7 @@ const appMenus = computed(() => {
title: t("TXT_CODE_8c3164c9"),
icon: UserOutlined,
click: () => {
toPage({ path: "/user" });
appTools.showUserInfoDialog = true;
},
conditions: !containerState.isDesignMode,
onlyPC: false

27
frontend/src/components/LeftMenusPanel.vue
View File

@ -21,25 +21,16 @@ const handleChangeMenu = (item: LeftMenuItem) => {
</script>
<template>
<CardPanel :padding="false">
<template #body>
<div class="menu-body">
<div class="left-menu">
<div
v-for="item in props.menus"
:key="item.key"
class="mb-6"
@click="handleChangeMenu(item)"
>
<LeftMenuBtn :title="item.title" :icon="item.icon"> </LeftMenuBtn>
</div>
</div>
<div class="right-content">
<slot :name="currentMenu?.key"></slot>
</div>
<div class="menu-body">
<div class="left-menu">
<div v-for="item in props.menus" :key="item.key" class="mb-6" @click="handleChangeMenu(item)">
<LeftMenuBtn :title="item.title" :icon="item.icon"> </LeftMenuBtn>
</div>
</template>
</CardPanel>
</div>
<div class="right-content">
<slot :name="currentMenu?.key"></slot>
</div>
</div>
</template>
<style lang="scss" scoped>

90
frontend/src/components/MyselfInfoDialog.vue Normal file
View File

@ -0,0 +1,90 @@
<script setup lang="ts">
import LeftMenusPanel from "@/components/LeftMenusPanel.vue";
import { t } from "@/lang/i18n";
import { useAppStateStore } from "@/stores/useAppStateStore";
import { useAppToolsStore } from "@/stores/useAppToolsStore";
import type { LayoutCard } from "@/types/index";
import { ProjectOutlined, RobotOutlined } from "@ant-design/icons-vue";
import { reactive, ref, toRaw } from "vue";
const { state } = useAppStateStore();
const { state: tools } = useAppToolsStore();
const menus = [
{
title: t("基本信息"),
key: "baseInfo",
icon: ProjectOutlined
},
{
title: t("第三方接口"),
key: "api",
icon: RobotOutlined
},
{
title: t("账号安全"),
key: "password",
icon: RobotOutlined
}
];
const formState = reactive({
name: "",
delivery: false,
type: [],
resource: "",
desc: ""
});
const onSubmit = () => {
console.log("submit!", toRaw(formState));
};
</script>
<template>
<a-modal
v-model:open="tools.showUserInfoDialog"
:title="t('用户信息')"
centered
@ok="tools.showUserInfoDialog = false"
>
<div>
<a-form :model="formState" layout="vertical">
<a-form-item :label="t('用户ID')">
<span>{{ state.userInfo?.uuid }}</span>
</a-form-item>
<a-form-item :label="t('用户名')">
<span>{{ state.userInfo?.userName }}</span>
</a-form-item>
<a-form-item :label="t('权限等级')">
<span>{{ state.userInfo?.permission }}</span>
</a-form-item>
</a-form>
<!-- <LeftMenusPanel :menus="menus">
<template #baseInfo>
A
</template>
<template #api>
{{ state.userInfo }}
</template>
</LeftMenusPanel> -->
</div>
</a-modal>
</template>
<style lang="scss" scoped>
.full-modal {
.ant-modal {
max-width: 100%;
top: 0;
padding-bottom: 0;
margin: 0;
}
.ant-modal-content {
display: flex;
flex-direction: column;
height: calc(100vh);
}
.ant-modal-body {
flex: 1;
}
}
</style>

36
frontend/src/config/index.ts
View File

@ -23,7 +23,6 @@ import InstanceBaseInfo from "@/widgets/instance/BaseInfo.vue";
import InstanceServerConfigOverview from "@/widgets/instance/ServerConfigOverview.vue";
import InstanceFileManager from "@/widgets/instance/FileManager.vue";
import UserAccessSettings from "@/widgets/user/AccessSettings.vue";
import UserInfo from "@/widgets/user/BaseInfo.vue";
import ImageBox from "@/widgets/others/ImageBox.vue";
import TextCard from "@/widgets/others/TextCard.vue";
import LinkCard from "@/widgets/others/LinkCard.vue";
@ -55,12 +54,11 @@ export const LAYOUT_CARD_TYPES: { [key: string]: any } = {
InstanceServerConfigOverview,
InstanceFileManager,
UserAccessSettings,
UserInfo,
ImageBox,
QuickStartFlow,
IframeCard,
TextCard,
LinkCard,
LinkCard
};
export interface NewCardItem extends LayoutCard {
@ -79,7 +77,7 @@ export function getLayoutCardPool() {
width: 2,
description: "此卡片没有任何内容，可以用来占位，实现居中等排版需求。",
height: LayoutCardHeight.MINI,
category: NEW_CARD_TYPE.OTHER,
category: NEW_CARD_TYPE.OTHER
},
// 只展示到个人资料的卡片（但是不推荐这样用）
@ -92,7 +90,7 @@ export function getLayoutCardPool() {
onlyPath: ["/user"],
description: "这个卡片只能在「个人资料」这种界面出现，不能在其他场景使用。",
height: LayoutCardHeight.MEDIUM,
category: NEW_CARD_TYPE.USER,
category: NEW_CARD_TYPE.USER
},
// 一个新增时要求设置参数的卡片
@ -111,14 +109,14 @@ export function getLayoutCardPool() {
{
field: "instanceId",
label: "实例 ID",
type: "string",
type: "string"
},
{
field: "daemonId",
label: "节点 ID",
type: "string",
},
],
type: "string"
}
]
},
{
@ -127,12 +125,12 @@ export function getLayoutCardPool() {
title: t("节点在线数444"),
meta: {
title: "在线节点 / 总节点",
type: "node",
type: "node"
},
width: 3,
description: t("用于显示面板的所有基本数据"),
height: LayoutCardHeight.SMALL,
category: NEW_CARD_TYPE.COMMON,
category: NEW_CARD_TYPE.COMMON
},
// 一个正常的卡片
@ -144,7 +142,7 @@ export function getLayoutCardPool() {
width: 4,
description: "卡片的详细说明以及使用方式。",
height: LayoutCardHeight.SMALL,
category: NEW_CARD_TYPE.COMMON,
category: NEW_CARD_TYPE.COMMON
},
// 一个多个项目组合一起的卡片
@ -156,7 +154,7 @@ export function getLayoutCardPool() {
width: 12,
description: "卡片的详细说明以及使用方式。",
height: LayoutCardHeight.SMALL,
category: NEW_CARD_TYPE.INSTANCE,
category: NEW_CARD_TYPE.INSTANCE
},
// 包含上下布局的卡片
@ -168,7 +166,7 @@ export function getLayoutCardPool() {
width: 6,
description: "卡片的详细说明以及使用方式。",
height: LayoutCardHeight.MEDIUM,
category: NEW_CARD_TYPE.COMMON,
category: NEW_CARD_TYPE.COMMON
},
// 图片卡片
@ -180,7 +178,7 @@ export function getLayoutCardPool() {
width: 4,
description: t("可以用来显示图片"),
height: LayoutCardHeight.SMALL,
category: NEW_CARD_TYPE.OTHER,
category: NEW_CARD_TYPE.OTHER
},
// iframe卡片
@ -192,7 +190,7 @@ export function getLayoutCardPool() {
width: 4,
description: t("可以用来显示外部网站"),
height: LayoutCardHeight.SMALL,
category: NEW_CARD_TYPE.OTHER,
category: NEW_CARD_TYPE.OTHER
},
// 自定义文本卡片
@ -204,7 +202,7 @@ export function getLayoutCardPool() {
width: 4,
description: t("显示指定文本，支持 Markdown 语法"),
height: LayoutCardHeight.SMALL,
category: NEW_CARD_TYPE.OTHER,
category: NEW_CARD_TYPE.OTHER
},
// 超链接块卡片
@ -216,8 +214,8 @@ export function getLayoutCardPool() {
width: 4,
description: t("显示一组自定义超链接按钮"),
height: LayoutCardHeight.SMALL,
category: NEW_CARD_TYPE.OTHER,
},
category: NEW_CARD_TYPE.OTHER
}
];
return LAYOUT_CARD_POOL;
}

3
frontend/src/stores/useAppToolsStore.ts
View File

@ -15,7 +15,8 @@ export const useAppToolsStore = createGlobalState(() => {
show: false,
resolve: (value: unknown) => {},
reject: (value: unknown) => {}
}
},
showUserInfoDialog: false
});
const openInputDialog = (title: string) => {

102
frontend/src/widgets/user/BaseInfo.vue
View File

@ -1,102 +0,0 @@
<script setup lang="ts">
import LeftMenusPanel from "@/components/LeftMenusPanel.vue";
import { t } from "@/lang/i18n";
import { useAppStateStore } from "@/stores/useAppStateStore";
import type { LayoutCard } from "@/types/index";
import { ProjectOutlined, RobotOutlined } from "@ant-design/icons-vue";
import { reactive, toRaw } from "vue";
const { state } = useAppStateStore();
const props = defineProps<{
card: LayoutCard;
}>();
const menus = [
{
title: t("基本信息"),
key: "baseInfo",
icon: ProjectOutlined
},
{
title: t("API接口"),
key: "api",
icon: RobotOutlined
}
// {
// title: t("注册时间"),
// key: "1145/1/4 19:18:10"
// },
// {
// title: t("最后登录"),
// key: "2023/8/14 13:21:56"
// },
// {
// title: t("唯一标识符"),
// key: "229458f9ec6f47f4a1d46a95cd1ed171"
// }
];
const formState = reactive({
name: "",
delivery: false,
type: [],
resource: "",
desc: ""
});
const onSubmit = () => {
console.log("submit!", toRaw(formState));
};
const labelCol = { style: { width: "150px" } };
const wrapperCol = { span: 14 };
</script>
<template>
<div style="height: 100%">
<LeftMenusPanel :menus="menus">
<template #baseInfo>
<a-form
:model="formState"
:label-col="labelCol"
:wrapper-col="wrapperCol"
label-align="left"
>
<a-form-item label="Activity name">
<a-input v-model:value="formState.name" />
</a-form-item>
<a-form-item label="Instant delivery">
<a-switch v-model:checked="formState.delivery" />
</a-form-item>
<a-form-item label="Activity type">
<a-checkbox-group v-model:value="formState.type">
<a-checkbox value="1" name="type">Online</a-checkbox>
<a-checkbox value="2" name="type">Promotion</a-checkbox>
<a-checkbox value="3" name="type">Offline</a-checkbox>
</a-checkbox-group>
</a-form-item>
<a-form-item label="Resources">
<a-radio-group v-model:value="formState.resource">
<a-radio value="1">Sponsor</a-radio>
<a-radio value="2">Venue</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="Resources">
<a-radio-group v-model:value="formState.resource">
<a-radio value="1">Sponsor</a-radio>
<a-radio value="2">Venue</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="Activity form">
<a-textarea v-model:value="formState.desc" />
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">Create</a-button>
<a-button style="margin-left: 10px">Cancel</a-button>
</a-form-item>
</a-form>
</template>
<template #api>
{{ state.userInfo }}
</template>
</LeftMenusPanel>
</div>
</template>