first commit

src/components/GiCell/GiCellAvatar.vue

@@ -0,0 +1,31 @@
+<template>
+  <a-space fill>
+    <a-avatar :size="24" shape="circle">
+      <img :src="props.avatar" alt="avatar" />
+    </a-avatar>
+    <a-link v-if="props.isLink" @click="emit('click')">{{ props.name }}</a-link>
+    <span v-else>{{ props.name }}</span>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'GiCellAvatar' })
+
+interface Props {
+  avatar: string
+  name: string
+  isLink?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  avatar: '',
+  name: '',
+  isLink: false // 是否可以点击
+})
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<style lang="scss" scoped></style>

src/components/GiCell/GiCellGender.vue

@@ -0,0 +1,27 @@
+<template>
+  <a-tag v-if="props.gender === 1" color="arcoblue" size="small" class="gi_round">
+    <template #icon><icon-man /></template>
+    <template #default>男</template>
+  </a-tag>
+  <a-tag v-else-if="props.gender === 2" color="magenta" size="small" class="gi_round">
+    <template #icon><icon-woman /></template>
+    <template #default>女</template>
+  </a-tag>
+  <a-tag v-else color="gray" size="small" class="gi_round">
+    <template #default>未知</template>
+  </a-tag>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'GiCellGender' })
+
+interface Props {
+  gender: 1 | 2 | 0
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  gender: 1
+})
+</script>
+
+<style lang="scss" scoped></style>

src/components/GiCell/GiCellStatus.vue

@@ -0,0 +1,39 @@
+<template>
+  <span v-if="props.status === 1">
+    <icon-check-circle-fill class="success" />
+    <span>启用</span>
+  </span>
+  <span v-if="props.status === 2">
+    <icon-minus-circle-fill class="warning" />
+    <span>禁用</span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'GiCellStatus' })
+
+interface Props {
+  status: 0 | 1
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: 1
+})
+</script>
+
+<style lang="scss" scoped>
+.arco-icon.success {
+  color: rgb(var(--success-6));
+  margin-right: 4px;
+}
+
+.arco-icon.warning {
+  color: rgb(var(--warning-6));
+  margin-right: 4px;
+}
+
+.arco-icon.danger {
+  color: rgb(var(--danger-6));
+  margin-right: 4px;
+}
+</style>

src/components/GiCell/GiCellTag.vue

@@ -0,0 +1,45 @@
+<template>
+  <span v-if="!dictItem"></span>
+  <span v-else-if="!dictItem.color">{{ dictItem.label }}</span>
+  <a-tag v-else-if="dictItem.color === 'primary'" color="arcoblue">{{
+      dictItem.label
+    }}</a-tag>
+  <a-tag v-else-if="dictItem.color === 'success'" color="green">{{
+      dictItem.label
+    }}</a-tag>
+  <a-tag v-else-if="dictItem.color === 'warning'" color="orangered">{{
+      dictItem.label
+    }}</a-tag>
+  <a-tag v-else-if="dictItem.color === 'error'" color="red">{{
+      dictItem.label
+    }}</a-tag>
+  <a-tag v-else-if="dictItem.color === 'default'" color="gray">{{
+      dictItem.label
+    }}</a-tag>
+  <a-tag v-else :color="dictItem.color">{{ dictItem.label }}</a-tag>
+</template>
+
+<script lang="ts" setup>
+import type { LabelValueState } from '@/types/global'
+
+defineOptions({ name: 'GiCellTag' })
+
+const props = defineProps({
+  dict: {
+    type: Array<LabelValueState>,
+    required: true,
+  },
+  value: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+const dictItem = computed(() =>
+  props.dict.find(
+    (d) => d.value === String(props.value) || d.value === Number(props.value),
+  ),
+);
+</script>
+
+<style lang="scss" scoped></style>

src/components/GiCell/GiCellTags.vue

@@ -0,0 +1,33 @@
+<template>
+  <a-overflow-list v-if="data.length">
+    <a-tag v-for="(item, index) in data" :key="index" size="small">
+      {{ item }}
+    </a-tag>
+    <template #overflow="{ number }">
+      <a-popover :content-style="{ maxWidth: '300px', padding: '8px 12px' }">
+        <a-tag color="arcoblue" size="small">+{{ number }}</a-tag>
+        <template #content>
+          <a-space wrap>
+            <a-tag v-for="tag in data.filter((i, n) => n >= data.length - number)" :key="tag" size="small">
+              {{ tag }}
+            </a-tag>
+          </a-space>
+        </template>
+      </a-popover>
+    </template>
+  </a-overflow-list>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'GiCellTags' })
+
+interface Props {
+  data: string[]
+}
+
+withDefaults(defineProps<Props>(), {
+  data: () => []
+})
+</script>
+
+<style lang="scss" scoped></style>