feat: 新增成员荣誉功能

app.config.ts

@@ -1,6 +1,6 @@
 import { AppConfig } from 'nuxt/schema';
 import { markRaw } from 'vue';
-import { IconDelete, IconExclamationCircle, IconMessage } from '@arco-design/web-vue/es/icon';
+import { IconDelete, IconExclamationCircle, IconMessage, IconTrophy } from '@arco-design/web-vue/es/icon';
 
 const config: AppConfig = defineAppConfig({
   version: undefined, // 在 ~/modules/changelog.ts 中注入
@@ -19,6 +19,10 @@ const config: AppConfig = defineAppConfig({
       label: '风险检测',
       icon: markRaw(IconExclamationCircle),
       link: '/feature/audit',
+    }, {
+      label: '成员荣誉',
+      icon: markRaw(IconTrophy),
+      link: '/feature/credit',
     }],
   },
 });

components/fb/bot-token-picker.vue

@@ -44,7 +44,7 @@ const input = ref<{
 }>({
   token: '',
 });
-const selected: ShallowRef<Bot | undefined> = shallowRef();
+const selected: Ref<Bot | undefined> = shallowRef();
 
 async function handleChange(v: string) {
   input.value = { token: v, help: '', status: 'validating' };
@@ -95,7 +95,7 @@ function handleClose() {
     :closable='showCancel'
     :ok-button-props='{ disabled: !selected }'
     :esc-to-close='false'
-    @update:visible='(v) => emit("update:visible", v)'
+    @update:visible='(v: boolean) => emit("update:visible", v)'
     @ok='() => emit("ok", selected!)'
     @cancel='() => emit("cancel")'
     @close='handleClose'

components/fb/credit.vue

@@ -0,0 +1,120 @@
+<!-- 荣誉信息。 -->
+
+<script lang="ts" setup>
+import { GuildCredit } from 'fanbook-api-node-sdk';
+import { Events as AuthorityEvents } from './credit/authority.vue';
+
+export interface Props {
+  credit: GuildCredit;
+  editable?: boolean;
+}
+export type Events = AuthorityEvents & {
+  'add-slot-row': [];
+  'remove-slot-row': [];
+  'add-slot': [];
+  'remove-slot': [];
+  'edit-slot-value': [row: number, index: number, value: string];
+  'edit-slot-label': [row: number, index: number, label: string];
+  'edit-slot-image': [row: number, index: number, url: string];
+};
+
+const props = defineProps<Props>();
+const emit = defineEmits<Events>();
+
+function handleAddSlot(row: number) {
+  props.credit.slots[row].push({
+    img: LOGO_URL,
+    value: '文字',
+  });
+  emit('add-slot');
+}
+function handleRemoveSlot(row: number) {
+  props.credit.slots[row].pop();
+  emit('remove-slot');
+}
+function handleAddSlotRow() {
+  emit('add-slot-row'); // 先上报添加列，再上报往列中添加插槽
+  handleAddSlot(props.credit.slots.push([]) - 1);
+}
+function handleRemoveSlotRow() {
+  props.credit.slots.pop();
+  emit('remove-slot-row');
+}
+</script>
+
+<template>
+  <ACard class='rounded-lg'>
+    <ARow v-for='(slots, row) in credit.slots' class='justify-center flex-col'>
+      <div class='flex w-full overflow-auto'>
+        <FbCreditSlot
+          v-for='(slot, index) in slots'
+          class='mb-2 w-full'
+          :slot='slot'
+          :editable='editable'
+          @edit-value='(value: string) => emit("edit-slot-value", row, index, value)'
+          @edit-label='(label: string) => emit("edit-slot-label", row, index, label)'
+          @edit-image='(url: string) => emit("edit-slot-image", row, index, url)'
+        />
+        <div v-if='editable' class='flex flex-col'>
+          <ADivider direction='vertical' />
+          <FbCreditOpButtons
+            class='flex-col'
+            add
+            :remove='slots.length > 1'
+            @add='() => handleAddSlot(row)'
+            @remove='() => handleRemoveSlot(row)'
+          />
+        </div>
+      </div>
+    </ARow>
+    <template v-if='editable'>
+      <ADivider class='mt-0 mb-2' />
+      <div class='flex justify-center w-full'>
+        <FbCreditOpButtons
+          add
+          :remove='credit.slots.length > 1'
+          @add='handleAddSlotRow'
+          @remove='handleRemoveSlotRow'
+        />
+      </div>
+    </template>
+    <template #title>
+      <FbCreditAuthority :authority='credit.authority' :editable='editable' v-on='emit' />
+    </template>
+  </ACard>
+</template>
+
+<style lang="postcss" scoped>
+.arco-card:deep() {
+  .arco-scrollbar {
+    @apply w-full;
+  }
+  .arco-card-body {
+    @apply py-2;
+  }
+  .arco-typography {
+    @apply m-0;
+  }
+  .arco-typography-edit-content {
+    @apply inline-flex;
+    @apply m-0;
+    @apply left-0;
+    input {
+      @apply text-center;
+    }
+  }
+  .arco-card-header-title {
+    @apply inline-flex;
+    .arco-typography-edit-content input {
+      @apply text-left;
+    }
+    .arco-avatar-image {
+      @apply rounded-lg;
+    }
+  }
+  .arco-avatar-image > img {
+    object-fit: contain;
+  }
+}
+</style>
+

components/fb/credit/authority.vue

@@ -0,0 +1,49 @@
+<!-- 荣誉颁发者。 -->
+
+<script lang="ts" setup>
+import { CreditAuthority } from 'fanbook-api-node-sdk';
+import { selectImage } from '~/utils/biz/image-selector';
+
+export interface Props {
+  authority: CreditAuthority;
+  editable?: boolean;
+}
+export type Events = {
+  'edit-icon': [url: string];
+  'edit-name': [name: string];
+};
+
+const props = defineProps<Props>();
+const emit = defineEmits<Events>();
+
+function handleEditedAuthorityName(v: string) {
+  props.authority.name = v;
+  emit('edit-name', v);
+}
+async function handleEditAuthorityIcon() {
+  if (!props.editable) return;
+  const url = await selectImage();
+  if (url) {
+    props.authority.icon = url;
+    emit('edit-icon', url);
+  }
+}
+</script>
+
+<template>
+  <AAvatar
+    class='min-w-[36px] min-h-[36px] bg-transparent'
+    :image-url='authority.icon'
+    @click='handleEditAuthorityIcon'
+  >
+    <template v-if='editable' #trigger-icon><IconEdit /></template>
+  </AAvatar>
+  <ATypographyParagraph
+    class='inline-flex items-center ml-2 font-bold'
+    :editable='editable'
+    :edit-text='authority.name'
+    @change='handleEditedAuthorityName'
+  >
+    {{ authority.name }}
+  </ATypographyParagraph>
+</template>

components/fb/credit/op-buttons.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+export interface Props {
+  add?: boolean;
+  remove?: boolean;
+}
+export type Events = {
+  add: [];
+  remove: [];
+};
+
+defineProps<Props>();
+defineEmits<Events>();
+</script>
+
+<template>
+  <div>
+    <AButton
+      class='w-min h-min bg-transparent'
+      type='primary'
+      shape='circle'
+      @click='() => $emit("add")'
+    >
+      <template #icon>
+        <IconPlusCircleFill class='button-add' :size='24' />
+      </template>
+    </AButton>
+    <AButton
+      v-if='remove'
+      class='w-min h-min bg-transparent'
+      type='primary'
+      shape='circle'
+      @click='() => $emit("remove")'
+    >
+      <template #icon>
+        <IconMinusCircleFill class='button-remove' :size='24' />
+      </template>
+    </AButton>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.button-add {
+  color: rgb(var(--primary-5));
+}
+.button-remove {
+  color: rgb(var(--danger-6));
+}
+</style>

components/fb/credit/slot.vue

@@ -0,0 +1,58 @@
+<!-- 荣誉插槽。 -->
+
+<script lang="ts" setup>
+import { CreditSlot } from 'fanbook-api-node-sdk';
+import { selectImage } from '~/utils/biz/image-selector';
+
+export interface Props {
+  slot: CreditSlot;
+  editable?: boolean;
+}
+export type Events = {
+  'edit-value': [value: string];
+  'edit-label': [label: string];
+  'edit-image': [url: string];
+};
+
+const props = defineProps<Props>();
+const emit = defineEmits<Events>();
+
+function handleEditedValue(v: string) {
+  props.slot.value = v;
+  emit('edit-value', v);
+}
+function handleEditedLabel(v: string) {
+  props.slot.label = v;
+  emit('edit-label', v);
+}
+async function handleEditImage() {
+  if (!props.editable) return;
+  const url = await selectImage();
+  if (url) {
+    props.slot.img = url;
+    emit('edit-image', url);
+  }
+}
+</script>
+
+<template>
+  <div class='flex flex-col items-center min-w-[100px]'>
+    <AAvatar
+      v-if='slot.img'
+      class='w-[52px] h-[52px] bg-transparent'
+      :image-url='slot.img'
+      @click='handleEditImage'
+    >
+      <template v-if='editable' #trigger-icon><IconEdit /></template>
+    </AAvatar>
+    <div class='inline-block overflow-auto'>
+      <ATypographyText v-if='slot.label' class='text-gray-500' :editable='editable' :edit-text='slot.label' @change='handleEditedLabel'>
+        {{ slot.label }}
+      </ATypographyText>
+      <span v-if='slot.label' class='text-gray-500'>：</span>
+      <ATypographyText :editable='editable' :edit-text='slot.value' @change='handleEditedValue'>
+        {{ slot.value }}
+      </ATypographyText>
+    </div>
+  </div>
+</template>

components/fb/guild-picker.vue

@@ -14,14 +14,14 @@ export interface Props {
   /** 是否隐藏取消按钮。 @default true */
   showCancel?: boolean;
 }
-export type Events = {
-  'update:visible': [value: boolean];
+export interface Events {
+  (ev: 'update:visible', value: boolean): void;
   /** 关闭选择器。 */
-  close: [];
+  (ev: 'close'): void;
   /** 确认选择。 */
-  ok: [value: Guild];
+  (ev: 'ok', value: Guild): void;
   /** 取消选择。 */
-  cancel: [];
+  (ev: 'cancel'): void;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -78,7 +78,7 @@ function handleBadInput() {
     :closable='showCancel'
     :ok-button-props='{ disabled: !selected }'
     :esc-to-close='false'
-    @update:visible='(v) => emit("update:visible", v)'
+    @update:visible='(v: boolean) => emit("update:visible", v)'
     @ok='() => emit("ok", selected!)'
     @cancel='() => emit("cancel")'
     @close='handleClose'

components/fb/user-input.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { User } from 'fanbook-api-node-sdk';
+
+export interface Props {
+  modelValue: User[];
+  /** 所属服务器。 */
+  guild?: bigint;
+  /** 最大选择人数。 @default 1 */
+  max?: number;
+  /** 最大显示人数。 @default 1 */
+  maxShow?: number;
+}
+export type Events = {
+  'update:model-value': [value: User[]];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  max: 1,
+  maxShow: 1,
+});
+const emit = defineEmits<Events>();
+
+const adding = ref(false);
+</script>
+
+<template>
+  <ASpace>
+    <AAvatarGroup :max-count='maxShow'>
+      <AAvatar v-for='item in modelValue'>
+        {{ item.first_name }}
+      </AAvatar>
+    </AAvatarGroup>
+    <AButton v-if='modelValue.length < max' shape='round' @click='() => adding = !adding'>
+      <template #icon><IconPlus /></template>
+    </AButton>
+    <AInputNumber v-if='adding' hide-button :min='0' :precision='0'>
+      <template #prefix>#</template>
+    </AInputNumber>
+  </ASpace>
+</template>

package.json

@@ -27,7 +27,7 @@
     "@vitejs/plugin-legacy": "^4.1.1",
     "@vueuse/core": "^10.3.0",
     "@vueuse/nuxt": "^10.3.0",
-    "fanbook-api-node-sdk": "^0.3.0",
+    "fanbook-api-node-sdk": "^0.4.3",
     "husky": "^8.0.3",
     "lodash-es": "^4.17.9",
     "nprogress": "^0.2.0",