feat: 登录，指标页

src/router/modules/index.ts

@@ -16,7 +16,7 @@ export default {
       },
       children: [
         {
-          path: "/IndexDefine/index/define",
+          path: "/IndexDefine/children/define",
           name: "IndexDefine",
           component: () => import("@/views/indexDefine/children/define.vue"),
           meta: {

src/style/login.css

@@ -1,7 +1,7 @@
 .wave {
   position: fixed;
   height: 100%;
-  width: 80%;
+  width: 100%;
   left: 0;
   bottom: 0;
   z-index: -1;

src/views/indexDefine/children/components/drawer.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox } from "element-plus";
+import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
+// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
+const drawer = ref(false);
+const direction = ref<DrawerProps["direction"]>("rtl");
+const formLabelAlign = reactive({
+  name: "",
+  region: "",
+  type: ""
+});
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm("配置项未保存，确认关闭", {
+    type: "warning"
+  }).then(() => {
+    drawer.value = false;
+  });
+};
+function cancelClick() {
+  drawer.value = false;
+}
+function confirmClick() {
+  console.log(1111);
+}
+const open = row => {
+  drawer.value = true;
+};
+defineExpose({
+  open
+});
+</script>
+
+<template>
+  <div>
+    <el-drawer
+      v-model="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+    >
+      <template #header>
+        <h4>指标详情</h4>
+      </template>
+      <template #default>
+        <div>
+          <el-form
+            label-position="top"
+            label-width="auto"
+            :model="formLabelAlign"
+          >
+            <el-form-item label="指标编号" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标名称" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标分类" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标定义" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标口径" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="来源" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="状态" label-position="top">
+              <el-input />
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template #footer>
+        <div>
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>

src/views/indexDefine/children/define.vue

@@ -3,10 +3,13 @@ defineOptions({
   name: "IndexDefine"
 });
 import { ref } from "vue";
-import dialogVue from "./dialog.vue";
+import dialogVue from "./components/dialog.vue";
+import drawerVue from "./components/drawer.vue";
 import { Edit, More } from "@element-plus/icons-vue";
 const value = ref("");
 const dialogShow = ref();
+const drawerShow = ref();
+const showDrawer = ref(false);
 const options = [
   {
     value: "Option1",
@@ -71,15 +74,20 @@ const newAddIndex = () => {
 const close = () => {
   showDialog.value = false;
 };
-const setShow = ref(false);
-const setting = row => {
-  row.show = !row.show;
-  setShow.value = !setShow.value;
+const edit = row => {
+  showDrawer.value = true;
+  drawerShow.value.open();
+  console.log(row);
+};
+const setDelete = row => {
+  console.log(row);
+  console.log(11111);
 };
 </script>
 
 <template>
   <div>
+    <drawerVue ref="drawerShow" v-model:drawerValue="showDrawer" />
     <dialogVue
       ref="dialogShow"
       v-model:modelValue="showDialog"
@@ -153,15 +161,28 @@ const setting = row => {
         <el-table-column prop="address" label="更新时间" />
         <el-table-column label="操作">
           <template #default="{ row }">
-            <el-button link :icon="Edit" />
-            <el-button link :icon="More" @click="setting(row)" />
-            <div v-if="row.show" class="setBox">
-              <p>删除</p>
-              <p>发布</p>
-              <p>下架</p>
-              <p>日志</p>
-              <p>数据</p>
-            </div>
+            <!-- <el-button link :icon="Edit" /> -->
+            <el-dropdown trigger="click">
+              <span class="el-dropdown-link navbar-bg-hover select-none">
+                <el-icon @click="edit(row)"><Edit /></el-icon>
+              </span>
+            </el-dropdown>
+            <el-dropdown class="ml-2" trigger="click">
+              <span class="el-dropdown-link navbar-bg-hover select-none">
+                <el-icon><More /></el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu class="setting">
+                  <el-dropdown-item @click="setDelete(row)">
+                    删除
+                  </el-dropdown-item>
+                  <el-dropdown-item> 发布 </el-dropdown-item>
+                  <el-dropdown-item> 下架 </el-dropdown-item>
+                  <el-dropdown-item> 日志 </el-dropdown-item>
+                  <el-dropdown-item> 数据 </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </template>
         </el-table-column>
       </el-table>
@@ -197,12 +218,7 @@ const setting = row => {
   // background-color: #f2f3f5; /* 设置背景色 */
 }
 
-.setBox {
-  position: absolute;
-  right: 50px;
-  z-index: 999 !important;
+.setting {
   font-size: 12px;
-  background: #fff;
-  border: 1px solid red;
 }
 </style>

src/views/login/index.vue

@@ -79,8 +79,8 @@ onBeforeUnmount(() => {
 <template>
   <div class="select-none">
     <img :src="bg" class="wave" />
-    <div class="flex-c absolute right-5 top-3">
-      <!-- 主题 -->
+    <!-- 主题 -->
+    <!-- <div class="flex-c absolute right-5 top-3">
       <el-switch
         v-model="dataTheme"
         inline-prompt
@@ -88,19 +88,85 @@ onBeforeUnmount(() => {
         :inactive-icon="darkIcon"
         @change="dataThemeChange"
       />
-    </div>
+    </div> -->
     <div class="login-container">
       <div class="img">
-        <component :is="toRaw(illustration)" />
+        <el-card style="max-width: 600px">
+          <template #header>
+            <div class="card-header">
+              <h4 class="text-center">账号登录</h4>
+            </div>
+          </template>
+          <el-form
+            ref="ruleFormRef"
+            :model="ruleForm"
+            :rules="loginRules"
+            size="large"
+          >
+            <Motion :delay="100">
+              <el-form-item
+                :rules="[
+                  {
+                    required: true,
+                    message: '请输入账号',
+                    trigger: 'blur'
+                  }
+                ]"
+                prop="username"
+              >
+                <el-input
+                  v-model="ruleForm.username"
+                  clearable
+                  placeholder="账号"
+                  :prefix-icon="useRenderIcon(User)"
+                />
+              </el-form-item>
+            </Motion>
+
+            <Motion :delay="150">
+              <el-form-item prop="password">
+                <el-input
+                  v-model="ruleForm.password"
+                  clearable
+                  show-password
+                  placeholder="密码"
+                  :prefix-icon="useRenderIcon(Lock)"
+                />
+              </el-form-item>
+            </Motion>
+
+            <Motion :delay="250">
+              <el-button
+                class="w-full mt-4"
+                size="default"
+                type="primary"
+                :loading="loading"
+                @click="onLogin(ruleFormRef)"
+              >
+                登录
+              </el-button>
+            </Motion>
+          </el-form>
+          <template #footer>
+            <div class="text-center gongshi">
+              <p>提供商：浙江易视通联信息科技有限公司</p>
+              <p>
+                备案号：浙ICP备17054630号-6<span class="ml-3"
+                  >版本号：v0.2.1</span
+                >
+              </p>
+            </div>
+          </template>
+        </el-card>
       </div>
       <div class="login-box">
         <div class="login-form">
-          <avatar class="avatar" />
+          <!-- <avatar class="avatar" /> -->
           <Motion>
-            <h2 class="outline-none">{{ title }}</h2>
+            <!-- <h2 class="outline-none">{{ title }}</h2> -->
           </Motion>
 
-          <el-form
+          <!-- <el-form
             ref="ruleFormRef"
             :model="ruleForm"
             :rules="loginRules"
@@ -149,7 +215,7 @@ onBeforeUnmount(() => {
                 登录
               </el-button>
             </Motion>
-          </el-form>
+          </el-form> -->
         </div>
       </div>
     </div>
@@ -164,4 +230,13 @@ onBeforeUnmount(() => {
 :deep(.el-input-group__append, .el-input-group__prepend) {
   padding: 0;
 }
+
+.gongshi {
+  // font-family: PingFangSC-Regular;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #333;
+  text-align: center;
+}
 </style>