u

code/link/link-frontend/src/components/avatar.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  url: String,
+  name: String,
+  size: {
+    type: Number,
+    default: 40,
+  },
+  bgColor: {
+    type: String,
+    default: '#1553f1',
+  },
+  color: {
+    type: String,
+    default: '#fff',
+  },
+})
+
+const initials = computed(() => {
+  if (!props.name)
+    return ''
+  return props.name[0].toUpperCase()
+})
+</script>
+
+<template>
+  <div
+    class="avatar"
+    :style="{
+      width: `${props.size}px`,
+      height: `${props.size}px`,
+      borderRadius: '50%',
+      backgroundColor: !props.url ? props.bgColor : 'transparent',
+      color: props.color,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: `${props.size / 2}px`,
+      fontWeight: 'bold',
+      overflow: 'hidden',
+    }"
+  >
+    <img
+      v-if="props.url"
+      :src="props.url"
+      :alt="props.name"
+      :style="{ width: '100%', height: '100%', objectFit: 'cover' }"
+    >
+    <span v-else>{{ initials }}</span>
+  </div>
+</template>
+
+<style scoped>
+.avatar {
+  user-select: none;
+}
+</style>

code/link/link-frontend/src/components/icon.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { Icon } from '@iconify/vue'
+import { computed, defineEmits, defineProps } from 'vue'
+
+// 定义 props
+const props = defineProps({
+  icon: { type: String, required: true },
+  size: { type: Number }, // 传给 Icon 的宽高
+  color: { type: String, default: 'currentColor' },
+  spin: { type: Boolean, default: false },
+})
+
+defineEmits(['click'])
+
+// 动态样式，只保留 verticalAlign
+const fontStyle = computed(() => ({
+  verticalAlign: 'middle',
+}))
+
+// Icon 大小
+const iconSize = computed(() => (props.size ? `${props.size}px` : '24px'))
+</script>
+
+<template>
+  <i
+    class="icon"
+    :class="[spin ? 'icon-spin' : '']"
+    :style="fontStyle"
+    @click="$emit('click', $event)"
+  >
+    <slot>
+      <Icon
+        v-if="icon"
+        :icon="icon"
+        :color="color"
+        :width="iconSize"
+        :height="iconSize"
+        style="vertical-align: middle"
+      />
+    </slot>
+  </i>
+</template>
+
+<style>
+.icon-spin {
+  display: inline-block;
+  animation: icon-spin 1s linear infinite;
+}
+
+@keyframes icon-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>