feat: 功能优化

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

@@ -0,0 +1,194 @@
+<script setup>
+import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+
+defineOptions({ name: 'FormLayout' })
+
+// Props
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  showBack: {
+    type: Boolean,
+    default: false
+  },
+  submitText: {
+    type: String,
+    default: '提交'
+  },
+  cancelText: {
+    type: String,
+    default: '取消'
+  },
+  showCancel: {
+    type: Boolean,
+    default: true
+  },
+  submitLoading: {
+    type: Boolean,
+    default: false
+  },
+  showFooter: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Emits
+const emit = defineEmits(['submit', 'cancel', 'back'])
+
+// Methods
+const handleSubmit = () => {
+  emit('submit')
+}
+
+const handleCancel = () => {
+  emit('cancel')
+}
+
+const handleBack = () => {
+  emit('back')
+}
+</script>
+
+<template>
+  <div class="form-layout">
+    <!-- 页面头部 -->
+    <div class="form-layout__header">
+      <div class="header-left">
+        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
+          <template #icon>
+            <ArrowLeftOutlined />
+          </template>
+        </a-button>
+        <h1 v-if="title" class="header-title">{{ title }}</h1>
+      </div>
+      <div class="header-right">
+        <slot name="extra"></slot>
+      </div>
+    </div>
+
+    <!-- 表单内容 -->
+    <div class="form-layout__content">
+      <div class="form-container">
+        <slot></slot>
+      </div>
+    </div>
+
+    <!-- 底部操作栏 -->
+    <div v-if="showFooter" class="form-layout__footer">
+      <div class="footer-content">
+        <a-space :size="12">
+          <a-button v-if="showCancel" @click="handleCancel">
+            {{ cancelText }}
+          </a-button>
+          <a-button
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            {{ submitText }}
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.form-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+}
+
+.form-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-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+
+.form-layout__content {
+  flex: 1;
+  overflow: auto;
+  padding: var(--space-md);
+  background: var(--bg-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.form-container {
+  width: 100%;
+  max-width: 600px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  padding: var(--space-2xl);
+}
+
+.form-layout__footer {
+  padding: var(--space-md) var(--space-lg);
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+}
+
+.footer-content {
+  max-width: 600px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>