refactor(product): 重构 topic 按钮布局

src/views/product/components/TopicManage.vue

@@ -81,21 +81,20 @@ async function handleDelete(id: string) {
 
 <template>
   <div>
-    <div flex="! items-center wrap gap-12px" mb="12px">
+    <div flex="~ items-center justify-between gap-12px" mb="12px">
+      <div flex="~ wrap gap-12px">
         <Segmented
           v-model:value="topicType"
           :options="[{ label: '系统 Topic', value: TopicType.System }, { label: '自定义 Topic', value: TopicType.Custom }]"
         />
 
-      <Alert :message="alertMessage" type="info" show-icon class="py-4px" />
-    </div>
-
-    <div class="mb-12px flex items-center justify-between">
         <a-button v-if="isCustomTopic" type="primary" @click="openModal">
           <PlusOutlined />
-        新建
+          新增 Topic
         </a-button>
-      <div v-else />
+
+        <Alert :message="alertMessage" type="info" show-icon class="py-4px" />
+      </div>
 
       <div class="mr-10px flex cursor-pointer items-center">
         <a-button size="small" @click="reload">
@@ -106,6 +105,7 @@ async function handleDelete(id: string) {
         </a-button>
       </div>
     </div>
+
     <BasicTable :api="async () => ([] as Topic[])" @register="register">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">