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 fbadaa0..0000000
Binary files a/src/static/icons/browser.png and /dev/null differ
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 e9777db..0000000
Binary files a/src/static/icons/log.png and /dev/null differ
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 ebde028..0000000
Binary files a/src/static/icons/notice.png and /dev/null differ
diff --git a/src/static/icons/role.png b/src/static/icons/role.png
deleted file mode 100644
index 890d96f..0000000
Binary files a/src/static/icons/role.png and /dev/null differ
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 45c0c1e..0000000
Binary files a/src/static/icons/setting.png and /dev/null differ
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 9f58ed0..0000000
Binary files a/src/static/icons/user.png and /dev/null differ
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 cf23b92..0000000
Binary files a/src/static/icons/visitor.png and /dev/null differ
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({