refactor: 升级Vue SFC深度选择器语法为::v-deep

本次提交将项目中所有使用`::deep`的CSS深度选择器统一替换为Vue 3官方推荐的`::v-deep`语法，修复了旧版语法在新版本Vue生态中的兼容性问题，同时修正了部分组件的响应式表单定义方式，将`reactive`配合`Object.assign`的写法调整为更符合Vue 3组合式API规范的`ref`响应式状态写法，整体优化了代码的可维护性和兼容性。

frontend/web/src/views/module_system/role/index.vue

@@ -547,7 +547,7 @@ const roleExportContentConfig = computed(() => ({
 
 const detailFormData = ref<RoleTable>({} as RoleTable);
 
-const formData = reactive<RoleForm>({
+const formData = ref<RoleForm>({
   id: undefined,
   name: undefined,
   order: 1,
@@ -684,8 +684,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     }
   } else {
     dialogVisible.title = "新增角色";
-    Object.assign(formData, initialFormData);
-    formData.id = undefined;
+    Object.assign(formData.value, initialFormData);
+    formData.value.id = undefined;
   }
   roleFormRenderKey.value += 1;
   dialogVisible.visible = true;
@@ -695,13 +695,13 @@ async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
     submitLoading.value = true;
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
-        await RoleAPI.updateRole(id, { id, ...formData });
+        await RoleAPI.updateRole(id, { id, ...formData.value });
         await refreshUpdate();
       } else {
-        await RoleAPI.createRole(formData);
+        await RoleAPI.createRole(formData.value);
         await refreshCreate();
       }
       dialogVisible.visible = false;
@@ -766,15 +766,15 @@ function openExportModal() {
 </script>
 
 <style scoped lang="scss">
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-::deep(.role-table-actions .inline-flex) {
+::v-deep(.role-table-actions .inline-flex) {
   vertical-align: middle;
 }
 </style>