洞察报告；

src/router/index.js

@@ -200,6 +200,12 @@ const constantRoutes = [
             meta: { keepAlive: true, showPublish: false, showPreview: false, showShare: true, showDownload: true },
             component: () => import(/* webpackChunkName: "analyse" */ '@/views/DataAnalyse/particulars/test')
           },
+          {
+            path: 'insight',
+            name: 'AnalysisInsight',
+            meta: { keepAlive: true, showDownload: true },
+            component: () => import(/* webpackChunkName: "analyse" */ '@/views/DataAnalyse/insight/Index.vue')
+          },
           {
             path: 'diagram',
             name: 'Diagram',

src/views/DataAnalyse/index.vue

@@ -40,6 +40,12 @@ export default defineComponent({
       (val) => {
         if (+val === 2) {
           menus.value = [
+            { // todo 仅标准版和快测版问卷显示该菜单
+              name: '洞察报告',
+              icon: '',
+              children: [],
+              path: '/survey/analyse/insight'
+            },
             {
               name: '基础分析',
               icon: '',

src/views/DataAnalyse/insight/Index.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { Modal } from 'ant-design-vue'
+
+
+import InsightEmpty from './components/InsightEmpty.vue'
+import InsightShare from './components/InsightShare.vue'
+import InsightOverview from './components/InsightOverview.vue'
+
+
+
+function onGenerateReport(isInit) {
+  if(!isInit) {
+    Modal.confirm({
+      title: () => '确定更新？',
+      content: () => '更新后报告无法恢复！包括您自定义的决策标准和核心结论等',
+      class: 'custom-modal custom-modal-title-confirm-notice',
+      width: '400px',
+      okText: '确 定',
+      cancelText: '取 消',
+      onOk() {
+        onConfirmGenerateReport(isInit)
+      }
+    })
+  } else {
+    onConfirmGenerateReport(isInit)
+  }
+}
+
+function onConfirmGenerateReport(isInit) {
+  // todo
+}
+</script>
+
+<template>
+  <div class="insight-page">
+    <InsightEmpty v-if="false" @generate="onGenerateReport" />
+
+    <InsightShare @regenerate="onGenerateReport" />
+
+    <InsightOverview />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.insight-page {
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+}
+</style>

src/views/DataAnalyse/insight/components/InsightEmpty.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { defineEmits } from 'vue'
+
+const emits = defineEmits(['generate'])
+
+function generateReport() {
+  emits('generate', true)
+}
+</script>
+
+<template>
+  <div class="insight-empty">
+    <img src="@/assets/img/publish/no-data.png" alt="" class="img">
+
+    <div class="message">请点击下方按钮生成洞察报告，需满足每个概念有效样本量均≥60</div>
+
+    <a-button type="primary" class="custom-button generate-button" @click="generateReport()">
+      <img src="../img/icon_generate_report.png" alt="" class="icon">
+      <span>生成报告</span>
+    </a-button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.insight-empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.img {
+  display: block;
+  width: 160px;
+  height: 160px;
+  margin: 0 auto 8px;
+}
+
+.message {
+  height: 40px;
+  font-family: "Alibaba PuHuiTi 2.0", sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  text-align: center;
+  color: #70B937;
+}
+
+.generate-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+
+  .icon {
+    display: block;
+    width: 14px;
+    height: 14px;
+    margin-right: 5px;
+  }
+}
+</style>

src/views/DataAnalyse/insight/components/InsightOverview.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { EyeInvisibleOutlined } from '@ant-design/icons-vue'
+
+
+import SectionTitle from './SectionTitle.vue'
+import Section from './Section.vue'
+</script>
+
+<template>
+  <div class="insight-overview">
+    <SectionTitle>
+      <span class="text">报告概览</span>
+      <EyeInvisibleOutlined class="icon" />
+    </SectionTitle>
+
+    <Section class="section">
+      <a-row>
+        <a-col :span="8" class="rect">
+          <span class="label">创建时间</span>
+          <span class="value">2024年7月5日 14:20:00</span>
+        </a-col>
+        <a-col :span="8" class="rect">
+          <span class="label">分析状态</span>
+          <span class="value">已完成</span>
+        </a-col>
+        <a-col :span="8" class="rect">
+          <span class="label">问卷版本</span>
+          <span class="value">版本1（2024-05-01 12:00:00）</span>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="8" class="rect">
+          <span class="label">完成时间</span>
+          <span class="value">2024年7月5日 14:20:00</span>
+        </a-col>
+        <a-col :span="8" class="rect">
+          <span class="label">样本量</span>
+          <span class="value">30</span>
+        </a-col>
+        <a-col :span="8" class="rect">
+          <span class="label">报告版本</span>
+          <span class="value">版本1（2024-05-01 12:00:00）</span>
+        </a-col>
+      </a-row>
+    </Section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.insight-overview {
+  margin-bottom: 24px;
+
+  .icon {
+    margin-left: 6px;
+    font-size: 14px;
+    color: #B9B9B9;
+  }
+
+  .section {
+    padding-bottom: 1px;
+  }
+
+  .rect {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 15px;
+
+    .label {
+      flex: none;
+      width: 68px;
+    }
+  }
+}
+</style>

src/views/DataAnalyse/insight/components/InsightShare.vue

@@ -0,0 +1,243 @@
+<script setup>
+import { defineEmits, ref } from 'vue'
+import { InfoCircleOutlined } from '@ant-design/icons-vue'
+
+const emits = defineEmits(['regenerate'])
+
+const loading = ref(false)
+const editable = ref(false)
+const password = ref('') // 密码
+const expiredForDays = ref('0') // 有效期天数
+
+function onEdit(type) {
+  if(loading.value) {
+    return
+  }
+  editable.value = type
+}
+
+function onPasswordChanged() {
+  password.value = password.value.replaceAll(/[^a-zA-Z0-9]/g, '').substring(0, 4)
+}
+
+function getPopupContainer(el) {
+  return el?.parentNode || document.body
+}
+
+function onCopy() {
+  // todo
+}
+
+function onUpdateReport() {
+  emits('regenerate')
+}
+</script>
+
+<template>
+  <div class="insight-share">
+    <a-popover :arrowPointAtCenter="false"
+               :getPopupContainer="getPopupContainer"
+               trigger="click"
+               placement="bottomLeft"
+               overlayClassName="share-popover">
+
+      <template #content>
+        <div class="share-popover-content" @click.stop>
+          <div class="title">分享报告</div>
+          <div class="row">
+            <span class="label">访问密码</span>
+            <a-input v-model:value="password"
+                     class="custom-input password-input"
+                     :disabled="!editable || loading"
+                     placeholder="访问密码"
+                     @change="onPasswordChanged" />
+            <a-button type="text"
+                      :disabled="loading"
+                      class="custom-button edit-password-button"
+                      @click="onEdit(true)">
+              修改
+            </a-button>
+          </div>
+          <div class="row">
+            <span class="label"></span>
+            <span class="password-prompt">支持4位大小写字母或数字</span>
+          </div>
+          <div class="row">
+            <span class="label">链接有效期</span>
+            <a-radio-group v-model:value="expiredForDays" :disabled="loading">
+              <a-radio value="0">永久</a-radio>
+              <a-radio value="30">30天</a-radio>
+              <a-radio value="7">7天</a-radio>
+              <a-radio value="1">1天</a-radio>
+            </a-radio-group>
+          </div>
+          <div class="row flex-end">
+            <a-button :loading="loading"
+                      type="primary"
+                      class="custom-button copy-button"
+                      @click="onCopy">
+              复制链接和密码
+            </a-button>
+          </div>
+        </div>
+      </template>
+
+      <a-button class="custom-button button mr-20">
+        <img src="../img/icon_share.png" alt="" class="icon">
+        <span>分享报告</span>
+      </a-button>
+    </a-popover>
+
+    <a-button class="custom-button button mr-10" @click="onUpdateReport">
+      <img src="../img/icon_refresh.png" alt="" class="icon">
+      <span>更新报告</span>
+    </a-button>
+
+    <div class="message">
+      <InfoCircleOutlined class="icon" />
+
+      <span>洞察报告不会自动实时更新,如问卷设计有调整或参与分析的样本有变化,需手动更新报告</span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.insight-share {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.mr-10 {
+  margin-right: 10px;
+}
+
+.mr-20 {
+  margin-right: 20px;
+}
+
+.button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 104px;
+  height: 32px;
+  border: 1px solid #CCCCCC;
+  border-radius: 4px;
+  background: #FFFFFF;
+
+  .icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    border: none;
+  }
+}
+
+.message {
+  .icon {
+    margin-right: 4px;
+    font-size: 14px;
+  }
+
+  font-family: Source Han Sans, sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  color: #FC4545;
+}
+
+:deep(.share-popover) {
+  padding: 10px 0 0 0;
+
+  .ant-popover-arrow {
+    display: none;
+  }
+
+  .ant-popover-inner {
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+}
+
+.share-popover-content {
+  width: 389px;
+  padding: 16px;
+  border-radius: 10px;
+  background: #FFFFFF;
+  font-family: "Alibaba PuHuiTi 3.0", sans-serif;
+
+  .title {
+    height: 24px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: normal;
+    color: #262626;
+  }
+
+  .row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    .label {
+      flex: none;
+      width: 82px;
+      font-size: 14px;
+      font-weight: normal;
+      color: #434343;
+    }
+
+    .edit-password-button {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      margin-left: 6px;
+      padding: 0;
+      font-size: 12px;
+      font-weight: normal;
+      color: #81B74C;
+    }
+
+    .password-input {
+      width: 128px;
+      height: 32px;
+      border: 1px solid #DFE0E3;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: normal;
+      color: #979797;
+
+      &.ant-input-disabled {
+        background: #F5F5F5;
+      }
+    }
+
+    .password-prompt {
+      margin-top: 4px;
+      margin-bottom: 16px;
+      font-size: 12px;
+      font-weight: normal;
+      line-height: 22px;
+      color: #979797;
+    }
+  }
+
+  .row.flex-end {
+    justify-content: flex-end;
+  }
+
+  .copy-button {
+    height: 32px;
+    margin-top: 18px;
+    padding-left: 16px;
+    padding-right: 16px;
+    border-radius: 4px;
+    background: #70B936;
+  }
+}
+</style>

src/views/DataAnalyse/insight/components/Section.vue

@@ -0,0 +1,17 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="insight-section">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.insight-section {
+  padding: 16px;
+  border: 1px solid #DFE0E3;
+  border-radius: 8px;
+}
+</style>

src/views/DataAnalyse/insight/components/SectionTitle.vue

@@ -0,0 +1,19 @@
+<script setup>
+import SubTitle from '@/views/DataAnalyse/components/SubTitle.vue'
+</script>
+
+<template>
+  <SubTitle class="section-title">
+    <template #default>
+      <slot></slot>
+    </template>
+  </SubTitle>
+</template>
+
+<style scoped lang="scss">
+.section-title {
+  margin: 0 0 16px 0;
+  font-family: Source Han Sans, sans-serif;
+  font-weight: normal;
+}
+</style>