Skip to content

V
VueJS_487578

七七码生 / VueJS_487578
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
V
VueJS_487578
提交 dd2de00d 编写于 作者: W weixin_46329670
浏览文件
操作

Thu Mar 6 15:58:00 CST 2025 inscode

上级 5f305666
显示空白变更内容
内联 并排
Showing with 138 addition and 78 deletion
src/App.vue
浏览文件 @ dd2de00d
...@@ -89,11 +89,50 @@ layout="prev, pager, next" ...@@ -89,11 +89,50 @@ layout="prev, pager, next"
</div> </div>
</div> </div>
</div> </div>
<!-- 添加成员对话框 -->
<el-dialog
v-model="dialogVisible"
title="添加成员"
width="560px"
:close-on-click-modal="false"
>
<el-form :model="dialogFormData" label-width="100px">
<el-form-item label="姓名">
<el-input v-model="dialogFormData.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="账号">
<el-input v-model="dialogFormData.account" placeholder="请输入账号" />
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="dialogFormData.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="电话号码">
<el-input v-model="dialogFormData.phone" placeholder="请输入电话号码" />
</el-form-item>
<el-form-item label="角色类型">
<el-select v-model="dialogFormData.role" placeholder="请选择角色类型" class="w-full">
<el-option label="架构师" value="架构师" />
<el-option label="技术经理" value="技术经理" />
<el-option label="开发" value="开发" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="flex justify-end gap-2">
<el-button @click="dialogVisible = false" class="!rounded-button">取消</el-button>
<el-button type="primary" @click="handleSubmit" class="!rounded-button">
<el-icon><UserFilled /></el-icon>
添加
</el-button>
</div>
</template>
</el-dialog>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { Plus, Search, Setting, Star } from '@element-plus/icons-vue'; import { Plus, Search, Setting, Star, UserFilled } from '@element-plus/icons-vue';
const searchQuery = ref(''); const searchQuery = ref('');
const memberSearchQuery = ref(''); const memberSearchQuery = ref('');
const currentPage = ref(1); const currentPage = ref(1);
...@@ -182,8 +221,22 @@ const handleNodeClick = (data: any) => { ...@@ -182,8 +221,22 @@ const handleNodeClick = (data: any) => {
const handleSearch = () => { const handleSearch = () => {
// Implement search logic // Implement search logic
}; };
const dialogVisible = ref(false);
const dialogFormData = ref({
name: '',
account: '',
email: '',
phone: '',
role: ''
});
const handleAddMember = () => { const handleAddMember = () => {
// Implement add member logic dialogVisible.value = true;
};
const handleSubmit = () => {
// 处理表单提交逻辑
dialogVisible.value = false;
}; };
const handleSetLeader = () => { const handleSetLeader = () => {
// Implement set leader logic // Implement set leader logic
...@@ -194,129 +247,136 @@ const handleRemove = (row: any) => { ...@@ -194,129 +247,136 @@ const handleRemove = (row: any) => {
</script> </script>
<style scoped> <style scoped>
.page-container { .page-container {
background-color: #f9fafb; background-color: #f9fafb;
} }
.page-wrapper { .page-wrapper {
min-height: 1024px; min-height: 1024px;
margin: 0 auto; margin: 0 auto;
width: 1440px; width: 1440px;
display: flex; display: flex;
} }
.sidebar { .sidebar {
width: 280px; width: 280px;
background-color: #fff; background-color: #fff;
border-right: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb;
padding: 16px; padding: 16px;
} }
.sidebar-header { .sidebar-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 16px; margin-bottom: 16px;
} }
.sidebar-title { .sidebar-title {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.sidebar-title .icon { .sidebar-title .icon {
color: #10b981; color: #10b981;
margin-right: 4px; margin-right: 4px;
} }
.sidebar-title span { .sidebar-title span {
color: #111827; color: #111827;
font-weight: 500; font-weight: 500;
} }
.search-input { .search-input {
margin-bottom: 16px; margin-bottom: 16px;
width: 200px; width: 200px;
} }
.main-content { .main-content {
flex: 1; flex: 1;
background-color: #f3f4f6; background-color: #f3f4f6;
} }
.info-card { .info-card {
background-color: #fff; background-color: #fff;
padding: 24px; padding: 24px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.member-card { .member-card {
background-color: #fff; background-color: #fff;
padding: 24px; padding: 24px;
} }
.card-title { .card-title {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
margin-bottom: 16px; margin-bottom: 16px;
} }
.info-grid { .info-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 32px; gap: 32px;
} }
.info-item { .info-item {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.info-label { .info-label {
color: #6b7280; color: #6b7280;
width: 96px; width: 96px;
} }
.action-bar { .action-bar {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.pagination-wrapper { .pagination-wrapper {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top: 16px; margin-top: 16px;
} }
:deep(.el-tree-node__content) { :deep(.el-tree-node__content) {
height: 40px; height: 40px;
} }
:deep(.el-tree-node.is-current > .el-tree-node__content) { :deep(.el-tree-node.is-current > .el-tree-node__content) {
background-color: #ecfdf5; background-color: #ecfdf5;
color: #10b981; color: #10b981;
} }
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
background-color: #f9fafb; background-color: #f9fafb;
} }
:deep(.el-table th) { :deep(.el-table th) {
background-color: #f9fafb; background-color: #f9fafb;
font-weight: 500;
color: #374151;
}
:deep(.el-table td) {
color: #374151;
}
:deep(.el-pagination) {
justify-content: flex-end;
}
:deep(.el-icon) {
margin-right: 4px;
}
:deep(.el-dialog__body) {
padding: 20px 40px;
}
:deep(.el-form-item__label) {
font-weight: 500; font-weight: 500;
color: #374151; color: #374151;
} }
:deep(.el-table td) { :deep(.el-input__wrapper) {
color: #374151; padding: 0 12px;
height: 40px;
} }
:deep(.el-pagination) { :deep(.el-dialog__header) {
justify-content: flex-end; margin: 0;
padding: 20px 40px;
border-bottom: 1px solid #e5e7eb;
} }
:deep(.el-icon) { :deep(.el-dialog__footer) {
margin-right: 4px; padding: 20px 40px;
border-top: 1px solid #e5e7eb;
}
:deep(.el-dialog__title) {
font-weight: 500;
color: #111827;
} }
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或