更多“操作”的样式

components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APopover: typeof import('ant-design-vue/es')['Popover']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']

src/features/projectManagement/ProjectManagement.vue

@@ -78,26 +78,41 @@
             >
               重新计算
             </a-button>
-            <a-button @click="handleLogsOfProject(record.id)">
-              错误报告
-            </a-button>
-            <a-button
-              v-if="
-                record.status !== 'PROCESSING' &&
-                store.isGreaterThanEqualRootOrgAdmin
-              "
-              @click="goProjectDataSource(record.id)"
-            >
-              数据管理
-            </a-button>
-            <a-button
-              v-if="record.status !== 'PROCESSING'"
-              @click="goProjectParams(record.id)"
-            >
-              参数配置
-            </a-button>
-            <a-button @click="goProjectPapers(record.id)"> 试卷列表 </a-button>
-            <a-button @click="goAllAnalysis(record.id)"> 整体分析 </a-button>
+            <a-popover placement="bottom">
+              <template #content>
+                <a-button @click="handleLogsOfProject(record.id)" type="text">
+                  错误报告
+                </a-button>
+                <br />
+                <a-button
+                  v-if="
+                    record.status !== 'PROCESSING' &&
+                    store.isGreaterThanEqualRootOrgAdmin
+                  "
+                  @click="goProjectDataSource(record.id)"
+                  type="text"
+                >
+                  数据管理
+                </a-button>
+                <br />
+                <a-button
+                  v-if="record.status !== 'PROCESSING'"
+                  @click="goProjectParams(record.id)"
+                  type="text"
+                >
+                  参数配置
+                </a-button>
+                <br />
+                <a-button @click="goProjectPapers(record.id)" type="text">
+                  试卷列表
+                </a-button>
+                <br />
+                <a-button @click="goAllAnalysis(record.id)" type="text">
+                  整体分析
+                </a-button>
+              </template>
+              <a-button>更多</a-button>
+            </a-popover>
           </span>
         </template>
       </a-table>

src/features/userManagement/UserManagement.vue

@@ -69,13 +69,21 @@
             <a-button @click="handleToggleUsers(!record.enable, [record.id])">
               {{ record.enable ? "禁用" : "启用" }}
             </a-button>
-            <a-button @click="handleResetUsers([record.id])">重置密码</a-button>
-            <a-button
-              v-if="store.isGreaterThanEqualRootOrgAdmin"
-              @click="handleUserPrivilege(record.id)"
-            >
-              权限设置
-            </a-button>
+            <a-popover placement="bottom">
+              <template #content>
+                <a-button @click="handleResetUsers([record.id])" type="text">
+                  重置密码
+                </a-button>
+                <a-button
+                  v-if="store.isGreaterThanEqualRootOrgAdmin"
+                  type="text"
+                  @click="handleUserPrivilege(record.id)"
+                >
+                  权限设置
+                </a-button>
+              </template>
+              <a-button>更多</a-button>
+            </a-popover>
           </span>
         </template>
       </a-table>

src/styles/global.css

@@ -135,3 +135,15 @@ table.custom-table {
 .ant-modal-content .ant-modal-footer button:first-child {
   display: none;
 }
+
+.ant-popover-arrow {
+  border-top-color: #4c4e5c !important;
+  border-left-color: #4c4e5c !important;
+}
+.ant-popover-inner-content {
+  background: linear-gradient(180deg, #4c4e5c 0%, #3d404e 100%);
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
+  opacity: 0.98;
+  border-radius: 10px;
+  /* color: rgba(0, 0, 0, 0.3); */
+}