renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 工作台页面优化

Browse Source
This commit is contained in:
rd
2025-07-01 17:28:18 +08:00
parent f4c95efa64
commit 9ad8e35305
6 changed files with 84 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -1,7 +1,3 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-19 01:45:53
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh"> <html lang="zh">
<head> <head>

29
src/views/components/management/account/index.vue
View File

@ -1,16 +1,20 @@
<template> <template>
<Container title="账号信息" class="container mt-24px"> <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
<template #header> <div class="title-row">
<span class="title">账号管理</span>
<a-button type="outline" class="add-account-button" @click="handleAddAccount">添加子账号</a-button> <a-button type="outline" class="add-account-button" @click="handleAddAccount">添加子账号</a-button>
</template> </div>
<a-table <a-table
:columns="columns" :columns="columns"
:data="data" :data="data"
:pagination="pagination" :pagination="pagination"
class="mt-16px" class="mt-8px h-540px"
@page-change="handlePageChange" @page-change="handlePageChange"
@page-size-change="handlePageSizeChange" @page-size-change="handlePageSizeChange"
> >
<template #empty>
<NoData />
</template>
<template #mobile="{ record }"> <template #mobile="{ record }">
<div class="flex item-center pt-13px pb-13px"> <div class="flex item-center pt-13px pb-13px">
<span class="mr-4px">{{ record.mobile }}</span> <span class="mr-4px">{{ record.mobile }}</span>
@ -52,7 +56,7 @@
<DeleteModal v-model:visible="deleteVisible" :title="deleteTitle" @ok="handleDelete"> <DeleteModal v-model:visible="deleteVisible" :title="deleteTitle" @ok="handleDelete">
<p class="delete-modal-content">删除后，该账号将无法登录您的企业。</p> <p class="delete-modal-content">删除后，该账号将无法登录您的企业。</p>
</DeleteModal> </DeleteModal>
</Container> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Container from '@/components/container.vue'; import Container from '@/components/container.vue';
@ -277,4 +281,19 @@ onMounted(() => {
font-size: 12px; font-size: 12px;
color: var(--Text-2, rgba(60, 64, 67, 1)); color: var(--Text-2, rgba(60, 64, 67, 1));
} }
.title-row {
display: flex;
height: 64px;
padding: 10px 0 2px 0;
align-items: center;
justify-content: space-between;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
</style> </style>

26
src/views/components/management/enterprise/index.vue
View File

@ -1,6 +1,12 @@
<template> <template>
<Container title="企业信息" class="container mt-24px"> <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-16px"> <div class="title-row">
<span class="title">企业信息</span>
</div>
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px h-540px">
<template #empty>
<NoData />
</template>
<template #info="{ record }"> <template #info="{ record }">
{{ record.name }} {{ record.name }}
</template> </template>
@ -27,7 +33,7 @@
</a-form> </a-form>
</Modal> </Modal>
<CustomerServiceModal v-model:visible="customerServiceVisible" /> <CustomerServiceModal v-model:visible="customerServiceVisible" />
</Container> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Container from '@/components/container.vue'; import Container from '@/components/container.vue';
@ -155,4 +161,18 @@ async function handleOk() {
font-size: 12px; font-size: 12px;
color: rgba(109, 76, 254, 1); color: rgba(109, 76, 254, 1);
} }
.title-row {
display: flex;
height: 64px;
padding: 10px 0 2px 0;
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
</style> </style>

28
src/views/components/management/person/index.vue
View File

@ -1,6 +1,12 @@
<template> <template>
<Container title="个人信息" class="container mt-24px"> <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-16px"> <div class="title-row">
<span class="title">个人信息</span>
</div>
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px h-540px">
<template #empty>
<NoData />
</template>
<template #info="{ record }"> <template #info="{ record }">
<div class="pt-3px pb-3px"> <div class="pt-3px pb-3px">
<a-avatar :image-url="record.head_image" :size="32" /> <a-avatar :image-url="record.head_image" :size="32" />
@ -71,7 +77,7 @@
@cancel="verificationVisible = false" @cancel="verificationVisible = false"
/> />
</Modal> </Modal>
</Container> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Container from '@/components/container.vue'; import Container from '@/components/container.vue';
@ -248,7 +254,7 @@ function getFileExtension(filename: string): string {
return match ? match[1].toLowerCase() : ''; return match ? match[1].toLowerCase() : '';
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="scss">
.form { .form {
margin-top: 13px; margin-top: 13px;
:deep(.arco-row) { :deep(.arco-row) {
@ -305,4 +311,18 @@ function getFileExtension(filename: string): string {
color: var(--Text-2, rgba(60, 64, 67, 1)); color: var(--Text-2, rgba(60, 64, 67, 1));
} }
} }
.title-row {
display: flex;
height: 64px;
padding: 10px 0 2px 0;
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
</style> </style>

18
src/views/components/workplace/index.vue
View File

@ -4,15 +4,9 @@
--> -->
<template> <template>
<div class="m-auto mt-24px max-w-1000px"> <div class="m-auto mt-24px max-w-1000px">
<Container title="推荐产品" class="body"> <Container title="推荐产品" class="container-body">
<div class="flex flex-wrap"> <div class="grid grid-cols-3 gap-20px">
<Product <Product v-for="product in products" :key="product.id" :product="product" @refresh="getProductList" />
v-for="product in products"
:key="product.id"
class="mt-20px ml-20px"
:product="product"
@refresh="getProductList"
/>
</div> </div>
<NoData v-if="products.length === 0" /> <NoData v-if="products.length === 0" />
</Container> </Container>
@ -53,10 +47,10 @@ const getSuccessCaseList = async () => {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.body { .container-body {
padding-left: 4px !important; padding-left: 24px !important;
:deep(> div > .title) { :deep(> div > .title) {
padding-left: 20px; margin-bottom: 16px;
} }
} }
</style> </style>

12
src/views/components/workplace/modules/product.vue
View File

@ -15,8 +15,8 @@
format="D天H时m分s秒" format="D天H时m分s秒"
/> />
</div> </div>
<div class="body"> <div class="product-info">
<h1 class="title">{{ props.product.name }}</h1> <h1 class="title mb4">{{ props.product.name }}</h1>
<p class="desc"> <p class="desc">
{{ props.product.desc }} {{ props.product.desc }}
</p> </p>
@ -118,7 +118,7 @@ const gotoModule = (menuId: number) => {
width: 304px; width: 304px;
height: 220px; height: 220px;
border-radius: 8px; border-radius: 8px;
border: 1px solid rgba(230, 230, 232, 1); border: 1px solid var(--BG-300, #e6e6e8);
padding: 20px; padding: 20px;
.avatar { .avatar {
@ -185,11 +185,12 @@ const gotoModule = (menuId: number) => {
} }
} }
.body { .product-info {
height: 88px; height: 88px;
margin-top: 12px; margin-top: 12px;
.title { .title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium'; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -199,6 +200,7 @@ const gotoModule = (menuId: number) => {
} }
.desc { .desc {
color: var(--Text-3, #737478);
font-family: 'PuHuiTi-Medium'; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
@ -208,7 +210,7 @@ const gotoModule = (menuId: number) => {
} }
.footer { .footer {
padding-top: 16px; margin-top: 16px;
.primary-button { .primary-button {
height: 24px; height: 24px;