feat: 优化表格和样式

1. 更新 YlTable 组件，添加圆角和斑马纹样式 2. 修改搜索框边框颜色为绿色(#70b937) 3. 调整分析页面表格列宽和样式 4. 启用首页的我的任务组件 5. 优化分析信息组件的标签样式
2025-05-16 16:54:22 +08:00
parent d0952d2576
commit 00e3e67819
9 changed files with 131 additions and 63 deletions
--- a/components.d.ts
+++ b/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']
--- a/src/components/Search/Index.vue
+++ b/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;
--- a/src/components/YlTable/Index.vue
+++ b/src/components/YlTable/Index.vue
@@ -1,18 +1,60 @@
 <script setup lang="ts">
-const data = defineModel<unknown[]>('data', { default: [] })
-const props = defineModel<{
-    prop: any,
-    label: any,
-    width: any
-}[]>("props")
+import { RowAlign, type ColumnStyle } from 'element-plus';
+import type { CSSProperties } from 'vue';
+
+const data = defineModel<unknown[]>('data', { default: [] });
+const props = defineModel<
+  {
+    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%">
-        <el-table-column v-for="item in props" :prop="item.prop" :label="item.label" :width="item.width"
-            show-overflow-tooltip />
+  <div :style="{ borderRadius: rounded ? '10px' : '0', overflow: 'hidden' }">
+    <el-table
+      :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>
-</template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.even-row) {
+  background-color: white;
+}
+:deep(.odd-row) {
+  background-color: #fafbfa;
+}
+</style>
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -62,7 +62,7 @@ function handleSearchClick() {
      <!--底部新建问卷-->
      <NewSurvey />

-      <!-- <mine-task /> -->
+      <mine-task />

      <navigation />
    </div>
--- a/src/views/Survey/components/SurveyItem.vue
+++ b/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;
--- a/src/views/Survey/views/Analysis/Index.vue
+++ b/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>
+    <logic-info />

    <van-cell v-if="aiInsightsConfig.message.length > 0" class="ai-insight" :key="route">
      <template #extra>
--- a/src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue
+++ b/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>
--- a/src/views/Survey/views/Analysis/components/LogicInfo/Index.vue
+++ b/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,46 +15,69 @@ const route = useRoute();
 updateDate(route.query.sn as string);

 const activeTab = ref(0);
-const tabs = ref<LogicInfoTab[]>([{
-  title: '逻辑配额',
-  props: [
-    { prop: 'question_title', label: '题号', width: 120 },
-    { prop: 'logic_text', label: '选项', width: 90 },
-    { prop: 'sample_number', label: '样本量', width: 90 },
-    { prop: 'percent', label: '进度', width: 90 }
-  ],
-  data: quota
-}, {
-  title: '随机题组配额',
-  props: [
-    { prop: 'title', label: '题组', width: 120 },
-    { prop: 'group_info', label: '题组位置', width: 120 },
-    { prop: 'sample_num', label: '样本量', width: 120 },
-    { prop: 'precent', label: '进度', width: 120 }
-  ],
-  data: random
-}, {
-  title: '循环题组配额',
-  props: [
-    { prop: 'question_title', label: '关联题目', width: 120 },
-    { prop: 'group_info', label: '题组', width: 120 },
-    { prop: 'sample_num', label: '样本量', width: 120 },
-    { prop: 'precent', label: '进度', width: 120 }
-  ],
-  data: cycle
-}]);
+const tabs = ref<LogicInfoTab[]>([
+  {
+    title: '逻辑配额',
+    props: [
+      { prop: 'question_title', label: '题号', width: 120 },
+      { prop: 'logic_text', label: '选项', width: 90 },
+      { prop: 'sample_number', label: '样本量', width: 90 },
+      { prop: 'percent', label: '进度', width: 90 }
+    ],
+    data: quota as any
+  },
+  {
+    title: '随机题组配额',
+    props: [
+      { prop: 'title', label: '题组', width: 120 },
+      { prop: 'group_info', label: '题组位置', width: 120 },
+      { prop: 'sample_num', label: '样本量', width: 120 },
+      { prop: 'precent', label: '进度', width: 120 }
+    ],
+    data: random as any
+  },
+  {
+    title: '循环题组配额',
+    props: [
+      { prop: 'question_title', label: '关联题目', width: 150 },
+      { prop: 'group_info', label: '题组', width: 100 },
+      { prop: 'sample_num', label: '样本量', width: 80 },
+      { prop: 'precent', label: '进度', width: 120 }
+    ],
+    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">
-    <!--  tabs 选项列表    -->
-    <van-tabs v-model:active="activeTab">
-      <van-tab v-for="tab in tabs" :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>
-  </section>
+  <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 currentTabs" :key="tab.title">
+            <template #title>
+              <el-text size="small">{{ tab.title }}</el-text>
+            </template>
+          </van-tab>
+        </van-tabs>
+        <yl-table
+          :data="currentTabs[activeTab]?.data"
+          :props="currentTabs[activeTab]?.props"
+        ></yl-table>
+      </section>
+    </template>
+  </van-cell>
 </template>
--- a/src/views/Survey/views/Analysis/components/types/logicInfo.d.ts
+++ b/src/views/Survey/views/Analysis/components/types/logicInfo.d.ts
@@ -1,5 +1,5 @@
 type LogicInfoTab = {
  title: string,
  props: unknown,
-  data: unknown
+  data: [] | any[]
 }