refactor(list): 封装List组件基础样式 (#236)

Author: xingyan95

packages/devui-vue/devui/list/index.ts

@@ -0,0 +1,15 @@
+import type { App } from 'vue';
+import List from './src/list';
+import ListItem from './src/list-item';
+
+export { List, ListItem };
+
+export default {
+  title: 'List 列表',
+  category: '数据展示',
+  status: '10%',
+  install(app: App): void {
+    app.component(List.name, List);
+    app.component(ListItem.name, ListItem);
+  },
+};

packages/devui-vue/devui/list/src/list-item.scss

@@ -0,0 +1,25 @@
+@import '../../styles-var/devui-var.scss';
+
+.devui-list-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 36px;
+  padding: 0 8px;
+  color: $devui-text;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition:
+    color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth,
+    background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth;
+
+  &:hover {
+    color: $devui-list-item-hover-text;
+    background-color: $devui-list-item-hover-bg;
+  }
+
+  &:active {
+    color: $devui-list-item-active-text;
+    background-color: $devui-list-item-hover-bg;
+  }
+}

packages/devui-vue/devui/list/src/list-item.tsx

@@ -0,0 +1,9 @@
+import { defineComponent } from 'vue';
+import './list-item.scss';
+
+export default defineComponent({
+  name: 'DListItem',
+  setup(props, { slots }) {
+    return () => <div class='devui-list-item'>{slots.default?.()}</div>;
+  },
+});

packages/devui-vue/devui/list/src/list.scss

@@ -0,0 +1,10 @@
+@import '../../styles-var/devui-var.scss';
+
+.devui-list {
+  padding-bottom: 4px;
+  border-radius: $devui-border-radius;
+  box-sizing: border-box;
+  background-clip: padding-box;
+  background-color: $devui-connected-overlay-bg;
+  outline: none;
+}

packages/devui-vue/devui/list/src/list.tsx

@@ -0,0 +1,9 @@
+import { defineComponent } from 'vue';
+import './list.scss';
+
+export default defineComponent({
+  name: 'DList',
+  setup(props, { slots }) {
+    return () => <div class='devui-list'>{slots.default?.()}</div>;
+  },
+});

packages/devui-vue/docs/components/list/index.md

@@ -0,0 +1,20 @@
+# List 列表
+
+用于展示列表形态的一组数据。
+
+### 基本用法
+
+:::demo
+
+```vue
+<template>
+  <d-list>
+    <d-list-item>Item 1</d-list-item>
+    <d-list-item>Item 2</d-list-item>
+    <d-list-item>Item 3</d-list-item>
+    <d-list-item>Item 4</d-list-item>
+  </d-list>
+</template>
+```
+
+:::