feat(client): enhance component styles

plugins/frontend/auth/client/icons/at.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon k-icon-at" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"/>
+  </svg>
+</template>

plugins/frontend/auth/client/icons/lock.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon k-icon-lock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path fill="currentColor" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"/>
+  </svg>
+</template>

plugins/frontend/auth/client/index.ts

@@ -2,10 +2,14 @@ import { Context, icons, message, router, send, store } from '@koishijs/client'
 import { config } from './utils'
 import Login from './login.vue'
 import Profile from './profile.vue'
+import At from './icons/at.vue'
+import Lock from './icons/lock.vue'
 import SignIn from './icons/sign-in.vue'
 import SignOut from './icons/sign-out.vue'
 import UserFull from './icons/user-full.vue'
 
+icons.register('at', At)
+icons.register('lock', Lock)
 icons.register('sign-in', SignIn)
 icons.register('sign-out', SignOut)
 icons.register('user-full', UserFull)

plugins/frontend/auth/client/login.vue

@@ -15,21 +15,29 @@
       </h1>
       <h1 v-else><span>平台账户登录</span></h1>
       <template v-if="config.authType === 0">
-        <k-input prefix="at" placeholder="平台名" v-model="config.platform"/>
-        <k-input prefix="user" placeholder="账号" v-model="config.userId" @enter="loginWithAccount"/>
+        <el-input placeholder="平台名" v-model="config.platform" #prefix>
+          <k-icon name="at"></k-icon>
+        </el-input>
+        <el-input placeholder="账号" v-model="config.userId" @keypress.enter.stop="loginWithAccount" #prefix>
+          <k-icon name="user"></k-icon>
+        </el-input>
         <p class="error" v-if="message">{{ message }}</p>
         <div class="control">
           <k-button @click="$router.back()">返回</k-button>
           <k-button @click="loginWithAccount">获取验证码</k-button>
         </div>
       </template>
       <template v-else>
-        <k-input prefix="user" placeholder="用户名" v-model="config.name"/>
-        <k-input prefix="lock" placeholder="密码" v-model="config.password" @enter="loginWithPassword"
-          :type="config.showPass ? 'text' : 'password'"
-          :suffix="config.showPass ? 'eye' : 'eye-slash'"
-          @click-suffix="config.showPass = !config.showPass"
-        />
+        <el-input placeholder="用户名" v-model="config.name" #prefix>
+          <k-icon name="user"></k-icon>
+        </el-input>
+        <el-input placeholder="密码" v-model="config.password" @keypress.enter.stop="loginWithPassword"
+          :type="config.showPass ? 'text' : 'password'">
+          <template #prefix><k-icon name="lock"></k-icon></template>
+          <template #suffix>
+            <k-icon :name="config.showPass ? 'eye' : 'eye-slash'" @click="config.showPass = !config.showPass"></k-icon>
+          </template>
+        </el-input>
         <p class="error" v-if="message">{{ message }}</p>
         <div class="control">
           <k-button @click="$router.back()">返回</k-button>
@@ -110,7 +118,7 @@ section.login {
     font-weight: bold;
   }
 
