diff --git a/frontend/src/api/interface/file.ts b/frontend/src/api/interface/file.ts
index 15af96bc6..13e6c8402 100644
--- a/frontend/src/api/interface/file.ts
+++ b/frontend/src/api/interface/file.ts
@@ -25,19 +25,19 @@ export namespace File {
     export interface FileTree {
         id: string;
         name: string;
-        isDir: Boolean;
+        isDir: boolean;
         path: string;
         children?: FileTree[];
     }
 
     export interface FileCreate {
         path: string;
-        isDir: Boolean;
+        isDir: boolean;
         mode: number;
     }
 
     export interface FileDelete {
         path: string;
-        isDir: Boolean;
+        isDir: boolean;
     }
 }
diff --git a/frontend/src/components/file-role/index.vue b/frontend/src/components/file-role/index.vue
new file mode 100644
index 000000000..b126cb7b9
--- /dev/null
+++ b/frontend/src/components/file-role/index.vue
@@ -0,0 +1,159 @@
+<template>
+    <div>
+        <el-form ref="ruleForm" label-position="left" :model="form" label-width="100px">
+            <el-form-item :label="$t('file.owner')">
+                <el-checkbox v-model="form.owner.r" :label="$t('file.rRole')" />
+                <el-checkbox v-model="form.owner.w" :label="$t('file.wRole')" />
+                <el-checkbox v-model="form.owner.x" :label="$t('file.xRole')" />
+            </el-form-item>
+            <el-form-item :label="$t('file.group')">
+                <el-checkbox v-model="form.group.r" :label="$t('file.rRole')" />
+                <el-checkbox v-model="form.group.w" :label="$t('file.wRole')" />
+                <el-checkbox v-model="form.group.x" :label="$t('file.xRole')" />
+            </el-form-item>
+            <el-form-item :label="$t('file.public')">
+                <el-checkbox v-model="form.public.r" :label="$t('file.rRole')" />
+                <el-checkbox v-model="form.public.w" :label="$t('file.wRole')" />
+                <el-checkbox v-model="form.public.x" :label="$t('file.xRole')" />
+            </el-form-item>
+            <el-form-item :label="$t('file.role')">
+                <el-input v-model="form.mode" maxlength="4" @input="changeMode"></el-input>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script setup lang="ts">
+import { FormInstance } from 'element-plus';
+import { computed, ref, toRefs, watch, onMounted } from 'vue';
+
+interface Role {
+    r: boolean;
+    w: boolean;
+    x: boolean;
+}
+interface RoleForm {
+    owner: Role;
+    group: Role;
+    public: Role;
+    mode: string;
+}
+interface Props {
+    mode: string;
+}
+
+const roles = ref<string[]>(['0', '1', '2', '3', '4', '5', '6', '7']);
+
+const props = withDefaults(defineProps<Props>(), {
+    mode: '0775',
+});
+
+const { mode } = toRefs(props);
+const ruleForm = ref<FormInstance>();
+let form = ref<RoleForm>({
+    owner: { r: true, w: true, x: true },
+    group: { r: true, w: true, x: true },
+    public: { r: true, w: false, x: true },
+    mode: '0775',
+});
+const em = defineEmits(['getMode']);
+
+const calculate = (role: Role) => {
+    let num = 0;
+    if (role.r) {
+        num = num + 4;
+    }
+    if (role.w) {
+        num = num + 2;
+    }
+    if (role.x) {
+        num = num + 1;
+    }
+
+    return num;
+};
+
+const getRole = computed(() => {
+    const value =
+        '0' +
+        String(calculate(form.value.owner)) +
+        String(calculate(form.value.group)) +
+        String(calculate(form.value.public));
+    return value;
+});
+
+watch(
+    () => getRole.value,
+    (newVal) => {
+        form.value.mode = newVal;
+    },
+);
+
+watch(
+    () => form.value.mode,
+    (newVal) => {
+        em('getMode', Number.parseInt(newVal, 8));
+    },
+);
+
+const getRoleNum = (roleStr: string, role: Role) => {
+    if (roles.value.indexOf(roleStr) < 0) {
+        return;
+    }
+    switch (roleStr) {
+        case '0':
+            role.x = false;
+            role.w = false;
+            role.r = false;
+            break;
+        case '1':
+            role.x = true;
+            role.w = false;
+            role.r = false;
+            break;
+        case '2':
+            role.x = false;
+            role.w = true;
+            role.r = false;
+            break;
+        case '3':
+            role.x = true;
+            role.w = true;
+            role.r = false;
+            break;
+        case '4':
+            role.x = false;
+            role.w = false;
+            role.r = true;
+            break;
+        case '5':
+            role.x = true;
+            role.w = false;
+            role.r = true;
+            break;
+        case '6':
+            role.x = false;
+            role.w = true;
+            role.r = true;
+            break;
+        case '7':
+            role.x = true;
+            role.w = true;
+            role.r = true;
+            break;
+    }
+};
+
+const changeMode = (val: String) => {
+    if (val === '' || val.length !== 4) {
+        return;
+    }
+    getRoleNum(val[1], form.value.owner);
+    getRoleNum(val[2], form.value.group);
+    getRoleNum(val[3], form.value.public);
+};
+
+onMounted(() => {
+    form.value.mode = mode.value;
+    changeMode(form.value.mode);
+});
+</script>
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 0ba405c2c..e82935248 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -175,7 +175,13 @@ export default {
         shareList: '分享列表',
         zip: '压缩',
         user: '用户',
-        group: '组',
+        group: '用户组',
         path: '路径',
+        public: '公共',
+        setRole: '设置权限',
+        link: '是否链接',
+        rRole: '读取',
+        wRole: '写入',
+        xRole: '可执行',
     },
 };
