feat: 功能优化

frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+
+defineOptions({ name: 'FullWidthLayout' })
+
+// Props
+const props = defineProps({
+  showBack: {
+    type: Boolean,
+    default: false
+  },
+  showPadding: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Emits
+const emit = defineEmits(['back'])
+
+// Methods
+const handleBack = () => {
+  emit('back')
+}
+</script>
+
+<template>
+  <div class="full-width-layout">
+    <!-- 页面头部 -->
+    <div v-if="$slots.header || showBack" class="full-width-layout__header">
+      <div class="header-left">
+        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
+          <template #icon>
+            <ArrowLeftOutlined />
+          </template>
+        </a-button>
+        <div class="header-content">
+          <slot name="header"></slot>
+        </div>
+      </div>
+      <div class="header-right">
+        <slot name="extra"></slot>
+      </div>
+    </div>
+
+    <!-- 全宽内容 -->
+    <div
+      class="full-width-layout__content"
+      :class="{ 'no-padding': !showPadding }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.full-width-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary);
+}
+
+.full-width-layout__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex: 1;
+  min-width: 0;
+}
+
+.back-btn {
+  padding: var(--space-xs);
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 16px;
+  line-height: 1;
+
+  &:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+}
+
+.header-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+
+.full-width-layout__content {
+  flex: 1;
+  overflow: auto;
+  background: var(--bg-secondary);
+
+  &.no-padding {
+    padding: 0;
+  }
+}
+</style>