搜索结果列表页面开发

src/components/Icon/README.md

@@ -0,0 +1,22 @@
+# Demo
+
+### 说明
+- 图标组件，基于iconfont
+- 已全局引用
+
+```ts
+// iconfont图标
+<Icon name="gt-commit" size="18px" color="#ccc" rotate="90deg" />
+// devui组件库图标
+<Icon name="icon-add" size="18px" color="#ccc" rotate="90deg" />
+```
+
+### Props
+
+| 参数       | 说明                   | 类型                        | 可选值    | 默认值     |
+|-----------|------------------------|----------------------------|----------|-----------|
+| name        | 图标名（Symbol格式）    | string                      | -        | -         |
+| size        | 图标字体大小           | string                      | -        | -         |
+| color       | 图标颜色              | string                      | -        | -         |
+| rotate      | 图标旋转角度           | string                      | -        | -         |
+

src/components/Icon/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <d-icon v-bind="props" v-if="!name.includes('gt-')" />
+  <!-- 防止影响之前到图标布局 -->
+  <span v-else-if="operable" class="custom-icon-container">
+    <slot name="prefix"></slot>
+    <svg
+      class="icon"
+      aria-hidden="true"
+      :style="{
+      fontSize: size,
+      color,
+      transform: `rotate(${rotate})`
+    }"
+    >
+      <use :xlink:href="`#${name}`" />
+    </svg>
+    <slot name="suffix"></slot>
+  </span>
+  <svg
+    v-else
+    class="icon"
+    aria-hidden="true"
+    :style="{
+      fontSize: size,
+      color,
+      transform: `rotate(${rotate})`
+    }"
+  >
+    <use :xlink:href="`#${name}`" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    name: string; // 图标名称
+    size?: string;
+    color?: string;
+    rotate?: string; // 旋转角度
+    operable?: boolean;
+  }>(),
+  {
+    name: 'gt-run',
+    size: '16px',
+    color: 'var(--color-CG600)',
+    rotate: '0deg',
+    operable: false
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  display: inline-block;
+  transition: transform var(--devui-animation-duration-slow, 0.3s)
+    var(--devui-animation-ease-in-out-smooth, cubic-bezier(0.645, 0.045, 0.355, 1));
+}
+
+.custom-icon-container {
+  height: 32px;
+  padding: 8px;
+  line-height: 1;
+  border-radius: $devui-border-radius;
+
+  &:hover {
+    background: $devui-list-item-hover-bg;
+  }
+}
+
+.custom-icon-container > *:not(:last-child) {
+  margin-right: 8px;
+}
+</style>