test for customer component

admin-fe/package.json

@@ -22,6 +22,7 @@
     "@vitejs/plugin-vue-jsx": "^2.1.1",
     "typescript": "^4.9.3",
     "vite": "^3.2.4",
+    "less": "^4.1.3",
     "vue-tsc": "^1.0.11"
   }
 }

admin-fe/src/App.vue

@@ -1,27 +1,42 @@
 <template>
-    <div>
-        <button @click="showMessage">显示消息</button>
-        <router-view/>
+  <div>
+    <button @click="showMessage">显示消息</button>
+    <div class="demo-box">
+      <PInput placeholder="测试21">
+        <template #suffix>
+          <span>密码</span>
+        </template>
+      </PInput>
+      <PInput placeholder="测试12" />
     </div>
+    <router-view/>
+  </div>
 </template>
 
 <script lang="ts">
 
 import message from "./components/message";
-
+import PInput from "./input/index.vue";
 
 export default {
-    name: "App",
-    setup() {
-        return {
-            showMessage() {
-                message.toast('test display')
-            }
-        }
+  name: "App",
+  components: {PInput},
+
+  setup() {
+    return {
+      showMessage() {
+        message.toast('test display')
+      }
     }
+  }
 }
 </script>
 
 <style scoped>
-
+.demo-box{
+  width: 500px;
+  border: solid 1px #f00;
+  margin: auto;
+  padding: 20px;
+}
 </style>

admin-fe/src/assets/app.css

@@ -2,6 +2,12 @@
     --primary-color: #fff;
     --primary-color-text: #333;
     --font-size: 14px;
+    --font-size-small: calc(var(--font-size) - 2px);
+    --font-size-big: calc(var(--font-size) + 2px);
+    --font-size-large: calc(var(--font-size) + 4px);
+    --border-radius: 1px;
+    --border-radius-middle: calc(var(--border-radius) + 2px);
+    --border-radius-large: calc(var(--border-radius) + 3px);
 }
 
 * {
@@ -36,11 +42,13 @@ body {
     width: 100%;
     pointer-events: none;
 }
+
 .message-notice {
 
     padding: 8px;
     text-align: center
 }
+
 .message-notice-content {
     display: inline-block;
     padding: 10px 16px;

admin-fe/src/input/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <span class="p-input-wrapper"
+        :class="{'p-input-wrapper-group':($slots.prefix || $slots.suffix ),'p-input-box-focus':state.focus}">
+    <span v-if="$slots.prefix" class="p-input-prefix"><slot name="prefix"/></span>
+    <input :type="type || 'text'" @focus="state.focus = true"
+           @blur="state.focus = false"
+           :placeholder="placeholder"
+           class="p-input" :class="{'p-input-box-focus':state.focus && !($slots.suffix || $slots.prefix)}">
+    <span v-if="$slots.suffix" class="p-input-suffix"><slot name="suffix"/></span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+
+import {reactive, ref, useSlots} from "vue";
+
+interface PInputEvents {
+}
+
+type PInputProps = {
+  placeholder?: string
+  type?: 'text' | 'password' | 'textarea'
+}
+
+defineProps<PInputProps>()
+const emit = defineEmits<PInputEvents>()
+const slots = useSlots()
+const state = reactive({
+  focus: false,
+  hover: false
+})
+
+</script>
+
+<style lang="less">
+.p-input-box-focus {
+
+  border-color: #2a7dc9;
+  box-shadow: 0 0 0 2px #0960bd33;
+  outline: 0;
+}
+
+.p-input {
+  box-sizing: border-box;
+  margin: 0;
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  min-width: 0;
+  padding: 4px 11px;
+  color: #000000d9;
+  font-size: 14px;
+  line-height: 1.5715;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  transition: all .3s;
+
+  &::-moz-placeholder {
+    opacity: 1
+  }
+
+  &::placeholder {
+    color: #bfbfbf;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none
+  }
+
+
+  &:placeholder-shown {
+    text-overflow: ellipsis
+  }
+
+  &:hover {
+    border-color: #2a7dc9;
+    border-right-width: 1px !important
+  }
+
+  .p-input-rtl .p-input:hover {
+    border-right-width: 0;
+    border-left-width: 1px !important
+  }
+
+  &:focus, .p-input-focused {
+    border-right-width: 1px !important;
+  }
+
+  .p-input-disabled {
+    color: #00000040;
+    background-color: #f5f5f5;
+    border-color: #d9d9d9;
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 1
+  }
+}
+
+
+.p-input-wrapper {
+  display: inline-block;
+}
+
+.p-input-wrapper-group {
+  display: inline-flex;
+  position: relative;
+  max-width: 100%;
+  min-width: 0;
+  padding: 4px 11px;
+  color: #000000d9;
+  font-size: 14px;
+  line-height: 1.5715;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: var(--border-radius);
+  transition: all .3s;
+
+  .p-input {
+    padding: 0;
+    border: none;
+    outline: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+
+.p-input-prefix, .p-input-suffix {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+</style>

admin-fe/vite.config.js

@@ -3,7 +3,7 @@ import vueJsxPlugin from "@vitejs/plugin-vue-jsx";
 
 export default {
     server: {
-        port: 10086
+        host:'::'
     },
     // 必须配置vue插件
     plugins: [