-  .k-input {
+  .el-input {
     display: block;
     max-width: 400px;
     margin: 1rem auto;

plugins/frontend/auth/client/utils.ts

@@ -7,6 +7,7 @@ interface AuthConfig extends Partial<UserAuth> {
   platform?: string
   userId?: string
   showPass?: boolean
+  password?: string
 }
 
 export const config = createStorage<AuthConfig>('auth', 1, () => ({

plugins/frontend/client/app/tsconfig.json

@@ -1,7 +1,16 @@
 {
-  "extends": "../../tsconfig.base",
   "compilerOptions": {
     "rootDir": ".",
+    "target": "es2020",
+    "module": "esnext",
+    "composite": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "strictBindCallApply": true,
+    "types": [
+      "@koishijs/client/global",
+    ],
   },
   "include": [
     ".",

plugins/frontend/client/client/components/common/index.ts

@@ -1,10 +1,8 @@
 import { App } from 'vue'
 import Button from './button.vue'
 import Choose from './choose.vue'
-import Input from './input.vue'
 
 export default function (app: App) {
   app.component('k-button', Button)
   app.component('k-choose', Choose)
-  app.component('k-input', Input)
 }

plugins/frontend/client/client/components/form/primitive.vue

@@ -14,13 +14,15 @@
             v-model="value" :disabled="disabled" :max="schema.meta.max" :min="schema.meta.min" :step="schema.meta.step"
           ></el-input-number>
         </template>
-        <k-input v-else v-model="value" :disabled="disabled" #suffix
+        <el-input v-else v-model="value" :disabled="disabled"
           :style="{ width: schema.meta.role === 'url' ? '18rem' : '12rem' }" :type="type">
-          <a v-if="schema.meta.role === 'url'" :href="value" target="_blank" rel="noopener noreferrer">
-            <k-icon name="external"></k-icon>
-          </a>
-          <k-icon v-else-if="schema.meta.role === 'secret'" :name="showPass ? 'eye' : 'eye-slash'" @click="showPass = !showPass"></k-icon>
-        </k-input>
+          <template #suffix v-if="schema.meta.role === 'url'">
+            <k-icon name="external" @click="onClickExternal(value)"></k-icon>
+          </template>
+          <template #suffix v-else-if="schema.meta.role === 'secret'">
+            <k-icon :name="showPass ? 'eye' : 'eye-slash'" @click="showPass = !showPass"></k-icon>
+          </template>
+        </el-input>
       </div>
     </div>
   </div>
@@ -51,4 +53,27 @@ const type = computed(() => {
   return type === 'number' ? 'number' : meta.role === 'secret' && !showPass.value ? 'password' : 'text'
 })
 
+function onClickExternal(value: string) {
+  if (!value) return
+  open(value, '', 'noopener=yes,noreferrer=yes')
+}
+
 </script>
+
+<style lang="scss">
+
+.schema-item {
+  .el-input {
+    .k-icon {
+      color: var(--fg3);
+      transition: color 0.3s ease;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--fg1);
+      }
+    }
+  }
+}
+
+</style>

plugins/frontend/client/client/components/form/schema.vue

@@ -17,7 +17,7 @@
     <ul>
       <li v-for="(_, index) in config" :key="index">
         <k-icon name="times-full" class="remove" @click="config.splice(index, 1)"></k-icon>
-        <k-input v-model="config[index]" class="hidden"></k-input>
+        <el-input v-model="config[index]"></el-input>
       </li>
     </ul>
   </div>
@@ -34,8 +34,8 @@
     <ul>
       <li v-for="(_, key) in config">
         <k-icon name="times-full" class="remove" @click="delete config[key]"></k-icon>
-        <k-input :model-value="key" @update:model-value="v => (config[v] = config[key], delete config[key])" class="hidden"></k-input>
-        <k-input v-model="config[key]" class="hidden"></k-input>
+        <el-input :model-value="key" @update:model-value="v => (config[v] = config[key], delete config[key])"></el-input>
+        <el-input v-model="config[key]"></el-input>
       </li>
     </ul>
   </div>
@@ -163,14 +163,11 @@ function isPrimitive(schema: Schema) {
     float: right;
   }
 
-  .k-input .k-icon {
-    height: 0.75rem;
-    color: var(--fg3);
-    transition: color 0.3s ease;
-
-    &:hover {
-      color: var(--fg1);
-      cursor: pointer;
+  li .el-input {
+    display: inline;
+    > input {
+      border: none;
+      max-width: 200px;
     }
   }
 

plugins/frontend/client/client/components/icons/svg/external.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <svg class="k-icon k-icon-external" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"/>
   </svg>
 </template>

plugins/frontend/client/client/components/style.scss

@@ -79,6 +79,10 @@ html.dark {
   --el-bg-color: transparent;
 }
 
+.el-input .k-icon {
+  height: 0.75rem;
+}
+
 .el-input__inner {
   --el-input-bg-color: transparent;
 }