feat: 优化表格和样式

1. 更新 YlTable 组件，添加圆角和斑马纹样式
2. 修改搜索框边框颜色为绿色(#70b937)
3. 调整分析页面表格列宽和样式
4. 启用首页的我的任务组件
5. 优化分析信息组件的标签样式

components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTableV2: typeof import('element-plus/es')['ElTableV2']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     Index: typeof import('./src/components/Analysis/Index.vue')['default']

src/components/Search/Index.vue

@@ -52,7 +52,7 @@ function handleSearchActino() {
   }
 
   border-radius: 18px;
-  border: solid 2px var(--primary-color);
+  border: solid 2px #70b937;
   background-color: #f5f5f5;
 
   //width: 100vw;

src/components/YlTable/Index.vue

@@ -1,18 +1,60 @@
 <script setup lang="ts">
-const data = defineModel<unknown[]>('data', { default: [] })
+import { RowAlign, type ColumnStyle } from 'element-plus';
-const props = defineModel<{
+import type { CSSProperties } from 'vue';
-    prop: any,
+
-    label: any,
+const data = defineModel<unknown[]>('data', { default: [] });
-    width: any
+const props = defineModel<
-}[]>("props")
+  {
+    prop: any;
+    label: any;
+    width: any;
+  }[]
+>('props');
 
 // 是否只显示单行
-const singleLine = defineModel<boolean>('singleLine', { default: false })
+const singleLine = defineModel<boolean>('singleLine', { default: false });
+const rowStyle = defineModel<ColumnStyle<any>>('rowStyle', {
+  default: {}
+});
+const headerStyle = defineModel<ColumnStyle<any>>('headerStyle', {
+  default: {
+    background: 'red'
+  }
+});
+const rounded = defineModel('rounded', { default: true });
+const stripeColor = defineModel('stripeColor', { default: 'red' });
+
+// (data: { row: any; rowIndex: number; }) => string
+function setStripeColor(rowData: { row: any; rowIndex: number }): string {
+  const { rowIndex } = rowData;
+  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
+}
 </script>
 
 <template>
-    <el-table :data="data" style="width: 100%">
+  <div :style="{ borderRadius: rounded ? '10px' : '0', overflow: 'hidden' }">
-        <el-table-column v-for="item in props" :prop="item.prop" :label="item.label" :width="item.width"
+    <el-table
-            show-overflow-tooltip />
+      :header-cell-style="{ background: '#f2f8ee' }"
+      :row-class-name="setStripeColor"
+      :data="data"
+      style="width: 100%"
+    >
+      <el-table-column
+        v-for="item in props"
+        :prop="item.prop"
+        :label="item.label"
+        :width="item.width"
+        show-overflow-tooltip
+      />
     </el-table>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+:deep(.even-row) {
+  background-color: white;
+}
+:deep(.odd-row) {
+  background-color: #fafbfa;
+}
+</style>

src/views/Home/Index.vue

@@ -62,7 +62,7 @@ function handleSearchClick() {
       <!--底部新建问卷-->
       <NewSurvey />
 
-      <!-- <mine-task /> -->
+      <mine-task />
 
       <navigation />
     </div>

src/views/Survey/components/SurveyItem.vue

@@ -280,6 +280,7 @@ function copyItem(item: SurveyItem) {
     }
 
     .wrap {
+      margin-left: 5px;
       padding: 1px 3px;
       border: 2px solid #f5f5f5;
       border-radius: 6px;

src/views/Survey/views/Analysis/Index.vue

@@ -2,7 +2,6 @@
 import { currentSurvey, fetchSingleSurvey } from '@/views/Survey/hooks/useSurveyData';
 import SurveyItem from '@/views/Survey/components/SurveyItem.vue';
 import LogicInfo from '@/views/Survey/views/Analysis/components/LogicInfo/Index.vue';
-import AiInsightResults from '@/views/Survey/views/Analysis/components/AiInsightResults/Index.vue';
 import { useRoute } from 'vue-router';
 import {
   useFetchAnalysis,
@@ -47,11 +46,7 @@ useFetchAnalysis(route.query.sn as string);
       </template>
     </van-cell>
     <!-- 逻辑配额、随机题组配额、循环体配额 表格部分-->
-    <van-cell class="logic-info">
-      <template #extra>
     <logic-info />
-      </template>
-    </van-cell>
 
     <van-cell v-if="aiInsightsConfig.message.length > 0" class="ai-insight" :key="route">
       <template #extra>

src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <section v-for="analysis in questionAnalysis" :key="analysis.stem" class="mt10">
-      <el-tag>{{ questionTypeMap.get(analysis.question_type as number) }}</el-tag>
+      <el-tag type="success" size="small">{{
+        questionTypeMap.get(analysis.question_type as number)
+      }}</el-tag>
       {{ analysis.stem }}
 
       <chart-msg :series="formatData(analysis)" v-if="showChart.includes(analysis.question_type)" />
@@ -10,7 +12,7 @@
         :props="getTableHeadProps(analysis.head)"
         :data="analysis.option"
         v-if="analysis.head"
-      ></yl-table>
+      />
 
       <!--      {{ analysis }}-->
     </section>

src/views/Survey/views/Analysis/components/LogicInfo/Index.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import {
-  updateDate, cycle, loading, quota, random
+  updateDate,
+  cycle,
+  loading,
+  quota,
+  random
 } from '@/views/Survey/views/Analysis/components/LogicInfo/hooks/useLogicInfo';
 import { useRoute } from 'vue-router';
 import YlTable from '@/components/YlTable/Index.vue';
@@ -11,7 +15,8 @@ const route = useRoute();
 updateDate(route.query.sn as string);
 
 const activeTab = ref(0);
-const tabs = ref<LogicInfoTab[]>([{
+const tabs = ref<LogicInfoTab[]>([
+  {
     title: '逻辑配额',
     props: [
       { prop: 'question_title', label: '题号', width: 120 },
@@ -19,8 +24,9 @@ const tabs = ref<LogicInfoTab[]>([{
       { prop: 'sample_number', label: '样本量', width: 90 },
       { prop: 'percent', label: '进度', width: 90 }
     ],
-  data: quota
+    data: quota as any
-}, {
+  },
+  {
     title: '随机题组配额',
     props: [
       { prop: 'title', label: '题组', width: 120 },
@@ -28,29 +34,50 @@ const tabs = ref<LogicInfoTab[]>([{
       { prop: 'sample_num', label: '样本量', width: 120 },
       { prop: 'precent', label: '进度', width: 120 }
     ],
-  data: random
+    data: random as any
-}, {
+  },
+  {
     title: '循环题组配额',
     props: [
-    { prop: 'question_title', label: '关联题目', width: 120 },
+      { prop: 'question_title', label: '关联题目', width: 150 },
-    { prop: 'group_info', label: '题组', width: 120 },
+      { prop: 'group_info', label: '题组', width: 100 },
-    { prop: 'sample_num', label: '样本量', width: 120 },
+      { prop: 'sample_num', label: '样本量', width: 80 },
       { prop: 'precent', label: '进度', width: 120 }
     ],
-  data: cycle
+    data: cycle as any
-}]);
+  }
+]);
+const currentTabs = computed(() => {
+  return tabs.value.filter((item) => {
+    return item.data.length > 0;
+  });
+});
+
+// 自动计算是否有 card 区域
+const visibleQuestionConfig = computed(() => {
+  return tabs.value.filter((item) => {
+    return item.data.length > 0;
+  });
+});
 </script>
 
 <template>
-  <section style="width:86vw" v-loading="loading">
+  <van-cell class="logic-info" v-if="visibleQuestionConfig">
+    <template #extra>
+      <section style="width: 86vw" v-loading="loading">
         <!--  tabs 选项列表    -->
         <van-tabs v-model:active="activeTab">
-      <van-tab v-for="tab in tabs" :key="tab.title">
+          <van-tab v-for="tab in currentTabs" :key="tab.title">
             <template #title>
               <el-text size="small">{{ tab.title }}</el-text>
             </template>
           </van-tab>
         </van-tabs>
-    <yl-table :data="tabs[activeTab].data" :props="tabs[activeTab].props"></yl-table>
+        <yl-table
+          :data="currentTabs[activeTab]?.data"
+          :props="currentTabs[activeTab]?.props"
+        ></yl-table>
       </section>
+    </template>
+  </van-cell>
 </template>

src/views/Survey/views/Analysis/components/types/logicInfo.d.ts

@@ -1,5 +1,5 @@
 type LogicInfoTab = {
   title: string,
   props: unknown,
-  data: unknown
+  data: [] | any[]
 }