chore: 重新优化各个逻辑

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "vue.codeActions.enabled": false
+}

app.vue

@@ -1,5 +1,21 @@
+<!--
+ * @Author: NMTuan
+ * @Email: NMTuan@qq.com
+ * @Date: 2023-06-30 19:16:42
+ * @LastEditTime: 2023-07-01 11:23:01
+ * @LastEditors: NMTuan
+ * @Description: 
+ * @FilePath: \laf_curd\app.vue
+-->
 <template>
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
 </template>
+<style>
+html,
+body {
+  @apply m-0;
+  @apply bg-teal-50 text-gray-600;
+}
+</style>

components/applications/list.vue

@@ -1,21 +1,26 @@
+<!--
+ * @Author: NMTuan
+ * @Email: NMTuan@qq.com
+ * @Date: 2023-06-30 21:03:04
+ * @LastEditTime: 2023-07-02 11:43:42
+ * @LastEditors: NMTuan
+ * @Description: 
+ * @FilePath: \laf_curd\components\applications\list.vue
+-->
 <template>
-    <div>
-        <h1>applications</h1>
-        <div v-if="error">error</div>
-        <ApplicationsListItem v-for="item in list" :data="item"></ApplicationsListItem>
-    </div>
+    <LayoutPanel title="Application" :loading="loading">
+        <ApplicationsListItem v-for="item in appStore.list" :data="item"></ApplicationsListItem>
+    </LayoutPanel>
 </template>
 <script setup>
-const error = ref(false)
-const list = ref([])
+const appStore = useAppStore()
+const loading = ref(false)
 
-request({
-    path: '/v1/applications'
-})
-    .then(res => {
-        list.value = res.data
-    })
-    .catch(err => {
-        error.value = true
-    })
+const getList = async () => {
+    loading.value = true
+    await appStore.fetch()
+    loading.value = false
+}
+
+getList()
 </script>

components/applications/list/func.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="text-sm">
+        <span class="button button--disabled">云函数</span>
+        <NuxtLink class="button" :to="{
+            name: 'app-appid-database', params: {
+                appid
+            }
+        }">数据库</NuxtLink>
+        <NuxtLink class="button" :to="{
+            name: 'app-appid-policy', params: {
+                appid
+            }
+        }">访问策略</NuxtLink>
+        <span class="button button--disabled">云存储</span>
+    </div>
+</template>
+<script setup>
+const props = defineProps({
+    appid: {
+        type: String,
+        default: ''
+    }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.button {
+    @apply px-2 py-1 ml-4 rounded;
+    @apply bg-teal-500 text-white;
+    @apply no-underline;
+    --at-apply: hover:(bg-teal-600);
+
+    &--disabled {
+        @apply bg-gray-200 text-gray-400;
+        @apply cursor-not-allowed;
+        --at-apply: hover:(bg-gray-300);
+    }
+}
+</style>

components/applications/list/item.vue

@@ -2,20 +2,17 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2023-06-30 21:07:14
- * @LastEditTime: 2023-06-30 21:53:11
+ * @LastEditTime: 2023-07-01 13:25:51
  * @LastEditors: NMTuan
  * @Description: 
  * @FilePath: \laf_curd\components\applications\list\item.vue
 -->
 <template>
-    <li class="p-4 hover:(bg-gray-100)">
-        <NuxtLink :to="{
-            name: 'app-appid', params: {
-                appid: data.appid
-            }
-        }">
+    <li class="flex items-center justify-between rounded p-4 hover:(bg-gray-50)">
+        <div>
             {{ data.name }} (appId: {{ data.appid }})
-        </NuxtLink>
+        </div>
+        <ApplicationsListFunc :appid='data.appid'></ApplicationsListFunc>
     </li>
 </template>
 <script setup>

components/database/list.vue

@@ -2,29 +2,26 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2023-06-30 21:25:04
- * @LastEditTime: 2023-06-30 21:54:01
+ * @LastEditTime: 2023-07-02 11:13:15
  * @LastEditors: NMTuan
  * @Description: 
  * @FilePath: \laf_curd\components\database\list.vue
 -->
 <template>
-    <div>
-        <h2>database</h2>
-        <div v-if="error">error</div>
-        <DatabaseListItem v-for="item in list" :data="item"></DatabaseListItem>
+    <div class="relative h-full">
+        <LayoutLoading :loading="loading"></LayoutLoading>
+        <DatabaseListItem v-for="item in collectionStore.list" :data="item"></DatabaseListItem>
     </div>
 </template>
 <script setup>
-const error = ref(false)
-const route = useRoute()
-const list = ref([])
-request({
-    path: `/v1/apps/${route.params.appid}/collections`,
-})
-    .then(res => {
-        list.value = res.data
-    })
-    .catch(err => {
-        error.value = true
-    })
+const collectionStore = useCollectionStore()
+const loading = ref(false)
+
+const getList = async () => {
+    loading.value = true
+    await collectionStore.fetch()
+    loading.value = false
+}
+
+getList()
 </script>

components/database/list/item.vue

@@ -1,22 +1,42 @@
 <template>
-    <li class="p-4 hover:(bg-gray-100)">
-        <NuxtLink :to="{
-            name: 'app-appid-collection-collectionid', params: {
-                appid: route.params.appid,
-                collectionid: data.name
-            }
-        }">
-            {{ data.name }}
-        </NuxtLink>
-        <!-- <pre>{{ data }}</pre> -->
-    </li>
+    <div class="item" :class="{
+        current: queryStore.collection.name === data.name
+    }" @click="handlerClick" :title="data.name">
+        <div class="flex-1 truncate">{{ data.name }}</div>
+        <div class="icon"></div>
+    </div>
 </template>
 <script setup>
