更新面包屑导航和修复SourceDialog一些问题

Author: hgc357341051

dashboard/src/components/Breadcrumb.vue

@@ -0,0 +1,114 @@
+<template>
+  <a-breadcrumb :style="{ margin: '16px 0' }">
+    <a-breadcrumb-item>{{ navigation_title }}</a-breadcrumb-item>
+
+    <div class="header-left">
+      <a-button type="outline" status="success" shape="round" @click="handleOpenForm">
+        <template #icon>
+          <icon-apps />
+        </template>
+        <template #default>{{ now_site_title }}</template>
+      </a-button>
+
+      <a-button type="outline" status="success" shape="round" @click="refreshPage">
+        <template #icon>
+          <icon-refresh />
+        </template>
+        <template #default>重载源</template>
+      </a-button>
+    </div>
+
+    <!-- 中间搜索框 -->
+    <div class="header-center">
+      <a-input-search
+        placeholder="搜索视频"
+        enter-button
+        @search="onSearch"
+        style="width: 300px"
+      />
+    </div>
+
+    <!-- 右侧控制按钮 -->
+    <div class="header-right">
+      <a-button type="outline" status="success" shape="round" @click="minimize">
+        <template #icon>
+          <icon-bug />
+        </template>
+        <template #default>调试</template>
+      </a-button>
+
+      <a-button type="outline" status="success" shape="round" @click="maximize">
+        <template #icon>
+          <icon-settings />
+        </template>
+        <template #default>设置</template>
+      </a-button>
+      <a-button type="outline" status="success" shape="round" @click="closeWindow">
+        <template #icon>
+          <icon-user />
+        </template>
+        <template #default>用户设置</template>
+      </a-button>
+
+      <slot name="default"></slot>
+    </div>
+  </a-breadcrumb>
+</template>
+
+<script setup>
+const props = defineProps({
+  navigation_title: String,
+  now_site_title: String,
+});
+const emit = defineEmits([
+  "handleOpenForm",
+  "closeWindow",
+  "maximize",
+  "minimize",
+  "refreshPage",
+  "onSearch",
+]);
+
+const handleOpenForm = () => {
+  emit("handleOpenForm");
+};
+const refreshPage = () => {
+  emit("refreshPage");
+};
+const onSearch = (value) => {
+  emit("onSearch", value);
+};
+
+const closeWindow = () => {
+  emit("closeWindow");
+};
+const minimize = () => {
+  emit("minimize");
+};
+const maximize = () => {
+  emit("maximize");
+};
+</script>
+
+<style scoped>
+.header-left,
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.header-left button,
+.header-right button {
+  margin-right: 10px;
+}
+
+.header-center {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.header-center a-input-search {
+  width: 300px;
+}
+</style>

dashboard/src/components/SourceDialog.vue

@@ -5,6 +5,7 @@
       :width="dialogWidth"
       class="change_rule_dialog"
       append-to-body
+      :on-before-cancel="handleConfirmClear"
   >
     <a-input
         v-model="siteFilter"
@@ -128,9 +129,13 @@ const handleConfirmChange = () => {
   display: flex;
   flex-wrap: wrap;
 }
+/* .btn-item:nth-child(8) {
+      margin-right: 0;
+} */
 .btn-item {
   text-align: center;
   width: calc(31.3%);
   padding: 2px;
 }
+.btn-item button {width: 100%;}
 </style>