Thu Mar 6 15:58:00 CST 2025 inscode

src/App.vue

@@ -89,11 +89,50 @@ layout="prev, pager, next"
 </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>
 </template>
 <script lang="ts" setup>
 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 memberSearchQuery = ref('');
 const currentPage = ref(1);
@@ -182,8 +221,22 @@ const handleNodeClick = (data: any) => {
 const handleSearch = () => {
 // Implement search logic
 };
+const dialogVisible = ref(false);
+const dialogFormData = ref({
+  name: '',
+  account: '',
+  email: '',
+  phone: '',
+  role: ''
+});
+
 const handleAddMember = () => {
-// Implement add member logic
+  dialogVisible.value = true;
+};
+
+const handleSubmit = () => {
+  // 处理表单提交逻辑
+  dialogVisible.value = false;
 };
 const handleSetLeader = () => {
 // Implement set leader logic
@@ -194,129 +247,136 @@ const handleRemove = (row: any) => {
 </script>
 <style scoped>
 .page-container {
-  background-color: #f9fafb;
+background-color: #f9fafb;
 }
-
 .page-wrapper {
-  min-height: 1024px;
-  margin: 0 auto;
-  width: 1440px;
-  display: flex;
+min-height: 1024px;
+margin: 0 auto;
+width: 1440px;
+display: flex;
 }
-
 .sidebar {
-  width: 280px;
-  background-color: #fff;
-  border-right: 1px solid #e5e7eb;
-  padding: 16px;
+width: 280px;
+background-color: #fff;
+border-right: 1px solid #e5e7eb;
+padding: 16px;
 }
-
 .sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
+display: flex;
+align-items: center;
+justify-content: space-between;
+margin-bottom: 16px;
 }
-
 .sidebar-title {
-  display: flex;
-  align-items: center;
+display: flex;
+align-items: center;
 }
-
 .sidebar-title .icon {
-  color: #10b981;
-  margin-right: 4px;
+color: #10b981;
+margin-right: 4px;
 }
-
 .sidebar-title span {
-  color: #111827;
-  font-weight: 500;
+color: #111827;
+font-weight: 500;
 }
-
 .search-input {
-  margin-bottom: 16px;
-  width: 200px;
+margin-bottom: 16px;
+width: 200px;
 }
-
 .main-content {
-  flex: 1;
-  background-color: #f3f4f6;
+flex: 1;
+background-color: #f3f4f6;
 }
-
 .info-card {
-  background-color: #fff;
-  padding: 24px;
-  margin-bottom: 16px;
+background-color: #fff;
+padding: 24px;
+margin-bottom: 16px;
 }
-
 .member-card {
-  background-color: #fff;
-  padding: 24px;
+background-color: #fff;
+padding: 24px;
 }
-
 .card-title {
-  font-size: 18px;
-  font-weight: 500;
-  margin-bottom: 16px;
+font-size: 18px;
+font-weight: 500;
+margin-bottom: 16px;
 }
-
 .info-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 32px;
+display: grid;
+grid-template-columns: repeat(3, 1fr);
+gap: 32px;
 }
-
 .info-item {
-  display: flex;
-  align-items: center;
+display: flex;
+align-items: center;
 }
-
 .info-label {
-  color: #6b7280;
-  width: 96px;
+color: #6b7280;
+width: 96px;
 }
-
 .action-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
+display: flex;
+align-items: center;
+gap: 8px;
+margin-bottom: 16px;
 }
-
 .pagination-wrapper {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
+display: flex;
+justify-content: flex-end;
+margin-top: 16px;
 }
-
 :deep(.el-tree-node__content) {
-  height: 40px;
+height: 40px;
 }
-
 :deep(.el-tree-node.is-current > .el-tree-node__content) {
-  background-color: #ecfdf5;
-  color: #10b981;
+background-color: #ecfdf5;
+color: #10b981;
 }
-
 :deep(.el-input__wrapper) {
-  background-color: #f9fafb;
+background-color: #f9fafb;
 }
-
 :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;
   color: #374151;
 }
 
-:deep(.el-table td) {
-  color: #374151;
+:deep(.el-input__wrapper) {
+  padding: 0 12px;
+  height: 40px;
 }
 
-:deep(.el-pagination) {
-  justify-content: flex-end;
+:deep(.el-dialog__header) {
+  margin: 0;
+  padding: 20px 40px;
+  border-bottom: 1px solid #e5e7eb;
 }
 
-:deep(.el-icon) {
-  margin-right: 4px;
+:deep(.el-dialog__footer) {
+  padding: 20px 40px;
+  border-top: 1px solid #e5e7eb;
+}
+
+:deep(.el-dialog__title) {
+  font-weight: 500;
+  color: #111827;
 }
 </style>