From 306d167a55f34234479c2a42847730222ecfcd72 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Fri, 13 Mar 2026 00:04:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=95=8C=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=87=8D=E6=9E=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                      |   5 +-
 package.json                         |   2 +-
 skills-lock.json                     |  10 +
 src/api/dict.ts                      | 126 ++++++
 src/api/menu.ts                      | 123 ++++++
 src/api/role.ts                      |   6 +-
 src/components/custom-tree/index.vue | 425 +++++++++++++++++++
 src/config/menu.ts                   |  69 ++-
 src/layouts/tabbar.vue               |  18 +-
 src/pages.json                       |  40 ++
 src/pages/index/index.vue            | 193 +++------
 src/pages/webview/index.vue          |  32 ++
 src/pages/work/config/index.vue      | 471 +++++++++------------
 src/pages/work/dept/index.vue        | 604 +++++++++++++--------------
 src/pages/work/dict/index.vue        | 255 +++++++++++
 src/pages/work/dict/item/index.vue   | 280 +++++++++++++
 src/pages/work/index.vue             |  20 +
 src/pages/work/log/index.vue         | 220 +++++-----
 src/pages/work/menu/index.vue        | 409 +++++++++++++++++-
 src/pages/work/monitor/index.vue     |  26 ++
 src/pages/work/notice/index.vue      | 590 +++++++++++++++-----------
 src/pages/work/role/assign-perm.vue  | 294 +++++++++++++
 src/pages/work/role/index.vue        | 524 ++++++++++-------------
 src/pages/work/user/index.vue        |  17 +-
 src/static/icons/api.svg             |   1 +
 src/static/icons/bell.svg            |   1 +
 src/static/icons/browser.png         | Bin 3592 -> 0 bytes
 src/static/icons/browser.svg         |   2 +-
 src/static/icons/category.svg        |   1 +
 src/static/icons/company.svg         |   1 +
 src/static/icons/dashboard.svg       |   1 +
 src/static/icons/file.svg            |   1 +
 src/static/icons/git.svg             |   1 +
 src/static/icons/log.png             | Bin 5404 -> 0 bytes
 src/static/icons/log.svg             |   1 +
 src/static/icons/more.svg            |   1 +
 src/static/icons/notice.png          | Bin 5237 -> 0 bytes
 src/static/icons/role.png            | Bin 5637 -> 0 bytes
 src/static/icons/role.svg            |   1 +
 src/static/icons/setting.png         | Bin 5628 -> 0 bytes
 src/static/icons/setting.svg         |   4 -
 src/static/icons/settings.svg        |   1 +
 src/static/icons/tree.svg            |  24 ++
 src/static/icons/user.png            | Bin 5597 -> 0 bytes
 src/static/icons/user.svg            |   1 +
 src/static/icons/visitor.png         | Bin 2318 -> 0 bytes
 src/static/icons/visitor.svg         |   2 +-
 src/styles/index.scss                |  31 +-
 src/types/auto-imports.d.ts          |   4 +
 src/types/uni-pages.d.ts             |   7 +-
 tsconfig.json                        |   4 +-
 vite.config.ts                       |   1 +
 52 files changed, 3391 insertions(+), 1459 deletions(-)
 create mode 100644 skills-lock.json
 create mode 100644 src/api/dict.ts
 create mode 100644 src/api/menu.ts
 create mode 100644 src/components/custom-tree/index.vue
 create mode 100644 src/pages/webview/index.vue
 create mode 100644 src/pages/work/dict/index.vue
 create mode 100644 src/pages/work/dict/item/index.vue
 create mode 100644 src/pages/work/monitor/index.vue
 create mode 100644 src/pages/work/role/assign-perm.vue
 create mode 100644 src/static/icons/api.svg
 create mode 100644 src/static/icons/bell.svg
 delete mode 100644 src/static/icons/browser.png
 create mode 100644 src/static/icons/category.svg
 create mode 100644 src/static/icons/company.svg
 create mode 100644 src/static/icons/dashboard.svg
 create mode 100644 src/static/icons/file.svg
 create mode 100644 src/static/icons/git.svg
 delete mode 100644 src/static/icons/log.png
 create mode 100644 src/static/icons/log.svg
 create mode 100644 src/static/icons/more.svg
 delete mode 100644 src/static/icons/notice.png
 delete mode 100644 src/static/icons/role.png
 create mode 100644 src/static/icons/role.svg
 delete mode 100644 src/static/icons/setting.png
 delete mode 100644 src/static/icons/setting.svg
 create mode 100644 src/static/icons/settings.svg
 create mode 100644 src/static/icons/tree.svg
 delete mode 100644 src/static/icons/user.png
 create mode 100644 src/static/icons/user.svg
 delete mode 100644 src/static/icons/visitor.png

diff --git a/components.d.ts b/components.d.ts
index b22f1b5..0f8c824 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,8 +8,8 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     CuDateQuery: typeof import('./src/components/cu-date-query/index.vue')['default']
-    CuPicker: typeof import('./src/components/cu-picker/index.vue')['default']
     CustomNavbar: typeof import('./src/components/custom-navbar/index.vue')['default']
+    CustomTree: typeof import('./src/components/custom-tree/index.vue')['default']
     Loading1: typeof import('./src/components/qiun-loading/loading1.vue')['default']
     Loading2: typeof import('./src/components/qiun-loading/loading2.vue')['default']
     Loading3: typeof import('./src/components/qiun-loading/loading3.vue')['default']
