mirror/MCSManager
2
0
Fork 1
mirror of https://github.com/MCSManager/MCSManager.git synced 2024-12-21 07:49:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Optimize: Card & UI

Browse Source
This commit is contained in:
unitwk 2023-12-29 17:45:37 +08:00
parent 80052e6afc
commit aafebeab53
13 changed files with 64 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/assets/base.scss
View File

@ -9,4 +9,6 @@
--phone-width: 992px;
--app-max-width: 1360px;
--color-always-white: #ffffff;
}

8
frontend/src/assets/global.scss
View File

@ -68,14 +68,6 @@ html {
position: absolute;
}
.global-text-white-border {
text-shadow:
-1px -1px 0 #ffffff75,
1px -1px 0 #ffffff75,
-1px 1px 0 #ffffff75,
1px 1px 0 #ffffff75;
}
.global-app-container {
max-width: var(--app-max-width);
margin: auto;

5
frontend/src/assets/variables-dark.scss
View File

@ -23,6 +23,11 @@
.app-header-wrapper {
border-bottom: 1px solid var(--color-gray-5);
}
// Antdv for dark mode
.ant-btn-default {
background-color: var(--vscode-bg-color);
}
}
.app-dark-base-color {

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

@ -378,6 +378,7 @@ const openPhoneMenu = (b = false) => {
.phone-menu-btn {
padding: 16px 8px;
border-bottom: 1px solid var(--color-gray-4);
color: var(--color-gray-12);
}
}
@ -394,11 +395,12 @@ const openPhoneMenu = (b = false) => {
margin-top: 8px;
button {
color: var(--color-gray-4);
color: var(--color-always-white) !important;
}
}
.phone-nav-button {
.phone-nav-button,
.phone-nav-button * {
margin: 0px 6px;
}
}

20
frontend/src/components/BetweenMenus.vue
View File

@ -18,21 +18,37 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
gap: 12px;
.menus-item-center {
display: flex;
justify-content: center;
width: 30%;
flex: 1;
}
.menus-item-left {
flex: 1;
}
.menus-item-right {
text-align: right;
flex: 1;
}
}
@media (max-width: 585px) {
.between-menus-container {
display: block;
}
.menus-item-center {
margin-bottom: 12px;
}
.menus-item-left {
display: none;
}
.menus-item-center {
.menus-item-center,
.menus-item-right {
width: 100% !important;
text-align: left !important;
}
}
</style>

2
frontend/src/components/CardPanel.vue
View File

@ -42,9 +42,9 @@ const props = defineProps({
@import "@/assets/global.scss";
.padding {
padding: 16px;
border: 1px solid var(--card-border-color);
}
.card-panel {
border: 1px solid var(--card-border-color);
background-color: var(--background-color-white);
display: flex;
flex-direction: column;

14
frontend/src/components/NewCardList/index.vue
View File

@ -13,6 +13,7 @@ import type { NewCardItem } from "../../config/index";
import { message } from "ant-design-vue";
import { reportError } from "@/tools/validator";
import { AppstoreOutlined, BarsOutlined } from "@ant-design/icons-vue";
const { getCardPool } = useCardPool();
const { insertLayoutItem } = useLayoutConfigStore();
@ -60,10 +61,10 @@ const cardCategoryList = [
label: t("TXT_CODE_d941eb89"),
value: NEW_CARD_TYPE.INSTANCE
},
{
label: t("TXT_CODE_765d34e6"),
value: NEW_CARD_TYPE.USER
},
// {
// label: t("TXT_CODE_765d34e6"),
// value: NEW_CARD_TYPE.USER
// },
{
label: t("TXT_CODE_76b2a495"),
value: NEW_CARD_TYPE.OTHER
@ -95,11 +96,12 @@ const handleTabClick = (value: string) => {
</a-button>
</div>
<div v-for="card in cardPool" :key="card.id + currentCardCategory">
<a-row v-if="card.category === currentCardCategory" style="margin-bottom: 20px">
<a-row v-if="card.category === currentCardCategory" style="margin-bottom: 48px">
<a-col span="24">
<a-typography>
<a-typography-title :level="4">
<span class="global-text-white-border">
<AppstoreOutlined />
<span class="ml-4">
{{ card.title }}
</span>
</a-typography-title>

8
frontend/src/views/LayoutContainer.vue
View File

@ -127,14 +127,6 @@ const showCardOperator = (card: ILayoutCard) => {
display: none;
}
}
.is-order-mode[data-card-type="EmptyCard"] {
.layout-card-container {
border: 1px dashed var(--gray-border-color);
background-color: var(--drag-background-color);
border-radius: 6px;
height: 100%;
}
}
</style>
<style lang="scss" scoped>

11
frontend/src/widgets/EmptyCard.vue
View File

@ -10,3 +10,14 @@
height: 100%;
}
</style>
<style lang="less">
.is-order-mode[data-card-type="EmptyCard"] {
.layout-card-container {
border: 1px dashed var(--gray-border-color);
background-color: var(--color-gray-3);
border-radius: 6px;
height: 100%;
}
}
</style>

2
frontend/src/widgets/InstanceChart.vue
View File

@ -21,7 +21,7 @@ watch(state, () => {
const MAX_TIME = source.length - 1;
for (const key in source) {
const v = source[key] as JsonData;
v.time = `${MAX_TIME - Number(key) * 1} MIN`;
v.time = `${MAX_TIME - Number(key) * 1}s`;
}
chart.setOption({
yAxis: {

21
frontend/src/widgets/InstanceList.vue
View File

@ -306,14 +306,17 @@ onMounted(async () => {
</a-menu-item>
</a-menu>
</template>
<a-button class="mr-12">
{{
computeNodeName(
currentRemoteNode?.ip || "",
currentRemoteNode?.available || true,
currentRemoteNode?.remarks
)
}}
<a-button class="mr-12" style="max-width: 200px; overflow: hidden">
<a-typography-paragraph
:ellipsis="{ rows: 1, expandable: false }"
:content="
computeNodeName(
currentRemoteNode?.ip || '',
currentRemoteNode?.available || true,
currentRemoteNode?.remarks
)
"
/>
<DownOutlined />
</a-button>
</a-dropdown>
@ -452,7 +455,7 @@ onMounted(async () => {
.search-input {
transition: all 0.6s;
text-align: center;
width: 50%;
width: 80%;
}
@media (max-width: 992px) {

2
frontend/src/widgets/RequestChart.vue
View File

@ -21,7 +21,7 @@ watch(state, () => {
const MAX_TIME = source.length - 1;
for (const key in source) {
const v = source[key] as JsonData;
v.time = `${MAX_TIME - Number(key) * 1} MIN`;
v.time = `${MAX_TIME - Number(key) * 1}s`;
}
const max = Math.max(...source.map((v) => v.value));
chart.setOption({

1
frontend/src/widgets/instance/Terminal.vue
View File

@ -445,6 +445,7 @@ const innerTerminalType = viewType === "inner";
}
.terminal-wrapper {
border: 1px solid var(--card-border-color);
position: relative;
overflow: hidden;
height: 100%;