feat: 模板和非模板新增用户与用户组

ui/src/api/config.ts

@@ -669,9 +669,48 @@ export const createVersionNameCheck = (bizId: string, appId: number, name: strin
  * 从配置模板导入配置文件
  * @param bizId 业务ID
  * @param appId 应用ID
- * @param bindingId 模板和服务绑定关系ID
  * @param params 更新参数
  * @returns
  */
 export const importConfigFromTemplate = (bizId: string, appId: number, query: any) =>
   http.post(`/config/biz/${bizId}/apps/${appId}/template_bindings/import_template_set`, query);
+
+/**
+ * 获取权限设置用户列表
+ * @param bizId 业务ID
+ * @param appId 应用ID
+ * @param params 更新参数
+ * @returns
+ */
+export const getUserPrivileges = (bizId: string, appId: number, params: ICommonQuery) =>
+  http.get(`/config/biz/${bizId}/apps/${appId}/user_privileges`, { params });
+
+/**
+ * 获取权限设置用户组列表
+ * @param bizId 业务ID
+ * @param appId 应用ID
+ * @param params 更新参数
+ * @returns
+ */
+export const getUserGroupPrivileges = (bizId: string, appId: number, params: ICommonQuery) =>
+  http.get(`/config/biz/${bizId}/apps/${appId}/user_group_privileges`, { params });
+
+/**
+ * 删除权限设置用户组列表项
+ * @param bizId 业务ID
+ * @param appId 应用ID
+ * @param id 列表项ID
+ * @returns
+ */
+export const deleteUserGroupPrivilege = (bizId: string, appId: number, id: number) =>
+  http.delete(`/config/biz/${bizId}/apps/${appId}/user_group_privileges/${id}`);
+
+/**
+ * 删除权限设置用户列表项
+ * @param bizId 业务ID
+ * @param appId 应用ID
+ * @param id 列表项ID
+ * @returns
+ */
+export const deleteUserPrivilege = (bizId: string, appId: number, id: number) =>
+  http.delete(`/config/biz/${bizId}/apps/${appId}/user_privileges/${id}`);

ui/src/components/custom-selector.vue

@@ -0,0 +1,126 @@
+<template>
+  <bk-popover
+    :is-show="isShowPopover"
+    ref="popoverRef"
+    theme="light"
+    trigger="manual"
+    :arrow="false"
+    ext-cls="custom-selector-popover"
+    placement="bottom">
+    <bk-input
+      v-model="localVal"
+      ref="inputRef"
+      :style="{ width: `${inputWidth}px` }"
+      class="input"
+      :placeholder="placeholder"
+      @click="handleClickInput"
+      @enter="handleKeyInputEnter">
+      <template #suffix>
+        <angle-down :class="['suffix-icon', { 'show-popover': isShowPopover }]" @click="handleClickInput" />
+      </template>
+    </bk-input>
+    <template #content>
+      <div
+        :style="{ width: `${inputWidth}px` }"
+        class="selector-list-wrapper"
+        v-click-outside="() => (isShowPopover = false)">
+        <div v-for="item in list" :key="item" class="selector-option" @click.stop="handleSelectItem(item)">
+          <slot name="item" :item="item"></slot>
+        </div>
+      </div>
+    </template>
+  </bk-popover>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, watch } from 'vue';
+  import { AngleDown } from 'bkui-vue/lib/icon';
+
+  const props = withDefaults(
+    defineProps<{
+      value: string;
+      list: any;
+      placeholder?: string;
+      inputWidth?: number;
+    }>(),
+    {
+      inputWidth: 120,
+    },
+  );
+  const emits = defineEmits(['change', 'select']);
+
+  const localVal = ref('');
+  const isShowPopover = ref(false);
+  const inputRef = ref();
+  const popoverRef = ref();
+
+  onMounted(() => {
+    localVal.value = props.value;
+  });
+
+  watch(
+    () => props.value,
+    (val) => {
+      localVal.value = val;
+    },
+  );
+
+  watch(
+    () => localVal.value,
+    (val) => {
+      emits('change', val);
+    },
+  );
+
+  const handleKeyInputEnter = () => {
+    inputRef.value.blur();
+    isShowPopover.value = false;
+  };
+
+  const handleClickInput = () => {
+    isShowPopover.value = true;
+    inputRef.value.focus();
+  };
+
+  const handleSelectItem = (item: any) => {
+    emits('select', item);
+    isShowPopover.value = false;
+  };
+</script>
+
+<style scoped lang="scss">
+  .input {
+    .suffix-icon {
+      width: 20px;
+      font-size: 20px;
+      color: #979ba5;
+      background-color: #fff;
+      margin-right: 2px;
+      &.show-popover {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .selector-list-wrapper {
+    padding: 4px 0;
+    max-height: 200px;
+    overflow: auto;
+    .selector-option {
+      height: 32px;
+      line-height: 32px;
+      padding: 0 12px;
+      cursor: pointer;
+      &:hover {
+        background-color: #f5f7fa;
+        color: #63656e;
+      }
+    }
+  }
+</style>
+
+<style>
+  .bk-popover.bk-pop2-content.custom-selector-popover {
+    padding: 0;
+  }
+</style>

ui/src/components/diff/file.vue

@@ -12,10 +12,14 @@
             <div>
               <span class="label">{{ `${t('用户')}：` }}</span>
               <span class="value">{{ props.basePermission.user }}</span>
+              <span class="label">UID: </span>
+              <span class="value">{{ props.basePermission.uid }}</span>
             </div>
             <div>
               <span class="label">{{ `${t('用户组')}：` }}</span>
               <span class="value">{{ props.basePermission.user_group }}</span>
+              <span class="label">GID: </span>
+              <span class="value">{{ props.basePermission.gid }}</span>
             </div>
           </div>
         </div>
@@ -49,13 +53,22 @@
               <span :class="['value', { diff: props.currentPermission.user !== props.basePermission.user }]">
                 {{ props.currentPermission.user }}
               </span>
+              <span class="label">UID：</span>
+              <span :class="['value', { diff: props.currentPermission.user !== props.basePermission.user }]">
+                {{ props.currentPermission.uid }}
+              </span>
             </div>
             <div>
               <span class="label">{{ `${t('用户组')}：` }}</span>
               <span
                 :class="['value', { diff: props.currentPermission.user_group !== props.basePermission.user_group }]">
                 {{ props.currentPermission.user_group }}
               </span>
+              <span class="label">GID：</span>
+              <span
+                :class="['value', { diff: props.currentPermission.user_group !== props.basePermission.user_group }]">
+                {{ props.currentPermission.gid }}
+              </span>
             </div>
           </div>
         </div>
@@ -91,6 +104,8 @@
     privilege: string;
     user: string;
     user_group: string;
+    uid: number;
+    gid: number;
   }
 
   const { t } = useI18n();

ui/src/components/diff/index.vue

@@ -38,18 +38,18 @@
           <File
             v-if="props.diff.contentType === 'file'"
             :downloadable="false"
-            :current="props.diff.current.content as IFileConfigContentSummary"
-            :base="props.diff.base.content as IFileConfigContentSummary"
-            :current-permission="props.diff.current.permission as IPermissionType"
-            :base-permission="props.diff.base.permission as IPermissionType"
+            :current="(props.diff.current.content as IFileConfigContentSummary)"
+            :base="(props.diff.base.content as IFileConfigContentSummary)"
+            :current-permission="(props.diff.current.permission as IPermissionType)"
+            :base-permission="(props.diff.base.permission as IPermissionType)"
             :id="props.id" />
           <Text
             v-else-if="props.diff.contentType === 'text'"
             :language="props.diff.current.language"
-            :current="props.diff.current.content as string"
+            :current="(props.diff.current.content as string)"
             :current-variables="props.diff.current.variables"
             :current-permission="currentPermission"
-            :base="props.diff.base.content as string"
+            :base="(props.diff.base.content as string)"
             :base-variables="props.diff.base.variables"
             :base-permission="basePermission"
             :is-secret="props.diff.is_secret"
@@ -81,6 +81,8 @@
     privilege: string;
     user: string;
     user_group: string;
+    uid: number;
+    gid: number;
   }
 
   const { t } = useI18n();
@@ -99,14 +101,14 @@
   const currentPermission = computed(() => {
     if (!props.diff.base.permission) return;
     return `${t('权限')}:${props.diff.current.permission?.privilege}
-${t('用户')}:${props.diff.current.permission?.user}
-${t('用户组')}:${props.diff.current.permission?.user_group}`;
+${t('用户')}:${props.diff.current.permission?.user} UID:${props.diff.current.permission?.uid}
+${t('用户组')}:${props.diff.current.permission?.user_group} GID:${props.diff.current.permission?.gid}`;
   });
   const basePermission = computed(() => {
     if (!props.diff.base.permission) return;
     return `${t('权限')}:${props.diff.base.permission?.privilege}
-${t('用户')}:${props.diff.base.permission?.user}
-${t('用户组')}:${props.diff.base.permission?.user_group}`;
+${t('用户')}:${props.diff.base.permission?.user} UID:${props.diff.current.permission?.uid}
+${t('用户组')}:${props.diff.base.permission?.user_group} GID:${props.diff.current.permission?.gid}`;
   });
 
   // 打开全屏

ui/src/components/permission-input-picker.vue

@@ -9,7 +9,7 @@
       <bk-input
         v-model="privilegeInputVal"
         type="number"
-        :placeholder="t('请输入三位权限数字')"
+        :placeholder="isBatchEdit ? t('保持不变') : t('请输入三位权限数字')"
         :disabled="props.disabled"
         @blur="handleInputBlur" />
       <template #content>
@@ -32,7 +32,9 @@
                 class="group-checkboxs"
                 :model-value="privilegeGroupsValue[index]"
                 @change="handleSelect(index, $event)">
-                <bk-checkbox size="small" :label="4">{{ t('读') }}</bk-checkbox>
+                <bk-checkbox size="small" :label="4" :disabled="index === 0 && parseInt(localVal[0], 10) >= 4">
+                  {{ t('读') }}
+                </bk-checkbox>
                 <bk-checkbox size="small" :label="2">{{ t('写') }}</bk-checkbox>
                 <bk-checkbox size="small" :label="1">{{ t('执行') }}</bk-checkbox>
               </bk-checkbox-group>
@@ -63,6 +65,7 @@
   const props = defineProps<{
     disabled?: boolean;
     modelValue: string;
+    isBatchEdit?: boolean;
   }>();
 
   const emits = defineEmits(['update:modelValue', 'change']);