feat: updated permission management

crawlab-team · Nov 13, 2024 · 010a278 · 010a278
1 parent fbe1bd1
commit 010a278
Show file tree

Hide file tree

Showing 35 changed files with 501 additions and 201 deletions.
diff --git a/src/components/core/user/UserForm.vue b/src/components/core/user/UserForm.vue
@@ -6,23 +6,44 @@ import useUser from '@/components/core/user/useUser';
 import useUserDetail from '@/views/user/detail/useUserDetail';
 import { isPro, translate } from '@/utils';
 import { useRole } from '@/components';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps<{
+  form?: User;
+  isEdit?: boolean;
+  onChangePassword?: () => Promise<void>;
+}>();
 
 // i18n
 const t = translate;
 
+const { locale } = useI18n();
+
 // store
 const store = useStore();
 
 const { activeId } = useUserDetail();
 
 const { onChangePasswordFunc } = useUser(store);
 
-const onChangePassword = () => onChangePasswordFunc(activeId.value);
+const onChangePassword =
+  props.onChangePassword ||
+  (() => onChangePasswordFunc(props.form?._id || activeId.value));
 
 const isDetail = computed<boolean>(() => !!activeId.value);
 
-const { form, formRef, formRules, isSelectiveForm, isFormItemDisabled } =
-  useUser(store);
+const {
+  form: userForm,
+  formRef,
+  formRules,
+  isSelectiveForm,
+  isFormItemDisabled,
+} = useUser(store);
+
+const form = computed<User>(() => {
+  if (props.form) return props.form;
+  return userForm.value;
+});
 
 const { allListSelectOptions: allRolesSelectOptions } = useRole(store);
 
@@ -62,7 +83,7 @@ defineOptions({ name: 'ClUserForm' });
       required
     >
       <el-input
-        v-if="isSelectiveForm || !isDetail"
+        v-if="!isEdit && (isSelectiveForm || !isDetail)"
         v-model="form.password"
         :disabled="isFormItemDisabled('password')"
         :placeholder="t('components.user.form.password')"
@@ -74,12 +95,63 @@ defineOptions({ name: 'ClUserForm' });
         class-name="password"
         :icon="['fa', 'lock']"
         :label="t('components.user.form.changePassword')"
-        type="danger"
+        type="primary"
         @click="onChangePassword"
       />
     </cl-form-item>
     <!-- ./Row -->
 
+    <!-- Row -->
+    <template v-if="locale === 'zh'">
+      <cl-form-item
+        :span="2"
+        :label="t('components.user.form.lastName')"
+        prop="last_name"
+      >
+        <el-input
+          v-model="form.last_name"
+          :disabled="isFormItemDisabled('last_name')"
+          :placeholder="t('components.user.form.lastName')"
+        />
+      </cl-form-item>
+      <cl-form-item
+        :span="2"
+        :label="t('components.user.form.firstName')"
+        prop="first_name"
+      >
+        <el-input
+          v-model="form.first_name"
+          :disabled="isFormItemDisabled('first_name')"
+          :placeholder="t('components.user.form.firstName')"
+        />
+      </cl-form-item>
+    </template>
+    <template v-else>
+      <cl-form-item
+        :span="2"
+        :label="t('components.user.form.firstName')"
+        prop="first_name"
+      >
+        <el-input
+          v-model="form.first_name"
+          :disabled="isFormItemDisabled('first_name')"
+          :placeholder="t('components.user.form.firstName')"
+        />
+      </cl-form-item>
+      <cl-form-item
+        :span="2"
+        :label="t('components.user.form.lastName')"
+        prop="last_name"
+      >
+        <el-input
+          v-model="form.last_name"
+          :disabled="isFormItemDisabled('last_name')"
+          :placeholder="t('components.user.form.lastName')"
+        />
+      </cl-form-item>
+    </template>
+    <!-- ./Row -->
+
     <!-- Row -->
     <cl-form-item
       :span="2"

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -215,6 +215,7 @@ import useNotificationAlert from './core/notification/alert/useNotificationAlert
 import useNotificationChannel from './core/notification/channel/useNotificationChannel';
 import useNotificationSetting from './core/notification/setting/useNotificationSetting';
 import useProject from './core/project/useProject';
