vue2-client 1.22.50 → 1.22.52

package/src/base-client/components/his/XHisEditor/XDocTree.vue

@@ -1,529 +1,529 @@
-<template>
-  <div class="x-doc-tree-wrapper" ref="dropdownRef">
-    <!-- 触发器：默认显示当前选中的文档名 -->
-    <div class="dropdown-trigger" @click="toggleDropdown">
-      <span class="trigger-text">{{ selectedLabel || '选择文档' }}</span>
-      <a-icon class="trigger-arrow" :type="visible ? 'up' : 'down'" />
-    </div>
-
-    <!-- 下拉面板：左右布局 -->
-    <transition name="dropdown-fade">
-      <div v-if="visible" class="dropdown-panel">
-        <!-- 左侧：文档列表 -->
-        <div class="panel-left">
-          <div class="panel-header">
-            <a-input-search
-              v-model="searchValue"
-              placeholder="搜索文档"
-              class="panel-search"
-              allow-clear
-              @search="handleSearch"
-              @change="handleSearchChange"
-            />
-          </div>
-          <div class="panel-body">
-            <a-spin v-if="loading" size="small" />
-            <a-empty v-else-if="displayData.length === 0" :description="searchValue ? '未找到匹配的文档' : '暂无文档'" />
-            <div v-else class="tree-nodes">
-              <x-doc-tree-node
-                v-for="node in displayData"
-                :key="node.value"
-                :node="node"
-                :selected-id="selectedId"
-                :current-res-id="resId"
-                @node-click="handleNodeClick"
-                @add-click="handleAddClick"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- 右侧：添加表单（与左侧同高度） -->
-        <transition name="slide-fade">
-          <div v-if="showAddForm" class="panel-right">
-            <div class="form-header">
-              <span class="form-title">添加报告模板</span>
-              <a-icon type="close" class="close-btn" @click="closeAddForm" />
-            </div>
-            <div class="form-body">
-              <div class="form-row">
-                <span class="form-label">文书类型</span>
-                <a-input
-                  class="form-input"
-                  :value="currentParentNode ? currentParentNode.label : ''"
-                  disabled
-                />
-              </div>
-              <div class="form-row">
-                <span class="form-label">文书名称</span>
-                <a-input
-                  class="form-input"
-                  v-model="newDocName"
-                  placeholder="请输入"
-                />
-              </div>
-            </div>
-            <div class="form-footer">
-              <div class="footer-buttons">
-                <a-button class="btn-action" @click="closeAddForm">取消</a-button>
-                <a-button class="btn-action" :loading="addLoading" @click="handleAddConfirm">保存</a-button>
-              </div>
-            </div>
-          </div>
-        </transition>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-import XDocTreeNode from './XDocTreeNode.vue'
-
-export default {
-  name: 'XDocTree',
-  components: {
-    XDocTreeNode
-  },
-  props: {
-    resList: {
-      type: Array,
-      default: () => []
-    },
-    resId: {
-      type: [Number, String],
-      default: undefined
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    searchParams: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      visible: false,
-      showAddForm: false,
-      addLoading: false,
-      newDocName: '',
-      selectedId: null,
-      treeData: [],
-      displayData: [],
-      currentParentNode: null,
-      form: {},
-      searchValue: ''
-    }
-  },
-  computed: {
-    selectedLabel() {
-      if (!this.selectedId) return ''
-      const targetId = String(this.selectedId)
-      const findNode = (nodes) => {
-        for (const node of nodes) {
-          if (String(node.value) === targetId) return node.label
-          if (node.children && node.children.length > 0) {
-            const found = findNode(node.children)
-            if (found) return found
-          }
-        }
-        return null
-      }
-      return findNode(this.treeData) || ''
-    }
-  },
-  watch: {
-    resList: {
-      immediate: true,
-      handler(newVal) {
-        this.buildTreeData(newVal)
-        this.updateDisplayData()
-      }
-    },
-    resId: {
-      immediate: true,
-      handler(newVal) {
-        this.selectedId = newVal
-      }
-    }
-  },
-  mounted() {
-    document.addEventListener('click', this.handleClickOutside)
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.handleClickOutside)
-  },
-  methods: {
-    handleClickOutside(e) {
-      // 如果点击的是模态框内的元素，不关闭面板
-      const modalElements = document.querySelectorAll('.ant-modal-wrap')
-      for (const modal of modalElements) {
-        if (modal.contains(e.target)) {
-          return
-        }
-      }
-      if (this.$refs.dropdownRef && !this.$refs.dropdownRef.contains(e.target)) {
-        this.visible = false
-        this.showAddForm = false
-        this.addLoading = false  // 👈 新增这一行
-      }
-    },
-    toggleDropdown() {
-      this.visible = !this.visible
-      if (!this.visible) {
-        this.showAddForm = false
-      }
-    },
-    buildTreeData(resList) {
-      if (!resList || resList.length === 0) {
-        this.treeData = []
-        return
-      }
-      // 适配新的数据结构：resList 是分类列表，每个分类有 children
-      this.treeData = resList.map(category => {
-        // 分类本身是第一层（folder 类型）
-        const processNode = (node, level = 0) => ({
-          ...node,
-          expanded: level === 0, // 默认展开第一层
-          children: (node.children || []).map(child => processNode(child, level + 1))
-        })
-        return processNode(category)
-      })
-    },
-    updateDisplayData() {
-      if (!this.searchValue) {
-        this.displayData = this.treeData
-        return
-      }
-      const keyword = this.searchValue.toLowerCase()
-      this.displayData = this.filterTreeData(this.treeData, keyword)
-    },
-    filterTreeData(nodes, keyword) {
-      const result = []
-      for (const node of nodes) {
-        const matchSelf = node.label && node.label.toLowerCase().includes(keyword)
-        const matchedChildren = node.children && node.children.length > 0
-          ? this.filterTreeData(node.children, keyword)
-          : []
-
-        if (matchSelf || matchedChildren.length > 0) {
-          result.push({
-            ...node,
-            expanded: true,
-            children: matchedChildren
-          })
-        }
-      }
-      return result
-    },
-    handleSearch(value) {
-      // 如果 value 为空，updateDisplayData 会显示全部数据
-      this.searchValue = value
-      this.updateDisplayData()
-    },
-    handleSearchChange(e) {
-      const value = e.target.value
-      if (!value) {
-        this.updateDisplayData()
-      }
-    },
-    handleNodeClick(node) {
-      this.selectedId = node.value
-      this.$emit('change', node)
-      this.visible = false
-    },
-    handleAddClick(node) {
-      this.currentParentNode = node
-      this.showAddForm = true
-      this.newDocName = ''
-    },
-    closeAddForm() {
-      this.showAddForm = false
-      this.newDocName = ''
-      this.currentParentNode = null
-      this.addLoading = false  // 👈 新增这一行
-    },
-    handleAddConfirm() {
-      if (!this.newDocName || !this.newDocName.trim()) {
-        this.$message.warning('请输入文书名称')
-        return
-      }
-      // 先保存名称
-      const docName = this.newDocName.trim()
-      // 关闭右侧表单并重置状态（按钮恢复）
-      this.closeAddForm()
-      // 使用保存的名称传给父组件
-      this.$emit('add-doc', {
-        parentNode: this.currentParentNode,
-        name: docName
-      })
-    },
-    onAddDocSuccess() {
-      this.addLoading = false
-      this.closeAddForm()
-    },
-    onAddDocError() {
-      this.addLoading = false
-    },
-    setTreeData(data) {
-      this.buildTreeData(data)
-      this.updateDisplayData()
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.x-doc-tree-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-/* 触发器样式 */
-.dropdown-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  min-width: 120px;
-  max-width: 200px;
-  height: 32px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  background: #fff;
-  cursor: pointer;
-  transition: border-color 0.2s;
-
-  &:hover {
-    border-color: #40a9ff;
-  }
-
-  .trigger-text {
-    flex: 1;
-    font-size: 13px;
-    color: #333;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .trigger-arrow {
-    flex-shrink: 0;
-    color: #999;
-    font-size: 10px;
-  }
-}
-
-/* 左侧面板 */
-.panel-left {
-  display: flex;
-  flex-direction: column;
-  width: 180px;
-  background: #fff;
-}
-
-.dropdown-panel {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1050;
-  display: inline-flex;
-  max-height: 600px;
-  background: #fff;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-}
-
-
-.panel-header {
-  height: 50px;
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-  background: #fff;
-  flex-shrink: 0;
-}
-
-.panel-search {
-  width: 100%;
-
-  :deep(.ant-input) {
-    height: 32px;
-    font-size: 13px;
-  }
-
-  :deep(.ant-input-search-button) {
-    height: 32px;
-  }
-}
-
-.panel-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px 0;
-  max-height: 500px;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #ccc;
-    border-radius: 2px;
-  }
-}
-
-.tree-nodes {
-  padding: 0 4px;
-}
-
-/* 右侧表单面板 */
-.panel-right {
-  width: 240px;
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-  border-left: 1px solid #d9d9d9;
-}
-
-.form-header {
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 12px;
-  border-bottom: 1px solid #d9d9d9;
-  background: #fff;
-  flex-shrink: 0;
-}
-
-.form-title {
-  font-size: 13px;
-  font-weight: 500;
-  color: #333;
-}
-
-.close-btn {
-  cursor: pointer;
-  color: #666;
-  font-size: 12px;
-
-  &:hover {
-    color: #333;
-  }
-}
-
-.form-body {
-  flex: 1;
-  padding: 12px;
-  overflow-y: auto;
-  max-height: 450px;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #ccc;
-    border-radius: 2px;
-  }
-}
-
-.form-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.form-label {
-  flex-shrink: 0;
-  width: 70px;
-  font-size: 13px;
-  color: #333;
-}
-
-.form-input {
-  flex: 1;
-
-  :deep(.ant-input) {
-    height: 32px;
-    font-size: 13px;
-  }
-
-  :deep(.ant-input-disabled) {
-    background: #f5f5f5;
-    color: #666;
-  }
-}
-
-.form-footer {
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 12px;
-  border-top: 1px solid #d9d9d9;
-  background: #fff;
-  flex-shrink: 0;
-}
-
-.footer-buttons {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-
-  .btn-action {
-    flex: 0 0 46%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-    border: 1px solid #CDCDCD;
-    background: #fff;
-    color: #5D5C5C;
-    font-size: 14px;
-    height: 32px;
-    padding: 0 8px;
-    transition: all 0.2s;
-
-    &:hover {
-      border-color: #1890ff;
-      color: #1890ff;
-    }
-  }
-}
-
-/* 下拉动画 */
-.dropdown-fade-enter-active,
-.dropdown-fade-leave-active {
-  transition: opacity 0.15s, transform 0.15s;
-}
-
-.dropdown-fade-enter,
-.dropdown-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-/* 右侧滑入动画 */
-.slide-fade-enter-active {
-  transition: all 0.2s ease;
-}
-
-.slide-fade-leave-active {
-  transition: all 0.15s ease;
-}
-
-.slide-fade-enter,
-.slide-fade-leave-to {
-  width: 0;
-  opacity: 0;
-}
-</style>
+<template>
+  <div class="x-doc-tree-wrapper" ref="dropdownRef">
+    <!-- 触发器：默认显示当前选中的文档名 -->
+    <div class="dropdown-trigger" @click="toggleDropdown">
+      <span class="trigger-text">{{ selectedLabel || '选择文档' }}</span>
+      <a-icon class="trigger-arrow" :type="visible ? 'up' : 'down'" />
+    </div>
+
+    <!-- 下拉面板：左右布局 -->
+    <transition name="dropdown-fade">
+      <div v-if="visible" class="dropdown-panel">
+        <!-- 左侧：文档列表 -->
+        <div class="panel-left">
+          <div class="panel-header">
+            <a-input-search
+              v-model="searchValue"
+              placeholder="搜索文档"
+              class="panel-search"
+              allow-clear
+              @search="handleSearch"
+              @change="handleSearchChange"
+            />
+          </div>
+          <div class="panel-body">
+            <a-spin v-if="loading" size="small" />
+            <a-empty v-else-if="displayData.length === 0" :description="searchValue ? '未找到匹配的文档' : '暂无文档'" />
+            <div v-else class="tree-nodes">
+              <x-doc-tree-node
+                v-for="node in displayData"
+                :key="node.value"
+                :node="node"
+                :selected-id="selectedId"
+                :current-res-id="resId"
+                @node-click="handleNodeClick"
+                @add-click="handleAddClick"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧：添加表单（与左侧同高度） -->
+        <transition name="slide-fade">
+          <div v-if="showAddForm" class="panel-right">
+            <div class="form-header">
+              <span class="form-title">添加报告模板</span>
+              <a-icon type="close" class="close-btn" @click="closeAddForm" />
+            </div>
+            <div class="form-body">
+              <div class="form-row">
+                <span class="form-label">文书类型</span>
+                <a-input
+                  class="form-input"
+                  :value="currentParentNode ? currentParentNode.label : ''"
+                  disabled
+                />
+              </div>
+              <div class="form-row">
+                <span class="form-label">文书名称</span>
+                <a-input
+                  class="form-input"
+                  v-model="newDocName"
+                  placeholder="请输入"
+                />
+              </div>
+            </div>
+            <div class="form-footer">
+              <div class="footer-buttons">
+                <a-button class="btn-action" @click="closeAddForm">取消</a-button>
+                <a-button class="btn-action" :loading="addLoading" @click="handleAddConfirm">保存</a-button>
+              </div>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import XDocTreeNode from './XDocTreeNode.vue'
+
+export default {
+  name: 'XDocTree',
+  components: {
+    XDocTreeNode
+  },
+  props: {
+    resList: {
+      type: Array,
+      default: () => []
+    },
+    resId: {
+      type: [Number, String],
+      default: undefined
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    searchParams: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      showAddForm: false,
+      addLoading: false,
+      newDocName: '',
+      selectedId: null,
+      treeData: [],
+      displayData: [],
+      currentParentNode: null,
+      form: {},
+      searchValue: ''
+    }
+  },
+  computed: {
+    selectedLabel() {
+      if (!this.selectedId) return ''
+      const targetId = String(this.selectedId)
+      const findNode = (nodes) => {
+        for (const node of nodes) {
+          if (String(node.value) === targetId) return node.label
+          if (node.children && node.children.length > 0) {
+            const found = findNode(node.children)
+            if (found) return found
+          }
+        }
+        return null
+      }
+      return findNode(this.treeData) || ''
+    }
+  },
+  watch: {
+    resList: {
+      immediate: true,
+      handler(newVal) {
+        this.buildTreeData(newVal)
+        this.updateDisplayData()
+      }
+    },
+    resId: {
+      immediate: true,
+      handler(newVal) {
+        this.selectedId = newVal
+      }
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleClickOutside)
+  },
+  methods: {
+    handleClickOutside(e) {
+      // 如果点击的是模态框内的元素，不关闭面板
+      const modalElements = document.querySelectorAll('.ant-modal-wrap')
+      for (const modal of modalElements) {
+        if (modal.contains(e.target)) {
+          return
+        }
+      }
+      if (this.$refs.dropdownRef && !this.$refs.dropdownRef.contains(e.target)) {
+        this.visible = false
+        this.showAddForm = false
+        this.addLoading = false  // 👈 新增这一行
+      }
+    },
+    toggleDropdown() {
+      this.visible = !this.visible
+      if (!this.visible) {
+        this.showAddForm = false
+      }
+    },
+    buildTreeData(resList) {
+      if (!resList || resList.length === 0) {
+        this.treeData = []
+        return
+      }
+      // 适配新的数据结构：resList 是分类列表，每个分类有 children
+      this.treeData = resList.map(category => {
+        // 分类本身是第一层（folder 类型）
+        const processNode = (node, level = 0) => ({
+          ...node,
+          expanded: level === 0, // 默认展开第一层
+          children: (node.children || []).map(child => processNode(child, level + 1))
+        })
+        return processNode(category)
+      })
+    },
+    updateDisplayData() {
+      if (!this.searchValue) {
+        this.displayData = this.treeData
+        return
+      }
+      const keyword = this.searchValue.toLowerCase()
+      this.displayData = this.filterTreeData(this.treeData, keyword)
+    },
+    filterTreeData(nodes, keyword) {
+      const result = []
+      for (const node of nodes) {
+        const matchSelf = node.label && node.label.toLowerCase().includes(keyword)
+        const matchedChildren = node.children && node.children.length > 0
+          ? this.filterTreeData(node.children, keyword)
+          : []
+
+        if (matchSelf || matchedChildren.length > 0) {
+          result.push({
+            ...node,
+            expanded: true,
+            children: matchedChildren
+          })
+        }
+      }
+      return result
+    },
+    handleSearch(value) {
+      // 如果 value 为空，updateDisplayData 会显示全部数据
+      this.searchValue = value
+      this.updateDisplayData()
+    },
+    handleSearchChange(e) {
+      const value = e.target.value
+      if (!value) {
+        this.updateDisplayData()
+      }
+    },
+    handleNodeClick(node) {
+      this.selectedId = node.value
+      this.$emit('change', node)
+      this.visible = false
+    },
+    handleAddClick(node) {
+      this.currentParentNode = node
+      this.showAddForm = true
+      this.newDocName = ''
+    },
+    closeAddForm() {
+      this.showAddForm = false
+      this.newDocName = ''
+      this.currentParentNode = null
+      this.addLoading = false  // 👈 新增这一行
+    },
+    handleAddConfirm() {
+      if (!this.newDocName || !this.newDocName.trim()) {
+        this.$message.warning('请输入文书名称')
+        return
+      }
+      // 先保存名称
+      const docName = this.newDocName.trim()
+      // 关闭右侧表单并重置状态（按钮恢复）
+      this.closeAddForm()
+      // 使用保存的名称传给父组件
+      this.$emit('add-doc', {
+        parentNode: this.currentParentNode,
+        name: docName
+      })
+    },
+    onAddDocSuccess() {
+      this.addLoading = false
+      this.closeAddForm()
+    },
+    onAddDocError() {
+      this.addLoading = false
+    },
+    setTreeData(data) {
+      this.buildTreeData(data)
+      this.updateDisplayData()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.x-doc-tree-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+/* 触发器样式 */
+.dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  min-width: 120px;
+  max-width: 200px;
+  height: 32px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  transition: border-color 0.2s;
+
+  &:hover {
+    border-color: #40a9ff;
+  }
+
+  .trigger-text {
+    flex: 1;
+    font-size: 13px;
+    color: #333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .trigger-arrow {
+    flex-shrink: 0;
+    color: #999;
+    font-size: 10px;
+  }
+}
+
+/* 左侧面板 */
+.panel-left {
+  display: flex;
+  flex-direction: column;
+  width: 180px;
+  background: #fff;
+}
+
+.dropdown-panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1050;
+  display: inline-flex;
+  max-height: 600px;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+
+.panel-header {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  background: #fff;
+  flex-shrink: 0;
+}
+
+.panel-search {
+  width: 100%;
+
+  :deep(.ant-input) {
+    height: 32px;
+    font-size: 13px;
+  }
+
+  :deep(.ant-input-search-button) {
+    height: 32px;
+  }
+}
+
+.panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+  max-height: 500px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #ccc;
+    border-radius: 2px;
+  }
+}
+
+.tree-nodes {
+  padding: 0 4px;
+}
+
+/* 右侧表单面板 */
+.panel-right {
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-left: 1px solid #d9d9d9;
+}
+
+.form-header {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  border-bottom: 1px solid #d9d9d9;
+  background: #fff;
+  flex-shrink: 0;
+}
+
+.form-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #333;
+}
+
+.close-btn {
+  cursor: pointer;
+  color: #666;
+  font-size: 12px;
+
+  &:hover {
+    color: #333;
+  }
+}
+
+.form-body {
+  flex: 1;
+  padding: 12px;
+  overflow-y: auto;
+  max-height: 450px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #ccc;
+    border-radius: 2px;
+  }
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.form-label {
+  flex-shrink: 0;
+  width: 70px;
+  font-size: 13px;
+  color: #333;
+}
+
+.form-input {
+  flex: 1;
+
+  :deep(.ant-input) {
+    height: 32px;
+    font-size: 13px;
+  }
+
+  :deep(.ant-input-disabled) {
+    background: #f5f5f5;
+    color: #666;
+  }
+}
+
+.form-footer {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  border-top: 1px solid #d9d9d9;
+  background: #fff;
+  flex-shrink: 0;
+}
+
+.footer-buttons {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  .btn-action {
+    flex: 0 0 46%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    border: 1px solid #CDCDCD;
+    background: #fff;
+    color: #5D5C5C;
+    font-size: 14px;
+    height: 32px;
+    padding: 0 8px;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: #1890ff;
+      color: #1890ff;
+    }
+  }
+}
+
+/* 下拉动画 */
+.dropdown-fade-enter-active,
+.dropdown-fade-leave-active {
+  transition: opacity 0.15s, transform 0.15s;
+}
+
+.dropdown-fade-enter,
+.dropdown-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+/* 右侧滑入动画 */
+.slide-fade-enter-active {
+  transition: all 0.2s ease;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.15s ease;
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+  width: 0;
+  opacity: 0;
+}
+</style>