@@ -27,11 +27,11 @@ declare module 'vue' {
     WdCheckbox: typeof import('wot-design-uni/components/wd-checkbox/wd-checkbox.vue')['default']
     WdCollapse: typeof import('wot-design-uni/components/wd-collapse/wd-collapse.vue')['default']
     WdCollapseItem: typeof import('wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue')['default']
+    WdColPicker: typeof import('wot-design-uni/components/wd-col-picker/wd-col-picker.vue')['default']
     WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']
     WdDivider: typeof import('wot-design-uni/components/wd-divider/wd-divider.vue')['default']
     WdDropMenu: typeof import('wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue')['default']
     WdDropMenuItem: typeof import('wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue')['default']
-    WdFab: typeof import('wot-design-uni/components/wd-fab/wd-fab.vue')['default']
     WdForm: typeof import('wot-design-uni/components/wd-form/wd-form.vue')['default']
     WdFormItem: typeof import('wot-design-uni/components/wd-form-item/wd-form-item.vue')['default']
     WdGrid: typeof import('wot-design-uni/components/wd-grid/wd-grid.vue')['default']
@@ -45,7 +45,6 @@ declare module 'vue' {
     WdLoadmore: typeof import('wot-design-uni/components/wd-loadmore/wd-loadmore.vue')['default']
     WdMessageBox: typeof import('wot-design-uni/components/wd-message-box/wd-message-box.vue')['default']
     WdNotify: typeof import('wot-design-uni/components/wd-notify/wd-notify.vue')['default']
-    WdPicker: typeof import('wot-design-uni/components/wd-picker/wd-picker.vue')['default']
     WdPopup: typeof import('wot-design-uni/components/wd-popup/wd-popup.vue')['default']
     WdProgress: typeof import('wot-design-uni/components/wd-progress/wd-progress.vue')['default']
     WdRadio: typeof import('wot-design-uni/components/wd-radio/wd-radio.vue')['default']
diff --git a/package.json b/package.json
index 85bff78..5ff97b8 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "@vueuse/core": "9.13.0",
     "pinia": "^2.3.1",
     "vue": "^3.5.22",
-    "wot-design-uni": "^1.13.0"
+    "wot-design-uni": "^1.14.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
diff --git a/skills-lock.json b/skills-lock.json
new file mode 100644
index 0000000..4a3686e
--- /dev/null
+++ b/skills-lock.json
@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "skills": {
+    "wot-ui": {
+      "source": "wot-ui/wot-starter",
+      "sourceType": "github",
+      "computedHash": "b4f8b0577871b28dd12278f26961d015e378d7d4f11435599631f1ee6860c8eb"
+    }
+  }
+}
diff --git a/src/api/dict.ts b/src/api/dict.ts
new file mode 100644
index 0000000..bade754
--- /dev/null
+++ b/src/api/dict.ts
@@ -0,0 +1,126 @@
+import request from "@/utils/request";
+
+const DICT_BASE_URL = "/api/v1/dicts";
+
+const DictAPI = {
+  getPage(queryParams: DictTypePageQuery) {
+    return request<any>({
+      url: `${DICT_BASE_URL}`,
+      method: "GET",
+      data: queryParams,
+    });
+  },
+
+  getFormData(id: string | number) {
+    return request<DictTypeForm>({
+      url: `${DICT_BASE_URL}/${id}/form`,
+      method: "GET",
+    });
+  },
+
+  create(data: DictTypeForm) {
+    return request({
+      url: `${DICT_BASE_URL}`,
+      method: "POST",
+      data,
+    });
+  },
+
+  update(id: string | number, data: DictTypeForm) {
+    return request({
+      url: `${DICT_BASE_URL}/${id}`,
+      method: "PUT",
+      data,
+    });
+  },
+
+  deleteByIds(ids: string) {
+    return request({
+      url: `${DICT_BASE_URL}/${ids}`,
+      method: "DELETE",
+    });
+  },
+
+  getItemPage(dictCode: string, queryParams: DictItemPageQuery) {
+    return request<any>({
+      url: `${DICT_BASE_URL}/${dictCode}/items`,
+      method: "GET",
+      data: queryParams,
+    });
+  },
+
+  getItemFormData(dictCode: string, id: string | number) {
+    return request<DictItemForm>({
+      url: `${DICT_BASE_URL}/${dictCode}/items/${id}/form`,
+      method: "GET",
+    });
+  },
+
+  createItem(dictCode: string, data: DictItemForm) {
+    return request({
+      url: `${DICT_BASE_URL}/${dictCode}/items`,
+      method: "POST",
+      data,
+    });
+  },
+
+  updateItem(dictCode: string, id: string | number, data: DictItemForm) {
+    return request({
+      url: `${DICT_BASE_URL}/${dictCode}/items/${id}`,
+      method: "PUT",
+      data,
+    });
+  },
+
+  deleteItems(dictCode: string, ids: string) {
+    return request({
+      url: `${DICT_BASE_URL}/${dictCode}/items/${ids}`,
+      method: "DELETE",
+    });
+  },
+};
+
+export default DictAPI;
+
+export interface DictTypePageQuery extends PageQuery {
+  keywords?: string;
+  status?: number;
+}
+
+export interface DictTypeForm {
+  id?: string;
+  name?: string;
+  dictCode?: string;
+  status?: number;
+  remark?: string;
+}
+
+export interface DictTypePageVO {
+  id?: string;
+  name?: string;
+  dictCode?: string;
+  status?: number;
+  remark?: string;
+}
+
+export interface DictItemPageQuery extends PageQuery {
+  keywords?: string;
+}
+
+export interface DictItemForm {
+  id?: string;
+  dictCode?: string;
+  label?: string;
+  value?: string;
+  sort?: number;
+  status?: number;
+}
+
+export interface DictItemPageVO {
+  id?: string;
+  dictCode?: string;
+  label?: string;
+  value?: string;
+  sort?: number;
+  status?: number;
+}
diff --git a/src/api/menu.ts b/src/api/menu.ts
new file mode 100644
index 0000000..8293a95
--- /dev/null
+++ b/src/api/menu.ts
@@ -0,0 +1,123 @@
+import request from "@/utils/request";
+
+const MENU_BASE_URL = "/api/v1/menus";
+
+const MenuAPI = {
+  /** 获取菜单列表 */
+  getList(queryParams?: MenuQuery) {
+    return request<MenuVO[]>({
+      url: `${MENU_BASE_URL}`,
+      method: "GET",
+      data: queryParams,
+    });
+  },
+
+  /** 获取菜单下拉选项 */
+  getOptions(includeButton = false) {
+    return request<OptionType[]>({
+      url: `${MENU_BASE_URL}/options`,
+      method: "GET",
+      data: { includeButton },
+    });
+  },
+
+  /** 获取菜单表单数据 */
+  getFormData(id: string) {
+    return request<MenuForm>({
+      url: `${MENU_BASE_URL}/${id}/form`,
+      method: "GET",
+    });
+  },
+
+  /** 新增菜单 */
+  add(data: MenuForm) {
+    return request({
+      url: `${MENU_BASE_URL}`,
+      method: "POST",
+      data,
+    });
+  },
+
+  /** 修改菜单 */
+  update(id: string, data: MenuForm) {
+    return request({
+      url: `${MENU_BASE_URL}/${id}`,
+      method: "PUT",
+      data,
+    });
+  },
+
+  /** 删除菜单 */
+  deleteById(id: string) {
+    return request({
+      url: `${MENU_BASE_URL}/${id}`,
+      method: "DELETE",
+    });
+  },
+};
+
+export default MenuAPI;
+
+/** 菜单查询参数 */
+export interface MenuQuery {
+  /** 搜索关键字 */
+  keywords?: string;
+  /** 状态 */
+  visible?: number;
+}
+
+/** 菜单类型 */
+export interface MenuVO {
+  /** 子菜单 */
+  children?: MenuVO[];
+  /** 组件路径 */
+  component?: string;
+  /** 创建时间 */
+  createTime?: Date;
+  /** 图标 */
+  icon?: string;
+  /** 菜单ID */
+  id?: string;
+  /** 菜单名称 */
+  name?: string;
+  /** 父菜单ID */
+  parentId?: string;
+  /** 权限标识 */
+  perm?: string;
+  /** 路由名称 */
+  routeName?: string;
+  /** 路由路径 */
+  routePath?: string;
+  /** 排序 */
+  sort?: number;
+  /** 状态(1:显示；0:隐藏) */
+  visible?: number;
+  /** 菜单类型(C:目录；M:菜单；B:按钮) */
+  type?: string | number;
+}
+
+/** 菜单表单类型 */
+export interface MenuForm {
+  /** 菜单ID(新增不填) */
+  id?: string;
+  /** 菜单名称 */
+  name?: string;
+  /** 父菜单ID */
+  parentId: string;
+  /** 菜单类型(C:目录；M:菜单；B:按钮) */
+  type: string | number;
+  /** 路由名称 */
+  routeName?: string;
+  /** 路由路径 */
+  routePath?: string;
+  /** 组件路径 */
+  component?: string;
+  /** 权限标识 */
+  perm?: string;
+  /** 图标 */
+  icon?: string;
+  /** 排序 */
+  sort?: number;
+  /** 状态(1:显示；0:隐藏) */
+  visible?: number;
+}
diff --git a/src/api/role.ts b/src/api/role.ts
index f4e7ea0..b18fda6 100644
--- a/src/api/role.ts
+++ b/src/api/role.ts
@@ -28,7 +28,7 @@ const RoleAPI = {
    */
   getRoleMenuIds(roleId: number) {
     return request<number[]>({
-      url: `${ROLE_BASE_URL}/${roleId}/menuIds`,
+      url: `${ROLE_BASE_URL}/${roleId}/menu-ids`,
       method: "GET",
     });
   },
@@ -116,6 +116,10 @@ export interface RolePageVO {
   sort?: number;
   /** 角色状态 */
   status?: number;
+  /** 数据权限(1-所有数据 2-部门及子部门数据 3-本部门数据 4-本人数据 5-自定义部门数据) */
+  dataScope?: number;
+  /** 数据权限标签 */
+  dataScopeLabel?: string;
   /** 创建时间 */
   createTime?: string;
   /** 修改时间 */
diff --git a/src/components/custom-tree/index.vue b/src/components/custom-tree/index.vue
new file mode 100644
index 0000000..6e339bc
--- /dev/null
+++ b/src/components/custom-tree/index.vue
@@ -0,0 +1,425 @@
+<template>
+  <view class="custom-tree">
+    <view v-for="item in flatNodes" :key="item.value" class="custom-tree-node">
+      <view
+        class="custom-tree-node__content"
+        :style="{ paddingLeft: item.level * 32 + 24 + 'rpx' }"
+        @click="handleNodeClick(item)"
+      >
+        <!-- 展开/收起图标 -->
+        <view class="custom-tree-node__expand" @click.stop="handleExpand(item)">
+          <wd-icon
+            v-if="item.hasChildren"
+            :name="isExpanded(item.value) ? 'arrow-down' : 'arrow-right'"
+            size="14"
+            class="custom-tree-node__arrow"
+            :class="{ 'custom-tree-node__arrow--expanded': isExpanded(item.value) }"
+          />
+          <view v-else class="custom-tree-node__expand-placeholder" />
+        </view>
+
+        <!-- 多选框 -->
+        <view v-if="checkable" class="custom-tree-node__checkbox" @click.stop="handleCheck(item)">
+          <wd-checkbox
+            :model-value="isChecked(item.value)"
+            :indeterminate="isIndeterminate(item.value)"
+            :disabled="item.disabled"
+            shape="square"
+          />
+        </view>
+
+        <!-- 内容插槽 -->
+        <slot
+          name="content"
+          :node="item.raw"
+          :level="item.level"
+          :expanded="isExpanded(item.value)"
+          :selected="isSelected(item.value)"
+          :checked="isChecked(item.value)"
+          :indeterminate="isIndeterminate(item.value)"
+        >
+          <view class="custom-tree-node__label-wrapper">
+            <wd-icon
+              v-if="item.hasChildren"
+              name="folder"
+              size="18"
+              :color="
+                isExpanded(item.value) ? 'var(--color-primary)' : 'var(--color-text-secondary)'
+              "
+            />
+            <wd-icon v-else name="file" size="16" class="color-text-secondary" />
+            <text class="custom-tree-node__label">{{ item.label }}</text>
+          </view>
+        </slot>
+
+        <!-- 操作按钮 -->
+        <slot name="action" :node="item.raw" :level="item.level">
+          <view
+            v-if="showAction"
+            class="custom-tree-node__action"
+            @click.stop="handleNodeAction(item)"
+          >
+            <wd-icon name="more" size="16" class="color-text-secondary" />
+          </view>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch } from "vue";
+
+export interface TreeOption {
+  [key: string]: any;
+  value: string;
+  label: string;
+  children?: TreeOption[];
+}
+
+interface FlatNode extends TreeOption {
+  level: number;
+  hasChildren: boolean;
+  raw: TreeOption;
+}
+
+interface Props {
+  /** 树形数据源 */
+  data?: TreeOption[];
+  /** 节点值的字段名 */
+  valueKey?: string;
+  /** 节点标签的字段名 */
+  labelKey?: string;
+  /** 子节点的字段名 */
+  childrenKey?: string;
+  /** 默认展开的节点 key 数组 */
+  defaultExpandedKeys?: string[];
+  /** 默认选中的节点 key 数组（单选模式） */
+  defaultSelectedKeys?: string[];
+  /** 是否可单选 */
+  selectable?: boolean;
+  /** 是否默认展开所有节点 */
+  defaultExpandAll?: boolean;
+  /** 是否显示操作按钮区域 */
+  showAction?: boolean;
+  /** 是否开启多选 */
+  checkable?: boolean;
+  /** 选中的节点 key 数组（多选模式） */
+  checkedKeys?: string[];
+  /** 父子节点是否不联动（默认联动） */
+  checkStrictly?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => [],
+  valueKey: "value",
+  labelKey: "label",
+  childrenKey: "children",
+  defaultExpandedKeys: () => [],
+  defaultSelectedKeys: () => [],
+  selectable: false,
+  defaultExpandAll: false,
+  showAction: false,
+  checkable: false,
+  checkedKeys: () => [],
+  checkStrictly: false,
+});
+
+const emit = defineEmits<{
+  /** 点击节点时触发 */
+  (_e: "click", _node: TreeOption): void;
+  /** 单选选中时触发 */
+  (_e: "select", _node: TreeOption, _selected: boolean): void;
+  /** 展开/收起节点时触发 */
+  (_e: "expand", _node: TreeOption, _expanded: boolean): void;
+  /** 点击操作按钮时触发 */
+  (_e: "action", _node: TreeOption): void;
+  /** 多选选中变化时触发 */
+  (_e: "check", _checkedKeys: string[], _info: { checked: boolean; node: TreeOption }): void;
+}>();
+
+/** 展开的节点 key 集合 */
+const expandedKeys = ref<Set<string>>(new Set(props.defaultExpandedKeys));
+/** 选中的节点 key 集合（单选模式） */
+const selectedKeys = ref<Set<string>>(new Set(props.defaultSelectedKeys));
+/** 选中的节点 key 集合（多选模式，内部维护） */
+const internalCheckedKeys = ref<Set<string>>(new Set(props.checkedKeys));
+
+// 监听外部 checkedKeys 变化
+watch(
+  () => props.checkedKeys,
+  (keys) => {
+    internalCheckedKeys.value = new Set(keys);
+  },
+  { immediate: true }
+);
+
+/** 扁平化树结构，根据展开状态计算可见节点 */
+const flatNodes = computed(() => {
+  const result: FlatNode[] = [];
+  function traverse(nodes: TreeOption[], level: number) {
+    for (const node of nodes) {
+      const children = node[props.childrenKey] as TreeOption[] | undefined;
+      result.push({
+        ...node,
+        value: String(node[props.valueKey]),
+        label: node[props.labelKey],
+        level,
+        hasChildren: !!(children && children.length > 0),
+        raw: node,
+      });
+      if (children && children.length > 0 && expandedKeys.value.has(String(node[props.valueKey]))) {
+        traverse(children, level + 1);
+      }
+    }
+  }
+  traverse(props.data, 0);
+  return result;
+});
+
+/** 判断节点是否展开 */
+function isExpanded(value: string) {
+  return expandedKeys.value.has(value);
+}
+
+/** 判断节点是否选中（单选模式） */
+function isSelected(value: string) {
+  return selectedKeys.value.has(value);
+}
+
+/** 处理节点点击 */
+function handleNodeClick(node: FlatNode) {
+  emit("click", node.raw);
+}
+
+/** 处理节点展开/收起 */
+function handleExpand(node: FlatNode) {
+  if (!node.hasChildren) return;
+  const value = node.value;
+  const next = new Set(expandedKeys.value);
+  if (next.has(value)) {
+    next.delete(value);
+  } else {
+    next.add(value);
+  }
+  expandedKeys.value = next;
+  emit("expand", node.raw, next.has(value));
+}
+
+/** 处理操作按钮点击 */
+function handleNodeAction(node: FlatNode) {
+  emit("action", node.raw);
+}
+
+// ===== 多选相关 =====
+
+/** 判断节点是否选中（多选模式） */
+function isChecked(value: string) {
+  return internalCheckedKeys.value.has(value);
+}
+
+/** 判断是否半选状态（部分子节点选中） */
+function isIndeterminate(value: string) {
+  if (props.checkStrictly) return false;
+  const node = findNodeByValue(value, props.data);
+  if (!node) return false;
+  const children = node[props.childrenKey] as TreeOption[] | undefined;
+  if (!children || children.length === 0) return false;
+
+  const childValues = getAllChildValues(children);
+  if (childValues.length === 0) return false;
+
+  const checkedCount = childValues.filter((v) => internalCheckedKeys.value.has(v)).length;
+  return checkedCount > 0 && checkedCount < childValues.length;
+}
+
+/** 根据 value 查找节点 */
+function findNodeByValue(value: string, nodes: TreeOption[]): TreeOption | null {
+  for (const node of nodes) {
+    if (String(node[props.valueKey]) === value) return node;
+    const children = node[props.childrenKey] as TreeOption[] | undefined;
+    if (children) {
+      const found = findNodeByValue(value, children);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/** 获取所有子节点的 value 数组 */
+function getAllChildValues(nodes: TreeOption[]): string[] {
+  const result: string[] = [];
+  function traverse(list: TreeOption[]) {
+    for (const node of list) {
+      result.push(String(node[props.valueKey]));
+      const children = node[props.childrenKey] as TreeOption[] | undefined;
+      if (children) traverse(children);
+    }
+  }
+  traverse(nodes);
+  return result;
+}
+
+/** 获取所有父节点的 value 数组 */
+function getAllParentValues(value: string, nodes: TreeOption[], parents: string[] = []): string[] {
+  for (const node of nodes) {
+    const nodeValue = String(node[props.valueKey]);
+    if (nodeValue === value) return parents;
+    const children = node[props.childrenKey] as TreeOption[] | undefined;
+    if (children) {
+      const found = getAllParentValues(value, children, [...parents, nodeValue]);
+      if (found.length > 0) return found;
+    }
+  }
+  return [];
+}
+
+/** 处理多选选中状态变化 */
+function handleCheck(node: FlatNode) {
+  const value = node.value;
+  const checked = !internalCheckedKeys.value.has(value);
+  const newCheckedKeys = new Set(internalCheckedKeys.value);
+
+  if (checked) {
+    newCheckedKeys.add(value);
+  } else {
+    newCheckedKeys.delete(value);
+  }
+
+  // 父子联动
+  if (!props.checkStrictly) {
+    const children = node.raw[props.childrenKey] as TreeOption[] | undefined;
+    // 选中/取消选中所有子节点
+    if (children && children.length > 0) {
+      const childValues = getAllChildValues(children);
+      for (const childValue of childValues) {
+        if (checked) {
+          newCheckedKeys.add(childValue);
+        } else {
+          newCheckedKeys.delete(childValue);
+        }
+      }
+    }
+
+    // 更新父节点状态
+    const parentValues = getAllParentValues(value, props.data);
+    for (const parentValue of parentValues) {
+      const parentNode = findNodeByValue(parentValue, props.data);
+      if (parentNode) {
+        const parentChildren = parentNode[props.childrenKey] as TreeOption[] | undefined;
+        if (parentChildren && parentChildren.length > 0) {
+          const parentChildValues = getAllChildValues(parentChildren);
+          const allChecked = parentChildValues.every((v) => newCheckedKeys.has(v));
+          if (allChecked) {
+            newCheckedKeys.add(parentValue);
+          } else {
+            newCheckedKeys.delete(parentValue);
+          }
+        }
+      }
+    }
+  }
+
+  internalCheckedKeys.value = newCheckedKeys;
+  emit("check", Array.from(newCheckedKeys), { checked, node: node.raw });
+}
+
+/** 监听数据变化，默认展开全部 */
+watch(
+  () => props.data,
+  (data) => {
+    if (props.defaultExpandAll && data.length > 0) {
+      const allValues: string[] = [];
+      function getAll(nodes: TreeOption[]) {
+        for (const node of nodes) {
+          const children = node[props.childrenKey] as TreeOption[] | undefined;
+          allValues.push(String(node[props.valueKey]));
+          if (children && children.length > 0) {
+            getAll(children);
+          }
+        }
+      }
+      getAll(data);
+      expandedKeys.value = new Set(allValues);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.custom-tree {
+  background: var(--color-bg);
+}
+
+.custom-tree-node {
+  &__content {
+    display: flex;
+    align-items: center;
+    min-height: 88rpx;
+    padding-right: 24rpx;
+    background: var(--color-bg);
+    border-bottom: 2rpx solid var(--color-border-light);
+
+    &:active {
+      background: var(--color-bg-secondary);
+    }
+  }
+
+  &__expand {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 48rpx;
+    height: 48rpx;
+  }
+
+  &__expand-placeholder {
+    width: 48rpx;
+    height: 48rpx;
+  }
+
+  &__checkbox {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    margin-right: 8rpx;
+  }
+
+  &__arrow {
+    color: var(--color-text-secondary);
+    transition: transform 0.2s ease;
+
+    &--expanded {
+      transform: rotate(90deg);
+    }
+  }
+
+  &__label-wrapper {
+    display: flex;
+    flex: 1;
+    gap: 16rpx;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &__label {
+    flex: 1;
+    overflow: hidden;
+    font-size: 28rpx;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: 50%;
+  }
+}
+</style>
diff --git a/src/config/menu.ts b/src/config/menu.ts
index 59b257e..3f67238 100644
--- a/src/config/menu.ts
+++ b/src/config/menu.ts
@@ -19,40 +19,93 @@ export const menuConfig: WorkMenuGroup[] = [
     title: "系统管理",
     children: [
       {
-        icon: "/static/icons/user.png",
+        icon: "/static/icons/user.svg",
         title: "用户管理",
         url: "/pages/work/user/index",
         perm: "sys:user:list",
       },
       {
-        icon: "/static/icons/role.png",
+        icon: "/static/icons/role.svg",
         title: "角色管理",
         url: "/pages/work/role/index",
         perm: "sys:role:list",
       },
       {
-        icon: "/static/icons/notice.png",
-        title: "通知公告",
-        url: "/pages/work/notice/index",
-        perm: "sys:notice:list",
+        icon: "/static/icons/company.svg",
+        title: "部门管理",
+        url: "/pages/work/dept/index",
+        perm: "sys:dept:list",
       },
       {
-        icon: "/static/icons/setting.png",
+        icon: "/static/icons/settings.svg",
         title: "系统配置",
         url: "/pages/work/config/index",
         perm: "sys:config:list",
       },
+      {
+        icon: "/static/icons/file.svg",
+        title: "字典管理",
+        url: "/pages/work/dict/index",
+        perm: "sys:dict:list",
+      },
+      {
+        icon: "/static/icons/tree.svg",
+        title: "菜单管理",
+        url: "/pages/work/menu/index",
+        perm: "sys:menu:list",
+      },
+      {
+        icon: "/static/icons/bell.svg",
+        title: "通知公告",
+        url: "/pages/work/notice/index",
+        perm: "sys:notice:list",
+      },
     ],
   },
   {
     title: "系统监控",
     children: [
       {
-        icon: "/static/icons/log.png",
+        icon: "/static/icons/log.svg",
         title: "系统日志",
         url: "/pages/work/log/index",
         perm: "sys:log:list",
       },
+      {
+        icon: "/static/icons/dashboard.svg",
+        title: "应用监控",
+        url: "https://www.baidu.com",
+        perm: "",
+      },
+    ],
+  },
+  {
+    title: "项目链接",
+    children: [
+      {
+        icon: "/static/icons/company.svg",
+        title: "官网",
+        url: "https://www.youlai.tech/",
+        perm: "",
+      },
+      {
+        icon: "/static/icons/file.svg",
+        title: "文档",
+        url: "https://youlai.blog.csdn.net/article/details/143222890",
+        perm: "",
+      },
+      {
+        icon: "/static/icons/api.svg",
+        title: "接口",
+        url: "https://youlai.apifox.cn/",
+        perm: "",
+      },
+      {
+        icon: "/static/icons/git.svg",
+        title: "仓库",
+        url: "https://atomgit.com/youlai/youlai-app",
+        perm: "",
+      },
     ],
   },
 ];
diff --git a/src/layouts/tabbar.vue b/src/layouts/tabbar.vue
index 184cbbd..5cd071d 100644
--- a/src/layouts/tabbar.vue
+++ b/src/layouts/tabbar.vue
@@ -4,7 +4,7 @@
     :custom-class="`page-wraper ${theme}`"
     :theme="theme"
     :style="{
-      '--status-bar-height': statusBarHeight + 'px',
+                      '--status-bar-height': statusBarHeight + 'px',
     }"
   >
     <slot />
@@ -51,6 +51,17 @@ function handleTabbarChange({ value }: { value: string }) {
   router.pushTab({ name: value });
 }
 
+// 监听路由变化更新 tabbar 激活状态
+watch(
+  () => route.name,
+  (name) => {
+    if (name && name !== activeTabbar.value.name) {
+      setTabbarItemActive(name);
+    }
+  },
+  { immediate: true }
+);
+
 onMounted(() => {
   const systemInfo = uni.getSystemInfoSync();
   statusBarHeight.value = systemInfo.statusBarHeight || 0;
@@ -58,11 +69,6 @@ onMounted(() => {
   // #ifdef APP-PLUS
   uni.hideTabBar();
   // #endif
-  nextTick(() => {
-    if (route.name && route.name !== activeTabbar.value.name) {
-      setTabbarItemActive(route.name);
-    }
-  });
 });
 </script>
 
diff --git a/src/pages.json b/src/pages.json
index 427acf4..6ee3c03 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -27,6 +27,14 @@
       },
       "layout": "tabbar"
     },
+    {
+      "path": "pages/webview/index",
+      "type": "page",
+      "name": "webview",
+      "style": {
+        "navigationBarTitleText": "网页"
+      }
+    },
     {
       "path": "pages/work/index",
       "type": "page",
@@ -95,6 +103,14 @@
         "navigationBarTitleText": "部门管理"
       }
     },
+    {
+      "path": "pages/work/dict/index",
+      "type": "page",
+      "name": "dict",
+      "style": {
+        "navigationBarTitleText": "字典管理"
+      }
+    },
     {
       "path": "pages/work/log/index",
       "type": "page",
@@ -111,6 +127,14 @@
         "navigationBarTitleText": "菜单管理"
       }
     },
+    {
+      "path": "pages/work/monitor/index",
+      "type": "page",
+      "name": "monitor",
+      "style": {
+        "navigationBarTitleText": "应用监控"
+      }
+    },
     {
       "path": "pages/work/notice/index",
       "type": "page",
@@ -119,6 +143,14 @@
         "navigationBarTitleText": "通知公告"
       }
     },
+    {
+      "path": "pages/work/role/assign-perm",
+      "type": "page",
+      "name": "role-assign-perm",
+      "style": {
+        "navigationBarTitleText": "分配权限"
+      }
+    },
     {
       "path": "pages/work/role/index",
       "type": "page",
@@ -162,6 +194,14 @@
       "style": {
         "navigationBarTitleText": "主题设置"
       }
+    },
+    {
+      "path": "pages/work/dict/item/index",
+      "type": "page",
+      "name": "dict-item",
+      "style": {
+        "navigationBarTitleText": "字典数据"
+      }
     }
   ],
   "globalStyle": {
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 5f456a3..6708813 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -45,9 +45,7 @@
     <view class="section">
       <view class="stat-grid">
         <view class="stat-card stat-card--green">
-          <view class="stat-card__bg">
-            <view class="stat-card__icon stat-card__icon--user"></view>
-          </view>
+          <image class="stat-card__bg" src="/static/icons/visitor.svg" mode="aspectFit" />
           <view class="stat-card__head">
             <text class="stat-card__label">访客数</text>
             <view class="stat-card__dot stat-card__dot--green"></view>
@@ -57,9 +55,7 @@
           </text>
         </view>
         <view class="stat-card stat-card--blue">
-          <view class="stat-card__bg">
-            <view class="stat-card__icon stat-card__icon--eye"></view>
-          </view>
+          <image class="stat-card__bg" src="/static/icons/browser.svg" mode="aspectFit" />
           <view class="stat-card__head">
             <text class="stat-card__label">浏览量</text>
             <view class="stat-card__dot stat-card__dot--blue"></view>
@@ -69,9 +65,6 @@
           </text>
         </view>
         <view v-if="appVersion" class="stat-card stat-card--orange stat-card--full">
-          <view class="stat-card__bg">
-            <view class="stat-card__icon stat-card__icon--gear"></view>
-          </view>
           <view class="stat-card__head">
             <text class="stat-card__label">应用版本</text>
             <view class="stat-card__dot stat-card__dot--orange"></view>
@@ -108,23 +101,6 @@
 </template>
 
 <script setup lang="ts">
-/**
- * 首页
- *
- * 功能说明：
- * - 自定义导航栏（搜索框）
- * - 轮播图展示
- * - 快捷导航入口
- * - 通知公告
- * - 数据统计
- * - 访问趋势图表
- *
- * 技术要点：
- * - 使用 useNavbar 处理自定义导航栏高度和胶囊避让;
- * - 使用 BEM 命名规范组织 CSS
- * - 支持暗黑模式（通过 CSS 变量）
- */
-
 import { computed, ref } from "vue";
 import { onReady } from "@dcloudio/uni-app";
 import { dayjs } from "wot-design-uni";
@@ -264,7 +240,6 @@ const chartOpts = ref({
 
 function loadAppVersion() {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const p: any = (globalThis as any).plus;
     if (p?.runtime?.version) {
       appVersion.value = `v${p.runtime.version}`;
@@ -298,7 +273,9 @@ async function loadVisitStatsData() {
 
 async function loadVisitTrendData() {
   const endDate = dayjs().format("YYYY-MM-DD");
-  const startDate = dayjs().subtract(recentDaysRange.value - 1, "day").format("YYYY-MM-DD");
+  const startDate = dayjs()
+    .subtract(recentDaysRange.value - 1, "day")
+    .format("YYYY-MM-DD");
 
   try {
     const data: VisitTrendVO = await LogAPI.getVisitTrend({ startDate, endDate });
@@ -329,6 +306,22 @@ function handleNavClick(item: NavItem) {
   // 已登录但访问受限时，仍做一次登录校验（防 token 过期）
   if (!checkLogin()) return;
 
+  // 外部链接处理
+  if (item.url.startsWith("http://") || item.url.startsWith("https://")) {
+    const isH5 = typeof window !== "undefined";
+    if (isH5) {
+      uni.navigateTo({ url: `/pages/webview/index?url=${encodeURIComponent(item.url)}` });
+    } else {
+      try {
+        const p = (globalThis as any).plus;
+        p?.runtime?.openURL(item.url);
+      } catch {
+        uni.navigateTo({ url: `/pages/webview/index?url=${encodeURIComponent(item.url)}` });
+      }
+    }
+    return;
+  }
+
   router.push({ path: item.url });
 }
 
@@ -370,36 +363,32 @@ onReady(() => {
 </route>
 
 <style lang="scss" scoped>
-// ============================================================================
-// 轮播图
-// ============================================================================
-
 .hero {
   position: relative;
 }
 
 .hero::after {
-  content: "";
   position: absolute;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
+  z-index: 1;
   height: 120rpx;
+  pointer-events: none;
+  content: "";
   background: linear-gradient(
     to bottom,
     rgba(245, 247, 250, 0) 0%,
     rgba(245, 247, 250, 0.85) 60%,
     rgba(245, 247, 250, 1) 100%
   );
-  pointer-events: none;
-  z-index: 1;
 }
 
 :deep(.swiper-box) {
   height: 420rpx;
   overflow: hidden;
-  border-bottom-left-radius: 32rpx;
   border-bottom-right-radius: 32rpx;
+  border-bottom-left-radius: 32rpx;
 }
 
 :deep(.swiper-box .wd-swiper__item),
@@ -407,10 +396,6 @@ onReady(() => {
   height: 420rpx;
 }
 
-// ============================================================================
-// 导航栏
-// ============================================================================
-
 .navbar {
   position: fixed;
   top: 0;
@@ -451,10 +436,6 @@ onReady(() => {
   }
 }
 
-// ============================================================================
-// 区块
-// ============================================================================
-
 .section {
   margin: 24rpx;
 }
@@ -462,17 +443,13 @@ onReady(() => {
 .section--overlay {
   position: relative;
   z-index: 2;
-  margin-top: -140rpx;
   padding: 18rpx 8rpx;
+  margin-top: -140rpx;
   background: var(--color-bg);
   border-radius: 24rpx;
   box-shadow: 0 16rpx 36rpx rgba(0, 0, 0, 0.08);
 }
 
-// ============================================================================
-// 快捷导航项
-// ============================================================================
-
 .nav-item {
   display: flex;
   flex-direction: column;
@@ -492,29 +469,25 @@ onReady(() => {
   }
 }
 
-// ============================================================================
-// 通知栏
-// ============================================================================
-
 .notice-bar {
   display: flex;
   align-items: center;
-  background: #fff;
-  border-radius: 16rpx;
   padding: 24rpx 24rpx 24rpx 20rpx;
+  background: #fff;
   border: 1rpx solid rgba(0, 0, 0, 0.04);
+  border-radius: 16rpx;
   box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
 
   &__icon {
-    flex-shrink: 0;
-    width: 48rpx;
-    height: 48rpx;
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
+    width: 48rpx;
+    height: 48rpx;
+    margin-right: 16rpx;
     background: rgba(52, 209, 157, 0.1);
     border-radius: 12rpx;
-    margin-right: 16rpx;
   }
 
   &__content {
@@ -523,21 +496,17 @@ onReady(() => {
   }
 
   &__text {
-    font-size: 26rpx;
-    color: #333;
-    font-weight: 500;
     display: -webkit-box;
-    line-clamp: 1;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
     overflow: hidden;
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #333;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
   }
 }
 
-// ============================================================================
-// 统计卡片（简洁大气风格）
-// ============================================================================
-
 .stat-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -545,55 +514,16 @@ onReady(() => {
 }
 
 .stat-card {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx 20rpx;
+  position: relative;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
-  border: 1rpx solid rgba(0, 0, 0, 0.04);
-  position: relative;
+  padding: 24rpx 20rpx;
   overflow: hidden;
+  background: #fff;
+  border: 1rpx solid rgba(0, 0, 0, 0.04);
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
 
-  // 背景图标容器
-  &__bg {
-    position: absolute;
-    right: 12rpx;
-    bottom: 12rpx;
-    width: 70rpx;
-    height: 70rpx;
-    opacity: 0.08;
-    pointer-events: none;
-  }
-
-  // SVG 装饰图形
-  &__icon {
-    width: 100%;
-    height: 100%;
-
-    // 用户组图标 - 访客数
-    &--user {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%232ab789'%3E%3Ccircle cx='24' cy='16' r='8'/%3E%3Ccircle cx='10' cy='20' r='6'/%3E%3Ccircle cx='38' cy='20' r='6'/%3E%3Cpath d='M24 28c-8 0-14 4-14 8v6h28v-6c0-4-6-8-14-8z'/%3E%3Cpath d='M10 28c-4 0-8 2-8 5v5h8v-5c0-2 1-4 3-5-1 0-2 0-3 0z'/%3E%3Cpath d='M38 28c4 0 8 2 8 5v5h-8v-5c0-2-1-4-3-5 1 0 2 0 3 0z'/%3E%3C/svg%3E");
-      background-size: contain;
-      background-repeat: no-repeat;
-    }
-
-    // 图表图标 - 浏览量
-    &--eye {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%233a8ee6'%3E%3Crect x='4' y='24' width='8' height='20' rx='2'/%3E%3Crect x='16' y='14' width='8' height='30' rx='2'/%3E%3Crect x='28' y='20' width='8' height='24' rx='2'/%3E%3Crect x='40' y='8' width='8' height='36' rx='2'/%3E%3C/svg%3E");
-      background-size: contain;
-      background-repeat: no-repeat;
-    }
-
-    // 盾牌徽章图标 - 版本
-    &--gear {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23e8a838'%3E%3Cpath d='M24 4L8 10v12c0 11 8 18 16 22 8-4 16-11 16-22V10L24 4z'/%3E%3Cpath d='M20 24l4 4 8-8' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-      background-size: contain;
-      background-repeat: no-repeat;
-    }
-  }
-
-  // 彩色卡片变体
   &--green {
     background: linear-gradient(135deg, #f0fdf9 0%, #fff 100%);
   }
@@ -606,19 +536,28 @@ onReady(() => {
     background: linear-gradient(135deg, #fffbf0 0%, #fff 100%);
   }
 
+  &__bg {
+    position: absolute;
+    right: -10rpx;
+    bottom: -10rpx;
+    width: 100rpx;
+    height: 100rpx;
+    opacity: 0.15;
+  }
+
   &__head {
+    position: relative;
+    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16rpx;
-    position: relative;
-    z-index: 1;
   }
 
   &__label {
     font-size: 24rpx;
-    color: #999;
     font-weight: 500;
+    color: #999;
   }
 
   &__dot {
@@ -643,12 +582,12 @@ onReady(() => {
   }
 
   &__num {
+    position: relative;
+    z-index: 1;
     font-size: 48rpx;
     font-weight: 700;
     line-height: 1;
     letter-spacing: -1rpx;
-    position: relative;
-    z-index: 1;
 
     &--green {
       color: #2ab789;
@@ -667,8 +606,8 @@ onReady(() => {
   }
 
   &--full {
-    grid-column: 1 / -1;
     flex-direction: row;
+    grid-column: 1 / -1;
     align-items: center;
     justify-content: space-between;
     padding: 20rpx 20rpx;
@@ -681,21 +620,9 @@ onReady(() => {
       font-size: 28rpx;
       letter-spacing: 0;
     }
-
-    .stat-card__bg {
-      width: 50rpx;
-      height: 50rpx;
-      right: 16rpx;
-      bottom: 50%;
-      transform: translateY(50%);
-    }
   }
 }
 
-// ============================================================================
-// 图表
-// ============================================================================
-
 .chart-header {
   display: flex;
   align-items: center;
diff --git a/src/pages/webview/index.vue b/src/pages/webview/index.vue
new file mode 100644
index 0000000..aed502c
--- /dev/null
+++ b/src/pages/webview/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <view class="page">
+    <web-view :src="url" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+
+const url = ref("");
+
+onLoad((query: any) => {
+  if (query.url) {
+    url.value = decodeURIComponent(query.url);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+  width: 100%;
+  height: 100vh;
+}
+</style>
+
+<route lang="json">
+{
+  "name": "webview",
+  "style": { "navigationBarTitleText": "网页" }
+}
+</route>
diff --git a/src/pages/work/config/index.vue b/src/pages/work/config/index.vue
index d740c84..bb6820f 100644
--- a/src/pages/work/config/index.vue
+++ b/src/pages/work/config/index.vue
@@ -1,298 +1,240 @@
 <template>
-  <view class="work">
-    <!-- 筛选 -->
-    <wd-drop-menu close-on-click-modal class="mb-20rpx mr-20rpx ml-20rpx">
-      <wd-drop-menu-item ref="dropMenu" title="筛选" icon="filter" icon-size="18px">
-        <view>
-          <wd-input
-            v-model="queryParams.keywords"
-            label="关键字"
-            type="text"
-            clearable
-            placeholder="请输入关键字"
-          />
-          <view class="flex flex-row items-center mb-20rpx">
-            <wd-button class="mt-20rpx mb-20rpx" size="medium" @click="handleQuery()">
-              查询
-            </wd-button>
-            <wd-button size="medium" type="info" @click="handleReset">重置</wd-button>
+  <view class="page page--padding page--pt">
+    <view>
+      <wd-search
+        v-model="queryParams.keywords"
+        placeholder="搜索配置名称/键名"
+        hide-cancel
+        @search="handleSearch"
+      />
+    </view>
+
+    <view class="mt-16rpx">
+      <wd-card
+        v-for="item in pageData"
+        :key="item.id"
+        custom-class="item-card"
+        @click="openConfigDialog(item.id)"
+      >
+        <view class="flex-between">
+          <text class="font-bold text-32rpx">{{ item.configName }}</text>
+          <view
+            class="w-88rpx h-88rpx flex-center rounded-full"
+            hover-class="bg-[var(--color-text-placeholder)]/16"
+            @click.stop="showConfigActions(item)"
+          >
+            <wd-icon name="more" size="18" class="color-text-secondary" />
           </view>
         </view>
-      </wd-drop-menu-item>
-    </wd-drop-menu>
 
-    <view class="data-container">
-      <!-- 列表内容 -->
-      <view v-for="(item, index) in pageData" :key="index" class="mb-20rpx">
-        <wd-card>
-          <template #title>
-            <view class="flex items-center justify-between">
-              <view class="flex-1 text-truncate">{{ item.configName }}</view>
-            </view>
-          </template>
-
-          <wd-cell-group>
-            <wd-cell title="配置键" :value="item.configKey" />
-            <wd-cell title="配置值" :value="item.configValue" />
-            <wd-cell title="备注" :value="item.remark" />
+        <view class="mt-12rpx">
+          <wd-cell-group border>
+            <wd-cell title="配置项" :value="item.configKey" ellipsis />
+            <wd-cell title="配置值" :value="item.configValue" ellipsis />
+            <wd-cell title="描述" :value="item.remark || '暂无描述'" ellipsis />
           </wd-cell-group>
+        </view>
+      </wd-card>
 
-          <template #footer>
-            <wd-button size="small" plain type="primary" @click="handleAction(item)">
-              操作
-            </wd-button>
-          </template>
-        </wd-card>
-      </view>
+      <wd-loadmore v-if="total > 0" :state="loadMoreState" @reload="fetchConfigList" />
+      <wd-status-tip v-else-if="total === 0" image="search" tip="暂无数据" />
     </view>
 
-    <!-- 加载更多 -->
-    <wd-loadmore :state="state" @reload="handleQuery" />
-
-    <!-- 底部按钮 -->
-    <view class="fixed bottom-0 w-full flex justify-around items-center p-20rpx bg-#fff">
-      <wd-button size="medium" type="primary" @click="handleOpenDialog">添加</wd-button>
-      <wd-button size="medium" type="success" @click="refreshCache">刷新缓存</wd-button>
-    </view>
-
-    <wd-popup v-model="showEditPopup" position="bottom">
-      <view class="p-20rpx">
-        <wd-form ref="formRef" :model="form">
-          <wd-input
-            v-model="form.configName"
-            label="配置名称"
-            type="text"
-            placeholder="请输入配置名称"
-            :rules="[{ required: true, message: '请填写配置名称' }]"
-          />
-          <wd-input
-            v-model="form.configKey"
-            label="配置键名"
-            type="text"
-            placeholder="请输入配置键名"
-            :rules="[{ required: true, message: '请填写配置键' }]"
-          />
-          <wd-input
-            v-model="form.configValue"
-            label="配置键值"
-            type="text"
-            placeholder="请输入配置键值"
-            :rules="[{ required: true, message: '请填写配置值' }]"
-          />
-          <wd-textarea
-            v-model="form.remark"
-            prop="remark"
-            label="配置描述"
-            label-align="right"
-            clearable
-            :maxlength="100"
-            show-word-limit
-            label-width="100px"
-            placeholder="请输入配置描述"
-          />
+    <!-- 弹窗表单 -->
+    <wd-popup
+      v-model="dialog.visible"
+      position="bottom"
+      custom-style="border-radius: 24rpx 24rpx 0 0"
+      @close="closeConfigDialog"
+    >
+      <view class="p-4">
+        <view class="text-center font-bold text-32rpx mb-4">
+          {{ formData.id ? "编辑配置" : "新增配置" }}
+        </view>
+        <wd-form ref="formRef" :model="formData" :rules="rules">
+          <wd-cell-group border>
+            <wd-input v-model="formData.configName" label="配置名称" required />
+            <wd-input v-model="formData.configKey" label="配置键名" required />
+            <wd-input v-model="formData.configValue" label="配置键值" required />
+            <wd-textarea
+              v-model="formData.remark"
+              label="描述"
+              placeholder="请输入配置描述"
+              :maxlength="100"
+              show-word-limit
+            />
+          </wd-cell-group>
         </wd-form>
-        <view class="flex justify-around mt-20rpx">
-          <wd-button @click="showEditPopup = false">取消</wd-button>
-          <wd-button type="primary" native-type="submit" :loading="loading" @click="submitForm">
-            确定
-          </wd-button>
+        <view class="popup-actions">
+          <wd-button type="info" plain @click="closeConfigDialog">取消</wd-button>
+          <wd-button type="primary" :loading="submitting" @click="submitConfigForm">保存</wd-button>
         </view>
       </view>
     </wd-popup>
+
+    <view
+      v-if="hasPermission('sys:config:create') && !dialog.visible"
+      class="fab-add"
+      @click.stop="openConfigDialog()"
+    >
+      <wd-icon name="add" size="44rpx" />
+    </view>
   </view>
 </template>
 
 <script lang="ts" setup>
-import ConfigAPI, { ConfigPageVO, ConfigForm, ConfigPageQuery } from "@/api/config";
-import { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
+import { onLoad, onReachBottom } from "@dcloudio/uni-app";
 import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
-import { FormInstance } from "wot-design-uni/components/wd-form/types";
-import { debounce } from "@/utils";
-const state = ref<LoadMoreState>("loading"); // 加载状态 loading, finished:, error
+import { FormRules } from "wot-design-uni/components/wd-form/types";
+import { useToast } from "wot-design-uni";
+import ConfigAPI, { type ConfigPageQuery, ConfigPageVO, ConfigForm } from "@/api/config";
+import { hasPermission } from "@/utils/permission";
+
+const toast = useToast();
+const loadMoreState = ref<LoadMoreState>("loading");
+const formRef = ref();
+const submitting = ref(false);
+
+const queryParams = reactive<ConfigPageQuery>({ pageNum: 1, pageSize: 10, keywords: "" });
 const total = ref(0);
-const queryParams = reactive<ConfigPageQuery>({
-  pageNum: 1,
-  pageSize: 10,
-  keywords: "",
-});
-// 系统配置表格数据
 const pageData = ref<ConfigPageVO[]>([]);
-const formRef = ref<FormInstance>();
+const dialog = reactive({ visible: false });
 
-const loading = ref(false);
+const initialFormData: ConfigForm = {
+  id: undefined,
+  configName: undefined,
+  configKey: undefined,
+  configValue: undefined,
+  remark: undefined,
+};
 
-/**
- * 搜索栏
- */
-const dropMenu = ref<DropMenuItemExpose>();
+const formData = reactive<ConfigForm>({ ...initialFormData });
 
-/**
- * 搜索
- */
-function handleQuery() {
-  pageData.value = [];
-  dropMenu.value?.close();
+const rules: FormRules = {
+  configName: [{ required: true, message: "请输入配置名称" }],
+  configKey: [{ required: true, message: "请输入配置键名" }],
+  configValue: [{ required: true, message: "请输入配置键值" }],
+};
+
+// 搜索触发
+const handleSearch = () => loadConfigList();
+
+// 加载列表
+function loadConfigList() {
   queryParams.pageNum = 1;
-  loadmore();
+  fetchConfigList();
 }
 
-const showEditPopup = ref(false);
-const form = ref<ConfigForm>({});
-
-// 修改编辑函数
-function handleEdit(id: number) {
-  ConfigAPI.getFormData(id).then((data) => {
-    Object.assign(form.value, data);
-    // 显示弹窗
-    showEditPopup.value = true;
-  });
+// 分页加载列表
+function fetchConfigList() {
+  loadMoreState.value = "loading";
+  ConfigAPI.getPage(queryParams)
+    .then((data) => {
+      pageData.value = data.list;
+      total.value = data.total;
+      queryParams.pageNum++;
+    })
+    .catch(() => {
+      pageData.value = [];
+    })
+    .finally(() => {
+      loadMoreState.value = "finished";
+    });
 }
 
-// 提交表单
-async function submitForm() {
-  loading.value = true;
-  try {
-    if (formRef.value) {
-      formRef.value!.validate().then(async ({ valid }) => {
-        if (valid) {
-          if (form.value.id) {
-            await ConfigAPI.update(form.value.id, form.value);
-            uni.showToast({ title: "更新成功", icon: "success" });
-          } else {
-            await ConfigAPI.add(form.value);
-            uni.showToast({ title: "添加成功", icon: "success" });
-          }
-          showEditPopup.value = false;
-          handleQuery(); // 刷新列表
-        } else {
-          uni.showToast({ title: "请检查表单", icon: "error" });
-          loading.value = false;
-        }
-      });
-    }
-  } catch {
-    uni.showToast({ title: "操作失败", icon: "error" });
-    loading.value = false;
-  } finally {
-    loading.value = false;
+// 打开弹窗（新增/编辑）
+async function openConfigDialog(id?: number) {
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+  dialog.visible = true;
+  if (id) {
+    formData.id = id;
+    const data = await ConfigAPI.getFormData(id);
+    Object.assign(formData, data, { id });
   }
 }
 
-/**
- * 重置搜索条件
- */
-function handleReset() {
-  queryParams.pageNum = 1;
-  queryParams.keywords = "";
-  pageData.value = [];
-  dropMenu.value?.close();
-  handleQuery();
-}
-
-/**
- * 触底事件
- */
-onReachBottom(() => {
-  queryParams.pageNum++;
-  handleQuery();
-});
-
-/**
- * 加载更多
- */
-function loadmore() {
-  state.value = "loading";
-  ConfigAPI.getPage(queryParams)
-    .then((data) => {
-      if (queryParams.pageNum === 1) {
-        pageData.value = data.list;
-      } else {
-        pageData.value.push(...data.list);
-      }
-      total.value = data.total;
-    })
-    .finally(() => {
-      state.value = "finished";
-    });
-}
-
-/**
- * 添加
- */
-function handleOpenDialog() {
-  form.value.id = undefined;
-  form.value.configName = "";
-  form.value.configKey = "";
-  form.value.configValue = "";
-  form.value.remark = "";
-  showEditPopup.value = true;
-}
-
-/**
- * 刷新缓存
- */
-const refreshCache = debounce(() => {
-  ConfigAPI.refreshCache().then(() => {
-    uni.showToast({
-      title: "刷新缓存成功",
-      icon: "success",
-      duration: 1000, // 显示时间，单位为毫秒，设置为 0 则不会自动消失
-    });
-  });
-}, 1000);
-
-/**
- * 删除
- */
-function handleDelete(item: ConfigPageVO) {
-  uni.showModal({
-    title: "提示",
-    content: "确定要删除该配置吗？",
-    success: async (res) => {
-      if (res.confirm) {
-        if (item.id) {
-          ConfigAPI.deleteById(item.id).then(() => {
-            uni.showToast({ title: "删除成功", icon: "success" });
-          });
-        }
-      }
-    },
+// 提交表单
+function submitConfigForm() {
+  formRef.value.validate().then(({ valid }: { valid: boolean }) => {
+    if (!valid) return;
+    submitting.value = true;
+    const action = formData.id ? ConfigAPI.update(formData.id, formData) : ConfigAPI.add(formData);
+    action
+      .then(() => {
+        toast.success("操作成功");
+        closeConfigDialog();
+        loadConfigList();
+      })
+      .finally(() => {
+        submitting.value = false;
+      });
   });
 }
 
-/**
- * 操作
- */
-function handleAction(item: ConfigPageVO) {
-  const actions = ["编辑", "删除"];
+// 关闭弹窗
+function closeConfigDialog() {
+  dialog.visible = false;
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+}
+
+// 更多操作
+function showConfigActions(item: ConfigPageVO) {
+  const actions: string[] = [];
+  const actionMap: Record<string, () => void> = {};
+
+  if (hasPermission("sys:config:update")) {
+    actions.push("编辑");
+    actionMap["编辑"] = () => openConfigDialog(item.id);
+  }
+
+  if (hasPermission("sys:config:delete")) {
+    actions.push("删除");
+    actionMap["删除"] = async () => {
+      const { confirm } = await uni.showModal({
+        title: "确认删除",
+        content: `确定要删除配置「${item.configName}」吗？`,
+      });
+      if (confirm) {
+        await ConfigAPI.deleteById(item.id!);
+        toast.success("删除成功");
+        loadConfigList();
+      }
+    };
+  }
+
+  if (actions.length === 0) {
+    toast.warning("暂无操作权限");
+    return;
+  }
+
   uni.showActionSheet({
     itemList: actions,
     success: ({ tapIndex }) => {
-      switch (actions[tapIndex]) {
-        case "编辑":
-          handleEdit(item.id || 0);
-          break;
-        case "删除":
-          handleDelete(item);
-          break;
-      }
+      const action = actions[tapIndex];
+      actionMap[action]?.();
     },
   });
 }
 
-onMounted(() => {
-  handleQuery();
+onReachBottom(() => {
+  if (queryParams.pageNum * queryParams.pageSize < total.value) {
+    fetchConfigList();
+  } else {
+    loadMoreState.value = "finished";
+  }
 });
 
-/**
- * 页面返回回来也要重新加载数据
- */
 onLoad(() => {
-  queryParams.pageNum = 1;
-  handleQuery();
+  loadConfigList();
 });
 </script>
 
+<script lang="ts">
+export default { options: { styleIsolation: "shared" } };
+</script>
+
 <route lang="json">
 {
   "name": "config",
@@ -301,34 +243,3 @@ onLoad(() => {
   }
 }
 </route>
-
-<style lang="scss" scoped>
-.data-container {
-  :deep(.wd-cell__wrapper) {
-    padding: 4rpx 0;
-  }
-
-  :deep(.wd-cell) {
-    padding-right: 10rpx;
-    background: #f8f8f8;
-  }
-
-  :deep(.wd-fab__trigger) {
-    width: 80rpx !important;
-    height: 80rpx !important;
-  }
-
-  :deep(.wd-cell__right) {
-    flex: 2;
-  }
-
-  .filter-container {
-    padding: 10rpx;
-    background: #fff;
-  }
-
-  .data-container {
-    margin-top: 20rpx;
-  }
-}
-</style>
diff --git a/src/pages/work/dept/index.vue b/src/pages/work/dept/index.vue
index 1bd61d8..7d9cb4a 100644
--- a/src/pages/work/dept/index.vue
+++ b/src/pages/work/dept/index.vue
@@ -1,363 +1,345 @@
 <template>
-  <view class="dept-page">
-    <!-- 搜索栏 -->
-    <view class="search-bar">
+  <view class="page page--padding page--pt">
+    <view>
       <wd-search
-        v-model="searchText"
+        v-model="queryParams.keywords"
         placeholder="搜索部门名称"
         hide-cancel
         @search="handleSearch"
       />
     </view>
 
-    <!-- 部门列表 -->
-    <scroll-view class="dept-list" scroll-y>
-      <view v-if="filteredDeptList.length > 0" class="dept-tree">
-        <template v-for="dept in filteredDeptList" :key="dept.id">
-          <dept-item
-            :dept="dept"
-            :level="0"
-            @click="handleDeptClick"
-          />
+    <!-- 部门树形列表 -->
+    <view class="mt-16rpx">
+      <CustomTree
+        :data="treeData"
+        :default-expand-all="true"
+        :show-action="true"
+        @action="handleNodeAction"
+      >
+        <!-- 自定义节点内容：ID + 名称 + 状态 -->
+        <template #content="{ node }">
+          <view class="flex-1 flex items-center gap-16rpx">
+            <text class="w-120rpx text-24rpx color-text-secondary">{{ node.id }}</text>
+            <text class="flex-1 truncate">{{ node.name }}</text>
+            <wd-tag :type="node.status === 1 ? 'success' : 'danger'" size="small">
+              {{ node.status === 1 ? "正常" : "禁用" }}
+            </wd-tag>
+          </view>
         </template>
-      </view>
+      </CustomTree>
 
-      <!-- 空状态 -->
-      <view v-else class="empty-state">
-        <wd-icon name="folder-open" size="48" color="#d1d5db" />
-        <text class="empty-state__text">暂无部门数据</text>
-      </view>
-    </scroll-view>
+      <wd-status-tip v-if="deptList.length === 0" image="search" tip="暂无数据" />
+    </view>
 
-    <!-- 底部操作栏 -->
-    <view class="action-bar">
-      <wd-button type="primary" block @click="handleAddDept">
-        <wd-icon name="add" size="16" color="#fff" />
-        <text>新增部门</text>
-      </wd-button>
+    <!-- 弹窗表单 -->
+    <wd-popup
+      v-model="dialog.visible"
+      position="bottom"
+      custom-style="border-radius: 24rpx 24rpx 0 0"
+      @close="closeDeptDialog"
+    >
+      <view class="p-4">
+        <view class="text-center font-bold text-32rpx mb-4">
+          {{ formData.id ? "编辑部门" : "新增部门" }}
+        </view>
+        <wd-form ref="formRef" :model="formData" :rules="rules">
+          <wd-cell-group border>
+            <wd-col-picker
+              v-model="parentSelected"
+              label="上级部门"
+              :columns="parentColumns"
+              :column-change="handleParentColumnChange"
+              required
+              :display-format="displayParentFormat"
+              @confirm="handleParentConfirm"
+            />
+            <wd-input v-model="formData.name" label="部门名称" required />
+            <wd-input v-model="formData.code" label="部门编号" required />
+            <wd-cell title="排序">
+              <wd-input-number v-model="formData.sort" :min="0" />
+            </wd-cell>
+            <wd-cell title="状态">
+              <wd-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
+            </wd-cell>
+          </wd-cell-group>
+        </wd-form>
+        <view class="popup-actions">
+          <wd-button type="info" plain @click="closeDeptDialog">取消</wd-button>
+          <wd-button type="primary" :loading="submitting" @click="submitDeptForm">保存</wd-button>
+        </view>
+      </view>
+    </wd-popup>
+
+    <!-- 浮动新增按钮 -->
+    <view
+      v-if="hasPermission('sys:dept:create') && !dialog.visible"
+      class="fab-add"
+      hover-class="fab-add:active"
+      @click.stop="openDeptDialog()"
+    >
+      <wd-icon name="add" size="44rpx" />
     </view>
   </view>
 </template>
 
-<script setup lang="ts">
-/**
- * 部门管理页面
- *
- * 功能说明：
- * - 展示部门树形结构
- * - 支持搜索部门
- * - 新增/编辑/删除部门
- *
- * 技术要点：
- * - 使用 BEM 命名规范
- * - 支持暗黑模式
- * - 使用 CSS 变量
- * - 递归组件实现树形结构
- */
+<script lang="ts" setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { FormRules } from "wot-design-uni/components/wd-form/types";
+import { useToast } from "wot-design-uni";
+import DeptAPI, { type DeptQuery, DeptVO, DeptForm } from "@/api/dept";
+import { hasPermission } from "@/utils/permission";
+import CustomTree from "@/components/custom-tree/index.vue";
 
-// ============================================================================
-// 类型定义
-// ============================================================================
+const toast = useToast();
+const formRef = ref();
+const submitting = ref(false);
 
-interface DeptNode {
-  id: string
-  label: string
-  userCount?: number
-  children?: DeptNode[]
+const queryParams = reactive<DeptQuery>({ keywords: "" });
+const deptList = ref<DeptVO[]>([]);
+const dialog = reactive({ visible: false });
+
+const initialFormData: DeptForm = {
+  id: undefined,
+  parentId: 0,
+  name: undefined,
+  code: undefined,
+  sort: 1,
+  status: 1,
+};
+
+const formData = reactive<DeptForm>({ ...initialFormData });
+
+// 转换为树组件数据格式
+const treeData = computed(() => deptList.value.map((dept) => transformDeptToTree(dept)));
+
+function transformDeptToTree(dept: DeptVO): any {
+  return {
+    value: String(dept.id),
+    label: dept.name,
+    id: dept.id,
+    name: dept.name,
+    status: dept.status,
+    children: dept.children?.map((child) => transformDeptToTree(child)) || [],
+  };
 }
 
-// ============================================================================
-// 子组件 - 部门项（支持递归）
-// ============================================================================
+// 上级部门选择器
+const parentSelected = ref<(string | number)[]>([]);
+const parentColumns = ref<OptionType[][]>([]);
+const parentOptions = ref<OptionType[]>([]);
 
-const DeptItem = defineComponent({
-  name: "DeptItem",
-  props: {
-    dept: { type: Object as PropType<DeptNode>, required: true },
-    level: { type: Number, default: 0 },
-  },
-  emits: ["click"],
-  setup(props, { emit }) {
-    const isExpanded = ref(false)
-    const hasChildren = computed(() => props.dept.children && props.dept.children.length > 0)
+// 格式化上级部门展示
+const displayParentFormat = (selectedItems: OptionType[]) => {
+  if (!selectedItems || selectedItems.length === 0) return "";
+  return selectedItems
+    .map((item) => item?.label)
+    .filter((label) => !!label)
+    .join("/");
+};
 
-    function toggleExpand() {
-      if (hasChildren.value) {
-        isExpanded.value = !isExpanded.value
-      }
+// 查找部门在树中的完整路径
+function findDeptPath(data: OptionType[], targetId: string, path: string[] = []): string[] | null {
+  for (const item of data) {
+    const currentPath = [...path, String(item.value)];
+    if (String(item.value) === targetId) {
+      return currentPath;
     }
-
-    function handleClick() {
-      emit("click", props.dept)
+    if (item.children && item.children.length > 0) {
+      const found = findDeptPath(item.children, targetId, currentPath);
+      if (found) return found;
     }
+  }
+  return null;
+}
 
-    return {
-      isExpanded,
-      hasChildren,
-      toggleExpand,
-      handleClick,
-    }
-  },
-  template: `
-    <view class="dept-node">
-      <view
-        class="dept-node__item"
-        :class="{ 'dept-node__item--has-children': hasChildren }"
-        :style="{ paddingLeft: level * 32 + 16 + 'rpx' }"
-      >
-        <view class="dept-node__expand" @click="toggleExpand">
-          <wd-icon
-            v-if="hasChildren"
-            name="arrow-right"
-            size="14"
-            class="dept-node__arrow"
-            :class="{ 'dept-node__arrow--expanded': isExpanded }"
-          />
-        </view>
-        <view class="dept-node__content" @click="handleClick">
-          <wd-icon
-            name="folder"
-            size="18"
-            :color="hasChildren ? 'var(--color-primary)' : 'var(--color-text-secondary)'"
-          />
-          <text class="dept-node__name">{{ dept.label }}</text>
-        </view>
-        <view class="dept-node__meta" @click="handleClick">
-          <text class="dept-node__count">{{ dept.userCount || 0 }} 人</text>
-          <wd-icon name="arrow-right" size="14" color="var(--color-text-secondary)" />
-        </view>
-      </view>
+// 上级部门列变化
+const handleParentColumnChange = ({ selectedItem, resolve, finish }: any) => {
+  if (String(selectedItem?.value) === "0") {
+    finish();
+    return;
+  }
+  const children = selectedItem.children;
+  if (children && children.length > 0) {
+    resolve(children);
+  } else {
+    finish();
+  }
+};
 
-      <!-- 子节点 -->
-      <view v-if="hasChildren && isExpanded" class="dept-node__children">
-        <DeptItem
-          v-for="child in dept.children"
-          :key="child.id"
-          :dept="child"
-          :level="level + 1"
-          @click="$emit('click', $event)"
-        />
-      </view>
-    </view>
-  `,
-})
+// 上级部门确认选择
+const handleParentConfirm = ({ value }: any) => {
+  parentSelected.value = value;
+  formData.parentId = Number(value[value.length - 1]) || 0;
+};
 
-// ============================================================================
-// 响应式数据
-// ============================================================================
+const rules: FormRules = {
+  name: [{ required: true, message: "请输入部门名称" }],
+  code: [{ required: true, message: "请输入部门编号" }],
+  parentId: [{ required: true, message: "请选择上级部门" }],
+};
 
-const searchText = ref("")
+// 搜索触发
+const handleSearch = () => loadDeptList();
 
-// 部门树形数据（示例数据）
-const deptList = ref<DeptNode[]>([
-  {
-    id: "1",
-    label: "有来技术",
-    userCount: 128,
-    children: [
-      {
-        id: "1-1",
-        label: "研发中心",
-        userCount: 45,
-        children: [
-          { id: "1-1-1", label: "前端组", userCount: 15 },
-          { id: "1-1-2", label: "后端组", userCount: 18 },
-          { id: "1-1-3", label: "测试组", userCount: 12 },
-        ],
-      },
-      {
-        id: "1-2",
-        label: "产品中心",
-        userCount: 20,
-        children: [
-          { id: "1-2-1", label: "产品组", userCount: 12 },
-          { id: "1-2-2", label: "设计组", userCount: 8 },
-        ],
-      },
-      {
-        id: "1-3",
-        label: "运营中心",
-        userCount: 35,
-      },
-      {
-        id: "1-4",
-        label: "行政中心",
-        userCount: 28,
-      },
-    ],
-  },
-])
+// 加载列表
+function loadDeptList() {
+  console.log("loadDeptList called");
+  DeptAPI.getList(queryParams)
+    .then((data) => {
+      console.log("deptList data:", data);
+      deptList.value = data;
+      console.log("treeData:", treeData.value);
+    })
+    .catch((err) => {
+      console.error("loadDeptList error:", err);
+    });
+}
 
-// 过滤后的部门列表
-const filteredDeptList = computed(() => {
-  if (!searchText.value) return deptList.value
+// 处理节点操作按钮点击
+function handleNodeAction(node: any) {
+  const dept: DeptVO = {
+    id: node.id,
+    name: node.label,
+    status: node.status,
+    children: node.children,
+  } as DeptVO;
 
-  function filterDepts(depts: DeptNode[]): DeptNode[] {
-    return depts.reduce<DeptNode[]>((acc, dept) => {
-      const matched = dept.label.toLowerCase().includes(searchText.value.toLowerCase())
-      const filteredChildren = dept.children ? filterDepts(dept.children) : []
+  const actions: string[] = [];
+  const actionMap: Record<string, () => void> = {};
 
-      if (matched || filteredChildren.length > 0) {
-        acc.push({
-          ...dept,
-          children: filteredChildren.length > 0 ? filteredChildren : dept.children,
-        })
-      }
-      return acc
-    }, [])
+  if (hasPermission("sys:dept:create")) {
+    actions.push("新增子部门");
+    actionMap["新增子部门"] = () => handleAddChild(dept);
   }
 
-  return filterDepts(deptList.value)
-})
+  if (hasPermission("sys:dept:update")) {
+    actions.push("编辑");
+    actionMap["编辑"] = () => openDeptDialog(dept);
+  }
 
-// ============================================================================
-// 事件处理
-// ============================================================================
+  if (hasPermission("sys:dept:delete")) {
+    actions.push("删除");
+    actionMap["删除"] = async () => {
+      const { confirm } = await uni.showModal({
+        title: "确认删除",
+        content: `确定要删除部门「${dept.name}」吗？`,
+      });
+      if (confirm) {
+        await DeptAPI.deleteByIds(String(dept.id));
+        toast.success("删除成功");
+        loadDeptList();
+      }
+    };
+  }
 
-/** 搜索 */
-function handleSearch() {
-  uni.showToast({ title: `搜索: ${searchText.value}`, icon: "none" })
+  if (actions.length === 0) {
+    toast.warning("暂无操作权限");
+    return;
+  }
+
+  uni.showActionSheet({
+    itemList: actions,
+    success: ({ tapIndex }) => {
+      const action = actions[tapIndex];
+      actionMap[action]?.();
+    },
+  });
 }
 
-/** 部门点击 */
-function handleDeptClick(dept: DeptNode) {
-  uni.showToast({ title: `点击: ${dept.label}`, icon: "none" })
+// 打开弹窗（新增/编辑）
+async function openDeptDialog(dept?: DeptVO) {
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+  parentSelected.value = [];
+  dialog.visible = true;
+
+  const data = await DeptAPI.getOptions();
+  parentOptions.value = data;
+  const firstColumn: OptionType[] = [{ value: "0", label: "顶级部门" }, ...data];
+  parentColumns.value = [firstColumn];
+
+  if (dept) {
+    formData.id = dept.id;
+    const form = await DeptAPI.getFormData(dept.id!);
+    Object.assign(formData, form, { id: dept.id });
+
+    if (form.parentId && form.parentId !== 0) {
+      const path = findDeptPath(data, String(form.parentId));
+      if (path) {
+        parentSelected.value = path;
+        const columns: OptionType[][] = [firstColumn];
+        let currentLevel = data;
+        for (let i = 0; i < path.length - 1; i++) {
+          const found = currentLevel.find((item) => String(item.value) === path[i]);
+          if (found && found.children) {
+            columns.push(found.children);
+            currentLevel = found.children;
+          }
+        }
+        parentColumns.value = columns;
+      } else {
+        parentSelected.value = [String(form.parentId)];
+      }
+    }
+  }
 }
 
-/** 新增部门 */
-function handleAddDept() {
-  uni.showToast({ title: "新增部门", icon: "none" })
+// 新增子部门
+function handleAddChild(dept: DeptVO) {
+  openDeptDialog({ id: undefined, parentId: dept.id } as DeptVO);
+  formData.parentId = dept.id!;
+  parentSelected.value = [String(dept.id)];
 }
+
+// 提交表单
+function submitDeptForm() {
+  formRef.value.validate().then(({ valid }: { valid: boolean }) => {
+    if (!valid) return;
+    submitting.value = true;
+    const action = formData.id ? DeptAPI.update(formData.id, formData) : DeptAPI.add(formData);
+    action
+      .then(() => {
+        toast.success("操作成功");
+        closeDeptDialog();
+        loadDeptList();
+      })
+      .finally(() => {
+        submitting.value = false;
+      });
+  });
+}
+
+// 关闭弹窗
+function closeDeptDialog() {
+  dialog.visible = false;
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+}
+
+onLoad(() => {
+  console.log("onLoad triggered");
+  loadDeptList();
+});
+</script>
+
+<script lang="ts">
+export default { options: { styleIsolation: "shared" } };
 </script>
 
 <route lang="json">
 {
   "name": "dept",
-  "style": { "navigationBarTitleText": "部门管理" }
+  "style": {
+    "navigationBarTitleText": "部门管理"
+  }
 }
 </route>
 
 <style lang="scss" scoped>
-// ============================================================================
-// 页面容器
-// ============================================================================
-
-.dept-page {
+.popup-actions {
   display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background-color: var(--color-bg-secondary);
-}
-
-// ============================================================================
-// 搜索栏
-// ============================================================================
-
-.search-bar {
-  padding: 16rpx 24rpx;
-  background-color: var(--color-bg);
-}
-
-// ============================================================================
-// 部门列表
-// ============================================================================
-
-.dept-list {
-  flex: 1;
-}
-
-.dept-tree {
-  background-color: var(--color-bg);
-}
-
-// ============================================================================
-// 部门节点（递归组件样式）
-// ============================================================================
-
-.dept-node {
-  &__item {
-    display: flex;
-    align-items: center;
-    height: 96rpx;
-    border-bottom: 2rpx solid var(--color-border-light);
-
-    &:active {
-      background-color: var(--color-bg-secondary);
-    }
-  }
-
-  &__expand {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48rpx;
-    height: 48rpx;
-  }
-
-  &__arrow {
-    color: var(--color-text-secondary);
-    transition: transform 0.2s ease;
-
-    &--expanded {
-      transform: rotate(90deg);
-    }
-  }
-
-  &__content {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    gap: 16rpx;
-  }
-
-  &__name {
-    font-size: 28rpx;
-    color: var(--color-text);
-  }
-
-  &__meta {
-    display: flex;
-    align-items: center;
-    gap: 8rpx;
-    padding-right: 24rpx;
-  }
-
-  &__count {
-    font-size: 24rpx;
-    color: var(--color-text-secondary);
-  }
-
-  &__children {
-    background-color: var(--color-bg-secondary);
-  }
-}
-
-// ============================================================================
-// 空状态
-// ============================================================================
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 100rpx 0;
-
-  &__text {
-    margin-top: 24rpx;
-    font-size: 28rpx;
-    color: var(--color-text-secondary);
-  }
-}
-
-// ============================================================================
-// 底部操作栏
-// ============================================================================
-
-.action-bar {
-  padding: 24rpx;
-  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
-  background-color: var(--color-bg);
-  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
+  gap: 24rpx;
+  margin-top: 32rpx;
 }
 </style>
diff --git a/src/pages/work/dict/index.vue b/src/pages/work/dict/index.vue
new file mode 100644
index 0000000..c0a1a20
--- /dev/null
+++ b/src/pages/work/dict/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <view class="page page--padding page--pt">
+    <view>
+      <wd-search
+        v-model="queryParams.keywords"
+        placeholder="搜索字典名称/编码"
+        hide-cancel
+        @search="handleSearch"
+      />
+    </view>
+
+    <view class="mt-16rpx">
+      <wd-card
+        v-for="item in pageData"
+        :key="item.id"
+        custom-class="item-card"
+        @click="openDictItemPage(item)"
+      >
+        <view class="flex-start">
+          <view class="flex-1">
+            <view class="flex-start">
+              <text class="font-bold text-32rpx">{{ item.name }}</text>
+            </view>
+            <text class="text-24rpx color-text-secondary">字典编码：{{ item.dictCode }}</text>
+          </view>
+          <wd-tag :type="item.status === 1 ? 'success' : 'danger'" plain>
+            {{ item.status === 1 ? "启用" : "禁用" }}
+          </wd-tag>
+        </view>
+
+        <view class="flex-between mt-16rpx">
+          <text class="text-24rpx color-text-placeholder">{{ item.remark || "暂无备注" }}</text>
+          <view
+            class="w-88rpx h-88rpx flex-center rounded-full"
+            hover-class="bg-[var(--color-text-placeholder)]/16"
+            @click.stop="showDictActions(item)"
+          >
+            <wd-icon name="more" size="18" class="color-text-secondary" />
+          </view>
+        </view>
+      </wd-card>
+
+      <wd-loadmore v-if="total > 0" :state="loadMoreState" @reload="fetchDictTypeList" />
+      <wd-status-tip v-else-if="total === 0" image="search" tip="暂无数据" />
+    </view>
+
+    <wd-popup
+      v-model="dialog.visible"
+      position="bottom"
+      custom-style="border-radius: 24rpx 24rpx 0 0"
+      @close="closeDictDialog"
+    >
+      <view class="p-4">
+        <view class="text-center font-bold text-32rpx mb-4">
+          {{ formData.id ? "编辑字典" : "新增字典" }}
+        </view>
+        <wd-form ref="formRef" :model="formData" :rules="rules">
+          <wd-cell-group border>
+            <wd-input v-model="formData.name" label="字典名称" required />
+            <wd-input v-model="formData.dictCode" label="字典编码" required />
+            <wd-cell title="状态">
+              <wd-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
+            </wd-cell>
+            <wd-textarea
+              v-model="formData.remark"
+              label="备注"
+              placeholder="请输入备注"
+              :maxlength="100"
+              show-word-limit
+            />
+          </wd-cell-group>
+        </wd-form>
+        <view class="popup-actions">
+          <wd-button type="info" plain @click="closeDictDialog">取消</wd-button>
+          <wd-button type="primary" :loading="submitting" @click="submitDictForm">保存</wd-button>
+        </view>
+      </view>
+    </wd-popup>
+
+    <view
+      v-if="hasPermission('sys:dict:create') && !dialog.visible"
+      class="fab-add"
+      @click.stop="openDictDialog()"
+    >
+      <wd-icon name="add" size="44rpx" />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { onLoad, onReachBottom } from "@dcloudio/uni-app";
+import { useRouter } from "uni-mini-router";
+import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
+import { FormRules } from "wot-design-uni/components/wd-form/types";
+import { useToast } from "wot-design-uni";
+import DictAPI, {
+  type DictTypeForm,
+  type DictTypePageQuery,
+  type DictTypePageVO,
+} from "@/api/dict";
+import { hasPermission } from "@/utils/permission";
+
+const router = useRouter();
+const toast = useToast();
+const loadMoreState = ref<LoadMoreState>("loading");
+const formRef = ref();
+const submitting = ref(false);
+
+const queryParams = reactive<DictTypePageQuery>({ pageNum: 1, pageSize: 10, keywords: "" });
+const total = ref(0);
+const pageData = ref<DictTypePageVO[]>([]);
+const dialog = reactive({ visible: false });
+
+const initialFormData: DictTypeForm = {
+  id: undefined,
+  name: undefined,
+  dictCode: undefined,
+  status: 1,
+  remark: undefined,
+};
+
+const formData = reactive<DictTypeForm>({ ...initialFormData });
+
+const rules: FormRules = {
+  name: [{ required: true, message: "请输入字典名称" }],
+  dictCode: [{ required: true, message: "请输入字典编码" }],
+};
+
+const handleSearch = () => loadDictTypeList();
+
+function loadDictTypeList() {
+  queryParams.pageNum = 1;
+  fetchDictTypeList();
+}
+
+function fetchDictTypeList() {
+  loadMoreState.value = "loading";
+  DictAPI.getPage(queryParams)
+    .then((data: any) => {
+      pageData.value = data.list;
+      total.value = data.total;
+      queryParams.pageNum++;
+    })
+    .catch(() => {
+      pageData.value = [];
+    })
+    .finally(() => {
+      loadMoreState.value = "finished";
+    });
+}
+
+function openDictItemPage(item: DictTypePageVO) {
+  if (!item.dictCode) return;
+  router.push({
+    path: "/pages/work/dict/item/index",
+    query: { dictCode: item.dictCode, title: `【${item.name}】字典数据` },
+  });
+}
+
+async function openDictDialog(id?: string) {
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+  dialog.visible = true;
+  if (id) {
+    formData.id = id;
+    const data = await DictAPI.getFormData(id);
+    Object.assign(formData, data, { id });
+  }
+}
+
+function submitDictForm() {
+  formRef.value.validate().then(({ valid }: { valid: boolean }) => {
+    if (!valid) return;
+    submitting.value = true;
+    const id = formData.id;
+    const action = id ? DictAPI.update(id, formData) : DictAPI.create(formData);
+    action
+      .then(() => {
+        toast.success("操作成功");
+        closeDictDialog();
+        loadDictTypeList();
+      })
+      .finally(() => {
+        submitting.value = false;
+      });
+  });
+}
+
+function closeDictDialog() {
+  dialog.visible = false;
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+}
+
+function showDictActions(item: DictTypePageVO) {
+  const actions: string[] = [];
+  const actionMap: Record<string, () => void> = {};
+
+  actions.push("字典数据");
+  actionMap["字典数据"] = () => openDictItemPage(item);
+
+  if (hasPermission("sys:dict:update")) {
+    actions.push("编辑");
+    actionMap["编辑"] = () => openDictDialog(item.id);
+  }
+
+  if (hasPermission("sys:dict:delete")) {
+    actions.push("删除");
+    actionMap["删除"] = async () => {
+      const { confirm } = await uni.showModal({
+        title: "确认删除",
+        content: `确定要删除字典「${item.name}」吗？`,
+      });
+      if (confirm && item.id) {
+        await DictAPI.deleteByIds(String(item.id));
+        toast.success("删除成功");
+        loadDictTypeList();
+      }
+    };
+  }
+
+  uni.showActionSheet({
+    itemList: actions,
+    success: ({ tapIndex }) => {
+      const action = actions[tapIndex];
+      actionMap[action]?.();
+    },
+  });
+}
+
+onReachBottom(() => {
+  if (queryParams.pageNum * queryParams.pageSize < total.value) {
+    fetchDictTypeList();
+  } else {
+    loadMoreState.value = "finished";
+  }
+});
+
+onLoad(() => {
+  loadDictTypeList();
+});
+</script>
+
+<script lang="ts">
+export default { options: { styleIsolation: "shared" } };
+</script>
+
+<route lang="json">
+{
+  "name": "dict",
+  "style": {
+    "navigationBarTitleText": "字典管理"
+  }
+}
+</route>
diff --git a/src/pages/work/dict/item/index.vue b/src/pages/work/dict/item/index.vue
new file mode 100644
index 0000000..32fb775
--- /dev/null
+++ b/src/pages/work/dict/item/index.vue
@@ -0,0 +1,280 @@
+<template>
+  <view class="page page--padding page--pt">
+    <view>
+      <wd-search
+        v-model="queryParams.keywords"
+        placeholder="搜索字典标签/字典值"
+        hide-cancel
+        @search="handleSearch"
+      />
+    </view>
+
+    <view class="mt-16rpx">
+      <wd-card
+        v-for="item in pageData"
+        :key="item.id"
+        custom-class="item-card"
+        @click="openItemDialog(item.id)"
+      >
+        <view class="flex-start">
+          <view class="flex-1">
+            <view class="flex-start">
+              <text class="font-bold text-32rpx">{{ item.label }}</text>
+            </view>
+            <text class="text-24rpx color-text-secondary">
+              字典值：{{ item.value }} · 排序：{{ item.sort }}
+            </text>
+          </view>
+          <wd-tag :type="item.status === 1 ? 'success' : 'danger'" plain>
+            {{ item.status === 1 ? "启用" : "禁用" }}
+          </wd-tag>
+        </view>
+
+        <view class="flex-between mt-16rpx">
+          <text class="text-24rpx color-text-placeholder">{{ item.remark || "暂无备注" }}</text>
+          <view
+            class="w-88rpx h-88rpx flex-center rounded-full"
+            hover-class="bg-[var(--color-text-placeholder)]/16"
+            @click.stop="showItemActions(item)"
+          >
+            <wd-icon name="more" size="18" class="color-text-secondary" />
+          </view>
+        </view>
+      </wd-card>
+
+      <wd-loadmore v-if="total > 0" :state="loadMoreState" @reload="fetchItemList" />
+      <wd-status-tip v-else-if="total === 0" image="search" tip="暂无数据" />
+    </view>
+
+    <wd-popup
+      v-model="dialog.visible"
+      position="bottom"
+      custom-style="border-radius: 24rpx 24rpx 0 0"
+      @close="closeItemDialog"
+    >
+      <view class="p-4">
+        <view class="text-center font-bold text-32rpx mb-4">
+          {{ formData.id ? "编辑字典数据" : "新增字典数据" }}
+        </view>
+        <wd-form ref="formRef" :model="formData" :rules="rules">
+          <wd-cell-group border>
+            <wd-input v-model="formData.label" label="字典项标签" required />
+            <wd-input v-model="formData.value" label="字典项值" required />
+            <wd-cell title="状态">
+              <wd-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
+            </wd-cell>
+            <wd-cell title="排序">
+              <wd-input-number v-model="formData.sort" :min="0" />
+            </wd-cell>
+            <wd-textarea
+              v-model="formData.remark"
+              label="备注"
+              placeholder="请输入备注"
+              :maxlength="100"
+              show-word-limit
+            />
+          </wd-cell-group>
+        </wd-form>
+        <view class="popup-actions">
+          <wd-button type="info" plain @click="closeItemDialog">取消</wd-button>
+          <wd-button type="primary" :loading="submitting" @click="submitItemForm">保存</wd-button>
+        </view>
+      </view>
+    </wd-popup>
+
+    <view
+      v-if="hasPermission('sys:dict-item:create') && !dialog.visible"
+      class="fab-add"
+      @click.stop="openItemDialog()"
+    >
+      <wd-icon name="add" size="44rpx" />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { onLoad, onReachBottom } from "@dcloudio/uni-app";
+import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
+import { FormRules } from "wot-design-uni/components/wd-form/types";
+import { useToast } from "wot-design-uni";
+import DictAPI, {
+  type DictItemForm,
+  type DictItemPageQuery,
+  type DictItemPageVO,
+} from "@/api/dict";
+import { hasPermission } from "@/utils/permission";
+
+const toast = useToast();
+
+const dictCode = ref<string>("");
+const pageTitle = ref<string>("字典数据");
+
+const loadMoreState = ref<LoadMoreState>("loading");
+const formRef = ref();
+const submitting = ref(false);
+
+const queryParams = reactive<DictItemPageQuery>({ pageNum: 1, pageSize: 10, keywords: "" });
+const total = ref(0);
+const pageData = ref<DictItemPageVO[]>([]);
+const dialog = reactive({ visible: false });
+
+const initialFormData: DictItemForm = {
+  id: undefined,
+  dictCode: undefined,
+  label: undefined,
+  value: undefined,
+  sort: 1,
+  status: 1,
+  remark: undefined,
+};
+
+const formData = reactive<DictItemForm>({ ...initialFormData });
+
+const rules: FormRules = {
+  label: [{ required: true, message: "请输入字典项标签" }],
+  value: [{ required: true, message: "请输入字典项值" }],
+};
+
+const handleSearch = () => loadItemList();
+
+function loadItemList() {
+  queryParams.pageNum = 1;
+  fetchItemList();
+}
+
+function fetchItemList() {
+  if (!dictCode.value) {
+    pageData.value = [];
+    total.value = 0;
+    loadMoreState.value = "finished";
+    return;
+  }
+
+  loadMoreState.value = "loading";
+  DictAPI.getItemPage(dictCode.value, queryParams)
+    .then((data: any) => {
+      pageData.value = data.list;
+      total.value = data.total;
+      queryParams.pageNum++;
+    })
+    .catch(() => {
+      pageData.value = [];
+    })
+    .finally(() => {
+      loadMoreState.value = "finished";
+    });
+}
+
+async function openItemDialog(id?: string) {
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+  dialog.visible = true;
+  formData.dictCode = dictCode.value;
+
+  if (id) {
+    formData.id = id;
+    const data = await DictAPI.getItemFormData(dictCode.value, id);
+    Object.assign(formData, data, { id });
+  }
+}
+
+function submitItemForm() {
+  formRef.value.validate().then(({ valid }: { valid: boolean }) => {
+    if (!valid) return;
+    if (!dictCode.value) {
+      toast.error("缺少字典编码");
+      return;
+    }
+
+    submitting.value = true;
+    const id = formData.id;
+    const action = id
+      ? DictAPI.updateItem(dictCode.value, id, formData)
+      : DictAPI.createItem(dictCode.value, formData);
+
+    action
+      .then(() => {
+        toast.success("操作成功");
+        closeItemDialog();
+        loadItemList();
+      })
+      .finally(() => {
+        submitting.value = false;
+      });
+  });
+}
+
+function closeItemDialog() {
+  dialog.visible = false;
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+}
+
+function showItemActions(item: DictItemPageVO) {
+  const actions: string[] = [];
+  const actionMap: Record<string, () => void> = {};
+
+  if (hasPermission("sys:dict-item:update")) {
+    actions.push("编辑");
+    actionMap["编辑"] = () => openItemDialog(item.id);
+  }
+
+  if (hasPermission("sys:dict-item:delete")) {
+    actions.push("删除");
+    actionMap["删除"] = async () => {
+      const { confirm } = await uni.showModal({
+        title: "确认删除",
+        content: `确定要删除字典数据「${item.label}」吗？`,
+      });
+      if (confirm && item.id) {
+        await DictAPI.deleteItems(dictCode.value, String(item.id));
+        toast.success("删除成功");
+        loadItemList();
+      }
+    };
+  }
+
+  if (actions.length === 0) {
+    toast.warning("暂无操作权限");
+    return;
+  }
+
+  uni.showActionSheet({
+    itemList: actions,
+    success: ({ tapIndex }) => {
+      const action = actions[tapIndex];
+      actionMap[action]?.();
+    },
+  });
+}
+
+onReachBottom(() => {
+  if (queryParams.pageNum * queryParams.pageSize < total.value) {
+    fetchItemList();
+  } else {
+    loadMoreState.value = "finished";
+  }
+});
+
+onLoad((query) => {
+  dictCode.value = String((query as any)?.dictCode || "");
+  pageTitle.value = String((query as any)?.title || "字典数据");
+  if (pageTitle.value) {
+    uni.setNavigationBarTitle({ title: pageTitle.value });
+  }
+  loadItemList();
+});
+</script>
+
+<script lang="ts">
+export default { options: { styleIsolation: "shared" } };
+</script>
+
+<route lang="json">
+{
+  "name": "dict-item",
+  "style": {
+    "navigationBarTitleText": "字典数据"
+  }
+}
+</route>
diff --git a/src/pages/work/index.vue b/src/pages/work/index.vue
index 78569a5..f0a8d17 100644
--- a/src/pages/work/index.vue
+++ b/src/pages/work/index.vue
@@ -25,6 +25,7 @@ import { computed } from "vue";
 import { useRouter } from "uni-mini-router";
 import { useUserStore } from "@/store";
 import { menuConfig } from "@/config/menu";
+import { checkLogin, isLoggedIn } from "@/utils/auth";
 
 const router = useRouter();
 const userStore = useUserStore();
@@ -32,6 +33,9 @@ const userStore = useUserStore();
 // 用户权限列表
 const userPerms = computed(() => userStore.userInfo?.perms || []);
 
+// 是否已登录
+const isLogged = computed(() => isLoggedIn());
+
 // 检查是否有权限
 const hasPermission = (perm: string) => {
   if (!perm) return true; // 无权限要求则显示
@@ -50,7 +54,23 @@ const visibleGridList = computed(() => {
 
 // 处理导航点击
 function handleNavClick(item: any) {
+  // 未登录时跳转登录页
+  if (!isLogged.value) {
+    uni.navigateTo({ url: "/pages/login/index" });
+    return;
+  }
+  // 已登录但访问受限时，仍做一次登录校验（防 token 过期）
+  if (!checkLogin()) return;
+
   try {
+    if (
+      typeof item?.url === "string" &&
+      (item.url.startsWith("http://") || item.url.startsWith("https://"))
+    ) {
+      uni.navigateTo({ url: `/pages/webview/index?url=${encodeURIComponent(item.url)}` });
+      return;
+    }
+
     router.push({ path: item.url });
   } catch (e) {
     console.error("[work] router.push failed:", e, item);
diff --git a/src/pages/work/log/index.vue b/src/pages/work/log/index.vue
index 730d230..aa2c039 100644
--- a/src/pages/work/log/index.vue
+++ b/src/pages/work/log/index.vue
@@ -1,117 +1,113 @@
 <template>
-  <view class="log">
-    <!-- 筛选 -->
-    <wd-drop-menu close-on-click-modal class="mb-24rpx">
-      <wd-drop-menu-item ref="filterDropMenu" title="筛选" icon="filter" icon-size="18px">
-        <view>
-          <wd-input
-            v-model="queryParams.keywords"
-            label="关键字"
-            type="text"
-            placeholder="请输入关键字"
-          />
+  <view class="page page--padding page--pt">
+    <view>
+      <wd-search
+        v-model="queryParams.keywords"
+        placeholder="搜索日志内容"
+        hide-cancel
+        @search="handleSearch"
+      />
+    </view>
 
-          <cu-date-query v-model="queryParams.createTime" :label="'日期选择'" />
-
-          <view class="flex-between py-2">
-            <wd-button class="w-20%" type="info" @click="handleResetQuery">重置</wd-button>
-            <wd-button class="w-70%" @click="handleQuery">查询</wd-button>
+    <!-- 日志列表 -->
+    <view class="mt-16rpx">
+      <wd-card
+        v-for="item in pageData"
+        :key="item.id"
+        custom-class="item-card"
+        @click="openLogDetail(item)"
+      >
+        <!-- 主信息行 -->
+        <view class="flex-start">
+          <view class="flex-1">
+            <view class="flex-start mt-12rpx">
+              <text class="font-bold text-32rpx">{{ item.operator }}</text>
+              <wd-tag plain size="small" class="ml-16rpx">{{ item.module }}</wd-tag>
+            </view>
+            <text class="text-24rpx color-text-secondary truncate">{{ item.content }}</text>
           </view>
         </view>
-      </wd-drop-menu-item>
-    </wd-drop-menu>
 
-    <!-- 卡片列表 -->
-    <wd-card v-for="item in pageData" :key="item.id" class="card-list">
-      <template #title>
-        {{ item.operator }}
-      </template>
-
-      <wd-cell-group>
-        <wd-cell title="模块" :value="item.module" />
-        <wd-cell title="内容" :value="item.content" />
-        <wd-cell title="IP" :value="item.ip" />
-        <wd-cell title="地区" :value="item.region" />
-      </wd-cell-group>
-
-      <template #footer>
-        <view class="flex-between">
-          <view class="text-left">
-            <wd-text text="创建时间：" size="small" class="font-bold" />
-            <wd-text :text="item.createTime" size="small" />
-          </view>
-          <view class="text-right">
-            <wd-button type="primary" size="small" plain @click="handleViewDetail(item)">
-              查看详情
-            </wd-button>
+        <!-- 辅助信息行 -->
+        <view class="flex gap-24rpx mt-12rpx">
+          <view class="flex-start min-w-0 flex-1">
+            <wd-icon name="location" size="16" class="color-text-secondary" />
+            <text class="ml-8rpx text-24rpx color-text-secondary">
+              {{ item.ip }} {{ item.region }}
+            </text>
           </view>
         </view>
-      </template>
-    </wd-card>
+
+        <!-- 元信息行 -->
+        <view class="flex-between mt-16rpx">
+          <text class="text-24rpx color-text-placeholder">{{ item.createTime }}</text>
+          <view
+            class="w-64rpx h-64rpx flex-center rounded-full"
+            hover-class="bg-[var(--color-text-placeholder)]/16"
+            @click.stop="openLogDetail(item)"
+          >
+            <wd-icon name="view" size="16" class="color-text-secondary" />
+          </view>
+        </view>
+      </wd-card>
+
+      <wd-loadmore v-if="total > 0" :state="loadMoreState" @reload="fetchLogList" />
+      <wd-status-tip v-else-if="total === 0" image="search" tip="暂无数据" />
+    </view>
 
     <!-- 详情弹窗 -->
-    <wd-popup v-model="detailDialogVisible" position="bottom">
-      <wd-cell-group>
-        <wd-cell title="操作人" :value="logDetail.operator" />
-        <wd-cell title="操作时间" :value="logDetail.createTime" />
-        <wd-cell title="模块" :value="logDetail.module" />
-        <wd-cell title="内容" :value="logDetail.content" />
-        <wd-cell title="IP" :value="logDetail.ip" />
-        <wd-cell title="地区" :value="logDetail.region" />
-        <wd-cell title="浏览器" :value="logDetail.browser" />
-        <wd-cell title="终端系统" :value="logDetail.os" />
-        <wd-cell title="耗时(毫秒)" :value="logDetail.executionTime" />
-      </wd-cell-group>
+    <wd-popup
+      v-model="detailDialog.visible"
+      position="bottom"
+      custom-style="border-radius: 24rpx 24rpx 0 0"
+      @close="closeLogDetail"
+    >
+      <view class="p-4">
+        <view class="text-center font-bold text-32rpx mb-4">日志详情</view>
+        <wd-cell-group border>
+          <wd-cell title="操作人" :value="logDetail.operator" />
+          <wd-cell title="操作时间" :value="logDetail.createTime" />
+          <wd-cell title="模块" :value="logDetail.module" />
+          <wd-cell title="内容" :value="logDetail.content" />
+          <wd-cell title="IP" :value="logDetail.ip" />
+          <wd-cell title="地区" :value="logDetail.region" />
+          <wd-cell title="浏览器" :value="logDetail.browser" />
+          <wd-cell title="终端系统" :value="logDetail.os" />
+          <wd-cell title="耗时(毫秒)" :value="String(logDetail.executionTime || 0)" />
+        </wd-cell-group>
+        <view class="popup-actions">
+          <wd-button type="info" plain block @click="closeLogDetail">关闭</wd-button>
+        </view>
+      </view>
     </wd-popup>
-
-    <!-- 加载更多 -->
-    <wd-loadmore v-if="total > 0" :state="loadMoreState" @reload="loadmore" />
-    <wd-status-tip v-else-if="total == 0" image="search" tip="当前搜索无结果" />
   </view>
 </template>
+
 <script lang="ts" setup>
 import { onLoad, onReachBottom } from "@dcloudio/uni-app";
 import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
-import { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
+import LogAPI, { type LogPageQuery, LogVO } from "@/api/log";
 
-import LogAPI, { LogVO, LogPageQuery } from "@/api/log";
-
-const filterDropMenu = ref<DropMenuItemExpose>();
 const loadMoreState = ref<LoadMoreState>("loading");
 
-const queryParams = reactive<LogPageQuery>({
-  pageNum: 1,
-  pageSize: 10,
-});
-
+const queryParams = reactive<LogPageQuery>({ pageNum: 1, pageSize: 10 });
 const total = ref(0);
 const pageData = ref<LogVO[]>([]);
 
 const logDetail = ref<LogVO>({});
-const detailDialogVisible = ref(false);
+const detailDialog = reactive({ visible: false });
 
-/**
- * 搜索栏
- */
-function handleQuery() {
-  filterDropMenu.value?.close();
+// 搜索触发
+const handleSearch = () => loadLogList();
+
+// 加载列表
+function loadLogList() {
   queryParams.pageNum = 1;
-  loadmore();
+  fetchLogList();
 }
 
-/**
- * 重置搜索
- */
-function handleResetQuery() {
-  queryParams.keywords = undefined;
-  queryParams.createTime = undefined;
-  handleQuery();
-}
-
-/**
- * 加载更多
- */
-function loadmore() {
+// 分页加载列表
+function fetchLogList() {
   loadMoreState.value = "loading";
   LogAPI.getPage(queryParams)
     .then((data) => {
@@ -127,30 +123,34 @@ function loadmore() {
     });
 }
 
-/**
- * 查看详情
- */
-function handleViewDetail(item: LogVO) {
-  detailDialogVisible.value = true;
+// 打开详情弹窗
+function openLogDetail(item: LogVO) {
   logDetail.value = item;
+  detailDialog.visible = true;
+}
+
+// 关闭详情弹窗
+function closeLogDetail() {
+  detailDialog.visible = false;
 }
 
-/**
- * 触底事件
- */
 onReachBottom(() => {
   if (queryParams.pageNum * queryParams.pageSize < total.value) {
-    loadmore();
-  } else if (queryParams.pageNum * queryParams.pageSize >= total.value) {
+    fetchLogList();
+  } else {
     loadMoreState.value = "finished";
   }
 });
 
 onLoad(() => {
-  handleQuery();
+  loadLogList();
 });
 </script>
 
+<script lang="ts">
+export default { options: { styleIsolation: "shared" } };
+</script>
+
 <route lang="json">
 {
   "name": "log",
@@ -159,25 +159,3 @@ onLoad(() => {
   }
 }
 </route>
-
-<style lang="scss" scoped>
-.wd-col {
-  margin-top: 10rpx;
-}
-
-::v-deep .wd-drop-menu__item {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0 50rpx;
-}
-
-.card-list {
-  :deep(.wd-cell__wrapper) {
-    padding: 4rpx 0;
-  }
-  :deep(.wd-cell) {
-    padding-right: 10rpx;
-    background: #f8f8f8;
-  }
-}
-</style>
diff --git a/src/pages/work/menu/index.vue b/src/pages/work/menu/index.vue
index 671e12b..2d783ef 100644
--- a/src/pages/work/menu/index.vue
+++ b/src/pages/work/menu/index.vue
@@ -1,39 +1,404 @@
 <template>
-  <view class="page">
-    <wd-cell-group border>
-      <wd-cell title="菜单管理" is-link to="/pages/work/menu/index" />
-    </wd-cell-group>
-    <view class="placeholder">
-      <text class="placeholder__text">菜单管理功能开发中...</text>
+  <view class="page page--padding page--pt">
+    <view>
+      <wd-search
+        v-model="queryParams.keywords"
+        placeholder="搜索菜单名称"
+        hide-cancel
+        @search="handleSearch"
+      />
+    </view>
+
+    <!-- 菜单树形列表 -->
+    <view class="mt-16rpx">
+      <custom-tree
+        :data="treeData"
+        :default-expand-all="true"
+        :show-action="true"
+        @action="handleNodeAction"
+      >
+        <!-- 自定义节点内容：ID + 名称 + 状态 -->
+        <template #content="{ node }">
+          <view class="flex-1 flex flex-nowrap items-center gap-16rpx">
+            <text class="w-120rpx text-24rpx color-text-secondary">{{ node.id }}</text>
+            <wd-icon v-if="node.icon" :name="node.icon" size="16" class="color-primary" />
+            <text class="flex-1 truncate">{{ node.name }}</text>
+            <wd-tag class="flex-shrink-0" :type="getMenuTypeTag(node.type)" size="small">
+              {{ getMenuTypeText(node.type) }}
+            </wd-tag>
+            <wd-tag
+              class="flex-shrink-0"
+              :type="node.visible === 1 ? 'success' : 'primary'"
+              size="small"
+            >
+              {{ node.visible === 1 ? "显示" : "隐藏" }}
+            </wd-tag>
+          </view>
+        </template>
+      </custom-tree>
+
+      <wd-status-tip v-if="menuList.length === 0" image="search" tip="暂无数据" />
+    </view>
+
+    <!-- 弹窗表单 -->
+    <wd-popup
+      v-model="dialog.visible"
+      position="bottom"
+      custom-style="border-radius: 24rpx 24rpx 0 0; max-height: 80vh"
+      @close="closeMenuDialog"
+    >
+      <view class="p-4">
+        <view class="text-center font-bold text-32rpx mb-4">
+          {{ formData.id ? "编辑菜单" : "新增菜单" }}
+        </view>
+        <scroll-view scroll-y class="max-h-60vh">
+          <wd-form ref="formRef" :model="formData" :rules="rules">
+            <wd-cell-group border>
+              <wd-col-picker
+                v-model="parentSelected"
+                label="上级菜单"
+                :columns="parentColumns"
+                :column-change="handleParentColumnChange"
+                required
+                :display-format="displayParentFormat"
+                @confirm="handleParentConfirm"
+              />
+              <wd-input v-model="formData.name" label="菜单名称" required />
+              <wd-cell title="菜单类型" required>
+                <wd-radio-group v-model="formData.type" size="smalll" shape="button" cell>
+                  <wd-radio value="C">目录</wd-radio>
+                  <wd-radio value="M">菜单</wd-radio>
+                  <wd-radio value="B">按钮</wd-radio>
+                </wd-radio-group>
+              </wd-cell>
+              <wd-input
+                v-if="formData.type !== 'B'"
+                v-model="formData.routePath"
+                label="路由路径"
+                placeholder="system 或 /system"
+              />
+              <wd-input
+                v-if="formData.type === 'M'"
+                v-model="formData.component"
+                label="组件路径"
+                placeholder="system/menu/index"
+              />
+              <wd-input
+                v-if="formData.type === 'B'"
+                v-model="formData.perm"
+                label="权限标识"
+                placeholder="sys:menu:create"
+              />
+              <wd-input v-model="formData.icon" label="图标" />
+              <wd-cell title="排序">
+                <wd-input-number v-model="formData.sort!" :min="0" />
+              </wd-cell>
+              <wd-cell title="状态">
+                <wd-switch v-model="formData.visible" :active-value="1" :inactive-value="0" />
+              </wd-cell>
+            </wd-cell-group>
+          </wd-form>
+        </scroll-view>
+        <view class="popup-actions">
+          <wd-button type="info" plain @click="closeMenuDialog">取消</wd-button>
+          <wd-button type="primary" :loading="submitting" @click="submitMenuForm">保存</wd-button>
+        </view>
+      </view>
+    </wd-popup>
+
+    <!-- 浮动新增按钮 -->
+    <view
+      v-if="hasPermission('sys:menu:create') && !dialog.visible"
+      class="fab-add"
+      hover-class="fab-add:active"
+      @click.stop="openMenuDialog()"
+    >
+      <wd-icon name="add" size="44rpx" />
     </view>
   </view>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { FormRules } from "wot-design-uni/components/wd-form/types";
+import { useToast } from "wot-design-uni";
+import MenuAPI, { type MenuQuery, MenuVO, MenuForm } from "@/api/menu";
+import { hasPermission } from "@/utils/permission";
+import CustomTree from "@/components/custom-tree/index.vue";
+
+const toast = useToast();
+const formRef = ref();
+const submitting = ref(false);
+
+const queryParams = reactive<MenuQuery>({ keywords: "" });
+const menuList = ref<MenuVO[]>([]);
+const dialog = reactive({ visible: false });
+
+const initialFormData: MenuForm = {
+  id: undefined,
+  parentId: "0",
+  name: undefined,
+  type: "M",
+  routePath: undefined,
+  component: undefined,
+  perm: undefined,
+  icon: undefined,
+  sort: 1,
+  visible: 1,
+};
+
+const formData = reactive<MenuForm>({ ...initialFormData });
+
+// 转换为树组件数据格式
+const treeData = computed(() => menuList.value.map((menu) => transformMenuToTree(menu)));
+
+function transformMenuToTree(menu: MenuVO): any {
+  return {
+    value: menu.id,
+    label: menu.name,
+    id: menu.id,
+    name: menu.name,
+    type: menu.type,
+    icon: menu.icon,
+    visible: menu.visible,
+    perm: menu.perm,
+    children: menu.children?.map((child) => transformMenuToTree(child)) || [],
+  };
+}
+
+// 菜单类型标签
+function normalizeMenuType(type?: string | number) {
+  if (type === 1 || type === "1") return "C";
+  if (type === 2 || type === "2") return "M";
+  if (type === 3 || type === "3") return "B";
+  return type;
+}
+
+function getMenuTypeTag(type?: string | number): "primary" | "success" | "warning" | "danger" {
+  const map: Record<string, "primary" | "success" | "warning" | "danger"> = {
+    C: "warning",
+    M: "success",
+    B: "danger",
+  };
+  const key = String(normalizeMenuType(type) || "M");
+  return map[key] || "primary";
+}
+
+function getMenuTypeText(type?: string | number) {
+  const map: Record<string, string> = { C: "目录", M: "菜单", B: "按钮" };
+  const key = String(normalizeMenuType(type) || "M");
+  return map[key] || "菜单";
+}
+
+// 上级菜单选择器
+const parentSelected = ref<(string | number)[]>([]);
+const parentColumns = ref<OptionType[][]>([]);
+const parentOptions = ref<OptionType[]>([]);
+
+const displayParentFormat = (selectedItems: Record<string, any>[]) => {
+  if (!selectedItems || selectedItems.length === 0) return "";
+  return selectedItems
+    .map((item) => item?.label)
+    .filter((label) => !!label)
+    .join("/");
+};
+
+function findMenuPath(
+  data: Record<string, any>[],
+  targetId: string,
+  path: (string | number)[] = []
+): (string | number)[] | null {
+  for (const item of data) {
+    const currentPath = [...path, item.value];
+    if (String(item.value) === targetId) {
+      return currentPath;
+    }
+    if (item.children && item.children.length > 0) {
+      const found = findMenuPath(item.children, targetId, currentPath);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+const handleParentColumnChange = ({ selectedItem, resolve, finish }: any) => {
+  if (String(selectedItem?.value) === "0") {
+    finish();
+    return;
+  }
+  const children = selectedItem.children;
+  if (children && children.length > 0) {
+    resolve(children);
+  } else {
+    finish();
+  }
+};
+
+const handleParentConfirm = ({ value }: any) => {
+  parentSelected.value = value;
+  formData.parentId = String(value[value.length - 1]) || "0";
+};
+
+const rules: FormRules = {
+  name: [{ required: true, message: "请输入菜单名称" }],
+  type: [{ required: true, message: "请选择菜单类型" }],
+  parentId: [{ required: true, message: "请选择上级菜单" }],
+};
+
+const handleSearch = () => loadMenuList();
+
+function loadMenuList() {
+  MenuAPI.getList(queryParams).then((data) => {
+    menuList.value = data;
+  });
+}
+
+// 处理节点操作按钮点击
+function handleNodeAction(node: any) {
+  const menu: MenuVO = {
+    id: node.id,
+    name: node.label,
+    type: node.type,
+    visible: node.visible,
+    children: node.children,
+  } as MenuVO;
+
+  const actions: string[] = [];
+  const actionMap: Record<string, () => void> = {};
+
+  if (hasPermission("sys:menu:create") && node.type !== 3) {
+    actions.push("新增子菜单");
+    actionMap["新增子菜单"] = () => handleAddChild(menu);
+  }
+
+  if (hasPermission("sys:menu:update")) {
+    actions.push("编辑");
+    actionMap["编辑"] = () => openMenuDialog(menu);
+  }
+
+  if (hasPermission("sys:menu:delete")) {
+    actions.push("删除");
+    actionMap["删除"] = async () => {
+      const { confirm } = await uni.showModal({
+        title: "确认删除",
+        content: `确定要删除菜单「${menu.name}」吗？`,
+      });
+      if (confirm) {
+        await MenuAPI.deleteById(menu.id!);
+        toast.success("删除成功");
+        loadMenuList();
+      }
+    };
+  }
+
+  if (actions.length === 0) {
+    toast.warning("暂无操作权限");
+    return;
+  }
+
+  uni.showActionSheet({
+    itemList: actions,
+    success: ({ tapIndex }) => {
+      const action = actions[tapIndex];
+      actionMap[action]?.();
+    },
+  });
+}
+
+// 打开弹窗（新增/编辑）
+async function openMenuDialog(menu?: MenuVO) {
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+  parentSelected.value = [];
+  dialog.visible = true;
+
+  const data = await MenuAPI.getOptions(true);
+  parentOptions.value = data;
+  const firstColumn: OptionType[] = [{ value: "0", label: "顶级菜单" }, ...data];
+  parentColumns.value = [firstColumn];
+
+  if (menu) {
+    formData.id = menu.id;
+    const form = await MenuAPI.getFormData(menu.id!);
+    Object.assign(formData, form, { id: menu.id });
+
+    if (form.parentId && String(form.parentId) !== "0") {
+      const path = findMenuPath(data, String(form.parentId));
+      if (path) {
+        parentSelected.value = path;
+        const columns: OptionType[][] = [firstColumn];
+        let currentLevel = data;
+        for (let i = 0; i < path.length - 1; i++) {
+          const found = currentLevel.find((item) => String(item.value) === String(path[i]));
+          if (found && found.children && found.children.length > 0) {
+            columns.push(found.children);
+            currentLevel = found.children;
+          } else {
+            break;
+          }
+        }
+        parentColumns.value = columns;
+      } else {
+        parentSelected.value = [String(form.parentId)];
+      }
+    }
+  }
+}
+
+// 新增子菜单
+function handleAddChild(menu: MenuVO) {
+  openMenuDialog({ id: undefined, parentId: menu.id } as MenuVO);
+  formData.parentId = menu.id!;
+  parentSelected.value = [menu.id!];
+}
+
+// 提交表单
+function submitMenuForm() {
+  formRef.value.validate().then(({ valid }: { valid: boolean }) => {
+    if (!valid) return;
+    submitting.value = true;
+    const action = formData.id ? MenuAPI.update(formData.id, formData) : MenuAPI.add(formData);
+    action
+      .then(() => {
+        toast.success("操作成功");
+        closeMenuDialog();
+        loadMenuList();
+      })
+      .finally(() => {
+        submitting.value = false;
+      });
+  });
+}
+
+// 关闭弹窗
+function closeMenuDialog() {
+  dialog.visible = false;
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+}
+
+onLoad(() => {
+  loadMenuList();
+});
+</script>
+
+<script lang="ts">
+export default { options: { styleIsolation: "shared" } };
 </script>
 
 <route lang="json">
 {
   "name": "menu",
-  "style": { "navigationBarTitleText": "菜单管理" }
+  "style": {
+    "navigationBarTitleText": "菜单管理"
+  }
 }
 </route>
 
 <style lang="scss" scoped>
-.page {
-  min-height: 100vh;
-  background-color: #f8fafc;
-}
-
-.placeholder {
+.popup-actions {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 300rpx;
-
-  &__text {
-    font-size: 14px;
-    color: #94a3b8;
-  }
+  gap: 24rpx;
+  margin-top: 32rpx;
 }
 </style>
diff --git a/src/pages/work/monitor/index.vue b/src/pages/work/monitor/index.vue
new file mode 100644
index 0000000..1fce29e
--- /dev/null
+++ b/src/pages/work/monitor/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <view class="page">
+    <web-view :src="monitorUrl" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+// SpringBoot Admin 监控地址
+const monitorUrl = ref("http://localhost:9090/wallboard");
+</script>
+
+<style lang="scss" scoped>
+.page {
+  width: 100%;
+  height: 100vh;
+}
+</style>
+
+<route lang="json">
+{
+  "name": "monitor",
+  "style": { "navigationBarTitleText": "应用监控" }
+}
+</route>
diff --git a/src/pages/work/notice/index.vue b/src/pages/work/notice/index.vue
index 67f56b0..8e244b2 100644
--- a/src/pages/work/notice/index.vue
+++ b/src/pages/work/notice/index.vue
@@ -1,273 +1,388 @@
 <template>
-  <view>
-    <!-- 添加搜索栏 -->
-    <wd-drop-menu close-on-click-modal class="mb-20rpx mr-20rpx ml-20rpx">
-      <wd-drop-menu-item ref="dropMenu" title="筛选" icon="filter" icon-size="18px">
-        <view>
-          <wd-input
-            v-model="queryParams.title"
-            label="关键字"
-            type="text"
-            placeholder="请输入关键字"
-          />
-
-          <view class="flex flex-row items-center mb-20rpx">
-            <wd-button class="mt-20rpx mb-20rpx" size="medium" @click="handleQuery()">
-              查询
-            </wd-button>
-            <wd-button size="medium" type="info" @click="handleReset">重置</wd-button>
-          </view>
-        </view>
-      </wd-drop-menu-item>
-    </wd-drop-menu>
-
-    <!-- 列表内容 -->
-    <view class="data-container">
-      <view v-for="(item, index) in dataList" :key="index" class="mt-20rpx">
-        <wd-card>
-          <template #title>
-            <view class="flex items-center justify-between">
-              <view class="flex-1 text-truncate">{{ item.title }}</view>
-              <wd-tag :type="getStatusType(item.publishStatus)" size="small">
-                {{ getStatusText(item.publishStatus) }}
-              </wd-tag>
-            </view>
-          </template>
-
-          <wd-cell-group>
-            <wd-cell title="通告目标类型" :value="item.targetType === 1 ? '指定' : '全体'" />
-            <wd-cell title="紧急程度">
-              <template #default>
-                <text>{{ getLevelText(item.level) }}</text>
-              </template>
-            </wd-cell>
-            <wd-cell title="发布人" :value="item.publisherName || '-'" />
-          </wd-cell-group>
-          <template #footer>
-            <view class="flex-between">
-              <view v-if="item.publishStatus === 1" class="text-left">
-                <wd-text text="发布时间：" size="small" class="font-bold" />
-                <wd-text :text="formatDate(item.publishTime)" size="small" />
-              </view>
-              <view v-else class="text-left">
-                <wd-text text="撤回时间：" size="small" class="font-bold" />
-                <wd-text :text="formatDate(item.revokeTime)" size="small" />
-              </view>
-              <view class="text-right">
-                <wd-button size="small" plain type="primary" @click="handleAction(item)">
-                  操作
-                </wd-button>
-              </view>
-            </view>
-          </template>
-        </wd-card>
-      </view>
+  <view class="page page--padding page--pt">
+    <view>
+      <wd-search
+        v-model="queryParams.title"
+        placeholder="搜索通知标题"
+        hide-cancel
+        @search="handleSearch"
+      />
     </view>
 
-    <!-- 加载更多 -->
-    <wd-loadmore custom-class="loadmore" :state="loadState" />
+    <!-- 通知列表 -->
+    <view class="mt-16rpx">
+      <wd-card
+        v-for="item in pageData"
+        :key="item.id"
+        custom-class="item-card"
+        @click="openNoticeDetail(item)"
+      >
+        <!-- 主信息行 -->
+        <view class="flex-start">
+          <view class="flex-1">
+            <view class="flex-start mt-12rpx">
+              <text class="font-bold text-32rpx">{{ item.title }}</text>
+            </view>
+            <text class="text-24rpx color-text-secondary">
+              {{ item.publisherName || "系统管理员" }}
+            </text>
+          </view>
+          <wd-tag :type="getStatusType(item.publishStatus)" plain>
+            {{ getStatusText(item.publishStatus) }}
+          </wd-tag>
+        </view>
+
+        <!-- 辅助信息行 -->
+        <view class="flex gap-24rpx mt-12rpx">
+          <view class="flex-start min-w-0">
+            <wd-icon name="user" size="16" class="color-text-secondary" />
+            <text class="ml-8rpx text-24rpx color-text-secondary">
+              {{ item.targetType === 1 ? "全体" : "指定用户" }}
+            </text>
+          </view>
+          <view class="flex-start min-w-0">
+            <wd-icon name="warning" size="16" class="color-text-secondary" />
+            <text class="ml-8rpx text-24rpx color-text-secondary">
+              {{ getLevelText(item.level) }}
+            </text>
+          </view>
+        </view>
+
+        <!-- 元信息行 -->
+        <view class="flex-between mt-16rpx">
+          <text class="text-24rpx color-text-placeholder">{{ formatTime(item) }}</text>
+          <view
+            class="w-64rpx h-64rpx flex-center rounded-full"
+            hover-class="bg-[var(--color-text-placeholder)]/16"
+            @click.stop="showNoticeActions(item)"
+          >
+            <wd-icon name="more" size="16" class="color-text-secondary" />
+          </view>
+        </view>
+      </wd-card>
+
+      <wd-loadmore v-if="total > 0" :state="loadMoreState" @reload="fetchNoticeList" />
+      <wd-status-tip v-else-if="total === 0" image="search" tip="暂无数据" />
+    </view>
+
+    <!-- 详情弹窗 -->
+    <wd-popup
+      v-model="detailDialog.visible"
+      position="bottom"
+      custom-style="border-radius: 24rpx 24rpx 0 0"
+      @close="closeNoticeDetail"
+    >
+      <view class="p-4">
+        <view class="text-center font-bold text-32rpx mb-4">通知详情</view>
+        <wd-cell-group border>
+          <wd-cell title="标题" :value="noticeDetail.title" />
+          <wd-cell title="发布状态">
+            <template #default>
+              <wd-tag :type="getStatusType(noticeDetail.publishStatus)" size="small">
+                {{ getStatusText(noticeDetail.publishStatus) }}
+              </wd-tag>
+            </template>
+          </wd-cell>
+          <wd-cell title="发布人" :value="noticeDetail.publisherName" />
+          <wd-cell title="发布时间" :value="String(noticeDetail.publishTime || '-')" />
+        </wd-cell-group>
+        <view class="mt-4 p-4 bg-[var(--color-bg-secondary)] rounded-lg">
+          <rich-text :nodes="noticeDetail.content" class="text-28rpx" />
+        </view>
+        <view class="popup-actions">
+          <wd-button type="info" plain block @click="closeNoticeDetail">关闭</wd-button>
+        </view>
+      </view>
+    </wd-popup>
+
+    <!-- 新增/编辑弹窗 -->
+    <wd-popup
+      v-model="formDialog.visible"
+      position="bottom"
+      custom-style="border-radius: 24rpx 24rpx 0 0"
+      @close="closeNoticeForm"
+    >
+      <view class="p-4">
+        <view class="text-center font-bold text-32rpx mb-4">
+          {{ formData.id ? "编辑通知" : "新增通知" }}
+        </view>
+        <wd-form ref="formRef" :model="formData" :rules="formRules">
+          <wd-cell-group border>
+            <wd-input v-model="formData.title" label="标题" required placeholder="请输入通知标题" />
+            <wd-cell title="优先级">
+              <wd-radio-group v-model="formData.level" shape="button">
+                <wd-radio value="L">低</wd-radio>
+                <wd-radio value="M">中</wd-radio>
+                <wd-radio value="H">高</wd-radio>
+              </wd-radio-group>
+            </wd-cell>
+            <wd-cell title="目标类型">
+              <wd-radio-group v-model="formData.targetType" shape="button">
+                <wd-radio :value="1">全体</wd-radio>
+                <wd-radio :value="2">指定用户</wd-radio>
+              </wd-radio-group>
+            </wd-cell>
+            <wd-textarea
+              v-model="formData.content"
+              label="内容"
+              placeholder="请输入通知内容"
+              :maxlength="500"
+              show-word-limit
+            />
+          </wd-cell-group>
+        </wd-form>
+        <view class="popup-actions">
+          <wd-button type="info" plain @click="closeNoticeForm">取消</wd-button>
+          <wd-button type="primary" :loading="submitting" @click="submitNoticeForm">保存</wd-button>
+        </view>
+      </view>
+    </wd-popup>
+
+    <view
+      v-if="hasPermission('sys:notice:create') && !formDialog.visible && !detailDialog.visible"
+      class="fab-add"
+      @click.stop="openNoticeForm()"
+    >
+      <wd-icon name="add" size="44rpx" />
+    </view>
   </view>
 </template>
 
 <script lang="ts" setup>
+import { onLoad, onReachBottom } from "@dcloudio/uni-app";
 import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
-import { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
-import NoticeAPI, { NoticePageQuery, NoticePageVO } from "@/api/notice";
-const loadState = ref<LoadMoreState>("finished");
-const dataList = ref<NoticePageVO[]>([]);
+import { FormRules } from "wot-design-uni/components/wd-form/types";
+import { useToast } from "wot-design-uni";
+import NoticeAPI, {
+  type NoticePageQuery,
+  NoticePageVO,
+  NoticeDetailVO,
+  NoticeForm,
+} from "@/api/notice";
+import { hasPermission } from "@/utils/permission";
+
+const toast = useToast();
+const loadMoreState = ref<LoadMoreState>("loading");
+const formRef = ref();
+const submitting = ref(false);
+
+const queryParams = reactive<NoticePageQuery>({ pageNum: 1, pageSize: 10 });
 const total = ref(0);
+const pageData = ref<NoticePageVO[]>([]);
 
-// 修改查询参数
-const queryParams = ref<NoticePageQuery>({
-  pageNum: 1,
-  pageSize: 10,
-  title: "",
-});
+const noticeDetail = ref<NoticeDetailVO>({});
+const detailDialog = reactive({ visible: false });
 
-// 添加搜索处理函数
-const dropMenu = ref<DropMenuItemExpose>();
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  loadMore();
-  dropMenu.value?.close();
+const formDialog = reactive({ visible: false });
+const initialFormData: NoticeForm = {
+  id: undefined,
+  title: undefined,
+  content: undefined,
+  type: undefined,
+  level: "M",
+  targetType: 1,
+  targetUserIds: undefined,
 };
+const formData = reactive<NoticeForm>({ ...initialFormData });
 
-// 重置
-const handleReset = () => {
-  queryParams.value = { pageNum: 1, pageSize: 10 };
-  dropMenu.value?.close();
-  loadMore();
+const formRules: FormRules = {
+  title: [{ required: true, message: "请输入通知标题" }],
 };
 
 // 获取状态样式
 const getStatusType = (
-  status: number | undefined
+  status?: number
 ): "default" | "primary" | "danger" | "warning" | "success" => {
-  if (!status) return "default";
-  const statusMap: Record<number, "default" | "primary" | "danger" | "warning" | "success"> = {
+  const map: Record<number, "default" | "primary" | "danger" | "warning" | "success"> = {
     0: "primary",
     1: "success",
     [-1]: "warning",
   };
-  return statusMap[status] || "default";
+  return status !== undefined ? map[status] || "default" : "default";
 };
 
 // 获取状态文本
-const getStatusText = (status: number | undefined): string => {
-  if (status !== 0 && !status) return "-";
-  const statusMap: Record<number, string> = {
-    0: "未发布",
-    1: "已发布",
-    [-1]: "已撤回",
-  };
-  return statusMap[status] || "未知";
+const getStatusText = (status?: number): string => {
+  const map: Record<number, string> = { 0: "未发布", 1: "已发布", [-1]: "已撤回" };
+  return status !== undefined ? map[status] || "未知" : "-";
 };
 
 // 获取级别文本
-const getLevelText = (level: string | number | undefined): string => {
-  if (!level) return "-";
-  const levelMap: Record<string, string> = {
-    L: "低",
-    M: "中",
-    H: "高",
+const getLevelText = (level?: string | number): string => {
+  const map: Record<string, string> = { L: "低", M: "中", H: "高" };
+  return level ? map[String(level)] || String(level) : "-";
+};
+
+// 格式化时间
+const formatTime = (item: NoticePageVO): string => {
+  if (item.publishStatus === 1 && item.publishTime) {
+    return String(item.publishTime);
+  }
+  if (item.publishStatus === -1 && item.revokeTime) {
+    return String(item.revokeTime);
+  }
+  return "-";
+};
+
+// 搜索触发
+const handleSearch = () => loadNoticeList();
+
+// 加载列表
+function loadNoticeList() {
+  queryParams.pageNum = 1;
+  fetchNoticeList();
+}
+
+// 分页加载列表
+function fetchNoticeList() {
+  loadMoreState.value = "loading";
+  NoticeAPI.getPage(queryParams)
+    .then((data) => {
+      pageData.value = data.list;
+      total.value = data.total;
+      queryParams.pageNum++;
+    })
+    .catch(() => {
+      pageData.value = [];
+    })
+    .finally(() => {
+      loadMoreState.value = "finished";
+    });
+}
+
+// 打开详情弹窗
+async function openNoticeDetail(item: NoticePageVO) {
+  const detail = await NoticeAPI.getDetail(item.id);
+  noticeDetail.value = detail;
+  detailDialog.visible = true;
+}
+
+// 关闭详情弹窗
+function closeNoticeDetail() {
+  detailDialog.visible = false;
+}
+
+// 打开表单弹窗
+async function openNoticeForm(id?: number) {
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+  formDialog.visible = true;
+  if (id) {
+    formData.id = id;
+    const data = await NoticeAPI.getFormData(id);
+    Object.assign(formData, data, { id });
+  }
+}
+
+// 关闭表单弹窗
+function closeNoticeForm() {
+  formDialog.visible = false;
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+}
+
+// 提交表单
+function submitNoticeForm() {
+  formRef.value.validate().then(({ valid }: { valid: boolean }) => {
+    if (!valid) return;
+    submitting.value = true;
+    const id = formData.id;
+    const action = id ? NoticeAPI.update(id, formData) : NoticeAPI.add(formData);
+    action
+      .then(() => {
+        toast.success("操作成功");
+        closeNoticeForm();
+        loadNoticeList();
+      })
+      .finally(() => {
+        submitting.value = false;
+      });
+  });
+}
+
+// 更多操作
+function showNoticeActions(item: NoticePageVO) {
+  const actions: string[] = ["查看"];
+  const actionMap: Record<string, () => void> = {
+    查看: () => openNoticeDetail(item),
   };
-  return levelMap[String(level)] || String(level);
-};
 
-// 格式化日期
-const formatDate = (date: Date | undefined): string => {
-  return date ? date.toString() : "-";
-};
-
-// 加载更多
-const loadMore = async () => {
-  if (loadState.value === "loading") return;
-
-  loadState.value = "loading";
-  const { list, total: totalCount } = await NoticeAPI.getPage(queryParams.value);
-
-  if (queryParams.value.pageNum === 1) {
-    dataList.value = list;
+  if (item.publishStatus !== 1) {
+    if (hasPermission("sys:notice:update")) {
+      actions.push("编辑");
+      actionMap["编辑"] = () => openNoticeForm(Number(item.id));
+    }
+    if (hasPermission("sys:notice:delete")) {
+      actions.push("删除");
+      actionMap["删除"] = async () => {
+        const { confirm } = await uni.showModal({
+          title: "确认删除",
+          content: `确定要删除通知「${item.title}」吗？`,
+        });
+        if (confirm) {
+          await NoticeAPI.deleteByIds(item.id);
+          toast.success("删除成功");
+          loadNoticeList();
+        }
+      };
+    }
+    if (hasPermission("sys:notice:publish")) {
+      actions.push("发布");
+      actionMap["发布"] = async () => {
+        const { confirm } = await uni.showModal({
+          title: "确认发布",
+          content: `确定要发布通知「${item.title}」吗？`,
+        });
+        if (confirm) {
+          await NoticeAPI.publish(Number(item.id));
+          toast.success("发布成功");
+          loadNoticeList();
+        }
+      };
+    }
   } else {
-    dataList.value = [...dataList.value, ...list];
+    if (hasPermission("sys:notice:revoke")) {
+      actions.push("撤回");
+      actionMap["撤回"] = async () => {
+        const { confirm } = await uni.showModal({
+          title: "确认撤回",
+          content: `确定要撤回通知「${item.title}」吗？`,
+        });
+        if (confirm) {
+          await NoticeAPI.revoke(Number(item.id));
+          toast.success("撤回成功");
+          loadNoticeList();
+        }
+      };
+    }
   }
 
-  total.value = totalCount;
-  queryParams.value.pageNum++;
-
-  loadState.value = dataList.value.length >= total.value ? "finished" : "loading";
-};
-
-// 查看详情
-const handleView = (notice: NoticePageVO) => {
-  uni.navigateTo({
-    url: `/pages/work/notice/detail?id=${notice.id}`,
-  });
-};
-
-// 操作按钮
-const handleAction = (notice: NoticePageVO) => {
-  const actions = notice.publishStatus !== 1 ? ["查看", "删除", "发布"] : ["查看", "撤回"];
   uni.showActionSheet({
     itemList: actions,
     success: ({ tapIndex }) => {
-      switch (actions[tapIndex]) {
-        case "查看":
-          handleView(notice);
-          break;
-        case "删除":
-          handleDelete(notice);
-          break;
-        case "发布":
-          handlePublish(notice);
-          break;
-        case "撤回":
-          handleRevoke(notice);
-          break;
-      }
+      const action = actions[tapIndex];
+      actionMap[action]?.();
     },
   });
-};
-
-// 删除
-const handleDelete = (notice: NoticePageVO) => {
-  uni.showModal({
-    title: "提示",
-    content: "确定要删除该通知吗？",
-    success: async (res) => {
-      if (res.confirm) {
-        try {
-          await NoticeAPI.deleteByIds(notice.id);
-          uni.showToast({ title: "删除成功", icon: "success" });
-          // 重新加载第一页
-          queryParams.value.pageNum = 1;
-          loadMore();
-        } catch (error) {
-          uni.showToast({ title: "删除失败" + error, icon: "none" });
-        }
-      }
-    },
-  });
-};
-
-// 发布
-const handlePublish = (notice: NoticePageVO) => {
-  uni.showModal({
-    title: "提示",
-    content: "确定要发布该通知吗？",
-    success: async (res) => {
-      if (res.confirm) {
-        try {
-          await NoticeAPI.publish(Number(notice.id));
-          uni.showToast({ title: "发布成功", icon: "success" });
-          // 重新加载第一页
-          queryParams.value.pageNum = 1;
-          loadMore();
-        } catch (error) {
-          uni.showToast({ title: "发布失败" + error, icon: "none" });
-        }
-      }
-    },
-  });
-};
-
-// 撤回
-const handleRevoke = (notice: NoticePageVO) => {
-  uni.showModal({
-    title: "提示",
-    content: "确定要撤回该通知吗？",
-    success: async (res) => {
-      if (res.confirm) {
-        try {
-          await NoticeAPI.revoke(Number(notice.id));
-          uni.showToast({
-            title: "撤回成功",
-            icon: "success",
-          });
-          // 刷新列表
-          queryParams.value.pageNum = 1;
-          loadMore();
-        } catch (error) {
-          uni.showToast({
-            title: "撤回失败" + error,
-            icon: "error",
-          });
-        }
-      }
-    },
-  });
-};
+}
 
 onReachBottom(() => {
-  if (loadState.value === "loading" || loadState.value === "finished") return;
-  loadMore();
+  if (queryParams.pageNum * queryParams.pageSize < total.value) {
+    fetchNoticeList();
+  } else {
+    loadMoreState.value = "finished";
+  }
 });
 
 onLoad(() => {
-  loadMore();
+  loadNoticeList();
 });
 </script>
 
+<script lang="ts">
+export default { options: { styleIsolation: "shared" } };
+</script>
+
 <route lang="json">
 {
   "name": "notice",
@@ -276,30 +391,3 @@ onLoad(() => {
   }
 }
 </route>
-
-<style lang="scss" scoped>
-.data-container {
-  :deep(.wd-cell__wrapper) {
-    padding: 4rpx 0;
-  }
-
-  :deep(.wd-cell) {
-    padding-right: 10rpx;
-    background: #f8f8f8;
-  }
-
-  :deep(.wd-fab__trigger) {
-    width: 80rpx !important;
-    height: 80rpx !important;
-  }
-
-  .filter-container {
-    padding: 10rpx;
-    background: #fff;
-  }
-
-  .data-container {
-    margin-top: 20rpx;
-  }
-}
-</style>
diff --git a/src/pages/work/role/assign-perm.vue b/src/pages/work/role/assign-perm.vue
new file mode 100644
index 0000000..8fbd068
--- /dev/null
+++ b/src/pages/work/role/assign-perm.vue
@@ -0,0 +1,294 @@
+<template>
+  <view class="page">
+    <!-- 固定头部：搜索栏 + 操作栏 -->
+    <view class="header">
+      <view class="role-bar">
+        <text class="role-bar__label">角色</text>
+        <text class="role-bar__value">{{ roleName || "-" }}</text>
+      </view>
+
+      <view class="action-bar">
+        <view class="action-bar__left">
+          <wd-button size="small" plain @click="handleSelectAll">全选</wd-button>
+          <wd-button size="small" plain @click="handleClearAll">取消全选</wd-button>
+        </view>
+      </view>
+    </view>
+
+    <!-- 可滚动区域：权限树 -->
+    <scroll-view class="tree-container" scroll-y>
+      <custom-tree
+        :data="menuTree"
+        :checkable="true"
+        :checked-keys="checkedKeys"
+        :default-expand-all="true"
+        value-key="id"
+        label-key="name"
+        children-key="children"
+        @check="handleCheck"
+      >
+        <template #content="{ node, checked }">
+          <view class="node-content">
+            <view class="node-content__info">
+              <wd-icon
+                v-if="node.type === 'C'"
+                name="folder"
+                size="18"
+                :color="checked ? 'var(--color-primary)' : 'var(--color-text-secondary)'"
+              />
+              <wd-icon
+                v-else-if="node.type === 'M'"
+                name="menu"
+                size="18"
+                :color="checked ? 'var(--color-primary)' : 'var(--color-text-secondary)'"
+              />
+              <wd-icon
+                v-else
+                name="click"
+                size="16"
+                :color="checked ? 'var(--color-primary)' : 'var(--color-text-secondary)'"
+              />
+              <text class="node-content__label" :class="{ 'is-checked': checked }">
+                {{ node.name }}
+              </text>
+            </view>
+            <wd-tag
+              v-if="node.type"
+              size="small"
+              :type="node.type === 'C' ? 'primary' : node.type === 'M' ? 'success' : 'warning'"
+              plain
+            >
+              {{ node.type === "C" ? "目录" : node.type === "M" ? "菜单" : "按钮" }}
+            </wd-tag>
+          </view>
+        </template>
+      </custom-tree>
+
+      <wd-status-tip v-if="menuTree.length === 0" image="search" tip="暂无菜单数据" />
+    </scroll-view>
+
+    <!-- 固定底部操作栏 -->
+    <view class="bottom-bar">
+      <wd-button type="info" plain @click="handleCancel">取消</wd-button>
+      <wd-button type="primary" :loading="submitting" @click="handleSubmit">保存</wd-button>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { useToast } from "wot-design-uni";
+import MenuAPI, { type MenuVO } from "@/api/menu";
+import RoleAPI from "@/api/role";
+import CustomTree from "@/components/custom-tree/index.vue";
+import type { TreeOption } from "@/components/custom-tree/index.vue";
+
+const toast = useToast();
+const submitting = ref(false);
+const roleId = ref<number>(0);
+const roleName = ref("");
+const menuList = ref<MenuVO[]>([]);
+const checkedKeys = ref<string[]>([]);
+
+// 转换菜单为树结构
+const menuTree = computed<TreeOption[]>(() => {
+  if (!menuList.value.length) return [];
+  return transformMenuToTree(menuList.value);
+});
+
+// 转换菜单为树组件格式
+function transformMenuToTree(menus: MenuVO[]): TreeOption[] {
+  return menus.map((menu) => {
+    const id = String(menu.id);
+    const name = menu.name ?? "";
+    return {
+      value: id,
+      label: name,
+      id,
+      name,
+      type: menu.type,
+      children: menu.children ? transformMenuToTree(menu.children) : undefined,
+    };
+  });
+}
+
+// 处理选中变化
+function handleCheck(keys: string[]) {
+  checkedKeys.value = keys;
+}
+
+// 全选
+function handleSelectAll() {
+  const allIds = getAllMenuIds(menuList.value);
+  checkedKeys.value = allIds;
+}
+
+// 取消全选
+function handleClearAll() {
+  checkedKeys.value = [];
+}
+
+// 获取所有菜单ID
+function getAllMenuIds(menus: MenuVO[]): string[] {
+  const ids: string[] = [];
+  function traverse(list: MenuVO[]) {
+    for (const menu of list) {
+      if (menu.id) ids.push(String(menu.id));
+      if (menu.children) traverse(menu.children);
+    }
+  }
+  traverse(menus);
+  return ids;
+}
+
+// 取消
+function handleCancel() {
+  uni.navigateBack();
+}
+
+// 提交
+async function handleSubmit() {
+  submitting.value = true;
+  try {
+    await RoleAPI.updateRoleMenus(roleId.value, checkedKeys.value.map(Number));
+    toast.success("保存成功");
+    uni.navigateBack();
+  } finally {
+    submitting.value = false;
+  }
+}
+
+// 加载数据
+async function loadData() {
+  try {
+    // 并行加载菜单列表和角色已有权限
+    const [menus, roleMenuIds, roleForm] = await Promise.all([
+      MenuAPI.getList(),
+      RoleAPI.getRoleMenuIds(roleId.value),
+      RoleAPI.getFormData(roleId.value),
+    ]);
+    menuList.value = menus;
+    checkedKeys.value = roleMenuIds.map(String);
+    roleName.value = roleForm?.name ?? "";
+  } catch {
+    toast.error("加载失败");
+  }
+}
+
+onLoad((query) => {
+  if (query?.id) {
+    roleId.value = Number(query.id);
+    loadData();
+  }
+});
+</script>
+
+<script lang="ts">
+export default { options: { styleIsolation: "shared" } };
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: var(--color-bg);
+}
+
+.header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12rpx 24rpx;
+  background: var(--color-bg);
+  border-bottom: 2rpx solid var(--color-border-light);
+}
+
+.role-bar {
+  display: flex;
+  gap: 16rpx;
+  align-items: center;
+
+  &__label {
+    font-size: 24rpx;
+    color: var(--color-text-secondary);
+  }
+
+  &__value {
+    flex: 1;
+    overflow: hidden;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.action-bar {
+  &__left {
+    display: flex;
+    gap: 16rpx;
+  }
+}
+
+.tree-container {
+  flex: 1;
+  height: 0; // 重要：让 flex + scroll-view 生效
+  background: var(--color-bg);
+}
+
+.node-content {
+  display: flex;
+  flex: 1;
+  gap: 16rpx;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 0;
+
+  &__info {
+    display: flex;
+    gap: 16rpx;
+    min-width: 0;
+  }
+
+  &__label {
+    overflow: hidden;
+    font-size: 28rpx;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.is-checked {
+      color: var(--color-primary);
+    }
+  }
+}
+
+.node-content :deep(.wd-tag) {
+  margin-left: auto;
+}
+
+.bottom-bar {
+  display: flex;
+  flex-shrink: 0;
+  gap: 24rpx;
+  padding: 24rpx;
+  background: var(--color-bg);
+  box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.05);
+}
+
+:deep(.bottom-bar .wd-button) {
+  flex: 1;
+}
+</style>
+
+<route lang="json">
+{
+  "name": "role-assign-perm",
+  "style": {
+    "navigationBarTitleText": "分配权限"
+  }
+}
+</route>
diff --git a/src/pages/work/role/index.vue b/src/pages/work/role/index.vue
index 2415334..07b1df8 100644
--- a/src/pages/work/role/index.vue
+++ b/src/pages/work/role/index.vue
@@ -1,309 +1,287 @@
 <template>
-  <view class="role">
-    <!-- 筛选 -->
-    <wd-drop-menu>
-      <wd-drop-menu-item ref="filterDropMenu" icon="filter" icon-size="18px" title="筛选">
-        <view>
-          <wd-input
-            v-model="queryParams.keywords"
-            label="关键字"
-            type="text"
-            placeholder="请输入关键字"
-          />
-          <view class="flex-between py-2">
-            <wd-button custom-class="w-20%" type="info" @click="handleResetQuery">重置</wd-button>
-            <wd-button custom-class="w-70%" @click="handleQuery">确定</wd-button>
+  <view class="page page--padding page--pt">
+    <view>
+      <wd-search
+        v-model="queryParams.keywords"
+        placeholder="搜索角色名称/编码"
+        hide-cancel
+        @search="handleSearch"
+      />
+    </view>
+
+    <!-- 角色列表 -->
+    <view class="mt-16rpx">
+      <wd-card
+        v-for="item in pageData"
+        :key="item.id"
+        custom-class="item-card"
+        @click="openRoleDialog(item.id)"
+      >
+        <!-- 主信息行 -->
+        <view class="flex-start">
+          <view class="flex-1">
+            <view class="flex-start mt-12rpx">
+              <text class="font-bold text-32rpx">{{ item.name }}</text>
+            </view>
+            <text class="text-24rpx color-text-secondary">{{ item.code }}</text>
+          </view>
+          <wd-tag :type="item.status === 1 ? 'success' : 'danger'" plain>
+            {{ item.status === 1 ? "正常" : "禁用" }}
+          </wd-tag>
+        </view>
+
+        <!-- 辅助信息行 -->
+        <view class="flex gap-24rpx mt-12rpx">
+          <view class="flex-start min-w-0">
+            <wd-icon name="view" size="16" class="color-text-secondary" />
+            <text class="ml-8rpx text-24rpx color-text-secondary">{{ item.dataScopeLabel }}</text>
+          </view>
+          <view class="flex-start min-w-0">
+            <wd-icon name="sort" size="16" class="color-text-secondary" />
+            <text class="ml-8rpx text-24rpx color-text-secondary">排序: {{ item.sort }}</text>
           </view>
         </view>
-      </wd-drop-menu-item>
-    </wd-drop-menu>
-    <!-- 卡片列表 -->
-    <view class="list-container">
-      <wd-card v-for="item in dataList" :key="item.id" class="role-card">
-        <template #title>
-          <view class="flex-between">
-            <view class="flex-center">
-              <view class="ml-2">
-                <view class="font-bold">
-                  {{ item.name }}
-                </view>
-              </view>
-            </view>
-            <view>
-              <wd-tag v-if="item.status === 1" type="success" plain>正常</wd-tag>
-              <wd-tag v-else-if="item.status === 0" plain>停用</wd-tag>
-            </view>
-          </view>
-        </template>
 
-        <wd-cell-group>
-          <wd-cell title="编码" title-width="150rpx" :value="item.code" />
-          <wd-cell title="排序号" title-width="150rpx" :value="item.sort" />
-        </wd-cell-group>
-
-        <template #footer>
-          <view class="flex-between">
-            <view class="text-left">
-              <wd-text text="创建时间：" size="small" class="font-bold" />
-              <wd-text :text="item.createTime" size="small" />
-            </view>
-            <view class="flex-right">
-              <wd-button size="small" plain @click="handleAction(item)">操作</wd-button>
-            </view>
+        <!-- 元信息行 -->
+        <view class="flex-between mt-16rpx">
+          <text class="text-24rpx color-text-placeholder">{{ item.createTime }}</text>
+          <view
+            class="w-88rpx h-88rpx flex-center rounded-full"
+            hover-class="bg-[var(--color-text-placeholder)]/16"
+            @click.stop="showRoleActions(item)"
+          >
+            <wd-icon name="more" size="18" class="color-text-secondary" />
           </view>
-        </template>
+        </view>
       </wd-card>
 
-      <!-- 加载更多 -->
-      <wd-loadmore :state="loadMoreState" @reload="queryPageData" />
+      <wd-loadmore v-if="total > 0" :state="loadMoreState" @reload="fetchRoleList" />
+      <wd-status-tip v-else-if="total === 0" image="search" tip="暂无数据" />
     </view>
-    <!-- 底部按钮 -->
-    <wd-fab
-      position="left-bottom"
-      :expandable="false"
-      customStyle="width: 1rem; height: 1rem; line-height: 1rem;z-index:9"
-      @click="handleOpenDialog()"
-    />
 
-    <wd-popup v-model="dialog.visible" position="bottom" custom-class="yl_popup">
-      <wd-form ref="roleFormRef" :model="formData" :rules="rules">
-        <wd-cell-group border>
-          <wd-input v-model="formData.name" label="角色名称" prop="name" />
-          <wd-input v-model="formData.code" label="角色编码" prop="code" />
-          <wd-select-picker
-            v-model="formData.dataScope"
-            type="radio"
-            label="数据权限"
-            :columns="dataScopeOptions"
-            :align-right="true"
-            prop="dataScope"
-          />
-          <wd-cell title="状态" prop="status">
-            <wd-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
-          </wd-cell>
-          <wd-cell title="排序" prop="sort">
-            <wd-input-number v-model="formData.sort" />
-          </wd-cell>
-        </wd-cell-group>
-      </wd-form>
-      <view class="footer">
-        <wd-button type="primary" block @click="handleSubmit">提交</wd-button>
+    <!-- 弹窗表单 -->
+    <wd-popup
+      v-model="dialog.visible"
+      position="bottom"
+      custom-style="border-radius: 24rpx 24rpx 0 0"
+      @close="closeRoleDialog"
+    >
+      <view class="p-4">
+        <view class="text-center font-bold text-32rpx mb-4">
+          {{ formData.id ? "编辑角色" : "新增角色" }}
+        </view>
+        <wd-form ref="formRef" :model="formData" :rules="rules">
+          <wd-cell-group border>
+            <wd-input v-model="formData.name" label="角色名称" required />
+            <wd-input v-model="formData.code" label="角色编码" required />
+            <wd-select-picker
+              v-model="formData.dataScope"
+              label="数据权限"
+              :columns="dataScopeOptions"
+              required
+            />
+            <wd-cell title="状态">
+              <wd-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
+            </wd-cell>
+            <wd-cell title="排序">
+              <wd-input-number v-model="formData.sort" :min="0" />
+            </wd-cell>
+          </wd-cell-group>
+        </wd-form>
+        <view class="popup-actions">
+          <wd-button type="info" plain @click="closeRoleDialog">取消</wd-button>
+          <wd-button type="primary" :loading="submitting" @click="submitRoleForm">保存</wd-button>
+        </view>
       </view>
     </wd-popup>
-    <wd-message-box />
+
+    <!-- 浮动新增按钮 -->
+    <view
+      v-if="hasPermission('sys:role:create') && !dialog.visible"
+      class="fab-add"
+      hover-class="fab-add:active"
+      @click.stop="openRoleDialog()"
+    >
+      <wd-icon name="add" size="44rpx" />
+    </view>
   </view>
 </template>
+
 <script lang="ts" setup>
-import RoleAPI, { RolePageVO, RolePageQuery, RoleForm } from "@/api/role";
-import { useUserStore } from "@/store";
 import { onLoad, onReachBottom } from "@dcloudio/uni-app";
 import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
-import { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
-import { FormInstance } from "wot-design-uni/components/wd-form/types";
 import { FormRules } from "wot-design-uni/components/wd-form/types";
-import { useMessage } from "wot-design-uni";
-const message = useMessage();
+import { useToast } from "wot-design-uni";
+import RoleAPI, { type RolePageQuery, RolePageVO, RoleForm } from "@/api/role";
+import { hasPermission } from "@/utils/permission";
 
+const toast = useToast();
 const loadMoreState = ref<LoadMoreState>("loading");
+const formRef = ref();
+const submitting = ref(false);
 
+const queryParams = reactive<RolePageQuery>({ pageNum: 1, pageSize: 10, keywords: "" });
 const total = ref(0);
+const pageData = ref<RolePageVO[]>([]);
+const dialog = reactive({ visible: false });
 
-const queryParams = reactive<RolePageQuery>({
-  pageNum: 1,
-  pageSize: 10,
-});
-
-/**
- * 搜索栏
- */
-const filterDropMenu = ref<DropMenuItemExpose>();
-
-function handleQuery() {
-  filterDropMenu.value?.close();
-  queryParams.pageNum = 1;
-  dataList.value = [];
-  queryPageData();
-}
-/**
- * 重置查询
- */
-const handleResetQuery = () => {
-  filterDropMenu.value?.close();
-  queryParams.keywords = "";
-  queryParams.pageNum = 1;
-  dataList.value = [];
-  queryPageData();
+const initialFormData: RoleForm = {
+  id: undefined,
+  name: undefined,
+  code: undefined,
+  dataScope: 1,
+  status: 1,
+  sort: 1,
 };
 
-// 角色列表数据
-const dataList = ref<RolePageVO[]>([]);
+const formData = reactive<RoleForm>({ ...initialFormData });
 
-/**
- * 查询分页数据
- */
-function queryPageData() {
+const dataScopeOptions = ref<Record<string, any>[]>([
+  { label: "全部数据", value: 1 },
+  { label: "部门及子部门数据", value: 2 },
+  { label: "本部门数据", value: 3 },
+  { label: "本人数据", value: 4 },
+  { label: "自定义部门数据", value: 5 },
+]);
+
+const rules: FormRules = {
+  name: [{ required: true, message: "请输入角色名称" }],
+  code: [{ required: true, message: "请输入角色编码" }],
+  dataScope: [{ required: true, message: "请选择数据权限" }],
+};
+
+// 搜索触发
+const handleSearch = () => loadRoleList();
+
+// 加载列表
+function loadRoleList() {
+  queryParams.pageNum = 1;
+  fetchRoleList();
+}
+
+// 分页加载列表
+function fetchRoleList() {
   loadMoreState.value = "loading";
   RoleAPI.getPage(queryParams)
     .then((data) => {
-      dataList.value?.push(...data.list);
+      pageData.value = data.list;
       total.value = data.total;
+      queryParams.pageNum++;
     })
-    .catch((e) => {
-      console.log("系统异常", e);
+    .catch(() => {
+      pageData.value = [];
     })
     .finally(() => {
       loadMoreState.value = "finished";
     });
 }
 
-/**
- * 触底事件
- */
-onReachBottom(() => {
-  if (queryParams.pageNum * queryParams.pageSize < total.value) {
-    queryParams.pageNum++;
-    queryPageData();
-  } else {
-    loadMoreState.value = "finished";
+// 打开弹窗（新增/编辑）
+async function openRoleDialog(id?: number) {
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+  dialog.visible = true;
+  if (id) {
+    formData.id = id;
+    const data = await RoleAPI.getFormData(id);
+    Object.assign(formData, data, { id });
+  }
+}
+
+// 提交表单
+function submitRoleForm() {
+  formRef.value.validate().then(({ valid }: { valid: boolean }) => {
+    if (!valid) return;
+    submitting.value = true;
+    const action = formData.id ? RoleAPI.update(formData.id, formData) : RoleAPI.add(formData);
+    action
+      .then(() => {
+        toast.success("操作成功");
+        closeRoleDialog();
+        loadRoleList();
+      })
+      .finally(() => {
+        submitting.value = false;
+      });
+  });
+}
+
+// 关闭弹窗
+function closeRoleDialog() {
+  dialog.visible = false;
+  formRef.value?.reset();
+  Object.assign(formData, initialFormData);
+}
+
+// 更多操作
+function showRoleActions(item: RolePageVO) {
+  const actions: string[] = [];
+  const actionMap: Record<string, () => void> = {};
+
+  // 编辑
+  if (hasPermission("sys:role:update")) {
+    actions.push("编辑");
+    actionMap["编辑"] = () => openRoleDialog(item.id);
+  }
+
+  // 分配权限
+  if (hasPermission("sys:role:assign")) {
+    actions.push("分配权限");
+    actionMap["分配权限"] = () => handleAssignPerm(item.id);
+  }
+
+  // 删除
+  if (hasPermission("sys:role:delete")) {
+    actions.push("删除");
+    actionMap["删除"] = async () => {
+      const { confirm } = await uni.showModal({
+        title: "确认删除",
+        content: `确定要删除角色「${item.name}」吗？`,
+      });
+      if (confirm) {
+        await RoleAPI.deleteByIds(String(item.id));
+        toast.success("删除成功");
+        loadRoleList();
+      }
+    };
+  }
+
+  if (actions.length === 0) {
+    toast.warning("暂无操作权限");
+    return;
   }
-});
 
-// 操作按钮
-const handleAction = (item: RolePageVO) => {
-  const { roles = [], perms = [] } = useUserStore().userInfo || {};
-  const canAssignPerm = roles.includes("ROOT") || perms.includes("sys:role:assign");
-  const actions = canAssignPerm ? ["编辑", "分配权限", "删除"] : ["编辑", "删除"];
   uni.showActionSheet({
     itemList: actions,
     success: ({ tapIndex }) => {
-      switch (actions[tapIndex]) {
-        case "编辑":
-          handleOpenDialog(item.id);
-          break;
-        case "分配权限":
-          handleAssignPerm(item.id);
-          break;
-        case "删除":
-          handleDelete(item.id);
-          break;
-      }
+      const action = actions[tapIndex];
+      actionMap[action]?.();
     },
   });
-};
-
-const dialog = reactive({
-  visible: false,
-});
-
-const dataScopeOptions = ref<Record<string, any>[]>([
-  { label: "全部数据", value: 0 },
-  { label: "部门及子部门数据", value: 1 },
-  { label: "本部门数据", value: 2 },
-  { label: "本人数据", value: 3 },
-]);
-
-const formData = reactive<RoleForm>({
-  dataScope: 0,
-  sort: 1,
-});
-
-const rules: FormRules = {
-  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
-  code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
-  dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
-  status: [{ required: true, message: "请选择状态", trigger: "change" }],
-  sort: [{ required: true, message: "请输入排序号", trigger: "change" }],
-};
-
-const roleFormRef = ref<FormInstance>();
-
-/**
- * 打开弹窗
- */
-async function handleOpenDialog(id?: number) {
-  dialog.visible = true;
-  formData.id = undefined;
-  formData.name = "";
-  formData.code = "";
-  formData.dataScope = 0;
-  formData.status = 1;
-  formData.sort = 1;
-  if (id) {
-    RoleAPI.getFormData(id).then((data) => {
-      Object.assign(formData, { ...data });
-    });
-  }
-}
-
-/**
- * 提交保存
- */
-function handleSubmit() {
-  if (roleFormRef.value) {
-    roleFormRef.value.validate().then(({ valid }) => {
-      if (valid) {
-        const roleId = formData.id;
-        if (roleId) {
-          RoleAPI.update(roleId, formData).then(() => {
-            uni.showToast({ title: "修改成功", icon: "success" });
-            dialog.visible = false;
-            queryParams.pageNum = 1;
-            handleQuery();
-          });
-        } else {
-          RoleAPI.add(formData).then(() => {
-            uni.showToast({ title: "添加成功", icon: "success" });
-            dialog.visible = false;
-            queryParams.pageNum = 1;
-            handleQuery();
-          });
-        }
-      }
-    });
-  }
-}
-
-/**
- * 删除
- *
- * @param id  用户id
- */
-function handleDelete(id: number) {
-  message
-    .confirm({
-      msg: "确认删除角色吗？",
-      title: "提示",
-    })
-    .then(() => {
-      RoleAPI.deleteByIds(id + "").then(() => {
-        uni.showToast({ title: "删除成功", icon: "success" });
-        queryParams.pageNum = 1;
-        handleQuery();
-      });
-    })
-    .catch(() => {
-      console.log("点击了取消按钮");
-    });
 }
 
+// 分配权限
 function handleAssignPerm(id: number) {
   uni.navigateTo({
     url: "/pages/work/role/assign-perm?id=" + id,
   });
 }
 
+onReachBottom(() => {
+  if (queryParams.pageNum * queryParams.pageSize < total.value) {
+    fetchRoleList();
+  } else {
+    loadMoreState.value = "finished";
+  }
+});
+
 onLoad(() => {
-  handleQuery();
+  loadRoleList();
 });
 </script>
 
 <script lang="ts">
-// https://wot-design-uni.pages.dev/guide/common-problems#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB
-export default {
-  options: {
-    styleIsolation: "shared",
-  },
-};
+export default { options: { styleIsolation: "shared" } };
 </script>
 
 <route lang="json">
@@ -314,49 +292,3 @@ export default {
   }
 }
 </route>
-
-<style lang="scss" scoped>
-.role {
-  :deep(.wd-drop-menu .wd-drop-menu__item) {
-    display: flex;
-    justify-content: flex-end;
-    padding: 0 50rpx;
-  }
-  .list-container {
-    .role-card {
-      margin-top: 20rpx;
-      :deep(.wd-cell__wrapper) {
-        padding: 4rpx 0;
-      }
-      :deep(.wd-cell) {
-        padding-right: 10rpx;
-        background: #f8f8f8;
-      }
-    }
-  }
-  :deep(.wd-cell__wrapper) {
-    padding: 4rpx 0;
-  }
-
-  :deep(.wd-cell) {
-    padding-right: 10rpx;
-    background: #f8f8f8;
-  }
-
-  :deep(.wd-fab__trigger) {
-    width: 80rpx !important;
-    height: 80rpx !important;
-  }
-  .yl_popup {
-    .footer {
-      margin: 30rpx 0;
-    }
-  }
-  :deep(.w-20per) {
-    width: 20%;
-  }
-  :deep(.w-70per) {
-    width: 70%;
-  }
-}
-</style>
diff --git a/src/pages/work/user/index.vue b/src/pages/work/user/index.vue
index 99dfd8b..8896ea5 100644
--- a/src/pages/work/user/index.vue
+++ b/src/pages/work/user/index.vue
@@ -157,17 +157,14 @@
     </wd-popup>
 
     <!-- 浮动新增按钮 -->
-    <wd-fab
+    <view
       v-if="hasPermission('sys:user:create') && !dialog.visible"
-      position="right-bottom"
-      :expandable="false"
+      class="fab-add"
+      hover-class="fab-add:active"
+      @click.stop="openUserDialog()"
     >
-      <template #trigger>
-        <wd-button custom-class="fab-btn" type="primary" round @click="openUserDialog()">
-          <wd-icon name="add" />
-        </wd-button>
-      </template>
-    </wd-fab>
+      <wd-icon name="add" size="44rpx" />
+    </view>
   </view>
 </template>
 
@@ -216,7 +213,7 @@ const deptOptions = ref<OptionType[]>([]);
 
 // 部门多列选择器数据
 const deptSelected = ref<(string | number)[]>([]);
-const deptColumns = ref<Record<string, any>[]>([]);
+const deptColumns = ref<Record<string, any>[][]>([]);
 
 // 格式化部门展示
 const displayDeptFormat = (selectedItems: Record<string, any>[]) => {
diff --git a/src/static/icons/api.svg b/src/static/icons/api.svg
new file mode 100644
index 0000000..f361cd7
--- /dev/null
+++ b/src/static/icons/api.svg
@@ -0,0 +1 @@
+<svg t="1773314000001" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#409EFF" p-id="10001"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="10002"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="10003"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="10004"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="10005"></path><text x="512" y="600" text-anchor="middle" font-size="380" font-weight="bold" fill="#FFFFFF" font-family="monospace">&lt;/&gt;</text></svg>
diff --git a/src/static/icons/bell.svg b/src/static/icons/bell.svg
new file mode 100644
index 0000000..4c1282e
--- /dev/null
+++ b/src/static/icons/bell.svg
@@ -0,0 +1 @@
+<svg t="1773309328432" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34784" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FEB833" p-id="34785"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="34786"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="34787"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="34788"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="34789"></path><path d="M511.885275 796.26271c38.246129 0 71.204045-22.444282 86.637686-54.848727H425.247588c15.372403 32.343207 48.330319 54.848727 86.637687 54.848727zM744.97124 659.083143h-0.246504c-23.549674-6.640884-40.88946-28.038686-40.88946-53.67977 0-0.43022 0.122477-0.799201 0.122477-1.168181h-0.122477V453.403325h-0.368981c-3.258816-95.000224-72.986937-172.906392-164.236112-188.831492v-3.136339c0-18.938186-15.372403-34.310589-34.311364-34.310589-18.938186 0-34.310589 15.372403-34.310589 34.310589v3.136339c-91.187936 15.925099-160.977296 93.831267-164.236112 188.831492h-0.368981v150.831867h-0.184491c0.061238 1.04493 0.307743 2.029396 0.307743 3.135563 0 23.489211-14.080969 43.657593-34.24935 52.634841C260.009181 663.018683 251.155185 673.717584 251.155185 686.507119c0 15.125899 12.298077 27.423976 27.423976 27.423976h466.268827c15.125899 0 27.423976-12.298077 27.423976-27.423976 0.123252-15.125899-12.174825-27.423976-27.300724-27.423976z" fill="#FFFFFF" p-id="34790"></path></svg>
diff --git a/src/static/icons/browser.png b/src/static/icons/browser.png
deleted file mode 100644
index fbadaa02974f2538215000e029b69b36a6b04afc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3592
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

diff --git a/src/static/icons/browser.svg b/src/static/icons/browser.svg
index ef3c36d..a210362 100644
--- a/src/static/icons/browser.svg
+++ b/src/static/icons/browser.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="#3a8ee6">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="200" height="200" fill="#3a8ee6">
   <rect x="4" y="24" width="8" height="20" rx="2"/>
   <rect x="16" y="14" width="8" height="30" rx="2"/>
   <rect x="28" y="20" width="8" height="24" rx="2"/>
diff --git a/src/static/icons/category.svg b/src/static/icons/category.svg
new file mode 100644
index 0000000..32fccfd
--- /dev/null
+++ b/src/static/icons/category.svg
@@ -0,0 +1 @@
+<svg t="1773313382284" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="51626" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FF822B" p-id="51627"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="51628"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="51629"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="51630"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="51631"></path><path d="M536.641889 258.131718m56.587434 0l116.046099 0q56.587434 0 56.587433 56.587434l0 116.046099q0 56.587434-56.587433 56.587433l-116.046099 0q-56.587434 0-56.587434-56.587433l0-116.046099q0-56.587434 56.587434-56.587434Z" fill="#FFFFFF" p-id="51632"></path><path d="M536.641889 536.647316m56.587434 0l116.046099 0q56.587434 0 56.587433 56.587433l0 116.046099q0 56.587434-56.587433 56.587434l-116.046099 0q-56.587434 0-56.587434-56.587434l0-116.046099q0-56.587434 56.587434-56.587433Z" fill="#FFFFFF" p-id="51633"></path><path d="M258.131718 536.647316m56.587434 0l116.046099 0q56.587434 0 56.587433 56.587433l0 116.046099q0 56.587434-56.587433 56.587434l-116.046099 0q-56.587434 0-56.587434-56.587434l0-116.046099q0-56.587434 56.587434-56.587433Z" fill="#FFFFFF" p-id="51634"></path><path d="M258.131718 258.131718m56.587434 0l116.046099 0q56.587434 0 56.587433 56.587434l0 116.046099q0 56.587434-56.587433 56.587433l-116.046099 0q-56.587434 0-56.587434-56.587433l0-116.046099q0-56.587434 56.587434-56.587434Z" fill="#FFFFFF" p-id="51635"></path></svg>
diff --git a/src/static/icons/company.svg b/src/static/icons/company.svg
new file mode 100644
index 0000000..2d05d43
--- /dev/null
+++ b/src/static/icons/company.svg
@@ -0,0 +1 @@
+<svg t="1773306677298" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7524" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#409EFF" p-id="7525"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="7526"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="7527"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="7528"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="7529"></path><path d="M272.084784 361.616957c0-15.777042 10.589602-29.590577 25.82635-33.686577l238.75246-64.187204C558.824939 257.785217 580.602574 274.481611 580.602574 297.429753V729.435276c0 19.265308-15.617357 34.882665-34.882665 34.882665H306.967449c-19.265308 0-34.882665-15.617357-34.882665-34.882665V361.616957zM598.431491 473.334504c0-20.966807 20.376127-35.888836 40.365445-29.56112l92.245268 29.203767C743.930961 477.057647 752.690386 489.018525 752.690386 502.537496V733.311128c0 17.124288-13.882525 31.006813-31.006813 31.006813H629.438304c-17.124288 0-31.006813-13.882525-31.006813-31.006813V473.334504z" fill="#FFFFFF" p-id="7530"></path><path d="M341.850114 421.692657m15.890991 0l144.956851 0q15.890992 0 15.890992 15.890992l0 0q0 15.890992-15.890992 15.890991l-144.956851 0q-15.890992 0-15.890991-15.890991l0 0q0-15.890992 15.890991-15.890992Z" fill="#51CFFC" p-id="7531"></path><path d="M341.850114 530.991673m15.890991 0l144.956851 0q15.890992 0 15.890992 15.890992l0 0q0 15.890992-15.890992 15.890991l-144.956851 0q-15.890992 0-15.890991-15.890991l0 0q0-15.890992 15.890991-15.890992Z" fill="#51CFFC" p-id="7532"></path><path d="M341.850114 640.290689m15.890991 0l144.956851 0q15.890992 0 15.890992 15.890992l0 0q0 15.890992-15.890992 15.890991l-144.956851 0q-15.890992 0-15.890991-15.890991l0 0q0-15.890992 15.890991-15.890992Z" fill="#51CFFC" p-id="7533"></path></svg>
diff --git a/src/static/icons/dashboard.svg b/src/static/icons/dashboard.svg
new file mode 100644
index 0000000..61eeafc
--- /dev/null
+++ b/src/static/icons/dashboard.svg
@@ -0,0 +1 @@
+<svg t="1773309456108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39997" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#33C7FC" p-id="39998"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="39999"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="40000"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="40001"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="40002"></path><path d="M312.202949 297.665405c-26.433308 0-47.869868 21.435785-47.869868 47.87917v245.925112c0 26.44261 21.43656 47.87917 47.869868 47.87917h400.369272c26.433308 0 47.869868-21.43656 47.869868-47.87917V345.544575C760.442089 319.10119 739.005529 297.665405 712.572221 297.665405H312.202949zM353.545883 682.875446c-12.019016 0-21.759031 9.743116-21.759031 21.762907 0 12.019791 9.740015 21.762907 21.759031 21.762907h322.03521c12.019016 0 21.759031-9.743116 21.759031-21.762907 0-12.019791-9.740015-21.762907-21.759031-21.762907H353.545883z" fill="#FFFFFF" p-id="40003"></path><path d="M631.756064 411.292972c6.008345 6.686619 5.421541 16.945223-1.310813 22.91326l-101.291507 89.794955c-5.958734 5.282786-14.889472 5.511461-21.114089 0.540294l-44.71415-35.705896-44.125796 39.447643c-6.705998 5.995942-17.036693 5.455649-23.072169-1.206165-6.036251-6.661814-5.492082-16.922743 1.213916-22.917911l54.458041-48.684572c5.955634-5.324645 14.920478-5.571924 21.165251-0.585254l44.75911 35.742329 90.964687-80.640969c6.732354-5.967261 17.059949-5.384333 23.067519 1.302286z" fill="#51CFFC" p-id="40004"></path></svg>
diff --git a/src/static/icons/file.svg b/src/static/icons/file.svg
new file mode 100644
index 0000000..18a86ff
--- /dev/null
+++ b/src/static/icons/file.svg
@@ -0,0 +1 @@
+<svg t="1773308797501" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10936" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#5D49FE" p-id="10937"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="10938"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="10939"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="10940"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="10941"></path><path d="M282.937169 255.806207m74.416351 0l310.06813 0q74.416351 0 74.416352 74.416352l0 362.779712q0 74.416351-74.416352 74.416351l-310.06813 0q-74.416351 0-74.416351-74.416351l0-362.779712q0-74.416351 74.416351-74.416352Z" fill="#FFFFFF" p-id="10942"></path><path d="M341.074943 351.152157m21.317184 0l175.963664 0q21.317184 0 21.317184 21.317184l0 0q0 21.317184-21.317184 21.317184l-175.963664 0q-21.317184 0-21.317184-21.317184l0 0q0-21.317184 21.317184-21.317184Z" fill="#7564FE" p-id="10943"></path><path d="M341.074943 438.746404m21.317184 0l300.766086 0q21.317184 0 21.317184 21.317184l0 0q0 21.317184-21.317184 21.317184l-300.766086 0q-21.317184 0-21.317184-21.317184l0 0q0-21.317184 21.317184-21.317184Z" fill="#7564FE" p-id="10944"></path><path d="M341.074943 526.340651m21.317184 0l300.766086 0q21.317184 0 21.317184 21.317184l0 0q0 21.317184-21.317184 21.317184l-300.766086 0q-21.317184 0-21.317184-21.317184l0 0q0-21.317184 21.317184-21.317184Z" fill="#7564FE" p-id="10945"></path><path d="M684.475397 631.763815m0 10.077215l0 0q0 10.077214-10.077214 10.077214l-58.137774 0q-10.077214 0-10.077214-10.077214l0 0q0-10.077214 10.077214-10.077215l58.137774 0q10.077214 0 10.077214 10.077215Z" fill="#7564FE" p-id="10946"></path><path d="M684.475397 661.220288m0 10.077214l0 0q0 10.077214-10.077214 10.077214l-58.137774 0q-10.077214 0-10.077214-10.077214l0 0q0-10.077214 10.077214-10.077214l58.137774 0q10.077214 0 10.077214 10.077214Z" fill="#7564FE" p-id="10947"></path><path d="M684.475397 690.67676m0 10.077214l0 0q0 10.077214-10.077214 10.077214l-58.137774 0q-10.077214 0-10.077214-10.077214l0 0q0-10.077214 10.077214-10.077214l58.137774 0q10.077214 0 10.077214 10.077214Z" fill="#7564FE" p-id="10948"></path></svg>
diff --git a/src/static/icons/git.svg b/src/static/icons/git.svg
new file mode 100644
index 0000000..f8b39af
--- /dev/null
+++ b/src/static/icons/git.svg
@@ -0,0 +1 @@
+<svg t="1773314000002" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F05032" p-id="20001"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="20002"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="20003"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="20004"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="20005"></path><circle cx="320" cy="512" r="60" fill="#FFFFFF"/><circle cx="512" cy="320" r="60" fill="#FFFFFF"/><circle cx="512" cy="704" r="60" fill="#FFFFFF"/><circle cx="704" cy="512" r="60" fill="#FFFFFF"/><line x1="320" y1="512" x2="512" y2="320" stroke="#FFFFFF" stroke-width="24" stroke-linecap="round"/><line x1="320" y1="512" x2="512" y2="704" stroke="#FFFFFF" stroke-width="24" stroke-linecap="round"/><line x1="512" y1="704" x2="704" y2="512" stroke="#FFFFFF" stroke-width="24" stroke-linecap="round"/></svg>
diff --git a/src/static/icons/log.png b/src/static/icons/log.png
deleted file mode 100644
index e9777dbf5176f99dae0a328732daca68e3835d75..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5404
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
GLSTY{6c+^m

diff --git a/src/static/icons/log.svg b/src/static/icons/log.svg
new file mode 100644
index 0000000..15526d9
--- /dev/null
+++ b/src/static/icons/log.svg
@@ -0,0 +1 @@
+<svg t="1773309201915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16777" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FF822B" p-id="16778"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="16779"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="16780"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="16781"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="16782"></path><path d="M304.641938 257.356548m69.765329 0l275.185466 0q69.765329 0 69.765329 69.765329l0 369.756246q0 69.765329-69.765329 69.765329l-275.185466 0q-69.765329 0-69.765329-69.765329l0-369.756246q0-69.765329 69.765329-69.765329Z" fill="#FFFFFF" p-id="16783"></path><path d="M365.105223 341.074943m21.317184 0l153.483725 0q21.317184 0 21.317184 21.317184l0 0q0 21.317184-21.317184 21.317184l-153.483725 0q-21.317184 0-21.317184-21.317184l0 0q0-21.317184 21.317184-21.317184Z" fill="#FF954B" p-id="16784"></path><path d="M365.105223 437.971234m21.317184 0l250.380015 0q21.317184 0 21.317184 21.317184l0 0q0 21.317184-21.317184 21.317184l-250.380015 0q-21.317184 0-21.317184-21.317184l0 0q0-21.317184 21.317184-21.317184Z" fill="#FF954B" p-id="16785"></path><path d="M365.105223 534.867525m21.317184 0l250.380015 0q21.317184 0 21.317184 21.317184l0 0q0 21.317184-21.317184 21.317184l-250.380015 0q-21.317184 0-21.317184-21.317184l0 0q0-21.317184 21.317184-21.317184Z" fill="#FF954B" p-id="16786"></path><path d="M365.880394 631.763815m21.317184 0l250.380015 0q21.317184 0 21.317184 21.317184l0 0q0 21.317184-21.317184 21.317184l-250.380015 0q-21.317184 0-21.317184-21.317184l0 0q0-21.317184 21.317184-21.317184Z" fill="#FF954B" p-id="16787"></path></svg>
diff --git a/src/static/icons/more.svg b/src/static/icons/more.svg
new file mode 100644
index 0000000..f215c92
--- /dev/null
+++ b/src/static/icons/more.svg
@@ -0,0 +1 @@
+<svg t="1773309041991" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16598" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#3494FD" p-id="16599"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="16600"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="16601"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="16602"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="16603"></path><path d="M512.387585 511.612415m-310.06813 0a310.06813 310.06813 0 1 0 620.13626 0 310.06813 310.06813 0 1 0-620.13626 0Z" fill="#FFFFFF" p-id="16604"></path><path d="M344.950795 512.387585m-44.184709 0a44.184709 44.184709 0 1 0 88.369417 0 44.184709 44.184709 0 1 0-88.369417 0Z" fill="#52A4FD" p-id="16605"></path><path d="M512.387585 511.612415m-44.184708 0a44.184709 44.184709 0 1 0 88.369417 0 44.184709 44.184709 0 1 0-88.369417 0Z" fill="#52A4FD" p-id="16606"></path><path d="M679.824375 511.612415m-44.184708 0a44.184709 44.184709 0 1 0 88.369417 0 44.184709 44.184709 0 1 0-88.369417 0Z" fill="#52A4FD" p-id="16607"></path></svg>
diff --git a/src/static/icons/notice.png b/src/static/icons/notice.png
deleted file mode 100644
index ebde0284ce093c89a4de1c8d6615e4e0c6552b34..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5237
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

diff --git a/src/static/icons/role.png b/src/static/icons/role.png
deleted file mode 100644
index 890d96fc1b11984b79a20bf3d1a042abff151ccf..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5637
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

diff --git a/src/static/icons/role.svg b/src/static/icons/role.svg
new file mode 100644
index 0000000..206832c
--- /dev/null
+++ b/src/static/icons/role.svg
@@ -0,0 +1 @@
+<svg t="1773306853981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7701" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#33C7FC" p-id="7702"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="7703"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="7704"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="7705"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="7706"></path><path d="M725.407491 340.922235c-90.65927-6.157953-175.12648-62.150831-203.306246-82.725402a17.032818 17.032818 0 0 0-19.783122 0c-28.464254 20.574571-113.857017 76.567449-203.127958 82.476572a16.577017 16.577017 0 0 0-10.969435 5.179688A16.59097 16.59097 0 0 0 283.712339 357.118643v135.907513C283.712339 707.565396 476.060003 764.590801 512.280612 768.968963c39.13835-3.559582 228.53339-64.749977 228.782219-275.693977V357.368248a16.59097 16.59097 0 0 0-4.573505-11.323688 16.580118 16.580118 0 0 0-11.081835-5.122325zM512.280612 634.663727c-45.755979 0-94.963791-12.209708-94.963791-38.870915a94.565354 94.565354 0 0 1 28.017756-66.69488 94.480085 94.480085 0 0 1 66.946035-27.35111h-0.320146a56.242483 56.242483 0 0 1-38.816654-17.077002 56.292869 56.292869 0 0 1 0.224024-78.587543 56.238607 56.238607 0 0 1 38.912776-16.855303l0.284487-0.320921a56.38899 56.38899 0 0 1 52.106949 34.828403 56.4355 56.4355 0 0 1-12.225986 61.489611 56.373487 56.373487 0 0 1-39.880963 16.522755 94.620391 94.620391 0 0 1 66.69798 27.506144 94.705659 94.705659 0 0 1 27.946441 66.539846c0 26.661208-49.207812 38.870916-94.928908 38.870915z" fill="#FFFFFF" p-id="7707"></path></svg>
diff --git a/src/static/icons/setting.png b/src/static/icons/setting.png
deleted file mode 100644
index 45c0c1e84b2abe3409d85ef792f85f8c4cc3e9ad..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5628
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
WReMG&br&800000<MNUMnLSTY2U0u`w

diff --git a/src/static/icons/setting.svg b/src/static/icons/setting.svg
deleted file mode 100644
index fe81bc7..0000000
--- a/src/static/icons/setting.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="#e8a838">
-  <path d="M24 4L8 10v12c0 11 8 18 16 22 8-4 16-11 16-22V10L24 4z"/>
-  <path d="M20 24l4 4 8-8" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/static/icons/settings.svg b/src/static/icons/settings.svg
new file mode 100644
index 0000000..0fad12a
--- /dev/null
+++ b/src/static/icons/settings.svg
@@ -0,0 +1 @@
+<svg t="1773309393340" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37403" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#3494FD" p-id="37404"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="37405"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="37406"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="37407"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="37408"></path><path d="M812.138198 454.908706c-0.139531-1.22787-0.27131-2.25187-0.480605-2.865805v-0.54572l-0.27131-1.501505c-4.844815-23.609363-20.464497-38.825956-39.912745-38.825956h-3.206879c-33.158686 0-60.041593-27.021662-60.041593-60.047019 0-7.642404 3.547955-18.492463 5.049459-22.313278 9.415219-21.972203-0.61471-47.01408-23.880672-59.774159l-73.209411-41.418901-1.365075-0.477505C609.361393 225.364494 603.015849 223.249054 595.919939 223.249054c-13.236033 0-28.110002 6.140899-37.32135 15.353023-11.530659 11.395004-34.933051 28.385962-48.852009 28.385962-13.849968 0-37.32135-16.922743-48.852009-28.385962-9.824509-9.689629-23.402392-15.353023-37.321351-15.353023-7.300554 0-13.440678 2.047225-18.899427 3.889804l-1.22787 0.477505-76.758141 41.555331-0.477505 0.27286c-18.626568 11.667864-26.199982 38.416666-16.715773 59.637729l0.13643 0.27286 0.13643 0.27286c1.50073 3.344085 6.140124 14.670874 6.140124 24.565148 0 33.162562-27.018562 60.047019-60.041592 60.047019h-3.20688c-20.331942 0-35.546986 15.011949-39.91352 39.098816l-0.27286 1.365075v0.477504c0 0.68215-0.27286 1.637935-0.477505 2.865805-1.70615 10.303564-5.799824 34.595852-5.799824 54.45184 0 19.856763 4.02546 44.148276 5.799824 54.451839 0.13643 1.228645 0.27286 2.25187 0.477505 2.86658v0.54572l0.27286 1.50073c4.844039 23.610138 20.468372 38.825956 39.91352 38.825956h1.637935c33.159461 0 60.041593 27.021662 60.041593 60.047794 0 7.642404-3.547955 18.491688-5.048685 22.312503-9.074919 20.675343-0.47828 47.2195 19.581578 60.593514l0.54572 0.27286 72.322616 40.260796 1.365075 0.472854c5.457974 1.77514 11.667089 3.891355 18.762998 3.891355 15.146828 0 28.792151-5.798274 37.32135-15.348373 0.81858-0.620136 1.63716-1.434065 2.59217-2.255745 8.733844-7.641629 32.204451-27.839467 47.692354-27.839467 11.530659 0 30.839376 12.077154 50.285299 31.521526 9.824509 9.689629 23.402392 15.356124 37.32135 15.356124 9.415219 0 16.374698-2.596821 24.289187-6.480424l0.27286-0.139531 74.165196-41.008835 0.27286-0.27286c18.626568-11.667864 26.199982-38.416666 16.716548-59.637729l-0.13643-0.27286-0.13643-0.27286c-0.137205-0.068215-5.936254-12.146144-4.844814-22.995428l0.13643-0.68215v-0.68215c0-33.162562 27.018562-60.047794 60.041593-60.047794h3.411524c20.335043 0 35.543885-15.011949 39.915846-39.098816l0.271309-1.3643v-0.47828c0.139531-0.54572 0.27131-1.3643 0.480606-2.456514 1.767388-10.030704 5.868039-33.435422 5.868039-54.86113 0.131779-19.788548-3.891355-44.011846-5.666495-54.315409zM511.930235 606.664575c-52.468179 0-94.975419-42.511116-94.975419-94.983945 0-52.47283 42.50724-94.983945 94.975419-94.983946s94.974643 42.511116 94.974643 94.983946c0 52.47283-42.506465 94.983945-94.974643 94.983945z" fill="#FFFFFF" p-id="37409"></path></svg>
diff --git a/src/static/icons/tree.svg b/src/static/icons/tree.svg
new file mode 100644
index 0000000..bb29a92
--- /dev/null
+++ b/src/static/icons/tree.svg
@@ -0,0 +1,24 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#67C23A"/>
+  <path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2"/>
+  <path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15"/>
+  <path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5"/>
+  <path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3"/>
+
+  <g>
+    <path d="M320 350H380" stroke="#FFFFFF" stroke-opacity=".85" stroke-width="14" stroke-linecap="round"/>
+    <path d="M380 350V690" stroke="#FFFFFF" stroke-opacity=".85" stroke-width="14" stroke-linecap="round"/>
+    <path d="M380 520H420" stroke="#FFFFFF" stroke-opacity=".85" stroke-width="14" stroke-linecap="round"/>
+    <path d="M380 690H460" stroke="#FFFFFF" stroke-opacity=".85" stroke-width="14" stroke-linecap="round"/>
+
+    <rect x="400" y="300" width="340" height="92" rx="28" fill="#FFFFFF"/>
+    <rect x="440" y="332" width="150" height="30" rx="15" fill="#95D475"/>
+
+    <rect x="440" y="470" width="300" height="92" rx="28" fill="#FFFFFF"/>
+    <rect x="480" y="502" width="130" height="30" rx="15" fill="#95D475"/>
+
+    <rect x="480" y="640" width="260" height="92" rx="28" fill="#FFFFFF"/>
+    <rect x="520" y="672" width="110" height="30" rx="15" fill="#95D475"/>
+  </g>
+</svg>
+
diff --git a/src/static/icons/user.png b/src/static/icons/user.png
deleted file mode 100644
index 9f58ed01e1bb81b84b0a850b248c63018861956c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5597
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

diff --git a/src/static/icons/user.svg b/src/static/icons/user.svg
new file mode 100644
index 0000000..6290e97
--- /dev/null
+++ b/src/static/icons/user.svg
@@ -0,0 +1 @@
+<svg t="1773308999614" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16422" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#33C7FC" p-id="16423"></path><path d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z" fill="#FFFFFF" fill-opacity=".2" p-id="16424"></path><path d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z" fill="#FFFFFF" fill-opacity=".15" p-id="16425"></path><path d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z" fill="#FFFFFF" fill-opacity=".5" p-id="16426"></path><path d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z" fill="#FFFFFF" fill-opacity=".3" p-id="16427"></path><path d="M505.867628 401.110335m-142.978617 0a142.978616 142.978616 0 1 0 285.957233 0 142.978616 142.978616 0 1 0-285.957233 0Z" fill="#FFFFFF" p-id="16428"></path><path d="M746.451815 765.868282c10.702777 0 19.442822-8.703612 18.779277-19.38546-9.029959-145.297151-118.789426-260.072745-252.862111-260.072745S268.53683 601.185671 259.506871 746.482822C258.843325 757.164669 267.58337 765.868282 278.286147 765.868282h468.165668z" fill="#FFFFFF" p-id="16429"></path><path d="M505.461438 401.515749m-92.846801 0a92.846801 92.846801 0 1 0 185.693602 0 92.846801 92.846801 0 1 0-185.693602 0Z" fill="#FFFFFF" p-id="16430"></path></svg>
diff --git a/src/static/icons/visitor.png b/src/static/icons/visitor.png
deleted file mode 100644
index cf23b9209b65a88f3c50833b4d488e08a2cbcfc3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2318
zcmcImX*|@68h-yXgPEbM;Tk8hgfy8Fy0)1ZLW+io>`FOOp~k-bZE;kHoVaAPoFq#Q
zXM~YZQHWByp)pF?vQ`+A<vREC{dzyV&+~kFe(#s}_q@+<j)xCyA}SF9V3Vy4ow32_
z--8$3z$fOuog0K)U>vZ3%5LQe0Q_@X`hMpKujw0Rmq}J~D1TsF<I<%%OA8!9r?z;%
zT$aqU^d9n-O_~iRQAFY-cdrf0##v4yRoe-B)7bmG7BO92CXG0yO7HTHvE8*#`TZrn
zkU!L)Ki|y`AF?|l6B!mZ6wPmn)c=0U5E>fa(S|ucG)$$S$dU#d7}$Ja{ss2`AWj(s
zm+=OkBhGWB+dikCVpom@AS@CDk1>2>9eQMc^qqc+jp3c!!i9ouIIfT$a%)tS=GbYu
z)Df5xn%ug4&;$-lzsnH2$Tnc9qrtNb-_`W5xL-wvt75AqfmErx-{mI;AMTk-BS8}>
zUV>TWvdffHAzuC0!f9mq9&doSt?u{QkYn{!G<dKNj)+6*bdE9jskOS`d~bWW>gwD-
z7+}zW6hEX6nOC-9I}n?}CH{0_%k}B#tMZvWTdm@aO#JOijXe98SBT}K-(I?BI-G-K
zwneF%K2P-BcNR$PQv2{~&cz|#{qy2UuGkoUvDo=fb9-kZ92T%to7cQ2g|~Q#OS9`c
zLmjM%M$o|2W>y?h(h-4@NGv{hN-yT-M`_5^OZFK&`p{<!T2^vs?&+8Bg4$6+IT9Qb
zMx6cd^J<A=W}M_{#|94ra+LwR65tWf9Hq2R$Zd6;E<`B*2#GM76)6W=f=W)3=(Qcz
z{t^{1H>yH~jGq(fZ_xg8C<JG=dgjQ|kAk*Q5Vs^O+>H)(C&YEh+o1fOC(km(&FCd#
zA5z>cKM**nH%VIpP;$B;T!>9B#%JkaSh{10T0;?vVefDoM!fcmu&bWvu3cY=dY>8>
zelC6K*}A%*24^tIwvpL5^z7Gaw#r*Dt_xN_BY5ASHk<Xts-~_o5rSpm*~oWuT!Gm!
z|0O#q$Uut2>uckx^sxvsEDth4an!jdW!jv3PLJzFq&C;wBS1JvQR04xrdpvsx_5b3
zyqaBPJFv>p7)-M?WN$jc=fm@l?z+aK4u^$ljR)4;aF<&=_K%e$vO6C%Kg-o}(x2}e
z$?-P!6*Rh96`t&mnpPUQGR9;VN*GH>5YRujO7=W%b-Mp*_RDBUsY0mu_VVp@Yr>bY
z-TS=mm|62;7)gbTAXxN{AJvpjIp2A$puMl<eSwqV$7y!v`}&@fa<5FPvwqEe1I5bs
z8(_X`#D`>eeM~ZHoa?_|Qq2z;d7%<gaegaoW9}foB|q!_K^~gb;&ey3(7--l>qAnn
z^~%v1VT*-H(Y`ZoOBfuAhc~hYcB?Oa{Ig!$58EPmG~hxT*UxMwUf@^81B4<1y5JG<
zLGKe857Oj(ohORxfeSzgNkwkHz}oBNgUz$T@fn}|a-Tx6W~_X#SK{C+#of&xvd<2T
z+7CH+(y|Si_96$`YxX`ilgcCb0fpmH)+>PKG!r>$3iHMrPc*%B_%*@PLO=3yfX~fn
z1&-p0PXVtdHD)g;!L=_7t;UTF=MOW=<K_qbOV}|(=YCntChz)D9TxJa=pn1KDDOxO
zey@5e52Q#VrXYUIyzfvsjpDX`-FP*bFTtH*LmJ1imsQoV4By>bMxJU)QXb?cpHtm^
zqhP%?^PsCYR?#p8^7Ki1By9s+_h*cwf@<K3Z)DhEYP)#d$3-oY?N*;Vn-bDu`~*I?
z*@UiNm|c)ya*1-#^_+XYJzvfJcSzgYw!0}tl+v@g-&DuB-I?N$GZF8QF3cZ%*h{VT
zPU3t=u5ZUbz2jIYZQszeJk}CDTN@X3%$#YWgE+U>QI8VK_TPNtxp6^E!T5wiU66Zy
zl|0INmm%Ax(s61NrUao)H$D>XRK=Hn<;FWu1%i(}5=4Hur8ys~mZKl%aWR#bFt49<
zLyTq<+MANs=5j+w9^5msJ0TS`>f<!Iaei0Ksm^;NPF1Bs)li(mW$N)3*X*<)pvahC
zwpzJ0)Z*$mt^j}7H8#4v6Iz{pxx@d|z<YI2lr`^t(*D=Q+<Na}l$bwxydw$+fj#_$
zPX4~PO=qSE&?#7y^mcjV)hr9;Qv%zG!UHu6ZdA<?G3Xk0=*;l8x~Rgu%^^7w(eZHX
zNyCeG{yn;f8^6j!8BkTP#?CMhhtAbN-gHjU;Dpj&ha_~w{ti;Ywmh>nmYs49D4NY%
zaz2VJOccmEZbog4eB>Z(efHa2ki5p(5cE6<dCjq=bCj9ST{e^?(6|#}Vz$O!(%6~h
zBvdAYL?aa4`UlrMXfyg$ozE&<&goSqJk*l~?KVh!uRl*fMfM#tgo{!v#Lz#<!U%#-
zFJE_fx(7qKHu>K?-*{EGdG(`Bq^YQHV*Hs^8BDZ1z3g8)C7PmXf#P9=bwut0<Vvcn
zG=#3sQX}0t3UUG8YU!}OXWV6OX9aU-k13j^BqWjLf;btmd;D+vvrM^kwbCrseenPi
z=D6jRNc5i-iU(V5jF(LotR4E=id5DuT>|e`S%G~dGE=L!GSHr}a#w~|Yg7~Xd@J0e
zhPFS@I%e6GVojn}BvIC+PL`hjEO6z5ViIjn`b>P2NH};aPGLk*kC2sF>7ZK)Q(fVr
zNiFN#D@9{1)Nn8sd^w_S%_in>O!izA%bUjys0Bz%dy-G^u@VL~b2r5q_cifnUSjbD
z0iWZzxoc+QQB1G#Fw2#h2O;5Q3?ehMegtv0r7ze7ppeCIStQCre@*E%Iu5<oQ0<Zj
z&x;QIp`iwM-sV1P#nBee?9h}(RR5@)+Oi$0{hf4v!-G!f$p;i9%dEi8mJT+hy3r{F
zbgJLkP7On|^X%8P2fv=X3>j%)Om=wrVpO9IbF<U_$0|Ym**={|W?tVeZxkG`wK`0%
IwD3v%5A=l^Q2+n{

diff --git a/src/static/icons/visitor.svg b/src/static/icons/visitor.svg
index e4aa560..199cffa 100644
--- a/src/static/icons/visitor.svg
+++ b/src/static/icons/visitor.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="#2ab789">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="200" height="200" fill="#2ab789">
   <circle cx="24" cy="16" r="8"/>
   <circle cx="10" cy="20" r="6"/>
   <circle cx="38" cy="20" r="6"/>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 5e3e9b2..71faf8e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -46,6 +46,7 @@ body,
 }
 
 .page--pt {
+  box-sizing: border-box;
   padding-top: 16rpx;
 }
 
@@ -95,14 +96,28 @@ body,
 }
 
 // ==========================================================================
-// 浮动按钮
+// 浮动新增按钮
 // ==========================================================================
 
-.wd-button.fab-btn {
-  box-sizing: border-box !important;
-  width: 80rpx !important;
-  min-width: 80rpx !important;
-  height: 80rpx !important;
-  padding: 0 !important;
-  border-radius: 40rpx !important;
+.fab-add {
+  position: fixed;
+  right: 32rpx;
+  bottom: 120rpx;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 88rpx;
+  height: 88rpx;
+  background: var(--color-primary);
+  border-radius: 50%;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+
+  &:active {
+    opacity: 0.8;
+  }
+
+  .wd-icon {
+    color: #fff;
+  }
 }
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index e07162d..84925a2 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -32,6 +32,7 @@ declare global {
   const defineComponent: typeof import('vue')['defineComponent']
   const defineStore: typeof import('pinia')['defineStore']
   const dept: typeof import('../api/dept')['default']
+  const dict: typeof import('../api/dict')['default']
   const effectScope: typeof import('vue')['effectScope']
   const file: typeof import('../api/file')['default']
   const getAccessToken: typeof import('../utils/auth')['getAccessToken']
@@ -61,6 +62,7 @@ declare global {
   const mapStores: typeof import('pinia')['mapStores']
   const mapWritableState: typeof import('pinia')['mapWritableState']
   const markRaw: typeof import('vue')['markRaw']
+  const menu: typeof import('../api/menu')['default']
   const nextTick: typeof import('vue')['nextTick']
   const notice: typeof import('../api/notice')['default']
   const onActivated: typeof import('vue')['onActivated']
@@ -235,6 +237,7 @@ declare module 'vue' {
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly dept: UnwrapRef<typeof import('../api/dept')['default']>
+    readonly dict: UnwrapRef<typeof import('../api/dict')['default']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly file: UnwrapRef<typeof import('../api/file')['default']>
     readonly getAccessToken: UnwrapRef<typeof import('../utils/auth')['getAccessToken']>
@@ -262,6 +265,7 @@ declare module 'vue' {
     readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
     readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly menu: UnwrapRef<typeof import('../api/menu')['default']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly notice: UnwrapRef<typeof import('../api/notice')['default']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
diff --git a/src/types/uni-pages.d.ts b/src/types/uni-pages.d.ts
index c6b7409..0fb54af 100644
--- a/src/types/uni-pages.d.ts
+++ b/src/types/uni-pages.d.ts
@@ -7,6 +7,7 @@ interface NavigateToOptions {
   url: "/pages/index/index" |
        "/pages/login/index" |
        "/pages/mine/index" |
+       "/pages/webview/index" |
        "/pages/work/index" |
        "/pages/mine/about/index" |
        "/pages/mine/account/index" |
@@ -17,15 +18,19 @@ interface NavigateToOptions {
        "/pages/mine/settings/index" |
        "/pages/work/config/index" |
        "/pages/work/dept/index" |
+       "/pages/work/dict/index" |
        "/pages/work/log/index" |
        "/pages/work/menu/index" |
+       "/pages/work/monitor/index" |
        "/pages/work/notice/index" |
+       "/pages/work/role/assign-perm" |
        "/pages/work/role/index" |
        "/pages/work/user/index" |
        "/pages/mine/settings/agreement/index" |
        "/pages/mine/settings/network/index" |
        "/pages/mine/settings/privacy/index" |
-       "/pages/mine/settings/theme/index";
+       "/pages/mine/settings/theme/index" |
+       "/pages/work/dict/item/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}
 
diff --git a/tsconfig.json b/tsconfig.json
index 44f5887..f21ef92 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,7 +19,9 @@
     // 调整 Volar（Vue 语言服务工具）解析行为，用于为 uni-app 组件提供 TypeScript 类型
     "plugins": ["@uni-helper/uni-types/volar-plugin"],
     // 禁用原生组件严格类型检查（uni-app 原生组件与 Volar 的兼容性问题）
-    "nativeTags": ["block", "component", "template", "slot"]
+    "nativeTags": ["block", "component", "template", "slot"],
+    // 忽略 slot props 隐式 any 类型错误（递归组件 slot 转发的已知限制）
+    "strictTemplates": false
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "exclude": ["node_modules", "dist"]
diff --git a/vite.config.ts b/vite.config.ts
index 7fc3579..709ea23 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -55,6 +55,7 @@ export default defineConfig(async ({ mode }: ConfigEnv): Promise<UserConfig> =>
       }),
       Components({
         resolvers: [WotResolver()],
+        dirs: ["src/components"],
       }),
 
       AutoImport({