+import UserAvatar from './ui/avatar/UserAvatar.vue';
 import UserForm from './core/user/UserForm.vue';
 import useRichTextSetup from './ui/lexical/composables/useRichTextSetup';
 import useRole from './core/role/useRole';
@@ -443,6 +444,7 @@ export {
   useNotificationChannel as useNotificationChannel,
   useNotificationSetting as useNotificationSetting,
   useProject as useProject,
+  UserAvatar as ClUserAvatar,
   UserForm as ClUserForm,
   useRichTextSetup as useRichTextSetup,
   useRole as useRole,

diff --git a/src/components/ui/avatar/UserAvatar.vue b/src/components/ui/avatar/UserAvatar.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getUserShortName } from '@/utils/user';
+
+const props = withDefaults(
+  defineProps<{
+    icon?: Icon;
+    size?: BasicSize | number;
+    shape?: 'circle' | 'square';
+    src?: string;
+    alt?: string;
+    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    color?: string;
+    user?: User;
+    tooltip?: string;
+  }>(),
+  {
+    size: 36,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void;
+}>();
+
+const slots = defineSlots<{
+  default: any;
+}>();
+
+const userLabel = computed<string>(() => {
+  const { user } = props;
+  if (user) {
+    return getUserShortName(user);
+  }
+  return '';
+});
+
+const labelClass = computed(() => {
+  const length = userLabel.value.length;
+  const isChineseName = /[\u4e00-\u9fa5]/.test(userLabel.value);
+
+  return {
+    label: true,
+    'label--small': length === 3 || (isChineseName && length === 2),
+    'label--smaller': length === 4 || (isChineseName && length === 3),
+    'label--smallest': isChineseName && length === 4,
+  };
+});
+
+defineOptions({ name: 'ClUserAvatar' });
+</script>
+
+<template>
+  <div class="avatar">
+    <el-tooltip :content="tooltip" :disabled="!tooltip">
+      <el-avatar
+        v-bind="props"
+        class="avatar"
+        @click="(e: MouseEvent) => emit('click', e)"
+      >
+        <slot v-if="slots.default" name="default" />
+        <template v-else-if="user">
+          <span :class="labelClass">
+            {{ userLabel }}
+          </span>
+        </template>
+        <template v-else></template>
+      </el-avatar>
+    </el-tooltip>
+  </div>
+</template>
+
+<style scoped>
+.avatar {
+  max-height: 50px;
+
+  .el-avatar {
+    background-color: var(--el-color-primary-dark-2);
+    color: #ffffff;
+    cursor: pointer;
+    max-height: 50px;
+
+    &:hover {
+      background-color: var(--cl-primary-color);
+    }
+
+    .label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      min-height: 100%;
+      font-size: 0.85em;
+      line-height: 1.5;
+      padding: 0 2px;
+    }
+
+    .label--small {
+      font-size: 0.8em;
+    }
+
+    .label--smaller {
+      font-size: 0.75em;
+    }
+
+    .label--smallest {
+      font-size: 0.7em;
+    }
+  }
+}
+</style>
diff --git a/src/components/ui/button/LabelButton.vue b/src/components/ui/button/LabelButton.vue
@@ -34,6 +34,6 @@ defineOptions({ name: 'ClLabelButton' });
 
 <style scoped>
 .icon-wrapper {
-  margin-right: 3px;
+  margin-right: 5px;
 }
 </style>
