feat(projects): 新版重构完成

src/components/custom/GithubLink/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <web-site-link label="github地址：" :link="link" />
+</template>
+
+<script setup lang="ts">
+import WebSiteLink from '../WebSiteLink/index.vue';
+
+interface Props {
+  /** github链接 */
+  link: string;
+}
+
+defineProps<Props>();
+</script>
+<style scoped></style>

src/components/custom/IconSelect/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <n-popover placement="bottom-end" trigger="click">
+    <template #trigger>
+      <n-input v-model:value="modelValue" readonly placeholder="点击选择图标">
+        <template #suffix>
+          <Icon :icon="modelValue ? modelValue : emptyIcon" class="text-30px p-5px" />
+        </template>
+      </n-input>
+    </template>
+    <template #header>
+      <n-input v-model:value="searchValue" placeholder="搜索图标"></n-input>
+    </template>
+    <div v-if="iconsList.length > 0" class="grid grid-cols-9 h-auto overflow-auto">
+      <template v-for="iconItem in iconsList" :key="iconItem">
+        <Icon
+          :icon="iconItem"
+          class="border-1px border-[#d9d9d9] text-30px m-2px p-5px"
+          :style="{ 'border-color': modelValue === iconItem ? theme.themeColor : '' }"
+          @click="handleChange(iconItem)"
+        />
+      </template>
+    </div>
+    <n-empty v-else class="w-306px" description="你什么也找不到" />
+  </n-popover>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { NPopover, NInput, NEmpty } from 'naive-ui';
+import { Icon } from '@iconify/vue';
+import { useThemeStore } from '@/store';
+
+interface Props {
+  /** 选中的图标 */
+  value: string;
+  /** 图标列表 */
+  icons: string[];
+  /** 未选中图标 */
+  emptyIcon?: string;
+}
+
+interface Emits {
+  (e: 'update:value', val: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  emptyIcon: 'mdi:apps'
+});
+
+const emit = defineEmits<Emits>();
+
+const theme = useThemeStore();
+
+const searchValue = ref('');
+const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
+
+const modelValue = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit('update:value', val);
+  }
+});
+
+function handleChange(iconItem: string) {
+  modelValue.value = iconItem;
+}
+</script>
+<style lang="scss" scoped>
+:deep(.n-input-wrapper) {
+  padding-right: 0;
+}
+:deep(.n-input__suffix) {
+  border: 1px solid #d9d9d9;
+}
+</style>

src/components/custom/WebSiteLink/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <p>
+    <span>{{ label }}</span>
+    <a class="text-blue-500" :href="link" target="_blank">
+      {{ link }}
+    </a>
+  </p>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  /** 网址名称 */
+  label: string;
+  /** 网址链接 */
+  link: string;
+}
+
+defineProps<Props>();
+</script>
+<style scoped></style>

src/components/custom/index.ts

@@ -3,5 +3,8 @@ import ButtonTab from './ButtonTab/index.vue';
 import ChromeTab from './ChromeTab/index.vue';
 import CountTo from './CountTo/index.vue';
 import ImageVerify from './ImageVerify/index.vue';
+import WebSiteLink from './WebSiteLink/index.vue';
+import GithubLink from './GithubLink/index.vue';
+import IconSelect from './IconSelect/index.vue';
 
-export { BetterScroll, ButtonTab, ChromeTab, CountTo, ImageVerify };
+export { BetterScroll, ButtonTab, ChromeTab, CountTo, ImageVerify, WebSiteLink, GithubLink, IconSelect };