账号界面

ui/packages/common/area/AiArea.vue

@@ -38,13 +38,11 @@
   </section>
 </template>
 <script>
-import AiHighlight from "../layout/AiHighlight";
-import instance from "../../lib/js/request";
-import Area from "../../lib/js/area";
+import instance from "../../../lib/js/request";
+import Area from "../../../lib/js/area";
 
 export default {
   name: 'AiArea',
-  components: {AiHighlight},
   inject: {
     elFormItem: {default: ""},
     elForm: {default: ''},

ui/packages/common/area/AiAreaTree.vue

@@ -0,0 +1,67 @@
+<script>
+import instance from "dui/lib/js/request";
+
+export default {
+  name: "AiAreaTree",
+  props: {
+    instance: {default: () => instance},
+    action: {default: "/admin/area/queryAreaByParentId"},
+    rootId: String,
+    value: String,
+    range: {default: 5} //可选最小级别地区
+  },
+  model: {
+    prop: "value",
+    event: "input"
+  },
+  data() {
+    return {
+      areaProps: {
+        label: "name",
+        isLeaf: "isLeaf"
+      }
+    }
+  },
+  methods: {
+    getAreas(node, resolve) {
+      let id = node.data?.id
+      if (node.level == 0) {
+        id = this.rootId
+      }
+      this.getAreasByParent(id).then(resolve)
+    },
+    handleClick(data) {
+      this.$emit("input", data.id)
+    },
+    getAreasByParent(id) {
+      return this.instance.post(this.action, null, {
+        withoutToken: !0,
+        params: {id}
+      }).then(res => {
+        return res.data?.map(e => ({...e, isLeaf: e.type == this.range})) || []
+      })
+    }
+  },
+}
+</script>
+
+<template>
+  <el-scrollbar class="AiAreaTree">
+    <el-tree :load="getAreas" @node-click="handleClick" lazy :props="areaProps"/>
+  </el-scrollbar>
+</template>
+
+<style scoped lang="scss">
+.AiAreaTree {
+  min-width: 200px;
+  height: 100%;
+
+  :deep(.el-scrollbar__wrap) {
+    overflow-x: hidden;
+  }
+
+  :deep(.el-tree) {
+    background-color: transparent;
+  }
+}
+</style>

ui/packages/layout/AiPage.vue

@@ -0,0 +1,58 @@
+<script>
+import AiTitle from "dui/packages/basic/AiTitle.vue";
+
+export default {
+  name: "AiPage",
+  components: {AiTitle},
+  props: {
+    contentString: {default: "card"}
+  }
+}
+</script>
+
+<template>
+  <section class="AiPage">
+    <slot v-if="$slots.title" name="title"/>
+    <ai-title v-else-if="$attrs.title" :title="$attrs.title" isShowBottomBorder/>
+    <div class="fill main">
+      <div class="left">
+        <slot name="left"/>
+      </div>
+      <div class="fill" :class="[contentString]">
+        <slot/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.AiPage {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 0 20px;
+  overflow: hidden;
+  background: #f3f6f9;
+
+  .main {
+    display: flex;
+    padding: 20px 0;
+    gap: 10px;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .card {
+    padding: 12px 16px 12px;
+    background: #FFFFFF;
+    border-radius: 2px;
+    box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
+  }
+
+  .left {
+    max-width: 50%;
+    width: auto;
+  }
+}
+</style>