<template>
  <a-layout-sider width="250" style="background: #fff">
    <div class="logo" style="text-align: center; padding: 20px">
      <img :src="props?.icon_url" alt="Logo" style="width: 100px" />
    </div>
    <a-menu mode="inline" theme="light">
      <a-menu-item key="1">
        <span>舆情脉络整理</span>
        <span style="color: #8492ff; font-size: 12px">（对话式）</span>
      </a-menu-item>
      <a-menu-item key="2">历史对话</a-menu-item>
      <a-menu-item key="3">梳理这次舆情的时间线和关键节点</a-menu-item>
      <a-menu-item key="4">提取事件发展的五阶段脉络</a-menu-item>
      <a-menu-item key="5">提炼不同群体的主要观点和态度立场</a-menu-item>
      <a-menu-item key="6">分类汇总正面、中立、负面声音要点</a-menu-item>
      <a-menu-item key="7">分析文本中的情绪类型及占比</a-menu-item>
      <a-menu-item key="8">识别负面情绪集中的评论内容</a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script lang="ts" setup>
import { defineComponent } from 'vue';

const props = defineComponent({
  props: {
    info: {
      type: Object,
      default: {},
    },
  },
});
console.log(props.info, 'props.info');
</script>

<style scoped>
.logo {
  margin-bottom: 20px;
}
</style>
