搜索结果列表页面开发

src/components/GLink/README.md

@@ -0,0 +1,31 @@
+# GLink组件
+
+### 说明
+1. GLink组件组合了router-link和a标签，通过传入to或者href参数，自适应生成链接
+2. GLink组件已全局声明(使用期无需再次引用)
+
+``` js
+<GLink :to="{ name: 'repo', params: { namespace: 'demo' }, query: { id: 111 } }">点击跳转</GLink>
+<GLink href="https://gitcode.net" target="_blank">点击跳转</GLink>
+<GLink @click.stop="handleClick">点击触发事件</GLink>
+```
+
+### Props
+
+| 参数       | 说明                   | 类型                        | 可选值    | 默认值     |
+|-----------|------------------------|----------------------------|----------|-----------|
+| to?       | 同router-link标签的to参数 | object                    | -        | -         |
+| href?     | 同a标签的href参数         | string                    | -        | -         |
+| target?   | 同a标签的target参数，router-link也支持       | string                    | -        | -         |
+| disabled? | 禁用                     | boolean                    | -       | false     |
+
+### Slots
+
+| 名称                 | 说明                                        |
+|---------------------|---------------------------------------------|
+| default             | 链接点击的                                    |
+
+## 注意事项
+1. 同时传入to相比href，优先级更高
+2. href参数默认值为“javascript:void(0)”
+

src/components/GLink/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <router-link v-if="to && !disabled" class="g-link g-link-router-link hover:underline" :to="to" :target="target">
+    <slot />
+  </router-link>
+  <a v-else class="g-link g-link-a hover:underline" :href="disabled || !href ? defaultHref : href" :target="target" :disabled="disabled"
+    @click.prevent="onBeforeJump">
+    <slot />
+  </a>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { type GLink } from './type';
+
+const props = defineProps<GLink>();
+
+const defaultHref = ref('javascript:void(0)');
+const onBeforeJump = () => {
+  if (!props.href) return false;
+  if (props.target && props.target.includes('blank')) {
+    window.open(props.href);
+    return false;
+  }
+  window.location.href = props.href;
+  return false;
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'devui-theme/styles-var/devui-var.scss';
+
+.g-link {
+  // color: inherit; // 书写会导致默认状态的a:hover a:visited等全部被覆盖。如果要写得所有状态写全
+
+  &[disabled=true] {
+    cursor: no-drop;
+    color: $devui-disabled-text !important;
+
+    &:hover,
+    &:active {
+      color: $devui-disabled-text !important;
+    }
+  }
+}
+</style>

src/components/GLink/type.ts

@@ -0,0 +1,12 @@
+export interface RouterLinkTo {
+  name: string,
+  params?: object,
+  query?: object
+}
+
+export interface GLink {
+  to?: RouterLinkTo,
+  href?: string,
+  target?: string,
+  disabled?: boolean
+}