✨ feat(sql): 添加数据库测试

src/config/db.ts

@@ -1,6 +1,7 @@
 import Database from '@tauri-apps/plugin-sql'
 
+let db: Database
 export async function initDB() {
-  const db = await Database.load('sqlite:store.db')
-  console.log('db: ', db)
+  if (!db) db = await Database.load('sqlite:store.db')
+  return db
 }

src/main.ts

@@ -7,10 +7,8 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { createPinia } from 'pinia'
 import i18n from './i18n'
 import './styles.css'
-import { initDB } from './config/db'
 import './element.scss'
 
-initDB()
 const pinia = createPinia()
 const app = createApp(App).use(pinia).use(ElementPlus).use(i18n).use(router).mount('#app')
 // for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

src/views/layout/components/Header.vue

@@ -1,48 +1,59 @@
 <template>
-    <header class="flex h-[100px] items-center px-[48px] border-b-[1px] border-b-[#e6e6e6] justify-between ">
-            <div class="flex items-center">
-                <img class="w-[156px] mr-[10px]" src="/imgs/logo.svg" alt="">
-                <el-input v-model="keword" :input-style="{ boxShadow: 'none' }" style="width: 240px"
-                    placeholder="Please input" :prefix-icon="Search" />
-            </div>
-            <div class="flex items-center coursor-pointer">
-                <el-dropdown placement="bottom-start" trigger="click" size="large">
-
-                    <div class="flex items-center h-[42px] border rounded-[8px] border-[#e6e6e6] px-[10px]">
-                        <img class="w-[24px] h-[24px] mr-[5px]" src="/imgs/earth.svg" alt="" />
-                          {{ curLang }} 
-                    </div>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item v-for="(item,index) in langs" :key="index">
-                                <span @click="locale=item">{{ item }}</span>
-                            </el-dropdown-item>
-                           
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
-                <div class="flex items-center ml-[10px]">
-                    <div class="w-[42px] h-[42px] overflow-hidden rounded-full">
-                        <img class="w-full h-full" src="/imgs/avater.svg" alt="">
-                    </div>
-                    <div class="ml-[5px] flex flex-col justify-around h-[42px]">
-                        <div class="text-[#333] text-[14px] font-bold">周星星</div>
-                        <div class="text-[#999] text-[10px]">出纳员</div>
-                    </div>
-                </div>
-            </div>
-        </header>
+  <header
+    class="flex h-[100px] items-center px-[48px] border-b-[1px] border-b-[#e6e6e6] justify-between"
+  >
+    <div @click="execSQLTest" class="flex items-center">
+      <img class="w-[156px] mr-[10px]" src="/imgs/logo.svg" alt="" />
+      <el-input
+        v-model="keword"
+        :input-style="{ boxShadow: 'none' }"
+        style="width: 240px"
+        placeholder="Please input"
+        :prefix-icon="Search"
+      />
+    </div>
+    <div class="flex items-center coursor-pointer">
+      <el-dropdown placement="bottom-start" trigger="click" size="large">
+        <div class="flex items-center h-[42px] border rounded-[8px] border-[#e6e6e6] px-[10px]">
+          <img class="w-[24px] h-[24px] mr-[5px]" src="/imgs/earth.svg" alt="" />
+          {{ curLang }}
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(item, index) in langs" :key="index">
+              <span @click="locale = item">{{ item }}</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <div class="flex items-center ml-[10px]">
+        <div class="w-[42px] h-[42px] overflow-hidden rounded-full">
+          <img class="w-full h-full" src="/imgs/avater.svg" alt="" />
+        </div>
+        <div class="ml-[5px] flex flex-col justify-around h-[42px]">
+          <div class="text-[#333] text-[14px] font-bold">周星星</div>
+          <div class="text-[#999] text-[10px]">出纳员</div>
+        </div>
+      </div>
+    </div>
+  </header>
 </template>
 <script setup>
-import { computed,ref } from 'vue';
+import { computed, ref } from 'vue'
 import { Search } from '@element-plus/icons-vue'
-import {messages} from '../../../i18n/index'
+import { messages } from '../../../i18n/index'
+import { initDB } from '@/config/db'
 import { useI18n } from 'vue-i18n'
 const { t, locale } = useI18n()
-const langs = computed(()=>Object.keys(messages))
-const curLang= computed(()=>locale.value)
+const langs = computed(() => Object.keys(messages))
+const curLang = computed(() => locale.value)
 const keword = ref('')
-function changeLanguage(lang){
-    locale.value = lang
+function changeLanguage(lang) {
+  locale.value = lang
 }
-</script>
+async function execSQLTest() {
+  const db = await initDB()
+  const reslut = await db.select('SELECT * from todos')
+  console.log('reslut: ', reslut)
+}
+</script>

src/views/menu/index.vue

@@ -72,9 +72,9 @@
         </div>
       </div>
     </div>
-    <div class="w-[500px] h-full overflow-hidden border-l border-gray-200">
+    <!-- <div class="w-[500px] h-full overflow-hidden border-l border-gray-200">
       <rightOrder></rightOrder>
-    </div>
+    </div> -->
     <OrderDrawer v-model:show="show" />
   </div>
 </template>
@@ -84,16 +84,16 @@ import { useStore } from '../../stores'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
-import rightOrder from './components/rightOrder/rightOrder.vue'
+// import rightOrder from './components/rightOrder/rightOrder.vue'
 import OrderDrawer from './components/order-drawer.vue'
 
 const { t } = useI18n()
 const store = useStore()
 const { count } = storeToRefs(store)
 const scrollRef = ref(null)
-function handleRightClick() {
-  scrollRef.value.scrollLeft += 100
-}
+// function handleRightClick() {
+//  scrollRef.value.scrollLeft += 100
+// }
 
 // 计算元素宽度
 const calculateItemWidth = () => {