import { defineComponent } from 'vue';
import { Card } from 'ant-design-vue';
import styles from './About.module.less';

interface TechItem {
  name: string;
  version: string;
}

/**
 * 关于页面
 */
export default defineComponent({
  name: 'About',
  setup() {
    const techStack: TechItem[] = [
      { name: 'Vue', version: '^3.3.0' },
      { name: 'Vite', version: '^5.0.0' },
      { name: 'TypeScript', version: '^5.3.0' },
      { name: 'Ant Design Vue', version: '^4.0.0' },
      { name: 'Vue Router', version: '^4.2.0' },
      { name: 'Less', version: '^4.6.4' },
    ];

    return () => (
      <div class={styles.container}>
        <h2 class={styles.title}>关于</h2>
        <Card>
          <p>CPMS 运营平台前端 PC 端。</p>
          <h3 class={styles.subtitle}>技术栈</h3>
          <ul class={styles.list}>
            {techStack.map((item) => (
              <li key={item.name}>
                {item.name} — {item.version}
              </li>
            ))}
          </ul>
        </Card>
      </div>
    );
  },
});