perf(views): 初步编写"账号管理"页面

src/views/user-manage/UserManage.vue

@@ -1,3 +1,97 @@
+<script setup lang="ts">
+import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
+
+const addDelete = () => {};
+const addAccount = () => {};
+</script>
+
 <template>
-  <div>用户管理</div>
+  <div>
+    <AFlex justify="space-between" class="account-header">
+      <div class="text-top">账号管理</div>
+      <div>
+        <AButton class="icon-button default-button" @click="addDelete">
+          <AFlex align="center">
+            <SvgIcon name="delete" />
+            <span>删除</span>
+          </AFlex>
+        </AButton>
+        <AButton type="primary" class="icon-button button-monitoring" @click="addAccount">
+          <AFlex align="center">
+            <SvgIcon name="plus" />
+            <span> 添加 </span>
+          </AFlex>
+        </AButton>
+      </div>
+    </AFlex>
+    <AFlex>
+      <OrganizationalStructure />
+      <div class="account-content">
+        <AFlex wrap="wrap" justify="space-between">
+          <AFlex align="center">
+            <div class="account-content-text">搜索</div>
+            <AInput class="input-width" placeholder="请输入手机号、姓名" />
+          </AFlex>
+          <AFlex align="center">
+            <div class="account-content-text">角色</div>
+            <AInput class="input-width" placeholder="请输入手机号、姓名" />
+          </AFlex>
+          <AFlex align="center">
+            <div class="account-content-text">创建时间</div>
+            <AInput class="input-width" placeholder="请输入手机号、姓名" />
+          </AFlex>
+          <AFlex align="center">
+            <div class="account-content-text">到期时间</div>
+            <AInput class="input-width" placeholder="请输入手机号、姓名" />
+          </AFlex>
+          <AFlex align="center">
+            <div class="account-content-text">状态</div>
+            <AInput class="input-width" placeholder="请输入手机号、姓名" />
+          </AFlex>
+        </AFlex>
+      </div>
+    </AFlex>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.input-width {
+  width: 256px;
+}
+
+.account-content-text {
+  width: 56px;
+  margin-right: 12px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: rgb(0 0 0 / 85%);
+  text-align: right;
+}
+
+.account-content {
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  background: #fff;
+  border-radius: 16px;
+}
+
+.account-header {
+  margin-bottom: 16px;
+}
+
+.button-monitoring {
+  margin-left: 16px;
+}
+
+.text-top {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 32px;
+  color: rgb(0 0 0 / 85%);
+  text-align: left;
+}
+</style>