cloud-web-corejs 1.0.54-dev.68 → 1.0.54-dev.680

package/src/components/baseArea/index.vue

@@ -0,0 +1,1100 @@
+<template>
+  <div class="base-area">
+    <el-popover
+      v-model="popoverVisible"
+      placement="bottom-start"
+      trigger="click"
+      popper-class="base-area-popover"
+      :width="popoverWidth"
+      :disabled="disabled || readonly"
+      @show="handlePopoverShow"
+      @hide="handlePopoverHide"
+    >
+      <div class="base-area-panel">
+        <div class="base-area-search">
+          <el-input
+            ref="searchInputRef"
+            v-model="searchKeyword"
+            class="base-area-search-input"
+            size="small"
+            clearable
+            :placeholder="searchPlaceholder"
+            @input="handleSearchInput"
+            @clear="handleSearchClear"
+            @focus="searchDropdownVisible = true"
+          />
+          <transition name="base-area-fade">
+            <div
+              v-show="showSearchDropdown"
+              class="base-area-search-dropdown"
+              v-loading="searchLoading"
+            >
+              <div
+                v-for="item in searchList"
+                :key="'search-' + item.id"
+                class="base-area-result-item"
+                :class="{ on: isSearchItemActive(item) }"
+                @mousedown.prevent
+                @click="selectSearchItem(item)"
+              >
+                {{ item.fullName || item.name }}
+              </div>
+              <div
+                v-if="!searchLoading && !searchList.length"
+                class="base-area-dropdown-empty"
+              >
+                {{ emptyText }}
+              </div>
+            </div>
+          </transition>
+        </div>
+        <div class="base-area-path">
+          <div class="base-area-tabs">
+            <template v-for="(tab, index) in tabs">
+              <span
+                v-if="index > 0"
+                :key="'sep-' + index"
+                class="base-area-path-sep"
+              >/</span>
+              <span
+                :key="'tab-' + index"
+                class="base-area-tab"
+                :class="{
+                  active: activeLevel === index + 1,
+                  selected: !!tab.selected,
+                  disabled: !isTabEnabled(index + 1),
+                }"
+                @click="switchLevel(index + 1)"
+              >{{ getTabLabel(tab) }}</span>
+            </template>
+          </div>
+        </div>
+        <div class="base-area-grid-wrap">
+          <div class="base-area-grid" v-loading="browseLoading">
+            <div
+              v-for="item in levelItems"
+              :key="item.id"
+              class="base-area-item"
+              :class="{ on: isSelected(item) }"
+              @click="selectItem(item)"
+            >
+              <span>{{ item.name }}</span>
+            </div>
+            <div v-if="!browseLoading && !levelItems.length" class="base-area-empty">
+              {{ emptyText }}
+            </div>
+          </div>
+        </div>
+        <div class="base-area-level-nav">
+          <el-button
+            size="mini"
+            :disabled="!canPrevLevel"
+            @click="prevLevel"
+          >
+            <i class="el-icon-arrow-left"></i>
+          </el-button>
+          <span class="base-area-level-label">{{ currentLevelLabel }}</span>
+          <el-button
+            size="mini"
+            type="primary"
+            :disabled="!canNextLevel"
+            @click="nextLevel"
+          >
+            <i class="el-icon-arrow-right"></i>
+          </el-button>
+        </div>
+      </div>
+      <div slot="reference" class="base-area-trigger">
+        <el-input
+          ref="inputRef"
+          class="base-area-input"
+          :class="{ 'is-focus': referenceFocused }"
+          :value="displayText"
+          :size="size"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          readonly
+          @focus="referenceFocused = true"
+          @blur="referenceFocused = false"
+        >
+          <i
+            v-if="showClearIcon"
+            slot="suffix"
+            class="el-input__icon el-icon-circle-close base-area-clear"
+            @mousedown.prevent
+            @click.stop="handleClear"
+          />
+        </el-input>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+const LEVEL_LABELS = ["省份", "城市", "区县", "乡镇"];
+const SEARCH_DEBOUNCE = 300;
+
+export default {
+  name: "baseArea",
+  props: {
+    value: {
+      type: [String, Number],
+      default: null,
+    },
+    labelValue: {
+      type: String,
+      default: null,
+    },
+    maxLevel: {
+      type: Number,
+      default: 4,
+    },
+    locale: {
+      type: String,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    placeholder: {
+      type: String,
+      default: "请选择地区",
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "请输入地区名称",
+    },
+    emptyText: {
+      type: String,
+      default: "暂无匹配地区",
+    },
+    size: {
+      type: String,
+      default: "small",
+    },
+    popoverWidth: {
+      type: Number,
+      default: 630,
+    },
+    /** path: 逗号分隔各级 id，如 1,2,3,4；leaf: 仅末级 id */
+    valueFormat: {
+      type: String,
+      default: "path",
+    },
+  },
+  data() {
+    return {
+      popoverVisible: false,
+      searchKeyword: "",
+      searchList: [],
+      selectedPath: [],
+      activeLevel: 1,
+      levelItems: [],
+      browseLoading: false,
+      searchLoading: false,
+      searchDropdownVisible: false,
+      referenceFocused: false,
+      searchTimer: null,
+      syncToken: 0,
+      skipValueSync: false,
+    };
+  },
+  computed: {
+    hasSearchKeyword() {
+      return !!(this.searchKeyword || "").trim();
+    },
+    showSearchDropdown() {
+      return this.searchDropdownVisible && this.hasSearchKeyword;
+    },
+    displayText() {
+      const pathLabel = this.selectedPath.length
+        ? this.buildPathLabel(this.selectedPath)
+        : "";
+      if (this.popoverVisible && pathLabel) {
+        return pathLabel;
+      }
+      if (this.labelValue) {
+        return this.labelValue;
+      }
+      return pathLabel || "";
+    },
+    tabs() {
+      const tabs = [];
+      for (let i = 0; i < this.maxLevel; i++) {
+        tabs.push({
+          level: i + 1,
+          label: LEVEL_LABELS[i] || `第${i + 1}级`,
+          selected: this.selectedPath[i] || null,
+        });
+      }
+      return tabs;
+    },
+    showClearIcon() {
+      return (
+        this.clearable &&
+        !this.readonly &&
+        !this.disabled &&
+        !!this.displayText
+      );
+    },
+    canPrevLevel() {
+      return this.activeLevel > 1;
+    },
+    canNextLevel() {
+      return (
+        this.activeLevel < this.maxLevel &&
+        this.isTabEnabled(this.activeLevel + 1)
+      );
+    },
+    currentLevelLabel() {
+      return LEVEL_LABELS[this.activeLevel - 1] || `第${this.activeLevel}级`;
+    },
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.syncFromValue();
+      },
+    },
+    labelValue(val) {
+      if (!val && !this.value) {
+        this.resetBrowseState(false);
+        return;
+      }
+      if (this.value && !this.isValueSynced(this.parseValueIds(this.value))) {
+        this.syncFromValue();
+      }
+    },
+  },
+  beforeDestroy() {
+    clearTimeout(this.searchTimer);
+  },
+  methods: {
+    isSearchItemActive(item) {
+      if (!item || this.value == null || this.value === "") {
+        return false;
+      }
+      const ids = this.parseValueIds(this.value);
+      if (!ids.length) {
+        return false;
+      }
+      return ids[ids.length - 1] == this.getAreaId(item);
+    },
+    parseValueIds(val) {
+      if (val == null || val === "") {
+        return [];
+      }
+      const str = String(val).trim();
+      if (this.valueFormat === "path" && str.includes(",")) {
+        return str.split(",").map((part) => part.trim()).filter((part) => part !== "");
+      }
+      return [str];
+    },
+    isPathValue(val) {
+      return (
+        this.valueFormat === "path" &&
+        val != null &&
+        String(val).includes(",")
+      );
+    },
+    formatPathValue(path) {
+      if (!path || !path.length) {
+        return null;
+      }
+      const ids = path
+        .map((item) => this.getAreaId(item))
+        .filter((id) => id != null && id !== "");
+      if (!ids.length) {
+        return null;
+      }
+      if (this.valueFormat === "leaf") {
+        return ids[ids.length - 1];
+      }
+      return ids.join(",");
+    },
+    getAreaId(item) {
+      if (!item) {
+        return null;
+      }
+      if (item.id != null && item.id !== "") {
+        return item.id;
+      }
+      if (item.value != null && item.value !== "") {
+        return item.value;
+      }
+      if (item.areaId != null && item.areaId !== "") {
+        return item.areaId;
+      }
+      return null;
+    },
+    isValueSynced(ids) {
+      if (!ids.length || this.selectedPath.length !== ids.length) {
+        return false;
+      }
+      return ids.every((id, index) => this.getAreaId(this.selectedPath[index]) == id);
+    },
+    buildPathLabel(path) {
+      if (!path || !path.length) {
+        return "";
+      }
+      const last = path[path.length - 1];
+      if (last && last.fullName) {
+        return last.fullName;
+      }
+      return path
+        .map((item) => item.name || "")
+        .filter((name) => !!name)
+        .join("");
+    },
+    emitResolvedLabelIfNeeded() {
+      if (this.popoverVisible || this.labelValue) {
+        return;
+      }
+      const label = this.buildPathLabel(this.selectedPath);
+      if (label) {
+        this.$emit("update:labelValue", label);
+      }
+    },
+    cancelPendingSync() {
+      this.syncToken += 1;
+    },
+    getTabLabel(tab) {
+      if (tab.selected) {
+        return tab.selected.name || tab.label;
+      }
+      return tab.label;
+    },
+    isSelected(item) {
+      const current = this.selectedPath[this.activeLevel - 1];
+      return current && this.getAreaId(current) === this.getAreaId(item);
+    },
+    isTabEnabled(level) {
+      return level === 1 || this.selectedPath.length >= level - 1;
+    },
+    handlePopoverShow() {
+      this.$nextTick(() => {
+        this.$refs.searchInputRef && this.$refs.searchInputRef.focus();
+      });
+      this.initBrowseStateFromValue();
+    },
+    syncFromValue() {
+      if (this.skipValueSync) {
+        return;
+      }
+      const val = this.value;
+      if (!val) {
+        this.resetBrowseState(false);
+        return;
+      }
+      const ids = this.parseValueIds(val);
+      if (this.isValueSynced(ids)) {
+        return;
+      }
+      if (this.isPathValue(val)) {
+        this.syncBrowseStateFromPathIds(ids);
+        return;
+      }
+      this.syncBrowseStateFromArea({
+        id: ids[0],
+        fullName: this.labelValue || undefined,
+      });
+    },
+    initBrowseStateFromValue() {
+      if (!this.value) {
+        if (!this.levelItems.length) {
+          this.loadLevelItems(this.getParentId());
+        }
+        return;
+      }
+      const ids = this.parseValueIds(this.value);
+      if (!this.isValueSynced(ids)) {
+        this.syncFromValue();
+        return;
+      }
+      if (!this.levelItems.length) {
+        this.loadLevelItems(this.getParentId());
+      }
+    },
+    getAreaRequestData(extra = {}) {
+      return {
+        enabled: true,
+        locale: this.locale || null,
+        ...extra,
+      };
+    },
+    normalizeAreaRows(res) {
+      const objx = res && res.objx;
+      if (Array.isArray(objx)) {
+        return objx;
+      }
+      if (objx && Array.isArray(objx.records)) {
+        return objx.records;
+      }
+      return [];
+    },
+    requestAreaList(extra = {}) {
+      return new Promise((resolve) => {
+        this.$http({
+          url: USER_PREFIX + "/area/list",
+          method: "post",
+          data: this.getAreaRequestData(extra),
+          success: (res) => resolve(this.normalizeAreaRows(res)),
+          error: () => resolve([]),
+        });
+      });
+    },
+    fetchChildren(parentId) {
+      return new Promise((resolve) => {
+        this.$http({
+          url: USER_PREFIX + "/area/getChildren",
+          method: "post",
+          data: this.getAreaRequestData({ id: parentId }),
+          success: (res) => resolve(this.normalizeAreaRows(res)),
+          error: () => resolve([]),
+        });
+      });
+    },
+    getParentIdFromRow(row) {
+      if (!row) return null;
+      if (row.parentId != null && row.parentId !== "") {
+        return row.parentId;
+      }
+      const parent = row.parent;
+      if (parent == null || parent === undefined || parent === "") {
+        return null;
+      }
+      if (typeof parent === "object") {
+        return parent.id != null ? parent.id : null;
+      }
+      return parent;
+    },
+    fetchAreaById(id) {
+      if (id == null || id === "") {
+        return Promise.resolve(null);
+      }
+      return this.requestAreaList({ id }).then(
+        (rows) => rows.find((row) => this.getAreaId(row) == id) || null
+      );
+    },
+    isAreaObject(node) {
+      return node && typeof node === "object" && node.id != null;
+    },
+    buildAreaPath(item) {
+      if (item.pathList && Array.isArray(item.pathList) && item.pathList.length > 1) {
+        if (this.isAreaObject(item.pathList[0])) {
+          return item.pathList.slice(0, this.maxLevel);
+        }
+      }
+      if (item.areaPath && Array.isArray(item.areaPath) && item.areaPath.length > 1) {
+        if (this.isAreaObject(item.areaPath[0])) {
+          return item.areaPath.slice(0, this.maxLevel);
+        }
+      }
+      return null;
+    },
+    matchAreaByPrefix(fullName, prefix, children) {
+      const sorted = [...children].sort(
+        (a, b) => (b.name || "").length - (a.name || "").length
+      );
+      for (let i = 0; i < sorted.length; i++) {
+        const child = sorted[i];
+        const name = child.name || "";
+        if (!name) {
+          continue;
+        }
+        if (fullName.startsWith(prefix + name)) {
+          return child;
+        }
+      }
+      return null;
+    },
+    async resolvePathByFullName(item) {
+      const fullName = (item.fullName || "").trim();
+      if (!fullName) {
+        return null;
+      }
+      const path = [];
+      let parentId = 0;
+      let prefix = "";
+      for (let level = 0; level < this.maxLevel; level++) {
+        const children = await this.fetchChildren(parentId);
+        if (!children.length) {
+          break;
+        }
+        const matched = this.matchAreaByPrefix(fullName, prefix, children);
+        if (!matched) {
+          break;
+        }
+        path.push(matched);
+        prefix += matched.name || "";
+        if (matched.id == item.id) {
+          return path;
+        }
+        parentId = matched.id;
+      }
+      if (path.length && path[path.length - 1].id != item.id) {
+        const siblings = await this.fetchChildren(path[path.length - 1].id);
+        const leaf = siblings.find((row) => row.id == item.id);
+        if (leaf) {
+          path.push(leaf);
+        } else if (item.name && fullName.endsWith(item.name)) {
+          path.push(item);
+        }
+      }
+      return path.length ? path.slice(0, this.maxLevel) : null;
+    },
+    async resolvePathByParentChain(item) {
+      const chain = [];
+      let current = item;
+      let safety = 0;
+      while (current && safety < this.maxLevel + 5) {
+        safety += 1;
+        chain.unshift(current);
+        const parentId = this.getParentIdFromRow(current);
+        if (!parentId) {
+          break;
+        }
+        const parent = await this.fetchAreaById(parentId);
+        if (!parent || parent.id != parentId) {
+          break;
+        }
+        current = parent;
+      }
+      return chain.length ? chain.slice(0, this.maxLevel) : null;
+    },
+    async resolveAreaPath(item) {
+      const presetPath = this.buildAreaPath(item);
+      if (presetPath && presetPath.length) {
+        return presetPath;
+      }
+      const fullNamePath = await this.resolvePathByFullName(item);
+      if (fullNamePath && fullNamePath.length) {
+        return fullNamePath;
+      }
+      const parentPath = await this.resolvePathByParentChain(item);
+      if (parentPath && parentPath.length) {
+        return parentPath;
+      }
+      return [item];
+    },
+    async syncBrowseStateFromArea(item) {
+      const token = ++this.syncToken;
+      let seed = item || {};
+      if (
+        seed.id != null &&
+        !seed.fullName &&
+        !seed.name &&
+        !this.getParentIdFromRow(seed)
+      ) {
+        const detail = await this.fetchAreaById(seed.id);
+        if (detail) {
+          seed = detail;
+        }
+      } else if (seed.id != null && !seed.fullName && this.labelValue) {
+        seed = { ...seed, fullName: this.labelValue };
+      }
+      let path = await this.resolveAreaPath(seed);
+      if (token !== this.syncToken) {
+        return;
+      }
+      if (!path.length) {
+        path = [seed];
+      }
+      const last = path[path.length - 1];
+      if (last && last.id != seed.id && seed.id != null) {
+        const siblings = await this.fetchChildren(
+          path.length > 1 ? path[path.length - 2].id : 0
+        );
+        const exact = siblings.find((row) => row.id == seed.id);
+        if (exact) {
+          path = path.slice(0, -1).concat(exact);
+        } else {
+          path = path.concat(seed);
+        }
+      }
+      if (token !== this.syncToken) {
+        return;
+      }
+      path = path.slice(0, this.maxLevel);
+      this.selectedPath = path;
+      const pathLen = path.length;
+      if (pathLen >= this.maxLevel) {
+        this.activeLevel = this.maxLevel;
+      } else {
+        this.activeLevel = pathLen;
+      }
+      this.loadLevelItems(this.getParentId());
+      this.emitResolvedLabelIfNeeded();
+    },
+    async resolvePathByIds(ids) {
+      const path = [];
+      let parentId = 0;
+      for (let i = 0; i < ids.length && i < this.maxLevel; i++) {
+        const targetId = ids[i];
+        const children = await this.fetchChildren(parentId);
+        let matched = children.find((row) => this.getAreaId(row) == targetId);
+        if (matched) {
+          path.push(matched);
+          parentId = matched.id;
+          continue;
+        }
+        const fetched = await this.fetchAreaById(targetId);
+        if (fetched) {
+          path.push(fetched);
+          parentId = fetched.id;
+        } else {
+          path.push({ id: targetId });
+          break;
+        }
+      }
+      return path;
+    },
+    async syncBrowseStateFromPathIds(ids) {
+      const token = ++this.syncToken;
+      const path = await this.resolvePathByIds(ids);
+      if (token !== this.syncToken) {
+        return;
+      }
+      if (!path.length) {
+        if (!this.levelItems.length) {
+          this.loadLevelItems(0);
+        }
+        return;
+      }
+      this.selectedPath = path.slice(0, this.maxLevel);
+      const pathLen = this.selectedPath.length;
+      this.activeLevel = pathLen >= this.maxLevel ? this.maxLevel : pathLen;
+      this.loadLevelItems(this.getParentId());
+      this.emitResolvedLabelIfNeeded();
+    },
+    handlePopoverHide() {
+      this.searchKeyword = "";
+      this.searchList = [];
+      this.searchDropdownVisible = false;
+    },
+    handleSearchInput() {
+      const keyword = (this.searchKeyword || "").trim();
+      clearTimeout(this.searchTimer);
+      this.searchDropdownVisible = !!keyword;
+      if (!keyword) {
+        this.handleSearchClear();
+        return;
+      }
+      this.searchTimer = setTimeout(() => {
+        this.doSearch(keyword);
+      }, SEARCH_DEBOUNCE);
+    },
+    handleSearchClear() {
+      this.searchList = [];
+      this.searchDropdownVisible = false;
+    },
+    doSearch(keyword) {
+      this.searchLoading = true;
+      this.requestAreaList({ name: keyword }).then((rows) => {
+        this.searchList = rows;
+        this.searchLoading = false;
+      });
+    },
+    getParentId() {
+      if (this.activeLevel <= 1) {
+        return 0;
+      }
+      const parent = this.selectedPath[this.activeLevel - 2];
+      return parent ? this.getAreaId(parent) : 0;
+    },
+    loadLevelItems(parentId) {
+      this.browseLoading = true;
+      this.fetchChildren(parentId).then((rows) => {
+        this.levelItems = rows;
+        this.browseLoading = false;
+      });
+    },
+    switchLevel(level) {
+      if (level > this.maxLevel || !this.isTabEnabled(level)) {
+        return;
+      }
+      this.cancelPendingSync();
+      this.activeLevel = level;
+      this.loadLevelItems(this.getParentId());
+    },
+    prevLevel() {
+      if (!this.canPrevLevel) {
+        return;
+      }
+      this.switchLevel(this.activeLevel - 1);
+    },
+    nextLevel() {
+      if (!this.canNextLevel) {
+        return;
+      }
+      this.switchLevel(this.activeLevel + 1);
+    },
+    selectSearchItem(item) {
+      this.cancelPendingSync();
+      this.syncBrowseStateFromArea(item).then(() => {
+        this.searchKeyword = "";
+        this.searchList = [];
+        this.searchDropdownVisible = false;
+        this.applySelection(item);
+      });
+    },
+    selectItem(item) {
+      if (!this.isTabEnabled(this.activeLevel)) {
+        return;
+      }
+      this.cancelPendingSync();
+      const level = this.activeLevel;
+      this.selectedPath = this.selectedPath.slice(0, level - 1);
+      this.selectedPath.push(item);
+      if (level >= this.maxLevel) {
+        this.applySelection(item);
+        this.popoverVisible = false;
+        return;
+      }
+      this.activeLevel = level + 1;
+      this.loadLevelItems(this.getAreaId(item));
+    },
+    applySelection(item) {
+      const path = this.selectedPath.length ? this.selectedPath : [item];
+      const last = path[path.length - 1] || item;
+      const label = this.buildPathLabel(path);
+      let formattedValue = this.formatPathValue(path);
+      if (formattedValue == null) {
+        const leafId = this.getAreaId(last);
+        if (leafId != null) {
+          formattedValue =
+            this.valueFormat === "leaf" ? leafId : String(leafId);
+        }
+      }
+      this.skipValueSync = true;
+      this.$emit("input", formattedValue);
+      this.$emit("update:labelValue", label);
+      this.$emit("change", { value: formattedValue, row: last, label });
+      this.$nextTick(() => {
+        this.skipValueSync = false;
+      });
+    },
+    handleClear() {
+      this.resetBrowseState(true);
+      this.popoverVisible = false;
+    },
+    resetBrowseState(emitEvent) {
+      this.searchKeyword = "";
+      this.searchList = [];
+      this.selectedPath = [];
+      this.activeLevel = 1;
+      this.levelItems = [];
+      if (emitEvent) {
+        this.$emit("input", null);
+        this.$emit("update:labelValue", null);
+        this.$emit("change", { value: null, row: null });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/variables.scss";
+
+.base-area {
+  width: 100%;
+  display: block;
+  box-sizing: border-box;
+}
+
+.base-area-trigger {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.base-area-input {
+  width: 100%;
+  cursor: pointer;
+
+  .base-area-clear {
+    cursor: pointer;
+    display: none;
+  }
+
+  &:hover .base-area-clear,
+  &.is-focus .base-area-clear {
+    display: inline-block;
+  }
+}
+
+.base-area-panel {
+  padding: 4px 0 0;
+  overflow: visible;
+}
+
+.base-area-search {
+  position: relative;
+  margin-bottom: 8px;
+  z-index: 2;
+}
+
+.base-area-search-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 20;
+}
+
+.base-area-dropdown-empty {
+  padding: 12px 10px;
+  text-align: center;
+  color: #909399;
+  font-size: 12px;
+}
+
+.base-area-fade-enter-active,
+.base-area-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.base-area-fade-enter,
+.base-area-fade-leave-to {
+  opacity: 0;
+}
+
+.base-area-result-item {
+  padding: 8px 10px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #606266;
+  cursor: pointer;
+  border-radius: 4px;
+
+  &:hover {
+    background: rgba($baseColor, 0.08);
+    color: $baseColor;
+  }
+
+  &.on {
+    background: rgba($baseColor, 0.12);
+    color: $baseColor;
+  }
+}
+
+.base-area-path {
+  padding: 6px 10px;
+  margin-bottom: 10px;
+  background: #f5f7fa;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.base-area-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  gap: 0;
+}
+
+.base-area-path-sep {
+  flex-shrink: 0;
+  padding: 0 2px;
+  font-size: 12px;
+  color: #c0c4cc;
+  line-height: 24px;
+  user-select: none;
+}
+
+.base-area-tab {
+  flex-shrink: 1;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0 4px;
+  height: 24px;
+  line-height: 24px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  font-size: 12px;
+  color: #909399;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.15s, border-color 0.15s;
+
+  &.active {
+    color: $baseColor;
+    border-bottom-color: $baseColor;
+    font-weight: 500;
+    background: transparent;
+  }
+
+  &.selected:not(.active) {
+    color: #303133;
+  }
+
+  &.disabled {
+    color: #c0c4cc;
+    cursor: not-allowed;
+    background: transparent;
+    pointer-events: none;
+  }
+
+  &:hover:not(.disabled):not(.active) {
+    color: $baseColor;
+  }
+}
+
+.base-area-grid-wrap {
+  padding: 8px;
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 8px;
+}
+
+.base-area-grid {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 120px;
+  max-height: 294px;
+  overflow-y: auto;
+  margin: 0 -4px;
+}
+
+.base-area-item {
+  width: calc(25% - 8px);
+  margin: 0 4px 8px;
+  padding: 0 10px;
+  height: 34px;
+  line-height: 34px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  font-size: 12px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    color: $baseColor;
+    border-color: $baseColor;
+  }
+
+  &.on {
+    background: $baseColor;
+    border-color: $baseColor;
+    color: #fff;
+  }
+}
+
+.base-area-empty {
+  width: 100%;
+  padding: 24px 0;
+  text-align: center;
+  color: #909399;
+  font-size: 12px;
+}
+
+.base-area-level-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+
+  .base-area-level-label {
+    flex: 1;
+    text-align: center;
+    font-size: 12px;
+    color: #606266;
+    line-height: 28px;
+    user-select: none;
+  }
+}
+</style>
+
+<style lang="scss">
+@import "~@/styles/variables.scss";
+
+/* el-popover 根节点为 inline span，需强制块级铺满 */
+.base-area {
+  width: 100% !important;
+  display: block !important;
+  box-sizing: border-box;
+
+  > span {
+    display: block !important;
+    width: 100% !important;
+    box-sizing: border-box;
+  }
+
+  .el-popover__reference-wrapper,
+  .el-popover__reference,
+  .base-area-trigger {
+    display: block !important;
+    width: 100% !important;
+    box-sizing: border-box;
+  }
+
+  .base-area-input.el-input {
+    width: 100% !important;
+    display: block !important;
+  }
+
+  .base-area-input .base-area-clear {
+    cursor: pointer;
+    display: none;
+  }
+
+  .base-area-input:hover .base-area-clear,
+  .base-area-input.is-focus .base-area-clear {
+    display: inline-block;
+  }
+}
+
+.base-area-popover {
+  padding: 10px 12px;
+  overflow: visible;
+  box-sizing: border-box;
+
+  .base-area-panel {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .base-area-search {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .base-area-search-input,
+  .base-area-search .el-input {
+    width: 100% !important;
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .base-area-tab.disabled {
+    color: #c0c4cc;
+    cursor: not-allowed;
+    background: transparent;
+    pointer-events: none;
+  }
+}
+</style>