add:增加权限弹窗

components.d.ts

@@ -50,6 +50,7 @@ declare module 'vue' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
@@ -70,6 +71,7 @@ declare module 'vue' {
     EmojiPicker: typeof import('./src/components/comment/emojiPicker.vue')['default']
     GlobaIcon: typeof import('./src/components/globaIcon/index.vue')['default']
     GlobalIcon: typeof import('./src/components/GlobalIcon/index.vue')['default']
+    MemberSelector: typeof import('./src/components/memberSelector/index.vue')['default']
     NameAvatar: typeof import('./src/components/nameAvatar/index.vue')['default']
     OverflowTabs: typeof import('./src/components/overflowTabs/index.vue')['default']
     PageForm: typeof import('./src/components/pageForm/index.vue')['default']

src/components/memberSelector/index.vue

@@ -0,0 +1,306 @@
+<template>
+  <el-drawer
+    v-model="drawerVisible"
+    size="440px"
+    class="member-drawer"
+    :with-header="false"
+  >
+    <div class="custom-header">
+      <div class="title-row">
+        <span class="decorator"></span>
+        <span class="title">成员管理</span>
+        <el-icon class="close-icon" @click="drawerVisible = false"
+          ><Close
+        /></el-icon>
+      </div>
+      <p class="sub-title">角色：<span>超级管理员</span></p>
+    </div>
+
+    <div class="drawer-body-container">
+      <div class="search-bar">
+        <el-input
+          v-model="searchQuery"
+          placeholder="按姓名或部门搜索成员..."
+          :prefix-icon="Search"
+          clearable
+        />
+        <el-button type="primary" plain @click="addNewMember"
+          >添加成员</el-button
+        >
+      </div>
+
+      <div class="member-list" ref="listRef">
+        <transition-group name="list-fade">
+          <div
+            v-for="item in filteredMembers"
+            :key="item.id"
+            class="member-item"
+            @click="selectMember(item)"
+          >
+            <name-avatar
+              :size="30"
+              :name="item.name"
+              :bgColor="'var(--mj-avatar-bg)'"
+              :avatarTextColor="'var(--mj-text-color)'"
+            />
+            <div class="member-info">
+              <div class="name">{{ item.name }}</div>
+              <div class="dept">{{ item.dept }}</div>
+            </div>
+            <div class="member-action">
+              <el-button link type="info" @click.stop="handleRemove(item.id)"
+                >移除</el-button
+              >
+            </div>
+          </div>
+        </transition-group>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="drawer-footer">
+        <div class="stats-info">
+          <span class="label">统计信息</span>
+          <span class="count">共 {{ memberList.length }} 名成员</span>
+        </div>
+        <div class="actions">
+          <el-button link @click="drawerVisible = false">取消</el-button>
+          <el-button type="primary" class="btn-confirm">确认保存变更</el-button>
+        </div>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import { Search } from "@element-plus/icons-vue";
+import NameAvatar from "@/components/NameAvatar/index.vue";
+defineOptions({ name: "MemberSelector" });
+const listRef = ref(null);
+const drawerVisible = defineModel("visible", { type: Boolean });
+const searchQuery = ref("");
+const currentHoverId = ref("");
+// 模拟数据
+const memberList = ref([
+  {
+    id: 1,
+    name: "程彬",
+    dept: "数字化管理部",
+    type: "active-user",
+    active: true,
+  },
+  { id: 2, name: "王建国", dept: "集团财务部", type: "normal", active: false },
+  { id: 3, name: "新成员", dept: "待分配部门", type: "normal", active: false },
+  { id: 4, name: "新成员", dept: "待分配部门", type: "normal", active: false },
+  { id: 5, name: "新成员", dept: "待分配部门", type: "normal", active: false },
+  { id: 6, name: "新成员", dept: "待分配部门", type: "normal", active: false },
+  { id: 7, name: "新成员", dept: "待分配部门", type: "normal", active: false },
+  { id: 8, name: "新成员", dept: "待分配部门", type: "normal", active: false },
+  { id: 9, name: "新成员", dept: "待分配部门", type: "normal", active: false },
+  { id: 10, name: "新成员", dept: "待分配部门", type: "normal", active: false },
+]);
+
+const addNewMember = () => {
+  const newId = Date.now();
+  const newMember = {
+    id: newId,
+    name: "新成员",
+    dept: "待分配部门",
+    type: "normal",
+    active: true,
+  };
+
+  memberList.value.push(newMember);
+
+  nextTick(() => {
+    if (listRef.value) {
+      listRef.value.scrollTo({
+        top: listRef.value.scrollHeight,
+        behavior: "smooth",
+      });
+    }
+  });
+};
+
+// 搜索过滤逻辑
+const filteredMembers = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase();
+  if (!query) return memberList.value;
+  return memberList.value.filter(
+    (item) =>
+      item.name.toLowerCase().includes(query) ||
+      item.dept.toLowerCase().includes(query)
+  );
+});
+
+// 移除成员方法
+const handleRemove = (id) => {
+  memberList.value = memberList.value.filter((m) => m.id !== id);
+};
+
+// 切换选中状态（模拟点击高亮）
+const selectMember = (item) => {
+  // 如果需要单选高亮，可以先重置所有 active
+  // memberList.value.forEach(m => m.active = false)
+  item.active = !item.active;
+};
+</script>
+<style lang="scss">
+.member-drawer {
+  .el-drawer__body {
+    padding: 0 !important; // 必须覆盖默认内边距
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  // 自定义头部
+  .custom-header {
+    padding: 20px 24px 15px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .title-row {
+      display: flex;
+      align-items: center;
+      .decorator {
+        width: 4px;
+        height: 16px;
+        background: #409eff;
+        border-radius: 2px;
+        margin-right: 8px;
+      }
+      .title {
+        font-size: 16px;
+        font-weight: bold;
+        flex: 1;
+      }
+      .close-icon {
+        cursor: pointer;
+        color: #909399;
+        &:hover {
+          color: #409eff;
+        }
+      }
+    }
+    .sub-title {
+      margin: 8px 0 0 12px;
+      font-size: 13px;
+      color: #909399;
+      span {
+        color: #409eff;
+      }
+    }
+  }
+
+  .drawer-body-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0; // 关键：允许子元素溢出滚动
+  }
+
+  .search-bar {
+    padding: 20px 24px;
+    display: flex;
+    gap: 12px;
+  }
+
+  .member-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 14px 20px;
+    .list-fade-enter-active,
+    .list-fade-leave-active {
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .list-fade-enter-from {
+      opacity: 0;
+      transform: translateY(-20px); // 从上方滑入
+      background-color: #ecf5ff; // 初始色可以亮一点
+    }
+
+    .list-fade-leave-to {
+      opacity: 0;
+      transform: translateX(30px); // 向侧面滑出
+    }
+
+    .member-item {
+      --mj-avatar-bg: #f2f3f5;
+      --mj-text-color: #abb0b8;
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      margin-bottom: 4px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover {
+        --mj-avatar-bg: #d1e9ff;
+        --mj-text-color: #409eff;
+        background-color: #f0f7ff;
+        .member-action {
+          opacity: 1;
+        }
+      }
+
+      .member-info {
+        flex: 1;
+        margin-left: 12px;
+        .name {
+          font-size: 14px;
+          color: #303133;
+          font-weight: 500;
+        }
+        .dept {
+          font-size: 12px;
+          color: #909399;
+          margin-top: 2px;
+        }
+      }
+
+      .member-action {
+        opacity: 0; // 默认隐藏，高亮或hover显示
+        transition: opacity 0.2s;
+      }
+    }
+  }
+
+  .el-drawer__footer {
+    border-top: 1px solid #f0f0f0;
+    padding: 16px 24px;
+
+    .drawer-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .stats-info {
+        display: flex;
+        flex-direction: column;
+        line-height: 1.4;
+        .label {
+          font-size: 12px;
+          color: #909399;
+        }
+        .count {
+          font-size: 14px;
+          color: #303133;
+          font-weight: bold;
+        }
+      }
+
+      .btn-confirm {
+        background-color: #1d2635;
+        border-color: #1d2635;
+        padding: 10px 24px;
+        &:hover {
+          background-color: #2b364a;
+          border-color: #2b364a;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/nameAvatar/index.vue

@@ -2,7 +2,11 @@
   <el-avatar
     :size="size"
     :src="src"
-    :style="{ backgroundColor: !src ? bgColor : '','--avatar-text-size':fontSize }"
+    :style="{
+      backgroundColor: !src ? bgColor : '',
+      '--avatar-text-size': fontSize,
+      '--avatar-text-color': avatarTextColor,
+    }"
     class="mj-name-avatar"
   >
     <span v-if="!src" class="avatar-text">{{ displayText }}</span>
@@ -10,16 +14,20 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-defineOptions({name: 'NameAvatar'})
+import { computed } from "vue";
+defineOptions({ name: "NameAvatar" });
 const props = defineProps({
-  name: { type: String, default: '' },
-  src: { type: String, default: '' },
-  size: { type: Number, default: 40 }
+  name: { type: String, default: "" },
+  src: { type: String, default: "" },
+  size: { type: Number, default: 40 },
+  bgColor: { type: String, default: "" },
+  avatarTextColor: { type: String, default: "" },
 });
 
+console.log(1111,props.bgColor)
+
 const displayText = computed(() => {
-  return props.name ? props.name.charAt(0) : '';
+  return props.name ? props.name.charAt(0) : "";
 });
 
 const fontSize = computed(() => {
@@ -27,18 +35,42 @@ const fontSize = computed(() => {
 });
 
 const bgColor = computed(() => {
-  if (!props.name) return '#409EFF';
+  if (!props.name) return "#409EFF";
+  if (props.bgColor) return props.bgColor;
   let hash = 0;
   for (let i = 0; i < props.name.length; i++) {
     hash = props.name.charCodeAt(i) + ((hash << 5) - hash);
   }
   const colors = [
-    '#337ecc', '#409eff', '#53a8ff', '#79bbff', '#95d475', 
-    '#eebe77', '#f89898', '#b37feb', '#ff85c0',
-    '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2',
-    '#eb2f96', '#a0d911', '#fa8c16', '#e74c3c', '#9b59b6',
-    '#1abc9c', '#34495e', '#f39c12', '#e67e22', '#3498db',
-    '#9b59b6', '#2ecc71', '#f1c40f', '#d35400', '#7f8c8d'
+    "#337ecc",
+    "#409eff",
+    "#53a8ff",
+    "#79bbff",
+    "#95d475",
+    "#eebe77",
+    "#f89898",
+    "#b37feb",
+    "#ff85c0",
+    "#52c41a",
+    "#faad14",
+    "#f5222d",
+    "#722ed1",
+    "#13c2c2",
+    "#eb2f96",
+    "#a0d911",
+    "#fa8c16",
+    "#e74c3c",
+    "#9b59b6",
+    "#1abc9c",
+    "#34495e",
+    "#f39c12",
+    "#e67e22",
+    "#3498db",
+    "#9b59b6",
+    "#2ecc71",
+    "#f1c40f",
+    "#d35400",
+    "#7f8c8d",
   ];
   return colors[Math.abs(hash) % colors.length];
 });
@@ -46,13 +78,13 @@ const bgColor = computed(() => {
 
 <style scoped lang="scss">
 .mj-name-avatar {
-  --el-avatar-bg-color:transparent;
+  --el-avatar-bg-color: transparent;
   user-select: none;
   font-weight: 500;
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   .avatar-text {
-    color: var(--el-avatar-text-color);
+    color: var(--avatar-text-color);
     font-size: var(--avatar-text-size);
     letter-spacing: -0.5px;
     line-height: 1;

src/pages/Layout/rightMenuGroup.vue

@@ -16,7 +16,7 @@
       <el-dropdown placement="bottom" trigger="click" @command="handleCommand">
         <div class="user-info">
           <div class="text-meta">
-            <span class="userinfo-username">{{ userInfo.username }}</span>
+            <span class="userinfo-username">{{ userInfo.nickname }}</span>
             <span class="userinfo-role">SUPER ADMIN</span>
           </div>
           <name-avatar :name="userInfo.nickname" :src="userInfo.avatar" :size="30" />

src/pages/stage/permission/addRoles.vue

@@ -0,0 +1,208 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="新增系统角色"
+    width="500px"
+    class="custom-role-dialog"
+    destroy-on-close
+  >
+    <el-form :model="form" label-position="top" class="role-form">
+      <div class="row-flex">
+        <el-form-item label="角色名称" required>
+          <el-input v-model="form.name" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item label="角色编码" required>
+          <el-input v-model="form.code" placeholder="ROLE_CODE" />
+        </el-form-item>
+      </div>
+
+      <el-form-item label="角色类型">
+        <el-radio-group v-model="form.type" class="full-width-radio">
+          <el-radio-button label="实例角色" />
+          <el-radio-button label="默认角色" />
+          <el-radio-button label="系统角色" />
+        </el-radio-group>
+      </el-form-item>
+
+      <div class="feature-card light-green">
+        <div class="info">
+          <div class="title">组织架构</div>
+          <div class="desc">是否将该角色与系统组织架构体系进行深度关联</div>
+        </div>
+        <el-switch v-model="form.isOrg" />
+      </div>
+
+      <el-form-item label="关联岗位">
+        <el-select
+          v-model="form.post"
+          placeholder="请选择岗位"
+          style="width: 100%"
+        >
+          <el-option label="技术总监" value="1" />
+        </el-select>
+      </el-form-item>
+
+      <div class="feature-card light-blue">
+        <div class="info">
+          <div class="title">启用状态</div>
+          <div class="desc">控制该角色及其下属权限是否立即生效</div>
+        </div>
+        <el-switch v-model="form.status" />
+      </div>
+
+      <el-form-item label="备注说明">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入备注说明..."
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确认创建</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: "addRoles" });
+const dialogVisible = defineModel('visible',{type: Boolean, default: false})
+
+const form = reactive({
+  name: "",
+  code: "",
+  type: "实例角色",
+  isOrg: false,
+  post: "",
+  status: true,
+  remark: "",
+});
+</script>
+
+<style lang="scss" scoped>
+/* 样式穿透修改 Element Plus 默认外观 */
+.custom-role-dialog {
+  border-radius: 8px;
+
+  .el-dialog__header {
+    margin-right: 0;
+    padding: 20px 24px;
+    border-bottom: 1px solid #f0f2f5;
+
+    .el-dialog__title {
+      font-size: 16px;
+      font-weight: 600;
+      position: relative;
+      padding-left: 12px;
+
+      // 标题前面的蓝色小方块
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 16px;
+        background-color: #1661ff;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .el-dialog__body {
+    padding: 24px;
+  }
+
+  // 表单标签样式
+  .el-form-item__label {
+    font-weight: 500;
+    color: #86909c;
+    margin-bottom: 8px;
+  }
+
+  // 两列布局
+  .row-flex {
+    display: flex;
+    gap: 16px;
+    .el-form-item {
+      flex: 1;
+    }
+  }
+
+  // 选项卡风格的单选框
+  .full-width-radio {
+    display: flex;
+    width: 100%;
+    background: #f2f3f5;
+    padding: 4px;
+    border-radius: 4px;
+
+    .el-radio-button {
+      flex: 1;
+      .el-radio-button__inner {
+        width: 100%;
+        border: none;
+        background: transparent;
+        box-shadow: none;
+        border-radius: 4px;
+        color: #4e5969;
+      }
+      &.is-active .el-radio-button__inner {
+        background: #fff;
+        color: #1661ff;
+        font-weight: 500;
+      }
+    }
+  }
+
+  // 绿色和蓝色的特色功能卡片
+  .feature-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-radius: 4px;
+    margin-bottom: 22px;
+
+    .info {
+      .title {
+        font-size: 14px;
+        font-weight: 600;
+        color: #1d2129;
+        margin-bottom: 4px;
+      }
+      .desc {
+        font-size: 12px;
+        color: #86909c;
+      }
+    }
+
+    &.light-green {
+      background-color: #f6fffa; // 浅绿色背景
+      border: 1px solid #e8f3ee;
+    }
+    &.light-blue {
+      background-color: #f0f7ff; // 浅蓝色背景
+      border: 1px solid #e8f0f9;
+    }
+  }
+
+  .el-dialog__footer {
+    padding: 16px 24px 24px;
+    text-align: right;
+
+    .el-button {
+      padding: 10px 24px;
+      &--primary {
+        background-color: #1661ff;
+      }
+    }
+  }
+}
+</style>

src/pages/stage/permission/index.vue

@@ -8,7 +8,7 @@
         <div class="mj-permission-actions">
           <div class="search-auto-expand-input">
             <el-input
-              placeholder="搜索字典..."
+              :placeholder="checkRolesText.placeholder"
               class="auto-expand-input"
               :prefix-icon="'Search'"
               v-model="searchVal"
@@ -16,7 +16,7 @@
             ></el-input>
           </div>
           <div class="mj-dict-actions-right">
-            <el-button :icon="'Plus'" type="primary" plain @click="addRoles">新增角色</el-button>
+            <el-button :icon="'Plus'" type="primary" plain @click="addRolesClick">{{ checkRolesText.btnText }}</el-button>
           </div>
         </div>
       </template>
@@ -31,18 +31,32 @@
       pagination
       :request-api="getTableData"
     >
+
+    <!-- 状态 -->
+     <template #status="{row}">
+      <el-tag>{{ row.status }}</el-tag>
+     </template>
     </CommonTable>
   </div>
+
+  <!-- 成员管理 -->
+   <!-- <member-selector v-model:visible="showMember" /> -->
+
+   <!-- 新增角色 -->
+    <add-roles v-model:visible="showMember" />
 </template>
 <script setup lang="ts">
 import dayjs from "dayjs";
 import CommonTable from "@/components/proTable/index.vue";
+import memberSelector from '@/components/memberSelector/index.vue';
+import addRoles from "./addRoles.vue";
 defineOptions({ name: "PermissionManagement" });
 const activeTab = ref(1);
 const dictTableRef = ref(null);
+const searchVal = ref("");
 const dataList = ref([]);
 const total = ref(0);
-
+const showMember = ref(true);
 const tabList = [
   {
     label: "角色与权限",
@@ -62,7 +76,7 @@ const columns = [
   { prop: "id", label: "编号", width: "80", align: "center", slot: "number" },
   { prop: "name", label: "字典名称", align: "center", slot: "name" },
   {
-    prop: "key",
+    prop: "number",
     label: "成员数量",
     align: "center",
   },
@@ -78,7 +92,7 @@ const columns = [
     slot: "status",
   },
   {
-    prop: "remark",
+    prop: "roleType",
     label: "角色类型",
     align: "center",
     showOverflowTooltip: true,
@@ -143,11 +157,48 @@ const columns = [
   },
 ];
 
+const getTableData = async (params) => { 
+  await new Promise(resolve => setTimeout(resolve, 500))
+  return {
+    records:[
+    {
+    id:1,
+    name:'11111',
+    number:'2222',
+    status:1,
+    key:'',
+    roleType:1,
+    remark:'',
+    createTime:1767878508824,
+    updateByName:'111'
+  }
+  ]
+  }
+};
+
+
+const checkRolesText = computed(() => {
+  const btnText = {
+    1:'新增角色',
+    2:'新增用户'
+  }[activeTab.value]
+
+  const placeholder = {
+    1:'搜索角色名称...',
+    2:'搜索用户姓名/账号...'
+  }[activeTab.value]
+
+  return {
+    btnText,
+    placeholder
+  }
+});
+
 // 请求数据信息
 const fetchTableData = () => {};
 
 // 新增角色
-const addRoles = () => {};
+const addRolesClick = () => {};
 </script>
 <style lang="scss" scoped>
 .mj-permission-management {