Tencent · dntzhang · Aug 19, 2023 · Aug 19, 2023
diff --git a/tdesign/desktop/src/list/index.html b/tdesign/desktop/src/list/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>back-top</title>
+  <script type="module" src="./list-item-meta.tsx"></script>
+  <script type="module" src="./list-item.tsx"></script>
+  <script type="module" src="./list.tsx"></script>
+  <script type="module" src="../link/index.tsx"></script>
+  <style>
+
+  </style>
+</head>
+
+<body>
+  <!-- <t-list>
+    <t-list-item>
+      <t-list-item-meta title="列表主内容" image="https://pic1.zhimg.com/v2-2c4ce68d86daa94c40e1c2ad858c221f_r.jpg?source=1940ef5c" description="列表内容列表内容"></t-list-item-meta>
+    </t-list-item>
+    <t-list-item>
+      <t-list-item-meta title="列表主内容" image="https://pic1.zhimg.com/v2-2c4ce68d86daa94c40e1c2ad858c221f_r.jpg?source=1940ef5c" description="列表内容列表内容"></t-list-item-meta>
+    </t-list-item>
+    <t-list-item>
+      <t-list-item-meta title="列表主内容" image="https://pic1.zhimg.com/v2-2c4ce68d86daa94c40e1c2ad858c221f_r.jpg?source=1940ef5c" description="列表内容列表内容"></t-list-item-meta>
+    </t-list-item>
+  </t-list> -->
+  <!-- <t-link theme="primary" hover="color">操作1</t-link> -->
+  <t-list split="true" stripe="true">
+    <t-list-item>
+      <t-list-item-meta title="列表主内容"
+        image="https://pic1.zhimg.com/v2-2c4ce68d86daa94c40e1c2ad858c221f_r.jpg?source=1940ef5c" description="列表内容列表内容">
+      </t-list-item-meta>
+      <span slot="action">
+        <t-link theme="primary" hover="color" style="margin-left: 16px">操作1</t-link>
+        <t-link theme="primary" hover="color" style="margin-left: 16px">操作2</t-link>
+        <t-link theme="primary" hover="color" style="margin-left: 16px">操作3</t-link>
+      </span>
+    </t-list-item>
+    <t-list-item>
+      <t-list-item-meta title="列表副内容"
+        image="https://pic1.zhimg.com/v2-2c4ce68d86daa94c40e1c2ad858c221f_r.jpg?source=1940ef5c" description="列表内容列表内容">
+      </t-list-item-meta>
+      <span slot="action">
+        <t-link theme="primary" hover="color" style="margin-left: 16px">操作1</t-link>
+        <t-link theme="primary" hover="color" style="margin-left: 16px">操作2</t-link>
+        <t-link theme="primary" hover="color" style="margin-left: 16px">操作3</t-link>
+      </span>
+    </t-list-item>
+  </t-list>
+  <!-- <t-list-item>
+    <t-list-item-meta title="列表主内容"
+      image="https://pic1.zhimg.com/v2-2c4ce68d86daa94c40e1c2ad858c221f_r.jpg?source=1940ef5c" description="列表内容列表内容">
+    </t-list-item-meta>
+    <span slot="action">
+      <t-link theme="primary" hover="color" style="margin-left: 16px">操作1</t-link>
+      <t-link theme="primary" hover="color" style="margin-left: 16px">操作2</t-link>
+      <t-link theme="primary" hover="color" style="margin-left: 16px">操作3</t-link>
+    </span>
+  </t-list-item>
+  <t-list-item>
+    <t-list-item-meta title="列表主内容"
+      image="https://pic1.zhimg.com/v2-2c4ce68d86daa94c40e1c2ad858c221f_r.jpg?source=1940ef5c" description="列表内容列表内容">
+    </t-list-item-meta>
+  </t-list-item>
+  <t-list-item>
+    <t-list-item-meta title="列表主内容" description="列表内容列表内容"></t-list-item-meta>
+  </t-list-item> -->
+
+
+  <script>
+  </script>
+</body>
+
+</html>
diff --git a/tdesign/desktop/src/list/list-item-meta.tsx b/tdesign/desktop/src/list/list-item-meta.tsx
@@ -0,0 +1,45 @@
+import { OmiProps, WeElement, h, tag, classNames } from 'omi'
+import style from './style'
+import { ListItemMetaProps } from './types'
+import { TdClassNamePefix } from '../utils/clsx'
+import { StyledProps , TElement,TNode } from '../common';
+
+const ListItenMetaClassNamePefix = (className: string) => TdClassNamePefix('list-item__meta-') + className
+
+@tag('t-list-item-meta')
+export default class ListItemMeta extends WeElement<ListItemMetaProps> {
+  static css = style
+
+  static defaultProps = {}
+
+  static propTypes = {
+    description: String,
+    image: String,
+    title: String,
+  }
+
+
+  renderImage = (image : any) => {
+    return (
+      <div class={classNames(ListItenMetaClassNamePefix('avatar'))}>
+        <img src={image} alt="" />
+      </div>
+    );
+  };
+
+  render(props: OmiProps<ListItemMetaProps, any>, store: any) {
+    const { description, image, title } = props
+
+    return (
+      <>
+        <div class={classNames(TdClassNamePefix('list-item__meta'))}>
+          {image && this.renderImage(image)}
+          <div>
+            <h3 class={classNames(ListItenMetaClassNamePefix('title'))}>{title}</h3>
+            {typeof description === 'string' ? <p class={classNames(ListItenMetaClassNamePefix('description'))}>{description}</p> : description}
+          </div>
+        </div>
+      </>
+    )
+  }
+}
diff --git a/tdesign/desktop/src/list/list-item.tsx b/tdesign/desktop/src/list/list-item.tsx
@@ -0,0 +1,45 @@
+import { OmiProps, WeElement, h, tag, classNames } from 'omi'
+import style from './style'
+import { ListItemProps } from './types'
+import { TdClassNamePefix } from '../utils/clsx'
+import './list-item-meta'
+
+
+const ListItemClassNamePefix = (className: string) => TdClassNamePefix('list-item__') + className
+
+
+@tag('t-list-item')
+export default class ListItem extends WeElement<ListItemProps> {
+  static css = style
+
+  static defaultProps = {
+  }
+
+  static propTypes = {
+    action: String,
+    children:String,
+    content:String,
+    onClick: Function,
+  }
+
+  installed() {
+    console.log(this.props)
+  }
+  onClick = () =>{
+    console.log(111)
+  }
+  render(props: OmiProps<ListItemProps, any>, store: any) {
+    const { action, children, content } = props
+
+    return (
+      <>
+        <li class={classNames(TdClassNamePefix('list-item'))} onClick={this.onClick()} >
+          <div class={classNames(TdClassNamePefix('list-item-main'))}>
+            <slot></slot>
+            <slot name='action' class={classNames(ListItemClassNamePefix('action'))}></slot>
+          </div>
+        </li>
+      </>
+    )
+  }
+}
diff --git a/tdesign/desktop/src/list/list-us.md b/tdesign/desktop/src/list/list-us.md
@@ -0,0 +1,6 @@
+:: BASE_DOC ::
+
+## API
+### List Props
+
+
diff --git a/tdesign/desktop/src/list/list.md b/tdesign/desktop/src/list/list.md
@@ -0,0 +1,4 @@
+:: BASE_DOC ::
+
+## API
+### List Props
diff --git a/tdesign/desktop/src/list/list.tsx b/tdesign/desktop/src/list/list.tsx
@@ -0,0 +1,69 @@
+import { OmiProps, WeElement, h, tag, classNames } from 'omi'
+import style from './style'
+import { ListProps } from './types'
+import { TdClassNamePefix } from '../utils/clsx'
+
+const ListClassNamePefix = (className: string) => TdClassNamePefix('list__') + className
+
+@tag('t-list')
+export default class BackTop extends WeElement<ListProps> {
+  static css = style
+
+  static defaultProps = {
+    layout:'horizontal',
+    size:'size',
+    split:false,
+    stripe:false,
+  }
+
+  static propTypes = {
+    split:Boolean,
+    stripe:Boolean,
+    dragSort:Boolean,
+
+
+    asyncLoading:String,
+    footer:String,
+    header:String,
+    children:String,
+
+    layout:String,
+    size:String,
+
+    onLoadMore: Function,
+    onScroll: Function,
+  }
+  install() {
+    console.log(this)
+    console.log(this.children[0])
+    console.log(this.children[0].children)
+  }
+  getClasses(split:Boolean, stripe:Boolean) {
+    let cls:string[] = []
+    if(split){
+      cls.push(TdClassNamePefix('list--split'))
+    }
+    if(stripe){
+      cls.push(TdClassNamePefix('list--stripe'))
+    }
+    return cls
+  }
+
+  render(props: OmiProps<ListProps, any>, store: any) {
+    const { header, footer , split, stripe} = props
+
+    return (
+      <>
+        <div class={classNames(TdClassNamePefix('list'),...this.getClasses(split,stripe))}>
+          <slot name='header'></slot>
+          {header && <div>{header}</div>}
+          <ul class={classNames(ListClassNamePefix('inner'))}>
+            <slot></slot>
+          </ul>
+          {footer && <div>{footer}</div>}
+          <slot name='footer'></slot>
+        </div>
+      </>
+    )
+  }
+}
diff --git a/tdesign/desktop/src/list/style/index.ts b/tdesign/desktop/src/list/style/index.ts
@@ -0,0 +1,3 @@
+import styles from '../../_common/style/web/components/list/_index.less'
+
+export default styles
diff --git a/tdesign/desktop/src/list/types.ts b/tdesign/desktop/src/list/types.ts
@@ -0,0 +1,54 @@
+/* eslint-disable */
+
+import { TNode, TElement, SizeEnum } from '@src/common';
+
+
+export type ListProps = {
+  split?:Boolean
+  stripe?:Boolean
+  dragSort?:Boolean
+
+
+  asyncLoading?:string | Function
+  footer?:string | TNode
+  header?:string | TNode
+
+
+  layout?:string
+  size?:string
+
+  onLoadMore?: Function
+  onScroll?: Function
+}
+
+export type ListItemProps = {
+  /**
+   * 操作栏
+   */
+   action?: String | TNode
+   /**
+    * 内容，同 content
+    */
+   children?: String | TNode
+   /**
+    * 内容
+    */
+   content?: String | TNode
+
+   onClick?: Function
+}
+
+export type ListItemMetaProps = {
+  /**
+   * 列表项内容
+   */
+   description?: String | TNode
+   /**
+    * 列表项图片
+    */
+   image?: String | TNode
+   /**
+    * 列表项标题
+    */
+   title?: String | TNode
+}
diff --git a/tdesign/desktop/src/list/vite.config.js b/tdesign/desktop/src/list/vite.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  esbuild: {
+    jsxFactory: 'h',
+    jsxFragment: 'h.f',
+  },
+})