diff --git a/frontend/src/views/file-management/create.vue b/frontend/src/views/file-management/create.vue
index 282cf9864..68924e14c 100644
--- a/frontend/src/views/file-management/create.vue
+++ b/frontend/src/views/file-management/create.vue
@@ -7,9 +7,12 @@
         @open="onOpen"
         v-loading="loading"
     >
-        <el-form ref="fileForm" label-position="left" :model="form">
+        <el-form ref="fileForm" label-position="left" :model="form" label-width="100px">
             <el-form-item :label="$t('file.path')"> <el-input v-model="form.path" /></el-form-item>
+            <el-checkbox v-model="isLink" :label="$t('file.link')"></el-checkbox>
         </el-form>
+        <el-checkbox v-model="setRole" :label="$t('file.setRole')"></el-checkbox>
+        <FileRole v-if="setRole" :mode="'0775'" @get-mode="getMode"></FileRole>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
@@ -20,14 +23,17 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits, toRefs, ref } from 'vue';
+import { toRefs, ref } from 'vue';
 import { File } from '@/api/interface/file';
 import { ElMessage, FormInstance } from 'element-plus';
 import { CreateFile } from '@/api/modules/files';
 import i18n from '@/lang';
+import FileRole from '@/components/file-role/index.vue';
 
 const fileForm = ref<FormInstance>();
 let loading = ref<Boolean>(false);
+let setRole = ref<Boolean>(false);
+let isLink = ref<Boolean>(false);
 
 const props = defineProps({
     open: Boolean,
@@ -40,6 +46,10 @@ const handleClose = () => {
     em('close', open);
 };
 
+const getMode = (val: number) => {
+    form.value.mode = val;
+};
+
 const submit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     await formEl.validate((valid) => {
@@ -63,8 +73,4 @@ const onOpen = () => {
     form.value.isDir = f.isDir;
     form.value.path = f.path;
 };
-
-// function PrefixInteger(num: number, length: number) {
-//     return (Array(length).join('0') + num).slice(-length);
-// }
 </script>