diff --git a/src/components/ui/nav/NavActionGroupDetailCommon.vue b/src/components/ui/nav/NavActionGroupDetailCommon.vue
@@ -57,10 +57,6 @@ defineOptions({ name: 'ClNavActionGroupDetailCommon' });
 
 <style scoped>
 .nav-action-group {
-  &:deep(.back-btn) {
-    margin-right: 10px;
-  }
-
   .nav-action-item:last-child {
     margin-right: 10px;
   }

diff --git a/src/components/ui/nav/NavActionItem.vue b/src/components/ui/nav/NavActionItem.vue
@@ -15,51 +15,44 @@ defineOptions({ name: 'ClNavActionItem' });
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .nav-action-item {
   margin: 10px 0;
-  //height: fit-content;
   display: flex;
   flex: 0 0 auto;
   align-items: center;
   color: var(--cl-nav-actions-item-color);
 
-  & + .nav-action-item {
-    //margin-left: 10px;
-  }
-
   &.is-label {
     margin-right: 10px;
   }
-}
-</style>
-<style scoped>
-.nav-action-item:deep(.title) {
-  color: inherit;
-}
 
-.nav-action-item:deep(.label) {
-  color: inherit;
-  font-size: 14px;
-  margin-right: 5px;
-  margin-left: 5px;
-}
+  &:deep(.title) {
+    color: inherit;
+  }
 
-.nav-action-item:deep(.el-button.el-button--small) {
-  height: 32px;
-}
+  &:deep(.label) {
+    color: inherit;
+    font-size: 14px;
+    margin-right: 5px;
+  }
 
-.nav-action-item:deep(.el-button:not(.is-circle) .fa) {
-  margin-right: 0;
-}
+  &:deep(.el-button.el-button--small) {
+    height: 32px;
+  }
 
-.nav-action-item:deep(.el-button .icon + span) {
-  margin-left: 5px;
-}
+  &:deep(.el-button:not(.is-circle) .fa) {
+    margin-right: 0;
+  }
+
+  &:deep(.el-button .icon + span) {
+    margin-left: 5px;
+  }
 
-.nav-action-item:deep(.nav-action-item-label) {
-  color: inherit;
-  font-size: 12px;
-  margin-right: 5px;
+  &:deep(.nav-action-item-label) {
+    color: inherit;
+    font-size: 12px;
+    margin-right: 5px;
+  }
 }
 </style>
diff --git a/src/components/ui/nav/NavLink.vue b/src/components/ui/nav/NavLink.vue
@@ -6,6 +6,7 @@ const props = defineProps<{
   label?: string | number | boolean;
   icon?: Icon;
   external?: boolean;
+  tooltip?: string;
 }>();
 
 const slots = defineSlots<{
@@ -36,11 +37,11 @@ defineOptions({ name: 'ClNavLink' });
   <div class="nav-link" @click="onClick">
     <cl-icon :icon="icon" class="icon" />
     <slot v-if="slots.default" />
-    <span class="title" v-else>{{ label }}</span>
+    <span class="title" v-else-if="label">{{ label }}</span>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .nav-link {
   cursor: pointer;
   color: var(--cl-blue);

diff --git a/src/components/ui/table/Table.vue b/src/components/ui/table/Table.vue
@@ -192,6 +192,9 @@ defineOptions({ name: 'ClTable' });
         align="center"
         reserve-selection
         type="selection"
+        :selectable="
+          () => (row: any, index: number) => selectableFunction?.(row, index)
+        "
         width="40"
         fixed="left"
       />

diff --git a/src/i18n/lang/en/components/user.ts b/src/i18n/lang/en/components/user.ts
@@ -3,6 +3,9 @@ const user: LComponentsUser = {
     username: 'Username',
     password: 'Password',
     changePassword: 'Change Password',
+    firstName: 'First Name',
+    lastName: 'Last Name',
+    fullName: 'Full Name',
     email: 'Email',
     role: 'Role',
     newPassword: 'New Password',

diff --git a/src/i18n/lang/en/global.ts b/src/i18n/lang/en/global.ts
@@ -1,4 +1,5 @@
 const global: LGlobal = {
+  locale: '语言',
   lang: 'English',
   edition: {
     community: 'Community',