-const route = useRoute()
+const queryStore = useQueryStore()
 const props = defineProps({
     data: {
         type: Object,
         default: () => { }
     }
 })
+const handlerClick = () => {
+    queryStore.$patch({ collection: props.data })
+}
 </script>
+<style scoped lang="scss">
+.item {
+    @apply flex items-center justify-between;
+    @apply px-4 py-2;
+    @apply truncate cursor-pointer;
+    --at-apply: hover:(bg-gray-50);
+
+    .icon {
+        @apply hidden;
+    }
+}
+
+.current {
+    @apply bg-teal-50 rounded;
+
+    .icon {
+        @apply i-ri-check-line;
+        @apply text-lg font-bold;
+        @apply block flex-shrink-0 text-teal-500;
+    }
+}
+</style>

components/database/policy.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="h-full flex flex-col items-center justify-center relative">
+        <LayoutLoading :loading="loading"></LayoutLoading>
+        <div class="i-ri-shield-keyhole-line text-8xl text-gray-200"></div>
+        <div class="text-lg mt-6">第一次使用，请初始化访问策略</div>
+        <div>
+            <button @click="handlerInit" class="button">初始化访问策略</button>
+        </div>
+    </div>
+</template>
+<script setup>
+const route = useRoute()
+const policy = useCookie(`laf_curd_${route.params.appid}_policy`)
+const loading = ref(false)
+
+const emits = defineEmits(['updatePolicy'])
+
+function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+const handlerInit = () => {
+    const cfm = confirm(`
+注意：
+
+此操作会在当前应用创建一个以laf_curd_开头的随机策略。
+并将策略名称临时保存在你当前浏览器。
+该策略拥有完全控制数据库的权限，请勿泄露。
+`)
+    if (!cfm) {
+        return
+    }
+
+    // 生成一个策略名字
+    const policyStr = `laf_curd_${route.params.appid}_${getRandomInt(479890, 1679615).toString(36)}`
+
+    loading.value = true
+    request({
+        method: 'POST',
+        path: `/v1/apps/${route.params.appid}/policies`,
+        body: {
+            name: policyStr
+        }
+    }).
+        then(response => {
+            emits('updatePolicy', policyStr)
+        })
+        .catch(err => {
+            alert('error')
+        })
+        .finally(() => {
+            loading.value = false
+        })
+}
+</script>
+<style scoped lang="scss">
+.button {
+    @apply text-base;
+    @apply bg-teal-500 text-white;
+    @apply px-4 py-2 mt-4;
+    @apply rounded border-none;
+    @apply cursor-pointer;
+    --at-apply: hover:(bg-teal-600);
+
+}
+</style>

components/database/response.vue

@@ -0,0 +1,41 @@
+<!--
+ * @Author: NMTuan
+ * @Email: NMTuan@qq.com
+ * @Date: 2023-07-01 17:34:07
+ * @LastEditTime: 2023-07-02 14:25:43
+ * @LastEditors: NMTuan
+ * @Description: 
+ * @FilePath: \laf_curd\components\database\response.vue
+-->
+<template>
+    <div class="break-words px-6 py-2">
+        <div v-if="!queryStore.response.ok && queryStore.response.message === 'Request failed with status code 404'">
+            404 !!!
+        </div>
+        <div v-if="!queryStore.response.ok && queryStore.response.message === 'permission denied'">
+            <div v-if="/^collection.*?not found$/.test(queryStore.response.data[0].error)">
+                权限不足，<span @click="createPolicy">一键创建策略</span>
+            </div>
+            <div v-if="queryStore.response.data[0].error === 'the expression evaluated to a falsy value'">
+                权限不足，<span @click="updatePolicy">一键更新策略</span>
+            </div>
+        </div>
+        <pre v-else>{{ queryStore.response }}</pre>
+
+    </div>
+</template>
+<script setup>
+const route = useRoute()
+const { appid } = route.params
+const queryStore = useQueryStore()
+const policyStore = usePolicyStore()
+const currentPolicy = useCookie(`laf_curd_policy_${appid}`)
+
+
+const createPolicy = async () => {
+    policyStore.createRule()
+}
+const updatePolicy = async () => {
+    policyStore.updateRule()
+}
+</script>