perf: optimized some styles

Synaptrix · Mar 13, 2023 · 3d872dc · 3d872dc
1 parent 535a620
commit 3d872dc
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 25 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,2 @@
 VITE_APP_NAME=ChatGPT
 VITE_OPEN_AI_URL=https://api.openai.com/v1/chat/completions
-VITE_DEFAULT_ROLE_NAME=默认角色
-VITE_DEFAULT_ROLE_DESCRIPTION=请以 markdown 的形式返回答案！
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + Vue + TS</title>
+    <title>ChatGPT</title>
   </head>
 
   <body>

diff --git a/src/components/Input/components/RoleList.vue b/src/components/Input/components/RoleList.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
 import { IconEdit, IconDelete, IconCheck } from '@arco-design/web-vue/es/icon'
 import { useRoleStore } from '@/stores'
+import { DEFAULT_ROLE } from '@/constants'
 import type { TablePayload } from '@/types'
 
-const defaultRoleName = import.meta.env.VITE_DEFAULT_ROLE_NAME
-const defaultRoleDescription = import.meta.env.VITE_DEFAULT_ROLE_DESCRIPTION
-
 const roleStore = useRoleStore()
 const { addRole, updateRole, deleteRole } = roleStore
 const { currentRole, roleList } = storeToRefs(roleStore)
@@ -14,7 +12,6 @@ const isEdit = ref(false)
 const editItem = ref<TablePayload>({})
 
 const handleEdit = (data: TablePayload) => {
-  // 修改完后没有确认修改而是直接修改另外一个
   handleUpdate()
 
   isEdit.value = true
@@ -50,7 +47,7 @@ watch(currentRole, handleUpdate)
     <template #content>
       <ul class="role-list">
         <li
-          class="bordered-bottom flex cursor-pointer items-center gap-4 p-4 text-[var(--color-text-1)]"
+          class="bordered-top flex cursor-pointer items-center gap-4 p-4 text-[var(--color-text-1)]"
           :style="{
             background:
               currentRole?.id === item.id
@@ -67,6 +64,7 @@ watch(currentRole, handleUpdate)
             <div class="flex flex-1 flex-col gap-2">
               <a-input
                 v-model="editItem.name"
+                allow-clear
                 v-if="isEdit && editItem.id === item.id"
                 @click="(e: any) => e.stopPropagation()"
               />
@@ -76,6 +74,7 @@ watch(currentRole, handleUpdate)
 
               <a-textarea
                 v-model="editItem.description"
+                allow-clear
                 v-if="isEdit && editItem.id === item.id"
                 @click="(e: any) => e.stopPropagation()"
               ></a-textarea>
@@ -88,8 +87,8 @@ watch(currentRole, handleUpdate)
           <div
             class="text-4 flex gap-2"
             v-if="
-              item.name !== defaultRoleName ||
-              item.description !== defaultRoleDescription
+              item.name !== DEFAULT_ROLE.name ||
+              item.description !== DEFAULT_ROLE.description
             "
             @click="(e) => e.stopPropagation()"
           >
@@ -111,20 +110,15 @@ watch(currentRole, handleUpdate)
 <style lang="scss">
 .role-popover {
   .arco-trigger-content {
-    @apply flex max-h-[calc(100vh-54px)] flex-col px-0 py-4;
+    @apply flex max-h-[calc(100vh-56px)] flex-col rounded-t-xl px-0 py-4;
 
     .arco-popover-title {
-      @apply p-b-4;
+      @apply p-4 pt-0;
     }
 
     .arco-popover-content {
       @apply mt-0 flex-1 overflow-auto;
     }
   }
-  .role-list {
-    li:last-child {
-      border-bottom: 0;
-    }
-  }
 }
 </style>
diff --git a/src/constants/shared.ts b/src/constants/shared.ts
@@ -2,3 +2,8 @@ export enum THEME {
   light = 'light',
   dark = 'dark'
 }
+
+export enum DEFAULT_ROLE {
+  name = '默认角色',
+  description = '请以 markdown 的形式返回答案！'
+}
diff --git a/src/sqls/index.ts b/src/sqls/index.ts
@@ -2,6 +2,7 @@ import { configDir } from '@tauri-apps/api/path'
 import Database from 'tauri-plugin-sql-api'
 import { dialogErrorMessage, deleteConfirm } from '@/utils'
 import { isString, isObject } from '@/utils'
+import { DEFAULT_ROLE } from '@/constants'
 import type { TableName, TablePayload, WherePayload } from '@/types'
 
 const dbFile = import.meta.env.DEV ? 'sql.dev.db' : 'sql.db'
@@ -70,14 +71,14 @@ export const initSQL = async () => {
   )
 
   await insertSQL('role', {
-    name: import.meta.env.VITE_DEFAULT_ROLE_NAME,
-    description: import.meta.env.VITE_DEFAULT_ROLE_DESCRIPTION
+    name: DEFAULT_ROLE.name,
+    description: DEFAULT_ROLE.description
   })
 
   for (const item of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
     await insertSQL('role', {
-      name: import.meta.env.VITE_DEFAULT_ROLE_NAME + item,
-      description: import.meta.env.VITE_DEFAULT_ROLE_DESCRIPTION
+      name: DEFAULT_ROLE.name + item,
+      description: DEFAULT_ROLE.description
     })
   }
 }

diff --git a/src/stores/theme.ts b/src/stores/theme.ts
@@ -7,7 +7,7 @@ export const useThemeStore = defineStore(
     const themeMode = ref(THEME.light)
 
     const themeClass = computed(() =>
-      themeMode.value === THEME.light ? 'bg-white/60' : 'bg-black/60'
+      themeMode.value === THEME.light ? 'bg-white/70' : 'bg-black/70'
     )
 
     const toggleTheme = () => {

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -4,8 +4,6 @@
 interface ImportMetaEnv {
   readonly VITE_APP_NAME: string
   readonly VITE_OPEN_AI_URL: string
-  VITE_DEFAULT_ROLE_NAME: string
-  VITE_DEFAULT_ROLE_DESCRIPTION: string
 }
 
 // eslint-disable-next-line no-unused-vars